wimui 0.51.0 → 0.51.2

package/dist/components/feedback/Tour/Tour.js

@@ -1,145 +1,170 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { Portal as t } from "../../overlay/Portal/Portal.js";
-import { Button as n } from "../../form/Button/Button.js";
-import r from "./tour.module.js";
-import { useLayoutEffect as i, useState as a } from "react";
-import o from "classnames";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { FocusTrap as n } from "../../overlay/FocusTrap/FocusTrap.js";
+import { Button as r } from "../../form/Button/Button.js";
+import i from "./tour.module.js";
+import { useEffect as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import u from "classnames";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/feedback/Tour/Tour.tsx
-var u = 16;
-function d(e) {
+var m = 16;
+function h(e) {
 	let t = getComputedStyle(e);
 	return `${t.fontWeight} ${t.fontSize} ${t.fontFamily}`;
 }
-async function f(e) {
+async function g(e) {
 	let t = document.fonts;
 	if (t && typeof t.load == "function") {
 		try {
-			await t.load(d(e));
+			await t.load(h(e));
 		} catch {}
 		for (; t.status === "loading";) await new Promise((e) => {
 			t.addEventListener("loadingdone", () => e(), { once: !0 });
 		});
 	}
 }
-function p(e) {
+function _(e) {
 	let t = document.fonts;
-	return !t || typeof t.load != "function" ? !1 : t.status === "loading" || typeof t.check == "function" && !t.check(d(e));
+	return !t || typeof t.load != "function" ? !1 : t.status === "loading" || typeof t.check == "function" && !t.check(h(e));
 }
-function m(e, t) {
+function v(e, t) {
 	return Math.round(e.top) === Math.round(t.top) && Math.round(e.left) === Math.round(t.left) && Math.round(e.width) === Math.round(t.width) && Math.round(e.height) === Math.round(t.height);
 }
-function h(e) {
-	return e.top >= u && e.bottom <= window.innerHeight - u && e.left >= u && e.right <= window.innerWidth - u;
+function y(e) {
+	return e.top >= m && e.bottom <= window.innerHeight - m && e.left >= m && e.right <= window.innerWidth - m;
 }
-var g = ({ steps: u, open: d, onClose: g, onFinish: _ }) => {
-	let { t: v } = e("common"), [y, b] = a(0), [x, S] = a(null), C = u[y], w = C?.target;
-	if (i(() => {
-		if (!d || !w) {
-			S(null);
+var b = ({ steps: m, open: h, onClose: b, onFinish: x }) => {
+	let { t: S } = e("common"), [C, w] = l(0), [T, E] = l(null), D = m[C], O = D?.target;
+	s(() => {
+		if (!h || !O) {
+			E(null);
 			return;
 		}
 		let e = !1, t = (t) => {
-			e || S((e) => t ? e && m(e, t) ? e : t : null);
+			e || E((e) => t ? e && v(e, t) ? e : t : null);
 		}, n = () => {
-			let e = document.querySelector(w);
+			let e = document.querySelector(O);
 			if (!e) {
 				t(null);
 				return;
 			}
-			h(e.getBoundingClientRect()) || e.scrollIntoView({
+			y(e.getBoundingClientRect()) || e.scrollIntoView({
 				block: "center",
 				inline: "nearest"
 			}), t(e.getBoundingClientRect());
 		}, r = () => {
-			let e = document.querySelector(w);
+			let e = document.querySelector(O);
 			t(e ? e.getBoundingClientRect() : null);
 		}, i = () => {
 			window.addEventListener("resize", r), window.addEventListener("scroll", r, !0);
 		}, a = async () => {
-			let t = document.querySelector(w);
-			t && await f(t), !e && (n(), i());
-		}, o = document.querySelector(w);
-		return o && p(o) ? a() : (n(), i()), () => {
+			let t = document.querySelector(O);
+			t && await g(t), !e && (n(), i());
+		}, o = document.querySelector(O);
+		return o && _(o) ? a() : (n(), i()), () => {
 			e = !0, window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0);
 		};
 	}, [
-		d,
-		y,
-		w
-	]), !d || !C) return null;
-	let T = () => {
-		y < u.length - 1 ? b(y + 1) : (_ ? _() : g(), b(0));
-	}, E = () => {
-		y > 0 && b(y - 1);
-	}, D = {}, O = C.placement || "bottom";
-	if (x) {
-		let e = window.innerWidth, t = Math.min(300, e - 32), n = O;
-		if (e < 640 && (n === "left" || n === "right") && (n = "bottom"), O = n, n === "top" || n === "bottom") {
-			let r = x.left + x.width / 2, i = t / 2 + 16, a = e - t / 2 - 16;
-			r = i > a ? e / 2 : Math.max(i, Math.min(a, r)), D.left = r, n === "top" ? (D.top = x.top - 12, D.transform = "translate(-50%, -100%)") : (D.top = x.bottom + 12, D.transform = "translateX(-50%)");
-		} else n === "left" ? (D.left = x.left - 12, D.top = x.top + x.height / 2, D.transform = "translate(-100%, -50%)") : n === "right" && (D.left = x.right + 12, D.top = x.top + x.height / 2, D.transform = "translateY(-50%)");
+		h,
+		C,
+		O
+	]);
+	let k = o(), A = c(null), j = c(null), M = h && !!D && !!T;
+	if (a(() => {
+		if (!M) return;
+		let e = A.current;
+		e && !e.contains(document.activeElement) && j.current?.focus();
+	}, [M, C]), a(() => {
+		if (!h) return;
+		let e = (e) => {
+			e.key === "Escape" && (e.preventDefault(), b());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [h, b]), !h || !D) return null;
+	let N = () => {
+		C < m.length - 1 ? w(C + 1) : (x ? x() : b(), w(0));
+	}, P = () => {
+		C > 0 && w(C - 1);
+	}, F = {}, I = D.placement || "bottom";
+	if (T) {
+		let e = window.innerWidth, t = Math.min(300, e - 32), n = I;
+		if (e < 640 && (n === "left" || n === "right") && (n = "bottom"), I = n, n === "top" || n === "bottom") {
+			let r = T.left + T.width / 2, i = t / 2 + 16, a = e - t / 2 - 16;
+			r = i > a ? e / 2 : Math.max(i, Math.min(a, r)), F.left = r, n === "top" ? (F.top = T.top - 12, F.transform = "translate(-50%, -100%)") : (F.top = T.bottom + 12, F.transform = "translateX(-50%)");
+		} else n === "left" ? (F.left = T.left - 12, F.top = T.top + T.height / 2, F.transform = "translate(-100%, -50%)") : n === "right" && (F.left = T.right + 12, F.top = T.top + T.height / 2, F.transform = "translateY(-50%)");
 	}
-	return /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c("div", {
-		className: r.mask,
-		onClick: g,
-		role: "button",
-		tabIndex: 0,
-		"aria-label": v("a11y.close_tour"),
-		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && g();
-		}
-	}), x && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
-		className: r.highlight,
-		style: {
-			top: x.top - 4,
-			left: x.left - 4,
-			width: x.width + 8,
-			height: x.height + 8
-		}
-	}), /* @__PURE__ */ c("div", {
-		className: o("wim-tour", r.bubble),
-		"data-placement": O,
-		style: D,
-		children: /* @__PURE__ */ l("div", {
-			className: r.inner,
-			children: [
-				/* @__PURE__ */ c("h3", {
-					className: r.title,
-					children: C.title
-				}),
-				/* @__PURE__ */ c("p", {
-					className: r.description,
-					children: C.description
-				}),
-				/* @__PURE__ */ l("div", {
-					className: r.footer,
-					children: [/* @__PURE__ */ l("span", {
-						className: r.progress,
-						children: [
-							y + 1,
-							" / ",
-							u.length
-						]
-					}), /* @__PURE__ */ l("div", {
-						className: r.buttons,
-						children: [y > 0 && /* @__PURE__ */ c(n, {
-							size: "sm",
-							variant: "outline",
-							onClick: E,
-							children: v("action.back")
-						}), /* @__PURE__ */ c(n, {
-							size: "sm",
-							variant: "solid",
-							onClick: T,
-							children: y === u.length - 1 ? v("action.finish") : v("action.next")
-						})]
-					})]
+	return /* @__PURE__ */ f(t, { children: /* @__PURE__ */ f(n, {
+		initialFocus: !1,
+		children: /* @__PURE__ */ p("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": D.title,
+			"aria-describedby": T ? k : void 0,
+			children: [T && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
+				className: i.highlight,
+				style: {
+					top: T.top - 4,
+					left: T.left - 4,
+					width: T.width + 8,
+					height: T.height + 8
+				}
+			}), /* @__PURE__ */ f("div", {
+				ref: A,
+				className: u("wim-tour", i.bubble),
+				"data-placement": I,
+				style: F,
+				children: /* @__PURE__ */ p("div", {
+					className: i.inner,
+					children: [
+						/* @__PURE__ */ f("h3", {
+							className: i.title,
+							children: D.title
+						}),
+						/* @__PURE__ */ f("p", {
+							id: k,
+							className: i.description,
+							children: D.description
+						}),
+						/* @__PURE__ */ p("div", {
+							className: i.footer,
+							children: [/* @__PURE__ */ p("span", {
+								className: i.progress,
+								children: [
+									C + 1,
+									" / ",
+									m.length
+								]
+							}), /* @__PURE__ */ p("div", {
+								className: i.buttons,
+								children: [C > 0 && /* @__PURE__ */ f(r, {
+									size: "sm",
+									variant: "outline",
+									onClick: P,
+									children: S("action.back")
+								}), /* @__PURE__ */ f(r, {
+									ref: j,
+									size: "sm",
+									variant: "solid",
+									onClick: N,
+									children: C === m.length - 1 ? S("action.finish") : S("action.next")
+								})]
+							})]
+						})
+					]
 				})
-			]
+			})] }), /* @__PURE__ */ f("div", {
+				className: i.mask,
+				onClick: b,
+				role: "button",
+				tabIndex: 0,
+				"aria-label": S("a11y.close_tour"),
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && b();
+				}
+			})]
 		})
-	})] })] });
+	}) });
 };
 //#endregion
-export { g as Tour };
+export { b as Tour };

package/dist/components/form/OtpInput/otp-input.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_c7n09_37`,t=`_fullWidth_c7n09_51`,n=`_container_c7n09_54`,r=`_disabled_c7n09_64`,i=`_input_c7n09_67`,a=`_danger_c7n09_8`,o={root:e,fullWidth:t,container:n,disabled:r,input:i,danger:a};exports.container=n,exports.danger=a,exports.default=o,exports.disabled=r,exports.fullWidth=t,exports.input=i,exports.root=e;
+var e=`_root_ssm81_37`,t=`_fullWidth_ssm81_51`,n=`_container_ssm81_54`,r=`_disabled_ssm81_64`,i=`_input_ssm81_67`,a=`_danger_ssm81_8`,o={root:e,fullWidth:t,container:n,disabled:r,input:i,danger:a};exports.container=n,exports.danger=a,exports.default=o,exports.disabled=r,exports.fullWidth=t,exports.input=i,exports.root=e;

package/dist/components/form/OtpInput/otp-input.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/OtpInput/otp-input.module.scss
-var e = "_root_c7n09_37", t = "_fullWidth_c7n09_51", n = "_container_c7n09_54", r = "_disabled_c7n09_64", i = "_input_c7n09_67", a = "_danger_c7n09_8", o = {
+var e = "_root_ssm81_37", t = "_fullWidth_ssm81_51", n = "_container_ssm81_54", r = "_disabled_ssm81_64", i = "_input_ssm81_67", a = "_danger_ssm81_8", o = {
 	root: e,
 	fullWidth: t,
 	container: n,

package/dist/components/form/RangeSlider/RangeSlider.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("../../../utilities/slider-utils.cjs"),i=require("./range-slider.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=({value:e,defaultValue:c=[20,80],min:l=0,max:u=100,step:d=1,allowCross:f=!1,disabled:p=!1,onChange:m,onAfterChange:h,className:g,name:_,label:v,error:y,required:ee,layout:te=`vertical`,id:ne,"aria-label":b,"aria-labelledby":x,asChild:S=!1,children:re,...C})=>{let w=e!==void 0,T=(0,a.useId)(),E=ne||T,D=`wim-range-slider-label-${E}`,O=`wim-range-slider-error-${E}`,{clamp:k,calculateValue:A}=r.useSliderCommon(l,u,d),j=[k(c[0],l,u),k(c[1],l,u)];j[0]>j[1]&&j.sort((e,t)=>e-t);let[M,N]=(0,a.useState)(j),P=w?e:M,F=(0,a.useRef)(null),I=(0,a.useRef)(null),L=(0,a.useRef)(null),R=(0,a.useRef)(null),z=(0,a.useRef)(null),B=(0,a.useRef)(null),[V,H]=(0,a.useState)(null),U=(0,a.useRef)(null),W=(0,a.useRef)([...P]),G=(0,a.useCallback)(e=>(e-l)/(u-l)*100,[l,u]),K=(0,a.useCallback)(e=>{let t=G(e[0]),n=G(e[1]);I.current&&(I.current.style.left=`${t}%`,I.current.setAttribute(`aria-valuenow`,String(e[0])),I.current.setAttribute(`aria-valuemax`,String(e[1]))),L.current&&(L.current.style.left=`${n}%`,L.current.setAttribute(`aria-valuenow`,String(e[1])),L.current.setAttribute(`aria-valuemin`,String(e[0]))),R.current&&(R.current.style.left=`${t}%`,R.current.style.width=`${n-t}%`),z.current&&(z.current.value=String(e[0])),B.current&&(B.current.value=String(e[1]))},[G]);(0,a.useEffect)(()=>{V||K(P)},[P,V,K]);let q=(e,t)=>{p||(W.current=[...P],U.current=t,H(t),e.stopPropagation(),e.preventDefault())},J=e=>{if(p)return;let t=`touches`in e?e.touches[0].clientX:e.clientX,n=A(t,F.current),r=Math.abs(P[0]-n),i=Math.abs(P[1]-n),a;a=r<i?`min`:i<r?`max`:n<P[0]?`min`:`max`,U.current=a,H(a);let o=[...W.current];a===`min`?o[0]=Math.min(n,f?u:o[1]):o[1]=Math.max(n,f?l:o[0]),W.current=o,K(o),m?.(o)},Y=(0,a.useCallback)(e=>{if(!U.current||p)return;let t=`touches`in e?e.touches[0].clientX:e.clientX,n=A(t,F.current),r=[...W.current];U.current===`min`?r[0]=Math.min(n,f?u:r[1]):r[1]=Math.max(n,f?l:r[0]),W.current=r,K(r),m?.(r)},[p,m,f,A,l,u,K]),X=(0,a.useCallback)(()=>{if(U.current){U.current=null,H(null);let e=W.current;w||N([...e]),h?.(e)}},[w,h]);(0,a.useEffect)(()=>(document.addEventListener(`mousemove`,Y),document.addEventListener(`mouseup`,X),document.addEventListener(`touchmove`,Y,{passive:!1}),document.addEventListener(`touchend`,X),()=>{document.removeEventListener(`mousemove`,Y),document.removeEventListener(`mouseup`,X),document.removeEventListener(`touchmove`,Y),document.removeEventListener(`touchend`,X)}),[Y,X]);let Z=(e,t)=>{if(p)return;let n=[...P],r=t===`min`?n[0]:n[1],i;if(e.key===`ArrowLeft`||e.key===`ArrowDown`)i=Math.max(l,r-d);else if(e.key===`ArrowRight`||e.key===`ArrowUp`)i=Math.min(u,r+d);else if(e.key===`Home`)i=l;else if(e.key===`End`)i=u;else return;if(t===`min`){let e=f?u:n[1];n[0]=Math.min(i,e)}else{let e=f?l:n[0];n[1]=Math.max(i,e)}w||N(n),m?.(n),e.preventDefault()},Q=G(P[0]),$=G(P[1]);return(0,s.jsx)(n.FieldTemplate,{label:v,error:y,required:ee,layout:te,labelId:D,errorId:O,className:g,children:(0,s.jsxs)(S?t.Root:`div`,{role:`presentation`,"data-testid":`range-slider-root`,className:(0,o.default)(`wim-range-slider`,i.default.root,p&&i.default.disabled,y&&i.default.danger),onMouseDown:J,onTouchStart:J,...C,children:[(0,s.jsxs)(`div`,{className:i.default.trackContainer,ref:F,children:[(0,s.jsx)(`div`,{ref:R,className:i.default.track,style:{left:`${Q}%`,width:`${$-Q}%`}}),(0,s.jsx)(`div`,{ref:I,className:(0,o.default)(i.default.thumb,V===`min`&&i.default.active),style:{left:`${Q}%`},role:`slider`,"aria-valuemin":l,"aria-valuemax":P[1],"aria-valuenow":P[0],"aria-disabled":p,"aria-labelledby":v?D:x,"aria-label":v?`Start ${v}`:b||`Start`,"aria-describedby":y?O:void 0,"aria-invalid":y?!0:void 0,tabIndex:p?-1:0,onMouseDown:e=>q(e,`min`),onTouchStart:e=>q(e,`min`),onKeyDown:e=>Z(e,`min`)}),(0,s.jsx)(`div`,{ref:L,className:(0,o.default)(i.default.thumb,V===`max`&&i.default.active),style:{left:`${$}%`},role:`slider`,"aria-valuemin":P[0],"aria-valuemax":u,"aria-valuenow":P[1],"aria-disabled":p,"aria-labelledby":v?D:x,"aria-label":v?`End ${v}`:b||`End`,"aria-describedby":y?O:void 0,"aria-invalid":y?!0:void 0,tabIndex:p?-1:0,onMouseDown:e=>q(e,`max`),onTouchStart:e=>q(e,`max`),onKeyDown:e=>Z(e,`max`)})]}),(0,s.jsx)(`input`,{ref:z,type:`hidden`,name:_?`${_}-min`:``,value:P[0]}),(0,s.jsx)(`input`,{ref:B,type:`hidden`,name:_?`${_}-max`:``,value:P[1]}),(0,s.jsx)(t.Slottable,{children:re})]})})};c.displayName=`RangeSlider`,exports.RangeSlider=c;
+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("../FieldTemplate/FieldTemplate.cjs"),i=require("../../../utilities/slider-utils.cjs"),a=require("./range-slider.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=({value:e,defaultValue:l=[20,80],min:u=0,max:d=100,step:f=1,allowCross:p=!1,disabled:m=!1,onChange:h,onAfterChange:g,className:ee,name:_,label:v,error:y,required:te,layout:ne=`vertical`,id:re,"aria-label":b,"aria-labelledby":x,asChild:S=!1,children:C,...ie})=>{let{t:w}=n.useWimTranslation(`common`),T=e!==void 0,ae=(0,o.useId)(),E=re||ae,D=`wim-range-slider-label-${E}`,O=`wim-range-slider-error-${E}`,{clamp:k,calculateValue:A}=i.useSliderCommon(u,d,f),j=[k(l[0],u,d),k(l[1],u,d)];j[0]>j[1]&&j.sort((e,t)=>e-t);let[M,N]=(0,o.useState)(j),P=T?e:M,F=(0,o.useRef)(null),I=(0,o.useRef)(null),L=(0,o.useRef)(null),R=(0,o.useRef)(null),z=(0,o.useRef)(null),B=(0,o.useRef)(null),[V,H]=(0,o.useState)(null),U=(0,o.useRef)(null),W=(0,o.useRef)([...P]),G=(0,o.useCallback)(e=>(e-u)/(d-u)*100,[u,d]),K=(0,o.useCallback)(e=>{let t=G(e[0]),n=G(e[1]);I.current&&(I.current.style.left=`${t}%`,I.current.setAttribute(`aria-valuenow`,String(e[0])),I.current.setAttribute(`aria-valuemax`,String(e[1]))),L.current&&(L.current.style.left=`${n}%`,L.current.setAttribute(`aria-valuenow`,String(e[1])),L.current.setAttribute(`aria-valuemin`,String(e[0]))),R.current&&(R.current.style.left=`${t}%`,R.current.style.width=`${n-t}%`),z.current&&(z.current.value=String(e[0])),B.current&&(B.current.value=String(e[1]))},[G]);(0,o.useEffect)(()=>{V||K(P)},[P,V,K]);let q=(e,t)=>{m||(W.current=[...P],U.current=t,H(t),e.stopPropagation(),e.preventDefault())},J=e=>{if(m)return;let t=`touches`in e?e.touches[0].clientX:e.clientX,n=A(t,F.current),r=Math.abs(P[0]-n),i=Math.abs(P[1]-n),a;a=r<i?`min`:i<r?`max`:n<P[0]?`min`:`max`,U.current=a,H(a);let o=[...W.current];a===`min`?o[0]=Math.min(n,p?d:o[1]):o[1]=Math.max(n,p?u:o[0]),W.current=o,K(o),h?.(o)},Y=(0,o.useCallback)(e=>{if(!U.current||m)return;let t=`touches`in e?e.touches[0].clientX:e.clientX,n=A(t,F.current),r=[...W.current];U.current===`min`?r[0]=Math.min(n,p?d:r[1]):r[1]=Math.max(n,p?u:r[0]),W.current=r,K(r),h?.(r)},[m,h,p,A,u,d,K]),X=(0,o.useCallback)(()=>{if(U.current){U.current=null,H(null);let e=W.current;T||N([...e]),g?.(e)}},[T,g]);(0,o.useEffect)(()=>(document.addEventListener(`mousemove`,Y),document.addEventListener(`mouseup`,X),document.addEventListener(`touchmove`,Y,{passive:!1}),document.addEventListener(`touchend`,X),()=>{document.removeEventListener(`mousemove`,Y),document.removeEventListener(`mouseup`,X),document.removeEventListener(`touchmove`,Y),document.removeEventListener(`touchend`,X)}),[Y,X]);let Z=(e,t)=>{if(m)return;let n=[...P],r=t===`min`?n[0]:n[1],i;if(e.key===`ArrowLeft`||e.key===`ArrowDown`)i=Math.max(u,r-f);else if(e.key===`ArrowRight`||e.key===`ArrowUp`)i=Math.min(d,r+f);else if(e.key===`Home`)i=u;else if(e.key===`End`)i=d;else return;if(t===`min`){let e=p?d:n[1];n[0]=Math.min(i,e)}else{let e=p?u:n[0];n[1]=Math.max(i,e)}T||N(n),h?.(n),e.preventDefault()},Q=G(P[0]),$=G(P[1]);return(0,c.jsx)(r.FieldTemplate,{label:v,error:y,required:te,layout:ne,labelId:D,errorId:O,className:ee,children:(0,c.jsxs)(S?t.Root:`div`,{role:`presentation`,"data-testid":`range-slider-root`,className:(0,s.default)(`wim-range-slider`,a.default.root,m&&a.default.disabled,y&&a.default.danger),onMouseDown:J,onTouchStart:J,...ie,children:[(0,c.jsxs)(`div`,{className:a.default.trackContainer,ref:F,children:[(0,c.jsx)(`div`,{ref:R,className:a.default.track,style:{left:`${Q}%`,width:`${$-Q}%`}}),(0,c.jsx)(`div`,{ref:I,className:(0,s.default)(a.default.thumb,V===`min`&&a.default.active),style:{left:`${Q}%`},role:`slider`,"aria-valuemin":u,"aria-valuemax":P[1],"aria-valuenow":P[0],"aria-disabled":m,"aria-labelledby":v?D:x,"aria-label":v?w(`rangeSlider.start_of`,{label:v}):b||w(`rangeSlider.start`),"aria-describedby":y?O:void 0,"aria-invalid":y?!0:void 0,tabIndex:m?-1:0,onMouseDown:e=>q(e,`min`),onTouchStart:e=>q(e,`min`),onKeyDown:e=>Z(e,`min`)}),(0,c.jsx)(`div`,{ref:L,className:(0,s.default)(a.default.thumb,V===`max`&&a.default.active),style:{left:`${$}%`},role:`slider`,"aria-valuemin":P[0],"aria-valuemax":d,"aria-valuenow":P[1],"aria-disabled":m,"aria-labelledby":v?D:x,"aria-label":v?w(`rangeSlider.end_of`,{label:v}):b||w(`rangeSlider.end`),"aria-describedby":y?O:void 0,"aria-invalid":y?!0:void 0,tabIndex:m?-1:0,onMouseDown:e=>q(e,`max`),onTouchStart:e=>q(e,`max`),onKeyDown:e=>Z(e,`max`)})]}),(0,c.jsx)(`input`,{ref:z,type:`hidden`,name:_?`${_}-min`:``,value:P[0]}),(0,c.jsx)(`input`,{ref:B,type:`hidden`,name:_?`${_}-max`:``,value:P[1]}),(0,c.jsx)(t.Slottable,{children:C})]})})};l.displayName=`RangeSlider`,exports.RangeSlider=l;

package/dist/components/form/RangeSlider/RangeSlider.js

@@ -1,156 +1,157 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
-import { useSliderCommon as r } from "../../../utilities/slider-utils.js";
-import i from "./range-slider.module.js";
-import { useCallback as a, useEffect as o, useId as ee, useRef as s, useState as c } from "react";
-import l from "classnames";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
+import { FieldTemplate as r } from "../FieldTemplate/FieldTemplate.js";
+import { useSliderCommon as i } from "../../../utilities/slider-utils.js";
+import a from "./range-slider.module.js";
+import { useCallback as o, useEffect as s, useId as ee, 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/RangeSlider/RangeSlider.tsx
-var f = ({ value: f, defaultValue: p = [20, 80], min: m = 0, max: h = 100, step: g = 1, allowCross: _ = !1, disabled: v = !1, onChange: y, onAfterChange: b, className: te, name: x, label: S, error: C, required: ne, layout: re = "vertical", id: ie, "aria-label": w, "aria-labelledby": T, asChild: ae = !1, children: oe, ...se }) => {
-	let E = f !== void 0, ce = ee(), D = ie || ce, O = `wim-range-slider-label-${D}`, k = `wim-range-slider-error-${D}`, { clamp: A, calculateValue: j } = r(m, h, g), M = [A(p[0], m, h), A(p[1], m, h)];
-	M[0] > M[1] && M.sort((e, t) => e - t);
-	let [le, N] = c(M), P = E ? f : le, F = s(null), I = s(null), L = s(null), R = s(null), z = s(null), B = s(null), [V, H] = c(null), U = s(null), W = s([...P]), G = a((e) => (e - m) / (h - m) * 100, [m, h]), K = a((e) => {
-		let t = G(e[0]), n = G(e[1]);
-		I.current && (I.current.style.left = `${t}%`, I.current.setAttribute("aria-valuenow", String(e[0])), I.current.setAttribute("aria-valuemax", String(e[1]))), L.current && (L.current.style.left = `${n}%`, L.current.setAttribute("aria-valuenow", String(e[1])), L.current.setAttribute("aria-valuemin", String(e[0]))), R.current && (R.current.style.left = `${t}%`, R.current.style.width = `${n - t}%`), z.current && (z.current.value = String(e[0])), B.current && (B.current.value = String(e[1]));
-	}, [G]);
-	o(() => {
-		V || K(P);
+var p = ({ value: p, defaultValue: m = [20, 80], min: h = 0, max: g = 100, step: _ = 1, allowCross: v = !1, disabled: y = !1, onChange: b, onAfterChange: x, className: te, name: S, label: C, error: w, required: ne, layout: re = "vertical", id: ie, "aria-label": T, "aria-labelledby": E, asChild: ae = !1, children: oe, ...se }) => {
+	let { t: D } = n("common"), O = p !== void 0, ce = ee(), k = ie || ce, A = `wim-range-slider-label-${k}`, j = `wim-range-slider-error-${k}`, { clamp: M, calculateValue: N } = i(h, g, _), P = [M(m[0], h, g), M(m[1], h, g)];
+	P[0] > P[1] && P.sort((e, t) => e - t);
+	let [le, F] = l(P), I = O ? p : le, L = c(null), R = c(null), z = c(null), B = c(null), V = c(null), H = c(null), [U, W] = l(null), G = c(null), K = c([...I]), q = o((e) => (e - h) / (g - h) * 100, [h, g]), J = o((e) => {
+		let t = q(e[0]), n = q(e[1]);
+		R.current && (R.current.style.left = `${t}%`, R.current.setAttribute("aria-valuenow", String(e[0])), R.current.setAttribute("aria-valuemax", String(e[1]))), z.current && (z.current.style.left = `${n}%`, z.current.setAttribute("aria-valuenow", String(e[1])), z.current.setAttribute("aria-valuemin", String(e[0]))), B.current && (B.current.style.left = `${t}%`, B.current.style.width = `${n - t}%`), V.current && (V.current.value = String(e[0])), H.current && (H.current.value = String(e[1]));
+	}, [q]);
+	s(() => {
+		U || J(I);
 	}, [
-		P,
-		V,
-		K
+		I,
+		U,
+		J
 	]);
-	let q = (e, t) => {
-		v || (W.current = [...P], U.current = t, H(t), e.stopPropagation(), e.preventDefault());
-	}, J = (e) => {
-		if (v) return;
-		let t = "touches" in e ? e.touches[0].clientX : e.clientX, n = j(t, F.current), r = Math.abs(P[0] - n), i = Math.abs(P[1] - n), a;
-		a = r < i ? "min" : i < r ? "max" : n < P[0] ? "min" : "max", U.current = a, H(a);
-		let o = [...W.current];
-		a === "min" ? o[0] = Math.min(n, _ ? h : o[1]) : o[1] = Math.max(n, _ ? m : o[0]), W.current = o, K(o), y?.(o);
-	}, Y = a((e) => {
-		if (!U.current || v) return;
-		let t = "touches" in e ? e.touches[0].clientX : e.clientX, n = j(t, F.current), r = [...W.current];
-		U.current === "min" ? r[0] = Math.min(n, _ ? h : r[1]) : r[1] = Math.max(n, _ ? m : r[0]), W.current = r, K(r), y?.(r);
+	let Y = (e, t) => {
+		y || (K.current = [...I], G.current = t, W(t), e.stopPropagation(), e.preventDefault());
+	}, X = (e) => {
+		if (y) return;
+		let t = "touches" in e ? e.touches[0].clientX : e.clientX, n = N(t, L.current), r = Math.abs(I[0] - n), i = Math.abs(I[1] - n), a;
+		a = r < i ? "min" : i < r ? "max" : n < I[0] ? "min" : "max", G.current = a, W(a);
+		let o = [...K.current];
+		a === "min" ? o[0] = Math.min(n, v ? g : o[1]) : o[1] = Math.max(n, v ? h : o[0]), K.current = o, J(o), b?.(o);
+	}, Z = o((e) => {
+		if (!G.current || y) return;
+		let t = "touches" in e ? e.touches[0].clientX : e.clientX, n = N(t, L.current), r = [...K.current];
+		G.current === "min" ? r[0] = Math.min(n, v ? g : r[1]) : r[1] = Math.max(n, v ? h : r[0]), K.current = r, J(r), b?.(r);
 	}, [
-		v,
 		y,
-		_,
-		j,
-		m,
+		b,
+		v,
+		N,
 		h,
-		K
-	]), X = a(() => {
-		if (U.current) {
-			U.current = null, H(null);
-			let e = W.current;
-			E || N([...e]), b?.(e);
+		g,
+		J
+	]), Q = o(() => {
+		if (G.current) {
+			G.current = null, W(null);
+			let e = K.current;
+			O || F([...e]), x?.(e);
 		}
-	}, [E, b]);
-	o(() => (document.addEventListener("mousemove", Y), document.addEventListener("mouseup", X), document.addEventListener("touchmove", Y, { passive: !1 }), document.addEventListener("touchend", X), () => {
-		document.removeEventListener("mousemove", Y), document.removeEventListener("mouseup", X), document.removeEventListener("touchmove", Y), document.removeEventListener("touchend", X);
-	}), [Y, X]);
-	let Z = (e, t) => {
-		if (v) return;
-		let n = [...P], r = t === "min" ? n[0] : n[1], i;
-		if (e.key === "ArrowLeft" || e.key === "ArrowDown") i = Math.max(m, r - g);
-		else if (e.key === "ArrowRight" || e.key === "ArrowUp") i = Math.min(h, r + g);
-		else if (e.key === "Home") i = m;
-		else if (e.key === "End") i = h;
+	}, [O, x]);
+	s(() => (document.addEventListener("mousemove", Z), document.addEventListener("mouseup", Q), document.addEventListener("touchmove", Z, { passive: !1 }), document.addEventListener("touchend", Q), () => {
+		document.removeEventListener("mousemove", Z), document.removeEventListener("mouseup", Q), document.removeEventListener("touchmove", Z), document.removeEventListener("touchend", Q);
+	}), [Z, Q]);
+	let ue = (e, t) => {
+		if (y) return;
+		let n = [...I], r = t === "min" ? n[0] : n[1], i;
+		if (e.key === "ArrowLeft" || e.key === "ArrowDown") i = Math.max(h, r - _);
+		else if (e.key === "ArrowRight" || e.key === "ArrowUp") i = Math.min(g, r + _);
+		else if (e.key === "Home") i = h;
+		else if (e.key === "End") i = g;
 		else return;
 		if (t === "min") {
-			let e = _ ? h : n[1];
+			let e = v ? g : n[1];
 			n[0] = Math.min(i, e);
 		} else {
-			let e = _ ? m : n[0];
+			let e = v ? h : n[0];
 			n[1] = Math.max(i, e);
 		}
-		E || N(n), y?.(n), e.preventDefault();
-	}, Q = G(P[0]), $ = G(P[1]);
-	return /* @__PURE__ */ u(n, {
-		label: S,
-		error: C,
+		O || F(n), b?.(n), e.preventDefault();
+	}, $ = q(I[0]), de = q(I[1]);
+	return /* @__PURE__ */ d(r, {
+		label: C,
+		error: w,
 		required: ne,
 		layout: re,
-		labelId: O,
-		errorId: k,
+		labelId: A,
+		errorId: j,
 		className: te,
-		children: /* @__PURE__ */ d(ae ? e : "div", {
+		children: /* @__PURE__ */ f(ae ? e : "div", {
 			role: "presentation",
 			"data-testid": "range-slider-root",
-			className: l("wim-range-slider", i.root, v && i.disabled, C && i.danger),
-			onMouseDown: J,
-			onTouchStart: J,
+			className: u("wim-range-slider", a.root, y && a.disabled, w && a.danger),
+			onMouseDown: X,
+			onTouchStart: X,
 			...se,
 			children: [
-				/* @__PURE__ */ d("div", {
-					className: i.trackContainer,
-					ref: F,
+				/* @__PURE__ */ f("div", {
+					className: a.trackContainer,
+					ref: L,
 					children: [
-						/* @__PURE__ */ u("div", {
-							ref: R,
-							className: i.track,
+						/* @__PURE__ */ d("div", {
+							ref: B,
+							className: a.track,
 							style: {
-								left: `${Q}%`,
-								width: `${$ - Q}%`
+								left: `${$}%`,
+								width: `${de - $}%`
 							}
 						}),
-						/* @__PURE__ */ u("div", {
-							ref: I,
-							className: l(i.thumb, V === "min" && i.active),
-							style: { left: `${Q}%` },
+						/* @__PURE__ */ d("div", {
+							ref: R,
+							className: u(a.thumb, U === "min" && a.active),
+							style: { left: `${$}%` },
 							role: "slider",
-							"aria-valuemin": m,
-							"aria-valuemax": P[1],
-							"aria-valuenow": P[0],
-							"aria-disabled": v,
-							"aria-labelledby": S ? O : T,
-							"aria-label": S ? `Start ${S}` : w || "Start",
-							"aria-describedby": C ? k : void 0,
-							"aria-invalid": C ? !0 : void 0,
-							tabIndex: v ? -1 : 0,
-							onMouseDown: (e) => q(e, "min"),
-							onTouchStart: (e) => q(e, "min"),
-							onKeyDown: (e) => Z(e, "min")
+							"aria-valuemin": h,
+							"aria-valuemax": I[1],
+							"aria-valuenow": I[0],
+							"aria-disabled": y,
+							"aria-labelledby": C ? A : E,
+							"aria-label": C ? D("rangeSlider.start_of", { label: C }) : T || D("rangeSlider.start"),
+							"aria-describedby": w ? j : void 0,
+							"aria-invalid": w ? !0 : void 0,
+							tabIndex: y ? -1 : 0,
+							onMouseDown: (e) => Y(e, "min"),
+							onTouchStart: (e) => Y(e, "min"),
+							onKeyDown: (e) => ue(e, "min")
 						}),
-						/* @__PURE__ */ u("div", {
-							ref: L,
-							className: l(i.thumb, V === "max" && i.active),
-							style: { left: `${$}%` },
+						/* @__PURE__ */ d("div", {
+							ref: z,
+							className: u(a.thumb, U === "max" && a.active),
+							style: { left: `${de}%` },
 							role: "slider",
-							"aria-valuemin": P[0],
-							"aria-valuemax": h,
-							"aria-valuenow": P[1],
-							"aria-disabled": v,
-							"aria-labelledby": S ? O : T,
-							"aria-label": S ? `End ${S}` : w || "End",
-							"aria-describedby": C ? k : void 0,
-							"aria-invalid": C ? !0 : void 0,
-							tabIndex: v ? -1 : 0,
-							onMouseDown: (e) => q(e, "max"),
-							onTouchStart: (e) => q(e, "max"),
-							onKeyDown: (e) => Z(e, "max")
+							"aria-valuemin": I[0],
+							"aria-valuemax": g,
+							"aria-valuenow": I[1],
+							"aria-disabled": y,
+							"aria-labelledby": C ? A : E,
+							"aria-label": C ? D("rangeSlider.end_of", { label: C }) : T || D("rangeSlider.end"),
+							"aria-describedby": w ? j : void 0,
+							"aria-invalid": w ? !0 : void 0,
+							tabIndex: y ? -1 : 0,
+							onMouseDown: (e) => Y(e, "max"),
+							onTouchStart: (e) => Y(e, "max"),
+							onKeyDown: (e) => ue(e, "max")
 						})
 					]
 				}),
-				/* @__PURE__ */ u("input", {
-					ref: z,
+				/* @__PURE__ */ d("input", {
+					ref: V,
 					type: "hidden",
-					name: x ? `${x}-min` : "",
-					value: P[0]
+					name: S ? `${S}-min` : "",
+					value: I[0]
 				}),
-				/* @__PURE__ */ u("input", {
-					ref: B,
+				/* @__PURE__ */ d("input", {
+					ref: H,
 					type: "hidden",
-					name: x ? `${x}-max` : "",
-					value: P[1]
+					name: S ? `${S}-max` : "",
+					value: I[1]
 				}),
-				/* @__PURE__ */ u(t, { children: oe })
+				/* @__PURE__ */ d(t, { children: oe })
 			]
 		})
 	});
 };
-f.displayName = "RangeSlider";
+p.displayName = "RangeSlider";
 //#endregion
-export { f as RangeSlider };
+export { p as RangeSlider };

package/dist/components/form/RangeSlider/range-slider.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1243s_23`,t=`_disabled_1243s_32`,n=`_thumb_1243s_36`,r=`_danger_1243s_39`,i=`_track_1243s_39`,a=`_trackContainer_1243s_51`,o=`_active_1243s_83`,s={root:e,disabled:t,thumb:n,danger:r,track:i,trackContainer:a,active:o};exports.active=o,exports.danger=r,exports.default=s,exports.disabled=t,exports.root=e,exports.thumb=n,exports.track=i,exports.trackContainer=a;
+var e=`_root_1brr1_23`,t=`_disabled_1brr1_32`,n=`_thumb_1brr1_36`,r=`_danger_1brr1_39`,i=`_track_1brr1_39`,a=`_trackContainer_1brr1_51`,o=`_active_1brr1_83`,s={root:e,disabled:t,thumb:n,danger:r,track:i,trackContainer:a,active:o};exports.active=o,exports.danger=r,exports.default=s,exports.disabled=t,exports.root=e,exports.thumb=n,exports.track=i,exports.trackContainer=a;

package/dist/components/form/RangeSlider/range-slider.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/RangeSlider/range-slider.module.scss
-var e = "_root_1243s_23", t = "_disabled_1243s_32", n = "_thumb_1243s_36", r = "_danger_1243s_39", i = "_track_1243s_39", a = "_trackContainer_1243s_51", o = "_active_1243s_83", s = {
+var e = "_root_1brr1_23", t = "_disabled_1brr1_32", n = "_thumb_1brr1_36", r = "_danger_1brr1_39", i = "_track_1brr1_39", a = "_trackContainer_1brr1_51", o = "_active_1brr1_83", s = {
 	root: e,
 	disabled: t,
 	thumb: n,