wimui 0.1.0

package/dist/components/media/Audio/components/AudioCustomControls.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+export type AudioLabels = {
+    seek?: string;
+    mute?: string;
+    unmute?: string;
+    volume?: string;
+    play?: string;
+    pause?: string;
+    next?: string;
+    prev?: string;
+    repeatMode0?: string;
+    repeatMode1?: string;
+    repeatMode2?: string;
+    shuffle?: string;
+    playbackSpeed?: string;
+    bassBoost?: string;
+    sleepTimer?: string;
+    unknownTitle?: string;
+    unknownArtist?: string;
+};
+interface AudioCustomControlsProps {
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    isMuted: boolean;
+    repeatMode: 0 | 1 | 2;
+    shuffleMode: boolean;
+    currentPlaybackRate: number;
+    isBassBoost: boolean;
+    remainingSleepTime: number | null;
+    playbackRate: boolean;
+    presets: boolean;
+    sleepTimer: boolean;
+    setRepeatMode: React.Dispatch<React.SetStateAction<0 | 1 | 2>>;
+    setShuffleMode: React.Dispatch<React.SetStateAction<boolean>>;
+    setCurrentPlaybackRate: (rate: number) => void;
+    setIsBassBoost: (boost: boolean) => void;
+    setIsMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    togglePlay: () => void;
+    handleSeek: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleVolumeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    playNext: (dir: 1 | -1) => void;
+    toggleSleepTimer: () => void;
+    formatTime: (time: number) => string;
+    labels?: AudioLabels;
+    styles: Record<string, string>;
+}
+export declare function AudioCustomControls({ isPlaying, currentTime, duration, volume, isMuted, repeatMode, shuffleMode, currentPlaybackRate, isBassBoost, remainingSleepTime, playbackRate, presets, sleepTimer, setRepeatMode, setShuffleMode, setCurrentPlaybackRate, setIsBassBoost, setIsMuted, togglePlay, handleSeek, handleVolumeChange, playNext, toggleSleepTimer, formatTime, labels, styles, }: AudioCustomControlsProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,194 @@
+"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 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 "react";
+import u from "classnames";
+import { jsx as d, jsxs as f } 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),
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: u(R.time),
+				children: [
+					/* @__PURE__ */ d("span", {
+						className: R.timeCurrent,
+						children: I(m)
+					}),
+					/* @__PURE__ */ f("div", {
+						className: u(R.progressContainer),
+						children: [/* @__PURE__ */ d("input", {
+							type: "range",
+							min: "0",
+							max: h || 0,
+							value: m,
+							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}%` }
+						})]
+					}),
+					/* @__PURE__ */ d("span", {
+						className: R.timeTotal,
+						children: I(h)
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: u(R.controlsRow),
+				children: [/* @__PURE__ */ f("div", {
+					className: u(R.controlsGroup),
+					children: [
+						/* @__PURE__ */ f("button", {
+							type: "button",
+							className: u(R.btn, v > 0 && R.active),
+							onClick: () => E((e) => (e + 1) % 3),
+							title: te,
+							children: [/* @__PURE__ */ d(l, {
+								component: s,
+								size: "sm"
+							}), v === 1 && /* @__PURE__ */ d("span", {
+								className: u(R.badge),
+								children: "1"
+							})]
+						}),
+						/* @__PURE__ */ d("button", {
+							type: "button",
+							className: u(R.btn, y && R.active),
+							onClick: () => D((e) => !e),
+							title: X,
+							children: /* @__PURE__ */ d(l, {
+								component: ee,
+								size: "sm"
+							})
+						}),
+						C && /* @__PURE__ */ f("button", {
+							type: "button",
+							className: u(R.btn, R.btnText),
+							onClick: () => {
+								let e = [
+									.5,
+									1,
+									1.5,
+									2
+								], t = e[(e.indexOf(b) + 1) % e.length];
+								O(t);
+							},
+							title: Z,
+							children: [b, "x"]
+						})
+					]
+				}), /* @__PURE__ */ f("div", {
+					className: u(R.controlsGroup),
+					children: [
+						w && /* @__PURE__ */ d("button", {
+							type: "button",
+							className: u(R.btn, x && R.active),
+							onClick: () => k(!x),
+							title: Q,
+							children: /* @__PURE__ */ d(l, {
+								component: e,
+								size: "sm"
+							})
+						}),
+						T && /* @__PURE__ */ f("button", {
+							type: "button",
+							className: u(R.btn, S !== null && R.active),
+							onClick: F,
+							title: $,
+							children: [/* @__PURE__ */ d(l, {
+								component: r,
+								size: "sm"
+							}), S !== null && /* @__PURE__ */ d("span", {
+								className: u(R.badge),
+								style: { fontSize: "7px" },
+								children: Math.ceil(S / 60)
+							})]
+						}),
+						/* @__PURE__ */ f("div", {
+							className: u(R.volumeContainer),
+							children: [/* @__PURE__ */ d("button", {
+								type: "button",
+								className: u(R.btn),
+								onClick: () => A((e) => !e),
+								"aria-label": _ ? V : B,
+								children: /* @__PURE__ */ d(l, {
+									component: _ || g === 0 ? i : c,
+									size: "sm"
+								})
+							}), /* @__PURE__ */ d("input", {
+								type: "range",
+								min: "0",
+								max: "1",
+								step: "0.05",
+								value: _ ? 0 : g,
+								onChange: N,
+								className: u(R.volume),
+								"aria-label": H
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: u(R.controlsRow),
+				style: {
+					justifyContent: "center",
+					marginTop: "0.2rem"
+				},
+				children: /* @__PURE__ */ f("div", {
+					className: u(R.controlsGroup),
+					children: [
+						/* @__PURE__ */ d("button", {
+							type: "button",
+							className: u(R.btn),
+							onClick: () => P(-1),
+							title: K,
+							children: /* @__PURE__ */ d(l, {
+								component: t,
+								size: "sm"
+							})
+						}),
+						/* @__PURE__ */ d("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,
+								size: "sm"
+							})
+						}),
+						/* @__PURE__ */ d("button", {
+							type: "button",
+							className: u(R.btn),
+							onClick: () => P(1),
+							title: G,
+							children: /* @__PURE__ */ d(l, {
+								component: n,
+								size: "sm"
+							})
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { p as AudioCustomControls };

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

@@ -0,0 +1,2 @@
+"use client";
+let e=require("react");function t({currentTrack:t,showMetadata:n}){let[r,i]=(0,e.useState)({title:``,artist:``,cover:``}),[a,o]=(0,e.useState)(void 0);return t?.src!==a&&(o(t?.src),i({title:``,artist:``,cover:``})),(0,e.useEffect)(()=>{if(t&&n&&!t.title&&!t.artist&&!t.coverArt){let e=new AbortController;return import(`music-metadata`).then(async n=>{let r=await fetch(t.src,{signal:e.signal});if(!r.ok||!r.body)throw Error(`Failed to fetch audio file: ${r.status}`);try{let{common:e}=await n.parseWebStream(r.body,{mimeType:r.headers.get(`content-type`)??void 0}),t=n.selectCover(e.picture);i(n=>{let r={...n};if(e.title&&(r.title=e.title),e.artist&&(r.artist=e.artist),t){let e=``;t.data.forEach(t=>{e+=String.fromCharCode(t)}),r.cover=`data:${t.format};base64,${btoa(e)}`}return r})}finally{e.abort()}}).catch(e=>{}),()=>e.abort()}},[t,n]),{metaTitle:t?.title||r.title||``,metaArtist:t?.artist||r.artist||``,metaCover:t?.coverArt||r.cover||``}}exports.useAudioMetadata=t;

package/dist/components/media/Audio/hooks/useAudioMetadata.d.ts

@@ -0,0 +1,11 @@
+import { AudioTrack } from '../Audio';
+interface UseAudioMetadataOptions {
+    currentTrack: AudioTrack | null;
+    showMetadata: boolean;
+}
+export declare function useAudioMetadata({ currentTrack, showMetadata, }: UseAudioMetadataOptions): {
+    metaTitle: string;
+    metaArtist: string;
+    metaCover: string;
+};
+export {};

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

@@ -0,0 +1,44 @@
+"use client";
+import { useEffect as e, useState as t } from "react";
+//#region src/components/media/Audio/hooks/useAudioMetadata.ts
+function n({ currentTrack: n, showMetadata: r }) {
+	let [i, a] = t({
+		title: "",
+		artist: "",
+		cover: ""
+	}), [o, s] = t(void 0);
+	return n?.src !== o && (s(n?.src), a({
+		title: "",
+		artist: "",
+		cover: ""
+	})), e(() => {
+		if (n && r && !n.title && !n.artist && !n.coverArt) {
+			let e = new AbortController();
+			return import("music-metadata").then(async (t) => {
+				let r = await fetch(n.src, { signal: e.signal });
+				if (!r.ok || !r.body) throw Error(`Failed to fetch audio file: ${r.status}`);
+				try {
+					let { common: e } = await t.parseWebStream(r.body, { mimeType: r.headers.get("content-type") ?? void 0 }), n = t.selectCover(e.picture);
+					a((t) => {
+						let r = { ...t };
+						if (e.title && (r.title = e.title), e.artist && (r.artist = e.artist), n) {
+							let e = "";
+							n.data.forEach((t) => {
+								e += String.fromCharCode(t);
+							}), r.cover = `data:${n.format};base64,${btoa(e)}`;
+						}
+						return r;
+					});
+				} finally {
+					e.abort();
+				}
+			}).catch((e) => {}), () => e.abort();
+		}
+	}, [n, r]), {
+		metaTitle: n?.title || i.title || "",
+		metaArtist: n?.artist || i.artist || "",
+		metaCover: n?.coverArt || i.cover || ""
+	};
+}
+//#endregion
+export { n as useAudioMetadata };

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

@@ -0,0 +1,2 @@
+"use client";
+let e=require("react");function t({playlist:t,loop:n,muted:r,fadeIn:i,fadeOut:a,crossfade:o,visualizer:s,hotkeys:c,autoPlay:ee}){let[l,u]=(0,e.useState)(!1),[d,f]=(0,e.useState)(0),[te,p]=(0,e.useState)(0),[m,h]=(0,e.useState)(1),[g,_]=(0,e.useState)(r),[v,y]=(0,e.useState)(+!!n),[b,x]=(0,e.useState)(!1),[S,C]=(0,e.useState)(0),[w,T]=(0,e.useState)(1),[E,D]=(0,e.useState)(!1),[O,k]=(0,e.useState)(null),ne=t[S]||null,A=(0,e.useRef)(null),j=(0,e.useRef)(null),M=(0,e.useRef)(null),N=(0,e.useRef)(null),P=(0,e.useRef)(null),F=(0,e.useRef)(null),I=(0,e.useRef)(null),L=(0,e.useRef)(null),R=(0,e.useRef)(null),z=(0,e.useRef)(null),B=(0,e.useRef)(!1),V=typeof i==`number`?i:i?1e3:0,H=typeof a==`number`?a:a?1e3:0,U=typeof o==`number`?o:o?3e3:0,W=(0,e.useCallback)(()=>{if(M.current)return;let e=window.AudioContext||window.webkitAudioContext;if(!e)return;let t=new e;if(M.current=t,!A.current||!j.current)return;let n=t.createMediaElementSource(A.current),r=t.createGain(),i=t.createMediaElementSource(j.current),a=t.createGain(),o=t.createBiquadFilter();o.type=`lowshelf`,o.frequency.value=200,o.gain.value=E?10:0,N.current=o,n.connect(o),o.connect(r),i.connect(a);let s=t.createAnalyser();s.fftSize=256,L.current=s,r.connect(s),a.connect(s),s.connect(t.destination),F.current=r,I.current=a},[]);(0,e.useEffect)(()=>{N.current&&M.current&&N.current.gain.setTargetAtTime(E?10:0,M.current.currentTime||0,.1)},[E]),(0,e.useEffect)(()=>{A.current&&(A.current.playbackRate=w)},[w]);let G=(0,e.useCallback)((e,t,n,r)=>{if(!M.current)return;let i=M.current;e.gain.cancelScheduledValues(i.currentTime),e.gain.setValueAtTime(t,i.currentTime),e.gain.linearRampToValueAtTime(n,i.currentTime+r/1e3)},[]),K=(0,e.useCallback)(()=>{if(!A.current)return;W();let e=A.current.play();e!==void 0&&e.then(()=>{M.current&&F.current&&V>0?G(F.current,0,m,V):F.current&&(F.current.gain.value=m),u(!0)}).catch(e=>{u(!1)})},[V,m,G,W]),q=(0,e.useCallback)(()=>{A.current&&(M.current&&F.current&&H>0?(G(F.current,F.current.gain.value,0,H),setTimeout(()=>{A.current?.pause(),u(!1)},H)):(A.current.pause(),u(!1)))},[H,G]),J=(0,e.useCallback)(()=>{if(!s||!R.current||!L.current)return;let e=R.current,t=e.getContext(`2d`);if(!t)return;let n=L.current,r=n.frequencyBinCount,i=new Uint8Array(r),a=()=>{z.current=requestAnimationFrame(a),n.getByteFrequencyData(i),t.clearRect(0,0,e.width,e.height);let o=e.width/r*2.5,s=0;for(let n=0;n<r;n++){let r=i[n];t.fillStyle=`rgb(${r+100}, 100, 255)`,t.fillRect(s,e.height-r/2,o,r/2),s+=o+1}};a()},[s]);(0,e.useEffect)(()=>{if(l&&s)W(),J(),M.current&&M.current.state===`suspended`&&M.current.resume();else if(z.current&&=(cancelAnimationFrame(z.current),null),!l&&R.current){let e=R.current.getContext(`2d`);e&&e.clearRect(0,0,R.current.width,R.current.height)}return()=>{z.current&&cancelAnimationFrame(z.current)}},[l,s,J,W]);let Y=(0,e.useCallback)(()=>{A.current&&(A.current.volume=m,A.current.muted=g),j.current&&(j.current.volume=m,j.current.muted=g)},[m,g]);(0,e.useEffect)(()=>{Y()},[Y]);let X=(0,e.useCallback)(()=>{W(),l?q():K()},[l,q,K,W]);(0,e.useEffect)(()=>{if(!c)return;let e=e=>{if(!(e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement))switch(e.code){case`Space`:e.preventDefault(),X();break;case`ArrowRight`:A.current&&(A.current.currentTime+=5);break;case`ArrowLeft`:A.current&&(A.current.currentTime-=5);break;case`ArrowUp`:e.preventDefault(),h(e=>Math.min(1,Math.round((e+.1)*10)/10));break;case`ArrowDown`:e.preventDefault(),h(e=>Math.max(0,Math.round((e-.1)*10)/10));break;case`KeyM`:_(e=>!e);break}};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[c,X]);let re=()=>{O===null?(k(900),P.current=setInterval(()=>{k(e=>e===null||e<=1?(q(),P.current&&clearInterval(P.current),null):e-1)},1e3)):(k(null),P.current&&=(clearInterval(P.current),null))};(0,e.useEffect)(()=>()=>{P.current&&clearInterval(P.current)},[]);let Z=(0,e.useCallback)((e=1)=>{if(!t.length)return 0;if(b&&e===1){let e=Math.floor(Math.random()*t.length);return e===S&&t.length>1&&(e=(e+1)%t.length),e}let n=S+e;return n>=t.length?n=v>=1?0:-1:n<0&&(n=v>=1?t.length-1:0),n},[S,t.length,v,b]),Q=(0,e.useCallback)((e=1)=>{A.current&&!B.current&&(A.current.pause(),A.current.currentTime=0);let t=Z(e);if(t===-1){u(!1),A.current&&(A.current.currentTime=0);return}if(v===1&&e===1&&S===t){A.current&&(A.current.currentTime=0,K());return}C(t),u(!0)},[Z,v,S,K]),$=(0,e.useCallback)(e=>{!A.current||!j.current||!M.current||!F.current||!I.current||(B.current=!0,j.current.src=t[e].src,j.current.currentTime=0,j.current.play().then(()=>{let t=F.current,n=I.current;G(t,t.gain.value,0,U),G(n,0,m,U),setTimeout(()=>{A.current&&A.current.pause(),C(e),B.current=!1},U)}).catch(e=>{B.current=!1}))},[t,m,U,G]);return{isPlaying:l,currentTime:d,duration:te,volume:m,isMuted:g,repeatMode:v,shuffleMode:b,currentTrackIndex:S,currentPlaybackRate:w,isBassBoost:E,remainingSleepTime:O,currentTrack:ne,setVolume:h,setIsMuted:_,setRepeatMode:y,setShuffleMode:x,setCurrentPlaybackRate:T,setIsBassBoost:D,setDuration:p,activeAudioRef:A,nextAudioRef:j,canvasRef:R,togglePlay:X,handleSeek:e=>{let t=parseFloat(e.target.value);A.current&&(A.current.currentTime=t,f(t))},handleVolumeChange:e=>{let t=parseFloat(e.target.value);h(t),t>0&&_(!1)},handleTimeUpdate:(0,e.useCallback)(()=>{if(!A.current||B.current)return;let e=A.current.currentTime,t=A.current.duration||0;if(f(e),U>0&&t>0&&t-e<=U/1e3&&l){let e=Z(1);e!==-1&&e!==S&&$(e)}},[U,l,S,Z,$]),handleEnded:(0,e.useCallback)(()=>{B.current||Q(1)},[Q]),playNext:Q,toggleSleepTimer:re,playActivePlayer:K,formatTime:e=>`${Math.floor(e/60)||0}:${(Math.floor(e%60)||0).toString().padStart(2,`0`)}`}}exports.useAudioPlayer=t;

package/dist/components/media/Audio/hooks/useAudioPlayer.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { AudioTrack } from '../Audio';
+interface UseAudioPlayerOptions {
+    playlist: AudioTrack[];
+    loop: boolean;
+    muted: boolean;
+    fadeIn: boolean | number;
+    fadeOut: boolean | number;
+    crossfade: boolean | number;
+    visualizer: boolean;
+    hotkeys: boolean;
+    autoPlay: boolean;
+}
+export declare function useAudioPlayer({ playlist, loop, muted, fadeIn, fadeOut, crossfade, visualizer, hotkeys, autoPlay: _autoPlay, }: UseAudioPlayerOptions): {
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    isMuted: boolean;
+    repeatMode: 0 | 1 | 2;
+    shuffleMode: boolean;
+    currentTrackIndex: number;
+    currentPlaybackRate: number;
+    isBassBoost: boolean;
+    remainingSleepTime: number | null;
+    currentTrack: AudioTrack;
+    setVolume: React.Dispatch<React.SetStateAction<number>>;
+    setIsMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    setRepeatMode: React.Dispatch<React.SetStateAction<0 | 1 | 2>>;
+    setShuffleMode: React.Dispatch<React.SetStateAction<boolean>>;
+    setCurrentPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
+    setIsBassBoost: React.Dispatch<React.SetStateAction<boolean>>;
+    setDuration: React.Dispatch<React.SetStateAction<number>>;
+    activeAudioRef: React.RefObject<HTMLAudioElement | null>;
+    nextAudioRef: React.RefObject<HTMLAudioElement | null>;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    togglePlay: () => void;
+    handleSeek: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleVolumeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleTimeUpdate: () => void;
+    handleEnded: () => void;
+    playNext: (dir?: 1 | -1) => void;
+    toggleSleepTimer: () => void;
+    playActivePlayer: () => void;
+    formatTime: (time: number) => string;
+};
+export {};

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

@@ -0,0 +1,221 @@
+"use client";
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/components/media/Audio/hooks/useAudioPlayer.ts
+function i({ playlist: i, loop: a, muted: o, fadeIn: s, fadeOut: c, crossfade: l, visualizer: u, hotkeys: d, autoPlay: ee }) {
+	let [f, p] = r(!1), [te, m] = r(0), [ne, h] = r(0), [g, _] = r(1), [v, y] = r(o), [b, re] = r(+!!a), [x, ie] = r(!1), [S, C] = r(0), [w, T] = r(1), [E, ae] = r(!1), [D, O] = r(null), k = i[S] || null, A = n(null), j = n(null), M = n(null), N = n(null), P = n(null), F = n(null), I = n(null), L = n(null), R = n(null), z = n(null), B = n(!1), V = typeof s == "number" ? s : s ? 1e3 : 0, H = typeof c == "number" ? c : c ? 1e3 : 0, U = typeof l == "number" ? l : l ? 3e3 : 0, W = e(() => {
+		if (M.current) return;
+		let e = window.AudioContext || window.webkitAudioContext;
+		if (!e) return;
+		let t = new e();
+		if (M.current = t, !A.current || !j.current) return;
+		let n = t.createMediaElementSource(A.current), r = t.createGain(), i = t.createMediaElementSource(j.current), a = t.createGain(), o = t.createBiquadFilter();
+		o.type = "lowshelf", o.frequency.value = 200, o.gain.value = E ? 10 : 0, N.current = o, n.connect(o), o.connect(r), i.connect(a);
+		let s = t.createAnalyser();
+		s.fftSize = 256, L.current = s, r.connect(s), a.connect(s), s.connect(t.destination), F.current = r, I.current = a;
+	}, []);
+	t(() => {
+		N.current && M.current && N.current.gain.setTargetAtTime(E ? 10 : 0, M.current.currentTime || 0, .1);
+	}, [E]), t(() => {
+		A.current && (A.current.playbackRate = w);
+	}, [w]);
+	let G = e((e, t, n, r) => {
+		if (!M.current) return;
+		let i = M.current;
+		e.gain.cancelScheduledValues(i.currentTime), e.gain.setValueAtTime(t, i.currentTime), e.gain.linearRampToValueAtTime(n, i.currentTime + r / 1e3);
+	}, []), K = e(() => {
+		if (!A.current) return;
+		W();
+		let e = A.current.play();
+		e !== void 0 && e.then(() => {
+			M.current && F.current && V > 0 ? G(F.current, 0, g, V) : F.current && (F.current.gain.value = g), p(!0);
+		}).catch((e) => {
+			p(!1);
+		});
+	}, [
+		V,
+		g,
+		G,
+		W
+	]), q = e(() => {
+		A.current && (M.current && F.current && H > 0 ? (G(F.current, F.current.gain.value, 0, H), setTimeout(() => {
+			A.current?.pause(), p(!1);
+		}, H)) : (A.current.pause(), p(!1)));
+	}, [H, G]), J = e(() => {
+		if (!u || !R.current || !L.current) return;
+		let e = R.current, t = e.getContext("2d");
+		if (!t) return;
+		let n = L.current, r = n.frequencyBinCount, i = new Uint8Array(r), a = () => {
+			z.current = requestAnimationFrame(a), n.getByteFrequencyData(i), t.clearRect(0, 0, e.width, e.height);
+			let o = e.width / r * 2.5, s = 0;
+			for (let n = 0; n < r; n++) {
+				let r = i[n];
+				t.fillStyle = `rgb(${r + 100}, 100, 255)`, t.fillRect(s, e.height - r / 2, o, r / 2), s += o + 1;
+			}
+		};
+		a();
+	}, [u]);
+	t(() => {
+		if (f && u) W(), J(), M.current && M.current.state === "suspended" && M.current.resume();
+		else if (z.current &&= (cancelAnimationFrame(z.current), null), !f && R.current) {
+			let e = R.current.getContext("2d");
+			e && e.clearRect(0, 0, R.current.width, R.current.height);
+		}
+		return () => {
+			z.current && cancelAnimationFrame(z.current);
+		};
+	}, [
+		f,
+		u,
+		J,
+		W
+	]);
+	let Y = e(() => {
+		A.current && (A.current.volume = g, A.current.muted = v), j.current && (j.current.volume = g, j.current.muted = v);
+	}, [g, v]);
+	t(() => {
+		Y();
+	}, [Y]);
+	let X = e(() => {
+		W(), f ? q() : K();
+	}, [
+		f,
+		q,
+		K,
+		W
+	]);
+	t(() => {
+		if (!d) return;
+		let e = (e) => {
+			if (!(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) switch (e.code) {
+				case "Space":
+					e.preventDefault(), X();
+					break;
+				case "ArrowRight":
+					A.current && (A.current.currentTime += 5);
+					break;
+				case "ArrowLeft":
+					A.current && (A.current.currentTime -= 5);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), _((e) => Math.min(1, Math.round((e + .1) * 10) / 10));
+					break;
+				case "ArrowDown":
+					e.preventDefault(), _((e) => Math.max(0, Math.round((e - .1) * 10) / 10));
+					break;
+				case "KeyM":
+					y((e) => !e);
+					break;
+			}
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [d, X]);
+	let oe = () => {
+		D === null ? (O(900), P.current = setInterval(() => {
+			O((e) => e === null || e <= 1 ? (q(), P.current && clearInterval(P.current), null) : e - 1);
+		}, 1e3)) : (O(null), P.current &&= (clearInterval(P.current), null));
+	};
+	t(() => () => {
+		P.current && clearInterval(P.current);
+	}, []);
+	let Z = e((e = 1) => {
+		if (!i.length) return 0;
+		if (x && e === 1) {
+			let e = Math.floor(Math.random() * i.length);
+			return e === S && i.length > 1 && (e = (e + 1) % i.length), e;
+		}
+		let t = S + e;
+		return t >= i.length ? t = b >= 1 ? 0 : -1 : t < 0 && (t = b >= 1 ? i.length - 1 : 0), t;
+	}, [
+		S,
+		i.length,
+		b,
+		x
+	]), Q = e((e = 1) => {
+		A.current && !B.current && (A.current.pause(), A.current.currentTime = 0);
+		let t = Z(e);
+		if (t === -1) {
+			p(!1), A.current && (A.current.currentTime = 0);
+			return;
+		}
+		if (b === 1 && e === 1 && S === t) {
+			A.current && (A.current.currentTime = 0, K());
+			return;
+		}
+		C(t), p(!0);
+	}, [
+		Z,
+		b,
+		S,
+		K
+	]), $ = e((e) => {
+		!A.current || !j.current || !M.current || !F.current || !I.current || (B.current = !0, j.current.src = i[e].src, j.current.currentTime = 0, j.current.play().then(() => {
+			let t = F.current, n = I.current;
+			G(t, t.gain.value, 0, U), G(n, 0, g, U), setTimeout(() => {
+				A.current && A.current.pause(), C(e), B.current = !1;
+			}, U);
+		}).catch((e) => {
+			B.current = !1;
+		}));
+	}, [
+		i,
+		g,
+		U,
+		G
+	]);
+	return {
+		isPlaying: f,
+		currentTime: te,
+		duration: ne,
+		volume: g,
+		isMuted: v,
+		repeatMode: b,
+		shuffleMode: x,
+		currentTrackIndex: S,
+		currentPlaybackRate: w,
+		isBassBoost: E,
+		remainingSleepTime: D,
+		currentTrack: k,
+		setVolume: _,
+		setIsMuted: y,
+		setRepeatMode: re,
+		setShuffleMode: ie,
+		setCurrentPlaybackRate: T,
+		setIsBassBoost: ae,
+		setDuration: h,
+		activeAudioRef: A,
+		nextAudioRef: j,
+		canvasRef: R,
+		togglePlay: X,
+		handleSeek: (e) => {
+			let t = parseFloat(e.target.value);
+			A.current && (A.current.currentTime = t, m(t));
+		},
+		handleVolumeChange: (e) => {
+			let t = parseFloat(e.target.value);
+			_(t), t > 0 && y(!1);
+		},
+		handleTimeUpdate: e(() => {
+			if (!A.current || B.current) return;
+			let e = A.current.currentTime, t = A.current.duration || 0;
+			if (m(e), U > 0 && t > 0 && t - e <= U / 1e3 && f) {
+				let e = Z(1);
+				e !== -1 && e !== S && $(e);
+			}
+		}, [
+			U,
+			f,
+			S,
+			Z,
+			$
+		]),
+		handleEnded: e(() => {
+			B.current || Q(1);
+		}, [Q]),
+		playNext: Q,
+		toggleSleepTimer: oe,
+		playActivePlayer: K,
+		formatTime: (e) => `${Math.floor(e / 60) || 0}:${(Math.floor(e % 60) || 0).toString().padStart(2, "0")}`
+	};
+}
+//#endregion
+export { i as useAudioPlayer };

package/dist/components/media/Gallery/Gallery.cjs

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

package/dist/components/media/Gallery/Gallery.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+export interface GalleryItem {
+    id: string;
+    src: string;
+    alt?: string;
+    title?: string;
+    caption?: string;
+}
+export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onSelect"> {
+    /** Images to display in the gallery */
+    items: GalleryItem[];
+    /** Number of grid columns. Default: 3. */
+    columns?: number;
+    /** Gap between items. Default: "md". */
+    gap?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** Aspect ratio for each image. Default: "square". */
+    aspect?: "square" | "landscape" | "portrait" | "auto";
+    /** Enable multi-select with checkboxes. */
+    selectable?: boolean;
+    /** Controlled selected IDs. */
+    selected?: string[];
+    /** Uncontrolled initial selected IDs. */
+    defaultSelected?: string[];
+    /** Called when selection changes. */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Called when an item is clicked (outside checkbox). */
+    onItemClick?: (item: GalleryItem, index: number) => void;
+    /** Render bulk-action toolbar when items are selected. */
+    renderActions?: (params: {
+        selectedIds: string[];
+        clearSelection: () => void;
+    }) => React.ReactNode;
+}
+export declare const Gallery: React.ForwardRefExoticComponent<GalleryProps & React.RefAttributes<HTMLDivElement>>;