@umituz/react-native-design-system 2.6.62 → 2.6.64

package/src/molecules/calendar/infrastructure/stores/useCalendarNavigation.ts

@@ -0,0 +1,47 @@
+/**
+ * Calendar Navigation Store
+ * Manages date navigation state (no persistence needed)
+ */
+
+import { create } from 'zustand';
+
+interface CalendarNavigationState {
+  readonly selectedDate: Date;
+  readonly currentMonth: Date;
+}
+
+interface CalendarNavigationActions {
+  readonly setSelectedDate: (date: Date) => void;
+  readonly goToToday: () => void;
+  readonly navigateMonth: (direction: 'prev' | 'next') => void;
+  readonly setCurrentMonth: (date: Date) => void;
+}
+
+type CalendarNavigationStore = CalendarNavigationState & CalendarNavigationActions;
+
+export const useCalendarNavigation = create<CalendarNavigationStore>()((set) => ({
+  selectedDate: new Date(),
+  currentMonth: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+
+  setSelectedDate: (date) => set({ selectedDate: date }),
+
+  goToToday: () => {
+    const today = new Date();
+    set({
+      selectedDate: today,
+      currentMonth: new Date(today.getFullYear(), today.getMonth(), 1),
+    });
+  },
+
+  navigateMonth: (direction) => {
+    set((state) => {
+      const { currentMonth } = state;
+      const newMonth = direction === 'next' ? currentMonth.getMonth() + 1 : currentMonth.getMonth() - 1;
+      return {
+        currentMonth: new Date(currentMonth.getFullYear(), newMonth, 1),
+      };
+    });
+  },
+
+  setCurrentMonth: (date) => set({ currentMonth: new Date(date.getFullYear(), date.getMonth(), 1) }),
+}));

package/src/molecules/calendar/infrastructure/stores/useCalendarView.ts

@@ -0,0 +1,24 @@
+/**
+ * Calendar View Store
+ * Manages calendar view mode (no persistence needed)
+ */
+
+import { create } from 'zustand';
+
+export type CalendarViewMode = 'month' | 'week' | 'day' | 'list';
+
+interface CalendarViewState {
+  readonly viewMode: CalendarViewMode;
+}
+
+interface CalendarViewActions {
+  readonly setViewMode: (mode: CalendarViewMode) => void;
+}
+
+type CalendarViewStore = CalendarViewState & CalendarViewActions;
+
+export const useCalendarView = create<CalendarViewStore>()((set) => ({
+  viewMode: 'month',
+
+  setViewMode: (mode) => set({ viewMode: mode }),
+}));

package/src/molecules/calendar/presentation/hooks/useCalendar.ts

@@ -28,7 +28,6 @@
 
 import { useMemo, useEffect } from 'react';
 import { useCalendarStore, type CalendarViewMode } from '../../infrastructure/storage/CalendarStore';
-import { CalendarService } from '../../infrastructure/services/CalendarService';
 import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
 import type { CalendarEvent } from '../../domain/entities/CalendarEvent.entity';
 
@@ -62,7 +61,6 @@ export interface UseCalendarReturn {
     setSelectedDate: (date: Date) => void;
     goToToday: () => void;
     navigateMonth: (direction: 'prev' | 'next') => void;
-    navigateWeek: (direction: 'prev' | 'next') => void;
     setCurrentMonth: (date: Date) => void;
     setViewMode: (mode: CalendarViewMode) => void;
     getEventsForDate: (date: Date) => CalendarEvent[];
@@ -75,7 +73,7 @@ export interface UseCalendarReturn {
 /**
  * Main calendar hook
  */
-export const useCalendar = (): UseCalendarReturn => {
+export const useCalendarPresentation = (): UseCalendarReturn => {
   const store = useCalendarStore();
   const {
     events,
@@ -92,13 +90,6 @@ export const useCalendar = (): UseCalendarReturn => {
     actions.loadEvents();
   }, []);
 
-  // Generate calendar days for current month
-  const days = useMemo(() => {
-    const year = currentMonth.getFullYear();
-    const month = currentMonth.getMonth();
-    return CalendarService.getMonthDays(year, month, events);
-  }, [currentMonth, events]);
-
   // Get events for selected date
   const selectedDateEvents = useMemo(() => {
     return actions.getEventsForDate(selectedDate);
@@ -112,7 +103,7 @@ export const useCalendar = (): UseCalendarReturn => {
   }, [currentMonth, events]);
 
   return {
-    days,
+    days: store.days,
     events,
     selectedDate,
     currentMonth,
@@ -181,3 +172,8 @@ export const useCalendarEvents = () => {
     clearError,
   };
 };
+
+// Re-export for convenience
+export { useCalendar, useCalendarStore } from '../../infrastructure/storage/CalendarStore';
+export type { CalendarViewMode } from '../../infrastructure/storage/CalendarStore';
+

package/src/responsive/compute/computeDeviceInfo.ts

@@ -0,0 +1,22 @@
+/**
+ * Device Info Computation
+ */
+
+import { isSmallPhone, isTablet, isLandscape, getDeviceType, getSpacingMultiplier } from '../../device/detection';
+import type { DeviceType } from '../../device/detection';
+
+export interface ComputedDeviceInfo {
+  readonly isSmallDevice: boolean;
+  readonly isTabletDevice: boolean;
+  readonly isLandscapeDevice: boolean;
+  readonly deviceType: DeviceType;
+  readonly spacingMultiplier: number;
+}
+
+export const computeDeviceInfo = (): ComputedDeviceInfo => ({
+  isSmallDevice: isSmallPhone(),
+  isTabletDevice: isTablet(),
+  isLandscapeDevice: isLandscape(),
+  deviceType: getDeviceType(),
+  spacingMultiplier: getSpacingMultiplier(),
+});

package/src/responsive/compute/computeResponsivePositioning.ts

@@ -0,0 +1,42 @@
+/**
+ * Responsive Positioning Computation
+ */
+
+import {
+  getResponsiveHorizontalPadding,
+  getResponsiveVerticalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getScreenLayoutConfig,
+  getResponsiveTabBarConfig,
+  getResponsiveModalLayout,
+  getResponsiveBottomSheetLayout,
+  getResponsiveDialogLayout,
+} from '../responsive';
+import type { ResponsiveModalLayout, ResponsiveBottomSheetLayout, ResponsiveDialogLayout, ResponsiveTabBarConfig, ScreenLayoutConfig } from '../responsive';
+
+export interface ComputedResponsivePositioning {
+  readonly horizontalPadding: number;
+  readonly verticalPadding: number;
+  readonly bottomPosition: number;
+  readonly fabPosition: { readonly bottom: number; readonly right: number };
+  readonly screenLayoutConfig: ScreenLayoutConfig;
+  readonly tabBarConfig: ResponsiveTabBarConfig;
+  readonly modalLayout: ResponsiveModalLayout;
+  readonly bottomSheetLayout: ResponsiveBottomSheetLayout;
+  readonly dialogLayout: ResponsiveDialogLayout;
+}
+
+export const computeResponsivePositioning = (
+  insets: { top: number; bottom: number; left: number; right: number }
+): ComputedResponsivePositioning => ({
+  horizontalPadding: getResponsiveHorizontalPadding(undefined, insets),
+  verticalPadding: getResponsiveVerticalPadding(insets),
+  bottomPosition: getResponsiveBottomPosition(undefined, insets),
+  fabPosition: getResponsiveFABPosition(insets),
+  screenLayoutConfig: getScreenLayoutConfig(insets),
+  tabBarConfig: getResponsiveTabBarConfig(insets),
+  modalLayout: getResponsiveModalLayout(),
+  bottomSheetLayout: getResponsiveBottomSheetLayout(),
+  dialogLayout: getResponsiveDialogLayout(),
+});

package/src/responsive/compute/computeResponsiveSizes.ts

@@ -0,0 +1,48 @@
+/**
+ * Responsive Sizes Computation
+ */
+
+import {
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveMaxWidth,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+  getResponsiveGridColumns,
+} from '../responsive';
+import { getMinTouchTarget } from '../platformConstants';
+import type { ComputedDeviceInfo } from './computeDeviceInfo';
+
+export interface ComputedResponsiveSizes {
+  readonly logoSize: number;
+  readonly inputHeight: number;
+  readonly iconContainerSize: number;
+  readonly maxContentWidth: number;
+  readonly minTouchTarget: number;
+  readonly modalMaxHeight: string;
+  readonly modalMinHeight: number;
+  readonly gridColumns: number;
+}
+
+export const computeResponsiveSizes = (): ComputedResponsiveSizes => ({
+  logoSize: getResponsiveLogoSize(),
+  inputHeight: getResponsiveInputHeight(),
+  iconContainerSize: getResponsiveIconContainerSize(),
+  maxContentWidth: getResponsiveMaxWidth(),
+  minTouchTarget: getMinTouchTarget(),
+  modalMaxHeight: getResponsiveModalMaxHeight(),
+  modalMinHeight: getResponsiveMinModalHeight(),
+  gridColumns: getResponsiveGridColumns(),
+});
+
+export const computeOnboardingSizes = (
+  deviceInfo: ComputedDeviceInfo
+) => ({
+  onboardingIconSize: getResponsiveIconContainerSize(64),
+  onboardingIconMarginTop: deviceInfo.spacingMultiplier * 24,
+  onboardingIconMarginBottom: deviceInfo.spacingMultiplier * 16,
+  onboardingTitleMarginBottom: deviceInfo.spacingMultiplier * 16,
+  onboardingDescriptionMarginTop: deviceInfo.spacingMultiplier * 12,
+  onboardingTextPadding: deviceInfo.spacingMultiplier * 20,
+});

package/src/responsive/padding/paddingUtils.ts

@@ -0,0 +1,65 @@
+/**
+ * Padding Utilities
+ */
+
+import { isTablet, isSmallPhone, getSpacingMultiplier } from '../../device/detection';
+import { LAYOUT_CONSTANTS } from '../config';
+import { validateNumber, validateSafeAreaInsets } from '../validation';
+
+export const getResponsiveVerticalPadding = (
+  insets: { top?: number; bottom?: number } = { top: 0, bottom: 0 }
+): number => {
+  try {
+    validateSafeAreaInsets(insets);
+    const { top = 0 } = insets;
+    const isTabletDevice = isTablet();
+    const isSmall = isSmallPhone();
+    const spacingMultiplier = getSpacingMultiplier();
+
+    // Base padding adjusted by device type
+    let basePadding: number = LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD;
+    if (isTabletDevice) {
+      basePadding = LAYOUT_CONSTANTS.VERTICAL_PADDING_TABLET;
+    } else if (isSmall) {
+      basePadding = LAYOUT_CONSTANTS.VERTICAL_PADDING_SMALL;
+    }
+
+    // Apply spacing multiplier for consistency
+    const adjustedPadding = basePadding * spacingMultiplier;
+
+    // Ensure minimum padding respects safe area
+    return Math.max(adjustedPadding, top > 0 ? 8 : adjustedPadding);
+  } catch {
+    return LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD;
+  }
+};
+
+export const getResponsiveHorizontalPadding = (
+  basePadding: number = LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
+  insets: { left?: number; right?: number } = { left: 0, right: 0 }
+): number => {
+  try {
+    const validatedBasePadding = validateNumber(basePadding, 'basePadding', 0, 100);
+    validateSafeAreaInsets(insets);
+
+    const { left = 0, right = 0 } = insets;
+    const isTabletDevice = isTablet();
+
+    if (isTabletDevice) {
+      const tabletPadding = validatedBasePadding * LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
+      return Math.max(
+        tabletPadding,
+        left + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
+        right + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE
+      );
+    }
+
+    return Math.max(
+      validatedBasePadding,
+      left + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET,
+      right + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET
+    );
+  } catch {
+    return 16;
+  }
+};

package/src/responsive/positioning/positioningUtils.ts

@@ -0,0 +1,61 @@
+/**
+ * Positioning Utilities
+ */
+
+import { isTablet } from '../../device/detection';
+import { LAYOUT_CONSTANTS } from '../config';
+import { validateNumber, validateSafeAreaInsets } from '../validation';
+
+export const getResponsiveBottomPosition = (
+  basePosition: number = LAYOUT_CONSTANTS.BOTTOM_POSITION_BASE,
+  insets: { bottom?: number } = { bottom: 0 }
+): number => {
+  try {
+    const validatedBasePosition = validateNumber(basePosition, 'basePosition', 0, 500);
+    validateSafeAreaInsets(insets);
+
+    const { bottom = 0 } = insets;
+    return Math.max(validatedBasePosition, bottom + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET);
+  } catch {
+    return 32;
+  }
+};
+
+export const getResponsiveFABPosition = (
+  insets: { bottom?: number; right?: number } = { bottom: 0, right: 0 }
+): { bottom: number; right: number } => {
+  try {
+    validateSafeAreaInsets(insets);
+    const { bottom = 0, right = 0 } = insets;
+    const isTabletDevice = isTablet();
+
+    if (isTabletDevice) {
+      return {
+        bottom: Math.max(
+          LAYOUT_CONSTANTS.FAB_BOTTOM_TABLET,
+          bottom + LAYOUT_CONSTANTS.TAB_BAR_OFFSET
+        ),
+        right: Math.max(
+          LAYOUT_CONSTANTS.FAB_RIGHT_TABLET,
+          right + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE
+        ),
+      };
+    }
+
+    return {
+      bottom: Math.max(
+        LAYOUT_CONSTANTS.TAB_BAR_OFFSET,
+        bottom + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET
+      ),
+      right: Math.max(
+        LAYOUT_CONSTANTS.FAB_RIGHT_PHONE,
+        right + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET
+      ),
+    };
+  } catch {
+    return {
+      bottom: LAYOUT_CONSTANTS.TAB_BAR_OFFSET,
+      right: LAYOUT_CONSTANTS.FAB_RIGHT_PHONE,
+    };
+  }
+};

package/src/responsive/responsiveLayout.ts

@@ -1,270 +1,17 @@
 /**
- * Responsive Layout Utilities
- * Layout utilities for positioning and spacing.
+ * Responsive Layout Utilities - Barrel Export
  */
 
-import { isTablet, isSmallPhone, getSpacingMultiplier } from '../device/detection';
-import { LAYOUT_CONSTANTS, SIZE_CONSTRAINTS } from './config';
-import { validateNumber, validateSafeAreaInsets } from './validation';
+// Screen layout
+export { getScreenLayoutConfig } from './screen/screenLayoutConfig';
+export type { ScreenLayoutConfig } from './screen/screenLayoutConfig';
 
-/**
- * Check if device is tablet-sized (for responsive layouts)
- * Uses expo-device based detection for accuracy
- */
-const checkIsTabletSize = (): boolean => isTablet();
-
-/**
- * Screen layout configuration for ScreenLayout component
- */
-export interface ScreenLayoutConfig {
-  maxContentWidth: number | undefined;
-  horizontalPadding: number;
-  verticalPadding: number;
-  spacingMultiplier: number;
-}
-
-/**
- * Get complete screen layout configuration
- * Returns all responsive values needed for ScreenLayout
- */
-export const getScreenLayoutConfig = (
-  insets: { left?: number; right?: number; top?: number; bottom?: number } = {}
-): ScreenLayoutConfig => {
-  try {
-    const isTabletDevice = checkIsTabletSize();
-    const spacingMultiplier = getSpacingMultiplier();
-
-    return {
-      maxContentWidth: isTabletDevice ? SIZE_CONSTRAINTS.CONTENT_MAX_TABLET : undefined,
-      horizontalPadding: getResponsiveHorizontalPadding(LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE, insets),
-      verticalPadding: getResponsiveVerticalPadding(insets),
-      spacingMultiplier,
-    };
-  } catch {
-    return {
-      maxContentWidth: undefined,
-      horizontalPadding: LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
-      verticalPadding: LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD,
-      spacingMultiplier: LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD,
-    };
-  }
-};
-
-/**
- * Responsive vertical padding
- * Adjusts based on device type and safe area insets
- */
-export const getResponsiveVerticalPadding = (
-  insets: { top?: number; bottom?: number } = { top: 0, bottom: 0 }
-): number => {
-  try {
-    validateSafeAreaInsets(insets);
-    const { top = 0 } = insets;
-    const isTabletDevice = checkIsTabletSize();
-    const isSmall = isSmallPhone();
-    const spacingMultiplier = getSpacingMultiplier();
-
-    // Base padding adjusted by device type
-    let basePadding: number = LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD;
-    if (isTabletDevice) {
-      basePadding = LAYOUT_CONSTANTS.VERTICAL_PADDING_TABLET;
-    } else if (isSmall) {
-      basePadding = LAYOUT_CONSTANTS.VERTICAL_PADDING_SMALL;
-    }
-
-    // Apply spacing multiplier for consistency
-    const adjustedPadding = basePadding * spacingMultiplier;
-
-    // Ensure minimum padding respects safe area
-    return Math.max(adjustedPadding, top > 0 ? 8 : adjustedPadding);
-  } catch {
-    return LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD;
-  }
-};
-
-/**
- * Responsive horizontal padding
- */
-export const getResponsiveHorizontalPadding = (
-  basePadding: number = LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
-  insets: { left?: number; right?: number } = { left: 0, right: 0 }
-): number => {
-  try {
-    const validatedBasePadding = validateNumber(basePadding, 'basePadding', 0, 100);
-    validateSafeAreaInsets(insets);
-
-    const { left = 0, right = 0 } = insets;
-    const isTabletDevice = checkIsTabletSize();
-
-    if (isTabletDevice) {
-      const tabletPadding = validatedBasePadding * LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
-      return Math.max(
-        tabletPadding,
-        left + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
-        right + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE
-      );
-    }
-
-    return Math.max(
-      validatedBasePadding,
-      left + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET,
-      right + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET
-    );
-  } catch {
-    return 16;
-  }
-};
-
-/**
- * Responsive bottom positioning
- */
-export const getResponsiveBottomPosition = (
-  basePosition: number = LAYOUT_CONSTANTS.BOTTOM_POSITION_BASE,
-  insets: { bottom?: number } = { bottom: 0 }
-): number => {
-  try {
-    const validatedBasePosition = validateNumber(basePosition, 'basePosition', 0, 500);
-    validateSafeAreaInsets(insets);
-
-    const { bottom = 0 } = insets;
-    return Math.max(validatedBasePosition, bottom + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET);
-  } catch {
-    return 32;
-  }
-};
-
-/**
- * Responsive FAB position
- */
-export const getResponsiveFABPosition = (
-  insets: { bottom?: number; right?: number } = { bottom: 0, right: 0 }
-): { bottom: number; right: number } => {
-  try {
-    validateSafeAreaInsets(insets);
-    const { bottom = 0, right = 0 } = insets;
-    const isTabletDevice = checkIsTabletSize();
-
-    if (isTabletDevice) {
-      return {
-        bottom: Math.max(
-          LAYOUT_CONSTANTS.FAB_BOTTOM_TABLET,
-          bottom + LAYOUT_CONSTANTS.TAB_BAR_OFFSET
-        ),
-        right: Math.max(
-          LAYOUT_CONSTANTS.FAB_RIGHT_TABLET,
-          right + LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE
-        ),
-      };
-    }
-
-    return {
-      bottom: Math.max(
-        LAYOUT_CONSTANTS.TAB_BAR_OFFSET,
-        bottom + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET
-      ),
-      right: Math.max(
-        LAYOUT_CONSTANTS.FAB_RIGHT_PHONE,
-        right + LAYOUT_CONSTANTS.SAFE_AREA_OFFSET
-      ),
-    };
-  } catch {
-    return {
-      bottom: LAYOUT_CONSTANTS.TAB_BAR_OFFSET,
-      right: LAYOUT_CONSTANTS.FAB_RIGHT_PHONE,
-    };
-  }
-};
-
-/**
- * Tab bar height constants
- */
-const TAB_BAR_CONSTANTS = {
-  BASE_HEIGHT_PHONE: 60,
-  BASE_HEIGHT_TABLET: 70,
-  MIN_PADDING_BOTTOM: 8,
-  MIN_PADDING_TOP: 8,
-  ICON_SIZE_PHONE: 24,
-  ICON_SIZE_TABLET: 28,
-  FAB_SIZE_PHONE: 64,
-  FAB_SIZE_TABLET: 72,
-  FAB_OFFSET_Y_PHONE: -24,
-  FAB_OFFSET_Y_TABLET: -28,
-} as const;
-
-/**
- * Responsive tab bar configuration
- */
-export interface ResponsiveTabBarConfig {
-  height: number;
-  paddingBottom: number;
-  paddingTop: number;
-  iconSize: number;
-  fabSize: number;
-  fabOffsetY: number;
-}
-
-/**
- * Get responsive tab bar height based on device and safe area
- */
-export const getResponsiveTabBarHeight = (
-  insets: { bottom?: number } = { bottom: 0 }
-): number => {
-  try {
-    validateSafeAreaInsets(insets);
-    const { bottom = 0 } = insets;
-    const isTabletDevice = checkIsTabletSize();
-
-    const baseHeight = isTabletDevice
-      ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
-      : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
-
-    const bottomPadding = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM);
-
-    return baseHeight + bottomPadding;
-  } catch {
-    return TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE + TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM;
-  }
-};
-
-/**
- * Get complete responsive tab bar configuration
- */
-export const getResponsiveTabBarConfig = (
-  insets: { bottom?: number } = { bottom: 0 }
-): ResponsiveTabBarConfig => {
-  try {
-    validateSafeAreaInsets(insets);
-    const { bottom = 0 } = insets;
-    const isTabletSize = checkIsTabletSize();
-
-    const baseHeight = isTabletSize
-      ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
-      : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
+// Padding utilities
+export { getResponsiveVerticalPadding, getResponsiveHorizontalPadding } from './padding/paddingUtils';
 
-    const paddingBottom = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM);
+// Positioning utilities
+export { getResponsiveBottomPosition, getResponsiveFABPosition } from './positioning/positioningUtils';
 
-    return {
-      height: baseHeight + paddingBottom,
-      paddingBottom,
-      paddingTop: TAB_BAR_CONSTANTS.MIN_PADDING_TOP,
-      iconSize: isTabletSize
-        ? TAB_BAR_CONSTANTS.ICON_SIZE_TABLET
-        : TAB_BAR_CONSTANTS.ICON_SIZE_PHONE,
-      fabSize: isTabletSize
-        ? TAB_BAR_CONSTANTS.FAB_SIZE_TABLET
-        : TAB_BAR_CONSTANTS.FAB_SIZE_PHONE,
-      fabOffsetY: isTabletSize
-        ? TAB_BAR_CONSTANTS.FAB_OFFSET_Y_TABLET
-        : TAB_BAR_CONSTANTS.FAB_OFFSET_Y_PHONE,
-    };
-  } catch {
-    return {
-      height: TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE + TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM,
-      paddingBottom: TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM,
-      paddingTop: TAB_BAR_CONSTANTS.MIN_PADDING_TOP,
-      iconSize: TAB_BAR_CONSTANTS.ICON_SIZE_PHONE,
-      fabSize: TAB_BAR_CONSTANTS.FAB_SIZE_PHONE,
-      fabOffsetY: TAB_BAR_CONSTANTS.FAB_OFFSET_Y_PHONE,
-    };
-  }
-};
+// Tab bar configuration
+export { getResponsiveTabBarHeight, getResponsiveTabBarConfig } from './tabbar/tabBarConfig';
+export type { ResponsiveTabBarConfig } from './tabbar/tabBarConfig';

package/src/responsive/screen/screenLayoutConfig.ts

@@ -0,0 +1,38 @@
+/**
+ * Screen Layout Configuration
+ */
+
+import { isTablet, getSpacingMultiplier } from '../../device/detection';
+import { LAYOUT_CONSTANTS, SIZE_CONSTRAINTS } from '../config';
+import { getResponsiveHorizontalPadding } from '../padding/paddingUtils';
+import { getResponsiveVerticalPadding } from '../padding/paddingUtils';
+
+export interface ScreenLayoutConfig {
+  readonly maxContentWidth: number | undefined;
+  readonly horizontalPadding: number;
+  readonly verticalPadding: number;
+  readonly spacingMultiplier: number;
+}
+
+export const getScreenLayoutConfig = (
+  insets: { left?: number; right?: number; top?: number; bottom?: number } = {}
+): ScreenLayoutConfig => {
+  try {
+    const isTabletDevice = isTablet();
+    const spacingMultiplier = getSpacingMultiplier();
+
+    return {
+      maxContentWidth: isTabletDevice ? SIZE_CONSTRAINTS.CONTENT_MAX_TABLET : undefined,
+      horizontalPadding: getResponsiveHorizontalPadding(LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE, insets),
+      verticalPadding: getResponsiveVerticalPadding(insets),
+      spacingMultiplier,
+    };
+  } catch {
+    return {
+      maxContentWidth: undefined,
+      horizontalPadding: LAYOUT_CONSTANTS.HORIZONTAL_PADDING_BASE,
+      verticalPadding: LAYOUT_CONSTANTS.VERTICAL_PADDING_STANDARD,
+      spacingMultiplier: LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD,
+    };
+  }
+};