@dreamtree-org/twreact-ui 1.3.2 → 1.3.3

package/DESIGN.md

@@ -41,7 +41,7 @@ rounded:
 spacing:
   grid: 4px
   steps: [4, 8, 12, 16, 20, 24, 32]
-brands: [default, practicepro, studio]
+brand: dreamtree.brand.json in each product repo (build its CSS with `npx @dreamtree-org/twreact-ui brand build`)
 ---
 
 <!-- Generated by twreact-ui scripts/build-tokens.mjs from tokens/tokens.json. Edit the tokens or this generator, not this file. -->
@@ -76,7 +76,7 @@ Every Dreamtree product screen, and every prototype generated by Dreamtree Studi
 
 - **One accent per screen.** `primary` marks the primary action, the active nav item, the current step and progress. Red (`error`) is only for errors, overdue items and destructive actions.
 - Badge and status fills use the 100 step with 800 text, which keeps contrast at or above 4.5:1.
-- Products change their look with a **brand file** (`tokens/brands/<product>.json`), which overrides `--dt-*` variables. Brands available: `default`, `practicepro`, `studio`.
+- Each product keeps its look in its own repo, in **`dreamtree.brand.json`** (its `--dt-*` overrides: colour scales, roles, font). `npx @dreamtree-org/twreact-ui brand build` turns it into the CSS the product loads after twreact-ui's CSS. Never restyle a product with raw colours; change its brand file.
 
 ## 3. Type, space and shape
 

package/README.md

@@ -278,7 +278,7 @@ Advanced select component with search, multi-select, and grouping support.
 - `selectAllOption`: boolean
 - `closeOnSelect`: boolean
 - `maxTagCount`: number (default: 3)
-- `allowClear`: boolean
+- `allowClear`: boolean (default: false; set it when the field may be emptied)
 
 ```jsx
 <Select
@@ -836,14 +836,20 @@ See [doc/useApi.md](doc/useApi.md).
 
 Every colour in the compiled CSS is a CSS variable (`--dt-primary-600`, `--dt-surface`, …) generated from `tokens/tokens.json` (W3C Design Tokens format). The defaults equal the classic palette, so nothing changes until you override a variable.
 
-**Re-theme with a brand file** (no Tailwind config needed, works with the precompiled CSS):
+**Your brand lives in your repo.** Keep it in `dreamtree.brand.json` at the repo root (colour scales, roles, font, logo, and optional landing-page colours) and build the CSS from it. No Tailwind config is needed, and it works with the precompiled CSS:
+
+```bash
+npx @dreamtree-org/twreact-ui brand init --id acme --name "Acme"      # starter file
+npx @dreamtree-org/twreact-ui brand build --out app/brand.css          # only the --dt-* variables you override
+npx @dreamtree-org/twreact-ui brand build --out app/brand.css --check  # in CI: fails if the CSS is stale
+```
 
 ```css
 @import "@dreamtree-org/twreact-ui/dist/index.css";
-@import "@dreamtree-org/twreact-ui/dist/tokens/brands/practicepro.css"; /* or your own --dt-* overrides */
+@import "./brand.css";
 ```
 
-Shipped brands: `default`, `practicepro`, `studio` (Dreamtree Studio's own pages).
+The file is checked against `tokens/brand.schema.json` (add `"$schema": "https://unpkg.com/@dreamtree-org/twreact-ui/tokens/brand.schema.json"` for editor help). `brand validate` lists every problem with its fix, and `--scope ".my-app"` limits the brand to part of a page. twreact-ui ships only `default`; the `practicepro` and `studio` brands are deprecated copies until 1.5.0.
 
 **Use the same tokens in your own classes:**
 
@@ -872,7 +878,7 @@ This adds semantic utilities next to the palettes: `bg-surface`, `bg-background`
 
 **Colour props are overrides, not defaults.** Without colour props, `ProgressBar`, `Checkbox`, `Rate` and `Skeleton` use token classes, so a brand file recolours them. Their HEX props (`color`, `bgColor`, `borderColor`, `activeColor`, `inactiveColor`) still work but are deprecated.
 
-**SSR:** `Tabs`, `Tooltip` and `Switch` generate ids with `React.useId()`, so server-rendered pages (Next.js) hydrate without mismatches.
+**SSR:** `Tabs`, `Tooltip` and `Switch` generate ids with `React.useId()`, so server-rendered pages (Next.js) hydrate without mismatches. The `/charts` components do the same for their SVG ids, and they render token colours and reduced-motion state the way the server did until hydration finishes.
 
 ## Dark Mode
 

package/ai-skills/dreamtree-ui.md

@@ -205,7 +205,9 @@ When suggesting a component or new variant value, use this exact vocabulary.
 **Tokens:** colours are CSS variables (`--dt-primary-600`, `--dt-surface`, …) generated from
 `tokens/tokens.json`. Use semantic classes (`bg-primary-600`, `bg-surface`, `text-foreground`,
 `text-muted`, `border-line`, `text-micro`, `rounded-card`) — never hex values or Tailwind's raw
-palette (`bg-blue-500`). A product re-themes by loading `dist/tokens/brands/<brand>.css`.
+palette (`bg-blue-500`). A product's brand lives in its own repo as `dreamtree.brand.json`;
+`npx @dreamtree-org/twreact-ui brand build --out app/brand.css` turns it into the CSS to load after
+twreact-ui's CSS. To change a product's colours, edit that file, never the components.
 The full rule set for screens is `DESIGN.md` in the package root.
 
 ```jsx

package/bin/cli.mjs

@@ -17,7 +17,8 @@
 
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
 import { fileURLToPath } from "node:url";
-import { dirname, join, resolve } from "node:path";
+import { dirname, join, resolve, relative } from "node:path";
+import { createRequire } from "node:module";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PKG_ROOT = resolve(__dirname, "..");
@@ -56,14 +57,20 @@ function printHelp() {
     `${PKG} CLI (v${VERSION})\n\n` +
       `Usage:\n` +
       `  npx ${PKG} init --ai <provider> [--out <path>] [--force]\n` +
-      `  npx ${PKG} mcp\n\n` +
+      `  npx ${PKG} mcp\n` +
+      `  npx ${PKG} brand init|validate|build [dreamtree.brand.json] [options]\n\n` +
       `Commands:\n` +
       `  init    Install the AI-assistant skill (ai-skills/dreamtree-ui.md) so your\n` +
       `          coding agent knows this library's components, conventions, wiring.\n` +
       `  mcp     Run the Model Context Protocol server over stdio — gives an MCP\n` +
       `          client live, queryable access to the library (list_components,\n` +
       `          get_component, search_components + docs + a compose_ui prompt).\n` +
-      `          Wire it as: { "command": "npx", "args": ["-y", "${PKG}", "mcp"] }\n\n` +
+      `          Wire it as: { "command": "npx", "args": ["-y", "${PKG}", "mcp"] }\n` +
+      `  brand   Your product's brand lives in your repo as dreamtree.brand.json.\n` +
+      `          init      write a starter file (--id <slug> --name <Name>)\n` +
+      `          validate  check it, with a fix for every problem\n` +
+      `          build     write the CSS to load after twreact-ui's CSS\n` +
+      `                    (--out app/brand.css, --scope <selector>, --check for CI)\n\n` +
       `init options:\n` +
       `  --ai <provider>   Target assistant: ${providers}  (default: claude)\n` +
       `  --out <path>      Write to this path instead of the provider default\n` +
@@ -74,12 +81,16 @@ function printHelp() {
 }
 
 function parseArgs(argv) {
-  const out = { _: [], ai: undefined, out: undefined, force: false, help: false, version: false };
+  const out = { _: [], ai: undefined, out: undefined, force: false, help: false, version: false, scope: undefined, check: false, id: undefined, name: undefined };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
     if (a === "--ai") out.ai = argv[++i];
     else if (a === "--out") out.out = argv[++i];
     else if (a === "--force") out.force = true;
+    else if (a === "--scope") out.scope = argv[++i];
+    else if (a === "--check") out.check = true;
+    else if (a === "--id") out.id = argv[++i];
+    else if (a === "--name") out.name = argv[++i];
     else if (a === "-h" || a === "--help") out.help = true;
     else if (a === "-v" || a === "--version") out.version = true;
     else out._.push(a);
@@ -117,6 +128,62 @@ function runInit(args) {
   );
 }
 
+// `brand` — a product keeps its brand in its own repo (dreamtree.brand.json); these commands turn it into CSS.
+// tokens/lib.cjs is CommonJS and dependency-free, so this stays a zero-dependency path.
+const BRAND_FILE = "dreamtree.brand.json";
+
+function runBrand(args) {
+  const lib = createRequire(import.meta.url)("../tokens/lib.cjs");
+  const sub = args._[1];
+  const file = resolve(process.cwd(), args._[2] || BRAND_FILE);
+  const shown = relative(process.cwd(), file) || BRAND_FILE;
+
+  if (sub === "init") {
+    if (existsSync(file) && !args.force) fail(`${shown} already exists. Re-run with --force to overwrite.`);
+    const id = (args.id || "my-product").toLowerCase();
+    const base = lib.scales(lib.loadTokens()).primary;
+    const starter = {
+      $schema: "https://unpkg.com/@dreamtree-org/twreact-ui/tokens/brand.schema.json",
+      id,
+      name: args.name || id,
+      color: { primary: base },
+      role: {},
+      marketing: {},
+    };
+    writeFileSync(file, JSON.stringify(starter, null, 2) + "\n");
+    process.stdout.write(`✓ wrote ${shown}. Change color.primary to your product's scale, then run: npx ${PKG} brand build\n`);
+    return;
+  }
+
+  if (sub === "validate" || sub === "build") {
+    let brand;
+    try {
+      brand = lib.loadBrand(file);
+    } catch (err) {
+      fail(err.message);
+    }
+    if (sub === "validate") {
+      process.stdout.write(`✓ ${shown} is a valid brand ("${lib.brandId(brand)}").\n`);
+      return;
+    }
+    const css = lib.brandCss(lib.loadTokens(), brand, { scope: args.scope });
+    const outFile = resolve(process.cwd(), args.out || "brand.css");
+    const outShown = relative(process.cwd(), outFile);
+    if (args.check) {
+      const current = existsSync(outFile) ? readFileSync(outFile, "utf8") : "";
+      if (current !== css) fail(`${outShown} is out of date with ${shown}. Run: npx ${PKG} brand build ${shown} --out ${outShown}${args.scope ? ` --scope "${args.scope}"` : ""}`);
+      process.stdout.write(`✓ ${outShown} matches ${shown}.\n`);
+      return;
+    }
+    mkdirSync(dirname(outFile), { recursive: true });
+    writeFileSync(outFile, css);
+    process.stdout.write(`✓ wrote ${outShown} from ${shown}. Import it after "${PKG}/dist/index.css".\n`);
+    return;
+  }
+
+  fail(`unknown brand command "${sub || ""}". Use: brand init | brand validate | brand build.`);
+}
+
 // Boot the bundled MCP server over stdio. The SDK + server are lazy-imported
 // here so plain `init` carries no dependency cost. stdout is the MCP protocol
 // channel, so this path must only ever log to stderr. The shipped server reads
@@ -140,6 +207,7 @@ async function main() {
   const cmd = args._[0];
   if (cmd === "init") return runInit(args);
   if (cmd === "mcp") return runMcp();
+  if (cmd === "brand") return runBrand(args);
 
   fail(`unknown command "${cmd}". Run \`npx ${PKG} --help\`.`);
 }

package/dist/ai-schema.json

@@ -2251,7 +2251,7 @@
       "allowClear": {
         "type": "boolean",
         "required": false,
-        "default": "true"
+        "default": "false"
       },
       "name": {
         "type": "string",

package/dist/charts/index.js

@@ -200,9 +200,11 @@ function readVar(name) {
 }
 // SVG presentation attributes do not resolve var() in every engine, so a token is
 // turned into a concrete rgb() string when the browser can tell us its value. The
-// var() form is the SSR / jsdom fallback.
+// var() form is the SSR / jsdom fallback, and what the first (hydrating) client
+// render uses so it matches the server's HTML (`live` = false).
 function resolveVar(name) {
-  var value = readVar(name);
+  var live = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var value = live ? readVar(name) : "";
   return value ? "rgb(".concat(value.split(/[\s,]+/).join(" "), ")") : "rgb(var(".concat(name, "))");
 }
 /**
@@ -211,77 +213,92 @@ function resolveVar(name) {
  * by the consumer (e.g. a colour stored with the data).
  */
 function resolveColor(color) {
+  var live = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   var name = tokenVar(color);
-  return name ? resolveVar(name) : color;
+  return name ? resolveVar(name, live) : color;
 }
 function seriesColors(categories, colors) {
+  var live = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var palette = colors && colors.length ? colors : DEFAULT_CHART_COLORS;
   return categories.map(function (_, i) {
-    return resolveColor(palette[i % palette.length]);
+    return resolveColor(palette[i % palette.length], live);
   });
 }
-function readChrome() {
+function readChrome(live) {
   return Object.fromEntries(Object.entries(CHROME_VARS).map(function (_ref) {
     var _ref2 = cn._slicedToArray(_ref, 2),
       k = _ref2[0],
       v = _ref2[1];
-    return [k, resolveVar(v)];
+    return [k, resolveVar(v, live)];
   }));
 }
+// The theme is an external store: the attributes on <html> that flip it. The
+// server snapshot is null, so a hydrating render keeps the var() fallback the
+// server rendered and React re-renders with live colours right after (#130).
+function subscribeTheme(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver !== "function") return function () {};
+  var observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme", "style"]
+  });
+  return function () {
+    return observer.disconnect();
+  };
+}
+function themeSnapshot() {
+  if (typeof document === "undefined") return null;
+  var el = document.documentElement;
+  return "".concat(el.className, "|").concat(el.getAttribute("data-theme") || "", "|").concat(el.getAttribute("style") || "");
+}
+var serverThemeSnapshot = function serverThemeSnapshot() {
+  return null;
+};
 /**
  * Chart chrome + series colours, re-read whenever the theme flips (the `dark`
  * class or `data-theme` on <html>) so axes and series follow dark mode without
  * a remount.
  */
 function useChartTheme(categories, colors) {
-  var _useState = React.useState(0),
-    _useState2 = cn._slicedToArray(_useState, 2);
-    _useState2[0];
-    var setVersion = _useState2[1];
-  React.useEffect(function () {
-    if (typeof MutationObserver !== "function") return undefined;
-    var observer = new MutationObserver(function () {
-      return setVersion(function (v) {
-        return v + 1;
-      });
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme", "style"]
-    });
-    return function () {
-      return observer.disconnect();
-    };
-  }, []);
+  // The snapshot only signals a change; the values come from the live document.
+  var live = React.useSyncExternalStore(subscribeTheme, themeSnapshot, serverThemeSnapshot) !== null;
   return {
-    chrome: readChrome(),
-    series: seriesColors(categories, colors)
+    chrome: readChrome(live),
+    series: seriesColors(categories, colors, live)
   };
 }
-/** `true` while the user asks the OS for reduced motion; follows changes live. */
+function subscribeReducedMotion(onChange) {
+  var _query$addEventListen;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return function () {};
+  var query = window.matchMedia("(prefers-reduced-motion: reduce)");
+  (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", onChange);
+  return function () {
+    var _query$removeEventLis;
+    return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", onChange);
+  };
+}
+var serverReducedMotion = function serverReducedMotion() {
+  return false;
+};
+/**
+ * `true` while the user asks the OS for reduced motion; follows changes live.
+ * `false` on the server and while hydrating, so the first render matches.
+ */
 function useReducedMotion() {
-  var _useState3 = React.useState(prefersReducedMotion),
-    _useState4 = cn._slicedToArray(_useState3, 2),
-    reduced = _useState4[0],
-    setReduced = _useState4[1];
-  React.useEffect(function () {
-    var _query$addEventListen;
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return undefined;
-    var query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    var update = function update() {
-      return setReduced(query.matches);
-    };
-    (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", update);
-    return function () {
-      var _query$removeEventLis;
-      return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", update);
-    };
-  }, []);
-  return reduced;
+  return React.useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverReducedMotion);
 }
 var defaultValueFormatter = function defaultValueFormatter(value) {
   return typeof value === "number" ? value.toLocaleString() : value == null ? "" : String(value);
 };
+/**
+ * A per-instance id for the SVG defs recharts draws (clip paths). recharts 2
+ * falls back to a module-level counter, which differs between the server and the
+ * client; an id from React.useId() is the same on both. Only [A-Za-z0-9_-] so it
+ * is safe inside `url(#…)`.
+ */
+function useChartId() {
+  return "dt-chart-".concat(React.useId().replace(/[^A-Za-z0-9_-]/g, ""));
+}
 
 var _excluded$2 = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 var ROOTS = {
@@ -301,7 +318,8 @@ var CURVES = {
   natural: "natural"
 };
 function renderSeries(kind, _ref) {
-  var category = _ref.category,
+  var id = _ref.id,
+    category = _ref.category,
     color = _ref.color,
     curve = _ref.curve,
     stacked = _ref.stacked,
@@ -311,6 +329,7 @@ function renderSeries(kind, _ref) {
     horizontal = _ref.horizontal,
     barRadius = _ref.barRadius;
   var common = {
+    id: id,
     dataKey: category,
     name: category,
     isAnimationActive: animate
@@ -410,6 +429,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
     chrome = _useChartTheme.chrome,
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
   var Root = ROOTS[kind];
   var isHorizontalBars = kind === "bar" && horizontal;
   var curve = CURVES[curveType] || "monotone";
@@ -470,6 +490,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
       height: "100%",
       minWidth: 0,
       children: jsxRuntime.jsxs(Root, {
+        id: chartId,
         data: data,
         layout: isHorizontalBars ? "vertical" : "horizontal",
         margin: {
@@ -508,6 +529,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
           })
         }), categories.map(function (category, i) {
           return renderSeries(kind, {
+            id: "".concat(chartId, "-").concat(i),
             category: category,
             color: series[i],
             curve: curve,
@@ -591,6 +613,7 @@ var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref,
     chrome = _useChartTheme.chrome,
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
   var slices = rows.map(function (row, i) {
     return cn._objectSpread2(cn._objectSpread2({}, row), {}, {
       fill: series[i]
@@ -632,6 +655,7 @@ var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref,
         height: "100%",
         minWidth: 0,
         children: jsxRuntime.jsxs(recharts.PieChart, {
+          id: chartId,
           accessibilityLayer: false,
           children: [showTooltip && jsxRuntime.jsx(recharts.Tooltip, {
             isAnimationActive: false,
@@ -640,6 +664,7 @@ var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref,
               hideLabel: true
             })
           }), jsxRuntime.jsx(recharts.Pie, {
+            id: "".concat(chartId, "-0"),
             data: slices,
             dataKey: category,
             nameKey: index,
@@ -691,9 +716,11 @@ var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, r
   var _useChartTheme = useChartTheme([category], [color]),
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
   var stroke = series[0];
   var Root = type === "area" ? recharts.AreaChart : recharts.LineChart;
   var common = {
+    id: "".concat(chartId, "-0"),
     dataKey: category,
     name: category,
     type: "monotone",
@@ -734,6 +761,7 @@ var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, r
       height: "100%",
       minWidth: 0,
       children: jsxRuntime.jsxs(Root, {
+        id: chartId,
         data: data,
         margin: {
           top: 2,

package/dist/components/charts/CartesianChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/CartesianChart.jsx"],"names":[],"mappings":";AA0DA,iEAAiE;AACjE,wFAwHG;kBAnLe,OAAO"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/CartesianChart.jsx"],"names":[],"mappings":";AA0DA,iEAAiE;AACjE,wFA2HG;kBAtLe,OAAO"}

package/dist/components/charts/DonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/DonutChart.jsx"],"names":[],"mappings":";AAKA,oFA8EE;kBAnFgB,OAAO"}
+{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/DonutChart.jsx"],"names":[],"mappings":";AAKA,oFAgFE;kBArFgB,OAAO"}

package/dist/components/charts/Sparkline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/charts/Sparkline.jsx"],"names":[],"mappings":";AAKA,qFAAqF;AACrF,mFAqEE;kBA3EgB,OAAO"}
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/charts/Sparkline.jsx"],"names":[],"mappings":";AAKA,qFAAqF;AACrF,mFAuEE;kBA7EgB,OAAO"}

package/dist/components/charts/chartTheme.d.ts

@@ -5,8 +5,8 @@ export function tokenVar(color: any): string | null;
  * matching `--dt-*` variable; any other string is treated as a CSS colour supplied
  * by the consumer (e.g. a colour stored with the data).
  */
-export function resolveColor(color: any): any;
-export function seriesColors(categories: any, colors: any): any;
+export function resolveColor(color: any, live?: boolean): any;
+export function seriesColors(categories: any, colors: any, live?: boolean): any;
 /**
  * Chart chrome + series colours, re-read whenever the theme flips (the `dark`
  * class or `data-theme` on <html>) so axes and series follow dark mode without
@@ -18,8 +18,18 @@ export function useChartTheme(categories: any, colors: any): {
     };
     series: any;
 };
-/** `true` while the user asks the OS for reduced motion; follows changes live. */
+/**
+ * `true` while the user asks the OS for reduced motion; follows changes live.
+ * `false` on the server and while hydrating, so the first render matches.
+ */
 export function useReducedMotion(): boolean;
+/**
+ * A per-instance id for the SVG defs recharts draws (clip paths). recharts 2
+ * falls back to a module-level counter, which differs between the server and the
+ * client; an id from React.useId() is the same on both. Only [A-Za-z0-9_-] so it
+ * is safe inside `url(#…)`.
+ */
+export function useChartId(): string;
 export const CHART_PALETTES: string[];
 export const DEFAULT_CHART_COLORS: string[];
 export function defaultValueFormatter(value: any): string;

package/dist/components/charts/chartTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chartTheme.d.ts","sourceRoot":"","sources":["../../../src/components/charts/chartTheme.js"],"names":[],"mappings":"AAgBA,sGAAsG;AACtG,oDAGC;AAeD;;;;GAIG;AACH,8CAGC;AAED,gEAGC;AAMD;;;;GAIG;AACH;;;;;EAaC;AAED,kFAAkF;AAClF,4CAYC;AApFD,sCAAsG;AAEtG,4CAA4G;AAoFrG,0DACkF"}
+{"version":3,"file":"chartTheme.d.ts","sourceRoot":"","sources":["../../../src/components/charts/chartTheme.js"],"names":[],"mappings":"AAgBA,sGAAsG;AACtG,oDAGC;AAgBD;;;;GAIG;AACH,8DAGC;AAED,gFAGC;AAwBD;;;;GAIG;AACH;;;;;EAIC;AAWD;;;GAGG;AACH,4CAEC;AAKD;;;;;GAKG;AACH,qCAEC;AA7GD,sCAAsG;AAEtG,4CAA4G;AAgGrG,0DACkF"}

package/dist/components/core/Table/MobileCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/MobileCard.jsx"],"names":[],"mappings":";AAWA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAkOC"}
+{"version":3,"file":"MobileCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/MobileCard.jsx"],"names":[],"mappings":";AAWA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAoOC"}

package/dist/components/core/Table/MobileFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/MobileFilters.jsx"],"names":[],"mappings":";AAGA;;GAEG;AACH;;;;;;;;;;;4CA2DC"}
+{"version":3,"file":"MobileFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/MobileFilters.jsx"],"names":[],"mappings":";AAGA;;GAEG;AACH;;;;;;;;;;;4CAmEC"}

package/dist/components/core/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Table.jsx"],"names":[],"mappings":";AA8CA,+EA+gDG;kBApjDI,OAAO"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Table.jsx"],"names":[],"mappings":";AA8CA,+EAkhDG;kBAvjDI,OAAO"}

package/dist/components/utility/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAIA,iFAkIG;kBAtIe,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAIA,iFAoIG;kBAxIe,OAAO"}

package/dist/esm/components/blocks/StatCard.js

@@ -57,7 +57,7 @@ var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }), change && !loading && jsxs("p", {
           className: "mt-1 flex items-center gap-1 text-xs text-muted",
           children: [jsxs("span", {
-            className: cn('inline-flex items-center gap-0.5 font-semibold', good ? 'text-success-600' : 'text-error-600'),
+            className: cn('inline-flex items-center gap-0.5 font-semibold', good ? 'text-success-700 dark:text-success-400' : 'text-error-700 dark:text-error-400'),
             children: [up ? jsx(ArrowUp, {
               className: "h-3.5 w-3.5",
               "aria-hidden": "true"

package/dist/esm/components/charts/CartesianChart.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, AreaChart, BarChart, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, Area, Line } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
-import { useChartTheme, useReducedMotion, defaultValueFormatter } from './chartTheme.js';
+import { useChartTheme, useReducedMotion, useChartId, defaultValueFormatter } from './chartTheme.js';
 
 var _excluded = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 var ROOTS = {
@@ -24,7 +24,8 @@ var CURVES = {
   natural: "natural"
 };
 function renderSeries(kind, _ref) {
-  var category = _ref.category,
+  var id = _ref.id,
+    category = _ref.category,
     color = _ref.color,
     curve = _ref.curve,
     stacked = _ref.stacked,
@@ -34,6 +35,7 @@ function renderSeries(kind, _ref) {
     horizontal = _ref.horizontal,
     barRadius = _ref.barRadius;
   var common = {
+    id: id,
     dataKey: category,
     name: category,
     isAnimationActive: animate
@@ -133,6 +135,7 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
     chrome = _useChartTheme.chrome,
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
   var Root = ROOTS[kind];
   var isHorizontalBars = kind === "bar" && horizontal;
   var curve = CURVES[curveType] || "monotone";
@@ -193,6 +196,7 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
       height: "100%",
       minWidth: 0,
       children: jsxs(Root, {
+        id: chartId,
         data: data,
         layout: isHorizontalBars ? "vertical" : "horizontal",
         margin: {
@@ -231,6 +235,7 @@ var CartesianChart = /*#__PURE__*/React.forwardRef(function CartesianChart(_ref2
           })
         }), categories.map(function (category, i) {
           return renderSeries(kind, {
+            id: "".concat(chartId, "-").concat(i),
             category: category,
             color: series[i],
             curve: curve,

package/dist/esm/components/charts/DonutChart.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, PieChart, Tooltip, Pie } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
-import { useChartTheme, useReducedMotion, defaultValueFormatter } from './chartTheme.js';
+import { useChartTheme, useReducedMotion, useChartId, defaultValueFormatter } from './chartTheme.js';
 
 var _excluded = ["data", "index", "category", "colors", "valueFormatter", "variant", "innerRadius", "outerRadius", "centerLabel", "height", "showLegend", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -46,6 +46,7 @@ var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     chrome = _useChartTheme.chrome,
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
   var slices = rows.map(function (row, i) {
     return _objectSpread2(_objectSpread2({}, row), {}, {
       fill: series[i]
@@ -87,6 +88,7 @@ var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         height: "100%",
         minWidth: 0,
         children: jsxs(PieChart, {
+          id: chartId,
           accessibilityLayer: false,
           children: [showTooltip && jsx(Tooltip, {
             isAnimationActive: false,
@@ -95,6 +97,7 @@ var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               hideLabel: true
             })
           }), jsx(Pie, {
+            id: "".concat(chartId, "-0"),
             data: slices,
             dataKey: category,
             nameKey: index,

package/dist/esm/components/charts/Sparkline.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, AreaChart, LineChart, YAxis, Tooltip, Area, Line } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
-import { useChartTheme, useReducedMotion, defaultValueFormatter } from './chartTheme.js';
+import { useChartTheme, useReducedMotion, useChartId, defaultValueFormatter } from './chartTheme.js';
 
 var _excluded = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 /** A word-sized trend line: no axes, grid or legend — just the shape of the data. */
@@ -36,9 +36,11 @@ var Sparkline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useChartTheme = useChartTheme([category], [color]),
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
   var stroke = series[0];
   var Root = type === "area" ? AreaChart : LineChart;
   var common = {
+    id: "".concat(chartId, "-0"),
     dataKey: category,
     name: category,
     type: "monotone",
@@ -79,6 +81,7 @@ var Sparkline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       height: "100%",
       minWidth: 0,
       children: jsxs(Root, {
+        id: chartId,
         data: data,
         margin: {
           top: 2,