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

package/src/atoms/input/types.ts

@@ -0,0 +1,72 @@
+import type { StyleProp } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { IconName } from '../AtomicIcon';
+
+export type AtomicInputVariant = 'outlined' | 'filled' | 'flat';
+export type AtomicInputState = 'default' | 'error' | 'success' | 'disabled';
+export type AtomicInputSize = 'sm' | 'md' | 'lg';
+
+export interface AtomicInputProps {
+  /** Input label */
+  label?: string;
+  /** Current input value */
+  value?: string;
+  /** Value change callback */
+  onChangeText?: (text: string) => void;
+  /** Input variant (outlined, filled, flat) */
+  variant?: AtomicInputVariant;
+  /** Input state (default, error, success, disabled) */
+  state?: AtomicInputState;
+  /** Input size (sm, md, lg) */
+  size?: AtomicInputSize;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Helper text below input */
+  helperText?: string;
+  /** Leading icon (Ionicons name) */
+  leadingIcon?: IconName;
+  /** Trailing icon (Ionicons name) */
+  trailingIcon?: IconName;
+  /** Callback when trailing icon is pressed */
+  onTrailingIconPress?: () => void;
+  /** Show password toggle for secure inputs */
+  showPasswordToggle?: boolean;
+  /** Secure text entry (password field) */
+  secureTextEntry?: boolean;
+  /** Maximum character length */
+  maxLength?: number;
+  /** Show character counter */
+  showCharacterCount?: boolean;
+  /** Keyboard type */
+  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url' | 'number-pad' | 'decimal-pad' | 'web-search' | 'twitter' | 'numeric' | 'visible-password';
+  /** Return key type */
+  returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
+  /** Callback when submit button is pressed */
+  onSubmitEditing?: () => void;
+  /** Blur on submit */
+  blurOnSubmit?: boolean;
+  /** Auto focus */
+  autoFocus?: boolean;
+  /** Auto-capitalize */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  /** Auto-correct */
+  autoCorrect?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Input text style */
+  inputStyle?: StyleProp<TextStyle>;
+  /** Test ID for E2E testing */
+  testID?: string;
+  /** Blur callback */
+  onBlur?: () => void;
+  /** Focus callback */
+  onFocus?: () => void;
+  /** Multiline input support */
+  multiline?: boolean;
+  /** Number of lines for multiline input */
+  numberOfLines?: number;
+}
+
+export type { AtomicInputProps as InputProps };

package/src/atoms/picker/hooks/usePickerState.ts

@@ -0,0 +1,139 @@
+import { useState, useMemo } from 'react';
+import type { PickerOption } from '../../picker/types';
+
+interface UsePickerStateProps {
+  value: string | string[] | null;
+  multiple: boolean;
+  options: PickerOption[];
+  placeholder?: string;
+  autoClose?: boolean;
+  onChange: (value: string | string[]) => void;
+}
+
+export const usePickerState = ({
+  value,
+  multiple,
+  options,
+  placeholder,
+  autoClose = true,
+  onChange,
+}: UsePickerStateProps) => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  /**
+   * Normalize value to array for consistent handling
+   */
+  const selectedValues = useMemo(() => {
+    if (multiple) {
+      return Array.isArray(value) ? value : [];
+    }
+    return value ? [value as string] : [];
+  }, [value, multiple]);
+
+  /**
+   * Get selected option objects
+   */
+  const selectedOptions = useMemo(() => {
+    return options.filter((opt) => selectedValues.includes(opt.value));
+  }, [options, selectedValues]);
+
+  /**
+   * Filter options based on search query
+   */
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery.trim()) return options;
+
+    const query = searchQuery.toLowerCase();
+    return options.filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(query) ||
+        opt.description?.toLowerCase().includes(query)
+    );
+  }, [options, searchQuery]);
+
+  /**
+   * Format display text for selected value(s)
+   */
+  const displayText = useMemo(() => {
+    if (selectedOptions.length === 0) {
+      return placeholder;
+    }
+
+    if (multiple) {
+      return selectedOptions.length === 1
+        ? selectedOptions[0]?.label || placeholder
+        : `${selectedOptions.length} selected`;
+    }
+    return selectedOptions[0]?.label || placeholder;
+  }, [selectedOptions, placeholder, multiple]);
+
+  /**
+   * Handle modal open
+   */
+  const openModal = () => {
+    setModalVisible(true);
+    setSearchQuery('');
+  };
+
+  /**
+   * Handle modal close
+   */
+  const closeModal = () => {
+    setModalVisible(false);
+    setSearchQuery('');
+  };
+
+  /**
+   * Handle option selection
+   */
+  const handleSelect = (optionValue: string) => {
+    if (multiple) {
+      const newValues = selectedValues.includes(optionValue)
+        ? selectedValues.filter((v) => v !== optionValue)
+        : [...selectedValues, optionValue];
+      onChange(newValues);
+    } else {
+      onChange(optionValue);
+      if (autoClose) {
+        closeModal();
+      }
+    }
+  };
+
+  /**
+   * Handle clear selection
+   */
+  const handleClear = () => {
+    onChange(multiple ? [] : '');
+  };
+
+  /**
+   * Handle search query change
+   */
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+  };
+
+  /**
+   * Handle chip removal
+   */
+  const handleChipRemove = (value: string) => {
+    handleSelect(value);
+  };
+
+  return {
+    modalVisible,
+    searchQuery,
+    selectedValues,
+    selectedOptions,
+    filteredOptions,
+    displayText,
+    openModal,
+    closeModal,
+    handleSelect,
+    handleClear,
+    handleSearch,
+    handleChipRemove,
+  };
+};

package/src/exports/atoms.ts

@@ -0,0 +1,69 @@
+/**
+ * Atoms Exports
+ * Primitive UI components
+ */
+
+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';

package/src/exports/device.ts

@@ -0,0 +1,58 @@
+/**
+ * Device Exports
+ * Device detection and capabilities
+ */
+
+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';

package/src/exports/layouts.ts

@@ -0,0 +1,19 @@
+/**
+ * Layouts Exports
+ * Layout components
+ */
+
+export {
+  ScreenLayout,
+  AppHeader,
+  ScreenHeader,
+  Grid,
+  Container,
+  FormLayout,
+  type ScreenLayoutProps,
+  type AppHeaderProps,
+  type ScreenHeaderProps,
+  type GridProps,
+  type ContainerProps,
+  type FormLayoutProps,
+} from '../layouts';

package/src/exports/molecules.ts

@@ -0,0 +1,166 @@
+/**
+ * Molecules Exports
+ * Composite components
+ */
+
+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,
+  useCalendarEvents,
+  useCalendarNavigation,
+  useCalendarView,
+  CalendarService,
+  CalendarGeneration,
+  DateUtilities,
+  type AtomicCalendarProps,
+  type CalendarEvent,
+  type CalendarViewMode,
+  type CreateCalendarEventRequest,
+  type UpdateCalendarEventRequest,
+  type CalendarDay,
+  type CalendarMonth,
+  type CalendarWeek,
+  type ICalendarRepository,
+  // 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';

package/src/exports/organisms.ts

@@ -0,0 +1,9 @@
+/**
+ * Organisms Exports
+ * Complex UI patterns
+ */
+
+export {
+  FormContainer,
+  type FormContainerProps,
+} from '../organisms';

package/src/exports/responsive.ts

@@ -0,0 +1,36 @@
+/**
+ * Responsive Exports
+ * Responsive utilities and breakpoints
+ */
+
+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';

package/src/exports/safe-area.ts

@@ -0,0 +1,6 @@
+/**
+ * Safe Area Exports
+ * Safe area utilities and hooks
+ */
+
+export * from '../safe-area';

package/src/exports/theme.ts

@@ -0,0 +1,47 @@
+/**
+ * Theme Exports
+ * Design tokens, colors, spacing, typography, and theme utilities
+ */
+
+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';

package/src/exports/typography.ts

@@ -0,0 +1,22 @@
+/**
+ * Typography Exports
+ * Text styles and color utilities
+ */
+
+export {
+  getTextColor,
+  getTextStyle,
+  isTextStyleVariant,
+  getAllTextStyleVariants,
+  clearTypographyCache,
+  clearColorCache,
+  isValidHexColor,
+  isValidRgbColor,
+  isValidHslColor,
+  isValidNamedColor,
+  isValidColor,
+  getColorFormat,
+  normalizeColor,
+  type TextStyleVariant,
+  type ColorVariant,
+} from '../typography';

package/src/exports/utilities.ts

@@ -0,0 +1,6 @@
+/**
+ * Utilities Exports
+ * General utilities
+ */
+
+export * from '../utilities';

package/src/exports/variants.ts

@@ -0,0 +1,22 @@
+/**
+ * Variant Utilities Exports
+ * Variant and style 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';