<!-- source-hash: 1c76fc16642481ec29f5f1f42b31eb23 -->
A customizable toggle button component built on Radix UI primitives with variant-based styling and accessibility features.

## Key Components

- **`Toggle`** - Main toggle component with forwarded refs and customizable variants
- **`toggleVariants`** - CVA-based style variants for different visual states and sizes
- **Variant Types:**
  - `variant`: `"default"` | `"outline"` 
  - `size`: `"default"` | `"sm"` | `"lg"`

## Usage Example

```typescript
import { Toggle } from "./toggle"

function ToggleExample() {
  const [pressed, setPressed] = React.useState(false)
  
  return (
    <div className="flex gap-4">
      {/* Basic toggle */}
      <Toggle pressed={pressed} onPressedChange={setPressed}>
        Toggle me
      </Toggle>
      
      {/* Outline variant, small size */}
      <Toggle variant="outline" size="sm">
        Small outline
      </Toggle>
      
      {/* Large toggle with custom styling */}
      <Toggle 
        size="lg" 
        className="bg-blue-500 text-white"
        pressed={pressed}
        onPressedChange={setPressed}
      >
        Custom toggle
      </Toggle>
    </div>
  )
}
```

The component uses ODS (Open Design System) color tokens for consistent theming and includes hover states, focus management, and proper ARIA attributes through Radix UI.