pytech-ui 1.0.15 → 1.0.21

package/build/jetpack-compose/components/IconSection/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconSection = void 0;
+var IconSection_1 = require("./IconSection");
+Object.defineProperty(exports, "IconSection", { enumerable: true, get: function () { return __importDefault(IconSection_1).default; } });

package/build/jetpack-compose/components/IconSection/types.d.ts

@@ -0,0 +1,25 @@
+import { GradientProps } from 'src/jetpack-compose';
+type Props = {
+    /**
+        The title of the icon section.
+    */
+    title?: string;
+    /**
+        The subtitle of the icon section.
+    */
+    subtitle?: string;
+    /**
+        If it is given, displays a gradient.
+    */
+    gradientProps?: Omit<GradientProps, 'type'> & {
+        type: 'extraLarge' | 'extraExtraLarge';
+    };
+    /**
+        If it is given, displays a button.
+    */
+    buttonProps?: {
+        label: string;
+        onPress: () => void;
+    };
+};
+export default Props;

package/build/jetpack-compose/components/IconSection/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/jetpack-compose/components/IconSection/utils.d.ts

@@ -0,0 +1,6 @@
+import { ModifierConfig } from '@expo/ui/jetpack-compose/modifiers';
+interface getItemClipType {
+    (index: number, lastIndex: number): ModifierConfig[];
+}
+export declare const getItemClip: getItemClipType;
+export {};

package/build/jetpack-compose/components/IconSection/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemClip = void 0;
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const jetpack_compose_1 = require("src/jetpack-compose");
+const getItemClip = (index, lastIndex) => {
+    const isFirst = index === 0;
+    const isLast = index === lastIndex;
+    let modifier = null;
+    if (isFirst || isLast) {
+        const radii = {
+            topStart: isFirst ? jetpack_compose_1.Tokens.ShapeTokens.CornerValueExtraLarge : 0,
+            topEnd: isFirst ? jetpack_compose_1.Tokens.ShapeTokens.CornerValueExtraLarge : 0,
+            bottomStart: isLast ? jetpack_compose_1.Tokens.ShapeTokens.CornerValueExtraLarge : 0,
+            bottomEnd: isLast ? jetpack_compose_1.Tokens.ShapeTokens.CornerValueExtraLarge : 0,
+        };
+        modifier = [(0, modifiers_1.clip)({ type: 'roundedCorner', ...radii })];
+    }
+    return modifier ?? [];
+};
+exports.getItemClip = getItemClip;

package/build/jetpack-compose/components/List/CommonColumn.d.ts

@@ -0,0 +1,3 @@
+import type { CommonColumnProps } from "./types";
+declare const _default: ({ isLazy, children, contentPadding, modifiers, ...props }: CommonColumnProps) => import("react").JSX.Element;
+export default _default;

package/build/jetpack-compose/components/List/CommonColumn.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const extended_theme_1 = require("src/jetpack-compose/extended-theme");
+const defaultContentPadding = { start: 16, end: 16, top: 0, bottom: 0 };
+exports.default = ({ isLazy = false, children, contentPadding = defaultContentPadding, modifiers = [], ...props }) => {
+    const newModifiers = [
+        ...[
+            (0, modifiers_1.padding)((contentPadding.start ?? defaultContentPadding.start), (contentPadding.top ?? defaultContentPadding.top), (contentPadding.end ?? defaultContentPadding.end), (contentPadding.bottom ?? defaultContentPadding.bottom)),
+            (0, modifiers_1.clip)({ type: 'roundedCorner', radius: extended_theme_1.Tokens.ShapeTokens.CornerValueExtraLarge }),
+            ...(!isLazy ? [(0, modifiers_1.verticalScroll)()] : [])
+        ],
+        ...modifiers
+    ];
+    const newProps = {
+        ...props,
+        modifiers: newModifiers
+    };
+    return (<Container isLazy={isLazy} {...newProps}>
+			{children}
+		</Container>);
+};
+const Container = ({ children, isLazy = false, ...props }) => {
+    return (isLazy ?
+        <jetpack_compose_1.LazyColumn {...props}>{children}</jetpack_compose_1.LazyColumn> :
+        <jetpack_compose_1.Column {...props}>{children}</jetpack_compose_1.Column>);
+};

package/build/jetpack-compose/components/List/index.d.ts

@@ -0,0 +1,7 @@
+import type { ListContextType, ListProps } from './types';
+export type { ListProps };
+export declare const useList: () => ListContextType;
+/**
+ * Emula la List de SwiftUI.
+ */
+export declare const List: import("react").MemoExoticComponent<({ children, onRefresh, ...props }: ListProps) => import("react").JSX.Element>;

package/build/jetpack-compose/components/List/index.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.useList = void 0;
+const react_1 = require("react");
+const jetpack_compose_1 = require("src/jetpack-compose");
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const CommonColumn_1 = __importDefault(require("./CommonColumn"));
+const Context = (0, react_1.createContext)(null);
+const useList = () => (0, react_1.useContext)(Context);
+exports.useList = useList;
+/**
+ * Emula la List de SwiftUI.
+ */
+exports.List = (0, react_1.memo)(({ children, onRefresh, ...props }) => {
+    const [HasForEach, setHasForEach] = (0, react_1.useState)(false);
+    const value = (0, react_1.useMemo)(() => ({ setHasForEach }), [setHasForEach]);
+    return (<Context.Provider value={value}>
+			<PullToRefreshBoxRenderer onRefresh={onRefresh}>
+				<CommonColumnRenderer hasForEach={HasForEach} {...props}>
+					{children}
+				</CommonColumnRenderer>
+			</PullToRefreshBoxRenderer>
+		</Context.Provider>);
+});
+const PullToRefreshBoxRenderer = ({ children, onRefresh }) => {
+    if (!onRefresh)
+        return children;
+    return (<jetpack_compose_1.PullToRefreshBox onRefresh={onRefresh}>
+			{children}
+		</jetpack_compose_1.PullToRefreshBox>);
+};
+const CommonColumnRenderer = ({ children, hasForEach, modifiers = [], ...props }) => {
+    if (hasForEach)
+        return children;
+    return (<CommonColumn_1.default modifiers={[(0, modifiers_1.fillMaxHeight)(), ...modifiers]} {...props}>
+			{children}
+		</CommonColumn_1.default>);
+};

package/build/jetpack-compose/components/List/types.d.ts

@@ -0,0 +1,31 @@
+import { ContentPadding, ColumnProps as ExpoColumnProps, LazyColumnProps as ExpoLazyColumnProps } from "@expo/ui/jetpack-compose";
+import { Dispatch, ReactElement, SetStateAction } from "react";
+export type ListProps = (ExpoColumnProps | ExpoLazyColumnProps) & {
+    /**
+     * Si renderiza una Column o LazyColumn
+     * @default false
+     */
+    isLazy?: boolean;
+    /**
+     * Padding del contenido del listado
+     * @default { start: 16, end: 16, top: 0, bottom: 0 }
+     */
+    contentPadding?: ContentPadding;
+    /**
+     * Agrega un PullToRefreshBox simple al listado
+     * Si quiero usar un PullToRefreshBox personalizado, debo usar el componente PullToRefreshBox de myui
+     */
+    onRefresh?: PullToRefreshBoxRendererType['onRefresh'];
+};
+export type PullToRefreshBoxRendererType = {
+    children: ReactElement;
+    onRefresh?: () => Promise<void>;
+};
+export type ListContextType = {
+    setHasForEach: Dispatch<SetStateAction<boolean>>;
+};
+export type CommonColumnRendererType = ListProps & {
+    hasForEach: boolean;
+};
+export type CommonColumnProps = Omit<ListProps, 'onRefresh'>;
+export type ContainerProps = Omit<CommonColumnProps, 'contentPadding'>;

package/build/jetpack-compose/components/List/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/jetpack-compose/components/ListItem/SlotListItem.d.ts

@@ -0,0 +1,40 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type ModifierConfig } from 'src/jetpack-compose/utils';
+import { ColorValue } from 'react-native';
+export type ListItemColors = {
+    containerColor?: ColorValue;
+    contentColor?: ColorValue;
+    leadingContentColor?: ColorValue;
+    trailingContentColor?: ColorValue;
+    supportingContentColor?: ColorValue;
+    overlineContentColor?: ColorValue;
+};
+export interface ListItemProps {
+    colors?: ListItemColors;
+    tonalElevation?: number;
+    shadowElevation?: number;
+    showDivider?: boolean;
+    modifiers?: ModifierConfig[];
+    children?: ReactNode;
+    isFirst?: boolean;
+    isLast?: boolean;
+    hasNavigationLink?: boolean;
+}
+export declare const useListItemColors: () => ListItemColors;
+export { type ListItemProps as SlotListItemProps };
+declare const ListItemComponent: {
+    ({ children, colors, ...props }: ListItemProps): import("react").JSX.Element;
+    displayName: string;
+};
+type ListItemSlotProps = {
+    children?: ReactNode;
+};
+type ListItemSlots = {
+    HeadlineContent: (props: ListItemSlotProps) => ReactElement;
+    OverlineContent: (props: ListItemSlotProps) => ReactElement;
+    SupportingContent: (props: ListItemSlotProps) => ReactElement;
+    LeadingContent: (props: ListItemSlotProps) => ReactElement;
+    TrailingContent: (props: ListItemSlotProps) => ReactElement;
+};
+type SlotListItemType = typeof ListItemComponent & ListItemSlots;
+export declare const SlotListItem: SlotListItemType;

package/build/jetpack-compose/components/ListItem/SlotListItem.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlotListItem = exports.useListItemColors = void 0;
+const expo_1 = require("expo");
+const react_1 = require("react");
+const jetpack_compose_1 = require("src/jetpack-compose");
+const extended_theme_1 = require("src/jetpack-compose/extended-theme");
+const utils_1 = require("src/jetpack-compose/utils");
+const ContextListItemColors = (0, react_1.createContext)(null);
+const useListItemColors = () => (0, react_1.useContext)(ContextListItemColors);
+exports.useListItemColors = useListItemColors;
+const defaultColors = {
+    containerColor: '#00000000',
+    contentColor: extended_theme_1.Color.label,
+    leadingContentColor: extended_theme_1.Color.link,
+    trailingContentColor: extended_theme_1.Color.secondaryLabel,
+    supportingContentColor: extended_theme_1.Color.secondaryLabel,
+};
+const ListItemNativeView = (0, expo_1.requireNativeView)('MyUi', 'ListItemView');
+const SlotNativeView = (0, expo_1.requireNativeView)('ExpoUI', 'SlotView');
+function transformProps(props) {
+    const { modifiers, ...restProps } = props;
+    return {
+        modifiers,
+        ...(modifiers ? (0, utils_1.createViewModifierEventListener)(modifiers) : undefined),
+        ...restProps,
+    };
+}
+const ListItemComponent = ({ children, colors, ...props }) => {
+    const newColors = {
+        ...defaultColors,
+        ...(colors || {}),
+    };
+    return (<ListItemNativeView {...transformProps({ ...props, colors: newColors })}>
+			<ContextListItemColors.Provider value={newColors}>
+				{children}
+			</ContextListItemColors.Provider>
+		</ListItemNativeView>);
+};
+const SLOT_NAMES = [
+    'HeadlineContent',
+    'OverlineContent',
+    'SupportingContent',
+    'LeadingContent',
+    'TrailingContent',
+];
+const SlotView = ({ children, slotKey }) => {
+    const slotName = slotKey.charAt(0).toLowerCase() + slotKey.slice(1);
+    return (<SlotNativeView slotName={slotName}>
+			<jetpack_compose_1.TextSlot slotName={slotName}>{children}</jetpack_compose_1.TextSlot>
+		</SlotNativeView>);
+};
+function createSlotComponent(slotKey) {
+    return ({ children }) => (<SlotView slotKey={slotKey}>{children}</SlotView>);
+}
+const listItemSlotsWithTypography = {
+    HeadlineContent: createSlotComponent('HeadlineContent'),
+    OverlineContent: createSlotComponent('OverlineContent'),
+    SupportingContent: createSlotComponent('SupportingContent'),
+    LeadingContent: createSlotComponent('LeadingContent'),
+    TrailingContent: createSlotComponent('TrailingContent'),
+};
+ListItemComponent.displayName = 'ListItem.Slot';
+ListItemComponent.__myUiListItem = true;
+exports.SlotListItem = Object.assign(ListItemComponent, listItemSlotsWithTypography);

package/build/jetpack-compose/components/ListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { SlotListItem as ListItem, useListItemColors } from './SlotListItem';
+export type { SlotListItemProps as ListItemProps } from './SlotListItem';

package/build/jetpack-compose/components/ListItem/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListItemColors = exports.ListItem = void 0;
+var SlotListItem_1 = require("./SlotListItem");
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return SlotListItem_1.SlotListItem; } });
+Object.defineProperty(exports, "useListItemColors", { enumerable: true, get: function () { return SlotListItem_1.useListItemColors; } });

package/build/jetpack-compose/components/Menu/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Menu, type MenuProps } from './src/components/Menu';
+export { type ItemProps as MenuItemProps } from './src/components/Item';
+export { type LabelProps as MenuLabelProps } from './src/components/Label';

package/build/jetpack-compose/components/Menu/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+var Menu_1 = require("./src/components/Menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return __importDefault(Menu_1).default; } });
+//export { useMenu } from './src/context';

package/build/jetpack-compose/components/Menu/src/components/Divider.d.ts

@@ -0,0 +1,2 @@
+declare const Divider: () => import("react").JSX.Element;
+export default Divider;

package/build/jetpack-compose/components/Menu/src/components/Divider.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const extended_theme_1 = require("src/jetpack-compose/extended-theme");
+const jetpack_compose_2 = require("src/jetpack-compose");
+const Divider = () => (<jetpack_compose_1.HorizontalDivider modifiers={horizontalDividerModifiers} color={jetpack_compose_2.Color.separator}/>);
+const horizontalDividerModifiers = [
+    (0, modifiers_1.padding)(extended_theme_1.Tokens.SegmentedMenuTokens.HorizontalItemLeadingSpace, extended_theme_1.Tokens.SegmentedMenuTokens.HorizontalItemTopSpace, extended_theme_1.Tokens.SegmentedMenuTokens.HorizontalItemTrailingSpace, extended_theme_1.Tokens.SegmentedMenuTokens.HorizontalItemBottomSpace),
+    (0, modifiers_1.alpha)(0.4)
+];
+exports.default = Divider;

package/build/jetpack-compose/components/Menu/src/components/Icon.d.ts

@@ -0,0 +1,7 @@
+import { IconProps } from 'src/jetpack-compose';
+declare const Icon: {
+    ({ size, ...props }: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default Icon;
+export type { IconProps };

package/build/jetpack-compose/components/Menu/src/components/Icon.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jetpack_compose_1 = require("src/jetpack-compose");
+const Icon = ({ size = 17, ...props }) => (<jetpack_compose_1.Icon size={size} {...props}/>);
+Icon.displayName = 'Icon';
+exports.default = Icon;

package/build/jetpack-compose/components/Menu/src/components/Item.d.ts

@@ -0,0 +1,22 @@
+import { StackToolbarMenuActionProps } from 'expo-router';
+import { DropdownMenuItemProps as ExpoDropdownMenuItemProps } from "@expo/ui/src/jetpack-compose/DropdownMenu/DropdownMenuItem";
+declare const Item: {
+    ({ children, isOn, subtitle, onPress, elementColors, modifiers, ...props }: ItemProps): import("react").JSX.Element;
+    displayName: string;
+};
+interface ItemProps extends Omit<ExpoDropdownMenuItemProps, 'onClick'> {
+    /**
+     * If `true`, the menu item will be displayed as selected.
+     */
+    isOn?: StackToolbarMenuActionProps['isOn'];
+    /**
+     * An optional subtitle for the menu item.
+     */
+    subtitle?: StackToolbarMenuActionProps['subtitle'];
+    /**
+     * Callback that is called when the menu item is clicked.
+     */
+    onPress?: ExpoDropdownMenuItemProps['onClick'];
+}
+export default Item;
+export type { ItemProps };

package/build/jetpack-compose/components/Menu/src/components/Item.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const jetpack_compose_2 = require("src/jetpack-compose");
+const extended_theme_1 = require("src/jetpack-compose/extended-theme");
+const context_1 = require("../context");
+const utils_1 = require("../utils");
+const Icon_1 = __importDefault(require("./Icon"));
+const Label_1 = __importDefault(require("./Label"));
+const Item = ({ children, isOn, subtitle, onPress, elementColors = {}, modifiers = [], ...props }) => {
+    const { isTrigger, hasLeading, setExpanded } = (0, context_1.useMenu)() ?? {};
+    const { slots } = (0, react_1.useMemo)(() => (0, utils_1.getChildrenByDisplayName)(children), [children]);
+    const Children = slots?.children;
+    const onClick = (0, react_1.useCallback)(() => {
+        onPress?.();
+        setExpanded?.(prev => !prev);
+    }, [onPress, setExpanded]);
+    return (<jetpack_compose_1.DropdownMenuItem elementColors={{
+            textColor: extended_theme_1.Color.label,
+            leadingIconColor: extended_theme_1.Color.label,
+            trailingIconColor: extended_theme_1.Color.tertiaryLabel,
+            ...elementColors
+        }} modifiers={[
+            (0, modifiers_1.clip)({ type: 'roundedCorner', radius: jetpack_compose_2.Tokens.ShapeTokens.CornerValueExtraLarge }),
+            ...modifiers
+        ]} onClick={onClick} {...props}>
+            <jetpack_compose_1.DropdownMenuItem.Text>
+                <jetpack_compose_1.Row horizontalArrangement={{ spacedBy: 8 }} verticalAlignment="center">
+
+                    {hasLeading && (<jetpack_compose_1.Box modifiers={[(0, modifiers_1.width)(24)]} contentAlignment="center">
+                            {isTrigger ? <IconSubmenu /> :
+                isOn ? <Icon_1.default source='Icons.Rounded.Check'/> :
+                    null}
+                        </jetpack_compose_1.Box>)}
+
+                    {slots?.Icon}
+
+                    {(Children || slots?.Label) && (<jetpack_compose_1.Column>
+                            <jetpack_compose_1.Box>
+                                <jetpack_compose_2.TextSlot slotName="menuitemheadline">
+                                    {slots?.Label}
+                                    {typeof Children === 'string'
+                ? <Label_1.default>{Children}</Label_1.default>
+                : Children}
+                                </jetpack_compose_2.TextSlot>
+                            </jetpack_compose_1.Box>
+                            {subtitle &&
+                <jetpack_compose_2.TextSlot slotName="menuitemsupporting">
+                                    <jetpack_compose_2.Text>{subtitle}</jetpack_compose_2.Text>
+                                </jetpack_compose_2.TextSlot>}
+                        </jetpack_compose_1.Column>)}
+                    
+                </jetpack_compose_1.Row>
+            </jetpack_compose_1.DropdownMenuItem.Text>
+        </jetpack_compose_1.DropdownMenuItem>);
+};
+const IconSubmenu = () => {
+    const { Expanded } = (0, context_1.useMenuExpanded)() ?? {};
+    return <Icon_1.default source={'Icons.Rounded.ArrowForwardIos'} size={15} modifiers={[(0, modifiers_1.graphicsLayer)({ rotationZ: (0, modifiers_1.animated)(Expanded ? 90 : 0, (0, modifiers_1.spring)()) })]}/>;
+};
+Item.displayName = 'Item';
+exports.default = Item;

package/build/jetpack-compose/components/Menu/src/components/Label.d.ts

@@ -0,0 +1,7 @@
+import { StackToolbarLabelProps as LabelProps } from 'expo-router';
+declare const Label: {
+    ({ children }: LabelProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default Label;
+export type { LabelProps };

package/build/jetpack-compose/components/Menu/src/components/Label.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jetpack_compose_1 = require("src/jetpack-compose");
+const Label = ({ children }) => (<jetpack_compose_1.Text>
+        {children}
+    </jetpack_compose_1.Text>);
+Label.displayName = 'Label';
+exports.default = Label;

package/build/jetpack-compose/components/Menu/src/components/Menu.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react";
+import { DropdownMenuProps } from '../../../DropdownMenu';
+import { IconProps } from './Icon';
+declare const Menu: {
+    ({ color, children, onDismissRequest, expanded, hasLeading, ...props }: MenuProps): React.JSX.Element;
+    displayName: string;
+    Trigger: {
+        ({ children }: {
+            children: ReactNode;
+        }): React.ReactNode;
+        displayName: string;
+    };
+    Item: {
+        ({ children, isOn, subtitle, onPress, elementColors, modifiers, ...props }: import("src/jetpack-compose").MenuItemProps): React.JSX.Element;
+        displayName: string;
+    };
+    Label: {
+        ({ children }: import("src/jetpack-compose").MenuLabelProps): React.JSX.Element;
+        displayName: string;
+    };
+    Icon: {
+        ({ size, ...props }: IconProps): React.JSX.Element;
+        displayName: string;
+    };
+    Divider: () => React.JSX.Element;
+};
+interface MenuProps extends DropdownMenuProps {
+    hasLeading?: boolean;
+}
+export default Menu;
+export type { MenuProps };

package/build/jetpack-compose/components/Menu/src/components/Menu.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const hooks_1 = require("src/constants/hooks");
+const jetpack_compose_2 = require("src/jetpack-compose");
+const extended_theme_1 = require("src/jetpack-compose/extended-theme");
+const DropdownMenu_1 = require("../../../DropdownMenu");
+const context_1 = __importStar(require("../context"));
+const utils_1 = require("../utils");
+const Item_1 = __importDefault(require("./Item"));
+const Label_1 = __importDefault(require("./Label"));
+const Icon_1 = __importDefault(require("./Icon"));
+const Divider_1 = __importDefault(require("./Divider"));
+const Trigger_1 = __importStar(require("./Trigger"));
+const Menu = ({ color, children, onDismissRequest, expanded = false, hasLeading, ...props }) => {
+    const [Expanded, setExpanded] = (0, react_1.useState)(expanded);
+    (0, hooks_1.useEffectWithoutFirstRender)(() => setExpanded(expanded), [expanded]);
+    const _onDismissRequest = (0, react_1.useCallback)(() => {
+        setExpanded(false);
+        onDismissRequest?.();
+    }, [onDismissRequest]);
+    const _hasLeading = (0, react_1.useMemo)(() => hasLeading ?? (0, utils_1.getHasLeadingRecursive)(children), [children, hasLeading]);
+    const hasLeadingParent = (0, context_1.useMenu)()?.hasLeading;
+    const { slots, order } = (0, react_1.useMemo)(() => (0, utils_1.getChildrenByDisplayName)(children, ['Icon', 'Label', 'Trigger']), [children]);
+    const valueExpanded = (0, react_1.useMemo)(() => ({ Expanded }), [Expanded]);
+    const valueItems = (0, react_1.useMemo)(() => ({ setExpanded, hasLeading: _hasLeading }), [_hasLeading]);
+    const valueTrigger = (0, react_1.useMemo)(() => ({ setExpanded, hasLeading: hasLeadingParent ?? false, Expanded, isTrigger: true }), [Expanded]);
+    const isFirstMenu = (0, react_1.useMemo)(() => hasLeadingParent === undefined, [hasLeadingParent]);
+    const { isIconOnly, childrenTrigger } = (0, react_1.useMemo)(() => {
+        if (!isFirstMenu)
+            return { isIconOnly: false, childrenTrigger: [] };
+        let output = [];
+        for (const { displayName, element } of order) {
+            if (!react_1.default.isValidElement(element))
+                continue;
+            if (displayName === 'Icon')
+                output.push({ displayName, element: react_1.default.cloneElement(element, { size: 24 }) });
+            if (displayName === 'Label' || displayName === 'Trigger')
+                output.push({ displayName, element });
+        }
+        //Si tiene un Trigger, solo dejamos el Trigger
+        const trigger = output.find((item) => item.displayName === 'Trigger');
+        if (trigger)
+            output = [trigger];
+        const isIconOnly = output.length === 1 && output[0].displayName === 'Icon';
+        const childrenTrigger = output.map(({ element }) => element);
+        return { isIconOnly, childrenTrigger };
+    }, [order]);
+    return (<DropdownMenu_1.DropdownMenu expanded={Expanded} onDismissRequest={_onDismissRequest} color={color || jetpack_compose_2.Color.secondarySystemGroupedBackground} {...props}>
+
+                <DropdownMenu_1.DropdownMenu.Trigger>
+                    <context_1.default.Provider value={valueTrigger}>
+                        {isFirstMenu ? (
+        //Si es el primer menu...
+        <Trigger_1.TriggerButton onClick={() => setExpanded(true)} isIconOnly={isIconOnly}>
+                                {childrenTrigger}
+                            </Trigger_1.TriggerButton>) : (
+        //Si es un submenu...
+        <context_1.ContextExpanded.Provider value={valueExpanded}>
+                                <Item_1.default>
+                                    {slots?.Icon}
+                                    {slots?.Label}
+                                </Item_1.default>
+                            </context_1.ContextExpanded.Provider>)}
+                    </context_1.default.Provider>
+                </DropdownMenu_1.DropdownMenu.Trigger>
+                    
+                <DropdownMenu_1.DropdownMenu.Items>
+                    <context_1.default.Provider value={valueItems}>
+                        <jetpack_compose_1.Column modifiers={[
+            (0, modifiers_1.defaultMinSize)({ minWidth: 250 }),
+            (0, modifiers_1.padding)(extended_theme_1.Tokens.SegmentedMenuTokens.HorizontalContainerTopSpace, 0, extended_theme_1.Tokens.SegmentedMenuTokens.HorizontalContainerBottomSpace, 0)
+        ]}>
+                            {slots?.children}
+                        </jetpack_compose_1.Column>
+                    </context_1.default.Provider>
+                </DropdownMenu_1.DropdownMenu.Items>
+
+        </DropdownMenu_1.DropdownMenu>);
+};
+Menu.displayName = 'Menu';
+Menu.Trigger = Trigger_1.default;
+Menu.Item = Item_1.default;
+Menu.Label = Label_1.default;
+Menu.Icon = Icon_1.default;
+Menu.Divider = Divider_1.default;
+exports.default = Menu;

package/build/jetpack-compose/components/Menu/src/components/Trigger.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+declare const Trigger: {
+    ({ children }: {
+        children: ReactNode;
+    }): ReactNode;
+    displayName: string;
+};
+export default Trigger;
+declare const TriggerButton: ({ children, isIconOnly, onClick }: TriggerButtonProps) => import("react").JSX.Element;
+interface TriggerButtonProps {
+    children: ReactNode;
+    isIconOnly: boolean;
+    onClick: () => void;
+}
+export { TriggerButton, type TriggerButtonProps };