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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.35",
+  "version": "2.8.37",
   "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/AtomicIcon.tsx

@@ -119,28 +119,41 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
     console.warn(`[DesignSystem] Invalid icon name: "${name}". Falling back to "${FALLBACK_ICON}"`);
   }
 
-  const iconElement = svgPath ? (
-    <Svg
-      viewBox={svgViewBox}
-      width={sizeInPixels}
-      height={sizeInPixels}
-      key="custom-svg-icon"
-    >
-      <Path
-        d={svgPath}
-        fill={iconColor}
-      />
-    </Svg>
-  ) : (
+  const iconProps = {
+    testID,
+    accessibilityLabel,
+    style: [
+      !svgPath && {
+        padding: 4, // Prevent font truncation
+        includeFontPadding: false, // Android specific
+      },
+      style,
+    ] as StyleProp<ViewStyle>,
+  };
+
+  if (svgPath) {
+    return (
+      <Svg
+        viewBox={svgViewBox}
+        width={sizeInPixels}
+        height={sizeInPixels}
+        key="custom-svg-icon"
+        {...iconProps}
+      >
+        <Path
+          d={svgPath}
+          fill={iconColor}
+        />
+      </Svg>
+    );
+  }
+
+  const iconElement = (
     <Ionicons
       name={iconName as keyof typeof Ionicons.glyphMap}
       size={sizeInPixels}
       color={iconColor}
-      testID={testID ? `${testID}-icon` : undefined}
-      style={{
-        padding: 4, // Prevent font truncation
-        includeFontPadding: false, // Android specific
-      }}
+      {...iconProps}
     />
   );
 
@@ -168,11 +181,7 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
     );
   }
 
-  return (
-    <View accessibilityLabel={accessibilityLabel} testID={testID} style={style}>
-      {iconElement}
-    </View>
-  );
+  return iconElement;
 });
 
 AtomicIcon.displayName = "AtomicIcon";

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/components/InputIcon.tsx

@@ -19,14 +19,24 @@ export const InputIcon: React.FC<InputIconProps> = ({
   onPress,
   testID,
 }) => {
-  const positionStyle = position === 'leading' ? styles.leadingIcon : styles.trailingIcon;
-  const Wrapper = onPress ? Pressable : View;
-  const wrapperProps = onPress ? { onPress, testID } : {};
+  const style = position === 'leading' ? styles.leadingIcon : styles.trailingIcon;
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} style={style} testID={testID}>
+        <AtomicIcon name={name as any} customSize={size} customColor={color} />
+      </Pressable>
+    );
+  }
 
   return (
-    <Wrapper style={positionStyle} {...wrapperProps}>
-      <AtomicIcon name={name} customSize={size} customColor={color} />
-    </Wrapper>
+    <AtomicIcon 
+      name={name as any} 
+      customSize={size} 
+      customColor={color} 
+      style={style}
+      testID={testID}
+    />
   );
 };
 

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

@@ -33,10 +33,10 @@ export function AlertBanner({ alert }: AlertBannerProps) {
     // Auto-dismiss after duration
     useEffect(() => {
         const duration = alert.duration ?? DEFAULT_DURATION;
-        if (duration > 0) {
-            const timer = setTimeout(handleDismiss, duration);
-            return () => clearTimeout(timer);
-        }
+        if (duration <= 0) return;
+
+        const timer = setTimeout(handleDismiss, duration);
+        return () => clearTimeout(timer);
     }, [alert.id, alert.duration]);
 
     const getBackgroundColor = (type: AlertType): string => {

package/src/molecules/alerts/AlertToast.tsx

@@ -36,10 +36,10 @@ export function AlertToast({ alert }: AlertToastProps) {
     // Auto-dismiss after duration
     useEffect(() => {
         const duration = alert.duration ?? DEFAULT_DURATION;
-        if (duration > 0) {
-            const timer = setTimeout(dismiss, duration);
-            return () => clearTimeout(timer);
-        }
+        if (duration <= 0) return;
+
+        const timer = setTimeout(dismiss, duration);
+        return () => clearTimeout(timer);
     }, [alert.id, alert.duration]);
 
     const getBackgroundColor = (type: AlertType): string => {