{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-switcher",
  "title": "Theme Switcher",
  "description": "Compact swatch row for switching between built-in theme presets, kept in sync with every other consumer on the page.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/theme-switcher/theme-switcher.tsx",
      "content": "\"use client\";\n\nimport { useMounted } from \"@vllnt/ui\";\nimport { useThemePreset } from \"@vllnt/ui\";\nimport { cn } from \"@vllnt/ui\";\n\nexport type ThemeSwitcherProps = {\n  readonly className?: string;\n};\n\n/**\n * A compact swatch row for switching between built-in theme presets. Reads and\n * writes the active preset through {@link useThemePreset}, so it stays in sync\n * with every other consumer on the page.\n */\nexport function ThemeSwitcher({ className }: ThemeSwitcherProps) {\n  const mounted = useMounted();\n  const { preset, presets, setPreset } = useThemePreset();\n\n  return (\n    <div\n      aria-label=\"Theme preset\"\n      className={cn(\"flex items-center gap-1.5\", className)}\n      role=\"radiogroup\"\n    >\n      {presets.map((item) => {\n        const active = mounted && preset === item.name;\n        return (\n          <button\n            aria-checked={active}\n            aria-label={item.label}\n            className={cn(\n              \"size-6 rounded-full border transition-transform hover:scale-110\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              active\n                ? \"border-foreground ring-2 ring-ring ring-offset-2 ring-offset-background\"\n                : \"border-border\",\n            )}\n            key={item.name}\n            onClick={() => {\n              setPreset(item.name);\n            }}\n            role=\"radio\"\n            style={{ backgroundColor: item.swatch }}\n            title={item.label}\n            type=\"button\"\n          />\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}