@umituz/react-native-design-system 1.15.0 → 2.0.1

package/src/responsive/gridUtils.ts

@@ -0,0 +1,79 @@
+/**
+ * Grid Utilities
+ * Responsive grid sizing and column calculations
+ */
+
+import { getScreenDimensions } from './deviceDetection';
+import { DEVICE_BREAKPOINTS, GRID_CONFIG } from './config';
+import { validateNumber } from './validation';
+
+/**
+ * Responsive grid columns
+ * Returns number of columns for grid layouts
+ *
+ * @param mobileColumns - Number of columns for mobile devices (default: 2)
+ * @param tabletColumns - Number of columns for tablet devices (default: 4)
+ * @returns Responsive number of grid columns
+ */
+export const getResponsiveGridColumns = (
+  mobileColumns: number = GRID_CONFIG.DEFAULT_MOBILE_COLUMNS,
+  tabletColumns: number = GRID_CONFIG.DEFAULT_TABLET_COLUMNS
+): number => {
+  try {
+    const validatedMobile = validateNumber(mobileColumns, 'mobileColumns', 1, 20);
+    const validatedTablet = validateNumber(tabletColumns, 'tabletColumns', 1, 20);
+
+    const { width } = getScreenDimensions();
+    return width >= DEVICE_BREAKPOINTS.TABLET ? validatedTablet : validatedMobile;
+  } catch {
+    return 2;
+  }
+};
+
+export interface GridCellSizeConfig {
+  columns: number;
+  rows: number;
+  horizontalPadding?: number;
+  verticalPadding?: number;
+  gap?: number;
+  headerHeight?: number;
+  tabBarHeight?: number;
+  statusBarHeight?: number;
+}
+
+/**
+ * Responsive grid cell size
+ * Calculates optimal square cell size for a grid that fills available space
+ *
+ * @param config - Grid configuration
+ * @returns Responsive cell size (width = height for square cells)
+ */
+export const getResponsiveGridCellSize = (config: GridCellSizeConfig): number => {
+  try {
+    const {
+      columns,
+      rows,
+      horizontalPadding = 32,
+      verticalPadding = 32,
+      gap = 8,
+      headerHeight = 120,
+      tabBarHeight = 80,
+      statusBarHeight = 50,
+    } = config;
+
+    const { width, height } = getScreenDimensions();
+
+    const totalHorizontalGap = gap * (columns - 1);
+    const availableWidth = width - horizontalPadding - totalHorizontalGap;
+    const maxCellWidth = availableWidth / columns;
+
+    const totalVerticalGap = gap * (rows - 1);
+    const usedHeight = headerHeight + tabBarHeight + statusBarHeight + verticalPadding;
+    const availableHeight = height - usedHeight - totalVerticalGap;
+    const maxCellHeight = availableHeight / rows;
+
+    return Math.floor(Math.min(maxCellWidth, maxCellHeight));
+  } catch {
+    return 60;
+  }
+};

package/src/responsive/index.ts

@@ -0,0 +1,52 @@
+/**
+ * @umituz/react-native-design-system-responsive - Public API
+ *
+ * Responsive design utilities for React Native - Screen dimensions, device detection,
+ * and responsive sizing utilities following Material Design 3 and iOS HIG principles.
+ *
+ * Usage:
+ * ```typescript
+ * import { useResponsive, isTablet, getResponsiveLogoSize } from '@umituz/react-native-design-system-responsive';
+ * ```
+ */
+
+// Hook exports
+export { useResponsive } from './useResponsive';
+export type { UseResponsiveReturn } from './useResponsive';
+
+// Utility function exports
+export {
+  getScreenDimensions,
+  isSmallPhone,
+  isTablet,
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveHorizontalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveGridColumns,
+  getResponsiveGridCellSize,
+  type GridCellSizeConfig,
+  getResponsiveMaxWidth,
+  getResponsiveFontSize,
+  isLandscape,
+  getDeviceType,
+  DeviceType,
+} from './responsive';
+
+// Device detection exports
+export { getSpacingMultiplier } from './deviceDetection';
+
+
+
+// Platform constants exports
+export {
+  IOS_HIG,
+  PLATFORM_CONSTANTS,
+  isValidTouchTarget,
+  getMinTouchTarget,
+} from './platformConstants';
+

package/src/responsive/platformConstants.ts

@@ -0,0 +1,98 @@
+/**
+ * Platform-Specific Constants
+ *
+ * Design system constants that ensure compliance with platform guidelines.
+ * These values are based on official Human Interface Guidelines (HIG) from Apple and Material Design from Google.
+ */
+
+/**
+ * iOS Human Interface Guidelines (HIG) Constants
+ *
+ * @see https://developer.apple.com/design/human-interface-guidelines/layout
+ */
+export const IOS_HIG = {
+  /**
+   * Minimum Touch Target Size
+   *
+   * Apple requires a minimum tappable area of 44pt x 44pt for ALL interactive controls.
+   * This is enforced during App Store review.
+   *
+   * @critical Violating this can result in App Store rejection
+   */
+  MIN_TOUCH_TARGET: 44,
+
+  /**
+   * Recommended Minimum Touch Target Size
+   *
+   * For better accessibility and usability, Apple recommends 48pt x 48pt.
+   */
+  RECOMMENDED_TOUCH_TARGET: 48,
+
+  /**
+   * Minimum Text Size
+   *
+   * Minimum font size for body text to ensure readability.
+   */
+  MIN_TEXT_SIZE: 17,
+
+
+} as const;
+
+
+
+/**
+ * Universal Platform Constants
+ *
+ * These values work across both iOS and Android, taking the more restrictive requirement.
+ */
+export const PLATFORM_CONSTANTS = {
+  /**
+   * Minimum Touch Target Size
+   *
+   * Uses iOS requirement (44pt) as it's more restrictive than Android (48dp).
+   * This ensures compliance on both platforms.
+   */
+  MIN_TOUCH_TARGET: Math.max(IOS_HIG.MIN_TOUCH_TARGET, 48),
+
+  /**
+   * Recommended Touch Target Size
+   *
+   * Uses the higher value between iOS and Android recommendations.
+   */
+  RECOMMENDED_TOUCH_TARGET: 48,
+
+  /**
+   * Minimum Text Size
+   *
+   * Uses iOS requirement as it's larger.
+   */
+  MIN_TEXT_SIZE: Math.max(IOS_HIG.MIN_TEXT_SIZE, 14),
+} as const;
+
+/**
+ * Helper function to validate touch target size
+ *
+ * @param size - The size to validate (in pt/dp)
+ * @returns true if size meets platform requirements
+ */
+export const isValidTouchTarget = (size: number): boolean => {
+  return size >= IOS_HIG.MIN_TOUCH_TARGET;
+};
+
+/**
+ * Helper function to get minimum touch target for component
+ *
+ * @param componentType - The type of component ('button' | 'input' | 'icon' | 'generic')
+ * @returns The minimum touch target size for that component type
+ */
+export const getMinTouchTarget = (componentType: 'button' | 'input' | 'icon' | 'generic' = 'generic'): number => {
+  switch (componentType) {
+    case 'button':
+    case 'input':
+      return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for buttons and inputs
+    case 'icon':
+    case 'generic':
+    default:
+      return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for icons and generic elements
+  }
+};

package/src/responsive/responsive.ts

@@ -0,0 +1,61 @@
+/**
+ * Responsive Design Utilities
+ *
+ * Centralized responsive sizing and spacing utilities to prevent
+ * Apple App Store rejection due to layout issues on different devices.
+ *
+ * This is the main export file that imports from specialized modules.
+ */
+
+// Device detection
+export {
+  getScreenDimensions,
+  isSmallPhone,
+  isTablet,
+  isLandscape,
+  getDeviceType,
+  DeviceType,
+} from './deviceDetection';
+
+// Responsive sizing
+export {
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveMaxWidth,
+  getResponsiveFontSize,
+  getResponsiveGridColumns,
+  getResponsiveGridCellSize,
+  type GridCellSizeConfig,
+} from './responsiveSizing';
+
+// Responsive layout
+export {
+  getResponsiveHorizontalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+} from './responsiveLayout';
+
+// Platform constants
+export {
+  IOS_HIG,
+  PLATFORM_CONSTANTS,
+  isValidTouchTarget,
+  getMinTouchTarget,
+} from './platformConstants';
+
+// Configuration
+export {
+  DEVICE_BREAKPOINTS,
+  RESPONSIVE_PERCENTAGES,
+  SIZE_CONSTRAINTS,
+  LAYOUT_CONSTANTS,
+  HEIGHT_THRESHOLDS,
+  GRID_CONFIG,
+  VALIDATION_CONSTRAINTS,
+} from './config';
+
+
+

package/src/responsive/responsiveLayout.ts

@@ -0,0 +1,137 @@
+/**
+ * Responsive Layout Utilities
+ * Layout utilities for positioning and spacing.
+ */
+
+import { getScreenDimensions } from './deviceDetection';
+import {
+  DEVICE_BREAKPOINTS,
+  LAYOUT_CONSTANTS,
+  HEIGHT_THRESHOLDS,
+  SIZE_CONSTRAINTS,
+} from './config';
+import { validateNumber, validateSafeAreaInsets } from './validation';
+
+/**
+ * Responsive horizontal padding
+ * @param basePadding - Base padding value (default: 16)
+ * @param insets - Safe area insets object
+ */
+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 { width } = getScreenDimensions();
+    const { left = 0, right = 0 } = insets;
+
+    if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      const tabletPadding = validatedBasePadding * 1.5;
+      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
+ * @param basePosition - Base bottom position (default: 32)
+ * @param insets - Safe area insets object
+ */
+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
+ * @param insets - Safe area insets object
+ */
+export const getResponsiveFABPosition = (
+  insets: { bottom?: number; right?: number } = { bottom: 0, right: 0 }
+): { bottom: number; right: number } => {
+  try {
+    validateSafeAreaInsets(insets);
+    const { width } = getScreenDimensions();
+    const { bottom = 0, right = 0 } = insets;
+
+    if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      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: 90, right: 20 };
+  }
+};
+
+/**
+ * Responsive modal max height
+ */
+export const getResponsiveModalMaxHeight = (): string => {
+  try {
+    const { height } = getScreenDimensions();
+
+    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
+      return LAYOUT_CONSTANTS.MODAL_HEIGHT_SMALL;
+    } else if (height >= HEIGHT_THRESHOLDS.LARGE_DEVICE) {
+      return LAYOUT_CONSTANTS.MODAL_HEIGHT_TABLET;
+    }
+
+    return LAYOUT_CONSTANTS.MODAL_HEIGHT_STANDARD;
+  } catch {
+    return '70%';
+  }
+};
+
+/**
+ * Responsive modal min height
+ */
+export const getResponsiveMinModalHeight = (): number => {
+  try {
+    const { height } = getScreenDimensions();
+
+    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
+      const calculatedHeight = height * 0.4;
+      return Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_SMALL);
+    } else if (height >= HEIGHT_THRESHOLDS.LARGE_DEVICE) {
+      const calculatedHeight = height * 0.35;
+      return Math.min(Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_TABLET), SIZE_CONSTRAINTS.MODAL_MAX_TABLET);
+    }
+
+    const calculatedHeight = height * 0.45;
+    return Math.max(calculatedHeight, SIZE_CONSTRAINTS.MODAL_MIN_STANDARD);
+  } catch {
+    return 300;
+  }
+};

package/src/responsive/responsiveSizing.ts

@@ -0,0 +1,134 @@
+/**
+ * Responsive Sizing Utilities
+ * Responsive sizing utilities for UI components.
+ */
+
+import { getScreenDimensions } from './deviceDetection';
+import {
+  DEVICE_BREAKPOINTS,
+  RESPONSIVE_PERCENTAGES,
+  SIZE_CONSTRAINTS,
+  HEIGHT_THRESHOLDS,
+} from './config';
+import { validateNumber, validateFontSize, safePercentage, clamp } from './validation';
+
+// Re-export grid utilities
+export {
+  getResponsiveGridColumns,
+  getResponsiveGridCellSize,
+  type GridCellSizeConfig,
+} from './gridUtils';
+
+/**
+ * Responsive logo/icon size
+ * @param baseSize - Base logo size (default: 140)
+ */
+export const getResponsiveLogoSize = (baseSize: number = 140): number => {
+  try {
+    const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 500);
+    const { width } = getScreenDimensions();
+
+    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.LOGO_SMALL_PHONE_MAX);
+      return clamp(calculatedSize, SIZE_CONSTRAINTS.LOGO_MIN_SMALL, SIZE_CONSTRAINTS.LOGO_MAX_SMALL);
+    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.LOGO_TABLET_MAX);
+      return clamp(calculatedSize, SIZE_CONSTRAINTS.LOGO_MIN_TABLET, SIZE_CONSTRAINTS.LOGO_MAX_TABLET);
+    }
+
+    return validatedBaseSize;
+  } catch {
+    return 140;
+  }
+};
+
+/**
+ * Responsive multiline input height
+ * @param baseHeight - Base input height (default: 200)
+ */
+export const getResponsiveInputHeight = (baseHeight: number = 200): number => {
+  try {
+    const validatedBaseHeight = validateNumber(baseHeight, 'baseHeight', 50, 500);
+    const { height } = getScreenDimensions();
+
+    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
+      const calculatedHeight = safePercentage(height, RESPONSIVE_PERCENTAGES.INPUT_SMALL_DEVICE);
+      return Math.min(calculatedHeight, SIZE_CONSTRAINTS.INPUT_MAX_SMALL);
+    } else if (height <= HEIGHT_THRESHOLDS.MEDIUM_DEVICE) {
+      const calculatedHeight = safePercentage(height, RESPONSIVE_PERCENTAGES.INPUT_MEDIUM_DEVICE);
+      return Math.min(calculatedHeight, SIZE_CONSTRAINTS.INPUT_MAX_MEDIUM);
+    }
+
+    return Math.min(validatedBaseHeight, SIZE_CONSTRAINTS.INPUT_MAX_LARGE);
+  } catch {
+    return 200;
+  }
+};
+
+/**
+ * Responsive icon container size
+ * @param baseSize - Base container size (default: 140)
+ */
+export const getResponsiveIconContainerSize = (baseSize: number = 140): number => {
+  try {
+    const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 300);
+    const { width } = getScreenDimensions();
+
+    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.ICON_CONTAINER_SMALL_PHONE);
+      return Math.min(calculatedSize, SIZE_CONSTRAINTS.ICON_MAX_SMALL);
+    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.ICON_CONTAINER_TABLET);
+      return Math.min(calculatedSize, SIZE_CONSTRAINTS.ICON_MAX_TABLET);
+    }
+
+    return validatedBaseSize;
+  } catch {
+    return 140;
+  }
+};
+
+/**
+ * Responsive max width for content
+ * @param baseWidth - Base content width (default: 400)
+ */
+export const getResponsiveMaxWidth = (baseWidth: number = 400): number => {
+  try {
+    const validatedBaseWidth = validateNumber(baseWidth, 'baseWidth', 100, 1000);
+    const { width } = getScreenDimensions();
+
+    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      return safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_SMALL_PHONE);
+    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      const calculatedWidth = safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_TABLET);
+      return Math.min(calculatedWidth, SIZE_CONSTRAINTS.CONTENT_MAX_TABLET);
+    }
+
+    const maxWidth = safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_PHONE);
+    return Math.min(maxWidth, validatedBaseWidth);
+  } catch {
+    return 400;
+  }
+};
+
+/**
+ * Responsive font size
+ * @param baseFontSize - Base font size
+ */
+export const getResponsiveFontSize = (baseFontSize: number): number => {
+  try {
+    const validatedBaseSize = validateFontSize(baseFontSize);
+    const { width } = getScreenDimensions();
+
+    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      const scaledSize = validatedBaseSize * RESPONSIVE_PERCENTAGES.FONT_SMALL_PHONE;
+      return Math.max(scaledSize, SIZE_CONSTRAINTS.FONT_MIN_SIZE);
+    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      return validatedBaseSize * RESPONSIVE_PERCENTAGES.FONT_TABLET;
+    }
+
+    return validatedBaseSize;
+  } catch {
+    return 16;
+  }
+};

package/src/responsive/useResponsive.ts

@@ -0,0 +1,140 @@
+/**
+ * useResponsive Hook
+ *
+ * React Hook for accessing responsive utilities with real-time dimension updates
+ * and safe area insets integration.
+ *
+ * Usage:
+ * ```tsx
+ * const { logoSize, inputHeight, fabPosition, isSmallDevice } = useResponsive();
+ * ```
+ */
+
+import { useCallback, useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveHorizontalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveGridColumns,
+  getResponsiveMaxWidth,
+  getResponsiveFontSize,
+  isSmallPhone,
+  isTablet,
+  isLandscape,
+  getDeviceType,
+  getMinTouchTarget,
+  DeviceType,
+} from './responsive';
+import { getSpacingMultiplier } from './deviceDetection';
+
+export interface UseResponsiveReturn {
+  // Device info
+  width: number;
+  height: number;
+  isSmallDevice: boolean;
+  isTabletDevice: boolean;
+  isLandscapeDevice: boolean;
+  deviceType: DeviceType;
+
+  // Safe area insets
+  insets: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+
+  // Responsive sizes
+  logoSize: number;
+  inputHeight: number;
+  iconContainerSize: number;
+  maxContentWidth: number;
+  minTouchTarget: number;
+
+  // Responsive positioning
+  horizontalPadding: number;
+  bottomPosition: number;
+  fabPosition: { bottom: number; right: number };
+
+  // Responsive layout
+  modalMaxHeight: string;
+  modalMinHeight: number;
+  gridColumns: number;
+  spacingMultiplier: number;
+
+  // Utility functions
+  getLogoSize: (baseSize?: number) => number;
+  getInputHeight: (baseHeight?: number) => number;
+  getIconSize: (baseSize?: number) => number;
+  getMaxWidth: (baseWidth?: number) => number;
+  getFontSize: (baseFontSize: number) => number;
+  getGridCols: (mobile?: number, tablet?: number) => number;
+}
+
+/**
+ * Hook for responsive design utilities
+ * Automatically updates when screen dimensions or orientation changes
+ */
+export const useResponsive = (): UseResponsiveReturn => {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+
+  // Memoize utility functions to prevent unnecessary re-renders
+  const getLogoSize = useCallback((baseSize?: number) => getResponsiveLogoSize(baseSize), []);
+  const getInputHeight = useCallback((baseHeight?: number) => getResponsiveInputHeight(baseHeight), []);
+  const getIconSize = useCallback((baseSize?: number) => getResponsiveIconContainerSize(baseSize), []);
+  const getMaxWidth = useCallback((baseWidth?: number) => getResponsiveMaxWidth(baseWidth), []);
+  const getFontSize = useCallback((baseFontSize: number) => getResponsiveFontSize(baseFontSize), []);
+  const getGridCols = useCallback((mobile?: number, tablet?: number) => getResponsiveGridColumns(mobile, tablet), []);
+
+  // Memoize responsive values to prevent unnecessary recalculations
+  const responsiveValues = useMemo(() => ({
+    // Device info
+    width,
+    height,
+    isSmallDevice: isSmallPhone(),
+    isTabletDevice: isTablet(),
+    isLandscapeDevice: isLandscape(),
+    deviceType: getDeviceType(),
+
+    // Safe area insets
+    insets,
+
+    // Responsive sizes (with default values)
+    logoSize: getResponsiveLogoSize(),
+    inputHeight: getResponsiveInputHeight(),
+    iconContainerSize: getResponsiveIconContainerSize(),
+    maxContentWidth: getResponsiveMaxWidth(),
+    minTouchTarget: getMinTouchTarget(),
+
+    // Responsive positioning
+    horizontalPadding: getResponsiveHorizontalPadding(undefined, insets),
+    bottomPosition: getResponsiveBottomPosition(undefined, insets),
+    fabPosition: getResponsiveFABPosition(insets),
+
+    // Responsive layout
+    modalMaxHeight: getResponsiveModalMaxHeight(),
+    modalMinHeight: getResponsiveMinModalHeight(),
+    gridColumns: getResponsiveGridColumns(),
+    spacingMultiplier: getSpacingMultiplier(),
+
+    // Utility functions (memoized)
+    getLogoSize,
+    getInputHeight,
+    getIconSize,
+    getMaxWidth,
+    getFontSize,
+    getGridCols,
+  }), [width, height, insets]);
+
+  return responsiveValues;
+};
+
+