feat(dialog): update minor changes

packages/components/dialog/package.json

@@ -27,10 +27,10 @@
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dialog": "1.0.4",
+    "class-variance-authority": "0.4.0",
     "@spark-ui/icon": "^1.8.0",
     "@spark-ui/icon-button": "^1.3.10",
-    "@spark-ui/icons": "^1.19.4",
-    "class-variance-authority": "0.4.0"
+    "@spark-ui/icons": "^1.19.4"
   }
-}
+}

packages/components/dialog/src/Dialog.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 
 import { Body } from './DialogBody'
+import { Close } from './DialogClose'
 import { CloseButton } from './DialogCloseButton'
 import { Content } from './DialogContent'
 import { Description } from './DialogDescription' // aria-describedby
@@ -31,6 +32,7 @@ export const Dialog: FC<RootProps> & {
   Header: typeof Header
   Body: typeof Body
   Footer: typeof Footer
+  Close: typeof Close
   CloseButton: typeof CloseButton
   Title: typeof Title
   Description: typeof Description
@@ -42,6 +44,7 @@ export const Dialog: FC<RootProps> & {
   Header,
   Body,
   Footer,
+  Close,
   CloseButton,
   Title,
   Description,

packages/components/dialog/src/DialogClose.tsx

@@ -0,0 +1,11 @@
+import * as RadixDialog from '@radix-ui/react-dialog'
+import { ElementRef, forwardRef } from 'react'
+
+type CloseElement = ElementRef<typeof RadixDialog.Close>
+export type CloseProps = RadixDialog.DialogCloseProps
+
+export const Close = forwardRef<CloseElement, CloseProps>((props, ref) => (
+  <RadixDialog.Close ref={ref} {...props} />
+))
+
+Close.displayName = 'Dialog.Close'

packages/components/dialog/src/DialogCloseButton.tsx

@@ -1,31 +1,39 @@
-import * as RadixDialog from '@radix-ui/react-dialog'
 import { Icon } from '@spark-ui/icon'
 import { IconButton, type IconButtonProps } from '@spark-ui/icon-button'
 import { Close as CloseSVG } from '@spark-ui/icons/dist/icons/Close'
 import { cx } from 'class-variance-authority'
-import { type ReactElement } from 'react'
+import { ElementRef, forwardRef } from 'react'
 
-export type CloseButtonProps = RadixDialog.DialogCloseProps &
+import { Close, CloseProps } from './DialogClose'
+
+type CloseButtonElement = ElementRef<typeof Close>
+export type CloseButtonProps = CloseProps &
   Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>
 
-export const CloseButton = ({
-  'aria-label': ariaLabel,
-  className,
-  size = 'md',
-  intent = 'neutral',
-  design = 'ghost',
-  children = <CloseSVG />,
-  ...rest
-}: CloseButtonProps): ReactElement => (
-  <RadixDialog.Close
-    asChild
-    className={cx(['absolute', 'top-sm', 'right-sm'], className)}
-    {...rest}
-  >
-    <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>
-      <Icon>{children}</Icon>
-    </IconButton>
-  </RadixDialog.Close>
+export const CloseButton = forwardRef<CloseButtonElement, CloseButtonProps>(
+  (
+    {
+      'aria-label': ariaLabel,
+      className,
+      size = 'md',
+      intent = 'neutral',
+      design = 'ghost',
+      children = <CloseSVG />,
+      ...rest
+    },
+    ref
+  ) => (
+    <Close
+      ref={ref}
+      className={cx(['absolute', 'top-sm', 'right-sm'], className)}
+      asChild
+      {...rest}
+    >
+      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>
+        <Icon>{children}</Icon>
+      </IconButton>
+    </Close>
+  )
 )
 
 CloseButton.displayName = 'Dialog.CloseButton'

packages/components/dialog/src/DialogDescription.tsx

@@ -1,10 +1,11 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
-import { type ReactElement } from 'react'
+import { ElementRef, forwardRef } from 'react'
 
+export type DescriptionElement = ElementRef<typeof RadixDialog.Description>
 export type DescriptionProps = RadixDialog.DialogDescriptionProps
 
-export const Description = ({ children, ...rest }: DescriptionProps): ReactElement => (
-  <RadixDialog.Description {...rest}>{children}</RadixDialog.Description>
-)
+export const Description = forwardRef<DescriptionElement, DescriptionProps>((props, ref) => (
+  <RadixDialog.Description ref={ref} {...props} />
+))
 
 Description.displayName = 'Dialog.Description'

packages/components/dialog/src/DialogTitle.tsx

@@ -1,10 +1,11 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
-import { type ReactElement } from 'react'
+import { ElementRef, forwardRef } from 'react'
 
+export type TitleElement = ElementRef<typeof RadixDialog.Title>
 export type TitleProps = RadixDialog.DialogTitleProps
 
-export const Title = ({ children, ...rest }: TitleProps): ReactElement => (
-  <RadixDialog.Title {...rest}>{children}</RadixDialog.Title>
-)
+export const Title = forwardRef<TitleElement, TitleProps>((props, ref) => (
+  <RadixDialog.Title ref={ref} {...props} />
+))
 
 Title.displayName = 'Dialog.Title'

packages/components/dialog/src/DialogTrigger.tsx

@@ -1,10 +1,11 @@
 import * as RadixDialog from '@radix-ui/react-dialog'
-import { type ReactElement } from 'react'
+import { ElementRef, forwardRef, type ReactElement } from 'react'
 
+type TriggerElement = ElementRef<typeof RadixDialog.Trigger>
 export type TriggerProps = RadixDialog.DialogTriggerProps
 
-export const Trigger = ({ children, ...rest }: TriggerProps): ReactElement => (
-  <RadixDialog.Trigger {...rest}>{children}</RadixDialog.Trigger>
+export const Trigger = forwardRef<TriggerElement, TriggerProps>(
+  (props: TriggerProps, ref): ReactElement => <RadixDialog.Trigger ref={ref} {...props} />
 )
 
 Trigger.displayName = 'Dialog.Trigger'

packages/components/dialog/src/index.ts

@@ -1,12 +1,14 @@
-export { type CloseButtonProps } from './DialogCloseButton'
-export { type ContentProps } from './DialogContent'
-export { type DescriptionProps } from './DialogDescription'
-export { type OverlayProps } from './DialogOverlay'
-export { type PortalProps } from './DialogPortal'
-export { type TitleProps } from './DialogTitle'
-export { type TriggerProps } from './DialogTrigger'
-export { type HeaderProps } from './DialogHeader'
-export { type BodyProps } from './DialogBody'
-export { type FooterProps } from './DialogFooter'
+export { type RootProps as DialogProps } from './DialogRoot'
+export { type ContentProps as DialogContentProps } from './DialogContent'
+export { type HeaderProps as DialogHeaderProps } from './DialogHeader'
+export { type BodyProps as DialogBodyProps } from './DialogBody'
+export { type FooterProps as DialogFooterProps } from './DialogFooter'
+export { type TriggerProps as DialogTriggerProps } from './DialogTrigger'
+export { type OverlayProps as DialogOverlayProps } from './DialogOverlay'
+export { type PortalProps as DialogPortalProps } from './DialogPortal'
+export { type TitleProps as DialogTitleProps } from './DialogTitle'
+export { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'
+export { type CloseProps as DialogCloseProps } from './DialogClose'
+export { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'
 
 export { Dialog } from './Dialog'