Swipeable List

1"use client";
2// beui.dev/components/blocks/swipeable-list
3 
4import {
5  animate,
6  motion,
7  useMotionValue,
8  useReducedMotion,
9  type PanInfo,
10} from "motion/react";
11import {
12  useCallback,
13  useEffect,
14  useRef,
15  useState,
16  type ReactNode,
17} from "react";
18import { cn } from "@/lib/utils";
19 
20export type SwipeSide = "left" | "right";
21 
22export type SwipeableListValue = {
23  id: string;
24  side: SwipeSide;
25};
26 
27export type SwipeActionTone =
28  | "neutral"
29  | "primary"
30  | "success"
31  | "warning"
32  | "danger";
33 
34export type SwipeAction = {
35  id: string;
36  label: ReactNode;
37  icon: ReactNode;
38  tone?: SwipeActionTone;
39  disabled?: boolean;
40  onClick?: (item: SwipeableListItem) => void;
41};
42 
43export type SwipeableListItem = {
44  id: string;
45  title?: ReactNode;
46  description?: ReactNode;
47  meta?: ReactNode;
48  leading?: ReactNode;
49  content?: ReactNode;
50  leftActions?: SwipeAction[];
51  rightActions?: SwipeAction[];
52  disabled?: boolean;
53};
54 
55export type SwipeableListClassNames = {
56  root?: string;
57  item?: string;
58  rail?: string;
59  action?: string;
60  surface?: string;
61  leading?: string;
62  content?: string;
63  title?: string;
64  description?: string;
65  meta?: string;
66};
67 
68export interface SwipeableListProps {
69  items: SwipeableListItem[];
70  value?: SwipeableListValue | null;
71  defaultValue?: SwipeableListValue | null;
72  onValueChange?: (value: SwipeableListValue | null) => void;
73  onAction?: (payload: {
74    item: SwipeableListItem;
75    action: SwipeAction;
76    side: SwipeSide;
77  }) => void;
78  actionWidth?: number;
79  revealThreshold?: number;
80  closeOnAction?: boolean;
81  className?: string;
82  classNames?: SwipeableListClassNames;
83  renderItem?: (item: SwipeableListItem) => ReactNode;
84}
85 
86// Distance-based release spring keeps short rebounds and full reveals feeling
87// equally direct, closer to native mobile list interactions.
88const ROW_SETTLE = {
89  type: "spring",
90  stiffness: 560,
91  damping: 48,
92  mass: 0.82,
93  restDelta: 0.5,
94  restSpeed: 8,
95} as const;
96const OPEN_DISTANCE_RATIO = 0.46;
97const CLOSE_DISTANCE_RATIO = 0.72;
98const OPEN_VELOCITY = 720;
99const CLOSE_VELOCITY = 320;
100const FLING_DISTANCE = 14;
101const RELEASE_VELOCITY_LIMIT = 1500;
102 
103const ACTION_TONE_CLASS: Record<SwipeActionTone, string> = {
104  neutral: "text-muted-foreground group-hover:text-foreground",
105  primary: "text-foreground",
106  success: "text-emerald-600 dark:text-emerald-400",
107  warning: "text-amber-600 dark:text-amber-400",
108  danger: "text-destructive",
109};
110 
111function useControllableSwipeValue({
112  value,
113// … truncated