@skdx/react 0.26.0 → 0.28.0

package/dist/pagination/types.d.ts

@@ -1,15 +1,25 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-import type { PaginationPage } from './pages.js';
+import type { PaginationLabels, ResolvedPaginationLabels } from './labels.js';
+import type { PaginationRangeEntry } from './pages.js';
 /** @internal Shared state distributed from {@link Pagination} to its parts via context. Not part of the public API. */
 export interface PaginationContextValue {
     page: number;
     pageCount: number;
-    pages: PaginationPage[];
+    pages: PaginationRangeEntry[];
     onPageChange: (page: number) => void;
+    /** Every string the strip speaks, with the consumer's overrides already merged over the defaults. */
+    labels: ResolvedPaginationLabels;
+    /** Whether the whole strip is disabled; each link ORs it with its own `disabled`. */
+    disabled: boolean;
 }
 /** Props for the {@link Pagination} root. */
 export interface PaginationProps extends Omit<PrimitivePropsWithRef<'nav'>, 'onChange'> {
+    /**
+     * Manual parts for full control; omitted, strip derives anatomy from page/sibling/boundary counts.
+     * @default undefined — the strip derives its anatomy.
+     */
+    children?: React.ReactNode;
     /** Total number of pages, used to disable `PaginationNext` on the last page. */
     pageCount: number;
     /**
@@ -27,6 +37,12 @@ export interface PaginationProps extends Omit<PrimitivePropsWithRef<'nav'>, 'onC
      * @default undefined — no-op if omitted.
      */
     onPageChange?: (page: number) => void;
+    /**
+     * Strings for nav landmark and controls. Each key optional, falls back to
+     * built-in English; part's own `aria-label` still wins.
+     * @default undefined — the built-in English strings.
+     */
+    labels?: PaginationLabels;
     /**
      * Pages shown either side of the current one in the `pages` model.
      * @default 1
@@ -38,6 +54,22 @@ export interface PaginationProps extends Omit<PrimitivePropsWithRef<'nav'>, 'onC
      * @default 1
      */
     boundaryCount?: number;
+    /**
+     * Disable strip-wide navigation; each control ORs with its own `disabled`.
+     * Set this while page loads, not `disabled` per item.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Show First/Last buttons at strip ends. Ignored when `children` is given.
+     * @default false
+     */
+    showFirstLast?: boolean;
+    /**
+     * Show status announcing `"Page {page} of {pageCount}"`. Ignored when `children` is given.
+     * @default false
+     */
+    showStatus?: boolean;
 }
 /** Props for {@link PaginationList}, the container for `PaginationItem`s. */
 export interface PaginationListProps extends PrimitivePropsWithRef<'ul'> {
@@ -45,8 +77,8 @@ export interface PaginationListProps extends PrimitivePropsWithRef<'ul'> {
 /** Props for a single {@link PaginationItem} wrapper. */
 export interface PaginationItemProps extends PrimitivePropsWithRef<'li'> {
 }
-/** Props for a {@link PaginationLink} page button. */
-export interface PaginationLinkProps extends PrimitivePropsWithRef<'button'> {
+/** Props for a {@link PaginationPage} page button. */
+export interface PaginationPageProps extends PrimitivePropsWithRef<'button'> {
     /** Page number this button navigates to when clicked. */
     page: number;
     /**
@@ -58,8 +90,13 @@ export interface PaginationLinkProps extends PrimitivePropsWithRef<'button'> {
      * @default undefined — derived: true when this link's `page` is the root's current page.
      */
     isActive?: boolean;
+    /**
+     * Disables button; when set, ORs with root's `disabled` for strip-wide control.
+     * @default false
+     */
+    disabled?: boolean;
 }
-/** Props for {@link PaginationPrevious}, a `PaginationLink` bound to `page - 1`. */
+/** Props for {@link PaginationPrevious}, a `PaginationPage` bound to `page - 1`. */
 export interface PaginationPreviousProps extends Omit<PrimitivePropsWithRef<'button'>, 'children'> {
     /**
      * Custom label content, replacing the default "Previous" text.
@@ -67,7 +104,7 @@ export interface PaginationPreviousProps extends Omit<PrimitivePropsWithRef<'but
      */
     children?: React.ReactNode;
 }
-/** Props for {@link PaginationNext}, a `PaginationLink` bound to `page + 1`. */
+/** Props for {@link PaginationNext}, a `PaginationPage` bound to `page + 1`. */
 export interface PaginationNextProps extends Omit<PrimitivePropsWithRef<'button'>, 'children'> {
     /**
      * Custom label content, replacing the default "Next" text.
@@ -75,7 +112,7 @@ export interface PaginationNextProps extends Omit<PrimitivePropsWithRef<'button'
      */
     children?: React.ReactNode;
 }
-/** Props for {@link PaginationFirst}, a `PaginationLink` bound to page 1. */
+/** Props for {@link PaginationFirst}, a `PaginationPage` bound to page 1. */
 export interface PaginationFirstProps extends Omit<PrimitivePropsWithRef<'button'>, 'children'> {
     /**
      * Custom label content, replacing the default "First" text.
@@ -83,7 +120,7 @@ export interface PaginationFirstProps extends Omit<PrimitivePropsWithRef<'button
      */
     children?: React.ReactNode;
 }
-/** Props for {@link PaginationLast}, a `PaginationLink` bound to `pageCount`. */
+/** Props for {@link PaginationLast}, a `PaginationPage` bound to `pageCount`. */
 export interface PaginationLastProps extends Omit<PrimitivePropsWithRef<'button'>, 'children'> {
     /**
      * Custom label content, replacing the default "Last" text.
@@ -94,3 +131,12 @@ export interface PaginationLastProps extends Omit<PrimitivePropsWithRef<'button'
 /** Props for {@link PaginationEllipsis}, a collapsed-pages placeholder. */
 export interface PaginationEllipsisProps extends PrimitivePropsWithRef<'span'> {
 }
+/** Props for {@link PaginationStatus}, the optional page-change live region. */
+export interface PaginationStatusProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Builds the announcement from the root's current page and page count.
+     * Ignored when `children` are given.
+     * @default undefined — renders nothing unless `children` are supplied.
+     */
+    format?: (page: number, pageCount: number) => string;
+}

package/dist/password-input/PasswordInput.cjs

@@ -1 +1 @@
-"use strict";var S=Object.create;var p=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var A=(e,o)=>{for(var s in o)p(e,s,{get:o[s],enumerable:!0})},b=(e,o,s,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of D(o))!z.call(e,t)&&t!==s&&p(e,t,{get:()=>o[t],enumerable:!(i=B(o,t))||i.enumerable});return e};var u=(e,o,s)=>(s=e!=null?S(q(e)):{},b(o||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e)),G=e=>b(p({},"__esModule",{value:!0}),e);var J={};A(J,{PasswordInput:()=>T,PasswordInputField:()=>P,PasswordInputProvider:()=>C,PasswordInputToggle:()=>f,usePasswordInputContext:()=>d});module.exports=G(J);var a=u(require("react"),1),I=require("../text-field/TextField.cjs"),g=require("../utils/createContext.cjs"),v=require("../utils/liveAnnouncer.cjs"),x=require("../utils/part.cjs"),y=require("../utils/useCallbackRef.cjs"),R=require("../utils/useControllableState.cjs"),m=require("react/jsx-runtime"),[C,d]=(0,g.createSafeContext)("PasswordInput"),T=a.forwardRef(({visible:e,defaultVisible:o=!1,onVisibleChange:s,getVisibilityAnnouncement:i,...t},L)=>{let[r=!1,M]=(0,R.useControllableState)({prop:e,defaultProp:o,onChange:s}),w=a.useRef(r),c=(0,y.useCallbackRef)(i??(n=>n?"Password shown":"Password hidden"));return a.useEffect(()=>{if(w.current===r)return;w.current=r;let n=c(r);n&&(0,v.announce)(n)},[r,c]),(0,m.jsx)(C,{visible:r,disabled:t.disabled??!1,setVisible:M,children:(0,m.jsx)(I.TextField,{"data-state":r?"visible":"hidden",...t,...(0,x.skdxPart)("password-input","root",t.className),ref:L})})});T.displayName="PasswordInput";var F=u(require("react"),1),h=require("../text-field/TextField.cjs"),k=require("../utils/part.cjs");var N=require("react/jsx-runtime"),P=F.forwardRef((e,o)=>{let s=d("PasswordInputField");return(0,N.jsx)(h.TextFieldInput,{type:s.visible?"text":"password",autoComplete:"current-password","data-state":s.visible?"visible":"hidden",...e,...(0,k.skdxPart)("password-input","field",e.className),ref:o})});P.displayName="PasswordInputField";var E=u(require("react"),1),H=require("../utils/part.cjs"),l=require("../utils/primitive.cjs");var V=require("react/jsx-runtime"),f=E.forwardRef((e,o)=>{let s=d("PasswordInputToggle");return(0,V.jsx)(l.Primitive.button,{type:"button","aria-pressed":s.visible,"aria-label":s.visible?"Hide password":"Show password",disabled:s.disabled,"data-state":s.visible?"visible":"hidden","data-disabled":s.disabled?"":void 0,...e,...(0,H.skdxPart)("password-input","toggle",e.className),ref:o,onClick:(0,l.composeEventHandlers)(e.onClick,()=>s.setVisible(!s.visible))})});f.displayName="PasswordInputToggle";0&&(module.exports={PasswordInput,PasswordInputField,PasswordInputProvider,PasswordInputToggle,usePasswordInputContext});
+"use strict";var _=Object.create;var m=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var te=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of j(t))!oe.call(e,r)&&r!==o&&m(e,r,{get:()=>t[r],enumerable:!(n=$(t,r))||n.enumerable});return e};var P=(e,t,o)=>(o=e!=null?_(ee(e)):{},v(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),re=e=>v(m({},"__esModule",{value:!0}),e);var se={};te(se,{PasswordInput:()=>b,PasswordInputField:()=>u,PasswordInputProvider:()=>z,PasswordInputToggle:()=>c,usePasswordInputContext:()=>d});module.exports=re(se);var l=P(require("react"),1),S=require("../text-field/TextField.cjs"),M=require("../utils/composeRefs.cjs"),V=require("../utils/createContext.cjs"),O=require("../utils/formControl.cjs"),A=require("../utils/liveAnnouncer.cjs"),B=require("../utils/part.cjs"),D=require("../utils/useCallbackRef.cjs"),q=require("../utils/useControllableState.cjs");var k=require("../text-field/TextField.cjs"),E=require("../text-field/TextField.cjs");var y=P(require("react"),1),T=require("../text-field/TextField.cjs"),C=require("../utils/part.cjs");var F=require("react/jsx-runtime"),u=y.forwardRef((e,t)=>{let o=d("PasswordInputField");return(0,F.jsx)(T.TextFieldInput,{type:o.visible?"text":"password",readOnly:o.readOnly,autoComplete:"current-password","data-state":o.visible?"visible":"hidden",...e,...(0,C.skdxPart)("password-input","field",e.className),ref:t})});u.displayName="PasswordInputField";var h=P(require("react"),1),L=require("../utils/part.cjs"),f=require("../utils/primitive.cjs");var N=require("react/jsx-runtime"),c=h.forwardRef((e,t)=>{let o=d("PasswordInputToggle");return(0,N.jsx)(f.Primitive.button,{type:"button","aria-pressed":o.visible,"aria-label":o.revealLabel,disabled:o.disabled,"data-state":o.visible?"visible":"hidden","data-disabled":o.disabled?"":void 0,...e,...(0,L.skdxPart)("password-input","toggle",e.className),ref:t,onClick:(0,f.composeEventHandlers)(e.onClick,()=>o.setVisible(!o.visible))})});c.displayName="PasswordInputToggle";var s=require("react/jsx-runtime");function H({clearable:e,clearLabel:t,leading:o,placeholder:n,showToggle:r}){return(0,s.jsxs)(s.Fragment,{children:[o?(0,s.jsx)(E.TextFieldSlot,{side:"start",children:o}):null,(0,s.jsx)(u,{placeholder:n}),e?(0,s.jsx)(k.TextFieldClearButton,{label:t}):null,r?(0,s.jsx)(c,{}):null]})}var w=require("react/jsx-runtime"),[z,d]=(0,V.createSafeContext)("PasswordInput"),b=l.forwardRef(({visible:e,defaultVisible:t=!1,onVisibleChange:o,getVisibilityAnnouncement:n,revealLabel:r="Show password",readOnly:G=!1,showToggle:J=!0,clearable:K=!1,clearLabel:Q,leading:U,placeholder:W,children:X,...i},Y)=>{let I=l.useRef(null),Z=(0,M.useComposedRefs)(Y,I),[a=!1,g]=(0,q.useControllableState)({prop:e,defaultProp:t,onChange:o});(0,O.useFormReset)(I,()=>g(t),i.form);let x=l.useRef(a),R=(0,D.useCallbackRef)(n??(p=>p?"Password shown":"Password hidden"));return l.useEffect(()=>{if(x.current===a)return;x.current=a;let p=R(a);p&&(0,A.announce)(p)},[a,R]),(0,w.jsx)(z,{visible:a,disabled:i.disabled??!1,readOnly:G,revealLabel:r,setVisible:g,children:(0,w.jsx)(S.TextField,{"data-state":a?"visible":"hidden",...i,...(0,B.skdxPart)("password-input","root",i.className),ref:Z,children:X??(0,w.jsx)(H,{clearable:K,clearLabel:Q,leading:U,placeholder:W,showToggle:J})})})});b.displayName="PasswordInput";0&&(module.exports={PasswordInput,PasswordInputField,PasswordInputProvider,PasswordInputToggle,usePasswordInputContext});

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

@@ -7,27 +7,23 @@ export declare const PasswordInputProvider: {
     displayName: string;
 }, usePasswordInputContext: (consumerName: string) => PasswordInputContextValue;
 /**
- * Root of a password input: a {@link TextField} that also owns whether the
- * characters are revealed, handing that down to `PasswordInputField` (which
- * flips its `type`) and `PasswordInputToggle` (which flips the state) via
- * context.
+ * 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.
  *
- * The value itself is `TextField`'s — this component composes it rather than
- * re-declaring it, so `value`/`defaultValue`/`onValueChange`, `disabled`,
- * `invalid` and `required` all behave identically to a plain text field and
- * `data-disabled`/`data-invalid` land in the same places. The only state added
- * here is visibility.
+ * 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 change of visibility is announced politely through the shared live
- * region ("Password shown" / "Password hidden"). A masked field flipping to
- * plaintext is a purely visual event: without the announcement a screen-reader
- * user pressing the toggle gets `aria-pressed` and nothing else, and never
- * learns that their password is now on screen. The announcement is driven by
- * the resolved state, not by the click, so a controlled parent that refuses
- * the change does not produce a false announcement.
+ * 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 how the value is controlled.
+ * 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`.
  *
  * @example
  * ```tsx

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

@@ -7,27 +7,23 @@ export declare const PasswordInputProvider: {
     displayName: string;
 }, usePasswordInputContext: (consumerName: string) => PasswordInputContextValue;
 /**
- * Root of a password input: a {@link TextField} that also owns whether the
- * characters are revealed, handing that down to `PasswordInputField` (which
- * flips its `type`) and `PasswordInputToggle` (which flips the state) via
- * context.
+ * 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.
  *
- * The value itself is `TextField`'s — this component composes it rather than
- * re-declaring it, so `value`/`defaultValue`/`onValueChange`, `disabled`,
- * `invalid` and `required` all behave identically to a plain text field and
- * `data-disabled`/`data-invalid` land in the same places. The only state added
- * here is visibility.
+ * 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 change of visibility is announced politely through the shared live
- * region ("Password shown" / "Password hidden"). A masked field flipping to
- * plaintext is a purely visual event: without the announcement a screen-reader
- * user pressing the toggle gets `aria-pressed` and nothing else, and never
- * learns that their password is now on screen. The announcement is driven by
- * the resolved state, not by the click, so a controlled parent that refuses
- * the change does not produce a false announcement.
+ * 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 how the value is controlled.
+ * 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`.
  *
  * @example
  * ```tsx

package/dist/password-input/PasswordInput.js

@@ -1 +1 @@
-import*as t from"react";import{TextField as I}from"../text-field/TextField.js";import{createSafeContext as g}from"../utils/createContext.js";import{announce as v}from"../utils/liveAnnouncer.js";import{skdxPart as x}from"../utils/part.js";import{useCallbackRef as y}from"../utils/useCallbackRef.js";import{useControllableState as R}from"../utils/useControllableState.js";import{jsx as l}from"react/jsx-runtime";var[C,d]=g("PasswordInput"),T=t.forwardRef(({visible:s,defaultVisible:r=!1,onVisibleChange:e,getVisibilityAnnouncement:w,...i},c)=>{let[o=!1,b]=R({prop:s,defaultProp:r,onChange:e}),n=t.useRef(o),p=y(w??(a=>a?"Password shown":"Password hidden"));return t.useEffect(()=>{if(n.current===o)return;n.current=o;let a=p(o);a&&v(a)},[o,p]),l(C,{visible:o,disabled:i.disabled??!1,setVisible:b,children:l(I,{"data-state":o?"visible":"hidden",...i,...x("password-input","root",i.className),ref:c})})});T.displayName="PasswordInput";import*as u from"react";import{TextFieldInput as F}from"../text-field/TextField.js";import{skdxPart as h}from"../utils/part.js";import{jsx as k}from"react/jsx-runtime";var m=u.forwardRef((s,r)=>{let e=d("PasswordInputField");return k(F,{type:e.visible?"text":"password",autoComplete:"current-password","data-state":e.visible?"visible":"hidden",...s,...h("password-input","field",s.className),ref:r})});m.displayName="PasswordInputField";import*as P from"react";import{skdxPart as N}from"../utils/part.js";import{composeEventHandlers as E,Primitive as H}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var f=P.forwardRef((s,r)=>{let e=d("PasswordInputToggle");return V(H.button,{type:"button","aria-pressed":e.visible,"aria-label":e.visible?"Hide password":"Show password",disabled:e.disabled,"data-state":e.visible?"visible":"hidden","data-disabled":e.disabled?"":void 0,...s,...N("password-input","toggle",s.className),ref:r,onClick:E(s.onClick,()=>e.setVisible(!e.visible))})});f.displayName="PasswordInputToggle";export{T as PasswordInput,m as PasswordInputField,C as PasswordInputProvider,f as PasswordInputToggle,d as usePasswordInputContext};
+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};

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

@@ -0,0 +1,14 @@
+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;
+    showToggle: boolean;
+}): React.JSX.Element;

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

@@ -0,0 +1,14 @@
+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;
+    showToggle: boolean;
+}): React.JSX.Element;

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

@@ -1,21 +1,10 @@
 import * as React from 'react';
 import type { PasswordInputFieldProps } from './types.cjs';
 /**
- * The native `<input>` for a {@link PasswordInput}. It *is* a
- * {@link TextFieldInput} — same `id`, same value wiring, same
- * `aria-invalid`/`data-disabled`/`data-invalid` — with one attribute taken
- * over: `type` is `password` while the root is hidden and `text` while it is
- * visible. Toggling the type rather than swapping the element keeps the same
- * DOM node, so focus, selection and caret position survive the flip.
- *
- * `autoComplete` defaults to `current-password` (WCAG 2.1 SC 1.3.5, Identify
- * Input Purpose) and is overridable — a sign-up or change-password form wants
- * `new-password`.
- *
- * The value is never written into an attribute by this component: React drives
- * the controlled `<input>` through its `value` *property*, and nothing here
- * copies it into a `data-*` or `aria-*` where a plaintext credential would end
- * up in serialised HTML.
+ * 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).
  *
  * @example
  * ```tsx

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

@@ -1,21 +1,10 @@
 import * as React from 'react';
 import type { PasswordInputFieldProps } from './types.js';
 /**
- * The native `<input>` for a {@link PasswordInput}. It *is* a
- * {@link TextFieldInput} — same `id`, same value wiring, same
- * `aria-invalid`/`data-disabled`/`data-invalid` — with one attribute taken
- * over: `type` is `password` while the root is hidden and `text` while it is
- * visible. Toggling the type rather than swapping the element keeps the same
- * DOM node, so focus, selection and caret position survive the flip.
- *
- * `autoComplete` defaults to `current-password` (WCAG 2.1 SC 1.3.5, Identify
- * Input Purpose) and is overridable — a sign-up or change-password form wants
- * `new-password`.
- *
- * The value is never written into an attribute by this component: React drives
- * the controlled `<input>` through its `value` *property*, and nothing here
- * copies it into a `data-*` or `aria-*` where a plaintext credential would end
- * up in serialised HTML.
+ * 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).
  *
  * @example
  * ```tsx

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

@@ -1,24 +1,9 @@
 import * as React from 'react';
 import type { PasswordInputToggleProps } from './types.cjs';
 /**
- * The reveal button for a {@link PasswordInput}. Renders a
- * `<button type="button">` carrying `aria-pressed`, so assistive tech reports
- * a toggle that is currently on or off rather than a button that did
- * something unknowable.
- *
- * **It stays in the tab order.** `tabIndex={-1}` is a common shortcut for
- * "adornment inside a field" and it is wrong here: revealing the characters is
- * the only way a keyboard user can check what they typed, and taking the
- * button out of tab navigation makes that unreachable without a pointer
- * (WCAG 2.1.1). Tab from the field lands on the toggle.
- *
- * An accessible name is always present: it defaults to "Show password" /
- * "Hide password", flipping with the state so the name and `aria-pressed`
- * agree. Pass your own `aria-label` to localise it — but pass one, because an
- * icon-only button with no name announces as "button".
- *
- * Disabled follows the root's `disabled`, and both `data-state` and
- * `data-disabled` are exposed for styling.
+ * 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.
  *
  * @example
  * ```tsx

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

@@ -1,24 +1,9 @@
 import * as React from 'react';
 import type { PasswordInputToggleProps } from './types.js';
 /**
- * The reveal button for a {@link PasswordInput}. Renders a
- * `<button type="button">` carrying `aria-pressed`, so assistive tech reports
- * a toggle that is currently on or off rather than a button that did
- * something unknowable.
- *
- * **It stays in the tab order.** `tabIndex={-1}` is a common shortcut for
- * "adornment inside a field" and it is wrong here: revealing the characters is
- * the only way a keyboard user can check what they typed, and taking the
- * button out of tab navigation makes that unreachable without a pointer
- * (WCAG 2.1.1). Tab from the field lands on the toggle.
- *
- * An accessible name is always present: it defaults to "Show password" /
- * "Hide password", flipping with the state so the name and `aria-pressed`
- * agree. Pass your own `aria-label` to localise it — but pass one, because an
- * icon-only button with no name announces as "button".
- *
- * Disabled follows the root's `disabled`, and both `data-state` and
- * `data-disabled` are exposed for styling.
+ * 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.
  *
  * @example
  * ```tsx

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

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

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

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

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

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

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

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

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

@@ -4,40 +4,53 @@ import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 export interface PasswordInputContextValue {
     visible: boolean;
     disabled: boolean;
+    /** Native `readonly` for the field; the toggle deliberately stays operable. */
+    readOnly: boolean;
+    /** Accessible name for the reveal button, which has only an icon of its own. */
+    revealLabel: string;
     setVisible: (visible: boolean) => void;
 }
 /**
  * Props for the {@link PasswordInput} root. Every {@link TextFieldProps} prop
  * is forwarded verbatim — `value`/`defaultValue`/`onValueChange`, `disabled`,
- * `invalid`, `required` — because the root *is* a `TextField` with a
- * visibility layer on top, not a re-implementation of one.
+ * `invalid`, `required`. `trailing` is omitted; the derived `PasswordInputToggle` is the trailing adornment.
  */
-export interface PasswordInputProps extends TextFieldProps {
+export interface PasswordInputProps extends Omit<TextFieldProps, 'trailing'> {
     /**
-     * Whether the characters are revealed, for controlled usage. Pair with
-     * `onVisibleChange`.
+     * 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.
+     * @default false — the field starts masked.
      */
     defaultVisible?: boolean;
+    /**
+     * Accessible name for the reveal button, whose children are an icon with no text content.
+     * @default 'Show password' — English; translate it.
+     */
+    revealLabel?: string;
+    /**
+     * Makes the field read-only: the value stays focusable and submitted, editing is blocked. The toggle stays operable.
+     * @default false
+     */
+    readOnly?: 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.
+     * 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;
+    /**
+     * Renders the derived `PasswordInputToggle`. Ignored when `children` is given.
+     * @default true
+     */
+    showToggle?: boolean;
 }
 /**
  * Props for {@link PasswordInputField}, the native `<input>`.

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

@@ -4,40 +4,53 @@ import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 export interface PasswordInputContextValue {
     visible: boolean;
     disabled: boolean;
+    /** Native `readonly` for the field; the toggle deliberately stays operable. */
+    readOnly: boolean;
+    /** Accessible name for the reveal button, which has only an icon of its own. */
+    revealLabel: string;
     setVisible: (visible: boolean) => void;
 }
 /**
  * Props for the {@link PasswordInput} root. Every {@link TextFieldProps} prop
  * is forwarded verbatim — `value`/`defaultValue`/`onValueChange`, `disabled`,
- * `invalid`, `required` — because the root *is* a `TextField` with a
- * visibility layer on top, not a re-implementation of one.
+ * `invalid`, `required`. `trailing` is omitted; the derived `PasswordInputToggle` is the trailing adornment.
  */
-export interface PasswordInputProps extends TextFieldProps {
+export interface PasswordInputProps extends Omit<TextFieldProps, 'trailing'> {
     /**
-     * Whether the characters are revealed, for controlled usage. Pair with
-     * `onVisibleChange`.
+     * 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.
+     * @default false — the field starts masked.
      */
     defaultVisible?: boolean;
+    /**
+     * Accessible name for the reveal button, whose children are an icon with no text content.
+     * @default 'Show password' — English; translate it.
+     */
+    revealLabel?: string;
+    /**
+     * Makes the field read-only: the value stays focusable and submitted, editing is blocked. The toggle stays operable.
+     * @default false
+     */
+    readOnly?: 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.
+     * 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;
+    /**
+     * Renders the derived `PasswordInputToggle`. Ignored when `children` is given.
+     * @default true
+     */
+    showToggle?: boolean;
 }
 /**
  * Props for {@link PasswordInputField}, the native `<input>`.