@app-studio/components 0.10.17

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

@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+// Defines a custom React hook for managing audio recording functionality, providing state, controls, and audio analysis.
+export function useAudioRecording() {
+    // Manages the recording state; `true` if currently recording, `false` otherwise.
+    const [recording, setRecording] = useState(false);
+    // Indicates whether the recording is currently paused (`true`) or active (`false`).
+    const [paused, setPaused] = useState(false);
+    // Tracks the current duration of the recording in seconds.
+    const [duration, setDuration] = useState(0);
+    // Stores any error messages that occur during the recording process, such as microphone access issues.
+    const [error, setError] = useState(null);
+    // Holds a reference to the Web Audio API AnalyserNode, used for visualizing audio data.
+    const [analyserNode, setAnalyserNode] = useState(null);
+    // Stores the final audio recording as a Blob object after the recording is stopped.
+    const [audioBlob, setAudioBlob] = useState(null);
+    // A mutable ref object to hold the MediaRecorder instance, allowing it to persist across re-renders without causing updates.
+    const mediaRecorderRef = useRef(null);
+    // A mutable ref object to hold the AudioContext instance, essential for audio processing.
+    const audioContextRef = useRef(null);
+    // A mutable ref object to hold the AnalyserNode instance for audio visualization.
+    const analyserRef = useRef(null);
+    // A mutable ref object to hold the MediaStream object, representing the audio input from the microphone.
+    const streamRef = useRef(null);
+    // A mutable ref object to accumulate Blob chunks of audio data during recording.
+    const chunksRef = useRef([]);
+    // A mutable ref object to hold the ID of the interval timer used for tracking recording duration.
+    const timerRef = useRef(null);
+    // Determines the preferred MIME type for the audio recording, falling back to a general webm type if opus is not supported.
+    const MIME_TYPE = typeof MediaRecorder !== 'undefined' &&
+        MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
+        ? 'audio/webm;codecs=opus'
+        : 'audio/webm';
+    // A memoized callback function responsible for stopping all active recording processes, releasing media streams, audio contexts, and clearing timers.
+    const cleanup = useCallback(() => {
+        if (mediaRecorderRef.current) {
+            if (mediaRecorderRef.current.state !== 'inactive') {
+                mediaRecorderRef.current.stop();
+            }
+            mediaRecorderRef.current = null;
+        }
+        if (streamRef.current) {
+            streamRef.current.getTracks().forEach((track) => track.stop());
+            streamRef.current = null;
+        }
+        if (audioContextRef.current) {
+            audioContextRef.current.close();
+            audioContextRef.current = null;
+        }
+        if (analyserRef.current) {
+            analyserRef.current.disconnect();
+            analyserRef.current = null;
+        }
+        setAnalyserNode(null);
+        if (timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    // A memoized asynchronous callback function to initiate the audio recording process.
+    const startRecording = useCallback(async () => {
+        // Calls the cleanup function to ensure any previous recording resources are released before starting a new one.
+        cleanup();
+        // Resets the error state, clearing any previous errors.
+        setError(null);
+        // Resets the recording duration to zero.
+        setDuration(0);
+        // Clears the array holding audio data chunks for a fresh recording.
+        chunksRef.current = [];
+        try {
+            // Requests access to the user's microphone, returning a MediaStream object.
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            // Stores the obtained media stream in a ref for later access and cleanup.
+            streamRef.current = stream;
+            // Determines the actual MIME type to use for the MediaRecorder, preferring 'audio/webm;codecs=opus' if supported.
+            const mimeType = MediaRecorder.isTypeSupported(MIME_TYPE)
+                ? MIME_TYPE
+                : undefined;
+            // Initializes a new MediaRecorder instance with the microphone stream and the determined MIME type.
+            const mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+            // Stores the MediaRecorder instance in a ref for controlling recording actions.
+            mediaRecorderRef.current = mediaRecorder;
+            // Creates a new Web Audio API AudioContext for processing and analyzing audio.
+            const audioContext = new (window.AudioContext ||
+                window.webkitAudioContext)();
+            // Stores the AudioContext instance in a ref for managing audio graph operations.
+            audioContextRef.current = audioContext;
+            // Creates an AudioNode from the MediaStream, allowing the microphone input to be processed by the audio context.
+            const source = audioContext.createMediaStreamSource(stream);
+            // Creates an AnalyserNode, which can provide real-time frequency and time-domain data.
+            const analyser = audioContext.createAnalyser();
+            // Sets the FFT (Fast Fourier Transform) size for the analyser, determining the frequency resolution.
+            analyser.fftSize = 256;
+            // Adjusts the smoothing time constant, which averages out sudden changes in the audio data for smoother visualization.
+            analyser.smoothingTimeConstant = 0.8;
+            // Connects the audio source (microphone stream) to the analyser node for processing.
+            source.connect(analyser);
+            // Stores the AnalyserNode in a ref for external access and potential manipulation.
+            analyserRef.current = analyser;
+            // Updates the state with the AnalyserNode, making it available for components to use for audio visualization.
+            setAnalyserNode(analyser);
+            // Sets up an event handler to collect audio data chunks as they become available from the MediaRecorder.
+            mediaRecorder.ondataavailable = (e) => {
+                if (e.data.size > 0) {
+                    chunksRef.current.push(e.data);
+                }
+            };
+            // Sets up an event handler that triggers when the MediaRecorder stops, processing the collected audio chunks.
+            mediaRecorder.onstop = () => {
+                // Creates a Blob object from the accumulated audio data chunks, representing the complete recording.
+                const blob = new Blob(chunksRef.current, {
+                    type: mediaRecorder.mimeType || MIME_TYPE,
+                });
+                // Updates the state with the newly created audio Blob, making it available for playback or download.
+                setAudioBlob(blob);
+                // Calls the cleanup function to release all resources associated with the stopped recording.
+                cleanup();
+            };
+            // Starts the MediaRecorder, beginning the capture of audio data.
+            mediaRecorder.start();
+            // Sets the recording state to `true` to indicate that recording is active.
+            setRecording(true);
+            // Ensures the paused state is `false` when recording starts.
+            setPaused(false);
+            // Starts an interval timer to update the recording duration every second.
+            timerRef.current = setInterval(() => {
+                setDuration((d) => d + 1);
+            }, 1000);
+        }
+        catch {
+            // Sets an error message if microphone access is denied or unavailable.
+            setError('Microphone access denied or unavailable.');
+            // Calls cleanup to release any partially acquired resources if an error occurs during startup.
+            cleanup();
+        }
+    }, [cleanup]);
+    // A memoized callback function to stop the ongoing audio recording.
+    const stopRecording = useCallback(() => {
+        // Checks if the MediaRecorder exists and is in an active state before attempting to stop it.
+        if (mediaRecorderRef.current &&
+            mediaRecorderRef.current.state !== 'inactive') {
+            // Stops the MediaRecorder, triggering the `onstop` event to finalize the audio blob.
+            mediaRecorderRef.current.stop();
+        }
+        // Sets the recording state to `false` as recording has ceased.
+        setRecording(false);
+        // Sets the paused state to `false` when recording stops.
+        setPaused(false);
+        // Clears the duration interval timer if it's active.
+        if (timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    // A memoized callback function to pause the active audio recording.
+    const pauseRecording = useCallback(() => {
+        // Checks if the MediaRecorder exists and is currently recording before pausing.
+        if (mediaRecorderRef.current &&
+            mediaRecorderRef.current.state === 'recording') {
+            // Pauses the MediaRecorder, temporarily stopping audio data collection.
+            mediaRecorderRef.current.pause();
+            // Sets the paused state to `true` to reflect the recording status.
+            setPaused(true);
+            // Clears the duration interval timer when recording is paused.
+            if (timerRef.current) {
+                clearInterval(timerRef.current);
+                timerRef.current = null;
+            }
+        }
+    }, []);
+    // A memoized callback function to resume a paused audio recording.
+    const resumeRecording = useCallback(() => {
+        // Checks if the MediaRecorder exists and is currently paused before resuming.
+        if (mediaRecorderRef.current &&
+            mediaRecorderRef.current.state === 'paused') {
+            // Resumes the MediaRecorder, continuing audio data collection.
+            mediaRecorderRef.current.resume();
+            // Sets the paused state to `false` as recording has resumed.
+            setPaused(false);
+            // Restarts the duration interval timer if it's not already running.
+            if (!timerRef.current) {
+                timerRef.current = setInterval(() => {
+                    setDuration((d) => d + 1);
+                }, 1000);
+            }
+        }
+    }, []);
+    // A memoized callback function to reset all recording-related states and resources to their initial values.
+    const resetRecording = useCallback(() => {
+        // Calls the cleanup function to release all media resources.
+        cleanup();
+        // Resets the recording state to `false`.
+        setRecording(false);
+        // Resets the paused state to `false`.
+        setPaused(false);
+        // Clears the stored audio Blob.
+        setAudioBlob(null);
+        // Resets the recording duration to zero.
+        setDuration(0);
+        // Clears any stored error messages.
+        setError(null);
+        // Clears the array holding audio data chunks.
+        chunksRef.current = [];
+    }, [cleanup]);
+    // An effect hook that ensures the `cleanup` function is called when the component unmounts, preventing memory leaks.
+    useEffect(() => () => cleanup(), [cleanup]);
+    // Returns an object containing the current recording state, audio data, analyser node, duration, any errors, and control functions for external components to use.
+    return {
+        // Indicates if recording is active.
+        recording,
+        // Indicates if recording is paused.
+        paused,
+        // The recorded audio as a Blob.
+        audioBlob,
+        // The AnalyserNode for audio visualization.
+        analyserNode,
+        // The current recording duration in seconds.
+        duration,
+        // Any error message encountered.
+        error,
+        // Function to begin recording.
+        startRecording,
+        // Function to stop recording.
+        stopRecording,
+        // Function to pause recording.
+        pauseRecording,
+        // Function to resume recording.
+        resumeRecording,
+        // Function to reset all recording states.
+        resetRecording,
+    };
+}
+//# sourceMappingURL=useAudioRecording.js.map

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

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

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

@@ -0,0 +1,13 @@
+import { AvatarStyles, Size } from './Avatar.type';
+export interface AvatarProps {
+    src?: string;
+    size?: Size;
+    fallback?: string;
+    views?: AvatarStyles;
+    onClick?: Function;
+    children?: React.ReactNode;
+}
+export interface AvatarViewProps extends AvatarProps {
+    imageError: boolean;
+    setImageError: React.Dispatch<React.SetStateAction<boolean>>;
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const useAvatarState: () => {
+    imageError: boolean;
+    setImageError: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

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

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+// Defines a state hook for managing avatar image error status, initialized as false.
+export const useAvatarState = () => {
+    const [imageError, setImageError] = useState(false);
+    // Provides an object containing the image error state and its setter function.
+    return { imageError, setImageError };
+};
+//# sourceMappingURL=Avatar.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.state.js","sourceRoot":"","sources":["../../../../../src/components/Avatar/Avatar/Avatar.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,qFAAqF;AACrF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,+EAA+E;IAC/E,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;AACvC,CAAC,CAAC"}

package/dist/native/components/Avatar/Avatar/Avatar.style.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Avatar Styles
+ *
+ * Defines the styles for the Avatar component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+import { ViewProps } from 'app-studio';
+import { Size } from './Avatar.type';
+/**
+ * Avatar sizes following the 4px grid system
+ */
+export declare const AvatarSizeMap: Record<Size, number>;
+/**
+ * Default styles for the Avatar component
+ */
+export declare const DefaultAvatarStyles: {
+    container: ViewProps;
+    fallback: ViewProps;
+    image: ViewProps;
+};

package/dist/native/components/Avatar/Avatar/Avatar.style.js

@@ -0,0 +1,44 @@
+/**
+ * Avatar Styles
+ *
+ * Defines the styles for the Avatar component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+/**
+ * Avatar sizes following the 4px grid system
+ */
+export const AvatarSizeMap = {
+    xs: 24, // 6 × 4px grid
+    sm: 32, // 8 × 4px grid
+    md: 44,
+    lg: 56,
+    xl: 72,
+};
+/**
+ * Default styles for the Avatar component
+ */
+export const DefaultAvatarStyles = {
+    container: {
+        borderRadius: '50%',
+        overflow: 'hidden',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'color-gray-200',
+        backgroundColor: 'theme-primary',
+        transition: 'background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease',
+    },
+    fallback: {
+        fontWeight: '600',
+        color: 'color-white',
+        letterSpacing: '-0.02em',
+    },
+    image: {
+        objectFit: 'cover',
+        transition: 'opacity 0.2s ease',
+    },
+};
+//# sourceMappingURL=Avatar.style.js.map

package/dist/native/components/Avatar/Avatar/Avatar.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.style.js","sourceRoot":"","sources":["../../../../../src/components/Avatar/Avatar/Avatar.style.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAyB;IACjD,EAAE,EAAE,EAAE,EAAE,eAAe;IACvB,EAAE,EAAE,EAAE,EAAE,eAAe;IACvB,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,SAAS,EAAE;QACT,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,QAAQ;QAClB,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,gBAAgB;QAC7B,eAAe,EAAE,eAAe;QAChC,UAAU,EACR,uEAAuE;KAC7D;IACd,QAAQ,EAAE;QACR,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,aAAa;QACpB,aAAa,EAAE,SAAS;KACZ;IACd,KAAK,EAAE;QACL,SAAS,EAAE,OAAO;QAClB,UAAU,EAAE,mBAAmB;KACnB;CACf,CAAC"}

package/dist/native/components/Avatar/Avatar/Avatar.type.d.ts

@@ -0,0 +1,7 @@
+import { ViewProps } from 'app-studio';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStyles = {
+    container?: ViewProps;
+    image?: ViewProps;
+    fallback?: ViewProps;
+};

package/dist/native/components/Avatar/Avatar/Avatar.type.js

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

package/dist/native/components/Avatar/Avatar/Avatar.type.js.map

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

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

@@ -0,0 +1,9 @@
+/**
+ * Avatar View Component
+ *
+ * Renders an avatar with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { AvatarViewProps } from './Avatar.props';
+export declare const AvatarView: ({ src, size, fallback, views, imageError, setImageError, onClick, children, }: AvatarViewProps) => React.JSX.Element;

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

@@ -0,0 +1,29 @@
+/**
+ * Avatar View Component
+ *
+ * Renders an avatar with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { Text } from 'app-studio';
+import { Center } from 'app-studio';
+import { Image } from 'app-studio';
+import { AvatarSizeMap, DefaultAvatarStyles } from './Avatar.style';
+// Declaration of the AvatarView functional component with destructured props from AvatarViewProps.
+export const AvatarView = ({ src, size = 'md', fallback = 'IM', views, imageError, setImageError, onClick = () => { }, children, }) => {
+    // Determines the size of the avatar by mapping the size prop to the predefined AvatarSizeMap.
+    const avatarSize = AvatarSizeMap[size];
+    // Combine default image styles with custom styles
+    const imageStyle = {
+        ...DefaultAvatarStyles.image,
+        ...(views?.image || {}),
+    };
+    // Start of the JSX returned by the AvatarView component, which uses the Center component as its root element.
+    return (<Center role="avatar" width={avatarSize} height={avatarSize} {...DefaultAvatarStyles.container} borderColor={imageError ? 'color-gray-400' : 'transparent'} onClick={onClick} {...views?.container}>
+      {!imageError && src ? (<Image alt="IM" src={src} style={imageStyle} width={avatarSize} height={avatarSize} onError={() => setImageError(true)}/>) : (<Text size={size} {...DefaultAvatarStyles.fallback} {...views?.fallback}>
+          {fallback}
+        </Text>)}
+      {children}
+    </Center>);
+};
+//# sourceMappingURL=Avatar.view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.view.js","sourceRoot":"","sources":["../../../../../src/components/Avatar/Avatar/Avatar.view.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpE,mGAAmG;AACnG,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,GAAG,EACH,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,UAAU,EACV,aAAa,EACb,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,QAAQ,GACQ,EAAE,EAAE;IACpB,8FAA8F;IAC9F,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACvC,kDAAkD;IAClD,MAAM,UAAU,GAAQ;QACtB,GAAG,mBAAmB,CAAC,KAAK;QAC5B,GAAG,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC;KACxB,CAAC;IACF,8GAA8G;IAC9G,OAAO,CACL,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,KAAK,CAAC,CAAC,UAAU,CAAC,CAClB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,IAAI,mBAAmB,CAAC,SAAS,CAAC,CAClC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAC3D,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,KAAK,EAAE,SAAS,CAAC,CAErB;MAAA,CAAC,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,CAAC,KAAK,CACJ,GAAG,CAAC,IAAI,CACR,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,UAAU,CAAC,CAClB,KAAK,CAAC,CAAC,UAAU,CAAC,CAClB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EACnC,CACH,CAAC,CAAC,CAAC,CACF,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,mBAAmB,CAAC,QAAQ,CAAC,CACjC,IAAI,KAAK,EAAE,QAAQ,CAAC,CAEpB;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AvatarProps } from './Avatar/Avatar.props';
+export declare const Avatar: (props: AvatarProps) => React.JSX.Element;

package/dist/native/components/Avatar/Avatar.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useAvatarState } from './Avatar/Avatar.state';
+import { AvatarView } from './Avatar/Avatar.view';
+import { useMergedDesignSystemComponentProps } from '../../design-system';
+// Defines the AvatarComponent functional component with destructured props from AvatarProps type.
+const AvatarComponent = (props) => {
+    const mergedProps = useMergedDesignSystemComponentProps('avatar', props);
+    const { src, size, views, fallback, onClick, children } = mergedProps;
+    // Uses custom hook useAvatarState to manage the avatar image loading error state.
+    const { imageError, setImageError } = useAvatarState();
+    // Begins the JSX return block for rendering the AvatarView component.
+    return (<AvatarView src={src} size={size} views={views} fallback={fallback} imageError={imageError} setImageError={setImageError} onClick={onClick}>
+      {children}
+    </AvatarView>);
+    // AvatarComponent is a functional component that wraps the AvatarView with added state logic.
+};
+// Exports the AvatarComponent as Avatar for use in other parts of the application.
+export const Avatar = AvatarComponent;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,mCAAmC,EAAE,MAAM,mBAAmB,CAAC;AAExE,kGAAkG;AAClG,MAAM,eAAe,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC7C,MAAM,WAAW,GAAG,mCAAmC,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;IACtE,kFAAkF;IAClF,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,cAAc,EAAE,CAAC;IACvD,sEAAsE;IACtE,OAAO,CACL,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,OAAO,CAAC,CAAC,OAAO,CAAC,CAEjB;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;IACF,8FAA8F;AAChG,CAAC,CAAC;AACF,mFAAmF;AACnF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC"}

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

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'app-studio';
+import { GradientProps } from '../../Gradient/Gradient/Gradient.props';
+import { BackgroundSize, BackgroundPosition, BackgroundRepeat, BlendMode } from './Background.type';
+export interface BackgroundProps extends ViewProps {
+    children?: ReactNode;
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+    };
+    shape?: 'square' | 'rounded' | 'pill';
+    decorationRotation?: number;
+    decorationScale?: number;
+    decorationOpacity?: number;
+}
+export interface BackgroundLayoutProps extends BackgroundProps {
+    shape?: 'square' | 'rounded' | 'pill';
+    designProps?: any;
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+        back?: ViewProps;
+        front?: ViewProps;
+    };
+}
+export interface AuroraBackgroundProps extends BackgroundProps {
+    showRadialGradient?: boolean;
+}
+export interface MeteorsProps extends ViewProps {
+    number?: number;
+    children?: ReactNode;
+}
+export interface WallProps extends ViewProps {
+    rows?: number;
+    cols?: number;
+    squareSize?: number;
+}
+export interface ParticlesProps extends Omit<ViewProps, 'colors'> {
+    count?: number;
+    colors?: string[];
+    speed?: 'slow' | 'medium' | 'fast';
+    shapes?: ('circle' | 'square' | 'triangle')[];
+}
+export interface GridProps extends ViewProps {
+    gridSize?: number;
+    lineColor?: string;
+    pulseColor?: string;
+    animationSpeed?: 'slow' | 'medium' | 'fast';
+}
+export interface RipplesProps extends Omit<ViewProps, 'colors'> {
+    rippleCount?: number;
+    colors?: string[];
+    maxSize?: number;
+    frequency?: number;
+}
+export interface BackgroundImageProps extends Omit<BackgroundProps, 'position' | 'overlay'> {
+    src: string;
+    backgroundSize?: BackgroundSize;
+    backgroundPosition?: BackgroundPosition;
+    backgroundRepeat?: BackgroundRepeat;
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local';
+    imageOpacity?: number;
+    blendMode?: BlendMode;
+    overlay?: ReactNode;
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+        image?: ViewProps;
+    };
+}
+export interface BackgroundVideoProps extends Omit<BackgroundProps, 'position' | 'overlay'> {
+    src: string;
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    overlay?: ReactNode;
+    blendMode?: BlendMode;
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+        video?: ViewProps;
+    };
+}
+export interface BackgroundGradientProps extends GradientProps {
+}
+export interface BackgroundOverlayProps extends ViewProps {
+    contentPosition?: 'left' | 'right' | 'center' | 'bottom' | 'top';
+}
+export interface BackgroundStyles {
+    container?: ViewProps;
+    content?: ViewProps;
+    aurora?: ViewProps;
+    meteors?: ViewProps;
+    image?: ViewProps;
+    video?: ViewProps;
+    gradient?: ViewProps;
+}

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

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

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

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

package/dist/native/components/Background/Background/Background.style.d.ts

@@ -0,0 +1,24 @@
+import { ViewProps } from 'app-studio';
+export declare const DefaultBackgroundStyles: {
+    container: ViewProps;
+    content: ViewProps;
+};
+export declare const AuroraStyles: {
+    container: ViewProps;
+    gradient: ViewProps;
+};
+export declare const BackgroundImageStyles: {
+    container: ViewProps;
+    image: ViewProps;
+    content: ViewProps;
+};
+export declare const BackgroundVideoStyles: {
+    container: ViewProps;
+    video: ViewProps;
+    content: ViewProps;
+};
+export declare const MeteorsStyles: {
+    container: ViewProps;
+    meteor: ViewProps;
+    meteorTail: ViewProps;
+};