@skdx/react 0.26.0

package/dist/pagination/PaginationLink.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { PaginationLinkProps } from './types.js';
+/**
+ * A page button: renders a `<button type="button">` marked with
+ * `data-skdx-pagination-item` (so the root's roving focus can find it),
+ * `aria-current="page"` and `data-state="active"` when `isActive`, and
+ * `data-disabled` when disabled. Clicking it calls the root's
+ * `onPageChange` with its `page`. Defaults its label to `page` if no
+ * children are given.
+ *
+ * @example
+ * ```tsx
+ * <PaginationLink page={3} isActive>3</PaginationLink>
+ * ```
+ */
+export declare const PaginationLink: React.ForwardRefExoticComponent<Omit<PaginationLinkProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/pagination/PaginationList.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { PaginationListProps } from './types.cjs';
+/**
+ * The `<ul>` holding the page entries. Wrapping each {@link PaginationItem} in
+ * it exposes the pages to assistive technology as a list with a known length.
+ *
+ * @example
+ * ```tsx
+ * <PaginationList>
+ *   <PaginationItem>
+ *     <PaginationLink page={1}>1</PaginationLink>
+ *   </PaginationItem>
+ * </PaginationList>
+ * ```
+ */
+export declare const PaginationList: React.ForwardRefExoticComponent<Omit<PaginationListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;

package/dist/pagination/PaginationList.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { PaginationListProps } from './types.js';
+/**
+ * The `<ul>` holding the page entries. Wrapping each {@link PaginationItem} in
+ * it exposes the pages to assistive technology as a list with a known length.
+ *
+ * @example
+ * ```tsx
+ * <PaginationList>
+ *   <PaginationItem>
+ *     <PaginationLink page={1}>1</PaginationLink>
+ *   </PaginationItem>
+ * </PaginationList>
+ * ```
+ */
+export declare const PaginationList: React.ForwardRefExoticComponent<Omit<PaginationListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;

package/dist/pagination/PaginationNext.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { PaginationNextProps } from './types.cjs';
+/**
+ * A {@link PaginationLink} preconfigured for `page + 1`, labelled
+ * `"Go to next page"` and automatically disabled on the last page.
+ *
+ * @example
+ * ```tsx
+ * <PaginationItem>
+ *   <PaginationNext />
+ * </PaginationItem>
+ * ```
+ */
+export declare const PaginationNext: React.ForwardRefExoticComponent<Omit<PaginationNextProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/pagination/PaginationNext.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { PaginationNextProps } from './types.js';
+/**
+ * A {@link PaginationLink} preconfigured for `page + 1`, labelled
+ * `"Go to next page"` and automatically disabled on the last page.
+ *
+ * @example
+ * ```tsx
+ * <PaginationItem>
+ *   <PaginationNext />
+ * </PaginationItem>
+ * ```
+ */
+export declare const PaginationNext: React.ForwardRefExoticComponent<Omit<PaginationNextProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/pagination/PaginationPrevious.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { PaginationPreviousProps } from './types.cjs';
+/**
+ * A {@link PaginationLink} preconfigured for `page - 1`, labelled
+ * `"Go to previous page"` and automatically disabled on the first page.
+ *
+ * @example
+ * ```tsx
+ * <PaginationItem>
+ *   <PaginationPrevious />
+ * </PaginationItem>
+ * ```
+ */
+export declare const PaginationPrevious: React.ForwardRefExoticComponent<Omit<PaginationPreviousProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/pagination/PaginationPrevious.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { PaginationPreviousProps } from './types.js';
+/**
+ * A {@link PaginationLink} preconfigured for `page - 1`, labelled
+ * `"Go to previous page"` and automatically disabled on the first page.
+ *
+ * @example
+ * ```tsx
+ * <PaginationItem>
+ *   <PaginationPrevious />
+ * </PaginationItem>
+ * ```
+ */
+export declare const PaginationPrevious: React.ForwardRefExoticComponent<Omit<PaginationPreviousProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/pagination/index.d.cts

@@ -0,0 +1,11 @@
+export * from './Pagination.cjs';
+export { PaginationList } from './PaginationList.cjs';
+export { PaginationItem } from './PaginationItem.cjs';
+export { PaginationLink } from './PaginationLink.cjs';
+export { PaginationPrevious } from './PaginationPrevious.cjs';
+export { PaginationNext } from './PaginationNext.cjs';
+export { PaginationFirst } from './PaginationFirst.cjs';
+export { PaginationLast } from './PaginationLast.cjs';
+export { PaginationEllipsis } from './PaginationEllipsis.cjs';
+export type { PaginationProps, PaginationListProps, PaginationItemProps, PaginationLinkProps, PaginationPreviousProps, PaginationNextProps, PaginationFirstProps, PaginationLastProps, PaginationEllipsisProps, } from './types.cjs';
+export { getPaginationRange, type PaginationPage, type PaginationRangeOptions } from './pages.cjs';

package/dist/pagination/index.d.ts

@@ -0,0 +1,11 @@
+export * from './Pagination.js';
+export { PaginationList } from './PaginationList.js';
+export { PaginationItem } from './PaginationItem.js';
+export { PaginationLink } from './PaginationLink.js';
+export { PaginationPrevious } from './PaginationPrevious.js';
+export { PaginationNext } from './PaginationNext.js';
+export { PaginationFirst } from './PaginationFirst.js';
+export { PaginationLast } from './PaginationLast.js';
+export { PaginationEllipsis } from './PaginationEllipsis.js';
+export type { PaginationProps, PaginationListProps, PaginationItemProps, PaginationLinkProps, PaginationPreviousProps, PaginationNextProps, PaginationFirstProps, PaginationLastProps, PaginationEllipsisProps, } from './types.js';
+export { getPaginationRange, type PaginationPage, type PaginationRangeOptions } from './pages.js';

package/dist/pagination/pages.d.cts

@@ -0,0 +1,41 @@
+/**
+ * The framework-free page-range model behind Pagination. Copied verbatim into
+ * every framework package (this file has no imports for exactly that reason),
+ * so `siblingCount`/`boundaryCount` mean the same thing everywhere and the
+ * shared `paginationRangeCases` fixture can be run against all five.
+ */
+/** One slot in a rendered pagination strip: a page number, or a collapsed run. */
+export type PaginationPage = number | 'ellipsis';
+/** Inputs to {@link getPaginationRange}. */
+export interface PaginationRangeOptions {
+    /** Current page, 1-based. */
+    page: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /**
+     * Pages shown either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Pages always shown at each end, however far away the current page is.
+     * @default 1
+     */
+    boundaryCount?: number;
+}
+/**
+ * The pages to render for `page` of `pageCount`, with `'ellipsis'` standing in
+ * for each collapsed run — the model a Pagination needs to render a fixed-width
+ * strip instead of every page number.
+ *
+ * A gap of exactly one page is filled with that page rather than an ellipsis,
+ * because an ellipsis hiding a single number is both wider and less useful than
+ * the number itself.
+ *
+ * @example
+ * ```ts
+ * getPaginationRange({ page: 6, pageCount: 20 });
+ * // [1, 'ellipsis', 5, 6, 7, 'ellipsis', 20]
+ * ```
+ */
+export declare function getPaginationRange({ page, pageCount, siblingCount, boundaryCount, }: PaginationRangeOptions): PaginationPage[];

package/dist/pagination/pages.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The framework-free page-range model behind Pagination. Copied verbatim into
+ * every framework package (this file has no imports for exactly that reason),
+ * so `siblingCount`/`boundaryCount` mean the same thing everywhere and the
+ * shared `paginationRangeCases` fixture can be run against all five.
+ */
+/** One slot in a rendered pagination strip: a page number, or a collapsed run. */
+export type PaginationPage = number | 'ellipsis';
+/** Inputs to {@link getPaginationRange}. */
+export interface PaginationRangeOptions {
+    /** Current page, 1-based. */
+    page: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /**
+     * Pages shown either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Pages always shown at each end, however far away the current page is.
+     * @default 1
+     */
+    boundaryCount?: number;
+}
+/**
+ * The pages to render for `page` of `pageCount`, with `'ellipsis'` standing in
+ * for each collapsed run — the model a Pagination needs to render a fixed-width
+ * strip instead of every page number.
+ *
+ * A gap of exactly one page is filled with that page rather than an ellipsis,
+ * because an ellipsis hiding a single number is both wider and less useful than
+ * the number itself.
+ *
+ * @example
+ * ```ts
+ * getPaginationRange({ page: 6, pageCount: 20 });
+ * // [1, 'ellipsis', 5, 6, 7, 'ellipsis', 20]
+ * ```
+ */
+export declare function getPaginationRange({ page, pageCount, siblingCount, boundaryCount, }: PaginationRangeOptions): PaginationPage[];

package/dist/pagination/types.d.cts

@@ -0,0 +1,96 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { PaginationPage } 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[];
+    onPageChange: (page: number) => void;
+}
+/** Props for the {@link Pagination} root. */
+export interface PaginationProps extends Omit<PrimitivePropsWithRef<'nav'>, 'onChange'> {
+    /** 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;
+    /**
+     * Initial page (1-based), for uncontrolled usage.
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * Fires with the new page number whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Pages shown either side of the current one in the `pages` model.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Pages always shown at each end of the `pages` model, however far away the
+     * current page is.
+     * @default 1
+     */
+    boundaryCount?: number;
+}
+/** Props for {@link PaginationList}, the container for `PaginationItem`s. */
+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'> {
+    /** 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.
+     * @default undefined — derived: true when this link's `page` is the root's current page.
+     */
+    isActive?: boolean;
+}
+/** Props for {@link PaginationPrevious}, a `PaginationLink` 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;
+}
+/** Props for {@link PaginationNext}, a `PaginationLink` 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;
+}
+/** Props for {@link PaginationFirst}, a `PaginationLink` 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;
+}
+/** Props for {@link PaginationLast}, a `PaginationLink` bound to `pageCount`. */
+export interface PaginationLastProps extends Omit<PrimitivePropsWithRef<'button'>, 'children'> {
+    /**
+     * Custom label content, replacing the default "Last" text.
+     * @default 'Last'
+     */
+    children?: React.ReactNode;
+}
+/** Props for {@link PaginationEllipsis}, a collapsed-pages placeholder. */
+export interface PaginationEllipsisProps extends PrimitivePropsWithRef<'span'> {
+}

package/dist/pagination/types.d.ts

@@ -0,0 +1,96 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { PaginationPage } 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[];
+    onPageChange: (page: number) => void;
+}
+/** Props for the {@link Pagination} root. */
+export interface PaginationProps extends Omit<PrimitivePropsWithRef<'nav'>, 'onChange'> {
+    /** 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;
+    /**
+     * Initial page (1-based), for uncontrolled usage.
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * Fires with the new page number whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Pages shown either side of the current one in the `pages` model.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Pages always shown at each end of the `pages` model, however far away the
+     * current page is.
+     * @default 1
+     */
+    boundaryCount?: number;
+}
+/** Props for {@link PaginationList}, the container for `PaginationItem`s. */
+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'> {
+    /** 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.
+     * @default undefined — derived: true when this link's `page` is the root's current page.
+     */
+    isActive?: boolean;
+}
+/** Props for {@link PaginationPrevious}, a `PaginationLink` 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;
+}
+/** Props for {@link PaginationNext}, a `PaginationLink` 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;
+}
+/** Props for {@link PaginationFirst}, a `PaginationLink` 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;
+}
+/** Props for {@link PaginationLast}, a `PaginationLink` bound to `pageCount`. */
+export interface PaginationLastProps extends Omit<PrimitivePropsWithRef<'button'>, 'children'> {
+    /**
+     * Custom label content, replacing the default "Last" text.
+     * @default 'Last'
+     */
+    children?: React.ReactNode;
+}
+/** Props for {@link PaginationEllipsis}, a collapsed-pages placeholder. */
+export interface PaginationEllipsisProps extends PrimitivePropsWithRef<'span'> {
+}

package/dist/password-input/PasswordInput.cjs

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

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

@@ -0,0 +1,40 @@
+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;
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInput>
+ *   <PasswordInputField placeholder="Password" />
+ *   <PasswordInputToggle />
+ * </PasswordInput>
+ * ```
+ */
+export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,40 @@
+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;
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInput>
+ *   <PasswordInputField placeholder="Password" />
+ *   <PasswordInputToggle />
+ * </PasswordInput>
+ * ```
+ */
+export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/password-input/PasswordInput.js

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

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

@@ -0,0 +1,28 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInput>
+ *   <PasswordInputField placeholder="Password" autoComplete="new-password" />
+ *   <PasswordInputToggle />
+ * </PasswordInput>
+ * ```
+ */
+export declare const PasswordInputField: React.ForwardRefExoticComponent<Omit<PasswordInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,28 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInput>
+ *   <PasswordInputField placeholder="Password" autoComplete="new-password" />
+ *   <PasswordInputToggle />
+ * </PasswordInput>
+ * ```
+ */
+export declare const PasswordInputField: React.ForwardRefExoticComponent<Omit<PasswordInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,30 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInputToggle aria-label="Mot de passe visible">
+ *   <EyeIcon />
+ * </PasswordInputToggle>
+ * ```
+ */
+export declare const PasswordInputToggle: React.ForwardRefExoticComponent<Omit<PasswordInputToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,30 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInputToggle aria-label="Mot de passe visible">
+ *   <EyeIcon />
+ * </PasswordInputToggle>
+ * ```
+ */
+export declare const PasswordInputToggle: React.ForwardRefExoticComponent<Omit<PasswordInputToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,4 @@
+export * 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/index.d.ts

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