{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "On/off toggle in default and small sizes; the handle grows on check per UX4G. Built on Radix Switch.",
  "dependencies": ["@radix-ui/react-switch", "class-variance-authority"],
  "registryDependencies": ["https://indiacn.in/r/theme.json", "https://indiacn.in/r/label.json"],
  "files": [
    {
      "path": "components/ui/switch.tsx",
      "content": "'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\n\nimport { cn } from '@/lib/utils';\n\n/*\n * UX4G toggle: track 52x32 (small 39x24). The handle grows on check —\n * 16 -> 24 at the default size, 16 -> 18 at small — and again on press, to\n * 20 at both sizes.\n *\n * Hover and press also draw a state layer: a circle centred on the handle,\n * neutral at 20%, clipped by the track. Measured as exactly 20%: #9e9e9e over\n * the #c6c6c6 track and #4e2ec4 over the #613af5 one.\n */\nconst SWITCH_VARIANTS = cva(\n  'peer group relative inline-flex shrink-0 cursor-pointer overflow-hidden rounded-full bg-neutral-200 transition-[background-color,box-shadow] duration-150 ease-in-out data-[state=checked]:bg-primary focus-visible:shadow-focus-primary focus-visible:outline-none disabled:pointer-events-none disabled:opacity-[0.38]',\n  {\n    variants: {\n      size: {\n        default: 'h-8 w-[52px]',\n        sm: 'h-6 w-[39px]',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n\nconst SWITCH_LAYER_VARIANTS = cva(\n  'bg-neutral/20 pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0 transition-[left,opacity] duration-150 ease-in-out group-hover:opacity-100 group-active:opacity-100 group-disabled:opacity-0',\n  {\n    variants: {\n      size: {\n        default:\n          'size-[34px] left-[calc(50%-10px)] group-data-[state=checked]:left-[calc(50%+10px)]',\n        sm: 'size-[30px] left-[calc(50%-7.5px)] group-data-[state=checked]:left-[calc(50%+7.5px)]',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n\nconst SWITCH_THUMB_VARIANTS = cva(\n  'bg-neutral-0 pointer-events-none absolute top-1/2 block -translate-x-1/2 -translate-y-1/2 rounded-full transition-[left,width,height] duration-150 ease-in-out group-active:data-[state=unchecked]:size-5',\n  {\n    variants: {\n      size: {\n        default:\n          'size-4 left-[calc(50%-10px)] data-[state=checked]:size-6 data-[state=checked]:left-[calc(50%+10px)]',\n        sm: 'size-4 left-[calc(50%-7.5px)] data-[state=checked]:size-[18px] data-[state=checked]:left-[calc(50%+7.5px)]',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n\ninterface ISwitchProps\n  extends ComponentProps<typeof SwitchPrimitive.Root>,\n    VariantProps<typeof SWITCH_VARIANTS> {}\n\n/** On/off control for a single setting. Built on Radix Switch primitive. */\nfunction Switch({ className, size, ...props }: ISwitchProps) {\n  return (\n    <SwitchPrimitive.Root className={cn(SWITCH_VARIANTS({ size }), className)} {...props}>\n      <div className={SWITCH_LAYER_VARIANTS({ size })} aria-hidden />\n      <SwitchPrimitive.Thumb className={SWITCH_THUMB_VARIANTS({ size })} />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}