@app-studio/components 0.10.17

package/dist/native/components/AudioInput/AudioInput/AudioInput.props.d.ts

@@ -0,0 +1,18 @@
+import { ViewProps } from 'app-studio';
+export interface AudioInputProps extends ViewProps {
+    onAudio: (file: File) => void;
+}
+export interface AudioInputViewProps extends AudioInputProps {
+    recording: boolean;
+    paused: boolean;
+    audioBlob: Blob | null;
+    analyserNode: AnalyserNode | null;
+    duration: number;
+    error: string | null;
+    startRecording: () => void;
+    stopRecording: () => void;
+    pauseRecording: () => void;
+    resumeRecording: () => void;
+    resetRecording: () => void;
+    handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/native/components/AudioInput/AudioInput/AudioInput.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AudioInput.props.js.map

package/dist/native/components/AudioInput/AudioInput/AudioInput.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioInput.props.js","sourceRoot":"","sources":["../../../../../src/components/AudioInput/AudioInput/AudioInput.props.ts"],"names":[],"mappings":""}

package/dist/native/components/AudioInput/AudioInput/AudioInput.state.d.ts

@@ -0,0 +1,15 @@
+import { AudioInputProps } from './AudioInput.props';
+export declare function useAudioInputState(props: AudioInputProps): {
+    recording: boolean;
+    paused: boolean;
+    audioBlob: Blob | null;
+    analyserNode: AnalyserNode | null;
+    duration: number;
+    error: string | null;
+    startRecording: () => Promise<void>;
+    stopRecording: () => void;
+    pauseRecording: () => void;
+    resumeRecording: () => void;
+    resetRecording: () => void;
+    handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/native/components/AudioInput/AudioInput/AudioInput.state.js

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useAudioRecording } from '../useAudioRecording';
+// This custom hook `useAudioInputState` encapsulates the state management and core logic for the `AudioInput` component, integrating audio recording functionality and handling user-provided audio files.
+export function useAudioInputState(props) {
+    const { onAudio } = props;
+    const { recording, paused, audioBlob, analyserNode, duration, error, startRecording, stopRecording, pauseRecording, resumeRecording, resetRecording, } = useAudioRecording();
+    useEffect(() => {
+        if (audioBlob && onAudio) {
+            const file = new File([audioBlob], 'recording.webm', {
+                type: audioBlob.type || 'audio/webm;codecs=opus',
+            });
+            onAudio(file);
+        }
+    }, [audioBlob, onAudio]);
+    const handleFileChange = (e) => {
+        const file = e.target.files?.[0];
+        if (file && onAudio) {
+            onAudio(file);
+        }
+    };
+    return {
+        recording,
+        paused,
+        audioBlob,
+        analyserNode,
+        duration,
+        error,
+        startRecording,
+        stopRecording,
+        pauseRecording,
+        resumeRecording,
+        resetRecording,
+        handleFileChange,
+    };
+}
+//# sourceMappingURL=AudioInput.state.js.map

package/dist/native/components/AudioInput/AudioInput/AudioInput.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioInput.state.js","sourceRoot":"","sources":["../../../../../src/components/AudioInput/AudioInput/AudioInput.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,2MAA2M;AAC3M,MAAM,UAAU,kBAAkB,CAAC,KAAsB;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1B,MAAM,EACJ,SAAS,EACT,MAAM,EACN,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,cAAc,EACd,aAAa,EACb,cAAc,EACd,eAAe,EACf,cAAc,GACf,GAAG,iBAAiB,EAAE,CAAC;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;YACzB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,SAAS,CAAC,EAAE,gBAAgB,EAAE;gBACnD,IAAI,EAAE,SAAS,CAAC,IAAI,IAAI,wBAAwB;aACjD,CAAC,CAAC;YACH,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IACzB,MAAM,gBAAgB,GAAG,CAAC,CAAsC,EAAE,EAAE;QAClE,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QACjC,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IACF,OAAO;QACL,SAAS;QACT,MAAM;QACN,SAAS;QACT,YAAY;QACZ,QAAQ;QACR,KAAK;QACL,cAAc;QACd,aAAa;QACb,cAAc;QACd,eAAe;QACf,cAAc;QACd,gBAAgB;KACjB,CAAC;AACJ,CAAC"}

package/dist/native/components/AudioInput/AudioInput/AudioInput.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AudioInputViewProps } from './AudioInput.props';
+export declare function AudioInputView({ onAudio, recording, paused, audioBlob, analyserNode, duration, error, startRecording, stopRecording, pauseRecording, resumeRecording, resetRecording, handleFileChange, ...viewProps }: AudioInputViewProps): React.JSX.Element;
+export default AudioInputView;

package/dist/native/components/AudioInput/AudioInput/AudioInput.view.js

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import { AudioWaveform } from '../AudioWaveform/AudioWaveform';
+import { View, Horizontal, Vertical, Text } from 'app-studio';
+import { Uploader } from '../../Uploader/Uploader';
+import { AttachmentIcon, CloseIcon, MicrophoneIcon, StopIcon, } from '../../Icon/Icon';
+// Helper function to format a duration in seconds into a 'MM:SS' string.
+//
+// Parameters:
+// - `duration`: The time in seconds to format.
+//
+// Steps:
+// 1. Calculates minutes by dividing duration by 60 and flooring the result.
+// 2. Calculates remaining seconds using the modulo operator.
+// 3. Formats the output string, padding seconds with a leading zero if necessary.
+function formatDuration(duration) {
+    const minutes = Math.floor(duration / 60);
+    const seconds = duration % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+// React functional component responsible for rendering the UI for audio input, including recording controls, file upload, waveform display, and audio playback preview.
+//
+// Parameters (props):
+// - `onAudio`: Callback function triggered when an audio file is selected or a recording is completed.
+// - `recording`: Boolean indicating if recording is currently active.
+// - `paused`: Boolean indicating if recording is currently paused.
+// - `audioBlob`: The recorded audio data as a Blob object.
+// - `analyserNode`: An AnalyserNode from the Web Audio API, used for visualizing audio waveforms during recording.
+// - `duration`: The current duration of the recording or selected audio.
+// - `error`: An error message to display if an issue occurs.
+// - `startRecording`: Function to initiate audio recording.
+// - `stopRecording`: Function to stop audio recording.
+// - `pauseRecording`: Function to pause audio recording.
+// - `resumeRecording`: Function to resume a paused recording.
+// - `resetRecording`: Function to clear the current recording and reset its state.
+// - `handleFileChange`: Function to handle changes from an input file element (used if file upload mechanism directly uses an input element).
+// - `...viewProps`: Rest of the props passed down to the root `Vertical` container.
+export function AudioInputView({ onAudio, recording, paused, audioBlob, analyserNode, duration, error, startRecording, stopRecording, pauseRecording, resumeRecording, resetRecording, handleFileChange, ...viewProps }) {
+    // State variable to store information about the audio preview, including its URL and label, for playback or display.
+    const [preview, setPreview] = useState(null);
+    // Effect hook that creates a temporary URL for the `audioBlob` when it changes, allowing for local playback or display. It also cleans up the URL when the component unmounts or `audioBlob` changes.
+    //
+    // Steps:
+    // 1. Checks if `audioBlob` exists.
+    // 2. If so, creates an object URL from the `audioBlob`.
+    // 3. Sets the `preview` state with the new URL and a generated label.
+    // 4. Returns a cleanup function to revoke the object URL, preventing memory leaks.
+    //
+    // Dependencies: `audioBlob`
+    useEffect(() => {
+        if (audioBlob) {
+            const url = URL.createObjectURL(audioBlob);
+            setPreview({
+                url,
+                label: `recording-${Date.now()}.webm`,
+            });
+            return () => {
+                URL.revokeObjectURL(url);
+            };
+        }
+        return () => { };
+    }, [audioBlob]);
+    // Function to clear the audio preview, revoke its object URL if it exists, and reset the recording state.
+    //
+    // Steps:
+    // 1. Checks if a `preview` URL exists and revokes it to release resources.
+    // 2. Sets the `preview` state back to `null`.
+    // 3. Calls `resetRecording` to clear the current recording.
+    const clearPreview = () => {
+        if (preview?.url) {
+            URL.revokeObjectURL(preview.url);
+        }
+        setPreview(null);
+        resetRecording();
+    };
+    // Handler function for when a user selects an audio file via the `Uploader` component.
+    //
+    // Parameters:
+    // - `file`: The selected `File` object.
+    //
+    // Steps:
+    // 1. Calls the `onAudio` prop with the selected file.
+    // 2. If a previous `preview` URL exists, it revokes it.
+    // 3. Creates a new object URL for the selected file and sets the `preview` state with it and the file's name.
+    const handleAudioFileSelect = (file) => {
+        onAudio(file);
+        if (preview?.url) {
+            URL.revokeObjectURL(preview.url);
+        }
+        setPreview({
+            url: URL.createObjectURL(file),
+            label: file.name,
+        });
+    };
+    return (<Vertical gap="10px" width="100%" {...viewProps}>
+      <Horizontal gap={12} alignItems="center" padding="12px 14px" border="1px solid #E5E7EB" borderRadius="12px" backgroundColor="color-white">
+        <Uploader accept="audio/*" icon={<AttachmentIcon widthHeight={16}/>} maxSize={100 * 1024 * 1024} onFileSelect={handleAudioFileSelect} fileType="file" multiple={false} renderError={({ errorMessage }) => null} views={{
+            container: {
+                width: '36px',
+                height: '36px',
+                cursor: 'pointer',
+                border: '1px solid #E5E7EB',
+                borderRadius: '10px',
+                backgroundColor: 'color-white',
+                transition: 'background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease',
+                _hover: { backgroundColor: '#F8FAFC', borderColor: '#CBD5E1' },
+            },
+        }} containerProps={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '10px',
+            width: '36px',
+            height: '36px',
+        }} validateFile={(file) => {
+            if (file.size > 100 * 1024 * 1024) {
+                return 'File size exceeds 100MB limit';
+            }
+            if (!file.type.startsWith('audio/')) {
+                return 'Only audio files are allowed';
+            }
+            return null;
+        }}/>
+        <View as="button" type="button" onClick={recording ? stopRecording : startRecording} width="36px" height="36px" minWidth="36px" display="flex" alignItems="center" justifyContent="center" backgroundColor="theme-primary" color="color-white" borderRadius="999px" border="0" cursor="pointer" transition="background-color 0.2s ease, opacity 0.2s ease" _hover={{ opacity: 0.92 }}>
+          {recording ? (<StopIcon widthHeight={14} color="currentColor" filled={false}/>) : (<MicrophoneIcon widthHeight={18} color="currentColor" filled={false}/>)}
+        </View>
+        <View flex={1} minWidth={120}>
+          <AudioWaveform analyserNode={recording ? analyserNode : null} isPaused={!recording || paused}/>
+        </View>
+        <Text fontSize="12px" lineHeight="16px" color="color-gray-500" whiteSpace="nowrap">
+          {formatDuration(duration)}
+        </Text>
+      </Horizontal>
+      {preview && !recording && (<Vertical gap="8px" padding="12px 14px" border="1px solid #E5E7EB" borderRadius="12px" backgroundColor="color-white">
+          <Horizontal alignItems="center" justifyContent="space-between" gap={8}>
+            <Text fontSize="12px" lineHeight="16px" color="color-gray-500">
+              {preview.label}
+            </Text>
+            <View as="button" type="button" onClick={clearPreview} width="24px" height="24px" display="flex" alignItems="center" justifyContent="center" border="0" backgroundColor="transparent" color="color-gray-500" cursor="pointer">
+              <CloseIcon widthHeight={14} color="currentColor"/>
+            </View>
+          </Horizontal>
+          <View as="audio" controls src={preview.url} width="100%"/>
+        </Vertical>)}
+      {error && (<Text fontSize="11px" lineHeight="16px" color="color-red-500">
+          {error}
+        </Text>)}
+    </Vertical>);
+}
+export default AudioInputView;
+//# sourceMappingURL=AudioInput.view.js.map

package/dist/native/components/AudioInput/AudioInput/AudioInput.view.js.map

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

package/dist/native/components/AudioInput/AudioInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AudioInputProps } from './AudioInput/AudioInput.props';
+export declare function AudioInput(props: AudioInputProps): React.JSX.Element;
+export default AudioInput;

package/dist/native/components/AudioInput/AudioInput.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AudioInputView } from './AudioInput/AudioInput.view';
+import { useAudioInputState } from './AudioInput/AudioInput.state';
+// This file defines the main AudioInput functional component, acting as the primary orchestrator. It manages the component's state using the 'useAudioInputState' hook and renders the visual presentation through the 'AudioInputView' component, passing along both properties and managed state.
+export function AudioInput(props) {
+    const state = useAudioInputState(props);
+    return <AudioInputView {...props} {...state}/>;
+}
+export default AudioInput;
+//# sourceMappingURL=AudioInput.js.map

package/dist/native/components/AudioInput/AudioInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioInput.js","sourceRoot":"","sources":["../../../../src/components/AudioInput/AudioInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEnE,oSAAoS;AACpS,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CAAC,cAAc,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAClD,CAAC;AACD,eAAe,UAAU,CAAC"}

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AudioWaveformProps } from './AudioWaveform.props';
+export declare const AudioWaveform: React.FC<AudioWaveformProps>;

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState, startTransition } from 'react';
+import { AudioWaveformView } from './AudioWaveform.view';
+// This component analyzes audio data from an AnalyserNode to generate and display a real-time waveform visualization, managing amplitude capture, state updates, and rendering through AudioWaveformView.
+export const AudioWaveform = ({ analyserNode, isPaused, ...viewProps }) => {
+    const intervalRef = useRef(null);
+    const MAX_BARS = 60;
+    const resolution = 32;
+    const [bars, setBars] = useState([]);
+    useEffect(() => {
+        if (!analyserNode) {
+            setBars(Array(MAX_BARS).fill(-1));
+            return;
+        }
+        const bufferLength = analyserNode.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+        const captureAmplitude = () => {
+            analyserNode.getByteTimeDomainData(dataArray);
+            let sum = 0;
+            for (let i = 0; i < bufferLength; i++) {
+                const sample = (dataArray[i] - 128) / 128;
+                sum += sample * sample;
+            }
+            const rms = Math.sqrt(sum / bufferLength);
+            startTransition(() => {
+                setBars((prev) => {
+                    const newBars = [...prev, rms];
+                    const slicedBars = newBars.slice(-MAX_BARS);
+                    if (slicedBars.length < MAX_BARS) {
+                        return [
+                            ...Array(MAX_BARS - slicedBars.length).fill(-1),
+                            ...slicedBars,
+                        ];
+                    }
+                    return slicedBars;
+                });
+            });
+        };
+        intervalRef.current = setInterval(captureAmplitude, resolution);
+        return () => {
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+        };
+    }, [analyserNode]);
+    return <AudioWaveformView bars={bars} isPaused={isPaused} {...viewProps}/>;
+};
+//# sourceMappingURL=AudioWaveform.js.map

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioWaveform.js","sourceRoot":"","sources":["../../../../../src/components/AudioInput/AudioWaveform/AudioWaveform.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,0MAA0M;AAC1M,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,YAAY,EACZ,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,OAAO;QACT,CAAC;QACD,MAAM,YAAY,GAAG,YAAY,CAAC,iBAAiB,CAAC;QACpD,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,YAAY,CAAC,CAAC;QAC/C,MAAM,gBAAgB,GAAG,GAAG,EAAE;YAC5B,YAAY,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC;YAC9C,IAAI,GAAG,GAAG,CAAC,CAAC;YACZ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;gBAC1C,GAAG,IAAI,MAAM,GAAG,MAAM,CAAC;YACzB,CAAC;YACD,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,CAAC;YAC1C,eAAe,CAAC,GAAG,EAAE;gBACnB,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;oBACf,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC;oBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;oBAC5C,IAAI,UAAU,CAAC,MAAM,GAAG,QAAQ,EAAE,CAAC;wBACjC,OAAO;4BACL,GAAG,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;4BAC/C,GAAG,UAAU;yBACd,CAAC;oBACJ,CAAC;oBACD,OAAO,UAAU,CAAC;gBACpB,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QACF,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;QAChE,OAAO,GAAG,EAAE;YACV,IAAI,WAAW,CAAC,OAAO;gBAAE,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACnB,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AAC9E,CAAC,CAAC"}

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.props.d.ts

@@ -0,0 +1,9 @@
+import { ViewProps } from 'app-studio';
+export interface AudioWaveformProps extends ViewProps {
+    analyserNode: AnalyserNode | null;
+    isPaused: boolean;
+}
+export interface AudioWaveformViewProps extends ViewProps {
+    isPaused: boolean;
+    bars: number[];
+}

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AudioWaveform.props.js.map

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioWaveform.props.js","sourceRoot":"","sources":["../../../../../src/components/AudioInput/AudioWaveform/AudioWaveform.props.ts"],"names":[],"mappings":""}

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.view.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AudioWaveformViewProps } from './AudioWaveform.props';
+export declare function clamp(value: number, min: number, max: number): number;
+export declare const AudioWaveformView: React.FC<AudioWaveformViewProps>;

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.view.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Horizontal, View } from 'app-studio';
+// Defines a utility function to clamp a given number between a minimum and maximum value. This ensures that a value always stays within a specified range, preventing it from going too low or too high.
+export function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+// Defines the `AudioWaveformView` functional component responsible for rendering the visual representation of an audio waveform. It takes waveform data (`bars`), playback status (`isPaused`), and other generic view properties as input.
+export const AudioWaveformView = ({ bars, isPaused, ...viewProps }) => {
+    // Initializes `scalingFactor` which is used to convert normalized audio amplitude values into pixel heights for the waveform bars, visually amplifying their representation.
+    const scalingFactor = 300;
+    // Defines an array of predefined heights for waveform bars. These heights are used as visual placeholders when the audio is paused or when no active amplitude data is present, providing a subtle animation effect.
+    const placeholderHeights = [
+        6, 16, 23, 24, 18, 9, 14, 22, 24, 20, 11, 12, 20, 24, 21, 13, 9, 19, 24, 23,
+        16, 7, 17, 23, 23, 18, 8, 15, 22, 24, 20, 10,
+    ];
+    return (<Horizontal alignItems="center" minWidth={120} gap={2} height={24} width="100%" maxWidth="100%" {...viewProps}>
+      {bars.map((amplitude, index) => (<View key={index} width={3} borderRadius={2} backgroundColor={isPaused
+                ? 'color-gray-300'
+                : amplitude >= 0
+                    ? 'theme-primary'
+                    : 'color-gray-300'} style={{
+                height: `${amplitude >= 0
+                    ? clamp(amplitude * scalingFactor, 6, 24)
+                    : placeholderHeights[index % placeholderHeights.length]}px`,
+            }}/>))}
+    </Horizontal>);
+};
+//# sourceMappingURL=AudioWaveform.view.js.map

package/dist/native/components/AudioInput/AudioWaveform/AudioWaveform.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioWaveform.view.js","sourceRoot":"","sources":["../../../../../src/components/AudioInput/AudioWaveform/AudioWaveform.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAE9C,yMAAyM;AACzM,MAAM,UAAU,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAC3D,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C,CAAC;AACD,4OAA4O;AAC5O,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,IAAI,EACJ,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,EAAE;IACH,6KAA6K;IAC7K,MAAM,aAAa,GAAG,GAAG,CAAC;IAC1B,qNAAqN;IACrN,MAAM,kBAAkB,GAAG;QACzB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;QAC3E,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;KAC7C,CAAC;IACF,OAAO,CACL,CAAC,UAAU,CACT,UAAU,CAAC,QAAQ,CACnB,QAAQ,CAAC,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,MAAM,CAAC,CAAC,EAAE,CAAC,CACX,KAAK,CAAC,MAAM,CACZ,QAAQ,CAAC,MAAM,CACf,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,KAAK,CAAC,CAAC,CAAC,CAAC,CACT,YAAY,CAAC,CAAC,CAAC,CAAC,CAChB,eAAe,CAAC,CACd,QAAQ;gBACN,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,SAAS,IAAI,CAAC;oBAChB,CAAC,CAAC,eAAe;oBACjB,CAAC,CAAC,gBACN,CAAC,CACD,KAAK,CAAC,CAAC;gBACL,MAAM,EAAE,GACN,SAAS,IAAI,CAAC;oBACZ,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;oBACzC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAC1D,IAAI;aACL,CAAC,EACF,CACH,CAAC,CACJ;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC"}

package/dist/native/components/AudioInput/useAudioRecording.d.ts

@@ -0,0 +1,13 @@
+export declare function useAudioRecording(): {
+    readonly recording: boolean;
+    readonly paused: boolean;
+    readonly audioBlob: Blob | null;
+    readonly analyserNode: AnalyserNode | null;
+    readonly duration: number;
+    readonly error: string | null;
+    readonly startRecording: () => Promise<void>;
+    readonly stopRecording: () => void;
+    readonly pauseRecording: () => void;
+    readonly resumeRecording: () => void;
+    readonly resetRecording: () => void;
+};