{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-buttons-theme-toggler",
  "title": "Theme Toggler Button",
  "description": "A button that toggles the theme gradually.",
  "dependencies": [
    "next-themes",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@animate-ui/primitives-effects-theme-toggler",
    "@animate-ui/components-buttons-icon"
  ],
  "files": [
    {
      "path": "registry/components/buttons/theme-toggler/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { useTheme } from 'next-themes';\nimport { Monitor, Moon, Sun } from 'lucide-react';\nimport { VariantProps } from 'class-variance-authority';\n\nimport {\n  ThemeToggler as ThemeTogglerPrimitive,\n  type ThemeTogglerProps as ThemeTogglerPrimitiveProps,\n  type ThemeSelection,\n  type Resolved,\n} from '@/components/animate-ui/primitives/effects/theme-toggler';\nimport { buttonVariants } from '@/components/animate-ui/components/buttons/icon';\nimport { cn } from '@/lib/utils';\n\nconst getIcon = (\n  effective: ThemeSelection,\n  resolved: Resolved,\n  modes: ThemeSelection[],\n) => {\n  const theme = modes.includes('system') ? effective : resolved;\n  return theme === 'system' ? (\n    <Monitor />\n  ) : theme === 'dark' ? (\n    <Moon />\n  ) : (\n    <Sun />\n  );\n};\n\nconst getNextTheme = (\n  effective: ThemeSelection,\n  modes: ThemeSelection[],\n): ThemeSelection => {\n  const i = modes.indexOf(effective);\n  if (i === -1) return modes[0];\n  return modes[(i + 1) % modes.length];\n};\n\ntype ThemeTogglerButtonProps = React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    modes?: ThemeSelection[];\n    onImmediateChange?: ThemeTogglerPrimitiveProps['onImmediateChange'];\n    direction?: ThemeTogglerPrimitiveProps['direction'];\n  };\n\nfunction ThemeTogglerButton({\n  variant = 'default',\n  size = 'default',\n  modes = ['light', 'dark', 'system'],\n  direction = 'ltr',\n  onImmediateChange,\n  onClick,\n  className,\n  ...props\n}: ThemeTogglerButtonProps) {\n  const { theme, resolvedTheme, setTheme } = useTheme();\n\n  return (\n    <ThemeTogglerPrimitive\n      theme={theme as ThemeSelection}\n      resolvedTheme={resolvedTheme as Resolved}\n      setTheme={setTheme}\n      direction={direction}\n      onImmediateChange={onImmediateChange}\n    >\n      {({ effective, resolved, toggleTheme }) => (\n        <button\n          data-slot=\"theme-toggler-button\"\n          className={cn(buttonVariants({ variant, size, className }))}\n          onClick={(e) => {\n            onClick?.(e);\n            toggleTheme(getNextTheme(effective, modes));\n          }}\n          {...props}\n        >\n          {getIcon(effective, resolved, modes)}\n        </button>\n      )}\n    </ThemeTogglerPrimitive>\n  );\n}\n\nexport { ThemeTogglerButton, type ThemeTogglerButtonProps };\n",
      "type": "registry:ui",
      "target": "components/animate-ui/components/buttons/theme-toggler.tsx"
    }
  ],
  "type": "registry:ui"
}