@fluencypassdevs/cycle 1.6.0 → 1.9.0

package/dist/chunk-PW464XEP.js

@@ -0,0 +1,787 @@
+import { cn } from './chunk-TYCPXAXF.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-YINJ5YZ5.js';
+import * as React from 'react';
+import { Trash2, Pause, Play, Mic, ChevronLeft, Lock, ChevronUp, Send } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function formatDuration(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return "00:00";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+}
+function MicButton({
+  onClick,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  size = "default",
+  variant = "default",
+  pressed = false,
+  ariaLabel = "Gravar audio",
+  className,
+  style
+}) {
+  const sizeClass = variant === "large" ? "size-16" : size === "default" ? "size-10" : "size-8";
+  const radiusClass = variant === "large" ? "rounded-lg" : "rounded-md";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      "aria-pressed": pressed || void 0,
+      className: cn(
+        "shrink-0 inline-flex items-center justify-center bg-primary text-primary-foreground theme-brand transition-all hover:opacity-90 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        sizeClass,
+        radiusClass,
+        pressed && "scale-110 opacity-90 touch-none select-none",
+        className
+      ),
+      style,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(Mic, { className: variant === "large" ? "size-6" : "size-5" })
+    }
+  );
+}
+function SendButton({
+  onClick,
+  disabled,
+  ariaLabel = "Enviar"
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: "shrink-0 inline-flex items-center justify-center size-10 rounded-md bg-primary text-primary-foreground theme-positive transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 disabled:cursor-not-allowed",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(Send, { className: "size-5", fill: "currentColor", strokeWidth: 0 })
+    }
+  );
+}
+function IconButton({
+  onClick,
+  icon: Icon,
+  ariaLabel,
+  filled = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "shrink-0 inline-flex items-center justify-center size-10 rounded-md text-neutral-foreground hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        __spreadValues({
+          className: "size-5"
+        }, filled ? { fill: "currentColor", strokeWidth: 0 } : {})
+      )
+    }
+  );
+}
+function RecordingIndicator() {
+  return /* @__PURE__ */ jsxs("span", { className: "shrink-0 relative inline-flex items-center justify-center size-3", "aria-label": "Gravando", children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full bg-primary theme-brand animate-ping opacity-75" }),
+    /* @__PURE__ */ jsx("span", { className: "relative size-2.5 rounded-full bg-primary theme-brand" })
+  ] });
+}
+function aggregateSamples(samples, barCount) {
+  var _a;
+  if (samples.length === 0 || barCount === 0) return new Array(barCount).fill(0);
+  const result = new Array(barCount).fill(0);
+  if (samples.length < barCount) {
+    for (let i = 0; i < barCount; i++) {
+      const idx = Math.floor(i / barCount * samples.length);
+      result[i] = (_a = samples[idx]) != null ? _a : 0;
+    }
+    return result;
+  }
+  const chunkSize = samples.length / barCount;
+  for (let i = 0; i < barCount; i++) {
+    const start = Math.floor(i * chunkSize);
+    const end = Math.floor((i + 1) * chunkSize);
+    let max = 0;
+    for (let j = start; j < end && j < samples.length; j++) {
+      if (samples[j] > max) max = samples[j];
+    }
+    result[i] = max;
+  }
+  return result;
+}
+function LiveWaveform({
+  stream,
+  samplesRef
+}) {
+  const STRIDE = 4;
+  const MIN_BARS = 20;
+  const containerRef = React.useRef(null);
+  const [bars, setBars] = React.useState([]);
+  const barCountRef = React.useRef(MIN_BARS);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const updateBarCount = (width) => {
+      const count = Math.max(MIN_BARS, Math.floor(width / STRIDE));
+      barCountRef.current = count;
+      setBars((prev) => prev.length > count ? prev.slice(prev.length - count) : prev);
+    };
+    updateBarCount(el.clientWidth);
+    const ro = new ResizeObserver((entries) => {
+      var _a, _b;
+      const width = (_b = (_a = entries[0]) == null ? void 0 : _a.contentRect.width) != null ? _b : 0;
+      updateBarCount(width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  React.useEffect(() => {
+    if (!stream) {
+      setBars([]);
+      return;
+    }
+    const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+    const audioContext = new AudioContextClass();
+    const source = audioContext.createMediaStreamSource(stream);
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 256;
+    source.connect(analyser);
+    const dataArray = new Uint8Array(analyser.frequencyBinCount);
+    let rafId = null;
+    let lastUpdate = 0;
+    let cancelled = false;
+    const tick = (timestamp) => {
+      if (cancelled) return;
+      if (timestamp - lastUpdate >= 33) {
+        lastUpdate = timestamp;
+        analyser.getByteTimeDomainData(dataArray);
+        let sum = 0;
+        for (let i = 0; i < dataArray.length; i++) {
+          const v = (dataArray[i] - 128) / 128;
+          sum += v * v;
+        }
+        const rms = Math.sqrt(sum / dataArray.length);
+        if (samplesRef) samplesRef.current.push(rms);
+        setBars((prev) => {
+          if (prev.length < barCountRef.current) return [...prev, rms];
+          return [...prev.slice(1), rms];
+        });
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => {
+      cancelled = true;
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      void audioContext.close();
+    };
+  }, [stream, samplesRef]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "flex-1 relative h-8 min-w-0 overflow-hidden",
+      children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 right-0 flex items-center justify-end gap-[2px]", children: bars.map((amp, i) => {
+        const normalized = Math.min(amp * 4, 1);
+        const height = Math.max(2, Math.round(normalized * 32));
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-[2px] shrink-0 rounded-full bg-neutral-foreground",
+            style: { height: `${height}px` }
+          },
+          i
+        );
+      }) })
+    }
+  );
+}
+function RecordedWaveform({
+  samples,
+  progress = 0,
+  onSeek
+}) {
+  const STRIDE = 4;
+  const MIN_BARS = 20;
+  const containerRef = React.useRef(null);
+  const [barCount, setBarCount] = React.useState(MIN_BARS);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const updateBarCount = (width) => {
+      const count = Math.max(MIN_BARS, Math.floor(width / STRIDE));
+      setBarCount(count);
+    };
+    updateBarCount(el.clientWidth);
+    const ro = new ResizeObserver((entries) => {
+      var _a, _b;
+      updateBarCount((_b = (_a = entries[0]) == null ? void 0 : _a.contentRect.width) != null ? _b : 0);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const bars = React.useMemo(() => {
+    const aggregated = aggregateSamples(samples, barCount);
+    const maxPeak = Math.max(...aggregated, 0.01);
+    return aggregated.map((p) => p / maxPeak);
+  }, [samples, barCount]);
+  const isDraggingRef = React.useRef(false);
+  const seekFromClientX = React.useCallback(
+    (clientX) => {
+      const el = containerRef.current;
+      if (!el || !onSeek) return;
+      const rect = el.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const newProgress = Math.max(0, Math.min(x / rect.width, 1));
+      onSeek(newProgress);
+    },
+    [onSeek]
+  );
+  const handlePointerDown = (e) => {
+    if (!onSeek) return;
+    isDraggingRef.current = true;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    seekFromClientX(e.clientX);
+  };
+  const handlePointerMove = (e) => {
+    if (!isDraggingRef.current) return;
+    seekFromClientX(e.clientX);
+  };
+  const handlePointerUp = (e) => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  };
+  const barsLayoutWidth = bars.length * STRIDE - 2;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "flex-1 relative h-8 min-w-0 overflow-hidden select-none",
+        onSeek && "touch-none cursor-pointer"
+      ),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      role: onSeek ? "slider" : void 0,
+      "aria-label": onSeek ? "Posicao do audio" : void 0,
+      "aria-valuemin": onSeek ? 0 : void 0,
+      "aria-valuemax": onSeek ? 100 : void 0,
+      "aria-valuenow": onSeek ? Math.round(progress * 100) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 flex items-center gap-[2px]", children: bars.map((amp, i) => {
+          const isPlayed = i / bars.length <= progress;
+          const height = Math.max(2, Math.round(amp * 32));
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "w-[2px] shrink-0 rounded-full",
+                isPlayed ? "bg-neutral-foreground" : "bg-neutral-ring"
+              ),
+              style: { height: `${height}px` }
+            },
+            i
+          );
+        }) }),
+        progress > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-1/2 z-10 -translate-y-1/2 -translate-x-1/2 size-3 rounded-full bg-[#098A5E] shadow-md pointer-events-none",
+            style: { left: `${progress * barsLayoutWidth}px` },
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+var MIN_DURATION = 1e3;
+function PressedRecordingOverlay({
+  variant,
+  duration,
+  deltaX,
+  deltaY
+}) {
+  const aboutToLock = deltaY <= -60;
+  const aboutToCancel = deltaX <= -80;
+  const micTranslateX = Math.min(0, deltaX);
+  const micTranslateY = Math.min(0, deltaY);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "message-bar",
+      "data-state": "recording-pressed",
+      className: cn(
+        "flex items-center gap-2 p-2 sm:gap-3 sm:p-0",
+        variant === "audio-only" && "justify-center"
+      ),
+      children: variant === "audio-only" ? /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1 rounded-full bg-muted h-7 px-3 transition-colors",
+              aboutToCancel && "bg-destructive/10"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-xs",
+                    aboutToCancel ? "text-destructive font-medium" : "text-muted-foreground"
+                  ),
+                  children: "Cancelar"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 flex flex-col items-center gap-3 rounded-t-full bg-muted h-20 w-8 py-3 transition-transform",
+                aboutToLock && "scale-125 ring-2 ring-[#0EA460]"
+              ),
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(Lock, { className: cn("size-3", aboutToLock ? "text-[#0EA460]" : "text-muted-foreground") }),
+                /* @__PURE__ */ jsx(ChevronUp, { className: "size-3 text-muted-foreground animate-bounce" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MicButton,
+            {
+              variant: "large",
+              pressed: true,
+              ariaLabel: "Gravando \u2014 arraste para cima para travar, para esquerda para cancelar",
+              className: cn(aboutToCancel && "animate-shake"),
+              style: aboutToCancel ? void 0 : { transform: `translate(${micTranslateX}px, ${micTranslateY}px)` }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-full bg-muted h-7 px-3", children: [
+          /* @__PURE__ */ jsx(RecordingIndicator, {}),
+          /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums text-neutral-foreground", children: formatDuration(duration) })
+        ] })
+      ] }) : (
+        // Variant default: cancel pill flex-1 + mic
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex-1 flex items-center justify-between gap-2 rounded-xl bg-muted px-4 py-3 h-14",
+                aboutToCancel && "bg-destructive/10"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(RecordingIndicator, {}),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums text-neutral-foreground", children: formatDuration(duration) })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-1 text-xs",
+                      aboutToCancel ? "text-destructive font-medium" : "text-muted-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3" }),
+                      /* @__PURE__ */ jsx("span", { children: "Deslize para cancelar" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 flex flex-col items-center gap-3 rounded-t-full bg-muted h-20 w-8 py-3 transition-transform",
+                  aboutToLock && "scale-125 ring-2 ring-[#0EA460]"
+                ),
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx(Lock, { className: cn("size-3", aboutToLock ? "text-[#0EA460]" : "text-muted-foreground") }),
+                  /* @__PURE__ */ jsx(ChevronUp, { className: "size-3 text-muted-foreground animate-bounce" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MicButton,
+              {
+                variant: "large",
+                pressed: true,
+                ariaLabel: "Gravando \u2014 arraste para cima para travar, para esquerda para cancelar",
+                className: cn(aboutToCancel && "animate-shake"),
+                style: aboutToCancel ? void 0 : { transform: `translate(${micTranslateX}px, ${micTranslateY}px)` }
+              }
+            )
+          ] })
+        ] })
+      )
+    }
+  );
+}
+function MessageBar(_a) {
+  var _b = _a, {
+    state = "default",
+    value = "",
+    onChange,
+    onSendText,
+    onStartRecording,
+    onPauseRecording,
+    onResumeRecording,
+    onCancelRecording,
+    onSendAudio,
+    onTogglePlay,
+    recordingDuration = 0,
+    isPlaying = false,
+    recordingStream,
+    playbackProgress = 0,
+    onSeekPlayback,
+    placeholder = "Digite sua mensagem...",
+    className
+  } = _b, props = __objRest(_b, [
+    "state",
+    "value",
+    "onChange",
+    "onSendText",
+    "onStartRecording",
+    "onPauseRecording",
+    "onResumeRecording",
+    "onCancelRecording",
+    "onSendAudio",
+    "onTogglePlay",
+    "recordingDuration",
+    "isPlaying",
+    "recordingStream",
+    "playbackProgress",
+    "onSeekPlayback",
+    "placeholder",
+    "className"
+  ]);
+  const samplesRef = React.useRef([]);
+  const prevStateRef = React.useRef(state);
+  const lastBaseStateRef = React.useRef(
+    state === "audio-only" ? "audio-only" : "default"
+  );
+  React.useEffect(() => {
+    const prev = prevStateRef.current;
+    if (state === "recording" && prev !== "paused" && prev !== "recording") {
+      samplesRef.current = [];
+    }
+    if (state === "default" || state === "audio-only") {
+      lastBaseStateRef.current = state;
+    }
+    prevStateRef.current = state;
+  }, [state]);
+  const [isPressed, setIsPressed] = React.useState(false);
+  const [pressDelta, setPressDelta] = React.useState({ x: 0, y: 0 });
+  const pressDeltaRef = React.useRef({ x: 0, y: 0 });
+  const pressInfoRef = React.useRef({ startX: 0, startY: 0, startTime: 0, locked: false });
+  const callbacksRef = React.useRef({ onStartRecording, onCancelRecording, onSendAudio });
+  React.useEffect(() => {
+    callbacksRef.current = { onStartRecording, onCancelRecording, onSendAudio };
+  });
+  const updateDelta = (dx, dy) => {
+    pressDeltaRef.current = { x: dx, y: dy };
+    setPressDelta({ x: dx, y: dy });
+  };
+  const triggerHaptic = (ms = 50) => {
+    if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
+      try {
+        navigator.vibrate(ms);
+      } catch (e) {
+      }
+    }
+  };
+  React.useEffect(() => {
+    if (!isPressed) return;
+    const onMove = (e) => {
+      if (pressInfoRef.current.locked) return;
+      const { startX, startY } = pressInfoRef.current;
+      const dx = e.clientX - startX;
+      const dy = e.clientY - startY;
+      updateDelta(dx, dy);
+      if (dy <= -60) {
+        pressInfoRef.current.locked = true;
+        triggerHaptic(50);
+        setIsPressed(false);
+        updateDelta(0, 0);
+      }
+    };
+    const onEnd = () => {
+      var _a2, _b2, _c, _d;
+      if (pressInfoRef.current.locked) return;
+      const { startTime } = pressInfoRef.current;
+      const elapsed = Date.now() - startTime;
+      const { x: dx } = pressDeltaRef.current;
+      setIsPressed(false);
+      updateDelta(0, 0);
+      if (dx <= -80 || elapsed < MIN_DURATION) {
+        triggerHaptic(50);
+        (_b2 = (_a2 = callbacksRef.current).onCancelRecording) == null ? void 0 : _b2.call(_a2);
+        return;
+      }
+      (_d = (_c = callbacksRef.current).onSendAudio) == null ? void 0 : _d.call(_c);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onEnd);
+    window.addEventListener("pointercancel", onEnd);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onEnd);
+      window.removeEventListener("pointercancel", onEnd);
+    };
+  }, [isPressed]);
+  const handlePressStart = (e) => {
+    if (e.pointerType !== "touch") {
+      onStartRecording == null ? void 0 : onStartRecording();
+      return;
+    }
+    pressInfoRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startTime: Date.now(),
+      locked: false
+    };
+    updateDelta(0, 0);
+    setIsPressed(true);
+    onStartRecording == null ? void 0 : onStartRecording();
+  };
+  const pressHandlers = {
+    onPointerDown: handlePressStart
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && value.trim()) {
+      e.preventDefault();
+      onSendText == null ? void 0 : onSendText(value);
+    }
+  };
+  if (state === "audio-only") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        "data-slot": "message-bar",
+        "data-state": "audio-only",
+        className: cn("flex items-center justify-center p-2", className)
+      }, props), {
+        children: /* @__PURE__ */ jsx(MicButton, __spreadValues({}, pressHandlers))
+      })
+    );
+  }
+  if (state === "recording" && isPressed) {
+    return /* @__PURE__ */ jsx(
+      PressedRecordingOverlay,
+      {
+        variant: lastBaseStateRef.current,
+        duration: recordingDuration,
+        deltaX: pressDelta.x,
+        deltaY: pressDelta.y
+      }
+    );
+  }
+  if (state === "recording") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        "data-slot": "message-bar",
+        "data-state": "recording",
+        className: cn(
+          "flex items-center gap-2 p-2 sm:gap-3 sm:p-0",
+          className
+        )
+      }, props), {
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full sm:contents", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:contents", children: [
+            /* @__PURE__ */ jsx("div", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onCancelRecording,
+                icon: Trash2,
+                ariaLabel: "Cancelar gravacao"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 rounded-2xl bg-muted px-4 py-3", children: [
+              /* @__PURE__ */ jsx(RecordingIndicator, {}),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-neutral-foreground tabular-nums", children: formatDuration(recordingDuration) }),
+              /* @__PURE__ */ jsx(LiveWaveform, { stream: recordingStream, samplesRef }),
+              /* @__PURE__ */ jsx("div", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onPauseRecording,
+                  className: "shrink-0 inline-flex items-center justify-center text-neutral-foreground hover:opacity-80 transition-opacity",
+                  "aria-label": "Pausar gravacao",
+                  children: /* @__PURE__ */ jsx(Pause, { className: "size-5", fill: "currentColor", strokeWidth: 0 })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx(SendButton, { onClick: onSendAudio, ariaLabel: "Enviar audio" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between sm:hidden", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onCancelRecording,
+                icon: Trash2,
+                ariaLabel: "Cancelar gravacao"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onPauseRecording,
+                className: "shrink-0 inline-flex items-center justify-center size-10 text-neutral-foreground hover:opacity-80 transition-opacity",
+                "aria-label": "Pausar gravacao",
+                children: /* @__PURE__ */ jsx(Pause, { className: "size-5", fill: "currentColor", strokeWidth: 0 })
+              }
+            ),
+            /* @__PURE__ */ jsx(SendButton, { onClick: onSendAudio, ariaLabel: "Enviar audio" })
+          ] })
+        ] })
+      })
+    );
+  }
+  if (state === "paused") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        "data-slot": "message-bar",
+        "data-state": "paused",
+        className: cn(
+          "flex items-center gap-2 p-2 sm:gap-3 sm:p-0",
+          className
+        )
+      }, props), {
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full sm:contents", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:contents", children: [
+            /* @__PURE__ */ jsx("div", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onCancelRecording,
+                icon: Trash2,
+                ariaLabel: "Cancelar gravacao"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 rounded-2xl bg-muted px-4 py-3", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onTogglePlay,
+                  className: "shrink-0 inline-flex items-center justify-center text-neutral-foreground hover:opacity-80 transition-opacity",
+                  "aria-label": isPlaying ? "Pausar" : "Reproduzir",
+                  children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "size-5", fill: "currentColor", strokeWidth: 0 }) : /* @__PURE__ */ jsx(Play, { className: "size-5", fill: "currentColor", strokeWidth: 0 })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-neutral-foreground tabular-nums", children: formatDuration(recordingDuration) }),
+              /* @__PURE__ */ jsx(
+                RecordedWaveform,
+                {
+                  samples: samplesRef.current,
+                  progress: playbackProgress,
+                  onSeek: onSeekPlayback
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onResumeRecording,
+                  className: "shrink-0 inline-flex items-center justify-center text-neutral-foreground hover:opacity-80 transition-opacity",
+                  "aria-label": "Continuar gravacao",
+                  children: /* @__PURE__ */ jsx(Mic, { className: "size-5" })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx(SendButton, { onClick: onSendAudio, ariaLabel: "Enviar audio" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between sm:hidden", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onCancelRecording,
+                icon: Trash2,
+                ariaLabel: "Cancelar gravacao"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onResumeRecording,
+                className: "shrink-0 inline-flex items-center justify-center size-10 text-neutral-foreground hover:opacity-80 transition-opacity",
+                "aria-label": "Continuar gravacao",
+                children: /* @__PURE__ */ jsx(Mic, { className: "size-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(SendButton, { onClick: onSendAudio, ariaLabel: "Enviar audio" })
+          ] })
+        ] })
+      })
+    );
+  }
+  const isDisabled = state === "disabled";
+  const isActive = state === "active" || state === "default" && value.trim().length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "message-bar",
+      "data-state": state,
+      className: cn(
+        "flex items-center gap-2 rounded-2xl bg-muted p-2",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value,
+            onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+            onKeyDown: handleKeyDown,
+            disabled: isDisabled,
+            placeholder,
+            className: cn(
+              "flex-1 min-w-0 bg-transparent px-3 py-2 text-base text-neutral-foreground placeholder:text-neutral-muted-foreground outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50"
+            ),
+            "aria-label": "Mensagem"
+          }
+        ),
+        isActive ? /* @__PURE__ */ jsx(
+          SendButton,
+          {
+            onClick: () => value.trim() && (onSendText == null ? void 0 : onSendText(value)),
+            disabled: !value.trim()
+          }
+        ) : /* @__PURE__ */ jsx(MicButton, __spreadValues({}, pressHandlers))
+      ]
+    })
+  );
+}
+
+export { MessageBar };
+//# sourceMappingURL=chunk-PW464XEP.js.map
+//# sourceMappingURL=chunk-PW464XEP.js.map