{
  "schemaVersion": 1,
  "name": "toggle",
  "useFor": "Use for an on or off option that acts at once in a toolbar (show live routes only, pin a merchant). Give an icon-only toggle an aria-label. Use outline when the toggle sits among white keys.",
  "constraints": [
    "A toggle for a setting saved later (use Switch or Checkbox)",
    "Blue fill for the pressed state",
    "An icon that moves when pressed"
  ],
  "documentation": "",
  "source": "Extrapolated from opencommerce (the keys and the header's trays)",
  "exports": [
    "Toggle",
    "toggleVariants"
  ],
  "client": true,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/toggle",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/toggle.md",
  "examples": [
    {
      "path": "examples/toggle.tsx",
      "content": "\"use client\";\n\nimport { Pin, Radio, Star } from \"lucide-react\";\n\nimport { Toggle } from \"@/components/ui/toggle\";\n\nexport function Site() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Toggle aria-label=\"Show live routes only\" defaultPressed>\n        <Radio />\n        Live only\n      </Toggle>\n      <Toggle variant=\"outline\" aria-label=\"Pin merchant\">\n        <Pin />\n        Pin merchant\n      </Toggle>\n      <Toggle variant=\"outline\" size=\"sm\" aria-label=\"Favorite\" defaultPressed>\n        <Star />\n      </Toggle>\n    </div>\n  );\n}\n\nexport function Sizes() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Toggle variant=\"outline\" size=\"sm\">Small</Toggle>\n      <Toggle variant=\"outline\">Default</Toggle>\n      <Toggle variant=\"outline\" size=\"lg\">Large</Toggle>\n      <Toggle variant=\"outline\" disabled>Disabled</Toggle>\n    </div>\n  );\n}\n",
      "exports": [
        "Site",
        "Sizes"
      ],
      "requires": [
        "toggle"
      ],
      "packages": [
        "lucide-react"
      ],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/toggle/Site"
        },
        {
          "name": "Sizes",
          "url": "https://opencommerce-ds.vercel.app/preview/toggle/Sizes"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Toggle",
  "description": "A 34px key that stays pressed: a quiet label on the wash, or a white key that lights blue.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "@radix-ui/react-toggle",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/toggle.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Extrapolated from the brand's keys and the header's trays: a 34px key with 8px corners and a 14px Inter label at 500\n// beside a 14px glyph. `default` is the ghost key: a bare muted label that washes under the pointer and, when pressed on,\n// holds the wash with ink text. `outline` is the white key on the 16 percent ink edge; on, its label and glyph turn blue\n// and it takes the pale blue wash, as the lit tile does. A press shrinks it to 97 percent; the state change is color only.\nconst toggleVariants = cva(\n  \"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control border font-sans text-body-sm leading-none font-medium whitespace-nowrap outline-none select-none transition-[background-color,border-color,color,scale] duration-160 ease-out active:scale-97 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger motion-reduce:transition-[background-color,border-color,color] motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent text-fg-muted hover:bg-wash-hover hover:text-fg data-[state=on]:bg-wash-pill data-[state=on]:text-fg\",\n        outline: \"border-hairline bg-surface text-fg hover:bg-subtle data-[state=on]:border-line-brand data-[state=on]:bg-wash-selected data-[state=on]:text-fg-brand\",\n      },\n      size: {\n        default: \"h-8.5 min-w-8.5 px-3\",\n        sm: \"h-7 min-w-7 px-2.5 text-caption\",\n        lg: \"h-10 min-w-10 px-4 text-button\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"default\" },\n  },\n);\n\nfunction Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return <TogglePrimitive.Root data-slot=\"toggle\" className={cn(toggleVariants({ variant, size, className }))} {...props} />;\n}\n\nexport { Toggle, toggleVariants };\n"
    }
  ]
}