@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/PasswordInput/PasswordInput.mjs

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

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

@@ -0,0 +1 @@
+var e=`_root_16r29_17`,t=`_inline_16r29_35`,n=`_sm_16r29_47`,r=`_md_16r29_53`,i=`_lg_16r29_59`,a=`_capsRegion_16r29_73`,o=`_capsLock_16r29_83`,s=`_capsIn_16r29_1`,c=`_capsIcon_16r29_107`,l=`_strength_16r29_131`,u=`_segments_16r29_151`,d=`_segment_16r29_151`,f=`_filled_16r29_181`,p=`_tone0_16r29_191`,m=`_tone1_16r29_199`,h=`_tone2_16r29_207`,g=`_tone3_16r29_215`,_=`_tone4_16r29_223`,v=`_strengthText_16r29_233`,y=`_strengthValue_16r29_255`,b=`_requirements_16r29_269`,x=`_requirementsLabel_16r29_277`,S=`_requirementList_16r29_291`,C=`_requirement_16r29_269`,w=`_met_16r29_327`,T=`_requirementIcon_16r29_335`,E=`_checkPop_16r29_1`,D=`_disabled_16r29_365`,O={root:e,inline:t,sm:n,md:r,lg:i,capsRegion:a,capsLock:o,capsIn:s,capsIcon:c,strength:l,segments:u,segment:d,filled:f,tone0:p,tone1:m,tone2:h,tone3:g,tone4:_,strengthText:v,strengthValue:y,requirements:b,requirementsLabel:x,requirementList:S,requirement:C,met:w,requirementIcon:T,checkPop:E,disabled:D};exports.capsIcon=c,exports.capsIn=s,exports.capsLock=o,exports.capsRegion=a,exports.checkPop=E,exports.default=O,exports.disabled=D,exports.filled=f,exports.inline=t,exports.lg=i,exports.md=r,exports.met=w,exports.requirement=C,exports.requirementIcon=T,exports.requirementList=S,exports.requirements=b,exports.requirementsLabel=x,exports.root=e,exports.segment=d,exports.segments=u,exports.sm=n,exports.strength=l,exports.strengthText=v,exports.strengthValue=y,exports.tone0=p,exports.tone1=m,exports.tone2=h,exports.tone3=g,exports.tone4=_;

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

@@ -0,0 +1,33 @@
+//#region src/components/forms/PasswordInput/PasswordInput.module.css
+var e = "_root_16r29_17", t = "_inline_16r29_35", n = "_sm_16r29_47", r = "_md_16r29_53", i = "_lg_16r29_59", a = "_capsRegion_16r29_73", o = "_capsLock_16r29_83", s = "_capsIn_16r29_1", c = "_capsIcon_16r29_107", l = "_strength_16r29_131", u = "_segments_16r29_151", d = "_segment_16r29_151", f = "_filled_16r29_181", p = "_tone0_16r29_191", m = "_tone1_16r29_199", h = "_tone2_16r29_207", g = "_tone3_16r29_215", _ = "_tone4_16r29_223", v = "_strengthText_16r29_233", y = "_strengthValue_16r29_255", b = "_requirements_16r29_269", x = "_requirementsLabel_16r29_277", S = "_requirementList_16r29_291", C = "_requirement_16r29_269", w = "_met_16r29_327", T = "_requirementIcon_16r29_335", E = "_checkPop_16r29_1", D = "_disabled_16r29_365", O = {
+	root: e,
+	inline: t,
+	sm: n,
+	md: r,
+	lg: i,
+	capsRegion: a,
+	capsLock: o,
+	capsIn: s,
+	capsIcon: c,
+	strength: l,
+	segments: u,
+	segment: d,
+	filled: f,
+	tone0: p,
+	tone1: m,
+	tone2: h,
+	tone3: g,
+	tone4: _,
+	strengthText: v,
+	strengthValue: y,
+	requirements: b,
+	requirementsLabel: x,
+	requirementList: S,
+	requirement: C,
+	met: w,
+	requirementIcon: T,
+	checkPop: E,
+	disabled: D
+};
+//#endregion
+export { c as capsIcon, s as capsIn, o as capsLock, a as capsRegion, E as checkPop, O as default, D as disabled, f as filled, t as inline, i as lg, r as md, w as met, C as requirement, T as requirementIcon, S as requirementList, b as requirements, x as requirementsLabel, e as root, d as segment, u as segments, n as sm, l as strength, v as strengthText, y as strengthValue, p as tone0, m as tone1, h as tone2, g as tone3, _ as tone4 };

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

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

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../utils/refs.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../Field/FieldContext.cjs.js"),i=require("./PinInput.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s={outline:i.default.outline,filled:i.default.filled},c={sm:i.default.sm,md:i.default.md,lg:i.default.lg},l={none:i.default.radiusNone,xs:i.default.radiusXs,sm:i.default.radiusSm,md:i.default.radiusMd,lg:i.default.radiusLg,xl:i.default.radiusXl,"2xl":i.default.radius2xl,pill:i.default.radiusPill},u={numeric:/[^0-9]/g,alphanumeric:/[^A-Za-z0-9]/g};function d(e,t){return e.replace(u[t],``)}function ee(e,t){let n=new Set;if(typeof e==`number`&&e>0)for(let r=e;r<t;r+=e)n.add(r);else Array.isArray(e)&&e.forEach(e=>e>0&&e<t&&n.add(e));return n}var f=({length:u=6,value:f,defaultValue:p=``,onValueChange:m,onComplete:h,type:g=`numeric`,mask:_=!1,placeholder:v,size:y,variant:b=`outline`,radius:x,invalid:S,separator:C,separatorContent:w=`–`,className:T,inputClassName:te,style:ne,ref:E,id:re,disabled:ie,required:ae,readOnly:oe,autoComplete:se,"aria-describedby":ce,onChange:le,onFocus:ue,onBlur:D,onKeyDown:O,onPaste:k,onSelect:A,onClick:j,...M})=>{let N=r.useFieldControl({id:re,invalid:S,required:ae,disabled:ie,readOnly:oe,size:y,"aria-describedby":ce}),P=N.size??`md`,[F,I]=e.useControllableState({value:f,defaultValue:p,onChange:m}),L=d(F??``,g).slice(0,u),R=(0,a.useRef)(null),z=(0,a.useRef)([]),B=(0,a.useCallback)(e=>{R.current=e,t.assignRef(E,e)},[E]),[V,H]=(0,a.useState)(!1),[U,W]=(0,a.useState)({start:0,end:0}),G=(0,a.useRef)(null),[de,fe]=(0,a.useState)(0),K=e=>{G.current=e,W(e),fe(e=>e+1)};(0,a.useLayoutEffect)(()=>{let e=R.current,t=G.current;e&&t&&(G.current=null,document.activeElement===e&&e.setSelectionRange(t.start,t.end))},[de,L]);let q=e=>{let t=Math.min(L.length,u-1),n=Math.max(0,Math.min(e,t));K(n<L.length?{start:n,end:n+1}:{start:n,end:n})},J=e=>{e!==L&&(I(e),e.length===u&&h?.(e))},Y=(0,a.useRef)(p);Y.current=p;let X=f!==void 0;(0,a.useEffect)(()=>{if(X)return;let e=R.current?.form;if(!e)return;let t=()=>I(d(Y.current,g).slice(0,u));return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[X,I,g,u]);let pe=e=>{le?.(e);let t=e.target,n=t.value,r=t.selectionStart??n.length,i=d(n.slice(0,r),g),a=d(n.slice(r),g),o=i+a,s=i.length;if(o.length>u){let e=Math.max(0,n.length-L.length),t=d(n.slice(r-e,r),g);if(t.length>=u)o=t.slice(0,u),s=u;else{let e=o.length-u;o=(i+a.slice(e)).slice(0,u),s=Math.min(i.length,u)}}J(o),K({start:s,end:s})},me=e=>{if(k?.(e),e.defaultPrevented||N.readOnly||N.disabled)return;let t=d(e.clipboardData.getData(`text`),g),n=e.currentTarget;if(!t)return;e.preventDefault();let r;if(t.length>=u)r=t.slice(0,u);else{let e=n.selectionStart??L.length,i=n.selectionEnd??e;r=(L.slice(0,e)+t+L.slice(i)).slice(0,u)}J(r);let i=Math.min(r.length,u);K({start:i,end:i})},he=e=>{if(O?.(e),e.defaultPrevented||e.altKey||e.metaKey||e.ctrlKey)return;let t=e.currentTarget,n=Math.min(t.selectionStart??0,u-1);switch(e.key){case`ArrowLeft`:e.preventDefault(),q(n-1);break;case`ArrowRight`:e.preventDefault(),q(n+1);break;case`Home`:case`ArrowUp`:e.preventDefault(),q(0);break;case`End`:case`ArrowDown`:e.preventDefault(),q(L.length)}},ge=e=>{let t=e.selectionStart??0,n=e.selectionEnd??t;W(e=>e.start===t&&e.end===n?e:{start:t,end:n})},_e=e=>{A?.(e),ge(e.currentTarget)},ve=e=>{ue?.(e),H(!0),q(L.length)},Z=e=>{D?.(e),H(!1)},ye=e=>{if(j?.(e),e.defaultPrevented)return;let t=0,n=1/0;z.current.forEach((r,i)=>{if(!r)return;let a=r.getBoundingClientRect(),o=Math.abs(e.clientX-(a.left+a.width/2));o<n&&(n=o,t=i)}),q(t)},be=ee(C,u),Q=U.end-U.start>1,xe=V&&!Q?Math.min(U.start,u-1):-1,Se=V&&!N.readOnly&&!N.disabled&&U.start===U.end,$=[];for(let e=0;e<u;e++){be.has(e)&&$.push((0,o.jsx)(`span`,{className:i.default.separator,children:w},`sep-${e}`));let t=L[e],r=e===xe,a=V&&Q&&e>=U.start&&e<U.end,s=null;t?s=_?`•`:t:r&&Se?s=(0,o.jsx)(`span`,{className:i.default.caret}):v&&(s=(0,o.jsx)(`span`,{className:i.default.placeholder,children:v})),$.push((0,o.jsx)(`span`,{ref:t=>{z.current[e]=t},className:i.default.cell,"data-active":r||void 0,"data-selected":a||void 0,"data-filled":t?!0:void 0,children:(0,o.jsx)(`span`,{className:n.cx(i.default.char,t&&i.default.charFilled),children:s},t??`empty`)},e))}return(0,o.jsxs)(`div`,{className:n.cx(i.default.root,s[b],c[P],x?l[x]:i.default.radiusDefault,V&&i.default.focused,N.invalid&&i.default.invalid,N.disabled&&i.default.disabled,N.readOnly&&!N.disabled&&i.default.readOnly,T),style:ne,"data-size":P,"data-variant":b,children:[(0,o.jsx)(`div`,{className:i.default.cells,"aria-hidden":`true`,children:$}),(0,o.jsx)(`input`,{autoComplete:se??(_?`off`:`one-time-code`),autoCorrect:`off`,autoCapitalize:`off`,spellCheck:!1,enterKeyHint:`done`,...M,ref:B,id:N.id,type:_?`password`:`text`,inputMode:g===`numeric`?`numeric`:`text`,pattern:g===`numeric`?`[0-9]*`:`[A-Za-z0-9]*`,minLength:u,value:L,disabled:N.disabled,required:N.required,readOnly:N.readOnly,...N.ariaProps,className:n.cx(i.default.input,te),onChange:pe,onPaste:me,onKeyDown:he,onSelect:_e,onFocus:ve,onBlur:Z,onClick:ye})]})};exports.PinInput=f;

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

@@ -0,0 +1,92 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { Radius, Size } from '../../../types/common';
+/** Which characters a cell accepts. */
+export type PinInputType = "numeric" | "alphanumeric";
+/**
+ * Visual style of the cells, matching `Input`.
+ * - `outline`: surface background with a visible border (default).
+ * - `filled`: sunken background with a visible border.
+ */
+export type PinInputVariant = "outline" | "filled";
+export interface PinInputProps extends Omit<ComponentPropsWithRef<"input">, "size" | "type" | "value" | "defaultValue" | "children" | "placeholder"> {
+    /** Number of cells (characters in the code). @default 6 */
+    length?: number;
+    /** Controlled value (the whole code as one string). */
+    value?: string;
+    /** Initial value when uncontrolled. @default "" */
+    defaultValue?: string;
+    /** Called with the new code on every change (typing, deleting, pasting, autofill). */
+    onValueChange?: (value: string) => void;
+    /**
+     * Called with the code when the user fills the last empty cell. Use it to
+     * verify or auto-submit. Not called for programmatic `value` changes.
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Accepted characters. `numeric` sets `inputMode="numeric"` and
+     * `pattern="[0-9]*"` (numeric keypad on phones); `alphanumeric` accepts
+     * A-Z, a-z, and 0-9. Other characters (spaces, dashes, ...) are stripped.
+     * @default "numeric"
+     */
+    type?: PinInputType;
+    /**
+     * Shows a dot in filled cells instead of the character, for PINs. The input
+     * becomes `type="password"` so screen readers don't speak the digits.
+     * @default false
+     */
+    mask?: boolean;
+    /** Character shown in empty cells, such as `"○"` or `"·"`. Decorative. */
+    placeholder?: string;
+    /** Cell size and digit size. Inherits from a surrounding `Field`. @default "md" */
+    size?: Size;
+    /** Visual style, matching `Input`. @default "outline" */
+    variant?: PinInputVariant;
+    /** Cell corner rounding. When omitted, uses `--field-radius`. */
+    radius?: Radius;
+    /**
+     * Marks the code as invalid: sets `aria-invalid` and a danger border on
+     * every cell. Pair it with a visible error message (a `Field` does this).
+     * Inherits from a surrounding `Field`. @default false
+     */
+    invalid?: boolean;
+    /**
+     * Draws a separator between groups of cells. A number splits into groups of
+     * that size (`3` on a 6-cell code gives 3-3); an array lists the cell counts
+     * after which a separator appears (`[2, 4]` gives 2-2-2).
+     */
+    separator?: number | number[];
+    /** Content of each separator. Decorative (hidden from assistive technology). @default "–" */
+    separatorContent?: ReactNode;
+    /** Class name for the hidden `<input>` element. `className` goes to the wrapper. */
+    inputClassName?: string;
+    /** Ref to the `<input>` element that holds the code. */
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * A one-time-code or PIN entry shown as a row of cells.
+ *
+ * **Built on one real `<input>`.** The whole code lives in a single native
+ * input that spans the cells with transparent text; the cells only mirror its
+ * value and caret. That keeps everything the platform does for code fields:
+ * native paste, `autoComplete="one-time-code"` SMS and email suggestions on
+ * iOS and Android, password managers, form submission with `name`, and one
+ * control with one accessible name for assistive technology (instead of six
+ * "Digit N of 6" fields). The cells are `aria-hidden`.
+ *
+ * Typing fills the active cell and moves on; Backspace deletes; Arrow
+ * Left/Right, Home, and End move between cells; clicking a cell selects it
+ * so the next key replaces it. Pasting or autofilling a full code fills every
+ * cell (spaces and dashes are stripped). Paste and autofill are never blocked
+ * (SC 3.3.8), and there is no timeout (SC 2.2.1).
+ *
+ * Give it an accessible name: wrap it in a `Field` (recommended, which also
+ * wires hint, error, invalid, disabled, and read-only), or pass `aria-label`
+ * / `aria-labelledby`.
+ *
+ * ```tsx
+ * <Field label="Verification code" hint="We sent a 6-digit code to your email.">
+ *   <PinInput onComplete={verify} />
+ * </Field>
+ * ```
+ */
+export declare const PinInput: ({ length, value: valueProp, defaultValue, onValueChange, onComplete, type, mask, placeholder, size, variant, radius, invalid, separator, separatorContent, className, inputClassName, style, ref, id, disabled, required, readOnly, autoComplete, "aria-describedby": ariaDescribedBy, onChange, onFocus, onBlur, onKeyDown, onPaste, onSelect, onClick, ...rest }: PinInputProps) => import("react").JSX.Element;

package/dist/components/forms/PinInput/PinInput.mjs

@@ -0,0 +1,221 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { assignRef as t } from "../../../utils/refs.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { useFieldControl as r } from "../Field/FieldContext.mjs";
+import i from "./PinInput.module.css.mjs";
+import { useCallback as a, useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/forms/PinInput/PinInput.tsx
+var f = {
+	outline: i.outline,
+	filled: i.filled
+}, ee = {
+	sm: i.sm,
+	md: i.md,
+	lg: i.lg
+}, te = {
+	none: i.radiusNone,
+	xs: i.radiusXs,
+	sm: i.radiusSm,
+	md: i.radiusMd,
+	lg: i.radiusLg,
+	xl: i.radiusXl,
+	"2xl": i.radius2xl,
+	pill: i.radiusPill
+}, p = {
+	numeric: /[^0-9]/g,
+	alphanumeric: /[^A-Za-z0-9]/g
+};
+function m(e, t) {
+	return e.replace(p[t], "");
+}
+function h(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	if (typeof e == "number" && e > 0) for (let r = e; r < t; r += e) n.add(r);
+	else Array.isArray(e) && e.forEach((e) => e > 0 && e < t && n.add(e));
+	return n;
+}
+var g = ({ length: p = 6, value: g, defaultValue: _ = "", onValueChange: ne, onComplete: v, type: y = "numeric", mask: b = !1, placeholder: x, size: S, variant: C = "outline", radius: w, invalid: re, separator: ie, separatorContent: ae = "–", className: oe, inputClassName: se, style: ce, ref: T, id: le, disabled: ue, required: de, readOnly: fe, autoComplete: pe, "aria-describedby": me, onChange: E, onFocus: D, onBlur: O, onKeyDown: k, onPaste: A, onSelect: j, onClick: M, ...N }) => {
+	let P = r({
+		id: le,
+		invalid: re,
+		required: de,
+		disabled: ue,
+		readOnly: fe,
+		size: S,
+		"aria-describedby": me
+	}), F = P.size ?? "md", [I, L] = e({
+		value: g,
+		defaultValue: _,
+		onChange: ne
+	}), R = m(I ?? "", y).slice(0, p), z = c(null), B = c([]), he = a((e) => {
+		z.current = e, t(T, e);
+	}, [T]), [V, H] = l(!1), [U, W] = l({
+		start: 0,
+		end: 0
+	}), G = c(null), [ge, _e] = l(0), K = (e) => {
+		G.current = e, W(e), _e((e) => e + 1);
+	};
+	s(() => {
+		let e = z.current, t = G.current;
+		e && t && (G.current = null, document.activeElement === e && e.setSelectionRange(t.start, t.end));
+	}, [ge, R]);
+	let q = (e) => {
+		let t = Math.min(R.length, p - 1), n = Math.max(0, Math.min(e, t));
+		K(n < R.length ? {
+			start: n,
+			end: n + 1
+		} : {
+			start: n,
+			end: n
+		});
+	}, J = (e) => {
+		e !== R && (L(e), e.length === p && v?.(e));
+	}, Y = c(_);
+	Y.current = _;
+	let X = g !== void 0;
+	o(() => {
+		if (X) return;
+		let e = z.current?.form;
+		if (!e) return;
+		let t = () => L(m(Y.current, y).slice(0, p));
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [
+		X,
+		L,
+		y,
+		p
+	]);
+	let ve = (e) => {
+		E?.(e);
+		let t = e.target, n = t.value, r = t.selectionStart ?? n.length, i = m(n.slice(0, r), y), a = m(n.slice(r), y), o = i + a, s = i.length;
+		if (o.length > p) {
+			let e = Math.max(0, n.length - R.length), t = m(n.slice(r - e, r), y);
+			if (t.length >= p) o = t.slice(0, p), s = p;
+			else {
+				let e = o.length - p;
+				o = (i + a.slice(e)).slice(0, p), s = Math.min(i.length, p);
+			}
+		}
+		J(o), K({
+			start: s,
+			end: s
+		});
+	}, ye = (e) => {
+		if (A?.(e), e.defaultPrevented || P.readOnly || P.disabled) return;
+		let t = m(e.clipboardData.getData("text"), y), n = e.currentTarget;
+		if (!t) return;
+		e.preventDefault();
+		let r;
+		if (t.length >= p) r = t.slice(0, p);
+		else {
+			let e = n.selectionStart ?? R.length, i = n.selectionEnd ?? e;
+			r = (R.slice(0, e) + t + R.slice(i)).slice(0, p);
+		}
+		J(r);
+		let i = Math.min(r.length, p);
+		K({
+			start: i,
+			end: i
+		});
+	}, be = (e) => {
+		if (k?.(e), e.defaultPrevented || e.altKey || e.metaKey || e.ctrlKey) return;
+		let t = e.currentTarget, n = Math.min(t.selectionStart ?? 0, p - 1);
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), q(n - 1);
+				break;
+			case "ArrowRight":
+				e.preventDefault(), q(n + 1);
+				break;
+			case "Home":
+			case "ArrowUp":
+				e.preventDefault(), q(0);
+				break;
+			case "End":
+			case "ArrowDown": e.preventDefault(), q(R.length);
+		}
+	}, xe = (e) => {
+		let t = e.selectionStart ?? 0, n = e.selectionEnd ?? t;
+		W((e) => e.start === t && e.end === n ? e : {
+			start: t,
+			end: n
+		});
+	}, Se = (e) => {
+		j?.(e), xe(e.currentTarget);
+	}, Z = (e) => {
+		D?.(e), H(!0), q(R.length);
+	}, Ce = (e) => {
+		O?.(e), H(!1);
+	}, we = (e) => {
+		if (M?.(e), e.defaultPrevented) return;
+		let t = 0, n = Infinity;
+		B.current.forEach((r, i) => {
+			if (!r) return;
+			let a = r.getBoundingClientRect(), o = Math.abs(e.clientX - (a.left + a.width / 2));
+			o < n && (n = o, t = i);
+		}), q(t);
+	}, Te = h(ie, p), Q = U.end - U.start > 1, Ee = V && !Q ? Math.min(U.start, p - 1) : -1, De = V && !P.readOnly && !P.disabled && U.start === U.end, $ = [];
+	for (let e = 0; e < p; e++) {
+		Te.has(e) && $.push(/* @__PURE__ */ u("span", {
+			className: i.separator,
+			children: ae
+		}, `sep-${e}`));
+		let t = R[e], r = e === Ee, a = V && Q && e >= U.start && e < U.end, o = null;
+		t ? o = b ? "•" : t : r && De ? o = /* @__PURE__ */ u("span", { className: i.caret }) : x && (o = /* @__PURE__ */ u("span", {
+			className: i.placeholder,
+			children: x
+		})), $.push(/* @__PURE__ */ u("span", {
+			ref: (t) => {
+				B.current[e] = t;
+			},
+			className: i.cell,
+			"data-active": r || void 0,
+			"data-selected": a || void 0,
+			"data-filled": t ? !0 : void 0,
+			children: /* @__PURE__ */ u("span", {
+				className: n(i.char, t && i.charFilled),
+				children: o
+			}, t ?? "empty")
+		}, e));
+	}
+	return /* @__PURE__ */ d("div", {
+		className: n(i.root, f[C], ee[F], w ? te[w] : i.radiusDefault, V && i.focused, P.invalid && i.invalid, P.disabled && i.disabled, P.readOnly && !P.disabled && i.readOnly, oe),
+		style: ce,
+		"data-size": F,
+		"data-variant": C,
+		children: [/* @__PURE__ */ u("div", {
+			className: i.cells,
+			"aria-hidden": "true",
+			children: $
+		}), /* @__PURE__ */ u("input", {
+			autoComplete: pe ?? (b ? "off" : "one-time-code"),
+			autoCorrect: "off",
+			autoCapitalize: "off",
+			spellCheck: !1,
+			enterKeyHint: "done",
+			...N,
+			ref: he,
+			id: P.id,
+			type: b ? "password" : "text",
+			inputMode: y === "numeric" ? "numeric" : "text",
+			pattern: y === "numeric" ? "[0-9]*" : "[A-Za-z0-9]*",
+			minLength: p,
+			value: R,
+			disabled: P.disabled,
+			required: P.required,
+			readOnly: P.readOnly,
+			...P.ariaProps,
+			className: n(i.input, se),
+			onChange: ve,
+			onPaste: ye,
+			onKeyDown: be,
+			onSelect: Se,
+			onFocus: Z,
+			onBlur: Ce,
+			onClick: we
+		})]
+	});
+};
+//#endregion
+export { g as PinInput };

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

@@ -0,0 +1 @@
+var e=`_root_1be1e_15`,t=`_sm_1be1e_49`,n=`_md_1be1e_63`,r=`_lg_1be1e_77`,i=`_radiusDefault_1be1e_93`,a=`_radiusNone_1be1e_99`,o=`_radiusXs_1be1e_105`,s=`_radiusSm_1be1e_111`,c=`_radiusMd_1be1e_117`,l=`_radiusLg_1be1e_123`,u=`_radiusXl_1be1e_129`,d=`_radius2xl_1be1e_135`,f=`_radiusPill_1be1e_141`,p=`_outline_1be1e_151`,m=`_filled_1be1e_161`,h=`_readOnly_1be1e_173`,g=`_disabled_1be1e_175`,_=`_cells_1be1e_203`,v=`_cell_1be1e_203`,y=`_invalid_1be1e_277`,b=`_focused_1be1e_277`,x=`_char_1be1e_331`,S=`_charFilled_1be1e_343`,C=`_placeholder_1be1e_373`,w=`_caret_1be1e_393`,T=`_separator_1be1e_435`,E=`_input_1be1e_471`,D={root:e,sm:t,md:n,lg:r,radiusDefault:i,radiusNone:a,radiusXs:o,radiusSm:s,radiusMd:c,radiusLg:l,radiusXl:u,radius2xl:d,radiusPill:f,outline:p,filled:m,readOnly:h,disabled:g,cells:_,cell:v,invalid:y,focused:b,char:x,charFilled:S,"pin-pop":`_pin-pop_1be1e_1`,placeholder:C,caret:w,"pin-blink":`_pin-blink_1be1e_1`,separator:T,input:E};exports.caret=w,exports.cell=v,exports.cells=_,exports.char=x,exports.charFilled=S,exports.default=D,exports.disabled=g,exports.filled=m,exports.focused=b,exports.input=E,exports.invalid=y,exports.lg=r,exports.md=n,exports.outline=p,exports.placeholder=C,exports.radius2xl=d,exports.radiusDefault=i,exports.radiusLg=l,exports.radiusMd=c,exports.radiusNone=a,exports.radiusPill=f,exports.radiusSm=s,exports.radiusXl=u,exports.radiusXs=o,exports.readOnly=h,exports.root=e,exports.separator=T,exports.sm=t;

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

@@ -0,0 +1,34 @@
+//#region src/components/forms/PinInput/PinInput.module.css
+var e = "_root_1be1e_15", t = "_sm_1be1e_49", n = "_md_1be1e_63", r = "_lg_1be1e_77", i = "_radiusDefault_1be1e_93", a = "_radiusNone_1be1e_99", o = "_radiusXs_1be1e_105", s = "_radiusSm_1be1e_111", c = "_radiusMd_1be1e_117", l = "_radiusLg_1be1e_123", u = "_radiusXl_1be1e_129", d = "_radius2xl_1be1e_135", f = "_radiusPill_1be1e_141", p = "_outline_1be1e_151", m = "_filled_1be1e_161", h = "_readOnly_1be1e_173", g = "_disabled_1be1e_175", _ = "_cells_1be1e_203", v = "_cell_1be1e_203", y = "_invalid_1be1e_277", b = "_focused_1be1e_277", x = "_char_1be1e_331", S = "_charFilled_1be1e_343", C = "_placeholder_1be1e_373", w = "_caret_1be1e_393", T = "_separator_1be1e_435", E = "_input_1be1e_471", D = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	radiusDefault: i,
+	radiusNone: a,
+	radiusXs: o,
+	radiusSm: s,
+	radiusMd: c,
+	radiusLg: l,
+	radiusXl: u,
+	radius2xl: d,
+	radiusPill: f,
+	outline: p,
+	filled: m,
+	readOnly: h,
+	disabled: g,
+	cells: _,
+	cell: v,
+	invalid: y,
+	focused: b,
+	char: x,
+	charFilled: S,
+	"pin-pop": "_pin-pop_1be1e_1",
+	placeholder: C,
+	caret: w,
+	"pin-blink": "_pin-blink_1be1e_1",
+	separator: T,
+	input: E
+};
+//#endregion
+export { w as caret, v as cell, _ as cells, x as char, S as charFilled, D as default, g as disabled, m as filled, b as focused, E as input, y as invalid, r as lg, n as md, p as outline, C as placeholder, d as radius2xl, i as radiusDefault, l as radiusLg, c as radiusMd, a as radiusNone, f as radiusPill, s as radiusSm, u as radiusXl, o as radiusXs, h as readOnly, e as root, T as separator, t as sm };

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

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