wimui 0.51.1 → 0.52.0

package/dist/components/feedback/ErrorBoundary/ErrorBoundary.js

@@ -1,62 +1,63 @@
 "use client";
 import { Box as e } from "../../layout/Box/Box.js";
 import { useWimTranslation as t } from "../../../i18n/useWimTranslation.js";
-import { Stack as n } from "../../layout/Stack/Stack.js";
-import { Button as r } from "../../form/Button/Button.js";
-import { Alert as i } from "../Alert/Alert.js";
-import a from "./errorboundary.module.js";
-import { Component as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { commonNs as n } from "../../../i18n/generated/common.js";
+import { Stack as r } from "../../layout/Stack/Stack.js";
+import { Button as i } from "../../form/Button/Button.js";
+import { Alert as a } from "../Alert/Alert.js";
+import o from "./errorboundary.module.js";
+import { Component as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/feedback/ErrorBoundary/ErrorBoundary.tsx
-var u = ({ error: o, errorInfo: u, reset: d, labels: f }) => {
-	let { t: p } = t("common"), [m, h] = s(!1), g = {
-		title: f?.title ?? p("error.boundary_title"),
-		retry: f?.retry ?? p("error.boundary_retry"),
-		showDetails: f?.showDetails ?? p("error.boundary_show_details"),
-		hideDetails: f?.hideDetails ?? p("error.boundary_hide_details")
+var d = ({ error: s, errorInfo: d, reset: f, labels: p }) => {
+	let { t: m } = t(n), [h, g] = c(!1), _ = {
+		title: p?.title ?? m("error.boundary_title"),
+		retry: p?.retry ?? m("error.boundary_retry"),
+		showDetails: p?.showDetails ?? m("error.boundary_show_details"),
+		hideDetails: p?.hideDetails ?? m("error.boundary_hide_details")
 	};
-	return /* @__PURE__ */ c(e, {
+	return /* @__PURE__ */ l(e, {
 		p: "lg",
 		radius: "md",
 		bg: "var(--wim-color-danger-subtle)",
-		className: `wim-error-boundary ${a.fallback}`,
-		children: /* @__PURE__ */ l(n, {
+		className: `wim-error-boundary ${o.fallback}`,
+		children: /* @__PURE__ */ u(r, {
 			gap: "md",
 			children: [
-				/* @__PURE__ */ c(i, {
+				/* @__PURE__ */ l(a, {
 					intent: "danger",
-					title: g.title,
-					description: o.message
+					title: _.title,
+					description: s.message
 				}),
-				/* @__PURE__ */ l(n, {
+				/* @__PURE__ */ u(r, {
 					direction: "row",
 					gap: "sm",
 					wrap: !0,
-					children: [/* @__PURE__ */ c(r, {
-						onClick: d,
+					children: [/* @__PURE__ */ l(i, {
+						onClick: f,
 						variant: "solid",
-						children: g.retry
-					}), /* @__PURE__ */ c(r, {
-						onClick: () => h(!m),
+						children: _.retry
+					}), /* @__PURE__ */ l(i, {
+						onClick: () => g(!h),
 						variant: "outline",
-						children: m ? g.hideDetails : g.showDetails
+						children: h ? _.hideDetails : _.showDetails
 					})]
 				}),
-				m && /* @__PURE__ */ c(e, {
+				h && /* @__PURE__ */ l(e, {
 					p: "md",
 					bg: "surface-inset",
 					radius: "component",
-					className: a.details,
-					children: /* @__PURE__ */ l("code", { children: [
-						o.toString(),
-						/* @__PURE__ */ c("br", {}),
-						u?.componentStack
+					className: o.details,
+					children: /* @__PURE__ */ u("code", { children: [
+						s.toString(),
+						/* @__PURE__ */ l("br", {}),
+						d?.componentStack
 					] })
 				})
 			]
 		})
 	});
-}, d = class extends o {
+}, f = class extends s {
 	state = {
 		hasError: !1,
 		error: null,
@@ -80,7 +81,7 @@ var u = ({ error: o, errorInfo: u, reset: d, labels: f }) => {
 	};
 	render() {
 		let { hasError: e, error: t, errorInfo: n } = this.state, { children: r, fallback: i, labels: a } = this.props;
-		return e && t ? typeof i == "function" ? i(t, n, this.reset) : i || /* @__PURE__ */ c(u, {
+		return e && t ? typeof i == "function" ? i(t, n, this.reset) : i || /* @__PURE__ */ l(d, {
 			error: t,
 			errorInfo: n,
 			reset: this.reset,
@@ -89,4 +90,4 @@ var u = ({ error: o, errorInfo: u, reset: d, labels: f }) => {
 	}
 };
 //#endregion
-export { d as ErrorBoundary };
+export { f as ErrorBoundary };

package/dist/components/feedback/ScrollProgress/ScrollProgress.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("./scrollprogress.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=({intent:e=`primary`,target:o,className:s,"aria-label":c,...l})=>{let{t:u}=t.useWimTranslation(`common`),[d,f]=(0,r.useState)(0);return(0,r.useEffect)(()=>{let e=()=>{let e=0;if(o&&o.current){let t=o.current,n=t.scrollHeight-t.clientHeight;n>0&&(e=t.scrollTop/n*100)}else{let t=document.documentElement.scrollHeight-window.innerHeight;t>0&&(e=window.scrollY/t*100)}f(e)},t=o&&o.current?o.current:window;return t.addEventListener(`scroll`,e),e(),()=>{t.removeEventListener(`scroll`,e)}},[o]),(0,a.jsx)(`div`,{className:(0,i.default)(`wim-scroll-progress`,n.default.root,n.default[e],s),role:`progressbar`,"aria-valuenow":Math.round(d),"aria-valuemin":0,"aria-valuemax":100,"aria-label":c??u(`a11y.scroll_progress`),...l,children:(0,a.jsx)(`div`,{className:n.default.bar,style:{width:`${d}%`}})})};exports.ScrollProgress=o;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("./scrollprogress.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=({intent:e=`primary`,target:s,className:c,"aria-label":l,...u})=>{let{t:d}=t.useWimTranslation(n.commonNs),[f,p]=(0,i.useState)(0);return(0,i.useEffect)(()=>{let e=()=>{let e=0;if(s&&s.current){let t=s.current,n=t.scrollHeight-t.clientHeight;n>0&&(e=t.scrollTop/n*100)}else{let t=document.documentElement.scrollHeight-window.innerHeight;t>0&&(e=window.scrollY/t*100)}p(e)},t=s&&s.current?s.current:window;return t.addEventListener(`scroll`,e),e(),()=>{t.removeEventListener(`scroll`,e)}},[s]),(0,o.jsx)(`div`,{className:(0,a.default)(`wim-scroll-progress`,r.default.root,r.default[e],c),role:`progressbar`,"aria-valuenow":Math.round(f),"aria-valuemin":0,"aria-valuemax":100,"aria-label":l??d(`a11y.scroll_progress`),...u,children:(0,o.jsx)(`div`,{className:r.default.bar,style:{width:`${f}%`}})})};exports.ScrollProgress=s;

package/dist/components/feedback/ScrollProgress/ScrollProgress.js

@@ -1,40 +1,41 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import t from "./scrollprogress.module.js";
-import { useEffect as n, useState as r } from "react";
-import i from "classnames";
-import { jsx as a } from "react/jsx-runtime";
+import { commonNs as t } from "../../../i18n/generated/common.js";
+import n from "./scrollprogress.module.js";
+import { useEffect as r, useState as i } from "react";
+import a from "classnames";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/components/feedback/ScrollProgress/ScrollProgress.tsx
-var o = ({ intent: o = "primary", target: s, className: c, "aria-label": l, ...u }) => {
-	let { t: d } = e("common"), [f, p] = r(0);
-	return n(() => {
+var s = ({ intent: s = "primary", target: c, className: l, "aria-label": u, ...d }) => {
+	let { t: f } = e(t), [p, m] = i(0);
+	return r(() => {
 		let e = () => {
 			let e = 0;
-			if (s && s.current) {
-				let t = s.current, n = t.scrollHeight - t.clientHeight;
+			if (c && c.current) {
+				let t = c.current, n = t.scrollHeight - t.clientHeight;
 				n > 0 && (e = t.scrollTop / n * 100);
 			} else {
 				let t = document.documentElement.scrollHeight - window.innerHeight;
 				t > 0 && (e = window.scrollY / t * 100);
 			}
-			p(e);
-		}, t = s && s.current ? s.current : window;
+			m(e);
+		}, t = c && c.current ? c.current : window;
 		return t.addEventListener("scroll", e), e(), () => {
 			t.removeEventListener("scroll", e);
 		};
-	}, [s]), /* @__PURE__ */ a("div", {
-		className: i("wim-scroll-progress", t.root, t[o], c),
+	}, [c]), /* @__PURE__ */ o("div", {
+		className: a("wim-scroll-progress", n.root, n[s], l),
 		role: "progressbar",
-		"aria-valuenow": Math.round(f),
+		"aria-valuenow": Math.round(p),
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
-		"aria-label": l ?? d("a11y.scroll_progress"),
-		...u,
-		children: /* @__PURE__ */ a("div", {
-			className: t.bar,
-			style: { width: `${f}%` }
+		"aria-label": u ?? f("a11y.scroll_progress"),
+		...d,
+		children: /* @__PURE__ */ o("div", {
+			className: n.bar,
+			style: { width: `${p}%` }
 		})
 	});
 };
 //#endregion
-export { o as ScrollProgress };
+export { s as ScrollProgress };

package/dist/components/feedback/Tour/Tour.cjs

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

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

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

package/dist/components/form/Button/Button.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("../../../utilities/style-utils.cjs"),r=require("../../../i18n/useWimTranslation.cjs"),i=require("../../../icon/loading.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("./button.module.cjs"),s=require("../../../hooks/useMergedRef.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=c.default.forwardRef(({asChild:e=!1,size:d=`md`,variant:f=`outline`,intent:p=`default`,icon:m,iconPosition:h=`left`,loading:g=!1,backgroundColor:_,justify:v=`center`,animateWidth:y=!1,fullWidth:b=!1,styles:x,"aria-label":S,className:C,disabled:w,children:T,...E},D)=>{let O=c.default.useRef(null),k=s.useMergedRef(O,D),[A,j]=c.default.useState(`auto`),M=c.default.useRef(!0);c.default.useLayoutEffect(()=>{if(!y||!O.current)return;if(M.current){M.current=!1;return}let e=O.current,t=e.getBoundingClientRect().width;j(t);let n=e.style.width,r=e.style.minWidth;e.style.width=`auto`,e.style.minWidth=`0`;let i=Math.ceil(e.getBoundingClientRect().width)+2;e.style.width=n,e.style.minWidth=r;let a=requestAnimationFrame(()=>{j(i)});return()=>cancelAnimationFrame(a)},[T,y]);let{t:N}=r.useWimTranslation(`common`),P=w,F;typeof S==`string`?F=S:S!==!1&&(!T&&typeof m==`string`?F=m:g&&(F=N(`a11y.loading`)));let I=v===`start`?`flex-start`:v===`end`?`flex-end`:v===`between`?`space-between`:v,L=g?(0,u.jsx)(`span`,{className:(0,l.default)(o.default.loader,x?.loader),children:(0,u.jsx)(a.Icon,{component:i.default,spin:!0,size:d})}):m?typeof m==`string`?(0,u.jsx)(a.Icon,{name:m,size:d,className:x?.icon}):m:null;return(0,u.jsxs)(e?t.Root:`button`,{ref:k,type:e?void 0:`button`,style:{...E.style,justifyContent:I,..._?{backgroundColor:n.getColorValue(_)}:{},...y&&A!==`auto`?{width:`${A}px`,transitionProperty:E.style?.transitionProperty||`width, background-color, border-color, box-shadow, transform`,transitionDuration:E.style?.transitionDuration||`var(--wim-duration-base)`,transitionTimingFunction:E.style?.transitionTimingFunction||`var(--wim-easing-standard)`,overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`clip`}:{}},className:(0,l.default)(`wim-button`,o.default.root,o.default[d],o.default[f],o.default[p],g&&o.default.loading,y&&o.default.animatedWidth,b&&o.default.fullWidth,!T&&!!m&&o.default.iconOnly,C,x?.root),disabled:(P||g)&&!e?!0:void 0,"aria-label":F,"aria-busy":g||void 0,...e?E:{...E},children:[e&&L&&h===`left`?L:null,e?(0,u.jsx)(t.Slottable,{children:T}):(0,u.jsxs)(`span`,{className:o.default.content,children:[L&&h===`left`&&L,T,L&&h===`right`&&L]}),e&&L&&h===`right`?L:null]})});d.displayName=`Button`,exports.Button=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../utilities/style-utils.cjs"),r=require("../../../i18n/useWimTranslation.cjs"),i=require("../../../i18n/generated/common.cjs"),a=require("../../../hooks/useMergedRef.cjs"),o=require("../../../icon/loading.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("./button.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=l.default.forwardRef(({asChild:e=!1,size:f=`md`,variant:p=`outline`,intent:m=`default`,icon:h,iconPosition:g=`left`,loading:_=!1,backgroundColor:v,justify:y=`center`,animateWidth:b=!1,fullWidth:x=!1,styles:S,"aria-label":C,className:w,disabled:T,children:E,...D},O)=>{let k=l.default.useRef(null),A=a.useMergedRef(k,O),[j,M]=l.default.useState(`auto`),N=l.default.useRef(!0);l.default.useLayoutEffect(()=>{if(!b||!k.current)return;if(N.current){N.current=!1;return}let e=k.current,t=e.getBoundingClientRect().width;M(t);let n=e.style.width,r=e.style.minWidth;e.style.width=`auto`,e.style.minWidth=`0`;let i=Math.ceil(e.getBoundingClientRect().width)+2;e.style.width=n,e.style.minWidth=r;let a=requestAnimationFrame(()=>{M(i)});return()=>cancelAnimationFrame(a)},[E,b]);let{t:P}=r.useWimTranslation(i.commonNs),F=T,I;typeof C==`string`?I=C:C!==!1&&(!E&&typeof h==`string`?I=h:_&&(I=P(`a11y.loading`)));let L=y===`start`?`flex-start`:y===`end`?`flex-end`:y===`between`?`space-between`:y,R=_?(0,d.jsx)(`span`,{className:(0,u.default)(c.default.loader,S?.loader),children:(0,d.jsx)(s.Icon,{component:o.default,spin:!0,size:f})}):h?typeof h==`string`?(0,d.jsx)(s.Icon,{name:h,size:f,className:S?.icon}):h:null;return(0,d.jsxs)(e?t.Root:`button`,{ref:A,type:e?void 0:`button`,style:{...D.style,justifyContent:L,...v?{backgroundColor:n.getColorValue(v)}:{},...b&&j!==`auto`?{width:`${j}px`,transitionProperty:D.style?.transitionProperty||`width, background-color, border-color, box-shadow, transform`,transitionDuration:D.style?.transitionDuration||`var(--wim-duration-base)`,transitionTimingFunction:D.style?.transitionTimingFunction||`var(--wim-easing-standard)`,overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`clip`}:{}},className:(0,u.default)(`wim-button`,c.default.root,c.default[f],c.default[p],c.default[m],_&&c.default.loading,b&&c.default.animatedWidth,x&&c.default.fullWidth,!E&&!!h&&c.default.iconOnly,w,S?.root),disabled:(F||_)&&!e?!0:void 0,"aria-label":I,"aria-busy":_||void 0,...e?D:{...D},children:[e&&R&&g===`left`?R:null,e?(0,d.jsx)(t.Slottable,{children:E}):(0,d.jsxs)(`span`,{className:c.default.content,children:[R&&g===`left`&&R,E,R&&g===`right`&&R]}),e&&R&&g===`right`?R:null]})});f.displayName=`Button`,exports.Button=f;