wimui 0.51.2 → 0.52.0

package/dist/components/media/Gallery/Gallery.js

@@ -1,76 +1,77 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import t from "../../../icon/close.js";
-import { Icon as n } from "../Icon/Icon.js";
-import { Button as r } from "../../form/Button/Button.js";
-import { Checkbox as i } from "../../form/Checkbox/Checkbox.js";
-import a from "./gallery.module.js";
-import o, { createContext as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import m from "classnames";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { componentsNs as t } from "../../../i18n/generated/components.js";
+import n from "../../../icon/close.js";
+import { Icon as r } from "../Icon/Icon.js";
+import { Button as i } from "../../form/Button/Button.js";
+import { Checkbox as a } from "../../form/Checkbox/Checkbox.js";
+import o from "./gallery.module.js";
+import s, { createContext as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import h from "classnames";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/media/Gallery/Gallery.tsx
-var _ = s(null), v = () => {
-	let e = l(_);
+var v = c(null), y = () => {
+	let e = u(v);
 	if (!e) throw Error("Gallery subcomponents must be used within Gallery");
 	return e;
-}, y = o.forwardRef(({ items: i, columns: o = 3, gap: s = "md", aspect: l = "square", selectable: v = !1, selected: y, defaultSelected: x = [], onSelectionChange: S, onItemClick: C, renderActions: w, className: T, style: E, ...D }, O) => {
-	let { t: k } = e("components"), A = y !== void 0, [j, M] = p(() => new Set(x)), [N, P] = p(0), F = f(null), I = f(null), [L, R] = p(o), z = c((e) => {
-		I.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
-	}, [O]);
-	u(() => {
-		let e = I.current;
+}, b = s.forwardRef(({ items: a, columns: s = 3, gap: c = "md", aspect: u = "square", selectable: y = !1, selected: b, defaultSelected: S = [], onSelectionChange: C, onItemClick: w, renderActions: T, className: E, style: D, ...O }, k) => {
+	let { t: A } = e(t), j = b !== void 0, [M, N] = m(() => new Set(S)), [P, F] = m(0), I = p(null), L = p(null), [R, z] = m(s), B = l((e) => {
+		L.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
+	}, [k]);
+	d(() => {
+		let e = L.current;
 		if (!e) return;
 		let t = new ResizeObserver((e) => {
 			let t = e[0].contentRect.width;
-			R(t < 480 ? 1 : t < 576 ? 2 : o);
+			z(t < 480 ? 1 : t < 576 ? 2 : s);
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [o]);
-	let B = d(() => A ? new Set(y) : j, [
-		A,
-		y,
-		j
-	]), V = c((e) => {
-		A || M(e), S?.(Array.from(e));
-	}, [A, S]), H = c((e, t, n) => {
-		let r = new Set(B);
-		if (n && F.current !== null) {
-			let n = Math.min(F.current, t), a = Math.max(F.current, t), o = !B.has(e);
-			for (let e = n; e <= a; e++) o ? r.add(i[e].id) : r.delete(i[e].id);
-		} else r.has(e) ? r.delete(e) : r.add(e), F.current = t;
-		V(r);
+	}, [s]);
+	let V = f(() => j ? new Set(b) : M, [
+		j,
+		b,
+		M
+	]), H = l((e) => {
+		j || N(e), C?.(Array.from(e));
+	}, [j, C]), U = l((e, t, n) => {
+		let r = new Set(V);
+		if (n && I.current !== null) {
+			let n = Math.min(I.current, t), i = Math.max(I.current, t), o = !V.has(e);
+			for (let e = n; e <= i; e++) o ? r.add(a[e].id) : r.delete(a[e].id);
+		} else r.has(e) ? r.delete(e) : r.add(e), I.current = t;
+		H(r);
 	}, [
-		B,
-		i,
-		V
-	]), U = c(() => {
-		V(new Set(i.map((e) => e.id)));
-	}, [i, V]), W = c(() => {
-		V(/* @__PURE__ */ new Set());
-	}, [V]), G = d(() => {
+		V,
+		a,
+		H
+	]), W = l(() => {
+		H(new Set(a.map((e) => e.id)));
+	}, [a, H]), G = l(() => {
+		H(/* @__PURE__ */ new Set());
+	}, [H]), K = f(() => {
 		let e = [];
-		for (let t = 0; t < i.length; t += L) e.push({
-			rowItems: i.slice(t, t + L),
+		for (let t = 0; t < a.length; t += R) e.push({
+			rowItems: a.slice(t, t + R),
 			startIndex: t
 		});
 		return e;
-	}, [i, L]), K = Array.from(B), q = K.length > 0, J = {
-		"--gallery-columns": L,
-		...E
-	}, Y = (e) => {
-		let t = L, n = i.length, r = N;
+	}, [a, R]), q = Array.from(V), J = q.length > 0, Y = {
+		"--gallery-columns": R,
+		...D
+	}, X = (e) => {
+		let t = R, n = a.length, r = P;
 		switch (e.key) {
 			case "ArrowRight":
-				e.preventDefault(), r = Math.min(N + 1, n - 1);
+				e.preventDefault(), r = Math.min(P + 1, n - 1);
 				break;
 			case "ArrowLeft":
-				e.preventDefault(), r = Math.max(N - 1, 0);
+				e.preventDefault(), r = Math.max(P - 1, 0);
 				break;
 			case "ArrowDown":
-				e.preventDefault(), r = Math.min(N + t, n - 1);
+				e.preventDefault(), r = Math.min(P + t, n - 1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), r = Math.max(N - t, 0);
+				e.preventDefault(), r = Math.max(P - t, 0);
 				break;
 			case "Home":
 				e.preventDefault(), r = 0;
@@ -79,69 +80,69 @@ var _ = s(null), v = () => {
 				e.preventDefault(), r = n - 1;
 				break;
 			case "Escape":
-				v && (e.preventDefault(), W());
+				y && (e.preventDefault(), G());
 				break;
 			case "a":
 			case "A":
-				v && (e.ctrlKey || e.metaKey) && (e.preventDefault(), U());
+				y && (e.ctrlKey || e.metaKey) && (e.preventDefault(), W());
 				break;
 			default: return;
 		}
-		r !== N && (P(r), e.currentTarget.querySelectorAll("[data-gallery-item]")[r]?.focus());
+		r !== P && (F(r), e.currentTarget.querySelectorAll("[data-gallery-item]")[r]?.focus());
 	};
-	return /* @__PURE__ */ h(_.Provider, {
+	return /* @__PURE__ */ g(v.Provider, {
 		value: {
-			selectable: v,
-			selectedIds: B,
-			lastClickedIndex: F,
-			items: i,
-			toggleSelect: H,
-			focusedIndex: N,
-			setFocusedIndex: P,
-			selectAll: U,
-			clearSelection: W,
-			onItemClick: C
+			selectable: y,
+			selectedIds: V,
+			lastClickedIndex: I,
+			items: a,
+			toggleSelect: U,
+			focusedIndex: P,
+			setFocusedIndex: F,
+			selectAll: W,
+			clearSelection: G,
+			onItemClick: w
 		},
-		children: /* @__PURE__ */ g("div", {
-			ref: z,
-			className: m("wim-gallery", a.root, T),
-			...D,
-			children: [v && q && /* @__PURE__ */ g("div", {
-				className: a.toolbar,
+		children: /* @__PURE__ */ _("div", {
+			ref: B,
+			className: h("wim-gallery", o.root, E),
+			...O,
+			children: [y && J && /* @__PURE__ */ _("div", {
+				className: o.toolbar,
 				role: "toolbar",
-				"aria-label": k("gallery.toolbar_label"),
-				children: [/* @__PURE__ */ h("span", {
-					className: a.toolbarCount,
-					children: k("gallery.selected_count", { count: K.length })
-				}), /* @__PURE__ */ g("div", {
-					className: a.toolbarActions,
-					children: [w?.({
-						selectedIds: K,
-						clearSelection: W
-					}), /* @__PURE__ */ h(r, {
+				"aria-label": A("gallery.toolbar_label"),
+				children: [/* @__PURE__ */ g("span", {
+					className: o.toolbarCount,
+					children: A("gallery.selected_count", { count: q.length })
+				}), /* @__PURE__ */ _("div", {
+					className: o.toolbarActions,
+					children: [T?.({
+						selectedIds: q,
+						clearSelection: G
+					}), /* @__PURE__ */ g(i, {
 						size: "sm",
 						variant: "ghost",
-						className: a.toolbarClear,
-						onClick: W,
-						"aria-label": k("gallery.clear_selection"),
-						icon: /* @__PURE__ */ h(n, {
-							component: t,
+						className: o.toolbarClear,
+						onClick: G,
+						"aria-label": A("gallery.clear_selection"),
+						icon: /* @__PURE__ */ g(r, {
+							component: n,
 							size: "sm"
 						})
 					})]
 				})]
-			}), /* @__PURE__ */ h("div", {
-				className: m(a.grid, a[`gap-${s}`], a[`aspect-${l}`]),
-				style: J,
+			}), /* @__PURE__ */ g("div", {
+				className: h(o.grid, o[`gap-${c}`], o[`aspect-${u}`]),
+				style: Y,
 				role: "grid",
-				"aria-multiselectable": v || void 0,
-				"aria-label": k("gallery.grid_label"),
-				onKeyDown: Y,
+				"aria-multiselectable": y || void 0,
+				"aria-label": A("gallery.grid_label"),
+				onKeyDown: X,
 				tabIndex: 0,
-				children: G.map(({ rowItems: e, startIndex: t }, n) => /* @__PURE__ */ h("div", {
+				children: K.map(({ rowItems: e, startIndex: t }, n) => /* @__PURE__ */ g("div", {
 					role: "row",
 					style: { display: "contents" },
-					children: e.map((e, n) => /* @__PURE__ */ h(b, {
+					children: e.map((e, n) => /* @__PURE__ */ g(x, {
 						item: e,
 						index: t + n
 					}, e.id))
@@ -150,60 +151,60 @@ var _ = s(null), v = () => {
 		})
 	});
 });
-y.displayName = "Gallery";
-var b = ({ item: t, index: n }) => {
-	let { selectable: r, selectedIds: o, toggleSelect: s, focusedIndex: c, setFocusedIndex: l, onItemClick: u } = v(), { t: d } = e("components"), f = o.has(t.id), p = c === n, _ = () => {
-		u?.(t, n), l(n);
-	}, y = (e) => {
-		e.stopPropagation(), s(t.id, n, e.shiftKey);
+b.displayName = "Gallery";
+var x = ({ item: n, index: r }) => {
+	let { selectable: i, selectedIds: s, toggleSelect: c, focusedIndex: l, setFocusedIndex: u, onItemClick: d } = y(), { t: f } = e(t), p = s.has(n.id), m = l === r, v = () => {
+		d?.(n, r), u(r);
 	}, b = (e) => {
-		(e.key === " " || e.key === "Enter") && (e.preventDefault(), r && e.key === " " ? s(t.id, n, e.shiftKey) : u?.(t, n));
+		e.stopPropagation(), c(n.id, r, e.shiftKey);
+	}, x = (e) => {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), i && e.key === " " ? c(n.id, r, e.shiftKey) : d?.(n, r));
 	};
-	return /* @__PURE__ */ g("div", {
-		className: m(a.item, { [a.selected]: f }),
+	return /* @__PURE__ */ _("div", {
+		className: h(o.item, { [o.selected]: p }),
 		role: "gridcell",
-		"aria-selected": r ? f : void 0,
-		tabIndex: p ? 0 : -1,
-		onClick: _,
-		onKeyDown: b,
-		onFocus: () => l(n),
+		"aria-selected": i ? p : void 0,
+		tabIndex: m ? 0 : -1,
+		onClick: v,
+		onKeyDown: x,
+		onFocus: () => u(r),
 		"data-gallery-item": !0,
-		children: [/* @__PURE__ */ g("div", {
-			className: a.imageWrapper,
+		children: [/* @__PURE__ */ _("div", {
+			className: o.imageWrapper,
 			children: [
-				/* @__PURE__ */ h("img", {
-					src: t.src,
-					alt: t.alt ?? t.title ?? "",
-					className: a.image,
+				/* @__PURE__ */ g("img", {
+					src: n.src,
+					alt: n.alt ?? n.title ?? "",
+					className: o.image,
 					draggable: !1
 				}),
-				r && /* @__PURE__ */ h("div", {
-					className: a.checkboxOverlay,
-					children: /* @__PURE__ */ h(i, {
-						checked: f,
+				i && /* @__PURE__ */ g("div", {
+					className: o.checkboxOverlay,
+					children: /* @__PURE__ */ g(a, {
+						checked: p,
 						onChange: () => {},
-						onClick: y,
-						"aria-label": d(f ? "gallery.deselect_item" : "gallery.select_item", { title: t.title ?? t.alt ?? String(n + 1) }),
+						onClick: b,
+						"aria-label": f(p ? "gallery.deselect_item" : "gallery.select_item", { title: n.title ?? n.alt ?? String(r + 1) }),
 						tabIndex: -1,
-						className: a.checkbox
+						className: o.checkbox
 					})
 				}),
-				f && /* @__PURE__ */ h("div", {
-					className: a.selectedRing,
+				p && /* @__PURE__ */ g("div", {
+					className: o.selectedRing,
 					"aria-hidden": !0
 				})
 			]
-		}), (t.title || t.caption) && /* @__PURE__ */ g("div", {
-			className: a.caption,
-			children: [t.title && /* @__PURE__ */ h("span", {
-				className: a.captionTitle,
-				children: t.title
-			}), t.caption && /* @__PURE__ */ h("span", {
-				className: a.captionText,
-				children: t.caption
+		}), (n.title || n.caption) && /* @__PURE__ */ _("div", {
+			className: o.caption,
+			children: [n.title && /* @__PURE__ */ g("span", {
+				className: o.captionTitle,
+				children: n.title
+			}), n.caption && /* @__PURE__ */ g("span", {
+				className: o.captionText,
+				children: n.caption
 			})]
 		})]
 	});
 };
 //#endregion
-export { y as Gallery };
+export { b as Gallery };

package/dist/components/media/ImageCompare/ImageCompare.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/chevron-left.cjs"),r=require("../../../icon/chevron-right.cjs"),i=require("../Icon/Icon.cjs"),a=require("./image-compare.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=e=>Math.max(0,Math.min(100,e)),u=o.default.forwardRef(({before:e,after:u,beforeAlt:d=``,afterAlt:f=``,beforeLabel:p,afterLabel:m,defaultPosition:h=50,position:g,onPositionChange:_,orientation:v=`horizontal`,width:y,height:b,radius:x=`md`,labels:S,className:C,...w},T)=>{let{t:E}=t.useWimTranslation(`common`),{handleAriaLabel:D=E(`imageCompare.handle`)}=S??{},O=g!==void 0,[k,A]=(0,o.useState)(l(h)),j=l(O?g:k),M=v===`vertical`,N=(0,o.useRef)(null),P=(0,o.useRef)(!1),F=(0,o.useCallback)(e=>{N.current=e,typeof T==`function`?T(e):T&&(T.current=e)},[T]),I=(0,o.useCallback)(e=>{let t=l(e);O||A(t),_?.(t)},[O,_]),L=(0,o.useCallback)((e,t)=>{let n=N.current?.getBoundingClientRect();if(!n)return;let r=M?(t-n.top)/n.height*100:(e-n.left)/n.width*100;I(r)},[M,I]),R=e=>{P.current=!0,e.currentTarget.setPointerCapture(e.pointerId),L(e.clientX,e.clientY)},z=e=>{P.current&&L(e.clientX,e.clientY)},B=e=>{P.current=!1,e.currentTarget.releasePointerCapture?.(e.pointerId)},V=e=>{let t=e.shiftKey?10:2,n=M?`ArrowUp`:`ArrowLeft`,r=M?`ArrowDown`:`ArrowRight`;e.key===n?(e.preventDefault(),I(j-t)):e.key===r?(e.preventDefault(),I(j+t)):e.key===`Home`?(e.preventDefault(),I(0)):e.key===`End`&&(e.preventDefault(),I(100))},H=M?{clipPath:`inset(0 0 ${100-j}% 0)`}:{clipPath:`inset(0 ${100-j}% 0 0)`},U=M?{top:`${j}%`}:{left:`${j}%`};return(0,c.jsxs)(`div`,{ref:F,className:(0,s.default)(`wim-image-compare`,a.default.root,M&&a.default.vertical,a.default[`radius-${x}`],C),style:{width:y,height:b},onPointerDown:R,onPointerMove:z,onPointerUp:B,...w,children:[(0,c.jsx)(`img`,{className:a.default.image,src:u,alt:f,draggable:!1}),m&&(0,c.jsx)(`span`,{className:(0,s.default)(a.default.label,a.default.afterLabel),children:m}),(0,c.jsxs)(`div`,{className:a.default.beforeLayer,style:H,children:[(0,c.jsx)(`img`,{className:a.default.image,src:e,alt:d,draggable:!1}),p&&(0,c.jsx)(`span`,{className:(0,s.default)(a.default.label,a.default.beforeLabel),children:p})]}),(0,c.jsxs)(`div`,{className:a.default.divider,style:U,children:[(0,c.jsx)(`span`,{className:a.default.line,"aria-hidden":`true`}),(0,c.jsxs)(`button`,{type:`button`,className:a.default.handle,role:`slider`,"aria-label":D,"aria-orientation":v,"aria-valuenow":Math.round(j),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:V,onPointerDown:R,children:[(0,c.jsx)(i.Icon,{component:n.default,size:`sm`,className:a.default.arrow}),(0,c.jsx)(i.Icon,{component:r.default,size:`sm`,className:a.default.arrow})]})]})]})});u.displayName=`ImageCompare`,exports.ImageCompare=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../icon/chevron-left.cjs"),i=require("../../../icon/chevron-right.cjs"),a=require("../Icon/Icon.cjs"),o=require("./image-compare.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=e=>Math.max(0,Math.min(100,e)),d=s.default.forwardRef(({before:e,after:d,beforeAlt:f=``,afterAlt:p=``,beforeLabel:m,afterLabel:h,defaultPosition:g=50,position:_,onPositionChange:v,orientation:y=`horizontal`,width:b,height:x,radius:S=`md`,labels:C,className:w,...T},E)=>{let{t:D}=t.useWimTranslation(n.commonNs),{handleAriaLabel:O=D(`imageCompare.handle`)}=C??{},k=_!==void 0,[A,j]=(0,s.useState)(u(g)),M=u(k?_:A),N=y===`vertical`,P=(0,s.useRef)(null),F=(0,s.useRef)(!1),I=(0,s.useCallback)(e=>{P.current=e,typeof E==`function`?E(e):E&&(E.current=e)},[E]),L=(0,s.useCallback)(e=>{let t=u(e);k||j(t),v?.(t)},[k,v]),R=(0,s.useCallback)((e,t)=>{let n=P.current?.getBoundingClientRect();if(!n)return;let r=N?(t-n.top)/n.height*100:(e-n.left)/n.width*100;L(r)},[N,L]),z=e=>{F.current=!0,e.currentTarget.setPointerCapture(e.pointerId),R(e.clientX,e.clientY)},B=e=>{F.current&&R(e.clientX,e.clientY)},V=e=>{F.current=!1,e.currentTarget.releasePointerCapture?.(e.pointerId)},H=e=>{let t=e.shiftKey?10:2,n=N?`ArrowUp`:`ArrowLeft`,r=N?`ArrowDown`:`ArrowRight`;e.key===n?(e.preventDefault(),L(M-t)):e.key===r?(e.preventDefault(),L(M+t)):e.key===`Home`?(e.preventDefault(),L(0)):e.key===`End`&&(e.preventDefault(),L(100))},U=N?{clipPath:`inset(0 0 ${100-M}% 0)`}:{clipPath:`inset(0 ${100-M}% 0 0)`},W=N?{top:`${M}%`}:{left:`${M}%`};return(0,l.jsxs)(`div`,{ref:I,className:(0,c.default)(`wim-image-compare`,o.default.root,N&&o.default.vertical,o.default[`radius-${S}`],w),style:{width:b,height:x},onPointerDown:z,onPointerMove:B,onPointerUp:V,...T,children:[(0,l.jsx)(`img`,{className:o.default.image,src:d,alt:p,draggable:!1}),h&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.afterLabel),children:h}),(0,l.jsxs)(`div`,{className:o.default.beforeLayer,style:U,children:[(0,l.jsx)(`img`,{className:o.default.image,src:e,alt:f,draggable:!1}),m&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.beforeLabel),children:m})]}),(0,l.jsxs)(`div`,{className:o.default.divider,style:W,children:[(0,l.jsx)(`span`,{className:o.default.line,"aria-hidden":`true`}),(0,l.jsxs)(`button`,{type:`button`,className:o.default.handle,role:`slider`,"aria-label":O,"aria-orientation":y,"aria-valuenow":Math.round(M),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:H,onPointerDown:z,children:[(0,l.jsx)(a.Icon,{component:r.default,size:`sm`,className:o.default.arrow}),(0,l.jsx)(a.Icon,{component:i.default,size:`sm`,className:o.default.arrow})]})]})]})});d.displayName=`ImageCompare`,exports.ImageCompare=d;

package/dist/components/media/ImageCompare/ImageCompare.js

@@ -1,100 +1,101 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import t from "../../../icon/chevron-left.js";
-import n from "../../../icon/chevron-right.js";
-import { Icon as r } from "../Icon/Icon.js";
-import i from "./image-compare.module.js";
-import a, { useCallback 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 n from "../../../icon/chevron-left.js";
+import r from "../../../icon/chevron-right.js";
+import { Icon as i } from "../Icon/Icon.js";
+import a from "./image-compare.module.js";
+import o, { useCallback 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/media/ImageCompare/ImageCompare.tsx
-var f = (e) => Math.max(0, Math.min(100, e)), p = a.forwardRef(({ before: a, after: p, beforeAlt: m = "", afterAlt: h = "", beforeLabel: g, afterLabel: _, defaultPosition: v = 50, position: y, onPositionChange: b, orientation: x = "horizontal", width: S, height: C, radius: w = "md", labels: T, className: E, ...D }, O) => {
-	let { t: k } = e("common"), { handleAriaLabel: A = k("imageCompare.handle") } = T ?? {}, j = y !== void 0, [M, N] = c(f(v)), P = f(j ? y : M), F = x === "vertical", I = s(null), L = s(!1), R = o((e) => {
-		I.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
-	}, [O]), z = o((e) => {
-		let t = f(e);
-		j || N(t), b?.(t);
-	}, [j, b]), B = o((e, t) => {
-		let n = I.current?.getBoundingClientRect();
+var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, after: m, beforeAlt: h = "", afterAlt: g = "", beforeLabel: _, afterLabel: v, defaultPosition: y = 50, position: b, onPositionChange: x, orientation: S = "horizontal", width: C, height: w, radius: T = "md", labels: E, className: D, ...O }, k) => {
+	let { t: A } = e(t), { handleAriaLabel: j = A("imageCompare.handle") } = E ?? {}, M = b !== void 0, [N, P] = l(p(y)), F = p(M ? b : N), I = S === "vertical", L = c(null), R = c(!1), z = s((e) => {
+		L.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
+	}, [k]), B = s((e) => {
+		let t = p(e);
+		M || P(t), x?.(t);
+	}, [M, x]), V = s((e, t) => {
+		let n = L.current?.getBoundingClientRect();
 		if (!n) return;
-		let r = F ? (t - n.top) / n.height * 100 : (e - n.left) / n.width * 100;
-		z(r);
-	}, [F, z]), V = (e) => {
-		L.current = !0, e.currentTarget.setPointerCapture(e.pointerId), B(e.clientX, e.clientY);
-	}, H = (e) => {
-		L.current && B(e.clientX, e.clientY);
+		let r = I ? (t - n.top) / n.height * 100 : (e - n.left) / n.width * 100;
+		B(r);
+	}, [I, B]), H = (e) => {
+		R.current = !0, e.currentTarget.setPointerCapture(e.pointerId), V(e.clientX, e.clientY);
 	}, U = (e) => {
-		L.current = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+		R.current && V(e.clientX, e.clientY);
 	}, W = (e) => {
-		let t = e.shiftKey ? 10 : 2, n = F ? "ArrowUp" : "ArrowLeft", r = F ? "ArrowDown" : "ArrowRight";
-		e.key === n ? (e.preventDefault(), z(P - t)) : e.key === r ? (e.preventDefault(), z(P + t)) : e.key === "Home" ? (e.preventDefault(), z(0)) : e.key === "End" && (e.preventDefault(), z(100));
-	}, G = F ? { clipPath: `inset(0 0 ${100 - P}% 0)` } : { clipPath: `inset(0 ${100 - P}% 0 0)` }, K = F ? { top: `${P}%` } : { left: `${P}%` };
-	return /* @__PURE__ */ d("div", {
-		ref: R,
-		className: l("wim-image-compare", i.root, F && i.vertical, i[`radius-${w}`], E),
+		R.current = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+	}, G = (e) => {
+		let t = e.shiftKey ? 10 : 2, n = I ? "ArrowUp" : "ArrowLeft", r = I ? "ArrowDown" : "ArrowRight";
+		e.key === n ? (e.preventDefault(), B(F - t)) : e.key === r ? (e.preventDefault(), B(F + t)) : e.key === "Home" ? (e.preventDefault(), B(0)) : e.key === "End" && (e.preventDefault(), B(100));
+	}, K = I ? { clipPath: `inset(0 0 ${100 - F}% 0)` } : { clipPath: `inset(0 ${100 - F}% 0 0)` }, q = I ? { top: `${F}%` } : { left: `${F}%` };
+	return /* @__PURE__ */ f("div", {
+		ref: z,
+		className: u("wim-image-compare", a.root, I && a.vertical, a[`radius-${T}`], D),
 		style: {
-			width: S,
-			height: C
+			width: C,
+			height: w
 		},
-		onPointerDown: V,
-		onPointerMove: H,
-		onPointerUp: U,
-		...D,
+		onPointerDown: H,
+		onPointerMove: U,
+		onPointerUp: W,
+		...O,
 		children: [
-			/* @__PURE__ */ u("img", {
-				className: i.image,
-				src: p,
-				alt: h,
+			/* @__PURE__ */ d("img", {
+				className: a.image,
+				src: m,
+				alt: g,
 				draggable: !1
 			}),
-			_ && /* @__PURE__ */ u("span", {
-				className: l(i.label, i.afterLabel),
-				children: _
+			v && /* @__PURE__ */ d("span", {
+				className: u(a.label, a.afterLabel),
+				children: v
 			}),
-			/* @__PURE__ */ d("div", {
-				className: i.beforeLayer,
-				style: G,
-				children: [/* @__PURE__ */ u("img", {
-					className: i.image,
-					src: a,
-					alt: m,
+			/* @__PURE__ */ f("div", {
+				className: a.beforeLayer,
+				style: K,
+				children: [/* @__PURE__ */ d("img", {
+					className: a.image,
+					src: o,
+					alt: h,
 					draggable: !1
-				}), g && /* @__PURE__ */ u("span", {
-					className: l(i.label, i.beforeLabel),
-					children: g
+				}), _ && /* @__PURE__ */ d("span", {
+					className: u(a.label, a.beforeLabel),
+					children: _
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
-				className: i.divider,
-				style: K,
-				children: [/* @__PURE__ */ u("span", {
-					className: i.line,
+			/* @__PURE__ */ f("div", {
+				className: a.divider,
+				style: q,
+				children: [/* @__PURE__ */ d("span", {
+					className: a.line,
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ d("button", {
+				}), /* @__PURE__ */ f("button", {
 					type: "button",
-					className: i.handle,
+					className: a.handle,
 					role: "slider",
-					"aria-label": A,
-					"aria-orientation": x,
-					"aria-valuenow": Math.round(P),
+					"aria-label": j,
+					"aria-orientation": S,
+					"aria-valuenow": Math.round(F),
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
-					onKeyDown: W,
-					onPointerDown: V,
-					children: [/* @__PURE__ */ u(r, {
-						component: t,
-						size: "sm",
-						className: i.arrow
-					}), /* @__PURE__ */ u(r, {
+					onKeyDown: G,
+					onPointerDown: H,
+					children: [/* @__PURE__ */ d(i, {
 						component: n,
 						size: "sm",
-						className: i.arrow
+						className: a.arrow
+					}), /* @__PURE__ */ d(i, {
+						component: r,
+						size: "sm",
+						className: a.arrow
 					})]
 				})]
 			})
 		]
 	});
 });
-p.displayName = "ImageCompare";
+m.displayName = "ImageCompare";
 //#endregion
-export { p as ImageCompare };
+export { m as ImageCompare };

package/dist/components/media/Lightbox/Lightbox.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../_internal/OverlayBase.cjs"),i=require("../../../icon/chevron-left.cjs"),a=require("../../../icon/chevron-right.cjs"),o=require("../../../icon/close.cjs"),s=require("../../../icon/minus.cjs"),c=require("../../../icon/plus.cjs"),l=require("../Icon/Icon.cjs"),u=require("./lightbox.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=(0,d.createContext)(void 0),h=()=>{let e=(0,d.useContext)(m);if(!e)throw Error(`Lightbox components must be used within Lightbox`);return e},g=({children:e,open:t,onOpenChange:n,defaultOpen:r=!1,defaultIndex:i=0})=>{let[a,o]=(0,d.useState)(r),[s,c]=(0,d.useState)(i),[l,u]=(0,d.useState)([]),f=t!==void 0,h=f?t:a,g=(0,d.useCallback)(e=>{f||o(e),n?.(e)},[f,n]),_=(0,d.useCallback)(e=>{let t=-1;return u(n=>(t=n.length,[...n,e])),t},[]),v=(0,d.useCallback)(e=>{},[]);return(0,p.jsx)(m.Provider,{value:{open:h,setOpen:g,currentIndex:s,setCurrentIndex:c,items:l,setItems:u,registerItem:_,unregisterItem:v},children:e})},_=({children:e,className:r,onClick:i,asChild:a=!1,index:o,src:s,alt:c,caption:l,...d})=>{let{setOpen:m,setCurrentIndex:g,items:_,setItems:v}=h(),{t:y}=n.useWimTranslation(`components`),b=e=>{if(i?.(e),o!==void 0)g(o);else if(s){let e=_.findIndex(e=>e.src===s);if(e!==-1)g(e);else{let e=_.length;v(e=>[...e,{src:s,alt:c,caption:l}]),g(e)}}m(!0)},x=a?t.Root:`button`,S=o===void 0?void 0:_[o]?.alt,C=d[`aria-label`]!==void 0||d[`aria-labelledby`]!==void 0,w=c??S,T=C?void 0:w?y(`lightbox.open_named`,{name:w}):y(`lightbox.open`);return(0,p.jsx)(x,{type:`button`,className:(0,f.default)(u.default.trigger,r),onClick:b,"aria-label":T,...d,children:(0,p.jsx)(t.Slottable,{children:e})})},v=({className:e,showCloseButton:t=!0,showNavigation:m=!0,showCounter:g=!0,closeOnOverlayClick:_=!0,...v})=>{let{open:y,setOpen:b,currentIndex:x,setCurrentIndex:S,items:C}=h(),{t:w}=n.useWimTranslation(`components`),[T,E]=(0,d.useState)(1),D=(0,d.useCallback)(()=>{S((x-1+C.length)%C.length),E(1)},[x,C.length,S]),O=(0,d.useCallback)(()=>{S((x+1)%C.length),E(1)},[x,C.length,S]),k=()=>{E(e=>e===1?2:1)};(0,d.useEffect)(()=>{if(!y)return;let e=e=>{e.key===`ArrowLeft`&&D(),e.key===`ArrowRight`&&O(),e.key===`Escape`&&b(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[y,D,O,b]);let A=C[x];return A?(0,p.jsx)(r.OverlayBase,{...v,open:y,onOpenChange:b,closeOnOverlayClick:_,overlayClassName:u.default.overlay,className:(0,f.default)(`wim-lightbox`,u.default.contentRoot,e),"aria-label":v[`aria-labelledby`]?void 0:v[`aria-label`]??(A.title||A.alt||w(`lightbox.dialog`)),transitionProps:{preset:`fade`,enter:u.default.contentEnter,enterFrom:u.default.contentEnterFrom,enterTo:u.default.contentEnterTo},children:(0,p.jsxs)(`div`,{className:u.default.container,children:[(0,p.jsxs)(`div`,{className:u.default.header,children:[g&&C.length>1&&(0,p.jsx)(`div`,{className:u.default.counter,children:w(`lightbox.counter`,{current:x+1,total:C.length})}),(0,p.jsxs)(`div`,{className:u.default.controls,children:[(0,p.jsx)(`button`,{className:u.default.iconButton,onClick:k,"aria-label":w(T>1?`lightbox.zoom_out`:`lightbox.zoom_in`),children:T>1?(0,p.jsx)(l.Icon,{component:s.default}):(0,p.jsx)(l.Icon,{component:c.default})}),t&&(0,p.jsx)(`button`,{className:u.default.iconButton,onClick:()=>b(!1),"aria-label":w(`lightbox.close`),children:(0,p.jsx)(l.Icon,{component:o.default})})]})]}),(0,p.jsxs)(`div`,{className:u.default.viewport,children:[m&&C.length>1&&(0,p.jsx)(`button`,{className:(0,f.default)(u.default.navButton,u.default.prev),onClick:D,"aria-label":w(`lightbox.previous`),children:(0,p.jsx)(l.Icon,{component:i.default})}),(0,p.jsx)(`div`,{className:u.default.mediaWrapper,style:{transform:`scale(${T})`},children:(0,p.jsx)(`img`,{src:A.src,alt:A.alt||``,className:u.default.image})}),m&&C.length>1&&(0,p.jsx)(`button`,{className:(0,f.default)(u.default.navButton,u.default.next),onClick:O,"aria-label":w(`lightbox.next`),children:(0,p.jsx)(l.Icon,{component:a.default})})]}),(A.title||A.caption)&&(0,p.jsxs)(`div`,{className:u.default.footer,children:[A.title&&(0,p.jsx)(`h3`,{className:u.default.title,children:A.title}),A.caption&&(0,p.jsx)(`p`,{className:u.default.caption,children:A.caption})]})]})}):null},y=({items:e,children:t})=>{let{setItems:n}=h();return(0,d.useEffect)(()=>{n(e)},[e,n]),(0,p.jsx)(`div`,{className:u.default.gallery,children:t})},b=g;b.Trigger=_,b.Content=v,b.Gallery=y,b.displayName=`Lightbox`,_.displayName=`Lightbox.Trigger`,v.displayName=`Lightbox.Content`,y.displayName=`Lightbox.Gallery`,exports.Lightbox=g,exports.LightboxContent=v,exports.LightboxGallery=y,exports.LightboxRoot=b,exports.default=b,exports.LightboxTrigger=_,exports.useLightbox=h;
+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("../../_internal/OverlayBase.cjs"),i=require("../../../i18n/generated/components.cjs"),a=require("../../../icon/chevron-left.cjs"),o=require("../../../icon/chevron-right.cjs"),s=require("../../../icon/close.cjs"),c=require("../../../icon/minus.cjs"),l=require("../../../icon/plus.cjs"),u=require("../Icon/Icon.cjs"),d=require("./lightbox.module.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("classnames");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=(0,f.createContext)(void 0),g=()=>{let e=(0,f.useContext)(h);if(!e)throw Error(`Lightbox components must be used within Lightbox`);return e},_=({children:e,open:t,onOpenChange:n,defaultOpen:r=!1,defaultIndex:i=0})=>{let[a,o]=(0,f.useState)(r),[s,c]=(0,f.useState)(i),[l,u]=(0,f.useState)([]),d=t!==void 0,p=d?t:a,g=(0,f.useCallback)(e=>{d||o(e),n?.(e)},[d,n]),_=(0,f.useCallback)(e=>{let t=-1;return u(n=>(t=n.length,[...n,e])),t},[]),v=(0,f.useCallback)(e=>{},[]);return(0,m.jsx)(h.Provider,{value:{open:p,setOpen:g,currentIndex:s,setCurrentIndex:c,items:l,setItems:u,registerItem:_,unregisterItem:v},children:e})},v=({children:e,className:r,onClick:a,asChild:o=!1,index:s,src:c,alt:l,caption:u,...f})=>{let{setOpen:h,setCurrentIndex:_,items:v,setItems:y}=g(),{t:b}=n.useWimTranslation(i.componentsNs),x=e=>{if(a?.(e),s!==void 0)_(s);else if(c){let e=v.findIndex(e=>e.src===c);if(e!==-1)_(e);else{let e=v.length;y(e=>[...e,{src:c,alt:l,caption:u}]),_(e)}}h(!0)},S=o?t.Root:`button`,C=s===void 0?void 0:v[s]?.alt,w=f[`aria-label`]!==void 0||f[`aria-labelledby`]!==void 0,T=l??C,E=w?void 0:T?b(`lightbox.open_named`,{name:T}):b(`lightbox.open`);return(0,m.jsx)(S,{type:`button`,className:(0,p.default)(d.default.trigger,r),onClick:x,"aria-label":E,...f,children:(0,m.jsx)(t.Slottable,{children:e})})},y=({className:e,showCloseButton:t=!0,showNavigation:h=!0,showCounter:_=!0,closeOnOverlayClick:v=!0,...y})=>{let{open:b,setOpen:x,currentIndex:S,setCurrentIndex:C,items:w}=g(),{t:T}=n.useWimTranslation(i.componentsNs),[E,D]=(0,f.useState)(1),O=(0,f.useCallback)(()=>{C((S-1+w.length)%w.length),D(1)},[S,w.length,C]),k=(0,f.useCallback)(()=>{C((S+1)%w.length),D(1)},[S,w.length,C]),A=()=>{D(e=>e===1?2:1)};(0,f.useEffect)(()=>{if(!b)return;let e=e=>{e.key===`ArrowLeft`&&O(),e.key===`ArrowRight`&&k(),e.key===`Escape`&&x(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[b,O,k,x]);let j=w[S];return j?(0,m.jsx)(r.OverlayBase,{...y,open:b,onOpenChange:x,closeOnOverlayClick:v,overlayClassName:d.default.overlay,className:(0,p.default)(`wim-lightbox`,d.default.contentRoot,e),"aria-label":y[`aria-labelledby`]?void 0:y[`aria-label`]??(j.title||j.alt||T(`lightbox.dialog`)),transitionProps:{preset:`fade`,enter:d.default.contentEnter,enterFrom:d.default.contentEnterFrom,enterTo:d.default.contentEnterTo},children:(0,m.jsxs)(`div`,{className:d.default.container,children:[(0,m.jsxs)(`div`,{className:d.default.header,children:[_&&w.length>1&&(0,m.jsx)(`div`,{className:d.default.counter,children:T(`lightbox.counter`,{current:S+1,total:w.length})}),(0,m.jsxs)(`div`,{className:d.default.controls,children:[(0,m.jsx)(`button`,{className:d.default.iconButton,onClick:A,"aria-label":T(E>1?`lightbox.zoom_out`:`lightbox.zoom_in`),children:E>1?(0,m.jsx)(u.Icon,{component:c.default}):(0,m.jsx)(u.Icon,{component:l.default})}),t&&(0,m.jsx)(`button`,{className:d.default.iconButton,onClick:()=>x(!1),"aria-label":T(`lightbox.close`),children:(0,m.jsx)(u.Icon,{component:s.default})})]})]}),(0,m.jsxs)(`div`,{className:d.default.viewport,children:[h&&w.length>1&&(0,m.jsx)(`button`,{className:(0,p.default)(d.default.navButton,d.default.prev),onClick:O,"aria-label":T(`lightbox.previous`),children:(0,m.jsx)(u.Icon,{component:a.default})}),(0,m.jsx)(`div`,{className:d.default.mediaWrapper,style:{transform:`scale(${E})`},children:(0,m.jsx)(`img`,{src:j.src,alt:j.alt||``,className:d.default.image})}),h&&w.length>1&&(0,m.jsx)(`button`,{className:(0,p.default)(d.default.navButton,d.default.next),onClick:k,"aria-label":T(`lightbox.next`),children:(0,m.jsx)(u.Icon,{component:o.default})})]}),(j.title||j.caption)&&(0,m.jsxs)(`div`,{className:d.default.footer,children:[j.title&&(0,m.jsx)(`h3`,{className:d.default.title,children:j.title}),j.caption&&(0,m.jsx)(`p`,{className:d.default.caption,children:j.caption})]})]})}):null},b=({items:e,children:t})=>{let{setItems:n}=g();return(0,f.useEffect)(()=>{n(e)},[e,n]),(0,m.jsx)(`div`,{className:d.default.gallery,children:t})},x=_;x.Trigger=v,x.Content=y,x.Gallery=b,x.displayName=`Lightbox`,v.displayName=`Lightbox.Trigger`,y.displayName=`Lightbox.Content`,b.displayName=`Lightbox.Gallery`,exports.Lightbox=_,exports.LightboxContent=y,exports.LightboxGallery=b,exports.LightboxRoot=x,exports.default=x,exports.LightboxTrigger=v,exports.useLightbox=g;