{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-switcher",
  "title": "Theme Switcher",
  "description": "A theme switcher component for toggling between themes.",
  "dependencies": [
    "lucide-react",
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/use-controlled-state.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/theme-switcher.jsx",
      "content": "\"use client\";\n\nimport { useControlledState } from \"@/registry/optics/hooks/use-controlled-state\";\nimport { Monitor, Moon, Sun } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { useCallback, useEffect, useState, forwardRef } from \"react\";\nimport { cn } from \"@/registry/optics/lib/utils\";\n\nconst themes = [\n\t{\n\t\tkey: \"system\",\n\t\ticon: Monitor,\n\t\tlabel: \"System theme\",\n\t},\n\t{\n\t\tkey: \"light\",\n\t\ticon: Sun,\n\t\tlabel: \"Light theme\",\n\t},\n\t{\n\t\tkey: \"dark\",\n\t\ticon: Moon,\n\t\tlabel: \"Dark theme\",\n\t},\n];\n\nexport const ThemeSwitcher = forwardRef(\n\t(\n\t\t{\n\t\t\tvalue = undefined,\n\t\t\tonChange = undefined,\n\t\t\tdefaultValue = \"system\",\n\t\t\tclassName = \"\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [theme, setTheme] = useControlledState({\n\t\t\tdefaultValue: defaultValue,\n\t\t\tvalue: value,\n\t\t\tonChange,\n\t\t});\n\t\tconst [mounted, setMounted] = useState(false);\n\n\t\tconst handleThemeClick = useCallback(\n\t\t\t(themeKey) => {\n\t\t\t\tsetTheme(themeKey);\n\t\t\t},\n\t\t\t[setTheme],\n\t\t);\n\n\t\t// Prevent hydration mismatch\n\t\tuseEffect(() => {\n\t\t\tsetMounted(true);\n\t\t}, []);\n\n\t\tif (!mounted) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative isolate flex h-8 rounded-full squircle-none bg-background p-1 ring-1 ring-border\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{themes.map(({ key, icon: Icon, label }) => {\n\t\t\t\t\tconst isActive = theme === key;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\tclassName=\"relative h-6 w-6 rounded-full squircle-none\"\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tonClick={() => handleThemeClick(key)}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{isActive && (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 rounded-full squircle-none bg-secondary\"\n\t\t\t\t\t\t\t\t\tlayoutId=\"activeTheme\"\n\t\t\t\t\t\t\t\t\ttransition={{ type: \"spring\", duration: 0.5 }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"relative z-10 m-auto h-4 w-4\",\n\t\t\t\t\t\t\t\t\tisActive ? \"text-foreground\" : \"text-muted-foreground\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nThemeSwitcher.displayName = \"ThemeSwitcher\";\n",
      "type": "registry:component",
      "target": "components/optics/theme-switcher.jsx"
    }
  ],
  "type": "registry:component"
}