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

package/dist/presentation/atoms/touchable/types/index.d.ts

@@ -1,133 +0,0 @@
-import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
-/**
- * Touchable feedback variant
- * - opacity: iOS-style opacity feedback (default)
- * - highlight: Android-style highlight feedback
- * - ripple: Material Design ripple effect (Android only)
- * - none: No visual feedback
- */
-export type TouchableFeedback = 'opacity' | 'highlight' | 'ripple' | 'none';
-/**
- * Feedback strength for visual feedback
- * - subtle: Light feedback (0.8 opacity)
- * - normal: Standard feedback (0.6 opacity)
- * - strong: Strong feedback (0.4 opacity)
- */
-export type FeedbackStrength = 'subtle' | 'normal' | 'strong';
-/**
- * Hit slop configuration
- * Extends the touchable area beyond the component's bounds
- */
-export interface HitSlop {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-}
-/**
- * AtomicTouchable component props
- *
- * A unified touchable wrapper with consistent behavior across platforms.
- * Uses React Native's Pressable API for modern, accessible touch handling.
- *
- * @example
- * ```tsx
- * <AtomicTouchable
- *   onPress={handlePress}
- *   feedback="opacity"
- *   strength="normal"
- *   disabled={isDisabled}
- *   hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
- *   style={styles.touchable}
- * >
- *   <AtomicText>Press Me</AtomicText>
- * </AtomicTouchable>
- * ```
- */
-export interface AtomicTouchableProps {
-    /**
-     * Content to render inside the touchable
-     */
-    children: React.ReactNode;
-    /**
-     * Callback fired when the touchable is pressed
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when press starts (finger down)
-     */
-    onPressIn?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when press ends (finger up)
-     */
-    onPressOut?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired on long press (500ms default)
-     */
-    onLongPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Feedback variant
-     * @default 'opacity'
-     */
-    feedback?: TouchableFeedback;
-    /**
-     * Feedback strength
-     * @default 'normal'
-     */
-    strength?: FeedbackStrength;
-    /**
-     * Disable the touchable
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Hit slop - extends touchable area
-     * Useful for small touch targets
-     * @default undefined
-     */
-    hitSlop?: HitSlop | number;
-    /**
-     * Custom style for the touchable container
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Style applied when pressed
-     */
-    pressedStyle?: StyleProp<ViewStyle>;
-    /**
-     * Style applied when disabled
-     */
-    disabledStyle?: StyleProp<ViewStyle>;
-    /**
-     * Accessibility label for screen readers
-     */
-    accessibilityLabel?: string;
-    /**
-     * Accessibility hint for screen readers
-     */
-    accessibilityHint?: string;
-    /**
-     * Accessibility role
-     * @default 'button'
-     */
-    accessibilityRole?: 'button' | 'link' | 'none';
-    /**
-     * Test ID for E2E testing
-     */
-    testID?: string;
-    /**
-     * Delay before onLongPress is triggered (ms)
-     * @default 500
-     */
-    delayLongPress?: number;
-    /**
-     * Ripple color (Android only, for 'ripple' feedback)
-     * @default theme primary color with alpha
-     */
-    rippleColor?: string;
-    /**
-     * Border radius for ripple effect (Android only)
-     * @default 0
-     */
-    rippleRadius?: number;
-}

package/dist/presentation/hooks/useResponsive.d.ts

@@ -1,79 +0,0 @@
-/**
- * useResponsive Hook
- *
- * React Hook for accessing responsive utilities with real-time dimension updates
- * and safe area insets integration.
- *
- * Usage:
- * ```tsx
- * const { logoSize, inputHeight, fabPosition, isSmallDevice } = useResponsive();
- * ```
- */
-import { DeviceType } from '../utils/responsive';
-export interface UseResponsiveReturn {
-    width: number;
-    height: number;
-    isSmallDevice: boolean;
-    isTabletDevice: boolean;
-    isLandscapeMode: boolean;
-    deviceType: DeviceType;
-    insets: {
-        top: number;
-        bottom: number;
-        left: number;
-        right: number;
-    };
-    logoSize: number;
-    inputHeight: number;
-    iconContainerSize: number;
-    maxContentWidth: number;
-    minTouchTarget: number;
-    horizontalPadding: number;
-    bottomPosition: number;
-    fabPosition: {
-        bottom: number;
-        right: number;
-    };
-    modalMaxHeight: string;
-    modalMinHeight: number;
-    gridColumns: number;
-    spacingMultiplier: number;
-    onboardingIconMarginTop: number;
-    onboardingIconMarginBottom: number;
-    onboardingIconSize: number;
-    onboardingTitleMarginBottom: number;
-    onboardingTextPadding: number;
-    onboardingDescriptionMarginTop: number;
-    formBottomPadding: number;
-    inputIconSize: number;
-    formContentWidth: number | undefined;
-    formElementSpacing: number;
-    getLogoSize: (baseSize?: number) => number;
-    getInputHeight: (baseHeight?: number) => number;
-    getIconSize: (baseSize?: number) => number;
-    getMaxWidth: (baseWidth?: number) => number;
-    getFontSize: (baseFontSize: number) => number;
-    getGridCols: (mobile?: number, tablet?: number) => number;
-}
-/**
- * Hook for responsive design utilities
- * Automatically updates when screen dimensions or orientation changes
- */
-export declare const useResponsive: () => UseResponsiveReturn;
-/**
- * Shorthand hook for just responsive sizes
- */
-export declare const useResponsiveSizes: () => {
-    logoSize: number;
-    inputHeight: number;
-    iconContainerSize: number;
-    maxContentWidth: number;
-};
-/**
- * Shorthand hook for just device type checks
- */
-export declare const useDeviceType: () => {
-    isSmallDevice: boolean;
-    isTabletDevice: boolean;
-    deviceType: DeviceType;
-};

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

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

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

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

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

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

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

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

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

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

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

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

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