@umituz/react-native-design-system 4.27.25 → 4.27.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.27.25",
+  "version": "4.27.27",
   "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, onboarding, and loading utilities - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/device/detection/iPadLayoutUtils.ts

@@ -56,10 +56,14 @@ export function getIPadScreenPadding(): number {
 
 /**
  * Get font scale for iPad
+ * Optimized for readability - Apple HIG recommends slightly larger fonts on iPad
+ * but not too large to avoid crowding
  */
 export function getIPadFontScale(): number {
-    if (isIPadPro()) return 1.15;
-    if (isIPad()) return IPAD_LAYOUT_CONFIG.FONT_SCALE;
+    // iPad Pro: Slightly larger fonts for larger screen
+    if (isIPadPro()) return 1.08;
+    // Standard iPad: Minimal scale to avoid crowding
+    if (isIPad()) return 1.03;
     return 1.0;
 }
 

package/src/responsive/config.ts

@@ -65,7 +65,7 @@ export const SIZE_CONSTRAINTS = {
   ICON_MAX_TABLET: 180,          // Maximum icon container for tablets
 
   // Content width constraints
-  CONTENT_MAX_TABLET: 600,       // Maximum content width for tablets
+  CONTENT_MAX_TABLET: 672,       // Maximum content width for tablets (Apple HIG readable width)
 
   // Modal height constraints
   MODAL_MIN_SMALL: 250,         // Minimum modal height for small devices

package/src/responsive/tabbar/tabBarConfig.ts

@@ -16,6 +16,8 @@ const TAB_BAR_CONSTANTS = {
   FAB_SIZE_TABLET: 72,
   FAB_OFFSET_Y_PHONE: -24,
   FAB_OFFSET_Y_TABLET: -28,
+  // iPad Home Indicator padding (iPadOS 15+)
+  HOME_INDICATOR_PADDING: 6,
 } as const;
 
 export interface ResponsiveTabBarConfig {
@@ -39,7 +41,9 @@ export const getResponsiveTabBarHeight = (
       ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
       : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
 
-    const bottomPadding = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM);
+    // iPad: Add extra padding for home indicator (iPadOS 15+)
+    const extraPadding = isTabletDevice ? TAB_BAR_CONSTANTS.HOME_INDICATOR_PADDING : 0;
+    const bottomPadding = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM) + extraPadding;
 
     return baseHeight + bottomPadding;
   } catch {
@@ -59,7 +63,9 @@ export const getResponsiveTabBarConfig = (
       ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
       : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
 
-    const paddingBottom = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM);
+    // iPad: Add extra padding for home indicator (iPadOS 15+)
+    const extraPadding = isTabletSize ? TAB_BAR_CONSTANTS.HOME_INDICATOR_PADDING : 0;
+    const paddingBottom = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM) + extraPadding;
 
     return {
       height: baseHeight + paddingBottom,

package/src/storage/index.ts

@@ -127,6 +127,27 @@ export {
 export { storageService } from './infrastructure/adapters/StorageService';
 export type { StateStorage } from './domain/types/Store';
 
+// =============================================================================
+// ZUSTAND STORAGE - Sync API for Zustand persist middleware
+// =============================================================================
+
+/**
+ * Zustand-compatible storage export
+ *
+ * AsyncStorage natively provides the Promise-based API that Zustand persist expects.
+ * This is a centralized export for all Zustand stores to use.
+ *
+ * @example
+ * import { createStore, zustandStorage } from '@umituz/react-native-design-system/storage';
+ *
+ * createStore({
+ *   persist: true,
+ *   storage: zustandStorage,
+ *   ...
+ * });
+ */
+export { zustandStorage } from './infrastructure/adapters/ZustandStorageAdapter';
+
 // =============================================================================
 // PRESENTATION LAYER - Hooks
 // =============================================================================

package/src/storage/infrastructure/adapters/ZustandStorageAdapter.ts

@@ -0,0 +1,31 @@
+/**
+ * Zustand Storage Adapter
+ *
+ * Provides AsyncStorage in a format compatible with Zustand persist middleware.
+ *
+ * AsyncStorage natively supports the Promise-based API that Zustand expects:
+ * - getItem: (key: string) => Promise<string | null>
+ * - setItem: (key: string, value: string) => Promise<void>
+ * - removeItem: (key: string) => Promise<void>
+ *
+ * This is a centralized export point for Zustand stores throughout the app.
+ *
+ * @example
+ * import { createStore, zustandStorage } from '@umituz/react-native-design-system/storage';
+ *
+ * const store = createStore({
+ *   persist: true,
+ *   storage: zustandStorage,
+ *   ...
+ * });
+ */
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+/**
+ * Zustand-compatible storage export
+ *
+ * AsyncStorage instance that can be used directly with Zustand's persist middleware.
+ * No wrapping needed - AsyncStorage already provides the correct interface.
+ */
+export const zustandStorage = AsyncStorage;