大更新

lib/buttonStyles.ts

@@ -0,0 +1,33 @@
+/**
+ * Centralized button style configurations using tailwind-variants
+ * Maintains consistent button styling across the app with automatic class merging
+ */
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const buttonStyles = tv({
+  base: "group transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed",
+  variants: {
+    intent: {
+      // Theme button - 页面主题色按钮 (bg-foreground text-background)
+      theme: "rounded-xl h-11 w-full px-6 text-body-small font-bold bg-foreground text-background",
+      // Max button - 绿色 Max 按钮
+      max: "rounded-full px-3 h-[24px] min-w-0 text-[12px] font-bold bg-[#a7f3d0] text-[#065f46] dark:bg-green-900/30 dark:text-green-300",
+    },
+    fullWidth: {
+      true: "w-full",
+    },
+  },
+  defaultVariants: {
+    intent: "theme",
+  },
+});
+
+// Type export for use in components
+export type ButtonIntent = VariantProps<typeof buttonStyles>["intent"];
+
+/**
+ * Disabled button state classes
+ * Apply these when button is disabled
+ */
+export const disabledButtonClasses = "cursor-not-allowed opacity-50";

lib/cn.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+