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

package/dist/molecules/calendar/infrastructure/services/CalendarService.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Calendar Service
+ *
+ * Facade for calendar operations using composition.
+ * Delegates to specialized services for specific operations.
+ *
+ * SOLID: Facade pattern - Single entry point, delegates to specialists
+ * DRY: Avoids code duplication by composing smaller services
+ * KISS: Simple interface, complex operations delegated
+ */
+import type { CalendarDay, CalendarWeek } from '../../domain/entities/CalendarDay.entity';
+import type { CalendarEvent } from '../../domain/entities/CalendarEvent.entity';
+/**
+ * Calendar Service Implementation
+ *
+ * Facade that delegates to specialized services.
+ * Follows SOLID principles with composition over inheritance.
+ */
+export declare class CalendarService {
+    /**
+     * Generate calendar days for a specific month
+     */
+    static getMonthDays(year: number, month: number, events?: CalendarEvent[]): CalendarDay[];
+    /**
+     * Generate calendar week
+     */
+    static getWeek(date: Date, events?: CalendarEvent[]): CalendarWeek;
+    /**
+     * Navigate to previous month
+     */
+    static getPreviousMonth(currentDate: Date): Date;
+    /**
+     * Navigate to next month
+     */
+    static getNextMonth(currentDate: Date): Date;
+    /**
+     * Navigate to previous week
+     */
+    static getPreviousWeek(currentDate: Date): Date;
+    /**
+     * Navigate to next week
+     */
+    static getNextWeek(currentDate: Date): Date;
+    /**
+     * Get events for a specific date
+     */
+    static getEventsForDate(date: Date, events: CalendarEvent[]): CalendarEvent[];
+    /**
+     * Get events in date range
+     */
+    static getEventsInRange(startDate: Date, endDate: Date, events: CalendarEvent[]): CalendarEvent[];
+    /**
+     * Get weekday names
+     */
+    static getWeekdayNames(locale?: string): string[];
+    /**
+     * Check if two dates are the same day
+     */
+    static isSameDay(date1: Date, date2: Date): boolean;
+}

package/dist/molecules/calendar/infrastructure/storage/CalendarStore.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Calendar Store - Combined Hook
+ * Convenience hook that combines all calendar stores
+ */
+export { useCalendarEvents } from '../stores/useCalendarEvents';
+export { useCalendarNavigation } from '../stores/useCalendarNavigation';
+export { useCalendarView } from '../stores/useCalendarView';
+export type { CalendarViewMode } from '../stores/useCalendarView';
+/**
+ * Combined calendar hook
+ * Use this for convenience, or use individual stores for fine-grained control
+ */
+export declare const useCalendar: () => {
+    events: import("../..").CalendarEvent[];
+    isLoading: boolean;
+    error: string | null;
+    loadEvents: () => Promise<void>;
+    addEvent: (request: import("../..").CreateCalendarEventRequest) => Promise<void>;
+    updateEvent: (request: import("../..").UpdateCalendarEventRequest) => Promise<void>;
+    deleteEvent: (id: string) => Promise<void>;
+    completeEvent: (id: string) => Promise<void>;
+    uncompleteEvent: (id: string) => Promise<void>;
+    clearError: () => void;
+    clearAllEvents: () => Promise<void>;
+    selectedDate: Date;
+    currentMonth: Date;
+    setSelectedDate: (date: Date) => void;
+    goToToday: () => void;
+    navigateMonth: (direction: "prev" | "next") => void;
+    setCurrentMonth: (date: Date) => void;
+    viewMode: import("./CalendarStore").CalendarViewMode;
+    setViewMode: (mode: import("./CalendarStore").CalendarViewMode) => void;
+    getEventsForDate: (date: Date) => import("../..").CalendarEvent[];
+    getEventsForMonth: (year: number, month: number) => import("../..").CalendarEvent[];
+};
+/**
+ * Combined calendar store hook with computed days
+ */
+export declare const useCalendarStore: () => {
+    events: import("../..").CalendarEvent[];
+    selectedDate: Date;
+    currentMonth: Date;
+    viewMode: import("./CalendarStore").CalendarViewMode;
+    isLoading: boolean;
+    error: string | null;
+    actions: {
+        loadEvents: () => Promise<void>;
+        addEvent: (request: import("../..").CreateCalendarEventRequest) => Promise<void>;
+        updateEvent: (request: import("../..").UpdateCalendarEventRequest) => Promise<void>;
+        deleteEvent: (id: string) => Promise<void>;
+        completeEvent: (id: string) => Promise<void>;
+        uncompleteEvent: (id: string) => Promise<void>;
+        setSelectedDate: (date: Date) => void;
+        goToToday: () => void;
+        navigateMonth: (direction: "prev" | "next") => void;
+        setCurrentMonth: (date: Date) => void;
+        setViewMode: (mode: import("./CalendarStore").CalendarViewMode) => void;
+        getEventsForDate: (date: Date) => import("../..").CalendarEvent[];
+        getEventsForMonth: (year: number, month: number) => import("../..").CalendarEvent[];
+        clearError: () => void;
+        clearAllEvents: () => Promise<void>;
+    };
+    days: import("../..").CalendarDay[];
+};

package/dist/molecules/calendar/infrastructure/stores/storageAdapter.d.ts

@@ -0,0 +1,9 @@
+/**
+ * AsyncStorage Adapter for Zustand Persist
+ * Converts AsyncStorageRepository to Zustand-compatible storage
+ */
+export declare const zustandStorage: {
+    getItem: (name: string) => Promise<string | null>;
+    setItem: (name: string, value: string) => Promise<void>;
+    removeItem: (name: string) => Promise<void>;
+};

package/dist/molecules/calendar/infrastructure/stores/useCalendarEvents.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Calendar Events Store
+ * Manages event CRUD operations only
+ * Uses manual persistence (no zustand persist middleware)
+ */
+import type { CalendarEvent, CreateCalendarEventRequest, UpdateCalendarEventRequest } from '../../domain/entities/CalendarEvent.entity';
+interface CalendarEventsState {
+    readonly events: CalendarEvent[];
+    readonly isLoading: boolean;
+    readonly error: string | null;
+}
+interface CalendarEventsActions {
+    readonly loadEvents: () => Promise<void>;
+    readonly addEvent: (request: CreateCalendarEventRequest) => Promise<void>;
+    readonly updateEvent: (request: UpdateCalendarEventRequest) => Promise<void>;
+    readonly deleteEvent: (id: string) => Promise<void>;
+    readonly completeEvent: (id: string) => Promise<void>;
+    readonly uncompleteEvent: (id: string) => Promise<void>;
+    readonly clearError: () => void;
+    readonly clearAllEvents: () => Promise<void>;
+}
+type CalendarEventsStore = CalendarEventsState & CalendarEventsActions;
+export declare const useCalendarEvents: import("zustand").UseBoundStore<import("zustand").StoreApi<CalendarEventsStore>>;
+export {};

package/dist/molecules/calendar/infrastructure/stores/useCalendarNavigation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Calendar Navigation Store
+ * Manages date navigation state (no persistence needed)
+ */
+interface CalendarNavigationState {
+    readonly selectedDate: Date;
+    readonly currentMonth: Date;
+}
+interface CalendarNavigationActions {
+    readonly setSelectedDate: (date: Date) => void;
+    readonly goToToday: () => void;
+    readonly navigateMonth: (direction: 'prev' | 'next') => void;
+    readonly setCurrentMonth: (date: Date) => void;
+}
+type CalendarNavigationStore = CalendarNavigationState & CalendarNavigationActions;
+export declare const useCalendarNavigation: import("zustand").UseBoundStore<import("zustand").StoreApi<CalendarNavigationStore>>;
+export {};

package/dist/molecules/calendar/infrastructure/stores/useCalendarView.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Calendar View Store
+ * Manages calendar view mode (no persistence needed)
+ */
+export type CalendarViewMode = 'month' | 'week' | 'day' | 'list';
+interface CalendarViewState {
+    readonly viewMode: CalendarViewMode;
+}
+interface CalendarViewActions {
+    readonly setViewMode: (mode: CalendarViewMode) => void;
+}
+type CalendarViewStore = CalendarViewState & CalendarViewActions;
+export declare const useCalendarView: import("zustand").UseBoundStore<import("zustand").StoreApi<CalendarViewStore>>;
+export {};

package/dist/molecules/calendar/infrastructure/utils/DateUtilities.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Date Utilities
+ *
+ * Pure functions for date operations and formatting.
+ * No side effects, timezone-aware operations.
+ *
+ * SOLID: Single Responsibility - Only date operations
+ * DRY: Reusable date utility functions
+ * KISS: Simple, focused functions
+ */
+export declare class DateUtilities {
+    /**
+     * Format date to string (YYYY-MM-DD)
+     */
+    static formatDateToString(date: Date): string;
+    /**
+     * Check if two dates are the same day
+     */
+    static isSameDay(date1: Date, date2: Date): boolean;
+    /**
+     * Add days to a date
+     */
+    static addDays(date: Date, days: number): Date;
+    /**
+     * Check if date is today
+     */
+    static isToday(date: Date): boolean;
+    /**
+     * Get current timezone
+     */
+    static getCurrentTimezone(): string;
+    /**
+     * Get start of month
+     */
+    static getStartOfMonth(date: Date): Date;
+    /**
+     * Get end of month
+     */
+    static getEndOfMonth(date: Date): Date;
+    /**
+     * Get number of days in month
+     */
+    static getDaysInMonth(date: Date): number;
+    /**
+     * Get start of week (Sunday)
+     */
+    static getStartOfWeek(date: Date): Date;
+    /**
+     * Get end of week (Saturday)
+     */
+    static getEndOfWeek(date: Date): Date;
+    /**
+     * Parse date from string (YYYY-MM-DD)
+     */
+    static parseDate(dateString: string): Date;
+    /**
+     * Format time to string (HH:MM)
+     */
+    static formatTimeToString(date: Date): string;
+    /**
+     * Check if date is in the past
+     */
+    static isPast(date: Date): boolean;
+    /**
+     * Check if date is in the future
+     */
+    static isFuture(date: Date): boolean;
+}

package/dist/molecules/calendar/presentation/components/AtomicCalendar.d.ts

@@ -0,0 +1,82 @@
+/**
+ * AtomicCalendar Component
+ *
+ * Generic, reusable calendar component with month view.
+ * Works with any type of events (workouts, habits, tasks, etc.)
+ *
+ * Features:
+ * - Monthly grid view (42 days = 6 weeks)
+ * - Timezone-aware via calendar service
+ * - Event indicators (colored dots)
+ * - Customizable styling
+ * - Accessible
+ * - Theme-aware
+ *
+ * Usage:
+ * ```tsx
+ * import { AtomicCalendar, useCalendar } from '@umituz/react-native-calendar';
+ *
+ * const MyScreen = () => {
+ *   const { days, selectedDate, actions } = useCalendar();
+ *
+ *   return (
+ *     <AtomicCalendar
+ *       days={days}
+ *       selectedDate={selectedDate}
+ *       onDateSelect={actions.setSelectedDate}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
+/**
+ * AtomicCalendar Props
+ */
+export interface AtomicCalendarProps {
+    /**
+     * Calendar days to display (42 days for 6-week grid)
+     */
+    days: CalendarDay[];
+    /**
+     * Currently selected date
+     */
+    selectedDate: Date;
+    /**
+     * Callback when a date is selected
+     */
+    onDateSelect: (date: Date) => void;
+    /**
+     * Whether to show weekday headers
+     * @default true
+     */
+    showWeekdayHeaders?: boolean;
+    /**
+     * Maximum number of event indicators to show per day
+     * @default 3
+     */
+    maxEventIndicators?: number;
+    /**
+     * Custom container style
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Custom day cell style
+     */
+    dayStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether to show event count when exceeds max indicators
+     * @default true
+     */
+    showEventCount?: boolean;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+}
+/**
+ * AtomicCalendar Component
+ */
+export declare const AtomicCalendar: React.FC<AtomicCalendarProps>;

package/dist/molecules/calendar/presentation/components/CalendarDayCell.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Calendar Day Cell Component
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
+interface CalendarDayCellProps {
+    day: CalendarDay;
+    index: number;
+    isSelected: boolean;
+    onDateSelect: (date: Date) => void;
+    maxEventIndicators: number;
+    showEventCount: boolean;
+    dayStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare const CalendarDayCell: React.FC<CalendarDayCellProps>;
+export {};

package/dist/molecules/calendar/presentation/components/CalendarWeekdayHeader.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Calendar Weekday Header Component
+ */
+import React from 'react';
+interface CalendarWeekdayHeaderProps {
+    weekdayNames: string[];
+}
+export declare const CalendarWeekdayHeader: React.FC<CalendarWeekdayHeaderProps>;
+export {};

package/dist/molecules/calendar/presentation/components/calendarStyles.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Calendar Component Styles
+ */
+export declare const calendarStyles: {
+    container: {
+        borderRadius: number;
+        padding: number;
+    };
+    weekdayHeader: {
+        flexDirection: "row";
+        marginBottom: number;
+    };
+    weekdayCell: {
+        flex: number;
+        alignItems: "center";
+    };
+    weekdayText: {
+        textAlign: "center";
+    };
+    grid: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+    };
+    dayCell: {
+        width: "14.285714285714286%";
+        aspectRatio: number;
+        justifyContent: "center";
+        alignItems: "center";
+        borderRadius: number;
+        marginBottom: number;
+        padding: number;
+    };
+    dayText: {
+        textAlign: "center";
+    };
+    eventIndicators: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        marginTop: number;
+        gap: number;
+        flexWrap: "wrap";
+    };
+    eventDot: {
+        width: number;
+        height: number;
+        borderRadius: number;
+    };
+    moreEventsText: {
+        fontSize: number;
+        marginLeft: number;
+    };
+};

package/dist/molecules/circular-menu/CircularMenu.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface CircularMenuAction {
+    id: string;
+    label: string;
+    icon: string;
+    onPress: () => void;
+}
+export interface CircularMenuProps {
+    visible: boolean;
+    onClose: () => void;
+    actions: CircularMenuAction[];
+}
+export declare const CircularMenu: React.FC<CircularMenuProps>;

package/dist/molecules/circular-menu/CircularMenuBackground.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CircularMenuBackground: React.FC;

package/dist/molecules/circular-menu/CircularMenuCloseButton.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface CircularMenuCloseButtonProps {
+    onPress: () => void;
+}
+export declare const CircularMenuCloseButton: React.FC<CircularMenuCloseButtonProps>;

package/dist/molecules/circular-menu/CircularMenuItem.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface CircularMenuItemProps {
+    icon: string;
+    label: string;
+    onPress: () => void;
+}
+export declare const CircularMenuItem: React.FC<CircularMenuItemProps>;

package/dist/molecules/circular-menu/constants.d.ts

@@ -0,0 +1,24 @@
+import { ViewStyle } from "react-native";
+export declare const LAYOUT: {
+    readonly ITEM_SIZE: 90;
+    readonly ICON_SIZE: 52;
+    readonly CLOSE_BUTTON_SIZE: 48;
+};
+export declare const ROW_CONFIG: {
+    readonly TOP_RADIUS: 80;
+    readonly TOP_START_ANGLE: -135;
+    readonly TOP_END_ANGLE: -45;
+    readonly BOTTOM_OFFSET_X: 130;
+    readonly BOTTOM_Y: 60;
+    readonly CENTER_Y: 150;
+};
+export declare const ARC_BACKGROUND: {
+    readonly WIDTH: 450;
+    readonly HEIGHT: 280;
+    readonly BORDER_RADIUS_TOP: 225;
+};
+export declare const OVERLAY: {
+    readonly PADDING_BOTTOM_OFFSET: 0;
+};
+export declare function getTopRowPosition(index: number, totalInRow: number): ViewStyle;
+export declare function getBottomRowPosition(side: "left" | "right"): ViewStyle;

package/dist/molecules/circular-menu/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./CircularMenu";
+export * from "./CircularMenuBackground";
+export * from "./CircularMenuCloseButton";

package/dist/molecules/confirmation-modal/components.d.ts

@@ -0,0 +1,31 @@
+/**
+ * ConfirmationModal Subcomponents
+ *
+ * Smaller components for the confirmation modal
+ */
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+import type { DesignTokens } from '../../theme';
+export declare const ConfirmationModalIcon: React.FC<{
+    icon: string;
+    iconColor: string;
+    testID: string;
+}>;
+export declare const ConfirmationModalTitle: React.FC<{
+    title: string;
+    tokens: DesignTokens;
+    testID: string;
+}>;
+export declare const ConfirmationModalMessage: React.FC<{
+    message: string;
+    tokens: DesignTokens;
+    testID: string;
+}>;
+export declare const ConfirmationModalButtons: React.FC<{
+    confirmText: string;
+    cancelText: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    confirmButtonStyle: StyleProp<ViewStyle>;
+    testID: string;
+}>;

package/dist/molecules/confirmation-modal/styles/confirmationModalStyles.d.ts

@@ -0,0 +1,49 @@
+/**
+ * ConfirmationModal Style Utilities
+ *
+ * Styling functions for confirmation modal component
+ */
+import { ViewStyle } from 'react-native';
+import { ConfirmationModalVariant, ConfirmationModalVariantConfig } from '../types';
+import type { DesignTokens } from '../../../theme';
+/**
+ * Get variant configuration (icon and color only)
+ * Note: Confirm text is handled in component with translations
+ */
+export declare const getVariantConfig: (variant: ConfirmationModalVariant) => Omit<ConfirmationModalVariantConfig, "confirmText">;
+/**
+ * Get modal overlay style
+ */
+export declare const getModalOverlayStyle: () => ViewStyle;
+/**
+ * Get backdrop style (invisible layer for dismissing)
+ */
+export declare const getBackdropStyle: () => ViewStyle;
+/**
+ * Get modal container style
+ */
+export declare const getModalContainerStyle: (tokens: DesignTokens) => ViewStyle;
+/**
+ * Get icon container style
+ */
+export declare const getIconContainerStyle: () => ViewStyle;
+/**
+ * Get title container style
+ */
+export declare const getTitleContainerStyle: () => ViewStyle;
+/**
+ * Get message container style
+ */
+export declare const getMessageContainerStyle: () => ViewStyle;
+/**
+ * Get button container style
+ */
+export declare const getButtonContainerStyle: () => ViewStyle;
+/**
+ * Get button style
+ */
+export declare const getButtonStyle: () => ViewStyle;
+/**
+ * Get confirm button variant based on modal variant
+ */
+export declare const getConfirmButtonVariant: (variant: ConfirmationModalVariant) => "primary" | "secondary" | "tertiary" | "outline" | "ghost";

package/dist/molecules/confirmation-modal/types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ConfirmationModal Types
+ */
+import type { ViewStyle, StyleProp } from 'react-native';
+export type ConfirmationModalVariant = 'default' | 'destructive' | 'warning' | 'success';
+export interface ConfirmationModalVariantConfig {
+    icon: string;
+    iconColor: string;
+    confirmText?: string;
+}
+export interface ConfirmationModalProps {
+    /** Modal visibility */
+    visible: boolean;
+    /** Modal title */
+    title: string;
+    /** Modal message */
+    message: string;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Confirm callback */
+    onConfirm: () => void;
+    /** Cancel/Close callback */
+    onCancel: () => void;
+    /** Modal variant for styling */
+    variant?: ConfirmationModalVariant;
+    /** Optional icon */
+    icon?: string;
+    /** Test ID */
+    testID?: string;
+    /** Show backdrop */
+    showBackdrop?: boolean;
+    /** Allow backdrop dismiss */
+    backdropDismissible?: boolean;
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+}

package/dist/molecules/confirmation-modal/useConfirmationModal.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ConfirmationModal Hook
+ *
+ * Hook for managing confirmation modal state
+ */
+import { ConfirmationModalProps, ConfirmationModalVariant } from './types';
+export declare const useConfirmationModal: (config: {
+    title: string;
+    message: string;
+    variant?: ConfirmationModalVariant;
+    confirmText: string;
+    cancelText: string;
+    onConfirm: () => void;
+}) => {
+    showConfirmation: () => void;
+    hideConfirmation: () => void;
+    confirmationProps: ConfirmationModalProps;
+};

package/dist/molecules/countdown/components/Countdown.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { CountdownTarget, CountdownDisplayConfig } from '../types/CountdownTypes';
+export interface CountdownProps {
+    target: CountdownTarget;
+    alternateTargets?: CountdownTarget[];
+    displayConfig?: CountdownDisplayConfig;
+    interval?: number;
+    onExpire?: () => void;
+    onTargetChange?: (target: CountdownTarget) => void;
+    formatLabel?: (unit: 'days' | 'hours' | 'minutes' | 'seconds', value: number) => string;
+}
+export declare const Countdown: React.FC<CountdownProps>;

package/dist/molecules/countdown/components/CountdownHeader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { IconName } from '../../../atoms';
+export interface CountdownHeaderProps {
+    title: string;
+    icon?: IconName;
+    iconColor?: string;
+    showToggle?: boolean;
+    onToggle?: () => void;
+}
+export declare const CountdownHeader: React.FC<CountdownHeaderProps>;

package/dist/molecules/countdown/components/TimeUnit.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TimeUnitProps {
+    value: number;
+    label: string;
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const TimeUnit: React.FC<TimeUnitProps>;