Slide commit

1"use client";2 3import {4  useRef,5  useState,6  type CSSProperties,7  type KeyboardEvent as ReactKeyboardEvent,8  type PointerEvent as ReactPointerEvent,9} from "react";10import { Check, ChevronRight, LoaderCircle } from "lucide-react";11 12export type SlideCommitProps = {13  label?: string;14  successLabel?: string;15  pendingLabel?: string;16  onCommit?: () => Promise<void> | void;17  disabled?: boolean;18  className?: string;19};20 21type CommitState = "idle" | "pending" | "done";22 23/**24 * A slide-to-confirm control. Pointer drags and a slider-like keyboard path25 * share the same threshold, with pending and completed states.26 */27export function SlideCommit({28  label = "Slide to confirm",