@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/GroupedItem.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const vector_icons_2 = require("@expo/vector-icons");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const colorUtils_1 = require("../utils/colorUtils");
+const themeUtils_1 = require("../utils/themeUtils");
+const theme_1 = require("../constants/theme");
+const GroupedItemComponent = ({ icon, iconColor, title, subtitle, onPress, isFirst = false, isLast = false, showChevron = false, disabled = false, customContent, customIcon, accessibilityLabel, accessibilityHint, }) => {
+    const hookColorScheme = (0, useColorScheme_1.useColorScheme)();
+    const colorScheme = (0, themeUtils_1.normalizeColorScheme)(hookColorScheme);
+    // GroupedItem is a leaf component without a theme prop, so it should directly use Colors
+    // instead of useThemeStyles which expects a theme prop from screen components
+    const colors = theme_1.Colors[colorScheme];
+    // Use fallback color when iconColor is not provided
+    const finalIconColor = iconColor || colors.iconSecurity;
+    const itemStyles = (0, react_1.useMemo)(() => [
+        styles.groupedItem,
+        isFirst && styles.firstGroupedItem,
+        isLast && styles.lastGroupedItem,
+        {
+            backgroundColor: colors.card,
+        },
+    ], [colors.card, isFirst, isLast]);
+    const content = ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.groupedItemContent, children: [customIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.actionIcon, children: customIcon })) : icon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.iconContainer, { backgroundColor: finalIconColor }], children: (0, jsx_runtime_1.jsx)(vector_icons_2.MaterialCommunityIcons, { name: icon, size: 22, color: (0, colorUtils_1.darkenColor)(finalIconColor) }) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionTextContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionButtonText, { color: colors.text }], children: title }), subtitle && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionButtonSubtext, { color: colors.secondaryText }], children: subtitle }))] }), customContent, showChevron && ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "chevron-forward", size: 20, color: colors.icon }))] }));
+    if (onPress && !disabled) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: itemStyles, onPress: onPress, activeOpacity: 0.7, accessibilityRole: "button", accessibilityLabel: accessibilityLabel || title, accessibilityHint: accessibilityHint || subtitle, accessibilityState: { disabled }, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: itemStyles, accessibilityRole: "text", accessibilityLabel: accessibilityLabel || title, children: content }));
+};
+GroupedItemComponent.displayName = 'GroupedItem';
+exports.GroupedItem = (0, react_1.memo)(GroupedItemComponent);
+const styles = react_native_1.StyleSheet.create({
+    groupedItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        overflow: 'hidden',
+        width: '100%',
+    },
+    firstGroupedItem: {
+        borderTopLeftRadius: 18,
+        borderTopRightRadius: 18,
+    },
+    lastGroupedItem: {
+        borderBottomLeftRadius: 18,
+        borderBottomRightRadius: 18,
+    },
+    groupedItemContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8,
+        paddingHorizontal: 10,
+        width: '100%',
+        gap: 10,
+    },
+    actionIcon: {
+    // marginRight handled by gap
+    },
+    iconContainer: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+        // marginRight handled by gap
+    },
+    actionTextContainer: {
+        flex: 1,
+    },
+    actionButtonText: {
+        fontSize: 14,
+        fontWeight: '400',
+    },
+    actionButtonSubtext: {
+        fontSize: 12,
+        marginTop: 2,
+    },
+});
+exports.default = exports.GroupedItem;

package/src/ui/components/GroupedSection.d.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+interface GroupedSectionItem {
+    id: string;
+    icon?: string;
+    iconColor?: string;
+    title: string;
+    subtitle?: string;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    showChevron?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    customContent?: React.ReactNode;
+    customIcon?: React.ReactNode;
+    multiRow?: boolean;
+    dense?: boolean;
+    customContentBelow?: React.ReactNode;
+    theme?: string;
+    /** Allow additional properties for extensibility */
+    [key: string]: unknown;
+}
+interface GroupedSectionProps {
+    items: GroupedSectionItem[];
+}
+export declare const GroupedSection: React.MemoExoticComponent<{
+    ({ items }: GroupedSectionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default GroupedSection;

package/src/ui/components/GroupedSection.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const GroupedItem_1 = require("./GroupedItem");
+const GroupedSectionComponent = ({ items }) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: '100%' }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { marginBottom: index < items.length - 1 ? 4 : 0 }, children: (0, jsx_runtime_1.jsx)(GroupedItem_1.GroupedItem, { icon: item.icon, iconColor: item.iconColor, title: item.title, subtitle: item.subtitle, onPress: item.onPress, isFirst: index === 0, isLast: index === items.length - 1, showChevron: item.showChevron, disabled: item.disabled, customContent: item.customContent, customIcon: item.customIcon }) }, `${item.id}-${index}`))) }));
+};
+GroupedSectionComponent.displayName = 'GroupedSection';
+exports.GroupedSection = (0, react_1.memo)(GroupedSectionComponent);
+exports.default = exports.GroupedSection;

package/src/ui/components/Header.d.ts

@@ -0,0 +1,37 @@
+import type React from 'react';
+import { type SharedValue } from 'react-native-reanimated';
+export declare const getHeaderHeight: (variant?: HeaderProps["variant"], safeAreaTop?: number) => number;
+export interface HeaderProps {
+    title: string;
+    subtitle?: string;
+    onBack?: () => void;
+    onClose?: () => void;
+    rightAction?: {
+        icon?: string;
+        onPress: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+        text?: string;
+        key?: string;
+    };
+    rightActions?: Array<{
+        icon?: string;
+        onPress: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+        text?: string;
+        key?: string;
+    }>;
+    theme?: 'light' | 'dark';
+    showBackButton?: boolean;
+    showCloseButton?: boolean;
+    showThemeToggle?: boolean;
+    onThemeToggle?: () => void;
+    variant?: 'default' | 'large' | 'minimal' | 'gradient';
+    elevation?: 'none' | 'subtle' | 'prominent';
+    subtitleVariant?: 'default' | 'small' | 'large' | 'muted';
+    titleAlignment?: 'left' | 'center' | 'right';
+    scrollY?: SharedValue<number>;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/src/ui/components/Header.js

@@ -0,0 +1,400 @@
+"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 });
+exports.getHeaderHeight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const vector_icons_1 = require("@expo/vector-icons");
+const OxyIcon_1 = __importDefault(require("./icon/OxyIcon"));
+const fonts_1 = require("../styles/fonts");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const themeUtils_1 = require("../utils/themeUtils");
+const theme_1 = require("../constants/theme");
+// Calculate header height based on platform and variant
+const getHeaderHeight = (variant = 'default', safeAreaTop = 0) => {
+    const paddingTop = react_native_1.Platform.OS === 'ios' ? Math.max(safeAreaTop, 50) : 16;
+    const paddingBottom = 12;
+    const contentHeight = variant === 'minimal' ? 36 : 40;
+    return paddingTop + contentHeight + paddingBottom;
+};
+exports.getHeaderHeight = getHeaderHeight;
+const Header = ({ title, subtitle, onBack, onClose, rightAction, rightActions, theme, showBackButton = true, showCloseButton = false, showThemeToggle = false, onThemeToggle, variant = 'default', elevation = 'subtle', subtitleVariant = 'default', titleAlignment = 'left', scrollY, }) => {
+    // Use theme colors directly from Colors constant (like Accounts sidebar)
+    // Ensure colorScheme is always 'light' or 'dark' with proper fallback chain
+    const colorScheme = (0, themeUtils_1.normalizeColorScheme)((0, useColorScheme_1.useColorScheme)(), theme);
+    const colors = theme_1.Colors[colorScheme];
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const headerHeight = (0, exports.getHeaderHeight)(variant, insets.top);
+    // Animated style for sticky behavior on native
+    // Only create animated style if scrollY is provided and we're on native platform
+    const animatedHeaderStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        if (react_native_1.Platform.OS === 'web' || !scrollY) {
+            return {};
+        }
+        // Sticky behavior: header scrolls with content initially, then sticks at top
+        // When scrollY = 0, translateY = 0 (header at normal position)
+        // When scrollY > 0, translateY becomes negative to keep header at top
+        // Clamp to prevent header from going above viewport
+        const translateY = (0, react_native_reanimated_1.interpolate)(scrollY.value, [0, headerHeight], [0, -headerHeight], react_native_reanimated_1.Extrapolation.CLAMP);
+        return {
+            transform: [{ translateY }],
+        };
+    }, [scrollY, headerHeight]);
+    const handleBackPress = () => {
+        if (!onBack)
+            return;
+        // Navigate immediately and synchronously - this prioritizes navigation
+        // over keyboard dismiss. The keyboard will close naturally after screen changes.
+        onBack();
+    };
+    const renderBackButton = () => {
+        if (!showBackButton || !onBack)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                styles.backButton,
+                { backgroundColor: colors.card }
+            ], onPress: handleBackPress, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(OxyIcon_1.default, { name: "chevron-back", size: 18, color: colors.tint }) }));
+    };
+    const renderCloseButton = () => {
+        if (!showCloseButton || !onClose)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                styles.closeButton,
+                { backgroundColor: colors.card }
+            ], onPress: onClose, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close", size: 18, color: colors.text }) }));
+    };
+    const renderRightActionButton = (action, idx) => {
+        const isTextAction = action.text;
+        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                styles.rightActionButton,
+                isTextAction ? styles.textActionButton : styles.iconActionButton,
+                {
+                    backgroundColor: isTextAction ? colors.tint : colors.card,
+                    opacity: action.disabled ? 0.5 : 1
+                }
+            ], onPress: action.onPress, disabled: action.disabled || action.loading, activeOpacity: 0.7, children: action.loading ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loadingContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.tint }] })] })) : isTextAction ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionText, { color: '#FFFFFF' }], children: action.text })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: action.icon, size: 18, color: colors.tint })) }, action.key || idx));
+    };
+    const renderRightActions = () => {
+        const actions = [];
+        // Add existing right actions
+        if (rightActions?.length) {
+            actions.push(...rightActions);
+        }
+        else if (rightAction) {
+            actions.push(rightAction);
+        }
+        // Add theme toggle button if enabled
+        if (showThemeToggle && onThemeToggle) {
+            actions.push({
+                icon: colorScheme === 'dark' ? 'sunny' : 'moon',
+                onPress: onThemeToggle,
+                key: 'theme-toggle',
+            });
+        }
+        if (actions.length === 0)
+            return null;
+        if (actions.length > 1) {
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.rightActionsRow, children: actions.map((a, i) => renderRightActionButton(a, i)) }));
+        }
+        return renderRightActionButton(actions[0], 0);
+    };
+    const renderTitle = () => {
+        const titleStyle = variant === 'large' ? styles.titleLarge :
+            variant === 'minimal' ? styles.titleMinimal :
+                styles.titleDefault;
+        const subtitleStyle = variant === 'large' ? styles.subtitleLarge :
+            variant === 'minimal' ? styles.subtitleMinimal :
+                subtitleVariant === 'small' ? styles.subtitleSmall :
+                    subtitleVariant === 'large' ? styles.subtitleLarge :
+                        subtitleVariant === 'muted' ? styles.subtitleMuted :
+                            styles.subtitleDefault;
+        const getTitleAlignment = () => {
+            switch (titleAlignment) {
+                case 'center':
+                    return styles.titleContainerCenter;
+                case 'right':
+                    return styles.titleContainerRight;
+                default:
+                    return styles.titleContainerLeft;
+            }
+        };
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                styles.titleContainer,
+                getTitleAlignment(),
+                variant === 'minimal' && styles.titleContainerMinimal
+            ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [titleStyle, { color: colors.text }], children: title }), subtitle && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [subtitleStyle, { color: colors.secondaryText }], children: subtitle }))] }));
+    };
+    const getElevationStyle = () => {
+        const isDark = colorScheme === 'dark';
+        switch (elevation) {
+            case 'none':
+                return {};
+            case 'subtle':
+                return react_native_1.Platform.select({
+                    web: {
+                        boxShadow: isDark
+                            ? '0 1px 3px rgba(0,0,0,0.3)'
+                            : '0 1px 3px rgba(0,0,0,0.1)',
+                    },
+                    default: {
+                        shadowColor: '#000000',
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: isDark ? 0.3 : 0.1,
+                        shadowRadius: 3,
+                        elevation: 2,
+                    },
+                });
+            case 'prominent':
+                return react_native_1.Platform.select({
+                    web: {
+                        boxShadow: isDark
+                            ? '0 4px 12px rgba(0,0,0,0.4)'
+                            : '0 4px 12px rgba(0,0,0,0.15)',
+                    },
+                    default: {
+                        shadowColor: '#000000',
+                        shadowOffset: { width: 0, height: 4 },
+                        shadowOpacity: isDark ? 0.4 : 0.15,
+                        shadowRadius: 12,
+                        elevation: 8,
+                    },
+                });
+            default:
+                return {};
+        }
+    };
+    const getBackgroundStyle = () => {
+        if (variant === 'gradient') {
+            return {
+                backgroundColor: colors.background,
+                // Add gradient overlay effect
+                borderBottomWidth: 1,
+                borderBottomColor: colors.border,
+            };
+        }
+        return {
+            backgroundColor: colors.background,
+            borderBottomWidth: elevation === 'none' ? 0 : 1,
+            borderBottomColor: colors.border,
+        };
+    };
+    const backgroundStyle = getBackgroundStyle();
+    const elevationStyle = getElevationStyle();
+    const containerStyle = (0, react_1.useMemo)(() => [
+        styles.container,
+        {
+            paddingTop: react_native_1.Platform.OS === 'ios' ? Math.max(insets.top, 50) : 16,
+        },
+        // When header is inside ScrollView (has scrollY), don't use absolute positioning
+        !scrollY && react_native_1.Platform.OS !== 'web' ? {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+        } : {},
+        backgroundStyle,
+        elevationStyle,
+    ], [insets.top, backgroundStyle, elevationStyle, scrollY]);
+    const HeaderContainer = react_native_1.Platform.OS === 'web' || !scrollY ? react_native_1.View : react_native_reanimated_1.default.View;
+    // Only apply animated styles when HeaderContainer is an animated component
+    const shouldUseAnimatedStyle = react_native_1.Platform.OS !== 'web' && scrollY !== undefined;
+    const headerStyle = shouldUseAnimatedStyle
+        ? [containerStyle, animatedHeaderStyle]
+        : containerStyle;
+    return ((0, jsx_runtime_1.jsx)(HeaderContainer, { style: headerStyle, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                styles.content,
+                variant === 'minimal' && styles.contentMinimal
+            ], children: [renderBackButton(), renderTitle(), renderRightActions(), renderCloseButton()] }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        paddingBottom: 12,
+        zIndex: 1000,
+        ...react_native_1.Platform.select({
+            web: {
+                position: 'sticky',
+                top: 0,
+                left: 0,
+                right: 0,
+            },
+            default: {
+            // Position will be set dynamically based on scrollY prop
+            },
+        }),
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        position: 'relative',
+        minHeight: 40,
+    },
+    contentMinimal: {
+        paddingHorizontal: 12,
+        minHeight: 36,
+    },
+    backButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 10,
+    },
+    closeButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: 10,
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'flex-start',
+        justifyContent: 'center',
+    },
+    titleContainerLeft: {
+        alignItems: 'flex-start',
+    },
+    titleContainerCenter: {
+        alignItems: 'center',
+    },
+    titleContainerRight: {
+        alignItems: 'flex-end',
+    },
+    titleContainerMinimal: {
+        alignItems: 'center',
+        marginHorizontal: 16,
+    },
+    titleDefault: {
+        fontSize: 18,
+        fontWeight: '700',
+        fontFamily: fonts_1.fontFamilies.interBold,
+        letterSpacing: -0.5,
+        lineHeight: 22,
+    },
+    titleLarge: {
+        fontSize: 28,
+        fontWeight: '800',
+        fontFamily: fonts_1.fontFamilies.interExtraBold,
+        letterSpacing: -1,
+        lineHeight: 34,
+        marginBottom: 3,
+    },
+    titleMinimal: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+        letterSpacing: -0.3,
+        lineHeight: 20,
+    },
+    subtitleDefault: {
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 17,
+        marginTop: 1,
+    },
+    subtitleLarge: {
+        fontSize: 16,
+        fontWeight: '400',
+        lineHeight: 19,
+        marginTop: 3,
+    },
+    subtitleMinimal: {
+        fontSize: 13,
+        fontWeight: '400',
+        lineHeight: 15,
+        marginTop: 1,
+    },
+    subtitleSmall: {
+        fontSize: 12,
+        fontWeight: '400',
+        lineHeight: 14,
+        marginTop: 0,
+    },
+    subtitleMuted: {
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 17,
+        marginTop: 1,
+        opacity: 0.7,
+    },
+    rightActionButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: 10,
+    },
+    iconActionButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+    },
+    textActionButton: {
+        paddingHorizontal: 14,
+        paddingVertical: 6,
+        borderRadius: 18,
+        minWidth: 56,
+    },
+    actionText: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+        letterSpacing: -0.2,
+    },
+    loadingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+    },
+    loadingDot: {
+        width: 4,
+        height: 4,
+        borderRadius: 2,
+        opacity: 0.6,
+    },
+    rightActionsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+});
+exports.default = Header;

package/src/ui/components/HelperText.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type LayoutChangeEvent, type StyleProp, type TextStyle } from 'react-native';
+export type HelperTextProps = {
+    /**
+     * Type of the helper text.
+     */
+    type?: 'error' | 'info';
+    /**
+     * Text content of the HelperText.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to display the helper text.
+     */
+    visible?: boolean;
+    /**
+     * Whether to apply padding to the helper text.
+     */
+    padding?: 'none' | 'normal';
+    /**
+     * Whether the text input tied with helper text is disabled.
+     */
+    disabled?: boolean;
+    style?: StyleProp<TextStyle>;
+    /**
+     * Theme to use ('light' | 'dark')
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    /**
+     * Callback when layout changes
+     */
+    onLayout?: (event: LayoutChangeEvent) => void;
+    /**
+     * Maximum font size multiplier
+     */
+    maxFontSizeMultiplier?: number;
+};
+/**
+ * Helper text is used in conjunction with input elements to provide additional hints for the user.
+ */
+declare const HelperText: ({ style, type, visible, theme: themeProp, onLayout, padding, disabled, maxFontSizeMultiplier, ...rest }: HelperTextProps) => import("react/jsx-runtime").JSX.Element;
+export default HelperText;