@moondreamsdev/dreamer-ui 1.7.10-test.99 → 1.7.12

package/dist/src/components/radiogroup/RadioGroupItem.d.ts

@@ -1,13 +1,22 @@
 /// <reference types="react" />
 export interface RadioGroupItemProps {
+    /** The value associated with this radio item. */
     value: string;
+    /** The content to display for this radio item. */
     children: React.ReactNode;
+    /** Additional CSS classes to apply to this radio item. */
     className?: string;
+    /** Whether this radio item is currently selected. */
     isSelected?: boolean;
+    /** Callback fired when this radio item is selected. */
     onChange?: (value: string) => void;
+    /** Whether this radio item is disabled. */
     disabled?: boolean;
+    /** The name attribute for the radio input group. */
     name?: string;
+    /** Whether to hide the native radio input element. */
     hideInput?: boolean;
+    /** Optional description text for this radio item. */
     description?: string;
 }
 export declare function RadioGroupItem({ value, children, className, isSelected, onChange, disabled, hideInput, description, name, }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/scroll-area/ScrollArea.d.ts

@@ -17,4 +17,29 @@ export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Reference to the root element */
     ref?: React.Ref<HTMLDivElement>;
 }
+/**
+ * A custom scrollable area component with styled scrollbars that appear on hover/scroll.
+ * Provides cross-browser consistent scrolling experience with customizable appearance.
+ *
+ * @example
+ * ```tsx
+ * // Basic scroll area
+ * <ScrollArea className="h-64 w-full border rounded">
+ *   <div className="p-4 space-y-2">
+ *     {Array.from({length: 50}).map((_, i) => (
+ *       <div key={i}>Item {i + 1}</div>
+ *     ))}
+ *   </div>
+ * </ScrollArea>
+ *
+ * // Customized scrollbars
+ * <ScrollArea
+ *   className="h-96 w-80"
+ *   scrollbarThickness={12}
+ *   thumbClassName="bg-primary/60 hover:bg-primary/80"
+ * >
+ *   <LongContent />
+ * </ScrollArea>
+ * ```
+ */
 export declare function ScrollArea({ className, thumbClassName, viewportClassName, scrollbarClassName, scrollbarThickness, children, id, ref, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/select/Select.d.ts

@@ -3,20 +3,69 @@ import { SelectOption } from './hooks';
 import { SelectSize } from './variants';
 export type { SelectOption };
 export interface SelectProps {
+    /** Array of option objects. SelectOption: { text: string, value: string, disabled?: boolean, description?: string } */
     options: SelectOption[];
+    /** The current value of the select (controlled). */
     value?: string;
+    /** Placeholder text to show when no option is selected. */
     placeholder?: string;
+    /** Whether the select is searchable (combobox mode). */
     searchable?: boolean;
+    /** Whether the entire select is disabled. */
     disabled?: boolean;
+    /** Whether to show a clear button to reset selection. */
     clearable?: boolean;
+    /** The size variant of the select. */
     size?: SelectSize;
+    /** Additional CSS classes to apply to the select container. */
     className?: string;
+    /** Additional CSS classes to apply to the trigger button. */
     triggerClassName?: string;
+    /** Additional CSS classes to apply to the dropdown menu. */
     dropdownClassName?: string;
+    /** The HTML id attribute for the select. */
     id?: string;
+    /** Reference to the select container element. */
     ref?: React.Ref<HTMLDivElement>;
+    /** Callback fired when the selection changes. */
     onChange?: (value: string) => void;
+    /** Callback fired when search input changes (searchable mode). */
     onSearch?: (searchTerm: string) => void;
+    /** Placeholder text for the search input (searchable mode). */
     searchPlaceholder?: string;
 }
+/**
+ * A feature-rich select component with search, keyboard navigation, and accessibility.
+ * Supports both simple selection and searchable combobox functionality.
+ *
+ * @example
+ * ```tsx
+ * // Basic select
+ * const options = [
+ *   { text: 'Apple', value: 'apple' },
+ *   { text: 'Banana', value: 'banana' },
+ *   { text: 'Orange', value: 'orange' }
+ * ];
+ *
+ * <Select
+ *   options={options}
+ *   value={selectedFruit}
+ *   onChange={setSelectedFruit}
+ *   placeholder="Choose a fruit"
+ * />
+ *
+ * // Searchable select with descriptions
+ * <Select
+ *   options={[
+ *     { text: 'React', value: 'react', description: 'A library for building UIs' },
+ *     { text: 'Vue', value: 'vue', description: 'The progressive framework' }
+ *   ]}
+ *   searchable
+ *   clearable
+ *   placeholder="Select framework..."
+ *   searchPlaceholder="Search frameworks..."
+ *   onChange={setFramework}
+ * />
+ * ```
+ */
 export declare function Select({ options, value, placeholder, searchable, disabled, clearable, size, className, triggerClassName, dropdownClassName, id, ref, onChange, onSearch, searchPlaceholder, }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/separator/Separator.d.ts

@@ -2,14 +2,32 @@ import React, { Ref } from 'react';
 import { Thickness } from './variants';
 export type Orientation = 'horizontal' | 'vertical';
 export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** Reference to the separator element */
     ref?: Ref<HTMLDivElement>;
+    /** The orientation of the separator */
     orientation?: Orientation;
-    /**
-     * Whether the separator is decorative only or serves a semantic purpose.
-     * When decorative=true, it's hidden from screen readers.
-     * @default false
-     */
+    /** Whether the separator is decorative only. When true, it's hidden from screen readers */
     decorative?: boolean;
+    /** The thickness variant of the separator */
     thickness?: Thickness;
 }
+/**
+ * A visual separator component for dividing content sections.
+ * Supports both horizontal and vertical orientations with customizable thickness.
+ *
+ * @example
+ * ```tsx
+ * // Horizontal separator
+ * <Separator />
+ *
+ * // Vertical separator
+ * <Separator orientation="vertical" className="h-6" />
+ *
+ * // Thick separator
+ * <Separator thickness="thick" />
+ *
+ * // Decorative separator (hidden from screen readers)
+ * <Separator decorative />
+ * ```
+ */
 export declare function Separator({ orientation, decorative, thickness, className, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/skeleton/Skeleton.d.ts

@@ -1,13 +1,33 @@
 import React from 'react';
 import { type SkeletonVariants } from './variants';
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, SkeletonVariants {
-    /** Custom class name for additional styling */
+    /** Additional CSS classes to apply to the skeleton */
     className?: string;
     /** Number of skeleton lines to render (for text-like skeletons) */
     lines?: number;
-    /** Whether the skeleton should animate */
+    /** Whether the skeleton should animate with a pulse effect */
     animate?: boolean;
     /** Ref to be passed to the skeleton element */
     ref?: React.Ref<HTMLDivElement>;
 }
+/**
+ * A loading placeholder component that mimics the structure of content being loaded.
+ * Provides visual feedback during data fetching with customizable shapes and animations.
+ *
+ * @example
+ * ```tsx
+ * // Basic skeleton
+ * <Skeleton className="h-4 w-48" />
+ *
+ * // Multiple text lines
+ * <Skeleton lines={3} lineSpacing="md" />
+ *
+ * // Different shapes
+ * <Skeleton shape="circle" className="h-12 w-12" />
+ * <Skeleton shape="rounded" className="h-32 w-full" />
+ *
+ * // Without animation
+ * <Skeleton animate={false} className="h-6 w-32" />
+ * ```
+ */
 export declare function Skeleton({ shape, lineSpacing, className, lines, animate, ref, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/skeleton/variants.d.ts

@@ -13,6 +13,8 @@ export declare const skeletonVariants: {
     };
 };
 export interface SkeletonVariants {
+    /** The shape of the skeleton element */
     shape?: keyof typeof skeletonVariants.shape;
+    /** Spacing between skeleton lines when multiple lines are used */
     lineSpacing?: keyof typeof skeletonVariants.lineSpacing;
 }

package/dist/src/components/slider/Slider.d.ts

@@ -1,27 +1,27 @@
 import React from 'react';
 export interface SliderProps {
     id?: string;
-    /** Current value of the slider */
+    /** The controlled value of the slider */
     value?: number;
-    /** Default value when uncontrolled */
+    /** The initial value of the slider (uncontrolled) */
     defaultValue?: number;
-    /** Callback fired when the value changes */
+    /** Callback fired when the slider value changes */
     onValueChange?: (value: number) => void;
-    /** Minimum value */
+    /** The minimum value of the slider */
     min?: number;
-    /** Maximum value */
+    /** The maximum value of the slider */
     max?: number;
-    /** Step increment */
+    /** The step increment of the slider */
     step?: number;
     /** Whether the slider is disabled */
     disabled?: boolean;
-    /** Custom class name for the track element */
+    /** Additional CSS classes to apply to the track element */
     trackClassName?: string;
-    /** Custom class name for the range element */
+    /** Additional CSS classes to apply to the filled range element */
     rangeClassName?: string;
-    /** Custom class name for the thumb element */
+    /** Additional CSS classes to apply to the thumb element */
     thumbClassName?: string;
-    /** Custom class name for the root element */
+    /** Additional CSS classes to apply to the slider */
     className?: string;
     /** Ref to the root element */
     ref?: React.Ref<HTMLDivElement>;
@@ -30,4 +30,40 @@ export interface SliderProps {
     /** ARIA labelledby for accessibility */
     ariaLabelledBy?: string;
 }
+/**
+ * A horizontal slider component for selecting numeric values within a specified range.
+ * Supports both controlled and uncontrolled modes with keyboard navigation and touch support.
+ *
+ * @example
+ * ```tsx
+ * // Basic slider
+ * <Slider
+ *   min={0}
+ *   max={100}
+ *   value={volume}
+ *   onValueChange={setVolume}
+ *   ariaLabel="Volume control"
+ * />
+ *
+ * // Uncontrolled with custom step
+ * <Slider
+ *   defaultValue={50}
+ *   min={0}
+ *   max={200}
+ *   step={5}
+ *   onValueChange={(value) => console.log('Price:', value)}
+ * />
+ *
+ * // Customized appearance
+ * <Slider
+ *   value={opacity}
+ *   onValueChange={setOpacity}
+ *   min={0}
+ *   max={1}
+ *   step={0.1}
+ *   rangeClassName="bg-blue-500"
+ *   thumbClassName="bg-blue-600 border-2 border-white"
+ * />
+ * ```
+ */
 export declare function Slider({ id, value, defaultValue, onValueChange, min, max, step, disabled, trackClassName, rangeClassName, thumbClassName, className, ref, ariaLabel, ariaLabelledBy, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/table/Table.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import { TableSize } from './variants';
+export interface TableColumn<T extends object, U = unknown> {
+    /** Unique key for the column. Used for cell value if no `accessor` is provided */
+    key: Extract<keyof T, string>;
+    /** Column header label */
+    header: string;
+    /** Accessor function or property name to get cell value */
+    accessor?: keyof T | ((item: T) => U);
+    /** Custom cell renderer */
+    cell?: (item: T, value: U) => React.ReactNode;
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Custom sort function. Negative result indicates descending order */
+    sortFunction?: (a: T, b: T) => number;
+    /** Column width */
+    width?: string | number;
+    /** Column alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Additional header class names */
+    headerClassName?: string;
+    /** Additional cell class names */
+    cellClassName?: string;
+    /** Additional column class names */
+    columnClassName?: string;
+}
+export interface TableProps<T extends object> {
+    /** Unique identifier for the table */
+    id?: string;
+    /** Custom CSS classes */
+    className?: string;
+    /** React ref for the table container */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Size variant affecting padding and font sizes */
+    size?: TableSize;
+    /** Array of data objects to display in the table */
+    data: T[];
+    /** Column definitions specifying headers, accessors, and rendering options */
+    columns: TableColumn<T>[];
+    /** Whether to show row selection checkboxes */
+    selectable?: boolean;
+    /** Function to get unique row ID */
+    getRowId?: (item: T, index: number) => string | number;
+    /** Initial selected row IDs */
+    initialSelected?: (string | number)[];
+    /** Callback fired when row selection changes */
+    onSelectionChange?: (selectedIds: (string | number)[]) => void;
+    /** Whether to show table header */
+    showHeader?: boolean;
+    /** Whether to add striped row styling */
+    striped?: boolean;
+    /** Whether to add hover effects */
+    hoverable?: boolean;
+    /** Empty state content */
+    emptyState?: React.ReactNode;
+    /** Whether to show loading state */
+    loading?: boolean;
+    /** Loading content */
+    loadingContent?: React.ReactNode;
+    /** Table caption for accessibility */
+    caption?: string;
+}
+/**
+ * A feature-rich table component with sorting, selection, and accessibility features.
+ * Supports custom cell rendering, row selection, and responsive design.
+ *
+ * **Important:** The `data` prop should be stable (either declared outside the component or memoized)
+ * to prevent unnecessary re-renders and maintain performance.
+ *
+ * @example
+ * ```tsx
+ * // Define stable data and columns outside component or use useMemo
+ * const tableData = [
+ *   { id: 1, name: 'John Doe', email: 'john@example.com' },
+ *   { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
+ * ];
+ *
+ * const columns = [
+ *   { key: 'name', header: 'Name', sortable: true },
+ *   { key: 'email', header: 'Email', sortable: true },
+ *   {
+ *     key: 'actions',
+ *     header: 'Actions',
+ *     cell: (item) => <Button onClick={() => edit(item.id)}>Edit</Button>
+ *   }
+ * ];
+ *
+ * <Table
+ *   data={tableData}
+ *   columns={columns}
+ *   selectable
+ *   onSelectionChange={(selected) => setSelectedIds(selected)}
+ * />
+ * ```
+ */
+export declare function Table<T extends object>({ id, className, ref, size, data, columns, selectable, getRowId, initialSelected, onSelectionChange, showHeader, striped, hoverable, emptyState, loading, loadingContent, caption, ...props }: TableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/table/hooks.d.ts

@@ -0,0 +1,28 @@
+export type TableSortDirection = 'asc' | 'desc' | null;
+export interface SortConfig<T> {
+    key: keyof T | null;
+    direction: TableSortDirection;
+}
+export interface UseTableSortOptions<T> {
+    data: T[];
+    initialSort?: SortConfig<T>;
+}
+export interface UseTableSortResult<T> {
+    sortedData: T[];
+    sortConfig: SortConfig<T>;
+    handleSort: (key: keyof T, customSorter?: (a: T, b: T) => number) => void;
+}
+export declare function useTableSort<T>({ data, initialSort, }: UseTableSortOptions<T>): UseTableSortResult<T>;
+export interface UseTableSelectionOptions {
+    initialSelected?: (string | number)[];
+}
+export declare function useTableSelection({ initialSelected }?: UseTableSelectionOptions): {
+    selectedRows: Set<string | number>;
+    isRowSelected: (id: string | number) => boolean;
+    selectRow: (id: string | number) => void;
+    deselectRow: (id: string | number) => void;
+    selectAll: (ids: (string | number)[]) => void;
+    deselectAll: () => void;
+    isAllSelected: (ids: (string | number)[]) => boolean;
+    isPartiallySelected: (ids: (string | number)[]) => boolean;
+};

package/dist/src/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export { type TableSortDirection } from './hooks';
+export { Table, type TableColumn, type TableProps } from './Table';

package/dist/src/components/table/variants.d.ts

@@ -0,0 +1,14 @@
+interface TableVariantStyles {
+    container: string;
+    table: string;
+    header: string;
+    headerCell: string;
+    sortButton: string;
+    cell: string;
+    selectedRow: string;
+    checkbox: string;
+    checkboxSize: number;
+}
+export type TableSize = 'sm' | 'md' | 'lg';
+export declare const TableSizes: Record<TableSize, TableVariantStyles>;
+export {};

package/dist/src/components/tabs/Tabs.d.ts

@@ -2,25 +2,50 @@ import React from 'react';
 import { TabsVariant, TabsWidth } from './variants';
 export interface TabsProps {
     id?: string;
-    /** The default selected tab value (uncontrolled) */
+    /** The value of the tab that should be active when initially rendered */
     defaultValue?: string;
-    /** The selected tab value (controlled) */
+    /** The controlled value of the tab to activate */
     value?: string;
-    /** Callback fired when the tab selection changes */
+    /** Event handler called when the value changes */
     onValueChange?: (value: string) => void;
-    /** How the tabs should be sized */
+    /** How the tabs should be sized. "fit" sizes tabs to content, "full" makes them equal width */
     tabsWidth?: TabsWidth;
-    /** The visual style variant */
+    /** The visual style variant of the tabs */
     variant?: TabsVariant;
-    /** Additional class names for the tabs container */
+    /** Additional CSS classes to apply to the tabs container */
     className?: string;
-    /** The tab content and triggers */
+    /** The tab list and content elements */
     children?: React.ReactNode;
     /** Ref to the tabs container */
     ref?: React.Ref<HTMLDivElement>;
-    /** Additional class names for the tab triggers */
+    /** Additional CSS classes to apply to the tab triggers */
     triggersClassName?: string;
-    /** Additional class names for the tab content */
+    /** Additional CSS classes to apply to the tab content */
     contentClassName?: string;
 }
+/**
+ * A tabs component for organizing content into switchable sections.
+ * Works with TabsList, TabsTrigger, and TabsContent child components.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1" variant="underline">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Overview</TabsTrigger>
+ *     <TabsTrigger value="tab2">Details</TabsTrigger>
+ *     <TabsTrigger value="tab3">Settings</TabsTrigger>
+ *   </TabsList>
+ *
+ *   <TabsContent value="tab1">
+ *     <h3>Overview Content</h3>
+ *   </TabsContent>
+ *   <TabsContent value="tab2">
+ *     <h3>Details Content</h3>
+ *   </TabsContent>
+ *   <TabsContent value="tab3">
+ *     <h3>Settings Content</h3>
+ *   </TabsContent>
+ * </Tabs>
+ * ```
+ */
 export declare function Tabs({ defaultValue, value, onValueChange, tabsWidth, variant, className, children, ref, id, triggersClassName, contentClassName, }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/textarea/Textarea.d.ts

@@ -2,12 +2,49 @@ import { Ref } from 'react';
 import './styles.css';
 import { TextareaVariants } from './variants';
 export interface TextareaProps extends Partial<TextareaVariants>, React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Reference to the textarea element. */
     ref?: Ref<HTMLTextAreaElement>;
+    /** Read-only mode for displaying text content without interaction styling. */
     displayOnlyMode?: boolean;
+    /** Error message to display below the textarea. */
     errorMessage?: string;
+    /** Success message to display below the textarea. */
     successMessage?: string;
+    /** Whether to hide the resize handle (Webkit browsers only). */
     hideResizeHandle?: boolean;
+    /** Whether the textarea should automatically expand based on content. */
     autoExpand?: boolean;
+    /** Maximum number of characters allowed. Shows character count when > 0. */
     characterLimit?: number;
 }
+/**
+ * A versatile textarea component with auto-expand, character counting, and validation states.
+ * Supports both interactive and display-only modes with various styling options.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <Textarea
+ *   placeholder="Enter your message..."
+ *   rows={4}
+ *   value={message}
+ *   onChange={(e) => setMessage(e.target.value)}
+ * />
+ *
+ * // Auto-expanding with character limit
+ * <Textarea
+ *   autoExpand
+ *   characterLimit={500}
+ *   placeholder="Write your bio..."
+ *   errorMessage={bioError}
+ *   variant="outline"
+ * />
+ *
+ * // Display-only mode
+ * <Textarea
+ *   displayOnlyMode
+ *   value="Read-only content display"
+ * />
+ * ```
+ */
 export declare function Textarea({ variant, rounded, displayOnlyMode, errorMessage, successMessage, hideResizeHandle, autoExpand, characterLimit, className, ...rest }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/textarea/variants.d.ts

@@ -13,7 +13,9 @@ export declare const roundedVariants: {
 };
 export type TextareaRounded = keyof typeof roundedVariants;
 export interface TextareaVariants {
+    /** Visual style variant of the textarea. */
     variant: TextareaVariant;
+    /** Border radius of the textarea. */
     rounded: TextareaRounded;
 }
 export declare const textareaDefaults: TextareaVariants;

package/dist/src/components/toast/Toast.d.ts

@@ -6,12 +6,19 @@ export interface ToastAction {
 }
 /** Data for a toast notification */
 export interface ToastData {
+    /** Unique identifier for the toast */
     id: string;
+    /** The main message text for the toast */
     title: string;
+    /** Optional secondary message text */
     description?: string;
+    /** The type of toast which determines styling and icon. Can be extended with customTypes */
     type?: ToastType;
+    /** Optional action button configuration */
     action?: ToastAction;
+    /** Duration in milliseconds before auto-dismiss. Set to 0 to disable auto-dismiss */
     duration?: number;
+    /** Callback fired when the toast is removed */
     onRemove?: (id: string) => void;
 }
 interface ToastProps extends ToastData {
@@ -21,5 +28,37 @@ interface ToastProps extends ToastData {
     }>;
     customComponent?: React.ComponentType<ToastData>;
 }
+/**
+ * A notification toast component for displaying temporary messages to users.
+ * Supports different types, actions, and auto-dismissal with customizable styling.
+ *
+ * @example
+ * ```tsx
+ * // Basic toast
+ * <Toast
+ *   id="notification-1"
+ *   title="Success!"
+ *   description="Your changes have been saved."
+ *   type="info"
+ * />
+ *
+ * // Toast with action button
+ * <Toast
+ *   id="undo-toast"
+ *   title="Item deleted"
+ *   action={{ label: "Undo", onClick: restoreItem }}
+ *   duration={5000}
+ * />
+ *
+ * // Warning toast with custom duration
+ * <Toast
+ *   id="warning-toast"
+ *   title="Connection lost"
+ *   description="Trying to reconnect..."
+ *   type="warning"
+ *   duration={0}
+ * />
+ * ```
+ */
 export declare function Toast({ id, title, description, type, action, duration, onRemove, customTypes, customComponent: CustomComponent, }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/toggle/Toggle.d.ts

@@ -1,13 +1,42 @@
 import React, { Ref } from 'react';
 import { ToggleBackgroundClasses, ToggleSize, ToggleVariant } from './variants';
 export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /** Reference to the toggle button element. */
     ref?: Ref<HTMLButtonElement>;
+    /** The size of the toggle switch. */
     size?: ToggleSize;
+    /** The color variant of the toggle switch. */
     variant?: ToggleVariant;
+    /** Whether the toggle is checked. If not provided, the toggle will be uncontrolled. */
     checked?: boolean;
+    /** Callback fired when the toggle state changes. */
     onCheckedChange?: (checked: boolean) => void;
+    /** Whether the toggle is disabled. */
     disabled?: boolean;
+    /** Additional CSS classes to apply to the toggle thumb. */
     thumbClassName?: string;
+    /** Custom background CSS classes for different toggle states. */
     backgroundClassNames?: ToggleBackgroundClasses;
 }
+/**
+ * A toggle switch component for binary on/off states with smooth animations.
+ * Supports both controlled and uncontrolled modes with keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled toggle
+ * <Toggle onCheckedChange={(checked) => console.log('Toggled:', checked)} />
+ *
+ * // Controlled toggle
+ * <Toggle
+ *   checked={isEnabled}
+ *   onCheckedChange={setIsEnabled}
+ *   size="lg"
+ *   variant="success"
+ * />
+ *
+ * // Disabled state
+ * <Toggle disabled checked />
+ * ```
+ */
 export declare function Toggle({ ref, id, size, variant, checked, onCheckedChange, disabled, className, thumbClassName, backgroundClassNames, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;