wimui 0.51.1 → 0.51.2

package/dist/components/media/Audio/Audio.js

@@ -1,89 +1,89 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { useMediaLoader as t } from "../../../hooks/useMediaLoader.js";
-import { useAudioPlayer as ee } from "./hooks/useAudioPlayer.js";
-import { useAudioMetadata as n } from "./hooks/useAudioMetadata.js";
-import { AudioCustomControls as r } from "./components/AudioCustomControls.js";
-import i from "./audio.module.js";
-import { useEffect as a, useMemo as o } from "react";
-import s from "classnames";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useAudioPlayer as n } from "./hooks/useAudioPlayer.js";
+import { useAudioMetadata as r } from "./hooks/useAudioMetadata.js";
+import { AudioCustomControls as i } from "./components/AudioCustomControls.js";
+import a from "./audio.module.js";
+import { useEffect as o, useMemo as s } from "react";
+import c from "classnames";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/media/Audio/Audio.tsx
-var u = ({ src: u, autoPlay: d = !1, loop: te = !1, muted: ne = !1, controls: f = !0, radius: p = "none", shadow: m = !1, border: h = !1, preload: g, caption: _, className: v, style: y, customControls: b = !1, visualizer: x = !1, showMetadata: S = !1, fadeIn: C = !1, fadeOut: w = !1, crossfade: T = !1, playbackRate: E = !1, hotkeys: D = !1, presets: O = !1, sleepTimer: k = !1, loading: A = "lazy", demoDelay: j, labels: M = {}, tracks: N, ...P }) => {
-	let { t: F } = e("common"), { unknownTitle: I = "Unknown Title", unknownArtist: L = "Unknown Artist" } = M, R = o(() => u ? (Array.isArray(u) ? u : [u]).map((e) => typeof e == "string" ? { src: e } : e) : [], [u]), { containerRef: re, isLoaded: z, isIntersecting: B, notifyLoaded: V, shouldShowSkeleton: H } = t({
+var d = ({ src: d, autoPlay: f = !1, loop: ee = !1, muted: te = !1, controls: ne = !0, radius: p = "none", shadow: m = !1, border: h = !1, preload: g, caption: _, className: v, style: y, customControls: b = !1, visualizer: x = !1, showMetadata: S = !1, fadeIn: C = !1, fadeOut: w = !1, crossfade: T = !1, playbackRate: E = !1, hotkeys: D = !1, presets: O = !1, sleepTimer: k = !1, loading: A = "lazy", demoDelay: j, labels: M = {}, tracks: N, ...P }) => {
+	let { t: F } = e("common"), { unknownTitle: I = F("audio.unknown_title"), unknownArtist: L = F("audio.unknown_artist") } = M, R = s(() => d ? (Array.isArray(d) ? d : [d]).map((e) => typeof e == "string" ? { src: e } : e) : [], [d]), { containerRef: z, isLoaded: re, isIntersecting: B, notifyLoaded: V, shouldShowSkeleton: H } = t({
 		loading: A,
 		demoDelay: j,
 		src: R[0]?.src
-	}), U = ee({
+	}), U = n({
 		playlist: R,
-		loop: te,
-		muted: ne,
+		loop: ee,
+		muted: te,
 		fadeIn: C,
 		fadeOut: w,
 		crossfade: T,
 		visualizer: x,
 		hotkeys: D,
-		autoPlay: d
-	}), { isPlaying: W, currentTrack: G, currentTrackIndex: K, activeAudioRef: q, nextAudioRef: J, canvasRef: Y, handleTimeUpdate: X, handleEnded: ie, setDuration: ae, playActivePlayer: oe } = U, { metaTitle: Z, metaArtist: Q, metaCover: $ } = n({
+		autoPlay: f
+	}), { isPlaying: W, currentTrack: G, currentTrackIndex: K, activeAudioRef: q, nextAudioRef: J, canvasRef: Y, handleTimeUpdate: X, handleEnded: ie, setDuration: ae, playActivePlayer: oe } = U, { metaTitle: Z, metaArtist: Q, metaCover: $ } = r({
 		currentTrack: G,
 		showMetadata: S
 	});
-	a(() => {
-		G && q.current && (q.current.src = G.src, (d || W) && oe());
+	o(() => {
+		G && q.current && (q.current.src = G.src, (f || W) && oe());
 	}, [K, G]);
-	let se = p === "none" ? null : i[`radius${p.charAt(0).toUpperCase() + p.slice(1)}`];
-	return /* @__PURE__ */ l("figure", {
-		className: s("wim-audio", i.root, v),
+	let se = p === "none" ? null : a[`radius${p.charAt(0).toUpperCase() + p.slice(1)}`];
+	return /* @__PURE__ */ u("figure", {
+		className: c("wim-audio", a.root, v),
 		style: y,
 		"data-testid": "audio-root",
-		children: [/* @__PURE__ */ l("div", {
-			ref: re,
-			className: s(i.inner, se, b && m && i.shadow, b && h && i.border, b && i.custom, C && i.fadeIn, C && z && i.isLoaded, H && i.loading),
+		children: [/* @__PURE__ */ u("div", {
+			ref: z,
+			className: c(a.inner, se, b && m && a.shadow, b && h && a.border, b && a.custom, C && a.fadeIn, C && re && a.isLoaded, H && a.loading),
 			"data-testid": "audio-inner",
 			children: [
-				x && b && /* @__PURE__ */ c("canvas", {
+				x && b && /* @__PURE__ */ l("canvas", {
 					ref: Y,
-					className: i.visualizerCanvas,
+					className: a.visualizerCanvas,
 					"data-testid": "audio-canvas"
 				}),
-				b && S && (Z || Q || $) && /* @__PURE__ */ l("div", {
-					className: i.metadata,
+				b && S && (Z || Q || $) && /* @__PURE__ */ u("div", {
+					className: a.metadata,
 					style: {
 						position: "relative",
 						zIndex: 2
 					},
 					"data-testid": "audio-metadata",
-					children: [$ && /* @__PURE__ */ c("img", {
+					children: [$ && /* @__PURE__ */ l("img", {
 						src: $,
 						alt: F("a11y.cover_art"),
-						className: i.cover,
+						className: a.cover,
 						"data-testid": "audio-cover"
-					}), /* @__PURE__ */ l("div", {
-						className: i.info,
-						children: [/* @__PURE__ */ c("div", {
-							className: i.title,
+					}), /* @__PURE__ */ u("div", {
+						className: a.info,
+						children: [/* @__PURE__ */ l("div", {
+							className: a.title,
 							"data-testid": "audio-title",
 							children: Z || I
-						}), /* @__PURE__ */ c("div", {
-							className: i.artist,
+						}), /* @__PURE__ */ l("div", {
+							className: a.artist,
 							"data-testid": "audio-artist",
 							children: Q || L
 						})]
 					})]
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ u("div", {
 					style: {
 						display: b ? "none" : "block",
 						width: "100%"
 					},
-					children: [B && /* @__PURE__ */ c("audio", {
+					children: [B && /* @__PURE__ */ l("audio", {
 						ref: q,
 						src: G?.src,
-						className: i.audio,
+						className: a.audio,
 						"data-testid": "audio-active",
 						loop: U.repeatMode === 1 && R.length === 1,
 						muted: U.isMuted,
-						controls: !b && f,
+						controls: !b && ne,
 						preload: g,
 						crossOrigin: "anonymous",
 						onTimeUpdate: X,
@@ -98,8 +98,8 @@ var u = ({ src: u, autoPlay: d = !1, loop: te = !1, muted: ne = !1, controls: f
 						onCanPlay: (e) => {
 							V(), P.onCanPlay?.(e);
 						},
-						children: N?.map((e, t) => /* @__PURE__ */ c("track", { ...e }, t))
-					}), /* @__PURE__ */ c("audio", {
+						children: N?.map((e, t) => /* @__PURE__ */ l("track", { ...e }, t))
+					}), /* @__PURE__ */ l("audio", {
 						ref: J,
 						muted: U.isMuted,
 						preload: "auto",
@@ -107,8 +107,8 @@ var u = ({ src: u, autoPlay: d = !1, loop: te = !1, muted: ne = !1, controls: f
 						"data-testid": "audio-next"
 					})]
 				}),
-				b && /* @__PURE__ */ c(r, {
-					styles: i,
+				b && /* @__PURE__ */ l(i, {
+					styles: a,
 					isPlaying: W,
 					currentTime: U.currentTime,
 					duration: U.duration,
@@ -136,11 +136,11 @@ var u = ({ src: u, autoPlay: d = !1, loop: te = !1, muted: ne = !1, controls: f
 					labels: M
 				})
 			]
-		}), _ && /* @__PURE__ */ c("figcaption", {
-			className: i.caption,
+		}), _ && /* @__PURE__ */ l("figcaption", {
+			className: a.caption,
 			children: _
 		})]
 	});
 };
 //#endregion
-export { u as Audio };
+export { d as Audio };

package/dist/components/media/Audio/components/AudioCustomControls.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../icon/chart.cjs"),n=require("../../../../icon/chevron-left.cjs"),r=require("../../../../icon/chevron-right.cjs"),i=require("../../../../icon/clock.cjs"),a=require("../../../../icon/mute.cjs"),o=require("../../../../icon/pause.cjs"),s=require("../../../../icon/play.cjs"),c=require("../../../../icon/repeat.cjs"),l=require("../../../../icon/shuffle.cjs"),u=require("../../../../icon/volume.cjs"),d=require("../../Icon/Icon.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");function h({isPlaying:e,currentTime:f,duration:h,volume:g,isMuted:_,repeatMode:v,shuffleMode:y,currentPlaybackRate:b,isBassBoost:x,remainingSleepTime:S,playbackRate:C,presets:w,sleepTimer:T,setRepeatMode:E,setShuffleMode:D,setCurrentPlaybackRate:O,setIsBassBoost:k,setIsMuted:A,togglePlay:j,handleSeek:M,handleVolumeChange:N,playNext:P,toggleSleepTimer:ee,formatTime:F,labels:I={},styles:L}){let{seek:R=`Seek`,mute:z=`Mute`,unmute:B=`Unmute`,volume:V=`Volume`,play:H=`Play`,pause:U=`Pause`,next:W=`Next`,prev:G=`Previous`,repeatMode0:K=`Repeat Off`,repeatMode1:q=`Repeat One`,repeatMode2:J=`Repeat All`,shuffle:Y=`Shuffle`,playbackSpeed:X=`Playback Speed`,bassBoost:Z=`Bass Boost`,sleepTimer:Q=`Sleep Timer (15m)`}=I,$=v===0?K:v===1?q:J;return(0,m.jsxs)(`div`,{className:(0,p.default)(L.customControls),children:[(0,m.jsxs)(`div`,{className:(0,p.default)(L.time),children:[(0,m.jsx)(`span`,{className:L.timeCurrent,children:F(f)}),(0,m.jsxs)(`div`,{className:(0,p.default)(L.progressContainer),children:[(0,m.jsx)(`input`,{type:`range`,min:`0`,max:h||0,value:f,step:`0.1`,onChange:M,className:(0,p.default)(L.progress),"aria-label":R}),(0,m.jsx)(`div`,{className:(0,p.default)(L.progressFill),style:{width:`${f/(h||1)*100}%`}})]}),(0,m.jsx)(`span`,{className:L.timeTotal,children:F(h)})]}),(0,m.jsxs)(`div`,{className:(0,p.default)(L.controlsRow),children:[(0,m.jsxs)(`div`,{className:(0,p.default)(L.controlsGroup),children:[(0,m.jsxs)(`button`,{type:`button`,className:(0,p.default)(L.btn,v>0&&L.active),onClick:()=>E(e=>(e+1)%3),title:$,children:[(0,m.jsx)(d.Icon,{component:c.default,size:`sm`}),v===1&&(0,m.jsx)(`span`,{className:(0,p.default)(L.badge),children:`1`})]}),(0,m.jsx)(`button`,{type:`button`,className:(0,p.default)(L.btn,y&&L.active),onClick:()=>D(e=>!e),title:Y,children:(0,m.jsx)(d.Icon,{component:l.default,size:`sm`})}),C&&(0,m.jsxs)(`button`,{type:`button`,className:(0,p.default)(L.btn,L.btnText),onClick:()=>{let e=[.5,1,1.5,2],t=e[(e.indexOf(b)+1)%e.length];O(t)},title:X,children:[b,`x`]})]}),(0,m.jsxs)(`div`,{className:(0,p.default)(L.controlsGroup),children:[w&&(0,m.jsx)(`button`,{type:`button`,className:(0,p.default)(L.btn,x&&L.active),onClick:()=>k(!x),title:Z,children:(0,m.jsx)(d.Icon,{component:t.default,size:`sm`})}),T&&(0,m.jsxs)(`button`,{type:`button`,className:(0,p.default)(L.btn,S!==null&&L.active),onClick:ee,title:Q,children:[(0,m.jsx)(d.Icon,{component:i.default,size:`sm`}),S!==null&&(0,m.jsx)(`span`,{className:(0,p.default)(L.badge),style:{fontSize:`7px`},children:Math.ceil(S/60)})]}),(0,m.jsxs)(`div`,{className:(0,p.default)(L.volumeContainer),children:[(0,m.jsx)(`button`,{type:`button`,className:(0,p.default)(L.btn),onClick:()=>A(e=>!e),"aria-label":_?B:z,children:(0,m.jsx)(d.Icon,{component:_||g===0?a.default:u.default,size:`sm`})}),(0,m.jsx)(`input`,{type:`range`,min:`0`,max:`1`,step:`0.05`,value:_?0:g,onChange:N,className:(0,p.default)(L.volume),"aria-label":V})]})]})]}),(0,m.jsx)(`div`,{className:(0,p.default)(L.controlsRow),style:{justifyContent:`center`,marginTop:`0.2rem`},children:(0,m.jsxs)(`div`,{className:(0,p.default)(L.controlsGroup),children:[(0,m.jsx)(`button`,{type:`button`,className:(0,p.default)(L.btn),onClick:()=>P(-1),title:G,children:(0,m.jsx)(d.Icon,{component:n.default,size:`sm`})}),(0,m.jsx)(`button`,{type:`button`,className:(0,p.default)(L.btn,L.btnPlay),onClick:j,title:e?U:H,"aria-label":e?U:H,children:(0,m.jsx)(d.Icon,{component:e?o.default:s.default,size:`sm`})}),(0,m.jsx)(`button`,{type:`button`,className:(0,p.default)(L.btn),onClick:()=>P(1),title:W,children:(0,m.jsx)(d.Icon,{component:r.default,size:`sm`})})]})})]})}exports.AudioCustomControls=h;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../i18n/useWimTranslation.cjs"),n=require("../../../../icon/chart.cjs"),r=require("../../../../icon/chevron-left.cjs"),i=require("../../../../icon/chevron-right.cjs"),a=require("../../../../icon/clock.cjs"),o=require("../../../../icon/mute.cjs"),s=require("../../../../icon/pause.cjs"),c=require("../../../../icon/play.cjs"),l=require("../../../../icon/repeat.cjs"),u=require("../../../../icon/shuffle.cjs"),d=require("../../../../icon/volume.cjs"),f=require("../../Icon/Icon.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("classnames");m=e.__toESM(m,1);let h=require("react/jsx-runtime");function g({isPlaying:e,currentTime:p,duration:g,volume:_,isMuted:v,repeatMode:y,shuffleMode:b,currentPlaybackRate:x,isBassBoost:S,remainingSleepTime:C,playbackRate:w,presets:T,sleepTimer:E,setRepeatMode:D,setShuffleMode:O,setCurrentPlaybackRate:k,setIsBassBoost:A,setIsMuted:j,togglePlay:M,handleSeek:N,handleVolumeChange:P,playNext:F,toggleSleepTimer:ee,formatTime:I,labels:L={},styles:R}){let{t:z}=t.useWimTranslation(`common`),{seek:B=z(`a11y.seek`),mute:V=z(`a11y.mute`),unmute:H=z(`a11y.unmute`),volume:U=z(`a11y.volume`),play:W=z(`a11y.play`),pause:G=z(`a11y.pause`),next:K=z(`action.next`),prev:q=z(`action.previous`),repeatMode0:J=z(`audio.repeat_off`),repeatMode1:Y=z(`audio.repeat_single`),repeatMode2:X=z(`audio.repeat_all`),shuffle:Z=z(`audio.shuffle`),playbackSpeed:Q=z(`playback.speed`),bassBoost:$=z(`audio.bass_boost`),sleepTimer:te=`Sleep Timer (15m)`}=L,ne=y===0?J:y===1?Y:X;return(0,h.jsxs)(`div`,{className:(0,m.default)(R.customControls),children:[(0,h.jsxs)(`div`,{className:(0,m.default)(R.time),children:[(0,h.jsx)(`span`,{className:R.timeCurrent,children:I(p)}),(0,h.jsxs)(`div`,{className:(0,m.default)(R.progressContainer),children:[(0,h.jsx)(`input`,{type:`range`,min:`0`,max:g||0,value:p,step:`0.1`,onChange:N,className:(0,m.default)(R.progress),"aria-label":B}),(0,h.jsx)(`div`,{className:(0,m.default)(R.progressFill),style:{width:`${p/(g||1)*100}%`}})]}),(0,h.jsx)(`span`,{className:R.timeTotal,children:I(g)})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(R.controlsRow),children:[(0,h.jsxs)(`div`,{className:(0,m.default)(R.controlsGroup),children:[(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(R.btn,y>0&&R.active),onClick:()=>D(e=>(e+1)%3),title:ne,children:[(0,h.jsx)(f.Icon,{component:l.default,size:`sm`}),y===1&&(0,h.jsx)(`span`,{className:(0,m.default)(R.badge),children:`1`})]}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn,b&&R.active),onClick:()=>O(e=>!e),title:Z,children:(0,h.jsx)(f.Icon,{component:u.default,size:`sm`})}),w&&(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(R.btn,R.btnText),onClick:()=>{let e=[.5,1,1.5,2],t=e[(e.indexOf(x)+1)%e.length];k(t)},title:Q,children:[x,`x`]})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(R.controlsGroup),children:[T&&(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn,S&&R.active),onClick:()=>A(!S),title:$,children:(0,h.jsx)(f.Icon,{component:n.default,size:`sm`})}),E&&(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(R.btn,C!==null&&R.active),onClick:ee,title:te,children:[(0,h.jsx)(f.Icon,{component:a.default,size:`sm`}),C!==null&&(0,h.jsx)(`span`,{className:(0,m.default)(R.badge),style:{fontSize:`7px`},children:Math.ceil(C/60)})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(R.volumeContainer),children:[(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn),onClick:()=>j(e=>!e),"aria-label":v?H:V,children:(0,h.jsx)(f.Icon,{component:v||_===0?o.default:d.default,size:`sm`})}),(0,h.jsx)(`input`,{type:`range`,min:`0`,max:`1`,step:`0.05`,value:v?0:_,onChange:P,className:(0,m.default)(R.volume),"aria-label":U})]})]})]}),(0,h.jsx)(`div`,{className:(0,m.default)(R.controlsRow),style:{justifyContent:`center`,marginTop:`0.2rem`},children:(0,h.jsxs)(`div`,{className:(0,m.default)(R.controlsGroup),children:[(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn),onClick:()=>F(-1),title:q,children:(0,h.jsx)(f.Icon,{component:r.default,size:`sm`})}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn,R.btnPlay),onClick:M,title:e?G:W,"aria-label":e?G:W,children:(0,h.jsx)(f.Icon,{component:e?s.default:c.default,size:`sm`})}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn),onClick:()=>F(1),title:K,children:(0,h.jsx)(f.Icon,{component:i.default,size:`sm`})})]})})]})}exports.AudioCustomControls=g;

package/dist/components/media/Audio/components/AudioCustomControls.js

@@ -1,186 +1,187 @@
 "use client";
-import e from "../../../../icon/chart.js";
-import t from "../../../../icon/chevron-left.js";
-import n from "../../../../icon/chevron-right.js";
-import r from "../../../../icon/clock.js";
-import i from "../../../../icon/mute.js";
-import a from "../../../../icon/pause.js";
-import o from "../../../../icon/play.js";
+import { useWimTranslation as e } from "../../../../i18n/useWimTranslation.js";
+import t from "../../../../icon/chart.js";
+import n from "../../../../icon/chevron-left.js";
+import r from "../../../../icon/chevron-right.js";
+import i from "../../../../icon/clock.js";
+import a from "../../../../icon/mute.js";
+import o from "../../../../icon/pause.js";
+import ee from "../../../../icon/play.js";
 import s from "../../../../icon/repeat.js";
-import ee from "../../../../icon/shuffle.js";
-import c from "../../../../icon/volume.js";
-import { Icon as l } from "../../Icon/Icon.js";
+import c from "../../../../icon/shuffle.js";
+import l from "../../../../icon/volume.js";
+import { Icon as u } from "../../Icon/Icon.js";
 import "react";
-import u from "classnames";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import d from "classnames";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/media/Audio/components/AudioCustomControls.tsx
-function p({ isPlaying: p, currentTime: m, duration: h, volume: g, isMuted: _, repeatMode: v, shuffleMode: y, currentPlaybackRate: b, isBassBoost: x, remainingSleepTime: S, playbackRate: C, presets: w, sleepTimer: T, setRepeatMode: E, setShuffleMode: D, setCurrentPlaybackRate: O, setIsBassBoost: k, setIsMuted: A, togglePlay: j, handleSeek: M, handleVolumeChange: N, playNext: P, toggleSleepTimer: F, formatTime: I, labels: L = {}, styles: R }) {
-	let { seek: z = "Seek", mute: B = "Mute", unmute: V = "Unmute", volume: H = "Volume", play: U = "Play", pause: W = "Pause", next: G = "Next", prev: K = "Previous", repeatMode0: q = "Repeat Off", repeatMode1: J = "Repeat One", repeatMode2: Y = "Repeat All", shuffle: X = "Shuffle", playbackSpeed: Z = "Playback Speed", bassBoost: Q = "Bass Boost", sleepTimer: $ = "Sleep Timer (15m)" } = L, te = v === 0 ? q : v === 1 ? J : Y;
-	return /* @__PURE__ */ f("div", {
-		className: u(R.customControls),
+function m({ isPlaying: m, currentTime: h, duration: g, volume: _, isMuted: v, repeatMode: y, shuffleMode: b, currentPlaybackRate: x, isBassBoost: S, remainingSleepTime: C, playbackRate: w, presets: T, sleepTimer: E, setRepeatMode: D, setShuffleMode: O, setCurrentPlaybackRate: k, setIsBassBoost: A, setIsMuted: j, togglePlay: M, handleSeek: N, handleVolumeChange: P, playNext: F, toggleSleepTimer: I, formatTime: L, labels: R = {}, styles: z }) {
+	let { t: B } = e("common"), { seek: V = B("a11y.seek"), mute: H = B("a11y.mute"), unmute: U = B("a11y.unmute"), volume: W = B("a11y.volume"), play: G = B("a11y.play"), pause: K = B("a11y.pause"), next: q = B("action.next"), prev: J = B("action.previous"), repeatMode0: Y = B("audio.repeat_off"), repeatMode1: X = B("audio.repeat_single"), repeatMode2: Z = B("audio.repeat_all"), shuffle: Q = B("audio.shuffle"), playbackSpeed: $ = B("playback.speed"), bassBoost: te = B("audio.bass_boost"), sleepTimer: ne = "Sleep Timer (15m)" } = R, re = y === 0 ? Y : y === 1 ? X : Z;
+	return /* @__PURE__ */ p("div", {
+		className: d(z.customControls),
 		children: [
-			/* @__PURE__ */ f("div", {
-				className: u(R.time),
+			/* @__PURE__ */ p("div", {
+				className: d(z.time),
 				children: [
-					/* @__PURE__ */ d("span", {
-						className: R.timeCurrent,
-						children: I(m)
+					/* @__PURE__ */ f("span", {
+						className: z.timeCurrent,
+						children: L(h)
 					}),
-					/* @__PURE__ */ f("div", {
-						className: u(R.progressContainer),
-						children: [/* @__PURE__ */ d("input", {
+					/* @__PURE__ */ p("div", {
+						className: d(z.progressContainer),
+						children: [/* @__PURE__ */ f("input", {
 							type: "range",
 							min: "0",
-							max: h || 0,
-							value: m,
+							max: g || 0,
+							value: h,
 							step: "0.1",
-							onChange: M,
-							className: u(R.progress),
-							"aria-label": z
-						}), /* @__PURE__ */ d("div", {
-							className: u(R.progressFill),
-							style: { width: `${m / (h || 1) * 100}%` }
+							onChange: N,
+							className: d(z.progress),
+							"aria-label": V
+						}), /* @__PURE__ */ f("div", {
+							className: d(z.progressFill),
+							style: { width: `${h / (g || 1) * 100}%` }
 						})]
 					}),
-					/* @__PURE__ */ d("span", {
-						className: R.timeTotal,
-						children: I(h)
+					/* @__PURE__ */ f("span", {
+						className: z.timeTotal,
+						children: L(g)
 					})
 				]
 			}),
-			/* @__PURE__ */ f("div", {
-				className: u(R.controlsRow),
-				children: [/* @__PURE__ */ f("div", {
-					className: u(R.controlsGroup),
+			/* @__PURE__ */ p("div", {
+				className: d(z.controlsRow),
+				children: [/* @__PURE__ */ p("div", {
+					className: d(z.controlsGroup),
 					children: [
-						/* @__PURE__ */ f("button", {
+						/* @__PURE__ */ p("button", {
 							type: "button",
-							className: u(R.btn, v > 0 && R.active),
-							onClick: () => E((e) => (e + 1) % 3),
-							title: te,
-							children: [/* @__PURE__ */ d(l, {
+							className: d(z.btn, y > 0 && z.active),
+							onClick: () => D((e) => (e + 1) % 3),
+							title: re,
+							children: [/* @__PURE__ */ f(u, {
 								component: s,
 								size: "sm"
-							}), v === 1 && /* @__PURE__ */ d("span", {
-								className: u(R.badge),
+							}), y === 1 && /* @__PURE__ */ f("span", {
+								className: d(z.badge),
 								children: "1"
 							})]
 						}),
-						/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ f("button", {
 							type: "button",
-							className: u(R.btn, y && R.active),
-							onClick: () => D((e) => !e),
-							title: X,
-							children: /* @__PURE__ */ d(l, {
-								component: ee,
+							className: d(z.btn, b && z.active),
+							onClick: () => O((e) => !e),
+							title: Q,
+							children: /* @__PURE__ */ f(u, {
+								component: c,
 								size: "sm"
 							})
 						}),
-						C && /* @__PURE__ */ f("button", {
+						w && /* @__PURE__ */ p("button", {
 							type: "button",
-							className: u(R.btn, R.btnText),
+							className: d(z.btn, z.btnText),
 							onClick: () => {
 								let e = [
 									.5,
 									1,
 									1.5,
 									2
-								], t = e[(e.indexOf(b) + 1) % e.length];
-								O(t);
+								], t = e[(e.indexOf(x) + 1) % e.length];
+								k(t);
 							},
-							title: Z,
-							children: [b, "x"]
+							title: $,
+							children: [x, "x"]
 						})
 					]
-				}), /* @__PURE__ */ f("div", {
-					className: u(R.controlsGroup),
+				}), /* @__PURE__ */ p("div", {
+					className: d(z.controlsGroup),
 					children: [
-						w && /* @__PURE__ */ d("button", {
+						T && /* @__PURE__ */ f("button", {
 							type: "button",
-							className: u(R.btn, x && R.active),
-							onClick: () => k(!x),
-							title: Q,
-							children: /* @__PURE__ */ d(l, {
-								component: e,
+							className: d(z.btn, S && z.active),
+							onClick: () => A(!S),
+							title: te,
+							children: /* @__PURE__ */ f(u, {
+								component: t,
 								size: "sm"
 							})
 						}),
-						T && /* @__PURE__ */ f("button", {
+						E && /* @__PURE__ */ p("button", {
 							type: "button",
-							className: u(R.btn, S !== null && R.active),
-							onClick: F,
-							title: $,
-							children: [/* @__PURE__ */ d(l, {
-								component: r,
+							className: d(z.btn, C !== null && z.active),
+							onClick: I,
+							title: ne,
+							children: [/* @__PURE__ */ f(u, {
+								component: i,
 								size: "sm"
-							}), S !== null && /* @__PURE__ */ d("span", {
-								className: u(R.badge),
+							}), C !== null && /* @__PURE__ */ f("span", {
+								className: d(z.badge),
 								style: { fontSize: "7px" },
-								children: Math.ceil(S / 60)
+								children: Math.ceil(C / 60)
 							})]
 						}),
-						/* @__PURE__ */ f("div", {
-							className: u(R.volumeContainer),
-							children: [/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ p("div", {
+							className: d(z.volumeContainer),
+							children: [/* @__PURE__ */ f("button", {
 								type: "button",
-								className: u(R.btn),
-								onClick: () => A((e) => !e),
-								"aria-label": _ ? V : B,
-								children: /* @__PURE__ */ d(l, {
-									component: _ || g === 0 ? i : c,
+								className: d(z.btn),
+								onClick: () => j((e) => !e),
+								"aria-label": v ? U : H,
+								children: /* @__PURE__ */ f(u, {
+									component: v || _ === 0 ? a : l,
 									size: "sm"
 								})
-							}), /* @__PURE__ */ d("input", {
+							}), /* @__PURE__ */ f("input", {
 								type: "range",
 								min: "0",
 								max: "1",
 								step: "0.05",
-								value: _ ? 0 : g,
-								onChange: N,
-								className: u(R.volume),
-								"aria-label": H
+								value: v ? 0 : _,
+								onChange: P,
+								className: d(z.volume),
+								"aria-label": W
 							})]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
-				className: u(R.controlsRow),
+			/* @__PURE__ */ f("div", {
+				className: d(z.controlsRow),
 				style: {
 					justifyContent: "center",
 					marginTop: "0.2rem"
 				},
-				children: /* @__PURE__ */ f("div", {
-					className: u(R.controlsGroup),
+				children: /* @__PURE__ */ p("div", {
+					className: d(z.controlsGroup),
 					children: [
-						/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ f("button", {
 							type: "button",
-							className: u(R.btn),
-							onClick: () => P(-1),
-							title: K,
-							children: /* @__PURE__ */ d(l, {
-								component: t,
+							className: d(z.btn),
+							onClick: () => F(-1),
+							title: J,
+							children: /* @__PURE__ */ f(u, {
+								component: n,
 								size: "sm"
 							})
 						}),
-						/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ f("button", {
 							type: "button",
-							className: u(R.btn, R.btnPlay),
-							onClick: j,
-							title: p ? W : U,
-							"aria-label": p ? W : U,
-							children: /* @__PURE__ */ d(l, {
-								component: p ? a : o,
+							className: d(z.btn, z.btnPlay),
+							onClick: M,
+							title: m ? K : G,
+							"aria-label": m ? K : G,
+							children: /* @__PURE__ */ f(u, {
+								component: m ? o : ee,
 								size: "sm"
 							})
 						}),
-						/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ f("button", {
 							type: "button",
-							className: u(R.btn),
-							onClick: () => P(1),
-							title: G,
-							children: /* @__PURE__ */ d(l, {
-								component: n,
+							className: d(z.btn),
+							onClick: () => F(1),
+							title: q,
+							children: /* @__PURE__ */ f(u, {
+								component: r,
 								size: "sm"
 							})
 						})
@@ -191,4 +192,4 @@ function p({ isPlaying: p, currentTime: m, duration: h, volume: g, isMuted: _, r
 	});
 }
 //#endregion
-export { p as AudioCustomControls };
+export { m as AudioCustomControls };

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

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