@mieweb/ui 0.3.0-dev.72 → 0.3.0-dev.74

package/dist/{chunk-LAR4H7ZG.js → chunk-WORZLEUZ.js}

@@ -51,13 +51,13 @@ var playButtonVariants = cva(
           "dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800"
         ],
         compact: [
-          "bg-primary-600 text-white",
-          "hover:bg-primary-700",
+          "bg-primary-800 text-white",
+          "hover:bg-primary-900",
           "active:bg-primary-800"
         ],
         waveform: [
-          "bg-primary-600 text-white",
-          "hover:bg-primary-700",
+          "bg-primary-800 text-white",
+          "hover:bg-primary-900",
           "active:bg-primary-800"
         ]
       },
@@ -180,14 +180,14 @@ function ProgressBar({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "bg-primary-600 absolute inset-y-0 left-0 rounded-full transition-all",
+            className: "bg-primary-800 absolute inset-y-0 left-0 rounded-full transition-all",
             style: { width: `${progress}%` }
           }
         ),
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "bg-primary-600 absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full shadow-sm transition-all",
+            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)` }
           }
         )
@@ -273,23 +273,22 @@ function Waveform({
           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("audioprocess", () => {
-          onTimeUpdate(
-            wavesurferRef.current.getCurrentTime(),
-            wavesurferRef.current.getDuration()
-          );
-        });
+        wavesurferRef.current.on("timeupdate", emitTimeUpdate);
+        wavesurferRef.current.on("audioprocess", emitTimeUpdate);
         wavesurferRef.current.on("seeking", () => {
-          onTimeUpdate(
-            wavesurferRef.current.getCurrentTime(),
-            wavesurferRef.current.getDuration()
-          );
+          emitTimeUpdate();
         });
         if (!showHoverCursor) {
           wavesurferRef.current.on("interaction", () => {
@@ -405,324 +404,378 @@ function Waveform({
     }
   );
 }
-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;
-  }, [
+var AudioPlayer = React.forwardRef(
+  function AudioPlayer2({
     src,
-    variant,
-    audioInitialized,
-    updateState,
-    onTimeUpdate,
+    title,
+    variant = "compact",
+    size = "md",
+    onStateChange,
     onEnded,
-    onError
-  ]);
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      get container() {
-        return containerRef.current;
+    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);
       },
-      seekTo: (time) => {
-        if (variant === "waveform") {
-          waveformMethodsRef.current?.seekTo(time);
-        } else {
-          if (!audioRef.current) {
-            initAudio();
+      [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;
+            }
           }
-          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");
+            }
           }
-        }
-      },
-      play: () => {
-        if (variant === "waveform") {
-          if (waveformMethodsRef.current) {
-            waveformMethodsRef.current.play();
-            updateState("playing");
+        },
+        pause: () => {
+          if (variant === "waveform") {
+            if (waveformMethodsRef.current) {
+              waveformMethodsRef.current.pause();
+              updateState("paused");
+            }
+          } else if (audioRef.current) {
+            audioRef.current.pause();
+            updateState("paused");
           }
-        } else {
-          if (!audioRef.current) {
-            initAudio();
+        },
+        getCurrentTime: () => {
+          if (variant === "waveform") {
+            return waveformMethodsRef.current?.getCurrentTime() ?? 0;
           }
-          if (audioRef.current) {
-            audioRef.current.play().catch((error) => {
-              updateState("error");
-              onError?.(error);
-            });
-            updateState("playing");
+          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;
         }
-      },
-      pause: () => {
-        if (variant === "waveform") {
-          if (waveformMethodsRef.current) {
-            waveformMethodsRef.current.pause();
-            updateState("paused");
-          }
-        } else if (audioRef.current) {
+      }),
+      [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();
-          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;
+          audioRef.current.src = "";
         }
-        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 () => {
+      };
+    }, []);
+    React.useEffect(() => {
       if (audioRef.current) {
-        audioRef.current.pause();
-        audioRef.current.src = "";
+        audioRef.current.playbackRate = playbackRate;
       }
-    };
-  }, []);
-  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 }
-        );
+    }, [playbackRate]);
+    const handlePlay = React.useCallback(() => {
+      if (disabled) return;
+      if (variant === "waveform") {
+        if (isLoading) return;
+        updateState(isPlaying ? "paused" : "playing");
+        return;
       }
-      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");
+      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;
       }
-    }
-  }, [
-    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);
+      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");
+        }
       }
-    },
-    [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) {
+    }, [
+      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);
-      }
-      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-600 dark:text-primary-400" : "text-neutral-500 dark:text-neutral-400"
-        ),
-        children: [
-          formatTime(displayTime),
-          " / ",
-          formatTime(displayDuration)
-        ]
-      }
+        setState("idle");
+        onTimeUpdate?.(currentTime, dur);
+      },
+      [currentTime, onTimeUpdate]
     );
-  };
-  const renderPlaybackRateControl = () => {
-    if (!showPlaybackRate) return null;
-    return /* @__PURE__ */ jsx(
-      "select",
+    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",
       {
-        "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))
+        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 })
       }
     );
-  };
-  if (variant === "inline") {
+    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-muted-foreground"
+          ),
+          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": "inline",
+        "data-variant": "waveform",
         className: cn(audioPlayerVariants({ variant, size }), className),
         children: [
-          renderPlayButton(),
           title && /* @__PURE__ */ jsx(
             "span",
             {
@@ -731,98 +784,46 @@ var AudioPlayer = React.forwardRef(function AudioPlayer2({
               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,
+            Waveform,
             {
-              currentTime,
-              duration: displayDuration,
-              onSeek: handleSeek,
-              disabled
+              src,
+              isPlaying,
+              playbackRate,
+              onReady: handleWaveformReady,
+              onTimeUpdate: handleWaveformTimeUpdate,
+              onFinish: handleWaveformFinish,
+              onSeek: handleWaveformSeek,
+              waveColor,
+              progressColor,
+              height: waveformHeight,
+              showHoverCursor: showWaveformHoverCursor,
+              onHoverTimeChange: handleHoverTimeChange,
+              cursorColor: waveformCursorColor,
+              waveformRef: waveformMethodsRef
             }
           ),
-          renderTime(),
-          renderPlaybackRateControl()
+          /* @__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()
+                ] })
+              ]
+            }
+          )
         ]
       }
     );
   }
-  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-LAR4H7ZG.js.map
-//# sourceMappingURL=chunk-LAR4H7ZG.js.map
+//# sourceMappingURL=chunk-WORZLEUZ.js.map
+//# sourceMappingURL=chunk-WORZLEUZ.js.map