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:T1478,"use client"; import * as React from "react"; import { MinusIcon, PlusIcon } from "lucide-react"; import { gsap, motionScale } from "@/lib/motion"; import { cn } from "@/lib/utils"; type NumberFieldProps = Omit, "value" | "defaultValue" | "onChange" | "size" | "type" | "min" | "max" | "step"> & { value?: number; defaultValue?: number; onValueChange?: (value: number) => void; min?: number; max?: number; step?: number; size?: "sm" | "md" | "lg"; /** Display formatting, e.g. `{ style: "currency", currency: "USD" }`. */ formatOptions?: Intl.NumberFormatOptions; }; const heights = { sm: "h-ctl-sm", md: "h-ctl-md", lg: "h-ctl-lg" }; /** * A numeric stepper: −/+ buttons (press and hold to repeat, accelerating), arrow keys, Page Up/Down for ×10, * Home/End for min/max. The value slides in from the direction it moved. */ function NumberField({ className, value, defaultValue = 0, onValueChange, min = -Infinity, max = Infinity, step = 1, size = "md", formatOptions, disabled, ...props }: NumberFieldProps) { const [internal, setInternal] = React.useState(defaultValue); const current = value ?? internal; const [draft, setDraft] = React.useState(null); const inputRef = React.useRef(null); const repeat = React.useRef | null>(null); const latest = React.useRef(current); latest.current = current; const format = React.useMemo(() => new Intl.NumberFormat(undefined, formatOptions), [formatOptions]); const clamp = (n: number) => Math.min(max, Math.max(min, n)); const commit = (next: number) => { const clamped = clamp(Number(next.toFixed(10))); if (clamped === latest.current) return; const direction = clamped > latest.current ? 1 : -1; latest.current = clamped; setInternal(clamped); onValueChange?.(clamped); const el = inputRef.current; const scale = el ? motionScale(el) : 0; if (el && scale) gsap.fromTo(el, { y: 8 * direction * scale, opacity: 0.2 }, { y: 0, opacity: 1, duration: 0.3, ease: "cue", overwrite: true }); }; const stopRepeat = () => { if (repeat.current) clearTimeout(repeat.current); repeat.current = null; }; const startRepeat = (delta: number) => { commit(latest.current + delta); let delay = 380; const tick = () => { commit(latest.current + delta); delay = Math.max(40, delay * 0.8); repeat.current = setTimeout(tick, delay); }; repeat.current = setTimeout(tick, delay); }; React.useEffect(() => stopRepeat, []); const stepper = (delta: number, label: string, Icon: typeof PlusIcon) => ( ); return (

{stepper(-step, "Decrease", MinusIcon)} setDraft(e.target.value)} onFocus={() => setDraft(String(current))} onBlur={() => { const parsed = Number.parseFloat((draft ?? "").replace(/[^\d.-]/g, "")); if (Number.isFinite(parsed)) commit(parsed); setDraft(null); }} onKeyDown={(e) => { const keys: Record = { ArrowUp: step, ArrowDown: -step, PageUp: step * 10, PageDown: -step * 10 }; if (e.key in keys) { e.preventDefault(); commit(current + keys[e.key]!); setDraft(null); } else if (e.key === "Home" && Number.isFinite(min)) commit(min); else if (e.key === "End" && Number.isFinite(max)) commit(max); else if (e.key === "Enter") e.currentTarget.blur(); }} className="w-full min-w-0 flex-1 border-x border-input bg-transparent text-center text-sm font-medium tabular-nums outline-none" {...props} /> {stepper(step, "Increase", PlusIcon)}

); } export { NumberField }; export type { NumberFieldProps }; 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","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":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/cuelark/ui/number-field.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]