4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T21c0,"use client"; import { useCallback, useId, useMemo, useRef, useState } from "react"; import { Reorder, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const INSTANT = { duration: 0 } as const; export type ReorderListCopy = { instructions: string; grabbed: (label: string, position: number, total: number) => string; dropped: (label: string, position: number) => string; moved: (label: string, position: number, total: number) => string; cancelled: string; }; const DEFAULT_COPY: ReorderListCopy = { instructions: "Drag to reorder. With the keyboard, Space grabs the row, the arrow keys move it, Space drops it, and Escape puts everything back.", grabbed: (label, position, total) => `${label} grabbed, position ${position} of ${total}.`, dropped: (label, position) => `${label} dropped at position ${position}.`, moved: (label, position, total) => `${label}, position ${position} of ${total}.`, cancelled: "Reorder cancelled, original order restored.", }; const moveItem = (list: readonly T[], from: number, to: number): T[] => { const next = [...list]; const [taken] = next.splice(from, 1); next.splice(to, 0, taken); return next; }; export type UseReorderListOptions = { items: readonly T[]; getId: (item: T) => string; getLabel: (item: T) => string; onReorder: (next: T[]) => void; onCommit?: (next: T[]) => void; disabled?: boolean; copy?: Partial; }; export function useReorderList({ items, getId, getLabel, onReorder, onCommit, disabled = false, copy: copyOverrides, }: UseReorderListOptions) { const copy = useMemo(() => ({ ...DEFAULT_COPY, ...copyOverrides }), [copyOverrides]); const [grabbed, setGrabbed] = useState(null); const [dragging, setDragging] = useState(null); const [spoken, setSpoken] = useState(""); const emit = useRef(onReorder); emit.current = onReorder; const settle = useRef(onCommit); settle.current = onCommit; const live = useRef(items); live.current = items; const snapshot = useRef(null); const indexOf = useCallback( (id: string) => live.current.findIndex((item) => getId(item) === id), [getId], ); const grab = useCallback( (id: string) => { snapshot.current = live.current; setGrabbed(id); const at = indexOf(id); const item = live.current[at]; setSpoken(copy.grabbed(getLabel(item), at + 1, live.current.length)); }, [copy, getLabel, indexOf], ); const drop = useCallback( (id: string) => { snapshot.current = null; setGrabbed(null); const at = indexOf(id); const item = live.current[at]; setSpoken(copy.dropped(getLabel(item), at + 1)); settle.current?.([...live.current]); }, [copy, getLabel, indexOf], ); const cancel = useCallback(() => { if (snapshot.current) emit.current([...snapshot.current]); snapshot.current = null; setGrabbed(null); setSpoken(copy.cancelled); }, [copy]); const step = useCallback( (id: string, delta: -1 | 1) => { const from = indexOf(id); const to = from + delta; if (from < 0 || to < 0 || to >= live.current.length) return; const next = moveItem(live.current, from, to); emit.current(next); const item = next[to]; setSpoken(copy.moved(getLabel(item), to + 1, next.length)); if (snapshot.current === null) settle.current?.(next); }, [copy, getLabel, indexOf], ); const rowKeyDown = useCallback( (id: string) => (event: React.KeyboardEvent) => { if (disabled || event.target !== event.currentTarget) return; const held = grabbed === id; if (event.key === " " || event.key === "Enter") { event.preventDefault(); if (held) drop(id); else grab(id); return; } if ((event.key === "ArrowUp" || event.key === "ArrowDown") && held) { event.preventDefault(); step(id, event.key === "ArrowUp" ? -1 : 1); return; } if (event.key === "Escape" && held) { event.preventDefault(); cancel(); } }, [disabled, grabbed, grab, drop, step, cancel], ); const onDragStart = useCallback( (id: string) => { snapshot.current = live.current; setDragging(id); }, [], ); const onDragEnd = useCallback( (id: string) => { snapshot.current = null; setDragging(null); const at = indexOf(id); const item = live.current[at]; setSpoken(copy.dropped(getLabel(item), at + 1)); settle.current?.([...live.current]); }, [copy, getLabel, indexOf], ); return { grabbed, dragging, spoken, grab, drop, cancel, step, rowKeyDown, onDragStart, onDragEnd, }; } export type ReorderListProps = UseReorderListOptions & { children: (item: T) => React.ReactNode; label: string; className?: string; }; const GRIP = ( ); export function ReorderList({ children, label, className = "", ...options }: ReorderListProps) { const { items, getId, getLabel, onReorder, disabled = false } = options; const copy = { ...DEFAULT_COPY, ...options.copy }; const list = useReorderList(options); const reduced = useReducedMotion() === true; const hintId = useId(); return (

{items.map((item) => { const id = getId(item); const held = list.grabbed === id; const lifted = held || list.dragging === id; return ( list.onDragStart(id)} onDragEnd={() => list.onDragEnd(id)} onBlur={() => held && list.cancel()} transition={reduced ? INSTANT : CELL} whileDrag={reduced ? undefined : { scale: 1.02 }} style={{ touchAction: "pan-x" }} className={`relative flex min-h-11 items-center gap-2.5 rounded-[9px] border bg-white px-3 py-2.5 outline-none transition-[border-color,box-shadow,background-color] duration-150 focus-visible:outline-none dark:bg-[#1D1D1A] ${ lifted ? "z-10 cursor-grabbing border-stone-200 shadow-[0_1px_2px_rgba(28,25,23,0.08),0_14px_28px_-16px_rgba(28,25,23,0.5)] dark:border-white/[0.16] dark:shadow-[0_2px_14px_rgba(0,0,0,0.55)]" : "cursor-grab border-stone-200 shadow-[0_1px_2px_rgba(28,25,23,0.06)] dark:border-white/[0.16] dark:shadow-[0_1px_6px_rgba(0,0,0,0.45)]" } ${ held ? "border-[#4568FF] bg-[#4568FF]/[0.04] dark:border-[#93B0FF] dark:bg-[#93B0FF]/[0.08]" : "focus-visible:bg-[#4568FF]/[0.06] focus-visible:shadow-[inset_0_0_0_1px_#4568FF] dark:focus-visible:bg-[#93B0FF]/[0.1] dark:focus-visible:shadow-[inset_0_0_0_1px_#93B0FF]" }`} > {GRIP} {getLabel(item)}

{children(item)}

); })} {copy.instructions} {list.spoken}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/reorder-list.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/reorder-list","itemId":"@motion-lexicon/reorder-list"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/reorder-list.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/reorder-list.tsx"}]}]]}],"$L53"]}]

Reorder List

Installation

Files

components

Styles