@djangocfg/ui-core 2.1.571 → 2.1.572

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.571",
+  "version": "2.1.572",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -130,7 +130,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.571",
+    "@djangocfg/i18n": "^2.1.572",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,9 +206,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/eslint-config": "^2.1.571",
-    "@djangocfg/i18n": "^2.1.571",
-    "@djangocfg/typescript-config": "^2.1.571",
+    "@djangocfg/eslint-config": "^2.1.572",
+    "@djangocfg/i18n": "^2.1.572",
+    "@djangocfg/typescript-config": "^2.1.572",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",

package/src/components/data/relative-time-card/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import moment from "moment";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
 
@@ -31,13 +30,16 @@ const relativeTimeCardVariants = cva(
 interface RelativeTimeCardProps
   extends React.HTMLAttributes<HTMLSpanElement>,
     VariantProps<typeof relativeTimeCardVariants> {
-  /** Date value — accepts Date, string in any format, number (timestamp), or Moment */
-  date: Date | string | number | moment.Moment;
-  /** Input format hint if date is a string (e.g. "DD.MM.YYYY HH:mm"). Auto-detected if omitted. */
+  /** Date value — a `Date`, an ISO 8601 string, or a timestamp in milliseconds */
+  date: DateInput;
+  /**
+   * @deprecated Ignored. Dates are parsed as ISO 8601; arbitrary input patterns
+   * went away with moment. Kept so existing call sites still type-check.
+   */
   inputFormat?: string;
   /** Display format: relative | auto | datetime | custom */
   format?: "relative" | "auto" | "datetime" | "custom";
-  /** Custom output format string (moment format). Used when format="custom" */
+  /** Output pattern for `format="custom"`. Supports `YYYY MM DD HH mm ss`. */
   outputFormat?: string;
   /** Update interval in ms for relative format. @default 60000 */
   updateInterval?: number;
@@ -51,65 +53,117 @@ interface RelativeTimeCardProps
   utc?: boolean;
 }
 
-function parseDate(
-  value: Date | string | number | moment.Moment,
-  inputFormat?: string,
-  useUtc: boolean = true
-): moment.Moment {
-  if (moment.isMoment(value)) {
-    return useUtc ? value.utc() : value.local();
-  }
-
-  const m = useUtc ? moment.utc : moment;
-
-  if (value instanceof Date) {
-    return m(value);
-  }
-
-  if (typeof value === "number") {
-    return m(value);
-  }
-
+/* Built on `Intl`, not moment.
+ *
+ * moment bundles 137 locale files and this module was the last thing importing
+ * it here. Because the package entry is `export *` under a file-level
+ * `'use client'`, that cost reached every consumer of the barrel, not just the
+ * ones rendering a date: measured on the MLS Caribbean property pages
+ * 2026-10-17, two 805 KB chunks on every listing, for a component those pages
+ * never render.
+ *
+ * `Intl.RelativeTimeFormat` and `Intl.DateTimeFormat` are in every browser this
+ * package targets, and they localise from the `locale` prop rather than from a
+ * global `moment.locale()` call — which was shared mutable state, so two cards
+ * with different locales fought over it.
+ *
+ * Two deliberate narrowings, both of moment-only behaviour:
+ *   - `inputFormat` no longer parses arbitrary patterns. `Date` accepts ISO
+ *     8601; anything else was already locale-dependent guesswork.
+ *   - `outputFormat` accepts the moment-style tokens this component actually
+ *     shipped with (`YYYY MM DD HH mm ss`), not the full moment grammar.
+ */
+
+type DateInput = Date | string | number;
+
+/** A timestamp with no zone designator is UTC here, as the APIs emit it. */
+function toDate(value: DateInput, useUtc: boolean): Date {
+  if (value instanceof Date) return value;
+  if (typeof value === "number") return new Date(value);
   if (typeof value === "string") {
-    if (inputFormat) {
-      return m(value, inputFormat, true);
-    }
-    return m(value);
+    const iso =
+      useUtc && !/(?:Z|[+-]\d{2}:?\d{2})$/.test(value) ? `${value}Z` : value;
+    return new Date(iso);
   }
-
-  return m();
+  return new Date();
 }
 
-function getRelativeTime(date: moment.Moment, locale: string = "en"): string {
-  moment.locale(locale);
-  return date.fromNow();
+const RELATIVE_UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ["year", 365 * 24 * 60 * 60],
+  ["month", 30 * 24 * 60 * 60],
+  ["day", 24 * 60 * 60],
+  ["hour", 60 * 60],
+  ["minute", 60],
+  ["second", 1],
+];
+
+function getRelativeTime(date: Date, locale: string = "en"): string {
+  const seconds = Math.round((date.getTime() - Date.now()) / 1000);
+  const absolute = Math.abs(seconds);
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+
+  for (const [unit, size] of RELATIVE_UNITS) {
+    if (absolute >= size || unit === "second") {
+      return formatter.format(Math.round(seconds / size), unit);
+    }
+  }
+  return formatter.format(0, "second");
 }
 
-function getAutoFormat(date: moment.Moment, locale: string = "en"): string {
-  moment.locale(locale);
-  const now = moment();
-  const diffHours = now.diff(date, "hours");
-  const diffDays = now.diff(date, "days");
+function getAutoFormat(date: Date, locale: string = "en"): string {
+  const diffHours = (Date.now() - date.getTime()) / 3_600_000;
+  const diffDays = diffHours / 24;
 
   if (diffHours < 24) {
-    return date.format("HH:mm");
+    return new Intl.DateTimeFormat(locale, {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    }).format(date);
   }
   if (diffDays < 7) {
-    return date.format("ddd");
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
   }
   if (diffDays < 365) {
-    return date.format("MMM D");
+    return new Intl.DateTimeFormat(locale, {
+      month: "short",
+      day: "numeric",
+    }).format(date);
   }
-  return date.format("MMM D, YYYY");
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(date);
 }
 
-function getDateTimeFormat(date: moment.Moment, locale: string = "en"): string {
-  moment.locale(locale);
-  return date.format("MMM D, YYYY HH:mm");
+function getDateTimeFormat(date: Date, locale: string = "en"): string {
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(date);
+}
+
+/** The moment-style tokens this component shipped with, and only those. */
+function applyCustomFormat(date: Date, pattern: string): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const tokens: Record<string, string> = {
+    YYYY: String(date.getFullYear()),
+    MM: pad(date.getMonth() + 1),
+    DD: pad(date.getDate()),
+    HH: pad(date.getHours()),
+    mm: pad(date.getMinutes()),
+    ss: pad(date.getSeconds()),
+  };
+  return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (t) => tokens[t] ?? t);
 }
 
 function formatDate(
-  date: moment.Moment,
+  date: Date,
   format: "relative" | "auto" | "datetime" | "custom",
   locale: string,
   outputFormat?: string
@@ -122,8 +176,7 @@ function formatDate(
     case "datetime":
       return getDateTimeFormat(date, locale);
     case "custom":
-      moment.locale(locale);
-      return date.format(outputFormat || "YYYY-MM-DD HH:mm");
+      return applyCustomFormat(date, outputFormat || "YYYY-MM-DD HH:mm");
   }
 }
 
@@ -149,10 +202,7 @@ const RelativeTimeCard = React.forwardRef<
     },
     ref
   ) => {
-    const dateObj = React.useMemo(
-      () => parseDate(date, inputFormat, utc),
-      [date, inputFormat, utc]
-    );
+    const dateObj = React.useMemo(() => toDate(date, utc), [date, utc]);
 
     const [display, setDisplay] = React.useState(() =>
       formatDate(dateObj, format, locale, outputFormat)
@@ -167,8 +217,16 @@ const RelativeTimeCard = React.forwardRef<
       return () => clearInterval(id);
     }, [dateObj, format, locale, outputFormat, updateInterval]);
 
-    const isoString = dateObj.toISOString();
-    const title = dateObj.format("LLLL");
+    // An invalid date would throw from `toISOString`, where moment returned
+    // null and rendered "Invalid date". Both attributes are omitted instead.
+    const valid = !Number.isNaN(dateObj.getTime());
+    const isoString = valid ? dateObj.toISOString() : undefined;
+    const title = valid
+      ? new Intl.DateTimeFormat(locale, {
+          dateStyle: "full",
+          timeStyle: "short",
+        }).format(dateObj)
+      : undefined;
 
     return (
       <time

package/src/hooks/time/useCountdown.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import moment from 'moment';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export interface CountdownState {
@@ -64,10 +63,22 @@ export const useCountdown = (targetDate: string | null): CountdownState => {
   useEffect(() => {
     if (!targetDate) return;
 
-    const target = moment.utc(targetDate).local();
+    // Plain `Date` arithmetic, not moment: the hook only ever needed the gap in
+    // seconds, and the conversion moment did (`.utc().local()`) is what a Date
+    // already is internally — an absolute instant, rendered in local time only
+    // when formatted. Importing moment for this shipped its 137 locale files to
+    // every consumer of this package's barrel export.
+    //
+    // A timestamp with no zone designator means UTC here, so append the `Z`
+    // that `Date` would otherwise read as local time.
+    const iso = /(?:Z|[+-]\d{2}:?\d{2})$/.test(targetDate)
+      ? targetDate
+      : `${targetDate}Z`;
+    const targetMs = new Date(iso).getTime();
+    if (Number.isNaN(targetMs)) return;
 
     const tick = () => {
-      const diff = target.diff(moment(), 'seconds');
+      const diff = Math.round((targetMs - Date.now()) / 1000);
       setCountdown(secondsToState(diff));
     };