fix: fixing broken docgen because of forwardRef

documentation/helpers/ArgTypes/index.tsx

@@ -1,4 +1,4 @@
-import { Tabs, type TabsRootProps } from '@spark-ui/tabs'
+import { Tabs, type TabsProps } from '@spark-ui/tabs'
 import { ArgTypes as StorybookArgTypes } from '@storybook/blocks'
 import { type FC, type ReactNode, useEffect, useState } from 'react'
 
@@ -21,7 +21,7 @@ const ComponentDescription = ({ name, children }: { name: string; children: Reac
 }
 
 function useTabsOrientation() {
-  const [tabsOrientation, setTabsOrientation] = useState<TabsRootProps['orientation']>(
+  const [tabsOrientation, setTabsOrientation] = useState<TabsProps['orientation']>(
     window.innerWidth < 640 ? 'horizontal' : 'vertical'
   )
 

packages/components/icon-button/src/IconButton.tsx

@@ -1,13 +1,13 @@
 import { Button, ButtonProps } from '@spark-ui/button'
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import { iconButtonStyles } from './IconButton.styles'
 
 export interface IconButtonProps extends Omit<ButtonProps, 'loadingText'> {
   'aria-label': string
 }
 
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
     {
       design = 'filled',

packages/components/portal/src/Portal.tsx

@@ -1,6 +1,6 @@
 import { Portal as PortalPrimitive } from '@radix-ui/react-portal'
 import type * as Radix from '@radix-ui/react-primitive'
-import React, { PropsWithChildren } from 'react'
+import React, { forwardRef, type PropsWithChildren } from 'react'
 
 interface PortalProps {
   /**
@@ -11,6 +11,6 @@ interface PortalProps {
 
 type PortalRef = React.ElementRef<typeof Radix.Primitive.div>
 
-export const Portal = React.forwardRef<PortalRef, PropsWithChildren<PortalProps>>((props, ref) => {
+export const Portal = forwardRef<PortalRef, PropsWithChildren<PortalProps>>((props, ref) => {
   return <PortalPrimitive ref={ref} {...props} />
 })

packages/components/switch/src/Switch.tsx

@@ -43,3 +43,5 @@ export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
     )
   }
 )
+
+Switch.displayName = 'Switch'

packages/components/switch/src/SwitchInput.tsx

@@ -4,13 +4,13 @@ import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { Close } from '@spark-ui/icons/dist/icons/Close'
 import { Slot } from '@spark-ui/slot'
 import { useCombinedState } from '@spark-ui/use-combined-state'
-import React, { ReactNode } from 'react'
+import React, { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react'
 
 import { styles, type StylesProps, thumbCheckSVGStyles, thumbStyles } from './SwitchInput.styles'
 
 export interface SwitchInputProps
   extends StylesProps,
-    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    Omit<ComponentPropsWithoutRef<'button'>, 'value'> {
   /**
    * The state of the switch when it is initially rendered. Use when you do not need to control its state.
    */
@@ -52,7 +52,7 @@ export interface SwitchInputProps
   uncheckedIcon?: ReactNode
 }
 
-export const SwitchInput = React.forwardRef<HTMLButtonElement, SwitchInputProps>(
+export const SwitchInput = forwardRef<HTMLButtonElement, SwitchInputProps>(
   (
     {
       checked,
@@ -104,3 +104,5 @@ export const SwitchInput = React.forwardRef<HTMLButtonElement, SwitchInputProps>
     )
   }
 )
+
+SwitchInput.displayName = 'SwitchInput'

packages/components/tabs/src/Tabs.tsx

@@ -15,6 +15,11 @@ export interface TabsProps
   asChild?: boolean
 }
 
+/**
+ * @deprecated
+ */
+export type TabsRootProps = TabsProps
+
 export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
   (
     {

packages/components/tabs/src/index.ts

@@ -22,5 +22,5 @@ Content.displayName = 'Tabs.Content'
 
 export { type TabsContentProps } from './TabsContent'
 export { type TabsListProps } from './TabsList'
-export { type TabsProps } from './Tabs'
+export { type TabsProps, type TabsRootProps } from './Tabs'
 export { type TabsTriggerProps } from './TabsTrigger'