@allxsmith/bestax-bulma 5.7.0 → 5.8.1

package/dist/types/form/Input.d.ts

@@ -2,26 +2,71 @@ import React from 'react';
 import { FieldProps } from './Field';
 import { ControlBaseProps } from './Control';
 import { InputBaseProps } from './InputBase';
+/**
+ * Props for the Input component.
+ *
+ * Composes Field, Control, and Input into a single convenience component.
+ * Supports all Input props, plus Field-level (label, horizontal) and
+ * Control-level (icons, loading) props.
+ */
 export interface InputProps extends InputBaseProps {
+    /** Field label. */
     label?: React.ReactNode;
+    /** Size for the label. */
     labelSize?: FieldProps['labelSize'];
+    /** Props for the label element. */
     labelProps?: FieldProps['labelProps'];
+    /** Horizontal field layout. */
     horizontal?: boolean;
+    /** Icon props for left icon. */
     iconLeft?: ControlBaseProps['iconLeft'];
+    /** Icon props for right icon. */
     iconRight?: ControlBaseProps['iconRight'];
+    /** Shortcut for left icon name. */
     iconLeftName?: string;
+    /** Shortcut for right icon name. */
     iconRightName?: string;
+    /** Shortcut for left icon size. */
     iconLeftSize?: ControlBaseProps['iconLeftSize'];
+    /** Shortcut for right icon size. */
     iconRightSize?: ControlBaseProps['iconRightSize'];
+    /** Force left icon container. */
     hasIconsLeft?: boolean;
+    /** Force right icon container. */
     hasIconsRight?: boolean;
+    /** Shows loading indicator. */
     isLoading?: boolean;
+    /** Expand the control. */
     isExpanded?: boolean;
+    /** Control size. */
     controlSize?: ControlBaseProps['size'];
+    /** Help/validation message below the input. */
     message?: React.ReactNode;
+    /** Bulma color for the message. */
     messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field. */
     fieldClassName?: string;
+    /** Additional CSS classes for the Control. */
     controlClassName?: string;
 }
+/**
+ * The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static/read-only state, hover/focus/loading states, and all Bulma helper props.
+ *
+ * @function
+ * @param {InputProps} props - Props for Input.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <Input label="Username" placeholder="Enter username" iconLeftName="user" />
+ *
+ * @example
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   message="Please enter a valid email"
+ *   messageColor="danger"
+ *   color="danger"
+ * />
+ */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/types/form/InputBase.d.ts

@@ -1,16 +1,37 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Input component.
+ */
 export interface InputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
+    /** Bulma color modifier for the input. */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Size modifier for the input. */
     size?: 'small' | 'medium' | 'large';
+    /** Rounded input corners. */
     isRounded?: boolean;
+    /** Renders input as static (read only, styled). */
     isStatic?: boolean;
+    /** Applies hovered state. */
     isHovered?: boolean;
+    /** Applies focused state. */
     isFocused?: boolean;
+    /** Shows loading indicator. */
     isLoading?: boolean;
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Disabled input. */
     disabled?: boolean;
+    /** Read-only input. */
     readOnly?: boolean;
 }
+/**
+ * Bulma Input component with full Bulma helper class support.
+ *
+ * @function
+ * @param {InputBaseProps} props - Props for the Input component.
+ * @returns {JSX.Element} The rendered input element.
+ * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}
+ */
 export declare const InputBase: React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>>;
 export default InputBase;

package/dist/types/form/Numberinput.d.ts

@@ -1,30 +1,73 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/** Valid sizes for the Numberinput component. */
 export type NumberinputSize = 'small' | 'medium' | 'large';
+/** Valid colors for the Numberinput wrapper and control buttons. */
 export type NumberinputColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'dark';
+/** Valid colors for the Numberinput inner input element. */
 export type NumberinputInputColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/** Position of the increment/decrement control buttons. */
 export type NumberinputControlsPosition = 'left' | 'right' | 'both';
+/** Visual variant for the Numberinput controls. */
 export type NumberinputVariant = 'plusminus' | 'stepper';
+/**
+ * Props for the Numberinput component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
+ */
 export interface NumberinputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue' | 'type'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
+    /** Controlled value. */
     value?: number;
+    /** Default value for uncontrolled usage. */
     defaultValue?: number;
+    /** Minimum allowed value. */
     min?: number;
+    /** Maximum allowed value. */
     max?: number;
+    /** Step increment (default: 1). */
     step?: number;
+    /** Size variant. */
     size?: NumberinputSize;
+    /** Color variant for buttons. */
     color?: NumberinputColor;
+    /** Color of the input field itself. */
     inputColor?: NumberinputInputColor;
+    /** Position of +/- buttons. */
     controlsPosition?: NumberinputControlsPosition;
+    /** Use rounded buttons. */
     controlsRounded?: boolean;
+    /** Uses compact button spacing. */
     compact?: boolean;
+    /** Removes button borders and background. */
     bare?: boolean;
+    /** Style variant for the control buttons. */
     variant?: NumberinputVariant;
+    /** Whether the input is disabled. */
     disabled?: boolean;
+    /** Whether the input can be typed in. */
     editable?: boolean;
+    /** Shows a loading state. */
     isLoading?: boolean;
+    /** Enables exponential step increments when holding buttons. */
     exponential?: boolean;
+    /** Callback when value changes. */
     onChange?: (value: number) => void;
 }
+/**
+ * The `Numberinput` component provides a number input with increment/decrement buttons.
+ *
+ * @function
+ * @param {NumberinputProps} props - Props for the Numberinput component.
+ * @returns {JSX.Element} The rendered numeric input element.
+ *
+ * @example
+ * // Basic number input
+ * <Numberinput defaultValue={5} min={0} max={100} />
+ *
+ * @example
+ * // Stepper variant with color
+ * <Numberinput variant="stepper" color="primary" step={10} />
+ */
 export declare const Numberinput: React.ForwardRefExoticComponent<NumberinputProps & React.RefAttributes<HTMLInputElement>>;
 export default Numberinput;

package/dist/types/form/Radio.d.ts

@@ -1,14 +1,47 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Valid colors for the Radio component.
+ */
 export declare const radioColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Valid sizes for the Radio component.
+ */
 export declare const radioSizes: readonly ["small", "normal", "medium", "large"];
+/**
+ * Props for the Radio component.
+ */
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Color of the radio button. */
     color?: (typeof radioColors)[number];
+    /** Size of the radio button. */
     size?: (typeof radioSizes)[number];
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Whether the radio is disabled. */
     disabled?: boolean;
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** The label/content for the radio. */
     children?: React.ReactNode;
 }
+/**
+ * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.
+ *
+ * @function
+ * @param {RadioProps} props - Props for the Radio component.
+ * @returns {JSX.Element} The rendered radio element.
+ *
+ * @example
+ * // Basic radio
+ * <Radio name="option">Option A</Radio>
+ *
+ * @example
+ * // Inside a group
+ * <Radios name="color" defaultValue="red">
+ *   <Radio value="red">Red</Radio>
+ *   <Radio value="blue">Blue</Radio>
+ * </Radios>
+ */
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

package/dist/types/form/Radios.d.ts

@@ -1,12 +1,21 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/**
+ * Props for the Radios component.
+ */
 export interface RadiosProps extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Form field name shared by every Radio in the group (via context). */
     name?: string;
+    /** Currently-selected value (controlled mode). */
     value?: string;
+    /** Initial selected value (uncontrolled mode). */
     defaultValue?: string;
+    /** Fires when the selection changes. */
     onChange?: (value: string) => void;
+    /** Radio elements to render in the group. */
     children: React.ReactNode;
 }
 export declare const Radios: React.FC<RadiosProps> & {

package/dist/types/form/Rate.d.ts

@@ -1,38 +1,93 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/** Available size modifiers for the Rate component. */
 export type RateSize = 'small' | 'medium' | 'large';
 type IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';
 type BulmaColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Props for individual rate icons.
+ */
 export interface RateIconProps {
+    /** The index of this icon (0-based) */
     index: number;
+    /** Whether this icon is currently active (filled) */
     isActive: boolean;
+    /** Whether this icon is currently hovered */
     isHovered: boolean;
+    /** The current value */
     value: number;
+    /** Fill percentage for partial icons (0-100). Used with precision < 1. */
     fillPercent: number;
 }
+/**
+ * Props for the Rate component.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the container element.
+ */
 export interface RateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>, Omit<BulmaClassesProps, 'size'>, FormFieldProps {
+    /** Form field name. When set, a hidden input is rendered. */
     name?: string;
+    /** Optional id of the form this hidden input belongs to (use when the input lives outside the form element). */
     form?: string;
+    /** Controlled value (0 to max). */
     value?: number;
+    /** Default value for uncontrolled usage. */
     defaultValue?: number;
+    /** Maximum rating value. */
     max?: number;
+    /** Size variant. */
     size?: RateSize;
+    /** Whether the rating is disabled. */
     disabled?: boolean;
+    /** Show the numeric score next to stars. */
     showScore?: boolean;
+    /** Show custom text based on value. */
     showText?: boolean;
+    /** Array of text labels for each rating value. */
     texts?: string[];
+    /** Callback when rating changes. */
     onChange?: (value: number) => void;
+    /** Custom icon renderer. */
     customIcon?: (props: RateIconProps) => React.ReactNode;
+    /** Add spacing between icons. */
     spaced?: boolean;
+    /** Right-to-left direction. */
     rtl?: boolean;
+    /** Custom icon name for the rating stars. */
     iconName?: string;
+    /** Icon library to use (defaults to ConfigProvider value or 'fa'). */
     iconLibrary?: IconLibrary;
+    /** Icon style variant (e.g., 'solid', 'outlined'). */
     iconVariant?: string;
+    /** Additional icon modifiers. */
     iconFeatures?: string | string[];
+    /** Color of the active rating icons. */
     color?: BulmaColor;
+    /** Rating precision (e.g., `0.5` for half stars). */
     precision?: number;
+    /** Custom text displayed next to the rating. */
     customText?: string;
 }
+/**
+ * The `Rate` component provides a star/icon-based rating system.
+ *
+ * @function
+ * @param {RateProps} props - Props for the Rate component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the container element.
+ * @returns {JSX.Element} The rendered rating component.
+ *
+ * @example
+ * // Basic 5-star rating
+ * <Rate defaultValue={3} />
+ *
+ * @example
+ * // With color and precision
+ * <Rate defaultValue={3.5} color="warning" precision={0.5} showScore />
+ *
+ * @example
+ * // With Font Awesome icons
+ * <Rate iconName="star" iconLibrary="fa" iconVariant="solid" />
+ */
 export declare const Rate: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<HTMLDivElement>>;
 export default Rate;

package/dist/types/form/Select.d.ts

@@ -2,22 +2,57 @@ import React from 'react';
 import { FieldProps } from './Field';
 import { ControlBaseProps } from './Control';
 import { SelectBaseProps } from './SelectBase';
+/**
+ * Props for the Select component.
+ *
+ * Composes Field, Control, and SelectBase into a single convenience component.
+ * Supports all SelectBase props, plus Field-level (label, horizontal) and
+ * Control-level (icons, loading) props.
+ */
 export interface SelectProps extends SelectBaseProps {
+    /** Field label. */
     label?: React.ReactNode;
+    /** Size for the label. */
     labelSize?: FieldProps['labelSize'];
+    /** Props for the label element. */
     labelProps?: FieldProps['labelProps'];
+    /** Horizontal field layout. */
     horizontal?: boolean;
+    /** Icon props for left icon. */
     iconLeft?: ControlBaseProps['iconLeft'];
+    /** Shortcut for left icon name. */
     iconLeftName?: string;
+    /** Shortcut for left icon size. */
     iconLeftSize?: ControlBaseProps['iconLeftSize'];
+    /** Force left icon container. */
     hasIconsLeft?: boolean;
+    /** Shows loading indicator. */
     isLoading?: boolean;
+    /** Expand the control. */
     isExpanded?: boolean;
+    /** Control size. */
     controlSize?: ControlBaseProps['size'];
+    /** Help/validation message below the select. */
     message?: React.ReactNode;
+    /** Bulma color for the message. */
     messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+    /** Additional CSS classes for the Field. */
     fieldClassName?: string;
+    /** Additional CSS classes for the Control. */
     controlClassName?: string;
 }
+/**
+ * The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
+ *
+ * @function
+ * @param {SelectProps} props - Props for Select.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <Select label="Country" iconLeftName="globe">
+ *   <option>United States</option>
+ *   <option>Canada</option>
+ * </Select>
+ */
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/dist/types/form/SelectBase.d.ts

@@ -1,19 +1,43 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
+/**
+ * Props for the Select component.
+ */
 export interface SelectBaseProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
+    /** Bulma color modifier for the select. */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white';
+    /** Size modifier for the select. */
     size?: 'small' | 'medium' | 'large';
+    /** Rounded select corners. */
     isRounded?: boolean;
+    /** Shows loading indicator. */
     isLoading?: boolean;
+    /** Applies Bulma's is-active modifier. */
     isActive?: boolean;
+    /** Forces hovered state on the inner select. */
     isHovered?: boolean;
+    /** Forces focused state on the inner select. */
     isFocused?: boolean;
+    /** Makes the select span the full width of parent. */
     isFullwidth?: boolean;
+    /** Additional CSS classes to apply. */
     className?: string;
+    /** Disables the select. */
     disabled?: boolean;
+    /** Allows multiple selections. */
     multiple?: boolean;
+    /** Number of visible options in multiselect. */
     multipleSize?: number;
+    /** `<option>` elements. */
     children?: React.ReactNode;
 }
+/**
+ * Bulma Select component with full Bulma helper class support.
+ *
+ * @function
+ * @param {SelectBaseProps} props - Props for the SelectBase component.
+ * @returns {JSX.Element} The rendered select element.
+ * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}
+ */
 export declare const SelectBase: React.ForwardRefExoticComponent<SelectBaseProps & React.RefAttributes<HTMLSelectElement>>;
 export default SelectBase;

package/dist/types/form/Slider.d.ts

@@ -1,49 +1,135 @@
 import React from 'react';
 import { BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { FormFieldProps } from './fieldProps';
+/** Valid sizes for the Slider component. */
 export type SliderSize = 'small' | 'medium' | 'large';
+/** Valid colors for the Slider component. */
 export type SliderColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+/** Tooltip display mode for the Slider component. */
 export type SliderTooltip = 'auto' | 'always' | 'hidden';
+/** Orientation of the Slider component. */
 export type SliderOrientation = 'horizontal' | 'vertical';
+/**
+ * A tick mark displayed along the Slider track.
+ */
 export interface SliderMark {
+    /** Controlled value. */
     value: number;
+    /** Optional label rendered below the tick mark. */
     label?: React.ReactNode;
 }
+/**
+ * Shared base props for single and range Slider modes.
+ */
 interface SliderBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'onChange' | 'value' | 'defaultValue'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>, FormFieldProps {
+    /** Minimum value. */
     min?: number;
+    /** Maximum value. */
     max?: number;
+    /** Step increment (default: 1). */
     step?: number;
+    /** Size variant. */
     size?: SliderSize;
+    /** Color variant. */
     color?: SliderColor;
+    /** Use rounded track ends. */
     isRounded?: boolean;
+    /** Use circular thumb. */
     isCircle?: boolean;
+    /** Show current value tooltip. */
     showOutput?: boolean;
+    /** Controls tooltip visibility on the thumb. */
     tooltip?: SliderTooltip;
+    /** Shows tick marks along the track. */
     ticks?: boolean;
+    /** Custom labeled marks along the track. Each mark has `{ value: number; label?: ReactNode }`. */
     marks?: SliderMark[];
+    /** Orientation of the slider. */
     orientation?: SliderOrientation;
+    /** Function to scale the displayed value. */
     scale?: (value: number) => number;
+    /** Function to generate the `aria-valuetext` attribute. */
     getAriaValueText?: (value: number) => string;
+    /** Format function for output display. */
     formatOutput?: (value: number) => string;
 }
+/**
+ * Props for the Slider in single-value mode.
+ */
 export interface SliderSingleProps extends SliderBaseProps {
+    /**
+     * Enables range mode with two thumbs.
+     * @defaultValue false
+     */
     range?: false;
+    /** Controlled value. */
     value?: number;
+    /**
+     * Default value for uncontrolled usage.
+     * @defaultValue 0
+     */
     defaultValue?: number;
+    /** Callback when value changes. */
     onChange?: (value: number) => void;
+    /**
+     * Minimum distance between thumbs in range mode.
+     * @defaultValue 0
+     */
     minDistance?: never;
+    /** ARIA label(s) for the slider thumb(s). */
     ariaLabel?: string;
 }
+/**
+ * Props for the Slider in range (dual-thumb) mode.
+ */
 export interface SliderRangeProps extends SliderBaseProps {
+    /**
+     * Enables range mode with two thumbs.
+     * @defaultValue false
+     */
     range: true;
+    /** Controlled value. */
     value?: [number, number];
+    /**
+     * Default value for uncontrolled usage.
+     * @defaultValue 0
+     */
     defaultValue?: [number, number];
+    /** Callback when value changes. */
     onChange?: (value: [number, number]) => void;
+    /**
+     * Minimum distance between thumbs in range mode.
+     * @defaultValue 0
+     */
     minDistance?: number;
+    /** ARIA label(s) for the slider thumb(s). */
     ariaLabel?: [string, string];
+    /** Form field name for the low thumb. Use this in range mode so each thumb submits with its own name. */
     nameLow?: string;
+    /** Form field name for the high thumb. */
     nameHigh?: string;
 }
+/**
+ *  Props for the Slider component — a discriminated union of single and range modes.
+ * @extraProp {boolean} [disabled=false] - Whether the slider is disabled.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
+ */
 export type SliderProps = SliderSingleProps | SliderRangeProps;
+/**
+ * The `Slider` component provides a range slider input for selecting values within a range.
+ *
+ * @function
+ * @param {SliderProps} props - Props for the Slider component.
+ * @returns {JSX.Element} The rendered slider element.
+ *
+ * @example
+ * // Basic slider
+ * <Slider defaultValue={50} />
+ *
+ * @example
+ * // Range slider
+ * <Slider range defaultValue={[20, 80]} onChange={([low, high]) => {}} />
+ */
 export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
 export default Slider;

package/dist/types/form/Switch.d.ts

@@ -1,17 +1,67 @@
 import React from 'react';
 import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses';
+/**
+ * Valid colors for the Switch component.
+ */
 export declare const switchColors: readonly ["primary", "link", "info", "success", "warning", "danger"];
+/**
+ * Valid sizes for the Switch component.
+ */
 export declare const switchSizes: readonly ["small", "normal", "medium", "large"];
+/**
+ * Props for the Switch component.
+ * @extraProp {boolean} [checked] - Controlled checked state.
+ * @extraProp {boolean} [defaultChecked=false] - Default checked state for uncontrolled usage.
+ * @extraProp {boolean} [disabled=false] - Whether the switch is disabled.
+ * @extraProp {string} [className] - Additional CSS classes.
+ * @extraProp {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - Callback when switch state changes.
+ * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.
+ */
 export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
+    /** Color variant for the switch. */
     color?: (typeof switchColors)[number];
+    /** Size of the switch. */
     size?: (typeof switchSizes)[number];
+    /** Use rounded switch style. */
     isRounded?: boolean;
+    /** Use thin switch style. */
     isThin?: boolean;
+    /** Use outlined switch style. */
     isOutlined?: boolean;
+    /** Right-to-left layout (label on left). */
     isRtl?: boolean;
+    /** Color when the switch is in the off/passive state. */
     passiveType?: (typeof switchColors)[number];
+    /** Text color helper. */
     textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Label content for the switch. */
     children?: React.ReactNode;
 }
+/**
+ * The `Switch` component provides a toggle switch for boolean on/off states.
+ *
+ * @function
+ * @param {SwitchProps} props - Props for the Switch component.
+ * @returns {JSX.Element} The rendered switch element.
+ *
+ * @example
+ * // Basic switch
+ * <Switch>Enable notifications</Switch>
+ *
+ * @example
+ * // Colored and rounded switch
+ * <Switch color="success" isRounded checked>
+ *   Active
+ * </Switch>
+ *
+ * @example
+ * // Controlled switch
+ * <Switch
+ *   checked={isEnabled}
+ *   onChange={(e) => setIsEnabled(e.target.checked)}
+ * >
+ *   Feature enabled
+ * </Switch>
+ */
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default Switch;