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

package/lib/presentation/loading/presentation/components/LoadingState.js

@@ -0,0 +1,123 @@
+/**
+ * LoadingState - Dynamic Icon-Based Loading Component
+ *
+ * Universal loading component with configurable emoji/icon support
+ * Inspired by meditation_timer's breathing animation pattern
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
+ * - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
+ * - ✅ Size variants (small, medium, large)
+ * - ✅ Full screen or inline modes
+ * - ✅ Optional loading message
+ * - ✅ Theme-aware styling
+ */
+import React, { useRef, useEffect, useMemo } from 'react';
+import { View, StyleSheet, Animated, Easing, } from 'react-native';
+import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+import { AtomicText } from '../../../atoms/AtomicText';
+const SIZE_CONFIG = {
+    small: {
+        iconSize: 32,
+        showMessage: false,
+        containerPadding: 16,
+    },
+    medium: {
+        iconSize: 48,
+        showMessage: true,
+        containerPadding: 24,
+    },
+    large: {
+        iconSize: 64,
+        showMessage: true,
+        containerPadding: 32,
+    },
+};
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const LoadingState = ({ icon = '⏳', // Default hourglass icon
+message, size = 'large', fullScreen = false, }) => {
+    // ✅ Dynamic theme tokens
+    const tokens = useAppDesignTokens();
+    // Animation ref for breathing effect
+    const scaleAnim = useRef(new Animated.Value(1)).current;
+    // Size configuration
+    const config = SIZE_CONFIG[size];
+    /**
+     * Breathing Animation Effect
+     * Smoothly scales icon from 1 → 1.15 → 1 in continuous loop
+     * Creates calming, natural breathing sensation
+     */
+    useEffect(() => {
+        const breathingAnimation = Animated.loop(Animated.sequence([
+            // Expand (inhale)
+            Animated.timing(scaleAnim, {
+                toValue: 1.15,
+                duration: tokens.animations.slowest,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+            // Contract (exhale)
+            Animated.timing(scaleAnim, {
+                toValue: 1,
+                duration: tokens.animations.slowest,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        breathingAnimation.start();
+        return () => {
+            breathingAnimation.stop();
+        };
+    }, [scaleAnim]);
+    // Dynamic styles based on theme
+    const styles = useMemo(() => getStyles(tokens, config, fullScreen), [tokens, config, fullScreen]);
+    return (<View style={styles.container}>
+      {/* Animated Icon/Emoji */}
+      <Animated.Text style={[
+            styles.icon,
+            {
+                fontSize: config.iconSize,
+                transform: [{ scale: scaleAnim }],
+            },
+        ]}>
+        {icon}
+      </Animated.Text>
+
+      {/* Optional Loading Message */}
+      {config.showMessage && message && (<AtomicText type="bodyMedium" style={styles.message}>
+          {message}
+        </AtomicText>)}
+    </View>);
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens, config, fullScreen) => StyleSheet.create({
+    container: {
+        ...(fullScreen ? {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: tokens.colors.backgroundPrimary,
+        } : {
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: config.containerPadding,
+        }),
+    },
+    icon: {
+        textAlign: 'center',
+        marginBottom: tokens.spacing.md,
+    },
+    message: {
+        color: tokens.colors.textSecondary,
+        textAlign: 'center',
+        marginTop: tokens.spacing.sm,
+        maxWidth: 300,
+    },
+});
+export default LoadingState;
+//# sourceMappingURL=LoadingState.js.map

package/lib/presentation/loading/presentation/components/LoadingState.js.map

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

package/lib/presentation/loading/presentation/hooks/useLoading.d.ts

@@ -0,0 +1,50 @@
+/**
+ * useLoading - Loading State Management Hook
+ *
+ * Centralized hook for managing loading states across the application
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ Simple boolean loading state
+ * - ✅ Message management
+ * - ✅ Icon configuration per context
+ * - ✅ Type-safe loading control
+ */
+export interface LoadingConfig {
+    isLoading: boolean;
+    message?: string;
+    icon?: string;
+}
+export interface UseLoadingReturn {
+    /**
+     * Current loading state
+     */
+    isLoading: boolean;
+    /**
+     * Current loading message
+     */
+    message: string | undefined;
+    /**
+     * Current loading icon
+     */
+    icon: string | undefined;
+    /**
+     * Start loading with optional message and icon
+     */
+    startLoading: (message?: string, icon?: string) => void;
+    /**
+     * Stop loading and clear message
+     */
+    stopLoading: () => void;
+    /**
+     * Update loading message without affecting state
+     */
+    setMessage: (message: string | undefined) => void;
+    /**
+     * Update loading icon without affecting state
+     */
+    setIcon: (icon: string | undefined) => void;
+}
+export declare const useLoading: (initialConfig?: LoadingConfig) => UseLoadingReturn;
+export default useLoading;
+//# sourceMappingURL=useLoading.d.ts.map

package/lib/presentation/loading/presentation/hooks/useLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoading.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/hooks/useLoading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAQH,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IACH,YAAY,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAElD;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC7C;AAMD,eAAO,MAAM,UAAU,GAAI,gBAAgB,aAAa,KAAG,gBA+B1D,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/presentation/loading/presentation/hooks/useLoading.js

@@ -0,0 +1,49 @@
+/**
+ * useLoading - Loading State Management Hook
+ *
+ * Centralized hook for managing loading states across the application
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ Simple boolean loading state
+ * - ✅ Message management
+ * - ✅ Icon configuration per context
+ * - ✅ Type-safe loading control
+ */
+import { useState, useCallback } from 'react';
+// =============================================================================
+// HOOK IMPLEMENTATION
+// =============================================================================
+export const useLoading = (initialConfig) => {
+    const [isLoading, setIsLoading] = useState(initialConfig?.isLoading ?? false);
+    const [message, setMessage] = useState(initialConfig?.message);
+    const [icon, setIcon] = useState(initialConfig?.icon);
+    /**
+     * Start loading with optional message and icon
+     */
+    const startLoading = useCallback((msg, ico) => {
+        setIsLoading(true);
+        if (msg !== undefined)
+            setMessage(msg);
+        if (ico !== undefined)
+            setIcon(ico);
+    }, []);
+    /**
+     * Stop loading and clear message
+     */
+    const stopLoading = useCallback(() => {
+        setIsLoading(false);
+        setMessage(undefined);
+    }, []);
+    return {
+        isLoading,
+        message,
+        icon,
+        startLoading,
+        stopLoading,
+        setMessage,
+        setIcon,
+    };
+};
+export default useLoading;
+//# sourceMappingURL=useLoading.js.map

package/lib/presentation/loading/presentation/hooks/useLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoading.js","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/hooks/useLoading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAiD9C,gFAAgF;AAChF,sBAAsB;AACtB,gFAAgF;AAEhF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,aAA6B,EAAoB,EAAE;IAC5E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,SAAS,IAAI,KAAK,CAAC,CAAC;IAC9E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB,aAAa,EAAE,OAAO,CAAC,CAAC;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,aAAa,EAAE,IAAI,CAAC,CAAC;IAE1E;;OAEG;IACH,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,GAAY,EAAE,GAAY,EAAE,EAAE;QAC9D,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,GAAG,KAAK,SAAS;YAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,SAAS;QACT,OAAO;QACP,IAAI;QACJ,YAAY;QACZ,WAAW;QACX,UAAU;QACV,OAAO;KACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/presentation/molecules/AtomicConfirmationModal.d.ts

@@ -0,0 +1,73 @@
+/**
+ * AtomicConfirmationModal - Universal Confirmation Dialog
+ *
+ * A reusable confirmation modal for destructive and important actions.
+ * Follows Material Design 3 dialog patterns and accessibility guidelines.
+ *
+ * Features:
+ * - Multiple variants (default, destructive, warning, success)
+ * - Configurable text and icons
+ * - Backdrop dismissal
+ * - Full keyboard and screen reader support
+ * - Theme-aware styling
+ *
+ * @example
+ * ```tsx
+ * // Destructive confirmation (delete)
+ * <AtomicConfirmationModal
+ *   visible={showDeleteModal}
+ *   variant="destructive"
+ *   title="Delete Item?"
+ *   message="This action cannot be undone. All data will be permanently deleted."
+ *   confirmText="Delete"
+ *   cancelText="Cancel"
+ *   onConfirm={handleDelete}
+ *   onCancel={() => setShowDeleteModal(false)}
+ * />
+ *
+ * // Generic confirmation
+ * <AtomicConfirmationModal
+ *   visible={showConfirmModal}
+ *   variant="default"
+ *   title="Confirm Action"
+ *   message="Are you sure you want to proceed?"
+ *   onConfirm={handleConfirm}
+ *   onCancel={() => setShowConfirmModal(false)}
+ * />
+ * ```
+ */
+import React from 'react';
+import { AtomicConfirmationModalProps, ConfirmationModalVariant } from './confirmation-modal/types';
+export type { AtomicConfirmationModalProps };
+export type { ConfirmationModalVariant };
+export declare const AtomicConfirmationModal: React.FC<AtomicConfirmationModalProps>;
+/**
+ * Hook for managing confirmation modal state
+ *
+ * @example
+ * ```tsx
+ * const { showConfirmation, confirmationProps } = useConfirmationModal({
+ *   title: 'Delete Item?',
+ *   message: 'This cannot be undone',
+ *   variant: 'destructive',
+ *   onConfirm: handleDelete,
+ * });
+ *
+ * // In JSX
+ * <AtomicConfirmationModal {...confirmationProps} />
+ * <Button onPress={showConfirmation}>Delete</Button>
+ * ```
+ */
+export declare const useConfirmationModal: (config: {
+    title: string;
+    message: string;
+    variant?: ConfirmationModalVariant;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: () => void;
+}) => {
+    showConfirmation: () => void;
+    hideConfirmation: () => void;
+    confirmationProps: AtomicConfirmationModalProps;
+};
+//# sourceMappingURL=AtomicConfirmationModal.d.ts.map

package/lib/presentation/molecules/AtomicConfirmationModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicConfirmationModal.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/AtomicConfirmationModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EACL,4BAA4B,EAC5B,wBAAwB,EACzB,MAAM,4BAA4B,CAAC;AAapC,YAAY,EAAE,4BAA4B,EAAE,CAAC;AAC7C,YAAY,EAAE,wBAAwB,EAAE,CAAC;AAEzC,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAgJ1E,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;;;;CA2BA,CAAC"}

package/lib/presentation/molecules/AtomicConfirmationModal.js

@@ -0,0 +1,172 @@
+/**
+ * AtomicConfirmationModal - Universal Confirmation Dialog
+ *
+ * A reusable confirmation modal for destructive and important actions.
+ * Follows Material Design 3 dialog patterns and accessibility guidelines.
+ *
+ * Features:
+ * - Multiple variants (default, destructive, warning, success)
+ * - Configurable text and icons
+ * - Backdrop dismissal
+ * - Full keyboard and screen reader support
+ * - Theme-aware styling
+ *
+ * @example
+ * ```tsx
+ * // Destructive confirmation (delete)
+ * <AtomicConfirmationModal
+ *   visible={showDeleteModal}
+ *   variant="destructive"
+ *   title="Delete Item?"
+ *   message="This action cannot be undone. All data will be permanently deleted."
+ *   confirmText="Delete"
+ *   cancelText="Cancel"
+ *   onConfirm={handleDelete}
+ *   onCancel={() => setShowDeleteModal(false)}
+ * />
+ *
+ * // Generic confirmation
+ * <AtomicConfirmationModal
+ *   visible={showConfirmModal}
+ *   variant="default"
+ *   title="Confirm Action"
+ *   message="Are you sure you want to proceed?"
+ *   onConfirm={handleConfirm}
+ *   onCancel={() => setShowConfirmModal(false)}
+ * />
+ * ```
+ */
+import React from 'react';
+import { View, Modal, TouchableOpacity } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useLocalization } from '@umituz/react-native-localization';
+import { AtomicText } from '../atoms/AtomicText';
+import { AtomicButton } from '../atoms/AtomicButton';
+import { AtomicIcon } from '../atoms/AtomicIcon';
+import { getVariantConfig, getModalOverlayStyle, getBackdropStyle, getModalContainerStyle, getIconContainerStyle, getTitleContainerStyle, getMessageContainerStyle, getButtonContainerStyle, getButtonStyle, } from './confirmation-modal/styles/confirmationModalStyles';
+export const AtomicConfirmationModal = ({ visible, title, message, variant = 'default', confirmText, cancelText, icon, onConfirm, onCancel, showBackdrop = true, backdropDismissible = true, style, testID = 'atomic-confirmation-modal', }) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+    // Get variant-specific configuration (icon and color only)
+    const variantConfig = getVariantConfig(variant, tokens);
+    // Get locale-aware default text based on variant
+    const getDefaultConfirmText = () => {
+        switch (variant) {
+            case 'destructive':
+                return t('general.delete');
+            case 'warning':
+                return t('general.continue');
+            case 'success':
+            case 'default':
+            default:
+                return t('general.confirm');
+        }
+    };
+    // Determine final text values
+    const finalConfirmText = confirmText || getDefaultConfirmText();
+    const finalCancelText = cancelText || t('general.cancel');
+    // Determine final icon
+    const finalIcon = icon || variantConfig.icon;
+    // Handle backdrop press
+    const handleBackdropPress = () => {
+        if (backdropDismissible) {
+            onCancel();
+        }
+    };
+    return (<Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel} statusBarTranslucent testID={testID}>
+      <View style={getModalOverlayStyle(tokens)}>
+        {/* Backdrop - Tap to dismiss if enabled */}
+        {showBackdrop && (<TouchableOpacity style={getBackdropStyle()} activeOpacity={1} onPress={handleBackdropPress} testID={`${testID}-backdrop`}/>)}
+
+        {/* Modal Container */}
+        <View style={[getModalContainerStyle(tokens), style]}>
+          {/* Icon */}
+          <View style={getIconContainerStyle(tokens)}>
+            <AtomicIcon name={finalIcon} size="xl" color={variantConfig.iconColor} testID={`${testID}-icon`}/>
+          </View>
+
+          {/* Title */}
+          <View style={getTitleContainerStyle(tokens)}>
+            <AtomicText type="titleLarge" style={{
+            color: tokens.colors.textPrimary,
+            textAlign: 'center',
+            fontWeight: tokens.typography.bold,
+        }} testID={`${testID}-title`}>
+              {title}
+            </AtomicText>
+          </View>
+
+          {/* Message */}
+          <View style={getMessageContainerStyle(tokens)}>
+            <AtomicText type="bodyMedium" style={{
+            color: tokens.colors.textSecondary,
+            textAlign: 'center',
+            lineHeight: tokens.typography.bodyMedium.lineHeight,
+        }} testID={`${testID}-message`}>
+              {message}
+            </AtomicText>
+          </View>
+
+          {/* Action Buttons */}
+          <View style={getButtonContainerStyle(tokens)}>
+            {/* Cancel Button */}
+            <AtomicButton variant="outline" size="md" onPress={onCancel} style={getButtonStyle()} testID={`${testID}-cancel-button`}>
+              {finalCancelText}
+            </AtomicButton>
+
+            {/* Confirm Button */}
+            <AtomicButton variant={variant === 'destructive' ? 'primary' : 'primary'} size="md" onPress={onConfirm} style={[
+            getButtonStyle(),
+            ...(variant === 'destructive' ? [{ backgroundColor: tokens.colors.error }] : []),
+            ...(variant === 'warning' ? [{ backgroundColor: tokens.colors.warning }] : []),
+            ...(variant === 'success' ? [{ backgroundColor: tokens.colors.success }] : []),
+        ]} testID={`${testID}-confirm-button`}>
+              {finalConfirmText}
+            </AtomicButton>
+          </View>
+        </View>
+      </View>
+    </Modal>);
+};
+/**
+ * Hook for managing confirmation modal state
+ *
+ * @example
+ * ```tsx
+ * const { showConfirmation, confirmationProps } = useConfirmationModal({
+ *   title: 'Delete Item?',
+ *   message: 'This cannot be undone',
+ *   variant: 'destructive',
+ *   onConfirm: handleDelete,
+ * });
+ *
+ * // In JSX
+ * <AtomicConfirmationModal {...confirmationProps} />
+ * <Button onPress={showConfirmation}>Delete</Button>
+ * ```
+ */
+export const useConfirmationModal = (config) => {
+    const [visible, setVisible] = React.useState(false);
+    const showConfirmation = () => setVisible(true);
+    const hideConfirmation = () => setVisible(false);
+    const handleConfirm = () => {
+        config.onConfirm();
+        hideConfirmation();
+    };
+    const confirmationProps = {
+        visible,
+        title: config.title,
+        message: config.message,
+        variant: config.variant || 'default',
+        confirmText: config.confirmText,
+        cancelText: config.cancelText,
+        onConfirm: handleConfirm,
+        onCancel: hideConfirmation,
+    };
+    return {
+        showConfirmation,
+        hideConfirmation,
+        confirmationProps,
+    };
+};
+//# sourceMappingURL=AtomicConfirmationModal.js.map

package/lib/presentation/molecules/AtomicConfirmationModal.js.map

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

package/lib/presentation/molecules/EmptyState.d.ts

@@ -0,0 +1,41 @@
+/**
+ * EmptyState Molecule - Universal Empty State Display
+ *
+ * Displays icon, title, and subtitle for empty data scenarios
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: Icon + AtomicText + Layout
+ *
+ * Usage:
+ * - Empty lists
+ * - Empty grids
+ * - No search results
+ * - No data states
+ */
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+export interface EmptyStateProps {
+    /** Material icon name */
+    icon: string;
+    /** Icon size (default: xl) */
+    iconSize?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** Main heading text */
+    title: string;
+    /** Descriptive subtitle text */
+    subtitle?: string;
+    /** Custom icon color (default: textTertiary) */
+    iconColor?: string;
+    /** Custom title color (default: textPrimary) */
+    titleColor?: string;
+    /** Custom subtitle color (default: textSecondary) */
+    subtitleColor?: string;
+    /** Container style override */
+    style?: ViewStyle;
+    /** Title style override */
+    titleStyle?: TextStyle;
+    /** Subtitle style override */
+    subtitleStyle?: TextStyle;
+}
+export declare const EmptyState: React.FC<EmptyStateProps>;
+//# sourceMappingURL=EmptyState.d.ts.map

package/lib/presentation/molecules/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/EmptyState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQtE,MAAM,WAAW,eAAe;IAC9B,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC7C,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8ChD,CAAC"}

package/lib/presentation/molecules/EmptyState.js

@@ -0,0 +1,68 @@
+/**
+ * EmptyState Molecule - Universal Empty State Display
+ *
+ * Displays icon, title, and subtitle for empty data scenarios
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: Icon + AtomicText + Layout
+ *
+ * Usage:
+ * - Empty lists
+ * - Empty grids
+ * - No search results
+ * - No data states
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '../atoms';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const EmptyState = ({ icon, iconSize = 'xl', title, subtitle, iconColor, titleColor, subtitleColor, style, titleStyle, subtitleStyle, }) => {
+    const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
+    return (<View style={[styles.container, style]}>
+      <AtomicIcon name={icon} size={iconSize} customColor={iconColor || tokens.colors.textSecondary}/>
+      <AtomicText type="headlineMedium" color={titleColor || tokens.colors.textPrimary} style={StyleSheet.flatten([
+            styles.title,
+            titleStyle,
+        ])}>
+        {title}
+      </AtomicText>
+      {subtitle && (<AtomicText type="bodyMedium" color={subtitleColor || tokens.colors.textSecondary} style={StyleSheet.flatten([
+                styles.subtitle,
+                subtitleStyle,
+            ])}>
+          {subtitle}
+        </AtomicText>)}
+    </View>);
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens) => StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: tokens.spacing.xl,
+        paddingHorizontal: tokens.spacing.lg,
+    },
+    title: {
+        fontSize: tokens.typography.headingMedium.fontSize,
+        fontWeight: tokens.typography.headingMedium.fontWeight,
+        marginTop: tokens.spacing.md,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: tokens.typography.bodySmall.fontSize,
+        marginTop: tokens.spacing.xs,
+        textAlign: 'center',
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================
+//# sourceMappingURL=EmptyState.js.map

package/lib/presentation/molecules/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/presentation/molecules/EmptyState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AA6BjE,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,IAAI,EACJ,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EACb,KAAK,EACL,UAAU,EACV,aAAa,GACd,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAEjC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,WAAW,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,EAExD;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,gBAAgB,CACrB,KAAK,CAAC,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAC/C,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;YACxB,MAAM,CAAC,KAAK;YACZ,UAAU;SACX,CAAC,CAAC,CAEH;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,QAAQ,IAAI,CACX,CAAC,UAAU,CACT,IAAI,CAAC,YAAY,CACjB,KAAK,CAAC,CAAC,aAAa,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CACpD,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;gBACxB,MAAM,CAAC,QAAQ;gBACf,aAAa;aACd,CAAC,CAAC,CAEH;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,UAAU,CAAC,CACd,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,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,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;QAClC,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;KACrC;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ;QAClD,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU;QACtD,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;QAC5B,SAAS,EAAE,QAAQ;KACpB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ;QAC9C,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;QAC5B,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC;AAEL,gFAAgF;AAChF,UAAU;AACV,gFAAgF"}

package/lib/presentation/molecules/FormField.d.ts

@@ -0,0 +1,22 @@
+/**
+ * FormField Molecule - Complete Form Input with Label and Error
+ *
+ * Combines AtomicText (label/error) + AtomicInput (field)
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicText + AtomicInput
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { AtomicInputProps } from '../atoms/AtomicInput';
+export interface FormFieldProps extends Omit<AtomicInputProps, 'state' | 'label'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    containerStyle?: ViewStyle;
+    style?: ViewStyle;
+}
+export declare const FormField: React.FC<FormFieldProps>;
+//# sourceMappingURL=FormField.d.ts.map

package/lib/presentation/molecules/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/FormField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAe,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAMrE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAMD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8D9C,CAAC"}