@carlonicora/nextjs-jsonapi 6.24.0 → 6.25.0

package/src/features/waitlist/hooks/useWaitlistTableStructure.tsx

@@ -5,7 +5,7 @@ import { Send } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useMemo } from "react";
 import { TableContent, UseTableStructureHook } from "../../../hooks";
-import { useI18nLocale } from "../../../i18n";
+import { useDateFormatter } from "../../../contexts/DateLocaleContext";
 import { Badge, Button } from "../../../shadcnui";
 import { WaitlistFields } from "../data/waitlist.fields";
 import { WaitlistInterface, WaitlistStatus } from "../data/WaitlistInterface";
@@ -19,7 +19,7 @@ import { formatSignupSource } from "./formatSignupSource";
  */
 export const useWaitlistTableStructure: UseTableStructureHook<WaitlistInterface, WaitlistFields> = (params) => {
   const t = useTranslations();
-  const locale = useI18nLocale();
+  const dates = useDateFormatter();
   const onInvite: ((entry: WaitlistInterface) => void) | undefined = params.context?.onInvite;
 
   const tableData = useMemo(() => {
@@ -71,7 +71,7 @@ export const useWaitlistTableStructure: UseTableStructureHook<WaitlistInterface,
       cell: ({ row }: { row: TableContent<WaitlistInterface> }) => {
         const entry: WaitlistInterface = row.original.jsonApiData;
         if (!entry.createdAt) return "-";
-        return new Date(entry.createdAt).toLocaleDateString(locale);
+        return dates.format(entry.createdAt, "date");
       },
       enableSorting: false,
       enableHiding: false,
@@ -146,7 +146,7 @@ export const useWaitlistTableStructure: UseTableStructureHook<WaitlistInterface,
         if (entry.status === "invited" && entry.invitedAt) {
           return (
             <span className="text-muted-foreground text-xs">
-              {t("waitlist.admin.actions.invited_on", { date: new Date(entry.invitedAt).toLocaleDateString(locale) })}
+              {t("waitlist.admin.actions.invited_on", { date: dates.format(entry.invitedAt, "dateMedium") })}
             </span>
           );
         }
@@ -168,7 +168,7 @@ export const useWaitlistTableStructure: UseTableStructureHook<WaitlistInterface,
     return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
       TableContent<WaitlistInterface>
     >[];
-  }, [params.fields, fieldColumnMap, t, locale]);
+  }, [params.fields, fieldColumnMap, t, dates]);
 
   return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
 };

package/src/server/ServerSession.ts

@@ -12,6 +12,8 @@ export interface SessionSnapshot {
   token?: string;
   sidebarOpen: boolean;
   isMobile: boolean;
+  /** The request's raw `Accept-Language` header; the date locale is resolved from it on the client. */
+  acceptLanguage?: string;
 }
 
 export class ServerSession {
@@ -29,6 +31,7 @@ export class ServerSession {
       token,
       sidebarOpen: cookieStore.get("sidebar_state")?.value !== "false",
       isMobile: viewportCookie ? viewportCookie === "1" : userAgent({ headers: headerStore }).device.type === "mobile",
+      acceptLanguage: headerStore.get("accept-language") ?? undefined,
     };
   }
 

package/src/server/__tests__/ServerSession.read.spec.ts

@@ -4,13 +4,14 @@ const mocks = vi.hoisted(() => {
   const state = {
     cookies: {} as Record<string, string>,
     deviceType: undefined as string | undefined,
+    headers: {} as Record<string, string>,
   };
   return {
     state,
     cookies: vi.fn(async () => ({
       get: (name: string) => (name in state.cookies ? { name, value: state.cookies[name] } : undefined),
     })),
-    headers: vi.fn(async () => new Headers()),
+    headers: vi.fn(async () => new Headers(state.headers)),
     userAgent: vi.fn(() => ({ device: { type: state.deviceType } })),
   };
 });
@@ -27,6 +28,7 @@ describe("ServerSession.read", () => {
     configureRoles({ Administrator: "role-admin", CompanyAdministrator: "role-company-admin" });
     mocks.state.cookies = {};
     mocks.state.deviceType = undefined;
+    mocks.state.headers = {};
   });
 
   it("reads a logged-in administrator on a desktop with the sidebar closed", async () => {
@@ -64,4 +66,19 @@ describe("ServerSession.read", () => {
       isMobile: false,
     });
   });
+
+  it("carries the Accept-Language header", async () => {
+    mocks.state.headers = { "accept-language": "en-GB,en;q=0.9" };
+
+    const snapshot = await ServerSession.read();
+
+    expect(snapshot.acceptLanguage).toBe("en-GB,en;q=0.9");
+  });
+
+  it("leaves acceptLanguage undefined when the header is absent", async () => {
+    const snapshot = await ServerSession.read();
+
+    expect(snapshot).toHaveProperty("acceptLanguage", undefined);
+    expect(snapshot.acceptLanguage).toBeUndefined();
+  });
 });

package/src/utils/__tests__/date-formatter.spec.ts

@@ -1,5 +1,15 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { dateFormatLocale, formatDate, FormatOption } from "../date-formatter";
+import {
+  DATE_STYLE_OPTIONS,
+  dateFormatLocale,
+  type DateFormatStyle,
+  formatDate,
+  formatDateStyle,
+  formatRelativeDate,
+  PUBLIC_STYLE_MAP,
+  resolveDateLocale,
+  usesTwelveHourClock,
+} from "../date-formatter";
 
 describe("formatDate", () => {
   beforeEach(() => {
@@ -117,21 +127,21 @@ describe("formatDate", () => {
       const date = new Date("2024-06-15T11:59:00Z");
       const result = formatDate(date, "timeSince");
 
-      expect(result).toBe("1 minutes ago");
+      expect(result).toBe("1 minute ago");
     });
 
     it("should handle 1 hour ago", () => {
       const date = new Date("2024-06-15T11:00:00Z");
       const result = formatDate(date, "timeSince");
 
-      expect(result).toBe("1 hours ago");
+      expect(result).toBe("1 hour ago");
     });
 
     it("should handle 1 day ago", () => {
       const date = new Date("2024-06-14T12:00:00Z");
       const result = formatDate(date, "timeSince");
 
-      expect(result).toBe("1 days ago");
+      expect(result).toBe("1 day ago");
     });
 
     it("should throw for invalid format option", () => {
@@ -171,14 +181,128 @@ describe("formatDate", () => {
   });
 
   describe("dateFormatLocale", () => {
-    it("maps English and missing locales to en-GB", () => {
-      expect(dateFormatLocale("en")).toBe("en-GB");
-      expect(dateFormatLocale("en-US")).toBe("en-GB");
-      expect(dateFormatLocale(undefined)).toBe("en-GB");
+    it("returns the app locale, English when missing", () => {
+      expect(dateFormatLocale(undefined)).toBe("en");
+      expect(dateFormatLocale("en")).toBe("en");
+      expect(dateFormatLocale("it")).toBe("it");
     });
+  });
 
-    it("passes other locales through", () => {
-      expect(dateFormatLocale("it")).toBe("it");
+  describe("explicit now", () => {
+    it("measures timeSince against the passed now", () => {
+      const now = new Date("2030-01-02T00:00:00Z");
+      expect(formatDate(new Date("2030-01-01T00:00:00Z"), "timeSince", "en-GB", now)).toBe("1 day ago");
+    });
+  });
+});
+
+const normalise = (value: string): string => value.replace(/[\u202f\u00a0]/g, " ");
+const sample = new Date("2026-04-25T21:30:00Z");
+
+describe("resolveDateLocale", () => {
+  it("takes the first browser locale whose language matches the app language", () => {
+    expect(resolveDateLocale({ appLocale: "en", acceptLanguage: "en-GB,en;q=0.9" })).toBe("en-GB");
+    expect(resolveDateLocale({ appLocale: "en", acceptLanguage: "en-US,en;q=0.9" })).toBe("en-US");
+    expect(resolveDateLocale({ appLocale: "en", acceptLanguage: "en" })).toBe("en");
+    expect(resolveDateLocale({ appLocale: "en", acceptLanguage: "it-IT,it;q=0.9,en-GB;q=0.8" })).toBe("en-GB");
+  });
+
+  it("falls back to the app language when no browser locale matches", () => {
+    expect(resolveDateLocale({ appLocale: "it", acceptLanguage: "en-GB" })).toBe("it");
+    expect(resolveDateLocale({ appLocale: "en" })).toBe("en");
+  });
+
+  it("follows quality order, not header order", () => {
+    expect(resolveDateLocale({ appLocale: "en", acceptLanguage: "fr-FR,en-US;q=0.5,en-GB;q=0.9" })).toBe("en-GB");
+  });
+
+  it("resolveDateLocale tolerates malformed headers", () => {
+    for (const acceptLanguage of ["*", "en-GB;q=abc", "zz-ZZ", "en-GB;q=0", ",".repeat(2000), ""]) {
+      expect(() => resolveDateLocale({ appLocale: "en", acceptLanguage })).not.toThrow();
+      expect(resolveDateLocale({ appLocale: "en", acceptLanguage })).toBe("en");
+    }
+  });
+});
+
+describe("formatDateStyle", () => {
+  const expected: Record<DateFormatStyle, { "en-GB": string; "en-US": string }> = {
+    date: { "en-GB": "25/04/2026", "en-US": "04/25/2026" },
+    dateMedium: { "en-GB": "25 Apr 2026", "en-US": "Apr 25, 2026" },
+    dateLong: { "en-GB": "25 April 2026", "en-US": "April 25, 2026" },
+    dateTime: { "en-GB": "25/04/2026, 21:30", "en-US": "04/25/2026, 9:30 PM" },
+    dateTimeMedium: { "en-GB": "25 Apr 2026, 21:30", "en-US": "Apr 25, 2026, 9:30 PM" },
+    dateTimeLong: { "en-GB": "25 April 2026 at 21:30", "en-US": "April 25, 2026 at 9:30 PM" },
+    dateTimeSeconds: { "en-GB": "25/04/2026, 21:30:00", "en-US": "04/25/2026, 9:30:00 PM" },
+    time: { "en-GB": "21:30", "en-US": "9:30 PM" },
+    weekdayDateTime: { "en-GB": "Sat 25 Apr, 21:30", "en-US": "Sat, Apr 25, 9:30 PM" },
+    weekdayDay: { "en-GB": "Sat, 25 April 2026", "en-US": "Sat, April 25, 2026" },
+    monthYear: { "en-GB": "Apr 2026", "en-US": "Apr 2026" },
+    monthYearLong: { "en-GB": "April 2026", "en-US": "April 2026" },
+    month: { "en-GB": "Apr", "en-US": "Apr" },
+    monthLong: { "en-GB": "April", "en-US": "April" },
+    dayMonth: { "en-GB": "25 Apr", "en-US": "Apr 25" },
+    weekday: { "en-GB": "Sat", "en-US": "Sat" },
+    weekdayLong: { "en-GB": "Saturday", "en-US": "Saturday" },
+  };
+
+  for (const style of Object.keys(expected) as DateFormatStyle[]) {
+    for (const locale of ["en-GB", "en-US"] as const) {
+      it(`formats ${style} for ${locale}`, () => {
+        expect(normalise(formatDateStyle({ date: sample, style, locale, timeZone: "UTC" }))).toBe(
+          expected[style][locale],
+        );
+      });
+    }
+  }
+
+  it("never pins the clock", () => {
+    for (const options of Object.values(DATE_STYLE_OPTIONS)) {
+      expect(options).not.toHaveProperty("hour12");
+      expect(options).not.toHaveProperty("hourCycle");
+    }
+  });
+
+  it("maps numeric styles to month-as-word in public mode", () => {
+    expect(PUBLIC_STYLE_MAP).toEqual({
+      date: "dateMedium",
+      dateTime: "dateTimeMedium",
+      dateTimeSeconds: "dateTimeMedium",
     });
+    expect(formatDateStyle({ date: sample, style: "date", locale: "en-GB", timeZone: "UTC", isPublic: true })).toBe(
+      "25 Apr 2026",
+    );
+  });
+
+  it("accepts an ISO string", () => {
+    expect(formatDateStyle({ date: "2026-04-25T21:30:00Z", style: "date", locale: "en-GB", timeZone: "UTC" })).toBe(
+      "25/04/2026",
+    );
+  });
+
+  it("formatDateStyle returns empty for invalid dates", () => {
+    expect(formatDateStyle({ date: undefined, style: "date", locale: "en-GB" })).toBe("");
+    expect(formatDateStyle({ date: "nope", style: "date", locale: "en-GB" })).toBe("");
+    expect(formatDateStyle({ date: new Date(NaN), style: "date", locale: "en-GB" })).toBe("");
+  });
+});
+
+describe("formatRelativeDate", () => {
+  const now = new Date("2026-04-25T21:30:00Z");
+
+  it("says 1 day ago in English", () => {
+    expect(formatRelativeDate({ date: new Date("2026-04-24T21:30:00Z"), locale: "en", now })).toBe("1 day ago");
+  });
+
+  it("uses Italian wording", () => {
+    expect(formatRelativeDate({ date: new Date("2026-04-25T18:30:00Z"), locale: "it", now })).toBe("3 ore fa");
+  });
+});
+
+describe("usesTwelveHourClock", () => {
+  it("is true for en-US and en, false for en-GB and it", () => {
+    expect(usesTwelveHourClock("en-US")).toBe(true);
+    expect(usesTwelveHourClock("en")).toBe(true);
+    expect(usesTwelveHourClock("en-GB")).toBe(false);
+    expect(usesTwelveHourClock("it")).toBe(false);
   });
 });

package/src/utils/date-formatter.ts

@@ -18,65 +18,221 @@ export const formatLocalDate = (d: Date): string => {
   return `${year}-${month}-${day}`;
 };
 
+export type DateFormatStyle =
+  | "date"
+  | "dateMedium"
+  | "dateLong"
+  | "dateTime"
+  | "dateTimeMedium"
+  | "dateTimeLong"
+  | "dateTimeSeconds"
+  | "time"
+  | "weekdayDateTime"
+  | "weekdayDay"
+  | "monthYear"
+  | "monthYearLong"
+  | "month"
+  | "monthLong"
+  | "dayMonth"
+  | "weekday"
+  | "weekdayLong";
+
+const NUMERIC_DATE: Intl.DateTimeFormatOptions = { day: "2-digit", month: "2-digit", year: "numeric" };
+
 /**
- * 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 const dateFormatLocale = (appLocale?: string): string =>
-  !appLocale || appLocale.split("-")[0] === "en" ? "en-GB" : appLocale;
+export const DATE_STYLE_OPTIONS: Record<DateFormatStyle, Intl.DateTimeFormatOptions> = {
+  date: NUMERIC_DATE,
+  dateMedium: { dateStyle: "medium" },
+  dateLong: { dateStyle: "long" },
+  dateTime: { ...NUMERIC_DATE, hour: "numeric", minute: "2-digit" },
+  dateTimeMedium: { dateStyle: "medium", timeStyle: "short" },
+  dateTimeLong: { day: "numeric", month: "long", year: "numeric", hour: "numeric", minute: "2-digit" },
+  dateTimeSeconds: { ...NUMERIC_DATE, hour: "numeric", minute: "2-digit", second: "2-digit" },
+  time: { hour: "numeric", minute: "2-digit" },
+  weekdayDateTime: { weekday: "short", day: "numeric", month: "short", hour: "numeric", minute: "2-digit" },
+  weekdayDay: { weekday: "short", day: "numeric", month: "long", year: "numeric" },
+  monthYear: { month: "short", year: "numeric" },
+  monthYearLong: { month: "long", year: "numeric" },
+  month: { month: "short" },
+  monthLong: { month: "long" },
+  dayMonth: { day: "numeric", month: "short" },
+  weekday: { weekday: "short" },
+  weekdayLong: { weekday: "long" },
+};
 
-export const formatDate = (eventDate: Date, formatOption: FormatOption, locale: string = "en-GB"): string => {
-  const formatPart = (date: Date, options: Intl.DateTimeFormatOptions): string =>
-    new Intl.DateTimeFormat(locale, options).format(date);
+/** Public pages never show an all-numeric date: the month is spelled out. */
+export const PUBLIC_STYLE_MAP: Partial<Record<DateFormatStyle, DateFormatStyle>> = {
+  date: "dateMedium",
+  dateTime: "dateTimeMedium",
+  dateTimeSeconds: "dateTimeMedium",
+};
 
-  const now = new Date();
-  const diff = now.getTime() - eventDate.getTime();
+const formatterCache = new Map<string, Intl.DateTimeFormat>();
 
-  if (formatOption === "default") {
-    if (diff < 24 * 60 * 60 * 1000) formatOption = "timeSince";
-    else formatOption = "dateTime";
+/** One cached `Intl.DateTimeFormat` per locale + option-set key + time zone. */
+const cachedDateTimeFormat = (
+  locale: string,
+  key: string,
+  options: Intl.DateTimeFormatOptions,
+  timeZone?: string,
+): Intl.DateTimeFormat => {
+  const cacheKey = `${locale}|${key}|${timeZone ?? ""}`;
+  let formatter = formatterCache.get(cacheKey);
+  if (!formatter) {
+    formatter = new Intl.DateTimeFormat(locale, timeZone ? { ...options, timeZone } : options);
+    formatterCache.set(cacheKey, formatter);
+  }
+  return formatter;
+};
+
+const relativeCache = new Map<string, Intl.RelativeTimeFormat>();
+
+const cachedRelativeTimeFormat = (locale: string): Intl.RelativeTimeFormat => {
+  let formatter = relativeCache.get(locale);
+  if (!formatter) {
+    formatter = new Intl.RelativeTimeFormat(locale, { numeric: "always" });
+    relativeCache.set(locale, formatter);
   }
+  return formatter;
+};
+
+const toValidDate = (date: Date | string | undefined): Date | undefined => {
+  if (date === undefined || date === null) return undefined;
+  const value = date instanceof Date ? date : new Date(date);
+  return Number.isNaN(value.getTime()) ? undefined : value;
+};
+
+const languageOf = (tag: string): string => tag.split("-")[0].toLowerCase();
+
+const MAX_ACCEPT_LANGUAGE_ENTRIES = 50;
+
+/**
+ * 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 function resolveDateLocale(params: { appLocale: string; acceptLanguage?: string }): string {
+  const { appLocale, acceptLanguage } = params;
+  if (!acceptLanguage) return appLocale;
+
+  const appLanguage = languageOf(appLocale);
+  const entries: { tag: string; quality: number; index: number }[] = [];
+
+  const parts = acceptLanguage.split(",");
+  for (let index = 0; index < parts.length && entries.length < MAX_ACCEPT_LANGUAGE_ENTRIES; index++) {
+    const [rawTag, ...rawParams] = parts[index].split(";");
+    const tag = rawTag.trim();
+    if (!tag || tag === "*") continue;
 
-  if (formatOption === "timeSince") {
-    const seconds = Math.floor(diff / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-
-    if (locale.split("-")[0] !== "en") {
-      const relative = new Intl.RelativeTimeFormat(locale, { numeric: "always" });
-      if (days > 0) return relative.format(-days, "day");
-      if (hours > 0) return relative.format(-hours, "hour");
-      if (minutes > 0) return relative.format(-minutes, "minute");
-      return relative.format(-seconds, "second");
+    let quality = 1;
+    const qualityParam = rawParams.map((param) => param.trim()).find((param) => param.startsWith("q="));
+    if (qualityParam !== undefined) {
+      const raw = qualityParam.slice(2);
+      quality = /^\d+(\.\d+)?$/.test(raw) ? Number(raw) : NaN;
     }
+    if (!(quality > 0)) continue;
+    if (languageOf(tag) !== appLanguage) continue;
 
-    if (days > 0) return `${days} days ago`;
-    if (hours > 0) return `${hours} hours ago`;
-    if (minutes > 0) return `${minutes} minutes ago`;
-    return `${seconds} seconds ago`;
+    entries.push({ tag, quality, index });
+  }
+
+  entries.sort((a, b) => b.quality - a.quality || a.index - b.index);
+
+  for (const entry of entries) {
+    try {
+      const [supported] = Intl.DateTimeFormat.supportedLocalesOf([entry.tag]);
+      if (supported && languageOf(supported) === appLanguage) return supported;
+    } catch {
+      // An invalid language tag: skip it.
+    }
+  }
+
+  return appLocale;
+}
+
+/**
+ * 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 function formatDateStyle(params: {
+  date: Date | string | undefined;
+  style: DateFormatStyle;
+  locale: string;
+  timeZone?: string;
+  isPublic?: boolean;
+}): string {
+  const value = toValidDate(params.date);
+  if (!value) return "";
+  const style = (params.isPublic && PUBLIC_STYLE_MAP[params.style]) || params.style;
+  return cachedDateTimeFormat(params.locale, style, DATE_STYLE_OPTIONS[style], params.timeZone).format(value);
+}
+
+/** "3 hours ago" / "3 ore fa", always numeric ("1 day ago", never "yesterday"). */
+export function formatRelativeDate(params: { date: Date | string; locale: string; now?: Date }): string {
+  const value = toValidDate(params.date);
+  if (!value) return "";
+  const now = params.now ?? new Date();
+  const diff = now.getTime() - value.getTime();
+  const sign = diff < 0 ? 1 : -1;
+  const seconds = Math.floor(Math.abs(diff) / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  const relative = cachedRelativeTimeFormat(params.locale);
+  if (days > 0) return relative.format(sign * days, "day");
+  if (hours > 0) return relative.format(sign * hours, "hour");
+  if (minutes > 0) return relative.format(sign * minutes, "minute");
+  return relative.format(sign * seconds, "second");
+}
+
+/** True when the locale's clock is 12-hour (hour cycle h11 / h12). */
+export function usesTwelveHourClock(locale: string): boolean {
+  const hourCycle = cachedDateTimeFormat(locale, "__hourCycle", { hour: "numeric" }).resolvedOptions().hourCycle;
+  return hourCycle === "h11" || hourCycle === "h12";
+}
+
+/** The locale to format dates in for an app locale: the app locale itself, English when missing. */
+export const dateFormatLocale = (appLocale?: string): string => appLocale ?? "en";
+
+const LEGACY_DATE_OPTIONS: Intl.DateTimeFormatOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
+const LEGACY_TIME_OPTIONS: Intl.DateTimeFormatOptions = { hour: "2-digit", minute: "2-digit" };
+
+/**
+ * @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 const formatDate = (
+  eventDate: Date,
+  formatOption: FormatOption,
+  locale: string = "en-GB",
+  now?: Date,
+): string => {
+  const reference = now ?? new Date();
+  const diff = reference.getTime() - eventDate.getTime();
+
+  if (formatOption === "default") {
+    if (diff < 24 * 60 * 60 * 1000) formatOption = "timeSince";
+    else formatOption = "dateTime";
   }
 
-  // Define formatting options
-  const dateOptions: Intl.DateTimeFormatOptions = {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-  };
-  const timeOptions: Intl.DateTimeFormatOptions = {
-    hour: "2-digit",
-    minute: "2-digit",
-  };
-
-  // Format based on the option
   switch (formatOption) {
+    case "timeSince":
+      return formatRelativeDate({ date: eventDate, locale, now: reference });
     case "date":
-      return formatPart(eventDate, dateOptions);
+      return cachedDateTimeFormat(locale, "__legacyDate", LEGACY_DATE_OPTIONS).format(eventDate);
     case "time":
-      return formatPart(eventDate, timeOptions);
+      return cachedDateTimeFormat(locale, "__legacyTime", LEGACY_TIME_OPTIONS).format(eventDate);
     case "dateTime":
-      return `${formatPart(eventDate, dateOptions)} ${formatPart(eventDate, timeOptions)}`;
+      return `${cachedDateTimeFormat(locale, "__legacyDate", LEGACY_DATE_OPTIONS).format(eventDate)} ${cachedDateTimeFormat(locale, "__legacyTime", LEGACY_TIME_OPTIONS).format(eventDate)}`;
     default:
       throw new Error("Invalid format option");
   }

package/src/utils/index.ts

@@ -4,7 +4,17 @@ export { composeRefs, useComposedRefs } from "./compose-refs";
 export { useIsMobile, MOBILE_BREAKPOINT, VIEWPORT_COOKIE_NAME } from "./use-mobile";
 
 // New utilities
-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";