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

package/src/atoms/picker/styles/pickerStyles.ts

@@ -0,0 +1,223 @@
+/**
+ * AtomicPicker Styles
+ */
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+
+export type PickerSize = 'sm' | 'md' | 'lg';
+
+export interface PickerContainerStyles {
+    base: ViewStyle;
+    size: Record<PickerSize, ViewStyle>;
+    state: {
+        error: ViewStyle;
+        disabled: ViewStyle;
+    };
+}
+
+export interface PickerLabelStyles {
+    base: TextStyle;
+    size: Record<PickerSize, TextStyle>;
+}
+
+export interface PickerValueStyles {
+    base: TextStyle;
+    size: Record<PickerSize, TextStyle>;
+}
+
+export interface PickerPlaceholderStyles {
+    base: TextStyle;
+    size: Record<PickerSize, TextStyle>;
+}
+
+export const getPickerContainerStyles = (tokens: DesignTokens): PickerContainerStyles => ({
+    base: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderWidth: 1,
+        borderColor: tokens.colors.outline,
+        backgroundColor: tokens.colors.surface,
+        borderRadius: tokens.borders.radius.md,
+    },
+    size: {
+        sm: {
+            paddingHorizontal: tokens.spacing.sm,
+            paddingVertical: tokens.spacing.xs,
+            minHeight: 36,
+        },
+        md: {
+            paddingHorizontal: tokens.spacing.md,
+            paddingVertical: tokens.spacing.sm,
+            minHeight: 48,
+        },
+        lg: {
+            paddingHorizontal: tokens.spacing.lg,
+            paddingVertical: tokens.spacing.md,
+            minHeight: 56,
+        },
+    },
+    state: {
+        error: {
+            borderColor: tokens.colors.error,
+        },
+        disabled: {
+            opacity: tokens.opacity.disabled,
+        },
+    },
+});
+
+export const getPickerLabelStyles = (tokens: DesignTokens): PickerLabelStyles => ({
+    base: {
+        color: tokens.colors.textPrimary,
+        marginBottom: tokens.spacing.xs,
+    },
+    size: {
+        sm: { fontSize: tokens.typography.bodySmall.fontSize },
+        md: { fontSize: tokens.typography.bodyMedium.fontSize },
+        lg: { fontSize: tokens.typography.bodyLarge.fontSize },
+    },
+});
+
+export const getPickerValueStyles = (tokens: DesignTokens): PickerValueStyles => ({
+    base: {
+        color: tokens.colors.textPrimary,
+        flex: 1,
+    },
+    size: {
+        sm: { fontSize: tokens.typography.bodySmall.fontSize },
+        md: { fontSize: tokens.typography.bodyMedium.fontSize },
+        lg: { fontSize: tokens.typography.bodyLarge.fontSize },
+    },
+});
+
+export const getPickerPlaceholderStyles = (tokens: DesignTokens): PickerPlaceholderStyles => ({
+    base: {
+        color: tokens.colors.textTertiary,
+        flex: 1,
+    },
+    size: {
+        sm: { fontSize: tokens.typography.bodySmall.fontSize },
+        md: { fontSize: tokens.typography.bodyMedium.fontSize },
+        lg: { fontSize: tokens.typography.bodyLarge.fontSize },
+    },
+});
+
+export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
+    color: tokens.colors.error,
+    fontSize: tokens.typography.bodySmall.fontSize,
+    marginTop: tokens.spacing.xs,
+});
+
+// Modal styles
+export const getModalOverlayStyles = (tokens: DesignTokens): ViewStyle => ({
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+});
+
+export const getModalContainerStyles = (tokens: DesignTokens, bottomInset: number): ViewStyle => ({
+    backgroundColor: tokens.colors.surface,
+    borderTopLeftRadius: tokens.borders.radius.lg,
+    borderTopRightRadius: tokens.borders.radius.lg,
+    maxHeight: '80%',
+    paddingBottom: bottomInset,
+});
+
+export const getModalHeaderStyles = (tokens: DesignTokens): ViewStyle => ({
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: tokens.spacing.md,
+    paddingVertical: tokens.spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: tokens.colors.outline,
+});
+
+export const getModalTitleStyles = (tokens: DesignTokens): TextStyle => ({
+    fontSize: tokens.typography.titleLarge.fontSize,
+    fontWeight: '600',
+    color: tokens.colors.onSurface,
+});
+
+export const getSearchContainerStyles = (tokens: DesignTokens): ViewStyle => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: tokens.colors.surfaceVariant,
+    borderRadius: tokens.borders.radius.md,
+    marginHorizontal: tokens.spacing.md,
+    marginVertical: tokens.spacing.sm,
+    paddingHorizontal: tokens.spacing.md,
+    paddingVertical: tokens.spacing.sm,
+    gap: tokens.spacing.sm,
+});
+
+export const getSearchInputStyles = (tokens: DesignTokens): TextStyle => ({
+    flex: 1,
+    fontSize: tokens.typography.bodyMedium.fontSize,
+    color: tokens.colors.onSurface,
+    paddingVertical: 0,
+});
+
+export const getOptionContainerStyles = (
+    tokens: DesignTokens,
+    selected: boolean,
+    disabled: boolean
+): ViewStyle => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: tokens.spacing.md,
+    paddingVertical: tokens.spacing.md,
+    gap: tokens.spacing.md,
+    backgroundColor: selected ? tokens.colors.surfaceVariant : 'transparent',
+    opacity: disabled ? tokens.opacity.disabled : 1,
+});
+
+export const getOptionTextStyles = (tokens: DesignTokens, selected: boolean): TextStyle => ({
+    fontSize: tokens.typography.bodyLarge.fontSize,
+    color: selected ? tokens.colors.primary : tokens.colors.onSurface,
+    fontWeight: selected ? '600' : '400',
+});
+
+export const getOptionDescriptionStyles = (tokens: DesignTokens): TextStyle => ({
+    fontSize: tokens.typography.bodySmall.fontSize,
+    color: tokens.colors.textSecondary,
+    marginTop: tokens.spacing.xs,
+});
+
+export const getEmptyStateStyles = (tokens: DesignTokens): ViewStyle => ({
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: tokens.spacing.xl,
+    gap: tokens.spacing.md,
+});
+
+export const getEmptyStateTextStyles = (tokens: DesignTokens): TextStyle => ({
+    fontSize: tokens.typography.bodyMedium.fontSize,
+    color: tokens.colors.textSecondary,
+    textAlign: 'center',
+});
+
+// Chip styles
+export const getChipContainerStyles = (tokens: DesignTokens): ViewStyle => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: tokens.spacing.xs,
+    marginTop: tokens.spacing.sm,
+});
+
+export const getChipStyles = (tokens: DesignTokens): ViewStyle => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: tokens.colors.surfaceVariant,
+    borderRadius: tokens.borders.radius.full,
+    paddingHorizontal: tokens.spacing.sm,
+    paddingVertical: tokens.spacing.xs,
+    gap: tokens.spacing.xs,
+});
+
+export const getChipTextStyles = (tokens: DesignTokens): TextStyle => ({
+    fontSize: tokens.typography.bodySmall.fontSize,
+    color: tokens.colors.onSurface,
+});

package/src/atoms/picker/types/index.ts

@@ -0,0 +1,42 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { IconColor } from '../../AtomicIcon';
+
+/**
+ * Picker option item
+ *
+ * icon: Any MaterialIcons name
+ * @see https://fonts.google.com/icons
+ */
+export interface PickerOption {
+  label: string;
+  value: string;
+  icon?: string; // MaterialIcons name
+  disabled?: boolean;
+  description?: string;
+  testID?: string;
+}
+
+export type PickerSize = 'sm' | 'md' | 'lg';
+
+export interface AtomicPickerProps {
+  value: string | string[];
+  onChange: (value: string | string[]) => void;
+  options: PickerOption[];
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+  multiple?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  autoClose?: boolean;
+  color?: IconColor;
+  size?: PickerSize;
+  modalTitle?: string;
+  emptyMessage?: string;
+  clearAccessibilityLabel?: string;
+  closeAccessibilityLabel?: string;
+  style?: ViewStyle | ViewStyle[];
+  labelStyle?: TextStyle | TextStyle[];
+  testID?: string;
+}

package/src/index.ts

@@ -1,29 +1,115 @@
 /**
  * @umituz/react-native-design-system
  * Universal design system for React Native apps
+ *
+ * Consolidated package including:
+ * - Atoms (primitive UI components)
+ * - Molecules (composite components)
+ * - Organisms (complex UI patterns)
+ * - Theme (design tokens, colors)
+ * - Typography (text styles)
+ * - Responsive (screen utilities)
  */
 
+// =============================================================================
+// THEME EXPORTS
+// =============================================================================
+
 export {
+  useAppDesignTokens,
   useCommonStyles,
-} from '@umituz/react-native-design-system-theme';
+  useDesignSystemTheme,
+  useTheme,
+  useThemedStyles,
+  useThemedStyleSheet,
+  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 Theme,
+  type ExtendedColorPalette,
+  type NavigationTheme,
+} from './theme';
 
-export {
-  createVariants,
-  type VariantConfig,
-  type VariantProps,
-} from './presentation/utils/variants/core';
+// =============================================================================
+// TYPOGRAPHY EXPORTS
+// =============================================================================
 
 export {
-  createAdvancedVariants,
-  type AdvancedVariantConfig,
-  type CompoundVariant,
-} from './presentation/utils/variants/compound';
+  getTextColor,
+  getTextStyle,
+  isTextStyleVariant,
+  getAllTextStyleVariants,
+  clearTypographyCache,
+  clearColorCache,
+  isValidHexColor,
+  isValidRgbColor,
+  isValidHslColor,
+  isValidNamedColor,
+  isValidColor,
+  getColorFormat,
+  normalizeColor,
+  type TextStyleVariant,
+  type ColorVariant,
+} from './typography';
+
+// =============================================================================
+// RESPONSIVE EXPORTS
+// =============================================================================
 
 export {
-  conditionalStyle,
-  responsiveStyle,
-  combineStyles,
-} from './presentation/utils/variants/helpers';
+  useResponsive,
+  getScreenDimensions,
+  isSmallPhone,
+  isTablet,
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveHorizontalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveGridColumns,
+  getResponsiveMaxWidth,
+  getResponsiveFontSize,
+  isLandscape,
+  getDeviceType,
+  getMinTouchTarget,
+  getSpacingMultiplier,
+  IOS_HIG,
+  PLATFORM_CONSTANTS,
+  isValidTouchTarget,
+  DeviceType,
+} from './responsive';
+
+// =============================================================================
+// ATOMS EXPORTS
+// =============================================================================
 
 export {
   AtomicText,
@@ -62,55 +148,50 @@ export {
   type PickerOption,
   type PickerSize,
   type AtomicDatePickerProps,
-} from '@umituz/react-native-design-system-atoms';
+} from './atoms';
 
-export {
-  ScreenLayout,
-} from '@umituz/react-native-design-system-organisms';
+// =============================================================================
+// MOLECULES EXPORTS
+// =============================================================================
 
 export {
   FormField,
   ListItem,
   SearchBar,
-  SectionCard,
   IconContainer,
   ScreenHeader,
-  SectionHeader,
-  SectionContainer,
-  GridContainer,
   ConfirmationModal,
   useConfirmationModal,
-} from '@umituz/react-native-design-system-molecules';
+} from './molecules';
+
+// =============================================================================
+// ORGANISMS EXPORTS
+// =============================================================================
 
 export {
-  useResponsive,
-  getScreenDimensions,
-  isSmallPhone,
-  isTablet,
-  getResponsiveLogoSize,
-  getResponsiveInputHeight,
-  getResponsiveHorizontalPadding,
-  getResponsiveBottomPosition,
-  getResponsiveFABPosition,
-  getResponsiveModalMaxHeight,
-  getResponsiveMinModalHeight,
-  getResponsiveIconContainerSize,
-  getResponsiveGridColumns,
-  getResponsiveMaxWidth,
-  getResponsiveFontSize,
-  isLandscape,
-  getDeviceType,
-  getMinTouchTarget,
-  getSpacingMultiplier,
-  IOS_HIG,
-  PLATFORM_CONSTANTS,
-  isValidTouchTarget,
-  DeviceType,
-} from '@umituz/react-native-design-system-responsive';
+  ScreenLayout,
+  AppHeader,
+  FormContainer,
+} from './organisms';
+
+// =============================================================================
+// VARIANT UTILITIES
+// =============================================================================
 
 export {
-  useAppDesignTokens,
-  STATIC_TOKENS,
-  type DesignTokens,
-  withAlpha,
-} from '@umituz/react-native-design-system-theme';
+  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';

package/src/molecules/ConfirmationModal.tsx

@@ -0,0 +1,42 @@
+/**
+ * ConfirmationModal - Universal Confirmation Dialog
+ *
+ * A reusable confirmation modal for destructive and important actions.
+ * Follows Material Design 3 dialog patterns and accessibility guidelines.
+ *
+ * Features:
+ * - Multiple variants (default, destructive, warning, success)
+ * - Configurable text and icons
+ * - Backdrop dismissal
+ * - Full keyboard and screen reader support
+ * - Theme-aware styling
+ *
+ * @example
+ * ```tsx
+ * // Destructive confirmation (delete)
+ * <ConfirmationModal
+ *   visible={showDeleteModal}
+ *   variant="destructive"
+ *   title="Delete Item?"
+ *   message="This action cannot be undone. All data will be permanently deleted."
+ *   confirmText="Delete"
+ *   cancelText="Cancel"
+ *   onConfirm={handleDelete}
+ *   onCancel={() => setShowDeleteModal(false)}
+ * />
+ *
+ * // Generic confirmation
+ * <ConfirmationModal
+ *   visible={showConfirmModal}
+ *   variant="default"
+ *   title="Confirm Action"
+ *   message="Are you sure you want to proceed?"
+ *   onConfirm={handleConfirm}
+ *   onCancel={() => setShowConfirmModal(false)}
+ * />
+ * ```
+ */
+
+export { ConfirmationModal } from './ConfirmationModalMain';
+export { useConfirmationModal } from './confirmation-modal/useConfirmationModal';
+export type { ConfirmationModalProps, ConfirmationModalVariant } from './confirmation-modal/types';

package/src/molecules/ConfirmationModalContent.tsx

@@ -0,0 +1,87 @@
+/**
+ * ConfirmationModal Content Component
+ *
+ * Content component for confirmation modal
+ */
+
+import React from 'react';
+import { View, ViewStyle, StyleProp } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { ConfirmationModalVariant } from './confirmation-modal/types/';
+import {
+  getVariantConfig,
+  getModalContainerStyle,
+  getIconContainerStyle,
+  getTitleContainerStyle,
+  getMessageContainerStyle,
+  getButtonStyle,
+} from './confirmation-modal/styles/confirmationModalStyles';
+import {
+  ConfirmationModalIcon,
+  ConfirmationModalTitle,
+  ConfirmationModalMessage,
+  ConfirmationModalButtons,
+} from './confirmation-modal/components';
+
+const useConfirmButtonStyle = (
+  variant: ConfirmationModalVariant,
+  tokens: ReturnType<typeof useAppDesignTokens>
+) => {
+  return React.useCallback(() => {
+    const baseStyle = getButtonStyle();
+    const variantStyles = [];
+
+    if (variant === 'destructive') variantStyles.push({ backgroundColor: tokens.colors.error });
+    if (variant === 'warning') variantStyles.push({ backgroundColor: tokens.colors.warning });
+    if (variant === 'success') variantStyles.push({ backgroundColor: tokens.colors.success });
+
+    return [baseStyle, ...variantStyles];
+  }, [variant, tokens.colors]);
+};
+
+export const ConfirmationModalContent: React.FC<{
+  tokens: ReturnType<typeof useAppDesignTokens>;
+  variant: ConfirmationModalVariant;
+  title: string;
+  message: string;
+  confirmText: string;
+  cancelText: string;
+  icon?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+}> = ({ tokens, variant, title, message, confirmText, cancelText, icon, onConfirm, onCancel, style, testID }) => {
+  const variantConfig = getVariantConfig(variant as 'default' | 'destructive' | 'warning' | 'success', tokens);
+  const finalIcon = icon || variantConfig.icon;
+  const getConfirmButtonStyle = useConfirmButtonStyle(variant, tokens);
+
+  return (
+    <View style={[getModalContainerStyle(tokens), style]}>
+      <View style={getIconContainerStyle(tokens)}>
+        <ConfirmationModalIcon
+          icon={finalIcon}
+          iconColor={variantConfig.iconColor}
+          testID={testID}
+        />
+      </View>
+
+      <View style={getTitleContainerStyle(tokens)}>
+        <ConfirmationModalTitle title={title} tokens={tokens} testID={testID} />
+      </View>
+
+      <View style={getMessageContainerStyle(tokens)}>
+        <ConfirmationModalMessage message={message} tokens={tokens} testID={testID} />
+      </View>
+
+      <ConfirmationModalButtons
+        confirmText={confirmText}
+        cancelText={cancelText}
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+        confirmButtonStyle={getConfirmButtonStyle()}
+        testID={testID}
+      />
+    </View>
+  );
+};

package/src/molecules/ConfirmationModalMain.tsx

@@ -0,0 +1,91 @@
+/**
+ * ConfirmationModal Main Component
+ *
+ * Main confirmation modal component
+ */
+
+import React from 'react';
+import { View, Modal, TouchableOpacity } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { ConfirmationModalProps } from './confirmation-modal/types/';
+import {
+  getModalOverlayStyle,
+  getBackdropStyle,
+} from './confirmation-modal/styles/confirmationModalStyles';
+import { ConfirmationModalContent } from './ConfirmationModalContent';
+
+const useBackdropHandler = (backdropDismissible: boolean, onCancel: () => void) => {
+  return React.useCallback(() => {
+    if (backdropDismissible) {
+      onCancel();
+    }
+  }, [backdropDismissible, onCancel]);
+};
+
+const ConfirmationModalBackdrop: React.FC<{
+  showBackdrop: boolean;
+  onBackdropPress: () => void;
+  testID: string;
+}> = ({ showBackdrop, onBackdropPress, testID }) => {
+  if (!showBackdrop) return null;
+
+  return (
+    <TouchableOpacity
+      style={getBackdropStyle()}
+      activeOpacity={1}
+      onPress={onBackdropPress}
+      testID={`${testID}-backdrop`}
+    />
+  );
+};
+
+export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  visible,
+  title,
+  message,
+  variant = 'default',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  icon,
+  onConfirm,
+  onCancel,
+  showBackdrop = true,
+  backdropDismissible = true,
+  style,
+  testID = 'atomic-confirmation-modal',
+}) => {
+  const tokens = useAppDesignTokens();
+  const handleBackdropPress = useBackdropHandler(backdropDismissible, onCancel);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      onRequestClose={onCancel}
+      statusBarTranslucent
+      testID={testID}
+    >
+      <View style={getModalOverlayStyle(tokens)}>
+        <ConfirmationModalBackdrop
+          showBackdrop={showBackdrop}
+          onBackdropPress={handleBackdropPress}
+          testID={testID}
+        />
+
+        <ConfirmationModalContent
+          tokens={tokens}
+          variant={variant}
+          title={title}
+          message={message}
+          confirmText={confirmText}
+          cancelText={cancelText}
+          icon={icon}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          style={style}
+          testID={testID}
+        />
+      </View>
+    </Modal>
+  );
+};