import { ChangeEvent, ComponentPropsWithoutRef, ReactElement } from 'react'; import { LayoutUtilProps } from '../../types'; /** * State object returned by the Switch onChange callback */ export type SwitchState = { /** * Whether the switch is currently checked */ checked: boolean; /** * The value of the switch input */ value?: string | number | readonly string[]; }; /** * Props for the Switch component * @extends ComponentPropsWithoutRef<"input"> * @extends LayoutUtilProps */ export type SwitchProps = Omit, "onChange"> & LayoutUtilProps & { /** * Callback when switch is changed. * @param e Change event object * @param state Current switch state with checked status and value */ onChange?: (e: ChangeEvent, state: SwitchState) => void; /** * Label for the switch. * @remarks This should either be a string or have text content inside for accessibility */ label?: ReactElement | string; /** * Description text to display below the label */ description?: string; }; /** * Switch component for toggling between on/off states. * * Features: * - Toggle switch with smooth animations * - Check icon indicator when active * - Accessible with proper ARIA roles and attributes * - Keyboard navigation support (Space/Enter) * - Controlled and uncontrolled state management * - Customizable label and styling * - Layout utilities for positioning and spacing * - Focus management with visible focus indicators * - Hover states and visual feedback * - Disabled state support * * @example * console.log('Switch toggled:', state.checked)} * /> */ export declare const Switch: import('react').ForwardRefExoticComponent, HTMLInputElement>, "ref">, "onChange"> & LayoutUtilProps & { /** * Callback when switch is changed. * @param e Change event object * @param state Current switch state with checked status and value */ onChange?: (e: ChangeEvent, state: SwitchState) => void; /** * Label for the switch. * @remarks This should either be a string or have text content inside for accessibility */ label?: ReactElement | string; /** * Description text to display below the label */ description?: string; } & import('react').RefAttributes>;