wimui 0.56.1 → 0.57.0

package/dist/components/form/InlineEdit/InlineEdit.js

@@ -9,38 +9,40 @@ import o, { useEffect as s, useRef as c, useState as l } from "react";
 import u from "classnames";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/form/InlineEdit/InlineEdit.tsx
-var p = o.forwardRef(({ value: o, defaultValue: p, onChange: m, onSave: h, onCancel: g, onEdit: _, placeholder: v, disabled: y = !1, fullWidth: b = !1, label: x, className: S, "aria-label": C, ...w }, T) => {
-	let { t: E } = e(t), [D, O] = l(!1), [k, A] = l(p ?? ""), [j, M] = l(p ?? ""), N = c(null), P = o !== void 0, F = P ? o : j, I = () => {
-		y || (P || M(k), O(!0), _?.());
-	}, L = () => {
-		y || (P || A(F), O(!1), h?.(F));
-	}, R = () => {
-		y || (P || M(k), O(!1), g?.());
-	}, z = (e) => {
+var p = o.forwardRef(({ value: o, defaultValue: p, onChange: m, onSave: h, onCancel: g, onEdit: _, placeholder: v, disabled: y = !1, fullWidth: b = !1, label: x, className: S, "aria-label": C, "aria-labelledby": w, "aria-describedby": T, ...E }, D) => {
+	let { t: O } = e(t), [k, A] = l(!1), [j, M] = l(p ?? ""), [N, P] = l(p ?? ""), F = c(null), I = o !== void 0, L = I ? o : N, R = () => {
+		y || (I || P(j), A(!0), _?.());
+	}, z = () => {
+		y || (I || M(L), A(!1), h?.(L));
+	}, B = () => {
+		y || (I || P(j), A(!1), g?.());
+	}, V = (e) => {
 		let t = e.target.value;
-		P || M(t), m?.(t);
-	}, B = (e) => {
-		e.key === "Enter" ? (e.preventDefault(), L()) : e.key === "Escape" && (e.preventDefault(), R());
+		I || P(t), m?.(t);
+	}, H = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), z()) : e.key === "Escape" && (e.preventDefault(), B());
 	};
 	return s(() => {
-		D && N.current && N.current.focus();
-	}, [D]), /* @__PURE__ */ d(n, {
+		k && F.current && F.current.focus();
+	}, [k]), /* @__PURE__ */ d(n, {
 		label: x,
 		className: S,
 		children: /* @__PURE__ */ d("div", {
-			ref: T,
+			ref: D,
 			className: u("wim-inline-edit", a.root, b && a.fullWidth, y && a.disabled),
-			...w,
-			children: D ? /* @__PURE__ */ f("div", {
+			...E,
+			children: k ? /* @__PURE__ */ f("div", {
 				className: a.editWrapper,
 				children: [/* @__PURE__ */ d(r, {
-					ref: N,
-					value: F,
-					onChange: z,
-					onKeyDown: B,
+					ref: F,
+					value: L,
+					onChange: V,
+					onKeyDown: H,
 					disabled: y,
 					placeholder: v,
 					"aria-label": C,
+					"aria-labelledby": w,
+					"aria-describedby": T,
 					fullWidth: b,
 					className: a.input
 				}), /* @__PURE__ */ f("div", {
@@ -49,31 +51,33 @@ var p = o.forwardRef(({ value: o, defaultValue: p, onChange: m, onSave: h, onCan
 						iconName: "CheckIcon",
 						intent: "success",
 						variant: "outline",
-						"aria-label": E("action.save"),
-						onClick: L,
+						"aria-label": O("action.save"),
+						onClick: z,
 						disabled: y
 					}), /* @__PURE__ */ d(i, {
 						iconName: "CloseIcon",
 						intent: "default",
 						variant: "outline",
-						"aria-label": E("action.cancel"),
-						onClick: R,
+						"aria-label": O("action.cancel"),
+						onClick: B,
 						disabled: y
 					})]
 				})]
 			}) : /* @__PURE__ */ f("div", {
 				className: a.preview,
-				onClick: I,
+				onClick: R,
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), I());
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), R());
 				},
 				tabIndex: y ? -1 : 0,
 				role: "button",
 				"aria-label": C,
+				"aria-labelledby": w,
+				"aria-describedby": T,
 				"aria-disabled": y,
 				children: [/* @__PURE__ */ d("span", {
-					className: u(a.text, !F && a.placeholder),
-					children: F || v || "\xA0"
+					className: u(a.text, !L && a.placeholder),
+					children: L || v || "\xA0"
 				}), /* @__PURE__ */ d("span", {
 					className: a.editIconWrapper,
 					children: /* @__PURE__ */ d(i, {
@@ -81,7 +85,7 @@ var p = o.forwardRef(({ value: o, defaultValue: p, onChange: m, onSave: h, onCan
 						variant: "ghost",
 						size: "sm",
 						tabIndex: -1,
-						"aria-label": E("action.edit"),
+						"aria-label": O("action.edit"),
 						"aria-hidden": "true",
 						asChild: !0,
 						children: /* @__PURE__ */ d("span", {})

package/dist/components/form/Mentions/Mentions.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../_internal/BaseListItem/BaseListItem.cjs"),r=require("../../_internal/mergeRefs.cjs"),i=require("../Textarea/Textarea.cjs"),a=require("./mentions.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,o.forwardRef)(({options:e,trigger:c=`@`,value:l,defaultValue:u,onChange:d,onSelect:f,asChild:p=!1,children:m,intent:h,variant:g,fullWidth:_,fieldSizing:v,label:y,error:b,required:x,layout:S,width:C,placeholder:w,rows:T,cols:E,onCopy:D,onCut:O,onPaste:ee,...k},A)=>{let j=(0,o.useId)(),M=k.id||`wim-mentions-${j}`,[N,P]=(0,o.useState)(u||``),F=l!==void 0,I=F?l:N,[L,R]=(0,o.useState)(!1),[z,B]=(0,o.useState)(``),[V,H]=(0,o.useState)(0),[U,W]=(0,o.useState)(-1),[G,K]=(0,o.useState)(0),q=(0,o.useRef)(null),J=(0,o.useRef)(null),Y=r.mergeRefs(J,A),X=e.filter(e=>e.display.toLowerCase().includes(z.toLowerCase())),Z=e=>{let t=e.target.value,n=e.target.selectionStart;H(n),F||P(t),d&&d(e);let r=t.slice(0,n),i=r.lastIndexOf(c);if(i!==-1){let e=r.slice(i+c.length);if(!e.includes(` `)){W(i),B(e),R(!0),K(0);return}}R(!1),W(-1)},Q=e=>{let t=I.slice(0,U),n=I.slice(V),r=`${t}${c}${e.display} ${n}`;F||P(r),d&&d({target:{value:r}}),f&&f(e),R(!1),W(-1),setTimeout(()=>{if(q.current){q.current.focus();let n=t.length+c.length+e.display.length+1;q.current.setSelectionRange(n,n)}},0)},te=e=>{L&&X.length>0&&(e.key===`ArrowDown`?(e.preventDefault(),K(e=>e>=X.length-1?0:e+1)):e.key===`ArrowUp`?(e.preventDefault(),K(e=>e<=0?X.length-1:e-1)):e.key===`Enter`||e.key===`Tab`?G>=0&&X[G]&&(e.preventDefault(),Q(X[G])):e.key===`Escape`&&R(!1))},ne=p?t.Root:`div`,$={intent:h,variant:g,fullWidth:_,fieldSizing:v,label:y,error:b,required:x,layout:S,width:C,placeholder:w,rows:T,cols:E,onCopy:D,onCut:O,onPaste:ee},re=p?{...$,...k}:k;return(0,s.jsxs)(ne,{className:`wim-mentions ${a.default.container}`,ref:Y,...re,children:[(0,s.jsxs)(t.Slottable,{children:[(0,s.jsx)(i.Textarea,{...k,...$,ref:q,value:I,onChange:Z,onKeyDown:te,"aria-autocomplete":`list`,"aria-controls":L?`${M}-list`:void 0,onBlur:e=>{J.current?.contains(e.relatedTarget)||R(!1)}}),L&&X.length>0&&(0,s.jsx)(`div`,{id:`${M}-list`,className:a.default.list,role:`listbox`,children:X.map((e,t)=>(0,s.jsx)(n.BaseListItem,{active:t===G,onMouseDown:e=>e.preventDefault(),onClick:()=>Q(e),onMouseEnter:()=>K(t),role:`option`,"aria-selected":t===G,tabIndex:-1,children:e.display},e.id))})]}),p?m:null]})});c.displayName=`Mentions`,exports.Mentions=c,exports.default=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../_internal/BaseListItem/BaseListItem.cjs"),r=require("../../_internal/mergeRefs.cjs"),i=require("../Textarea/Textarea.cjs"),a=require("./mentions.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,o.forwardRef)(({options:e,trigger:c=`@`,value:l,defaultValue:ee,onChange:u,onSelect:d,asChild:f=!1,children:p,intent:m,variant:h,fullWidth:g,fieldSizing:_,label:v,error:y,required:te,layout:b,width:x,placeholder:S,rows:C,cols:w,onCopy:T,onCut:E,onPaste:D,...O},k)=>{let A=(0,o.useId)(),j=O.id||`wim-mentions-${A}`,[M,N]=(0,o.useState)(ee||``),P=l!==void 0,F=P?l:M,[I,L]=(0,o.useState)(!1),[R,z]=(0,o.useState)(``),[B,V]=(0,o.useState)(0),[H,U]=(0,o.useState)(-1),[W,G]=(0,o.useState)(0),K=(0,o.useRef)(null),q=(0,o.useRef)(null),J=r.mergeRefs(q,k),Y=e.filter(e=>e.display.toLowerCase().includes(R.toLowerCase())),X=e=>{let t=e.target.value,n=e.target.selectionStart;V(n),P||N(t),u&&u(e);let r=t.slice(0,n),i=r.lastIndexOf(c);if(i!==-1){let e=r.slice(i+c.length);if(!e.includes(` `)){U(i),z(e),L(!0),G(0);return}}L(!1),U(-1)},Z=e=>{let t=F.slice(0,H),n=F.slice(B),r=`${t}${c}${e.display} ${n}`;P||N(r),u&&u({target:{value:r}}),d&&d(e),L(!1),U(-1),setTimeout(()=>{if(K.current){K.current.focus();let n=t.length+c.length+e.display.length+1;K.current.setSelectionRange(n,n)}},0)},ne=e=>{I&&Y.length>0&&(e.key===`ArrowDown`?(e.preventDefault(),G(e=>e>=Y.length-1?0:e+1)):e.key===`ArrowUp`?(e.preventDefault(),G(e=>e<=0?Y.length-1:e-1)):e.key===`Enter`||e.key===`Tab`?W>=0&&Y[W]&&(e.preventDefault(),Z(Y[W])):e.key===`Escape`&&L(!1))},re=f?t.Root:`div`,Q={intent:m,variant:h,fullWidth:g,fieldSizing:_,label:v,error:y,required:te,layout:b,width:x,placeholder:S,rows:C,cols:w,onCopy:T,onCut:E,onPaste:D},$={...O};delete $[`aria-label`],delete $[`aria-labelledby`],delete $[`aria-describedby`];let ie=f?{...Q,...O}:$;return(0,s.jsxs)(re,{className:`wim-mentions ${a.default.container}`,ref:J,...ie,children:[(0,s.jsxs)(t.Slottable,{children:[(0,s.jsx)(i.Textarea,{...O,...Q,ref:K,value:F,onChange:X,onKeyDown:ne,"aria-autocomplete":`list`,"aria-controls":I?`${j}-list`:void 0,onBlur:e=>{q.current?.contains(e.relatedTarget)||L(!1)}}),I&&Y.length>0&&(0,s.jsx)(`div`,{id:`${j}-list`,className:a.default.list,role:`listbox`,children:Y.map((e,t)=>(0,s.jsx)(n.BaseListItem,{active:t===W,onMouseDown:e=>e.preventDefault(),onClick:()=>Z(e),onMouseEnter:()=>G(t),role:`option`,"aria-selected":t===W,tabIndex:-1,children:e.display},e.id))})]}),f?p:null]})});c.displayName=`Mentions`,exports.Mentions=c,exports.default=c;

package/dist/components/form/Mentions/Mentions.js

@@ -4,86 +4,88 @@ import { BaseListItem as n } from "../../_internal/BaseListItem/BaseListItem.js"
 import { mergeRefs as r } from "../../_internal/mergeRefs.js";
 import { Textarea as i } from "../Textarea/Textarea.js";
 import a from "./mentions.module.js";
-import { forwardRef as o, useId as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as o, useId as ee, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/form/Mentions/Mentions.tsx
-var f = o(({ options: o, trigger: f = "@", value: p, defaultValue: ee, onChange: m, onSelect: h, asChild: g = !1, children: _, intent: v, variant: y, fullWidth: b, fieldSizing: x, label: S, error: C, required: w, layout: T, width: E, placeholder: D, rows: O, cols: te, onCopy: ne, onCut: k, onPaste: A, ...j }, M) => {
-	let N = s(), P = j.id || `wim-mentions-${N}`, [F, I] = l(ee || ""), L = p !== void 0, R = L ? p : F, [z, B] = l(!1), [V, H] = l(""), [U, W] = l(0), [G, K] = l(-1), [q, J] = l(0), Y = c(null), X = c(null), re = r(X, M), Z = o.filter((e) => e.display.toLowerCase().includes(V.toLowerCase())), ie = (e) => {
+var d = o(({ options: o, trigger: d = "@", value: f, defaultValue: te, onChange: p, onSelect: m, asChild: h = !1, children: g, intent: _, variant: v, fullWidth: y, fieldSizing: b, label: x, error: S, required: C, layout: w, width: T, placeholder: E, rows: D, cols: O, onCopy: k, onCut: ne, onPaste: re, ...A }, j) => {
+	let M = ee(), N = A.id || `wim-mentions-${M}`, [P, F] = c(te || ""), I = f !== void 0, L = I ? f : P, [R, z] = c(!1), [B, V] = c(""), [H, U] = c(0), [W, G] = c(-1), [K, q] = c(0), J = s(null), Y = s(null), ie = r(Y, j), X = o.filter((e) => e.display.toLowerCase().includes(B.toLowerCase())), ae = (e) => {
 		let t = e.target.value, n = e.target.selectionStart;
-		W(n), L || I(t), m && m(e);
-		let r = t.slice(0, n), i = r.lastIndexOf(f);
+		U(n), I || F(t), p && p(e);
+		let r = t.slice(0, n), i = r.lastIndexOf(d);
 		if (i !== -1) {
-			let e = r.slice(i + f.length);
+			let e = r.slice(i + d.length);
 			if (!e.includes(" ")) {
-				K(i), H(e), B(!0), J(0);
+				G(i), V(e), z(!0), q(0);
 				return;
 			}
 		}
-		B(!1), K(-1);
-	}, Q = (e) => {
-		let t = R.slice(0, G), n = R.slice(U), r = `${t}${f}${e.display} ${n}`;
-		L || I(r), m && m({ target: { value: r } }), h && h(e), B(!1), K(-1), setTimeout(() => {
-			if (Y.current) {
-				Y.current.focus();
-				let n = t.length + f.length + e.display.length + 1;
-				Y.current.setSelectionRange(n, n);
+		z(!1), G(-1);
+	}, Z = (e) => {
+		let t = L.slice(0, W), n = L.slice(H), r = `${t}${d}${e.display} ${n}`;
+		I || F(r), p && p({ target: { value: r } }), m && m(e), z(!1), G(-1), setTimeout(() => {
+			if (J.current) {
+				J.current.focus();
+				let n = t.length + d.length + e.display.length + 1;
+				J.current.setSelectionRange(n, n);
 			}
 		}, 0);
-	}, ae = (e) => {
-		z && Z.length > 0 && (e.key === "ArrowDown" ? (e.preventDefault(), J((e) => e >= Z.length - 1 ? 0 : e + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), J((e) => e <= 0 ? Z.length - 1 : e - 1)) : e.key === "Enter" || e.key === "Tab" ? q >= 0 && Z[q] && (e.preventDefault(), Q(Z[q])) : e.key === "Escape" && B(!1));
-	}, oe = g ? e : "div", $ = {
-		intent: v,
-		variant: y,
-		fullWidth: b,
-		fieldSizing: x,
-		label: S,
-		error: C,
-		required: w,
-		layout: T,
-		width: E,
-		placeholder: D,
-		rows: O,
-		cols: te,
-		onCopy: ne,
-		onCut: k,
-		onPaste: A
-	}, se = g ? {
-		...$,
-		...j
-	} : j;
-	return /* @__PURE__ */ d(oe, {
+	}, oe = (e) => {
+		R && X.length > 0 && (e.key === "ArrowDown" ? (e.preventDefault(), q((e) => e >= X.length - 1 ? 0 : e + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), q((e) => e <= 0 ? X.length - 1 : e - 1)) : e.key === "Enter" || e.key === "Tab" ? K >= 0 && X[K] && (e.preventDefault(), Z(X[K])) : e.key === "Escape" && z(!1));
+	}, se = h ? e : "div", Q = {
+		intent: _,
+		variant: v,
+		fullWidth: y,
+		fieldSizing: b,
+		label: x,
+		error: S,
+		required: C,
+		layout: w,
+		width: T,
+		placeholder: E,
+		rows: D,
+		cols: O,
+		onCopy: k,
+		onCut: ne,
+		onPaste: re
+	}, $ = { ...A };
+	delete $["aria-label"], delete $["aria-labelledby"], delete $["aria-describedby"];
+	let ce = h ? {
+		...Q,
+		...A
+	} : $;
+	return /* @__PURE__ */ u(se, {
 		className: `wim-mentions ${a.container}`,
-		ref: re,
-		...se,
-		children: [/* @__PURE__ */ d(t, { children: [/* @__PURE__ */ u(i, {
-			...j,
-			...$,
-			ref: Y,
-			value: R,
-			onChange: ie,
-			onKeyDown: ae,
+		ref: ie,
+		...ce,
+		children: [/* @__PURE__ */ u(t, { children: [/* @__PURE__ */ l(i, {
+			...A,
+			...Q,
+			ref: J,
+			value: L,
+			onChange: ae,
+			onKeyDown: oe,
 			"aria-autocomplete": "list",
-			"aria-controls": z ? `${P}-list` : void 0,
+			"aria-controls": R ? `${N}-list` : void 0,
 			onBlur: (e) => {
-				X.current?.contains(e.relatedTarget) || B(!1);
+				Y.current?.contains(e.relatedTarget) || z(!1);
 			}
-		}), z && Z.length > 0 && /* @__PURE__ */ u("div", {
-			id: `${P}-list`,
+		}), R && X.length > 0 && /* @__PURE__ */ l("div", {
+			id: `${N}-list`,
 			className: a.list,
 			role: "listbox",
-			children: Z.map((e, t) => /* @__PURE__ */ u(n, {
-				active: t === q,
+			children: X.map((e, t) => /* @__PURE__ */ l(n, {
+				active: t === K,
 				onMouseDown: (e) => e.preventDefault(),
-				onClick: () => Q(e),
-				onMouseEnter: () => J(t),
+				onClick: () => Z(e),
+				onMouseEnter: () => q(t),
 				role: "option",
-				"aria-selected": t === q,
+				"aria-selected": t === K,
 				tabIndex: -1,
 				children: e.display
 			}, e.id))
-		})] }), g ? _ : null]
+		})] }), h ? g : null]
 	});
 });
-f.displayName = "Mentions";
+d.displayName = "Mentions";
 //#endregion
-export { f as Mentions, f as default };
+export { d as Mentions, d as default };

package/dist/components/form/OtpInput/OtpInput.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("./otp-input.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=(e,t)=>{let n=e.split(``).slice(0,t);return Array(t).fill(``).map((e,t)=>n[t]??``)},c=(0,i.forwardRef)(({length:e=6,value:c=``,onChange:l,disabled:u=!1,error:d,required:f,label:p,layout:m,className:h,labels:g={},asChild:_=!1,fullWidth:v=!1,children:y,...b},x)=>{let{digitAriaLabel:S=e=>`Digit ${e}`}=g,[C,w]=(0,i.useState)(()=>s(c,e)),[T,E]=(0,i.useState)(c),D=(0,i.useRef)([]),O=`wim-otp-input-${(0,i.useId)()}`,k=p?`${O}-label`:void 0,A=d?`${O}-error`:void 0;c!==T&&(E(c),w(s(c,e)));let j=e=>{let t=e.join(``);l&&l(t)},M=(t,n)=>{let r=t.target.value.slice(-1),i=[...C];i[n]=r,w(i),j(i),r&&n<e-1&&D.current[n+1]?.focus()},N=(t,n)=>{if(t.key===`Backspace`){if(!C[n]&&n>0){let e=[...C];e[n-1]=``,w(e),j(e),D.current[n-1]?.focus()}else if(C[n]){let e=[...C];e[n]=``,w(e),j(e)}}else t.key===`ArrowLeft`&&n>0?(t.preventDefault(),D.current[n-1]?.focus()):t.key===`ArrowRight`&&n<e-1&&(t.preventDefault(),D.current[n+1]?.focus())},P=t=>{t.preventDefault();let n=t.clipboardData.getData(`text`).slice(0,e).split(``),r=[...C];n.forEach((t,n)=>{n<e&&(r[n]=t)}),w(r),j(r);let i=Math.min(n.length,e-1);D.current[i]?.focus()},F=_?t.Root:`div`;return(0,o.jsx)(n.FieldTemplate,{label:p,error:d,required:f,layout:m,labelId:k,htmlFor:O,errorId:A,className:(0,a.default)(h,v&&r.default.fullWidth),children:(0,o.jsxs)(F,{className:(0,a.default)(`wim-otp-input`,r.default.root,v&&r.default.fullWidth),ref:x,...b,children:[(0,o.jsx)(t.Slottable,{children:(0,o.jsx)(`div`,{className:(0,a.default)(r.default.container,u&&r.default.disabled),role:`group`,"aria-labelledby":k,"data-testid":`otp-input-container`,"data-disabled":u,children:Array.from({length:e}).map((e,t)=>(0,o.jsx)(`input`,{id:t===0?O:void 0,ref:e=>{D.current[t]=e},"data-testid":`otp-input`,className:(0,a.default)(r.default.input,d&&r.default.danger,u&&r.default.disabled),type:`text`,maxLength:1,value:C[t],onChange:e=>M(e,t),onKeyDown:e=>N(e,t),onPaste:P,disabled:u,"aria-label":S(t+1),"aria-invalid":d?`true`:`false`,"aria-describedby":A,"aria-required":f?`true`:void 0},t))})}),y]})})});c.displayName=`OtpInput`,exports.OtpInput=c,exports.default=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("./otp-input.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=(e,t)=>{let n=e.split(``).slice(0,t);return Array(t).fill(``).map((e,t)=>n[t]??``)},c=(0,i.forwardRef)(({length:e=6,value:c=``,onChange:l,disabled:u=!1,error:d,required:f,label:p,layout:m,className:h,labels:g={},asChild:_=!1,fullWidth:v=!1,children:y,"aria-label":b,"aria-labelledby":x,"aria-describedby":S,...C},w)=>{let{digitAriaLabel:T=e=>`Digit ${e}`}=g,[E,D]=(0,i.useState)(()=>s(c,e)),[O,k]=(0,i.useState)(c),A=(0,i.useRef)([]),j=`wim-otp-input-${(0,i.useId)()}`,M=p?`${j}-label`:void 0,N=d?`${j}-error`:void 0,P=M??x,F=[S,N].filter(Boolean).join(` `)||void 0;c!==O&&(k(c),D(s(c,e)));let I=e=>{let t=e.join(``);l&&l(t)},L=(t,n)=>{let r=t.target.value.slice(-1),i=[...E];i[n]=r,D(i),I(i),r&&n<e-1&&A.current[n+1]?.focus()},R=(t,n)=>{if(t.key===`Backspace`){if(!E[n]&&n>0){let e=[...E];e[n-1]=``,D(e),I(e),A.current[n-1]?.focus()}else if(E[n]){let e=[...E];e[n]=``,D(e),I(e)}}else t.key===`ArrowLeft`&&n>0?(t.preventDefault(),A.current[n-1]?.focus()):t.key===`ArrowRight`&&n<e-1&&(t.preventDefault(),A.current[n+1]?.focus())},z=t=>{t.preventDefault();let n=t.clipboardData.getData(`text`).slice(0,e).split(``),r=[...E];n.forEach((t,n)=>{n<e&&(r[n]=t)}),D(r),I(r);let i=Math.min(n.length,e-1);A.current[i]?.focus()},B=_?t.Root:`div`;return(0,o.jsx)(n.FieldTemplate,{label:p,error:d,required:f,layout:m,labelId:M,htmlFor:j,errorId:N,className:(0,a.default)(h,v&&r.default.fullWidth),children:(0,o.jsxs)(B,{className:(0,a.default)(`wim-otp-input`,r.default.root,v&&r.default.fullWidth),ref:w,...C,children:[(0,o.jsx)(t.Slottable,{children:(0,o.jsx)(`div`,{className:(0,a.default)(r.default.container,u&&r.default.disabled),role:`group`,"aria-labelledby":P,"aria-label":P?void 0:b,"data-testid":`otp-input-container`,"data-disabled":u,children:Array.from({length:e}).map((e,t)=>(0,o.jsx)(`input`,{id:t===0?j:void 0,ref:e=>{A.current[t]=e},"data-testid":`otp-input`,className:(0,a.default)(r.default.input,d&&r.default.danger,u&&r.default.disabled),type:`text`,maxLength:1,value:E[t],onChange:e=>L(e,t),onKeyDown:e=>R(e,t),onPaste:z,disabled:u,"aria-label":T(t+1),"aria-invalid":d?`true`:`false`,"aria-describedby":F,"aria-required":f?`true`:void 0},t))})}),y]})})});c.displayName=`OtpInput`,exports.OtpInput=c,exports.default=c;

package/dist/components/form/OtpInput/OtpInput.js

@@ -9,70 +9,71 @@ import { jsx as l, jsxs as u } from "react/jsx-runtime";
 var d = (e, t) => {
 	let n = e.split("").slice(0, t);
 	return Array(t).fill("").map((e, t) => n[t] ?? "");
-}, f = i(({ length: i = 6, value: f = "", onChange: p, disabled: m = !1, error: h, required: g, label: _, layout: v, className: y, labels: b = {}, asChild: x = !1, fullWidth: S = !1, children: C, ...w }, T) => {
-	let { digitAriaLabel: E = (e) => `Digit ${e}` } = b, [D, O] = s(() => d(f, i)), [k, A] = s(f), j = o([]), M = `wim-otp-input-${a()}`, N = _ ? `${M}-label` : void 0, P = h ? `${M}-error` : void 0;
-	f !== k && (A(f), O(d(f, i)));
-	let F = (e) => {
+}, f = i(({ length: i = 6, value: f = "", onChange: p, disabled: m = !1, error: h, required: g, label: _, layout: v, className: y, labels: b = {}, asChild: x = !1, fullWidth: S = !1, children: C, "aria-label": w, "aria-labelledby": T, "aria-describedby": E, ...D }, O) => {
+	let { digitAriaLabel: k = (e) => `Digit ${e}` } = b, [A, j] = s(() => d(f, i)), [M, N] = s(f), P = o([]), F = `wim-otp-input-${a()}`, I = _ ? `${F}-label` : void 0, L = h ? `${F}-error` : void 0, R = I ?? T, z = [E, L].filter(Boolean).join(" ") || void 0;
+	f !== M && (N(f), j(d(f, i)));
+	let B = (e) => {
 		let t = e.join("");
 		p && p(t);
-	}, I = (e, t) => {
-		let n = e.target.value.slice(-1), r = [...D];
-		r[t] = n, O(r), F(r), n && t < i - 1 && j.current[t + 1]?.focus();
-	}, L = (e, t) => {
+	}, V = (e, t) => {
+		let n = e.target.value.slice(-1), r = [...A];
+		r[t] = n, j(r), B(r), n && t < i - 1 && P.current[t + 1]?.focus();
+	}, H = (e, t) => {
 		if (e.key === "Backspace") {
-			if (!D[t] && t > 0) {
-				let e = [...D];
-				e[t - 1] = "", O(e), F(e), j.current[t - 1]?.focus();
-			} else if (D[t]) {
-				let e = [...D];
-				e[t] = "", O(e), F(e);
+			if (!A[t] && t > 0) {
+				let e = [...A];
+				e[t - 1] = "", j(e), B(e), P.current[t - 1]?.focus();
+			} else if (A[t]) {
+				let e = [...A];
+				e[t] = "", j(e), B(e);
 			}
-		} else e.key === "ArrowLeft" && t > 0 ? (e.preventDefault(), j.current[t - 1]?.focus()) : e.key === "ArrowRight" && t < i - 1 && (e.preventDefault(), j.current[t + 1]?.focus());
-	}, R = (e) => {
+		} else e.key === "ArrowLeft" && t > 0 ? (e.preventDefault(), P.current[t - 1]?.focus()) : e.key === "ArrowRight" && t < i - 1 && (e.preventDefault(), P.current[t + 1]?.focus());
+	}, U = (e) => {
 		e.preventDefault();
-		let t = e.clipboardData.getData("text").slice(0, i).split(""), n = [...D];
+		let t = e.clipboardData.getData("text").slice(0, i).split(""), n = [...A];
 		t.forEach((e, t) => {
 			t < i && (n[t] = e);
-		}), O(n), F(n);
+		}), j(n), B(n);
 		let r = Math.min(t.length, i - 1);
-		j.current[r]?.focus();
-	}, z = x ? e : "div";
+		P.current[r]?.focus();
+	}, W = x ? e : "div";
 	return /* @__PURE__ */ l(n, {
 		label: _,
 		error: h,
 		required: g,
 		layout: v,
-		labelId: N,
-		htmlFor: M,
-		errorId: P,
+		labelId: I,
+		htmlFor: F,
+		errorId: L,
 		className: c(y, S && r.fullWidth),
-		children: /* @__PURE__ */ u(z, {
+		children: /* @__PURE__ */ u(W, {
 			className: c("wim-otp-input", r.root, S && r.fullWidth),
-			ref: T,
-			...w,
+			ref: O,
+			...D,
 			children: [/* @__PURE__ */ l(t, { children: /* @__PURE__ */ l("div", {
 				className: c(r.container, m && r.disabled),
 				role: "group",
-				"aria-labelledby": N,
+				"aria-labelledby": R,
+				"aria-label": R ? void 0 : w,
 				"data-testid": "otp-input-container",
 				"data-disabled": m,
 				children: Array.from({ length: i }).map((e, t) => /* @__PURE__ */ l("input", {
-					id: t === 0 ? M : void 0,
+					id: t === 0 ? F : void 0,
 					ref: (e) => {
-						j.current[t] = e;
+						P.current[t] = e;
 					},
 					"data-testid": "otp-input",
 					className: c(r.input, h && r.danger, m && r.disabled),
 					type: "text",
 					maxLength: 1,
-					value: D[t],
-					onChange: (e) => I(e, t),
-					onKeyDown: (e) => L(e, t),
-					onPaste: R,
+					value: A[t],
+					onChange: (e) => V(e, t),
+					onKeyDown: (e) => H(e, t),
+					onPaste: U,
 					disabled: m,
-					"aria-label": E(t + 1),
+					"aria-label": k(t + 1),
 					"aria-invalid": h ? "true" : "false",
-					"aria-describedby": P,
+					"aria-describedby": z,
 					"aria-required": g ? "true" : void 0
 				}, t))
 			}) }), C]

package/dist/components/form/PhoneInput/PhoneInput.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/Transition/Transition.cjs"),r=require("../../../icon/chevron-down.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("./phone-input.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[{code:`US`,dialCode:`1`,flag:`🇺🇸`},{code:`JP`,dialCode:`81`,flag:`🇯🇵`},{code:`GB`,dialCode:`44`,flag:`🇬🇧`},{code:`AU`,dialCode:`61`,flag:`🇦🇺`},{code:`DE`,dialCode:`49`,flag:`🇩🇪`},{code:`FR`,dialCode:`33`,flag:`🇫🇷`},{code:`CN`,dialCode:`86`,flag:`🇨🇳`},{code:`KR`,dialCode:`82`,flag:`🇰🇷`},{code:`IN`,dialCode:`91`,flag:`🇮🇳`},{code:`BR`,dialCode:`55`,flag:`🇧🇷`}],f=(0,c.forwardRef)(({value:e=``,onChange:f,countryCode:p=`US`,onCountryChange:m,placeholder:h=`000-0000-0000`,disabled:g=!1,error:_,required:v=!1,label:y,layout:b=`vertical`,className:x,fullWidth:S=!1,...C},w)=>{let T=`wim-phone-input-${(0,c.useId)()}`,E=y?`${T}-label`:void 0,{t:D}=t.useWimTranslation(a.formNs),O=D(`phone.select_country`),k=`${T}-countries`,A=e=>`${T}-country-${e}`,j=_?`${T}-error`:void 0,[M,N]=(0,c.useState)(!1),[P,F]=(0,c.useState)(-1),I=(0,c.useRef)(null),L=(0,c.useRef)(null),R=(0,c.useRef)({text:``,timer:null});(0,c.useEffect)(()=>{let e=e=>{I.current&&!I.current.contains(e.target)&&N(!1)};return M&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[M]);let z=d.find(e=>e.code===p)??d[0],B=e=>{f?.(e.target.value)},V=d.length-1,H=e=>{let t=d.findIndex(e=>e.code===z.code);F(e??Math.max(t,0)),N(!0)},U=e=>{let t=d[e];t&&(m?.(t.code),N(!1))},W=e=>D(`phone.countries.${e.code}`),G=e=>a.formNs.resources.en?.phone?.countries?.[e.code]??``,K=(e,t)=>{let n=e.toLowerCase().replace(/^\+/,``);if(n===``)return-1;let r=/^[0-9]+$/.test(n),i=!r&&n.length>1&&n.split(``).every(e=>e===n[0]),a=i?n[0]:n,o=i||n.length===1?t+1:t,s=r?[e=>e.dialCode]:[e=>W(e).toLowerCase(),e=>G(e).toLowerCase(),e=>e.code.toLowerCase()];for(let e of s)for(let t=0;t<d.length;t++){let n=(Math.max(o,0)+t)%d.length;if(e(d[n]).startsWith(a))return n}return-1},q=e=>{let t=R.current;t.timer&&clearTimeout(t.timer),t.text+=e,t.timer=setTimeout(()=>{t.text=``,t.timer=null},500);let n=K(t.text,M?P:-1);n<0||(M?F(n):H(n))},J=e=>{if(!g)switch(e.key){case`ArrowDown`:case`ArrowUp`:if(e.preventDefault(),!M)H();else{let t=e.key===`ArrowDown`?1:-1;F(e=>(e+t+d.length)%d.length)}break;case`Home`:case`End`:e.preventDefault(),M?F(e.key===`Home`?0:V):H(e.key===`Home`?0:V);break;case`Enter`:case` `:e.preventDefault(),e.key===` `&&R.current.text!==``?q(` `):M?U(P):H();break;case`Escape`:M&&(e.preventDefault(),N(!1));break;case`Tab`:N(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),q(e.key))}};return(0,c.useEffect)(()=>{let e=R.current;return()=>{e.timer&&clearTimeout(e.timer)}},[]),(0,c.useEffect)(()=>{M&&P>=0&&(L.current?.querySelectorAll(`[role="option"]`)?.[P])?.scrollIntoView?.({block:`nearest`})},[P,M]),(0,u.jsx)(o.FieldTemplate,{label:y,labelId:E,htmlFor:T,required:v,error:_,errorId:j,layout:b,className:x,children:(0,u.jsxs)(`div`,{ref:I,className:(0,l.default)(`wim-phone-input`,s.default.root,S&&s.default.fullWidth,g&&s.default.disabled,_&&s.default.danger),"data-testid":`phone-input-root`,...C,children:[(0,u.jsxs)(`div`,{className:s.default.countryWrapper,children:[(0,u.jsxs)(`button`,{type:`button`,role:`combobox`,className:s.default.countryTrigger,onClick:()=>{g||(M?N(!1):H())},onKeyDown:J,onKeyUp:e=>{e.key===` `&&e.preventDefault()},disabled:g,"aria-haspopup":`listbox`,"aria-expanded":M,"aria-controls":M?k:void 0,"aria-activedescendant":M&&P>=0?A(P):void 0,"aria-label":O,children:[(0,u.jsx)(`span`,{"aria-hidden":`true`,style:{fontSize:`1.2em`},children:z.flag}),(0,u.jsxs)(`span`,{children:[`+`,z.dialCode]}),(0,u.jsx)(i.Icon,{component:r.default,size:`sm`,className:(0,l.default)(s.default.chevron,M&&s.default.chevronOpen)})]}),(0,u.jsx)(n.Transition,{show:M,preset:`fade`,className:s.default.dropdown,children:(0,u.jsx)(`ul`,{ref:L,id:k,className:s.default.countryList,role:`listbox`,"aria-label":O,tabIndex:-1,onMouseDown:e=>e.preventDefault(),children:d.map((e,t)=>(0,u.jsxs)(`li`,{id:A(t),className:(0,l.default)(s.default.countryOption,t===P&&s.default.active,z.code===e.code&&s.default.selected),onMouseEnter:()=>F(t),onClick:()=>U(t),role:`option`,"aria-selected":z.code===e.code,children:[(0,u.jsx)(`span`,{"aria-hidden":`true`,children:e.flag}),(0,u.jsx)(`span`,{className:s.default.countryName,children:W(e)}),` `,(0,u.jsxs)(`span`,{className:s.default.countryCode,children:[`+`,e.dialCode]})]},e.code))})})]}),(0,u.jsx)(`div`,{className:s.default.divider,"aria-hidden":`true`}),(0,u.jsx)(`input`,{id:T,ref:w,type:`tel`,value:e,onChange:B,placeholder:h,disabled:g,className:s.default.number,"aria-invalid":!!_,"aria-describedby":j})]})})});f.displayName=`PhoneInput`,exports.PHONE_COUNTRIES=d,exports.PhoneInput=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/Transition/Transition.cjs"),r=require("../../../icon/chevron-down.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("./phone-input.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[{code:`US`,dialCode:`1`,flag:`🇺🇸`},{code:`JP`,dialCode:`81`,flag:`🇯🇵`},{code:`GB`,dialCode:`44`,flag:`🇬🇧`},{code:`AU`,dialCode:`61`,flag:`🇦🇺`},{code:`DE`,dialCode:`49`,flag:`🇩🇪`},{code:`FR`,dialCode:`33`,flag:`🇫🇷`},{code:`CN`,dialCode:`86`,flag:`🇨🇳`},{code:`KR`,dialCode:`82`,flag:`🇰🇷`},{code:`IN`,dialCode:`91`,flag:`🇮🇳`},{code:`BR`,dialCode:`55`,flag:`🇧🇷`}],f=(0,c.forwardRef)(({value:e=``,onChange:f,countryCode:p=`US`,onCountryChange:m,placeholder:h=`000-0000-0000`,disabled:g=!1,error:_,required:v=!1,label:y,layout:b=`vertical`,className:x,fullWidth:S=!1,"aria-label":C,"aria-labelledby":w,"aria-describedby":T,...E},D)=>{let O=`wim-phone-input-${(0,c.useId)()}`,k=y?`${O}-label`:void 0,{t:A}=t.useWimTranslation(a.formNs),j=A(`phone.select_country`),M=`${O}-countries`,N=e=>`${O}-country-${e}`,P=_?`${O}-error`:void 0,[F,I]=(0,c.useState)(!1),[L,R]=(0,c.useState)(-1),z=(0,c.useRef)(null),B=(0,c.useRef)(null),V=(0,c.useRef)({text:``,timer:null});(0,c.useEffect)(()=>{let e=e=>{z.current&&!z.current.contains(e.target)&&I(!1)};return F&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[F]);let H=d.find(e=>e.code===p)??d[0],U=e=>{f?.(e.target.value)},W=d.length-1,G=e=>{let t=d.findIndex(e=>e.code===H.code);R(e??Math.max(t,0)),I(!0)},K=e=>{let t=d[e];t&&(m?.(t.code),I(!1))},q=e=>A(`phone.countries.${e.code}`),J=e=>a.formNs.resources.en?.phone?.countries?.[e.code]??``,Y=(e,t)=>{let n=e.toLowerCase().replace(/^\+/,``);if(n===``)return-1;let r=/^[0-9]+$/.test(n),i=!r&&n.length>1&&n.split(``).every(e=>e===n[0]),a=i?n[0]:n,o=i||n.length===1?t+1:t,s=r?[e=>e.dialCode]:[e=>q(e).toLowerCase(),e=>J(e).toLowerCase(),e=>e.code.toLowerCase()];for(let e of s)for(let t=0;t<d.length;t++){let n=(Math.max(o,0)+t)%d.length;if(e(d[n]).startsWith(a))return n}return-1},X=e=>{let t=V.current;t.timer&&clearTimeout(t.timer),t.text+=e,t.timer=setTimeout(()=>{t.text=``,t.timer=null},500);let n=Y(t.text,F?L:-1);n<0||(F?R(n):G(n))},Z=e=>{if(!g)switch(e.key){case`ArrowDown`:case`ArrowUp`:if(e.preventDefault(),!F)G();else{let t=e.key===`ArrowDown`?1:-1;R(e=>(e+t+d.length)%d.length)}break;case`Home`:case`End`:e.preventDefault(),F?R(e.key===`Home`?0:W):G(e.key===`Home`?0:W);break;case`Enter`:case` `:e.preventDefault(),e.key===` `&&V.current.text!==``?X(` `):F?K(L):G();break;case`Escape`:F&&(e.preventDefault(),I(!1));break;case`Tab`:I(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),X(e.key))}};return(0,c.useEffect)(()=>{let e=V.current;return()=>{e.timer&&clearTimeout(e.timer)}},[]),(0,c.useEffect)(()=>{F&&L>=0&&(B.current?.querySelectorAll(`[role="option"]`)?.[L])?.scrollIntoView?.({block:`nearest`})},[L,F]),(0,u.jsx)(o.FieldTemplate,{label:y,labelId:k,htmlFor:O,required:v,error:_,errorId:P,layout:b,className:x,children:(0,u.jsxs)(`div`,{ref:z,className:(0,l.default)(`wim-phone-input`,s.default.root,S&&s.default.fullWidth,g&&s.default.disabled,_&&s.default.danger),"data-testid":`phone-input-root`,...E,children:[(0,u.jsxs)(`div`,{className:s.default.countryWrapper,children:[(0,u.jsxs)(`button`,{type:`button`,role:`combobox`,className:s.default.countryTrigger,onClick:()=>{g||(F?I(!1):G())},onKeyDown:Z,onKeyUp:e=>{e.key===` `&&e.preventDefault()},disabled:g,"aria-haspopup":`listbox`,"aria-expanded":F,"aria-controls":F?M:void 0,"aria-activedescendant":F&&L>=0?N(L):void 0,"aria-label":j,children:[(0,u.jsx)(`span`,{"aria-hidden":`true`,style:{fontSize:`1.2em`},children:H.flag}),(0,u.jsxs)(`span`,{children:[`+`,H.dialCode]}),(0,u.jsx)(i.Icon,{component:r.default,size:`sm`,className:(0,l.default)(s.default.chevron,F&&s.default.chevronOpen)})]}),(0,u.jsx)(n.Transition,{show:F,preset:`fade`,className:s.default.dropdown,children:(0,u.jsx)(`ul`,{ref:B,id:M,className:s.default.countryList,role:`listbox`,"aria-label":j,tabIndex:-1,onMouseDown:e=>e.preventDefault(),children:d.map((e,t)=>(0,u.jsxs)(`li`,{id:N(t),className:(0,l.default)(s.default.countryOption,t===L&&s.default.active,H.code===e.code&&s.default.selected),onMouseEnter:()=>R(t),onClick:()=>K(t),role:`option`,"aria-selected":H.code===e.code,children:[(0,u.jsx)(`span`,{"aria-hidden":`true`,children:e.flag}),(0,u.jsx)(`span`,{className:s.default.countryName,children:q(e)}),` `,(0,u.jsxs)(`span`,{className:s.default.countryCode,children:[`+`,e.dialCode]})]},e.code))})})]}),(0,u.jsx)(`div`,{className:s.default.divider,"aria-hidden":`true`}),(0,u.jsx)(`input`,{id:O,ref:D,type:`tel`,value:e,onChange:U,placeholder:h,disabled:g,className:s.default.number,"aria-invalid":!!_,"aria-label":y?void 0:C,"aria-labelledby":y?void 0:w,"aria-describedby":[T,P].filter(Boolean).join(` `)||void 0})]})})});f.displayName=`PhoneInput`,exports.PHONE_COUNTRIES=d,exports.PhoneInput=f;

package/dist/components/form/PhoneInput/PhoneInput.d.ts

@@ -31,6 +31,12 @@ export type PhoneInputProps = {
     className?: string;
     /** Whether to take full width of parent. */
     fullWidth?: boolean;
+    /** Accessible name for the phone number input when no visible `label` is provided. */
+    "aria-label"?: string;
+    /** ID of the element that labels the phone number input when no visible `label` is provided. */
+    "aria-labelledby"?: string;
+    /** ID of the element that describes the phone number input. Announced together with the error message. */
+    "aria-describedby"?: string;
 };
 /**
  * Component combining a country dial-code selector with a phone number input.