{
  "name": "switch-button",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Switch Button\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SwitchButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"minimal\";\n  size?: \"sm\" | \"default\" | \"lg\";\n  showLabel?: boolean;\n}\n\nexport default function SwitchButton({\n  className,\n  variant = \"minimal\",\n  size = \"default\",\n  showLabel = true,\n  ...props\n}: SwitchButtonProps) {\n  const { setTheme, theme } = useTheme();\n\n  const handleThemeToggle = () => {\n    setTheme(theme === \"dark\" ? \"light\" : \"dark\");\n  };\n\n  const variants = {\n    minimal: [\n      \"rounded-lg\",\n      \"bg-gradient-to-b from-zinc-50/95 to-zinc-100/95 dark:from-zinc-800/95 dark:to-zinc-900/95\",\n      \"hover:from-zinc-100/95 hover:to-zinc-200/95 dark:hover:from-zinc-700/95 dark:hover:to-zinc-800/95\",\n      \"border border-zinc-200 dark:border-zinc-700/80\",\n      \"hover:border-zinc-300 dark:hover:border-zinc-600\",\n      \"shadow-[0_1px_2px_-1px_rgb(0_0_0/0.1),0_1px_3px_-2px_rgb(0_0_0/0.1)] dark:shadow-[0_1px_2px_-1px_rgb(0_0_0/0.3),0_1px_3px_-2px_rgb(0_0_0/0.3)]\",\n      \"hover:shadow-[0_2px_4px_-2px_rgb(0_0_0/0.15),0_2px_6px_-3px_rgb(0_0_0/0.15)] dark:hover:shadow-[0_2px_4px_-2px_rgb(0_0_0/0.4),0_2px_6px_-3px_rgb(0_0_0/0.4)]\",\n      \"active:shadow-[0_0px_1px_0_rgb(0_0_0/0.1)] dark:active:shadow-[0_0px_1px_0_rgb(0_0_0/0.2)]\",\n      \"transition-all duration-200 ease-out\",\n      \"backdrop-blur-sm\",\n      \"relative\",\n      \"after:absolute after:inset-0 after:rounded-lg after:bg-gradient-to-t after:from-white/10 after:to-transparent after:opacity-0 hover:after:opacity-100 after:transition-opacity\",\n      \"before:absolute before:inset-[1px] before:rounded-[7px] before:bg-gradient-to-b before:from-white/20 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity dark:before:from-white/5\",\n    ],\n  };\n\n  const sizes = {\n    sm: \"h-8 px-3 text-sm\",\n    default: \"h-10 px-4\",\n    lg: \"h-11 px-5\",\n  };\n\n  return (\n    <Button\n      className={cn(\n        \"group relative\",\n        \"transition-all duration-300 ease-out\",\n        \"text-zinc-600 dark:text-zinc-300\",\n        \"hover:text-zinc-800 dark:hover:text-zinc-100\",\n        variants[variant],\n        sizes[size],\n        className\n      )}\n      onClick={handleThemeToggle}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"flex items-center gap-2\",\n          \"transition-all duration-300 ease-out\"\n        )}\n      >\n        <Sun\n          className={cn(\n            \"transition-all duration-700 ease-in-out\",\n            size === \"sm\" && \"h-3.5 w-3.5\",\n            size === \"default\" && \"h-4 w-4\",\n            size === \"lg\" && \"h-5 w-5\",\n            \"group-hover:rotate-[360deg] group-hover:scale-110\",\n            theme === \"dark\" ? \"rotate-180\" : \"rotate-0\",\n            \"transform-gpu\",\n            \"drop-shadow-[0_0_12px_rgba(252,211,77,0.3)] dark:drop-shadow-[0_0_12px_rgba(252,211,77,0.2)]\",\n            theme === \"dark\"\n              ? \"text-zinc-300 group-hover:text-zinc-100\"\n              : \"text-amber-500 group-hover:text-amber-600\",\n            \"group-active:scale-95\"\n          )}\n        />\n        {showLabel && (\n          <span\n            className={cn(\n              \"relative font-medium capitalize\",\n              \"transition-opacity duration-300 ease-out\"\n            )}\n          >\n            <span\n              className={cn(\n                \"absolute inset-0\",\n                theme === \"dark\" ? \"opacity-0\" : \"opacity-100\",\n                \"transition-opacity duration-300 ease-out\"\n              )}\n            >\n              Light\n              <span\n                className={cn(\n                  \"absolute -bottom-px left-0 h-px w-full\",\n                  \"bg-linear-to-r from-zinc-400/0 via-zinc-400/50 to-zinc-400/0\",\n                  \"dark:from-zinc-600/0 dark:via-zinc-600/50 dark:to-zinc-600/0\",\n                  \"opacity-0 group-hover:opacity-100\",\n                  \"transition-opacity duration-200\"\n                )}\n              />\n            </span>\n            <span\n              className={cn(\n                \"absolute inset-0\",\n                theme === \"dark\" ? \"opacity-100\" : \"opacity-0\",\n                \"transition-opacity duration-300 ease-out\"\n              )}\n            >\n              Dark\n              <span\n                className={cn(\n                  \"absolute -bottom-px left-0 h-px w-full\",\n                  \"bg-linear-to-r from-zinc-400/0 via-zinc-400/50 to-zinc-400/0\",\n                  \"dark:from-zinc-600/0 dark:via-zinc-600/50 dark:to-zinc-600/0\",\n                  \"opacity-0 group-hover:opacity-100\",\n                  \"transition-opacity duration-200\"\n                )}\n              />\n            </span>\n            <span className=\"opacity-0\">Light</span>\n          </span>\n        )}\n      </div>\n      <span\n        className={cn(\n          \"absolute inset-0\",\n          \"bg-gradient-to-r from-zinc-500/0 via-zinc-500/[0.12] to-zinc-500/0 dark:from-white/0 dark:via-white/[0.05]\",\n          \"translate-x-[-100%]\",\n          \"group-hover:translate-x-[100%]\",\n          \"transition-transform duration-500\",\n          \"ease-in-out\",\n          \"pointer-events-none\",\n          \"z-[1]\"\n        )}\n      />\n      <span\n        className={cn(\n          \"absolute inset-0 opacity-0 group-hover:opacity-100\",\n          \"bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.12),transparent_70%)] dark:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.07),transparent_70%)]\",\n          \"transition-opacity duration-500\",\n          \"pointer-events-none\",\n          \"z-[2]\"\n        )}\n      />\n    </Button>\n  );\n}\n",
      "path": "/components/kokonutui/switch-button.tsx",
      "target": "components/kokonutui/switch-button.tsx"
    }
  ]
}