Animated CTA Buttons Hold Action Button

1"use client";
2// beui.dev/components/motion/expanding-arrow-button
3 
4import { motion, useReducedMotion, type HTMLMotionProps } from "motion/react";
5import {
6  forwardRef,
7  useRef,
8  useState,
9  type KeyboardEvent,
10  type PointerEvent,
11  type ReactNode,
12} from "react";
13import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
14import { cn } from "@/lib/utils";
15 
16export interface HoldActionButtonProps extends Omit<
17  HTMLMotionProps<"button">,
18  | "children"
19  | "type"
20  | "onClick"
21  | "onPointerDown"
22  | "onPointerUp"
23  | "onPointerCancel"
24  | "onPointerLeave"
25  | "onKeyDown"
26  | "onKeyUp"
27> {
28  children: ReactNode;
29  type?: "vertical" | "horizontal";
30  holdingLabel?: ReactNode;
31  completeLabel?: ReactNode;
32  holdDuration?: number;
33  onHoldComplete?: () => void;
34  fillClassName?: string;
35  labelClassName?: string;
36}
37 
38export const HoldActionButton = forwardRef<
39  HTMLButtonElement,
40  HoldActionButtonProps
41>(function HoldActionButton(
42  {
43    children,
44    type = "vertical",
45    holdingLabel = "Keep holding",
46    completeLabel = "Done",
47    holdDuration = 1600,
48    onHoldComplete,
49    fillClassName,
50    labelClassName,
51    className,
52    disabled,
53    ...rest
54  },
55  ref,
56) {
57  const reduce = useReducedMotion();
58  const completedRef = useRef(false);
59  const [holding, setHolding] = useState(false);
60  const [completed, setCompleted] = useState(false);
61 
62  const startHold = () => {
63    if (disabled || holding) return;
64    completedRef.current = false;
65    setCompleted(false);
66    setHolding(true);
67  };
68 
69  const cancelHold = () => {
70    setHolding(false);
71    setCompleted(false);
72  };
73 
74  const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {
75    if (event.button !== 0) return;
76    event.currentTarget.setPointerCapture(event.pointerId);
77    startHold();
78  };
79 
80  const handlePointerUp = (event: PointerEvent<HTMLButtonElement>) => {
81    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
82      event.currentTarget.releasePointerCapture(event.pointerId);
83    }
84    cancelHold();
85  };
86 
87  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
88    if ((event.key === " " || event.key === "Enter") && !event.repeat) {
89      event.preventDefault();
90      startHold();
91    }
92  };
93 
94  const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {
95    if (event.key === " " || event.key === "Enter") {
96      event.preventDefault();
97      cancelHold();
98    }
99  };
100 
101  const handleFillComplete = () => {
102// … truncated