@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/components/table/index.d.ts

@@ -5,6 +5,10 @@ interface TableProps extends HTMLAttributes<HTMLTableElement> {
 	children: ReactNode;
 	/** Pins the table's rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Defaults to the surrounding SizeProvider, else `"default"`. */
 	size?: SizeVariant;
+	/** Below the `md` breakpoint, hide the header and lay each row out as a two-column grid of its cells, each led by its `label`. `stacked={false}` on a `Table.Header` or `Table.Row` keeps that part tabular. Defaults to `false`. */
+	stacked?: boolean;
+	/** Classes for the hover container around the `<table>`, e.g. `overflow-x-auto` for wide tables. */
+	containerClassName?: string;
 }
 /** The root plus its compound parts, typed so `<Table.Row>` type-checks. */
 type TableComponent = ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>> & {
@@ -13,6 +17,9 @@ type TableComponent = ForwardRefExoticComponent<TableProps & RefAttributes<HTMLT
 	Row: typeof TableRow;
 	Head: typeof TableHead;
 	Cell: typeof TableCell;
+	Footer: typeof TableFooter;
+	Caption: typeof TableCaption;
+	Empty: typeof TableEmpty;
 };
 /**
 * Data table with row hover effects and semantic markup.
@@ -25,20 +32,68 @@ type TableComponent = ForwardRefExoticComponent<TableProps & RefAttributes<HTMLT
 * row to one step of the size ladder; otherwise the table follows the
 * surrounding SizeProvider.
 *
-* Parts: `Table.Header` (`<thead>`), `Table.Body` (`<tbody>`), `Table.Row`
-* (`<tr>` — give body rows an `index`, starting at 0, so they join the hover
-* highlight; omit it on header rows), `Table.Head` (`<th>`) and `Table.Cell`
-* (`<td>`). Each forwards its ref and native attributes.
+* A head with `sortDirection` (or `defaultSortDirection`, or `onSort`)
+* becomes a sort button: a press cycles ascending, descending and unsorted,
+* reporting the next direction through `onSort`, and its arrow crossfades
+* into the new one. `stacked` turns rows into two-column cards on small
+* screens, each cell led by its `label`.
+*
+* Statics:
+* - `Table.Header` — `<thead>`; `stacked={false}` keeps it visible on small
+*   screens.
+* - `Table.Body` — `<tbody>`.
+* - `Table.Footer` — `<tfoot>`, for totals: its rows render semibold and stay
+*   out of the hover.
+* - `Table.Row` — `<tr>`: give body rows an `index`, starting at 0, so they
+*   join the hover highlight; omit it on header and footer rows.
+*   `stacked={false}` keeps the row tabular.
+* - `Table.Head` — `<th>`: `sortDirection` (`'asc'`, `'desc'` or `false`),
+*   `defaultSortDirection`, `onSort`.
+* - `Table.Cell` — `<td>`: `label`, shown above the value while stacked.
+* - `Table.Caption` — `<caption>`, a muted line below the table.
+* - `Table.Empty` — one row across `colSpan` columns, for an empty or loading
+*   state.
+*
+* Each forwards its ref and native attributes.
 *
 * @example {@include ./examples.mdx}
 */
 declare const Table: TableComponent;
-declare const TableHeader: ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & RefAttributes<HTMLTableSectionElement>>;
+interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+	/** `false` keeps the header showing on small screens in a `stacked` table. Defaults to the table's `stacked`. */
+	stacked?: boolean;
+}
+declare const TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & RefAttributes<HTMLTableSectionElement>>;
+declare const TableCaption: ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & RefAttributes<HTMLTableCaptionElement>>;
 interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+	/** Position among the body rows, from 0: joins the row to the hover highlight. Omit it on header and footer rows. */
 	index?: number;
+	/** `false` keeps this row tabular on small screens in a `stacked` table. Defaults to the table's `stacked`. */
+	stacked?: boolean;
 }
 declare const TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & RefAttributes<HTMLTableCellElement>>;
-declare const TableCell: ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & RefAttributes<HTMLTableCellElement>>;
-export { Table, TableBody, TableCell, TableHead, TableHeader, TableProps, TableRow, TableRowProps, Table as default };
+type SortDirection = "asc" | "desc" | false;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+	/** Controlled sort direction of this column: `'asc'`, `'desc'` or `false` (unsorted). Setting it makes the head a sort button. Pair with `onSort`. */
+	sortDirection?: SortDirection;
+	/** Initial sort direction, for a head that keeps its own; setting it makes the head a sort button. */
+	defaultSortDirection?: SortDirection;
+	/** Called with the next direction when the head is pressed: unsorted → `'asc'` → `'desc'` → `false`. Setting it makes the head a sort button. */
+	onSort?: (direction: SortDirection) => void;
+}
+declare const TableHead: ForwardRefExoticComponent<TableHeadProps & RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+	/** The column's name, shown above the value while a `stacked` table lays its rows out as cards. */
+	label?: ReactNode;
+}
+declare const TableCell: ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLTableCellElement>>;
+interface TableEmptyProps extends HTMLAttributes<HTMLTableRowElement> {
+	/** Number of columns the row spans: the table's column count. */
+	colSpan: number;
+	/** What to say, or a loading indicator. */
+	children?: ReactNode;
+}
+declare const TableEmpty: ForwardRefExoticComponent<TableEmptyProps & RefAttributes<HTMLTableRowElement>>;
+export { SortDirection, Table, TableBody, TableCaption, TableCell, TableCellProps, TableEmpty, TableEmptyProps, TableFooter, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, Table as default };

package/dist/components/table/index.js

@@ -2,23 +2,33 @@ import {
   Table2,
   TableHeader2,
   TableBody2,
+  TableFooter2,
+  TableCaption2,
   TableRow2,
   TableHead2,
   TableCell2,
+  TableEmpty2,
   table_default
-} from "../../shared/components-1434p1mh.js";
-import"../../shared/components-kvr7f9hy.js";
-import"../../shared/components-chacnk61.js";
-import"../../shared/components-59efxjd9.js";
-import"../../shared/components-hqeq3w9q.js";
-import"../../shared/components-jjw69c4c.js";
-import"../../shared/components-men63rwj.js";
-import"../../shared/components-0sn7ypjw.js";
-import"../../shared/components-ezxhrmer.js";
+} from "../../shared/components-9mys9jna.js";
+import"../../shared/components-jqpefjsn.js";
+import"../../shared/components-qdm3yh26.js";
+import"../../shared/components-pw06rbxq.js";
+import"../../shared/components-yhgq0qxx.js";
+import"../../shared/components-awra5sff.js";
+import"../../shared/components-dcc02hs2.js";
+import"../../shared/components-tz1fv35x.js";
+import"../../shared/components-de99ykt7.js";
+import"../../shared/components-3ey0hzpb.js";
+import"../../shared/components-h83az0bz.js";
+import"../../shared/components-34txk9rj.js";
+import"../../shared/components-jcnjay5g.js";
 export {
   Table2 as Table,
   TableBody2 as TableBody,
+  TableCaption2 as TableCaption,
   TableCell2 as TableCell,
+  TableEmpty2 as TableEmpty,
+  TableFooter2 as TableFooter,
   TableHead2 as TableHead,
   TableHeader2 as TableHeader,
   TableRow2 as TableRow,