@revikornmann/muka-ui 0.16.0 → 0.18.0

package/dist/cjs/components/Scrollbar/Scrollbar.css

@@ -0,0 +1,123 @@
+/* Scrollbar — Figma menu scrollbar (32px rail, chevrons, grip thumb) */
+
+.muka-scrollbar {
+  display: flex;
+  flex-shrink: 0;
+  border-left: var(--border-width-regular) solid var(--color-border-default);
+  background-color: var(--color-surface-level3);
+  user-select: none;
+}
+
+.muka-scrollbar--vertical {
+  flex-direction: column;
+  width: var(--size-2xl, 32px);
+  align-self: stretch;
+}
+
+.muka-scrollbar--horizontal {
+  flex-direction: row;
+  height: var(--size-2xl, 32px);
+  width: 100%;
+  border-left: none;
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-scrollbar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 100%;
+  height: var(--size-2xl, 32px);
+  padding: 0;
+  border: none;
+  background-color: var(--button-color-tertiary-background-default, var(--color-surface-level3));
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__button {
+  width: var(--size-2xl, 32px);
+  height: 100%;
+}
+
+.muka-scrollbar__button:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-scrollbar__divider {
+  flex-shrink: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border-default);
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__divider {
+  width: 1px;
+  height: 100%;
+}
+
+.muka-scrollbar__track {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__track {
+  flex-direction: row;
+  min-width: 0;
+  height: 100%;
+}
+
+.muka-scrollbar__thumb {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  margin-left: -7px;
+  cursor: grab;
+  touch-action: none;
+}
+
+.muka-scrollbar--horizontal .muka-scrollbar__thumb {
+  left: 0;
+  top: 50%;
+  width: auto;
+  height: 14px;
+  margin-left: 0;
+  margin-top: -7px;
+}
+
+.muka-scrollbar__thumb:active {
+  cursor: grabbing;
+}
+
+.muka-scrollbar__grip {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 14px;
+}
+
+.muka-scrollbar__grip::before,
+.muka-scrollbar__grip::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 2px;
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-text-subtle-default);
+}
+
+.muka-scrollbar__spacer {
+  flex: 1 1 auto;
+  min-height: 0;
+  background-color: var(--color-surface-level2);
+}

package/dist/cjs/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,118 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scrollbar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icon_1 = require("../Icon");
+require("./Scrollbar.css");
+/**
+ * Scrollbar — custom vertical scrollbar matching the Figma menu scrollbar
+ * (chevron buttons + grip thumb on a 32px rail).
+ */
+const Scrollbar = ({ viewportRef, orientation = 'vertical', step = 48, className = '', }) => {
+    const [metrics, setMetrics] = (0, react_1.useState)({
+        scrollTop: 0,
+        scrollLeft: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+        clientHeight: 0,
+        clientWidth: 0,
+    });
+    const updateMetrics = (0, react_1.useCallback)(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        setMetrics({
+            scrollTop: el.scrollTop,
+            scrollLeft: el.scrollLeft,
+            scrollHeight: el.scrollHeight,
+            scrollWidth: el.scrollWidth,
+            clientHeight: el.clientHeight,
+            clientWidth: el.clientWidth,
+        });
+    }, [viewportRef]);
+    (0, react_1.useEffect)(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        updateMetrics();
+        el.addEventListener('scroll', updateMetrics, { passive: true });
+        const resizeObserver = new ResizeObserver(updateMetrics);
+        resizeObserver.observe(el);
+        if (el.firstElementChild) {
+            resizeObserver.observe(el.firstElementChild);
+        }
+        return () => {
+            el.removeEventListener('scroll', updateMetrics);
+            resizeObserver.disconnect();
+        };
+    }, [viewportRef, updateMetrics]);
+    const isVertical = orientation === 'vertical';
+    const maxScroll = isVertical
+        ? metrics.scrollHeight - metrics.clientHeight
+        : metrics.scrollWidth - metrics.clientWidth;
+    if (maxScroll <= 0) {
+        return null;
+    }
+    const trackSize = isVertical ? metrics.clientHeight : metrics.clientWidth;
+    // Rail body between the two 32px chevron buttons + 2×1px dividers ≈ track - 66
+    const railBody = Math.max(trackSize - 66, 24);
+    const thumbRatio = isVertical
+        ? metrics.clientHeight / metrics.scrollHeight
+        : metrics.clientWidth / metrics.scrollWidth;
+    const thumbSize = Math.max(railBody * thumbRatio, 28);
+    const scrollPos = isVertical ? metrics.scrollTop : metrics.scrollLeft;
+    const thumbOffset = (scrollPos / maxScroll) * (railBody - thumbSize);
+    const scrollBy = (delta) => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        if (isVertical) {
+            el.scrollBy({ top: delta, behavior: 'smooth' });
+        }
+        else {
+            el.scrollBy({ left: delta, behavior: 'smooth' });
+        }
+    };
+    const handleThumbPointerDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        const startPos = isVertical ? event.clientY : event.clientX;
+        const startScroll = isVertical ? el.scrollTop : el.scrollLeft;
+        const movable = railBody - thumbSize;
+        const onMove = (e) => {
+            const current = isVertical ? e.clientY : e.clientX;
+            const delta = current - startPos;
+            const next = startScroll + (delta / movable) * maxScroll;
+            if (isVertical) {
+                el.scrollTop = next;
+            }
+            else {
+                el.scrollLeft = next;
+            }
+        };
+        const onUp = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    };
+    const rootClasses = [
+        'muka-scrollbar',
+        `muka-scrollbar--${orientation}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-scrollbar__button muka-scrollbar__button--start", tabIndex: -1, onClick: () => scrollBy(-step), "aria-label": isVertical ? 'Scroll up' : 'Scroll left', children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: isVertical ? 'arrow-up-s' : 'arrow-left-s', size: "sm" }) }), (0, jsx_runtime_1.jsx)("div", { className: "muka-scrollbar__divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "muka-scrollbar__track", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-scrollbar__thumb", style: isVertical
+                            ? { height: thumbSize, transform: `translateY(${thumbOffset}px)` }
+                            : { width: thumbSize, transform: `translateX(${thumbOffset}px)` }, onPointerDown: handleThumbPointerDown, children: (0, jsx_runtime_1.jsx)("span", { className: "muka-scrollbar__grip" }) }), (0, jsx_runtime_1.jsx)("div", { className: "muka-scrollbar__spacer" })] }), (0, jsx_runtime_1.jsx)("div", { className: "muka-scrollbar__divider" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-scrollbar__button muka-scrollbar__button--end", tabIndex: -1, onClick: () => scrollBy(step), "aria-label": isVertical ? 'Scroll down' : 'Scroll right', children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: isVertical ? 'arrow-down-s' : 'arrow-right-s', size: "sm" }) })] }));
+};
+exports.Scrollbar = Scrollbar;
+exports.default = exports.Scrollbar;
+//# sourceMappingURL=Scrollbar.js.map

package/dist/cjs/components/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../../../../components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Scrollbar/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.Scrollbar = void 0;
+var Scrollbar_1 = require("./Scrollbar");
+Object.defineProperty(exports, "Scrollbar", { enumerable: true, get: function () { return Scrollbar_1.Scrollbar; } });
+var Scrollbar_2 = require("./Scrollbar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Scrollbar_2).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Scrollbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Scrollbar/index.ts"],"names":[],"mappings":";;;;;;AAAA,yCAA6D;AAApD,sGAAA,SAAS,OAAA;AAClB,yCAAsC;AAA7B,qHAAA,OAAO,OAAA"}

package/dist/cjs/components/VoiceMessage/VoiceMessage.css

@@ -0,0 +1,29 @@
+/* VoiceMessage Component Styles */
+
+.muka-voice-message {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-width: min(16rem, 60vw);
+}
+
+.muka-voice-message__wave {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.muka-voice-message__time {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  font-size: var(--text-label-sm-fontSize, 0.75rem);
+  line-height: var(--text-label-sm-lineHeight, 1);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-subtle-default);
+}
+
+/* On the tinted own bubble the surface is the action color, so the timer flips
+ * to the inverse text token for contrast. */
+.muka-voice-message--own .muka-voice-message__time {
+  color: var(--color-text-default-inverse);
+}

package/dist/cjs/components/VoiceMessage/VoiceMessage.js

@@ -0,0 +1,85 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VoiceMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const Waveform_1 = require("../Waveform");
+const VoiceRecorder_1 = require("../VoiceRecorder");
+require("./VoiceMessage.css");
+/**
+ * VoiceMessage — inline play/pause player for a sent voice note.
+ *
+ * Composes a Muka `Button` with the shared token-based `Waveform`; the media
+ * stays with the app (`src` is whatever URL it hands over — Muka never fetches
+ * or signs it). Play/pause only: there is no transcription/speech-to-text.
+ */
+const VoiceMessage = ({ src, durationSec, peaks, variant, playLabel = 'Play voice message', pauseLabel = 'Pause voice message', unavailableLabel = 'Voice message unavailable', className = '', }) => {
+    const audioRef = (0, react_1.useRef)(null);
+    const [playing, setPlaying] = (0, react_1.useState)(false);
+    const [currentSec, setCurrentSec] = (0, react_1.useState)(0);
+    const [totalSec, setTotalSec] = (0, react_1.useState)(durationSec);
+    (0, react_1.useEffect)(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const onTime = () => setCurrentSec(audio.currentTime);
+        const onLoaded = () => {
+            if (Number.isFinite(audio.duration) && audio.duration > 0) {
+                setTotalSec(audio.duration);
+            }
+        };
+        const onEnded = () => {
+            setPlaying(false);
+            setCurrentSec(0);
+        };
+        audio.addEventListener('timeupdate', onTime);
+        audio.addEventListener('loadedmetadata', onLoaded);
+        audio.addEventListener('ended', onEnded);
+        return () => {
+            audio.removeEventListener('timeupdate', onTime);
+            audio.removeEventListener('loadedmetadata', onLoaded);
+            audio.removeEventListener('ended', onEnded);
+        };
+    }, [src]);
+    const toggle = () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (playing) {
+            audio.pause();
+            setPlaying(false);
+        }
+        else {
+            void audio
+                .play()
+                .then(() => setPlaying(true))
+                .catch(() => setPlaying(false));
+        }
+    };
+    const effectiveTotal = totalSec || durationSec;
+    const progress = effectiveTotal > 0 ? Math.min(1, currentSec / effectiveTotal) : 0;
+    const remaining = playing || currentSec > 0 ? effectiveTotal - currentSec : effectiveTotal;
+    // On own (tinted) bubbles the surface is the action color, so the played bars
+    // use the inverse text token for contrast; elsewhere the action color reads
+    // well against the light card.
+    const activeColor = variant === 'own'
+        ? 'var(--color-text-default-inverse)'
+        : 'var(--color-action-default)';
+    const inactiveColor = variant === 'own'
+        ? 'var(--color-black-alpha-3, rgba(0, 0, 0, 0.25))'
+        : 'var(--color-border-contrast)';
+    const classes = [
+        'muka-voice-message',
+        `muka-voice-message--${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant === 'own' ? 'secondary' : 'primary', size: "md", iconOnly: true, "aria-label": playing ? pauseLabel : playLabel, onClick: toggle, disabled: !src, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: playing ? 'pause' : 'play', variant: "fill", size: "sm" }) }), (0, jsx_runtime_1.jsx)("div", { className: "muka-voice-message__wave", children: (0, jsx_runtime_1.jsx)(Waveform_1.Waveform, { peaks: peaks, progress: progress, activeColor: activeColor, inactiveColor: inactiveColor, "aria-label": src ? undefined : unavailableLabel }) }), (0, jsx_runtime_1.jsx)("span", { className: "muka-voice-message__time", children: (0, VoiceRecorder_1.formatClock)(remaining) }), src && (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, src: src, preload: "metadata" })] }));
+};
+exports.VoiceMessage = VoiceMessage;
+exports.default = exports.VoiceMessage;
+//# sourceMappingURL=VoiceMessage.js.map

package/dist/cjs/components/VoiceMessage/VoiceMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceMessage.js","sourceRoot":"","sources":["../../../../components/VoiceMessage/VoiceMessage.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/VoiceMessage/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.VoiceMessage = void 0;
+var VoiceMessage_1 = require("./VoiceMessage");
+Object.defineProperty(exports, "VoiceMessage", { enumerable: true, get: function () { return VoiceMessage_1.VoiceMessage; } });
+var VoiceMessage_2 = require("./VoiceMessage");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(VoiceMessage_2).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/VoiceMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/VoiceMessage/index.ts"],"names":[],"mappings":";;;;;;AAAA,+CAIwB;AAHtB,4GAAA,YAAY,OAAA;AAId,+CAAyC;AAAhC,wHAAA,OAAO,OAAA"}

package/dist/cjs/components/VoiceRecorder/audio.js

@@ -0,0 +1,61 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VOICE_PEAK_COUNT = void 0;
+exports.downsamplePeaks = downsamplePeaks;
+exports.formatClock = formatClock;
+exports.isVoiceRecordingSupported = isVoiceRecordingSupported;
+/**
+ * Audio helpers shared by the voice-recording hook and the players.
+ *
+ * Pure, DOM-light utilities: peak downsampling for a compact persisted waveform
+ * and a clock formatter for the recorder timer / player countdown. No upload,
+ * no network, no speech-to-text.
+ */
+/** Default number of persisted waveform bars. Apps may override per clip. */
+exports.VOICE_PEAK_COUNT = 48;
+/**
+ * Downsample a stream of amplitude samples (each already 0..1) into exactly
+ * `count` normalized peaks by taking the max of each bucket, then scaling so the
+ * loudest bar reaches 1. Pure — unit-testable independently of the DOM.
+ */
+function downsamplePeaks(samples, count = exports.VOICE_PEAK_COUNT) {
+    if (samples.length === 0 || count <= 0)
+        return [];
+    const buckets = new Array(count).fill(0);
+    const size = samples.length / count;
+    for (let i = 0; i < count; i += 1) {
+        const start = Math.floor(i * size);
+        const end = Math.min(samples.length, Math.max(start + 1, Math.floor((i + 1) * size)));
+        let peak = 0;
+        for (let j = start; j < end; j += 1) {
+            const v = Math.abs(samples[j]);
+            if (v > peak)
+                peak = v;
+        }
+        buckets[i] = peak;
+    }
+    const max = buckets.reduce((m, v) => (v > m ? v : m), 0);
+    if (max <= 0)
+        return buckets;
+    return buckets.map((v) => Math.min(1, v / max));
+}
+/** Format a number of seconds as `m:ss` for the recorder timer / player. */
+function formatClock(totalSeconds) {
+    const safe = Number.isFinite(totalSeconds) && totalSeconds > 0
+        ? Math.floor(totalSeconds)
+        : 0;
+    const minutes = Math.floor(safe / 60);
+    const seconds = safe % 60;
+    const paddedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+    return `${minutes}:${paddedSeconds}`;
+}
+/** True when this browser can record audio at all (SSR-safe). */
+function isVoiceRecordingSupported() {
+    return (typeof window !== 'undefined' &&
+        typeof navigator !== 'undefined' &&
+        !!navigator.mediaDevices &&
+        typeof navigator.mediaDevices.getUserMedia === 'function' &&
+        typeof MediaRecorder !== 'undefined');
+}
+//# sourceMappingURL=audio.js.map

package/dist/cjs/components/VoiceRecorder/audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.js","sourceRoot":"","sources":["../../../../components/VoiceRecorder/audio.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AAkBb,0CAuBC;AAGD,kCASC;AAGD,8DAQC;AA9DD;;;;;;GAMG;AAEH,6EAA6E;AAChE,QAAA,gBAAgB,GAAG,EAAE,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,eAAe,CAC7B,OAAiB,EACjB,QAAgB,wBAAgB;IAEhC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC;IAClD,MAAM,OAAO,GAAa,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;IACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;QACnC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAClB,OAAO,CAAC,MAAM,EACd,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAChD,CAAC;QACF,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,GAAG,IAAI;gBAAE,IAAI,GAAG,CAAC,CAAC;QACzB,CAAC;QACD,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpB,CAAC;IACD,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,IAAI,GAAG,IAAI,CAAC;QAAE,OAAO,OAAO,CAAC;IAC7B,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;AAClD,CAAC;AAED,4EAA4E;AAC5E,SAAgB,WAAW,CAAC,YAAoB;IAC9C,MAAM,IAAI,GACR,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,YAAY,GAAG,CAAC;QAC/C,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QAC1B,CAAC,CAAC,CAAC,CAAC;IACR,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;IAC1B,MAAM,aAAa,GAAG,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC;IAClE,OAAO,GAAG,OAAO,IAAI,aAAa,EAAE,CAAC;AACvC,CAAC;AAED,iEAAiE;AACjE,SAAgB,yBAAyB;IACvC,OAAO,CACL,OAAO,MAAM,KAAK,WAAW;QAC7B,OAAO,SAAS,KAAK,WAAW;QAChC,CAAC,CAAC,SAAS,CAAC,YAAY;QACxB,OAAO,SAAS,CAAC,YAAY,CAAC,YAAY,KAAK,UAAU;QACzD,OAAO,aAAa,KAAK,WAAW,CACrC,CAAC;AACJ,CAAC"}

package/dist/cjs/components/VoiceRecorder/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.VOICE_PEAK_COUNT = exports.isVoiceRecordingSupported = exports.formatClock = exports.downsamplePeaks = exports.useVoiceRecorder = void 0;
+var useVoiceRecorder_1 = require("./useVoiceRecorder");
+Object.defineProperty(exports, "useVoiceRecorder", { enumerable: true, get: function () { return useVoiceRecorder_1.useVoiceRecorder; } });
+var audio_1 = require("./audio");
+Object.defineProperty(exports, "downsamplePeaks", { enumerable: true, get: function () { return audio_1.downsamplePeaks; } });
+Object.defineProperty(exports, "formatClock", { enumerable: true, get: function () { return audio_1.formatClock; } });
+Object.defineProperty(exports, "isVoiceRecordingSupported", { enumerable: true, get: function () { return audio_1.isVoiceRecordingSupported; } });
+Object.defineProperty(exports, "VOICE_PEAK_COUNT", { enumerable: true, get: function () { return audio_1.VOICE_PEAK_COUNT; } });
+var useVoiceRecorder_2 = require("./useVoiceRecorder");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useVoiceRecorder_2).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/VoiceRecorder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/VoiceRecorder/index.ts"],"names":[],"mappings":";;;;;;AAAA,uDAK4B;AAJ1B,oHAAA,gBAAgB,OAAA;AAKlB,iCAKiB;AAJf,wGAAA,eAAe,OAAA;AACf,oGAAA,WAAW,OAAA;AACX,kHAAA,yBAAyB,OAAA;AACzB,yGAAA,gBAAgB,OAAA;AAElB,uDAA6C;AAApC,4HAAA,OAAO,OAAA"}