@godxjp/ui 32.13.1 → 32.15.0

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/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.13.1",
+  "version": "32.15.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. */

package/dist/props/registry.d.ts

@@ -2331,6 +2331,43 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Forwarded ref to the <figure> element.";
         }];
     };
+    readonly HeatmapChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/charts.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+            readonly field: "rows";
+            readonly local: true;
+            readonly reason: "Row categories (y axis) — key + translated label.";
+        }, {
+            readonly field: "columns";
+            readonly local: true;
+            readonly reason: "Column categories (x axis) — key + translated label.";
+        }, {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "Cell values keyed by row + column.";
+        }, {
+            readonly field: "showCaption";
+            readonly local: true;
+            readonly reason: "Paint the caption; false keeps it sr-only so the accessible name survives.";
+        }, {
+            readonly field: "numberFormat";
+            readonly local: true;
+            readonly reason: "Intl.NumberFormat options for cell values, tooltip and legend.";
+        }, {
+            readonly field: "topN";
+            readonly local: true;
+            readonly reason: "Emphasize the N highest cells (ring + text note, never colour alone).";
+        }, {
+            readonly field: "showLegend";
+            readonly local: true;
+            readonly reason: "Chart-specific legend toggle.";
+        }, {
+            readonly field: "ref";
+            readonly local: true;
+            readonly reason: "Forwarded ref to the <figure> element.";
+        }];
+    };
     readonly AreaChartProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";

package/dist/props/registry.js

@@ -2762,6 +2762,42 @@ const COMPONENT_PROP_REGISTRY = {
       { field: "ref", local: true, reason: "Forwarded ref to the <figure> element." }
     ]
   },
+  HeatmapChartProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      "SizeProp",
+      "EmptyMessageProp",
+      "ClassNameProp",
+      "IdProp",
+      { field: "rows", local: true, reason: "Row categories (y axis) \u2014 key + translated label." },
+      {
+        field: "columns",
+        local: true,
+        reason: "Column categories (x axis) \u2014 key + translated label."
+      },
+      { field: "data", local: true, reason: "Cell values keyed by row + column." },
+      {
+        field: "showCaption",
+        local: true,
+        reason: "Paint the caption; false keeps it sr-only so the accessible name survives."
+      },
+      {
+        field: "numberFormat",
+        local: true,
+        reason: "Intl.NumberFormat options for cell values, tooltip and legend."
+      },
+      {
+        field: "topN",
+        local: true,
+        reason: "Emphasize the N highest cells (ring + text note, never colour alone)."
+      },
+      { field: "showLegend", local: true, reason: "Chart-specific legend toggle." },
+      { field: "ref", local: true, reason: "Forwarded ref to the <figure> element." }
+    ]
+  },
   AreaChartProp: {
     group: "data-display",
     file: "components/charts.prop.ts",

package/dist/styles/base.css

@@ -5,25 +5,6 @@
 
 @layer godxjp-ui-responsive;
 
-[lang="ja"] {
-  --font-family-sans: var(--font-sans-ja, var(--font-sans-base));
-}
-[lang="ko"] {
-  --font-family-sans: var(--font-sans-ko, var(--font-sans-base));
-}
-[lang="vi"] {
-  --font-family-sans: var(--font-sans-vi, var(--font-sans-base));
-}
-[lang="zh"],
-[lang="zh-Hans"],
-[lang="zh-CN"] {
-  --font-family-sans: var(--font-sans-zh-hans, var(--font-sans-base));
-}
-[lang="zh-Hant"],
-[lang="zh-TW"] {
-  --font-family-sans: var(--font-sans-zh-hant, var(--font-sans-base));
-}
-
 @source inline(
   "{bg,text,border,ring}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}"
 );
@@ -45,6 +26,25 @@
 @import "./focus-ring.css";
 @import "./density.css";
 
+[lang="ja"] {
+  --font-family-sans: var(--font-sans-ja, var(--font-sans-base));
+}
+[lang="ko"] {
+  --font-family-sans: var(--font-sans-ko, var(--font-sans-base));
+}
+[lang="vi"] {
+  --font-family-sans: var(--font-sans-vi, var(--font-sans-base));
+}
+[lang="zh"],
+[lang="zh-Hans"],
+[lang="zh-CN"] {
+  --font-family-sans: var(--font-sans-zh-hans, var(--font-sans-base));
+}
+[lang="zh-Hant"],
+[lang="zh-TW"] {
+  --font-family-sans: var(--font-sans-zh-hant, var(--font-sans-base));
+}
+
 @theme inline {
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));

package/dist/styles/chart-layout.css

@@ -165,3 +165,164 @@
 .ui-chart-canvas [tabindex="-1"]:focus:not(:focus-visible) {
   outline: none;
 }
+
+.ui-chart-heatmap[data-size="xs"] {
+  --chart-heatmap-cell-size: var(--chart-heatmap-cell-size-xs);
+}
+
+.ui-chart-heatmap[data-size="sm"] {
+  --chart-heatmap-cell-size: var(--chart-heatmap-cell-size-sm);
+}
+
+.ui-chart-heatmap[data-size="md"] {
+  --chart-heatmap-cell-size: var(--chart-heatmap-cell-size-md);
+}
+
+.ui-chart-heatmap[data-size="lg"] {
+  --chart-heatmap-cell-size: var(--chart-heatmap-cell-size-lg);
+}
+
+.ui-chart-heatmap-scroll {
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+}
+
+.ui-chart-heatmap-grid {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: var(--chart-heatmap-cell-gap);
+  font-size: var(--chart-heatmap-tick-font-size);
+  line-height: var(--line-height-normal);
+}
+
+.ui-chart-heatmap-column-header,
+.ui-chart-heatmap-row-header {
+  padding: 0;
+  font-weight: var(--font-weight-normal);
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+}
+
+.ui-chart-heatmap-column-header {
+  text-align: center;
+}
+
+.ui-chart-heatmap-row-header {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  inline-size: 1%;
+  padding-inline-end: var(--space-2);
+  text-align: start;
+  background: var(--chart-heatmap-row-header-background, hsl(var(--card)));
+}
+
+.ui-chart-heatmap-corner {
+  padding: 0;
+}
+
+.ui-chart-heatmap-cell {
+  min-inline-size: var(--chart-heatmap-cell-size);
+  inline-size: var(--chart-heatmap-cell-size);
+  block-size: var(--chart-heatmap-cell-size);
+  padding: 0;
+
+  border: var(--stroke-hairline) solid transparent;
+  border-radius: var(
+    --chart-heatmap-cell-radius,
+    calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+  );
+}
+
+.ui-chart-heatmap-cell[data-step="1"],
+.ui-chart-heatmap-legend-swatch[data-step="1"] {
+  background: var(--chart-heat-1);
+}
+
+.ui-chart-heatmap-cell[data-step="2"],
+.ui-chart-heatmap-legend-swatch[data-step="2"] {
+  background: var(--chart-heat-2);
+}
+
+.ui-chart-heatmap-cell[data-step="3"],
+.ui-chart-heatmap-legend-swatch[data-step="3"] {
+  background: var(--chart-heat-3);
+}
+
+.ui-chart-heatmap-cell[data-step="4"],
+.ui-chart-heatmap-legend-swatch[data-step="4"] {
+  background: var(--chart-heat-4);
+}
+
+.ui-chart-heatmap-cell[data-step="5"],
+.ui-chart-heatmap-legend-swatch[data-step="5"] {
+  background: var(--chart-heat-5);
+}
+
+.ui-chart-heatmap-cell[data-empty],
+.ui-chart-heatmap-legend-swatch[data-empty] {
+  background: transparent;
+  border: var(
+    --chart-heatmap-empty-border,
+    var(--stroke-hairline) dashed hsl(var(--muted-foreground))
+  );
+}
+
+.ui-chart-heatmap-cell[data-emphasized],
+.ui-chart-heatmap-legend-swatch[data-emphasized] {
+  box-shadow:
+    inset 0 0 0 var(--chart-heatmap-emphasis-width)
+      var(--chart-heatmap-emphasis-border, hsl(var(--foreground))),
+    inset 0 0 0 calc(var(--chart-heatmap-emphasis-width) * 2) hsl(var(--card));
+}
+
+.ui-chart-heatmap-tooltip {
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-chart-heatmap-tooltip-title {
+  font-variant-numeric: tabular-nums;
+}
+
+.ui-chart-heatmap-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--chart-heatmap-legend-gap) calc(var(--chart-heatmap-legend-gap) * 2);
+  font-size: var(--chart-heatmap-tick-font-size);
+  line-height: var(--line-height-normal);
+  color: hsl(var(--muted-foreground));
+}
+
+.ui-chart-heatmap-legend-scale,
+.ui-chart-heatmap-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chart-heatmap-legend-gap);
+  font-variant-numeric: tabular-nums;
+}
+
+.ui-chart-heatmap-legend-ramp {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ui-chart-heatmap-legend-swatch {
+  display: inline-block;
+  inline-size: calc(var(--chart-heatmap-legend-swatch-size) * 1.5);
+  block-size: var(--chart-heatmap-legend-swatch-size);
+  border: var(--stroke-hairline) solid transparent;
+}
+
+.ui-chart-heatmap-legend-item > .ui-chart-heatmap-legend-swatch {
+  inline-size: var(--chart-heatmap-legend-swatch-size);
+  border-radius: var(
+    --chart-heatmap-cell-radius,
+    calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
+  );
+}

package/dist/styles/data-display-layout.css

@@ -922,10 +922,10 @@
       var(--list-row-compact-padding-x, var(--list-row-padding-x));
   }
 
-  [data-slot="card-content"]:not([data-flush]) > [data-slot="list-row"],
   [data-slot="card-content"]:not([data-flush])
-    > :is(ul, ol, [role="list"])
-    > [data-slot="list-row"] {
+    [data-slot="list-row"]:not(
+      :where([data-slot="card-content"][data-flush], [data-slot="table-cell"], td, th) *
+    ) {
     padding-inline: 0;
   }
 

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.13.1",
+  "version": "32.15.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -564,6 +564,13 @@
         "dialog-layout.css"
       ]
     },
+    "HeatmapChart": {
+      "layers": [
+        "layout.css",
+        "dialog-layout.css",
+        "chart-layout.css"
+      ]
+    },
     "Icon": {
       "layers": [
         "icon-layout.css"

package/dist/styles/layout.css

@@ -870,7 +870,7 @@
   .ui-page-toolbar {
     flex: none;
     margin-block: calc(-1 * var(--page-band-gap));
-    padding-block: var(--page-toolbar-pad-block);
+    padding-block: var(--page-toolbar-pad-block, var(--page-band-gap));
     background: var(--page-toolbar-background);
     border-block-end: var(--page-toolbar-divider, var(--page-header-divider));
   }