A accessible toggle switch component built on Radix UI primitives, supporting both controlled and uncontrolled usage patterns with Flamingo ODS design tokens. ## Key Components - **`Switch`** — A `forwardRef` wrapper around `@radix-ui/react-switch` that manages internal state while staying in sync with optional controlled props (`checked`, `onCheckedChange`). ## Usage Example ```typescript // Uncontrolled // Controlled const [enabled, setEnabled] = React.useState(false); setEnabled(val)} /> // Disabled state ``` ## Key Behaviors - **Hybrid state management** — Maintains local `isChecked` state via `useState`, synced with the `checked` prop via `useEffect`, allowing both controlled and uncontrolled usage. - **Thumb animation** — The inner thumb translates `8px` on toggle using inline `transform` with a `duration-200` transition. - **ODS token styling** — Uses design tokens (`ods-accent`, `ods-text-secondary`, `ods-card`, `ods-bg-hover`, `ods-bg-active`, `ods-focus`) for consistent theming across states: default, hover, active, focus-visible, and disabled. - **Accessibility** — Inherits Radix UI's keyboard navigation, ARIA roles, and focus ring support out of the box.