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

package/dist/molecules/countdown/hooks/useCountdown.d.ts

@@ -0,0 +1,17 @@
+import type { TimeRemaining, CountdownTarget } from '../types/CountdownTypes';
+export interface UseCountdownOptions {
+    interval?: number;
+    autoStart?: boolean;
+    onExpire?: () => void;
+    onTick?: (timeRemaining: TimeRemaining) => void;
+}
+export interface UseCountdownReturn {
+    timeRemaining: TimeRemaining;
+    isActive: boolean;
+    isExpired: boolean;
+    start: () => void;
+    stop: () => void;
+    reset: () => void;
+    setTarget: (target: CountdownTarget) => void;
+}
+export declare function useCountdown(initialTarget: CountdownTarget | null, options?: UseCountdownOptions): UseCountdownReturn;

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

@@ -0,0 +1,10 @@
+export { Countdown } from './components/Countdown';
+export type { CountdownProps } from './components/Countdown';
+export { TimeUnit } from './components/TimeUnit';
+export type { TimeUnitProps } from './components/TimeUnit';
+export { CountdownHeader } from './components/CountdownHeader';
+export type { CountdownHeaderProps } from './components/CountdownHeader';
+export { useCountdown } from './hooks/useCountdown';
+export type { UseCountdownOptions, UseCountdownReturn } from './hooks/useCountdown';
+export { calculateTimeRemaining, padNumber, getNextDayStart, getNextYearStart, } from './utils/TimeCalculator';
+export type { TimeRemaining, CountdownTarget, CountdownFormatOptions, CountdownDisplayConfig, } from './types/CountdownTypes';

package/dist/molecules/countdown/types/CountdownTypes.d.ts

@@ -0,0 +1,32 @@
+export interface TimeRemaining {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    totalSeconds: number;
+    isExpired: boolean;
+}
+export interface CountdownTarget {
+    date: Date | string;
+    label?: string;
+    icon?: string;
+}
+export interface CountdownFormatOptions {
+    showDays?: boolean;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+    showZeros?: boolean;
+    separator?: string;
+}
+export interface CountdownDisplayConfig {
+    showIcon?: boolean;
+    showLabel?: boolean;
+    showToggle?: boolean;
+    layout?: 'grid' | 'inline' | 'compact';
+    size?: 'small' | 'medium' | 'large';
+    showDays?: boolean;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+}

package/dist/molecules/countdown/utils/TimeCalculator.d.ts

@@ -0,0 +1,5 @@
+import type { TimeRemaining } from '../types/CountdownTypes';
+export declare function calculateTimeRemaining(targetDate: Date | string): TimeRemaining;
+export declare function padNumber(num: number): string;
+export declare function getNextDayStart(date?: Date): Date;
+export declare function getNextYearStart(date?: Date): Date;

package/dist/molecules/emoji/domain/entities/Emoji.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Emoji Domain Entities
+ *
+ * Core emoji types and interfaces for emoji picker functionality
+ *
+ * Features:
+ * - Emoji selection with picker UI
+ * - Emoji object with metadata (emoji string, name, slug, unicode)
+ * - Category-based organization
+ * - Search functionality
+ * - Recent emojis tracking
+ *
+ * Dependencies:
+ * - rn-emoji-keyboard (emoji picker UI library)
+ */
+/**
+ * Emoji category types compatible with rn-emoji-keyboard
+ */
+export type EmojiCategoryType = 'smileys_emotion' | 'people_body' | 'animals_nature' | 'food_drink' | 'travel_places' | 'activities' | 'objects' | 'symbols' | 'flags' | 'recently_used' | 'search';
+/**
+ * Category translation map compatible with rn-emoji-keyboard
+ */
+export type EmojiCategoryTranslation = {
+    [key in EmojiCategoryType]: string;
+};
+/**
+ * Emoji object returned by the picker
+ * Conforms to rn-emoji-keyboard EmojiType structure
+ */
+export interface EmojiObject {
+    /** The actual emoji character (e.g., "😀") */
+    emoji: string;
+    /** Human-readable name (e.g., "Grinning Face") */
+    name: string;
+    /** URL-friendly slug (e.g., "grinning_face") */
+    slug: string;
+    /** Unicode codepoint (e.g., "1F600") */
+    unicode_version: string;
+    /** Emoji category (e.g., "smileys_emotion") */
+    category?: string;
+}
+/**
+ * Emoji picker configuration
+ */
+export interface EmojiPickerConfig {
+    /** Whether to show category tabs */
+    enableCategoryTabs?: boolean;
+    /** Whether to enable search */
+    enableSearch?: boolean;
+    /** Whether to show recently used emojis */
+    enableRecentlyUsed?: boolean;
+    /** Custom category order */
+    categoryOrder?: EmojiCategoryType[];
+    /** Translation object for category labels */
+    translation?: EmojiCategoryTranslation;
+}
+/**
+ * Emoji selection callback type
+ */
+export type EmojiSelectCallback = (emojiObject: EmojiObject) => void;
+/**
+ * Emoji picker categories
+ * Based on Unicode emoji categories
+ */
+export declare enum EmojiCategory {
+    SMILEYS_EMOTION = "smileys_emotion",
+    PEOPLE_BODY = "people_body",
+    ANIMALS_NATURE = "animals_nature",
+    FOOD_DRINK = "food_drink",
+    TRAVEL_PLACES = "travel_places",
+    ACTIVITIES = "activities",
+    OBJECTS = "objects",
+    SYMBOLS = "symbols",
+    FLAGS = "flags"
+}
+/**
+ * Emoji picker state
+ */
+export interface EmojiPickerState {
+    /** Whether picker is currently open */
+    isOpen: boolean;
+    /** Currently selected emoji (null if none selected) */
+    selectedEmoji: string | null;
+}
+/**
+ * Emoji validation utilities
+ */
+export declare const EmojiUtils: {
+    /**
+     * Check if a string contains valid emoji
+     * @param text - Text to validate
+     * @returns True if contains emoji
+     */
+    readonly isEmoji: (text: string) => boolean;
+    /**
+     * Extract first emoji from text
+     * @param text - Text containing emoji
+     * @returns First emoji or empty string
+     */
+    readonly extractFirstEmoji: (text: string) => string;
+    /**
+     * Get emoji length (handles multi-byte emojis correctly)
+     * @param emoji - Emoji string
+     * @returns Actual character count
+     */
+    readonly getEmojiLength: (emoji: string) => number;
+};

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

@@ -0,0 +1,163 @@
+/**
+ * Emoji Domain - Barrel Export
+ *
+ * Global infrastructure domain for emoji selection and display
+ *
+ * Features:
+ * - Universal emoji picker component
+ * - Category-based emoji selection (smileys, animals, food, etc.)
+ * - Search functionality
+ * - Recently used emojis tracking
+ * - React hook for state management
+ * - Theme-aware styling
+ * - Validation utilities
+ *
+ * Dependencies:
+ * - rn-emoji-keyboard (emoji picker UI library)
+ *
+ * USAGE:
+ * ```typescript
+ * // Method 1: Using hook (recommended)
+ * import { useEmojiPicker, EmojiPicker } from '@umituz/react-native-emoji';
+ *
+ * const MyComponent = () => {
+ *   const {
+ *     isOpen,
+ *     selectedEmoji,
+ *     openPicker,
+ *     closePicker,
+ *     handleEmojiSelect,
+ *   } = useEmojiPicker();
+ *
+ *   return (
+ *     <View>
+ *       <TouchableOpacity onPress={openPicker}>
+ *         <Text style={{ fontSize: 32 }}>
+ *           {selectedEmoji || 'Select Emoji'}
+ *         </Text>
+ *       </TouchableOpacity>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={closePicker}
+ *         onEmojiSelected={handleEmojiSelect}
+ *       />
+ *     </View>
+ *   );
+ * };
+ *
+ * // Method 2: Manual state management
+ * import { EmojiPicker, type EmojiObject } from '@umituz/react-native-emoji';
+ *
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const [emoji, setEmoji] = useState('');
+ *
+ *   const handleSelect = (emojiObject: EmojiObject) => {
+ *     setEmoji(emojiObject.emoji);
+ *     setIsOpen(false);
+ *   };
+ *
+ *   return (
+ *     <View>
+ *       <TouchableOpacity onPress={() => setIsOpen(true)}>
+ *         <Text>{emoji || 'Select'}</Text>
+ *       </TouchableOpacity>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         onEmojiSelected={handleSelect}
+ *       />
+ *     </View>
+ *   );
+ * };
+ *
+ * // Validation utilities
+ * import { EmojiUtils } from '@umituz/react-native-emoji';
+ *
+ * const isValid = EmojiUtils.isEmoji('😀'); // true
+ * const first = EmojiUtils.extractFirstEmoji('Hello 😀 World 🌍'); // '😀'
+ * const length = EmojiUtils.getEmojiLength('👨‍👩‍👧‍👦'); // 1 (handles multi-byte)
+ * ```
+ *
+ * REAL-WORLD EXAMPLE (Category Creation):
+ * ```typescript
+ * import { useEmojiPicker, EmojiPicker } from '@umituz/react-native-emoji';
+ * import { AtomicInput, AtomicText } from '@umituz/react-native-design-system';
+ *
+ * const AddCategoryScreen = () => {
+ *   const [name, setName] = useState('');
+ *   const {
+ *     selectedEmoji,
+ *     isOpen,
+ *     openPicker,
+ *     closePicker,
+ *     handleEmojiSelect,
+ *   } = useEmojiPicker();
+ *
+ *   const handleSubmit = () => {
+ *     if (!name.trim() || !selectedEmoji) {
+ *       alert('Please fill all fields');
+ *       return;
+ *     }
+ *
+ *     // Save category with emoji
+ *     saveCategory({ name, emoji: selectedEmoji });
+ *   };
+ *
+ *   return (
+ *     <View>
+ *       <AtomicInput
+ *         label="Category Name"
+ *         value={name}
+ *         onChangeText={setName}
+ *       />
+ *
+ *       <TouchableOpacity onPress={openPicker}>
+ *         <Text style={{ fontSize: 32, textAlign: 'center' }}>
+ *           {selectedEmoji || 'Tap to select emoji'}
+ *         </Text>
+ *       </TouchableOpacity>
+ *
+ *       <AtomicButton onPress={handleSubmit}>
+ *         Create Category
+ *       </AtomicButton>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={closePicker}
+ *         onEmojiSelected={handleEmojiSelect}
+ *       />
+ *     </View>
+ *   );
+ * };
+ * ```
+ *
+ * EMOJI CATEGORIES:
+ * - 😀 Smileys & Emotion
+ * - 👨 People & Body
+ * - 🐶 Animals & Nature
+ * - 🍔 Food & Drink
+ * - ✈️ Travel & Places
+ * - ⚽ Activities
+ * - 💡 Objects
+ * - ❤️ Symbols
+ * - 🏁 Flags
+ *
+ * FEATURES:
+ * - 3600+ emojis across 9 categories
+ * - Full Unicode 15.0 support
+ * - Search by name or keywords
+ * - Recently used tracking (persisted)
+ * - Category change animations
+ * - Smooth scrolling and gestures
+ * - Theme-aware (light/dark mode)
+ * - Localization support
+ */
+export type { EmojiObject, EmojiPickerConfig, EmojiSelectCallback, EmojiPickerState, } from './domain/entities/Emoji';
+export { EmojiCategory, EmojiUtils } from './domain/entities/Emoji';
+export { EmojiPicker } from './presentation/components/EmojiPicker';
+export type { EmojiPickerProps } from './presentation/components/EmojiPicker';
+export { useEmojiPicker } from './presentation/hooks/useEmojiPicker';
+export type { UseEmojiPickerOptions, UseEmojiPickerReturn, } from './presentation/hooks/useEmojiPicker';

package/dist/molecules/emoji/presentation/components/EmojiPicker.d.ts

@@ -0,0 +1,62 @@
+/**
+ * EmojiPicker Component
+ *
+ * Universal emoji picker component wrapping rn-emoji-keyboard
+ * Provides a clean, factory-standard interface for emoji selection
+ *
+ * Features:
+ * - Category-based emoji selection
+ * - Search functionality
+ * - Recently used emojis
+ * - Theme-aware styling
+ * - Localization support
+ *
+ * Dependencies:
+ * - rn-emoji-keyboard (emoji picker UI library)
+ *
+ * USAGE:
+ * ```typescript
+ * import { EmojiPicker } from '@umituz/react-native-emoji';
+ *
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const [emoji, setEmoji] = useState('');
+ *
+ *   const handleEmojiSelect = (emojiObject: EmojiObject) => {
+ *     setEmoji(emojiObject.emoji);
+ *     setIsOpen(false);
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <TouchableOpacity onPress={() => setIsOpen(true)}>
+ *         <Text>{emoji || 'Select Emoji'}</Text>
+ *       </TouchableOpacity>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         onEmojiSelected={handleEmojiSelect}
+ *       />
+ *     </>
+ *   );
+ * };
+ * ```
+ */
+import React from 'react';
+import type { EmojiObject, EmojiPickerConfig } from '../../domain/entities/Emoji';
+export interface EmojiPickerProps {
+    /** Whether the picker is currently open */
+    open: boolean;
+    /** Callback when picker is closed */
+    onClose: () => void;
+    /** Callback when an emoji is selected */
+    onEmojiSelected: (emojiObject: EmojiObject) => void;
+    /** Optional configuration */
+    config?: EmojiPickerConfig;
+}
+/**
+ * Universal emoji picker component
+ * Wraps rn-emoji-keyboard with factory-standard interface
+ */
+export declare const EmojiPicker: React.FC<EmojiPickerProps>;

package/dist/molecules/emoji/presentation/hooks/useEmojiPicker.d.ts

@@ -0,0 +1,73 @@
+/**
+ * useEmojiPicker Hook
+ *
+ * React hook for emoji picker state management
+ * Provides a clean, declarative API for emoji selection
+ *
+ * Features:
+ * - Open/close state management
+ * - Selected emoji tracking
+ * - Clear/reset functionality
+ * - Simple, reusable hook pattern
+ *
+ * USAGE:
+ * ```typescript
+ * import { useEmojiPicker, EmojiPicker } from '@umituz/react-native-emoji';
+ *
+ * const MyComponent = () => {
+ *   const {
+ *     isOpen,
+ *     selectedEmoji,
+ *     openPicker,
+ *     closePicker,
+ *     handleEmojiSelect,
+ *     clearEmoji,
+ *   } = useEmojiPicker();
+ *
+ *   return (
+ *     <View>
+ *       <TouchableOpacity onPress={openPicker}>
+ *         <Text>{selectedEmoji || 'Select Emoji'}</Text>
+ *       </TouchableOpacity>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={closePicker}
+ *         onEmojiSelected={handleEmojiSelect}
+ *       />
+ *     </View>
+ *   );
+ * };
+ * ```
+ */
+import type { EmojiObject } from '../../domain/entities/Emoji';
+export interface UseEmojiPickerOptions {
+    /** Initial emoji value */
+    initialEmoji?: string;
+    /** Callback when emoji is selected */
+    onEmojiChange?: (emoji: string) => void;
+    /** Whether to auto-close picker after selection */
+    autoClose?: boolean;
+}
+export interface UseEmojiPickerReturn {
+    /** Whether the picker is currently open */
+    isOpen: boolean;
+    /** Currently selected emoji (null if none) */
+    selectedEmoji: string | null;
+    /** Open the emoji picker */
+    openPicker: () => void;
+    /** Close the emoji picker */
+    closePicker: () => void;
+    /** Toggle picker open/closed */
+    togglePicker: () => void;
+    /** Handle emoji selection (use as onEmojiSelected callback) */
+    handleEmojiSelect: (emojiObject: EmojiObject) => void;
+    /** Clear the currently selected emoji */
+    clearEmoji: () => void;
+    /** Set emoji directly (without opening picker) */
+    setEmoji: (emoji: string) => void;
+}
+/**
+ * Hook for emoji picker state management
+ */
+export declare const useEmojiPicker: (options?: UseEmojiPickerOptions) => UseEmojiPickerReturn;

package/dist/molecules/filter-group/FilterGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { FilterGroupProps } from './types';
+export declare function FilterGroup<T = string>({ items, selectedValue, onSelect, multiSelect, style, contentContainerStyle, itemStyle, }: FilterGroupProps<T>): React.JSX.Element;

package/dist/molecules/filter-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FilterGroup';
+export * from './types';

package/dist/molecules/filter-group/types.d.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface FilterGroupItem<T = string> {
+    label: string;
+    value: T;
+    testID?: string;
+}
+export interface FilterGroupProps<T = string> {
+    items: FilterGroupItem<T>[];
+    selectedValue: T | T[];
+    onSelect: (value: T) => void;
+    multiSelect?: boolean;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    itemStyle?: StyleProp<ViewStyle>;
+}

package/dist/molecules/hero-section/HeroSection.d.ts

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

package/dist/molecules/hero-section/types.d.ts

@@ -0,0 +1,8 @@
+import { ViewStyle, StyleProp, ImageSourcePropType } from 'react-native';
+export interface HeroSectionProps {
+    icon?: string;
+    imageUrl?: string;
+    imageSource?: ImageSourcePropType;
+    height?: number;
+    style?: StyleProp<ViewStyle>;
+}

package/dist/molecules/icon-grid/IconGrid.d.ts

@@ -0,0 +1,47 @@
+/**
+ * IconGrid - Reusable icon card grid
+ *
+ * Self-measuring grid that calculates item widths from actual container width.
+ * Works correctly inside ScreenLayout (or any padded container) without needing
+ * to know the parent's padding upfront.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../../atoms';
+export interface IconGridItem {
+    /** Unique identifier */
+    id: string;
+    /** Label shown below the icon */
+    label: string;
+    /** Icon name (AtomicIcon / Lucide-based) */
+    icon: IconName;
+    /** Called when the card is tapped */
+    onPress: () => void;
+}
+export interface IconGridProps {
+    /** Items to display */
+    items: IconGridItem[];
+    /** Number of columns (default: 3) */
+    columns?: number;
+    /** Gap between items in pixels (default: 10) */
+    gap?: number;
+    /** Vertical gap between rows (default: same as gap) */
+    rowGap?: number;
+    /** Optional container style */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A self-sizing icon card grid.
+ *
+ * @example
+ * ```tsx
+ * <IconGrid
+ *   columns={3}
+ *   items={[
+ *     { id: 'aging', label: 'Aging', icon: 'flash', onPress: () => navigate('Aging') },
+ *     { id: 'wardrobe', label: 'Wardrobe', icon: 'shirt', onPress: () => navigate('Wardrobe') },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const IconGrid: React.FC<IconGridProps>;

package/dist/molecules/icon-grid/index.d.ts

@@ -0,0 +1 @@
+export { IconGrid, type IconGridItem, type IconGridProps } from './IconGrid';

package/dist/molecules/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Molecules - Composite UI components
+ * Built from atoms following atomic design principles
+ */
+export * from './avatar';
+export * from './bottom-sheet';
+export { FormField, type FormFieldProps } from './FormField';
+export { ListItem, type ListItemProps } from './ListItem';
+export { SearchBar, type SearchBarProps } from './SearchBar';
+export { IconContainer } from './IconContainer';
+export { BaseModal, type BaseModalProps } from './BaseModal';
+export { ConfirmationModal } from './ConfirmationModalMain';
+export { useConfirmationModal } from './confirmation-modal/useConfirmationModal';
+export * from './Divider/Divider';
+export * from './Divider/types';
+export * from './StepProgress';
+export * from './List';
+export * from './alerts';
+export * from './calendar';
+export * from './swipe-actions';
+export * from './navigation';
+export * from './long-press-menu';
+export * from './StepHeader';
+export * from './emoji';
+export * from './countdown';
+export * from './splash';
+export * from './filter-group';
+export * from './action-footer/ActionFooter';
+export * from './action-footer/types';
+export * from './hero-section/HeroSection';
+export * from './hero-section/types';
+export * from './info-grid';
+export * from './circular-menu';
+export * from './icon-grid';

package/dist/molecules/info-grid/InfoGrid.d.ts

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

package/dist/molecules/info-grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InfoGrid';
+export * from './types';

package/dist/molecules/info-grid/types.d.ts

@@ -0,0 +1,14 @@
+import { ViewStyle, StyleProp } from 'react-native';
+export interface InfoGridItem {
+    icon?: string;
+    text: string;
+    testID?: string;
+}
+export interface InfoGridProps {
+    title?: string;
+    headerIcon?: string;
+    items: InfoGridItem[];
+    columns?: number;
+    style?: StyleProp<ViewStyle>;
+    itemStyle?: StyleProp<ViewStyle>;
+}

package/dist/molecules/listitem/styles/listItemStyles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ListItem Styles
+ */
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+export interface ListItemStyles {
+    container: ViewStyle;
+    disabled: ViewStyle;
+    iconContainer: ViewStyle;
+    content: ViewStyle;
+    subtitle: TextStyle;
+}
+export declare const getListItemStyles: (tokens: DesignTokens) => ListItemStyles;

package/dist/molecules/listitem/types/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ListItem Types
+ */
+import type { ViewStyle } from 'react-native';
+export interface ListItemProps {
+    /** Main title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Left icon name */
+    leftIcon?: string;
+    /** Right icon name */
+    rightIcon?: string;
+    /** Press handler */
+    onPress?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom container style */
+    style?: ViewStyle;
+}