@umituz/react-native-design-system 1.5.17 → 1.5.18

package/src/presentation/atoms/AtomicCard.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+export const AtomicCard = ({ variant = 'elevated', padding = 'md', onPress, disabled = false, style, children, testID, }) => {
+    const tokens = useAppDesignTokens();
+    const handlePress = () => {
+        if (onPress && !disabled) {
+            onPress();
+        }
+    };
+    // Map padding to token values
+    const getPaddingValue = () => {
+        const paddingMap = {
+            none: 0,
+            sm: tokens.spacing.sm,
+            md: tokens.spacing.md,
+            lg: tokens.spacing.lg,
+            xl: tokens.spacing.xl,
+        };
+        return paddingMap[padding];
+    };
+    // Get variant styles
+    const getVariantStyle = () => {
+        const baseStyle = {
+            backgroundColor: tokens.colors.surface,
+            borderRadius: tokens.borders.radius.md,
+        };
+        switch (variant) {
+            case 'elevated':
+                return {
+                    ...baseStyle,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.border,
+                };
+            case 'outlined':
+                return {
+                    ...baseStyle,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.border,
+                };
+            case 'flat':
+                return {
+                    ...baseStyle,
+                    borderWidth: 0,
+                };
+            default:
+                return baseStyle;
+        }
+    };
+    const cardStyle = [
+        getVariantStyle(),
+        {
+            padding: getPaddingValue(),
+            opacity: disabled ? 0.5 : 1,
+        },
+        style,
+    ];
+    const cardContent = (<View style={cardStyle} testID={testID}>
+      {children}
+    </View>);
+    // If onPress provided, wrap with pressable
+    if (onPress && !disabled) {
+        return (<Pressable onPress={handlePress}>
+        {cardContent}
+      </Pressable>);
+    }
+    // Otherwise just return static card
+    return cardContent;
+};

package/src/presentation/atoms/AtomicChip.js

@@ -0,0 +1,130 @@
+/**
+ * AtomicChip - Universal Chip/Tag Component
+ *
+ * Displays small tags, labels, or status indicators
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Tag and label display
+ *
+ * Usage:
+ * - Category tags
+ * - Status indicators
+ * - Filter chips
+ * - Skill labels
+ * - Badge displays
+ */
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { AtomicIcon } from './AtomicIcon';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicChip = ({ children, variant = 'filled', size = 'md', color = 'primary', backgroundColor, textColor, borderColor, leadingIcon, trailingIcon, clickable = false, onPress, selected = false, disabled = false, style, testID, }) => {
+    const tokens = useAppDesignTokens();
+    // Size mapping
+    const sizeMap = {
+        sm: {
+            paddingHorizontal: tokens.spacing.sm,
+            paddingVertical: tokens.spacing.xs,
+            fontSize: tokens.typography.bodySmall.fontSize,
+            iconSize: 'xs'
+        },
+        md: {
+            paddingHorizontal: tokens.spacing.md,
+            paddingVertical: tokens.spacing.sm,
+            fontSize: tokens.typography.bodyMedium.fontSize,
+            iconSize: 'sm'
+        },
+        lg: {
+            paddingHorizontal: tokens.spacing.md,
+            paddingVertical: tokens.spacing.sm,
+            fontSize: tokens.typography.bodyLarge.fontSize,
+            iconSize: 'sm'
+        },
+    };
+    const sizeConfig = sizeMap[size];
+    // Color mapping
+    const colorMap = {
+        primary: {
+            filled: { bg: tokens.colors.primary, text: tokens.colors.onPrimary, border: tokens.colors.primary },
+            outlined: { bg: 'transparent', text: tokens.colors.primary, border: tokens.colors.primary },
+            soft: { bg: tokens.colors.primaryContainer, text: tokens.colors.onPrimaryContainer, border: 'transparent' },
+        },
+        secondary: {
+            filled: { bg: tokens.colors.secondary, text: tokens.colors.onSecondary, border: tokens.colors.secondary },
+            outlined: { bg: 'transparent', text: tokens.colors.secondary, border: tokens.colors.secondary },
+            soft: { bg: tokens.colors.secondaryContainer, text: tokens.colors.onSecondaryContainer, border: 'transparent' },
+        },
+        success: {
+            filled: { bg: tokens.colors.success, text: tokens.colors.onSuccess, border: tokens.colors.success },
+            outlined: { bg: 'transparent', text: tokens.colors.success, border: tokens.colors.success },
+            soft: { bg: tokens.colors.successContainer, text: tokens.colors.onSuccessContainer, border: 'transparent' },
+        },
+        warning: {
+            filled: { bg: tokens.colors.warning, text: tokens.colors.onWarning, border: tokens.colors.warning },
+            outlined: { bg: 'transparent', text: tokens.colors.warning, border: tokens.colors.warning },
+            soft: { bg: tokens.colors.warningContainer, text: tokens.colors.onWarningContainer, border: 'transparent' },
+        },
+        error: {
+            filled: { bg: tokens.colors.error, text: tokens.colors.onError, border: tokens.colors.error },
+            outlined: { bg: 'transparent', text: tokens.colors.error, border: tokens.colors.error },
+            soft: { bg: tokens.colors.errorContainer, text: tokens.colors.onErrorContainer, border: 'transparent' },
+        },
+        info: {
+            filled: { bg: tokens.colors.info, text: tokens.colors.onInfo, border: tokens.colors.info },
+            outlined: { bg: 'transparent', text: tokens.colors.info, border: tokens.colors.info },
+            soft: { bg: tokens.colors.infoContainer, text: tokens.colors.onInfoContainer, border: 'transparent' },
+        },
+    };
+    const colorConfig = colorMap[color][variant];
+    // Apply custom colors if provided
+    const finalBackgroundColor = backgroundColor || colorConfig.bg;
+    const finalTextColor = textColor || colorConfig.text;
+    const finalBorderColor = borderColor || colorConfig.border;
+    // Handle disabled state
+    const isDisabled = disabled || (!clickable && !onPress);
+    const opacity = isDisabled ? 0.5 : 1;
+    // Handle selected state
+    const selectedStyle = selected ? {
+        borderWidth: tokens.borders.width.medium,
+        borderColor: tokens.colors.primary,
+    } : {};
+    const chipStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: sizeConfig.paddingHorizontal,
+        paddingVertical: sizeConfig.paddingVertical,
+        backgroundColor: finalBackgroundColor,
+        borderRadius: tokens.borders.radius.xl,
+        borderWidth: variant === 'outlined' ? 1 : 0,
+        borderColor: finalBorderColor,
+        opacity,
+        ...selectedStyle,
+    };
+    const textStyle = {
+        fontSize: sizeConfig.fontSize,
+        fontWeight: tokens.typography.medium,
+    };
+    const iconColor = finalTextColor;
+    const content = (<View style={[chipStyle, style]} testID={testID}>
+      {leadingIcon && (<AtomicIcon name={leadingIcon} size={sizeConfig.iconSize} customColor={iconColor} style={{ marginRight: tokens.spacing.xs }}/>)}
+      <AtomicText type="labelMedium" color={finalTextColor} style={textStyle}>
+        {children}
+      </AtomicText>
+      {trailingIcon && (<AtomicIcon name={trailingIcon} size={sizeConfig.iconSize} customColor={iconColor} style={{ marginLeft: tokens.spacing.xs }}/>)}
+    </View>);
+    if (clickable && onPress && !disabled) {
+        return (<TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        {content}
+      </TouchableOpacity>);
+    }
+    return content;
+};
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicChip;

package/src/presentation/atoms/AtomicDatePicker.js

@@ -0,0 +1,245 @@
+/**
+ * AtomicDatePicker Component
+ *
+ * A reusable date picker component that wraps the native date picker
+ * with consistent styling and behavior across platforms.
+ *
+ * Features:
+ * - Platform-specific native pickers (iOS wheel, Android dialog)
+ * - Consistent styling with design tokens
+ * - Locale-aware date/time formatting (native Date methods)
+ * - Timezone-aware (respects device timezone)
+ * - Automatic language integration (native locale support)
+ * - Optional label and error states
+ * - Minimum and maximum date constraints
+ * - Disabled state support
+ * - Theme-aware styling
+ * - Proper keyboard avoidance on iOS
+ *
+ * Usage:
+ * ```tsx
+ * const [selectedDate, setSelectedDate] = useState(new Date());
+ *
+ * <AtomicDatePicker
+ *   value={selectedDate}
+ *   onChange={setSelectedDate}
+ *   label="Birth Date"
+ *   minimumDate={new Date(1900, 0, 1)}
+ *   maximumDate={new Date()}
+ * />
+ * ```
+ *
+ * Platform Behavior:
+ * - iOS: Opens modal with spinner wheel, requires "Done" button
+ * - Android: Opens native dialog, auto-closes on selection
+ *
+ * @module AtomicDatePicker
+ */
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Modal, useWindowDimensions, } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+import { useResponsive } from '../hooks/useResponsive';
+import { AtomicIcon } from './AtomicIcon';
+/**
+ * AtomicDatePicker - Universal date/time picker component
+ *
+ * Wraps @react-native-community/datetimepicker with:
+ * - Theme integration
+ * - Platform-specific modal handling
+ * - Error states
+ * - Disabled states
+ * - Responsive sizing
+ */
+export const AtomicDatePicker = ({ value, onChange, label, error, disabled = false, minimumDate, maximumDate, mode = 'date', placeholder = 'Select date', testID, }) => {
+    const tokens = useAppDesignTokens();
+    const { height } = useWindowDimensions();
+    const insets = useSafeAreaInsets();
+    const { isTabletDevice } = useResponsive();
+    const [show, setShow] = useState(false);
+    /**
+     * Handle date/time change
+     * Universal handler that works across all platforms
+     * Note: event.type can be 'set', 'dismissed', or 'neutralButtonPressed'
+     */
+    const handleChange = (event, selectedDate) => {
+        // Close picker when user confirms or dismisses
+        // iOS: Stays open until "Done" button (handled separately)
+        // Android/Web: Auto-closes on selection
+        if (event.type === 'set' || event.type === 'dismissed') {
+            setShow(false);
+        }
+        // Update value only if date was selected (not dismissed)
+        if (event.type === 'set' && selectedDate) {
+            onChange(selectedDate);
+        }
+    };
+    /**
+     * Format date based on mode
+     * Uses native Date formatting (locale-aware)
+     */
+    const formatDate = (date) => {
+        if (mode === 'time') {
+            // Format time only
+            return date.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        }
+        if (mode === 'datetime') {
+            // Format date + time
+            const dateStr = date.toLocaleDateString([], {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            });
+            const timeStr = date.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            return `${dateStr} ${timeStr}`;
+        }
+        // Format date only
+        return date.toLocaleDateString([], {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    };
+    /**
+     * Determine icon color based on state
+     */
+    const getIconColor = () => {
+        if (disabled)
+            return 'secondary';
+        if (error)
+            return 'error';
+        return 'primary';
+    };
+    const styles = getStyles(tokens, height, insets);
+    return (<View style={styles.container} testID={testID}>
+      {label && (<Text style={styles.label} testID={testID ? `${testID}-label` : undefined}>
+          {label}
+        </Text>)}
+
+      <TouchableOpacity style={[
+            styles.button,
+            error ? styles.buttonError : undefined,
+            disabled ? styles.buttonDisabled : undefined,
+        ]} onPress={() => !disabled && setShow(true)} disabled={disabled} testID={testID ? `${testID}-button` : undefined} accessibilityLabel={label || placeholder} accessibilityRole="button" accessibilityState={{ disabled }}>
+        <AtomicIcon name="calendar" color={getIconColor()} size="md"/>
+        <Text style={[
+            styles.text,
+            disabled ? styles.textDisabled : undefined,
+            error ? styles.textError : undefined,
+        ]}>
+          {value ? formatDate(value) : placeholder}
+        </Text>
+      </TouchableOpacity>
+
+      {error && (<Text style={styles.errorText} testID={testID ? `${testID}-error` : undefined}>
+          {error}
+        </Text>)}
+
+      {/* Universal DatePicker - Works across iOS, Android, Web */}
+      {show && (<Modal transparent animationType={isTabletDevice ? 'fade' : 'slide'} visible={show} onRequestClose={() => setShow(false)}>
+          <TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={() => setShow(false)} accessibilityLabel="Close date picker" accessibilityRole="button">
+            <View style={styles.pickerContainer} onStartShouldSetResponder={() => true}>
+              <DateTimePicker value={value || new Date()} mode={mode} display="spinner" onChange={handleChange} minimumDate={minimumDate} maximumDate={maximumDate} testID={testID ? `${testID}-picker` : undefined}/>
+              <View style={styles.buttonContainer}>
+                <TouchableOpacity style={styles.doneButton} onPress={() => setShow(false)} testID={testID ? `${testID}-done` : undefined} accessibilityLabel="Done" accessibilityRole="button">
+                  <Text style={styles.doneText}>Done</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </TouchableOpacity>
+        </Modal>)}
+    </View>);
+};
+/**
+ * Get component styles based on design tokens
+ */
+const getStyles = (tokens, height, insets) => {
+    // Responsive button sizing based on device height
+    const buttonMinWidth = height <= 667 ? Math.min(height * 0.25, 150) : 200;
+    return StyleSheet.create({
+        container: {
+            marginBottom: tokens.spacing.md,
+        },
+        label: {
+            fontSize: tokens.typography.bodyMedium.fontSize,
+            fontWeight: tokens.typography.semibold,
+            color: tokens.colors.textPrimary,
+            marginBottom: tokens.spacing.sm,
+        },
+        button: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: tokens.colors.surface,
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
+            borderRadius: tokens.borders.radius.lg,
+            paddingHorizontal: tokens.spacing.md,
+            paddingVertical: tokens.spacing.md,
+            gap: tokens.spacing.sm,
+            minHeight: 48, // Apple HIG minimum touch target
+        },
+        buttonError: {
+            borderColor: tokens.colors.error,
+            borderWidth: tokens.borders.width.medium,
+        },
+        buttonDisabled: {
+            backgroundColor: tokens.colors.surfaceDisabled,
+            opacity: tokens.opacity.disabled,
+        },
+        text: {
+            flex: 1,
+            fontSize: tokens.typography.bodyLarge.fontSize,
+            color: tokens.colors.textPrimary,
+        },
+        textDisabled: {
+            color: tokens.colors.textDisabled,
+        },
+        textError: {
+            color: tokens.colors.error,
+        },
+        errorText: {
+            fontSize: tokens.typography.bodySmall.fontSize,
+            color: tokens.colors.error,
+            marginTop: tokens.spacing.xs,
+            marginLeft: tokens.spacing.xs,
+        },
+        modalOverlay: {
+            flex: 1,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            justifyContent: 'flex-start',
+        },
+        pickerContainer: {
+            backgroundColor: tokens.colors.surface,
+            borderTopLeftRadius: tokens.borders.radius.xl,
+            borderTopRightRadius: tokens.borders.radius.xl,
+            paddingTop: tokens.spacing.lg,
+            paddingBottom: Math.max(insets.bottom + tokens.spacing.md, tokens.spacing.xl),
+        },
+        buttonContainer: {
+            alignItems: 'center',
+            marginTop: tokens.spacing.md,
+            paddingHorizontal: tokens.spacing.lg,
+        },
+        doneButton: {
+            backgroundColor: tokens.colors.primary,
+            paddingHorizontal: tokens.spacing.xl,
+            paddingVertical: tokens.spacing.sm,
+            borderRadius: tokens.borders.radius.lg,
+            minWidth: buttonMinWidth,
+            alignItems: 'center',
+            minHeight: 44, // Apple HIG minimum touch target
+        },
+        doneText: {
+            color: tokens.colors.onPrimary,
+            fontSize: tokens.typography.bodyLarge.fontSize,
+            fontWeight: tokens.typography.semibold,
+        },
+    });
+};

package/src/presentation/atoms/AtomicDivider.js

@@ -0,0 +1,57 @@
+/**
+ * AtomicDivider - Universal Divider Component
+ *
+ * Displays horizontal or vertical dividers for content separation
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Content separation and visual hierarchy
+ *
+ * Usage:
+ * - Section separators
+ * - List item dividers
+ * - Card separators
+ * - Menu dividers
+ * - Form field separators
+ */
+import React from 'react';
+import { View } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicDivider = ({ orientation = 'horizontal', thickness = 'thin', color, length, margin, marginTop, marginBottom, marginLeft, marginRight, style, testID, }) => {
+    const tokens = useAppDesignTokens();
+    // Thickness mapping
+    const thicknessMap = {
+        thin: 1,
+        medium: 2,
+        thick: 4,
+    };
+    const dividerThickness = thicknessMap[thickness];
+    const dividerColor = color || tokens.colors.border;
+    // Compute final length values with proper type handling
+    const finalLength = length !== undefined ? length : (orientation === 'horizontal' ? '100%' : 20);
+    // Base styles for all dividers
+    const baseStyle = {
+        backgroundColor: dividerColor,
+        margin: margin,
+        marginTop: marginTop,
+        marginBottom: marginBottom,
+        marginLeft: marginLeft,
+        marginRight: marginRight,
+    };
+    // Orientation-specific styles with explicit type casting
+    const orientationStyle = (orientation === 'horizontal' ? {
+        width: finalLength,
+        height: dividerThickness,
+    } : {
+        width: dividerThickness,
+        height: finalLength,
+    });
+    return (<View style={[baseStyle, orientationStyle, style]} testID={testID}/>);
+};
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicDivider;

package/src/presentation/atoms/AtomicFab.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+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)
+ * - 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, style, testID, accessibilityLabel, }) => {
+    const tokens = useAppDesignTokens();
+    const responsive = useResponsive();
+    const isDisabled = disabled;
+    // 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">
+      <AtomicIcon name={icon} size={iconSize} customColor={variantConfig.iconColor}/>
+    </TouchableOpacity>);
+};

package/src/presentation/atoms/AtomicFilter.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { ScrollView, View, TouchableOpacity } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+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>);
+};