pytech-ui 1.0.15 → 1.0.21

package/build/jetpack-compose/components/DropdownPicker/PickerItem.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerItem = void 0;
+const react_1 = require("react");
+const Menu_1 = require("../Menu");
+const context_1 = require("./context");
+const PickerItem = ({ tag, onPress, ...props }) => {
+    const { Selection } = (0, context_1.usePickerSelection)();
+    const { setSelection, setLabel } = (0, context_1.usePicker)();
+    const LabelRef = (0, react_1.useRef)(null);
+    const SelectionRef = (0, react_1.useRef)(Selection);
+    const _onPress = (0, react_1.useCallback)(() => {
+        setSelection(tag);
+        setLabel(LabelRef.current);
+        onPress?.();
+    }, [tag, onPress]);
+    const registerLabel = (0, react_1.useCallback)((label) => {
+        const newLabel = label ?? null;
+        LabelRef.current = newLabel;
+        if (SelectionRef.current === tag)
+            setLabel(newLabel);
+    }, [tag]);
+    const value = (0, react_1.useMemo)(() => ({ registerLabel }), []);
+    return (<context_1.ContextItem.Provider value={value}>
+            <Menu_1.Menu.Item {...props} onPress={_onPress} isOn={Selection === tag}/>
+        </context_1.ContextItem.Provider>);
+};
+exports.PickerItem = PickerItem;
+const Label = ({ children, ...props }) => {
+    const { registerLabel } = (0, context_1.usePickerItem)();
+    (0, react_1.useEffect)(() => {
+        registerLabel(children);
+    }, [children]);
+    return (<Menu_1.Menu.Label {...props}>
+            {children}
+        </Menu_1.Menu.Label>);
+};
+Label.displayName = 'Label';
+PickerItem.Label = Label;
+PickerItem.Icon = Menu_1.Menu.Icon;

package/build/jetpack-compose/components/DropdownPicker/context.d.ts

@@ -0,0 +1,21 @@
+declare const Context: import("react").Context<{
+    setSelection: import("react").Dispatch<import("react").SetStateAction<import("./types").SelectionValueType>>;
+    setLabel: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+}>;
+export declare const usePicker: () => {
+    setSelection: import("react").Dispatch<import("react").SetStateAction<import("./types").SelectionValueType>>;
+    setLabel: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};
+export declare const ContextSelection: import("react").Context<{
+    Selection: import("./types").SelectionValueType;
+}>;
+export declare const usePickerSelection: () => {
+    Selection: import("./types").SelectionValueType;
+};
+export declare const ContextItem: import("react").Context<{
+    registerLabel: (label?: string) => void;
+}>;
+export declare const usePickerItem: () => {
+    registerLabel: (label?: string) => void;
+};
+export default Context;

package/build/jetpack-compose/components/DropdownPicker/context.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePickerItem = exports.ContextItem = exports.usePickerSelection = exports.ContextSelection = exports.usePicker = void 0;
+const react_1 = require("react");
+const Context = (0, react_1.createContext)(null);
+const usePicker = () => {
+    const context = (0, react_1.useContext)(Context);
+    if (!context) {
+        throw new Error('usePicker must be used within a Picker');
+    }
+    return context;
+};
+exports.usePicker = usePicker;
+exports.ContextSelection = (0, react_1.createContext)(null);
+const usePickerSelection = () => {
+    const context = (0, react_1.useContext)(exports.ContextSelection);
+    if (!context) {
+        throw new Error('usePickerSelection must be used within a Picker');
+    }
+    return context;
+};
+exports.usePickerSelection = usePickerSelection;
+exports.ContextItem = (0, react_1.createContext)(null);
+const usePickerItem = () => {
+    const context = (0, react_1.useContext)(exports.ContextItem);
+    if (!context) {
+        throw new Error('usePicker must be used within a Picker');
+    }
+    return context;
+};
+exports.usePickerItem = usePickerItem;
+exports.default = Context;

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

@@ -0,0 +1,2 @@
+export { Picker as DropdownPicker, type PickerProps as DropdownPickerProps } from './Picker';
+export { PickerItem as DropdownPickerItem, type PickerItemProps as DropdownPickerItemProps } from './PickerItem';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownPickerItem = exports.DropdownPicker = void 0;
+var Picker_1 = require("./Picker");
+Object.defineProperty(exports, "DropdownPicker", { enumerable: true, get: function () { return Picker_1.Picker; } });
+var PickerItem_1 = require("./PickerItem");
+Object.defineProperty(exports, "DropdownPickerItem", { enumerable: true, get: function () { return PickerItem_1.PickerItem; } });

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

@@ -0,0 +1,36 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { MenuItemProps } from '../Menu';
+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 type ContextSelectionValueType = null | {
+    Selection: SelectionValueType;
+};
+export type ContextValueType = null | {
+    setSelection: Dispatch<SetStateAction<SelectionValueType>>;
+    setLabel: Dispatch<SetStateAction<string | null>>;
+};
+export type ContextItemValueType = null | {
+    registerLabel: (label?: string) => void;
+};
+export interface PickerItemProps extends MenuItemProps {
+    tag: SelectionValueType;
+}

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

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

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

@@ -0,0 +1,4 @@
+import { ForEach } from './src/ForEach';
+export type { ForEachProps } from './src/types';
+export { ForEach };
+export default ForEach;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForEach = void 0;
+const ForEach_1 = require("./src/ForEach");
+Object.defineProperty(exports, "ForEach", { enumerable: true, get: function () { return ForEach_1.ForEach; } });
+exports.default = ForEach_1.ForEach;

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import type { ForEachProps } from './types';
+export declare function ForEach<T = unknown>({ modifiers, contentPadding, data, keyExtractor, renderItem, ListHeaderComponent, ListFooterComponent, children, ...restProps }: ForEachProps<T>): import("react").JSX.Element;
+export declare namespace ForEach {
+    var ListItem: {
+        (_props: import("./types").ForEachListItemProps): any;
+        displayName: string;
+    };
+    var Header: ({ children }: {
+        children: ReactNode;
+    }) => import("react").JSX.Element;
+    var Footer: ({ children }: {
+        children: ReactNode;
+    }) => import("react").JSX.Element;
+    var displayName: string;
+}

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForEach = ForEach;
+const expo_1 = require("expo");
+const react_1 = require("react");
+const utils_1 = require("src/jetpack-compose/utils");
+const List_1 = require("../../List");
+const keyExtractor_1 = require("./utils/keyExtractor");
+const resolveListItemElement_1 = require("./utils/resolveListItemElement");
+const ListItem_1 = require("./ListItem");
+const SlotNativeView = (0, expo_1.requireNativeView)('ExpoUI', 'SlotView');
+function Header({ children }) {
+    return <SlotNativeView slotName="header">{children}</SlotNativeView>;
+}
+function Footer({ children }) {
+    return <SlotNativeView slotName="footer">{children}</SlotNativeView>;
+}
+function renderListSlotComponent(component) {
+    if (component == null)
+        return null;
+    if ((0, react_1.isValidElement)(component))
+        return component;
+    return (0, react_1.createElement)(component);
+}
+const defaultContentPadding = { start: 16, end: 16, top: 0, bottom: 0 };
+const Native = (0, expo_1.requireNativeView)('MyUi', 'ForEach');
+function ForEach({ modifiers, contentPadding = defaultContentPadding, data, keyExtractor = keyExtractor_1.defaultKeyExtractor, renderItem, ListHeaderComponent, ListFooterComponent, children, ...restProps }) {
+    const { setHasForEach } = (0, List_1.useList)() ?? {};
+    (0, react_1.useLayoutEffect)(() => {
+        setHasForEach?.(true);
+    }, [setHasForEach]);
+    const resolvedData = (0, react_1.useMemo)(() => data.map((item, index) => {
+        const id = String(keyExtractor(item));
+        const element = renderItem({ item, id, index });
+        return (0, resolveListItemElement_1.resolveListItemElement)(element, id);
+    }), [data, keyExtractor, renderItem]);
+    const resolvedDataRef = (0, react_1.useRef)(resolvedData);
+    resolvedDataRef.current = resolvedData;
+    const nativeData = (0, react_1.useMemo)(() => resolvedData.map(({ onPress: _onPress, ...item }) => item), [resolvedData]);
+    const onItemPress = (0, react_1.useCallback)(({ nativeEvent }) => {
+        resolvedDataRef.current.find((item) => item.id === nativeEvent.id)?.onPress?.();
+    }, []);
+    const modifierEvents = (0, react_1.useMemo)(() => (modifiers ? (0, utils_1.createViewModifierEventListener)(modifiers) : undefined), [modifiers]);
+    const headerContent = renderListSlotComponent(ListHeaderComponent);
+    const footerContent = renderListSlotComponent(ListFooterComponent);
+    return (<Native modifiers={modifiers} contentPaddingStart={contentPadding.start ?? defaultContentPadding.start} contentPaddingEnd={contentPadding.end ?? defaultContentPadding.end} contentPaddingTop={contentPadding.top ?? defaultContentPadding.top} contentPaddingBottom={contentPadding.bottom ?? defaultContentPadding.bottom} data={nativeData} onItemPress={onItemPress} {...modifierEvents} {...restProps}>
+			{headerContent != null && <Header>{headerContent}</Header>}
+			{children}
+			{footerContent != null && <Footer>{footerContent}</Footer>}
+		</Native>);
+}
+ForEach.ListItem = ListItem_1.ForEachListItem;
+ForEach.Header = Header;
+ForEach.Footer = Footer;
+ForEach.displayName = 'ForEach';

package/build/jetpack-compose/components/ForEach/src/ListItem.d.ts

@@ -0,0 +1,5 @@
+import { ForEachListItemProps } from './types';
+export declare const ForEachListItem: {
+    (_props: ForEachListItemProps): any;
+    displayName: string;
+};

package/build/jetpack-compose/components/ForEach/src/ListItem.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForEachListItem = void 0;
+// Solo sirve para transportar props
+const ForEachListItem = (_props) => null;
+exports.ForEachListItem = ForEachListItem;
+exports.ForEachListItem.displayName = 'ForEach.ListItem';

package/build/jetpack-compose/components/ForEach/src/types.d.ts

@@ -0,0 +1,74 @@
+import { ComponentType, type ReactElement, type ReactNode } from 'react';
+import { type ModifierConfig } from 'src/jetpack-compose/utils';
+import { type ListItemProps } from '../../ListItem/SlotListItem';
+import { type IconProps } from '../../Icon';
+import { type GradientProps, type NativeGradientProps } from '../../Gradient';
+import { type TextProps } from '@expo/ui/jetpack-compose';
+export type ListItemSlotContentType = 'text' | 'icon' | 'gradient';
+/** Lo que escribís en `<ForEach.ListItem leadingContent={...} />`. */
+export type ForEachListItemLeadingContent = {
+    type: 'icon';
+    props: IconProps;
+} | {
+    type: 'gradient';
+    props: GradientProps;
+};
+/** Lo que viaja al bridge nativo (gradient ya resuelto). */
+export type ListItemSlotContent = {
+    type: 'icon';
+    props: IconProps;
+} | {
+    type: 'gradient';
+    props: NativeGradientProps;
+} | {
+    type: 'text';
+    props: TextProps & {
+        text: string;
+    };
+};
+export interface ListItemContentRecord {
+    leadingContent?: ListItemSlotContent;
+    headlineContent?: ListItemSlotContent;
+    trailingContent?: ListItemSlotContent;
+    overlineContent?: ListItemSlotContent;
+    supportingContent?: ListItemSlotContent;
+}
+export interface ListItemDataRecord {
+    id: string;
+    content: ListItemContentRecord;
+    listItemProps: ListItemProps;
+}
+export type ResolvedForEachItem = ListItemDataRecord & {
+    onPress?: () => void;
+};
+export type ForEachRenderItemInfo<T = unknown> = {
+    item: T;
+    id: string;
+    index: number;
+};
+export interface ForEachItemListProps<T = unknown> {
+    data: readonly T[];
+    keyExtractor?: (item: T) => string | number;
+    renderItem: (info: ForEachRenderItemInfo<T>) => ReactElement;
+}
+export type ListSlotComponent = ComponentType | ReactElement | null | undefined;
+export type ForEachProps<T = unknown> = ForEachItemListProps<T> & {
+    modifiers?: ModifierConfig[];
+    contentPadding?: {
+        start?: number;
+        end?: number;
+        top?: number;
+        bottom?: number;
+    };
+    ListHeaderComponent?: ListSlotComponent;
+    ListFooterComponent?: ListSlotComponent;
+    children?: ReactNode;
+};
+export type ForEachListItemProps = {
+    headlineText?: string;
+    supportingText?: string;
+    trailingText?: string;
+    leadingContent?: ForEachListItemLeadingContent;
+    hasNavigationLink?: boolean;
+    onPress?: () => void;
+};

package/build/jetpack-compose/components/ForEach/src/types.js

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

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

@@ -0,0 +1 @@
+export declare function defaultKeyExtractor(item: unknown): string;

package/build/jetpack-compose/components/ForEach/src/utils/keyExtractor.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultKeyExtractor = defaultKeyExtractor;
+function defaultKeyExtractor(item) {
+    if (typeof item === 'string' || typeof item === 'number') {
+        return String(item);
+    }
+    if (typeof item === 'object' && item !== null && 'id' in item) {
+        return String(item.id);
+    }
+    return String(item);
+}

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

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import { type ResolvedForEachItem } from '../types';
+export declare function resolveListItemElement(element: ReactElement, id: string): ResolvedForEachItem;

package/build/jetpack-compose/components/ForEach/src/utils/resolveListItemElement.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveListItemElement = resolveListItemElement;
+const react_1 = require("react");
+const Gradient_1 = require("../../../Gradient");
+function resolveListItemElement(element, id) {
+    if (!(0, react_1.isValidElement)(element) || getComponentDisplayName(element.type) !== 'ForEach.ListItem') {
+        throw new Error('ForEach renderItem must return <ForEach.ListItem />');
+    }
+    const props = element.props;
+    return {
+        id,
+        content: {
+            leadingContent: transformContent(props.leadingContent),
+            headlineContent: textContent(props.headlineText),
+            supportingContent: textContent(props.supportingText),
+            trailingContent: textContent(props.trailingText),
+        },
+        listItemProps: {
+            hasNavigationLink: props.hasNavigationLink
+        },
+        onPress: props.onPress,
+    };
+}
+// Solo las props de gradient por ahora
+const transformContent = (leadingContent) => {
+    if (!leadingContent)
+        return leadingContent;
+    if (leadingContent.type === 'gradient') {
+        return { type: 'gradient', props: (0, Gradient_1.transformGradientProps)(leadingContent.props) };
+    }
+    return leadingContent;
+};
+const textContent = (text) => {
+    if (text == null || text === '')
+        return undefined;
+    return { type: 'text', props: { text } };
+};
+const getComponentDisplayName = (type) => {
+    if (typeof type !== 'function')
+        return undefined;
+    return type.displayName;
+};

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

@@ -0,0 +1,3 @@
+import { type Props, type NativeGradientProps } from './types';
+export declare const transformProps: ({ text, color, type, source, iconSize, fontSize, size }?: Props) => NativeGradientProps;
+export declare const Gradient: import("react").MemoExoticComponent<(props: Props) => import("react").JSX.Element>;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gradient = exports.transformProps = void 0;
+const expo_1 = require("expo");
+const react_1 = require("react");
+const gradient_1 = require("src/constants/gradient");
+const transformProps = ({ text, color = 'default', type = 'small', source, iconSize, fontSize, size = null } = {}) => {
+    const cantLetras = text?.length;
+    if (cantLetras && cantLetras > 3)
+        throw new Error('Text must be less than 3 characters');
+    const fontSize_ = fontSize ?? ((cantLetras && gradient_1.sizes[type].fontSize.length >= cantLetras)
+        ? gradient_1.sizes[type].fontSize[cantLetras]
+        : undefined);
+    return {
+        text: text,
+        fontSize: fontSize_,
+        size: size ?? gradient_1.sizes[type].diameter,
+        colors: gradient_1.colors[color] ?? gradient_1.colors.default,
+        source: source,
+        iconSize: iconSize ?? (!text ? gradient_1.sizes[type].diameter / 2 : undefined)
+    };
+};
+exports.transformProps = transformProps;
+const GradientNativeView = (0, expo_1.requireNativeView)('MyUi', 'GradientView');
+exports.Gradient = (0, react_1.memo)((props) => (<GradientNativeView {...(0, exports.transformProps)(props)}/>));

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

@@ -0,0 +1,2 @@
+export { Props as GradientProps, NativeGradientProps } from './types';
+export { Gradient, transformProps as transformGradientProps } from './Gradient';

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

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

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

@@ -0,0 +1,51 @@
+import { colors, sizesType } from 'src/constants/gradient';
+import { IconProps } from '../Icon';
+export type Props = {
+    /**
+        The text to display in the gradient.
+        Must be less than 3 characters.
+    */
+    text?: string;
+    /**
+        The color of the gradient.
+        @default 'default'
+    */
+    color?: keyof typeof colors;
+    /**
+        The size of the gradient.
+        @default 'small'
+    */
+    type?: sizesType;
+    /**
+        The size of the icon.
+        @ios
+        @default (typeSizes.diameter/2)
+    */
+    iconSize?: number;
+    /**
+        The size of the gradient.
+        @default null
+    */
+    size?: number | null;
+    /**
+        The font size of the text.
+        @default undefined
+    */
+    fontSize?: number;
+    /**
+        Source of the icon.
+    */
+    source?: IconProps['source'];
+};
+export type NativeGradientProps = {
+    text?: string;
+    fontSize?: number;
+    size?: number;
+    colors?: {
+        light?: string;
+        dark?: string;
+    };
+    source?: IconProps['source'];
+    iconSize?: number;
+};
+export default Props;

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

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

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Host = void 0;
+const expo_1 = require("expo");
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const ExtendedTheme = (0, expo_1.requireNativeView)('MyUi', 'ExtendedTheme');
+const Host = ({ style, ...props }) => {
+    return (<jetpack_compose_1.Host style={{ flex: 1, ...style }} {...props}>
+            <ExtendedTheme>{props.children}</ExtendedTheme>
+        </jetpack_compose_1.Host>);
+};
+exports.Host = Host;

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const expo_1 = require("expo");
+const modifiers_1 = require("@expo/ui/jetpack-compose/modifiers");
+const utils_1 = require("src/jetpack-compose/utils");
+const IconNativeView = (0, expo_1.requireNativeView)('MyUi', 'IconView');
+exports.default = (props) => {
+    const { size: sizeProp, modifiers, ...restProps } = props;
+    const newModifiers = [...(modifiers || []), ...(sizeProp ? [(0, modifiers_1.size)(sizeProp, sizeProp)] : [])];
+    const newProps = { ...restProps, modifiers: newModifiers };
+    return <IconNativeView {...(0, utils_1.transformProps)(newProps)}/>;
+};

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

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon';
+export type { IconProps } from './types';

package/build/jetpack-compose/components/Icon/Icon/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.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });

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

@@ -0,0 +1,15 @@
+import type { IconProps as ExpoIconProps } from '@expo/ui/jetpack-compose';
+import type MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import type { ComponentProps } from 'react';
+type MaterialIconName = ComponentProps<typeof MaterialIcons>['name'];
+type KebabToPascal<S extends string> = S extends `${infer Head}-${infer Tail}` ? `${Capitalize<Head>}${KebabToPascal<Tail>}` : Capitalize<S>;
+type IconTheme = 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp' | 'AutoMirrored.Filled' | 'AutoMirrored.Outlined' | 'AutoMirrored.Rounded' | 'AutoMirrored.TwoTone' | 'AutoMirrored.Sharp';
+export type IconSource = `Icons.${IconTheme}.${KebabToPascal<MaterialIconName>}`;
+export interface IconProps extends Omit<ExpoIconProps, 'source'> {
+    /**
+     * Ruta del icono (Material Symbols) https://fonts.google.com/icons
+     * @example <Icon source={'Icons.Filled.Favorite'} />
+     */
+    source?: IconSource;
+}
+export {};

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

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

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

@@ -0,0 +1,13 @@
+import { IconProps as ExpoIconProps } from '@expo/ui/jetpack-compose';
+import { IconProps as MyUiIconProps } from './Icon';
+declare const Icon: {
+    ({ source, size, ...props }: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
+type MyUiIconProps_ = Omit<MyUiIconProps, 'source'>;
+type ExpoIconProps_ = Omit<ExpoIconProps, 'source'>;
+type IconProps = (MyUiIconProps_ | ExpoIconProps_) & {
+    source?: MyUiIconProps['source'] | ExpoIconProps['source'];
+};
+export { Icon };
+export type { IconProps, MyUiIconProps, ExpoIconProps };

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const Icon_1 = require("./Icon");
+const Icon = ({ source, size = 24, ...props }) => (source && (typeof source === 'string' ?
+    <Icon_1.Icon source={source} size={size} {...props}/> :
+    <jetpack_compose_1.Icon source={source} size={size} {...props}/>));
+exports.Icon = Icon;
+Icon.displayName = 'Icon';

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

@@ -0,0 +1,3 @@
+import type Props from './types';
+declare const IconSection: ({ title, subtitle, gradientProps, buttonProps }: Props) => import("react").JSX.Element;
+export default IconSection;

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

@@ -0,0 +1,35 @@
+"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 jetpack_compose_2 = require("src/jetpack-compose");
+const utils_1 = require("./utils");
+const IconSection = ({ title, subtitle, gradientProps, buttonProps }) => {
+    const spacing = gradientProps?.type === 'extraLarge' ? 10 : 20;
+    return (<jetpack_compose_2.Section>
+            <jetpack_compose_1.Column horizontalAlignment='center' modifiers={[(0, modifiers_1.fillMaxWidth)()]} verticalArrangement={{ spacedBy: spacing }}>
+                {gradientProps && <jetpack_compose_2.Gradient {...gradientProps}/>}
+
+                {(title || subtitle) && (<jetpack_compose_1.Column horizontalAlignment='center' verticalArrangement={{ spacedBy: 2 }}>
+                        {title && (<jetpack_compose_2.TextSlot slotName="icontitle">
+                                <jetpack_compose_2.Text>{title}</jetpack_compose_2.Text>
+                            </jetpack_compose_2.TextSlot>)}
+                        {subtitle && (<jetpack_compose_2.TextSlot slotName="iconsubtitle">
+                                <jetpack_compose_2.Text>{subtitle}</jetpack_compose_2.Text>
+                            </jetpack_compose_2.TextSlot>)}
+                    </jetpack_compose_1.Column>)}
+                {buttonProps && (<jetpack_compose_1.Box contentAlignment='center' modifiers={[
+                ...(0, utils_1.getItemClip)(0, 0),
+                (0, modifiers_1.height)(jetpack_compose_2.Tokens.ListTokens.ItemOneLineContainerHeight),
+                (0, modifiers_1.background)(jetpack_compose_2.Color.secondarySystemFill),
+                (0, modifiers_1.clickable)(() => buttonProps.onPress?.()),
+                (0, modifiers_1.padding)(jetpack_compose_2.Tokens.ListTokens.DividerLeadingSpace * 2, 0, jetpack_compose_2.Tokens.ListTokens.DividerTrailingSpace * 2, 0)
+            ]}>
+                        <jetpack_compose_2.TextSlot slotName="iconbutton">
+                            <jetpack_compose_2.Text>{buttonProps.label}</jetpack_compose_2.Text>
+                        </jetpack_compose_2.TextSlot>
+                    </jetpack_compose_1.Box>)}
+            </jetpack_compose_1.Column>
+        </jetpack_compose_2.Section>);
+};
+exports.default = IconSection;

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

@@ -0,0 +1,2 @@
+export { default as IconSection } from './IconSection';
+export type { default as IconSectionProps } from './types';