Liquid Metal Button

1"use client";
2import { useRef, useState, useCallback, useMemo, type ReactNode } from "react";
3import { cn } from "@/lib/utils";
4 
5export interface LiquidMetalButtonProps
6  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
7  variant?: "default" | "outline" | "ghost";
8  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
9  theme?:
10    | "silver"
11    | "gold"
12    | "copper"
13    | "mercury"
14    | "steel"
15    | "emerald"
16    | "sapphire"
17    | "custom";
18  customColors?: {
19    base: string;
20    highlight: string;
21    shadow: string;
22    text?: string;
23    border?: string;
24    glow?: string;
25  };
26  clickEffect?: boolean;
27  hoverAnimation?: boolean;
28  icon?: ReactNode;
29  iconAfter?: ReactNode;
30  children: ReactNode;
31}
32 
33export function LiquidMetalButton({
34  variant = "default",
35  size = "md",
36  theme = "silver",
37  customColors,
38  clickEffect = true,
39  hoverAnimation = true,
40  icon,
41  iconAfter,
42  className,
43  children,
44  ...props
45}: LiquidMetalButtonProps) {
46  const buttonRef = useRef<HTMLButtonElement>(null);
47  const [isHovered, setIsHovered] = useState(false);
48  const [isPressed, setIsPressed] = useState(false);
49 
50  const themeColors = useMemo(
51    () => ({
52      silver: {
53        base: "bg-gradient-to-b from-gray-200 via-gray-300 to-gray-400 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900",
54        text: "text-gray-800 dark:text-gray-200",
55        highlight: "rgba(255, 255, 255, 0.8)",
56        shadow: "rgba(0, 0, 0, 0.3)",
57        glow: "shadow-gray-400/50",
58        border: "border-gray-400",
59        textShadow: "0 1px 2px rgba(0,0,0,0.3)",
60      },
61      gold: {
62        base: "bg-gradient-to-b from-amber-200 via-amber-300 to-amber-500 dark:from-amber-700 dark:via-amber-800 dark:to-amber-900",
63        text: "text-amber-900 dark:text-amber-200",
64        highlight: "rgba(255, 235, 150, 0.8)",
65        shadow: "rgba(120, 80, 0, 0.4)",
66        glow: "shadow-amber-400/50",
67        border: "border-amber-500",
68        textShadow:
69          "0 1px 3px rgba(120,80,0,0.4), 0 0 8px rgba(255,235,150,0.3)",
70      },
71      copper: {
72        base: "bg-gradient-to-b from-orange-200 via-orange-300 to-orange-600 dark:from-orange-700 dark:via-orange-800 dark:to-orange-900",
73        text: "text-orange-900 dark:text-orange-200",
74        highlight: "rgba(255, 200, 150, 0.8)",
75        shadow: "rgba(120, 60, 0, 0.4)",
76        glow: "shadow-orange-400/50",
77        border: "border-orange-500",
78        textShadow:
79// … truncated