{
  "schemaVersion": 1,
  "name": "switch",
  "useFor": "Pair with Label. Connect checked and onCheckedChange when the application owns the setting.",
  "constraints": [
    "Pill-shaped switches",
    "Colors other than blue for on",
    "A switch inside a form that needs a submit (use a checkbox)"
  ],
  "documentation": "",
  "source": "Extension from opencommerce-agentcard-web src/app/globals.css (.btn-primary, .feat-tile)",
  "exports": [
    "Switch"
  ],
  "client": true,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/switch",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/switch.md",
  "examples": [
    {
      "path": "examples/switch.tsx",
      "content": "import { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\n\nexport function Site() {\n  return (\n    <div className=\"grid max-w-sm gap-4\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Label variant=\"control\" htmlFor=\"switch-receipts\">Email a receipt for every purchase</Label>\n        <Switch id=\"switch-receipts\" defaultChecked />\n      </div>\n      <div className=\"flex items-center justify-between gap-4\">\n        <Label variant=\"control\" htmlFor=\"switch-pause\">Pause this card</Label>\n        <Switch id=\"switch-pause\" />\n      </div>\n      <div className=\"flex items-center justify-between gap-4\">\n        <Label variant=\"control\" htmlFor=\"switch-locked\">International purchases</Label>\n        <Switch id=\"switch-locked\" disabled />\n      </div>\n    </div>\n  );\n}\n",
      "exports": [
        "Site"
      ],
      "requires": [
        "switch",
        "label"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/switch/Site"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Switch",
  "description": "Toggle for a setting that takes effect immediately.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "@radix-ui/react-switch"
  ],
  "files": [
    {
      "path": "components/ui/switch.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\n// A track and key, flat as the brand's keys: off, a mist track on the 16 percent ink edge with a white key at the left;\n// on, the track turns blue and the key slides right (200ms ease-out, on transform). The key sits 2px inside the track,\n// its corners concentric with the track's 8px. Reduced motion moves it at once.\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer inline-flex h-6 w-11 shrink-0 items-center rounded-control border outline-none transition-[background-color,border-color] duration-200 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-line-brand-edge data-[state=checked]:bg-primary data-[state=unchecked]:border-hairline data-[state=unchecked]:bg-subtle motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block size-4.5 translate-x-0.5 rounded-sm border border-hairline bg-white shadow-tile transition-[translate] duration-200 ease-out data-[state=checked]:translate-x-5.5 motion-reduce:transition-none\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"
    }
  ]
}