@umituz/react-native-design-system 2.8.34 → 2.8.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.34",
+  "version": "2.8.35",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/molecules/alerts/AlertBanner.tsx

@@ -3,9 +3,10 @@
  *
  * Displays a banner-style alert at the top or bottom of the screen.
  * Full-width notification bar for important messages.
+ * Auto-dismisses after duration (default 3 seconds).
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import { useSafeAreaInsets } from '../../safe-area';
 import { AtomicText, AtomicIcon } from '../../atoms';
@@ -13,6 +14,8 @@ import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType, AlertPosition } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
 
+const DEFAULT_DURATION = 3000;
+
 interface AlertBannerProps {
     alert: Alert;
 }
@@ -23,12 +26,19 @@ export function AlertBanner({ alert }: AlertBannerProps) {
     const tokens = useAppDesignTokens();
 
     const handleDismiss = () => {
-        if (alert.dismissible) {
-            dismissAlert(alert.id);
-            alert.onDismiss?.();
-        }
+        dismissAlert(alert.id);
+        alert.onDismiss?.();
     };
 
+    // Auto-dismiss after duration
+    useEffect(() => {
+        const duration = alert.duration ?? DEFAULT_DURATION;
+        if (duration > 0) {
+            const timer = setTimeout(handleDismiss, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [alert.id, alert.duration]);
+
     const getBackgroundColor = (type: AlertType): string => {
         switch (type) {
             case AlertType.SUCCESS:

package/src/molecules/alerts/AlertToast.tsx

@@ -5,13 +5,15 @@
  * Floats on top of content.
  */
 
-import React from 'react';
+import React, { useEffect } 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';
 
+const DEFAULT_DURATION = 3000;
+
 interface AlertToastProps {
     alert: Alert;
 }
@@ -20,13 +22,26 @@ export function AlertToast({ alert }: AlertToastProps) {
     const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const tokens = useAppDesignTokens();
 
+    const dismiss = () => {
+        dismissAlert(alert.id);
+        alert.onDismiss?.();
+    };
+
     const handleDismiss = () => {
         if (alert.dismissible) {
-            dismissAlert(alert.id);
-            alert.onDismiss?.();
+            dismiss();
         }
     };
 
+    // Auto-dismiss after duration
+    useEffect(() => {
+        const duration = alert.duration ?? DEFAULT_DURATION;
+        if (duration > 0) {
+            const timer = setTimeout(dismiss, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [alert.id, alert.duration]);
+
     const getBackgroundColor = (type: AlertType): string => {
         const colors = {
             [AlertType.SUCCESS]: tokens.colors.success,
@@ -125,7 +140,7 @@ export function AlertToast({ alert }: AlertToastProps) {
                                 onPress={async () => {
                                     await action.onPress();
                                     if (action.closeOnPress ?? true) {
-                                        handleDismiss();
+                                        dismiss();
                                     }
                                 }}
                                 style={[

package/src/molecules/filter-group/FilterGroup.tsx

@@ -22,7 +22,7 @@ export function FilterGroup<T = string>({
     },
     content: {
       paddingHorizontal: tokens.spacing.md,
-      gap: tokens.spacing.sm,
+      gap: tokens.spacing.md,
       alignItems: 'center',
     },
     item: {

package/src/molecules/navigation/types.ts

@@ -3,10 +3,7 @@ import type {
   BottomTabNavigationOptions,
   BottomTabScreenProps,
 } from "@react-navigation/bottom-tabs";
-import type {
-  StackNavigationOptions,
-  StackScreenProps,
-} from "@react-navigation/stack";
+import type { StackNavigationOptions } from "@react-navigation/stack";
 import type { IconName } from "../../atoms/AtomicIcon";
 
 export type NavigationParams = Record<string, unknown>;