@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,61 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type PaginationPage } from "./pagination-context.ts";
+export type { PaginationPage };
+export type PaginationRootProps = ComponentPropsWithRef<"div"> & PaginationPage & Readonly<{
+    /** The page sizes on offer. The current `pageSize` is offered alongside them when it is not one of them. */
+    pageSizes: readonly number[];
+    /** Called with the page to show, counted from 0. */
+    onPageIndexChange: (pageIndex: number) => void;
+    /** Called with the page size picked. */
+    onPageSizeChange: (pageSize: number) => void;
+}>;
+declare const PaginationRoot: ({ pageIndex, pageCount, pageSize, pageSizes, onPageIndexChange, onPageSizeChange, className, ...props }: PaginationRootProps) => ReactNode;
+export type PaginationPageSizeProps = Readonly<{
+    /** The field's label, such as "Rows per page". */
+    label: string;
+}>;
+declare const PaginationPageSize: ({ label, }: PaginationPageSizeProps) => ReactNode;
+export type PaginationIndexProps = Readonly<{
+    /** What the index says, such as `Page 3 of 12`, from where the list stands. */
+    label: (page: PaginationPage) => string;
+}>;
+declare const PaginationIndex: ({ label, }: PaginationIndexProps) => ReactNode;
+export type PaginationControlsProps = Readonly<{
+    /** The first-page button's name, such as "First page". */
+    firstLabel: string;
+    /** The previous-page button's name, such as "Previous page". */
+    previousLabel: string;
+    /** The next-page button's name, such as "Next page". */
+    nextLabel: string;
+    /** The last-page button's name, such as "Last page". */
+    lastLabel: string;
+}>;
+declare const PaginationControls: ({ firstLabel, previousLabel, nextLabel, lastLabel, }: PaginationControlsProps) => ReactNode;
+/** The parts of a pagination. */
+export type PaginationParts = Readonly<{
+    Root: typeof PaginationRoot;
+    PageSize: typeof PaginationPageSize;
+    Index: typeof PaginationIndex;
+    Controls: typeof PaginationControls;
+}>;
+/**
+ * The pager for a paged list, over any source: `Root` holds where the list
+ * stands, `PageSize` picks rows per page, `Index` says which page is on screen
+ * and `Controls` go to the first, previous, next and last page. Leave out the
+ * parts a list has no room for.
+ *
+ * @example
+ * <Pagination.Root
+ * 	pageIndex={pageIndex}
+ * 	pageCount={pageCount}
+ * 	pageSize={pageSize}
+ * 	pageSizes={[10, 20, 50]}
+ * 	onPageIndexChange={setPageIndex}
+ * 	onPageSizeChange={setPageSize}>
+ * 	<Pagination.PageSize label="Rows per page" />
+ * 	<Pagination.Index label={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`} />
+ * 	<Pagination.Controls firstLabel="First page" previousLabel="Previous page" nextLabel="Next page" lastLabel="Last page" />
+ * </Pagination.Root>
+ */
+export declare const Pagination: PaginationParts;
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACX,qBAAqB,EACrB,SAAS,EACT,MAAM,OAAO,CAAC;AAKf,OAAO,EAEN,KAAK,cAAc,EAEnB,MAAM,yBAAyB,CAAC;AAGjC,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,MAAM,MAAM,mBAAmB,GAC9B,qBAAqB,CAAC,KAAK,CAAC,GAC3B,cAAc,GACd,QAAQ,CAAC;IACR,4GAA4G;IAC5G,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,oDAAoD;IACpD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,wCAAwC;IACxC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC,CAAC;AAEL,QAAA,MAAM,cAAc,4GASjB,mBAAmB,KAAG,SAexB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC9C,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,QAAA,MAAM,kBAAkB,eAErB,uBAAuB,KAAG,SAsC5B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,+EAA+E;IAC/E,KAAK,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,MAAM,CAAC;CACxC,CAAC,CAAC;AAEH,QAAA,MAAM,eAAe,eAElB,oBAAoB,KAAG,SASzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC9C,0DAA0D;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,aAAa,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAgCH,QAAA,MAAM,kBAAkB,yDAKrB,uBAAuB,KAAG,SAuC5B,CAAC;AAEF,iCAAiC;AACjC,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACtC,IAAI,EAAE,OAAO,cAAc,CAAC;IAC5B,QAAQ,EAAE,OAAO,kBAAkB,CAAC;IACpC,KAAK,EAAE,OAAO,eAAe,CAAC;IAC9B,QAAQ,EAAE,OAAO,kBAAkB,CAAC;CACpC,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,eAKxB,CAAC"}

package/dist/components/pagination/pagination.js

@@ -0,0 +1,341 @@
+import SvgChevronLeft from "../../vendor/@material-design-icons/svg/outlined/chevron_left.js";
+import SvgChevronRight from "../../vendor/@material-design-icons/svg/outlined/chevron_right.js";
+import SvgFirstPage from "../../vendor/@material-design-icons/svg/outlined/first_page.js";
+import SvgLastPage from "../../vendor/@material-design-icons/svg/outlined/last_page.js";
+import { Button } from "../button/button.js";
+import { useLocale } from "../locale-provider/locale-provider.js";
+import { Select } from "../select-field/select.js";
+import { PaginationContext, usePagination } from "./pagination-context.js";
+import pagination_module_default from "./pagination.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/pagination/pagination.tsx
+var PaginationRoot = (t0) => {
+	const $ = c(24);
+	let className;
+	let onPageIndexChange;
+	let onPageSizeChange;
+	let pageCount;
+	let pageIndex;
+	let pageSize;
+	let pageSizes;
+	let props;
+	if ($[0] !== t0) {
+		({pageIndex, pageCount, pageSize, pageSizes, onPageIndexChange, onPageSizeChange, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = onPageIndexChange;
+		$[3] = onPageSizeChange;
+		$[4] = pageCount;
+		$[5] = pageIndex;
+		$[6] = pageSize;
+		$[7] = pageSizes;
+		$[8] = props;
+	} else {
+		className = $[1];
+		onPageIndexChange = $[2];
+		onPageSizeChange = $[3];
+		pageCount = $[4];
+		pageIndex = $[5];
+		pageSize = $[6];
+		pageSizes = $[7];
+		props = $[8];
+	}
+	let t1;
+	if ($[9] !== onPageIndexChange || $[10] !== onPageSizeChange || $[11] !== pageCount || $[12] !== pageIndex || $[13] !== pageSize || $[14] !== pageSizes) {
+		t1 = {
+			pageIndex,
+			pageCount,
+			pageSize,
+			pageSizes,
+			onPageIndexChange,
+			onPageSizeChange
+		};
+		$[9] = onPageIndexChange;
+		$[10] = onPageSizeChange;
+		$[11] = pageCount;
+		$[12] = pageIndex;
+		$[13] = pageSize;
+		$[14] = pageSizes;
+		$[15] = t1;
+	} else t1 = $[15];
+	let t2;
+	if ($[16] !== className) {
+		t2 = clsx(pagination_module_default.root, className);
+		$[16] = className;
+		$[17] = t2;
+	} else t2 = $[17];
+	let t3;
+	if ($[18] !== props || $[19] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			...props
+		});
+		$[18] = props;
+		$[19] = t2;
+		$[20] = t3;
+	} else t3 = $[20];
+	let t4;
+	if ($[21] !== t1 || $[22] !== t3) {
+		t4 = /* @__PURE__ */ jsx(PaginationContext, {
+			value: t1,
+			children: t3
+		});
+		$[21] = t1;
+		$[22] = t3;
+		$[23] = t4;
+	} else t4 = $[23];
+	return t4;
+};
+var PaginationPageSize = (t0) => {
+	const $ = c(18);
+	const { label } = t0;
+	const { pageSize, pageSizes, onPageSizeChange } = usePagination();
+	const format = new Intl.NumberFormat(useLocale());
+	let t1;
+	if ($[0] !== pageSize || $[1] !== pageSizes) {
+		t1 = pageSizes.includes(pageSize) ? pageSizes : [...pageSizes, pageSize].toSorted(_temp);
+		$[0] = pageSize;
+		$[1] = pageSizes;
+		$[2] = t1;
+	} else t1 = $[2];
+	const sizes = t1;
+	const t2 = Select;
+	const t3 = sizes.map((size) => ({
+		value: String(size),
+		label: format.format(size)
+	}));
+	const t4 = String(pageSize);
+	let t5;
+	if ($[3] !== onPageSizeChange || $[4] !== sizes) {
+		t5 = (value) => {
+			const size_0 = sizes.find((candidate) => String(candidate) === value);
+			if (size_0 !== void 0) onPageSizeChange(size_0);
+		};
+		$[3] = onPageSizeChange;
+		$[4] = sizes;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== label) {
+		t6 = /* @__PURE__ */ jsx(Select.Label, { children: label });
+		$[6] = label;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Select.Trigger, {});
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== t6) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: pagination_module_default.pageSize,
+			children: [t6, t7]
+		});
+		$[9] = t6;
+		$[10] = t8;
+	} else t8 = $[10];
+	let t9;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(Select.Items, {}) }) }) }) });
+		$[11] = t9;
+	} else t9 = $[11];
+	let t10;
+	if ($[12] !== t2.Root || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t8) {
+		t10 = /* @__PURE__ */ jsxs(t2.Root, {
+			options: t3,
+			value: t4,
+			onValueChange: t5,
+			children: [t8, t9]
+		});
+		$[12] = t2.Root;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t8;
+		$[17] = t10;
+	} else t10 = $[17];
+	return t10;
+};
+var PaginationIndex = (t0) => {
+	const $ = c(7);
+	const { label } = t0;
+	const { pageIndex, pageCount, pageSize } = usePagination();
+	let t1;
+	if ($[0] !== label || $[1] !== pageCount || $[2] !== pageIndex || $[3] !== pageSize) {
+		t1 = label({
+			pageIndex,
+			pageCount,
+			pageSize
+		});
+		$[0] = label;
+		$[1] = pageCount;
+		$[2] = pageIndex;
+		$[3] = pageSize;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: pagination_module_default.index,
+			children: t1
+		});
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+var PageButton = (t0) => {
+	const $ = c(10);
+	const { icon, label, target, unavailable, onPageIndexChange } = t0;
+	const t1 = unavailable || void 0;
+	const t2 = unavailable || void 0;
+	let t3;
+	if ($[0] !== onPageIndexChange || $[1] !== target || $[2] !== unavailable) {
+		t3 = () => {
+			if (!unavailable) onPageIndexChange(target);
+		};
+		$[0] = onPageIndexChange;
+		$[1] = target;
+		$[2] = unavailable;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== icon || $[5] !== label || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Button, {
+			iconOnly: true,
+			variant: "tertiary",
+			icon,
+			label,
+			"aria-disabled": t1,
+			"data-disabled": t2,
+			onClick: t3
+		});
+		$[4] = icon;
+		$[5] = label;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+};
+var PaginationControls = (t0) => {
+	const $ = c(24);
+	const { firstLabel, previousLabel, nextLabel, lastLabel } = t0;
+	const { pageIndex, pageCount, onPageIndexChange } = usePagination();
+	const lastIndex = Math.max(pageCount - 1, 0);
+	const atStart = pageIndex <= 0;
+	const atEnd = pageIndex >= lastIndex;
+	let t1;
+	if ($[0] !== atStart || $[1] !== firstLabel || $[2] !== onPageIndexChange) {
+		t1 = /* @__PURE__ */ jsx(PageButton, {
+			icon: SvgFirstPage,
+			label: firstLabel,
+			target: 0,
+			unavailable: atStart,
+			onPageIndexChange
+		});
+		$[0] = atStart;
+		$[1] = firstLabel;
+		$[2] = onPageIndexChange;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = pageIndex - 1;
+	let t3;
+	if ($[4] !== atStart || $[5] !== onPageIndexChange || $[6] !== previousLabel || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(PageButton, {
+			icon: SvgChevronLeft,
+			label: previousLabel,
+			target: t2,
+			unavailable: atStart,
+			onPageIndexChange
+		});
+		$[4] = atStart;
+		$[5] = onPageIndexChange;
+		$[6] = previousLabel;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	const t4 = pageIndex + 1;
+	let t5;
+	if ($[9] !== atEnd || $[10] !== nextLabel || $[11] !== onPageIndexChange || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(PageButton, {
+			icon: SvgChevronRight,
+			label: nextLabel,
+			target: t4,
+			unavailable: atEnd,
+			onPageIndexChange
+		});
+		$[9] = atEnd;
+		$[10] = nextLabel;
+		$[11] = onPageIndexChange;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== atEnd || $[15] !== lastIndex || $[16] !== lastLabel || $[17] !== onPageIndexChange) {
+		t6 = /* @__PURE__ */ jsx(PageButton, {
+			icon: SvgLastPage,
+			label: lastLabel,
+			target: lastIndex,
+			unavailable: atEnd,
+			onPageIndexChange
+		});
+		$[14] = atEnd;
+		$[15] = lastIndex;
+		$[16] = lastLabel;
+		$[17] = onPageIndexChange;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== t1 || $[20] !== t3 || $[21] !== t5 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: pagination_module_default.controls,
+			children: [
+				t1,
+				t3,
+				t5,
+				t6
+			]
+		});
+		$[19] = t1;
+		$[20] = t3;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+};
+/**
+* The pager for a paged list, over any source: `Root` holds where the list
+* stands, `PageSize` picks rows per page, `Index` says which page is on screen
+* and `Controls` go to the first, previous, next and last page. Leave out the
+* parts a list has no room for.
+*
+* @example
+* <Pagination.Root
+* 	pageIndex={pageIndex}
+* 	pageCount={pageCount}
+* 	pageSize={pageSize}
+* 	pageSizes={[10, 20, 50]}
+* 	onPageIndexChange={setPageIndex}
+* 	onPageSizeChange={setPageSize}>
+* 	<Pagination.PageSize label="Rows per page" />
+* 	<Pagination.Index label={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`} />
+* 	<Pagination.Controls firstLabel="First page" previousLabel="Previous page" nextLabel="Next page" lastLabel="Last page" />
+* </Pagination.Root>
+*/
+var Pagination = {
+	Root: PaginationRoot,
+	PageSize: PaginationPageSize,
+	Index: PaginationIndex,
+	Controls: PaginationControls
+};
+function _temp(a, b) {
+	return a - b;
+}
+export { Pagination };

package/dist/components/pagination/pagination.module.js

@@ -0,0 +1,12 @@
+import './pagination.css';// src/components/pagination/pagination.module.scss
+var root = "_root_ovje6_3";
+var pageSize = "_pageSize_ovje6_9";
+var index = "_index_ovje6_14";
+var controls = "_controls_ovje6_19";
+var pagination_module_default = {
+	root,
+	pageSize,
+	index,
+	controls
+};
+export { controls, pagination_module_default as default, index, pageSize, root };

package/dist/components/password-field/index.d.ts

@@ -0,0 +1,5 @@
+export type { ZxcvbnLanguageLoader, ZxcvbnLanguagePack, ZxcvbnLanguages, } from "../../lib/password-strength/password-strength.ts";
+export * from "./password-field.tsx";
+export * from "./password-strength.tsx";
+export * from "./tsf-password-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/password-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/password-field/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,GACf,MAAM,kDAAkD,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC"}

package/dist/components/password-field/index.js

@@ -0,0 +1,4 @@
+import { PasswordField } from "./password-field.js";
+import { PasswordStrength } from "./password-strength.js";
+import { TSFPasswordField } from "./tsf-password-field.js";
+export { PasswordField, PasswordStrength, TSFPasswordField };

package/dist/components/password-field/password-field.css

@@ -0,0 +1,66 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._strength_1dakz_3 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-2);
+  }
+  ._meter_1dakz_8 {
+    --meter-fill: var(
+    	--password-strength-weak-fill,
+    	var(--sys-color-error-fg)
+    );
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: var(--sys-unit-2) var(--sys-unit-4);
+    align-items: center;
+  }
+  ._meter_1dakz_8[data-score="2"] {
+    --meter-fill: var(
+    	--password-strength-fair-fill,
+    	var(--sys-color-warning-fg)
+    );
+  }
+  ._meter_1dakz_8[data-score="3"], ._meter_1dakz_8[data-score="4"] {
+    --meter-fill: var(
+    	--password-strength-strong-fill,
+    	var(--sys-color-success-fg)
+    );
+  }
+  ._meterLabel_1dakz_30 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-label-medium);
+    cursor: default;
+  }
+  ._meterValue_1dakz_35 {
+    color: var(--meter-fill);
+    font: var(--password-strength-value-font, var(--sys-font-label-small));
+    text-align: end;
+  }
+  ._meterTrack_1dakz_40 {
+    grid-column: 1/3;
+    overflow: hidden;
+    border-radius: var(--sys-radius-xs);
+    block-size: var(--password-strength-track-size, var(--sys-unit-2));
+    background: var(--password-strength-track-bg, var(--sys-color-surface-highest));
+  }
+  ._meterIndicator_1dakz_47 {
+    border-radius: var(--sys-radius-xs);
+    background: var(--meter-fill);
+  }
+  @media not (prefers-reduced-motion) {
+    ._meterIndicator_1dakz_47 {
+      transition: inline-size var(--sys-motion-short) var(--sys-motion-standard), background var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._feedback_1dakz_56 {
+    color: var(--password-strength-feedback-fg, var(--sys-color-text-muted));
+    font: var(--password-strength-feedback-font, var(--sys-font-body-small));
+  }
+  ._suggestions_1dakz_60 {
+    padding-inline-start: var(--sys-unit-12);
+    color: var(--password-strength-feedback-fg, var(--sys-color-text-muted));
+    font: var(--password-strength-feedback-font, var(--sys-font-body-small));
+    list-style: disc;
+  }
+}

package/dist/components/password-field/password-field.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+import type { ZxcvbnLanguages } from "../../lib/password-strength/password-strength.ts";
+import { type TextFieldBaseProps } from "../text-field/index.ts";
+import { type PasswordScoreLabels } from "./password-strength.tsx";
+/** The strength meter: off, or on with the copy it shows. */
+export type PasswordFieldStrengthProps = Readonly<{
+    strength?: false;
+    strengthLabel?: undefined;
+    scoreLabels?: undefined;
+    languages?: undefined;
+}> | Readonly<{
+    /** Shows the strength meter and zxcvbn's own feedback. */
+    strength: true;
+    /** The meter's label, such as "Password strength". */
+    strengthLabel: string;
+    /** The name of each band, such as "Very weak" for 0. */
+    scoreLabels: PasswordScoreLabels;
+    /** zxcvbn language packs beside the kit's English and Dutch ones. */
+    languages?: ZxcvbnLanguages;
+}>;
+/** Every `PasswordField` prop but the optional strength meter. */
+export type PasswordFieldBaseProps = Omit<TextFieldBaseProps, "type" | "icon" | "prefix" | "suffix" | "inputMode" | "maxLength" | "labelHidden"> & Readonly<{
+    /** The reveal button's accessible name while the password is hidden, such as "Show password". */
+    showPasswordLabel: string;
+    /** The reveal button's accessible name while the password shows, such as "Hide password". */
+    hidePasswordLabel: string;
+}>;
+export type PasswordFieldProps = PasswordFieldBaseProps & PasswordFieldStrengthProps;
+/**
+ * A password field with a reveal toggle, and optionally a strength meter fed by
+ * zxcvbn that suspends while the locale's dictionaries load.
+ *
+ * @example
+ * <PasswordField
+ * 	label="Password"
+ * 	optionalLabel="optional"
+ * 	showPasswordLabel="Show password"
+ * 	hidePasswordLabel="Hide password"
+ * 	value={password}
+ * 	onValueChange={setPassword}
+ * 	autoComplete="current-password"
+ * />
+ */
+export declare const PasswordField: ({ label, description, errors, requiredness, optionalLabel, showPasswordLabel, hidePasswordLabel, strength, strengthLabel, scoreLabels, languages, value, onValueChange, disabled, readOnly, dirty, touched, pending, state, className, ...inputProps }: PasswordFieldProps) => ReactNode;
+//# sourceMappingURL=password-field.d.ts.map

package/dist/components/password-field/password-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.d.ts","sourceRoot":"","sources":["../../../src/components/password-field/password-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAExF,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAEN,KAAK,mBAAmB,EACxB,MAAM,yBAAyB,CAAC;AAEjC,6DAA6D;AAC7D,MAAM,MAAM,0BAA0B,GACnC,QAAQ,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC,GACF,QAAQ,CAAC;IACT,0DAA0D;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,sDAAsD;IACtD,aAAa,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,WAAW,EAAE,mBAAmB,CAAC;IACjC,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC3B,CAAC,CAAC;AAEN,kEAAkE;AAClE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,kBAAkB,EAChB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,WAAW,GACX,aAAa,CACf,GACA,QAAQ,CAAC;IACR,iGAAiG;IACjG,iBAAiB,EAAE,MAAM,CAAC;IAC1B,6FAA6F;IAC7F,iBAAiB,EAAE,MAAM,CAAC;CAC1B,CAAC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACtD,0BAA0B,CAAC;AAE5B;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,2PAsBvB,kBAAkB,KAAG,SAsDvB,CAAC"}