@trackunit/react-form-components 1.18.15 → 1.18.17

package/index.cjs.js

@@ -4,8 +4,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var reactComponents = require('@trackunit/react-components');
-var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var react = require('react');
+var ReactCalendar = require('react-calendar');
+var tailwindMerge = require('tailwind-merge');
+var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var stringTs = require('string-ts');
 var usehooksTs = require('usehooks-ts');
@@ -13,7 +15,6 @@ var parsePhoneNumberFromString = require('libphonenumber-js');
 var ReactSelect = require('react-select');
 var ReactAsyncSelect = require('react-select/async');
 var esToolkit = require('es-toolkit');
-var tailwindMerge = require('tailwind-merge');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var sharedUtils = require('@trackunit/shared-utils');
@@ -26,6 +27,10 @@ var defaultTranslations = {
 	"colorField.error.INVALID_HEX_CODE": "Please enter a valid color before continuing.",
 	"colorField.error.REQUIRED": "This field is required",
 	"colorField.tooltip": "Select color",
+	"dateField.actions.apply": "Apply",
+	"dateField.actions.cancel": "Cancel",
+	"dateField.actions.clear": "Clear",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Drag-and-drop file input",
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",
@@ -102,6 +107,110 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
+/**
+ * Builds a synthetic change event for an input with a given value.
+ * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
+ * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
+ */
+function createInputChangeEvent(value, sourceInput) {
+    const target = document.createElement("input");
+    target.value = value;
+    if (sourceInput) {
+        target.name = sourceInput.name;
+        target.id = sourceInput.id;
+    }
+    const native = new Event("change", { bubbles: true });
+    return {
+        target,
+        currentTarget: target,
+        type: "change",
+        bubbles: native.bubbles,
+        cancelable: native.cancelable,
+        defaultPrevented: native.defaultPrevented,
+        eventPhase: native.eventPhase,
+        isTrusted: native.isTrusted,
+        nativeEvent: native,
+        timeStamp: native.timeStamp,
+        preventDefault: () => native.preventDefault(),
+        stopPropagation: () => native.stopPropagation(),
+        persist: () => {
+            return;
+        },
+        isDefaultPrevented: () => native.defaultPrevented,
+        isPropagationStopped: () => false,
+    };
+}
+
+const ISO_DATE_REGEX = /^(\d{4})-(\d{2})-(\d{2})$/;
+function parseAndValidateYYYYMMDD(value) {
+    if (value === "")
+        return null;
+    const isoMatch = ISO_DATE_REGEX.exec(value);
+    if (!isoMatch)
+        return null;
+    const [, y, m, d] = isoMatch;
+    if (y === undefined || m === undefined || d === undefined)
+        return null;
+    const year = Number.parseInt(y, 10);
+    const month = Number.parseInt(m, 10) - 1;
+    const day = Number.parseInt(d, 10);
+    if (month < 0 || month > 11 || day < 1 || day > 31)
+        return null;
+    const local = new Date(year, month, day);
+    if (Number.isNaN(local.getTime()))
+        return null;
+    if (local.getFullYear() !== year || local.getMonth() !== month || local.getDate() !== day) {
+        return null;
+    }
+    return { year, month: month + 1, day };
+}
+/**
+ * Parses the value from a DateField change event (YYYY-MM-DD string) to a Date at local midnight.
+ * Use this when you need a Date from event.target.value to avoid timezone shifts that occur
+ * with `new Date(value)` (which interprets the string as UTC).
+ *
+ * @param value - The string from event.target.value (e.g. "2025-03-07" or "")
+ * @returns {Date | null} - Date at local midnight for the given day, or null if value is empty or invalid
+ */
+function parseDateFieldValue(value) {
+    const parsed = parseAndValidateYYYYMMDD(value);
+    if (!parsed)
+        return null;
+    return new Date(parsed.year, parsed.month - 1, parsed.day);
+}
+/**
+ * Converts a YYYY-MM-DD string (e.g. from DateField) to an ISO string at UTC midnight for that calendar day.
+ * Use this when storing or sending date-only values so that the calendar day is preserved regardless of
+ * user timezone (unlike calling .toISOString() on a local-midnight Date, which shifts the day for UTC+).
+ *
+ * @param value - The string from event.target.value (e.g. "2025-03-07" or "")
+ * @returns {string | null} - "YYYY-MM-DDT00:00:00.000Z" or null if value is empty or invalid
+ */
+function toISODateStringUTC(value) {
+    const parsed = parseAndValidateYYYYMMDD(value);
+    if (!parsed)
+        return null;
+    const { year, month, day } = parsed;
+    const mm = String(month).padStart(2, "0");
+    const dd = String(day).padStart(2, "0");
+    return `${year}-${mm}-${dd}T00:00:00.000Z`;
+}
+/**
+ * Converts a Date (e.g. at local midnight) to an ISO string at UTC midnight for the same calendar day.
+ * Use when sending a date-only value to an API that expects UTC midnight (e.g. booking date).
+ *
+ * @param date - A Date instance (typically local midnight from a date picker)
+ * @returns {string} "YYYY-MM-DDT00:00:00.000Z" for that calendar day
+ */
+function dateToISODateUTC(date) {
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const mm = String(month).padStart(2, "0");
+    const dd = String(day).padStart(2, "0");
+    return `${year}-${mm}-${dd}T00:00:00.000Z`;
+}
+
 const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
     "component-baseInput-shadow",
     "component-baseInput-border",
@@ -487,26 +596,136 @@ const BaseInput = ({ className, isInvalid = false, "data-testid": dataTestId, pr
 };
 BaseInput.displayName = "BaseInput";
 
+function parseToDate(v) {
+    if (v === undefined || v === "")
+        return undefined;
+    if (v instanceof Date)
+        return v;
+    if (typeof v === "number") {
+        const d = new Date(v);
+        return Number.isNaN(d.getTime()) ? undefined : d;
+    }
+    const str = String(v);
+    const fromField = parseDateFieldValue(str);
+    if (fromField !== null)
+        return fromField;
+    const fallback = new Date(str);
+    return Number.isNaN(fallback.getTime()) ? undefined : fallback;
+}
+function formatToInputString(d) {
+    if (!d)
+        return "";
+    return dateAndTimeUtils.Temporal.PlainDateTime.from({
+        year: d.getFullYear(),
+        month: d.getMonth() + 1,
+        day: d.getDate(),
+    })
+        .toPlainDate()
+        .toString();
+}
+function startOfDayMs(d) {
+    return dateAndTimeUtils.toDateUtil(dateAndTimeUtils.startOfDayUtil(d)).getTime();
+}
+/** Clamp a date to [minDate, maxDate]; returns the same date if in range or no bounds. */
+function clampToRange(date, minDate, maxDate) {
+    if (date === null || date === undefined)
+        return null;
+    const dayStart = startOfDayMs(date);
+    if (minDate !== undefined && dayStart < startOfDayMs(minDate))
+        return minDate;
+    if (maxDate !== undefined && dayStart > startOfDayMs(maxDate))
+        return maxDate;
+    return date;
+}
 /**
- * A wrapper around BaseInput with a pop-up day picker.
+ * A wrapper around BaseInput with a pop-up day picker using the same calendar UI as DayPicker.
  *
  * The value is formatted to an ISO date string (YYYY-MM-DD)
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-const DateBaseInput = ({ min, max, defaultValue, value, ref, ...rest }) => {
-    const formatDateToInputString = (date) => date instanceof Date
-        ? dateAndTimeUtils.Temporal.PlainDateTime.from({
-            year: date.getFullYear(),
-            month: date.getMonth() + 1,
-            day: date.getDate(),
-        })
-            .toPlainDate()
-            .toString()
-        : date;
-    // Chrome and Firefox need their default icon to have datepicker functionality.
-    const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsxRuntime.jsx(BaseInput, { defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value), ...rest }));
+const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, ...rest }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = react.useState(() => formatToInputString(parseToDate(defaultValue)));
+    const [pendingDate, setPendingDate] = react.useState(null);
+    // For controlled string value, only normalize when it's strict YYYY-MM-DD so partial input (e.g. "2025-03") is preserved.
+    const resolvedValue = isControlled
+        ? typeof value === "string"
+            ? (() => {
+                const strict = parseDateFieldValue(value);
+                return strict !== null ? formatToInputString(strict) : value;
+            })()
+            : formatToInputString(parseToDate(value))
+        : internalValue;
+    const selectedDate = isControlled && typeof value === "string"
+        ? (parseDateFieldValue(value) ?? undefined)
+        : parseToDate(isControlled ? value : internalValue);
+    const inputRef = react.useRef(null);
+    const [t] = useTranslation();
+    react.useImperativeHandle(ref, () => inputRef.current ?? document.createElement("input"), []);
+    const syncPendingFromValue = react.useCallback(() => {
+        setPendingDate(selectedDate ?? null);
+    }, [selectedDate]);
+    const tileDisabled = react.useCallback(({ date, view }) => {
+        if (view !== "month")
+            return false;
+        const minDate = parseToDate(min);
+        const maxDate = parseToDate(max);
+        const dayStart = startOfDayMs(date);
+        if (minDate !== undefined && dayStart < startOfDayMs(minDate))
+            return true;
+        if (maxDate !== undefined && dayStart > startOfDayMs(maxDate))
+            return true;
+        return false;
+    }, [min, max]);
+    const handleCalendarChange = react.useCallback((next) => {
+        setPendingDate(next);
+    }, []);
+    const handleClear = react.useCallback((closePopover) => {
+        setPendingDate(null);
+        if (!isControlled)
+            setInternalValue("");
+        onChange?.(createInputChangeEvent("", inputRef.current));
+        closePopover();
+    }, [isControlled, onChange]);
+    const handleCancel = react.useCallback((closePopover) => {
+        closePopover();
+    }, []);
+    const handleApply = react.useCallback((closePopover) => {
+        const minDate = parseToDate(min);
+        const maxDate = parseToDate(max);
+        const clamped = clampToRange(pendingDate, minDate, maxDate);
+        const str = clamped ? formatToInputString(clamped) : "";
+        if (!isControlled)
+            setInternalValue(str);
+        onChange?.(createInputChangeEvent(str, inputRef.current));
+        closePopover();
+    }, [isControlled, min, max, onChange, pendingDate]);
+    const handleInputChange = react.useCallback((e) => {
+        const raw = e.target.value;
+        const parsed = parseDateFieldValue(raw);
+        const minDate = parseToDate(min);
+        const maxDate = parseToDate(max);
+        if (parsed !== null) {
+            const clamped = clampToRange(parsed, minDate, maxDate);
+            const str = clamped ? formatToInputString(clamped) : "";
+            if (!isControlled)
+                setInternalValue(str);
+            onChange?.(createInputChangeEvent(str, inputRef.current));
+        }
+        else {
+            if (!isControlled)
+                setInternalValue(raw);
+            onChange?.(e);
+        }
+    }, [isControlled, min, max, onChange]);
+    return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: open => open && syncPendingFromValue(), placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex w-full min-w-0 cursor-pointer items-center", (Boolean(rest.disabled) || Boolean(rest.readOnly)) && "pointer-events-none"), children: jsxRuntime.jsx(BaseInput, { ...rest, "aria-readonly": true, className: tailwindMerge.twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onChange: handleInputChange, placeholder: rest.placeholder ?? t("dateField.placeholder"), ref: inputRef, suffix: suffixProp ?? (jsxRuntime.jsx(reactComponents.Icon, { "aria-label": undefined, className: Boolean(rest.disabled) || Boolean(rest.readOnly) ? "text-neutral-500" : undefined, "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", name: "Calendar", size: "medium", type: "solid" })), type: "text", value: resolvedValue }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: closePopover => {
+                    const displayDate = pendingDate ?? selectedDate ?? null;
+                    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex w-min flex-col overflow-hidden rounded-md border border-neutral-300 bg-white p-0"), children: [jsxRuntime.jsx(ReactCalendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", "p-0"), defaultActiveStartDate: displayDate ?? undefined, defaultView: "month", onChange: val => {
+                                    const next = val instanceof Date ? val : Array.isArray(val) ? (val[0] instanceof Date ? val[0] : null) : null;
+                                    handleCalendarChange(next);
+                                }, selectRange: false, tileDisabled: tileDisabled, value: displayDate }), jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "flex w-full justify-between gap-2 px-4 py-3", children: [jsxRuntime.jsx(reactComponents.Button, { className: "mr-auto", "data-testid": dataTestId ? `${dataTestId}-clear-button` : undefined, onClick: () => handleClear(closePopover), size: "small", variant: "secondary", children: t("dateField.actions.clear") }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": dataTestId ? `${dataTestId}-cancel-button` : undefined, onClick: () => handleCancel(closePopover), size: "small", variant: "ghost-neutral", children: t("dateField.actions.cancel") }), jsxRuntime.jsx(reactComponents.Button, { "data-testid": dataTestId ? `${dataTestId}-apply-button` : undefined, onClick: () => handleApply(closePopover), size: "small", children: t("dateField.actions.apply") })] })] })] }));
+                } })] }));
 };
 
 /**
@@ -2284,7 +2503,7 @@ const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
 ColorField.displayName = "ColorField";
 
 /**
- * The date field component is used for entering date values with a native date picker.
+ * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -4776,14 +4995,17 @@ exports.cvaSelectPlaceholder = cvaSelectPlaceholder;
 exports.cvaSelectPrefixSuffix = cvaSelectPrefixSuffix;
 exports.cvaSelectSingleValue = cvaSelectSingleValue;
 exports.cvaSelectValueContainer = cvaSelectValueContainer;
+exports.dateToISODateUTC = dateToISODateUTC;
 exports.getCountryAbbreviation = getCountryAbbreviation;
 exports.getPhoneNumberWithPlus = getPhoneNumberWithPlus;
 exports.isInvalidCountryCode = isInvalidCountryCode;
 exports.isInvalidPhoneNumber = isInvalidPhoneNumber;
 exports.isValidHEXColor = isValidHEXColor;
+exports.parseDateFieldValue = parseDateFieldValue;
 exports.parseSchedule = parseSchedule;
 exports.phoneErrorMessage = phoneErrorMessage;
 exports.serializeSchedule = serializeSchedule;
+exports.toISODateStringUTC = toISODateStringUTC;
 exports.useCreatableSelect = useCreatableSelect;
 exports.useCustomComponents = useCustomComponents;
 exports.useGetPhoneValidationRules = useGetPhoneValidationRules;

package/index.esm.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { Temporal } from '@trackunit/date-and-time-utils';
-import { IconButton, Icon, Tooltip, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
+import { Temporal, toDateUtil, startOfDayUtil } from '@trackunit/date-and-time-utils';
+import { IconButton, Icon, Tooltip, Popover, PopoverTrigger, PopoverContent, Button, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
+import { useRef, useEffect, useImperativeHandle, useState, useCallback, cloneElement, isValidElement, useLayoutEffect, useReducer, useMemo, createContext, useContext, useId } from 'react';
+import ReactCalendar from 'react-calendar';
+import { twMerge } from 'tailwind-merge';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
-import { useRef, useEffect, useImperativeHandle, useCallback, useState, cloneElement, isValidElement, useLayoutEffect, useReducer, useMemo, createContext, useContext, useId } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { titleCase } from 'string-ts';
 import { useCopyToClipboard } from 'usehooks-ts';
@@ -12,7 +14,6 @@ import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
 import ReactAsyncSelect from 'react-select/async';
 import { isEqual, omit } from 'es-toolkit';
-import { twMerge } from 'tailwind-merge';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
@@ -25,6 +26,10 @@ var defaultTranslations = {
 	"colorField.error.INVALID_HEX_CODE": "Please enter a valid color before continuing.",
 	"colorField.error.REQUIRED": "This field is required",
 	"colorField.tooltip": "Select color",
+	"dateField.actions.apply": "Apply",
+	"dateField.actions.cancel": "Cancel",
+	"dateField.actions.clear": "Clear",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Drag-and-drop file input",
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",
@@ -101,6 +106,110 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
+/**
+ * Builds a synthetic change event for an input with a given value.
+ * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
+ * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
+ */
+function createInputChangeEvent(value, sourceInput) {
+    const target = document.createElement("input");
+    target.value = value;
+    if (sourceInput) {
+        target.name = sourceInput.name;
+        target.id = sourceInput.id;
+    }
+    const native = new Event("change", { bubbles: true });
+    return {
+        target,
+        currentTarget: target,
+        type: "change",
+        bubbles: native.bubbles,
+        cancelable: native.cancelable,
+        defaultPrevented: native.defaultPrevented,
+        eventPhase: native.eventPhase,
+        isTrusted: native.isTrusted,
+        nativeEvent: native,
+        timeStamp: native.timeStamp,
+        preventDefault: () => native.preventDefault(),
+        stopPropagation: () => native.stopPropagation(),
+        persist: () => {
+            return;
+        },
+        isDefaultPrevented: () => native.defaultPrevented,
+        isPropagationStopped: () => false,
+    };
+}
+
+const ISO_DATE_REGEX = /^(\d{4})-(\d{2})-(\d{2})$/;
+function parseAndValidateYYYYMMDD(value) {
+    if (value === "")
+        return null;
+    const isoMatch = ISO_DATE_REGEX.exec(value);
+    if (!isoMatch)
+        return null;
+    const [, y, m, d] = isoMatch;
+    if (y === undefined || m === undefined || d === undefined)
+        return null;
+    const year = Number.parseInt(y, 10);
+    const month = Number.parseInt(m, 10) - 1;
+    const day = Number.parseInt(d, 10);
+    if (month < 0 || month > 11 || day < 1 || day > 31)
+        return null;
+    const local = new Date(year, month, day);
+    if (Number.isNaN(local.getTime()))
+        return null;
+    if (local.getFullYear() !== year || local.getMonth() !== month || local.getDate() !== day) {
+        return null;
+    }
+    return { year, month: month + 1, day };
+}
+/**
+ * Parses the value from a DateField change event (YYYY-MM-DD string) to a Date at local midnight.
+ * Use this when you need a Date from event.target.value to avoid timezone shifts that occur
+ * with `new Date(value)` (which interprets the string as UTC).
+ *
+ * @param value - The string from event.target.value (e.g. "2025-03-07" or "")
+ * @returns {Date | null} - Date at local midnight for the given day, or null if value is empty or invalid
+ */
+function parseDateFieldValue(value) {
+    const parsed = parseAndValidateYYYYMMDD(value);
+    if (!parsed)
+        return null;
+    return new Date(parsed.year, parsed.month - 1, parsed.day);
+}
+/**
+ * Converts a YYYY-MM-DD string (e.g. from DateField) to an ISO string at UTC midnight for that calendar day.
+ * Use this when storing or sending date-only values so that the calendar day is preserved regardless of
+ * user timezone (unlike calling .toISOString() on a local-midnight Date, which shifts the day for UTC+).
+ *
+ * @param value - The string from event.target.value (e.g. "2025-03-07" or "")
+ * @returns {string | null} - "YYYY-MM-DDT00:00:00.000Z" or null if value is empty or invalid
+ */
+function toISODateStringUTC(value) {
+    const parsed = parseAndValidateYYYYMMDD(value);
+    if (!parsed)
+        return null;
+    const { year, month, day } = parsed;
+    const mm = String(month).padStart(2, "0");
+    const dd = String(day).padStart(2, "0");
+    return `${year}-${mm}-${dd}T00:00:00.000Z`;
+}
+/**
+ * Converts a Date (e.g. at local midnight) to an ISO string at UTC midnight for the same calendar day.
+ * Use when sending a date-only value to an API that expects UTC midnight (e.g. booking date).
+ *
+ * @param date - A Date instance (typically local midnight from a date picker)
+ * @returns {string} "YYYY-MM-DDT00:00:00.000Z" for that calendar day
+ */
+function dateToISODateUTC(date) {
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const mm = String(month).padStart(2, "0");
+    const dd = String(day).padStart(2, "0");
+    return `${year}-${mm}-${dd}T00:00:00.000Z`;
+}
+
 const cvaInputBase = cvaMerge([
     "component-baseInput-shadow",
     "component-baseInput-border",
@@ -486,26 +595,136 @@ const BaseInput = ({ className, isInvalid = false, "data-testid": dataTestId, pr
 };
 BaseInput.displayName = "BaseInput";
 
+function parseToDate(v) {
+    if (v === undefined || v === "")
+        return undefined;
+    if (v instanceof Date)
+        return v;
+    if (typeof v === "number") {
+        const d = new Date(v);
+        return Number.isNaN(d.getTime()) ? undefined : d;
+    }
+    const str = String(v);
+    const fromField = parseDateFieldValue(str);
+    if (fromField !== null)
+        return fromField;
+    const fallback = new Date(str);
+    return Number.isNaN(fallback.getTime()) ? undefined : fallback;
+}
+function formatToInputString(d) {
+    if (!d)
+        return "";
+    return Temporal.PlainDateTime.from({
+        year: d.getFullYear(),
+        month: d.getMonth() + 1,
+        day: d.getDate(),
+    })
+        .toPlainDate()
+        .toString();
+}
+function startOfDayMs(d) {
+    return toDateUtil(startOfDayUtil(d)).getTime();
+}
+/** Clamp a date to [minDate, maxDate]; returns the same date if in range or no bounds. */
+function clampToRange(date, minDate, maxDate) {
+    if (date === null || date === undefined)
+        return null;
+    const dayStart = startOfDayMs(date);
+    if (minDate !== undefined && dayStart < startOfDayMs(minDate))
+        return minDate;
+    if (maxDate !== undefined && dayStart > startOfDayMs(maxDate))
+        return maxDate;
+    return date;
+}
 /**
- * A wrapper around BaseInput with a pop-up day picker.
+ * A wrapper around BaseInput with a pop-up day picker using the same calendar UI as DayPicker.
  *
  * The value is formatted to an ISO date string (YYYY-MM-DD)
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-const DateBaseInput = ({ min, max, defaultValue, value, ref, ...rest }) => {
-    const formatDateToInputString = (date) => date instanceof Date
-        ? Temporal.PlainDateTime.from({
-            year: date.getFullYear(),
-            month: date.getMonth() + 1,
-            day: date.getDate(),
-        })
-            .toPlainDate()
-            .toString()
-        : date;
-    // Chrome and Firefox need their default icon to have datepicker functionality.
-    const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsx(BaseInput, { defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon ? jsx(Icon, { "data-testid": "calendar", name: "Calendar", size: "medium", type: "solid" }) : null, type: "date", value: formatDateToInputString(value), ...rest }));
+const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, ...rest }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(() => formatToInputString(parseToDate(defaultValue)));
+    const [pendingDate, setPendingDate] = useState(null);
+    // For controlled string value, only normalize when it's strict YYYY-MM-DD so partial input (e.g. "2025-03") is preserved.
+    const resolvedValue = isControlled
+        ? typeof value === "string"
+            ? (() => {
+                const strict = parseDateFieldValue(value);
+                return strict !== null ? formatToInputString(strict) : value;
+            })()
+            : formatToInputString(parseToDate(value))
+        : internalValue;
+    const selectedDate = isControlled && typeof value === "string"
+        ? (parseDateFieldValue(value) ?? undefined)
+        : parseToDate(isControlled ? value : internalValue);
+    const inputRef = useRef(null);
+    const [t] = useTranslation();
+    useImperativeHandle(ref, () => inputRef.current ?? document.createElement("input"), []);
+    const syncPendingFromValue = useCallback(() => {
+        setPendingDate(selectedDate ?? null);
+    }, [selectedDate]);
+    const tileDisabled = useCallback(({ date, view }) => {
+        if (view !== "month")
+            return false;
+        const minDate = parseToDate(min);
+        const maxDate = parseToDate(max);
+        const dayStart = startOfDayMs(date);
+        if (minDate !== undefined && dayStart < startOfDayMs(minDate))
+            return true;
+        if (maxDate !== undefined && dayStart > startOfDayMs(maxDate))
+            return true;
+        return false;
+    }, [min, max]);
+    const handleCalendarChange = useCallback((next) => {
+        setPendingDate(next);
+    }, []);
+    const handleClear = useCallback((closePopover) => {
+        setPendingDate(null);
+        if (!isControlled)
+            setInternalValue("");
+        onChange?.(createInputChangeEvent("", inputRef.current));
+        closePopover();
+    }, [isControlled, onChange]);
+    const handleCancel = useCallback((closePopover) => {
+        closePopover();
+    }, []);
+    const handleApply = useCallback((closePopover) => {
+        const minDate = parseToDate(min);
+        const maxDate = parseToDate(max);
+        const clamped = clampToRange(pendingDate, minDate, maxDate);
+        const str = clamped ? formatToInputString(clamped) : "";
+        if (!isControlled)
+            setInternalValue(str);
+        onChange?.(createInputChangeEvent(str, inputRef.current));
+        closePopover();
+    }, [isControlled, min, max, onChange, pendingDate]);
+    const handleInputChange = useCallback((e) => {
+        const raw = e.target.value;
+        const parsed = parseDateFieldValue(raw);
+        const minDate = parseToDate(min);
+        const maxDate = parseToDate(max);
+        if (parsed !== null) {
+            const clamped = clampToRange(parsed, minDate, maxDate);
+            const str = clamped ? formatToInputString(clamped) : "";
+            if (!isControlled)
+                setInternalValue(str);
+            onChange?.(createInputChangeEvent(str, inputRef.current));
+        }
+        else {
+            if (!isControlled)
+                setInternalValue(raw);
+            onChange?.(e);
+        }
+    }, [isControlled, min, max, onChange]);
+    return (jsxs(Popover, { onOpenStateChange: open => open && syncPendingFromValue(), placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx("div", { className: twMerge("flex w-full min-w-0 cursor-pointer items-center", (Boolean(rest.disabled) || Boolean(rest.readOnly)) && "pointer-events-none"), children: jsx(BaseInput, { ...rest, "aria-readonly": true, className: twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onChange: handleInputChange, placeholder: rest.placeholder ?? t("dateField.placeholder"), ref: inputRef, suffix: suffixProp ?? (jsx(Icon, { "aria-label": undefined, className: Boolean(rest.disabled) || Boolean(rest.readOnly) ? "text-neutral-500" : undefined, "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", name: "Calendar", size: "medium", type: "solid" })), type: "text", value: resolvedValue }) }) }), jsx(PopoverContent, { children: closePopover => {
+                    const displayDate = pendingDate ?? selectedDate ?? null;
+                    return (jsxs("div", { className: twMerge("flex w-min flex-col overflow-hidden rounded-md border border-neutral-300 bg-white p-0"), children: [jsx(ReactCalendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", "p-0"), defaultActiveStartDate: displayDate ?? undefined, defaultView: "month", onChange: val => {
+                                    const next = val instanceof Date ? val : Array.isArray(val) ? (val[0] instanceof Date ? val[0] : null) : null;
+                                    handleCalendarChange(next);
+                                }, selectRange: false, tileDisabled: tileDisabled, value: displayDate }), jsx("hr", {}), jsxs("div", { className: "flex w-full justify-between gap-2 px-4 py-3", children: [jsx(Button, { className: "mr-auto", "data-testid": dataTestId ? `${dataTestId}-clear-button` : undefined, onClick: () => handleClear(closePopover), size: "small", variant: "secondary", children: t("dateField.actions.clear") }), jsxs("div", { className: "flex gap-2", children: [jsx(Button, { "data-testid": dataTestId ? `${dataTestId}-cancel-button` : undefined, onClick: () => handleCancel(closePopover), size: "small", variant: "ghost-neutral", children: t("dateField.actions.cancel") }), jsx(Button, { "data-testid": dataTestId ? `${dataTestId}-apply-button` : undefined, onClick: () => handleApply(closePopover), size: "small", children: t("dateField.actions.apply") })] })] })] }));
+                } })] }));
 };
 
 /**
@@ -2283,7 +2502,7 @@ const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, classNa
 ColorField.displayName = "ColorField";
 
 /**
- * The date field component is used for entering date values with a native date picker.
+ * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -4697,4 +4916,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, BaseSelect, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectField, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, SelectField, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputBaseReadOnly, cvaInputBaseSize, cvaInputElement, cvaInputGroup, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaRadioItem, cvaSelectClearIndicator, cvaSelectContainer, cvaSelectControl, cvaSelectDropdownIconContainer, cvaSelectDropdownIndicator, cvaSelectIndicatorsContainer, cvaSelectLoadingMessage, cvaSelectMenu, cvaSelectMenuList, cvaSelectMultiValue, cvaSelectNoOptionsMessage, cvaSelectPlaceholder, cvaSelectPrefixSuffix, cvaSelectSingleValue, cvaSelectValueContainer, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCreatableSelect, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useSelect, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, BaseSelect, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectField, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, SelectField, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputBaseReadOnly, cvaInputBaseSize, cvaInputElement, cvaInputGroup, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaRadioItem, cvaSelectClearIndicator, cvaSelectContainer, cvaSelectControl, cvaSelectDropdownIconContainer, cvaSelectDropdownIndicator, cvaSelectIndicatorsContainer, cvaSelectLoadingMessage, cvaSelectMenu, cvaSelectMenuList, cvaSelectMultiValue, cvaSelectNoOptionsMessage, cvaSelectPlaceholder, cvaSelectPrefixSuffix, cvaSelectSingleValue, cvaSelectValueContainer, dateToISODateUTC, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseDateFieldValue, parseSchedule, phoneErrorMessage, serializeSchedule, toISODateStringUTC, useCreatableSelect, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useSelect, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.18.15",
+  "version": "1.18.17",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
+    "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.11.86",
+    "@trackunit/date-and-time-utils": "1.11.87",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.23.8",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.84",
-    "@trackunit/react-components": "1.20.13",
-    "@trackunit/ui-icons": "1.11.80",
-    "@trackunit/shared-utils": "1.13.84",
-    "@trackunit/ui-design-tokens": "1.11.81",
-    "@trackunit/i18n-library-translation": "1.15.14",
+    "@trackunit/css-class-variance-utilities": "1.11.85",
+    "@trackunit/react-components": "1.20.14",
+    "@trackunit/ui-icons": "1.11.81",
+    "@trackunit/shared-utils": "1.13.85",
+    "@trackunit/ui-design-tokens": "1.11.82",
+    "@trackunit/i18n-library-translation": "1.15.15",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/DateField/DateBaseInput/DateBaseInput.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from "react";
 import { BaseInputProps } from "../../BaseInput/BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "min" | "max" | "value">;
 export interface DateBaseInputProps extends BaseInputExposedProps {
@@ -19,11 +20,11 @@ export interface DateBaseInputProps extends BaseInputExposedProps {
     value?: Date | string | number;
 }
 /**
- * A wrapper around BaseInput with a pop-up day picker.
+ * A wrapper around BaseInput with a pop-up day picker using the same calendar UI as DayPicker.
  *
  * The value is formatted to an ISO date string (YYYY-MM-DD)
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-export declare const DateBaseInput: ({ min, max, defaultValue, value, ref, ...rest }: DateBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateBaseInput: ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, ...rest }: DateBaseInputProps) => ReactElement;
 export {};

package/src/components/DateField/DateField.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { DateBaseInputProps } from "./DateBaseInput/DateBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -8,7 +9,7 @@ export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProp
     errorMessage?: string;
 }
 /**
- * The date field component is used for entering date values with a native date picker.
+ * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -56,7 +57,7 @@ export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProp
  * ```
  */
 export declare const DateField: {
-    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, required, ...rest }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, required, ...rest }: DateFieldProps): ReactElement;
     displayName: string;
 };
 export {};

package/src/index.d.ts

@@ -52,6 +52,7 @@ export * from "./components/UploadField/UploadField";
 export * from "./components/UploadInput/UploadInput";
 export * from "./components/UrlField/UrlField";
 export * from "./utilities/emailUtils";
+export * from "./utilities/parseDateFieldValue";
 export * from "./utilities/useGetPhoneValidationRules";
 export * from "./utilities/usePhoneInput";
 export * from "./utilities/useZodValidators";

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
+export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dateField.actions.apply" | "dateField.actions.cancel" | "dateField.actions.clear" | "dateField.placeholder" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dateField.actions.apply" | "dateField.actions.cancel" | "dateField.actions.clear" | "dateField.placeholder" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "search.placeholder" | "select.loadingMessage" | "select.noOptionsMessage" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };

package/src/utilities/createInputChangeEvent.d.ts

@@ -0,0 +1,7 @@
+import { type ChangeEvent } from "react";
+/**
+ * Builds a synthetic change event for an input with a given value.
+ * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
+ * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
+ */
+export declare function createInputChangeEvent(value: string, sourceInput: HTMLInputElement | null): ChangeEvent<HTMLInputElement>;

package/src/utilities/parseDateFieldValue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Parses the value from a DateField change event (YYYY-MM-DD string) to a Date at local midnight.
+ * Use this when you need a Date from event.target.value to avoid timezone shifts that occur
+ * with `new Date(value)` (which interprets the string as UTC).
+ *
+ * @param value - The string from event.target.value (e.g. "2025-03-07" or "")
+ * @returns {Date | null} - Date at local midnight for the given day, or null if value is empty or invalid
+ */
+export declare function parseDateFieldValue(value: string): Date | null;
+/**
+ * Converts a YYYY-MM-DD string (e.g. from DateField) to an ISO string at UTC midnight for that calendar day.
+ * Use this when storing or sending date-only values so that the calendar day is preserved regardless of
+ * user timezone (unlike calling .toISOString() on a local-midnight Date, which shifts the day for UTC+).
+ *
+ * @param value - The string from event.target.value (e.g. "2025-03-07" or "")
+ * @returns {string | null} - "YYYY-MM-DDT00:00:00.000Z" or null if value is empty or invalid
+ */
+export declare function toISODateStringUTC(value: string): string | null;
+/**
+ * Converts a Date (e.g. at local midnight) to an ISO string at UTC midnight for the same calendar day.
+ * Use when sending a date-only value to an API that expects UTC midnight (e.g. booking date).
+ *
+ * @param date - A Date instance (typically local midnight from a date picker)
+ * @returns {string} "YYYY-MM-DDT00:00:00.000Z" for that calendar day
+ */
+export declare function dateToISODateUTC(date: Date): string;