A client-side toggle button component built on Radix UI's `TogglePrimitive`, styled with `class-variance-authority` and OpenFrame design system tokens. ## Key Components - **`toggleVariants`** — CVA variant config defining styles for `variant` (`default`, `outline`) and `size` (`default`, `sm`, `lg`) combinations, using ODS design tokens (`ods-accent`, `ods-border`, `ods-focus`, etc.) - **`Toggle`** — A forwarded-ref React component wrapping `TogglePrimitive.Root` with variant-aware class merging via `cn` ## Usage Example ```typescript import { Toggle } from "@/components/ui/toggle" import { Bold } from "lucide-react" // Default toggle // Outline variant, small size Italic // Controlled toggle with pressed state Active ``` ## Variants | Prop | Options | Default | |---|---|---| | `variant` | `default`, `outline` | `default` | | `size` | `default`, `sm`, `lg` | `default` | ## Notes - Marked `"use client"` — compatible with Next.js App Router - Inherits all Radix `TogglePrimitive.Root` props (including `pressed`, `onPressedChange`, `defaultPressed`) - Active state styling (`data-[state=on]`) uses `ods-accent` background automatically - Source: [`components/ui/toggle.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/components/ui/toggle.tsx)