{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "A toggle control for boolean states with smooth animation.",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "packages/ui/src/switch.tsx",
      "content": "\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport type * as React from \"react\";\nimport { cn } from \"./utils\";\n\nexport interface SwitchProps extends SwitchPrimitive.Root.Props {\n  /**\n   * Size variant of the switch\n   * @default \"default\"\n   */\n  size?: \"sm\" | \"default\";\n}\n\nexport const Switch = ({\n  className,\n  size = \"default\",\n  ref,\n  ...props\n}: SwitchProps & React.RefAttributes<HTMLButtonElement>) => {\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 cursor-pointer touch-manipulation items-center rounded-full border border-transparent transition-[background-color,border-color] duration-150\",\n        // Size variants\n        \"data-[size=default]:h-4.5 data-[size=default]:w-8\",\n        \"data-[size=sm]:h-3.5 data-[size=sm]:w-6\",\n        // State colors\n        \"data-checked:bg-primary data-unchecked:bg-input\",\n        \"dark:data-unchecked:bg-input/80\",\n        // Focus styles - outside outline like buttons\n        \"focus:ring-0 focus:ring-offset-0 focus-visible:outline-2 focus-visible:outline-ring/50 focus-visible:outline-offset-2\",\n        // Invalid styles\n        \"aria-invalid:border-destructive aria-invalid:transition-none aria-invalid:focus-visible:outline-destructive/50 dark:aria-invalid:border-destructive/50\",\n        // Disabled styles\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        // Click area extension — bumped toward AAA touch target\n        \"after:absolute after:-inset-x-4 after:-inset-y-3\",\n        className\n      )}\n      data-size={size}\n      data-slot=\"switch\"\n      ref={ref}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full ring-0 transition-transform duration-150\",\n          \"bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground\",\n          // Size variants for thumb\n          \"group-data-[size=default]/switch:size-4\",\n          \"group-data-[size=sm]/switch:size-3\",\n          // Translation based on state\n          \"group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)]\",\n          \"group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)]\",\n          \"group-data-[size=default]/switch:data-unchecked:translate-x-0\",\n          \"group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n        )}\n        data-slot=\"switch-thumb\"\n      />\n    </SwitchPrimitive.Root>\n  );\n};\n\nSwitch.displayName = \"Switch\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}