{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-05",
  "title": "Switch Sizes",
  "description": "A switch component with different sizes",
  "dependencies": [
    "radix-ui"
  ],
  "files": [
    {
      "path": "src/components/customized/switch/switch-05.tsx",
      "content": "import { Switch as SwitchPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Replace the `Switch` component in `@components/ui/switch` with below component and use it here to support custom size.\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {\n    thumbClassName?: string;\n  }\n>(({ className, thumbClassName, ...props }, ref) => (\n  <SwitchPrimitive.Root\n    className={cn(\n      \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitive.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\",\n        thumbClassName\n      )}\n    />\n  </SwitchPrimitive.Root>\n));\nSwitch.displayName = SwitchPrimitive.Root.displayName;\n\nconst SwitchSizesDemo = () => {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Switch defaultChecked />\n      <Switch className=\"h-6 w-10\" defaultChecked thumbClassName=\"h-5 w-5\" />\n      <Switch\n        className=\"h-7 w-12\"\n        defaultChecked\n        thumbClassName=\"h-6 w-6 data-[state=checked]:translate-x-5\"\n      />\n      <Switch\n        className=\"h-8 w-14\"\n        defaultChecked\n        thumbClassName=\"h-7 w-7 data-[state=checked]:translate-x-6\"\n      />\n    </div>\n  );\n};\n\nexport default SwitchSizesDemo;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}