@skdx/react 0.27.0 → 0.29.0

package/dist/pagination/types.d.cts

@@ -1,43 +1,85 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-import type { PaginationPage } from './pages.cjs';
+import type { PaginationLabels, ResolvedPaginationLabels } from './labels.cjs';
+import type { PaginationRangeEntry } from './pages.cjs';
 /** @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 | undefined;
     /** Total number of pages, used to disable `PaginationNext` on the last page. */
     pageCount: number;
     /**
      * Current page (1-based), for controlled usage. Pair with `onPageChange`.
      * @default undefined — uncontrolled, tracks its own current page internally.
      */
-    page?: number;
+    page?: number | undefined;
     /**
      * Initial page (1-based), for uncontrolled usage.
      * @default 1
      */
-    defaultPage?: number;
+    defaultPage?: number | undefined;
     /**
      * Fires with the new page number whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onPageChange?: (page: number) => void;
+    onPageChange?: ((page: number) => void) | undefined;
+    /**
+     * 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 | undefined;
     /**
      * Pages shown either side of the current one in the `pages` model.
      * @default 1
      */
-    siblingCount?: number;
+    siblingCount?: number | undefined;
     /**
      * Pages always shown at each end of the `pages` model, however far away the
      * current page is.
      * @default 1
      */
-    boundaryCount?: number;
+    boundaryCount?: number | undefined;
+    /**
+     * Disable strip-wide navigation; each control ORs with its own `disabled`.
+     * Set this while page loads, not `disabled` per item.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show First/Last buttons at strip ends. Ignored when `children` is given.
+     * @default false
+     */
+    showFirstLast?: boolean | undefined;
+    /**
+     * Show status announcing `"Page {page} of {pageCount}"`. Ignored when `children` is given.
+     * @default false
+     */
+    showStatus?: boolean | undefined;
+    /**
+     * Spacing rung the skin packs the pager by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'comfortable' | (string & {}) | undefined;
+    /**
+     * Size rung the skin scales the pager by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'lg' | (string & {}) | undefined;
 }
 /** Props for {@link PaginationList}, the container for `PaginationItem`s. */
 export interface PaginationListProps extends PrimitivePropsWithRef<'ul'> {
@@ -45,52 +87,62 @@ 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;
     /**
-     * Marks this page as the currently selected one (sets `aria-current="page"`
-     * and `data-state="active"`).
-     *
-     * Override only for the split list/detail case, where the highlighted page is
-     * deliberately not the one the root is on.
+     * Marks this page as the currently selected one (sets `aria-current="page"` and `data-state="active"`).
      * @default undefined — derived: true when this link's `page` is the root's current page.
      */
-    isActive?: boolean;
+    isActive?: boolean | undefined;
+    /**
+     * Disables button; when set, ORs with root's `disabled` for strip-wide control.
+     * @default false
+     */
+    disabled?: boolean | undefined;
 }
-/** 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.
      * @default 'Previous'
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
-/** 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.
      * @default 'Next'
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
-/** 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.
      * @default 'First'
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
-/** 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.
      * @default 'Last'
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
 /** 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 — announces `Page N of M` in English.
+     */
+    format?: ((page: number, pageCount: number) => string) | undefined;
+}

package/dist/pagination/types.d.ts

@@ -1,43 +1,85 @@
 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 | undefined;
     /** Total number of pages, used to disable `PaginationNext` on the last page. */
     pageCount: number;
     /**
      * Current page (1-based), for controlled usage. Pair with `onPageChange`.
      * @default undefined — uncontrolled, tracks its own current page internally.
      */
-    page?: number;
+    page?: number | undefined;
     /**
      * Initial page (1-based), for uncontrolled usage.
      * @default 1
      */
-    defaultPage?: number;
+    defaultPage?: number | undefined;
     /**
      * Fires with the new page number whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onPageChange?: (page: number) => void;
+    onPageChange?: ((page: number) => void) | undefined;
+    /**
+     * 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 | undefined;
     /**
      * Pages shown either side of the current one in the `pages` model.
      * @default 1
      */
-    siblingCount?: number;
+    siblingCount?: number | undefined;
     /**
      * Pages always shown at each end of the `pages` model, however far away the
      * current page is.
      * @default 1
      */
-    boundaryCount?: number;
+    boundaryCount?: number | undefined;
+    /**
+     * Disable strip-wide navigation; each control ORs with its own `disabled`.
+     * Set this while page loads, not `disabled` per item.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show First/Last buttons at strip ends. Ignored when `children` is given.
+     * @default false
+     */
+    showFirstLast?: boolean | undefined;
+    /**
+     * Show status announcing `"Page {page} of {pageCount}"`. Ignored when `children` is given.
+     * @default false
+     */
+    showStatus?: boolean | undefined;
+    /**
+     * Spacing rung the skin packs the pager by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'comfortable' | (string & {}) | undefined;
+    /**
+     * Size rung the skin scales the pager by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'lg' | (string & {}) | undefined;
 }
 /** Props for {@link PaginationList}, the container for `PaginationItem`s. */
 export interface PaginationListProps extends PrimitivePropsWithRef<'ul'> {
@@ -45,52 +87,62 @@ 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;
     /**
-     * Marks this page as the currently selected one (sets `aria-current="page"`
-     * and `data-state="active"`).
-     *
-     * Override only for the split list/detail case, where the highlighted page is
-     * deliberately not the one the root is on.
+     * Marks this page as the currently selected one (sets `aria-current="page"` and `data-state="active"`).
      * @default undefined — derived: true when this link's `page` is the root's current page.
      */
-    isActive?: boolean;
+    isActive?: boolean | undefined;
+    /**
+     * Disables button; when set, ORs with root's `disabled` for strip-wide control.
+     * @default false
+     */
+    disabled?: boolean | undefined;
 }
-/** 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.
      * @default 'Previous'
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
-/** 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.
      * @default 'Next'
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
-/** 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.
      * @default 'First'
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
-/** 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.
      * @default 'Last'
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
 /** 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 — announces `Page N of M` in English.
+     */
+    format?: ((page: number, pageCount: number) => string) | undefined;
+}

package/dist/password-input/PasswordInput.cjs

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

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

@@ -1,33 +1,10 @@
 import * as React from 'react';
-import type { PasswordInputContextValue, PasswordInputProps } from './types.cjs';
-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.cjs';
+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 whether the
- * characters are revealed, handing that down to `PasswordInputField` (which
- * flips its `type`) and `PasswordInputToggle` (which flips the 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.
- *
- * 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.
- *
- * Works controlled (`visible` + `onVisibleChange`) or uncontrolled
- * (`defaultVisible`), independently of how the value is controlled.
+ * Root of a password input that composes {@link TextField} and shares visibility state via context.
  *
  * @example
  * ```tsx
@@ -37,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.d.ts

@@ -1,33 +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 whether the
- * characters are revealed, handing that down to `PasswordInputField` (which
- * flips its `type`) and `PasswordInputToggle` (which flips the 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.
- *
- * 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.
- *
- * Works controlled (`visible` + `onVisibleChange`) or uncontrolled
- * (`defaultVisible`), independently of how the value is controlled.
+ * Root of a password input that composes {@link TextField} and shares visibility state via context.
  *
  * @example
  * ```tsx
@@ -37,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 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};
+'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

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+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

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+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,21 +1,7 @@
-import * as React from 'react';
+import type * 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} whose `type` toggles between `password` and `text`.
  *
  * @example
  * ```tsx
@@ -25,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,21 +1,7 @@
-import * as React from 'react';
+import type * 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} whose `type` toggles between `password` and `text`.
  *
  * @example
  * ```tsx
@@ -25,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,24 +1,7 @@
-import * as React from 'react';
+import type * 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.
+ * Button that toggles password visibility and reports its state via `aria-pressed`.
  *
  * @example
  * ```tsx
@@ -27,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,24 +1,7 @@
-import * as React from 'react';
+import type * 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.
+ * Button that toggles password visibility and reports its state via `aria-pressed`.
  *
  * @example
  * ```tsx
@@ -27,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;
+};