50: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/1o6_421saitt-.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"] 51: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/1o6_421saitt-.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"] 52:T3081,"use client"; import * as React from "react"; import { Field, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; /** Used to format on blur (e.g. "0.00") when `decimal` is true but `decimalPlaces` wasn't set. */ const DEFAULT_DECIMAL_PLACES = 2; export interface NumberFieldProps extends Omit< React.InputHTMLAttributes, "type" | "onChange" | "value" | "defaultValue" > { label?: string; description?: string; error?: string; leftSection?: React.ReactNode; rightSection?: React.ReactNode; /** Passed to the underlying `Field` wrapper (e.g. orientation, data-invalid overrides). */ fieldClassName?: string; labelClassName?: string; inputClassName?: string; orientation?: "vertical" | "horizontal" | "responsive"; value?: number | string; defaultValue?: number | string; min?: number; max?: number; step?: number; /** * Allow decimal (float) input at all. Defaults to `true`. * Set to `false` to restrict the field to integers only. */ decimal?: boolean; /** * Max digits allowed after the decimal point, e.g. `2` for `12.34`. * Only applies when `decimal` is `true`. Extra digits are truncated * as the user types (not rounded), so partial entry like `1.5` isn't * clobbered mid-typing. Also used to format the value on blur * (defaults to 2, e.g. `0.00`) when `decimal` is `true`. */ decimalPlaces?: number; /** Allow a leading `-`. Defaults to `true` unless `min` is `>= 0`. */ allowNegative?: boolean; /** * On blur: snap an out-of-range value to the nearest bound (`min`/`max`), * and fall back an empty/incomplete value to `0` (formatted as `0.00` * when `decimal` is true). Defaults to `true`. */ clampOnBlur?: boolean; /** Called with a parsed number (or `undefined` when the field is cleared / not a valid number). */ onValueChange?: (value: number | undefined) => void; onChange?: React.ChangeEventHandler; } /** Strips/limits characters so the raw string always matches the field's numeric shape. */ function sanitizeNumberString( raw: string, opts: { decimal: boolean; decimalPlaces?: number; allowNegative: boolean }, ) { const { decimal, decimalPlaces, allowNegative } = opts; let value = raw; // Only digits, one leading "-", and (if decimal) one "." value = value.replace(decimal ? /[^\d.-]/g : /[^\d-]/g, ""); // Collapse to a single leading "-" const negative = allowNegative && value.startsWith("-"); value = value.replace(/-/g, ""); if (negative) value = `-${value}`; if (decimal) { const firstDot = value.indexOf("."); if (firstDot !== -1) { // Drop any additional "." value = value.slice(0, firstDot + 1) + value.slice(firstDot + 1).replace(/\./g, ""); if (typeof decimalPlaces === "number") { const [intPart, decPart = ""] = value.split("."); value = decimalPlaces <= 0 ? intPart : `${intPart}.${decPart.slice(0, decimalPlaces)}`; } } } return value; } function toDisplayString(value: number | string | undefined) { if (value === undefined || value === null) return ""; return String(value); } function formatNumber(n: number, decimal: boolean, places: number) { return decimal ? n.toFixed(places) : String(Math.round(n)); } export const NumberField = React.forwardRef( ( { label, description, error, leftSection, rightSection, fieldClassName, labelClassName, inputClassName, orientation = "vertical", id, disabled, required, min, max, step = 1, decimal = true, decimalPlaces, allowNegative, clampOnBlur = true, value, defaultValue, onValueChange, onChange, onBlur, onFocus, ...props }, ref, ) => { const generatedId = React.useId(); const inputId = id ?? generatedId; const descriptionId = description ? `${inputId}-description` : undefined; const errorId = error ? `${inputId}-error` : undefined; const describedBy = description ? descriptionId : undefined; const isControlled = value !== undefined; const resolvedAllowNegative = allowNegative ?? !(typeof min === "number" && min >= 0); const resolvedPlaces = decimalPlaces ?? DEFAULT_DECIMAL_PLACES; // The input's displayed text always lives in local state, even when // `value` is controlled. This is what lets the user type an // intermediate string like "1." (which isn't a valid number yet) // without it being clobbered by whatever the parent's onValueChange // echoes back (e.g. `onValueChange={(v) => setValue(v ?? 0)}` turning // a mid-typing `undefined` into `0`). const [internalValue, setInternalValue] = React.useState(() => toDisplayString(value ?? defaultValue), ); const [isFocused, setIsFocused] = React.useState(false); // Re-sync from the external `value` prop — but only while the field // isn't focused. While the user is actively typing we trust the local // buffer; syncing mid-keystroke is what causes the reset-to-0 bug. React.useEffect(() => { if (!isControlled || isFocused) return; setInternalValue(toDisplayString(value)); }, [isControlled, isFocused, value]); const displayValue = internalValue; const commit = (next: string, parsed: number | undefined) => { setInternalValue(next); onValueChange?.(parsed); }; const handleChange: React.ChangeEventHandler = ( event, ) => { const sanitized = sanitizeNumberString(event.target.value, { decimal, decimalPlaces, allowNegative: resolvedAllowNegative, }); // Reflect the sanitized value back onto the event so consumers using // plain `onChange` (instead of `onValueChange`) see the clamped text. event.target.value = sanitized; onChange?.(event); const isIncomplete = sanitized === "" || sanitized === "-" || sanitized.endsWith("."); commit(sanitized, isIncomplete ? undefined : Number(sanitized)); }; const handleFocus: React.FocusEventHandler = (event) => { setIsFocused(true); onFocus?.(event); }; const handleBlur: React.FocusEventHandler = (event) => { setIsFocused(false); onBlur?.(event); if (!clampOnBlur) return; const isIncomplete = displayValue === "" || displayValue === "-" || displayValue.endsWith("."); let next: number; if (isIncomplete) { // Nothing usable was typed — fall back to 0, still respecting bounds. next = 0; if (typeof min === "number" && min > next) next = min; if (typeof max === "number" && max < next) next = max; } else { next = Number(displayValue); if (typeof min === "number" && next < min) next = min; if (typeof max === "number" && next > max) next = max; } const formatted = formatNumber(next, decimal, resolvedPlaces); // Only touch the field if something actually needed correcting/formatting. if (formatted !== displayValue) commit(formatted, Number(formatted)); }; const clamp = (n: number) => { let next = n; if (typeof min === "number") next = Math.max(min, next); if (typeof max === "number") next = Math.min(max, next); if (decimal) next = Number(next.toFixed(resolvedPlaces)); return next; }; const step_ = (direction: 1 | -1) => { if (disabled) return; const current = Number(displayValue) || 0; const next = clamp(current + direction * step); commit(formatNumber(next, decimal, resolvedPlaces), next); }; const numericValue = Number(displayValue); return ( {label && ( {label} {required && ( <> (required) )} )}

{leftSection && ( )} {/* Deliberately `type="text"` (not `type="number"`): native number inputs can't be restricted to N decimal places as the user types, only validated after the fact. inputMode keeps the numeric keyboard on mobile. */} {rightSection ? ( ) : (

)}

{description && !error && ( {description} )} {error && {error}} ); }, ); NumberField.displayName = "NumberField"; 4f:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@nekode","registryDependencies":["field","input","label"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/ui/number-field.tsx","content":"$52","type":"registry:ui","target":"components/ui/number-field.tsx"}],"className":"h-[70svh] min-h-80"}]]}]