@carlonicora/nextjs-jsonapi 6.24.0 → 6.26.0

package/dist/utils/date-formatter.d.ts

@@ -11,12 +11,53 @@ type FormatOption = "date" | "time" | "dateTime" | "timeSince" | "default";
  * instant in time and the UTC shift is correct.
  */
 export declare const formatLocalDate: (d: Date) => string;
+export type DateFormatStyle = "date" | "dateMedium" | "dateLong" | "dateTime" | "dateTimeMedium" | "dateTimeLong" | "dateTimeSeconds" | "time" | "weekdayDateTime" | "weekdayDay" | "monthYear" | "monthYearLong" | "month" | "monthLong" | "dayMonth" | "weekday" | "weekdayLong";
 /**
- * The locale `formatDate` should use for an app locale. English keeps "en-GB",
- * the formatter's historical default, so English output never changes; any
- * other app locale ("it") is used as is.
+ * The option set behind each named style. No style pins `hour12` / `hourCycle`:
+ * the clock (12 or 24 hours) follows the locale.
  */
+export declare const DATE_STYLE_OPTIONS: Record<DateFormatStyle, Intl.DateTimeFormatOptions>;
+/** Public pages never show an all-numeric date: the month is spelled out. */
+export declare const PUBLIC_STYLE_MAP: Partial<Record<DateFormatStyle, DateFormatStyle>>;
+/**
+ * The locale every real-world date is formatted in.
+ *
+ * The first `Accept-Language` entry (quality order) whose language equals the
+ * app language's and that `Intl` supports; otherwise the app language. A
+ * malformed entry (`*`, an unparseable or zero quality, an unknown tag) is
+ * skipped, never thrown on.
+ */
+export declare function resolveDateLocale(params: {
+    appLocale: string;
+    acceptLanguage?: string;
+}): string;
+/**
+ * Formats a date in a named style. Returns "" for `undefined` or a value that
+ * does not parse. `isPublic` swaps the all-numeric styles for month-as-word.
+ */
+export declare function formatDateStyle(params: {
+    date: Date | string | undefined;
+    style: DateFormatStyle;
+    locale: string;
+    timeZone?: string;
+    isPublic?: boolean;
+}): string;
+/** "3 hours ago" / "3 ore fa", always numeric ("1 day ago", never "yesterday"). */
+export declare function formatRelativeDate(params: {
+    date: Date | string;
+    locale: string;
+    now?: Date;
+}): string;
+/** True when the locale's clock is 12-hour (hour cycle h11 / h12). */
+export declare function usesTwelveHourClock(locale: string): boolean;
+/** The locale to format dates in for an app locale: the app locale itself, English when missing. */
 export declare const dateFormatLocale: (appLocale?: string) => string;
-export declare const formatDate: (eventDate: Date, formatOption: FormatOption, locale?: string) => string;
+/**
+ * @deprecated Use `formatDateStyle` (or `useDateFormatter().format`) and
+ * `formatRelativeDate` (or `useDateFormatter().relative`). Kept for other nja
+ * apps: same default locale and the same "date" / "time" / "dateTime" output.
+ * Pass `now` from render code; the `new Date()` fallback is for legacy callers.
+ */
+export declare const formatDate: (eventDate: Date, formatOption: FormatOption, locale?: string, now?: Date) => string;
 export type { FormatOption };
 //# sourceMappingURL=date-formatter.d.ts.map

package/dist/utils/date-formatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-formatter.d.ts","sourceRoot":"","sources":["../../src/utils/date-formatter.ts"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC;AAE3E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,GAAI,GAAG,IAAI,KAAG,MAKzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,KAAG,MACgB,CAAC;AAEvE,eAAO,MAAM,UAAU,GAAI,WAAW,IAAI,EAAE,cAAc,YAAY,EAAE,SAAQ,MAAgB,KAAG,MAsDlG,CAAC;AAEF,YAAY,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"date-formatter.d.ts","sourceRoot":"","sources":["../../src/utils/date-formatter.ts"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC;AAE3E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,GAAI,GAAG,IAAI,KAAG,MAKzC,CAAC;AAEF,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,YAAY,GACZ,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,MAAM,GACN,iBAAiB,GACjB,YAAY,GACZ,WAAW,GACX,eAAe,GACf,OAAO,GACP,WAAW,GACX,UAAU,GACV,SAAS,GACT,aAAa,CAAC;AAIlB;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,CAkBlF,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,eAAe,CAAC,CAI9E,CAAC;AAyCF;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAqChG;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE;IACtC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IAChC,KAAK,EAAE,eAAe,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,MAAM,CAKT;AAED,mFAAmF;AACnF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,IAAI,CAAA;CAAE,GAAG,MAAM,CAgBtG;AAED,sEAAsE;AACtE,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAG3D;AAED,oGAAoG;AACpG,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,KAAG,MAA2B,CAAC;AAKlF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GACrB,WAAW,IAAI,EACf,cAAc,YAAY,EAC1B,SAAQ,MAAgB,EACxB,MAAM,IAAI,KACT,MAqBF,CAAC;AAEF,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/utils/index.d.ts

@@ -2,7 +2,7 @@ export type { ClassValue } from "clsx";
 export { cn } from "./cn";
 export { composeRefs, useComposedRefs } from "./compose-refs";
 export { useIsMobile, MOBILE_BREAKPOINT, VIEWPORT_COOKIE_NAME } from "./use-mobile";
-export { dateFormatLocale, formatDate, formatLocalDate, type FormatOption } from "./date-formatter";
+export { dateFormatLocale, formatDate, formatDateStyle, formatLocalDate, formatRelativeDate, resolveDateLocale, usesTwelveHourClock, type DateFormatStyle, type FormatOption, } from "./date-formatter";
 export { exists } from "./exists";
 export { getTableComponents, getTableOptions, TableOptions } from "./table-options";
 export { entityObjectSchema, userObjectSchema, type EntityObject, type UserObject } from "./schemas";

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpF,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpF,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAErG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,gBAAgB,EAChB,mBAAmB,EACnB,KAAK,8BAA8B,GACpC,MAAM,sBAAsB,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qCAAqC,CAAC;AACpD,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpF,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,KAAK,eAAe,EACpB,KAAK,YAAY,GAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpF,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAErG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,gBAAgB,EAChB,mBAAmB,EACnB,KAAK,8BAA8B,GACpC,MAAM,sBAAsB,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qCAAqC,CAAC;AACpD,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/utils/toast.d.ts

@@ -6,6 +6,8 @@ export type ToastOptions = {
     id?: string;
     onDismiss?: () => void;
     action?: ExternalToast["action"];
+    /** sonner's second button, shown beside `action`. */
+    cancel?: ExternalToast["cancel"];
     dismissible?: boolean;
 };
 /** Standard toast - neutral/white */

package/dist/utils/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/utils/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,qCAAqC;AACrC,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,mBAEhE;AAED,oCAAoC;AACpC,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,mBAEhE;AAED,uBAAuB;AACvB,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,mBAErD;AAED,8DAA8D;AAC9D,wBAAgB,eAAe,CAC7B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC,EAC/F,OAAO,CAAC,EAAE;IACR,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,mBAGF"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/utils/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,qCAAqC;AACrC,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,mBAEhE;AAED,oCAAoC;AACpC,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,mBAEhE;AAED,uBAAuB;AACvB,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,mBAErD;AAED,8DAA8D;AAC9D,wBAAgB,eAAe,CAC7B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC,EAC/F,OAAO,CAAC,EAAE;IACR,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,mBAGF"}

package/dist/write-through-KNRI5L4V.mjs

@@ -0,0 +1,15 @@
+import {
+  writeThrough
+} from "./chunk-3U7YJ73T.mjs";
+import "./chunk-DWPHHUMV.mjs";
+import "./chunk-4RPGFQBA.mjs";
+import "./chunk-47HNJQ7U.mjs";
+import "./chunk-73NKUBMP.mjs";
+import "./chunk-4ZJIUTIV.mjs";
+import "./chunk-YPBIPE2B.mjs";
+import "./chunk-AUXK7QSA.mjs";
+import "./chunk-PAWJFY3S.mjs";
+export {
+  writeThrough
+};
+//# sourceMappingURL=write-through-KNRI5L4V.mjs.map

package/dist/write-through-KNRI5L4V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/write-through-MYHQ6GJU.js

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkPQQFOONGjs = require('./chunk-PQQFOONG.js');
+require('./chunk-FBHUUPRV.js');
+require('./chunk-6RCZ64BQ.js');
+require('./chunk-3VNDFKT7.js');
+require('./chunk-5WM72MLE.js');
+require('./chunk-WUNSG3IN.js');
+require('./chunk-LNO2JLU3.js');
+require('./chunk-LXKSUWAV.js');
+require('./chunk-7QVYU63E.js');
+
+
+exports.writeThrough = _chunkPQQFOONGjs.writeThrough;
+//# sourceMappingURL=write-through-MYHQ6GJU.js.map

package/dist/{write-through-HE2QSOVI.js.map → write-through-MYHQ6GJU.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/nextjs-jsonapi/nextjs-jsonapi/dist/write-through-HE2QSOVI.js"],"names":[],"mappings":"AAAA;AACE;AACF,sDAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B;AACE;AACF,qDAAC","file":"/home/runner/work/nextjs-jsonapi/nextjs-jsonapi/dist/write-through-HE2QSOVI.js"}
+{"version":3,"sources":["/home/runner/work/nextjs-jsonapi/nextjs-jsonapi/dist/write-through-MYHQ6GJU.js"],"names":[],"mappings":"AAAA;AACE;AACF,sDAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B;AACE;AACF,qDAAC","file":"/home/runner/work/nextjs-jsonapi/nextjs-jsonapi/dist/write-through-MYHQ6GJU.js"}

package/messages/en.json

@@ -1102,6 +1102,7 @@
     },
     "hide_password": "Hide Password",
     "home": "Home",
+    "dayPeriod": "AM/PM",
     "hours": "Hours",
     "loading": "Loading...",
     "minutes": "Minutes",

package/messages/it.json

@@ -1102,6 +1102,7 @@
     },
     "hide_password": "Nascondi password",
     "home": "Home",
+    "dayPeriod": "AM/PM",
     "hours": "Ore",
     "loading": "Caricamento...",
     "minutes": "Minuti",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "6.24.0",
+  "version": "6.26.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",
@@ -53,6 +53,11 @@
       "import": "./dist/contexts/index.mjs",
       "require": "./dist/contexts/index.js"
     },
+    "./date-locale": {
+      "types": "./dist/date-locale/index.d.ts",
+      "import": "./dist/date-locale/index.mjs",
+      "require": "./dist/date-locale/index.js"
+    },
     "./contexts/styles.css": "./dist/contexts/index.css",
     "./blocknote/server": {
       "types": "./dist/components/editors/server-entry.d.ts",

package/src/components/forms/DatePickerPopover.tsx

@@ -3,7 +3,8 @@
 import { isValid, parse } from "date-fns";
 import { Calendar as CalendarIcon, CircleXIcon } from "lucide-react";
 import { ReactElement, useMemo, useState } from "react";
-import { useI18nDateFnsLocale, useI18nLocale } from "../../i18n";
+import { useDateLocale } from "../../contexts/DateLocaleContext";
+import { useI18nDateFnsLocale } from "../../i18n";
 import {
   Calendar,
   Input,
@@ -48,8 +49,9 @@ export const DatePickerPopover = ({
   align = "start",
   className,
 }: DatePickerPopoverProps) => {
-  const locale = useI18nLocale();
+  const { locale } = useDateLocale();
   const dateFnsLocale = useI18nDateFnsLocale();
+  const weekStartsOn = (dateFnsLocale?.options?.weekStartsOn ?? 1) as 0 | 1 | 2 | 3 | 4 | 5 | 6;
   const [isOpen, setIsOpen] = useState(false);
   const [displayMonth, setDisplayMonth] = useState<Date>(() => value || new Date());
 
@@ -239,7 +241,7 @@ export const DatePickerPopover = ({
               onSelect={handleCalendarSelect}
               disabled={(date) => (minDate && date < minDate ? true : false)}
               locale={dateFnsLocale}
-              weekStartsOn={1}
+              weekStartsOn={weekStartsOn}
               month={displayMonth}
               onMonthChange={setDisplayMonth}
             />

package/src/components/forms/DateRangeSelector.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { DateRange } from "react-day-picker";
+import { useDateFormatter } from "../../contexts/DateLocaleContext";
 import { useI18nDateFnsLocale } from "../../i18n";
 import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "../../shadcnui";
 import { cn } from "../../utils";
@@ -50,7 +50,9 @@ type DateRangeSelectorProps = {
 
 export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviousMonth }: DateRangeSelectorProps) {
   const t = useTranslations();
+  const { format } = useDateFormatter();
   const dateFnsLocale = useI18nDateFnsLocale();
+  const weekStartsOn = (dateFnsLocale?.options?.weekStartsOn ?? 1) as 0 | 1 | 2 | 3 | 4 | 5 | 6;
   const [date, setDate] = useState<DateRange | undefined>(
     avoidSettingDates
       ? undefined
@@ -100,11 +102,10 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
           {date?.from ? (
             date.to ? (
               <>
-                {format(date.from, "d MMM yyyy", { locale: dateFnsLocale })} -{" "}
-                {format(date.to, "d MMM yyyy", { locale: dateFnsLocale })}
+                {format(date.from, "dateMedium")} - {format(date.to, "dateMedium")}
               </>
             ) : (
-              format(date.from, "d MMM yyyy", { locale: dateFnsLocale })
+              format(date.from, "dateMedium")
             )
           ) : (
             <span>{t("ui.labels.pick_a_date")}</span>
@@ -130,11 +131,10 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
           {date?.from ? (
             date.to ? (
               <>
-                {format(date.from, "d MMM yyyy", { locale: dateFnsLocale })} -{" "}
-                {format(date.to, "d MMM yyyy", { locale: dateFnsLocale })}
+                {format(date.from, "dateMedium")} - {format(date.to, "dateMedium")}
               </>
             ) : (
-              format(date.from, "d MMM yyyy", { locale: dateFnsLocale })
+              format(date.from, "dateMedium")
             )
           ) : (
             <span>{t("ui.labels.pick_a_date")}</span>
@@ -151,6 +151,8 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
               selected={date}
               onSelect={handleSelect}
               numberOfMonths={2}
+              locale={dateFnsLocale}
+              weekStartsOn={weekStartsOn}
             />
             <Button
               variant="secondary"

package/src/components/forms/FormDate.tsx

@@ -3,7 +3,8 @@
 import { isValid, parse } from "date-fns";
 import { Calendar as CalendarIcon, CircleXIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import { useI18nDateFnsLocale, useI18nLocale, useI18nTranslations } from "../../i18n";
+import { useDateLocale } from "../../contexts/DateLocaleContext";
+import { useI18nDateFnsLocale, useI18nTranslations } from "../../i18n";
 import {
   Button,
   Calendar,
@@ -42,8 +43,9 @@ export function FormDate({
   futureYears?: number;
 }) {
   const t = useI18nTranslations();
-  const locale = useI18nLocale();
+  const { locale } = useDateLocale();
   const dateFnsLocale = useI18nDateFnsLocale();
+  const weekStartsOn = (dateFnsLocale?.options?.weekStartsOn ?? 1) as 0 | 1 | 2 | 3 | 4 | 5 | 6;
   const [open, setOpen] = useState<boolean>(false);
   const [displayMonth, setDisplayMonth] = useState<Date>(() => {
     const currentValue = form.getValues(id);
@@ -162,7 +164,7 @@ export function FormDate({
                 }}
                 disabled={(date) => (minDate && date < minDate ? true : false)}
                 locale={dateFnsLocale}
-                weekStartsOn={1}
+                weekStartsOn={weekStartsOn}
                 month={displayMonth}
                 onMonthChange={setDisplayMonth}
                 startMonth={new Date(1900, 0)}

package/src/components/forms/FormDateTime.tsx

@@ -2,7 +2,8 @@
 
 import { Calendar as CalendarIcon, CircleXIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import { useI18nDateFnsLocale, useI18nLocale, useI18nTranslations } from "../../i18n";
+import { useDateFormatter } from "../../contexts/DateLocaleContext";
+import { useI18nDateFnsLocale, useI18nTranslations } from "../../i18n";
 import {
   Button,
   Calendar,
@@ -18,6 +19,7 @@ import {
 } from "../../shadcnui";
 import { cn } from "../../utils";
 import { FormFieldWrapper } from "./FormFieldWrapper";
+import { DayPeriod, dayPeriodLabels, from24Hour, to24Hour } from "./time-cycle";
 
 // Unwrapped rounding: setMinutes(60) carries into the hour, so 10:58 becomes 11:00
 function snapToFiveMinutes(date: Date): Date {
@@ -57,30 +59,20 @@ export function FormDateTime({
 }) {
   const [open, setOpen] = useState<boolean>(false);
   const t = useI18nTranslations();
-  const locale = useI18nLocale();
+  const { format, locale, twelveHourClock } = useDateFormatter();
   const dateFnsLocale = useI18nDateFnsLocale();
+  const weekStartsOn = (dateFnsLocale?.options?.weekStartsOn ?? 1) as 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
   const [displayMonth, setDisplayMonth] = useState<Date>(() => {
     const currentValue = form.getValues(id);
     return currentValue || defaultMonth || reference?.date || new Date();
   });
 
-  // Locale-aware date-time formatter
-  const dateTimeFormatter = useMemo(
-    () =>
-      new Intl.DateTimeFormat(locale, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-      }),
-    [locale],
-  );
+  // Format date-time for display; the clock (12/24-hour) follows the resolved locale
+  const formatDateTime = (date: Date): string => format(date, "dateTimeLong");
 
-  // Format date-time for display
-  const formatDateTime = (date: Date): string => dateTimeFormatter.format(date);
+  // AM/PM labels from Intl, only needed on a 12-hour locale
+  const periodLabels = useMemo(() => dayPeriodLabels(locale), [locale]);
 
   // An empty field starts its time selects at the reference "now" when one is given
   // Snapped as an instant (not by wrapping minutes) so 10:58 starts at 11:00
@@ -100,13 +92,27 @@ export function FormDateTime({
     marked: "[&>button]:underline [&>button]:decoration-2 [&>button]:underline-offset-4",
   };
 
-  const hoursOptions = Array.from({ length: 24 }, (_, i) => {
-    const hour = i;
-    return {
-      value: hour,
-      label: hour.toString().padStart(2, "0"),
-    };
-  });
+  // 12-hour locales list 1–12 (plus an AM/PM select); 24-hour locales list 0–23
+  const hoursOptions = twelveHourClock
+    ? Array.from({ length: 12 }, (_, i) => {
+        const hour = i + 1;
+        return {
+          value: hour,
+          label: hour.toString(),
+        };
+      })
+    : Array.from({ length: 24 }, (_, i) => {
+        const hour = i;
+        return {
+          value: hour,
+          label: hour.toString().padStart(2, "0"),
+        };
+      });
+
+  const periodOptions: { value: DayPeriod; label: string }[] = [
+    { value: "am", label: periodLabels.am },
+    { value: "pm", label: periodLabels.pm },
+  ];
 
   const minutesOptions = Array.from({ length: 12 }, (_, i) => {
     const minute = i * 5;
@@ -118,6 +124,7 @@ export function FormDateTime({
 
   const hoursItems = Object.fromEntries(hoursOptions.map((option) => [String(option.value), option.label]));
   const minutesItems = Object.fromEntries(minutesOptions.map((option) => [String(option.value), option.label]));
+  const periodItems = Object.fromEntries(periodOptions.map((option) => [option.value, option.label]));
 
   function roundToNearestFiveMinutes(minutes: number): number {
     return (Math.round(minutes / 5) * 5) % 60;
@@ -133,6 +140,11 @@ export function FormDateTime({
     setSelectedMinutes(referenceDate.getMinutes());
   };
 
+  // The time the selects show: the field's own time, else the pending selection (0–23 / 0–55)
+  const currentHours = (value: Date | undefined): number => (value ? new Date(value).getHours() : selectedHours);
+  const currentMinutes = (value: Date | undefined): number =>
+    value ? roundToNearestFiveMinutes(new Date(value).getMinutes()) : selectedMinutes;
+
   const handleTimeChange = (hours: number, minutes: number) => {
     const currentDate = form.getValues(id);
     if (currentDate) {
@@ -205,7 +217,7 @@ export function FormDateTime({
                     }}
                     disabled={(date) => (minDate && date < minDate ? true : false)}
                     locale={dateFnsLocale}
-                    weekStartsOn={1}
+                    weekStartsOn={weekStartsOn}
                     startMonth={new Date(1900, 0)}
                     endMonth={new Date(new Date().getFullYear() + 10, 11)}
                     modifiers={dayModifiers}
@@ -228,20 +240,20 @@ export function FormDateTime({
                       <Label htmlFor="hours-select">{t(`common.hours`)}</Label>
                       <Select
                         items={hoursItems}
-                        value={String(field.value ? new Date(field.value).getHours() : selectedHours)}
+                        value={String(
+                          twelveHourClock ? from24Hour(currentHours(field.value)).hour12 : currentHours(field.value),
+                        )}
                         onValueChange={(value) => {
                           if (!value) return;
-                          const hours = parseInt(value);
+                          const picked = parseInt(value);
+                          const hours = twelveHourClock
+                            ? to24Hour(picked, from24Hour(currentHours(field.value)).period)
+                            : picked;
                           setSelectedHours(hours);
-                          handleTimeChange(
-                            hours,
-                            field.value
-                              ? roundToNearestFiveMinutes(new Date(field.value).getMinutes())
-                              : selectedMinutes,
-                          );
+                          handleTimeChange(hours, currentMinutes(field.value));
                         }}
                       >
-                        <SelectTrigger id="hours-select" className="w-[70px]">
+                        <SelectTrigger id="hours-select" data-testid="form-datetime-hours" className="w-[70px]">
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -258,17 +270,15 @@ export function FormDateTime({
                       <Label htmlFor="minutes-select">{t(`common.minutes`)}</Label>
                       <Select
                         items={minutesItems}
-                        value={String(
-                          field.value ? roundToNearestFiveMinutes(new Date(field.value).getMinutes()) : selectedMinutes,
-                        )}
+                        value={String(currentMinutes(field.value))}
                         onValueChange={(value) => {
                           if (!value) return;
                           const minutes = parseInt(value);
                           setSelectedMinutes(minutes);
-                          handleTimeChange(field.value ? new Date(field.value).getHours() : selectedHours, minutes);
+                          handleTimeChange(currentHours(field.value), minutes);
                         }}
                       >
-                        <SelectTrigger id="minutes-select" className="w-[70px]">
+                        <SelectTrigger id="minutes-select" data-testid="form-datetime-minutes" className="w-[70px]">
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -280,6 +290,32 @@ export function FormDateTime({
                         </SelectContent>
                       </Select>
                     </div>
+                    {twelveHourClock && (
+                      <div className="flex flex-col space-y-2">
+                        <Label htmlFor="period-select">{t(`common.dayPeriod`)}</Label>
+                        <Select
+                          items={periodItems}
+                          value={from24Hour(currentHours(field.value)).period}
+                          onValueChange={(value) => {
+                            if (!value) return;
+                            const hours = to24Hour(from24Hour(currentHours(field.value)).hour12, value as DayPeriod);
+                            setSelectedHours(hours);
+                            handleTimeChange(hours, currentMinutes(field.value));
+                          }}
+                        >
+                          <SelectTrigger id="period-select" data-testid="form-datetime-period" className="w-[70px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {periodOptions.map((option) => (
+                              <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    )}
                   </div>
                   <div className="mt-2 flex flex-row gap-x-2">
                     {allowEmpty !== false && (

package/src/components/forms/__tests__/time-cycle.spec.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { dayPeriodLabels, from24Hour, to24Hour } from "../time-cycle";
+
+describe("to24Hour / from24Hour round-trip", () => {
+  it("maps 12-hour values around midnight and noon", () => {
+    expect(to24Hour(12, "am")).toBe(0);
+    expect(to24Hour(12, "pm")).toBe(12);
+    expect(to24Hour(11, "pm")).toBe(23);
+    expect(to24Hour(1, "am")).toBe(1);
+  });
+
+  it("maps 24-hour values to 12-hour values", () => {
+    expect(from24Hour(0)).toEqual({ hour12: 12, period: "am" });
+    expect(from24Hour(13)).toEqual({ hour12: 1, period: "pm" });
+    expect(from24Hour(12)).toEqual({ hour12: 12, period: "pm" });
+  });
+
+  it("round-trips every hour of the day", () => {
+    for (let hour = 0; hour < 24; hour++) {
+      const { hour12, period } = from24Hour(hour);
+      expect(to24Hour(hour12, period)).toBe(hour);
+    }
+  });
+});
+
+describe("dayPeriodLabels", () => {
+  it("reads the en-US labels from Intl", () => {
+    expect(dayPeriodLabels("en-US")).toEqual({ am: "AM", pm: "PM" });
+  });
+
+  it("returns two non-empty, different labels for it", () => {
+    const labels = dayPeriodLabels("it");
+    expect(labels.am.length).toBeGreaterThan(0);
+    expect(labels.pm.length).toBeGreaterThan(0);
+    expect(labels.am).not.toBe(labels.pm);
+  });
+});

package/src/components/forms/time-cycle.ts

@@ -0,0 +1,27 @@
+export type DayPeriod = "am" | "pm";
+
+/** 12-hour clock value + period → 0–23 (12 am → 0, 12 pm → 12). */
+export function to24Hour(hour12: number, period: DayPeriod): number {
+  const base = hour12 % 12;
+  return period === "pm" ? base + 12 : base;
+}
+
+/** 0–23 → 12-hour clock value + period (0 → 12 am, 12 → 12 pm). */
+export function from24Hour(hour24: number): { hour12: number; period: DayPeriod } {
+  const period: DayPeriod = hour24 >= 12 ? "pm" : "am";
+  const hour12 = hour24 % 12 === 0 ? 12 : hour24 % 12;
+  return { hour12, period };
+}
+
+function dayPeriodOf(formatter: Intl.DateTimeFormat, date: Date): string {
+  return formatter.formatToParts(date).find((part) => part.type === "dayPeriod")?.value ?? "";
+}
+
+/** The locale's own AM/PM labels, read from Intl (never hard-coded). */
+export function dayPeriodLabels(locale: string): { am: string; pm: string } {
+  const formatter = new Intl.DateTimeFormat(locale, { hour: "numeric", hourCycle: "h12" });
+  return {
+    am: dayPeriodOf(formatter, new Date(2000, 0, 1, 1, 0)),
+    pm: dayPeriodOf(formatter, new Date(2000, 0, 1, 13, 0)),
+  };
+}

package/src/components/tables/cells/cell.date.tsx

@@ -1,11 +1,9 @@
 import { ColumnDef } from "@tanstack/react-table";
-import { useI18nLocale } from "../../../i18n";
+import { useDateFormatter } from "../../../contexts/DateLocaleContext";
 
 function DateCell({ date }: { date: Date }) {
-  const locale = useI18nLocale();
-  return (
-    <span className="text-muted-foreground text-xs">{date.toLocaleDateString(locale, { dateStyle: "medium" })}</span>
-  );
+  const { format } = useDateFormatter();
+  return <span className="text-muted-foreground text-xs">{format(date, "dateMedium")}</span>;
 }
 
 export const cellDate = (params: { name: string; title: string }): ColumnDef<any> => {

package/src/components/tables/cells/cell.dateTime.tsx

@@ -1,13 +1,9 @@
 import { ColumnDef } from "@tanstack/react-table";
-import { useI18nLocale } from "../../../i18n";
+import { useDateFormatter } from "../../../contexts/DateLocaleContext";
 
 function DateTimeCell({ date }: { date: Date }) {
-  const locale = useI18nLocale();
-  return (
-    <span className="text-muted-foreground text-xs">
-      {date.toLocaleString(locale, { dateStyle: "medium", timeStyle: "short", hour12: false })}
-    </span>
-  );
+  const { format } = useDateFormatter();
+  return <span className="text-muted-foreground text-xs">{format(date, "dateTimeMedium")}</span>;
 }
 
 export const cellDateTime = (params: { name: string; title: string }): ColumnDef<any> => {