{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "Toggle switches in three sizes with a stretch-on-press thumb.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/switch.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { gsap, motionScale, useAttributeCue, useMergedRef } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst switchVariants = cva(\n  \"group/switch peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-input p-0.5 shadow-well outline-none transition-colors duration-200 ease-cue focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:bg-signal\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-7\",\n        md: \"h-5 w-9\",\n        lg: \"h-6 w-11\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** CSS moves the thumb (its `translate`); GSAP squashes an inner face, so the two animations never touch the same element. */\nconst thumbVariants = cva(\n  \"group/thumb pointer-events-none relative block h-full transition-[translate,width] duration-200 ease-cue motion-reduce:transition-none\",\n  {\n    variants: {\n      size: {\n        sm: \"w-3 group-active/switch:w-3.5 data-[state=checked]:translate-x-3 data-[state=checked]:group-active/switch:translate-x-2.5\",\n        md: \"w-4 group-active/switch:w-5 data-[state=checked]:translate-x-4 data-[state=checked]:group-active/switch:translate-x-3\",\n        lg: \"w-5 group-active/switch:w-6 data-[state=checked]:translate-x-5 data-[state=checked]:group-active/switch:translate-x-4\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\ntype SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof switchVariants>;\n\nfunction Switch({ className, size = \"md\", ref, ...props }: SwitchProps) {\n  const rootRef = React.useRef<HTMLButtonElement>(null);\n  const thumbRef = React.useRef<HTMLSpanElement>(null);\n  const mergedRef = useMergedRef(rootRef, ref);\n\n  useAttributeCue(rootRef, \"data-state\", (_state, root) => {\n    const scale = motionScale(root);\n    if (!scale || !thumbRef.current) return;\n    gsap.fromTo(thumbRef.current.firstElementChild, { scaleX: 1 + 0.28 * scale, scaleY: 1 - 0.14 * scale }, { scaleX: 1, scaleY: 1, duration: 0.55, ease: \"elastic.out(1, 0.45)\" });\n  });\n\n  return (\n    <SwitchPrimitive.Root ref={mergedRef} data-slot=\"switch\" className={cn(switchVariants({ size }), className)} {...props}>\n      <SwitchPrimitive.Thumb ref={thumbRef} data-slot=\"switch-thumb\" className={thumbVariants({ size })}>\n        <span className=\"absolute inset-0 rounded-full bg-white shadow-[0_1px_3px_rgb(0_0_0/0.18),0_0_0_0.5px_rgb(0_0_0/0.06)]\" />\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch, switchVariants };\nexport type { SwitchProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/switch",
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}