React Tsdoc

export type ButtonProps = HTMLMotionProps<'button'> & {
  /**
   * Specifies the button style
   * @defaultValue 'solid'
   */
  variant?: ButtonVariant;
  /**
   * Specifies the button size
   * @defaultValue 'md'
   */
  size?: ButtonSize;
  /** Elements to render inside the button */
  children?: ReactNode;
};

/**
 * Button component with various styles and sizes
 *
 * @remarks
 * - Supports Framer Motion animations
 * - Accessibility (a11y) compliant
 *
 * @example
 * ```tsx
 * <Button variant="solid" size="md">
 *   Click me
 * </Button>
 * ```
 *
 * @see {@link IconButton} - Icon-only button variant
 */
export const Button = ({ variant = 'solid', size = 'md', children, ...props }: ButtonProps) => {
  // ...
};

/**
 * Manages toggle state
 *
 * @param initialValue - Specifies the initial value
 * @defaultValue false
 * @returns Toggle state and control functions
 *
 * @remarks
 * - Safe for SSR environments
 * - State changes trigger re-renders
 *
 * @example
 * ```tsx
 * const [isOpen, toggle, setIsOpen] = useToggle(false);
 *
 * <Button onClick={toggle}>Toggle</Button>
 * <Button onClick={() => setIsOpen(true)}>Open</Button>
 * ```
 */
export const useToggle = (initialValue = false): UseToggleReturn => {
  // ...
};

export type UseToggleReturn = [
  /** Current toggle state */
  boolean,
  /** Toggles the state */
  () => void,
  /** Sets the state directly */
  Dispatch<SetStateAction<boolean>>
];

export type UseCounterReturn = {
  /** Current count value */
  count: number;
  /** Increments count by 1 */
  increment: () => void;
  /** Decrements count by 1 */
  decrement: () => void;
  /** Resets count to initial value */
  reset: () => void;
};

/**
 * Tab container component
 *
 * @example
 * ```tsx
 * <Tabs defaultValue="tab1">
 *   <TabsList>
 *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
 *   </TabsList>
 *   <TabsContent value="tab1">Content 1</TabsContent>
 * </Tabs>
 * ```
 *
 * @see {@link TabsList} - Tab button group
 * @see {@link TabsTrigger} - Individual tab button
 * @see {@link TabsContent} - Tab content panel
 */
export const Tabs = (props: TabsProps) => { /* ... */ };