feat: add modal component

packages/react/src/components/dialog/Dialog.stories.tsx

@@ -11,10 +11,10 @@ const Component: Meta<typeof Dialog.Root> = {
 const defaultProps = {}
 
 export const Default: StoryFn<DialogProps> = (args) => (
-  <Dialog.Root {...args}>
+  <Dialog.Trigger>
     <Button>Open</Button>
 
-    <Dialog.Content>
+    <Dialog.Root {...args}>
       {({ close }) => (
         <Card.Root>
           <Card.Header>Dialog</Card.Header>
@@ -26,8 +26,8 @@ export const Default: StoryFn<DialogProps> = (args) => (
           </Card.Footer>
         </Card.Root>
       )}
-    </Dialog.Content>
-  </Dialog.Root>
+    </Dialog.Root>
+  </Dialog.Trigger>
 )
 
 Default.args = {

packages/react/src/components/dialog/Dialog.tsx

@@ -1,16 +1,15 @@
 'use client'
 
-import type { DialogVariantProps } from '@giantnodes/theme'
-import type { DialogTriggerProps } from 'react-aria-components'
+import type { DialogProps } from 'react-aria-components'
 import React from 'react'
-import { DialogTrigger } from 'react-aria-components'
+import { Dialog } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
 import { DialogContext, useDialog } from '~/components/dialog/use-dialog.hook'
 
 const __ELEMENT_TYPE__ = 'div'
 
-type ComponentOwnProps = DialogTriggerProps & DialogVariantProps
+type ComponentOwnProps = DialogProps
 
 type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
   TElement,
@@ -21,29 +20,34 @@ type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE
   props: ComponentProps<TElement>
 ) => React.ReactNode
 
-const Component: ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
-  props: ComponentProps<TElement>
-) => {
-  const { as, children, className, size, blur, placement, ...rest } = props
-
-  const Element = as ?? DialogTrigger
-
-  const context = useDialog({ size, blur, placement })
-
-  const component = React.useMemo<Omit<DialogTriggerProps, 'children'>>(
-    () => ({
-      className: context.slots.dialog({ className }),
-      ...rest,
-    }),
-    [context.slots, className, rest]
-  )
-
-  return (
-    <DialogContext.Provider value={context}>
-      <Element {...component}>{children}</Element>
-    </DialogContext.Provider>
-  )
-}
+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 ?? Dialog
+
+    const context = useDialog({})
+
+    const component = React.useMemo<DialogProps>(
+      () => ({
+        className: context.slots.root({ className }),
+        ...rest,
+      }),
+      [context.slots, className, rest]
+    )
+
+    return (
+      <DialogContext.Provider value={context}>
+        <Element {...component} ref={ref}>
+          {children}
+        </Element>
+      </DialogContext.Provider>
+    )
+  }
+)
 
 export type { ComponentOwnProps as DialogOwnProps, ComponentProps as DialogProps }
 export default Component

packages/react/src/components/dialog/DialogTrigger.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import type { DialogVariantProps } from '@giantnodes/theme'
+import type { DialogTriggerProps } from 'react-aria-components'
+import React from 'react'
+import { DialogTrigger } from 'react-aria-components'
+
+import type * as Polymophic from '~/utilities/polymorphic'
+
+const __ELEMENT_TYPE__ = 'div'
+
+type ComponentOwnProps = DialogTriggerProps & DialogVariantProps
+
+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 = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
+  props: ComponentProps<TElement>
+) => {
+  const { as, children, ...component } = props
+
+  const Element = as ?? DialogTrigger
+
+  return <Element {...component}>{children}</Element>
+}
+
+export type { ComponentOwnProps as DialogTriggerOwnProps, ComponentProps as DialogTriggerProps }
+export default Component

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

@@ -1,2 +1,2 @@
 export { default as Root } from '~/components/dialog/Dialog'
-export { default as Content } from '~/components/dialog/DialogContent'
+export { default as Trigger } from '~/components/dialog/DialogTrigger'

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

@@ -1,4 +1,4 @@
+export type * from '~/components/dialog/DialogTrigger'
 export type * from '~/components/dialog/Dialog'
-export type * from '~/components/dialog/DialogContent'
 
 export * as Dialog from '~/components/dialog/component.parts'

packages/react/src/components/dialog/use-dialog.hook.ts

@@ -10,10 +10,8 @@ export type UseDialogProps = DialogVariantProps
 
 export type UseDialogReturn = ReturnType<typeof useDialog>
 
-export const useDialog = (props: UseDialogProps) => {
-  const { size, blur, placement } = props
-
-  const slots = React.useMemo(() => dialog({ size, blur, placement }), [size, blur, placement])
+export const useDialog = (_: UseDialogProps) => {
+  const slots = React.useMemo(() => dialog(), [])
 
   return {
     slots,
@@ -23,5 +21,5 @@ export const useDialog = (props: UseDialogProps) => {
 export const [DialogContext, useDialogContext] = createContext<UseDialogReturn>({
   name: 'DialogContext',
   strict: true,
-  errorMessage: 'useDialogContext: `context` is undefined. Seems you forgot to wrap component within <Dialog />',
+  errorMessage: 'useDialogContext: `context` is undefined. Seems you forgot to wrap component within <Dialog.Root />',
 })

packages/react/src/components/index.ts

@@ -12,6 +12,7 @@ export * from '~/components/form'
 export * from '~/components/input'
 export * from '~/components/link'
 export * from '~/components/menu'
+export * from '~/components/modal'
 export * from '~/components/navigation'
 export * from '~/components/progress'
 export * from '~/components/select'

packages/react/src/components/modal/Modal.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import type { ModalVariantProps } from '@giantnodes/theme'
+import type { ModalOverlayProps } from 'react-aria-components'
+import React from 'react'
+import { ModalOverlay } from 'react-aria-components'
+
+import type * as Polymophic from '~/utilities/polymorphic'
+import { ModalContext, useModal } from '~/components/modal/use-modal.hook'
+import { cn } from '~/utilities'
+
+const __ELEMENT_TYPE__ = 'div'
+
+type ComponentOwnProps = ModalOverlayProps & ModalVariantProps
+
+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 = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
+  props: ComponentProps<TElement>
+) => {
+  const { as, children, className, blur, placement, position, ...rest } = props
+
+  const Element = as ?? ModalOverlay
+
+  const context = useModal({ blur, placement, position })
+
+  const component = React.useMemo<ModalOverlayProps>(
+    () => ({
+      className: context.slots.root({ className: cn(className) }),
+      ...rest,
+    }),
+    [context.slots, className, rest]
+  )
+
+  return (
+    <ModalContext.Provider value={context}>
+      <Element {...component}>{children}</Element>
+    </ModalContext.Provider>
+  )
+}
+
+export type { ComponentOwnProps as ModalOwnProps, ComponentProps as ModalProps }
+export default Component

packages/react/src/components/modal/ModalContent.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import type { ModalVariantProps } from '@giantnodes/theme'
+import type { ModalOverlayProps } from 'react-aria-components'
+import React from 'react'
+import { Modal } from 'react-aria-components'
+
+import type * as Polymophic from '~/utilities/polymorphic'
+import { useModalContext } from '~/components/modal/use-modal.hook'
+import { cn } from '~/utilities'
+
+const __ELEMENT_TYPE__ = 'div'
+
+type ComponentOwnProps = ModalOverlayProps & ModalVariantProps
+
+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 = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
+  props: ComponentProps<TElement>
+) => {
+  const { as, children, className, ...rest } = props
+
+  const Element = as ?? Modal
+
+  const { slots } = useModalContext()
+
+  const component = React.useMemo<ModalOverlayProps>(
+    () => ({
+      className: slots.content({ className: cn(className) }),
+      ...rest,
+    }),
+    [slots, className, rest]
+  )
+
+  return <Element {...component}>{children}</Element>
+}
+
+export type { ComponentOwnProps as ModalContentOwnProps, ComponentProps as ModalContentProps }
+export default Component

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

@@ -0,0 +1,2 @@
+export { default as Root } from '~/components/modal/Modal'
+export { default as Content } from '~/components/modal/ModalContent'

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

@@ -0,0 +1,4 @@
+export type * from '~/components/modal/Modal'
+export type * from '~/components/modal/ModalContent'
+
+export * as Modal from '~/components/modal/component.parts'

packages/react/src/components/modal/use-modal.hook.ts

@@ -0,0 +1,27 @@
+'use client'
+
+import type { ModalVariantProps } from '@giantnodes/theme'
+import React from 'react'
+import { modal } from '@giantnodes/theme'
+
+import { createContext } from '~/utilities/context'
+
+export type UseModalProps = ModalVariantProps
+
+export type UseModalReturn = ReturnType<typeof useModal>
+
+export const useModal = (props: UseModalProps) => {
+  const { blur, placement, position } = props
+
+  const slots = React.useMemo(() => modal({ blur, placement, position }), [blur, placement, position])
+
+  return {
+    slots,
+  }
+}
+
+export const [ModalContext, useModalContext] = createContext<UseModalReturn>({
+  name: 'ModalContext',
+  strict: true,
+  errorMessage: 'useModalContext: `context` is undefined. Seems you forgot to wrap component within <Modal.Root />',
+})

packages/react/src/components/select/SelectValue.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 'use client'
 
 import type { SelectValueProps } from 'react-aria-components'

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

@@ -1,4 +1,5 @@
 export type * from '~/components/select/Select'
 export type * from '~/components/select/SelectOption'
+export type * from '~/components/select/SelectValue'
 
 export * as Select from '~/components/select/component.parts'