@umituz/react-native-design-system 4.28.11 → 4.28.13

package/src/atoms/button/AtomicButton.tsx

@@ -3,7 +3,7 @@
  * Refactored: Extracted configs, styles, and types
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleProp, ViewStyle, TextStyle, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../AtomicText';
 import { AtomicIcon } from '../icon';
@@ -46,7 +46,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
   const variantStyles = getVariantStyles(variant, tokens);
   const iconColor = variantStyles.text.color;
 
-  const containerStyle: StyleProp<ViewStyle> = [
+  const containerStyle = useMemo<StyleProp<ViewStyle>>(() => [
     buttonStyles.button,
     {
       paddingVertical: config.paddingVertical,
@@ -58,9 +58,9 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
     fullWidth ? buttonStyles.fullWidth : undefined,
     isDisabled ? buttonStyles.disabled : undefined,
     style,
-  ];
+  ], [config, variantStyles.container, fullWidth, isDisabled, style, tokens.borders.radius.md]);
 
-  const buttonTextStyle: StyleProp<TextStyle> = [
+  const buttonTextStyle = useMemo<StyleProp<TextStyle>>(() => [
     {
       fontSize: config.fontSize,
       fontWeight: '600',
@@ -68,17 +68,16 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
     variantStyles.text,
     isDisabled ? buttonStyles.disabledText : undefined,
     textStyle,
-  ];
+  ], [config.fontSize, variantStyles.text, isDisabled, textStyle]);
+
+  const rowReverseStyle = useMemo(() => iconPosition === 'right' ? buttonStyles.rowReverse : undefined, [iconPosition]);
 
   const buttonText = title || children;
   const showIcon = icon;
 
   return (
     <TouchableOpacity
-      style={[
-        containerStyle,
-        iconPosition === 'right' && buttonStyles.rowReverse,
-      ]}
+      style={[containerStyle, rowReverseStyle]}
       onPress={handlePress}
       activeOpacity={activeOpacity}
       disabled={isDisabled}

package/src/atoms/card/AtomicCard.tsx

@@ -5,7 +5,7 @@
  * Replaces InfoCard, MediaCard, and GlowingCard molecules.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   View,
   Pressable,
@@ -58,10 +58,28 @@ const CardContent: React.FC<CardContentProps> = React.memo(({
 }) => {
   const tokens = useAppDesignTokens();
 
+  const badgeStyle = useMemo(() => [
+    cardStyles.badge,
+    { backgroundColor: tokens.colors.primary },
+  ], [cardStyles.badge, tokens.colors.primary]);
+
+  const imageStyle = useMemo(() => [
+    cardStyles.image,
+    { aspectRatio: imageAspectRatio },
+  ], [cardStyles.image, imageAspectRatio]);
+
+  const contentContainerStyle = useMemo(() => ({
+    padding: paddingValue,
+  }), [paddingValue]);
+
+  const leftIconStyle = useMemo(() => ({ marginRight: 8 }), []);
+
+  const rightIconStyle = useMemo(() => ({ marginLeft: 8 }), []);
+
   return (
     <>
       {badge && (
-        <View style={[cardStyles.badge, { backgroundColor: tokens.colors.primary }]}>
+        <View style={badgeStyle}>
           <AtomicText type="labelSmall" color="onPrimary">
             {badge}
           </AtomicText>
@@ -71,7 +89,7 @@ const CardContent: React.FC<CardContentProps> = React.memo(({
       {image && (
         <AtomicImage
           source={typeof image === 'string' ? { uri: image } : image}
-          style={[cardStyles.image, { aspectRatio: imageAspectRatio }]}
+          style={imageStyle}
           contentFit="cover"
         />
       )}
@@ -82,7 +100,7 @@ const CardContent: React.FC<CardContentProps> = React.memo(({
         </View>
       )}
 
-      <View style={{ padding: paddingValue }}>
+      <View style={contentContainerStyle}>
         {(title || leftIcon || rightIcon) && (
           <View style={cardStyles.header}>
             {leftIcon && (
@@ -90,7 +108,7 @@ const CardContent: React.FC<CardContentProps> = React.memo(({
                 name={leftIcon}
                 size="sm"
                 color="primary"
-                style={{ marginRight: 8 }}
+                style={leftIconStyle}
               />
             )}
             <View style={cardStyles.titleContainer}>
@@ -117,7 +135,7 @@ const CardContent: React.FC<CardContentProps> = React.memo(({
                 name={rightIcon}
                 size="sm"
                 color="textSecondary"
-                style={{ marginLeft: 8 }}
+                style={rightIconStyle}
               />
             )}
           </View>
@@ -190,11 +208,11 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
     style,
   ], [tokens.borders.radius.lg, variantStyles.container, selected, tokens.colors.primary, style]);
 
-  const handlePress = (event: GestureResponderEvent) => {
+  const handlePress = useCallback((event: GestureResponderEvent) => {
     if (!disabled && onPress) {
       onPress(event);
     }
-  };
+  }, [disabled, onPress]);
 
   const content = (
     <CardContent

package/src/atoms/datepicker/components/DatePickerButton.tsx

@@ -35,11 +35,11 @@ export const DatePickerButton: React.FC<DatePickerButtonProps> = ({
   const tokens = useAppDesignTokens();
   const calendarIcon = useIconName('calendar');
 
-  const buttonStyles = useMemo(() => StyleSheet.create({
+  const buttonStyles = useMemo(() => ({
     container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      justifyContent: 'space-between' as const,
       paddingHorizontal: tokens.spacing.md,
       paddingVertical: tokens.spacing.sm,
       borderRadius: tokens.borders.radius.md,
@@ -71,18 +71,18 @@ export const DatePickerButton: React.FC<DatePickerButtonProps> = ({
       fontWeight: '500',
     },
     iconContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
       gap: tokens.spacing.xs,
     },
   }), [tokens]);
 
-  const containerStyle = [
+  const containerStyle = useMemo(() => [
     buttonStyles.container,
     error ? buttonStyles.containerError :
       disabled ? buttonStyles.containerDisabled :
         buttonStyles.containerDefault,
-  ];
+  ], [buttonStyles, error, disabled]);
 
   const textStyle = hasValue ? buttonStyles.valueText : buttonStyles.placeholderText;
 

package/src/atoms/datepicker/components/DatePickerModal.tsx

@@ -64,11 +64,11 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  const modalStyles = useMemo(() => StyleSheet.create({
+  const modalStyles = useMemo(() => ({
     overlay: {
       flex: 1,
       backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`,
-      justifyContent: 'flex-end',
+      justifyContent: 'flex-end' as const,
     },
     container: {
       backgroundColor: tokens.colors.surface,
@@ -77,9 +77,9 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
       paddingBottom: insets.bottom,
     },
     header: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
+      flexDirection: 'row' as const,
+      justifyContent: 'space-between' as const,
+      alignItems: 'center' as const,
       paddingHorizontal: tokens.spacing.md,
       paddingVertical: tokens.spacing.sm,
       borderBottomWidth: 1,
@@ -87,7 +87,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
     },
     title: {
       fontSize: tokens.typography.titleLarge.fontSize,
-      fontWeight: '600',
+      fontWeight: '600' as const,
       color: tokens.colors.onSurface,
     },
     doneButton: {
@@ -98,7 +98,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
     },
     doneButtonText: {
       fontSize: tokens.typography.labelMedium.fontSize,
-      fontWeight: '500',
+      fontWeight: '500' as const,
       color: tokens.colors.onPrimary,
     },
   }), [overlayOpacity, tokens, insets.bottom]);

package/src/atoms/fab/styles/fabStyles.ts

@@ -35,27 +35,6 @@ export function getFabSizes(spacingMultiplier: number): Record<'sm' | 'md' | 'lg
   };
 }
 
-/**
- * @deprecated Use getFabSizes(spacingMultiplier) instead
- */
-export const FAB_SIZES: Record<'sm' | 'md' | 'lg', FabSizeConfig> = {
-  sm: {
-    width: BASE_FAB_SIZES.sm,
-    height: BASE_FAB_SIZES.sm,
-    borderRadius: 12,
-  },
-  md: {
-    width: BASE_FAB_SIZES.md,
-    height: BASE_FAB_SIZES.md,
-    borderRadius: 16,
-  },
-  lg: {
-    width: BASE_FAB_SIZES.lg,
-    height: BASE_FAB_SIZES.lg,
-    borderRadius: 20,
-  },
-} as const;
-
 /**
  * Get FAB variant configurations based on design tokens
  * @param tokens - Design tokens from theme

package/src/atoms/icon/index.ts

@@ -1,25 +1,11 @@
 /**
- * @deprecated This icon system is deprecated. Use @umituz/react-native-icons instead.
+ * Icon System - AtomicIcon and Related Utilities
  *
- * **Migration Guide:**
- * ```tsx
- * // Old way (deprecated)
- * import { AtomicIcon } from '@umituz/react-native-design-system/atoms';
- * <AtomicIcon name="User" size={24} color="text" />
- *
- * // New way (recommended)
- * import { Icon } from '@umituz/react-native-icons';
- * <Icon name="User" size={24} color="text" />
- * ```
- *
- * **Benefits of @umituz/react-native-icons:**
- * - ✅ Package-agnostic (works with Lucide, Expo, or custom providers)
- * - ✅ Lazy loading (only configured provider is loaded)
- * - ✅ Automatic name normalization (kebab ↔ PascalCase ↔ camelCase)
- * - ✅ Better performance with caching
- * - ✅ Zero configuration needed in DesignSystemProvider
- *
- * This module is kept for backward compatibility only and will be removed in a future version.
+ * Provides icon components with:
+ * - Configurable icon rendering (Lucide, Expo Vector Icons, custom)
+ * - Size presets (xs, sm, md, lg, xl, xxl) and custom sizes
+ * - Color tokens integration
+ * - Icon name normalization and caching
  */
 
 // Main Component

package/src/atoms/picker/components/PickerModal.tsx

@@ -2,7 +2,7 @@
  * PickerModal - Selection modal for AtomicPicker
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, Modal, FlatList, TextInput, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { useAppDesignTokens } from '../../../theme';
@@ -60,7 +60,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   const insets = useSafeAreaInsets();
   const icons = { checkCircle: useIconName('checkCircle'), search: useIconName('search'), close: useIconName('close'), info: useIconName('info') };
 
-  const styles = {
+  const styles = useMemo(() => ({
     overlay: getModalOverlayStyles(),
     container: getModalContainerStyles(tokens, 0),
     header: getModalHeaderStyles(tokens),
@@ -69,10 +69,18 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
     searchInput: getSearchInputStyles(tokens),
     empty: getEmptyStateStyles(tokens),
     emptyText: getEmptyStateTextStyles(tokens),
-  };
+  }), [tokens]);
 
   const isSelected = useCallback((value: string) => selectedValues?.includes(value) ?? false, [selectedValues]);
 
+  const OPTION_HEIGHT = 56; // Approximate height of each option
+
+  const getItemLayout = useCallback((_: unknown, index: number) => ({
+    length: OPTION_HEIGHT,
+    offset: OPTION_HEIGHT * index,
+    index,
+  }), []);
+
   const renderOption = useCallback(({ item }: { item: PickerOption }) => {
     const selected = isSelected(item.value);
     const disabled = item.disabled || false;
@@ -117,7 +125,19 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
           )}
 
           {filteredOptions.length > 0 ? (
-            <FlatList data={filteredOptions} keyExtractor={(item: PickerOption) => item.value} renderItem={renderOption} showsVerticalScrollIndicator keyboardShouldPersistTaps="handled" testID={`${testID}-list`} />
+            <FlatList
+              data={filteredOptions}
+              keyExtractor={(item: PickerOption) => item.value}
+              renderItem={renderOption}
+              getItemLayout={getItemLayout}
+              windowSize={5}
+              initialNumToRender={10}
+              maxToRenderPerBatch={5}
+              removeClippedSubviews
+              showsVerticalScrollIndicator={false}
+              keyboardShouldPersistTaps="handled"
+              testID={`${testID}-list`}
+            />
           ) : (
             <View style={styles.empty}>
               <AtomicIcon name={icons.info} size="xl" color="secondary" />

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -44,7 +44,7 @@ export interface AtomicSkeletonProps {
 
 /**
  * Skeleton loader component
- * 
+ *
  * Provides visual feedback during content loading with customizable patterns
  */
 const SkeletonItem: React.FC<{
@@ -52,18 +52,16 @@ const SkeletonItem: React.FC<{
   baseColor: string;
   multiplier: number;
 }> = React.memo(({ config, baseColor, multiplier }) => {
-  const itemStyles = useMemo(() => StyleSheet.create({
-    item: {
-      ...styles.skeleton,
-      width: (typeof config.width === 'number' ? config.width * multiplier : config.width) as DimensionValue,
-      height: config.height ? config.height * multiplier : undefined,
-      borderRadius: config.borderRadius ? config.borderRadius * multiplier : undefined,
-      marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
-      backgroundColor: baseColor,
-    },
+  const itemStyle = useMemo<ViewStyle>(() => ({
+    ...styles.skeleton,
+    width: (typeof config.width === 'number' ? config.width * multiplier : config.width) as DimensionValue,
+    height: config.height ? config.height * multiplier : undefined,
+    borderRadius: config.borderRadius ? config.borderRadius * multiplier : undefined,
+    marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
+    backgroundColor: baseColor,
   }), [config, baseColor, multiplier]);
 
-  return <View style={itemStyles.item} />;
+  return <View style={itemStyle} />;
 });
 
 export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({

package/src/carousel/Carousel.tsx

@@ -1,12 +1,13 @@
-import React from "react";
-import { View, StyleSheet, ViewStyle } from "react-native";
+import React, { useCallback, useMemo } from "react";
+import { View, StyleSheet, ViewStyle, FlatList } from "react-native";
 import { useAppDesignTokens } from "../theme";
 import { CarouselScrollView } from "./CarouselScrollView";
 import { CarouselDots } from "./CarouselDots";
 import { CarouselItem } from "./CarouselItem";
 import { useCarouselScroll } from "./useCarouselScroll";
 import { calculateItemWidth } from "./carouselCalculations";
-import type { CarouselProps } from "./types";
+import { useScreenWidth } from "../responsive/useScreenDimensions";
+import type { CarouselProps, CarouselItem as CarouselItemType } from "./types";
 
 export const Carousel = <T,>({
   items,
@@ -19,7 +20,8 @@ export const Carousel = <T,>({
   style,
 }: CarouselProps<T> & { style?: ViewStyle }) => {
   const tokens = useAppDesignTokens();
-  const calculatedItemWidth = itemWidth || calculateItemWidth(spacing);
+  const screenWidth = useScreenWidth(); // Reactive width
+  const calculatedItemWidth = itemWidth || calculateItemWidth(screenWidth, spacing);
 
   const pageWidth = calculatedItemWidth + spacing;
 
@@ -32,26 +34,47 @@ export const Carousel = <T,>({
     return null;
   }
 
+  // Stable key extractor
+  const keyExtractor = useCallback((item: CarouselItemType<T>) => item.id, []);
+
+  // Memoized render item to prevent unnecessary re-renders
+  const renderCarouselItem = useCallback(({ item, index }: { item: CarouselItemType<T>; index: number }) => (
+    <CarouselItem
+      item={item}
+      itemWidth={calculatedItemWidth}
+      renderContent={(itemData) => renderItem(itemData, index)}
+      style={
+        index < items.length - 1 ? { marginRight: spacing } : undefined
+      }
+    />
+  ), [calculatedItemWidth, renderItem, items.length, spacing]);
+
+  // Get item layout for better performance
+  const getItemLayout = useCallback((_: unknown, index: number) => ({
+    length: calculatedItemWidth + spacing,
+    offset: (calculatedItemWidth + spacing) * index,
+    index,
+  }), [calculatedItemWidth, spacing]);
+
+  // Use FlatList for virtualization (renders only visible items)
   return (
     <View style={[styles.container, style]}>
-      <CarouselScrollView
+      <FlatList
+        horizontal
+        data={items}
+        renderItem={renderCarouselItem}
+        keyExtractor={keyExtractor}
+        getItemLayout={getItemLayout}
         onScroll={handleScroll}
         pagingEnabled={pagingEnabled}
-        spacing={spacing}
-        itemWidth={calculatedItemWidth}
-      >
-        {items.map((item, index) => (
-          <CarouselItem
-            key={item.id}
-            item={item}
-            itemWidth={calculatedItemWidth}
-            renderContent={(itemData) => renderItem(itemData, index)}
-            style={
-              index < items.length - 1 ? { marginRight: spacing } : undefined
-            }
-          />
-        ))}
-      </CarouselScrollView>
+        snapToInterval={pageWidth}
+        decelerationRate="fast"
+        showsHorizontalScrollIndicator={false}
+        windowSize={3} // Render 3 screens worth of items
+        initialNumToRender={2} // Start with 2 items
+        maxToRenderPerBatch={2} // Batch rendering
+        removeClippedSubviews
+      />
 
       {showDots && items.length > 1 && (
         <CarouselDots

package/src/carousel/carouselCalculations.ts

@@ -1,9 +1,16 @@
-import { Dimensions } from "react-native";
+/**
+ * Carousel Calculations
+ *
+ * Utility functions for carousel calculations.
+ * Note: Pass screenWidth from useScreenWidth() hook to ensure
+ * reactivity on orientation changes, iPad Split View, etc.
+ */
 
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-
-export const calculateItemWidth = (padding: number = 16): number => {
-  return SCREEN_WIDTH - padding * 2;
+export const calculateItemWidth = (
+  screenWidth: number,
+  padding: number = 16
+): number => {
+  return screenWidth - padding * 2;
 };
 
 export const calculateIndexFromScroll = (
@@ -12,7 +19,3 @@ export const calculateIndexFromScroll = (
 ): number => {
   return Math.round(scrollPosition / itemWidth);
 };
-
-export const getScreenWidth = (): number => {
-  return SCREEN_WIDTH;
-};

package/src/carousel/index.ts

@@ -10,7 +10,6 @@ export { useCarouselScroll } from "./useCarouselScroll";
 export {
   calculateItemWidth,
   calculateIndexFromScroll,
-  getScreenWidth,
 } from "./carouselCalculations";
 
 export { CarouselDots } from "./CarouselDots";

package/src/device/detection/iPadDetection.ts

@@ -3,23 +3,21 @@
  *
  * Uses expo-device for system-level tablet detection,
  * then uses screen dimensions for iPad-specific sub-categories.
+ *
+ * ⚠️ NOTE: These functions use Dimensions.get() which doesn't update on
+ * device rotation, iPad Split View, or Stage Manager. For reactive detection
+ * that updates on dimension changes, consider using useWindowDimensions() hook
+ * directly in your components.
  */
 
 import { Dimensions } from 'react-native';
 import { IPAD_BREAKPOINTS } from './iPadBreakpoints';
 import { isTablet, isLandscape } from './deviceDetection';
 
-/**
- * Detect if the current device is an iPad (or Android tablet)
- * Uses expo-device for accurate system-level detection
- */
 export function isIPad(): boolean {
     return isTablet();
 }
 
-/**
- * Detect if the current device is an iPad mini
- */
 export function isIPadMini(): boolean {
     if (!isIPad()) return false;
 
@@ -28,9 +26,6 @@ export function isIPadMini(): boolean {
     return minWidth < IPAD_BREAKPOINTS.IPAD_AIR;
 }
 
-/**
- * Detect if the current device is an iPad Pro (12.9")
- */
 export function isIPadPro(): boolean {
     if (!isIPad()) return false;
 
@@ -39,10 +34,6 @@ export function isIPadPro(): boolean {
     return minWidth >= IPAD_BREAKPOINTS.IPAD_11_PRO;
 }
 
-/**
- * Check if tablet device is in landscape orientation
- * Uses shared isLandscape detection for consistency
- */
 export function isIPadLandscape(): boolean {
     return isLandscape();
 }