{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-13",
  "title": "Wide icon switch",
  "description": "A wide switch that shows the current mode on the free half.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/switch/switch-13.tsx",
      "content": "import { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { MoonIcon, SunIcon } from '@/registry/ndeko/lib/icons';\nimport { cn } from '@/registry/ndeko/lib/utils';\n\nconst TRACK = [\n  'group/switch relative inline-grid h-8 shrink-0 cursor-pointer grid-cols-2 items-center rounded-full bg-foreground/15 p-0.5 outline-none transition-colors duration-200',\n  'data-checked:bg-primary focus-visible:ring-[3px] focus-visible:ring-ring/25 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n].join(' ');\n\nconst THUMB = [\n  'pointer-events-none absolute inset-y-0.5 start-0.5 w-[calc(50%-2px)] rounded-full bg-white shadow-[0_1px_2px_rgb(0_0_0/0.2),0_0_0_var(--hairline)_rgb(0_0_0/0.04)]',\n  'transition-[translate] duration-300 ease-(--ease-out-quint) data-checked:translate-x-full',\n].join(' ');\n\nconst STATE_ICON =\n  'pointer-events-none flex h-full w-9 items-center justify-center transition-opacity duration-200';\n\nexport default function Switch13() {\n  return (\n    <SwitchPrimitive.Root\n      defaultChecked\n      aria-label='Dark mode'\n      className={TRACK}\n    >\n      <SwitchPrimitive.Thumb className={THUMB} />\n      <span\n        className={cn(\n          STATE_ICON,\n          'text-primary-foreground opacity-0 group-data-checked/switch:opacity-100'\n        )}\n      >\n        <MoonIcon />\n      </span>\n      <span\n        className={cn(\n          STATE_ICON,\n          'text-muted-foreground group-data-checked/switch:opacity-0'\n        )}\n      >\n        <SunIcon />\n      </span>\n    </SwitchPrimitive.Root>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "switch"
  ],
  "type": "registry:component"
}