@candor-ui/react 1.9.1 → 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/dist/styles.css

@@ -241,9 +241,12 @@
  * Font: Inter when the font-inter item is installed (styles/candor-font-inter.css),
  * else the system's sans-serif. Point --cd-font at your own font to use it instead.
  *
- * Density: data-density="compact" on <html> (or any container) tightens type for
- * dense apps: 14px conversation text and 13px body and label text, with a narrower
- * thread and sidebar.
+ * Density: data-density="compact" | "spacious" on <html> (or any container); no
+ * attribute is the default. Compact tightens type for dense apps: 14px conversation
+ * text and 13px body and label text, with a narrower thread and sidebar. Spacious is
+ * the other way, for reading-first apps: 16px conversation
+ * text and 15px body and label text, with a wider thread and sidebar. Both set the
+ * same four tokens, so one overrides the other when nested.
  *
  * Motion: data-motion="none" | "subtle" | "expressive" on <html> (or any container).
  * Subtle is the default: a change that happened is shown settling (a collapse,
@@ -334,6 +337,13 @@
   --cd-thread-width: 44rem;
   --cd-sidebar-width: 14rem;
 }
+/* The spacious preset: the same four tokens as compact, set the other way. Prose is pinned here too, at 16px. */
+[data-density="spacious"] {
+  --cd-text-prose: 1rem;
+  --cd-text-md: 0.9375rem;
+  --cd-thread-width: 52rem;
+  --cd-sidebar-width: 18rem;
+}
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     --cd-shadow: oklch(0 0 0 / 0.35);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "1.9.1",
+  "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",