Interfaces with a little ghost in them.

Interfaces with a little ghost in them.

Interfaces with a little ghost in them.

"use client";

import { useEffect, useId, useRef, useState, type ComponentProps, type ReactNode } from "react";
import {
  AnimatePresence,
  animate,
  motion,
  useMotionValue,
  useReducedMotion,
  useTransform,
  type AnimationPlaybackControls,
} from "motion/react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";
import { duration as durations, ease, spring } from "@/lib/motion";

export interface HoldToConfirmButtonProps
  extends Omit<ComponentProps<"button">, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd"> {
  /** Called once the hold completes. */
  onConfirm?: () => void;
  /** Milliseconds the button must be held. @default 1500 */
  duration?: number;
  /** Label shown after confirming. @default "Confirmed" */
  confirmedLabel?: ReactNode;
  /** Milliseconds before resetting after a confirm. 0 keeps it confirmed. @default 2000 */
  resetAfter?: number;