@acusti/date-picker 0.8.1 → 0.9.0

package/README.md

@@ -11,7 +11,7 @@ support for ranges via a two-up month calendar view.
 See the [storybook docs and demo][] to get a feel for what it can do.
 
 [storybook docs and demo]:
-    https://acusti-uikit.netlify.app/?path=/docs/uikit-controls-datepicker-datepicker--docs
+    https://uikit.acusti.ca/?path=/docs/uikit-controls-datepicker-datepicker--docs
 
 ## Usage
 

package/dist/DatePicker.d.ts

@@ -8,7 +8,10 @@ export type Props = {
     isTwoUp?: boolean;
     monthLimitFirst?: number;
     monthLimitLast?: number;
-    onChange: (payload: { dateEnd?: null | string; dateStart: string }) => void;
+    onChange: (payload: {
+        dateEnd?: null | string;
+        dateStart: string;
+    }) => void;
     /**
      * Boolean to specify that date picker should initially render with the
      * end date’s month visible. The default behavior is to initially render
@@ -17,16 +20,4 @@ export type Props = {
     showEndInitially?: boolean;
     useMonthAbbreviations?: boolean;
 };
-export default function DatePicker({
-    className,
-    dateEnd: _dateEnd,
-    dateStart: _dateStart,
-    initialMonth,
-    isRange,
-    isTwoUp,
-    monthLimitFirst,
-    monthLimitLast,
-    onChange,
-    showEndInitially,
-    useMonthAbbreviations,
-}: Props): React.JSX.Element;
+export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, initialMonth, isRange, isTwoUp, monthLimitFirst, monthLimitLast, onChange, showEndInitially, useMonthAbbreviations, }: Props): React.JSX.Element;

package/dist/DatePicker.js

@@ -2,54 +2,29 @@
 import { Style } from '@acusti/styling';
 import clsx from 'clsx';
 import * as React from 'react';
-import MonthCalendar from './MonthCalendar.js';
-import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
-import {
-    getMonthAbbreviationFromMonth,
-    getMonthFromDate,
-    getYearFromMonth,
-} from './utils.js';
+import MonthCalendar from './MonthCalendar.tsx';
+import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.ts';
+import { getMonthAbbreviationFromMonth, getMonthFromDate, getYearFromMonth, } from './utils.ts';
 const { Fragment, useCallback, useEffect, useRef, useState } = React;
-const getAbbreviatedMonthTitle = (month) =>
-    `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
-export default function DatePicker({
-    className,
-    dateEnd: _dateEnd,
-    dateStart: _dateStart,
-    initialMonth,
-    isRange = _dateEnd != null,
-    isTwoUp,
-    monthLimitFirst,
-    monthLimitLast,
-    onChange,
-    showEndInitially,
-    useMonthAbbreviations,
-}) {
-    const dateEndFromProps =
-        _dateEnd != null && typeof _dateEnd !== 'string'
-            ? new Date(_dateEnd).toISOString()
-            : _dateEnd;
-    const dateStartFromProps =
-        _dateStart != null && typeof _dateStart !== 'string'
-            ? new Date(_dateStart).toISOString()
-            : _dateStart;
-    const [dateEnd, setDateEnd] = useState(
-        dateEndFromProps !== null && dateEndFromProps !== void 0
-            ? dateEndFromProps
-            : null,
-    );
-    const [dateStart, setDateStart] = useState(
-        dateStartFromProps !== null && dateStartFromProps !== void 0
-            ? dateStartFromProps
-            : null,
-    );
+const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, initialMonth, isRange = _dateEnd != null, isTwoUp, monthLimitFirst, monthLimitLast, onChange, showEndInitially, useMonthAbbreviations, }) {
+    const dateEndFromProps = _dateEnd != null && typeof _dateEnd !== 'string'
+        ? new Date(_dateEnd).toISOString()
+        : _dateEnd;
+    const dateStartFromProps = _dateStart != null && typeof _dateStart !== 'string'
+        ? new Date(_dateStart).toISOString()
+        : _dateStart;
+    const [dateEnd, setDateEnd] = useState(dateEndFromProps !== null && dateEndFromProps !== void 0 ? dateEndFromProps : null);
+    const [dateStart, setDateStart] = useState(dateStartFromProps !== null && dateStartFromProps !== void 0 ? dateStartFromProps : null);
     const updatingDateEndRef = useRef(false);
     useEffect(() => {
-        if (dateEndFromProps == null) return;
+        if (dateEndFromProps == null)
+            return;
         setDateEnd(dateEndFromProps);
     }, [dateEndFromProps]);
     useEffect(() => {
-        if (dateStartFromProps == null) return;
+        if (dateStartFromProps == null)
+            return;
         setDateStart(dateStartFromProps);
     }, [dateStartFromProps]);
     if (initialMonth == null) {
@@ -57,9 +32,7 @@ export default function DatePicker({
         const useDateEnd = dateStart == null || Boolean(showEndInitially && dateEnd);
         // use date from props if set
         const initialDate = useDateEnd ? dateEnd : dateStart;
-        initialMonth = getMonthFromDate(
-            initialDate == null ? new Date() : new Date(initialDate),
-        );
+        initialMonth = getMonthFromDate(initialDate == null ? new Date() : new Date(initialDate));
         if (useDateEnd && isTwoUp) {
             initialMonth -= 1;
         }
@@ -71,111 +44,65 @@ export default function DatePicker({
         monthLimitLast -= 1;
     }
     const handleClickLeftArrow = useCallback(() => {
-        setMonth((existingMonth) =>
-            monthLimitFirst == null || existingMonth > monthLimitFirst
-                ? existingMonth - 1
-                : existingMonth,
-        );
+        setMonth((existingMonth) => monthLimitFirst == null || existingMonth > monthLimitFirst
+            ? existingMonth - 1
+            : existingMonth);
     }, [monthLimitFirst]);
     const handleClickRightArrow = useCallback(() => {
-        setMonth((existingMonth) =>
-            monthLimitLast == null || existingMonth < monthLimitLast
-                ? existingMonth + 1
-                : existingMonth,
-        );
+        setMonth((existingMonth) => monthLimitLast == null || existingMonth < monthLimitLast
+            ? existingMonth + 1
+            : existingMonth);
     }, [monthLimitLast]);
-    const handleChange = useCallback(
-        (date) => {
-            // If we last set the dateStart or we have a dateStart but no dateEnd, set dateEnd
-            if (
-                isRange &&
-                dateStart != null &&
-                (updatingDateEndRef.current || dateEnd == null)
-            ) {
-                // Ensure that dateEnd is after dateStart; if not, swap them
-                if (date < dateStart) {
-                    setDateStart(date);
-                    setDateEnd(dateStart);
-                    onChange({ dateEnd: dateStart, dateStart: date });
-                } else {
-                    setDateEnd(date);
-                    onChange({ dateEnd: date, dateStart });
-                }
-                updatingDateEndRef.current = false;
-            } else {
+    const handleChange = useCallback((date) => {
+        // If we last set the dateStart or we have a dateStart but no dateEnd, set dateEnd
+        if (isRange &&
+            dateStart != null &&
+            (updatingDateEndRef.current || dateEnd == null)) {
+            // Ensure that dateEnd is after dateStart; if not, swap them
+            if (date < dateStart) {
                 setDateStart(date);
-                setDateEnd(null);
-                if (isRange) {
-                    onChange({ dateEnd: null, dateStart: date });
-                    updatingDateEndRef.current = true;
-                } else {
-                    onChange({ dateStart: date });
-                }
+                setDateEnd(dateStart);
+                onChange({ dateEnd: dateStart, dateStart: date });
             }
-        },
-        [dateEnd, dateStart, isRange, onChange],
-    );
+            else {
+                setDateEnd(date);
+                onChange({ dateEnd: date, dateStart });
+            }
+            updatingDateEndRef.current = false;
+        }
+        else {
+            setDateStart(date);
+            setDateEnd(null);
+            if (isRange) {
+                onChange({ dateEnd: null, dateStart: date });
+                updatingDateEndRef.current = true;
+            }
+            else {
+                onChange({ dateStart: date });
+            }
+        }
+    }, [dateEnd, dateStart, isRange, onChange]);
     const handleChangeEndPreview = useCallback((date) => {
         setDateEndPreview(date);
     }, []);
-    return React.createElement(
-        Fragment,
-        null,
-        React.createElement(Style, { href: '@acusti/date-picker/DatePicker' }, STYLES),
-        React.createElement(
-            'div',
-            {
-                className: clsx(ROOT_CLASS_NAME, className, {
-                    'two-up': isTwoUp,
-                }),
-            },
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-range-arrow-wrap` },
-                React.createElement('div', {
-                    className: clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
+    return (React.createElement(Fragment, null,
+        React.createElement(Style, { href: "@acusti/date-picker/DatePicker" }, STYLES),
+        React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className, {
+                'two-up': isTwoUp,
+            }) },
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-range-arrow-wrap` },
+                React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
                         disabled: monthLimitFirst != null && month <= monthLimitFirst,
-                    }),
-                    onClick: handleClickLeftArrow,
-                }),
-                React.createElement('div', {
-                    className: clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
+                    }), onClick: handleClickLeftArrow }),
+                React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
                         disabled: monthLimitLast != null && month >= monthLimitLast,
-                    }),
-                    onClick: handleClickRightArrow,
-                }),
-            ),
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-month-container` },
-                React.createElement(MonthCalendar, {
-                    dateEnd: dateEnd,
-                    dateEndPreview: dateEndPreview,
-                    dateStart: dateStart,
-                    isRange: isRange,
-                    month: month,
-                    onChange: handleChange,
-                    onChangeEndPreview: handleChangeEndPreview,
-                    title: useMonthAbbreviations
+                    }), onClick: handleClickRightArrow })),
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-container` },
+                React.createElement(MonthCalendar, { dateEnd: dateEnd, dateEndPreview: dateEndPreview, dateStart: dateStart, isRange: isRange, month: month, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: useMonthAbbreviations
                         ? getAbbreviatedMonthTitle(month)
-                        : undefined,
-                }),
-                isTwoUp
-                    ? React.createElement(MonthCalendar, {
-                          dateEnd: dateEnd,
-                          dateEndPreview: dateEndPreview,
-                          dateStart: dateStart,
-                          isRange: isRange,
-                          month: month + 1,
-                          onChange: handleChange,
-                          onChangeEndPreview: handleChangeEndPreview,
-                          title: useMonthAbbreviations
-                              ? getAbbreviatedMonthTitle(month + 1)
-                              : undefined,
-                      })
-                    : null,
-            ),
-        ),
-    );
+                        : undefined }),
+                isTwoUp ? (React.createElement(MonthCalendar, { dateEnd: dateEnd, dateEndPreview: dateEndPreview, dateStart: dateStart, isRange: isRange, month: month + 1, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: useMonthAbbreviations
+                        ? getAbbreviatedMonthTitle(month + 1)
+                        : undefined })) : null))));
 }
-//# sourceMappingURL=DatePicker.js.map
+//# sourceMappingURL=DatePicker.js.map

package/dist/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/MonthCalendar.d.ts

@@ -10,14 +10,4 @@ export type Props = {
     onChangeEndPreview?: (date: string) => void;
     title?: string;
 };
-export default function MonthCalendar({
-    className,
-    dateEnd,
-    dateEndPreview,
-    dateStart,
-    isRange,
-    month,
-    onChange,
-    onChangeEndPreview,
-    title,
-}: Props): React.JSX.Element;
+export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }: Props): React.JSX.Element;

package/dist/MonthCalendar.js

@@ -1,32 +1,13 @@
 import { Style } from '@acusti/styling';
 import clsx from 'clsx';
 import * as React from 'react';
-import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
-import {
-    getDateFromMonthAndDay,
-    getLastDateFromMonth,
-    getMonthFromDate,
-    getMonthNameFromMonth,
-    getYearFromMonth,
-} from './utils.js';
+import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.ts';
+import { getDateFromMonthAndDay, getLastDateFromMonth, getMonthFromDate, getMonthNameFromMonth, getYearFromMonth, } from './utils.ts';
 const { Fragment, useCallback } = React;
 const DAYS = Array(7).fill(null);
-export default function MonthCalendar({
-    className,
-    dateEnd,
-    dateEndPreview,
-    dateStart,
-    isRange,
-    month,
-    onChange,
-    onChangeEndPreview,
-    title,
-}) {
+export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }) {
     const year = getYearFromMonth(month);
-    title =
-        title !== null && title !== void 0
-            ? title
-            : `${getMonthNameFromMonth(month)} ${year}`;
+    title = title !== null && title !== void 0 ? title : `${getMonthNameFromMonth(month)} ${year}`;
     const firstDate = getDateFromMonthAndDay(month, 1);
     const lastDate = getLastDateFromMonth(month);
     const totalDays = lastDate.getDate();
@@ -37,198 +18,88 @@ export default function MonthCalendar({
         dateStart,
         dateEnd,
         dateEndPreview,
-    ].reduce(
-        (acc, date, index) => {
-            if (date != null && !(date instanceof Date)) {
-                date = new Date(date);
-            }
-            if (date == null || Number.isNaN(date.getTime())) return acc;
-            const dateMonth = getMonthFromDate(date);
-            if (dateMonth < month) acc[index] = -1;
-            else if (dateMonth > month) acc[index] = totalDays + 1;
-            else acc[index] = date.getDate();
-            if (index === 1) {
-                const startDay = acc[index - 1];
-                const endDay = acc[index];
-                // Ensure that end date is after start date and swap them if not
-                if (startDay != null && endDay != null && startDay > endDay) {
-                    acc[index - 1] = endDay;
-                    acc[index] = startDay;
-                }
-            }
+    ].reduce((acc, date, index) => {
+        if (date != null && !(date instanceof Date)) {
+            date = new Date(date);
+        }
+        if (date == null || Number.isNaN(date.getTime()))
             return acc;
-        },
-        [null, null, null],
-    );
-    const handleClickDay = useCallback(
-        (event) => {
-            const { date } = event.currentTarget.dataset;
-            if (date && onChange) onChange(date);
-        },
-        [onChange],
-    );
-    const handleMouseEnterDay = useCallback(
-        (event) => {
-            if (isRange && onChangeEndPreview) {
-                const { date } = event.currentTarget.dataset;
-                if (date) onChangeEndPreview(date);
+        const dateMonth = getMonthFromDate(date);
+        if (dateMonth < month)
+            acc[index] = -1;
+        else if (dateMonth > month)
+            acc[index] = totalDays + 1;
+        else
+            acc[index] = date.getDate();
+        if (index === 1) {
+            const startDay = acc[index - 1];
+            const endDay = acc[index];
+            // Ensure that end date is after start date and swap them if not
+            if (startDay != null && endDay != null && startDay > endDay) {
+                acc[index - 1] = endDay;
+                acc[index] = startDay;
             }
-        },
-        [isRange, onChangeEndPreview],
-    );
-    return React.createElement(
-        Fragment,
-        null,
-        React.createElement(Style, { href: '@acusti/date-picker/MonthCalendar' }, STYLES),
-        React.createElement(
-            'div',
-            { className: clsx(ROOT_CLASS_NAME, className) },
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-month-title` },
-                React.createElement(
-                    'h3',
-                    { className: `${ROOT_CLASS_NAME}-month-title-text` },
-                    title,
-                ),
-            ),
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-month-week` },
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Su',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Mo',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Tu',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'We',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Th',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Fr',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Sa',
-                    ),
-                ),
-            ),
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-month-days` },
-                Array(Math.floor(daySpaces / 7))
-                    .fill(null)
-                    .map((_, weekIndex) =>
-                        React.createElement(
-                            'div',
-                            {
-                                className: `${ROOT_CLASS_NAME}-month-row`,
-                                key: `MonthRow-${weekIndex}`,
-                            },
-                            DAYS.map((__, dayIndex) => {
-                                dayIndex += weekIndex * 7;
-                                const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
-                                const isEmpty = dayNumber < 1 || dayNumber > totalDays;
-                                const date = isEmpty
-                                    ? null
-                                    : getDateFromMonthAndDay(month, dayNumber);
-                                const isAfterDateRangeStart =
-                                    dateRangeStartDay != null &&
-                                    dayNumber > dateRangeStartDay;
-                                const isBeforeDateRangeEnd =
-                                    (dateRangeEndDay == null &&
-                                        dateRangeEndPreviewDay != null &&
-                                        dayNumber < dateRangeEndPreviewDay) ||
-                                    (dateRangeEndDay != null &&
-                                        dayNumber < dateRangeEndDay);
-                                return React.createElement(
-                                    'button',
-                                    {
-                                        className: clsx(
-                                            `${ROOT_CLASS_NAME}-month-day-item`,
-                                            {
-                                                'end-date':
-                                                    !isEmpty &&
-                                                    dayNumber === dateRangeEndDay,
-                                                'is-empty': isEmpty,
-                                                'is-selected':
-                                                    !isEmpty &&
-                                                    isAfterDateRangeStart &&
-                                                    isBeforeDateRangeEnd,
-                                                'start-date':
-                                                    !isEmpty &&
-                                                    dayNumber === dateRangeStartDay,
-                                            },
-                                        ),
-                                        'data-date':
-                                            date === null || date === void 0
-                                                ? void 0
-                                                : date.toISOString(),
-                                        disabled: isEmpty,
-                                        key: `MonthDayItem-${dayNumber}`,
-                                        onClick: handleClickDay,
-                                        onMouseEnter: handleMouseEnterDay,
-                                        type: 'button',
-                                    },
-                                    isEmpty
-                                        ? null
-                                        : React.createElement(
-                                              'span',
-                                              { className: 'month-day-item-text' },
-                                              dayNumber,
-                                          ),
-                                );
-                            }),
-                        ),
-                    ),
-            ),
-        ),
-    );
+        }
+        return acc;
+    }, [null, null, null]);
+    const handleClickDay = useCallback((event) => {
+        const { date } = event.currentTarget.dataset;
+        if (date && onChange)
+            onChange(date);
+    }, [onChange]);
+    const handleMouseEnterDay = useCallback((event) => {
+        if (isRange && onChangeEndPreview) {
+            const { date } = event.currentTarget.dataset;
+            if (date)
+                onChangeEndPreview(date);
+        }
+    }, [isRange, onChangeEndPreview]);
+    return (React.createElement(Fragment, null,
+        React.createElement(Style, { href: "@acusti/date-picker/MonthCalendar" }, STYLES),
+        React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className) },
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-title` },
+                React.createElement("h3", { className: `${ROOT_CLASS_NAME}-month-title-text` }, title)),
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-week` },
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Su")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Mo")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Tu")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "We")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Th")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Fr")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Sa"))),
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-days` }, Array(Math.floor(daySpaces / 7))
+                .fill(null)
+                .map((_, weekIndex) => (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-row`, key: `MonthRow-${weekIndex}` }, DAYS.map((__, dayIndex) => {
+                dayIndex += weekIndex * 7;
+                const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
+                const isEmpty = dayNumber < 1 || dayNumber > totalDays;
+                const date = isEmpty
+                    ? null
+                    : getDateFromMonthAndDay(month, dayNumber);
+                const isAfterDateRangeStart = dateRangeStartDay != null &&
+                    dayNumber > dateRangeStartDay;
+                const isBeforeDateRangeEnd = (dateRangeEndDay == null &&
+                    dateRangeEndPreviewDay != null &&
+                    dayNumber < dateRangeEndPreviewDay) ||
+                    (dateRangeEndDay != null &&
+                        dayNumber < dateRangeEndDay);
+                return (React.createElement("button", { className: clsx(`${ROOT_CLASS_NAME}-month-day-item`, {
+                        'end-date': !isEmpty &&
+                            dayNumber === dateRangeEndDay,
+                        'is-empty': isEmpty,
+                        'is-selected': !isEmpty &&
+                            isAfterDateRangeStart &&
+                            isBeforeDateRangeEnd,
+                        'start-date': !isEmpty &&
+                            dayNumber === dateRangeStartDay,
+                    }), "data-date": date === null || date === void 0 ? void 0 : date.toISOString(), disabled: isEmpty, key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button" }, isEmpty ? null : (React.createElement("span", { className: "month-day-item-text" }, dayNumber))));
+            }))))))));
 }
-//# sourceMappingURL=MonthCalendar.js.map
+//# sourceMappingURL=MonthCalendar.js.map

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { default as DatePicker } from './DatePicker.js';
-export { default as MonthCalendar } from './MonthCalendar.js';
-export * from './utils.js';
+export { default as DatePicker } from './DatePicker.tsx';
+export { default as MonthCalendar } from './MonthCalendar.tsx';
+export * from './utils.ts';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { default as DatePicker } from './DatePicker.js';
-export { default as MonthCalendar } from './MonthCalendar.js';
-export * from './utils.js';
-//# sourceMappingURL=index.js.map
+export { default as DatePicker } from './DatePicker.tsx';
+export { default as MonthCalendar } from './MonthCalendar.tsx';
+export * from './utils.ts';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,cAAc,YAAY,CAAC"}

package/dist/styles/date-picker.d.ts

@@ -1,3 +1,2 @@
-export declare const ROOT_CLASS_NAME = 'uktdatepicker';
-export declare const STYLES =
-    '\n.uktdatepicker {\n    display: flex;\n    box-sizing: border-box;\n    padding: 40px 60px 60px;\n    flex: 1 1 auto;\n    position: relative;\n    max-width: 450px;\n}\n\n.uktdatepicker.two-up {\n    max-width: 820px;\n}\n\n.uktdatepicker-range-arrow-wrap {\n    position: absolute;\n    top: 30px;\n    left: 0px;\n    display: flex;\n    justify-content: space-between;\n    height: 0px;\n    width: 100%;\n    padding: 0px 60px;\n    box-sizing: border-box;\n}\n\n.uktdatepicker-range-arrow {\n    width: 35px;\n    height: 35px;\n    text-align: center;\n    cursor: pointer;\n}\n\n.uktdatepicker-range-arrow.disabled {\n    color: #ccc;\n    cursor: default;\n}\n\n.uktdatepicker-range-arrow:active {\n    transform: translateY(1px);\n}\n\n.uktdatepicker-range-arrow.left-arrow:after,\n.uktdatepicker-range-arrow.right-arrow:after {\n    content: "\u2039";\n    font-size: 24px;\n    line-height: 35px;\n    font-weight: bold;\n}\n\n.uktdatepicker-range-arrow.right-arrow:after {\n    content: "\u203A";\n}\n\n.uktdatepicker-month-container {\n    display: flex;\n    flex: 1 1 auto;\n    justify-content: space-between;\n}\n';
+export declare const ROOT_CLASS_NAME = "uktdatepicker";
+export declare const STYLES = "\n.uktdatepicker {\n    display: flex;\n    box-sizing: border-box;\n    padding: 40px 60px 60px;\n    flex: 1 1 auto;\n    position: relative;\n    max-width: 450px;\n}\n\n.uktdatepicker.two-up {\n    max-width: 820px;\n}\n\n.uktdatepicker-range-arrow-wrap {\n    position: absolute;\n    top: 30px;\n    left: 0px;\n    display: flex;\n    justify-content: space-between;\n    height: 0px;\n    width: 100%;\n    padding: 0px 60px;\n    box-sizing: border-box;\n}\n\n.uktdatepicker-range-arrow {\n    width: 35px;\n    height: 35px;\n    text-align: center;\n    cursor: pointer;\n}\n\n.uktdatepicker-range-arrow.disabled {\n    color: #ccc;\n    cursor: default;\n}\n\n.uktdatepicker-range-arrow:active {\n    transform: translateY(1px);\n}\n\n.uktdatepicker-range-arrow.left-arrow:after,\n.uktdatepicker-range-arrow.right-arrow:after {\n    content: \"\u2039\";\n    font-size: 24px;\n    line-height: 35px;\n    font-weight: bold;\n}\n\n.uktdatepicker-range-arrow.right-arrow:after {\n    content: \"\u203A\";\n}\n\n.uktdatepicker-month-container {\n    display: flex;\n    flex: 1 1 auto;\n    justify-content: space-between;\n}\n";

package/dist/styles/date-picker.js

@@ -59,4 +59,4 @@ export const STYLES = `
     justify-content: space-between;
 }
 `;
-//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=date-picker.js.map

package/dist/styles/month-calendar.d.ts

@@ -1,3 +1,2 @@
-export declare const ROOT_CLASS_NAME = 'uktmonthcalendar';
-export declare const STYLES =
-    '\n.uktmonthcalendar {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    box-sizing: border-box;\n    max-width: 325px;\n}\n\n.uktmonthcalendar-month-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    padding-bottom: 25px;\n}\n\nh3.uktmonthcalendar-month-title-text {\n    font-size: 18px;\n    line-height: 23px;\n    font-weight: 600;\n    color: #000;\n    margin: 0px;\n    text-align: center;\n}\n\n.uktmonthcalendar-month-week {\n    flex: 0 0 auto;\n    display: grid;\n    grid-column-gap: 0px;\n    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n    grid-auto-flow: dense;\n    box-sizing: border-box;\n    padding-bottom: 12px;\n}\n\n.uktmonthcalendar-month-week .week-day-item {\n    flex: 1 1 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.uktmonthcalendar-month-week span.week-day-item-text {\n    text-align: center;\n    font-size: 13px;\n    line-height: 21px;\n    margin: 0px;\n    color: #9a9a9a;\n}\n\n.uktmonthcalendar-month-days {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n}\n\n.uktmonthcalendar-month-row {\n    flex: 1 1 auto;\n    display: grid;\n    grid-column-gap: 0px;\n    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n    grid-auto-flow: dense;\n    margin-bottom: 1px;\n}\n\n.uktmonthcalendar-month-day-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    height: 46px;\n    width: 46px;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n}\n\n.uktmonthcalendar-month-day-item:disabled {\n    cursor: auto;\n}\n\n.uktmonthcalendar-month-day-item.is-selected {\n    background-color: #f8f8f8;\n}\n\n.uktmonthcalendar-month-day-item.start-date {\n    background-color: #f8f8f8;\n    border-top-left-radius: 50%;\n    border-bottom-left-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.start-date:after {\n    background-color: #000;\n    opacity: 1;\n    visibility: visible;\n}\n.uktmonthcalendar-month-day-item.start-date span.month-day-item-text {\n    color: #fff;\n}\n\n.uktmonthcalendar-month-day-item.end-date {\n    background-color: #f8f8f8;\n    border-top-right-radius: 50%;\n    border-bottom-right-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.end-date:after {\n    background-color: #000;\n    opacity: 1;\n    visibility: visible;\n}\n.uktmonthcalendar-month-day-item.end-date span.month-day-item-text {\n    color: #fff;\n}\n\n.uktmonthcalendar-month-day-item:hover:after {\n    opacity: 1;\n    visibility: visible;\n}\n\n.uktmonthcalendar-month-day-item:after {\n    content: "";\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    border-radius: 50%;\n    border: 1px solid #000;\n    width: 43px;\n    height: 43px;\n    transition: opacity 0.25s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n}\n\n.uktmonthcalendar-month-day-item.is-empty:after {\n    content: none;\n}\n\n.uktmonthcalendar-month-day-item span.month-day-item-text {\n    text-align: center;\n    font-size: 13px;\n    line-height: 21px;\n    margin: 0px;\n    color: #000;\n    position: relative;\n    z-index: 1;\n}\n';
+export declare const ROOT_CLASS_NAME = "uktmonthcalendar";
+export declare const STYLES = "\n.uktmonthcalendar {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    box-sizing: border-box;\n    max-width: 325px;\n}\n\n.uktmonthcalendar-month-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    padding-bottom: 25px;\n}\n\nh3.uktmonthcalendar-month-title-text {\n    font-size: 18px;\n    line-height: 23px;\n    font-weight: 600;\n    color: #000;\n    margin: 0px;\n    text-align: center;\n}\n\n.uktmonthcalendar-month-week {\n    flex: 0 0 auto;\n    display: grid;\n    grid-column-gap: 0px;\n    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n    grid-auto-flow: dense;\n    box-sizing: border-box;\n    padding-bottom: 12px;\n}\n\n.uktmonthcalendar-month-week .week-day-item {\n    flex: 1 1 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.uktmonthcalendar-month-week span.week-day-item-text {\n    text-align: center;\n    font-size: 13px;\n    line-height: 21px;\n    margin: 0px;\n    color: #9a9a9a;\n}\n\n.uktmonthcalendar-month-days {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n}\n\n.uktmonthcalendar-month-row {\n    flex: 1 1 auto;\n    display: grid;\n    grid-column-gap: 0px;\n    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n    grid-auto-flow: dense;\n    margin-bottom: 1px;\n}\n\n.uktmonthcalendar-month-day-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    height: 46px;\n    width: 46px;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n}\n\n.uktmonthcalendar-month-day-item:disabled {\n    cursor: auto;\n}\n\n.uktmonthcalendar-month-day-item.is-selected {\n    background-color: #f8f8f8;\n}\n\n.uktmonthcalendar-month-day-item.start-date {\n    background-color: #f8f8f8;\n    border-top-left-radius: 50%;\n    border-bottom-left-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.start-date:after {\n    background-color: #000;\n    opacity: 1;\n    visibility: visible;\n}\n.uktmonthcalendar-month-day-item.start-date span.month-day-item-text {\n    color: #fff;\n}\n\n.uktmonthcalendar-month-day-item.end-date {\n    background-color: #f8f8f8;\n    border-top-right-radius: 50%;\n    border-bottom-right-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.end-date:after {\n    background-color: #000;\n    opacity: 1;\n    visibility: visible;\n}\n.uktmonthcalendar-month-day-item.end-date span.month-day-item-text {\n    color: #fff;\n}\n\n.uktmonthcalendar-month-day-item:hover:after {\n    opacity: 1;\n    visibility: visible;\n}\n\n.uktmonthcalendar-month-day-item:after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    border-radius: 50%;\n    border: 1px solid #000;\n    width: 43px;\n    height: 43px;\n    transition: opacity 0.25s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n}\n\n.uktmonthcalendar-month-day-item.is-empty:after {\n    content: none;\n}\n\n.uktmonthcalendar-month-day-item span.month-day-item-text {\n    text-align: center;\n    font-size: 13px;\n    line-height: 21px;\n    margin: 0px;\n    color: #000;\n    position: relative;\n    z-index: 1;\n}\n";

package/dist/styles/month-calendar.js

@@ -151,4 +151,4 @@ h3.${ROOT_CLASS_NAME}-month-title-text {
     z-index: 1;
 }
 `;
-//# sourceMappingURL=month-calendar.js.map
+//# sourceMappingURL=month-calendar.js.map

package/dist/utils.d.ts

@@ -2,9 +2,5 @@ export declare const getMonthFromDate: (date: Date, asUTC?: boolean) => number;
 export declare const getYearFromMonth: (month: number) => number;
 export declare const getMonthNameFromMonth: (month: number) => string;
 export declare const getMonthAbbreviationFromMonth: (month: number) => string;
-export declare const getDateFromMonthAndDay: (
-    month: number,
-    day: number,
-    asUTC?: boolean,
-) => Date;
+export declare const getDateFromMonthAndDay: (month: number, day: number, asUTC?: boolean) => Date;
 export declare const getLastDateFromMonth: (month: number, asUTC?: boolean) => Date;

package/dist/utils.js

@@ -15,8 +15,7 @@ const MONTH_NAMES = [
     'November',
     'December',
 ];
-const getYearFromDate = (date, asUTC) =>
-    (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;
+const getYearFromDate = (date, asUTC) => (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;
 export const getMonthFromDate = (date, asUTC) => {
     const yearAsMonths = getYearFromDate(date, asUTC) * 12;
     return yearAsMonths + (asUTC ? date.getUTCMonth() : date.getMonth());
@@ -24,13 +23,16 @@ export const getMonthFromDate = (date, asUTC) => {
 export const getYearFromMonth = (month) => Math.floor(month / 12) + START_YEAR;
 export const getMonthNameFromMonth = (month) => {
     let index = month % 12;
-    if (Number.isNaN(index)) return '';
-    if (index < 0) index = 12 + index;
+    if (Number.isNaN(index))
+        return '';
+    if (index < 0)
+        index = 12 + index;
     return MONTH_NAMES[index];
 };
 export const getMonthAbbreviationFromMonth = (month) => {
     const monthName = getMonthNameFromMonth(month);
-    if (monthName === 'September') return 'Sept';
+    if (monthName === 'September')
+        return 'Sept';
     return monthName.substring(0, 3);
 };
 export const getDateFromMonthAndDay = (month, day, asUTC) => {
@@ -44,4 +46,4 @@ export const getLastDateFromMonth = (month, asUTC) => {
     // day 0 of the next month is the last day of the current month
     return getDateFromMonthAndDay(month + 1, 0, asUTC);
 };
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/utils.test.js

@@ -1,11 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import {
-    getDateFromMonthAndDay,
-    getLastDateFromMonth,
-    getMonthFromDate,
-    getMonthNameFromMonth,
-    getYearFromMonth,
-} from './utils.js';
+import { getDateFromMonthAndDay, getLastDateFromMonth, getMonthFromDate, getMonthNameFromMonth, getYearFromMonth, } from './utils.ts';
 const INVALID_DATE = new Date('');
 describe('@acusti/date-picker', () => {
     describe('utils', () => {
@@ -23,9 +17,7 @@ describe('@acusti/date-picker', () => {
                 expect(getMonthFromDate(date, true)).toBe(0);
                 // if test is run in a timezone behind UTC, ommitting asUTC returns -1
                 // if not, the month should be the same with or without asUTC flag
-                expect(getMonthFromDate(date)).toBe(
-                    date.getTimezoneOffset() >= 60 ? -1 : 0,
-                );
+                expect(getMonthFromDate(date)).toBe(date.getTimezoneOffset() >= 60 ? -1 : 0);
             });
             it('returns NaN for an Invalid Date', () => {
                 expect(getMonthFromDate(INVALID_DATE)).toBe(NaN);
@@ -33,20 +25,12 @@ describe('@acusti/date-picker', () => {
         });
         describe('getYearFromMonth', () => {
             it('returns the correct year for a post-unix epoch date', () => {
-                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(
-                    1970,
-                );
-                expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(
-                    2048,
-                );
+                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(1970);
+                expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(2048);
             });
             it('returns the correct year digit for a pre-unix epoch date', () => {
-                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(
-                    1969,
-                );
-                expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(
-                    100,
-                );
+                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(1969);
+                expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(100);
             });
             it('returns NaN for an Invalid Date', () => {
                 expect(getYearFromMonth(getMonthFromDate(INVALID_DATE))).toBe(NaN);
@@ -54,14 +38,10 @@ describe('@acusti/date-picker', () => {
         });
         describe('getMonthNameFromMonth', () => {
             it('returns the correct month name for a post-unix epoch month', () => {
-                expect(
-                    getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19))),
-                ).toBe('June');
+                expect(getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19)))).toBe('June');
             });
             it('returns the correct month name for a pre-unix epoch month', () => {
-                expect(
-                    getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2))),
-                ).toBe('June');
+                expect(getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toBe('June');
             });
             it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
                 expect(getMonthNameFromMonth(getMonthFromDate(INVALID_DATE))).toBe('');
@@ -69,76 +49,40 @@ describe('@acusti/date-picker', () => {
         });
         describe('getDateFromMonthAndDay', () => {
             it('returns the date of the specified day for a post-unix epoch month', () => {
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(2008, 2, 13)), 1),
-                ).toEqual(new Date(2008, 2, 1));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(1999, 11, 1)), 31),
-                ).toEqual(new Date(1999, 11, 31));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(2000, 0, 0)), 31),
-                ).toEqual(new Date(1999, 11, 31));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(2008, 2, 13)), 1)).toEqual(new Date(2008, 2, 1));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1999, 11, 1)), 31)).toEqual(new Date(1999, 11, 31));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(2000, 0, 0)), 31)).toEqual(new Date(1999, 11, 31));
             });
             it('returns the correct date for a pre-unix epoch month', () => {
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30),
-                ).toEqual(new Date(1865, 5, 30));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1),
-                ).toEqual(new Date(100, 11, 1));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30)).toEqual(new Date(1865, 5, 30));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1)).toEqual(new Date(100, 11, 1));
             });
             it('returns date for start of day as UTC time if asUTC is true', () => {
-                expect(
-                    getDateFromMonthAndDay(
-                        getMonthFromDate(new Date(1865, 5, 2)),
-                        30,
-                        true,
-                    ),
-                ).toEqual(new Date(Date.UTC(1865, 5, 30)));
-                expect(
-                    getDateFromMonthAndDay(
-                        getMonthFromDate(new Date(101, 0, 0)),
-                        1,
-                        true,
-                    ),
-                ).toEqual(new Date(Date.UTC(100, 11, 1)));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30, true)).toEqual(new Date(Date.UTC(1865, 5, 30)));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1, true)).toEqual(new Date(Date.UTC(100, 11, 1)));
             });
             it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
-                expect(getDateFromMonthAndDay(getMonthFromDate(INVALID_DATE), 1)).toEqual(
-                    INVALID_DATE,
-                );
+                expect(getDateFromMonthAndDay(getMonthFromDate(INVALID_DATE), 1)).toEqual(INVALID_DATE);
             });
         });
         describe('getLastDateFromMonth', () => {
             it('returns the date of the last day for a post-unix epoch month', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13))),
-                ).toEqual(new Date(2008, 2, 31));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13)))).toEqual(new Date(2008, 2, 31));
                 // february in a leap year
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23))),
-                ).toEqual(new Date(2024, 1, 29));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23)))).toEqual(new Date(2024, 1, 29));
                 // february in a non-leap year
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1))),
-                ).toEqual(new Date(1985, 1, 28));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1)))).toEqual(new Date(1985, 1, 28));
             });
             it('returns the correct date for a pre-unix epoch month', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2))),
-                ).toEqual(new Date(1865, 5, 30));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toEqual(new Date(1865, 5, 30));
             });
             it('returns date for start of day as UTC time if asUTC is true', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)), true),
-                ).toEqual(new Date(Date.UTC(1865, 5, 30)));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)), true)).toEqual(new Date(Date.UTC(1865, 5, 30)));
             });
             it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
-                expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(
-                    INVALID_DATE,
-                );
+                expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(INVALID_DATE);
             });
         });
     });
 });
-//# sourceMappingURL=utils.test.js.map
+//# sourceMappingURL=utils.test.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/date-picker",
-    "version": "0.8.1",
+    "version": "0.9.0",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/index.js",
@@ -45,15 +45,15 @@
         "@testing-library/dom": "^10.4.0",
         "@testing-library/react": "^16.1.0",
         "@testing-library/user-event": "^14.5.2",
-        "@types/react": "^19.0.2",
-        "happy-dom": "^15.11.7",
+        "@types/react": "^19.0.7",
+        "happy-dom": "^17.4.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "typescript": "5.7.3",
-        "vitest": "^2.1.8"
+        "vitest": "^3"
     },
     "dependencies": {
-        "@acusti/styling": "^1.0.1",
+        "@acusti/styling": "^0.7.2 || ^1.0.1",
         "clsx": "^2"
     },
     "peerDependencies": {