wimui 0.63.0 → 0.63.1

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

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../hooks/useMediaLoader.cjs"),i=require("./hooks/useAudioPlayer.cjs"),ee=require("./hooks/useAudioMetadata.cjs"),te=require("./components/AudioCustomControls.cjs"),a=require("./audio.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=({src:e,autoPlay:l=!1,loop:ne=!1,muted:u=!1,controls:d=!0,radius:f=`none`,shadow:p=!1,border:m=!1,preload:h,caption:g,className:_,style:v,customControls:y=!1,visualizer:b=!1,showMetadata:x=!1,fadeIn:S=!1,fadeOut:C=!1,crossfade:w=!1,playbackRate:T=!1,hotkeys:E=!1,presets:D=!1,sleepTimer:O=!1,loading:k=`lazy`,demoDelay:A,labels:j={},tracks:M,...N})=>{let{t:P}=t.useWimTranslation(n.commonNs),{unknownTitle:F=P(`audio.unknown_title`),unknownArtist:I=P(`audio.unknown_artist`)}=j,L=(0,o.useMemo)(()=>e?(Array.isArray(e)?e:[e]).map(e=>typeof e==`string`?{src:e}:e):[],[e]),{containerRef:R,isLoaded:re,isIntersecting:z,notifyLoaded:B,shouldShowSkeleton:V}=r.useMediaLoader({loading:k,demoDelay:A,src:L[0]?.src}),H=i.useAudioPlayer({playlist:L,loop:ne,muted:u,fadeIn:S,fadeOut:C,crossfade:w,visualizer:b,hotkeys:E,autoPlay:l}),{isPlaying:U,currentTrack:W,currentTrackIndex:G,activeAudioRef:K,nextAudioRef:q,canvasRef:J,handleTimeUpdate:Y,handleEnded:X,setDuration:ie,playActivePlayer:ae}=H,{metaTitle:Z,metaArtist:Q,metaCover:$}=ee.useAudioMetadata({currentTrack:W,showMetadata:x});(0,o.useEffect)(()=>{W&&K.current&&(K.current.src=W.src,(l||U)&&ae())},[G,W]);let oe=f===`none`?null:a.default[`radius${f.charAt(0).toUpperCase()+f.slice(1)}`];return(0,c.jsxs)(`figure`,{className:(0,s.default)(`wim-audio`,a.default.root,_),style:v,"data-testid":`audio-root`,children:[(0,c.jsxs)(`div`,{ref:R,className:(0,s.default)(a.default.inner,oe,y&&p&&a.default.shadow,y&&m&&a.default.border,y&&a.default.custom,S&&a.default.fadeIn,S&&re&&a.default.isLoaded,V&&a.default.loading),"data-testid":`audio-inner`,children:[b&&y&&(0,c.jsx)(`canvas`,{ref:J,className:a.default.visualizerCanvas,"data-testid":`audio-canvas`}),y&&x&&(Z||Q||$)&&(0,c.jsxs)(`div`,{className:a.default.metadata,style:{position:`relative`,zIndex:2},"data-testid":`audio-metadata`,children:[$&&(0,c.jsx)(`img`,{src:$,alt:P(`a11y.cover_art`),className:a.default.cover,"data-testid":`audio-cover`}),(0,c.jsxs)(`div`,{className:a.default.info,children:[(0,c.jsx)(`div`,{className:a.default.title,"data-testid":`audio-title`,children:Z||F}),(0,c.jsx)(`div`,{className:a.default.artist,"data-testid":`audio-artist`,children:Q||I})]})]}),(0,c.jsxs)(`div`,{style:{display:y?`none`:`block`,width:`100%`},children:[z&&(0,c.jsx)(`audio`,{ref:K,src:W?.src,className:a.default.audio,"data-testid":`audio-active`,loop:H.repeatMode===1&&L.length===1,muted:H.isMuted,controls:!y&&d,preload:h,crossOrigin:`anonymous`,onTimeUpdate:Y,onEnded:X,...N,onLoadedMetadata:e=>{ie(e.currentTarget.duration),B(),N.onLoadedMetadata?.(e)},onLoadedData:e=>{B(),N.onLoadedData?.(e)},onCanPlay:e=>{B(),N.onCanPlay?.(e)},children:M?.map((e,t)=>(0,c.jsx)(`track`,{...e},t))}),(0,c.jsx)(`audio`,{ref:q,muted:H.isMuted,preload:`auto`,crossOrigin:`anonymous`,"data-testid":`audio-next`})]}),y&&(0,c.jsx)(te.AudioCustomControls,{styles:a.default,isPlaying:U,currentTime:H.currentTime,duration:H.duration,volume:H.volume,isMuted:H.isMuted,repeatMode:H.repeatMode,shuffleMode:H.shuffleMode,currentPlaybackRate:H.currentPlaybackRate,isBassBoost:H.isBassBoost,remainingSleepTime:H.remainingSleepTime,playbackRate:T,presets:D,sleepTimer:O,setRepeatMode:H.setRepeatMode,setShuffleMode:H.setShuffleMode,setCurrentPlaybackRate:H.setCurrentPlaybackRate,setIsBassBoost:H.setIsBassBoost,setIsMuted:H.setIsMuted,togglePlay:H.togglePlay,handleSeek:H.handleSeek,handleVolumeChange:H.handleVolumeChange,playNext:H.playNext,toggleSleepTimer:H.toggleSleepTimer,formatTime:H.formatTime,labels:j})]}),g&&(0,c.jsx)(`figcaption`,{className:a.default.caption,children:g})]})};exports.Audio=l;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../_internal/composeEventHandlers.cjs"),i=require("../../../hooks/useMediaLoader.cjs"),a=require("./hooks/useAudioPlayer.cjs"),o=require("./hooks/useAudioMetadata.cjs"),s=require("./components/AudioCustomControls.cjs"),c=require("./audio.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=({src:e,autoPlay:f=!1,loop:ee=!1,muted:p=!1,controls:m=!0,radius:h=`none`,shadow:te=!1,border:g=!1,preload:_,caption:v,className:y,style:b,customControls:x=!1,visualizer:S=!1,showMetadata:C=!1,fadeIn:w=!1,fadeOut:ne=!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}=t.useWimTranslation(n.commonNs),{unknownTitle:I=F(`audio.unknown_title`),unknownArtist:L=F(`audio.unknown_artist`)}=M,R=(0,l.useMemo)(()=>e?(Array.isArray(e)?e:[e]).map(e=>typeof e==`string`?{src:e}:e):[],[e]),{containerRef:z,isLoaded:re,isIntersecting:B,notifyLoaded:V,shouldShowSkeleton:H}=i.useMediaLoader({loading:A,demoDelay:j,src:R[0]?.src}),U=a.useAudioPlayer({playlist:R,loop:ee,muted:p,fadeIn:w,fadeOut:ne,crossfade:T,visualizer:S,hotkeys:D,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:$}=o.useAudioMetadata({currentTrack:G,showMetadata:C});(0,l.useEffect)(()=>{G&&q.current&&(q.current.src=G.src,(f||W)&&oe())},[K,G]);let se=h===`none`?null:c.default[`radius${h.charAt(0).toUpperCase()+h.slice(1)}`];return(0,d.jsxs)(`figure`,{className:(0,u.default)(`wim-audio`,c.default.root,y),style:b,"data-testid":`audio-root`,children:[(0,d.jsxs)(`div`,{ref:z,className:(0,u.default)(c.default.inner,se,x&&te&&c.default.shadow,x&&g&&c.default.border,x&&c.default.custom,w&&c.default.fadeIn,w&&re&&c.default.isLoaded,H&&c.default.loading),"data-testid":`audio-inner`,children:[S&&x&&(0,d.jsx)(`canvas`,{ref:Y,className:c.default.visualizerCanvas,"data-testid":`audio-canvas`}),x&&C&&(Z||Q||$)&&(0,d.jsxs)(`div`,{className:c.default.metadata,style:{position:`relative`,zIndex:2},"data-testid":`audio-metadata`,children:[$&&(0,d.jsx)(`img`,{src:$,alt:F(`a11y.cover_art`),className:c.default.cover,"data-testid":`audio-cover`}),(0,d.jsxs)(`div`,{className:c.default.info,children:[(0,d.jsx)(`div`,{className:c.default.title,"data-testid":`audio-title`,children:Z||I}),(0,d.jsx)(`div`,{className:c.default.artist,"data-testid":`audio-artist`,children:Q||L})]})]}),(0,d.jsxs)(`div`,{style:{display:x?`none`:`block`,width:`100%`},children:[B&&(0,d.jsx)(`audio`,{ref:q,src:G?.src,className:c.default.audio,"data-testid":`audio-active`,loop:U.repeatMode===1&&R.length===1,muted:U.isMuted,controls:!x&&m,preload:_,crossOrigin:`anonymous`,...P,onTimeUpdate:r.composeEventHandlers(P.onTimeUpdate,X),onEnded:r.composeEventHandlers(P.onEnded,ie),onLoadedMetadata:e=>{ae(e.currentTarget.duration),V(),P.onLoadedMetadata?.(e)},onLoadedData:e=>{V(),P.onLoadedData?.(e)},onCanPlay:e=>{V(),P.onCanPlay?.(e)},children:N?.map((e,t)=>(0,d.jsx)(`track`,{...e},t))}),(0,d.jsx)(`audio`,{ref:J,muted:U.isMuted,preload:`auto`,crossOrigin:`anonymous`,"data-testid":`audio-next`})]}),x&&(0,d.jsx)(s.AudioCustomControls,{styles:c.default,isPlaying:W,currentTime:U.currentTime,duration:U.duration,volume:U.volume,isMuted:U.isMuted,repeatMode:U.repeatMode,shuffleMode:U.shuffleMode,currentPlaybackRate:U.currentPlaybackRate,isBassBoost:U.isBassBoost,remainingSleepTime:U.remainingSleepTime,playbackRate:E,presets:O,sleepTimer:k,setRepeatMode:U.setRepeatMode,setShuffleMode:U.setShuffleMode,setCurrentPlaybackRate:U.setCurrentPlaybackRate,setIsBassBoost:U.setIsBassBoost,setIsMuted:U.setIsMuted,togglePlay:U.togglePlay,handleSeek:U.handleSeek,handleVolumeChange:U.handleVolumeChange,playNext:U.playNext,toggleSleepTimer:U.toggleSleepTimer,formatTime:U.formatTime,labels:M})]}),v&&(0,d.jsx)(`figcaption`,{className:c.default.caption,children:v})]})};exports.Audio=f;

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

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

package/dist/components/media/Image/Image.cjs

@@ -1,7 +1,7 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../icon/image.cjs"),n=require("../Icon/Icon.cjs"),r=require("../../../hooks/useMediaLoader.cjs"),i=require("./image.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,t)=>{if(t===void 0||t===`none`||t===!1)return;let n={blur:{sm:`4px`,md:`8px`,lg:`16px`},grayscale:{sm:`33%`,md:`66%`,lg:`100%`,true:`100%`},brightness:{sm:`0.8`,md:`0.5`,lg:`0.3`},contrast:{sm:`1.2`,md:`1.5`,lg:`2`},sepia:{sm:`33%`,md:`66%`,lg:`100%`},saturate:{sm:`1.5`,md:`2`,lg:`3`},invert:{sm:`33%`,md:`66%`,lg:`100%`},opacity:{sm:`0.8`,md:`0.5`,lg:`0.2`}};if(e===`hueRotate`)return`${t}deg`;let r=typeof t==`boolean`?`true`:t;return n[e]?.[r]},l=e=>{let t=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(e,t,n,r)=>t+t+n+n+r+r),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return n?{r:parseInt(n[1],16)/255,g:parseInt(n[2],16)/255,b:parseInt(n[3],16)/255}:{r:0,g:0,b:0}},u=e=>{if(!e)return;let t=[],n=c(`blur`,e.blur);n&&t.push(`blur(${n})`);let r=c(`grayscale`,e.grayscale);r&&t.push(`grayscale(${r})`);let i=c(`brightness`,e.brightness);i&&t.push(`brightness(${i})`);let a=c(`contrast`,e.contrast);a&&t.push(`contrast(${a})`);let o=c(`sepia`,e.sepia);o&&t.push(`sepia(${o})`);let s=c(`saturate`,e.saturate);s&&t.push(`saturate(${s})`);let l=c(`hueRotate`,e.hueRotate);l&&t.push(`hue-rotate(${l})`);let u=c(`invert`,e.invert);u&&t.push(`invert(${u})`);let d=c(`opacity`,e.opacity);return d&&t.push(`opacity(${d})`),t.length>0?t.join(` `):`none`},d=({src:e,alt:c,width:d,height:f,radius:p=`none`,shadow:m=!1,border:h=!1,fit:g=`cover`,loading:_,caption:v,filter:y,hoverFilter:b,backdropFilter:x,hoverBackdropFilter:S,transition:C=`normal`,noise:w,duotone:T,overlay:E,zoom:D=!1,tilt:O=!1,fadeIn:k=!1,blendMode:A,bgColor:j,demoDelay:M,priority:N=!1,fallback:P,className:F,style:I,...L})=>{let[R,z]=a.default.useState(!1),{containerRef:B,isLoaded:V,isIntersecting:H,notifyLoaded:U,shouldShowSkeleton:W}=r.useMediaLoader({loading:_,src:e,demoDelay:M}),[G,K]=a.default.useState({}),q=a.default.useId().replace(/:/g,``),J=e=>{if(!O)return;let t=e.currentTarget.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=t.width/2,a=t.height/2,o=(r-a)/a*-10,s=(n-i)/i*10;K({transform:`perspective(1000px) rotateX(${o}deg) rotateY(${s}deg)`})},Y=()=>{O&&K({transform:`perspective(1000px) rotateX(0deg) rotateY(0deg)`})},X=a.default.useMemo(()=>{let e={};D&&(e[`--wim-image-zoom-scale`]=(typeof D==`number`?D:1.05).toString());let t=u(y);t&&(e[`--wim-image-filter`]=t),T&&(e[`--wim-image-filter`]=`${e[`--wim-image-filter`]||``} url(#${q})`.trim());let n=u(x);n&&(e[`--wim-image-backdrop`]=n);let r=u(b);r&&(e[`--wim-image-hover-filter`]=r);let i=u(S);if(i&&(e[`--wim-image-hover-backdrop`]=i),w&&w!==`none`&&(e[`--wim-image-noise-opacity`]={xs:`0.02`,sm:`0.05`,md:`0.1`,lg:`0.2`,xl:`0.3`,"2xl":`0.4`,"3xl":`0.5`,"4xl":`0.6`,"5xl":`0.7`}[w]||`0`),E){let t=typeof E.intensity==`number`?E.intensity.toString():{sm:`0.3`,md:`0.6`,lg:`0.9`}[E.intensity]||`0.5`;e[`--wim-image-overlay-color`]=E.color||`rgba(0,0,0,0.5)`,e[`--wim-image-overlay-opacity`]=E.showOnHover?`0`:t,e[`--wim-image-overlay-hover-opacity`]=t,E.blendMode&&(e[`--wim-image-overlay-blend`]=E.blendMode)}return A&&(e[`--wim-image-blend-mode`]=A),j&&(e[`--wim-image-bg-color`]=j),e[`--wim-image-transition-duration`]={none:`0s`,fast:`var(--wim-duration-fast)`,normal:`var(--wim-duration-base)`,slow:`var(--wim-duration-extra-slow)`}[C],e},[y,b,x,S,C,w,T,E,q,D,A,j]),Z=a.default.useMemo(()=>{if(!T)return null;let e=l(T.light),t=l(T.dark);return`
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/composeEventHandlers.cjs"),n=require("../../../icon/image.cjs"),r=require("../Icon/Icon.cjs"),i=require("../../../hooks/useMediaLoader.cjs"),a=require("./image.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,t)=>{if(t===void 0||t===`none`||t===!1)return;let n={blur:{sm:`4px`,md:`8px`,lg:`16px`},grayscale:{sm:`33%`,md:`66%`,lg:`100%`,true:`100%`},brightness:{sm:`0.8`,md:`0.5`,lg:`0.3`},contrast:{sm:`1.2`,md:`1.5`,lg:`2`},sepia:{sm:`33%`,md:`66%`,lg:`100%`},saturate:{sm:`1.5`,md:`2`,lg:`3`},invert:{sm:`33%`,md:`66%`,lg:`100%`},opacity:{sm:`0.8`,md:`0.5`,lg:`0.2`}};if(e===`hueRotate`)return`${t}deg`;let r=typeof t==`boolean`?`true`:t;return n[e]?.[r]},u=e=>{let t=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(e,t,n,r)=>t+t+n+n+r+r),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return n?{r:parseInt(n[1],16)/255,g:parseInt(n[2],16)/255,b:parseInt(n[3],16)/255}:{r:0,g:0,b:0}},d=e=>{if(!e)return;let t=[],n=l(`blur`,e.blur);n&&t.push(`blur(${n})`);let r=l(`grayscale`,e.grayscale);r&&t.push(`grayscale(${r})`);let i=l(`brightness`,e.brightness);i&&t.push(`brightness(${i})`);let a=l(`contrast`,e.contrast);a&&t.push(`contrast(${a})`);let o=l(`sepia`,e.sepia);o&&t.push(`sepia(${o})`);let s=l(`saturate`,e.saturate);s&&t.push(`saturate(${s})`);let c=l(`hueRotate`,e.hueRotate);c&&t.push(`hue-rotate(${c})`);let u=l(`invert`,e.invert);u&&t.push(`invert(${u})`);let d=l(`opacity`,e.opacity);return d&&t.push(`opacity(${d})`),t.length>0?t.join(` `):`none`},f=({src:e,alt:l,width:f,height:p,radius:m=`none`,shadow:h=!1,border:g=!1,fit:_=`cover`,loading:v,caption:y,filter:b,hoverFilter:x,backdropFilter:S,hoverBackdropFilter:C,transition:w=`normal`,noise:T,duotone:E,overlay:D,zoom:O=!1,tilt:k=!1,fadeIn:A=!1,blendMode:j,bgColor:M,demoDelay:N,priority:P=!1,fallback:F,className:I,style:L,...R})=>{let[z,B]=o.default.useState(!1),{containerRef:V,isLoaded:H,isIntersecting:U,notifyLoaded:W,shouldShowSkeleton:G}=i.useMediaLoader({loading:v,src:e,demoDelay:N}),[K,q]=o.default.useState({}),J=o.default.useId().replace(/:/g,``),Y=e=>{if(!k)return;let t=e.currentTarget.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=t.width/2,a=t.height/2,o=(r-a)/a*-10,s=(n-i)/i*10;q({transform:`perspective(1000px) rotateX(${o}deg) rotateY(${s}deg)`})},X=()=>{k&&q({transform:`perspective(1000px) rotateX(0deg) rotateY(0deg)`})},Z=o.default.useMemo(()=>{let e={};O&&(e[`--wim-image-zoom-scale`]=(typeof O==`number`?O:1.05).toString());let t=d(b);t&&(e[`--wim-image-filter`]=t),E&&(e[`--wim-image-filter`]=`${e[`--wim-image-filter`]||``} url(#${J})`.trim());let n=d(S);n&&(e[`--wim-image-backdrop`]=n);let r=d(x);r&&(e[`--wim-image-hover-filter`]=r);let i=d(C);if(i&&(e[`--wim-image-hover-backdrop`]=i),T&&T!==`none`&&(e[`--wim-image-noise-opacity`]={xs:`0.02`,sm:`0.05`,md:`0.1`,lg:`0.2`,xl:`0.3`,"2xl":`0.4`,"3xl":`0.5`,"4xl":`0.6`,"5xl":`0.7`}[T]||`0`),D){let t=typeof D.intensity==`number`?D.intensity.toString():{sm:`0.3`,md:`0.6`,lg:`0.9`}[D.intensity]||`0.5`;e[`--wim-image-overlay-color`]=D.color||`rgba(0,0,0,0.5)`,e[`--wim-image-overlay-opacity`]=D.showOnHover?`0`:t,e[`--wim-image-overlay-hover-opacity`]=t,D.blendMode&&(e[`--wim-image-overlay-blend`]=D.blendMode)}return j&&(e[`--wim-image-blend-mode`]=j),M&&(e[`--wim-image-bg-color`]=M),e[`--wim-image-transition-duration`]={none:`0s`,fast:`var(--wim-duration-fast)`,normal:`var(--wim-duration-base)`,slow:`var(--wim-duration-extra-slow)`}[w],e},[b,x,S,C,w,T,E,D,J,O,j,M]),Q=o.default.useMemo(()=>{if(!E)return null;let e=u(E.light),t=u(E.dark);return`
       ${e.r-t.r} 0 0 0 ${t.r}
       ${e.g-t.g} 0 0 0 ${t.g}
       ${e.b-t.b} 0 0 0 ${t.b}
       0 0 0 1 0
-    `},[T]),Q={width:`100%`,height:f||`auto`,objectFit:g,...I},$=p===`none`?null:i.default[`radius${p.charAt(0).toUpperCase()+p.slice(1)}`];return(0,s.jsxs)(`figure`,{ref:B,className:(0,o.default)(`wim-image`,i.default.root,F),"data-testid":`image-root`,style:{maxWidth:d||`100%`,width:`100%`,...X,...G},onMouseMove:J,onMouseLeave:Y,children:[T&&(0,s.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},children:(0,s.jsx)(`filter`,{id:q,colorInterpolationFilters:`sRGB`,children:(0,s.jsx)(`feColorMatrix`,{type:`matrix`,values:Z||``})})}),(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.inner,$,m&&i.default.shadow,h&&i.default.border,(x||S)&&i.default.hasBackdrop,w&&w!==`none`&&i.default.hasNoise,E&&i.default.hasOverlay,D&&i.default.zoomable,k&&i.default.fadeIn,k&&V&&i.default.isLoaded,W&&k&&i.default.loading),style:f===void 0?void 0:{height:f},"data-testid":`image-inner`,children:[H&&!R&&(0,s.jsx)(`img`,{src:e,alt:c,onLoad:U,onError:()=>z(!0),className:(0,o.default)(i.default.image,(y||b||T)&&i.default.hasFilter),style:Q,loading:_,fetchPriority:N?`high`:void 0,"data-testid":`image-element`,...L}),R&&(0,s.jsx)(`div`,{className:i.default.fallback,"data-testid":`image-fallback`,children:P||(0,s.jsxs)(`div`,{className:i.default.defaultFallback,children:[(0,s.jsx)(n.Icon,{component:t.default,size:`lg`,color:`text-tertiary`}),c&&(0,s.jsx)(`span`,{className:i.default.fallbackText,children:c})]})})]}),v&&(0,s.jsx)(`figcaption`,{className:i.default.caption,"data-testid":`image-caption`,children:v})]})};exports.Image=d;
+    `},[E]),$={width:`100%`,height:p||`auto`,objectFit:_,...L},ee=m===`none`?null:a.default[`radius${m.charAt(0).toUpperCase()+m.slice(1)}`];return(0,c.jsxs)(`figure`,{ref:V,className:(0,s.default)(`wim-image`,a.default.root,I),"data-testid":`image-root`,style:{maxWidth:f||`100%`,width:`100%`,...Z,...K},onMouseMove:Y,onMouseLeave:X,children:[E&&(0,c.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},children:(0,c.jsx)(`filter`,{id:J,colorInterpolationFilters:`sRGB`,children:(0,c.jsx)(`feColorMatrix`,{type:`matrix`,values:Q||``})})}),(0,c.jsxs)(`div`,{className:(0,s.default)(a.default.inner,ee,h&&a.default.shadow,g&&a.default.border,(S||C)&&a.default.hasBackdrop,T&&T!==`none`&&a.default.hasNoise,D&&a.default.hasOverlay,O&&a.default.zoomable,A&&a.default.fadeIn,A&&H&&a.default.isLoaded,G&&A&&a.default.loading),style:p===void 0?void 0:{height:p},"data-testid":`image-inner`,children:[U&&!z&&(0,c.jsx)(`img`,{src:e,alt:l,className:(0,s.default)(a.default.image,(b||x||E)&&a.default.hasFilter),style:$,loading:v,fetchPriority:P?`high`:void 0,"data-testid":`image-element`,...R,onLoad:t.composeEventHandlers(R.onLoad,W),onError:t.composeEventHandlers(R.onError,()=>B(!0))}),z&&(0,c.jsx)(`div`,{className:a.default.fallback,"data-testid":`image-fallback`,children:F||(0,c.jsxs)(`div`,{className:a.default.defaultFallback,children:[(0,c.jsx)(r.Icon,{component:n.default,size:`lg`,color:`text-tertiary`}),l&&(0,c.jsx)(`span`,{className:a.default.fallbackText,children:l})]})})]}),y&&(0,c.jsx)(`figcaption`,{className:a.default.caption,"data-testid":`image-caption`,children:y})]})};exports.Image=f;

package/dist/components/media/Image/Image.js

@@ -1,13 +1,14 @@
 "use client";
-import e from "../../../icon/image.js";
-import { Icon as t } from "../Icon/Icon.js";
-import { useMediaLoader as n } from "../../../hooks/useMediaLoader.js";
-import r from "./image.module.js";
-import i from "react";
-import a from "classnames";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { composeEventHandlers as e } from "../../_internal/composeEventHandlers.js";
+import t from "../../../icon/image.js";
+import { Icon as n } from "../Icon/Icon.js";
+import { useMediaLoader as r } from "../../../hooks/useMediaLoader.js";
+import i from "./image.module.js";
+import a from "react";
+import o from "classnames";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/media/Image/Image.tsx
-var c = (e, t) => {
+var l = (e, t) => {
 	if (t === void 0 || t === "none" || t === !1) return;
 	let n = {
 		blur: {
@@ -55,7 +56,7 @@ var c = (e, t) => {
 	if (e === "hueRotate") return `${t}deg`;
 	let r = typeof t == "boolean" ? "true" : t;
 	return n[e]?.[r];
-}, l = (e) => {
+}, u = (e) => {
 	let t = e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (e, t, n, r) => t + t + n + n + r + r), n = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
 	return n ? {
 		r: parseInt(n[1], 16) / 255,
@@ -66,48 +67,48 @@ var c = (e, t) => {
 		g: 0,
 		b: 0
 	};
-}, u = (e) => {
+}, d = (e) => {
 	if (!e) return;
-	let t = [], n = c("blur", e.blur);
+	let t = [], n = l("blur", e.blur);
 	n && t.push(`blur(${n})`);
-	let r = c("grayscale", e.grayscale);
+	let r = l("grayscale", e.grayscale);
 	r && t.push(`grayscale(${r})`);
-	let i = c("brightness", e.brightness);
+	let i = l("brightness", e.brightness);
 	i && t.push(`brightness(${i})`);
-	let a = c("contrast", e.contrast);
+	let a = l("contrast", e.contrast);
 	a && t.push(`contrast(${a})`);
-	let o = c("sepia", e.sepia);
+	let o = l("sepia", e.sepia);
 	o && t.push(`sepia(${o})`);
-	let s = c("saturate", e.saturate);
+	let s = l("saturate", e.saturate);
 	s && t.push(`saturate(${s})`);
-	let l = c("hueRotate", e.hueRotate);
-	l && t.push(`hue-rotate(${l})`);
-	let u = c("invert", e.invert);
+	let c = l("hueRotate", e.hueRotate);
+	c && t.push(`hue-rotate(${c})`);
+	let u = l("invert", e.invert);
 	u && t.push(`invert(${u})`);
-	let d = c("opacity", e.opacity);
+	let d = l("opacity", e.opacity);
 	return d && t.push(`opacity(${d})`), t.length > 0 ? t.join(" ") : "none";
-}, d = ({ src: c, alt: d, width: f, height: p, radius: m = "none", shadow: h = !1, border: g = !1, fit: _ = "cover", loading: v, caption: y, filter: b, hoverFilter: x, backdropFilter: S, hoverBackdropFilter: C, transition: w = "normal", noise: T, duotone: E, overlay: D, zoom: O = !1, tilt: k = !1, fadeIn: A = !1, blendMode: j, bgColor: M, demoDelay: N, priority: P = !1, fallback: F, className: I, style: L, ...R }) => {
-	let [z, B] = i.useState(!1), { containerRef: V, isLoaded: H, isIntersecting: U, notifyLoaded: W, shouldShowSkeleton: G } = n({
-		loading: v,
-		src: c,
-		demoDelay: N
-	}), [K, q] = i.useState({}), J = i.useId().replace(/:/g, ""), Y = (e) => {
-		if (!k) return;
+}, f = ({ src: l, alt: f, width: p, height: m, radius: h = "none", shadow: g = !1, border: _ = !1, fit: v = "cover", loading: y, caption: b, filter: x, hoverFilter: S, backdropFilter: C, hoverBackdropFilter: w, transition: T = "normal", noise: E, duotone: D, overlay: O, zoom: k = !1, tilt: A = !1, fadeIn: j = !1, blendMode: M, bgColor: N, demoDelay: P, priority: F = !1, fallback: I, className: L, style: R, ...z }) => {
+	let [B, V] = a.useState(!1), { containerRef: H, isLoaded: U, isIntersecting: W, notifyLoaded: G, shouldShowSkeleton: K } = r({
+		loading: y,
+		src: l,
+		demoDelay: P
+	}), [q, J] = a.useState({}), Y = a.useId().replace(/:/g, ""), X = (e) => {
+		if (!A) return;
 		let t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top, i = t.width / 2, a = t.height / 2, o = (r - a) / a * -10, s = (n - i) / i * 10;
-		q({ transform: `perspective(1000px) rotateX(${o}deg) rotateY(${s}deg)` });
-	}, X = () => {
-		k && q({ transform: "perspective(1000px) rotateX(0deg) rotateY(0deg)" });
-	}, Z = i.useMemo(() => {
+		J({ transform: `perspective(1000px) rotateX(${o}deg) rotateY(${s}deg)` });
+	}, Z = () => {
+		A && J({ transform: "perspective(1000px) rotateX(0deg) rotateY(0deg)" });
+	}, Q = a.useMemo(() => {
 		let e = {};
-		O && (e["--wim-image-zoom-scale"] = (typeof O == "number" ? O : 1.05).toString());
-		let t = u(b);
-		t && (e["--wim-image-filter"] = t), E && (e["--wim-image-filter"] = `${e["--wim-image-filter"] || ""} url(#${J})`.trim());
-		let n = u(S);
+		k && (e["--wim-image-zoom-scale"] = (typeof k == "number" ? k : 1.05).toString());
+		let t = d(x);
+		t && (e["--wim-image-filter"] = t), D && (e["--wim-image-filter"] = `${e["--wim-image-filter"] || ""} url(#${Y})`.trim());
+		let n = d(C);
 		n && (e["--wim-image-backdrop"] = n);
-		let r = u(x);
+		let r = d(S);
 		r && (e["--wim-image-hover-filter"] = r);
-		let i = u(C);
-		if (i && (e["--wim-image-hover-backdrop"] = i), T && T !== "none" && (e["--wim-image-noise-opacity"] = {
+		let i = d(w);
+		if (i && (e["--wim-image-hover-backdrop"] = i), E && E !== "none" && (e["--wim-image-noise-opacity"] = {
 			xs: "0.02",
 			sm: "0.05",
 			md: "0.1",
@@ -117,22 +118,21 @@ var c = (e, t) => {
 			"3xl": "0.5",
 			"4xl": "0.6",
 			"5xl": "0.7"
-		}[T] || "0"), D) {
-			let t = typeof D.intensity == "number" ? D.intensity.toString() : {
+		}[E] || "0"), O) {
+			let t = typeof O.intensity == "number" ? O.intensity.toString() : {
 				sm: "0.3",
 				md: "0.6",
 				lg: "0.9"
-			}[D.intensity] || "0.5";
-			e["--wim-image-overlay-color"] = D.color || "rgba(0,0,0,0.5)", e["--wim-image-overlay-opacity"] = D.showOnHover ? "0" : t, e["--wim-image-overlay-hover-opacity"] = t, D.blendMode && (e["--wim-image-overlay-blend"] = D.blendMode);
+			}[O.intensity] || "0.5";
+			e["--wim-image-overlay-color"] = O.color || "rgba(0,0,0,0.5)", e["--wim-image-overlay-opacity"] = O.showOnHover ? "0" : t, e["--wim-image-overlay-hover-opacity"] = t, O.blendMode && (e["--wim-image-overlay-blend"] = O.blendMode);
 		}
-		return j && (e["--wim-image-blend-mode"] = j), M && (e["--wim-image-bg-color"] = M), e["--wim-image-transition-duration"] = {
+		return M && (e["--wim-image-blend-mode"] = M), N && (e["--wim-image-bg-color"] = N), e["--wim-image-transition-duration"] = {
 			none: "0s",
 			fast: "var(--wim-duration-fast)",
 			normal: "var(--wim-duration-base)",
 			slow: "var(--wim-duration-extra-slow)"
-		}[w], e;
+		}[T], e;
 	}, [
-		b,
 		x,
 		S,
 		C,
@@ -140,91 +140,92 @@ var c = (e, t) => {
 		T,
 		E,
 		D,
-		J,
 		O,
-		j,
-		M
-	]), Q = i.useMemo(() => {
-		if (!E) return null;
-		let e = l(E.light), t = l(E.dark);
+		Y,
+		k,
+		M,
+		N
+	]), $ = a.useMemo(() => {
+		if (!D) return null;
+		let e = u(D.light), t = u(D.dark);
 		return `
       ${e.r - t.r} 0 0 0 ${t.r}
       ${e.g - t.g} 0 0 0 ${t.g}
       ${e.b - t.b} 0 0 0 ${t.b}
       0 0 0 1 0
     `;
-	}, [E]), $ = {
+	}, [D]), ee = {
 		width: "100%",
-		height: p || "auto",
-		objectFit: _,
-		...L
-	}, ee = m === "none" ? null : r[`radius${m.charAt(0).toUpperCase() + m.slice(1)}`];
-	return /* @__PURE__ */ s("figure", {
-		ref: V,
-		className: a("wim-image", r.root, I),
+		height: m || "auto",
+		objectFit: v,
+		...R
+	}, te = h === "none" ? null : i[`radius${h.charAt(0).toUpperCase() + h.slice(1)}`];
+	return /* @__PURE__ */ c("figure", {
+		ref: H,
+		className: o("wim-image", i.root, L),
 		"data-testid": "image-root",
 		style: {
-			maxWidth: f || "100%",
+			maxWidth: p || "100%",
 			width: "100%",
-			...Z,
-			...K
+			...Q,
+			...q
 		},
-		onMouseMove: Y,
-		onMouseLeave: X,
+		onMouseMove: X,
+		onMouseLeave: Z,
 		children: [
-			E && /* @__PURE__ */ o("svg", {
+			D && /* @__PURE__ */ s("svg", {
 				style: {
 					position: "absolute",
 					width: 0,
 					height: 0
 				},
-				children: /* @__PURE__ */ o("filter", {
-					id: J,
+				children: /* @__PURE__ */ s("filter", {
+					id: Y,
 					colorInterpolationFilters: "sRGB",
-					children: /* @__PURE__ */ o("feColorMatrix", {
+					children: /* @__PURE__ */ s("feColorMatrix", {
 						type: "matrix",
-						values: Q || ""
+						values: $ || ""
 					})
 				})
 			}),
-			/* @__PURE__ */ s("div", {
-				className: a(r.inner, ee, h && r.shadow, g && r.border, (S || C) && r.hasBackdrop, T && T !== "none" && r.hasNoise, D && r.hasOverlay, O && r.zoomable, A && r.fadeIn, A && H && r.isLoaded, G && A && r.loading),
-				style: p === void 0 ? void 0 : { height: p },
+			/* @__PURE__ */ c("div", {
+				className: o(i.inner, te, g && i.shadow, _ && i.border, (C || w) && i.hasBackdrop, E && E !== "none" && i.hasNoise, O && i.hasOverlay, k && i.zoomable, j && i.fadeIn, j && U && i.isLoaded, K && j && i.loading),
+				style: m === void 0 ? void 0 : { height: m },
 				"data-testid": "image-inner",
-				children: [U && !z && /* @__PURE__ */ o("img", {
-					src: c,
-					alt: d,
-					onLoad: W,
-					onError: () => B(!0),
-					className: a(r.image, (b || x || E) && r.hasFilter),
-					style: $,
-					loading: v,
-					fetchPriority: P ? "high" : void 0,
+				children: [W && !B && /* @__PURE__ */ s("img", {
+					src: l,
+					alt: f,
+					className: o(i.image, (x || S || D) && i.hasFilter),
+					style: ee,
+					loading: y,
+					fetchPriority: F ? "high" : void 0,
 					"data-testid": "image-element",
-					...R
-				}), z && /* @__PURE__ */ o("div", {
-					className: r.fallback,
+					...z,
+					onLoad: e(z.onLoad, G),
+					onError: e(z.onError, () => V(!0))
+				}), B && /* @__PURE__ */ s("div", {
+					className: i.fallback,
 					"data-testid": "image-fallback",
-					children: F || /* @__PURE__ */ s("div", {
-						className: r.defaultFallback,
-						children: [/* @__PURE__ */ o(t, {
-							component: e,
+					children: I || /* @__PURE__ */ c("div", {
+						className: i.defaultFallback,
+						children: [/* @__PURE__ */ s(n, {
+							component: t,
 							size: "lg",
 							color: "text-tertiary"
-						}), d && /* @__PURE__ */ o("span", {
-							className: r.fallbackText,
-							children: d
+						}), f && /* @__PURE__ */ s("span", {
+							className: i.fallbackText,
+							children: f
 						})]
 					})
 				})]
 			}),
-			y && /* @__PURE__ */ o("figcaption", {
-				className: r.caption,
+			b && /* @__PURE__ */ s("figcaption", {
+				className: i.caption,
 				"data-testid": "image-caption",
-				children: y
+				children: b
 			})
 		]
 	});
 };
 //#endregion
-export { d as Image };
+export { f as Image };

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

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