@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/data-table/data-table.css

@@ -0,0 +1,515 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_i4wmq_3 {
+    --_table-radius: var(
+    	--table-radius,
+    	var(--sys-radius-md)
+    );
+    --_table-cell-pad-y: var(
+    	--table-cell-pad-y,
+    	var(--sys-unit-6)
+    );
+    --_table-cell-pad-x: var(
+    	--table-cell-pad-x,
+    	var(--sys-unit-8)
+    );
+    --_table-header-pad-y: var(
+    	--table-header-pad-y,
+    	var(--sys-unit-8)
+    );
+    --_table-header-min-block: var(
+    	--table-header-min-block,
+    	calc(
+    		var(--sys-unit-16) + 2 * var(--_table-header-pad-y)
+    	)
+    );
+    --_table-header-bg: var(
+    	--table-header-bg,
+    	color-mix(
+    		in oklab,
+    		var(--sys-color-primary-container) 70%,
+    		var(--sys-color-surface-high)
+    	)
+    );
+    --_table-header-fg: var(
+    	--table-header-fg,
+    	var(--sys-color-on-primary-container)
+    );
+    --_table-row-stripe: var(
+    	--table-row-stripe,
+    	color-mix(
+    		in oklab,
+    		var(--sys-color-primary-container) 30%,
+    		var(--sys-color-surface)
+    	)
+    );
+    --_table-row-hover: var(
+    	--table-row-hover,
+    	var(--_table-header-bg)
+    );
+    --_table-subrow-bg: var(
+    	--table-subrow-bg,
+    	var(--sys-color-surface-lowest)
+    );
+    --_table-min-inline: var(--table-min-inline, 100%);
+    --_table-edge-cue: var(
+    	--table-edge-cue,
+    	var(--sys-unit-6)
+    );
+    --_table-edge-slack: var(
+    	--table-edge-slack,
+    	var(--sys-unit-1)
+    );
+    --_table-edge-shadow: var(
+    	--table-edge-shadow,
+    	color-mix(
+    		in oklab,
+    		var(--sys-shadow-penumbra),
+    		transparent 45%
+    	)
+    );
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-8);
+    color: var(--sys-color-text);
+    min-block-size: 0;
+  }
+  ._toolbar_i4wmq_77 {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sys-unit-8);
+  }
+  ._scrollFrame_i4wmq_84 {
+    position: relative;
+    display: flex;
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    min-block-size: 0;
+    timeline-scope: --table-scroll;
+  }
+  ._stale_i4wmq_92 {
+    display: flex;
+    flex: 1 1 0;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+  ._staleOverlay_i4wmq_98 {
+    border-radius: var(--_table-radius);
+  }
+  ._contentWrap_i4wmq_101 {
+    position: relative;
+    isolation: isolate;
+    flex: 1 1 0;
+    min-inline-size: 0;
+    min-block-size: 0;
+    overflow: auto;
+    border-radius: var(--_table-radius);
+    background: var(--sys-color-surface);
+    scroll-timeline: --table-scroll inline;
+  }
+  ._contentWrap_i4wmq_101 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._contentWrap_i4wmq_101:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @supports (animation-timeline: scroll()) {
+    ._scrollFrame_i4wmq_84::before,
+    ._scrollFrame_i4wmq_84::after {
+      position: absolute;
+      z-index: 1;
+      inset-block: 0 var(--table-scrollbar-block, 0px);
+      inline-size: var(--_table-edge-cue);
+      opacity: 0;
+      pointer-events: none;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-timeline: --table-scroll;
+    }
+    ._scrollFrame_i4wmq_84:has(._th_i4wmq_132[data-sticky=start])::before,
+    ._scrollFrame_i4wmq_84:has(._th_i4wmq_132[data-sticky=end])::after {
+      content: "";
+    }
+    ._scrollFrame_i4wmq_84::before {
+      inset-inline-start: var(--table-sticky-total, 0px);
+      background: linear-gradient(to right, var(--_table-edge-shadow), transparent);
+      animation-name: _edgeStart_i4wmq_1;
+      animation-range: var(--_table-edge-slack) calc(var(--_table-edge-cue) + var(--_table-edge-slack));
+    }
+    ._scrollFrame_i4wmq_84::after {
+      inset-inline-end: calc(var(--table-sticky-end-total, 0px) + var(--table-scrollbar-inline, 0px));
+      background: linear-gradient(to left, var(--_table-edge-shadow), transparent);
+      animation-name: _edgeEnd_i4wmq_1;
+      animation-range: calc(100% - var(--_table-edge-cue) - var(--_table-edge-slack)) calc(100% - var(--_table-edge-slack));
+    }
+  }
+  @keyframes _edgeStart_i4wmq_1 {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes _edgeEnd_i4wmq_1 {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  ._refreshFailed_i4wmq_165 {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sys-unit-6);
+    border-radius: var(--sys-radius-md);
+    background: var(--sys-color-error-bg);
+    padding: var(--sys-unit-6) var(--sys-unit-8);
+    color: var(--sys-color-error-fg);
+    font: var(--sys-font-label-medium);
+  }
+  ._table_i4wmq_177 {
+    inline-size: max-content;
+    min-inline-size: var(--_table-min-inline);
+    border-collapse: separate;
+    border-spacing: 0;
+    font: var(--sys-font-body-medium);
+    font-variant-numeric: tabular-nums;
+  }
+  ._thead_i4wmq_185 {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 2;
+    background: var(--_table-header-bg);
+  }
+  ._th_i4wmq_132 {
+    block-size: var(--_table-header-min-block);
+    padding: var(--_table-header-pad-y) var(--_table-cell-pad-x);
+    vertical-align: middle;
+    color: var(--_table-header-fg);
+    text-align: start;
+    font: var(--sys-font-label-small);
+    white-space: nowrap;
+  }
+  ._th_i4wmq_132:has(> ._sortToggle_i4wmq_200) {
+    padding: 0;
+  }
+  ._sortToggle_i4wmq_200 {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    inline-size: 100%;
+    border-radius: var(--sys-radius-full);
+    padding: var(--_table-header-pad-y) var(--_table-cell-pad-x);
+    color: inherit;
+    font: inherit;
+  }
+  ._sortToggle_i4wmq_200 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._sortToggle_i4wmq_200:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._sortToggle_i4wmq_200 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._sortToggle_i4wmq_200::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._sortToggle_i4wmq_200::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._sortToggle_i4wmq_200:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._sortToggle_i4wmq_200:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._sortToggle_i4wmq_200 {
+    outline-offset: calc(-1 * var(--sys-focus-ring-width));
+  }
+  ._th_i4wmq_132[data-numeric=true] ._sortToggle_i4wmq_200 {
+    justify-content: flex-end;
+  }
+  ._sortIconIdle_i4wmq_251 {
+    color: color-mix(in oklab, var(--_table-header-fg) 55%, var(--_table-header-bg));
+  }
+  ._th_i4wmq_132[data-fit=true],
+  ._td_i4wmq_255[data-fit=true] {
+    inline-size: 1px;
+    white-space: nowrap;
+  }
+  ._th_i4wmq_132[data-numeric=true],
+  ._td_i4wmq_255[data-numeric=true] {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+  ._th_i4wmq_132[data-sticky],
+  ._td_i4wmq_255[data-sticky] {
+    position: sticky;
+    z-index: 1;
+  }
+  ._th_i4wmq_132[data-sticky] {
+    background: var(--_table-header-bg);
+  }
+  ._td_i4wmq_255[data-sticky] {
+    background: var(--sys-color-surface);
+  }
+  @media not (prefers-reduced-motion) {
+    ._td_i4wmq_255[data-sticky] {
+      transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._row_i4wmq_280[data-stripe=true] ._td_i4wmq_255[data-sticky] {
+    background: var(--_table-row-stripe);
+  }
+  ._row_i4wmq_280:hover ._td_i4wmq_255[data-sticky] {
+    background: var(--_table-row-hover);
+  }
+  @media not (prefers-reduced-motion) {
+    ._row_i4wmq_280 {
+      transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._row_i4wmq_280[data-stripe=true] {
+    background: var(--_table-row-stripe);
+  }
+  ._row_i4wmq_280:hover {
+    background: var(--_table-row-hover);
+  }
+  ._td_i4wmq_255 {
+    padding: var(--_table-cell-pad-y) var(--_table-cell-pad-x);
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+  ._subRow_i4wmq_302 {
+    background: var(--_table-subrow-bg);
+  }
+  ._subRow_i4wmq_302 > td {
+    padding: 0;
+  }
+  ._subRow_i4wmq_302 > ._td_i4wmq_255[data-sticky] {
+    background: var(--_table-subrow-bg);
+  }
+  ._skeletonBar_i4wmq_311 {
+    min-inline-size: var(--sys-unit-16);
+  }
+  ._busyCaption_i4wmq_314 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+  ._stateCell_i4wmq_322 {
+    padding: var(--sys-unit-24) var(--_table-cell-pad-x);
+    color: var(--sys-color-text-muted);
+    text-align: center;
+  }
+  ._errorState_i4wmq_327 {
+    color: var(--sys-color-error-fg);
+  }
+  ._pagination_i4wmq_330 {
+    flex-shrink: 0;
+    align-self: flex-end;
+  }
+  ._selectionContainer_i4wmq_334 {
+    container: selection-bar/inline-size;
+    min-inline-size: 0;
+  }
+  ._selectionBar_i4wmq_338 {
+    --_selection-stagger: var(
+    	--selection-stagger,
+    	calc(var(--sys-motion-instant) / 4)
+    );
+    --_selection-radius: var(
+    	--selection-radius,
+    	var(--sys-radius-md)
+    );
+    --_selection-pad: var(
+    	--selection-pad,
+    	var(--sys-unit-2)
+    );
+    --_selection-text-inset: 0;
+    display: flex;
+    position: relative;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--sys-unit-6);
+    isolation: isolate;
+    min-inline-size: 0;
+    overflow-x: auto;
+    border-radius: var(--_selection-radius);
+    padding-block: var(--_selection-pad);
+    padding-inline: 0;
+    color: var(--sys-color-text);
+    white-space: nowrap;
+  }
+  ._selectionBar_i4wmq_338 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._selectionBar_i4wmq_338:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._selectionBar_i4wmq_338::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    background: var(--sys-color-surface);
+    content: "";
+    opacity: 0;
+    scale: 0.98 0.8;
+  }
+  ._selectionBar_i4wmq_338[data-selected] {
+    --_selection-text-inset: var(--sys-unit-6);
+    padding-inline: var(--_selection-pad);
+  }
+  ._selectionBar_i4wmq_338[data-selected]::before {
+    opacity: 1;
+    scale: 1;
+  }
+  @media not (prefers-reduced-motion) {
+    ._selectionBar_i4wmq_338 {
+      transition: padding-inline var(--sys-motion-instant) var(--sys-motion-accelerate);
+    }
+    ._selectionBar_i4wmq_338::before {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-accelerate), scale var(--sys-motion-instant) var(--sys-motion-accelerate);
+    }
+    ._selectionBar_i4wmq_338[data-selected] {
+      transition-duration: var(--sys-motion-short);
+      transition-timing-function: var(--sys-motion-emphasized);
+    }
+    ._selectionBar_i4wmq_338[data-selected]::before {
+      transition-duration: var(--sys-motion-short);
+      transition-timing-function: var(--sys-motion-emphasized);
+    }
+  }
+  ._selectionSummary_i4wmq_408 {
+    display: grid;
+    flex-shrink: 0;
+    align-items: center;
+    padding-inline-start: var(--_selection-text-inset);
+  }
+  @media not (prefers-reduced-motion) {
+    ._selectionSummary_i4wmq_408 {
+      transition: padding-inline-start var(--sys-motion-instant) var(--sys-motion-accelerate);
+    }
+    ._selectionBar_i4wmq_338[data-selected] ._selectionSummary_i4wmq_408 {
+      transition-duration: var(--sys-motion-short);
+      transition-timing-function: var(--sys-motion-emphasized);
+    }
+  }
+  ._selectionTotal_i4wmq_423,
+  ._selectionCount_i4wmq_424,
+  ._selectionMeasure_i4wmq_425 {
+    grid-area: 1/1;
+    font: var(--sys-font-body-medium);
+  }
+  ._selectionTotal_i4wmq_423 {
+    color: var(--sys-color-text-muted);
+  }
+  ._selectionCount_i4wmq_424 {
+    font-variant-numeric: tabular-nums;
+  }
+  ._selectionBar_i4wmq_338:not([data-selected]) ._selectionCount_i4wmq_424 {
+    opacity: 0;
+    translate: 0 var(--sys-unit-2);
+  }
+  ._selectionBar_i4wmq_338[data-selected] ._selectionCount_i4wmq_424 {
+    opacity: 1;
+    translate: 0;
+  }
+  ._selectionMeasure_i4wmq_425 {
+    visibility: hidden;
+    font-variant-numeric: tabular-nums;
+  }
+  ._selectionBar_i4wmq_338[data-selected] ._selectionTotal_i4wmq_423 {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--sys-unit-2));
+  }
+  @media not (prefers-reduced-motion) {
+    ._selectionTotal_i4wmq_423,
+    ._selectionCount_i4wmq_424 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), translate var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._selectionStatus_i4wmq_457 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+  ._selectionActions_i4wmq_465 {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--_selection-pad);
+  }
+  ._selectionActions_i4wmq_465 > * {
+    opacity: 1;
+  }
+  ._selectionActions_i4wmq_465[inert] {
+    visibility: hidden;
+  }
+  ._selectionActions_i4wmq_465[inert] > * {
+    opacity: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._selectionActions_i4wmq_465 {
+      transition: visibility var(--sys-motion-instant);
+    }
+    ._selectionActions_i4wmq_465 > * {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+    ._selectionActions_i4wmq_465:not([inert]) > :nth-child(1) {
+      transition-delay: var(--_selection-stagger);
+    }
+    ._selectionActions_i4wmq_465:not([inert]) > :nth-child(2) {
+      transition-delay: calc(var(--_selection-stagger) * 2);
+    }
+  }
+  ._selectionSelectAll_i4wmq_495[data-starting-style], ._selectionSelectAll_i4wmq_495[data-ending-style] {
+    opacity: 0;
+  }
+  ._selectionBulk_i4wmq_498 {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--sys-unit-6);
+    margin-inline-start: auto;
+  }
+  @container selection-bar (max-width: 36rem) {
+    ._selectionBar_i4wmq_338 {
+      flex-wrap: wrap;
+      overflow-x: visible;
+      row-gap: var(--_selection-pad);
+    }
+    ._selectionActions_i4wmq_465 {
+      flex-wrap: wrap;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+import type { ReactTable } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+import { type PaginationIndexProps } from "../components/pagination/pagination.tsx";
+import type { RowSelectionView } from "../lib/hooks/use-row-selection.ts";
+import { DataTableContent } from "./data-table-content.tsx";
+import { DataTableSelectionBar } from "./data-table-selection.tsx";
+import type { DataTableStatus } from "./resolve-view.ts";
+import { type DataTableFeatures } from "./table-features.ts";
+export type DataTableRootProps<TData extends Record<string, unknown>> = Readonly<{
+    /** The configured table instance (built by the caller). */
+    table: ReactTable<DataTableFeatures, TData>;
+    /**
+     * Selection model from `useRowSelection`, enabling the selection parts
+     * (`selectionColumn()`, `DataTable.SelectionBar`).
+     */
+    selection?: RowSelectionView;
+    /** Injected query lifecycle status (TanStack Query `status`). */
+    status: DataTableStatus;
+    /**
+     * Whether a fetch is in flight. With keep-previous-data this drives the
+     * "stale" affordance while previous rows stay visible. @default false
+     */
+    isFetching?: boolean;
+    /** Refetches, offered as a retry when a fetch fails or runs long. */
+    onRetry?: () => void;
+    children: ReactNode;
+    className?: string;
+}>;
+declare const Root: <TData extends Record<string, unknown>>({ table, selection, status, isFetching, onRetry, children, className, }: DataTableRootProps<TData>) => ReactNode;
+export type DataTableToolbarProps = Readonly<{
+    children: ReactNode;
+    className?: string;
+}>;
+/** Layout slot above the table for search, filters and actions. */
+declare const Toolbar: ({ children, className, }: DataTableToolbarProps) => ReactNode;
+export type DataTablePaginationProps = Readonly<{
+    /** The page-size select's label, such as "Rows per page". */
+    pageSizeLabel: string;
+    /** What the index says, such as `Page 3 of 12`, from where the table stands. */
+    indexLabel: PaginationIndexProps["label"];
+    /** The first-page button's name, such as "First page". */
+    firstLabel: string;
+    /** The previous-page button's name, such as "Previous page". */
+    previousLabel: string;
+    /** The next-page button's name, such as "Next page". */
+    nextLabel: string;
+    /** The last-page button's name, such as "Last page". */
+    lastLabel: string;
+    className?: string;
+}>;
+/**
+ * The kit's `Pagination`, driven by the instance's pagination API (built with
+ * `manualPagination` + server `rowCount`). The page sizes come from the
+ * table's `meta.pageSizeOptions`, and picking one returns to the first page.
+ */
+declare const DataTablePagination: ({ pageSizeLabel, indexLabel, firstLabel, previousLabel, nextLabel, lastLabel, className, }: DataTablePaginationProps) => ReactNode;
+type DataTableParts = Readonly<{
+    Root: typeof Root;
+    Toolbar: typeof Toolbar;
+    Content: typeof DataTableContent;
+    Pagination: typeof DataTablePagination;
+    SelectionBar: typeof DataTableSelectionBar;
+}>;
+/**
+ * Composite data table over a TanStack Table instance. `Root` holds the
+ * instance and the injected query state in context; the parts lay it out:
+ * `Toolbar`, `SelectionBar`, `Content` and `Pagination`. A nested sub-table
+ * gets its own `DataTable.Root`, with its own instance and context.
+ *
+ * @example
+ * <DataTable.Root table={table} status={query.status} isFetching={query.isFetching}>
+ * 	<DataTable.Toolbar>
+ * 		<FilterBar.Root filters={filters}>…</FilterBar.Root>
+ * 	</DataTable.Toolbar>
+ * 	<DataTable.Content
+ * 		emptyState="No declarations yet."
+ * 		errorLabel="The declarations could not be loaded."
+ * 		loadingLabel="Loading declarations"
+ * 		slowLabel="This is taking longer than usual."
+ * 		retryLabel="Try again"
+ * 	/>
+ * 	<DataTable.Pagination
+ * 		pageSizeLabel="Rows per page"
+ * 		indexLabel={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`}
+ * 		firstLabel="First page"
+ * 		previousLabel="Previous page"
+ * 		nextLabel="Next page"
+ * 		lastLabel="Last page"
+ * 	/>
+ * </DataTable.Root>
+ */
+export declare const DataTable: DataTableParts;
+export {};