@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.0

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);

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

@@ -0,0 +1,3 @@
+import type { HeaderProps } from './DatePickerHeader.props';
+declare const _default: import("react").MemoExoticComponent<({ navigationPosition }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import NextButton from './DatePickerNextButton';
+import PrevButton from './DatePickerPrevButton';
+import Selectors from './DatePickerSelectors';
+const NavigationButtons = ({}) => (_jsxs(View, { style: styles.navigation, children: [_jsx(PrevButton, {}), _jsx(NextButton, {})] }));
+const Header = ({ navigationPosition = 'around' }) => (_jsx(View, { style: [styles.headerContainer], children: _jsx(View, { style: styles.container, children: navigationPosition === 'left' ? (_jsxs(_Fragment, { children: [_jsx(NavigationButtons, {}), _jsx(Selectors, { position: "left" })] })) : navigationPosition === 'right' ? (_jsxs(_Fragment, { children: [_jsx(Selectors, { position: "right" }), _jsx(NavigationButtons, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PrevButton, {}), _jsx(Selectors, { position: "around" }), _jsx(NextButton, {})] })) }) }));
+const styles = StyleSheet.create(theme => ({
+    headerContainer: {
+        paddingVertical: 3,
+    },
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    navigation: {
+        flexDirection: 'row',
+        gap: theme.components.datePicker.header.controlGap,
+    },
+}));
+const customComparator = (prev, next) => {
+    const areEqual = prev.PrevIcon === next.PrevIcon &&
+        prev.NextIcon === next.NextIcon &&
+        prev.navigationPosition === next.navigationPosition;
+    return areEqual;
+};
+export default memo(Header, customComparator);

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

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

package/build/components/DatePicker/DatePickerMonths.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useDatePickerContext } from './DatePicker.context';
+import { CONTAINER_HEIGHT } from './enums';
+import { getMonthsArray, getParsedDate, isMonthDisabled } from './utils';
+const Months = () => {
+    const { currentDate, onSelectMonth, containerHeight = CONTAINER_HEIGHT, monthsFormat = 'short', minDate, maxDate, } = useDatePickerContext();
+    const { month } = getParsedDate(currentDate);
+    return (_jsx(View, { style: styles.container, testID: "month-selector", children: _jsx(View, { style: styles.months, children: getMonthsArray().map((item, index) => {
+                const isSelected = index === month;
+                const isDisabled = isMonthDisabled(index, currentDate, {
+                    minDate,
+                    maxDate,
+                });
+                styles.useVariants({ isSelected, isDisabled });
+                return (_jsx(View, { style: styles.monthCell(containerHeight), children: _jsx(Pressable, { disabled: isDisabled, onPress: () => onSelectMonth(index), accessibilityRole: "button", accessibilityLabel: item.name.full, style: styles.item, children: _jsx(BodyText, { style: styles.label, children: item.name[monthsFormat] }, index) }) }, index));
+            }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    months: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    month: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    monthCell: (containerHeight) => ({
+        width: `${99.9 / 3}%`,
+        height: containerHeight / 6,
+        padding: 2,
+    }),
+    label: {
+        variants: {
+            isSelected: {
+                true: {
+                    color: theme.color.text.inverted,
+                },
+            },
+        },
+    },
+    item: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 8,
+        borderRadius: theme.borderRadius.md,
+        variants: {
+            isSelected: {
+                true: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            isDisabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+}));
+export default Months;

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

@@ -0,0 +1,8 @@
+import { WeekdayFormat } from './DatePicker.props';
+type WeekdaysProps = {
+    firstDayOfWeek: number;
+    weekdaysFormat?: WeekdayFormat;
+    weekdaysHeight?: number;
+};
+declare const _default: import("react").MemoExoticComponent<({ firstDayOfWeek, weekdaysFormat, weekdaysHeight, }: WeekdaysProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/DatePickerWeekdays.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { WEEKDAYS_HEIGHT } from './enums';
+import { getWeekdays } from './utils';
+const Weekdays = ({ firstDayOfWeek, weekdaysFormat = 'min', weekdaysHeight = WEEKDAYS_HEIGHT, }) => {
+    return (_jsx(View, { style: [styles.container(weekdaysHeight)], testID: "weekdays", children: getWeekdays(firstDayOfWeek)?.map((weekday, index) => (_jsx(View, { style: [styles.weekday], children: _jsx(BodyText, { style: styles.text, accessible: false, children: weekday.name[weekdaysFormat] }) }, index))) }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: (weekdaysHeight) => ({
+        height: weekdaysHeight,
+        flexDirection: 'row',
+        alignItems: 'center',
+    }),
+    text: {
+        color: theme.color.text.secondary,
+    },
+    weekday: {
+        width: `${99.9 / 7}%`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+}));
+export default memo(Weekdays);

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

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

package/build/components/DatePicker/DatePickerYears.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useDatePickerContext } from './DatePicker.context';
+import { CONTAINER_HEIGHT } from './enums';
+import { formatNumber, getDateYear, getYearRange, isYearDisabled } from './utils';
+const Years = () => {
+    const { mode, numerals = 'latn', currentDate, currentYear, date, onSelectYear, containerHeight = CONTAINER_HEIGHT, minDate, maxDate, } = useDatePickerContext();
+    const selectedYear = getDateYear(date);
+    const generateCells = useCallback(() => {
+        const years = getYearRange(currentYear);
+        const activeYear = getDateYear(currentDate);
+        const column = years.map(year => {
+            const isSelected = year === selectedYear;
+            const isActivated = year === activeYear;
+            const isDisabled = isYearDisabled(year, { minDate, maxDate });
+            styles.useVariants({ isSelected, isDisabled, isActivated });
+            return (_jsx(View, { style: styles.yearCell(containerHeight), children: _jsx(Pressable, { disabled: isDisabled, onPress: () => onSelectYear(year), accessibilityRole: "button", accessibilityLabel: year.toString(), style: styles.year, children: _jsx(BodyText, { style: styles.label, children: formatNumber(year, numerals) }, year) }) }, year));
+        });
+        return column;
+    }, [
+        onSelectYear,
+        selectedYear,
+        currentYear,
+        currentDate,
+        styles,
+        mode,
+        minDate,
+        maxDate,
+        numerals,
+    ]);
+    return (_jsx(View, { style: [styles.container, styles.years], testID: "year-selector", children: _jsx(View, { style: styles.years, children: generateCells() }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    years: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    year: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 8,
+        borderRadius: theme.borderRadius.md,
+        variants: {
+            isActivated: {
+                true: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            isDisabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            isSelected: {
+                true: {},
+            },
+        },
+    },
+    yearCell: (containerHeight) => ({
+        width: `${99.9 / 3}%`,
+        height: containerHeight / 6,
+        padding: 2,
+    }),
+    label: {
+        variants: {
+            isActivated: {
+                true: {
+                    color: theme.color.text.inverted,
+                },
+            },
+        },
+    },
+}));
+export default Years;

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

@@ -0,0 +1,3 @@
+export type Period = 'AM' | 'PM';
+declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;

package/build/components/DatePicker/TimePicker.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useDatePickerContext } from './DatePicker.context';
+import { CONTAINER_HEIGHT } from './enums';
+import PeriodPicker from './time-picker/period-picker';
+import Wheel from './time-picker/wheel';
+import { formatNumber, getParsedDate } from './utils';
+const createNumberList = (num, numerals, startFrom = 0) => {
+    return Array.from({ length: num }, (_, i) => ({
+        value: i + startFrom,
+        text: i + startFrom < 10
+            ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
+            : `${formatNumber(i + startFrom, numerals)}`,
+    }));
+};
+const TimePicker = () => {
+    const { currentDate, date, onSelectDate, timeZone, numerals = 'latn', use12Hours, } = useDatePickerContext();
+    const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, numerals, use12Hours ? 1 : 0), [numerals, use12Hours]);
+    const minutes = useMemo(() => createNumberList(60, numerals), [numerals]);
+    const { hour, hour12, minute, period } = getParsedDate(date || currentDate);
+    const handleChangeHour = useCallback((value) => {
+        let hour24 = value;
+        if (use12Hours) {
+            if (period === 'AM' && value === 12) {
+                hour24 = 0;
+            }
+            else if (period === 'PM' && value < 12) {
+                hour24 = value + 12;
+            }
+            else {
+                hour24 = value;
+            }
+        }
+        const newDate = dayjs.tz(date, timeZone).hour(hour24).minute(minute);
+        onSelectDate(newDate);
+    }, [date, onSelectDate, timeZone, use12Hours, period, minute]);
+    const handleChangeMinute = useCallback((value) => {
+        const newDate = dayjs.tz(date, timeZone).minute(value);
+        onSelectDate(newDate);
+    }, [date, onSelectDate, timeZone]);
+    const handlePeriodChange = useCallback((newPeriod) => {
+        let newHour = hour12;
+        if (newPeriod === 'PM' && hour12 < 12) {
+            newHour = hour12 + 12;
+        }
+        else if (newPeriod === 'AM' && hour12 === 12) {
+            newHour = 0;
+        }
+        else if (newPeriod === 'AM' && hour >= 12) {
+            newHour = hour12;
+        }
+        const newDate = dayjs.tz(date || currentDate, timeZone).hour(newHour);
+        onSelectDate(newDate);
+    }, [date, currentDate, onSelectDate, timeZone, hour, hour12]);
+    return (_jsxs(ScrollView, { horizontal: true, scrollEnabled: false, contentContainerStyle: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: minute, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(PeriodPicker, { value: period, setValue: handlePeriodChange }) })) : null] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    wheelContainer: {
+        flex: 1,
+    },
+    timePickerContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: CONTAINER_HEIGHT / 2,
+        height: CONTAINER_HEIGHT / 2,
+        flexDirection: 'row',
+    },
+    timeSeparator: {
+        marginHorizontal: 5,
+    },
+    periodContainer: {
+        marginLeft: 10,
+    },
+});
+export default TimePicker;

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

@@ -0,0 +1,12 @@
+export type CalendarViews = 'day' | 'month' | 'year' | 'time';
+export declare enum CalendarActionKind {
+    SET_CALENDAR_VIEW = "SET_CALENDAR_VIEW",
+    CHANGE_CURRENT_DATE = "CHANGE_CURRENT_DATE",
+    CHANGE_CURRENT_YEAR = "CHANGE_CURRENT_YEAR",
+    CHANGE_SELECTED_DATE = "CHANGE_SELECTED_DATE",
+    CHANGE_SELECTED_RANGE = "CHANGE_SELECTED_RANGE",
+    CHANGE_SELECTED_MULTIPLE = "CHANGE_SELECTED_MULTIPLE",
+    RESET_STATE = "RESET_STATE"
+}
+export declare const CONTAINER_HEIGHT = 300;
+export declare const WEEKDAYS_HEIGHT = 25;

package/build/components/DatePicker/enums.js

@@ -0,0 +1,12 @@
+export var CalendarActionKind;
+(function (CalendarActionKind) {
+    CalendarActionKind["SET_CALENDAR_VIEW"] = "SET_CALENDAR_VIEW";
+    CalendarActionKind["CHANGE_CURRENT_DATE"] = "CHANGE_CURRENT_DATE";
+    CalendarActionKind["CHANGE_CURRENT_YEAR"] = "CHANGE_CURRENT_YEAR";
+    CalendarActionKind["CHANGE_SELECTED_DATE"] = "CHANGE_SELECTED_DATE";
+    CalendarActionKind["CHANGE_SELECTED_RANGE"] = "CHANGE_SELECTED_RANGE";
+    CalendarActionKind["CHANGE_SELECTED_MULTIPLE"] = "CHANGE_SELECTED_MULTIPLE";
+    CalendarActionKind["RESET_STATE"] = "RESET_STATE";
+})(CalendarActionKind || (CalendarActionKind = {}));
+export const CONTAINER_HEIGHT = 300;
+export const WEEKDAYS_HEIGHT = 25;

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

@@ -0,0 +1,4 @@
+import 'dayjs/locale/en';
+import './polyfill';
+export type { CalendarDay, CalendarMode, CalendarMonth, CalendarWeek, CalendarYear, DateType, } from './DatePicker.props';
+export { default as DatePicker } from './DatePicker';

package/build/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+import 'dayjs/locale/en';
+import './polyfill';
+export { default as DatePicker } from './DatePicker';

package/build/components/DatePicker/polyfill.js

@@ -0,0 +1,22 @@
+"use strict";
+// @ts-ignore
+Date.prototype._toLocaleString = Date.prototype.toLocaleString;
+// @ts-ignore
+Date.prototype.toLocaleString = function (a, b) {
+    if (b && Object.keys(b).length === 1 && 'timeZone' in b && a === 'en-US') {
+        return Intl.DateTimeFormat('en-us', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false,
+            timeZone: b.timeZone,
+        })
+            .format(this)
+            .replace(/(\d{2})\/(\d{2})\/(\d{4}),/g, '$3-$1-$2');
+    }
+    // @ts-ignore
+    return this._toLocaleString(a, b);
+};

package/build/components/DatePicker/time-picker/animated-math.d.ts

@@ -0,0 +1,4 @@
+import { Animated } from 'react-native';
+declare function sin(animated: Animated.Animated): Animated.AnimatedAddition<string | number>;
+declare function normalize(animated: Animated.Animated): Animated.Animated;
+export { sin, normalize };

package/build/components/DatePicker/time-picker/animated-math.js

@@ -0,0 +1,19 @@
+import { Animated } from 'react-native';
+const FACTORIAL_3 = 3 * 2;
+const FACTORIAL_5 = 5 * 4 * FACTORIAL_3;
+const FACTORIAL_7 = 7 * 6 * FACTORIAL_5;
+function sin(animated) {
+    const normalized = normalize(animated);
+    const square = Animated.multiply(normalized, normalized);
+    const pow3 = Animated.multiply(normalized, square);
+    const pow5 = Animated.multiply(pow3, square);
+    const pow7 = Animated.multiply(pow5, square);
+    return Animated.add(Animated.add(normalized, Animated.multiply(pow3, -1 / FACTORIAL_3)), Animated.add(Animated.multiply(pow5, 1 / FACTORIAL_5), Animated.multiply(pow7, -1 / FACTORIAL_7)));
+}
+function normalize(animated) {
+    return Animated.add(Animated.modulo(Animated.add(animated, Math.PI), Math.PI * 2), -Math.PI).interpolate({
+        inputRange: [-Math.PI, -Math.PI / 2, Math.PI / 2, Math.PI],
+        outputRange: [0, -Math.PI / 2, Math.PI / 2, 0],
+    });
+}
+export { sin, normalize };

package/build/components/DatePicker/time-picker/period-native.d.ts

@@ -0,0 +1,6 @@
+interface PeriodProps {
+    value: string;
+    setValue?: (value: any) => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/period-native.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import WheelPicker from './wheel-picker';
+const options = [
+    { value: 'AM', text: 'AM' },
+    { value: 'PM', text: 'PM' },
+];
+const PeriodNative = ({ value, setValue = () => { } }) => {
+    return (_jsx(WheelPicker, { value: value, options: options, onChange: setValue, 
+        //containerStyle={defaultStyles.container}
+        itemHeight: 44, decelerationRate: "fast" }));
+};
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
+    return areEqual;
+};
+export default memo(PeriodNative, customComparator);

package/build/components/DatePicker/time-picker/period-picker.d.ts

@@ -0,0 +1,6 @@
+type PeriodProps = {
+    value: string;
+    setValue?: (value: any) => void;
+};
+declare const _default: import("react").MemoExoticComponent<(props: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/DatePicker/time-picker/period-picker.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Platform } from 'react-native';
+import PeriodNative from './period-native';
+import PeriodWeb from './period-web';
+const PeriodPicker = (props) => {
+    const Component = Platform.OS === 'web' ? PeriodWeb : PeriodNative;
+    return _jsx(Component, { ...props });
+};
+export default memo(PeriodPicker);

package/build/components/DatePicker/time-picker/period-web.d.ts

@@ -0,0 +1,6 @@
+interface PeriodProps {
+    value: string;
+    setValue?: (value: any) => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;