Updated: Empty component updated.

app/src/components/Empty/Description.tsx

@@ -1,14 +1,17 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { forwardRef, HTMLProps } from 'react'
 import { cn } from '../../helpers/cn'
 import { emptyTheme } from './theme'
 
-export interface DescriptionProps {
-  className?: string
-  children?: ReactNode
-}
+export const Description = forwardRef<HTMLParagraphElement, HTMLProps<HTMLParagraphElement>>(
+  ({ children, ...props }, ref) => {
+    const { description } = emptyTheme
+    return (
+      <p {...props} ref={ref} className={cn(description.base, props.className)}>
+        {children}
+      </p>
+    )
+  },
+)
 
-export const Description: FC<DescriptionProps> = ({ children, className }) => {
-  const { description } = emptyTheme
-  return <p className={cn(description.base, className)}>{children}</p>
-}
+Description.displayName = 'Empty.Description'

app/src/components/Empty/Empty.tsx

@@ -1,24 +1,21 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { HTMLProps, forwardRef } from 'react'
 import { cn } from '../../helpers/cn'
 import { Description } from './Description'
 import { Image } from './Image'
 import { Title } from './Title'
 import { emptyTheme } from './theme'
 
-interface EmptyProps {
-  className?: string
-  children?: ReactNode
-}
-const EmptyComponent: FC<EmptyProps> = ({ children, className }) => {
+const EmptyComponent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ children, ...props }, ref) => {
   const { root } = emptyTheme
-  return <section className={cn(root.base, className)}>{children}</section>
-}
-
-Title.displayName = 'Empty.Title'
-Description.displayName = 'Empty.Description'
-Image.displayName = 'Empty.Image'
+  return (
+    <div {...props} ref={ref} className={cn(root.base, props.className)}>
+      {children}
+    </div>
+  )
+})
 
+EmptyComponent.displayName = 'Empty'
 export const Empty = Object.assign(EmptyComponent, {
   Title,
   Description,

app/src/components/Empty/Image.tsx

@@ -1,12 +1,13 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { forwardRef, HTMLProps } from 'react'
 import { cn } from '../../helpers/cn'
 
-export interface ImageProps {
-  className?: string
-  children?: ReactNode
-}
+export const Image = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ children, ...props }, ref) => {
+  return (
+    <div {...props} ref={ref} className={cn(props.className)}>
+      {children}
+    </div>
+  )
+})
 
-export const Image: FC<ImageProps> = ({ children, className }) => {
-  return <div className={cn(className)}>{children}</div>
-}
+Image.displayName = 'Empty.Image'

app/src/components/Empty/Title.tsx

@@ -1,14 +1,15 @@
 'use client'
-import { FC, ReactNode } from 'react'
+import { forwardRef, HTMLProps } from 'react'
 import { cn } from '../../helpers/cn'
 import { emptyTheme } from './theme'
 
-export interface TitleProps {
-  className?: string
-  children?: ReactNode
-}
-
-export const Title: FC<TitleProps> = ({ children, className }) => {
+export const Title = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement>>(({ children, ...props }, ref) => {
   const { title } = emptyTheme
-  return <h1 className={cn(title.base, className)}>{children}</h1>
-}
+  return (
+    <h1 {...props} ref={ref} className={cn(title.base, props.className)}>
+      {children}
+    </h1>
+  )
+})
+
+Title.displayName = 'Empty.Title'