@umituz/react-native-design-system 1.5.23 → 1.5.25

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

@@ -0,0 +1,272 @@
+/**
+ * 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';
+ * ```
+ */
+import { AtomicButton, type AtomicButtonProps } from './AtomicButton';
+import { AtomicText, type AtomicTextProps } from './AtomicText';
+import { AtomicCard, type AtomicCardProps, type AtomicCardVariant, type AtomicCardPadding } from './AtomicCard';
+import { AtomicInput, type AtomicInputProps, type AtomicInputVariant, type AtomicInputState, type AtomicInputSize } from './AtomicInput';
+import { AtomicIcon, type AtomicIconProps, type AtomicIconSize, type AtomicIconColor } from './AtomicIcon';
+import { AtomicImage, type AtomicImageProps } from './AtomicImage';
+import { AtomicSwitch, type AtomicSwitchProps } from './AtomicSwitch';
+import { AtomicBadge, type AtomicBadgeProps } from './AtomicBadge';
+import { AtomicFormError, type AtomicFormErrorProps } from './AtomicFormError';
+import { AtomicAvatar, type AtomicAvatarProps } from './AtomicAvatar';
+import { AtomicChip, type AtomicChipProps } from './AtomicChip';
+import { AtomicDivider, type AtomicDividerProps } from './AtomicDivider';
+import { AtomicProgress, type AtomicProgressProps } from './AtomicProgress';
+import { AtomicAvatarGroup, type AtomicAvatarGroupProps, type AvatarData } from './AtomicAvatarGroup';
+import { AtomicFab, type AtomicFabProps, type FabSize, type FabVariant, getFabVariants } from './AtomicFab';
+import { AtomicFilter, type AtomicFilterProps, type FilterOption, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle } from './AtomicFilter';
+import { AtomicTouchable, type AtomicTouchableProps, type TouchableFeedback, type FeedbackStrength, type HitSlop, TouchablePresets, getOpacityValue, normalizeHitSlop } from './AtomicTouchable';
+export { AtomicButton, type AtomicButtonProps, };
+export { AtomicText, type AtomicTextProps, };
+export { AtomicCard, type AtomicCardProps, type AtomicCardVariant, type AtomicCardPadding, };
+export { AtomicInput, type AtomicInputProps, type AtomicInputVariant, type AtomicInputState, type AtomicInputSize, };
+export { AtomicIcon, type AtomicIconProps, type AtomicIconSize, type AtomicIconColor, };
+export { AtomicImage, type AtomicImageProps, };
+export { AtomicSwitch, type AtomicSwitchProps, };
+export { AtomicBadge, type AtomicBadgeProps, };
+export { AtomicFormError, type AtomicFormErrorProps, };
+export { AtomicAvatar, type AtomicAvatarProps, };
+export { AtomicChip, type AtomicChipProps, };
+export { AtomicDivider, type AtomicDividerProps, };
+export { AtomicProgress, type AtomicProgressProps, };
+export { AtomicAvatarGroup, type AtomicAvatarGroupProps, type AvatarData, };
+export { AtomicFab, type AtomicFabProps, type FabSize, type FabVariant, getFabVariants, };
+export { AtomicFilter, type AtomicFilterProps, type FilterOption, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, };
+export { AtomicTouchable, type AtomicTouchableProps, type TouchableFeedback, type FeedbackStrength, type HitSlop, TouchablePresets, getOpacityValue, normalizeHitSlop, };
+/**
+ * Convenience re-exports for common patterns
+ */
+export type AtomicComponentProps = AtomicButtonProps | AtomicTextProps | AtomicCardProps | AtomicInputProps | AtomicIconProps | AtomicImageProps | AtomicSwitchProps | AtomicBadgeProps | AtomicFormErrorProps | AtomicAvatarProps | AtomicChipProps | AtomicDividerProps | AtomicProgressProps | AtomicAvatarGroupProps | AtomicFabProps | AtomicFilterProps | AtomicTouchableProps;
+export type AtomicVariants = {
+    card: AtomicCardVariant;
+    input: AtomicInputVariant;
+    icon: AtomicIconSize;
+};
+export type AtomicColors = AtomicIconColor;
+/**
+ * Atomic component utilities
+ */
+export declare const AtomicUtils: {
+    /**
+     * Get recommended component combinations for common UI patterns
+     */
+    getRecommendedCombinations: () => {
+        cardWithHeader: {
+            card: {
+                variant: "elevated";
+                padding: "lg";
+            };
+            title: {
+                variant: "titleLarge";
+                color: "primary";
+            };
+            description: {
+                variant: "bodyMedium";
+                color: "secondary";
+            };
+        };
+        formField: {
+            input: {
+                variant: "outlined";
+                size: "md";
+            };
+            label: {
+                variant: "labelMedium";
+                color: "primary";
+            };
+            helper: {
+                variant: "bodySmall";
+                color: "secondary";
+            };
+        };
+        primaryAction: {
+            button: {
+                variant: "primary";
+                size: "lg";
+            };
+            text: {
+                variant: "labelLarge";
+                color: "onPrimary";
+            };
+            icon: {
+                size: "md";
+                color: "onPrimary";
+            };
+        };
+        secondaryAction: {
+            button: {
+                variant: "outline";
+                size: "md";
+            };
+            text: {
+                variant: "labelMedium";
+                color: "primary";
+            };
+            icon: {
+                size: "sm";
+                color: "primary";
+            };
+        };
+    };
+    /**
+     * Validate component prop combinations
+     */
+    validatePropCombination: (componentType: keyof AtomicVariants, props: any) => boolean;
+    /**
+     * Get accessibility guidelines for component combinations
+     */
+    getAccessibilityGuidelines: () => {
+        button: {
+            minimumTouchTarget: number;
+            requiresAccessibilityLabel: boolean;
+            supportsAccessibilityHint: boolean;
+        };
+        input: {
+            requiresLabel: boolean;
+            supportsHelperText: boolean;
+            requiresAccessibilityLabel: boolean;
+        };
+        card: {
+            supportsAccessibilityRole: boolean;
+            canBeAccessibilityContainer: boolean;
+        };
+        text: {
+            supportsAccessibilityLabel: boolean;
+            respectsSystemTextSize: boolean;
+        };
+        icon: {
+            requiresAccessibilityLabel: boolean;
+            supportsAccessibilityHint: boolean;
+        };
+    };
+};
+declare const defaultExport: {
+    AtomicButton: React.FC<AtomicButtonProps>;
+    AtomicText: React.FC<AtomicTextProps>;
+    AtomicCard: React.FC<AtomicCardProps>;
+    AtomicInput: React.FC<AtomicInputProps>;
+    AtomicIcon: React.FC<import("@umituz/react-native-icon").IconProps>;
+    AtomicImage: React.FC<AtomicImageProps>;
+    AtomicSwitch: React.FC<AtomicSwitchProps>;
+    AtomicBadge: React.FC<AtomicBadgeProps>;
+    AtomicFormError: React.FC<AtomicFormErrorProps>;
+    AtomicAvatar: React.FC<AtomicAvatarProps>;
+    AtomicChip: React.FC<AtomicChipProps>;
+    AtomicDivider: React.FC<AtomicDividerProps>;
+    AtomicProgress: React.FC<AtomicProgressProps>;
+    AtomicAvatarGroup: React.FC<AtomicAvatarGroupProps>;
+    AtomicFab: React.FC<AtomicFabProps>;
+    AtomicFilter: React.FC<AtomicFilterProps>;
+    AtomicTouchable: React.FC<AtomicTouchableProps>;
+    AtomicUtils: {
+        /**
+         * Get recommended component combinations for common UI patterns
+         */
+        getRecommendedCombinations: () => {
+            cardWithHeader: {
+                card: {
+                    variant: "elevated";
+                    padding: "lg";
+                };
+                title: {
+                    variant: "titleLarge";
+                    color: "primary";
+                };
+                description: {
+                    variant: "bodyMedium";
+                    color: "secondary";
+                };
+            };
+            formField: {
+                input: {
+                    variant: "outlined";
+                    size: "md";
+                };
+                label: {
+                    variant: "labelMedium";
+                    color: "primary";
+                };
+                helper: {
+                    variant: "bodySmall";
+                    color: "secondary";
+                };
+            };
+            primaryAction: {
+                button: {
+                    variant: "primary";
+                    size: "lg";
+                };
+                text: {
+                    variant: "labelLarge";
+                    color: "onPrimary";
+                };
+                icon: {
+                    size: "md";
+                    color: "onPrimary";
+                };
+            };
+            secondaryAction: {
+                button: {
+                    variant: "outline";
+                    size: "md";
+                };
+                text: {
+                    variant: "labelMedium";
+                    color: "primary";
+                };
+                icon: {
+                    size: "sm";
+                    color: "primary";
+                };
+            };
+        };
+        /**
+         * Validate component prop combinations
+         */
+        validatePropCombination: (componentType: keyof AtomicVariants, props: any) => boolean;
+        /**
+         * Get accessibility guidelines for component combinations
+         */
+        getAccessibilityGuidelines: () => {
+            button: {
+                minimumTouchTarget: number;
+                requiresAccessibilityLabel: boolean;
+                supportsAccessibilityHint: boolean;
+            };
+            input: {
+                requiresLabel: boolean;
+                supportsHelperText: boolean;
+                requiresAccessibilityLabel: boolean;
+            };
+            card: {
+                supportsAccessibilityRole: boolean;
+                canBeAccessibilityContainer: boolean;
+            };
+            text: {
+                supportsAccessibilityLabel: boolean;
+                respectsSystemTextSize: boolean;
+            };
+            icon: {
+                requiresAccessibilityLabel: boolean;
+                supportsAccessibilityHint: boolean;
+            };
+        };
+    };
+};
+export default defaultExport;

package/dist/presentation/atoms/picker/styles/pickerStyles.d.ts

@@ -0,0 +1,84 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { type DesignTokens } from '@umituz/react-native-theme';
+/**
+ * Picker container styles with iOS HIG compliance
+ *
+ * All picker sizes meet Apple's minimum touch target requirement of 44pt.
+ * @see https://developer.apple.com/design/human-interface-guidelines/layout
+ */
+export declare const getPickerContainerStyles: (tokens: DesignTokens) => {
+    base: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: string;
+    };
+    size: {
+        sm: {
+            height: 44;
+            paddingHorizontal: number;
+            borderRadius: number;
+        };
+        md: {
+            height: number;
+            paddingHorizontal: number;
+            borderRadius: number;
+        };
+        lg: {
+            height: number;
+            paddingHorizontal: number;
+            borderRadius: number;
+        };
+    };
+    state: {
+        error: {
+            borderColor: string;
+            borderWidth: number;
+        };
+        disabled: {
+            backgroundColor: string;
+            opacity: number;
+        };
+    };
+};
+export declare const getPickerLabelStyles: (tokens: DesignTokens) => {
+    base: TextStyle;
+    size: {
+        sm: TextStyle;
+        md: TextStyle;
+        lg: TextStyle;
+    };
+};
+export declare const getPickerPlaceholderStyles: (tokens: DesignTokens) => {
+    base: TextStyle;
+    size: {
+        sm: TextStyle;
+        md: TextStyle;
+        lg: TextStyle;
+    };
+};
+export declare const getPickerValueStyles: (tokens: DesignTokens) => {
+    base: TextStyle;
+    size: {
+        sm: TextStyle;
+        md: TextStyle;
+        lg: TextStyle;
+    };
+};
+export declare const getPickerErrorStyles: (tokens: DesignTokens) => TextStyle;
+export declare const getModalOverlayStyles: (tokens: DesignTokens) => ViewStyle;
+export declare const getModalContainerStyles: (tokens: DesignTokens, maxHeight: number) => ViewStyle;
+export declare const getModalHeaderStyles: (tokens: DesignTokens) => ViewStyle;
+export declare const getModalTitleStyles: (tokens: DesignTokens) => TextStyle;
+export declare const getSearchContainerStyles: (tokens: DesignTokens) => ViewStyle;
+export declare const getSearchInputStyles: (tokens: DesignTokens) => TextStyle;
+export declare const getOptionContainerStyles: (tokens: DesignTokens, isSelected: boolean, isDisabled: boolean) => ViewStyle;
+export declare const getOptionTextStyles: (tokens: DesignTokens, isSelected: boolean) => TextStyle;
+export declare const getOptionDescriptionStyles: (tokens: DesignTokens) => TextStyle;
+export declare const getEmptyStateStyles: (tokens: DesignTokens) => ViewStyle;
+export declare const getEmptyStateTextStyles: (tokens: DesignTokens) => TextStyle;
+export declare const getChipContainerStyles: (tokens: DesignTokens) => ViewStyle;
+export declare const getChipStyles: (tokens: DesignTokens) => ViewStyle;
+export declare const getChipTextStyles: (tokens: DesignTokens) => TextStyle;

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

@@ -0,0 +1,37 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { AtomicIconColor } from '../../AtomicIcon';
+/**
+ * Picker option item
+ *
+ * icon: Any MaterialIcons name
+ * @see https://fonts.google.com/icons
+ */
+export interface PickerOption {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+    description?: string;
+    testID?: string;
+}
+export type PickerSize = 'sm' | 'md' | 'lg';
+export interface AtomicPickerProps {
+    value: string | string[];
+    onChange: (value: string | string[]) => void;
+    options: PickerOption[];
+    label?: string;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    autoClose?: boolean;
+    color?: AtomicIconColor;
+    size?: PickerSize;
+    modalTitle?: string;
+    emptyMessage?: string;
+    style?: ViewStyle | ViewStyle[];
+    labelStyle?: TextStyle | TextStyle[];
+    testID?: string;
+}

package/dist/presentation/atoms/touchable/styles/touchableStyles.d.ts

@@ -0,0 +1,30 @@
+import { ViewStyle } from 'react-native';
+import { FeedbackStrength } from '../types';
+/**
+ * Get opacity value based on feedback strength
+ */
+export declare const getOpacityValue: (strength: FeedbackStrength) => number;
+/**
+ * Get base touchable container style
+ * Ensures minimum touch target size (iOS HIG: 48x48)
+ */
+export declare const getTouchableContainerStyle: () => ViewStyle;
+/**
+ * Get disabled touchable style
+ */
+export declare const getDisabledStyle: () => ViewStyle;
+/**
+ * Convert number to HitSlop object
+ * If hitSlop is a number, apply it to all sides
+ */
+export declare const normalizeHitSlop: (hitSlop: number | {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+} | undefined) => {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+} | undefined;

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

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

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