wimui 0.6.0 → 0.6.1

package/dist/components/_internal/FeedbackIcon.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../icon/check.cjs"),n=require("../../icon/circle.cjs"),r=require("../media/Icon/Icon.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=({intent:e=`info`,icon:o,size:s=`sm`,className:c,color:l})=>{if(o&&i.default.isValidElement(o))return(0,a.jsx)(a.Fragment,{children:o});if(o===!1)return null;switch(e){case`success`:return(0,a.jsx)(r.Icon,{component:t.default,size:s,className:c,color:l});default:return(0,a.jsx)(r.Icon,{component:n.default,size:s,className:c,color:l})}};exports.FeedbackIcon=o;
+const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../icon/alert-circle.cjs"),n=require("../../icon/check.cjs"),r=require("../../icon/circle.cjs"),i=require("../../icon/info-circle.cjs"),a=require("../media/Icon/Icon.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({intent:e=`info`,icon:t,size:n=`sm`,className:i,color:c})=>t&&o.default.isValidElement(t)?(0,s.jsx)(s.Fragment,{children:t}):t===!1?null:(0,s.jsx)(a.Icon,{component:l[e]??r.default,size:n,className:i,color:c}),l={success:n.default,danger:t.default,warning:t.default,info:i.default};exports.FeedbackIcon=c;

package/dist/components/_internal/FeedbackIcon.js

@@ -1,27 +1,22 @@
 "use client";
-import e from "../../icon/check.js";
-import t from "../../icon/circle.js";
-import { Icon as n } from "../media/Icon/Icon.js";
-import r from "react";
-import { Fragment as i, jsx as a } from "react/jsx-runtime";
+import e from "../../icon/alert-circle.js";
+import t from "../../icon/check.js";
+import n from "../../icon/circle.js";
+import r from "../../icon/info-circle.js";
+import { Icon as i } from "../media/Icon/Icon.js";
+import a from "react";
+import { Fragment as o, jsx as s } from "react/jsx-runtime";
 //#region src/components/_internal/FeedbackIcon.tsx
-var o = ({ intent: o = "info", icon: s, size: c = "sm", className: l, color: u }) => {
-	if (s && r.isValidElement(s)) return /* @__PURE__ */ a(i, { children: s });
-	if (s === !1) return null;
-	switch (o) {
-		case "success": return /* @__PURE__ */ a(n, {
-			component: e,
-			size: c,
-			className: l,
-			color: u
-		});
-		default: return /* @__PURE__ */ a(n, {
-			component: t,
-			size: c,
-			className: l,
-			color: u
-		});
-	}
+var c = ({ intent: e = "info", icon: t, size: r = "sm", className: c, color: u }) => t && a.isValidElement(t) ? /* @__PURE__ */ s(o, { children: t }) : t === !1 ? null : /* @__PURE__ */ s(i, {
+	component: l[e] ?? n,
+	size: r,
+	className: c,
+	color: u
+}), l = {
+	success: t,
+	danger: e,
+	warning: e,
+	info: r
 };
 //#endregion
-export { o as FeedbackIcon };
+export { c as FeedbackIcon };

package/dist/components/feedback/Result/Result.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../icon/check.cjs"),r=require("../../../icon/circle.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("./result.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({intent:e,status:t,className:a})=>{if(t)return(0,c.jsx)(i.Icon,{component:r.default,color:`secondary`,className:a});switch(e){case`success`:return(0,c.jsx)(i.Icon,{component:n.default,color:`success`,className:a});case`danger`:return(0,c.jsx)(i.Icon,{component:r.default,color:`danger`,className:a});case`warning`:return(0,c.jsx)(i.Icon,{component:r.default,color:`warning`,className:a});case`info`:return(0,c.jsx)(i.Icon,{component:r.default,color:`info`,className:a});default:return(0,c.jsx)(i.Icon,{component:r.default,color:`secondary`,className:a})}},u=({intent:e=`default`,status:n,title:r,description:i,extra:o,icon:u,className:d,children:f})=>(0,c.jsx)(t.InteractiveArea,{icon:u||(0,c.jsx)(l,{intent:e,status:n,className:a.default.icon}),title:r??void 0,description:i??void 0,actions:o,variant:`none`,bgVariant:`transparent`,className:(0,s.default)(`wim-result`,a.default.root,e&&a.default[e],n&&a.default[n],d),styles:{inner:a.default.inner,icon:a.default.icon,content:a.default.content},children:f});exports.Result=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../icon/alert-circle.cjs"),r=require("../../../icon/check.cjs"),i=require("../../../icon/circle.cjs"),a=require("../../../icon/info-circle.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("./result.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=({intent:e,status:t,className:s})=>{if(t)return(0,u.jsx)(o.Icon,{component:n.default,color:`secondary`,className:s});switch(e){case`success`:return(0,u.jsx)(o.Icon,{component:r.default,color:`success`,className:s});case`danger`:return(0,u.jsx)(o.Icon,{component:n.default,color:`danger`,className:s});case`warning`:return(0,u.jsx)(o.Icon,{component:n.default,color:`warning`,className:s});case`info`:return(0,u.jsx)(o.Icon,{component:a.default,color:`info`,className:s});default:return(0,u.jsx)(o.Icon,{component:i.default,color:`secondary`,className:s})}},f=({intent:e=`default`,status:n,title:r,description:i,extra:a,icon:o,className:c,children:f})=>(0,u.jsx)(t.InteractiveArea,{icon:o||(0,u.jsx)(d,{intent:e,status:n,className:s.default.icon}),title:r??void 0,description:i??void 0,actions:a,variant:`none`,bgVariant:`transparent`,className:(0,l.default)(`wim-result`,s.default.root,e&&s.default[e],n&&s.default[n],c),styles:{inner:s.default.inner,icon:s.default.icon,content:s.default.content},children:f});exports.Result=f;

package/dist/components/feedback/Result/Result.js

@@ -1,64 +1,66 @@
 "use client";
 import { InteractiveArea as e } from "../../layout/InteractiveArea/InteractiveArea.js";
-import t from "../../../icon/check.js";
-import n from "../../../icon/circle.js";
-import { Icon as r } from "../../media/Icon/Icon.js";
-import i from "./result.module.js";
+import t from "../../../icon/alert-circle.js";
+import n from "../../../icon/check.js";
+import r from "../../../icon/circle.js";
+import i from "../../../icon/info-circle.js";
+import { Icon as a } from "../../media/Icon/Icon.js";
+import o from "./result.module.js";
 import "react";
-import a from "classnames";
-import { jsx as o } from "react/jsx-runtime";
+import s from "classnames";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/components/feedback/Result/Result.tsx
-var s = ({ intent: e, status: i, className: a }) => {
-	if (i) return /* @__PURE__ */ o(r, {
-		component: n,
+var l = ({ intent: e, status: o, className: s }) => {
+	if (o) return /* @__PURE__ */ c(a, {
+		component: t,
 		color: "secondary",
-		className: a
+		className: s
 	});
 	switch (e) {
-		case "success": return /* @__PURE__ */ o(r, {
-			component: t,
+		case "success": return /* @__PURE__ */ c(a, {
+			component: n,
 			color: "success",
-			className: a
+			className: s
 		});
-		case "danger": return /* @__PURE__ */ o(r, {
-			component: n,
+		case "danger": return /* @__PURE__ */ c(a, {
+			component: t,
 			color: "danger",
-			className: a
+			className: s
 		});
-		case "warning": return /* @__PURE__ */ o(r, {
-			component: n,
+		case "warning": return /* @__PURE__ */ c(a, {
+			component: t,
 			color: "warning",
-			className: a
+			className: s
 		});
-		case "info": return /* @__PURE__ */ o(r, {
-			component: n,
+		case "info": return /* @__PURE__ */ c(a, {
+			component: i,
 			color: "info",
-			className: a
+			className: s
 		});
-		default: return /* @__PURE__ */ o(r, {
-			component: n,
+		default: return /* @__PURE__ */ c(a, {
+			component: r,
 			color: "secondary",
-			className: a
+			className: s
 		});
 	}
-}, c = ({ intent: t = "default", status: n, title: r, description: c, extra: l, icon: u, className: d, children: f }) => /* @__PURE__ */ o(e, {
-	icon: u || /* @__PURE__ */ o(s, {
+}, u = ({ intent: t = "default", status: n, title: r, description: i, extra: a, icon: u, className: d, children: f }) => /* @__PURE__ */ c(e, {
+	icon: u || /* @__PURE__ */ c(l, {
 		intent: t,
 		status: n,
-		className: i.icon
+		className: o.icon
 	}),
 	title: r ?? void 0,
-	description: c ?? void 0,
-	actions: l,
+	description: i ?? void 0,
+	actions: a,
 	variant: "none",
 	bgVariant: "transparent",
-	className: a("wim-result", i.root, t && i[t], n && i[n], d),
+	className: s("wim-result", o.root, t && o[t], n && o[n], d),
 	styles: {
-		inner: i.inner,
-		icon: i.icon,
-		content: i.content
+		inner: o.inner,
+		icon: o.icon,
+		content: o.content
 	},
 	children: f
 });
 //#endregion
-export { c as Result };
+export { u as Result };

package/dist/components/form/FileUpload/FileUpload.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../FieldTemplate/FieldTemplate.cjs"),i=require("./file-upload.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=({label:e,buttonLabel:c,noFileLabel:l,accept:u,multiple:d=!1,disabled:f=!1,onChange:p,className:m,iconName:h,iconPosition:g,size:_=`md`,error:v,required:y,layout:b=`vertical`})=>{let{t:x}=t.useWimTranslation(`form`),S=`wim-fileupload-${a.default.useId()}`,C=e?`${S}-label`:void 0,w=v?`${S}-error`:void 0,T=(0,a.useRef)(null),[E,D]=(0,a.useState)(null),O=()=>{T.current?.click()},k=e=>{let t=e.target.files;D(t),p&&p(t)},A=E?Array.from(E).map(e=>e.name).join(`, `):l??x(`fileupload.no_file`);return(0,s.jsx)(r.FieldTemplate,{label:e,error:v,required:y,layout:b,labelId:C,errorId:w,className:(0,o.default)(`wim-file-upload`,i.default.root,i.default[_],m),children:(0,s.jsxs)(`div`,{className:i.default.controls,children:[(0,s.jsx)(`input`,{type:`file`,ref:T,accept:u,multiple:d,disabled:f,onChange:k,className:i.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,s.jsx)(n.Button,{onClick:O,disabled:f,variant:`outline`,icon:h,iconPosition:g,size:_,"aria-labelledby":C,"aria-describedby":w,"aria-required":y,"aria-invalid":v?!0:void 0,children:c??x(`fileupload.button`)}),(0,s.jsx)(`span`,{className:(0,o.default)(i.default.fileNames,i.default[_],f&&i.default.disabled),"aria-disabled":f||void 0,children:A})]})})};exports.FileUpload=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("./file-upload.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({label:e,buttonLabel:l,noFileLabel:u,accept:d,multiple:f=!1,disabled:p=!1,onChange:m,className:h,iconName:g,iconPosition:_,size:v=`md`,error:y,required:b,layout:x=`vertical`})=>{let{t:S}=t.useWimTranslation(`form`),C=`wim-fileupload-${o.default.useId()}`,w=e?`${C}-label`:void 0,T=y?`${C}-error`:void 0,E=b?`${C}-required`:void 0,D=[T,E].filter(Boolean).join(` `)||void 0,O=(0,o.useRef)(null),[k,A]=(0,o.useState)(null),j=()=>{O.current?.click()},M=e=>{let t=e.target.files;A(t),m&&m(t)},N=k?Array.from(k).map(e=>e.name).join(`, `):u??S(`fileupload.no_file`);return(0,c.jsx)(i.FieldTemplate,{label:e,error:y,required:b,layout:x,labelId:w,errorId:T,className:(0,s.default)(`wim-file-upload`,a.default.root,a.default[v],h),children:(0,c.jsxs)(`div`,{className:a.default.controls,children:[(0,c.jsx)(`input`,{type:`file`,ref:O,accept:d,multiple:f,disabled:p,onChange:M,className:a.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,c.jsx)(r.Button,{onClick:j,disabled:p,variant:`outline`,icon:g,iconPosition:_,size:v,"aria-labelledby":w,"aria-describedby":D,"aria-invalid":y?!0:void 0,children:l??S(`fileupload.button`)}),b&&(0,c.jsx)(n.VisuallyHidden,{id:E,children:S(`form.required`)}),(0,c.jsx)(`span`,{className:(0,s.default)(a.default.fileNames,a.default[v],p&&a.default.disabled),"aria-disabled":p||void 0,children:N})]})})};exports.FileUpload=l;

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, onChange: _, className: v, iconName: y, iconPosition: b, size: x = "md", error: S, required: C, layout: w = "vertical" }) => {
+	let { t: T } = e("form"), E = `wim-fileupload-${a.useId()}`, D = d ? `${E}-label` : void 0, O = S ? `${E}-error` : void 0, k = C ? `${E}-required` : void 0, A = [O, k].filter(Boolean).join(" ") || void 0, j = o(null), [M, N] = s(null), P = () => {
+		j.current?.click();
+	}, F = (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,
+		N(t), _ && _(t);
+	}, I = M ? Array.from(M).map((e) => e.name).join(", ") : p ?? T("fileupload.no_file");
+	return /* @__PURE__ */ l(r, {
+		label: d,
+		error: S,
+		required: C,
+		layout: w,
+		labelId: D,
+		errorId: O,
+		className: c("wim-file-upload", i.root, i[x], v),
+		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: j,
+					accept: m,
+					multiple: h,
+					disabled: g,
+					onChange: F,
+					className: i.input,
 					"aria-hidden": "true",
 					tabIndex: -1
 				}),
-				/* @__PURE__ */ c(t, {
-					onClick: j,
-					disabled: h,
+				/* @__PURE__ */ l(n, {
+					onClick: P,
+					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: y,
+					iconPosition: b,
+					size: x,
+					"aria-labelledby": D,
+					"aria-describedby": A,
+					"aria-invalid": S ? !0 : void 0,
+					children: f ?? T("fileupload.button")
 				}),
-				/* @__PURE__ */ c("span", {
-					className: s(r.fileNames, r[b], h && r.disabled),
-					"aria-disabled": h || void 0,
-					children: N
+				C && /* @__PURE__ */ l(t, {
+					id: k,
+					children: T("form.required")
+				}),
+				/* @__PURE__ */ l("span", {
+					className: c(i.fileNames, i[x], g && i.disabled),
+					"aria-disabled": g || void 0,
+					children: I
 				})
 			]
 		})
 	});
 };
 //#endregion
-export { u as FileUpload };
+export { d as FileUpload };

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.js

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

package/dist/llms-full.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.6.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.6.1 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 

package/dist/llms.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.6.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.6.1 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup