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

package/src/presentation/atoms/AtomicPicker.js

@@ -1,298 +0,0 @@
-/**
- * AtomicPicker Component
- *
- * A reusable option picker/dropdown component for selecting from a list of options.
- *
- * Features:
- * - Single and multi-select support
- * - Modal display mode (full-screen on mobile)
- * - Optional search/filter capability
- * - Error and disabled states
- * - Theme-aware styling
- * - Icons for options
- * - Clearable selection
- * - react-hook-form integration ready
- *
- * Architecture:
- * - Follows AtomicButton pattern with separated types and styles
- * - Uses helper functions from picker/styles/pickerStyles.ts
- * - Types defined in picker/types/index.ts
- * - Zero inline StyleSheet.create()
- *
- * Usage:
- * ```tsx
- * const [partyType, setPartyType] = useState('birthday');
- *
- * <AtomicPicker
- *   value={partyType}
- *   onChange={setPartyType}
- *   options={[
- *     { label: 'Birthday Party', value: 'birthday', icon: 'cake' },
- *     { label: 'Wedding', value: 'wedding', icon: 'heart' },
- *     { label: 'Corporate Event', value: 'corporate', icon: 'briefcase' },
- *   ]}
- *   label="Party Type"
- *   placeholder="Select party type"
- *   searchable
- * />
- * ```
- *
- * @module AtomicPicker
- */
-import React, { useState, useMemo } from 'react';
-import { View, TouchableOpacity, Modal, FlatList, TextInput, useWindowDimensions, StyleSheet, } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicIcon } from './AtomicIcon';
-import { AtomicText } from './AtomicText';
-import { getPickerContainerStyles, getPickerLabelStyles, getPickerPlaceholderStyles, getPickerValueStyles, getPickerErrorStyles, getModalOverlayStyles, getModalContainerStyles, getModalHeaderStyles, getModalTitleStyles, getSearchContainerStyles, getSearchInputStyles, getOptionContainerStyles, getOptionTextStyles, getOptionDescriptionStyles, getEmptyStateStyles, getEmptyStateTextStyles, getChipContainerStyles, getChipStyles, getChipTextStyles, } from './picker/styles/pickerStyles';
-/**
- * AtomicPicker - Universal option picker component
- *
- * Displays a button that opens a modal for selection.
- * Supports single/multi-select, search, and custom rendering.
- */
-export const AtomicPicker = ({ value, onChange, options, label, placeholder = 'Select...', error, disabled = false, multiple = false, searchable = false, clearable = false, autoClose = true, color = 'primary', size = 'md', modalTitle, emptyMessage = 'No options available', style, labelStyle, testID, }) => {
-    const tokens = useAppDesignTokens();
-    const { height } = useWindowDimensions();
-    const insets = useSafeAreaInsets();
-    const [modalVisible, setModalVisible] = useState(false);
-    const [searchQuery, setSearchQuery] = useState('');
-    // Get style helpers with design tokens
-    const containerStyles = getPickerContainerStyles(tokens);
-    const labelStyles = getPickerLabelStyles(tokens);
-    const placeholderStyles = getPickerPlaceholderStyles(tokens);
-    const valueStyles = getPickerValueStyles(tokens);
-    const errorStyles = getPickerErrorStyles(tokens);
-    const modalOverlayStyles = getModalOverlayStyles(tokens);
-    const modalContainerStyles = getModalContainerStyles(tokens, height * 0.85);
-    const modalHeaderStyles = getModalHeaderStyles(tokens);
-    const modalTitleStyles = getModalTitleStyles(tokens);
-    const searchContainerStyles = getSearchContainerStyles(tokens);
-    const searchInputStyles = getSearchInputStyles(tokens);
-    const emptyStateStyles = getEmptyStateStyles(tokens);
-    const emptyStateTextStyles = getEmptyStateTextStyles(tokens);
-    const chipContainerStyles = getChipContainerStyles(tokens);
-    const chipStyles = getChipStyles(tokens);
-    const chipTextStyles = getChipTextStyles(tokens);
-    /**
-     * Normalize value to array for consistent handling
-     */
-    const selectedValues = useMemo(() => {
-        if (multiple) {
-            return Array.isArray(value) ? value : [];
-        }
-        return value ? [value] : [];
-    }, [value, multiple]);
-    /**
-     * Get selected option objects
-     */
-    const selectedOptions = useMemo(() => {
-        return options.filter((opt) => selectedValues.includes(opt.value));
-    }, [options, selectedValues]);
-    /**
-     * Filter options based on search query
-     */
-    const filteredOptions = useMemo(() => {
-        if (!searchQuery.trim())
-            return options;
-        const query = searchQuery.toLowerCase();
-        return options.filter((opt) => opt.label.toLowerCase().includes(query) ||
-            opt.description?.toLowerCase().includes(query));
-    }, [options, searchQuery]);
-    /**
-     * Format display text for selected value(s)
-     */
-    const displayText = useMemo(() => {
-        if (selectedOptions.length === 0) {
-            return placeholder;
-        }
-        if (multiple) {
-            return selectedOptions.length === 1
-                ? selectedOptions[0].label
-                : `${selectedOptions.length} selected`;
-        }
-        return selectedOptions[0]?.label || placeholder;
-    }, [selectedOptions, placeholder, multiple]);
-    /**
-     * Handle modal open
-     */
-    const openModal = () => {
-        if (disabled)
-            return;
-        setModalVisible(true);
-        setSearchQuery('');
-    };
-    /**
-     * Handle modal close
-     */
-    const closeModal = () => {
-        setModalVisible(false);
-        setSearchQuery('');
-    };
-    /**
-     * Handle option selection
-     */
-    const handleSelect = (optionValue) => {
-        if (multiple) {
-            const newValues = selectedValues.includes(optionValue)
-                ? selectedValues.filter((v) => v !== optionValue)
-                : [...selectedValues, optionValue];
-            onChange(newValues);
-        }
-        else {
-            onChange(optionValue);
-            if (autoClose) {
-                closeModal();
-            }
-        }
-    };
-    /**
-     * Handle clear selection
-     */
-    const handleClear = () => {
-        onChange(multiple ? [] : '');
-    };
-    /**
-     * Handle search query change
-     */
-    const handleSearch = (query) => {
-        setSearchQuery(query);
-    };
-    /**
-     * Check if option is selected
-     */
-    const isSelected = (optionValue) => {
-        return selectedValues.includes(optionValue);
-    };
-    /**
-     * Render single option
-     */
-    const renderOption = ({ item }) => {
-        const selected = isSelected(item.value);
-        const itemDisabled = item.disabled || false;
-        const optionContainerStyle = getOptionContainerStyles(tokens, selected, itemDisabled);
-        const optionTextStyle = getOptionTextStyles(tokens, selected);
-        const optionDescriptionStyle = getOptionDescriptionStyles(tokens);
-        return (<TouchableOpacity onPress={() => !itemDisabled && handleSelect(item.value)} disabled={itemDisabled} testID={item.testID || `${testID}-option-${item.value}`} style={optionContainerStyle}>
-        {/* Option Icon */}
-        {item.icon && (<AtomicIcon name={item.icon} size="md" color={selected ? 'primary' : 'secondary'}/>)}
-
-        {/* Option Content */}
-        <View style={{ flex: 1 }}>
-          <AtomicText style={optionTextStyle}>{item.label}</AtomicText>
-          {item.description && (<AtomicText style={optionDescriptionStyle}>
-              {item.description}
-            </AtomicText>)}
-        </View>
-
-        {/* Selected Indicator */}
-        {selected && (<AtomicIcon name="CircleCheck" size="md" color="primary"/>)}
-      </TouchableOpacity>);
-    };
-    /**
-     * Render selected chips for multi-select
-     */
-    const renderSelectedChips = () => {
-        if (!multiple || selectedOptions.length === 0)
-            return null;
-        return (<View style={chipContainerStyles}>
-        {selectedOptions.map((opt) => (<View key={opt.value} style={chipStyles}>
-            <AtomicText style={chipTextStyles}>{opt.label}</AtomicText>
-            <TouchableOpacity onPress={(e) => {
-                    e.stopPropagation();
-                    handleSelect(opt.value);
-                }} hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }}>
-              <AtomicIcon name="X" size="sm" color="primary"/>
-            </TouchableOpacity>
-          </View>))}
-      </View>);
-    };
-    const pickerContainerStyle = StyleSheet.flatten([
-        containerStyles.base,
-        containerStyles.size[size],
-        error ? containerStyles.state.error : undefined,
-        disabled ? containerStyles.state.disabled : undefined,
-        style,
-    ]);
-    const pickerLabelStyle = StyleSheet.flatten([
-        labelStyles.base,
-        labelStyles.size[size],
-        labelStyle,
-    ]);
-    const pickerValueStyle = StyleSheet.flatten([
-        selectedOptions.length > 0 ? valueStyles.base : placeholderStyles.base,
-        selectedOptions.length > 0
-            ? valueStyles.size[size]
-            : placeholderStyles.size[size],
-    ]);
-    return (<View>
-      {/* Label */}
-      {label && <AtomicText style={pickerLabelStyle}>{label}</AtomicText>}
-
-      {/* Picker Button */}
-      <TouchableOpacity onPress={openModal} disabled={disabled} accessibilityRole="button" accessibilityLabel={label || placeholder} accessibilityState={{ disabled }} testID={testID} style={pickerContainerStyle}>
-        {/* Display Text */}
-        <AtomicText style={pickerValueStyle} numberOfLines={1}>
-          {displayText}
-        </AtomicText>
-
-        {/* Icons */}
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
-          {/* Clear Button */}
-          {clearable && selectedOptions.length > 0 && !disabled && (<TouchableOpacity onPress={handleClear} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} accessibilityRole="button" accessibilityLabel="Clear selection" testID={`${testID}-clear`}>
-              <AtomicIcon name="X" size="sm" color="secondary"/>
-            </TouchableOpacity>)}
-
-          {/* Dropdown Icon */}
-          <AtomicIcon name={modalVisible ? 'ChevronUp' : 'ChevronDown'} size="sm" color={disabled ? 'surfaceVariant' : 'secondary'}/>
-        </View>
-      </TouchableOpacity>
-
-      {/* Selected Chips (Multi-select) */}
-      {renderSelectedChips()}
-
-      {/* Error Message */}
-      {error && <AtomicText style={errorStyles}>{error}</AtomicText>}
-
-      {/* Selection Modal */}
-      <Modal visible={modalVisible} animationType="slide" transparent onRequestClose={closeModal} testID={`${testID}-modal`}>
-        <View style={modalOverlayStyles}>
-          <View style={[
-            modalContainerStyles,
-            { paddingBottom: insets.bottom + tokens.spacing.md },
-        ]}>
-            {/* Modal Header */}
-            <View style={modalHeaderStyles}>
-              {/* Title */}
-              <AtomicText style={modalTitleStyles}>
-                {modalTitle || label || 'Select'}
-              </AtomicText>
-
-              {/* Close Button */}
-              <TouchableOpacity onPress={closeModal} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} accessibilityRole="button" accessibilityLabel="Close picker" testID={`${testID}-close`}>
-                <AtomicIcon name="X" size="md" color="primary"/>
-              </TouchableOpacity>
-            </View>
-
-            {/* Search Bar */}
-            {searchable && (<View style={searchContainerStyles}>
-                <AtomicIcon name="Search" size="sm" color="secondary"/>
-                <TextInput value={searchQuery} onChangeText={handleSearch} placeholder="Search..." placeholderTextColor={tokens.colors.textSecondary} style={searchInputStyles} testID={`${testID}-search`}/>
-                {searchQuery.length > 0 && (<TouchableOpacity onPress={() => handleSearch('')}>
-                    <AtomicIcon name="X" size="sm" color="secondary"/>
-                  </TouchableOpacity>)}
-              </View>)}
-
-            {/* Options List */}
-            {filteredOptions.length > 0 ? (<FlatList data={filteredOptions} keyExtractor={(item) => item.value} renderItem={renderOption} showsVerticalScrollIndicator testID={`${testID}-list`}/>) : (<View style={emptyStateStyles}>
-                <AtomicIcon name="Info" size="xl" color="secondary"/>
-                <AtomicText style={emptyStateTextStyles}>
-                  {emptyMessage}
-                </AtomicText>
-              </View>)}
-          </View>
-        </View>
-      </Modal>
-    </View>);
-};

package/src/presentation/atoms/AtomicProgress.js

@@ -1,79 +0,0 @@
-/**
- * AtomicProgress - Universal Progress Bar Component
- *
- * Displays progress bars for completion tracking
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Progress indication and completion tracking
- *
- * Usage:
- * - File upload progress
- * - Task completion progress
- * - Achievement progress
- * - Form completion
- */
-import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicProgress = ({ value, height = 8, width = '100%', color, backgroundColor, shape = 'rounded', showPercentage = false, showValue = false, textColor, style, testID, }) => {
-    const tokens = useAppDesignTokens();
-    // Clamp value between 0 and 100
-    const clampedValue = Math.max(0, Math.min(100, value));
-    // Default colors
-    const progressColor = color || tokens.colors.primary;
-    const progressBackground = backgroundColor || tokens.colors.surfaceVariant;
-    const progressTextColor = textColor || tokens.colors.textPrimary;
-    // Calculate progress width
-    const progressWidth = `${clampedValue}%`;
-    // Border radius based on shape
-    const borderRadius = shape === 'rounded' ? height / 2 : 0;
-    const containerStyle = {
-        width: width,
-        height,
-        backgroundColor: progressBackground,
-        borderRadius,
-        overflow: 'hidden',
-    };
-    const progressStyle = {
-        width: progressWidth,
-        height: '100%',
-        backgroundColor: progressColor,
-        borderRadius,
-    };
-    const textStyle = {
-        fontSize: tokens.typography.bodySmall.fontSize,
-        fontWeight: tokens.typography.labelMedium.fontWeight,
-        color: progressTextColor,
-        textAlign: 'center',
-    };
-    return (<View style={[containerStyle, style]} testID={testID}>
-      <View style={progressStyle}/>
-      {(showPercentage || showValue) && (<View style={styles.textContainer}>
-          <Text style={textStyle}>
-            {showPercentage ? `${Math.round(clampedValue)}%` : `${Math.round(clampedValue)}`}
-          </Text>
-        </View>)}
-    </View>);
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const styles = StyleSheet.create({
-    textContainer: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicProgress;

package/src/presentation/atoms/AtomicSearchBar.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { View, TextInput, TouchableOpacity } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicIcon } from './AtomicIcon';
-export const AtomicSearchBar = ({ value, onChangeText, placeholder = 'Search...', autoFocus = false, editable = true, onClear, onFocus, onBlur, onSubmitEditing, style, inputStyle, accessibilityLabel = 'Search input', accessibilityHint, }) => {
-    const tokens = useAppDesignTokens();
-    const handleClear = () => {
-        onChangeText('');
-        onClear?.();
-    };
-    return (<View style={[
-            {
-                flexDirection: 'row',
-                alignItems: 'center',
-                backgroundColor: tokens.colors.surfaceSecondary,
-                borderRadius: tokens.borders.radius.lg,
-                borderWidth: 1,
-                borderColor: tokens.colors.border,
-                paddingHorizontal: tokens.spacing.md,
-                paddingVertical: tokens.spacing.sm,
-                gap: tokens.spacing.sm,
-                minHeight: 48,
-            },
-            style,
-        ]} accessibilityRole="search">
-      <AtomicIcon name="Search" size="sm" color="secondary"/>
-
-      <TextInput value={value} onChangeText={onChangeText} placeholder={placeholder} placeholderTextColor={tokens.colors.textSecondary} autoFocus={autoFocus} editable={editable} onFocus={onFocus} onBlur={onBlur} onSubmitEditing={onSubmitEditing} style={[
-            {
-                flex: 1,
-                ...tokens.typography.bodyMedium,
-                color: tokens.colors.textPrimary,
-                padding: 0,
-                margin: 0,
-            },
-            inputStyle,
-        ]} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} returnKeyType="search" underlineColorAndroid="transparent"/>
-
-      {value.length > 0 && (<TouchableOpacity onPress={handleClear} style={{
-                padding: tokens.spacing.xs,
-            }} accessibilityLabel="Clear search" accessibilityRole="button">
-          <AtomicIcon name="X" size="sm" color="secondary"/>
-        </TouchableOpacity>)}
-    </View>);
-};

package/src/presentation/atoms/AtomicSort.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import { ScrollView, View } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicChip } from './AtomicChip';
-/**
- * AtomicSort - Horizontal Sort Chip Component
- *
- * A Material Design 3 compliant sort component using chip selection.
- * Supports single selection with ascending/descending direction toggle.
- *
- * @example
- * ```tsx
- * const [sortBy, setSortBy] = useState<string | null>('name');
- * const [sortDir, setSortDir] = useState<SortDirection>('asc');
- *
- * <AtomicSort
- *   options={[
- *     { id: 'name', label: 'Name', icon: 'sort-alpha' },
- *     { id: 'date', label: 'Date', icon: 'schedule' },
- *     { id: 'priority', label: 'Priority', icon: 'flag' },
- *   ]}
- *   selectedId={sortBy}
- *   sortDirection={sortDir}
- *   onSortChange={(id, dir) => {
- *     setSortBy(id);
- *     setSortDir(dir);
- *   }}
- *   showDirectionToggle={true}
- * />
- * ```
- *
- * Features:
- * - Horizontal scrollable sort chips
- * - Single selection (one active sort at a time)
- * - Direction toggle (click active chip to switch asc/desc)
- * - Visual arrow indicators (↑ asc, ↓ desc)
- * - Theme-aware colors from design tokens
- * - Icon support per sort option
- * - Fully controlled component
- *
- * Behavior:
- * - Click inactive chip → Selects it with ascending direction
- * - Click active chip → Toggles direction (asc ↔ desc)
- * - Visual feedback via filled variant for active sort
- */
-export const AtomicSort = ({ options, selectedId, sortDirection, onSortChange, showDirectionToggle = true, variant = 'outlined', color = 'primary', size = 'md', style, testID, }) => {
-    const tokens = useAppDesignTokens();
-    /**
-     * Handle sort chip press
-     * - If clicking active chip: Toggle direction
-     * - If clicking inactive chip: Select it with 'asc' direction
-     */
-    const handleSortPress = (optionId) => {
-        if (selectedId === optionId) {
-            const newDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-            onSortChange(optionId, newDirection);
-        }
-        else {
-            onSortChange(optionId, 'asc');
-        }
-    };
-    const directionIcon = sortDirection === 'asc' ? 'arrow-upward' : 'arrow-downward';
-    return (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-            paddingHorizontal: tokens.spacing.sm,
-            gap: tokens.spacing.sm,
-        }} style={[style]} testID={testID}>
-      <View style={{ flexDirection: 'row', gap: tokens.spacing.sm }}>
-        {options.map((option) => {
-            const isSelected = selectedId === option.id;
-            return (<AtomicChip key={option.id} variant={isSelected ? 'filled' : variant} color={color} size={size} leadingIcon={option.icon} trailingIcon={isSelected && showDirectionToggle ? directionIcon : undefined} selected={isSelected} clickable={true} onPress={() => handleSortPress(option.id)} testID={`sort-chip-${option.id}`}>
-              {option.label}
-            </AtomicChip>);
-        })}
-      </View>
-    </ScrollView>);
-};

package/src/presentation/atoms/AtomicSwitch.js

@@ -1,103 +0,0 @@
-/**
- * AtomicSwitch - Universal Switch Component
- *
- * Provides consistent switch/toggle functionality with theme integration
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Basic switch/toggle input
- *
- * Usage:
- * - Settings toggles
- * - Feature enable/disable
- * - Boolean preferences
- * - Form inputs
- */
-import React from 'react';
-import { Switch, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// SIZE CONFIGURATION
-// =============================================================================
-const SIZE_CONFIG = {
-    sm: { scaleX: 0.8, scaleY: 0.8 },
-    md: { scaleX: 1, scaleY: 1 },
-    lg: { scaleX: 1.2, scaleY: 1.2 },
-};
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicSwitch = ({ value, onValueChange, size = 'md', variant = 'primary', disabled = false, style, trackColor, thumbColor, ios_backgroundColor, ...props }) => {
-    const tokens = useAppDesignTokens();
-    const styles = getStyles(tokens);
-    const sizeConfig = SIZE_CONFIG[size];
-    const colors = getVariantColors(tokens, variant);
-    const defaultTrackColor = trackColor || {
-        false: colors.trackFalse,
-        true: colors.trackTrue,
-    };
-    const defaultThumbColor = thumbColor || colors.thumb;
-    const defaultIosBackgroundColor = ios_backgroundColor || colors.trackFalse;
-    return (<Switch value={value} onValueChange={onValueChange} disabled={disabled} trackColor={defaultTrackColor} thumbColor={defaultThumbColor} ios_backgroundColor={defaultIosBackgroundColor} style={[
-            styles.switch,
-            {
-                transform: [{ scaleX: sizeConfig.scaleX }, { scaleY: sizeConfig.scaleY }],
-            },
-            style,
-        ]} {...props}/>);
-};
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-const getVariantColors = (tokens, variant) => {
-    switch (variant) {
-        case 'primary':
-            return {
-                trackFalse: tokens.colors.surfaceSecondary,
-                trackTrue: tokens.colors.primary,
-                thumb: tokens.colors.surface,
-            };
-        case 'secondary':
-            return {
-                trackFalse: tokens.colors.surfaceSecondary,
-                trackTrue: tokens.colors.secondary,
-                thumb: tokens.colors.surface,
-            };
-        case 'success':
-            return {
-                trackFalse: tokens.colors.surfaceSecondary,
-                trackTrue: tokens.colors.success,
-                thumb: tokens.colors.surface,
-            };
-        case 'warning':
-            return {
-                trackFalse: tokens.colors.surfaceSecondary,
-                trackTrue: tokens.colors.warning,
-                thumb: tokens.colors.surface,
-            };
-        case 'error':
-            return {
-                trackFalse: tokens.colors.surfaceSecondary,
-                trackTrue: tokens.colors.error,
-                thumb: tokens.colors.surface,
-            };
-        default:
-            return {
-                trackFalse: tokens.colors.surfaceSecondary,
-                trackTrue: tokens.colors.primary,
-                thumb: tokens.colors.surface,
-            };
-    }
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (tokens) => StyleSheet.create({
-    switch: {
-    // Default switch styling is handled by platform
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicSwitch;

package/src/presentation/atoms/AtomicText.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { getTextColor } from '@umituz/react-native-typography';
-export const AtomicText = ({ children, type = 'bodyMedium', color, numberOfLines, ellipsizeMode, textAlign, style, testID, }) => {
-    const tokens = useAppDesignTokens();
-    // Get typography style from tokens
-    const typographyStyle = tokens.typography[type];
-    // Get color from tokens or use custom color using utility function
-    const resolvedColor = getTextColor(color, tokens);
-    const textStyle = [
-        typographyStyle,
-        {
-            color: resolvedColor,
-            ...(textAlign && { textAlign }),
-        },
-        style,
-    ];
-    return (<Text numberOfLines={numberOfLines} ellipsizeMode={ellipsizeMode} style={textStyle} testID={testID}>
-      {children}
-    </Text>);
-};