@skdx/react 0.28.0 → 0.29.0

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

@@ -1,29 +1,10 @@
 import * as React from 'react';
-import type { PasswordInputContextValue, PasswordInputProps } from './types.js';
-export declare const PasswordInputProvider: {
-    (props: PasswordInputContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, usePasswordInputContext: (consumerName: string) => PasswordInputContextValue;
+import type { PasswordInputContextValue, PasswordInputHandle, PasswordInputProps } from './types.js';
+export declare const PasswordInputProvider: React.FC<PasswordInputContextValue & {
+    children: React.ReactNode;
+}>, usePasswordInputContext: (consumerName: string) => PasswordInputContextValue;
 /**
- * Root of a password input: a {@link TextField} that also owns character visibility,
- * handing it to `PasswordInputField` (flips `type`) and `PasswordInputToggle` (flips state) via context.
- *
- * Value is `TextField`'s (composes rather than re-declares it), so `value`/`defaultValue`/`onValueChange`,
- * `disabled`, `invalid`, `required` behave identically; `data-disabled`/`data-invalid` land in same places.
- * Only state added here is visibility.
- *
- * Every visibility change announced politely ("Password shown" / "Password hidden").
- * Masked-to-plaintext is purely visual; without announcement, screen-reader user gets `aria-pressed`
- * and never learns password is now on screen. Announcement driven by resolved state, not click,
- * so controlled parent refusing change doesn't produce false announcement.
- *
- * Works controlled (`visible` + `onVisibleChange`) or uncontrolled (`defaultVisible`),
- * independently of value control. Inherits `clearable`/`leading`/`placeholder` from `TextFieldProps` minus `trailing`.
- * No `label` or `description`; wrap in `PasswordInputField` for those. `trailing` deliberately not inherited;
- * derived `PasswordInputToggle` is trailing adornment already. Given no `children`, draws same derived anatomy
- * as `TextField` with masked `PasswordInputField` and `PasswordInputToggle` when `showToggle`.
+ * Root of a password input that composes {@link TextField} and shares visibility state via context.
  *
  * @example
  * ```tsx
@@ -33,4 +14,9 @@ export declare const PasswordInputProvider: {
  * </PasswordInput>
  * ```
  */
-export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PasswordInput: {
+    ({ visible: visibleProp, defaultVisible, onVisibleChange, getVisibilityAnnouncement, revealLabel, readOnly, showToggle, clearable, clearLabel, leading, placeholder, children, ref: forwardedRef, ...props }: Omit<PasswordInputProps, "ref"> & {
+        ref?: React.Ref<PasswordInputHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/password-input/PasswordInput.js

@@ -1 +1,2 @@
-import*as s from"react";import{TextField as G}from"../text-field/TextField.js";import{useComposedRefs as J}from"../utils/composeRefs.js";import{createSafeContext as K}from"../utils/createContext.js";import{useFormReset as Q}from"../utils/formControl.js";import{announce as U}from"../utils/liveAnnouncer.js";import{skdxPart as W}from"../utils/part.js";import{useCallbackRef as X}from"../utils/useCallbackRef.js";import{useControllableState as Y}from"../utils/useControllableState.js";import{TextFieldClearButton as B}from"../text-field/TextField.js";import{TextFieldSlot as D}from"../text-field/TextField.js";import*as I from"react";import{TextFieldInput as E}from"../text-field/TextField.js";import{skdxPart as H}from"../utils/part.js";import{jsx as S}from"react/jsx-runtime";var m=I.forwardRef((o,t)=>{let e=n("PasswordInputField");return S(E,{type:e.visible?"text":"password",readOnly:e.readOnly,autoComplete:"current-password","data-state":e.visible?"visible":"hidden",...o,...H("password-input","field",o.className),ref:t})});m.displayName="PasswordInputField";import*as g from"react";import{skdxPart as M}from"../utils/part.js";import{composeEventHandlers as V,Primitive as O}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var u=g.forwardRef((o,t)=>{let e=n("PasswordInputToggle");return A(O.button,{type:"button","aria-pressed":e.visible,"aria-label":e.revealLabel,disabled:e.disabled,"data-state":e.visible?"visible":"hidden","data-disabled":e.disabled?"":void 0,...o,...M("password-input","toggle",o.className),ref:t,onClick:V(o.onClick,()=>e.setVisible(!e.visible))})});u.displayName="PasswordInputToggle";import{Fragment as q,jsx as d,jsxs as z}from"react/jsx-runtime";function x({clearable:o,clearLabel:t,leading:e,placeholder:i,showToggle:p}){return z(q,{children:[e?d(D,{side:"start",children:e}):null,d(m,{placeholder:i}),o?d(B,{label:t}):null,p?d(u,{}):null]})}import{jsx as f}from"react/jsx-runtime";var[Z,n]=K("PasswordInput"),R=s.forwardRef(({visible:o,defaultVisible:t=!1,onVisibleChange:e,getVisibilityAnnouncement:i,revealLabel:p="Show password",readOnly:v=!1,showToggle:y=!0,clearable:T=!1,clearLabel:C,leading:F,placeholder:h,children:L,...a},N)=>{let c=s.useRef(null),k=J(N,c),[r=!1,w]=Y({prop:o,defaultProp:t,onChange:e});Q(c,()=>w(t),a.form);let P=s.useRef(r),b=X(i??(l=>l?"Password shown":"Password hidden"));return s.useEffect(()=>{if(P.current===r)return;P.current=r;let l=b(r);l&&U(l)},[r,b]),f(Z,{visible:r,disabled:a.disabled??!1,readOnly:v,revealLabel:p,setVisible:w,children:f(G,{"data-state":r?"visible":"hidden",...a,...W("password-input","root",a.className),ref:k,children:L??f(x,{clearable:T,clearLabel:C,leading:F,placeholder:h,showToggle:y})})})});R.displayName="PasswordInput";export{R as PasswordInput,m as PasswordInputField,Z as PasswordInputProvider,u as PasswordInputToggle,n as usePasswordInputContext};
+'use client';
+import*as s from"react";import{TextField as X}from"../text-field/TextField.js";import{createSafeContext as q}from"../utils/createContext.js";import{useFormReset as D}from"../utils/formControl.js";import{announce as G}from"../utils/liveAnnouncer.js";import{skdxPart as K}from"../utils/part.js";import{recipeAxis as v}from"../utils/recipeAxis.js";import{useCallbackRef as Q}from"../utils/useCallbackRef.js";import{useControllableState as U}from"../utils/useControllableState.js";import{TextFieldClearButton as E}from"../text-field/TextField.js";import{TextFieldSlot as B}from"../text-field/TextField.js";import{TextFieldInput as H}from"../text-field/TextField.js";import{skdxPart as z}from"../utils/part.js";import{jsx as S}from"react/jsx-runtime";var w=({ref:r,...t})=>{let e=p("PasswordInputField");return S(H,{type:e.visible?"text":"password",readOnly:e.readOnly,autoComplete:"current-password","data-state":e.visible?"visible":"hidden",...t,...z("password-input","field",t.className),ref:r})};w.displayName="PasswordInputField";import{skdxPart as O}from"../utils/part.js";import{composeEventHandlers as V,Primitive as L}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var b=({ref:r,...t})=>{let e=p("PasswordInputToggle");return A(L.button,{type:"button","aria-pressed":e.visible,"aria-label":e.revealLabel,disabled:e.disabled,"data-state":e.visible?"visible":"hidden","data-disabled":e.disabled?"":void 0,...t,...O("password-input","toggle",t.className),ref:r,onClick:V(t.onClick,()=>e.setVisible(!e.visible))})};b.displayName="PasswordInputToggle";import{Fragment as J,jsx as u,jsxs as M}from"react/jsx-runtime";function x({size:r,variant:t,clearable:e,clearLabel:m,leading:d,placeholder:i,showToggle:f}){return M(J,{children:[d?u(B,{side:"start",children:d}):null,u(w,{size:r,variant:t,placeholder:i}),e?u(E,{label:m}):null,f?u(b,{}):null]})}import{jsx as I}from"react/jsx-runtime";var[W,p]=q("PasswordInput"),y=({visible:r,defaultVisible:t=!1,onVisibleChange:e,getVisibilityAnnouncement:m,revealLabel:d="Show password",readOnly:i=!1,showToggle:f=!0,clearable:F=!1,clearLabel:C,leading:T,placeholder:h,children:N,ref:k,...o})=>{let l=s.useRef(null),[a=!1,c]=U({prop:r,defaultProp:t,onChange:e}),P=s.useCallback(n=>{o.disabled||c(n)},[o.disabled,c]);s.useImperativeHandle(k,()=>l.current?Object.assign(l.current,{setVisible:P}):{setVisible:P}),D(l,()=>c(t),o.form);let R=s.useRef(a),g=Q(m??(n=>n?"Password shown":"Password hidden"));return s.useEffect(()=>{if(R.current===a)return;R.current=a;let n=g(a);n&&G(n)},[a,g]),I(W,{visible:a,disabled:o.disabled??!1,readOnly:i,revealLabel:d,setVisible:P,children:I(X,{"data-state":a?"visible":"hidden",readOnly:i,...o,...K("password-input","root",o.className),ref:l,children:N??I(x,{size:v(o.size,o,"data-size"),variant:v(o.variant,o,"data-variant"),clearable:F,clearLabel:C,leading:T,placeholder:h,showToggle:f})})})};y.displayName="PasswordInput";export{y as PasswordInput,w as PasswordInputField,W as PasswordInputProvider,b as PasswordInputToggle,p as usePasswordInputContext};

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

@@ -1,14 +1,12 @@
 import type * as React from 'react';
-/**
- * The anatomy a {@link PasswordInput} draws: a masked `PasswordInputField`
- * and `PasswordInputToggle` in the trailing position. No label or description.
- *
- * @internal
- */
-export declare function PasswordInputAnatomy({ clearable, clearLabel, leading, placeholder, showToggle, }: {
-    clearable?: boolean;
-    clearLabel?: string;
-    leading?: React.ReactNode;
-    placeholder?: string;
+import type { PasswordInputFieldProps } from './types.cjs';
+/** @internal */
+export declare function PasswordInputAnatomy({ size, variant, clearable, clearLabel, leading, placeholder, showToggle, }: {
+    size?: PasswordInputFieldProps['size'] | undefined;
+    variant?: PasswordInputFieldProps['variant'] | undefined;
+    clearable?: boolean | undefined;
+    clearLabel?: string | undefined;
+    leading?: React.ReactNode | undefined;
+    placeholder?: string | undefined;
     showToggle: boolean;
 }): React.JSX.Element;

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

@@ -1,14 +1,12 @@
 import type * as React from 'react';
-/**
- * The anatomy a {@link PasswordInput} draws: a masked `PasswordInputField`
- * and `PasswordInputToggle` in the trailing position. No label or description.
- *
- * @internal
- */
-export declare function PasswordInputAnatomy({ clearable, clearLabel, leading, placeholder, showToggle, }: {
-    clearable?: boolean;
-    clearLabel?: string;
-    leading?: React.ReactNode;
-    placeholder?: string;
+import type { PasswordInputFieldProps } from './types.js';
+/** @internal */
+export declare function PasswordInputAnatomy({ size, variant, clearable, clearLabel, leading, placeholder, showToggle, }: {
+    size?: PasswordInputFieldProps['size'] | undefined;
+    variant?: PasswordInputFieldProps['variant'] | undefined;
+    clearable?: boolean | undefined;
+    clearLabel?: string | undefined;
+    leading?: React.ReactNode | undefined;
+    placeholder?: string | undefined;
     showToggle: boolean;
 }): React.JSX.Element;

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

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { PasswordInputFieldProps } from './types.cjs';
 /**
- * Native `<input>` for a {@link PasswordInput}. `type` toggles between
- * `password` and `text` — toggling rather than swapping keeps focus/selection/
- * caret. `autoComplete` defaults to `current-password`. Value never written
- * to attributes (only `value` property).
+ * Native `<input>` for a {@link PasswordInput} whose `type` toggles between `password` and `text`.
  *
  * @example
  * ```tsx
@@ -14,4 +11,7 @@ import type { PasswordInputFieldProps } from './types.cjs';
  * </PasswordInput>
  * ```
  */
-export declare const PasswordInputField: React.ForwardRefExoticComponent<Omit<PasswordInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const PasswordInputField: {
+    ({ ref: forwardedRef, ...props }: PasswordInputFieldProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { PasswordInputFieldProps } from './types.js';
 /**
- * Native `<input>` for a {@link PasswordInput}. `type` toggles between
- * `password` and `text` — toggling rather than swapping keeps focus/selection/
- * caret. `autoComplete` defaults to `current-password`. Value never written
- * to attributes (only `value` property).
+ * Native `<input>` for a {@link PasswordInput} whose `type` toggles between `password` and `text`.
  *
  * @example
  * ```tsx
@@ -14,4 +11,7 @@ import type { PasswordInputFieldProps } from './types.js';
  * </PasswordInput>
  * ```
  */
-export declare const PasswordInputField: React.ForwardRefExoticComponent<Omit<PasswordInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const PasswordInputField: {
+    ({ ref: forwardedRef, ...props }: PasswordInputFieldProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { PasswordInputToggleProps } from './types.cjs';
 /**
- * Reveal button with `aria-pressed` toggle state, stays in tab order for
- * keyboard access to reveal. Name does not change; `aria-pressed` reports state.
- * Requires `aria-label` for icon-only usage.
+ * Button that toggles password visibility and reports its state via `aria-pressed`.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { PasswordInputToggleProps } from './types.cjs';
  * </PasswordInputToggle>
  * ```
  */
-export declare const PasswordInputToggle: React.ForwardRefExoticComponent<Omit<PasswordInputToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const PasswordInputToggle: {
+    ({ ref: forwardedRef, ...props }: PasswordInputToggleProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { PasswordInputToggleProps } from './types.js';
 /**
- * Reveal button with `aria-pressed` toggle state, stays in tab order for
- * keyboard access to reveal. Name does not change; `aria-pressed` reports state.
- * Requires `aria-label` for icon-only usage.
+ * Button that toggles password visibility and reports its state via `aria-pressed`.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { PasswordInputToggleProps } from './types.js';
  * </PasswordInputToggle>
  * ```
  */
-export declare const PasswordInputToggle: React.ForwardRefExoticComponent<Omit<PasswordInputToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const PasswordInputToggle: {
+    ({ ref: forwardedRef, ...props }: PasswordInputToggleProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,2 +1,2 @@
 export { PasswordInput } from './PasswordInput.cjs';
-export type { PasswordInputProps } from './types.cjs';
+export type { PasswordInputHandle, PasswordInputMethods, PasswordInputProps } from './types.cjs';

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

@@ -1,2 +1,2 @@
 export { PasswordInput } from './PasswordInput.js';
-export type { PasswordInputProps } from './types.js';
+export type { PasswordInputHandle, PasswordInputMethods, PasswordInputProps } from './types.js';

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

@@ -1,6 +1,14 @@
 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;
@@ -10,56 +18,50 @@ export interface PasswordInputContextValue {
     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`. `trailing` is omitted; the derived `PasswordInputToggle` is the trailing adornment.
- */
-export interface PasswordInputProps extends Omit<TextFieldProps, 'trailing'> {
+/** 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. Pair with `onVisibleChange`.
+     * 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.
      */
-    defaultVisible?: boolean;
+    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;
+    revealLabel?: string | undefined;
     /**
-     * Makes the field read-only: the value stays focusable and submitted, editing is blocked. The toggle stays operable.
+     * Makes the field read-only: focusable and submitted, but not editable; the toggle stays operable.
      * @default false
      */
-    readOnly?: 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. 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.
+     * Renders the derived `PasswordInputToggle`, ignored when `children` is given.
      * @default true
      */
-    showToggle?: boolean;
+    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,6 +1,14 @@
 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;
@@ -10,56 +18,50 @@ export interface PasswordInputContextValue {
     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`. `trailing` is omitted; the derived `PasswordInputToggle` is the trailing adornment.
- */
-export interface PasswordInputProps extends Omit<TextFieldProps, 'trailing'> {
+/** 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. Pair with `onVisibleChange`.
+     * 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.
      */
-    defaultVisible?: boolean;
+    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;
+    revealLabel?: string | undefined;
     /**
-     * Makes the field read-only: the value stays focusable and submitted, editing is blocked. The toggle stays operable.
+     * Makes the field read-only: focusable and submitted, but not editable; the toggle stays operable.
      * @default false
      */
-    readOnly?: 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. 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.
+     * Renders the derived `PasswordInputToggle`, ignored when `children` is given.
      * @default true
      */
-    showToggle?: boolean;
+    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 De=Object.create;var A=Object.defineProperty;var Te=Object.getOwnPropertyDescriptor;var Ee=Object.getOwnPropertyNames;var He=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Me=(t,r)=>{for(var i in r)A(t,i,{get:r[i],enumerable:!0})},ee=(t,r,i,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of Ee(r))!Le.call(t,l)&&l!==i&&A(t,l,{get:()=>r[l],enumerable:!(e=Te(r,l))||e.enumerable});return t};var te=(t,r,i)=>(i=t!=null?De(He(t)):{},ee(r||!t||!t.__esModule?A(i,"default",{value:t,enumerable:!0}):i,t)),Oe=t=>ee(A({},"__esModule",{value:!0}),t);var Se={};Me(Se,{PinInput:()=>B,PinInputField:()=>E,PinInputProvider:()=>me,pinInputDigitLabel:()=>D,usePinInputContext:()=>S});module.exports=Oe(Se);var o=te(require("react"),1),le=require("../utils/createContext.cjs"),H=require("../utils/formControl.cjs"),ue=require("../utils/hiddenInput.cjs"),ce=require("../utils/is-dev-mode.cjs"),fe=require("../utils/part.cjs"),pe=require("../utils/primitive.cjs"),N=require("../utils/useCallbackRef.cjs"),de=require("../utils/useControllableState.cjs");var $e={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function ne(t,r){if(r){let e=new RegExp(r);return l=>e.test(l)}let i=$e[t]??null;return i?e=>i.test(e):()=>!0}function D(t,r){return`Digit ${t} of ${r}`}var re=te(require("react"),1),oe=require("../utils/composeRefs.cjs"),T=require("../utils/direction.cjs"),ae=require("../utils/part.cjs"),d=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),E=re.forwardRef(({index:t,...r},i)=>{let e=S("PinInputField"),l=(0,T.useDirection)(),h=(0,oe.useComposedRefs)(i,a=>e.registerRef(t,a)),c=e.charAt(t),g=c!=="",p=a=>e.setCharAt(t,a);return(0,ie.jsx)(d.Primitive.input,{inputMode:e.type==="numeric"?"numeric":"text",autoComplete:e.otp&&t===0?"one-time-code":"off",type:e.mask&&g?"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:c,...(0,ae.skdxPart)("pin-input","field",r.className),ref:h,onChange:(0,d.composeEventHandlers)(r.onChange,a=>{if(e.disabled)return;let u=a.target.value;if(u===""){p("");return}if(!e.accepts(u)){a.target.value=c,e.reportInvalid(u,t);return}p(u),t<e.length-1&&e.focusIndex(t+1)}),onFocus:(0,d.composeEventHandlers)(r.onFocus,a=>{e.selectOnFocus&&a.currentTarget.select()}),onKeyDown:(0,d.composeEventHandlers)(r.onKeyDown,a=>{if(e.disabled)return;let u=(0,T.directionalKey)(a.key,a.currentTarget,l);if(u==="Backspace"){if(e.readOnly)return;a.preventDefault(),c?p(""):t>0&&(e.setCharAt(t-1,""),e.focusIndex(t-1))}else if(u==="Delete"){if(e.readOnly)return;a.preventDefault(),c&&p("")}else u==="ArrowLeft"?t>0&&(a.preventDefault(),e.focusIndex(t-1)):u==="ArrowRight"&&t<e.length-1&&(a.preventDefault(),e.focusIndex(t+1))}),onPaste:(0,d.composeEventHandlers)(r.onPaste,a=>{if(e.disabled||e.readOnly)return;a.preventDefault();let u=e.sanitizePaste(a.clipboardData.getData("text")),m="";for(let y of u)e.accepts(y)?m+=y:e.reportInvalid(y,Math.min(t+m.length,e.length-1));if(!m)return;let k=e.fillFrom(t,m);e.focusIndex(Math.min(k+1,e.length-1))})})});E.displayName="PinInputField";var x=require("react/jsx-runtime");function se({length:t}){return(0,x.jsx)(x.Fragment,{children:Array.from({length:t},(r,i)=>(0,x.jsx)(E,{index:i},i))})}function V(t,r){return Array.from({length:r},(i,e)=>t[e]??"")}function z(t){return t.join("")}var R=require("react/jsx-runtime"),[me,S]=(0,le.createSafeContext)("PinInput"),B=o.forwardRef(({value:t,defaultValue:r="",onValueChange:i,length:e=6,disabled:l=!1,invalid:h=!1,readOnly:c=!1,type:g="text",pattern:p,placeholder:a,otp:u=!0,autoFocus:m=!1,blurOnComplete:k=!1,selectOnFocus:y=!1,mask:Pe=!1,onValueComplete:Ie,onValueInvalid:be,autoSubmit:K=!1,sanitize:_,name:j,form:q,required:Z=!1,digitLabel:U=D,children:Re,...Y},he)=>{let[f="",L]=(0,de.useControllableState)({prop:t,defaultProp:r,onChange:i}),v=o.useRef([]),P=o.useRef(null),M=o.useRef(null);(0,H.useFormReset)(P,()=>L(r),q);let G=(0,N.useCallbackRef)(Ie),J=(0,N.useCallbackRef)(be??(()=>{})),ge=o.useMemo(()=>ne(g,p),[g,p]),ye=o.useCallback((n,s)=>J({value:n,index:s}),[J]),Q=o.useRef(f);Q.current=f;let W=o.useRef(_);W.current=_;let X=o.useRef(U);X.current=U;let ve=o.useCallback(n=>W.current?.(n)??n,[]),Ce=o.useCallback((n,s)=>X.current(n,s),[]),O=o.useCallback(n=>{let s=Q.current.length===e;L(n),!(n.length!==e||s)&&(G(n),k&&(v.current.find($=>$===document.activeElement)??v.current[e-1])?.blur(),K&&(M.current?.form??P.current?.closest("form"))?.requestSubmit())},[e,L,G,k,K]),I=o.useRef(V(f,e));(I.current.length!==e||z(I.current)!==f)&&(I.current=V(f,e));let xe=o.useCallback(n=>I.current[n]??"",[]),w=o.useCallback(n=>{let s=[...I.current];n(s),I.current=s,O(z(s))},[O]),ke=o.useCallback((n,s)=>{w(C=>{C[n]=s})},[w]),we=o.useCallback((n,s)=>{let C=n-1;return w($=>{for(let b=0;b<s.length&&n+b<e;b++)$[n+b]=s[b],C=n+b}),C},[w,e]),Fe=o.useCallback((n,s)=>{v.current[n]=s},[]);o.useEffect(()=>{if(!(0,ce.isDevMode)())return;let n=v.current.filter(Boolean).length;n!==0&&n!==e&&console.warn(`PinInput: ${n} PinInputField${n===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,f]);let F=o.useCallback(n=>{v.current[n]?.focus()},[]),Ae=o.useRef(m);return o.useEffect(()=>{Ae.current&&F(0)},[F]),o.useImperativeHandle(he,()=>{let n={...(0,H.formValidityHandle)(M),clear:()=>O(""),focus:()=>F(0)};return P.current?(Object.defineProperties(P.current,Object.getOwnPropertyDescriptors(n)),P.current):n}),(0,R.jsxs)(me,{value:f,length:e,type:g,mask:Pe,disabled:l,invalid:h,readOnly:c,placeholder:a,otp:u,selectOnFocus:y,accepts:ge,reportInvalid:ye,charAt:xe,setCharAt:ke,fillFrom:we,focusIndex:F,registerRef:Fe,sanitizePaste:ve,digitLabel:Ce,children:[(0,R.jsx)(pe.Primitive.div,{role:"group","aria-invalid":h?!0:void 0,"data-disabled":l?"":void 0,"data-invalid":h?"":void 0,"data-readonly":c?"":void 0,...Y,...(0,fe.skdxPart)("pin-input","root",Y.className),ref:P,children:Re??(0,R.jsx)(se,{length:e})}),j&&(0,R.jsx)(ue.HiddenInput,{ref:M,type:"text",name:j,value:f,required:Z,disabled:l,form:q,pattern:Z?`.{${e}}`:void 0})]})});B.displayName="PinInput";0&&(module.exports={PinInput,PinInputField,PinInputProvider,pinInputDigitLabel,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,34 +1,19 @@
 import * as React from 'react';
 import type { PinInputContextValue, PinInputHandle, PinInputProps } from './types.cjs';
-export declare const PinInputProvider: {
-    (props: PinInputContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, usePinInputContext: (consumerName: string) => PinInputContextValue;
+export declare const PinInputProvider: React.FC<PinInputContextValue & {
+    children: React.ReactNode;
+}>, usePinInputContext: (consumerName: string) => PinInputContextValue;
 /**
- * A one-time-passcode input: owns the joined string value, passes it to
- * `length` `PinInputField` boxes via context. Renders `<div role="group">`
- * with boxes as N real `<input maxLength=1>` elements (most robust approach).
- *
- * `role="group"` makes the boxes read as one value, not N fields, and holds
- * `aria-invalid`. It auto-wires an enclosing {@link Field}: the root precedes
- * its boxes, so Field discovers it and writes `aria-describedby` here. Name it
- * with `aria-label` / `aria-labelledby`, or use `FieldLabel`.
- *
- * Fires `onValueComplete` when the last box fills; with `autoSubmit`,
- * calls `requestSubmit()` on the enclosing form. Works controlled or uncontrolled.
- *
- * With `name`, a hidden input submits the joined value, form reset restores
- * `defaultValue`, and the ref carries `checkValidity()` / `reportValidity()`.
- * With `required`, an incomplete pin reports `valueMissing`.
- *
- * Renders derived `PinInputField` boxes by default, or children for manual
- * composition (use `@skdx/react/primitives/pin-input` for that).
+ * 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" />
  * ```
  */
-export declare const PinInput: React.ForwardRefExoticComponent<Omit<PinInputProps, "ref"> & React.RefAttributes<PinInputHandle>>;
+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,34 +1,19 @@
 import * as React from 'react';
 import type { PinInputContextValue, PinInputHandle, PinInputProps } from './types.js';
-export declare const PinInputProvider: {
-    (props: PinInputContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, usePinInputContext: (consumerName: string) => PinInputContextValue;
+export declare const PinInputProvider: React.FC<PinInputContextValue & {
+    children: React.ReactNode;
+}>, usePinInputContext: (consumerName: string) => PinInputContextValue;
 /**
- * A one-time-passcode input: owns the joined string value, passes it to
- * `length` `PinInputField` boxes via context. Renders `<div role="group">`
- * with boxes as N real `<input maxLength=1>` elements (most robust approach).
- *
- * `role="group"` makes the boxes read as one value, not N fields, and holds
- * `aria-invalid`. It auto-wires an enclosing {@link Field}: the root precedes
- * its boxes, so Field discovers it and writes `aria-describedby` here. Name it
- * with `aria-label` / `aria-labelledby`, or use `FieldLabel`.
- *
- * Fires `onValueComplete` when the last box fills; with `autoSubmit`,
- * calls `requestSubmit()` on the enclosing form. Works controlled or uncontrolled.
- *
- * With `name`, a hidden input submits the joined value, form reset restores
- * `defaultValue`, and the ref carries `checkValidity()` / `reportValidity()`.
- * With `required`, an incomplete pin reports `valueMissing`.
- *
- * Renders derived `PinInputField` boxes by default, or children for manual
- * composition (use `@skdx/react/primitives/pin-input` for that).
+ * 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" />
  * ```
  */
-export declare const PinInput: React.ForwardRefExoticComponent<Omit<PinInputProps, "ref"> & React.RefAttributes<PinInputHandle>>;
+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 r from"react";import{createSafeContext as ve}from"../utils/createContext.js";import{formValidityHandle as Ce,useFormReset as xe}from"../utils/formControl.js";import{HiddenInput as ke}from"../utils/hiddenInput.js";import{isDevMode as we}from"../utils/is-dev-mode.js";import{skdxPart as Fe}from"../utils/part.js";import{Primitive as Ae}from"../utils/primitive.js";import{useCallbackRef as W}from"../utils/useCallbackRef.js";import{useControllableState as De}from"../utils/useControllableState.js";var me={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function U(n,a){if(a){let e=new RegExp(a);return f=>e.test(f)}let l=me[n]??null;return l?e=>l.test(e):()=>!0}function T(n,a){return`Digit ${n} of ${a}`}import*as Y from"react";import{useComposedRefs as Pe}from"../utils/composeRefs.js";import{directionalKey as Ie,useDirection as be}from"../utils/direction.js";import{skdxPart as Re}from"../utils/part.js";import{composeEventHandlers as k,Primitive as he}from"../utils/primitive.js";import{jsx as ge}from"react/jsx-runtime";var E=Y.forwardRef(({index:n,...a},l)=>{let e=G("PinInputField"),f=be(),b=Pe(l,o=>e.registerRef(n,o)),u=e.charAt(n),R=u!=="",p=o=>e.setCharAt(n,o);return ge(he.input,{inputMode:e.type==="numeric"?"numeric":"text",autoComplete:e.otp&&n===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(n+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,...a,value:u,...Re("pin-input","field",a.className),ref:b,onChange:k(a.onChange,o=>{if(e.disabled)return;let s=o.target.value;if(s===""){p("");return}if(!e.accepts(s)){o.target.value=u,e.reportInvalid(s,n);return}p(s),n<e.length-1&&e.focusIndex(n+1)}),onFocus:k(a.onFocus,o=>{e.selectOnFocus&&o.currentTarget.select()}),onKeyDown:k(a.onKeyDown,o=>{if(e.disabled)return;let s=Ie(o.key,o.currentTarget,f);if(s==="Backspace"){if(e.readOnly)return;o.preventDefault(),u?p(""):n>0&&(e.setCharAt(n-1,""),e.focusIndex(n-1))}else if(s==="Delete"){if(e.readOnly)return;o.preventDefault(),u&&p("")}else s==="ArrowLeft"?n>0&&(o.preventDefault(),e.focusIndex(n-1)):s==="ArrowRight"&&n<e.length-1&&(o.preventDefault(),e.focusIndex(n+1))}),onPaste:k(a.onPaste,o=>{if(e.disabled||e.readOnly)return;o.preventDefault();let s=e.sanitizePaste(o.clipboardData.getData("text")),d="";for(let h of s)e.accepts(h)?d+=h:e.reportInvalid(h,Math.min(n+d.length,e.length-1));if(!d)return;let v=e.fillFrom(n,d);e.focusIndex(Math.min(v+1,e.length-1))})})});E.displayName="PinInputField";import{Fragment as ye,jsx as J}from"react/jsx-runtime";function Q({length:n}){return J(ye,{children:Array.from({length:n},(a,l)=>J(E,{index:l},l))})}function H(n,a){return Array.from({length:a},(l,e)=>n[e]??"")}function L(n){return n.join("")}import{jsx as M,jsxs as Ee}from"react/jsx-runtime";var[Te,G]=ve("PinInput"),X=r.forwardRef(({value:n,defaultValue:a="",onValueChange:l,length:e=6,disabled:f=!1,invalid:b=!1,readOnly:u=!1,type:R="text",pattern:p,placeholder:o,otp:s=!0,autoFocus:d=!1,blurOnComplete:v=!1,selectOnFocus:h=!1,mask:ee=!1,onValueComplete:te,onValueInvalid:ne,autoSubmit:O=!1,sanitize:$,name:S,form:V,required:z=!1,digitLabel:N=T,children:re,...B},oe)=>{let[c="",w]=De({prop:n,defaultProp:a,onChange:l}),g=r.useRef([]),m=r.useRef(null),F=r.useRef(null);xe(m,()=>w(a),V);let K=W(te),_=W(ne??(()=>{})),ae=r.useMemo(()=>U(R,p),[R,p]),ie=r.useCallback((t,i)=>_({value:t,index:i}),[_]),j=r.useRef(c);j.current=c;let q=r.useRef($);q.current=$;let Z=r.useRef(N);Z.current=N;let se=r.useCallback(t=>q.current?.(t)??t,[]),le=r.useCallback((t,i)=>Z.current(t,i),[]),A=r.useCallback(t=>{let i=j.current.length===e;w(t),!(t.length!==e||i)&&(K(t),v&&(g.current.find(D=>D===document.activeElement)??g.current[e-1])?.blur(),O&&(F.current?.form??m.current?.closest("form"))?.requestSubmit())},[e,w,K,v,O]),P=r.useRef(H(c,e));(P.current.length!==e||L(P.current)!==c)&&(P.current=H(c,e));let ue=r.useCallback(t=>P.current[t]??"",[]),C=r.useCallback(t=>{let i=[...P.current];t(i),P.current=i,A(L(i))},[A]),ce=r.useCallback((t,i)=>{C(y=>{y[t]=i})},[C]),fe=r.useCallback((t,i)=>{let y=t-1;return C(D=>{for(let I=0;I<i.length&&t+I<e;I++)D[t+I]=i[I],y=t+I}),y},[C,e]),pe=r.useCallback((t,i)=>{g.current[t]=i},[]);r.useEffect(()=>{if(!we())return;let t=g.current.filter(Boolean).length;t!==0&&t!==e&&console.warn(`PinInput: ${t} PinInputField${t===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,c]);let x=r.useCallback(t=>{g.current[t]?.focus()},[]),de=r.useRef(d);return r.useEffect(()=>{de.current&&x(0)},[x]),r.useImperativeHandle(oe,()=>{let t={...Ce(F),clear:()=>A(""),focus:()=>x(0)};return m.current?(Object.defineProperties(m.current,Object.getOwnPropertyDescriptors(t)),m.current):t}),Ee(Te,{value:c,length:e,type:R,mask:ee,disabled:f,invalid:b,readOnly:u,placeholder:o,otp:s,selectOnFocus:h,accepts:ae,reportInvalid:ie,charAt:ue,setCharAt:ce,fillFrom:fe,focusIndex:x,registerRef:pe,sanitizePaste:se,digitLabel:le,children:[M(Ae.div,{role:"group","aria-invalid":b?!0:void 0,"data-disabled":f?"":void 0,"data-invalid":b?"":void 0,"data-readonly":u?"":void 0,...B,...Fe("pin-input","root",B.className),ref:m,children:re??M(Q,{length:e})}),S&&M(ke,{ref:F,type:"text",name:S,value:c,required:z,disabled:f,form:V,pattern:z?`.{${e}}`:void 0})]})});X.displayName="PinInput";export{X as PinInput,E as PinInputField,Te as PinInputProvider,T as pinInputDigitLabel,G 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

@@ -1,9 +1,5 @@
-/**
- * The anatomy a {@link PinInput} draws when given no children: `length`
- * boxes, one `PinInputField` per position.
- *
- * @internal
- */
+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;
-}): import("react").JSX.Element;
+}): JSX.Element;

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

@@ -1,9 +1,5 @@
-/**
- * The anatomy a {@link PinInput} draws when given no children: `length`
- * boxes, one `PinInputField` per position.
- *
- * @internal
- */
+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;
-}): import("react").JSX.Element;
+}): JSX.Element;