Raised Button

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7import {
8	getContrastColor,
9	getLuminance,
10	parseColor,
11} from "@/lib/utils/colorUtils";
12 
13const buttonVariants = cva(
14	"inline-flex items-center justify-center dark:bg-zinc-500 dark:text-white whitespace-nowrap text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative bg-primary text-primary-foreground hover:bg-primary/90 border border-primary/50 shadow-md before:absolute before:inset-0 before:border-t before:border-white/40 before:bg-gradient-to-b before:from-white/20 before:to-transparent cursor-pointer transition-transform duration-200 active:scale-[0.96] subpixel-antialiased gap-2",
15	{
16		variants: {
17			variant: {
18				default: "",
19			},
20			size: {
21				default: "h-10 px-4 py-2 rounded-xl before:rounded-xl",
22				sm: "h-9 rounded-lg px-3 before:rounded-xl",
23				lg: "h-11 rounded-lg px-8 before:rounded-lg",
24				icon: "h-10 w-10",
25			},
26		},
27		defaultVariants: {
28			variant: "default",
29			size: "default",
30		},
31	},
32);
33 
34export interface ButtonProps
35	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
36		VariantProps<typeof buttonVariants> {
37	color?: string;
38}
39 
40const RaisedButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
41	({ className, variant, size, color, style = {}, ...props }, ref) => {
42		const Comp = "button";
43 
44		const dynamicStyles = React.useMemo(() => {
45			if (!color) return {};
46 
47			try {
48				const rgb = parseColor(color);
49				if (!rgb) return {};
50 
51				const luminance = getLuminance(rgb);
52				const textColor = getContrastColor(luminance);
53				const borderOpacity = 0.5;
54				const hoverOpacity = 0.9;
55				const whiteBorderOpacity = 0.6;
56				const whiteGradientOpacity = 0.3;
57				const shadowOpacity = 0.2;
58				const shadowSpread = "0px";
59				const shadowBlur = "5px";
60 
61				return {
62					backgroundColor: color,
63					color: textColor,
64					borderColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${borderOpacity})`,
65					"--hover-bg": `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${hoverOpacity})`,
66					"--border": `rgba(255, 255, 255, ${whiteBorderOpacity})`,
67					"--gradient": `rgba(255, 255, 255, ${whiteGradientOpacity})`,
68					"--shadow-color": `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${shadowOpacity})`,
69					boxShadow: `0 4px ${shadowBlur} ${shadowSpread} var(--shadow-color)`,
70// … truncated