feat: add menu trigger component (#135)

packages/react/src/components/menu/MenuTrigger.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import type * as Polymophic from '@/utilities/polymorphic'
+import type { ButtonProps } from 'react-aria-components'
+
+import React from 'react'
+import { Button } from 'react-aria-components'
+
+import { useMenuContext } from '@/components/menu/use-menu.hook'
+
+const __ELEMENT_TYPE__ = 'button'
+
+type ComponentOwnProps = ButtonProps
+
+type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
+  TElement,
+  ComponentOwnProps
+>
+
+type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
+  props: ComponentProps<TElement>
+) => React.ReactNode
+
+const Component: ComponentType = React.forwardRef(
+  <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
+    props: ComponentProps<TElement>,
+    ref: Polymophic.Ref<TElement>
+  ) => {
+    const { as, children, className, ...rest } = props
+
+    const Element = as ?? Button
+
+    const { slots } = useMenuContext()
+
+    const component = React.useMemo<ButtonProps>(
+      () => ({
+        className: slots.trigger({ className: className?.toString() }),
+        ...rest,
+      }),
+      [className, rest, slots]
+    )
+
+    return (
+      <Element {...component} ref={ref}>
+        {children}
+      </Element>
+    )
+  }
+)
+
+export type { ComponentOwnProps as MenuTriggerOwnProps, ComponentProps as MenuTriggerProps }
+export default Component

packages/react/src/components/menu/component.parts.ts

@@ -2,3 +2,4 @@ export { default as Root } from '@/components/menu/Menu'
 export { default as Item } from '@/components/menu/MenuItem'
 export { default as List } from '@/components/menu/MenuList'
 export { default as Popover } from '@/components/menu/MenuPopover'
+export { default as Trigger } from '@/components/menu/MenuTrigger'

packages/react/src/components/menu/index.ts

@@ -2,5 +2,6 @@ export type * from '@/components/menu/Menu'
 export type * from '@/components/menu/MenuItem'
 export type * from '@/components/menu/MenuList'
 export type * from '@/components/menu/MenuPopover'
+export type * from '@/components/menu/MenuTrigger'
 
 export * as Menu from '@/components/menu/component.parts'

packages/theme/src/components/menu.ts

@@ -17,6 +17,7 @@ export const menu = tv({
       'overflow-hidden',
       'disabled:opacity-50 disabled:cursor-default',
     ],
+    trigger: ['flex', 'focus:outline-none'],
   },
   variants: {
     size: {