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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.34",
+  "version": "2.8.36",
   "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/atoms/AtomicInput.tsx

@@ -52,6 +52,7 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
   onFocus,
   multiline = false,
   numberOfLines,
+  textContentType,
 }, ref) => {
   const tokens = useAppDesignTokens();
 
@@ -114,7 +115,7 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
       fontSize: sizeConfig.fontSize,
       lineHeight: (sizeConfig.fontSize || 16) * 1.2,
       color: textColor,
-      paddingVertical: 0,
+      paddingVertical: 4,
     },
     leadingIcon ? { paddingLeft: sizeConfig.iconSize + 8 } : undefined,
     (trailingIcon || showPasswordToggle) ? { paddingRight: sizeConfig.iconSize + 8 } : undefined,
@@ -153,6 +154,7 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
           editable={!isDisabled}
           multiline={multiline}
           numberOfLines={numberOfLines}
+          textContentType={textContentType}
           style={textInputStyle}
           onBlur={() => {
             setIsFocused(false);

package/src/atoms/input/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp } from 'react-native';
+import type { StyleProp, TextInputProps } from 'react-native';
 import type { TextStyle, ViewStyle } from 'react-native';
 import type { IconName } from '../AtomicIcon';
 
@@ -67,6 +67,8 @@ export interface AtomicInputProps {
   multiline?: boolean;
   /** Number of lines for multiline input */
   numberOfLines?: number;
+  /** iOS text content type for AutoFill */
+  textContentType?: TextInputProps['textContentType'];
 }
 
 export type { AtomicInputProps as InputProps };

package/src/exports/molecules.ts

@@ -49,6 +49,7 @@ export {
   AlertProvider,
   AlertService,
   useAlert,
+  useAlertStore,
   alertService,
   AlertType,
   AlertMode,

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) return;
+
+        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) return;
+
+        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>;