{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-switch",
  "title": "Theme switch",
  "description": "ThemeSwitch: a light/dark toggle, or a light/dark/system toggle group.",
  "dependencies": [
    "@fuma-translate/react@^1.0.2",
    "lucide-react",
    "next-themes"
  ],
  "registryDependencies": [
    "button",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/base/docs/layouts/shared/slots/theme-switch.tsx",
      "content": "// Adapted from Fumadocs UI (https://github.com/fuma-nama/fumadocs)\n// Copyright (c) 2023 Fuma, MIT License\n\"use client\";\n\nimport { useTranslations } from \"@fuma-translate/react\";\nimport { Airplay, Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { type ComponentProps, useSyncExternalStore } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { Button } from \"@/components/ui/button\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\n\nconst noop = () => () => {};\n\nexport interface ThemeSwitchProps extends ComponentProps<\"div\"> {\n  mode?: \"light-dark\" | \"light-dark-system\";\n}\n\nfunction changeTheme(setTheme: (theme: string) => void, theme: string) {\n  if (document?.startViewTransition) {\n    document.startViewTransition(() => flushSync(() => setTheme(theme)));\n  } else {\n    setTheme(theme);\n  }\n}\n\nexport function ThemeSwitch({\n  className,\n  mode = \"light-dark\",\n  ...props\n}: ThemeSwitchProps) {\n  const { setTheme, theme, resolvedTheme } = useTheme();\n  const t = useTranslations({ note: \"theme switcher\" });\n  // `false` on the server and during hydration\n  const mounted = useSyncExternalStore(\n    noop,\n    () => true,\n    () => false,\n  );\n\n  if (mode === \"light-dark\") {\n    const value = mounted ? resolvedTheme : null;\n\n    return (\n      <Button\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        className={className}\n        aria-label={t(\"Toggle Theme\", { note: \"aria-label\" })}\n        onClick={() =>\n          changeTheme(setTheme, value === \"light\" ? \"dark\" : \"light\")\n        }\n        data-theme-toggle=\"\"\n      >\n        <Sun className=\"dark:hidden\" />\n        <Moon className=\"hidden dark:block\" />\n      </Button>\n    );\n  }\n\n  const value = mounted ? theme : undefined;\n\n  return (\n    <div className={className} data-theme-toggle=\"\" {...props}>\n      <ToggleGroup\n        size=\"sm\"\n        spacing={0}\n        value={value ? [value] : []}\n        onValueChange={(values) => {\n          if (values[0]) changeTheme(setTheme, values[0]);\n        }}\n      >\n        <ToggleGroupItem\n          value=\"light\"\n          aria-label={t(\"Light\", { note: \"aria-label\" })}\n        >\n          <Sun />\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"dark\"\n          aria-label={t(\"Dark\", { note: \"aria-label\" })}\n        >\n          <Moon />\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"system\"\n          aria-label={t(\"System\", { note: \"aria-label\" })}\n        >\n          <Airplay />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/docs/layouts/shared/slots/theme-switch.tsx"
    }
  ],
  "type": "registry:component"
}