@xsolla/xui-date-picker 0.206.0 → 0.206.2

package/README.md

@@ -13,7 +13,7 @@ It’s a form field that lets users select a single date or date range. It is al
 - When the date is derived automatically and not user-selected
 
 ### Content guidelines
-- Placeholder text: use *"Choose a date"* for single mode and *"Enter a date range"* for range mode — these are the defaults.
+- Placeholder text: use *"Choose a date"* for single mode and *"Choose a date range"* for range mode — these are the defaults.
 - Labels (via Field Group): keep them short and clear — *"Date"*, *"Start date"*, *"Report period"*.
 - Error messages: explain what went wrong — *"Please select a date"* or *"End date must be after start date"*.
 - Use standard labels — Today, Yesterday, Last 7 days, Last 30 days, This month, Last month. Chip labels are shown directly in the DatePicker field when a chip is selected, so keep them short and self-explanatory — the label must make sense both in the chip row and as standalone field content.
@@ -96,7 +96,8 @@ const [date, setDate] = useState<Date | null>(null);
 | `endDate` | `Date \| null` | — | Range end date. |
 | `selectsRange` | `boolean` | `false` | Enable range selection. |
 | `onChange` | `(date: Date \| DateRangeType) => void` | — | Fired when the date or range changes. |
-| `placeholder` | `string` | `'MM/DD/YYYY'` | Placeholder for the input. |
+| `placeholder` | `string` | `'Choose a date'` / `'Choose a date range'` | Placeholder for the input, shown while it is empty. Not derived from `dateFormat`. |
+| `dateFormat` | `string` | `'MM/dd/yyyy'` | `date-fns` format used to render and parse the field. Numeric tokens only — see [Date formats](#date-formats). |
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Input size. |
 | `disabled` | `boolean` | `false` | Disable the input. |
 | `backgroundColor` | `string` | — | Custom background colour for the input. |
@@ -122,6 +123,28 @@ const [date, setDate] = useState<Date | null>(null);
 
 Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
 
+### Date formats
+
+The field is edited segment by segment (type digits, arrow-step a segment, tab between them), so `dateFormat` supports **numeric tokens only** — exactly three, in any order, with anything between them treated as a literal separator:
+
+| Token | Segment | Rendered as |
+| --- | --- | --- |
+| `d`, `dd` | Day | Always two digits (`05`) |
+| `M`, `MM` | Month | Always two digits (`03`) |
+| `y`, `yyyy` | Year | Always four digits (`2026`) |
+
+```tsx
+<DatePicker dateFormat="dd/MM/yyyy" />  // 15/03/2026
+<DatePicker dateFormat="yyyy-MM-dd" />  // 2026-03-15
+<DatePicker dateFormat="dd.MM.yyyy" />  // 15.03.2026
+```
+
+While the field is focused or partly filled it shows a mask built from the format (`dd/mm/yyyy`), which is separate from `placeholder` — the placeholder shows only while the field is empty and does not track `dateFormat`.
+
+**Mind the casing.** `date-fns` tokens are not Moment.js/Day.js tokens: month is `MM` (`mm` is *minutes*), day is `dd` (`DD` is day-of-year) and year is `yyyy` (`YYYY` is week-numbering year). Passing `dd/mm/yyyy`, `DD/MM/YYYY`, `dd/MM/YYYY` or `DD.MM.YYYY` is read as the intended `dd/MM/yyyy` and logs a `console.warn` in development naming the token and its replacement. Fix the format string rather than relying on the repair.
+
+**Not supported:** textual and localised tokens (`MMM`, `MMMM`, `P`, `PP`), time tokens (`HH:mm`), escaped literals (`'de'`), and formats missing one of the three segments (`MM/yyyy` — the field could never be completed, so `onChange` would never fire). These warn in development and fall back to `MM/dd/yyyy`, so the field stays completable and never renders raw token text as though it were a value. To display a date as `Mar 15, 2026`, format it yourself with `formatDate` outside the picker.
+
 ### `<Calendar>`
 
 Re-exported from `@xsolla/xui-calendar`. Standalone single-month calendar.
@@ -146,7 +169,7 @@ Re-exported from `@xsolla/xui-calendar`. Preset chips bar (e.g. "Last 7 days", "
 
 | Export | Type | Description |
 | --- | --- | --- |
-| `formatDate` | `(date: Date, formatStr: string, locale?: CalendarLocaleType) => string` | Format a date with a `date-fns` locale identifier. |
+| `formatDate` | `(date: Date, formatStr: string, locale?: CalendarLocaleType) => string` | Format a date with a `date-fns` locale identifier. Re-exported from `@xsolla/xui-calendar`; the full `date-fns` token set applies, so use it for display text the picker's own field cannot render (`MMM d, yyyy`). |
 
 ### Types
 

package/native/index.d.mts

@@ -1,5 +1,5 @@
-import { CalendarProps, CalendarLocaleType } from '@xsolla/xui-calendar';
-export { Calendar, CalendarChipOption, CalendarChips, CalendarChipsProps, CalendarGrid, CalendarGridProps, CalendarHeader, CalendarHeaderProps, CalendarLocaleType, CalendarProps, DualCalendar, DualCalendarProps } from '@xsolla/xui-calendar';
+import { CalendarProps } from '@xsolla/xui-calendar';
+export { Calendar, CalendarChipOption, CalendarChips, CalendarChipsProps, CalendarGrid, CalendarGridProps, CalendarHeader, CalendarHeaderProps, CalendarLocaleType, CalendarProps, DualCalendar, DualCalendarProps, formatDate } from '@xsolla/xui-calendar';
 import * as react from 'react';
 import { ReactNode, FocusEvent, MouseEvent, KeyboardEvent, ClipboardEvent } from 'react';
 import { ThemeMode, ProductContext } from '@xsolla/xui-core';
@@ -44,11 +44,7 @@ interface DatePickerProps extends Omit<CalendarProps, "onChange"> {
      * Placeholder text for the input
      */
     placeholder?: string;
-    /**
-     * date-fns format string used to both render and parse the field's text value
-     * (e.g. `"dd/MM/yyyy"`). Applies to each date in a range. Defaults to
-     * `"MM/dd/yyyy"`.
-     */
+    /** `date-fns` format for the field, defaulting to `"MM/dd/yyyy"`. Numeric `d`/`dd`, `M`/`MM` and `y`/`yyyy` tokens only, in any order (mind the casing — `mm` is minutes); anything else warns in development and falls back to the default. */
     dateFormat?: string;
     /**
      * Size of the input
@@ -130,7 +126,6 @@ interface DatePickerProps extends Omit<CalendarProps, "onChange"> {
 
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<any>>;
 
-declare function formatDate(date: Date, formatStr: string, locale?: CalendarLocaleType): string;
 type DateSegmentType = "day" | "month" | "year";
 /** A date broken into editable parts; `null` means "not yet filled". */
 interface DateParts {
@@ -152,6 +147,28 @@ type FormatToken = {
     kind: "literal";
     text: string;
 };
+/** Default format for rendering/parsing the field's text value (overridable via `dateFormat`). */
+declare const DEFAULT_DATE_FORMAT = "MM/dd/yyyy";
+/** What is wrong with one token of a `dateFormat`. */
+interface DateFormatIssue {
+    /** Offending token as written, or the segment name for `kind: "missing"`. */
+    token: string;
+    kind: "casing" | "unsupported" | "missing";
+    /** The `date-fns` token to use instead (`casing` only). */
+    suggestion?: string;
+}
+interface DateFormatAnalysis {
+    /** The format the field should actually use (repaired input, or the fallback). */
+    format: string;
+    usedFallback: boolean;
+    issues: DateFormatIssue[];
+}
+/** Repair a caller's `dateFormat` where the case is unambiguously wrong, else fall back when it is unusable (unsupported token, or a missing segment). */
+declare function analyzeDateFormat(format: string, fallback?: string): DateFormatAnalysis;
+/** Human-readable warning for a failed {@link analyzeDateFormat}. */
+declare function describeDateFormatIssues(format: string, analysis: DateFormatAnalysis): string;
+/** Resolve a `dateFormat` to one the field can render, warning once per offending format in development. See {@link analyzeDateFormat}. */
+declare function resolveDateFormat(format: string, fallback?: string): string;
 /** Split a date format into ordered segment tokens and literal separators. */
 declare function parseDateFormat(format: string): FormatToken[];
 declare function datePartsFromDate(date: Date | null | undefined): DateParts;
@@ -202,4 +219,4 @@ declare function getDateSegments(format: string, value: string): DateSegment[];
  */
 declare function stepDateSegment(date: Date, type: DateSegmentType, delta: number): Date;
 
-export { type DateParts, DatePicker, type DatePickerAlignment, type DatePickerDropdownPosition, type DatePickerPlacement, type DatePickerProps, type DatePickerSide, type DateRangeType, type DateSegment, type DateSegmentType, type SegmentRange, buildSegmentedValue, clampDatePart, datePartsFromDate, datePartsToDate, daysInMonth, formatDate, getDateSegments, isDatePartsComplete, isSegmentComplete, parseDateFormat, stepDatePart, stepDateSegment };
+export { DEFAULT_DATE_FORMAT, type DateFormatAnalysis, type DateFormatIssue, type DateParts, DatePicker, type DatePickerAlignment, type DatePickerDropdownPosition, type DatePickerPlacement, type DatePickerProps, type DatePickerSide, type DateRangeType, type DateSegment, type DateSegmentType, type SegmentRange, analyzeDateFormat, buildSegmentedValue, clampDatePart, datePartsFromDate, datePartsToDate, daysInMonth, describeDateFormatIssues, getDateSegments, isDatePartsComplete, isSegmentComplete, parseDateFormat, resolveDateFormat, stepDatePart, stepDateSegment };

package/native/index.d.ts

@@ -1,5 +1,5 @@
-import { CalendarProps, CalendarLocaleType } from '@xsolla/xui-calendar';
-export { Calendar, CalendarChipOption, CalendarChips, CalendarChipsProps, CalendarGrid, CalendarGridProps, CalendarHeader, CalendarHeaderProps, CalendarLocaleType, CalendarProps, DualCalendar, DualCalendarProps } from '@xsolla/xui-calendar';
+import { CalendarProps } from '@xsolla/xui-calendar';
+export { Calendar, CalendarChipOption, CalendarChips, CalendarChipsProps, CalendarGrid, CalendarGridProps, CalendarHeader, CalendarHeaderProps, CalendarLocaleType, CalendarProps, DualCalendar, DualCalendarProps, formatDate } from '@xsolla/xui-calendar';
 import * as react from 'react';
 import { ReactNode, FocusEvent, MouseEvent, KeyboardEvent, ClipboardEvent } from 'react';
 import { ThemeMode, ProductContext } from '@xsolla/xui-core';
@@ -44,11 +44,7 @@ interface DatePickerProps extends Omit<CalendarProps, "onChange"> {
      * Placeholder text for the input
      */
     placeholder?: string;
-    /**
-     * date-fns format string used to both render and parse the field's text value
-     * (e.g. `"dd/MM/yyyy"`). Applies to each date in a range. Defaults to
-     * `"MM/dd/yyyy"`.
-     */
+    /** `date-fns` format for the field, defaulting to `"MM/dd/yyyy"`. Numeric `d`/`dd`, `M`/`MM` and `y`/`yyyy` tokens only, in any order (mind the casing — `mm` is minutes); anything else warns in development and falls back to the default. */
     dateFormat?: string;
     /**
      * Size of the input
@@ -130,7 +126,6 @@ interface DatePickerProps extends Omit<CalendarProps, "onChange"> {
 
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<any>>;
 
-declare function formatDate(date: Date, formatStr: string, locale?: CalendarLocaleType): string;
 type DateSegmentType = "day" | "month" | "year";
 /** A date broken into editable parts; `null` means "not yet filled". */
 interface DateParts {
@@ -152,6 +147,28 @@ type FormatToken = {
     kind: "literal";
     text: string;
 };
+/** Default format for rendering/parsing the field's text value (overridable via `dateFormat`). */
+declare const DEFAULT_DATE_FORMAT = "MM/dd/yyyy";
+/** What is wrong with one token of a `dateFormat`. */
+interface DateFormatIssue {
+    /** Offending token as written, or the segment name for `kind: "missing"`. */
+    token: string;
+    kind: "casing" | "unsupported" | "missing";
+    /** The `date-fns` token to use instead (`casing` only). */
+    suggestion?: string;
+}
+interface DateFormatAnalysis {
+    /** The format the field should actually use (repaired input, or the fallback). */
+    format: string;
+    usedFallback: boolean;
+    issues: DateFormatIssue[];
+}
+/** Repair a caller's `dateFormat` where the case is unambiguously wrong, else fall back when it is unusable (unsupported token, or a missing segment). */
+declare function analyzeDateFormat(format: string, fallback?: string): DateFormatAnalysis;
+/** Human-readable warning for a failed {@link analyzeDateFormat}. */
+declare function describeDateFormatIssues(format: string, analysis: DateFormatAnalysis): string;
+/** Resolve a `dateFormat` to one the field can render, warning once per offending format in development. See {@link analyzeDateFormat}. */
+declare function resolveDateFormat(format: string, fallback?: string): string;
 /** Split a date format into ordered segment tokens and literal separators. */
 declare function parseDateFormat(format: string): FormatToken[];
 declare function datePartsFromDate(date: Date | null | undefined): DateParts;
@@ -202,4 +219,4 @@ declare function getDateSegments(format: string, value: string): DateSegment[];
  */
 declare function stepDateSegment(date: Date, type: DateSegmentType, delta: number): Date;
 
-export { type DateParts, DatePicker, type DatePickerAlignment, type DatePickerDropdownPosition, type DatePickerPlacement, type DatePickerProps, type DatePickerSide, type DateRangeType, type DateSegment, type DateSegmentType, type SegmentRange, buildSegmentedValue, clampDatePart, datePartsFromDate, datePartsToDate, daysInMonth, formatDate, getDateSegments, isDatePartsComplete, isSegmentComplete, parseDateFormat, stepDatePart, stepDateSegment };
+export { DEFAULT_DATE_FORMAT, type DateFormatAnalysis, type DateFormatIssue, type DateParts, DatePicker, type DatePickerAlignment, type DatePickerDropdownPosition, type DatePickerPlacement, type DatePickerProps, type DatePickerSide, type DateRangeType, type DateSegment, type DateSegmentType, type SegmentRange, analyzeDateFormat, buildSegmentedValue, clampDatePart, datePartsFromDate, datePartsToDate, daysInMonth, describeDateFormatIssues, getDateSegments, isDatePartsComplete, isSegmentComplete, parseDateFormat, resolveDateFormat, stepDatePart, stepDateSegment };

package/native/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
@@ -34,18 +24,22 @@ __export(index_exports, {
   CalendarChips: () => import_xui_calendar2.CalendarChips,
   CalendarGrid: () => import_xui_calendar2.CalendarGrid,
   CalendarHeader: () => import_xui_calendar2.CalendarHeader,
+  DEFAULT_DATE_FORMAT: () => DEFAULT_DATE_FORMAT,
   DatePicker: () => DatePicker,
   DualCalendar: () => import_xui_calendar2.DualCalendar,
+  analyzeDateFormat: () => analyzeDateFormat,
   buildSegmentedValue: () => buildSegmentedValue,
   clampDatePart: () => clampDatePart,
   datePartsFromDate: () => datePartsFromDate,
   datePartsToDate: () => datePartsToDate,
   daysInMonth: () => daysInMonth,
-  formatDate: () => formatDate,
+  describeDateFormatIssues: () => describeDateFormatIssues,
+  formatDate: () => import_xui_calendar2.formatDate,
   getDateSegments: () => getDateSegments,
   isDatePartsComplete: () => isDatePartsComplete,
   isSegmentComplete: () => isSegmentComplete,
   parseDateFormat: () => parseDateFormat,
+  resolveDateFormat: () => resolveDateFormat,
   stepDatePart: () => stepDatePart,
   stepDateSegment: () => stepDateSegment
 });
@@ -298,20 +292,11 @@ var isNative = true;
 
 // src/DatePicker.tsx
 var import_xui_input = require("@xsolla/xui-input");
-var import_date_fns2 = require("date-fns");
+var import_date_fns = require("date-fns");
 var import_xui_calendar = require("@xsolla/xui-calendar");
 var import_xui_icons_base = require("@xsolla/xui-icons-base");
 
 // src/utils.ts
-var import_date_fns = require("date-fns");
-var locales = __toESM(require("date-fns/locale"));
-var defaultLocale = "enUS";
-function formatDate(date, formatStr, locale = defaultLocale) {
-  const localeObj = locales[locale] || locales[defaultLocale];
-  return (0, import_date_fns.format)(date, formatStr, {
-    locale: localeObj
-  });
-}
 var SEGMENT_WIDTH = {
   day: 2,
   month: 2,
@@ -322,21 +307,109 @@ var SEGMENT_TOKEN = {
   month: "mm",
   year: "yyyy"
 };
-function parseDateFormat(format2) {
+var DEFAULT_DATE_FORMAT = "MM/dd/yyyy";
+var SEGMENT_LETTER = {
+  d: "day",
+  M: "month",
+  y: "year"
+};
+var CASING_REPAIRS = { D: "d", Y: "y", m: "M" };
+var SUPPORTED_TOKENS_HINT = "supported tokens are `d`/`dd` (day), `M`/`MM` (month) and `y`/`yyyy` (year); any other character is a literal separator. Textual and localised tokens (`MMM`, `MMMM`, `P`, `PP`) are not supported \u2014 the field renders numeric segments only.";
+var ALL_SEGMENTS = ["day", "month", "year"];
+var isLetter = (c) => /[A-Za-z]/.test(c);
+var isSupportedRun = (letter, length) => {
+  if (letter === "y") return true;
+  if (letter === "d" || letter === "M") return length <= 2;
+  return false;
+};
+function analyzeDateFormat(format, fallback = DEFAULT_DATE_FORMAT) {
+  const issues = [];
+  const used = /* @__PURE__ */ new Set();
+  for (let i2 = 0; i2 < format.length; i2++) {
+    if (isLetter(format[i2])) used.add(format[i2]);
+  }
+  let repaired = "";
+  let hasUnsupported = false;
+  let i = 0;
+  while (i < format.length) {
+    const c = format[i];
+    if (!isLetter(c)) {
+      repaired += c;
+      i++;
+      continue;
+    }
+    let end = i;
+    while (end < format.length && format[end] === c) end++;
+    const run = format.slice(i, end);
+    i = end;
+    if (isSupportedRun(c, run.length)) {
+      repaired += run;
+      continue;
+    }
+    const repair = CASING_REPAIRS[c];
+    if (repair && !used.has(repair) && isSupportedRun(repair, run.length)) {
+      const fixed = repair.repeat(run.length);
+      issues.push({ token: run, kind: "casing", suggestion: fixed });
+      repaired += fixed;
+      continue;
+    }
+    issues.push({ token: run, kind: "unsupported" });
+    hasUnsupported = true;
+    repaired += run;
+  }
+  const present = new Set(
+    parseDateFormat(repaired).filter(
+      (t) => t.kind === "segment"
+    ).map((t) => t.type)
+  );
+  const missing = ALL_SEGMENTS.filter((type) => !present.has(type));
+  for (const type of missing) issues.push({ token: type, kind: "missing" });
+  const usable = !hasUnsupported && missing.length === 0;
+  return {
+    format: usable ? repaired : fallback,
+    usedFallback: !usable,
+    issues
+  };
+}
+function describeDateFormatIssues(format, analysis) {
+  const clauses = analysis.issues.map((issue) => {
+    if (issue.kind === "missing") {
+      return `it has no ${issue.token} segment, so the field can never be completed`;
+    }
+    if (issue.kind === "casing") {
+      return `\`${issue.token}\` is not a \`date-fns\` date token \u2014 use \`${issue.suggestion}\``;
+    }
+    return `\`${issue.token}\` is not a supported token`;
+  });
+  const resolution = analysis.usedFallback ? `Falling back to \`${analysis.format}\`.` : `Reading it as \`${analysis.format}\`.`;
+  return `[DatePicker] Invalid \`dateFormat\` \`${format}\`: ${clauses.join("; ")}. ${resolution} Note ${SUPPORTED_TOKENS_HINT}`;
+}
+var warnedFormats = /* @__PURE__ */ new Set();
+function resolveDateFormat(format, fallback = DEFAULT_DATE_FORMAT) {
+  const analysis = analyzeDateFormat(format, fallback);
+  if (analysis.issues.length > 0) {
+    const key = `${format}|${fallback}`;
+    const isProduction = globalThis.process?.env?.NODE_ENV === "production";
+    if (!isProduction && !warnedFormats.has(key)) {
+      warnedFormats.add(key);
+      console.warn(describeDateFormatIssues(format, analysis));
+    }
+  }
+  return analysis.format;
+}
+function parseDateFormat(format) {
   const tokens = [];
   let i = 0;
-  while (i < format2.length) {
-    const c = format2[i];
-    if (c === "d" || c === "M" || c === "y") {
-      while (i < format2.length && format2[i] === c) i++;
-      tokens.push({
-        kind: "segment",
-        type: c === "d" ? "day" : c === "M" ? "month" : "year"
-      });
+  while (i < format.length) {
+    const c = format[i];
+    const type = SEGMENT_LETTER[c];
+    if (type) {
+      while (i < format.length && format[i] === c) i++;
+      tokens.push({ kind: "segment", type });
     } else {
       let text = "";
-      while (i < format2.length && !"dMy".includes(format2[i])) {
-        text += format2[i];
+      while (i < format.length && !SEGMENT_LETTER[format[i]]) {
+        text += format[i];
         i++;
       }
       tokens.push({ kind: "literal", text });
@@ -380,8 +453,8 @@ function stepDatePart(type, current, delta, parts) {
   const dim = daysInMonth(year, monthIndex);
   return ((current - 1 + delta) % dim + dim) % dim + 1;
 }
-function buildSegmentedValue(format2, parts, active) {
-  const tokens = parseDateFormat(format2);
+function buildSegmentedValue(format, parts, active) {
+  const tokens = parseDateFormat(format);
   let text = "";
   const ranges = [];
   for (const token of tokens) {
@@ -422,14 +495,14 @@ function isSegmentComplete(type, buffer) {
 function daysInMonth(year, monthIndex) {
   return new Date(year, monthIndex + 1, 0).getDate();
 }
-function getDateSegments(format2, value) {
+function getDateSegments(format, value) {
   const segments = [];
   let fi = 0;
   let vi = 0;
-  while (fi < format2.length && vi < value.length) {
-    const fc = format2[fi];
+  while (fi < format.length && vi < value.length) {
+    const fc = format[fi];
     if (fc === "d" || fc === "M" || fc === "y") {
-      while (fi < format2.length && format2[fi] === fc) fi++;
+      while (fi < format.length && format[fi] === fc) fi++;
       const start = vi;
       while (vi < value.length && value[vi] >= "0" && value[vi] <= "9") vi++;
       if (vi > start) {
@@ -474,7 +547,6 @@ function stepDateSegment(date, type, delta) {
 // src/DatePicker.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var PLACEMENT_OFFSET = 4;
-var DEFAULT_DATE_FORMAT = "MM/dd/yyyy";
 var RANGE_SEPARATOR = /\s*[-–—]\s*/;
 var RANGE_DISPLAY_SEP = " - ";
 var CalendarFieldIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Calendar, { size: "100%" });
@@ -576,6 +648,10 @@ var DatePicker = (0, import_react.forwardRef)(
     const editable = !readOnly && !rest.disabled;
     const isDual = variant === "dual";
     const isRange = isDual || selectsRange;
+    const resolvedFormat = (0, import_react.useMemo)(
+      () => resolveDateFormat(dateFormat),
+      [dateFormat]
+    );
     const propGroups = (0, import_react.useCallback)(
       () => isRange ? [datePartsFromDate(startDate), datePartsFromDate(endDate)] : [datePartsFromDate(selectedDate)],
       [isRange, startDate, endDate, selectedDate]
@@ -623,7 +699,7 @@ var DatePicker = (0, import_react.forwardRef)(
     };
     const composeField = () => {
       const build = (group) => buildSegmentedValue(
-        dateFormat,
+        resolvedFormat,
         groups[group] ?? { day: null, month: null, year: null },
         edit && edit.group === group ? { type: edit.type, buffer: edit.buffer } : void 0
       );
@@ -870,8 +946,8 @@ var DatePicker = (0, import_react.forwardRef)(
     const parseOne = (token) => {
       const trimmed = token.trim();
       if (!trimmed) return null;
-      const parsed = (0, import_date_fns2.parse)(trimmed, dateFormat, /* @__PURE__ */ new Date());
-      return (0, import_date_fns2.isValid)(parsed) ? parsed : null;
+      const parsed = (0, import_date_fns.parse)(trimmed, resolvedFormat, /* @__PURE__ */ new Date());
+      return (0, import_date_fns.isValid)(parsed) ? parsed : null;
     };
     const handlePaste = (e) => {
       onPasteProp?.(e);
@@ -887,7 +963,7 @@ var DatePicker = (0, import_react.forwardRef)(
         const end = parseOne(endText ?? "");
         if (!start) {
           setParseError(
-            `Enter a valid date range (${dateFormat} - ${dateFormat})`
+            `Enter a valid date range (${resolvedFormat} - ${resolvedFormat})`
           );
           return;
         }
@@ -895,7 +971,7 @@ var DatePicker = (0, import_react.forwardRef)(
       } else {
         const date = parseOne(text);
         if (!date) {
-          setParseError(`Enter a valid date (${dateFormat})`);
+          setParseError(`Enter a valid date (${resolvedFormat})`);
           return;
         }
         next = [datePartsFromDate(date)];
@@ -1091,7 +1167,7 @@ var DatePicker = (0, import_react.forwardRef)(
               ...rest,
               ref: inputRef,
               size,
-              placeholder: placeholder || (isRange ? "Enter a date range" : "Choose a date"),
+              placeholder: placeholder || (isRange ? "Choose a date range" : "Choose a date"),
               value: inputValue,
               readOnly,
               onFocus: handleFieldFocus,
@@ -1139,18 +1215,22 @@ DatePicker.displayName = "DatePicker";
   CalendarChips,
   CalendarGrid,
   CalendarHeader,
+  DEFAULT_DATE_FORMAT,
   DatePicker,
   DualCalendar,
+  analyzeDateFormat,
   buildSegmentedValue,
   clampDatePart,
   datePartsFromDate,
   datePartsToDate,
   daysInMonth,
+  describeDateFormatIssues,
   formatDate,
   getDateSegments,
   isDatePartsComplete,
   isSegmentComplete,
   parseDateFormat,
+  resolveDateFormat,
   stepDatePart,
   stepDateSegment
 });