5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61:T1188,"use client" import * as React from "react" import { animate, useMotionValue } from "motion/react" import { useReducedMotion } from "@/registry/spotcheck/hooks/use-reduced-motion" const SPRING = { stiffness: 240, damping: 26 } const MAX_VELOCITY = 12 const PROJECTION = 0.1 const RUBBER_BAND = 0.3 const TAP_DISTANCE = 5 /** Past either end the drag gives way, so the edge feels soft rather than a hard stop. */ export function rubberBand(position: number, count: number) { const last = count - 1 if (position < 0) return position * RUBBER_BAND if (position > last) return last + (position - last) * RUBBER_BAND return position } /** Caps the throw, carries it forward, and rounds to the nearest item that exists. */ export function flickTarget(position: number, velocity: number, count: number) { const capped = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocity)) return Math.max(0, Math.min(count - 1, Math.round(position + capped * PROJECTION))) } type FlickOptions = { /** How many items there are. */ count: number /** The selected index. The position follows it when it changes from outside. */ index: number /** Runs when a move lands on a different item. */ onIndexChange: (index: number) => void /** Which way drags count. */ axis: "x" | "y" /** Pixels of drag that move one item. A function can measure the element when it's called. */ step: number | (() => number) /** Runs for a press that didn't move, with the event and the position when it began. */ onTap?: (event: React.PointerEvent, position: number) => void } type Gesture = { start: number; from: number; last: number; time: number; velocity: number; moved: number } /** Drag, throw and spring-to-nearest for lists that land on an item. Position is in items. */ export function useFlick({ count, index, onIndexChange, axis, step, onTap }: FlickOptions) { const reduced = useReducedMotion() const position = useMotionValue(index) const gesture = React.useRef(null) const motion = React.useRef | null>(null) const goal = React.useRef(index) const moveTo = React.useCallback( (target: number, velocity = 0) => { goal.current = target motion.current?.stop() if (reduced) position.jump(target) else motion.current = animate(position, target, { type: "spring", ...SPRING, velocity }) }, [position, reduced], ) const settle = React.useCallback( (target: number, velocity = 0) => { const next = Math.max(0, Math.min(count - 1, target)) moveTo(next, velocity) if (next !== index) onIndexChange(next) }, [count, index, moveTo, onIndexChange], ) // Follows a selection that changes from outside the gesture. React.useEffect(() => { if (!gesture.current && goal.current !== index) moveTo(index) }, [index, moveTo]) const stepSize = () => (typeof step === "function" ? step() : step) const along = (event: React.PointerEvent) => (axis === "x" ? event.clientX : event.clientY) const bind = { onPointerDown: (event: React.PointerEvent) => { if (event.button !== 0) return event.currentTarget.setPointerCapture(event.pointerId) motion.current?.stop() const at = along(event) gesture.current = { start: at, from: position.get(), last: at, time: performance.now(), velocity: 0, moved: 0 } }, onPointerMove: (event: React.PointerEvent) => { const state = gesture.current if (!state) return const at = along(event) const now = performance.now() const size = stepSize() state.moved = Math.max(state.moved, Math.abs(at - state.start)) state.velocity = (((state.last - at) / size) / (Math.max(1, now - state.time) / 1000)) * 0.6 + state.velocity * 0.4 state.last = at state.time = now position.jump(rubberBand(state.from + (state.start - at) / size, count)) }, onPointerUp: (event: React.PointerEvent) => { const state = gesture.current if (!state) return gesture.current = null if (state.moved < TAP_DISTANCE) { moveTo(index) onTap?.(event, state.from) return } settle(flickTarget(position.get(), state.velocity, count), state.velocity) }, onPointerCancel: () => { if (!gesture.current) return gesture.current = null moveTo(index) }, } return { position, settle, bind } } 5e:["$","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@spotcheck","registryDependencies":["https://spotcheckui.com/r/use-reduced-motion.json"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"registry/spotcheck/hooks/use-flick.ts","content":"$61","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]