Hold Confirm Button

1"use client";
2 
3import { animate, motion, useMotionValue } from "framer-motion";
4import * as React from "react";
5 
6export type HoldConfirmButtonVariant = "destructive" | "default";
7export type HoldConfirmButtonSize = "sm" | "md" | "lg";
8export type HoldConfirmButtonStatus = "idle" | "holding" | "confirmed";
9 
10export type HoldConfirmButtonProps = Omit<
11  React.ButtonHTMLAttributes<HTMLButtonElement>,
12  "onClick"
13> & {
14  /** Fires once the hold completes. */
15  onConfirm?: () => void;
16  variant?: HoldConfirmButtonVariant;
17  size?: HoldConfirmButtonSize;
18  /** ms the user must hold to confirm. Default `900`. */
19  duration?: number;
20  /** Label shown while holding. Default `"Hold to confirm"`. */
21  holdingLabel?: React.ReactNode;
22  /** Label shown after confirming. Default `"Confirmed"`. */
23  confirmedLabel?: React.ReactNode;
24};
25 
26const BUTTON_BASE =
27  "relative inline-flex cursor-pointer select-none items-center justify-center gap-2 overflow-hidden rounded-[var(--button-radius)] font-medium [outline-offset:4px] [-webkit-tap-highlight-color:transparent] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background [transition:scale_120ms_ease] active:scale-[0.99] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
28 
29const variantClass: Record<HoldConfirmButtonVariant, string> = {
30  destructive: "bg-destructive text-white shadow-sm",
31  default: "bg-primary text-primary-foreground shadow-sm",
32};
33 
34// The fill that sweeps in from the left as the hold progresses.
35const fillClass: Record<HoldConfirmButtonVariant, string> = {
36  destructive: "bg-black/25",
37  default: "bg-black/20",
38};
39 
40const sizeClass: Record<HoldConfirmButtonSize, string> = {
41  sm: "[--button-radius:var(--button-radius-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-[length:var(--button-text-sm)] leading-[var(--button-leading-sm)]",
42  md: "[--button-radius:var(--button-radius-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-[length:var(--button-text-md)] leading-[var(--button-leading-md)]",
43  lg: "[--button-radius:var(--button-radius-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-[length:var(--button-text-lg)] leading-[var(--button-leading-lg)]",
44};
45 
46const HoldConfirmButton = React.forwardRef<
47  HTMLButtonElement,
48  HoldConfirmButtonProps
49>(
50  (
51    {
52      onConfirm,
53      variant = "destructive",
54      size = "md",
55      duration = 900,
56      holdingLabel = "Confirming…",
57// … truncated