@umituz/react-native-design-system 2.3.4 → 2.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.4",
+  "version": "2.3.7",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -63,7 +63,9 @@
     "react-native-svg": ">=15.0.0",
     "zustand": ">=5.0.0",
     "expo-device": ">=5.0.0",
-    "expo-application": ">=5.0.0"
+    "expo-application": ">=5.0.0",
+    "@umituz/react-native-uuid": "latest",
+    "expo-crypto": ">=13.0.0"
   },
   "peerDependenciesMeta": {
     "expo-linear-gradient": {
@@ -107,7 +109,9 @@
     "zustand": "^5.0.2",
     "expo-device": "~7.0.2",
     "expo-application": "~5.9.1",
-    "expo-localization": "~16.0.1"
+    "expo-localization": "~16.0.1",
+    "@umituz/react-native-uuid": "latest",
+    "expo-crypto": "~14.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/atoms/AtomicInput.tsx

@@ -60,6 +60,10 @@ export interface AtomicInputProps {
   onBlur?: () => void;
   /** Focus callback */
   onFocus?: () => void;
+  /** Multiline input support */
+  multiline?: boolean;
+  /** Number of lines for multiline input */
+  numberOfLines?: number;
 }
 
 /**
@@ -99,6 +103,8 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
   testID,
   onBlur,
   onFocus,
+  multiline = false,
+  numberOfLines,
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -202,6 +208,8 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
           autoCapitalize={autoCapitalize}
           autoCorrect={autoCorrect}
           editable={!isDisabled}
+          multiline={multiline}
+          numberOfLines={numberOfLines}
           style={textInputStyle}
           onBlur={() => {
             setIsFocused(false);

package/src/index.ts

@@ -243,10 +243,25 @@ export {
   Grid,
   List,
   Container,
+  // Alerts
+  AlertBanner,
+  AlertToast,
+  AlertInline,
+  AlertModal,
+  AlertContainer,
+  AlertProvider,
+  useAlert,
+  alertService,
+  AlertType,
+  AlertMode,
+  AlertPosition,
   type BaseModalProps,
   type GridProps,
   type ListProps,
   type ContainerProps,
+  type Alert,
+  type AlertAction,
+  type AlertOptions,
 } from './molecules';
 
 // =============================================================================

package/src/molecules/alerts/AlertBanner.tsx

@@ -0,0 +1,188 @@
+/**
+ * AlertBanner Component
+ *
+ * Displays a banner-style alert at the top or bottom of the screen.
+ * Full-width notification bar for important messages.
+ */
+
+import React from 'react';
+import { StyleSheet, View, Pressable } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AtomicText, AtomicIcon } from '../../atoms';
+import { useAppDesignTokens } from '../../theme';
+import { Alert, AlertType, AlertPosition } from './AlertTypes';
+import { useAlertStore } from './AlertStore';
+
+interface AlertBannerProps {
+    alert: Alert;
+}
+
+export function AlertBanner({ alert }: AlertBannerProps) {
+    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const insets = useSafeAreaInsets();
+    const tokens = useAppDesignTokens();
+
+    const handleDismiss = () => {
+        if (alert.dismissible) {
+            dismissAlert(alert.id);
+            alert.onDismiss?.();
+        }
+    };
+
+    const getBackgroundColor = (type: AlertType): string => {
+        switch (type) {
+            case AlertType.SUCCESS:
+                return tokens.colors.success;
+            case AlertType.ERROR:
+                return tokens.colors.error;
+            case AlertType.WARNING:
+                return tokens.colors.warning;
+            case AlertType.INFO:
+                return tokens.colors.info;
+            default:
+                return tokens.colors.backgroundSecondary;
+        }
+    };
+
+    const backgroundColor = getBackgroundColor(alert.type);
+    const textColor = tokens.colors.textInverse;
+    const isTop = alert.position === AlertPosition.TOP;
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    backgroundColor,
+                    paddingTop: isTop ? insets.top + tokens.spacing.sm : tokens.spacing.sm,
+                    paddingBottom: isTop ? tokens.spacing.sm : insets.bottom + tokens.spacing.sm,
+                    paddingHorizontal: tokens.spacing.md,
+                },
+            ]}
+            testID={alert.testID}
+        >
+            <View style={styles.content}>
+                <View style={styles.row}>
+                    {alert.icon && (
+                        <View style={[styles.iconContainer, { marginRight: tokens.spacing.sm }]}>
+                            <AtomicIcon
+                                name={alert.icon}
+                                customSize={20}
+                                customColor={textColor}
+                            />
+                        </View>
+                    )}
+
+                    <View style={styles.textContainer}>
+                        <AtomicText
+                            type="bodyMedium"
+                            style={[styles.title, { color: textColor }]}
+                            numberOfLines={1}
+                        >
+                            {alert.title}
+                        </AtomicText>
+
+                        {alert.message && (
+                            <AtomicText
+                                type="bodySmall"
+                                style={[
+                                    styles.message,
+                                    { color: textColor, marginTop: tokens.spacing.xs },
+                                ]}
+                                numberOfLines={2}
+                            >
+                                {alert.message}
+                            </AtomicText>
+                        )}
+                    </View>
+
+                    {alert.dismissible && (
+                        <Pressable
+                            onPress={handleDismiss}
+                            style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
+                            hitSlop={8}
+                        >
+                            <AtomicIcon name="close" customSize={20} customColor={textColor} />
+                        </Pressable>
+                    )}
+                </View>
+
+                {alert.actions && alert.actions.length > 0 && (
+                    <View style={[styles.actionsContainer, { marginTop: tokens.spacing.sm }]}>
+                        {alert.actions.map((action) => (
+                            <Pressable
+                                key={action.id}
+                                onPress={async () => {
+                                    await action.onPress();
+                                    if (action.closeOnPress ?? true) {
+                                        handleDismiss();
+                                    }
+                                }}
+                                style={[
+                                    styles.actionButton,
+                                    {
+                                        paddingVertical: tokens.spacing.xs,
+                                        paddingHorizontal: tokens.spacing.sm,
+                                        marginRight: tokens.spacing.xs,
+                                    },
+                                ]}
+                            >
+                                <AtomicText
+                                    type="bodySmall"
+                                    style={[
+                                        styles.actionText,
+                                        { color: textColor },
+                                    ]}
+                                >
+                                    {action.label}
+                                </AtomicText>
+                            </Pressable>
+                        ))}
+                    </View>
+                )}
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    content: {
+        paddingVertical: 4,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    textContainer: {
+        flex: 1,
+    },
+    title: {
+        fontWeight: '700',
+    },
+    message: {
+        opacity: 0.9,
+    },
+    closeButton: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    actionsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    actionButton: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    actionText: {
+        fontWeight: '700',
+        textDecorationLine: 'underline',
+    },
+});

package/src/molecules/alerts/AlertContainer.tsx

@@ -0,0 +1,71 @@
+/**
+ * AlertContainer Component
+ */
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAppDesignTokens } from '../../theme';
+import { useAlertStore } from './AlertStore';
+import { AlertToast } from './AlertToast';
+import { AlertBanner } from './AlertBanner';
+import { AlertModal } from './AlertModal';
+import { AlertMode } from './AlertTypes';
+
+export const AlertContainer: React.FC = () => {
+    const alerts = useAlertStore((state) => state.alerts);
+    const insets = useSafeAreaInsets();
+    const tokens = useAppDesignTokens();
+
+    const toasts = alerts.filter((a) => a.mode === AlertMode.TOAST);
+    const banners = alerts.filter((a) => a.mode === AlertMode.BANNER);
+    const modals = alerts.filter((a) => a.mode === AlertMode.MODAL);
+
+    return (
+        <View style={styles.container} pointerEvents="box-none">
+            {/* Banners at top */}
+            <View style={[styles.bannerContainer, { paddingTop: insets.top }]}>
+                {banners.map((alert) => (
+                    <AlertBanner key={alert.id} alert={alert} />
+                ))}
+            </View>
+
+            {/* Toasts at top or bottom (default top) */}
+            <View style={[
+                styles.toastContainer,
+                {
+                    top: insets.top + (banners.length > 0 ? tokens.spacing.xl * 2 : tokens.spacing.lg),
+                    paddingHorizontal: tokens.spacing.md,
+                }
+            ]}>
+                {toasts.map((alert) => (
+                    <View key={alert.id} style={{ marginBottom: tokens.spacing.sm, width: '100%' }}>
+                        <AlertToast alert={alert} />
+                    </View>
+                ))}
+            </View>
+
+            {/* Modals on top of everything */}
+            {modals.map((alert) => (
+                <AlertModal key={alert.id} alert={alert} />
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 9999,
+    },
+    bannerContainer: {
+        width: '100%',
+    },
+    toastContainer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 10000,
+    },
+});

package/src/molecules/alerts/AlertInline.tsx

@@ -0,0 +1,66 @@
+/**
+ * AlertInline Component
+ */
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { AtomicText } from '../../atoms';
+import { useAppDesignTokens } from '../../theme';
+import { Alert, AlertType } from './AlertTypes';
+
+interface AlertInlineProps {
+    alert: Alert;
+}
+
+export const AlertInline: React.FC<AlertInlineProps> = ({ alert }) => {
+    const tokens = useAppDesignTokens();
+
+    const getBorderColor = () => {
+        switch (alert.type) {
+            case AlertType.SUCCESS: return tokens.colors.success;
+            case AlertType.ERROR: return tokens.colors.error;
+            case AlertType.WARNING: return tokens.colors.warning;
+            case AlertType.INFO: return tokens.colors.info;
+            default: return tokens.colors.border;
+        }
+    };
+
+    const getBackgroundColor = () => {
+        switch (alert.type) {
+            case AlertType.SUCCESS: return tokens.colors.success + '15';
+            case AlertType.ERROR: return tokens.colors.error + '15';
+            case AlertType.WARNING: return tokens.colors.warning + '15';
+            case AlertType.INFO: return tokens.colors.info + '15';
+            default: return tokens.colors.backgroundSecondary;
+        }
+    };
+
+    return (
+        <View style={[
+            styles.container,
+            {
+                borderColor: getBorderColor(),
+                backgroundColor: getBackgroundColor(),
+                borderRadius: tokens.borders.radius.sm,
+                padding: tokens.spacing.md,
+                marginVertical: tokens.spacing.sm,
+            }
+        ]}>
+            <AtomicText type="bodyMedium" style={{ color: tokens.colors.textPrimary, fontWeight: '700' }}>
+                {alert.title}
+            </AtomicText>
+            {alert.message && (
+                <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: tokens.spacing.xs }}>
+                    {alert.message}
+                </AtomicText>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderWidth: 1,
+        width: '100%',
+    },
+});

package/src/molecules/alerts/AlertModal.tsx

@@ -0,0 +1,125 @@
+/**
+ * AlertModal Component
+ */
+
+import React from 'react';
+import { StyleSheet, View, Modal, Pressable } from 'react-native';
+import { AtomicText, AtomicButton } from '../../atoms';
+import { useAppDesignTokens } from '../../theme';
+import { Alert, AlertType } from './AlertTypes';
+import { useAlertStore } from './AlertStore';
+
+interface AlertModalProps {
+    alert: Alert;
+}
+
+export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
+    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const tokens = useAppDesignTokens();
+
+    const handleClose = () => {
+        dismissAlert(alert.id);
+        alert.onDismiss?.();
+    };
+
+    const getHeaderColor = () => {
+        switch (alert.type) {
+            case AlertType.SUCCESS: return tokens.colors.success;
+            case AlertType.ERROR: return tokens.colors.error;
+            case AlertType.WARNING: return tokens.colors.warning;
+            case AlertType.INFO: return tokens.colors.info;
+            default: return tokens.colors.primary;
+        }
+    };
+
+    return (
+        <Modal
+            visible
+            transparent
+            animationType="fade"
+            onRequestClose={handleClose}
+        >
+            <View style={styles.overlay}>
+                <Pressable
+                    style={styles.backdrop}
+                    onPress={alert.dismissible ? handleClose : undefined}
+                />
+                <View style={[
+                    styles.modal,
+                    {
+                        backgroundColor: tokens.colors.backgroundPrimary,
+                        borderRadius: tokens.borders.radius.lg,
+                        borderWidth: 1,
+                        borderColor: tokens.colors.border,
+                    }
+                ]}>
+                    <View style={[styles.header, { backgroundColor: getHeaderColor() }]}>
+                        <AtomicText type="titleLarge" style={{ color: tokens.colors.textInverse }}>
+                            {alert.title}
+                        </AtomicText>
+                    </View>
+
+                    <View style={[styles.content, { padding: tokens.spacing.lg }]}>
+                        {alert.message && (
+                            <AtomicText type="bodyMedium" style={{ color: tokens.colors.textPrimary, textAlign: 'center' }}>
+                                {alert.message}
+                            </AtomicText>
+                        )}
+
+                        <View style={[styles.actions, { marginTop: tokens.spacing.lg, gap: tokens.spacing.sm }]}>
+                            {alert.actions.map((action) => (
+                                <AtomicButton
+                                    key={action.id}
+                                    title={action.label}
+                                    variant={action.style === 'destructive' ? 'danger' : action.style === 'secondary' ? 'secondary' : 'primary'}
+                                    onPress={async () => {
+                                        await action.onPress();
+                                        if (action.closeOnPress ?? true) {
+                                            handleClose();
+                                        }
+                                    }}
+                                    fullWidth
+                                />
+                            ))}
+                            {alert.actions.length === 0 && (
+                                <AtomicButton
+                                    title="Close"
+                                    onPress={handleClose}
+                                    fullWidth
+                                />
+                            )}
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+    },
+    modal: {
+        width: '100%',
+        maxWidth: 400,
+        overflow: 'hidden',
+    },
+    header: {
+        padding: 20,
+        alignItems: 'center',
+    },
+    content: {
+        alignItems: 'center',
+    },
+    actions: {
+        width: '100%',
+    },
+});

package/src/molecules/alerts/AlertProvider.tsx

@@ -0,0 +1,15 @@
+/**
+ * AlertProvider Component
+ */
+
+import React from 'react';
+import { AlertContainer } from './AlertContainer';
+
+export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    return (
+        <>
+            {children}
+            <AlertContainer />
+        </>
+    );
+};

package/src/molecules/alerts/AlertService.ts

@@ -0,0 +1,57 @@
+/**
+ * Alert Service
+ */
+
+import { generateUUID } from '@umituz/react-native-uuid';
+import { Alert, AlertType, AlertMode, AlertOptions, AlertPosition } from './AlertTypes';
+
+export class AlertService {
+    /**
+     * Creates a base Alert object with defaults
+     */
+    static createAlert(
+        type: AlertType,
+        defaultMode: AlertMode,
+        title: string,
+        message?: string,
+        options?: AlertOptions
+    ): Alert {
+        const id = generateUUID();
+        const mode = options?.mode || defaultMode;
+
+        // Default position based on mode
+        const defaultPosition = mode === AlertMode.BANNER ? AlertPosition.TOP : AlertPosition.TOP;
+
+        return {
+            id,
+            type,
+            mode,
+            title,
+            message,
+            position: options?.position || defaultPosition,
+            icon: options?.icon,
+            actions: options?.actions || [],
+            dismissible: options?.dismissible ?? true,
+            duration: options?.duration,
+            onDismiss: options?.onDismiss,
+            testID: options?.testID,
+            createdAt: Date.now(),
+        };
+    }
+
+    static createSuccessAlert(title: string, message?: string, options?: AlertOptions): Alert {
+        return this.createAlert(AlertType.SUCCESS, AlertMode.TOAST, title, message, options);
+    }
+
+    static createErrorAlert(title: string, message?: string, options?: AlertOptions): Alert {
+        return this.createAlert(AlertType.ERROR, AlertMode.TOAST, title, message, options);
+    }
+
+    static createWarningAlert(title: string, message?: string, options?: AlertOptions): Alert {
+        return this.createAlert(AlertType.WARNING, AlertMode.TOAST, title, message, options);
+    }
+
+    static createInfoAlert(title: string, message?: string, options?: AlertOptions): Alert {
+        return this.createAlert(AlertType.INFO, AlertMode.TOAST, title, message, options);
+    }
+}

package/src/molecules/alerts/AlertStore.ts

@@ -0,0 +1,22 @@
+/**
+ * Alert Store
+ */
+
+import { create } from 'zustand';
+import { Alert } from './AlertTypes';
+
+interface AlertState {
+    alerts: Alert[];
+    addAlert: (alert: Alert) => void;
+    dismissAlert: (id: string) => void;
+    clearAlerts: () => void;
+}
+
+export const useAlertStore = create<AlertState>((set) => ({
+    alerts: [],
+    addAlert: (alert) => set((state) => ({ alerts: [...state.alerts, alert] })),
+    dismissAlert: (id) => set((state) => ({
+        alerts: state.alerts.filter((a) => a.id !== id)
+    })),
+    clearAlerts: () => set({ alerts: [] }),
+}));

package/src/molecules/alerts/AlertToast.tsx

@@ -0,0 +1,215 @@
+/**
+ * AlertToast Component
+ *
+ * Displays a toast-style alert.
+ * Floats on top of content.
+ */
+
+import React from 'react';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { AtomicText, AtomicIcon } from '../../atoms';
+import { useAppDesignTokens } from '../../theme';
+import { Alert, AlertType } from './AlertTypes';
+import { useAlertStore } from './AlertStore';
+
+interface AlertToastProps {
+    alert: Alert;
+}
+
+export function AlertToast({ alert }: AlertToastProps) {
+    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const tokens = useAppDesignTokens();
+
+    const handleDismiss = () => {
+        if (alert.dismissible) {
+            dismissAlert(alert.id);
+            alert.onDismiss?.();
+        }
+    };
+
+    const getBackgroundColor = (type: AlertType): string => {
+        switch (type) {
+            case AlertType.SUCCESS:
+                return tokens.colors.success;
+            case AlertType.ERROR:
+                return tokens.colors.error;
+            case AlertType.WARNING:
+                return tokens.colors.warning;
+            case AlertType.INFO:
+                return tokens.colors.info;
+            default:
+                return tokens.colors.backgroundSecondary;
+        }
+    };
+
+    const getActionButtonStyle = (style: 'primary' | 'secondary' | 'destructive' | undefined): StyleProp<ViewStyle> => {
+        switch (style) {
+            case 'primary':
+                return { backgroundColor: tokens.colors.backgroundPrimary };
+            case 'secondary':
+                return {
+                    backgroundColor: 'transparent',
+                    borderWidth: 1,
+                    borderColor: tokens.colors.textInverse,
+                };
+            case 'destructive':
+                return { backgroundColor: tokens.colors.error };
+            default:
+                return { backgroundColor: tokens.colors.backgroundSecondary };
+        }
+    };
+
+    const getActionTextColor = (style: 'primary' | 'secondary' | 'destructive' | undefined): string => {
+        switch (style) {
+            case 'primary':
+                return tokens.colors.textPrimary;
+            case 'secondary':
+                return tokens.colors.textInverse;
+            case 'destructive':
+                return tokens.colors.textInverse;
+            default:
+                return tokens.colors.textPrimary;
+        }
+    };
+
+    const backgroundColor = getBackgroundColor(alert.type);
+    const textColor = tokens.colors.textInverse;
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    backgroundColor,
+                    padding: tokens.spacing.md,
+                    borderRadius: tokens.borders.radius.md,
+                },
+            ]}
+            testID={alert.testID}
+        >
+            <Pressable onPress={handleDismiss} style={styles.content}>
+                <View style={styles.row}>
+                    {alert.icon && (
+                        <View style={[styles.iconContainer, { marginRight: tokens.spacing.sm }]}>
+                            <AtomicIcon
+                                name={alert.icon}
+                                customSize={20}
+                                customColor={textColor}
+                            />
+                        </View>
+                    )}
+
+                    <View style={styles.textContainer}>
+                        <AtomicText
+                            type="bodyMedium"
+                            style={[styles.title, { color: textColor }]}
+                            numberOfLines={2}
+                        >
+                            {alert.title}
+                        </AtomicText>
+
+                        {alert.message && (
+                            <AtomicText
+                                type="bodySmall"
+                                style={[
+                                    styles.message,
+                                    { color: textColor, marginTop: tokens.spacing.xs },
+                                ]}
+                                numberOfLines={3}
+                            >
+                                {alert.message}
+                            </AtomicText>
+                        )}
+                    </View>
+
+                    {alert.dismissible && (
+                        <Pressable
+                            onPress={handleDismiss}
+                            style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
+                            hitSlop={8}
+                        >
+                            <AtomicIcon name="close" customSize={20} customColor={textColor} />
+                        </Pressable>
+                    )}
+                </View>
+
+                {alert.actions && alert.actions.length > 0 && (
+                    <View style={[styles.actionsContainer, { marginTop: tokens.spacing.sm }]}>
+                        {alert.actions.map((action) => (
+                            <Pressable
+                                key={action.id}
+                                onPress={async () => {
+                                    await action.onPress();
+                                    if (action.closeOnPress ?? true) {
+                                        handleDismiss();
+                                    }
+                                }}
+                                style={[
+                                    styles.actionButton,
+                                    {
+                                        paddingVertical: tokens.spacing.xs,
+                                        paddingHorizontal: tokens.spacing.sm,
+                                        marginRight: tokens.spacing.xs,
+                                        borderRadius: tokens.borders.radius.sm,
+                                    },
+                                    getActionButtonStyle(action.style),
+                                ]}
+                            >
+                                <AtomicText
+                                    type="bodySmall"
+                                    style={[
+                                        styles.actionText,
+                                        { color: getActionTextColor(action.style) },
+                                    ]}
+                                >
+                                    {action.label}
+                                </AtomicText>
+                            </Pressable>
+                        ))}
+                    </View>
+                )}
+            </Pressable>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    content: {
+        flex: 1,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    textContainer: {
+        flex: 1,
+    },
+    title: {
+        fontWeight: '700',
+    },
+    message: {
+        opacity: 0.9,
+    },
+    closeButton: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    actionsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    actionButton: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    actionText: {
+        fontWeight: '700',
+    },
+});

package/src/molecules/alerts/AlertTypes.ts

@@ -0,0 +1,58 @@
+/**
+ * Alert Entity and Types
+ */
+
+export enum AlertType {
+    SUCCESS = 'success',
+    ERROR = 'error',
+    WARNING = 'warning',
+    INFO = 'info',
+}
+
+export enum AlertMode {
+    TOAST = 'toast',
+    BANNER = 'banner',
+    MODAL = 'modal',
+    INLINE = 'inline',
+}
+
+export enum AlertPosition {
+    TOP = 'top',
+    BOTTOM = 'bottom',
+    CENTER = 'center',
+}
+
+export interface AlertAction {
+    id: string;
+    label: string;
+    onPress: () => Promise<void> | void;
+    style?: 'primary' | 'secondary' | 'destructive';
+    closeOnPress?: boolean;
+}
+
+export interface AlertOptions {
+    mode?: AlertMode;
+    duration?: number;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    icon?: string;
+    actions?: AlertAction[];
+    testID?: string;
+    position?: AlertPosition;
+}
+
+export interface Alert {
+    id: string;
+    type: AlertType;
+    mode: AlertMode;
+    title: string;
+    message?: string;
+    position: AlertPosition;
+    icon?: string;
+    actions: AlertAction[];
+    dismissible: boolean;
+    duration?: number;
+    createdAt: number;
+    testID?: string;
+    onDismiss?: () => void;
+}

package/src/molecules/alerts/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Alerts Molecule - Public API
+ */
+
+export * from './AlertTypes';
+export { useAlertStore } from './AlertStore';
+export { AlertService } from './AlertService';
+export { AlertBanner } from './AlertBanner';
+export { AlertToast } from './AlertToast';
+export { AlertInline } from './AlertInline';
+export { AlertModal } from './AlertModal';
+export { AlertContainer } from './AlertContainer';
+export { AlertProvider } from './AlertProvider';
+export { useAlert } from './useAlert';
+
+import { AlertService } from './AlertService';
+import { useAlertStore } from './AlertStore';
+import { AlertOptions } from './AlertTypes';
+
+/**
+ * Convenience alert service for use outside of components
+ */
+export const alertService = {
+    error: (title: string, message?: string, options?: AlertOptions) => {
+        const alert = AlertService.createErrorAlert(title, message, options);
+        useAlertStore.getState().addAlert(alert);
+        return alert.id;
+    },
+    success: (title: string, message?: string, options?: AlertOptions) => {
+        const alert = AlertService.createSuccessAlert(title, message, options);
+        useAlertStore.getState().addAlert(alert);
+        return alert.id;
+    },
+    warning: (title: string, message?: string, options?: AlertOptions) => {
+        const alert = AlertService.createWarningAlert(title, message, options);
+        useAlertStore.getState().addAlert(alert);
+        return alert.id;
+    },
+    info: (title: string, message?: string, options?: AlertOptions) => {
+        const alert = AlertService.createInfoAlert(title, message, options);
+        useAlertStore.getState().addAlert(alert);
+        return alert.id;
+    },
+    dismiss: (id: string) => {
+        useAlertStore.getState().dismissAlert(id);
+    },
+};

package/src/molecules/alerts/useAlert.ts

@@ -0,0 +1,68 @@
+/**
+ * useAlert Hook
+ */
+
+import { useCallback } from 'react';
+import { useAlertStore } from './AlertStore';
+import { AlertService } from './AlertService';
+import { AlertType, AlertMode, AlertOptions } from './AlertTypes';
+
+export interface UseAlertReturn {
+    show: (type: AlertType, mode: AlertMode, title: string, message?: string, options?: AlertOptions) => string;
+    showSuccess: (title: string, message?: string, options?: AlertOptions) => string;
+    showError: (title: string, message?: string, options?: AlertOptions) => string;
+    showWarning: (title: string, message?: string, options?: AlertOptions) => string;
+    showInfo: (title: string, message?: string, options?: AlertOptions) => string;
+    dismissAlert: (id: string) => void;
+    clearAlerts: () => void;
+}
+
+export const useAlert = (): UseAlertReturn => {
+    const { addAlert, dismissAlert, clearAlerts } = useAlertStore();
+
+    const show = useCallback((
+        type: AlertType,
+        mode: AlertMode,
+        title: string,
+        message?: string,
+        options?: AlertOptions
+    ) => {
+        const alert = AlertService.createAlert(type, mode, title, message, options);
+        addAlert(alert);
+        return alert.id;
+    }, [addAlert]);
+
+    const showSuccess = useCallback((title: string, message?: string, options?: AlertOptions) => {
+        const alert = AlertService.createSuccessAlert(title, message, options);
+        addAlert(alert);
+        return alert.id;
+    }, [addAlert]);
+
+    const showError = useCallback((title: string, message?: string, options?: AlertOptions) => {
+        const alert = AlertService.createErrorAlert(title, message, options);
+        addAlert(alert);
+        return alert.id;
+    }, [addAlert]);
+
+    const showWarning = useCallback((title: string, message?: string, options?: AlertOptions) => {
+        const alert = AlertService.createWarningAlert(title, message, options);
+        addAlert(alert);
+        return alert.id;
+    }, [addAlert]);
+
+    const showInfo = useCallback((title: string, message?: string, options?: AlertOptions) => {
+        const alert = AlertService.createInfoAlert(title, message, options);
+        addAlert(alert);
+        return alert.id;
+    }, [addAlert]);
+
+    return {
+        show,
+        showSuccess,
+        showError,
+        showWarning,
+        showInfo,
+        dismissAlert,
+        clearAlerts,
+    };
+};

package/src/molecules/index.ts

@@ -27,3 +27,6 @@ export * from "./StepProgress";
 export { Grid, type GridProps } from './Grid';
 export { List, type ListProps } from './List';
 export { Container, type ContainerProps } from './Container';
+
+// Alerts
+export * from './alerts';

package/src/organisms/ScreenLayout.tsx

@@ -24,10 +24,13 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, type ViewStyle } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { View, ScrollView, StyleSheet, type ViewStyle, RefreshControlProps } from 'react-native';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { Edge } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../theme';
+import { useResponsive } from '../responsive/useResponsive';
+import { getResponsiveMaxWidth } from '../responsive/responsiveSizing';
+import { getResponsiveHorizontalPadding } from '../responsive/responsiveLayout';
 
 /**
  * NOTE: This component now works in conjunction with the SafeAreaProvider
@@ -124,6 +127,20 @@ export interface ScreenLayoutProps {
    */
   accessible?: boolean;
 
+  /**
+   * Enable responsive content width and centering (default: true)
+   */
+  responsiveEnabled?: boolean;
+
+  /**
+   * Maximum content width override
+   */
+  maxWidth?: number;
+
+  /**
+   * RefreshControl component for pull-to-refresh
+   */
+  refreshControl?: React.ReactElement<RefreshControlProps>;
 }
 
 export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
@@ -138,25 +155,41 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   testID,
   hideScrollIndicator = false,
   keyboardAvoiding = false,
+  responsiveEnabled = true,
+  maxWidth,
+  refreshControl,
 }) => {
   // Automatically uses current theme from global store
   const tokens = useAppDesignTokens();
+  const { isTabletDevice } = useResponsive();
+  const insets = useSafeAreaInsets();
+
+  const finalMaxWidth = maxWidth || (responsiveEnabled ? getResponsiveMaxWidth() : undefined);
+  const horizontalPadding = responsiveEnabled ? getResponsiveHorizontalPadding(tokens.spacing.md, insets) : tokens.spacing.md;
+
   const styles = useMemo(() => StyleSheet.create({
     container: {
       flex: 1,
     },
+    responsiveWrapper: {
+      flex: 1,
+      width: '100%',
+      maxWidth: finalMaxWidth,
+      alignSelf: 'center',
+    },
     content: {
       flex: 1,
+      paddingHorizontal: horizontalPadding,
     },
     scrollView: {
       flex: 1,
     },
     scrollContent: {
       flexGrow: 1,
-      paddingHorizontal: tokens.spacing.md,
+      paddingHorizontal: horizontalPadding,
       paddingBottom: tokens.spacing.lg,
     },
-  }), [tokens]);
+  }), [tokens, finalMaxWidth, horizontalPadding]);
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
 
@@ -168,11 +201,13 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
         edges={edges}
         testID={testID}
       >
-        {header}
-        <View style={[styles.content, contentContainerStyle]}>
-          {children}
+        <View style={styles.responsiveWrapper}>
+          {header}
+          <View style={[styles.content, contentContainerStyle]}>
+            {children}
+          </View>
+          {footer}
         </View>
-        {footer}
       </SafeAreaView>
     );
   }
@@ -184,16 +219,19 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
       edges={edges}
       testID={testID}
     >
-      {header}
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
-        showsVerticalScrollIndicator={!hideScrollIndicator}
-        keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
-      >
-        {children}
-      </ScrollView>
-      {footer}
+      <View style={styles.responsiveWrapper}>
+        {header}
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+          showsVerticalScrollIndicator={!hideScrollIndicator}
+          keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
+          refreshControl={refreshControl}
+        >
+          {children}
+        </ScrollView>
+        {footer}
+      </View>
     </SafeAreaView>
   );
 };