@candor-ui/react 2.0.0 → 2.1.0

package/dist/blocks/relative-time.d.ts

@@ -8,21 +8,23 @@ export declare const relativeTimeStrings: {
  * "5 minutes ago", "in 6 days", in the locale (the runtime's own when left out). `bare` drops the direction for tight
  * spaces: "5 minutes".
  */
-export declare function formatRelative(date: Date, now?: Date, { locale, justNow, bare }?: {
+export declare function formatRelative(date: Date, now?: Date, { locale, justNow, bare, numeric }?: {
     locale?: string | undefined;
     justNow?: string | undefined;
     bare?: boolean | undefined;
+    numeric?: "auto" | "always" | undefined;
 }): string;
 /** The current time in milliseconds, updated every 30 seconds; null while rendering on the server. */
 export declare function useNow(): number | null;
 /**
  * "3 minutes ago" / "in 6 days", kept fresh, with the exact time on hover. Shows the date until the clock is known.
+ * `bare` shows "3 minutes" and still names the whole phrase, "3 minutes ago", to a screen reader.
  * `format` shows an absolute time instead ("5 Nov 2026, 14:03"), in the locale, with the same server-safe gate.
  */
 declare function RelativeTime({ date, bare, format, className, }: {
     /** When it happened. Shown as "5 minutes ago", with the exact time on hover. */
     date: Date | string;
-    /** Drop "ago" and "in", for tight spaces: "5 minutes". */
+    /** Drop "ago" and "in", for tight spaces: "5 minutes". Assistive technology still gets the direction. */
     bare?: boolean | undefined;
     /** "relative" (the default), or an absolute "date", "datetime" or "time" in the locale. */
     format?: "relative" | DateStyle | undefined;

package/dist/blocks/relative-time.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useFormat, useStrings } from "./locale.js";
 /** RelativeTime's fixed words; override them under `relativeTime` in LocaleProvider's `strings`. */
@@ -19,7 +19,7 @@ const units = [
  * "5 minutes ago", "in 6 days", in the locale (the runtime's own when left out). `bare` drops the direction for tight
  * spaces: "5 minutes".
  */
-export function formatRelative(date, now = new Date(), { locale, justNow = relativeTimeStrings.justNow, bare = false } = {}) {
+export function formatRelative(date, now = new Date(), { locale, justNow = relativeTimeStrings.justNow, bare = false, numeric = "auto" } = {}) {
     const seconds = Math.round((date.getTime() - now.getTime()) / 1000);
     if (Math.abs(seconds) < 10)
         return justNow;
@@ -28,7 +28,7 @@ export function formatRelative(date, now = new Date(), { locale, justNow = relat
             const n = Math.round(seconds / size);
             return bare
                 ? new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "long" }).format(Math.abs(n))
-                : new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(n, unit);
+                : new Intl.RelativeTimeFormat(locale, { numeric }).format(n, unit);
         }
     }
     return "";
@@ -64,6 +64,7 @@ export function useNow() {
 }
 /**
  * "3 minutes ago" / "in 6 days", kept fresh, with the exact time on hover. Shows the date until the clock is known.
+ * `bare` shows "3 minutes" and still names the whole phrase, "3 minutes ago", to a screen reader.
  * `format` shows an absolute time instead ("5 Nov 2026, 14:03"), in the locale, with the same server-safe gate.
  */
 function RelativeTime({ date, bare = false, format = "relative", className, }) {
@@ -76,6 +77,9 @@ function RelativeTime({ date, bare = false, format = "relative", className, }) {
         : current === null
             ? d.toISOString().slice(0, 10)
             : formatRelative(d, new Date(current), { locale: fmt.tag, justNow: t("justNow"), bare });
-    return (_jsx("time", { dateTime: d.toISOString(), title: current === null ? undefined : fmt.date(d, "datetime"), className: className, children: text }));
+    // A bare time ("2 days") is read aloud without its direction, so a screen reader hears the whole phrase ("2 days ago")
+    // while the page keeps the short one. "always" keeps the number ("1 day ago", not "yesterday"), so the spoken words match the shown ones.
+    const spoken = bare && format === "relative" && current !== null ? formatRelative(d, new Date(current), { locale: fmt.tag, justNow: t("justNow"), numeric: "always" }) : text;
+    return (_jsx("time", { dateTime: d.toISOString(), title: current === null ? undefined : fmt.date(d, "datetime"), className: className, children: spoken === text ? (text) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: text }), _jsx("span", { className: "sr-only", children: spoken })] })) }));
 }
 export { RelativeTime };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Candor UI's free tier as an npm package: React components for agents that do real work, on shadcn/ui and Tailwind 4.",
   "license": "MIT",
   "author": "Methodic LLC",