@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.0

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;

package/build/components/DatePicker/DatePickerDay.js

@@ -0,0 +1,242 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isEqual } from '../../utils';
+import { BodyText } from '../BodyText';
+import { CONTAINER_HEIGHT, WEEKDAYS_HEIGHT } from './enums';
+export const EmptyDay = React.memo(() => {
+    return _jsx(View, { style: styles.dayWrapper });
+});
+const DayPressable = createPressable({
+    Root: (props) => {
+        const { states, style } = props;
+        styles.useVariants({ isActive: states?.active });
+        return _jsx(Pressable, { ...props, style: [styles.dayContainer, style] });
+    },
+});
+const Day = ({ day, onSelectDate, containerHeight = CONTAINER_HEIGHT, weekdaysHeight = WEEKDAYS_HEIGHT, }) => {
+    const { text, date, isDisabled, isCurrentMonth, isToday, isSelected, inRange, leftCrop, rightCrop, isStartOfWeek, isEndOfWeek, isCrop, inMiddle, rangeStart, rangeEnd, } = day;
+    styles.useVariants({
+        isToday,
+        isSelected,
+        isDisabled,
+        isCurrentMonth,
+        inMiddle,
+        rangeStart,
+        rangeEnd,
+        isStartOfWeek,
+        isEndOfWeek,
+    });
+    const RangeFill = useMemo(() => {
+        if (!inRange)
+            return null;
+        if (!isCrop) {
+            return _jsx(View, { style: [styles.rangeRoot] });
+        }
+        return (_jsxs(_Fragment, { children: [leftCrop && _jsx(View, { style: [styles.rangeRoot, styles.leftCrop] }), rightCrop && _jsx(View, { style: [styles.rangeRoot, styles.rightCrop] })] }));
+    }, [inRange, isCrop, leftCrop, rightCrop, styles.rangeRoot]);
+    const accessibilityLabel = useMemo(() => {
+        const dayDate = new Date(date);
+        const dayOfWeek = dayDate.toLocaleDateString('en-US', { weekday: 'long' });
+        const dayOfMonth = dayDate.toLocaleDateString('en-US', { day: 'numeric' });
+        const month = dayDate.toLocaleDateString('en-US', { month: 'long' });
+        return `${dayOfWeek}, ${month} ${dayOfMonth}${isSelected ? ', selected' : ''}`;
+    }, [date]);
+    return (_jsx(View, { style: styles.dayWrapper, children: _jsxs(View, { style: [styles.dayCell(containerHeight, weekdaysHeight)], children: [RangeFill, _jsx(DayPressable, { disabled: isDisabled, onPress: () => onSelectDate(date), accessibilityRole: "button", accessibilityLabel: accessibilityLabel, style: styles.dayContainer, children: _jsx(BodyText, { style: [styles.text], children: text }) }), _jsx(View, { style: [styles.indicator] })] }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    dayWrapper: {
+        width: `${99.9 / 7}%`,
+        padding: 2,
+        variants: {
+            isDisabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            isCurrentMonth: {
+                false: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                isCurrentMonth: false,
+                inMiddle: true,
+                styles: {
+                    opacity: 1,
+                },
+            },
+            {
+                isCurrentMonth: false,
+                rangeStart: true,
+                styles: {
+                    opacity: 1,
+                },
+            },
+            {
+                isCurrentMonth: false,
+                rangeEnd: true,
+                styles: {
+                    opacity: 1,
+                },
+            },
+        ],
+    },
+    dayContainer: {
+        flex: 1,
+        width: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: theme.components.datePicker.calendar.item.borderRadius,
+        variants: {
+            isSelected: {
+                true: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            rangeStart: {
+                true: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            inMiddle: {
+                true: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+                        },
+                    },
+                },
+            },
+            rangeEnd: {
+                true: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            isActive: {
+                true: {
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                isActive: true,
+                inMiddle: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+                },
+            },
+        ],
+        _web: {
+            '_focus-visible': {
+                ...theme.helpers.focusVisible,
+            },
+            _active: {
+                backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+            },
+        },
+    },
+    text: {
+        color: theme.color.text.primary,
+        variants: {
+            isSelected: {
+                true: {
+                    color: theme.color.text.inverted,
+                },
+            },
+        },
+    },
+    indicator: {
+        position: 'absolute',
+        width: theme.components.datePicker.calendar.item.roundelWidth,
+        height: theme.components.datePicker.calendar.item.roundelHeight,
+        top: 34,
+        left: '50%',
+        transform: [{ translateX: -(theme.components.datePicker.calendar.item.roundelWidth / 2) }],
+        borderRadius: theme.borderRadius.full,
+        variants: {
+            isToday: {
+                true: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            isSelected: {
+                true: {},
+            },
+        },
+        compoundVariants: [
+            {
+                isToday: true,
+                isSelected: true,
+                styles: {
+                    backgroundColor: theme.components.datePicker.calendar.item.roundelBackgroundColorInverted,
+                },
+            },
+        ],
+    },
+    dayCell: (containerHeight, weekdaysHeight) => ({
+        minHeight: (containerHeight - weekdaysHeight) / 6,
+        borderRadius: theme.components.datePicker.calendar.item.borderRadius,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: theme.color.background.secondary,
+    }),
+    rangeWrapper: {
+        flex: 1,
+    },
+    rangeRoot: {
+        position: 'absolute',
+        top: 0,
+        left: -2,
+        right: -2,
+        bottom: 0,
+        variants: {
+            inMiddle: {
+                true: {
+                    backgroundColor: theme.components.datePicker.calendar.item.rangeBackground,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+                        },
+                    },
+                },
+            },
+            isStartOfWeek: {
+                true: {},
+            },
+            isEndOfWeek: {
+                true: {},
+            },
+        },
+    },
+    leftCrop: {
+        left: '50%',
+        backgroundColor: theme.components.datePicker.calendar.item.rangeBackground,
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+            },
+        },
+    },
+    rightCrop: {
+        right: '50%',
+        backgroundColor: theme.components.datePicker.calendar.item.rangeBackground,
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+            },
+        },
+    },
+}));
+const customComparator = (prev, next) => {
+    const areEqual = isEqual(prev.day, next.day) &&
+        prev.onSelectDate === next.onSelectDate &&
+        prev.containerHeight === next.containerHeight;
+    return areEqual;
+};
+export default memo(Day, customComparator);

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

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

package/build/components/DatePicker/DatePickerDays.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useDatePickerContext } from './DatePicker.context';
+import Day, { EmptyDay } from './DatePickerDay';
+import Weekdays from './DatePickerWeekdays';
+import { areDatesOnSameDay, getDate, getDaysInMonth, getMonthDays, getParsedDate, isDateBetween, } from './utils';
+const Days = () => {
+    const { mode, numerals = 'latn', timeZone, date, startDate, endDate, dates, currentDate, onSelectDate, showOutsideDays, minDate, maxDate, enabledDates, disabledDates, firstDayOfWeek, containerHeight, weekdaysHeight, weekdaysFormat, multiRangeMode, hideWeekdays, } = useDatePickerContext();
+    const { year, month, hour, minute } = getParsedDate(currentDate);
+    const handleSelectDate = useCallback((selectedDate) => {
+        const newDate = getDate(selectedDate).hour(hour).minute(minute);
+        onSelectDate(newDate);
+    }, [onSelectDate, hour, minute]);
+    const daysGrid = useMemo(() => {
+        const today = dayjs().tz(timeZone);
+        dayjs.tz.setDefault(timeZone);
+        const { fullDaysInMonth, prevMonthDays, prevMonthOffset, daysInCurrentMonth, daysInNextMonth } = getDaysInMonth(currentDate, showOutsideDays, firstDayOfWeek);
+        return getMonthDays(currentDate, showOutsideDays, minDate, maxDate, firstDayOfWeek, enabledDates, disabledDates, prevMonthDays, prevMonthOffset, daysInCurrentMonth, daysInNextMonth, numerals).map((day, index) => {
+            if (!day)
+                return null;
+            let leftCrop = day.dayOfMonth === 1;
+            let rightCrop = day.dayOfMonth === fullDaysInMonth;
+            const isFirstDayOfMonth = day.dayOfMonth === 1;
+            const isLastDayOfMonth = day.dayOfMonth === fullDaysInMonth;
+            const isToday = areDatesOnSameDay(day.date, today);
+            let inRange = false;
+            let isSelected = false;
+            let isCrop = false;
+            let inMiddle = false;
+            let rangeStart = false;
+            let rangeEnd = false;
+            if (mode === 'range') {
+                rightCrop = false;
+                const selectedStartDay = areDatesOnSameDay(day.date, startDate);
+                const selectedEndDay = areDatesOnSameDay(day.date, endDate);
+                isSelected = selectedStartDay || selectedEndDay;
+                inRange = isDateBetween(day.date, { startDate, endDate });
+                if (selectedStartDay)
+                    leftCrop = true;
+                if (selectedEndDay)
+                    rightCrop = true;
+                if (index % 7 === 0 && !selectedStartDay)
+                    leftCrop = false;
+                if (index % 7 === 6 && !selectedEndDay)
+                    rightCrop = false;
+                if ((isFirstDayOfMonth && selectedEndDay) ||
+                    (isLastDayOfMonth && selectedStartDay) ||
+                    dayjs(startDate).format('DDMMYYYY') === dayjs(endDate).format('DDMMYYYY')) {
+                    inRange = false;
+                }
+                isCrop = inRange && (leftCrop || rightCrop) && !(leftCrop && rightCrop);
+                inMiddle = inRange && !leftCrop && !rightCrop;
+                rangeStart = inRange && leftCrop;
+                rangeEnd = inRange && rightCrop;
+            }
+            else if (mode === 'multiple') {
+                const safeDates = dates || [];
+                isSelected = safeDates.some(d => areDatesOnSameDay(day.date, d));
+                // if the selected days in a row, implements range mode style to selected days
+                if (multiRangeMode) {
+                    const yesterday = dayjs(day.date).subtract(1, 'day');
+                    const tomorrow = dayjs(day.date).add(1, 'day');
+                    const yesterdaySelected = safeDates.some(d => areDatesOnSameDay(d, yesterday));
+                    const tomorrowSelected = safeDates.some(d => areDatesOnSameDay(d, tomorrow));
+                    // Reset all flags
+                    inRange = false;
+                    leftCrop = false;
+                    rightCrop = false;
+                    if (isSelected) {
+                        // Case: both adjacent days are selected - this is a middle day
+                        if (yesterdaySelected && tomorrowSelected) {
+                            inRange = true;
+                        }
+                        // Case: only tomorrow is selected - this is the start of a range
+                        else if (tomorrowSelected) {
+                            inRange = true;
+                            leftCrop = true;
+                        }
+                        // Case: only yesterday is selected - this is the end of a range
+                        else if (yesterdaySelected) {
+                            inRange = true;
+                            rightCrop = true;
+                        }
+                        // Handle edge cases for first and last days of month
+                        // Only apply these special cases when the day is actually part of a range
+                        if (inRange) {
+                            if (isFirstDayOfMonth && !tomorrowSelected) {
+                                inRange = false;
+                            }
+                            if (isLastDayOfMonth && !yesterdaySelected) {
+                                inRange = false;
+                            }
+                        }
+                    }
+                    // Set derived flags based on the core flags
+                    isCrop = inRange && (leftCrop || rightCrop);
+                    inMiddle = inRange && !leftCrop && !rightCrop;
+                    rangeStart = inRange && leftCrop;
+                    rangeEnd = inRange && rightCrop;
+                }
+            }
+            else if (mode === 'single') {
+                isSelected = areDatesOnSameDay(day.date, date);
+            }
+            return {
+                ...day,
+                isToday,
+                isSelected,
+                inRange,
+                leftCrop,
+                rightCrop,
+                isCrop,
+                inMiddle,
+                rangeStart,
+                rangeEnd,
+            };
+        });
+    }, [
+        mode,
+        numerals,
+        timeZone,
+        month,
+        year,
+        showOutsideDays,
+        firstDayOfWeek,
+        minDate,
+        maxDate,
+        enabledDates,
+        disabledDates,
+        date,
+        startDate,
+        endDate,
+        dates,
+        multiRangeMode,
+        currentDate,
+    ]);
+    return (_jsxs(View, { style: styles.container, testID: "day-selector", children: [!hideWeekdays ? (_jsx(Weekdays, { firstDayOfWeek: firstDayOfWeek, weekdaysFormat: weekdaysFormat, weekdaysHeight: weekdaysHeight })) : null, _jsx(View, { style: styles.daysContainer, testID: "days", children: daysGrid?.map((day, index) => {
+                    return day ? (_jsx(Day, { day: day, onSelectDate: handleSelectDate, containerHeight: containerHeight, weekdaysHeight: weekdaysHeight }, index)) : (_jsx(EmptyDay, {}, index));
+                }) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+    },
+    daysContainer: {
+        width: '100%',
+        height: '100%',
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        alignContent: 'flex-start',
+    },
+});
+export default Days;

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

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

package/build/components/DatePicker/DatePickerFooter.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../Button';
+import { useDatePickerContext } from './DatePicker.context';
+const Footer = () => {
+    const { closeDatePicker, onCancel } = useDatePickerContext();
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        closeDatePicker();
+    };
+    return (_jsxs(View, { style: styles.container, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: closeDatePicker, children: "Ok" })] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        gap: theme.components.datePicker.calendar.footer.gap,
+        justifyContent: 'flex-end',
+    },
+}));
+export default Footer;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigationPosition } from '../DatePicker.props';
+export type HeaderProps = {
+    PrevIcon?: React.ReactNode;
+    NextIcon?: React.ReactNode;
+    navigationPosition?: NavigationPosition;
+};
+export type NavigationProps = {};

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

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

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

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

package/build/components/DatePicker/DatePickerHeader/DatePickerMonthButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+import { BodyText } from '../../BodyText';
+import { useDatePickerContext } from '../DatePicker.context';
+const MonthButton = () => {
+    const { currentDate, calendarView, setCalendarView, disableMonthPicker, monthCaptionFormat } = useDatePickerContext();
+    const currentMonthText = dayjs(currentDate)
+        .locale('en')
+        .format(monthCaptionFormat === 'full' ? 'MMMM' : 'MMM');
+    return (_jsx(Pressable, { disabled: disableMonthPicker, onPress: () => setCalendarView(calendarView === 'month' ? 'day' : 'month'), testID: "btn-month", accessibilityRole: "button", accessibilityLabel: currentMonthText, accessibilityHint: `${calendarView === 'month' ? 'Tap to switch to day view' : 'Tap to switch to month view'}`, children: _jsx(BodyText, { weight: "semibold", children: currentMonthText }) }));
+};
+export default memo(MonthButton);

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

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

package/build/components/DatePicker/DatePickerHeader/DatePickerNextButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { memo, useCallback } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+import { useDatePickerContext } from '../DatePicker.context';
+import { YEAR_PAGE_SIZE } from '../utils';
+const NextButton = () => {
+    const { currentYear, onChangeMonth, onChangeYear, calendarView } = useDatePickerContext();
+    const onPress = useCallback(() => {
+        switch (calendarView) {
+            case 'day':
+                return onChangeMonth(1);
+            case 'month':
+                return onChangeYear(currentYear + 1);
+            case 'year':
+                return onChangeYear(currentYear + YEAR_PAGE_SIZE);
+            default:
+                return {};
+        }
+    }, [calendarView, currentYear, onChangeMonth, onChangeYear]);
+    return (_jsx(Pressable, { disabled: calendarView === 'time', onPress: onPress, testID: "btn-next", accessibilityRole: "button", accessibilityLabel: `Next ${calendarView === 'day' ? 'month' : calendarView === 'month' ? 'year' : 'years'}`, children: _jsx(Icon, { as: ChevronRightSmallIcon, style: styles.icon }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        width: 20,
+        height: 20,
+        color: theme.color.icon.primary,
+    },
+}));
+export default memo(NextButton);

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

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