@skdx/react 0.27.0 → 0.29.0

package/dist/password-input/index.d.cts

@@ -1,4 +1,2 @@
-export * from './PasswordInput.cjs';
-export { PasswordInputField } from './PasswordInputField.cjs';
-export { PasswordInputToggle } from './PasswordInputToggle.cjs';
-export type { PasswordInputProps, PasswordInputFieldProps, PasswordInputToggleProps } from './types.cjs';
+export { PasswordInput } from './PasswordInput.cjs';
+export type { PasswordInputHandle, PasswordInputMethods, PasswordInputProps } from './types.cjs';

package/dist/password-input/index.d.ts

@@ -1,4 +1,2 @@
-export * from './PasswordInput.js';
-export { PasswordInputField } from './PasswordInputField.js';
-export { PasswordInputToggle } from './PasswordInputToggle.js';
-export type { PasswordInputProps, PasswordInputFieldProps, PasswordInputToggleProps } from './types.js';
+export { PasswordInput } from './PasswordInput.js';
+export type { PasswordInputHandle, PasswordInputMethods, PasswordInputProps } from './types.js';

package/dist/password-input/primitives.d.cts

@@ -0,0 +1,17 @@
+/**
+ * Advanced primitives for `PasswordInput`: `PasswordInput`, `PasswordInputField`, and `PasswordInputToggle`.
+ *
+ * @example
+ * ```tsx
+ * import { PasswordInput, PasswordInputField, PasswordInputToggle } from '@skdx/react/primitives/password-input';
+ *
+ * <PasswordInput>
+ *   <PasswordInputField placeholder="Password" />
+ *   <PasswordInputToggle />
+ * </PasswordInput>
+ * ```
+ */
+export { PasswordInput } from './PasswordInput.cjs';
+export { PasswordInputField } from './PasswordInputField.cjs';
+export { PasswordInputToggle } from './PasswordInputToggle.cjs';
+export type { PasswordInputProps, PasswordInputFieldProps, PasswordInputToggleProps, } from './types.cjs';

package/dist/password-input/primitives.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Advanced primitives for `PasswordInput`: `PasswordInput`, `PasswordInputField`, and `PasswordInputToggle`.
+ *
+ * @example
+ * ```tsx
+ * import { PasswordInput, PasswordInputField, PasswordInputToggle } from '@skdx/react/primitives/password-input';
+ *
+ * <PasswordInput>
+ *   <PasswordInputField placeholder="Password" />
+ *   <PasswordInputToggle />
+ * </PasswordInput>
+ * ```
+ */
+export { PasswordInput } from './PasswordInput.js';
+export { PasswordInputField } from './PasswordInputField.js';
+export { PasswordInputToggle } from './PasswordInputToggle.js';
+export type { PasswordInputProps, PasswordInputFieldProps, PasswordInputToggleProps, } from './types.js';

package/dist/password-input/types.d.cts

@@ -1,52 +1,67 @@
 import type { TextFieldInputProps, TextFieldProps } from '../text-field/types.cjs';
+import type { FormValidityHandle, FormValidityStateView } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal Shared state distributed from {@link PasswordInput} to its parts via context. Not part of the public API. */
+/** The methods a `ref` on {@link PasswordInput} exposes: TextField's validation API plus the visibility setter. */
+export interface PasswordInputMethods extends FormValidityHandle {
+    /** Shows or masks the password, firing `onVisibleChange`; a no-op while disabled. */
+    setVisible(visible: boolean): void;
+}
+/** What a `ref` on {@link PasswordInput} holds: the root element plus TextField's validation API and the visibility setter. */
+export type PasswordInputHandle = HTMLDivElement & FormValidityStateView & PasswordInputMethods;
+/** @internal Shared state distributed from {@link PasswordInput} to its parts via context. */
 export interface PasswordInputContextValue {
     visible: boolean;
     disabled: boolean;
+    /** Native `readonly` for the field; the toggle deliberately stays operable. */
+    readOnly: boolean;
+    /** Accessible name for the reveal button, which has only an icon of its own. */
+    revealLabel: string;
     setVisible: (visible: boolean) => void;
 }
-/**
- * Props for the {@link PasswordInput} root. Every {@link TextFieldProps} prop
- * is forwarded verbatim — `value`/`defaultValue`/`onValueChange`, `disabled`,
- * `invalid`, `required` — because the root *is* a `TextField` with a
- * visibility layer on top, not a re-implementation of one.
- */
-export interface PasswordInputProps extends TextFieldProps {
-    /**
-     * Whether the characters are revealed, for controlled usage. Pair with
-     * `onVisibleChange`.
+/** Props for the {@link PasswordInput} root, extending {@link TextFieldProps} minus `trailing`. */
+export interface PasswordInputProps extends Omit<TextFieldProps, 'trailing' | 'type'> {
+    /**
+     * Visual weight rung the skin gives the field, mirrored to `data-variant`.
+     * @default undefined — the skin's own default weight.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
+    /**
+     * Whether the characters are revealed, for controlled usage paired with `onVisibleChange`.
      * @default undefined — uncontrolled, tracks its own visibility internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
      * Initial visibility, for uncontrolled usage, seeding the first render.
-     * @default false — the field starts masked, which is the only safe default
-     * for a credential rendered on a screen someone else might be looking at.
+     * @default false — the field starts masked.
+     */
+    defaultVisible?: boolean | undefined;
+    /**
+     * Accessible name for the reveal button, whose children are an icon with no text content.
+     * @default 'Show password' — English; translate it.
+     */
+    revealLabel?: string | undefined;
+    /**
+     * Makes the field read-only: focusable and submitted, but not editable; the toggle stays operable.
+     * @default false
      */
-    defaultVisible?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Fires with the new visibility whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onVisibleChange?: (visible: boolean) => void;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
     /**
-     * Words the polite live-region message announced when visibility changes.
-     * The toggle's own name does not change, so this announcement is the only
-     * confirmation a screen-reader user gets that the characters are now
-     * readable on screen. Return `''` to announce nothing.
+     * Words the polite live-region message announced when visibility changes; return `''` to announce nothing.
      * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
      */
-    getVisibilityAnnouncement?: (visible: boolean) => string;
+    getVisibilityAnnouncement?: ((visible: boolean) => string) | undefined;
+    /**
+     * Renders the derived `PasswordInputToggle`, ignored when `children` is given.
+     * @default true
+     */
+    showToggle?: boolean | undefined;
 }
-/**
- * Props for {@link PasswordInputField}, the native `<input>`.
- *
- * `type` is deliberately absent: it is the one attribute this component owns,
- * flipping between `password` and `text` with the root's visibility. Setting
- * it from outside would let a consumer pin the field open (or closed) while
- * the toggle claims otherwise.
- */
+/** Props for {@link PasswordInputField}, the native `<input>`, omitting `type`, which the component controls itself. */
 export interface PasswordInputFieldProps extends Omit<TextFieldInputProps, 'type'> {
 }
 /** Props for {@link PasswordInputToggle}, the reveal button. */

package/dist/password-input/types.d.ts

@@ -1,52 +1,67 @@
 import type { TextFieldInputProps, TextFieldProps } from '../text-field/types.js';
+import type { FormValidityHandle, FormValidityStateView } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared state distributed from {@link PasswordInput} to its parts via context. Not part of the public API. */
+/** The methods a `ref` on {@link PasswordInput} exposes: TextField's validation API plus the visibility setter. */
+export interface PasswordInputMethods extends FormValidityHandle {
+    /** Shows or masks the password, firing `onVisibleChange`; a no-op while disabled. */
+    setVisible(visible: boolean): void;
+}
+/** What a `ref` on {@link PasswordInput} holds: the root element plus TextField's validation API and the visibility setter. */
+export type PasswordInputHandle = HTMLDivElement & FormValidityStateView & PasswordInputMethods;
+/** @internal Shared state distributed from {@link PasswordInput} to its parts via context. */
 export interface PasswordInputContextValue {
     visible: boolean;
     disabled: boolean;
+    /** Native `readonly` for the field; the toggle deliberately stays operable. */
+    readOnly: boolean;
+    /** Accessible name for the reveal button, which has only an icon of its own. */
+    revealLabel: string;
     setVisible: (visible: boolean) => void;
 }
-/**
- * Props for the {@link PasswordInput} root. Every {@link TextFieldProps} prop
- * is forwarded verbatim — `value`/`defaultValue`/`onValueChange`, `disabled`,
- * `invalid`, `required` — because the root *is* a `TextField` with a
- * visibility layer on top, not a re-implementation of one.
- */
-export interface PasswordInputProps extends TextFieldProps {
-    /**
-     * Whether the characters are revealed, for controlled usage. Pair with
-     * `onVisibleChange`.
+/** Props for the {@link PasswordInput} root, extending {@link TextFieldProps} minus `trailing`. */
+export interface PasswordInputProps extends Omit<TextFieldProps, 'trailing' | 'type'> {
+    /**
+     * Visual weight rung the skin gives the field, mirrored to `data-variant`.
+     * @default undefined — the skin's own default weight.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
+    /**
+     * Whether the characters are revealed, for controlled usage paired with `onVisibleChange`.
      * @default undefined — uncontrolled, tracks its own visibility internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
      * Initial visibility, for uncontrolled usage, seeding the first render.
-     * @default false — the field starts masked, which is the only safe default
-     * for a credential rendered on a screen someone else might be looking at.
+     * @default false — the field starts masked.
+     */
+    defaultVisible?: boolean | undefined;
+    /**
+     * Accessible name for the reveal button, whose children are an icon with no text content.
+     * @default 'Show password' — English; translate it.
+     */
+    revealLabel?: string | undefined;
+    /**
+     * Makes the field read-only: focusable and submitted, but not editable; the toggle stays operable.
+     * @default false
      */
-    defaultVisible?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Fires with the new visibility whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onVisibleChange?: (visible: boolean) => void;
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
     /**
-     * Words the polite live-region message announced when visibility changes.
-     * The toggle's own name does not change, so this announcement is the only
-     * confirmation a screen-reader user gets that the characters are now
-     * readable on screen. Return `''` to announce nothing.
+     * Words the polite live-region message announced when visibility changes; return `''` to announce nothing.
      * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
      */
-    getVisibilityAnnouncement?: (visible: boolean) => string;
+    getVisibilityAnnouncement?: ((visible: boolean) => string) | undefined;
+    /**
+     * Renders the derived `PasswordInputToggle`, ignored when `children` is given.
+     * @default true
+     */
+    showToggle?: boolean | undefined;
 }
-/**
- * Props for {@link PasswordInputField}, the native `<input>`.
- *
- * `type` is deliberately absent: it is the one attribute this component owns,
- * flipping between `password` and `text` with the root's visibility. Setting
- * it from outside would let a consumer pin the field open (or closed) while
- * the toggle claims otherwise.
- */
+/** Props for {@link PasswordInputField}, the native `<input>`, omitting `type`, which the component controls itself. */
 export interface PasswordInputFieldProps extends Omit<TextFieldInputProps, 'type'> {
 }
 /** Props for {@link PasswordInputToggle}, the reveal button. */

package/dist/pin-input/PinInput.cjs

@@ -1 +1,2 @@
-"use strict";var Y=Object.create;var v=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var re=(t,n)=>{for(var i in n)v(t,i,{get:n[i],enumerable:!0})},V=(t,n,i,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of ee(n))!ne.call(t,s)&&s!==i&&v(t,s,{get:()=>n[s],enumerable:!(e=Z(n,s))||e.enumerable});return t};var T=(t,n,i)=>(i=t!=null?Y(te(t)):{},V(n||!t||!t.__esModule?v(i,"default",{value:t,enumerable:!0}):i,t)),ae=t=>V(v({},"__esModule",{value:!0}),t);var ie={};re(ie,{PinInput:()=>$,PinInputField:()=>w,PinInputProvider:()=>S,usePinInputContext:()=>D});module.exports=ae(ie);var o=T(require("react"),1),O=require("../utils/createContext.cjs"),g=require("../utils/formControl.cjs"),A=require("../utils/hiddenInput.cjs"),N=require("../utils/part.cjs"),z=require("../utils/primitive.cjs"),K=require("../utils/useCallbackRef.cjs"),q=require("../utils/useControllableState.cjs"),I=require("react/jsx-runtime"),[S,D]=(0,O.createSafeContext)("PinInput"),$=o.forwardRef(({value:t,defaultValue:n="",onValueChange:i,length:e=6,disabled:s=!1,invalid:R=!1,readOnly:c=!1,type:b="text",mask:d=!1,onValueComplete:r,autoSubmit:a=!1,sanitize:u,name:m,required:P=!1,...f},G)=>{let[y="",k]=(0,q.useControllableState)({prop:t,defaultProp:n,onChange:i}),F=o.useRef([]),h=o.useRef(null),M=o.useRef(null);(0,g.useFormValidityHandle)(G,h,M),(0,g.useFormReset)(h,()=>k(n));let x=(0,K.useCallbackRef)(r),E=o.useRef(y);E.current=y;let L=o.useRef(u);L.current=u;let J=o.useCallback(l=>L.current?.(l)??l,[]),Q=o.useCallback(l=>{let H=E.current.length===e;k(l),!(l.length!==e||H)&&(x(l),a&&h.current?.closest("form")?.requestSubmit())},[e,k,x,a]),W=o.useCallback((l,H)=>{F.current[l]=H},[]),X=o.useCallback(l=>{F.current[l]?.focus()},[]);return(0,I.jsxs)(S,{value:y,length:e,type:b,mask:d,disabled:s,invalid:R,readOnly:c,setValue:Q,focusIndex:X,registerRef:W,sanitizePaste:J,children:[(0,I.jsx)(z.Primitive.div,{"data-disabled":s?"":void 0,"data-invalid":R?"":void 0,"data-readonly":c?"":void 0,...f,...(0,N.skdxPart)("pin-input","root",f.className),ref:h}),m&&(0,I.jsx)(A.HiddenInput,{ref:M,type:"text",name:m,value:y,required:P,disabled:s,pattern:P?`.{${e}}`:void 0})]})});$.displayName="PinInput";var j=T(require("react"),1),B=require("../utils/composeRefs.cjs"),C=require("../utils/direction.cjs"),U=require("../utils/part.cjs"),p=require("../utils/primitive.cjs");var _=require("react/jsx-runtime"),oe=/^[0-9]$/,w=j.forwardRef(({index:t,...n},i)=>{let e=D("PinInputField"),s=(0,C.useDirection)(),R=(0,B.useComposedRefs)(i,r=>e.registerRef(t,r)),c=e.value[t]??"",b=c!=="",d=r=>{let a=e.value.split("");a[t]=r,e.setValue(a.join("").slice(0,e.length))};return(0,_.jsx)(p.Primitive.input,{inputMode:e.type==="numeric"?"numeric":"text",autoComplete:t===0?"one-time-code":"off",type:e.mask&&b?"password":"text",maxLength:1,disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...n,value:c,...(0,U.skdxPart)("pin-input","field",n.className),ref:R,onChange:(0,p.composeEventHandlers)(n.onChange,r=>{if(e.disabled)return;let a=r.target.value;if(a===""){d("");return}e.type==="numeric"&&!oe.test(a)||(d(a),t<e.length-1&&e.focusIndex(t+1))}),onKeyDown:(0,p.composeEventHandlers)(n.onKeyDown,r=>{if(e.disabled)return;let a=(0,C.directionalKey)(r.key,r.currentTarget,s);if(a==="Backspace"){if(e.readOnly)return;if(r.preventDefault(),c)d("");else if(t>0){let u=e.value.split("");u[t-1]="",e.setValue(u.join("").slice(0,e.length)),e.focusIndex(t-1)}}else a==="ArrowLeft"?t>0&&(r.preventDefault(),e.focusIndex(t-1)):a==="ArrowRight"&&t<e.length-1&&(r.preventDefault(),e.focusIndex(t+1))}),onPaste:(0,p.composeEventHandlers)(n.onPaste,r=>{if(e.disabled||e.readOnly)return;r.preventDefault();let a=e.sanitizePaste(r.clipboardData.getData("text")),u=e.type==="numeric"?a.replace(/[^0-9]/g,""):a;if(!u)return;let m=e.value.split(""),P=t-1;for(let f=0;f<u.length&&t+f<e.length;f++)m[t+f]=u[f],P=t+f;e.setValue(m.join("").slice(0,e.length)),e.focusIndex(Math.min(P+1,e.length-1))})})});w.displayName="PinInputField";0&&(module.exports={PinInput,PinInputField,PinInputProvider,usePinInputContext});
+'use client';
+"use strict";var Ae=Object.create;var k=Object.defineProperty;var xe=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var Le=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var we=(t,n)=>{for(var r in n)k(t,r,{get:n[r],enumerable:!0})},X=(t,n,r,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of He(n))!Ee.call(t,i)&&i!==r&&k(t,i,{get:()=>n[i],enumerable:!(e=xe(n,i))||e.enumerable});return t};var _=(t,n,r)=>(r=t!=null?Ae(Le(t)):{},X(n||!t||!t.__esModule?k(r,"default",{value:t,enumerable:!0}):r,t)),Oe=t=>X(k({},"__esModule",{value:!0}),t);var je={};we(je,{PinInput:()=>T,PinInputField:()=>A,PinInputProvider:()=>ae,pinInputDigitLabel:()=>ie.pinInputDigitLabel,usePinInputContext:()=>O});module.exports=Oe(je);var o=_(require("react"),1),Y=require("../utils/appearance.cjs"),Z=require("../utils/createContext.cjs"),ee=require("../utils/dev-mode.cjs"),x=require("../utils/formControl.cjs"),te=require("../utils/hiddenInput.cjs"),ne=require("../utils/part.cjs"),H=require("../utils/pin-chars.cjs"),re=require("../utils/primitive.cjs"),S=require("../utils/useCallbackRef.cjs"),oe=require("../utils/useControllableState.cjs");var D=_(require("react"),1),G=require("../utils/composeRefs.cjs"),F=require("../utils/direction.cjs"),Q=require("../utils/part.cjs"),R=require("../utils/primitive.cjs");var U=require("react/jsx-runtime"),A=({index:t,ref:n,...r})=>{let e=O("PinInputField"),i=(0,F.useDirection)(),f=D.useRef(null),c=(0,G.useComposedRefs)(n,f,a=>e.registerRef(t,a)),p=e.charAt(t);D.useEffect(()=>{f.current&&(f.current.defaultValue=p)},[p]);let P=p!=="",u=a=>e.setCharAt(t,a);return(0,U.jsx)(R.Primitive.input,{inputMode:e.type==="numeric"?"numeric":"text",autoComplete:e.otp&&t===0?"one-time-code":"off",type:e.mask&&P?"password":"text",placeholder:e.placeholder,maxLength:1,disabled:e.disabled,readOnly:e.readOnly,"aria-label":e.digitLabel(t+1,e.length),"aria-readonly":e.readOnly?!0:void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...r,value:p,...(0,Q.skdxPart)("pin-input","field",r.className),ref:c,onChange:(0,R.composeEventHandlers)(r.onChange,a=>{if(e.disabled)return;let s=a.target.value;if(s===""){u("");return}if(!e.accepts(s)){a.target.value=p,e.reportInvalid(s,t);return}u(s),t<e.length-1&&e.focusIndex(t+1)}),onFocus:(0,R.composeEventHandlers)(r.onFocus,a=>{e.selectOnFocus&&a.currentTarget.select()}),onKeyDown:(0,R.composeEventHandlers)(r.onKeyDown,a=>{if(e.disabled)return;let s=(0,F.directionalKey)(a.key,a.currentTarget,i);if(s==="Backspace"){if(e.readOnly)return;a.preventDefault(),p?u(""):t>0&&(e.setCharAt(t-1,""),e.focusIndex(t-1))}else if(s==="Delete"){if(e.readOnly)return;a.preventDefault(),p&&u("")}else s==="ArrowLeft"?t>0&&(a.preventDefault(),e.focusIndex(t-1)):s==="ArrowRight"&&t<e.length-1&&(a.preventDefault(),e.focusIndex(t+1))}),onPaste:(0,R.composeEventHandlers)(r.onPaste,a=>{if(e.disabled||e.readOnly)return;a.preventDefault();let s=e.sanitizePaste(a.clipboardData.getData("text")),m="";for(let h of s)e.accepts(h)?m+=h:e.reportInvalid(h,Math.min(t+m.length,e.length-1));if(!m)return;let d=e.fillFrom(t,m);e.focusIndex(Math.min(d+1,e.length-1))})})};A.displayName="PinInputField";var y=require("react/jsx-runtime");function W({length:t}){return(0,y.jsx)(y.Fragment,{children:Array.from({length:t},(n,r)=>(0,y.jsx)(A,{index:r},r))})}function V(t,n){return Array.from({length:n},(r,e)=>t[e]??"")}function M(t){return t.join("")}var g=require("react/jsx-runtime"),[ae,O]=(0,Z.createSafeContext)("PinInput");function Ve(t,n,r){return{"aria-invalid":t?!0:void 0,"data-disabled":n?"":void 0,"data-invalid":t?"":void 0,"data-readonly":r?"":void 0}}function Me({value:t,defaultValue:n="",onValueChange:r,rootRef:e,form:i}){let[f="",c]=(0,oe.useControllableState)({prop:t,defaultProp:n,onChange:r}),p=o.useRef(f);return(0,x.useFormReset)(e,()=>c(n||p.current),i),[f,c]}function Se(t,n){let r=(0,S.useCallbackRef)(t),e=(0,S.useCallbackRef)(n??(()=>{})),i=o.useCallback((f,c)=>e({value:f,index:c}),[e]);return{handleValueComplete:r,reportInvalid:i}}function Te(t=H.pinInputDigitLabel){let n=o.useRef(t);return o.useInsertionEffect(()=>{n.current=t}),o.useCallback((r,e)=>n.current(r,e),[])}function Ne(t,n,r){let[e,i]=o.useState(()=>V(t,n));(e.length!==n||M(e)!==t.slice(0,n))&&i(V(t,n));let f=o.useCallback(u=>e[u]??"",[e]),c=o.useCallback(u=>{let a=[...e];u(a),i(a),r(M(a))},[r,e]),p=o.useCallback((u,a)=>{c(s=>{s[u]=a})},[c]),P=o.useCallback((u,a)=>{let s=u-1;return c(m=>{for(let d=0;d<a.length&&u+d<n;d++)m[u+d]=a[d],s=u+d}),s},[c,n]);return{charAt:f,setCharAt:p,fillFrom:P}}function $e({name:t,value:n,required:r,disabled:e,form:i,length:f,hiddenInputRef:c}){return t?(0,g.jsx)(te.HiddenInput,{ref:c,type:"text",name:t,value:n,required:r,disabled:e,form:i,pattern:r?`.{${f}}`:void 0}):null}var T=({value:t,defaultValue:n="",onValueChange:r,length:e=6,disabled:i=!1,invalid:f=!1,readOnly:c=!1,type:p="text",pattern:P,placeholder:u,otp:a=!0,autoFocus:s=!1,blurOnComplete:m=!1,selectOnFocus:d=!1,mask:h=!1,onValueComplete:se,onValueInvalid:le,autoSubmit:N=!1,sanitize:$,name:ue,form:j,required:ce=!1,digitLabel:fe,children:pe,ref:de,density:me,shape:Re,size:Pe,...L})=>{let v=o.useRef([]),I=o.useRef(null),E=o.useRef(null),[b,z]=Me({value:t,defaultValue:n,onValueChange:r,rootRef:I,form:j}),{handleValueComplete:B,reportInvalid:Ie}=Se(se,le),be=o.useMemo(()=>(0,H.pinCharAcceptor)(p,P),[p,P]),K=o.useRef(b),q=o.useRef($);o.useInsertionEffect(()=>{K.current=b,q.current=$});let ge=Te(fe),he=o.useCallback(l=>q.current?.(l)??l,[]),J=o.useCallback(l=>{let w=K.current.length===e;z(l),!(l.length!==e||w)&&(B(l),m&&(v.current.find(Fe=>Fe===document.activeElement)??v.current[e-1])?.blur(),N&&(E.current?.form??I.current?.closest("form"))?.requestSubmit())},[e,z,B,m,N]),{charAt:ve,setCharAt:ye,fillFrom:Ce}=Ne(b,e,J),ke=o.useCallback((l,w)=>{v.current[l]=w},[]);o.useEffect(()=>{if(!(0,ee.isDevMode)())return;let l=v.current.filter(Boolean).length;l!==0&&l!==e&&console.warn(`PinInput: ${l} PinInputField${l===1?"":"s"} rendered but length is ${e}. Render exactly one field per position, with contiguous \`index\` values from 0 to ${e-1} \u2014 otherwise the value can never complete and value-complete never fires.`)},[e,b]);let C=o.useCallback(l=>{v.current[l]?.focus()},[]),De=o.useRef(s);return o.useEffect(()=>{De.current&&C(0)},[C]),o.useImperativeHandle(de,()=>{let l={...(0,x.formValidityHandle)(E),clear:()=>J(""),focus:()=>C(0)};return I.current?(Object.defineProperties(I.current,Object.getOwnPropertyDescriptors(l)),I.current):l}),(0,g.jsxs)(ae,{value:b,length:e,type:p,mask:h,disabled:i,invalid:f,readOnly:c,placeholder:u,otp:a,selectOnFocus:d,accepts:be,reportInvalid:Ie,charAt:ve,setCharAt:ye,fillFrom:Ce,focusIndex:C,registerRef:ke,sanitizePaste:he,digitLabel:ge,children:[(0,g.jsx)(re.Primitive.div,{role:"group",...Ve(f,i,c),...L,...(0,Y.appearanceAttrs)({density:me,shape:Re,size:Pe},L),...(0,ne.skdxPart)("pin-input","root",L.className),ref:I,children:pe??(0,g.jsx)(W,{length:e})}),$e({name:ue,value:b,required:ce,disabled:i,form:j,length:e,hiddenInputRef:E})]})};T.displayName="PinInput";var ie=require("../utils/pin-chars.cjs");0&&(module.exports={PinInput,PinInputField,PinInputProvider,pinInputDigitLabel,usePinInputContext});

package/dist/pin-input/PinInput.d.cts

@@ -1,37 +1,19 @@
 import * as React from 'react';
-import type { PinInputContextValue, PinInputProps } from './types.cjs';
-export declare const PinInputProvider: {
-    (props: PinInputContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, usePinInputContext: (consumerName: string) => PinInputContextValue;
+import type { PinInputContextValue, PinInputHandle, PinInputProps } from './types.cjs';
+export declare const PinInputProvider: React.FC<PinInputContextValue & {
+    children: React.ReactNode;
+}>, usePinInputContext: (consumerName: string) => PinInputContextValue;
 /**
- * Root of a one-time-passcode input: owns the joined string value and hands
- * it down to `length` `PinInputField` boxes via context. Renders a plain
- * `<div data-disabled data-invalid data-readonly>` — layout of the boxes is
- * entirely up to your CSS. Built as N real `<input maxLength=1>` elements
- * behaving as a single logical string value — the standard, most robust
- * implementation approach (vs. one hidden input + painted boxes).
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * Fires `onValueComplete` once the last box is filled — with `autoSubmit`, it
- * also calls `requestSubmit()` on the surrounding form, which is what a
- * one-time-passcode screen usually wants.
- *
- * With a `name` a visually-hidden native input submits the joined value as one
- * entry, a form reset restores `defaultValue`, and the ref carries
- * `checkValidity()`/`reportValidity()` — with `required`, an incomplete pin
- * reports `valueMissing`.
+ * A one-time-passcode input that owns the joined string value and distributes it to `length` `PinInputField` boxes via context.
  *
  * @example
  * ```tsx
- * <PinInput length={6} type="numeric">
- *   {Array.from({ length: 6 }, (_, i) => (
- *     <PinInputField key={i} index={i} />
- *   ))}
- * </PinInput>
+ * <PinInput length={6} type="numeric" />
  * ```
  */
-export declare const PinInput: React.ForwardRefExoticComponent<Omit<PinInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PinInput: {
+    ({ value: valueProp, defaultValue, onValueChange, length, disabled, invalid, readOnly, type, pattern, placeholder, otp, autoFocus, blurOnComplete, selectOnFocus, mask, onValueComplete, onValueInvalid, autoSubmit, sanitize, name, form, required, digitLabel, children, ref: forwardedRef, density, shape, size, ...props }: Omit<PinInputProps, "ref"> & {
+        ref?: React.Ref<PinInputHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/pin-input/PinInput.d.ts

@@ -1,37 +1,19 @@
 import * as React from 'react';
-import type { PinInputContextValue, PinInputProps } from './types.js';
-export declare const PinInputProvider: {
-    (props: PinInputContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, usePinInputContext: (consumerName: string) => PinInputContextValue;
+import type { PinInputContextValue, PinInputHandle, PinInputProps } from './types.js';
+export declare const PinInputProvider: React.FC<PinInputContextValue & {
+    children: React.ReactNode;
+}>, usePinInputContext: (consumerName: string) => PinInputContextValue;
 /**
- * Root of a one-time-passcode input: owns the joined string value and hands
- * it down to `length` `PinInputField` boxes via context. Renders a plain
- * `<div data-disabled data-invalid data-readonly>` — layout of the boxes is
- * entirely up to your CSS. Built as N real `<input maxLength=1>` elements
- * behaving as a single logical string value — the standard, most robust
- * implementation approach (vs. one hidden input + painted boxes).
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * Fires `onValueComplete` once the last box is filled — with `autoSubmit`, it
- * also calls `requestSubmit()` on the surrounding form, which is what a
- * one-time-passcode screen usually wants.
- *
- * With a `name` a visually-hidden native input submits the joined value as one
- * entry, a form reset restores `defaultValue`, and the ref carries
- * `checkValidity()`/`reportValidity()` — with `required`, an incomplete pin
- * reports `valueMissing`.
+ * A one-time-passcode input that owns the joined string value and distributes it to `length` `PinInputField` boxes via context.
  *
  * @example
  * ```tsx
- * <PinInput length={6} type="numeric">
- *   {Array.from({ length: 6 }, (_, i) => (
- *     <PinInputField key={i} index={i} />
- *   ))}
- * </PinInput>
+ * <PinInput length={6} type="numeric" />
  * ```
  */
-export declare const PinInput: React.ForwardRefExoticComponent<Omit<PinInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PinInput: {
+    ({ value: valueProp, defaultValue, onValueChange, length, disabled, invalid, readOnly, type, pattern, placeholder, otp, autoFocus, blurOnComplete, selectOnFocus, mask, onValueComplete, onValueInvalid, autoSubmit, sanitize, name, form, required, digitLabel, children, ref: forwardedRef, density, shape, size, ...props }: Omit<PinInputProps, "ref"> & {
+        ref?: React.Ref<PinInputHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/pin-input/PinInput.js

@@ -1 +1,2 @@
-import*as a from"react";import{createSafeContext as A}from"../utils/createContext.js";import{useFormReset as N,useFormValidityHandle as z}from"../utils/formControl.js";import{HiddenInput as K}from"../utils/hiddenInput.js";import{skdxPart as q}from"../utils/part.js";import{Primitive as S}from"../utils/primitive.js";import{useCallbackRef as $}from"../utils/useCallbackRef.js";import{useControllableState as j}from"../utils/useControllableState.js";import{jsx as w,jsxs as _}from"react/jsx-runtime";var[B,F]=A("PinInput"),U=a.forwardRef(({value:t,defaultValue:l="",onValueChange:R,length:e=6,disabled:f=!1,invalid:m=!1,readOnly:u=!1,type:y="text",mask:c=!1,onValueComplete:n,autoSubmit:r=!1,sanitize:i,name:p,required:d=!1,...s},E)=>{let[P="",h]=j({prop:t,defaultProp:l,onChange:R}),C=a.useRef([]),I=a.useRef(null),b=a.useRef(null);z(E,I,b),N(I,()=>h(l));let k=$(n),H=a.useRef(P);H.current=P;let D=a.useRef(i);D.current=i;let L=a.useCallback(o=>D.current?.(o)??o,[]),V=a.useCallback(o=>{let v=H.current.length===e;h(o),!(o.length!==e||v)&&(k(o),r&&I.current?.closest("form")?.requestSubmit())},[e,h,k,r]),T=a.useCallback((o,v)=>{C.current[o]=v},[]),O=a.useCallback(o=>{C.current[o]?.focus()},[]);return _(B,{value:P,length:e,type:y,mask:c,disabled:f,invalid:m,readOnly:u,setValue:V,focusIndex:O,registerRef:T,sanitizePaste:L,children:[w(S.div,{"data-disabled":f?"":void 0,"data-invalid":m?"":void 0,"data-readonly":u?"":void 0,...s,...q("pin-input","root",s.className),ref:I}),p&&w(K,{ref:b,type:"text",name:p,value:P,required:d,disabled:f,pattern:d?`.{${e}}`:void 0})]})});U.displayName="PinInput";import*as M from"react";import{useComposedRefs as G}from"../utils/composeRefs.js";import{directionalKey as J,useDirection as Q}from"../utils/direction.js";import{skdxPart as W}from"../utils/part.js";import{composeEventHandlers as g,Primitive as X}from"../utils/primitive.js";import{jsx as Z}from"react/jsx-runtime";var Y=/^[0-9]$/,x=M.forwardRef(({index:t,...l},R)=>{let e=F("PinInputField"),f=Q(),m=G(R,n=>e.registerRef(t,n)),u=e.value[t]??"",y=u!=="",c=n=>{let r=e.value.split("");r[t]=n,e.setValue(r.join("").slice(0,e.length))};return Z(X.input,{inputMode:e.type==="numeric"?"numeric":"text",autoComplete:t===0?"one-time-code":"off",type:e.mask&&y?"password":"text",maxLength:1,disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...l,value:u,...W("pin-input","field",l.className),ref:m,onChange:g(l.onChange,n=>{if(e.disabled)return;let r=n.target.value;if(r===""){c("");return}e.type==="numeric"&&!Y.test(r)||(c(r),t<e.length-1&&e.focusIndex(t+1))}),onKeyDown:g(l.onKeyDown,n=>{if(e.disabled)return;let r=J(n.key,n.currentTarget,f);if(r==="Backspace"){if(e.readOnly)return;if(n.preventDefault(),u)c("");else if(t>0){let i=e.value.split("");i[t-1]="",e.setValue(i.join("").slice(0,e.length)),e.focusIndex(t-1)}}else r==="ArrowLeft"?t>0&&(n.preventDefault(),e.focusIndex(t-1)):r==="ArrowRight"&&t<e.length-1&&(n.preventDefault(),e.focusIndex(t+1))}),onPaste:g(l.onPaste,n=>{if(e.disabled||e.readOnly)return;n.preventDefault();let r=e.sanitizePaste(n.clipboardData.getData("text")),i=e.type==="numeric"?r.replace(/[^0-9]/g,""):r;if(!i)return;let p=e.value.split(""),d=t-1;for(let s=0;s<i.length&&t+s<e.length;s++)p[t+s]=i[s],d=t+s;e.setValue(p.join("").slice(0,e.length)),e.focusIndex(Math.min(d+1,e.length-1))})})});x.displayName="PinInputField";export{U as PinInput,x as PinInputField,B as PinInputProvider,F as usePinInputContext};
+'use client';
+import*as n from"react";import{appearanceAttrs as Pe}from"../utils/appearance.js";import{createSafeContext as Ie}from"../utils/createContext.js";import{isDevMode as be}from"../utils/dev-mode.js";import{formValidityHandle as ge,useFormReset as he}from"../utils/formControl.js";import{HiddenInput as ve}from"../utils/hiddenInput.js";import{skdxPart as ye}from"../utils/part.js";import{pinCharAcceptor as Ce,pinInputDigitLabel as ke}from"../utils/pin-chars.js";import{Primitive as De}from"../utils/primitive.js";import{useCallbackRef as z}from"../utils/useCallbackRef.js";import{useControllableState as Fe}from"../utils/useControllableState.js";import*as y from"react";import{useComposedRefs as ue}from"../utils/composeRefs.js";import{directionalKey as ce,useDirection as fe}from"../utils/direction.js";import{skdxPart as pe}from"../utils/part.js";import{composeEventHandlers as v,Primitive as de}from"../utils/primitive.js";import{jsx as me}from"react/jsx-runtime";var F=({index:t,ref:a,...o})=>{let e=N("PinInputField"),p=fe(),c=y.useRef(null),u=ue(a,c,r=>e.registerRef(t,r)),f=e.charAt(t);y.useEffect(()=>{c.current&&(c.current.defaultValue=f)},[f]);let R=f!=="",l=r=>e.setCharAt(t,r);return me(de.input,{inputMode:e.type==="numeric"?"numeric":"text",autoComplete:e.otp&&t===0?"one-time-code":"off",type:e.mask&&R?"password":"text",placeholder:e.placeholder,maxLength:1,disabled:e.disabled,readOnly:e.readOnly,"aria-label":e.digitLabel(t+1,e.length),"aria-readonly":e.readOnly?!0:void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...o,value:f,...pe("pin-input","field",o.className),ref:u,onChange:v(o.onChange,r=>{if(e.disabled)return;let i=r.target.value;if(i===""){l("");return}if(!e.accepts(i)){r.target.value=f,e.reportInvalid(i,t);return}l(i),t<e.length-1&&e.focusIndex(t+1)}),onFocus:v(o.onFocus,r=>{e.selectOnFocus&&r.currentTarget.select()}),onKeyDown:v(o.onKeyDown,r=>{if(e.disabled)return;let i=ce(r.key,r.currentTarget,p);if(i==="Backspace"){if(e.readOnly)return;r.preventDefault(),f?l(""):t>0&&(e.setCharAt(t-1,""),e.focusIndex(t-1))}else if(i==="Delete"){if(e.readOnly)return;r.preventDefault(),f&&l("")}else i==="ArrowLeft"?t>0&&(r.preventDefault(),e.focusIndex(t-1)):i==="ArrowRight"&&t<e.length-1&&(r.preventDefault(),e.focusIndex(t+1))}),onPaste:v(o.onPaste,r=>{if(e.disabled||e.readOnly)return;r.preventDefault();let i=e.sanitizePaste(r.clipboardData.getData("text")),m="";for(let b of i)e.accepts(b)?m+=b:e.reportInvalid(b,Math.min(t+m.length,e.length-1));if(!m)return;let d=e.fillFrom(t,m);e.focusIndex(Math.min(d+1,e.length-1))})})};F.displayName="PinInputField";import{Fragment as Re,jsx as $}from"react/jsx-runtime";function j({length:t}){return $(Re,{children:Array.from({length:t},(a,o)=>$(F,{index:o},o))})}function A(t,a){return Array.from({length:a},(o,e)=>t[e]??"")}function x(t){return t.join("")}import{jsx as H,jsxs as Ve}from"react/jsx-runtime";var[Ae,N]=Ie("PinInput");function xe(t,a,o){return{"aria-invalid":t?!0:void 0,"data-disabled":a?"":void 0,"data-invalid":t?"":void 0,"data-readonly":o?"":void 0}}function He({value:t,defaultValue:a="",onValueChange:o,rootRef:e,form:p}){let[c="",u]=Fe({prop:t,defaultProp:a,onChange:o}),f=n.useRef(c);return he(e,()=>u(a||f.current),p),[c,u]}function Le(t,a){let o=z(t),e=z(a??(()=>{})),p=n.useCallback((c,u)=>e({value:c,index:u}),[e]);return{handleValueComplete:o,reportInvalid:p}}function Ee(t=ke){let a=n.useRef(t);return n.useInsertionEffect(()=>{a.current=t}),n.useCallback((o,e)=>a.current(o,e),[])}function we(t,a,o){let[e,p]=n.useState(()=>A(t,a));(e.length!==a||x(e)!==t.slice(0,a))&&p(A(t,a));let c=n.useCallback(l=>e[l]??"",[e]),u=n.useCallback(l=>{let r=[...e];l(r),p(r),o(x(r))},[o,e]),f=n.useCallback((l,r)=>{u(i=>{i[l]=r})},[u]),R=n.useCallback((l,r)=>{let i=l-1;return u(m=>{for(let d=0;d<r.length&&l+d<a;d++)m[l+d]=r[d],i=l+d}),i},[u,a]);return{charAt:c,setCharAt:f,fillFrom:R}}function Oe({name:t,value:a,required:o,disabled:e,form:p,length:c,hiddenInputRef:u}){return t?H(ve,{ref:u,type:"text",name:t,value:a,required:o,disabled:e,form:p,pattern:o?`.{${c}}`:void 0}):null}var B=({value:t,defaultValue:a="",onValueChange:o,length:e=6,disabled:p=!1,invalid:c=!1,readOnly:u=!1,type:f="text",pattern:R,placeholder:l,otp:r=!0,autoFocus:i=!1,blurOnComplete:m=!1,selectOnFocus:d=!1,mask:b=!1,onValueComplete:K,onValueInvalid:q,autoSubmit:L=!1,sanitize:E,name:J,form:w,required:X=!1,digitLabel:_,children:G,ref:Q,density:U,shape:W,size:Y,...C})=>{let g=n.useRef([]),P=n.useRef(null),k=n.useRef(null),[I,O]=He({value:t,defaultValue:a,onValueChange:o,rootRef:P,form:w}),{handleValueComplete:V,reportInvalid:Z}=Le(K,q),ee=n.useMemo(()=>Ce(f,R),[f,R]),M=n.useRef(I),S=n.useRef(E);n.useInsertionEffect(()=>{M.current=I,S.current=E});let te=Ee(_),ne=n.useCallback(s=>S.current?.(s)??s,[]),T=n.useCallback(s=>{let D=M.current.length===e;O(s),!(s.length!==e||D)&&(V(s),m&&(g.current.find(le=>le===document.activeElement)??g.current[e-1])?.blur(),L&&(k.current?.form??P.current?.closest("form"))?.requestSubmit())},[e,O,V,m,L]),{charAt:re,setCharAt:oe,fillFrom:ae}=we(I,e,T),ie=n.useCallback((s,D)=>{g.current[s]=D},[]);n.useEffect(()=>{if(!be())return;let s=g.current.filter(Boolean).length;s!==0&&s!==e&&console.warn(`PinInput: ${s} PinInputField${s===1?"":"s"} rendered but length is ${e}. Render exactly one field per position, with contiguous \`index\` values from 0 to ${e-1} \u2014 otherwise the value can never complete and value-complete never fires.`)},[e,I]);let h=n.useCallback(s=>{g.current[s]?.focus()},[]),se=n.useRef(i);return n.useEffect(()=>{se.current&&h(0)},[h]),n.useImperativeHandle(Q,()=>{let s={...ge(k),clear:()=>T(""),focus:()=>h(0)};return P.current?(Object.defineProperties(P.current,Object.getOwnPropertyDescriptors(s)),P.current):s}),Ve(Ae,{value:I,length:e,type:f,mask:b,disabled:p,invalid:c,readOnly:u,placeholder:l,otp:r,selectOnFocus:d,accepts:ee,reportInvalid:Z,charAt:re,setCharAt:oe,fillFrom:ae,focusIndex:h,registerRef:ie,sanitizePaste:ne,digitLabel:te,children:[H(De.div,{role:"group",...xe(c,p,u),...C,...Pe({density:U,shape:W,size:Y},C),...ye("pin-input","root",C.className),ref:P,children:G??H(j,{length:e})}),Oe({name:J,value:I,required:X,disabled:p,form:w,length:e,hiddenInputRef:k})]})};B.displayName="PinInput";import{pinInputDigitLabel as ct}from"../utils/pin-chars.js";export{B as PinInput,F as PinInputField,Ae as PinInputProvider,ct as pinInputDigitLabel,N as usePinInputContext};

package/dist/pin-input/PinInputAnatomy.d.cts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+/** @internal The anatomy a {@link PinInput} draws when given no children: `length` boxes, one `PinInputField` per position. */
+export declare function PinInputAnatomy({ length }: {
+    length: number;
+}): JSX.Element;

package/dist/pin-input/PinInputAnatomy.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+/** @internal The anatomy a {@link PinInput} draws when given no children: `length` boxes, one `PinInputField` per position. */
+export declare function PinInputAnatomy({ length }: {
+    length: number;
+}): JSX.Element;

package/dist/pin-input/PinInputField.d.cts

@@ -1,16 +1,7 @@
 import * as React from 'react';
 import type { PinInputFieldProps } from './types.cjs';
 /**
- * A single character box of a {@link PinInput}. Reads/writes its character
- * at `index` in the shared value via context. Sets `maxLength={1}`,
- * `inputMode` from the pin's `type`, `autoComplete="one-time-code"` on the
- * first box, renders `type="password"` once filled when `mask` is set, and
- * carries `aria-invalid`/`data-invalid` plus the native `readOnly` attribute
- * with `aria-readonly`/`data-readonly` from the root's `invalid`/`readOnly`
- * props. Typing or pasting auto-advances focus to the next box; Backspace on
- * an empty box clears and focuses the previous one; Arrow Left/Right move
- * focus between boxes; pasting a multi-character string fills consecutive
- * boxes from `index` onward.
+ * A single character box of a {@link PinInput} that reads and writes its character at `index` via context.
  *
  * @example
  * ```tsx
@@ -22,4 +13,7 @@ import type { PinInputFieldProps } from './types.cjs';
  * </PinInput>
  * ```
  */
-export declare const PinInputField: React.ForwardRefExoticComponent<Omit<PinInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const PinInputField: {
+    ({ index, ref: forwardedRef, ...props }: PinInputFieldProps): React.ReactNode;
+    displayName: string;
+};

package/dist/pin-input/PinInputField.d.ts

@@ -1,16 +1,7 @@
 import * as React from 'react';
 import type { PinInputFieldProps } from './types.js';
 /**
- * A single character box of a {@link PinInput}. Reads/writes its character
- * at `index` in the shared value via context. Sets `maxLength={1}`,
- * `inputMode` from the pin's `type`, `autoComplete="one-time-code"` on the
- * first box, renders `type="password"` once filled when `mask` is set, and
- * carries `aria-invalid`/`data-invalid` plus the native `readOnly` attribute
- * with `aria-readonly`/`data-readonly` from the root's `invalid`/`readOnly`
- * props. Typing or pasting auto-advances focus to the next box; Backspace on
- * an empty box clears and focuses the previous one; Arrow Left/Right move
- * focus between boxes; pasting a multi-character string fills consecutive
- * boxes from `index` onward.
+ * A single character box of a {@link PinInput} that reads and writes its character at `index` via context.
  *
  * @example
  * ```tsx
@@ -22,4 +13,7 @@ import type { PinInputFieldProps } from './types.js';
  * </PinInput>
  * ```
  */
-export declare const PinInputField: React.ForwardRefExoticComponent<Omit<PinInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const PinInputField: {
+    ({ index, ref: forwardedRef, ...props }: PinInputFieldProps): React.ReactNode;
+    displayName: string;
+};

package/dist/pin-input/index.d.cts

@@ -1,3 +1,4 @@
-export * from './PinInput.cjs';
-export { PinInputField } from './PinInputField.cjs';
-export type { PinInputProps, PinInputHandle, PinInputFieldProps } from './types.cjs';
+export { PinInput } from './PinInput.cjs';
+export { pinInputDigitLabel } from '../utils/pin-chars.cjs';
+export type { PinInputType } from '../utils/pin-chars.cjs';
+export type { PinInputProps, PinInputHandle, PinInputInvalidDetail } from './types.cjs';

package/dist/pin-input/index.d.ts

@@ -1,3 +1,4 @@
-export * from './PinInput.js';
-export { PinInputField } from './PinInputField.js';
-export type { PinInputProps, PinInputHandle, PinInputFieldProps } from './types.js';
+export { PinInput } from './PinInput.js';
+export { pinInputDigitLabel } from '../utils/pin-chars.js';
+export type { PinInputType } from '../utils/pin-chars.js';
+export type { PinInputProps, PinInputHandle, PinInputInvalidDetail } from './types.js';

package/dist/pin-input/primitives.d.cts

@@ -0,0 +1,18 @@
+/**
+ * `PinInput` and `PinInputField` primitives.
+ *
+ * @example
+ * ```tsx
+ * import { PinInput, PinInputField } from '@skdx/react/primitives/pin-input';
+ *
+ * <PinInput length={4}>
+ *   <PinInputField index={0} />
+ *   <PinInputField index={1} />
+ *   <PinInputField index={2} />
+ *   <PinInputField index={3} />
+ * </PinInput>
+ * ```
+ */
+export { PinInput } from './PinInput.cjs';
+export { PinInputField } from './PinInputField.cjs';
+export type { PinInputProps, PinInputHandle, PinInputFieldProps } from './types.cjs';

package/dist/pin-input/primitives.d.ts

@@ -0,0 +1,18 @@
+/**
+ * `PinInput` and `PinInputField` primitives.
+ *
+ * @example
+ * ```tsx
+ * import { PinInput, PinInputField } from '@skdx/react/primitives/pin-input';
+ *
+ * <PinInput length={4}>
+ *   <PinInputField index={0} />
+ *   <PinInputField index={1} />
+ *   <PinInputField index={2} />
+ *   <PinInputField index={3} />
+ * </PinInput>
+ * ```
+ */
+export { PinInput } from './PinInput.js';
+export { PinInputField } from './PinInputField.js';
+export type { PinInputProps, PinInputHandle, PinInputFieldProps } from './types.js';

package/dist/pin-input/slots.d.cts

@@ -0,0 +1,4 @@
+/** Split value into slots (left-packed for external values, holes from skipped boxes). */
+export declare function toPinSlots(value: string, length: number): string[];
+/** Join slots back into string, omitting holes. */
+export declare function joinPinSlots(slots: readonly string[]): string;

package/dist/pin-input/slots.d.ts

@@ -0,0 +1,4 @@
+/** Split value into slots (left-packed for external values, holes from skipped boxes). */
+export declare function toPinSlots(value: string, length: number): string[];
+/** Join slots back into string, omitting holes. */
+export declare function joinPinSlots(slots: readonly string[]): string;