@umituz/react-native-design-system 4.25.99 → 4.25.101

package/dist/molecules/SearchBar/types.d.ts

@@ -0,0 +1,41 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+export interface SearchHistoryItem {
+    id: string;
+    query: string;
+    timestamp: number;
+}
+export interface SearchBarProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    onSubmit?: () => void;
+    onClear?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    showCancelButton?: boolean;
+    onCancel?: () => void;
+    containerStyle?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+export interface SearchHistoryProps {
+    history: SearchHistoryItem[];
+    onSelectItem: (query: string) => void;
+    onRemoveItem: (id: string) => void;
+    onClearAll: () => void;
+    maxItems?: number;
+    style?: StyleProp<ViewStyle>;
+    title?: string;
+    clearLabel?: string;
+}
+export interface SearchSuggestionsProps<T> {
+    query: string;
+    suggestions: T[];
+    renderItem: (item: T, query: string) => React.ReactNode;
+    onSelectSuggestion: (item: T) => void;
+    maxSuggestions?: number;
+    style?: StyleProp<ViewStyle>;
+    emptyComponent?: React.ReactNode;
+}

package/dist/molecules/StepHeader/StepHeader.d.ts

@@ -0,0 +1,27 @@
+/**
+ * StepHeader Component
+ * Header component for step-by-step flows with title and subtitle
+ *
+ * @package @umituz/react-native-design-system
+ */
+import React from "react";
+import { type ViewStyle, type StyleProp } from "react-native";
+export interface StepHeaderConfig {
+    showStepIndicator?: boolean;
+    currentStep?: number;
+    totalSteps?: number;
+    titleAlignment?: "left" | "center" | "right";
+    titleFontSize?: number;
+    subtitleFontSize?: number;
+    spacing?: {
+        marginBottom?: number;
+        paddingHorizontal?: number;
+    };
+}
+export interface StepHeaderProps {
+    title: string;
+    subtitle?: string;
+    config?: StepHeaderConfig;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const StepHeader: React.FC<StepHeaderProps>;

package/dist/molecules/StepHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { StepHeader } from "./StepHeader";
+export type { StepHeaderProps, StepHeaderConfig } from "./StepHeader";

package/dist/molecules/StepProgress/StepProgress.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+export interface StepProgressProps {
+    currentStep: number;
+    totalSteps: number;
+    style?: ViewStyle;
+}
+export declare const StepProgress: React.FC<StepProgressProps>;

package/dist/molecules/StepProgress/index.d.ts

@@ -0,0 +1 @@
+export * from "./StepProgress";

package/dist/molecules/action-footer/ActionFooter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ActionFooterProps } from './types';
+export declare const ActionFooter: React.FC<ActionFooterProps>;

package/dist/molecules/action-footer/types.d.ts

@@ -0,0 +1,10 @@
+import { ViewStyle, StyleProp } from 'react-native';
+export interface ActionFooterProps {
+    onBack: () => void;
+    onAction: () => void;
+    actionLabel: string;
+    actionIcon?: string;
+    backIcon?: string;
+    style?: StyleProp<ViewStyle>;
+    loading?: boolean;
+}

package/dist/molecules/alerts/AlertBanner.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AlertBanner Component
+ *
+ * Displays a banner-style alert at the top or bottom of the screen.
+ * Full-width notification bar for important messages.
+ * Auto-dismisses after duration (default 3 seconds).
+ */
+import React from 'react';
+import { Alert } from './AlertTypes';
+interface AlertBannerProps {
+    alert: Alert;
+}
+export declare function AlertBanner({ alert }: AlertBannerProps): React.JSX.Element;
+export {};

package/dist/molecules/alerts/AlertContainer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * AlertContainer Component
+ */
+import React from 'react';
+export declare const AlertContainer: React.NamedExoticComponent<{}>;

package/dist/molecules/alerts/AlertInline.d.ts

@@ -0,0 +1,10 @@
+/**
+ * AlertInline Component
+ */
+import React from 'react';
+import { Alert } from './AlertTypes';
+interface AlertInlineProps {
+    alert: Alert;
+}
+export declare const AlertInline: React.FC<AlertInlineProps>;
+export {};

package/dist/molecules/alerts/AlertModal.d.ts

@@ -0,0 +1,10 @@
+/**
+ * AlertModal Component
+ */
+import React from 'react';
+import { Alert } from './AlertTypes';
+interface AlertModalProps {
+    alert: Alert;
+}
+export declare const AlertModal: React.FC<AlertModalProps>;
+export {};

package/dist/molecules/alerts/AlertProvider.d.ts

@@ -0,0 +1,7 @@
+/**
+ * AlertProvider Component
+ */
+import React from 'react';
+export declare const AlertProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/molecules/alerts/AlertService.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Alert Service
+ */
+import { Alert, AlertType, AlertMode, AlertOptions } from './AlertTypes';
+export declare class AlertService {
+    /**
+     * Creates a base Alert object with defaults
+     */
+    static createAlert(type: AlertType, defaultMode: AlertMode, title: string, message?: string, options?: AlertOptions): Alert;
+    static createSuccessAlert(title: string, message?: string, options?: AlertOptions): Alert;
+    static createErrorAlert(title: string, message?: string, options?: AlertOptions): Alert;
+    static createWarningAlert(title: string, message?: string, options?: AlertOptions): Alert;
+    static createInfoAlert(title: string, message?: string, options?: AlertOptions): Alert;
+}

package/dist/molecules/alerts/AlertStore.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Alert Store
+ */
+import { Alert } from './AlertTypes';
+interface AlertState {
+    alerts: Alert[];
+    _updateInProgress: boolean;
+}
+interface AlertActions {
+    addAlert: (alert: Alert) => void;
+    dismissAlert: (id: string) => void;
+    clearAlerts: () => void;
+}
+export declare const useAlertStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AlertState & AlertActions>>;
+export {};

package/dist/molecules/alerts/AlertToast.d.ts

@@ -0,0 +1,13 @@
+/**
+ * AlertToast Component
+ *
+ * Displays a toast-style alert.
+ * Floats on top of content.
+ */
+import React from 'react';
+import { Alert } from './AlertTypes';
+interface AlertToastProps {
+    alert: Alert;
+}
+export declare function AlertToast({ alert }: AlertToastProps): React.JSX.Element;
+export {};

package/dist/molecules/alerts/AlertTypes.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Alert Entity and Types
+ */
+export declare enum AlertType {
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning",
+    INFO = "info"
+}
+export declare enum AlertMode {
+    TOAST = "toast",
+    BANNER = "banner",
+    MODAL = "modal",
+    INLINE = "inline"
+}
+export declare enum AlertPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    CENTER = "center"
+}
+export interface AlertAction {
+    id?: string;
+    label: string;
+    onPress: () => Promise<void> | void;
+    style?: 'primary' | 'secondary' | 'destructive';
+    closeOnPress?: boolean;
+}
+export interface AlertOptions {
+    mode?: AlertMode;
+    duration?: number;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    icon?: string;
+    actions?: AlertAction[];
+    testID?: string;
+    position?: AlertPosition;
+}
+export interface Alert {
+    id: string;
+    type: AlertType;
+    mode: AlertMode;
+    title: string;
+    message?: string;
+    position: AlertPosition;
+    icon?: string;
+    actions: AlertAction[];
+    dismissible: boolean;
+    duration?: number;
+    createdAt: number;
+    testID?: string;
+    onDismiss?: () => void;
+}

package/dist/molecules/alerts/components/AlertContent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * AlertContent Component
+ *
+ * Shared title + message layout for alert variants.
+ */
+import React from 'react';
+interface AlertContentProps {
+    title: string;
+    message?: string;
+    titleColor: string;
+    messageColor: string;
+    titleType?: 'bodyMedium' | 'titleLarge';
+    messageType?: 'bodySmall' | 'bodyMedium';
+    messageMarginTop?: number;
+    titleNumberOfLines?: number;
+    messageNumberOfLines?: number;
+    textAlign?: 'left' | 'center' | 'right';
+}
+export declare function AlertContent({ title, message, titleColor, messageColor, titleType, messageType, messageMarginTop, titleNumberOfLines, messageNumberOfLines, textAlign, }: AlertContentProps): React.JSX.Element;
+export {};

package/dist/molecules/alerts/components/AlertIcon.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AlertIcon Component
+ *
+ * Shared icon rendering for alert variants.
+ */
+import React from 'react';
+interface AlertIconProps {
+    name: string;
+    color: string;
+    size?: number;
+    marginRight?: number;
+}
+export declare function AlertIcon({ name, color, size, marginRight }: AlertIconProps): React.JSX.Element;
+export {};

package/dist/molecules/alerts/components/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Alert Components Barrel Export
+ */
+export { AlertIcon } from './AlertIcon';
+export { AlertContent } from './AlertContent';

package/dist/molecules/alerts/hooks/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Alert Hooks Barrel Export
+ */
+export { useAlertDismissHandler } from './useAlertDismissHandler';
+export { useAlertAutoDismiss } from './useAlertAutoDismiss';

package/dist/molecules/alerts/hooks/useAlertAutoDismiss.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useAlertAutoDismiss Hook
+ *
+ * Handles auto-dismiss timer for alerts with duration.
+ * Checks dismissible flag before setting timer (fixes AlertBanner bug).
+ */
+import type { Alert } from '../AlertTypes';
+export declare function useAlertAutoDismiss(alert: Alert, onDismiss: () => void): void;

package/dist/molecules/alerts/hooks/useAlertDismissHandler.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useAlertDismissHandler Hook
+ *
+ * Extracts common dismiss logic from all alert variants.
+ * Combines store dismissal with optional callback.
+ */
+import type { Alert } from '../AlertTypes';
+export declare function useAlertDismissHandler(alert: Alert): () => void;

package/dist/molecules/alerts/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Alerts Molecule - Public API
+ */
+export * from './AlertTypes';
+export { useAlertStore } from './AlertStore';
+export { AlertService } from './AlertService';
+export { AlertBanner } from './AlertBanner';
+export { AlertToast } from './AlertToast';
+export { AlertInline } from './AlertInline';
+export { AlertModal } from './AlertModal';
+export { AlertContainer } from './AlertContainer';
+export { AlertProvider } from './AlertProvider';
+export { useAlert } from './useAlert';
+import { AlertOptions } from './AlertTypes';
+/**
+ * Convenience alert service for use outside of components
+ */
+export declare const alertService: {
+    error: (title: string, message?: string, options?: AlertOptions) => string;
+    success: (title: string, message?: string, options?: AlertOptions) => string;
+    warning: (title: string, message?: string, options?: AlertOptions) => string;
+    info: (title: string, message?: string, options?: AlertOptions) => string;
+    dismiss: (id: string) => void;
+};

package/dist/molecules/alerts/useAlert.d.ts

@@ -0,0 +1,14 @@
+/**
+ * useAlert Hook
+ */
+import { AlertType, AlertMode, AlertOptions } from './AlertTypes';
+export interface UseAlertReturn {
+    show: (type: AlertType, mode: AlertMode, title: string, message?: string, options?: AlertOptions) => string;
+    showSuccess: (title: string, message?: string, options?: AlertOptions) => string;
+    showError: (title: string, message?: string, options?: AlertOptions) => string;
+    showWarning: (title: string, message?: string, options?: AlertOptions) => string;
+    showInfo: (title: string, message?: string, options?: AlertOptions) => string;
+    dismissAlert: (id: string) => void;
+    clearAlerts: () => void;
+}
+export declare const useAlert: () => UseAlertReturn;

package/dist/molecules/alerts/utils/alertUtils.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Alert Utilities
+ *
+ * Helper functions for alert component styling and behavior.
+ */
+import type { DesignTokens } from '../../../theme';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { AlertType } from '../AlertTypes';
+import type { AlertAction } from '../AlertTypes';
+/**
+ * Gets background color for alert type
+ *
+ * @param type - Alert type
+ * @param tokens - Design tokens containing color definitions
+ * @returns Color string for the alert type
+ */
+export declare function getAlertBackgroundColor(type: AlertType, tokens: DesignTokens): string;
+/**
+ * Gets border color for alert type
+ *
+ * @param type - Alert type
+ * @param tokens - Design tokens containing color definitions
+ * @returns Border color string for the alert type
+ */
+export declare function getAlertBorderColor(type: AlertType, tokens: DesignTokens): string;
+/**
+ * Gets background color with opacity for inline alerts
+ *
+ * @param type - Alert type
+ * @param tokens - Design tokens containing color definitions
+ * @param opacity - Opacity value (0-255 hex), default '15' for ~8%
+ * @returns Background color string with opacity
+ */
+export declare function getAlertBackgroundColorInline(type: AlertType, tokens: DesignTokens, opacity?: string): string;
+/**
+ * Gets text color for alert type
+ *
+ * @param tokens - Design tokens containing color definitions
+ * @returns Text color string (typically inverse for alerts)
+ */
+export declare function getAlertTextColor(tokens: DesignTokens): string;
+/**
+ * Gets action button style
+ *
+ * @param actionStyle - Button style type
+ * @param tokens - Design tokens
+ * @returns Style object
+ */
+export declare function getActionButtonStyle(actionStyle: AlertAction['style'], tokens: DesignTokens): StyleProp<ViewStyle>;
+/**
+ * Gets action text color
+ *
+ * @param actionStyle - Button style type
+ * @param tokens - Design tokens
+ * @returns Text color string
+ */
+export declare function getActionTextColor(actionStyle: AlertAction['style'], tokens: DesignTokens): string;
+/**
+ * Default alert duration in milliseconds
+ */
+export declare const DEFAULT_ALERT_DURATION = 3000;

package/dist/molecules/avatar/Avatar.constants.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Avatar Constants
+ * Configuration constants for avatar component
+ */
+import type { AvatarSize, AvatarShape, AvatarType, SizeConfig } from './Avatar.types';
+/**
+ * Size configurations (px)
+ */
+export declare const SIZE_CONFIGS: Record<AvatarSize, SizeConfig>;
+/**
+ * Avatar background colors
+ * Vibrant, accessible colors with good contrast
+ */
+export declare const AVATAR_COLORS: readonly ["#EF4444", "#F59E0B", "#10B981", "#3B82F6", "#8B5CF6", "#EC4899", "#14B8A6", "#F97316", "#06B6D4", "#84CC16"];
+/**
+ * Status indicator colors
+ */
+export declare const STATUS_COLORS: {
+    readonly online: "#10B981";
+    readonly offline: "#9CA3AF";
+    readonly away: "#F59E0B";
+    readonly busy: "#EF4444";
+};
+/**
+ * Border radius configurations
+ */
+export declare const SHAPE_CONFIGS: {
+    readonly circle: 9999;
+    readonly square: 0;
+    readonly rounded: 8;
+};
+/**
+ * Avatar constants
+ */
+export declare const AVATAR_CONSTANTS: {
+    readonly DEFAULT_SIZE: AvatarSize;
+    readonly DEFAULT_SHAPE: AvatarShape;
+    readonly DEFAULT_TYPE: AvatarType;
+    readonly DEFAULT_ICON: "user";
+    readonly MAX_GROUP_VISIBLE: 3;
+    readonly GROUP_SPACING: -8;
+    readonly FALLBACK_INITIALS: "?";
+};

package/dist/molecules/avatar/Avatar.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Avatar Domain - Avatar Component
+ *
+ * Universal avatar component with image, initials, and icon support.
+ * Handles loading states, fallbacks, and status indicators.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle, type ImageStyle } from 'react-native';
+import type { AvatarSize, AvatarShape } from './Avatar.types';
+export interface AvatarProps {
+    uri?: string;
+    name?: string;
+    icon?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    backgroundColor?: string;
+    showStatus?: boolean;
+    status?: 'online' | 'offline' | 'away' | 'busy';
+    style?: StyleProp<ViewStyle>;
+    imageStyle?: StyleProp<ImageStyle>;
+    onPress?: () => void;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/molecules/avatar/Avatar.types.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Avatar Types
+ * Type definitions for avatar component
+ */
+/**
+ * Avatar size preset
+ */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Avatar shape
+ */
+export type AvatarShape = 'circle' | 'square' | 'rounded';
+/**
+ * Avatar type
+ */
+export type AvatarType = 'image' | 'initials' | 'icon';
+/**
+ * Avatar configuration
+ */
+export interface AvatarConfig {
+    /** Avatar type */
+    type: AvatarType;
+    /** Size preset */
+    size: AvatarSize;
+    /** Shape */
+    shape: AvatarShape;
+    /** Image URI */
+    uri?: string;
+    /** User name for initials */
+    name?: string;
+    /** Icon name (if type is icon) */
+    icon?: string;
+    /** Custom background color */
+    backgroundColor?: string;
+    /** Show status indicator */
+    showStatus?: boolean;
+    /** Status (online/offline) */
+    status?: 'online' | 'offline' | 'away' | 'busy';
+}
+/**
+ * Size configuration
+ */
+export interface SizeConfig {
+    size: number;
+    fontSize: number;
+    iconSize: number;
+    statusSize: number;
+    borderWidth: number;
+}
+/**
+ * Avatar group configuration
+ */
+export interface AvatarGroupConfig {
+    maxVisible: number;
+    spacing: number;
+    size: AvatarSize;
+    shape: AvatarShape;
+}

package/dist/molecules/avatar/Avatar.utils.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Avatar Utilities
+ * Utility class for avatar operations
+ * Supports images, initials, icons with Turkish character support
+ */
+import type { AvatarSize, AvatarShape, AvatarConfig, SizeConfig } from './Avatar.types';
+/**
+ * Avatar utility class
+ */
+export declare class AvatarUtils {
+    /**
+     * Generate initials from name
+     * Supports Turkish characters (Ümit Uz → ÜU)
+     */
+    static generateInitials(name: string): string;
+    /**
+     * Generate initials from email
+     * umit@example.com → UE
+     */
+    static generateInitialsFromEmail(email: string): string;
+    /**
+     * Hash string to number (for consistent color assignment)
+     */
+    static hashString(str: string): number;
+    /**
+     * Get consistent color for name
+     * Same name always returns same color
+     */
+    static getColorForName(name: string): string;
+    /**
+     * Get size config
+     */
+    static getSizeConfig(size: AvatarSize): SizeConfig;
+    /**
+     * Get border radius for shape
+     */
+    static getBorderRadius(shape: AvatarShape, size: number): number;
+    /**
+     * Get status color
+     */
+    static getStatusColor(status: 'online' | 'offline' | 'away' | 'busy'): string;
+    /**
+     * Validate avatar config
+     */
+    static validateConfig(config: Partial<AvatarConfig>): AvatarConfig;
+    /**
+     * Check if avatar has image
+     */
+    static hasImage(config: AvatarConfig): boolean;
+    /**
+     * Check if avatar has initials
+     */
+    static hasInitials(config: AvatarConfig): boolean;
+    /**
+     * Check if avatar has icon
+     */
+    static hasIcon(config: AvatarConfig): boolean;
+}

package/dist/molecules/avatar/AvatarGroup.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Avatar Domain - AvatarGroup Component
+ *
+ * Displays multiple avatars in a stacked layout.
+ * Shows overflow count when exceeding max visible avatars.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { AvatarSize, AvatarShape } from './Avatar.types';
+/**
+ * Avatar item for group
+ */
+export interface AvatarGroupItem {
+    uri?: string;
+    name?: string;
+    icon?: string;
+}
+/**
+ * AvatarGroup component props
+ */
+export interface AvatarGroupProps {
+    /** Array of avatar items */
+    items: AvatarGroupItem[];
+    /** Maximum visible avatars */
+    maxVisible?: number;
+    /** Avatar size */
+    size?: AvatarSize;
+    /** Avatar shape */
+    shape?: AvatarShape;
+    /** Spacing between avatars (negative for overlap) */
+    spacing?: number;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+}
+export declare const AvatarGroup: React.FC<AvatarGroupProps>;

package/dist/molecules/avatar/index.d.ts

@@ -0,0 +1,5 @@
+export { Avatar, type AvatarProps } from './Avatar';
+export { AvatarGroup, type AvatarGroupProps, type AvatarGroupItem } from './AvatarGroup';
+export { AvatarUtils } from './Avatar.utils';
+export { AVATAR_CONSTANTS } from './Avatar.constants';
+export type { AvatarSize, AvatarShape, AvatarConfig, AvatarType } from './Avatar.types';

package/dist/molecules/bottom-sheet/components/BottomSheet.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BottomSheetRef, BottomSheetProps } from '../types/BottomSheet';
+export declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<BottomSheetRef>>;

package/dist/molecules/bottom-sheet/components/BottomSheetModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BottomSheetModalRef, BottomSheetModalProps } from '../types/BottomSheet';
+export declare const BottomSheetModal: React.ForwardRefExoticComponent<BottomSheetModalProps & React.RefAttributes<BottomSheetModalRef>>;