@umituz/react-native-design-system 1.5.33 → 1.5.35

package/src/presentation/atoms/AtomicTextArea.js

@@ -1,195 +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, { useState } from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicText } from './AtomicText';
-/**
- * AtomicTextArea - Pure React Native Multiline Text Input
- */
-export const AtomicTextArea = ({ variant = 'outlined', state = 'default', size = 'md', label, value = '', onChangeText, placeholder, helperText, maxLength, showCharacterCount = false, rows = 4, minHeight, autoCapitalize = 'sentences', autoCorrect = true, disabled = false, style, inputStyle, testID, onBlur, onFocus, }) => {
-    const tokens = useAppDesignTokens();
-    const [isFocused, setIsFocused] = useState(false);
-    const isDisabled = state === 'disabled' || disabled;
-    const characterCount = value?.toString().length || 0;
-    const hasError = state === 'error';
-    const hasSuccess = state === 'success';
-    // Size configuration
-    const sizeConfig = {
-        sm: {
-            paddingVertical: tokens.spacing.xs,
-            paddingHorizontal: tokens.spacing.sm,
-            fontSize: tokens.typography.bodySmall.fontSize,
-            lineHeight: 20,
-        },
-        md: {
-            paddingVertical: tokens.spacing.sm,
-            paddingHorizontal: tokens.spacing.md,
-            fontSize: tokens.typography.bodyMedium.fontSize,
-            lineHeight: 24,
-        },
-        lg: {
-            paddingVertical: tokens.spacing.md,
-            paddingHorizontal: tokens.spacing.lg,
-            fontSize: tokens.typography.bodyLarge.fontSize,
-            lineHeight: 28,
-        },
-    };
-    const config = sizeConfig[size];
-    // Calculate height based on rows
-    const getTextAreaHeight = () => {
-        if (minHeight)
-            return minHeight;
-        const paddingVertical = config.paddingVertical * 2;
-        return (rows * config.lineHeight) + paddingVertical;
-    };
-    // Get variant styles
-    const getVariantStyle = () => {
-        const baseStyle = {
-            backgroundColor: tokens.colors.surface,
-            borderRadius: tokens.borders.radius.md,
-        };
-        let borderColor = tokens.colors.border;
-        if (isFocused)
-            borderColor = tokens.colors.primary;
-        if (hasError)
-            borderColor = tokens.colors.error;
-        if (hasSuccess)
-            borderColor = tokens.colors.success;
-        if (isDisabled)
-            borderColor = tokens.colors.borderDisabled;
-        switch (variant) {
-            case 'outlined':
-                return {
-                    ...baseStyle,
-                    borderWidth: isFocused ? 2 : 1,
-                    borderColor,
-                };
-            case 'filled':
-                return {
-                    ...baseStyle,
-                    backgroundColor: tokens.colors.surfaceSecondary,
-                    borderWidth: 0,
-                    borderBottomWidth: isFocused ? 2 : 1,
-                    borderBottomColor: borderColor,
-                };
-            case 'flat':
-                return {
-                    ...baseStyle,
-                    backgroundColor: 'transparent',
-                    borderWidth: 0,
-                    borderBottomWidth: 1,
-                    borderBottomColor: borderColor,
-                    borderRadius: 0,
-                };
-            default:
-                return baseStyle;
-        }
-    };
-    // Get text color based on state
-    const getTextColor = () => {
-        if (isDisabled)
-            return tokens.colors.textDisabled;
-        if (hasError)
-            return tokens.colors.error;
-        if (hasSuccess)
-            return tokens.colors.success;
-        return tokens.colors.textPrimary;
-    };
-    const containerStyle = [
-        styles.container,
-        getVariantStyle(),
-        {
-            paddingVertical: config.paddingVertical,
-            paddingHorizontal: config.paddingHorizontal,
-            height: getTextAreaHeight(),
-            opacity: isDisabled ? 0.5 : 1,
-        },
-        style,
-    ];
-    const textInputStyle = [
-        styles.input,
-        {
-            fontSize: config.fontSize,
-            lineHeight: config.lineHeight,
-            color: getTextColor(),
-        },
-        inputStyle,
-    ];
-    return (<View testID={testID}>
-      {label && (<AtomicText type="labelMedium" color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'} style={styles.label}>
-          {label}
-        </AtomicText>)}
-
-      <View style={containerStyle}>
-        <TextInput value={value} onChangeText={onChangeText} placeholder={placeholder} placeholderTextColor={tokens.colors.textSecondary} maxLength={maxLength} autoCapitalize={autoCapitalize} autoCorrect={autoCorrect} editable={!isDisabled} multiline={true} numberOfLines={rows} textAlignVertical="top" style={textInputStyle} onBlur={() => {
-            setIsFocused(false);
-            onBlur?.();
-        }} onFocus={() => {
-            setIsFocused(true);
-            onFocus?.();
-        }} testID={testID ? `${testID}-input` : undefined}/>
-      </View>
-
-      {(helperText || showCharacterCount) && (<View style={styles.helperRow}>
-          {helperText && (<AtomicText type="bodySmall" color={hasError ? 'error' : 'secondary'} style={styles.helperText} testID={testID ? `${testID}-helper` : undefined}>
-              {helperText}
-            </AtomicText>)}
-          {showCharacterCount && maxLength && (<AtomicText type="bodySmall" color="secondary" style={styles.characterCount} testID={testID ? `${testID}-count` : undefined}>
-              {characterCount}/{maxLength}
-            </AtomicText>)}
-        </View>)}
-    </View>);
-};
-const styles = StyleSheet.create({
-    container: {
-        justifyContent: 'flex-start',
-    },
-    input: {
-        flex: 1,
-    },
-    label: {
-        marginBottom: 4,
-    },
-    helperRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginTop: 4,
-    },
-    helperText: {
-        flex: 1,
-    },
-    characterCount: {
-        marginLeft: 8,
-    },
-});

package/src/presentation/atoms/AtomicTouchable.js

@@ -1,137 +0,0 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { getOpacityValue, getTouchableContainerStyle, getDisabledStyle, normalizeHitSlop, } from './touchable/styles/touchableStyles';
-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 const AtomicTouchable = ({ children, onPress, onPressIn, onPressOut, onLongPress, feedback = 'opacity', strength = 'normal', disabled = false, hitSlop, style, pressedStyle, disabledStyle, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', testID, delayLongPress = 500, rippleColor, rippleRadius = 0, }) => {
-    const tokens = useAppDesignTokens();
-    // Determine if touchable should be disabled
-    const isDisabled = disabled;
-    // Get opacity value based on strength
-    const opacityValue = getOpacityValue(strength);
-    // Normalize hit slop
-    const normalizedHitSlop = normalizeHitSlop(hitSlop);
-    // Default ripple color (theme primary with alpha)
-    const defaultRippleColor = tokens.colors.primary + '40'; // 40 = 25% opacity in hex
-    /**
-     * Get style based on pressed state
-     */
-    const getPressedStyle = ({ pressed }) => {
-        const baseStyle = [
-            getTouchableContainerStyle(),
-            style,
-        ];
-        if (isDisabled) {
-            return [...baseStyle, getDisabledStyle(), disabledStyle];
-        }
-        if (pressed) {
-            // Apply feedback based on variant
-            switch (feedback) {
-                case 'opacity':
-                    return [...baseStyle, { opacity: opacityValue }, pressedStyle];
-                case 'highlight':
-                    return [
-                        ...baseStyle,
-                        { backgroundColor: tokens.colors.surfaceVariant },
-                        pressedStyle,
-                    ];
-                case 'none':
-                    return [...baseStyle, pressedStyle];
-                case 'ripple':
-                    // Ripple is handled by android_ripple prop
-                    return [...baseStyle, pressedStyle];
-                default:
-                    return [...baseStyle, pressedStyle];
-            }
-        }
-        return baseStyle;
-    };
-    /**
-     * Android ripple configuration
-     * Used when feedback='ripple'
-     * Pressable automatically ignores this prop on iOS/Web
-     */
-    const androidRippleConfig = feedback === 'ripple'
-        ? {
-            color: rippleColor || defaultRippleColor,
-            borderless: false,
-            radius: rippleRadius,
-        }
-        : undefined;
-    return (<Pressable onPress={isDisabled ? undefined : onPress} onPressIn={isDisabled ? undefined : onPressIn} onPressOut={isDisabled ? undefined : onPressOut} onLongPress={isDisabled ? undefined : onLongPress} delayLongPress={delayLongPress} disabled={isDisabled} hitSlop={normalizedHitSlop} style={getPressedStyle} android_ripple={androidRippleConfig} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityRole={accessibilityRole} accessibilityState={{
-            disabled: isDisabled,
-        }} testID={testID}>
-      {children}
-    </Pressable>);
-};
-/**
- * Preset touchable configurations for common use cases
- */
-export const TouchablePresets = {
-    /**
-     * iOS-style opacity feedback (default)
-     */
-    ios: {
-        feedback: 'opacity',
-        strength: 'normal',
-    },
-    /**
-     * Android-style ripple feedback
-     */
-    android: {
-        feedback: 'ripple',
-        strength: 'normal',
-    },
-    /**
-     * Subtle feedback for secondary actions
-     */
-    subtle: {
-        feedback: 'opacity',
-        strength: 'subtle',
-    },
-    /**
-     * Strong feedback for primary actions
-     */
-    strong: {
-        feedback: 'opacity',
-        strength: 'strong',
-    },
-    /**
-     * No visual feedback (use sparingly)
-     */
-    none: {
-        feedback: 'none',
-    },
-};

package/src/presentation/atoms/fab/styles/fabStyles.js

@@ -1,62 +0,0 @@
-/**
- * Material Design 3 FAB size configurations
- */
-export const FAB_SIZES = {
-    sm: {
-        width: 40,
-        height: 40,
-        borderRadius: 20, // Perfect circle
-    },
-    md: {
-        width: 56,
-        height: 56,
-        borderRadius: 28, // Perfect circle (Material Design 3 standard)
-    },
-    lg: {
-        width: 72,
-        height: 72,
-        borderRadius: 36, // Perfect circle
-    },
-};
-/**
- * Get FAB variant styles based on design tokens
- * Note: Icon colors are handled via customColor in AtomicIcon
- */
-export const getFabVariants = (tokens) => ({
-    primary: {
-        backgroundColor: tokens.colors.primary,
-        iconColor: tokens.colors.onPrimary,
-    },
-    secondary: {
-        backgroundColor: tokens.colors.secondary,
-        iconColor: tokens.colors.onSecondary,
-    },
-    surface: {
-        backgroundColor: tokens.colors.surface,
-        iconColor: tokens.colors.onSurface,
-    },
-});
-/**
- * Get icon size based on FAB size
- * Returns AtomicIconSize type ('sm', 'md', 'lg')
- */
-export const getFabIconSize = (size) => {
-    switch (size) {
-        case 'sm':
-            return 'sm';
-        case 'md':
-            return 'md';
-        case 'lg':
-            return 'lg';
-        default:
-            return 'md';
-    }
-};
-/**
- * Get FAB border for depth (shadows removed per CLAUDE.md)
- * Subtle border provides visual elevation without shadow issues
- */
-export const getFabBorder = (tokens) => ({
-    borderWidth: 1,
-    borderColor: tokens.colors.outline,
-});

package/src/presentation/atoms/fab/types/index.js

@@ -1 +0,0 @@
-export {};

package/src/presentation/atoms/filter/styles/filterStyles.js

@@ -1,28 +0,0 @@
-/**
- * Filter container styles
- * Horizontal scrollable filter chip list
- */
-export const getFilterContainerStyle = () => ({
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    gap: 8, // Space between chips
-});
-/**
- * Clear all button container styles
- */
-export const getClearAllContainerStyle = () => ({
-    marginLeft: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-    justifyContent: 'center',
-    alignItems: 'center',
-});
-/**
- * ScrollView content container style
- */
-export const getScrollContentContainerStyle = () => ({
-    alignItems: 'center',
-    gap: 8,
-});

package/src/presentation/atoms/filter/types/index.js

@@ -1 +0,0 @@
-export {};

package/src/presentation/atoms/index.js

@@ -1,145 +0,0 @@
-/**
- * Atomic Components Export Index
- *
- * Centralized export file for all atomic design components
- * Following atomic design principles with React Native implementation
- *
- * Generated for {{APP_NAME}} - {{CATEGORY}} category
- * Theme: {{THEME_NAME}}
- *
- * Usage:
- * ```typescript
- * import { AtomicButton, AtomicText, AtomicCard } from '@domains/design-system';
- *
- * // Or individual imports
- * import { AtomicButton } from '@domains/design-system';
- * ```
- */
-// STEP 1: Import all components first (required for default export)
-import { AtomicButton, } from './AtomicButton';
-import { AtomicText, } from './AtomicText';
-import { AtomicCard, } from './AtomicCard';
-import { AtomicInput, } from './AtomicInput';
-import { AtomicIcon, } from './AtomicIcon';
-import { AtomicImage, } from './AtomicImage';
-import { AtomicSwitch, } from './AtomicSwitch';
-import { AtomicBadge, } from './AtomicBadge';
-import { AtomicFormError, } from './AtomicFormError';
-import { AtomicAvatar, } from './AtomicAvatar';
-import { AtomicChip, } from './AtomicChip';
-import { AtomicDivider, } from './AtomicDivider';
-import { AtomicProgress, } from './AtomicProgress';
-import { AtomicAvatarGroup, } from './AtomicAvatarGroup';
-import { AtomicFab, getFabVariants, } from './AtomicFab';
-import { AtomicFilter, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './AtomicFilter';
-import { AtomicTouchable, TouchablePresets, getOpacityValue, normalizeHitSlop, } from './AtomicTouchable';
-// STEP 2: Re-export all components (for named imports)
-export { AtomicButton, };
-// Helper types extracted from ButtonVariantConfig
-export { AtomicText, };
-export { AtomicCard, };
-export { AtomicInput, };
-export { AtomicIcon, };
-export { AtomicImage, };
-export { AtomicSwitch, };
-export { AtomicBadge, };
-export { AtomicFormError, };
-export { AtomicAvatar, };
-export { AtomicChip, };
-export { AtomicDivider, };
-export { AtomicProgress, };
-export { AtomicAvatarGroup, };
-export { AtomicFab, getFabVariants, };
-export { AtomicFilter, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, };
-export { AtomicTouchable, TouchablePresets, getOpacityValue, normalizeHitSlop, };
-/**
- * Atomic component utilities
- */
-export const AtomicUtils = {
-    /**
-     * Get recommended component combinations for common UI patterns
-     */
-    getRecommendedCombinations: () => ({
-        // Card with header
-        cardWithHeader: {
-            card: { variant: 'elevated', padding: 'lg' },
-            title: { variant: 'titleLarge', color: 'primary' },
-            description: { variant: 'bodyMedium', color: 'secondary' },
-        },
-        // Form field
-        formField: {
-            input: { variant: 'outlined', size: 'md' },
-            label: { variant: 'labelMedium', color: 'primary' },
-            helper: { variant: 'bodySmall', color: 'secondary' },
-        },
-        // Action button
-        primaryAction: {
-            button: { variant: 'primary', size: 'lg' },
-            text: { variant: 'labelLarge', color: 'onPrimary' },
-            icon: { size: 'md', color: 'onPrimary' },
-        },
-        // Secondary action
-        secondaryAction: {
-            button: { variant: 'outline', size: 'md' },
-            text: { variant: 'labelMedium', color: 'primary' },
-            icon: { size: 'sm', color: 'primary' },
-        },
-    }),
-    /**
-     * Validate component prop combinations
-     */
-    validatePropCombination: (componentType, props) => {
-        // Add validation logic here for prop combinations
-        // This helps catch design system violations early
-        return true;
-    },
-    /**
-     * Get accessibility guidelines for component combinations
-     */
-    getAccessibilityGuidelines: () => ({
-        button: {
-            minimumTouchTarget: 48,
-            requiresAccessibilityLabel: true,
-            supportsAccessibilityHint: true,
-        },
-        input: {
-            requiresLabel: true,
-            supportsHelperText: true,
-            requiresAccessibilityLabel: true,
-        },
-        card: {
-            supportsAccessibilityRole: true,
-            canBeAccessibilityContainer: true,
-        },
-        text: {
-            supportsAccessibilityLabel: true,
-            respectsSystemTextSize: true,
-        },
-        icon: {
-            requiresAccessibilityLabel: true,
-            supportsAccessibilityHint: false,
-        },
-    }),
-};
-// STEP 3: Default export (now all components are available in scope)
-const defaultExport = {
-    AtomicButton,
-    AtomicText,
-    AtomicCard,
-    AtomicInput,
-    AtomicIcon,
-    AtomicImage,
-    AtomicSwitch,
-    AtomicBadge,
-    AtomicFormError,
-    AtomicAvatar,
-    AtomicChip,
-    AtomicDivider,
-    AtomicProgress,
-    AtomicAvatarGroup,
-    AtomicFab,
-    AtomicFilter,
-    AtomicTouchable,
-    AtomicUtils,
-};
-export default defaultExport;

package/src/presentation/atoms/input/hooks/useInputState.js

@@ -1,12 +0,0 @@
-import { useState } from 'react';
-export const useInputState = (secureTextEntry = false) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const [isPasswordVisible, setIsPasswordVisible] = useState(!secureTextEntry);
-    const togglePasswordVisibility = () => setIsPasswordVisible(!isPasswordVisible);
-    return {
-        isFocused,
-        setIsFocused,
-        isPasswordVisible,
-        togglePasswordVisibility,
-    };
-};

package/src/presentation/atoms/input/styles/inputStyles.js

@@ -1,58 +0,0 @@
-export const getContainerVariantStyles = (tokens) => ({
-    outlined: {
-        borderWidth: 1,
-        borderRadius: 12,
-        borderColor: tokens.colors.outline,
-    },
-    filled: {
-        backgroundColor: tokens.colors.surfaceVariant,
-        borderRadius: 12,
-        borderBottomWidth: 2,
-        borderBottomColor: tokens.colors.outline,
-    },
-    underlined: {
-        borderBottomWidth: 1,
-        borderBottomColor: tokens.colors.outline,
-        backgroundColor: 'transparent',
-    },
-});
-export const containerSizeStyles = {
-    sm: { height: 40, paddingHorizontal: 12, paddingVertical: 8 },
-    md: { height: 56, paddingHorizontal: 16, paddingVertical: 16 },
-    lg: { height: 64, paddingHorizontal: 24, paddingVertical: 20 },
-};
-export const getInputSizeStyles = (tokens) => ({
-    sm: { fontSize: tokens.typography.bodyMedium.fontSize },
-    md: { fontSize: tokens.typography.bodyLarge.fontSize },
-    lg: { fontSize: tokens.typography.bodyLarge.fontSize },
-});
-export const getLabelSizeStyles = (tokens) => ({
-    sm: { fontSize: tokens.typography.bodySmall.fontSize },
-    md: { fontSize: tokens.typography.bodyMedium.fontSize },
-    lg: { fontSize: tokens.typography.bodyLarge.fontSize },
-});
-export const getStateStyles = (tokens) => ({
-    default: {},
-    error: { borderColor: tokens.colors.error },
-    success: { borderColor: tokens.colors.success },
-    disabled: {
-        backgroundColor: tokens.colors.surfaceDisabled,
-        borderColor: tokens.colors.outlineDisabled,
-    },
-});
-export const getFocusStyles = (tokens) => ({
-    outlined: { borderColor: tokens.colors.primary, borderWidth: 2 },
-    filled: { borderBottomColor: tokens.colors.primary, borderBottomWidth: 2 },
-    underlined: { borderBottomColor: tokens.colors.primary, borderBottomWidth: 2 },
-});
-export const getStateColor = (tokens, state, isFocused, isDisabled) => {
-    if (isDisabled)
-        return tokens.colors.onSurfaceDisabled;
-    if (state === 'error')
-        return tokens.colors.error;
-    if (state === 'success')
-        return tokens.colors.success;
-    if (isFocused)
-        return tokens.colors.primary;
-    return tokens.colors.surfaceVariant;
-};

package/src/presentation/atoms/input/types/index.js

@@ -1 +0,0 @@
-export {};