{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-toggle",
  "title": "Theme Toggle",
  "description": "Light / system / dark toggle using next-themes.",
  "dependencies": [
    "lucide-react",
    "next-themes"
  ],
  "registryDependencies": [
    "@atroui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/theme-toggle.tsx",
      "content": "\"use client\"\n\nimport { Monitor, Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst OPTIONS = [\n  { id: \"light\", label: \"Light\", Icon: Sun },\n  { id: \"system\", label: \"System\", Icon: Monitor },\n  { id: \"dark\", label: \"Dark\", Icon: Moon },\n] as const\n\ntype ThemeId = (typeof OPTIONS)[number][\"id\"]\n\nexport function ThemeToggle({ className }: { className?: string }) {\n  const { theme, setTheme, resolvedTheme } = useTheme()\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const current = (mounted\n    ? (theme ?? resolvedTheme ?? \"system\")\n    : \"system\") as ThemeId\n  const currentOption = OPTIONS.find((o) => o.id === current) ?? OPTIONS[1]!\n\n  const cycle = () => {\n    const idx = OPTIONS.findIndex((o) => o.id === current)\n    const next = OPTIONS[(idx + 1) % OPTIONS.length]!\n    setTheme(next.id)\n  }\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        aria-label={`Theme: ${currentOption.label}. Tap to change.`}\n        title={`Theme: ${currentOption.label}`}\n        onClick={cycle}\n        className={cn(\n          \"inline-flex size-9 items-center justify-center rounded-lg border border-border-subtle bg-white/5 text-foreground sm:hidden active:scale-[0.97]\",\n          className\n        )}\n      >\n        <currentOption.Icon className=\"size-4\" strokeWidth={2} />\n      </button>\n\n      <div\n        role=\"radiogroup\"\n        aria-label=\"Theme\"\n        className={cn(\n          \"hidden items-stretch overflow-hidden rounded-lg border border-border-subtle bg-white/5 sm:inline-flex\",\n          className\n        )}\n      >\n        {OPTIONS.map(({ id, label, Icon }) => {\n          const isActive = current === id\n          const title =\n            id === \"system\" && mounted && theme === \"system\" && resolvedTheme\n              ? `System (${resolvedTheme})`\n              : label\n          return (\n            <button\n              key={id}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isActive}\n              aria-label={title}\n              title={title}\n              onClick={() => setTheme(id)}\n              className={cn(\n                \"inline-flex min-h-9 min-w-9 items-center justify-center text-muted-foreground\",\n                isActive && \"bg-primary text-primary-foreground\",\n                !isActive && \"hover:bg-white/10 hover:text-foreground\"\n              )}\n            >\n              <Icon className=\"size-3.5\" strokeWidth={2} />\n            </button>\n          )\n        })}\n      </div>\n    </>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/theme-toggle.tsx"
    }
  ],
  "type": "registry:ui"
}