@mieweb/ui 0.2.2 → 0.3.0-dev.100

package/dist/chunk-CJQXWFIW.js

@@ -0,0 +1,829 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var audioPlayerVariants = cva("", {
+  variants: {
+    variant: {
+      inline: "inline-flex items-center gap-2",
+      compact: [
+        "flex items-center gap-3 p-3",
+        "rounded-lg border border-border",
+        "bg-card text-card-foreground"
+      ],
+      waveform: [
+        "flex flex-col gap-3 p-4",
+        "rounded-xl border border-border",
+        "bg-card text-card-foreground"
+      ]
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "compact", size: "sm", class: "p-2 gap-2" },
+    { variant: "compact", size: "lg", class: "p-4 gap-4" },
+    { variant: "waveform", size: "sm", class: "p-3 gap-2" },
+    { variant: "waveform", size: "lg", class: "p-5 gap-4" }
+  ],
+  defaultVariants: {
+    variant: "compact",
+    size: "md"
+  }
+});
+var playButtonVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "rounded-full transition-all duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "active:scale-95"
+  ],
+  {
+    variants: {
+      variant: {
+        inline: [
+          "text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100",
+          "dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800"
+        ],
+        compact: [
+          "bg-primary-800 text-white",
+          "hover:bg-primary-900",
+          "active:bg-primary-800"
+        ],
+        waveform: [
+          "bg-primary-800 text-white",
+          "hover:bg-primary-900",
+          "active:bg-primary-800"
+        ]
+      },
+      size: {
+        sm: "h-7 w-7",
+        md: "h-9 w-9",
+        lg: "h-11 w-11"
+      }
+    },
+    defaultVariants: {
+      variant: "compact",
+      size: "md"
+    }
+  }
+);
+function formatTime(seconds) {
+  if (!isFinite(seconds) || isNaN(seconds)) return "0:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+function PlayIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+    }
+  );
+}
+function PauseIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
+    }
+  );
+}
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("animate-spin", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+}
+function ProgressBar({
+  currentTime,
+  duration,
+  onSeek,
+  disabled
+}) {
+  const progressRef = React.useRef(null);
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  const handleClick = (e) => {
+    if (disabled || !progressRef.current || duration <= 0) return;
+    const rect = progressRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percentage = x / rect.width;
+    onSeek(percentage * duration);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: progressRef,
+      "data-slot": "audio-player-progress",
+      role: "slider",
+      "aria-label": "Audio progress",
+      "aria-valuemin": 0,
+      "aria-valuemax": duration,
+      "aria-valuenow": currentTime,
+      "aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
+      tabIndex: disabled ? -1 : 0,
+      className: cn(
+        "relative h-1.5 flex-1 cursor-pointer rounded-full bg-neutral-200 dark:bg-neutral-700",
+        disabled && "cursor-not-allowed opacity-50"
+      ),
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (disabled) return;
+        const step = duration * 0.05;
+        if (e.key === "ArrowRight") {
+          onSeek(Math.min(currentTime + step, duration));
+        } else if (e.key === "ArrowLeft") {
+          onSeek(Math.max(currentTime - step, 0));
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-primary-800 absolute inset-y-0 left-0 rounded-full transition-all",
+            style: { width: `${progress}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-primary-800 absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full shadow-sm transition-all",
+            style: { left: `calc(${progress}% - 6px)` }
+          }
+        )
+      ]
+    }
+  );
+}
+function Waveform({
+  src,
+  isPlaying,
+  playbackRate = 1,
+  onReady,
+  onTimeUpdate,
+  onFinish,
+  onSeek,
+  waveColor,
+  progressColor,
+  height = 64,
+  showHoverCursor = false,
+  waveformRef,
+  onHoverTimeChange,
+  cursorColor = "var(--color-red-500, rgb(239, 68, 68))"
+}) {
+  const containerRef = React.useRef(null);
+  const wavesurferRef = React.useRef(null);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const [isHovering, setIsHovering] = React.useState(false);
+  const [hoverPosition, setHoverPosition] = React.useState(0);
+  React.useEffect(() => {
+    if (waveformRef) {
+      waveformRef.current = {
+        seekTo: (time) => {
+          if (wavesurferRef.current && isLoaded) {
+            const duration = wavesurferRef.current.getDuration();
+            if (duration > 0) {
+              const clampedTime = Math.min(Math.max(time, 0), duration);
+              const progress = clampedTime / duration;
+              wavesurferRef.current.seekTo(progress);
+            }
+          }
+        },
+        play: () => {
+          if (wavesurferRef.current && isLoaded) {
+            wavesurferRef.current.play();
+          }
+        },
+        pause: () => {
+          if (wavesurferRef.current && isLoaded) {
+            wavesurferRef.current.pause();
+          }
+        },
+        getCurrentTime: () => {
+          return wavesurferRef.current?.getCurrentTime?.() ?? 0;
+        },
+        getDuration: () => {
+          return wavesurferRef.current?.getDuration?.() ?? 0;
+        }
+      };
+    }
+    return () => {
+      if (waveformRef) {
+        waveformRef.current = null;
+      }
+    };
+  }, [waveformRef, isLoaded]);
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    const initWaveSurfer = async () => {
+      try {
+        const WaveSurfer = (await import('wavesurfer.js')).default;
+        if (wavesurferRef.current) {
+          wavesurferRef.current.destroy();
+        }
+        wavesurferRef.current = WaveSurfer.create({
+          container: containerRef.current,
+          waveColor: waveColor || "#d1d5db",
+          progressColor: progressColor || "var(--color-primary-600, #2563eb)",
+          cursorColor: "transparent",
+          barWidth: 2,
+          barGap: 2,
+          barRadius: 2,
+          height,
+          normalize: true,
+          interact: !showHoverCursor
+        });
+        const emitTimeUpdate = () => {
+          onTimeUpdate(
+            wavesurferRef.current.getCurrentTime(),
+            wavesurferRef.current.getDuration()
+          );
+        };
+        wavesurferRef.current.on("ready", () => {
+          setIsLoaded(true);
+          const duration = wavesurferRef.current.getDuration();
+          onReady(duration);
+          onTimeUpdate(wavesurferRef.current.getCurrentTime(), duration);
+        });
+        wavesurferRef.current.on("timeupdate", emitTimeUpdate);
+        wavesurferRef.current.on("audioprocess", emitTimeUpdate);
+        wavesurferRef.current.on("seeking", () => {
+          emitTimeUpdate();
+        });
+        if (!showHoverCursor) {
+          wavesurferRef.current.on("interaction", () => {
+            onSeek(wavesurferRef.current.getCurrentTime());
+          });
+        }
+        wavesurferRef.current.on("finish", () => {
+          onFinish();
+        });
+        wavesurferRef.current.load(src);
+      } catch (error) {
+        console.error("Failed to load WaveSurfer:", error);
+      }
+    };
+    setIsLoaded(false);
+    initWaveSurfer();
+    return () => {
+      if (wavesurferRef.current) {
+        wavesurferRef.current.destroy();
+        wavesurferRef.current = null;
+      }
+    };
+  }, [src, showHoverCursor]);
+  React.useEffect(() => {
+    if (!wavesurferRef.current || !isLoaded) return;
+    if (isPlaying) {
+      wavesurferRef.current.play();
+    } else {
+      wavesurferRef.current.pause();
+    }
+  }, [isPlaying, isLoaded]);
+  React.useEffect(() => {
+    if (!wavesurferRef.current || !isLoaded) return;
+    wavesurferRef.current.setPlaybackRate(playbackRate);
+  }, [playbackRate, isLoaded]);
+  const handleMouseMove = showHoverCursor ? (e) => {
+    if (!containerRef.current || !wavesurferRef.current || !isLoaded)
+      return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const percentage = x / rect.width;
+    const duration = wavesurferRef.current.getDuration();
+    setHoverPosition(percentage * 100);
+    onHoverTimeChange?.(percentage * duration);
+  } : void 0;
+  const handleMouseEnter = showHoverCursor ? () => setIsHovering(true) : void 0;
+  const handleMouseLeave = showHoverCursor ? () => {
+    setIsHovering(false);
+    setHoverPosition(0);
+    onHoverTimeChange?.(null);
+  } : void 0;
+  const handleClick = showHoverCursor ? (e) => {
+    if (!containerRef.current || !wavesurferRef.current || !isLoaded)
+      return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const percentage = x / rect.width;
+    const duration = wavesurferRef.current.getDuration();
+    const time = duration * percentage;
+    wavesurferRef.current.seekTo(percentage);
+    onSeek(time);
+    onTimeUpdate(time, duration);
+    onHoverTimeChange?.(null);
+  } : void 0;
+  const handleKeyDown = showHoverCursor ? (e) => {
+    if (!wavesurferRef.current || !isLoaded) return;
+    const duration = wavesurferRef.current.getDuration();
+    const currentTime = wavesurferRef.current.getCurrentTime();
+    const step = duration * 0.05;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const newTime = Math.min(currentTime + step, duration);
+      wavesurferRef.current.seekTo(newTime / duration);
+      onSeek(newTime);
+      onTimeUpdate(newTime, duration);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const newTime = Math.max(currentTime - step, 0);
+      wavesurferRef.current.seekTo(newTime / duration);
+      onSeek(newTime);
+      onTimeUpdate(newTime, duration);
+    }
+  } : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "audio-player-waveform",
+      role: showHoverCursor ? "slider" : void 0,
+      "aria-label": showHoverCursor ? "Audio progress" : void 0,
+      "aria-valuemin": showHoverCursor ? 0 : void 0,
+      "aria-valuemax": showHoverCursor && wavesurferRef.current ? wavesurferRef.current.getDuration() : void 0,
+      "aria-valuenow": showHoverCursor && wavesurferRef.current ? wavesurferRef.current.getCurrentTime() : void 0,
+      tabIndex: showHoverCursor ? 0 : void 0,
+      className: cn(
+        "relative w-full rounded-lg bg-neutral-100 dark:bg-neutral-800",
+        showHoverCursor && "cursor-pointer",
+        !isLoaded && "animate-pulse"
+      ),
+      style: { height },
+      onMouseMove: handleMouseMove,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: showHoverCursor && isHovering && isLoaded && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute top-0 bottom-0 z-10 w-0.5",
+          style: { left: `${hoverPosition}%`, backgroundColor: cursorColor }
+        }
+      )
+    }
+  );
+}
+var AudioPlayer = React.forwardRef(
+  function AudioPlayer2({
+    src,
+    title,
+    variant = "compact",
+    size = "md",
+    onStateChange,
+    onEnded,
+    onError,
+    onTimeUpdate,
+    showTime = true,
+    showDuration = true,
+    waveColor,
+    progressColor,
+    waveformHeight = 64,
+    showWaveformHoverCursor = true,
+    waveformCursorColor,
+    disabled = false,
+    className,
+    "aria-label": ariaLabel,
+    playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2],
+    showPlaybackRate = false,
+    /** Whether to preload audio (set to false for lists with many items) */
+    preload = false,
+    /** Fallback duration in seconds to display before audio is loaded */
+    fallbackDuration
+  }, ref) {
+    const [state, setState] = React.useState("idle");
+    const [currentTime, setCurrentTime] = React.useState(0);
+    const [duration, setDuration] = React.useState(0);
+    const [playbackRate, setPlaybackRate] = React.useState(1);
+    const [audioInitialized, setAudioInitialized] = React.useState(false);
+    const [hoverTime, setHoverTime] = React.useState(null);
+    const containerRef = React.useRef(null);
+    const audioRef = React.useRef(null);
+    const waveformMethodsRef = React.useRef(null);
+    const isPlaying = state === "playing";
+    const isLoading = state === "loading";
+    const displayDuration = duration > 0 ? duration : fallbackDuration ?? 0;
+    const updateState = React.useCallback(
+      (newState) => {
+        setState(newState);
+        onStateChange?.(newState);
+      },
+      [onStateChange]
+    );
+    const initAudio = React.useCallback(() => {
+      if (variant === "waveform" || audioInitialized) return null;
+      const audio = new globalThis.Audio(src);
+      audioRef.current = audio;
+      setAudioInitialized(true);
+      audio.addEventListener("loadstart", () => updateState("loading"));
+      audio.addEventListener("canplay", () => {
+        updateState("idle");
+      });
+      audio.addEventListener("loadedmetadata", () => {
+        setDuration(audio.duration);
+        onTimeUpdate?.(audio.currentTime, audio.duration);
+      });
+      audio.addEventListener("timeupdate", () => {
+        setCurrentTime(audio.currentTime);
+        onTimeUpdate?.(audio.currentTime, audio.duration);
+      });
+      audio.addEventListener("ended", () => {
+        updateState("idle");
+        setCurrentTime(0);
+        onEnded?.();
+      });
+      audio.addEventListener("error", () => {
+        updateState("error");
+        onError?.(new Error("Failed to load audio"));
+      });
+      return audio;
+    }, [
+      src,
+      variant,
+      audioInitialized,
+      updateState,
+      onTimeUpdate,
+      onEnded,
+      onError
+    ]);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        get container() {
+          return containerRef.current;
+        },
+        seekTo: (time) => {
+          if (variant === "waveform") {
+            waveformMethodsRef.current?.seekTo(time);
+          } else {
+            if (!audioRef.current) {
+              initAudio();
+            }
+            if (audioRef.current) {
+              audioRef.current.currentTime = time;
+            }
+          }
+        },
+        play: () => {
+          if (variant === "waveform") {
+            if (waveformMethodsRef.current) {
+              waveformMethodsRef.current.play();
+              updateState("playing");
+            }
+          } else {
+            if (!audioRef.current) {
+              initAudio();
+            }
+            if (audioRef.current) {
+              audioRef.current.play().catch((error) => {
+                updateState("error");
+                onError?.(error);
+              });
+              updateState("playing");
+            }
+          }
+        },
+        pause: () => {
+          if (variant === "waveform") {
+            if (waveformMethodsRef.current) {
+              waveformMethodsRef.current.pause();
+              updateState("paused");
+            }
+          } else if (audioRef.current) {
+            audioRef.current.pause();
+            updateState("paused");
+          }
+        },
+        getCurrentTime: () => {
+          if (variant === "waveform") {
+            return waveformMethodsRef.current?.getCurrentTime() ?? 0;
+          }
+          return audioRef.current?.currentTime ?? 0;
+        },
+        getDuration: () => {
+          if (variant === "waveform") {
+            return waveformMethodsRef.current?.getDuration() ?? 0;
+          }
+          const rawDuration = audioRef.current?.duration;
+          return Number.isFinite(rawDuration) ? rawDuration : 0;
+        }
+      }),
+      [variant, initAudio, updateState, onError]
+    );
+    React.useEffect(() => {
+      if (preload && !audioInitialized && variant !== "waveform") {
+        initAudio();
+      }
+    }, [preload, audioInitialized, variant, initAudio]);
+    React.useEffect(() => {
+      return () => {
+        if (audioRef.current) {
+          audioRef.current.pause();
+          audioRef.current.src = "";
+        }
+      };
+    }, []);
+    React.useEffect(() => {
+      if (audioRef.current) {
+        audioRef.current.playbackRate = playbackRate;
+      }
+    }, [playbackRate]);
+    const handlePlay = React.useCallback(() => {
+      if (disabled) return;
+      if (variant === "waveform") {
+        if (isLoading) return;
+        updateState(isPlaying ? "paused" : "playing");
+        return;
+      }
+      if (!audioInitialized && !isLoading) {
+        const audio = initAudio();
+        if (audio) {
+          updateState("loading");
+          audio.addEventListener(
+            "canplay",
+            () => {
+              audio.play().catch((error) => {
+                updateState("error");
+                onError?.(error);
+              });
+              updateState("playing");
+            },
+            { once: true }
+          );
+        }
+        return;
+      }
+      if (isLoading) return;
+      if (isPlaying) {
+        if (audioRef.current) {
+          audioRef.current.pause();
+        }
+        updateState("paused");
+      } else {
+        if (audioRef.current) {
+          audioRef.current.play().catch((error) => {
+            updateState("error");
+            onError?.(error);
+          });
+          updateState("playing");
+        }
+      }
+    }, [
+      disabled,
+      variant,
+      audioInitialized,
+      isLoading,
+      isPlaying,
+      initAudio,
+      updateState,
+      onError
+    ]);
+    const handleSeek = React.useCallback(
+      (time) => {
+        if (audioRef.current) {
+          audioRef.current.currentTime = time;
+          setCurrentTime(time);
+          onTimeUpdate?.(time, audioRef.current.duration);
+        }
+      },
+      [onTimeUpdate]
+    );
+    const handleWaveformReady = React.useCallback(
+      (dur) => {
+        setDuration(dur);
+        setState("idle");
+        onTimeUpdate?.(currentTime, dur);
+      },
+      [currentTime, onTimeUpdate]
+    );
+    const handleWaveformTimeUpdate = React.useCallback(
+      (time, dur) => {
+        setCurrentTime(time);
+        if (dur > 0) {
+          setDuration(dur);
+        }
+        onTimeUpdate?.(time, dur);
+      },
+      [onTimeUpdate]
+    );
+    const handleWaveformFinish = React.useCallback(() => {
+      updateState("idle");
+      setCurrentTime(0);
+      onEnded?.();
+    }, [updateState, onEnded]);
+    const handleWaveformSeek = React.useCallback((time) => {
+      setCurrentTime(time);
+    }, []);
+    const handleHoverTimeChange = React.useCallback((time) => {
+      setHoverTime(time);
+    }, []);
+    const iconSize = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+    const getAriaLabel = () => {
+      if (ariaLabel) return ariaLabel;
+      if (title) return `${isPlaying ? "Pause" : "Play"} ${title}`;
+      return isPlaying ? "Pause audio" : "Play audio";
+    };
+    const renderPlayButton = () => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "audio-player-play-btn",
+        onClick: handlePlay,
+        disabled: disabled || isLoading,
+        className: cn(playButtonVariants({ variant, size })),
+        "aria-label": getAriaLabel(),
+        "aria-pressed": isPlaying,
+        children: isLoading ? /* @__PURE__ */ jsx(SpinnerIcon, { className: iconSize }) : isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { className: iconSize }) : /* @__PURE__ */ jsx(PlayIcon, { className: iconSize })
+      }
+    );
+    const renderTime = (useHoverTime = false) => {
+      if (!showTime) return null;
+      const displayTime = useHoverTime && hoverTime !== null ? hoverTime : currentTime;
+      const isShowingHoverTime = useHoverTime && hoverTime !== null;
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "data-slot": "audio-player-time",
+          className: cn(
+            "font-mono text-xs tabular-nums",
+            isShowingHoverTime ? "text-primary-800 dark:text-primary-400" : "text-neutral-600 dark:text-neutral-400"
+          ),
+          children: [
+            formatTime(displayTime),
+            " / ",
+            formatTime(displayDuration)
+          ]
+        }
+      );
+    };
+    const renderPlaybackRateControl = () => {
+      if (!showPlaybackRate) return null;
+      return /* @__PURE__ */ jsx(
+        "select",
+        {
+          "data-slot": "audio-player-rate",
+          value: playbackRate,
+          onChange: (e) => setPlaybackRate(Number(e.target.value)),
+          className: "rounded border border-neutral-200 bg-transparent px-1 py-0.5 text-xs dark:border-neutral-700",
+          "aria-label": "Playback speed",
+          children: playbackRates.map((rate) => /* @__PURE__ */ jsxs("option", { value: rate, children: [
+            rate,
+            "x"
+          ] }, rate))
+        }
+      );
+    };
+    if (variant === "inline") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          "data-slot": "audio-player",
+          "data-variant": "inline",
+          className: cn(audioPlayerVariants({ variant, size }), className),
+          children: [
+            renderPlayButton(),
+            title && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "audio-player-title",
+                className: "text-sm font-medium text-neutral-700 dark:text-neutral-300",
+                children: title
+              }
+            ),
+            showDuration && displayDuration > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "audio-player-duration",
+                className: "font-mono text-xs text-neutral-500 tabular-nums dark:text-neutral-400",
+                children: isPlaying ? formatTime(currentTime) : formatTime(displayDuration)
+              }
+            )
+          ]
+        }
+      );
+    }
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          "data-slot": "audio-player",
+          "data-variant": "compact",
+          className: cn(audioPlayerVariants({ variant, size }), className),
+          children: [
+            renderPlayButton(),
+            /* @__PURE__ */ jsx(
+              ProgressBar,
+              {
+                currentTime,
+                duration: displayDuration,
+                onSeek: handleSeek,
+                disabled
+              }
+            ),
+            renderTime(),
+            renderPlaybackRateControl()
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        "data-slot": "audio-player",
+        "data-variant": "waveform",
+        className: cn(audioPlayerVariants({ variant, size }), className),
+        children: [
+          title && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "audio-player-title",
+              className: "text-sm font-medium text-neutral-700 dark:text-neutral-300",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Waveform,
+            {
+              src,
+              isPlaying,
+              playbackRate,
+              onReady: handleWaveformReady,
+              onTimeUpdate: handleWaveformTimeUpdate,
+              onFinish: handleWaveformFinish,
+              onSeek: handleWaveformSeek,
+              waveColor,
+              progressColor,
+              height: waveformHeight,
+              showHoverCursor: showWaveformHoverCursor,
+              onHoverTimeChange: handleHoverTimeChange,
+              cursorColor: waveformCursorColor,
+              waveformRef: waveformMethodsRef
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "audio-player-controls",
+              className: "flex items-center gap-3",
+              children: [
+                renderPlayButton(),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-between", children: [
+                  renderTime(true),
+                  renderPlaybackRateControl()
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AudioPlayer.displayName = "AudioPlayer";
+
+export { AudioPlayer, ProgressBar, audioPlayerVariants, formatTime, playButtonVariants };
+//# sourceMappingURL=chunk-CJQXWFIW.js.map
+//# sourceMappingURL=chunk-CJQXWFIW.js.map