@umituz/react-native-design-system 2.6.62 → 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/molecules/avatar/Avatar.constants.ts

@@ -0,0 +1,103 @@
+/**
+ * Avatar Constants
+ * Configuration constants for avatar component
+ */
+
+import type { AvatarSize, AvatarShape, AvatarType, SizeConfig } from './Avatar.types';
+
+/**
+ * Size configurations (px)
+ */
+export const SIZE_CONFIGS: Record<AvatarSize, SizeConfig> = {
+  xs: {
+    size: 24,
+    fontSize: 10,
+    iconSize: 12,
+    statusSize: 6,
+    borderWidth: 1,
+  },
+  sm: {
+    size: 32,
+    fontSize: 12,
+    iconSize: 16,
+    statusSize: 8,
+    borderWidth: 1.5,
+  },
+  md: {
+    size: 40,
+    fontSize: 14,
+    iconSize: 20,
+    statusSize: 10,
+    borderWidth: 2,
+  },
+  lg: {
+    size: 56,
+    fontSize: 18,
+    iconSize: 28,
+    statusSize: 12,
+    borderWidth: 2,
+  },
+  xl: {
+    size: 80,
+    fontSize: 24,
+    iconSize: 40,
+    statusSize: 16,
+    borderWidth: 2.5,
+  },
+  xxl: {
+    size: 120,
+    fontSize: 36,
+    iconSize: 60,
+    statusSize: 20,
+    borderWidth: 3,
+  },
+};
+
+/**
+ * Avatar background colors
+ * Vibrant, accessible colors with good contrast
+ */
+export const AVATAR_COLORS = [
+  '#EF4444', // Red
+  '#F59E0B', // Orange
+  '#10B981', // Green
+  '#3B82F6', // Blue
+  '#8B5CF6', // Purple
+  '#EC4899', // Pink
+  '#14B8A6', // Teal
+  '#F97316', // Orange-Red
+  '#06B6D4', // Cyan
+  '#84CC16', // Lime
+] as const;
+
+/**
+ * Status indicator colors
+ */
+export const STATUS_COLORS = {
+  online: '#10B981', // Green
+  offline: '#9CA3AF', // Gray
+  away: '#F59E0B', // Orange
+  busy: '#EF4444', // Red
+} as const;
+
+/**
+ * Border radius configurations
+ */
+export const SHAPE_CONFIGS = {
+  circle: 9999, // Full circle
+  square: 0, // No radius
+  rounded: 8, // Rounded corners
+} as const;
+
+/**
+ * Avatar constants
+ */
+export const AVATAR_CONSTANTS = {
+  DEFAULT_SIZE: 'md' as AvatarSize,
+  DEFAULT_SHAPE: 'circle' as AvatarShape,
+  DEFAULT_TYPE: 'initials' as AvatarType,
+  DEFAULT_ICON: 'user',
+  MAX_GROUP_VISIBLE: 3,
+  GROUP_SPACING: -8, // Negative for overlap
+  FALLBACK_INITIALS: '?',
+} as const;

package/src/molecules/avatar/Avatar.types.ts

@@ -0,0 +1,64 @@
+/**
+ * Avatar Types
+ * Type definitions for avatar component
+ */
+
+/**
+ * Avatar size preset
+ */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+/**
+ * Avatar shape
+ */
+export type AvatarShape = 'circle' | 'square' | 'rounded';
+
+/**
+ * Avatar type
+ */
+export type AvatarType = 'image' | 'initials' | 'icon';
+
+/**
+ * Avatar configuration
+ */
+export interface AvatarConfig {
+  /** Avatar type */
+  type: AvatarType;
+  /** Size preset */
+  size: AvatarSize;
+  /** Shape */
+  shape: AvatarShape;
+  /** Image URI */
+  uri?: string;
+  /** User name for initials */
+  name?: string;
+  /** Icon name (if type is icon) */
+  icon?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Show status indicator */
+  showStatus?: boolean;
+  /** Status (online/offline) */
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+/**
+ * Size configuration
+ */
+export interface SizeConfig {
+  size: number;
+  fontSize: number;
+  iconSize: number;
+  statusSize: number;
+  borderWidth: number;
+}
+
+/**
+ * Avatar group configuration
+ */
+export interface AvatarGroupConfig {
+  maxVisible: number;
+  spacing: number;
+  size: AvatarSize;
+  shape: AvatarShape;
+}