@openwarelabs/ui 0.12.1 → 0.13.0

package/dist/components/Table/Table.d.cts

@@ -1,60 +1,4 @@
-import { type Key, type ReactNode } from "react";
-export interface TableColumn<Row> {
-    /** Unique; also the row field shown when there's no `render`. */
-    key: string;
-    header: ReactNode;
-    /** Numbers and amounts go at the end, so their digits line up.
-     * @default "start" */
-    align?: "start" | "center" | "end";
-    /** A CSS width, e.g. 120 or "30%". */
-    width?: number | string;
-    /** Lets the person sort by this column. */
-    sortable?: boolean;
-    /** What the cell shows. Defaults to the row's field named by `key`. */
-    render?(row: Row): ReactNode;
-    /** The value sorted by, when it isn't the field itself. */
-    sortValue?(row: Row): string | number;
-}
-export interface TableSort {
-    key: string;
-    direction: "ascending" | "descending";
-}
-export interface TableProps<Row> {
-    columns: Array<TableColumn<Row>>;
-    rows: Row[];
-    /** A field name or function giving each row a unique key.
-     * @default "id" */
-    rowKey?: keyof Row | ((row: Row) => Key);
-    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
-    caption?: ReactNode;
-    /** @default false */
-    hideCaption?: boolean;
-    sort?: TableSort;
-    defaultSort?: TableSort;
-    onSortChange?(sort: TableSort): void;
-    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
-     * @default false */
-    manualSort?: boolean;
-    /** Adds a checkbox column.
-     * @default "none" */
-    selectionMode?: "none" | "multiple";
-    selectedKeys?: Key[];
-    defaultSelectedKeys?: Key[];
-    onSelectionChange?(keys: Key[]): void;
-    /**
-     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
-     * first column's value when it's text or a number, else "row 3".
-     */
-    rowLabel?(row: Row): string;
-    /** Shown in place of the rows when there are none, such as an EmptyState. */
-    emptyContent?: ReactNode;
-    /** `compact` rows are 36px; `comfortable` 44px.
-     * @default "comfortable" */
-    density?: "compact" | "comfortable";
-    /** Keeps the header in view while the table scrolls; use with maxHeight. */
-    stickyHeader?: boolean;
-    maxHeight?: number | string;
-    className?: string;
-}
-/** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+import type { TableProps } from "./Table.types.cjs";
+export type { TableColumn, TableProps, TableSort } from "./Table.types.cjs";
+/** Rows of records with sortable columns and optional selection: on a raised panel in a tray, or in a bordered card. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, variant, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -1,60 +1,4 @@
-import { type Key, type ReactNode } from "react";
-export interface TableColumn<Row> {
-    /** Unique; also the row field shown when there's no `render`. */
-    key: string;
-    header: ReactNode;
-    /** Numbers and amounts go at the end, so their digits line up.
-     * @default "start" */
-    align?: "start" | "center" | "end";
-    /** A CSS width, e.g. 120 or "30%". */
-    width?: number | string;
-    /** Lets the person sort by this column. */
-    sortable?: boolean;
-    /** What the cell shows. Defaults to the row's field named by `key`. */
-    render?(row: Row): ReactNode;
-    /** The value sorted by, when it isn't the field itself. */
-    sortValue?(row: Row): string | number;
-}
-export interface TableSort {
-    key: string;
-    direction: "ascending" | "descending";
-}
-export interface TableProps<Row> {
-    columns: Array<TableColumn<Row>>;
-    rows: Row[];
-    /** A field name or function giving each row a unique key.
-     * @default "id" */
-    rowKey?: keyof Row | ((row: Row) => Key);
-    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
-    caption?: ReactNode;
-    /** @default false */
-    hideCaption?: boolean;
-    sort?: TableSort;
-    defaultSort?: TableSort;
-    onSortChange?(sort: TableSort): void;
-    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
-     * @default false */
-    manualSort?: boolean;
-    /** Adds a checkbox column.
-     * @default "none" */
-    selectionMode?: "none" | "multiple";
-    selectedKeys?: Key[];
-    defaultSelectedKeys?: Key[];
-    onSelectionChange?(keys: Key[]): void;
-    /**
-     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
-     * first column's value when it's text or a number, else "row 3".
-     */
-    rowLabel?(row: Row): string;
-    /** Shown in place of the rows when there are none, such as an EmptyState. */
-    emptyContent?: ReactNode;
-    /** `compact` rows are 36px; `comfortable` 44px.
-     * @default "comfortable" */
-    density?: "compact" | "comfortable";
-    /** Keeps the header in view while the table scrolls; use with maxHeight. */
-    stickyHeader?: boolean;
-    maxHeight?: number | string;
-    className?: string;
-}
-/** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+import type { TableProps } from "./Table.types.js";
+export type { TableColumn, TableProps, TableSort } from "./Table.types.js";
+/** Rows of records with sortable columns and optional selection: on a raised panel in a tray, or in a bordered card. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, variant, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Table/Table.types.d.cts

@@ -0,0 +1,64 @@
+import type { Key, ReactNode } from "react";
+export interface TableColumn<Row> {
+    /** Unique; also the row field shown when there's no `render`. */
+    key: string;
+    header: ReactNode;
+    /** Numbers and amounts go at the end, so their digits line up.
+     * @default "start" */
+    align?: "start" | "center" | "end";
+    /** A CSS width, e.g. 120 or "30%". */
+    width?: number | string;
+    /** Lets the person sort by this column. */
+    sortable?: boolean;
+    /** What the cell shows. Defaults to the row's field named by `key`. */
+    render?(row: Row): ReactNode;
+    /** The value sorted by, when it isn't the field itself. */
+    sortValue?(row: Row): string | number;
+}
+export interface TableSort {
+    key: string;
+    direction: "ascending" | "descending";
+}
+export interface TableProps<Row> {
+    columns: Array<TableColumn<Row>>;
+    rows: Row[];
+    /** A field name or function giving each row a unique key.
+     * @default "id" */
+    rowKey?: keyof Row | ((row: Row) => Key);
+    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
+    caption?: ReactNode;
+    /** @default false */
+    hideCaption?: boolean;
+    sort?: TableSort;
+    defaultSort?: TableSort;
+    onSortChange?(sort: TableSort): void;
+    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
+     * @default false */
+    manualSort?: boolean;
+    /** Adds a checkbox column.
+     * @default "none" */
+    selectionMode?: "none" | "multiple";
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
+    /** Shown in place of the rows when there are none, such as an EmptyState. */
+    emptyContent?: ReactNode;
+    /**
+     * `inset` sets the rows on a raised panel inside a tinted tray, with the header in the tray above them; `plain` is
+     * one bordered card with a shaded header row.
+     * @default "inset"
+     */
+    variant?: "inset" | "plain";
+    /** `compact` rows are 36px; `comfortable` 44px.
+     * @default "comfortable" */
+    density?: "compact" | "comfortable";
+    /** Keeps the header in view while the table scrolls; use with maxHeight. */
+    stickyHeader?: boolean;
+    maxHeight?: number | string;
+    className?: string;
+}

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,64 @@
+import type { Key, ReactNode } from "react";
+export interface TableColumn<Row> {
+    /** Unique; also the row field shown when there's no `render`. */
+    key: string;
+    header: ReactNode;
+    /** Numbers and amounts go at the end, so their digits line up.
+     * @default "start" */
+    align?: "start" | "center" | "end";
+    /** A CSS width, e.g. 120 or "30%". */
+    width?: number | string;
+    /** Lets the person sort by this column. */
+    sortable?: boolean;
+    /** What the cell shows. Defaults to the row's field named by `key`. */
+    render?(row: Row): ReactNode;
+    /** The value sorted by, when it isn't the field itself. */
+    sortValue?(row: Row): string | number;
+}
+export interface TableSort {
+    key: string;
+    direction: "ascending" | "descending";
+}
+export interface TableProps<Row> {
+    columns: Array<TableColumn<Row>>;
+    rows: Row[];
+    /** A field name or function giving each row a unique key.
+     * @default "id" */
+    rowKey?: keyof Row | ((row: Row) => Key);
+    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
+    caption?: ReactNode;
+    /** @default false */
+    hideCaption?: boolean;
+    sort?: TableSort;
+    defaultSort?: TableSort;
+    onSortChange?(sort: TableSort): void;
+    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
+     * @default false */
+    manualSort?: boolean;
+    /** Adds a checkbox column.
+     * @default "none" */
+    selectionMode?: "none" | "multiple";
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
+    /** Shown in place of the rows when there are none, such as an EmptyState. */
+    emptyContent?: ReactNode;
+    /**
+     * `inset` sets the rows on a raised panel inside a tinted tray, with the header in the tray above them; `plain` is
+     * one bordered card with a shaded header row.
+     * @default "inset"
+     */
+    variant?: "inset" | "plain";
+    /** `compact` rows are 36px; `comfortable` 44px.
+     * @default "comfortable" */
+    density?: "compact" | "comfortable";
+    /** Keeps the header in view while the table scrolls; use with maxHeight. */
+    stickyHeader?: boolean;
+    maxHeight?: number | string;
+    className?: string;
+}

package/dist/components.css

@@ -5720,6 +5720,66 @@
     text-align: center;
 }
 
+/* Inset: the rows on a raised panel inside a tinted tray, the header in the tray above them. The tray's corners are
+   the panel's plus the 4px between them, so the two curves run parallel. */
+.ow-table-wrap--inset {
+    --ow-table-gap: 4px;
+    background: var(--ow-track);
+    border-radius: calc(var(--ow-radius-container) + var(--ow-table-gap));
+    padding: 0 var(--ow-table-gap) var(--ow-table-gap);
+}
+
+.ow-table-wrap--inset .ow-table th {
+    border-bottom: 0;
+    background: var(--ow-track);
+}
+
+.ow-table-wrap--inset .ow-table td {
+    background: var(--ow-surface);
+}
+
+.ow-table-wrap--inset .ow-table tbody tr:hover td {
+    background: var(--ow-surface-muted);
+}
+
+.ow-table-wrap--inset .ow-table__row--selected td,
+.ow-table-wrap--inset .ow-table__row--selected:hover td {
+    background: var(--ow-primary-subtle);
+}
+
+/* The panel's edge, drawn on its outer cells, since a table body can't have a border of its own. */
+.ow-table-wrap--inset .ow-table tbody tr td:first-child {
+    border-left: 1px solid var(--ow-border);
+}
+
+.ow-table-wrap--inset .ow-table tbody tr td:last-child {
+    border-right: 1px solid var(--ow-border);
+}
+
+.ow-table-wrap--inset .ow-table tbody tr:first-child td {
+    border-top: 1px solid var(--ow-border);
+}
+
+.ow-table-wrap--inset .ow-table tbody tr:last-child td {
+    border-bottom: 1px solid var(--ow-border);
+}
+
+.ow-table-wrap--inset .ow-table tbody tr:first-child td:first-child {
+    border-top-left-radius: var(--ow-radius-container);
+}
+
+.ow-table-wrap--inset .ow-table tbody tr:first-child td:last-child {
+    border-top-right-radius: var(--ow-radius-container);
+}
+
+.ow-table-wrap--inset .ow-table tbody tr:last-child td:first-child {
+    border-bottom-left-radius: var(--ow-radius-container);
+}
+
+.ow-table-wrap--inset .ow-table tbody tr:last-child td:last-child {
+    border-bottom-right-radius: var(--ow-radius-container);
+}
+
 /* components/Stat/Stat.css */
 /* Stat: an overview card. A muted label, a big tabular number, a change and an optional trend line. */
 .ow-stat {

package/dist/index.cjs

@@ -6164,6 +6164,7 @@ function Table({
   onSelectionChange,
   rowLabel,
   emptyContent = "Nothing here yet.",
+  variant = "inset",
   density = "comfortable",
   stickyHeader = false,
   maxHeight,
@@ -6197,7 +6198,7 @@ function Table({
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
-      className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
+      className: cx("ow-table-wrap", `ow-table-wrap--${variant}`, stickyHeader && "ow-table-wrap--sticky", className),
       style: maxHeight ? { maxHeight } : void 0,
       tabIndex: maxHeight ? 0 : void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("table", { className: cx("ow-table", `ow-table--${density}`), children: [