Hold button

1"use client";2 3import { useEffect, useRef, useState } from "react";4import { Check } from "lucide-react";5 6export type HoldButtonProps = {7  label?: string;8  holdLabel?: string;9  doneLabel?: string;10  duration?: number;11  onComplete?: () => void;12  disabled?: boolean;13  className?: string;14};15 16type HoldState = "idle" | "holding" | "done";17 18/**19 * A press-and-hold confirmation. The fill rises with real elapsed time and20 * cancels when the pointer or key is released before the threshold.21 */22export function HoldButton({23  label = "Hold to confirm",24  holdLabel = "Keep holding…",25  doneLabel = "Confirmed",26  duration = 1000,27  onComplete,28  disabled = false,