{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "Toggle switch on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Thumb travel and easing use ai2 motion tokens.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "radix-ui@^1.6.1"
  ],
  "registryDependencies": [
    "@ai2/tokens",
    "@ai2/primitives"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/switch.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"@/registry/ai2/ui/primitives\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst switchVariants = cva(\n  \"peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-colors duration-(--motion-fast) after:absolute after:-inset-1.5 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/70\",\n  {\n    variants: {\n      tone: {\n        neutral: \"data-[state=checked]:bg-primary\",\n        brand: \"data-[state=checked]:bg-brand\",\n        success: \"data-[state=checked]:bg-success\",\n        danger: \"data-[state=checked]:bg-danger\",\n      },\n      size: {\n        sm: \"h-4 w-7\",\n        md: \"h-5 w-9\",\n        lg: \"h-6 w-11\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\", size: \"md\" },\n  }\n)\n\nconst thumbVariants = cva(\n  \"pointer-events-none block rounded-full bg-background ring-0 transition-transform duration-(--motion-fast) data-[state=unchecked]:translate-x-0\",\n  {\n    variants: {\n      size: {\n        sm: \"size-3 data-[state=checked]:translate-x-3\",\n        md: \"size-4 data-[state=checked]:translate-x-4\",\n        lg: \"size-5 data-[state=checked]:translate-x-5\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  }\n)\n\ninterface SwitchProps\n  extends React.ComponentProps<typeof SwitchPrimitive.Root>,\n    VariantProps<typeof switchVariants> {}\n\nfunction Switch({ className, tone, size, ...props }: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-tone={tone ?? \"neutral\"}\n      className={cn(switchVariants({ tone, size, className }))}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb data-slot=\"switch-thumb\" className={cn(thumbVariants({ size }))} />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch, switchVariants, type SwitchProps }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "tone sets the checked track color. Use for instant-apply settings; use Checkbox for form submission.",
  "categories": [
    "form"
  ],
  "type": "registry:ui"
}