4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T34f3,"use client"; import * as React from "react"; import type { NumberField as NumberFieldDef } from "@buildnbuzz/form-react"; import { clampNumber, applyNumericPrecision, formatNumberWithSeparator, parseFormattedNumber, } from "@buildnbuzz/form-react"; import { useDataField } from "@buildnbuzz/form-react"; import { Input } from "@/components/ui/input"; import { CopyButton } from "../components/copy-button"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { cn } from "@/lib/utils"; interface NumberUi { prefix?: string; suffix?: string; variant?: "default" | "stacked" | "pill" | "plain"; hideSteppers?: boolean; thousandSeparator?: boolean | string; copyable?: boolean; autoFocus?: boolean; className?: string; width?: string | number; asterisk?: boolean; } export function NumberField() { const { fieldApi, field, isDisabled, isReadOnly, isRequired, label, placeholder, description, errors, isInvalid, descriptionId, errorId, ariaDescribedBy, handleBlur, } = useDataField(); const value = fieldApi.state.value as number | undefined; const ui = field.ui as NumberUi | undefined; // UI options const step = field.step ?? 1; const variant = ui?.variant ?? "default"; const prefix = ui?.prefix; const suffix = ui?.suffix; const hideSteppers = ui?.hideSteppers || variant === "plain"; const thousandSeparator = ui?.thousandSeparator; const copyable = ui?.copyable; const sep = typeof thousandSeparator === "string" ? thousandSeparator : ","; const width = ui?.width; const widthStyle = width ? { width: typeof width === "number" ? `${width}px` : width, flex: "0 1 auto", } : undefined; // Display value for thousand separator mode const [displayValue, setDisplayValue] = React.useState(() => thousandSeparator && typeof value === "number" ? formatNumberWithSeparator(value, sep) : "", ); // Sync display value when external value changes React.useEffect(() => { if (thousandSeparator && typeof value === "number") { setDisplayValue(formatNumberWithSeparator(value, sep)); } else if (thousandSeparator && value === undefined) { setDisplayValue(""); } }, [value, thousandSeparator, sep]); const handleChange = (val: number | undefined) => { if (isReadOnly) return; // Apply precision if specified const finalVal = applyNumericPrecision(val, field.precision); fieldApi.handleChange(finalVal); }; const handleAdjust = (delta: number) => { if (isReadOnly || isDisabled) return; const current = typeof value === "number" ? value : (field.min ?? 0); const next = clampNumber(current + delta, field.min, field.max); handleChange(next); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (isDisabled || isReadOnly) return; if (e.key === "ArrowUp") { e.preventDefault(); handleAdjust(step); } else if (e.key === "ArrowDown") { e.preventDefault(); handleAdjust(-step); } }; const handleFormattedInputChange = ( e: React.ChangeEvent, ) => { const inputVal = e.target.value; setDisplayValue(inputVal); const parsed = parseFormattedNumber(inputVal, sep); handleChange(parsed); }; const handleFormattedInputBlur = () => { if (typeof value === "number") { setDisplayValue(formatNumberWithSeparator(value, sep)); } handleBlur(); }; const renderInput = (className?: string) => { // When thousandSeparator is enabled, use text input if (thousandSeparator) { return ( ); } // Standard number input return ( ) => handleChange( e.target.value === "" ? undefined : Number(e.target.value), ) } onBlur={handleBlur} onKeyDown={handleKeyDown} placeholder={placeholder} className={cn( hideSteppers ? "" : "text-center [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield]", className, )} disabled={isDisabled} readOnly={isReadOnly} min={field.min} max={field.max} step={step} aria-invalid={isInvalid} aria-describedby={ariaDescribedBy} autoFocus={ui?.autoFocus} /> ); }; const renderInputContent = () => { // Plain variant - no steppers if (hideSteppers) { if (prefix || suffix || copyable) { return ( {prefix && ( {prefix} )} {renderInput()} {suffix && ( {suffix} )} {copyable && ( )} ); } return ( handleChange( e.target.value === "" ? undefined : Number(e.target.value), ) } onBlur={handleBlur} onKeyDown={handleKeyDown} placeholder={placeholder} disabled={isDisabled} readOnly={isReadOnly} min={field.min} max={field.max} step={step} aria-invalid={isInvalid} aria-describedby={ariaDescribedBy} autoFocus={ui?.autoFocus} className="tabular-nums" /> ); } // Stacked variant - vertical buttons on right if (variant === "stacked") { return ( {prefix && ( {prefix} )} {renderInput("tabular-nums")} {suffix && ( {suffix} )}

); } // Pill variant - rounded with buttons on sides if (variant === "pill") { return ( handleAdjust(-step)} className="rounded-full size-6" disabled={isDisabled || isReadOnly} aria-label="Decrement" > {prefix && ( {prefix} )} {renderInput()} {suffix && ( {suffix} )} handleAdjust(step)} className="rounded-full size-6" disabled={isDisabled || isReadOnly} aria-label="Increment" > ); } // Default variant - inline buttons on sides return ( handleAdjust(-step)} disabled={isDisabled || isReadOnly} aria-label="Decrement" className="size-7" > {prefix && ( {prefix} )} {renderInput()} {suffix && ( {suffix} )} handleAdjust(step)} disabled={isDisabled || isReadOnly} aria-label="Increment" className="size-7" > ); }; return ( {label && ( {isRequired && ui?.asterisk !== false && ( * )} {label} )} {renderInputContent()} {description && !isInvalid && ( {description} )} {isInvalid && } ); } 4b:["$","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":[null,["$","$L4c",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/init","input","input-group","field","@buzzform/copy"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/shadcn/fields/number.tsx","content":"$4e","type":"registry:component","target":"components/buzzform/fields/number.tsx"}],"className":"h-[70svh] min-h-80"}]]}]