@fluencypassdevs/cycle 0.9.5 → 0.10.0

package/bin/mcp.mjs

@@ -339,17 +339,31 @@ const COMPONENTS = [
   },
   {
     name: "AudioPlayer",
-    import: `import { AudioPlayer } from "@fluencypassdevs/cycle"`,
-    description: "Player de audio (Vidstack). 2 variantes (default, card). Suporta MP3, OGG, HLS. showSpeed=true por padrao.",
+    import: `import { AudioPlayer } from "@fluencypassdevs/cycle"\nimport type { AudioPlayerRef } from "@fluencypassdevs/cycle"`,
+    description: "Player de audio (Vidstack). 2 variantes (default, card). Suporta MP3, OGG, HLS. showSpeed=true por padrao. Expoe ref imperativo (play/pause) e callbacks onTimeUpdate/onEnded.",
     props: [
       { name: "src", type: "string", default: "-" },
       { name: "variant", type: '"default" | "card"', default: '"default"' },
       { name: "title", type: "string", default: "-" },
       { name: "description", type: "string", default: "-" },
       { name: "showSpeed", type: "boolean", default: "true" },
+      { name: "onTimeUpdate", type: "(currentTime: number, duration: number) => void", default: "-" },
+      { name: "onEnded", type: "() => void", default: "-" },
+      { name: "ref", type: "React.Ref<AudioPlayerRef>", default: "-" },
     ],
     example: `<AudioPlayer src="/audio.mp3" />
-<AudioPlayer variant="card" src="/audio.mp3" title="Listening Practice" description="Episode 1" />`,
+<AudioPlayer variant="card" src="/audio.mp3" title="Listening Practice" description="Episode 1" />
+
+// Ref imperativo + callbacks:
+const ref = useRef<AudioPlayerRef>(null)
+<AudioPlayer
+  ref={ref}
+  src="/audio.mp3"
+  title="Lesson 1"
+  onTimeUpdate={(currentTime, duration) => console.log(currentTime, duration)}
+  onEnded={() => console.log("ended")}
+/>
+// ref.current.play() / ref.current.pause()`,
     keywords: ["audio", "player", "musica", "podcast", "som", "mp3", "ouvir", "listening"],
   },
   {

package/dist/{chunk-UAHCRXAG.js → chunk-7NEORCES.js}

@@ -1,5 +1,6 @@
 import { CycleIcon } from './chunk-V7M2NHUO.js';
 import { cn } from './chunk-TYCPXAXF.js';
+import { __spreadValues, __spreadProps } from './chunk-YINJ5YZ5.js';
 import * as React from 'react';
 import { MediaPlayer, MediaProvider, Time, TimeSlider, SeekButton, useMediaState, PlayButton, useMediaRemote, MuteButton, VolumeSlider } from '@vidstack/react';
 import '@vidstack/react/player/styles/base.css';
@@ -90,25 +91,120 @@ function AudioSpeedControl() {
     ] })
   ] });
 }
-function AudioPlayer({
-  src,
-  title,
-  subtitle,
-  coverArt,
-  coverArtAlt = "",
-  variant = "default",
-  filled = false,
-  autoPlay = false,
-  muted = false,
-  loop = false,
-  showSpeed = true,
-  className
-}) {
-  const player = React.useRef(null);
-  if (variant === "card") {
+var AudioPlayer = React.forwardRef(
+  function AudioPlayer2({
+    src,
+    title,
+    subtitle,
+    coverArt,
+    coverArtAlt = "",
+    variant = "default",
+    filled = false,
+    autoPlay = false,
+    muted = false,
+    loop = false,
+    showSpeed = true,
+    onTimeUpdate,
+    onEnded,
+    className
+  }, ref) {
+    const player = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+      play() {
+        var _a;
+        (_a = player.current) == null ? void 0 : _a.play();
+      },
+      pause() {
+        var _a;
+        (_a = player.current) == null ? void 0 : _a.pause();
+      },
+      get currentTime() {
+        var _a, _b;
+        return (_b = (_a = player.current) == null ? void 0 : _a.currentTime) != null ? _b : 0;
+      },
+      get duration() {
+        var _a, _b;
+        return (_b = (_a = player.current) == null ? void 0 : _a.duration) != null ? _b : 0;
+      }
+    }));
+    const handleTimeUpdate = React.useCallback(
+      (detail) => {
+        if (onTimeUpdate && player.current) {
+          onTimeUpdate(detail.currentTime, player.current.duration);
+        }
+      },
+      [onTimeUpdate]
+    );
+    const handleEnded = React.useCallback(() => {
+      onEnded == null ? void 0 : onEnded();
+    }, [onEnded]);
+    const playerEvents = __spreadValues(__spreadValues({}, onTimeUpdate ? { onTimeUpdate: handleTimeUpdate } : {}), onEnded ? { onEnded: handleEnded } : {});
+    if (variant === "card") {
+      return /* @__PURE__ */ jsxs(
+        MediaPlayer,
+        __spreadProps(__spreadValues({
+          ref: player,
+          src,
+          autoPlay,
+          muted,
+          loop,
+          viewType: "audio",
+          "data-filled": filled ? "" : void 0,
+          style: filled ? { "--primary-foreground": "var(--secondary-foreground)" } : void 0,
+          className: cn(
+            "group/root group !block w-full rounded-xl border border-border bg-card p-4 shadow-sm md:p-6",
+            className
+          )
+        }, playerEvents), {
+          children: [
+            /* @__PURE__ */ jsx(MediaProvider, { className: "!hidden" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-4 mb-4 md:gap-5 md:mb-6", children: [
+              coverArt && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: coverArt,
+                  alt: coverArtAlt,
+                  className: "size-16 shrink-0 rounded-lg object-cover bg-muted md:size-24 md:rounded-xl"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col justify-center", children: [
+                /* @__PURE__ */ jsx("p", { className: cn(
+                  "truncate heading-md md:heading-xl",
+                  filled ? "text-primary-foreground" : "text-card-foreground"
+                ), children: title }),
+                subtitle && /* @__PURE__ */ jsx("p", { className: cn(
+                  "truncate body-md md:body-lg",
+                  filled ? "text-primary-foreground/70" : "text-muted-foreground"
+                ), children: subtitle })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex w-full items-center", children: /* @__PURE__ */ jsx(AudioSeekBar, {}) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-0.5 -mt-1 mb-1 md:mb-2", children: [
+              /* @__PURE__ */ jsx("div", { className: cn(
+                "text-[11px] font-mono tabular-nums md:text-xs",
+                filled ? "text-primary-foreground/80" : "text-muted-foreground"
+              ), children: /* @__PURE__ */ jsx(Time, { type: "current" }) }),
+              /* @__PURE__ */ jsx("div", { className: cn(
+                "text-[11px] font-mono tabular-nums md:text-xs",
+                filled ? "text-primary-foreground/80" : "text-muted-foreground"
+              ), children: /* @__PURE__ */ jsx(Time, { type: "duration" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-2", children: [
+              /* @__PURE__ */ jsx(AudioSeekBackwardControl, {}),
+              /* @__PURE__ */ jsx(AudioPlayControl, {}),
+              /* @__PURE__ */ jsx(AudioSeekForwardControl, {}),
+              /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+              showSpeed && /* @__PURE__ */ jsx(AudioSpeedControl, {}),
+              /* @__PURE__ */ jsx(AudioMuteControl, {}),
+              /* @__PURE__ */ jsx(AudioVolumeControl, {})
+            ] })
+          ]
+        })
+      );
+    }
     return /* @__PURE__ */ jsxs(
       MediaPlayer,
-      {
+      __spreadProps(__spreadValues({
         ref: player,
         src,
         autoPlay,
@@ -118,85 +214,26 @@ function AudioPlayer({
         "data-filled": filled ? "" : void 0,
         style: filled ? { "--primary-foreground": "var(--secondary-foreground)" } : void 0,
         className: cn(
-          "group/root group !block w-full rounded-xl border border-border bg-card p-4 shadow-sm md:p-6",
+          "group/root group !flex w-full items-center gap-1.5 rounded-xl border border-border bg-card px-2 py-1.5 shadow-sm",
           className
-        ),
+        )
+      }, playerEvents), {
         children: [
           /* @__PURE__ */ jsx(MediaProvider, { className: "!hidden" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-4 mb-4 md:gap-5 md:mb-6", children: [
-            coverArt && /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: coverArt,
-                alt: coverArtAlt,
-                className: "size-16 shrink-0 rounded-lg object-cover bg-muted md:size-24 md:rounded-xl"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col justify-center", children: [
-              /* @__PURE__ */ jsx("p", { className: cn(
-                "truncate heading-md md:heading-xl",
-                filled ? "text-primary-foreground" : "text-card-foreground"
-              ), children: title }),
-              subtitle && /* @__PURE__ */ jsx("p", { className: cn(
-                "truncate body-md md:body-lg",
-                filled ? "text-primary-foreground/70" : "text-muted-foreground"
-              ), children: subtitle })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex w-full items-center", children: /* @__PURE__ */ jsx(AudioSeekBar, {}) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-0.5 -mt-1 mb-1 md:mb-2", children: [
-            /* @__PURE__ */ jsx("div", { className: cn(
-              "text-[11px] font-mono tabular-nums md:text-xs",
-              filled ? "text-primary-foreground/80" : "text-muted-foreground"
-            ), children: /* @__PURE__ */ jsx(Time, { type: "current" }) }),
-            /* @__PURE__ */ jsx("div", { className: cn(
-              "text-[11px] font-mono tabular-nums md:text-xs",
-              filled ? "text-primary-foreground/80" : "text-muted-foreground"
-            ), children: /* @__PURE__ */ jsx(Time, { type: "duration" }) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-2", children: [
-            /* @__PURE__ */ jsx(AudioSeekBackwardControl, {}),
-            /* @__PURE__ */ jsx(AudioPlayControl, {}),
-            /* @__PURE__ */ jsx(AudioSeekForwardControl, {}),
-            /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-            showSpeed && /* @__PURE__ */ jsx(AudioSpeedControl, {}),
-            /* @__PURE__ */ jsx(AudioMuteControl, {}),
-            /* @__PURE__ */ jsx(AudioVolumeControl, {})
-          ] })
+          /* @__PURE__ */ jsx(AudioSeekBackwardControl, {}),
+          /* @__PURE__ */ jsx(AudioPlayControl, {}),
+          /* @__PURE__ */ jsx(AudioSeekForwardControl, {}),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 px-1", children: /* @__PURE__ */ jsx(AudioSeekBar, {}) }),
+          /* @__PURE__ */ jsx(AudioTimeDisplay, {}),
+          showSpeed && /* @__PURE__ */ jsx(AudioSpeedControl, {}),
+          /* @__PURE__ */ jsx(AudioMuteControl, {}),
+          /* @__PURE__ */ jsx(AudioVolumeControl, {})
         ]
-      }
+      })
     );
   }
-  return /* @__PURE__ */ jsxs(
-    MediaPlayer,
-    {
-      ref: player,
-      src,
-      autoPlay,
-      muted,
-      loop,
-      viewType: "audio",
-      "data-filled": filled ? "" : void 0,
-      style: filled ? { "--primary-foreground": "var(--secondary-foreground)" } : void 0,
-      className: cn(
-        "group/root group !flex w-full items-center gap-1.5 rounded-xl border border-border bg-card px-2 py-1.5 shadow-sm",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(MediaProvider, { className: "!hidden" }),
-        /* @__PURE__ */ jsx(AudioSeekBackwardControl, {}),
-        /* @__PURE__ */ jsx(AudioPlayControl, {}),
-        /* @__PURE__ */ jsx(AudioSeekForwardControl, {}),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 px-1", children: /* @__PURE__ */ jsx(AudioSeekBar, {}) }),
-        /* @__PURE__ */ jsx(AudioTimeDisplay, {}),
-        showSpeed && /* @__PURE__ */ jsx(AudioSpeedControl, {}),
-        /* @__PURE__ */ jsx(AudioMuteControl, {}),
-        /* @__PURE__ */ jsx(AudioVolumeControl, {})
-      ]
-    }
-  );
-}
+);
 
 export { AudioPlayer };
-//# sourceMappingURL=chunk-UAHCRXAG.js.map
-//# sourceMappingURL=chunk-UAHCRXAG.js.map
+//# sourceMappingURL=chunk-7NEORCES.js.map
+//# sourceMappingURL=chunk-7NEORCES.js.map

package/dist/chunk-7NEORCES.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/audio-player.tsx"],"names":["AudioPlayer"],"mappings":"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","file":"chunk-7NEORCES.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  MediaPlayer,\n  MediaProvider,\n  TimeSlider,\n  VolumeSlider,\n  Time,\n  PlayButton,\n  MuteButton,\n  SeekButton,\n  useMediaState,\n  useMediaRemote,\n  type MediaPlayerInstance,\n} from \"@vidstack/react\"\nimport \"@vidstack/react/player/styles/base.css\"\nimport {\n  Play,\n  Pause,\n  Volume2,\n  VolumeX,\n  Volume1,\n  RotateCcw,\n  RotateCw,\n  Gauge,\n  Check,\n} from \"lucide-react\"\nimport { CycleIcon } from \"@/components/icons\"\nimport { cn } from \"@/lib/utils\"\n\n/* ─── Types ─── */\n\nexport interface AudioPlayerRef {\n  play(): void\n  pause(): void\n  readonly currentTime: number\n  readonly duration: number\n}\n\nexport interface AudioPlayerProps {\n  /** URL do audio (mp3, ogg, m3u8) */\n  src: string\n  /** Nome da track/aula */\n  title: string\n  /** Subtitulo / nome do curso */\n  subtitle?: string\n  /** URL da imagem de capa (variante card) */\n  coverArt?: string\n  /** Alt text da imagem de capa */\n  coverArtAlt?: string\n  /** Variante de layout */\n  variant?: \"default\" | \"card\"\n  /** Icones, textos e sliders em primary-foreground — usar com .theme-* */\n  filled?: boolean\n  /** Iniciar automaticamente */\n  autoPlay?: boolean\n  /** Iniciar mutado */\n  muted?: boolean\n  /** Repetir ao terminar */\n  loop?: boolean\n  /** Exibir controle de velocidade (default: true — EdTech) */\n  showSpeed?: boolean\n  /** Callback com progresso do audio (currentTime em segundos, duration em segundos) */\n  onTimeUpdate?: (currentTime: number, duration: number) => void\n  /** Callback disparado quando o audio termina */\n  onEnded?: () => void\n  className?: string\n}\n\n/* ─── Shared styles ─── */\n\nconst controlBtnClass =\n  \"group/btn inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring group-data-[filled]:text-primary-foreground group-data-[filled]:hover:bg-primary-foreground/10\"\n\n/** Play, Pause e Volume usam icones filled (solid) — igual YouTube */\nconst filledIconClass =\n  \"fill-current !stroke-transparent text-foreground group-data-[filled]:text-primary-foreground\"\n\nconst outlineIconClass =\n  \"text-foreground group-data-[filled]:text-primary-foreground\"\n\n/* ─── Sub-components ─── */\n\nfunction AudioPlayControl() {\n  const isPaused = useMediaState(\"paused\")\n  return (\n    <PlayButton className={controlBtnClass}>\n      {isPaused ? (\n        <CycleIcon icon={Play} size=\"sm\" decorative className={filledIconClass} />\n      ) : (\n        <CycleIcon icon={Pause} size=\"sm\" decorative className={filledIconClass} />\n      )}\n    </PlayButton>\n  )\n}\n\nfunction AudioSeekBackwardControl() {\n  return (\n    <SeekButton className={controlBtnClass} seconds={-10}>\n      <CycleIcon icon={RotateCcw} size=\"sm\" decorative className={outlineIconClass} />\n    </SeekButton>\n  )\n}\n\nfunction AudioSeekForwardControl() {\n  return (\n    <SeekButton className={controlBtnClass} seconds={10}>\n      <CycleIcon icon={RotateCw} size=\"sm\" decorative className={outlineIconClass} />\n    </SeekButton>\n  )\n}\n\nfunction AudioMuteControl() {\n  const volume = useMediaState(\"volume\")\n  const isMuted = useMediaState(\"muted\")\n\n  const Icon = isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2\n\n  return (\n    <MuteButton className={controlBtnClass}>\n      <CycleIcon icon={Icon} size=\"sm\" decorative className={filledIconClass} />\n    </MuteButton>\n  )\n}\n\nfunction AudioVolumeControl() {\n  return (\n    <VolumeSlider.Root className=\"group relative hidden h-9 w-20 cursor-pointer touch-none select-none items-center outline-none sm:inline-flex\">\n      <VolumeSlider.Track className=\"relative h-[4px] w-full rounded-full bg-accent group-data-[filled]/root:bg-primary-foreground/30\">\n        <VolumeSlider.TrackFill className=\"absolute h-full w-[var(--slider-fill)] rounded-full bg-primary group-data-[filled]/root:bg-primary-foreground\" />\n      </VolumeSlider.Track>\n      <VolumeSlider.Thumb className=\"absolute left-[var(--slider-fill)] top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:opacity-100 group-data-[filled]/root:bg-primary-foreground\" />\n    </VolumeSlider.Root>\n  )\n}\n\nfunction AudioSeekBar() {\n  return (\n    <TimeSlider.Root className=\"group relative inline-flex h-9 w-full cursor-pointer touch-none select-none items-center outline-none\">\n      <TimeSlider.Track className=\"relative h-[4px] w-full rounded-full bg-accent group-data-[filled]/root:bg-primary-foreground/30\">\n        <TimeSlider.Progress className=\"absolute h-full w-[var(--slider-progress)] rounded-full bg-accent-foreground/20 group-data-[filled]/root:bg-primary-foreground/20\" />\n        <TimeSlider.TrackFill className=\"absolute h-full w-[var(--slider-fill)] rounded-full bg-primary group-data-[filled]/root:bg-primary-foreground\" />\n      </TimeSlider.Track>\n      <TimeSlider.Thumb className=\"absolute left-[var(--slider-fill)] top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:opacity-100 group-data-[filled]/root:bg-primary-foreground\" />\n\n      {/* Time preview on hover */}\n      <TimeSlider.Preview className=\"pointer-events-none flex flex-col items-center opacity-0 transition-opacity duration-200 data-[visible]:opacity-100\">\n        <TimeSlider.Value className=\"rounded bg-popover px-1.5 py-0.5 text-[11px] font-mono text-popover-foreground border border-border shadow-sm\" />\n      </TimeSlider.Preview>\n    </TimeSlider.Root>\n  )\n}\n\nfunction AudioTimeDisplay() {\n  return (\n    <div className=\"flex items-center gap-1 text-xs font-mono text-muted-foreground tabular-nums group-data-[filled]:text-primary-foreground/80\">\n      <Time type=\"current\" />\n      <span>/</span>\n      <Time type=\"duration\" />\n    </div>\n  )\n}\n\nfunction AudioSpeedControl() {\n  const playbackRate = useMediaState(\"playbackRate\")\n  const remote = useMediaRemote()\n  const [open, setOpen] = React.useState(false)\n\n  const rates = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen(!open)}\n        className={controlBtnClass}\n      >\n        {playbackRate === 1 ? (\n          <CycleIcon icon={Gauge} size=\"sm\" decorative className={outlineIconClass} />\n        ) : (\n          <span className=\"text-xs font-mono font-semibold text-foreground group-data-[filled]:text-primary-foreground\">{playbackRate}x</span>\n        )}\n      </button>\n\n      {open && (\n        <>\n          {/* Backdrop to close */}\n          <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\n\n          <div className=\"absolute bottom-full right-0 z-50 mb-2 min-w-[120px] rounded-lg border border-border bg-popover p-1 shadow-lg\">\n            {rates.map((rate) => (\n              <button\n                key={rate}\n                type=\"button\"\n                onClick={() => {\n                  remote.changePlaybackRate(rate)\n                  setOpen(false)\n                }}\n                className={cn(\n                  \"flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm text-popover-foreground/80 transition-colors hover:bg-accent hover:text-popover-foreground\",\n                  playbackRate === rate && \"text-popover-foreground font-medium\"\n                )}\n              >\n                <span className=\"size-4 flex items-center justify-center\">\n                  {playbackRate === rate && <CycleIcon icon={Check} size=\"2xs\" decorative className=\"text-popover-foreground\" />}\n                </span>\n                <span className=\"font-mono\">{rate === 1 ? \"Normal\" : `${rate}x`}</span>\n              </button>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n\n/* ─── Main component ─── */\n\nexport const AudioPlayer = React.forwardRef<AudioPlayerRef, AudioPlayerProps>(\n  function AudioPlayer(\n    {\n      src,\n      title,\n      subtitle,\n      coverArt,\n      coverArtAlt = \"\",\n      variant = \"default\",\n      filled = false,\n      autoPlay = false,\n      muted = false,\n      loop = false,\n      showSpeed = true,\n      onTimeUpdate,\n      onEnded,\n      className,\n    },\n    ref\n  ) {\n    const player = React.useRef<MediaPlayerInstance>(null)\n\n    React.useImperativeHandle(ref, () => ({\n      play() {\n        player.current?.play()\n      },\n      pause() {\n        player.current?.pause()\n      },\n      get currentTime() {\n        return player.current?.currentTime ?? 0\n      },\n      get duration() {\n        return player.current?.duration ?? 0\n      },\n    }))\n\n    const handleTimeUpdate = React.useCallback(\n      (detail: { currentTime: number }) => {\n        if (onTimeUpdate && player.current) {\n          onTimeUpdate(detail.currentTime, player.current.duration)\n        }\n      },\n      [onTimeUpdate]\n    )\n\n    const handleEnded = React.useCallback(() => {\n      onEnded?.()\n    }, [onEnded])\n\n    const playerEvents = {\n      ...(onTimeUpdate ? { onTimeUpdate: handleTimeUpdate } : {}),\n      ...(onEnded ? { onEnded: handleEnded } : {}),\n    }\n\n    if (variant === \"card\") {\n      return (\n        <MediaPlayer\n          ref={player}\n          src={src}\n          autoPlay={autoPlay}\n          muted={muted}\n          loop={loop}\n          viewType=\"audio\"\n          data-filled={filled ? \"\" : undefined}\n          style={filled ? { '--primary-foreground': 'var(--secondary-foreground)' } as Record<string, string> : undefined}\n          className={cn(\n            \"group/root group !block w-full rounded-xl border border-border bg-card p-4 shadow-sm md:p-6\",\n            className\n          )}\n          {...playerEvents}\n        >\n          <MediaProvider className=\"!hidden\" />\n\n          {/* Top: cover art + text */}\n          <div className=\"flex gap-4 mb-4 md:gap-5 md:mb-6\">\n            {coverArt && (\n              <img\n                src={coverArt}\n                alt={coverArtAlt}\n                className=\"size-16 shrink-0 rounded-lg object-cover bg-muted md:size-24 md:rounded-xl\"\n              />\n            )}\n            <div className=\"flex min-w-0 flex-col justify-center\">\n              <p className={cn(\n                \"truncate heading-md md:heading-xl\",\n                filled ? \"text-primary-foreground\" : \"text-card-foreground\"\n              )}>{title}</p>\n              {subtitle && (\n                <p className={cn(\n                  \"truncate body-md md:body-lg\",\n                  filled ? \"text-primary-foreground/70\" : \"text-muted-foreground\"\n                )}>{subtitle}</p>\n              )}\n            </div>\n          </div>\n\n          {/* Seek bar */}\n          <div className=\"flex w-full items-center\">\n            <AudioSeekBar />\n          </div>\n\n          {/* Time */}\n          <div className=\"flex items-center justify-between px-0.5 -mt-1 mb-1 md:mb-2\">\n            <div className={cn(\n              \"text-[11px] font-mono tabular-nums md:text-xs\",\n              filled ? \"text-primary-foreground/80\" : \"text-muted-foreground\"\n            )}>\n              <Time type=\"current\" />\n            </div>\n            <div className={cn(\n              \"text-[11px] font-mono tabular-nums md:text-xs\",\n              filled ? \"text-primary-foreground/80\" : \"text-muted-foreground\"\n            )}>\n              <Time type=\"duration\" />\n            </div>\n          </div>\n\n          {/* Controls */}\n          <div className=\"flex items-center gap-1 md:gap-2\">\n            <AudioSeekBackwardControl />\n            <AudioPlayControl />\n            <AudioSeekForwardControl />\n\n            <div className=\"flex-1\" />\n\n            {showSpeed && <AudioSpeedControl />}\n            <AudioMuteControl />\n            <AudioVolumeControl />\n          </div>\n        </MediaPlayer>\n      )\n    }\n\n    // Default variant (compact bar)\n    return (\n      <MediaPlayer\n        ref={player}\n        src={src}\n        autoPlay={autoPlay}\n        muted={muted}\n        loop={loop}\n        viewType=\"audio\"\n        data-filled={filled ? \"\" : undefined}\n        style={filled ? { '--primary-foreground': 'var(--secondary-foreground)' } as Record<string, string> : undefined}\n        className={cn(\n          \"group/root group !flex w-full items-center gap-1.5 rounded-xl border border-border bg-card px-2 py-1.5 shadow-sm\",\n          className\n        )}\n        {...playerEvents}\n      >\n        <MediaProvider className=\"!hidden\" />\n\n        {/* Left controls */}\n        <AudioSeekBackwardControl />\n        <AudioPlayControl />\n        <AudioSeekForwardControl />\n\n        {/* Seek bar */}\n        <div className=\"flex-1 px-1\">\n          <AudioSeekBar />\n        </div>\n\n        {/* Time */}\n        <AudioTimeDisplay />\n\n        {/* Right controls */}\n        {showSpeed && <AudioSpeedControl />}\n        <AudioMuteControl />\n        <AudioVolumeControl />\n      </MediaPlayer>\n    )\n  }\n)\n"]}

package/dist/index.d.ts

@@ -26,7 +26,7 @@ export { ChatBubble, ChatBubbleProps, chatBubbleVariants } from './ui/chat-bubbl
 export { ChatMessage, ChatPanel, ChatPanelProps } from './ui/chat-panel.js';
 export { LikeDislike, LikeDislikeProps, LikeDislikeValue, likeDislikeVariants } from './ui/like-dislike.js';
 export { LiveWaiting, LiveWaitingProps } from './ui/live-waiting.js';
-export { AudioPlayer, AudioPlayerProps } from './ui/audio-player.js';
+export { AudioPlayer, AudioPlayerProps, AudioPlayerRef } from './ui/audio-player.js';
 export { CaptionTrack, VideoPlayer, VideoPlayerProps } from './ui/video-player.js';
 export { Toaster, cycleToast } from './ui/sonner.js';
 export { Alert, AlertAction, AlertClose, AlertDescription, AlertProps, AlertTitle, alertVariants } from './ui/alert.js';

package/dist/index.js

@@ -8,7 +8,7 @@ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 export { Fab, fabVariants } from './chunk-7NFHHOAE.js';
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-YJ4U7ISM.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './chunk-NOMLQHZS.js';
-export { AudioPlayer } from './chunk-UAHCRXAG.js';
+export { AudioPlayer } from './chunk-7NEORCES.js';
 export { VideoPlayer } from './chunk-MSQ6RORJ.js';
 export { Toaster, cycleToast } from './chunk-ELZCZ6ZH.js';
 export { Alert, AlertAction, AlertClose, AlertDescription, AlertTitle, alertVariants } from './chunk-7ZXAU2CD.js';

package/dist/ui/audio-player.d.ts

@@ -1,5 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
+interface AudioPlayerRef {
+    play(): void;
+    pause(): void;
+    readonly currentTime: number;
+    readonly duration: number;
+}
 interface AudioPlayerProps {
     /** URL do audio (mp3, ogg, m3u8) */
     src: string;
@@ -23,8 +29,12 @@ interface AudioPlayerProps {
     loop?: boolean;
     /** Exibir controle de velocidade (default: true — EdTech) */
     showSpeed?: boolean;
+    /** Callback com progresso do audio (currentTime em segundos, duration em segundos) */
+    onTimeUpdate?: (currentTime: number, duration: number) => void;
+    /** Callback disparado quando o audio termina */
+    onEnded?: () => void;
     className?: string;
 }
-declare function AudioPlayer({ src, title, subtitle, coverArt, coverArtAlt, variant, filled, autoPlay, muted, loop, showSpeed, className, }: AudioPlayerProps): react_jsx_runtime.JSX.Element;
+declare const AudioPlayer: React.ForwardRefExoticComponent<AudioPlayerProps & React.RefAttributes<AudioPlayerRef>>;
 
-export { AudioPlayer, type AudioPlayerProps };
+export { AudioPlayer, type AudioPlayerProps, type AudioPlayerRef };

package/dist/ui/audio-player.js

@@ -1,4 +1,4 @@
-export { AudioPlayer } from '../chunk-UAHCRXAG.js';
+export { AudioPlayer } from '../chunk-7NEORCES.js';
 import '../chunk-D4QCYBCD.js';
 import '../chunk-V7M2NHUO.js';
 import '../chunk-TYCPXAXF.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluencypassdevs/cycle",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "description": "Cycle Design System — UI component library by Fluencypass",
   "license": "MIT",
   "repository": {

package/dist/chunk-UAHCRXAG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ui/audio-player.tsx"],"names":[],"mappings":";;;;;;;;AA6DA,IAAM,eAAA,GACJ,+RAAA;AAGF,IAAM,eAAA,GACJ,8FAAA;AAEF,IAAM,gBAAA,GACJ,6DAAA;AAIF,SAAS,gBAAA,GAAmB;AAC1B,EAAA,MAAM,QAAA,GAAW,cAAc,QAAQ,CAAA;AACvC,EAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,eAAA,EACpB,QAAA,EAAA,QAAA,mBACC,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAM,IAAA,EAAM,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAC,WAAW,eAAA,EAAiB,CAAA,mBAExE,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAM,KAAA,EAAO,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAC,SAAA,EAAW,eAAA,EAAiB,CAAA,EAE7E,CAAA;AAEJ;AAEA,SAAS,wBAAA,GAA2B;AAClC,EAAA,2BACG,UAAA,EAAA,EAAW,SAAA,EAAW,eAAA,EAAiB,OAAA,EAAS,KAC/C,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAM,SAAA,EAAW,MAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAC,SAAA,EAAW,kBAAkB,CAAA,EAChF,CAAA;AAEJ;AAEA,SAAS,uBAAA,GAA0B;AACjC,EAAA,2BACG,UAAA,EAAA,EAAW,SAAA,EAAW,eAAA,EAAiB,OAAA,EAAS,IAC/C,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAM,QAAA,EAAU,MAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAC,SAAA,EAAW,kBAAkB,CAAA,EAC/E,CAAA;AAEJ;AAEA,SAAS,gBAAA,GAAmB;AAC1B,EAAA,MAAM,MAAA,GAAS,cAAc,QAAQ,CAAA;AACrC,EAAA,MAAM,OAAA,GAAU,cAAc,OAAO,CAAA;AAErC,EAAA,MAAM,OAAO,OAAA,IAAW,MAAA,KAAW,IAAI,OAAA,GAAU,MAAA,GAAS,MAAM,OAAA,GAAU,OAAA;AAE1E,EAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,eAAA,EACrB,8BAAC,SAAA,EAAA,EAAU,IAAA,EAAM,IAAA,EAAM,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAC,SAAA,EAAW,iBAAiB,CAAA,EAC1E,CAAA;AAEJ;AAEA,SAAS,kBAAA,GAAqB;AAC5B,EAAA,uBACE,IAAA,CAAC,YAAA,CAAa,IAAA,EAAb,EAAkB,WAAU,+GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,YAAA,CAAa,KAAA,EAAb,EAAmB,SAAA,EAAU,kGAAA,EAC5B,QAAA,kBAAA,GAAA,CAAC,YAAA,CAAa,SAAA,EAAb,EAAuB,SAAA,EAAU,+GAAA,EAAgH,CAAA,EACpJ,CAAA;AAAA,oBACA,GAAA,CAAC,YAAA,CAAa,KAAA,EAAb,EAAmB,WAAU,2PAAA,EAA4P;AAAA,GAAA,EAC5R,CAAA;AAEJ;AAEA,SAAS,YAAA,GAAe;AACtB,EAAA,uBACE,IAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,WAAU,uGAAA,EACzB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,SAAA,EAAU,kGAAA,EAC1B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,CAAW,QAAA,EAAX,EAAoB,SAAA,EAAU,mIAAA,EAAoI,CAAA;AAAA,sBACnK,GAAA,CAAC,UAAA,CAAW,SAAA,EAAX,EAAqB,WAAU,+GAAA,EAAgH;AAAA,KAAA,EAClJ,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,WAAU,2PAAA,EAA4P,CAAA;AAAA,oBAGxR,GAAA,CAAC,UAAA,CAAW,OAAA,EAAX,EAAmB,SAAA,EAAU,qHAAA,EAC5B,QAAA,kBAAA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,SAAA,EAAU,+GAAA,EAAgH,CAAA,EAC9I;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,gBAAA,GAAmB;AAC1B,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6HAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAK,SAAA,EAAU,CAAA;AAAA,oBACrB,GAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,oBACP,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,UAAA,EAAW;AAAA,GAAA,EACxB,CAAA;AAEJ;AAEA,SAAS,iBAAA,GAAoB;AAC3B,EAAA,MAAM,YAAA,GAAe,cAAc,cAAc,CAAA;AACjD,EAAA,MAAM,SAAS,cAAA,EAAe;AAC9B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAU,eAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,KAAA,GAAQ,CAAC,GAAA,EAAK,IAAA,EAAM,GAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAE/C,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,MAAM,OAAA,CAAQ,CAAC,IAAI,CAAA;AAAA,QAC5B,SAAA,EAAW,eAAA;AAAA,QAEV,2BAAiB,CAAA,mBAChB,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAM,OAAO,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAC,WAAW,gBAAA,EAAkB,CAAA,mBAE1E,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,6FAAA,EAA+F,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,UAAa;AAAA,SAAA,EAAC;AAAA;AAAA,KAEjI;AAAA,IAEC,wBACC,IAAA,CAAA,QAAA,EAAA,EAEE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,oBAAA,EAAqB,SAAS,MAAM,OAAA,CAAQ,KAAK,CAAA,EAAG,CAAA;AAAA,0BAElE,KAAA,EAAA,EAAI,SAAA,EAAU,iHACZ,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,qBACV,IAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UAEC,IAAA,EAAK,QAAA;AAAA,UACL,SAAS,MAAM;AACb,YAAA,MAAA,CAAO,mBAAmB,IAAI,CAAA;AAC9B,YAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,UACf,CAAA;AAAA,UACA,SAAA,EAAW,EAAA;AAAA,YACT,0JAAA;AAAA,YACA,iBAAiB,IAAA,IAAQ;AAAA,WAC3B;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yCAAA,EACb,QAAA,EAAA,YAAA,KAAiB,wBAAQ,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAM,KAAA,EAAO,MAAK,KAAA,EAAM,UAAA,EAAU,IAAA,EAAC,SAAA,EAAU,2BAA0B,CAAA,EAC9G,CAAA;AAAA,4BACA,GAAA,CAAC,UAAK,SAAA,EAAU,WAAA,EAAa,mBAAS,CAAA,GAAI,QAAA,GAAW,CAAA,EAAG,IAAI,CAAA,CAAA,CAAA,EAAI;AAAA;AAAA,SAAA;AAAA,QAd3D;AAAA,OAgBR,CAAA,EACH;AAAA,KAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAIO,SAAS,WAAA,CAAY;AAAA,EAC1B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,EAAA;AAAA,EACd,OAAA,GAAU,SAAA;AAAA,EACV,MAAA,GAAS,KAAA;AAAA,EACT,QAAA,GAAW,KAAA;AAAA,EACX,KAAA,GAAQ,KAAA;AAAA,EACR,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,IAAA;AAAA,EACZ;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,MAAA,GAAe,aAA4B,IAAI,CAAA;AAErD,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,uBACE,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,MAAA;AAAA,QACL,GAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA,EAAS,OAAA;AAAA,QACT,aAAA,EAAa,SAAS,EAAA,GAAK,MAAA;AAAA,QAC3B,KAAA,EAAO,MAAA,GAAS,EAAE,sBAAA,EAAwB,+BAA8B,GAA8B,MAAA;AAAA,QACtG,SAAA,EAAW,EAAA;AAAA,UACT,6FAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,aAAA,EAAA,EAAc,WAAU,SAAA,EAAU,CAAA;AAAA,0BAGnC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kCAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,oBACC,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,QAAA;AAAA,gBACL,GAAA,EAAK,WAAA;AAAA,gBACL,SAAA,EAAU;AAAA;AAAA,aACZ;AAAA,4BAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,OAAE,SAAA,EAAW,EAAA;AAAA,gBACZ,mCAAA;AAAA,gBACA,SAAS,yBAAA,GAA4B;AAAA,iBACnC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,cACT,QAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,EAAA;AAAA,gBACZ,6BAAA;AAAA,gBACA,SAAS,4BAAA,GAA+B;AAAA,iBACtC,QAAA,EAAA,QAAA,EAAS;AAAA,aAAA,EAEjB;AAAA,WAAA,EACF,CAAA;AAAA,8BAGC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EACb,QAAA,kBAAA,GAAA,CAAC,gBAAa,CAAA,EAChB,CAAA;AAAA,0BAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6DAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA;AAAA,cACd,+CAAA;AAAA,cACA,SAAS,4BAAA,GAA+B;AAAA,aAC1C,EACE,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,WAAU,CAAA,EACvB,CAAA;AAAA,4BACA,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA;AAAA,cACd,+CAAA;AAAA,cACA,SAAS,4BAAA,GAA+B;AAAA,aAC1C,EACE,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,YAAW,CAAA,EACxB;AAAA,WAAA,EACF,CAAA;AAAA,0BAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,wBAAA,EAAA,EAAyB,CAAA;AAAA,gCACzB,gBAAA,EAAA,EAAiB,CAAA;AAAA,gCACjB,uBAAA,EAAA,EAAwB,CAAA;AAAA,4BAEzB,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,QAAA,EAAS,CAAA;AAAA,YAEvB,SAAA,wBAAc,iBAAA,EAAA,EAAkB,CAAA;AAAA,gCAChC,gBAAA,EAAA,EAAiB,CAAA;AAAA,gCACjB,kBAAA,EAAA,EAAmB;AAAA,WAAA,EACtB;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AAGA,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,GAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA,EAAS,OAAA;AAAA,MACT,aAAA,EAAa,SAAS,EAAA,GAAK,MAAA;AAAA,MAC3B,KAAA,EAAO,MAAA,GAAS,EAAE,sBAAA,EAAwB,+BAA8B,GAA8B,MAAA;AAAA,MACtG,SAAA,EAAW,EAAA;AAAA,QACT,kHAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,WAAU,SAAA,EAAU,CAAA;AAAA,4BAGlC,wBAAA,EAAA,EAAyB,CAAA;AAAA,4BACzB,gBAAA,EAAA,EAAiB,CAAA;AAAA,4BACjB,uBAAA,EAAA,EAAwB,CAAA;AAAA,4BAGxB,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACb,QAAA,kBAAA,GAAA,CAAC,gBAAa,CAAA,EAChB,CAAA;AAAA,4BAGC,gBAAA,EAAA,EAAiB,CAAA;AAAA,QAGjB,SAAA,wBAAc,iBAAA,EAAA,EAAkB,CAAA;AAAA,4BAChC,gBAAA,EAAA,EAAiB,CAAA;AAAA,4BACjB,kBAAA,EAAA,EAAmB;AAAA;AAAA;AAAA,GACtB;AAEJ","file":"chunk-UAHCRXAG.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  MediaPlayer,\n  MediaProvider,\n  TimeSlider,\n  VolumeSlider,\n  Time,\n  PlayButton,\n  MuteButton,\n  SeekButton,\n  useMediaState,\n  useMediaRemote,\n  type MediaPlayerInstance,\n} from \"@vidstack/react\"\nimport \"@vidstack/react/player/styles/base.css\"\nimport {\n  Play,\n  Pause,\n  Volume2,\n  VolumeX,\n  Volume1,\n  RotateCcw,\n  RotateCw,\n  Gauge,\n  Check,\n} from \"lucide-react\"\nimport { CycleIcon } from \"@/components/icons\"\nimport { cn } from \"@/lib/utils\"\n\n/* ─── Types ─── */\n\nexport interface AudioPlayerProps {\n  /** URL do audio (mp3, ogg, m3u8) */\n  src: string\n  /** Nome da track/aula */\n  title: string\n  /** Subtitulo / nome do curso */\n  subtitle?: string\n  /** URL da imagem de capa (variante card) */\n  coverArt?: string\n  /** Alt text da imagem de capa */\n  coverArtAlt?: string\n  /** Variante de layout */\n  variant?: \"default\" | \"card\"\n  /** Icones, textos e sliders em primary-foreground — usar com .theme-* */\n  filled?: boolean\n  /** Iniciar automaticamente */\n  autoPlay?: boolean\n  /** Iniciar mutado */\n  muted?: boolean\n  /** Repetir ao terminar */\n  loop?: boolean\n  /** Exibir controle de velocidade (default: true — EdTech) */\n  showSpeed?: boolean\n  className?: string\n}\n\n/* ─── Shared styles ─── */\n\nconst controlBtnClass =\n  \"group/btn inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring group-data-[filled]:text-primary-foreground group-data-[filled]:hover:bg-primary-foreground/10\"\n\n/** Play, Pause e Volume usam icones filled (solid) — igual YouTube */\nconst filledIconClass =\n  \"fill-current !stroke-transparent text-foreground group-data-[filled]:text-primary-foreground\"\n\nconst outlineIconClass =\n  \"text-foreground group-data-[filled]:text-primary-foreground\"\n\n/* ─── Sub-components ─── */\n\nfunction AudioPlayControl() {\n  const isPaused = useMediaState(\"paused\")\n  return (\n    <PlayButton className={controlBtnClass}>\n      {isPaused ? (\n        <CycleIcon icon={Play} size=\"sm\" decorative className={filledIconClass} />\n      ) : (\n        <CycleIcon icon={Pause} size=\"sm\" decorative className={filledIconClass} />\n      )}\n    </PlayButton>\n  )\n}\n\nfunction AudioSeekBackwardControl() {\n  return (\n    <SeekButton className={controlBtnClass} seconds={-10}>\n      <CycleIcon icon={RotateCcw} size=\"sm\" decorative className={outlineIconClass} />\n    </SeekButton>\n  )\n}\n\nfunction AudioSeekForwardControl() {\n  return (\n    <SeekButton className={controlBtnClass} seconds={10}>\n      <CycleIcon icon={RotateCw} size=\"sm\" decorative className={outlineIconClass} />\n    </SeekButton>\n  )\n}\n\nfunction AudioMuteControl() {\n  const volume = useMediaState(\"volume\")\n  const isMuted = useMediaState(\"muted\")\n\n  const Icon = isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2\n\n  return (\n    <MuteButton className={controlBtnClass}>\n      <CycleIcon icon={Icon} size=\"sm\" decorative className={filledIconClass} />\n    </MuteButton>\n  )\n}\n\nfunction AudioVolumeControl() {\n  return (\n    <VolumeSlider.Root className=\"group relative hidden h-9 w-20 cursor-pointer touch-none select-none items-center outline-none sm:inline-flex\">\n      <VolumeSlider.Track className=\"relative h-[4px] w-full rounded-full bg-accent group-data-[filled]/root:bg-primary-foreground/30\">\n        <VolumeSlider.TrackFill className=\"absolute h-full w-[var(--slider-fill)] rounded-full bg-primary group-data-[filled]/root:bg-primary-foreground\" />\n      </VolumeSlider.Track>\n      <VolumeSlider.Thumb className=\"absolute left-[var(--slider-fill)] top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:opacity-100 group-data-[filled]/root:bg-primary-foreground\" />\n    </VolumeSlider.Root>\n  )\n}\n\nfunction AudioSeekBar() {\n  return (\n    <TimeSlider.Root className=\"group relative inline-flex h-9 w-full cursor-pointer touch-none select-none items-center outline-none\">\n      <TimeSlider.Track className=\"relative h-[4px] w-full rounded-full bg-accent group-data-[filled]/root:bg-primary-foreground/30\">\n        <TimeSlider.Progress className=\"absolute h-full w-[var(--slider-progress)] rounded-full bg-accent-foreground/20 group-data-[filled]/root:bg-primary-foreground/20\" />\n        <TimeSlider.TrackFill className=\"absolute h-full w-[var(--slider-fill)] rounded-full bg-primary group-data-[filled]/root:bg-primary-foreground\" />\n      </TimeSlider.Track>\n      <TimeSlider.Thumb className=\"absolute left-[var(--slider-fill)] top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:opacity-100 group-data-[filled]/root:bg-primary-foreground\" />\n\n      {/* Time preview on hover */}\n      <TimeSlider.Preview className=\"pointer-events-none flex flex-col items-center opacity-0 transition-opacity duration-200 data-[visible]:opacity-100\">\n        <TimeSlider.Value className=\"rounded bg-popover px-1.5 py-0.5 text-[11px] font-mono text-popover-foreground border border-border shadow-sm\" />\n      </TimeSlider.Preview>\n    </TimeSlider.Root>\n  )\n}\n\nfunction AudioTimeDisplay() {\n  return (\n    <div className=\"flex items-center gap-1 text-xs font-mono text-muted-foreground tabular-nums group-data-[filled]:text-primary-foreground/80\">\n      <Time type=\"current\" />\n      <span>/</span>\n      <Time type=\"duration\" />\n    </div>\n  )\n}\n\nfunction AudioSpeedControl() {\n  const playbackRate = useMediaState(\"playbackRate\")\n  const remote = useMediaRemote()\n  const [open, setOpen] = React.useState(false)\n\n  const rates = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen(!open)}\n        className={controlBtnClass}\n      >\n        {playbackRate === 1 ? (\n          <CycleIcon icon={Gauge} size=\"sm\" decorative className={outlineIconClass} />\n        ) : (\n          <span className=\"text-xs font-mono font-semibold text-foreground group-data-[filled]:text-primary-foreground\">{playbackRate}x</span>\n        )}\n      </button>\n\n      {open && (\n        <>\n          {/* Backdrop to close */}\n          <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\n\n          <div className=\"absolute bottom-full right-0 z-50 mb-2 min-w-[120px] rounded-lg border border-border bg-popover p-1 shadow-lg\">\n            {rates.map((rate) => (\n              <button\n                key={rate}\n                type=\"button\"\n                onClick={() => {\n                  remote.changePlaybackRate(rate)\n                  setOpen(false)\n                }}\n                className={cn(\n                  \"flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm text-popover-foreground/80 transition-colors hover:bg-accent hover:text-popover-foreground\",\n                  playbackRate === rate && \"text-popover-foreground font-medium\"\n                )}\n              >\n                <span className=\"size-4 flex items-center justify-center\">\n                  {playbackRate === rate && <CycleIcon icon={Check} size=\"2xs\" decorative className=\"text-popover-foreground\" />}\n                </span>\n                <span className=\"font-mono\">{rate === 1 ? \"Normal\" : `${rate}x`}</span>\n              </button>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n\n/* ─── Main component ─── */\n\nexport function AudioPlayer({\n  src,\n  title,\n  subtitle,\n  coverArt,\n  coverArtAlt = \"\",\n  variant = \"default\",\n  filled = false,\n  autoPlay = false,\n  muted = false,\n  loop = false,\n  showSpeed = true,\n  className,\n}: AudioPlayerProps) {\n  const player = React.useRef<MediaPlayerInstance>(null)\n\n  if (variant === \"card\") {\n    return (\n      <MediaPlayer\n        ref={player}\n        src={src}\n        autoPlay={autoPlay}\n        muted={muted}\n        loop={loop}\n        viewType=\"audio\"\n        data-filled={filled ? \"\" : undefined}\n        style={filled ? { '--primary-foreground': 'var(--secondary-foreground)' } as Record<string, string> : undefined}\n        className={cn(\n          \"group/root group !block w-full rounded-xl border border-border bg-card p-4 shadow-sm md:p-6\",\n          className\n        )}\n      >\n        <MediaProvider className=\"!hidden\" />\n\n        {/* Top: cover art + text */}\n        <div className=\"flex gap-4 mb-4 md:gap-5 md:mb-6\">\n          {coverArt && (\n            <img\n              src={coverArt}\n              alt={coverArtAlt}\n              className=\"size-16 shrink-0 rounded-lg object-cover bg-muted md:size-24 md:rounded-xl\"\n            />\n          )}\n          <div className=\"flex min-w-0 flex-col justify-center\">\n            <p className={cn(\n              \"truncate heading-md md:heading-xl\",\n              filled ? \"text-primary-foreground\" : \"text-card-foreground\"\n            )}>{title}</p>\n            {subtitle && (\n              <p className={cn(\n                \"truncate body-md md:body-lg\",\n                filled ? \"text-primary-foreground/70\" : \"text-muted-foreground\"\n              )}>{subtitle}</p>\n            )}\n          </div>\n        </div>\n\n        {/* Seek bar */}\n        <div className=\"flex w-full items-center\">\n          <AudioSeekBar />\n        </div>\n\n        {/* Time */}\n        <div className=\"flex items-center justify-between px-0.5 -mt-1 mb-1 md:mb-2\">\n          <div className={cn(\n            \"text-[11px] font-mono tabular-nums md:text-xs\",\n            filled ? \"text-primary-foreground/80\" : \"text-muted-foreground\"\n          )}>\n            <Time type=\"current\" />\n          </div>\n          <div className={cn(\n            \"text-[11px] font-mono tabular-nums md:text-xs\",\n            filled ? \"text-primary-foreground/80\" : \"text-muted-foreground\"\n          )}>\n            <Time type=\"duration\" />\n          </div>\n        </div>\n\n        {/* Controls */}\n        <div className=\"flex items-center gap-1 md:gap-2\">\n          <AudioSeekBackwardControl />\n          <AudioPlayControl />\n          <AudioSeekForwardControl />\n\n          <div className=\"flex-1\" />\n\n          {showSpeed && <AudioSpeedControl />}\n          <AudioMuteControl />\n          <AudioVolumeControl />\n        </div>\n      </MediaPlayer>\n    )\n  }\n\n  // Default variant (compact bar)\n  return (\n    <MediaPlayer\n      ref={player}\n      src={src}\n      autoPlay={autoPlay}\n      muted={muted}\n      loop={loop}\n      viewType=\"audio\"\n      data-filled={filled ? \"\" : undefined}\n      style={filled ? { '--primary-foreground': 'var(--secondary-foreground)' } as Record<string, string> : undefined}\n      className={cn(\n        \"group/root group !flex w-full items-center gap-1.5 rounded-xl border border-border bg-card px-2 py-1.5 shadow-sm\",\n        className\n      )}\n    >\n      <MediaProvider className=\"!hidden\" />\n\n      {/* Left controls */}\n      <AudioSeekBackwardControl />\n      <AudioPlayControl />\n      <AudioSeekForwardControl />\n\n      {/* Seek bar */}\n      <div className=\"flex-1 px-1\">\n        <AudioSeekBar />\n      </div>\n\n      {/* Time */}\n      <AudioTimeDisplay />\n\n      {/* Right controls */}\n      {showSpeed && <AudioSpeedControl />}\n      <AudioMuteControl />\n      <AudioVolumeControl />\n    </MediaPlayer>\n  )\n}\n"]}