@trackunit/react-form-components 1.22.2 → 1.22.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": "yyyy-mm-dd",
+	"dateField.placeholder": "mm dd, yyyy",
 	"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",
@@ -141,76 +141,6 @@ function createInputChangeEvent(value, sourceInput) {
     };
 }
 
-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",
@@ -596,6 +526,57 @@ 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();
+/**
+ * Parses date-field keyboard input to a local-midnight {@link Date}.
+ *
+ * Strict `YYYY-MM-DD` is accepted first; otherwise the string must round-trip with
+ * {@link formatShortDateUtil} for the given `locale` (i.e. equal the canonical localized
+ * display the field would render). 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(value);
+    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;
+};
+
 function parseToDate(v) {
     if (v === undefined || v === "")
         return undefined;
@@ -606,23 +587,12 @@ function parseToDate(v) {
         return Number.isNaN(d.getTime()) ? undefined : d;
     }
     const str = String(v);
-    const fromField = parseDateFieldValue(str);
+    const fromField = dateAndTimeUtils.parseYYYYMMDDUtil(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();
 }
@@ -640,28 +610,27 @@ function clampToRange(date, minDate, maxDate) {
 /**
  * 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)
+ * 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.
  *
  * 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, ...rest }) => {
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = react.useState(() => formatToInputString(parseToDate(defaultValue)));
+    const [internalValue, setInternalValue] = react.useState(() => dateAndTimeUtils.dateToYYYYMMDDUtil(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"
-            ? (() => {
-                const strict = parseDateFieldValue(value);
-                return strict !== null ? formatToInputString(strict) : value;
-            })()
-            : formatToInputString(parseToDate(value))
-        : internalValue;
+            ? dateFieldStoredValueToDisplayString(value, locale)
+            : dateFieldStoredValueToDisplayString(dateAndTimeUtils.dateToYYYYMMDDUtil(parseToDate(value)), locale)
+        : dateFieldStoredValueToDisplayString(internalValue, locale);
     const selectedDate = isControlled && typeof value === "string"
-        ? (parseDateFieldValue(value) ?? undefined)
+        ? (dateAndTimeUtils.parseYYYYMMDDUtil(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);
@@ -695,7 +664,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
         const clamped = clampToRange(pendingDate, minDate, maxDate);
-        const str = clamped ? formatToInputString(clamped) : "";
+        const str = clamped ? dateAndTimeUtils.dateToYYYYMMDDUtil(clamped) : "";
         if (!isControlled)
             setInternalValue(str);
         onChange?.(createInputChangeEvent(str, inputRef.current));
@@ -703,12 +672,12 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
     }, [isControlled, min, max, onChange, pendingDate]);
     const handleInputChange = react.useCallback((e) => {
         const raw = e.target.value;
-        const parsed = parseDateFieldValue(raw);
+        const parsed = parseDateFieldInputForChange(raw, locale);
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
         if (parsed !== null) {
             const clamped = clampToRange(parsed, minDate, maxDate);
-            const str = clamped ? formatToInputString(clamped) : "";
+            const str = clamped ? dateAndTimeUtils.dateToYYYYMMDDUtil(clamped) : "";
             if (!isControlled)
                 setInternalValue(str);
             onChange?.(createInputChangeEvent(str, inputRef.current));
@@ -718,10 +687,10 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
                 setInternalValue(raw);
             onChange?.(e);
         }
-    }, [isControlled, min, max, onChange]);
+    }, [isControlled, locale, 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 => {
+                    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 => {
                                     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") })] })] })] }));
@@ -2504,6 +2473,10 @@ 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, `onChange` provides `YYYY-MM-DD`
+ * on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils` for a local-midnight
+ * `Date`). Do not parse `event.target.value` from `onBlur` — the visible string may be localized while
+ * `onChange` stays canonical.
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -2531,11 +2504,13 @@ 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("");
- *   const today = new Date().toISOString().split("T")[0];
+ *   // Use the local calendar day, not UTC (avoids day-shift in non-UTC zones).
+ *   const today = dateToYYYYMMDDUtil(new Date());
  *
  *   return (
  *     <DateField
@@ -5009,17 +4984,14 @@ 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,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { Temporal, toDateUtil, startOfDayUtil } from '@trackunit/date-and-time-utils';
+import { parseYYYYMMDDUtil, formatShortDateUtil, parseValidDate, toDateUtil, startOfDayUtil, dateToYYYYMMDDUtil } 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, 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": "yyyy-mm-dd",
+	"dateField.placeholder": "mm dd, yyyy",
 	"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",
@@ -140,76 +140,6 @@ function createInputChangeEvent(value, sourceInput) {
     };
 }
 
-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",
@@ -595,6 +525,57 @@ 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();
+/**
+ * Parses date-field keyboard input to a local-midnight {@link Date}.
+ *
+ * Strict `YYYY-MM-DD` is accepted first; otherwise the string must round-trip with
+ * {@link formatShortDateUtil} for the given `locale` (i.e. equal the canonical localized
+ * display the field would render). 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(value);
+    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;
+};
+
 function parseToDate(v) {
     if (v === undefined || v === "")
         return undefined;
@@ -605,23 +586,12 @@ function parseToDate(v) {
         return Number.isNaN(d.getTime()) ? undefined : d;
     }
     const str = String(v);
-    const fromField = parseDateFieldValue(str);
+    const fromField = parseYYYYMMDDUtil(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();
 }
@@ -639,28 +609,27 @@ function clampToRange(date, minDate, maxDate) {
 /**
  * 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)
+ * 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.
  *
  * 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, ...rest }) => {
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = useState(() => formatToInputString(parseToDate(defaultValue)));
+    const [internalValue, setInternalValue] = useState(() => dateToYYYYMMDDUtil(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"
-            ? (() => {
-                const strict = parseDateFieldValue(value);
-                return strict !== null ? formatToInputString(strict) : value;
-            })()
-            : formatToInputString(parseToDate(value))
-        : internalValue;
+            ? dateFieldStoredValueToDisplayString(value, locale)
+            : dateFieldStoredValueToDisplayString(dateToYYYYMMDDUtil(parseToDate(value)), locale)
+        : dateFieldStoredValueToDisplayString(internalValue, locale);
     const selectedDate = isControlled && typeof value === "string"
-        ? (parseDateFieldValue(value) ?? undefined)
+        ? (parseYYYYMMDDUtil(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);
@@ -694,7 +663,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
         const clamped = clampToRange(pendingDate, minDate, maxDate);
-        const str = clamped ? formatToInputString(clamped) : "";
+        const str = clamped ? dateToYYYYMMDDUtil(clamped) : "";
         if (!isControlled)
             setInternalValue(str);
         onChange?.(createInputChangeEvent(str, inputRef.current));
@@ -702,12 +671,12 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
     }, [isControlled, min, max, onChange, pendingDate]);
     const handleInputChange = useCallback((e) => {
         const raw = e.target.value;
-        const parsed = parseDateFieldValue(raw);
+        const parsed = parseDateFieldInputForChange(raw, locale);
         const minDate = parseToDate(min);
         const maxDate = parseToDate(max);
         if (parsed !== null) {
             const clamped = clampToRange(parsed, minDate, maxDate);
-            const str = clamped ? formatToInputString(clamped) : "";
+            const str = clamped ? dateToYYYYMMDDUtil(clamped) : "";
             if (!isControlled)
                 setInternalValue(str);
             onChange?.(createInputChangeEvent(str, inputRef.current));
@@ -717,10 +686,10 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
                 setInternalValue(raw);
             onChange?.(e);
         }
-    }, [isControlled, min, max, onChange]);
+    }, [isControlled, locale, 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 => {
+                    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 => {
                                     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") })] })] })] }));
@@ -2503,6 +2472,10 @@ 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, `onChange` provides `YYYY-MM-DD`
+ * on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils` for a local-midnight
+ * `Date`). Do not parse `event.target.value` from `onBlur` — the visible string may be localized while
+ * `onChange` stays canonical.
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -2530,11 +2503,13 @@ 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("");
- *   const today = new Date().toISOString().split("T")[0];
+ *   // Use the local calendar day, not UTC (avoids day-shift in non-UTC zones).
+ *   const today = dateToYYYYMMDDUtil(new Date());
  *
  *   return (
  *     <DateField
@@ -4930,4 +4905,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, dateToISODateUTC, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseDateFieldValue, parseSchedule, phoneErrorMessage, serializeSchedule, toISODateStringUTC, useCreatableSelect, 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, 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, useRadioItemChecked, useSelect, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.22.2",
+  "version": "1.22.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.11.101",
+    "@trackunit/date-and-time-utils": "1.11.102",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.25.76",

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

@@ -22,7 +22,8 @@ export interface DateBaseInputProps extends BaseInputExposedProps {
 /**
  * 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)
+ * 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.
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */

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

@@ -10,6 +10,10 @@ 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, `onChange` provides `YYYY-MM-DD`
+ * on `event.target.value` (use `parseYYYYMMDDUtil` from `@trackunit/date-and-time-utils` for a local-midnight
+ * `Date`). Do not parse `event.target.value` from `onBlur` — the visible string may be localized while
+ * `onChange` stays canonical.
  *
  * ### When to use
  * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
@@ -37,11 +41,13 @@ 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("");
- *   const today = new Date().toISOString().split("T")[0];
+ *   // Use the local calendar day, not UTC (avoids day-shift in non-UTC zones).
+ *   const today = dateToYYYYMMDDUtil(new Date());
  *
  *   return (
  *     <DateField

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

@@ -0,0 +1,22 @@
+/**
+ * Parses date-field keyboard input to a local-midnight {@link Date}.
+ *
+ * Strict `YYYY-MM-DD` is accepted first; otherwise the string must round-trip with
+ * {@link formatShortDateUtil} for the given `locale` (i.e. equal the canonical localized
+ * display the field would render). 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;

package/src/index.d.ts

@@ -53,7 +53,6 @@ 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/translation.cjs.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Anwenden",
 	"dateField.actions.cancel": "Abbrechen",
 	"dateField.actions.clear": "Löschen",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Dateien per Drag & Drop hinzufügen",
 	"dropzone.label.default": "<clickable>Ordner durchsuchen</clickable> oder Dateien per Drag & Drop einfügen …",
 	"emailField.error.INVALID_EMAIL": "Bitte geben Sie eine gültige E-Mail-Adresse ein",

package/translation.cjs10.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Zastosuj",
 	"dateField.actions.cancel": "Anuluj",
 	"dateField.actions.clear": "Wyczyść",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Przeciągnij i upuść dane pliku",
 	"dropzone.label.default": "<clickable>Przeglądaj</clickable> lub przeciągnij pliki tutaj...",
 	"emailField.error.INVALID_EMAIL": "Wprowadź poprawny adres e-mail",

package/translation.cjs11.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Aplicar",
 	"dateField.actions.cancel": "Cancelar",
 	"dateField.actions.clear": "Apagar",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Arrastar-e-soltar entrada de ficheiro",
 	"dropzone.label.default": "<clickable>Procure</clickable> ou arraste os ficheiros aqui...",
 	"emailField.error.INVALID_EMAIL": "Introduza um endereço de e-mail válido",

package/translation.cjs12.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Применить",
 	"dateField.actions.cancel": "Отмена",
 	"dateField.actions.clear": "Очистить",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Перетаскивание ввода файла",
 	"dropzone.label.default": "<clickable>Просмотрите</clickable> или перетащите файлы сюда...",
 	"emailField.error.INVALID_EMAIL": "Введите действительный адрес эл. почты",

package/translation.cjs13.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Aplicare",
 	"dateField.actions.cancel": "Anulare",
 	"dateField.actions.clear": "Ștergere",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Intrare fișier drag-and-drop",
 	"dropzone.label.default": "<clickable>Răsfoiți</clickable> sau trageți fișiere aici...",
 	"emailField.error.INVALID_EMAIL": "Vă rugăm să introduceți o adresă de e-mail valabilă",

package/translation.cjs14.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Aplicar",
 	"dateField.actions.cancel": "Cancelar",
 	"dateField.actions.clear": "Restablecer",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Entrada Arrastrar y soltar archivo",
 	"dropzone.label.default": "<clickable>Explore</clickable> o arrastre archivos aquí...",
 	"emailField.error.INVALID_EMAIL": "Introduzca una dirección de correo electrónico válida",

package/translation.cjs15.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Tillämpa",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Rensa",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Dra och släpp fil",
 	"dropzone.label.default": "<clickable>Bläddra</clickable> bland filerna eller dra dem hit...",
 	"emailField.error.INVALID_EMAIL": "Ange en giltig e-postadress",

package/translation.cjs16.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "適用",
 	"dateField.actions.cancel": "キャンセル",
 	"dateField.actions.clear": "クリア",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "ドラッグ＆ドロップによるファイル入力",
 	"dropzone.label.default": "<clickable>ファイルを選択</clickable>またはここにファイルをドラッグ",
 	"emailField.error.INVALID_EMAIL": "有効なメールアドレスを入力してください",

package/translation.cjs17.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "นำไปใช้",
 	"dateField.actions.cancel": "ยกเลิก",
 	"dateField.actions.clear": "ล้าง",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "ลากและวางอินพุตไฟล์",
 	"dropzone.label.default": "<clickable>เรียกดู</clickable> หรือลากไฟล์มาที่นี่...",
 	"emailField.error.INVALID_EMAIL": "โปรดป้อนที่อยู่อีเมลที่ถูกต้อง",

package/translation.cjs2.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Anvend",
 	"dateField.actions.cancel": "Annuller",
 	"dateField.actions.clear": "Ryd",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Filinput via drag-and-drop",
 	"dropzone.label.default": "<clickable>Gennemse</clickable> eller træk filer her...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.cjs3.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Použít",
 	"dateField.actions.cancel": "Zrušit",
 	"dateField.actions.clear": "Vymazat",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Přetažení vstupu do souboru",
 	"dropzone.label.default": "<clickable>Procházejte</clickable> nebo přetáhněte soubory zde...",
 	"emailField.error.INVALID_EMAIL": "Zadejte platnou e-mailovou adresu",

package/translation.cjs4.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Toepassen",
 	"dateField.actions.cancel": "Annuleren",
 	"dateField.actions.clear": "Wissen",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Drag-en-drop bestandsinvoer",
 	"dropzone.label.default": "<clickable>Bladeren</clickable> of sleep bestanden hier naartoe...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.cjs5.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Appliquer",
 	"dateField.actions.cancel": "Annuler",
 	"dateField.actions.clear": "Effacer",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Ajout de fichiers par glisser-déposer",
 	"dropzone.label.default": "<clickable>Parcourir</clickable> ou faire glisser les fichiers ici...",
 	"emailField.error.INVALID_EMAIL": "Veuillez saisir une adresse e-mail valide",

package/translation.cjs6.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Käytä",
 	"dateField.actions.cancel": "Peruuta",
 	"dateField.actions.clear": "Tyhjennä",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Vedä ja pudota tiedostosyöte",
 	"dropzone.label.default": "<clickable>Selaa</clickable> tai vedä tiedostoja täältä...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.cjs7.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Alkalmaz",
 	"dateField.actions.cancel": "Mégse",
 	"dateField.actions.clear": "Törlés",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Húzza ide a fájl(oka)t",
 	"dropzone.label.default": "<clickable>Keresse meg</clickable> vagy húza ide a fájlokat…",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.cjs8.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Applica",
 	"dateField.actions.cancel": "Annulla",
 	"dateField.actions.clear": "Cancella",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Inserimento di file tramite Trascina e rilascia",
 	"dropzone.label.default": "<clickable>Sfoglia</clickable> o trascina i file qui...",
 	"emailField.error.INVALID_EMAIL": "Inserisci un indirizzo email valido",

package/translation.cjs9.js

@@ -9,7 +9,6 @@ var translation = {
 	"dateField.actions.apply": "Bruk",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Tøm",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Dra og slipp for å legge inn fil",
 	"dropzone.label.default": "<clickable>Bla gjennom</clickable> eller dra filer hit...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Anwenden",
 	"dateField.actions.cancel": "Abbrechen",
 	"dateField.actions.clear": "Löschen",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Dateien per Drag & Drop hinzufügen",
 	"dropzone.label.default": "<clickable>Ordner durchsuchen</clickable> oder Dateien per Drag & Drop einfügen …",
 	"emailField.error.INVALID_EMAIL": "Bitte geben Sie eine gültige E-Mail-Adresse ein",

package/translation.esm10.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Zastosuj",
 	"dateField.actions.cancel": "Anuluj",
 	"dateField.actions.clear": "Wyczyść",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Przeciągnij i upuść dane pliku",
 	"dropzone.label.default": "<clickable>Przeglądaj</clickable> lub przeciągnij pliki tutaj...",
 	"emailField.error.INVALID_EMAIL": "Wprowadź poprawny adres e-mail",

package/translation.esm11.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Aplicar",
 	"dateField.actions.cancel": "Cancelar",
 	"dateField.actions.clear": "Apagar",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Arrastar-e-soltar entrada de ficheiro",
 	"dropzone.label.default": "<clickable>Procure</clickable> ou arraste os ficheiros aqui...",
 	"emailField.error.INVALID_EMAIL": "Introduza um endereço de e-mail válido",

package/translation.esm12.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Применить",
 	"dateField.actions.cancel": "Отмена",
 	"dateField.actions.clear": "Очистить",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Перетаскивание ввода файла",
 	"dropzone.label.default": "<clickable>Просмотрите</clickable> или перетащите файлы сюда...",
 	"emailField.error.INVALID_EMAIL": "Введите действительный адрес эл. почты",

package/translation.esm13.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Aplicare",
 	"dateField.actions.cancel": "Anulare",
 	"dateField.actions.clear": "Ștergere",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Intrare fișier drag-and-drop",
 	"dropzone.label.default": "<clickable>Răsfoiți</clickable> sau trageți fișiere aici...",
 	"emailField.error.INVALID_EMAIL": "Vă rugăm să introduceți o adresă de e-mail valabilă",

package/translation.esm14.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Aplicar",
 	"dateField.actions.cancel": "Cancelar",
 	"dateField.actions.clear": "Restablecer",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Entrada Arrastrar y soltar archivo",
 	"dropzone.label.default": "<clickable>Explore</clickable> o arrastre archivos aquí...",
 	"emailField.error.INVALID_EMAIL": "Introduzca una dirección de correo electrónico válida",

package/translation.esm15.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Tillämpa",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Rensa",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Dra och släpp fil",
 	"dropzone.label.default": "<clickable>Bläddra</clickable> bland filerna eller dra dem hit...",
 	"emailField.error.INVALID_EMAIL": "Ange en giltig e-postadress",

package/translation.esm16.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "適用",
 	"dateField.actions.cancel": "キャンセル",
 	"dateField.actions.clear": "クリア",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "ドラッグ＆ドロップによるファイル入力",
 	"dropzone.label.default": "<clickable>ファイルを選択</clickable>またはここにファイルをドラッグ",
 	"emailField.error.INVALID_EMAIL": "有効なメールアドレスを入力してください",

package/translation.esm17.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "นำไปใช้",
 	"dateField.actions.cancel": "ยกเลิก",
 	"dateField.actions.clear": "ล้าง",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "ลากและวางอินพุตไฟล์",
 	"dropzone.label.default": "<clickable>เรียกดู</clickable> หรือลากไฟล์มาที่นี่...",
 	"emailField.error.INVALID_EMAIL": "โปรดป้อนที่อยู่อีเมลที่ถูกต้อง",

package/translation.esm2.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Anvend",
 	"dateField.actions.cancel": "Annuller",
 	"dateField.actions.clear": "Ryd",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Filinput via drag-and-drop",
 	"dropzone.label.default": "<clickable>Gennemse</clickable> eller træk filer her...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm3.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Použít",
 	"dateField.actions.cancel": "Zrušit",
 	"dateField.actions.clear": "Vymazat",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Přetažení vstupu do souboru",
 	"dropzone.label.default": "<clickable>Procházejte</clickable> nebo přetáhněte soubory zde...",
 	"emailField.error.INVALID_EMAIL": "Zadejte platnou e-mailovou adresu",

package/translation.esm4.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Toepassen",
 	"dateField.actions.cancel": "Annuleren",
 	"dateField.actions.clear": "Wissen",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Drag-en-drop bestandsinvoer",
 	"dropzone.label.default": "<clickable>Bladeren</clickable> of sleep bestanden hier naartoe...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm5.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Appliquer",
 	"dateField.actions.cancel": "Annuler",
 	"dateField.actions.clear": "Effacer",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Ajout de fichiers par glisser-déposer",
 	"dropzone.label.default": "<clickable>Parcourir</clickable> ou faire glisser les fichiers ici...",
 	"emailField.error.INVALID_EMAIL": "Veuillez saisir une adresse e-mail valide",

package/translation.esm6.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Käytä",
 	"dateField.actions.cancel": "Peruuta",
 	"dateField.actions.clear": "Tyhjennä",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Vedä ja pudota tiedostosyöte",
 	"dropzone.label.default": "<clickable>Selaa</clickable> tai vedä tiedostoja täältä...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm7.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Alkalmaz",
 	"dateField.actions.cancel": "Mégse",
 	"dateField.actions.clear": "Törlés",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Húzza ide a fájl(oka)t",
 	"dropzone.label.default": "<clickable>Keresse meg</clickable> vagy húza ide a fájlokat…",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm8.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Applica",
 	"dateField.actions.cancel": "Annulla",
 	"dateField.actions.clear": "Cancella",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Inserimento di file tramite Trascina e rilascia",
 	"dropzone.label.default": "<clickable>Sfoglia</clickable> o trascina i file qui...",
 	"emailField.error.INVALID_EMAIL": "Inserisci un indirizzo email valido",

package/translation.esm9.js

@@ -7,7 +7,6 @@ var translation = {
 	"dateField.actions.apply": "Bruk",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Tøm",
-	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Dra og slipp for å legge inn fil",
 	"dropzone.label.default": "<clickable>Bla gjennom</clickable> eller dra filer hit...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/src/utilities/parseDateFieldValue.d.ts

@@ -1,26 +0,0 @@
-/**
- * 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;