@umituz/react-native-design-system 4.28.21 → 4.28.23

package/dist/media/infrastructure/utils/PermissionManager.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Permission Manager
+ *
+ * Centralized permission handling for media operations.
+ * Refactored to use generic PermissionHandler to reduce duplication.
+ *
+ * Before: 4 similar methods (~80 LOC)
+ * After: 1 generic handler (~50 LOC) - 37% reduction
+ */
+import { MediaLibraryPermission } from "../../domain/entities/Media";
+/**
+ * Permission type for media operations
+ */
+export type PermissionType = 'camera' | 'mediaLibrary';
+/**
+ * Permission manager for media operations
+ * Uses generic PermissionHandler to reduce code duplication
+ */
+export declare class PermissionManager {
+    private static handler;
+    /**
+     * Requests camera permission
+     */
+    static requestCameraPermission(): Promise<MediaLibraryPermission>;
+    /**
+     * Requests media library permission
+     */
+    static requestMediaLibraryPermission(): Promise<MediaLibraryPermission>;
+    /**
+     * Gets current camera permission status
+     */
+    static getCameraPermissionStatus(): Promise<MediaLibraryPermission>;
+    /**
+     * Gets current media library permission status
+     */
+    static getMediaLibraryPermissionStatus(): Promise<MediaLibraryPermission>;
+    /**
+     * Generic permission request based on type
+     */
+    static requestPermission(type: PermissionType): Promise<MediaLibraryPermission>;
+    /**
+     * Generic permission status check based on type
+     */
+    static getPermissionStatus(type: PermissionType): Promise<MediaLibraryPermission>;
+    /**
+     * Checks if permission is granted
+     */
+    static isPermissionGranted(status: MediaLibraryPermission): boolean;
+}

package/dist/media/infrastructure/utils/file-media-utils.d.ts

@@ -0,0 +1,42 @@
+/**
+ * File Media Utilities
+ * Utilities for handling media files (base64, downloads, file operations)
+ */
+interface FileWithType {
+    readonly type: string;
+}
+export declare function getMediaDuration(file: FileWithType): Promise<number | undefined>;
+export declare function generateThumbnail(file: FileWithType): string | undefined;
+/**
+ * Check if a string is a base64 data URL
+ */
+export declare const isBase64DataUrl: (str: string) => boolean;
+/**
+ * Check if a string is raw base64 (not a URL and not a data URL)
+ */
+export declare const isRawBase64: (str: string) => boolean;
+/**
+ * Convert raw base64 to data URL format
+ */
+export declare const toDataUrl: (str: string) => string;
+/**
+ * Save base64 image to file system using internal filesystem service
+ */
+export declare const saveBase64ToFile: (base64Data: string) => Promise<string>;
+/**
+ * Download media from URL to local file using internal filesystem service
+ */
+export declare const downloadMediaToFile: (url: string, _isVideo: boolean) => Promise<string>;
+export interface SaveToGalleryResult {
+    readonly success: boolean;
+    readonly error?: string;
+}
+/**
+ * Save image to device gallery
+ */
+export declare const saveImageToGallery: (uri: string) => Promise<SaveToGalleryResult>;
+/**
+ * Save video to device gallery
+ */
+export declare const saveVideoToGallery: (uri: string) => Promise<SaveToGalleryResult>;
+export {};

package/dist/media/infrastructure/utils/media-collection-utils.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Media Collection Utilities
+ * Generic utilities for working with media collections
+ */
+type MediaType = "image" | "audio" | "video";
+/**
+ * Interface for media items with type property
+ */
+interface MediaWithType {
+    type: MediaType;
+}
+/**
+ * Interface for media items with file size
+ */
+interface MediaWithSize {
+    fileSize: number;
+}
+export declare function extractMediaTypes(media: readonly MediaWithType[]): MediaType[];
+export declare function calculateTotalSize(media: readonly MediaWithSize[]): number;
+/**
+ * Format file size in bytes to human-readable format
+ *
+ * @param bytes - File size in bytes
+ * @returns Formatted file size string (e.g., "1.5 MB")
+ */
+export declare function formatFileSize(bytes: number): string;
+export {};

package/dist/media/infrastructure/utils/media-url-extractor.d.ts

@@ -0,0 +1,7 @@
+export interface MediaUrlResult {
+    readonly url: string;
+    readonly isVideo: boolean;
+}
+export declare function extractMediaUrl(result: unknown): MediaUrlResult | null;
+export declare function extractVideoUrl(result: unknown): string | null;
+export declare function extractImageUrl(result: unknown): string | null;

package/dist/media/infrastructure/utils/mediaPickerMappers.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Media Picker Mapper Utilities
+ * Mapping functions for media picker operations
+ */
+import * as ImagePicker from "expo-image-picker";
+import { MediaLibraryPermission, MediaType, type MediaPickerResult } from "../../domain/entities/Media";
+/**
+ * Map expo-image-picker permission status to MediaLibraryPermission
+ */
+export declare const mapPermissionStatus: (status: string) => MediaLibraryPermission;
+/**
+ * Map MediaType to expo-image-picker media types
+ */
+export declare const mapMediaType: (type?: MediaType) => ImagePicker.MediaType[];
+/**
+ * Map expo-image-picker result to MediaPickerResult
+ */
+export declare const mapPickerResult: (result: ImagePicker.ImagePickerResult) => MediaPickerResult;
+/**
+ * Map PickerStrategy result to MediaPickerResult
+ */
+export declare const mapPickerResultFromStrategy: (result: {
+    canceled: boolean;
+    assets?: Array<{
+        uri: string;
+        width?: number;
+        height?: number;
+        type?: "image" | "video";
+        duration?: number;
+        fileSize?: number;
+    }>;
+}) => MediaPickerResult;

package/dist/media/infrastructure/utils/mime-type-detector.d.ts

@@ -0,0 +1,5 @@
+export type MimeMediaType = "image" | "audio" | "video";
+export declare function getMediaTypeFromMime(mimeType: string): MimeMediaType;
+export declare function isVideoMime(mimeType: string): boolean;
+export declare function isImageMime(mimeType: string): boolean;
+export declare function isAudioMime(mimeType: string): boolean;

package/dist/media/infrastructure/utils/url-media-detector.d.ts

@@ -0,0 +1,5 @@
+export type UrlMediaType = "image" | "video" | "audio" | "unknown";
+export declare function getMediaTypeFromUrl(url: string): UrlMediaType;
+export declare function isVideoUrl(url: string): boolean;
+export declare function isImageUrl(url: string): boolean;
+export declare function isAudioUrl(url: string): boolean;

package/dist/media/presentation/hooks/useMedia.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Media Domain - useMedia Hook
+ *
+ * React hook for media picking operations (images, videos).
+ * Provides camera, gallery picking functionality.
+ */
+import type { MediaPickerOptions, MediaPickerResult, CameraOptions } from "../../domain/entities/Media";
+import { MediaLibraryPermission } from "../../domain/entities/Media";
+/**
+ * useMedia hook for complete media workflow
+ */
+export declare const useMedia: () => {
+    pickImage: (options?: MediaPickerOptions) => Promise<MediaPickerResult>;
+    pickMultipleImages: (options?: MediaPickerOptions) => Promise<MediaPickerResult>;
+    pickVideo: (options?: MediaPickerOptions) => Promise<MediaPickerResult>;
+    launchCamera: (options?: CameraOptions) => Promise<MediaPickerResult>;
+    launchCameraForVideo: (options?: CameraOptions) => Promise<MediaPickerResult>;
+    requestCameraPermission: () => Promise<MediaLibraryPermission>;
+    requestMediaLibraryPermission: () => Promise<MediaLibraryPermission>;
+    getCameraPermissionStatus: () => Promise<MediaLibraryPermission>;
+    getMediaLibraryPermissionStatus: () => Promise<MediaLibraryPermission>;
+    isLoading: boolean;
+    error: string | null;
+};

package/dist/molecules/BaseModal.d.ts

@@ -0,0 +1,18 @@
+/**
+ * BaseModal Component
+ * Generic fullscreen modal with responsive design
+ * Used across all modals in the app for consistency
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface BaseModalProps {
+    visible: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    dismissOnBackdrop?: boolean;
+    contentStyle?: ViewStyle;
+    testID?: string;
+    title?: string;
+    subtitle?: string;
+}
+export declare const BaseModal: React.FC<BaseModalProps>;

package/dist/molecules/ConfirmationModalContent.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ConfirmationModal Content Component
+ *
+ * Content component for confirmation modal
+ */
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { ConfirmationModalVariant } from './confirmation-modal/types';
+export declare 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;
+}>;

package/dist/molecules/ConfirmationModalMain.d.ts

@@ -0,0 +1,8 @@
+/**
+ * ConfirmationModal Main Component
+ *
+ * Main confirmation modal component
+ */
+import React from 'react';
+import { ConfirmationModalProps } from './confirmation-modal/types';
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps>;

package/dist/molecules/Divider/Divider.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Divider Domain - Divider Component
+ *
+ * Universal divider component for visual separation.
+ * Supports horizontal, vertical, and text dividers.
+ *
+ * @domain divider
+ * @layer presentation/components
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { DividerOrientation, DividerStyle, DividerSpacing } from './types';
+/**
+ * Divider component props
+ */
+export interface DividerProps {
+    /** Orientation (horizontal or vertical) */
+    orientation?: DividerOrientation;
+    /** Line style (solid, dashed, dotted) */
+    lineStyle?: DividerStyle;
+    /** Spacing (margin) */
+    spacing?: DividerSpacing;
+    /** Custom color */
+    color?: string;
+    /** Custom thickness */
+    thickness?: number;
+    /** Text label (for text divider) */
+    text?: string;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Divider Component
+ *
+ * Visual separator for content sections.
+ * Supports horizontal, vertical, and text variants.
+ *
+ * USAGE:
+ * ```typescript
+ * // Horizontal divider (default)
+ * <Divider />
+ *
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * // Text divider (OR separator)
+ * <Divider text="OR" />
+ *
+ * // Custom spacing
+ * <Divider spacing="large" />
+ *
+ * // Dashed style
+ * <Divider lineStyle="dashed" />
+ *
+ * // Custom color
+ * <Divider color="#FF0000" />
+ * ```
+ */
+export declare const Divider: React.FC<DividerProps>;

package/dist/molecules/Divider/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Divider Component
+ */
+export { Divider } from './Divider';
+export type { DividerConfig, DividerOrientation, DividerStyle, DividerSpacing } from './types';
+export { DividerUtils, DIVIDER_CONSTANTS } from './types';

package/dist/molecules/Divider/types.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Divider Domain - Entity Definitions
+ *
+ * Core types and interfaces for dividers and separators.
+ * Simple visual separators for content sections.
+ *
+ * @domain divider
+ * @layer domain/entities
+ */
+/**
+ * Divider orientation
+ */
+export type DividerOrientation = 'horizontal' | 'vertical';
+/**
+ * Divider style
+ */
+export type DividerStyle = 'solid' | 'dashed' | 'dotted';
+/**
+ * Divider spacing
+ */
+export type DividerSpacing = 'none' | 'small' | 'medium' | 'large';
+/**
+ * Divider configuration
+ */
+export interface DividerConfig {
+    /** Orientation */
+    orientation: DividerOrientation;
+    /** Line style */
+    style: DividerStyle;
+    /** Spacing (margin) */
+    spacing: DividerSpacing;
+    /** Custom color */
+    color?: string;
+    /** Custom thickness */
+    thickness?: number;
+    /** Text label (for text divider) */
+    text?: string;
+}
+/**
+ * Get responsive spacing value
+ * Multiplies base spacing by spacingMultiplier for tablet/small device support
+ */
+export declare const getSpacingConfigs: (spacingMultiplier: number) => Record<DividerSpacing, number>;
+/**
+ * Divider utility class
+ */
+export declare class DividerUtils {
+    /**
+     * Get spacing value (responsive)
+     */
+    static getSpacing(spacing: DividerSpacing, spacingMultiplier?: number): number;
+    /**
+     * Validate divider config
+     */
+    static validateConfig(config: Partial<DividerConfig>): DividerConfig;
+}
+/**
+ * Divider constants
+ */
+export declare const DIVIDER_CONSTANTS: {
+    readonly DEFAULT_ORIENTATION: DividerOrientation;
+    readonly DEFAULT_STYLE: DividerStyle;
+    readonly DEFAULT_SPACING: DividerSpacing;
+    readonly DEFAULT_THICKNESS: 1;
+};

package/dist/molecules/FormField.d.ts

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

package/dist/molecules/IconContainer.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 background circle
+ * - 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;
+    withBorder?: boolean;
+    borderColor?: string;
+    style?: object;
+    testID?: string;
+}
+export declare const IconContainer: React.FC<IconContainerProps>;
+export {};

package/dist/molecules/List/List.d.ts

@@ -0,0 +1,38 @@
+/**
+ * List - Responsive List Wrapper (Molecule)
+ *
+ * FlatList wrapper with responsive item sizing and built-in pull-to-refresh
+ * Uses design system responsive utilities
+ */
+import React from 'react';
+import { type FlatListProps, type ListRenderItem } from 'react-native';
+export interface ListProps<T> extends Omit<FlatListProps<T>, 'renderItem'> {
+    /** Data array */
+    data: readonly T[] | null | undefined;
+    /** Render function for each item */
+    renderItem: ListRenderItem<T>;
+    /** Pull-to-refresh handler */
+    onRefresh?: () => void;
+    /** Refreshing state */
+    refreshing?: boolean;
+    /** Key extractor (required for proper list performance) */
+    keyExtractor: (item: T, index: number) => string;
+    /** Content container padding (uses responsive tokens) */
+    contentPadding?: boolean;
+}
+/**
+ * Responsive list component with pull-to-refresh
+ *
+ * @example
+ * ```tsx
+ * <List
+ *   data={items}
+ *   renderItem={({ item }) => <ItemCard item={item} />}
+ *   keyExtractor={(item) => item.id}
+ *   onRefresh={handleRefresh}
+ *   refreshing={isRefreshing}
+ *   contentPadding
+ * />
+ * ```
+ */
+export declare const List: <T>({ data, renderItem, onRefresh, refreshing, keyExtractor, contentPadding, ...rest }: ListProps<T>) => React.JSX.Element;

package/dist/molecules/List/index.d.ts

@@ -0,0 +1 @@
+export { List, type ListProps } from './List';

package/dist/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.NamedExoticComponent<ListItemProps>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SearchBarProps } from './types';
+export declare const SearchBar: React.FC<SearchBarProps>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SearchHistoryProps } from './types';
+export declare const SearchHistory: React.FC<SearchHistoryProps>;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useAppDesignTokens } from '../../theme';
+import type { SearchSuggestionsProps } from './types';
+export declare function SearchSuggestions<T>({ query, suggestions, renderItem, onSelectSuggestion, maxSuggestions, style, emptyComponent, }: SearchSuggestionsProps<T>): React.JSX.Element | null;
+/**
+ * Default suggestion renderer (simple text with highlighting)
+ */
+export declare const DefaultSuggestionRenderer: (text: string, query: string, tokens: ReturnType<typeof useAppDesignTokens>) => React.JSX.Element;

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

@@ -0,0 +1,7 @@
+/**
+ * Search Bar Components
+ */
+export { SearchBar } from './SearchBar';
+export { SearchHistory } from './SearchHistory';
+export { SearchSuggestions } from './SearchSuggestions';
+export type { SearchBarProps } from './types';

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

@@ -0,0 +1,41 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+export interface SearchHistoryItem {
+    id: string;
+    query: string;
+    timestamp: number;
+}
+export interface SearchBarProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    onSubmit?: () => void;
+    onClear?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    showCancelButton?: boolean;
+    onCancel?: () => void;
+    containerStyle?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+export interface SearchHistoryProps {
+    history: SearchHistoryItem[];
+    onSelectItem: (query: string) => void;
+    onRemoveItem: (id: string) => void;
+    onClearAll: () => void;
+    maxItems?: number;
+    style?: StyleProp<ViewStyle>;
+    title?: string;
+    clearLabel?: string;
+}
+export interface SearchSuggestionsProps<T> {
+    query: string;
+    suggestions: T[];
+    renderItem: (item: T, query: string) => React.ReactNode;
+    onSelectSuggestion: (item: T) => void;
+    maxSuggestions?: number;
+    style?: StyleProp<ViewStyle>;
+    emptyComponent?: React.ReactNode;
+}

package/dist/molecules/StepHeader/StepHeader.d.ts

@@ -0,0 +1,27 @@
+/**
+ * StepHeader Component
+ * Header component for step-by-step flows with title and subtitle
+ *
+ * @package @umituz/react-native-design-system
+ */
+import React from "react";
+import { type ViewStyle, type StyleProp } from "react-native";
+export interface StepHeaderConfig {
+    showStepIndicator?: boolean;
+    currentStep?: number;
+    totalSteps?: number;
+    titleAlignment?: "left" | "center" | "right";
+    titleFontSize?: number;
+    subtitleFontSize?: number;
+    spacing?: {
+        marginBottom?: number;
+        paddingHorizontal?: number;
+    };
+}
+export interface StepHeaderProps {
+    title: string;
+    subtitle?: string;
+    config?: StepHeaderConfig;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const StepHeader: React.FC<StepHeaderProps>;

package/dist/molecules/StepHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { StepHeader } from "./StepHeader";
+export type { StepHeaderProps, StepHeaderConfig } from "./StepHeader";

package/dist/molecules/StepProgress/StepProgress.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+export interface StepProgressProps {
+    currentStep: number;
+    totalSteps: number;
+    style?: ViewStyle;
+}
+export declare const StepProgress: React.FC<StepProgressProps>;

package/dist/molecules/StepProgress/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Step Progress Component
+ */
+export { StepProgress } from './StepProgress';

package/dist/molecules/action-footer/ActionFooter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ActionFooterProps } from './types';
+export declare const ActionFooter: React.NamedExoticComponent<ActionFooterProps>;

package/dist/molecules/action-footer/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Action Footer Component
+ */
+export { ActionFooter } from './ActionFooter';
+export type { ActionFooterProps } from './types';

package/dist/molecules/action-footer/types.d.ts

@@ -0,0 +1,10 @@
+import { ViewStyle, StyleProp } from 'react-native';
+export interface ActionFooterProps {
+    onBack: () => void;
+    onAction: () => void;
+    actionLabel: string;
+    actionIcon?: string;
+    backIcon?: string;
+    style?: StyleProp<ViewStyle>;
+    loading?: boolean;
+}

package/dist/molecules/alerts/AlertBanner.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AlertBanner Component
+ *
+ * Displays a banner-style alert at the top or bottom of the screen.
+ * Full-width notification bar for important messages.
+ * Auto-dismisses after duration (default 3 seconds).
+ */
+import React from 'react';
+import { Alert } from './AlertTypes';
+interface AlertBannerProps {
+    alert: Alert;
+}
+export declare function AlertBanner({ alert }: AlertBannerProps): React.JSX.Element;
+export {};

package/dist/molecules/alerts/AlertContainer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * AlertContainer Component
+ */
+import React from 'react';
+export declare const AlertContainer: React.NamedExoticComponent<{}>;

package/dist/molecules/alerts/AlertInline.d.ts

@@ -0,0 +1,10 @@
+/**
+ * AlertInline Component
+ */
+import React from 'react';
+import { Alert } from './AlertTypes';
+interface AlertInlineProps {
+    alert: Alert;
+}
+export declare const AlertInline: React.FC<AlertInlineProps>;
+export {};