{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-picker",
  "type": "registry:ui",
  "title": "Theme picker",
  "description": "Light, dark and system theme picker as a segmented radiogroup that toggles the dark class on the root element for Tailwind dark mode and reports it to onChange.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/theme-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/theme-picker.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst MODES = [\n  { id: \"light\", label: \"Light\" },\n  { id: \"dark\", label: \"Dark\" },\n  { id: \"system\", label: \"System\" },\n] as const\n\nfunction ThemePicker({\n  value = \"system\",\n  onChange,\n  className,\n}: {\n  value?: \"light\" | \"dark\" | \"system\"\n  onChange?: (v: \"light\" | \"dark\" | \"system\") => void\n  className?: string\n}) {\n  return (\n    <div data-slot=\"theme-picker\" className={cn(\"inline-flex rounded-lg border border-border bg-surface p-1\", className)} role=\"radiogroup\" aria-label=\"Theme\">\n      {MODES.map((m) => (\n        <button\n          key={m.id}\n          type=\"button\"\n          role=\"radio\"\n          aria-checked={value === m.id}\n          onClick={() => {\n            onChange?.(m.id)\n            if (m.id === \"light\") document.documentElement.classList.remove(\"dark\")\n            if (m.id === \"dark\") document.documentElement.classList.add(\"dark\")\n          }}\n          className={cn(\n            \"rounded-md px-2.5 py-1 text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-accent\",\n            value === m.id ? \"bg-sunken text-fg\" : \"text-fg-muted hover:text-fg\"\n          )}\n        >\n          {m.label}\n        </button>\n      ))}\n    </div>\n  )\n}\nexport { ThemePicker }\n"
    }
  ]
}