@umituz/react-native-design-system 1.5.23 → 1.5.25

package/dist/presentation/molecules/AtomicConfirmationModal.d.ts

@@ -0,0 +1,72 @@
+/**
+ * AtomicConfirmationModal - 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)
+ * <AtomicConfirmationModal
+ *   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
+ * <AtomicConfirmationModal
+ *   visible={showConfirmModal}
+ *   variant="default"
+ *   title="Confirm Action"
+ *   message="Are you sure you want to proceed?"
+ *   onConfirm={handleConfirm}
+ *   onCancel={() => setShowConfirmModal(false)}
+ * />
+ * ```
+ */
+import React from 'react';
+import { AtomicConfirmationModalProps, ConfirmationModalVariant } from './confirmation-modal/types';
+export type { AtomicConfirmationModalProps };
+export type { ConfirmationModalVariant };
+export declare const AtomicConfirmationModal: React.FC<AtomicConfirmationModalProps>;
+/**
+ * Hook for managing confirmation modal state
+ *
+ * @example
+ * ```tsx
+ * const { showConfirmation, confirmationProps } = useConfirmationModal({
+ *   title: 'Delete Item?',
+ *   message: 'This cannot be undone',
+ *   variant: 'destructive',
+ *   onConfirm: handleDelete,
+ * });
+ *
+ * // In JSX
+ * <AtomicConfirmationModal {...confirmationProps} />
+ * <Button onPress={showConfirmation}>Delete</Button>
+ * ```
+ */
+export declare const useConfirmationModal: (config: {
+    title: string;
+    message: string;
+    variant?: ConfirmationModalVariant;
+    confirmText: string;
+    cancelText: string;
+    onConfirm: () => void;
+}) => {
+    showConfirmation: () => any;
+    hideConfirmation: () => any;
+    confirmationProps: AtomicConfirmationModalProps;
+};

package/dist/presentation/molecules/EmptyState.d.ts

@@ -0,0 +1,40 @@
+/**
+ * EmptyState Molecule - Universal Empty State Display
+ *
+ * Displays icon, title, and subtitle for empty data scenarios
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: Icon + AtomicText + Layout
+ *
+ * Usage:
+ * - Empty lists
+ * - Empty grids
+ * - No search results
+ * - No data states
+ */
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+export interface EmptyStateProps {
+    /** Material icon name */
+    icon: string;
+    /** Icon size (default: xl) */
+    iconSize?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** Main heading text */
+    title: string;
+    /** Descriptive subtitle text */
+    subtitle?: string;
+    /** Custom icon color (default: textTertiary) */
+    iconColor?: string;
+    /** Custom title color (default: textPrimary) */
+    titleColor?: string;
+    /** Custom subtitle color (default: textSecondary) */
+    subtitleColor?: string;
+    /** Container style override */
+    style?: ViewStyle;
+    /** Title style override */
+    titleStyle?: TextStyle;
+    /** Subtitle style override */
+    subtitleStyle?: TextStyle;
+}
+export declare const EmptyState: React.FC<EmptyStateProps>;

package/dist/presentation/molecules/FormField.d.ts

@@ -0,0 +1,21 @@
+/**
+ * FormField Molecule - Complete Form Input with Label and Error
+ *
+ * Combines AtomicText (label/error) + AtomicInput (field)
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicText + AtomicInput
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { AtomicInputProps } from '../atoms/AtomicInput';
+export interface FormFieldProps extends Omit<AtomicInputProps, 'state' | 'label'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    containerStyle?: ViewStyle;
+    style?: ViewStyle;
+}
+export declare const FormField: React.FC<FormFieldProps>;

package/dist/presentation/molecules/GridContainer.d.ts

@@ -0,0 +1,39 @@
+/**
+ * GridContainer Molecule - Responsive Grid Layout
+ *
+ * Provides flexible grid layout with configurable columns and gap
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: View + Responsive Layout
+ *
+ * Usage:
+ * - Stats grids (2 columns)
+ * - Action grids (2 columns)
+ * - Product grids (2-3 columns)
+ * - Gallery grids (3-4 columns)
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface GridContainerProps {
+    /** Number of columns (default: 2) */
+    columns?: 2 | 3 | 4;
+    /** Gap between items in pixels (default: 8) */
+    gap?: number;
+    /** Container style override */
+    style?: ViewStyle;
+    /** Grid items to render */
+    children: React.ReactNode;
+}
+export interface GridItemProps {
+    /** Item content */
+    children: React.ReactNode;
+    /** Item style override */
+    style?: ViewStyle;
+}
+declare const GridContainerComponent: React.FC<GridContainerProps>;
+export declare const GridItem: React.FC<GridItemProps>;
+export declare const GridContainer: typeof GridContainerComponent & {
+    Item: typeof GridItem;
+};
+export {};

package/dist/presentation/molecules/IconContainer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * IconContainer Molecule Component
+ *
+ * Standardized icon container with consistent sizing and styling.
+ * Used throughout app for icon displays in lists, cards, and settings.
+ *
+ * Features:
+ * - Consistent sizing system
+ * - Optional background circle
+ * - Optional gradient background
+ * - Theme-aware colors
+ * - Accessibility support
+ *
+ * Atomic Design: Molecule (View + Icon)
+ */
+import React from 'react';
+interface IconContainerProps {
+    icon: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    backgroundColor?: string;
+    gradient?: string[];
+    withBorder?: boolean;
+    borderColor?: string;
+    style?: object;
+    testID?: string;
+}
+export declare const IconContainer: React.FC<IconContainerProps>;
+export {};

package/dist/presentation/molecules/ListItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ListItemProps } from './listitem/types';
+export type { ListItemProps };
+export declare const ListItem: React.FC<ListItemProps>;

package/dist/presentation/molecules/ScreenHeader.d.ts

@@ -0,0 +1,54 @@
+/**
+ * ScreenHeader Component - {{APP_NAME}}
+ *
+ * Reusable screen header with consistent back button placement
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - Top-left back button (arrow-back icon)
+ * - Centered title text
+ * - Optional right action button
+ * - Consistent spacing and layout
+ * - Works with all 100+ generated apps
+ *
+ * CRITICAL: Back button MUST ALWAYS be top-left (never bottom, never center)
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface ScreenHeaderProps {
+    /** Screen title (centered) */
+    title: string;
+    /** Optional right action button */
+    rightAction?: React.ReactNode;
+    /** Custom back button action (default: navigation.goBack()) */
+    onBackPress?: () => void;
+    /** Hide back button (rare cases only) */
+    hideBackButton?: boolean;
+    /** Additional header style */
+    style?: ViewStyle;
+    /** Test ID for E2E testing */
+    testID?: string;
+}
+/**
+ * ScreenHeader Component
+ *
+ * @example
+ * // Basic usage (most common)
+ * <ScreenHeader title="Settings" />
+ *
+ * @example
+ * // With right action
+ * <ScreenHeader
+ *   title="Edit Profile"
+ *   rightAction={<TouchableOpacity onPress={handleSave}><Text>Save</Text></TouchableOpacity>}
+ * />
+ *
+ * @example
+ * // Custom back action
+ * <ScreenHeader
+ *   title="Unsaved Changes"
+ *   onBackPress={handleUnsavedChanges}
+ * />
+ */
+export declare const ScreenHeader: React.FC<ScreenHeaderProps>;
+export default ScreenHeader;

package/dist/presentation/molecules/SearchBar.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SearchBar Molecule - Search Input with Icon and Clear Button
+ *
+ * Combines AtomicInput + AtomicIcon + AtomicButton
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicInput + AtomicIcon + TouchableOpacity
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { AtomicInputProps } from '../atoms/AtomicInput';
+export interface SearchBarProps extends Omit<AtomicInputProps, 'leftIcon' | 'rightIcon'> {
+    onClear?: () => void;
+    containerStyle?: ViewStyle;
+}
+export declare const SearchBar: React.FC<SearchBarProps>;

package/dist/presentation/molecules/SectionCard.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SectionCard Molecule Component
+ *
+ * Reusable section card with title and content area.
+ * Used throughout settings screens for consistent grouping.
+ *
+ * Features:
+ * - Automatic theme-aware styling
+ * - Uppercase section titles with proper spacing
+ * - Built on AtomicCard for consistency
+ * - Flexible content area
+ *
+ * Atomic Design: Molecule (Card + Text)
+ */
+import React from 'react';
+interface SectionCardProps {
+    title: string;
+    children: React.ReactNode;
+    style?: object;
+    contentStyle?: object;
+    testID?: string;
+}
+export declare const SectionCard: React.FC<SectionCardProps>;
+export {};

package/dist/presentation/molecules/SectionContainer.d.ts

@@ -0,0 +1,32 @@
+/**
+ * SectionContainer Molecule - Universal Section Wrapper
+ *
+ * Provides consistent section layout with optional title
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: View + AtomicText + Layout
+ *
+ * Usage:
+ * - Home screen sections
+ * - Dashboard sections
+ * - Settings groups
+ * - Content sections
+ */
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+export interface SectionContainerProps {
+    /** Section title (optional) */
+    title?: string;
+    /** Section title color (default: textPrimary) */
+    titleColor?: string;
+    /** Section title style override */
+    titleStyle?: TextStyle;
+    /** Container style override */
+    style?: ViewStyle;
+    /** Content to render inside section */
+    children: React.ReactNode;
+    /** Right action element (e.g., "See All" link) */
+    rightAction?: React.ReactNode;
+}
+export declare const SectionContainer: React.FC<SectionContainerProps>;

package/dist/presentation/molecules/SectionHeader.d.ts

@@ -0,0 +1,36 @@
+/**
+ * SectionHeader Molecule - Universal Section Header
+ *
+ * Displays section title with optional subtitle
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicText + Layout
+ *
+ * Usage:
+ * - List headers
+ * - Grid headers
+ * - Section dividers
+ * - Screen headers
+ */
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+export interface SectionHeaderProps {
+    /** Main heading text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Custom title color (default: textPrimary) */
+    titleColor?: string;
+    /** Custom subtitle color (default: textSecondary) */
+    subtitleColor?: string;
+    /** Container style override */
+    style?: ViewStyle;
+    /** Title style override */
+    titleStyle?: TextStyle;
+    /** Subtitle style override */
+    subtitleStyle?: TextStyle;
+    /** Right action element (e.g., button, icon) */
+    rightAction?: React.ReactNode;
+}
+export declare const SectionHeader: React.FC<SectionHeaderProps>;

package/dist/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.d.ts

@@ -0,0 +1,49 @@
+/**
+ * AtomicConfirmationModal Style Utilities
+ *
+ * Styling functions for confirmation modal component
+ */
+import { ViewStyle } from 'react-native';
+import { ConfirmationModalVariant, ConfirmationModalVariantConfig } from '../types';
+import type { DesignTokens } from '@umituz/react-native-theme';
+/**
+ * Get variant configuration (icon and color only)
+ * Note: Confirm text is handled in component with translations
+ */
+export declare const getVariantConfig: (variant: ConfirmationModalVariant, tokens: DesignTokens) => Omit<ConfirmationModalVariantConfig, "confirmText">;
+/**
+ * Get modal overlay style
+ */
+export declare const getModalOverlayStyle: (tokens: DesignTokens) => ViewStyle;
+/**
+ * Get backdrop style (invisible layer for dismissing)
+ */
+export declare const getBackdropStyle: () => ViewStyle;
+/**
+ * Get modal container style
+ */
+export declare const getModalContainerStyle: (tokens: DesignTokens) => ViewStyle;
+/**
+ * Get icon container style
+ */
+export declare const getIconContainerStyle: (tokens: DesignTokens) => ViewStyle;
+/**
+ * Get title container style
+ */
+export declare const getTitleContainerStyle: (tokens: DesignTokens) => ViewStyle;
+/**
+ * Get message container style
+ */
+export declare const getMessageContainerStyle: (tokens: DesignTokens) => ViewStyle;
+/**
+ * Get button container style
+ */
+export declare const getButtonContainerStyle: (tokens: DesignTokens) => ViewStyle;
+/**
+ * Get button style
+ */
+export declare const getButtonStyle: () => ViewStyle;
+/**
+ * Get confirm button variant based on modal variant
+ */
+export declare const getConfirmButtonVariant: (variant: ConfirmationModalVariant) => "primary" | "secondary" | "tertiary" | "outline" | "ghost";

package/dist/presentation/molecules/confirmation-modal/types/index.d.ts

@@ -0,0 +1,85 @@
+/**
+ * AtomicConfirmationModal Type Definitions
+ *
+ * Type-safe interfaces for confirmation modal component
+ */
+import { StyleProp, ViewStyle } from 'react-native';
+import type { AtomicIconColor } from '../../../atoms/AtomicIcon';
+/**
+ * Confirmation modal variant
+ * Determines the visual style and default behavior
+ */
+export type ConfirmationModalVariant = 'default' | 'destructive' | 'warning' | 'success';
+/**
+ * Props for AtomicConfirmationModal component
+ */
+export interface AtomicConfirmationModalProps {
+    /**
+     * Whether the modal is visible
+     */
+    visible: boolean;
+    /**
+     * Modal title (required)
+     * e.g., "Delete Item?", "Confirm Action", "Are you sure?"
+     */
+    title: string;
+    /**
+     * Modal message/description (required)
+     * e.g., "This action cannot be undone."
+     */
+    message: string;
+    /**
+     * Variant determines visual style
+     * @default 'default'
+     */
+    variant?: ConfirmationModalVariant;
+    /**
+     * Confirm button text (required)
+     */
+    confirmText: string;
+    /**
+     * Cancel button text (required)
+     */
+    cancelText: string;
+    /**
+     * Icon name to display at top (MaterialIcons name)
+     * If not provided, uses variant-specific default icon
+     * @see https://fonts.google.com/icons
+     */
+    icon?: string;
+    /**
+     * Callback when user confirms
+     */
+    onConfirm: () => void;
+    /**
+     * Callback when user cancels or dismisses
+     */
+    onCancel: () => void;
+    /**
+     * Whether to show backdrop (tap outside to close)
+     * @default true
+     */
+    showBackdrop?: boolean;
+    /**
+     * Whether backdrop is dismissible
+     * @default true
+     */
+    backdropDismissible?: boolean;
+    /**
+     * Custom style for modal container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+}
+/**
+ * Variant configuration
+ * Maps variant to icon, colors, and default text
+ */
+export interface ConfirmationModalVariantConfig {
+    icon: string;
+    confirmText: string;
+    iconColor: AtomicIconColor;
+}

package/dist/presentation/molecules/listitem/styles/listItemStyles.d.ts

@@ -0,0 +1,11 @@
+import { ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+type DesignTokens = ReturnType<typeof useAppDesignTokens>;
+export declare const getListItemStyles: (tokens: DesignTokens) => {
+    container: ViewStyle;
+    disabled: ViewStyle;
+    iconContainer: ViewStyle;
+    content: ViewStyle;
+    subtitle: ViewStyle;
+};
+export {};

package/dist/presentation/molecules/listitem/types/index.d.ts

@@ -0,0 +1,16 @@
+import { ViewStyle } from 'react-native';
+/**
+ * ListItem component props
+ *
+ * leftIcon/rightIcon: Any MaterialIcons name
+ * @see https://fonts.google.com/icons
+ */
+export interface ListItemProps {
+    title: string;
+    subtitle?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: ViewStyle;
+}

package/dist/presentation/organisms/AppHeader.d.ts

@@ -0,0 +1,30 @@
+/**
+ * AppHeader Organism - Application Header Component
+ *
+ * Complex header combining atoms and molecules
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ORGANISM
+ * Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import type { IconName } from '@umituz/react-native-icon';
+/**
+ * AppHeader component props
+ *
+ * leftIcon/rightIcon: Any MaterialIcons name
+ * @see https://fonts.google.com/icons
+ */
+export interface AppHeaderProps {
+    title: string;
+    subtitle?: string;
+    leftIcon?: IconName;
+    onLeftPress?: () => void;
+    rightIcon?: IconName;
+    onRightPress?: () => void;
+    showShadow?: boolean;
+    backgroundColor?: string;
+    style?: ViewStyle;
+}
+export declare const AppHeader: React.FC<AppHeaderProps>;

package/dist/presentation/organisms/FormContainer.d.ts

@@ -0,0 +1,75 @@
+/**
+ * FormContainer Component
+ *
+ * A reusable container for forms with proper keyboard handling and responsive layout.
+ *
+ * Features:
+ * - Pure React Native implementation (no Paper dependency)
+ * - Universal keyboard handling (no platform-specific code)
+ * - ScrollView with automatic content padding
+ * - Safe area insets for bottom tab navigation overlap
+ * - Responsive max width for large screens (tablets)
+ * - Consistent vertical spacing between form elements
+ * - Theme-aware surface colors
+ * - Optimized performance with memoized styles
+ *
+ * Usage:
+ * ```tsx
+ * <FormContainer>
+ *   <AtomicInput label="Name" value={name} onChangeText={setName} />
+ *   <AtomicTextArea label="Description" value={desc} onChangeText={setDesc} />
+ *   <AtomicButton variant="primary" onPress={handleSubmit}>
+ *     Submit
+ *   </AtomicButton>
+ * </FormContainer>
+ * ```
+ *
+ * Why This Component:
+ * - Prevents keyboard from covering input fields (universal solution)
+ * - Handles safe area (notch, bottom tabs) automatically
+ * - Consistent form layout across all 100+ generated apps
+ * - Responsive design for tablets (max 700px) and phones (full width)
+ * - Automatic vertical spacing between form elements (no manual marginBottom)
+ * - Reduces boilerplate in form screens
+ * - Universal code - no platform checks, works on iOS, Android, Web
+ *
+ * Technical Details:
+ * - Uses ScrollView with contentContainerStyle for keyboard handling
+ * - Pure React Native View for surface (lightweight)
+ * - Vertical spacing via Children.map() wrapping (universal compatibility)
+ * - Safe area insets from react-native-safe-area-context
+ * - Responsive values from useResponsive hook
+ *
+ * @module FormContainer
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+/**
+ * Props for FormContainer component
+ */
+export interface FormContainerProps {
+    /** Form content (inputs, buttons, etc.) */
+    children: React.ReactNode;
+    /** Container style override (for outer View) */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Content container style override (for ScrollView content) */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Show vertical scroll indicator */
+    showsVerticalScrollIndicator?: boolean;
+    /** Optional test ID for E2E testing */
+    testID?: string;
+    /** Show surface border (default: true) */
+    showBorder?: boolean;
+}
+/**
+ * FormContainer - Universal form wrapper component
+ *
+ * Wraps forms with:
+ * - Pure React Native surface
+ * - Universal keyboard handling (no platform checks)
+ * - ScrollView for content overflow
+ * - Safe area insets (bottom tabs, notch)
+ * - Responsive max width (tablets)
+ * - Theme integration
+ */
+export declare const FormContainer: React.FC<FormContainerProps>;