@godxjp/ui 33.15.0 → 33.17.0

package/dist/i18n/messages/en.json

@@ -797,6 +797,7 @@
     }
   },
   "chart": {
+    "datumLabel": "{label}, {series}: {value}",
     "empty": "No data to display",
     "summaryCartesian": "Chart with {series} series across {points} data points",
     "summaryPie": "Pie chart with {slices} slices",
@@ -868,5 +869,14 @@
         "error": "failed"
       }
     }
+  },
+  "dashboardGrid": {
+    "move": "Move {label}",
+    "resize": "Resize {label}",
+    "hint": "Enter or Space grabs and drops. Arrow keys move; Shift and arrows resize. Escape cancels.",
+    "grabbed": "Grabbed {label}. Column {x}, row {y}, width {w}, height {h}.",
+    "moved": "{label}. Column {x}, row {y}, width {w}, height {h}.",
+    "dropped": "Saved {label}. Column {x}, row {y}, width {w}, height {h}.",
+    "cancelled": "Cancelled changes to {label}."
   }
 }

package/dist/i18n/messages/ja.json

@@ -771,6 +771,7 @@
     }
   },
   "chart": {
+    "datumLabel": "{label}, {series}: {value}",
     "empty": "データがありません",
     "summaryCartesian": "{series}系列・{points}データ点のグラフ",
     "summaryPie": "{slices}区分の円グラフ",
@@ -841,5 +842,14 @@
         "error": "失敗"
       }
     }
+  },
+  "dashboardGrid": {
+    "move": "{label}を移動",
+    "resize": "{label}のサイズ変更",
+    "hint": "Enter またはスペースでつかむ・確定。矢印キーで移動、Shift と矢印でサイズ変更。Escape で取り消します。",
+    "grabbed": "{label}をつかみました。列{x}、行{y}、幅{w}、高さ{h}。",
+    "moved": "{label}。列{x}、行{y}、幅{w}、高さ{h}。",
+    "dropped": "{label}を保存しました。列{x}、行{y}、幅{w}、高さ{h}。",
+    "cancelled": "{label}の変更を取り消しました。"
   }
 }

package/dist/i18n/messages/vi.json

@@ -772,6 +772,7 @@
     }
   },
   "chart": {
+    "datumLabel": "{label}, {series}: {value}",
     "empty": "Không có dữ liệu",
     "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",
@@ -842,5 +843,14 @@
         "error": "thất bại"
       }
     }
+  },
+  "dashboardGrid": {
+    "move": "Di chuyển {label}",
+    "resize": "Đổi kích thước {label}",
+    "hint": "Enter hoặc Space để nắm và thả. Phím mũi tên để di chuyển; Shift và mũi tên để đổi kích thước. Escape để hủy.",
+    "grabbed": "Đã nắm {label}. Cột {x}, hàng {y}, rộng {w}, cao {h}.",
+    "moved": "{label}. Cột {x}, hàng {y}, rộng {w}, cao {h}.",
+    "dropped": "Đã lưu {label}. Cột {x}, hàng {y}, rộng {w}, cao {h}.",
+    "cancelled": "Đã hủy thay đổi {label}."
   }
 }

package/dist/lab/dashboard-grid-layout.d.ts

@@ -0,0 +1,4 @@
+import type { DashboardGridItemProp } from "../props/components/dashboard-grid.prop.js";
+export declare const gridColumns: (value: number) => number;
+/** Active tile wins. Others push down in stable visual order, then compact upward without overlap. */
+export declare function resolveDashboardLayout(layout: readonly DashboardGridItemProp[], columns: number, active?: string): DashboardGridItemProp[];

package/dist/lab/dashboard-grid-layout.js

@@ -0,0 +1,36 @@
+const integer = (value, fallback) => Number.isFinite(value) ? Math.trunc(value) : fallback;
+const gridColumns = (value) => Math.max(1, integer(value, 1));
+const overlaps = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+function resolveDashboardLayout(layout, columns, active) {
+  const count = gridColumns(columns);
+  const normalized = layout.map((item) => {
+    const w = Math.min(count, Math.max(1, integer(item.w, 1)));
+    return {
+      ...item,
+      w,
+      h: Math.max(1, integer(item.h, 1)),
+      x: Math.max(0, Math.min(count - w, integer(item.x, 0))),
+      y: Math.max(0, integer(item.y, 0))
+    };
+  });
+  const sorted = normalized.slice().sort((a, b) => a.y - b.y || a.x - b.x);
+  const held = normalized.find((item) => item.id === active);
+  const placed = held ? [held] : [];
+  for (const item of sorted) {
+    if (item === held) continue;
+    let collision;
+    while (collision = placed.find((other) => overlaps(item, other)))
+      item.y = collision.y + collision.h;
+    while (item.y > 0 && !placed.some((other) => overlaps({ ...item, y: item.y - 1 }, other)))
+      item.y--;
+    placed.push(item);
+  }
+  if (held)
+    while (held.y > 0 && !placed.some((other) => other !== held && overlaps({ ...held, y: held.y - 1 }, other)))
+      held.y--;
+  return normalized;
+}
+export {
+  gridColumns,
+  resolveDashboardLayout
+};

package/dist/lab/dashboard-grid.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { DashboardGridProp } from "../props/components/dashboard-grid.prop.js";
+export type { DashboardGridItemProp, DashboardGridProp, DashboardGridProp as DashboardGridProps, } from "../props/components/dashboard-grid.prop.js";
+/** Optional BI layout editor. DOM reading order remains items order; x starts at inline-start. */
+export declare const DashboardGrid: React.ForwardRefExoticComponent<DashboardGridProp & React.RefAttributes<HTMLDivElement>>;

package/dist/lab/dashboard-grid.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GripVertical } from "lucide-react";
+import { Card, CardHeader, CardTitle } from "../components/data-display/card.js";
+import { Button } from "../components/general/button.js";
+import { useTranslation } from "../i18n/use-translation.js";
+import { useMediaQuery } from "../lib/hooks.js";
+import { cn } from "../lib/utils.js";
+import { gridColumns, resolveDashboardLayout } from "./dashboard-grid-layout.js";
+const DashboardGrid = React.forwardRef(
+  function DashboardGrid2({
+    items,
+    layout,
+    defaultLayout,
+    onLayoutChange,
+    columns = 12,
+    rowHeight,
+    editable = false,
+    className,
+    ...props
+  }, ref) {
+    const { t, locale } = useTranslation();
+    const sm = useMediaQuery("(min-width: 40rem)");
+    const md = useMediaQuery("(min-width: 48rem)");
+    const lg = useMediaQuery("(min-width: 64rem)");
+    const xl = useMediaQuery("(min-width: 80rem)");
+    const count = gridColumns(
+      typeof columns === "number" ? columns : xl && columns.xl || lg && columns.lg || md && columns.md || sm && columns.sm || columns.base
+    );
+    const [inner, setInner] = React.useState(defaultLayout ?? []);
+    const source = layout ?? inner;
+    const committed = resolveDashboardLayout(
+      items.map(
+        (item, index) => source.find((entry) => entry.id === item.id) ?? {
+          id: item.id,
+          x: 0,
+          y: index,
+          w: 1,
+          h: 1
+        }
+      ),
+      count
+    );
+    const root = React.useRef(null);
+    const session = React.useRef(null);
+    const [preview, setPreview] = React.useState(null);
+    const [announcement, announce] = React.useState("");
+    const hint = React.useId();
+    const format = new Intl.NumberFormat(locale);
+    const speak = (action, entries, id) => {
+      const item = entries.find((entry) => entry.id === id);
+      if (!item) return;
+      announce(
+        t(`dashboardGrid.${action}`, {
+          label: items.find((entry) => entry.id === id)?.label ?? id,
+          x: format.format(item.x + 1),
+          y: format.format(item.y + 1),
+          w: format.format(item.w),
+          h: format.format(item.h)
+        })
+      );
+    };
+    const begin = (id) => {
+      const next = committed.map((item) => ({ ...item }));
+      session.current = { id, base: next, next };
+      setPreview(next);
+      speak("grabbed", next, id);
+    };
+    const finish = (cancel) => {
+      const current = session.current;
+      if (!current) return;
+      session.current = null;
+      setPreview(null);
+      speak(cancel ? "cancelled" : "dropped", cancel ? current.base : current.next, current.id);
+      if (!cancel && JSON.stringify(current.base) !== JSON.stringify(current.next)) {
+        if (layout === void 0) setInner(current.next);
+        onLayoutChange?.(current.next);
+      }
+    };
+    const update = (dx, dy, resize, fromBase = false) => {
+      const current = session.current;
+      if (!current) return;
+      current.next = resolveDashboardLayout(
+        (fromBase ? current.base : current.next).map(
+          (item) => item.id !== current.id ? item : resize ? { ...item, w: item.w + dx, h: item.h + dy } : { ...item, x: item.x + dx, y: item.y + dy }
+        ),
+        count,
+        current.id
+      );
+      setPreview(current.next);
+      speak("moved", current.next, current.id);
+    };
+    React.useEffect(() => {
+      session.current = null;
+      setPreview(null);
+    }, [layout, columns, count, editable, items]);
+    const latest = React.useRef({ finish, update });
+    latest.current = { finish, update };
+    React.useEffect(() => {
+      const move = (event) => {
+        const pointer = session.current?.pointer;
+        if (!pointer || event.pointerId !== pointer.id) return;
+        event.preventDefault();
+        latest.current.update(
+          Math.round((event.clientX - pointer.x) / pointer.stepX) * (pointer.rtl ? -1 : 1),
+          Math.round((event.clientY - pointer.y) / pointer.stepY),
+          pointer.resize,
+          true
+        );
+      };
+      const end = (event) => {
+        if (session.current?.pointer?.id === event.pointerId)
+          latest.current.finish(event.type === "pointercancel");
+      };
+      const escape = (event) => {
+        if (event.key === "Escape" && session.current) {
+          event.preventDefault();
+          latest.current.finish(true);
+        }
+      };
+      window.addEventListener("pointermove", move, { passive: false });
+      window.addEventListener("pointerup", end);
+      window.addEventListener("pointercancel", end);
+      window.addEventListener("keydown", escape);
+      return () => {
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", end);
+        window.removeEventListener("pointercancel", end);
+        window.removeEventListener("keydown", escape);
+      };
+    }, []);
+    const pointerDown = (id, resize) => (event) => {
+      if (!editable || event.button !== 0 || session.current || !root.current) return;
+      event.preventDefault();
+      event.currentTarget.focus();
+      const css = getComputedStyle(root.current);
+      const gap = parseFloat(css.columnGap) || 0;
+      begin(id);
+      session.current.pointer = {
+        id: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        stepX: (root.current.clientWidth + gap) / count,
+        stepY: (parseFloat(css.gridAutoRows) || rowHeight || 80) + (parseFloat(css.rowGap) || 0),
+        rtl: css.direction === "rtl",
+        resize
+      };
+    };
+    const keyDown = (id) => (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!session.current) begin(id);
+        else if (session.current.id === id) finish(false);
+        return;
+      }
+      if (session.current?.id !== id || !event.key.startsWith("Arrow")) return;
+      event.preventDefault();
+      const rtl = root.current && getComputedStyle(root.current).direction === "rtl";
+      update(
+        (event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0) * (rtl ? -1 : 1),
+        event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0,
+        event.shiftKey
+      );
+    };
+    const shown = preview ?? committed;
+    return /* @__PURE__ */ jsxs("div", { ...props, ref, className: cn("ui-dashboard-grid", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: root,
+          className: "ui-dashboard-grid-items",
+          "data-stacked": count === 1 || void 0,
+          style: {
+            "--dashboard-grid-columns": count,
+            ...rowHeight && Number.isFinite(rowHeight) && rowHeight > 0 ? { "--dashboard-grid-row-height": `${rowHeight}px` } : {}
+          },
+          children: items.map((item) => {
+            const box = shown.find((entry) => entry.id === item.id) ?? committed.find((entry) => entry.id === item.id);
+            const held = session.current?.id === item.id;
+            return /* @__PURE__ */ jsx(
+              "section",
+              {
+                "aria-label": item.label,
+                className: "ui-dashboard-grid-item",
+                "data-dashboard-id": item.id,
+                "data-x": box.x,
+                "data-y": box.y,
+                "data-w": box.w,
+                "data-h": box.h,
+                "data-editable": editable || void 0,
+                "data-held": held || void 0,
+                style: {
+                  gridColumn: `${box.x + 1} / span ${box.w}`,
+                  gridRow: count === 1 ? "auto" : `${box.y + 1} / span ${box.h}`
+                },
+                children: /* @__PURE__ */ jsxs(Card, { className: "ui-dashboard-grid-surface", children: [
+                  /* @__PURE__ */ jsx(CardHeader, { className: "ui-dashboard-grid-header", children: /* @__PURE__ */ jsx(CardTitle, { children: item.label }) }),
+                  editable && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      className: "ui-dashboard-grid-move",
+                      "aria-label": t("dashboardGrid.move", { label: item.label }),
+                      "aria-describedby": hint,
+                      "aria-pressed": held,
+                      onPointerDown: pointerDown(item.id, false),
+                      onKeyDown: keyDown(item.id),
+                      onBlur: () => {
+                        if (!session.current?.pointer) finish(true);
+                      },
+                      children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "ui-dashboard-grid-content", children: item.content }),
+                  editable && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      className: "ui-dashboard-grid-resize",
+                      "aria-label": t("dashboardGrid.resize", { label: item.label }),
+                      "aria-describedby": hint,
+                      "aria-pressed": held,
+                      onPointerDown: pointerDown(item.id, true),
+                      onKeyDown: keyDown(item.id),
+                      onBlur: () => {
+                        if (!session.current?.pointer) finish(true);
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx("path", { d: "M8 20 20 8M14 20 20 14" })
+                        }
+                      )
+                    }
+                  )
+                ] })
+              },
+              item.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: hint, className: "sr-only", children: t("dashboardGrid.hint") }),
+      /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement })
+    ] });
+  }
+);
+export {
+  DashboardGrid
+};

package/dist/lab/index.d.ts

@@ -37,3 +37,5 @@ export { MegaMenu } from "./mega-menu.js";
 export type { MegaMenuProp, MegaMenuProps, MegaMenuItemProp, MegaMenuItemProps, MegaMenuPanelProp, MegaMenuPanelProps, MegaMenuGroupProp, MegaMenuGroupProps, MegaMenuLinkProp, MegaMenuLinkProps, MegaMenuLinkComponentProp, MegaMenuLinkComponentProps, MegaMenuTriggerActionProp, MegaMenuTriggerActionProps, } from "./mega-menu.js";
 export { Anchor } from "./anchor.js";
 export type { AnchorContainerProp, AnchorDirectionProp, AnchorItemProp, AnchorProp, AnchorProps, } from "./anchor.js";
+export { DashboardGrid } from "./dashboard-grid.js";
+export type { DashboardGridProp, DashboardGridProps, DashboardGridItemProp } from "./dashboard-grid.js";

package/dist/lab/index.js

@@ -21,6 +21,7 @@ import { EmojiPicker } from "./emoji-picker.js";
 import { SortableList } from "./sortable-list.js";
 import { MegaMenu } from "./mega-menu.js";
 import { Anchor } from "./anchor.js";
+import { DashboardGrid } from "./dashboard-grid.js";
 export {
   Anchor,
   Carousel,
@@ -29,6 +30,7 @@ export {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
+  DashboardGrid,
   DraggablePanel,
   EmojiPicker,
   FloatButton,

package/dist/lib/hooks.d.ts

@@ -21,6 +21,14 @@ export declare function useTimeoutFlag(signal: unknown, ms?: number): boolean;
  * first defined value arrives, then PROMOTES to controlled for good.
  */
 export declare function useControlledLatch(valueIsDefined: boolean): boolean;
+/**
+ * Live `matchMedia(query).matches`, hydration-safe. Built on `useSyncExternalStore` so that during
+ * hydration React renders with the SERVER snapshot (`false`, what SSR sent) and switches to the live
+ * match immediately after — the first client render never differs from the server HTML. Reading
+ * `matchMedia` in the initial `useState` made a phone hydrate a different tree than the server sent
+ * (AppShell `data-navigation` "docked" → "drawer", an attribute mismatch React does not patch up).
+ * A client-only mount still gets the live value on its first render.
+ */
 export declare function useMediaQuery(query: string): boolean;
 export declare function useIsMobile(): boolean;
 /**

package/dist/lib/hooks.js

@@ -1,6 +1,6 @@
 "use client";
 import { useLayoutEffect } from "@react-aria/utils";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { flushSync } from "react-dom";
 function useDebouncedValue(value, delay = 250) {
   const [debounced, setDebounced] = useState(value);
@@ -43,29 +43,28 @@ function useControlledLatch(valueIsDefined) {
   if (valueIsDefined && !latched) setLatched(true);
   return valueIsDefined || latched;
 }
+const getServerMatch = () => false;
 function useMediaQuery(query) {
-  const isBrowser = typeof window !== "undefined";
-  const getMatch = () => isBrowser ? window.matchMedia(query).matches : false;
-  const [matches, setMatches] = useState(getMatch());
-  useEffect(() => {
-    if (!isBrowser) return void 0;
-    const mediaQuery = window.matchMedia(query);
-    const updateMatch = () => {
-      setMatches(mediaQuery.matches);
-    };
-    updateMatch();
-    if (typeof mediaQuery.addEventListener === "function") {
-      mediaQuery.addEventListener("change", updateMatch);
+  const subscribe = useCallback(
+    (onChange) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+      };
+      const mediaQuery = window.matchMedia(query);
+      if (typeof mediaQuery.addEventListener === "function") {
+        mediaQuery.addEventListener("change", onChange);
+        return () => {
+          mediaQuery.removeEventListener("change", onChange);
+        };
+      }
+      mediaQuery.addListener(onChange);
       return () => {
-        mediaQuery.removeEventListener("change", updateMatch);
+        mediaQuery.removeListener(onChange);
       };
-    }
-    mediaQuery.addListener(updateMatch);
-    return () => {
-      mediaQuery.removeListener(updateMatch);
-    };
-  }, [isBrowser, query]);
-  return matches;
+    },
+    [query]
+  );
+  const getMatch = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
+  return useSyncExternalStore(subscribe, getMatch, getServerMatch);
 }
 function useIsMobile() {
   return useMediaQuery("(max-width: 767px)");

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

@@ -21,6 +21,11 @@ export type ChartSeriesProp = {
      */
     fillColor?: string;
 };
+/** Selection is an action: the dashboard owns filter state. Index refers to the original data array. */
+export type ChartDatumSelect<T = ChartDatum> = (datum: T, context: {
+    seriesKey: string;
+    index: number;
+}) => void;
 /** Shared base for the cartesian charts (Line / Bar / Area). */
 type ChartCartesianBase = {
     /** Row data. Each row is one category with a value per series. */
@@ -69,6 +74,8 @@ type ChartCartesianBase = {
     numberFormat?: Intl.NumberFormatOptions;
     /** Message shown when `data` is empty. Defaults to a localized "no data". */
     emptyMessage?: EmptyMessageProp;
+    /** Select a finite datum by pointer or Enter/Space. Arrows navigate categories and series. */
+    onDatumSelect?: ChartDatumSelect;
     /**
      * Called with the clicked category's datum and its index — drill-down, zoom-to-bucket. The whole
      * category column is the target, not only the mark, so a zero-height bar is still clickable.
@@ -161,6 +168,8 @@ export type HeatmapDatum = {
  * steps through the `--chart-heat-1..5` ramp; an empty cell is outlined, a zero cell is filled.
  */
 export type HeatmapChartProp = {
+    /** Select a present cell. seriesKey is String(column); index is the original data index. */
+    onDatumSelect?: ChartDatumSelect<HeatmapDatum>;
     /** Row categories, top to bottom (the y axis — weekdays). */
     rows: HeatmapCategory[];
     /** Column categories, start to end (the x axis — hours). */
@@ -207,6 +216,8 @@ export type AreaChartProp = ChartCartesianBase & {
 };
 /** @see PieChart */
 export type PieChartProp = {
+    /** Select a slice by pointer or Enter/Space; seriesKey is dataKey. Arrows navigate slices. */
+    onDatumSelect?: ChartDatumSelect;
     /** Row data — one slice per row. */
     data: ChartDatum[];
     /** Key into each datum holding the slice's numeric value. */

package/dist/props/components/dashboard-grid.prop.d.ts

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import type { BreakpointProp } from "../vocabulary/index.js";
+/** Integer grid coordinates, zero-based from inline-start. Stable id owns persistence. */
+export interface DashboardGridItemProp {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface DashboardGridProp extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Each tile owns its Card and visible label header; content is the body (e.g. CardContent). */
+    items: {
+        id: string;
+        label: string;
+        content: React.ReactNode;
+    }[];
+    layout?: DashboardGridItemProp[];
+    defaultLayout?: DashboardGridItemProp[];
+    onLayoutChange?: (layout: DashboardGridItemProp[]) => void;
+    columns?: number | ({
+        base: number;
+    } & Partial<Record<BreakpointProp, number>>);
+    /** Row track size in pixels; omitted reads --dashboard-grid-row-height. */
+    rowHeight?: number;
+    editable?: boolean;
+}

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

@@ -1,6 +1,6 @@
 /** Foundation component prop types — @see docs/COMPONENTS.md#foundation */
 import type * as React from "react";
-import type { ActivityAnnounceProp, ActivityVariantProp, AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DescriptionProp, DisabledProp, FontWeightProp, HeadingLevelProp, IconSizeProp, IdProp, InViewAmountProp, LabelProp, OnClickProp, OnOpenChangeProp, OpenProp, PendingProp, RevealDelayProp, RevealTriggerProp, ShapeProp, SizeProp, TextAlignProp, TextSizeProp, TextToneProp, TextWhitespaceProp, TextBreakProp, TypographyActionsConfigProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyTypeProp } from "../vocabulary/index.js";
+import type { ActivityAnnounceProp, ActivityVariantProp, AsChildProp, ButtonSizeProp, ButtonVariantProp, ChildrenProp, ClassNameProp, DescriptionProp, DisabledProp, FontWeightProp, HeadingFamilyProp, HeadingLevelProp, IconSizeProp, IdProp, InViewAmountProp, LabelProp, OnClickProp, OnOpenChangeProp, OpenProp, PendingProp, RevealDelayProp, RevealTriggerProp, ShapeProp, SizeProp, TextAlignProp, TextSizeProp, TextToneProp, TextWhitespaceProp, TextBreakProp, TypographyActionsConfigProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyTypeProp } from "../vocabulary/index.js";
 /**
  * @see Text — typographic primitive; replaces hand-rolled `<span className="text-[13px] …">`.
  *
@@ -131,6 +131,13 @@ export type HeadingProp = Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"
     truncate?: boolean;
     /** Weight (system canon: 400 · 500 · 700). Default `medium` — set `bold` for an emphasised title. */
     weight?: FontWeightProp;
+    /**
+     * Heading face. `editorial` sets this heading in --font-family-editorial — the opt-in serif a
+     * public or editorial page uses for its hero and section headings while the UI stays sans. Until a
+     * theme names that face it falls back to --font-family-display, so the prop is inert by default.
+     * Omit it (or `display`) for every UI heading.
+     */
+    family?: HeadingFamilyProp;
 };
 /**
  * The antd `BlockProps` behaviour shared by `Text` / `Link`.

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

@@ -2,7 +2,7 @@ export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherPr
 export type { ButtonProp } from "./general.prop.js";
 export type { CommandProp, CommandSeparatorProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, ColorPickerPresetProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
-export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
+export type { ChartDatumSelect, ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AuthExpiryProviderProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";
 export type { DropdownMenuPlacementProp, DropdownMenuTriggerActionProp, PaginationProp, PaginationSizeProp, PaginationAlignProp, StepsProp, StepItemProp, StepStatusProp, StepsTypeProp, TabsProp, TabItemProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, TabsOnEditProp, } from "./navigation.prop.js";