@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/copyable-id.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+const copyableId = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "fg.muted",
+    fontSize: "caption",
+    cursor: "pointer",
+    "& > code": { fontFamily: "numeric", color: "fg.primary" },
+    _hover: { "& > code": { textDecoration: "underline" } },
+    _focusVisible: { focusRing: "outer" },
+});
+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.
+ */
+export function useCopy(value, onCopied) {
+    const [copied, setCopied] = useState(false);
+    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(() => {
+        setCopied(true);
+        onCopied?.();
+    });
+    return { copied, copy };
+}
+const inlineCopy = css({
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "inherit",
+    cursor: "pointer",
+    _hover: { color: "fg.primary" },
+    _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);
+    const { labels } = useCiridaeLocale();
+    const name = copied
+        ? labels.common.copied
+        : label === undefined
+            ? labels.common.copyAction
+            : labels.common.copy(label);
+    const Icon = copied ? CheckIcon : CopyIcon;
+    if (variant === "inline") {
+        return (_jsx("button", { type: "button", className: cx(inlineCopy, className), "aria-label": name, "data-ciridae-ui": "", onClick: copy, children: _jsx(Icon, { className: icon({ size: "compact" }) }) }));
+    }
+    return (_jsx(IconButton, { "aria-label": name, className: className, size: size, variant: variant, onClick: copy, children: _jsx(Icon, { className: icon({ size: "small" }) }) }));
+}
+/**
+ * A long identifier, such as an error's trace ID, shown short and copied whole on click so a
+ * reader can hand it to support.
+ */
+export function CopyableId({ value, label = "ID", className, }) {
+    const { copied, copy } = useCopy(value);
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("button", { type: "button", className: cx(copyableId, className), title: value, "aria-label": labels.common.copyValue(label, value), "data-ciridae-ui": "", onClick: copy, children: [label, _jsx("code", { children: value.slice(0, shownLength) }), copied ? (_jsx(CheckIcon, { className: icon({ size: "small" }) })) : (_jsx(CopyIcon, { className: icon({ size: "small" }) }))] }));
+}
+// The copy control shows while the text is hovered or focused and turns into a check once copied;
+// hidden, it takes no room, so the text keeps the whole width. Text wider than its box (set its
+// `maxWidth` through `className`) scrolls on hover to show the rest, then slides back.
+const copyableText = css({
+    display: "flex",
+    alignItems: "center",
+    minWidth: "0",
+    "&:hover > button, &:focus-within > button, & > button[data-copied]": {
+        width: "auto",
+        marginInlineStart: "control.iconGap",
+        opacity: "1",
+    },
+    "&:hover > span > span": {
+        transform: "translateX(calc(var(--marquee-shift, 0px) * -1))",
+    },
+});
+const marqueeBox = css({
+    display: "block",
+    minWidth: "0",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    "& > span": {
+        display: "inline-block",
+        transitionProperty: "transform",
+        transitionTimingFunction: "linear",
+        transitionDuration: "var(--marquee-duration, 0s)",
+    },
+    _motionReduce: { "& > span": { transitionDuration: "0s" } },
+});
+const copyTextButton = css({
+    display: "inline-flex",
+    flexShrink: "0",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "fg.muted",
+    cursor: "pointer",
+    width: "0",
+    overflow: "hidden",
+    opacity: "0",
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+});
+/** Scroll speed of overflowing text, in pixels per second. */
+const marqueeSpeed = 60;
+/** Text shown in full with a copy control; `label` names what gets copied, such as a key's name. */
+export function CopyableText({ text, label, className, }) {
+    const box = useRef(null);
+    const { copied, copy } = useCopy(text);
+    const { labels } = useCiridaeLocale();
+    const measureOverflow = () => {
+        const element = box.current;
+        if (!element)
+            return;
+        const overflow = Math.max(element.scrollWidth - element.clientWidth, 0);
+        element.style.setProperty("--marquee-shift", `${overflow}px`);
+        element.style.setProperty("--marquee-duration", `${overflow / marqueeSpeed}s`);
+    };
+    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" }) })) })] }));
+}

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

@@ -0,0 +1,47 @@
+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";
+/**
+ * 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
+ * `user` is a circle, an `organization` a rounded-square tile lettered with one initial, a
+ * `project` a pale tile, and the `agent` a circle with the sparkle. `badge` sits at the
+ * bottom-right corner, e.g. a tiny organization avatar on a user.
+ */
+export declare function Avatar({ label, src, size, kind, icon, badge, color, className, ...props }: ComponentProps<"span"> & {
+    label: string;
+    src?: string | null;
+    size?: AvatarSize;
+    kind?: "user" | "project" | "organization" | "agent";
+    /** A mark in place of initials, for a non-person actor such as a sync or a rule. */
+    icon?: ReactNode;
+    badge?: ReactNode;
+    color?: AvatarColor;
+}): import("@types/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;
+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.
+ * `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"> & {
+    rows: DescriptionRow[];
+    density?: "default" | "compact";
+    loading?: boolean;
+}): import("@types/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).
+ */
+export declare function CodeBlock({ className, copy, copyLabel, ...props }: ComponentProps<"pre"> & {
+    copy?: string;
+    copyLabel?: string;
+}): import("@types/react").JSX.Element;

package/dist/components/data-display.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import { SparkleIcon } from "@phosphor-icons/react";
+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.
+const avatar = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "control.compact",
+    height: "control.compact",
+    // Every variant keeps a 1px border in its box, so the glass ring never shifts the initials.
+    border: "1px solid transparent",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    position: "relative",
+    // Each hue is the palette's: an accent, or the mix of two for the hues a palette has no accent
+    // for, so avatars follow whichever palette the product picked.
+    "&[data-color=blue]": { "--avatar-hue": "token(colors.accent.blue)" },
+    "&[data-color=violet]": {
+        "--avatar-hue": "color-mix(in oklch, token(colors.accent.blue) 55%, token(colors.accent.red))",
+    },
+    "&[data-color=green]": { "--avatar-hue": "token(colors.accent.green)" },
+    "&[data-color=teal]": {
+        "--avatar-hue": "color-mix(in oklch, token(colors.accent.green) 55%, token(colors.accent.blue))",
+    },
+    "&[data-color=yellow]": { "--avatar-hue": "token(colors.accent.yellow)" },
+    "&[data-color=orange]": { "--avatar-hue": "token(colors.accent.bronze)" },
+    "&[data-color=pink]": {
+        "--avatar-hue": "color-mix(in oklch, token(colors.accent.red) 60%, token(colors.accent.brand))",
+    },
+    "&[data-color=red]": { "--avatar-hue": "token(colors.accent.red)" },
+    // 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",
+        color: "fg.primary",
+    },
+    "&[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))",
+        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))",
+        color: "color-mix(in srgb, var(--avatar-hue) 75%, token(colors.fg.primary))",
+        fontWeight: "semibold",
+    },
+    "&[data-kind=project][data-color=neutral]": { "--avatar-hue": "token(colors.fg.muted)" },
+    // An organization's logo: a squircle tile, in the text color or in its hue, bold enough to anchor
+    // a person or project. Its radius scales with the box, so even a micro badge never turns round.
+    "&[data-kind=organization]": {
+        borderRadius: "28%",
+        background: "fg.primary",
+        color: "bg.canvas",
+        fontWeight: "semibold",
+    },
+    "&[data-kind=organization]:not([data-color=neutral])": {
+        borderColor: "color-mix(in srgb, var(--avatar-hue) 75%, black)",
+        background: "var(--avatar-hue)",
+        color: "white",
+    },
+    // A photo fills the whole box: the fill and edge behind it would show as a ring around it.
+    "&[data-kind]:has(img)": { border: "0", background: "transparent" },
+    "&[data-size=large]": {
+        width: "avatar.large",
+        height: "avatar.large",
+        fontSize: "heading",
+    },
+    // A list row's owner, and the workspace switcher's mark.
+    "&[data-size=row]": { width: "avatar.row", height: "avatar.row" },
+    // A menu item's leading avatar.
+    "&[data-size=menu]": { width: "avatar.menu", height: "avatar.menu" },
+    "&[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" },
+    // Sized to sit in another avatar's corner without covering its initials.
+    "&[data-size=micro]": { width: "avatar.micro", height: "avatar.micro", fontSize: "avatar.micro" },
+});
+// Fills the avatar, so an icon's share of it is measured against the whole box.
+const avatarFallback = css({
+    display: "grid",
+    placeItems: "center",
+    width: "100%",
+    height: "100%",
+});
+const avatarImage = css({
+    width: "100%",
+    height: "100%",
+    borderRadius: "inherit",
+    objectFit: "cover",
+});
+const avatarBadge = css({
+    position: "absolute",
+    // Inside the circle: an overhang is clipped by scroll containers such as the compact header.
+    insetInlineEnd: "-1px",
+    bottom: "-1px",
+    display: "inline-flex",
+    // The badge separates with its own edge: a ring would have to match every surface the
+    // avatar sits on, and its corners never matched the badge's.
+});
+/**
+ * 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
+ * `user` is a circle, an `organization` a rounded-square tile lettered with one initial, a
+ * `project` a pale tile, and the `agent` a circle with the sparkle. `badge` sits at the
+ * bottom-right corner, e.g. a tiny organization avatar on a user.
+ */
+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 })] }));
+}
+/** Up to `count` capital initials from a name's first words. */
+function labelInitials(label, count) {
+    return label
+        .split(/\s+/)
+        .map((part) => part[0])
+        .join("")
+        .slice(0, count)
+        .toUpperCase();
+}
+const divider = cva({
+    base: { width: "100%", height: "border.hairline", border: "0", background: "border.subtle" },
+    variants: {
+        inset: {
+            none: {},
+            // Between a menu's or a popover's groups: inset to its rows' text, a little room above and
+            // below.
+            menu: {
+                width: "auto",
+                marginBlock: "layout.tightGap",
+                marginInline: "menu.itemInline",
+                background: "border.panel",
+            },
+        },
+    },
+});
+export function Divider({ inset = "none", className, ...props }) {
+    return (_jsx(BaseSeparator, { ...props, "data-ciridae-ui": "", className: cx(divider({ inset }), className) }));
+}
+const descriptionList = cva({
+    base: {
+        display: "grid",
+        gridTemplateColumns: "max-content minmax(0, 1fr)",
+        margin: "none",
+        "& dt": { color: "fg.muted" },
+        "& dd": { margin: "none", overflowWrap: "anywhere" },
+        "& a": { color: "inherit" },
+    },
+    variants: {
+        density: {
+            default: { rowGap: "layout.controlGap", columnGap: "layout.sectionGap" },
+            compact: { rowGap: "control.trackInset", columnGap: "layout.clusterGap" },
+        },
+    },
+});
+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.
+ * `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))) }));
+}
+const codeBlock = css({
+    margin: "none",
+    padding: "panel.default",
+    maxHeight: "code.maximum",
+    overflow: "auto",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "field",
+    background: "bg.canvas",
+    fontFamily: "mono",
+    fontSize: "code",
+    lineHeight: "body",
+    whiteSpace: "pre",
+});
+// The copy button sits in the block's corner outside the scroller, so it stays put while the text
+// scrolls; the text keeps clear of it.
+const codeBlockFrame = css({
+    position: "relative",
+    minWidth: "0",
+    "& > pre": {
+        paddingInlineEnd: "calc(token(sizes.control.compact) + token(spacing.panel.default) * 2)",
+    },
+});
+const codeBlockCopy = css({
+    display: "flex",
+    position: "absolute",
+    top: "panel.compact",
+    insetInlineEnd: "panel.compact",
+});
+/**
+ * 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).
+ */
+export function CodeBlock({ className, copy, copyLabel = "text", ...props }) {
+    const block = _jsx("pre", { ...props, "data-ciridae-ui": "", className: cx(codeBlock, className) });
+    if (copy === undefined)
+        return block;
+    return (_jsxs("div", { className: codeBlockFrame, children: [block, _jsx("span", { className: codeBlockCopy, children: _jsx(CopyButton, { value: copy, label: copyLabel }) })] }));
+}

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

@@ -0,0 +1,170 @@
+import { type ColumnHelper, type ColumnOrderState, type ColumnVisibilityState, type RowData, type RowSelectionState, type SortingState } from "@tanstack/react-table";
+import { type ComponentProps, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode } from "react";
+import { type FilterField, type FilterValue } from "./filter-bar.js";
+import { type CiridaeLabels } from "./locale.js";
+export type { ColumnOrderState, ColumnVisibilityState, RowSelectionState, SortingState };
+/** Per-column options read by `DataGrid` and `Table`, set as a column's `meta`. */
+export type TableColumnMeta = {
+    /** The column's name where its header is not plain text: menus, column settings. */
+    label?: string;
+    align?: "start" | "end";
+    /** A pixel width, or any grid track such as `"minmax(180px, 1fr)"`. */
+    width?: number | string;
+    /** The least a flexible column needs before the list drops lower-priority columns. */
+    minWidth?: number;
+    /** Takes the room left over and shrinks with an ellipsis. */
+    truncate?: boolean;
+    /**
+     * Dropped as the list's own width narrows, lowest first, before the list scrolls sideways.
+     * Leave it out for a column that always stays.
+     */
+    priority?: number;
+    /** Once dropped, its cell shows under this column's cell instead of going. */
+    foldInto?: string;
+    /** Pinned to the start edge while the rest scroll under it; only the first column can pin. */
+    sticky?: "start";
+    /** The filter the column head's menu sets, for a list with `filters`. */
+    filter?: FilterField;
+    /** `false` keeps a plain head where the list has `headerMenu`. */
+    headerMenu?: boolean;
+    /** The column head menu's sort items, such as `["Lowest first", "Highest first"]`. */
+    sortLabels?: readonly [ascending: string, descending: string];
+    /** Always shown, first, and not movable in column settings or hideable from its head. */
+    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;
+    /** 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>;
+    columnMeta: TableColumnMeta;
+};
+export type TableFeatureSet = typeof tableFeatureSet;
+/** Columns built with `createTableColumns<Row>().columns([...])`, which erases per-column value types. */
+export type TableColumns<Row extends RowData> = ReturnType<ColumnHelper<TableFeatureSet, Row>["columns"]>;
+/**
+ * Column helper bound to the list's features: `accessor` columns sort by their value, `display`
+ * 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>;
+    columnMeta: TableColumnMeta;
+}, Row>;
+/** A column's id and name as column settings list them. */
+export type DataGridColumnInfo = {
+    id: string;
+    label: string;
+    locked: boolean;
+};
+/** Each column's id, plain-text name and whether it is locked, in definition order. */
+export declare function columnInfoOf<Row extends RowData>(columns: TableColumns<Row>): DataGridColumnInfo[];
+/** A group of rows under one heading, as `renderGroupRow` receives it. */
+export type DataGridGroup<Row> = {
+    key: string;
+    rows: readonly Row[];
+    rowIds: readonly string[];
+    /** How much of the group is ticked, for a group checkbox. */
+    selected: "all" | "some" | "none";
+    toggleSelected: (selected: boolean) => void;
+};
+export type DataGridProps<Row extends RowData> = Omit<ComponentProps<"div">, "children" | "onClick"> & {
+    data: readonly Row[];
+    columns: TableColumns<Row>;
+    getRowId: (row: Row) => string;
+    /** `framed` draws the list as a card with sentence-case heads; `plain` sits flush, heads in caps. */
+    variant?: "framed" | "plain";
+    density?: "default" | "compact";
+    sorting?: SortingState;
+    defaultSorting?: SortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+    /** The rows arrive in the order `sorting` asks for, such as from a server. */
+    manualSorting?: boolean;
+    /** Adds a checkbox column; a function says which rows can be ticked. */
+    enableRowSelection?: boolean | ((row: Row) => boolean);
+    rowSelection?: RowSelectionState;
+    defaultRowSelection?: RowSelectionState;
+    onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
+    /** Pins the checkbox column while the rest scroll sideways under it. */
+    stickySelectColumn?: boolean;
+    columnVisibility?: ColumnVisibilityState;
+    defaultColumnVisibility?: ColumnVisibilityState;
+    onColumnVisibilityChange?: (columnVisibility: ColumnVisibilityState) => void;
+    columnOrder?: ColumnOrderState;
+    defaultColumnOrder?: ColumnOrderState;
+    onColumnOrderChange?: (columnOrder: ColumnOrderState) => void;
+    /** A menu on every column head: sort either way, filter by it (with `filters`), hide it. */
+    headerMenu?: boolean;
+    /** The list's filters, which a column head's "Filter by" edits. */
+    filters?: readonly FilterValue[];
+    onFiltersChange?: (filters: FilterValue[]) => void;
+    /** Where a row leads: its first cell, or the `rowLink` column's, holds a real link. */
+    getRowHref?: (row: Row) => string | undefined;
+    /** The row link's element, such as a router `<Link to={href} />`. */
+    renderRowLink?: (href: string) => ReactElement<ComponentProps<"a">>;
+    /** Pressing a row (not one of its controls), or Enter on it; a modified click still follows its link. */
+    onRowClick?: (row: Row, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    /** The row open elsewhere, such as in a side panel; it takes the selected wash. */
+    activeRowId?: string | null;
+    /**
+     * The page's list keys: J / K focus the next or previous row (from the focused or active one),
+     * Enter opens it, X ticks it, Shift+X ticks every row from the last one ticked, and Escape
+     * clears the ticks. Paused while an overlay is open; one list on a page should take it.
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * Draws only the rows near the view, for a long list: the head, pinned columns, groups and the
+     * list keys work as before. A `fill` list scrolls itself; otherwise the nearest scrolling
+     * ancestor does.
+     */
+    virtualize?: boolean;
+    /** A row's own controls, in a fixed end column shown on hover, focus or selection (always on touch). */
+    rowActions?: (row: Row) => ReactNode;
+    /** A full-width line under a row's cells, such as a warning. */
+    renderRowDetail?: (row: Row) => ReactNode;
+    /** Rows with the same key list under one heading, in the order the keys first appear. */
+    groupBy?: (row: Row) => string;
+    renderGroupRow?: (group: DataGridGroup<Row>) => ReactNode;
+    /** Keeps the head and shows placeholder rows. */
+    loading?: boolean;
+    /** Shown when there are no rows at all; `labels.nothingToShow` by default. */
+    empty?: ReactNode;
+    /** Shown instead of `empty` when filters left nothing; set `filtered` or pass non-empty `filters`. */
+    noResults?: ReactNode;
+    filtered?: boolean;
+    hideHeader?: boolean;
+    /** Fill the rest of a flex-column page, scrolling inside with the head pinned. */
+    fill?: boolean;
+    /** `stacked` lists each row on phones with its first cell on a line of its own and the rest under it. */
+    narrowScreenLayout?: "columns" | "stacked";
+    /** After the last row, inside the list's scrolling frame, such as a paged list's load-more marker. */
+    footer?: ReactNode;
+    labels?: Partial<CiridaeLabels["table"]>;
+    /** The frame's class; `className` styles the table element inside it. */
+    frameClassName?: string;
+};
+/**
+ * The list: sortable heads (or a head menu), row selection with a select-all box, hidden and
+ * reordered columns, columns that drop by `priority` as the list narrows, row links and presses,
+ * 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 type TableProps<Row extends RowData> = Omit<DataGridProps<Row>, "defaultSorting" | "empty"> & {
+    /** The sort the table starts with; `defaultSorting` on `DataGrid`. */
+    initialSorting?: SortingState;
+    /** Shown when there are no rows; `empty` on `DataGrid`. */
+    emptyMessage?: ReactNode;
+};
+/**
+ * `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;