@umituz/react-native-design-system 1.5.33 → 1.5.35

package/src/presentation/atoms/picker/styles/pickerStyles.js

@@ -1,176 +0,0 @@
-import { IOS_HIG, getMinTouchTarget } from '../../../utils/platformConstants';
-/**
- * Picker container styles with iOS HIG compliance
- *
- * All picker sizes meet Apple's minimum touch target requirement of 44pt.
- * @see https://developer.apple.com/design/human-interface-guidelines/layout
- */
-export const getPickerContainerStyles = (tokens) => ({
-    base: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderWidth: tokens.borders.width.thin,
-        borderColor: tokens.colors.border,
-        backgroundColor: tokens.colors.surface,
-    },
-    size: {
-        // ✅ iOS HIG Compliant: All sizes >= 44pt minimum touch target
-        sm: {
-            height: IOS_HIG.MIN_TOUCH_TARGET, // 44pt - iOS minimum
-            paddingHorizontal: tokens.spacing.sm,
-            borderRadius: tokens.borders.radius.sm,
-        },
-        md: {
-            height: getMinTouchTarget('input'), // 48pt - Recommended
-            paddingHorizontal: tokens.spacing.md,
-            borderRadius: tokens.borders.radius.md,
-        },
-        lg: {
-            height: 56, // 56pt - Large touch target
-            paddingHorizontal: tokens.spacing.lg,
-            borderRadius: tokens.borders.radius.md,
-        },
-    },
-    state: {
-        error: {
-            borderColor: tokens.colors.error,
-            borderWidth: tokens.borders.width.medium,
-        },
-        disabled: {
-            backgroundColor: tokens.colors.surfaceDisabled,
-            opacity: 0.6,
-        },
-    },
-});
-export const getPickerLabelStyles = (tokens) => ({
-    base: {
-        marginBottom: tokens.spacing.xs,
-        color: tokens.colors.textPrimary,
-        fontWeight: '600',
-    },
-    size: {
-        sm: tokens.typography.bodySmall,
-        md: tokens.typography.bodyMedium,
-        lg: tokens.typography.bodyLarge,
-    },
-});
-export const getPickerPlaceholderStyles = (tokens) => ({
-    base: {
-        color: tokens.colors.textSecondary,
-    },
-    size: {
-        sm: tokens.typography.bodySmall,
-        md: tokens.typography.bodyMedium,
-        lg: tokens.typography.bodyLarge,
-    },
-});
-export const getPickerValueStyles = (tokens) => ({
-    base: {
-        flex: 1,
-        color: tokens.colors.textPrimary,
-    },
-    size: {
-        sm: tokens.typography.bodySmall,
-        md: tokens.typography.bodyMedium,
-        lg: tokens.typography.bodyLarge,
-    },
-});
-export const getPickerErrorStyles = (tokens) => ({
-    marginTop: tokens.spacing.xs,
-    color: tokens.colors.error,
-    ...tokens.typography.bodySmall,
-});
-export const getModalOverlayStyles = (tokens) => ({
-    flex: 1,
-    backgroundColor: tokens.colors.overlayMedium,
-    justifyContent: 'flex-end',
-});
-export const getModalContainerStyles = (tokens, maxHeight) => ({
-    backgroundColor: tokens.colors.backgroundPrimary,
-    borderTopLeftRadius: tokens.borders.radius.lg,
-    borderTopRightRadius: tokens.borders.radius.lg,
-    maxHeight: maxHeight,
-    paddingBottom: tokens.spacing.lg,
-});
-export const getModalHeaderStyles = (tokens) => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: tokens.spacing.lg,
-    paddingVertical: tokens.spacing.md,
-    borderBottomWidth: tokens.borders.width.thin,
-    borderBottomColor: tokens.colors.border,
-});
-export const getModalTitleStyles = (tokens) => ({
-    ...tokens.typography.titleLarge,
-    color: tokens.colors.textPrimary,
-    fontWeight: '600',
-});
-export const getSearchContainerStyles = (tokens) => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: tokens.colors.surfaceVariant,
-    paddingHorizontal: tokens.spacing.md,
-    paddingVertical: tokens.spacing.sm,
-    marginHorizontal: tokens.spacing.lg,
-    marginTop: tokens.spacing.md,
-    borderRadius: tokens.borders.radius.md,
-});
-export const getSearchInputStyles = (tokens) => ({
-    flex: 1,
-    marginLeft: tokens.spacing.sm,
-    ...tokens.typography.bodyMedium,
-    color: tokens.colors.textPrimary,
-});
-export const getOptionContainerStyles = (tokens, isSelected, isDisabled) => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: tokens.spacing.lg,
-    paddingVertical: tokens.spacing.md,
-    backgroundColor: isSelected ? tokens.colors.primaryContainer : 'transparent',
-    opacity: isDisabled ? 0.5 : 1,
-});
-export const getOptionTextStyles = (tokens, isSelected) => ({
-    flex: 1,
-    marginLeft: tokens.spacing.sm,
-    ...tokens.typography.bodyLarge,
-    color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary,
-    fontWeight: isSelected ? '600' : '400',
-});
-export const getOptionDescriptionStyles = (tokens) => ({
-    ...tokens.typography.bodySmall,
-    color: tokens.colors.textSecondary,
-    marginLeft: tokens.spacing.sm,
-    marginTop: tokens.spacing.xs,
-});
-export const getEmptyStateStyles = (tokens) => ({
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: tokens.spacing.xxl,
-});
-export const getEmptyStateTextStyles = (tokens) => ({
-    ...tokens.typography.bodyLarge,
-    color: tokens.colors.textSecondary,
-    textAlign: 'center',
-    marginTop: tokens.spacing.md,
-});
-export const getChipContainerStyles = (tokens) => ({
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: tokens.spacing.xs,
-    marginTop: tokens.spacing.xs,
-});
-export const getChipStyles = (tokens) => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: tokens.colors.primaryContainer,
-    paddingHorizontal: tokens.spacing.sm,
-    paddingVertical: tokens.spacing.xs,
-    borderRadius: tokens.borders.radius.sm,
-});
-export const getChipTextStyles = (tokens) => ({
-    ...tokens.typography.bodySmall,
-    color: tokens.colors.primary,
-    marginRight: tokens.spacing.xs,
-});

package/src/presentation/atoms/picker/types/index.js

@@ -1 +0,0 @@
-export {};

package/src/presentation/atoms/touchable/styles/touchableStyles.js

@@ -1,53 +0,0 @@
-/**
- * Get opacity value based on feedback strength
- */
-export const getOpacityValue = (strength) => {
-    switch (strength) {
-        case 'subtle':
-            return 0.8;
-        case 'normal':
-            return 0.6;
-        case 'strong':
-            return 0.4;
-        default:
-            return 0.6;
-    }
-};
-/**
- * Get base touchable container style
- * Ensures minimum touch target size (iOS HIG: 48x48)
- */
-export const getTouchableContainerStyle = () => ({
-    minWidth: 48,
-    minHeight: 48,
-    justifyContent: 'center',
-    alignItems: 'center',
-});
-/**
- * Get disabled touchable style
- */
-export const getDisabledStyle = () => ({
-    opacity: 0.5,
-});
-/**
- * Convert number to HitSlop object
- * If hitSlop is a number, apply it to all sides
- */
-export const normalizeHitSlop = (hitSlop) => {
-    if (hitSlop === undefined)
-        return undefined;
-    if (typeof hitSlop === 'number') {
-        return {
-            top: hitSlop,
-            bottom: hitSlop,
-            left: hitSlop,
-            right: hitSlop,
-        };
-    }
-    return {
-        top: hitSlop.top || 0,
-        bottom: hitSlop.bottom || 0,
-        left: hitSlop.left || 0,
-        right: hitSlop.right || 0,
-    };
-};

package/src/presentation/atoms/touchable/types/index.js

@@ -1 +0,0 @@
-export {};

package/src/presentation/hooks/useResponsive.js

@@ -1,81 +0,0 @@
-/**
- * useResponsive Hook
- *
- * React Hook for accessing responsive utilities with real-time dimension updates
- * and safe area insets integration.
- *
- * Usage:
- * ```tsx
- * const { logoSize, inputHeight, fabPosition, isSmallDevice } = useResponsive();
- * ```
- */
-import { useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isSmallPhone, isTablet, isLandscape, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, getOnboardingIconSize, getFormBottomPadding, getInputIconSize, getFormContentWidth, getFormElementSpacing, } from '../utils/responsive';
-/**
- * Hook for responsive design utilities
- * Automatically updates when screen dimensions or orientation changes
- */
-export const useResponsive = () => {
-    const { width, height } = useWindowDimensions();
-    const insets = useSafeAreaInsets();
-    return {
-        // Device info
-        width,
-        height,
-        isSmallDevice: isSmallPhone(),
-        isTabletDevice: isTablet(),
-        isLandscapeMode: isLandscape(),
-        deviceType: getDeviceType(),
-        // Safe area insets
-        insets,
-        // Responsive sizes (with default values)
-        logoSize: getResponsiveLogoSize(),
-        inputHeight: getResponsiveInputHeight(),
-        iconContainerSize: getResponsiveIconContainerSize(),
-        maxContentWidth: getResponsiveMaxWidth(),
-        minTouchTarget: getMinTouchTargetSize(),
-        // Responsive positioning
-        horizontalPadding: getResponsiveHorizontalPadding(16, insets),
-        bottomPosition: getResponsiveBottomPosition(32, insets),
-        fabPosition: getResponsiveFABPosition(insets),
-        // Responsive layout
-        modalMaxHeight: getResponsiveModalMaxHeight(),
-        modalMinHeight: getResponsiveMinModalHeight(),
-        gridColumns: getResponsiveGridColumns(),
-        spacingMultiplier: getSpacingMultiplier(),
-        // Onboarding-specific spacing (pre-calculated, no component calculations)
-        onboardingIconMarginTop: getOnboardingIconMarginTop(),
-        onboardingIconMarginBottom: getOnboardingIconMarginBottom(),
-        onboardingIconSize: getOnboardingIconSize(),
-        onboardingTitleMarginBottom: getOnboardingTitleMarginBottom(),
-        onboardingTextPadding: getOnboardingTextPadding(),
-        onboardingDescriptionMarginTop: getOnboardingDescriptionMarginTop(),
-        // Form-specific spacing (pre-calculated, universal)
-        formBottomPadding: getFormBottomPadding(insets.bottom),
-        inputIconSize: getInputIconSize(),
-        formContentWidth: getFormContentWidth(),
-        formElementSpacing: getFormElementSpacing(),
-        // Utility functions (allow custom base values)
-        getLogoSize: (baseSize) => getResponsiveLogoSize(baseSize),
-        getInputHeight: (baseHeight) => getResponsiveInputHeight(baseHeight),
-        getIconSize: (baseSize) => getResponsiveIconContainerSize(baseSize),
-        getMaxWidth: (baseWidth) => getResponsiveMaxWidth(baseWidth),
-        getFontSize: (baseFontSize) => getResponsiveFontSize(baseFontSize),
-        getGridCols: (mobile, tablet) => getResponsiveGridColumns(mobile, tablet),
-    };
-};
-/**
- * Shorthand hook for just responsive sizes
- */
-export const useResponsiveSizes = () => {
-    const { logoSize, inputHeight, iconContainerSize, maxContentWidth } = useResponsive();
-    return { logoSize, inputHeight, iconContainerSize, maxContentWidth };
-};
-/**
- * Shorthand hook for just device type checks
- */
-export const useDeviceType = () => {
-    const { isSmallDevice, isTabletDevice, deviceType } = useResponsive();
-    return { isSmallDevice, isTabletDevice, deviceType };
-};

package/src/presentation/molecules/AtomicConfirmationModal.js

@@ -1,153 +0,0 @@
-/**
- * AtomicConfirmationModal - Universal Confirmation Dialog
- *
- * A reusable confirmation modal for destructive and important actions.
- * Follows Material Design 3 dialog patterns and accessibility guidelines.
- *
- * Features:
- * - Multiple variants (default, destructive, warning, success)
- * - Configurable text and icons
- * - Backdrop dismissal
- * - Full keyboard and screen reader support
- * - Theme-aware styling
- *
- * @example
- * ```tsx
- * // Destructive confirmation (delete)
- * <AtomicConfirmationModal
- *   visible={showDeleteModal}
- *   variant="destructive"
- *   title="Delete Item?"
- *   message="This action cannot be undone. All data will be permanently deleted."
- *   confirmText="Delete"
- *   cancelText="Cancel"
- *   onConfirm={handleDelete}
- *   onCancel={() => setShowDeleteModal(false)}
- * />
- *
- * // Generic confirmation
- * <AtomicConfirmationModal
- *   visible={showConfirmModal}
- *   variant="default"
- *   title="Confirm Action"
- *   message="Are you sure you want to proceed?"
- *   onConfirm={handleConfirm}
- *   onCancel={() => setShowConfirmModal(false)}
- * />
- * ```
- */
-import React from 'react';
-import { View, Modal, TouchableOpacity } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicText } from '../atoms/AtomicText';
-import { AtomicButton } from '../atoms/AtomicButton';
-import { AtomicIcon } from '../atoms/AtomicIcon';
-import { getVariantConfig, getModalOverlayStyle, getBackdropStyle, getModalContainerStyle, getIconContainerStyle, getTitleContainerStyle, getMessageContainerStyle, getButtonContainerStyle, getButtonStyle, } from './confirmation-modal/styles/confirmationModalStyles';
-export const AtomicConfirmationModal = ({ visible, title, message, variant = 'default', confirmText, cancelText, icon, onConfirm, onCancel, showBackdrop = true, backdropDismissible = true, style, testID = 'atomic-confirmation-modal', }) => {
-    const tokens = useAppDesignTokens();
-    // Get variant-specific configuration (icon and color only)
-    const variantConfig = getVariantConfig(variant, tokens);
-    // Determine final icon
-    const finalIcon = icon || variantConfig.icon;
-    // Handle backdrop press
-    const handleBackdropPress = () => {
-        if (backdropDismissible) {
-            onCancel();
-        }
-    };
-    return (<Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel} statusBarTranslucent testID={testID}>
-      <View style={getModalOverlayStyle(tokens)}>
-        {/* Backdrop - Tap to dismiss if enabled */}
-        {showBackdrop && (<TouchableOpacity style={getBackdropStyle()} activeOpacity={1} onPress={handleBackdropPress} testID={`${testID}-backdrop`}/>)}
-
-        {/* Modal Container */}
-        <View style={[getModalContainerStyle(tokens), style]}>
-          {/* Icon */}
-          <View style={getIconContainerStyle(tokens)}>
-            <AtomicIcon name={finalIcon} size="xl" color={variantConfig.iconColor} testID={`${testID}-icon`}/>
-          </View>
-
-          {/* Title */}
-          <View style={getTitleContainerStyle(tokens)}>
-            <AtomicText type="titleLarge" style={{
-            color: tokens.colors.textPrimary,
-            textAlign: 'center',
-            fontWeight: tokens.typography.bold,
-        }} testID={`${testID}-title`}>
-              {title}
-            </AtomicText>
-          </View>
-
-          {/* Message */}
-          <View style={getMessageContainerStyle(tokens)}>
-            <AtomicText type="bodyMedium" style={{
-            color: tokens.colors.textSecondary,
-            textAlign: 'center',
-            lineHeight: tokens.typography.bodyMedium.lineHeight,
-        }} testID={`${testID}-message`}>
-              {message}
-            </AtomicText>
-          </View>
-
-          {/* Action Buttons */}
-          <View style={getButtonContainerStyle(tokens)}>
-            {/* Cancel Button */}
-            <AtomicButton variant="outline" size="md" onPress={onCancel} style={getButtonStyle()} testID={`${testID}-cancel-button`}>
-              {cancelText}
-            </AtomicButton>
-
-            {/* Confirm Button */}
-            <AtomicButton variant={variant === 'destructive' ? 'primary' : 'primary'} size="md" onPress={onConfirm} style={[
-            getButtonStyle(),
-            ...(variant === 'destructive' ? [{ backgroundColor: tokens.colors.error }] : []),
-            ...(variant === 'warning' ? [{ backgroundColor: tokens.colors.warning }] : []),
-            ...(variant === 'success' ? [{ backgroundColor: tokens.colors.success }] : []),
-        ]} testID={`${testID}-confirm-button`}>
-              {confirmText}
-            </AtomicButton>
-          </View>
-        </View>
-      </View>
-    </Modal>);
-};
-/**
- * Hook for managing confirmation modal state
- *
- * @example
- * ```tsx
- * const { showConfirmation, confirmationProps } = useConfirmationModal({
- *   title: 'Delete Item?',
- *   message: 'This cannot be undone',
- *   variant: 'destructive',
- *   onConfirm: handleDelete,
- * });
- *
- * // In JSX
- * <AtomicConfirmationModal {...confirmationProps} />
- * <Button onPress={showConfirmation}>Delete</Button>
- * ```
- */
-export const useConfirmationModal = (config) => {
-    const [visible, setVisible] = React.useState(false);
-    const showConfirmation = () => setVisible(true);
-    const hideConfirmation = () => setVisible(false);
-    const handleConfirm = () => {
-        config.onConfirm();
-        hideConfirmation();
-    };
-    const confirmationProps = {
-        visible,
-        title: config.title,
-        message: config.message,
-        variant: config.variant || 'default',
-        confirmText: config.confirmText,
-        cancelText: config.cancelText,
-        onConfirm: handleConfirm,
-        onCancel: hideConfirmation,
-    };
-    return {
-        showConfirmation,
-        hideConfirmation,
-        confirmationProps,
-    };
-};

package/src/presentation/molecules/EmptyState.js

@@ -1,67 +0,0 @@
-/**
- * EmptyState Molecule - Universal Empty State Display
- *
- * Displays icon, title, and subtitle for empty data scenarios
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: MOLECULE
- * Composition: Icon + AtomicText + Layout
- *
- * Usage:
- * - Empty lists
- * - Empty grids
- * - No search results
- * - No data states
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText, AtomicIcon } from '../atoms';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const EmptyState = ({ icon, iconSize = 'xl', title, subtitle, iconColor, titleColor, subtitleColor, style, titleStyle, subtitleStyle, }) => {
-    const tokens = useAppDesignTokens();
-    const styles = getStyles(tokens);
-    return (<View style={[styles.container, style]}>
-      <AtomicIcon name={icon} size={iconSize} customColor={iconColor || tokens.colors.textSecondary}/>
-      <AtomicText type="headlineMedium" color={titleColor || tokens.colors.textPrimary} style={StyleSheet.flatten([
-            styles.title,
-            titleStyle,
-        ])}>
-        {title}
-      </AtomicText>
-      {subtitle && (<AtomicText type="bodyMedium" color={subtitleColor || tokens.colors.textSecondary} style={StyleSheet.flatten([
-                styles.subtitle,
-                subtitleStyle,
-            ])}>
-          {subtitle}
-        </AtomicText>)}
-    </View>);
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (tokens) => StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: tokens.spacing.xl,
-        paddingHorizontal: tokens.spacing.lg,
-    },
-    title: {
-        fontSize: tokens.typography.headingMedium.fontSize,
-        fontWeight: tokens.typography.headingMedium.fontWeight,
-        marginTop: tokens.spacing.md,
-        textAlign: 'center',
-    },
-    subtitle: {
-        fontSize: tokens.typography.bodySmall.fontSize,
-        marginTop: tokens.spacing.xs,
-        textAlign: 'center',
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================

package/src/presentation/molecules/FormField.js

@@ -1,75 +0,0 @@
-/**
- * FormField Molecule - Complete Form Input with Label and Error
- *
- * Combines AtomicText (label/error) + AtomicInput (field)
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: MOLECULE
- * Composition: AtomicText + AtomicInput
- */
-import React from 'react';
-import { View } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicText } from '../atoms/AtomicText';
-import { AtomicInput } from '../atoms/AtomicInput';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const FormField = ({ label, error, helperText, required = false, containerStyle, style, // Accept both style and containerStyle
-...inputProps }) => {
-    const tokens = useAppDesignTokens();
-    const inputState = error ? 'error' : 'default';
-    const styles = getStyles(tokens);
-    return (<View style={[styles.container, containerStyle || style]}>
-      {/* Label */}
-      {label && (<View style={styles.labelContainer}>
-          <AtomicText type="labelMedium" color="primary" style={styles.label}>
-            {label}
-          </AtomicText>
-          {required && (<AtomicText type="labelMedium" color="error">
-              {' *'}
-            </AtomicText>)}
-        </View>)}
-
-      {/* Input Field */}
-      <AtomicInput {...inputProps} label={label || ''} state={inputState}/>
-
-      {/* Error Message */}
-      {error && (<AtomicText type="bodySmall" color="error" style={styles.errorText}>
-          {error}
-        </AtomicText>)}
-
-      {/* Helper Text */}
-      {!error && helperText && (<AtomicText type="bodySmall" color="secondary" style={styles.helperText}>
-          {helperText}
-        </AtomicText>)}
-    </View>);
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (tokens) => ({
-    container: {
-        marginBottom: tokens.spacing.md,
-    },
-    labelContainer: {
-        flexDirection: 'row',
-        marginBottom: tokens.spacing.sm,
-    },
-    label: {
-        fontWeight: tokens.typography.labelMedium.fontWeight,
-        color: tokens.colors.textPrimary,
-    },
-    inputError: {
-        borderColor: tokens.colors.error,
-    },
-    errorText: {
-        marginTop: tokens.spacing.xs,
-    },
-    helperText: {
-        marginTop: tokens.spacing.xs,
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================

package/src/presentation/molecules/GridContainer.js

@@ -1,76 +0,0 @@
-/**
- * GridContainer Molecule - Responsive Grid Layout
- *
- * Provides flexible grid layout with configurable columns and gap
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: MOLECULE
- * Composition: View + Responsive Layout
- *
- * Usage:
- * - Stats grids (2 columns)
- * - Action grids (2 columns)
- * - Product grids (2-3 columns)
- * - Gallery grids (3-4 columns)
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-const GridContainerComponent = ({ columns = 2, gap = 8, style, children, }) => {
-    const styles = getStyles(gap);
-    return (<View style={[styles.container, style]}>
-      {React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                const childStyle = child.props.style;
-                const itemStyle = getItemStyle(columns, gap);
-                return React.cloneElement(child, {
-                    style: StyleSheet.flatten([itemStyle, childStyle]),
-                });
-            }
-            return child;
-        })}
-    </View>);
-};
-// =============================================================================
-// GRID ITEM COMPONENT
-// =============================================================================
-export const GridItem = ({ children, style }) => {
-    return <View style={style}>{children}</View>;
-};
-// Export GridContainer with Item property
-export const GridContainer = GridContainerComponent;
-// Attach GridItem to GridContainer for convenient usage
-GridContainer.Item = GridItem;
-// =============================================================================
-// HELPERS
-// =============================================================================
-const getItemStyle = (columns, gap) => {
-    // Calculate width: (100% - total gap space) / columns
-    // For 2 columns with 8px gap: (100% - 8px) / 2 = ~48%
-    // For 3 columns with 8px gap: (100% - 16px) / 3 = ~31.33%
-    const widthMap = {
-        2: '48%',
-        3: '31.33%',
-        4: '23%',
-    };
-    return {
-        width: widthMap[columns] || '48%',
-        marginHorizontal: gap / 2,
-        marginBottom: gap * 1.5,
-    };
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (gap) => StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        marginHorizontal: -(gap / 2),
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================