Slide to Unlock

1"use client";
2 
3import {
4  animate,
5  motion,
6  type MotionValue,
7  useMotionValue,
8  useTransform,
9} from "motion/react";
10import {
11  type ComponentPropsWithoutRef,
12  createContext,
13  useCallback,
14  useContext,
15  useRef,
16  useState,
17} from "react";
18 
19import { cn } from "@/lib/utils";
20 
21type SlideToUnlockContextValue = {
22  x: MotionValue<number>;
23  trackRef: React.RefObject<HTMLDivElement | null>;
24  isDragging: boolean;
25  handleWidth: number;
26  textOpacity: MotionValue<number>;
27  onDragStart: () => void;
28  onDragEnd: () => void;
29};
30 
31const SlideToUnlockContext = createContext<SlideToUnlockContextValue | null>(
32  null
33);
34 
35function useSlideToUnlock() {
36  const context = useContext(SlideToUnlockContext);
37  if (!context) {
38    throw new Error(
39      `SlideToUnlock components must be used within SlideToUnlock`
40    );
41  }
42  return context;
43}
44 
45export type SlideToUnlockRootProps = React.ComponentProps<"div"> & {
46  handleWidth?: number;
47  onUnlock?: () => void;
48};
49 
50export function SlideToUnlock({
51  className,
52  handleWidth = 56,
53  children,
54  onUnlock,
55  ...props
56}: SlideToUnlockRootProps) {
57  const trackRef = useRef<HTMLDivElement>(null);
58  const [isDragging, setIsDragging] = useState(false);
59  const x = useMotionValue(0);
60 
61  const fadeDistance = handleWidth;
62  const textOpacity = useTransform(x, [0, fadeDistance], [1, 0]);
63 
64  const handleDragStart = useCallback(() => {
65    setIsDragging(true);
66  }, []);
67 
68  const handleDragEnd = useCallback(() => {
69    setIsDragging(false);
70 
71    const trackWidth = trackRef.current?.offsetWidth || 0;
72    const maxX = trackWidth - handleWidth;
73 
74    if (x.get() >= maxX) {
75      onUnlock?.();
76    } else {
77      animate(x, 0, { type: "spring", bounce: 0, duration: 0.25 });
78    }
79  }, [x, onUnlock, handleWidth]);
80 
81  return (
82    <SlideToUnlockContext.Provider
83      value={{
84        x,
85        trackRef,
86        isDragging,
87        handleWidth,
88        textOpacity,
89        onDragStart: handleDragStart,
90        onDragEnd: handleDragEnd,
91      }}
92    >
93      <div
94        data-slot="slide-to-unlock"
95        className={cn(
96          "w-[216px] rounded-xl bg-zinc-100 p-1 shadow-inner ring ring-black/5 ring-inset dark:bg-zinc-900 dark:ring-white/10",
97          className
98        )}
99        {...props}
100      >
101        {children}
102      </div>
103    </SlideToUnlockContext.Provider>
104  );
105}
106 
107export type SlideToUnlockTrackProps = React.ComponentProps<"div">;
108 
109export function SlideToUnlockTrack({
110  className,
111  children,
112  ...props
113// … truncated