{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "duck-switch",
  "title": "Duck Switch",
  "description": "Toggle built on a real checkbox, so it submits with the form. Off it rests on the bank, on the track floods lime and a ripple spreads from the entry point. Sizes: sm, default.",
  "registryDependencies": [
    "@duck/theme"
  ],
  "files": [
    {
      "path": "registry/duck/ui/duck-switch.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * DuckSwitch — the duck entering the water.\n *\n * Off, it rests on the bank: an empty track with the 3px vinyl outline. On, it\n * slides in, the track floods lime, and one ripple spreads from the entry point\n * and dies. The knob travels further than its own width, so the state is\n * readable without colour.\n *\n * It is a real checkbox underneath, so it submits with the form, pairs with a\n * <label>, and gets Space for free. Enter is added, per the ARIA switch pattern.\n */\n\n/**\n * The knob lives inside the track, so peer-* cannot reach it directly — peer\n * variants only match siblings. The track claims the state and hands the knob\n * its travel through a variable, the same way QuackButton composes transforms.\n */\nconst trackSizes = {\n  sm: \"h-5 w-9 peer-checked:[--travel:16px]\",\n  default: \"h-6 w-11 peer-checked:[--travel:22px]\",\n} as const;\n\nconst knobSizes = {\n  sm: \"size-3\",\n  default: \"size-4\",\n} as const;\n\nexport interface DuckSwitchProps\n  extends Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> {\n  size?: keyof typeof trackSizes;\n  /** Visible label. Without one, pass an aria-label. */\n  children?: React.ReactNode;\n}\n\nfunction DuckSwitch({\n  className,\n  size = \"default\",\n  children,\n  onChange,\n  onKeyDown,\n  ...props\n}: DuckSwitchProps) {\n  const trackRef = React.useRef<HTMLSpanElement>(null);\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n      // The wake only happens on the way in.\n      if (!event.currentTarget.checked) return;\n      const track = trackRef.current;\n      if (!track) return;\n      const drop = document.createElement(\"span\");\n      // No translate utilities here: duck-ripple animates transform, and a\n      // centring translate would be thrown away the moment it starts.\n      drop.className =\n        \"pointer-events-none absolute inset-y-0 right-0 aspect-square rounded-full bg-vinyl [animation:duck-ripple_0.5s_ease-out_forwards]\";\n      drop.addEventListener(\"animationend\", () => drop.remove(), { once: true });\n      track.appendChild(drop);\n    },\n    [onChange]\n  );\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(event);\n      if (event.key !== \"Enter\" || event.defaultPrevented) return;\n      // A checkbox ignores Enter and lets the form submit. A switch shouldn't.\n      event.preventDefault();\n      event.currentTarget.click();\n    },\n    [onKeyDown]\n  );\n\n  return (\n    <label\n      data-slot=\"duck-switch\"\n      data-size={size}\n      className={cn(\n        \"inline-flex cursor-pointer items-center gap-3 text-sm select-none\",\n        \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50\",\n        className\n      )}\n    >\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        className=\"peer sr-only\"\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...props}\n      />\n      <span\n        ref={trackRef}\n        aria-hidden\n        className={cn(\n          \"relative flex shrink-0 items-center overflow-hidden rounded-full\",\n          // The off state cannot lean on the fill: muted on card is ~1.2:1.\n          // The 3px sticker edge is what actually draws the boundary.\n          \"sticker border-border bg-transparent\",\n          \"transition-[background-color,border-color] duration-300 ease-[var(--ease-duck)]\",\n          \"peer-checked:border-primary peer-checked:bg-primary\",\n          \"peer-active:[animation:duck-squash_0.3s_var(--ease-squash)]\",\n          \"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background\",\n          trackSizes[size]\n        )}\n      >\n        <span\n          className={cn(\n            \"pointer-events-none relative z-10 ml-px rounded-full bg-vinyl shadow-[0_1px_2px_oklch(0_0_0/0.3)]\",\n            \"translate-x-[var(--travel,0px)] transition-transform duration-300 ease-[var(--ease-squash)]\",\n            knobSizes[size]\n          )}\n        />\n      </span>\n      {children}\n    </label>\n  );\n}\n\nexport { DuckSwitch };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}