@usetheo/ui 0.29.0 → 0.30.0

package/dist/components/composites/trend-chart/trend-chart.d.ts

@@ -39,6 +39,13 @@ export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
     height?: number;
     /** Formats y-axis labels and table cells (tremor vocabulary). */
     valueFormatter?: (v: number) => string;
+    /**
+     * Pin the top of the y-axis. Pass a fixed bound (e.g. `1` for a 0–1 score) so the
+     * scale is stable and comparable across renders instead of auto-fitting to the data
+     * max via {@link niceMax} (which makes 0.68 look near the top of a [0, 0.7] axis).
+     * Ignored when ≤ 0. Default: auto (`niceMax`).
+     */
+    yMax?: number;
 }
 declare const TrendChart: import("react").ForwardRefExoticComponent<TrendChartProps & import("react").RefAttributes<HTMLElement>>;
 export { TrendChart };

package/dist/index.js

@@ -5087,7 +5087,7 @@ function niceMax(values) {
   const m = Math.max(0, ...values.filter((v) => Number.isFinite(v)));
   if (m <= 0) return 0;
   const pow = 10 ** Math.floor(Math.log10(m));
-  return Math.ceil(m / pow) * pow;
+  return Number((Math.ceil(m / pow) * pow).toPrecision(12));
 }
 function seriesPath(points, xScale, yScale) {
   const finite = points.filter((p) => Number.isFinite(p.y));
@@ -5098,7 +5098,29 @@ var VIEW_W = 600;
 var PAD = { top: 8, right: 8, bottom: 4, left: 40 };
 var SPARSE_MARKER_MAX = 5;
 var TrendChart = forwardRef(
-  ({ title, series, height = 180, valueFormatter = (v) => String(v), className, ...props }, ref) => {
+  ({
+    title,
+    series,
+    height = 180,
+    valueFormatter = (v) => String(v),
+    yMax: yMaxProp,
+    className,
+    ...props
+  }, ref) => {
+    const [viewW, setViewW] = useState(VIEW_W);
+    const roRef = useRef(null);
+    const setSvgNode = useCallback((node) => {
+      roRef.current?.disconnect();
+      roRef.current = null;
+      if (!node || typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const w = node.clientWidth;
+        if (w > 0) setViewW(w);
+      };
+      measure();
+      roRef.current = new ResizeObserver(measure);
+      roRef.current.observe(node);
+    }, []);
     const allPoints = series.flatMap((s) => s.points);
     const hasData = allPoints.some((p) => Number.isFinite(p.y));
     if (!hasData) {
@@ -5128,17 +5150,18 @@ var TrendChart = forwardRef(
     const xs = allPoints.map((p) => p.x);
     const xMin = Math.min(...xs);
     const xMax = Math.max(...xs);
-    const yMax = niceMax(allPoints.map((p) => p.y)) || 1;
+    const yMax = yMaxProp != null && yMaxProp > 0 ? yMaxProp : niceMax(allPoints.map((p) => p.y)) || 1;
     const axisXs = Array.from(new Set(allPoints.map((p) => p.x))).sort((a, b) => a - b);
     const yByX = series.map((s) => new Map(s.points.map((p) => [p.x, p.y])));
-    const xScale = linScale([xMin, xMax], [PAD.left, VIEW_W - PAD.right]);
+    const xScale = linScale([xMin, xMax], [PAD.left, viewW - PAD.right]);
     const yScale = linScale([0, yMax], [height - PAD.bottom, PAD.top]);
     return /* @__PURE__ */ jsxs("figure", { "data-slot": "trend-chart", ref, className: cn("space-y-1", className), ...props, children: [
       /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
       /* @__PURE__ */ jsxs(
         "svg",
         {
-          viewBox: `0 0 ${VIEW_W} ${height}`,
+          ref: setSvgNode,
+          viewBox: `0 0 ${viewW} ${height}`,
           preserveAspectRatio: "none",
           role: "img",
           "aria-label": `${title} trend`,
@@ -5150,7 +5173,7 @@ var TrendChart = forwardRef(
               {
                 x1: PAD.left,
                 y1: height - PAD.bottom,
-                x2: VIEW_W - PAD.right,
+                x2: viewW - PAD.right,
                 y2: height - PAD.bottom,
                 className: "stroke-border",
                 strokeWidth: 1
@@ -5161,7 +5184,7 @@ var TrendChart = forwardRef(
               {
                 x1: PAD.left,
                 y1: PAD.top,
-                x2: VIEW_W - PAD.right,
+                x2: viewW - PAD.right,
                 y2: PAD.top,
                 className: "stroke-border/50",
                 strokeWidth: 1,

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",
   "sideEffects": false,
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",