Switch Button

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Switch Button
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { Sun } from "lucide-react";
14import { useTheme } from "next-themes";
15import { Button } from "@/components/ui/button";
16import { cn } from "@/lib/utils";
17 
18interface SwitchButtonProps
19  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
20  variant?: "minimal";
21  size?: "sm" | "default" | "lg";
22  showLabel?: boolean;
23}
24 
25export default function SwitchButton({
26  className,
27  variant = "minimal",
28  size = "default",
29  showLabel = true,
30  ...props
31}: SwitchButtonProps) {
32  const { setTheme, theme } = useTheme();
33 
34  const handleThemeToggle = () => {
35    setTheme(theme === "dark" ? "light" : "dark");
36  };
37 
38  const variants = {
39    minimal: [
40      "rounded-lg",
41      "bg-gradient-to-b from-zinc-50/95 to-zinc-100/95 dark:from-zinc-800/95 dark:to-zinc-900/95",
42      "hover:from-zinc-100/95 hover:to-zinc-200/95 dark:hover:from-zinc-700/95 dark:hover:to-zinc-800/95",
43      "border border-zinc-200 dark:border-zinc-700/80",
44      "hover:border-zinc-300 dark:hover:border-zinc-600",
45      "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)]",
46      "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)]",
47      "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)]",
48      "transition-all duration-200 ease-out",
49      "backdrop-blur-sm",
50      "relative",
51      "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",
52      "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",
53    ],
54  };
55 
56  const sizes = {
57    sm: "h-8 px-3 text-sm",
58    default: "h-10 px-4",
59    lg: "h-11 px-5",
60  };
61 
62  return (
63    <Button
64      className={cn(
65        "group relative",
66        "transition-all duration-300 ease-out",
67        "text-zinc-600 dark:text-zinc-300",
68        "hover:text-zinc-800 dark:hover:text-zinc-100",
69        variants[variant],
70// … truncated