wimui 0.51.1 → 0.52.0

package/dist/components/form/ImageCropper/ImageCropper.js

@@ -1,150 +1,152 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import { Button as t } from "../Button/Button.js";
-import { Slider as n } from "../Slider/Slider.js";
-import { IconButton as r } from "../IconButton/IconButton.js";
-import { Dialog as i, DialogClose as a, DialogContent as o, DialogDescription as s, DialogFooter as c, DialogHeader as l, DialogTitle as u } from "../../overlay/Dialog/Dialog.js";
-import d from "./image-cropper.module.js";
-import f, { useCallback as p, useEffect as m, useRef as h, useState as g } from "react";
-import _ from "classnames";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { commonNs as t } from "../../../i18n/generated/common.js";
+import { Button as n } from "../Button/Button.js";
+import { formNs as r } from "../../../i18n/generated/form.js";
+import { Slider as i } from "../Slider/Slider.js";
+import { IconButton as a } from "../IconButton/IconButton.js";
+import { Dialog as o, DialogClose as s, DialogContent as c, DialogDescription as l, DialogFooter as u, DialogHeader as d, DialogTitle as f } from "../../overlay/Dialog/Dialog.js";
+import p from "./image-cropper.module.js";
+import m, { useCallback as h, useEffect as g, useRef as _, useState as v } from "react";
+import y from "classnames";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/form/ImageCropper/ImageCropper.tsx
-var b = f.forwardRef(({ src: f, aspectRatio: b = 1, circular: x = !1, onCrop: S, showRotation: C = !0, showZoom: w = !0, showApplyButton: T = !0, applyLabel: E, onApply: D, className: O, ...k }, A) => {
-	let { t: j } = e("form"), [M, N] = g(1), [P, F] = g(0), [I, L] = g({
+var S = m.forwardRef(({ src: m, aspectRatio: S = 1, circular: C = !1, onCrop: w, showRotation: T = !0, showZoom: E = !0, showApplyButton: D = !0, applyLabel: O, onApply: k, className: A, ...j }, M) => {
+	let { t: N } = e([r, t]), [P, F] = v(1), [I, L] = v(0), [R, z] = v({
 		x: 0,
 		y: 0
-	}), [R, z] = g(!1), [B, V] = g({
+	}), [B, V] = v(!1), [H, U] = v({
 		x: 0,
 		y: 0
-	}), [H, U] = g(!1), W = h(null), G = h(null);
-	m(() => {
-		L({
+	}), [W, G] = v(!1), K = _(null), q = _(null);
+	g(() => {
+		z({
 			x: 0,
 			y: 0
-		}), N(1), F(0);
-	}, [f]);
-	let K = (e) => {
-		z(!0), V({
-			x: e.clientX - I.x,
-			y: e.clientY - I.y
+		}), F(1), L(0);
+	}, [m]);
+	let J = (e) => {
+		V(!0), U({
+			x: e.clientX - R.x,
+			y: e.clientY - R.y
 		});
-	}, q = p((e) => {
-		R && L({
-			x: e.clientX - B.x,
-			y: e.clientY - B.y
+	}, Y = h((e) => {
+		B && z({
+			x: e.clientX - H.x,
+			y: e.clientY - H.y
 		});
-	}, [R, B]), J = p(() => {
-		z(!1);
+	}, [B, H]), X = h(() => {
+		V(!1);
 	}, []);
-	m(() => (R ? (window.addEventListener("mousemove", q), window.addEventListener("mouseup", J)) : (window.removeEventListener("mousemove", q), window.removeEventListener("mouseup", J)), () => {
-		window.removeEventListener("mousemove", q), window.removeEventListener("mouseup", J);
+	g(() => (B ? (window.addEventListener("mousemove", Y), window.addEventListener("mouseup", X)) : (window.removeEventListener("mousemove", Y), window.removeEventListener("mouseup", X)), () => {
+		window.removeEventListener("mousemove", Y), window.removeEventListener("mouseup", X);
 	}), [
-		R,
-		q,
-		J
+		B,
+		Y,
+		X
 	]);
-	let Y = () => {
-		F((e) => (e + 90) % 360);
-	}, X = () => {
-		U(!0);
-	}, Z = () => {
-		let e = f || "";
-		S?.(e), D?.(e), U(!1);
+	let Z = () => {
+		L((e) => (e + 90) % 360);
+	}, Q = () => {
+		G(!0);
+	}, $ = () => {
+		let e = m || "";
+		w?.(e), k?.(e), G(!1);
 	};
-	return f ? /* @__PURE__ */ y("div", {
-		ref: A,
-		className: _("wim-image-cropper", d.root, O),
-		...k,
+	return m ? /* @__PURE__ */ x("div", {
+		ref: M,
+		className: y("wim-image-cropper", p.root, A),
+		...j,
 		children: [
-			/* @__PURE__ */ y("div", {
-				ref: G,
-				className: d.viewer,
-				onMouseDown: K,
+			/* @__PURE__ */ x("div", {
+				ref: q,
+				className: p.viewer,
+				onMouseDown: J,
 				role: "presentation",
-				children: [/* @__PURE__ */ v("div", {
-					className: d.imageContainer,
-					children: /* @__PURE__ */ v("img", {
-						ref: W,
-						src: f,
-						alt: j("a11y.crop_target"),
-						className: d.image,
-						style: { transform: `translate(${I.x}px, ${I.y}px) rotate(${P}deg) scale(${M})` },
+				children: [/* @__PURE__ */ b("div", {
+					className: p.imageContainer,
+					children: /* @__PURE__ */ b("img", {
+						ref: K,
+						src: m,
+						alt: N("a11y.crop_target"),
+						className: p.image,
+						style: { transform: `translate(${R.x}px, ${R.y}px) rotate(${I}deg) scale(${P})` },
 						draggable: !1
 					})
-				}), /* @__PURE__ */ v("div", {
-					className: d.overlay,
-					children: /* @__PURE__ */ v("div", {
-						className: _(d.cropArea, { [d.circular]: x }),
-						style: { aspectRatio: b }
+				}), /* @__PURE__ */ b("div", {
+					className: p.overlay,
+					children: /* @__PURE__ */ b("div", {
+						className: y(p.cropArea, { [p.circular]: C }),
+						style: { aspectRatio: S }
 					})
 				})]
 			}),
-			/* @__PURE__ */ y("div", {
-				className: d.controls,
+			/* @__PURE__ */ x("div", {
+				className: p.controls,
 				children: [
-					w && /* @__PURE__ */ v("div", {
-						className: d.zoomControl,
-						children: /* @__PURE__ */ v(n, {
+					E && /* @__PURE__ */ b("div", {
+						className: p.zoomControl,
+						children: /* @__PURE__ */ b(i, {
 							min: 1,
 							max: 3,
 							step: .1,
-							value: M,
-							onChange: (e) => N(e),
-							label: j("image_cropper.zoom"),
-							styles: { root: d.zoomSlider }
+							value: P,
+							onChange: (e) => F(e),
+							label: N("image_cropper.zoom"),
+							styles: { root: p.zoomSlider }
 						})
 					}),
-					C && /* @__PURE__ */ v("div", {
-						className: d.rotationControl,
-						children: /* @__PURE__ */ v(r, {
+					T && /* @__PURE__ */ b("div", {
+						className: p.rotationControl,
+						children: /* @__PURE__ */ b(a, {
 							iconName: "RefreshIcon",
-							onClick: Y,
-							"aria-label": j("image_cropper.rotate"),
+							onClick: Z,
+							"aria-label": N("image_cropper.rotate"),
 							variant: "outline",
 							size: "sm"
 						})
 					}),
-					T && /* @__PURE__ */ v("div", {
-						className: d.applyControl,
-						children: /* @__PURE__ */ v(t, {
-							onClick: X,
+					D && /* @__PURE__ */ b("div", {
+						className: p.applyControl,
+						children: /* @__PURE__ */ b(n, {
+							onClick: Q,
 							size: "sm",
 							variant: "solid",
-							children: E || j("image_cropper.apply")
+							children: O || N("image_cropper.apply")
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ v(i, {
-				open: H,
-				onOpenChange: U,
-				children: /* @__PURE__ */ y(o, { children: [
-					/* @__PURE__ */ v(l, { children: /* @__PURE__ */ v(u, { children: j("image_cropper.confirm_title") }) }),
-					/* @__PURE__ */ v(s, { children: j("image_cropper.confirm_message") }),
-					/* @__PURE__ */ y(c, { children: [/* @__PURE__ */ v(a, {
+			/* @__PURE__ */ b(o, {
+				open: W,
+				onOpenChange: G,
+				children: /* @__PURE__ */ x(c, { children: [
+					/* @__PURE__ */ b(d, { children: /* @__PURE__ */ b(f, { children: N("image_cropper.confirm_title") }) }),
+					/* @__PURE__ */ b(l, { children: N("image_cropper.confirm_message") }),
+					/* @__PURE__ */ x(u, { children: [/* @__PURE__ */ b(s, {
 						asChild: !0,
-						children: /* @__PURE__ */ v(t, {
+						children: /* @__PURE__ */ b(n, {
 							variant: "ghost",
-							children: j("image_cropper.cancel")
+							children: N("image_cropper.cancel")
 						})
-					}), /* @__PURE__ */ v(t, {
-						onClick: Z,
+					}), /* @__PURE__ */ b(n, {
+						onClick: $,
 						variant: "solid",
-						children: j("image_cropper.confirm")
+						children: N("image_cropper.confirm")
 					})] })
 				] })
 			})
 		]
-	}) : /* @__PURE__ */ v("div", {
-		ref: A,
-		className: _("wim-image-cropper", d.root, d.empty, O),
-		...k,
-		children: /* @__PURE__ */ v("div", {
-			className: d.emptyContent,
-			children: j("image_cropper.no_image")
+	}) : /* @__PURE__ */ b("div", {
+		ref: M,
+		className: y("wim-image-cropper", p.root, p.empty, A),
+		...j,
+		children: /* @__PURE__ */ b("div", {
+			className: p.emptyContent,
+			children: N("image_cropper.no_image")
 		})
 	});
 });
-b.displayName = "ImageCropper";
+S.displayName = "ImageCropper";
 //#endregion
-export { b as ImageCropper };
+export { S as ImageCropper };

package/dist/components/form/InlineEdit/InlineEdit.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("../Input/Input.cjs"),i=require("../IconButton/IconButton.cjs"),a=require("./inline-edit.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=o.default.forwardRef(({value:e,defaultValue:l,onChange:u,onSave:d,onCancel:f,onEdit:p,placeholder:m,disabled:h=!1,fullWidth:g=!1,label:_,className:v,"aria-label":y,...b},x)=>{let{t:S}=t.useWimTranslation(`common`),[C,w]=(0,o.useState)(!1),[T,E]=(0,o.useState)(l??``),[D,O]=(0,o.useState)(l??``),k=(0,o.useRef)(null),A=e!==void 0,j=A?e:D,M=()=>{h||(A||O(T),w(!0),p?.())},N=()=>{h||(A||E(j),w(!1),d?.(j))},P=()=>{h||(A||O(T),w(!1),f?.())},F=e=>{let t=e.target.value;A||O(t),u?.(t)},I=e=>{e.key===`Enter`?(e.preventDefault(),N()):e.key===`Escape`&&(e.preventDefault(),P())};return(0,o.useEffect)(()=>{C&&k.current&&k.current.focus()},[C]),(0,c.jsx)(n.FieldTemplate,{label:_,className:v,children:(0,c.jsx)(`div`,{ref:x,className:(0,s.default)(`wim-inline-edit`,a.default.root,g&&a.default.fullWidth,h&&a.default.disabled),...b,children:C?(0,c.jsxs)(`div`,{className:a.default.editWrapper,children:[(0,c.jsx)(r.Input,{ref:k,value:j,onChange:F,onKeyDown:I,disabled:h,placeholder:m,"aria-label":y,fullWidth:g,className:a.default.input}),(0,c.jsxs)(`div`,{className:a.default.editActions,children:[(0,c.jsx)(i.IconButton,{iconName:`CheckIcon`,intent:`success`,variant:`outline`,"aria-label":S(`action.save`),onClick:N,disabled:h}),(0,c.jsx)(i.IconButton,{iconName:`CloseIcon`,intent:`default`,variant:`outline`,"aria-label":S(`action.cancel`),onClick:P,disabled:h})]})]}):(0,c.jsxs)(`div`,{className:a.default.preview,onClick:M,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),M())},tabIndex:h?-1:0,role:`button`,"aria-label":y,"aria-disabled":h,children:[(0,c.jsx)(`span`,{className:(0,s.default)(a.default.text,!j&&a.default.placeholder),children:j||m||`\xA0`}),(0,c.jsx)(`span`,{className:a.default.editIconWrapper,children:(0,c.jsx)(i.IconButton,{iconName:`EditIcon`,variant:`ghost`,size:`sm`,tabIndex:-1,"aria-label":S(`action.edit`),"aria-hidden":`true`,asChild:!0,children:(0,c.jsx)(`span`,{})})})]})})})});l.displayName=`InlineEdit`,exports.InlineEdit=l;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../FieldTemplate/FieldTemplate.cjs"),i=require("../Input/Input.cjs"),a=require("../IconButton/IconButton.cjs"),o=require("./inline-edit.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=s.default.forwardRef(({value:e,defaultValue:u,onChange:d,onSave:f,onCancel:p,onEdit:m,placeholder:h,disabled:g=!1,fullWidth:_=!1,label:v,className:y,"aria-label":b,...x},S)=>{let{t:C}=t.useWimTranslation(n.commonNs),[w,T]=(0,s.useState)(!1),[E,D]=(0,s.useState)(u??``),[O,k]=(0,s.useState)(u??``),A=(0,s.useRef)(null),j=e!==void 0,M=j?e:O,N=()=>{g||(j||k(E),T(!0),m?.())},P=()=>{g||(j||D(M),T(!1),f?.(M))},F=()=>{g||(j||k(E),T(!1),p?.())},I=e=>{let t=e.target.value;j||k(t),d?.(t)},L=e=>{e.key===`Enter`?(e.preventDefault(),P()):e.key===`Escape`&&(e.preventDefault(),F())};return(0,s.useEffect)(()=>{w&&A.current&&A.current.focus()},[w]),(0,l.jsx)(r.FieldTemplate,{label:v,className:y,children:(0,l.jsx)(`div`,{ref:S,className:(0,c.default)(`wim-inline-edit`,o.default.root,_&&o.default.fullWidth,g&&o.default.disabled),...x,children:w?(0,l.jsxs)(`div`,{className:o.default.editWrapper,children:[(0,l.jsx)(i.Input,{ref:A,value:M,onChange:I,onKeyDown:L,disabled:g,placeholder:h,"aria-label":b,fullWidth:_,className:o.default.input}),(0,l.jsxs)(`div`,{className:o.default.editActions,children:[(0,l.jsx)(a.IconButton,{iconName:`CheckIcon`,intent:`success`,variant:`outline`,"aria-label":C(`action.save`),onClick:P,disabled:g}),(0,l.jsx)(a.IconButton,{iconName:`CloseIcon`,intent:`default`,variant:`outline`,"aria-label":C(`action.cancel`),onClick:F,disabled:g})]})]}):(0,l.jsxs)(`div`,{className:o.default.preview,onClick:N,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),N())},tabIndex:g?-1:0,role:`button`,"aria-label":b,"aria-disabled":g,children:[(0,l.jsx)(`span`,{className:(0,c.default)(o.default.text,!M&&o.default.placeholder),children:M||h||`\xA0`}),(0,l.jsx)(`span`,{className:o.default.editIconWrapper,children:(0,l.jsx)(a.IconButton,{iconName:`EditIcon`,variant:`ghost`,size:`sm`,tabIndex:-1,"aria-label":C(`action.edit`),"aria-hidden":`true`,asChild:!0,children:(0,l.jsx)(`span`,{})})})]})})})});u.displayName=`InlineEdit`,exports.InlineEdit=u;

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

@@ -1,95 +1,96 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import { FieldTemplate as t } from "../FieldTemplate/FieldTemplate.js";
-import { Input as n } from "../Input/Input.js";
-import { IconButton as r } from "../IconButton/IconButton.js";
-import i from "./inline-edit.module.js";
-import a, { useEffect as o, useRef as s, useState as c } from "react";
-import l from "classnames";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { commonNs as t } from "../../../i18n/generated/common.js";
+import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
+import { Input as r } from "../Input/Input.js";
+import { IconButton as i } from "../IconButton/IconButton.js";
+import a from "./inline-edit.module.js";
+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 f = a.forwardRef(({ value: a, defaultValue: f, onChange: p, onSave: m, onCancel: h, onEdit: g, placeholder: _, disabled: v = !1, fullWidth: y = !1, label: b, className: x, "aria-label": S, ...C }, w) => {
-	let { t: T } = e("common"), [E, D] = c(!1), [O, k] = c(f ?? ""), [A, j] = c(f ?? ""), M = s(null), N = a !== void 0, P = N ? a : A, F = () => {
-		v || (N || j(O), D(!0), g?.());
-	}, I = () => {
-		v || (N || k(P), D(!1), m?.(P));
+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 = () => {
-		v || (N || j(O), D(!1), h?.());
-	}, R = (e) => {
-		let t = e.target.value;
-		N || j(t), p?.(t);
+		y || (P || A(F), O(!1), h?.(F));
+	}, R = () => {
+		y || (P || M(k), O(!1), g?.());
 	}, z = (e) => {
-		e.key === "Enter" ? (e.preventDefault(), I()) : e.key === "Escape" && (e.preventDefault(), L());
+		let t = e.target.value;
+		P || M(t), m?.(t);
+	}, B = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), L()) : e.key === "Escape" && (e.preventDefault(), R());
 	};
-	return o(() => {
-		E && M.current && M.current.focus();
-	}, [E]), /* @__PURE__ */ u(t, {
-		label: b,
-		className: x,
-		children: /* @__PURE__ */ u("div", {
-			ref: w,
-			className: l("wim-inline-edit", i.root, y && i.fullWidth, v && i.disabled),
-			...C,
-			children: E ? /* @__PURE__ */ d("div", {
-				className: i.editWrapper,
-				children: [/* @__PURE__ */ u(n, {
-					ref: M,
-					value: P,
-					onChange: R,
-					onKeyDown: z,
-					disabled: v,
-					placeholder: _,
-					"aria-label": S,
-					fullWidth: y,
-					className: i.input
-				}), /* @__PURE__ */ d("div", {
-					className: i.editActions,
-					children: [/* @__PURE__ */ u(r, {
+	return s(() => {
+		D && N.current && N.current.focus();
+	}, [D]), /* @__PURE__ */ d(n, {
+		label: x,
+		className: S,
+		children: /* @__PURE__ */ d("div", {
+			ref: T,
+			className: u("wim-inline-edit", a.root, b && a.fullWidth, y && a.disabled),
+			...w,
+			children: D ? /* @__PURE__ */ f("div", {
+				className: a.editWrapper,
+				children: [/* @__PURE__ */ d(r, {
+					ref: N,
+					value: F,
+					onChange: z,
+					onKeyDown: B,
+					disabled: y,
+					placeholder: v,
+					"aria-label": C,
+					fullWidth: b,
+					className: a.input
+				}), /* @__PURE__ */ f("div", {
+					className: a.editActions,
+					children: [/* @__PURE__ */ d(i, {
 						iconName: "CheckIcon",
 						intent: "success",
 						variant: "outline",
-						"aria-label": T("action.save"),
-						onClick: I,
-						disabled: v
-					}), /* @__PURE__ */ u(r, {
+						"aria-label": E("action.save"),
+						onClick: L,
+						disabled: y
+					}), /* @__PURE__ */ d(i, {
 						iconName: "CloseIcon",
 						intent: "default",
 						variant: "outline",
-						"aria-label": T("action.cancel"),
-						onClick: L,
-						disabled: v
+						"aria-label": E("action.cancel"),
+						onClick: R,
+						disabled: y
 					})]
 				})]
-			}) : /* @__PURE__ */ d("div", {
-				className: i.preview,
-				onClick: F,
+			}) : /* @__PURE__ */ f("div", {
+				className: a.preview,
+				onClick: I,
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), I());
 				},
-				tabIndex: v ? -1 : 0,
+				tabIndex: y ? -1 : 0,
 				role: "button",
-				"aria-label": S,
-				"aria-disabled": v,
-				children: [/* @__PURE__ */ u("span", {
-					className: l(i.text, !P && i.placeholder),
-					children: P || _ || "\xA0"
-				}), /* @__PURE__ */ u("span", {
-					className: i.editIconWrapper,
-					children: /* @__PURE__ */ u(r, {
+				"aria-label": C,
+				"aria-disabled": y,
+				children: [/* @__PURE__ */ d("span", {
+					className: u(a.text, !F && a.placeholder),
+					children: F || v || "\xA0"
+				}), /* @__PURE__ */ d("span", {
+					className: a.editIconWrapper,
+					children: /* @__PURE__ */ d(i, {
 						iconName: "EditIcon",
 						variant: "ghost",
 						size: "sm",
 						tabIndex: -1,
-						"aria-label": T("action.edit"),
+						"aria-label": E("action.edit"),
 						"aria-hidden": "true",
 						asChild: !0,
-						children: /* @__PURE__ */ u("span", {})
+						children: /* @__PURE__ */ d("span", {})
 					})
 				})]
 			})
 		})
 	});
 });
-f.displayName = "InlineEdit";
+p.displayName = "InlineEdit";
 //#endregion
-export { f as InlineEdit };
+export { p as InlineEdit };

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

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

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

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