@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/components/forms/NumberInput/NumberInput.mjs

@@ -0,0 +1,309 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
+import { useLocale as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { assignRef as r } from "../../../utils/refs.mjs";
+import { cx as i } from "../../../utils/cx.mjs";
+import { ChevronDownIcon as ee, ChevronUpIcon as te, MinusIcon as ne, PlusIcon as re } from "../../primitives/Icon/icons.mjs";
+import { useFieldControl as ie } from "../Field/FieldContext.mjs";
+import { Input as ae } from "../Input/Input.mjs";
+import a from "./NumberInput.module.css.mjs";
+import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as oe } from "react";
+import { Fragment as se, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/forms/NumberInput/NumberInput.tsx
+var ce = {
+	sides: a.sides,
+	stacked: a.stacked,
+	none: void 0
+}, le = 400, ue = 60;
+function f(e) {
+	if (!Number.isFinite(e)) return 0;
+	let t = String(e), n = t.match(/e-(\d+)$/);
+	if (n) return Number(n[1]);
+	let r = t.indexOf(".");
+	return r === -1 ? 0 : t.length - r - 1;
+}
+function p(e, t) {
+	return Number(e.toFixed(Math.min(Math.max(t, 0), 20)));
+}
+function m(e, t, n) {
+	let r = e;
+	return t != null && r < t && (r = t), n != null && r > n && (r = n), r;
+}
+function de(e) {
+	try {
+		let t = new Intl.NumberFormat(e).formatToParts(11111.1);
+		return {
+			group: t.find((e) => e.type === "group")?.value ?? ",",
+			decimal: t.find((e) => e.type === "decimal")?.value ?? "."
+		};
+	} catch {
+		return {
+			group: ",",
+			decimal: "."
+		};
+	}
+}
+var fe = /[−‒–﹣－]/g, h = /[\s  ]/g;
+function g(e, t) {
+	let { group: n, decimal: r } = de(t), i = e.replace(h, "").replace(fe, "-");
+	return i === "" ? null : (r === "." ? n !== "" && (i = i.split(n.replace(h, "") || "\0").join("")) : !i.includes(r) && /^-?\d*\.(\d{1,2}|\d{4,})$/.test(i.replace(/[^\d.-]/g, "")) ? i = i.replace(/[^\d.-]/g, "") : (i = i.split(n.replace(h, "")).join(""), n === "." && (i = i.split(".").join("")), i = i.split(r).join(".")), i = i.replace(/['’]/g, "").replace(/[^\d.-]/g, ""), !/^-?\d*\.?\d*$/.test(i) || !/\d/.test(i) ? NaN : Number(i));
+}
+var _ = ({ value: _, defaultValue: pe = null, onValueChange: me, min: v, max: y, step: b = 1, largeStep: he, precision: x, clampOnBlur: ge = !0, allowDecimal: _e, allowNegative: ve, formatOptions: S, locale: ye, stepper: C = "sides", decrementLabel: be, incrementLabel: xe, wheel: w = !1, ref: T, id: Se, size: Ce, invalid: we, disabled: Te, readOnly: Ee, required: De, name: E, endAddon: D, className: Oe, inputClassName: ke, inputMode: Ae, onChange: je, onFocus: Me, onBlur: Ne, onKeyDown: Pe, "aria-describedby": Fe, ...O }) => {
+	let { messages: k, locale: Ie } = n(), A = ye ?? Ie, Le = be ?? k.numberInput.decrement, Re = xe ?? k.numberInput.increment, j = ie({
+		id: Se,
+		invalid: we,
+		required: De,
+		disabled: Te,
+		readOnly: Ee,
+		size: Ce
+	}), M = j.disabled || j.readOnly, [N, P] = e({
+		value: _,
+		defaultValue: pe,
+		onChange: me
+	});
+	t(() => j.id ? document.getElementById(j.id) : null, () => {
+		P(pe ?? null), U("");
+	}, _ === void 0);
+	let F = _e ?? x !== 0, I = ve ?? !(v != null && v >= 0), L = he ?? b * 10, R = c(() => de(A), [A]), z = c(() => {
+		let e = {};
+		x != null && (e.minimumFractionDigits = x, e.maximumFractionDigits = x);
+		try {
+			return new Intl.NumberFormat(A, {
+				...e,
+				...S
+			});
+		} catch {
+			return new Intl.NumberFormat(void 0, e);
+		}
+	}, [
+		A,
+		S,
+		x
+	]), ze = c(() => {
+		try {
+			return new Intl.NumberFormat(A, {
+				useGrouping: !1,
+				maximumFractionDigits: x ?? 20
+			});
+		} catch {
+			return new Intl.NumberFormat(void 0, {
+				useGrouping: !1,
+				maximumFractionDigits: 20
+			});
+		}
+	}, [A, x]), Be = o((e) => e == null ? "" : z.format(e), [z]), B = o((e) => e == null ? "" : ze.format(e), [ze]), [V, Ve] = oe(!1), [H, U] = oe(""), He = l(null), Ue = o((e) => {
+		He.current = e, r(T, e);
+	}, [T]), We = o((e, t) => {
+		let n = e;
+		return x == null ? F || (n = Math.round(n)) : n = p(n, x), t && (n = m(n, v, y)), n;
+	}, [
+		x,
+		F,
+		v,
+		y
+	]), W = l(N);
+	W.current = N, s(() => {
+		V && U((e) => {
+			let t = g(e, A);
+			return t === N || t !== null && Number.isNaN(t) ? e : B(N);
+		});
+	}, [N]);
+	let G = o((e) => {
+		P(e), V && U(B(e));
+	}, [
+		P,
+		V,
+		B
+	]), K = o((e) => {
+		if (M) return;
+		let t = W.current;
+		if (t == null || Number.isNaN(t)) {
+			let e = V ? g(H, A) : null;
+			t = e != null && !Number.isNaN(e) ? e : 0;
+		}
+		let n = x ?? Math.max(f(b), f(e), f(t)), r = m(p(t + e, F ? n : 0), v, y);
+		W.current = r, G(r);
+	}, [
+		M,
+		V,
+		H,
+		A,
+		x,
+		b,
+		F,
+		v,
+		y,
+		G
+	]), q = l(K);
+	q.current = K;
+	let J = N != null && v != null && N <= v, Y = N != null && y != null && N >= y, X = l({}), Z = l(!1), Q = o(() => {
+		window.clearTimeout(X.current.timeout), window.clearInterval(X.current.interval), X.current = {};
+	}, []);
+	s(() => Q, [Q]), s(() => {
+		M && Q();
+	}, [M, Q]), s(() => {
+		(J || Y) && Q();
+	}, [
+		J,
+		Y,
+		Q
+	]);
+	let $ = (e) => (t) => {
+		if (t.button !== 0 || M) return;
+		t.preventDefault(), Z.current = !0, Q(), q.current(e * b);
+		let n = () => {
+			Q(), window.removeEventListener("pointerup", n), window.removeEventListener("pointercancel", n), window.setTimeout(() => {
+				Z.current = !1;
+			}, 0);
+		};
+		window.addEventListener("pointerup", n), window.addEventListener("pointercancel", n), X.current.timeout = window.setTimeout(() => {
+			X.current.interval = window.setInterval(() => {
+				q.current(e * b);
+			}, ue);
+		}, le);
+	}, Ge = (e) => (t) => {
+		if (Z.current) {
+			Z.current = !1;
+			return;
+		}
+		t.preventDefault(), q.current(e * b);
+	};
+	s(() => {
+		let e = He.current;
+		if (!w || !V || !e) return;
+		let t = (e) => {
+			e.deltaY !== 0 && (e.preventDefault(), q.current(e.deltaY < 0 ? b : -b));
+		};
+		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+	}, [
+		w,
+		V,
+		b
+	]);
+	let Ke = (e) => {
+		let t = e.replace(h, "").replace(/\d/g, "");
+		return t = t.split(R.group).join(""), F && (t = t.split(R.decimal).join("").replace(/[.,]/g, "")), I && (t = t.replace(/-/g, "").replace(fe, "")), t = t.replace(/['’]/g, ""), t === "";
+	}, qe = (e) => {
+		let t = e.target.value, n = e.nativeEvent.inputType;
+		if (n === "insertFromPaste" || n === "insertFromDrop") {
+			let e = g(t, A);
+			e != null && !Number.isNaN(e) && (t = B(e));
+		}
+		if (!Ke(t)) return;
+		U(t), je?.(e);
+		let r = g(t, A);
+		if (r === null) P(null);
+		else if (!Number.isNaN(r)) {
+			let e = !I && r < 0 ? Math.abs(r) : r;
+			W.current = e, P(e);
+		}
+	}, Je = () => {
+		let e = g(H, A);
+		if (e === null) return P(null), null;
+		let t = Number.isNaN(e) ? W.current : e;
+		if (t == null) return P(null), null;
+		let n = ge ? We(t, !0) : We(t, !1);
+		return W.current = n, P(n), n;
+	}, Ye = (e) => {
+		Ve(!0), U(B(N)), Me?.(e);
+	}, Xe = (e) => {
+		Je(), Ve(!1), Q(), Ne?.(e);
+	}, Ze = (e) => {
+		if (Pe?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing)) {
+			if (e.key === "Enter") {
+				let e = Je();
+				U(B(e));
+				return;
+			}
+			if (!M) switch (e.key) {
+				case "ArrowUp":
+					e.preventDefault(), K(b);
+					break;
+				case "ArrowDown":
+					e.preventDefault(), K(-b);
+					break;
+				case "PageUp":
+					e.preventDefault(), K(L);
+					break;
+				case "PageDown":
+					e.preventDefault(), K(-L);
+					break;
+				case "Home":
+					v != null && (e.preventDefault(), G(v));
+					break;
+				case "End": y != null && (e.preventDefault(), G(y));
+			}
+		}
+	}, Qe = V ? H : Be(N), $e = (j.size ?? "md") === "lg" ? "md" : "sm", et = {
+		type: "button",
+		tabIndex: -1,
+		"aria-controls": j.id
+	}, tt = /* @__PURE__ */ u("button", {
+		...et,
+		className: i(a.button, C === "stacked" ? a.stackButton : a.sideButton),
+		"aria-label": Le,
+		disabled: M || J,
+		onPointerDown: $(-1),
+		onClick: Ge(-1),
+		children: C === "stacked" ? /* @__PURE__ */ u(ee, {
+			size: "xs",
+			strokeWidth: 2.5
+		}) : /* @__PURE__ */ u(ne, {
+			size: $e,
+			strokeWidth: 2.5
+		})
+	}), nt = /* @__PURE__ */ u("button", {
+		...et,
+		className: i(a.button, C === "stacked" ? a.stackButton : a.sideButton),
+		"aria-label": Re,
+		disabled: M || Y,
+		onPointerDown: $(1),
+		onClick: Ge(1),
+		children: C === "stacked" ? /* @__PURE__ */ u(te, {
+			size: "xs",
+			strokeWidth: 2.5
+		}) : /* @__PURE__ */ u(re, {
+			size: $e,
+			strokeWidth: 2.5
+		})
+	}), rt = C === "sides" ? nt : C === "stacked" ? /* @__PURE__ */ d("span", {
+		className: i(a.stack, D == null && a.stackFlush),
+		children: [nt, tt]
+	}) : void 0;
+	return /* @__PURE__ */ d(se, { children: [/* @__PURE__ */ u(ae, {
+		...O,
+		ref: Ue,
+		id: j.id,
+		size: j.size,
+		invalid: j.invalid,
+		disabled: j.disabled,
+		readOnly: j.readOnly,
+		required: j.required,
+		"aria-describedby": Fe,
+		type: "text",
+		role: "spinbutton",
+		inputMode: Ae ?? (F ? "decimal" : "numeric"),
+		autoComplete: O.autoComplete ?? "off",
+		"aria-valuenow": N ?? void 0,
+		"aria-valuemin": v,
+		"aria-valuemax": y,
+		"aria-valuetext": N == null ? void 0 : Be(N),
+		value: Qe,
+		onChange: qe,
+		onFocus: Ye,
+		onBlur: Xe,
+		onKeyDown: Ze,
+		startElement: C === "sides" ? tt : void 0,
+		endElement: rt,
+		endAddon: D,
+		className: i(ce[C], Oe),
+		inputClassName: i(a.input, ke)
+	}), E != null && /* @__PURE__ */ u("input", {
+		type: "hidden",
+		name: E,
+		value: N ?? "",
+		disabled: j.disabled
+	})] });
+};
+//#endregion
+export { _ as NumberInput, g as parseNumber };

package/dist/components/forms/NumberInput/NumberInput.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_input_vj77g_15`,t=`_sides_vj77g_29`,n=`_button_vj77g_39`,r=`_sideButton_vj77g_103`,i=`_stack_vj77g_171`,a=`_stackFlush_vj77g_195`,o=`_stackButton_vj77g_207`,s=`_stacked_vj77g_265`,c={input:e,sides:t,button:n,sideButton:r,stack:i,stackFlush:a,stackButton:o,stacked:s};exports.button=n,exports.default=c,exports.input=e,exports.sideButton=r,exports.sides=t,exports.stack=i,exports.stackButton=o,exports.stackFlush=a,exports.stacked=s;

package/dist/components/forms/NumberInput/NumberInput.module.css.mjs

@@ -0,0 +1,13 @@
+//#region src/components/forms/NumberInput/NumberInput.module.css
+var e = "_input_vj77g_15", t = "_sides_vj77g_29", n = "_button_vj77g_39", r = "_sideButton_vj77g_103", i = "_stack_vj77g_171", a = "_stackFlush_vj77g_195", o = "_stackButton_vj77g_207", s = "_stacked_vj77g_265", c = {
+	input: e,
+	sides: t,
+	button: n,
+	sideButton: r,
+	stack: i,
+	stackFlush: a,
+	stackButton: o,
+	stacked: s
+};
+//#endregion
+export { n as button, c as default, e as input, r as sideButton, t as sides, i as stack, o as stackButton, a as stackFlush, s as stacked };

package/dist/components/forms/NumberInput/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberInput';

package/dist/components/forms/PasswordInput/PasswordInput.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../i18n/en.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../utils/cx.cjs.js"),a=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),ee=require("../../primitives/Button/Button.cjs.js"),o=require("../../primitives/Icon/icons.cjs.js"),te=require("../Field/FieldContext.cjs.js"),ne=require("../Input/Input.cjs.js"),s=require("./PasswordInput.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u=e.en.passwordInput.strength,re=[`password`,`passw0rd`,`123456`,`qwerty`,`letmein`,`welcome`,`abc123`,`iloveyou`,`admin`];function d(e){let t=[...e].length;if(t===0)return{score:0};let n=Number(/[a-z]/.test(e))+Number(/[A-Z]/.test(e))+Number(/\d/.test(e))+Number(/[^A-Za-z0-9]/.test(e)),r=0;t>=8&&(r=1),t>=10&&n>=2&&(r=2),(t>=12&&n>=3||t>=16&&n>=2)&&(r=3),(t>=14&&n>=3||t>=20)&&(r=4),/^(.)\1*$/.test(e)&&(r=0);let i=e.toLowerCase();return re.some(e=>i.includes(e))&&(r=Math.min(r,1)),{score:r}}var ie={0:s.default.tone0,1:s.default.tone1,2:s.default.tone2,3:s.default.tone3,4:s.default.tone4},ae={sm:s.default.sm,md:s.default.md,lg:s.default.lg};function f(e){return Number.isFinite(e)?Math.min(4,Math.max(0,Math.round(e))):0}var oe=e=>({strengthLabel:t,met:n,total:r})=>[t?e.announceStrength(t):``,r>0?n===r?e.allMet:e.someMet(n,r):``].filter(Boolean).join(` `),p=({visible:e,defaultVisible:u=!1,onVisibleChange:re,visibilityToggle:p=!0,showLabel:se,hideLabel:m,capsLockWarning:h=!0,capsLockText:ce,strength:g,strengthLabels:le,strengthPrefix:ue,requirements:_,requirementsLabel:de,metText:fe,notMetText:pe,formatAnnouncement:me,announceDelay:he=900,fieldClassName:ge,className:_e,style:ve,id:ye,ref:v,size:y,value:b,defaultValue:x,disabled:S,endElement:C,autoComplete:be=`current-password`,spellCheck:xe=!1,autoCapitalize:Se=`off`,autoCorrect:Ce=`off`,fullWidth:w=!0,onChange:we,onKeyDown:Te,onKeyUp:Ee,onMouseDown:De,onBlur:Oe,"aria-describedby":ke,...Ae})=>{let T=n.useMessages(),je=se??T.passwordInput.show,Me=ce??T.passwordInput.capsLock,Ne=le??T.passwordInput.strength,Pe=ue??T.passwordInput.strengthPrefix,Fe=de??T.passwordInput.requirements,Ie=fe??T.passwordInput.met,Le=pe??T.passwordInput.notMet,Re=me??oe(T.passwordInput),E=te.useFieldContext(),D=(0,c.useId)(),O=ye??(E&&!E.isGroup?E.controlId:void 0)??`${D}-input`,k=`${D}-caps`,A=`${D}-strength`,j=`${D}-requirements`,M=`${D}-requirements-label`,N=y??E?.size??`md`,P=S??E?.disabled??!1,[F,I]=t.useControllableState({value:e,defaultValue:u,onChange:re}),L=e!==void 0,R=(0,c.useRef)(null),ze=(0,c.useCallback)(e=>{R.current=e,r.assignRef(v,e)},[v]),z=(0,c.useRef)(null),Be=()=>{let e=R.current;e&&document.activeElement===e&&(z.current={start:e.selectionStart,end:e.selectionEnd,direction:e.selectionDirection}),I(e=>!e)};(0,c.useLayoutEffect)(()=>{let e=z.current;z.current=null;let t=R.current;if(e&&t&&document.activeElement===t&&e.start!=null&&e.end!=null)try{t.setSelectionRange(e.start,e.end,e.direction??void 0)}catch{}},[F]);let Ve=e=>{document.activeElement===R.current&&e.preventDefault()};(0,c.useEffect)(()=>{let e=R.current?.form;if(!e||!F)return;let t=()=>{let e=R.current;!L&&e&&(e.type=`password`),I(!1)};return e.addEventListener(`submit`,t),()=>e.removeEventListener(`submit`,t)},[F,L,I]);let B=b!==void 0,[He,V]=(0,c.useState)(()=>x==null?``:String(x)),H=B?String(b??``):He,U=g!==void 0||(_?.length??0)>0;(0,c.useEffect)(()=>{if(B||!U)return;let e=R.current?.form;if(!e)return;let t=()=>{requestAnimationFrame(()=>{R.current&&V(R.current.value)})};return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[B,U]);let Ue=e=>{!B&&U&&V(e.target.value),we?.(e)},[We,W]=(0,c.useState)(!1),G=h&&We&&!P,K=e=>{h&&typeof e.getModifierState==`function`&&W(e.getModifierState(`CapsLock`))},Ge=e=>{K(e),Te?.(e)},Ke=e=>{K(e),Ee?.(e)},qe=e=>{K(e),De?.(e)},Je=e=>{W(!1),Oe?.(e)},q=null;typeof g==`number`?q={score:f(g)}:typeof g==`function`?q=g(H):g===!0&&(q=d(H));let J=q!==null,Y=q?f(q.score):0,X=typeof g==`number`||H!==``,Z=q&&X?q.label??Ne[Y]:void 0,Ye=(_?.length??0)>0,Q=(_??[]).map(e=>({...e,met:e.test(H)})),Xe=Q.filter(e=>e.met).length,[Ze,Qe]=(0,c.useState)(``),$e=Re({strengthLabel:Z,met:Xe,total:Q.length}),et=(0,c.useRef)($e);et.current=$e;let tt=(0,c.useRef)(H);(0,c.useEffect)(()=>{if(!U||tt.current===H)return;if(tt.current=H,H===``){Qe(``);return}let e=window.setTimeout(()=>Qe(et.current),he);return()=>window.clearTimeout(e)},[H,he,U]);let nt=[ke,G?k:void 0,J&&Z?A:void 0,Ye?j:void 0].filter(Boolean).join(` `)||void 0,rt=F&&m?m:je,it=N===`lg`?`md`:`sm`,$=p?(0,l.jsx)(ee.IconButton,{size:N===`sm`?`xs`:`sm`,variant:`ghost`,tone:`neutral`,"aria-label":rt,"aria-pressed":m?void 0:F,"aria-controls":O,disabled:P,onMouseDown:Ve,onClick:Be,children:F?(0,l.jsx)(o.EyeOffIcon,{size:it}):(0,l.jsx)(o.EyeIcon,{size:it})}):null;return(0,l.jsxs)(`div`,{className:i.cx(s.default.root,ae[N],!w&&s.default.inline,P&&s.default.disabled,_e),style:ve,"aria-disabled":P||void 0,children:[(0,l.jsx)(ne.Input,{...Ae,ref:ze,id:O,type:F?`text`:`password`,size:y,value:b,defaultValue:x,disabled:S,autoComplete:be,spellCheck:xe,autoCapitalize:Se,autoCorrect:Ce,fullWidth:w,className:ge,"aria-describedby":nt,onChange:Ue,onKeyDown:Ge,onKeyUp:Ke,onMouseDown:qe,onBlur:Je,endElement:C!=null||$?(0,l.jsxs)(l.Fragment,{children:[C,$]}):void 0}),h&&(0,l.jsx)(`div`,{role:`status`,className:s.default.capsRegion,children:G&&(0,l.jsxs)(`p`,{id:k,className:s.default.capsLock,children:[(0,l.jsx)(o.WarningIcon,{size:`sm`,className:s.default.capsIcon}),(0,l.jsx)(`span`,{children:Me})]})}),J&&(0,l.jsxs)(`div`,{className:i.cx(s.default.strength,X&&ie[Y]),children:[(0,l.jsx)(`div`,{className:s.default.segments,"aria-hidden":`true`,children:[1,2,3,4].map(e=>(0,l.jsx)(`span`,{className:i.cx(s.default.segment,X&&e<=Y&&s.default.filled)},e))}),(0,l.jsx)(`p`,{id:A,className:s.default.strengthText,children:Z?(0,l.jsxs)(l.Fragment,{children:[Pe,` `,(0,l.jsx)(`span`,{className:s.default.strengthValue,children:Z})]}):null})]}),Ye&&(0,l.jsxs)(`div`,{className:s.default.requirements,children:[(0,l.jsx)(`p`,{id:M,className:s.default.requirementsLabel,children:Fe}),(0,l.jsx)(`ul`,{id:j,role:`list`,"aria-labelledby":M,className:s.default.requirementList,children:Q.map(e=>(0,l.jsxs)(`li`,{className:i.cx(s.default.requirement,e.met&&s.default.met),"data-met":e.met||void 0,children:[e.met?(0,l.jsx)(o.CheckIcon,{size:`sm`,tone:`success`,className:s.default.requirementIcon}):(0,l.jsx)(o.CloseIcon,{size:`sm`,tone:`muted`,className:s.default.requirementIcon}),(0,l.jsxs)(`span`,{children:[e.label,(0,l.jsx)(a.VisuallyHidden,{children:`: ${e.met?Ie:Le}`})]})]},e.id))})]}),U&&(0,l.jsx)(a.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:Ze})]})};exports.PasswordInput=p,exports.defaultStrengthLabels=u,exports.scorePassword=d;

package/dist/components/forms/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,117 @@
+import { ReactNode, Ref } from 'react';
+import { InputProps } from '../Input';
+/** Strength score: 0 (too weak) to 4 (strong). */
+export type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;
+/** What a strength scorer returns. */
+export interface PasswordStrengthResult {
+    /** 0 (too weak) to 4 (strong). Fills that many of the 4 segments. */
+    score: PasswordStrengthScore;
+    /** Text shown next to the meter. Defaults to the matching `strengthLabels` entry. */
+    label?: string;
+}
+/** Scores a password. Runs on every change, so keep it fast (or memoize it). */
+export type PasswordStrengthScorer = (password: string) => PasswordStrengthResult;
+/** One rule in the requirements checklist. */
+export interface PasswordRequirement {
+    /** Stable key for the rule. */
+    id: string;
+    /** Visible text, e.g. "At least 12 characters". */
+    label: ReactNode;
+    /** Returns true when the password meets the rule. */
+    test: (password: string) => boolean;
+}
+/** Labels for scores 0 to 4. */
+export type PasswordStrengthLabels = readonly [string, string, string, string, string];
+export interface PasswordInputProps extends Omit<InputProps, "type"> {
+    /** Shows the password as plain text (controlled). */
+    visible?: boolean;
+    /** Initial visibility when uncontrolled. @default false */
+    defaultVisible?: boolean;
+    /** Called with the new visibility when the toggle is pressed (or the form submits while visible). */
+    onVisibleChange?: (visible: boolean) => void;
+    /** Renders the show/hide toggle button. @default true */
+    visibilityToggle?: boolean;
+    /**
+     * Accessible name of the toggle. By default the name stays the same and
+     * `aria-pressed` carries the state ("Show password, toggle button,
+     * pressed"), as the WAI-ARIA button pattern recommends. @default "Show password"
+     */
+    showLabel?: string;
+    /**
+     * Optional name to use while the password is visible (e.g. "Hide password").
+     * When set, the name switches with the state and `aria-pressed` is omitted,
+     * since a changing name and a pressed state together would contradict
+     * each other ("Hide password, pressed").
+     */
+    hideLabel?: string;
+    /** Show a warning while Caps Lock is on and the field has focus. @default true */
+    capsLockWarning?: boolean;
+    /** Text of the Caps Lock warning. @default "Caps Lock is on" */
+    capsLockText?: ReactNode;
+    /**
+     * Strength meter. Pass a score (0 to 4) you compute yourself, a scorer
+     * function `(password) => ({ score, label? })`, or `true` to use the
+     * built-in `scorePassword` heuristic. Omit to hide the meter.
+     */
+    strength?: number | PasswordStrengthScorer | true;
+    /** Labels for scores 0 to 4. @default ["Too weak", "Weak", "Fair", "Good", "Strong"] */
+    strengthLabels?: PasswordStrengthLabels;
+    /** Text before the strength label. @default "Strength:" */
+    strengthPrefix?: string;
+    /** Rules shown as a live checklist under the field. */
+    requirements?: PasswordRequirement[];
+    /** Heading above the checklist. @default "Your password needs:" */
+    requirementsLabel?: ReactNode;
+    /** Screen-reader text for a met rule. @default "Met" */
+    metText?: string;
+    /** Screen-reader text for an unmet rule. @default "Not met" */
+    notMetText?: string;
+    /**
+     * Builds the polite summary announced after typing pauses, from the
+     * strength label (if any) and the met/total rule counts.
+     */
+    formatAnnouncement?: (info: {
+        strengthLabel?: string;
+        met: number;
+        total: number;
+    }) => string;
+    /** Pause after typing before strength/requirement changes are announced, in ms. @default 900 */
+    announceDelay?: number;
+    /** Class name for the Input's field wrapper. `className` goes to the outer root. */
+    fieldClassName?: string;
+    /** Ref to the `<input>` element. */
+    ref?: Ref<HTMLInputElement>;
+}
+/** English strength labels (the defaults without a `LocaleProvider`). */
+export declare const defaultStrengthLabels: PasswordStrengthLabels;
+/**
+ * A simple, fast strength heuristic based on length and character variety,
+ * with penalties for repeated characters and a few very common patterns.
+ *
+ * **It is a UX hint, not a security guarantee.** It knows nothing about
+ * breached-password lists, dictionary words, or personal information. Enforce
+ * your real password policy on the server (NIST SP 800-63B recommends length
+ * plus a blocklist check over composition rules).
+ */
+export declare function scorePassword(password: string): PasswordStrengthResult;
+/**
+ * A password field built on `Input`, with a show/hide toggle, a Caps Lock
+ * warning, an optional strength meter, and an optional requirements checklist.
+ *
+ * Accepts every `Input` prop except `type`. Defaults to
+ * `autoComplete="current-password"`; use `autoComplete="new-password"` on
+ * sign-up and change-password forms so password managers offer to generate
+ * and save a password.
+ *
+ * WCAG 2.2 SC 3.3.8 (Accessible Authentication): this component never blocks
+ * paste, drag-and-drop, or password-manager autofill, and it doesn't add
+ * cognitive tests. Don't add `onPaste={e => e.preventDefault()}` or a
+ * "retype without pasting" rule on top of it.
+ *
+ * ```tsx
+ * <Field label="Password">
+ *   <PasswordInput autoComplete="new-password" strength requirements={rules} />
+ * </Field>
+ * ```
+ */
+export declare const PasswordInput: ({ visible: visibleProp, defaultVisible, onVisibleChange, visibilityToggle, showLabel: showLabelProp, hideLabel, capsLockWarning, capsLockText: capsLockTextProp, strength, strengthLabels: strengthLabelsProp, strengthPrefix: strengthPrefixProp, requirements, requirementsLabel: requirementsLabelProp, metText: metTextProp, notMetText: notMetTextProp, formatAnnouncement: formatAnnouncementProp, announceDelay, fieldClassName, className, style, id, ref, size, value, defaultValue, disabled, endElement, autoComplete, spellCheck, autoCapitalize, autoCorrect, fullWidth, onChange, onKeyDown, onKeyUp, onMouseDown, onBlur, "aria-describedby": ariaDescribedBy, ...rest }: PasswordInputProps) => import("react").JSX.Element;