wimui 0.6.0 → 0.7.0

package/dist/components/form/FileUpload/FileUpload.js

@@ -1,62 +1,66 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import { Button as t } from "../Button/Button.js";
-import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
-import r from "./file-upload.module.js";
-import i, { useRef as a, useState as o } from "react";
-import s from "classnames";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { VisuallyHidden as t } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import { Button as n } from "../Button/Button.js";
+import { FieldTemplate as r } from "../FieldTemplate/FieldTemplate.js";
+import i from "./file-upload.module.js";
+import a, { useRef as o, useState as s } from "react";
+import c from "classnames";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/form/FileUpload/FileUpload.tsx
-var u = ({ label: u, buttonLabel: d, noFileLabel: f, accept: p, multiple: m = !1, disabled: h = !1, onChange: g, className: _, iconName: v, iconPosition: y, size: b = "md", error: x, required: S, layout: C = "vertical" }) => {
-	let { t: w } = e("form"), T = `wim-fileupload-${i.useId()}`, E = u ? `${T}-label` : void 0, D = x ? `${T}-error` : void 0, O = a(null), [k, A] = o(null), j = () => {
-		O.current?.click();
-	}, M = (e) => {
+var d = ({ label: d, buttonLabel: f, noFileLabel: p, accept: m, multiple: h = !1, disabled: g = !1, value: _, onChange: v, className: y, iconName: b, iconPosition: x, size: S = "md", error: C, required: w, layout: T = "vertical" }) => {
+	let { t: E } = e("form"), D = `wim-fileupload-${a.useId()}`, O = d ? `${D}-label` : void 0, k = C ? `${D}-error` : void 0, A = w ? `${D}-required` : void 0, j = [k, A].filter(Boolean).join(" ") || void 0, M = o(null), [N, P] = s(null), F = () => {
+		M.current?.click();
+	}, I = (e) => {
 		let t = e.target.files;
-		A(t), g && g(t);
-	}, N = k ? Array.from(k).map((e) => e.name).join(", ") : f ?? w("fileupload.no_file");
-	return /* @__PURE__ */ c(n, {
-		label: u,
-		error: x,
-		required: S,
-		layout: C,
-		labelId: E,
-		errorId: D,
-		className: s("wim-file-upload", r.root, r[b], _),
-		children: /* @__PURE__ */ l("div", {
-			className: r.controls,
+		P(t), v && v(t);
+	}, L = _ === void 0 ? N ? Array.from(N).map((e) => e.name) : [] : _, R = L.length > 0 ? L.join(", ") : p ?? E("fileupload.no_file");
+	return /* @__PURE__ */ l(r, {
+		label: d,
+		error: C,
+		required: w,
+		layout: T,
+		labelId: O,
+		errorId: k,
+		className: c("wim-file-upload", i.root, i[S], y),
+		children: /* @__PURE__ */ u("div", {
+			className: i.controls,
 			children: [
-				/* @__PURE__ */ c("input", {
+				/* @__PURE__ */ l("input", {
 					type: "file",
-					ref: O,
-					accept: p,
-					multiple: m,
-					disabled: h,
-					onChange: M,
-					className: r.input,
+					ref: M,
+					accept: m,
+					multiple: h,
+					disabled: g,
+					onChange: I,
+					className: i.input,
 					"aria-hidden": "true",
 					tabIndex: -1
 				}),
-				/* @__PURE__ */ c(t, {
-					onClick: j,
-					disabled: h,
+				/* @__PURE__ */ l(n, {
+					onClick: F,
+					disabled: g,
 					variant: "outline",
-					icon: v,
-					iconPosition: y,
-					size: b,
-					"aria-labelledby": E,
-					"aria-describedby": D,
-					"aria-required": S,
-					"aria-invalid": x ? !0 : void 0,
-					children: d ?? w("fileupload.button")
+					icon: b,
+					iconPosition: x,
+					size: S,
+					"aria-labelledby": O,
+					"aria-describedby": j,
+					"aria-invalid": C ? !0 : void 0,
+					children: f ?? E("fileupload.button")
 				}),
-				/* @__PURE__ */ c("span", {
-					className: s(r.fileNames, r[b], h && r.disabled),
-					"aria-disabled": h || void 0,
-					children: N
+				w && /* @__PURE__ */ l(t, {
+					id: A,
+					children: E("form.required")
+				}),
+				/* @__PURE__ */ l("span", {
+					className: c(i.fileNames, i[S], g && i.disabled),
+					"aria-disabled": g || void 0,
+					children: R
 				})
 			]
 		})
 	});
 };
 //#endregion
-export { u as FileUpload };
+export { d as FileUpload };

package/dist/components/form/Input/Input.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("../../../i18n/useWimTranslation.cjs"),r=require("../../../hooks/useMergedRef.cjs"),ee=require("../InputBase/InputBase.cjs"),te=require("../FieldTemplate/FieldTemplate.cjs"),i=require("./input.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,a.forwardRef)(({intent:e=`default`,variant:c=`outline`,fullWidth:l=!1,className:u,disabled:d,leftIcon:f,rightIcon:p,leftIconColor:m,rightIconColor:h,onLeftIconClick:g,onRightIconClick:_,allowClear:v=!1,showPasswordToggle:ne=!0,rightIconClassName:re,rightIconRotated:ie,width:ae,value:y,defaultValue:oe,onChange:b,type:x,label:S,error:C,required:w,layout:T,id:E,inputClassName:D,showPasswordAriaLabel:O,hidePasswordAriaLabel:k,rightIconAriaLabel:A,styles:j,asChild:M=!1,children:N,...P},F)=>{let{t:I}=n.useWimTranslation(`common`),se=O??I(`a11y.show_password`),L=k??I(`a11y.hide_password`),R=A??I(`a11y.right_icon_action`),[z,B]=(0,a.useState)(oe??``),[V,H]=(0,a.useState)(!1),U=(0,a.useRef)(null),W=r.useMergedRef(F,U),G=y!==void 0,K=G?y:z,q=d,ce=e=>{G||B(e.target.value),b?.(e)},le=()=>{let e=U.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;t?(t.call(e,``),e.dispatchEvent(new Event(`input`,{bubbles:!0}))):(G||B(``),b&&(e.value=``,b({target:e,currentTarget:e}))),G||B(``)},ue=()=>{H(e=>!e)},de=x===`password`&&ne,J=[];de&&J.push({name:V?`EyeOffIcon`:`EyeIcon`,onClick:e=>ue(),ariaLabel:V?L:se}),p&&(J.some(e=>e.name===p)||J.push({name:p,onClick:_,color:h,ariaLabel:R,className:re,rotated:ie}));let fe=x===`password`&&V?`text`:x,Y=C?`danger`:e,X=(0,a.useId)(),Z=E||`wim-input-${X}`,Q=C?`${Z}-error`:void 0,$=S?`${Z}-label`:void 0;return(0,s.jsx)(te.FieldTemplate,{label:S,error:C,required:w,layout:T,labelId:$,htmlFor:Z,errorId:Q,className:u,children:(0,s.jsx)(ee.InputBase,{intent:Y,variant:c,fullWidth:l,width:ae,disabled:q,leftIcon:f,leftIconColor:m,onLeftIconClick:g,rightIcons:J,allowClear:v,hasValue:!!K,onClear:le,styles:j,children:(0,s.jsx)(M?t.Root:`input`,{id:Z,ref:W,className:(0,o.default)(`wim-input`,i.default.root,i.default[Y],q&&i.default.disabled,i.default[c],D),disabled:q,value:K,onChange:ce,type:fe,"aria-invalid":Y===`danger`,"aria-describedby":Q,"aria-labelledby":S?$:void 0,"aria-required":w,...P,children:M?(0,s.jsx)(t.Slottable,{children:N}):null})})})});c.displayName=`Input`,exports.Input=c,exports.default=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),ee=require("../../../hooks/useMergedRef.cjs"),te=require("../InputBase/InputBase.cjs"),ne=require("../FieldTemplate/FieldTemplate.cjs"),r=require("./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=(0,i.forwardRef)(({intent:e=`default`,variant:s=`outline`,fullWidth:c=!1,className:re,disabled:ie,leftIcon:ae,rightIcon:l,leftIconColor:oe,rightIconColor:se,onLeftIconClick:u,onRightIconClick:d,allowClear:f=!1,showPasswordToggle:p=!0,rightIconClassName:m,rightIconRotated:ce,width:h,value:g,defaultValue:le,onChange:_,type:v,label:y,error:b,required:x,layout:S,id:C,inputClassName:w,showPasswordAriaLabel:T,hidePasswordAriaLabel:E,rightIconAriaLabel:D,suffix:O,styles:k,asChild:A=!1,children:j,...M},N)=>{let{t:P}=n.useWimTranslation(`common`),F=T??P(`a11y.show_password`),I=E??P(`a11y.hide_password`),L=D??P(`a11y.right_icon_action`),[R,z]=(0,i.useState)(le??``),[B,V]=(0,i.useState)(!1),H=(0,i.useRef)(null),U=ee.useMergedRef(N,H),W=g!==void 0,G=W?g:R,K=ie,ue=e=>{W||z(e.target.value),_?.(e)},de=()=>{let e=H.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;t?(t.call(e,``),e.dispatchEvent(new Event(`input`,{bubbles:!0}))):(W||z(``),_&&(e.value=``,_({target:e,currentTarget:e}))),W||z(``)},q=()=>{V(e=>!e)},fe=v===`password`&&p,J=[];fe&&J.push({name:B?`EyeOffIcon`:`EyeIcon`,onClick:e=>q(),ariaLabel:B?I:F}),l&&(J.some(e=>e.name===l)||J.push({name:l,onClick:d,color:se,ariaLabel:L,className:m,rotated:ce}));let pe=v===`password`&&B?`text`:v,Y=b?`danger`:e,me=(0,i.useId)(),X=C||`wim-input-${me}`,Z=b?`${X}-error`:void 0,Q=O!=null&&O!==``?`${X}-suffix`:void 0,he=[Z,Q].filter(Boolean).join(` `)||void 0,$=y?`${X}-label`:void 0;return(0,o.jsx)(ne.FieldTemplate,{label:y,error:b,required:x,layout:S,labelId:$,htmlFor:X,errorId:Z,className:re,children:(0,o.jsx)(te.InputBase,{intent:Y,variant:s,fullWidth:c,width:h,disabled:K,leftIcon:ae,leftIconColor:oe,onLeftIconClick:u,rightIcons:J,suffix:O,suffixId:Q,allowClear:f,hasValue:!!G,onClear:de,styles:k,children:(0,o.jsx)(A?t.Root:`input`,{id:X,ref:U,className:(0,a.default)(`wim-input`,r.default.root,r.default[Y],K&&r.default.disabled,r.default[s],w),disabled:K,value:G,onChange:ue,type:pe,"aria-invalid":Y===`danger`,"aria-describedby":he,"aria-labelledby":y?$:void 0,"aria-required":x,...M,children:A?(0,o.jsx)(t.Slottable,{children:j}):null})})})});s.displayName=`Input`,exports.Input=s,exports.default=s;

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

@@ -47,6 +47,12 @@ export interface InputProps extends Omit<React.ComponentPropsWithoutRef<"input">
     hidePasswordAriaLabel?: string;
     /** Aria label for the right icon button */
     rightIconAriaLabel?: string;
+    /**
+     * Static text shown after the field, inside the same shell — a unit such as
+     * `kg`, `%` or `円`. It is announced with the field via `aria-describedby`,
+     * so the unit does not have to be repeated in the label.
+     */
+    suffix?: React.ReactNode;
     /** Custom styles for internal parts */
     styles?: React.ComponentProps<typeof InputBase>["styles"];
     /** Whether to render as a child element. */

package/dist/components/form/Input/Input.js

@@ -1,78 +1,80 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { useWimTranslation as ee } from "../../../i18n/useWimTranslation.js";
-import { useMergedRef as n } from "../../../hooks/useMergedRef.js";
-import { InputBase as r } from "../InputBase/InputBase.js";
-import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
-import a from "./input.module.js";
-import { forwardRef as o, useId as s, useRef as c, useState as l } from "react";
+import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
+import { useMergedRef as r } from "../../../hooks/useMergedRef.js";
+import { InputBase as i } from "../InputBase/InputBase.js";
+import { FieldTemplate as a } from "../FieldTemplate/FieldTemplate.js";
+import o from "./input.module.js";
+import { forwardRef as s, useId as ee, useRef as c, useState as l } from "react";
 import u from "classnames";
 import { jsx as d } from "react/jsx-runtime";
 //#region src/components/form/Input/Input.tsx
-var f = o(({ intent: o = "default", variant: f = "outline", fullWidth: te = !1, className: ne, disabled: re, leftIcon: ie, rightIcon: p, leftIconColor: m, rightIconColor: h, onLeftIconClick: ae, onRightIconClick: g, allowClear: _ = !1, showPasswordToggle: v = !0, rightIconClassName: y, rightIconRotated: oe, width: se, value: b, defaultValue: x, onChange: S, type: C, label: w, error: T, required: E, layout: D, id: O, inputClassName: k, showPasswordAriaLabel: A, hidePasswordAriaLabel: j, rightIconAriaLabel: M, styles: N, asChild: P = !1, children: F, ...I }, L) => {
-	let { t: R } = ee("common"), z = A ?? R("a11y.show_password"), ce = j ?? R("a11y.hide_password"), B = M ?? R("a11y.right_icon_action"), [V, H] = l(x ?? ""), [U, W] = l(!1), G = c(null), le = n(L, G), K = b !== void 0, q = K ? b : V, J = re, ue = (e) => {
-		K || H(e.target.value), S?.(e);
-	}, de = () => {
-		let e = G.current;
+var f = s(({ intent: s = "default", variant: f = "outline", fullWidth: p = !1, className: m, disabled: h, leftIcon: g, rightIcon: _, leftIconColor: te, rightIconColor: ne, onLeftIconClick: re, onRightIconClick: ie, allowClear: ae = !1, showPasswordToggle: oe = !0, rightIconClassName: se, rightIconRotated: ce, width: le, value: v, defaultValue: ue, onChange: y, type: b, label: x, error: S, required: C, layout: w, id: T, inputClassName: E, showPasswordAriaLabel: D, hidePasswordAriaLabel: O, rightIconAriaLabel: k, suffix: A, styles: j, asChild: M = !1, children: N, ...P }, F) => {
+	let { t: I } = n("common"), L = D ?? I("a11y.show_password"), R = O ?? I("a11y.hide_password"), de = k ?? I("a11y.right_icon_action"), [z, B] = l(ue ?? ""), [V, H] = l(!1), U = c(null), fe = r(F, U), W = v !== void 0, G = W ? v : z, K = h, pe = (e) => {
+		W || B(e.target.value), y?.(e);
+	}, me = () => {
+		let e = U.current;
 		if (!e) return;
 		let t = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-		t ? (t.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 }))) : (K || H(""), S && (e.value = "", S({
+		t ? (t.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 }))) : (W || B(""), y && (e.value = "", y({
 			target: e,
 			currentTarget: e
-		}))), K || H("");
-	}, fe = () => {
-		W((e) => !e);
-	}, pe = C === "password" && v, Y = [];
-	pe && Y.push({
-		name: U ? "EyeOffIcon" : "EyeIcon",
-		onClick: (e) => fe(),
-		ariaLabel: U ? ce : z
-	}), p && (Y.some((e) => e.name === p) || Y.push({
-		name: p,
-		onClick: g,
-		color: h,
-		ariaLabel: B,
-		className: y,
-		rotated: oe
+		}))), W || B("");
+	}, he = () => {
+		H((e) => !e);
+	}, ge = b === "password" && oe, q = [];
+	ge && q.push({
+		name: V ? "EyeOffIcon" : "EyeIcon",
+		onClick: (e) => he(),
+		ariaLabel: V ? R : L
+	}), _ && (q.some((e) => e.name === _) || q.push({
+		name: _,
+		onClick: ie,
+		color: ne,
+		ariaLabel: de,
+		className: se,
+		rotated: ce
 	}));
-	let me = C === "password" && U ? "text" : C, X = T ? "danger" : o, he = s(), Z = O || `wim-input-${he}`, Q = T ? `${Z}-error` : void 0, $ = w ? `${Z}-label` : void 0;
-	return /* @__PURE__ */ d(i, {
-		label: w,
-		error: T,
-		required: E,
-		layout: D,
+	let _e = b === "password" && V ? "text" : b, J = S ? "danger" : s, Y = ee(), X = T || `wim-input-${Y}`, Z = S ? `${X}-error` : void 0, Q = A != null && A !== "" ? `${X}-suffix` : void 0, ve = [Z, Q].filter(Boolean).join(" ") || void 0, $ = x ? `${X}-label` : void 0;
+	return /* @__PURE__ */ d(a, {
+		label: x,
+		error: S,
+		required: C,
+		layout: w,
 		labelId: $,
-		htmlFor: Z,
-		errorId: Q,
-		className: ne,
-		children: /* @__PURE__ */ d(r, {
-			intent: X,
+		htmlFor: X,
+		errorId: Z,
+		className: m,
+		children: /* @__PURE__ */ d(i, {
+			intent: J,
 			variant: f,
-			fullWidth: te,
-			width: se,
-			disabled: J,
-			leftIcon: ie,
-			leftIconColor: m,
-			onLeftIconClick: ae,
-			rightIcons: Y,
-			allowClear: _,
-			hasValue: !!q,
-			onClear: de,
-			styles: N,
-			children: /* @__PURE__ */ d(P ? e : "input", {
-				id: Z,
-				ref: le,
-				className: u("wim-input", a.root, a[X], J && a.disabled, a[f], k),
-				disabled: J,
-				value: q,
-				onChange: ue,
-				type: me,
-				"aria-invalid": X === "danger",
-				"aria-describedby": Q,
-				"aria-labelledby": w ? $ : void 0,
-				"aria-required": E,
-				...I,
-				children: P ? /* @__PURE__ */ d(t, { children: F }) : null
+			fullWidth: p,
+			width: le,
+			disabled: K,
+			leftIcon: g,
+			leftIconColor: te,
+			onLeftIconClick: re,
+			rightIcons: q,
+			suffix: A,
+			suffixId: Q,
+			allowClear: ae,
+			hasValue: !!G,
+			onClear: me,
+			styles: j,
+			children: /* @__PURE__ */ d(M ? e : "input", {
+				id: X,
+				ref: fe,
+				className: u("wim-input", o.root, o[J], K && o.disabled, o[f], E),
+				disabled: K,
+				value: G,
+				onChange: pe,
+				type: _e,
+				"aria-invalid": J === "danger",
+				"aria-describedby": ve,
+				"aria-labelledby": x ? $ : void 0,
+				"aria-required": C,
+				...P,
+				children: M ? /* @__PURE__ */ d(t, { children: N }) : null
 			})
 		})
 	});

package/dist/components/form/InputBase/InputBase.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("./input-base.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=({children:e,intent:s=`default`,variant:c=`outline`,fullWidth:l=!1,width:u,className:d,disabled:f,leftIcon:p,leftIconColor:m,onLeftIconClick:h,leftIconAriaLabel:g,rightIcons:_=[],allowClear:v,hasValue:y,onClear:b,clearAriaLabel:x,styles:S})=>{let{t:C}=t.useWimTranslation(`common`),w=g??C(`a11y.left_icon_action`),T=x??C(`a11y.clear_input`),E=typeof u==`string`&&[`xs`,`sm`,`md`,`lg`,`xl`].includes(u),D=i.default.Children.map(e,e=>i.default.isValidElement(e)?i.default.cloneElement(e,{disabled:f?!0:e.props.disabled,className:(0,a.default)(e.props.className,r.default.inner,S?.inner)}):e),O=u!==void 0&&!E&&!l,k=E&&!l?u:void 0,A=e=>f?`disabled`:e||(s===`danger`?`danger`:s===`warning`?`warning`:s===`success`?`success`:`secondary`),j=[..._];v&&y&&!f&&j.push({name:`CloseIcon`,onClick:e=>{e.stopPropagation(),b?.()},ariaLabel:T});let M=k?r.default[`width${k.charAt(0).toUpperCase()}${k.slice(1)}`]:void 0;return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-input-base`,r.default.root,s&&r.default[s],f&&r.default.disabled,r.default[c],l&&r.default.fullWidth,O&&r.default.hasCustomWidth,M,p&&r.default.hasLeftIcon,(j.length>0||v)&&r.default.hasRightIcon,(j.length>=2||_.length>=1&&v)&&r.default.hasMultipleRightIcons,d,S?.root),style:O?{"--wim-input-width":typeof u==`number`?`${u}px`:u}:void 0,children:[p&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icon,r.default.left,h&&r.default.clickable,S?.icon),children:h?(0,o.jsx)(`button`,{type:`button`,onClick:h,className:(0,a.default)(r.default.iconButton,S?.iconButton),"aria-label":w,children:(0,o.jsx)(n.Icon,{name:p,size:`md`,color:A(m)})}):(0,o.jsx)(n.Icon,{name:p,size:`md`,color:A(m)})}),D,j.length>0&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icons,r.default.right,S?.icons),children:j.map((e,t)=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.iconItem,e.onClick&&r.default.clickable,e.rotated&&r.default.rotated,e.className,S?.iconItem),children:e.onClick?(0,o.jsx)(`button`,{type:`button`,onClick:e.onClick,className:(0,a.default)(r.default.iconButton,S?.iconButton),"aria-label":e.ariaLabel??C(`a11y.right_icon_action`),children:(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:A(e.color)})}):(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:A(e.color)})},`${e.name}-${t}`))})]})};exports.InputBase=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("./input-base.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=({children:e,intent:s=`default`,variant:c=`outline`,fullWidth:l=!1,width:u,className:d,disabled:f,leftIcon:p,leftIconColor:m,onLeftIconClick:h,leftIconAriaLabel:g,rightIcons:_=[],suffix:v,suffixId:y,allowClear:b,hasValue:x,onClear:S,clearAriaLabel:C,styles:w})=>{let{t:T}=t.useWimTranslation(`common`),E=g??T(`a11y.left_icon_action`),D=C??T(`a11y.clear_input`),O=typeof u==`string`&&[`xs`,`sm`,`md`,`lg`,`xl`].includes(u),k=i.default.Children.map(e,e=>i.default.isValidElement(e)?i.default.cloneElement(e,{disabled:f?!0:e.props.disabled,className:(0,a.default)(e.props.className,r.default.inner,w?.inner)}):e),A=u!==void 0&&!O&&!l,j=O&&!l?u:void 0,M=e=>f?`disabled`:e||(s===`danger`?`danger`:s===`warning`?`warning`:s===`success`?`success`:`secondary`),N=[..._];b&&x&&!f&&N.push({name:`CloseIcon`,onClick:e=>{e.stopPropagation(),S?.()},ariaLabel:D});let P=j?r.default[`width${j.charAt(0).toUpperCase()}${j.slice(1)}`]:void 0;return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-input-base`,r.default.root,s&&r.default[s],f&&r.default.disabled,r.default[c],l&&r.default.fullWidth,A&&r.default.hasCustomWidth,P,p&&r.default.hasLeftIcon,(N.length>0||b)&&r.default.hasRightIcon,(N.length>=2||_.length>=1&&b)&&r.default.hasMultipleRightIcons,d,w?.root),style:A?{"--wim-input-width":typeof u==`number`?`${u}px`:u}:void 0,children:[p&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icon,r.default.left,h&&r.default.clickable,w?.icon),children:h?(0,o.jsx)(`button`,{type:`button`,onClick:h,className:(0,a.default)(r.default.iconButton,w?.iconButton),"aria-label":E,children:(0,o.jsx)(n.Icon,{name:p,size:`md`,color:M(m)})}):(0,o.jsx)(n.Icon,{name:p,size:`md`,color:M(m)})}),k,v!=null&&v!==``&&(0,o.jsx)(`span`,{id:y,className:(0,a.default)(r.default.suffix,N.length>0&&r.default.suffixClearsIcons),"data-testid":`input-suffix`,children:v}),N.length>0&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icons,r.default.right,w?.icons),children:N.map((e,t)=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.iconItem,e.onClick&&r.default.clickable,e.rotated&&r.default.rotated,e.className,w?.iconItem),children:e.onClick?(0,o.jsx)(`button`,{type:`button`,onClick:e.onClick,className:(0,a.default)(r.default.iconButton,w?.iconButton),"aria-label":e.ariaLabel??T(`a11y.right_icon_action`),children:(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:M(e.color)})}):(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:M(e.color)})},`${e.name}-${t}`))})]})};exports.InputBase=s;

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

@@ -35,6 +35,14 @@ export type InputBaseProps = {
     leftIconAriaLabel?: string;
     /** Icons to display on the right side */
     rightIcons?: InputBaseIcon[];
+    /**
+     * Static text shown after the control, inside the same shell — a unit such
+     * as `kg`, `%` or `円`. It sits in the flex flow, so the control shrinks to
+     * make room rather than running underneath it.
+     */
+    suffix?: React.ReactNode;
+    /** `id` for the suffix, so the control can point `aria-describedby` at it */
+    suffixId?: string;
     /** Whether to show a clear button when value is present */
     allowClear?: boolean;
     /** Whether the field currently has a value (controls clear button visibility) */
@@ -57,4 +65,4 @@ export type InputBaseProps = {
  * フォーム入力コンポーネント（Input, SearchInput, Select等）の外殻となる共用語コンポーネント。
  * prefix/suffix（アイコン）や clearable（クリアボタン）の配置とレイアウトを統一します。
  */
-export declare const InputBase: ({ children, intent, variant, fullWidth, width, className, disabled: isDisabled, leftIcon, leftIconColor, onLeftIconClick, leftIconAriaLabel, rightIcons, allowClear, hasValue, onClear, clearAriaLabel, styles: stylesProp, }: InputBaseProps) => React.JSX.Element;
+export declare const InputBase: ({ children, intent, variant, fullWidth, width, className, disabled: isDisabled, leftIcon, leftIconColor, onLeftIconClick, leftIconAriaLabel, rightIcons, suffix, suffixId, allowClear, hasValue, onClear, clearAriaLabel, styles: stylesProp, }: InputBaseProps) => React.JSX.Element;

package/dist/components/form/InputBase/InputBase.js

@@ -6,66 +6,72 @@ import r from "react";
 import i from "classnames";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/form/InputBase/InputBase.tsx
-var s = ({ children: s, intent: c = "default", variant: l = "outline", fullWidth: u = !1, width: d, className: f, disabled: p, leftIcon: m, leftIconColor: h, onLeftIconClick: g, leftIconAriaLabel: _, rightIcons: v = [], allowClear: y, hasValue: b, onClear: x, clearAriaLabel: S, styles: C }) => {
-	let { t: w } = e("common"), T = _ ?? w("a11y.left_icon_action"), E = S ?? w("a11y.clear_input"), D = typeof d == "string" && [
+var s = ({ children: s, intent: c = "default", variant: l = "outline", fullWidth: u = !1, width: d, className: f, disabled: p, leftIcon: m, leftIconColor: h, onLeftIconClick: g, leftIconAriaLabel: _, rightIcons: v = [], suffix: y, suffixId: b, allowClear: x, hasValue: S, onClear: C, clearAriaLabel: w, styles: T }) => {
+	let { t: E } = e("common"), D = _ ?? E("a11y.left_icon_action"), O = w ?? E("a11y.clear_input"), k = typeof d == "string" && [
 		"xs",
 		"sm",
 		"md",
 		"lg",
 		"xl"
-	].includes(d), O = r.Children.map(s, (e) => r.isValidElement(e) ? r.cloneElement(e, {
+	].includes(d), A = r.Children.map(s, (e) => r.isValidElement(e) ? r.cloneElement(e, {
 		disabled: p ? !0 : e.props.disabled,
-		className: i(e.props.className, n.inner, C?.inner)
-	}) : e), k = d !== void 0 && !D && !u, A = D && !u ? d : void 0, j = (e) => p ? "disabled" : e || (c === "danger" ? "danger" : c === "warning" ? "warning" : c === "success" ? "success" : "secondary"), M = [...v];
-	y && b && !p && M.push({
+		className: i(e.props.className, n.inner, T?.inner)
+	}) : e), j = d !== void 0 && !k && !u, M = k && !u ? d : void 0, N = (e) => p ? "disabled" : e || (c === "danger" ? "danger" : c === "warning" ? "warning" : c === "success" ? "success" : "secondary"), P = [...v];
+	x && S && !p && P.push({
 		name: "CloseIcon",
 		onClick: (e) => {
-			e.stopPropagation(), x?.();
+			e.stopPropagation(), C?.();
 		},
-		ariaLabel: E
+		ariaLabel: O
 	});
-	let N = A ? n[`width${A.charAt(0).toUpperCase()}${A.slice(1)}`] : void 0;
+	let F = M ? n[`width${M.charAt(0).toUpperCase()}${M.slice(1)}`] : void 0;
 	return /* @__PURE__ */ o("div", {
-		className: i("wim-input-base", n.root, c && n[c], p && n.disabled, n[l], u && n.fullWidth, k && n.hasCustomWidth, N, m && n.hasLeftIcon, (M.length > 0 || y) && n.hasRightIcon, (M.length >= 2 || v.length >= 1 && y) && n.hasMultipleRightIcons, f, C?.root),
-		style: k ? { "--wim-input-width": typeof d == "number" ? `${d}px` : d } : void 0,
+		className: i("wim-input-base", n.root, c && n[c], p && n.disabled, n[l], u && n.fullWidth, j && n.hasCustomWidth, F, m && n.hasLeftIcon, (P.length > 0 || x) && n.hasRightIcon, (P.length >= 2 || v.length >= 1 && x) && n.hasMultipleRightIcons, f, T?.root),
+		style: j ? { "--wim-input-width": typeof d == "number" ? `${d}px` : d } : void 0,
 		children: [
 			m && /* @__PURE__ */ a("div", {
-				className: i(n.icon, n.left, g && n.clickable, C?.icon),
+				className: i(n.icon, n.left, g && n.clickable, T?.icon),
 				children: g ? /* @__PURE__ */ a("button", {
 					type: "button",
 					onClick: g,
-					className: i(n.iconButton, C?.iconButton),
-					"aria-label": T,
+					className: i(n.iconButton, T?.iconButton),
+					"aria-label": D,
 					children: /* @__PURE__ */ a(t, {
 						name: m,
 						size: "md",
-						color: j(h)
+						color: N(h)
 					})
 				}) : /* @__PURE__ */ a(t, {
 					name: m,
 					size: "md",
-					color: j(h)
+					color: N(h)
 				})
 			}),
-			O,
-			M.length > 0 && /* @__PURE__ */ a("div", {
-				className: i(n.icons, n.right, C?.icons),
-				children: M.map((e, r) => /* @__PURE__ */ a("div", {
-					className: i(n.iconItem, e.onClick && n.clickable, e.rotated && n.rotated, e.className, C?.iconItem),
+			A,
+			y != null && y !== "" && /* @__PURE__ */ a("span", {
+				id: b,
+				className: i(n.suffix, P.length > 0 && n.suffixClearsIcons),
+				"data-testid": "input-suffix",
+				children: y
+			}),
+			P.length > 0 && /* @__PURE__ */ a("div", {
+				className: i(n.icons, n.right, T?.icons),
+				children: P.map((e, r) => /* @__PURE__ */ a("div", {
+					className: i(n.iconItem, e.onClick && n.clickable, e.rotated && n.rotated, e.className, T?.iconItem),
 					children: e.onClick ? /* @__PURE__ */ a("button", {
 						type: "button",
 						onClick: e.onClick,
-						className: i(n.iconButton, C?.iconButton),
-						"aria-label": e.ariaLabel ?? w("a11y.right_icon_action"),
+						className: i(n.iconButton, T?.iconButton),
+						"aria-label": e.ariaLabel ?? E("a11y.right_icon_action"),
 						children: /* @__PURE__ */ a(t, {
 							name: e.name,
 							size: "md",
-							color: j(e.color)
+							color: N(e.color)
 						})
 					}) : /* @__PURE__ */ a(t, {
 						name: e.name,
 						size: "md",
-						color: j(e.color)
+						color: N(e.color)
 					})
 				}, `${e.name}-${r}`))
 			})

package/dist/components/form/InputBase/input-base.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_m3clw_16`,t=`_ghost_m3clw_32`,n=`_disabled_m3clw_36`,r=`_icon_m3clw_45`,i=`_iconItem_m3clw_45`,a=`_danger_m3clw_7`,o=`_warning_m3clw_61`,s=`_success_m3clw_64`,c=`_hasLeftIcon_m3clw_83`,l=`_hasRightIcon_m3clw_86`,u=`_hasMultipleRightIcons_m3clw_89`,d=`_widthXs_m3clw_92`,f=`_widthSm_m3clw_95`,p=`_widthMd_m3clw_98`,m=`_widthLg_m3clw_101`,h=`_widthXl_m3clw_104`,g=`_hasCustomWidth_m3clw_107`,_=`_fullWidth_m3clw_112`,v=`_clickable_m3clw_128`,y=`_left_m3clw_131`,b=`_icons_m3clw_134`,x=`_right_m3clw_145`,S=`_rotated_m3clw_157`,C=`_iconButton_m3clw_160`,w=`_inner_m3clw_178`,T={root:e,ghost:t,disabled:n,icon:r,iconItem:i,danger:a,warning:o,success:s,hasLeftIcon:c,hasRightIcon:l,hasMultipleRightIcons:u,widthXs:d,widthSm:f,widthMd:p,widthLg:m,widthXl:h,hasCustomWidth:g,fullWidth:_,clickable:v,left:y,icons:b,right:x,rotated:S,iconButton:C,inner:w};exports.clickable=v,exports.danger=a,exports.default=T,exports.disabled=n,exports.fullWidth=_,exports.ghost=t,exports.hasCustomWidth=g,exports.hasLeftIcon=c,exports.hasMultipleRightIcons=u,exports.hasRightIcon=l,exports.icon=r,exports.iconButton=C,exports.iconItem=i,exports.icons=b,exports.inner=w,exports.left=y,exports.right=x,exports.root=e,exports.rotated=S,exports.success=s,exports.warning=o,exports.widthLg=m,exports.widthMd=p,exports.widthSm=f,exports.widthXl=h,exports.widthXs=d;
+var e=`_root_mrju8_16`,t=`_ghost_mrju8_32`,n=`_disabled_mrju8_36`,r=`_icon_mrju8_45`,i=`_iconItem_mrju8_45`,a=`_danger_mrju8_7`,o=`_warning_mrju8_61`,s=`_success_mrju8_64`,c=`_hasLeftIcon_mrju8_83`,l=`_hasRightIcon_mrju8_86`,u=`_hasMultipleRightIcons_mrju8_89`,d=`_widthXs_mrju8_92`,f=`_widthSm_mrju8_95`,p=`_widthMd_mrju8_98`,m=`_widthLg_mrju8_101`,h=`_widthXl_mrju8_104`,g=`_hasCustomWidth_mrju8_107`,_=`_fullWidth_mrju8_112`,v=`_clickable_mrju8_128`,y=`_left_mrju8_131`,b=`_suffix_mrju8_134`,x=`_suffixClearsIcons_mrju8_142`,S=`_icons_mrju8_145`,C=`_right_mrju8_156`,w=`_rotated_mrju8_168`,T=`_iconButton_mrju8_171`,E=`_inner_mrju8_189`,D={root:e,ghost:t,disabled:n,icon:r,iconItem:i,danger:a,warning:o,success:s,hasLeftIcon:c,hasRightIcon:l,hasMultipleRightIcons:u,widthXs:d,widthSm:f,widthMd:p,widthLg:m,widthXl:h,hasCustomWidth:g,fullWidth:_,clickable:v,left:y,suffix:b,suffixClearsIcons:x,icons:S,right:C,rotated:w,iconButton:T,inner:E};exports.clickable=v,exports.danger=a,exports.default=D,exports.disabled=n,exports.fullWidth=_,exports.ghost=t,exports.hasCustomWidth=g,exports.hasLeftIcon=c,exports.hasMultipleRightIcons=u,exports.hasRightIcon=l,exports.icon=r,exports.iconButton=T,exports.iconItem=i,exports.icons=S,exports.inner=E,exports.left=y,exports.right=C,exports.root=e,exports.rotated=w,exports.success=s,exports.suffix=b,exports.suffixClearsIcons=x,exports.warning=o,exports.widthLg=m,exports.widthMd=p,exports.widthSm=f,exports.widthXl=h,exports.widthXs=d;

package/dist/components/form/InputBase/input-base.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/InputBase/input-base.module.scss
-var e = "_root_m3clw_16", t = "_ghost_m3clw_32", n = "_disabled_m3clw_36", r = "_icon_m3clw_45", i = "_iconItem_m3clw_45", a = "_danger_m3clw_7", o = "_warning_m3clw_61", s = "_success_m3clw_64", c = "_hasLeftIcon_m3clw_83", l = "_hasRightIcon_m3clw_86", u = "_hasMultipleRightIcons_m3clw_89", d = "_widthXs_m3clw_92", f = "_widthSm_m3clw_95", p = "_widthMd_m3clw_98", m = "_widthLg_m3clw_101", h = "_widthXl_m3clw_104", g = "_hasCustomWidth_m3clw_107", _ = "_fullWidth_m3clw_112", v = "_clickable_m3clw_128", y = "_left_m3clw_131", b = "_icons_m3clw_134", x = "_right_m3clw_145", S = "_rotated_m3clw_157", C = "_iconButton_m3clw_160", w = "_inner_m3clw_178", T = {
+var e = "_root_mrju8_16", t = "_ghost_mrju8_32", n = "_disabled_mrju8_36", r = "_icon_mrju8_45", i = "_iconItem_mrju8_45", a = "_danger_mrju8_7", o = "_warning_mrju8_61", s = "_success_mrju8_64", c = "_hasLeftIcon_mrju8_83", l = "_hasRightIcon_mrju8_86", u = "_hasMultipleRightIcons_mrju8_89", d = "_widthXs_mrju8_92", f = "_widthSm_mrju8_95", p = "_widthMd_mrju8_98", m = "_widthLg_mrju8_101", h = "_widthXl_mrju8_104", g = "_hasCustomWidth_mrju8_107", _ = "_fullWidth_mrju8_112", v = "_clickable_mrju8_128", y = "_left_mrju8_131", b = "_suffix_mrju8_134", x = "_suffixClearsIcons_mrju8_142", S = "_icons_mrju8_145", C = "_right_mrju8_156", w = "_rotated_mrju8_168", T = "_iconButton_mrju8_171", E = "_inner_mrju8_189", D = {
 	root: e,
 	ghost: t,
 	disabled: n,
@@ -21,11 +21,13 @@ var e = "_root_m3clw_16", t = "_ghost_m3clw_32", n = "_disabled_m3clw_36", r = "
 	fullWidth: _,
 	clickable: v,
 	left: y,
-	icons: b,
-	right: x,
-	rotated: S,
-	iconButton: C,
-	inner: w
+	suffix: b,
+	suffixClearsIcons: x,
+	icons: S,
+	right: C,
+	rotated: w,
+	iconButton: T,
+	inner: E
 };
 //#endregion
-export { v as clickable, a as danger, T as default, n as disabled, _ as fullWidth, t as ghost, g as hasCustomWidth, c as hasLeftIcon, u as hasMultipleRightIcons, l as hasRightIcon, r as icon, C as iconButton, i as iconItem, b as icons, w as inner, y as left, x as right, e as root, S as rotated, s as success, o as warning, m as widthLg, p as widthMd, f as widthSm, h as widthXl, d as widthXs };
+export { v as clickable, a as danger, D as default, n as disabled, _ as fullWidth, t as ghost, g as hasCustomWidth, c as hasLeftIcon, u as hasMultipleRightIcons, l as hasRightIcon, r as icon, T as iconButton, i as iconItem, S as icons, E as inner, y as left, C as right, e as root, w as rotated, s as success, b as suffix, x as suffixClearsIcons, o as warning, m as widthLg, p as widthMd, f as widthSm, h as widthXl, d as widthXs };

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

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

@@ -1,6 +1,17 @@
 import { default as React } from 'react';
 export type OtpInputLabels = {
-    digitAriaLabel?: (index: number) => string;
+    /**
+     * Accessible name for one digit box.
+     *
+     * `position` is **1-based**: the first box is `1`, and the last is `length`.
+     * It is meant to be read aloud ("Digit 3 of 6"), so it counts the way a person
+     * would. Treating it as a 0-based index and adding one yields "Digit 2" for the
+     * first box.
+     *
+     * @param position 1-based position of the box, from `1` to `length`
+     * @default (position) => `Digit ${position}`
+     */
+    digitAriaLabel?: (position: number) => string;
 };
 export interface OtpInputProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "value" | "defaultValue"> {
     /** Number of digits */
@@ -19,7 +30,10 @@ export interface OtpInputProps extends Omit<React.ComponentPropsWithoutRef<"div"
     label?: React.ReactNode;
     /** Layout direction of label and field */
     layout?: "vertical" | "horizontal";
-    /** Labels for internationalization */
+    /**
+     * Labels for internationalization. `digitAriaLabel(position)` names one digit
+     * box and receives a **1-based** position — the first box is `1`, not `0`.
+     */
     labels?: OtpInputLabels;
     /** Whether to render as a child element. */
     asChild?: boolean;