Slide To Confirm Button

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
"use client";
 
import {
  forwardRef,
  useRef,
  useState,
  type ComponentPropsWithoutRef,
  type PointerEvent as ReactPointerEvent,
} from "react";
 
import { cn } from "@/lib/cn";
import { ArrowRight, Check } from "lucide-react";
 
const PAD = 4;
const KNOB = 48;
 
export type SlideToConfirmButtonProps = Readonly<
  {
    label?: string;
    confirmedLabel?: string;
    onConfirm?: () => void;
  } & Omit<ComponentPropsWithoutRef<"div">, "onConfirm">
>;
 
// Slide-to-confirm — drag the knob across the track to commit an action.
export const SlideToConfirmButton = forwardRef<
  HTMLDivElement,
  SlideToConfirmButtonProps
>(
  (
    {
      className,
      label = "Slide to confirm",
      confirmedLabel = "Confirmed",
      onConfirm,
      ...props
    },
    ref,
  ) => {
    const trackRef = useRef<HTMLDivElement>(null);
    const draggingRef = useRef(false);
    const [x, setX] = useState(0);
    const [confirmed, setConfirmed] = useState(false);
 
    const maxX = () => {
      const track = trackRef.current;
      if (!track) return 0;
      return track.offsetWidth - KNOB - PAD * 2;
    };
 
    const handleDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
      if (confirmed) return;
      draggingRef.current = true;
      event.currentTarget.setPointerCapture(event.pointerId);
    };
 
    const handleMove = (event: ReactPointerEvent<HTMLButtonElement>) => {
      if (!draggingRef.current || confirmed) return;
      const track = trackRef.current;
      if (!track) return;
      const rect = track.getBoundingClientRect();
      const next = Math.min(
        Math.max(event.clientX - rect.left - PAD - KNOB / 2, 0),
        maxX(),
      );
      setX(next);
    };
 
    const handleUp = () => {
      if (!draggingRef.current) return;
      draggingRef.current = false;
      if (x >= maxX() - 4) {
        setX(maxX());
        setConfirmed(true);
        onConfirm?.();
      } else {
        setX(0);
      }
    };
 
    const progress = maxX() > 0 ? x / maxX() : 0;
 
    return (
      <div
        ref={ref}
        data-slot="slide-to-confirm-button"
        className="font-sans select-none"
        {...props}
      >
        <div
          ref={trackRef}
          className={cn(
            // transform-gpu + isolate promote the track to its own compositor
            // layer so the knob's moving shadow can't leave stale ghost pixels.
            "relative h-14 w-72 transform-gpu isolate overflow-hidden rounded-full p-1 transition-[background-color,box-shadow] duration-300",
            "shadow-[inset_0_1px_2px_rgba(0,0,0,0.08),inset_0_2px_4px_rgba(0,0,0,0.05),inset_0_-2px_3px_rgba(0,0,0,0.06),0_1px_0_rgba(255,255,255,0.9)]",
            confirmed
              ? "bg-emerald-600 shadow-[inset_0_1px_3px_rgba(0,0,0,0.2),inset_0_-2px_3px_rgba(0,0,0,0.12),0_1px_0_rgba(255,255,255,0.9)]"
              : "bg-neutral-100",
            className,
          )}
        >
          <span
            aria-hidden
            className={cn(
              "absolute inset-0 flex items-center justify-center text-sm font-medium transition-colors duration-200",
              confirmed
                ? "text-white [text-shadow:0_1px_1px_rgba(0,0,0,0.25)]"
                : "text-neutral-500 [text-shadow:0_1px_0_rgba(255,255,255,0.8)]",
            )}
            style={{ opacity: confirmed ? 1 : 1 - progress * 1.4 }}
          >
            {confirmed ? confirmedLabel : label}
          </span>
 
          <button
            type="button"
            aria-label={label}
            disabled={confirmed}
            onPointerDown={handleDown}
            onPointerMove={handleMove}
            onPointerUp={handleUp}
            onPointerCancel={handleUp}
            className={cn(
              // will-change keeps the knob on its own compositor layer so the
              // moving box-shadow doesn't leave stale ghost pixels on the track.
              "absolute top-1 left-1 flex size-12 touch-none items-center justify-center rounded-full bg-neutral-50 text-neutral-700 will-change-transform",
              // Keycap material like the quantity stepper, but with a tight,
              // downward-only shadow so the knob sits in the groove instead of
              // floating in a soft halo.
              "shadow-[0_1px_1px_rgba(0,0,0,0.12),0_2px_3px_rgba(0,0,0,0.12),inset_0_1.5px_0_rgba(255,255,255,1),inset_0_-2px_3px_rgba(0,0,0,0.1)]",
              confirmed
                ? "cursor-default"
                : "cursor-grab active:cursor-grabbing active:bg-neutral-100 active:shadow-[0_1px_1px_rgba(0,0,0,0.06),inset_0_1px_1px_rgba(0,0,0,0.06),inset_0_2px_3px_rgba(0,0,0,0.03),inset_0_-2px_3px_rgba(0,0,0,0.05)]",
              draggingRef.current
                ? "transition-[box-shadow,background-color] duration-200 ease-out"
                : "transition-[transform,box-shadow,background-color] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
            )}
            style={{ transform: `translate3d(${x}px, 0, 0)` }}
          >
            {confirmed ? (
              <Check
                size={18}
                strokeWidth={2.5}
                aria-hidden
                className="text-emerald-600 filter-[drop-shadow(0_1px_0_rgba(255,255,255,0.9))_drop-shadow(0_-1px_0.5px_rgba(0,0,0,0.12))]"
              />
            ) : (
              <ArrowRight
                size={18}
                strokeWidth={2.5}
                aria-hidden
                className="filter-[drop-shadow(0_1px_0_rgba(255,255,255,0.9))_drop-shadow(0_-1px_0.5px_rgba(0,0,0,0.12))]"
              />
            )}
          </button>
        </div>
      </div>
    );
  },
);
 
SlideToConfirmButton.displayName = "SlideToConfirmButton";