import { ChangeEvent, ComponentPropsWithoutRef, ReactElement } from 'react'; import { AiMarkWithTooltipOrPopoverProps, DataTrackingId, 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; /** * AI mark configuration to display next to the label. * Can be a boolean to show a simple AI mark, or an object with tooltip/popover configuration. */ labelAiMark?: AiMarkWithTooltipOrPopoverProps["aiMark"]; /** * Description text to display below the label */ description?: string; } & DataTrackingId; /** * 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 * - Automatic tracking ID generation for analytics * * @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; /** * AI mark configuration to display next to the label. * Can be a boolean to show a simple AI mark, or an object with tooltip/popover configuration. */ labelAiMark?: AiMarkWithTooltipOrPopoverProps["aiMark"]; /** * Description text to display below the label */ description?: string; } & DataTrackingId & import('react').RefAttributes>;