feat: add animated button component

2026-03-19 15:17:31 +08:00
parent 3960e0a0e7
commit 1dcd138763
6 changed files with 426 additions and 0 deletions
@@ -0,0 +1,43 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const buttonVariants = cva(
+  [
+    "relative isolate inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden whitespace-nowrap",
+    "rounded-[var(--radius-sm)] border font-medium select-none",
+    "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]",
+    "focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
+    "disabled:pointer-events-none disabled:opacity-55",
+    getMotionRecipeClassNames("pressable", "ring")
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-9 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-5 text-base",
+        icon: "h-10 w-10 text-sm"
+      },
+      variant: {
+        primary:
+          "border-transparent bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-[var(--shadow-xs)]",
+        secondary:
+          "border-[var(--color-border-strong)] bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+        ghost:
+          "border-transparent bg-transparent text-[var(--color-foreground)] hover:bg-[var(--color-surface)]",
+        subtle:
+          "border-[var(--color-border)] bg-[var(--color-card)] text-[var(--color-foreground)] shadow-[var(--shadow-xs)]",
+        destructive:
+          "border-transparent bg-[var(--color-destructive)] text-[var(--color-destructive-foreground)] shadow-[var(--shadow-xs)]"
+      },
+      loading: {
+        false: "",
+        true: "cursor-wait"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "primary"
+    }
+  }
+);