@jwcarman/roux-web 0.0.0-stage → 0.1.0

package/dist/paging/paging.d.ts

@@ -0,0 +1,80 @@
+/** How the client talks to jpa-utils' paged endpoints: `PageParams` in, `PageDto` out. */
+export type SortDirection = "ASC" | "DESC";
+/** jpa-utils' page of results: one page of `data` and where it sits in the whole. */
+export interface PaginationDto {
+    pageIndex: number;
+    pageSize: number;
+    totalElementCount: number;
+    totalPageCount: number;
+    hasNext: boolean;
+    hasPrevious: boolean;
+}
+export interface PageDto<T> {
+    data: T[];
+    pagination: PaginationDto;
+}
+/** What a paged list endpoint accepts (jpa-utils' PageParams, plus a search term). */
+export interface PageParams {
+    pageIndex?: number;
+    pageSize?: number;
+    sortBy?: string;
+    sortDirection?: SortDirection;
+    search?: string;
+}
+/** The most rows a jpa-utils `Paginator` returns per page by default. */
+export declare const MAX_PAGE_SIZE = 100;
+/** The query string for `params`: `""` when there is nothing to send, else `"?a=b&c=d"`. */
+export declare function pageQuery(params: PageParams & Record<string, string | number | undefined>): string;
+/**
+ * The request for a table's state. Column ids are the endpoint's sort names (its sort enum's
+ * values), so the first sorted column becomes `sortBy`; with none, the server's default applies.
+ */
+export declare function pageParamsOf(pagination: {
+    pageIndex: number;
+    pageSize: number;
+}, sorting: readonly {
+    id: string;
+    desc: boolean;
+}[]): PageParams;
+/** The term to search for: `text` trimmed, or absent while blank or shorter than `minLength`. */
+export declare function searchTermOf(text: string, minLength: number): string | undefined;
+/** The index of the page after `page`, or absent on the last page. */
+export declare function nextPageIndex(page: PageDto<unknown>): number | undefined;
+/** Which rows a page shows, counting from 1: "Showing `first` to `last` of `total`". */
+export declare function rowRange(pagination: Pick<PaginationDto, "pageIndex" | "pageSize" | "totalElementCount">, rowsOnPage: number): {
+    first: number;
+    last: number;
+    total: number;
+};
+/** How many pages {@link fetchAllPages} fetches before it gives up: 10,000 rows at 100 a page. */
+export declare const MAX_PAGES = 100;
+/**
+ * Every row of a paged endpoint, fetched page by page, for a dropdown or an export that needs the
+ * whole list. Pages are {@link MAX_PAGE_SIZE} rows unless `params` says otherwise; its other
+ * parameters go with every request.
+ *
+ * @throws Error past `maxPages` pages ({@link MAX_PAGES} by default), or if the server answers
+ *   with a page other than the one asked for: a list that big wants paging, not one fetch.
+ */
+export declare function fetchAllPages<T>(fetcher: (params: PageParams) => Promise<PageDto<T>>, params?: PageParams, { maxPages }?: {
+    maxPages?: number;
+}): Promise<T[]>;
+/** A table's page, page size, sort and search, as kept in the URL; absent means the default. */
+export interface TableSearch<S extends string = string> {
+    pageIndex?: number;
+    pageSize?: number;
+    sortBy?: S;
+    sortDirection?: SortDirection;
+    search?: string;
+}
+/**
+ * A table's search params from a URL (a route's `validateSearch`). Anyone can type a URL, so
+ * values are checked, not trusted: an unknown sort, a bad page or a blank search is dropped, and
+ * the page size is capped at {@link MAX_PAGE_SIZE}.
+ */
+export declare function tableSearchOf<S extends string>(raw: Record<string, unknown>, sorts: readonly S[]): TableSearch<S>;
+/**
+ * A filter's value from a URL (a route's `validateSearch`): the value if `values` offers it, else
+ * absent, so a typed or stale URL never sends the server a value it would refuse.
+ */
+export declare function enumSearchOf<T extends string>(raw: unknown, values: readonly T[]): T | undefined;

package/dist/paging/paging.js

@@ -0,0 +1,71 @@
+// src/paging/paging.ts
+var e = 100;
+function t(e) {
+	let t = new URLSearchParams();
+	for (let [n, r] of Object.entries(e)) r !== void 0 && String(r).trim() !== "" && t.set(n, String(r));
+	let n = t.toString();
+	return n === "" ? "" : `?${n}`;
+}
+function n(e, t) {
+	let n = {
+		pageIndex: e.pageIndex,
+		pageSize: e.pageSize
+	}, r = t[0];
+	return r && (n.sortBy = r.id, n.sortDirection = r.desc ? "DESC" : "ASC"), n;
+}
+function r(e, t) {
+	let n = e.trim();
+	return n.length > 0 && n.length >= t ? n : void 0;
+}
+function i(e) {
+	return e.pagination.hasNext ? e.pagination.pageIndex + 1 : void 0;
+}
+function a(e, t) {
+	if (t === 0) return {
+		first: 0,
+		last: 0,
+		total: e.totalElementCount
+	};
+	let n = e.pageIndex * e.pageSize + 1;
+	return {
+		first: n,
+		last: n + t - 1,
+		total: e.totalElementCount
+	};
+}
+var o = 100;
+async function s(e, t = {}, { maxPages: n = 100 } = {}) {
+	let r = [], a = t.pageIndex ?? 0;
+	for (let o = 0; a !== void 0; o++) {
+		if (o === n) throw Error(`fetchAllPages: the list has more than ${n} pages`);
+		let s = await e({
+			...t,
+			pageIndex: a,
+			pageSize: t.pageSize ?? 100
+		});
+		if (s.pagination.pageIndex !== a) throw Error(`fetchAllPages: asked for page ${a}, got page ${s.pagination.pageIndex} again`);
+		r.push(...s.data), a = i(s);
+	}
+	return r;
+}
+function c(e) {
+	return Number.isInteger(e);
+}
+function l(e, t) {
+	let n = typeof e == "string" && e.trim() !== "" ? Number(e) : e;
+	return c(n) && n >= t ? n : void 0;
+}
+function u(e, t) {
+	let n = l(e.pageIndex, 0), i = l(e.pageSize, 1), a = typeof e.sortDirection == "string" ? e.sortDirection.toUpperCase() : void 0;
+	return {
+		pageIndex: n,
+		pageSize: i === void 0 ? void 0 : Math.min(i, 100),
+		sortBy: t.find((t) => t === e.sortBy),
+		sortDirection: a === "ASC" || a === "DESC" ? a : void 0,
+		search: typeof e.search == "string" ? r(e.search, 0) : void 0
+	};
+}
+function d(e, t) {
+	return t.find((t) => t === e);
+}
+export { o as MAX_PAGES, e as MAX_PAGE_SIZE, d as enumSearchOf, s as fetchAllPages, i as nextPageIndex, n as pageParamsOf, t as pageQuery, a as rowRange, r as searchTermOf, u as tableSearchOf };

package/dist/problem/index.d.ts

@@ -0,0 +1 @@
+export { problemOf, type FieldProblem, type Problem } from "./problem";

package/dist/problem/index.js

@@ -0,0 +1 @@
+export { problemOf } from "./problem.js";

package/dist/problem/problem.d.ts

@@ -0,0 +1,22 @@
+/** One field's problem in a 400. */
+export interface FieldProblem {
+    field: string;
+    message: string;
+}
+/** An RFC 9457 Problem Detail, as the server answers every error. */
+export interface Problem {
+    /** `about:blank` when the server sent none, as RFC 9457 defines. */
+    type: string;
+    title: string;
+    status: number;
+    detail?: string;
+    instance?: string;
+    errors?: FieldProblem[];
+    /** On a 500 only: the reference the server logged the failure under. */
+    errorId?: string;
+}
+/**
+ * The problem in a failed response. A response that is not `application/problem+json`, or whose
+ * body cannot be read, gives a problem built from its status. Never throws.
+ */
+export declare function problemOf(response: Response): Promise<Problem>;

package/dist/problem/problem.js

@@ -0,0 +1,24 @@
+// src/problem/problem.ts
+function e(e) {
+	let t = e;
+	return typeof t?.field == "string" && typeof t.message == "string";
+}
+async function t(t) {
+	let n = {
+		type: "about:blank",
+		title: t.statusText,
+		status: t.status
+	};
+	if (!t.headers.get("Content-Type")?.includes("application/problem+json")) return n;
+	try {
+		let r = Object(await t.json()), i = {
+			type: typeof r.type == "string" ? r.type : "about:blank",
+			title: typeof r.title == "string" ? r.title : n.title,
+			status: typeof r.status == "number" ? r.status : n.status
+		};
+		return typeof r.detail == "string" && (i.detail = r.detail), typeof r.instance == "string" && (i.instance = r.instance), typeof r.errorId == "string" && (i.errorId = r.errorId), Array.isArray(r.errors) && r.errors.length > 0 && r.errors.every(e) && (i.errors = r.errors), i;
+	} catch {
+		return n;
+	}
+}
+export { t as problemOf };

package/dist/table/FilterChips.d.ts

@@ -0,0 +1,16 @@
+export interface FilterOption<T extends string> {
+    value: T;
+    label: string;
+}
+export interface FilterChipsProps<T extends string> {
+    /** Names the group for screen readers, such as "Status". */
+    label: string;
+    options: readonly FilterOption<T>[];
+    /** The chosen value; undefined for no filter. */
+    value: T | undefined;
+    onChange: (value: T | undefined) => void;
+    /** Adds a first chip that clears the filter, such as "All". */
+    allLabel?: string;
+}
+/** One filter as a row of toggle chips (`aria-pressed`); one chip is chosen at a time. */
+export declare function FilterChips<T extends string>({ label, options, value, onChange, allLabel }: FilterChipsProps<T>): import("react").JSX.Element;

package/dist/table/FilterChips.js

@@ -0,0 +1,28 @@
+import { Button as e, Group as t } from "@chakra-ui/react";
+import { jsx as n } from "react/jsx-runtime";
+// src/table/FilterChips.tsx
+function r({ label: r, options: i, value: a, onChange: o, allLabel: s }) {
+	let c = s ? [{
+		value: void 0,
+		label: s
+	}, ...i] : [...i];
+	return /* @__PURE__ */ n(t, {
+		role: "group",
+		"aria-label": r,
+		attached: !1,
+		gap: "2",
+		wrap: "wrap",
+		children: c.map((t) => {
+			let r = t.value === a;
+			return /* @__PURE__ */ n(e, {
+				size: "xs",
+				borderRadius: "full",
+				variant: r ? "solid" : "outline",
+				"aria-pressed": r,
+				onClick: () => o(t.value),
+				children: t.label
+			}, t.label);
+		})
+	});
+}
+export { r as FilterChips };

package/dist/table/QueryTable.d.ts

@@ -0,0 +1,11 @@
+import { type UseQueryTableOptions } from "./useQueryTable";
+import { type TableViewProps } from "./TableView";
+export type QueryTableProps<T> = UseQueryTableOptions<T> & Omit<TableViewProps<T>, "table" | "isLoading" | "isError" | "columns"> & {
+    /** Shown above the table when a page cannot be loaded. */
+    errorText?: string;
+};
+/**
+ * A paged, sortable table over a jpa-utils endpoint. Put any search or filter in `queryKey`
+ * (and use it in `query`); a change returns the table to its first page.
+ */
+export declare function QueryTable<T>({ queryKey, query, columns, initialSort, initialPageSize, getRowId, params, onParamsChange, errorText, ...props }: QueryTableProps<T>): import("react").JSX.Element;

package/dist/table/QueryTable.js

@@ -0,0 +1,29 @@
+import { ErrorMessage as e } from "../feedback/ErrorMessage.js";
+import { useQueryTable as t } from "./useQueryTable.js";
+import { TableView as n } from "./TableView.js";
+import { Stack as r } from "@chakra-ui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+// src/table/QueryTable.tsx
+function o({ queryKey: o, query: s, columns: c, initialSort: l, initialPageSize: u, getRowId: d, params: f, onParamsChange: p, errorText: m = "Could not load the rows.", ...h }) {
+	let { table: g, isLoading: _, isError: v } = t({
+		queryKey: o,
+		query: s,
+		columns: c,
+		initialSort: l,
+		initialPageSize: u,
+		getRowId: d,
+		params: f,
+		onParamsChange: p
+	});
+	return /* @__PURE__ */ a(r, {
+		gap: "2",
+		width: "100%",
+		children: [v && /* @__PURE__ */ i(e, { children: m }), /* @__PURE__ */ i(n, {
+			table: g,
+			isLoading: _,
+			isError: v,
+			...h
+		})]
+	});
+}
+export { o as QueryTable };

package/dist/table/SimpleQueryTable.d.ts

@@ -0,0 +1,17 @@
+import { type QueryKey } from "@tanstack/react-query";
+import { type ColumnDef, type ColumnSort } from "@tanstack/react-table";
+import { type TanstackTableProps } from "./TanstackTable";
+export type SimpleQueryTableProps<T> = Omit<TanstackTableProps<T>, "table" | "isLoading" | "isError" | "columns"> & {
+    queryKey: QueryKey;
+    /** Fetches every row at once; for a short list, or with `fetchAllPages`. */
+    query: () => Promise<T[]>;
+    columns: ColumnDef<T, unknown>[];
+    initialSort?: ColumnSort;
+    /** False holds the fetch, for example until a filter it needs is chosen. */
+    enabled?: boolean;
+    getRowId?: (row: T) => string;
+    /** Shown above the table when the rows cannot be loaded. */
+    errorText?: string;
+};
+/** A table over a list fetched whole and sorted in the browser: no paging, no refetch to sort. */
+export declare function SimpleQueryTable<T>({ queryKey, query, columns, initialSort, enabled, getRowId, errorText, ...props }: SimpleQueryTableProps<T>): import("react").JSX.Element;

package/dist/table/SimpleQueryTable.js

@@ -0,0 +1,37 @@
+import { ErrorMessage as e } from "../feedback/ErrorMessage.js";
+import { TanstackTable as t } from "./TanstackTable.js";
+import { useQuery as n } from "@tanstack/react-query";
+import { Stack as r } from "@chakra-ui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { getCoreRowModel as o, getSortedRowModel as s, useReactTable as c } from "@tanstack/react-table";
+import { useState as l } from "react";
+// src/table/SimpleQueryTable.tsx
+var u = [];
+function d({ queryKey: d, query: f, columns: p, initialSort: m, enabled: h = !0, getRowId: g, errorText: _ = "Could not load the rows.", ...v }) {
+	let [y, b] = l(m ? [m] : u), { data: x, isLoading: S, isError: C } = n({
+		queryKey: d,
+		queryFn: f,
+		enabled: h
+	}), w = c({
+		data: x ?? u,
+		columns: p,
+		getRowId: g,
+		state: { sorting: y },
+		onSortingChange: b,
+		getCoreRowModel: o(),
+		getSortedRowModel: s(),
+		enableMultiSort: !1,
+		enableSortingRemoval: !1
+	});
+	return /* @__PURE__ */ a(r, {
+		gap: "2",
+		width: "100%",
+		children: [C && /* @__PURE__ */ i(e, { children: _ }), /* @__PURE__ */ i(t, {
+			table: w,
+			isLoading: S,
+			isError: C,
+			...v
+		})]
+	});
+}
+export { d as SimpleQueryTable };

package/dist/table/TablePageSizeSelect.d.ts

@@ -0,0 +1,9 @@
+import type { Table } from "@tanstack/react-table";
+export declare const PAGE_SIZES: number[];
+export interface TablePageSizeSelectProps<T> {
+    table: Table<T>;
+    /** The sizes offered; any above {@link MAX_PAGE_SIZE} are left out, as a Paginator caps them. */
+    pageSizes?: number[];
+}
+/** Rows per page. */
+export declare function TablePageSizeSelect<T>({ table, pageSizes }: TablePageSizeSelectProps<T>): import("react").JSX.Element;

package/dist/table/TablePageSizeSelect.js

@@ -0,0 +1,35 @@
+import "../paging/paging.js";
+import { HStack as e, NativeSelect as t, Text as n } from "@chakra-ui/react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/table/TablePageSizeSelect.tsx
+var a = [
+	10,
+	25,
+	50,
+	100
+];
+function o({ table: o, pageSizes: s = a }) {
+	let c = o.getState().pagination.pageSize, l = [.../* @__PURE__ */ new Set([...s.filter((e) => e > 0 && e <= 100), c])].sort((e, t) => e - t);
+	return /* @__PURE__ */ i(e, {
+		gap: "2",
+		children: [/* @__PURE__ */ i(t.Root, {
+			size: "sm",
+			width: "80px",
+			children: [/* @__PURE__ */ r(t.Field, {
+				"aria-label": "Rows per page",
+				value: c,
+				onChange: (e) => o.setPageSize(Number(e.target.value)),
+				children: l.map((e) => /* @__PURE__ */ r("option", {
+					value: e,
+					children: e
+				}, e))
+			}), /* @__PURE__ */ r(t.Indicator, {})]
+		}), /* @__PURE__ */ r(n, {
+			fontSize: "sm",
+			color: "fg.muted",
+			"aria-hidden": !0,
+			children: "per page"
+		})]
+	});
+}
+export { a as PAGE_SIZES, o as TablePageSizeSelect };

package/dist/table/TablePagination.d.ts

@@ -0,0 +1,5 @@
+import type { Table } from "@tanstack/react-table";
+/** First, previous, a page number field, next and last; a page typed past the end goes to the last. */
+export declare function TablePagination<T>({ table }: {
+    table: Table<T>;
+}): import("react").JSX.Element;

package/dist/table/TablePagination.js

@@ -0,0 +1,65 @@
+import { HStack as e, IconButton as t, InputGroup as n, NumberInput as r } from "@chakra-ui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { LuChevronLeft as o, LuChevronRight as s, LuChevronsLeft as c, LuChevronsRight as l } from "react-icons/lu";
+// src/table/TablePagination.tsx
+function u({ table: u }) {
+	let d = u.getPageCount(), f = u.getState().pagination.pageIndex;
+	function p(e) {
+		Number.isFinite(e) && u.setPageIndex(Math.min(Math.max(Math.floor(e), 1), d) - 1);
+	}
+	return /* @__PURE__ */ a(e, {
+		gap: "1",
+		children: [
+			/* @__PURE__ */ i(t, {
+				"aria-label": "First page",
+				size: "sm",
+				variant: "ghost",
+				disabled: !u.getCanPreviousPage(),
+				onClick: () => u.firstPage(),
+				children: /* @__PURE__ */ i(c, {})
+			}),
+			/* @__PURE__ */ i(t, {
+				"aria-label": "Previous page",
+				size: "sm",
+				variant: "ghost",
+				disabled: !u.getCanPreviousPage(),
+				onClick: () => u.previousPage(),
+				children: /* @__PURE__ */ i(o, {})
+			}),
+			/* @__PURE__ */ i(n, {
+				startAddon: "Page",
+				endAddon: `of ${d}`,
+				width: "auto",
+				children: /* @__PURE__ */ a(r.Root, {
+					width: "80px",
+					min: 1,
+					max: Math.max(d, 1),
+					value: String(f + 1),
+					onValueChange: ({ valueAsNumber: e }) => p(e),
+					disabled: d <= 1,
+					children: [/* @__PURE__ */ i(r.Input, {
+						"aria-label": "Page",
+						onFocus: (e) => e.target.select()
+					}), /* @__PURE__ */ a(r.Control, { children: [/* @__PURE__ */ i(r.IncrementTrigger, {}), /* @__PURE__ */ i(r.DecrementTrigger, {})] })]
+				})
+			}),
+			/* @__PURE__ */ i(t, {
+				"aria-label": "Next page",
+				size: "sm",
+				variant: "ghost",
+				disabled: !u.getCanNextPage(),
+				onClick: () => u.nextPage(),
+				children: /* @__PURE__ */ i(s, {})
+			}),
+			/* @__PURE__ */ i(t, {
+				"aria-label": "Last page",
+				size: "sm",
+				variant: "ghost",
+				disabled: !u.getCanNextPage(),
+				onClick: () => u.lastPage(),
+				children: /* @__PURE__ */ i(l, {})
+			})
+		]
+	});
+}
+export { u as TablePagination };

package/dist/table/TableStatus.d.ts

@@ -0,0 +1,6 @@
+import { type TextProps } from "@chakra-ui/react";
+import type { Table } from "@tanstack/react-table";
+/** "Showing 26 to 50 of 60 rows", announced politely as it changes. */
+export declare function TableStatus<T>({ table, ...props }: TextProps & {
+    table: Table<T>;
+}): import("react").JSX.Element;

package/dist/table/TableStatus.js

@@ -0,0 +1,27 @@
+import { rowRange as e } from "../paging/paging.js";
+import { Text as t } from "@chakra-ui/react";
+import { jsxs as n } from "react/jsx-runtime";
+// src/table/TableStatus.tsx
+function r({ table: r, ...i }) {
+	let { pageIndex: a, pageSize: o } = r.getState().pagination, { first: s, last: c, total: l } = e({
+		pageIndex: a,
+		pageSize: o,
+		totalElementCount: r.getRowCount()
+	}, r.getRowModel().rows.length);
+	return /* @__PURE__ */ n(t, {
+		"aria-live": "polite",
+		color: "fg.muted",
+		fontSize: "sm",
+		...i,
+		children: [
+			"Showing ",
+			s,
+			" to ",
+			c,
+			" of ",
+			l,
+			" rows"
+		]
+	});
+}
+export { r as TableStatus };

package/dist/table/TableView.d.ts

@@ -0,0 +1,7 @@
+import { type TanstackTableProps } from "./TanstackTable";
+export type TableViewProps<T> = TanstackTableProps<T> & {
+    /** The page sizes offered; see {@link TablePageSizeSelect}. */
+    pageSizes?: number[];
+};
+/** A paged table: the rows, then the pager, the row count and the page size, once there are rows. */
+export declare function TableView<T>({ table, pageSizes, ...props }: TableViewProps<T>): import("react").JSX.Element;

package/dist/table/TableView.js

@@ -0,0 +1,31 @@
+import { TablePageSizeSelect as e } from "./TablePageSizeSelect.js";
+import { TablePagination as t } from "./TablePagination.js";
+import { TableStatus as n } from "./TableStatus.js";
+import { TanstackTable as r } from "./TanstackTable.js";
+import { Flex as i, Stack as a } from "@chakra-ui/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/table/TableView.tsx
+function c({ table: c, pageSizes: l, ...u }) {
+	return /* @__PURE__ */ s(a, {
+		gap: "2",
+		width: "100%",
+		children: [/* @__PURE__ */ o(r, {
+			table: c,
+			...u
+		}), c.getRowCount() > 0 && /* @__PURE__ */ s(i, {
+			wrap: "wrap",
+			gap: "3",
+			align: "center",
+			justify: "space-between",
+			children: [
+				/* @__PURE__ */ o(t, { table: c }),
+				/* @__PURE__ */ o(n, { table: c }),
+				/* @__PURE__ */ o(e, {
+					table: c,
+					pageSizes: l
+				})
+			]
+		})]
+	});
+}
+export { c as TableView };

package/dist/table/TanstackTable.d.ts

@@ -0,0 +1,16 @@
+import { type TableRootProps } from "@chakra-ui/react";
+import { type Table as ReactTable } from "@tanstack/react-table";
+export type TanstackTableProps<T> = Omit<TableRootProps, "children"> & {
+    table: ReactTable<T>;
+    /** True while the first rows load: shows a spinner instead of {@link emptyText}. */
+    isLoading?: boolean;
+    /** True when the rows could not be loaded: the error says so, not {@link emptyText}. */
+    isError?: boolean;
+    /** Shown in place of rows when there are none. */
+    emptyText?: string;
+};
+/**
+ * Renders a TanStack table. A sortable column's header is a button, so it sorts from the
+ * keyboard too, and carries `aria-sort`; a column with `enableSorting: false` gets neither.
+ */
+export declare function TanstackTable<T>({ table, isLoading, isError, emptyText, ...props }: TanstackTableProps<T>): import("react").JSX.Element;

package/dist/table/TanstackTable.js

@@ -0,0 +1,61 @@
+import { Box as e, Button as t, Center as n, Spinner as r, Table as i } from "@chakra-ui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { flexRender as s } from "@tanstack/react-table";
+import { LuArrowDown as c, LuArrowUp as l, LuArrowUpDown as u } from "react-icons/lu";
+// src/table/TanstackTable.tsx
+function d(e) {
+	let t = e.column.getIsSorted();
+	return t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
+}
+function f({ sorted: e }) {
+	return e === "asc" ? /* @__PURE__ */ a(l, { "aria-hidden": !0 }) : e === "desc" ? /* @__PURE__ */ a(c, { "aria-hidden": !0 }) : /* @__PURE__ */ a(u, {
+		"aria-hidden": !0,
+		opacity: .3
+	});
+}
+function p({ table: c, isLoading: l = !1, isError: u = !1, emptyText: p = "No rows.", ...m }) {
+	let h = c.getRowModel().rows, g = c.getVisibleLeafColumns().length;
+	return /* @__PURE__ */ a(e, {
+		bg: "bg.panel",
+		borderWidth: "1px",
+		borderRadius: "lg",
+		borderColor: "border",
+		width: "100%",
+		overflowX: "auto",
+		children: /* @__PURE__ */ o(i.Root, {
+			striped: !0,
+			size: "md",
+			width: "100%",
+			...m,
+			children: [/* @__PURE__ */ a(i.Header, { children: c.getHeaderGroups().map((e) => /* @__PURE__ */ a(i.Row, {
+				bg: "bg.subtle",
+				children: e.headers.map((e) => {
+					let n = e.isPlaceholder ? null : s(e.column.columnDef.header, e.getContext());
+					return e.column.getCanSort() ? /* @__PURE__ */ a(i.ColumnHeader, {
+						"aria-sort": d(e),
+						children: /* @__PURE__ */ o(t, {
+							size: "xs",
+							variant: "ghost",
+							onClick: e.column.getToggleSortingHandler(),
+							children: [n, /* @__PURE__ */ a(f, { sorted: e.column.getIsSorted() })]
+						})
+					}, e.id) : /* @__PURE__ */ a(i.ColumnHeader, { children: n }, e.id);
+				})
+			}, e.id)) }), /* @__PURE__ */ o(i.Body, { children: [h.map((e) => /* @__PURE__ */ a(i.Row, { children: e.getVisibleCells().map((e) => /* @__PURE__ */ a(i.Cell, { children: s(e.column.columnDef.cell, e.getContext()) }, e.id)) }, e.id)), h.length === 0 && !u && /* @__PURE__ */ a(i.Row, { children: /* @__PURE__ */ a(i.Cell, {
+				colSpan: g,
+				children: /* @__PURE__ */ a(n, {
+					py: "4",
+					children: l ? /* @__PURE__ */ a(e, {
+						role: "status",
+						"aria-label": "Loading",
+						children: /* @__PURE__ */ a(r, { size: "sm" })
+					}) : /* @__PURE__ */ a(e, {
+						color: "fg.muted",
+						children: p
+					})
+				})
+			}) })] })]
+		})
+	});
+}
+export { p as TanstackTable };

package/dist/table/index.d.ts

@@ -0,0 +1,11 @@
+export { FilterChips, type FilterChipsProps, type FilterOption } from "./FilterChips";
+export { QueryTable, type QueryTableProps } from "./QueryTable";
+export { createSelectColumn, type SelectColumnOptions } from "./selectColumn";
+export { SimpleQueryTable, type SimpleQueryTableProps } from "./SimpleQueryTable";
+export { TablePageSizeSelect, PAGE_SIZES, type TablePageSizeSelectProps } from "./TablePageSizeSelect";
+export { TablePagination } from "./TablePagination";
+export { TableStatus } from "./TableStatus";
+export { TableView, type TableViewProps } from "./TableView";
+export { TanstackTable, type TanstackTableProps } from "./TanstackTable";
+export { useDebounce } from "./useDebounce";
+export { DEFAULT_PAGE_SIZE, useQueryTable, type TableParams, type UseQueryTableOptions, type UseQueryTableResult, } from "./useQueryTable";

package/dist/table/index.js

@@ -0,0 +1,12 @@
+import { FilterChips as e } from "./FilterChips.js";
+import { QueryTable as t } from "./QueryTable.js";
+import { createSelectColumn as n } from "./selectColumn.js";
+import { SimpleQueryTable as r } from "./SimpleQueryTable.js";
+import { PAGE_SIZES as i, TablePageSizeSelect as a } from "./TablePageSizeSelect.js";
+import { TablePagination as o } from "./TablePagination.js";
+import { TableStatus as s } from "./TableStatus.js";
+import { TableView as c } from "./TableView.js";
+import { TanstackTable as l } from "./TanstackTable.js";
+import { useDebounce as u } from "./useDebounce.js";
+import { DEFAULT_PAGE_SIZE as d, useQueryTable as f } from "./useQueryTable.js";
+export { d as DEFAULT_PAGE_SIZE, e as FilterChips, i as PAGE_SIZES, t as QueryTable, r as SimpleQueryTable, a as TablePageSizeSelect, o as TablePagination, s as TableStatus, c as TableView, l as TanstackTable, n as createSelectColumn, u as useDebounce, f as useQueryTable };