@skdx/react 0.26.0

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

@@ -0,0 +1,54 @@
+import type { TextFieldInputProps, TextFieldProps } from '../text-field/types.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. */
+export interface PasswordInputContextValue {
+    visible: boolean;
+    disabled: boolean;
+    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`.
+     * @default undefined — uncontrolled, tracks its own visibility internally.
+     */
+    visible?: boolean;
+    /**
+     * 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.
+     */
+    defaultVisible?: boolean;
+    /**
+     * Fires with the new visibility whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * 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.
+     * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
+     */
+    getVisibilityAnnouncement?: (visible: boolean) => string;
+}
+/**
+ * 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.
+ */
+export interface PasswordInputFieldProps extends Omit<TextFieldInputProps, 'type'> {
+}
+/** Props for {@link PasswordInputToggle}, the reveal button. */
+export interface PasswordInputToggleProps extends PrimitivePropsWithRef<'button'> {
+}

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

@@ -0,0 +1,54 @@
+import type { TextFieldInputProps, TextFieldProps } from '../text-field/types.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. */
+export interface PasswordInputContextValue {
+    visible: boolean;
+    disabled: boolean;
+    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`.
+     * @default undefined — uncontrolled, tracks its own visibility internally.
+     */
+    visible?: boolean;
+    /**
+     * 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.
+     */
+    defaultVisible?: boolean;
+    /**
+     * Fires with the new visibility whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * 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.
+     * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
+     */
+    getVisibilityAnnouncement?: (visible: boolean) => string;
+}
+/**
+ * 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.
+ */
+export interface PasswordInputFieldProps extends Omit<TextFieldInputProps, 'type'> {
+}
+/** Props for {@link PasswordInputToggle}, the reveal button. */
+export interface PasswordInputToggleProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/pin-input/PinInput.cjs

@@ -0,0 +1 @@
+"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});

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

@@ -0,0 +1,37 @@
+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;
+/**
+ * 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`.
+ *
+ * @example
+ * ```tsx
+ * <PinInput length={6} type="numeric">
+ *   {Array.from({ length: 6 }, (_, i) => (
+ *     <PinInputField key={i} index={i} />
+ *   ))}
+ * </PinInput>
+ * ```
+ */
+export declare const PinInput: React.ForwardRefExoticComponent<Omit<PinInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+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;
+/**
+ * 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`.
+ *
+ * @example
+ * ```tsx
+ * <PinInput length={6} type="numeric">
+ *   {Array.from({ length: 6 }, (_, i) => (
+ *     <PinInputField key={i} index={i} />
+ *   ))}
+ * </PinInput>
+ * ```
+ */
+export declare const PinInput: React.ForwardRefExoticComponent<Omit<PinInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/pin-input/PinInput.js

@@ -0,0 +1 @@
+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};

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

@@ -0,0 +1,25 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <PinInput length={4}>
+ *   <PinInputField index={0} />
+ *   <PinInputField index={1} />
+ *   <PinInputField index={2} />
+ *   <PinInputField index={3} />
+ * </PinInput>
+ * ```
+ */
+export declare const PinInputField: React.ForwardRefExoticComponent<Omit<PinInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,25 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <PinInput length={4}>
+ *   <PinInputField index={0} />
+ *   <PinInputField index={1} />
+ *   <PinInputField index={2} />
+ *   <PinInputField index={3} />
+ * </PinInput>
+ * ```
+ */
+export declare const PinInputField: React.ForwardRefExoticComponent<Omit<PinInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,3 @@
+export * from './PinInput.cjs';
+export { PinInputField } from './PinInputField.cjs';
+export type { PinInputProps, PinInputHandle, PinInputFieldProps } from './types.cjs';

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

@@ -0,0 +1,3 @@
+export * from './PinInput.js';
+export { PinInputField } from './PinInputField.js';
+export type { PinInputProps, PinInputHandle, PinInputFieldProps } from './types.js';

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

@@ -0,0 +1,111 @@
+import type { FormValidityHandle } from '../utils/formControl.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared state distributed from {@link PinInput} to its `PinInputField`s via context. Not part of the public API. */
+export interface PinInputContextValue {
+    value: string;
+    length: number;
+    type: 'text' | 'numeric';
+    mask: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    setValue: (next: string) => void;
+    focusIndex: (index: number) => void;
+    registerRef: (index: number, node: HTMLInputElement | null) => void;
+    sanitizePaste: (pasted: string) => string;
+}
+/** Props for the {@link PinInput} root. */
+export interface PinInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    /**
+     * Current value, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: string;
+    /**
+     * Initial combined value, for uncontrolled usage.
+     * @default ''
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new value whenever any box changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Number of character boxes rendered and the max length of the combined value.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Disables every `PinInputField` in this pin input.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * `'numeric'` restricts each box to digits 0-9 and sets `inputMode="numeric"`.
+     * @default 'text'
+     */
+    type?: 'text' | 'numeric';
+    /**
+     * Renders filled boxes as `type="password"` (dots) instead of plain text.
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `data-invalid` on the root and
+     * `aria-invalid`/`data-invalid` on every `PinInputField`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes every `PinInputField` read-only (native `readOnly`, plus
+     * `aria-readonly`/`data-readonly` on the root and each field).
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Fires with the full value the moment the last box is filled — the point a
+     * one-time-passcode UI verifies the code. Fires once per completion, not on
+     * every keystroke that keeps it complete.
+     * @default undefined — no-op if omitted.
+     */
+    onValueComplete?: (value: string) => void;
+    /**
+     * Submit the surrounding `<form>` (via `requestSubmit`, so validation and
+     * the submit event still run) as soon as the value completes.
+     * @default false
+     */
+    autoSubmit?: boolean;
+    /**
+     * Cleans pasted text before it is distributed across the boxes — strip the
+     * spaces and dashes an authenticator app copies along with the code. Runs
+     * before the `type="numeric"` digit filter.
+     * @default undefined — pasted text is used as-is.
+     */
+    sanitize?: (pasted: string) => string;
+    /**
+     * Form field name. With it, a visually-hidden native input submits the
+     * joined value as a single entry — one `name=123456`, not one entry per box
+     * — matching what `<skdx-pin-input>` publishes through ElementInternals. A
+     * form reset restores `defaultValue`.
+     * @default undefined — submits nothing.
+     */
+    name?: string;
+    /**
+     * Marks the pin required: with `name`, native `valueMissing` until every box
+     * is filled, reported through `checkValidity()`/`reportValidity()`.
+     * @default false
+     */
+    required?: boolean;
+}
+/**
+ * What {@link PinInput}'s forwarded ref carries: the root `<div>` plus the two
+ * constraint-validation methods. Type your ref as this to call them —
+ * `React.useRef<PinInputHandle>(null)`.
+ */
+export type PinInputHandle = HTMLDivElement & FormValidityHandle;
+/** Props for a single {@link PinInputField} character box. */
+export interface PinInputFieldProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue' | 'type'> {
+    /** This box's 0-indexed position within the pin's value. */
+    index: number;
+}

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

@@ -0,0 +1,111 @@
+import type { FormValidityHandle } from '../utils/formControl.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared state distributed from {@link PinInput} to its `PinInputField`s via context. Not part of the public API. */
+export interface PinInputContextValue {
+    value: string;
+    length: number;
+    type: 'text' | 'numeric';
+    mask: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    setValue: (next: string) => void;
+    focusIndex: (index: number) => void;
+    registerRef: (index: number, node: HTMLInputElement | null) => void;
+    sanitizePaste: (pasted: string) => string;
+}
+/** Props for the {@link PinInput} root. */
+export interface PinInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    /**
+     * Current value, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: string;
+    /**
+     * Initial combined value, for uncontrolled usage.
+     * @default ''
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new value whenever any box changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Number of character boxes rendered and the max length of the combined value.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Disables every `PinInputField` in this pin input.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * `'numeric'` restricts each box to digits 0-9 and sets `inputMode="numeric"`.
+     * @default 'text'
+     */
+    type?: 'text' | 'numeric';
+    /**
+     * Renders filled boxes as `type="password"` (dots) instead of plain text.
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `data-invalid` on the root and
+     * `aria-invalid`/`data-invalid` on every `PinInputField`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes every `PinInputField` read-only (native `readOnly`, plus
+     * `aria-readonly`/`data-readonly` on the root and each field).
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Fires with the full value the moment the last box is filled — the point a
+     * one-time-passcode UI verifies the code. Fires once per completion, not on
+     * every keystroke that keeps it complete.
+     * @default undefined — no-op if omitted.
+     */
+    onValueComplete?: (value: string) => void;
+    /**
+     * Submit the surrounding `<form>` (via `requestSubmit`, so validation and
+     * the submit event still run) as soon as the value completes.
+     * @default false
+     */
+    autoSubmit?: boolean;
+    /**
+     * Cleans pasted text before it is distributed across the boxes — strip the
+     * spaces and dashes an authenticator app copies along with the code. Runs
+     * before the `type="numeric"` digit filter.
+     * @default undefined — pasted text is used as-is.
+     */
+    sanitize?: (pasted: string) => string;
+    /**
+     * Form field name. With it, a visually-hidden native input submits the
+     * joined value as a single entry — one `name=123456`, not one entry per box
+     * — matching what `<skdx-pin-input>` publishes through ElementInternals. A
+     * form reset restores `defaultValue`.
+     * @default undefined — submits nothing.
+     */
+    name?: string;
+    /**
+     * Marks the pin required: with `name`, native `valueMissing` until every box
+     * is filled, reported through `checkValidity()`/`reportValidity()`.
+     * @default false
+     */
+    required?: boolean;
+}
+/**
+ * What {@link PinInput}'s forwarded ref carries: the root `<div>` plus the two
+ * constraint-validation methods. Type your ref as this to call them —
+ * `React.useRef<PinInputHandle>(null)`.
+ */
+export type PinInputHandle = HTMLDivElement & FormValidityHandle;
+/** Props for a single {@link PinInputField} character box. */
+export interface PinInputFieldProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue' | 'type'> {
+    /** This box's 0-indexed position within the pin's value. */
+    index: number;
+}

package/dist/popover/Popover.cjs

@@ -0,0 +1 @@
+"use strict";var Z=Object.create;var c=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,oo=Object.prototype.hasOwnProperty;var eo=(o,e)=>{for(var r in e)c(o,r,{get:e[r],enumerable:!0})},E=(o,e,r,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of $(e))!oo.call(o,n)&&n!==r&&c(o,n,{get:()=>e[n],enumerable:!(p=_(e,n))||p.enumerable});return o};var v=(o,e,r)=>(r=o!=null?Z(j(o)):{},E(e||!o||!o.__esModule?c(r,"default",{value:o,enumerable:!0}):r,o)),ro=o=>E(c({},"__esModule",{value:!0}),o);var po={};eo(po,{Popover:()=>L,PopoverAnchor:()=>to,PopoverArrow:()=>M,PopoverClose:()=>w,PopoverContent:()=>O,PopoverPortal:()=>T,PopoverProvider:()=>A,PopoverTrigger:()=>h,usePopoverContext:()=>s});module.exports=ro(po);var m=v(require("react"),1),N=require("../utils/createContext.cjs"),k=require("../utils/part.cjs"),P=require("../utils/popper.cjs"),H=require("../utils/useControllableState.cjs"),b=require("../utils/useOpenChangeComplete.cjs"),d=require("react/jsx-runtime"),[A,s]=(0,N.createSafeContext)("Popover");function L({children:o,open:e,defaultOpen:r=!1,onOpenChange:p,onOpenChangeComplete:n,modal:R=!1}){let f=m.useRef(null),l=m.useRef(null),[i=!1,x]=(0,H.useControllableState)({prop:e,defaultProp:r,onChange:p});return(0,b.useOpenChangeComplete)(i,l,n),(0,d.jsx)(P.PopperRoot,{children:(0,d.jsx)(A,{triggerRef:f,contentRef:l,contentId:m.useId(),open:i,onOpenChange:x,modal:R,children:o})})}L.displayName="Popover";var to=P.PopperAnchor,M=m.forwardRef((o,e)=>(0,d.jsx)(P.PopperArrow,{...o,...(0,k.skdxPart)("popover","arrow",o.className),ref:e}));M.displayName="PopoverArrow";var D=v(require("react"),1),I=require("../utils/composeRefs.cjs"),B=require("../utils/part.cjs"),S=require("../utils/popper.cjs"),u=require("../utils/primitive.cjs");var y=require("react/jsx-runtime"),h=D.forwardRef((o,e)=>{let r=s("PopoverTrigger"),p=(0,I.useComposedRefs)(e,r.triggerRef);return(0,y.jsx)(S.PopperAnchor,{asChild:!0,children:(0,y.jsx)(u.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...o,...(0,B.skdxPart)("popover","trigger",o.className),ref:p,onClick:(0,u.composeEventHandlers)(o.onClick,()=>r.onOpenChange(!r.open))})})});h.displayName="PopoverTrigger";var F=require("../utils/portal.cjs");var V=require("react/jsx-runtime"),T=({forceMount:o,children:e,...r})=>{let p=s("PopoverPortal");return o||p.open?(0,V.jsx)(F.Portal,{...r,children:e}):null};T.displayName="PopoverPortal";var W=v(require("react"),1),K=require("../utils/composeRefs.cjs"),q=require("../utils/part.cjs"),z=require("../utils/popper.cjs"),G=require("../utils/useDismiss.cjs"),C=require("../utils/useFocusTrap.cjs");var J=require("react/jsx-runtime"),O=W.forwardRef(({forceMount:o,onEscapeKeyDown:e,onPointerDownOutside:r,onFocusOutside:p,onInteractOutside:n,onOpenAutoFocus:R,onCloseAutoFocus:f,sideOffset:l=4,...i},x)=>{let t=s("PopoverContent"),Y=(0,K.useComposedRefs)(x,t.contentRef);return(0,C.useFocusTrap)(t.contentRef,t.open&&t.modal,{onOpenAutoFocus:R,onCloseAutoFocus:f}),(0,G.useDismiss)({enabled:t.open,onEscapeKeyDown:a=>{e?.(a),!a.defaultPrevented&&(t.onOpenChange(!1),(t.modal||(0,C.autoFocusEvent)("close-auto-focus",f))&&t.triggerRef.current?.focus())},onInteractOutside:n,onPointerDownOutside:a=>{r?.(a),a.defaultPrevented||t.onOpenChange(!1)},onFocusOutside:a=>{p?.(a),a.defaultPrevented||t.onOpenChange(!1)}},[t.contentRef,t.triggerRef]),o||t.open?(0,J.jsx)(z.PopperContent,{component:"popover",role:"dialog",id:t.contentId,"data-state":t.open?"open":"closed",sideOffset:l,...i,...(0,q.skdxPart)("popover","content",i.className),ref:Y}):null});O.displayName="PopoverContent";var Q=v(require("react"),1),U=require("../utils/part.cjs"),g=require("../utils/primitive.cjs");var X=require("react/jsx-runtime"),w=Q.forwardRef((o,e)=>{let r=s("PopoverClose");return(0,X.jsx)(g.Primitive.button,{type:"button",...o,...(0,U.skdxPart)("popover","close",o.className),ref:e,onClick:(0,g.composeEventHandlers)(o.onClick,()=>r.onOpenChange(!1))})});w.displayName="PopoverClose";0&&(module.exports={Popover,PopoverAnchor,PopoverArrow,PopoverClose,PopoverContent,PopoverPortal,PopoverProvider,PopoverTrigger,usePopoverContext});

package/dist/popover/Popover.d.cts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { PopoverContextValue, PopoverProps } from './types.cjs';
+export declare const PopoverProvider: {
+    (props: PopoverContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, usePopoverContext: (consumerName: string) => PopoverContextValue;
+/**
+ * Root of a non-modal-by-default popover: owns open state and hands it down
+ * to `PopoverTrigger` / `PopoverAnchor` / `PopoverPortal` / `PopoverContent` /
+ * `PopoverArrow` / `PopoverClose` via context. Wraps children in the shared
+ * popper positioning root, so `PopoverContent` can float relative to the
+ * trigger (or a custom `PopoverAnchor`). Renders no DOM element itself.
+ *
+ * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverPortal>
+ *     <PopoverContent side="bottom" align="start">
+ *       <p>Popover content.</p>
+ *       <PopoverArrow />
+ *       <PopoverClose>Close</PopoverClose>
+ *     </PopoverContent>
+ *   </PopoverPortal>
+ * </Popover>
+ * ```
+ */
+export declare function Popover({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, modal, }: PopoverProps): React.JSX.Element;
+export declare namespace Popover {
+    var displayName: string;
+}
+/** Positions the popover against a custom element instead of the trigger. */
+export declare const PopoverAnchor: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional visual arrow pointing from `PopoverContent` back at the anchor.
+ * Must be rendered inside `PopoverContent`; self-positions based on the
+ * resolved `side`.
+ *
+ * @example
+ * ```tsx
+ * <PopoverContent>
+ *   <p>Popover content.</p>
+ *   <PopoverArrow />
+ * </PopoverContent>
+ * ```
+ */
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/popover/Popover.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { PopoverContextValue, PopoverProps } from './types.js';
+export declare const PopoverProvider: {
+    (props: PopoverContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, usePopoverContext: (consumerName: string) => PopoverContextValue;
+/**
+ * Root of a non-modal-by-default popover: owns open state and hands it down
+ * to `PopoverTrigger` / `PopoverAnchor` / `PopoverPortal` / `PopoverContent` /
+ * `PopoverArrow` / `PopoverClose` via context. Wraps children in the shared
+ * popper positioning root, so `PopoverContent` can float relative to the
+ * trigger (or a custom `PopoverAnchor`). Renders no DOM element itself.
+ *
+ * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverPortal>
+ *     <PopoverContent side="bottom" align="start">
+ *       <p>Popover content.</p>
+ *       <PopoverArrow />
+ *       <PopoverClose>Close</PopoverClose>
+ *     </PopoverContent>
+ *   </PopoverPortal>
+ * </Popover>
+ * ```
+ */
+export declare function Popover({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, modal, }: PopoverProps): React.JSX.Element;
+export declare namespace Popover {
+    var displayName: string;
+}
+/** Positions the popover against a custom element instead of the trigger. */
+export declare const PopoverAnchor: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional visual arrow pointing from `PopoverContent` back at the anchor.
+ * Must be rendered inside `PopoverContent`; self-positions based on the
+ * resolved `side`.
+ *
+ * @example
+ * ```tsx
+ * <PopoverContent>
+ *   <p>Popover content.</p>
+ *   <PopoverArrow />
+ * </PopoverContent>
+ * ```
+ */
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/popover/Popover.js

@@ -0,0 +1 @@
+import*as a from"react";import{createSafeContext as O}from"../utils/createContext.js";import{skdxPart as w}from"../utils/part.js";import{PopperAnchor as E,PopperArrow as N,PopperRoot as k}from"../utils/popper.js";import{useControllableState as H}from"../utils/useControllableState.js";import{useOpenChangeComplete as b}from"../utils/useOpenChangeComplete.js";import{jsx as v}from"react/jsx-runtime";var[A,n]=O("Popover");function L({children:o,open:t,defaultOpen:r=!1,onOpenChange:s,onOpenChangeComplete:f,modal:l=!1}){let P=a.useRef(null),i=a.useRef(null),[m=!1,c]=H({prop:t,defaultProp:r,onChange:s});return b(m,i,f),v(k,{children:v(A,{triggerRef:P,contentRef:i,contentId:a.useId(),open:m,onOpenChange:c,modal:l,children:o})})}L.displayName="Popover";var to=E,M=a.forwardRef((o,t)=>v(N,{...o,...w("popover","arrow",o.className),ref:t}));M.displayName="PopoverArrow";import*as u from"react";import{useComposedRefs as D}from"../utils/composeRefs.js";import{skdxPart as I}from"../utils/part.js";import{PopperAnchor as B}from"../utils/popper.js";import{composeEventHandlers as S,Primitive as F}from"../utils/primitive.js";import{jsx as d}from"react/jsx-runtime";var C=u.forwardRef((o,t)=>{let r=n("PopoverTrigger"),s=D(t,r.triggerRef);return d(B,{asChild:!0,children:d(F.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...o,...I("popover","trigger",o.className),ref:s,onClick:S(o.onClick,()=>r.onOpenChange(!r.open))})})});C.displayName="PopoverTrigger";import{Portal as V}from"../utils/portal.js";import{jsx as W}from"react/jsx-runtime";var g=({forceMount:o,children:t,...r})=>{let s=n("PopoverPortal");return o||s.open?W(V,{...r,children:t}):null};g.displayName="PopoverPortal";import*as R from"react";import{useComposedRefs as K}from"../utils/composeRefs.js";import{skdxPart as q}from"../utils/part.js";import{PopperContent as z}from"../utils/popper.js";import{useDismiss as G}from"../utils/useDismiss.js";import{autoFocusEvent as J,useFocusTrap as Q}from"../utils/useFocusTrap.js";import{jsx as U}from"react/jsx-runtime";var x=R.forwardRef(({forceMount:o,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:s,onInteractOutside:f,onOpenAutoFocus:l,onCloseAutoFocus:P,sideOffset:i=4,...m},c)=>{let e=n("PopoverContent"),T=K(c,e.contentRef);return Q(e.contentRef,e.open&&e.modal,{onOpenAutoFocus:l,onCloseAutoFocus:P}),G({enabled:e.open,onEscapeKeyDown:p=>{t?.(p),!p.defaultPrevented&&(e.onOpenChange(!1),(e.modal||J("close-auto-focus",P))&&e.triggerRef.current?.focus())},onInteractOutside:f,onPointerDownOutside:p=>{r?.(p),p.defaultPrevented||e.onOpenChange(!1)},onFocusOutside:p=>{s?.(p),p.defaultPrevented||e.onOpenChange(!1)}},[e.contentRef,e.triggerRef]),o||e.open?U(z,{component:"popover",role:"dialog",id:e.contentId,"data-state":e.open?"open":"closed",sideOffset:i,...m,...q("popover","content",m.className),ref:T}):null});x.displayName="PopoverContent";import*as y from"react";import{skdxPart as X}from"../utils/part.js";import{composeEventHandlers as Y,Primitive as Z}from"../utils/primitive.js";import{jsx as _}from"react/jsx-runtime";var h=y.forwardRef((o,t)=>{let r=n("PopoverClose");return _(Z.button,{type:"button",...o,...X("popover","close",o.className),ref:t,onClick:Y(o.onClick,()=>r.onOpenChange(!1))})});h.displayName="PopoverClose";export{L as Popover,to as PopoverAnchor,M as PopoverArrow,h as PopoverClose,x as PopoverContent,g as PopoverPortal,A as PopoverProvider,C as PopoverTrigger,n as usePopoverContext};

package/dist/popover/PopoverClose.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { PopoverCloseProps } from './types.cjs';
+/**
+ * Button that closes the popover when clicked. Renders inside
+ * `PopoverContent` anywhere you like.
+ *
+ * @example
+ * ```tsx
+ * <PopoverContent>
+ *   <PopoverClose aria-label="Close">✕</PopoverClose>
+ * </PopoverContent>
+ * ```
+ */
+export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;