@umituz/react-native-design-system 4.28.5 → 4.28.7

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

@@ -1,163 +0,0 @@
-/**
- * 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

@@ -1,62 +0,0 @@
-/**
- * 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

@@ -1,73 +0,0 @@
-/**
- * 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

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

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

@@ -1,5 +0,0 @@
-/**
- * Filter Group Component
- */
-export { FilterGroup } from './FilterGroup';
-export type { FilterGroupProps, FilterGroupItem } from './types';

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

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

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

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

@@ -1,5 +0,0 @@
-/**
- * Hero Section Component
- */
-export { HeroSection } from './HeroSection';
-export type { HeroSectionProps } from './types';

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

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

@@ -1,47 +0,0 @@
-/**
- * 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.NamedExoticComponent<IconGridProps>;

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

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

package/dist/molecules/index.d.ts

@@ -1,33 +0,0 @@
-/**
- * Molecules - Mid-level components composed of atoms
- *
- * Usage:
- *   import { AlertProvider, FormField, ListItem, AtomicCalendar } from "@umituz/react-native-design-system/molecules";
- */
-export { BaseModal } from './BaseModal';
-export { ConfirmationModalContent } from './ConfirmationModalContent';
-export { FormField } from './FormField';
-export { IconContainer } from './IconContainer';
-export { ListItem } from './ListItem';
-export * from './action-footer';
-export * from './alerts';
-export * from './avatar';
-export * from './bottom-sheet';
-export * from './calendar';
-export * from './circular-menu';
-export * from './confirmation-modal';
-export * from './countdown';
-export * from './Divider';
-export * from './emoji';
-export * from './filter-group';
-export * from './hero-section';
-export * from './icon-grid';
-export * from './info-grid';
-export * from './List';
-export * from './long-press-menu';
-export * from './navigation';
-export * from './SearchBar';
-export * from './splash';
-export * from './StepHeader';
-export * from './StepProgress';
-export * from './swipe-actions';

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

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

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

@@ -1,5 +0,0 @@
-/**
- * Info Grid Component
- */
-export { InfoGrid } from './InfoGrid';
-export type { InfoGridProps, InfoGridItem } from './types';

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

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

@@ -1,13 +0,0 @@
-/**
- * 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

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

package/dist/molecules/long-press-menu/domain/entities/MenuAction.d.ts

@@ -1,30 +0,0 @@
-import type { IconName } from '../../../../atoms';
-/**
- * Menu action entity
- * Represents a single action in the long press menu
- */
-export interface MenuAction {
-    /** Unique identifier for the action */
-    id: string;
-    /** Icon name (Ionicons) */
-    icon: IconName;
-    /** Display label for the action */
-    label: string;
-    /** Destructive action (uses error color) */
-    destructive?: boolean;
-    /** Disabled state (greyed out, not pressable) */
-    disabled?: boolean;
-}
-/**
- * Predefined menu action types for common use cases
- */
-export declare const MenuActionType: {
-    readonly EDIT: "edit";
-    readonly DELETE: "delete";
-    readonly SHARE: "share";
-    readonly COPY: "copy";
-    readonly ARCHIVE: "archive";
-    readonly FAVORITE: "favorite";
-    readonly MORE: "more";
-};
-export type MenuActionTypeValue = typeof MenuActionType[keyof typeof MenuActionType];

package/dist/molecules/long-press-menu/index.d.ts

@@ -1,12 +0,0 @@
-/**
- * @umituz/react-native-long-press-menu - Public API
- *
- * Context menus with long press for React Native
- * Features:
- * - iOS/Android-style menus
- * - Haptic feedback
- * - Smooth animations
- * - Customizable actions
- */
-export type { MenuAction, MenuActionTypeValue } from './domain/entities/MenuAction';
-export { MenuActionType } from './domain/entities/MenuAction';

package/dist/molecules/navigation/StackNavigator.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import type { ParamListBase } from "@react-navigation/native";
-import type { StackNavigatorConfig } from "./types";
-export interface StackNavigatorProps<T extends ParamListBase> {
-    config: StackNavigatorConfig<T>;
-}
-/**
- * StackNavigator Component
- *
- * Reusable Stack Navigator component that handles configuration and rendering.
- * Integrates with design tokens for consistent themed styling.
- */
-export declare function StackNavigator<T extends ParamListBase>({ config }: StackNavigatorProps<T>): React.JSX.Element | null;

package/dist/molecules/navigation/TabsNavigator.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import type { ParamListBase } from "@react-navigation/native";
-import type { TabNavigatorConfig } from "./types";
-export interface TabsNavigatorProps<T extends ParamListBase> {
-    config: TabNavigatorConfig<T>;
-}
-/**
- * TabsNavigator Component
- *
- * Reusable Bottom Tab Navigator component that handles configuration and rendering.
- * Integrates with design tokens for consistent themed styling.
- */
-export declare function TabsNavigator<T extends ParamListBase>({ config, }: TabsNavigatorProps<T>): React.JSX.Element | null;

package/dist/molecules/navigation/components/FabButton.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { type ViewStyle } from 'react-native';
-export interface FabButtonProps {
-    /** Content to render inside the FAB */
-    children: React.ReactNode;
-    /** Container style overrides */
-    style?: ViewStyle;
-}
-/**
- * Standard FAB container component.
- * Provides a centered, elevated circular container using design tokens.
- */
-export declare const FabButton: React.FC<FabButtonProps>;

package/dist/molecules/navigation/components/NavigationContainer.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-/**
- * NavigationContainer Component
- *
- * Wrapper around React Navigation's NavigationContainer
- * Provides navigation support to applications.
- */
-export declare const NavigationContainer: React.FC<{
-    children: React.ReactNode;
-}>;

package/dist/molecules/navigation/components/NavigationHeader.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface NavigationHeaderProps {
-    title: string;
-    onBackPress?: () => void;
-    rightElement?: React.ReactNode;
-    centerTitle?: boolean;
-}
-export declare const NavigationHeader: React.FC<NavigationHeaderProps>;

package/dist/molecules/navigation/components/TabLabel.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface TabLabelProps {
-    label: string;
-    focused: boolean;
-    color?: string;
-    focusedColor?: string;
-    unfocusedColor?: string;
-    fontSize?: number;
-    focusedWeight?: '400' | '500' | '600' | '700' | '800' | '900';
-    unfocusedWeight?: '400' | '500' | '600' | '700' | '800' | '900';
-    textStyle?: import('react-native').TextStyle;
-    textType?: 'labelSmall' | 'labelMedium' | 'labelLarge' | 'bodySmall';
-}
-export declare const TabLabel: React.FC<TabLabelProps>;

package/dist/molecules/navigation/hooks/useAppFocusEffect.d.ts

@@ -1,21 +0,0 @@
-/**
- * useAppFocusEffect Hook
- *
- * Safe wrapper around React Navigation's useFocusEffect.
- * Only runs the effect if navigation is ready.
- *
- * @param effect - Callback to run when screen is focused
- *
- * @example
- * ```typescript
- * useAppFocusEffect(
- *   useCallback(() => {
- *     // Runs when screen is focused
- *     return () => {
- *       // Cleanup when screen is unfocused
- *     };
- *   }, [dependency])
- * );
- * ```
- */
-export declare function useAppFocusEffect(effect: () => void | (() => void)): void;

package/dist/molecules/navigation/hooks/useAppIsFocused.d.ts

@@ -1,15 +0,0 @@
-/**
- * useAppIsFocused Hook
- *
- * Safe wrapper around React Navigation's useIsFocused.
- * Returns false if called outside NavigationContainer.
- *
- * @example
- * ```typescript
- * const isFocused = useAppIsFocused();
- * if (isFocused) {
- *   // Screen is currently focused
- * }
- * ```
- */
-export declare function useAppIsFocused(): boolean;