{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-150",
  "type": "registry:component",
  "files": [
    {
      "path": "registry/default/components/comp-150.tsx",
      "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\n\nexport default function Component() {\n  const id = useId();\n  const [theme, setTheme] = useState<string>(\"light\");\n\n  return (\n    <div className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        Dark mode toggle checkbox\n      </legend>\n      <div className=\"flex flex-col justify-center\">\n        <input\n          checked={theme === \"dark\"}\n          className=\"peer sr-only\"\n          id={id}\n          name={id}\n          onChange={() =>\n            setTheme((prev) => (prev === \"dark\" ? \"light\" : \"dark\"))\n          }\n          type=\"checkbox\"\n        />\n        <label\n          aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}\n          className=\"group relative inline-flex size-9 items-center justify-center rounded-md border border-input bg-background text-foreground shadow-xs outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50\"\n          htmlFor={id}\n        >\n          {/* Note: After dark mode implementation, rely on dark: prefix rather than group-peer-checked: */}\n          <MoonIcon\n            aria-hidden=\"true\"\n            className=\"shrink-0 scale-0 opacity-0 transition-all group-peer-checked:scale-100 group-peer-checked:opacity-100\"\n            size={16}\n          />\n          <SunIcon\n            aria-hidden=\"true\"\n            className=\"absolute shrink-0 scale-100 opacity-100 transition-all group-peer-checked:scale-0 group-peer-checked:opacity-0\"\n            size={16}\n          />\n        </label>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "checkbox",
      "label",
      "toggle",
      "darkmode",
      "radix"
    ]
  }
}