UI Button

1"use client";
2 
3import { Spinner } from "@/components/remocn/spinner";
4import { mixOklch, type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
5 
6export type ButtonState = "idle" | "hover" | "press" | "loading" | "success";
7 
8type ButtonVariant =
9  | "default"
10  | "secondary"
11  | "destructive"
12  | "outline"
13  | "ghost";
14 
15type ButtonSize = "sm" | "default" | "lg";
16 
17export interface ButtonProps {
18  state?: ButtonState;
19  style?: ButtonStyle;
20  label?: string;
21  variant?: ButtonVariant;
22  size?: ButtonSize;
23  theme?: Partial<RemocnTheme>;
24  primary?: string;
25  speed?: number;
26  align?: "start" | "center" | "end";
27  className?: string;
28}
29 
30function justify(align: "start" | "center" | "end"): string {
31  return align === "start"
32    ? "flex-start"
33    : align === "end"
34      ? "flex-end"
35      : "center";
36}
37 
38const CHECK_PATH_LENGTH = 14;
39 
40const SIZE_STYLES: Record<
41  ButtonSize,
42  { height: number; padding: string; fontSize: number; gap: number }
43> = {
44  sm: { height: 32, padding: "0 12px", fontSize: 13, gap: 6 },
45  default: { height: 40, padding: "0 20px", fontSize: 15, gap: 8 },
46  lg: { height: 48, padding: "0 28px", fontSize: 17, gap: 10 },
47};
48 
49interface VariantTokens {
50  bg: string;
51  fg: string;
52  hoverBg: string;
53  border: string;
54}
55 
56function variantTokens(
57  variant: ButtonVariant,
58  theme: RemocnTheme,
59): VariantTokens {
60  const variants = {
61    secondary: {
62      bg: theme.secondary,
63      fg: theme.secondaryForeground,
64      hoverBg: mixOklch(theme.secondary, theme.muted, 1),
65      border: "transparent",
66    },
67    destructive: {
68      bg: theme.destructive,
69      fg: theme.destructiveForeground,
70      hoverBg: mixOklch(theme.destructive, theme.foreground, 0.12),
71      border: "transparent",
72    },
73    outline: {
74      bg: "transparent",
75      fg: theme.foreground,
76      hoverBg: theme.accent,
77      border: theme.border,
78    },
79    ghost: {
80      bg: "transparent",
81      fg: theme.foreground,
82      hoverBg: theme.accent,
83      border: "transparent",
84    },
85    default: {
86      bg: theme.primary,
87      fg: theme.primaryForeground,
88      hoverBg: mixOklch(theme.primary, theme.foreground, 0.1),
89      border: "transparent",
90    },
91  };
92 
93  return variants[variant] ?? variants.default;
94}
95 
96export interface ButtonStyle {
97  translateY: number;
98  scale: number;
99  background: string;
100  labelOpacity: number;
101  spinnerOpacity: number;
102  checkOpacity: number;
103}
104 
105export interface ButtonStyleContext {
106  restBg: string;
107  hoverBg: string;
108  pressBg: string;
109// … truncated