{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "type": "registry:ui",
  "title": "Switch",
  "description": "A typewriter lever that slides between OFF and ON.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/switch.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\n\n/** A typewriter-style lever: a paper tab slides between OFF and ON. */\nexport function Switch({ className = \"\", ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      className={`group peer relative inline-flex h-[26px] w-[58px] shrink-0 cursor-pointer items-center rounded-[5px] border border-(--edge) bg-(--paper-sunk) p-[2px] shadow-[inset_0_1px_3px_rgb(0_0_0/.22)] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-(--pen) focus-visible:ring-offset-2 focus-visible:ring-offset-(--paper) disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-(--pen) ${className}`}\n      style={{ fontFamily: \"var(--font-type, 'Courier New', ui-monospace, monospace)\" }}\n      {...props}\n    >\n      <span\n        aria-hidden\n        className=\"absolute left-[7px] text-[9px] font-bold tracking-[0.12em] text-(--pen-ink) opacity-0 transition-opacity group-data-[state=checked]:opacity-100\"\n      >\n        ON\n      </span>\n      <span\n        aria-hidden\n        className=\"absolute right-[5px] text-[9px] font-bold tracking-[0.12em] text-(--ink-faint) transition-opacity group-data-[state=checked]:opacity-0\"\n      >\n        OFF\n      </span>\n      <SwitchPrimitive.Thumb className=\"relative z-10 flex h-[20px] w-[24px] items-center justify-center gap-[2px] rounded-[3px] border border-(--edge) bg-(--paper-raised) shadow-[0_1px_2px_rgb(0_0_0/.3)] transition-transform duration-150 data-[state=checked]:translate-x-[28px]\">\n        <span className=\"h-[9px] w-px bg-(--ink-faint)\" />\n        <span className=\"h-[9px] w-px bg-(--ink-faint)\" />\n        <span className=\"h-[9px] w-px bg-(--ink-faint)\" />\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  );\n}\n"
    }
  ],
  "dependencies": [
    "radix-ui"
  ]
}