@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/components/forms/Input/Input.d.ts

@@ -0,0 +1,98 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { Radius, Size } from '../../../types/common';
+/**
+ * Visual style of a text field.
+ * - `outline`: surface background with a visible border (default).
+ * - `filled`: sunken background; the border appears on hover and focus.
+ */
+export type InputVariant = "outline" | "filled";
+export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "size" | "children"> {
+    /**
+     * Control height, padding, and type size. Inherits from a surrounding
+     * `Field` when not set. @default "md"
+     */
+    size?: Size;
+    /** Visual style. @default "outline" */
+    variant?: InputVariant;
+    /** Corner rounding. When omitted, uses `--field-radius`. Use `pill` for search bars. */
+    radius?: Radius;
+    /**
+     * Marks the value as invalid: sets `aria-invalid` and a danger border.
+     * Pair it with a visible error message (a `Field` does this for you).
+     * Inherits from a surrounding `Field`. @default false
+     */
+    invalid?: boolean;
+    /** Decorative icon before the text. Hidden from assistive technology. */
+    startIcon?: ReactNode;
+    /** Decorative icon after the text. Hidden from assistive technology. */
+    endIcon?: ReactNode;
+    /**
+     * Static content attached to the start edge, such as `"https://"` or a
+     * currency symbol. Text addons are announced as part of the input's
+     * description (`aria-describedby`).
+     */
+    startAddon?: ReactNode;
+    /**
+     * Static content attached to the end edge, such as `".com"` or a unit
+     * (`"kg"`). Text addons are announced as part of the input's description.
+     */
+    endAddon?: ReactNode;
+    /**
+     * Interactive content inside the start edge (for example an `IconButton`
+     * with `size="sm"` and `variant="ghost"`). Stays in the tab order; give it
+     * its own accessible name.
+     */
+    startElement?: ReactNode;
+    /**
+     * Interactive content inside the end edge (for example a copy or
+     * show-password `IconButton`). Stays in the tab order; give it its own
+     * accessible name.
+     */
+    endElement?: ReactNode;
+    /**
+     * Shows a clear button (`aria-label="Clear"`) while the input has a value.
+     * Clearing fires a native-like `change` (so `onChange` runs), calls
+     * `onValueChange("")`, and moves focus back to the input. Hidden while
+     * disabled or read-only. @default false
+     */
+    clearable?: boolean;
+    /** Accessible name of the clear button. @default "Clear" */
+    clearLabel?: string;
+    /** Called after the clear button empties the field (after `onChange`/`onValueChange`). */
+    onClear?: () => void;
+    /**
+     * Shows a decorative spinner at the end and sets `aria-busy` on the input.
+     * Announce the outcome of the async work elsewhere (e.g. a status message).
+     * @default false
+     */
+    loading?: boolean;
+    /** Stretches the field to fill its container. @default true */
+    fullWidth?: boolean;
+    /** The native `size` attribute (visible width in characters). Mostly useful with `fullWidth={false}`. */
+    htmlSize?: number;
+    /** Called with the new value on every change (typing, pasting, clearing). */
+    onValueChange?: (value: string) => void;
+    /** Class name for the `<input>` element. `className` goes to the wrapper. */
+    inputClassName?: string;
+    /** Ref to the `<input>` element. */
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * A single-line text field built on the native `<input>`. Supports every
+ * text-like `type` (text, email, url, tel, number, search, password, date,
+ * ...), addons, decorative icons, interactive slots, a clear button, and a
+ * loading state.
+ *
+ * Works controlled (`value` + `onChange`/`onValueChange`) or uncontrolled
+ * (`defaultValue`). Inside a `Field`, the id, description, invalid,
+ * required, disabled, read-only, and size are wired automatically.
+ *
+ * `ref` points at the `<input>`; `className` styles the wrapper and
+ * `inputClassName` the input itself.
+ *
+ * ```tsx
+ * <label htmlFor="team">Team name</label>
+ * <Input id="team" placeholder="The Villains" clearable onValueChange={setName} />
+ * ```
+ */
+export declare const Input: ({ size, variant, radius, invalid, startIcon, endIcon, startAddon, endAddon, startElement, endElement, clearable, clearLabel: clearLabelProp, onClear, loading, fullWidth, htmlSize, onValueChange, onChange, className, inputClassName, style, ref, id, type, value, defaultValue, disabled, required, readOnly, "aria-describedby": ariaDescribedBy, "aria-busy": ariaBusy, ...rest }: InputProps) => import("react").JSX.Element;

package/dist/components/forms/Input/Input.mjs

@@ -0,0 +1,147 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { assignRef as t } from "../../../utils/refs.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { Spinner as r } from "../../feedback/Spinner/Spinner.mjs";
+import { CloseIcon as ee } from "../../primitives/Icon/icons.mjs";
+import { useFieldControl as i } from "../Field/FieldContext.mjs";
+import a from "./Input.module.css.mjs";
+import { useCallback as o, useEffect as s, useId as c, useRef as te, useState as ne } from "react";
+import { jsx as l, jsxs as re } from "react/jsx-runtime";
+//#region src/components/forms/Input/Input.tsx
+var ie = {
+	outline: a.outline,
+	filled: a.filled
+}, ae = {
+	sm: a.sm,
+	md: a.md,
+	lg: a.lg
+}, oe = {
+	none: a.radiusNone,
+	xs: a.radiusXs,
+	sm: a.radiusSm,
+	md: a.radiusMd,
+	lg: a.radiusLg,
+	xl: a.radiusXl,
+	"2xl": a.radius2xl,
+	pill: a.radiusPill
+};
+function u(e) {
+	return e != null && String(e) !== "";
+}
+function d(e) {
+	return typeof e == "string" || typeof e == "number";
+}
+function f(e, t) {
+	let n = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+	n ? n.call(e, t) : e.value = t, e.dispatchEvent(new Event("input", { bubbles: !0 }));
+}
+var p = ({ size: p, variant: m = "outline", radius: h, invalid: se, startIcon: g, endIcon: _, startAddon: v, endAddon: y, startElement: b, endElement: x, clearable: S = !1, clearLabel: C, onClear: w, loading: T = !1, fullWidth: E = !0, htmlSize: D, onValueChange: O, onChange: k, className: A, inputClassName: j, style: M, ref: N, id: P, type: F = "text", value: I, defaultValue: L, disabled: R, required: z, readOnly: B, "aria-describedby": V, "aria-busy": H, ...ce }) => {
+	let U = e(), W = C ?? U.input.clear, G = c(), K = `${G}-start-addon`, q = `${G}-end-addon`, le = [
+		V,
+		v != null && d(v) ? K : void 0,
+		y != null && d(y) ? q : void 0
+	].filter(Boolean).join(" ") || void 0, J = i({
+		id: P,
+		invalid: se,
+		required: z,
+		disabled: R,
+		readOnly: B,
+		size: p,
+		"aria-describedby": le
+	}), Y = J.size ?? "md", X = I !== void 0, Z = te(null), ue = o((e) => {
+		Z.current = e, t(N, e);
+	}, [N]), [de, Q] = ne(() => u(L)), fe = X ? u(I) : de;
+	s(() => {
+		if (X) return;
+		let e = Z.current?.form;
+		if (!e) return;
+		let t = () => {
+			requestAnimationFrame(() => {
+				Z.current && Q(Z.current.value !== "");
+			});
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [X]);
+	let pe = (e) => {
+		let t = e.target.value;
+		X || Q(t !== ""), k?.(e), O?.(t);
+	}, me = () => {
+		let e = Z.current;
+		e && (f(e, ""), e.focus(), w?.());
+	}, he = (e) => {
+		let t = Z.current;
+		if (!t || J.disabled) return;
+		let n = e.target;
+		n !== t && (n.closest("button, a, input, select, textarea, [tabindex], [contenteditable]") || (e.preventDefault(), t.focus()));
+	}, $ = S && fe && !J.disabled && !J.readOnly, ge = $ || x != null;
+	return /* @__PURE__ */ re("div", {
+		className: n(a.root, ie[m], ae[Y], h ? oe[h] : a.radiusDefault, E && a.fullWidth, J.invalid && a.invalid, J.disabled && a.disabled, J.readOnly && !J.disabled && a.readOnly, v != null && a.hasStartAddon, y != null && a.hasEndAddon, b != null && a.hasStartElement, ge && a.hasEndControl, A),
+		style: M,
+		"data-size": Y,
+		"data-variant": m,
+		onPointerDown: he,
+		children: [
+			v != null && /* @__PURE__ */ l("span", {
+				className: n(a.addon, a.startAddon),
+				id: d(v) ? K : void 0,
+				children: v
+			}),
+			b != null && /* @__PURE__ */ l("span", {
+				className: a.element,
+				children: b
+			}),
+			g != null && /* @__PURE__ */ l("span", {
+				className: a.icon,
+				"aria-hidden": "true",
+				children: g
+			}),
+			/* @__PURE__ */ l("input", {
+				...ce,
+				ref: ue,
+				id: J.id,
+				type: F,
+				value: I,
+				defaultValue: L,
+				size: D,
+				disabled: J.disabled,
+				required: J.required,
+				readOnly: J.readOnly,
+				...J.ariaProps,
+				"aria-busy": T ? !0 : H,
+				className: n(a.input, S && a.hideNativeClear, j),
+				onChange: pe
+			}),
+			T && /* @__PURE__ */ l("span", {
+				className: a.icon,
+				children: /* @__PURE__ */ l(r, {
+					decorative: !0,
+					size: Y === "sm" ? "xs" : "sm"
+				})
+			}),
+			$ && /* @__PURE__ */ l("button", {
+				type: "button",
+				className: a.clear,
+				"aria-label": W,
+				"aria-controls": J.id,
+				onClick: me,
+				children: /* @__PURE__ */ l(ee, { size: Y === "lg" ? "sm" : "xs" })
+			}),
+			x != null && /* @__PURE__ */ l("span", {
+				className: a.element,
+				children: x
+			}),
+			_ != null && /* @__PURE__ */ l("span", {
+				className: a.icon,
+				"aria-hidden": "true",
+				children: _
+			}),
+			y != null && /* @__PURE__ */ l("span", {
+				className: n(a.addon, a.endAddon),
+				id: d(y) ? q : void 0,
+				children: y
+			})
+		]
+	});
+};
+//#endregion
+export { p as Input };

package/dist/components/forms/Input/Input.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_a9i71_13`,t=`_fullWidth_a9i71_91`,n=`_sm_a9i71_103`,r=`_md_a9i71_119`,i=`_lg_a9i71_135`,a=`_radiusDefault_a9i71_153`,o=`_radiusNone_a9i71_159`,s=`_radiusXs_a9i71_165`,c=`_radiusSm_a9i71_171`,l=`_radiusMd_a9i71_177`,u=`_radiusLg_a9i71_183`,d=`_radiusXl_a9i71_189`,f=`_radius2xl_a9i71_195`,p=`_radiusPill_a9i71_201`,m=`_outline_a9i71_211`,h=`_filled_a9i71_221`,g=`_disabled_a9i71_235`,_=`_readOnly_a9i71_235`,v=`_invalid_a9i71_235`,y=`_input_a9i71_303`,b=`_hideNativeClear_a9i71_387`,x=`_icon_a9i71_397`,S=`_element_a9i71_435`,C=`_hasStartElement_a9i71_451`,w=`_hasStartAddon_a9i71_451`,T=`_hasEndControl_a9i71_459`,E=`_hasEndAddon_a9i71_459`,D=`_addon_a9i71_469`,O=`_startAddon_a9i71_495`,k=`_endAddon_a9i71_509`,A=`_clear_a9i71_547`,j={root:e,fullWidth:t,sm:n,md:r,lg:i,radiusDefault:a,radiusNone:o,radiusXs:s,radiusSm:c,radiusMd:l,radiusLg:u,radiusXl:d,radius2xl:f,radiusPill:p,outline:m,filled:h,disabled:g,readOnly:_,invalid:v,input:y,hideNativeClear:b,icon:x,element:S,hasStartElement:C,hasStartAddon:w,hasEndControl:T,hasEndAddon:E,addon:D,startAddon:O,endAddon:k,clear:A};exports.addon=D,exports.clear=A,exports.default=j,exports.disabled=g,exports.element=S,exports.endAddon=k,exports.filled=h,exports.fullWidth=t,exports.hasEndAddon=E,exports.hasEndControl=T,exports.hasStartAddon=w,exports.hasStartElement=C,exports.hideNativeClear=b,exports.icon=x,exports.input=y,exports.invalid=v,exports.lg=i,exports.md=r,exports.outline=m,exports.radius2xl=f,exports.radiusDefault=a,exports.radiusLg=u,exports.radiusMd=l,exports.radiusNone=o,exports.radiusPill=p,exports.radiusSm=c,exports.radiusXl=d,exports.radiusXs=s,exports.readOnly=_,exports.root=e,exports.sm=n,exports.startAddon=O;

package/dist/components/forms/Input/Input.module.css.mjs

@@ -0,0 +1,36 @@
+//#region src/components/forms/Input/Input.module.css
+var e = "_root_a9i71_13", t = "_fullWidth_a9i71_91", n = "_sm_a9i71_103", r = "_md_a9i71_119", i = "_lg_a9i71_135", a = "_radiusDefault_a9i71_153", o = "_radiusNone_a9i71_159", s = "_radiusXs_a9i71_165", c = "_radiusSm_a9i71_171", l = "_radiusMd_a9i71_177", u = "_radiusLg_a9i71_183", d = "_radiusXl_a9i71_189", f = "_radius2xl_a9i71_195", p = "_radiusPill_a9i71_201", m = "_outline_a9i71_211", h = "_filled_a9i71_221", g = "_disabled_a9i71_235", _ = "_readOnly_a9i71_235", v = "_invalid_a9i71_235", y = "_input_a9i71_303", b = "_hideNativeClear_a9i71_387", x = "_icon_a9i71_397", S = "_element_a9i71_435", C = "_hasStartElement_a9i71_451", w = "_hasStartAddon_a9i71_451", T = "_hasEndControl_a9i71_459", E = "_hasEndAddon_a9i71_459", D = "_addon_a9i71_469", O = "_startAddon_a9i71_495", k = "_endAddon_a9i71_509", A = "_clear_a9i71_547", j = {
+	root: e,
+	fullWidth: t,
+	sm: n,
+	md: r,
+	lg: i,
+	radiusDefault: a,
+	radiusNone: o,
+	radiusXs: s,
+	radiusSm: c,
+	radiusMd: l,
+	radiusLg: u,
+	radiusXl: d,
+	radius2xl: f,
+	radiusPill: p,
+	outline: m,
+	filled: h,
+	disabled: g,
+	readOnly: _,
+	invalid: v,
+	input: y,
+	hideNativeClear: b,
+	icon: x,
+	element: S,
+	hasStartElement: C,
+	hasStartAddon: w,
+	hasEndControl: T,
+	hasEndAddon: E,
+	addon: D,
+	startAddon: O,
+	endAddon: k,
+	clear: A
+};
+//#endregion
+export { D as addon, A as clear, j as default, g as disabled, S as element, k as endAddon, h as filled, t as fullWidth, E as hasEndAddon, T as hasEndControl, w as hasStartAddon, C as hasStartElement, b as hideNativeClear, x as icon, y as input, v as invalid, i as lg, r as md, m as outline, f as radius2xl, a as radiusDefault, u as radiusLg, l as radiusMd, o as radiusNone, p as radiusPill, c as radiusSm, d as radiusXl, s as radiusXs, _ as readOnly, e as root, n as sm, O as startAddon };

package/dist/components/forms/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/dist/components/forms/NumberInput/NumberInput.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../utils/cx.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),ee=require("../Field/FieldContext.cjs.js"),te=require("../Input/Input.cjs.js"),o=require("./NumberInput.module.css.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var ne={sides:o.default.sides,stacked:o.default.stacked,none:void 0},re=400,ie=60;function l(e){if(!Number.isFinite(e))return 0;let t=String(e),n=t.match(/e-(\d+)$/);if(n)return Number(n[1]);let r=t.indexOf(`.`);return r===-1?0:t.length-r-1}function u(e,t){return Number(e.toFixed(Math.min(Math.max(t,0),20)))}function d(e,t,n){let r=e;return t!=null&&r<t&&(r=t),n!=null&&r>n&&(r=n),r}function f(e){try{let t=new Intl.NumberFormat(e).formatToParts(11111.1);return{group:t.find(e=>e.type===`group`)?.value??`,`,decimal:t.find(e=>e.type===`decimal`)?.value??`.`}}catch{return{group:`,`,decimal:`.`}}}var p=/[−‒–﹣－]/g,m=/[\s  ]/g;function h(e,t){let{group:n,decimal:r}=f(t),i=e.replace(m,``).replace(p,`-`);return i===``?null:(r===`.`?n!==``&&(i=i.split(n.replace(m,``)||`\0`).join(``)):!i.includes(r)&&/^-?\d*\.(\d{1,2}|\d{4,})$/.test(i.replace(/[^\d.-]/g,``))?i=i.replace(/[^\d.-]/g,``):(i=i.split(n.replace(m,``)).join(``),n===`.`&&(i=i.split(`.`).join(``)),i=i.split(r).join(`.`)),i=i.replace(/['’]/g,``).replace(/[^\d.-]/g,``),!/^-?\d*\.?\d*$/.test(i)||!/\d/.test(i)?NaN:Number(i))}var g=({value:g,defaultValue:_=null,onValueChange:ae,min:v,max:y,step:b=1,largeStep:oe,precision:x,clampOnBlur:se=!0,allowDecimal:ce,allowNegative:le,formatOptions:ue,locale:de,stepper:S=`sides`,decrementLabel:fe,incrementLabel:pe,wheel:me=!1,ref:he,id:ge,size:_e,invalid:ve,disabled:ye,readOnly:be,required:xe,name:C,endAddon:w,className:Se,inputClassName:Ce,inputMode:we,onChange:Te,onFocus:Ee,onBlur:De,onKeyDown:Oe,"aria-describedby":ke,...T})=>{let{messages:E,locale:Ae}=n.useLocale(),D=de??Ae,je=fe??E.numberInput.decrement,Me=pe??E.numberInput.increment,O=ee.useFieldControl({id:ge,invalid:ve,required:xe,disabled:ye,readOnly:be,size:_e}),k=O.disabled||O.readOnly,[A,j]=e.useControllableState({value:g,defaultValue:_,onChange:ae});t.useFormReset(()=>O.id?document.getElementById(O.id):null,()=>{j(_??null),H(``)},g===void 0);let M=ce??x!==0,N=le??!(v!=null&&v>=0),P=oe??b*10,F=(0,s.useMemo)(()=>f(D),[D]),I=(0,s.useMemo)(()=>{let e={};x!=null&&(e.minimumFractionDigits=x,e.maximumFractionDigits=x);try{return new Intl.NumberFormat(D,{...e,...ue})}catch{return new Intl.NumberFormat(void 0,e)}},[D,ue,x]),L=(0,s.useMemo)(()=>{try{return new Intl.NumberFormat(D,{useGrouping:!1,maximumFractionDigits:x??20})}catch{return new Intl.NumberFormat(void 0,{useGrouping:!1,maximumFractionDigits:20})}},[D,x]),R=(0,s.useCallback)(e=>e==null?``:I.format(e),[I]),z=(0,s.useCallback)(e=>e==null?``:L.format(e),[L]),[B,Ne]=(0,s.useState)(!1),[V,H]=(0,s.useState)(``),U=(0,s.useRef)(null),Pe=(0,s.useCallback)(e=>{U.current=e,r.assignRef(he,e)},[he]),Fe=(0,s.useCallback)((e,t)=>{let n=e;return x==null?M||(n=Math.round(n)):n=u(n,x),t&&(n=d(n,v,y)),n},[x,M,v,y]),W=(0,s.useRef)(A);W.current=A,(0,s.useEffect)(()=>{B&&H(e=>{let t=h(e,D);return t===A||t!==null&&Number.isNaN(t)?e:z(A)})},[A]);let G=(0,s.useCallback)(e=>{j(e),B&&H(z(e))},[j,B,z]),K=(0,s.useCallback)(e=>{if(k)return;let t=W.current;if(t==null||Number.isNaN(t)){let e=B?h(V,D):null;t=e!=null&&!Number.isNaN(e)?e:0}let n=x??Math.max(l(b),l(e),l(t)),r=d(u(t+e,M?n:0),v,y);W.current=r,G(r)},[k,B,V,D,x,b,M,v,y,G]),q=(0,s.useRef)(K);q.current=K;let J=A!=null&&v!=null&&A<=v,Y=A!=null&&y!=null&&A>=y,X=(0,s.useRef)({}),Z=(0,s.useRef)(!1),Q=(0,s.useCallback)(()=>{window.clearTimeout(X.current.timeout),window.clearInterval(X.current.interval),X.current={}},[]);(0,s.useEffect)(()=>Q,[Q]),(0,s.useEffect)(()=>{k&&Q()},[k,Q]),(0,s.useEffect)(()=>{(J||Y)&&Q()},[J,Y,Q]);let Ie=e=>t=>{if(t.button!==0||k)return;t.preventDefault(),Z.current=!0,Q(),q.current(e*b);let n=()=>{Q(),window.removeEventListener(`pointerup`,n),window.removeEventListener(`pointercancel`,n),window.setTimeout(()=>{Z.current=!1},0)};window.addEventListener(`pointerup`,n),window.addEventListener(`pointercancel`,n),X.current.timeout=window.setTimeout(()=>{X.current.interval=window.setInterval(()=>{q.current(e*b)},ie)},re)},Le=e=>t=>{if(Z.current){Z.current=!1;return}t.preventDefault(),q.current(e*b)};(0,s.useEffect)(()=>{let e=U.current;if(!me||!B||!e)return;let t=e=>{e.deltaY!==0&&(e.preventDefault(),q.current(e.deltaY<0?b:-b))};return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)},[me,B,b]);let Re=e=>{let t=e.replace(m,``).replace(/\d/g,``);return t=t.split(F.group).join(``),M&&(t=t.split(F.decimal).join(``).replace(/[.,]/g,``)),N&&(t=t.replace(/-/g,``).replace(p,``)),t=t.replace(/['’]/g,``),t===``},ze=e=>{let t=e.target.value,n=e.nativeEvent.inputType;if(n===`insertFromPaste`||n===`insertFromDrop`){let e=h(t,D);e!=null&&!Number.isNaN(e)&&(t=z(e))}if(!Re(t))return;H(t),Te?.(e);let r=h(t,D);if(r===null)j(null);else if(!Number.isNaN(r)){let e=!N&&r<0?Math.abs(r):r;W.current=e,j(e)}},Be=()=>{let e=h(V,D);if(e===null)return j(null),null;let t=Number.isNaN(e)?W.current:e;if(t==null)return j(null),null;let n=se?Fe(t,!0):Fe(t,!1);return W.current=n,j(n),n},Ve=e=>{Ne(!0),H(z(A)),Ee?.(e)},He=e=>{Be(),Ne(!1),Q(),De?.(e)},Ue=e=>{if(Oe?.(e),!(e.defaultPrevented||e.nativeEvent.isComposing)){if(e.key===`Enter`){let e=Be();H(z(e));return}if(!k)switch(e.key){case`ArrowUp`:e.preventDefault(),K(b);break;case`ArrowDown`:e.preventDefault(),K(-b);break;case`PageUp`:e.preventDefault(),K(P);break;case`PageDown`:e.preventDefault(),K(-P);break;case`Home`:v!=null&&(e.preventDefault(),G(v));break;case`End`:y!=null&&(e.preventDefault(),G(y))}}},We=B?V:R(A),Ge=(O.size??`md`)===`lg`?`md`:`sm`,Ke={type:`button`,tabIndex:-1,"aria-controls":O.id},qe=(0,c.jsx)(`button`,{...Ke,className:i.cx(o.default.button,S===`stacked`?o.default.stackButton:o.default.sideButton),"aria-label":je,disabled:k||J,onPointerDown:Ie(-1),onClick:Le(-1),children:S===`stacked`?(0,c.jsx)(a.ChevronDownIcon,{size:`xs`,strokeWidth:2.5}):(0,c.jsx)(a.MinusIcon,{size:Ge,strokeWidth:2.5})}),$=(0,c.jsx)(`button`,{...Ke,className:i.cx(o.default.button,S===`stacked`?o.default.stackButton:o.default.sideButton),"aria-label":Me,disabled:k||Y,onPointerDown:Ie(1),onClick:Le(1),children:S===`stacked`?(0,c.jsx)(a.ChevronUpIcon,{size:`xs`,strokeWidth:2.5}):(0,c.jsx)(a.PlusIcon,{size:Ge,strokeWidth:2.5})}),Je=S===`sides`?$:S===`stacked`?(0,c.jsxs)(`span`,{className:i.cx(o.default.stack,w==null&&o.default.stackFlush),children:[$,qe]}):void 0;return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(te.Input,{...T,ref:Pe,id:O.id,size:O.size,invalid:O.invalid,disabled:O.disabled,readOnly:O.readOnly,required:O.required,"aria-describedby":ke,type:`text`,role:`spinbutton`,inputMode:we??(M?`decimal`:`numeric`),autoComplete:T.autoComplete??`off`,"aria-valuenow":A??void 0,"aria-valuemin":v,"aria-valuemax":y,"aria-valuetext":A==null?void 0:R(A),value:We,onChange:ze,onFocus:Ve,onBlur:He,onKeyDown:Ue,startElement:S===`sides`?qe:void 0,endElement:Je,endAddon:w,className:i.cx(ne[S],Se),inputClassName:i.cx(o.default.input,Ce)}),C!=null&&(0,c.jsx)(`input`,{type:`hidden`,name:C,value:A??``,disabled:O.disabled})]})};exports.NumberInput=g,exports.parseNumber=h;

package/dist/components/forms/NumberInput/NumberInput.d.ts

@@ -0,0 +1,87 @@
+import { Ref } from 'react';
+import { InputProps } from '../Input';
+/**
+ * Where the stepper buttons go.
+ * - `sides`: a round − button at the start and + at the end (default).
+ * - `stacked`: small up/down chevrons stacked at the end edge.
+ * - `none`: no buttons; keyboard (and optional wheel) only.
+ */
+export type NumberInputStepper = "sides" | "stacked" | "none";
+export interface NumberInputProps extends Omit<InputProps, "value" | "defaultValue" | "onValueChange" | "type" | "min" | "max" | "step" | "role" | "endIcon" | "startElement" | "endElement" | "clearable" | "clearLabel" | "loading"> {
+    /** Controlled value. `null` means the field is empty. */
+    value?: number | null;
+    /** Initial value when uncontrolled. @default null */
+    defaultValue?: number | null;
+    /**
+     * Called with the new number (or `null` when cleared) whenever the value
+     * changes: while typing a parseable number, stepping, and on blur/Enter
+     * when the value is clamped or rounded.
+     */
+    onValueChange?: (value: number | null) => void;
+    /** Smallest allowed value. Stepping never goes below it; typed values are clamped on blur when `clampOnBlur`. */
+    min?: number;
+    /** Largest allowed value. Stepping never goes above it; typed values are clamped on blur when `clampOnBlur`. */
+    max?: number;
+    /** Amount added or removed by ArrowUp/ArrowDown and the stepper buttons. @default 1 */
+    step?: number;
+    /** Amount added or removed by PageUp/PageDown. @default 10 × step */
+    largeStep?: number;
+    /**
+     * Fixed number of decimal places. Committed values are rounded to it and
+     * the display shows exactly this many digits (unless `formatOptions` says
+     * otherwise). When omitted, the step's decimals are used for stepping.
+     */
+    precision?: number;
+    /** Clamp to `min`/`max` and round to `precision` when the field loses focus or Enter is pressed. @default true */
+    clampOnBlur?: boolean;
+    /** Allow a decimal separator. @default true, or false when `precision` is 0 */
+    allowDecimal?: boolean;
+    /** Allow a minus sign. @default true, or false when `min` is 0 or more */
+    allowNegative?: boolean;
+    /**
+     * `Intl.NumberFormat` options for the value shown while the field is not
+     * focused (e.g. `{ style: "currency", currency: "USD" }` or
+     * `{ style: "unit", unit: "percent" }`). While focused the field shows the
+     * plain editable number. Note `style: "percent"` shows 0.45 as "45%";
+     * use `style: "unit", unit: "percent"` to show 45 as "45%".
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** BCP 47 locale for formatting and parsing (group and decimal separators). @default the browser locale */
+    locale?: string;
+    /** Stepper button layout. @default "sides" */
+    stepper?: NumberInputStepper;
+    /** Accessible name of the decrement button. @default "Decrease" */
+    decrementLabel?: string;
+    /** Accessible name of the increment button. @default "Increase" */
+    incrementLabel?: string;
+    /** Change the value with the mouse wheel while the field is focused. @default false */
+    wheel?: boolean;
+    /** Ref to the `<input>` element. */
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * Parses user text into a number. Returns `null` for empty text and `NaN`
+ * for text that isn't (yet) a number, such as "-" or "1.2.3".
+ * Accepts group separators, the locale's decimal separator, Unicode minus
+ * signs, and ignores currency symbols, percent signs, and unit text.
+ */
+export declare function parseNumber(text: string, locale?: string): number | null;
+/**
+ * A numeric text field following the WAI-ARIA spinbutton pattern. The
+ * `<input>` itself is the spinbutton: it takes focus, exposes
+ * `aria-valuenow`/`min`/`max`/`valuetext`, and handles ArrowUp/Down,
+ * PageUp/Down, Home/End, and Enter. Stepper buttons are pointer
+ * conveniences (press and hold to repeat) and stay out of the tab order.
+ *
+ * Shows a formatted value (`Intl.NumberFormat`) when not focused and the
+ * plain editable number while focused; parses locale input (group
+ * separators, decimal comma). Built on `Input`, so size, variant, radius,
+ * addons, and `Field` wiring match every other text field.
+ *
+ * ```tsx
+ * <Field label="Weight">
+ *   <NumberInput min={0} step={2.5} endAddon="kg" defaultValue={60} />
+ * </Field>
+ * ```
+ */
+export declare const NumberInput: ({ value: valueProp, defaultValue, onValueChange, min, max, step, largeStep, precision, clampOnBlur, allowDecimal: allowDecimalProp, allowNegative: allowNegativeProp, formatOptions, locale: localeProp, stepper, decrementLabel: decrementLabelProp, incrementLabel: incrementLabelProp, wheel, ref, id, size, invalid, disabled, readOnly, required, name, endAddon, className, inputClassName, inputMode, onChange, onFocus, onBlur, onKeyDown, "aria-describedby": ariaDescribedBy, ...rest }: NumberInputProps) => import("react").JSX.Element;