{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-toggle-theme",
  "title": "Toggle Theme",
  "description": "A dropdown button to switch between light, dark, and system themes. Re-exports ThemeProvider for app-level setup.",
  "dependencies": [
    "lucide-react",
    "next-themes"
  ],
  "registryDependencies": [
    "@lema-ds/button",
    "@lema-ds/dropdown-menu",
    "@lema-ds/ui-i18n",
    "@lema-ds/skeleton",
    "@lema-ds/ds-locale-provider"
  ],
  "files": [
    {
      "path": "components/ds/ds-toggle-theme.tsx",
      "content": "\"use client\"\n\nimport { useSyncExternalStore } from \"react\"\nimport { Sun, Moon, Monitor } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport { Button } from \"@/components/ui/button\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { UI_I18N, type UILocale } from \"@/lib/ui-i18n\"\nimport { useUILocale } from \"@/components/ui/ds-locale-provider\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\n// ── ToggleTheme ────────────────────────────────────────────────────────────\n\nconst themeIcons = {\n  light: Sun,\n  dark: Moon,\n  system: Monitor,\n} as const\n\ninterface ToggleThemeProps {\n  locale?: UILocale\n  loading?: boolean\n}\n\nexport function ToggleTheme({ locale: localeProp, loading }: ToggleThemeProps) {\n  const locale = useUILocale(localeProp)\n  const { resolvedTheme, setTheme } = useTheme()\n  const mounted = useSyncExternalStore(\n    () => () => {},\n    () => true,\n    () => false\n  )\n\n  if (!mounted) {\n    return <Skeleton className=\"size-9 rounded-md\" />\n  }\n\n  const Icon = themeIcons[resolvedTheme as keyof typeof themeIcons] ?? Sun\n\n  const { light, dark, system, trigger } = UI_I18N[locale].toggleTheme\n\n  if (loading) {\n    return <Skeleton className=\"size-9 rounded-md\" />\n  }\n\n  return (\n    <DropdownMenu data-slot=\"toggle-theme\">\n      <DropdownMenuTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          aria-label={trigger}\n          data-slot=\"toggle-theme-trigger\"\n        >\n          <Icon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem\n          onClick={() => setTheme(\"light\")}\n          data-slot=\"toggle-theme-option\"\n        >\n          <Sun data-icon=\"inline-start\" />\n          {light}\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          onClick={() => setTheme(\"dark\")}\n          data-slot=\"toggle-theme-option\"\n        >\n          <Moon data-icon=\"inline-start\" />\n          {dark}\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          onClick={() => setTheme(\"system\")}\n          data-slot=\"toggle-theme-option\"\n        >\n          <Monitor data-icon=\"inline-start\" />\n          {system}\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}