@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Progress.js

@@ -0,0 +1,419 @@
+import { jsxs as p, jsx as r, Fragment as X } from "react/jsx-runtime";
+import { useId as E } from "react";
+import { Progress as M } from "@base-ui/react/progress";
+import { Meter as k } from "@base-ui/react/meter";
+import { tv as G } from "tailwind-variants";
+import { cn as g } from "../lib/cn.js";
+import { formatPercent as R, listFormat as Y, numberFormat as q } from "../lib/intl-cache.js";
+import { Icon as H } from "./Icon.js";
+import { useUiLocale as L, useUiStrings as J } from "../lib/i18n/provider.js";
+const P = G({
+  slots: {
+    root: "flex w-full min-w-0 flex-col gap-1.5",
+    header: "flex items-baseline justify-between gap-4",
+    label: "text-xs font-medium text-secondary",
+    value: "font-mono text-xs tabular-nums text-tertiary",
+    track: "relative w-full overflow-hidden rounded-full bg-meter-track",
+    indicator: [
+      "h-full rounded-full",
+      /* Width, not transform: the bar has to grow from its own left edge, and
+         a scaled transform would squash the rounded cap along with it. The
+         paint cost is trivial at this size — see the paint budget in
+         motion.css. */
+      "transition-[var(--tx-colors),width] duration-(--dur-slow) ease-emphasis"
+    ]
+  },
+  variants: {
+    size: {
+      sm: { track: "h-1" },
+      md: { track: "h-2" },
+      lg: { track: "h-3" }
+    },
+    tone: {
+      accent: { indicator: "bg-accent" },
+      brand: { indicator: "bg-brand" },
+      success: { indicator: "bg-success" },
+      warning: { indicator: "bg-warning" },
+      danger: { indicator: "bg-danger" },
+      /**
+       * Neutral/gray — for a segment or bar that is neither good nor bad, just
+       * not-yet-decided (a "pending" quality gate, a step nobody has started).
+       * `--color-tertiary` is already the closest token to the old Vue app's
+       * pending-gate gray (`#64748b`): in the light theme it resolves to
+       * `--slate-500`, which IS `#64748b` (see tokens.css / contrast.css) —
+       * so this reuses an existing semantic slot instead of minting a new
+       * `--color-neutral` custom property for one tone.
+       */
+      neutral: { indicator: "bg-tertiary" },
+      /**
+       * DX-3014 — a resolved-but-neither-pass-nor-fail state: a deliberately
+       * deferred/withdrawn checklist item, a skipped quality gate. Reuses the
+       * SAME `--color-info` token `Badge`/`Callout`/`Toast` already draw their
+       * own "info" tone from, so a segmented ring's info arc never invents a
+       * second blue that disagrees with the pill sitting next to it.
+       */
+      info: { indicator: "bg-info" },
+      /**
+       * DX-3662 — a CLOSED/inert state (a terminated card, a retired
+       * record): distinct from `neutral`'s "not yet decided" grey above —
+       * see `authored.css`'s own `--color-muted` comment for the full
+       * reasoning. DX-3696: the ring's own `RING_STATUS_ORDER` never draws
+       * `muted` (Cancelled is excluded from the ring), so the ring's OKLab
+       * adjacency test (`card-vocabulary.test.ts`, the app repo) never
+       * actually checks this pair — `muted-quieter-than-neutral.test.ts`,
+       * in THIS repo, is what pins the two greys apart (as a contrast-ranking
+       * floor, not an OKLab distance — muted must read strictly quieter
+       * than neutral, not merely far from it).
+       */
+      muted: { indicator: "bg-muted" }
+    }
+  },
+  defaultVariants: { size: "md", tone: "accent" }
+});
+function me({
+  value: e,
+  label: t,
+  format: n,
+  showValue: s = !0,
+  size: m,
+  tone: c,
+  className: u,
+  ref: l
+}) {
+  const o = P({ size: m, tone: c }), a = e === null, i = L(), d = n ?? ((v) => R(Math.round(v), i));
+  return /* @__PURE__ */ p(M.Root, { ref: l, value: e, className: g(o.root(), u), children: [
+    (t || s) && /* @__PURE__ */ p("div", { className: o.header(), children: [
+      t && /* @__PURE__ */ r(M.Label, { className: o.label(), children: t }),
+      s && /* @__PURE__ */ r("span", { className: o.value(), children: a ? "—" : d(e) })
+    ] }),
+    /* @__PURE__ */ r(M.Track, { className: o.track(), children: /* @__PURE__ */ r(
+      M.Indicator,
+      {
+        className: g(
+          o.indicator(),
+          /* Indeterminate is a short bar sweeping the track, NOT a full bar
+             pulsing. A pulsing full bar says "finished, and stuck"; a
+             travelling short one says "working, length unknown" — which is
+             the actual fact being reported. */
+          a && "absolute w-1/3 [animation:dx-progress-sweep_1.6s_var(--ease-standard)_infinite]"
+        )
+      }
+    ) })
+  ] });
+}
+function ue({
+  value: e,
+  min: t = 0,
+  max: n = 100,
+  label: s,
+  format: m = (h) => String(h),
+  showValue: c = !0,
+  size: u,
+  tone: l,
+  marker: o,
+  markerLabel: a,
+  overflowTone: i = "danger",
+  emptyTrack: d,
+  className: v,
+  ref: w
+}) {
+  const h = P({ size: u, tone: l }), N = E(), b = o !== void 0, y = d === "dashed" && e <= t, x = b ? Math.max(n, e, o) : n;
+  return /* @__PURE__ */ p(
+    k.Root,
+    {
+      ref: w,
+      value: e,
+      min: t,
+      max: x,
+      "aria-describedby": b ? N : void 0,
+      className: g(h.root(), v),
+      children: [
+        (s || c) && /* @__PURE__ */ p("div", { className: h.header(), children: [
+          s && /* @__PURE__ */ r(k.Label, { className: h.label(), children: s }),
+          c && /* @__PURE__ */ r("span", { className: h.value(), children: m(e) })
+        ] }),
+        b ? /* @__PURE__ */ p("div", { className: "relative", children: [
+          /* @__PURE__ */ r(k.Track, { className: h.track(), children: /* @__PURE__ */ r(
+            K,
+            {
+              value: e,
+              min: t,
+              extent: x,
+              marker: o,
+              tone: l,
+              overflowTone: i
+            }
+          ) }),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              "data-meter-marker": "",
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute -inset-y-0.5 w-0.5 rounded-full bg-primary",
+              style: { left: `${I(o, t, x)}%`, transform: `translateX(-${I(o, t, x)}%)` }
+            }
+          ),
+          /* @__PURE__ */ r("span", { id: N, className: "sr-only", children: a })
+        ] }) : /* @__PURE__ */ r(
+          k.Track,
+          {
+            "data-track": y ? "empty" : void 0,
+            className: g(
+              h.track(),
+              y && "border border-dashed border-tertiary bg-transparent"
+            ),
+            children: /* @__PURE__ */ r(k.Indicator, { className: h.indicator() })
+          }
+        )
+      ]
+    }
+  );
+}
+function I(e, t, n) {
+  return n > t ? (e - t) / (n - t) * 100 : 0;
+}
+function K({
+  value: e,
+  min: t,
+  extent: n,
+  marker: s,
+  tone: m,
+  overflowTone: c
+}) {
+  const u = P({ tone: m }), l = e > s, o = I(l ? s : e, t, n), a = l ? I(e, t, n) - o : 0;
+  return /* @__PURE__ */ p("div", { className: "flex h-full w-full", children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        "data-meter-part": "base",
+        className: g(u.indicator(), "rounded-r-none", !l && "rounded-r-full"),
+        style: { width: `${o}%` }
+      }
+    ),
+    l && /* @__PURE__ */ r(
+      "div",
+      {
+        "data-meter-part": "over",
+        className: g(P({ tone: c }).indicator(), "rounded-l-none"),
+        style: { width: `${a}%` }
+      }
+    )
+  ] });
+}
+const O = G({
+  base: "relative grid shrink-0 place-items-center",
+  variants: {
+    size: {
+      /**
+       * Icon-sized — a single arc beside a chevron or a percentage in a card
+       * row (24px), where even `sm` (40px) is taller than the row itself.
+       * Matches the private `ContextDial` this size replaces in
+       * `chat/ContextMeter.tsx` (`size-3.5`) pixel-for-pixel. Always pair with
+       * `showValue={false}`: two digits do not fit a 14px circle, and nothing
+       * clips or shrinks them automatically if you leave the number on.
+       */
+      xs: "size-3.5",
+      /**
+       * DX-4099 — the ring that fills exactly ONE text line (1rem, the line
+       * unit of a card face row, `leading-4`), with nothing around it. Built to
+       * carry an `xs` icon in its centre (`children`, `showValue={false}`): the
+       * ring is the indicator and the icon says what it indicates. `xs` (14px)
+       * is a hair short of a 16px line and leaves the ring floating in it. Its
+       * track is thinner than every other size's (`RING_GEOMETRY`), so the icon
+       * fits inside it. Like `xs`, always pair with `showValue={false}`: two
+       * digits do not fit a 16px circle, and nothing clips or shrinks them.
+       */
+      row: "size-4",
+      sm: "size-10",
+      md: "size-16",
+      lg: "size-24",
+      /**
+       * A big donut standing in as a stat's own visual (`BigDonut`, demands'
+       * Extracted-tab EXTRACTED/AUDITS/HUMAN VERIFIED/answer-key row) needs more
+       * room than `lg` for a "count/total" fraction than a bare percentage ever
+       * did — `lg` was sized for two digits, and a real fraction runs to eight
+       * or nine characters even compacted ("1.1K/1.5K"). `xl` is that room.
+       */
+      xl: "size-32"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), _ = {
+  default: { r: 10, stroke: 2.5 },
+  row: { r: 11.25, stroke: 1.5 }
+};
+function j(e) {
+  return e === "row" ? _.row : _.default;
+}
+const C = {
+  accent: "text-accent",
+  brand: "text-brand",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger",
+  neutral: "text-tertiary",
+  // DX-3014 — see the matching `info` tone on `bar`'s variants above.
+  info: "text-info",
+  // DX-3662 — see the matching `muted` tone on `bar`'s variants above.
+  muted: "text-muted"
+}, Q = 4e-3, Z = 1e-9;
+function V(e, t) {
+  const n = e.reduce((a, i) => a + Math.max(0, i.value), 0), s = Math.max(0, n - t), m = (a) => t > 0 ? Math.max(0, a) / t : 0, c = [];
+  let u = 0;
+  for (const a of e) {
+    const i = m(a.value), d = Math.min(i, Math.max(0, 1 - u));
+    d > 0 && c.push({
+      label: a.label,
+      tone: a.tone,
+      color: a.color,
+      value: a.value,
+      start: u,
+      length: d
+    }), u += d;
+  }
+  const l = u >= 1 - Z && c.length > 1;
+  return { arcs: c.map((a, i) => i < c.length - 1 || l ? { ...a, length: Math.max(0, a.length - Q) } : a), used: n, overflow: s };
+}
+const $ = (e, t) => (
+  // `part * 100` before the divide: `29 / 100 * 100` is 28.999999999999996 and
+  // would floor to 28. Exact for whole-number inputs, and a part equal to the
+  // total is exactly 100.
+  t > 0 ? Math.floor(e * 100 / t) : 0
+);
+function fe(e) {
+  return e.segments === void 0 ? /* @__PURE__ */ r(ee, { ...e }) : /* @__PURE__ */ r(te, { ...e });
+}
+function W({ children: e }) {
+  return e == null || e === !1 ? null : /* @__PURE__ */ r("span", { className: "absolute grid place-items-center", "aria-hidden": "true", "data-ring-centre": "true", children: e });
+}
+function F({ size: e }) {
+  return /* @__PURE__ */ r("span", { className: "absolute grid place-items-center text-success", "data-ring-check": "true", children: /* @__PURE__ */ r(H, { name: "check", size: e === "row" ? "xs" : e ?? "md" }) });
+}
+function U({ percent: e }) {
+  const t = L(), n = q(t, { style: "percent", maximumFractionDigits: 0 }).formatToParts(Math.round(e) / 100);
+  return /* @__PURE__ */ r(X, { children: n.map(
+    (s, m) => s.type === "percentSign" ? /* @__PURE__ */ r("span", { className: "text-2xs font-medium", children: s.value }, m) : s.value
+  ) });
+}
+function ee({
+  value: e,
+  label: t,
+  size: n,
+  tone: s = "accent",
+  showValue: m = !0,
+  checkWhenFull: c = !0,
+  children: u,
+  className: l
+}) {
+  const { r: o, stroke: a } = j(n), i = e === null, d = i ? 0.25 : Math.max(0, Math.min(1, e / 100));
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: g(O({ size: n }), l),
+      role: "progressbar",
+      "aria-valuenow": i ? void 0 : Math.round(e),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": t,
+      children: [
+        /* @__PURE__ */ p("svg", { viewBox: "0 0 24 24", className: g("size-full -rotate-90", i && "animate-spin"), children: [
+          /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: o, fill: "none", strokeWidth: a, className: "stroke-surface-inset" }),
+          /* @__PURE__ */ r(
+            "circle",
+            {
+              cx: "12",
+              cy: "12",
+              r: o,
+              fill: "none",
+              strokeWidth: a,
+              strokeLinecap: "round",
+              pathLength: "1",
+              strokeDasharray: "1",
+              strokeDashoffset: 1 - d,
+              className: g(
+                "transition-[var(--tx-colors),stroke-dashoffset] duration-(--dur-slow) ease-emphasis",
+                C[s ?? "accent"]
+              ),
+              stroke: "currentColor"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(W, { children: u }),
+        !i && m && c && e >= 100 && /* @__PURE__ */ r(F, { size: n }),
+        !i && m && !(c && e >= 100) && /* @__PURE__ */ r("span", { className: "absolute flex items-baseline font-mono text-xs font-semibold tabular-nums text-primary", children: /* @__PURE__ */ r(U, { percent: e }) })
+      ]
+    }
+  );
+}
+function te({
+  segments: e,
+  total: t,
+  label: n,
+  size: s,
+  remainderLabel: m,
+  showValue: c = !0,
+  centerValue: u,
+  checkWhenFull: l = !0,
+  children: o,
+  className: a
+}) {
+  const i = J().progress, d = L(), { r: v, stroke: w } = j(s), { arcs: h, used: N, overflow: b } = V(e, t), y = $(N, t), x = u ?? y, z = t - N, T = e.filter((f) => f.value > 0).map((f) => `${f.label} ${R($(f.value, t), d)}`);
+  z > 0 && T.push(`${m ?? i.remaining} ${R($(z, t), d)}`);
+  const D = Y(d, { type: "conjunction", style: "narrow" }).format(T), B = b > 0 ? i.overTotal(D, R($(b, t), d)) : D, S = `dx-ring-${E()}`;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: g(O({ size: s }), a),
+      role: "progressbar",
+      "aria-valuenow": Math.max(0, Math.min(100, Math.round(x))),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": n,
+      "aria-describedby": S,
+      "data-overflow": b > 0 ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ p("svg", { viewBox: "0 0 24 24", className: "size-full -rotate-90", children: [
+          /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: v, fill: "none", strokeWidth: w, className: "stroke-surface-inset" }),
+          h.map((f, A) => /* @__PURE__ */ r(
+            "circle",
+            {
+              cx: "12",
+              cy: "12",
+              r: v,
+              fill: "none",
+              strokeWidth: w,
+              strokeLinecap: "butt",
+              pathLength: "1",
+              strokeDasharray: `${f.length} 1`,
+              strokeDashoffset: -f.start,
+              className: g(
+                "transition-[var(--tx-colors),stroke-dasharray,stroke-dashoffset] duration-(--dur-slow) ease-emphasis",
+                f.color === void 0 && C[f.tone]
+              ),
+              style: f.color === void 0 ? void 0 : { color: f.color },
+              stroke: "currentColor"
+            },
+            `${f.label}-${A}`
+          ))
+        ] }),
+        /* @__PURE__ */ r(W, { children: o }),
+        c && l && x >= 100 && /* @__PURE__ */ r(F, { size: s }),
+        c && !(l && x >= 100) && /* NOT clamped (rounded only). A ring that is full and a ring that is
+        half as full again are the same picture, and this number is the
+        difference — true of an over-sum `total`/`segments` pair and
+        equally true of a `centerValue` the caller hands in past 100. */
+        /* @__PURE__ */ r("span", { className: "absolute flex items-baseline font-mono text-xs font-semibold tabular-nums text-primary", children: /* @__PURE__ */ r(U, { percent: x }) }),
+        /* @__PURE__ */ r("span", { id: S, className: "sr-only", children: B })
+      ]
+    }
+  );
+}
+export {
+  ue as Meter,
+  me as Progress,
+  fe as ProgressRing,
+  C as RING_TONE,
+  V as layoutRingSegments,
+  $ as percentOf
+};
+//# sourceMappingURL=Progress.js.map

package/dist/components/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../src/components/Progress.tsx"],"sourcesContent":["import { useId, type ReactNode, type Ref } from \"react\";\nimport { Progress as BaseProgress } from \"@base-ui/react/progress\";\nimport { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { formatPercent, listFormat, numberFormat } from \"../lib/intl-cache\";\nimport { Icon, type IconSize } from \"./Icon\";\n\n/* ============================================================================\n   PROGRESS vs METER — two components, because they are two different facts.\n\n     PROGRESS  how far through a TASK you are. It only goes up, it ends, and\n               `null` means \"working, but the total is unknown\".\n     METER     how full a GAUGE is right now. It goes both ways, it never\n               ends, and there is no such thing as an indeterminate one.\n\n   Disk usage is a meter. A file upload is progress. Using progress for a gauge\n   is why you see progress bars that go backwards, which reads as an error even\n   when the number is correct.\n\n   ROUNDED ENDS ARE THE INDICATOR'S, NOT THE TRACK'S. A rounded track with a\n   square indicator leaves a visible sliver of track at 100%; rounding the\n   indicator instead means it fills its container exactly, and at very low\n   values it shows as a dot rather than a hairline nobody can see.\n   ========================================================================= */\n\nconst bar = tv({\n  slots: {\n    root: \"flex w-full min-w-0 flex-col gap-1.5\",\n    header: \"flex items-baseline justify-between gap-4\",\n    label: \"text-xs font-medium text-secondary\",\n    value: \"font-mono text-xs tabular-nums text-tertiary\",\n    track: \"relative w-full overflow-hidden rounded-full bg-meter-track\",\n    indicator: [\n      \"h-full rounded-full\",\n      /* Width, not transform: the bar has to grow from its own left edge, and\n         a scaled transform would squash the rounded cap along with it. The\n         paint cost is trivial at this size — see the paint budget in\n         motion.css. */\n      \"transition-[var(--tx-colors),width] duration-(--dur-slow) ease-emphasis\",\n    ],\n  },\n  variants: {\n    size: {\n      sm: { track: \"h-1\" },\n      md: { track: \"h-2\" },\n      lg: { track: \"h-3\" },\n    },\n    tone: {\n      accent: { indicator: \"bg-accent\" },\n      brand: { indicator: \"bg-brand\" },\n      success: { indicator: \"bg-success\" },\n      warning: { indicator: \"bg-warning\" },\n      danger: { indicator: \"bg-danger\" },\n      /**\n       * Neutral/gray — for a segment or bar that is neither good nor bad, just\n       * not-yet-decided (a \"pending\" quality gate, a step nobody has started).\n       * `--color-tertiary` is already the closest token to the old Vue app's\n       * pending-gate gray (`#64748b`): in the light theme it resolves to\n       * `--slate-500`, which IS `#64748b` (see tokens.css / contrast.css) —\n       * so this reuses an existing semantic slot instead of minting a new\n       * `--color-neutral` custom property for one tone.\n       */\n      neutral: { indicator: \"bg-tertiary\" },\n      /**\n       * DX-3014 — a resolved-but-neither-pass-nor-fail state: a deliberately\n       * deferred/withdrawn checklist item, a skipped quality gate. Reuses the\n       * SAME `--color-info` token `Badge`/`Callout`/`Toast` already draw their\n       * own \"info\" tone from, so a segmented ring's info arc never invents a\n       * second blue that disagrees with the pill sitting next to it.\n       */\n      info: { indicator: \"bg-info\" },\n      /**\n       * DX-3662 — a CLOSED/inert state (a terminated card, a retired\n       * record): distinct from `neutral`'s \"not yet decided\" grey above —\n       * see `authored.css`'s own `--color-muted` comment for the full\n       * reasoning. DX-3696: the ring's own `RING_STATUS_ORDER` never draws\n       * `muted` (Cancelled is excluded from the ring), so the ring's OKLab\n       * adjacency test (`card-vocabulary.test.ts`, the app repo) never\n       * actually checks this pair — `muted-quieter-than-neutral.test.ts`,\n       * in THIS repo, is what pins the two greys apart (as a contrast-ranking\n       * floor, not an OKLab distance — muted must read strictly quieter\n       * than neutral, not merely far from it).\n       */\n      muted: { indicator: \"bg-muted\" },\n    },\n  },\n  defaultVariants: { size: \"md\", tone: \"accent\" },\n});\n\nexport interface ProgressProps extends VariantProps<typeof bar> {\n  /** 0–100, or `null` for work of unknown length. */\n  value: number | null;\n  label?: ReactNode;\n  /** Turn the number into what a person should read. */\n  format?: (value: number) => string;\n  showValue?: boolean;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Progress({\n  value,\n  label,\n  format: formatProp,\n  showValue = true,\n  size,\n  tone,\n  className,\n  ref,\n}: ProgressProps) {\n  const s = bar({ size, tone });\n  const indeterminate = value === null;\n  const locale = useUiLocale();\n  const format = formatProp ?? ((v: number) => formatPercent(Math.round(v), locale));\n\n  return (\n    <BaseProgress.Root ref={ref} value={value} className={cn(s.root(), className)}>\n      {(label || showValue) && (\n        <div className={s.header()}>\n          {label && <BaseProgress.Label className={s.label()}>{label}</BaseProgress.Label>}\n          {showValue && (\n            <span className={s.value()}>{indeterminate ? \"—\" : format(value)}</span>\n          )}\n        </div>\n      )}\n      <BaseProgress.Track className={s.track()}>\n        <BaseProgress.Indicator\n          className={cn(\n            s.indicator(),\n            /* Indeterminate is a short bar sweeping the track, NOT a full bar\n               pulsing. A pulsing full bar says \"finished, and stuck\"; a\n               travelling short one says \"working, length unknown\" — which is\n               the actual fact being reported. */\n            indeterminate &&\n              \"absolute w-1/3 [animation:dx-progress-sweep_1.6s_var(--ease-standard)_infinite]\",\n          )}\n        />\n      </BaseProgress.Track>\n    </BaseProgress.Root>\n  );\n}\n\ninterface MeterBaseProps extends VariantProps<typeof bar> {\n  value: number;\n  min?: number;\n  max?: number;\n  label?: ReactNode;\n  format?: (value: number) => string;\n  showValue?: boolean;\n  /**\n   * DXUI-49 — how the track looks while the value sits at its start (0, or\n   * `min`). `\"dashed\"` draws it as a dashed grey outline with no fill, so an\n   * empty gauge reads as empty rather than as a nearly-empty bar. Above the\n   * start the normal filled track is drawn. Unset, the track is always filled.\n   * Applies to a Meter without a `marker`.\n   */\n  emptyTrack?: \"dashed\";\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * DX-5243 — a target on the gauge. `marker` is a value on the same scale as\n * `value`; a thin tick is drawn there and `markerLabel` (required with it, so\n * the tick is never silent) describes it to assistive tech. When `value`\n * exceeds `marker` the track stretches to span `value`: the part up to the\n * marker keeps `tone`, the part past it is `overflowTone`. `marker` 0 is a\n * real target (start nothing): the tick sits at the start and everything\n * running is overflow.\n */\nexport type MeterMarkerProps =\n  | { marker?: undefined; markerLabel?: never; overflowTone?: never }\n  | { marker: number; markerLabel: string; overflowTone?: ProgressTone };\n\nexport type MeterProps = MeterBaseProps & MeterMarkerProps;\n\n/** A gauge: how full something is right now. Never indeterminate. */\nexport function Meter({\n  value,\n  min = 0,\n  max = 100,\n  label,\n  format = (v) => String(v),\n  showValue = true,\n  size,\n  tone,\n  marker,\n  markerLabel,\n  overflowTone = \"danger\",\n  emptyTrack,\n  className,\n  ref,\n}: MeterProps) {\n  const s = bar({ size, tone });\n  const markerDescId = useId();\n  const hasMarker = marker !== undefined;\n  /* DXUI-49: the dashed empty track replaces the fill only while the gauge sits at its start. */\n  const emptyDashed = emptyTrack === \"dashed\" && value <= min;\n  /* With a marker the scale grows to hold whichever of max/value/marker is\n     largest, so an overage is drawn to scale instead of clipped at 100%. */\n  const extent = hasMarker ? Math.max(max, value, marker) : max;\n\n  return (\n    <BaseMeter.Root\n      ref={ref}\n      value={value}\n      min={min}\n      max={extent}\n      aria-describedby={hasMarker ? markerDescId : undefined}\n      className={cn(s.root(), className)}\n    >\n      {(label || showValue) && (\n        <div className={s.header()}>\n          {label && <BaseMeter.Label className={s.label()}>{label}</BaseMeter.Label>}\n          {showValue && <span className={s.value()}>{format(value)}</span>}\n        </div>\n      )}\n      {hasMarker ? (\n        <div className=\"relative\">\n          <BaseMeter.Track className={s.track()}>\n            <MeterParts\n              value={value}\n              min={min}\n              extent={extent}\n              marker={marker}\n              tone={tone}\n              overflowTone={overflowTone}\n            />\n          </BaseMeter.Track>\n          {/* DX-5290: the tick is pulled back by the same share of ITS OWN width as its position on the track (a translate\n              percentage is of the element itself), so it sits flush inside both ends and centred in between. Centring it at every\n              position put half the tick past the track at 100%, and a scrolling parent (a popover) showed a horizontal scrollbar. */}\n          <span\n            data-meter-marker=\"\"\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute -inset-y-0.5 w-0.5 rounded-full bg-primary\"\n            style={{ left: `${fraction(marker, min, extent)}%`, transform: `translateX(-${fraction(marker, min, extent)}%)` }}\n          />\n          <span id={markerDescId} className=\"sr-only\">\n            {markerLabel}\n          </span>\n        </div>\n      ) : (\n        <BaseMeter.Track\n          data-track={emptyDashed ? \"empty\" : undefined}\n          className={cn(\n            s.track(),\n            emptyDashed && \"border border-dashed border-tertiary bg-transparent\",\n          )}\n        >\n          <BaseMeter.Indicator className={s.indicator()} />\n        </BaseMeter.Track>\n      )}\n    </BaseMeter.Root>\n  );\n}\n\n/** Where `x` sits on the min..extent scale, as a 0-100 percentage. A zero-length scale is empty. */\nfunction fraction(x: number, min: number, extent: number): number {\n  return extent > min ? ((x - min) / (extent - min)) * 100 : 0;\n}\n\nfunction MeterParts({\n  value,\n  min,\n  extent,\n  marker,\n  tone,\n  overflowTone,\n}: {\n  value: number;\n  min: number;\n  extent: number;\n  marker: number;\n  tone: ProgressTone | undefined;\n  overflowTone: ProgressTone;\n}) {\n  const s = bar({ tone });\n  const over = value > marker;\n  const baseWidth = fraction(over ? marker : value, min, extent);\n  const overWidth = over ? fraction(value, min, extent) - baseWidth : 0;\n  return (\n    <div className=\"flex h-full w-full\">\n      <div\n        data-meter-part=\"base\"\n        className={cn(s.indicator(), \"rounded-r-none\", !over && \"rounded-r-full\")}\n        style={{ width: `${baseWidth}%` }}\n      />\n      {over && (\n        <div\n          data-meter-part=\"over\"\n          className={cn(bar({ tone: overflowTone }).indicator(), \"rounded-l-none\")}\n          style={{ width: `${overWidth}%` }}\n        />\n      )}\n    </div>\n  );\n}\n\nconst ring = tv({\n  base: \"relative grid shrink-0 place-items-center\",\n  variants: {\n    size: {\n      /**\n       * Icon-sized — a single arc beside a chevron or a percentage in a card\n       * row (24px), where even `sm` (40px) is taller than the row itself.\n       * Matches the private `ContextDial` this size replaces in\n       * `chat/ContextMeter.tsx` (`size-3.5`) pixel-for-pixel. Always pair with\n       * `showValue={false}`: two digits do not fit a 14px circle, and nothing\n       * clips or shrinks them automatically if you leave the number on.\n       */\n      xs: \"size-3.5\",\n      /**\n       * DX-4099 — the ring that fills exactly ONE text line (1rem, the line\n       * unit of a card face row, `leading-4`), with nothing around it. Built to\n       * carry an `xs` icon in its centre (`children`, `showValue={false}`): the\n       * ring is the indicator and the icon says what it indicates. `xs` (14px)\n       * is a hair short of a 16px line and leaves the ring floating in it. Its\n       * track is thinner than every other size's (`RING_GEOMETRY`), so the icon\n       * fits inside it. Like `xs`, always pair with `showValue={false}`: two\n       * digits do not fit a 16px circle, and nothing clips or shrinks them.\n       */\n      row: \"size-4\",\n      sm: \"size-10\",\n      md: \"size-16\",\n      lg: \"size-24\",\n      /**\n       * A big donut standing in as a stat's own visual (`BigDonut`, demands'\n       * Extracted-tab EXTRACTED/AUDITS/HUMAN VERIFIED/answer-key row) needs more\n       * room than `lg` for a \"count/total\" fraction than a bare percentage ever\n       * did — `lg` was sized for two digits, and a real fraction runs to eight\n       * or nine characters even compacted (\"1.1K/1.5K\"). `xl` is that room.\n       */\n      xl: \"size-32\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/**\n * DX-4099 — the arc geometry in the ring svg's 24-unit viewBox, per size. Every\n * size draws the same `r` 10 / `stroke` 2.5 ring (its DOM is pinned) except\n * `row`: a 16px ring carrying a 14px `xs` icon needs the track thin AND pushed\n * out to the box edge. At r 10 / 2.5 the track's outer edge is 15px (short of\n * the 16px line) and its clear inside has a 5.83px radius, so the icon's ink\n * (7.66px at the corners of clipboard-check and file-code, 7.31px for\n * list-checks, measured from the real paths) overlaps it by up to 1.8px. At\n * r 11.25 / 1.5 the outer edge is the box edge (r + stroke/2 = 12 units = 16px)\n * and the clear inside has a 7.00px radius, so only the four diagonal corners of\n * those icons still reach it, by 0.66px at most (0.31px for list-checks).\n */\nconst RING_GEOMETRY = {\n  default: { r: 10, stroke: 2.5 },\n  row: { r: 11.25, stroke: 1.5 },\n} as const;\n\nfunction ringGeometry(size: VariantProps<typeof ring>[\"size\"]) {\n  return size === \"row\" ? RING_GEOMETRY.row : RING_GEOMETRY.default;\n}\n\n/** The tones a bar, meter or ring arc can be drawn in. */\nexport type ProgressTone = NonNullable<VariantProps<typeof bar>[\"tone\"]>;\n\n/** One arc of a segmented ring: how much, in what tone, called what. */\nexport interface ProgressRingSegment {\n  /**\n   * How much of `total` this arc covers, in the caller's own units — tokens,\n   * megabytes, jobs. Never a percentage of its own accord; the denominator is\n   * `total` and nothing else.\n   */\n  value: number;\n  tone: ProgressTone;\n  /**\n   * DXUI-30 — any CSS colour string. Set, it paints this arc in place of its\n   * `tone` (same prop name and meaning as `Badge`'s `color`); unset, the tone\n   * applies. Lets a consumer use a colour it owns without overriding theme tokens.\n   */\n  color?: string;\n  /**\n   * What this arc IS, in words.\n   *\n   * Not decorative and not optional: it is read out as part of the ring's\n   * description, and it is the only thing a legend beside the ring has to name\n   * a colour by. A segmented ring whose arcs had no names would encode its\n   * entire breakdown in hue alone.\n   */\n  label: string;\n}\n\n/**\n * DX-4099 — what sits in the middle of the ring, as ONE union so the number,\n * the done check and a caller's own glyph never compete. `children` is only\n * accepted with `showValue={false}`: a glyph drawn over the percentage would be\n * two things in one 14-16px circle, and a silent \"which wins\" rule is exactly\n * what the `segments`/`value` union below exists to avoid. The glyph is\n * decoration (`aria-hidden`); the ring's role, name and description are\n * unchanged and carry the meaning.\n */\ntype ProgressRingCentre =\n  | {\n      /**\n       * Draw the number in the middle. On by default, which is the behaviour this\n       * component has always had.\n       *\n       * Worth turning off on a `sm` ring used as an affordance rather than a\n       * readout — two digits inside a 40px circle is a number nobody reads and a\n       * ring nobody can see past.\n       */\n      showValue?: true;\n      children?: never;\n    }\n  | {\n      showValue: false;\n      /** A decorative glyph centred over the ring, e.g. `<Icon name=\"file-code\" size=\"xs\" />`. */\n      children?: ReactNode;\n    };\n\ninterface ProgressRingBase extends VariantProps<typeof ring> {\n  /**\n   * REQUIRED, and a plain string.\n   *\n   * The ring draws a bare number in a circle, so unlike the bar it has no\n   * visible label to borrow a name from — without this it announces as\n   * \"progress bar, 64\" with no indication of 64 WHAT. Optional here would mean\n   * \"forgotten most of the time\", which the browser scan proved within minutes\n   * of this component existing.\n   */\n  label: string;\n  /**\n   * DX-4062 / DX-4257 — done state: at 100% or more the centre shows a green check\n   * (the library's `check` icon) instead of \"100%\". Below 100% nothing changes.\n   * On by default; pass `false` for a ring whose full value must still read as a\n   * number. It takes the place of the number, so it has no effect with\n   * `showValue={false}`.\n   */\n  checkWhenFull?: boolean;\n  className?: string;\n}\n\n/** A ring showing ONE number. `null` is \"working, length unknown\". */\nexport type ProgressRingValueProps = ProgressRingBase & ProgressRingCentre & {\n  value: number | null;\n  tone?: ProgressTone;\n  segments?: never;\n  total?: never;\n  remainderLabel?: never;\n};\n\n/**\n * A ring showing a BREAKDOWN: contiguous arcs around one circle.\n *\n * The two shapes are a union rather than two optional props, so passing both\n * `value` and `segments` does not type-check. There is no precedence rule to\n * learn and no silent winner.\n */\nexport type ProgressRingSegmentsProps = ProgressRingBase & ProgressRingCentre & {\n  /** Drawn in order, starting at twelve o'clock and running clockwise. */\n  segments: ProgressRingSegment[];\n  /**\n   * The whole the segments are parts OF, in the same units as their values.\n   *\n   * REQUIRED, with no default. A default of 100 would read as \"the values are\n   * percentages\" and quietly turn a ring of token counts into a ring that\n   * overflows on its first render — and the denominator is the one fact that\n   * makes a remainder arc mean anything.\n   *\n   * SEGMENTS SUMMING TO MORE THAN THIS ARE **CLAMPED, NOT NORMALISED** — see\n   * the note above `layoutRingSegments`.\n   */\n  total: number;\n  /**\n   * What the unfilled part of the ring IS, for the description: \"Remaining\",\n   * \"Free\", \"Unallocated\".\n   *\n   * The arc itself needs no drawing — it is the track showing through — but it\n   * still needs a name, because \"72% used\" and \"28% free\" are the same fact\n   * and readers act on different halves of it.\n   */\n  remainderLabel?: string;\n  /**\n   * Overrides the centre number — and `aria-valuenow` with it — instead of\n   * the library's own `percentOf(used, total)`.\n   *\n   * DX-3766: `percentOf(used, total)` answers \"how much of what's DRAWN is\n   * used\", which is the right fact only when the segments are a partial fill\n   * (a context window, a disk budget) with real room left on the track. A\n   * caller who draws every category that makes up the whole — a plan\n   * header's In Progress/Ready/Archive/Review/Done breakdown, where the\n   * segments ARE the total by construction — gets a permanent, useless 100%\n   * out of that formula, because `used` always equals `total`. There is no\n   * way to get a DIFFERENT number (e.g. \"Done ÷ total\") out of the segments\n   * without either lying about what's drawn or losing the multi-arc colour\n   * breakdown entirely.\n   *\n   * A plain number, read the same way the computed percent is: rounded for\n   * display, and separately clamped to [0, 100] for `aria-valuenow` (which\n   * `aria-valuemax` already declares as the ceiling) — the visible digit\n   * still shows the caller's real number even past 100, exactly as the\n   * computed percent does on an over-sum ring; only the announced value is\n   * bounded.\n   *\n   * The ring's description (`aria-describedby`) is NOT affected — it still\n   * names the true segment breakdown, because that fact doesn't change just\n   * because the centre is showing a different number.\n   */\n  centerValue?: number;\n  value?: never;\n  tone?: never;\n};\n\nexport type ProgressRingProps = ProgressRingValueProps | ProgressRingSegmentsProps;\n\nexport const RING_TONE: Record<string, string> = {\n  accent: \"text-accent\",\n  brand: \"text-brand\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  neutral: \"text-tertiary\",\n  // DX-3014 — see the matching `info` tone on `bar`'s variants above.\n  info: \"text-info\",\n  // DX-3662 — see the matching `muted` tone on `bar`'s variants above.\n  muted: \"text-muted\",\n};\n\n/* ----------------------------------------------------------------------------\n   THE GAP IS A FRACTION OF THE PATH, NOT A NUMBER OF PIXELS.\n\n   Two adjacent arcs of the same tone with nothing between them are one arc, and\n   a breakdown that silently merges two of its own rows is worse than no\n   breakdown. So every arc that has another arc after it gives up a sliver of\n   its tail.\n\n   Written as a fraction because the whole ring is: `pathLength=\"1\"` means the\n   circumference is 1 no matter what `r` is or how large the ring is drawn, so\n   this ONE number is a hairline at `sm` and still a hairline at `lg`, with no\n   size-conditional maths anywhere. A pixel constant would be invisible on the\n   large ring and a wedge on the small one — and it would have to be re-derived\n   for every radius this component is ever given.\n\n   0.004 of the circumference is ~0.25 units of the 24-unit viewBox, which lands\n   under a pixel at every size the `ring` recipe offers. Sub-pixel is the intent:\n   antialiasing renders it as a faint seam, which is all that is needed to keep\n   two arcs apart, and anything thicker starts reading as an arc of its own.\n   ------------------------------------------------------------------------- */\nconst SEGMENT_GAP = 0.004;\n\n/** Floating-point slack for \"the arcs reached exactly all the way round\". */\nconst FULL_EPSILON = 1e-9;\n\n/** One arc, resolved to the two fractions an SVG dash actually needs. */\nexport interface ProgressRingArc {\n  label: string;\n  tone: ProgressTone;\n  /** The segment's custom colour, when it has one (DXUI-30). */\n  color?: string;\n  /** The segment's own magnitude, in caller units, before any clamping. */\n  value: number;\n  /** Where the arc begins, as a fraction of the circumference. */\n  start: number;\n  /** How far it is drawn for, as a fraction, with its gap already taken off. */\n  length: number;\n}\n\nexport interface ProgressRingLayout {\n  arcs: ProgressRingArc[];\n  /** Every segment added up, in caller units. NOT clamped — this is the fact. */\n  used: number;\n  /** How far `used` overshoots `total`. Zero when the segments fit. */\n  overflow: number;\n}\n\n/* ----------------------------------------------------------------------------\n   OVER-SUM: CLAMP, AND SAY SO. NOT NORMALISE.\n\n   Segments that add up to more than `total` are laid out in order until the\n   ring is full; the arc that crosses the boundary is cut short there and any\n   arc after it is not drawn at all.\n\n   NORMALISING — rescaling every arc so they fit exactly — was the other\n   candidate and it is the wrong one, for one reason: it destroys the only thing\n   the denominator was for. An arc is read as \"this much OF THE BUDGET\", and\n   under normalisation an input that really is 90% of the window would be redrawn\n   at 60% because two other things also overran. Clamping keeps every arc up to\n   the boundary telling the truth about `total`, and loses only the tail — which\n   is the part that has no room left to be true in.\n\n   And the overshoot is never silent, in three places at once:\n     - `overflow` here is returned unclamped, in caller units;\n     - the number in the middle of the ring is NOT clamped, so a full ring\n       reading `150` is unmistakable next to a full ring reading `100`;\n     - the root element carries `data-overflow=\"true\"`, and the ring's\n       description ends with how far over it went.\n\n   A ZERO-MAGNITUDE SEGMENT PRODUCES NO ARC AND NO DESCRIPTION ENTRY. Nothing is\n   drawn for it, so nothing is announced for it — a description naming a colour\n   the ring does not contain is the name/content drift this library keeps\n   re-learning. A segment too small to draw but not zero is a different case and\n   is kept: it is announced, because the description is the only place a fact\n   that small can survive.\n   ------------------------------------------------------------------------- */\nexport function layoutRingSegments(\n  segments: ProgressRingSegment[],\n  total: number,\n): ProgressRingLayout {\n  const used = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);\n  const overflow = Math.max(0, used - total);\n  /* DIVIDE PER SEGMENT rather than multiplying by a cached `1 / total`. The\n     reciprocal rounds once and the multiply rounds again, and the second\n     rounding lands in the DOM: 60000 * (1/200000) stringifies as\n     `0.30000000000000004`, so the dash attribute carries seventeen digits of\n     noise where `60000 / 200000` gives a clean `0.3`.\n\n     A total of zero has no circumference to divide up, so every arc is empty\n     rather than Infinity or NaN. */\n  const share = (value: number) => (total > 0 ? Math.max(0, value) / total : 0);\n\n  const placed: ProgressRingArc[] = [];\n  let cursor = 0;\n  for (const segment of segments) {\n    const wanted = share(segment.value);\n    const length = Math.min(wanted, Math.max(0, 1 - cursor));\n    if (length > 0) {\n      placed.push({\n        label: segment.label,\n        tone: segment.tone,\n        color: segment.color,\n        value: segment.value,\n        start: cursor,\n        length,\n      });\n    }\n    cursor += length;\n  }\n\n  /* The gap goes on an arc's TAIL, and only when something is actually there to\n     be told apart from. A lone arc keeps its full length — a nick taken out of\n     a single unbroken ring separates it from nothing. When the arcs reach the\n     whole way round, the last one is followed by the first, so it gets one too. */\n  const wrapsOntoItself = cursor >= 1 - FULL_EPSILON && placed.length > 1;\n  const arcs = placed.map((arc, index) => {\n    const followed = index < placed.length - 1 || wrapsOntoItself;\n    return followed ? { ...arc, length: Math.max(0, arc.length - SEGMENT_GAP) } : arc;\n  });\n\n  return { arcs, used, overflow };\n}\n\n/**\n * `16.9` → `16`, `99.9` → `99`. Percentages of the whole, for the description\n * and the centre. FLOORED, never rounded (DX-4474): a ring that reads 97% must\n * not be described as \"Done 98%\", and only a part covering the whole total may\n * say 100%. Same rule as an app's \"N% complete\" label (505 of 507 is 99%).\n * An empty total is 0%.\n */\nexport const percentOf = (part: number, total: number) =>\n  // `part * 100` before the divide: `29 / 100 * 100` is 28.999999999999996 and\n  // would floor to 28. Exact for whole-number inputs, and a part equal to the\n  // total is exactly 100.\n  total > 0 ? Math.floor((part * 100) / total) : 0;\n\n/**\n * Circular progress, for when the number belongs INSIDE the indicator —\n * a tile, a card corner, a stat.\n *\n * Two shapes, chosen by which prop is passed:\n *\n * ```tsx\n * <ProgressRing value={62} label=\"Context used\" />\n * <ProgressRing\n *   label=\"Context used\"\n *   total={200_000}\n *   segments={[\n *     { label: \"System prompt\", value: 12_000, tone: \"brand\" },\n *     { label: \"Conversation\", value: 84_000, tone: \"accent\" },\n *   ]}\n *   remainderLabel=\"Free\"\n * />\n * ```\n *\n * Uses `pathLength=\"1\"` so the dash numbers are fractions rather than\n * circumference maths: the same two values work at any radius, and it dodges\n * the Safari bug where a zoomed SVG rescales absolute dash lengths.\n *\n * THE ROLE IS `progressbar` IN BOTH SHAPES, and stays that way even though a\n * breakdown of a budget is arguably a gauge. The role is a property of the\n * component a caller reached for, not of the data they handed it — a component\n * that announced itself as a different thing depending on the shape of its\n * props would be two components sharing one name. A caller whose fact is a\n * gauge has `Meter`.\n */\nexport function ProgressRing(props: ProgressRingProps) {\n  return props.segments === undefined ? <ValueRing {...props} /> : <SegmentedRing {...props} />;\n}\n\n/** DX-4099 — a caller's own glyph, centred over the ring. Decorative: the ring's name and description carry the meaning. */\nfunction RingCentre({ children }: { children: ReactNode }) {\n  // DX-4202: the one guard — null/undefined/false draw no centre; a numeric 0 still does.\n  if (children == null || children === false) return null;\n  return (\n    <span className=\"absolute grid place-items-center\" aria-hidden=\"true\" data-ring-centre=\"true\">\n      {children}\n    </span>\n  );\n}\n\n/** DX-4062 — the done mark that replaces the number when `checkWhenFull` and the ring is full. Decorative: the ring's own `aria-valuenow`/label already say it is complete. */\nfunction RingCheck({ size }: { size: VariantProps<typeof ring>[\"size\"] }) {\n  return (\n    <span className=\"absolute grid place-items-center text-success\" data-ring-check=\"true\">\n      {/* The ring sizes and the icon sizes share names, so the check scales with the ring —\n          except `row` (DX-4099), a line-height ring with no icon size of its own: its check is `xs`. */}\n      <Icon name=\"check\" size={size === \"row\" ? \"xs\" : ((size ?? \"md\") satisfies IconSize)} />\n    </span>\n  );\n}\n\n/** A ring's centre value: the number, with the locale's own percent sign at the small type step (DX-3776). */\nfunction PercentReadout({ percent }: { percent: number }) {\n  const locale = useUiLocale();\n  const parts = numberFormat(locale, { style: \"percent\", maximumFractionDigits: 0 }).formatToParts(Math.round(percent) / 100);\n  return (\n    <>\n      {parts.map((part, i) =>\n        part.type === \"percentSign\" ? (\n          <span key={i} className=\"text-2xs font-medium\">\n            {part.value}\n          </span>\n        ) : (\n          part.value\n        ),\n      )}\n    </>\n  );\n}\n\nfunction ValueRing({\n  value,\n  label,\n  size,\n  tone = \"accent\",\n  showValue = true,\n  checkWhenFull = true,\n  children,\n  className,\n}: ProgressRingValueProps) {\n  const { r, stroke } = ringGeometry(size);\n  const indeterminate = value === null;\n  const fraction = indeterminate ? 0.25 : Math.max(0, Math.min(1, value / 100));\n\n  return (\n    <div\n      className={cn(ring({ size }), className)}\n      role=\"progressbar\"\n      aria-valuenow={indeterminate ? undefined : Math.round(value)}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={label}\n    >\n      <svg viewBox=\"0 0 24 24\" className={cn(\"size-full -rotate-90\", indeterminate && \"animate-spin\")}>\n        <circle cx=\"12\" cy=\"12\" r={r} fill=\"none\" strokeWidth={stroke} className=\"stroke-surface-inset\" />\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r={r}\n          fill=\"none\"\n          strokeWidth={stroke}\n          strokeLinecap=\"round\"\n          pathLength=\"1\"\n          strokeDasharray=\"1\"\n          strokeDashoffset={1 - fraction}\n          className={cn(\n            \"transition-[var(--tx-colors),stroke-dashoffset] duration-(--dur-slow) ease-emphasis\",\n            RING_TONE[tone ?? \"accent\"],\n          )}\n          stroke=\"currentColor\"\n        />\n      </svg>\n      <RingCentre>{children}</RingCentre>\n      {!indeterminate && showValue && checkWhenFull && value >= 100 && <RingCheck size={size} />}\n      {!indeterminate && showValue && !(checkWhenFull && value >= 100) && (\n        <span className=\"absolute flex items-baseline font-mono text-xs font-semibold tabular-nums text-primary\">\n          {/* DX-3776 — the percent sign reads at the library's own smallest type-scale\n              step (`text-2xs`, `tokens.css`), the bottom of the scale and the\n              closest available to \"noticeably smaller than the digit\"; a\n              magic px value would drift out of step with `--ui-scale` and the\n              fluid clamp() every other size in the scale gets for free. */}\n          <PercentReadout percent={value} />\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction SegmentedRing({\n  segments,\n  total,\n  label,\n  size,\n  remainderLabel,\n  showValue = true,\n  centerValue,\n  checkWhenFull = true,\n  children,\n  className,\n}: ProgressRingSegmentsProps) {\n  const strings = useUiStrings().progress;\n  const locale = useUiLocale();\n  const { r, stroke } = ringGeometry(size);\n  const { arcs, used, overflow } = layoutRingSegments(segments, total);\n  /* DX-3766 — `centerValue`, when given, replaces the computed \"drawn ÷\n     total\" fact with the caller's own number, for BOTH the visible digit and\n     `aria-valuenow`; see the prop's own doc comment above for why the\n     computed percent can be structurally wrong (drawn === total). The\n     computed percent is still used for the description below — that stays\n     the real segment breakdown regardless of what the centre shows. */\n  const computedPercent = percentOf(used, total);\n  const percent = centerValue ?? computedPercent;\n  const remaining = total - used;\n\n  /* THE DESCRIPTION IS THE BREAKDOWN, because `aria-valuenow` cannot be one.\n     A segmented ring announced by its total alone says \"72\" and throws away the\n     entire reason it is segmented — the four arcs a sighted reader can see and\n     count. `aria-valuetext` was the other option and REPLACES the value rather\n     than adding to it; a description is additive, so the number and the parts\n     are both announced.\n\n     IT IS BUILT FROM THE SEGMENTS AS GIVEN, NOT FROM THE ARCS THAT SURVIVED\n     CLAMPING, and each one reports its OWN magnitude against `total`. Building\n     it from the arcs was the first shape and it fails exactly where it is most\n     needed: on an over-sum ring the segments past the boundary have no arc, so\n     the description said \"Input 100% — over the total by 50%\" and never named\n     what the other 50% was. The reader who most needs the breakdown got the\n     shortest one.\n\n     A zero-magnitude segment is still dropped. Nothing is drawn for it and\n     there is nothing to say about it — see the note above the layout. */\n  const parts = segments\n    .filter((segment) => segment.value > 0)\n    .map((segment) => `${segment.label} ${formatPercent(percentOf(segment.value, total), locale)}`);\n  if (remaining > 0) parts.push(`${remainderLabel ?? strings.remaining} ${formatPercent(percentOf(remaining, total), locale)}`);\n  const breakdown = listFormat(locale, { type: \"conjunction\", style: \"narrow\" }).format(parts);\n  const description =\n    overflow > 0\n      ? strings.overTotal(breakdown, formatPercent(percentOf(overflow, total), locale))\n      : breakdown;\n  const descriptionId = `dx-ring-${useId()}`;\n\n  return (\n    <div\n      className={cn(ring({ size }), className)}\n      role=\"progressbar\"\n      aria-valuenow={Math.max(0, Math.min(100, Math.round(percent)))}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-label={label}\n      aria-describedby={descriptionId}\n      /* Present ONLY when the segments overran, so a consumer can style or\n         assert on the condition without recomputing the sum. */\n      data-overflow={overflow > 0 ? \"true\" : undefined}\n    >\n      <svg viewBox=\"0 0 24 24\" className=\"size-full -rotate-90\">\n        {/* The remainder needs no arc of its own — this IS the remainder,\n            wherever the segments have not covered it. */}\n        <circle cx=\"12\" cy=\"12\" r={r} fill=\"none\" strokeWidth={stroke} className=\"stroke-surface-inset\" />\n        {arcs.map((arc, index) => (\n          <circle\n            /* Two arcs may legitimately share a label and a tone, so the index\n               is part of the identity — nothing here reorders. */\n            key={`${arc.label}-${index}`}\n            cx=\"12\"\n            cy=\"12\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            /* BUTT, not round, and this is not a style choice. A round cap adds\n               half a stroke width at BOTH ends of every arc — so the gaps close\n               up, the arcs overlap their neighbours, and a zero-length dash\n               (a segment too small to draw) renders as a dot on a ring it has\n               no business being on. */\n            strokeLinecap=\"butt\"\n            pathLength=\"1\"\n            /* `<drawn> 1`: one dash of the arc's length followed by a gap long\n               enough that the pattern never repeats within the circle. The\n               offset is NEGATIVE — a dash pattern starts `-offset` along the\n               path, so `-start` puts this arc's dash exactly where it belongs. */\n            strokeDasharray={`${arc.length} 1`}\n            strokeDashoffset={-arc.start}\n            className={cn(\n              \"transition-[var(--tx-colors),stroke-dasharray,stroke-dashoffset] duration-(--dur-slow) ease-emphasis\",\n              arc.color === undefined && RING_TONE[arc.tone],\n            )}\n            style={arc.color === undefined ? undefined : { color: arc.color }}\n            stroke=\"currentColor\"\n          />\n        ))}\n      </svg>\n      <RingCentre>{children}</RingCentre>\n      {showValue && checkWhenFull && percent >= 100 && <RingCheck size={size} />}\n      {showValue && !(checkWhenFull && percent >= 100) && (\n        /* NOT clamped (rounded only). A ring that is full and a ring that is\n           half as full again are the same picture, and this number is the\n           difference — true of an over-sum `total`/`segments` pair and\n           equally true of a `centerValue` the caller hands in past 100. */\n        <span className=\"absolute flex items-baseline font-mono text-xs font-semibold tabular-nums text-primary\">\n          {/* DX-3776 — see the matching comment on `ValueRing` above; same\n              token, same reasoning, kept in step across both ring shapes. */}\n          <PercentReadout percent={percent} />\n        </span>\n      )}\n      <span id={descriptionId} className=\"sr-only\">\n        {description}\n      </span>\n    </div>\n  );\n}\n"],"names":["bar","tv","Progress","value","label","formatProp","showValue","size","tone","className","ref","s","indeterminate","locale","useUiLocale","format","formatPercent","jsxs","BaseProgress","cn","jsx","Meter","min","max","v","marker","markerLabel","overflowTone","emptyTrack","markerDescId","useId","hasMarker","emptyDashed","extent","BaseMeter","MeterParts","fraction","x","over","baseWidth","overWidth","ring","RING_GEOMETRY","ringGeometry","RING_TONE","SEGMENT_GAP","FULL_EPSILON","layoutRingSegments","segments","total","used","sum","segment","overflow","share","placed","cursor","wanted","length","wrapsOntoItself","arc","index","percentOf","part","ProgressRing","props","ValueRing","SegmentedRing","RingCentre","children","RingCheck","Icon","PercentReadout","percent","parts","numberFormat","i","checkWhenFull","r","stroke","remainderLabel","centerValue","strings","useUiStrings","arcs","computedPercent","remaining","breakdown","listFormat","description","descriptionId"],"mappings":"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"}

package/dist/components/RatingScale.js

@@ -0,0 +1,89 @@
+import { jsx as r, jsxs as T } from "react/jsx-runtime";
+import { useRef as U } from "react";
+import { cn as u } from "../lib/cn.js";
+import { Icon as y } from "./Icon.js";
+import { Button as b } from "./Button.js";
+import { Tooltip as D } from "./Popover.js";
+import { useUiStrings as I } from "../lib/i18n/provider.js";
+const k = ["angry", "frown", "meh", "smile", "laugh"], w = {
+  1: "text-danger-text",
+  2: "text-orange-text",
+  3: "text-warning-text",
+  4: "text-success-text",
+  5: "text-success-text"
+}, s = [1, 2, 3, 4, 5], f = s[0], h = s[s.length - 1];
+function A() {
+  const e = I().ratingScale;
+  return [e.veryUnhappy, e.unhappy, e.neutral, e.happy, e.veryHappy];
+}
+function K({
+  value: e,
+  onChange: o,
+  label: a,
+  hideLabel: c = !1,
+  optionLabels: l,
+  clearable: S = !1,
+  size: p = "md",
+  disabled: m = !1,
+  className: N
+}) {
+  const R = A(), d = l ?? R, x = U(null), g = e ?? f, F = (t) => {
+    if (!m) {
+      if (t === e) {
+        S && o(null);
+        return;
+      }
+      o(t);
+    }
+  }, E = (t) => {
+    const n = g, i = t.key === "ArrowRight" || t.key === "ArrowDown" ? Math.min(h, n + 1) : t.key === "ArrowLeft" || t.key === "ArrowUp" ? Math.max(f, n - 1) : t.key === "Home" ? f : t.key === "End" ? h : void 0;
+    i !== void 0 && (t.preventDefault(), i !== e && o(i), requestAnimationFrame(() => {
+      x.current?.querySelector(`[data-rating="${i}"]`)?.focus();
+    }));
+  };
+  return /* @__PURE__ */ T("div", { className: u("inline-flex flex-col gap-1.5", N), children: [
+    c ? null : /* @__PURE__ */ r("span", { className: "text-xs font-medium text-secondary", children: a }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: x,
+        role: "radiogroup",
+        "aria-label": a,
+        "aria-disabled": m || void 0,
+        className: "inline-flex items-center gap-1",
+        children: s.map((t) => {
+          const n = t === e;
+          return /* @__PURE__ */ r(D, { content: d[t - 1], children: /* @__PURE__ */ r(
+            b,
+            {
+              role: "radio",
+              "aria-checked": n,
+              "aria-label": d[t - 1],
+              "data-rating": t,
+              tabIndex: t === g ? 0 : -1,
+              variant: n ? "subtle" : "ghost",
+              size: p,
+              iconOnly: !0,
+              disabled: m,
+              className: u("dx-tap shrink-0", n ? w[t] : "text-muted"),
+              onClick: () => {
+                F(t);
+              },
+              onKeyDown: E,
+              children: /* @__PURE__ */ r(y, { name: k[t - 1], size: p })
+            }
+          ) }, t);
+        })
+      }
+    )
+  ] });
+}
+function V({ value: e, size: o = "md", label: a, className: c }) {
+  const l = A();
+  return /* @__PURE__ */ r("span", { role: "img", "aria-label": a ?? l[e - 1], className: u("inline-flex", w[e], c), children: /* @__PURE__ */ r(y, { name: k[e - 1], size: o }) });
+}
+export {
+  V as RatingFace,
+  K as RatingScale
+};
+//# sourceMappingURL=RatingScale.js.map

package/dist/components/RatingScale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingScale.js","sources":["../../src/components/RatingScale.tsx"],"sourcesContent":["import { useRef, type KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\nimport { Button } from \"./Button\";\nimport { Tooltip } from \"./Popover\";\n\n/* ============================================================================\n   RATING SCALE — a five-face mood scale, very unhappy to very happy (DX-5235).\n\n   WHY FACES AND NOT A NUMBER OR STARS: the question it answers is \"how is this\n   going for you right now\", a feeling and not a quality grade. Five faces\n   read at a glance in any language, and the faces' own names (\"Very unhappy\"\n   .. \"Very happy\") are the accessible names, so a screen reader hears the\n   feeling and never a bare \"3\".\n\n   IT IS A RADIO GROUP UNDERNEATH (`radiogroup` + five `radio`s), the same\n   roving contract as `TriStateSwitch`: one tab stop (the selected face, or the\n   first when nothing is chosen), arrows move AND select, Home/End jump to the\n   ends, Space/Enter select. When `clearable`, pressing the selected face again\n   clears it back to `null`; arrows then cannot \"clear\", so clearing is a press\n   only.\n\n   COLOUR: the selected face takes a tone from red (1) through orange and amber\n   to green (4, 5) off the theme's status tokens; every other face stays muted,\n   so the answer is the only coloured thing in the row. `RatingFace` is the\n   read-only form of one face for tables and lists.\n   ========================================================================= */\n\nexport type RatingValue = 1 | 2 | 3 | 4 | 5;\n\nconst FACES = [\"angry\", \"frown\", \"meh\", \"smile\", \"laugh\"] as const;\n\n/* Selected-face colour per value. Literal class names so Tailwind sees them. */\nconst TONE: Record<RatingValue, string> = {\n  1: \"text-danger-text\",\n  2: \"text-orange-text\",\n  3: \"text-warning-text\",\n  4: \"text-success-text\",\n  5: \"text-success-text\",\n};\n\nconst VALUES: readonly RatingValue[] = [1, 2, 3, 4, 5];\nconst FIRST = VALUES[0]!;\nconst LAST = VALUES[VALUES.length - 1]!;\n\n/** The five catalog names, very unhappy to very happy. */\nfunction useFaceNames(): readonly [string, string, string, string, string] {\n  const words = useUiStrings().ratingScale;\n  return [words.veryUnhappy, words.unhappy, words.neutral, words.happy, words.veryHappy];\n}\n\nexport type RatingScaleSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface RatingScaleProps {\n  /** The chosen face, 1 (very unhappy) to 5 (very happy), or `null` for no answer. */\n  value: RatingValue | null;\n  onChange: (value: RatingValue | null) => void;\n  /** The question: the group's accessible name, drawn above the faces unless `hideLabel`. */\n  label: string;\n  /** Keep `label` as the accessible name only. @default false */\n  hideLabel?: boolean;\n  /** Names and tooltips for the five faces, in order. @default the catalog's \"Very unhappy\" .. \"Very happy\" */\n  optionLabels?: readonly [string, string, string, string, string];\n  /** Pressing the selected face again clears it (`onChange(null)`). @default false */\n  clearable?: boolean;\n  /** @default \"md\" */\n  size?: RatingScaleSize;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function RatingScale({\n  value,\n  onChange,\n  label,\n  hideLabel = false,\n  optionLabels,\n  clearable = false,\n  size = \"md\",\n  disabled = false,\n  className,\n}: RatingScaleProps) {\n  const catalog = useFaceNames();\n  const names = optionLabels ?? catalog;\n  const groupRef = useRef<HTMLDivElement | null>(null);\n  // The tab stop is the chosen face, or the first when nothing is chosen.\n  const stop = value ?? FIRST;\n\n  const choose = (next: RatingValue) => {\n    if (disabled) return;\n    if (next === value) {\n      if (clearable) onChange(null);\n      return;\n    }\n    onChange(next);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const current = stop;\n    const target =\n      event.key === \"ArrowRight\" || event.key === \"ArrowDown\"\n        ? Math.min(LAST, current + 1)\n        : event.key === \"ArrowLeft\" || event.key === \"ArrowUp\"\n          ? Math.max(FIRST, current - 1)\n          : event.key === \"Home\"\n            ? FIRST\n            : event.key === \"End\"\n              ? LAST\n              : undefined;\n    if (target === undefined) return;\n    event.preventDefault();\n    if (target !== value) onChange(target as RatingValue);\n    // Focus follows the selection, as in every roving radio group.\n    requestAnimationFrame(() => {\n      groupRef.current?.querySelector<HTMLButtonElement>(`[data-rating=\"${target}\"]`)?.focus();\n    });\n  };\n\n  return (\n    <div className={cn(\"inline-flex flex-col gap-1.5\", className)}>\n      {hideLabel ? null : <span className=\"text-xs font-medium text-secondary\">{label}</span>}\n      <div\n        ref={groupRef}\n        role=\"radiogroup\"\n        aria-label={label}\n        aria-disabled={disabled || undefined}\n        className=\"inline-flex items-center gap-1\"\n      >\n        {VALUES.map((n) => {\n          const selected = n === value;\n          return (\n            <Tooltip key={n} content={names[n - 1]!}>\n              <Button\n                role=\"radio\"\n                aria-checked={selected}\n                aria-label={names[n - 1]!}\n                data-rating={n}\n                tabIndex={n === stop ? 0 : -1}\n                variant={selected ? \"subtle\" : \"ghost\"}\n                size={size}\n                iconOnly\n                disabled={disabled}\n                className={cn(\"dx-tap shrink-0\", selected ? TONE[n] : \"text-muted\")}\n                onClick={() => {\n                  choose(n);\n                }}\n                onKeyDown={onKeyDown}\n              >\n                <Icon name={FACES[n - 1]!} size={size} />\n              </Button>\n            </Tooltip>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport interface RatingFaceProps {\n  value: RatingValue;\n  /** @default \"md\" */\n  size?: RatingScaleSize;\n  /** Overrides the face's name (the catalog's, e.g. \"Happy\"). */\n  label?: string;\n  className?: string;\n}\n\n/** The read-only form of one face, tone-coloured, for a table cell or a list row. */\nexport function RatingFace({ value, size = \"md\", label, className }: RatingFaceProps) {\n  const names = useFaceNames();\n  return (\n    <span role=\"img\" aria-label={label ?? names[value - 1]!} className={cn(\"inline-flex\", TONE[value], className)}>\n      <Icon name={FACES[value - 1]!} size={size} />\n    </span>\n  );\n}\n"],"names":["FACES","TONE","VALUES","FIRST","LAST","useFaceNames","words","useUiStrings","RatingScale","value","onChange","label","hideLabel","optionLabels","clearable","size","disabled","className","catalog","names","groupRef","useRef","stop","choose","next","onKeyDown","event","current","target","cn","jsx","n","selected","Tooltip","Button","Icon","RatingFace"],"mappings":";;;;;;;AA+BA,MAAMA,IAAQ,CAAC,SAAS,SAAS,OAAO,SAAS,OAAO,GAGlDC,IAAoC;AAAA,EACxC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL,GAEMC,IAAiC,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,GAC/CC,IAAQD,EAAO,CAAC,GAChBE,IAAOF,EAAOA,EAAO,SAAS,CAAC;AAGrC,SAASG,IAAkE;AACzE,QAAMC,IAAQC,IAAe;AAC7B,SAAO,CAACD,EAAM,aAAaA,EAAM,SAASA,EAAM,SAASA,EAAM,OAAOA,EAAM,SAAS;AACvF;AAsBO,SAASE,EAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC;AACF,GAAqB;AACnB,QAAMC,IAAUb,EAAA,GACVc,IAAQN,KAAgBK,GACxBE,IAAWC,EAA8B,IAAI,GAE7CC,IAAOb,KAASN,GAEhBoB,IAAS,CAACC,MAAsB;AACpC,QAAI,CAAAR,GACJ;AAAA,UAAIQ,MAASf,GAAO;AAClB,QAAIK,OAAoB,IAAI;AAC5B;AAAA,MACF;AACA,MAAAJ,EAASc,CAAI;AAAA;AAAA,EACf,GAEMC,IAAY,CAACC,MAA4C;AAC7D,UAAMC,IAAUL,GACVM,IACJF,EAAM,QAAQ,gBAAgBA,EAAM,QAAQ,cACxC,KAAK,IAAItB,GAAMuB,IAAU,CAAC,IAC1BD,EAAM,QAAQ,eAAeA,EAAM,QAAQ,YACzC,KAAK,IAAIvB,GAAOwB,IAAU,CAAC,IAC3BD,EAAM,QAAQ,SACZvB,IACAuB,EAAM,QAAQ,QACZtB,IACA;AACZ,IAAIwB,MAAW,WACfF,EAAM,eAAA,GACFE,MAAWnB,KAAOC,EAASkB,CAAqB,GAEpD,sBAAsB,MAAM;AAC1B,MAAAR,EAAS,SAAS,cAAiC,iBAAiBQ,CAAM,IAAI,GAAG,MAAA;AAAA,IACnF,CAAC;AAAA,EACH;AAEA,2BACG,OAAA,EAAI,WAAWC,EAAG,gCAAgCZ,CAAS,GACzD,UAAA;AAAA,IAAAL,IAAY,OAAO,gBAAAkB,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAAnB,GAAM;AAAA,IAChF,gBAAAmB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKV;AAAA,QACL,MAAK;AAAA,QACL,cAAYT;AAAA,QACZ,iBAAeK,KAAY;AAAA,QAC3B,WAAU;AAAA,QAET,UAAAd,EAAO,IAAI,CAAC6B,MAAM;AACjB,gBAAMC,IAAWD,MAAMtB;AACvB,mCACGwB,GAAA,EAAgB,SAASd,EAAMY,IAAI,CAAC,GACnC,UAAA,gBAAAD;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAcF;AAAA,cACd,cAAYb,EAAMY,IAAI,CAAC;AAAA,cACvB,eAAaA;AAAA,cACb,UAAUA,MAAMT,IAAO,IAAI;AAAA,cAC3B,SAASU,IAAW,WAAW;AAAA,cAC/B,MAAAjB;AAAA,cACA,UAAQ;AAAA,cACR,UAAAC;AAAA,cACA,WAAWa,EAAG,mBAAmBG,IAAW/B,EAAK8B,CAAC,IAAI,YAAY;AAAA,cAClE,SAAS,MAAM;AACb,gBAAAR,EAAOQ,CAAC;AAAA,cACV;AAAA,cACA,WAAAN;AAAA,cAEA,4BAACU,GAAA,EAAK,MAAMnC,EAAM+B,IAAI,CAAC,GAAI,MAAAhB,EAAA,CAAY;AAAA,YAAA;AAAA,UAAA,KAjB7BgB,CAmBd;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;AAYO,SAASK,EAAW,EAAE,OAAA3B,GAAO,MAAAM,IAAO,MAAM,OAAAJ,GAAO,WAAAM,KAA8B;AACpF,QAAME,IAAQd,EAAA;AACd,SACE,gBAAAyB,EAAC,QAAA,EAAK,MAAK,OAAM,cAAYnB,KAASQ,EAAMV,IAAQ,CAAC,GAAI,WAAWoB,EAAG,eAAe5B,EAAKQ,CAAK,GAAGQ,CAAS,GAC1G,UAAA,gBAAAa,EAACK,GAAA,EAAK,MAAMnC,EAAMS,IAAQ,CAAC,GAAI,MAAAM,EAAA,CAAY,EAAA,CAC7C;AAEJ;"}