@nadicodeai/ui 12.1.62 → 12.1.63

package/dist/components/collection-toolbar.d.ts

@@ -5,6 +5,12 @@ export type CollectionToolbarProps = Omit<ComponentPropsWithoutRef<"div">, "chil
     search?: ReactNode;
     actions?: ReactNode;
     status?: ReactNode;
+    /**
+     * `glass` holds the bar over rows that scroll under it. `plain` is the bar on
+     * a page whose rows do not pass under it, such as a section of Nadia's Edit
+     * page: glass there shows nothing through it and reads as a bordered box.
+     */
+    surface?: "glass" | "plain";
 };
-export declare function CollectionToolbar({ label, controls, search, actions, status, ...props }: CollectionToolbarProps): import("react").JSX.Element;
+export declare function CollectionToolbar({ label, controls, search, actions, status, surface, ...props }: CollectionToolbarProps): import("react").JSX.Element;
 //# sourceMappingURL=collection-toolbar.d.ts.map

package/dist/components/collection-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/collection-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,EAAE,sBAAsB,+BAoCxB"}
+{"version":3,"file":"collection-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/collection-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B,CAAC;AAeF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,sBAAsB,+BAwCxB"}

package/dist/components/collection-toolbar.js

@@ -1,4 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CollectionToolbar({ label, controls, search, actions, status, ...props }) {
-    return (_jsxs("div", { "data-slot": "collection-toolbar", ...props, role: "toolbar", "aria-label": label, className: "relative flex min-w-0 flex-wrap items-center gap-2 pb-4", children: [controls ? (_jsx("div", { "data-slot": "collection-toolbar-controls", className: "flex min-w-0 max-w-full flex-wrap items-center gap-2", children: controls })) : null, search ? (_jsx("div", { "data-slot": "collection-toolbar-search", className: "min-w-0 basis-full sm:flex-1 sm:basis-64", children: search })) : null, actions ? (_jsx("div", { "data-slot": "collection-toolbar-actions", className: "ml-auto flex min-w-0 flex-wrap items-center gap-2", children: actions })) : null, status ? _jsx("div", { className: "absolute right-0 bottom-0", children: status }) : null] }));
+/*
+ * A page's collection toolbar is a control bar over its own rows: glass on the
+ * floating rung, held at the top of the scrolling content while the rows pass
+ * under it (DESIGN.md "Elevation & Depth"). Inside a titled TableCard the bar
+ * stands on the card's solid ground, where glass would show nothing, so there
+ * it is the plain row it always was, and a page whose rows never pass under
+ * the bar asks for that plain row with `surface="plain"`.
+ */
+const ON_PAGE = "sticky top-3 z-20 mb-3 rounded-xl p-2 nc-glass nc-elevation-floating";
+const PLAIN = "relative mb-3";
+const IN_CARD = "[[data-slot=table-card-toolbar]_&]:relative [[data-slot=table-card-toolbar]_&]:z-auto [[data-slot=table-card-toolbar]_&]:mb-0 [[data-slot=table-card-toolbar]_&]:rounded-none [[data-slot=table-card-toolbar]_&]:p-0 [[data-slot=table-card-toolbar]_&]:pb-4 [[data-slot=table-card-toolbar]_&]:[background:none] [[data-slot=table-card-toolbar]_&]:[backdrop-filter:none] [[data-slot=table-card-toolbar]_&]:[box-shadow:none]";
+export function CollectionToolbar({ label, controls, search, actions, status, surface = "glass", ...props }) {
+    // A search alone is the plain row: a search box never stands in a box of its
+    // own (DESIGN.md "Menus and commands").
+    const drawn = surface === "glass" && (controls || actions) ? "glass" : "plain";
+    return (_jsxs("div", { "data-slot": "collection-toolbar", ...props, role: "toolbar", "aria-label": label, "data-surface": drawn, className: `flex min-w-0 flex-wrap items-center gap-2 ${drawn === "glass" ? ON_PAGE : PLAIN} ${IN_CARD}`, children: [controls ? (_jsx("div", { "data-slot": "collection-toolbar-controls", className: "flex min-w-0 max-w-full flex-wrap items-center gap-2", children: controls })) : null, search ? (_jsx("div", { "data-slot": "collection-toolbar-search", className: "min-w-0 basis-full sm:flex-1 sm:basis-64", children: search })) : null, actions ? (_jsx("div", { "data-slot": "collection-toolbar-actions", className: "ml-auto flex min-w-0 flex-wrap items-center gap-2", children: actions })) : null, status ? _jsx("div", { className: "absolute right-0 bottom-0", children: status }) : null] }));
 }

package/dist/components/combobox.js

@@ -20,7 +20,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
     return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
 }
 function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
-    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-md border-0 nc-glass text-popover-foreground nc-elevation-floating data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", anchoredOverlayMotion, className), ...props }) }) }));
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-lg border-0 nc-glass text-popover-foreground nc-elevation-floating data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", anchoredOverlayMotion, className), ...props }) }) }));
 }
 function ComboboxList({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-nadicode-xxs data-empty:p-0", className), ...props }));

package/dist/components/command.js

@@ -6,7 +6,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, }
 import { InputGroup, InputGroupAddon } from "./input-group.js";
 import { SearchIcon, CheckIcon } from "lucide-react";
 function Command({ className, ...props }) {
-    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-md! nc-glass p-nadicode-xxs text-popover-foreground", className), ...props }));
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-lg! nc-glass p-nadicode-xxs text-popover-foreground", className), ...props }));
 }
 function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
     return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-md! bg-transparent p-0!", className), motion: "instant", showCloseButton: showCloseButton, children: children })] }));

package/dist/components/confirm-dialog.d.ts

@@ -1,11 +1,13 @@
 import type * as React from "react";
+import { type ResolvedMessage } from "./product-message.js";
 interface ConfirmDialogProps {
     open: boolean;
     onConfirm: () => void;
     onCancel: () => void;
     title: React.ReactNode;
     description?: React.ReactNode;
-    error?: React.ReactNode;
+    /** Why the confirmed action did not happen, from the product's catalogue. */
+    error?: ResolvedMessage | null;
     confirmLabel?: React.ReactNode;
     /** The confirm button's own word while the action runs. */
     confirmPendingLabel?: React.ReactNode;

package/dist/components/confirm-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/components/confirm-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAcpC,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAOD,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAwB,EACxB,mBAAmB,EACnB,WAAsB,EACtB,WAAmB,EACnB,OAAe,GAChB,EAAE,kBAAkB,qBAkCpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/components/confirm-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAapC,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAErF,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAOD,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAwB,EACxB,mBAAmB,EACnB,WAAsB,EACtB,WAAmB,EACnB,OAAe,GAChB,EAAE,kBAAkB,qBA4CpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/confirm-dialog.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "./alert-dialog.js";
 import { Button } from "./button.js";
 import { FieldError } from "./field.js";
 import { PendingLabel } from "./pending-label.js";
+import { bodyBeyondTitle } from "./product-message.js";
 // Fully controlled confirm dialog over the registry AlertDialog parts. The
 // confirm action is a plain Button (not AlertDialogAction) so a failed confirm
 // can keep the dialog open; the only closing gesture is Escape (alert dialogs
@@ -14,6 +15,6 @@ function ConfirmDialog({ open, onConfirm, onCancel, title, description, error, c
             if (!nextOpen) {
                 onCancel();
             }
-        }, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), description ? _jsx(AlertDialogDescription, { children: description }) : null, error ? _jsx(FieldError, { children: error }) : null] }), _jsxs(AlertDialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onCancel, disabled: loading, children: cancelLabel }), _jsx(Button, { "aria-busy": loading || undefined, variant: destructive ? "destructive" : "default", onClick: onConfirm, disabled: loading, children: _jsx(PendingLabel, { pending: loading, pendingLabel: confirmPendingLabel ?? confirmLabel, children: confirmLabel }) })] })] }) }));
+        }, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), description ? _jsx(AlertDialogDescription, { children: description }) : null, error ? (_jsxs(FieldError, { className: "break-words", "data-message-code": error.code, children: [_jsx("span", { className: "block font-medium", children: error.title }), bodyBeyondTitle(error) ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "block", children: bodyBeyondTitle(error) })] })) : null] })) : null] }), _jsxs(AlertDialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onCancel, disabled: loading, children: cancelLabel }), _jsx(Button, { "aria-busy": loading || undefined, variant: destructive ? "destructive" : "default", onClick: onConfirm, disabled: loading, children: _jsx(PendingLabel, { pending: loading, pendingLabel: confirmPendingLabel ?? confirmLabel, children: confirmLabel }) })] })] }) }));
 }
 export { ConfirmDialog };

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

@@ -0,0 +1,154 @@
+import * as React from "react";
+import { columnFilteringFeature, columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_includesString, filterFn_inNumberRange, filterFn_weakEquals, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_datetime, sortFn_text, type CellData, type Column, type ColumnDef, type RowData } from "@tanstack/react-table";
+import { type EmptyStateProps } from "./empty-state.js";
+import { type TableCompactLayout } from "./table-layouts.js";
+type DataTableFeatures = {
+    columnFilteringFeature: typeof columnFilteringFeature;
+    columnVisibilityFeature: typeof columnVisibilityFeature;
+    rowPaginationFeature: typeof rowPaginationFeature;
+    rowSortingFeature: typeof rowSortingFeature;
+    filteredRowModel: ReturnType<typeof createFilteredRowModel>;
+    paginatedRowModel: ReturnType<typeof createPaginatedRowModel>;
+    sortedRowModel: ReturnType<typeof createSortedRowModel>;
+    filterFns: {
+        arrIncludes: typeof filterFn_arrIncludes;
+        equals: typeof filterFn_equals;
+        inDateRange: typeof filterFn_inDateRange;
+        includesString: typeof filterFn_includesString;
+        inNumberRange: typeof filterFn_inNumberRange;
+        weakEquals: typeof filterFn_weakEquals;
+    };
+    sortFns: {
+        alphanumeric: typeof sortFn_alphanumeric;
+        datetime: typeof sortFn_datetime;
+        text: typeof sortFn_text;
+    };
+    columnMeta: {
+        numeric?: boolean;
+        narrow?: boolean;
+        prose?: boolean;
+    };
+};
+/** A column definition typed for this table's feature set. */
+export type DataTableColumnDef<TData extends RowData, TValue extends CellData = CellData> = ColumnDef<DataTableFeatures, TData, TValue>;
+/** A column of this table, as handed to the column-visibility menu. */
+export type DataTableColumn<TData extends RowData, TValue extends CellData = CellData> = Column<DataTableFeatures, TData, TValue>;
+export type DataTablePagination = {
+    hasPrevious: boolean;
+    hasNext: boolean;
+    isPending?: boolean;
+    onPrevious: () => void;
+    onNext: () => void;
+};
+/** The anchor props a row link receives; the app's router renders them. */
+export type DataTableRowLinkProps = Omit<React.ComponentProps<"a">, "href"> & {
+    href: string;
+    "data-row-link": "";
+};
+/**
+ * What the table hands its toolbar: the column-visibility menu and the caller's
+ * actions as one node, and the local search over a fully loaded comparison
+ * with its clear control when the caller asked for one.
+ */
+export type DataTableToolbarSlots = {
+    actions: React.ReactNode | null;
+    search?: {
+        label: string;
+        placeholder: string;
+        value: string;
+        onChange: (value: string) => void;
+    };
+    clear?: {
+        label: string;
+        onClear: () => void;
+    };
+};
+type DataTableBaseProps<TData extends RowData> = {
+    columns: DataTableColumnDef<TData>[];
+    data: TData[];
+    /**
+     * A stable identity for each record. Rows and cells are keyed by it, so a
+     * cell's own state (an open confirmation) follows its record through a live
+     * update that inserts, removes or reorders rows.
+     */
+    getRowId?: (row: TData) => string;
+    /** Local filtering for a fully loaded, non-registry comparison. */
+    filterColumnId?: string;
+    filterPlaceholder?: string;
+    /** Columns retained beside the identity at compact container widths. */
+    primaryColumns: string[];
+    /** Override the column-count default when this comparison needs a later compact breakpoint. */
+    compactLayout?: TableCompactLayout;
+    tableLabel?: string;
+    /**
+     * Names this collection inside its own frame. A page whose whole job is one
+     * collection leaves it out, because the page heading already names it.
+     */
+    heading?: {
+        title: string;
+        description?: string;
+    };
+    /** A count or the paging under the rows; never a help sentence. */
+    footer?: React.ReactNode;
+    /**
+     * Draws the column header row. Rows explain themselves by their cells (an
+     * identity with its orb or mark, a status badge, a tag, a relative time), so
+     * the header row is kept for screen readers only. Opt in only for a table
+     * whose columns are figures a reader cannot tell apart without their names,
+     * such as statements or analytics.
+     */
+    showColumnHeaders?: boolean;
+    /** A fixed comparison inside an existing detail Card keeps that one frame. */
+    embedded?: boolean;
+    summary?: {
+        label: string;
+        value: React.ReactNode;
+    };
+    /** What the table says when it has no rows. */
+    empty: EmptyStateProps;
+    /** What the table says when its own search matches no row; it offers to clear the search. */
+    noMatchMessage?: string;
+    /** Opt in only when hiding secondary columns helps inspect this collection. */
+    columnsLabel?: string;
+    clearSearchLabel?: string;
+    pageLabels?: {
+        previous: string;
+        next: string;
+    };
+    toolbarActions?: React.ReactNode;
+    /** A bounded server page; false keeps a fixed comparison whole. */
+    pagination?: DataTablePagination | false;
+    /** A filter value the app owns (a URL param), applied to one column. */
+    externalFilter?: {
+        columnId: string;
+        value: string;
+    };
+    /** An order the app owns (a URL param): the column ids to sort by, in order. */
+    sorting?: readonly {
+        id: string;
+        desc: boolean;
+    }[];
+    /** Draws the row link; a plain anchor by default. */
+    renderRowLink?: (props: DataTableRowLinkProps) => React.ReactNode;
+    /** Draws the collection toolbar, with the table's search when it has one; the actions alone by default. */
+    renderToolbar?: (slots: DataTableToolbarSlots) => React.ReactNode;
+    /** Wraps the card, such as a frame that keeps it readable while new data loads. */
+    wrapCard?: (card: React.ReactNode) => React.ReactNode;
+};
+type DataTableRowNav<TData extends RowData> = {
+    rowHref?: undefined;
+    rowLabel?: undefined;
+    primaryColumnId?: undefined;
+} | {
+    /** Makes each row navigable through exactly one link placed on the primary cell. */
+    rowHref: (row: TData) => string;
+    /** Purposeful, localized accessible name for the row link (e.g. "Open Studio Rossi"). */
+    rowLabel: (row: TData) => string;
+    /** Column id that carries the link; defaults to the row's first visible column. */
+    primaryColumnId?: string;
+};
+export type DataTableProps<TData extends RowData> = DataTableBaseProps<TData> & DataTableRowNav<TData>;
+export declare function columnMenuLabel<TData extends RowData, TValue extends CellData = CellData>(column: DataTableColumn<TData, TValue>): string;
+export declare function DataTable<TData extends RowData>({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders, embedded, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink, renderToolbar, wrapCard, }: DataTableProps<TData>): React.JSX.Element;
+export {};
+//# sourceMappingURL=data-table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-table.js

@@ -0,0 +1,283 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { flushSync } from "react-dom";
+import { columnFilteringFeature, columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_includesString, filterFn_inNumberRange, filterFn_weakEquals, flexRender, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_datetime, sortFn_text, tableFeatures, useTable, } from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { CollectionToolbar } from "./collection-toolbar.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { EmptyState } from "./empty-state.js";
+import { Table, TableBody, TableCell, TableDetailRow, TableHead, TableHeader, TableRecordGroup, TableRow, } from "./table.js";
+import { TableCard } from "./table-card.js";
+import { tableCompactLayouts } from "./table-layouts.js";
+const dataTableFeatures = tableFeatures({
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    rowPaginationFeature,
+    rowSortingFeature,
+    filteredRowModel: createFilteredRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    sortedRowModel: createSortedRowModel(),
+    filterFns: {
+        arrIncludes: filterFn_arrIncludes,
+        equals: filterFn_equals,
+        inDateRange: filterFn_inDateRange,
+        includesString: filterFn_includesString,
+        inNumberRange: filterFn_inNumberRange,
+        weakEquals: filterFn_weakEquals,
+    },
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        datetime: sortFn_datetime,
+        text: sortFn_text,
+    },
+    columnMeta: {},
+});
+function isNumericColumn(column) {
+    return column.columnDef.meta?.numeric === true;
+}
+// DESIGN.md, "Tables and missing values": a row reads as its record's name on
+// one line, then facts at their own width. Against `table-layout: auto` a
+// declared width is only a hint and a percentage is honoured first, so a
+// control column asks for `1px`, the identity claims a third and gives it back
+// down to its floor with an ellipsis, a prose column holds its words on one
+// line up to a cap and cuts the rest with an ellipsis, and every other cell
+// holds its fact on one line. A record is one line at every desktop width.
+const NARROW_COLUMN_CLASS = "w-px whitespace-nowrap";
+const IDENTITY_COLUMN_CLASS = "w-1/3 max-w-0 min-w-24 sm:min-w-44";
+const IDENTITY_CONTENT_CLASS = "truncate";
+const PROSE_COLUMN_CLASS = "min-w-32";
+const PROSE_CONTENT_CLASS = "max-w-64 truncate";
+const CELL_INSET_CLASS = "px-4";
+// A name cut with an ellipsis is read whole on hover. The title is set when the
+// pointer or focus arrives, and only while some part of the name is cut.
+function titleWhenCut(event) {
+    const element = event.currentTarget;
+    const cut = [element, ...element.querySelectorAll("*")].some((node) => node.scrollWidth > node.clientWidth);
+    const text = element.textContent?.replace(/\s+/g, " ").trim();
+    if (cut && text)
+        element.title = text;
+    else
+        element.removeAttribute("title");
+}
+// In the compact layout every other visible column already takes its narrowest
+// width, so the identity takes the whole rest of the row.
+const COMPACT_IDENTITY_CLASS = {
+    tight: "@max-xl/table:w-full",
+    standard: "@max-3xl/table:w-full",
+    wide: "@max-5xl/table:w-full",
+    spacious: "@max-6xl/table:w-full",
+};
+function widthClass(column, identityColumnId, compactLayout, identityAlone) {
+    if (column.columnDef.meta?.narrow === true)
+        return NARROW_COLUMN_CLASS;
+    if (column.columnDef.meta?.prose === true)
+        return PROSE_COLUMN_CLASS;
+    if (column.id !== identityColumnId)
+        return false;
+    // Beside controls alone the identity takes the whole row, so the controls
+    // sit at its trailing edge instead of a third of the way across.
+    return cn(IDENTITY_COLUMN_CLASS, identityAlone && "w-full", compactLayout && COMPACT_IDENTITY_CLASS[compactLayout]);
+}
+// The id TanStack gives a column: its own, or the accessor key it reads.
+function definitionId(column) {
+    if (!column)
+        return undefined;
+    if (column.id)
+        return column.id;
+    return "accessorKey" in column ? String(column.accessorKey) : undefined;
+}
+// The column-visibility menu and the detail row name each column by its
+// localized header; the id is a fallback for a header drawn by a function.
+export function columnMenuLabel(column) {
+    const header = column.columnDef.header;
+    return typeof header === "string" ? header : column.id;
+}
+function collapseClass(columnId, primaryColumns, compactLayout) {
+    if (primaryColumns.includes(columnId))
+        return undefined;
+    return compactLayout ? tableCompactLayouts[compactLayout].column : undefined;
+}
+function useShownLayout() {
+    const [shownLayout, setShownLayout] = React.useState("both");
+    const probeRef = React.useCallback((probe) => {
+        const container = probe?.closest('[data-slot="table-container"]');
+        if (!probe || !container || typeof ResizeObserver === "undefined")
+            return;
+        const read = () => getComputedStyle(probe).display === "none" ? "columns" : "details";
+        let shown = read();
+        setShownLayout(shown);
+        const show = (next) => {
+            if (next === shown)
+                return;
+            shown = next;
+            // Observers run after layout and before paint: committing here keeps any
+            // frame from showing a width whose layout has not been rendered.
+            flushSync(() => setShownLayout(next));
+        };
+        let printing = false;
+        const observer = new ResizeObserver(() => {
+            if (!printing)
+                show(read());
+        });
+        const beforePrint = () => {
+            printing = true;
+            show("both");
+        };
+        const afterPrint = () => {
+            printing = false;
+            show(read());
+        };
+        observer.observe(container);
+        window.addEventListener("beforeprint", beforePrint);
+        window.addEventListener("afterprint", afterPrint);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("beforeprint", beforePrint);
+            window.removeEventListener("afterprint", afterPrint);
+            setShownLayout("both");
+        };
+    }, []);
+    return [shownLayout, probeRef];
+}
+function LayoutProbeLeadingRecords({ layout, probeRef, children, }) {
+    return (_jsxs(_Fragment, { children: [layout ? (_jsx("tbody", { ref: probeRef, "aria-hidden": "true", "data-slot": "table-layout-probe", className: tableCompactLayouts[layout].details }, layout)) : null, children] }));
+}
+const defaultRowLink = (props) => _jsx("a", { ...props });
+function DefaultToolbar({ actions }) {
+    return actions ? _jsx(CollectionToolbar, { label: "", actions: actions }) : null;
+}
+export function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders = false, embedded = false, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink = defaultRowLink, renderToolbar = DefaultToolbar, wrapCard, }) {
+    const [sorting, setSorting] = React.useState([]);
+    const [columnFilters, setColumnFilters] = React.useState([]);
+    const [columnVisibility, setColumnVisibility] = React.useState({});
+    // One column absorbs the slack: a column of sentences when the table has
+    // one, otherwise the identity, the first column that is not a control.
+    const identityColumnId = definitionId(columns.find((column) => column.meta?.narrow !== true && column.meta?.prose !== true));
+    const identityAlone = columns.every((column) => column.meta?.narrow === true || definitionId(column) === identityColumnId);
+    // An external pager means `data` is already one bounded server page:
+    // `manualPagination` makes the paginated row model a passthrough so every
+    // row of the current page renders.
+    const table = useTable({
+        features: dataTableFeatures,
+        data,
+        columns,
+        ...(getRowId ? { getRowId } : {}),
+        manualPagination: Boolean(pagination) || pagination === false || !pageLabels,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        state: {
+            sorting: externalSorting ? [...externalSorting] : sorting,
+            columnFilters: externalFilter
+                ? [{ id: externalFilter.columnId, value: externalFilter.value }]
+                : columnFilters,
+            columnVisibility,
+        },
+    });
+    const hasDetailColumns = table
+        .getAllLeafColumns()
+        .some((column) => !primaryColumns.includes(column.id));
+    const compactLayout = hasDetailColumns
+        ? (requestedCompactLayout ??
+            (columns.length > 7 ? "spacious" : columns.length > 5 ? "wide" : "standard"))
+        : undefined;
+    const [shownLayout, layoutProbeRef] = useShownLayout();
+    const canPreviousPage = pagination ? pagination.hasPrevious : table.getCanPreviousPage();
+    const canNextPage = pagination ? pagination.hasNext : table.getCanNextPage();
+    const goPreviousPage = pagination ? pagination.onPrevious : () => table.previousPage();
+    const goNextPage = pagination ? pagination.onNext : () => table.nextPage();
+    const filterColumn = filterColumnId ? table.getColumn(filterColumnId) : undefined;
+    const rawFilterValue = filterColumn?.getFilterValue();
+    const filterValue = typeof rawFilterValue === "string" ? rawFilterValue : "";
+    const canHideColumns = Boolean(columnsLabel) && table.getAllColumns().some((column) => column.getCanHide());
+    const columnsControl = canHideColumns ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(Button, { variant: "outline", children: [columnsLabel, _jsx(ChevronDown, { "aria-hidden": "true", "data-icon": "inline-end" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuGroup, { children: table
+                        .getAllColumns()
+                        .filter((column) => column.getCanHide())
+                        .map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: columnMenuLabel(column) }, column.id))) }) })] })) : null;
+    const rows = table.getRowModel().rows;
+    const colSpan = Math.max(1, table.getVisibleLeafColumns().length);
+    const renderRow = (row) => {
+        const href = rowHref?.(row.original);
+        const label = rowLabel?.(row.original);
+        const visibleCells = row.getVisibleCells();
+        // The link rides one cell only, the named primary column or the first
+        // visible one, so the row is a single tab stop with a purposeful name.
+        const configuredPrimaryVisible = primaryColumnId !== undefined && table.getColumn(primaryColumnId)?.getIsVisible();
+        const primaryId = configuredPrimaryVisible ? primaryColumnId : visibleCells[0]?.column.id;
+        const detailCells = visibleCells.filter((cell) => !primaryColumns.includes(cell.column.id));
+        return (_jsxs(TableRecordGroup, { children: [_jsx(TableRow, { "data-href": href, className: cn(href && "cursor-pointer"), detailLayout: detailCells.length > 0 ? compactLayout : undefined, onClick: href
+                        ? (event) => {
+                            const target = event.target;
+                            // The row link and any interactive descendant own their own
+                            // clicks; only a bare-cell click is delegated to the link.
+                            if (!(target instanceof Element) ||
+                                target.closest("a, button, input, select, textarea, label, [role='button'], [role='menuitem'], [role='checkbox']")) {
+                                return;
+                            }
+                            event.currentTarget.querySelector("a[data-row-link]")?.click();
+                        }
+                        : undefined, children: visibleCells.map((cell) => {
+                        const numeric = isNumericColumn(cell.column);
+                        const isPrimaryLink = href && cell.column.id === primaryId;
+                        const collapsed = collapseClass(cell.column.id, primaryColumns, compactLayout);
+                        const className = cn(CELL_INSET_CLASS, numeric && "text-right tabular-nums wrap-normal", widthClass(cell.column, identityColumnId, compactLayout, identityAlone), collapsed);
+                        const drawnOnlyInDetailRow = Boolean(collapsed) && shownLayout === "details" && !isPrimaryLink;
+                        if (drawnOnlyInDetailRow) {
+                            return _jsx(TableCell, { className: className }, cell.id);
+                        }
+                        const content = flexRender(cell.column.columnDef.cell, cell.getContext());
+                        const identity = cell.column.id === identityColumnId;
+                        const prose = cell.column.columnDef.meta?.prose === true;
+                        return (_jsx(TableCell, { className: className, children: isPrimaryLink ? (renderRowLink({
+                                href,
+                                "aria-label": label,
+                                "data-row-link": "",
+                                className: cn("-m-2 block rounded-md p-2", identity && IDENTITY_CONTENT_CLASS),
+                                ...(identity ? { onFocus: titleWhenCut, onPointerEnter: titleWhenCut } : {}),
+                                children: content,
+                            })) : identity ? (_jsx("div", { className: IDENTITY_CONTENT_CLASS, onFocus: titleWhenCut, onPointerEnter: titleWhenCut, children: content })) : prose ? (_jsx("div", { className: PROSE_CONTENT_CLASS, onFocus: titleWhenCut, onPointerEnter: titleWhenCut, children: content })) : (content) }, cell.id));
+                    }) }), detailCells.length > 0 && shownLayout !== "columns" ? (_jsx(TableDetailRow, { layout: compactLayout, colSpan: visibleCells.filter((cell) => !collapseClass(cell.column.id, primaryColumns, compactLayout)).length, facts: detailCells.map((cell) => ({
+                        id: cell.id,
+                        label: columnMenuLabel(cell.column),
+                        numeric: isNumericColumn(cell.column),
+                        value: flexRender(cell.column.columnDef.cell, cell.getContext()),
+                    })) })) : null] }, row.id));
+    };
+    const tableNode = (_jsxs(Table, { "aria-label": tableLabel, className: "nc-type-body-sm", compactDetails: compactLayout, children: [_jsx(TableHeader, { className: showColumnHeaders && rows.length > 0 ? undefined : "sr-only", children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { className: cn(CELL_INSET_CLASS, isNumericColumn(header.column) && "text-right tabular-nums", widthClass(header.column, identityColumnId, compactLayout, identityAlone), collapseClass(header.column.id, primaryColumns, compactLayout)), children: header.isPlaceholder
+                            ? null
+                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(LayoutProbeLeadingRecords, { layout: compactLayout, probeRef: layoutProbeRef, children: rows.length > 0 ? (rows.map(renderRow)) : (_jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, className: cn(CELL_INSET_CLASS, "whitespace-normal"), children: _jsx(EmptyState, { scope: "card", ...(filterValue && noMatchMessage && clearSearchLabel && filterColumn
+                                    ? {
+                                        kind: "noResults",
+                                        message: noMatchMessage,
+                                        clear: {
+                                            label: clearSearchLabel,
+                                            onClick: () => filterColumn.setFilterValue(""),
+                                        },
+                                    }
+                                    : empty) }) }) }) })) })] }));
+    const actions = columnsControl || toolbarActions ? (_jsxs(_Fragment, { children: [columnsControl, toolbarActions] })) : null;
+    // The toolbar belongs to the collection, so it sits at the top of the frame
+    // the collection owns: under the card's own title when it has one, and above
+    // the card when the page itself is the collection.
+    const toolbarRow = renderToolbar({
+        actions,
+        ...(filterColumn
+            ? {
+                search: {
+                    label: filterPlaceholder ?? "",
+                    placeholder: filterPlaceholder ?? "",
+                    value: filterValue,
+                    onChange: (value) => filterColumn.setFilterValue(value),
+                },
+                ...(clearSearchLabel
+                    ? { clear: { label: clearSearchLabel, onClear: () => filterColumn.setFilterValue("") } }
+                    : {}),
+            }
+            : {}),
+    });
+    const card = (_jsx(TableCard, { surface: embedded ? "plain" : "resting", ...(heading ? { title: heading.title } : {}), ...(heading?.description ? { description: heading.description } : {}), ...(heading && toolbarRow ? { toolbar: toolbarRow } : {}), ...(summary ? { summary } : {}), ...(footer ? { footer } : {}), children: tableNode }));
+    return (_jsxs("div", { className: "min-w-0 w-full nc-type-body-sm", "data-slot": "data-table", children: [heading ? null : toolbarRow, wrapCard ? wrapCard(card) : card, !pageLabels || pagination === false || (!canPreviousPage && !canNextPage) ? null : (_jsxs("div", { className: "flex items-center justify-end gap-2 py-4", children: [_jsx(Button, { variant: "outline", onClick: goPreviousPage, disabled: !canPreviousPage || (pagination && pagination.isPending), children: pageLabels.previous }), _jsx(Button, { variant: "outline", onClick: goNextPage, disabled: !canNextPage || (pagination && pagination.isPending), children: pageLabels.next })] }))] }));
+}

package/dist/components/dialog.js

@@ -28,7 +28,7 @@ function DialogContent({ className, children, showCloseButton = true, closeLabel
                 // clip this popup with `overflow-hidden`: that hides Base UI's
                 // trailing focus guard, and Tab then walks out of the dialog into the
                 // page behind it.
-                "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100svh-var(--nc-xl))] w-full max-w-[calc(100%-var(--nc-xl))] -translate-x-1/2 -translate-y-1/2 flex-col gap-nadicode-md overflow-y-auto rounded-md border-0 bg-popover p-nadicode-lg text-sm text-popover-foreground nc-elevation-modal outline-none sm:max-w-sm", motion === "instant" ? instantModalOverlayMotion : modalOverlayMotion, className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
+                "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100svh-var(--nc-xl))] w-full max-w-[calc(100%-var(--nc-xl))] -translate-x-1/2 -translate-y-1/2 flex-col gap-nadicode-md overflow-y-auto rounded-lg border-0 bg-popover p-nadicode-lg text-sm text-popover-foreground nc-elevation-modal outline-none sm:max-w-sm", motion === "instant" ? instantModalOverlayMotion : modalOverlayMotion, className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));

package/dist/components/drawer.js

@@ -36,7 +36,7 @@ function DrawerContent({ className, children, ...props }) {
     const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
     return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && _jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : undefined }), _jsx(DrawerPrimitive.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto", children: _jsxs(DrawerPrimitive.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? "" : undefined, className: cn(
                     // Base.
-                    "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-0 bg-popover text-sm text-popover-foreground nc-elevation-modal transition-[transform,opacity] duration-[var(--nc-duration-drawer)] ease-[var(--nc-ease-drawer)] outline-none select-none data-[swipe-direction=down]:rounded-t-md data-[swipe-direction=left]:rounded-r-md data-[swipe-direction=right]:rounded-l-md data-[swipe-direction=up]:rounded-b-md motion-reduce:transition-opacity", 
+                    "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-0 bg-popover text-sm text-popover-foreground nc-elevation-modal transition-[transform,opacity] duration-[var(--nc-duration-drawer)] ease-[var(--nc-ease-drawer)] outline-none select-none data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=left]:rounded-r-lg data-[swipe-direction=right]:rounded-l-lg data-[swipe-direction=up]:rounded-b-lg motion-reduce:transition-opacity", 
                     // Nested.
                     "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", 
                     // Bleed.

package/dist/components/dropdown-menu.d.ts

@@ -15,8 +15,16 @@ declare function DropdownMenuItem({ className, iconOnly, inset, variant, ...prop
     inset?: boolean;
     variant?: "default" | "destructive";
 }): React.JSX.Element;
-declare function DropdownMenuCommand({ icon, children, className, ...props }: Omit<React.ComponentProps<typeof DropdownMenuItem>, "iconOnly"> & {
+/**
+ * A command in a record's or a page's menu: its label first, a decorative icon
+ * at the trailing edge. A command that cannot run now is `disabled` and stays
+ * in place, greyed, with its `reason` under the label (DESIGN.md "Menus and
+ * commands").
+ */
+declare function DropdownMenuCommand({ icon, children, className, reason, ...props }: Omit<React.ComponentProps<typeof DropdownMenuItem>, "iconOnly"> & {
     icon: React.ReactElement;
+    /** Why the command cannot run now, read after its name. */
+    reason?: React.ReactNode;
 }): React.JSX.Element;
 declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
 declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {