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

package/src/index.ts

@@ -15,460 +15,54 @@
 // =============================================================================
 // THEME EXPORTS
 // =============================================================================
-
-export {
-  useAppDesignTokens,
-  useCommonStyles,
-  useDesignSystemTheme,
-  useTheme,
-  useThemedStyles,
-  useThemedStyleSheet,
-  DesignSystemProvider,
-  lightColors,
-  darkColors,
-  getColorPalette,
-  withAlpha,
-  BASE_TOKENS,
-  BASE_TOKENS as STATIC_TOKENS,
-  spacing,
-  typography,
-  borders,
-  createDesignTokens,
-  lightTheme,
-  darkTheme,
-  createResponsiveValue,
-  ThemeStorage,
-  createNavigationTheme,
-  applyCustomColors,
-  type ColorPalette,
-  type ThemeMode,
-  type CustomThemeColors,
-  type Spacing,
-  type Typography,
-  type Borders,
-  type BaseTokens,
-  type IconSizes,
-  type Opacity,
-  type AvatarSizes,
-  type ComponentSizes,
-  type DesignTokens,
-  type ResponsiveSpacing,
-  type ResponsiveTypography,
-  type Theme,
-  type ExtendedColorPalette,
-  type NavigationTheme,
-} from './theme';
+export * from './exports/theme';
 
 // =============================================================================
 // TYPOGRAPHY EXPORTS
 // =============================================================================
-
-export {
-  getTextColor,
-  getTextStyle,
-  isTextStyleVariant,
-  getAllTextStyleVariants,
-  clearTypographyCache,
-  clearColorCache,
-  isValidHexColor,
-  isValidRgbColor,
-  isValidHslColor,
-  isValidNamedColor,
-  isValidColor,
-  getColorFormat,
-  normalizeColor,
-  type TextStyleVariant,
-  type ColorVariant,
-} from './typography';
+export * from './exports/typography';
 
 // =============================================================================
 // RESPONSIVE EXPORTS
 // =============================================================================
-
-export {
-  useResponsive,
-  getResponsiveLogoSize,
-  getResponsiveInputHeight,
-  getResponsiveHorizontalPadding,
-  getResponsiveBottomPosition,
-  getResponsiveFABPosition,
-  getResponsiveModalMaxHeight,
-  getResponsiveMinModalHeight,
-  getResponsiveModalWidth,
-  getResponsiveModalHeight,
-  getResponsiveModalBorderRadius,
-  getResponsiveModalMaxWidth,
-  getResponsiveBackdropOpacity,
-  getResponsiveModalLayout,
-  getResponsiveBottomSheetLayout,
-  getResponsiveDialogLayout,
-  getResponsiveIconContainerSize,
-  getResponsiveGridColumns,
-  getResponsiveMaxWidth,
-  getResponsiveFontSize,
-  getMinTouchTarget,
-  IOS_HIG,
-  PLATFORM_CONSTANTS,
-  isValidTouchTarget,
-  DEVICE_BREAKPOINTS,
-  type ResponsiveModalLayout,
-  type ResponsiveBottomSheetLayout,
-  type ResponsiveDialogLayout,
-  type UseResponsiveReturn,
-} from './responsive';
+export * from './exports/responsive';
 
 // =============================================================================
 // DEVICE EXPORTS
 // =============================================================================
-
-export {
-  // Device detection
-  DeviceType,
-  getScreenDimensions,
-  isPhone,
-  isSmallPhone,
-  isLargePhone,
-  isTablet,
-  isLandscape,
-  getDeviceType,
-  getSpacingMultiplier,
-  // iPad detection
-  isIPad,
-  isIPadMini,
-  isIPadPro,
-  isIPadLandscape,
-  IPAD_BREAKPOINTS,
-  TOUCH_TARGETS,
-  CONTENT_WIDTH_CONSTRAINTS,
-  IPAD_LAYOUT_CONFIG,
-  // iPad utilities
-  getContentMaxWidth,
-  getIPadGridColumns,
-  getTouchTargetSize,
-  getIPadScreenPadding,
-  getIPadFontScale,
-  getIPadLayoutInfo,
-  getIPadModalDimensions,
-  getPaywallDimensions,
-  type IPadLayoutInfo,
-  type ModalDimensions,
-  type PaywallDimensions,
-  // Device info
-  DEVICE_CONSTANTS,
-  DeviceUtils,
-  DeviceTypeUtils,
-  DeviceMemoryUtils,
-  DeviceService,
-  UserFriendlyIdService,
-  PersistentDeviceIdService,
-  useDeviceInfo,
-  useDeviceCapabilities,
-  useDeviceId,
-  useAnonymousUser,
-  getAnonymousUserId,
-  collectDeviceExtras,
-  type DeviceInfo,
-  type ApplicationInfo,
-  type SystemInfo,
-  type AnonymousUser,
-  type UseAnonymousUserOptions,
-  type DeviceExtras,
-} from './device';
+export * from './exports/device';
 
 // =============================================================================
 // ATOMS EXPORTS
 // =============================================================================
-
-export {
-  AtomicText,
-  AtomicIcon,
-  AtomicButton,
-  AtomicInput,
-  AtomicCard,
-  AtomicFab,
-  AtomicAvatar,
-  AtomicChip,
-  AtomicProgress,
-  AtomicPicker,
-  AtomicDatePicker,
-  AtomicSkeleton,
-  AtomicBadge,
-  AtomicSpinner,
-  LoadingSpinner,
-  EmptyState,
-  type IconName,
-  type IconSize,
-  type IconColor,
-  type AtomicTextProps,
-  type AtomicIconProps,
-  type AtomicButtonProps,
-  type ButtonVariant,
-  type ButtonSize,
-  type AtomicInputProps,
-  type AtomicInputVariant,
-  type AtomicInputState,
-  type AtomicInputSize,
-  type AtomicCardProps,
-  type AtomicCardVariant,
-  type AtomicCardPadding,
-  type AtomicFabProps,
-  type FabSize,
-  type FabVariant,
-  type AtomicAvatarProps,
-  type AtomicChipProps,
-  type AtomicProgressProps,
-  type AtomicPickerProps,
-  type PickerOption,
-  type PickerSize,
-  type AtomicDatePickerProps,
-  type AtomicSkeletonProps,
-  type SkeletonPattern,
-  type SkeletonConfig,
-  SKELETON_PATTERNS,
-  type AtomicBadgeProps,
-  type BadgeVariant,
-  type BadgeSize,
-  type AtomicSpinnerProps,
-  type SpinnerSize,
-  type SpinnerColor,
-  type EmptyStateProps,
-  AtomicTextArea,
-  type AtomicTextAreaProps,
-  AtomicSwitch,
-  type AtomicSwitchProps,
-  AtomicTouchable,
-  type AtomicTouchableProps,
-  AtomicStatusBar,
-  type AtomicStatusBarProps,
-  AtomicKeyboardAvoidingView,
-  type AtomicKeyboardAvoidingViewProps,
-} from './atoms';
+export * from './exports/atoms';
 
 // =============================================================================
 // LAYOUTS EXPORTS
 // =============================================================================
-
-export {
-  ScreenLayout,
-  AppHeader,
-  ScreenHeader,
-  Grid,
-  Container,
-  FormLayout,
-  type ScreenLayoutProps,
-  type AppHeaderProps,
-  type ScreenHeaderProps,
-  type GridProps,
-  type ContainerProps,
-  type FormLayoutProps,
-} from './layouts';
+export * from './exports/layouts';
 
 // =============================================================================
 // MOLECULES EXPORTS
 // =============================================================================
-
-export {
-  FormField,
-  ListItem,
-  SearchBar,
-  IconContainer,
-  BaseModal,
-  ConfirmationModal,
-  useConfirmationModal,
-  StepProgress,
-  List,
-  Avatar,
-  AvatarGroup,
-  AvatarUtils,
-  type AvatarProps,
-  type AvatarGroupProps,
-  type AvatarGroupItem,
-  type AvatarSize,
-  type AvatarShape,
-  type AvatarConfig,
-  type AvatarType,
-  // Media Card
-  MediaCard,
-  type MediaCardProps,
-  type MediaCardSize,
-  type MediaCardOverlayPosition,
-  // Bottom Sheet
-  BottomSheet,
-  BottomSheetModal,
-  SafeBottomSheetModalProvider,
-  FilterBottomSheet,
-  FilterSheet,
-  useBottomSheet,
-  useBottomSheetModal,
-  useListFilters,
-  type BottomSheetProps,
-  type BottomSheetModalProps,
-  type BottomSheetRef,
-  type BottomSheetModalRef,
-  type FilterOption,
-  type FilterCategory,
-  // Alerts
-  AlertBanner,
-  AlertToast,
-  AlertInline,
-  AlertModal,
-  AlertContainer,
-  AlertProvider,
-  AlertService,
-  useAlert,
-  alertService,
-  AlertType,
-  AlertMode,
-  AlertPosition,
-  type BaseModalProps,
-  type ListProps,
-  type Alert,
-  type AlertAction,
-  type AlertOptions,
-  // Calendar
-  AtomicCalendar,
-  useCalendar,
-  useCalendarNavigation,
-  useCalendarEvents,
-  CalendarService,
-  CalendarGeneration,
-  DateUtilities,
-  useCalendarStore,
-  type AtomicCalendarProps,
-  type UseCalendarReturn,
-  type CalendarEvent,
-  type CreateCalendarEventRequest,
-  type UpdateCalendarEventRequest,
-  type CalendarDay,
-  type CalendarMonth,
-  type CalendarWeek,
-  type ICalendarRepository,
-  type CalendarViewMode,
-  // Swipe Actions
-  SwipeActionButton,
-  SwipeActionUtils,
-  ACTION_PRESETS,
-  DEFAULT_SWIPE_CONFIG,
-  type SwipeActionButtonProps,
-  type SwipeActionType,
-  type SwipeActionConfig,
-  type SwipeDirection,
-  type SwipeableConfig,
-  // Navigation
-  TabsNavigator,
-  StackNavigator,
-  createTabNavigator,
-  createStackNavigator,
-  FabButton,
-  NavigationCleanupManager,
-  AppNavigation,
-  TabLabel,
-  useTabBarStyles,
-  useTabConfig,
-  type TabsNavigatorProps,
-  type StackNavigatorProps,
-  type FabButtonProps,
-  type TabScreen,
-  type TabNavigatorConfig,
-  type StackScreen,
-  type StackNavigatorConfig,
-  type BaseScreen,
-  type BaseNavigatorConfig,
-  type IconRendererProps,
-  type LabelProcessorProps,
-  type FabConfig,
-  type NavigationCleanup,
-  type BottomTabNavigationOptions,
-  type BottomTabScreenProps,
-  type StackNavigationOptions,
-  type TabLabelProps,
-  type TabBarConfig,
-  // Long Press Menu
-  type MenuAction,
-  type MenuActionTypeValue,
-  MenuActionType,
-  // Emoji
-  EmojiPicker,
-  useEmojiPicker,
-  EmojiCategory,
-  EmojiUtils,
-  type EmojiObject,
-  type EmojiPickerConfig,
-  type EmojiSelectCallback,
-  type EmojiPickerState,
-  type EmojiPickerProps,
-  type UseEmojiPickerOptions,
-  type UseEmojiPickerReturn,
-  // Countdown
-  Countdown,
-  TimeUnit,
-  CountdownHeader,
-  useCountdown,
-  calculateTimeRemaining,
-  padNumber,
-  getNextDayStart,
-  getNextYearStart,
-  type CountdownProps,
-  type TimeUnitProps,
-  type CountdownHeaderProps,
-  type UseCountdownOptions,
-  type UseCountdownReturn,
-  type TimeRemaining,
-  type CountdownTarget,
-  type CountdownFormatOptions,
-  type CountdownDisplayConfig,
-  // Step Header
-  StepHeader,
-  type StepHeaderProps,
-  type StepHeaderConfig,
-  // Splash
-  SplashScreen,
-  useSplashFlow,
-  type SplashScreenProps,
-  type SplashColors,
-  type UseSplashFlowOptions,
-  type UseSplashFlowResult,
-} from './molecules';
+export * from './exports/molecules';
 
 // =============================================================================
 // ORGANISMS EXPORTS
 // =============================================================================
-
-export {
-  FormContainer,
-  type FormContainerProps,
-} from './organisms';
+export * from './exports/organisms';
 
 // =============================================================================
 // SAFE AREA EXPORTS
 // =============================================================================
-
-export * from './safe-area';
+export * from './exports/safe-area';
 
 // =============================================================================
 // VARIANT UTILITIES
 // =============================================================================
-
-export {
-  createVariants,
-  type VariantConfig,
-  type VariantProps,
-} from './presentation/utils/variants/core';
-
-export {
-  createAdvancedVariants,
-  type AdvancedVariantConfig,
-  type CompoundVariant,
-} from './presentation/utils/variants/compound';
-
-export {
-  conditionalStyle,
-  responsiveStyle,
-  combineStyles,
-} from './presentation/utils/variants/helpers';
+export * from './exports/variants';
 
 // =============================================================================
 // UTILITIES
 // =============================================================================
-
-export * from './utilities';
+export * from './exports/utilities';

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -1,145 +1,16 @@
 /**
- * ScreenLayout - Universal Screen Container Component
- *
- * Provides consistent layout structure for all screens:
- * - SafeAreaView with configurable edges
- * - Optional ScrollView for content
- * - Theme-aware background colors
- * - Optional header/footer slots
- * - Consistent spacing and padding
- *
- * Usage:
- * <ScreenLayout>
- *   <View>Your content here</View>
- * </ScreenLayout>
- *
- * Advanced:
- * <ScreenLayout
- *   scrollable={false}
- *   edges={['top', 'bottom']}
- *   header={<CustomHeader />}
- * >
- *   <View>Content</View>
- * </ScreenLayout>
+ * ScreenLayout Component
+ * Refactored: Extracted types, styles, and ContentWrapper
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, type ViewStyle, type RefreshControlProps } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets, type Edge } from '../../safe-area';
+import { View, ScrollView } from 'react-native';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
-import { AtomicKeyboardAvoidingView } from '../../atoms';
-
-/**
- * NOTE: This component now works in conjunction with the SafeAreaProvider
- * from our safe-area module. The SafeAreaProvider should wrap your app root:
- * 
- * import { SafeAreaProvider } from '../../index';
- * 
- * function App() {
- *   return (
- *     <SafeAreaProvider>
- *       <YourApp />
- *     </SafeAreaProvider>
- *   );
- * }
- */
-
-export interface ScreenLayoutProps {
-  /**
-   * Content to render inside the layout
-   */
-  children: React.ReactNode;
-
-  /**
-   * Enable scrolling (default: true)
-   * Set to false for screens with custom scroll logic
-   */
-  scrollable?: boolean;
-
-  /**
-   * Safe area edges to apply (default: ['top'])
-   * Common values:
-   * - ['top'] - For screens with bottom tabs
-   * - ['top', 'bottom'] - For modal screens
-   * - [] - No safe area (use cautiously)
-   */
-  edges?: Edge[];
-
-  /**
-   * Optional header component
-   * Rendered above scrollable content
-   */
-  header?: React.ReactNode;
-
-  /**
-   * Optional footer component
-   * Rendered below scrollable content
-   */
-  footer?: React.ReactNode;
-
-  /**
-   * Override background color
-   * If not provided, uses theme's backgroundPrimary
-   */
-  backgroundColor?: string;
-
-  /**
-   * Custom container style
-   */
-  containerStyle?: ViewStyle;
-
-  /**
-   * Custom content container style (for ScrollView)
-   */
-  contentContainerStyle?: ViewStyle;
-
-  /**
-   * Test ID for automation
-   */
-  testID?: string;
-
-  /**
-   * Hide vertical scroll indicator (default: false)
-   */
-  hideScrollIndicator?: boolean;
-
-  /**
-   * Enable keyboard avoiding behavior (default: false)
-   * Useful for screens with inputs
-   */
-  keyboardAvoiding?: boolean;
-
-  /**
-   * Accessibility label for the layout
-   */
-  accessibilityLabel?: string;
-
-  /**
-   * Accessibility hint for the layout
-   */
-  accessibilityHint?: string;
-
-  /**
-   * Whether the layout is accessible
-   */
-  accessible?: boolean;
-
-  /**
-   * Enable responsive content width and centering (default: true)
-   */
-  responsiveEnabled?: boolean;
-
-  /**
-   * Maximum content width override
-   */
-  maxWidth?: number;
-
-  /**
-   * RefreshControl component for pull-to-refresh
-   */
-  refreshControl?: React.ReactElement<RefreshControlProps>;
-}
+import { ContentWrapper } from './components/ContentWrapper';
+import { getScreenLayoutStyles } from './styles/screenLayoutStyles';
+import type { ScreenLayoutProps } from './types';
 
 export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   children,
@@ -157,7 +28,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   maxWidth,
   refreshControl,
 }) => {
-  // Automatically uses current theme from global store
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
@@ -172,51 +42,14 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   const horizontalPadding = responsiveEnabled ? layoutConfig.horizontalPadding : tokens.spacing.md;
   const verticalPadding = responsiveEnabled ? layoutConfig.verticalPadding : tokens.spacing.lg;
 
-  const styles = useMemo(() => StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    keyboardAvoidingView: {
-      flex: 1,
-    },
-    responsiveWrapper: {
-      flex: 1,
-      width: '100%',
-      ...(finalMaxWidth ? { maxWidth: finalMaxWidth, alignSelf: 'center' as const } : {}),
-    },
-    content: {
-      flex: 1,
-      paddingTop: verticalPadding,
-      paddingHorizontal: horizontalPadding,
-    },
-    scrollView: {
-      flex: 1,
-    },
-    scrollContent: {
-      flexGrow: 1,
-      paddingTop: verticalPadding,
-      paddingHorizontal: horizontalPadding,
-      paddingBottom: verticalPadding,
-    },
-  }), [tokens, finalMaxWidth, horizontalPadding, verticalPadding]);
+  // Pre-compute styles
+  const styles = useMemo(
+    () => getScreenLayoutStyles(tokens, { maxWidth: finalMaxWidth, horizontalPadding, verticalPadding }),
+    [tokens, finalMaxWidth, horizontalPadding, verticalPadding]
+  );
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
 
-  // Content wrapper - optionally with KeyboardAvoidingView
-  // Uses 'padding' behavior which works consistently cross-platform
-  const ContentWrapper: React.FC<{ children: React.ReactNode }> = ({ children: wrapperChildren }) => {
-    if (keyboardAvoiding) {
-      return (
-        <AtomicKeyboardAvoidingView
-          style={styles.keyboardAvoidingView}
-        >
-          {wrapperChildren}
-        </AtomicKeyboardAvoidingView>
-      );
-    }
-    return <>{wrapperChildren}</>;
-  };
-
   // Non-scrollable layout
   if (!scrollable) {
     return (
@@ -225,7 +58,7 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
         edges={edges}
         testID={testID}
       >
-        <ContentWrapper>
+        <ContentWrapper keyboardAvoiding={keyboardAvoiding}>
           <View style={styles.responsiveWrapper}>
             {header}
             <View style={[styles.content, contentContainerStyle]}>
@@ -245,7 +78,7 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
       edges={edges}
       testID={testID}
     >
-      <ContentWrapper>
+      <ContentWrapper keyboardAvoiding={keyboardAvoiding}>
         <View style={styles.responsiveWrapper}>
           {header}
           <ScrollView
@@ -263,3 +96,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
     </SafeAreaView>
   );
 };
+
+// Re-export types for convenience
+export type { ScreenLayoutProps } from './types';