analytica-frontend-lib 1.0.57 → 1.0.58

package/dist/Card/index.d.mts

@@ -81,5 +81,23 @@ interface CardForumProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
     valueProfile?: T;
 }
 declare const CardForum: react.ForwardRefExoticComponent<CardForumProps<unknown> & react.RefAttributes<HTMLDivElement>>;
+interface CardAudioProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    title?: string;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onAudioTimeUpdate?: (currentTime: number, duration: number) => void;
+    loop?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    tracks?: Array<{
+        kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+        src: string;
+        srcLang: string;
+        label: string;
+        default?: boolean;
+    }>;
+}
+declare const CardAudio: react.ForwardRefExoticComponent<CardAudioProps & react.RefAttributes<HTMLDivElement>>;
 
-export { CardActivesResults, CardForum, CardPerformance, CardProgress, CardQuestions, CardResults, CardSettings, CardStatus, CardSupport, CardTopic };
+export { CardActivesResults, CardAudio, CardForum, CardPerformance, CardProgress, CardQuestions, CardResults, CardSettings, CardStatus, CardSupport, CardTopic };

package/dist/Card/index.d.ts

@@ -81,5 +81,23 @@ interface CardForumProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
     valueProfile?: T;
 }
 declare const CardForum: react.ForwardRefExoticComponent<CardForumProps<unknown> & react.RefAttributes<HTMLDivElement>>;
+interface CardAudioProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    title?: string;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onAudioTimeUpdate?: (currentTime: number, duration: number) => void;
+    loop?: boolean;
+    preload?: 'none' | 'metadata' | 'auto';
+    tracks?: Array<{
+        kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+        src: string;
+        srcLang: string;
+        label: string;
+        default?: boolean;
+    }>;
+}
+declare const CardAudio: react.ForwardRefExoticComponent<CardAudioProps & react.RefAttributes<HTMLDivElement>>;
 
-export { CardActivesResults, CardForum, CardPerformance, CardProgress, CardQuestions, CardResults, CardSettings, CardStatus, CardSupport, CardTopic };
+export { CardActivesResults, CardAudio, CardForum, CardPerformance, CardProgress, CardQuestions, CardResults, CardSettings, CardStatus, CardSupport, CardTopic };

package/dist/Card/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Card_exports = {};
 __export(Card_exports, {
   CardActivesResults: () => CardActivesResults,
+  CardAudio: () => CardAudio,
   CardForum: () => CardForum,
   CardPerformance: () => CardPerformance,
   CardProgress: () => CardProgress,
@@ -850,7 +851,7 @@ var CardProgress = (0, import_react.forwardRef)(
       {
         ref,
         className: `
-          w-full flex border border-border-50 bg-background rounded-xl
+          w-full flex border border-border-50 bg-background rounded-xl cursor-pointer
           ${isHorizontal ? "flex-row h-20" : "flex-col"}
           ${className}
         `,
@@ -900,7 +901,7 @@ var CardTopic = (0, import_react.forwardRef)(
       "div",
       {
         ref,
-        className: `w-full py-2 px-4 flex flex-col justify-center gap-2 bg-background border border-border-50 rounded-xl min-h-20 ${className}`,
+        className: `cursor-pointer w-full py-2 px-4 flex flex-col justify-center gap-2 bg-background border border-border-50 rounded-xl min-h-20 ${className}`,
         ...props,
         children: [
           subHead && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react.Fragment, { children: [
@@ -950,7 +951,7 @@ var CardPerformance = (0, import_react.forwardRef)(
           !hasProgress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_phosphor_react2.CaretRight,
             {
-              className: "size-4.5 text-text-800",
+              className: "size-4.5 text-text-800 cursor-pointer",
               "data-testid": "caret-icon",
               onClick: () => onClickButton?.(valueButton)
             }
@@ -1034,7 +1035,7 @@ var CardResults = (0, import_react.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { className: "min-w-6 min-h-6 text-text-800" })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer" })
         ]
       }
     );
@@ -1076,7 +1077,7 @@ var CardStatus = (0, import_react.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { className: "min-w-6 min-h-6 text-text-800" })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer" })
         ]
       }
     );
@@ -1093,7 +1094,7 @@ var CardSettings = (0, import_react.forwardRef)(
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "w-full text-md", children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { size: 24 })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { size: 24, className: "cursor-pointer" })
         ]
       }
     );
@@ -1120,7 +1121,7 @@ var CardSupport = (0, import_react.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { className: "text-text-800", size: 24 })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.CaretRight, { className: "text-text-800 cursor-pointer", size: 24 })
         ]
       }
     );
@@ -1189,9 +1190,247 @@ var CardForum = (0, import_react.forwardRef)(
     );
   }
 );
+var CardAudio = (0, import_react.forwardRef)(
+  ({
+    src,
+    title,
+    onPlay,
+    onPause,
+    onEnded,
+    onAudioTimeUpdate,
+    loop = false,
+    preload = "metadata",
+    tracks,
+    className,
+    ...props
+  }, ref) => {
+    const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
+    const [currentTime, setCurrentTime] = (0, import_react.useState)(0);
+    const [duration, setDuration] = (0, import_react.useState)(0);
+    const [volume, setVolume] = (0, import_react.useState)(1);
+    const [showVolumeControl, setShowVolumeControl] = (0, import_react.useState)(false);
+    const audioRef = (0, import_react.useRef)(null);
+    const formatTime = (time) => {
+      const minutes = Math.floor(time / 60);
+      const seconds = Math.floor(time % 60);
+      return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+    };
+    const handlePlayPause = () => {
+      if (isPlaying) {
+        audioRef.current?.pause();
+        setIsPlaying(false);
+        onPause?.();
+      } else {
+        audioRef.current?.play();
+        setIsPlaying(true);
+        onPlay?.();
+      }
+    };
+    const handleTimeUpdate = () => {
+      const current = audioRef.current?.currentTime ?? 0;
+      const total = audioRef.current?.duration ?? 0;
+      setCurrentTime(current);
+      setDuration(total);
+      onAudioTimeUpdate?.(current, total);
+    };
+    const handleLoadedMetadata = () => {
+      setDuration(audioRef.current?.duration ?? 0);
+    };
+    const handleEnded = () => {
+      setIsPlaying(false);
+      setCurrentTime(0);
+      onEnded?.();
+    };
+    const handleProgressClick = (e) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const width = rect.width;
+      const percentage = clickX / width;
+      const newTime = percentage * duration;
+      if (audioRef.current) {
+        audioRef.current.currentTime = newTime;
+      }
+      setCurrentTime(newTime);
+    };
+    const handleVolumeChange = (e) => {
+      const newVolume = parseFloat(e.target.value);
+      setVolume(newVolume);
+      if (audioRef.current) {
+        audioRef.current.volume = newVolume;
+      }
+    };
+    const toggleVolumeControl = () => {
+      setShowVolumeControl(!showVolumeControl);
+    };
+    const getVolumeIcon = () => {
+      if (volume === 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.SpeakerSimpleX, {});
+      }
+      if (volume < 0.5) {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.SpeakerLow, {});
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.SpeakerHigh, {});
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-auto h-14 p-4 flex flex-row bg-background items-center gap-2 ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "audio",
+            {
+              ref: audioRef,
+              src,
+              loop,
+              preload,
+              onTimeUpdate: handleTimeUpdate,
+              onLoadedMetadata: handleLoadedMetadata,
+              onEnded: handleEnded,
+              "data-testid": "audio-element",
+              "aria-label": title,
+              children: tracks ? tracks.map((track) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "track",
+                {
+                  kind: track.kind,
+                  src: track.src,
+                  srcLang: track.srcLang,
+                  label: track.label,
+                  default: track.default
+                },
+                track.src
+              )) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "track",
+                {
+                  kind: "captions",
+                  src: "data:text/vtt;base64,",
+                  srcLang: "pt",
+                  label: "Sem legendas dispon\xEDveis"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handlePlayPause,
+              disabled: !src,
+              className: "cursor-pointer text-text-950 hover:text-primary-600 disabled:text-text-400 disabled:cursor-not-allowed",
+              "aria-label": isPlaying ? "Pausar" : "Reproduzir",
+              children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" })
+              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.Play, { size: 24 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "w-full h-2 bg-border-100 rounded-full cursor-pointer",
+              onClick: handleProgressClick,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleProgressClick(
+                    e
+                  );
+                }
+              },
+              "aria-label": "Barra de progresso do \xE1udio",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  className: "h-full bg-primary-600 rounded-full transition-all duration-100",
+                  style: {
+                    width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(duration) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: toggleVolumeControl,
+                className: "cursor-pointer text-text-950 hover:text-primary-600",
+                "aria-label": "Controle de volume",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
+              }
+            ),
+            showVolumeControl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500",
+                onKeyDown: (e) => {
+                  if (e.key === "Escape") {
+                    setShowVolumeControl(false);
+                  }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "0",
+                    max: "1",
+                    step: "0.1",
+                    value: volume,
+                    onChange: handleVolumeChange,
+                    onKeyDown: (e) => {
+                      if (e.key === "ArrowUp" || e.key === "ArrowRight") {
+                        e.preventDefault();
+                        const newVolume = Math.min(
+                          1,
+                          Math.round((volume + 0.1) * 10) / 10
+                        );
+                        setVolume(newVolume);
+                        if (audioRef.current) audioRef.current.volume = newVolume;
+                      } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
+                        e.preventDefault();
+                        const newVolume = Math.max(
+                          0,
+                          Math.round((volume - 0.1) * 10) / 10
+                        );
+                        setVolume(newVolume);
+                        if (audioRef.current) audioRef.current.volume = newVolume;
+                      }
+                    },
+                    className: "w-20 h-2 bg-border-100 rounded-lg appearance-none cursor-pointer",
+                    style: {
+                      background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${volume * 100}%, #e5e7eb ${volume * 100}%, #e5e7eb 100%)`
+                    },
+                    "aria-label": "Volume",
+                    "aria-valuenow": Math.round(volume * 100),
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_phosphor_react2.DotsThreeVertical,
+            {
+              size: 24,
+              className: "text-text-950 cursor-pointer hover:text-primary-600"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CardActivesResults,
+  CardAudio,
   CardForum,
   CardPerformance,
   CardProgress,