@liveblocks/react-ui 3.5.2 → 3.5.3

package/dist/primitives/Duration.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useMemo } from 'react';
+import { numberFormat } from '../utils/intl.js';
+import { useInterval } from '../utils/use-interval.js';
+import { useRerender } from '../utils/use-rerender.js';
+
+
+const RENDER_INTERVAL = 0.5 * 1e3;
+const DURATION_NAME = "Duration";
+function getDurationParts(duration) {
+  let remaining = Math.max(duration, 0);
+  const milliseconds = remaining % 1e3;
+  remaining = Math.floor(remaining / 1e3);
+  const seconds = remaining % 60;
+  remaining = Math.floor(remaining / 60);
+  const minutes = remaining % 60;
+  remaining = Math.floor(remaining / 60);
+  const hours = remaining % 24;
+  remaining = Math.floor(remaining / 24);
+  const days = remaining % 7;
+  const weeks = Math.floor(remaining / 7);
+  return { weeks, days, hours, minutes, seconds, milliseconds };
+}
+const durationPartsToNumberFormatOptions = {
+  weeks: "week",
+  days: "day",
+  hours: "hour",
+  minutes: "minute",
+  seconds: "second",
+  milliseconds: "millisecond"
+};
+function formatShortDuration(duration, locale) {
+  let resolvedLocale;
+  if (locale) {
+    resolvedLocale = locale;
+  } else {
+    const formatter = numberFormat();
+    resolvedLocale = formatter.resolvedOptions().locale;
+  }
+  const parts = getDurationParts(duration);
+  const formattedParts = [];
+  for (const [unit, value] of Object.entries(parts)) {
+    if (value === 0 || unit === "milliseconds") {
+      continue;
+    }
+    const formatter = numberFormat(resolvedLocale, {
+      style: "unit",
+      unit: durationPartsToNumberFormatOptions[unit],
+      unitDisplay: "narrow"
+    });
+    formattedParts.push(formatter.format(value));
+  }
+  if (!formattedParts.length) {
+    formattedParts.push(
+      numberFormat(resolvedLocale, {
+        style: "unit",
+        unit: "second",
+        unitDisplay: "narrow"
+      }).format(0)
+    );
+  }
+  return formattedParts.join(" ");
+}
+function formatVerboseDuration(duration, locale) {
+  let resolvedLocale;
+  if (locale) {
+    resolvedLocale = locale;
+  } else {
+    const formatter = numberFormat();
+    resolvedLocale = formatter.resolvedOptions().locale;
+  }
+  const parts = getDurationParts(duration);
+  const formattedParts = [];
+  for (const [unit, value] of Object.entries(parts)) {
+    if (value === 0 || unit === "milliseconds") {
+      continue;
+    }
+    const formatter = numberFormat(resolvedLocale, {
+      style: "unit",
+      unit: durationPartsToNumberFormatOptions[unit],
+      unitDisplay: "long"
+    });
+    formattedParts.push(formatter.format(value));
+  }
+  if (!formattedParts.length) {
+    formattedParts.push(
+      numberFormat(resolvedLocale, {
+        style: "unit",
+        unit: "second",
+        unitDisplay: "long"
+      }).format(0)
+    );
+  }
+  return formattedParts.join(" ");
+}
+function formatIso8601Duration(duration) {
+  const normalizedDuration = Math.max(duration, 0);
+  if (normalizedDuration === 0) {
+    return "PT0S";
+  }
+  const { weeks, days, hours, minutes, seconds, milliseconds } = getDurationParts(normalizedDuration);
+  let isoDuration = "P";
+  if (weeks > 0) {
+    isoDuration += `${weeks}W`;
+  }
+  if (days > 0) {
+    isoDuration += `${days}D`;
+  }
+  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {
+    isoDuration += "T";
+    if (hours > 0) {
+      isoDuration += `${hours}H`;
+    }
+    if (minutes > 0) {
+      isoDuration += `${minutes}M`;
+    }
+    if (seconds > 0 || milliseconds > 0) {
+      if (milliseconds > 0) {
+        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, "0").replace(/0+$/, "")}S`;
+      } else {
+        isoDuration += `${seconds}S`;
+      }
+    }
+  }
+  return isoDuration;
+}
+function getDateTime(date) {
+  if (date instanceof Date) {
+    return date.getTime();
+  }
+  return new Date(date).getTime();
+}
+function getDuration(from, to) {
+  return getDateTime(to) - getDateTime(from);
+}
+const Duration = forwardRef(
+  ({
+    duration,
+    from,
+    to,
+    locale,
+    dateTime,
+    title: renderTitle = formatVerboseDuration,
+    children: renderChildren = formatShortDuration,
+    interval = RENDER_INTERVAL,
+    asChild,
+    ...props
+  }, forwardedRef) => {
+    const Component = asChild ? Slot : "time";
+    const [rerender, key] = useRerender();
+    const resolvedDuration = useMemo(() => {
+      if (duration !== void 0) {
+        return duration;
+      }
+      if (from !== void 0) {
+        return getDuration(from, to ?? Date.now());
+      }
+      return 0;
+    }, [duration, from, to, key]);
+    const normalizedDuration = useMemo(
+      () => formatIso8601Duration(resolvedDuration),
+      [resolvedDuration]
+    );
+    const title = useMemo(
+      () => typeof renderTitle === "function" ? renderTitle(resolvedDuration, locale) : renderTitle,
+      [renderTitle, resolvedDuration, locale]
+    );
+    const children = useMemo(
+      () => typeof renderChildren === "function" ? renderChildren(resolvedDuration, locale) : renderChildren,
+      [renderChildren, resolvedDuration, locale]
+    );
+    useInterval(
+      rerender,
+      from !== void 0 && to === void 0 ? interval : false
+    );
+    return /* @__PURE__ */ jsx(Component, {
+      ...props,
+      ref: forwardedRef,
+      dateTime: dateTime ?? normalizedDuration,
+      title,
+      children
+    });
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  Duration.displayName = DURATION_NAME;
+}
+
+export { Duration, formatIso8601Duration };
+//# sourceMappingURL=Duration.js.map

package/dist/primitives/Duration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Duration.js","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nfunction getDuration(from: Date | string | number, to: Date | string | number) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAGpB;AACE;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAIpB;AACE;AACE;AAAuF;AAEvF;AAAkB;AACpB;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKA;AACE;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/Timestamp.cjs

@@ -78,7 +78,7 @@ function formatRelativeDate(date, locale) {
   return capitalize.capitalize(formatter.format(Math.round(difference), "years"));
 }
 function formatDynamicDate(date, locale) {
-  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD ? formatRelativeDate(date, locale) : formatShortDate(date, locale);
+  return Math.abs(date.getTime() - Date.now()) <= DYNAMIC_DATE_THRESHOLD ? formatRelativeDate(date, locale) : formatShortDate(date, locale);
 }
 const Timestamp = react.forwardRef(
   ({
@@ -100,11 +100,11 @@ const Timestamp = react.forwardRef(
     );
     const title = react.useMemo(
       () => typeof renderTitle === "function" ? renderTitle(parsedDate, locale) : renderTitle,
-      [renderTitle, parsedDate, key]
+      [renderTitle, parsedDate, locale, key]
     );
     const children = react.useMemo(
       () => typeof renderChildren === "function" ? renderChildren(parsedDate, locale) : renderChildren,
-      [renderChildren, parsedDate, key]
+      [renderChildren, parsedDate, locale, key]
     );
     useInterval.useInterval(rerender, interval);
     return /* @__PURE__ */ jsxRuntime.jsx(Component, {
@@ -121,4 +121,5 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 exports.Timestamp = Timestamp;
+exports.formatRelativeDate = formatRelativeDate;
 //# sourceMappingURL=Timestamp.cjs.map

package/dist/primitives/Timestamp.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.cjs","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA;AACA;AAEA;AA+BA;AAAsB;AACX;AACA;AACF;AACD;AACC;AAET;AAKA;AACE;AAAyC;AACjC;AACC;AACF;AACC;AACE;AAGV;AACF;AAKA;AACE;AAAyC;AAChC;AACF;AAGP;AACF;AAGA;AAAkD;AAChD;AACA;AACA;AACA;AACA;AACA;AAEF;AAKA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AAAqE;AAEE;AAGvE;AAAqD;AACb;AAC7B;AAGX;AAEA;AAIE;AAAoC;AAGtC;AACE;AACE;AAAiB;AACM;AACrB;AACF;AAGF;AAAc;AAGhB;AACF;AAMA;AACE;AAGF;AAeO;AAAkB;AAErB;AACE;AACA;AAC2B;AACN;AACrB;AACW;AACX;AACG;AAIL;AACA;AACA;AACA;AAAuB;AACQ;AAClB;AAEb;AAAc;AAIN;AAEuB;AAE/B;AAAiB;AAIT;AAE0B;AAGlC;AAEA;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}
+{"version":3,"file":"Timestamp.cjs","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nexport function formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent or soon,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return Math.abs(date.getTime() - Date.now()) <= DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for nearby dates and a short\n * absolute formatting for more distant ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, locale, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, locale, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA;AACA;AAEA;AA+BA;AAAsB;AACX;AACA;AACF;AACD;AACC;AAET;AAKA;AACE;AAAyC;AACjC;AACC;AACF;AACC;AACE;AAGV;AACF;AAKA;AACE;AAAyC;AAChC;AACF;AAGP;AACF;AAGA;AAAkD;AAChD;AACA;AACA;AACA;AACA;AACA;AAEF;AAKgB;AACd;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AAAqE;AAEE;AAGvE;AAAqD;AACb;AAC7B;AAGX;AAEA;AAIE;AAAoC;AAGtC;AACE;AACE;AAAiB;AACM;AACrB;AACF;AAGF;AAAc;AAGhB;AACF;AAMA;AACE;AAGF;AAeO;AAAkB;AAErB;AACE;AACA;AAC2B;AACN;AACrB;AACW;AACX;AACG;AAIL;AACA;AACA;AACA;AAAuB;AACQ;AAClB;AAEb;AAAc;AAIN;AAE+B;AAEvC;AAAiB;AAIT;AAEkC;AAG1C;AAEA;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;;"}

package/dist/primitives/Timestamp.js

@@ -76,7 +76,7 @@ function formatRelativeDate(date, locale) {
   return capitalize(formatter.format(Math.round(difference), "years"));
 }
 function formatDynamicDate(date, locale) {
-  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD ? formatRelativeDate(date, locale) : formatShortDate(date, locale);
+  return Math.abs(date.getTime() - Date.now()) <= DYNAMIC_DATE_THRESHOLD ? formatRelativeDate(date, locale) : formatShortDate(date, locale);
 }
 const Timestamp = forwardRef(
   ({
@@ -98,11 +98,11 @@ const Timestamp = forwardRef(
     );
     const title = useMemo(
       () => typeof renderTitle === "function" ? renderTitle(parsedDate, locale) : renderTitle,
-      [renderTitle, parsedDate, key]
+      [renderTitle, parsedDate, locale, key]
     );
     const children = useMemo(
       () => typeof renderChildren === "function" ? renderChildren(parsedDate, locale) : renderChildren,
-      [renderChildren, parsedDate, key]
+      [renderChildren, parsedDate, locale, key]
     );
     useInterval(rerender, interval);
     return /* @__PURE__ */ jsx(Component, {
@@ -118,5 +118,5 @@ if (process.env.NODE_ENV !== "production") {
   Timestamp.displayName = TIMESTAMP_NAME;
 }
 
-export { Timestamp };
+export { Timestamp, formatRelativeDate };
 //# sourceMappingURL=Timestamp.js.map

package/dist/primitives/Timestamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.js","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;AAYA;AACA;AAEA;AA+BA;AAAsB;AACX;AACA;AACF;AACD;AACC;AAET;AAKA;AACE;AAAyC;AACjC;AACC;AACF;AACC;AACE;AAGV;AACF;AAKA;AACE;AAAyC;AAChC;AACF;AAGP;AACF;AAGA;AAAkD;AAChD;AACA;AACA;AACA;AACA;AACA;AAEF;AAKA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AAAqE;AAEE;AAGvE;AAAqD;AACb;AAC7B;AAGX;AAEA;AAIE;AAAoC;AAGtC;AACE;AACE;AAAiB;AACM;AACrB;AACF;AAGF;AAAc;AAGhB;AACF;AAMA;AACE;AAGF;AAeO;AAAkB;AAErB;AACE;AACA;AAC2B;AACN;AACrB;AACW;AACX;AACG;AAIL;AACA;AACA;AACA;AAAuB;AACQ;AAClB;AAEb;AAAc;AAIN;AAEuB;AAE/B;AAAiB;AAIT;AAE0B;AAGlC;AAEA;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}
+{"version":3,"file":"Timestamp.js","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nexport function formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent or soon,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return Math.abs(date.getTime() - Date.now()) <= DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for nearby dates and a short\n * absolute formatting for more distant ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, locale, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, locale, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;AAYA;AACA;AAEA;AA+BA;AAAsB;AACX;AACA;AACF;AACD;AACC;AAET;AAKA;AACE;AAAyC;AACjC;AACC;AACF;AACC;AACE;AAGV;AACF;AAKA;AACE;AAAyC;AAChC;AACF;AAGP;AACF;AAGA;AAAkD;AAChD;AACA;AACA;AACA;AACA;AACA;AAEF;AAKgB;AACd;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AAAqE;AAEE;AAGvE;AAAqD;AACb;AAC7B;AAGX;AAEA;AAIE;AAAoC;AAGtC;AACE;AACE;AAAiB;AACM;AACrB;AACF;AAGF;AAAc;AAGhB;AACF;AAMA;AACE;AAGF;AAeO;AAAkB;AAErB;AACE;AACA;AAC2B;AACN;AACrB;AACW;AACX;AACG;AAIL;AACA;AACA;AACA;AAAuB;AACQ;AAClB;AAEb;AAAc;AAIN;AAE+B;AAEvC;AAAiB;AAIT;AAEkC;AAG1C;AAEA;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/index.cjs

@@ -4,6 +4,7 @@ var index = require('./Comment/index.cjs');
 var index$1 = require('./Composer/index.cjs');
 var contexts = require('./Composer/contexts.cjs');
 var utils = require('./Composer/utils.cjs');
+var Duration = require('./Duration.cjs');
 var FileSize = require('./FileSize.cjs');
 var Timestamp = require('./Timestamp.cjs');
 
@@ -13,6 +14,7 @@ exports.Comment = index;
 exports.Composer = index$1;
 exports.useComposer = contexts.useComposer;
 exports.AttachmentTooLargeError = utils.AttachmentTooLargeError;
+exports.Duration = Duration.Duration;
 exports.FileSize = FileSize.FileSize;
 exports.Timestamp = Timestamp.Timestamp;
 //# sourceMappingURL=index.cjs.map

package/dist/primitives/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/primitives/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEvent } from 'react';
-import { MentionData, CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
+import { MentionData, CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment, Relax } from '@liveblocks/core';
 
 type Direction = "ltr" | "rtl";
 type SlotProp = {
@@ -445,6 +445,61 @@ declare class AttachmentTooLargeError extends Error {
     constructor(message: string, origin?: "client" | "server");
 }
 
+type DurationProps = Omit<ComponentPropsWithSlot<"time">, "children" | "title"> & Relax<{
+    /**
+     * The duration in milliseconds.
+     * If provided, `from` and `to` will be ignored.
+     */
+    duration: number;
+} | {
+    /**
+     * The date at which the duration starts.
+     * If provided, `duration` will be ignored.
+     * If provided without `to` it means that the duration is in progress,
+     * and the component will re-render at an interval, customizable with
+     * the `interval` prop.
+     */
+    from: Date | string | number;
+    /**
+     * The date at which the duration ends.
+     * If `from` is provided without `to`, `Date.now()` will be used.
+     */
+    to?: Date | string | number;
+}> & {
+    /**
+     * A function to format the displayed duration.
+     */
+    children?: (duration: number, locale?: string) => ReactNode;
+    /**
+     * The `title` attribute's value or a function to format it.
+     */
+    title?: string | ((duration: number, locale?: string) => string);
+    /**
+     * The interval in milliseconds at which the component will re-render if
+     * `from` is provided without `to`, meaning that the duration is in progress.
+     * Can be set to `false` to disable re-rendering.
+     */
+    interval?: number | false;
+    /**
+     * The locale used when formatting the duration.
+     */
+    locale?: string;
+};
+/**
+ * Displays a formatted duration, and automatically re-renders to if the
+ * duration is in progress.
+ *
+ * @example
+ * <Duration duration={3 * 60 * 1000} />
+ *
+ * @example
+ * <Duration from={fiveHoursAgoDate} />
+ *
+ * @example
+ * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />
+ */
+declare const Duration: react.ForwardRefExoticComponent<DurationProps & react.RefAttributes<HTMLTimeElement>>;
+
 interface FileSizeProps extends Omit<ComponentPropsWithSlot<"span">, "children"> {
     /**
      * The file size to display.
@@ -492,8 +547,8 @@ interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children"
 }
 /**
  * Displays a formatted date, and automatically re-renders to support relative
- * formatting. Defaults to relative formatting for recent dates and a short
- * absolute formatting for older ones.
+ * formatting. Defaults to relative formatting for nearby dates and a short
+ * absolute formatting for more distant ones.
  *
  * @example
  * <Timestamp date={new Date()} />
@@ -505,4 +560,4 @@ interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children"
  */
 declare const Timestamp: react.ForwardRefExoticComponent<TimestampProps & react.RefAttributes<HTMLTimeElement>>;
 
-export { AiComposerSubmitMessage, AttachmentTooLargeError, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };
+export { AiComposerSubmitMessage, AttachmentTooLargeError, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, Duration, DurationProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };

package/dist/primitives/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEvent } from 'react';
-import { MentionData, CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
+import { MentionData, CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment, Relax } from '@liveblocks/core';
 
 type Direction = "ltr" | "rtl";
 type SlotProp = {
@@ -445,6 +445,61 @@ declare class AttachmentTooLargeError extends Error {
     constructor(message: string, origin?: "client" | "server");
 }
 
+type DurationProps = Omit<ComponentPropsWithSlot<"time">, "children" | "title"> & Relax<{
+    /**
+     * The duration in milliseconds.
+     * If provided, `from` and `to` will be ignored.
+     */
+    duration: number;
+} | {
+    /**
+     * The date at which the duration starts.
+     * If provided, `duration` will be ignored.
+     * If provided without `to` it means that the duration is in progress,
+     * and the component will re-render at an interval, customizable with
+     * the `interval` prop.
+     */
+    from: Date | string | number;
+    /**
+     * The date at which the duration ends.
+     * If `from` is provided without `to`, `Date.now()` will be used.
+     */
+    to?: Date | string | number;
+}> & {
+    /**
+     * A function to format the displayed duration.
+     */
+    children?: (duration: number, locale?: string) => ReactNode;
+    /**
+     * The `title` attribute's value or a function to format it.
+     */
+    title?: string | ((duration: number, locale?: string) => string);
+    /**
+     * The interval in milliseconds at which the component will re-render if
+     * `from` is provided without `to`, meaning that the duration is in progress.
+     * Can be set to `false` to disable re-rendering.
+     */
+    interval?: number | false;
+    /**
+     * The locale used when formatting the duration.
+     */
+    locale?: string;
+};
+/**
+ * Displays a formatted duration, and automatically re-renders to if the
+ * duration is in progress.
+ *
+ * @example
+ * <Duration duration={3 * 60 * 1000} />
+ *
+ * @example
+ * <Duration from={fiveHoursAgoDate} />
+ *
+ * @example
+ * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />
+ */
+declare const Duration: react.ForwardRefExoticComponent<DurationProps & react.RefAttributes<HTMLTimeElement>>;
+
 interface FileSizeProps extends Omit<ComponentPropsWithSlot<"span">, "children"> {
     /**
      * The file size to display.
@@ -492,8 +547,8 @@ interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children"
 }
 /**
  * Displays a formatted date, and automatically re-renders to support relative
- * formatting. Defaults to relative formatting for recent dates and a short
- * absolute formatting for older ones.
+ * formatting. Defaults to relative formatting for nearby dates and a short
+ * absolute formatting for more distant ones.
  *
  * @example
  * <Timestamp date={new Date()} />
@@ -505,4 +560,4 @@ interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children"
  */
 declare const Timestamp: react.ForwardRefExoticComponent<TimestampProps & react.RefAttributes<HTMLTimeElement>>;
 
-export { AiComposerSubmitMessage, AttachmentTooLargeError, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };
+export { AiComposerSubmitMessage, AttachmentTooLargeError, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, Duration, DurationProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };

package/dist/primitives/index.js

@@ -4,6 +4,7 @@ import * as index$1 from './Composer/index.js';
 export { index$1 as Composer };
 export { useComposer } from './Composer/contexts.js';
 export { AttachmentTooLargeError } from './Composer/utils.js';
+export { Duration } from './Duration.js';
 export { FileSize } from './FileSize.js';
 export { Timestamp } from './Timestamp.js';
 //# sourceMappingURL=index.js.map

package/dist/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/version.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "3.5.2" === "string" && "3.5.2";
+const PKG_VERSION = typeof "3.5.3" === "string" && "3.5.3";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.js

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "3.5.2" === "string" && "3.5.2";
+const PKG_VERSION = typeof "3.5.3" === "string" && "3.5.3";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "type": "module",
@@ -76,9 +76,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "3.5.2",
-    "@liveblocks/core": "3.5.2",
-    "@liveblocks/react": "3.5.2",
+    "@liveblocks/client": "3.5.3",
+    "@liveblocks/core": "3.5.3",
+    "@liveblocks/react": "3.5.3",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",

package/src/styles/index.css

@@ -2811,7 +2811,14 @@
   animation: lb-animation-shimmer-text 2s cubic-bezier(0.1, 0, 0.9, 1) infinite;
 }
 
-.lb-ai-chat-message-thinking {
+.lb-ai-chat-message-thinking,
+.lb-ai-chat-message-retrieval,
+.lb-ai-chat-message-reasoning {
+  margin-block-end: calc(0.75 * var(--lb-spacing));
+}
+
+.lb-ai-chat-message-thinking,
+.lb-ai-chat-message-retrieval {
   inline-size: fit-content;
   max-inline-size: 100%;
   color: var(--lb-foreground-tertiary);
@@ -2824,7 +2831,6 @@
 
 .lb-ai-chat-message-reasoning {
   position: relative;
-  margin-block-end: calc(0.75 * var(--lb-spacing));
 
   &::after {
     content: "";
@@ -2875,6 +2881,18 @@
   }
 }
 
+.lb-ai-chat-message-retrieval-query {
+  font-weight: 500;
+
+  &::before {
+    content: "“";
+  }
+
+  &::after {
+    content: "”";
+  }
+}
+
 .lb-ai-tool {
   position: relative;