51: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"] 52: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"] 53:T3379,/** * Spectrum UI — QuantityStepper * * An animated quantity input for carts and forms. A rounded pill holds a * minus button, a rolling value and a plus button. Changing the value rolls * the digits vertically in the direction of travel, pressing a button gives * it a quick squish, and pushing past min or max shakes the value with a * brief rose tint. Holding a button repeats the step with acceleration. * Works controlled or uncontrolled, honors prefers-reduced-motion, and is a * full keyboard-operable ARIA spinbutton. * * Dependencies: framer-motion, lucide-react, @/lib/utils * * @example * update(qty)} /> */ "use client" import React, { useCallback, useEffect, useRef, useState } from "react" import { AnimatePresence, motion, useAnimationControls, useReducedMotion, } from "framer-motion" import { Minus, Plus } from "lucide-react" import { cn } from "@/lib/utils" // ─── Types ─────────────────────────────────────────────────────────────────── export interface QuantityStepperProps { /** Controlled value. Leave undefined for uncontrolled usage */ value?: number /** Initial value when uncontrolled. Default 1 */ defaultValue?: number /** Fires with the next clamped value on every change */ onValueChange?: (value: number) => void /** Lowest allowed value. Default 0 */ min?: number /** Highest allowed value. Default 99 */ max?: number /** Amount added or removed per press. Default 1 */ step?: number /** Visual size of the stepper. Default "md" */ size?: "sm" | "md" | "lg" /** Disables pointer and keyboard interaction */ disabled?: boolean className?: string } // ─── Constants ─────────────────────────────────────────────────────────────── const HOLD_DELAY = 400 const HOLD_INTERVAL = 80 const HOLD_FAST_INTERVAL = 40 const HOLD_FAST_AFTER = 10 const FLASH_DURATION = 400 /** Snappy spring for the press squish on the +/- buttons */ const SPRING_SNAPPY = { type: "spring", stiffness: 500, damping: 30 } as const /** Spring for a single-press digit roll */ const ROLL_SPRING = { type: "spring", stiffness: 400, damping: 30 } as const /** Short tween for the digit roll while hold-to-repeat is firing, so * rolls never queue up behind the repeat rate */ const ROLL_REPEAT_TRANSITION = { duration: 0.1, ease: "easeOut" } as const /** Boundary shake: tight and small (max 4px, 300ms) */ const SHAKE_KEYFRAMES = [0, -4, 4, -2, 2, 0] const SHAKE_DURATION = 0.3 const SIZES = { sm: { container: "h-8 gap-0.5 px-1", button: "h-6 w-6", icon: 13, value: "h-6 min-w-7 text-xs", }, md: { container: "h-10 gap-1 px-1", button: "h-8 w-8", icon: 15, value: "h-8 min-w-8 text-sm", }, lg: { container: "h-12 gap-1 px-1.5", button: "h-10 w-10", icon: 17, value: "h-10 min-w-10 text-base", }, } as const // Incrementing (direction 1): the new value slides up in from below. // Decrementing (direction -1): it drops in from above. const valueVariants = { enter: (direction: number) => ({ y: direction * 12, opacity: 0 }), center: { y: 0, opacity: 1 }, exit: (direction: number) => ({ y: direction * -12, opacity: 0 }), } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)) } // ─── Component ─────────────────────────────────────────────────────────────── export function QuantityStepper({ value: valueProp, defaultValue = 1, onValueChange, min = 0, max = 99, step = 1, size = "md", disabled = false, className, }: QuantityStepperProps) { const shouldReduceMotion = useReducedMotion() const [internalValue, setInternalValue] = useState(() => clamp(defaultValue, min, max), ) // 1 while incrementing, -1 while decrementing; drives the roll variants const [direction, setDirection] = useState(1) // Incremented on every blocked press; retriggers the shake and times the tint const [flash, setFlash] = useState(0) // True while hold-to-repeat is firing; switches the roll to a short tween const [repeating, setRepeating] = useState(false) // Pointer-only announcements; keyboard changes are announced by the // spinbutton's aria-valuenow, so a live region there would double-announce const [announcement, setAnnouncement] = useState("") const shakeControls = useAnimationControls() const current = clamp(valueProp ?? internalValue, min, max) const atMin = current <= min const atMax = current >= max const { container, button, icon, value: valueClasses } = SIZES[size] // Latest value for hold-to-repeat callbacks that outlive a render const valueRef = useRef(current) useEffect(() => { valueRef.current = current }, [current]) const delayRef = useRef | null>(null) const repeatRef = useRef | null>(null) const repeatCountRef = useRef(0) const stopRepeat = useCallback(() => { if (delayRef.current !== null) { clearTimeout(delayRef.current) delayRef.current = null } if (repeatRef.current !== null) { clearInterval(repeatRef.current) repeatRef.current = null } repeatCountRef.current = 0 setRepeating(false) }, []) useEffect(() => stopRepeat, [stopRepeat]) // Every blocked press restarts the shake from rest — the roll is forced // instant while flash > 0 (see the roll transition), so they never overlap useEffect(() => { if (flash === 0) return if (!shouldReduceMotion) { shakeControls.set({ x: 0 }) void shakeControls.start({ x: SHAKE_KEYFRAMES, transition: { duration: SHAKE_DURATION, ease: "easeInOut" }, }) } const id = setTimeout(() => setFlash(0), FLASH_DURATION) return () => clearTimeout(id) }, [flash, shouldReduceMotion, shakeControls]) /** Applies a delta; returns false (and flashes) when blocked at a boundary */ const stepBy = useCallback( (delta: number) => { const next = clamp(valueRef.current + delta, min, max) if (next === valueRef.current) { setFlash((count) => count + 1) setAnnouncement( delta < 0 ? `Minimum quantity is ${min}` : `Maximum quantity is ${max}`, ) return false } valueRef.current = next setDirection(delta > 0 ? 1 : -1) if (valueProp === undefined) setInternalValue(next) onValueChange?.(next) setAnnouncement(`Quantity ${next}`) return true }, [min, max, valueProp, onValueChange], ) const startHold = useCallback( (delta: number) => (event: React.PointerEvent) => { if (disabled) return if (event.pointerType === "mouse" && event.button !== 0) return stopRepeat() // Stop immediately when the first press is already blocked at a boundary if (!stepBy(delta)) return delayRef.current = setTimeout(() => { setRepeating(true) const tick = () => { // Repeat also stops at boundaries, not only on pointer up/leave if (!stepBy(delta)) { stopRepeat() return } repeatCountRef.current += 1 if (repeatCountRef.current === HOLD_FAST_AFTER) { if (repeatRef.current !== null) clearInterval(repeatRef.current) repeatRef.current = setInterval(tick, HOLD_FAST_INTERVAL) } } repeatRef.current = setInterval(tick, HOLD_INTERVAL) }, HOLD_DELAY) }, [disabled, stepBy, stopRepeat], ) const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (disabled) return let next: number switch (event.key) { case "ArrowUp": next = current + step break case "ArrowDown": next = current - step break case "PageUp": next = current + step * 10 break case "PageDown": next = current - step * 10 break case "Home": next = min break case "End": next = max break default: return } event.preventDefault() const clamped = clamp(next, min, max) if (clamped === current) { // Only shake when pushing past a boundary, not when already at Home/End if (event.key !== "Home" && event.key !== "End") { setFlash((count) => count + 1) // aria-valuenow does not change here, so the live region fills in setAnnouncement( next < current ? `Minimum quantity is ${min}` : `Maximum quantity is ${max}`, ) } return } valueRef.current = clamped setDirection(clamped > current ? 1 : -1) if (valueProp === undefined) setInternalValue(clamped) onValueChange?.(clamped) }, [disabled, current, step, min, max, valueProp, onValueChange], ) const buttonClasses = cn( "flex shrink-0 touch-manipulation items-center justify-center rounded-full text-neutral-600 transition-colors", "hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800", "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-neutral-950 dark:focus-visible:ring-neutral-300", button, ) // The squish rides the press state (whileTap), so it holds steady during // hold-to-repeat instead of re-triggering on every repeated step const pressSquish = shouldReduceMotion || disabled ? undefined : { scale: 0.85 } const rollTransition = shouldReduceMotion ? { duration: 0 } : flash > 0 ? // Never roll while the boundary shake is running { duration: 0 } : repeating ? ROLL_REPEAT_TRANSITION : ROLL_SPRING return (

0 ? "text-rose-500 dark:text-rose-400" : "text-neutral-900 dark:text-neutral-100", valueClasses, )} > {current} {/* Speaks pointer-driven changes and boundary blocks; successful keyboard changes are already announced through the spinbutton's aria-valuenow */} {announcement}

) } 50:["$","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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@spectrumui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"app/registry/quantity-stepper/quantity-stepper.tsx","content":"$53","type":"registry:component","target":"components/spectrumui/quantity-stepper.tsx"}],"className":"h-[70svh] min-h-80"}]]}]