@umituz/react-native-design-system 1.5.28 → 1.5.29

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

@@ -1,85 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,30 +0,0 @@
-/**
- * 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

@@ -1,75 +0,0 @@
-/**
- * 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>;

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

@@ -1,83 +0,0 @@
-/**
- * ScreenLayout - Universal Screen Container Component
- *
- * Provides consistent layout structure for all screens:
- * - SafeAreaView with configurable edges
- * - Optional ScrollView for content
- * - Theme-aware background colors
- * - Optional header/footer slots
- * - Consistent spacing and padding
- *
- * Usage:
- * <ScreenLayout>
- *   <View>Your content here</View>
- * </ScreenLayout>
- *
- * Advanced:
- * <ScreenLayout
- *   scrollable={false}
- *   edges={['top', 'bottom']}
- *   header={<CustomHeader />}
- * >
- *   <View>Content</View>
- * </ScreenLayout>
- */
-import React from 'react';
-import { ViewStyle } from 'react-native';
-import { Edge } from 'react-native-safe-area-context';
-export interface ScreenLayoutProps {
-    /**
-     * Content to render inside the layout
-     */
-    children: React.ReactNode;
-    /**
-     * Enable scrolling (default: true)
-     * Set to false for screens with custom scroll logic
-     */
-    scrollable?: boolean;
-    /**
-     * Safe area edges to apply (default: ['top'])
-     * Common values:
-     * - ['top'] - For screens with bottom tabs
-     * - ['top', 'bottom'] - For modal screens
-     * - [] - No safe area (use cautiously)
-     */
-    edges?: Edge[];
-    /**
-     * Optional header component
-     * Rendered above scrollable content
-     */
-    header?: React.ReactNode;
-    /**
-     * Optional footer component
-     * Rendered below scrollable content
-     */
-    footer?: React.ReactNode;
-    /**
-     * Override background color
-     * If not provided, uses theme's backgroundPrimary
-     */
-    backgroundColor?: string;
-    /**
-     * Custom container style
-     */
-    containerStyle?: ViewStyle;
-    /**
-     * Custom content container style (for ScrollView)
-     */
-    contentContainerStyle?: ViewStyle;
-    /**
-     * Test ID for automation
-     */
-    testID?: string;
-    /**
-     * Hide vertical scroll indicator (default: false)
-     */
-    hideScrollIndicator?: boolean;
-    /**
-     * Enable keyboard avoiding behavior (default: false)
-     * Useful for screens with inputs
-     */
-    keyboardAvoiding?: boolean;
-}
-export declare const ScreenLayout: React.FC<ScreenLayoutProps>;

package/dist/presentation/tokens/commonStyles.d.ts

@@ -1,121 +0,0 @@
-/**
- * Common Styles - Reusable Style Patterns
- *
- * Centralized style utilities to reduce duplication across screens.
- * These styles are composable and follow DRY principles.
- *
- * Usage:
- * ```typescript
- * import { useCommonStyles } from '@domains/design-system/commonStyles';
- *
- * const MyComponent = () => {
- *   const commonStyles = useCommonStyles();
- *   return <View style={commonStyles.screenContainer}>...</View>;
- * };
- * ```
- */
-import { ViewStyle, TextStyle } from 'react-native';
-/**
- * Hook to get common styles with dynamic theme support
- */
-export declare const useCommonStyles: () => {
-    /**
-     * Standard full-screen container
-     * Most common pattern: flex: 1 with background color
-     */
-    screenContainer: ViewStyle;
-    /**
-     * Basic flex container without background
-     * Use when background is set elsewhere or not needed
-     */
-    flexContainer: ViewStyle;
-    /**
-     * Screen container with secondary background
-     */
-    screenContainerSecondary: ViewStyle;
-    /**
-     * Standard ScrollView wrapper
-     */
-    scrollView: ViewStyle;
-    /**
-     * ScrollView content container with standard padding
-     */
-    scrollContent: ViewStyle;
-    /**
-     * ScrollView content that grows to fill available space
-     */
-    scrollContentGrow: ViewStyle;
-    /**
-     * Centered scroll content (for forms, onboarding screens)
-     */
-    scrollContentCentered: ViewStyle;
-    /**
-     * Centered container - both horizontal and vertical
-     * Perfect for empty states, splash screens
-     */
-    centerContainer: ViewStyle;
-    /**
-     * Centered container with padding
-     */
-    centerContainerPadded: ViewStyle;
-    /**
-     * Horizontal row layout
-     */
-    row: ViewStyle;
-    /**
-     * Horizontal row with space between
-     */
-    rowBetween: ViewStyle;
-    /**
-     * Horizontal row centered
-     */
-    rowCenter: ViewStyle;
-    /**
-     * Standard horizontal padding
-     */
-    paddedHorizontal: ViewStyle;
-    /**
-     * Standard vertical padding
-     */
-    paddedVertical: ViewStyle;
-    /**
-     * Standard padding all sides
-     */
-    padded: ViewStyle;
-    /**
-     * Standard section container
-     */
-    section: ViewStyle;
-    /**
-     * Section with padding
-     */
-    sectionPadded: ViewStyle;
-    /**
-     * Screen title - primary heading
-     */
-    screenTitle: TextStyle;
-    /**
-     * Section title
-     */
-    sectionTitle: TextStyle;
-    /**
-     * Subtitle/description text
-     */
-    subtitle: TextStyle;
-    /**
-     * Body text
-     */
-    bodyText: TextStyle;
-    /**
-     * Secondary text (muted)
-     */
-    secondaryText: TextStyle;
-    /**
-     * Form container
-     */
-    form: ViewStyle;
-    /**
-     * Form header section
-     */
-    formHeader: ViewStyle;
-};

package/dist/presentation/utils/platformConstants.d.ts

@@ -1,99 +0,0 @@
-/**
- * Platform-Specific Constants
- *
- * Design system constants that ensure compliance with platform guidelines.
- * These values are based on official Human Interface Guidelines (HIG) from Apple and Material Design from Google.
- */
-/**
- * iOS Human Interface Guidelines (HIG) Constants
- *
- * @see https://developer.apple.com/design/human-interface-guidelines/layout
- */
-export declare const IOS_HIG: {
-    /**
-     * Minimum Touch Target Size
-     *
-     * Apple requires a minimum tappable area of 44pt x 44pt for ALL interactive controls.
-     * This is enforced during App Store review.
-     *
-     * @critical Violating this can result in App Store rejection
-     */
-    readonly MIN_TOUCH_TARGET: 44;
-    /**
-     * Recommended Minimum Touch Target Size
-     *
-     * For better accessibility and usability, Apple recommends 48pt x 48pt.
-     */
-    readonly RECOMMENDED_TOUCH_TARGET: 48;
-    /**
-     * Minimum Text Size
-     *
-     * Minimum font size for body text to ensure readability.
-     */
-    readonly MIN_TEXT_SIZE: 17;
-    /**
-     * Minimum Contrast Ratio
-     *
-     * WCAG AA compliance requires 4.5:1 for normal text.
-     */
-    readonly MIN_CONTRAST_RATIO: 4.5;
-};
-/**
- * Android Material Design Guidelines Constants
- *
- * @see https://m3.material.io/foundations/layout/applying-layout/window-size-classes
- */
-export declare const ANDROID_MATERIAL: {
-    /**
-     * Minimum Touch Target Size
-     *
-     * Material Design 3 recommends a minimum of 48dp x 48dp.
-     */
-    readonly MIN_TOUCH_TARGET: 48;
-    /**
-     * Minimum Text Size
-     *
-     * Minimum font size for body text.
-     */
-    readonly MIN_TEXT_SIZE: 14;
-};
-/**
- * Universal Platform Constants
- *
- * These values work across both iOS and Android, taking the more restrictive requirement.
- */
-export declare const PLATFORM_CONSTANTS: {
-    /**
-     * Minimum Touch Target Size
-     *
-     * Uses iOS requirement (44pt) as it's more restrictive than Android (48dp).
-     * This ensures compliance on both platforms.
-     */
-    readonly MIN_TOUCH_TARGET: number;
-    /**
-     * Recommended Touch Target Size
-     *
-     * Uses the higher value between iOS and Android recommendations.
-     */
-    readonly RECOMMENDED_TOUCH_TARGET: 48;
-    /**
-     * Minimum Text Size
-     *
-     * Uses iOS requirement as it's larger.
-     */
-    readonly MIN_TEXT_SIZE: number;
-};
-/**
- * Helper function to validate touch target size
- *
- * @param size - The size to validate (in pt/dp)
- * @returns true if size meets platform requirements
- */
-export declare const isValidTouchTarget: (size: number) => boolean;
-/**
- * Helper function to get minimum touch target for component
- *
- * @param componentType - The type of component ('button' | 'input' | 'icon' | 'generic')
- * @returns The minimum touch target size for that component type
- */
-export declare const getMinTouchTarget: (componentType?: "button" | "input" | "icon" | "generic") => number;