@umituz/react-native-design-system 2.6.22 → 2.6.26

package/README.md

@@ -68,7 +68,7 @@ const MyScreen = () => {
 - `AtomicInput` - Text inputs with validation states (pure RN TextInput)
 - `AtomicTextArea` - Multiline inputs with character counter (pure RN TextInput)
 - `AtomicCard` - Container cards with elevation (pure RN View)
-- `AtomicIcon` - Lucide icons with 1,639 icons
+- `AtomicIcon` - Ionicons with 1,300+ icons
 - `AtomicSwitch` - Toggle switches
 - `AtomicBadge` - Status badges
 - `AtomicProgress` - Progress indicators

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.22",
+  "version": "2.6.26",
   "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",
@@ -107,7 +107,7 @@
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
     "@types/react": "~19.1.10",
-    "@types/react-native": "^0.72.8",
+    "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
     "@umituz/react-native-filesystem": "^2.1.7",

package/src/atoms/AtomicButton.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View, ActivityIndicator } from 'react-native';
+import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
 import { AtomicText } from './AtomicText';
 import { AtomicIcon } from './AtomicIcon';
+import { AtomicSpinner } from './AtomicSpinner';
 import { useAppDesignTokens } from '../theme';
 import type { IconName } from './AtomicIcon';
 
@@ -198,8 +199,8 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
     >
       <View style={styles.content}>
         {loading ? (
-          <ActivityIndicator
-            size="small"
+          <AtomicSpinner
+            size="sm"
             color={iconColor as string}
             style={styles.icon}
           />

package/src/atoms/AtomicIcon.tsx

@@ -11,7 +11,8 @@ import { Ionicons } from "@expo/vector-icons";
 import Svg, { Path } from "react-native-svg";
 import { useAppDesignTokens } from '../theme';
 import {
-  type IconSize as BaseIconSize
+  type IconSize as BaseIconSize,
+  type IoniconsName
 } from "./AtomicIcon.types";
 
 // Re-export IconSize for convenience
@@ -37,8 +38,10 @@ export type IconColor =
   | "textTertiary"
   | "onSurfaceVariant";
 
-// Accept any string for flexibility
-export type IconName = string;
+/**
+ * IconName can be a valid Ionicons name or any string (for custom SVGs)
+ */
+export type IconName = IoniconsName | string;
 
 export interface AtomicIconProps {
   /** Icon name (Ionicons) */

package/src/atoms/AtomicInput.tsx

@@ -28,9 +28,9 @@ export interface AtomicInputProps {
   placeholder?: string;
   /** Helper text below input */
   helperText?: string;
-  /** Leading icon (Lucide icon name) */
+  /** Leading icon (Ionicons name) */
   leadingIcon?: IconName;
-  /** Trailing icon (Lucide icon name) */
+  /** Trailing icon (Ionicons name) */
   trailingIcon?: IconName;
   /** Callback when trailing icon is pressed */
   onTrailingIconPress?: () => void;
@@ -71,7 +71,7 @@ export interface AtomicInputProps {
  *
  * Features:
  * - Pure React Native implementation (no Paper dependency)
- * - Lucide icons for password toggle and custom icons
+ * - Ionicons for password toggle and custom icons
  * - Outlined/filled/flat variants
  * - Error, success, disabled states
  * - Character counter
@@ -228,7 +228,7 @@ export const AtomicInput: React.FC<AtomicInputProps> = ({
             style={styles.trailingIcon}
           >
             <AtomicIcon
-              name={isPasswordVisible ? "EyeOff" : "Eye"}
+              name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
               customSize={sizeConfig.iconSize}
               customColor={iconColor}
             />

package/src/atoms/AtomicText.tsx

@@ -49,7 +49,7 @@ export const AtomicText = ({
   const textType = variant || type;
 
   // Get typography style from tokens
-  const typographyStyle = (tokens.typography as Record<string, any>)[textType];
+  const typographyStyle = tokens.typography[textType as keyof typeof tokens.typography] as TextStyle & { responsiveFontSize?: number };
   
   // Use responsive font size if available
   const fontSize = typographyStyle?.responsiveFontSize || typographyStyle?.fontSize;

package/src/atoms/EmptyState.tsx

@@ -26,7 +26,7 @@ export interface EmptyStateProps {
 }
 
 export const EmptyState: React.FC<EmptyStateProps> = ({
-  icon = 'inbox',
+  icon = 'file-tray-outline',
   title,
   subtitle,
   description,

package/src/molecules/SearchBar/SearchBar.tsx

@@ -3,11 +3,11 @@ import {
     View,
     TextInput,
     TouchableOpacity,
-    ActivityIndicator,
     StyleSheet,
 } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { AtomicSpinner } from '../../atoms/AtomicSpinner';
 import type { SearchBarProps } from './types';
 
 export const SearchBar: React.FC<SearchBarProps> = ({
@@ -83,9 +83,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({
             {(loading || showClear) && (
                 <View style={styles.rightActions}>
                     {loading && (
-                        <ActivityIndicator
-                            size="small"
-                            color={tokens.colors.primary}
+                        <AtomicSpinner
+                            size="sm"
+                            color="primary"
                             style={styles.loader}
                         />
                     )}

package/src/molecules/long-press-menu/domain/entities/MenuAction.ts

@@ -8,7 +8,7 @@ export interface MenuAction {
   /** Unique identifier for the action */
   id: string;
 
-  /** Icon name from ../../../atoms (Lucide icons) */
+  /** Icon name (Ionicons) */
   icon: IconName;
 
   /** Display label for the action */

package/src/molecules/splash/components/SplashScreen.tsx

@@ -4,10 +4,10 @@
  */
 
 import React, { useEffect, useState, useCallback } from "react";
-import { View, Image, StyleSheet, ActivityIndicator } from "react-native";
+import { View, Image, StyleSheet } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "../../../safe-area";
-import { AtomicText } from "../../../atoms";
+import { AtomicText, AtomicSpinner } from "../../../atoms";
 import { useAppDesignTokens } from "../../../theme";
 import type { SplashScreenProps, SplashColors } from "../types";
 import { SPLASH_CONSTANTS } from "../constants";
@@ -126,8 +126,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
 
         {/* Always show loading indicator during initialization */}
         <View style={styles.loadingContainer}>
-          <ActivityIndicator
-            size="large"
+          <AtomicSpinner
+            size="lg"
             color={colors.text}
             style={styles.loadingIndicator}
           />

package/src/theme/core/TokenFactory.ts

@@ -65,7 +65,6 @@ export const createDesignTokens = (
       acc[key as keyof typeof BASE_TOKENS.avatarSizes] = BASE_TOKENS.avatarSizes[key as keyof typeof BASE_TOKENS.avatarSizes] * multiplier;
       return acc;
     }, {} as any),
-    borderRadius,
     radius: borderRadius,
     borders: {
       ...BASE_TOKENS.borders,

package/src/theme/types/ThemeTypes.ts

@@ -44,7 +44,6 @@ export type DesignTokens = {
   iconSizes: BaseTokens['iconSizes'];
   opacity: BaseTokens['opacity'];
   avatarSizes: BaseTokens['avatarSizes'];
-  borderRadius: ResponsiveBorderRadius;
   radius: ResponsiveBorderRadius;
   borders: Borders & {
     card: Borders['card'] & { borderColor: string };