@app-studio/components 0.10.17

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { DropdownMenuItem, DropdownMenuStyles, Size, Variant, Position, Alignment } from './DropdownMenu.type';
+export interface DropdownMenuProps {
+    trigger: React.ReactNode;
+    items: DropdownMenuItem[];
+    size?: Size;
+    variant?: Variant;
+    side?: Position;
+    align?: Alignment;
+    defaultOpen?: boolean;
+    views?: DropdownMenuStyles;
+    [key: string]: any;
+}
+export interface DropdownMenuTriggerProps {
+    children: React.ReactNode;
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface DropdownMenuContentProps {
+    items: DropdownMenuItem[];
+    side?: Position;
+    align?: Alignment;
+    views?: {
+        menu?: ViewProps;
+        item?: ViewProps;
+        divider?: ViewProps;
+        icon?: ViewProps;
+        submenuIndicator?: ViewProps;
+    };
+}
+export interface DropdownMenuItemProps {
+    item: DropdownMenuItem;
+    views?: {
+        item?: ViewProps;
+        icon?: ViewProps;
+        submenuIndicator?: ViewProps;
+    };
+}
+export interface DropdownMenuDividerProps {
+    views?: {
+        divider?: ViewProps;
+    };
+}
+export interface DropdownMenuType extends React.FC<DropdownMenuProps> {
+    Trigger: React.FC<DropdownMenuTriggerProps>;
+    Content: React.FC<DropdownMenuContentProps>;
+    Item: React.FC<DropdownMenuItemProps>;
+    Divider: React.FC<DropdownMenuDividerProps>;
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+export declare const useDropdownMenuState: (defaultOpen?: boolean) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    activeSubmenuId: string | null;
+    setActiveSubmenuId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};

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

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+// This file defines the `useDropdownMenuState` custom hook, which encapsulates the entire state management and interaction logic for a dropdown menu component, including its open/closed state, active submenu tracking, and event listeners for closing the dropdown on outside clicks, window resize, or 'Escape' key press.
+export const useDropdownMenuState = (defaultOpen = false) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const [activeSubmenuId, setActiveSubmenuId] = useState(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            const path = event.composedPath();
+            const isOutside = !path.some((element) => element?.id === 'dropdown-menu' || element?.id === 'dropdown-trigger');
+            if (isOutside && isOpen) {
+                setIsOpen(false);
+                setActiveSubmenuId(null);
+            }
+        };
+        const handleResize = () => {
+            if (isOpen) {
+                setIsOpen(false);
+                setActiveSubmenuId(null);
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+                setActiveSubmenuId(null);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        window.addEventListener('resize', handleResize);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            window.removeEventListener('resize', handleResize);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    return {
+        isOpen,
+        setIsOpen,
+        activeSubmenuId,
+        setActiveSubmenuId,
+    };
+};
+//# sourceMappingURL=DropdownMenu.state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.state.js","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu/DropdownMenu.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,gUAAgU;AAChU,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,cAAuB,KAAK,EAAE,EAAE;IACnE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;YAClC,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,IAAI,CAC1B,CAAC,OAAY,EAAE,EAAE,CACf,OAAO,EAAE,EAAE,KAAK,eAAe,IAAI,OAAO,EAAE,EAAE,KAAK,kBAAkB,CACxE,CAAC;YACF,IAAI,SAAS,IAAI,MAAM,EAAE,CAAC;gBACxB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;QACF,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,MAAM,EAAE,CAAC;gBACX,SAAS,CAAC,KAAK,CAAC,CAAC;gBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;QACF,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,MAAM,EAAE,CAAC;gBACrC,SAAS,CAAC,KAAK,CAAC,CAAC;gBACjB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;YAC9D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACnD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO;QACL,MAAM;QACN,SAAS;QACT,eAAe;QACf,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,17 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Position, Alignment } from './DropdownMenu.type';
+export declare const DropdownMenuSizes: Record<Size, ViewProps>;
+export declare const DropdownMenuVariants: Record<Variant, ViewProps>;
+export declare const DropdownMenuItemStates: {
+    hover: {
+        backgroundColor: string;
+    };
+    active: {
+        backgroundColor: string;
+    };
+    disabled: {
+        opacity: number;
+        cursor: string;
+    };
+};
+export declare const getDropdownPosition: (side?: Position, align?: Alignment) => ViewProps;

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

@@ -0,0 +1,84 @@
+// Defines various size configurations (sm, md, lg) for dropdown menu items, specifying padding, font size, and minimum width.
+export const DropdownMenuSizes = {
+    sm: {
+        padding: '6px 8px',
+        fontSize: '14px',
+        minWidth: '160px',
+    },
+    md: {
+        padding: '8px 12px',
+        fontSize: '16px',
+        minWidth: '180px',
+    },
+    lg: {
+        padding: '10px 16px',
+        fontSize: '18px',
+        minWidth: '200px',
+    },
+};
+// Specifies different visual variants (default, filled, outline) for the dropdown menu, controlling background color, text color, and border styles.
+export const DropdownMenuVariants = {
+    default: {
+        backgroundColor: 'color-white',
+        color: 'color-gray-800',
+    },
+    filled: {
+        backgroundColor: 'color-gray-100',
+        color: 'color-gray-800',
+    },
+    outline: {
+        backgroundColor: 'color-white',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'color-gray-200',
+        color: 'color-gray-800',
+    },
+};
+// Defines styles for interactive states (hover, active, disabled) of dropdown menu items, providing visual feedback.
+export const DropdownMenuItemStates = {
+    hover: {
+        backgroundColor: 'color-gray-100',
+    },
+    active: {
+        backgroundColor: 'color-gray-200',
+    },
+    disabled: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+    },
+};
+// A utility function that calculates and returns the CSS properties required to position the dropdown menu based on the specified `side` (e.g., top, bottom) and `align` (e.g., start, center).
+export const getDropdownPosition = (side = 'bottom', align = 'start') => {
+    const positions = {
+        top: {
+            bottom: '100%',
+            marginBottom: '8px',
+            ...(align === 'start' && { left: 0 }),
+            ...(align === 'center' && { left: '50%', transform: 'translateX(-50%)' }),
+            ...(align === 'end' && { right: 0 }),
+        },
+        right: {
+            left: '100%',
+            marginLeft: '8px',
+            ...(align === 'start' && { top: 0 }),
+            ...(align === 'center' && { top: '50%', transform: 'translateY(-50%)' }),
+            ...(align === 'end' && { bottom: 0 }),
+        },
+        bottom: {
+            top: '100%',
+            marginTop: '8px',
+            ...(align === 'start' && { left: 0 }),
+            ...(align === 'center' && { left: '50%', transform: 'translateX(-50%)' }),
+            ...(align === 'end' && { right: 0 }),
+        },
+        left: {
+            right: '100%',
+            marginRight: '8px',
+            ...(align === 'start' && { top: 0 }),
+            ...(align === 'center' && { top: '50%', transform: 'translateY(-50%)' }),
+            ...(align === 'end' && { bottom: 0 }),
+        },
+    };
+    return positions[side];
+};
+//# sourceMappingURL=DropdownMenu.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.style.js","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu/DropdownMenu.style.ts"],"names":[],"mappings":"AAEA,8HAA8H;AAC9H,MAAM,CAAC,MAAM,iBAAiB,GAA4B;IACxD,EAAE,EAAE;QACF,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,OAAO;KAClB;IACD,EAAE,EAAE;QACF,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,OAAO;KAClB;IACD,EAAE,EAAE;QACF,OAAO,EAAE,WAAW;QACpB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC;AACF,qJAAqJ;AACrJ,MAAM,CAAC,MAAM,oBAAoB,GAA+B;IAC9D,OAAO,EAAE;QACP,eAAe,EAAE,aAAa;QAC9B,KAAK,EAAE,gBAAgB;KACxB;IACD,MAAM,EAAE;QACN,eAAe,EAAE,gBAAgB;QACjC,KAAK,EAAE,gBAAgB;KACxB;IACD,OAAO,EAAE;QACP,eAAe,EAAE,aAAa;QAC9B,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,gBAAgB;QAC7B,KAAK,EAAE,gBAAgB;KACxB;CACF,CAAC;AACF,qHAAqH;AACrH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,KAAK,EAAE;QACL,eAAe,EAAE,gBAAgB;KAClC;IACD,MAAM,EAAE;QACN,eAAe,EAAE,gBAAgB;KAClC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,aAAa;KACtB;CACF,CAAC;AACF,gMAAgM;AAChM,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,OAAiB,QAAQ,EACzB,QAAmB,OAAO,EACf,EAAE;IACb,MAAM,SAAS,GAAgC;QAC7C,GAAG,EAAE;YACH,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK;YACnB,GAAG,CAAC,KAAK,KAAK,OAAO,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;YACrC,GAAG,CAAC,KAAK,KAAK,QAAQ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;YACzE,GAAG,CAAC,KAAK,KAAK,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;SACrC;QACD,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,UAAU,EAAE,KAAK;YACjB,GAAG,CAAC,KAAK,KAAK,OAAO,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;YACpC,GAAG,CAAC,KAAK,KAAK,QAAQ,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;YACxE,GAAG,CAAC,KAAK,KAAK,KAAK,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;SACtC;QACD,MAAM,EAAE;YACN,GAAG,EAAE,MAAM;YACX,SAAS,EAAE,KAAK;YAChB,GAAG,CAAC,KAAK,KAAK,OAAO,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;YACrC,GAAG,CAAC,KAAK,KAAK,QAAQ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;YACzE,GAAG,CAAC,KAAK,KAAK,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;SACrC;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,GAAG,CAAC,KAAK,KAAK,OAAO,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;YACpC,GAAG,CAAC,KAAK,KAAK,QAAQ,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;YACxE,GAAG,CAAC,KAAK,KAAK,KAAK,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;SACtC;KACF,CAAC;IACF,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;AACzB,CAAC,CAAC"}

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

@@ -0,0 +1,35 @@
+import { ViewProps } from 'app-studio';
+import React from 'react';
+export type Size = 'sm' | 'md' | 'lg';
+export type Variant = 'default' | 'filled' | 'outline';
+export type Position = 'top' | 'right' | 'bottom' | 'left';
+export type Alignment = 'start' | 'center' | 'end';
+export interface DropdownMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    items?: DropdownMenuItem[];
+    divider?: boolean;
+}
+export interface DropdownMenuContextType {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    activeSubmenuId: string | null;
+    setActiveSubmenuId: (id: string | null) => void;
+    size: Size;
+    variant: Variant;
+    triggerRef: React.RefObject<HTMLElement | null>;
+}
+export interface DropdownMenuStyles {
+    container?: ViewProps;
+    trigger?: ViewProps;
+    menu?: ViewProps;
+    item?: ViewProps;
+    activeItem?: ViewProps;
+    divider?: ViewProps;
+    icon?: ViewProps;
+    submenuIndicator?: ViewProps;
+    submenu?: ViewProps;
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { DropdownMenuContextType, DropdownMenuItem as DropdownMenuItemType, Position, Alignment } from './DropdownMenu.type';
+import { DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuDividerProps } from './DropdownMenu.props';
+export declare const DropdownMenuProvider: React.FC<{
+    children: React.ReactNode;
+    value: DropdownMenuContextType;
+}>;
+export declare const useDropdownMenuContext: () => DropdownMenuContextType;
+export declare const DropdownMenuTrigger: React.FC<DropdownMenuTriggerProps>;
+export declare const DropdownMenuContent: React.FC<DropdownMenuContentProps>;
+export declare const DropdownMenuItem: React.FC<DropdownMenuItemProps>;
+export declare const DropdownMenuDivider: React.FC<DropdownMenuDividerProps>;
+export declare const DropdownMenuView: React.FC<{
+    trigger: React.ReactNode;
+    items: DropdownMenuItemType[];
+    side?: Position;
+    align?: Alignment;
+    views?: any;
+} & ViewProps>;

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

@@ -0,0 +1,192 @@
+import React, { createContext, useContext, useRef, useState, useEffect, } from 'react';
+import { View, useElementPosition } from 'app-studio';
+import { DropdownMenuSizes, DropdownMenuVariants, DropdownMenuItemStates, } from './DropdownMenu.style';
+import { ChevronIcon } from '../../Icon/Icon';
+// Initializes the React Context for managing the dropdown menu's state, providing default values for properties like `isOpen`, `activeSubmenuId`, `size`, `variant`, and a reference to the trigger element.
+const DropdownMenuContext = createContext({
+    isOpen: false,
+    setIsOpen: () => { },
+    activeSubmenuId: null,
+    setActiveSubmenuId: () => { },
+    size: 'md',
+    variant: 'default',
+    triggerRef: { current: null },
+});
+// A React functional component that serves as the provider for the `DropdownMenuContext`, making the dropdown state and functions available to all its children.
+export const DropdownMenuProvider = ({ children, value }) => {
+    return (<DropdownMenuContext.Provider value={value}>
+      {children}
+    </DropdownMenuContext.Provider>);
+};
+export const useDropdownMenuContext = () => {
+    const context = useContext(DropdownMenuContext);
+    if (!context) {
+        throw new Error('useDropdownMenuContext must be used within a DropdownMenuProvider');
+    }
+    return context;
+};
+export const DropdownMenuTrigger = ({ children, views, ...props }) => {
+    const { isOpen, setIsOpen, triggerRef } = useDropdownMenuContext();
+    const handleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+    return (<View ref={triggerRef} id="dropdown-trigger" onClick={handleClick} cursor="pointer" position="relative" display="inline-block" {...views?.container} {...props}>
+      {children}
+    </View>);
+};
+export const DropdownMenuContent = ({ items, side = 'bottom', align = 'start', views, ...props }) => {
+    const { isOpen, variant, triggerRef } = useDropdownMenuContext();
+    const contentRef = useRef(null);
+    const { ref: positionRef, relation } = useElementPosition({
+        trackChanges: true,
+        trackOnHover: true,
+        trackOnScroll: true,
+        trackOnResize: true,
+    });
+    const [optimalPosition, setOptimalPosition] = useState({
+        x: 0,
+        y: 0,
+        placement: side,
+    });
+    useEffect(() => {
+        if (triggerRef.current && positionRef) {
+            positionRef.current = triggerRef.current;
+        }
+    }, [triggerRef, positionRef, isOpen]);
+    useEffect(() => {
+        if (isOpen && contentRef.current && triggerRef.current) {
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            let placement = side;
+            if (relation) {
+                if (side === 'bottom' && relation.space.vertical === 'top') {
+                    placement = 'top';
+                }
+                else if (side === 'top' && relation.space.vertical === 'bottom') {
+                    placement = 'bottom';
+                }
+                else if (side === 'right' && relation.space.horizontal === 'left') {
+                    placement = 'left';
+                }
+                else if (side === 'left' && relation.space.horizontal === 'right') {
+                    placement = 'right';
+                }
+            }
+            let x = 0;
+            let y = 0;
+            switch (placement) {
+                case 'bottom':
+                    x =
+                        align === 'start'
+                            ? triggerRect.left
+                            : align === 'end'
+                                ? triggerRect.right - 180
+                                : triggerRect.left + triggerRect.width / 2 - 90;
+                    y = triggerRect.bottom + 8;
+                    break;
+                case 'top':
+                    x =
+                        align === 'start'
+                            ? triggerRect.left
+                            : align === 'end'
+                                ? triggerRect.right - 180
+                                : triggerRect.left + triggerRect.width / 2 - 90;
+                    y = triggerRect.top - 8;
+                    break;
+                case 'right':
+                    x = triggerRect.right + 8;
+                    y =
+                        align === 'start'
+                            ? triggerRect.top
+                            : align === 'end'
+                                ? triggerRect.bottom - 100
+                                : triggerRect.top + triggerRect.height / 2 - 50;
+                    break;
+                case 'left':
+                    x = triggerRect.left - 8;
+                    y =
+                        align === 'start'
+                            ? triggerRect.top
+                            : align === 'end'
+                                ? triggerRect.bottom - 100
+                                : triggerRect.top + triggerRect.height / 2 - 50;
+                    break;
+            }
+            setOptimalPosition({ x, y, placement });
+        }
+    }, [isOpen, side, align, triggerRef, relation]);
+    if (!isOpen) {
+        return null;
+    }
+    const getPositionStyles = () => {
+        const baseStyles = {
+            position: 'fixed',
+            left: optimalPosition.x,
+            top: optimalPosition.y,
+            zIndex: 1000,
+        };
+        switch (optimalPosition.placement) {
+            case 'top':
+                return { ...baseStyles, transform: 'translateY(-100%)' };
+            case 'left':
+                return { ...baseStyles, transform: 'translateX(-100%)' };
+            case 'bottom':
+            case 'right':
+            default:
+                return baseStyles;
+        }
+    };
+    const positionStyles = getPositionStyles();
+    return (<View ref={contentRef} id="dropdown-menu" borderRadius={4} boxShadow="0px 2px 8px rgba(0, 0, 0, 0.15)" overflow="hidden" style={positionStyles} {...DropdownMenuVariants[variant]} {...views?.menu} {...props}>
+      {items.map((item, index) => {
+            if (item.divider) {
+                return <DropdownMenuDivider key={`divider-${index}`} views={views}/>;
+            }
+            return <DropdownMenuItem key={item.id} item={item} views={views}/>;
+        })}
+    </View>);
+};
+export const DropdownMenuItem = ({ item, views, ...props }) => {
+    const { activeSubmenuId, setActiveSubmenuId, size } = useDropdownMenuContext();
+    const [isHovered, setIsHovered] = useState(false);
+    const hasSubmenu = item.items && item.items.length > 0;
+    const isSubmenuActive = activeSubmenuId === item.id;
+    const itemRef = useRef(null);
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+        if (hasSubmenu) {
+            setActiveSubmenuId(item.id);
+        }
+    };
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+    const handleClick = (e) => {
+        e.stopPropagation();
+        if (item.disabled)
+            return;
+        if (!hasSubmenu && item.onClick) {
+            item.onClick();
+        }
+    };
+    return (<View ref={itemRef} display="flex" alignItems="center" cursor={item.disabled ? 'not-allowed' : 'pointer'} opacity={item.disabled ? 0.5 : 1} position="relative" {...DropdownMenuSizes[size]} _hover={!item.disabled ? DropdownMenuItemStates.hover : {}} backgroundColor={isHovered && !item.disabled ? 'color-gray-100' : 'transparent'} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleClick} {...views?.item} {...props}>
+      {item.icon && (<View marginRight={8} {...views?.icon}>
+          {item.icon}
+        </View>)}
+      <View flexGrow={1}>{item.label}</View>
+      {hasSubmenu && (<View marginLeft={8} {...views?.submenuIndicator}>
+          <ChevronIcon orientation="right" widthHeight={16} color="currentColor" filled={true}/>
+        </View>)}
+      {isSubmenuActive && hasSubmenu && (<DropdownMenuContent items={item.items || []} side="right" align="start" views={views}/>)}
+    </View>);
+};
+export const DropdownMenuDivider = ({ views, ...props }) => {
+    return (<View height="1px" backgroundColor="color-gray-200" margin="4px 0" {...views?.divider} {...props}/>);
+};
+export const DropdownMenuView = ({ trigger, items, side = 'bottom', align = 'start', views, themeMode: elementMode, ...props }) => {
+    return (<View position="relative" display="inline-block" {...views?.container} {...props}>
+      <DropdownMenuTrigger views={views}>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent items={items} side={side} align={align} views={views}/>
+    </View>);
+};
+//# sourceMappingURL=DropdownMenu.view.js.map

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { DropdownMenuContextType, DropdownMenuItem as DropdownMenuItemType, Position, Alignment } from './DropdownMenu.type';
+import { DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuDividerProps } from './DropdownMenu.props';
+export declare const DropdownMenuProvider: React.FC<{
+    children: React.ReactNode;
+    value: DropdownMenuContextType;
+}>;
+export declare const useDropdownMenuContext: () => DropdownMenuContextType;
+export declare const DropdownMenuTrigger: React.FC<DropdownMenuTriggerProps>;
+export declare const DropdownMenuContent: React.FC<DropdownMenuContentProps>;
+export declare const DropdownMenuItem: React.FC<DropdownMenuItemProps>;
+export declare const DropdownMenuDivider: React.FC<DropdownMenuDividerProps>;
+export declare const DropdownMenuView: React.FC<{
+    trigger: React.ReactNode;
+    items: DropdownMenuItemType[];
+    side?: Position;
+    align?: Alignment;
+    views?: any;
+} & ViewProps>;

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

@@ -0,0 +1,77 @@
+import React, { createContext, useContext } from 'react';
+import { Modal, ScrollView } from 'react-native';
+import { View, Text } from 'app-studio';
+import { DropdownMenuSizes, DropdownMenuVariants, } from './DropdownMenu.style';
+const DropdownMenuContext = createContext({
+    isOpen: false,
+    setIsOpen: () => { },
+    activeSubmenuId: null,
+    setActiveSubmenuId: () => { },
+    size: 'md',
+    variant: 'default',
+    triggerRef: { current: null },
+});
+export const DropdownMenuProvider = ({ children, value }) => {
+    return (<DropdownMenuContext.Provider value={value}>
+      {children}
+    </DropdownMenuContext.Provider>);
+};
+export const useDropdownMenuContext = () => {
+    const context = useContext(DropdownMenuContext);
+    if (!context) {
+        throw new Error('useDropdownMenuContext must be used within a DropdownMenuProvider');
+    }
+    return context;
+};
+export const DropdownMenuTrigger = ({ children, views, ...props }) => {
+    const { isOpen, setIsOpen } = useDropdownMenuContext();
+    const handlePress = () => setIsOpen(!isOpen);
+    return (<View onPress={handlePress} onClick={handlePress} {...views?.container} {...props}>
+      {children}
+    </View>);
+};
+export const DropdownMenuContent = ({ items, views, ...props }) => {
+    const { isOpen, setIsOpen, variant } = useDropdownMenuContext();
+    return (<Modal visible={isOpen} transparent animationType="fade" onRequestClose={() => setIsOpen(false)}>
+      <View flex={1} backgroundColor="color-blackAlpha-400" justifyContent="center" alignItems="center" onPress={() => setIsOpen(false)} onClick={() => setIsOpen(false)}>
+        <View minWidth={200} borderRadius={4} overflow="hidden" {...DropdownMenuVariants[variant]} {...views?.menu} {...props}>
+          <ScrollView>
+            {items.map((item, index) => {
+            if (item.divider) {
+                return <DropdownMenuDivider key={`divider-${index}`} views={views}/>;
+            }
+            return <DropdownMenuItem key={item.id} item={item} views={views}/>;
+        })}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>);
+};
+export const DropdownMenuItem = ({ item, views, ...props }) => {
+    const { size, setIsOpen } = useDropdownMenuContext();
+    const handlePress = () => {
+        if (item.disabled)
+            return;
+        if (item.onClick)
+            item.onClick();
+        setIsOpen(false);
+    };
+    return (<View flexDirection="row" alignItems="center" opacity={item.disabled ? 0.5 : 1} onPress={handlePress} onClick={handlePress} {...DropdownMenuSizes[size]} {...views?.item} {...props}>
+      {item.icon && (<View marginRight={8} {...views?.icon}>
+          {item.icon}
+        </View>)}
+      <View flexGrow={1}>
+        {typeof item.label === 'string' ? <Text>{item.label}</Text> : item.label}
+      </View>
+    </View>);
+};
+export const DropdownMenuDivider = ({ views, ...props }) => {
+    return (<View height={1} backgroundColor="color-gray-200" marginVertical={4} {...views?.divider} {...props}/>);
+};
+export const DropdownMenuView = ({ trigger, items, views, themeMode: elementMode, ...props }) => {
+    return (<View {...views?.container} {...props}>
+      <DropdownMenuTrigger views={views}>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent items={items} views={views}/>
+    </View>);
+};
+//# sourceMappingURL=DropdownMenu.view.native.js.map

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

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

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

@@ -0,0 +1,2 @@
+import { DropdownMenuType } from './DropdownMenu/DropdownMenu.props';
+export declare const DropdownMenu: DropdownMenuType;

package/dist/native/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import { useDropdownMenuState } from './DropdownMenu/DropdownMenu.state';
+import { DropdownMenuProvider, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuDivider, DropdownMenuView, } from './DropdownMenu/DropdownMenu.view';
+// This file defines the main DropdownMenu component, integrating state management, context provision, and view rendering to create a reusable and configurable dropdown menu system. It also exports sub-components for building the menu's structure and content.
+const DropdownMenuComponent = ({ trigger, items, size = 'md', variant = 'default', side = 'bottom', align = 'start', defaultOpen = false, views, ...props }) => {
+    const { isOpen, setIsOpen, activeSubmenuId, setActiveSubmenuId } = useDropdownMenuState(defaultOpen);
+    const triggerRef = useRef(null);
+    return (<DropdownMenuProvider value={{
+            isOpen,
+            setIsOpen,
+            activeSubmenuId,
+            setActiveSubmenuId,
+            size,
+            variant,
+            triggerRef,
+        }}>
+      <DropdownMenuView trigger={trigger} items={items} side={side} align={align} views={views} {...props}/>
+    </DropdownMenuProvider>);
+};
+export const DropdownMenu = DropdownMenuComponent;
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.Divider = DropdownMenuDivider;
+//# sourceMappingURL=DropdownMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,kCAAkC,CAAC;AAC1C,mQAAmQ;AACnQ,MAAM,qBAAqB,GAAgC,CAAC,EAC1D,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,OAAO,EACf,WAAW,GAAG,KAAK,EACnB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAC9D,oBAAoB,CAAC,WAAW,CAAC,CAAC;IACpC,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC7C,OAAO,CACL,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC;YACL,MAAM;YACN,SAAS;YACT,eAAe;YACf,kBAAkB;YAClB,IAAI;YACJ,OAAO;YACP,UAAU;SACX,CAAC,CAEF;MAAA,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,EAEd;IAAA,EAAE,oBAAoB,CAAC,CACxB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,YAAY,GAAG,qBAAyC,CAAC;AACtE,YAAY,CAAC,OAAO,GAAG,mBAAmB,CAAC;AAC3C,YAAY,CAAC,OAAO,GAAG,mBAAmB,CAAC;AAC3C,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AACrC,YAAY,CAAC,OAAO,GAAG,mBAAmB,CAAC"}