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:T1363,"use client"; import { Minus, Plus } from "lucide-react"; import { useEffect, useRef, useState, type KeyboardEvent } from "react"; import { useHoldStep } from "./lib/hold-step"; import { cn } from "./lib/cn"; import { RollingValue } from "./rolling-value"; import "./adaptive-stepper.css"; function clean(value: number) { return Number(value.toFixed(10)); } export function AdaptiveStepper({ label = "Quantity", value, defaultValue = 0, min = 0, max = 10, step = 1, disabled, name, onValueChange, className, }: { label?: string; value?: number; defaultValue?: number; min?: number; max?: number; step?: number; disabled?: boolean; name?: string; onValueChange?: (value: number) => void; className?: string; }) { const lower = Math.min(min, max); const upper = Math.max(min, max); const stride = step > 0 ? step : 1; const initial = Math.min(upper, Math.max(lower, defaultValue)); const [local, setLocal] = useState(initial); const current = Math.min(upper, Math.max(lower, value ?? local)); const [direction, setDirection] = useState<"up" | "down" | "none">("none"); const decrementRef = useRef(null); const incrementRef = useRef(null); const atMin = current <= lower; const atMax = current >= upper; const edge = atMin && atMax ? "both" : atMin ? "min" : atMax ? "max" : "none"; function commit(next: number, way: "up" | "down") { const clamped = clean(Math.min(upper, Math.max(lower, next))); if (clamped === current) return; setDirection(way); if (value == null) setLocal(clamped); onValueChange?.(clamped); } function decrement() { if (disabled || atMin) return; commit(clean(current - stride), "down"); } function increment() { if (disabled || atMax) return; commit(clean(current + stride), "up"); } const decreaseHold = useHoldStep(decrement); const increaseHold = useHoldStep(increment); useEffect(() => { if (atMin && document.activeElement === decrementRef.current) incrementRef.current?.focus(); if (atMax && document.activeElement === incrementRef.current) decrementRef.current?.focus(); }, [atMax, atMin]); function onKeyDown(event: KeyboardEvent) { if (event.key === "ArrowUp" || event.key === "ArrowRight") { event.preventDefault(); increment(); } else if (event.key === "ArrowDown" || event.key === "ArrowLeft") { event.preventDefault(); decrement(); } else if (event.key === "Home") { event.preventDefault(); commit(lower, "down"); } else if (event.key === "End") { event.preventDefault(); commit(upper, "up"); } } return (

{name ? : null}

); } 55:T71c,"use client"; import { useEffect, useRef, type KeyboardEvent, type PointerEvent } from "react"; /** Press once, then repeat after a pause and speed up while the pointer is held. */ export function useHoldStep(step: () => void) { const stepRef = useRef(step); useEffect(() => { stepRef.current = step; }, [step]); const timers = useRef([]); const fromPointer = useRef(false); function clear() { for (const id of timers.current) window.clearTimeout(id); timers.current = []; } useEffect(() => { const onEnd = () => { for (const id of timers.current) window.clearTimeout(id); timers.current = []; }; window.addEventListener("pointerup", onEnd); window.addEventListener("pointercancel", onEnd); return () => { window.removeEventListener("pointerup", onEnd); window.removeEventListener("pointercancel", onEnd); onEnd(); }; }, []); function arm(wait: number, gap: number) { const id = window.setTimeout(() => { stepRef.current(); arm(gap, Math.max(40, Math.round(gap * 0.8))); }, wait); timers.current.push(id); } return { onPointerDown(event: PointerEvent) { if (event.button !== 0) return; fromPointer.current = true; try { event.currentTarget.setPointerCapture(event.pointerId); } catch { /* The pointer can already be gone. */ } clear(); stepRef.current(); arm(400, 150); }, onPointerUp: clear, onPointerCancel: clear, onKeyUp(event: KeyboardEvent) { if (event.key === " " || event.key === "Enter") clear(); }, onClick() { if (fromPointer.current) { fromPointer.current = false; return; } stepRef.current(); }, }; } 56:T4e5,/* adaptive-stepper.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="adaptive-stepper"] { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; transition: grid-template-columns var(--duration-travel) var(--ease-showcase); } [data-slot="adaptive-stepper"][data-edge="min"] { grid-template-columns: 0fr minmax(0, 1fr) 2.75rem; } [data-slot="adaptive-stepper"][data-edge="max"] { grid-template-columns: 2.75rem minmax(0, 1fr) 0fr; } [data-slot="adaptive-stepper"][data-edge="both"] { grid-template-columns: 0fr minmax(0, 1fr) 0fr; } [data-slot="adaptive-end"] { min-width: 0; overflow: hidden; } [data-slot="adaptive-stepper"][data-disabled="true"] { opacity: 0.45; } [data-slot="adaptive-stepper"][data-edge="min"] [data-slot="adaptive-end"]:first-child, [data-slot="adaptive-stepper"][data-edge="max"] [data-slot="adaptive-end"]:last-child, [data-slot="adaptive-stepper"][data-edge="both"] [data-slot="adaptive-end"] { pointer-events: none; } @media (prefers-reduced-motion: reduce) { [data-slot="adaptive-stepper"] { transition: grid-template-columns 400ms var(--ease-showcase); } } } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L52",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/adaptive-stepper.tsx","content":"$54","type":"registry:ui","target":"components/ui/adaptive-stepper.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/lib/hold-step.ts","content":"$55","type":"registry:ui","target":"components/ui/lib/hold-step.ts"},{"path":"ui/rolling-value.tsx","content":"\"use client\";\n\nimport { useState } from \"react\";\nimport \"./rolling-value.css\";\n\nexport function RollingValue({\n value,\n direction,\n}: {\n value: string;\n direction: \"up\" | \"down\" | \"none\";\n}) {\n const [frame, setFrame] = useState({ value, prior: value });\n if (frame.value !== value) setFrame({ value, prior: frame.value });\n const prior = frame.prior;\n const glyphs = [...value];\n\n return (\n \n {glyphs.map((glyph, index) => {\n const changed = prior.length !== glyphs.length || prior[index] !== glyph;\n return (\n \n \n {glyph === \" \" ? \"\\u00A0\" : glyph}\n \n \n );\n })}\n \n );\n}\n","type":"registry:ui","target":"components/ui/rolling-value.tsx"},{"path":"ui/adaptive-stepper.css","content":"$56","type":"registry:file","target":"components/ui/adaptive-stepper.css"},{"path":"ui/rolling-value.css","content":"/* rolling-value.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in var(--duration-travel) var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down var(--duration-travel) var(--ease-showcase);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in 400ms var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down 400ms var(--ease-showcase);\n }\n }\n}\n\n@keyframes caliper-digit-down {\n from {\n transform: translateY(70%);\n }\n to {\n transform: translateY(0);\n }\n}\n","type":"registry:file","target":"components/ui/rolling-value.css"}],"className":"h-[70svh] min-h-80"}]]}]