@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/copyable-id.js

@@ -3,8 +3,11 @@ import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
 import { useEffect, useRef, useState } from "react";
 import { css, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
+import { Field, FieldLabel } from "./form-layout.js";
 import { icon } from "./icon.js";
+import { Input } from "./input.js";
 import { useCiridaeLocale } from "./locale.js";
+import { useToast } from "./toast.js";
 const copyableId = css({
     display: "inline-flex",
     alignItems: "center",
@@ -23,20 +26,41 @@ const shownLength = 8;
 const copiedFeedbackMs = 1500;
 /**
  * Copies `value` (or what it returns, read at the moment of copying) and reports `copied` for a
- * moment afterwards, for a check-mark confirmation.
+ * moment afterwards, for a check-mark confirmation. A copy the browser refuses, such as a denied
+ * permission or an insecure origin with no clipboard, goes to `onError`, or without one raises the
+ * kit's error toast, so a reader never pastes a stale clipboard thinking it holds the value.
  */
-export function useCopy(value, onCopied) {
+export function useCopy(value, onCopied, onError) {
     const [copied, setCopied] = useState(false);
+    const { labels } = useCiridaeLocale();
+    const toast = useToast();
     useEffect(() => {
         if (!copied)
             return;
         const timer = setTimeout(() => setCopied(false), copiedFeedbackMs);
         return () => clearTimeout(timer);
     }, [copied]);
-    const copy = () => void navigator.clipboard.writeText(typeof value === "function" ? value() : value).then(() => {
+    // `await` rather than `.catch`: an insecure origin has no `navigator.clipboard` at all and
+    // throws before a promise exists.
+    const writeValue = async () => {
+        try {
+            await navigator.clipboard.writeText(typeof value === "function" ? value() : value);
+        }
+        catch (error) {
+            if (onError)
+                onError(error);
+            else
+                toast.add({
+                    variant: "error",
+                    title: labels.clipboard.copyFailed,
+                    description: labels.clipboard.copyByHand,
+                });
+            return;
+        }
         setCopied(true);
         onCopied?.();
-    });
+    };
+    const copy = () => void writeValue();
     return { copied, copy };
 }
 const inlineCopy = css({
@@ -51,8 +75,8 @@ const inlineCopy = css({
     _focusVisible: { focusRing: "outer", borderRadius: "control" },
 });
 /** A button that copies `value`, its icon turning into a check once copied. */
-export function CopyButton({ value, label, variant = "raised", size, onCopied, className, }) {
-    const { copied, copy } = useCopy(value, onCopied);
+export function CopyButton({ value, label, variant = "raised", size, onCopied, onError, className, }) {
+    const { copied, copy } = useCopy(value, onCopied, onError);
     const { labels } = useCiridaeLocale();
     const name = copied
         ? labels.common.copied
@@ -134,3 +158,19 @@ export function CopyableText({ text, label, className, }) {
     };
     return (_jsxs("span", { className: copyableText, "data-ciridae-ui": "", onMouseEnter: measureOverflow, children: [_jsx("span", { ref: box, className: cx(marqueeBox, className), title: text, children: _jsx("span", { children: text }) }), _jsx("button", { type: "button", className: copyTextButton, "aria-label": labels.common.copy(label), "data-copied": copied || undefined, onClick: copy, children: copied ? (_jsx(CheckIcon, { className: icon({ size: "small" }) })) : (_jsx(CopyIcon, { className: icon({ size: "small" }) })) })] }));
 }
+const copyFieldRow = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) auto",
+    alignItems: "end",
+    gap: "layout.tightGap",
+});
+const copyFieldValue = css({ fontFamily: "mono", fontSize: "code" });
+/**
+ * A value to paste elsewhere, such as a command or a connection code, as a labelled read-only
+ * field with a copy button: it selects on focus and reads like the field it is pasted into. The
+ * row stays while there is no value yet, showing `placeholder`. The value is masked from session
+ * recorders, since such values are often credentials.
+ */
+export function CopyField({ label, value, placeholder, className, }) {
+    return (_jsxs("div", { className: cx(copyFieldRow, className), "data-ciridae-ui": "", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { children: label }), _jsx(Input, { className: cx("ph-no-capture", copyFieldValue), "data-sentry-mask": true, onFocus: (event) => event.target.select(), placeholder: placeholder, readOnly: true, value: value ?? "" })] }), value !== undefined && _jsx(CopyButton, { label: label, value: value, variant: "ghost" })] }));
+}

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

@@ -1,8 +1,11 @@
 import { Separator as BaseSeparator } from "@base-ui/react/separator";
 import type { ComponentProps, ReactNode } from "react";
 export type AvatarColor = "neutral" | "blue" | "violet" | "green" | "teal" | "yellow" | "orange" | "pink" | "red";
-/** 12, 16, 20, 24, 26, 32, and 44 pixels; the Round 2 set is `menu` through `large`. */
-export type AvatarSize = "micro" | "mark" | "small" | "menu" | "row" | "medium" | "large";
+/**
+ * 12, 14, 20, 24, 26, 28, 32 (`row` and `medium`) and 44 pixels; the kit's set is `menu` through
+ * `large`.
+ */
+export type AvatarSize = "micro" | "mark" | "small" | "menu" | "agent" | "owner" | "row" | "medium" | "large";
 /**
  * The one mark for a person, an organization, a project, or the agent: `src` shows the photo or
  * logo, and the initials derived from `label` stand in until it loads or when there is none. A
@@ -19,24 +22,30 @@ export declare function Avatar({ label, src, size, kind, icon, badge, color, cla
     icon?: ReactNode;
     badge?: ReactNode;
     color?: AvatarColor;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+/** The slot where an owner's avatar goes, before anyone owns the record. */
+export declare function UnassignedAvatar({ size, className, ...props }: ComponentProps<"span"> & {
+    size?: "small" | "owner" | "row";
+}): import("react").JSX.Element;
 export declare function Divider({ inset, className, ...props }: Omit<ComponentProps<typeof BaseSeparator>, "className"> & {
     className?: string;
     /** `menu` insets it to a menu's or a popover's rows. */
     inset?: "none" | "menu";
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export type DescriptionRow = [label: string, value: ReactNode];
 /**
  * Label-value pairs in two columns. Rows whose value is `null` or `undefined` are left out, so
- * callers can list every field a record may carry. `compact` tightens the rows for dense output.
+ * callers can list every field a record may carry. `compact` sets them as key-value pairs;
+ * `layout="facts"` as fact rows, each value at the far edge over a hairline.
  * `loading` keeps every row's label and draws a placeholder for its value, so the list arrives at
  * the size it loads to; build the rows from the record that may not have loaded yet.
  */
-export declare function DescriptionList({ rows, density, loading, className, ...props }: ComponentProps<"dl"> & {
+export declare function DescriptionList({ rows, density, layout, loading, className, ...props }: ComponentProps<"dl"> & {
     rows: DescriptionRow[];
     density?: "default" | "compact";
+    layout?: "columns" | "facts";
     loading?: boolean;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * Scrollable block of literal text, such as a command or a generated file. `copy` adds a copy
  * button with that text, which can differ from what is shown (e.g. masked secrets).
@@ -44,4 +53,26 @@ export declare function DescriptionList({ rows, density, loading, className, ...
 export declare function CodeBlock({ className, copy, copyLabel, ...props }: ComponentProps<"pre"> & {
     copy?: string;
     copyLabel?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+/** Where a field's value came from, or who vouches for it: a 14px icon and a line. */
+export type DetailFieldNote = {
+    icon?: ReactNode;
+    label: ReactNode;
+};
+export type DetailFieldProps = Omit<ComponentProps<"div">, "children"> & {
+    label: ReactNode;
+    value: ReactNode;
+    /** Where the value came from, such as "Net 30 from Aug 22". */
+    source?: DetailFieldNote;
+    /** Who or what vouches for it, such as "Checked by Dana R.". */
+    assurance?: DetailFieldNote;
+    /** Beside the value, such as a Contested badge; its line under the value is `description`. */
+    badge?: ReactNode;
+    description?: ReactNode;
+    /** A trailing button, such as Resolve. */
+    action?: ReactNode;
+    state?: "default" | "selected" | "inset" | "highlighted";
+    /** A hairline under the row; the last row of a list leaves it out. Defaults to true. */
+    divider?: boolean;
+};
+export declare function DetailField({ label, value, source, assurance, badge, description, action, state, divider, className, ...props }: DetailFieldProps): import("react").JSX.Element;

package/dist/components/data-display.js

@@ -6,10 +6,11 @@ import { Fragment } from "react";
 import { css, cva, cx } from "#primitives/css";
 import { CopyButton } from "./copyable-id.js";
 import { Skeleton } from "./skeleton.js";
-// The neutral avatar is the Round 2 one: a person or the agent on the raised glass face, an
-// organization as the text-colored tile the workspace switcher shows. A colored one derives its
-// fill, text, and border from one `--avatar-hue`, mixed toward the surface or the text color so it
-// holds in both themes. The hues are brighter than the accent tokens so avatars read apart.
+// The neutral avatar is a person or the agent on the raised glass gradient inside its gradient
+// hairline, an organization the text-colored tile the workspace switcher shows. A colored one
+// derives its fill, text, and border from one `--avatar-hue`, mixed toward the opaque surface or
+// the text color so it holds in both themes. The hues are brighter than the accent tokens so
+// avatars read apart.
 const avatar = css({
     display: "inline-grid",
     placeItems: "center",
@@ -41,24 +42,25 @@ const avatar = css({
     // A person, or the agent: a circle on the glass face, or a pale circle in its hue.
     "&[data-kind=user], &[data-kind=agent]": {
         borderRadius: "round",
-        background: "bg.raised",
+        background: "token(gradients.raised)",
         color: "fg.primary",
     },
+    "--edge": "token(gradients.border.raised)",
     "&[data-kind=agent], &[data-icon]": { color: "fg.secondary" },
     // An icon fills the same share of every size, so marks match whatever avatar they sit beside.
     "&:is([data-kind=agent], [data-icon]) svg": { width: "58%", height: "58%" },
     // An icon stands on its own, with no circle or ring, so it fills most of its box.
     "&[data-icon]": { background: "transparent", "& svg": { width: "80%", height: "80%" } },
     "&:is([data-kind=user], [data-kind=agent]):not([data-color=neutral])": {
-        borderColor: "color-mix(in srgb, var(--avatar-hue) 30%, token(colors.bg.card))",
-        background: "color-mix(in srgb, var(--avatar-hue) 16%, token(colors.bg.card))",
+        borderColor: "color-mix(in srgb, var(--avatar-hue) 30%, token(colors.bg.surface))",
+        background: "color-mix(in srgb, var(--avatar-hue) 16%, token(colors.bg.surface))",
         color: "color-mix(in srgb, var(--avatar-hue) 70%, token(colors.fg.primary))",
     },
     // A project: a pale tile edged and lettered in the hue's strong shade.
     "&[data-kind=project]": {
         borderRadius: "20%",
-        borderColor: "color-mix(in srgb, var(--avatar-hue) 70%, token(colors.bg.card))",
-        background: "color-mix(in srgb, var(--avatar-hue) 14%, token(colors.bg.card))",
+        borderColor: "color-mix(in srgb, var(--avatar-hue) 70%, token(colors.bg.surface))",
+        background: "color-mix(in srgb, var(--avatar-hue) 14%, token(colors.bg.surface))",
         color: "color-mix(in srgb, var(--avatar-hue) 75%, token(colors.fg.primary))",
         fontWeight: "semibold",
     },
@@ -81,12 +83,16 @@ const avatar = css({
     "&[data-size=large]": {
         width: "avatar.large",
         height: "avatar.large",
-        fontSize: "heading",
+        fontSize: "body",
     },
     // A list row's owner, and the workspace switcher's mark.
     "&[data-size=row]": { width: "avatar.row", height: "avatar.row" },
+    // A record's owner, and the empty slot where one goes.
+    "&[data-size=owner]": { width: "avatar.owner", height: "avatar.owner" },
     // A menu item's leading avatar.
     "&[data-size=menu]": { width: "avatar.menu", height: "avatar.menu" },
+    // The agent standing on its own, the kit's Agent avatar.
+    "&[data-size=agent]": { width: "avatar.agent", height: "avatar.agent" },
     "&[data-size=small]": { width: "avatar.small", height: "avatar.small", fontSize: "avatar.small" },
     // The inline mark's size, so a project's tile lines up with icons and provider logos.
     "&[data-size=mark]": { width: "mark.inline", height: "mark.inline", fontSize: "avatar.mark" },
@@ -125,7 +131,22 @@ const avatarBadge = css({
 export function Avatar({ label, src, size = "medium", kind = "user", icon, badge, color = "neutral", className, ...props }) {
     const initials = labelInitials(label, kind === "organization" ? 1 : 2);
     const glass = !icon && color === "neutral" && (kind === "user" || kind === "agent");
-    return (_jsxs(BaseAvatar.Root, { ...props, "aria-label": label, "data-ciridae-ui": "", "data-size": size, "data-kind": kind, "data-color": color, "data-icon": icon ? "" : undefined, "data-edge": glass ? "glass" : undefined, className: cx(avatar, className), children: [src && _jsx(BaseAvatar.Image, { src: src, alt: "", className: avatarImage }), _jsx(BaseAvatar.Fallback, { className: avatarFallback, children: icon ?? (kind === "agent" ? _jsx(SparkleIcon, { weight: "fill" }) : initials) }), badge && _jsx("span", { className: avatarBadge, children: badge })] }));
+    return (_jsxs(BaseAvatar.Root, { ...props, "aria-label": label, "data-ciridae-ui": "", "data-size": size, "data-kind": kind, "data-color": color, "data-icon": icon ? "" : undefined, "data-edge": glass ? "gradient" : undefined, className: cx(avatar, className), children: [src && _jsx(BaseAvatar.Image, { src: src, alt: "", className: avatarImage }), _jsx(BaseAvatar.Fallback, { className: avatarFallback, children: icon ?? (kind === "agent" ? _jsx(SparkleIcon, { weight: "fill" }) : initials) }), badge && _jsx("span", { className: avatarBadge, children: badge })] }));
+}
+// No owner yet: the avatar's circle as a dashed ring, empty.
+const unassignedAvatar = css({
+    display: "inline-block",
+    flexShrink: "0",
+    width: "avatar.owner",
+    height: "avatar.owner",
+    border: "1px dashed token(colors.border.control)",
+    borderRadius: "round",
+    "&[data-size=small]": { width: "avatar.small", height: "avatar.small" },
+    "&[data-size=row]": { width: "avatar.row", height: "avatar.row" },
+});
+/** The slot where an owner's avatar goes, before anyone owns the record. */
+export function UnassignedAvatar({ size = "owner", className, ...props }) {
+    return (_jsx("span", { ...props, className: cx(unassignedAvatar, className), "data-ciridae-ui": "", "data-size": size }));
 }
 /** Up to `count` capital initials from a name's first words. */
 function labelInitials(label, count) {
@@ -141,13 +162,13 @@ const divider = cva({
     variants: {
         inset: {
             none: {},
-            // Between a menu's or a popover's groups: inset to its rows' text, a little room above and
-            // below.
+            // Between a menu's or a popover's groups, as the glass menu's divider: inset to its rows'
+            // text, a little room above and below.
             menu: {
                 width: "auto",
                 marginBlock: "layout.tightGap",
                 marginInline: "menu.itemInline",
-                background: "border.panel",
+                background: "border.divider",
             },
         },
     },
@@ -155,31 +176,60 @@ const divider = cva({
 export function Divider({ inset = "none", className, ...props }) {
     return (_jsx(BaseSeparator, { ...props, "data-ciridae-ui": "", className: cx(divider({ inset }), className) }));
 }
+/*
+ * Labels are the muted grey, values the text color. `facts` sets each label against its value at
+ * the far edge, a hairline under every row but the last; `compact` is the key-value pair, its
+ * labels a 120px column of 12px type.
+ */
 const descriptionList = cva({
     base: {
         display: "grid",
         gridTemplateColumns: "max-content minmax(0, 1fr)",
         margin: "none",
-        "& dt": { color: "fg.muted" },
+        "& dt": { color: "fg.label" },
         "& dd": { margin: "none", overflowWrap: "anywhere" },
         "& a": { color: "inherit" },
     },
     variants: {
         density: {
             default: { rowGap: "layout.controlGap", columnGap: "layout.sectionGap" },
-            compact: { rowGap: "control.trackInset", columnGap: "layout.clusterGap" },
+            compact: {
+                gridTemplateColumns: "120px minmax(0, 1fr)",
+                rowGap: "layout.clusterGap",
+                columnGap: "layout.contentGap",
+                "& dt": { fontSize: "code", fontWeight: "medium" },
+                "& dd": { fontSize: "body", fontWeight: "medium" },
+            },
+        },
+        layout: {
+            columns: {},
+            facts: {
+                gridTemplateColumns: "minmax(0, 1fr) auto",
+                alignItems: "center",
+                rowGap: "0",
+                columnGap: "layout.contentGap",
+                "& dt, & dd": {
+                    paddingBlock: "panel.default",
+                    borderBottom: "1px solid token(colors.border.divider)",
+                    lineHeight: "tight",
+                },
+                "& > :nth-last-child(-n+2)": { borderBottom: "0" },
+                "& dt": { fontSize: "code", fontWeight: "medium" },
+                "& dd": { fontSize: "body", fontWeight: "medium", textAlign: "end" },
+            },
         },
     },
 });
 const placeholderValueWidths = [96, 120, 144];
 /**
  * Label-value pairs in two columns. Rows whose value is `null` or `undefined` are left out, so
- * callers can list every field a record may carry. `compact` tightens the rows for dense output.
+ * callers can list every field a record may carry. `compact` sets them as key-value pairs;
+ * `layout="facts"` as fact rows, each value at the far edge over a hairline.
  * `loading` keeps every row's label and draws a placeholder for its value, so the list arrives at
  * the size it loads to; build the rows from the record that may not have loaded yet.
  */
-export function DescriptionList({ rows, density = "default", loading = false, className, ...props }) {
-    return (_jsx("dl", { ...props, "aria-busy": loading || undefined, "data-ciridae-ui": "", className: cx(descriptionList({ density }), className), children: rows.map(([label, value], index) => loading ? (_jsxs(Fragment, { children: [_jsx("dt", { children: label }), _jsx("dd", { children: _jsx(Skeleton, { shape: "text", style: { width: placeholderValueWidths[index % placeholderValueWidths.length] } }) })] }, label)) : value === null || value === undefined ? null : (_jsxs(Fragment, { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value })] }, label))) }));
+export function DescriptionList({ rows, density = "default", layout = "columns", loading = false, className, ...props }) {
+    return (_jsx("dl", { ...props, "aria-busy": loading || undefined, "data-ciridae-ui": "", className: cx(descriptionList({ density, layout }), className), children: rows.map(([label, value], index) => loading ? (_jsxs(Fragment, { children: [_jsx("dt", { children: label }), _jsx("dd", { children: _jsx(Skeleton, { shape: "text", style: { width: placeholderValueWidths[index % placeholderValueWidths.length] } }) })] }, label)) : value === null || value === undefined ? null : (_jsxs(Fragment, { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value })] }, label))) }));
 }
 const codeBlock = css({
     margin: "none",
@@ -219,3 +269,72 @@ export function CodeBlock({ className, copy, copyLabel = "text", ...props }) {
         return block;
     return (_jsxs("div", { className: codeBlockFrame, children: [block, _jsx("span", { className: codeBlockCopy, children: _jsx(CopyButton, { value: copy, label: copyLabel }) })] }));
 }
+/*
+ * Detail field: one field of a record as a row, the kit's Detail field. A 150px label column of
+ * 12px grey beside the 14px value and, under it, where the value came from and who vouches for it,
+ * or a description when a badge rides beside the value. `selected` is the open field; `inset`
+ * sets it in the selected glass between hairlines; `highlighted` is the warm band for a field that
+ * needs a look, such as two sources that disagree.
+ */
+const detailField = css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "layout.contentGap",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    "&[data-divider]": { borderBottom: "1px solid token(colors.border.divider)" },
+    "&[data-state=default]:hover": { background: "bg.rowHover" },
+    "&[data-state=selected]": { background: "token(gradients.selected)" },
+    "&:is([data-state=inset], [data-state=highlighted])": {
+        borderBlock: "1px solid token(colors.border.divider)",
+    },
+    "&[data-state=inset]": { background: "token(gradients.selected)" },
+    "&[data-state=highlighted]": { background: "bg.warningTint" },
+});
+// The label sits on the value's first line: 14px of text, or the badge's 24.
+const detailFieldLabel = css({
+    display: "flex",
+    alignItems: "center",
+    flexShrink: "0",
+    width: "150px",
+    minHeight: "token(fontSizes.body)",
+    color: "fg.label",
+    fontSize: "code",
+    "[data-badge] > &": { minHeight: "control.shortcut" },
+});
+const detailFieldValue = css({ display: "grid", gap: "control.iconGap", flex: "1", minWidth: "0" });
+// A badge that does not fit beside the value drops under it.
+const detailFieldValueLine = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    color: "fg.primary",
+    fontSize: "body",
+    "[data-badge] &": { minHeight: "control.shortcut" },
+});
+const detailFieldNote = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    columnGap: "layout.contentGap",
+    rowGap: "layout.tightGap",
+    color: "fg.muted",
+    fontSize: "code",
+    _light: { color: "fg.secondary" },
+});
+const detailFieldNoteItem = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    "& > svg": { flexShrink: "0", fontSize: "icon.small" },
+});
+const detailFieldAction = css({ flexShrink: "0", alignSelf: "center" });
+export function DetailField({ label, value, source, assurance, badge, description, action, state = "default", divider = true, className, ...props }) {
+    const notes = [source, assurance].filter((note) => note !== undefined);
+    return (_jsxs("div", { ...props, className: cx(detailField, className), "data-ciridae-ui": "", "data-state": state, "data-divider": divider || undefined, "data-badge": badge !== undefined || undefined, children: [_jsx("span", { className: detailFieldLabel, children: label }), _jsxs("span", { className: detailFieldValue, children: [_jsxs("span", { className: detailFieldValueLine, children: [value, badge] }), notes.length > 0 && (_jsx("span", { className: detailFieldNote, children: notes.map((note, index) => (_jsxs("span", { className: detailFieldNoteItem, children: [note.icon, note.label] }, index))) })), description !== undefined && _jsx("span", { className: detailFieldNote, children: description })] }), action !== undefined && _jsx("span", { className: detailFieldAction, children: action })] }));
+}

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

@@ -33,15 +33,19 @@ export type TableColumnMeta = {
     locked?: boolean;
     /** Holds the row's own link instead of the first column, when the first holds links of its own. */
     rowLink?: boolean;
-    skeleton?: ReactNode;
+    /**
+     * What the column draws while the list loads, shaped like its cells: `lines` a primary line over
+     * a smaller one, `pill` a badge, `person` an avatar and a name, or any node. A line by default.
+     */
+    skeleton?: "lines" | "pill" | "person" | ReactNode;
     /** Drops the column on phone-width screens, so the columns that identify a row keep their room. */
     hideOnNarrow?: boolean;
 };
 declare const tableFeatureSet: {
-    rowSortingFeature: import("@tanstack/react-table/dist").TableFeature;
-    columnVisibilityFeature: import("@tanstack/react-table/dist").TableFeature;
-    columnOrderingFeature: import("@tanstack/react-table/dist").TableFeature;
-    sortedRowModel: (table: import("@tanstack/react-table/dist").Table<any, any>) => () => import("@tanstack/react-table/dist").RowModel<any, any>;
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     columnMeta: TableColumnMeta;
 };
 export type TableFeatureSet = typeof tableFeatureSet;
@@ -52,10 +56,10 @@ export type TableColumns<Row extends RowData> = ReturnType<ColumnHelper<TableFea
  * columns render without one. See `TableColumnMeta` for the per-column options.
  */
 export declare function createTableColumns<Row extends RowData>(): ColumnHelper<{
-    rowSortingFeature: import("@tanstack/react-table/dist").TableFeature;
-    columnVisibilityFeature: import("@tanstack/react-table/dist").TableFeature;
-    columnOrderingFeature: import("@tanstack/react-table/dist").TableFeature;
-    sortedRowModel: (table: import("@tanstack/react-table/dist").Table<any, any>) => () => import("@tanstack/react-table/dist").RowModel<any, any>;
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     columnMeta: TableColumnMeta;
 }, Row>;
 /** A column's id and name as column settings list them. */
@@ -87,6 +91,14 @@ export type DataGridProps<Row extends RowData> = Omit<ComponentProps<"div">, "ch
     onSortingChange?: (sorting: SortingState) => void;
     /** The rows arrive in the order `sorting` asks for, such as from a server. */
     manualSorting?: boolean;
+    /**
+     * Shows one page of the sorted rows, `number` counting from 1, for a list paged in the browser
+     * under a `Pagination`. Leave it out when `data` is already the page.
+     */
+    page?: {
+        number: number;
+        rowsPerPage: number;
+    };
     /** Adds a checkbox column; a function says which rows can be ticked. */
     enableRowSelection?: boolean | ((row: Row) => boolean);
     rowSelection?: RowSelectionState;
@@ -156,7 +168,7 @@ export type DataGridProps<Row extends RowData> = Omit<ComponentProps<"div">, "ch
  * hover-revealed row actions, groups, loading, empty and no-results states. `role="table"`; Enter
  * on a pressable row opens it.
  */
-export declare function DataGrid<Row extends RowData>({ data, columns, getRowId, variant, density, sorting: sortingProp, defaultSorting, onSortingChange, manualSorting, enableRowSelection, rowSelection: rowSelectionProp, defaultRowSelection, onRowSelectionChange, stickySelectColumn, columnVisibility: columnVisibilityProp, defaultColumnVisibility, onColumnVisibilityChange, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, headerMenu, filters, onFiltersChange, getRowHref, renderRowLink, onRowClick, activeRowId, keyboardNavigation, virtualize, rowActions, renderRowDetail, groupBy, renderGroupRow, loading, empty, noResults, filtered, hideHeader, fill, narrowScreenLayout, footer, labels: ownLabels, className, frameClassName, style, ...props }: DataGridProps<Row>): import("@types/react").JSX.Element;
+export declare function DataGrid<Row extends RowData>({ data, columns, getRowId, variant, density, sorting: sortingProp, defaultSorting, onSortingChange, manualSorting, page, enableRowSelection, rowSelection: rowSelectionProp, defaultRowSelection, onRowSelectionChange, stickySelectColumn, columnVisibility: columnVisibilityProp, defaultColumnVisibility, onColumnVisibilityChange, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, headerMenu, filters, onFiltersChange, getRowHref, renderRowLink, onRowClick, activeRowId, keyboardNavigation, virtualize, rowActions, renderRowDetail, groupBy, renderGroupRow, loading, empty, noResults, filtered, hideHeader, fill, narrowScreenLayout, footer, labels: ownLabels, className, frameClassName, style, ...props }: DataGridProps<Row>): import("react").JSX.Element;
 export type TableProps<Row extends RowData> = Omit<DataGridProps<Row>, "defaultSorting" | "empty"> & {
     /** The sort the table starts with; `defaultSorting` on `DataGrid`. */
     initialSorting?: SortingState;
@@ -167,4 +179,4 @@ export type TableProps<Row extends RowData> = Omit<DataGridProps<Row>, "defaultS
  * `DataGrid` with the plain look: flush with its section, heads in caps, rows that light on hover
  * when they lead somewhere.
  */
-export declare function Table<Row extends RowData>({ variant, initialSorting, emptyMessage, ...props }: TableProps<Row>): import("@types/react").JSX.Element;
+export declare function Table<Row extends RowData>({ variant, initialSorting, emptyMessage, ...props }: TableProps<Row>): import("react").JSX.Element;