@tensor_1/react 2.10.0 → 2.12.0

package/README.md

@@ -7,7 +7,7 @@ Thin React wrappers over the UIx v2 CSS component library — every component is
 ```sh
 npm i @tensor_1/react @tensor_1/tokens
 ```
-Peer deps: `react` / `react-dom` (`^18` or `^19`).
+Peer deps: `react` / `react-dom` (`^18` or `^19`). Install `echarts` only when using a chart entry.
 
 ## Use
 
@@ -31,4 +31,13 @@ Charts (ECharts) live behind a separate entry so they stay out of the main bundl
 import { Chart } from "@tensor_1/react/chart";
 ```
 
+For common line, bar, and pie charts, the tree-shaken preset avoids shipping the complete ECharts build:
+
+```tsx
+import { Chart } from "@tensor_1/react/chart/preset";
+```
+
+Large fixed-height tables can use `useVirtualRows(rows, { rowHeight })`; attach its `containerRef` to
+`TableWrap` and render the returned row window between spacer rows.
+
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.

package/dist/ChartCore-Bt1C84ty.d.cts

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactNode } from 'react';
+import { EChartsOption, ECharts } from 'echarts';
+
+declare function uixChartPalette(): string[];
+interface ChartTableRow {
+    [key: string]: string | number;
+}
+interface ChartProps {
+    option: EChartsOption;
+    title?: string;
+    subtitle?: string;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    tableData?: ChartTableRow[];
+    tableHeaders?: string[];
+    onReady?: (chart: ECharts) => void;
+    header?: ReactNode;
+}
+
+export { type ChartProps as C, type ChartTableRow as a, uixChartPalette as u };

package/dist/chart-preset.cjs

@@ -0,0 +1,168 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/chart-preset.tsx
+var chart_preset_exports = {};
+__export(chart_preset_exports, {
+  Chart: () => Chart,
+  uixChartPalette: () => uixChartPalette
+});
+module.exports = __toCommonJS(chart_preset_exports);
+var echarts = __toESM(require("echarts/core"), 1);
+var import_charts = require("echarts/charts");
+var import_components = require("echarts/components");
+var import_renderers = require("echarts/renderers");
+
+// src/components/ChartCore.tsx
+var import_react = require("react");
+
+// src/cx.ts
+function cx(...args) {
+  return args.filter(Boolean).join(" ");
+}
+
+// src/components/ChartCore.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function readToken(name) {
+  if (typeof getComputedStyle === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function uixChartPalette() {
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
+}
+function ChartCore({
+  engine,
+  option,
+  title,
+  subtitle,
+  height = 280,
+  className,
+  style,
+  ariaLabel,
+  tableData,
+  tableHeaders,
+  onReady,
+  header
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  const appliedOptionRef = (0, import_react.useRef)(null);
+  const latestOptionRef = (0, import_react.useRef)(option);
+  const onReadyRef = (0, import_react.useRef)(onReady);
+  const tableId = (0, import_react.useId)();
+  latestOptionRef.current = option;
+  onReadyRef.current = onReady;
+  (0, import_react.useEffect)(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const chart = engine.init(element, null, { renderer: "svg" });
+    chartRef.current = chart;
+    chart.setOption(latestOptionRef.current);
+    appliedOptionRef.current = latestOptionRef.current;
+    onReadyRef.current?.(chart);
+    let frame = 0;
+    let width = element.clientWidth;
+    let height2 = element.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      const nextHeight = element.clientHeight;
+      if (nextWidth === width && nextHeight === height2) return;
+      width = nextWidth;
+      height2 = nextHeight;
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        chart.resize();
+      });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+      chart.dispose();
+      chartRef.current = null;
+      appliedOptionRef.current = null;
+    };
+  }, [engine]);
+  (0, import_react.useEffect)(() => {
+    const chart = chartRef.current;
+    if (!chart || appliedOptionRef.current === option) return;
+    chart.setOption(option, { notMerge: false });
+    appliedOptionRef.current = option;
+  }, [option]);
+  const heightValue = typeof height === "number" ? `${height}px` : height;
+  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const hasTable = Boolean(tableData?.length && tableHeaders?.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
+    title != null || subtitle != null || header != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      header,
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        style: { height: heightValue },
+        role: "img",
+        "aria-label": effectiveAriaLabel,
+        "aria-describedby": hasTable ? tableId : void 0
+      }
+    ),
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
+    ] }) : null
+  ] });
+}
+
+// src/chart-preset.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+echarts.use([
+  import_charts.BarChart,
+  import_charts.LineChart,
+  import_charts.PieChart,
+  import_components.DatasetComponent,
+  import_components.GridComponent,
+  import_components.LegendComponent,
+  import_components.TitleComponent,
+  import_components.TooltipComponent,
+  import_components.TransformComponent,
+  import_renderers.SVGRenderer
+]);
+var presetEngine = echarts;
+function Chart(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartCore, { ...props, engine: presetEngine });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chart,
+  uixChartPalette
+});

package/dist/chart-preset.d.cts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { C as ChartProps } from './ChartCore-Bt1C84ty.cjs';
+export { a as ChartTableRow, u as uixChartPalette } from './ChartCore-Bt1C84ty.cjs';
+import 'echarts';
+
+/** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */
+declare function Chart(props: ChartProps): react.JSX.Element;
+
+export { Chart, ChartProps };

package/dist/chart-preset.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ChartProps } from './components/ChartCore.js';
+export { ChartTableRow, uixChartPalette } from './components/ChartCore.js';
+import 'echarts';
+
+/** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */
+declare function Chart(props: ChartProps): react.JSX.Element;
+
+export { Chart, ChartProps };

package/dist/chart-preset.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as echarts from "echarts/core";
+import { BarChart, LineChart, PieChart } from "echarts/charts";
+import {
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent
+} from "echarts/components";
+import { SVGRenderer } from "echarts/renderers";
+import { ChartCore } from "./components/ChartCore.js";
+echarts.use([
+  BarChart,
+  LineChart,
+  PieChart,
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  TransformComponent,
+  SVGRenderer
+]);
+const presetEngine = echarts;
+function Chart(props) {
+  return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: presetEngine });
+}
+import { uixChartPalette } from "./components/ChartCore.js";
+export {
+  Chart,
+  uixChartPalette
+};

package/dist/chart.cjs

@@ -36,15 +36,17 @@ __export(chart_exports, {
 module.exports = __toCommonJS(chart_exports);
 
 // src/components/Chart.tsx
-var import_react = require("react");
 var echarts = __toESM(require("echarts"), 1);
 
+// src/components/ChartCore.tsx
+var import_react = require("react");
+
 // src/cx.ts
 function cx(...args) {
   return args.filter(Boolean).join(" ");
 }
 
-// src/components/Chart.tsx
+// src/components/ChartCore.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function readToken(name) {
   if (typeof getComputedStyle === "undefined") return "";
@@ -53,13 +55,8 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
-function motionSafe(option) {
-  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
-    return { ...option, animation: false };
-  }
-  return option;
-}
-function Chart({
+function ChartCore({
+  engine,
   option,
   title,
   subtitle,
@@ -74,61 +71,81 @@ function Chart({
 }) {
   const containerRef = (0, import_react.useRef)(null);
   const chartRef = (0, import_react.useRef)(null);
+  const appliedOptionRef = (0, import_react.useRef)(null);
+  const latestOptionRef = (0, import_react.useRef)(option);
+  const onReadyRef = (0, import_react.useRef)(onReady);
   const tableId = (0, import_react.useId)();
+  latestOptionRef.current = option;
+  onReadyRef.current = onReady;
   (0, import_react.useEffect)(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const chart = echarts.init(el, null, { renderer: "svg" });
+    const element = containerRef.current;
+    if (!element) return;
+    const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(motionSafe(option));
-    onReady?.(chart);
-    if (!ariaLabel && !title && !(tableData && tableData.length > 0)) {
-      console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
-    }
-    const ro = new ResizeObserver(() => chart.resize());
-    ro.observe(el);
+    chart.setOption(latestOptionRef.current);
+    appliedOptionRef.current = latestOptionRef.current;
+    onReadyRef.current?.(chart);
+    let frame = 0;
+    let width = element.clientWidth;
+    let height2 = element.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      const nextHeight = element.clientHeight;
+      if (nextWidth === width && nextHeight === height2) return;
+      width = nextWidth;
+      height2 = nextHeight;
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        chart.resize();
+      });
+    });
+    observer.observe(element);
     return () => {
-      ro.disconnect();
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
       chart.dispose();
       chartRef.current = null;
+      appliedOptionRef.current = null;
     };
-  }, []);
+  }, [engine]);
   (0, import_react.useEffect)(() => {
-    chartRef.current?.setOption(motionSafe(option), { notMerge: false });
+    const chart = chartRef.current;
+    if (!chart || appliedOptionRef.current === option) return;
+    chart.setOption(option, { notMerge: false });
+    appliedOptionRef.current = option;
   }, [option]);
-  const heightVal = typeof height === "number" ? `${height}px` : height;
+  const heightValue = typeof height === "number" ? `${height}px` : height;
   const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
-  const hasTable = tableData && tableData.length > 0 && tableHeaders && tableHeaders.length > 0;
+  const hasTable = Boolean(tableData?.length && tableHeaders?.length);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
-    (title != null || subtitle != null || header != null) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    title != null || subtitle != null || header != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
       header,
-      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle })
-    ] }),
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: containerRef,
-        style: { height: heightVal },
+        style: { height: heightValue },
         role: "img",
         "aria-label": effectiveAriaLabel,
         "aria-describedby": hasTable ? tableId : void 0
       }
     ),
-    hasTable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "table",
-      {
-        id: tableId,
-        className: "uix-visually-hidden",
-        "aria-label": `${effectiveAriaLabel} \u2014 data table`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: h }, h)) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[h] }, h)) }, i)) })
-        ]
-      }
-    )
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
+    ] }) : null
   ] });
 }
+
+// src/components/Chart.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Chart(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartCore, { ...props, engine: echarts });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Chart,

package/dist/chart.d.cts

@@ -1,24 +1,9 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode } from 'react';
-import { EChartsOption, ECharts } from 'echarts';
+import { C as ChartProps } from './ChartCore-Bt1C84ty.cjs';
+export { a as ChartTableRow, u as uixChartPalette } from './ChartCore-Bt1C84ty.cjs';
+import 'echarts';
 
-declare function uixChartPalette(): string[];
-interface ChartTableRow {
-    [key: string]: string | number;
-}
-interface ChartProps {
-    option: EChartsOption;
-    title?: string;
-    subtitle?: string;
-    height?: string | number;
-    className?: string;
-    style?: CSSProperties;
-    ariaLabel?: string;
-    tableData?: ChartTableRow[];
-    tableHeaders?: string[];
-    onReady?: (chart: ECharts) => void;
-    header?: ReactNode;
-}
-declare function Chart({ option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartProps): react.JSX.Element;
+/** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */
+declare function Chart(props: ChartProps): react.JSX.Element;
 
-export { Chart, type ChartProps, type ChartTableRow, uixChartPalette };
+export { Chart, ChartProps };

package/dist/chart.d.ts

@@ -1,3 +1,4 @@
-export { Chart, ChartProps, ChartTableRow, uixChartPalette } from './components/Chart.js';
+export { Chart } from './components/Chart.js';
+export { ChartProps, ChartTableRow, uixChartPalette } from './components/ChartCore.js';
 import 'react';
 import 'echarts';

package/dist/components/Alert.js

@@ -1,21 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Alert({ tone, title, icon, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className),
-      role: tone === "danger" || tone === "warning" ? "alert" : "status",
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx("div", { className: "uix-alert__icon", children: icon }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          title && /* @__PURE__ */ jsx("div", { className: "uix-alert__title", children: title }),
-          children && /* @__PURE__ */ jsx("div", { className: "uix-alert__body", children })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "uix-alert__icon", children: icon }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      title && /* @__PURE__ */ jsx("div", { className: "uix-alert__title", children: title }),
+      children && /* @__PURE__ */ jsx("div", { className: "uix-alert__body", children })
+    ] })
+  ] });
 }
 export {
   Alert

package/dist/components/AppShell.d.ts

@@ -17,12 +17,10 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     onExitFocus?: () => void;
     /** Drop the content gutter so a genuinely wide table runs edge-to-edge. */
     mainBleed?: boolean;
-    /** id given to `<main>` and targeted by the skip link. Override on collision (UIX-A11Y-2). */
-    mainId?: string;
     sidebar?: ReactNode;
     topbar?: ReactNode;
     children?: ReactNode;
 }
-declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
+declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
 
 export { AppShell, type AppShellProps, type ShellNav };

package/dist/components/AppShell.js

@@ -8,7 +8,6 @@ function AppShell({
   focus,
   onExitFocus,
   mainBleed,
-  mainId = "uix-main",
   sidebar,
   topbar,
   children,
@@ -33,10 +32,9 @@ function AppShell({
       "data-focus": focus || void 0,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("a", { className: "uix-skiplink", href: `#${mainId}`, children: "Skip to content" }),
         sidebar && /* @__PURE__ */ jsx("div", { className: "uix-shell__sidebar", children: sidebar }),
         topbar && /* @__PURE__ */ jsx("div", { className: "uix-shell__topbar", children: topbar }),
-        /* @__PURE__ */ jsx("main", { id: mainId, tabIndex: -1, className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
+        /* @__PURE__ */ jsx("main", { className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
         focus && onExitFocus && /* @__PURE__ */ jsx("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: "Esc \xB7 Exit focus" }) })
       ]
     }

package/dist/components/Avatar.js

@@ -3,8 +3,7 @@ import { cx } from "../cx.js";
 function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
   return /* @__PURE__ */ jsxs("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
     src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status", "aria-hidden": "true" }),
-    status && /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "online" })
+    status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status" })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {

package/dist/components/Button.js

@@ -1,40 +1,24 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cx } from "../cx.js";
-let warnedIconButton = false;
 const Button = forwardRef(
-  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, onClick, ...props }, ref) => {
-    if (!warnedIconButton && icon && children == null && !props["aria-label"] && !props["aria-labelledby"] && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
-      warnedIconButton = true;
-      console.warn("uix: icon-only <Button> has no accessible name \u2014 pass aria-label or aria-labelledby.");
+  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: cx(
+        "uix-btn",
+        `uix-btn--${variant}`,
+        size !== "md" && `uix-btn--${size}`,
+        icon && "uix-btn--icon",
+        className
+      ),
+      disabled: disabled || loading,
+      "data-loading": loading || void 0,
+      ...props,
+      children
     }
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        className: cx(
-          "uix-btn",
-          `uix-btn--${variant}`,
-          size !== "md" && `uix-btn--${size}`,
-          icon && "uix-btn--icon",
-          className
-        ),
-        disabled,
-        "aria-disabled": loading || void 0,
-        "aria-busy": loading || void 0,
-        "data-loading": loading || void 0,
-        onClick: loading || onClick ? (e) => {
-          if (loading) {
-            e.preventDefault();
-            return;
-          }
-          onClick?.(e);
-        } : void 0,
-        ...props,
-        children
-      }
-    );
-  }
+  )
 );
 Button.displayName = "Button";
 function ButtonGroup({ children, className }) {

package/dist/components/Card.d.ts

@@ -3,13 +3,11 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
-    /** Element for the title — pick a real heading to slot the card into the page outline (UIX-A11Y-4). Default `div` keeps legacy rendering. */
-    titleAs?: 'h2' | 'h3' | 'h4' | 'div';
     subtitle?: ReactNode;
     headerAction?: ReactNode;
     footer?: ReactNode;
     children?: ReactNode;
 }
-declare function Card({ title, titleAs: TitleTag, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+declare function Card({ title, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
 
 export { Card, type CardProps };

package/dist/components/Card.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Card({ title, titleAs: TitleTag = "div", subtitle, headerAction, footer, children, className, ...props }) {
+function Card({ title, subtitle, headerAction, footer, children, className, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-card", className), ...props, children: [
     hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-        title && /* @__PURE__ */ jsx(TitleTag, { className: "uix-card__title", children: title }),
+        title && /* @__PURE__ */ jsx("div", { className: "uix-card__title", children: title }),
         subtitle && /* @__PURE__ */ jsx("div", { className: "uix-card__subtitle", children: subtitle })
       ] }),
       headerAction

package/dist/components/Chart.d.ts

@@ -1,24 +1,9 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode } from 'react';
-import { EChartsOption, ECharts } from 'echarts';
+import { ChartProps } from './ChartCore.js';
+export { ChartTableRow, uixChartPalette } from './ChartCore.js';
+import 'echarts';
 
-declare function uixChartPalette(): string[];
-interface ChartTableRow {
-    [key: string]: string | number;
-}
-interface ChartProps {
-    option: EChartsOption;
-    title?: string;
-    subtitle?: string;
-    height?: string | number;
-    className?: string;
-    style?: CSSProperties;
-    ariaLabel?: string;
-    tableData?: ChartTableRow[];
-    tableHeaders?: string[];
-    onReady?: (chart: ECharts) => void;
-    header?: ReactNode;
-}
-declare function Chart({ option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartProps): react.JSX.Element;
+/** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */
+declare function Chart(props: ChartProps): react.JSX.Element;
 
-export { Chart, type ChartProps, type ChartTableRow, uixChartPalette };
+export { Chart, ChartProps };