@trackunit/react-date-and-time-components 1.4.11 → 1.4.13

package/index.cjs.js

@@ -8,9 +8,8 @@ var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var react = require('react');
 var reactComponents = require('@trackunit/react-components');
 var sharedUtils = require('@trackunit/shared-utils');
-var reactDayPicker = require('react-day-picker');
+var Calendar = require('react-calendar');
 var tailwindMerge = require('tailwind-merge');
-var locale = require('date-fns/locale');
 var reactFormComponents = require('@trackunit/react-form-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var stringTs = require('string-ts');
@@ -138,75 +137,33 @@ const DateTimeHumanized = ({ value }) => {
     return (jsxRuntime.jsx(reactComponents.Tooltip, { label: jsxRuntime.jsx(DateTime, { format: tooltipFormat, value: value }), children: jsxRuntime.jsx(DateTime, { className: "underline decoration-neutral-300 decoration-dotted", fromNow: true, value: value }) }));
 };
 
-const localeLookup = {
-    en: locale.enGB,
-    "en-US": locale.enUS,
-    "en-GB": locale.enGB,
-    da: locale.da,
-    de: locale.de,
-    cs: locale.cs,
-    nl: locale.nl,
-    fr: locale.fr,
-    fi: locale.fi,
-    hu: locale.hu,
-    it: locale.it,
-    nb: locale.nb,
-    pl: locale.pl,
-    pt: locale.pt,
-    ru: locale.ru,
-    ro: locale.ro,
-    es: locale.es,
-    sv: locale.sv,
-    ja: locale.ja,
-    th: locale.th,
-};
-/**
- * A helper function to get the matching Locale object for a given language.
- *
- * @param {string} language The language to match
- * @returns {Locale} The corresponding Locale object
- */
-const useLocale = (language) => {
-    return localeLookup[language] || localeLookup.en || locale.enGB;
-};
-
-/**
- * The DayPicker component is used when the user needs to select a date.
- 
- * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {ReactElement} DayPicker component
- */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
-    const locale = useLocale(language);
-    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { className: tailwindMerge.twMerge("custom-day-picker", className), disabled: disabledDays, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, onDayClick: onDaySelect, selected: selectedDays }));
-};
-
 /**
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  *
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, timezone, cancelButtonLabel, onClose, }) => {
-    const [newRange, setNewRange] = react.useState(selectedDays ?? { from: undefined, to: undefined });
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, timezone, cancelButtonLabel, onClose, }) => {
+    const [newRange, setNewRange] = react.useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
-    const locale = useLocale(language);
+    const { subtract } = reactDateAndTimeHooks.useDateAndTime();
+    const calculateDateRange = useCalculateDateRange();
     react.useEffect(() => {
         if (selectedDays) {
             setNewRange(selectedDays);
         }
     }, [selectedDays]);
     const handleOnRangeSelect = react.useCallback((range) => {
-        if (range && range.from) {
-            if (range.to === undefined) {
-                setNewRange({ from: range.from, to: range.from });
+        if (range && range.start) {
+            if (range.end === undefined) {
+                setNewRange({ start: range.start, end: range.start });
             }
             else {
-                setNewRange({ from: range.from, to: range.to });
+                setNewRange({ start: range.start, end: range.end });
             }
         }
         else {
-            setNewRange({ from: undefined, to: undefined });
+            setNewRange({ start: undefined, end: undefined });
         }
     }, []);
     const handleCancel = react.useCallback(() => {
@@ -216,13 +173,47 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
         onClose && onClose();
     }, [selectedDays, onClose]);
     const clearSelectedDays = () => {
-        setNewRange({ from: undefined, to: undefined });
+        setNewRange({ start: undefined, end: undefined });
     };
     const handleApply = react.useCallback(() => {
         onRangeSelect && onRangeSelect(newRange);
         onClose && onClose();
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxRuntime.jsxs("div", { className: "flex w-min flex-col gap-4 p-2", children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: handleOnRangeSelect, selected: newRange }), jsxRuntime.jsxs("div", { className: "flex w-full gap-2", children: [jsxRuntime.jsx(reactComponents.Button, { className: "mr-auto", dataTestId: "range-popover-clear-button", onClick: clearSelectedDays, variant: "secondary", children: t("layout.actions.clear") }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "range-popover-cancel-button", onClick: () => handleCancel(), variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "range-popover-apply-button", disabled: !newRange.from || !newRange.to, onClick: () => handleApply(), children: t("layout.actions.apply") })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex w-min flex-col gap-4 p-2", "data-testid": dataTestId, children: [jsxRuntime.jsx(Calendar, { activeStartDate: newRange.start ?? undefined, allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
+                    if (Array.isArray(value) && value[0] && value[1]) {
+                        handleOnRangeSelect({ start: value[0], end: value[1] });
+                    }
+                }, selectRange: true, tileDisabled: ({ date, view }) => {
+                    if (view === "month") {
+                        if (typeof disabledDays === "function") {
+                            return disabledDays(date);
+                        }
+                        if (Array.isArray(disabledDays)) {
+                            return disabledDays.some(dateToCheck => {
+                                return dateToCheck.toDateString() === date.toDateString();
+                            });
+                        }
+                        if (typeof disabledDays === "object" && "after" in disabledDays && "before" in disabledDays) {
+                            return !(date.getTime() >
+                                (disabledDays.before ? subtract(disabledDays.before, 1, "days").getTime() : date.getTime()) &&
+                                date.getTime() < (disabledDays.after?.getTime() ?? date.getTime()));
+                        }
+                        if (typeof disabledDays === "object" && "furtherBackThanDays" in disabledDays) {
+                            const dateRange = calculateDateRange({
+                                direction: "last",
+                                count: disabledDays.furtherBackThanDays,
+                                unit: "day",
+                            });
+                            if (dateRange.start && dateRange.end) {
+                                return date < dateRange.start || date > dateRange.end;
+                            }
+                        }
+                    }
+                    return false;
+                }, value: 
+                // type is wrong here if we add array of 2 elements if end is undefined and set to null it will not highlight the start date
+                // eslint-disable-next-line local-rules/no-typescript-assertion, @typescript-eslint/no-explicit-any
+                newRange.end ? [newRange.start ?? null, newRange.end ?? null] : (newRange.start ?? null) }), jsxRuntime.jsxs("div", { className: "flex w-full gap-2", children: [jsxRuntime.jsx(reactComponents.Button, { className: "mr-auto", dataTestId: "range-popover-clear-button", onClick: clearSelectedDays, variant: "secondary", children: t("layout.actions.clear") }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "range-popover-cancel-button", onClick: () => handleCancel(), variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "range-popover-apply-button", disabled: !newRange.start || !newRange.end, onClick: () => handleApply(), children: t("layout.actions.apply") })] })] }));
 };
 
 const temporalArithmeticTypeMapping = {
@@ -250,8 +241,8 @@ const useCalculateDateRange = () => {
             const endDate = add(nowDate, count, unitType);
             const adjustedEndDate = subtract(endDate, 1, "days");
             return {
-                from: startOf(nowDate, "day"),
-                to: endOf(adjustedEndDate, "day"),
+                start: startOf(nowDate, "day"),
+                end: endOf(adjustedEndDate, "day"),
             };
         }
         else {
@@ -259,8 +250,8 @@ const useCalculateDateRange = () => {
             const startDate = subtract(nowDate, count, unitType);
             const adjustedStartDate = add(startDate, 1, "days");
             return {
-                from: startOf(adjustedStartDate, "day"),
-                to: endOf(nowDate, "day"),
+                start: startOf(adjustedStartDate, "day"),
+                end: endOf(nowDate, "day"),
             };
         }
     }, [nowDate, startOf, endOf, subtract, add]);
@@ -386,8 +377,8 @@ const useFilterTemporalPeriodsInRange = () => {
     const { difference } = reactDateAndTimeHooks.useDateAndTime();
     const calculateDateRange = useCalculateDateRange();
     const getDayCountInRange = react.useCallback((temporalPeriod) => {
-        const { from, to } = calculateDateRange(temporalPeriod);
-        return difference(from, to, "day");
+        const { start, end } = calculateDateRange(temporalPeriod);
+        return difference(start ?? new Date(), end ?? new Date(), "day");
     }, [calculateDateRange, difference]);
     return react.useCallback(({ temporalPeriods, maxDaysInRange, }) => {
         if (!maxDaysInRange) {
@@ -516,9 +507,9 @@ const createTemporalPeriodCombinations = ({ direction, count, unit, }) => {
  * formatCustomDateRangeLabel({ from: new Date("2025-06-16"), to: new Date("2025-06-17") }); // "June 16, 2025 - June 17, 2025"
  */
 const formatCustomDateRangeLabel = (dateRange) => {
-    return (dateAndTimeUtils.formatDateUtil(dateRange.from, { dateFormat: "medium", selectFormat: "dateOnly" }) +
+    return (dateAndTimeUtils.formatDateUtil(dateRange.start ?? new Date(), { dateFormat: "medium", selectFormat: "dateOnly" }) +
         " - " +
-        dateAndTimeUtils.formatDateUtil(dateRange.to, { dateFormat: "medium", selectFormat: "dateOnly" }));
+        dateAndTimeUtils.formatDateUtil(dateRange.end ?? new Date(), { dateFormat: "medium", selectFormat: "dateOnly" }));
 };
 
 /**
@@ -614,13 +605,13 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
         onRangeSelect(value);
     }, [onRangeSelect]);
     const handleCustomDateRangeSelect = react.useCallback((dateRange, closeMenu) => {
-        if (!dateRange || !dateRange.from || !dateRange.to) {
+        if (!dateRange || !dateRange.start || !dateRange.end) {
             handleReset();
             return;
         }
         closeMenu();
         const _selectedDateRange = {
-            dateRange: { from: dateRange.from, to: dateRange.to },
+            dateRange: { start: dateRange.start, end: dateRange.end },
             temporalPeriod: undefined,
         };
         setSelectedRange(_selectedDateRange);
@@ -629,10 +620,58 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
     return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), dataTestId: dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "secondary" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { dataTestId: dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
                     return !isCustomDateRangeOpen ? (jsxRuntime.jsxs(reactComponents.MenuList, { className: "min-w-[280px]", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsxRuntime.jsx(reactFormComponents.Search, { className: "w-full", dataTestId: dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
                                             ? t("input.placeholder.customRange.last")
-                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, jsxRuntime.jsx(reactComponents.Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsxRuntime.jsx("hr", { className: "border-secondary-200 my-1", role: "separator" }), jsxRuntime.jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isCustomDateRangeSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null, jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsxRuntime.jsx(reactComponents.Card, { children: jsxRuntime.jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", max: maxDaysInRange, onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange, closeMenu), selectedDays: currentSelectedRange?.dateRange, timezone: timezone }) }));
+                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, jsxRuntime.jsx(reactComponents.Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsxRuntime.jsx("hr", { className: "border-secondary-200 my-1", role: "separator" }), jsxRuntime.jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxRuntime.jsxs("section", { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isCustomDateRangeSelected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: "small" }) : null, jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsxRuntime.jsx(reactComponents.Card, { children: jsxRuntime.jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
+                                ? {
+                                    start: dateRange.start ?? undefined,
+                                    end: dateRange.end ?? undefined,
+                                }
+                                : undefined, closeMenu), selectedDays: currentSelectedRange?.dateRange, timezone: timezone }) }));
                 } })] }));
 };
 
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ 
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {React.ReactElement} DayPicker component
+ */
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, dataTestId, }) => {
+    const { subtract } = reactDateAndTimeHooks.useDateAndTime();
+    const calculateDateRange = useCalculateDateRange();
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, children: jsxRuntime.jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
+                if (value) {
+                    onDaySelect && onDaySelect(value);
+                }
+            }, selectRange: false, tileDisabled: ({ date, view }) => {
+                if (view === "month") {
+                    if (typeof disabledDays === "function") {
+                        return disabledDays(date);
+                    }
+                    if (Array.isArray(disabledDays)) {
+                        return disabledDays.some(dateToCheck => {
+                            return dateToCheck instanceof Date && dateToCheck.toDateString() === date.toDateString();
+                        });
+                    }
+                    if (typeof disabledDays === "object" && "after" in disabledDays && "before" in disabledDays) {
+                        return !(date.getTime() >
+                            (disabledDays.before ? subtract(disabledDays.before, 1, "days").getTime() : date.getTime()) &&
+                            date.getTime() < (disabledDays.after?.getTime() ?? date.getTime()));
+                    }
+                    if (typeof disabledDays === "object" && "furtherBackThanDays" in disabledDays) {
+                        const dateRange = calculateDateRange({
+                            direction: "last",
+                            count: disabledDays.furtherBackThanDays,
+                            unit: "day",
+                        });
+                        if (dateRange.start && dateRange.end) {
+                            return date < dateRange.start || date > dateRange.end;
+                        }
+                    }
+                }
+                return false;
+            }, value: selectedDay ?? null }) }));
+};
+
 const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "group/timeline",

package/index.esm.js

@@ -1,14 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { toDateUtil, formatDateUtil, isEqualUtil, timeSinceAuto, getHourCycle } from '@trackunit/date-and-time-utils';
-import { useLocale as useLocale$1, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
+import { useLocale, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
 import { color } from '@trackunit/ui-design-tokens';
 import { useMemo, useCallback, useState, useEffect, useRef, Children, isValidElement } from 'react';
 import { Tooltip, Button, MenuItem, Icon, Popover, PopoverTrigger, PopoverContent, MenuList, MenuDivider, Card, Text } from '@trackunit/react-components';
 import { DateTimeFormat, nonNullable, objectKeys } from '@trackunit/shared-utils';
-import { DayPicker as DayPicker$1 } from 'react-day-picker';
+import Calendar from 'react-calendar';
 import { twMerge } from 'tailwind-merge';
-import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
 import { Search } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { lowerCase } from 'string-ts';
@@ -107,7 +106,7 @@ const MS_PER_HOUR = 60 * 60 * 1000;
  */
 const DateTime = ({ value, format, className, fromNow, withTitle, titleFormat, timezone, subtle, calendar, }) => {
     const { t } = useTranslation();
-    const locale = useLocale$1();
+    const locale = useLocale();
     const nowDate = useMemo(() => new Date(), []);
     const date = value ? toDateUtil(value) : nowDate;
     const newDateTime = formatDateUtil(date, format, timezone?.id, locale);
@@ -136,75 +135,33 @@ const DateTimeHumanized = ({ value }) => {
     return (jsx(Tooltip, { label: jsx(DateTime, { format: tooltipFormat, value: value }), children: jsx(DateTime, { className: "underline decoration-neutral-300 decoration-dotted", fromNow: true, value: value }) }));
 };
 
-const localeLookup = {
-    en: enGB,
-    "en-US": enUS,
-    "en-GB": enGB,
-    da,
-    de,
-    cs,
-    nl,
-    fr,
-    fi,
-    hu,
-    it,
-    nb,
-    pl,
-    pt,
-    ru,
-    ro,
-    es,
-    sv,
-    ja,
-    th,
-};
-/**
- * A helper function to get the matching Locale object for a given language.
- *
- * @param {string} language The language to match
- * @returns {Locale} The corresponding Locale object
- */
-const useLocale = (language) => {
-    return localeLookup[language] || localeLookup.en || enGB;
-};
-
-/**
- * The DayPicker component is used when the user needs to select a date.
- 
- * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {ReactElement} DayPicker component
- */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }) => {
-    const locale = useLocale(language);
-    return (jsx(DayPicker$1, { className: twMerge("custom-day-picker", className), disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, onDayClick: onDaySelect, selected: selectedDays }));
-};
-
 /**
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  *
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, timezone, cancelButtonLabel, onClose, }) => {
-    const [newRange, setNewRange] = useState(selectedDays ?? { from: undefined, to: undefined });
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, timezone, cancelButtonLabel, onClose, }) => {
+    const [newRange, setNewRange] = useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
-    const locale = useLocale(language);
+    const { subtract } = useDateAndTime();
+    const calculateDateRange = useCalculateDateRange();
     useEffect(() => {
         if (selectedDays) {
             setNewRange(selectedDays);
         }
     }, [selectedDays]);
     const handleOnRangeSelect = useCallback((range) => {
-        if (range && range.from) {
-            if (range.to === undefined) {
-                setNewRange({ from: range.from, to: range.from });
+        if (range && range.start) {
+            if (range.end === undefined) {
+                setNewRange({ start: range.start, end: range.start });
             }
             else {
-                setNewRange({ from: range.from, to: range.to });
+                setNewRange({ start: range.start, end: range.end });
             }
         }
         else {
-            setNewRange({ from: undefined, to: undefined });
+            setNewRange({ start: undefined, end: undefined });
         }
     }, []);
     const handleCancel = useCallback(() => {
@@ -214,13 +171,47 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
         onClose && onClose();
     }, [selectedDays, onClose]);
     const clearSelectedDays = () => {
-        setNewRange({ from: undefined, to: undefined });
+        setNewRange({ start: undefined, end: undefined });
     };
     const handleApply = useCallback(() => {
         onRangeSelect && onRangeSelect(newRange);
         onClose && onClose();
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxs("div", { className: "flex w-min flex-col gap-4 p-2", children: [jsx(DayPicker$1, { className: twMerge("custom-day-picker", "range-picker", className, "p-0"), defaultMonth: selectedDays ? selectedDays.from : undefined, disabled: disabledDays, footer: jsx("div", { "data-testid": dataTestId }), locale: locale, max: max, mode: "range", onSelect: handleOnRangeSelect, selected: newRange }), jsxs("div", { className: "flex w-full gap-2", children: [jsx(Button, { className: "mr-auto", dataTestId: "range-popover-clear-button", onClick: clearSelectedDays, variant: "secondary", children: t("layout.actions.clear") }), jsx(Button, { dataTestId: "range-popover-cancel-button", onClick: () => handleCancel(), variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsx(Button, { dataTestId: "range-popover-apply-button", disabled: !newRange.from || !newRange.to, onClick: () => handleApply(), children: t("layout.actions.apply") })] })] }));
+    return (jsxs("div", { className: "flex w-min flex-col gap-4 p-2", "data-testid": dataTestId, children: [jsx(Calendar, { activeStartDate: newRange.start ?? undefined, allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
+                    if (Array.isArray(value) && value[0] && value[1]) {
+                        handleOnRangeSelect({ start: value[0], end: value[1] });
+                    }
+                }, selectRange: true, tileDisabled: ({ date, view }) => {
+                    if (view === "month") {
+                        if (typeof disabledDays === "function") {
+                            return disabledDays(date);
+                        }
+                        if (Array.isArray(disabledDays)) {
+                            return disabledDays.some(dateToCheck => {
+                                return dateToCheck.toDateString() === date.toDateString();
+                            });
+                        }
+                        if (typeof disabledDays === "object" && "after" in disabledDays && "before" in disabledDays) {
+                            return !(date.getTime() >
+                                (disabledDays.before ? subtract(disabledDays.before, 1, "days").getTime() : date.getTime()) &&
+                                date.getTime() < (disabledDays.after?.getTime() ?? date.getTime()));
+                        }
+                        if (typeof disabledDays === "object" && "furtherBackThanDays" in disabledDays) {
+                            const dateRange = calculateDateRange({
+                                direction: "last",
+                                count: disabledDays.furtherBackThanDays,
+                                unit: "day",
+                            });
+                            if (dateRange.start && dateRange.end) {
+                                return date < dateRange.start || date > dateRange.end;
+                            }
+                        }
+                    }
+                    return false;
+                }, value: 
+                // type is wrong here if we add array of 2 elements if end is undefined and set to null it will not highlight the start date
+                // eslint-disable-next-line local-rules/no-typescript-assertion, @typescript-eslint/no-explicit-any
+                newRange.end ? [newRange.start ?? null, newRange.end ?? null] : (newRange.start ?? null) }), jsxs("div", { className: "flex w-full gap-2", children: [jsx(Button, { className: "mr-auto", dataTestId: "range-popover-clear-button", onClick: clearSelectedDays, variant: "secondary", children: t("layout.actions.clear") }), jsx(Button, { dataTestId: "range-popover-cancel-button", onClick: () => handleCancel(), variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsx(Button, { dataTestId: "range-popover-apply-button", disabled: !newRange.start || !newRange.end, onClick: () => handleApply(), children: t("layout.actions.apply") })] })] }));
 };
 
 const temporalArithmeticTypeMapping = {
@@ -248,8 +239,8 @@ const useCalculateDateRange = () => {
             const endDate = add(nowDate, count, unitType);
             const adjustedEndDate = subtract(endDate, 1, "days");
             return {
-                from: startOf(nowDate, "day"),
-                to: endOf(adjustedEndDate, "day"),
+                start: startOf(nowDate, "day"),
+                end: endOf(adjustedEndDate, "day"),
             };
         }
         else {
@@ -257,8 +248,8 @@ const useCalculateDateRange = () => {
             const startDate = subtract(nowDate, count, unitType);
             const adjustedStartDate = add(startDate, 1, "days");
             return {
-                from: startOf(adjustedStartDate, "day"),
-                to: endOf(nowDate, "day"),
+                start: startOf(adjustedStartDate, "day"),
+                end: endOf(nowDate, "day"),
             };
         }
     }, [nowDate, startOf, endOf, subtract, add]);
@@ -384,8 +375,8 @@ const useFilterTemporalPeriodsInRange = () => {
     const { difference } = useDateAndTime();
     const calculateDateRange = useCalculateDateRange();
     const getDayCountInRange = useCallback((temporalPeriod) => {
-        const { from, to } = calculateDateRange(temporalPeriod);
-        return difference(from, to, "day");
+        const { start, end } = calculateDateRange(temporalPeriod);
+        return difference(start ?? new Date(), end ?? new Date(), "day");
     }, [calculateDateRange, difference]);
     return useCallback(({ temporalPeriods, maxDaysInRange, }) => {
         if (!maxDaysInRange) {
@@ -514,9 +505,9 @@ const createTemporalPeriodCombinations = ({ direction, count, unit, }) => {
  * formatCustomDateRangeLabel({ from: new Date("2025-06-16"), to: new Date("2025-06-17") }); // "June 16, 2025 - June 17, 2025"
  */
 const formatCustomDateRangeLabel = (dateRange) => {
-    return (formatDateUtil(dateRange.from, { dateFormat: "medium", selectFormat: "dateOnly" }) +
+    return (formatDateUtil(dateRange.start ?? new Date(), { dateFormat: "medium", selectFormat: "dateOnly" }) +
         " - " +
-        formatDateUtil(dateRange.to, { dateFormat: "medium", selectFormat: "dateOnly" }));
+        formatDateUtil(dateRange.end ?? new Date(), { dateFormat: "medium", selectFormat: "dateOnly" }));
 };
 
 /**
@@ -612,13 +603,13 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
         onRangeSelect(value);
     }, [onRangeSelect]);
     const handleCustomDateRangeSelect = useCallback((dateRange, closeMenu) => {
-        if (!dateRange || !dateRange.from || !dateRange.to) {
+        if (!dateRange || !dateRange.start || !dateRange.end) {
             handleReset();
             return;
         }
         closeMenu();
         const _selectedDateRange = {
-            dateRange: { from: dateRange.from, to: dateRange.to },
+            dateRange: { start: dateRange.start, end: dateRange.end },
             temporalPeriod: undefined,
         };
         setSelectedRange(_selectedDateRange);
@@ -627,10 +618,58 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
     return (jsxs(Popover, { onOpenStateChange: state => !state && setIsCustomDateRangeOpen(false), placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { className: cvaTriggerButton({ active: !!selectedDateRange, className }), dataTestId: dataTestId, disabled: disabled, fullWidth: fullWidth, prefix: jsx(Icon, { ariaLabel: t("input.icon.tooltip.calendar"), color: disabled ? "secondary" : selectedDateRange ? "primary" : undefined, name: "Calendar", size: size === "large" ? "medium" : "small" }), size: size, variant: "secondary", children: popoverTriggerLabel ?? t("trigger.selectDateRange") }) }), jsx(PopoverContent, { dataTestId: dataTestId ? `${dataTestId}-popover-content` : undefined, children: closeMenu => {
                     return !isCustomDateRangeOpen ? (jsxs(MenuList, { className: "min-w-[280px]", children: [jsxs("div", { className: "flex flex-col gap-1", children: [showDateRangeSearch ? (jsx(Search, { className: "w-full", dataTestId: dataTestId ? `${dataTestId}-search-input` : undefined, onChange: event => handleDateRangeSearch(event.target.value), onClear: () => handleDateRangeSearch(""), placeholder: allowedDirection === "last"
                                             ? t("input.placeholder.customRange.last")
-                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, jsx(Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsx("hr", { className: "border-secondary-200 my-1", role: "separator" }), jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxs("section", { children: [jsx(MenuDivider, {}), jsx(MenuItem, { dataTestId: dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxs(Fragment, { children: [isCustomDateRangeSelected ? jsx(Icon, { color: "primary", name: "Check", size: "small" }) : null, jsx(Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsx(Card, { children: jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", max: maxDaysInRange, onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange, closeMenu), selectedDays: currentSelectedRange?.dateRange, timezone: timezone }) }));
+                                            : t("input.placeholder.customRange.next"), value: dateRangeSearchValue })) : null, jsx(Button, { className: "ml-auto", dataTestId: dataTestId ? `${dataTestId}-reset-button` : undefined, disabled: !selectedDateRange, onClick: handleReset, size: "small", variant: "ghost", children: t("layout.actions.reset") })] }), jsx("hr", { className: "border-secondary-200 my-1", role: "separator" }), jsx(DayRangeSelectOptions, { dataTestId: dataTestId ? `${dataTestId}-options` : undefined, onSelect: value => handleOptionsSelect(value, closeMenu), selectedDateRange: currentSelectedRange, temporalPeriods: temporalPeriods }), showCustomDateRangeOption ? (jsxs("section", { children: [jsx(MenuDivider, {}), jsx(MenuItem, { dataTestId: dataTestId ? `${dataTestId}-custom-range` : undefined, label: t("trigger.customRange"), onClick: () => setIsCustomDateRangeOpen(true), selected: isCustomDateRangeSelected, suffix: jsxs(Fragment, { children: [isCustomDateRangeSelected ? jsx(Icon, { color: "primary", name: "Check", size: "small" }) : null, jsx(Icon, { name: "ChevronRight", size: "small" })] }) })] })) : null] })) : (jsx(Card, { children: jsx(DayRangePicker, { cancelButtonLabel: t("layout.actions.back"), disabledDays: customDateRangeDisabledDays, language: "en", onClose: () => setIsCustomDateRangeOpen(false), onRangeSelect: dateRange => handleCustomDateRangeSelect(dateRange
+                                ? {
+                                    start: dateRange.start ?? undefined,
+                                    end: dateRange.end ?? undefined,
+                                }
+                                : undefined, closeMenu), selectedDays: currentSelectedRange?.dateRange, timezone: timezone }) }));
                 } })] }));
 };
 
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ 
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {React.ReactElement} DayPicker component
+ */
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, dataTestId, }) => {
+    const { subtract } = useDateAndTime();
+    const calculateDateRange = useCalculateDateRange();
+    return (jsx("div", { "data-testid": dataTestId, children: jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
+                if (value) {
+                    onDaySelect && onDaySelect(value);
+                }
+            }, selectRange: false, tileDisabled: ({ date, view }) => {
+                if (view === "month") {
+                    if (typeof disabledDays === "function") {
+                        return disabledDays(date);
+                    }
+                    if (Array.isArray(disabledDays)) {
+                        return disabledDays.some(dateToCheck => {
+                            return dateToCheck instanceof Date && dateToCheck.toDateString() === date.toDateString();
+                        });
+                    }
+                    if (typeof disabledDays === "object" && "after" in disabledDays && "before" in disabledDays) {
+                        return !(date.getTime() >
+                            (disabledDays.before ? subtract(disabledDays.before, 1, "days").getTime() : date.getTime()) &&
+                            date.getTime() < (disabledDays.after?.getTime() ?? date.getTime()));
+                    }
+                    if (typeof disabledDays === "object" && "furtherBackThanDays" in disabledDays) {
+                        const dateRange = calculateDateRange({
+                            direction: "last",
+                            count: disabledDays.furtherBackThanDays,
+                            unit: "day",
+                        });
+                        if (dateRange.start && dateRange.end) {
+                            return date < dateRange.start || date > dateRange.end;
+                        }
+                    }
+                }
+                return false;
+            }, value: selectedDay ?? null }) }));
+};
+
 const cvaTimelineElement = cvaMerge([
     "flex",
     "group/timeline",
@@ -726,7 +765,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
     const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE);
     const [isLoadingMore, setIsLoadingMore] = useState(false);
     const { formatDate, formatRange } = useDateAndTime();
-    const locale = useLocale$1();
+    const locale = useLocale();
     const hourCycle = getHourCycle(locale);
     const { t } = useTranslation();
     const childrenArray = useMemo(() => Children.toArray(children), [children]);
@@ -799,7 +838,7 @@ const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, t
 const TimelineElement = ({ date, children, className, dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
     const [isHovered, setIsHovered] = useState(false);
     const { formatDate } = useDateAndTime();
-    const locale = useLocale$1();
+    const locale = useLocale();
     const formattedDate = date ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" }) : null;
     const handleMouseEnter = () => {
         if (hoverBehavior) {

package/package.json

@@ -1,27 +1,26 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=22.x"
   },
   "dependencies": {
-    "date-fns": "^2.30.0",
-    "react-day-picker": "9.5.1",
     "react": "19.0.0",
-    "@trackunit/react-components": "1.4.202",
-    "@trackunit/react-date-and-time-hooks": "1.3.195",
-    "@trackunit/date-and-time-utils": "1.3.165",
-    "@trackunit/css-class-variance-utilities": "1.3.165",
-    "@trackunit/ui-icons": "1.3.166",
-    "@trackunit/ui-design-tokens": "1.3.163",
-    "@trackunit/shared-utils": "1.5.165",
-    "@trackunit/i18n-library-translation": "1.3.189",
-    "@trackunit/react-test-setup": "1.0.55",
-    "@trackunit/react-form-components": "1.3.228",
+    "@trackunit/react-components": "1.4.204",
+    "@trackunit/react-date-and-time-hooks": "1.3.196",
+    "@trackunit/date-and-time-utils": "1.3.166",
+    "@trackunit/css-class-variance-utilities": "1.3.166",
+    "@trackunit/ui-icons": "1.3.167",
+    "@trackunit/ui-design-tokens": "1.3.164",
+    "@trackunit/shared-utils": "1.5.166",
+    "@trackunit/i18n-library-translation": "1.3.190",
+    "@trackunit/react-test-setup": "1.0.56",
+    "@trackunit/react-form-components": "1.3.230",
     "string-ts": "^2.0.0",
-    "tailwind-merge": "^2.0.0"
+    "tailwind-merge": "^2.0.0",
+    "react-calendar": "^6.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/DayPicker/DayPicker.d.ts

@@ -1,5 +1,14 @@
 import { CommonProps } from "@trackunit/react-components";
-import { DateRange, Matcher } from "react-day-picker";
+export type FurtherBackThanDays = {
+    /**
+     * This disables dates that are further back than the number of days specified from today.
+     */
+    furtherBackThanDays: number;
+};
+export type DisabledDaysMatcher = ((date: Date) => boolean) | {
+    before?: Date;
+    after?: Date;
+} | Array<Date> | FurtherBackThanDays;
 export interface DayPickerProps extends CommonProps {
     /**
      * A callback function for when a date is selected
@@ -8,24 +17,20 @@ export interface DayPickerProps extends CommonProps {
     /**
      * Define any days which may not be selected
      */
-    disabledDays?: Matcher | Array<Matcher>;
+    disabledDays?: DisabledDaysMatcher | Array<DisabledDaysMatcher>;
     /**
-     * Set any days which are selected
+     * Set any day which are selected
      */
-    selectedDays?: DateRange;
+    selectedDay?: Date;
     /**
      * Set the language
      */
     language: string;
-    /**
-     * The maximum amount of days that can be selected
-     */
-    max?: number;
 }
 /**
  * The DayPicker component is used when the user needs to select a date.
  
  * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {ReactElement} DayPicker component
+ * @returns {React.ReactElement} DayPicker component
  */
-export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDays, language, className, dataTestId, max, }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDay, language, className, dataTestId, }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;

package/src/DayPicker/DayRangePicker.d.ts

@@ -1,7 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
+import { DateRange } from "@trackunit/date-and-time-utils";
 import { ReactElement } from "react";
-import { DateRange, Matcher } from "react-day-picker";
-import { TimeZone } from "./index";
+import { DisabledDaysMatcher, TimeZone } from "./index";
 export interface DayRangePickerProps extends CommonProps {
     /**
      * A callback function for when a range is selected
@@ -10,7 +10,7 @@ export interface DayRangePickerProps extends CommonProps {
     /**
      * Define any days which may not be selected
      */
-    disabledDays?: Matcher | Array<Matcher>;
+    disabledDays?: DisabledDaysMatcher;
     /**
      * Set any days which are selected
      */
@@ -19,10 +19,6 @@ export interface DayRangePickerProps extends CommonProps {
      * Set the language
      */
     language: string;
-    /**
-     * The maximum amount of days that can be selected
-     */
-    max?: number;
     /**
      * Shown time ranges will take timezone into consideration
      */
@@ -42,4 +38,4 @@ export interface DayRangePickerProps extends CommonProps {
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, timezone, cancelButtonLabel, onClose, }: DayRangePickerProps) => ReactElement;

package/src/DayPicker/DayRangePicker.stories.d.ts

@@ -8,3 +8,4 @@ export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
 export declare const DefaultSDA: () => import("react/jsx-runtime").JSX.Element;
 export declare const VariantWithMax: () => import("react/jsx-runtime").JSX.Element;
 export declare const VariantWithDisabledDays: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariantWithDisableRange: () => import("react/jsx-runtime").JSX.Element;

package/src/DayRangeSelect/DayRangeSelect.d.ts

@@ -1,7 +1,8 @@
+import { DateRange } from "@trackunit/date-and-time-utils";
 import { CommonProps } from "@trackunit/react-components";
 import { Size } from "@trackunit/shared-utils";
 import { DayRangePickerProps } from "../DayPicker/DayRangePicker";
-import { DateRange, SelectedDateRange, TemporalDirection, TemporalPeriod } from "./types";
+import { SelectedDateRange, TemporalDirection, TemporalPeriod } from "./types";
 export type DayRangeSelectProps = CommonProps & {
     /**
      * Whether the component is disabled.

package/src/DayRangeSelect/hooks/useCalculateDateRange/useCalculateDateRange.d.ts

@@ -1,4 +1,5 @@
-import { DateRange, TemporalPeriod } from "../../types";
+import { DateRange } from "@trackunit/date-and-time-utils";
+import { TemporalPeriod } from "../../types";
 /**
  * Calculate a date range based on a temporal period.
  *

package/src/DayRangeSelect/types.d.ts

@@ -1,8 +1,5 @@
+import { DateRange } from "@trackunit/date-and-time-utils";
 import { TemporalArithmeticType, TemporalSameType } from "@trackunit/react-date-and-time-hooks";
-export type DateRange = {
-    from: Date;
-    to: Date;
-};
 export type TemporalUnit = Exclude<TemporalArithmeticType | TemporalSameType, "year" | "hours" | "minutes" | "years">;
 export type TemporalDirection = "next" | "last";
 export type TemporalPeriod = {

package/src/DayRangeSelect/utils/formatCustomDateRangeLabel/formatCustomDateRangeLabel.d.ts

@@ -1,4 +1,4 @@
-import { DateRange } from "../../types";
+import { DateRange } from "@trackunit/date-and-time-utils";
 /**
  * Format a label representing the provided date range.
  *

package/src/DayRangeSelect/utils/isTemporalPeriod/isTemporalPeriod.d.ts

@@ -1,4 +1,5 @@
-import { DateRange, TemporalPeriod } from "../../types";
+import { DateRange } from "@trackunit/date-and-time-utils";
+import { TemporalPeriod } from "../../types";
 /**
  * Check if a value is a temporal period.
  *

package/src/dateTime/DateTime.stories.d.ts

@@ -3,5 +3,5 @@ import { DateTime } from "./DateTime";
 type Story = StoryObj<typeof DateTime>;
 declare const meta: Meta<typeof DateTime>;
 export default meta;
-export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
 export declare const Default: Story;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;

package/src/DayPicker/useLocale.d.ts

@@ -1,8 +0,0 @@
-import { Locale } from "date-fns";
-/**
- * A helper function to get the matching Locale object for a given language.
- *
- * @param {string} language The language to match
- * @returns {Locale} The corresponding Locale object
- */
-export declare const useLocale: (language: string) => Locale;