@actioneer/ads 0.5.4 → 0.5.6

package/components/chart.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs as N, jsx as e, Fragment as V } from "react/jsx-runtime";
-import * as C from "react";
-import { ResponsiveContainer as j, LineChart as ve, Tooltip as S, Line as ie, AreaChart as be, Area as ge, CartesianGrid as X, XAxis as Z, YAxis as E, BarChart as pe, Bar as le, Cell as oe, ComposedChart as Ne, ScatterChart as we, Scatter as Ae, PieChart as ye, Pie as ke, RadarChart as Ce, PolarGrid as Re, PolarAngleAxis as se, PolarRadiusAxis as Me, Radar as $e, RadialBarChart as Le, RadialBar as Fe, Treemap as Se, ReferenceArea as Oe, ReferenceLine as Te, ReferenceDot as Ie } from "recharts";
+import * as k from "react";
+import { ResponsiveContainer as j, LineChart as ve, Tooltip as S, Line as ie, AreaChart as be, Area as ge, CartesianGrid as X, XAxis as Z, YAxis as E, BarChart as pe, Bar as le, Cell as oe, ComposedChart as Ne, ScatterChart as we, Scatter as Ae, PieChart as ye, Pie as Ce, RadarChart as ke, PolarGrid as Re, PolarAngleAxis as se, PolarRadiusAxis as Me, Radar as $e, RadialBarChart as Le, RadialBar as Fe, Treemap as Se, ReferenceArea as Oe, ReferenceLine as Te, ReferenceDot as Ie } from "recharts";
 import { MotionConfig as Be, AnimatePresence as De, motion as We } from "motion/react";
 import { cn as $ } from "../lib/cn.js";
 import { floatVariants as je } from "../lib/motion.js";
-const _ = (t) => `var(--color-chart-${t % 6 + 1})`, Y = (t) => _(t), Q = "var(--color-ink-300)", D = {
+const _ = (t) => `var(--color-chart-${t % 6 + 1})`, Y = (t) => _(t), Q = "var(--chart-context)", D = {
   primary: { ref: "var(--brand)", pill: "bg-fill text-fill-foreground" },
   success: { ref: "var(--color-success-600)", pill: "bg-success-50 text-success-700" },
   warning: { ref: "var(--color-warning-500)", pill: "bg-warning-50 text-warning-700" },
@@ -111,17 +111,17 @@ function O({
   if (!c.active || !s.length) return null;
   const f = s.length === 1, d = c.label ?? (f ? s[0].name : void 0);
   return /* @__PURE__ */ N("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background", children: [
-    /* @__PURE__ */ e("div", { className: $("text-xs font-medium tracking-wide uppercase text-background/60", !f && "mb-1"), children: d }),
+    /* @__PURE__ */ e("div", { className: $("text-xs font-normal tracking-wide uppercase text-background/60", !f && "mb-1"), children: d }),
     s.map((m) => /* @__PURE__ */ N("div", { className: "flex items-center gap-1.5", children: [
       !f && /* @__PURE__ */ N(V, { children: [
         /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-1.5 rounded-dot", style: { background: m.color } }),
         /* @__PURE__ */ e("span", { className: "text-background/70", children: m.name })
       ] }),
-      /* @__PURE__ */ e("span", { className: "ml-auto pl-3 font-medium tabular-nums", children: typeof m.value == "number" ? l(m.value) : String(m.value ?? "") })
+      /* @__PURE__ */ e("span", { className: "ml-auto pl-3 font-normal tabular-nums", children: typeof m.value == "number" ? l(m.value) : String(m.value ?? "") })
     ] }, m.key))
   ] });
 }
-const ue = "pointer-events-none inline-flex min-h-4 items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap";
+const ue = "pointer-events-none inline-flex min-h-4 items-center rounded-full px-2 py-0.5 text-xs font-normal whitespace-nowrap";
 function Pe({
   viewBox: t,
   label: r,
@@ -147,7 +147,7 @@ function _e({
   onEnter: o,
   onLeave: a
 }) {
-  const [s, u] = C.useState(!1);
+  const [s, u] = k.useState(!1);
   if (t == null || r == null || !Number.isFinite(t) || !Number.isFinite(r)) return /* @__PURE__ */ e("g", {});
   const c = () => o({ ann: l, n, cx: t, cy: r }), f = () => a();
   return /* @__PURE__ */ N(
@@ -176,7 +176,7 @@ function _e({
             y: r,
             dy: "0.35em",
             textAnchor: "middle",
-            className: "pointer-events-none fill-brand-foreground text-xs font-bold select-none",
+            className: "pointer-events-none fill-brand-foreground text-xs font-semibold select-none",
             children: n
           }
         )
@@ -207,15 +207,15 @@ function Ge({ hovered: t, frameWidth: r, format: n }) {
                 "span",
                 {
                   "aria-hidden": !0,
-                  className: "flex size-4.5 shrink-0 items-center justify-center rounded-full text-xs font-bold text-brand-foreground",
+                  className: "flex size-4.5 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-brand-foreground",
                   style: { background: D[t.ann.color ?? "primary"].ref },
                   children: t.n
                 }
               ),
-              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-foreground", children: t.ann.label })
+              /* @__PURE__ */ e("span", { className: "text-xs font-normal text-foreground", children: t.ann.label })
             ] }),
             t.ann.description && /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs leading-relaxed text-secondary", children: t.ann.description }),
-            /* @__PURE__ */ N("div", { className: "mt-1.5 text-xs font-medium tracking-wide uppercase text-tertiary tabular-nums", children: [
+            /* @__PURE__ */ N("div", { className: "mt-1.5 text-xs font-normal tracking-wide uppercase text-tertiary tabular-nums", children: [
               t.ann.x,
               " · ",
               n(t.ann.y)
@@ -227,7 +227,7 @@ function Ge({ hovered: t, frameWidth: r, format: n }) {
   ) }) });
 }
 function me(t, r) {
-  const [n, l] = C.useState(null), o = C.useCallback(() => l(null), []), { back: a, front: s } = C.useMemo(() => {
+  const [n, l] = k.useState(null), o = k.useCallback(() => l(null), []), { back: a, front: s } = k.useMemo(() => {
     const u = [], c = [];
     let f = 0;
     return (t ?? []).forEach((d, x) => {
@@ -307,10 +307,10 @@ function G({
     o.label
   ] }, o.label)) });
 }
-const W = C.forwardRef(
+const W = k.forwardRef(
   ({ className: t, height: r, legendItems: n, hovered: l, format: o, children: a, ...s }, u) => {
     var d;
-    const c = C.useRef(null);
+    const c = k.useRef(null);
     return /* @__PURE__ */ N("div", { ref: (x) => {
       c.current = x, typeof u == "function" ? u(x) : u && (u.current = x);
     }, className: $("relative w-full font-sans", t), ...s, children: [
@@ -339,10 +339,10 @@ function H(t) {
     xTickFormatter: b,
     yTickFormatter: w,
     yAxisWidth: A = 44
-  } = t, p = C.useMemo(() => l ?? ce(r, n), [l, r, n]), i = d ?? F, h = w ?? ((M) => typeof M == "number" ? i(M) : M), y = me(s, i), k = (M, B) => a && p.includes(a) ? M === a ? "var(--color-chart-1)" : Q : _(B), R = (M) => (o == null ? void 0 : o[M]) ?? M, g = c ?? p.length > 1 ? p.map((M, B) => ({ label: R(M), color: k(M, B) })) : null;
+  } = t, p = k.useMemo(() => l ?? ce(r, n), [l, r, n]), i = d ?? F, h = w ?? ((M) => typeof M == "number" ? i(M) : M), y = me(s, i), C = (M, B) => a && p.includes(a) ? M === a ? "var(--color-chart-1)" : Q : _(B), R = (M) => (o == null ? void 0 : o[M]) ?? M, g = c ?? p.length > 1 ? p.map((M, B) => ({ label: R(M), color: C(M, B) })) : null;
   return { names: p, format: i, layers: y, legendItems: g, furniture: [
     /* Gridlines one step below the border token — guides, not content. */
-    u ? /* @__PURE__ */ e(X, { vertical: !1, stroke: "var(--color-ink-50)" }, "grid") : null,
+    u ? /* @__PURE__ */ e(X, { vertical: !1, stroke: "var(--chart-grid)" }, "grid") : null,
     /* @__PURE__ */ e(
       Z,
       {
@@ -351,7 +351,7 @@ function H(t) {
         scale: x === "time" ? "time" : "auto",
         domain: x === "time" ? v ?? ["dataMin", "dataMax"] : v,
         allowDataOverflow: !!v,
-        axisLine: { stroke: "var(--color-ink-200)" },
+        axisLine: { stroke: "var(--chart-axis)" },
         tickLine: !1,
         minTickGap: 28,
         tickMargin: 24,
@@ -367,14 +367,14 @@ function H(t) {
         width: A,
         domain: m,
         allowDataOverflow: !!m,
-        axisLine: { stroke: "var(--color-ink-200)" },
+        axisLine: { stroke: "var(--chart-axis)" },
         tickLine: !1,
         tickMargin: 12,
         tick: /* @__PURE__ */ e(I, { anchor: "end", dy: "0.32em", format: h })
       },
       "y"
     ) : null
-  ], colorFor: k, labelFor: R };
+  ], colorFor: C, labelFor: R };
 }
 const T = 300, z = { top: 24, right: 12, bottom: 8, left: 0 };
 function J(t, r, n, l) {
@@ -387,7 +387,7 @@ function J(t, r, n, l) {
   return t.filter((a) => !(r != null && r.includes(a))).length === 1 ? new Set(t) : /* @__PURE__ */ new Set();
 }
 function fe(t, r, n) {
-  return C.useCallback(
+  return k.useCallback(
     (l, o) => {
       if (!(r != null && r.includes(l))) return n(l, o);
       const a = t.filter((u) => !r.includes(u)), s = a[r.indexOf(l)] ?? a[0];
@@ -396,14 +396,14 @@ function fe(t, r, n) {
     [t, r, n]
   );
 }
-const He = C.forwardRef(
+const He = k.forwardRef(
   // Straight segments by default: the house line is a solid stroke with a DOT
   // at every observation — the data points are visible, the path connects them
   // without inventing values between them.
   // A smooth curve invents values between observations; opt back in with
   // `curve="natural"` when the interpolation is the point.
   ({ height: t = T, curve: r = "linear", forecastKeys: n, showValues: l, className: o, ...a }, s) => {
-    const { names: u, format: c, layers: f, legendItems: d, furniture: x, colorFor: v, labelFor: m } = H(a), b = fe(u, n, v), w = J(u, n, a.highlight, l), [A, p] = C.useState(null);
+    const { names: u, format: c, layers: f, legendItems: d, furniture: x, colorFor: v, labelFor: m } = H(a), b = fe(u, n, v), w = J(u, n, a.highlight, l), [A, p] = k.useState(null);
     return /* @__PURE__ */ e(W, { ref: s, className: o, height: t, legendItems: d, hovered: f.hovered, format: c, children: /* @__PURE__ */ N(
       ve,
       {
@@ -451,9 +451,9 @@ const He = C.forwardRef(
   }
 );
 He.displayName = "LineChart";
-const Ue = C.forwardRef(
+const Ue = k.forwardRef(
   ({ height: t = T, curve: r = "linear", stacked: n = !1, forecastKeys: l, showValues: o, className: a, ...s }, u) => {
-    const { names: c, format: f, layers: d, legendItems: x, furniture: v, colorFor: m, labelFor: b } = H(s), w = fe(c, l, m), A = n ? /* @__PURE__ */ new Set() : J(c, l, s.highlight, o), [p, i] = C.useState(null), h = C.useId().replace(/[^a-zA-Z0-9]/g, "");
+    const { names: c, format: f, layers: d, legendItems: x, furniture: v, colorFor: m, labelFor: b } = H(s), w = fe(c, l, m), A = n ? /* @__PURE__ */ new Set() : J(c, l, s.highlight, o), [p, i] = k.useState(null), h = k.useId().replace(/[^a-zA-Z0-9]/g, "");
     return /* @__PURE__ */ e(W, { ref: u, className: a, height: t, legendItems: x, hovered: d.hovered, format: f, children: /* @__PURE__ */ N(
       be,
       {
@@ -462,9 +462,9 @@ const Ue = C.forwardRef(
         onMouseMove: (y) => i((y == null ? void 0 : y.activeTooltipIndex) ?? null),
         onMouseLeave: () => i(null),
         children: [
-          /* @__PURE__ */ e("defs", { children: c.map((y, k) => /* @__PURE__ */ N("linearGradient", { id: `${h}-${k}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: m(y, k), stopOpacity: 0.18 }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: m(y, k), stopOpacity: 0.02 })
+          /* @__PURE__ */ e("defs", { children: c.map((y, C) => /* @__PURE__ */ N("linearGradient", { id: `${h}-${C}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: m(y, C), stopOpacity: 0.18 }),
+            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: m(y, C), stopOpacity: 0.02 })
           ] }, y)) }),
           v,
           s.tooltip !== !1 && /* @__PURE__ */ e(
@@ -482,19 +482,19 @@ const Ue = C.forwardRef(
             }
           ),
           d.back,
-          c.map((y, k) => /* @__PURE__ */ e(
+          c.map((y, C) => /* @__PURE__ */ e(
             ge,
             {
               dataKey: y,
               name: b(y),
               type: r,
               stackId: n ? "stack" : void 0,
-              stroke: w(y, k),
+              stroke: w(y, C),
               strokeWidth: 1.5,
               strokeDasharray: l != null && l.includes(y) ? "6 4" : void 0,
-              fill: `url(#${h}-${k})`,
-              dot: { r: 3, fill: m(y, k), strokeWidth: 0 },
-              activeDot: /* @__PURE__ */ e(q, { fill: w(y, k) }),
+              fill: `url(#${h}-${C})`,
+              dot: { r: 3, fill: m(y, C), strokeWidth: 0 },
+              activeDot: /* @__PURE__ */ e(q, { fill: w(y, C) }),
               label: A.has(y) ? /* @__PURE__ */ e(de, { format: f, hidden: p != null }) : void 0,
               isAnimationActive: !1
             },
@@ -507,7 +507,7 @@ const Ue = C.forwardRef(
   }
 );
 Ue.displayName = "AreaChart";
-const Ve = C.forwardRef(
+const Ve = k.forwardRef(
   ({
     height: t = T,
     stacked: r = !1,
@@ -522,7 +522,7 @@ const Ve = C.forwardRef(
         {
           horizontal: !1,
           vertical: !0,
-          stroke: "var(--color-ink-50)"
+          stroke: "var(--chart-grid)"
         },
         "grid"
       ) : null,
@@ -586,7 +586,7 @@ const Ve = C.forwardRef(
           ),
           f.back,
           u.map((h, y) => {
-            const k = r ? y === u.length - 1 : !0, R = b ? [0, 4, 4, 0] : [4, 4, 0, 0];
+            const C = r ? y === u.length - 1 : !0, R = b ? [0, 4, 4, 0] : [4, 4, 0, 0];
             return /* @__PURE__ */ e(
               le,
               {
@@ -594,7 +594,7 @@ const Ve = C.forwardRef(
                 name: m(h),
                 stackId: r ? "stack" : void 0,
                 fill: v(h, y),
-                radius: k ? R : 0,
+                radius: C ? R : 0,
                 maxBarSize: 48,
                 label: w.has(h) ? /* @__PURE__ */ e(ze, { format: c, horizontal: b }) : void 0,
                 isAnimationActive: !1,
@@ -616,9 +616,9 @@ const Ve = C.forwardRef(
   }
 );
 Ve.displayName = "BarChart";
-const he = C.forwardRef(
+const he = k.forwardRef(
   ({ height: t = T, lineKeys: r, dualAxis: n = !1, stacked: l = !1, forecastKeys: o, className: a, ...s }, u) => {
-    const { names: c, format: f, layers: d, furniture: x, colorFor: v, labelFor: m } = H(s), b = c.filter((i) => !r.includes(i)), w = (i, h) => r.length ? "var(--color-ink-200)" : v(i, h), A = (i, h) => r.length ? "var(--color-chart-1)" : v(i, h), p = c.length > 1 ? [
+    const { names: c, format: f, layers: d, furniture: x, colorFor: v, labelFor: m } = H(s), b = c.filter((i) => !r.includes(i)), w = (i, h) => r.length ? "var(--chart-axis)" : v(i, h), A = (i, h) => r.length ? "var(--color-chart-1)" : v(i, h), p = c.length > 1 ? [
       ...b.map((i) => ({ label: m(i), color: w(i, c.indexOf(i)) })),
       ...r.map((i) => ({ label: m(i), color: A(i, c.indexOf(i)) }))
     ] : null;
@@ -698,11 +698,11 @@ const he = C.forwardRef(
   }
 );
 he.displayName = "ComboChart";
-const Ye = C.forwardRef(
+const Ye = k.forwardRef(
   (t, r) => /* @__PURE__ */ e(he, { ref: r, ...t })
 );
 Ye.displayName = "ComposedChart";
-const Xe = C.forwardRef(
+const Xe = k.forwardRef(
   ({
     data: t,
     xKey: r,
@@ -722,9 +722,9 @@ const Xe = C.forwardRef(
     tooltip: w,
     className: A
   }, p) => {
-    const i = c ?? F, h = v ?? ((R) => typeof R == "number" ? F(R) : R), y = m ?? ((R) => typeof R == "number" ? i(R) : R), k = me(o, i);
-    return /* @__PURE__ */ e(W, { ref: p, className: A, height: a, legendItems: null, hovered: k.hovered, format: i, children: /* @__PURE__ */ N(we, { margin: z, children: [
-      s && /* @__PURE__ */ e(X, { vertical: !1, stroke: "var(--color-ink-50)" }),
+    const i = c ?? F, h = v ?? ((R) => typeof R == "number" ? F(R) : R), y = m ?? ((R) => typeof R == "number" ? i(R) : R), C = me(o, i);
+    return /* @__PURE__ */ e(W, { ref: p, className: A, height: a, legendItems: null, hovered: C.hovered, format: i, children: /* @__PURE__ */ N(we, { margin: z, children: [
+      s && /* @__PURE__ */ e(X, { vertical: !1, stroke: "var(--chart-grid)" }),
       /* @__PURE__ */ e(
         Z,
         {
@@ -769,7 +769,7 @@ const Xe = C.forwardRef(
           isAnimationActive: !1
         }
       ),
-      k.back,
+      C.back,
       /* @__PURE__ */ e(
         Ae,
         {
@@ -779,12 +779,12 @@ const Xe = C.forwardRef(
           isAnimationActive: !1
         }
       ),
-      k.front
+      C.front
     ] }) });
   }
 );
 Xe.displayName = "ScatterChart";
-const Ze = C.forwardRef(
+const Ze = k.forwardRef(
   ({
     data: t,
     nameKey: r,
@@ -820,7 +820,7 @@ const Ze = C.forwardRef(
             }
           ),
           /* @__PURE__ */ e(
-            ke,
+            Ce,
             {
               data: t,
               dataKey: n,
@@ -843,15 +843,15 @@ const Ze = C.forwardRef(
           )
         ] }) }),
         l && /* @__PURE__ */ N("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ e("div", { className: "text-xl font-bold text-foreground tabular-nums", children: v(m) }),
-          o && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: o })
+          /* @__PURE__ */ e("div", { className: "text-xl font-semibold text-foreground tabular-nums", children: v(m) }),
+          o && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-normal tracking-wide uppercase text-tertiary", children: o })
         ] })
       ] })
     ] });
   }
 );
 Ze.displayName = "PieChart";
-const Qe = C.forwardRef(
+const Qe = k.forwardRef(
   ({
     data: t,
     categoryKey: r,
@@ -865,7 +865,7 @@ const Qe = C.forwardRef(
     tooltip: f,
     className: d
   }, x) => {
-    const v = C.useMemo(
+    const v = k.useMemo(
       () => n ?? ce(t, r),
       [r, t, n]
     ), m = c ?? F, b = a ?? Math.max(
@@ -879,7 +879,7 @@ const Qe = C.forwardRef(
     return /* @__PURE__ */ N("div", { ref: x, className: $("relative w-full font-sans", d), children: [
       p && /* @__PURE__ */ e(G, { items: p, align: "center" }),
       /* @__PURE__ */ e("div", { className: "mx-auto w-full max-w-[520px]", children: /* @__PURE__ */ e(j, { width: "100%", height: s, children: /* @__PURE__ */ N(
-        Ce,
+        ke,
         {
           data: t,
           cx: "50%",
@@ -939,7 +939,7 @@ const Qe = C.forwardRef(
   }
 );
 Qe.displayName = "RadarChart";
-const qe = C.forwardRef(
+const qe = k.forwardRef(
   ({
     data: t,
     nameKey: r,
@@ -1003,8 +1003,8 @@ const qe = C.forwardRef(
           }
         ) }),
         /* @__PURE__ */ N("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ e("div", { className: "text-xl font-bold text-foreground tabular-nums", children: x(Math.round(m)) }),
-          o && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: o })
+          /* @__PURE__ */ e("div", { className: "text-xl font-semibold text-foreground tabular-nums", children: x(Math.round(m)) }),
+          o && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-normal tracking-wide uppercase text-tertiary", children: o })
         ] })
       ] }),
       b && /* @__PURE__ */ e(G, { items: b, align: "center", className: "mb-0 mt-3" })
@@ -1089,7 +1089,7 @@ function Ke(t, r, n) {
   };
   return t.forEach(o), l.length ? l : t;
 }
-const et = C.forwardRef(
+const et = k.forwardRef(
   ({
     data: t,
     nameKey: r,
@@ -1099,7 +1099,7 @@ const et = C.forwardRef(
     tooltip: a,
     className: s
   }, u) => {
-    const c = o ?? F, f = C.useMemo(
+    const c = o ?? F, f = k.useMemo(
       () => Ke(t, r, n),
       [t, r, n]
     );
@@ -1131,13 +1131,13 @@ const et = C.forwardRef(
   }
 );
 et.displayName = "TreemapChart";
-const U = "var(--color-chart-1)", tt = "var(--color-ink-100)", P = 24, rt = 44, re = 0.55, ne = 4, ae = (t, r, n, l, o) => {
+const U = "var(--color-chart-1)", tt = "var(--chart-track)", P = 24, rt = 44, re = 0.55, ne = 4, ae = (t, r, n, l, o) => {
   const a = Math.min(o, n / 2, l);
   return `M ${t},${r + l} L ${t},${r + a} Q ${t},${r} ${t + a},${r} L ${t + n - a},${r} Q ${t + n},${r} ${t + n},${r + a} L ${t + n},${r + l} Z`;
 };
 function nt() {
-  const t = C.useRef(null), [r, n] = C.useState(0);
-  return C.useLayoutEffect(() => {
+  const t = k.useRef(null), [r, n] = k.useState(0);
+  return k.useLayoutEffect(() => {
     const l = t.current;
     if (!l) return;
     n(l.getBoundingClientRect().width);
@@ -1149,7 +1149,7 @@ function nt() {
     return o.observe(l), () => o.disconnect();
   }, []), { ref: t, width: r };
 }
-const at = C.forwardRef(
+const at = k.forwardRef(
   ({
     data: t,
     nameKey: r,
@@ -1161,7 +1161,7 @@ const at = C.forwardRef(
     className: u
   }, c) => {
     var R;
-    const f = o ?? F, { ref: d, width: x } = nt(), [v, m] = C.useState(null), b = Number(((R = t[0]) == null ? void 0 : R[n]) ?? 0), w = t.length, A = Math.max(0, l - P - rt), p = P + A, i = w > 0 ? x / (w + (w - 1) * re) : 0, h = i * re, y = t.map((g, L) => {
+    const f = o ?? F, { ref: d, width: x } = nt(), [v, m] = k.useState(null), b = Number(((R = t[0]) == null ? void 0 : R[n]) ?? 0), w = t.length, A = Math.max(0, l - P - rt), p = P + A, i = w > 0 ? x / (w + (w - 1) * re) : 0, h = i * re, y = t.map((g, L) => {
       var te;
       const M = Number(g[n]), B = Number(((te = t[L - 1]) == null ? void 0 : te[n]) ?? M), xe = b ? M / b * 100 : 0, K = B ? M / B * 100 : 0, ee = b && M > 0 ? Math.max(2, M / b * A) : 0;
       return {
@@ -1178,7 +1178,7 @@ const at = C.forwardRef(
         height: ee,
         formatValue: f
       };
-    }), k = v != null ? y[v] : void 0;
+    }), C = v != null ? y[v] : void 0;
     return /* @__PURE__ */ e("div", { ref: c, className: $("relative w-full font-sans", u), children: /* @__PURE__ */ N("div", { ref: d, className: "relative w-full", style: { height: l }, children: [
       x > 0 && w > 0 && /* @__PURE__ */ N("svg", { width: x, height: l, className: "block", children: [
         y.slice(1).map((g) => {
@@ -1219,7 +1219,7 @@ const at = C.forwardRef(
                   x: g.x,
                   y: g.y - 8,
                   textAnchor: "start",
-                  className: "fill-secondary text-xs font-medium tabular-nums",
+                  className: "fill-secondary text-xs font-normal tabular-nums",
                   children: [
                     Math.round(g.conversionFromFirst),
                     "%"
@@ -1232,7 +1232,7 @@ const at = C.forwardRef(
                   x: g.x,
                   y: p + 18,
                   textAnchor: "start",
-                  className: "fill-primary text-xs font-medium",
+                  className: "fill-primary text-xs font-normal",
                   children: g.name
                 }
               ),
@@ -1263,34 +1263,34 @@ const at = C.forwardRef(
           `${g.name}-${g.index}`
         ))
       ] }),
-      s !== !1 && k && /* @__PURE__ */ e(
+      s !== !1 && C && /* @__PURE__ */ e(
         "div",
         {
           className: "pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full",
-          style: { left: k.x + k.width / 2, top: k.y - 10 },
+          style: { left: C.x + C.width / 2, top: C.y - 10 },
           children: s ? s({
             active: !0,
-            label: k.name,
+            label: C.name,
             items: [
               {
-                key: k.name,
-                name: k.name,
-                value: k.value,
+                key: C.name,
+                name: C.name,
+                value: C.value,
                 color: U,
-                datum: k.datum
+                datum: C.datum
               }
             ],
             formatValue: f
           }) : /* @__PURE__ */ N("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs whitespace-nowrap text-background", children: [
-            /* @__PURE__ */ e("div", { className: "text-xs font-medium tracking-wide uppercase text-background/60", children: k.name }),
-            /* @__PURE__ */ e("div", { className: "font-medium tabular-nums", children: f(k.value) }),
+            /* @__PURE__ */ e("div", { className: "text-xs font-normal tracking-wide uppercase text-background/60", children: C.name }),
+            /* @__PURE__ */ e("div", { className: "font-normal tabular-nums", children: f(C.value) }),
             /* @__PURE__ */ N("div", { className: "text-background/70 tabular-nums", children: [
-              Math.round(k.conversionFromFirst),
+              Math.round(C.conversionFromFirst),
               "% of ",
               y[0].name,
-              k.index > 0 && /* @__PURE__ */ N(V, { children: [
+              C.index > 0 && /* @__PURE__ */ N(V, { children: [
                 " · −",
-                Math.round(k.dropOffFromPrevious),
+                Math.round(C.dropOffFromPrevious),
                 "% step"
               ] })
             ] })

package/components/chip.js

@@ -5,7 +5,7 @@ import { cva as u } from "class-variance-authority";
 import { Close as m } from "../lib/icons.js";
 import { cn as o } from "../lib/cn.js";
 const b = u(
-  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium whitespace-nowrap",
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-normal whitespace-nowrap",
   {
     variants: {
       variant: {
@@ -26,7 +26,7 @@ const b = u(
     compoundVariants: [
       // solid
       { variant: "solid", color: "default", className: "bg-fill text-fill-foreground" },
-      { variant: "solid", color: "primary", className: "bg-brand text-brand-foreground" },
+      { variant: "solid", color: "primary", className: "bg-foreground text-background" },
       { variant: "solid", color: "success", className: "bg-success text-success-foreground" },
       { variant: "solid", color: "warning", className: "bg-warning text-warning-foreground" },
       { variant: "solid", color: "danger", className: "bg-danger text-danger-foreground" },
@@ -50,7 +50,7 @@ const b = u(
   }
 ), p = {
   default: "bg-muted-foreground",
-  primary: "bg-brand",
+  primary: "bg-foreground",
   success: "bg-success",
   warning: "bg-warning",
   danger: "bg-danger",

package/components/code-block.d.ts

@@ -5,38 +5,60 @@ import * as React from "react";
  * The inline sibling is `Code`; reach for this whenever the snippet owns its
  * own line(s).
  *
- * A recessed, static surface — filled, never elevated (elevation means
- * actionable) and never bordered. Long snippets scroll inside the block, so
- * cap the height from the outside (`className="max-h-96"`) rather than letting
- * the page grow.
+ * Ported from Geist's CodeBlock composition, then adapted to ADS tokens and
+ * component conventions. Code is passed as a string child, line numbers are
+ * visible by default, a filename turns on the toolbar, and highlighted / added
+ * / removed lines are authored through dedicated props.
+ *
+ * The default block uses an unfilled, outlined toolbar above a white, outlined
+ * source surface; the toolbar's bottom stroke separates the two. It stays
+ * static and never elevated (elevation means actionable). Long snippets scroll
+ * inside the block, so cap the height from the outside
+ * (`className="max-h-96"`) rather than letting the page grow.
  *
  * Highlighting is deliberately minimal and dependency-free: `language` selects
- * one of a few small built-in grammars (sql, json, yaml, bash, ts/js) and only
- * the parts a reader scans for are coloured — comments recede, strings and
- * numbers take one accent each, keywords take weight. An unrecognised language
- * renders plain rather than guessing. No highlighter library, and no rainbow
- * competing with the brand's monochrome.
+ * one of a few small built-in grammars (sql, json, yaml, bash, ts/js). Comments
+ * and punctuation recede, keywords take weight, and every other token stays
+ * neutral. An unrecognised language renders plain rather than guessing. No
+ * highlighter library and no syntax rainbow competing with the source.
  */
 declare const codeBlockVariants: (props?: ({
     variant?: "soft" | "plain" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof codeBlockVariants> {
-    /** The source to display, verbatim. */
-    code: string;
+interface CodeBlockBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof codeBlockVariants> {
     /**
-     * Language label for the header, e.g. `sql`. Also selects the highlighting
-     * grammar: sql · json · yaml · yml · bash/sh/shell/zsh · ts/tsx/js/jsx.
-     * Anything else is shown as a label and rendered plain.
+     * Syntax grammar: sql · json · yaml · yml · bash/sh/shell/zsh ·
+     * ts/tsx/js/jsx. Unknown languages render verbatim rather than guessing.
      */
     language?: string;
-    /** Leading header label, e.g. `schema.yaml`. Takes the header's start slot. */
+    /** A paste destination such as `app/page.tsx`; turns on the toolbar. */
     filename?: string;
     /** Show the copy control. */
     isCopyable?: boolean;
-    /** Number the lines in a non-selectable gutter. */
+    /** Hide the default line-number gutter. Mirrors Geist's public API. */
+    hideLineNumbers?: boolean;
+    /** @deprecated Line numbers are on by default; use `hideLineNumbers`. */
     showLineNumbers?: boolean;
+    /** One-based lines to emphasize as the subject under discussion. */
+    highlightedLinesNumbers?: number[];
+    /** One-based lines introduced by a change. */
+    addedLinesNumbers?: number[];
+    /** One-based lines removed by a change. */
+    removedLinesNumbers?: number[];
     /** Accessible label for the copy control. */
     copyLabel?: string;
 }
+/**
+ * Geist-compatible content uses a string child. The former `code` prop remains
+ * as a deprecated compatibility path so existing ADS consumers do not break.
+ */
+export type CodeBlockProps = CodeBlockBaseProps & ({
+    children: string;
+    code?: never;
+} | {
+    /** @deprecated Pass the source as `<CodeBlock>{code}</CodeBlock>`. */
+    code: string;
+    children?: never;
+});
 export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
 export { codeBlockVariants };