fix(dialog): Dialog.Content children type unassignable (#13)

* fix(dialog): Dialog.Content children type unassignable

* feat(dialog): add dialog stories

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

@@ -0,0 +1,39 @@
+import type { DialogProps } from '@/components/dialog'
+import type { Meta, StoryFn } from '@storybook/react'
+
+import { Button } from '@/components/button'
+import { Card } from '@/components/card'
+import { Dialog } from '@/components/dialog'
+
+const Component: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+}
+
+const defaultProps = {}
+
+export const Default: StoryFn = (args: DialogProps) => (
+  <Dialog {...args}>
+    <Button>Open</Button>
+
+    <Dialog.Content>
+      {({ close }) => (
+        <Card>
+          <Card.Header>Dialog</Card.Header>
+
+          <Card.Body>Dialog Content</Card.Body>
+
+          <Card.Footer>
+            <Button onPress={close}>Close</Button>
+          </Card.Footer>
+        </Card>
+      )}
+    </Dialog.Content>
+  </Dialog>
+)
+
+Default.args = {
+  ...defaultProps,
+}
+
+export default Component

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

@@ -1,21 +1,21 @@
 import type { UseDialogProps } from '@/components/dialog/use-dialog.hook'
 import type { ComponentWithoutAs } from '@/utilities/types'
-import type { DialogTriggerProps as ComponentProps } from 'react-aria-components'
+import type { DialogTriggerProps } from 'react-aria-components'
 
 import React from 'react'
-import { DialogTrigger as Component } from 'react-aria-components'
+import { DialogTrigger } from 'react-aria-components'
 
 import DialogContent from '@/components/dialog/DialogContent'
 import { DialogContext, useDialog } from '@/components/dialog/use-dialog.hook'
 
-export type DialogProps = ComponentWithoutAs<'div'> & ComponentProps & UseDialogProps
+type ComponentProps = ComponentWithoutAs<'div'> & Omit<DialogTriggerProps, 'children'> & UseDialogProps
 
-const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
+const Component = React.forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
   const { children, className, blur, placement, ...rest } = props
 
   const context = useDialog({ blur, placement })
 
-  const component = React.useMemo<ComponentProps>(
+  const trigger = React.useMemo<DialogTriggerProps>(
     () => ({
       ref,
       children,
@@ -27,13 +27,14 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
 
   return (
     <DialogContext.Provider value={context}>
-      <Component {...component}>{children}</Component>
+      <DialogTrigger {...trigger}>{children}</DialogTrigger>
     </DialogContext.Provider>
   )
 })
 
-Dialog.displayName = 'Dialog'
+Component.displayName = 'Dialog'
 
-export default Object.assign(Dialog, {
+export { ComponentProps as DialogProps }
+export default Object.assign(Component, {
   Content: DialogContent,
 })

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

@@ -1,14 +1,13 @@
-import type { ComponentWithoutAs } from '@/utilities/types'
 import type { DialogProps, ModalOverlayProps } from 'react-aria-components'
 
 import React from 'react'
 import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
 
 import { useDialogContext } from '@/components/dialog/use-dialog.hook'
 
-export type DialogContentProps = ComponentWithoutAs<'div'> & DialogProps
+type ComponentProps = DialogProps
 
-const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => {
+const Component = React.forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
   const { children, className, ...rest } = props
 
   const { slots } = useDialogContext()
@@ -45,6 +44,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>((prop
   )
 })
 
-DialogContent.displayName = 'Dialog.Content'
+Component.displayName = 'Dialog.Content'
 
-export default DialogContent
+export { ComponentProps as DialogContentProps }
+export default Component