@fanvue/ui 3.12.1 → 3.14.0

package/dist/cjs/components/Accordion/AccordionTrigger.cjs

@@ -24,7 +24,7 @@ function _interopNamespaceDefault(e) {
 }
 const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const AccordionTrigger = React__namespace.forwardRef(({ className, children, icon, ...props }, ref) => {
+const AccordionTrigger = React__namespace.forwardRef(({ className, children, icon, description, leadingIcon, avatar, ...props }, ref) => {
   const showIcon = icon !== null;
   const iconElement = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon.ChevronDownIcon, { className: "size-4 shrink-0 text-content-secondary" }) : icon;
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -44,7 +44,16 @@ const AccordionTrigger = React__namespace.forwardRef(({ className, children, ico
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          avatar && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: avatar }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-start gap-2 text-left", children: [
+            leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center pt-px [&>svg]:size-4", "aria-hidden": "true", children: leadingIcon }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate typography-body-small-14px-semibold text-content-primary", children }),
+              description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-description-12px-regular text-content-secondary", children: description })
+            ] })
+          ] })
+        ] }),
         showIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180", children: iconElement })
       ]
     }

package/dist/cjs/components/Accordion/AccordionTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.cjs","sources":["../../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n  icon?: React.ReactNode | null;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-sm px-3 py-3\",\n          \"typography-body-small-14px-semibold text-content-primary\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-alphas-100\",\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":["React","ChevronDownIcon","jsx","AccordionPrimitive","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,wCACNC,gBAAAA,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACEC,2BAAAA,IAACC,8BAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAAC,2BAAAA;AAAAA,IAACD,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAWE,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;;"}
+{"version":3,"file":"AccordionTrigger.cjs","sources":["../../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Trailing indicator icon. Defaults to `ChevronDownIcon` (rotates when open). Pass `null` to suppress it. */\n  icon?: React.ReactNode | null;\n  /** Secondary line rendered under the title, for extra context. */\n  description?: React.ReactNode;\n  /** Leading icon shown before the title (sized to 16px). */\n  leadingIcon?: React.ReactNode;\n  /** Leading avatar shown before the title, for headers representing a person or account. Pass an `Avatar` sized to `24`. */\n  avatar?: React.ReactNode;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, description, leadingIcon, avatar, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-sm px-3 py-3\",\n          \"typography-body-small-14px-semibold text-content-primary\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-alphas-100\",\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"flex min-w-0 flex-1 items-center gap-3\">\n          {avatar && (\n            <span className=\"flex shrink-0 items-center\" aria-hidden=\"true\">\n              {avatar}\n            </span>\n          )}\n          <span className=\"flex min-w-0 flex-1 items-start gap-2 text-left\">\n            {leadingIcon && (\n              <span className=\"flex shrink-0 items-center pt-px [&>svg]:size-4\" aria-hidden=\"true\">\n                {leadingIcon}\n              </span>\n            )}\n            <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <span className=\"truncate typography-body-small-14px-semibold text-content-primary\">\n                {children}\n              </span>\n              {description && (\n                <span className=\"typography-description-12px-regular text-content-secondary\">\n                  {description}\n                </span>\n              )}\n            </span>\n          </span>\n        </span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":["React","ChevronDownIcon","jsx","AccordionPrimitive","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,aAAa,aAAa,QAAQ,GAAG,MAAA,GAAS,QAAQ;AACpF,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,wCACNC,gBAAAA,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACEC,2BAAAA,IAACC,8BAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAAC,2BAAAA;AAAAA,IAACD,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAWE,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,0CACb,UAAA;AAAA,UAAA,yCACE,QAAA,EAAK,WAAU,8BAA6B,eAAY,QACtD,UAAA,QACH;AAAA,UAEFA,2BAAAA,KAAC,QAAA,EAAK,WAAU,mDACb,UAAA;AAAA,YAAA,8CACE,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,aACH;AAAA,YAEFA,2BAAAA,KAAC,QAAA,EAAK,WAAU,sCACd,UAAA;AAAA,cAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,qEACb,SAAA,CACH;AAAA,cACC,eACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,8DACb,UAAA,YAAA,CACH;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QACC,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;;"}

package/dist/cjs/components/AudioPlayer/AudioPlayer.cjs

@@ -0,0 +1,357 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const PauseIcon = require("../Icons/PauseIcon.cjs");
+const PlayIcon = require("../Icons/PlayIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const BAR_WIDTH_PX = 4;
+const BAR_GAP_PX = 4;
+const MIN_BAR_HEIGHT_PX = 4;
+const MAX_BAR_HEIGHT_PX = 26;
+const DEFAULT_BAR_COUNT = 24;
+const RAW_PEAK_COUNT = 128;
+const SEEK_STEP_SECONDS = 1;
+const SEEK_STEP_LARGE_SECONDS = 5;
+function formatTime(seconds) {
+  if (seconds === void 0 || !Number.isFinite(seconds)) return "--:--";
+  const totalSeconds = Math.max(0, Math.floor(seconds));
+  const minutes = Math.floor(totalSeconds / 60);
+  const remainingSeconds = totalSeconds % 60;
+  return `${minutes}:${String(remainingSeconds).padStart(2, "0")}`;
+}
+function hashString(value) {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function createSeededRandom(seed) {
+  let state = seed;
+  return () => {
+    state = state + 1831565813 | 0;
+    let t = Math.imul(state ^ state >>> 15, 1 | state);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function generateFallbackPeaks(src, count) {
+  const random = createSeededRandom(hashString(src));
+  return Array.from({ length: count }, () => 0.2 + random() * 0.8);
+}
+function computePeaksFromChannelData(channelData, count) {
+  const blockSize = Math.max(1, Math.floor(channelData.length / count));
+  const peaks = [];
+  for (let i = 0; i < count; i++) {
+    const start = i * blockSize;
+    let max = 0;
+    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {
+      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));
+    }
+    peaks.push(max);
+  }
+  return peaks;
+}
+function resamplePeaks(peaks, barCount) {
+  if (peaks.length === 0 || barCount <= 0) return [];
+  const step = peaks.length / barCount;
+  return Array.from(
+    { length: barCount },
+    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0
+  );
+}
+async function decodeAudioPeaks(src, signal) {
+  const AudioContextCtor = window.AudioContext ?? window.webkitAudioContext;
+  if (!AudioContextCtor) throw new Error("WebAudio unsupported");
+  const response = await fetch(src, { signal });
+  const arrayBuffer = await response.arrayBuffer();
+  const audioContext = new AudioContextCtor();
+  try {
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);
+  } finally {
+    if (audioContext.state !== "closed") audioContext.close().catch(() => {
+    });
+  }
+}
+const AudioPlayer = React__namespace.forwardRef(
+  ({
+    className,
+    src,
+    duration,
+    playing: controlledPlaying,
+    defaultPlaying = false,
+    onPlay,
+    onPause,
+    onEnded,
+    size = "40",
+    ...props
+  }, ref) => {
+    const audioRef = React__namespace.useRef(null);
+    const trackRef = React__namespace.useRef(null);
+    const [internalPlaying, setInternalPlaying] = React__namespace.useState(defaultPlaying);
+    const isControlled = controlledPlaying !== void 0;
+    const playing = isControlled ? controlledPlaying : internalPlaying;
+    const [currentTime, setCurrentTime] = React__namespace.useState(0);
+    const [mediaDuration, setMediaDuration] = React__namespace.useState(void 0);
+    const [barCount, setBarCount] = React__namespace.useState(DEFAULT_BAR_COUNT);
+    const [peaks, setPeaks] = React__namespace.useState(
+      () => generateFallbackPeaks(src, RAW_PEAK_COUNT)
+    );
+    const [isDragging, setIsDragging] = React__namespace.useState(false);
+    const displayDuration = mediaDuration ?? duration;
+    const hasStarted = playing || currentTime > 0;
+    const playingRef = React__namespace.useRef(playing);
+    playingRef.current = playing;
+    const isControlledRef = React__namespace.useRef(isControlled);
+    isControlledRef.current = isControlled;
+    const onPauseRef = React__namespace.useRef(onPause);
+    onPauseRef.current = onPause;
+    const isFirstSrcRenderRef = React__namespace.useRef(true);
+    React__namespace.useEffect(() => {
+      if (isFirstSrcRenderRef.current) {
+        isFirstSrcRenderRef.current = false;
+        return;
+      }
+      setCurrentTime(0);
+      setMediaDuration(void 0);
+      setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));
+      if (playingRef.current) {
+        if (!isControlledRef.current) setInternalPlaying(false);
+        onPauseRef.current?.();
+      }
+    }, [src]);
+    React__namespace.useEffect(() => {
+      let cancelled = false;
+      const abortController = new AbortController();
+      decodeAudioPeaks(src, abortController.signal).then((decodedPeaks) => {
+        if (!cancelled) setPeaks(decodedPeaks);
+      }).catch(() => {
+        if (!cancelled) setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));
+      });
+      return () => {
+        cancelled = true;
+        abortController.abort();
+      };
+    }, [src]);
+    React__namespace.useEffect(() => {
+      const track = trackRef.current;
+      if (!track) return;
+      const updateFromWidth = (width) => {
+        if (width <= 0) return;
+        setBarCount(Math.max(1, Math.floor((width + BAR_GAP_PX) / (BAR_WIDTH_PX + BAR_GAP_PX))));
+      };
+      updateFromWidth(track.getBoundingClientRect().width);
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) updateFromWidth(entry.contentRect.width);
+      });
+      observer.observe(track);
+      return () => observer.disconnect();
+    }, []);
+    React__namespace.useEffect(() => {
+      const audio = audioRef.current;
+      if (!audio) return;
+      if (playing) {
+        audio.play().catch(() => {
+          if (!isControlled) setInternalPlaying(false);
+          onPauseRef.current?.();
+        });
+      } else {
+        audio.pause();
+      }
+    }, [playing, isControlled]);
+    const handleToggle = () => {
+      const next = !playing;
+      if (!isControlled) setInternalPlaying(next);
+      if (next) onPlay?.();
+      else onPause?.();
+    };
+    const seekTo = React__namespace.useCallback(
+      (time) => {
+        if (displayDuration === void 0) return;
+        const clamped = Math.min(Math.max(time, 0), displayDuration);
+        setCurrentTime(clamped);
+        const audio = audioRef.current;
+        if (audio) audio.currentTime = clamped;
+      },
+      [displayDuration]
+    );
+    const seekFromClientX = React__namespace.useCallback(
+      (clientX) => {
+        const track = trackRef.current;
+        if (!track || displayDuration === void 0) return;
+        const rect = track.getBoundingClientRect();
+        if (rect.width <= 0) return;
+        const fraction = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
+        seekTo(fraction * displayDuration);
+      },
+      [displayDuration, seekTo]
+    );
+    React__namespace.useEffect(() => {
+      if (!isDragging) return;
+      const handleWindowPointerMove = (event) => seekFromClientX(event.clientX);
+      const handleWindowPointerUp = () => setIsDragging(false);
+      window.addEventListener("pointermove", handleWindowPointerMove);
+      window.addEventListener("pointerup", handleWindowPointerUp);
+      return () => {
+        window.removeEventListener("pointermove", handleWindowPointerMove);
+        window.removeEventListener("pointerup", handleWindowPointerUp);
+      };
+    }, [isDragging, seekFromClientX]);
+    const handlePointerDown = (event) => {
+      seekFromClientX(event.clientX);
+      setIsDragging(true);
+    };
+    const handleKeyDown = (event) => {
+      if (displayDuration === void 0) return;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          event.preventDefault();
+          seekTo(currentTime + SEEK_STEP_SECONDS);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          event.preventDefault();
+          seekTo(currentTime - SEEK_STEP_SECONDS);
+          break;
+        case "PageUp":
+          event.preventDefault();
+          seekTo(currentTime + SEEK_STEP_LARGE_SECONDS);
+          break;
+        case "PageDown":
+          event.preventDefault();
+          seekTo(currentTime - SEEK_STEP_LARGE_SECONDS);
+          break;
+        case "Home":
+          event.preventDefault();
+          seekTo(0);
+          break;
+        case "End":
+          event.preventDefault();
+          seekTo(displayDuration);
+          break;
+      }
+    };
+    const bars = resamplePeaks(peaks, barCount);
+    const progressFraction = displayDuration && displayDuration > 0 ? Math.min(Math.max(currentTime / displayDuration, 0), 1) : 0;
+    const playedBarCount = hasStarted ? Math.round(progressFraction * bars.length) : bars.length;
+    const barData = bars.map((amplitude, index) => {
+      const isPlayed = index < playedBarCount;
+      return {
+        heightPx: MIN_BAR_HEIGHT_PX + amplitude * (MAX_BAR_HEIGHT_PX - MIN_BAR_HEIGHT_PX),
+        className: cn.cn(
+          "w-1 shrink-0 rounded-3xs bg-messages-waveform-default",
+          "motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-in-out",
+          isPlayed ? "opacity-100" : "opacity-50"
+        )
+      };
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-size": size,
+        className: cn.cn("flex w-full items-center gap-3", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleToggle,
+              "aria-label": playing ? "Pause" : "Play",
+              className: cn.cn(
+                "flex size-8 shrink-0 items-center justify-center rounded-full",
+                "bg-buttons-secondary-default text-icons-primary backdrop-blur-[40px]",
+                "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+                "hover:bg-buttons-secondary-hover",
+                "focus-visible:shadow-focus-ring focus-visible:outline-none"
+              ),
+              children: playing ? /* @__PURE__ */ jsxRuntime.jsx(PauseIcon.PauseIcon, { size: 16, filled: true }) : /* @__PURE__ */ jsxRuntime.jsx(PlayIcon.PlayIcon, { size: 16, filled: true })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: trackRef,
+                role: "slider",
+                tabIndex: 0,
+                "aria-label": "Seek",
+                "aria-orientation": "horizontal",
+                "aria-valuemin": 0,
+                "aria-valuemax": displayDuration,
+                "aria-valuenow": Math.round(currentTime),
+                "aria-valuetext": displayDuration !== void 0 ? `${formatTime(currentTime)} of ${formatTime(displayDuration)}` : formatTime(currentTime),
+                onPointerDown: handlePointerDown,
+                onKeyDown: handleKeyDown,
+                className: cn.cn(
+                  "flex h-10 min-w-0 flex-1 cursor-pointer touch-none select-none items-center gap-1 overflow-hidden",
+                  "focus-visible:shadow-focus-ring focus-visible:outline-none"
+                ),
+                children: barData.map((bar, index) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: bars are a fixed-count, non-reorderable list
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: bar.className, style: { height: bar.heightPx } }, index)
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-semibold flex shrink-0 items-center gap-0.5 whitespace-nowrap", children: hasStarted ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-content-primary", children: formatTime(currentTime) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-content-secondary", children: [
+                "/",
+                formatTime(displayDuration)
+              ] })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-content-primary", children: formatTime(displayDuration) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "audio",
+            {
+              ref: audioRef,
+              src,
+              preload: "metadata",
+              className: "hidden",
+              onLoadedMetadata: (event) => {
+                const { duration: nativeDuration } = event.currentTarget;
+                setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : void 0);
+              },
+              onTimeUpdate: (event) => {
+                if (isDragging) return;
+                setCurrentTime(event.currentTarget.currentTime);
+              },
+              onEnded: () => {
+                setCurrentTime(0);
+                if (!isControlled) setInternalPlaying(false);
+                onEnded?.();
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AudioPlayer.displayName = "AudioPlayer";
+exports.AudioPlayer = AudioPlayer;
+//# sourceMappingURL=AudioPlayer.cjs.map

package/dist/cjs/components/AudioPlayer/AudioPlayer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.cjs","sources":["../../../../src/components/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { PauseIcon } from \"../Icons/PauseIcon\";\nimport { PlayIcon } from \"../Icons/PlayIcon\";\n\n/** Width of a single waveform bar, in pixels. */\nconst BAR_WIDTH_PX = 4;\n/** Gap between waveform bars, in pixels. */\nconst BAR_GAP_PX = 4;\n/** Shortest a waveform bar can render, in pixels. */\nconst MIN_BAR_HEIGHT_PX = 4;\n/** Tallest a waveform bar can render, in pixels — matches the 40px row height. */\nconst MAX_BAR_HEIGHT_PX = 26;\n/** Bar count used before the container has been measured (e.g. during SSR or in jsdom, where layout is unavailable). */\nconst DEFAULT_BAR_COUNT = 24;\n/** Number of amplitude samples kept internally, resampled to the rendered bar count. */\nconst RAW_PEAK_COUNT = 128;\n/** Seconds moved per Arrow key press while seeking. */\nconst SEEK_STEP_SECONDS = 1;\n/** Seconds moved per Page Up/Down press while seeking. */\nconst SEEK_STEP_LARGE_SECONDS = 5;\n\n/** Height of the audio player row, in pixels. Matches both the Vault card overlay and the \"Generated Audio\" modal row in Figma — both use an identical 32px play button and 40px row. */\nexport type AudioPlayerSize = \"40\";\n\nexport interface AudioPlayerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onPlay\" | \"onPause\" | \"onEnded\"> {\n  /** URL of the audio file to play. */\n  src: string;\n  /**\n   * Total duration in seconds, used to render the timestamp before the\n   * media's own metadata has loaded (and as a fallback if it never does).\n   */\n  duration?: number;\n  /**\n   * Whether playback is active (controlled). Note: once `onEnded` fires, the\n   * browser has already stopped native playback. To loop or replay under\n   * controlled usage, toggle this prop `false` then `true` (rather than\n   * leaving it `true`) — the sync effect only calls `play()` again when this\n   * value actually changes.\n   */\n  playing?: boolean;\n  /** Initial playback state (uncontrolled). @default false */\n  defaultPlaying?: boolean;\n  /** Called when playback starts. */\n  onPlay?: () => void;\n  /** Called when playback is paused. */\n  onPause?: () => void;\n  /** Called when playback reaches the end of the media. */\n  onEnded?: () => void;\n  /** Height of the player row, in pixels. @default \"40\" */\n  size?: AudioPlayerSize;\n}\n\nfunction formatTime(seconds: number | undefined): string {\n  if (seconds === undefined || !Number.isFinite(seconds)) return \"--:--\";\n  const totalSeconds = Math.max(0, Math.floor(seconds));\n  const minutes = Math.floor(totalSeconds / 60);\n  const remainingSeconds = totalSeconds % 60;\n  return `${minutes}:${String(remainingSeconds).padStart(2, \"0\")}`;\n}\n\n/** Deterministic 32-bit string hash (FNV-1a), used to seed the fallback waveform. */\nfunction hashString(value: string): number {\n  let hash = 2166136261;\n  for (let i = 0; i < value.length; i++) {\n    hash ^= value.charCodeAt(i);\n    hash = Math.imul(hash, 16777619);\n  }\n  return hash >>> 0;\n}\n\n/** Seeded PRNG (mulberry32) — deterministic across runs, unlike `Math.random`. */\nfunction createSeededRandom(seed: number): () => number {\n  let state = seed;\n  return () => {\n    state = (state + 0x6d2b79f5) | 0;\n    let t = Math.imul(state ^ (state >>> 15), 1 | state);\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/** Deterministic placeholder amplitudes used when audio can't be decoded (network/CORS/format failure). */\nfunction generateFallbackPeaks(src: string, count: number): number[] {\n  const random = createSeededRandom(hashString(src));\n  return Array.from({ length: count }, () => 0.2 + random() * 0.8);\n}\n\n/** Downsamples decoded PCM data to `count` peak (max-abs) amplitudes. */\nfunction computePeaksFromChannelData(channelData: Float32Array, count: number): number[] {\n  const blockSize = Math.max(1, Math.floor(channelData.length / count));\n  const peaks: number[] = [];\n  for (let i = 0; i < count; i++) {\n    const start = i * blockSize;\n    let max = 0;\n    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {\n      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));\n    }\n    peaks.push(max);\n  }\n  return peaks;\n}\n\n/** Resamples a peaks array to the number of bars that currently fit the container. */\nfunction resamplePeaks(peaks: number[], barCount: number): number[] {\n  if (peaks.length === 0 || barCount <= 0) return [];\n  const step = peaks.length / barCount;\n  return Array.from(\n    { length: barCount },\n    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0,\n  );\n}\n\n/** Decodes `src` via WebAudio and returns downsampled peak amplitudes. Throws on any failure. */\nasync function decodeAudioPeaks(src: string, signal: AbortSignal): Promise<number[]> {\n  const AudioContextCtor =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;\n  if (!AudioContextCtor) throw new Error(\"WebAudio unsupported\");\n\n  const response = await fetch(src, { signal });\n  const arrayBuffer = await response.arrayBuffer();\n  const audioContext = new AudioContextCtor();\n  try {\n    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);\n  } finally {\n    if (audioContext.state !== \"closed\") audioContext.close().catch(() => {});\n  }\n}\n\n/**\n * A compact playback control for a single audio clip: a play/pause toggle, a\n * static amplitude waveform that doubles as a seek scrubber, and elapsed/total\n * timestamps. Designed to sit as an overlay on media thumbnails (Vault cards)\n * as well as inline rows (the AI Voice Message \"Generated Audio\" row).\n *\n * The waveform is seeded from the decoded audio when possible, falling back\n * to a deterministic (not random) placeholder derived from `src` so the\n * result is stable across renders, SSR, and Chromatic snapshots.\n *\n * @example\n * ```tsx\n * <AudioPlayer src=\"https://example.com/clip.mp3\" duration={5} />\n * ```\n */\nexport const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(\n  (\n    {\n      className,\n      src,\n      duration,\n      playing: controlledPlaying,\n      defaultPlaying = false,\n      onPlay,\n      onPause,\n      onEnded,\n      size = \"40\",\n      ...props\n    },\n    ref,\n  ) => {\n    const audioRef = React.useRef<HTMLAudioElement>(null);\n    const trackRef = React.useRef<HTMLDivElement>(null);\n\n    const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);\n    const isControlled = controlledPlaying !== undefined;\n    const playing = isControlled ? controlledPlaying : internalPlaying;\n\n    const [currentTime, setCurrentTime] = React.useState(0);\n    const [mediaDuration, setMediaDuration] = React.useState<number | undefined>(undefined);\n    const [barCount, setBarCount] = React.useState(DEFAULT_BAR_COUNT);\n    const [peaks, setPeaks] = React.useState<number[]>(() =>\n      generateFallbackPeaks(src, RAW_PEAK_COUNT),\n    );\n    const [isDragging, setIsDragging] = React.useState(false);\n\n    const displayDuration = mediaDuration ?? duration;\n    const hasStarted = playing || currentTime > 0;\n\n    // Latest-value refs so the src-change effect below can react to a src swap\n    // without re-running whenever `playing`/`isControlled`/`onPause` change.\n    const playingRef = React.useRef(playing);\n    playingRef.current = playing;\n    const isControlledRef = React.useRef(isControlled);\n    isControlledRef.current = isControlled;\n    const onPauseRef = React.useRef(onPause);\n    onPauseRef.current = onPause;\n\n    // Reset transient playback state when the source changes. Skips the\n    // initial mount (there's nothing to reset yet) and, if playback was\n    // active, stops it — the browser silently drops playback on a source\n    // swap, so the UI (and any controlled parent) must be told via onPause.\n    const isFirstSrcRenderRef = React.useRef(true);\n    React.useEffect(() => {\n      if (isFirstSrcRenderRef.current) {\n        isFirstSrcRenderRef.current = false;\n        return;\n      }\n      setCurrentTime(0);\n      setMediaDuration(undefined);\n      setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));\n      if (playingRef.current) {\n        if (!isControlledRef.current) setInternalPlaying(false);\n        onPauseRef.current?.();\n      }\n    }, [src]);\n\n    // Decode the audio to derive real waveform amplitudes, falling back to a\n    // deterministic placeholder on any failure (network, CORS, unsupported format).\n    React.useEffect(() => {\n      let cancelled = false;\n      const abortController = new AbortController();\n\n      decodeAudioPeaks(src, abortController.signal)\n        .then((decodedPeaks) => {\n          if (!cancelled) setPeaks(decodedPeaks);\n        })\n        .catch(() => {\n          if (!cancelled) setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));\n        });\n\n      return () => {\n        cancelled = true;\n        abortController.abort();\n      };\n    }, [src]);\n\n    // Measure the track to decide how many bars fit; falls back to DEFAULT_BAR_COUNT\n    // when layout is unavailable (SSR, jsdom).\n    React.useEffect(() => {\n      const track = trackRef.current;\n      if (!track) return;\n\n      const updateFromWidth = (width: number) => {\n        if (width <= 0) return;\n        setBarCount(Math.max(1, Math.floor((width + BAR_GAP_PX) / (BAR_WIDTH_PX + BAR_GAP_PX))));\n      };\n\n      updateFromWidth(track.getBoundingClientRect().width);\n\n      const observer = new ResizeObserver((entries) => {\n        const entry = entries[0];\n        if (entry) updateFromWidth(entry.contentRect.width);\n      });\n      observer.observe(track);\n      return () => observer.disconnect();\n    }, []);\n\n    // Sync the controlled/uncontrolled `playing` state to the media element.\n    React.useEffect(() => {\n      const audio = audioRef.current;\n      if (!audio) return;\n      if (playing) {\n        audio.play().catch(() => {\n          if (!isControlled) setInternalPlaying(false);\n          onPauseRef.current?.();\n        });\n      } else {\n        audio.pause();\n      }\n    }, [playing, isControlled]);\n\n    const handleToggle = () => {\n      const next = !playing;\n      if (!isControlled) setInternalPlaying(next);\n      if (next) onPlay?.();\n      else onPause?.();\n    };\n\n    const seekTo = React.useCallback(\n      (time: number) => {\n        if (displayDuration === undefined) return;\n        const clamped = Math.min(Math.max(time, 0), displayDuration);\n        setCurrentTime(clamped);\n        const audio = audioRef.current;\n        if (audio) audio.currentTime = clamped;\n      },\n      [displayDuration],\n    );\n\n    const seekFromClientX = React.useCallback(\n      (clientX: number) => {\n        const track = trackRef.current;\n        if (!track || displayDuration === undefined) return;\n        const rect = track.getBoundingClientRect();\n        if (rect.width <= 0) return;\n        const fraction = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);\n        seekTo(fraction * displayDuration);\n      },\n      [displayDuration, seekTo],\n    );\n\n    // Track drag outside the element via window listeners rather than pointer\n    // capture, which some environments (and jsdom) don't fully implement.\n    React.useEffect(() => {\n      if (!isDragging) return;\n      const handleWindowPointerMove = (event: PointerEvent) => seekFromClientX(event.clientX);\n      const handleWindowPointerUp = () => setIsDragging(false);\n      window.addEventListener(\"pointermove\", handleWindowPointerMove);\n      window.addEventListener(\"pointerup\", handleWindowPointerUp);\n      return () => {\n        window.removeEventListener(\"pointermove\", handleWindowPointerMove);\n        window.removeEventListener(\"pointerup\", handleWindowPointerUp);\n      };\n    }, [isDragging, seekFromClientX]);\n\n    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n      seekFromClientX(event.clientX);\n      setIsDragging(true);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (displayDuration === undefined) return;\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          seekTo(currentTime + SEEK_STEP_SECONDS);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          seekTo(currentTime - SEEK_STEP_SECONDS);\n          break;\n        case \"PageUp\":\n          event.preventDefault();\n          seekTo(currentTime + SEEK_STEP_LARGE_SECONDS);\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          seekTo(currentTime - SEEK_STEP_LARGE_SECONDS);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          seekTo(0);\n          break;\n        case \"End\":\n          event.preventDefault();\n          seekTo(displayDuration);\n          break;\n        default:\n          break;\n      }\n    };\n\n    const bars = resamplePeaks(peaks, barCount);\n    const progressFraction =\n      displayDuration && displayDuration > 0\n        ? Math.min(Math.max(currentTime / displayDuration, 0), 1)\n        : 0;\n    const playedBarCount = hasStarted ? Math.round(progressFraction * bars.length) : bars.length;\n    const barData = bars.map((amplitude, index) => {\n      const isPlayed = index < playedBarCount;\n      return {\n        heightPx: MIN_BAR_HEIGHT_PX + amplitude * (MAX_BAR_HEIGHT_PX - MIN_BAR_HEIGHT_PX),\n        className: cn(\n          \"w-1 shrink-0 rounded-3xs bg-messages-waveform-default\",\n          \"motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-in-out\",\n          isPlayed ? \"opacity-100\" : \"opacity-50\",\n        ),\n      };\n    });\n\n    return (\n      <div\n        ref={ref}\n        data-size={size}\n        className={cn(\"flex w-full items-center gap-3\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={handleToggle}\n          aria-label={playing ? \"Pause\" : \"Play\"}\n          className={cn(\n            \"flex size-8 shrink-0 items-center justify-center rounded-full\",\n            \"bg-buttons-secondary-default text-icons-primary backdrop-blur-[40px]\",\n            \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n            \"hover:bg-buttons-secondary-hover\",\n            \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          )}\n        >\n          {playing ? <PauseIcon size={16} filled /> : <PlayIcon size={16} filled />}\n        </button>\n\n        <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n          <div\n            ref={trackRef}\n            role=\"slider\"\n            tabIndex={0}\n            aria-label=\"Seek\"\n            aria-orientation=\"horizontal\"\n            aria-valuemin={0}\n            aria-valuemax={displayDuration}\n            aria-valuenow={Math.round(currentTime)}\n            aria-valuetext={\n              displayDuration !== undefined\n                ? `${formatTime(currentTime)} of ${formatTime(displayDuration)}`\n                : formatTime(currentTime)\n            }\n            onPointerDown={handlePointerDown}\n            onKeyDown={handleKeyDown}\n            className={cn(\n              \"flex h-10 min-w-0 flex-1 cursor-pointer touch-none select-none items-center gap-1 overflow-hidden\",\n              \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n            )}\n          >\n            {barData.map((bar, index) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: bars are a fixed-count, non-reorderable list\n              <span key={index} className={bar.className} style={{ height: bar.heightPx }} />\n            ))}\n          </div>\n\n          <span className=\"typography-body-small-14px-semibold flex shrink-0 items-center gap-0.5 whitespace-nowrap\">\n            {hasStarted ? (\n              <>\n                <span className=\"text-content-primary\">{formatTime(currentTime)}</span>\n                <span className=\"text-content-secondary\">/{formatTime(displayDuration)}</span>\n              </>\n            ) : (\n              <span className=\"text-content-primary\">{formatTime(displayDuration)}</span>\n            )}\n          </span>\n        </div>\n\n        {/* biome-ignore lint/a11y/useMediaCaption: this is a UI sound clip (voice note / short recording), not spoken/narrated content requiring captions. */}\n        <audio\n          ref={audioRef}\n          src={src}\n          preload=\"metadata\"\n          className=\"hidden\"\n          onLoadedMetadata={(event) => {\n            const { duration: nativeDuration } = event.currentTarget;\n            setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : undefined);\n          }}\n          onTimeUpdate={(event) => {\n            if (isDragging) return;\n            setCurrentTime(event.currentTarget.currentTime);\n          }}\n          onEnded={() => {\n            setCurrentTime(0);\n            if (!isControlled) setInternalPlaying(false);\n            onEnded?.();\n          }}\n        />\n      </div>\n    );\n  },\n);\n\nAudioPlayer.displayName = \"AudioPlayer\";\n"],"names":["React","cn","jsxs","jsx","PauseIcon","PlayIcon","Fragment"],"mappings":"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"}

package/dist/cjs/components/Avatar/Avatar.cjs

@@ -48,7 +48,7 @@ const AvatarRoot = React__namespace.forwardRef(
     ...props
   }, ref) => {
     const statusPosition = STATUS_POSITIONS[size];
-    return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: { size, NSFWShow }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: { size, NSFWShow }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         AvatarPrimitive__namespace.Root,
         {
@@ -71,7 +71,7 @@ const AvatarRoot = React__namespace.forwardRef(
         }
       ),
       platinumShow && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        "span",
         {
           className: "pointer-events-none absolute inset-0 rounded-full",
           style: {

package/dist/cjs/components/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<\n  AvatarSize,\n  { top: number; right: number; indicatorSize: string; borderSize: string }\n> = {\n  16: { top: -2, right: -2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  24: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n  32: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n  40: { top: 2, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  48: { top: 5, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  64: { top: 5, right: 1, indicatorSize: \"size-3\", borderSize: \"border\" },\n  88: { top: 8, right: 6, indicatorSize: \"size-3\", borderSize: \"border\" },\n  148: { top: 15, right: 15, indicatorSize: \"size-3\", borderSize: \"border\" },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n  /** Pixel size of the avatar. @default 40 */\n  size?: AvatarSize;\n  /** Whether to show the online-status indicator dot. @default false */\n  onlineIndicator?: boolean;\n  /** Whether to show the platinum gradient border ring. @default false */\n  platinumShow?: boolean;\n  /** Whether to apply the NSFW blur filter over the image. @default false */\n  NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <div className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-background-avatar\",\n              size === 16 && \"size-4 text-2xs\",\n              size === 24 && \"size-6 text-xs\",\n              size === 32 && \"size-8 text-xs\",\n              size === 40 && \"size-10 text-sm\",\n              size === 48 && \"size-12 text-base\",\n              size === 64 && \"size-16 text-xl\",\n              size === 88 && \"size-22 text-2xl\",\n              size === 148 && \"size-37 text-4xl\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <div\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className={cn(\n                \"absolute rounded-full border-surface-primary bg-brand-primary-default\",\n                statusPosition.borderSize,\n                statusPosition.indicatorSize,\n              )}\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center font-semibold text-content-primary uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image. */\n  src?: string;\n  /** Alt text for the avatar image. @default \"Avatar\" */\n  alt?: string;\n  /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n  fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":["React","jsx","jsxs","AvatarPrimitive","cn"],"mappings":"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"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<\n  AvatarSize,\n  { top: number; right: number; indicatorSize: string; borderSize: string }\n> = {\n  16: { top: -2, right: -2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  24: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n  32: { top: 0, right: 0, indicatorSize: \"size-2\", borderSize: \"border\" },\n  40: { top: 2, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  48: { top: 5, right: 2, indicatorSize: \"size-2\", borderSize: \"border\" },\n  64: { top: 5, right: 1, indicatorSize: \"size-3\", borderSize: \"border\" },\n  88: { top: 8, right: 6, indicatorSize: \"size-3\", borderSize: \"border\" },\n  148: { top: 15, right: 15, indicatorSize: \"size-3\", borderSize: \"border\" },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n  /** Pixel size of the avatar. @default 40 */\n  size?: AvatarSize;\n  /** Whether to show the online-status indicator dot. @default false */\n  onlineIndicator?: boolean;\n  /** Whether to show the platinum gradient border ring. @default false */\n  platinumShow?: boolean;\n  /** Whether to apply the NSFW blur filter over the image. @default false */\n  NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <span className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-background-avatar\",\n              size === 16 && \"size-4 text-2xs\",\n              size === 24 && \"size-6 text-xs\",\n              size === 32 && \"size-8 text-xs\",\n              size === 40 && \"size-10 text-sm\",\n              size === 48 && \"size-12 text-base\",\n              size === 64 && \"size-16 text-xl\",\n              size === 88 && \"size-22 text-2xl\",\n              size === 148 && \"size-37 text-4xl\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <span\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className={cn(\n                \"absolute rounded-full border-surface-primary bg-brand-primary-default\",\n                statusPosition.borderSize,\n                statusPosition.indicatorSize,\n              )}\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </span>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center font-semibold text-content-primary uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image. */\n  src?: string;\n  /** Alt text for the avatar image. @default \"Avatar\" */\n  alt?: string;\n  /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n  fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":["React","jsx","jsxs","AvatarPrimitive","cn"],"mappings":"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"}

package/dist/cjs/components/Dialog/Dialog.cjs

@@ -58,12 +58,13 @@ const DialogContent = React__namespace.forwardRef(
     portal = true,
     showMobileHandle = true,
     mobilePresentation = "sheet",
+    overlayProps,
     style,
     onOpenAutoFocus,
     ...props
   }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      overlay && /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+      overlay && /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, { ...overlayProps }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         DialogPrimitive__namespace.Content,
         {