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

package/dist/presentation/atoms/AtomicImage.d.ts

@@ -1,39 +0,0 @@
-/**
- * AtomicImage - Universal Image Component
- *
- * Provides consistent image handling across the app with theme integration
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Basic image display with consistent styling
- *
- * Usage:
- * - Profile pictures
- * - Product images
- * - Icons and illustrations
- * - Background images
- */
-import React from 'react';
-import { ImageProps, ViewStyle } from 'react-native';
-export interface AtomicImageProps extends Omit<ImageProps, 'style'> {
-    /** Image source */
-    source: ImageProps['source'];
-    /** Size variant */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-    /** Shape variant */
-    shape?: 'square' | 'circle' | 'rounded';
-    /** Border radius override */
-    borderRadius?: number;
-    /** Container style override */
-    style?: ViewStyle | ViewStyle[];
-    /** Image style override */
-    imageStyle?: ImageProps['style'];
-    /** Background color */
-    backgroundColor?: string;
-    /** Border color */
-    borderColor?: string;
-    /** Border width */
-    borderWidth?: number;
-}
-export declare const AtomicImage: React.FC<AtomicImageProps>;
-export default AtomicImage;

package/dist/presentation/atoms/AtomicInput.d.ts

@@ -1,70 +0,0 @@
-import React from 'react';
-import { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { AtomicIconName } from './AtomicIcon';
-export type AtomicInputVariant = 'outlined' | 'filled' | 'flat';
-export type AtomicInputState = 'default' | 'error' | 'success' | 'disabled';
-export type AtomicInputSize = 'sm' | 'md' | 'lg';
-export interface AtomicInputProps {
-    /** Input label */
-    label?: string;
-    /** Current input value */
-    value?: string;
-    /** Value change callback */
-    onChangeText?: (text: string) => void;
-    /** Input variant (outlined, filled, flat) */
-    variant?: AtomicInputVariant;
-    /** Input state (default, error, success, disabled) */
-    state?: AtomicInputState;
-    /** Input size (sm, md, lg) */
-    size?: AtomicInputSize;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Helper text below input */
-    helperText?: string;
-    /** Leading icon (Lucide icon name) */
-    leadingIcon?: AtomicIconName;
-    /** Trailing icon (Lucide icon name) */
-    trailingIcon?: AtomicIconName;
-    /** Callback when trailing icon is pressed */
-    onTrailingIconPress?: () => void;
-    /** Show password toggle for secure inputs */
-    showPasswordToggle?: boolean;
-    /** Secure text entry (password field) */
-    secureTextEntry?: boolean;
-    /** Maximum character length */
-    maxLength?: number;
-    /** Show character counter */
-    showCharacterCount?: boolean;
-    /** Keyboard type */
-    keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url' | 'number-pad' | 'decimal-pad';
-    /** Auto-capitalize */
-    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-    /** Auto-correct */
-    autoCorrect?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Container style */
-    style?: StyleProp<ViewStyle>;
-    /** Input text style */
-    inputStyle?: StyleProp<TextStyle>;
-    /** Test ID for E2E testing */
-    testID?: string;
-    /** Blur callback */
-    onBlur?: () => void;
-    /** Focus callback */
-    onFocus?: () => void;
-}
-/**
- * AtomicInput - Pure React Native Text Input
- *
- * Features:
- * - Pure React Native implementation (no Paper dependency)
- * - Lucide icons for password toggle and custom icons
- * - Outlined/filled/flat variants
- * - Error, success, disabled states
- * - Character counter
- * - Responsive sizing
- * - Full accessibility support
- */
-export declare const AtomicInput: React.FC<AtomicInputProps>;
-export type { AtomicInputProps as InputProps };

package/dist/presentation/atoms/AtomicNumberInput.d.ts

@@ -1,68 +0,0 @@
-/**
- * AtomicNumberInput Component
- *
- * A specialized number input component that wraps AtomicInput with
- * number-specific validation and keyboard handling.
- *
- * Features:
- * - Numeric keyboard (integer or decimal)
- * - Min/max validation
- * - Step increment support
- * - Automatic error states for invalid numbers
- * - Parsed number callback (onValueChange)
- * - Consistent styling with AtomicInput
- * - All AtomicInput features (variants, states, sizes)
- *
- * Usage:
- * ```tsx
- * const [age, setAge] = useState<number | null>(null);
- *
- * <AtomicNumberInput
- *   value={age?.toString() || ''}
- *   onValueChange={setAge}
- *   label="Age"
- *   min={0}
- *   max={150}
- *   helperText="Enter your age"
- * />
- * ```
- *
- * Why This Component:
- * - Separation of concerns (text vs number input)
- * - Built-in number validation
- * - Type-safe number callbacks
- * - Prevents non-numeric input via keyboard
- * - Consistent with AtomicInput styling
- *
- * @module AtomicNumberInput
- */
-import React from 'react';
-import { AtomicInputProps } from './AtomicInput';
-/**
- * Props for AtomicNumberInput component
- * Extends AtomicInput but removes text-specific props
- */
-export interface AtomicNumberInputProps extends Omit<AtomicInputProps, 'keyboardType' | 'secureTextEntry' | 'showPasswordToggle' | 'onChangeText'> {
-    /** Minimum allowed value */
-    min?: number;
-    /** Maximum allowed value */
-    max?: number;
-    /** Step increment (for spinners, future feature) */
-    step?: number;
-    /** Allow decimal numbers (default: false for integers only) */
-    allowDecimal?: boolean;
-    /** Callback when valid number is entered (null if invalid/empty) */
-    onValueChange?: (value: number | null) => void;
-    /** Callback when raw text changes (optional) */
-    onTextChange?: (text: string) => void;
-}
-/**
- * AtomicNumberInput - Specialized numeric input component
- *
- * Wraps AtomicInput with:
- * - Numeric keyboard
- * - Number validation (min, max, format)
- * - Parsed number callbacks
- * - Automatic error states
- */
-export declare const AtomicNumberInput: React.FC<AtomicNumberInputProps>;

package/dist/presentation/atoms/AtomicPicker.d.ts

@@ -1,51 +0,0 @@
-/**
- * AtomicPicker Component
- *
- * A reusable option picker/dropdown component for selecting from a list of options.
- *
- * Features:
- * - Single and multi-select support
- * - Modal display mode (full-screen on mobile)
- * - Optional search/filter capability
- * - Error and disabled states
- * - Theme-aware styling
- * - Icons for options
- * - Clearable selection
- * - react-hook-form integration ready
- *
- * Architecture:
- * - Follows AtomicButton pattern with separated types and styles
- * - Uses helper functions from picker/styles/pickerStyles.ts
- * - Types defined in picker/types/index.ts
- * - Zero inline StyleSheet.create()
- *
- * Usage:
- * ```tsx
- * const [partyType, setPartyType] = useState('birthday');
- *
- * <AtomicPicker
- *   value={partyType}
- *   onChange={setPartyType}
- *   options={[
- *     { label: 'Birthday Party', value: 'birthday', icon: 'cake' },
- *     { label: 'Wedding', value: 'wedding', icon: 'heart' },
- *     { label: 'Corporate Event', value: 'corporate', icon: 'briefcase' },
- *   ]}
- *   label="Party Type"
- *   placeholder="Select party type"
- *   searchable
- * />
- * ```
- *
- * @module AtomicPicker
- */
-import React from 'react';
-import { AtomicPickerProps } from './picker/types';
-export type { AtomicPickerProps, PickerOption, PickerSize } from './picker/types';
-/**
- * AtomicPicker - Universal option picker component
- *
- * Displays a button that opens a modal for selection.
- * Supports single/multi-select, search, and custom rendering.
- */
-export declare const AtomicPicker: React.FC<AtomicPickerProps>;

package/dist/presentation/atoms/AtomicProgress.d.ts

@@ -1,43 +0,0 @@
-/**
- * AtomicProgress - Universal Progress Bar Component
- *
- * Displays progress bars for completion tracking
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Progress indication and completion tracking
- *
- * Usage:
- * - File upload progress
- * - Task completion progress
- * - Achievement progress
- * - Form completion
- */
-import React from 'react';
-import { ViewStyle } from 'react-native';
-export interface AtomicProgressProps {
-    /** Progress value (0-100) */
-    value: number;
-    /** Progress bar height */
-    height?: number;
-    /** Progress bar width */
-    width?: number | string;
-    /** Progress bar color */
-    color?: string;
-    /** Background color */
-    backgroundColor?: string;
-    /** Progress bar shape */
-    shape?: 'rounded' | 'square';
-    /** Whether to show percentage text */
-    showPercentage?: boolean;
-    /** Whether to show value text */
-    showValue?: boolean;
-    /** Custom text color */
-    textColor?: string;
-    /** Style overrides */
-    style?: ViewStyle | ViewStyle[];
-    /** Test ID for testing */
-    testID?: string;
-}
-export declare const AtomicProgress: React.FC<AtomicProgressProps>;
-export default AtomicProgress;

package/dist/presentation/atoms/AtomicSearchBar.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
-export interface AtomicSearchBarProps {
-    value: string;
-    onChangeText: (text: string) => void;
-    placeholder?: string;
-    autoFocus?: boolean;
-    editable?: boolean;
-    onClear?: () => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    onSubmitEditing?: () => void;
-    style?: StyleProp<ViewStyle>;
-    inputStyle?: StyleProp<TextStyle>;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-}
-export declare const AtomicSearchBar: React.FC<AtomicSearchBarProps>;

package/dist/presentation/atoms/AtomicSort.d.ts

@@ -1,71 +0,0 @@
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-/**
- * Sort option interface
- */
-export interface SortOption {
-    id: string;
-    label: string;
-    icon?: string;
-}
-/**
- * Sort direction type
- */
-export type SortDirection = 'asc' | 'desc';
-/**
- * AtomicSort component props
- */
-export interface AtomicSortProps {
-    options: SortOption[];
-    selectedId: string | null;
-    sortDirection: SortDirection;
-    onSortChange: (optionId: string, direction: SortDirection) => void;
-    showDirectionToggle?: boolean;
-    variant?: 'outlined' | 'filled' | 'soft';
-    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-    size?: 'sm' | 'md' | 'lg';
-    style?: StyleProp<ViewStyle>;
-    testID?: string;
-}
-/**
- * AtomicSort - Horizontal Sort Chip Component
- *
- * A Material Design 3 compliant sort component using chip selection.
- * Supports single selection with ascending/descending direction toggle.
- *
- * @example
- * ```tsx
- * const [sortBy, setSortBy] = useState<string | null>('name');
- * const [sortDir, setSortDir] = useState<SortDirection>('asc');
- *
- * <AtomicSort
- *   options={[
- *     { id: 'name', label: 'Name', icon: 'sort-alpha' },
- *     { id: 'date', label: 'Date', icon: 'schedule' },
- *     { id: 'priority', label: 'Priority', icon: 'flag' },
- *   ]}
- *   selectedId={sortBy}
- *   sortDirection={sortDir}
- *   onSortChange={(id, dir) => {
- *     setSortBy(id);
- *     setSortDir(dir);
- *   }}
- *   showDirectionToggle={true}
- * />
- * ```
- *
- * Features:
- * - Horizontal scrollable sort chips
- * - Single selection (one active sort at a time)
- * - Direction toggle (click active chip to switch asc/desc)
- * - Visual arrow indicators (↑ asc, ↓ desc)
- * - Theme-aware colors from design tokens
- * - Icon support per sort option
- * - Fully controlled component
- *
- * Behavior:
- * - Click inactive chip → Selects it with ascending direction
- * - Click active chip → Toggles direction (asc ↔ desc)
- * - Visual feedback via filled variant for active sort
- */
-export declare const AtomicSort: React.FC<AtomicSortProps>;

package/dist/presentation/atoms/AtomicSwitch.d.ts

@@ -1,42 +0,0 @@
-/**
- * AtomicSwitch - Universal Switch Component
- *
- * Provides consistent switch/toggle functionality with theme integration
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Basic switch/toggle input
- *
- * Usage:
- * - Settings toggles
- * - Feature enable/disable
- * - Boolean preferences
- * - Form inputs
- */
-import React from 'react';
-import { SwitchProps, ViewStyle } from 'react-native';
-export interface AtomicSwitchProps extends Omit<SwitchProps, 'style'> {
-    /** Switch value */
-    value: boolean;
-    /** Value change handler */
-    onValueChange: (value: boolean) => void;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Color variant */
-    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Container style override */
-    style?: ViewStyle;
-    /** Track color override */
-    trackColor?: {
-        false: string;
-        true: string;
-    };
-    /** Thumb color override */
-    thumbColor?: string;
-    /** iOS specific props */
-    ios_backgroundColor?: string;
-}
-export declare const AtomicSwitch: React.FC<AtomicSwitchProps>;
-export default AtomicSwitch;

package/dist/presentation/atoms/AtomicText.d.ts

@@ -1,33 +0,0 @@
-import React from 'react';
-import { StyleProp, TextStyle } from 'react-native';
-export type TextStyleVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'labelLarge' | 'labelMedium' | 'labelSmall';
-/**
- * Material Design 3 Text Color Variants
- *
- * TEXT COLORS (for text on surfaces):
- * - textPrimary, textSecondary, textTertiary: General text colors
- * - onSurface, onBackground: Text on surface/background
- *
- * ON COLORS (for text on colored backgrounds):
- * - onPrimary, onSecondary: Text on primary/secondary colored backgrounds
- * - onSuccess, onError, onWarning, onInfo: Text on semantic colored backgrounds
- *
- * SEMANTIC COLORS (can be used as text colors):
- * - success, error, warning, info: Semantic colors (can be text or background)
- *
- * NOTE: 'primary' and 'secondary' are BACKGROUND colors, not text colors.
- * Use 'onPrimary'/'onSecondary' for text on colored backgrounds, or
- * 'textPrimary'/'textSecondary' for general text.
- */
-export type ColorVariant = 'textPrimary' | 'textSecondary' | 'textTertiary' | 'textDisabled' | 'textInverse' | 'onSurface' | 'onBackground' | 'onPrimary' | 'onSecondary' | 'onSuccess' | 'onError' | 'onWarning' | 'onInfo' | 'success' | 'error' | 'warning' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'surfaceVariant';
-export interface AtomicTextProps {
-    children: React.ReactNode;
-    type?: TextStyleVariant;
-    color?: ColorVariant | string;
-    numberOfLines?: number;
-    ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-    textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
-    style?: StyleProp<TextStyle>;
-    testID?: string;
-}
-export declare const AtomicText: React.FC<AtomicTextProps>;

package/dist/presentation/atoms/AtomicTextArea.d.ts

@@ -1,84 +0,0 @@
-/**
- * AtomicTextArea Component
- *
- * A multiline text input component with pure React Native implementation
- * for longer text entry with consistent styling.
- *
- * Features:
- * - Pure React Native TextInput with multiline
- * - Outlined/filled/flat variants
- * - Error, success, disabled states
- * - Character counter with max length
- * - Helper text for guidance or errors
- * - Configurable rows for height
- * - Theme-aware styling
- * - Full accessibility support
- *
- * Usage:
- * ```tsx
- * const [description, setDescription] = useState('');
- *
- * <AtomicTextArea
- *   value={description}
- *   onChangeText={setDescription}
- *   label="Description"
- *   placeholder="Enter description..."
- *   maxLength={500}
- *   showCharacterCount
- *   rows={6}
- *   helperText="Provide a detailed description"
- * />
- * ```
- */
-import React from 'react';
-import { StyleProp, ViewStyle, TextStyle } from 'react-native';
-export type AtomicTextAreaVariant = 'outlined' | 'filled' | 'flat';
-export type AtomicTextAreaState = 'default' | 'error' | 'success' | 'disabled';
-export type AtomicTextAreaSize = 'sm' | 'md' | 'lg';
-export interface AtomicTextAreaProps {
-    /** Textarea label */
-    label?: string;
-    /** Current textarea value */
-    value?: string;
-    /** Value change callback */
-    onChangeText?: (text: string) => void;
-    /** Textarea variant (outlined, filled, flat) */
-    variant?: AtomicTextAreaVariant;
-    /** Textarea state (default, error, success, disabled) */
-    state?: AtomicTextAreaState;
-    /** Textarea size (sm, md, lg) */
-    size?: AtomicTextAreaSize;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Helper text below textarea */
-    helperText?: string;
-    /** Maximum character length */
-    maxLength?: number;
-    /** Show character counter */
-    showCharacterCount?: boolean;
-    /** Number of visible text rows */
-    rows?: number;
-    /** Minimum height in pixels */
-    minHeight?: number;
-    /** Auto-capitalize */
-    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-    /** Auto-correct */
-    autoCorrect?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Container style */
-    style?: StyleProp<ViewStyle>;
-    /** Input text style */
-    inputStyle?: StyleProp<TextStyle>;
-    /** Test ID for E2E testing */
-    testID?: string;
-    /** Blur callback */
-    onBlur?: () => void;
-    /** Focus callback */
-    onFocus?: () => void;
-}
-/**
- * AtomicTextArea - Pure React Native Multiline Text Input
- */
-export declare const AtomicTextArea: React.FC<AtomicTextAreaProps>;
-export type { AtomicTextAreaProps as TextAreaProps };

package/dist/presentation/atoms/AtomicTouchable.d.ts

@@ -1,76 +0,0 @@
-import React from 'react';
-import { AtomicTouchableProps, TouchableFeedback, FeedbackStrength } from './touchable/types';
-export type { AtomicTouchableProps, TouchableFeedback, FeedbackStrength, HitSlop, } from './touchable/types';
-export { getOpacityValue, getTouchableContainerStyle, getDisabledStyle, normalizeHitSlop, } from './touchable/styles/touchableStyles';
-/**
- * AtomicTouchable - Unified Touchable Component
- *
- * A modern, accessible touchable wrapper using React Native's Pressable API.
- * Provides consistent behavior across iOS, Android, and Web.
- *
- * Features:
- * - Multiple feedback variants (opacity, highlight, ripple, none)
- * - Configurable feedback strength (subtle, normal, strong)
- * - Disabled state with visual feedback
- * - Hit slop customization for small touch targets
- * - Minimum 48x48 touch target (iOS HIG compliance)
- * - Full accessibility support
- * - Theme-aware ripple colors
- *
- * @example
- * ```tsx
- * // Basic usage with opacity feedback
- * <AtomicTouchable onPress={handlePress}>
- *   <AtomicText>Press Me</AtomicText>
- * </AtomicTouchable>
- *
- * // With custom hit slop (extends touch area)
- * <AtomicTouchable
- *   onPress={handlePress}
- *   hitSlop={8}
- *   feedback="ripple"
- * >
- *   <AtomicIcon name="X" size="sm" />
- * </AtomicTouchable>
- * ```
- */
-export declare const AtomicTouchable: React.FC<AtomicTouchableProps>;
-/**
- * Preset touchable configurations for common use cases
- */
-export declare const TouchablePresets: {
-    /**
-     * iOS-style opacity feedback (default)
-     */
-    ios: {
-        feedback: TouchableFeedback;
-        strength: FeedbackStrength;
-    };
-    /**
-     * Android-style ripple feedback
-     */
-    android: {
-        feedback: TouchableFeedback;
-        strength: FeedbackStrength;
-    };
-    /**
-     * Subtle feedback for secondary actions
-     */
-    subtle: {
-        feedback: TouchableFeedback;
-        strength: FeedbackStrength;
-    };
-    /**
-     * Strong feedback for primary actions
-     */
-    strong: {
-        feedback: TouchableFeedback;
-        strength: FeedbackStrength;
-    };
-    /**
-     * No visual feedback (use sparingly)
-     */
-    none: {
-        feedback: TouchableFeedback;
-    };
-};

package/dist/presentation/atoms/fab/styles/fabStyles.d.ts

@@ -1,22 +0,0 @@
-import { ViewStyle } from 'react-native';
-import { FabVariant, FabSize, FabVariantConfig, FabSizeConfig } from '../types';
-import type { DesignTokens } from '@umituz/react-native-theme';
-/**
- * Material Design 3 FAB size configurations
- */
-export declare const FAB_SIZES: Record<FabSize, FabSizeConfig>;
-/**
- * Get FAB variant styles based on design tokens
- * Note: Icon colors are handled via customColor in AtomicIcon
- */
-export declare const getFabVariants: (tokens: DesignTokens) => Record<FabVariant, FabVariantConfig>;
-/**
- * Get icon size based on FAB size
- * Returns AtomicIconSize type ('sm', 'md', 'lg')
- */
-export declare const getFabIconSize: (size: FabSize) => "sm" | "md" | "lg";
-/**
- * Get FAB border for depth (shadows removed per CLAUDE.md)
- * Subtle border provides visual elevation without shadow issues
- */
-export declare const getFabBorder: (tokens: DesignTokens) => ViewStyle;