Button Button

1"use client";
2// beui.dev/components/motion/button
3 
4import {
5  AnimatePresence,
6  type HTMLMotionProps,
7  motion,
8  useReducedMotion,
9} from "motion/react";
10import {
11  forwardRef,
12  type PointerEvent,
13  type ReactNode,
14  useCallback,
15  useRef,
16  useState,
17} from "react";
18import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
19import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
20import { cn } from "@/lib/utils";
21 
22export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline";
23export type ButtonSize = "sm" | "md" | "lg" | "icon";
24 
25export interface ButtonProps extends Omit<
26  HTMLMotionProps<"button">,
27  "children"
28> {
29  variant?: ButtonVariant;
30  size?: ButtonSize;
31  pressScale?: number;
32  /** Spawn a Material-style ripple from the press point. Off by default. */
33  ripple?: boolean;
34  children?: ReactNode;
35}
36 
37export interface ButtonLinkProps extends Omit<
38  HTMLMotionProps<"a">,
39  "children"
40> {
41  variant?: ButtonVariant;
42  size?: ButtonSize;
43  pressScale?: number;
44  children?: ReactNode;
45}
46 
47type Ripple = { id: number; x: number; y: number; size: number };
48 
49const VARIANT_CLASS: Record<ButtonVariant, string> = {
50  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
51  secondary: "border border-border bg-card text-foreground hover:border-border",
52  ghost: "text-muted-foreground hover:text-foreground hover:bg-primary/5",
53  outline:
54    "border border-border bg-transparent text-foreground hover:bg-primary/5",
55};
56 
57const SIZE_CLASS: Record<ButtonSize, string> = {
58  sm: "h-8 px-3 text-xs gap-1.5 rounded-full",
59  md: "h-10 px-5 text-sm gap-2 rounded-full",
60  lg: "h-12 px-6 text-base gap-2 rounded-full",
61  icon: "h-8 w-8 rounded-lg",
62};
63 
64export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
65  function Button(
66    {
67      variant = "primary",
68      size = "md",
69      pressScale = 0.93,
70      ripple = false,
71      className,
72      children,
73      onPointerDown,
74      ...rest
75    },
76    ref,
77  ) {
78    const reduce = useReducedMotion();
79    const canHover = useHoverCapable();
80    const [ripples, setRipples] = useState<Ripple[]>([]);
81    const nextId = useRef(0);
82 
83    const handlePointerDown = useCallback(
84      (event: PointerEvent<HTMLButtonElement>) => {
85        if (ripple && !reduce) {
86          const rect = event.currentTarget.getBoundingClientRect();
87          const size = Math.max(rect.width, rect.height) * 2;
88          const id = nextId.current++;
89          setRipples((prev) => [
90            ...prev,
91            {
92// … truncated