@app-studio/components 0.10.17

package/dist/native/components/Modal/Modal/Modal.store.js

@@ -0,0 +1,60 @@
+import { create } from 'zustand';
+// Initializes the Zustand store for managing modal states and actions.
+export const useModalStore = create((set) => ({
+    // The initial state property: an empty array of modals.
+    modals: [],
+    // Default implementation for the 'onHide' callback.
+    onHide: (name) => name,
+    // Default implementation for the 'onShow' callback.
+    onShow: (name, props) => ({ name, props }),
+    // Action to add a new modal to the 'modals' array, setting its 'isVisible' prop to true.
+    show: (name, modalProps = {}, overlayProps = {}) => {
+        set((state) => ({
+            ...state,
+            modals: [
+                ...state.modals,
+                {
+                    name,
+                    props: { ...modalProps, isVisible: true },
+                    overlayProps,
+                },
+            ],
+        }));
+    },
+    // Action to remove a modal from the 'modals' array based on its name, or clear all modals if no name is provided.
+    hide: (name) => {
+        set((state) => {
+            if (!name) {
+                return { modals: [] };
+            }
+            return {
+                ...state,
+                modals: state.modals.filter((modal) => modal.name !== name),
+            };
+        });
+    },
+    // Action to update the 'onHide' callback function within the store.
+    setOnHide: (onHide) => {
+        set((state) => ({ ...state, onHide }));
+    },
+    // Action to update the 'onShow' callback function within the store.
+    setOnShow: (onShow) => {
+        set((state) => ({ ...state, onShow }));
+    },
+}));
+// A convenience function to programmatically display a modal and trigger its 'onShow' callback.
+export const showModal = (name, modalProps = {}, overlayProps = {}) => {
+    // Calls the 'show' action from the modal store to add the modal to the state.
+    useModalStore.getState().show(name, modalProps, overlayProps);
+    // Triggers the registered 'onShow' callback for the newly shown modal, allowing external effects.
+    useModalStore.getState().onShow(name, modalProps);
+};
+// A convenience function to programmatically hide a modal and trigger its 'onHide' callback.
+export const hideModal = (name) => {
+    console.log('hideModal', name);
+    // Triggers the registered 'onHide' callback for the hidden modal, allowing external effects.
+    useModalStore.getState().onHide(name);
+    // Calls the 'hide' action from the modal store to remove the modal from the state.
+    useModalStore.getState().hide(typeof name === 'string' ? name : undefined);
+};
+//# sourceMappingURL=Modal.store.js.map

package/dist/native/components/Modal/Modal/Modal.store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.store.js","sourceRoot":"","sources":["../../../../../src/components/Modal/Modal/Modal.store.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AA2BjC,uEAAuE;AACvE,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAa,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IACxD,wDAAwD;IACxD,MAAM,EAAE,EAAE;IACV,oDAAoD;IACpD,MAAM,EAAE,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI;IAC/B,oDAAoD;IACpD,MAAM,EAAE,CAAC,IAAY,EAAE,KAAW,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACxD,yFAAyF;IACzF,IAAI,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,EAAE,EAAE,YAAY,GAAG,EAAE,EAAE,EAAE;QACjD,GAAG,CAAC,CAAC,KAAiB,EAAE,EAAE,CAAC,CAAC;YAC1B,GAAG,KAAK;YACR,MAAM,EAAE;gBACN,GAAG,KAAK,CAAC,MAAM;gBACf;oBACE,IAAI;oBACJ,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE;oBACzC,YAAY;iBACb;aACF;SACF,CAAC,CAAC,CAAC;IACN,CAAC;IACD,kHAAkH;IAClH,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,GAAG,CAAC,CAAC,KAAiB,EAAE,EAAE;YACxB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;YACxB,CAAC;YACD,OAAO;gBACL,GAAG,KAAK;gBACR,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;aAC5D,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IACD,oEAAoE;IACpE,SAAS,EAAE,CAAC,MAA+B,EAAE,EAAE;QAC7C,GAAG,CAAC,CAAC,KAAiB,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACrD,CAAC;IACD,oEAAoE;IACpE,SAAS,EAAE,CAAC,MAA2C,EAAE,EAAE;QACzD,GAAG,CAAC,CAAC,KAAiB,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACrD,CAAC;CACF,CAAC,CAAC,CAAC;AACJ,gGAAgG;AAChG,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAY,EACZ,aAAkB,EAAE,EACpB,eAAoB,EAAE,EACtB,EAAE;IACF,8EAA8E;IAC9E,aAAa,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;IAC9D,kGAAkG;IAClG,aAAa,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AACpD,CAAC,CAAC;AACF,6FAA6F;AAC7F,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAa,EAAE,EAAE;IACzC,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAC/B,6FAA6F;IAC7F,aAAa,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,mFAAmF;IACnF,aAAa,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AAC7E,CAAC,CAAC"}

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

@@ -0,0 +1,33 @@
+import { ViewProps } from 'app-studio';
+import { Shape, Size } from './Modal.type';
+export declare const ContainerShapes: Record<Shape, ViewProps>;
+export declare const OverlayAlignments: Record<string, ViewProps>;
+export declare const HeaderIconSizes: Record<Size, number>;
+export declare const ModalAnimations: {
+    enter: {
+        opacity: number[];
+        transform: string[];
+        transition: string;
+    };
+    exit: {
+        opacity: number[];
+        transform: string[];
+        transition: string;
+    };
+};
+export declare const OverlayStyles: ViewProps;
+export declare const ContainerBaseStyles: ViewProps;
+export declare const ModalTypography: {
+    title: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    body: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+};

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

@@ -0,0 +1,77 @@
+// Defines a mapping of modal container shapes to their corresponding border-radius styles.
+export const ContainerShapes = {
+    square: { borderRadius: 0 },
+    rounded: { borderRadius: 8 },
+};
+// Specifies various alignment configurations for the modal's overlay content.
+export const OverlayAlignments = {
+    center: { justifyContent: 'center', alignItems: 'center' },
+    top: {
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+    },
+    right: {
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    bottom: {
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+    },
+    left: {
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+    },
+};
+// Maps predefined size categories to specific pixel values for modal header icons.
+export const HeaderIconSizes = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+};
+// Contains keyframe definitions for the modal's entry and exit animations, including opacity and transform.
+export const ModalAnimations = {
+    enter: {
+        opacity: [0, 1],
+        transform: ['scale(0.95)', 'scale(1)'],
+        transition: 'opacity 0.2s ease-out, transform 0.2s ease-out',
+    },
+    exit: {
+        opacity: [1, 0],
+        transform: ['scale(1)', 'scale(0.95)'],
+        transition: 'opacity 0.15s ease-in, transform 0.15s ease-in',
+    },
+};
+// Provides the default background and transition styles for the modal overlay.
+export const OverlayStyles = {
+    backgroundColor: 'color-blackAlpha-400',
+    transition: 'background-color 0.2s ease',
+};
+// Sets the foundational background, shadow, and focus styles for the modal's content container.
+export const ContainerBaseStyles = {
+    backgroundColor: 'color-white',
+    boxShadow: '0 10px 30px rgba(0, 0, 0, 0.12)',
+    transition: 'box-shadow 0.2s ease',
+    _focusVisible: {
+        outline: 'none',
+        boxShadow: '0 0 0 2px white, 0 0 0 4px theme-primary',
+    },
+};
+// Groups typography settings for the modal's title and body text, including font size, weight, and color.
+export const ModalTypography = {
+    title: {
+        fontSize: '20px',
+        fontWeight: '600',
+        lineHeight: '28px',
+        color: 'color-gray-900',
+    },
+    body: {
+        fontSize: '16px',
+        fontWeight: '400',
+        lineHeight: '24px',
+        color: 'color-gray-700',
+    },
+};
+//# sourceMappingURL=Modal.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.style.js","sourceRoot":"","sources":["../../../../../src/components/Modal/Modal/Modal.style.ts"],"names":[],"mappings":"AAEA,2FAA2F;AAC3F,MAAM,CAAC,MAAM,eAAe,GAA6B;IACvD,MAAM,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;IAC3B,OAAO,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;CAC7B,CAAC;AACF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,iBAAiB,GAA8B;IAC1D,MAAM,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE;IAC1D,GAAG,EAAE;QACH,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,YAAY;KACzB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,UAAU;QAC1B,UAAU,EAAE,QAAQ;KACrB;IACD,MAAM,EAAE;QACN,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,UAAU;KACvB;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,YAAY;QAC5B,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AACF,mFAAmF;AACnF,MAAM,CAAC,MAAM,eAAe,GAAyB;IACnD,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC;AACF,4GAA4G;AAC5G,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACf,SAAS,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC;QACtC,UAAU,EAAE,gDAAgD;KAC7D;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACf,SAAS,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC;QACtC,UAAU,EAAE,gDAAgD;KAC7D;CACF,CAAC;AACF,+EAA+E;AAC/E,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,eAAe,EAAE,sBAAsB;IACvC,UAAU,EAAE,4BAA4B;CACzC,CAAC;AACF,gGAAgG;AAChG,MAAM,CAAC,MAAM,mBAAmB,GAAc;IAC5C,eAAe,EAAE,aAAa;IAC9B,SAAS,EAAE,iCAAiC;IAC5C,UAAU,EAAE,sBAAsB;IAClC,aAAa,EAAE;QACb,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,0CAA0C;KACtD;CACF,CAAC;AACF,0GAA0G;AAC1G,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,gBAAgB;KACxB;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,gBAAgB;KACxB;CACF,CAAC"}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { BodyProps, ContainerProps, FooterProps, HeaderProps } from '../Modal/Modal.props';
+import { Position } from './Modal.type';
+export interface OverlayProps {
+    views?: {
+        container?: ViewProps;
+        view?: ViewProps;
+    };
+    blur?: number;
+    isOpen?: boolean;
+    isClosePrevented?: boolean;
+    onClose?: () => void;
+    position?: Position;
+    children?: React.ReactNode;
+}
+export declare const ModalOverlay: React.FC<OverlayProps & any>;
+export declare const ModalContainer: React.FC<ContainerProps>;
+export declare const ModalHeader: React.FC<HeaderProps>;
+export declare const ModalBody: React.FC<BodyProps>;
+export declare const ModalFooter: React.FC<FooterProps>;

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

@@ -0,0 +1,86 @@
+import React, { useCallback } from 'react';
+import { View, Horizontal, Vertical, Center } from 'app-studio';
+import { CloseIcon } from '../../Icon/Icon';
+import { hideModal } from './Modal.store';
+import { ContainerShapes, OverlayAlignments, HeaderIconSizes, ModalTypography, } from '../Modal/Modal.style';
+// The ModalOverlay component serves as the backdrop and container for any modal content, managing its visibility and global positioning. It applies a customizable blur effect and handles close interactions.
+export const ModalOverlay = React.memo(({ children, blur, isOpen = false, isClosePrevented = false, onClose = () => { }, position = 'center', views, ...props }) => {
+    // Handles clicks on the modal overlay. If closing is not prevented, it triggers the onClose callback to hide the modal. This ensures the modal closes only when intended.
+    const handleClick = useCallback(() => {
+        if (!isClosePrevented)
+            onClose();
+    }, [isClosePrevented, onClose]);
+    return (<Center position="fixed" top={0} left={0} width="100%" height="100%" zIndex={1000} onClick={handleClick} visibility={isOpen ? 'visible' : 'hidden'} opacity={isOpen ? 1 : 0} transition="opacity 0.2s ease, visibility 0.2s ease" {...views?.container}>
+        <View position="absolute" top={0} left={0} zIndex={1000} width="100vw" height="100vh" display="flex" backgroundColor="color-blackAlpha-500" backdropFilter={blur ? `blur(${blur}px)` : undefined} transition="background-color 0.2s ease, backdrop-filter 0.2s ease" onClick={handleClick} {...OverlayAlignments[position]} {...props} {...views?.view}>
+          {children}
+        </View>
+      </Center>);
+});
+const webShadow = {
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.15)',
+};
+const nativeShadow = {
+    elevation: 5,
+    shadowColor: 'rgba(0, 0, 0, 0.15)',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 1,
+    shadowRadius: 16,
+};
+export const ModalContainer = React.memo(({ children, shadow, isFullScreen = false, shape = 'rounded', views, isOpen = true, 
+// Strip ContainerProps's domain `position` (Modal-specific enum) so it
+// doesn't reach the underlying Vertical which expects CSS Property.Position.
+position: _position, ...props }) => {
+    const defaultShadow = typeof document !== undefined ? webShadow : nativeShadow;
+    const handleClick = useCallback((event) => {
+        if (event && event.stopPropagation)
+            event.stopPropagation();
+    }, []);
+    return (<Vertical cursor="default" backgroundColor="color-white" width={isFullScreen ? '100%' : 600} height={isFullScreen ? '100%' : 'fit-content'} onClick={handleClick} transition="opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease" opacity={isOpen ? 1 : 0} transform={isOpen ? 'translateY(0)' : 'translateY(8px)'} {...(shadow ? shadow : defaultShadow)} {...ContainerShapes[shape]} media={{
+            mobile: {
+                width: '90%',
+                maxWidth: '100%',
+                margin: '16px',
+            },
+        }} {...props} {...views?.container}>
+        {children}
+      </Vertical>);
+});
+export const ModalHeader = React.memo(({ children, buttonColor = 'theme-primary', iconSize = 'md', buttonPosition = 'right', views, onClose: onCloseProp, ...props }) => {
+    const onClose = onCloseProp ? onCloseProp : hideModal;
+    const buttonIcon = (<View onClick={onClose}>
+        <CloseIcon widthHeight={HeaderIconSizes[iconSize]} color={buttonColor}/>
+      </View>);
+    return (<Horizontal justifyContent={buttonPosition === 'none' ? 'center' : 'space-between'} alignItems="center" paddingVertical={16} paddingHorizontal={24} borderBottomWidth="1px" borderBottomStyle="solid" borderBottomColor="color-gray-200" media={{
+            mobile: {
+                paddingVertical: 12,
+                paddingHorizontal: 16,
+            },
+        }} {...props} {...views?.header}>
+        {buttonPosition === 'left' && buttonIcon}
+        {children}
+        {buttonPosition === 'right' && buttonIcon}
+      </Horizontal>);
+});
+export const ModalBody = React.memo(({ children, views, ...props }) => {
+    return (<View paddingVertical={16} paddingHorizontal={24} fontSize={ModalTypography.body.fontSize} fontWeight={ModalTypography.body.fontWeight} color={ModalTypography.body.color} media={{
+            mobile: {
+                paddingVertical: 12,
+                paddingHorizontal: 16,
+                fontSize: '14px',
+            },
+        }} {...props} {...views?.view}>
+        {children}
+      </View>);
+});
+export const ModalFooter = React.memo(({ children, views, ...props }) => {
+    return (<Horizontal marginTop="auto" alignItems="center" justifyContent="flex-end" paddingVertical={16} paddingHorizontal={24} borderTopWidth="1px" borderTopStyle="solid" borderTopColor="color-gray-200" gap={12} media={{
+            mobile: {
+                paddingVertical: 12,
+                paddingHorizontal: 16,
+                gap: 8,
+            },
+        }} {...props} {...views?.container}>
+        {children}
+      </Horizontal>);
+});
+//# sourceMappingURL=Modal.view.js.map

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

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

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

@@ -0,0 +1,29 @@
+/**
+ * ModalView (React Native) – uses RN's built-in <Modal/> for proper portal
+ * + dismissal behaviour. Drops web-only concepts: position:fixed, viewport
+ * units (vw/vh), backdropFilter, cursor.
+ *
+ * Same public API as the web variant: ModalOverlay / ModalContainer /
+ * ModalHeader / ModalBody / ModalFooter.
+ */
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { BodyProps, ContainerProps, FooterProps, HeaderProps } from '../Modal/Modal.props';
+import { Position } from './Modal.type';
+export interface OverlayProps {
+    views?: {
+        container?: ViewProps;
+        view?: ViewProps;
+    };
+    blur?: number;
+    isOpen?: boolean;
+    isClosePrevented?: boolean;
+    onClose?: () => void;
+    position?: Position;
+    children?: React.ReactNode;
+}
+export declare const ModalOverlay: React.FC<OverlayProps & any>;
+export declare const ModalContainer: React.FC<ContainerProps>;
+export declare const ModalHeader: React.FC<HeaderProps>;
+export declare const ModalBody: React.FC<BodyProps>;
+export declare const ModalFooter: React.FC<FooterProps>;

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

@@ -0,0 +1,62 @@
+/**
+ * ModalView (React Native) – uses RN's built-in <Modal/> for proper portal
+ * + dismissal behaviour. Drops web-only concepts: position:fixed, viewport
+ * units (vw/vh), backdropFilter, cursor.
+ *
+ * Same public API as the web variant: ModalOverlay / ModalContainer /
+ * ModalHeader / ModalBody / ModalFooter.
+ */
+import React, { useCallback } from 'react';
+import { Modal as RNModal } from 'react-native';
+import { View, Horizontal, Vertical, Center } from 'app-studio';
+import { CloseIcon } from '../../Icon/Icon';
+import { hideModal } from './Modal.store';
+import { ContainerShapes, OverlayAlignments, HeaderIconSizes, ModalTypography, } from '../Modal/Modal.style';
+export const ModalOverlay = React.memo(({ children, isOpen = false, isClosePrevented = false, onClose = () => { }, position = 'center', views, ...props }) => {
+    const handlePress = useCallback(() => {
+        if (!isClosePrevented)
+            onClose();
+    }, [isClosePrevented, onClose]);
+    return (<RNModal visible={isOpen} transparent animationType="fade" onRequestClose={handlePress}>
+        <Center flex={1} backgroundColor="color-blackAlpha-500" onPress={handlePress} {...OverlayAlignments[position]} {...views?.container}>
+          <View flex={1} width="100%" justifyContent="center" alignItems="center" {...props} {...views?.view}>
+            {children}
+          </View>
+        </Center>
+      </RNModal>);
+});
+const nativeShadow = {
+    elevation: 5,
+    shadowColor: 'rgba(0, 0, 0, 0.15)',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 1,
+    shadowRadius: 16,
+};
+export const ModalContainer = React.memo(({ children, shadow, isFullScreen = false, shape = 'rounded', views, position: _position, ...props }) => {
+    // stopPropagation isn't needed on RN — touch events don't bubble up like web
+    return (<Vertical backgroundColor="color-white" width={isFullScreen ? '100%' : '90%'} maxWidth={600} {...(shadow ? shadow : nativeShadow)} {...ContainerShapes[shape]} {...props} {...views?.container}>
+        {children}
+      </Vertical>);
+});
+export const ModalHeader = React.memo(({ children, buttonColor = 'theme-primary', iconSize = 'md', buttonPosition = 'right', views, onClose: onCloseProp, ...props }) => {
+    const onClose = onCloseProp ? onCloseProp : hideModal;
+    const buttonIcon = (<View onPress={onClose}>
+        <CloseIcon widthHeight={HeaderIconSizes[iconSize]} color={buttonColor}/>
+      </View>);
+    return (<Horizontal justifyContent={buttonPosition === 'none' ? 'center' : 'space-between'} alignItems="center" paddingVertical={16} paddingHorizontal={24} borderBottomWidth={1} borderBottomColor="color-gray-200" {...props} {...views?.header}>
+        {buttonPosition === 'left' && buttonIcon}
+        {children}
+        {buttonPosition === 'right' && buttonIcon}
+      </Horizontal>);
+});
+export const ModalBody = React.memo(({ children, views, ...props }) => {
+    return (<View paddingVertical={16} paddingHorizontal={24} fontSize={ModalTypography.body.fontSize} fontWeight={ModalTypography.body.fontWeight} color={ModalTypography.body.color} {...props} {...views?.view}>
+        {children}
+      </View>);
+});
+export const ModalFooter = React.memo(({ children, views, ...props }) => {
+    return (<Horizontal marginTop="auto" alignItems="center" justifyContent="flex-end" paddingVertical={16} paddingHorizontal={24} borderTopWidth={1} borderTopColor="color-gray-200" gap={12} {...props} {...views?.container}>
+        {children}
+      </Horizontal>);
+});
+//# sourceMappingURL=Modal.view.native.js.map

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

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

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

@@ -0,0 +1,3 @@
+import { ModalType } from './Modal/Modal.props';
+export declare const Modal: ModalType;
+export * from './Modal/Modal.store';

package/dist/native/components/Modal/Modal.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ModalBody, ModalContainer, ModalFooter, ModalHeader, ModalOverlay, } from './Modal/Modal.view';
+import { ModalLayout } from './Modal/Modal.layout';
+// This file defines the main Modal component, which acts as a compound component. It groups and exports various sub-components (Overlay, Container, Header, Body, Footer, and Layout) as static properties, providing a flexible and structured way to compose modal dialogs.
+export const Modal = ({ children }) => <>{children}</>;
+Modal.Overlay = ModalOverlay;
+Modal.Container = ModalContainer;
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+Modal.Layout = ModalLayout;
+export * from './Modal/Modal.store';
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,GACb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,8QAA8Q;AAC9Q,MAAM,CAAC,MAAM,KAAK,GAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC;AAClE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAC7B,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC;AACjC,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { LinkProps } from '../../Link/Link/Link.props';
+import { NavigationItem, NavigationMenuStyles, Orientation, Size, Variant } from './NavigationMenu.type';
+export interface NavigationMenuProps {
+    items?: NavigationItem[];
+    children?: React.ReactNode;
+    orientation?: Orientation;
+    size?: Size;
+    variant?: Variant;
+    defaultActiveItemId?: string;
+    defaultExpandedItemIds?: string[];
+    onItemActivate?: (itemId: string) => void;
+    views?: NavigationMenuStyles;
+    [key: string]: any;
+}
+export interface NavigationMenuListProps {
+    children: React.ReactNode;
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface NavigationMenuItemProps {
+    item?: NavigationItem;
+    value?: string;
+    isDisabled?: boolean;
+    children?: React.ReactNode;
+    views?: {
+        item?: ViewProps;
+        trigger?: ViewProps;
+        content?: ViewProps;
+        icon?: ViewProps;
+        indicator?: ViewProps;
+    };
+}
+export interface NavigationMenuTriggerProps {
+    children: React.ReactNode | React.ReactElement;
+    itemId: string;
+    disabled?: boolean;
+    views?: {
+        container?: ViewProps;
+        icon?: ViewProps;
+        trigger?: ViewProps;
+        indicator?: ViewProps;
+    };
+}
+export interface NavigationMenuContentProps {
+    children: React.ReactNode;
+    itemId: string;
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface NavigationMenuLinkProps extends Omit<LinkProps, 'to'> {
+    href?: string;
+    children: React.ReactNode;
+    views?: {
+        container?: ViewProps;
+        icon?: ViewProps;
+    };
+}
+export interface NavigationMenuType extends React.FC<NavigationMenuProps> {
+    List: React.FC<NavigationMenuListProps>;
+    Item: React.FC<NavigationMenuItemProps>;
+    Trigger: React.FC<NavigationMenuTriggerProps>;
+    Content: React.FC<NavigationMenuContentProps>;
+    Link: React.FC<NavigationMenuLinkProps>;
+}

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

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

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

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

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

@@ -0,0 +1,8 @@
+export declare const useNavigationMenuState: (defaultActiveItemId?: string | null, defaultExpandedItemIds?: string[]) => {
+    activeItemId: string | null;
+    setActiveItemId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    expandedItemIds: string[];
+    toggleExpandedItem: (itemId: string) => void;
+    isItemExpanded: (itemId: string) => boolean;
+    triggerRefs: import("react").RefObject<Record<string, HTMLDivElement>>;
+};

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

@@ -0,0 +1,30 @@
+import { useState, useRef } from 'react';
+// This file defines a custom React hook, `useNavigationMenuState`, which encapsulates and manages the entire local state and logic for the Navigation Menu component, including active item tracking, expanded sub-menus, and element references.
+export const useNavigationMenuState = (defaultActiveItemId = null, defaultExpandedItemIds = []) => {
+    const [activeItemId, setActiveItemId] = useState(defaultActiveItemId);
+    const [expandedItemIds, setExpandedItemIds] = useState(defaultExpandedItemIds);
+    const triggerRefs = useRef({});
+    const toggleExpandedItem = (itemId) => {
+        setExpandedItemIds((prevExpandedItemIds) => {
+            const isExpanded = prevExpandedItemIds.includes(itemId);
+            if (isExpanded) {
+                return prevExpandedItemIds.filter((id) => id !== itemId);
+            }
+            else {
+                return [...prevExpandedItemIds, itemId];
+            }
+        });
+    };
+    const isItemExpanded = (itemId) => {
+        return expandedItemIds.includes(itemId);
+    };
+    return {
+        activeItemId,
+        setActiveItemId,
+        expandedItemIds,
+        toggleExpandedItem,
+        isItemExpanded,
+        triggerRefs,
+    };
+};
+//# sourceMappingURL=NavigationMenu.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.state.js","sourceRoot":"","sources":["../../../../../src/components/NavigationMenu/NavigationMenu/NavigationMenu.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzC,kPAAkP;AAClP,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,sBAAqC,IAAI,EACzC,yBAAmC,EAAE,EACrC,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,mBAAmB,CACpB,CAAC;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CACpD,sBAAsB,CACvB,CAAC;IACF,MAAM,WAAW,GAAG,MAAM,CAAiC,EAAE,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;QAC5C,kBAAkB,CAAC,CAAC,mBAAmB,EAAE,EAAE;YACzC,MAAM,UAAU,GAAG,mBAAmB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;YACxD,IAAI,UAAU,EAAE,CAAC;gBACf,OAAO,mBAAmB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,GAAG,mBAAmB,EAAE,MAAM,CAAC,CAAC;YAC1C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,EAAE;QACxC,OAAO,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC,CAAC;IACF,OAAO;QACL,YAAY;QACZ,eAAe;QACf,eAAe;QACf,kBAAkB;QAClB,cAAc;QACd,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,32 @@
+import { ViewProps } from 'app-studio';
+import { Orientation, Size, Variant } from './NavigationMenu.type';
+export declare const NavigationMenuSizes: Record<Size, ViewProps>;
+export declare const NavigationMenuVariants: Record<Variant, ViewProps>;
+export declare const NavigationMenuOrientations: Record<Orientation, ViewProps>;
+export declare const NavigationMenuItemStates: {
+    active: {
+        backgroundColor: string;
+        color: string;
+        fontWeight: string;
+        borderLeft: string;
+        borderColor: string;
+    };
+    hover: {
+        backgroundColor: string;
+        transition: string;
+    };
+    disabled: {
+        opacity: number;
+        cursor: string;
+    };
+};
+export declare const NavigationMenuIconStyles: {
+    default: {
+        color: string;
+        transition: string;
+    };
+    active: {
+        color: string;
+        transition: string;
+    };
+};