analytica-frontend-lib 1.0.57 → 1.0.59

package/dist/index.mjs

@@ -3695,9 +3695,16 @@ var Menu = forwardRef11(
     useEffect5(() => {
       setValue(propValue ?? defaultValue);
     }, [defaultValue, propValue, setValue]);
+    const onValueChangeRef = useRef4(onValueChange);
+    const isInitializedRef = useRef4(false);
+    onValueChangeRef.current = onValueChange;
     useEffect5(() => {
-      onValueChange?.(value);
-    }, [value, onValueChange]);
+      if (isInitializedRef.current) {
+        onValueChangeRef.current?.(value);
+      } else {
+        isInitializedRef.current = true;
+      }
+    }, [value]);
     const baseClasses = "w-full py-2 px-6 flex flex-row items-center justify-center";
     const variantClasses = VARIANT_CLASSES5[variant];
     return /* @__PURE__ */ jsx25(
@@ -3802,9 +3809,9 @@ var MenuItem = forwardRef11(
         {
           "data-variant": "breadcrumb",
           className: `
-            w-full p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs 
+            w-full p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
             focus:outline-none focus:border-indicator-info focus:border-2
-            ${selectedValue === value ? "text-primary-950" : "text-text-600"}
+            ${selectedValue === value ? "text-text-950" : "text-text-600"}
             ${className ?? ""}
           `,
           ...commonProps,
@@ -3812,8 +3819,8 @@ var MenuItem = forwardRef11(
             "span",
             {
               className: `
-              border-b border-text-600 hover:border-primary-600 text-inherit
-              ${selectedValue === value ? "border-b-primary-950" : "border-b-primary-600"}
+              border-b border-text-600 hover:border-primary-600 text-inherit text-xs
+              ${selectedValue === value ? "border-b-0 font-bold" : "border-b-primary-600"}
             `,
               children
             }
@@ -3934,14 +3941,76 @@ var injectStore3 = (children, store) => Children3.map(children, (child) => {
 var Menu_default = Menu;
 
 // src/components/Card/Card.tsx
-import { forwardRef as forwardRef12, Fragment as Fragment4 } from "react";
+import {
+  forwardRef as forwardRef12,
+  Fragment as Fragment4,
+  useState as useState8,
+  useRef as useRef5
+} from "react";
 import {
   CaretRight as CaretRight2,
   ChatCircleText,
   CheckCircle as CheckCircle3,
+  DotsThreeVertical,
+  Play,
+  SpeakerHigh,
+  SpeakerLow,
+  SpeakerSimpleX,
   XCircle as XCircle2
 } from "phosphor-react";
 import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+var CARD_BASE_CLASSES = {
+  default: "w-full bg-background border border-border-50 rounded-xl",
+  compact: "w-full bg-background border border-border-50 rounded-lg",
+  minimal: "w-full bg-background border border-border-100 rounded-md"
+};
+var CARD_PADDING_CLASSES = {
+  none: "",
+  small: "p-2",
+  medium: "p-4",
+  large: "p-6"
+};
+var CARD_MIN_HEIGHT_CLASSES = {
+  none: "",
+  small: "min-h-16",
+  medium: "min-h-20",
+  large: "min-h-24"
+};
+var CARD_LAYOUT_CLASSES = {
+  horizontal: "flex flex-row",
+  vertical: "flex flex-col"
+};
+var CARD_CURSOR_CLASSES = {
+  default: "",
+  pointer: "cursor-pointer"
+};
+var CardBase = forwardRef12(
+  ({
+    children,
+    variant = "default",
+    layout = "horizontal",
+    padding = "medium",
+    minHeight = "medium",
+    cursor = "default",
+    className = "",
+    ...props
+  }, ref) => {
+    const baseClasses = CARD_BASE_CLASSES[variant];
+    const paddingClasses = CARD_PADDING_CLASSES[padding];
+    const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
+    const layoutClasses = CARD_LAYOUT_CLASSES[layout];
+    const cursorClasses = CARD_CURSOR_CLASSES[cursor];
+    const combinedClasses = [
+      baseClasses,
+      paddingClasses,
+      minHeightClasses,
+      layoutClasses,
+      cursorClasses,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx26("div", { ref, className: combinedClasses, ...props, children });
+  }
+);
 var ACTION_CARD_CLASSES = {
   warning: "bg-warning-background",
   success: "bg-success-300",
@@ -4004,7 +4073,7 @@ var CardActivesResults = forwardRef12(
                     children: icon
                   }
                 ),
-                /* @__PURE__ */ jsx26("p", { className: "text-text-800 font-medium uppercase text-2xs", children: title }),
+                /* @__PURE__ */ jsx26(Text_default, { size: "2xs", weight: "medium", className: "text-text-800 uppercase", children: title }),
                 /* @__PURE__ */ jsx26("p", { className: `text-lg font-bold ${actionSubTitleClasses}`, children: subTitle })
               ]
             }
@@ -4037,13 +4106,13 @@ var CardQuestions = forwardRef12(
     const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
     const buttonLabel = isDone ? "Ver Quest\xE3o" : "Responder";
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         ref,
-        className: `
-          w-full flex flex-row justify-between rounded-xl p-4 gap-4 bg-background border border-border-50
-          ${className}
-        `,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "medium",
+        className: `justify-between gap-4 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsxs21("section", { className: "flex flex-col gap-1", children: [
@@ -4103,35 +4172,48 @@ var CardProgress = forwardRef12(
             /* @__PURE__ */ jsx26("p", { className: "text-text-600", children: endDate })
           ] })
         ] }),
-        /* @__PURE__ */ jsx26(
-          ProgressBar_default,
-          {
-            size: "medium",
-            showPercentage: true,
-            value: progress,
-            "data-testid": "progress-bar"
-          }
-        )
+        /* @__PURE__ */ jsxs21("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
+          /* @__PURE__ */ jsx26(
+            ProgressBar_default,
+            {
+              size: "small",
+              value: progress,
+              "data-testid": "progress-bar"
+            }
+          ),
+          /* @__PURE__ */ jsxs21(
+            Text_default,
+            {
+              size: "xs",
+              weight: "medium",
+              className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+              children: [
+                Math.round(progress),
+                "%"
+              ]
+            }
+          )
+        ] })
       ] }),
       vertical: /* @__PURE__ */ jsx26("p", { className: "text-sm text-text-800", children: subhead })
     };
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         ref,
-        className: `
-          w-full flex border border-border-50 bg-background rounded-xl
-          ${isHorizontal ? "flex-row h-20" : "flex-col"}
-          ${className}
-        `,
+        layout: isHorizontal ? "horizontal" : "vertical",
+        padding: "none",
+        minHeight: "medium",
+        cursor: "pointer",
+        className: `${isHorizontal ? "h-20" : ""} ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsx26(
             "div",
             {
               className: `
-            flex justify-center items-center [&>svg]:size-8 text-text-950
-            ${isHorizontal ? "w-20 h-full rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
+            flex justify-center items-center [&>svg]:size-6 text-text-950
+            ${isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
           `,
               style: {
                 backgroundColor: color
@@ -4147,7 +4229,7 @@ var CardProgress = forwardRef12(
             ${!isHorizontal && "gap-4"}
           `,
               children: [
-                /* @__PURE__ */ jsx26("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ jsx26(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: header }),
                 contentComponent[direction]
               ]
             }
@@ -4167,18 +4249,43 @@ var CardTopic = forwardRef12(
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         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}`,
+        layout: "vertical",
+        padding: "small",
+        minHeight: "medium",
+        cursor: "pointer",
+        className: `justify-center gap-2  py-2 px-4 ${className}`,
         ...props,
         children: [
           subHead && /* @__PURE__ */ jsx26("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ jsxs21(Fragment4, { children: [
             /* @__PURE__ */ jsx26("p", { children: text }),
             index < subHead.length - 1 && /* @__PURE__ */ jsx26("p", { children: "\u2022" })
           ] }, `${text} - ${index}`)) }),
-          /* @__PURE__ */ jsx26("p", { className: "text-xs text-text-950 font-bold", children: header }),
-          /* @__PURE__ */ jsx26(ProgressBar_default, { showPercentage, value: progress })
+          /* @__PURE__ */ jsx26("p", { className: "text-sm text-text-950 font-bold", children: header }),
+          /* @__PURE__ */ jsxs21("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
+            /* @__PURE__ */ jsx26(
+              ProgressBar_default,
+              {
+                size: "small",
+                value: progress,
+                "data-testid": "progress-bar"
+              }
+            ),
+            showPercentage && /* @__PURE__ */ jsxs21(
+              Text_default,
+              {
+                size: "xs",
+                weight: "medium",
+                className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+                children: [
+                  Math.round(progress),
+                  "%"
+                ]
+              }
+            )
+          ] })
         ]
       }
     );
@@ -4196,15 +4303,18 @@ var CardPerformance = forwardRef12(
   }, ref) => {
     const hasProgress = progress !== void 0;
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-full min-h-20.5 flex flex-row justify-between p-4 gap-2 bg-background border border-border-50 ${className}`,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "large",
+        className: `justify-between gap-2 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsxs21("div", { className: "w-full flex flex-col justify-between gap-2", children: [
             /* @__PURE__ */ jsxs21("div", { className: "flex flex-row justify-between items-center", children: [
-              /* @__PURE__ */ jsx26("p", { className: "text-md font-bold text-text-950", children: header }),
+              /* @__PURE__ */ jsx26("p", { className: "text-lg font-bold text-text-950", children: header }),
               hasProgress && /* @__PURE__ */ jsx26(
                 Button_default,
                 {
@@ -4220,7 +4330,7 @@ var CardPerformance = forwardRef12(
           !hasProgress && /* @__PURE__ */ jsx26(
             CaretRight2,
             {
-              className: "size-4.5 text-text-800",
+              className: "size-4.5 text-text-800 cursor-pointer",
               "data-testid": "caret-icon",
               onClick: () => onClickButton?.(valueButton)
             }
@@ -4243,13 +4353,13 @@ var CardResults = forwardRef12(
   }, ref) => {
     const isRow = direction == "row";
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         ref,
-        className: `
-          w-full flex border border-border-50 bg-background rounded-xl min-h-20 flex-row items-center pr-4
-          ${className}
-        `,
+        layout: "horizontal",
+        padding: "none",
+        minHeight: "medium",
+        className: `items-center pr-4 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsx26(
@@ -4272,7 +4382,7 @@ var CardResults = forwardRef12(
             ${isRow ? "flex-row items-center" : "flex-col"}
           `,
               children: [
-                /* @__PURE__ */ jsx26("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ jsx26("p", { className: "text-sm font-bold text-text-950", children: header }),
                 /* @__PURE__ */ jsxs21("span", { className: "flex flex-row gap-1 items-center", children: [
                   /* @__PURE__ */ jsxs21(
                     Badge_default,
@@ -4304,7 +4414,7 @@ var CardResults = forwardRef12(
               ]
             }
           ),
-          /* @__PURE__ */ jsx26(CaretRight2, { className: "min-w-6 min-h-6 text-text-800" })
+          /* @__PURE__ */ jsx26(CaretRight2, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer" })
         ]
       }
     );
@@ -4313,13 +4423,13 @@ var CardResults = forwardRef12(
 var CardStatus = forwardRef12(
   ({ header, className, status, ...props }, ref) => {
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         ref,
-        className: `
-          w-full flex border border-border-50 bg-background rounded-xl min-h-20 flex-row items-center pr-4
-          ${className}
-        `,
+        layout: "horizontal",
+        padding: "none",
+        minHeight: "medium",
+        className: `items-center pr-4 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsxs21(
@@ -4329,7 +4439,7 @@ var CardStatus = forwardRef12(
             p-4 flex justify-between w-full h-full flex-row items-center
           `,
               children: [
-                /* @__PURE__ */ jsx26("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ jsx26("p", { className: "text-sm font-bold text-text-950", children: header }),
                 status && /* @__PURE__ */ jsxs21("span", { className: "flex flex-row gap-1 items-center", children: [
                   /* @__PURE__ */ jsx26(
                     Badge_default,
@@ -4346,7 +4456,7 @@ var CardStatus = forwardRef12(
               ]
             }
           ),
-          /* @__PURE__ */ jsx26(CaretRight2, { className: "min-w-6 min-h-6 text-text-800" })
+          /* @__PURE__ */ jsx26(CaretRight2, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer" })
         ]
       }
     );
@@ -4355,15 +4465,18 @@ var CardStatus = forwardRef12(
 var CardSettings = forwardRef12(
   ({ header, className, icon, ...props }, ref) => {
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-full p-2 flex flex-row items-center gap-2 text-text-700 bg-background rounded-xl ${className}`,
+        layout: "horizontal",
+        padding: "small",
+        minHeight: "none",
+        className: `border-none items-center gap-2 text-text-700 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsx26("span", { className: "[&>svg]:size-6", children: icon }),
-          /* @__PURE__ */ jsx26("p", { className: "w-full text-md", children: header }),
-          /* @__PURE__ */ jsx26(CaretRight2, { size: 24 })
+          /* @__PURE__ */ jsx26("p", { className: "w-full text-sm", children: header }),
+          /* @__PURE__ */ jsx26(CaretRight2, { size: 24, className: "cursor-pointer" })
         ]
       }
     );
@@ -4372,10 +4485,13 @@ var CardSettings = forwardRef12(
 var CardSupport = forwardRef12(
   ({ header, className, direction = "col", children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-full p-4 flex flex-row items-center gap-2 text-text-700  bg-background rounded-xl ${className}`,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: `border-none items-center gap-2 text-text-700 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsxs21(
@@ -4385,12 +4501,12 @@ var CardSupport = forwardRef12(
               w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"}  gap-2
           `,
               children: [
-                /* @__PURE__ */ jsx26("span", { className: "w-full", children: /* @__PURE__ */ jsx26("p", { className: "text-xs text-text-950 font-bold", children: header }) }),
+                /* @__PURE__ */ jsx26("span", { className: "w-full", children: /* @__PURE__ */ jsx26("p", { className: "text-sm text-text-950 font-bold", children: header }) }),
                 /* @__PURE__ */ jsx26("span", { className: "flex flex-row gap-1", children })
               ]
             }
           ),
-          /* @__PURE__ */ jsx26(CaretRight2, { className: "text-text-800", size: 24 })
+          /* @__PURE__ */ jsx26(CaretRight2, { className: "text-text-800 cursor-pointer", size: 24 })
         ]
       }
     );
@@ -4411,10 +4527,14 @@ var CardForum = forwardRef12(
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxs21(
-      "div",
+      CardBase,
       {
         ref,
-        className: `w-auto h-auto p-4 rounded-lg flex flex-row gap-3 border border-border-100 bg-background ${className}`,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        variant: "minimal",
+        className: `w-auto h-auto gap-3 ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ jsx26(
@@ -4459,6 +4579,395 @@ var CardForum = forwardRef12(
     );
   }
 );
+var CardAudio = forwardRef12(
+  ({
+    src,
+    title,
+    onPlay,
+    onPause,
+    onEnded,
+    onAudioTimeUpdate,
+    loop = false,
+    preload = "metadata",
+    tracks,
+    className,
+    ...props
+  }, ref) => {
+    const [isPlaying, setIsPlaying] = useState8(false);
+    const [currentTime, setCurrentTime] = useState8(0);
+    const [duration, setDuration] = useState8(0);
+    const [volume, setVolume] = useState8(1);
+    const [showVolumeControl, setShowVolumeControl] = useState8(false);
+    const audioRef = useRef5(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__ */ jsx26(SpeakerSimpleX, {});
+      }
+      if (volume < 0.5) {
+        return /* @__PURE__ */ jsx26(SpeakerLow, {});
+      }
+      return /* @__PURE__ */ jsx26(SpeakerHigh, {});
+    };
+    return /* @__PURE__ */ jsxs21(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: `w-auto h-14 items-center gap-2 border-none ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx26(
+            "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__ */ jsx26(
+                "track",
+                {
+                  kind: track.kind,
+                  src: track.src,
+                  srcLang: track.srcLang,
+                  label: track.label,
+                  default: track.default
+                },
+                track.src
+              )) : /* @__PURE__ */ jsx26(
+                "track",
+                {
+                  kind: "captions",
+                  src: "data:text/vtt;base64,",
+                  srcLang: "pt",
+                  label: "Sem legendas dispon\xEDveis"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx26(
+            "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__ */ jsx26("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ jsxs21("div", { className: "flex gap-0.5", children: [
+                /* @__PURE__ */ jsx26("div", { className: "w-1 h-4 bg-current rounded-sm" }),
+                /* @__PURE__ */ jsx26("div", { className: "w-1 h-4 bg-current rounded-sm" })
+              ] }) }) : /* @__PURE__ */ jsx26(Play, { size: 24 })
+            }
+          ),
+          /* @__PURE__ */ jsx26("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsx26("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ jsx26(
+            "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__ */ jsx26(
+                "div",
+                {
+                  className: "h-full bg-primary-600 rounded-full transition-all duration-100",
+                  style: {
+                    width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx26("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(duration) }),
+          /* @__PURE__ */ jsxs21("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx26(
+              "button",
+              {
+                type: "button",
+                onClick: toggleVolumeControl,
+                className: "cursor-pointer text-text-950 hover:text-primary-600",
+                "aria-label": "Controle de volume",
+                children: /* @__PURE__ */ jsx26("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
+              }
+            ),
+            showVolumeControl && /* @__PURE__ */ jsx26(
+              "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__ */ jsx26(
+                  "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__ */ jsx26(
+            DotsThreeVertical,
+            {
+              size: 24,
+              className: "text-text-950 cursor-pointer hover:text-primary-600"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/Skeleton/Skeleton.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+var SKELETON_ANIMATION_CLASSES = {
+  pulse: "animate-pulse",
+  none: ""
+};
+var SKELETON_VARIANT_CLASSES = {
+  text: "h-4 bg-background-200 rounded",
+  circular: "bg-background-200 rounded-full",
+  rectangular: "bg-background-200",
+  rounded: "bg-background-200 rounded-lg"
+};
+var SPACING_CLASSES = {
+  none: "",
+  small: "space-y-1",
+  medium: "space-y-2",
+  large: "space-y-3"
+};
+var Skeleton = forwardRef13(
+  ({
+    variant = "text",
+    width,
+    height,
+    animation = "pulse",
+    lines = 1,
+    spacing = "none",
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const animationClass = SKELETON_ANIMATION_CLASSES[animation];
+    const variantClass = SKELETON_VARIANT_CLASSES[variant];
+    const spacingClass = SPACING_CLASSES[spacing];
+    const style = {
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height
+    };
+    if (variant === "text" && lines > 1) {
+      return /* @__PURE__ */ jsx27(
+        "div",
+        {
+          ref,
+          className: `flex flex-col ${spacingClass} ${className}`,
+          ...props,
+          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: `${variantClass} ${animationClass}`,
+              style: index === lines - 1 ? { width: "60%" } : void 0
+            },
+            index
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx27(
+      "div",
+      {
+        ref,
+        className: `${variantClass} ${animationClass} ${className}`,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var SkeletonText = forwardRef13(
+  (props, ref) => /* @__PURE__ */ jsx27(Skeleton, { ref, variant: "text", ...props })
+);
+var SkeletonCircle = forwardRef13((props, ref) => /* @__PURE__ */ jsx27(Skeleton, { ref, variant: "circular", ...props }));
+var SkeletonRectangle = forwardRef13((props, ref) => /* @__PURE__ */ jsx27(Skeleton, { ref, variant: "rectangular", ...props }));
+var SkeletonRounded = forwardRef13((props, ref) => /* @__PURE__ */ jsx27(Skeleton, { ref, variant: "rounded", ...props }));
+var SkeletonCard = forwardRef13(
+  ({
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    showActions = true,
+    lines = 2,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs22(
+      "div",
+      {
+        ref,
+        className: `w-full p-4 bg-background border border-border-200 rounded-lg ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-start space-x-3", children: [
+            showAvatar && /* @__PURE__ */ jsx27(SkeletonCircle, { width: 40, height: 40 }),
+            /* @__PURE__ */ jsxs22("div", { className: "flex-1 space-y-2", children: [
+              showTitle && /* @__PURE__ */ jsx27(SkeletonText, { width: "60%", height: 20 }),
+              showDescription && /* @__PURE__ */ jsx27(SkeletonText, { lines, spacing: "small" })
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ jsxs22("div", { className: "flex justify-end space-x-2 mt-4", children: [
+            /* @__PURE__ */ jsx27(SkeletonRectangle, { width: 80, height: 32 }),
+            /* @__PURE__ */ jsx27(SkeletonRectangle, { width: 80, height: 32 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var SkeletonList = forwardRef13(
+  ({
+    items = 3,
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    lines = 1,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx27("div", { ref, className: `space-y-3 ${className}`, ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs22("div", { className: "flex items-start space-x-3 p-3", children: [
+      showAvatar && /* @__PURE__ */ jsx27(SkeletonCircle, { width: 32, height: 32 }),
+      /* @__PURE__ */ jsxs22("div", { className: "flex-1 space-y-2", children: [
+        showTitle && /* @__PURE__ */ jsx27(SkeletonText, { width: "40%", height: 16 }),
+        showDescription && /* @__PURE__ */ jsx27(SkeletonText, { lines, spacing: "small" })
+      ] })
+    ] }, index)) });
+  }
+);
+var SkeletonTable = forwardRef13(
+  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs22("div", { ref, className: `w-full ${className}`, ...props, children: [
+      showHeader && /* @__PURE__ */ jsx27("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx27(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 20
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsx27("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx27("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ jsx27(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 16
+        },
+        colIndex
+      )) }, rowIndex)) })
+    ] });
+  }
+);
 export {
   Alert_default as Alert,
   Badge_default as Badge,
@@ -4503,6 +5012,14 @@ export {
   SelectTrigger,
   SelectValue,
   SelectionButton_default as SelectionButton,
+  Skeleton,
+  SkeletonCard,
+  SkeletonCircle,
+  SkeletonList,
+  SkeletonRectangle,
+  SkeletonRounded,
+  SkeletonTable,
+  SkeletonText,
   Stepper_default as Stepper,
   Table_default as Table,
   Text_default as Text,