52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2bc6,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"; import { motion, useMotionTemplate, useReducedMotion, useSpring, } from "motion/react"; const CARRIAGE = { stiffness: 520, damping: 34, mass: 0.45 } as const; const GRAB = { type: "spring", stiffness: 700, damping: 46, mass: 0.5 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8, } as const; const INSTANT = { duration: 0 } as const; const THUMB = 18; const plain = (value: number) => String(value); function tidy(value: number) { return Math.round(value * 1e6) / 1e6; } export type SliderDetent = { value: number; label?: string }; const NONE: readonly (number | SliderDetent)[] = []; export type UseSliderDetentsOptions = { value: number; onValueChange: (value: number) => void; min?: number; max?: number; step?: number; detents?: readonly (number | SliderDetent)[]; pull?: number; thumbSize?: number; disabled?: boolean; haptic?: boolean; format?: (value: number) => string; label?: string; labelledBy?: string; }; export function useSliderDetents({ value, onValueChange, min = 0, max = 100, step = 1, detents = NONE, pull, thumbSize = THUMB, disabled = false, haptic = true, format = plain, label, labelledBy, }: UseSliderDetentsOptions) { const trackRef = useRef(null); const [dragging, setDragging] = useState(false); const list = useMemo( () => detents.map((d) => (typeof d === "number" ? { value: d } : d)), [detents], ); const range = max - min; const grab = pull ?? range * 0.045; const emit = useRef(onValueChange); emit.current = onValueChange; const emitted = useRef(value); emitted.current = value; const activeDetent = useMemo( () => list.findIndex((d) => tidy(d.value) === tidy(value)), [list, value], ); const marked = useRef(activeDetent); const held = useRef(false); const commit = useCallback( (next: number) => { const settled = Math.min(max, Math.max(min, tidy(next))); const index = list.findIndex((d) => tidy(d.value) === settled); if (index !== marked.current) { marked.current = index; if (haptic && index >= 0) navigator.vibrate?.(6); } if (settled !== emitted.current) { emitted.current = settled; emit.current(settled); } }, [haptic, list, max, min], ); const capture = useCallback( (clientX: number) => { const el = trackRef.current; if (!el || range <= 0) return null; const rect = el.getBoundingClientRect(); const travel = rect.width - thumbSize; if (travel <= 0) return null; const ratio = (clientX - rect.left - thumbSize / 2) / travel; const raw = Math.min(max, Math.max(min, min + ratio * range)); let index = -1; let nearest = grab; for (let i = 0; i < list.length; i += 1) { const distance = Math.abs(raw - list[i].value); if (distance <= nearest) { nearest = distance; index = i; } } if (index >= 0) return list[index].value; return min + Math.round((raw - min) / step) * step; }, [grab, list, max, min, range, step, thumbSize], ); const release = useCallback(() => { if (!held.current) return; held.current = false; setDragging(false); }, []); const toDetent = useCallback( (direction: number) => { const sorted = list.map((d) => d.value).toSorted((a, b) => a - b); const forward = sorted.find((d) => d > value + 1e-6); const backward = sorted.findLast((d) => d < value - 1e-6); const target = direction > 0 ? forward : backward; commit(target ?? (direction > 0 ? max : min)); }, [commit, list, max, min, value], ); useEffect(() => { window.addEventListener("blur", release); return () => window.removeEventListener("blur", release); }, [release]); const detentLabel = list[activeDetent]?.label; const valueText = detentLabel ? `${format(value)}, ${detentLabel}` : format(value); const percent = range > 0 ? Math.min(1, Math.max(0, (value - min) / range)) : 0; const trackProps = { role: "slider" as const, tabIndex: 0, "aria-orientation": "horizontal" as const, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": valueText, "aria-disabled": disabled || undefined, "aria-label": labelledBy ? undefined : label, "aria-labelledby": labelledBy, style: { touchAction: "none" as const }, onPointerDown: (e: React.PointerEvent) => { if (disabled) return; if (e.pointerType === "mouse" && e.button !== 0) return; e.currentTarget.setPointerCapture?.(e.pointerId); e.currentTarget.focus({ preventScroll: true }); held.current = true; setDragging(true); const next = capture(e.clientX); if (next !== null) commit(next); }, onPointerMove: (e: React.PointerEvent) => { if (!held.current) return; const next = capture(e.clientX); if (next !== null) commit(next); }, onPointerUp: release, onPointerCancel: release, onLostPointerCapture: release, onKeyDown: (e: React.KeyboardEvent) => { if (disabled) return; const forward = e.key === "ArrowRight" || e.key === "ArrowUp"; const back = e.key === "ArrowLeft" || e.key === "ArrowDown"; if (forward || back) { const direction = forward ? 1 : -1; if (e.shiftKey) toDetent(direction); else commit(value + direction * step); } else if (e.key === "PageUp") { toDetent(1); } else if (e.key === "PageDown") { toDetent(-1); } else if (e.key === "Home") { commit(min); } else if (e.key === "End") { commit(max); } else { return; } e.preventDefault(); }, }; return { trackRef, trackProps, detents: list, activeDetent, percent, dragging, valueText, }; } export type SliderDetentsProps = { value: number; onValueChange: (value: number) => void; min?: number; max?: number; step?: number; detents?: readonly (number | SliderDetent)[]; pull?: number; label?: string; format?: (value: number) => string; disabled?: boolean; haptic?: boolean; className?: string; }; export function SliderDetents({ value, onValueChange, min = 0, max = 100, step = 1, detents = NONE, pull, label = "Value", format = plain, disabled = false, haptic = true, className = "", }: SliderDetentsProps) { const labelId = useId(); const reduced = useReducedMotion(); const { trackRef, trackProps, detents: list, activeDetent, percent, dragging, } = useSliderDetents({ value, onValueChange, min, max, step, detents, pull, disabled, haptic, format, labelledBy: labelId, }); const carriage = useSpring(percent * 100, CARRIAGE); const offset = useMotionTemplate`${carriage}%`; useEffect(() => { const target = percent * 100; if (reduced) carriage.jump(target); else carriage.set(target); }, [carriage, percent, reduced]); const widest = useMemo(() => { const options = [ format(min), format(max), ...list.map((d) => d.label ? `${format(d.value)} · ${d.label}` : format(d.value), ), ]; return options.reduce((a, b) => (b.length > a.length ? b : a), ""); }, [format, list, max, min]); const suffix = list[activeDetent]?.label ?? ""; const lastLabel = useRef(suffix); if (suffix) lastLabel.current = suffix; const span = max - min; return (

{label} {widest} {format(value)} {lastLabel.current ? ` · ${lastLabel.current}` : ""}

{list.map((d) => ( 0 ? `${((d.value - min) / span) * 100}%` : "0%", }} /> ))}

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/slider-detents.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/slider-detents.tsx"}],"className":"h-[70svh] min-h-80"}]]}]