@godxjp/ui 20.0.0 → 20.2.0

package/dist/components/charts/compact-bar-trend.js

@@ -11,6 +11,7 @@ function CompactBarTrend({
   categoryKey,
   valueKey,
   label,
+  showCaption = true,
   description,
   size = "xs",
   emphasizedIndex,
@@ -40,6 +41,7 @@ function CompactBarTrend({
     {
       ref,
       label,
+      showCaption,
       description,
       summaryRows: summary.rows,
       imgSummary: summary.img,

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

@@ -5,4 +5,4 @@ export type { PieChartProp, PieChartProp as PieChartProps, } from "../../props/c
  * Import from the tree-shaken `@godxjp/ui/charts` entry; requires the `recharts`
  * optional peer dependency.
  */
-export declare function PieChart({ data, dataKey, nameKey, colors, label, description, size, height, showLegend, numberFormat, donut, emptyMessage, className, id, }: PieChartProp): import("react").JSX.Element;
+export declare function PieChart({ data, dataKey, nameKey, colors, label, showCaption, description, size, height, showLegend, numberFormat, donut, emptyMessage, className, id, }: PieChartProp): import("react").JSX.Element;

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

@@ -1,6 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Cell, Legend, Pie, PieChart as RPieChart, ResponsiveContainer, Tooltip } from "recharts";
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart as RPieChart,
+  ResponsiveContainer,
+  Tooltip,
+  assertRechartsPeer
+} from "./recharts-peer.js";
 import { EmptyState } from "../data-display/empty-state.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame.js";
@@ -11,6 +19,7 @@ function PieChart({
   nameKey,
   colors,
   label,
+  showCaption = true,
   description,
   size = "md",
   height,
@@ -21,6 +30,7 @@ function PieChart({
   className,
   id
 }) {
+  assertRechartsPeer();
   const { t } = useTranslation();
   const fmt = useChartNumberFormat(numberFormat);
   const hasData = data.length > 0;
@@ -36,6 +46,7 @@ function PieChart({
     ChartFrame,
     {
       label,
+      showCaption,
       description,
       summaryRows: summary.rows,
       imgSummary: summary.img,

package/dist/components/charts/recharts-peer.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The ONE module in `@godxjp/ui` that touches the optional `recharts` peer.
+ *
+ * WHY IT EXISTS (gh#409 · 6). `recharts` is declared optional in `peerDependenciesMeta`, so a
+ * bundler that cannot resolve it substitutes an empty stub, and EVERY named import of that stub
+ * becomes its own `[MISSING_EXPORT]` diagnostic. A consumer who had not installed recharts got 18
+ * of them, spread across `dist/components/charts/**`, none of which said what to install.
+ *
+ * Reading the peer through a NAMESPACE import removes those bindings — there is no named export
+ * left to be missing. ONE named import is kept on purpose: it is what still fails the BUILD (a
+ * silent build followed by a blank page at load is worse than a red build), and because the
+ * bundler prints the offending SOURCE LINE, its local alias is written as the remedy — so the
+ * single remaining diagnostic reads
+ *
+ *   [MISSING_EXPORT] "ResponsiveContainer" is not exported by
+ *     "__vite-optional-peer-dep:recharts:@godxjp/ui".
+ *     ╭─[ …/dist/components/charts/recharts-peer.js:3:10 ]
+ *   3 │ import { ResponsiveContainer as install_recharts_or_use_charts_compact_bar_trend } from "recharts";
+ *
+ * which names the package, the fix, and the alternative that needs no peer at all.
+ *
+ * `assertRechartsPeer` covers the bundlers that resolve a missing optional peer to a silent empty
+ * object instead of a throwing stub: there the first chart to render says what is missing.
+ *
+ * Do NOT `import … from "recharts"` anywhere else in the library.
+ */
+import * as peer from "recharts";
+/** What a consumer has to do. Kept as one string so the message cannot drift between call sites. */
+export declare const RECHARTS_PEER_MESSAGE: string;
+/**
+ * Throw the remedy instead of an `undefined is not a component` render error. Called by each
+ * recharts-backed chart before it renders anything.
+ */
+export declare function assertRechartsPeer(): void;
+export declare const Area: <DataPointType = any, ValueAxisType = any>(props: peer.AreaProps<DataPointType, ValueAxisType>) => import("react").ReactElement, AreaChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
+    ref?: React.Ref<SVGSVGElement>;
+}) => React.ReactElement, Bar: <DataPointType = any, ValueAxisType = any>(props: peer.BarProps<DataPointType, ValueAxisType>) => import("react").ReactElement, BarChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
+    ref?: React.Ref<SVGSVGElement>;
+}) => React.ReactElement, CartesianGrid: typeof peer.CartesianGrid, Cell: import("react").FunctionComponent<peer.CellProps>, Legend: import("react").MemoExoticComponent<(outsideProps: peer.LegendProps) => React.ReactPortal | null>, Line: {
+    <DataPointType = any, ValueAxisType = any>(props: peer.LineProps<DataPointType, ValueAxisType>): import("react").ReactElement;
+    (props: peer.LineProps<any, any>): import("react").ReactElement;
+}, LineChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
+    ref?: React.Ref<SVGSVGElement>;
+}) => React.ReactElement, Pie: {
+    <DataPointType = any, DataValueType = any>(outsideProps: peer.PieProps<DataPointType, DataValueType>): import("react").ReactElement;
+    (outsideProps: peer.PieProps<any, any>): import("react").ReactElement;
+}, PieChart: <DataPointType = any>(props: import("recharts/types/util/types").PolarChartProps<DataPointType> & {
+    ref?: React.Ref<SVGSVGElement>;
+}) => React.ReactElement, ResponsiveContainer: import("react").ForwardRefExoticComponent<peer.ResponsiveContainerProps & import("react").RefAttributes<HTMLDivElement>>, Tooltip: typeof peer.Tooltip, XAxis: <DataPointType = any, DataValueType = any>(props: peer.XAxisProps<DataPointType, DataValueType>) => import("react").ReactElement, YAxis: <DataPointType = any, DataValueType = any>(props: peer.YAxisProps<DataPointType, DataValueType>) => import("react").ReactElement;

package/dist/components/charts/recharts-peer.js

@@ -0,0 +1,45 @@
+"use client";
+import * as peer from "recharts";
+import { ResponsiveContainer as install_recharts_or_use_charts_compact_bar_trend } from "recharts";
+const RECHARTS_PEER_MESSAGE = '@godxjp/ui charts need the optional peer dependency "recharts" (^2.13.0 || ^3.0.0), which is not installed. Install it \u2014 `pnpm add recharts` / `npm i recharts` \u2014 or, for a dependency-free trend mark, import { CompactBarTrend } from "@godxjp/ui/charts/compact-bar-trend".';
+function assertRechartsPeer() {
+  if (typeof install_recharts_or_use_charts_compact_bar_trend === "undefined") {
+    throw new Error(RECHARTS_PEER_MESSAGE);
+  }
+}
+const {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} = peer;
+export {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  RECHARTS_PEER_MESSAGE,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  assertRechartsPeer
+};

package/dist/components/data-display/card.d.ts

@@ -1,3 +1,4 @@
+import type { GapProp, PadProp, PadRawProp } from "../../props/vocabulary/index.js";
 import * as React from "react";
 import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp } from "../../props/vocabulary/index.js";
@@ -97,6 +98,11 @@ export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttri
     flush?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export type CardBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    pad?: PadProp;
+    padRaw?: PadRawProp;
+    gap?: GapProp;
+    surface?: "muted";
+    border?: "none" | "block-start" | "block-end" | "both";
     /** Right-aligned actions slot (settings/save), Ant `tabBarExtraContent`-style. */
     extra?: React.ReactNode;
 };
@@ -107,6 +113,11 @@ export type CardBarProps = React.HTMLAttributes<HTMLDivElement> & {
  * border is enough).
  */
 export declare const CardBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    pad?: PadProp;
+    padRaw?: PadRawProp;
+    gap?: GapProp;
+    surface?: "muted";
+    border?: "none" | "block-start" | "block-end" | "both";
     /** Right-aligned actions slot (settings/save), Ant `tabBarExtraContent`-style. */
     extra?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -134,6 +145,6 @@ export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 /** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
 export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, accentPlacement, className, ...props }: StatCardProps): React.JSX.Element;
-/** Header actions slot — pair with `CardHeader className="flex flex-row …"`. */
+/** Header actions slot — compose beside CardTitle inside CardHeader; the header owns positioning. */
 export declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/data-display/card.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { padStyle, padStepToken } from "../../lib/variants.js";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 const Card = React.forwardRef(
@@ -74,10 +75,27 @@ const CardFooter = React.forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 const CardBar = React.forwardRef(
-  ({ className, children, extra, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, "data-slot": "card-bar", className: cn("ui-card-bar", className), ...props, children: [
-    /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-main", className: "ui-card-bar-main", children }),
-    extra != null ? /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-extra", className: "ui-card-bar-extra", children: extra }) : null
-  ] })
+  ({ className, children, extra, pad, padRaw, gap, surface, border, style, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-surface": surface,
+      "data-border": border,
+      "data-pad-raw": padRaw === void 0 ? void 0 : "",
+      style: {
+        ...style,
+        ...padStyle(pad, padRaw),
+        ...gap === void 0 ? void 0 : { gap: padStepToken(gap) }
+      },
+      "data-slot": "card-bar",
+      className: cn("ui-card-bar", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-main", className: "ui-card-bar-main", children }),
+        extra != null ? /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-extra", className: "ui-card-bar-extra", children: extra }) : null
+      ]
+    }
+  )
 );
 CardBar.displayName = "CardBar";
 function getDeltaTone(delta, inverse) {

package/dist/components/data-display/code-block.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true, maxHeight = "none", size = "sm", language, className, ...rest }, ref) {
+const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true, maxHeight = "none", size = "sm", language, className, style, ...rest }, ref) {
   const scrolls = maxHeight !== "none" || !wrap;
   return /* @__PURE__ */ jsx(
     "pre",
@@ -9,7 +9,11 @@ const CodeBlock = React.forwardRef(function CodeBlock2({ children, wrap = true,
       ref,
       "data-slot": "code-block",
       "data-wrap": wrap ? void 0 : "false",
-      "data-max-height": maxHeight === "none" ? void 0 : maxHeight,
+      "data-max-height": typeof maxHeight === "string" && maxHeight !== "none" ? maxHeight : void 0,
+      style: {
+        ...style,
+        ...typeof maxHeight === "object" ? { maxBlockSize: maxHeight.value, overflow: "auto" } : void 0
+      },
       "data-size": size === "sm" ? void 0 : size,
       "data-language": language,
       tabIndex: scrolls ? 0 : void 0,

package/dist/components/data-display/data-table.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { flexRender, type ColumnVisibilityState, type OnChangeFn, type PaginationState } from "@tanstack/react-table";
-import type { BreakpointProp, ColumnDefProp, DensityProp, SortStateProp, TablePresetProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, ColumnDefProp, DensityProp, OnColumnFilterChangeProp, OnRowProp, SortDirectionProp, SortStateProp, TableExpandableProp, TablePaginationProp, TablePresetProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp } from "../../props/vocabulary/index.js";
 export type Density = DensityProp;
 /**
  * Lean column definition — the simple, common-case column API. `render` shapes a cell; `sortable`
@@ -25,8 +25,14 @@ interface DataTableProps<T> {
     /** Global search term, surfaced by DataTable.Search. */
     globalFilter?: string;
     onGlobalFilterChange?: (next: string) => void;
-    /** Numbered-pagination state, surfaced by DataTable.Pagination. */
-    pagination?: PaginationState;
+    /**
+     * Numbered-pagination state, surfaced by DataTable.Pagination. THREE shapes, all accepted:
+     * the TanStack `{ pageIndex, pageSize }` this prop has always taken; antd's
+     * `TablePaginationConfig` object (`{ current, pageSize, total, pageSizeOptions,
+     * showSizeChanger, onChange }`, 1-based like antd); and `false`, which hides the pager
+     * entirely (antd `pagination={false}`).
+     */
+    pagination?: PaginationState | TablePaginationProp | false;
     onPaginationChange?: OnChangeFn<PaginationState>;
     /** Total server row count (manual pagination) — drives the page count. */
     rowCount?: number;
@@ -76,10 +82,39 @@ interface DataTableProps<T> {
      * classes are appended last, so they win over the built-in hover/selected fills.
      */
     rowClassName?: (row: T) => string | undefined;
+    /**
+     * Full row-selection configuration (antd `rowSelection`). Supersedes — and can be mixed with —
+     * `selectable` / `selected` / `onSelectChange`, which drive the same state.
+     */
+    rowSelection?: TableRowSelectionProp<T>;
+    /** Expandable detail rows (antd `expandable`). */
+    expandable?: TableExpandableProp<T>;
+    /** Footer totals row (antd `summary`) — rendered in a real `<tfoot>` so it survives sorting. */
+    summary?: TableSummaryProp<T>;
+    /** Scroll envelope (antd `scroll`) — `x` a minimum inline size, `y` a maximum body block size. */
+    scroll?: TableScrollProp;
+    /**
+     * Sticky header (antd `sticky`). Supersedes `stickyHeader` when given; the object form carries
+     * the `offsetHeader` a page-level fixed topbar needs.
+     */
+    sticky?: TableStickyProp;
+    /** Per-row DOM props merged onto the `<tr>` (antd `onRow`). */
+    onRow?: OnRowProp<T>;
+    /** Draw the outer frame and the vertical rules between columns (antd `bordered`). */
+    bordered?: boolean;
+    /** Explain the next sort step in a tooltip on every sortable header (antd `showSorterTooltip`). */
+    showSorterTooltip?: boolean;
+    /** Table-wide sort cycle (antd `sortDirections`); a column's own value wins. */
+    sortDirections?: SortDirectionProp[];
+    /**
+     * Column filters changed (antd hands the same map to `onChange`). Pair it with a column's
+     * `filteredValue` to drive filtering from a server query.
+     */
+    onFilterChange?: OnColumnFilterChangeProp;
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: controlledPagination, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, className, children, }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;