{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-switcher",
  "title": "Theme Switcher",
  "author": "ramanak <ramanak.dev@gmail.com>",
  "description": "A theme switcher component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.",
  "dependencies": [
    "next-themes",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "@ramanak/utils"
  ],
  "files": [
    {
      "path": "src/registry/theme-switcher/theme-switcher.tsx",
      "content": "\"use client\"\r\n\r\nimport { MonitorIcon, MoonStarIcon, SunIcon } from \"lucide-react\"\r\nimport { motion } from \"motion/react\"\r\nimport { useTheme } from \"next-themes\"\r\nimport type { JSX } from \"react\"\r\nimport { useSyncExternalStore } from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction ThemeOption({\r\n  icon,\r\n  value,\r\n  isActive,\r\n  onClick,\r\n}: {\r\n  icon: JSX.Element\r\n  value: string\r\n  isActive?: boolean\r\n  onClick: (value: string) => void\r\n}) {\r\n  return (\r\n    <button\r\n      className={cn(\r\n        \"relative flex size-8 cursor-default items-center justify-center rounded-full transition-[color] [&_svg]:size-4\",\r\n        isActive\r\n          ? \"text-zinc-950 dark:text-zinc-50\"\r\n          : \"text-zinc-400 hover:text-zinc-950 dark:text-zinc-500 dark:hover:text-zinc-50\"\r\n      )}\r\n      role=\"radio\"\r\n      aria-checked={isActive}\r\n      aria-label={`Switch to ${value} theme`}\r\n      onClick={() => onClick(value)}\r\n    >\r\n      {icon}\r\n\r\n      {isActive && (\r\n        <motion.div\r\n          layoutId=\"theme-option\"\r\n          transition={{ type: \"spring\", bounce: 0.3, duration: 0.6 }}\r\n          className=\"absolute inset-0 rounded-full border border-zinc-200 dark:border-zinc-700\"\r\n        />\r\n      )}\r\n    </button>\r\n  )\r\n}\r\n\r\nconst THEME_OPTIONS = [\r\n  {\r\n    icon: <MonitorIcon />,\r\n    value: \"system\",\r\n  },\r\n  {\r\n    icon: <SunIcon />,\r\n    value: \"light\",\r\n  },\r\n  {\r\n    icon: <MoonStarIcon />,\r\n    value: \"dark\",\r\n  },\r\n]\r\n\r\nfunction ThemeSwitcher() {\r\n  const { theme, setTheme } = useTheme()\r\n\r\n  const isMounted = useSyncExternalStore(\r\n    () => () => {},\r\n    () => true,\r\n    () => false\r\n  )\r\n\r\n  if (!isMounted) {\r\n    return <div className=\"flex h-8 w-24\" />\r\n  }\r\n\r\n  return (\r\n    <motion.div\r\n      key={String(isMounted)}\r\n      initial={{ opacity: 0 }}\r\n      animate={{ opacity: 1 }}\r\n      transition={{ duration: 0.3 }}\r\n      className=\"inline-flex items-center overflow-hidden rounded-full bg-white ring-1 ring-zinc-200 ring-inset dark:bg-zinc-950 dark:ring-zinc-700\"\r\n      role=\"radiogroup\"\r\n    >\r\n      {THEME_OPTIONS.map((option) => (\r\n        <ThemeOption\r\n          key={option.value}\r\n          icon={option.icon}\r\n          value={option.value}\r\n          isActive={theme === option.value}\r\n          onClick={setTheme}\r\n        />\r\n      ))}\r\n    </motion.div>\r\n  )\r\n}\r\n\r\nexport { ThemeSwitcher }\r\n",
      "type": "registry:component"
    }
  ],
  "docs": "https://www.ramana.dev/components/theme-switcher-component",
  "type": "registry:component"
}