{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-07",
  "title": "Icon in thumb",
  "description": "Custom larger toggle with sun / moon icons that swap inside the thumb.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/patterns/switch/switch-07.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { MoonIcon, SunIcon } from 'lucide-react'\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch'\n\nimport { cn } from '@/lib/utils'\n\nexport function Switch07() {\n  return (\n    <SwitchPrimitive.Root\n      defaultChecked\n      aria-label=\"Toggle theme\"\n      className={cn(\n        'group relative inline-flex h-8 w-14 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors outline-none',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',\n        'data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80',\n      )}\n    >\n      <SunIcon className=\"absolute left-1.5 size-3.5 text-amber-500 transition-opacity group-data-checked:opacity-0\" />\n      <MoonIcon className=\"text-background absolute right-1.5 size-3.5 opacity-0 transition-opacity group-data-checked:opacity-100\" />\n      <SwitchPrimitive.Thumb\n        className={cn(\n          'bg-background pointer-events-none flex size-6 items-center justify-center rounded-full shadow-sm ring-0 transition-transform',\n          'data-checked:translate-x-7 data-unchecked:translate-x-1',\n        )}\n      >\n        <SunIcon className=\"size-3.5 text-amber-500 group-data-checked:hidden\" />\n        <MoonIcon className=\"text-primary hidden size-3.5 group-data-checked:block\" />\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/switch/switch-07.tsx"
    }
  ],
  "type": "registry:block"
}