@umituz/react-native-design-system 1.3.1 → 1.3.3

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

@@ -0,0 +1,53 @@
+/**
+ * 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 { ViewStyle } from 'react-native';
+export interface AtomicChipProps {
+    /** Text content of the chip */
+    children: React.ReactNode;
+    /** Chip variant */
+    variant?: 'filled' | 'outlined' | 'soft';
+    /** Chip size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Chip color theme */
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    /** Custom background color */
+    backgroundColor?: string;
+    /** Custom text color */
+    textColor?: string;
+    /** Custom border color */
+    borderColor?: string;
+    /** Leading icon */
+    leadingIcon?: string;
+    /** Trailing icon */
+    trailingIcon?: string;
+    /** Whether the chip is clickable */
+    clickable?: boolean;
+    /** Click handler */
+    onPress?: () => void;
+    /** Whether the chip is selected */
+    selected?: boolean;
+    /** Whether the chip is disabled */
+    disabled?: boolean;
+    /** Style overrides */
+    style?: ViewStyle;
+    /** Test ID for testing */
+    testID?: string;
+}
+export declare const AtomicChip: React.FC<AtomicChipProps>;
+export default AtomicChip;
+//# sourceMappingURL=AtomicChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicChip.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicChip.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAoB,MAAM,cAAc,CAAC;AAS7E,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,gBAAgB;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC3E,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwJhD,CAAC;AAMF,eAAe,UAAU,CAAC"}

package/lib/presentation/atoms/AtomicChip.js

@@ -0,0 +1,131 @@
+/**
+ * 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 '../hooks/useAppDesignTokens';
+// =============================================================================
+// 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;
+//# sourceMappingURL=AtomicChip.js.map

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

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

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

@@ -0,0 +1,75 @@
+/**
+ * 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 from 'react';
+/**
+ * Props for AtomicDatePicker component
+ */
+export interface AtomicDatePickerProps {
+    /** Selected date value */
+    value: Date;
+    /** Callback when date changes */
+    onChange: (date: Date) => void;
+    /** Optional label displayed above picker */
+    label?: string;
+    /** Optional error message displayed below picker */
+    error?: string;
+    /** Disable picker interaction */
+    disabled?: boolean;
+    /** Minimum selectable date */
+    minimumDate?: Date;
+    /** Maximum selectable date */
+    maximumDate?: Date;
+    /** Picker mode - date, time, or datetime (iOS only) */
+    mode?: 'date' | 'time' | 'datetime';
+    /** Placeholder text when no value selected */
+    placeholder?: string;
+    /** Optional test ID for E2E testing */
+    testID?: string;
+}
+/**
+ * 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 declare const AtomicDatePicker: React.FC<AtomicDatePickerProps>;
+//# sourceMappingURL=AtomicDatePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicDatePicker.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicDatePicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAexC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,0BAA0B;IAC1B,KAAK,EAAE,IAAI,CAAC;IACZ,iCAAiC;IACjC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyK5D,CAAC"}

package/lib/presentation/atoms/AtomicDatePicker.js

@@ -0,0 +1,246 @@
+/**
+ * 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 '../hooks/useAppDesignTokens';
+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,
+        },
+    });
+};
+//# sourceMappingURL=AtomicDatePicker.js.map

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

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

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

@@ -0,0 +1,45 @@
+/**
+ * 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 { ViewStyle } from 'react-native';
+export interface AtomicDividerProps {
+    /** Divider orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Divider thickness */
+    thickness?: 'thin' | 'medium' | 'thick';
+    /** Divider color */
+    color?: string;
+    /** Divider length (for horizontal: width, for vertical: height) */
+    length?: number | string;
+    /** Margin around the divider */
+    margin?: number;
+    /** Margin top */
+    marginTop?: number;
+    /** Margin bottom */
+    marginBottom?: number;
+    /** Margin left */
+    marginLeft?: number;
+    /** Margin right */
+    marginRight?: number;
+    /** Style overrides */
+    style?: ViewStyle;
+    /** Test ID for testing */
+    testID?: string;
+}
+export declare const AtomicDivider: React.FC<AtomicDividerProps>;
+export default AtomicDivider;
+//# sourceMappingURL=AtomicDivider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicDivider.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicDivider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAO3D,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqDtD,CAAC;AAMF,eAAe,aAAa,CAAC"}

package/lib/presentation/atoms/AtomicDivider.js

@@ -0,0 +1,58 @@
+/**
+ * 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 '../hooks/useAppDesignTokens';
+// =============================================================================
+// 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;
+//# sourceMappingURL=AtomicDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicDivider.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicDivider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAyB,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AA+BjE,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,YAAY,EACZ,UAAU,EACV,WAAW,EACX,KAAK,EACL,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,oBAAoB;IACpB,MAAM,YAAY,GAAG;QACnB,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,CAAC;KACT,CAAC;IAEF,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC;IAEnD,wDAAwD;IACxD,MAAM,WAAW,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEjG,+BAA+B;IAC/B,MAAM,SAAS,GAAc;QAC3B,eAAe,EAAE,YAAY;QAC7B,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,SAAS;QACpB,YAAY,EAAE,YAAY;QAC1B,UAAU,EAAE,UAAU;QACtB,WAAW,EAAE,WAAW;KACzB,CAAC;IAEF,yDAAyD;IACzD,MAAM,gBAAgB,GAAc,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC;QAClE,KAAK,EAAE,WAAiC;QACxC,MAAM,EAAE,gBAAgB;KACzB,CAAC,CAAC,CAAC;QACF,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,WAAkC;KAC3C,CAAc,CAAC;IAEhB,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,gBAAgB,EAAE,KAAK,CAAC,CAAC,CAC5C,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,UAAU;AACV,gFAAgF;AAEhF,eAAe,aAAa,CAAC"}