Animated Button

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  motion,
7  useReducedMotion,
8  type HTMLMotionProps,
9} from "motion/react";
10 
11import { cn } from "@/lib/utils";
12 
13type Variant = "solid" | "outline" | "ghost";
14 
15const VARIANT_CLASS: Record<Variant, string> = {
16  // A transparent border keeps sizing identical across variants and, under
17  // forced-colors (Windows High Contrast), the UA renders it as `ButtonText`,
18  // giving the solid/ghost variants a visible boundary they'd otherwise lose.
19  solid:
20    "border border-transparent bg-[var(--color-accent,#695cff)] text-white hover:bg-[var(--color-accent,#695cff)]/90",
21  outline:
22    "border border-[var(--color-border,#e4e7ec)] bg-[var(--color-surface,#fff)] text-[var(--color-fg,#111318)] hover:bg-[var(--color-fg,#111318)]/[0.04]",
23  ghost:
24    "border border-transparent bg-transparent text-[var(--color-fg,#111318)] hover:bg-[var(--color-fg,#111318)]/[0.06]",
25};
26 
27export interface AnimatedButtonProps
28  extends Omit<HTMLMotionProps<"button">, "ref"> {
29  variant?: Variant;
30  /** Show an accessible spinner and disable interaction. */
31  loading?: boolean;
32  /** Briefly show a success check in place of the label. */
33  success?: boolean;
34}
35 
36/**
37 * AnimatedButton — a real `<button>` with press feedback and loading/success
38 * states.
39 *
40 * Accessibility: forwards its ref and spreads native button props, so type,
41 * form, and disabled semantics are intact. `loading` sets `aria-busy` and
42 * exposes a polite "Loading" status; the spinner + check SVGs are decorative
43 * (`aria-hidden`). Focus-visible shows a 2px outline (survives forced-colors);
44 * every variant keeps a boundary in high-contrast. Under `prefers-reduced-motion`
45 * the press-scale is disabled. Clean-room original.
46 */
47export const AnimatedButton = React.forwardRef<
48  HTMLButtonElement,
49  AnimatedButtonProps
50>(
51  (
52    {
53      variant = "solid",
54      loading = false,
55      success = false,
56      disabled,
57      className,
58      children,
59      ...props
60    },
61    ref,
62  ) => {
63    const reduce = useReducedMotion();
64    const isDisabled = disabled || loading;
65 
66    return (
67      <motion.button
68        ref={ref}
69        type="button"
70        disabled={isDisabled}
71        aria-busy={loading || undefined}
72        whileTap={reduce || isDisabled ? undefined : { scale: 0.96 }}
73        transition={{ type: "spring", stiffness: 600, damping: 30 }}
74        className={cn(
75// … truncated