wimui 0.63.5 → 0.64.2

package/dist/components/data-display/Carousel/Carousel.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("../../../i18n/generated/components.cjs"),i=require("../../../icon/chevron-left.cjs"),ee=require("../../../icon/chevron-right.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("./carousel.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,t)=>typeof e==`number`?e:e?t>=1280&&e.xl?e.xl:t>=1024&&e.lg?e.lg:t>=768&&e.md?e.md:t>=640&&e.sm?e.sm:e.base||1:1,d=(0,s.forwardRef)(({children:e,autoPlay:d=!1,interval:f=5e3,showIndicators:p=!0,showControls:m=!0,controlsPlacement:h=`overlay`,loop:g=!0,slidesToShow:_=1,aspectRatio:v,objectFit:y=`cover`,labels:b,className:x,asChild:S,...C},w)=>{let T=S?t.Root:`div`,{t:E}=n.useWimTranslation(r.componentsNs),D={slideLabel:e=>E(`carousel.slide`,{number:e}),prevSlide:E(`carousel.prev_slide`),nextSlide:E(`carousel.next_slide`),goToSlide:e=>E(`carousel.go_to_slide`,{number:e}),...b},O=S&&s.default.isValidElement(e)?e.props.children:e,k=(0,s.useMemo)(()=>s.default.Children.toArray(O),[O]),A=k.length,[te,j]=(0,s.useState)(typeof window<`u`?window.innerWidth:0),[M,N]=(0,s.useState)(g?A:0),[P,F]=(0,s.useState)(!1),[I,L]=(0,s.useState)(!1),R=u(_,te),z=(0,s.useRef)(null),B=(0,s.useRef)(null),V=(0,s.useRef)(null),H=(0,s.useRef)(null);(0,s.useEffect)(()=>{let e=()=>j(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let U=(0,s.useMemo)(()=>!g||A===0?k:[...k,...k,...k],[k,g,A]),W=(0,s.useCallback)(()=>{if(!P){if(!g){N(e=>Math.min(e+1,A-R));return}F(!0),N(e=>e+1)}},[P,g,A,R]),G=(0,s.useCallback)(()=>{if(!P){if(!g){N(e=>Math.max(e-1,0));return}F(!0),N(e=>e-1)}},[P,g]),K=e=>{P||(g?(F(!0),N(e+A)):N(e))},q=()=>{g&&(F(!1),M>=A*2?N(M-A):M<A&&N(M+A))};(0,s.useEffect)(()=>(d&&!I&&A>R&&(z.current=window.setInterval(W,f)),()=>{z.current&&window.clearInterval(z.current)}),[d,f,W,A,R,I]);let J=e=>{e.key===`ArrowLeft`?G():e.key===`ArrowRight`&&W()},Y=e=>{V.current=e.targetTouches[0].clientX},X=e=>{H.current=e.targetTouches[0].clientX},Z=()=>{if(!V.current||!H.current)return;let e=V.current-H.current;e>50?W():e<-50&&G(),V.current=null,H.current=null};if(A===0)return null;let Q=100/R,ne=-M*Q,$=(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`div`,{className:o.default.viewport,children:(0,l.jsx)(`div`,{ref:B,className:(0,c.default)(o.default.track,P&&o.default.transition),style:{transform:`translateX(${ne}%)`},onTransitionEnd:q,onTouchStart:Y,onTouchMove:X,onTouchEnd:Z,children:U.map((e,t)=>(0,l.jsx)(`div`,{className:(0,c.default)(o.default.item,v&&o.default.hasAspectRatio),style:{flex:`0 0 ${Q}%`,width:`${Q}%`,...v?{aspectRatio:v,"--wim-carousel-object-fit":y}:{}},role:`group`,"aria-roledescription":E(`carousel.slide_roledescription`),"aria-label":D.slideLabel(t%A+1),children:e},t))})}),m&&A>R&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`button`,{className:(0,c.default)(o.default.control,o.default.prev),onClick:G,"aria-label":D.prevSlide,disabled:!g&&M===0,tabIndex:-1,children:(0,l.jsx)(a.Icon,{component:i.default,size:`md`})}),(0,l.jsx)(`button`,{className:(0,c.default)(o.default.control,o.default.next),onClick:W,"aria-label":D.nextSlide,disabled:!g&&M>=A-R,tabIndex:-1,children:(0,l.jsx)(a.Icon,{component:ee.default,size:`md`})})]}),p&&A>1&&(0,l.jsx)(`div`,{className:o.default.indicators,children:k.map((e,t)=>{let n=g?M%A===t:M===t;return(0,l.jsx)(`button`,{className:(0,c.default)(o.default.indicator,n&&o.default.active),onClick:()=>K(t),"aria-label":D.goToSlide(t+1),"aria-current":n?`true`:`false`},t)})})]});return(0,l.jsx)(T,{ref:w,className:(0,c.default)(`wim-carousel`,o.default.root,h===`outside`&&o.default.controlsOutside,x),onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),onFocus:()=>L(!0),onBlur:()=>L(!1),onKeyDown:J,tabIndex:0,role:`region`,"aria-roledescription":E(`carousel.roledescription`),...C,children:S?(0,l.jsx)(t.Slottable,{child:e,children:()=>$}):$})});d.displayName=`Carousel`,exports.Carousel=d;
+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("../../../hooks/useMergedRef.cjs"),i=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),ee=require("../../../i18n/generated/components.cjs"),a=require("../../../icon/chevron-left.cjs"),te=require("../../../icon/chevron-right.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("./carousel.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=(e,t)=>typeof e==`number`?e:e?t>=1280&&e.xl?e.xl:t>=1024&&e.lg?e.lg:t>=768&&e.md?e.md:t>=640&&e.sm?e.sm:e.base||1:1,f=(0,c.forwardRef)(({children:e,autoPlay:f=!1,interval:p=5e3,showIndicators:m=!0,showControls:ne=!0,controlsPlacement:re=`overlay`,loop:h=!0,slidesToShow:g=1,aspectRatio:_,objectFit:v=`cover`,labels:y,className:b,asChild:x,...ie},ae)=>{let oe=x?t.Root:`div`,{t:S}=n.useWimTranslation(ee.componentsNs),C={slideLabel:e=>S(`carousel.slide`,{number:e}),prevSlide:S(`carousel.prev_slide`),nextSlide:S(`carousel.next_slide`),goToSlide:e=>S(`carousel.go_to_slide`,{number:e}),slideStatus:(e,t)=>S(`carousel.slide_status`,{current:e,total:t}),...y},w=x&&c.default.isValidElement(e)?e.props.children:e,T=(0,c.useMemo)(()=>c.default.Children.toArray(w),[w]),E=T.length,[D,O]=(0,c.useState)(typeof window<`u`?window.innerWidth:0),[k,A]=(0,c.useState)(h?E:0),[j,M]=(0,c.useState)(!1),[N,P]=(0,c.useState)(!1),F=d(g,D),I=(0,c.useRef)(null),L=(0,c.useRef)(null),R=(0,c.useRef)(null),z=(0,c.useRef)(null),B=(0,c.useRef)(null),V=(0,c.useRef)(null),H=(0,c.useRef)(null),U=r.useMergedRef(ae,H);(0,c.useEffect)(()=>{let e=()=>O(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let W=(0,c.useMemo)(()=>!h||E===0?T:[...T,...T,...T],[T,h,E]),G=(0,c.useCallback)(()=>{if(!j){if(!h){A(e=>Math.min(e+1,E-F));return}M(!0),A(e=>e+1)}},[j,h,E,F]),K=(0,c.useCallback)(()=>{if(!j){if(!h){A(e=>Math.max(e-1,0));return}M(!0),A(e=>e-1)}},[j,h]),se=e=>{j||(h?(M(!0),A(e+E)):A(e))},ce=()=>{h&&(M(!1),k>=E*2?A(k-E):k<E&&A(k+E))};(0,c.useEffect)(()=>(f&&!N&&E>F&&(I.current=window.setInterval(G,p)),()=>{I.current&&window.clearInterval(I.current)}),[f,p,G,E,F,N]);let[le,ue]=(0,c.useState)(``),q=h?k%E:k,J=h?E-1:Math.max(E-F,0),Y=e=>{j||e===q||ue(C.slideStatus(e+1,E))},de=e=>{Y(e),se(e)},X=()=>{let e=h?(q-1+E)%E:Math.max(q-1,0);Y(e),!h&&e===0&&document.activeElement===B.current&&H.current?.focus(),K()},Z=()=>{let e=h?(q+1)%E:Math.min(q+1,J);Y(e),!h&&e===J&&document.activeElement===V.current&&H.current?.focus(),G()},fe=e=>{e.key===`ArrowLeft`?X():e.key===`ArrowRight`&&Z()},pe=e=>{R.current=e.targetTouches[0].clientX},me=e=>{z.current=e.targetTouches[0].clientX},he=()=>{if(!R.current||!z.current)return;let e=R.current-z.current;e>50?G():e<-50&&K(),R.current=null,z.current=null};if(E===0)return null;let Q=100/F,ge=-k*Q,$=(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(i.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:le}),(0,u.jsx)(`div`,{className:s.default.viewport,children:(0,u.jsx)(`div`,{ref:L,className:(0,l.default)(s.default.track,j&&s.default.transition),style:{transform:`translateX(${ge}%)`},onTransitionEnd:ce,onTouchStart:pe,onTouchMove:me,onTouchEnd:he,children:W.map((e,t)=>(0,u.jsx)(`div`,{className:(0,l.default)(s.default.item,_&&s.default.hasAspectRatio),style:{flex:`0 0 ${Q}%`,width:`${Q}%`,..._?{aspectRatio:_,"--wim-carousel-object-fit":v}:{}},role:`group`,"aria-roledescription":S(`carousel.slide_roledescription`),"aria-label":C.slideLabel(t%E+1),children:e},t))})}),ne&&E>F&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`button`,{ref:B,className:(0,l.default)(s.default.control,s.default.prev),onClick:X,"aria-label":C.prevSlide,disabled:!h&&k===0,children:(0,u.jsx)(o.Icon,{component:a.default,size:`md`})}),(0,u.jsx)(`button`,{ref:V,className:(0,l.default)(s.default.control,s.default.next),onClick:Z,"aria-label":C.nextSlide,disabled:!h&&k>=E-F,children:(0,u.jsx)(o.Icon,{component:te.default,size:`md`})})]}),m&&E>1&&(0,u.jsx)(`div`,{className:s.default.indicators,children:T.map((e,t)=>{let n=h?k%E===t:k===t;return(0,u.jsx)(`button`,{className:(0,l.default)(s.default.indicator,n&&s.default.active),onClick:()=>de(t),"aria-label":C.goToSlide(t+1),"aria-current":n?`true`:`false`},t)})})]});return(0,u.jsx)(oe,{ref:U,className:(0,l.default)(`wim-carousel`,s.default.root,re===`outside`&&s.default.controlsOutside,b),onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1),onFocus:()=>P(!0),onBlur:()=>P(!1),onKeyDown:fe,tabIndex:0,role:`region`,"aria-roledescription":S(`carousel.roledescription`),...ie,children:x?(0,u.jsx)(t.Slottable,{child:e,children:()=>$}):$})});f.displayName=`Carousel`,exports.Carousel=f;

package/dist/components/data-display/Carousel/Carousel.d.ts

@@ -11,6 +11,8 @@ export type CarouselLabels = {
     prevSlide?: string;
     nextSlide?: string;
     goToSlide?: (number: number) => string;
+    /** Announced to screen readers when the user changes the slide. Receives the slide number and the slide count. */
+    slideStatus?: (current: number, total: number) => string;
 };
 export type CarouselProps = {
     /** Content of the carousel */

package/dist/components/data-display/Carousel/Carousel.js

@@ -1,163 +1,184 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
 import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
-import { componentsNs as ee } from "../../../i18n/generated/components.js";
-import te from "../../../icon/chevron-left.js";
-import r from "../../../icon/chevron-right.js";
+import { useMergedRef as ee } from "../../../hooks/useMergedRef.js";
+import { VisuallyHidden as te } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import { componentsNs as r } from "../../../i18n/generated/components.js";
+import ne from "../../../icon/chevron-left.js";
+import re from "../../../icon/chevron-right.js";
 import { Icon as i } from "../../media/Icon/Icon.js";
 import a from "./carousel.module.js";
 import o, { forwardRef as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
 import p from "classnames";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/data-display/Carousel/Carousel.tsx
-var _ = (e, t) => typeof e == "number" ? e : e ? t >= 1280 && e.xl ? e.xl : t >= 1024 && e.lg ? e.lg : t >= 768 && e.md ? e.md : t >= 640 && e.sm ? e.sm : e.base || 1 : 1, v = s(({ children: s, autoPlay: v = !1, interval: y = 5e3, showIndicators: ne = !0, showControls: b = !0, controlsPlacement: x = "overlay", loop: S = !0, slidesToShow: C = 1, aspectRatio: w, objectFit: T = "cover", labels: E, className: D, asChild: O, ...k }, A) => {
-	let j = O ? e : "div", { t: M } = n(ee), N = {
-		slideLabel: (e) => M("carousel.slide", { number: e }),
-		prevSlide: M("carousel.prev_slide"),
-		nextSlide: M("carousel.next_slide"),
-		goToSlide: (e) => M("carousel.go_to_slide", { number: e }),
-		...E
-	}, P = O && o.isValidElement(s) ? s.props.children : s, F = u(() => o.Children.toArray(P), [P]), I = F.length, [re, ie] = f(typeof window < "u" ? window.innerWidth : 0), [L, R] = f(S ? I : 0), [z, B] = f(!1), [V, H] = f(!1), U = _(C, re), W = d(null), G = d(null), K = d(null), q = d(null);
+var ie = (e, t) => typeof e == "number" ? e : e ? t >= 1280 && e.xl ? e.xl : t >= 1024 && e.lg ? e.lg : t >= 768 && e.md ? e.md : t >= 640 && e.sm ? e.sm : e.base || 1 : 1, _ = s(({ children: s, autoPlay: _ = !1, interval: v = 5e3, showIndicators: ae = !0, showControls: oe = !0, controlsPlacement: se = "overlay", loop: y = !0, slidesToShow: ce = 1, aspectRatio: b, objectFit: le = "cover", labels: ue, className: x, asChild: S, ...C }, w) => {
+	let de = S ? e : "div", { t: T } = n(r), E = {
+		slideLabel: (e) => T("carousel.slide", { number: e }),
+		prevSlide: T("carousel.prev_slide"),
+		nextSlide: T("carousel.next_slide"),
+		goToSlide: (e) => T("carousel.go_to_slide", { number: e }),
+		slideStatus: (e, t) => T("carousel.slide_status", {
+			current: e,
+			total: t
+		}),
+		...ue
+	}, D = S && o.isValidElement(s) ? s.props.children : s, O = u(() => o.Children.toArray(D), [D]), k = O.length, [fe, A] = f(typeof window < "u" ? window.innerWidth : 0), [j, M] = f(y ? k : 0), [N, P] = f(!1), [F, I] = f(!1), L = ie(ce, fe), R = d(null), z = d(null), B = d(null), V = d(null), H = d(null), U = d(null), W = d(null), pe = ee(w, W);
 	l(() => {
-		let e = () => ie(window.innerWidth);
+		let e = () => A(window.innerWidth);
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, []);
-	let J = u(() => !S || I === 0 ? F : [
-		...F,
-		...F,
-		...F
+	let me = u(() => !y || k === 0 ? O : [
+		...O,
+		...O,
+		...O
 	], [
-		F,
-		S,
-		I
-	]), Y = c(() => {
-		if (!z) {
-			if (!S) {
-				R((e) => Math.min(e + 1, I - U));
+		O,
+		y,
+		k
+	]), G = c(() => {
+		if (!N) {
+			if (!y) {
+				M((e) => Math.min(e + 1, k - L));
 				return;
 			}
-			B(!0), R((e) => e + 1);
+			P(!0), M((e) => e + 1);
 		}
 	}, [
-		z,
-		S,
-		I,
-		U
-	]), X = c(() => {
-		if (!z) {
-			if (!S) {
-				R((e) => Math.max(e - 1, 0));
+		N,
+		y,
+		k,
+		L
+	]), K = c(() => {
+		if (!N) {
+			if (!y) {
+				M((e) => Math.max(e - 1, 0));
 				return;
 			}
-			B(!0), R((e) => e - 1);
+			P(!0), M((e) => e - 1);
 		}
-	}, [z, S]), ae = (e) => {
-		z || (S ? (B(!0), R(e + I)) : R(e));
-	}, oe = () => {
-		S && (B(!1), L >= I * 2 ? R(L - I) : L < I && R(L + I));
+	}, [N, y]), he = (e) => {
+		N || (y ? (P(!0), M(e + k)) : M(e));
+	}, ge = () => {
+		y && (P(!1), j >= k * 2 ? M(j - k) : j < k && M(j + k));
 	};
-	l(() => (v && !V && I > U && (W.current = window.setInterval(Y, y)), () => {
-		W.current && window.clearInterval(W.current);
+	l(() => (_ && !F && k > L && (R.current = window.setInterval(G, v)), () => {
+		R.current && window.clearInterval(R.current);
 	}), [
+		_,
 		v,
-		y,
-		Y,
-		I,
-		U,
-		V
+		G,
+		k,
+		L,
+		F
 	]);
-	let Z = (e) => {
-		e.key === "ArrowLeft" ? X() : e.key === "ArrowRight" && Y();
-	}, se = (e) => {
-		K.current = e.targetTouches[0].clientX;
-	}, ce = (e) => {
-		q.current = e.targetTouches[0].clientX;
-	}, le = () => {
-		if (!K.current || !q.current) return;
-		let e = K.current - q.current;
-		e > 50 ? Y() : e < -50 && X(), K.current = null, q.current = null;
+	let [_e, ve] = f(""), q = y ? j % k : j, J = y ? k - 1 : Math.max(k - L, 0), Y = (e) => {
+		N || e === q || ve(E.slideStatus(e + 1, k));
+	}, ye = (e) => {
+		Y(e), he(e);
+	}, X = () => {
+		let e = y ? (q - 1 + k) % k : Math.max(q - 1, 0);
+		Y(e), !y && e === 0 && document.activeElement === H.current && W.current?.focus(), K();
+	}, Z = () => {
+		let e = y ? (q + 1) % k : Math.min(q + 1, J);
+		Y(e), !y && e === J && document.activeElement === U.current && W.current?.focus(), G();
+	}, be = (e) => {
+		e.key === "ArrowLeft" ? X() : e.key === "ArrowRight" && Z();
+	}, xe = (e) => {
+		B.current = e.targetTouches[0].clientX;
+	}, Se = (e) => {
+		V.current = e.targetTouches[0].clientX;
+	}, Ce = () => {
+		if (!B.current || !V.current) return;
+		let e = B.current - V.current;
+		e > 50 ? G() : e < -50 && K(), B.current = null, V.current = null;
 	};
-	if (I === 0) return null;
-	let Q = 100 / U, ue = -L * Q, $ = /* @__PURE__ */ g(m, { children: [
+	if (k === 0) return null;
+	let Q = 100 / L, we = -j * Q, $ = /* @__PURE__ */ g(m, { children: [
+		/* @__PURE__ */ h(te, {
+			role: "status",
+			"aria-atomic": "true",
+			children: _e
+		}),
 		/* @__PURE__ */ h("div", {
 			className: a.viewport,
 			children: /* @__PURE__ */ h("div", {
-				ref: G,
-				className: p(a.track, z && a.transition),
-				style: { transform: `translateX(${ue}%)` },
-				onTransitionEnd: oe,
-				onTouchStart: se,
-				onTouchMove: ce,
-				onTouchEnd: le,
-				children: J.map((e, t) => /* @__PURE__ */ h("div", {
-					className: p(a.item, w && a.hasAspectRatio),
+				ref: z,
+				className: p(a.track, N && a.transition),
+				style: { transform: `translateX(${we}%)` },
+				onTransitionEnd: ge,
+				onTouchStart: xe,
+				onTouchMove: Se,
+				onTouchEnd: Ce,
+				children: me.map((e, t) => /* @__PURE__ */ h("div", {
+					className: p(a.item, b && a.hasAspectRatio),
 					style: {
 						flex: `0 0 ${Q}%`,
 						width: `${Q}%`,
-						...w ? {
-							aspectRatio: w,
-							"--wim-carousel-object-fit": T
+						...b ? {
+							aspectRatio: b,
+							"--wim-carousel-object-fit": le
 						} : {}
 					},
 					role: "group",
-					"aria-roledescription": M("carousel.slide_roledescription"),
-					"aria-label": N.slideLabel(t % I + 1),
+					"aria-roledescription": T("carousel.slide_roledescription"),
+					"aria-label": E.slideLabel(t % k + 1),
 					children: e
 				}, t))
 			})
 		}),
-		b && I > U && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("button", {
+		oe && k > L && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("button", {
+			ref: H,
 			className: p(a.control, a.prev),
 			onClick: X,
-			"aria-label": N.prevSlide,
-			disabled: !S && L === 0,
-			tabIndex: -1,
+			"aria-label": E.prevSlide,
+			disabled: !y && j === 0,
 			children: /* @__PURE__ */ h(i, {
-				component: te,
+				component: ne,
 				size: "md"
 			})
 		}), /* @__PURE__ */ h("button", {
+			ref: U,
 			className: p(a.control, a.next),
-			onClick: Y,
-			"aria-label": N.nextSlide,
-			disabled: !S && L >= I - U,
-			tabIndex: -1,
+			onClick: Z,
+			"aria-label": E.nextSlide,
+			disabled: !y && j >= k - L,
 			children: /* @__PURE__ */ h(i, {
-				component: r,
+				component: re,
 				size: "md"
 			})
 		})] }),
-		ne && I > 1 && /* @__PURE__ */ h("div", {
+		ae && k > 1 && /* @__PURE__ */ h("div", {
 			className: a.indicators,
-			children: F.map((e, t) => {
-				let n = S ? L % I === t : L === t;
+			children: O.map((e, t) => {
+				let n = y ? j % k === t : j === t;
 				return /* @__PURE__ */ h("button", {
 					className: p(a.indicator, n && a.active),
-					onClick: () => ae(t),
-					"aria-label": N.goToSlide(t + 1),
+					onClick: () => ye(t),
+					"aria-label": E.goToSlide(t + 1),
 					"aria-current": n ? "true" : "false"
 				}, t);
 			})
 		})
 	] });
-	return /* @__PURE__ */ h(j, {
-		ref: A,
-		className: p("wim-carousel", a.root, x === "outside" && a.controlsOutside, D),
-		onMouseEnter: () => H(!0),
-		onMouseLeave: () => H(!1),
-		onFocus: () => H(!0),
-		onBlur: () => H(!1),
-		onKeyDown: Z,
+	return /* @__PURE__ */ h(de, {
+		ref: pe,
+		className: p("wim-carousel", a.root, se === "outside" && a.controlsOutside, x),
+		onMouseEnter: () => I(!0),
+		onMouseLeave: () => I(!1),
+		onFocus: () => I(!0),
+		onBlur: () => I(!1),
+		onKeyDown: be,
 		tabIndex: 0,
 		role: "region",
-		"aria-roledescription": M("carousel.roledescription"),
-		...k,
-		children: O ? /* @__PURE__ */ h(t, {
+		"aria-roledescription": T("carousel.roledescription"),
+		...C,
+		children: S ? /* @__PURE__ */ h(t, {
 			child: s,
 			children: () => $
 		}) : $
 	});
 });
-v.displayName = "Carousel";
+_.displayName = "Carousel";
 //#endregion
-export { v as Carousel };
+export { _ as Carousel };

package/dist/components/feedback/Snackbar/Snackbar.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../form/Button/Button.cjs"),n=require("../../_internal/FeedbackIcon.cjs"),r=require("../../_internal/FeedbackCloseButton.cjs"),i=require("./snackbar.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=({message:e,open:c=!1,intent:l=`default`,position:u=`bottom-center`,autoHideDuration:d=5e3,showCloseButton:f=!1,actionLabel:p,onAction:m,onClose:h,className:g})=>{let[_,v]=(0,a.useState)(!1),[y,b]=(0,a.useState)(!1),[x,S]=(0,a.useState)(c);c!==x&&(S(c),c?b(!0):v(!1)),(0,a.useEffect)(()=>{if(c){let e=setTimeout(()=>v(!0),10);return()=>clearTimeout(e)}{let e=setTimeout(()=>b(!1),300);return()=>clearTimeout(e)}},[c]);let C=(0,a.useCallback)(()=>{v(!1),setTimeout(()=>{h&&h()},300)},[h]),[w,T]=(0,a.useState)(d),[E,D]=(0,a.useState)(()=>Date.now()),[O,k]=(0,a.useState)(!1);(0,a.useEffect)(()=>{if(c&&d>0&&!O){let e=setTimeout(()=>{C()},w);return D(Date.now()),()=>clearTimeout(e)}},[c,d,C,O,w]);let A=()=>{if(d>0){k(!0);let e=Date.now()-E;T(t=>Math.max(0,t-e))}},j=()=>{d>0&&(D(Date.now()),k(!1))},M=()=>{m&&m()};if(!y&&!c)return null;let N=l===`danger`||l===`warning`?`alert`:`status`,P=l===`danger`||l===`warning`?`assertive`:`polite`;return(0,s.jsx)(`div`,{className:(0,o.default)(i.default.wrapper,i.default[u]),children:(0,s.jsxs)(`div`,{className:(0,o.default)(`wim-snackbar`,i.default.root,l&&i.default[l],_&&i.default.visible,f&&i.default.hasCloseButton,g),role:N,"aria-live":P,onMouseEnter:A,onMouseLeave:j,onFocus:A,onBlur:j,children:[(0,s.jsxs)(`div`,{className:i.default.content,children:[(l===`success`||l===`warning`||l===`danger`)&&(0,s.jsx)(`div`,{className:i.default.icon,children:(0,s.jsx)(n.FeedbackIcon,{intent:l,size:`sm`})}),(0,s.jsx)(`span`,{className:i.default.message,children:e})]}),(0,s.jsxs)(`div`,{className:i.default.actions,children:[p&&(0,s.jsx)(t.Button,{variant:`ghost`,size:`sm`,onClick:M,className:i.default.actionButton,children:p}),(0,s.jsx)(r.FeedbackCloseButton,{onClose:f?C:void 0,className:i.default.closeButton,size:`sm`})]})]})})},l=(0,a.createContext)(void 0),u=({children:e})=>{let[t,n]=(0,a.useState)(null),[r,i]=(0,a.useState)(!1),o=(0,a.useCallback)(e=>{let r=Math.random().toString(36).substr(2,9),a=typeof e==`string`?{message:e}:e;i(!1),setTimeout(()=>{n({...a,id:r}),i(!0)},t?300:0)},[t]),u=(0,a.useCallback)(()=>{i(!1)},[]);return(0,s.jsxs)(l.Provider,{value:{showMessage:o,hideMessage:u},children:[e,t&&(0,s.jsx)(c,{...t,open:r,onClose:()=>{i(!1),t.onClose&&t.onClose()}})]})},d=()=>{let e=(0,a.useContext)(l);if(!e)throw Error(`useSnackbar must be used within a SnackbarProvider`);return e};exports.Snackbar=c,exports.SnackbarProvider=u,exports.useSnackbar=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),n=require("../../form/Button/Button.cjs"),r=require("../../_internal/FeedbackIcon.cjs"),i=require("../../_internal/FeedbackCloseButton.cjs"),a=require("./snackbar.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=({message:e,open:l=!1,intent:u=`default`,position:d=`bottom-center`,autoHideDuration:f=5e3,showCloseButton:p=!1,actionLabel:m,onAction:h,onClose:g,className:_})=>{let[v,y]=(0,o.useState)(!1),[b,x]=(0,o.useState)(!1),[S,C]=(0,o.useState)(l);l!==S&&(C(l),l?x(!0):y(!1)),(0,o.useEffect)(()=>{if(l){let e=setTimeout(()=>y(!0),10);return()=>clearTimeout(e)}{let e=setTimeout(()=>x(!1),300);return()=>clearTimeout(e)}},[l]);let w=(0,o.useCallback)(()=>{y(!1),setTimeout(()=>{g&&g()},300)},[g]),[T,E]=(0,o.useState)(f),[D,O]=(0,o.useState)(()=>Date.now()),[k,A]=(0,o.useState)(!1);(0,o.useEffect)(()=>{if(l&&f>0&&!k){let e=setTimeout(()=>{w()},T);return O(Date.now()),()=>clearTimeout(e)}},[l,f,w,k,T]);let j=()=>{if(f>0){A(!0);let e=Date.now()-D;E(t=>Math.max(0,t-e))}},M=()=>{f>0&&(O(Date.now()),A(!1))},N=()=>{h&&h()},P=u===`danger`||u===`warning`?`alert`:`status`;return(0,c.jsxs)(`div`,{className:(0,s.default)(a.default.wrapper,a.default[d]),children:[(0,c.jsx)(t.VisuallyHidden,{role:P,"aria-atomic":`true`,children:l?e:``}),(b||l)&&(0,c.jsxs)(`div`,{className:(0,s.default)(`wim-snackbar`,a.default.root,u&&a.default[u],v&&a.default.visible,p&&a.default.hasCloseButton,_),onMouseEnter:j,onMouseLeave:M,onFocus:j,onBlur:M,children:[(0,c.jsxs)(`div`,{className:a.default.content,children:[(u===`success`||u===`warning`||u===`danger`)&&(0,c.jsx)(`div`,{className:a.default.icon,children:(0,c.jsx)(r.FeedbackIcon,{intent:u,size:`sm`})}),(0,c.jsx)(`span`,{className:a.default.message,children:e})]}),(0,c.jsxs)(`div`,{className:a.default.actions,children:[m&&(0,c.jsx)(n.Button,{variant:`ghost`,size:`sm`,onClick:N,className:a.default.actionButton,children:m}),(0,c.jsx)(i.FeedbackCloseButton,{onClose:p?w:void 0,className:a.default.closeButton,size:`sm`})]})]})]})},u=(0,o.createContext)(void 0),d=({children:e})=>{let[t,n]=(0,o.useState)(null),[r,i]=(0,o.useState)(!1),a=(0,o.useCallback)(e=>{let r=Math.random().toString(36).substr(2,9),a=typeof e==`string`?{message:e}:e;i(!1),setTimeout(()=>{n({...a,id:r}),i(!0)},t?300:0)},[t]),s=(0,o.useCallback)(()=>{i(!1)},[]);return(0,c.jsxs)(u.Provider,{value:{showMessage:a,hideMessage:s},children:[e,(0,c.jsx)(l,{message:``,...t,open:r&&t!==null,onClose:()=>{i(!1),t?.onClose&&t.onClose()}})]})},f=()=>{let e=(0,o.useContext)(u);if(!e)throw Error(`useSnackbar must be used within a SnackbarProvider`);return e};exports.Snackbar=l,exports.SnackbarProvider=d,exports.useSnackbar=f;

package/dist/components/feedback/Snackbar/Snackbar.d.ts

@@ -41,7 +41,7 @@ export interface SnackbarProps {
 /**
  * Snackbar for notifying the user with a short message.
  */
-export declare const Snackbar: ({ message, open, intent, position, autoHideDuration, showCloseButton, actionLabel, onAction, onClose, className, }: SnackbarProps) => React.JSX.Element | null;
+export declare const Snackbar: ({ message, open, intent, position, autoHideDuration, showCloseButton, actionLabel, onAction, onClose, className, }: SnackbarProps) => React.JSX.Element;
 type SnackbarContextType = {
     showMessage: (props: string | Omit<SnackbarProps, "open" | "onClose">) => void;
     hideMessage: () => void;

package/dist/components/feedback/Snackbar/Snackbar.js

@@ -1,96 +1,97 @@
 "use client";
-import { Button as e } from "../../form/Button/Button.js";
-import { FeedbackIcon as t } from "../../_internal/FeedbackIcon.js";
-import { FeedbackCloseButton as n } from "../../_internal/FeedbackCloseButton.js";
-import r from "./snackbar.module.js";
-import { createContext as i, useCallback as a, useContext as o, useEffect as s, useState as c } from "react";
-import l from "classnames";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { VisuallyHidden as e } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import { Button as t } from "../../form/Button/Button.js";
+import { FeedbackIcon as n } from "../../_internal/FeedbackIcon.js";
+import { FeedbackCloseButton as r } from "../../_internal/FeedbackCloseButton.js";
+import i from "./snackbar.module.js";
+import { createContext as a, useCallback as o, useContext as s, useEffect 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/feedback/Snackbar/Snackbar.tsx
-var f = ({ message: i, open: o = !1, intent: f = "default", position: p = "bottom-center", autoHideDuration: m = 5e3, showCloseButton: h = !1, actionLabel: g, onAction: _, onClose: v, className: y }) => {
-	let [b, x] = c(!1), [S, C] = c(!1), [w, T] = c(o);
-	o !== w && (T(o), o ? C(!0) : x(!1)), s(() => {
-		if (o) {
-			let e = setTimeout(() => x(!0), 10);
+var p = ({ message: a, open: s = !1, intent: p = "default", position: m = "bottom-center", autoHideDuration: h = 5e3, showCloseButton: g = !1, actionLabel: _, onAction: v, onClose: y, className: b }) => {
+	let [x, S] = l(!1), [C, w] = l(!1), [T, E] = l(s);
+	s !== T && (E(s), s ? w(!0) : S(!1)), c(() => {
+		if (s) {
+			let e = setTimeout(() => S(!0), 10);
 			return () => clearTimeout(e);
 		}
 		{
-			let e = setTimeout(() => C(!1), 300);
+			let e = setTimeout(() => w(!1), 300);
 			return () => clearTimeout(e);
 		}
-	}, [o]);
-	let E = a(() => {
-		x(!1), setTimeout(() => {
-			v && v();
+	}, [s]);
+	let D = o(() => {
+		S(!1), setTimeout(() => {
+			y && y();
 		}, 300);
-	}, [v]), [D, O] = c(m), [k, A] = c(() => Date.now()), [j, M] = c(!1);
-	s(() => {
-		if (o && m > 0 && !j) {
+	}, [y]), [O, k] = l(h), [A, j] = l(() => Date.now()), [M, N] = l(!1);
+	c(() => {
+		if (s && h > 0 && !M) {
 			let e = setTimeout(() => {
-				E();
-			}, D);
-			return A(Date.now()), () => clearTimeout(e);
+				D();
+			}, O);
+			return j(Date.now()), () => clearTimeout(e);
 		}
 	}, [
-		o,
-		m,
-		E,
-		j,
-		D
+		s,
+		h,
+		D,
+		M,
+		O
 	]);
-	let N = () => {
-		if (m > 0) {
-			M(!0);
-			let e = Date.now() - k;
-			O((t) => Math.max(0, t - e));
+	let P = () => {
+		if (h > 0) {
+			N(!0);
+			let e = Date.now() - A;
+			k((t) => Math.max(0, t - e));
 		}
-	}, P = () => {
-		m > 0 && (A(Date.now()), M(!1));
 	}, F = () => {
-		_ && _();
-	};
-	if (!S && !o) return null;
-	let I = f === "danger" || f === "warning" ? "alert" : "status", L = f === "danger" || f === "warning" ? "assertive" : "polite";
-	return /* @__PURE__ */ u("div", {
-		className: l(r.wrapper, r[p]),
-		children: /* @__PURE__ */ d("div", {
-			className: l("wim-snackbar", r.root, f && r[f], b && r.visible, h && r.hasCloseButton, y),
-			role: I,
-			"aria-live": L,
-			onMouseEnter: N,
-			onMouseLeave: P,
-			onFocus: N,
-			onBlur: P,
-			children: [/* @__PURE__ */ d("div", {
-				className: r.content,
-				children: [(f === "success" || f === "warning" || f === "danger") && /* @__PURE__ */ u("div", {
-					className: r.icon,
-					children: /* @__PURE__ */ u(t, {
-						intent: f,
+		h > 0 && (j(Date.now()), N(!1));
+	}, I = () => {
+		v && v();
+	}, L = p === "danger" || p === "warning" ? "alert" : "status";
+	return /* @__PURE__ */ f("div", {
+		className: u(i.wrapper, i[m]),
+		children: [/* @__PURE__ */ d(e, {
+			role: L,
+			"aria-atomic": "true",
+			children: s ? a : ""
+		}), (C || s) && /* @__PURE__ */ f("div", {
+			className: u("wim-snackbar", i.root, p && i[p], x && i.visible, g && i.hasCloseButton, b),
+			onMouseEnter: P,
+			onMouseLeave: F,
+			onFocus: P,
+			onBlur: F,
+			children: [/* @__PURE__ */ f("div", {
+				className: i.content,
+				children: [(p === "success" || p === "warning" || p === "danger") && /* @__PURE__ */ d("div", {
+					className: i.icon,
+					children: /* @__PURE__ */ d(n, {
+						intent: p,
 						size: "sm"
 					})
-				}), /* @__PURE__ */ u("span", {
-					className: r.message,
-					children: i
+				}), /* @__PURE__ */ d("span", {
+					className: i.message,
+					children: a
 				})]
-			}), /* @__PURE__ */ d("div", {
-				className: r.actions,
-				children: [g && /* @__PURE__ */ u(e, {
+			}), /* @__PURE__ */ f("div", {
+				className: i.actions,
+				children: [_ && /* @__PURE__ */ d(t, {
 					variant: "ghost",
 					size: "sm",
-					onClick: F,
-					className: r.actionButton,
-					children: g
-				}), /* @__PURE__ */ u(n, {
-					onClose: h ? E : void 0,
-					className: r.closeButton,
+					onClick: I,
+					className: i.actionButton,
+					children: _
+				}), /* @__PURE__ */ d(r, {
+					onClose: g ? D : void 0,
+					className: i.closeButton,
 					size: "sm"
 				})]
 			})]
-		})
+		})]
 	});
-}, p = i(void 0), m = ({ children: e }) => {
-	let [t, n] = c(null), [r, i] = c(!1), o = a((e) => {
+}, m = a(void 0), h = ({ children: e }) => {
+	let [t, n] = l(null), [r, i] = l(!1), a = o((e) => {
 		let r = Math.random().toString(36).substr(2, 9), a = typeof e == "string" ? { message: e } : e;
 		i(!1), setTimeout(() => {
 			n({
@@ -98,26 +99,27 @@ var f = ({ message: i, open: o = !1, intent: f = "default", position: p = "botto
 				id: r
 			}), i(!0);
 		}, t ? 300 : 0);
-	}, [t]), s = a(() => {
+	}, [t]), s = o(() => {
 		i(!1);
 	}, []);
-	return /* @__PURE__ */ d(p.Provider, {
+	return /* @__PURE__ */ f(m.Provider, {
 		value: {
-			showMessage: o,
+			showMessage: a,
 			hideMessage: s
 		},
-		children: [e, t && /* @__PURE__ */ u(f, {
+		children: [e, /* @__PURE__ */ d(p, {
+			message: "",
 			...t,
-			open: r,
+			open: r && t !== null,
 			onClose: () => {
-				i(!1), t.onClose && t.onClose();
+				i(!1), t?.onClose && t.onClose();
 			}
 		})]
 	});
-}, h = () => {
-	let e = o(p);
+}, g = () => {
+	let e = s(m);
 	if (!e) throw Error("useSnackbar must be used within a SnackbarProvider");
 	return e;
 };
 //#endregion
-export { f as Snackbar, m as SnackbarProvider, h as useSnackbar };
+export { p as Snackbar, h as SnackbarProvider, g as useSnackbar };

package/dist/components/feedback/Toast/Toast.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/Transition/Transition.cjs"),n=require("../../_internal/FeedbackIcon.cjs"),r=require("../../_internal/FeedbackCloseButton.cjs"),i=require("./toast.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=({id:e,title:c,description:l,intent:u=`default`,duration:d=3e3,open:f=!0,onClose:p,className:m,"aria-label":h,"aria-labelledby":g})=>{let[_,v]=(0,a.useState)(!0),y=(0,a.useCallback)(()=>{v(!1),p&&p(e)},[p,e]);return(0,a.useEffect)(()=>{if(f&&d>0&&_){let e=setTimeout(()=>{y()},d+300);return()=>clearTimeout(e)}},[f,d,e,p,_,y]),(0,s.jsxs)(t.Transition,{show:f&&_,enter:i.default.enter,enterFrom:i.default.enterFrom,enterTo:i.default.enterTo,leave:i.default.leave,leaveFrom:i.default.leaveFrom,leaveTo:i.default.leaveTo,className:(0,o.default)(`wim-toast`,i.default.root,i.default[u],m),role:`status`,"aria-live":`polite`,"aria-label":g?void 0:h,"aria-labelledby":g,children:[(u===`success`||u===`warning`||u===`danger`||u===`info`)&&(0,s.jsx)(`div`,{className:i.default.icon,children:(0,s.jsx)(n.FeedbackIcon,{intent:u,size:`sm`})}),(0,s.jsxs)(`div`,{className:i.default.content,children:[c&&(0,s.jsx)(`div`,{className:i.default.title,children:c}),l&&(0,s.jsx)(`p`,{className:i.default.description,children:l})]}),(0,s.jsx)(r.FeedbackCloseButton,{onClose:p?y:void 0,id:e,className:i.default.closeButton,size:`md`})]})},l=(0,a.createContext)(void 0),u=({children:e,position:t=`top-right`})=>{let[n,r]=(0,a.useState)([]),u=(0,a.useCallback)(e=>{let t=Math.random().toString(36).substr(2,9);r(n=>[...n,{...e,id:t}])},[]),d=(0,a.useCallback)(e=>{r(t=>t.filter(t=>t.id!==e))},[]);return(0,s.jsxs)(l.Provider,{value:{show:u,remove:d},children:[e,(0,s.jsx)(`div`,{className:(0,o.default)(i.default.container,i.default[t]),children:n.map(e=>(0,s.jsx)(c,{...e,onClose:()=>d(e.id)},e.id))})]})},d=()=>{let e=(0,a.useContext)(l);if(!e)throw Error(`useToast must be used within a ToastProvider`);return e};exports.Toast=c,exports.ToastProvider=u,exports.useToast=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/Transition/Transition.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../../_internal/FeedbackIcon.cjs"),i=require("../../_internal/FeedbackCloseButton.cjs"),a=require("./toast.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=({id:e,title:l,description:d,intent:p=`default`,duration:m=3e3,open:h=!0,onClose:g,className:_,"aria-label":v,"aria-labelledby":y})=>{let[b,x]=(0,o.useState)(!0),S=(0,o.useCallback)(()=>{x(!1),g&&g(e)},[g,e]);(0,o.useEffect)(()=>{if(h&&m>0&&b){let e=setTimeout(()=>{S()},m+300);return()=>clearTimeout(e)}},[h,m,e,g,b,S]);let C=(0,o.useContext)(f),w=(0,c.jsxs)(t.Transition,{show:h&&b,enter:a.default.enter,enterFrom:a.default.enterFrom,enterTo:a.default.enterTo,leave:a.default.leave,leaveFrom:a.default.leaveFrom,leaveTo:a.default.leaveTo,className:(0,s.default)(`wim-toast`,a.default.root,a.default[p],_),role:v||y?`group`:void 0,"aria-label":y?void 0:v,"aria-labelledby":y,children:[(p===`success`||p===`warning`||p===`danger`||p===`info`)&&(0,c.jsx)(`div`,{className:a.default.icon,children:(0,c.jsx)(r.FeedbackIcon,{intent:p,size:`sm`})}),(0,c.jsxs)(`div`,{className:a.default.content,children:[l&&(0,c.jsx)(`div`,{className:a.default.title,children:l}),d&&(0,c.jsx)(`p`,{className:a.default.description,children:d})]}),(0,c.jsx)(i.FeedbackCloseButton,{onClose:g?S:void 0,id:e,className:a.default.closeButton,size:`md`})]});return C?w:(0,c.jsxs)(`div`,{className:a.default.live,children:[(0,c.jsx)(n.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:h&&b?u(l,d):``}),w]})},u=(e,t)=>[e,t].filter(Boolean).join(`: `),d=(0,o.createContext)(void 0),f=(0,o.createContext)(!1),p=({children:e,position:t=`top-right`})=>{let[r,i]=(0,o.useState)([]),[p,m]=(0,o.useState)(null),h=(0,o.useCallback)(e=>{let t=Math.random().toString(36).substr(2,9);i(n=>[...n,{...e,id:t}]),m({...e,id:t})},[]),g=(0,o.useCallback)(e=>{i(t=>t.filter(t=>t.id!==e)),m(t=>t?.id===e?null:t)},[]);return(0,c.jsxs)(d.Provider,{value:{show:h,remove:g},children:[e,(0,c.jsxs)(`div`,{className:(0,s.default)(a.default.container,a.default[t]),children:[(0,c.jsx)(n.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:p?u(p.title,p.description):``}),(0,c.jsx)(f.Provider,{value:!0,children:r.map(e=>(0,c.jsx)(l,{...e,onClose:()=>g(e.id)},e.id))})]})]})},m=()=>{let e=(0,o.useContext)(d);if(!e)throw Error(`useToast must be used within a ToastProvider`);return e};exports.Toast=l,exports.ToastProvider=p,exports.useToast=m;