@umituz/react-native-design-system 4.28.22 → 4.29.0

package/dist/atoms/input/hooks/useInputState.d.ts

@@ -0,0 +1,18 @@
+interface UseInputStateProps {
+    value?: string;
+    onChangeText?: (text: string) => void;
+    secureTextEntry?: boolean;
+    maxLength?: number;
+}
+interface UseInputStateReturn {
+    localValue: string;
+    isFocused: boolean;
+    isPasswordVisible: boolean;
+    characterCount: number;
+    isAtMaxLength: boolean;
+    setIsFocused: (focused: boolean) => void;
+    handleTextChange: (text: string) => void;
+    togglePasswordVisibility: () => void;
+}
+export declare const useInputState: ({ value, onChangeText, secureTextEntry, maxLength, }?: UseInputStateProps) => UseInputStateReturn;
+export {};

package/dist/atoms/input/styles/inputStyles.d.ts

@@ -0,0 +1,15 @@
+/**
+ * AtomicInput Styles
+ * StyleSheet for AtomicInput component
+ */
+export declare const inputStyles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    input: {
+        flex: number;
+        margin: number;
+        padding: number;
+    };
+};

package/dist/atoms/input/styles/inputStylesHelper.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Input Styles Helper
+ *
+ * Helper functions for AtomicInput component styling.
+ * Extracted from AtomicInput for better separation of concerns.
+ */
+import { ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../theme';
+import type { AtomicInputVariant, AtomicInputSize } from '../../input/types';
+interface GetVariantStyleParams {
+    variant: AtomicInputVariant;
+    isFocused: boolean;
+    hasError: boolean;
+    hasSuccess: boolean;
+    isDisabled: boolean;
+    tokens: ReturnType<typeof useAppDesignTokens>;
+}
+interface GetSizeConfigParams {
+    size: AtomicInputSize;
+    tokens: ReturnType<typeof useAppDesignTokens>;
+}
+export declare const getSizeConfig: ({ size, tokens }: GetSizeConfigParams) => {
+    paddingVertical: number;
+    paddingHorizontal: number;
+    fontSize: number;
+    iconSize: number;
+    minHeight: number;
+} | {
+    paddingVertical: number;
+    paddingHorizontal: number;
+    fontSize: number;
+    iconSize: number;
+    minHeight: number;
+} | {
+    paddingVertical: number;
+    paddingHorizontal: number;
+    fontSize: number;
+    iconSize: number;
+    minHeight: number;
+};
+export declare const getVariantStyle: ({ variant, isFocused, hasError, hasSuccess, isDisabled, tokens, }: GetVariantStyleParams) => ViewStyle;
+export declare const getTextColor: ({ isDisabled, hasError, hasSuccess, tokens, }: {
+    isDisabled: boolean;
+    hasError: boolean;
+    hasSuccess: boolean;
+    tokens: ReturnType<typeof useAppDesignTokens>;
+}) => string;
+export {};

package/dist/atoms/input/types.d.ts

@@ -0,0 +1,71 @@
+import type { StyleProp, TextInputProps } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { IconName } from '../icon';
+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 (Ionicons name) */
+    leadingIcon?: IconName;
+    /** Trailing icon (Ionicons name) */
+    trailingIcon?: IconName;
+    /** 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' | 'web-search' | 'twitter' | 'numeric' | 'visible-password';
+    /** Return key type */
+    returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send';
+    /** Callback when submit button is pressed */
+    onSubmitEditing?: () => void;
+    /** Blur on submit */
+    blurOnSubmit?: boolean;
+    /** Auto-capitalize */
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    /** Auto-correct */
+    autoCorrect?: boolean;
+    /** Auto-complete (Android/Web) */
+    autoComplete?: TextInputProps['autoComplete'];
+    /** 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;
+    /** Multiline input support */
+    multiline?: boolean;
+    /** Number of lines for multiline input */
+    numberOfLines?: number;
+    /** iOS text content type for AutoFill */
+    textContentType?: TextInputProps['textContentType'];
+}
+export type { AtomicInputProps as InputProps };

package/dist/atoms/picker/components/PickerChips.d.ts

@@ -0,0 +1,15 @@
+/**
+ * PickerChips Component
+ *
+ * Component for rendering selected chips in multi-select mode.
+ * Extracted from AtomicPicker for better separation of concerns.
+ */
+import React from 'react';
+import { PickerOption } from '../types';
+interface PickerChipsProps {
+    selectedOptions: PickerOption[];
+    onRemoveChip: (value: string) => void;
+    testID?: string;
+}
+export declare const PickerChips: React.FC<PickerChipsProps>;
+export {};

package/dist/atoms/picker/components/PickerIcons.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Picker Icons Component
+ * Renders clear button and dropdown icon for AtomicPicker
+ */
+import React from 'react';
+interface PickerIconsProps {
+    clearable: boolean;
+    disabled: boolean;
+    modalVisible: boolean;
+    selectedOptionsCount: number;
+    onClear: () => void;
+    clearAccessibilityLabel?: string;
+    testID?: string;
+}
+export declare const PickerIcons: React.FC<PickerIconsProps>;
+export {};

package/dist/atoms/picker/components/PickerModal.d.ts

@@ -0,0 +1,24 @@
+/**
+ * PickerModal - Selection modal for AtomicPicker
+ */
+import React from 'react';
+import { PickerOption } from '../types';
+interface PickerModalProps {
+    visible: boolean;
+    onClose: () => void;
+    options: PickerOption[];
+    selectedValues: string[];
+    onSelect: (value: string) => void;
+    title?: string;
+    searchable?: boolean;
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    filteredOptions: PickerOption[];
+    multiple?: boolean;
+    emptyMessage?: string;
+    searchPlaceholder?: string;
+    closeAccessibilityLabel?: string;
+    testID?: string;
+}
+export declare const PickerModal: React.FC<PickerModalProps>;
+export {};

package/dist/atoms/picker/hooks/usePickerState.d.ts

@@ -0,0 +1,24 @@
+import type { PickerOption } from '../../picker/types';
+interface UsePickerStateProps {
+    value: string | string[] | null;
+    multiple: boolean;
+    options: PickerOption[];
+    placeholder?: string;
+    autoClose?: boolean;
+    onChange: (value: string | string[]) => void;
+}
+export declare const usePickerState: ({ value, multiple, options, placeholder, autoClose, onChange, }: UsePickerStateProps) => {
+    modalVisible: boolean;
+    searchQuery: string;
+    selectedValues: string[];
+    selectedOptions: PickerOption[];
+    filteredOptions: PickerOption[];
+    displayText: string | undefined;
+    openModal: () => void;
+    closeModal: () => void;
+    handleSelect: (optionValue: string) => void;
+    handleClear: () => void;
+    handleSearch: (query: string) => void;
+    handleChipRemove: (value: string) => void;
+};
+export {};

package/dist/atoms/picker/styles/pickerModalStyles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Picker Modal Styles
+ */
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+export declare const getModalOverlayStyles: () => ViewStyle;
+export declare const getModalContainerStyles: (tokens: DesignTokens, bottomInset: number) => ViewStyle;
+export declare const getModalHeaderStyles: (tokens: DesignTokens) => ViewStyle;
+export declare const getModalTitleStyles: (tokens: DesignTokens) => TextStyle;

package/dist/atoms/picker/styles/pickerOptionStyles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Picker Option Styles
+ */
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+export declare const getOptionContainerStyles: (tokens: DesignTokens, selected: boolean, disabled: boolean) => ViewStyle;
+export declare const getOptionTextStyles: (tokens: DesignTokens, selected: boolean) => TextStyle;
+export declare const getOptionDescriptionStyles: (tokens: DesignTokens) => TextStyle;

package/dist/atoms/picker/styles/pickerSearchStyles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Picker Search Styles
+ */
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+export declare const getSearchContainerStyles: (tokens: DesignTokens) => ViewStyle;
+export declare const getSearchInputStyles: (tokens: DesignTokens) => TextStyle;

package/dist/atoms/picker/styles/pickerStateStyles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Picker Empty State & Chip Styles
+ */
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+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/atoms/picker/styles/pickerStyles.d.ts

@@ -0,0 +1,35 @@
+/**
+ * AtomicPicker Styles
+ */
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+export type PickerSize = 'sm' | 'md' | 'lg';
+export interface PickerContainerStyles {
+    base: ViewStyle;
+    size: Record<PickerSize, ViewStyle>;
+    state: {
+        error: ViewStyle;
+        disabled: ViewStyle;
+    };
+}
+export interface PickerLabelStyles {
+    base: TextStyle;
+    size: Record<PickerSize, TextStyle>;
+}
+export interface PickerValueStyles {
+    base: TextStyle;
+    size: Record<PickerSize, TextStyle>;
+}
+export interface PickerPlaceholderStyles {
+    base: TextStyle;
+    size: Record<PickerSize, TextStyle>;
+}
+export declare const getPickerContainerStyles: (tokens: DesignTokens) => PickerContainerStyles;
+export declare const getPickerLabelStyles: (tokens: DesignTokens) => PickerLabelStyles;
+export declare const getPickerValueStyles: (tokens: DesignTokens) => PickerValueStyles;
+export declare const getPickerPlaceholderStyles: (tokens: DesignTokens) => PickerPlaceholderStyles;
+export declare const getPickerErrorStyles: (tokens: DesignTokens) => TextStyle;
+export * from './pickerModalStyles';
+export * from './pickerSearchStyles';
+export * from './pickerOptionStyles';
+export * from './pickerStateStyles';

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

@@ -0,0 +1,52 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { IconColor } from '../icon';
+/**
+ * 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';
+/**
+ * AtomicPickerProps
+ *
+ * IMPORTANT: String props (placeholder, emptyMessage, etc.) are REQUIRED
+ * for proper i18n support. Pass translated strings from your app's i18n system.
+ * Do NOT rely on default English values.
+ */
+export interface AtomicPickerProps {
+    value: string | string[];
+    onChange: (value: string | string[]) => void;
+    options: PickerOption[];
+    label?: string;
+    /** Placeholder text - pass translated string for i18n */
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    autoClose?: boolean;
+    color?: IconColor;
+    size?: PickerSize;
+    modalTitle?: string;
+    /** Empty state message - pass translated string for i18n */
+    emptyMessage?: string;
+    /** Search placeholder text - pass translated string for i18n */
+    searchPlaceholder?: string;
+    /** Clear button accessibility label - pass translated string for i18n */
+    clearAccessibilityLabel?: string;
+    /** Close button accessibility label - pass translated string for i18n */
+    closeAccessibilityLabel?: string;
+    style?: ViewStyle | ViewStyle[];
+    labelStyle?: TextStyle | TextStyle[];
+    testID?: string;
+}

package/dist/atoms/skeleton/AtomicSkeleton.d.ts

@@ -0,0 +1,39 @@
+/**
+ * AtomicSkeleton - Skeleton Loader Component
+ *
+ * Skeleton placeholder loader for loading states.
+ *
+ * @example
+ * ```tsx
+ * // List skeleton
+ * <AtomicSkeleton pattern="list" count={5} />
+ *
+ * // Card skeleton
+ * <AtomicSkeleton pattern="card" count={3} />
+ *
+ * // Custom skeleton
+ * <AtomicSkeleton
+ *   pattern="custom"
+ *   custom={[
+ *     { width: '100%', height: 200, borderRadius: 12 },
+ *     { width: '80%', height: 20, borderRadius: 4 }
+ *   ]}
+ * />
+ * ```
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
+export interface AtomicSkeletonProps {
+    /** Skeleton pattern preset */
+    pattern?: SkeletonPattern;
+    /** Custom skeleton configurations */
+    custom?: SkeletonConfig[];
+    /** Number of skeleton items to render */
+    count?: number;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Test ID for testing */
+    testID?: string;
+}
+export declare const AtomicSkeleton: React.FC<AtomicSkeletonProps>;

package/dist/atoms/skeleton/AtomicSkeleton.types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * AtomicSkeleton Types
+ *
+ * Type definitions and configurations for skeleton loading states.
+ */
+/**
+ * Skeleton loader pattern presets
+ */
+export type SkeletonPattern = 'list' | 'card' | 'profile' | 'text' | 'custom';
+/**
+ * Skeleton loader configuration for individual skeleton elements
+ */
+export interface SkeletonConfig {
+    /** Width of skeleton element (number in pixels or percentage string) */
+    width?: number | string;
+    /** Height of skeleton element in pixels */
+    height?: number;
+    /** Border radius in pixels */
+    borderRadius?: number;
+    /** Bottom margin in pixels */
+    marginBottom?: number;
+}
+/**
+ * Predefined skeleton pattern configurations
+ *
+ * - **list**: Single row skeleton for list items
+ * - **card**: Card-style skeleton with image and text placeholders
+ * - **profile**: Profile skeleton with avatar and text
+ * - **text**: Multiple text line skeletons
+ * - **custom**: Use custom configuration
+ */
+export declare const SKELETON_PATTERNS: Record<SkeletonPattern, SkeletonConfig[]>;

package/dist/atoms/status-bar/AtomicStatusBar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * AtomicStatusBar Component
+ * Theme-aware status bar that automatically adjusts based on theme mode
+ */
+import React from 'react';
+import { StatusBarProps } from 'react-native';
+export interface AtomicStatusBarProps extends Omit<StatusBarProps, 'barStyle' | 'backgroundColor'> {
+    barStyle?: 'auto' | 'light-content' | 'dark-content';
+    backgroundColor?: string;
+}
+export declare const AtomicStatusBar: React.FC<AtomicStatusBarProps>;

package/dist/carousel/BannerCarousel.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface BannerItem {
+    id: string;
+    title: string;
+    subtitle: string;
+    backgroundColor: string;
+    action: () => void;
+}
+interface BannerCarouselProps {
+    items: BannerItem[];
+}
+export declare const BannerCarousel: React.FC<BannerCarouselProps>;
+export {};

package/dist/carousel/Carousel.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+import type { CarouselProps } from "./types";
+export declare const Carousel: <T>({ items, renderItem, itemWidth, spacing, onIndexChange, showDots, pagingEnabled, style, }: CarouselProps<T> & {
+    style?: ViewStyle;
+}) => React.JSX.Element | null;

package/dist/carousel/CarouselDots.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { CarouselDotsProps } from "./types";
+export declare const CarouselDots: React.NamedExoticComponent<CarouselDotsProps>;

package/dist/carousel/CarouselItem.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+import type { CarouselItem as CarouselItemType } from "./types";
+interface CarouselItemProps<T = unknown> {
+    item: CarouselItemType<T>;
+    itemWidth: number;
+    renderContent: (item: CarouselItemType<T>) => React.ReactNode;
+    style?: ViewStyle;
+    activeOpacity?: number;
+}
+export declare const CarouselItem: <T>({ item, itemWidth, renderContent, style, activeOpacity, }: CarouselItemProps<T>) => React.JSX.Element;
+export {};

package/dist/carousel/CarouselScrollView.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ViewStyle, NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+interface CarouselScrollViewProps {
+    itemWidth: number;
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    children: React.ReactNode;
+    pagingEnabled?: boolean;
+    style?: ViewStyle;
+    contentContainerStyle?: ViewStyle;
+    spacing?: number;
+}
+export declare const CarouselScrollView: React.FC<CarouselScrollViewProps>;
+export {};

package/dist/carousel/carouselCalculations.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Carousel Calculations
+ *
+ * Utility functions for carousel calculations.
+ * Note: Pass screenWidth from useScreenWidth() hook to ensure
+ * reactivity on orientation changes, iPad Split View, etc.
+ */
+export declare const calculateItemWidth: (screenWidth: number, padding?: number) => number;
+export declare const calculateIndexFromScroll: (scrollPosition: number, itemWidth: number) => number;

package/dist/carousel/index.d.ts

@@ -0,0 +1,9 @@
+export type { CarouselItem, CarouselProps, CarouselScrollProps, CarouselDotsProps, } from "./types";
+export { useCarouselScroll } from "./useCarouselScroll";
+export { calculateItemWidth, calculateIndexFromScroll, } from "./carouselCalculations";
+export { CarouselDots } from "./CarouselDots";
+export { CarouselItem as CarouselItemComponent } from "./CarouselItem";
+export { CarouselScrollView } from "./CarouselScrollView";
+export { Carousel } from "./Carousel";
+export { BannerCarousel } from "./BannerCarousel";
+export type { BannerItem } from "./BannerCarousel";

package/dist/carousel/types.d.ts

@@ -0,0 +1,27 @@
+import type { NativeSyntheticEvent, NativeScrollEvent } from "react-native";
+export interface CarouselItem<T = unknown> {
+    id: string;
+    data: T;
+    onPress?: () => void;
+}
+export interface CarouselProps<T = unknown> {
+    items: CarouselItem<T>[];
+    renderItem: (item: CarouselItem<T>, index: number) => React.ReactNode;
+    itemWidth?: number;
+    spacing?: number;
+    onIndexChange?: (index: number) => void;
+    showDots?: boolean;
+    pagingEnabled?: boolean;
+}
+export interface CarouselScrollProps {
+    itemWidth: number;
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    children: React.ReactNode;
+    pagingEnabled?: boolean;
+}
+export interface CarouselDotsProps {
+    count: number;
+    currentIndex: number;
+    activeColor?: string;
+    inactiveColor?: string;
+}

package/dist/carousel/useCarouselScroll.d.ts

@@ -0,0 +1,10 @@
+import { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+interface UseCarouselScrollOptions {
+    itemWidth: number;
+    onIndexChange?: (index: number) => void;
+}
+export declare const useCarouselScroll: ({ itemWidth, onIndexChange, }: UseCarouselScrollOptions) => {
+    currentIndex: number;
+    handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+export {};