pytech-ui 1.0.15 → 1.0.21

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TriggerButton = void 0;
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const jetpack_compose_2 = require("src/jetpack-compose");
+const Trigger = ({ children }) => children;
+Trigger.displayName = 'Trigger';
+exports.default = Trigger;
+const TriggerButton = ({ children, isIconOnly, onClick }) => {
+    if (isIconOnly)
+        return (<jetpack_compose_1.IconButton onClick={onClick}>
+            {children}
+        </jetpack_compose_1.IconButton>);
+    return (<jetpack_compose_1.Row horizontalArrangement='end' verticalAlignment="center" modifiers={[
+            (0, modifiers_1.defaultMinSize)({ minWidth: 48, minHeight: 48 }),
+            (0, modifiers_1.clip)({ type: 'roundedCorner', radius: jetpack_compose_2.Tokens.ShapeTokens.CornerValueExtraLarge }),
+            (0, modifiers_1.clickable)(onClick),
+            (0, modifiers_1.paddingAll)(10),
+        ]}>   
+            <jetpack_compose_1.Row horizontalArrangement={{ spacedBy: 4 }} verticalAlignment="center">
+                {children}
+            </jetpack_compose_1.Row>
+        </jetpack_compose_1.Row>);
+};
+exports.TriggerButton = TriggerButton;

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

@@ -0,0 +1,18 @@
+declare const Context: import("react").Context<{
+    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    hasLeading: boolean;
+    isTrigger?: boolean;
+}>;
+export declare const useMenu: () => {
+    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    hasLeading: boolean;
+    isTrigger?: boolean;
+};
+declare const ContextExpanded: import("react").Context<{
+    Expanded: boolean;
+}>;
+export declare const useMenuExpanded: () => {
+    Expanded: boolean;
+};
+export { ContextExpanded };
+export default Context;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextExpanded = exports.useMenuExpanded = exports.useMenu = void 0;
+const react_1 = require("react");
+const Context = (0, react_1.createContext)(null);
+const useMenu = () => {
+    const context = (0, react_1.useContext)(Context);
+    if (!context)
+        return null;
+    return context;
+};
+exports.useMenu = useMenu;
+const ContextExpanded = (0, react_1.createContext)(null);
+exports.ContextExpanded = ContextExpanded;
+const useMenuExpanded = () => {
+    const context = (0, react_1.useContext)(ContextExpanded);
+    if (!context)
+        return null;
+    return context;
+};
+exports.useMenuExpanded = useMenuExpanded;
+exports.default = Context;

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

@@ -0,0 +1,11 @@
+import React, { ReactNode, ReactElement } from 'react';
+export declare const getChildrenByDisplayName: (children: ReactNode, separatedDisplayNames?: string[] | "all") => {
+    slots: {
+        [key: string]: React.ReactNode | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    };
+    order: {
+        displayName: string;
+        element: ReactNode | ReactElement;
+    }[];
+};
+export declare const getHasLeadingRecursive: (children: ReactNode) => boolean;

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

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHasLeadingRecursive = exports.getChildrenByDisplayName = void 0;
+const react_1 = __importDefault(require("react"));
+const appendChild = (children, child) => {
+    if (!children)
+        return child;
+    else
+        return (<>
+            {children}
+            {child}
+        </>);
+};
+const getComponentDisplayName = (type) => {
+    if (typeof type !== 'function')
+        return undefined;
+    return type.displayName;
+};
+const getChildrenByDisplayName = (children, separatedDisplayNames = 'all') => {
+    /*
+     * Returns a object with the children by their display name and an array of the children in the order they were added.
+     * @param children - The children to get the display name of.
+     * @param separatedDisplayNames - The display names to separate from 'children'. If 'all', all display names are separated.
+     * @returns An object with the children by their display name and an array of the children in the order they were added.
+     */
+    const out = {};
+    const order = [];
+    const addToOrder = (displayName, element) => {
+        order.push({
+            displayName: displayName,
+            element: element
+        });
+    };
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (!react_1.default.isValidElement(child)) {
+            out.children = appendChild(out.children, child);
+            addToOrder('children', child);
+            continue;
+        }
+        const displayName = getComponentDisplayName(child.type);
+        if (displayName && (separatedDisplayNames === 'all' || separatedDisplayNames.includes(displayName))) {
+            out[displayName] = appendChild(out[displayName], child);
+            addToOrder(displayName, child);
+            continue;
+        }
+        out.children = appendChild(out.children, child);
+        addToOrder('children', child);
+    }
+    return {
+        slots: out,
+        order: order
+    };
+};
+exports.getChildrenByDisplayName = getChildrenByDisplayName;
+const getHasLeadingRecursive = (children) => {
+    return react_1.default.Children.toArray(children).some((child) => {
+        if (!react_1.default.isValidElement(child))
+            return false;
+        const displayName = getComponentDisplayName(child.type);
+        if (displayName === 'Item')
+            return child.props.isOn !== undefined;
+        if (displayName === 'Menu')
+            return true;
+        const nested = child.props.children;
+        if (nested != null)
+            return (0, exports.getHasLeadingRecursive)(nested);
+        return false;
+    });
+};
+exports.getHasLeadingRecursive = getHasLeadingRecursive;

package/build/jetpack-compose/components/PagePicker/Item.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PickerItemProps } from './types';
+declare const PickerItem: {
+    ({ children, tag, ...props }: PickerItemProps): React.JSX.Element;
+    HeadlineContent: (props: {
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+    LeadingContent: (props: {
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+};
+export default PickerItem;
+export type { PickerItemProps };

package/build/jetpack-compose/components/PagePicker/Item.js

@@ -0,0 +1,83 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("react");
+const jetpack_compose_1 = require("src/jetpack-compose");
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const context_1 = require("./context");
+const PickerItem = ({ children, tag, ...props }) => {
+    const { onSelectionChange } = (0, context_1.useContextCallbacks)() ?? {};
+    const addedDefaults = [
+        {
+            type: PickerItem.HeadlineContent,
+            component: <HeadlineContentDefault key={`HeadlineContentDefault-${tag}`}/>
+        }
+    ];
+    const ContextTagValue = (0, react_2.useMemo)(() => tag, [tag]);
+    return (<jetpack_compose_1.ListItem key={tag} modifiers={[
+            (0, modifiers_1.clickable)(() => {
+                onSelectionChange?.(tag);
+            })
+        ]} colors={{ trailingContentColor: jetpack_compose_1.Color.link }} {...props}>
+            <context_1.TagProvider tag={ContextTagValue} addedDefaults={addedDefaults}>
+                {children}
+                <jetpack_compose_1.ListItem.TrailingContent>
+                    <IconReactive />
+                </jetpack_compose_1.ListItem.TrailingContent>
+            </context_1.TagProvider>
+
+        </jetpack_compose_1.ListItem>);
+};
+const IconReactive = (0, react_1.memo)(() => {
+    const tag = (0, context_1.useContextTag)();
+    const selection = (0, context_1.useContextSelection)();
+    const alphaValue = (0, react_2.useMemo)(() => selection === tag ? 1 : 0, [selection, tag]);
+    return <IconAlpha alphaValue={alphaValue}/>;
+});
+const IconAlpha = (0, react_1.memo)(({ alphaValue }) => {
+    return <jetpack_compose_1.Icon source="Icons.Rounded.Check" modifiers={[(0, modifiers_1.alpha)(alphaValue)]}/>;
+});
+const LeadingContent = (props) => <jetpack_compose_1.ListItem.LeadingContent {...props}/>;
+const HeadlineContent = (props) => <jetpack_compose_1.ListItem.HeadlineContent {...props}/>;
+const HeadlineContentDefault = () => {
+    const tag = (0, context_1.useContextTag)();
+    return (<jetpack_compose_1.ListItem.HeadlineContent>
+            <jetpack_compose_1.Text>{tag}</jetpack_compose_1.Text>
+        </jetpack_compose_1.ListItem.HeadlineContent>);
+};
+PickerItem.HeadlineContent = HeadlineContent;
+PickerItem.LeadingContent = LeadingContent;
+exports.default = PickerItem;

package/build/jetpack-compose/components/PagePicker/Picker.d.ts

@@ -0,0 +1,4 @@
+import type { PickerProps } from './types';
+declare const Picker: ({ children, data, selection, onSelectionChange }: PickerProps) => import("react").JSX.Element;
+export default Picker;
+export type { PickerProps };

package/build/jetpack-compose/components/PagePicker/Picker.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jetpack_compose_1 = require("src/jetpack-compose");
+const context_1 = require("./context");
+const Item_1 = __importDefault(require("./Item"));
+const Picker = ({ children, data, selection, onSelectionChange }) => {
+    return (<context_1.PickerProvider selection={selection} onSelectionChange={onSelectionChange}>
+            <jetpack_compose_1.Section>
+                {children ? children : (data?.map(item => (<Item_1.default tag={item}/>)))}
+            </jetpack_compose_1.Section>
+        </context_1.PickerProvider>);
+};
+exports.default = Picker;

package/build/jetpack-compose/components/PagePicker/context/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SelectionValueType } from '../types';
+import type { PickerProviderProps, TagProviderProps, ContextCallbacksProps } from './types';
+export declare const useContextCallbacks: () => ContextCallbacksProps;
+export declare const useContextSelection: () => SelectionValueType;
+export declare const useContextTag: () => SelectionValueType;
+declare const PickerProvider: ({ children, selection, onSelectionChange, }: PickerProviderProps) => React.JSX.Element;
+declare const TagProvider: ({ children, tag, addedDefaults }: TagProviderProps) => React.JSX.Element;
+export { PickerProvider, TagProvider };

package/build/jetpack-compose/components/PagePicker/context/index.js

@@ -0,0 +1,90 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagProvider = exports.PickerProvider = exports.useContextTag = exports.useContextSelection = exports.useContextCallbacks = void 0;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("src/constants/hooks");
+const ContextCallbacks = (0, react_1.createContext)(null);
+const useContextCallbacks = () => (0, react_1.useContext)(ContextCallbacks);
+exports.useContextCallbacks = useContextCallbacks;
+const ContextSelection = (0, react_1.createContext)(null);
+const useContextSelection = () => (0, react_1.useContext)(ContextSelection);
+exports.useContextSelection = useContextSelection;
+const ContextTag = (0, react_1.createContext)(null);
+const useContextTag = () => (0, react_1.useContext)(ContextTag);
+exports.useContextTag = useContextTag;
+const PickerProvider = ({ children, selection, onSelectionChange, }) => {
+    const [currentSelection, setCurrentSelection] = (0, react_1.useState)(selection ?? null);
+    const currentSelectionRef = (0, react_1.useRef)(currentSelection);
+    const [executeSelectionChange, setExecuteSelectionChange] = (0, react_1.useState)(0);
+    (0, hooks_1.useEffectWithoutFirstRender)(() => {
+        setCurrentSelection(selection ?? null);
+    }, [selection]);
+    (0, hooks_1.useEffectWithoutFirstRender)(() => {
+        setTimeout(() => onSelectionChange?.(currentSelectionRef.current), 0);
+    }, [executeSelectionChange]);
+    const _onSelectionChange = (0, react_1.useCallback)((selection) => {
+        setCurrentSelection(selection);
+        // Hago todo esto para asegurarme de hacerlo luego del useEffect de currentSelection
+        currentSelectionRef.current = selection;
+        setExecuteSelectionChange(prev => prev + 1);
+    }, [onSelectionChange]);
+    const ContextCallbacksValue = (0, react_1.useMemo)(() => ({ onSelectionChange: _onSelectionChange }), [_onSelectionChange]);
+    const ContextSelectionValue = (0, react_1.useMemo)(() => currentSelection, [currentSelection]);
+    return (<ContextCallbacks.Provider value={ContextCallbacksValue}>
+        <ContextSelection.Provider value={ContextSelectionValue}>
+            {children}
+        </ContextSelection.Provider>
+        </ContextCallbacks.Provider>);
+};
+exports.PickerProvider = PickerProvider;
+const TagProvider = ({ children, tag, addedDefaults = [] }) => {
+    const addedTypes = react_1.default.Children.map(children, (child) => {
+        if (child && react_1.default.isValidElement(child) && child.type) {
+            return child.type;
+        }
+        return [];
+    }) ?? [];
+    const addedChildren = [];
+    addedDefaults.forEach(({ type, component }) => {
+        if (!(addedTypes.includes(type)))
+            addedChildren.push(component);
+    });
+    return (<ContextTag.Provider value={tag}>
+            {children}
+            {addedChildren}
+        </ContextTag.Provider>);
+};
+exports.TagProvider = TagProvider;

package/build/jetpack-compose/components/PagePicker/context/types.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PickerProps, SelectionValueType } from '../types';
+export interface ContextCallbacksProps {
+    onSelectionChange: PickerProps['onSelectionChange'];
+}
+export interface PickerProviderProps extends ContextCallbacksProps {
+    children: React.ReactNode;
+    selection: PickerProps['selection'];
+}
+export interface TagProviderProps {
+    children: React.ReactNode;
+    tag: SelectionValueType;
+    addedDefaults: {
+        type: React.ElementType;
+        component: React.ReactNode;
+    }[];
+}

package/build/jetpack-compose/components/PagePicker/context/types.js

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

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

@@ -0,0 +1,2 @@
+export { default as PagePicker } from './Picker';
+export { default as PagePickerItem, type PickerItemProps as PagePickerItemProps } from './Item';

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

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagePickerItem = exports.PagePicker = void 0;
+var Picker_1 = require("./Picker");
+Object.defineProperty(exports, "PagePicker", { enumerable: true, get: function () { return __importDefault(Picker_1).default; } });
+var Item_1 = require("./Item");
+Object.defineProperty(exports, "PagePickerItem", { enumerable: true, get: function () { return __importDefault(Item_1).default; } });

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ListItemProps } from '@expo/ui/jetpack-compose';
+export type SelectionValueType = string | number | null;
+export type PickerProps<T extends SelectionValueType = any> = {
+    /**
+        The data items to be rendered inside the picker.
+        @default []
+    */
+    data?: T[];
+    /**
+     * The selected option's `tag` modifier value.
+     */
+    selection?: T;
+    /**
+     * Callback function that is called when an option is selected.
+     * Gets called with the selected `tag` value.
+     */
+    onSelectionChange?: (selection: T) => void;
+    /**
+     * The content of the picker. You can use `PickerItem` components to display the options.
+     */
+    children?: React.ReactNode;
+};
+export interface PickerItemProps extends ListItemProps {
+    tag: SelectionValueType;
+}

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

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

package/build/jetpack-compose/components/PullToRefreshBox.d.ts

@@ -0,0 +1,3 @@
+import { PullToRefreshBoxProps } from '@expo/ui/jetpack-compose';
+export declare const PullToRefreshBox: ({ contentAlignment, ...props }: PullToRefreshBoxProps) => import("react").JSX.Element;
+export { PullToRefreshBoxProps };

package/build/jetpack-compose/components/PullToRefreshBox.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PullToRefreshBox = void 0;
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const react_1 = require("react");
+const jetpack_compose_2 = require("src/jetpack-compose");
+const PullToRefreshBox = ({ contentAlignment, ...props }) => {
+    const newContentAlignment = contentAlignment ?? 'topCenter';
+    const newProps = { ...props, contentAlignment: newContentAlignment };
+    if (props.isRefreshing !== undefined || !props.onRefresh)
+        return <jetpack_compose_1.PullToRefreshBox {...newProps}/>;
+    return <Component {...newProps}/>;
+};
+exports.PullToRefreshBox = PullToRefreshBox;
+const Component = ({ onRefresh, ...props }) => {
+    const [refreshing, setRefreshing] = (0, react_1.useState)(false);
+    const _onRefresh = (0, react_1.useCallback)(async () => {
+        setRefreshing(true);
+        await (onRefresh?.() ?? Promise.resolve());
+        setRefreshing(false);
+    }, [onRefresh]);
+    return (<jetpack_compose_1.PullToRefreshBox {...props} isRefreshing={refreshing} onRefresh={_onRefresh} indicator={{
+            color: jetpack_compose_2.Color.label,
+            containerColor: '#00000000' //Color.systemGroupedBackground
+        }}/>);
+};

package/build/jetpack-compose/components/SearchBar.d.ts

@@ -0,0 +1,19 @@
+import type { ModifierConfig } from 'src/jetpack-compose/utils';
+export interface SearchBarProps {
+    placeholder?: string;
+    /**
+     * Abre el teclado al montar (p. ej. al mostrar el header de búsqueda).
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Muestra ← clicable en lugar de la lupa decorativa.
+     * @default true
+     */
+    showBackButton?: boolean;
+    modifiers?: ModifierConfig[];
+    /** Al cerrar con ← nativo, back del sistema o IME search. */
+    onDismiss?: () => void;
+    onChangeText?: (text: string) => void;
+}
+export declare const SearchBar: ({ onDismiss, onChangeText, ...props }: SearchBarProps) => import("react").JSX.Element;

package/build/jetpack-compose/components/SearchBar.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = void 0;
+const expo_1 = require("expo");
+const utils_1 = require("src/jetpack-compose/utils");
+const SearchBarNativeView = (0, expo_1.requireNativeView)('MyUi', 'SearchBarView');
+const SearchBar = ({ onDismiss, onChangeText, ...props }) => {
+    return (<SearchBarNativeView {...(0, utils_1.transformProps)({ ...props })} onDismiss={onDismiss} onChangeText={onChangeText
+            ? (event) => onChangeText(event.nativeEvent.text)
+            : undefined}/>);
+};
+exports.SearchBar = SearchBar;

package/build/jetpack-compose/components/Section/components/Column.d.ts

@@ -0,0 +1,6 @@
+import { ColumnProps } from "@expo/ui/jetpack-compose";
+declare const _default: import("react").MemoExoticComponent<({ children, isTop }: {
+    children: ColumnProps["children"];
+    isTop?: boolean;
+}) => import("react").JSX.Element>;
+export default _default;

package/build/jetpack-compose/components/Section/components/Column.js

@@ -0,0 +1,20 @@
+"use strict";
+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");
+exports.default = (0, react_1.memo)(({ children, isTop = false }) => {
+    const horizontalPadding = (0, react_1.useMemo)(() => (0, modifiers_1.padding)(jetpack_compose_2.Tokens.ListTokens.DividerLeadingSpace, 0, jetpack_compose_2.Tokens.ListTokens.DividerTrailingSpace, 0), []);
+    const modifiers = (0, react_1.useMemo)(() => [
+        horizontalPadding,
+        (0, modifiers_1.padding)(0, isTop ? 0 : 6, // Si no es top, se agrega padding superior
+        0, isTop ? 6 : 0 // Si es top, se agrega padding inferior
+        )
+    ], [isTop]);
+    if (!children)
+        return null;
+    return (<jetpack_compose_1.Column verticalArrangement={{ spacedBy: 6 }} modifiers={modifiers}>
+			{children}
+		</jetpack_compose_1.Column>);
+});

package/build/jetpack-compose/components/Section/components/Section.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { SectionProps } from "../types";
+/**
+ * Section Android: el contenido pasa por [SectionHost] nativo (first/last en ListItems anidados).
+ */
+declare const _default: React.MemoExoticComponent<({ title, header, footer, children, }: SectionProps) => React.JSX.Element>;
+export default _default;

package/build/jetpack-compose/components/Section/components/Section.js

@@ -0,0 +1,67 @@
+"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 jetpack_compose_2 = require("src/jetpack-compose");
+const SectionHost_1 = __importDefault(require("../../SectionHost"));
+const Column_1 = __importDefault(require("./Column"));
+const Slot_1 = __importDefault(require("./Slot"));
+const hasSectionContent = (children) => react_1.default.Children.toArray(children).some(Boolean);
+/**
+ * Section Android: el contenido pasa por [SectionHost] nativo (first/last en ListItems anidados).
+ */
+exports.default = (0, react_1.memo)(({ title, header, footer, children, }) => (<>
+		<Column_1.default isTop>
+			{(title || header) && (<>
+					{title && <Slot_1.default slotName="title">{title}</Slot_1.default>}
+					{header && <Slot_1.default slotName="header">{header}</Slot_1.default>}
+				</>)}
+		</Column_1.default>
+
+		<SectionHost_1.default>
+			{children}
+		</SectionHost_1.default>
+
+		<Column_1.default>
+			{footer && <Slot_1.default slotName="footer">{footer}</Slot_1.default>}
+		</Column_1.default>
+
+		{hasSectionContent(children) && (<jetpack_compose_1.Box modifiers={[(0, modifiers_1.padding)(0, 0, 0, jetpack_compose_2.Tokens.ListTokens.ItemOneLineContainerHeight / 2)]}/>)}
+	</>));

package/build/jetpack-compose/components/Section/components/Slot.d.ts

@@ -0,0 +1,7 @@
+import { TextProps, TextSlotProps } from 'src/jetpack-compose';
+declare const _default: import("react").MemoExoticComponent<({ children, slotName }: SlotProps) => import("react").JSX.Element>;
+export default _default;
+type SlotProps = {
+    children: TextProps['children'];
+    slotName: TextSlotProps['slotName'];
+};

package/build/jetpack-compose/components/Section/components/Slot.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const jetpack_compose_1 = require("src/jetpack-compose");
+exports.default = (0, react_1.memo)(({ children, slotName }) => (<jetpack_compose_1.TextSlot slotName={slotName}>
+		{typeof children === 'string' ? <jetpack_compose_1.Text>{children}</jetpack_compose_1.Text> : children}
+	</jetpack_compose_1.TextSlot>));

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

@@ -0,0 +1,2 @@
+export { default as Section, default } from './components/Section';
+export type { SectionProps } from './types';