@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/build/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,19 @@
+import type { DatePickerBaseProps, DateType, MultiChange, RangeChange, SingleChange } from './DatePicker.props';
+export interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode: 'single';
+    date?: DateType;
+    onChange?: SingleChange;
+}
+export interface DatePickerRangeProps extends DatePickerBaseProps {
+    mode: 'range';
+    startDate?: DateType;
+    endDate?: DateType;
+    onChange?: RangeChange;
+}
+export interface DatePickerMultipleProps extends DatePickerBaseProps {
+    mode: 'multiple';
+    dates?: DateType[];
+    onChange?: MultiChange;
+}
+declare const DateTimePicker: (props: DatePickerSingleProps | DatePickerRangeProps | DatePickerMultipleProps) => import("react/jsx-runtime").JSX.Element;
+export default DateTimePicker;

package/build/components/DatePicker/DatePicker.js

@@ -0,0 +1,479 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import localeData from 'dayjs/plugin/localeData';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from 'react';
+import { AccessibilityInfo, findNodeHandle, Platform, View as RNView } from 'react-native';
+import { usePrevious } from '../../hooks/usePrevious';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { DatePickerContext } from './DatePicker.context';
+import Calendar from './DatePickerCalendar';
+import { CalendarActionKind, CONTAINER_HEIGHT, WEEKDAYS_HEIGHT } from './enums';
+import { areDatesOnSameDay, dateToUnix, getEndOfDay, getStartOfDay, removeTime } from './utils';
+dayjs.extend(localeData);
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(duration);
+const DateTimePicker = (props) => {
+    const numerals = 'latn';
+    const { mode = 'single', timeZone, showOutsideDays = true, timePicker = false, firstDayOfWeek = 1, 
+    // startYear,
+    // endYear,
+    minDate, maxDate, enabledDates, disabledDates, date, startDate, endDate, dates, min, max, onChange, initialView = 'day', containerHeight = CONTAINER_HEIGHT, weekdaysHeight = WEEKDAYS_HEIGHT, navigationPosition = 'right', weekdaysFormat = 'min', monthsFormat = 'short', monthCaptionFormat = 'full', multiRangeMode, hideHeader, hideFooter, hideWeekdays, disableMonthPicker, disableYearPicker, month, year, onMonthChange = () => { }, onYearChange = () => { }, use12Hours, ref, onCancel = () => { }, } = props;
+    dayjs.tz.setDefault(timeZone);
+    dayjs.locale('en');
+    const modalRef = useRef(null);
+    const calendarViewRef = useRef(null);
+    const scrollViewRef = useRef(null);
+    // Forward ref methods to parent component
+    useImperativeHandle(ref, () => modalRef.current);
+    const closeDatePicker = useCallback(() => {
+        modalRef.current?.close();
+    }, [modalRef.current]);
+    const prevTimezone = usePrevious(timeZone);
+    const initialCalendarView = useMemo(() => (mode !== 'single' && initialView === 'time' ? 'day' : initialView), [mode, initialView]);
+    const firstDay = useMemo(() => (firstDayOfWeek && firstDayOfWeek > 0 && firstDayOfWeek <= 6 ? firstDayOfWeek : 0), [firstDayOfWeek]);
+    const initialState = useMemo(() => {
+        let initialDate = dayjs().tz(timeZone);
+        if (mode === 'single' && date) {
+            initialDate = dayjs(date);
+        }
+        if (mode === 'range' && startDate) {
+            initialDate = dayjs(startDate);
+        }
+        if (mode === 'multiple' && dates && dates.length > 0) {
+            initialDate = dayjs(dates[0]);
+        }
+        if (minDate && initialDate.isBefore(minDate)) {
+            initialDate = dayjs(minDate);
+        }
+        if (month !== undefined && month && month >= 0 && month <= 11) {
+            initialDate = initialDate.month(month);
+        }
+        if (year !== undefined && year >= 0) {
+            initialDate = initialDate.year(year);
+        }
+        let _date = (date ? dayjs(date) : date);
+        if (_date && maxDate && dayjs(_date).isAfter(maxDate)) {
+            _date = dayjs(maxDate);
+        }
+        if (_date && minDate && dayjs(_date).isBefore(minDate)) {
+            _date = dayjs(minDate);
+        }
+        let start = (startDate ? dayjs(startDate) : startDate);
+        if (start && maxDate && dayjs(start).isAfter(maxDate)) {
+            start = dayjs(maxDate);
+        }
+        if (start && minDate && dayjs(start).isBefore(minDate)) {
+            start = dayjs(minDate);
+        }
+        let end = (endDate ? dayjs(endDate) : endDate);
+        if (end && maxDate && dayjs(end).isAfter(maxDate)) {
+            end = dayjs(maxDate);
+        }
+        if (end && minDate && dayjs(end).isBefore(minDate)) {
+            end = dayjs(minDate);
+        }
+        return {
+            date: _date,
+            startDate: start,
+            endDate: end,
+            dates,
+            calendarView: initialCalendarView,
+            currentDate: initialDate,
+            currentYear: initialDate.year(),
+        };
+    }, [
+        mode,
+        date,
+        startDate,
+        endDate,
+        dates,
+        minDate,
+        maxDate,
+        month,
+        year,
+        timeZone,
+        initialCalendarView,
+    ]);
+    const [state, dispatch] = useReducer((prevState, action) => {
+        switch (action.type) {
+            case CalendarActionKind.SET_CALENDAR_VIEW:
+                return {
+                    ...prevState,
+                    calendarView: action.payload,
+                };
+            case CalendarActionKind.CHANGE_CURRENT_DATE:
+                return {
+                    ...prevState,
+                    currentDate: action.payload,
+                };
+            case CalendarActionKind.CHANGE_CURRENT_YEAR:
+                return {
+                    ...prevState,
+                    currentYear: action.payload,
+                };
+            case CalendarActionKind.CHANGE_SELECTED_DATE:
+                const { date: selectedDate } = action.payload;
+                return {
+                    ...prevState,
+                    date: selectedDate,
+                    currentDate: selectedDate,
+                };
+            case CalendarActionKind.CHANGE_SELECTED_RANGE:
+                const { startDate: start, endDate: end } = action.payload;
+                return {
+                    ...prevState,
+                    startDate: start,
+                    endDate: end,
+                };
+            case CalendarActionKind.CHANGE_SELECTED_MULTIPLE:
+                const { dates: selectedDates } = action.payload;
+                return {
+                    ...prevState,
+                    dates: selectedDates,
+                };
+            case CalendarActionKind.RESET_STATE:
+                return action.payload;
+            default:
+                return prevState;
+        }
+    }, initialState);
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    useEffect(() => {
+        const newState = {
+            ...initialState,
+        };
+        dispatch({ type: CalendarActionKind.RESET_STATE, payload: newState });
+    }, []);
+    useEffect(() => {
+        if (prevTimezone !== timeZone) {
+            const newDate = dayjs().tz(timeZone);
+            dispatch({
+                type: CalendarActionKind.CHANGE_CURRENT_DATE,
+                payload: newDate,
+            });
+        }
+    }, [timeZone, prevTimezone]);
+    useEffect(() => {
+        if (mode === 'single') {
+            let _date = (date &&
+                (timePicker ? dayjs.tz(date, timeZone) : getStartOfDay(dayjs.tz(date, timeZone)))) ??
+                date;
+            if (_date && maxDate && dayjs.tz(_date, timeZone).isAfter(maxDate)) {
+                _date = dayjs.tz(maxDate, timeZone);
+            }
+            if (_date && minDate && dayjs.tz(_date, timeZone).isBefore(minDate)) {
+                _date = dayjs.tz(minDate, timeZone);
+            }
+            dispatch({
+                type: CalendarActionKind.CHANGE_SELECTED_DATE,
+                payload: { date: _date },
+            });
+            if (prevTimezone !== timeZone) {
+                onChange({
+                    date: _date ? dayjs(_date).toDate() : _date,
+                });
+            }
+        }
+        else if (mode === 'range') {
+            let start = (startDate ? dayjs.tz(startDate, timeZone) : startDate);
+            if (start && maxDate && dayjs.tz(start, timeZone).isAfter(maxDate)) {
+                start = dayjs.tz(maxDate, timeZone);
+            }
+            if (start && minDate && dayjs.tz(start, timeZone).isBefore(minDate)) {
+                start = dayjs.tz(minDate, timeZone);
+            }
+            let end = (endDate ? dayjs.tz(endDate, timeZone) : endDate);
+            if (end && maxDate && dayjs.tz(end, timeZone).isAfter(maxDate)) {
+                end = dayjs.tz(maxDate, timeZone);
+            }
+            if (end && minDate && dayjs.tz(end, timeZone).isBefore(minDate)) {
+                end = dayjs.tz(minDate, timeZone);
+            }
+            dispatch({
+                type: CalendarActionKind.CHANGE_SELECTED_RANGE,
+                payload: {
+                    startDate: start,
+                    endDate: end,
+                },
+            });
+            if (prevTimezone !== timeZone) {
+                onChange({
+                    startDate: start ? dayjs(start).toDate() : start,
+                    endDate: end ? dayjs(end).toDate() : end,
+                });
+            }
+        }
+        else if (mode === 'multiple') {
+            const _dates = dates?.map(date => dayjs(date).tz(timeZone));
+            dispatch({
+                type: CalendarActionKind.CHANGE_SELECTED_MULTIPLE,
+                payload: { dates: _dates },
+            });
+            if (prevTimezone !== timeZone) {
+                onChange({
+                    dates: _dates.map(item => dayjs(item).toDate()),
+                    change: 'updated',
+                });
+            }
+        }
+    }, [mode, date, startDate, endDate, dates, minDate, maxDate, timePicker, prevTimezone, timeZone]);
+    const setCalendarView = useCallback((view) => {
+        dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, payload: view });
+    }, []);
+    const onSelectDate = useCallback((selectedDate) => {
+        if (onChange) {
+            if (mode === 'single') {
+                const newDate = timePicker
+                    ? dayjs.tz(selectedDate, timeZone)
+                    : dayjs.tz(getStartOfDay(selectedDate), timeZone);
+                dispatch({
+                    type: CalendarActionKind.CHANGE_CURRENT_DATE,
+                    payload: newDate,
+                });
+                onChange({
+                    date: newDate ? dayjs(newDate).toDate() : newDate,
+                });
+            }
+            else if (mode === 'range') {
+                // set time to 00:00:00
+                let start = removeTime(stateRef.current.startDate, timeZone);
+                let end = removeTime(stateRef.current.endDate, timeZone);
+                const selected = removeTime(selectedDate, timeZone);
+                let isStart = true;
+                let isReset = false;
+                if (dateToUnix(selected) !== dateToUnix(end) &&
+                    dateToUnix(selected) >= dateToUnix(start) &&
+                    dateToUnix(start) !== dateToUnix(end)) {
+                    isStart = false;
+                }
+                else if (start && dateToUnix(selected) === dateToUnix(start)) {
+                    isReset = true;
+                }
+                if (start && end) {
+                    if (dateToUnix(start) === dateToUnix(end) && dateToUnix(selected) > dateToUnix(start)) {
+                        isStart = false;
+                    }
+                    if (dateToUnix(selected) > dateToUnix(start) &&
+                        dateToUnix(selected) === dateToUnix(end)) {
+                        end = undefined;
+                    }
+                }
+                if (start && !end && dateToUnix(selected) < dateToUnix(start)) {
+                    end = start;
+                }
+                if (isStart && end && (min || max)) {
+                    const numberOfDays = dayjs(end).diff(selected, 'day');
+                    if ((max && numberOfDays > max) || (min && numberOfDays < min)) {
+                        isStart = true;
+                        end = undefined;
+                    }
+                }
+                if (!isStart && start && (min || max)) {
+                    const numberOfDays = dayjs(selected).diff(start, 'day');
+                    if (dateToUnix(selected) === dateToUnix(start)) {
+                        isReset = true;
+                    }
+                    else if ((max && numberOfDays > max) || (min && numberOfDays < min)) {
+                        isStart = true;
+                        end = undefined;
+                    }
+                }
+                if (isReset) {
+                    onChange({
+                        startDate: undefined,
+                        endDate: undefined,
+                    });
+                }
+                else {
+                    onChange({
+                        startDate: isStart
+                            ? dayjs(selected).toDate()
+                            : start
+                                ? dayjs.tz(start).toDate()
+                                : start,
+                        endDate: !isStart
+                            ? dayjs.tz(getEndOfDay(selected), timeZone).toDate()
+                            : end
+                                ? dayjs.tz(getEndOfDay(end), timeZone).toDate()
+                                : end,
+                    });
+                }
+            }
+            else if (mode === 'multiple') {
+                const safeDates = stateRef.current.dates || [];
+                const newDate = dayjs(selectedDate, timeZone).startOf('day');
+                const exists = safeDates.some(ed => areDatesOnSameDay(ed, newDate));
+                const newDates = exists
+                    ? safeDates.filter(ed => !areDatesOnSameDay(ed, newDate))
+                    : [...safeDates, newDate];
+                if (max && newDates.length > max) {
+                    return;
+                }
+                newDates.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1));
+                const _dates = newDates.map(date => dayjs(date).tz(timeZone));
+                onChange({
+                    dates: _dates.map(item => dayjs(item).toDate()),
+                    datePressed: newDate ? dayjs(newDate).toDate() : newDate,
+                    change: exists ? 'removed' : 'added',
+                });
+            }
+        }
+    }, [mode, timePicker, min, max, timeZone]);
+    // set the active displayed month
+    const onSelectMonth = useCallback((value) => {
+        const currentMonth = dayjs(stateRef.current.currentDate).month();
+        const newDate = dayjs(stateRef.current.currentDate).month(value);
+        // Only call onMonthChange if the month actually changed
+        if (value !== currentMonth) {
+            onMonthChange(value);
+        }
+        dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_DATE,
+            payload: newDate,
+        });
+        setCalendarView('day');
+    }, [setCalendarView, onMonthChange]);
+    // set the active displayed year
+    const onSelectYear = useCallback((value) => {
+        const currentYear = dayjs(stateRef.current.currentDate).year();
+        const newDate = dayjs(stateRef.current.currentDate).year(value);
+        // Only call onYearChange if the year actually changed
+        if (value !== currentYear) {
+            onYearChange(value);
+        }
+        dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_DATE,
+            payload: newDate,
+        });
+        setCalendarView('day');
+    }, [setCalendarView, onYearChange]);
+    const onChangeMonth = useCallback((value) => {
+        const newDate = dayjs(stateRef.current.currentDate).add(value, 'month');
+        dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_DATE,
+            payload: dayjs(newDate),
+        });
+    }, [stateRef, dispatch]);
+    const onChangeYear = useCallback((value) => {
+        dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_YEAR,
+            payload: value,
+        });
+    }, [dispatch]);
+    useEffect(() => {
+        if (month !== undefined && month >= 0 && month <= 11) {
+            onSelectMonth(month);
+        }
+    }, [month]);
+    useEffect(() => {
+        if (year !== undefined && year >= 0) {
+            onSelectYear(year);
+        }
+    }, [year]);
+    const baseContextValue = useMemo(() => ({
+        mode,
+        numerals,
+        timeZone,
+        showOutsideDays,
+        timePicker,
+        minDate,
+        maxDate,
+        min,
+        max,
+        enabledDates,
+        disabledDates,
+        firstDayOfWeek: firstDay,
+        containerHeight,
+        weekdaysHeight,
+        navigationPosition,
+        weekdaysFormat,
+        monthsFormat,
+        monthCaptionFormat,
+        multiRangeMode,
+        hideHeader,
+        hideFooter,
+        hideWeekdays,
+        disableMonthPicker,
+        disableYearPicker,
+        use12Hours,
+        closeDatePicker,
+    }), [
+        mode,
+        numerals,
+        timeZone,
+        showOutsideDays,
+        timePicker,
+        minDate,
+        maxDate,
+        min,
+        max,
+        enabledDates,
+        disabledDates,
+        firstDay,
+        containerHeight,
+        weekdaysHeight,
+        navigationPosition,
+        weekdaysFormat,
+        monthsFormat,
+        monthCaptionFormat,
+        multiRangeMode,
+        hideHeader,
+        hideFooter,
+        hideWeekdays,
+        disableMonthPicker,
+        disableYearPicker,
+        use12Hours,
+        closeDatePicker,
+    ]);
+    const handlerContextValue = useMemo(() => ({
+        setCalendarView,
+        onSelectDate,
+        onSelectMonth,
+        onSelectYear,
+        onChangeMonth,
+        onChangeYear,
+        onCancel,
+    }), [
+        setCalendarView,
+        onSelectDate,
+        onSelectMonth,
+        onSelectYear,
+        onChangeMonth,
+        onChangeYear,
+        onCancel,
+    ]);
+    const memoizedValue = useMemo(() => ({
+        ...state,
+        ...baseContextValue,
+        ...handlerContextValue,
+    }), [state, baseContextValue, handlerContextValue]);
+    const handleChange = useCallback((index) => {
+        if (index > -1) {
+            // Add a small delay to ensure the bottom sheet is fully rendered
+            setTimeout(() => {
+                // Announce to screen readers
+                AccessibilityInfo.announceForAccessibility('Date picker opened.');
+                // Set focus for screen readers - different refs for iOS vs Android
+                const scrollViewTargetRef = scrollViewRef.current?.getInnerViewNode();
+                const targetRef = calendarViewRef.current;
+                if ((Platform.OS === 'android' && targetRef) || scrollViewTargetRef) {
+                    const nodeHandle = findNodeHandle(Platform.OS === 'android' ? targetRef : scrollViewTargetRef);
+                    if (nodeHandle) {
+                        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+                    }
+                }
+            }, 50);
+        }
+    }, []);
+    return (_jsx(BottomSheetModal, { ref: modalRef, onChange: handleChange, accessible: false, children: _jsx(BottomSheetScrollView, { ref: scrollViewRef, children: _jsx(RNView, { ref: calendarViewRef, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Date picker calendar' : undefined, importantForAccessibility: Platform.OS === 'android' ? 'yes' : 'auto', children: _jsx(DatePickerContext.Provider, { value: memoizedValue, children: _jsx(Calendar, {}) }) }) }) }));
+};
+export default DateTimePicker;

package/build/components/DatePicker/DatePicker.props.d.ts

@@ -0,0 +1,125 @@
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { Dayjs } from 'dayjs';
+import { Ref } from 'react';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { CalendarActionKind, CalendarViews } from './enums';
+export type DateType = string | number | Dayjs | Date | null | undefined;
+export type CalendarType = 'gregory';
+export type CalendarMode = 'single' | 'range' | 'multiple';
+export type NavigationPosition = 'around' | 'right' | 'left';
+export type WeekdayFormat = 'min' | 'short' | 'full';
+export type MonthFormat = 'short' | 'full';
+export type LocalState = {
+    date: DateType;
+    startDate: DateType;
+    endDate: DateType;
+    dates?: DateType[];
+    calendarView: CalendarViews;
+    currentDate: DateType;
+    currentYear: number;
+};
+export type CalendarAction = {
+    type: CalendarActionKind;
+    payload: any;
+};
+export type CalendarDay = {
+    number: number;
+    text: string;
+    date: string;
+    isDisabled: boolean;
+    isCurrentMonth: boolean;
+    dayOfMonth?: number;
+    isToday: boolean;
+    isSelected: boolean;
+    inRange: boolean;
+    leftCrop: boolean;
+    rightCrop: boolean;
+    isStartOfWeek: boolean;
+    isEndOfWeek: boolean;
+    isCrop: boolean;
+    inMiddle: boolean;
+    rangeStart: boolean;
+    rangeEnd: boolean;
+};
+export type CalendarWeek = {
+    index: number;
+    name: {
+        full: string;
+        short: string;
+        min: string;
+    };
+};
+export type CalendarMonth = {
+    index: number;
+    name: {
+        full: string;
+        short: string;
+    };
+    isSelected: boolean;
+};
+export type CalendarYear = {
+    number: number;
+    text: string;
+    isSelected: boolean;
+    isActivated: boolean;
+};
+export type SingleChange = (params: {
+    date: DateType;
+}) => void;
+export type RangeChange = (params: {
+    startDate: DateType;
+    endDate: DateType;
+}) => void;
+export type MultiChange = (params: {
+    dates: DateType[];
+    datePressed?: DateType;
+    change: 'added' | 'removed' | 'updated';
+}) => void;
+export type Styles = Partial<ViewStyle | TextStyle | ImageStyle>;
+export interface DatePickerBaseProps {
+    mode?: CalendarMode;
+    timeZone?: string;
+    date?: DateType;
+    startDate?: DateType;
+    endDate?: DateType;
+    dates?: DateType[];
+    min?: number;
+    max?: number;
+    onChange?: SingleChange | RangeChange | MultiChange;
+    startYear?: number;
+    endYear?: number;
+    minDate?: DateType;
+    maxDate?: DateType;
+    enabledDates?: DateType[] | ((date: DateType) => boolean);
+    disabledDates?: DateType[] | ((date: DateType) => boolean);
+    firstDayOfWeek?: number;
+    showOutsideDays?: boolean;
+    timePicker?: boolean;
+    use12Hours?: boolean;
+    initialView?: CalendarViews;
+    containerHeight?: number;
+    weekdaysHeight?: number;
+    style?: ViewStyle;
+    navigationPosition?: NavigationPosition;
+    weekdaysFormat?: WeekdayFormat;
+    monthsFormat?: MonthFormat;
+    monthCaptionFormat?: MonthFormat;
+    multiRangeMode?: boolean;
+    hideHeader?: boolean;
+    hideFooter?: boolean;
+    hideWeekdays?: boolean;
+    disableMonthPicker?: boolean;
+    disableYearPicker?: boolean;
+    /** use to handle month and year selectors */
+    month?: number;
+    year?: number;
+    onMonthChange?: (month: number) => void;
+    onYearChange?: (year: number) => void;
+    ref?: Ref<BottomSheetModalMethods<any>>;
+    onCancel?: () => void;
+}
+export type Numerals = 'latn';
+export type PickerOption = {
+    value: number | string;
+    text: string;
+};

package/build/components/DatePicker/DatePicker.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/DatePicker/DatePickerCalendar.d.ts

@@ -0,0 +1,2 @@
+declare const Calendar: () => import("react/jsx-runtime").JSX.Element;
+export default Calendar;

package/build/components/DatePicker/DatePickerCalendar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useDatePickerContext } from './DatePicker.context';
+import Days from './DatePickerDays';
+import Footer from './DatePickerFooter';
+import Header from './DatePickerHeader';
+import Months from './DatePickerMonths';
+import Years from './DatePickerYears';
+import TimePicker from './TimePicker';
+const CalendarView = {
+    year: _jsx(Years, {}),
+    month: _jsx(Months, {}),
+    day: _jsx(Days, {}),
+    time: _jsx(TimePicker, {}),
+};
+const Calendar = () => {
+    const { hideHeader, hideFooter, calendarView, containerHeight, navigationPosition } = useDatePickerContext();
+    return (_jsxs(View, { style: [styles.container], testID: "calendar", children: [!hideHeader ? _jsx(Header, { navigationPosition: navigationPosition }) : null, _jsx(View, { style: styles.containerInner(containerHeight), children: CalendarView[calendarView] }), !hideFooter ? _jsx(Footer, {}) : null] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        backgroundColor: theme.color.background.secondary,
+        gap: theme.components.datePicker.calendar.gap,
+    },
+    containerInner: (height) => ({ height }),
+}));
+export default Calendar;

package/build/components/DatePicker/DatePickerDay.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CalendarDay, DateType } from './DatePicker.props';
+interface Props {
+    day: CalendarDay;
+    onSelectDate: (date: DateType) => void;
+    containerHeight?: number;
+    weekdaysHeight?: number;
+}
+export declare const EmptyDay: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ day, onSelectDate, containerHeight, weekdaysHeight, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;