xertica-ui 2.1.3 → 2.1.4

package/dist/{AudioPlayer-C12BjQBV.cjs → AudioPlayer-1ypwE2Wh.cjs}

@@ -2,11 +2,12 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const lucideReact = require("lucide-react");
-const slider = require("./slider-N7hFFj6X.cjs");
-const tooltip = require("./tooltip-Ded96neP.cjs");
+const slider = require("./slider-CPmwzm_3.cjs");
+const button = require("./button-0CXwCRTm.cjs");
 const reactDom = require("react-dom");
-const dropdownMenu = require("./dropdown-menu-BDB5CmQs.cjs");
-const LayoutContext = require("./LayoutContext-CwT5KLiW.cjs");
+const tooltip = require("./tooltip-CNtsL5cB.cjs");
+const dropdownMenu = require("./dropdown-menu-Ze1YZFyc.cjs");
+const useAudioPlayer = require("./use-audio-player-Dn1NR9xN.cjs");
 function FloatingMediaWrapper({
   children,
   isFloating,
@@ -32,7 +33,7 @@ function FloatingMediaWrapper({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: tooltip.cn(
+          className: button.cn(
             "w-full rounded-[var(--radius-card)] bg-muted/20 border border-dashed border-muted-foreground/20 flex items-center justify-center flex-col gap-2 p-8 text-muted-foreground transition-all",
             className
           ),
@@ -40,7 +41,7 @@ function FloatingMediaWrapper({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-8 h-8 opacity-50" }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Reproduzindo em janela flutuante" }),
-            /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "outline", size: "sm", onClick: () => setIsFloating(false), children: "Restaurar para a página" })
+            /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", onClick: () => setIsFloating(false), children: "Restaurar para a página" })
           ]
         }
       ),
@@ -65,7 +66,7 @@ function FloatingMediaWrapper({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltip.cn("relative w-full overflow-hidden rounded-[var(--radius-card)]", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn("relative w-full overflow-hidden rounded-[var(--radius-card)]", className), children });
 }
 function FloatingContainer({
   children,
@@ -192,7 +193,7 @@ function FloatingContainer({
       },
       role: "dialog",
       "aria-label": title || "Reproduzindo Mídia",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn(
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn(
         "shadow-2xl rounded-[var(--radius-card)] overflow-hidden border backdrop-blur-sm",
         colorVariant === "primary" ? "bg-primary border-primary-foreground/20 text-primary-foreground" : "border-border bg-card/95 text-card-foreground"
       ), children: [
@@ -200,14 +201,14 @@ function FloatingContainer({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: tooltip.cn(
+              className: button.cn(
                 "h-9 backdrop-blur-sm border-b flex items-center justify-between px-2 cursor-move select-none",
                 colorVariant === "primary" ? "bg-primary-foreground/10 border-primary-foreground/10" : "bg-muted/20 border-border/40"
               ),
               onMouseDown: handleMouseDown,
               style: { touchAction: "none", userSelect: "none" },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn(
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn(
                   "flex items-center gap-2 text-[10px] uppercase tracking-wider font-bold truncate flex-1",
                   colorVariant === "primary" ? "text-primary-foreground" : "text-muted-foreground"
                 ), children: [
@@ -215,11 +216,11 @@ function FloatingContainer({
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[150px]", children: title || "Reproduzindo Mídia" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  tooltip.Button,
+                  button.Button,
                   {
                     variant: "ghost",
                     size: "icon",
-                    className: tooltip.cn(
+                    className: button.cn(
                       "h-7 w-7 rounded-full transition-colors",
                       colorVariant === "primary" ? "text-primary-foreground/70 hover:bg-destructive/20 hover:text-destructive-foreground" : "text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
                     ),
@@ -232,7 +233,7 @@ function FloatingContainer({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltip.cn("flex-1 relative overflow-hidden group", enablePadding && "p-2", colorVariant === "primary" ? "bg-primary" : "bg-card"), children })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn("flex-1 relative overflow-hidden group", enablePadding && "p-2", colorVariant === "primary" ? "bg-primary" : "bg-card"), children })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute top-0 left-0 w-2 h-full cursor-ew-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "left") }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "absolute top-0 right-0 w-2 h-full cursor-ew-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "right") }),
@@ -419,7 +420,7 @@ function VideoPlayer({
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: tooltip.cn(
+                className: button.cn(
                   "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent pt-12 pb-4 px-4 transition-opacity duration-300",
                   showControls ? "opacity-100" : "opacity-0"
                 ),
@@ -438,7 +439,7 @@ function VideoPlayer({
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        tooltip.Button,
+                        button.Button,
                         {
                           variant: "ghost",
                           size: "icon",
@@ -450,7 +451,7 @@ function VideoPlayer({
                       ),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 group/vol", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          tooltip.Button,
+                          button.Button,
                           {
                             variant: "ghost",
                             size: "icon",
@@ -479,7 +480,7 @@ function VideoPlayer({
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      tooltip.Button,
+                      button.Button,
                       {
                         variant: "ghost",
                         size: "icon",
@@ -520,116 +521,47 @@ function AudioPlayer({
   enableAutoFloat = true,
   onCloseFloating
 }) {
-  const audioRef = React.useRef(null);
-  const containerRef = React.useRef(null);
-  const layout = LayoutContext.useOptionalLayout();
-  const sidebarExpanded = (layout == null ? void 0 : layout.sidebarExpanded) ?? false;
-  const sidebarWidth = (layout == null ? void 0 : layout.sidebarWidth) ?? 256;
-  const assistenteExpanded = (layout == null ? void 0 : layout.assistenteExpanded) ?? false;
-  const [isPlaying, setIsPlaying] = React.useState(false);
-  const [volume, setVolume] = React.useState(0.8);
-  const [isMuted, setIsMuted] = React.useState(false);
-  const [currentTime, setCurrentTime] = React.useState(initialTime);
-  const [duration, setDuration] = React.useState(initialDuration || 0);
-  const [isFloating, setIsFloating] = React.useState(false);
-  const [isManualFloating, setIsManualFloating] = React.useState(false);
-  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = React.useState(enableAutoFloat);
-  const [isVisible, setIsVisible] = React.useState(variant === "card");
-  const [isMobile, setIsMobile] = React.useState(false);
-  const [playbackSpeed, setPlaybackSpeed] = React.useState(1);
-  React.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const checkMobile = () => setIsMobile(window.innerWidth < 768);
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => window.removeEventListener("resize", checkMobile);
-  }, []);
-  React.useEffect(() => {
-    if (variant === "bar") {
-      if (isOpen) {
-        setIsVisible(true);
-      } else {
-        const timer = setTimeout(() => setIsVisible(false), 300);
-        return () => clearTimeout(timer);
-      }
-    } else {
-      setIsVisible(true);
-    }
-  }, [isOpen, variant]);
-  React.useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    audio.volume = volume;
-    audio.muted = isMuted;
-    audio.playbackRate = playbackSpeed;
-  }, [volume, isMuted, playbackSpeed, src]);
-  React.useEffect(() => {
-    if (variant !== "card" || !enableAutoFloatLocal) return;
-    const container = containerRef.current;
-    if (!container) return;
-    if (typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (isPlaying && !entry.isIntersecting && !isFloating) {
-          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-          setIsFloating(true);
-        } else if (entry.isIntersecting && isFloating && !isManualFloating) {
-          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-          handleSetFloating(false);
-        }
-      },
-      { threshold: 0.2 }
-    );
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, [isPlaying, isFloating, isManualFloating, variant, enableAutoFloatLocal]);
-  React.useEffect(() => {
-    const audio = audioRef.current;
-    if (audio) {
-      if (Math.abs(audio.currentTime - currentTime) > 0.5) {
-        audio.currentTime = currentTime;
-      }
-      if (isPlaying) {
-        audio.play().catch((err) => console.log("Playback interrupted:", err));
-      }
-    }
-  }, [isFloating, variant]);
-  const handleSetFloating = (floating) => {
-    if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-    setIsFloating(floating);
-    if (!floating) {
-      setIsManualFloating(false);
-    }
-  };
-  const togglePlay = () => {
-    if (audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause();
-      } else {
-        audioRef.current.play().catch((err) => console.log("Playback error:", err));
-      }
-    }
-  };
-  const toggleMute = () => {
-    setIsMuted(!isMuted);
-  };
-  const handleSeek = (value) => {
-    if (audioRef.current) {
-      audioRef.current.currentTime = value[0];
-      setCurrentTime(value[0]);
-    }
-  };
-  const handleVolumeChange = (value) => {
-    const newVolume = value[0];
-    setVolume(newVolume);
-    setIsMuted(newVolume === 0);
-  };
-  const formatTime = (time) => {
-    if (isNaN(time) || time === Infinity || !isFinite(time)) return "0:00";
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
-  };
+  const {
+    audioRef,
+    containerRef,
+    isPlaying,
+    currentTime,
+    duration,
+    volume,
+    isMuted,
+    playbackSpeed,
+    isFloating,
+    isManualFloating,
+    isVisible,
+    isMobile,
+    enableAutoFloatLocal,
+    sidebarExpanded,
+    sidebarWidth,
+    assistenteExpanded,
+    togglePlay,
+    toggleMute,
+    handleSeek,
+    handleVolumeChange,
+    handleSetFloating,
+    handleEnableManualFloat,
+    setPlaybackSpeed,
+    resetAudio,
+    formatTime,
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onLoadedMetadata
+  } = useAudioPlayer.useAudioPlayer({
+    src,
+    autoPlay,
+    initialTime,
+    initialDuration,
+    variant,
+    isOpen,
+    enableAutoFloat,
+    onCloseFloating
+  });
   const audioElement = /* @__PURE__ */ jsxRuntime.jsx(
     "audio",
     {
@@ -637,36 +569,36 @@ function AudioPlayer({
       src,
       autoPlay,
       className: "hidden",
-      onTimeUpdate: (e) => setCurrentTime(e.currentTarget.currentTime),
-      onLoadedMetadata: (e) => setDuration(e.currentTarget.duration),
-      onPlay: () => setIsPlaying(true),
-      onPause: () => setIsPlaying(false),
-      onEnded: () => setIsPlaying(false)
+      onTimeUpdate,
+      onLoadedMetadata,
+      onPlay,
+      onPause,
+      onEnded
     }
   );
-  const desktopLayout = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("px-6 flex items-center justify-between gap-4", colorVariant === "primary" ? "h-[80px] gap-6" : "h-[80px]"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex flex-col min-w-0 shrink-0 relative z-10", colorVariant === "primary" ? "w-[280px]" : "w-[280px]"), children: [
+  const desktopLayout = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("px-6 flex items-center justify-between gap-4", colorVariant === "primary" ? "h-[80px] gap-6" : "h-[80px]"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("flex flex-col min-w-0 shrink-0 relative z-10", colorVariant === "primary" ? "w-[280px]" : "w-[280px]"), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [
         colorVariant === "primary" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Radio, { className: "w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: tooltip.cn("truncate", colorVariant === "primary" ? "font-semibold text-base tracking-tight" : "font-medium text-base"), title, children: title })
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: button.cn("truncate", colorVariant === "primary" ? "font-semibold text-base tracking-tight" : "font-medium text-base"), title, children: title })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex items-center gap-1 text-xs text-muted-foreground", colorVariant === "primary" && "opacity-80"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("flex items-center gap-1 text-xs text-muted-foreground", colorVariant === "primary" && "opacity-80"), children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle || artist }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: tooltip.cn("w-3 h-3 cursor-pointer hover:text-foreground ml-1 transition-opacity", colorVariant === "primary" ? "opacity-60 hover:opacity-100" : "opacity-70 hover:opacity-100") })
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: button.cn("w-3 h-3 cursor-pointer hover:text-foreground ml-1 transition-opacity", colorVariant === "primary" ? "opacity-60 hover:opacity-100" : "opacity-70 hover:opacity-100") })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex-1 flex items-center justify-center gap-4 min-w-0 max-w-xl relative z-10", colorVariant === "primary" && "gap-4"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("flex-1 flex items-center justify-center gap-4 min-w-0 max-w-xl relative z-10", colorVariant === "primary" && "gap-4"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: togglePlay,
           "aria-label": isPlaying ? "Pausar" : "Reproduzir",
-          className: tooltip.cn("transition-all focus:outline-none shrink-0", colorVariant === "primary" ? "hover:scale-110" : "text-muted-foreground hover:text-foreground hover:scale-110 active:scale-95 transform duration-100"),
-          children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseCircle, { className: tooltip.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayCircle, { className: tooltip.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 })
+          className: button.cn("transition-all focus:outline-none shrink-0", colorVariant === "primary" ? "hover:scale-110" : "text-muted-foreground hover:text-foreground hover:scale-110 active:scale-95 transform duration-100"),
+          children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseCircle, { className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayCircle, { className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-3 max-w-lg", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tooltip.cn("text-xs font-mono shrink-0 w-10 text-right", colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"), children: formatTime(currentTime) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: button.cn("text-xs font-mono shrink-0 w-10 text-right", colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"), children: formatTime(currentTime) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           slider.Slider,
           {
@@ -676,7 +608,7 @@ function AudioPlayer({
             className: "cursor-pointer"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tooltip.cn("text-xs font-mono shrink-0 w-10", colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"), children: formatTime(duration) })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: button.cn("text-xs font-mono shrink-0 w-10", colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"), children: formatTime(duration) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0 relative z-10", children: [
@@ -703,24 +635,22 @@ function AudioPlayer({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex", children: [
           /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", onClick: () => {
-              if (audioRef.current) audioRef.current.currentTime = 0;
-            }, "aria-label": "Recomecar audio", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", onClick: resetAudio, "aria-label": "Recomecar audio", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4" }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: "Recomeçar" })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "text-[var(--chart-3)] hover:bg-accent rounded-full h-9 w-9", "aria-label": "Informacoes do audio", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4 fill-current" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", className: "text-[var(--chart-3)] hover:bg-accent rounded-full h-9 w-9", "aria-label": "Informacoes do audio", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4 fill-current" }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: "Informações" })
           ] }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden xl:flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Selecionar velocidade", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gauge, { className: "w-4 h-4" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Selecionar velocidade", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gauge, { className: "w-4 h-4" }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "center", className: "w-32 z-[1001]", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxRuntime.jsxs(
               dropdownMenu.DropdownMenuItem,
               {
                 onClick: () => setPlaybackSpeed(speed),
-                className: tooltip.cn("cursor-pointer", playbackSpeed === speed && "bg-accent font-bold"),
+                className: button.cn("cursor-pointer", playbackSpeed === speed && "bg-accent font-bold"),
                 children: [
                   speed,
                   "x"
@@ -730,12 +660,12 @@ function AudioPlayer({
             )) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Baixar audio", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Baixar audio", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4" }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: "Baixar Áudio" })
           ] }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Mais opcoes", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "w-5 h-5" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Mais opcoes", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "w-5 h-5" }) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:hidden", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-3", children: [
@@ -748,9 +678,7 @@ function AudioPlayer({
               /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-1" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
-                if (audioRef.current) audioRef.current.currentTime = 0;
-              }, className: "cursor-pointer py-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: resetAudio, className: "cursor-pointer py-2.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
                 " Recomeçar"
               ] }),
@@ -770,7 +698,7 @@ function AudioPlayer({
                   "button",
                   {
                     onClick: () => setPlaybackSpeed(speed),
-                    className: tooltip.cn(
+                    className: button.cn(
                       "px-2 py-0.5 text-[10px] rounded border transition-colors",
                       playbackSpeed === speed ? "bg-primary text-primary-foreground border-primary" : "bg-transparent border-border hover:bg-accent"
                     ),
@@ -791,23 +719,23 @@ function AudioPlayer({
           ] })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-8 bg-border mx-1" }),
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { onClick: onClose, variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Fechar player", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: onClose, variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Fechar player", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" }) })
       ] })
     ] })
   ] });
-  const mobileLayout = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex flex-col py-3 px-4 gap-3", colorVariant === "primary" && "py-4 px-5 gap-4"), children: [
+  const mobileLayout = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("flex flex-col py-3 px-4 gap-3", colorVariant === "primary" && "py-4 px-5 gap-4"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
           colorVariant === "primary" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Radio, { className: "w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: tooltip.cn("truncate", colorVariant === "primary" ? "font-semibold text-sm tracking-tight" : "font-medium text-sm"), children: title })
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: button.cn("truncate", colorVariant === "primary" ? "font-semibold text-sm tracking-tight" : "font-medium text-sm"), children: title })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltip.cn("flex items-center gap-1.5 text-xs text-muted-foreground", colorVariant === "primary" && "opacity-70"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle || artist }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn("flex items-center gap-1.5 text-xs text-muted-foreground", colorVariant === "primary" && "opacity-70"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle || artist }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { onClick: onClose, variant: "ghost", size: "icon", className: "rounded-full h-8 w-8 shrink-0", "aria-label": "Fechar player", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: onClose, variant: "ghost", size: "icon", className: "rounded-full h-8 w-8 shrink-0", "aria-label": "Fechar player", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: togglePlay, "aria-label": isPlaying ? "Pausar" : "Reproduzir", className: "shrink-0 transition-transform active:scale-95", children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseCircle, { className: tooltip.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayCircle, { className: tooltip.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: togglePlay, "aria-label": isPlaying ? "Pausar" : "Reproduzir", className: "shrink-0 transition-transform active:scale-95", children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseCircle, { className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlayCircle, { className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         slider.Slider,
         {
@@ -819,36 +747,38 @@ function AudioPlayer({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: "h-9 w-9 rounded-full", "aria-label": "Mais opcoes", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", className: "h-9 w-9 rounded-full", "aria-label": "Mais opcoes", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5" }) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: () => {
-            if (audioRef.current) audioRef.current.currentTime = 0;
-          }, children: "Recomeçar" }),
-          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { children: "Velocidade (1.0x)" })
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: resetAudio, children: "Recomeçar" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { children: [
+            "Velocidade (",
+            playbackSpeed,
+            "x)"
+          ] })
         ] })
       ] })
     ] })
   ] });
-  const desktopLayoutCompact = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tooltip.cn("flex items-center gap-3 w-full", isFloating ? "px-3 py-1 text-foreground" : "px-4 py-3"), children: [
+  const desktopLayoutCompact = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: button.cn("flex items-center gap-3 w-full", isFloating ? "px-3 py-1 text-foreground" : "px-4 py-3"), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      tooltip.Button,
+      button.Button,
       {
         onClick: togglePlay,
         size: "icon",
         variant: "outline",
-        className: tooltip.cn(
+        className: button.cn(
           "shrink-0 rounded-full border-border text-foreground hover:bg-accent transition-colors",
           colorVariant === "primary" && "border-primary-foreground/20 hover:bg-primary-foreground/10 text-primary-foreground",
           isFloating ? "h-8 w-8" : "h-10 w-10"
         ),
         "aria-label": isPlaying ? "Pausar" : "Reproduzir",
-        children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: tooltip.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: tooltip.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current ml-0.5") })
+        children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: button.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: button.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current ml-0.5") })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-center gap-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs leading-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tooltip.cn("font-medium truncate", colorVariant === "primary" ? "text-primary-foreground" : "text-foreground"), children: title }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tooltip.cn("font-medium tabular-nums text-[10px] sm:text-xs", colorVariant === "primary" ? "text-primary-foreground/70" : "text-muted-foreground"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: button.cn("font-medium truncate", colorVariant === "primary" ? "text-primary-foreground" : "text-foreground"), children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: button.cn("font-medium tabular-nums text-[10px] sm:text-xs", colorVariant === "primary" ? "text-primary-foreground/70" : "text-muted-foreground"), children: [
           formatTime(currentTime),
           " / ",
           formatTime(duration)
@@ -868,7 +798,20 @@ function AudioPlayer({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Button, { variant: "ghost", size: "icon", className: tooltip.cn("rounded-full", colorVariant === "primary" ? "text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10" : "text-muted-foreground hover:text-foreground", isFloating ? "h-7 w-7" : "h-8 w-8"), "aria-label": "Mais opções", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: isFloating ? "w-4 h-4" : "w-5 h-5" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: button.cn(
+              "rounded-full",
+              colorVariant === "primary" ? "text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10" : "text-muted-foreground hover:text-foreground",
+              isFloating ? "h-7 w-7" : "h-8 w-8"
+            ),
+            "aria-label": "Mais opções",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: isFloating ? "w-4 h-4" : "w-5 h-5" })
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -895,7 +838,7 @@ function AudioPlayer({
               "button",
               {
                 onClick: () => setPlaybackSpeed(speed),
-                className: tooltip.cn(
+                className: button.cn(
                   "px-2 py-1 text-[10px] rounded border transition-colors",
                   playbackSpeed === speed ? "bg-primary text-primary-foreground border-primary" : "bg-transparent border-border hover:bg-accent"
                 ),
@@ -908,9 +851,7 @@ function AudioPlayer({
             )) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-2" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
-            if (audioRef.current) audioRef.current.currentTime = 0;
-          }, className: "cursor-pointer py-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: resetAudio, className: "cursor-pointer py-2.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Recomeçar áudio" })
           ] }),
@@ -921,16 +862,15 @@ function AudioPlayer({
         ] })
       ] }),
       !isFloating && /* @__PURE__ */ jsxRuntime.jsx(
-        tooltip.Button,
+        button.Button,
         {
           variant: "ghost",
           size: "icon",
-          className: tooltip.cn("h-8 w-8", colorVariant === "primary" ? "text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10" : "text-muted-foreground hover:text-foreground"),
-          onClick: () => {
-            setEnableAutoFloatLocal(true);
-            setIsManualFloating(true);
-            handleSetFloating(true);
-          },
+          className: button.cn(
+            "h-8 w-8",
+            colorVariant === "primary" ? "text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10" : "text-muted-foreground hover:text-foreground"
+          ),
+          onClick: handleEnableManualFloat,
           title: "Modo Flutuante",
           "aria-label": "Abrir modo flutuante",
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-4 h-4" })
@@ -944,7 +884,7 @@ function AudioPlayer({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: tooltip.cn(
+          className: button.cn(
             "fixed bottom-0 z-[100] border-t transition-all duration-300 ease-in-out",
             colorVariant === "primary" ? "bg-primary/95 text-primary-foreground border-primary/20 backdrop-blur-sm [&_.text-muted-foreground]:text-primary-foreground/70 [&_.text-foreground]:text-primary-foreground [&_button]:text-primary-foreground [&_[data-slot=slider-track]]:bg-primary-foreground/30 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground [&_[data-slot=slider-thumb]]:bg-primary-foreground" : "bg-card/95 text-card-foreground border-border backdrop-blur-md shadow-[var(--elevation-sm)]",
             isOpen ? "translate-y-0 opacity-100" : "translate-y-full opacity-0",
@@ -972,8 +912,7 @@ function AudioPlayer({
         setIsFloating: handleSetFloating,
         onClose: () => handleSetFloating(false),
         onCloseMedia: () => {
-          setIsFloating(false);
-          setEnableAutoFloatLocal(false);
+          handleSetFloating(false);
         },
         title: "Reproduzindo Mídia",
         aspectRatio: 320 / 110,
@@ -983,7 +922,7 @@ function AudioPlayer({
         className: "w-full",
         playerId: "audio-player",
         enablePadding: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltip.cn(
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn(
           "w-full overflow-hidden flex flex-col justify-center",
           colorVariant === "primary" ? "bg-primary text-primary-foreground [&_[data-slot=slider-track]]:bg-white/20 [&_[data-slot=slider-range]]:bg-white [&_[data-slot=slider-thumb]]:border-white [&_[data-slot=slider-thumb]]:bg-white" : "bg-card text-card-foreground",
           isFloating ? "h-full bg-transparent" : "border rounded-md shadow-sm"