@tensor_1/react 2.31.0 → 2.32.0

package/dist/chart-theme.js

@@ -0,0 +1,99 @@
+function reader(source) {
+  if (typeof source === "function") return source;
+  if (typeof getComputedStyle === "undefined" || typeof document === "undefined") return () => "";
+  const style = getComputedStyle(source ?? document.documentElement);
+  return (token) => style.getPropertyValue(token).trim();
+}
+function uixChartTokens(source) {
+  const read = reader(source);
+  const t = (name) => read(`--uix-${name}`);
+  const unquote = (font) => font.replace(/"/g, "");
+  return {
+    palette: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => t(`chart-${i}`)),
+    neutral: t("chart-neutral"),
+    grid: t("chart-grid"),
+    axis: t("chart-axis"),
+    reference: t("chart-reference"),
+    zoneWarning: t("chart-zone-warning"),
+    zoneDanger: t("chart-zone-danger"),
+    forecastBand: t("chart-forecast-band"),
+    event: t("chart-event"),
+    partial: t("chart-partial"),
+    comparison: t("chart-comparison"),
+    surface: t("surface"),
+    text: t("text"),
+    textMuted: t("text-muted"),
+    border: t("border-strong"),
+    fontSans: unquote(t("font-sans")),
+    fontMono: unquote(t("font-mono"))
+  };
+}
+function uixChartTheme(source) {
+  const k = uixChartTokens(source);
+  const read = reader(source);
+  const axis = {
+    axisLine: { lineStyle: { color: k.axis } },
+    axisTick: { show: false },
+    axisLabel: { color: k.textMuted, fontFamily: k.fontMono, fontSize: 11 },
+    splitLine: { lineStyle: { color: k.grid, type: "solid", width: 1 } }
+  };
+  return {
+    color: k.palette,
+    backgroundColor: "transparent",
+    textStyle: { color: k.textMuted, fontFamily: k.fontSans, fontSize: 12 },
+    title: { textStyle: { color: k.text, fontFamily: k.fontSans }, subtextStyle: { color: k.textMuted, fontFamily: k.fontSans } },
+    legend: { textStyle: { color: k.textMuted, fontFamily: k.fontSans, fontSize: 12 }, icon: "roundRect", itemWidth: 10, itemHeight: 6, itemGap: 12 },
+    tooltip: {
+      backgroundColor: k.surface,
+      borderColor: k.border,
+      borderWidth: 1,
+      padding: [8, 10],
+      textStyle: { color: k.text, fontFamily: k.fontSans, fontSize: 12 },
+      extraCssText: `border-radius:${read("--uix-radius-sm")};box-shadow:${read("--uix-shadow-popover")}`,
+      axisPointer: { lineStyle: { color: k.reference, width: 1 }, crossStyle: { color: k.reference }, shadowStyle: { color: k.forecastBand } }
+    },
+    xAxis: axis,
+    yAxis: axis
+  };
+}
+function uixChartAreaGradient(color) {
+  const alpha = (opacity) => {
+    const hex = color.replace("#", "");
+    if (!/^[0-9a-f]{6}$/i.test(hex)) return color;
+    const [r, g, b] = hex.match(/.{2}/g).map((channel) => Number.parseInt(channel, 16));
+    return `rgba(${r},${g},${b},${opacity})`;
+  };
+  return {
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [{ offset: 0, color: alpha(0.28) }, { offset: 0.72, color: alpha(0.06) }, { offset: 1, color: alpha(0) }]
+  };
+}
+const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype;
+function deepMerge(base, over) {
+  if (over === void 0) return base;
+  if (!isPlainObject(base) || !isPlainObject(over)) return over;
+  const out = { ...base };
+  for (const key of Object.keys(over)) out[key] = deepMerge(base[key], over[key]);
+  return out;
+}
+const STYLED_ONLY = ["xAxis", "yAxis", "legend", "title"];
+function mergeChartTheme(theme, option) {
+  const merged = deepMerge(theme, option);
+  const source = option;
+  const base = theme;
+  for (const key of STYLED_ONLY) {
+    if (Array.isArray(source[key])) merged[key] = source[key].map((axis) => deepMerge(base[key], axis));
+    else if (!(key in source)) delete merged[key];
+  }
+  return merged;
+}
+export {
+  mergeChartTheme,
+  uixChartAreaGradient,
+  uixChartTheme,
+  uixChartTokens
+};

package/dist/chart.cjs

@@ -35,7 +35,11 @@ __export(chart_exports, {
   ChartLegendItem: () => ChartLegendItem,
   ChartMetric: () => ChartMetric,
   DEFAULT_CHART_LABELS: () => DEFAULT_CHART_LABELS,
-  uixChartPalette: () => uixChartPalette
+  mergeChartTheme: () => mergeChartTheme,
+  uixChartAreaGradient: () => uixChartAreaGradient,
+  uixChartPalette: () => uixChartPalette,
+  uixChartTheme: () => uixChartTheme,
+  uixChartTokens: () => uixChartTokens
 });
 module.exports = __toCommonJS(chart_exports);
 
@@ -50,6 +54,101 @@ function cx(...args) {
   return args.filter(Boolean).join(" ");
 }
 
+// src/chart-theme.ts
+function reader(source) {
+  if (typeof source === "function") return source;
+  if (typeof getComputedStyle === "undefined" || typeof document === "undefined") return () => "";
+  const style = getComputedStyle(source ?? document.documentElement);
+  return (token) => style.getPropertyValue(token).trim();
+}
+function uixChartTokens(source) {
+  const read = reader(source);
+  const t = (name) => read(`--uix-${name}`);
+  const unquote = (font) => font.replace(/"/g, "");
+  return {
+    palette: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => t(`chart-${i}`)),
+    neutral: t("chart-neutral"),
+    grid: t("chart-grid"),
+    axis: t("chart-axis"),
+    reference: t("chart-reference"),
+    zoneWarning: t("chart-zone-warning"),
+    zoneDanger: t("chart-zone-danger"),
+    forecastBand: t("chart-forecast-band"),
+    event: t("chart-event"),
+    partial: t("chart-partial"),
+    comparison: t("chart-comparison"),
+    surface: t("surface"),
+    text: t("text"),
+    textMuted: t("text-muted"),
+    border: t("border-strong"),
+    fontSans: unquote(t("font-sans")),
+    fontMono: unquote(t("font-mono"))
+  };
+}
+function uixChartTheme(source) {
+  const k = uixChartTokens(source);
+  const read = reader(source);
+  const axis = {
+    axisLine: { lineStyle: { color: k.axis } },
+    axisTick: { show: false },
+    axisLabel: { color: k.textMuted, fontFamily: k.fontMono, fontSize: 11 },
+    splitLine: { lineStyle: { color: k.grid, type: "solid", width: 1 } }
+  };
+  return {
+    color: k.palette,
+    backgroundColor: "transparent",
+    textStyle: { color: k.textMuted, fontFamily: k.fontSans, fontSize: 12 },
+    title: { textStyle: { color: k.text, fontFamily: k.fontSans }, subtextStyle: { color: k.textMuted, fontFamily: k.fontSans } },
+    legend: { textStyle: { color: k.textMuted, fontFamily: k.fontSans, fontSize: 12 }, icon: "roundRect", itemWidth: 10, itemHeight: 6, itemGap: 12 },
+    tooltip: {
+      backgroundColor: k.surface,
+      borderColor: k.border,
+      borderWidth: 1,
+      padding: [8, 10],
+      textStyle: { color: k.text, fontFamily: k.fontSans, fontSize: 12 },
+      extraCssText: `border-radius:${read("--uix-radius-sm")};box-shadow:${read("--uix-shadow-popover")}`,
+      axisPointer: { lineStyle: { color: k.reference, width: 1 }, crossStyle: { color: k.reference }, shadowStyle: { color: k.forecastBand } }
+    },
+    xAxis: axis,
+    yAxis: axis
+  };
+}
+function uixChartAreaGradient(color) {
+  const alpha = (opacity) => {
+    const hex = color.replace("#", "");
+    if (!/^[0-9a-f]{6}$/i.test(hex)) return color;
+    const [r, g, b] = hex.match(/.{2}/g).map((channel) => Number.parseInt(channel, 16));
+    return `rgba(${r},${g},${b},${opacity})`;
+  };
+  return {
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [{ offset: 0, color: alpha(0.28) }, { offset: 0.72, color: alpha(0.06) }, { offset: 1, color: alpha(0) }]
+  };
+}
+var isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype;
+function deepMerge(base, over) {
+  if (over === void 0) return base;
+  if (!isPlainObject(base) || !isPlainObject(over)) return over;
+  const out = { ...base };
+  for (const key of Object.keys(over)) out[key] = deepMerge(base[key], over[key]);
+  return out;
+}
+var STYLED_ONLY = ["xAxis", "yAxis", "legend", "title"];
+function mergeChartTheme(theme, option) {
+  const merged = deepMerge(theme, option);
+  const source = option;
+  const base = theme;
+  for (const key of STYLED_ONLY) {
+    if (Array.isArray(source[key])) merged[key] = source[key].map((axis) => deepMerge(base[key], axis));
+    else if (!(key in source)) delete merged[key];
+  }
+  return merged;
+}
+
 // src/components/ChartCore.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function readToken(name) {
@@ -59,6 +158,9 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
+function themed(option, theme, element) {
+  return theme === "none" ? option : mergeChartTheme(uixChartTheme(element), option);
+}
 function motionSafe(option) {
   if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
     return { ...option, animation: false };
@@ -87,7 +189,8 @@ function ChartCore({
   footer,
   loading = false,
   empty,
-  labels: labelOverrides
+  labels: labelOverrides,
+  theme = "uix"
 }) {
   const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
   const containerRef = (0, import_react.useRef)(null);
@@ -99,7 +202,9 @@ function ChartCore({
   const hasEmpty = empty != null;
   const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length);
   const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
+  const themeRef = (0, import_react.useRef)(theme);
   latestOptionRef.current = option;
+  themeRef.current = theme;
   onReadyRef.current = onReady;
   hasTextAlternativeRef.current = hasTextAlternative;
   (0, import_react.useEffect)(() => {
@@ -107,9 +212,17 @@ function ChartCore({
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(motionSafe(latestOptionRef.current));
+    chart.setOption(motionSafe(themed(latestOptionRef.current, themeRef.current, element)));
     appliedOptionRef.current = latestOptionRef.current;
     onReadyRef.current?.(chart);
+    const retheme = () => {
+      if (themeRef.current === "none") return;
+      chart.setOption(motionSafe(themed(latestOptionRef.current, themeRef.current, element)));
+    };
+    const themeObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(retheme);
+    themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
+    const scheme = typeof matchMedia === "undefined" ? null : matchMedia("(prefers-color-scheme: dark)");
+    scheme?.addEventListener?.("change", retheme);
     if (!hasTextAlternativeRef.current) {
       console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
     }
@@ -131,6 +244,8 @@ function ChartCore({
     observer.observe(element);
     return () => {
       observer.disconnect();
+      themeObserver?.disconnect();
+      scheme?.removeEventListener?.("change", retheme);
       if (frame) cancelAnimationFrame(frame);
       chart.dispose();
       chartRef.current = null;
@@ -139,10 +254,11 @@ function ChartCore({
   }, [engine, hasEmpty]);
   (0, import_react.useEffect)(() => {
     const chart = chartRef.current;
-    if (!chart || appliedOptionRef.current === option) return;
-    chart.setOption(motionSafe(option), { notMerge: false });
+    const element = containerRef.current;
+    if (!chart || !element || appliedOptionRef.current === option) return;
+    chart.setOption(motionSafe(themed(option, theme, element)), { notMerge: false });
     appliedOptionRef.current = option;
-  }, [option]);
+  }, [option, theme]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
   const effectiveAriaLabel = ariaLabel ?? title ?? labels.chart;
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);
@@ -205,5 +321,9 @@ function Chart(props) {
   ChartLegendItem,
   ChartMetric,
   DEFAULT_CHART_LABELS,
-  uixChartPalette
+  mergeChartTheme,
+  uixChartAreaGradient,
+  uixChartPalette,
+  uixChartTheme,
+  uixChartTokens
 });

package/dist/chart.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { C as ChartProps } from './ChartCore-DzWe10bN.cjs';
-export { a as ChartLabels, b as ChartLegend, c as ChartLegendItem, d as ChartLegendItemProps, e as ChartLegendProps, f as ChartMetric, g as ChartMetricProps, h as ChartTableRow, D as DEFAULT_CHART_LABELS, u as uixChartPalette } from './ChartCore-DzWe10bN.cjs';
+import { C as ChartProps } from './chart-theme-Cl0IrkKQ.cjs';
+export { a as ChartLabels, b as ChartLegend, c as ChartLegendItem, d as ChartLegendItemProps, e as ChartLegendProps, f as ChartMetric, g as ChartMetricProps, h as ChartTableRow, i as ChartTokenSource, D as DEFAULT_CHART_LABELS, U as UixChartTokens, m as mergeChartTheme, u as uixChartAreaGradient, j as uixChartPalette, k as uixChartTheme, l as uixChartTokens } from './chart-theme-Cl0IrkKQ.cjs';
 import 'echarts';
 
 /** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */

package/dist/chart.d.ts

@@ -1,4 +1,5 @@
 export { Chart } from './components/Chart.js';
 export { ChartLabels, ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartProps, ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette } from './components/ChartCore.js';
+export { ChartTokenSource, UixChartTokens, mergeChartTheme, uixChartAreaGradient, uixChartTheme, uixChartTokens } from './chart-theme.js';
 import 'react';
 import 'echarts';

package/dist/chart.js

@@ -1,9 +1,13 @@
-import { Chart, ChartLegend, ChartLegendItem, ChartMetric, DEFAULT_CHART_LABELS, uixChartPalette } from "./components/Chart.js";
+import { Chart, ChartLegend, ChartLegendItem, ChartMetric, DEFAULT_CHART_LABELS, mergeChartTheme, uixChartAreaGradient, uixChartPalette, uixChartTheme, uixChartTokens } from "./components/Chart.js";
 export {
   Chart,
   ChartLegend,
   ChartLegendItem,
   ChartMetric,
   DEFAULT_CHART_LABELS,
-  uixChartPalette
+  mergeChartTheme,
+  uixChartAreaGradient,
+  uixChartPalette,
+  uixChartTheme,
+  uixChartTokens
 };

package/dist/components/Alert.d.ts

@@ -7,7 +7,23 @@ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     icon?: ReactNode;
     children?: ReactNode;
+    /**
+     * A trailing slot for what the alert offers to do: a `Button`, a link (HAR-1614). It keeps
+     * its place at the end while the text beside it wraps.
+     */
+    actions?: ReactNode;
+    /**
+     * Adds a × at the end. The alert does not hide itself: stop rendering it in the handler, and
+     * move focus somewhere sensible if the alert held it.
+     */
+    onDismiss?: () => void;
+    /** Accessible name of the ×. Default: `UixLabelsProvider` `alert.dismiss`, then "Dismiss". */
+    dismissLabel?: string;
 }
-declare function Alert({ tone, title, icon, children, className, ...props }: AlertProps): react.JSX.Element;
+/**
+ * Inline banner over `.uix-alert`. The ref is the alert element, so a form can move focus to
+ * its error message (give it `tabIndex={-1}`).
+ */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
 
 export { Alert, type AlertProps, type AlertTone };

package/dist/components/Alert.js

@@ -1,22 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { cx } from "../cx.js";
-function Alert({ tone, title, icon, children, className, ...props }) {
+import { AlertDismissButton } from "./AlertDismiss.js";
+const Alert = forwardRef(function Alert2({ tone, title, icon, children, actions, onDismiss, dismissLabel, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref,
       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: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-alert__content", children: [
           title && /* @__PURE__ */ jsx("div", { className: "uix-alert__title", children: title }),
           children && /* @__PURE__ */ jsx("div", { className: "uix-alert__body", children })
-        ] })
+        ] }),
+        actions != null && /* @__PURE__ */ jsx("div", { className: "uix-alert__actions", children: actions }),
+        onDismiss && /* @__PURE__ */ jsx(AlertDismissButton, { label: dismissLabel, onDismiss })
       ]
     }
   );
-}
+});
 export {
   Alert
 };

package/dist/components/AlertDismiss.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+
+interface AlertDismissButtonProps {
+    /** The alert's `dismissLabel`, when one was passed. */
+    label?: string;
+    onDismiss: () => void;
+}
+/**
+ * The × of a dismissible `Alert`. Internal. Its own client component so its name can come from
+ * `UixLabelsProvider` (`alert.dismiss`) while `Alert` itself stays server-renderable (HAR-1614).
+ */
+declare function AlertDismissButton({ label, onDismiss }: AlertDismissButtonProps): react.JSX.Element;
+
+export { AlertDismissButton };

package/dist/components/AlertDismiss.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { XIcon } from "../icons/components.js";
+import { useUixLabels } from "../labels-context.js";
+function AlertDismissButton({ label, onDismiss }) {
+  const provided = useUixLabels().alert?.dismiss;
+  return /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--xs uix-btn--icon uix-alert__dismiss", "aria-label": label ?? provided ?? "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ jsx(XIcon, { size: "sm" }) });
+}
+export {
+  AlertDismissButton
+};

package/dist/components/Attachment.d.ts

@@ -1,16 +1,10 @@
 import * as react from 'react';
 import { LiHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { FileSizeFormatter } from '../file-model.js';
 import { UixRenderLink } from '../link.js';
+import { AttachmentLabels } from '../attachment-labels.js';
+export { DEFAULT_ATTACHMENT_LABELS } from '../attachment-labels.js';
 
-interface AttachmentLabels {
-    /** Remove button. `{name}`. */
-    remove: string;
-    /** Download link name when `download` is set. `{name}`. */
-    download: string;
-    loading: string;
-    forbidden: string;
-}
-declare const DEFAULT_ATTACHMENT_LABELS: AttachmentLabels;
 interface AttachmentProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'children'> {
     /** File name as the user should read it (decrypted, if the product stores it encrypted). */
     name: string;
@@ -37,13 +31,22 @@ interface AttachmentProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'childre
     /** Extra actions at the end of the row. */
     actions?: ReactNode;
     locale?: string;
+    /** Count sizes in 1024s (1 MB = 1,048,576 bytes) instead of 1000s. Default `1000`. */
+    sizeBase?: 1000 | 1024;
+    /** The product's own size formatter; it replaces `formatFileSize` (and `sizeBase`). */
+    formatSize?: FileSizeFormatter;
+    /**
+     * Words for this row. Each one defaults to `UixLabelsProvider` `attachment`, then to English,
+     * so one provider translates every row below it (HAR-1630).
+     */
     labels?: Partial<AttachmentLabels>;
 }
 /**
  * One file row (HAR-985; TENSOR C15/B12 `attachments-panel-view.tsx`, MEDx S19/S52): glyph or
- * thumbnail, the name as a link, size and meta, a state slot, and remove. Server-renderable.
+ * thumbnail, the name as a link, size and meta, a state slot, and remove. Server-renderable:
+ * the words that come from `UixLabelsProvider` are rendered by small client parts.
  */
-declare function Attachment({ name, size, type, href, download, renderLink, meta, state, thumbnail, onRemove, status, error, actions, locale, labels: labelOverrides, className, ...props }: AttachmentProps): react.JSX.Element;
+declare function Attachment({ name, size, type, href, download, renderLink, meta, state, thumbnail, onRemove, status, error, actions, locale, sizeBase, formatSize, labels, className, ...props }: AttachmentProps): react.JSX.Element;
 interface AttachmentListProps extends HTMLAttributes<HTMLUListElement> {
     /** Names the list, e.g. "Attachments (3)". */
     label?: string;
@@ -52,4 +55,4 @@ interface AttachmentListProps extends HTMLAttributes<HTMLUListElement> {
 /** A list of `Attachment` rows. */
 declare function AttachmentList({ label, className, children, ...props }: AttachmentListProps): react.JSX.Element;
 
-export { Attachment, type AttachmentLabels, AttachmentList, type AttachmentListProps, type AttachmentProps, DEFAULT_ATTACHMENT_LABELS };
+export { Attachment, AttachmentLabels, AttachmentList, type AttachmentListProps, type AttachmentProps };

package/dist/components/Attachment.js

@@ -1,16 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-import { fillLabel } from "../fill-label.js";
 import { formatFileSize } from "../file-model.js";
 import { renderUixLink } from "../link.js";
-import { Button } from "./Button.js";
+import { DEFAULT_ATTACHMENT_LABELS } from "../attachment-labels.js";
+import { AttachmentRemoveButton, AttachmentText } from "./AttachmentParts.js";
 import { FileIcon } from "./FileIcon.js";
-const DEFAULT_ATTACHMENT_LABELS = {
-  remove: "Remove {name}",
-  download: "Download {name}",
-  loading: "Loading\u2026",
-  forbidden: "You do not have access to this file."
-};
 function Attachment({
   name,
   size,
@@ -26,17 +20,23 @@ function Attachment({
   error,
   actions,
   locale,
-  labels: labelOverrides,
+  sizeBase,
+  formatSize,
+  labels,
   className,
   ...props
 }) {
-  const labels = { ...DEFAULT_ATTACHMENT_LABELS, ...labelOverrides };
   const linked = href != null && status !== "loading" && status !== "forbidden";
   const nameNode = linked ? renderUixLink(renderLink, {
     href,
     className: "uix-attachment__name",
-    children: name,
-    ...download ? { download: typeof download === "string" ? download : "", "aria-label": fillLabel(labels.download, { name }) } : {}
+    // A download link is named "Download {name}": the visible name, plus the translated
+    // sentence for assistive technology in place of it.
+    children: download ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: name }),
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: /* @__PURE__ */ jsx(AttachmentText, { label: "download", override: labels?.download, name }) })
+    ] }) : name,
+    ...download ? { download: typeof download === "string" ? download : "" } : {}
   }) : /* @__PURE__ */ jsx("span", { className: "uix-attachment__name", children: name });
   return /* @__PURE__ */ jsxs("li", { className: cx("uix-attachment", className), "data-status": status === "ready" ? void 0 : status, "aria-busy": status === "loading" || void 0, ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "uix-attachment__icon", "aria-hidden": "true", children: thumbnail ?? /* @__PURE__ */ jsx(FileIcon, { name, type }) }),
@@ -46,16 +46,16 @@ function Attachment({
         state != null && /* @__PURE__ */ jsx("span", { className: "uix-attachment__state", children: state })
       ] }),
       /* @__PURE__ */ jsxs("span", { className: "uix-attachment__meta", children: [
-        size !== void 0 && /* @__PURE__ */ jsx("span", { className: "uix-attachment__size", children: formatFileSize(size, locale) }),
+        size !== void 0 && /* @__PURE__ */ jsx("span", { className: "uix-attachment__size", children: formatSize ? formatSize(size, locale) : formatFileSize(size, locale, { base: sizeBase }) }),
         meta != null && /* @__PURE__ */ jsx("span", { children: meta }),
-        status === "loading" && /* @__PURE__ */ jsx("span", { children: labels.loading }),
-        status === "forbidden" && /* @__PURE__ */ jsx("span", { children: labels.forbidden })
+        status === "loading" && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(AttachmentText, { label: "loading", override: labels?.loading, name }) }),
+        status === "forbidden" && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(AttachmentText, { label: "forbidden", override: labels?.forbidden, name }) })
       ] }),
       status === "error" && error != null && /* @__PURE__ */ jsx("span", { className: "uix-attachment__error", role: "alert", children: error })
     ] }),
     (actions != null || onRemove) && /* @__PURE__ */ jsxs("span", { className: "uix-attachment__actions", children: [
       actions,
-      onRemove && /* @__PURE__ */ jsx(Button, { type: "button", size: "xs", variant: "ghost", icon: true, "aria-label": fillLabel(labels.remove, { name }), onClick: onRemove, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" }) }) })
+      onRemove && /* @__PURE__ */ jsx(AttachmentRemoveButton, { override: labels?.remove, name, onRemove })
     ] })
   ] });
 }

package/dist/components/AttachmentParts.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { AttachmentLabels } from '../attachment-labels.js';
+
+interface AttachmentTextProps {
+    label: keyof AttachmentLabels;
+    /** The row's own `labels[label]`, when it was passed. */
+    override?: string;
+    name: string;
+}
+/**
+ * One translated string of an `Attachment` row. Internal. `Attachment` is server-renderable
+ * and so cannot read `UixLabelsProvider` itself; these small client parts do it for it
+ * (HAR-1630).
+ */
+declare function AttachmentText({ label, override, name }: AttachmentTextProps): react.JSX.Element;
+interface AttachmentRemoveButtonProps {
+    override?: string;
+    name: string;
+    onRemove: () => void;
+}
+/** The remove button of an `Attachment` row. Internal. */
+declare function AttachmentRemoveButton({ override, name, onRemove }: AttachmentRemoveButtonProps): react.JSX.Element;
+
+export { AttachmentRemoveButton, AttachmentText };

package/dist/components/AttachmentParts.js

@@ -0,0 +1,20 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { DEFAULT_ATTACHMENT_LABELS } from "../attachment-labels.js";
+import { Button } from "./Button.js";
+function useAttachmentLabel(key, override) {
+  const provided = useUixLabels().attachment?.[key];
+  return override ?? provided ?? DEFAULT_ATTACHMENT_LABELS[key];
+}
+function AttachmentText({ label, override, name }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: fillLabel(useAttachmentLabel(label, override), { name }) });
+}
+function AttachmentRemoveButton({ override, name, onRemove }) {
+  return /* @__PURE__ */ jsx(Button, { type: "button", size: "xs", variant: "ghost", icon: true, "aria-label": fillLabel(useAttachmentLabel("remove", override), { name }), onClick: onRemove, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" }) }) });
+}
+export {
+  AttachmentRemoveButton,
+  AttachmentText
+};

package/dist/components/Chart.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ChartProps } from './ChartCore.js';
 export { ChartLabels, ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette } from './ChartCore.js';
+export { ChartTokenSource, UixChartTokens, mergeChartTheme, uixChartAreaGradient, uixChartTheme, uixChartTokens } from '../chart-theme.js';
 import 'echarts';
 
 /** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */

package/dist/components/Chart.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import * as echarts from "echarts";
 import { ChartCore } from "./ChartCore.js";
 import { ChartLegend, ChartLegendItem, ChartMetric, DEFAULT_CHART_LABELS, uixChartPalette } from "./ChartCore.js";
+import { mergeChartTheme, uixChartAreaGradient, uixChartTheme, uixChartTokens } from "../chart-theme.js";
 function Chart(props) {
   return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: echarts });
 }
@@ -12,5 +13,9 @@ export {
   ChartLegendItem,
   ChartMetric,
   DEFAULT_CHART_LABELS,
-  uixChartPalette
+  mergeChartTheme,
+  uixChartAreaGradient,
+  uixChartPalette,
+  uixChartTheme,
+  uixChartTokens
 };

package/dist/components/ChartCore.d.ts

@@ -42,12 +42,17 @@ interface ChartProps {
     empty?: ReactNode;
     /** Translatable words; English defaults in {@link DEFAULT_CHART_LABELS}. */
     labels?: Partial<ChartLabels>;
+    /**
+     * `'uix'` (default) merges {@link uixChartTheme} under `option` — token palette, fonts, a solid hairline
+     * grid and the UIx tooltip — and re-applies it when the page theme changes. `'none'` renders `option` as is.
+     */
+    theme?: 'uix' | 'none';
 }
 interface ChartCoreProps extends ChartProps {
     engine: ChartEngine;
 }
 /** Shared chart lifecycle. Runtime adapters only choose the ECharts build. */
-declare function ChartCore({ engine, option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, headerAction, footer, loading, empty, labels: labelOverrides, }: ChartCoreProps): react.JSX.Element;
+declare function ChartCore({ engine, option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, headerAction, footer, loading, empty, labels: labelOverrides, theme, }: ChartCoreProps): react.JSX.Element;
 interface ChartMetricProps extends HTMLAttributes<HTMLDivElement> {
     value: ReactNode;
     label?: ReactNode;