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

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { AtomicFabProps } from './fab/types';
+import { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder } from './fab/styles/fabStyles';
+export type { FabSize, FabVariant, FabVariantConfig, FabSizeConfig, AtomicFabProps } from './fab/types';
+export { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder };
+/**
+ * AtomicFab - Floating Action Button Component
+ *
+ * A Material Design 3 compliant FAB component for primary actions.
+ * Follows CLAUDE.md standards for responsive positioning.
+ *
+ * @example
+ * ```tsx
+ * // IMPORTANT: FAB must be used at screen level, NOT inside ScrollView
+ * <ScreenLayout>
+ *   <ScrollView>
+ *     {/* Your content *\/}
+ *   </ScrollView>
+ *   <AtomicFab
+ *     icon="add"
+ *     onPress={handleAddItem}
+ *     variant="primary"
+ *     size="md"
+ *   />
+ * </ScreenLayout>
+ * ```
+ *
+ * Features:
+ * - Material Design 3 sizes (sm: 40px, md: 56px, lg: 72px)
+ * - Three variants: primary, secondary, surface
+ * - Responsive positioning (above tab bar, safe area aware)
+ * - Loading state with spinner
+ * - Disabled state with opacity
+ * - Theme-aware colors from design tokens
+ * - Border for depth (no shadows per CLAUDE.md)
+ */
+export declare const AtomicFab: React.FC<AtomicFabProps>;
+//# sourceMappingURL=AtomicFab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicFab.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicFab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,YAAY,EACb,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxG,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwD9C,CAAC"}

package/lib/presentation/atoms/AtomicFab.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { TouchableOpacity, ActivityIndicator, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useResponsive } from '../hooks/useResponsive';
+import { AtomicIcon } from './AtomicIcon';
+import { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder, } from './fab/styles/fabStyles';
+export { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder };
+/**
+ * AtomicFab - Floating Action Button Component
+ *
+ * A Material Design 3 compliant FAB component for primary actions.
+ * Follows CLAUDE.md standards for responsive positioning.
+ *
+ * @example
+ * ```tsx
+ * // IMPORTANT: FAB must be used at screen level, NOT inside ScrollView
+ * <ScreenLayout>
+ *   <ScrollView>
+ *     {/* Your content *\/}
+ *   </ScrollView>
+ *   <AtomicFab
+ *     icon="add"
+ *     onPress={handleAddItem}
+ *     variant="primary"
+ *     size="md"
+ *   />
+ * </ScreenLayout>
+ * ```
+ *
+ * Features:
+ * - Material Design 3 sizes (sm: 40px, md: 56px, lg: 72px)
+ * - Three variants: primary, secondary, surface
+ * - Responsive positioning (above tab bar, safe area aware)
+ * - Loading state with spinner
+ * - Disabled state with opacity
+ * - Theme-aware colors from design tokens
+ * - Border for depth (no shadows per CLAUDE.md)
+ */
+export const AtomicFab = ({ icon, onPress, variant = 'primary', size = 'md', disabled = false, loading = false, style, testID, accessibilityLabel, }) => {
+    const tokens = useAppDesignTokens();
+    const responsive = useResponsive();
+    const isDisabled = disabled || loading;
+    // Get configurations
+    const sizeConfig = FAB_SIZES[size];
+    const variants = getFabVariants(tokens);
+    const variantConfig = variants[variant];
+    const iconSize = getFabIconSize(size);
+    // Combine styles
+    const fabStyle = StyleSheet.flatten([
+        {
+            position: 'absolute',
+            bottom: responsive.fabPosition.bottom,
+            right: responsive.fabPosition.right,
+            width: sizeConfig.width,
+            height: sizeConfig.height,
+            borderRadius: sizeConfig.borderRadius,
+            backgroundColor: variantConfig.backgroundColor,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        getFabBorder(tokens),
+        isDisabled ? { opacity: tokens.opacity.disabled } : undefined,
+        style, // Custom style override
+    ]);
+    return (<TouchableOpacity style={fabStyle} onPress={onPress} disabled={isDisabled} activeOpacity={0.7} testID={testID} accessibilityLabel={accessibilityLabel || `${icon} button`} accessibilityRole="button">
+      {loading ? (<ActivityIndicator size="small" color={variantConfig.iconColor}/>) : (<AtomicIcon name={icon} size={iconSize} customColor={variantConfig.iconColor}/>)}
+    </TouchableOpacity>);
+};
+//# sourceMappingURL=AtomicFab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicFab.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicFab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,YAAY,GACb,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,IAAI,EACJ,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,KAAK,EACL,MAAM,EACN,kBAAkB,GACnB,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAC;IAEvC,qBAAqB;IACrB,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IACxC,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAEtC,iBAAiB;IACjB,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC;QAClC;YACE,QAAQ,EAAE,UAAmB;YAC7B,MAAM,EAAE,UAAU,CAAC,WAAW,CAAC,MAAM;YACrC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK;YACnC,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,MAAM,EAAE,UAAU,CAAC,MAAM;YACzB,YAAY,EAAE,UAAU,CAAC,YAAY;YACrC,eAAe,EAAE,aAAa,CAAC,eAAe;YAC9C,UAAU,EAAE,QAAiB;YAC7B,cAAc,EAAE,QAAiB;SAClC;QACD,YAAY,CAAC,MAAM,CAAC;QACpB,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS;QAC7D,KAAK,EAAE,wBAAwB;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,aAAa,CAAC,CAAC,GAAG,CAAC,CACnB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,kBAAkB,CAAC,CAAC,kBAAkB,IAAI,GAAG,IAAI,SAAS,CAAC,CAC3D,iBAAiB,CAAC,QAAQ,CAE1B;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,EAAG,CACnE,CAAC,CAAC,CAAC,CACF,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,EAAG,CACjF,CACH;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { AtomicFilterProps } from './filter/types';
+export type { FilterOption, AtomicFilterProps } from './filter/types';
+export { getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './filter/styles/filterStyles';
+/**
+ * AtomicFilter - Horizontal Filter Chip Component
+ *
+ * A Material Design 3 compliant filter component using chip selection.
+ * Supports single and multi-select modes with "Clear All" functionality.
+ *
+ * @example
+ * ```tsx
+ * const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
+ *
+ * <AtomicFilter
+ *   options={[
+ *     { id: 'active', label: 'Active', icon: 'check-circle' },
+ *     { id: 'completed', label: 'Completed', icon: 'check' },
+ *     { id: 'pending', label: 'Pending', icon: 'clock' },
+ *   ]}
+ *   selectedIds={selectedFilters}
+ *   onSelectionChange={setSelectedFilters}
+ *   multiSelect={true}
+ *   showClearAll={true}
+ * />
+ * ```
+ *
+ * Features:
+ * - Horizontal scrollable filter chips
+ * - Single/Multi-select modes
+ * - Clear all button (when filters active)
+ * - Theme-aware colors from design tokens
+ * - Icon support per filter option
+ * - Fully controlled component
+ */
+export declare const AtomicFilter: React.FC<AtomicFilterProps>;
+//# sourceMappingURL=AtomicFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicFilter.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,iBAAiB,EAAgB,MAAM,gBAAgB,CAAC;AAOjE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,8BAA8B,GAC/B,MAAM,8BAA8B,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsGpD,CAAC"}

package/lib/presentation/atoms/AtomicFilter.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { ScrollView, View, TouchableOpacity } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicChip } from './AtomicChip';
+import { AtomicText } from './AtomicText';
+import { AtomicIcon } from './AtomicIcon';
+import { getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './filter/styles/filterStyles';
+export { getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './filter/styles/filterStyles';
+/**
+ * AtomicFilter - Horizontal Filter Chip Component
+ *
+ * A Material Design 3 compliant filter component using chip selection.
+ * Supports single and multi-select modes with "Clear All" functionality.
+ *
+ * @example
+ * ```tsx
+ * const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
+ *
+ * <AtomicFilter
+ *   options={[
+ *     { id: 'active', label: 'Active', icon: 'check-circle' },
+ *     { id: 'completed', label: 'Completed', icon: 'check' },
+ *     { id: 'pending', label: 'Pending', icon: 'clock' },
+ *   ]}
+ *   selectedIds={selectedFilters}
+ *   onSelectionChange={setSelectedFilters}
+ *   multiSelect={true}
+ *   showClearAll={true}
+ * />
+ * ```
+ *
+ * Features:
+ * - Horizontal scrollable filter chips
+ * - Single/Multi-select modes
+ * - Clear all button (when filters active)
+ * - Theme-aware colors from design tokens
+ * - Icon support per filter option
+ * - Fully controlled component
+ */
+export const AtomicFilter = ({ options, selectedIds, onSelectionChange, multiSelect = true, showClearAll = true, variant = 'outlined', color = 'primary', size = 'md', style, testID, }) => {
+    const tokens = useAppDesignTokens();
+    /**
+     * Handle filter chip press
+     */
+    const handleFilterPress = (optionId) => {
+        if (multiSelect) {
+            // Multi-select mode: Toggle selection
+            if (selectedIds.includes(optionId)) {
+                // Deselect
+                onSelectionChange(selectedIds.filter(id => id !== optionId));
+            }
+            else {
+                // Select
+                onSelectionChange([...selectedIds, optionId]);
+            }
+        }
+        else {
+            // Single-select mode: Replace selection
+            if (selectedIds.includes(optionId)) {
+                // Deselect (clear selection)
+                onSelectionChange([]);
+            }
+            else {
+                // Select (only this one)
+                onSelectionChange([optionId]);
+            }
+        }
+    };
+    /**
+     * Handle clear all button press
+     */
+    const handleClearAll = () => {
+        onSelectionChange([]);
+    };
+    const hasActiveFilters = selectedIds.length > 0;
+    return (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={getScrollContentContainerStyle()} style={[style]} testID={testID}>
+      <View style={getFilterContainerStyle()}>
+        {options.map((option) => {
+            const isSelected = selectedIds.includes(option.id);
+            return (<AtomicChip key={option.id} variant={isSelected ? 'filled' : variant} color={color} size={size} leadingIcon={option.icon} selected={isSelected} clickable={true} onPress={() => handleFilterPress(option.id)} testID={`filter-chip-${option.id}`}>
+              {option.label}
+            </AtomicChip>);
+        })}
+
+        {/* Clear All Button */}
+        {showClearAll && hasActiveFilters && (<TouchableOpacity onPress={handleClearAll} style={[
+                getClearAllContainerStyle(),
+                {
+                    backgroundColor: tokens.colors.surfaceVariant,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.outline,
+                }
+            ]} testID="clear-all-button">
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
+              <AtomicIcon name="X" size="xs" color="surfaceVariant"/>
+              <AtomicText type="labelSmall" style={{ color: tokens.colors.textSecondary }}>
+                Clear All
+              </AtomicText>
+            </View>
+          </TouchableOpacity>)}
+      </View>
+    </ScrollView>);
+};
+//# sourceMappingURL=AtomicFilter.js.map

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

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

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

@@ -0,0 +1,30 @@
+/**
+ * AtomicFormError - Universal Form Error Component
+ *
+ * Provides consistent error message display for forms
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Display validation error messages
+ *
+ * Usage:
+ * - Form field validation errors
+ * - Global form error messages
+ * - API error display
+ * - Input validation feedback
+ */
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+export interface AtomicFormErrorProps {
+    /** Error message to display */
+    message: string | null | undefined;
+    /** Error display variant */
+    variant?: 'global' | 'field';
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom text style */
+    textStyle?: StyleProp<TextStyle>;
+}
+export declare const AtomicFormError: React.FC<AtomicFormErrorProps>;
+export default AtomicFormError;
+//# sourceMappingURL=AtomicFormError.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicFormError.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicFormError.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASjF,MAAM,WAAW,oBAAoB;IACnC,+BAA+B;IAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACnC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,wBAAwB;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC;AAMD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyD1D,CAAC;AAMF,eAAe,eAAe,CAAC"}

package/lib/presentation/atoms/AtomicFormError.js

@@ -0,0 +1,64 @@
+/**
+ * AtomicFormError - Universal Form Error Component
+ *
+ * Provides consistent error message display for forms
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Display validation error messages
+ *
+ * Usage:
+ * - Form field validation errors
+ * - Global form error messages
+ * - API error display
+ * - Input validation feedback
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { withAlpha } from '../tokens/AppDesignTokens';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicFormError = ({ message, variant = 'field', style, textStyle, }) => {
+    const tokens = useAppDesignTokens();
+    if (!message) {
+        return null;
+    }
+    if (variant === 'global') {
+        return (<View style={[
+                {
+                    padding: tokens.spacing.md,
+                    borderRadius: tokens.borders.radius.md,
+                    marginBottom: tokens.spacing.sm,
+                    backgroundColor: withAlpha(tokens.colors.error, 0.15),
+                },
+                style,
+            ]}>
+        <AtomicText type="bodySmall" color="error" style={StyleSheet.flatten([
+                {
+                    textAlign: 'center',
+                    fontWeight: tokens.typography.medium,
+                },
+                textStyle,
+            ])}>
+          {message}
+        </AtomicText>
+      </View>);
+    }
+    return (<AtomicText type="bodySmall" color="error" style={StyleSheet.flatten([
+            {
+                marginTop: tokens.spacing.xs,
+                marginLeft: tokens.spacing.xs,
+            },
+            textStyle,
+        ])}>
+      {message}
+    </AtomicText>);
+};
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicFormError;
+//# sourceMappingURL=AtomicFormError.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicFormError.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicFormError.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAmC,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAiBtD,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,OAAO,EACP,OAAO,GAAG,OAAO,EACjB,KAAK,EACL,SAAS,GACV,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACzB,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;gBACL;oBACE,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;oBAC1B,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;oBACtC,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;oBAC/B,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;iBACtD;gBACD,KAAK;aACN,CAAC,CAEF;QAAA,CAAC,UAAU,CACT,IAAI,CAAC,WAAW,CAChB,KAAK,CAAC,OAAO,CACb,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;gBACxB;oBACE,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM;iBACrC;gBACD,SAAS;aACV,CAAC,CAAC,CAEH;UAAA,CAAC,OAAO,CACV;QAAA,EAAE,UAAU,CACd;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,WAAW,CAChB,KAAK,CAAC,OAAO,CACb,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;YACxB;gBACE,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;gBAC5B,UAAU,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;aAC9B;YACD,SAAS;SACV,CAAC,CAAC,CAEH;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,UAAU;AACV,gFAAgF;AAEhF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,36 @@
+/**
+ * AtomicIcon - Atomic Design System Icon Component
+ *
+ * Wrapper for the universal Icon component from @domains/icons
+ * Provides backward compatibility with AtomicIcon naming convention
+ * while leveraging the full power of the icons domain architecture.
+ */
+import React from 'react';
+import type { IconProps, IconSize, IconColor } from '../../domains/icons/domain/interfaces/IIconAdapter';
+import type { LucideIconName } from '../../domains/icons/infrastructure/adapters/LucideAdapter';
+/**
+ * AtomicIcon Component
+ *
+ * @example
+ * ```tsx
+ * import { AtomicIcon } from '@umituz/react-native-design-system';
+ *
+ * // Basic usage
+ * <AtomicIcon name="Settings" size="md" color="primary" />
+ *
+ * // Custom size and color
+ * <AtomicIcon name="Heart" customSize={32} customColor="#FF0000" />
+ *
+ * // With background
+ * <AtomicIcon name="Info" size="lg" withBackground backgroundColor="#667eea" />
+ * ```
+ */
+export declare const AtomicIcon: React.FC<IconProps>;
+/**
+ * Re-export types with Atomic naming convention
+ */
+export type AtomicIconProps = IconProps;
+export type AtomicIconSize = IconSize;
+export type AtomicIconColor = IconColor;
+export type AtomicIconName = LucideIconName;
+//# sourceMappingURL=AtomicIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicIcon.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicIcon.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,oDAAoD,CAAC;AACzG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2DAA2D,CAAC;AAEhG;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAE1C,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;AACxC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;AACxC,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC"}

package/lib/presentation/atoms/AtomicIcon.js

@@ -0,0 +1,30 @@
+/**
+ * AtomicIcon - Atomic Design System Icon Component
+ *
+ * Wrapper for the universal Icon component from @domains/icons
+ * Provides backward compatibility with AtomicIcon naming convention
+ * while leveraging the full power of the icons domain architecture.
+ */
+import React from 'react';
+import { Icon } from '../../domains/icons/presentation/components/Icon';
+/**
+ * AtomicIcon Component
+ *
+ * @example
+ * ```tsx
+ * import { AtomicIcon } from '@umituz/react-native-design-system';
+ *
+ * // Basic usage
+ * <AtomicIcon name="Settings" size="md" color="primary" />
+ *
+ * // Custom size and color
+ * <AtomicIcon name="Heart" customSize={32} customColor="#FF0000" />
+ *
+ * // With background
+ * <AtomicIcon name="Info" size="lg" withBackground backgroundColor="#667eea" />
+ * ```
+ */
+export const AtomicIcon = (props) => {
+    return <Icon {...props}/>;
+};
+//# sourceMappingURL=AtomicIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicIcon.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicIcon.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AAIxE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,KAAK,EAAE,EAAE;IACvD,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC7B,CAAC,CAAC"}

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

@@ -0,0 +1,40 @@
+/**
+ * AtomicImage - Universal Image Component
+ *
+ * Provides consistent image handling across the app with theme integration
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Basic image display with consistent styling
+ *
+ * Usage:
+ * - Profile pictures
+ * - Product images
+ * - Icons and illustrations
+ * - Background images
+ */
+import React from 'react';
+import { ImageProps, ViewStyle } from 'react-native';
+export interface AtomicImageProps extends Omit<ImageProps, 'style'> {
+    /** Image source */
+    source: ImageProps['source'];
+    /** Size variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** Shape variant */
+    shape?: 'square' | 'circle' | 'rounded';
+    /** Border radius override */
+    borderRadius?: number;
+    /** Container style override */
+    style?: ViewStyle | ViewStyle[];
+    /** Image style override */
+    imageStyle?: ImageProps['style'];
+    /** Background color */
+    backgroundColor?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Border width */
+    borderWidth?: number;
+}
+export declare const AtomicImage: React.FC<AtomicImageProps>;
+export default AtomicImage;
+//# sourceMappingURL=AtomicImage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicImage.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicImage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,UAAU,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AAOxE,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IACjE,mBAAmB;IACnB,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACxC,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,2BAA2B;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACjC,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmBD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8ClD,CAAC;AAwCF,eAAe,WAAW,CAAC"}

package/lib/presentation/atoms/AtomicImage.js

@@ -0,0 +1,92 @@
+/**
+ * AtomicImage - Universal Image Component
+ *
+ * Provides consistent image handling across the app with theme integration
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Basic image display with consistent styling
+ *
+ * Usage:
+ * - Profile pictures
+ * - Product images
+ * - Icons and illustrations
+ * - Background images
+ */
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+// =============================================================================
+// SIZE CONFIGURATION
+// =============================================================================
+const SIZE_CONFIG = {
+    xs: 24,
+    sm: 32,
+    md: 48,
+    lg: 64,
+    xl: 96,
+    xxl: 128,
+};
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicImage = ({ source, size = 'md', shape = 'rounded', borderRadius, style, imageStyle, backgroundColor, borderColor, borderWidth = 0, ...props }) => {
+    const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
+    const imageSize = SIZE_CONFIG[size];
+    const calculatedBorderRadius = borderRadius ?? getBorderRadius(shape, imageSize, tokens);
+    const containerStyle = [
+        styles.container,
+        {
+            width: imageSize,
+            height: imageSize,
+            borderRadius: calculatedBorderRadius,
+            backgroundColor: backgroundColor || tokens.colors.surface,
+            borderColor: borderColor || tokens.colors.border,
+            borderWidth,
+        },
+        style,
+    ];
+    const finalImageStyle = [
+        styles.image,
+        {
+            borderRadius: calculatedBorderRadius,
+        },
+        imageStyle,
+    ];
+    return (<Image source={source} style={finalImageStyle} {...props}/>);
+};
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+const getBorderRadius = (shape, size, tokens) => {
+    switch (shape) {
+        case 'circle':
+            return size / 2;
+        case 'square':
+            return 0;
+        case 'rounded':
+        default:
+            return tokens.borders.radius.md;
+    }
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens) => StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        resizeMode: 'cover',
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicImage;
+//# sourceMappingURL=AtomicImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicImage.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicImage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAc,UAAU,EAAa,MAAM,cAAc,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AA2BjE,gFAAgF;AAChF,qBAAqB;AACrB,gFAAgF;AAEhF,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,GAAG,EAAE,GAAG;CACA,CAAC;AAEX,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,MAAM,EACN,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,YAAY,EACZ,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,WAAW,GAAG,CAAC,EACf,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAEjC,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,sBAAsB,GAAG,YAAY,IAAI,eAAe,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAEzF,MAAM,cAAc,GAAG;QACrB,MAAM,CAAC,SAAS;QAChB;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,YAAY,EAAE,sBAAsB;YACpC,eAAe,EAAE,eAAe,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO;YACzD,WAAW,EAAE,WAAW,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM;YAChD,WAAW;SACZ;QACD,KAAK;KACN,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB,MAAM,CAAC,KAAK;QACZ;YACE,YAAY,EAAE,sBAAsB;SACrC;QACD,UAAU;KACX,CAAC;IAEF,OAAO,CACL,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,eAAe,CAAC,CACvB,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,mBAAmB;AACnB,gFAAgF;AAEhF,MAAM,eAAe,GAAG,CAAC,KAAgC,EAAE,IAAY,EAAE,MAA6C,EAAU,EAAE;IAChI,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,QAAQ;YACX,OAAO,IAAI,GAAG,CAAC,CAAC;QAClB,KAAK,QAAQ;YACX,OAAO,CAAC,CAAC;QACX,KAAK,SAAS,CAAC;QACf;YACE,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;IACpC,CAAC;AACH,CAAC,CAAC;AAEF,gFAAgF;AAChF,SAAS;AACT,gFAAgF;AAEhF,MAAM,SAAS,GAAG,CAAC,MAA6C,EAAE,EAAE,CAClE,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,QAAQ,EAAE,QAAQ;QAClB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,OAAO;KACpB;CACF,CAAC,CAAC;AAEL,gFAAgF;AAChF,UAAU;AACV,gFAAgF;AAEhF,eAAe,WAAW,CAAC"}