@umituz/react-native-design-system 1.3.0 → 1.3.2

package/lib/presentation/atoms/AtomicPicker.js

@@ -0,0 +1,299 @@
+/**
+ * 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 '../hooks/useAppDesignTokens';
+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="CheckCircle" 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="cancel" size="sm" color="secondary"/>
+            </TouchableOpacity>)}
+
+          {/* Dropdown Icon */}
+          <AtomicIcon name={modalVisible ? 'expand-less' : 'expand-more'} 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="cancel" 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="error-outline" size="xl" color="secondary"/>
+                <AtomicText style={emptyStateTextStyles}>
+                  {emptyMessage}
+                </AtomicText>
+              </View>)}
+          </View>
+        </View>
+      </Modal>
+    </View>);
+};
+//# sourceMappingURL=AtomicPicker.js.map

package/lib/presentation/atoms/AtomicPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicPicker.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACL,wBAAwB,EACxB,oBAAoB,EACpB,0BAA0B,EAC1B,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,0BAA0B,EAC1B,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AAItC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,GAAG,WAAW,EACzB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,IAAI,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,IAAI,EACX,UAAU,EACV,YAAY,GAAG,sBAAsB,EACrC,KAAK,EACL,UAAU,EACV,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzC,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;IAEnC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,uCAAuC;IACvC,MAAM,eAAe,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,iBAAiB,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,WAAW,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5E,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACrD,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACrD,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,MAAM,CAAC,CAAC;IAC7D,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,cAAc,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAEjD;;OAEG;IACH,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,CAAC;QACD,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAe,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB;;OAEG;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;YAAE,OAAO,OAAO,CAAC;QAExC,MAAM,KAAK,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC;QACxC,OAAO,OAAO,CAAC,MAAM,CACnB,CAAC,GAAG,EAAE,EAAE,CACN,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;YACvC,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CACjD,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3B;;OAEG;IACH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACjC,OAAO,WAAW,CAAC;QACrB,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,eAAe,CAAC,MAAM,KAAK,CAAC;gBACjC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK;gBAC1B,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,WAAW,CAAC;QAC3C,CAAC;QAED,OAAO,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,WAAW,CAAC;IAClD,CAAC,EAAE,CAAC,eAAe,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7C;;OAEG;IACH,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,QAAQ;YAAE,OAAO;QACrB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,cAAc,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,cAAc,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,YAAY,GAAG,CAAC,WAAmB,EAAE,EAAE;QAC3C,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,SAAS,GAAG,cAAc,CAAC,QAAQ,CAAC,WAAW,CAAC;gBACpD,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC;gBACjD,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,WAAW,CAAC,CAAC;YACrC,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,WAAW,CAAC,CAAC;YACtB,IAAI,SAAS,EAAE,CAAC;gBACd,UAAU,EAAE,CAAC;YACf,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,UAAU,GAAG,CAAC,WAAmB,EAAW,EAAE;QAClD,OAAO,cAAc,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAA0B,EAAE,EAAE;QACxD,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxC,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;QAE5C,MAAM,oBAAoB,GAAG,wBAAwB,CACnD,MAAM,EACN,QAAQ,EACR,YAAY,CACb,CAAC;QACF,MAAM,eAAe,GAAG,mBAAmB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAC9D,MAAM,sBAAsB,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;QAElE,OAAO,CACL,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CACzD,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,GAAG,MAAM,WAAW,IAAI,CAAC,KAAK,EAAE,CAAC,CACxD,KAAK,CAAC,CAAC,oBAAoB,CAAC,CAE5B;QAAA,CAAC,iBAAiB,CAClB;QAAA,CAAC,IAAI,CAAC,IAAI,IAAI,CACZ,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,IAAI,CAAC,IAAI,CACT,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,EAC1C,CACH,CAED;;QAAA,CAAC,oBAAoB,CACrB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACvB;UAAA,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,UAAU,CAC5D;UAAA,CAAC,IAAI,CAAC,WAAW,IAAI,CACnB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,sBAAsB,CAAC,CACxC;cAAA,CAAC,IAAI,CAAC,WAAW,CACnB;YAAA,EAAE,UAAU,CAAC,CACd,CACH;QAAA,EAAE,IAAI,CAEN;;QAAA,CAAC,wBAAwB,CACzB;QAAA,CAAC,QAAQ,IAAI,CACX,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAG,CAC5D,CACH;MAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;IACJ,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,QAAQ,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAE3D,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,mBAAmB,CAAC,CAC/B;QAAA,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC5B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CACtC;YAAA,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,UAAU,CAC1D;YAAA,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,CAAC,CACF,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAElD;cAAA,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAChD;YAAA,EAAE,gBAAgB,CACpB;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CACJ;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,CAAC;QAC9C,eAAe,CAAC,IAAI;QACpB,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;QAC1B,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QAC/C,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QACrD,KAAK;KACN,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;QAC1C,WAAW,CAAC,IAAI;QAChB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QACtB,UAAU;KACX,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;QAC1C,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI;QACtE,eAAe,CAAC,MAAM,GAAG,CAAC;YACxB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;YACxB,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;KACjC,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,WAAW,CACZ;MAAA,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAEnE;;MAAA,CAAC,mBAAmB,CACpB;MAAA,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,SAAS,CAAC,CACnB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,CAAC,KAAK,IAAI,WAAW,CAAC,CACzC,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CACjC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,oBAAoB,CAAC,CAE5B;QAAA,CAAC,kBAAkB,CACnB;QAAA,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CACpD;UAAA,CAAC,WAAW,CACd;QAAA,EAAE,UAAU,CAEZ;;QAAA,CAAC,WAAW,CACZ;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAClF;UAAA,CAAC,kBAAkB,CACnB;UAAA,CAAC,SAAS,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CACvD,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAClD,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,iBAAiB,CACpC,MAAM,CAAC,CAAC,GAAG,MAAM,QAAQ,CAAC,CAE1B;cAAA,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EACvD;YAAA,EAAE,gBAAgB,CAAC,CACpB,CAED;;UAAA,CAAC,mBAAmB,CACpB;UAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CACnD,IAAI,CAAC,IAAI,CACT,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,EAErD;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,gBAAgB,CAElB;;MAAA,CAAC,mCAAmC,CACpC;MAAA,CAAC,mBAAmB,EAAE,CAEtB;;MAAA,CAAC,mBAAmB,CACpB;MAAA,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAE9D;;MAAA,CAAC,qBAAqB,CACtB;MAAA,CAAC,KAAK,CACJ,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,aAAa,CAAC,OAAO,CACrB,WAAW,CACX,cAAc,CAAC,CAAC,UAAU,CAAC,CAC3B,MAAM,CAAC,CAAC,GAAG,MAAM,QAAQ,CAAC,CAE1B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAC9B;UAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,oBAAoB;YACpB,EAAE,aAAa,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE;SACrD,CAAC,CAEF;YAAA,CAAC,kBAAkB,CACnB;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAC7B;cAAA,CAAC,WAAW,CACZ;cAAA,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAClC;gBAAA,CAAC,UAAU,IAAI,KAAK,IAAI,QAAQ,CAClC;cAAA,EAAE,UAAU,CAEZ;;cAAA,CAAC,kBAAkB,CACnB;cAAA,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAClD,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,cAAc,CACjC,MAAM,CAAC,CAAC,GAAG,MAAM,QAAQ,CAAC,CAE1B;gBAAA,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAChD;cAAA,EAAE,gBAAgB,CACpB;YAAA,EAAE,IAAI,CAEN;;YAAA,CAAC,gBAAgB,CACjB;YAAA,CAAC,UAAU,IAAI,CACb,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,CACjC;gBAAA,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EACrD;gBAAA,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,WAAW,CAAC,CACnB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,WAAW,CAAC,WAAW,CACvB,oBAAoB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAClD,KAAK,CAAC,CAAC,iBAAiB,CAAC,CACzB,MAAM,CAAC,CAAC,GAAG,MAAM,SAAS,CAAC,EAE7B;gBAAA,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAChD;oBAAA,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EACvD;kBAAA,EAAE,gBAAgB,CAAC,CACpB,CACH;cAAA,EAAE,IAAI,CAAC,CACR,CAED;;YAAA,CAAC,kBAAkB,CACnB;YAAA,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC5B,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,eAAe,CAAC,CACtB,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CACnC,UAAU,CAAC,CAAC,YAAY,CAAC,CACzB,4BAA4B,CAC5B,MAAM,CAAC,CAAC,GAAG,MAAM,OAAO,CAAC,EACzB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAC5B;gBAAA,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAC5D;gBAAA,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,oBAAoB,CAAC,CACtC;kBAAA,CAAC,YAAY,CACf;gBAAA,EAAE,UAAU,CACd;cAAA,EAAE,IAAI,CAAC,CACR,CACH;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC"}

package/lib/presentation/atoms/AtomicProgress.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 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
+ * - Loading progress
+ * - Achievement progress
+ * - Form completion
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface AtomicProgressProps {
+    /** Progress value (0-100) */
+    value: number;
+    /** Progress bar height */
+    height?: number;
+    /** Progress bar width */
+    width?: number | string;
+    /** Progress bar color */
+    color?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Progress bar shape */
+    shape?: 'rounded' | 'square';
+    /** Whether to show percentage text */
+    showPercentage?: boolean;
+    /** Whether to show value text */
+    showValue?: boolean;
+    /** Custom text color */
+    textColor?: string;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Style overrides */
+    style?: ViewStyle | ViewStyle[];
+    /** Test ID for testing */
+    testID?: string;
+}
+export declare const AtomicProgress: React.FC<AtomicProgressProps>;
+export default AtomicProgress;
+//# sourceMappingURL=AtomicProgress.d.ts.map

package/lib/presentation/atoms/AtomicProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicProgress.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicProgress.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAwB,MAAM,cAAc,CAAC;AAOjF,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7B,sCAAsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgExD,CAAC;AAsBF,eAAe,cAAc,CAAC"}

package/lib/presentation/atoms/AtomicProgress.js

@@ -0,0 +1,81 @@
+/**
+ * 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
+ * - Loading progress
+ * - Achievement progress
+ * - Form completion
+ */
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicProgress = ({ value, height = 8, width = '100%', color, backgroundColor, shape = 'rounded', showPercentage = false, showValue = false, textColor, animationDuration = 300, 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;
+//# sourceMappingURL=AtomicProgress.js.map

package/lib/presentation/atoms/AtomicProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicProgress.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicProgress.tsx"],"names":[],"mappings":"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"}

package/lib/presentation/atoms/AtomicSearchBar.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+export interface AtomicSearchBarProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    autoFocus?: boolean;
+    editable?: boolean;
+    onClear?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onSubmitEditing?: () => void;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+export declare const AtomicSearchBar: React.FC<AtomicSearchBarProps>;
+//# sourceMappingURL=AtomicSearchBar.d.ts.map

package/lib/presentation/atoms/AtomicSearchBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicSearchBar.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2F1D,CAAC"}

package/lib/presentation/atoms/AtomicSearchBar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, TextInput, TouchableOpacity } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+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>);
+};
+//# sourceMappingURL=AtomicSearchBar.js.map

package/lib/presentation/atoms/AtomicSearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicSearchBar.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSearchBar.tsx"],"names":[],"mappings":"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"}

package/lib/presentation/atoms/AtomicSkeleton.d.ts

@@ -0,0 +1,43 @@
+/**
+ * AtomicSkeleton - Universal Skeleton Loading Component
+ *
+ * Displays animated skeleton placeholders for loading states
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Loading state placeholder
+ *
+ * Usage:
+ * - Content loading placeholders
+ * - List item skeletons
+ * - Card skeletons
+ * - Text line skeletons
+ * - Image placeholders
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface AtomicSkeletonProps {
+    /** Skeleton width */
+    width?: number | string;
+    /** Skeleton height */
+    height?: number | string;
+    /** Skeleton shape */
+    shape?: 'rectangle' | 'circle' | 'rounded';
+    /** Border radius for rounded shapes */
+    borderRadius?: number;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Whether to show animation */
+    animated?: boolean;
+    /** Skeleton color */
+    color?: string;
+    /** Highlight color for animation */
+    highlightColor?: string;
+    /** Style overrides */
+    style?: ViewStyle;
+    /** Test ID for testing */
+    testID?: string;
+}
+export declare const AtomicSkeleton: React.FC<AtomicSkeletonProps>;
+export default AtomicSkeleton;
+//# sourceMappingURL=AtomicSkeleton.d.ts.map

package/lib/presentation/atoms/AtomicSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicSkeleton.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicSkeleton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAoB,SAAS,EAA4B,MAAM,cAAc,CAAC;AAOrF,MAAM,WAAW,mBAAmB;IAClC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,qBAAqB;IACrB,KAAK,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuFxD,CAAC;AAMF,eAAe,cAAc,CAAC"}