@skdx/react 0.28.0 → 0.30.0

package/dist/number-field/NumberField.cjs

@@ -1 +1,2 @@
-"use strict";var ge=Object.create;var M=Object.defineProperty;var Ee=Object.getOwnPropertyDescriptor;var Le=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,Ve=Object.prototype.hasOwnProperty;var Be=(r,t)=>{for(var e in t)M(r,e,{get:t[e],enumerable:!0})},ie=(r,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of Le(t))!Ve.call(r,a)&&a!==e&&M(r,a,{get:()=>t[a],enumerable:!(l=Ee(t,a))||l.enumerable});return r};var A=(r,t,e)=>(e=r!=null?ge(Te(r)):{},ie(t||!r||!r.__esModule?M(e,"default",{value:r,enumerable:!0}):e,r)),Oe=r=>ie(M({},"__esModule",{value:!0}),r);var Ae={};Be(Ae,{NumberField:()=>Z,NumberFieldDecrement:()=>W,NumberFieldIncrement:()=>S,NumberFieldInput:()=>K,NumberFieldProvider:()=>Ce,useNumberFieldContext:()=>P,useRepeatingPress:()=>U});module.exports=Oe(Ae);var s=A(require("react"),1),Y=require("../utils/clamp.cjs"),ve=require("../utils/createContext.cjs"),_=require("../utils/formControl.cjs"),Re=require("../utils/hiddenInput.cjs"),Fe=require("../utils/part.cjs"),Pe=require("../utils/primitive.cjs"),xe=require("../utils/useCallbackRef.cjs"),we=require("../utils/useControllableState.cjs");var de=A(require("react"),1),ce=require("../utils/part.cjs"),x=require("../utils/primitive.cjs");var f=A(require("react"),1),ue=require("../utils/part.cjs"),F=require("../utils/primitive.cjs"),me=require("../utils/useCallbackRef.cjs");var se=require("react/jsx-runtime"),He=400,Me=80;function U(r,t){let e=f.useRef(0),l=f.useRef(0),a=(0,me.useCallbackRef)(r),o=f.useCallback(()=>{window.clearTimeout(e.current),window.clearInterval(l.current)},[]),i=f.useCallback(()=>{t||(a(),e.current=window.setTimeout(()=>{l.current=window.setInterval(()=>a(),Me)},He))},[t,a]);return f.useEffect(()=>(t&&o(),o),[t,o]),{start:i,stop:o}}var S=f.forwardRef(({label:r="Increment",...t},e)=>{let l=P("NumberFieldIncrement"),a=l.value!==null&&l.value>=l.max,o=l.disabled||t.disabled||!1,i=!o&&(a||l.readOnly),{start:d,stop:u}=U(()=>l.stepBy(1),o||i);return(0,se.jsx)(F.Primitive.button,{type:"button","aria-label":r,"aria-disabled":i?!0:void 0,disabled:o,"data-disabled":o||i?"":void 0,...t,...(0,ue.skdxPart)("number-field","increment",t.className),ref:e,onPointerDown:(0,F.composeEventHandlers)(t.onPointerDown,d),onPointerUp:(0,F.composeEventHandlers)(t.onPointerUp,u),onPointerLeave:(0,F.composeEventHandlers)(t.onPointerLeave,u),onPointerCancel:(0,F.composeEventHandlers)(t.onPointerCancel,u)})});S.displayName="NumberFieldIncrement";var fe=require("react/jsx-runtime"),W=de.forwardRef(({label:r="Decrement",...t},e)=>{let l=P("NumberFieldDecrement"),a=l.value!==null&&l.value<=l.min,o=l.disabled||t.disabled||!1,i=!o&&(a||l.readOnly),{start:d,stop:u}=U(()=>l.stepBy(-1),o||i);return(0,fe.jsx)(x.Primitive.button,{type:"button","aria-label":r,"aria-disabled":i?!0:void 0,disabled:o,"data-disabled":o||i?"":void 0,...t,...(0,ce.skdxPart)("number-field","decrement",t.className),ref:e,onPointerDown:(0,x.composeEventHandlers)(t.onPointerDown,d),onPointerUp:(0,x.composeEventHandlers)(t.onPointerUp,u),onPointerLeave:(0,x.composeEventHandlers)(t.onPointerLeave,u),onPointerCancel:(0,x.composeEventHandlers)(t.onPointerCancel,u)})});W.displayName="NumberFieldDecrement";var v=A(require("react"),1),be=require("../utils/clamp.cjs"),q=require("../utils/numberFormat.cjs"),pe=require("../utils/part.cjs"),w=require("../utils/primitive.cjs"),X=require("../utils/useCallbackRef.cjs");var Ne=require("react/jsx-runtime"),K=v.forwardRef((r,t)=>{let e=P("NumberFieldInput"),{locale:l,formatOptions:a}=e,o=(0,X.useCallbackRef)(n=>n===null?"":(0,q.formatNumberValue)(n,l,a)),i=n=>(0,q.parseNumberValue)(n,l,a),[d,u]=v.useState(()=>o(e.value)),p=v.useRef(!1),I=n=>e.clampBehavior==="never"?n:(0,be.clamp)(n,e.min,e.max),h=(0,X.useCallbackRef)((n,m)=>{let c=i(n);return Number.isNaN(c)?m===null:I(c)===m});v.useEffect(()=>{u(n=>h(n,e.value)?n:o(e.value))},[e.value,h,o]);let k=(l||a)&&e.value!==null?o(e.value):void 0,g=()=>{if(!p.current)return;if(p.current=!1,d.trim()===""){e.commitValue(null),u("");return}let n=i(d);Number.isNaN(n)?(e.commitValue(e.value),u(o(e.value))):(e.commitValue(n),u(o(I(n))))},T=e.invalid||e.outOfRange;return(0,Ne.jsx)(w.Primitive.input,{type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":e.value??void 0,"aria-valuetext":k,"aria-valuemin":Number.isFinite(e.min)?e.min:void 0,"aria-valuemax":Number.isFinite(e.max)?e.max:void 0,disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":T?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"aria-required":e.required?!0:void 0,"data-invalid":T?"":void 0,"data-readonly":e.readOnly?"":void 0,...r,value:d,...(0,pe.skdxPart)("number-field","input",r.className),ref:t,onChange:(0,w.composeEventHandlers)(r.onChange,n=>{let m=n.target.value;if(u(m),p.current=!0,m.trim()===""){e.setValue(null);return}let c=i(m);Number.isNaN(c)||e.setValue(c)}),onBlur:(0,w.composeEventHandlers)(r.onBlur,g),onWheel:(0,w.composeEventHandlers)(r.onWheel,n=>{!e.allowWheel||e.readOnly||n.currentTarget.ownerDocument.activeElement===n.currentTarget&&(n.preventDefault(),p.current=!1,e.stepBy(n.deltaY<0?1:-1))}),onKeyDown:(0,w.composeEventHandlers)(r.onKeyDown,n=>{if(e.disabled||e.readOnly)return;let{min:m,max:c,commitValue:V,stepBy:C}=e;if(n.key==="Enter"){g();return}let N=z=>{n.preventDefault(),p.current=!1,z()},E=n.shiftKey?10:1;n.key==="ArrowUp"?N(()=>C(E)):n.key==="ArrowDown"?N(()=>C(-E)):n.key==="PageUp"?N(()=>C(10)):n.key==="PageDown"?N(()=>C(-10)):n.key==="Home"&&Number.isFinite(m)?N(()=>V(m)):n.key==="End"&&Number.isFinite(c)&&N(()=>V(c))})})});K.displayName="NumberFieldInput";var R=require("react/jsx-runtime"),ye=({showControls:r,incrementLabel:t,decrementLabel:e})=>(0,R.jsxs)(R.Fragment,{children:[r?(0,R.jsx)(W,{label:e}):null,(0,R.jsx)(K,{}),r?(0,R.jsx)(S,{label:t}):null]});var D=require("react/jsx-runtime"),[Ce,P]=(0,ve.createSafeContext)("NumberField"),Z=s.forwardRef(({value:r,defaultValue:t=null,onValueChange:e,onValueCommit:l,min:a=-1/0,max:o=1/0,step:i=1,disabled:d=!1,invalid:u=!1,readOnly:p=!1,required:I=!1,formatOptions:h,locale:k,clampBehavior:g="blur",allowWheel:T=!1,form:n,name:m,showControls:c=!0,incrementLabel:V="Increment",decrementLabel:C="Decrement",children:N,...E},z)=>{let $=!!(k||h),De=s.useMemo(()=>$?new Intl.NumberFormat(k).resolvedOptions().locale:void 0,[$,k]),G=g==="blur",B=s.useCallback(b=>b===null||!G?b:(0,Y.clamp)(b,a,o),[G,a,o]),J=s.useRef(null),j=s.useRef(null),[y=null,O]=(0,we.useControllableState)({prop:r,defaultProp:t===null||!G?t:(0,Y.clamp)(t,a,o),onChange:e}),ee=(0,xe.useCallbackRef)(l??(()=>{})),te=s.useCallback(b=>O(B(b)),[O,B]),Q=s.useCallback(b=>{let L=B(b);O(L),ee(L)},[O,B,ee]),Ie=s.useCallback(b=>{let L=y??0,ne=ke=>{let H=String(ke);if(H.includes("e")||H.includes("E"))return null;let ae=H.indexOf(".");return ae===-1?0:H.length-ae-1},re=L+b*i,oe=ne(L),le=ne(i),he=oe===null||le===null?re:Number(re.toFixed(Math.min(Math.max(oe,le),15)));Q((0,Y.clamp)(he,a,o))},[y,i,Q,a,o]);return(0,_.useFormValidityHandle)(z,J,j),(0,_.useFormReset)(J,()=>te(t),n),(0,D.jsxs)(Ce,{value:y,min:a,max:o,step:i,disabled:d,invalid:u,readOnly:p,required:I,formatOptions:h,locale:De,clampBehavior:g,allowWheel:T,outOfRange:y!==null&&(y<a||y>o),setValue:te,commitValue:Q,stepBy:Ie,children:[(0,D.jsx)(Pe.Primitive.div,{"data-disabled":d?"":void 0,"data-invalid":u?"":void 0,"data-readonly":p?"":void 0,...E,...(0,Fe.skdxPart)("number-field","root",E.className),ref:J,children:N??(0,D.jsx)(ye,{showControls:c,incrementLabel:V,decrementLabel:C})}),m&&(0,D.jsx)(Re.HiddenInput,{ref:j,type:"text",name:m,value:y===null?"":String(y),required:I,disabled:d,form:n})]})});Z.displayName="NumberField";0&&(module.exports={NumberField,NumberFieldDecrement,NumberFieldIncrement,NumberFieldInput,NumberFieldProvider,useNumberFieldContext,useRepeatingPress});
+'use client';
+"use strict";var Ce=Object.create;var H=Object.defineProperty;var we=Object.getOwnPropertyDescriptor;var Ve=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,he=Object.prototype.hasOwnProperty;var De=(n,t)=>{for(var e in t)H(n,e,{get:t[e],enumerable:!0})},Z=(n,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of Ve(t))!he.call(n,l)&&l!==e&&H(n,l,{get:()=>t[l],enumerable:!(a=we(t,l))||a.enumerable});return n};var X=(n,t,e)=>(e=n!=null?Ce(ge(n)):{},Z(t||!n||!n.__esModule?H(e,"default",{value:n,enumerable:!0}):e,n)),Ie=n=>Z(H({},"__esModule",{value:!0}),n);var Ae={};De(Ae,{NumberField:()=>Y,NumberFieldDecrement:()=>S,NumberFieldIncrement:()=>M,NumberFieldInput:()=>W,NumberFieldProvider:()=>be,useNumberFieldContext:()=>D,useRepeatingPress:()=>A});module.exports=Ie(Ae);var p=X(require("react"),1),ie=require("../utils/appearance.cjs"),q=require("../utils/clamp.cjs"),ue=require("../utils/createContext.cjs"),K=require("../utils/formControl.cjs"),se=require("../utils/hiddenInput.cjs"),me=require("../utils/part.cjs"),de=require("../utils/primitive.cjs"),ce=require("../utils/useCallbackRef.cjs"),fe=require("../utils/useControllableState.cjs");var te=require("../utils/part.cjs"),C=require("../utils/primitive.cjs");var h=X(require("react"),1),$=require("../utils/part.cjs"),k=require("../utils/primitive.cjs"),j=require("../utils/useCallbackRef.cjs");var ee=require("react/jsx-runtime"),Le=400,Be=80;function A(n,t){let e=h.useRef(0),a=h.useRef(0),l=(0,j.useCallbackRef)(n),o=h.useCallback(()=>{window.clearTimeout(e.current),window.clearInterval(a.current)},[]),u=()=>{t||(l(),e.current=window.setTimeout(()=>{a.current=window.setInterval(()=>l(),Be)},Le))};return h.useEffect(()=>(t&&o(),o),[t,o]),{press:()=>{t||l()},start:u,stop:o}}var M=({label:n="Increment",ref:t,...e})=>{let a=D("NumberFieldIncrement"),l=a.value!==null&&a.value>=a.max,o=a.disabled||e.disabled||!1,u=!o&&(l||a.readOnly),{press:s,start:m,stop:i}=A(()=>a.stepBy(1),o||u);return(0,ee.jsx)(k.Primitive.button,{type:"button","aria-label":n,"aria-disabled":u?!0:void 0,disabled:o,"data-disabled":o||u?"":void 0,...e,...(0,$.skdxPart)("number-field","increment",e.className),ref:t,onClick:(0,k.composeEventHandlers)(e.onClick,f=>{f.detail===0&&s()}),onPointerDown:(0,k.composeEventHandlers)(e.onPointerDown,m),onPointerUp:(0,k.composeEventHandlers)(e.onPointerUp,i),onPointerLeave:(0,k.composeEventHandlers)(e.onPointerLeave,i),onPointerCancel:(0,k.composeEventHandlers)(e.onPointerCancel,i)})};M.displayName="NumberFieldIncrement";var ne=require("react/jsx-runtime"),S=({label:n="Decrement",ref:t,...e})=>{let a=D("NumberFieldDecrement"),l=a.value!==null&&a.value<=a.min,o=a.disabled||e.disabled||!1,u=!o&&(l||a.readOnly),{press:s,start:m,stop:i}=A(()=>a.stepBy(-1),o||u);return(0,ne.jsx)(C.Primitive.button,{type:"button","aria-label":n,"aria-disabled":u?!0:void 0,disabled:o,"data-disabled":o||u?"":void 0,...e,...(0,te.skdxPart)("number-field","decrement",e.className),ref:t,onClick:(0,C.composeEventHandlers)(e.onClick,f=>{f.detail===0&&s()}),onPointerDown:(0,C.composeEventHandlers)(e.onPointerDown,m),onPointerUp:(0,C.composeEventHandlers)(e.onPointerUp,i),onPointerLeave:(0,C.composeEventHandlers)(e.onPointerLeave,i),onPointerCancel:(0,C.composeEventHandlers)(e.onPointerCancel,i)})};S.displayName="NumberFieldDecrement";var E=X(require("react"),1),re=require("../utils/clamp.cjs"),U=require("../utils/numberFormat.cjs"),ae=require("../utils/part.cjs"),I=require("../utils/primitive.cjs");var oe=require("react/jsx-runtime"),W=({ref:n,...t})=>{let e=D("NumberFieldInput"),{locale:a,formatOptions:l}=e,o=r=>r===null?"":(0,U.formatNumberValue)(r,a,l),u=r=>(0,U.parseNumberValue)(r,a,l),[s,m]=E.useState(()=>o(e.value)),i=E.useRef(!1),f=r=>e.clampBehavior==="never"?r:(0,re.clamp)(r,e.min,e.max),y=(r,c)=>{let b=u(r);return Number.isNaN(b)?c===null:f(b)===c},[P,B]=E.useState(e.value);P!==e.value&&(B(e.value),y(s,e.value)||m(o(e.value)));let V=(a||l)&&e.value!==null?o(e.value):void 0,g=()=>{if(!i.current)return;if(i.current=!1,s.trim()===""){e.commitValue(null),m("");return}let r=u(s);Number.isNaN(r)?(e.commitValue(e.value),m(o(e.value))):(e.commitValue(r),m(o(f(r))))},d=e.invalid||e.outOfRange;return(0,oe.jsx)(I.Primitive.input,{type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":e.value??void 0,"aria-valuetext":V,"aria-valuemin":Number.isFinite(e.min)?e.min:void 0,"aria-valuemax":Number.isFinite(e.max)?e.max:void 0,disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":d?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"aria-required":e.required?!0:void 0,"data-invalid":d?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,value:s,...(0,ae.skdxPart)("number-field","input",t.className),ref:n,onChange:(0,I.useComposedEventHandlers)(t.onChange,r=>{let c=r.target.value;if(m(c),i.current=!0,c.trim()===""){e.setValue(null);return}let b=u(c);Number.isNaN(b)||e.setValue(b)}),onBlur:(0,I.useComposedEventHandlers)(t.onBlur,g),onWheel:(0,I.useComposedEventHandlers)(t.onWheel,r=>{!e.allowWheel||e.readOnly||r.currentTarget.ownerDocument.activeElement===r.currentTarget&&(r.preventDefault(),i.current=!1,e.stepBy(r.deltaY<0?1:-1))}),onKeyDown:(0,I.useComposedEventHandlers)(t.onKeyDown,r=>{if(e.disabled||e.readOnly)return;let{min:c,max:b,commitValue:x,stepBy:v}=e;if(r.key==="Enter"){g();return}let N=F=>{r.preventDefault(),i.current=!1,F()},R=r.shiftKey?10:1;r.key==="ArrowUp"?N(()=>v(R)):r.key==="ArrowDown"?N(()=>v(-R)):r.key==="PageUp"?N(()=>v(10)):r.key==="PageDown"?N(()=>v(-10)):r.key==="Home"&&Number.isFinite(c)?N(()=>x(c)):r.key==="End"&&Number.isFinite(b)&&N(()=>x(b))})})};W.displayName="NumberFieldInput";var w=require("react/jsx-runtime"),le=({showControls:n,incrementLabel:t,decrementLabel:e,ariaLabel:a,ariaLabelledBy:l})=>(0,w.jsxs)(w.Fragment,{children:[n?(0,w.jsx)(S,{label:e,children:"\u2212"}):null,(0,w.jsx)(W,{"aria-label":a,"aria-labelledby":l}),n?(0,w.jsx)(M,{label:t,children:"+"}):null]});var L=require("react/jsx-runtime"),[be,D]=(0,ue.createSafeContext)("NumberField");function Ee(n,t,e){return{"data-disabled":n?"":void 0,"data-invalid":t?"":void 0,"data-readonly":e?"":void 0}}function Oe(n,t,e){return n!==null&&(n<t||n>e)}function Te(n){return n===null?"":String(n)}function He({value:n,defaultValue:t=null,onValueChange:e,onValueCommit:a,min:l=-1/0,max:o=1/0,step:u=1,clampBehavior:s="blur"}){let m=s==="blur",i=p.useCallback(d=>d===null||!m?d:(0,q.clamp)(d,l,o),[m,l,o]),[f=null,y]=(0,fe.useControllableState)({prop:n,defaultProp:t===null||!m?t:(0,q.clamp)(t,l,o),onChange:e}),P=(0,ce.useCallbackRef)(a??(()=>{})),B=p.useCallback(d=>y(i(d)),[y,i]),V=p.useCallback(d=>{let r=i(d);y(r),P(r)},[y,i,P]),g=p.useCallback(d=>{let r=f??0,c=R=>{let F=String(R);if(F.includes("e")||F.includes("E"))return null;let O=F.indexOf(".");return O===-1?0:F.length-O-1},b=r+d*u,x=c(r),v=c(u),N=x===null||v===null?b:Number(b.toFixed(Math.min(Math.max(x,v),15)));V((0,q.clamp)(N,l,o))},[f,u,V,l,o]);return{value:f,setValue:B,commitValue:V,stepBy:g,min:l,max:o,step:u,clampBehavior:s}}var Y=({value:n,defaultValue:t,onValueChange:e,onValueCommit:a,min:l,max:o,step:u,disabled:s=!1,invalid:m=!1,readOnly:i=!1,required:f=!1,formatOptions:y,locale:P,clampBehavior:B,allowWheel:V=!1,form:g,name:d,showControls:r=!0,incrementLabel:c="Increment",decrementLabel:b="Decrement",children:x,ref:v,size:N,...R})=>{let F=!!(P||y),O=p.useMemo(()=>F?new Intl.NumberFormat(P).resolvedOptions().locale:void 0,[F,P]),J=p.useRef(null),_=p.useRef(null),{value:T,setValue:z,commitValue:pe,stepBy:Ne,min:G,max:Q,step:ye,clampBehavior:ve}=He({value:n,defaultValue:t,onValueChange:e,onValueCommit:a,min:l,max:o,step:u,clampBehavior:B});(0,K.useFormValidityHandle)(v,J,_);let Re=p.useRef(T);(0,K.useFormReset)(J,()=>z(t??Re.current),g);let Fe=x==null,{"aria-label":Pe,"aria-labelledby":xe,...ke}=R;return(0,L.jsxs)(be,{value:T,min:G,max:Q,step:ye,disabled:s,invalid:m,readOnly:i,required:f,formatOptions:y,locale:O,clampBehavior:ve,allowWheel:V,outOfRange:Oe(T,G,Q),setValue:z,commitValue:pe,stepBy:Ne,children:[(0,L.jsx)(de.Primitive.div,{...Ee(s,m,i),...Fe?ke:R,...(0,ie.appearanceAttrs)({size:N},R),...(0,me.skdxPart)("number-field","root",R.className),ref:J,children:x??(0,L.jsx)(le,{showControls:r,incrementLabel:c,decrementLabel:b,ariaLabel:Pe,ariaLabelledBy:xe})}),d?(0,L.jsx)(se.HiddenInput,{ref:_,type:"text",name:d,value:Te(T),required:f,disabled:s,form:g}):null]})};Y.displayName="NumberField";0&&(module.exports={NumberField,NumberFieldDecrement,NumberFieldIncrement,NumberFieldInput,NumberFieldProvider,useNumberFieldContext,useRepeatingPress});

package/dist/number-field/NumberField.d.cts

@@ -1,21 +1,20 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.cjs';
 import type { NumberFieldContextValue, NumberFieldProps } from './types.cjs';
-export declare const NumberFieldProvider: {
-    (props: NumberFieldContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useNumberFieldContext: (consumerName: string) => NumberFieldContextValue;
+export declare const NumberFieldProvider: React.FC<NumberFieldContextValue & {
+    children: React.ReactNode;
+}>, useNumberFieldContext: (consumerName: string) => NumberFieldContextValue;
 /**
- * Root numeric stepper: owns the clamped value and hands it to child controls
- * via context. Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- * `onValueChange` fires per keystroke; `onValueCommit` once settled (blur, Enter, step).
- * With `name`, renders a hidden native input for form submission.
- * Without `children`, derives anatomy with input and increment / decrement buttons.
+ * Numeric stepper root that clamps its value and renders an input with increment and decrement controls.
  *
  * @example
  * ```tsx
  * <NumberField defaultValue={1} min={0} max={10} />
  * ```
  */
-export declare const NumberField: React.ForwardRefExoticComponent<Omit<NumberFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NumberField: {
+    ({ value: valueProp, defaultValue, onValueChange, onValueCommit, min: minProp, max: maxProp, step: stepProp, disabled, invalid, readOnly, required, formatOptions, locale, clampBehavior: clampBehaviorProp, allowWheel, form, name, showControls, incrementLabel, decrementLabel, children, ref: forwardedRef, size, ...props }: Omit<NumberFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/number-field/NumberField.d.ts

@@ -1,21 +1,20 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.js';
 import type { NumberFieldContextValue, NumberFieldProps } from './types.js';
-export declare const NumberFieldProvider: {
-    (props: NumberFieldContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useNumberFieldContext: (consumerName: string) => NumberFieldContextValue;
+export declare const NumberFieldProvider: React.FC<NumberFieldContextValue & {
+    children: React.ReactNode;
+}>, useNumberFieldContext: (consumerName: string) => NumberFieldContextValue;
 /**
- * Root numeric stepper: owns the clamped value and hands it to child controls
- * via context. Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- * `onValueChange` fires per keystroke; `onValueCommit` once settled (blur, Enter, step).
- * With `name`, renders a hidden native input for form submission.
- * Without `children`, derives anatomy with input and increment / decrement buttons.
+ * Numeric stepper root that clamps its value and renders an input with increment and decrement controls.
  *
  * @example
  * ```tsx
  * <NumberField defaultValue={1} min={0} max={10} />
  * ```
  */
-export declare const NumberField: React.ForwardRefExoticComponent<Omit<NumberFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NumberField: {
+    ({ value: valueProp, defaultValue, onValueChange, onValueCommit, min: minProp, max: maxProp, step: stepProp, disabled, invalid, readOnly, required, formatOptions, locale, clampBehavior: clampBehaviorProp, allowWheel, form, name, showControls, incrementLabel, decrementLabel, children, ref: forwardedRef, size, ...props }: Omit<NumberFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/number-field/NumberField.js

@@ -1 +1,2 @@
-import*as s from"react";import{clamp as Y}from"../utils/clamp.js";import{createSafeContext as Ie}from"../utils/createContext.js";import{useFormReset as he,useFormValidityHandle as ke}from"../utils/formControl.js";import{HiddenInput as ge}from"../utils/hiddenInput.js";import{skdxPart as Ee}from"../utils/part.js";import{Primitive as Le}from"../utils/primitive.js";import{useCallbackRef as Te}from"../utils/useCallbackRef.js";import{useControllableState as Ve}from"../utils/useControllableState.js";import*as te from"react";import{skdxPart as pe}from"../utils/part.js";import{composeEventHandlers as V,Primitive as Ne}from"../utils/primitive.js";import*as f from"react";import{skdxPart as me}from"../utils/part.js";import{composeEventHandlers as T,Primitive as se}from"../utils/primitive.js";import{useCallbackRef as de}from"../utils/useCallbackRef.js";import{jsx as be}from"react/jsx-runtime";var ce=400,fe=80;function U(i,n){let e=f.useRef(0),o=f.useRef(0),l=de(i),r=f.useCallback(()=>{window.clearTimeout(e.current),window.clearInterval(o.current)},[]),a=f.useCallback(()=>{n||(l(),e.current=window.setTimeout(()=>{o.current=window.setInterval(()=>l(),fe)},ce))},[n,l]);return f.useEffect(()=>(n&&r(),r),[n,r]),{start:a,stop:r}}var S=f.forwardRef(({label:i="Increment",...n},e)=>{let o=F("NumberFieldIncrement"),l=o.value!==null&&o.value>=o.max,r=o.disabled||n.disabled||!1,a=!r&&(l||o.readOnly),{start:d,stop:u}=U(()=>o.stepBy(1),r||a);return be(se.button,{type:"button","aria-label":i,"aria-disabled":a?!0:void 0,disabled:r,"data-disabled":r||a?"":void 0,...n,...me("number-field","increment",n.className),ref:e,onPointerDown:T(n.onPointerDown,d),onPointerUp:T(n.onPointerUp,u),onPointerLeave:T(n.onPointerLeave,u),onPointerCancel:T(n.onPointerCancel,u)})});S.displayName="NumberFieldIncrement";import{jsx as ye}from"react/jsx-runtime";var W=te.forwardRef(({label:i="Decrement",...n},e)=>{let o=F("NumberFieldDecrement"),l=o.value!==null&&o.value<=o.min,r=o.disabled||n.disabled||!1,a=!r&&(l||o.readOnly),{start:d,stop:u}=U(()=>o.stepBy(-1),r||a);return ye(Ne.button,{type:"button","aria-label":i,"aria-disabled":a?!0:void 0,disabled:r,"data-disabled":r||a?"":void 0,...n,...pe("number-field","decrement",n.className),ref:e,onPointerDown:V(n.onPointerDown,d),onPointerUp:V(n.onPointerUp,u),onPointerLeave:V(n.onPointerLeave,u),onPointerCancel:V(n.onPointerCancel,u)})});W.displayName="NumberFieldDecrement";import*as v from"react";import{clamp as ve}from"../utils/clamp.js";import{formatNumberValue as Re,parseNumberValue as Fe}from"../utils/numberFormat.js";import{skdxPart as Pe}from"../utils/part.js";import{composeEventHandlers as B,Primitive as xe}from"../utils/primitive.js";import{useCallbackRef as ne}from"../utils/useCallbackRef.js";import{jsx as we}from"react/jsx-runtime";var q=v.forwardRef((i,n)=>{let e=F("NumberFieldInput"),{locale:o,formatOptions:l}=e,r=ne(t=>t===null?"":Re(t,o,l)),a=t=>Fe(t,o,l),[d,u]=v.useState(()=>r(e.value)),p=v.useRef(!1),P=t=>e.clampBehavior==="never"?t:ve(t,e.min,e.max),x=ne((t,m)=>{let c=a(t);return Number.isNaN(c)?m===null:P(c)===m});v.useEffect(()=>{u(t=>x(t,e.value)?t:r(e.value))},[e.value,x,r]);let w=(o||l)&&e.value!==null?r(e.value):void 0,C=()=>{if(!p.current)return;if(p.current=!1,d.trim()===""){e.commitValue(null),u("");return}let t=a(d);Number.isNaN(t)?(e.commitValue(e.value),u(r(e.value))):(e.commitValue(t),u(r(P(t))))},h=e.invalid||e.outOfRange;return we(xe.input,{type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":e.value??void 0,"aria-valuetext":w,"aria-valuemin":Number.isFinite(e.min)?e.min:void 0,"aria-valuemax":Number.isFinite(e.max)?e.max:void 0,disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":h?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"aria-required":e.required?!0:void 0,"data-invalid":h?"":void 0,"data-readonly":e.readOnly?"":void 0,...i,value:d,...Pe("number-field","input",i.className),ref:n,onChange:B(i.onChange,t=>{let m=t.target.value;if(u(m),p.current=!0,m.trim()===""){e.setValue(null);return}let c=a(m);Number.isNaN(c)||e.setValue(c)}),onBlur:B(i.onBlur,C),onWheel:B(i.onWheel,t=>{!e.allowWheel||e.readOnly||t.currentTarget.ownerDocument.activeElement===t.currentTarget&&(t.preventDefault(),p.current=!1,e.stepBy(t.deltaY<0?1:-1))}),onKeyDown:B(i.onKeyDown,t=>{if(e.disabled||e.readOnly)return;let{min:m,max:c,commitValue:k,stepBy:R}=e;if(t.key==="Enter"){C();return}let N=O=>{t.preventDefault(),p.current=!1,O()},D=t.shiftKey?10:1;t.key==="ArrowUp"?N(()=>R(D)):t.key==="ArrowDown"?N(()=>R(-D)):t.key==="PageUp"?N(()=>R(10)):t.key==="PageDown"?N(()=>R(-10)):t.key==="Home"&&Number.isFinite(m)?N(()=>k(m)):t.key==="End"&&Number.isFinite(c)&&N(()=>k(c))})})});q.displayName="NumberFieldInput";import{Fragment as Ce,jsx as K,jsxs as De}from"react/jsx-runtime";var re=({showControls:i,incrementLabel:n,decrementLabel:e})=>De(Ce,{children:[i?K(W,{label:e}):null,K(q,{}),i?K(S,{label:n}):null]});import{jsx as _,jsxs as Oe}from"react/jsx-runtime";var[Be,F]=Ie("NumberField"),oe=s.forwardRef(({value:i,defaultValue:n=null,onValueChange:e,onValueCommit:o,min:l=-1/0,max:r=1/0,step:a=1,disabled:d=!1,invalid:u=!1,readOnly:p=!1,required:P=!1,formatOptions:x,locale:w,clampBehavior:C="blur",allowWheel:h=!1,form:t,name:m,showControls:c=!0,incrementLabel:k="Increment",decrementLabel:R="Decrement",children:N,...D},O)=>{let z=!!(w||x),le=s.useMemo(()=>z?new Intl.NumberFormat(w).resolvedOptions().locale:void 0,[z,w]),H=C==="blur",g=s.useCallback(b=>b===null||!H?b:Y(b,l,r),[H,l,r]),M=s.useRef(null),G=s.useRef(null),[y=null,E]=Ve({prop:i,defaultProp:n===null||!H?n:Y(n,l,r),onChange:e}),J=Te(o??(()=>{})),Q=s.useCallback(b=>E(g(b)),[E,g]),A=s.useCallback(b=>{let I=g(b);E(I),J(I)},[E,g,J]),ae=s.useCallback(b=>{let I=y??0,X=ue=>{let L=String(ue);if(L.includes("e")||L.includes("E"))return null;let ee=L.indexOf(".");return ee===-1?0:L.length-ee-1},Z=I+b*a,$=X(I),j=X(a),ie=$===null||j===null?Z:Number(Z.toFixed(Math.min(Math.max($,j),15)));A(Y(ie,l,r))},[y,a,A,l,r]);return ke(O,M,G),he(M,()=>Q(n),t),Oe(Be,{value:y,min:l,max:r,step:a,disabled:d,invalid:u,readOnly:p,required:P,formatOptions:x,locale:le,clampBehavior:C,allowWheel:h,outOfRange:y!==null&&(y<l||y>r),setValue:Q,commitValue:A,stepBy:ae,children:[_(Le.div,{"data-disabled":d?"":void 0,"data-invalid":u?"":void 0,"data-readonly":p?"":void 0,...D,...Ee("number-field","root",D.className),ref:M,children:N??_(re,{showControls:c,incrementLabel:k,decrementLabel:R})}),m&&_(ge,{ref:G,type:"text",name:m,value:y===null?"":String(y),required:P,disabled:d,form:t})]})});oe.displayName="NumberField";export{oe as NumberField,W as NumberFieldDecrement,S as NumberFieldIncrement,q as NumberFieldInput,Be as NumberFieldProvider,F as useNumberFieldContext,U as useRepeatingPress};
+'use client';
+import*as p from"react";import{appearanceAttrs as Fe}from"../utils/appearance.js";import{clamp as U}from"../utils/clamp.js";import{createSafeContext as Pe}from"../utils/createContext.js";import{useFormReset as xe,useFormValidityHandle as ke}from"../utils/formControl.js";import{HiddenInput as Ce}from"../utils/hiddenInput.js";import{skdxPart as we}from"../utils/part.js";import{Primitive as Ve}from"../utils/primitive.js";import{useCallbackRef as ge}from"../utils/useCallbackRef.js";import{useControllableState as he}from"../utils/useControllableState.js";import{skdxPart as se}from"../utils/part.js";import{composeEventHandlers as D,Primitive as me}from"../utils/primitive.js";import*as w from"react";import{skdxPart as re}from"../utils/part.js";import{composeEventHandlers as h,Primitive as ae}from"../utils/primitive.js";import{useCallbackRef as oe}from"../utils/useCallbackRef.js";import{jsx as ue}from"react/jsx-runtime";var le=400,ie=80;function T(o,r){let e=w.useRef(0),a=w.useRef(0),l=oe(o),n=w.useCallback(()=>{window.clearTimeout(e.current),window.clearInterval(a.current)},[]),u=()=>{r||(l(),e.current=window.setTimeout(()=>{a.current=window.setInterval(()=>l(),ie)},le))};return w.useEffect(()=>(r&&n(),n),[r,n]),{press:()=>{r||l()},start:u,stop:n}}var H=({label:o="Increment",ref:r,...e})=>{let a=V("NumberFieldIncrement"),l=a.value!==null&&a.value>=a.max,n=a.disabled||e.disabled||!1,u=!n&&(l||a.readOnly),{press:s,start:m,stop:i}=T(()=>a.stepBy(1),n||u);return ue(ae.button,{type:"button","aria-label":o,"aria-disabled":u?!0:void 0,disabled:n,"data-disabled":n||u?"":void 0,...e,...re("number-field","increment",e.className),ref:r,onClick:h(e.onClick,f=>{f.detail===0&&s()}),onPointerDown:h(e.onPointerDown,m),onPointerUp:h(e.onPointerUp,i),onPointerLeave:h(e.onPointerLeave,i),onPointerCancel:h(e.onPointerCancel,i)})};H.displayName="NumberFieldIncrement";import{jsx as de}from"react/jsx-runtime";var A=({label:o="Decrement",ref:r,...e})=>{let a=V("NumberFieldDecrement"),l=a.value!==null&&a.value<=a.min,n=a.disabled||e.disabled||!1,u=!n&&(l||a.readOnly),{press:s,start:m,stop:i}=T(()=>a.stepBy(-1),n||u);return de(me.button,{type:"button","aria-label":o,"aria-disabled":u?!0:void 0,disabled:n,"data-disabled":n||u?"":void 0,...e,...se("number-field","decrement",e.className),ref:r,onClick:D(e.onClick,f=>{f.detail===0&&s()}),onPointerDown:D(e.onPointerDown,m),onPointerUp:D(e.onPointerUp,i),onPointerLeave:D(e.onPointerLeave,i),onPointerCancel:D(e.onPointerCancel,i)})};A.displayName="NumberFieldDecrement";import*as I from"react";import{clamp as ce}from"../utils/clamp.js";import{formatNumberValue as fe,parseNumberValue as be}from"../utils/numberFormat.js";import{skdxPart as pe}from"../utils/part.js";import{Primitive as Ne,useComposedEventHandlers as E}from"../utils/primitive.js";import{jsx as ye}from"react/jsx-runtime";var M=({ref:o,...r})=>{let e=V("NumberFieldInput"),{locale:a,formatOptions:l}=e,n=t=>t===null?"":fe(t,a,l),u=t=>be(t,a,l),[s,m]=I.useState(()=>n(e.value)),i=I.useRef(!1),f=t=>e.clampBehavior==="never"?t:ce(t,e.min,e.max),y=(t,c)=>{let b=u(t);return Number.isNaN(b)?c===null:f(b)===c},[P,g]=I.useState(e.value);P!==e.value&&(g(e.value),y(s,e.value)||m(n(e.value)));let k=(a||l)&&e.value!==null?n(e.value):void 0,C=()=>{if(!i.current)return;if(i.current=!1,s.trim()===""){e.commitValue(null),m("");return}let t=u(s);Number.isNaN(t)?(e.commitValue(e.value),m(n(e.value))):(e.commitValue(t),m(n(f(t))))},d=e.invalid||e.outOfRange;return ye(Ne.input,{type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":e.value??void 0,"aria-valuetext":k,"aria-valuemin":Number.isFinite(e.min)?e.min:void 0,"aria-valuemax":Number.isFinite(e.max)?e.max:void 0,disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":d?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"aria-required":e.required?!0:void 0,"data-invalid":d?"":void 0,"data-readonly":e.readOnly?"":void 0,...r,value:s,...pe("number-field","input",r.className),ref:o,onChange:E(r.onChange,t=>{let c=t.target.value;if(m(c),i.current=!0,c.trim()===""){e.setValue(null);return}let b=u(c);Number.isNaN(b)||e.setValue(b)}),onBlur:E(r.onBlur,C),onWheel:E(r.onWheel,t=>{!e.allowWheel||e.readOnly||t.currentTarget.ownerDocument.activeElement===t.currentTarget&&(t.preventDefault(),i.current=!1,e.stepBy(t.deltaY<0?1:-1))}),onKeyDown:E(r.onKeyDown,t=>{if(e.disabled||e.readOnly)return;let{min:c,max:b,commitValue:x,stepBy:v}=e;if(t.key==="Enter"){C();return}let N=F=>{t.preventDefault(),i.current=!1,F()},R=t.shiftKey?10:1;t.key==="ArrowUp"?N(()=>v(R)):t.key==="ArrowDown"?N(()=>v(-R)):t.key==="PageUp"?N(()=>v(10)):t.key==="PageDown"?N(()=>v(-10)):t.key==="Home"&&Number.isFinite(c)?N(()=>x(c)):t.key==="End"&&Number.isFinite(b)&&N(()=>x(b))})})};M.displayName="NumberFieldInput";import{Fragment as ve,jsx as S,jsxs as Re}from"react/jsx-runtime";var Y=({showControls:o,incrementLabel:r,decrementLabel:e,ariaLabel:a,ariaLabelledBy:l})=>Re(ve,{children:[o?S(A,{label:e,children:"\u2212"}):null,S(M,{"aria-label":a,"aria-labelledby":l}),o?S(H,{label:r,children:"+"}):null]});import{jsx as W,jsxs as Oe}from"react/jsx-runtime";var[De,V]=Pe("NumberField");function Ie(o,r,e){return{"data-disabled":o?"":void 0,"data-invalid":r?"":void 0,"data-readonly":e?"":void 0}}function Le(o,r,e){return o!==null&&(o<r||o>e)}function Be(o){return o===null?"":String(o)}function Ee({value:o,defaultValue:r=null,onValueChange:e,onValueCommit:a,min:l=-1/0,max:n=1/0,step:u=1,clampBehavior:s="blur"}){let m=s==="blur",i=p.useCallback(d=>d===null||!m?d:U(d,l,n),[m,l,n]),[f=null,y]=he({prop:o,defaultProp:r===null||!m?r:U(r,l,n),onChange:e}),P=ge(a??(()=>{})),g=p.useCallback(d=>y(i(d)),[y,i]),k=p.useCallback(d=>{let t=i(d);y(t),P(t)},[y,i,P]),C=p.useCallback(d=>{let t=f??0,c=R=>{let F=String(R);if(F.includes("e")||F.includes("E"))return null;let L=F.indexOf(".");return L===-1?0:F.length-L-1},b=t+d*u,x=c(t),v=c(u),N=x===null||v===null?b:Number(b.toFixed(Math.min(Math.max(x,v),15)));k(U(N,l,n))},[f,u,k,l,n]);return{value:f,setValue:g,commitValue:k,stepBy:C,min:l,max:n,step:u,clampBehavior:s}}var _=({value:o,defaultValue:r,onValueChange:e,onValueCommit:a,min:l,max:n,step:u,disabled:s=!1,invalid:m=!1,readOnly:i=!1,required:f=!1,formatOptions:y,locale:P,clampBehavior:g,allowWheel:k=!1,form:C,name:d,showControls:t=!0,incrementLabel:c="Increment",decrementLabel:b="Decrement",children:x,ref:v,size:N,...R})=>{let F=!!(P||y),L=p.useMemo(()=>F?new Intl.NumberFormat(P).resolvedOptions().locale:void 0,[F,P]),O=p.useRef(null),q=p.useRef(null),{value:B,setValue:K,commitValue:z,stepBy:G,min:J,max:X,step:Q,clampBehavior:Z}=Ee({value:o,defaultValue:r,onValueChange:e,onValueCommit:a,min:l,max:n,step:u,clampBehavior:g});ke(v,O,q);let $=p.useRef(B);xe(O,()=>K(r??$.current),C);let j=x==null,{"aria-label":ee,"aria-labelledby":te,...ne}=R;return Oe(De,{value:B,min:J,max:X,step:Q,disabled:s,invalid:m,readOnly:i,required:f,formatOptions:y,locale:L,clampBehavior:Z,allowWheel:k,outOfRange:Le(B,J,X),setValue:K,commitValue:z,stepBy:G,children:[W(Ve.div,{...Ie(s,m,i),...j?ne:R,...Fe({size:N},R),...we("number-field","root",R.className),ref:O,children:x??W(Y,{showControls:t,incrementLabel:c,decrementLabel:b,ariaLabel:ee,ariaLabelledBy:te})}),d?W(Ce,{ref:q,type:"text",name:d,value:Be(B),required:f,disabled:s,form:C}):null]})};_.displayName="NumberField";export{_ as NumberField,A as NumberFieldDecrement,H as NumberFieldIncrement,M as NumberFieldInput,De as NumberFieldProvider,V as useNumberFieldContext,T as useRepeatingPress};

package/dist/number-field/NumberFieldAnatomy.d.cts

@@ -1,12 +1,9 @@
-/**
- * The anatomy a {@link NumberField} draws when given no children: a derived
- * `NumberFieldDecrement`, the `NumberFieldInput`, then a derived `NumberFieldIncrement` — both step buttons
- * omitted when `showControls` is false.
- *
- * @internal
- */
-export declare const NumberFieldAnatomy: ({ showControls, incrementLabel, decrementLabel, }: {
+import type { JSX } from 'react';
+/** @internal */
+export declare const NumberFieldAnatomy: ({ showControls, incrementLabel, decrementLabel, ariaLabel, ariaLabelledBy, }: {
     showControls: boolean;
-    incrementLabel?: string;
-    decrementLabel?: string;
-}) => import("react").JSX.Element;
+    incrementLabel?: string | undefined;
+    decrementLabel?: string | undefined;
+    ariaLabel?: string | undefined;
+    ariaLabelledBy?: string | undefined;
+}) => JSX.Element;

package/dist/number-field/NumberFieldAnatomy.d.ts

@@ -1,12 +1,9 @@
-/**
- * The anatomy a {@link NumberField} draws when given no children: a derived
- * `NumberFieldDecrement`, the `NumberFieldInput`, then a derived `NumberFieldIncrement` — both step buttons
- * omitted when `showControls` is false.
- *
- * @internal
- */
-export declare const NumberFieldAnatomy: ({ showControls, incrementLabel, decrementLabel, }: {
+import type { JSX } from 'react';
+/** @internal */
+export declare const NumberFieldAnatomy: ({ showControls, incrementLabel, decrementLabel, ariaLabel, ariaLabelledBy, }: {
     showControls: boolean;
-    incrementLabel?: string;
-    decrementLabel?: string;
-}) => import("react").JSX.Element;
+    incrementLabel?: string | undefined;
+    decrementLabel?: string | undefined;
+    ariaLabel?: string | undefined;
+    ariaLabelledBy?: string | undefined;
+}) => JSX.Element;

package/dist/number-field/NumberFieldDecrement.d.cts

@@ -1,16 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { NumberFieldDecrementProps } from './types.cjs';
 /**
- * A button that lowers a {@link NumberField}'s value by one `step`. Disabled
- * (with `data-disabled`) once the value reaches `min` or the field itself is
- * disabled. While the field is read-only, the button stays focusable but
- * becomes inert (`aria-disabled`, no-op press) rather than natively disabled.
- * Holding it down (pointer) repeats the decrement after an initial delay,
- * then at a fixed interval, until released.
- *
- * Its projected content is usually a bare `-`, which announces as nothing
- * useful, so the button carries an accessible name of its own — `label`, which
- * is what makes that name translatable rather than a hardcoded English literal.
+ * Button that lowers a {@link NumberField}'s value by one step, repeating while held.
  *
  * @example
  * ```tsx
@@ -20,4 +11,7 @@ import type { NumberFieldDecrementProps } from './types.cjs';
  * </NumberField>
  * ```
  */
-export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<Omit<NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberFieldDecrement: {
+    ({ label, ref: forwardedRef, ...props }: NumberFieldDecrementProps): React.ReactNode;
+    displayName: string;
+};

package/dist/number-field/NumberFieldDecrement.d.ts

@@ -1,16 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { NumberFieldDecrementProps } from './types.js';
 /**
- * A button that lowers a {@link NumberField}'s value by one `step`. Disabled
- * (with `data-disabled`) once the value reaches `min` or the field itself is
- * disabled. While the field is read-only, the button stays focusable but
- * becomes inert (`aria-disabled`, no-op press) rather than natively disabled.
- * Holding it down (pointer) repeats the decrement after an initial delay,
- * then at a fixed interval, until released.
- *
- * Its projected content is usually a bare `-`, which announces as nothing
- * useful, so the button carries an accessible name of its own — `label`, which
- * is what makes that name translatable rather than a hardcoded English literal.
+ * Button that lowers a {@link NumberField}'s value by one step, repeating while held.
  *
  * @example
  * ```tsx
@@ -20,4 +11,7 @@ import type { NumberFieldDecrementProps } from './types.js';
  * </NumberField>
  * ```
  */
-export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<Omit<NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberFieldDecrement: {
+    ({ label, ref: forwardedRef, ...props }: NumberFieldDecrementProps): React.ReactNode;
+    displayName: string;
+};

package/dist/number-field/NumberFieldIncrement.d.cts

@@ -1,22 +1,13 @@
 import * as React from 'react';
 import type { NumberFieldIncrementProps } from './types.cjs';
-/**
- * @internal Runs `onPress` once on press, then repeatedly while held — after a
- * {@link REPEAT_DELAY} ms delay, at a {@link REPEAT_INTERVAL} ms cadence — until `stop` is called.
- * No-op while `disabled`. Returns `{ start, stop }` handlers.
- */
+/** @internal Repeats `onPress` after {@link REPEAT_DELAY} ms, then every {@link REPEAT_INTERVAL} ms, until stopped; `press` runs it exactly once. */
 export declare function useRepeatingPress(onPress: () => void, disabled: boolean): {
+    press: () => void;
     start: () => void;
     stop: () => void;
 };
 /**
- * A button that raises a {@link NumberField}'s value by one `step`. Disabled (with `data-disabled`)
- * once value reaches `max` or field itself is disabled. While field is read-only, button stays
- * focusable but becomes inert (`aria-disabled`, no-op press) rather than natively disabled.
- * Holding down (pointer) repeats increment after initial delay, then at fixed interval.
- *
- * Projected content usually bare `+`, announces as nothing useful, so button carries its own
- * accessible name — `label` — making it translatable rather than hardcoded English.
+ * Button that raises a {@link NumberField}'s value by one step, repeating while held.
  *
  * @example
  * ```tsx
@@ -26,4 +17,7 @@ export declare function useRepeatingPress(onPress: () => void, disabled: boolean
  * </NumberField>
  * ```
  */
-export declare const NumberFieldIncrement: React.ForwardRefExoticComponent<Omit<NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberFieldIncrement: {
+    ({ label, ref: forwardedRef, ...props }: NumberFieldIncrementProps): React.ReactNode;
+    displayName: string;
+};

package/dist/number-field/NumberFieldIncrement.d.ts

@@ -1,22 +1,13 @@
 import * as React from 'react';
 import type { NumberFieldIncrementProps } from './types.js';
-/**
- * @internal Runs `onPress` once on press, then repeatedly while held — after a
- * {@link REPEAT_DELAY} ms delay, at a {@link REPEAT_INTERVAL} ms cadence — until `stop` is called.
- * No-op while `disabled`. Returns `{ start, stop }` handlers.
- */
+/** @internal Repeats `onPress` after {@link REPEAT_DELAY} ms, then every {@link REPEAT_INTERVAL} ms, until stopped; `press` runs it exactly once. */
 export declare function useRepeatingPress(onPress: () => void, disabled: boolean): {
+    press: () => void;
     start: () => void;
     stop: () => void;
 };
 /**
- * A button that raises a {@link NumberField}'s value by one `step`. Disabled (with `data-disabled`)
- * once value reaches `max` or field itself is disabled. While field is read-only, button stays
- * focusable but becomes inert (`aria-disabled`, no-op press) rather than natively disabled.
- * Holding down (pointer) repeats increment after initial delay, then at fixed interval.
- *
- * Projected content usually bare `+`, announces as nothing useful, so button carries its own
- * accessible name — `label` — making it translatable rather than hardcoded English.
+ * Button that raises a {@link NumberField}'s value by one step, repeating while held.
  *
  * @example
  * ```tsx
@@ -26,4 +17,7 @@ export declare function useRepeatingPress(onPress: () => void, disabled: boolean
  * </NumberField>
  * ```
  */
-export declare const NumberFieldIncrement: React.ForwardRefExoticComponent<Omit<NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberFieldIncrement: {
+    ({ label, ref: forwardedRef, ...props }: NumberFieldIncrementProps): React.ReactNode;
+    displayName: string;
+};

package/dist/number-field/NumberFieldInput.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { NumberFieldInputProps } from './types.cjs';
 /**
- * Text input for a {@link NumberField}, renders `role="spinbutton"`.
- * Displayed text unclamped (multi-digit entry safe mid-keystroke); published value clamped.
- * Non-numeric text reverts on blur. Arrows step by `step`; Page Up / Down by ten.
+ * Text input for a {@link NumberField} that renders `role="spinbutton"` and steps via arrow keys.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { NumberFieldInputProps } from './types.cjs';
  * </NumberField>
  * ```
  */
-export declare const NumberFieldInput: React.ForwardRefExoticComponent<Omit<NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const NumberFieldInput: {
+    ({ ref: forwardedRef, ...props }: NumberFieldInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/number-field/NumberFieldInput.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { NumberFieldInputProps } from './types.js';
 /**
- * Text input for a {@link NumberField}, renders `role="spinbutton"`.
- * Displayed text unclamped (multi-digit entry safe mid-keystroke); published value clamped.
- * Non-numeric text reverts on blur. Arrows step by `step`; Page Up / Down by ten.
+ * Text input for a {@link NumberField} that renders `role="spinbutton"` and steps via arrow keys.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { NumberFieldInputProps } from './types.js';
  * </NumberField>
  * ```
  */
-export declare const NumberFieldInput: React.ForwardRefExoticComponent<Omit<NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const NumberFieldInput: {
+    ({ ref: forwardedRef, ...props }: NumberFieldInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/number-field/primitives.d.cts

@@ -1,6 +1,5 @@
 /**
- * Advanced primitives for `NumberField` — the parts the recipe composes. Use
- * for full manual composition.
+ * Advanced primitives for `NumberField`, for full manual composition of its parts.
  *
  * @example
  * ```tsx

package/dist/number-field/primitives.d.ts

@@ -1,6 +1,5 @@
 /**
- * Advanced primitives for `NumberField` — the parts the recipe composes. Use
- * for full manual composition.
+ * Advanced primitives for `NumberField`, for full manual composition of its parts.
  *
  * @example
  * ```tsx

package/dist/number-field/types.d.cts

@@ -1,6 +1,6 @@
 import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal Shared state distributed from {@link NumberField} to its parts via context. Not part of the public API. */
+/** @internal Shared context state distributed from {@link NumberField} to its parts. */
 export interface NumberFieldContextValue {
     /** `null` is the empty field — nothing entered, nothing to submit. */
     value: number | null;
@@ -11,28 +11,20 @@ export interface NumberFieldContextValue {
     invalid: boolean;
     readOnly: boolean;
     required: boolean;
-    formatOptions?: Intl.NumberFormatOptions;
-    /**
-     * BCP-47 locale for format/parse; undefined disables formatting and rounds through String/Number instead.
-     */
-    locale?: string;
+    formatOptions?: Intl.NumberFormatOptions | undefined;
+    /** BCP-47 locale for format/parse; undefined disables formatting and rounds through String/Number instead. */
+    locale?: string | undefined;
     /** Typed text snaps into [min, max] on blur; steppers/keys clamp under both settings. */
     clampBehavior: 'blur' | 'never';
     /** Mouse wheel steps the value when input has focus. */
     allowWheel: boolean;
-    /**
-     * Committed value sits outside [min, max] only under clampBehavior='never'.
-     * Input raises aria-invalid / data-invalid.
-     */
+    /** Committed value sits outside [min, max]; only reachable under clampBehavior='never', which raises aria-invalid / data-invalid. */
     outOfRange: boolean;
     /** Clamps and publishes value-change per keystroke without settling. */
     setValue: (next: number | null) => void;
-    /**
-     * Clamps, publishes value-change and value-commit. Always fires commit, even when unchanged
-     * (e.g., blur after unparseable text reverts to previous value).
-     */
+    /** Clamps and publishes both value-change and value-commit, even when the value is unchanged. */
     commitValue: (next: number | null) => void;
-    /** Steps by steps × step with decimal precision, clamps and commits. Empty field steps from 0. */
+    /** Stepper by steps × step with decimal precision, clamps and commits. Empty field steps from 0. */
     stepBy: (steps: number) => void;
 }
 /** Props for the {@link NumberField} root. */
@@ -41,111 +33,109 @@ export interface NumberFieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'de
      * Current value, for controlled usage, where `null` is the empty field.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: number | null;
+    value?: number | null | undefined;
     /**
      * Initial value, for uncontrolled usage, clamped to `min`/`max` on mount.
      * @default null
      */
-    defaultValue?: number | null;
+    defaultValue?: number | null | undefined;
     /**
      * Fires on every keystroke with the clamped value; `null` when emptied.
-     * Unclamped text stays in event.target.value.
      * @default undefined
      */
-    onValueChange?: (value: number | null) => void;
+    onValueChange?: ((value: number | null) => void) | undefined;
     /**
-     * Fires only when value settles (blur after typing, Enter, arrow, Home/End, or stepper).
-     * Use for expensive work; e.g., typing '1234' fires onValueChange four times, this once.
+     * Fires once the value settles (blur, Enter, arrow, Home/End, or stepper), unlike `onValueChange`.
      * @default undefined
      */
-    onValueCommit?: (value: number | null) => void;
+    onValueCommit?: ((value: number | null) => void) | undefined;
     /**
      * Lower bound the value is clamped to, including via increment/decrement and arrow keys.
      * @default -Infinity
      */
-    min?: number;
+    min?: number | undefined;
     /**
      * Upper bound the value is clamped to, including via increment/decrement and arrow keys.
      * @default Infinity
      */
-    max?: number;
+    max?: number | undefined;
     /**
      * Amount the step buttons and Arrow Up/Down change the value by; Page Up/Down uses 10x this.
      * @default 1
      */
-    step?: number;
+    step?: number | undefined;
     /**
      * Disables the field, its input, and both step buttons.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Marks the field as invalid, exposed as `data-invalid` on the root and
-     * `aria-invalid`/`data-invalid` on the input.
+     * Marks the field as invalid, exposed as `data-invalid` on the root and `aria-invalid`/`data-invalid` on the input.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
-     * Makes the input read-only and the step buttons inert, leaving them focusable but unable to change the value.
+     * Makes the input read-only and the step buttons inert but focusable.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
-     * Intl.NumberFormat options; typed text parses through the same formatter.
-     * min/max/step operate on numeric value, not formatted string (e.g., 0.5 → 50% with style:percent).
+     * Intl.NumberFormat options; typed text parses through the same formatter, min/max/step still operate on the numeric value.
      * @default undefined (displays as String(value))
      */
-    formatOptions?: Intl.NumberFormatOptions;
+    formatOptions?: Intl.NumberFormatOptions | undefined;
     /**
      * BCP-47 locale for formatting and parsing, resolved once so server and client agree.
      * @default undefined — the runtime's default locale.
      */
-    locale?: string;
+    locale?: string | undefined;
     /**
      * Snap typed text to [min, max]; 'never' publishes as-typed and marks aria-invalid / data-invalid.
      * @default 'blur'
      */
-    clampBehavior?: 'blur' | 'never';
+    clampBehavior?: 'blur' | 'never' | undefined;
     /**
      * Mouse wheel steps when focused (focus-gated to avoid edits while scrolling).
      * @default false
      */
-    allowWheel?: boolean;
+    allowWheel?: boolean | undefined;
     /**
      * Id of the `<form>` this field submits into, for a field rendered outside it.
      * @default undefined — the field belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Form field name; hidden input submits raw committed number, not formatted text.
-     * Empty field submits empty string (never 0); form reset restores defaultValue.
+     * Form field name; hidden input submits the raw committed number, not formatted text.
      * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Marks required with aria-required and valueMissing constraint (requires name).
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * Renders derived decrement/increment buttons flanking the input; ignored when `children` is given.
      * @default true
      */
-    showControls?: boolean;
+    showControls?: boolean | undefined;
     /**
      * Accessible name of the derived increment button; ignored when `children` is given.
      * @default 'Increment'
      */
-    incrementLabel?: string;
+    incrementLabel?: string | undefined;
     /**
      * Accessible name of the derived decrement button; ignored when `children` is given.
      * @default 'Decrement'
      */
-    decrementLabel?: string;
+    decrementLabel?: string | undefined;
+    /**
+     * Size rung the skin scales the field by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 }
-/**
- * What {@link NumberField}'s forwarded ref carries: the root `<div>` plus the two constraint-validation methods.
- */
+/** What {@link NumberField}'s forwarded ref carries: the root `<div>` plus the two constraint-validation methods. */
 export type NumberFieldHandle = HTMLDivElement & FormValidityHandle;
 /** Props for {@link NumberFieldInput}, the text input driven by `NumberField`'s context. */
 export interface NumberFieldInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue' | 'type'> {
@@ -156,7 +146,7 @@ export interface NumberFieldIncrementProps extends PrimitivePropsWithRef<'button
      * Accessible name; children (usually '+') don't announce clearly alone.
      * @default 'Increment'
      */
-    label?: string;
+    label?: string | undefined;
 }
 /** Button that decrements value by one step. */
 export interface NumberFieldDecrementProps extends PrimitivePropsWithRef<'button'> {
@@ -164,5 +154,5 @@ export interface NumberFieldDecrementProps extends PrimitivePropsWithRef<'button
      * Accessible name; children (usually '-') don't announce clearly alone.
      * @default 'Decrement'
      */
-    label?: string;
+    label?: string | undefined;
 }