@skdx/react 0.27.0 → 0.29.0

package/dist/navigation-menu/types.d.ts

@@ -1,7 +1,49 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared state distributed from {@link NavigationMenu} to its parts via context. Not part of the public API. */
+/**
+ * One entry of {@link NavigationMenuProps.items}: a plain link, or a trigger
+ * whose panel holds a list of links. Narrow with `'items' in item`.
+ */
+export type NavigationMenuItem = {
+    /** Text rendered inside the derived `NavigationMenuLink`. */
+    label: string;
+    /** Destination of the derived `NavigationMenuLink`. */
+    href: string;
+    /**
+     * Marks the link as the current page — `aria-current="page"` and `data-active`.
+     * @default false
+     */
+    active?: boolean | undefined;
+    /**
+     * Identifier matched against the root's open `value`.
+     * @default undefined — the entry's index in `items`, as a string.
+     */
+    value?: string | undefined;
+} | {
+    /** Text rendered inside the derived `NavigationMenuTrigger`. */
+    label: string;
+    /**
+     * Identifier matched against the root's open `value`.
+     * @default undefined — the entry's index in `items`, as a string.
+     */
+    value?: string | undefined;
+    /** The links the derived panel holds. */
+    items: {
+        /** Text rendered inside the derived `NavigationMenuLink`. */
+        label: string;
+        /** Destination of the derived `NavigationMenuLink`. */
+        href: string;
+        /**
+         * Marks the link as the current page — `aria-current="page"` and `data-active`.
+         * @default false
+         */
+        active?: boolean | undefined;
+    }[];
+};
+/** @internal Shared state distributed from {@link NavigationMenu} to its parts via context. */
 export interface NavigationMenuContextValue {
-    value: string;
+    /** Value of the open item, or `null` when nothing is open. */
+    value: string | null;
     /** Axis the list lays out and arrow-keys travel along. Set on the root. */
     orientation: 'horizontal' | 'vertical';
     onTriggerEnter: (itemValue: string) => void;
@@ -10,42 +52,68 @@ export interface NavigationMenuContextValue {
     onContentLeave: () => void;
     onItemSelect: (itemValue: string) => void;
     onClose: () => void;
+    /** What a Link's click does — closes the menu, or nothing when `closeOnSelect` is false. */
+    onLinkSelect: () => void;
 }
-/** Props for the {@link NavigationMenu} root. */
-export interface NavigationMenuProps extends PrimitivePropsWithRef<'nav'> {
+/** Props for the {@link NavigationMenu} root, with `defaultValue` redeclared to accept `null` as the closed sentinel. */
+export interface NavigationMenuProps extends Omit<PrimitivePropsWithRef<'nav'>, 'defaultValue'> {
     /**
-     * Axis the menu runs along. Sets `data-orientation` on the root and the list,
-     * switches roving focus between Left/Right and Up/Down, and is what the skin
-     * keys its vertical layout off. Use `'vertical'` for sidebars, footer link
-     * columns and mobile drawers.
+     * The menu's entries, rendered into a derived list. Ignored when `children`
+     * is given, which switches to full manual composition.
+     * @default undefined — an empty menu.
+     */
+    items?: NavigationMenuItem[] | undefined;
+    /**
+     * Render override for entry bodies (panel contents or link text). Called once
+     * per entry, never for nested links. Library owns roles, ids, href, aria-current.
+     * @default undefined — the panel's links, or the entry's `label`, is rendered.
+     */
+    renderItem?: ((item: NavigationMenuItem) => React.ReactNode) | undefined;
+    /**
+     * Axis the menu runs along; sets `data-orientation`, switches arrow keys, keys
+     * layout. Use `'vertical'` for sidebars, footers, or mobile.
      * @default 'horizontal'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | undefined;
     /**
-     * Value of the currently open item, for controlled usage. Pair with `onValueChange`.
+     * Currently open item value (controlled). Pair with `onValueChange`; `null`
+     * means nothing is open. Use `null` not `''` to avoid ambiguity.
      * @default undefined — uncontrolled, tracks its own open item internally.
      */
-    value?: string;
+    value?: string | null | undefined;
     /**
-     * Initially open item's value, for uncontrolled usage.
-     * @default undefined — no item open initially.
+     * Initially open item's value, for uncontrolled usage. `null` starts closed.
+     * @default null — no item open initially.
      */
-    defaultValue?: string;
+    defaultValue?: string | null | undefined;
     /**
-     * Fires with the new value whenever the open item changes, controlled or not.
+     * Fires with the new value whenever the open item changes, controlled or
+     * not, and with `null` when everything closes.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((value: string | null) => void) | undefined;
     /**
      * Delay before hovering a trigger opens its content (ms).
      * @default 200
      */
-    delayDuration?: number;
+    delayDuration?: number | undefined;
     /**
      * Window after closing during which re-hovering a sibling trigger opens instantly (ms).
      * @default 300
      */
-    skipDelayDuration?: number;
+    skipDelayDuration?: number | undefined;
+    /**
+     * Grace period after pointer leaves trigger or panel (ms). Accommodates layout
+     * gaps; too short closes panels while pointer travels between boxes.
+     * @default 150
+     */
+    closeDelayDuration?: number | undefined;
+    /**
+     * Whether activating a link closes the open panel. `false` keeps it open
+     * during route transitions. No menu event fires; link click is the event.
+     * @default true
+     */
+    closeOnSelect?: boolean | undefined;
 }
 /** Props for {@link NavigationMenuList}, the roving-focus container for `NavigationMenuItem`s. */
 export interface NavigationMenuListProps extends PrimitivePropsWithRef<'ul'> {
@@ -54,9 +122,9 @@ export interface NavigationMenuListProps extends PrimitivePropsWithRef<'ul'> {
      * (and vice versa).
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
 }
-/** @internal Per-item identifiers distributed from {@link NavigationMenuItem} to its descendants via context. Not part of the public API. */
+/** @internal Per-item identifiers distributed from {@link NavigationMenuItem} to its descendants via context. */
 export interface NavigationMenuItemContextValue {
     value: string;
     triggerId: string;
@@ -73,12 +141,10 @@ export interface NavigationMenuTriggerProps extends PrimitivePropsWithRef<'butto
 /** Props for {@link NavigationMenuContent}, the panel revealed by a trigger. */
 export interface NavigationMenuContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this panel mounted even while inactive, instead of unmounting it.
-     * Useful for animation libraries that need the outgoing panel present in
-     * the DOM during an exit transition.
+     * Keeps this panel mounted even while inactive, instead of unmounting it, for animation libraries needing the outgoing content present.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link NavigationMenuLink}, a plain navigable item within the menu (list item or content panel). */
 export interface NavigationMenuLinkProps extends PrimitivePropsWithRef<'a'> {
@@ -86,15 +152,13 @@ export interface NavigationMenuLinkProps extends PrimitivePropsWithRef<'a'> {
      * Marks this link as representing the current page (sets `data-active` and `aria-current="page"`).
      * @default false
      */
-    active?: boolean;
+    active?: boolean | undefined;
 }
 /** Props for {@link NavigationMenuIndicator}, a visual pointer that tracks the active trigger. */
 export interface NavigationMenuIndicatorProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this indicator mounted even while no item is open, instead of
-     * unmounting it. Useful for animation libraries that need it present in
-     * the DOM during an exit transition.
+     * Keeps this indicator mounted even while no item is open, instead of unmounting it, for animation libraries needing it present.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }

package/dist/number-field/NumberField.cjs

@@ -1 +1,2 @@
-"use strict";var ue=Object.create;var I=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var se=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var pe=(t,o)=>{for(var e in o)I(t,e,{get:o[e],enumerable:!0})},Y=(t,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of se(o))!fe.call(t,r)&&r!==e&&I(t,r,{get:()=>o[r],enumerable:!(i=de(o,r))||i.enumerable});return t};var C=(t,o,e)=>(e=t!=null?ue(ce(t)):{},Y(o||!t||!t.__esModule?I(e,"default",{value:t,enumerable:!0}):e,t)),be=t=>Y(I({},"__esModule",{value:!0}),t);var Pe={};pe(Pe,{NumberField:()=>X,NumberFieldDecrement:()=>h,NumberFieldIncrement:()=>M,NumberFieldInput:()=>L,NumberFieldProvider:()=>W,useNumberFieldContext:()=>b});module.exports=be(Pe);var f=C(require("react"),1),g=require("../utils/clamp.cjs"),q=require("../utils/createContext.cjs"),E=require("../utils/formControl.cjs"),z=require("../utils/hiddenInput.cjs"),G=require("../utils/part.cjs"),J=require("../utils/primitive.cjs"),Q=require("../utils/useControllableState.cjs"),x=require("react/jsx-runtime"),[W,b]=(0,q.createSafeContext)("NumberField"),X=f.forwardRef(({value:t,defaultValue:o=0,onValueChange:e,min:i=-1/0,max:r=1/0,step:a=1,disabled:l=!1,invalid:m=!1,readOnly:p=!1,formatOptions:T,locale:n,name:d,...s},R)=>{let c=f.useRef(null),B=f.useRef(null),[F=0,H]=(0,Q.useControllableState)({prop:t,defaultProp:(0,g.clamp)(o,i,r),onChange:e}),D=f.useCallback(O=>H((0,g.clamp)(O,i,r)),[H,i,r]),ie=f.useCallback(O=>{let A=me=>{let w=String(me);if(w.includes("e")||w.includes("E"))return null;let _=w.indexOf(".");return _===-1?0:w.length-_-1},U=F+O*a,S=A(F),K=A(a),le=S===null||K===null?U:Number(U.toFixed(Math.min(Math.max(S,K),15)));D(le)},[F,a,D]);return(0,E.useFormValidityHandle)(R,c,B),(0,E.useFormReset)(c,()=>D(o)),(0,x.jsxs)(W,{value:F,min:i,max:r,step:a,disabled:l,invalid:m,readOnly:p,formatOptions:T,locale:n,setValue:D,setValueUnclamped:H,stepBy:ie,children:[(0,x.jsx)(J.Primitive.div,{"data-disabled":l?"":void 0,"data-invalid":m?"":void 0,"data-readonly":p?"":void 0,...s,...(0,G.skdxPart)("number-field","root",s.className),ref:c}),d&&(0,x.jsx)(z.HiddenInput,{ref:B,type:"text",name:d,value:String(F),disabled:l})]})});X.displayName="NumberField";var v=C(require("react"),1),Z=require("../utils/clamp.cjs"),k=require("../utils/numberFormat.cjs"),$=require("../utils/part.cjs"),P=require("../utils/primitive.cjs");var j=require("react/jsx-runtime"),L=v.forwardRef((t,o)=>{let e=b("NumberFieldInput"),{locale:i,formatOptions:r}=e,a=n=>(0,k.formatNumberValue)(n,i,r),l=n=>(0,k.parseNumberValue)(n,i,r),[m,p]=v.useState(()=>a(e.value));v.useEffect(()=>{p(n=>l(n)===e.value?n:a(e.value))},[e.value]);let T=i||r?a(e.value):void 0;return(0,j.jsx)(P.Primitive.input,{type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":e.value,"aria-valuetext":T,"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":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,value:m,...(0,$.skdxPart)("number-field","input",t.className),ref:o,onChange:(0,P.composeEventHandlers)(t.onChange,n=>{let d=n.target.value;if(p(d),d.trim()==="")return;let s=l(d);Number.isNaN(s)||e.setValueUnclamped(s)}),onBlur:(0,P.composeEventHandlers)(t.onBlur,()=>{let n=l(m);Number.isNaN(n)?p(a(e.value)):(e.setValue(n),p(a((0,Z.clamp)(n,e.min,e.max))))}),onKeyDown:(0,P.composeEventHandlers)(t.onKeyDown,n=>{if(e.disabled||e.readOnly)return;let{min:d,max:s,setValue:R,stepBy:c}=e;n.key==="ArrowUp"?(n.preventDefault(),c(1)):n.key==="ArrowDown"?(n.preventDefault(),c(-1)):n.key==="PageUp"?(n.preventDefault(),c(10)):n.key==="PageDown"?(n.preventDefault(),c(-10)):n.key==="Home"&&Number.isFinite(d)?(n.preventDefault(),R(d)):n.key==="End"&&Number.isFinite(s)&&(n.preventDefault(),R(s))})})});L.displayName="NumberFieldInput";var u=C(require("react"),1),ee=require("../utils/part.cjs"),N=require("../utils/primitive.cjs"),te=require("../utils/useCallbackRef.cjs");var re=require("react/jsx-runtime"),Ne=400,ye=80;function V(t,o){let e=u.useRef(0),i=u.useRef(0),r=(0,te.useCallbackRef)(t),a=u.useCallback(()=>{window.clearTimeout(e.current),window.clearInterval(i.current)},[]),l=u.useCallback(()=>{o||(r(),e.current=window.setTimeout(()=>{i.current=window.setInterval(()=>r(),ye)},Ne))},[o,r]);return u.useEffect(()=>(o&&a(),a),[o,a]),{start:l,stop:a}}var M=u.forwardRef((t,o)=>{let e=b("NumberFieldIncrement"),i=e.value>=e.max,r=e.disabled||i||t.disabled||!1,a=e.readOnly&&!r,{start:l,stop:m}=V(()=>e.stepBy(1),r||a);return(0,re.jsx)(N.Primitive.button,{type:"button","aria-label":"Increment","aria-disabled":a?!0:void 0,disabled:r,"data-disabled":r?"":void 0,...t,...(0,ee.skdxPart)("number-field","increment",t.className),ref:o,onPointerDown:(0,N.composeEventHandlers)(t.onPointerDown,l),onPointerUp:(0,N.composeEventHandlers)(t.onPointerUp,m),onPointerLeave:(0,N.composeEventHandlers)(t.onPointerLeave,m),onPointerCancel:(0,N.composeEventHandlers)(t.onPointerCancel,m)})});M.displayName="NumberFieldIncrement";var ne=C(require("react"),1),oe=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var ae=require("react/jsx-runtime"),h=ne.forwardRef((t,o)=>{let e=b("NumberFieldDecrement"),i=e.value<=e.min,r=e.disabled||i||t.disabled||!1,a=e.readOnly&&!r,{start:l,stop:m}=V(()=>e.stepBy(-1),r||a);return(0,ae.jsx)(y.Primitive.button,{type:"button","aria-label":"Decrement","aria-disabled":a?!0:void 0,disabled:r,"data-disabled":r?"":void 0,...t,...(0,oe.skdxPart)("number-field","decrement",t.className),ref:o,onPointerDown:(0,y.composeEventHandlers)(t.onPointerDown,l),onPointerUp:(0,y.composeEventHandlers)(t.onPointerUp,m),onPointerLeave:(0,y.composeEventHandlers)(t.onPointerLeave,m),onPointerCancel:(0,y.composeEventHandlers)(t.onPointerCancel,m)})});h.displayName="NumberFieldDecrement";0&&(module.exports={NumberField,NumberFieldDecrement,NumberFieldIncrement,NumberFieldInput,NumberFieldProvider,useNumberFieldContext});
+'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,32 +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 of a numeric stepper input: owns the clamped value and hands it down
- * to `NumberFieldInput` / `NumberFieldIncrement` / `NumberFieldDecrement` via
- * context. Renders a plain `<div data-disabled data-invalid data-readonly>`
- * — layout is entirely up to your CSS.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- * Every committed value is clamped to `[min, max]`.
- *
- * With a `name` a visually-hidden native input submits the committed number as
- * `String(value)` — never the formatted display text — a form reset restores
- * `defaultValue`, and the ref carries `checkValidity()`/`reportValidity()`.
- * The value is always clamped and can never be empty, so both always pass.
+ * 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}>
- *   <NumberFieldDecrement>-</NumberFieldDecrement>
- *   <NumberFieldInput />
- *   <NumberFieldIncrement>+</NumberFieldIncrement>
- * </NumberField>
+ * <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,32 +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 of a numeric stepper input: owns the clamped value and hands it down
- * to `NumberFieldInput` / `NumberFieldIncrement` / `NumberFieldDecrement` via
- * context. Renders a plain `<div data-disabled data-invalid data-readonly>`
- * — layout is entirely up to your CSS.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- * Every committed value is clamped to `[min, max]`.
- *
- * With a `name` a visually-hidden native input submits the committed number as
- * `String(value)` — never the formatted display text — a form reset restores
- * `defaultValue`, and the ref carries `checkValidity()`/`reportValidity()`.
- * The value is always clamped and can never be empty, so both always pass.
+ * 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}>
- *   <NumberFieldDecrement>-</NumberFieldDecrement>
- *   <NumberFieldInput />
- *   <NumberFieldIncrement>+</NumberFieldIncrement>
- * </NumberField>
+ * <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 f from"react";import{clamp as V}from"../utils/clamp.js";import{createSafeContext as Y}from"../utils/createContext.js";import{useFormReset as q,useFormValidityHandle as z}from"../utils/formControl.js";import{HiddenInput as G}from"../utils/hiddenInput.js";import{skdxPart as J}from"../utils/part.js";import{Primitive as Q}from"../utils/primitive.js";import{useControllableState as W}from"../utils/useControllableState.js";import{jsx as M,jsxs as $}from"react/jsx-runtime";var[X,b]=Y("NumberField"),Z=f.forwardRef(({value:r,defaultValue:i=0,onValueChange:e,min:a=-1/0,max:n=1/0,step:o=1,disabled:l=!1,invalid:m=!1,readOnly:p=!1,formatOptions:D,locale:t,name:d,...s},P)=>{let c=f.useRef(null),k=f.useRef(null),[y=0,w]=W({prop:r,defaultProp:V(i,a,n),onChange:e}),v=f.useCallback(I=>w(V(I,a,n)),[w,a,n]),S=f.useCallback(I=>{let T=_=>{let F=String(_);if(F.includes("e")||F.includes("E"))return null;let L=F.indexOf(".");return L===-1?0:F.length-L-1},H=y+I*o,O=T(y),g=T(o),K=O===null||g===null?H:Number(H.toFixed(Math.min(Math.max(O,g),15)));v(K)},[y,o,v]);return z(P,c,k),q(c,()=>v(i)),$(X,{value:y,min:a,max:n,step:o,disabled:l,invalid:m,readOnly:p,formatOptions:D,locale:t,setValue:v,setValueUnclamped:w,stepBy:S,children:[M(Q.div,{"data-disabled":l?"":void 0,"data-invalid":m?"":void 0,"data-readonly":p?"":void 0,...s,...J("number-field","root",s.className),ref:c}),d&&M(G,{ref:k,type:"text",name:d,value:String(y),disabled:l})]})});Z.displayName="NumberField";import*as N from"react";import{clamp as j}from"../utils/clamp.js";import{formatNumberValue as ee,parseNumberValue as te}from"../utils/numberFormat.js";import{skdxPart as re}from"../utils/part.js";import{composeEventHandlers as C,Primitive as ne}from"../utils/primitive.js";import{jsx as oe}from"react/jsx-runtime";var h=N.forwardRef((r,i)=>{let e=b("NumberFieldInput"),{locale:a,formatOptions:n}=e,o=t=>ee(t,a,n),l=t=>te(t,a,n),[m,p]=N.useState(()=>o(e.value));N.useEffect(()=>{p(t=>l(t)===e.value?t:o(e.value))},[e.value]);let D=a||n?o(e.value):void 0;return oe(ne.input,{type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":e.value,"aria-valuetext":D,"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":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...r,value:m,...re("number-field","input",r.className),ref:i,onChange:C(r.onChange,t=>{let d=t.target.value;if(p(d),d.trim()==="")return;let s=l(d);Number.isNaN(s)||e.setValueUnclamped(s)}),onBlur:C(r.onBlur,()=>{let t=l(m);Number.isNaN(t)?p(o(e.value)):(e.setValue(t),p(o(j(t,e.min,e.max))))}),onKeyDown:C(r.onKeyDown,t=>{if(e.disabled||e.readOnly)return;let{min:d,max:s,setValue:P,stepBy:c}=e;t.key==="ArrowUp"?(t.preventDefault(),c(1)):t.key==="ArrowDown"?(t.preventDefault(),c(-1)):t.key==="PageUp"?(t.preventDefault(),c(10)):t.key==="PageDown"?(t.preventDefault(),c(-10)):t.key==="Home"&&Number.isFinite(d)?(t.preventDefault(),P(d)):t.key==="End"&&Number.isFinite(s)&&(t.preventDefault(),P(s))})})});h.displayName="NumberFieldInput";import*as u from"react";import{skdxPart as ae}from"../utils/part.js";import{composeEventHandlers as x,Primitive as ie}from"../utils/primitive.js";import{useCallbackRef as le}from"../utils/useCallbackRef.js";import{jsx as de}from"react/jsx-runtime";var me=400,ue=80;function E(r,i){let e=u.useRef(0),a=u.useRef(0),n=le(r),o=u.useCallback(()=>{window.clearTimeout(e.current),window.clearInterval(a.current)},[]),l=u.useCallback(()=>{i||(n(),e.current=window.setTimeout(()=>{a.current=window.setInterval(()=>n(),ue)},me))},[i,n]);return u.useEffect(()=>(i&&o(),o),[i,o]),{start:l,stop:o}}var B=u.forwardRef((r,i)=>{let e=b("NumberFieldIncrement"),a=e.value>=e.max,n=e.disabled||a||r.disabled||!1,o=e.readOnly&&!n,{start:l,stop:m}=E(()=>e.stepBy(1),n||o);return de(ie.button,{type:"button","aria-label":"Increment","aria-disabled":o?!0:void 0,disabled:n,"data-disabled":n?"":void 0,...r,...ae("number-field","increment",r.className),ref:i,onPointerDown:x(r.onPointerDown,l),onPointerUp:x(r.onPointerUp,m),onPointerLeave:x(r.onPointerLeave,m),onPointerCancel:x(r.onPointerCancel,m)})});B.displayName="NumberFieldIncrement";import*as A from"react";import{skdxPart as se}from"../utils/part.js";import{composeEventHandlers as R,Primitive as ce}from"../utils/primitive.js";import{jsx as fe}from"react/jsx-runtime";var U=A.forwardRef((r,i)=>{let e=b("NumberFieldDecrement"),a=e.value<=e.min,n=e.disabled||a||r.disabled||!1,o=e.readOnly&&!n,{start:l,stop:m}=E(()=>e.stepBy(-1),n||o);return fe(ce.button,{type:"button","aria-label":"Decrement","aria-disabled":o?!0:void 0,disabled:n,"data-disabled":n?"":void 0,...r,...se("number-field","decrement",r.className),ref:i,onPointerDown:R(r.onPointerDown,l),onPointerUp:R(r.onPointerUp,m),onPointerLeave:R(r.onPointerLeave,m),onPointerCancel:R(r.onPointerCancel,m)})});U.displayName="NumberFieldDecrement";export{Z as NumberField,U as NumberFieldDecrement,B as NumberFieldIncrement,h as NumberFieldInput,X as NumberFieldProvider,b as useNumberFieldContext};
+'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

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+/** @internal */
+export declare const NumberFieldAnatomy: ({ showControls, incrementLabel, decrementLabel, ariaLabel, ariaLabelledBy, }: {
+    showControls: boolean;
+    incrementLabel?: string | undefined;
+    decrementLabel?: string | undefined;
+    ariaLabel?: string | undefined;
+    ariaLabelledBy?: string | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+/** @internal */
+export declare const NumberFieldAnatomy: ({ showControls, incrementLabel, decrementLabel, ariaLabel, ariaLabelledBy, }: {
+    showControls: boolean;
+    incrementLabel?: string | undefined;
+    decrementLabel?: string | undefined;
+    ariaLabel?: string | undefined;
+    ariaLabelledBy?: string | undefined;
+}) => JSX.Element;

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

@@ -1,12 +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.
+ * Button that lowers a {@link NumberField}'s value by one step, repeating while held.
  *
  * @example
  * ```tsx
@@ -16,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,12 +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.
+ * Button that lowers a {@link NumberField}'s value by one step, repeating while held.
  *
  * @example
  * ```tsx
@@ -16,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,21 +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 the value reaches `max` 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 increment after an initial delay,
- * then at a fixed interval, until released.
+ * Button that raises a {@link NumberField}'s value by one step, repeating while held.
  *
  * @example
  * ```tsx
@@ -25,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,21 +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 the value reaches `max` 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 increment after an initial delay,
- * then at a fixed interval, until released.
+ * Button that raises a {@link NumberField}'s value by one step, repeating while held.
  *
  * @example
  * ```tsx
@@ -25,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,19 +1,7 @@
 import * as React from 'react';
 import type { NumberFieldInputProps } from './types.cjs';
 /**
- * The text input for a {@link NumberField}. Renders `role="spinbutton"` with
- * `aria-valuenow`/`aria-valuemin`/`aria-valuemax` from context, plus
- * `aria-invalid`/`data-invalid` and the native `readOnly` attribute with
- * `aria-readonly`/`data-readonly` from context. Typed text is tracked
- * unclamped so multi-digit entry isn't fought mid-keystroke, and is
- * clamped/committed on blur (reverting to the last committed value if left
- * empty or non-numeric). Arrow Up/Down change the value by one `step`, and
- * Page Up/Down by ten `step`s.
- *
- * With the root's `formatOptions`/`locale`, the committed value is displayed
- * through `Intl.NumberFormat` and announced on `aria-valuetext`, while typed
- * or pasted text is parsed back through the same options — so a currency
- * symbol, a group separator or a `%` never reads as garbage.
+ * Text input for a {@link NumberField} that renders `role="spinbutton"` and steps via arrow keys.
  *
  * @example
  * ```tsx
@@ -22,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,19 +1,7 @@
 import * as React from 'react';
 import type { NumberFieldInputProps } from './types.js';
 /**
- * The text input for a {@link NumberField}. Renders `role="spinbutton"` with
- * `aria-valuenow`/`aria-valuemin`/`aria-valuemax` from context, plus
- * `aria-invalid`/`data-invalid` and the native `readOnly` attribute with
- * `aria-readonly`/`data-readonly` from context. Typed text is tracked
- * unclamped so multi-digit entry isn't fought mid-keystroke, and is
- * clamped/committed on blur (reverting to the last committed value if left
- * empty or non-numeric). Arrow Up/Down change the value by one `step`, and
- * Page Up/Down by ten `step`s.
- *
- * With the root's `formatOptions`/`locale`, the committed value is displayed
- * through `Intl.NumberFormat` and announced on `aria-valuetext`, while typed
- * or pasted text is parsed back through the same options — so a currency
- * symbol, a group separator or a `%` never reads as garbage.
+ * Text input for a {@link NumberField} that renders `role="spinbutton"` and steps via arrow keys.
  *
  * @example
  * ```tsx
@@ -22,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/index.d.cts

@@ -1,5 +1,2 @@
-export * from './NumberField.cjs';
-export { NumberFieldInput } from './NumberFieldInput.cjs';
-export { NumberFieldIncrement } from './NumberFieldIncrement.cjs';
-export { NumberFieldDecrement } from './NumberFieldDecrement.cjs';
-export type { NumberFieldProps, NumberFieldHandle, NumberFieldInputProps, NumberFieldIncrementProps, NumberFieldDecrementProps, } from './types.cjs';
+export { NumberField } from './NumberField.cjs';
+export type { NumberFieldProps, NumberFieldHandle } from './types.cjs';

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

@@ -1,5 +1,2 @@
-export * from './NumberField.js';
-export { NumberFieldInput } from './NumberFieldInput.js';
-export { NumberFieldIncrement } from './NumberFieldIncrement.js';
-export { NumberFieldDecrement } from './NumberFieldDecrement.js';
-export type { NumberFieldProps, NumberFieldHandle, NumberFieldInputProps, NumberFieldIncrementProps, NumberFieldDecrementProps, } from './types.js';
+export { NumberField } from './NumberField.js';
+export type { NumberFieldProps, NumberFieldHandle } from './types.js';

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

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `NumberField`, for full manual composition of its parts.
+ *
+ * @example
+ * ```tsx
+ * import { NumberField, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput } from '@skdx/react/primitives/number-field';
+ *
+ * <NumberField defaultValue={1} min={0} max={10}>
+ *   <NumberFieldDecrement>-</NumberFieldDecrement>
+ *   <NumberFieldInput />
+ *   <NumberFieldIncrement>+</NumberFieldIncrement>
+ * </NumberField>
+ * ```
+ */
+export { NumberField } from './NumberField.cjs';
+export { NumberFieldInput } from './NumberFieldInput.cjs';
+export { NumberFieldIncrement } from './NumberFieldIncrement.cjs';
+export { NumberFieldDecrement } from './NumberFieldDecrement.cjs';
+export type { NumberFieldProps, NumberFieldHandle, NumberFieldInputProps, NumberFieldIncrementProps, NumberFieldDecrementProps, } from './types.cjs';

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

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `NumberField`, for full manual composition of its parts.
+ *
+ * @example
+ * ```tsx
+ * import { NumberField, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput } from '@skdx/react/primitives/number-field';
+ *
+ * <NumberField defaultValue={1} min={0} max={10}>
+ *   <NumberFieldDecrement>-</NumberFieldDecrement>
+ *   <NumberFieldInput />
+ *   <NumberFieldIncrement>+</NumberFieldIncrement>
+ * </NumberField>
+ * ```
+ */
+export { NumberField } from './NumberField.js';
+export { NumberFieldInput } from './NumberFieldInput.js';
+export { NumberFieldIncrement } from './NumberFieldIncrement.js';
+export { NumberFieldDecrement } from './NumberFieldDecrement.js';
+export type { NumberFieldProps, NumberFieldHandle, NumberFieldInputProps, NumberFieldIncrementProps, NumberFieldDecrementProps, } from './types.js';