@trackunit/react-form-components 1.23.2 → 1.23.4

package/index.cjs.js

@@ -30,7 +30,7 @@ var defaultTranslations = {
 	"dateField.actions.apply": "Apply",
 	"dateField.actions.cancel": "Cancel",
 	"dateField.actions.clear": "Clear",
-	"dateField.placeholder": "mm dd, yyyy",
+	"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",
@@ -107,6 +107,76 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
+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 createSyntheticInputChangeEvent = (value, sourceInput) => {
     const target = document.createElement("input");
     target.value = value;
@@ -531,147 +601,6 @@ const BaseInput = ({ className, isInvalid = false, "data-testid": dataTestId, pr
 };
 BaseInput.displayName = "BaseInput";
 
-const normalizeDisplayCompare = (value) => value
-    .normalize("NFKC")
-    .replace(/[\u202f\u00a0]/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-const COMPACT_DATE_REGEX = /^\d{8}$/;
-const localePartOrderCache = new Map();
-/**
- * Returns the date-part display order (month/day/year) for the given locale by inspecting
- * `Intl.DateTimeFormat.formatToParts`. Results are cached after the first call per locale.
- * Falls back to MDY (English/US convention) on any error.
- */
-function getLocaleDatePartOrder(locale) {
-    const cached = localePartOrderCache.get(locale);
-    if (cached !== undefined)
-        return cached;
-    try {
-        const parts = new Intl.DateTimeFormat(locale, { year: "numeric", month: "2-digit", day: "2-digit" })
-            .formatToParts(new Date(2000, 0, 15))
-            .filter(p => p.type === "month" || p.type === "day" || p.type === "year")
-            .map(p => p.type.charAt(0).toUpperCase())
-            .join("");
-        const order = parts === "DMY" ? "DMY" : parts === "YMD" ? "YMD" : "MDY";
-        localePartOrderCache.set(locale, order);
-        return order;
-    }
-    catch {
-        return "MDY";
-    }
-}
-/**
- * Converts a locale-ordered 8-digit compact string to `YYYY-MM-DD`.
- *
- * The split follows the locale's field order:
- * - MDY (e.g. `en`):  `MMDDYYYY` → `YYYY-MM-DD`
- * - DMY (e.g. `de`):  `DDMMYYYY` → `YYYY-MM-DD`
- * - YMD (e.g. `ja`):  `YYYYMMDD` → `YYYY-MM-DD`
- *
- * Returns the original value unchanged for non-8-digit inputs.
- */
-const normalizeCompactDateInput = (value, locale) => {
-    if (!COMPACT_DATE_REGEX.test(value))
-        return value;
-    const order = getLocaleDatePartOrder(locale ?? "en");
-    if (order === "MDY")
-        return `${value.slice(4, 8)}-${value.slice(0, 2)}-${value.slice(2, 4)}`;
-    if (order === "DMY")
-        return `${value.slice(4, 8)}-${value.slice(2, 4)}-${value.slice(0, 2)}`;
-    return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`;
-};
-/**
- * Parses date-field keyboard input to a local-midnight {@link Date}.
- *
- * Strict `YYYY-MM-DD` is accepted first; a locale-ordered compact 8-digit string (e.g. `04132026`
- * in English for April 13 2026) is normalised to `YYYY-MM-DD` before that check. Otherwise the
- * string must round-trip with {@link formatShortDateUtil} for the given `locale`. Arbitrary
- * `new Date(string)`-parseable inputs that don't match the locale's format return `null` to avoid
- * accepting confusable formats like `03/07/2025`.
- *
- * @param value - Raw text from the input.
- * @param locale - Locale to compare against when the input is not `YYYY-MM-DD`.
- */
-const parseDateFieldInputForChange = (value, locale) => {
-    const fromIso = dateAndTimeUtils.parseYYYYMMDDUtil(normalizeCompactDateInput(value, locale));
-    if (fromIso !== null)
-        return fromIso;
-    const trimmed = value.trim();
-    if (trimmed === "")
-        return null;
-    const parsed = dateAndTimeUtils.parseValidDate(trimmed);
-    if (parsed === null)
-        return null;
-    const localMidnight = dateAndTimeUtils.toDateUtil(dateAndTimeUtils.startOfDayUtil(parsed));
-    const formatted = dateAndTimeUtils.formatShortDateUtil(localMidnight, locale);
-    if (normalizeDisplayCompare(formatted) === normalizeDisplayCompare(trimmed)) {
-        return localMidnight;
-    }
-    return null;
-};
-/**
- * Renders the stored date-field value for display:
- *  - empty string → empty
- *  - full canonical `YYYY-MM-DD` → locale-aware short date
- *  - partial input (e.g. `"2025-03"`) → returned as-is so the user can keep typing
- *
- * @param stored - The current canonical value (typically from `event.target.value`).
- * @param locale - Locale for the display format.
- */
-const dateFieldStoredValueToDisplayString = (stored, locale) => {
-    if (stored === "")
-        return "";
-    const parsed = dateAndTimeUtils.parseYYYYMMDDUtil(stored);
-    if (parsed !== null)
-        return dateAndTimeUtils.formatShortDateUtil(parsed, locale);
-    return stored;
-};
-
-/**
- * Converts a Date instant to the canonical YYYY-MM-DD for a specific IANA time zone.
- * This preserves the calendar day the user selected in their local zone.
- */
-const dateToCalendarDayString = ({ date, timeZoneId }) => {
-    if (!date || Number.isNaN(date.getTime()))
-        return "";
-    const resolvedTimeZoneId = timeZoneId ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
-    return dateAndTimeUtils.toZonedDateTimeUtil(date, resolvedTimeZoneId).toPlainDate().toString();
-};
-/**
- * Clamps a date to [minDate, maxDate] by comparing calendar days in a specific timezone.
- * Returns the original `date` when it's in range, or the relevant boundary date when out of range.
- */
-const clampDateToCalendarDayRange = ({ date, minDate, maxDate, timeZoneId, }) => {
-    if (date === null || date === undefined)
-        return null;
-    const day = dateToCalendarDayString({ date, timeZoneId });
-    if (day === "")
-        return null;
-    if (minDate !== undefined) {
-        const minDay = dateToCalendarDayString({ date: minDate, timeZoneId });
-        if (minDay !== "" && day < minDay)
-            return minDate;
-    }
-    if (maxDate !== undefined) {
-        const maxDay = dateToCalendarDayString({ date: maxDate, timeZoneId });
-        if (maxDay !== "" && day > maxDay)
-            return maxDate;
-    }
-    return date;
-};
-/**
- * Returns true when a date falls outside [minDate, maxDate] by calendar day in a specific timezone.
- */
-const isCalendarDayOutOfRange = ({ date, minDate, maxDate, timeZoneId, }) => {
-    if (!date)
-        return false;
-    const clamped = clampDateToCalendarDayRange({ date, minDate, maxDate, timeZoneId });
-    if (!clamped)
-        return false;
-    return clamped.getTime() !== date.getTime();
-};
-
 function parseToDate(v) {
     if (v === undefined || v === "")
         return undefined;
@@ -682,38 +611,63 @@ function parseToDate(v) {
         return Number.isNaN(d.getTime()) ? undefined : d;
     }
     const str = String(v);
-    const fromField = dateAndTimeUtils.parseYYYYMMDDUtil(str);
+    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 using the same calendar UI as DayPicker.
  *
- * The input shows a locale-aware date (short month, numeric day and year, e.g. "Mar 23, 2026" in English).
- * `onChange` still emits the canonical YYYY-MM-DD string for form parsing.
+ * 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, onChange, suffix: suffixProp, "data-testid": dataTestId, onBlur, ...rest }) => {
-    const timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
+const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, ...rest }) => {
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = react.useState(() => dateToCalendarDayString({ date: parseToDate(defaultValue), timeZoneId }));
+    const [internalValue, setInternalValue] = react.useState(() => formatToInputString(parseToDate(defaultValue)));
     const [pendingDate, setPendingDate] = react.useState(null);
-    const [t, i18n] = useTranslation();
-    const locale = i18n.resolvedLanguage ?? i18n.language;
     // 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"
-            ? dateFieldStoredValueToDisplayString(value, locale)
-            : dateFieldStoredValueToDisplayString(dateToCalendarDayString({ date: parseToDate(value), timeZoneId }), locale)
-        : dateFieldStoredValueToDisplayString(internalValue, locale);
+            ? (() => {
+                const strict = parseDateFieldValue(value);
+                return strict !== null ? formatToInputString(strict) : value;
+            })()
+            : formatToInputString(parseToDate(value))
+        : internalValue;
     const selectedDate = isControlled && typeof value === "string"
-        ? (dateAndTimeUtils.parseYYYYMMDDUtil(value) ?? undefined)
+        ? (parseDateFieldValue(value) ?? undefined)
         : parseToDate(isControlled ? value : internalValue);
     const inputRef = react.useRef(null);
     const createInputChangeEvent = useCreateInputChangeEvent();
+    const [t] = useTranslation();
     react.useImperativeHandle(ref, () => inputRef.current ?? document.createElement("input"), []);
     const syncPendingFromValue = react.useCallback(() => {
         setPendingDate(selectedDate ?? null);
@@ -723,8 +677,13 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             return false;
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
-        return isCalendarDayOutOfRange({ date, minDate, maxDate, timeZoneId });
-    }, [min, max, timeZoneId]);
+        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);
     }, []);
@@ -741,21 +700,21 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
     const handleApply = react.useCallback((closePopover) => {
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
-        const clamped = clampDateToCalendarDayRange({ date: pendingDate, minDate, maxDate, timeZoneId });
-        const str = clamped ? dateToCalendarDayString({ date: clamped, timeZoneId }) : "";
+        const clamped = clampToRange(pendingDate, minDate, maxDate);
+        const str = clamped ? formatToInputString(clamped) : "";
         if (!isControlled)
             setInternalValue(str);
         onChange?.(createInputChangeEvent(str, inputRef.current));
         closePopover();
-    }, [createInputChangeEvent, isControlled, min, max, onChange, pendingDate, timeZoneId]);
+    }, [createInputChangeEvent, isControlled, min, max, onChange, pendingDate]);
     const handleInputChange = react.useCallback((e) => {
         const raw = e.target.value;
-        const parsed = parseDateFieldInputForChange(raw, locale);
+        const parsed = parseDateFieldValue(raw);
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
         if (parsed !== null) {
-            const clamped = clampDateToCalendarDayRange({ date: parsed, minDate, maxDate, timeZoneId });
-            const str = clamped ? dateToCalendarDayString({ date: clamped, timeZoneId }) : "";
+            const clamped = clampToRange(parsed, minDate, maxDate);
+            const str = clamped ? formatToInputString(clamped) : "";
             if (!isControlled)
                 setInternalValue(str);
             onChange?.(createInputChangeEvent(str, inputRef.current));
@@ -765,30 +724,10 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
                 setInternalValue(raw);
             onChange?.(e);
         }
-    }, [createInputChangeEvent, isControlled, locale, min, max, onChange, timeZoneId]);
-    const handleBlur = react.useCallback((e) => {
-        if (!onBlur)
-            return;
-        const storedValue = isControlled
-            ? typeof value === "string"
-                ? value
-                : dateToCalendarDayString({ date: parseToDate(value), timeZoneId })
-            : internalValue;
-        // When the stored value is a committed calendar day (YYYY-MM-DD) we expose it on blur, even though the
-        // displayed input value is localized.
-        const shouldExposeStoredValue = storedValue === "" || dateAndTimeUtils.parseYYYYMMDDUtil(storedValue) !== null;
-        if (!shouldExposeStoredValue) {
-            onBlur(e);
-            return;
-        }
-        const prev = e.currentTarget.value;
-        e.currentTarget.value = storedValue;
-        onBlur(e);
-        e.currentTarget.value = prev;
-    }, [internalValue, isControlled, onBlur, timeZoneId, value]);
-    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, onBlur: handleBlur, 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 => {
+    }, [createInputChangeEvent, 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", locale: locale, onChange: val => {
+                    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") })] })] })] }));
@@ -2571,9 +2510,6 @@ ColorField.displayName = "ColorField";
 
 /**
  * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
- * The input shows a localized short date; when the user commits a valid day, both `onChange` and `onBlur`
- * expose `YYYY-MM-DD` on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils`
- * for a local-midnight `Date`).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -2601,13 +2537,11 @@ ColorField.displayName = "ColorField";
  * @example Date field with constraints
  * ```tsx
  * import { DateField } from "@trackunit/react-form-components";
- * import { dateToYYYYMMDDUtil } from "@trackunit/date-and-time-utils";
  * import { useState } from "react";
  *
  * const BookingForm = () => {
  *   const [checkIn, setCheckIn] = useState("");
- *   // Use the local calendar day, not UTC (avoids day-shift in non-UTC zones).
- *   const today = dateToYYYYMMDDUtil(new Date());
+ *   const today = new Date().toISOString().split("T")[0];
  *
  *   return (
  *     <DateField
@@ -5082,14 +5016,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.useCreateInputChangeEvent = useCreateInputChangeEvent;
 exports.useCustomComponents = useCustomComponents;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { parseYYYYMMDDUtil, formatShortDateUtil, parseValidDate, toDateUtil, startOfDayUtil, toZonedDateTimeUtil } from '@trackunit/date-and-time-utils';
+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 { useCallback, useRef, useEffect, useImperativeHandle, useState, cloneElement, isValidElement, useLayoutEffect, useMemo, useReducer, createContext, useContext, useId } from 'react';
 import ReactCalendar from 'react-calendar';
@@ -29,7 +29,7 @@ var defaultTranslations = {
 	"dateField.actions.apply": "Apply",
 	"dateField.actions.cancel": "Cancel",
 	"dateField.actions.clear": "Clear",
-	"dateField.placeholder": "mm dd, yyyy",
+	"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",
@@ -106,6 +106,76 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
+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 createSyntheticInputChangeEvent = (value, sourceInput) => {
     const target = document.createElement("input");
     target.value = value;
@@ -530,147 +600,6 @@ const BaseInput = ({ className, isInvalid = false, "data-testid": dataTestId, pr
 };
 BaseInput.displayName = "BaseInput";
 
-const normalizeDisplayCompare = (value) => value
-    .normalize("NFKC")
-    .replace(/[\u202f\u00a0]/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-const COMPACT_DATE_REGEX = /^\d{8}$/;
-const localePartOrderCache = new Map();
-/**
- * Returns the date-part display order (month/day/year) for the given locale by inspecting
- * `Intl.DateTimeFormat.formatToParts`. Results are cached after the first call per locale.
- * Falls back to MDY (English/US convention) on any error.
- */
-function getLocaleDatePartOrder(locale) {
-    const cached = localePartOrderCache.get(locale);
-    if (cached !== undefined)
-        return cached;
-    try {
-        const parts = new Intl.DateTimeFormat(locale, { year: "numeric", month: "2-digit", day: "2-digit" })
-            .formatToParts(new Date(2000, 0, 15))
-            .filter(p => p.type === "month" || p.type === "day" || p.type === "year")
-            .map(p => p.type.charAt(0).toUpperCase())
-            .join("");
-        const order = parts === "DMY" ? "DMY" : parts === "YMD" ? "YMD" : "MDY";
-        localePartOrderCache.set(locale, order);
-        return order;
-    }
-    catch {
-        return "MDY";
-    }
-}
-/**
- * Converts a locale-ordered 8-digit compact string to `YYYY-MM-DD`.
- *
- * The split follows the locale's field order:
- * - MDY (e.g. `en`):  `MMDDYYYY` → `YYYY-MM-DD`
- * - DMY (e.g. `de`):  `DDMMYYYY` → `YYYY-MM-DD`
- * - YMD (e.g. `ja`):  `YYYYMMDD` → `YYYY-MM-DD`
- *
- * Returns the original value unchanged for non-8-digit inputs.
- */
-const normalizeCompactDateInput = (value, locale) => {
-    if (!COMPACT_DATE_REGEX.test(value))
-        return value;
-    const order = getLocaleDatePartOrder(locale ?? "en");
-    if (order === "MDY")
-        return `${value.slice(4, 8)}-${value.slice(0, 2)}-${value.slice(2, 4)}`;
-    if (order === "DMY")
-        return `${value.slice(4, 8)}-${value.slice(2, 4)}-${value.slice(0, 2)}`;
-    return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`;
-};
-/**
- * Parses date-field keyboard input to a local-midnight {@link Date}.
- *
- * Strict `YYYY-MM-DD` is accepted first; a locale-ordered compact 8-digit string (e.g. `04132026`
- * in English for April 13 2026) is normalised to `YYYY-MM-DD` before that check. Otherwise the
- * string must round-trip with {@link formatShortDateUtil} for the given `locale`. Arbitrary
- * `new Date(string)`-parseable inputs that don't match the locale's format return `null` to avoid
- * accepting confusable formats like `03/07/2025`.
- *
- * @param value - Raw text from the input.
- * @param locale - Locale to compare against when the input is not `YYYY-MM-DD`.
- */
-const parseDateFieldInputForChange = (value, locale) => {
-    const fromIso = parseYYYYMMDDUtil(normalizeCompactDateInput(value, locale));
-    if (fromIso !== null)
-        return fromIso;
-    const trimmed = value.trim();
-    if (trimmed === "")
-        return null;
-    const parsed = parseValidDate(trimmed);
-    if (parsed === null)
-        return null;
-    const localMidnight = toDateUtil(startOfDayUtil(parsed));
-    const formatted = formatShortDateUtil(localMidnight, locale);
-    if (normalizeDisplayCompare(formatted) === normalizeDisplayCompare(trimmed)) {
-        return localMidnight;
-    }
-    return null;
-};
-/**
- * Renders the stored date-field value for display:
- *  - empty string → empty
- *  - full canonical `YYYY-MM-DD` → locale-aware short date
- *  - partial input (e.g. `"2025-03"`) → returned as-is so the user can keep typing
- *
- * @param stored - The current canonical value (typically from `event.target.value`).
- * @param locale - Locale for the display format.
- */
-const dateFieldStoredValueToDisplayString = (stored, locale) => {
-    if (stored === "")
-        return "";
-    const parsed = parseYYYYMMDDUtil(stored);
-    if (parsed !== null)
-        return formatShortDateUtil(parsed, locale);
-    return stored;
-};
-
-/**
- * Converts a Date instant to the canonical YYYY-MM-DD for a specific IANA time zone.
- * This preserves the calendar day the user selected in their local zone.
- */
-const dateToCalendarDayString = ({ date, timeZoneId }) => {
-    if (!date || Number.isNaN(date.getTime()))
-        return "";
-    const resolvedTimeZoneId = timeZoneId ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
-    return toZonedDateTimeUtil(date, resolvedTimeZoneId).toPlainDate().toString();
-};
-/**
- * Clamps a date to [minDate, maxDate] by comparing calendar days in a specific timezone.
- * Returns the original `date` when it's in range, or the relevant boundary date when out of range.
- */
-const clampDateToCalendarDayRange = ({ date, minDate, maxDate, timeZoneId, }) => {
-    if (date === null || date === undefined)
-        return null;
-    const day = dateToCalendarDayString({ date, timeZoneId });
-    if (day === "")
-        return null;
-    if (minDate !== undefined) {
-        const minDay = dateToCalendarDayString({ date: minDate, timeZoneId });
-        if (minDay !== "" && day < minDay)
-            return minDate;
-    }
-    if (maxDate !== undefined) {
-        const maxDay = dateToCalendarDayString({ date: maxDate, timeZoneId });
-        if (maxDay !== "" && day > maxDay)
-            return maxDate;
-    }
-    return date;
-};
-/**
- * Returns true when a date falls outside [minDate, maxDate] by calendar day in a specific timezone.
- */
-const isCalendarDayOutOfRange = ({ date, minDate, maxDate, timeZoneId, }) => {
-    if (!date)
-        return false;
-    const clamped = clampDateToCalendarDayRange({ date, minDate, maxDate, timeZoneId });
-    if (!clamped)
-        return false;
-    return clamped.getTime() !== date.getTime();
-};
-
 function parseToDate(v) {
     if (v === undefined || v === "")
         return undefined;
@@ -681,38 +610,63 @@ function parseToDate(v) {
         return Number.isNaN(d.getTime()) ? undefined : d;
     }
     const str = String(v);
-    const fromField = parseYYYYMMDDUtil(str);
+    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 using the same calendar UI as DayPicker.
  *
- * The input shows a locale-aware date (short month, numeric day and year, e.g. "Mar 23, 2026" in English).
- * `onChange` still emits the canonical YYYY-MM-DD string for form parsing.
+ * 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, onChange, suffix: suffixProp, "data-testid": dataTestId, onBlur, ...rest }) => {
-    const timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone;
+const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: suffixProp, "data-testid": dataTestId, ...rest }) => {
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = useState(() => dateToCalendarDayString({ date: parseToDate(defaultValue), timeZoneId }));
+    const [internalValue, setInternalValue] = useState(() => formatToInputString(parseToDate(defaultValue)));
     const [pendingDate, setPendingDate] = useState(null);
-    const [t, i18n] = useTranslation();
-    const locale = i18n.resolvedLanguage ?? i18n.language;
     // 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"
-            ? dateFieldStoredValueToDisplayString(value, locale)
-            : dateFieldStoredValueToDisplayString(dateToCalendarDayString({ date: parseToDate(value), timeZoneId }), locale)
-        : dateFieldStoredValueToDisplayString(internalValue, locale);
+            ? (() => {
+                const strict = parseDateFieldValue(value);
+                return strict !== null ? formatToInputString(strict) : value;
+            })()
+            : formatToInputString(parseToDate(value))
+        : internalValue;
     const selectedDate = isControlled && typeof value === "string"
-        ? (parseYYYYMMDDUtil(value) ?? undefined)
+        ? (parseDateFieldValue(value) ?? undefined)
         : parseToDate(isControlled ? value : internalValue);
     const inputRef = useRef(null);
     const createInputChangeEvent = useCreateInputChangeEvent();
+    const [t] = useTranslation();
     useImperativeHandle(ref, () => inputRef.current ?? document.createElement("input"), []);
     const syncPendingFromValue = useCallback(() => {
         setPendingDate(selectedDate ?? null);
@@ -722,8 +676,13 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             return false;
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
-        return isCalendarDayOutOfRange({ date, minDate, maxDate, timeZoneId });
-    }, [min, max, timeZoneId]);
+        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);
     }, []);
@@ -740,21 +699,21 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
     const handleApply = useCallback((closePopover) => {
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
-        const clamped = clampDateToCalendarDayRange({ date: pendingDate, minDate, maxDate, timeZoneId });
-        const str = clamped ? dateToCalendarDayString({ date: clamped, timeZoneId }) : "";
+        const clamped = clampToRange(pendingDate, minDate, maxDate);
+        const str = clamped ? formatToInputString(clamped) : "";
         if (!isControlled)
             setInternalValue(str);
         onChange?.(createInputChangeEvent(str, inputRef.current));
         closePopover();
-    }, [createInputChangeEvent, isControlled, min, max, onChange, pendingDate, timeZoneId]);
+    }, [createInputChangeEvent, isControlled, min, max, onChange, pendingDate]);
     const handleInputChange = useCallback((e) => {
         const raw = e.target.value;
-        const parsed = parseDateFieldInputForChange(raw, locale);
+        const parsed = parseDateFieldValue(raw);
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
         if (parsed !== null) {
-            const clamped = clampDateToCalendarDayRange({ date: parsed, minDate, maxDate, timeZoneId });
-            const str = clamped ? dateToCalendarDayString({ date: clamped, timeZoneId }) : "";
+            const clamped = clampToRange(parsed, minDate, maxDate);
+            const str = clamped ? formatToInputString(clamped) : "";
             if (!isControlled)
                 setInternalValue(str);
             onChange?.(createInputChangeEvent(str, inputRef.current));
@@ -764,30 +723,10 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
                 setInternalValue(raw);
             onChange?.(e);
         }
-    }, [createInputChangeEvent, isControlled, locale, min, max, onChange, timeZoneId]);
-    const handleBlur = useCallback((e) => {
-        if (!onBlur)
-            return;
-        const storedValue = isControlled
-            ? typeof value === "string"
-                ? value
-                : dateToCalendarDayString({ date: parseToDate(value), timeZoneId })
-            : internalValue;
-        // When the stored value is a committed calendar day (YYYY-MM-DD) we expose it on blur, even though the
-        // displayed input value is localized.
-        const shouldExposeStoredValue = storedValue === "" || parseYYYYMMDDUtil(storedValue) !== null;
-        if (!shouldExposeStoredValue) {
-            onBlur(e);
-            return;
-        }
-        const prev = e.currentTarget.value;
-        e.currentTarget.value = storedValue;
-        onBlur(e);
-        e.currentTarget.value = prev;
-    }, [internalValue, isControlled, onBlur, timeZoneId, value]);
-    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, onBlur: handleBlur, 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 => {
+    }, [createInputChangeEvent, 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", locale: locale, onChange: val => {
+                    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") })] })] })] }));
@@ -2570,9 +2509,6 @@ ColorField.displayName = "ColorField";
 
 /**
  * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
- * The input shows a localized short date; when the user commits a valid day, both `onChange` and `onBlur`
- * expose `YYYY-MM-DD` on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils`
- * for a local-midnight `Date`).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -2600,13 +2536,11 @@ ColorField.displayName = "ColorField";
  * @example Date field with constraints
  * ```tsx
  * import { DateField } from "@trackunit/react-form-components";
- * import { dateToYYYYMMDDUtil } from "@trackunit/date-and-time-utils";
  * import { useState } from "react";
  *
  * const BookingForm = () => {
  *   const [checkIn, setCheckIn] = useState("");
- *   // Use the local calendar day, not UTC (avoids day-shift in non-UTC zones).
- *   const today = dateToYYYYMMDDUtil(new Date());
+ *   const today = new Date().toISOString().split("T")[0];
  *
  *   return (
  *     <DateField
@@ -5002,4 +4936,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, RadioGroupContext, 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, useCreateInputChangeEvent, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useRadioItemChecked, 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, RadioGroupContext, 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, useCreateInputChangeEvent, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useRadioItemChecked, useSelect, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.23.2",
+  "version": "1.23.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,17 +9,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.11.120",
+    "@trackunit/date-and-time-utils": "1.11.121",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.117",
-    "@trackunit/react-components": "1.22.25",
-    "@trackunit/ui-icons": "1.11.113",
-    "@trackunit/shared-utils": "1.13.117",
-    "@trackunit/ui-design-tokens": "1.11.114",
-    "@trackunit/i18n-library-translation": "1.19.2",
+    "@trackunit/css-class-variance-utilities": "1.11.118",
+    "@trackunit/react-components": "1.22.27",
+    "@trackunit/ui-icons": "1.11.114",
+    "@trackunit/shared-utils": "1.13.118",
+    "@trackunit/ui-design-tokens": "1.11.115",
+    "@trackunit/i18n-library-translation": "1.19.4",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

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

@@ -22,10 +22,9 @@ export interface DateBaseInputProps extends BaseInputExposedProps {
 /**
  * A wrapper around BaseInput with a pop-up day picker using the same calendar UI as DayPicker.
  *
- * The input shows a locale-aware date (short month, numeric day and year, e.g. "Mar 23, 2026" in English).
- * `onChange` still emits the canonical YYYY-MM-DD string for form parsing.
+ * 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, onChange, suffix: suffixProp, "data-testid": dataTestId, onBlur, ...rest }: DateBaseInputProps) => ReactElement;
+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

@@ -10,9 +10,6 @@ export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProp
 }
 /**
  * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
- * The input shows a localized short date; when the user commits a valid day, both `onChange` and `onBlur`
- * expose `YYYY-MM-DD` on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils`
- * for a local-midnight `Date`).
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -40,13 +37,11 @@ export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProp
  * @example Date field with constraints
  * ```tsx
  * import { DateField } from "@trackunit/react-form-components";
- * import { dateToYYYYMMDDUtil } from "@trackunit/date-and-time-utils";
  * import { useState } from "react";
  *
  * const BookingForm = () => {
  *   const [checkIn, setCheckIn] = useState("");
- *   // Use the local calendar day, not UTC (avoids day-shift in non-UTC zones).
- *   const today = dateToYYYYMMDDUtil(new Date());
+ *   const today = new Date().toISOString().split("T")[0];
  *
  *   return (
  *     <DateField

package/src/index.d.ts

@@ -54,6 +54,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/useCreateInputChangeEvent";
 export * from "./utilities/useGetPhoneValidationRules";
 export * from "./utilities/usePhoneInput";

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;

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

@@ -1,25 +0,0 @@
-interface DateToCalendarDayStringParams {
-    readonly date: Date | undefined;
-    readonly timeZoneId: string | undefined;
-}
-/**
- * Converts a Date instant to the canonical YYYY-MM-DD for a specific IANA time zone.
- * This preserves the calendar day the user selected in their local zone.
- */
-export declare const dateToCalendarDayString: ({ date, timeZoneId }: DateToCalendarDayStringParams) => string;
-interface DateRangeByCalendarDayParams {
-    readonly date: Date | null | undefined;
-    readonly minDate: Date | undefined;
-    readonly maxDate: Date | undefined;
-    readonly timeZoneId: string | undefined;
-}
-/**
- * Clamps a date to [minDate, maxDate] by comparing calendar days in a specific timezone.
- * Returns the original `date` when it's in range, or the relevant boundary date when out of range.
- */
-export declare const clampDateToCalendarDayRange: ({ date, minDate, maxDate, timeZoneId, }: DateRangeByCalendarDayParams) => Date | null;
-/**
- * Returns true when a date falls outside [minDate, maxDate] by calendar day in a specific timezone.
- */
-export declare const isCalendarDayOutOfRange: ({ date, minDate, maxDate, timeZoneId, }: DateRangeByCalendarDayParams) => boolean;
-export {};

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

@@ -1,23 +0,0 @@
-/**
- * Parses date-field keyboard input to a local-midnight {@link Date}.
- *
- * Strict `YYYY-MM-DD` is accepted first; a locale-ordered compact 8-digit string (e.g. `04132026`
- * in English for April 13 2026) is normalised to `YYYY-MM-DD` before that check. Otherwise the
- * string must round-trip with {@link formatShortDateUtil} for the given `locale`. Arbitrary
- * `new Date(string)`-parseable inputs that don't match the locale's format return `null` to avoid
- * accepting confusable formats like `03/07/2025`.
- *
- * @param value - Raw text from the input.
- * @param locale - Locale to compare against when the input is not `YYYY-MM-DD`.
- */
-export declare const parseDateFieldInputForChange: (value: string, locale: string | undefined) => Date | null;
-/**
- * Renders the stored date-field value for display:
- *  - empty string → empty
- *  - full canonical `YYYY-MM-DD` → locale-aware short date
- *  - partial input (e.g. `"2025-03"`) → returned as-is so the user can keep typing
- *
- * @param stored - The current canonical value (typically from `event.target.value`).
- * @param locale - Locale for the display format.
- */
-export declare const dateFieldStoredValueToDisplayString: (stored: string, locale: string | undefined) => string;