{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-toggle",
  "type": "registry:ui",
  "title": "Theme Toggle",
  "description": "Animated sun/moon dark mode toggle.",
  "dependencies": [
    "next-themes",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/starkui/theme-toggle.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { cn } from \"@/lib/utils\";\n\nexport function ThemeToggle({ className }: { className?: string }) {\n  const { resolvedTheme, setTheme } = useTheme();\n  const [mounted, setMounted] = React.useState(false);\n  React.useEffect(() => setMounted(true), []);\n\n  return (\n    <button\n      aria-label=\"Toggle theme\"\n      onClick={() => setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\")}\n      className={cn(\n        \"relative inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted\",\n        className\n      )}\n    >\n      {mounted && (\n        <>\n          <Sun className=\"h-4 w-4 rotate-0 scale-100 transition-all duration-300 dark:-rotate-90 dark:scale-0\" />\n          <Moon className=\"absolute h-4 w-4 rotate-90 scale-0 transition-all duration-300 dark:rotate-0 dark:scale-100\" />\n        </>\n      )}\n    </button>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/theme-toggle.tsx"
    }
  ]
}