@godxjp/ui 32.14.0 → 33.0.0

package/dist/components/charts/chart-summary.d.ts

@@ -3,7 +3,7 @@
  * alternative (WCAG 1.1.1). No JSX — filename pascal is intentionally NOT
  * exported, so this is not a catalog primitive.
  */
-import type { ChartDatum, ChartSeriesProp } from "../../props/components/charts.prop.js";
+import type { ChartDatum, ChartSeriesProp, HeatmapCategory, HeatmapDatum } from "../../props/components/charts.prop.js";
 type Formatter = Intl.NumberFormat;
 export type ChartSummary = {
     rows: string[];
@@ -39,4 +39,35 @@ export declare function trendRatios(data: ChartDatum[], valueKey: string): numbe
  * datum).
  */
 export declare function resolveEmphasizedIndex(index: number | undefined, length: number): number;
+/** Number of steps in the `--chart-heat-1..N` ramp. */
+export declare const HEAT_STEPS = 5;
+/** The lookup key of one heatmap cell. */
+export declare function heatmapCellKey(row: string | number, column: string | number): string;
+export type HeatmapModel = {
+    /** Finite values by cell key. A key that is absent is an EMPTY cell, never a zero. */
+    values: Map<string, number>;
+    /** Ramp step 1..HEAT_STEPS by cell key. */
+    steps: Map<string, number>;
+    /** 1-based rank of the top-N cells by cell key. */
+    ranks: Map<string, number>;
+    /** Scale domain: `min(0, smallest)` .. largest. */
+    min: number;
+    max: number;
+    /** Count of cells with a value inside the rows × columns matrix. */
+    present: number;
+    /** Count of matrix cells with no value. */
+    empty: number;
+    /** The highest cell, for the one-line summary. */
+    highest: {
+        row: HeatmapCategory;
+        column: HeatmapCategory;
+        value: number;
+    } | null;
+};
+/**
+ * Bin a heatmap's cells onto the sequential ramp. The domain starts at zero (or the smallest value,
+ * when that is negative) so the fill encodes MAGNITUDE — a heatmap of 900..1000 whose 900 painted
+ * as "empty-light" would read as a quiet hour. Cells outside `rows` × `columns` are ignored.
+ */
+export declare function buildHeatmapModel(rows: HeatmapCategory[], columns: HeatmapCategory[], data: HeatmapDatum[], topN?: number): HeatmapModel;
 export {};

package/dist/components/charts/chart-summary.js

@@ -40,11 +40,60 @@ function resolveEmphasizedIndex(index, length) {
   const resolved = index < 0 ? length + index : index;
   return resolved >= 0 && resolved < length ? resolved : -1;
 }
+const HEAT_STEPS = 5;
+function heatmapCellKey(row, column) {
+  return `${String(row)}\0${String(column)}`;
+}
+function buildHeatmapModel(rows, columns, data, topN) {
+  const rowByKey = new Map(rows.map((row) => [String(row.key), row]));
+  const columnByKey = new Map(columns.map((column) => [String(column.key), column]));
+  const values = /* @__PURE__ */ new Map();
+  const order = [];
+  for (const datum of data) {
+    const row = rowByKey.get(String(datum.row));
+    const column = columnByKey.get(String(datum.column));
+    if (!row || !column) continue;
+    if (typeof datum.value !== "number" || !Number.isFinite(datum.value)) continue;
+    const key = heatmapCellKey(row.key, column.key);
+    if (values.has(key)) continue;
+    values.set(key, datum.value);
+    order.push({ key, value: datum.value, row, column });
+  }
+  let min = 0;
+  let max = 0;
+  for (const { value } of order) {
+    if (value < min) min = value;
+    if (value > max) max = value;
+  }
+  const steps = /* @__PURE__ */ new Map();
+  for (const { key, value } of order) {
+    const ratio = max > min ? (value - min) / (max - min) : max > 0 ? 1 : 0;
+    steps.set(key, Math.min(HEAT_STEPS, Math.floor(ratio * HEAT_STEPS) + 1));
+  }
+  const ranked = [...order].sort((a, b) => b.value - a.value);
+  const ranks = /* @__PURE__ */ new Map();
+  const n = topN !== void 0 && Number.isInteger(topN) && topN > 0 ? topN : 0;
+  ranked.slice(0, n).forEach((cell, index) => ranks.set(cell.key, index + 1));
+  const top = ranked[0];
+  return {
+    values,
+    steps,
+    ranks,
+    min,
+    max,
+    present: order.length,
+    empty: rows.length * columns.length - order.length,
+    highest: top ? { row: top.row, column: top.column, value: top.value } : null
+  };
+}
 export {
+  HEAT_STEPS,
   buildCartesianSummary,
+  buildHeatmapModel,
   buildPieSummary,
   buildSeriesRows,
   buildTrendSummary,
+  heatmapCellKey,
   resolveEmphasizedIndex,
   trendRatios
 };

package/dist/components/charts/heatmap-chart.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { HeatmapChartProp } from "../../props/components/charts.prop.js";
+export type { HeatmapChartProp, HeatmapChartProp as HeatmapChartProps, HeatmapCategory, HeatmapDatum, } from "../../props/components/charts.prop.js";
+/**
+ * HeatmapChart — a **dependency-free** rows × columns matrix (weekday × hour revenue, order counts
+ * per slot). Cell fill steps through the sequential `--chart-heat-1..5` ramp.
+ *
+ * - **One structure for sight and for AT.** The matrix IS a native data table (`<th scope>` headers,
+ *   one cell per slot) with `role="grid"`, so the screen-reader text alternative is the same element
+ *   the eye reads — no second, drifting copy. Each cell carries its formatted value as text.
+ * - **Keyboard** — WAI-ARIA APG data grid: one tab stop (roving tabindex), arrows move between
+ *   cells (mirrored under RTL), Home/End go to the row's ends, Ctrl+Home/End to the first/last
+ *   cell. A focused or hovered cell shows ONE shared tooltip; Escape dismisses it.
+ * - **Never colour alone** — an empty cell is outlined (dashed) and reads "no data"; a zero is a
+ *   filled step-1 cell that reads "0"; a top-N cell wears a ring and reads "top N".
+ * - **Narrow screens** — the matrix never shrinks a cell below its `size` tier; it scrolls inside
+ *   its own box with the row header pinned, so the page never scrolls sideways.
+ */
+export declare function HeatmapChart({ rows, columns, data, label, showCaption, description, size, numberFormat, topN, showLegend, emptyMessage, className, id, ref, }: HeatmapChartProp): React.JSX.Element;

package/dist/components/charts/heatmap-chart.js

@@ -0,0 +1,293 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { Tooltip, TooltipAnchorContext, TooltipContent } from "../feedback/tooltip.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useChartNumberFormat } from "./chart-frame.js";
+import { HEAT_STEPS, buildHeatmapModel, heatmapCellKey } from "./chart-summary.js";
+const OPEN_DELAY = 200;
+const CLOSE_GRACE = 100;
+const RAMP = Array.from({ length: HEAT_STEPS }, (_, index) => index + 1);
+function HeatmapChart({
+  rows,
+  columns,
+  data,
+  label,
+  showCaption = true,
+  description,
+  size = "md",
+  numberFormat,
+  topN,
+  showLegend = true,
+  emptyMessage,
+  className,
+  id,
+  ref
+}) {
+  const { t } = useTranslation();
+  const fmt = useChartNumberFormat(numberFormat);
+  const countFmt = useChartNumberFormat();
+  const model = React.useMemo(
+    () => buildHeatmapModel(rows, columns, data, topN),
+    [rows, columns, data, topN]
+  );
+  const hasData = rows.length > 0 && columns.length > 0 && model.present > 0;
+  const reactId = React.useId();
+  const baseId = id ?? reactId;
+  const titleId = `${baseId}-title`;
+  const descId = `${baseId}-desc`;
+  const [active, setActive] = React.useState([0, 0]);
+  const activeRow = Math.min(active[0], Math.max(0, rows.length - 1));
+  const activeColumn = Math.min(active[1], Math.max(0, columns.length - 1));
+  const scrollRef = React.useRef(null);
+  const cellRefs = React.useRef(/* @__PURE__ */ new Map());
+  const anchorRef = React.useRef(null);
+  const timer = React.useRef(void 0);
+  const [tip, setTip] = React.useState(null);
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  const showTip = (r, c, node, delay) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      anchorRef.current = node;
+      setTip([r, c]);
+    }, delay);
+  };
+  const hideTip = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setTip(null), CLOSE_GRACE);
+  };
+  React.useEffect(() => {
+    if (!tip) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        clearTimeout(timer.current);
+        setTip(null);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [tip]);
+  const reveal = (cell) => {
+    const scroller = scrollRef.current;
+    const header = cell.parentElement?.querySelector("th");
+    if (!scroller || !header) return;
+    const cellBox = cell.getBoundingClientRect();
+    const headerBox = header.getBoundingClientRect();
+    if (getComputedStyle(scroller).direction === "rtl") {
+      if (cellBox.right > headerBox.left) scroller.scrollLeft += cellBox.right - headerBox.left;
+    } else if (cellBox.left < headerBox.right) {
+      scroller.scrollLeft -= headerBox.right - cellBox.left;
+    }
+  };
+  const moveTo = (r, c) => {
+    const row = Math.max(0, Math.min(rows.length - 1, r));
+    const column = Math.max(0, Math.min(columns.length - 1, c));
+    setActive([row, column]);
+    const cell = cellRefs.current.get(`${row}:${column}`);
+    if (cell) {
+      cell.focus();
+      reveal(cell);
+    }
+  };
+  const onGridKeyDown = (event) => {
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    const lastRow = rows.length - 1;
+    const lastColumn = columns.length - 1;
+    const ctrl = event.ctrlKey || event.metaKey;
+    switch (event.key) {
+      case "ArrowRight":
+        moveTo(activeRow, activeColumn + (rtl ? -1 : 1));
+        break;
+      case "ArrowLeft":
+        moveTo(activeRow, activeColumn + (rtl ? 1 : -1));
+        break;
+      case "ArrowDown":
+        moveTo(activeRow + 1, activeColumn);
+        break;
+      case "ArrowUp":
+        moveTo(activeRow - 1, activeColumn);
+        break;
+      case "Home":
+        moveTo(ctrl ? 0 : activeRow, 0);
+        break;
+      case "End":
+        moveTo(ctrl ? lastRow : activeRow, lastColumn);
+        break;
+      case "Escape":
+        clearTimeout(timer.current);
+        setTip(null);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const cellText = (r, c) => {
+    const key = heatmapCellKey(rows[r].key, columns[c].key);
+    const value = model.values.get(key);
+    const rank = model.ranks.get(key);
+    return {
+      value: value === void 0 ? t("chart.heatmapNoData") : fmt.format(value),
+      top: rank === void 0 ? void 0 : t("chart.heatmapTop", { rank: countFmt.format(rank) })
+    };
+  };
+  const summary = model.highest ? `${t("chart.heatmapSummary", {
+    rows: countFmt.format(rows.length),
+    columns: countFmt.format(columns.length)
+  })} ${t("chart.heatmapHighest", {
+    value: fmt.format(model.highest.value),
+    row: model.highest.row.label,
+    column: model.highest.column.label
+  })}` : "";
+  const tipText = tip && tip[0] < rows.length && tip[1] < columns.length ? cellText(tip[0], tip[1]) : null;
+  const span = model.max - model.min;
+  const bound = (step) => model.min + span * step / HEAT_STEPS;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref,
+      id,
+      "data-slot": "chart",
+      "data-size": size,
+      className: cn("ui-chart ui-chart-heatmap", className),
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      children: [
+        /* @__PURE__ */ jsx("figcaption", { id: titleId, className: showCaption ? "ui-chart-title" : "sr-only", children: label }),
+        hasData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "ui-chart-heatmap-scroll", children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              role: "grid",
+              "aria-labelledby": titleId,
+              className: "ui-chart-heatmap-grid",
+              onKeyDown: onGridKeyDown,
+              children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("td", { className: "ui-chart-heatmap-corner" }),
+                  columns.map((column) => /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      scope: "col",
+                      className: "ui-chart-heatmap-column-header",
+                      children: column.label
+                    },
+                    String(column.key)
+                  ))
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("th", { scope: "row", className: "ui-chart-heatmap-row-header", children: row.label }),
+                  columns.map((column, c) => {
+                    const key = heatmapCellKey(row.key, column.key);
+                    const empty = !model.values.has(key);
+                    const text = cellText(r, c);
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        role: "gridcell",
+                        ref: (node) => {
+                          if (node) cellRefs.current.set(`${r}:${c}`, node);
+                          else cellRefs.current.delete(`${r}:${c}`);
+                        },
+                        tabIndex: r === activeRow && c === activeColumn ? 0 : -1,
+                        className: "ui-chart-heatmap-cell ui-focus-ring",
+                        "data-step": empty ? void 0 : model.steps.get(key),
+                        "data-empty": empty ? "" : void 0,
+                        "data-emphasized": model.ranks.has(key) ? "" : void 0,
+                        onFocus: (event) => {
+                          setActive([r, c]);
+                          showTip(r, c, event.currentTarget, 0);
+                        },
+                        onBlur: hideTip,
+                        onPointerEnter: (event) => showTip(r, c, event.currentTarget, OPEN_DELAY),
+                        onPointerLeave: hideTip,
+                        children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: text.top ? `${text.value}, ${text.top}` : text.value })
+                      },
+                      String(column.key)
+                    );
+                  })
+                ] }, String(row.key))) })
+              ]
+            }
+          ) }),
+          showLegend ? /* @__PURE__ */ jsxs("div", { className: "ui-chart-heatmap-legend", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ui-chart-heatmap-legend-scale", children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-chart-heatmap-legend-label", "aria-hidden": "true", children: fmt.format(model.min) }),
+              /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  role: "list",
+                  className: "ui-chart-heatmap-legend-ramp",
+                  "aria-label": t("chart.heatmapLegend"),
+                  children: RAMP.map((step) => /* @__PURE__ */ jsx("li", { className: "ui-chart-heatmap-legend-swatch", "data-step": step, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: fmt.formatRange(bound(step - 1), bound(step)) }) }, step))
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ui-chart-heatmap-legend-label", "aria-hidden": "true", children: fmt.format(model.max) })
+            ] }),
+            model.empty > 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-chart-heatmap-legend-item", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ui-chart-heatmap-legend-swatch",
+                  "data-empty": "",
+                  "aria-hidden": "true"
+                }
+              ),
+              t("chart.heatmapNoData")
+            ] }) : null,
+            model.ranks.size > 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-chart-heatmap-legend-item", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ui-chart-heatmap-legend-swatch",
+                  "data-step": HEAT_STEPS,
+                  "data-emphasized": "",
+                  "aria-hidden": "true"
+                }
+              ),
+              t("chart.heatmapLegendTop", { count: countFmt.format(model.ranks.size) })
+            ] }) : null
+          ] }) : null
+        ] }) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") }),
+        /* @__PURE__ */ jsxs("p", { id: descId, className: "sr-only", children: [
+          description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            description,
+            " "
+          ] }) : null,
+          hasData ? summary : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            open: tip !== null,
+            onOpenChange: (next) => {
+              if (!next) setTip(null);
+            },
+            children: /* @__PURE__ */ jsx(TooltipAnchorContext.Provider, { value: anchorRef, children: tip && tipText ? /* @__PURE__ */ jsxs(
+              TooltipContent,
+              {
+                className: "ui-chart-heatmap-tooltip",
+                onPointerEnter: () => clearTimeout(timer.current),
+                onPointerLeave: hideTip,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "ui-chart-heatmap-tooltip-title", children: t("chart.heatmapCell", {
+                    row: rows[tip[0]]?.label ?? "",
+                    column: columns[tip[1]]?.label ?? "",
+                    value: tipText.value
+                  }) }),
+                  tipText.top ? /* @__PURE__ */ jsx("span", { className: "ui-chart-heatmap-tooltip-note", children: tipText.top }) : null
+                ]
+              },
+              `${tip[0]}:${tip[1]}`
+            ) : null })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  HeatmapChart
+};

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

@@ -9,6 +9,9 @@ export type { BarChartProp, BarChartProps } from "./bar-chart.js";
  */
 export { CompactBarTrend } from "./compact-bar-trend.js";
 export type { CompactBarTrendProp, CompactBarTrendProps } from "./compact-bar-trend.js";
+/** Dependency-free rows × columns heatmap — isolated entry `@godxjp/ui/charts/heatmap-chart`. */
+export { HeatmapChart } from "./heatmap-chart.js";
+export type { HeatmapChartProp, HeatmapChartProps, HeatmapCategory, HeatmapDatum, } from "./heatmap-chart.js";
 export { AreaChart } from "./area-chart.js";
 export type { AreaChartProp, AreaChartProps } from "./area-chart.js";
 export { PieChart } from "./pie-chart.js";

package/dist/components/charts/index.js

@@ -1,6 +1,7 @@
 import { LineChart } from "./line-chart.js";
 import { BarChart } from "./bar-chart.js";
 import { CompactBarTrend } from "./compact-bar-trend.js";
+import { HeatmapChart } from "./heatmap-chart.js";
 import { AreaChart } from "./area-chart.js";
 import { PieChart } from "./pie-chart.js";
 import { CHART_COLORS } from "./chart-frame.js";
@@ -9,6 +10,7 @@ export {
   BarChart,
   CHART_COLORS,
   CompactBarTrend,
+  HeatmapChart,
   LineChart,
   PieChart
 };

package/dist/components/feedback/tooltip.d.ts

@@ -1,6 +1,15 @@
 import * as React from "react";
 type Side = "top" | "right" | "bottom" | "left";
 type Align = "start" | "center" | "end";
+/**
+ * Anchors `TooltipContent` to an element that is NOT a `TooltipTrigger` (gh#1045). `TooltipTrigger`
+ * wraps its child in RAC's `Focusable`, which stamps `tabIndex=0` on it — right for a button, wrong for a truncated `Text` inside a `treeitem`, where it
+ * would add a second tab stop. The ellipsis tooltip drives `open` itself and hands its own element
+ * here as the positioning target (RAC `Tooltip`'s `triggerRef`). HeatmapChart (gh#1330) does the
+ * same with ONE tooltip for its whole grid, anchored to the active cell. Module-internal: not in
+ * the feedback index.
+ */
+export declare const TooltipAnchorContext: React.Context<React.RefObject<Element | null> | null>;
 interface TooltipProviderProps {
     /** Delay mở dùng chung cho mọi `Tooltip` bên trong, tính bằng ms. */
     delayDuration?: number;

package/dist/components/feedback/tooltip.js

@@ -12,7 +12,9 @@ import {
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 const DEFAULT_DELAY_DURATION = 200;
-const TooltipAnchorContext = React.createContext(null);
+const TooltipAnchorContext = React.createContext(
+  null
+);
 function toPlacement(side, align) {
   if (align === "center") return side;
   if (side === "top" || side === "bottom") return `${side} ${align}`;
@@ -223,6 +225,7 @@ function EllipsisTooltip({
 export {
   EllipsisTooltip,
   Tooltip,
+  TooltipAnchorContext,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger

package/dist/components/navigation/index.d.ts

@@ -2,7 +2,7 @@ export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
 export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, } from "./pagination.js";
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./toolbar.js";
-export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./toolbar.js";
+export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./toolbar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingPickerMenuProp, AppSettingPickerCycleProp, AppSettingKind, AppSettingCycleKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";

package/dist/components/navigation/toolbar.d.ts

@@ -1,6 +1,6 @@
 import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navigation.prop.js";
-export type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProp as FilterBarFilterProps, FilterBarOverflowProp, FilterBarSearchProp, FilterBarSearchProp as FilterBarSearchProps, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
-export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, search, filters, chips, onChipRemove, actions, resultCount, loading, disabled, error, clearDisplay, views, viewsPlacement, className, children, }: ToolbarProp): import("react").JSX.Element;
+export type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProp as FilterBarFilterProps, FilterBarSearchProp, FilterBarSearchProp as FilterBarSearchProps, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
+export declare function Toolbar({ onClear, hasActiveFilters, sticky, search, filters, chips, onChipRemove, actions, resultCount, loading, disabled, error, clearDisplay, views, viewsPlacement, className, children, }: ToolbarProp): import("react").JSX.Element;
 export declare function ToolbarGroup({ label, controlId, className, children }: ToolbarGroupProp): import("react").JSX.Element;
 /** Canonical list-page filter strip. `Toolbar` remains available for backwards compatibility. */
 export declare const FilterBar: typeof Toolbar;

package/dist/components/navigation/toolbar.js

@@ -13,7 +13,6 @@ function Toolbar({
   onClear,
   hasActiveFilters = true,
   sticky = false,
-  overflow = "wrap",
   search,
   filters,
   chips,
@@ -73,7 +72,6 @@ function Toolbar({
       {
         role: "toolbar",
         "aria-label": t("navigation.toolbar.ariaLabel"),
-        "data-overflow": overflow,
         className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
         children: [
           children,
@@ -98,7 +96,6 @@ function Toolbar({
             role: "toolbar",
             "aria-label": t("navigation.toolbar.ariaLabel"),
             "aria-busy": loading || void 0,
-            "data-overflow": overflow,
             className: "ui-toolbar",
             children: [
               views != null && viewsPlacement === "inline" && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-views", "data-placement": "inline", children: views }),

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "32.14.0",
+  "version": "33.0.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -787,7 +787,14 @@
     "summaryCartesian": "Chart with {series} series across {points} data points",
     "summaryPie": "Pie chart with {slices} slices",
     "summaryTrend": "Bar trend with {points} data points",
-    "trendCurrent": "current"
+    "trendCurrent": "current",
+    "heatmapSummary": "Heatmap, {rows} × {columns}",
+    "heatmapHighest": "Highest: {value} at {row}, {column}",
+    "heatmapNoData": "No data",
+    "heatmapTop": "Top {rank}",
+    "heatmapLegend": "Color scale",
+    "heatmapLegendTop": "Top {count}",
+    "heatmapCell": "{row}, {column}: {value}"
   },
   "rangeTimeline": {
     "childRows": "Child rows",

package/dist/i18n/messages/ja.json

@@ -761,7 +761,14 @@
     "summaryCartesian": "{series}系列・{points}データ点のグラフ",
     "summaryPie": "{slices}区分の円グラフ",
     "summaryTrend": "{points}データ点の推移棒グラフ",
-    "trendCurrent": "現在"
+    "trendCurrent": "現在",
+    "heatmapSummary": "ヒートマップ（{rows}行×{columns}列）",
+    "heatmapHighest": "最大 {value}（{row}・{column}）",
+    "heatmapNoData": "データなし",
+    "heatmapTop": "上位{rank}位",
+    "heatmapLegend": "色の濃さの凡例",
+    "heatmapLegendTop": "上位{count}件",
+    "heatmapCell": "{row}・{column}：{value}"
   },
   "rangeTimeline": {
     "childRows": "子の行",

package/dist/i18n/messages/vi.json

@@ -762,7 +762,14 @@
     "summaryCartesian": "Biểu đồ gồm {series} chuỗi trên {points} điểm dữ liệu",
     "summaryPie": "Biểu đồ tròn gồm {slices} phần",
     "summaryTrend": "Biểu đồ cột xu hướng gồm {points} điểm dữ liệu",
-    "trendCurrent": "hiện tại"
+    "trendCurrent": "hiện tại",
+    "heatmapSummary": "Bản đồ nhiệt {rows} × {columns}",
+    "heatmapHighest": "Cao nhất: {value} tại {row}, {column}",
+    "heatmapNoData": "Không có dữ liệu",
+    "heatmapTop": "Hạng {rank}",
+    "heatmapLegend": "Thang màu",
+    "heatmapLegendTop": "{count} ô cao nhất",
+    "heatmapCell": "{row}, {column}: {value}"
   },
   "rangeTimeline": {
     "childRows": "Hàng con",

package/dist/props/components/charts.prop.d.ts

@@ -138,6 +138,64 @@ export type CompactBarTrendProp = {
     id?: IdProp;
     ref?: React.Ref<HTMLElement>;
 };
+/** One category on a HeatmapChart axis — a row (weekday) or a column (hour). */
+export type HeatmapCategory = {
+    /** Stable key the `data` cells refer to (`row` / `column`). */
+    key: string | number;
+    /** Already-translated display label — the axis tick and the table header. */
+    label: string;
+};
+/** One HeatmapChart cell. A cell absent from `data`, or with a non-finite `value`, is EMPTY. */
+export type HeatmapDatum = {
+    /** `key` of the row this cell belongs to. */
+    row: string | number;
+    /** `key` of the column this cell belongs to. */
+    column: string | number;
+    /** The measured value. `null`/`undefined`/`NaN` mean "no data" — not zero. */
+    value: number | null | undefined;
+};
+/**
+ * @see HeatmapChart
+ *
+ * Dependency-free (no `recharts`) rows × columns matrix — a weekday × hour heatmap. Cell intensity
+ * steps through the `--chart-heat-1..5` ramp; an empty cell is outlined, a zero cell is filled.
+ */
+export type HeatmapChartProp = {
+    /** Row categories, top to bottom (the y axis — weekdays). */
+    rows: HeatmapCategory[];
+    /** Column categories, start to end (the x axis — hours). */
+    columns: HeatmapCategory[];
+    /** Cell values, keyed by `row` + `column`. Order does not matter; a missing cell is empty. */
+    data: HeatmapDatum[];
+    /** Accessible name + visible caption for the chart. REQUIRED (the grid needs a name). */
+    label: LabelProp;
+    /**
+     * Paint `label` as a visible caption above the plot. `false` keeps it in the DOM as `sr-only`,
+     * so the figure and its grid keep their accessible name.
+     */
+    showCaption?: boolean;
+    /** Extra context appended to the screen-reader description. */
+    description?: DescriptionProp;
+    /**
+     * CELL size tier — `xs|sm|md|lg` (`--chart-heatmap-cell-size-*`). Not a canvas height: the matrix
+     * is as tall as its rows, and when the columns do not fit it scrolls inside its own box.
+     */
+    size?: SizeProp;
+    /** `Intl.NumberFormat` options for cell values, the tooltip and the legend (locale is automatic). */
+    numberFormat?: Intl.NumberFormatOptions;
+    /**
+     * Emphasize the N highest cells with an outline ring and a "top N" note in the tooltip and the
+     * text alternative — never colour alone. Ties keep `data` order. Omitted or 0 = no emphasis.
+     */
+    topN?: number;
+    /** Show the colour-scale legend under the matrix. */
+    showLegend?: boolean;
+    /** Message shown when there are no rows, no columns or no cells. Defaults to a localized "no data". */
+    emptyMessage?: EmptyMessageProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+    ref?: React.Ref<HTMLElement>;
+};
 /** @see AreaChart */
 export type AreaChartProp = ChartCartesianBase & {
     /** Stack series areas instead of overlaying them. */