{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "type": "registry:ui",
  "title": "Switch",
  "description": "An accessible toggle with a springy thumb. Works controlled or uncontrolled and uses role=\"switch\".",
  "files": [
    {
      "path": "registry/ui/switch.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport interface SwitchProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  label?: string;\n  className?: string;\n}\n\nexport function Switch({\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  disabled,\n  label,\n  className = \"\",\n}: SwitchProps) {\n  const [inner, setInner] = React.useState(defaultChecked);\n  const on = checked ?? inner;\n\n  const toggle = () => {\n    if (checked === undefined) setInner(!on);\n    onCheckedChange?.(!on);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={on}\n      aria-label={label}\n      disabled={disabled}\n      onClick={toggle}\n      className={[\n        \"relative inline-flex h-5 w-[34px] shrink-0 items-center rounded-full transition-colors duration-200\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/50 disabled:opacity-50\",\n        on ? \"bg-sky-300\" : \"bg-zinc-800 ring-1 ring-inset ring-white/15\",\n        className,\n      ].join(\" \")}\n    >\n      <span\n        className={[\n          \"absolute left-[3px] size-3.5 rounded-full transition-all duration-300\",\n          \"[transition-timing-function:cubic-bezier(.2,1.4,.4,1)]\",\n          on ? \"translate-x-3.5 bg-sky-950\" : \"bg-zinc-400\",\n        ].join(\" \")}\n      />\n    </button>\n  );\n}\n"
    }
  ]
}