@godxjp/ui 32.14.0 → 33.0.0

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

@@ -4,11 +4,6 @@ import type { ReactNode } from "react";
 import type { AffixProp, AffixTargetProp } from "./layout.prop.js";
 import type { ActionsProp, ChildrenProp, ClassNameProp, DisabledProp, ErrorProp, HasActiveFiltersProp, IdProp, LabelProp, OnClearFiltersProp, PendingProp, PlaceholderProp, StickyProp, TextAlignProp } from "../vocabulary/index.js";
 import type { SearchSelectOptionProp } from "./data-entry.prop.js";
-/**
- * `wrap` (default) stacks on narrow viewports then wraps onto extra rows; `scroll` keeps ONE
- * bounded row that scrolls inline, so a wide filter set never pushes the list below the fold.
- */
-export type FilterBarOverflowProp = "wrap" | "scroll";
 /**
  * Renders the canonical SearchInput as the FIRST control of the strip, with a token-owned
  * consistent width (`--filter-bar-search-width`, full-width below 640px). Controlled by consumer
@@ -59,7 +54,15 @@ export type FilterBarChipProp = {
     label: React.ReactNode;
     disabled?: DisabledProp;
 };
-/** @see Toolbar */
+/**
+ * @see Toolbar
+ *
+ * A filter bar WRAPS — stacked below 640px, extra rows above — and never scrolls sideways: a
+ * horizontal strip hides filters off-screen and clips labels at its edges. When the filters are
+ * many, keep the few common ones in the bar and put the rest behind ONE "More filters" Button that
+ * opens a Sheet (or Popover) holding them. The library ships no dedicated component for that; it
+ * is a composition of Button + Sheet + FilterBarGroup.
+ */
 export type ToolbarProp = {
     onClear?: OnClearFiltersProp;
     hasActiveFilters?: HasActiveFiltersProp;
@@ -68,11 +71,6 @@ export type ToolbarProp = {
      * `--filter-bar-sticky-offset` / `--filter-bar-sticky-background` theme knobs.
      */
     sticky?: StickyProp;
-    /**
-     * Default `wrap`. Use `scroll` for list pages with many filters (long JA/EN/VI labels) where a
-     * wrapped 3-row strip would push the table off screen.
-     */
-    overflow?: FilterBarOverflowProp;
     /**
      * When ANY model prop (`search`/`filters`/`chips`/
      * `onChipRemove`/`actions`/`resultCount`/`loading`/`disabled`/`error`) is present the bar
@@ -362,7 +360,7 @@ export type TabsOnEditProp = (target: string | React.MouseEvent<HTMLButtonElemen
  * @see Tabs — what the trigger strip does when there are more tabs than fit its container.
  *
  * This is Ant Design's `more`, mapped onto the `overflow` vocabulary this package already uses
- * for the same question (`FilterBarOverflowProp` on Toolbar) rather than re-spelled: antd names
+ * for the same question (`overflow` on Topbar) rather than re-spelled: antd names
  * the AFFORDANCE it happens to draw, this library names the BEHAVIOUR and owns the affordance.
  *
  * `scroll` (the default, and what every strip does today) keeps one bounded row that scrolls its

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";
@@ -2614,11 +2651,6 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/navigation.prop.ts";
         readonly vocabulary: readonly [];
     };
-    readonly FilterBarOverflowProp: {
-        readonly group: "navigation";
-        readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly [];
-    };
     readonly FilterBarSearchProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.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",
@@ -3054,11 +3090,6 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/navigation.prop.ts",
     vocabulary: []
   },
-  FilterBarOverflowProp: {
-    group: "navigation",
-    file: "components/navigation.prop.ts",
-    vocabulary: []
-  },
   FilterBarSearchProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",

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/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.14.0",
+  "version": "33.0.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

@@ -1510,39 +1510,6 @@
     font-size: var(--filter-label-font-size);
   }
 
-  @media (min-width: 640px) {
-    .ui-toolbar[data-overflow="scroll"] {
-      flex-wrap: nowrap;
-      overflow-x: auto;
-      overscroll-behavior-x: contain;
-      scrollbar-gutter: stable;
-      padding-block-end: var(--filter-bar-scroll-padding-y);
-    }
-
-    .ui-toolbar[data-overflow="scroll"] > .ui-toolbar-group {
-      flex: 0 0 auto;
-    }
-
-    .ui-toolbar[data-overflow="scroll"] > .ui-toolbar-clear {
-      position: sticky;
-      inset-inline-end: 0;
-      margin-inline-start: auto;
-      flex: 0 0 auto;
-
-      z-index: 1;
-      background: hsl(var(--filter-bar-sticky-background, var(--background)));
-    }
-
-    .ui-toolbar[data-overflow="scroll"] > .ui-filter-bar-end {
-      position: sticky;
-      inset-inline-end: 0;
-      margin-inline-start: auto;
-      flex: 0 0 auto;
-      z-index: 1;
-      background: hsl(var(--filter-bar-sticky-background, var(--background)));
-    }
-  }
-
   .ui-filter-bar {
     display: flex;
     flex-direction: column;