<!-- source-hash: a8b8fb57d73a83f422145fa44b5f2f41 -->
A reusable toggle switch component built on Radix UI primitives with custom styling and accessibility features.

## Key Components

- **Switch**: Main component that renders a toggle switch with a sliding thumb indicator
- Built on `@radix-ui/react-switch` for accessibility and keyboard navigation
- Styled with responsive design tokens and smooth transitions
- Supports disabled states and focus management

## Usage Example

```typescript
import { Switch } from "./components/ui/switch"

function SettingsPanel() {
  const [isEnabled, setIsEnabled] = React.useState(false)
  
  return (
    <div className="flex items-center space-x-2">
      <Switch 
        checked={isEnabled}
        onCheckedChange={setIsEnabled}
        id="notifications"
      />
      <label htmlFor="notifications">Enable notifications</label>
    </div>
  )
}

// Disabled state
<Switch disabled checked={false} />

// Custom styling
<Switch className="h-8 w-14" />
```

The component automatically handles:
- Checked/unchecked visual states with `data-[state]` attributes
- Smooth thumb animations via CSS transforms
- Focus ring styling for keyboard navigation
- Proper ARIA attributes for screen readers