@app-studio/components 0.10.17

package/dist/native/components/Accordion/Accordion.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useAccordionState } from './Accordion/Accordion.state';
+import { AccordionProvider, AccordionItem, AccordionTrigger, AccordionContent, AccordionView, } from './Accordion/Accordion.view';
+import { useMergedDesignSystemComponentProps } from '../../design-system';
+// Defines the main `Accordion` component, which orchestrates state management using `useAccordionState` and provides context to its sub-components (`Item`, `Trigger`, `Content`) to render a complete and functional accordion UI.
+const AccordionComponent = (componentProps) => {
+    const mergedProps = useMergedDesignSystemComponentProps('accordion', componentProps);
+    const { children, type = 'single', value, defaultValue, onValueChange, collapsible = false, shape = 'rounded', variant = 'default', views, ...props } = mergedProps;
+    const legacyDefaultValue = Array.isArray(defaultValue)
+        ? defaultValue
+        : defaultValue
+            ? [defaultValue]
+            : undefined;
+    const accordionState = useAccordionState({
+        type,
+        value,
+        defaultValue: defaultValue ?? legacyDefaultValue,
+        onValueChange,
+        collapsible,
+    });
+    return (<AccordionProvider value={{
+            expandedItems: accordionState.expandedItems,
+            toggleItem: accordionState.toggleItem,
+            isItemExpanded: accordionState.isItemExpanded,
+            type: accordionState.type,
+            collapsible: accordionState.collapsible,
+            baseId: accordionState.baseId,
+        }}>
+      <AccordionView shape={shape} variant={variant} views={views} baseId={accordionState.baseId} type={accordionState.type} collapsible={accordionState.collapsible} {...props}>
+        {children}
+      </AccordionView>
+    </AccordionProvider>);
+};
+export const Accordion = AccordionComponent;
+Accordion.Item = AccordionItem;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Content = AccordionContent;
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,mCAAmC,EAAE,MAAM,mBAAmB,CAAC;AACxE,oOAAoO;AACpO,MAAM,kBAAkB,GAA6B,CAAC,cAAc,EAAE,EAAE;IACtE,MAAM,WAAW,GAAG,mCAAmC,CACrD,WAAW,EACX,cAAc,CACf,CAAC;IACF,MAAM,EACJ,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,GAAG,KAAK,EACT,GAAG,WAAW,CAAC;IAChB,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QACpD,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,CAAC,YAAY,CAAC;YAChB,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,IAAI;QACJ,KAAK;QACL,YAAY,EAAE,YAAY,IAAI,kBAAkB;QAChD,aAAa;QACb,WAAW;KACZ,CAAC,CAAC;IACH,OAAO,CACL,CAAC,iBAAiB,CAChB,KAAK,CAAC,CAAC;YACL,aAAa,EAAE,cAAc,CAAC,aAAa;YAC3C,UAAU,EAAE,cAAc,CAAC,UAAU;YACrC,cAAc,EAAE,cAAc,CAAC,cAAc;YAC7C,IAAI,EAAE,cAAc,CAAC,IAAI;YACzB,WAAW,EAAE,cAAc,CAAC,WAAW;YACvC,MAAM,EAAE,cAAc,CAAC,MAAM;SAC9B,CAAC,CAEF;MAAA,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,CAC9B,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1B,WAAW,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CACxC,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,kBAA4C,CAAC;AACtE,SAAS,CAAC,IAAI,GAAG,aAAa,CAAC;AAC/B,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC;AACrC,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { AlertStyles, Variant } from './Alert.type';
+export interface AlertProps extends ViewProps {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string | React.ReactNode;
+    children?: React.ReactNode;
+    variant?: Variant;
+    severity?: string;
+    status?: string;
+    onClose?: () => void;
+    views?: AlertStyles;
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const useAlertState: () => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+// Declare a custom React hook named useAlertState.
+export const useAlertState = () => {
+    // Within the hook, initialize a state variable isHovered with a default value of false using the useState hook.
+    const [isHovered, setIsHovered] = React.useState(false);
+    // Return an object containing the state variable isHovered and the updater function setIsHovered from the hook.
+    return { isHovered, setIsHovered };
+};
+//# sourceMappingURL=Alert.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.state.js","sourceRoot":"","sources":["../../../../../src/components/Alert/Alert/Alert.state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,mDAAmD;AACnD,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,gHAAgH;IAChH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,gHAAgH;IAChH,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AACrC,CAAC,CAAC"}

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

@@ -0,0 +1,28 @@
+/**
+ * Alert Styles
+ *
+ * Defines the styles for the Alert 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 { Variant } from './Alert.type';
+/**
+ * Get theme styles for different alert variants based on theme mode
+ */
+export declare const getThemes: (themeMode: string) => Record<Variant, {
+    container: ViewProps;
+    content: ViewProps;
+    icon: ViewProps;
+}>;
+/**
+ * Default themes for backward compatibility
+ */
+export declare const Themes: Record<Variant, {
+    container: ViewProps;
+    content: ViewProps;
+    icon: ViewProps;
+}>;

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

@@ -0,0 +1,98 @@
+/**
+ * Alert Styles
+ *
+ * Defines the styles for the Alert 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
+ */
+/**
+ * Get theme styles for different alert variants based on theme mode
+ */
+export const getThemes = (themeMode) => {
+    const isDark = themeMode === 'dark';
+    return {
+        default: {
+            container: {
+                backgroundColor: isDark ? 'color-gray-900' : 'color-gray-50',
+                borderColor: isDark ? 'color-gray-700' : 'color-gray-200',
+                boxShadow: isDark
+                    ? '0 1px 3px rgba(0, 0, 0, 0.3)'
+                    : '0 1px 2px rgba(0, 0, 0, 0.05)',
+            },
+            content: {
+                color: isDark ? 'color-gray-200' : 'color-gray-700',
+            },
+            icon: {
+                color: isDark ? 'color-gray-400' : 'color-gray-500',
+            },
+        },
+        info: {
+            container: {
+                backgroundColor: isDark ? 'color-blue-950' : 'color-blue-50',
+                borderColor: isDark ? 'color-blue-800' : 'color-blue-200',
+                boxShadow: isDark
+                    ? '0 1px 3px rgba(29, 78, 216, 0.25)'
+                    : '0 1px 2px rgba(59, 130, 246, 0.05)',
+            },
+            content: {
+                color: isDark ? 'color-blue-200' : 'color-blue-700',
+            },
+            icon: {
+                color: isDark ? 'color-blue-300' : 'color-blue-500',
+            },
+        },
+        success: {
+            container: {
+                backgroundColor: isDark ? 'color-green-950' : 'color-green-50',
+                borderColor: isDark ? 'color-green-800' : 'color-green-200',
+                boxShadow: isDark
+                    ? '0 1px 3px rgba(34, 197, 94, 0.2)'
+                    : '0 1px 2px rgba(34, 197, 94, 0.05)',
+            },
+            content: {
+                color: isDark ? 'color-green-200' : 'color-green-700',
+            },
+            icon: {
+                color: isDark ? 'color-green-300' : 'color-green-500',
+            },
+        },
+        error: {
+            container: {
+                backgroundColor: isDark ? 'color-red-950' : 'color-red-50',
+                borderColor: isDark ? 'color-red-800' : 'color-red-200',
+                boxShadow: isDark
+                    ? '0 1px 3px rgba(239, 68, 68, 0.2)'
+                    : '0 1px 2px rgba(239, 68, 68, 0.05)',
+            },
+            content: {
+                color: isDark ? 'color-red-200' : 'color-red-700',
+            },
+            icon: {
+                color: isDark ? 'color-red-300' : 'color-red-500',
+            },
+        },
+        warning: {
+            container: {
+                backgroundColor: isDark ? 'color-orange-950' : 'color-orange-50',
+                borderColor: isDark ? 'color-orange-800' : 'color-orange-200',
+                boxShadow: isDark
+                    ? '0 1px 3px rgba(249, 115, 22, 0.2)'
+                    : '0 1px 2px rgba(249, 115, 22, 0.05)',
+            },
+            content: {
+                color: isDark ? 'color-orange-200' : 'color-orange-700',
+            },
+            icon: {
+                color: isDark ? 'color-orange-300' : 'color-orange-500',
+            },
+        },
+    };
+};
+/**
+ * Default themes for backward compatibility
+ */
+export const Themes = getThemes('light');
+//# sourceMappingURL=Alert.style.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { ViewProps } from 'app-studio';
+export type Variant = 'default' | 'info' | 'success' | 'error' | 'warning';
+export type AlertStyles = {
+    container?: ViewProps;
+    title?: ViewProps;
+    description?: ViewProps;
+    icon?: ViewProps;
+};

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

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

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * Alert View Component
+ *
+ * Renders an alert with various styles and states according to the design guidelines.
+ */
+import React from 'react';
+import { AlertProps } from './Alert.props';
+/**
+ * Alert component that displays important messages to users
+ */
+export declare const AlertView: React.MemoExoticComponent<({ icon, title, views, description, variant, themeMode: elementMode, children, ...props }: AlertProps) => React.JSX.Element>;

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

@@ -0,0 +1,68 @@
+/**
+ * Alert View Component
+ *
+ * Renders an alert with various styles and states according to the design guidelines.
+ */
+import React, { useMemo } from 'react';
+import { View, useTheme } from 'app-studio';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { WarningIcon, InfoIcon, ErrorIcon, SuccessIcon } from '../../Icon/Icon';
+import { getThemes } from './Alert.style';
+/**
+ * Alert component that displays important messages to users
+ */
+export const AlertView = React.memo(({ icon, title = '', views, description = '', variant = 'default', themeMode: elementMode, children, ...props }) => {
+    const { themeMode } = useTheme();
+    const currentThemeMode = elementMode || themeMode;
+    const themes = useMemo(() => getThemes(currentThemeMode), [currentThemeMode]);
+    // Select the appropriate icon based on the variant
+    const getIcon = () => {
+        if (icon)
+            return icon;
+        // Use the theme color directly from themes
+        const iconColor = views?.icon?.color ?? themes[variant].icon.color;
+        const iconProps = {
+            size: 20,
+            color: iconColor,
+        };
+        switch (variant) {
+            case 'info':
+                return <InfoIcon {...iconProps}/>;
+            case 'success':
+                return <SuccessIcon {...iconProps}/>;
+            case 'error':
+                return <ErrorIcon {...iconProps}/>;
+            case 'warning':
+            default:
+                return <WarningIcon {...iconProps}/>;
+        }
+    };
+    return (<Horizontal 
+    // Layout properties
+    gap={12} padding="12px 16px" flexWrap="nowrap" alignItems="flex-start" 
+    // Visual properties
+    borderRadius="8px" // Consistent with design system (rounded-md)
+     borderWidth="1px" borderStyle="solid" borderColor={themes[variant].container.borderColor} backgroundColor={themes[variant].container.backgroundColor} boxShadow={themes[variant].container.boxShadow} 
+    // Animation
+    transition="background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease" 
+    // Apply custom container styles and any other props
+    {...views?.container} {...props}>
+        {/* Icon */}
+        <View alignSelf="flex-start" marginTop="2px" {...views?.icon}>
+          {getIcon()}
+        </View>
+
+        {/* Content */}
+        <Vertical gap={4}>
+          {title ? (<Text fontSize="14px" fontWeight="600" lineHeight="20px" color={themes[variant].content.color} {...views?.title}>
+              {title}
+            </Text>) : null}
+          <Text fontSize="12px" fontWeight="400" lineHeight="16px" color={themes[variant].content.color} {...views?.description}>
+            {description || children}
+          </Text>
+        </Vertical>
+      </Horizontal>);
+});
+//# sourceMappingURL=Alert.view.js.map

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

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AlertProps } from './Alert.props';
+export declare const AlertView: React.MemoExoticComponent<({ icon, title, views, description, variant, themeMode: elementMode, children, ...props }: AlertProps) => React.JSX.Element>;

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

@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+import { View, Text, Vertical, Horizontal, useTheme } from 'app-studio';
+import { getThemes } from './Alert.style';
+export const AlertView = React.memo(({ icon, title = '', views, description = '', variant = 'default', themeMode: elementMode, children, ...props }) => {
+    const { themeMode } = useTheme();
+    const currentThemeMode = elementMode || themeMode;
+    const themes = useMemo(() => getThemes(currentThemeMode), [currentThemeMode]);
+    return (<Horizontal gap={12} padding={12} flexWrap="nowrap" alignItems="flex-start" borderRadius={8} borderWidth={1} borderStyle="solid" borderColor={themes[variant].container.borderColor} backgroundColor={themes[variant].container.backgroundColor} {...views?.container} {...props}>
+        {icon && (<View alignSelf="flex-start" marginTop={2} {...views?.icon}>
+            {icon}
+          </View>)}
+        <Vertical gap={4}>
+          {title ? (<Text fontSize={14} fontWeight="600" lineHeight={20} color={themes[variant].content.color} {...views?.title}>
+              {title}
+            </Text>) : null}
+          <Text fontSize={12} fontWeight="400" lineHeight={16} color={themes[variant].content.color} {...views?.description}>
+            {description || children}
+          </Text>
+        </Vertical>
+      </Horizontal>);
+});
+//# sourceMappingURL=Alert.view.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.view.native.js","sourceRoot":"","sources":["../../../../../src/components/Alert/Alert/Alert.view.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CACjC,CAAC,EACC,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,SAAS,EACnB,SAAS,EAAE,WAAW,EACtB,QAAQ,EACR,GAAG,KAAK,EACG,EAAE,EAAE;IACf,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,gBAAgB,GAAG,WAAW,IAAI,SAAS,CAAC;IAClD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE9E,OAAO,CACL,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,EAAE,CAAC,CACR,OAAO,CAAC,CAAC,EAAE,CAAC,CACZ,QAAQ,CAAC,QAAQ,CACjB,UAAU,CAAC,YAAY,CACvB,YAAY,CAAC,CAAC,CAAC,CAAC,CAChB,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,WAAW,CAAC,OAAO,CACnB,WAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CACnD,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAC3D,IAAI,KAAK,EAAE,SAAS,CAAC,CACrB,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,IAAI,IAAI,CACP,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,IAAI,CAAC,CACzD;YAAA,CAAC,IAAI,CACP;UAAA,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CACf;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,IAAI,CACH,QAAQ,CAAC,CAAC,EAAE,CAAC,CACb,UAAU,CAAC,KAAK,CAChB,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CACrC,IAAI,KAAK,EAAE,KAAK,CAAC,CAEjB;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,IAAI,CACH,QAAQ,CAAC,CAAC,EAAE,CAAC,CACb,UAAU,CAAC,KAAK,CAChB,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CACrC,IAAI,KAAK,EAAE,WAAW,CAAC,CAEvB;YAAA,CAAC,WAAW,IAAI,QAAQ,CAC1B;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,QAAQ,CACZ;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC"}

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

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

package/dist/native/components/Alert/Alert.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AlertView } from './Alert/Alert.view';
+import { useMergedDesignSystemComponentProps } from '../../design-system';
+// Definition of the AlertComponent functional component with props.
+const AlertComponent = (props) => {
+    const mergedProps = useMergedDesignSystemComponentProps('alert', props);
+    return <AlertView {...mergedProps}/>;
+};
+// Exporting the AlertComponent as 'Alert' for use in other parts of the application.
+export const Alert = AlertComponent;
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,mCAAmC,EAAE,MAAM,mBAAmB,CAAC;AACxE,oEAAoE;AACpE,MAAM,cAAc,GAAG,CAAC,KAAiB,EAAE,EAAE;IAC3C,MAAM,WAAW,GAAG,mCAAmC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACxE,OAAO,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC,EAAG,CAAC;AACxC,CAAC,CAAC;AACF,qFAAqF;AACrF,MAAM,CAAC,MAAM,KAAK,GAAG,cAAc,CAAC"}

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

@@ -0,0 +1,9 @@
+import { ViewProps } from 'app-studio';
+export interface AspectRatioProps extends ViewProps {
+    ratio?: number;
+    views?: {
+        container?: ViewProps;
+        center?: ViewProps;
+        view?: ViewProps;
+    };
+}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AspectRatioProps } from './AspectRatio.props';
+export declare const AspectRatioView: ({ ratio, children, views, ...props }: AspectRatioProps) => React.JSX.Element;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'app-studio';
+// Declaration of a functional component named AspectRatioView.
+export const AspectRatioView = ({ 
+// Set a default aspect ratio of 16:9 if no ratio is provided as a prop.
+ratio = 16 / 9, 
+// children prop used to render enclosed components.
+children, views, 
+// Spread the rest of the props to inherit additional properties.
+...props }) => (<View width={'100%'} position="relative" overflow="hidden" paddingTop={`${(1 / ratio) * 100}%`} borderRadius={8} {...props} {...views?.center}>
+    <View position="absolute" top={0} right={0} bottom={0} left={0} {...views?.view}>
+      {children}
+    </View>
+  </View>);
+//# sourceMappingURL=AspectRatio.view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.view.js","sourceRoot":"","sources":["../../../../../src/components/AspectRatio/AspectRatio/AspectRatio.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAGlC,+DAA+D;AAC/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC;AAC9B,wEAAwE;AACxE,KAAK,GAAG,EAAE,GAAG,CAAC;AACd,oDAAoD;AACpD,QAAQ,EACR,KAAK;AACL,iEAAiE;AACjE,GAAG,KAAK,EACS,EAAE,EAAE,CAAC,CACtB,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,QAAQ,CAAC,UAAU,CACnB,QAAQ,CAAC,QAAQ,CACjB,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,CACpC,YAAY,CAAC,CAAC,CAAC,CAAC,CAChB,IAAI,KAAK,CAAC,CACV,IAAI,KAAK,EAAE,MAAM,CAAC,CAElB;IAAA,CAAC,IAAI,CACH,QAAQ,CAAC,UAAU,CACnB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,KAAK,CAAC,CAAC,CAAC,CAAC,CACT,MAAM,CAAC,CAAC,CAAC,CAAC,CACV,IAAI,CAAC,CAAC,CAAC,CAAC,CACR,IAAI,KAAK,EAAE,IAAI,CAAC,CAEhB;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CACR;EAAA,EAAE,IAAI,CAAC,CACR,CAAC"}

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

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

package/dist/native/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AspectRatioView } from './AspectRatio/AspectRatio.view';
+// Declaration of the AspectRatioComponent functional component with destructured props.
+const AspectRatioComponent = ({ ratio, children, ...props }) => {
+    // Beginning of the return statement in the functional component.
+    return (<AspectRatioView ratio={ratio} {...props}>
+      {children}
+    </AspectRatioView>);
+};
+export const AspectRatio = AspectRatioComponent;
+//# sourceMappingURL=AspectRatio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.js","sourceRoot":"","sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,wFAAwF;AACxF,MAAM,oBAAoB,GAAG,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EAEM,EAAE,EAAE;IAClB,iEAAiE;IACjE,OAAO,CACL,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CACvC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,oBAAoB,CAAC"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface AttachmentGroupProps {
+    files: File[];
+    sandboxId?: string;
+    onRemove: (index: number) => void;
+    layout?: 'inline' | 'grid';
+    maxHeight?: string;
+    showPreviews?: boolean;
+    views?: {
+        container?: any;
+        item?: any;
+        name?: any;
+        size?: any;
+        removeButton?: any;
+    };
+}
+export declare const AttachmentGroup: React.FC<AttachmentGroupProps>;
+export {};

package/dist/native/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.js

@@ -0,0 +1,111 @@
+import React, { useCallback } from 'react';
+import { Vertical, View, Image, Center, Button, Horizontal } from 'app-studio';
+import { FileIcon, AudioIcon } from '../../Icon/Icon';
+import { HoverCard } from '../../HoverCard/HoverCard';
+import { Text } from 'app-studio';
+// Default styles extracted from ChatInput.style
+const defaultRemoveButtonStyles = {
+    position: 'absolute',
+    top: '-4px',
+    right: '-4px',
+    width: '16px',
+    height: '16px',
+    borderRadius: '50%',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    color: 'white',
+    border: 'none',
+    padding: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    fontSize: '12px',
+    zIndex: 10,
+    _hover: {
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    },
+};
+export const AttachmentGroup = ({ files, sandboxId, onRemove, layout = 'inline', maxHeight = '120px', showPreviews = false, views = {}, }) => {
+    if (files.length === 0) {
+        return null;
+    }
+    const formatFileSize = useCallback((bytes) => {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }, []);
+    const getAttachmentAccent = useCallback((file) => {
+        if (file.type.startsWith('image/')) {
+            return { backgroundColor: '#DBEAFE', color: '#2563EB' };
+        }
+        if (file.type.startsWith('video/')) {
+            return { backgroundColor: '#EDE9FE', color: '#7C3AED' };
+        }
+        if (file.type.startsWith('audio/')) {
+            return { backgroundColor: '#DCFCE7', color: '#16A34A' };
+        }
+        return { backgroundColor: '#E2E8F0', color: '#475569' };
+    }, []);
+    return (<View display="flex" flexWrap="wrap" gap="8px" padding="8px 0" maxHeight={maxHeight} overflowY="auto" {...views?.container}>
+      {files.map((file, index) => {
+            const previewUrl = file?.path ||
+                file?.url ||
+                (showPreviews ? URL.createObjectURL(file) : '');
+            const isImage = file.type.startsWith('image/');
+            const isVideo = file.type.startsWith('video/');
+            const isAudio = file.type.startsWith('audio/');
+            const accent = getAttachmentAccent(file);
+            if (!showPreviews) {
+                return (<Horizontal key={index} alignItems="center" gap="8px" padding="6px 10px 6px 8px" borderRadius="9999px" border="1px solid #E2E8F0" backgroundColor="color-white" maxWidth="100%" animate={{
+                        from: { opacity: 0, scale: 0.96 },
+                        to: { opacity: 1, scale: 1 },
+                    }} animationDuration={0.2} {...views?.item}>
+              <Center width="22px" height="22px" minWidth="22px" borderRadius="9999px" backgroundColor={accent.backgroundColor} color={accent.color}>
+                {isAudio ? (<AudioIcon widthHeight={12} color="currentColor"/>) : (<FileIcon widthHeight={12} color="currentColor"/>)}
+              </Center>
+              <Text fontSize="12px" lineHeight="16px" color="color-gray-600" maxLines={1} maxWidth="220px" {...views?.name}>
+                {file.name} · {formatFileSize(file.size)}
+              </Text>
+              {onRemove && (<View as="button" type="button" onClick={() => onRemove(index)} aria-label={`Remove ${file.name}`} display="flex" alignItems="center" justifyContent="center" width="16px" height="16px" minWidth="16px" border="none" backgroundColor="transparent" color="color-gray-400" padding={0} cursor="pointer" transition="color 0.2s ease, opacity 0.2s ease" _hover={{ color: 'color-gray-600' }}>
+                  ×
+                </View>)}
+            </Horizontal>);
+            }
+            return (<Vertical key={index} alignItems="center" gap="6px" padding="6px 10px" borderRadius="8px" border="1px solid #E2E8F0" backgroundColor="color-white" animate={{
+                    from: { opacity: 0, scale: 0.9 },
+                    to: { opacity: 1, scale: 1 },
+                }} animationDuration={0.2} {...views?.item}>
+            {showPreviews && (<HoverCard>
+                <HoverCard.Trigger>
+                  {isImage && (<Image src={previewUrl} alt={file.name} width="60px" height="60px" borderRadius="8px" objectFit="cover"/>)}
+                  {isVideo && (<View as="video" src={previewUrl} alt={file.name} controls={false} muted={true} width="60px" height="60px" borderRadius="8px" objectFit="cover"/>)}
+                  {isAudio && (<Center width="60px" height="60px" borderRadius="8px" backgroundColor="color-gray-100">
+                      <AudioIcon widthHeight={24} color="color-black"/>
+                    </Center>)}
+                  {!isImage && !isVideo && !isAudio && (<Center width="60px" height="60px" borderRadius="8px" backgroundColor="color-gray-100">
+                      <FileIcon widthHeight={24} color="color-black"/>
+                    </Center>)}
+
+                  {onRemove && (<Button {...defaultRemoveButtonStyles} onClick={(e) => {
+                            e.stopPropagation();
+                            onRemove(index);
+                        }} aria-label={`Remove ${file.name}`}>
+                      ×
+                    </Button>)}
+                </HoverCard.Trigger>
+                <HoverCard.Content>
+                  {isImage && (<Image src={previewUrl} alt={file.name} maxWidth="100%"/>)}
+                  {isVideo && (<View as="video" src={previewUrl} controls maxWidth="100%"/>)}
+                  {isAudio && (<View as="audio" src={previewUrl} controls width={'100%'}/>)}
+                  <Text marginTop="4px" maxLines={1} width={'100%'} {...views?.name}>
+                    {file.name} ({formatFileSize(file.size)})
+                  </Text>
+                </HoverCard.Content>
+              </HoverCard>)}
+          </Vertical>);
+        })}
+    </View>);
+};
+//# sourceMappingURL=AttachmentGroup.js.map

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

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

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

@@ -0,0 +1,2 @@
+import { AttachmentGroup } from './AttachmentGroup/AttachmentGroup';
+export { AttachmentGroup };

package/dist/native/components/AttachmentGroup/AttachmentGroup.js

@@ -0,0 +1,3 @@
+import { AttachmentGroup } from './AttachmentGroup/AttachmentGroup';
+export { AttachmentGroup };
+//# sourceMappingURL=AttachmentGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentGroup.js","sourceRoot":"","sources":["../../../../src/components/AttachmentGroup/AttachmentGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,CAAC"}