@umituz/react-native-design-system 1.5.24 → 1.5.26

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,70 @@
+import { StyleProp, ViewStyle } from 'react-native';
+/**
+ * FAB (Floating Action Button) size variants
+ * Based on Material Design 3 standards
+ */
+export type FabSize = 'sm' | 'md' | 'lg';
+/**
+ * FAB variant types
+ * - primary: Main action (uses primary color)
+ * - secondary: Secondary action (uses secondary color)
+ * - surface: Neutral action (uses surface color with border)
+ */
+export type FabVariant = 'primary' | 'secondary' | 'surface';
+/**
+ * FAB configuration for variant styling
+ */
+export interface FabVariantConfig {
+    backgroundColor: string;
+    iconColor: string;
+}
+/**
+ * FAB configuration for size styling
+ */
+export interface FabSizeConfig {
+    width: number;
+    height: number;
+    borderRadius: number;
+}
+/**
+ * AtomicFab component props
+ */
+export interface AtomicFabProps {
+    /**
+     * Icon name to display (required)
+     * Any MaterialIcons name (see https://fonts.google.com/icons)
+     * Examples: 'add', 'edit', 'camera', etc.
+     */
+    icon: string;
+    /**
+     * Callback when FAB is pressed
+     */
+    onPress: () => void;
+    /**
+     * Visual variant of the FAB
+     * @default 'primary'
+     */
+    variant?: FabVariant;
+    /**
+     * Size of the FAB
+     * @default 'md'
+     */
+    size?: FabSize;
+    /**
+     * Whether the FAB is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom style for the FAB container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+    /**
+     * Accessibility label
+     */
+    accessibilityLabel?: string;
+}

package/dist/presentation/atoms/filter/styles/filterStyles.d.ts

@@ -0,0 +1,14 @@
+import { ViewStyle } from 'react-native';
+/**
+ * Filter container styles
+ * Horizontal scrollable filter chip list
+ */
+export declare const getFilterContainerStyle: () => ViewStyle;
+/**
+ * Clear all button container styles
+ */
+export declare const getClearAllContainerStyle: () => ViewStyle;
+/**
+ * ScrollView content container style
+ */
+export declare const getScrollContentContainerStyle: () => ViewStyle;