@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

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;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeftSmallIcon } 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 PrevButton = () => {
+    const { currentYear, calendarView, onChangeMonth, onChangeYear } = 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-prev", accessibilityRole: "button", accessibilityLabel: `Prev ${calendarView === 'day' ? 'month' : calendarView === 'month' ? 'year' : 'years'}`, children: _jsx(Icon, { as: ChevronLeftSmallIcon, style: styles.icon }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        width: 20,
+        height: 20,
+        color: theme.color.icon.primary,
+    },
+}));
+export default memo(PrevButton);

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

@@ -0,0 +1,6 @@
+import { NavigationPosition } from '../DatePicker.props';
+type Props = {
+    position: NavigationPosition;
+};
+declare const _default: import("react").MemoExoticComponent<({ position }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownSmallIcon, ChevronUpSmallIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { memo } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+import { useDatePickerContext } from '../DatePicker.context';
+import MonthButton from './DatePickerMonthButton';
+import { TimeButton } from './DatePickerTimeButton';
+import YearButton from './DatePickerYearButton';
+const Selectors = ({ position }) => {
+    const { mode, calendarView, timePicker, setCalendarView } = useDatePickerContext();
+    styles.useVariants({ position });
+    const onPress = () => {
+        if (calendarView === 'month' || calendarView === 'year') {
+            setCalendarView('day');
+        }
+        if (calendarView === 'day' || calendarView === 'time') {
+            setCalendarView('month');
+        }
+    };
+    return (_jsxs(View, { style: [styles.container], children: [_jsxs(View, { style: styles.monthYearWrap, children: [_jsxs(View, { style: styles.monthAndYear, children: [calendarView !== 'year' ? _jsx(MonthButton, {}) : null, _jsx(YearButton, {})] }), _jsx(Pressable, { onPress: onPress, accessibilityRole: "button", accessibilityLabel: `Change to ${calendarView === 'month' || calendarView === 'year' ? 'day' : 'month'} view`, children: _jsx(Icon, { as: calendarView === 'month' || calendarView === 'year'
+                                ? ChevronUpSmallIcon
+                                : ChevronDownSmallIcon, style: styles.icon }) })] }), timePicker && mode === 'single' && calendarView !== 'year' ? _jsx(TimeButton, {}) : null] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        variants: {
+            position: {
+                left: {
+                    justifyContent: 'space-between',
+                    flexDirection: 'row-reverse',
+                },
+                right: {
+                    justifyContent: 'space-between',
+                    flexDirection: 'row',
+                },
+                around: {
+                    justifyContent: 'space-evenly',
+                },
+            },
+        },
+    },
+    icon: {
+        color: theme.color.icon.primary,
+        width: 20,
+        height: 20,
+    },
+    monthYearWrap: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.components.datePicker.calendar.header.dateGap,
+    },
+    monthAndYear: {
+        gap: 5,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+}));
+export default memo(Selectors);

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { Pressable } from 'react-native';
+import { BodyText } from '../../BodyText';
+import { useDatePickerContext } from '../DatePicker.context';
+import { formatNumber, getParsedDate } from '../utils';
+export const TimeButton = () => {
+    const { currentDate, date, calendarView, setCalendarView, numerals = 'latn', use12Hours, } = useDatePickerContext();
+    const { hour, hour12, minute, period } = useMemo(() => getParsedDate(date || currentDate), [date, currentDate]);
+    const labelText = useMemo(() => {
+        const hourValue = use12Hours ? hour12 : hour;
+        const hourLabel = hourValue < 10
+            ? `${formatNumber(0, numerals)}${formatNumber(hourValue, numerals)}`
+            : `${formatNumber(hourValue, numerals)}`;
+        const minuteLabel = minute < 10
+            ? `${formatNumber(0, numerals)}${formatNumber(minute, numerals)}`
+            : `${formatNumber(minute, numerals)}`;
+        return `${hourLabel}:${minuteLabel} ${use12Hours ? period : ''}`.trim();
+    }, [numerals, hour, hour12, minute, use12Hours, period]);
+    return (_jsx(Pressable, { onPress: () => setCalendarView(calendarView === 'time' ? 'day' : 'time'), accessibilityRole: "button", accessibilityLabel: dayjs(date || currentDate).format('HH:mm'), children: _jsx(BodyText, { weight: "semibold", children: labelText }) }));
+};

package/build/components/DatePicker/DatePickerHeader/DatePickerYearButton.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/DatePickerYearButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+import { useDatePickerContext } from '../DatePicker.context';
+import { formatNumber, getDateYear, getYearRange } from '../utils';
+const YearButton = () => {
+    const { currentDate, calendarView, setCalendarView, currentYear, onChangeYear, disableYearPicker, numerals = 'latn', } = useDatePickerContext();
+    const years = getYearRange(currentYear);
+    return (_jsx(Pressable, { disabled: disableYearPicker, onPress: () => {
+            setCalendarView(calendarView === 'year' ? 'day' : 'year');
+            onChangeYear(getDateYear(currentDate));
+        }, testID: "btn-year", accessibilityRole: "button", accessibilityLabel: dayjs(currentDate).format('YYYY'), accessibilityHint: `${calendarView === 'year' ? 'Tap to switch to day view' : 'Tap to switch to year view'}`, style: [styles.container], children: _jsx(BodyText, { weight: "semibold", children: calendarView === 'year'
+                ? `${formatNumber(years[0] || 0, numerals)} - ${formatNumber(years[years.length - 1] || 0, numerals)}`
+                : formatNumber(parseInt(dayjs(currentDate).format('YYYY')), numerals) }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+export default memo(YearButton);