@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,2 @@
+export * from "./tooltip.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip } from "./tooltip.js";

package/dist/components/tooltip/tooltip.css

@@ -0,0 +1,22 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._popup_1sb61_3 {
+    max-inline-size: var(--tooltip-max-inline-size, 18rem);
+    border-radius: var(--tooltip-radius, var(--sys-radius-sm));
+    background: var(--tooltip-bg, var(--sys-color-surface-overlay));
+    box-shadow: var(--tooltip-shadow, var(--sys-elevation-1));
+    padding: var(--sys-unit-4) var(--sys-unit-6);
+    color: var(--tooltip-fg, var(--sys-color-text));
+    font: var(--tooltip-font, var(--sys-font-body-small));
+    transform-origin: var(--transform-origin);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_1sb61_3 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._popup_1sb61_3[data-starting-style], ._popup_1sb61_3[data-ending-style] {
+    opacity: 0;
+    scale: 0.9;
+  }
+}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,47 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type { ReactElement, ReactNode } from "react";
+type Side = "top" | "right" | "bottom" | "left";
+export type TooltipTriggerProps = BaseTooltip.Trigger.Props & Readonly<{
+    /** Called once a pointer rests on the trigger or it takes focus, to warm what the hint shows. */
+    onIntent?: () => void;
+}>;
+declare const TooltipTrigger: ({ onIntent, onPointerEnter, onPointerLeave, onFocus, ...props }: TooltipTriggerProps) => ReactNode;
+declare const TooltipPositioner: ({ sideOffset, ...props }: BaseTooltip.Positioner.Props) => ReactNode;
+declare const TooltipPopup: ({ className, ...props }: BaseTooltip.Popup.Props) => ReactNode;
+export type TooltipProps = Readonly<{
+    /** The tooltip content; also serves as the visual hint for the trigger. */
+    content: ReactNode;
+    /**
+     * The trigger element, rendered in place via base-ui's `render` prop. Pass a
+     * single element exposing its own accessible name, not plain text.
+     */
+    children: ReactElement;
+    /** Preferred side to position the popup on. @default "top" */
+    side?: Side;
+    /** Distance in px between the popup and its anchor. @default 8 */
+    sideOffset?: number;
+    /** Called once a pointer rests on the trigger or it takes focus, to warm what `content` shows. */
+    onIntent?: () => void;
+}>;
+declare const TooltipRoot: ({ content, children, side, sideOffset, onIntent, }: TooltipProps) => ReactElement;
+type TooltipParts = typeof TooltipRoot & Omit<typeof BaseTooltip, "Trigger" | "Positioner" | "Popup"> & Readonly<{
+    Trigger: typeof TooltipTrigger;
+    Positioner: typeof TooltipPositioner;
+    Popup: typeof TooltipPopup;
+}>;
+/**
+ * A hint on a trigger, which is supplied as `children`. Mount `Tooltip.Provider`
+ * once near the app root, so that moving between triggers keeps the hint up
+ * instead of waiting out the delay again. Assembled from the parts hanging off
+ * it, which stay reachable for a controlled `open`, an `align`, a
+ * `collisionPadding`, or a `Handle` shared by a group of triggers. There is no
+ * `Arrow`: a tooltip is an unarrowed popup with its own `box-shadow`.
+ *
+ * @example
+ * <Tooltip content="Previous page">
+ * 	<button aria-label="Previous page">…</button>
+ * </Tooltip>
+ */
+export declare const Tooltip: TooltipParts;
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAIhD,MAAM,MAAM,mBAAmB,GAC9B,WAAW,CAAC,OAAO,CAAC,KAAK,GACxB,QAAQ,CAAC;IACR,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC,CAAC;AAEL,QAAA,MAAM,cAAc,oEAMjB,mBAAmB,KAAG,SAaxB,CAAC;AAEF,QAAA,MAAM,iBAAiB,6BAGpB,WAAW,CAAC,UAAU,CAAC,KAAK,KAAG,SAKjC,CAAC;AAEF,QAAA,MAAM,YAAY,4BAGf,WAAW,CAAC,KAAK,CAAC,KAAK,KAAG,SAK5B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC,2EAA2E;IAC3E,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,EAAE,YAAY,CAAC;IAEvB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,kGAAkG;IAClG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC,CAAC;AAEH,QAAA,MAAM,WAAW,uDAMd,YAAY,KAAG,YAWjB,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,WAAW,GACrC,IAAI,CACH,OAAO,WAAW,EAClB,SAAS,GAAG,YAAY,GAAG,OAAO,CAClC,GACD,QAAQ,CAAC;IACR,OAAO,EAAE,OAAO,cAAc,CAAC;IAC/B,UAAU,EAAE,OAAO,iBAAiB,CAAC;IACrC,KAAK,EAAE,OAAO,YAAY,CAAC;CAC3B,CAAC,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,EAAE,YAQrB,CAAC"}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,175 @@
+import { useIntent } from "../../lib/use-intent.js";
+import tooltip_module_default from "./tooltip.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/components/tooltip/tooltip.tsx
+var DEFAULT_SIDE_OFFSET = 8;
+var TooltipTrigger = (t0) => {
+	const $ = c(14);
+	let onFocus;
+	let onIntent;
+	let onPointerEnter;
+	let onPointerLeave;
+	let props;
+	if ($[0] !== t0) {
+		({onIntent, onPointerEnter, onPointerLeave, onFocus, ...props} = t0);
+		$[0] = t0;
+		$[1] = onFocus;
+		$[2] = onIntent;
+		$[3] = onPointerEnter;
+		$[4] = onPointerLeave;
+		$[5] = props;
+	} else {
+		onFocus = $[1];
+		onIntent = $[2];
+		onPointerEnter = $[3];
+		onPointerLeave = $[4];
+		props = $[5];
+	}
+	const intent = useIntent(onIntent);
+	let t1;
+	if ($[6] !== intent || $[7] !== onFocus || $[8] !== onPointerEnter || $[9] !== onPointerLeave) {
+		t1 = mergeProps(intent, {
+			onPointerEnter,
+			onPointerLeave,
+			onFocus
+		});
+		$[6] = intent;
+		$[7] = onFocus;
+		$[8] = onPointerEnter;
+		$[9] = onPointerLeave;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== props || $[12] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			...props,
+			...t1
+		});
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
+};
+var TooltipPositioner = (t0) => {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({sideOffset: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const sideOffset = t1 === void 0 ? DEFAULT_SIDE_OFFSET : t1;
+	let t2;
+	if ($[3] !== props || $[4] !== sideOffset) {
+		t2 = /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			sideOffset,
+			...props
+		});
+		$[3] = props;
+		$[4] = sideOffset;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+var TooltipPopup = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(tooltip_module_default.popup, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tooltip.Popup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var TooltipRoot = (t0) => {
+	const $ = c(12);
+	const { content, children, side: t1, sideOffset, onIntent } = t0;
+	const side = t1 === void 0 ? "top" : t1;
+	let t2;
+	if ($[0] !== children || $[1] !== onIntent) {
+		t2 = /* @__PURE__ */ jsx(TooltipTrigger, {
+			render: children,
+			onIntent
+		});
+		$[0] = children;
+		$[1] = onIntent;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== content) {
+		t3 = /* @__PURE__ */ jsx(TooltipPopup, { children: content });
+		$[3] = content;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== side || $[6] !== sideOffset || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+			side,
+			sideOffset,
+			children: t3
+		}) });
+		$[5] = side;
+		$[6] = sideOffset;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Tooltip.Root, { children: [t2, t4] });
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+};
+/**
+* A hint on a trigger, which is supplied as `children`. Mount `Tooltip.Provider`
+* once near the app root, so that moving between triggers keeps the hint up
+* instead of waiting out the delay again. Assembled from the parts hanging off
+* it, which stay reachable for a controlled `open`, an `align`, a
+* `collisionPadding`, or a `Handle` shared by a group of triggers. There is no
+* `Arrow`: a tooltip is an unarrowed popup with its own `box-shadow`.
+*
+* @example
+* <Tooltip content="Previous page">
+* 	<button aria-label="Previous page">…</button>
+* </Tooltip>
+*/
+var Tooltip$1 = Object.assign(TooltipRoot, {
+	...Tooltip,
+	Trigger: TooltipTrigger,
+	Positioner: TooltipPositioner,
+	Popup: TooltipPopup
+});
+export { Tooltip$1 as Tooltip };

package/dist/components/tooltip/tooltip.module.js

@@ -0,0 +1,4 @@
+import './tooltip.css';// src/components/tooltip/tooltip.module.scss
+var popup = "_popup_1sb61_3";
+var tooltip_module_default = { popup };
+export { tooltip_module_default as default, popup };

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

@@ -0,0 +1,28 @@
+import type { Row } from "@tanstack/react-table";
+import { type ReactNode } from "react";
+import type { DataTableFeatures } from "./table-features.ts";
+export type DataTableContentProps<TData extends Record<string, unknown>> = Readonly<{
+    /**
+     * Renders the expanded content for a row (TanStack expansion API). The
+     * returned node is placed in a full-width cell beneath the row.
+     */
+    renderSubRow?: (row: Row<DataTableFeatures, TData>) => ReactNode;
+    /** The body when the query matched nothing, such as "No declarations yet." */
+    emptyState: ReactNode;
+    /** What a failed fetch says, as the body or above rows still on screen, such as "The declarations could not be loaded." */
+    errorState: ReactNode;
+    /** What is announced while the first page loads, as the table's caption, such as "Loading declarations". */
+    loadingState: ReactNode;
+    /** What the overlay says when a refresh runs long, such as "This is taking longer than usual." */
+    slowLabel: ReactNode;
+    /** The retry's label, such as "Try again". */
+    retryLabel: string;
+    className?: string;
+}>;
+/**
+ * Renders the `<table>` header and body from the enclosing `DataTable`
+ * instance, resolving the injected query state into one of four bodies:
+ * loading, error, empty, or ready.
+ */
+export declare const DataTableContent: <TData extends Record<string, unknown>>({ renderSubRow, emptyState, errorState, loadingState, slowLabel, retryLabel, className, }: DataTableContentProps<TData>) => ReactNode;
+//# sourceMappingURL=data-table-content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-content.d.ts","sourceRoot":"","sources":["../../src/data-table/data-table-content.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEX,GAAG,EAEH,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOjD,OAAO,KAAK,EAEX,iBAAiB,EACjB,MAAM,qBAAqB,CAAC;AAiF7B,MAAM,MAAM,qBAAqB,CAChC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAClC,QAAQ,CAAC;IACZ;;;OAGG;IACH,YAAY,CAAC,EAAE,CACd,GAAG,EAAE,GAAG,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAC9B,SAAS,CAAC;IACf,8EAA8E;IAC9E,UAAU,EAAE,SAAS,CAAC;IACtB,2HAA2H;IAC3H,UAAU,EAAE,SAAS,CAAC;IACtB,4GAA4G;IAC5G,YAAY,EAAE,SAAS,CAAC;IACxB,kGAAkG;IAClG,SAAS,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAC5B,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,6FASnC,qBAAqB,CAAC,KAAK,CAAC,KAAG,SAuNjC,CAAC"}

package/dist/data-table/data-table-content.js

@@ -0,0 +1,311 @@
+import SvgArrowDownward from "../vendor/@material-design-icons/svg/outlined/arrow_downward.js";
+import SvgArrowUpward from "../vendor/@material-design-icons/svg/outlined/arrow_upward.js";
+import SvgUnfoldMore from "../vendor/@material-design-icons/svg/outlined/unfold_more.js";
+import { Button } from "../components/button/button.js";
+import { Icon } from "../components/icon/icon.js";
+import { Skeleton } from "../components/skeleton/skeleton.js";
+import { Stale } from "../components/stale/stale.js";
+import { useDataTable } from "./data-table-context.js";
+import { resolveView } from "./resolve-view.js";
+import { useStickyOffsets } from "./use-sticky-offsets.js";
+import data_table_module_default from "./data-table.module.js";
+import { c } from "react/compiler-runtime";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/data-table/data-table-content.tsx
+var SORT_ICON = {
+	asc: SvgArrowUpward,
+	desc: SvgArrowDownward
+};
+var ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
+/**
+* The `aria-sort` value for a header cell, given its column's sort state.
+*
+* @example
+* ariaSort("desc"); // -> "descending"
+* ariaSort(false); // -> undefined
+*/
+var ariaSort = (sorted) => sorted === false ? void 0 : ARIA_SORT[sorted];
+/**
+* The props a column's layout options put on its header and body cells: the
+* data attributes the stylesheet reads, plus the inset a pinned cell sits at.
+*
+* @example
+* <td {...cellProps(cell.column.columnDef.meta, pins.get(cell.column.id))} />
+*/
+var cellProps = (meta, pin) => ({
+	"data-fit": meta?.fit ? "true" : void 0,
+	"data-numeric": meta?.numeric ? "true" : void 0,
+	"data-sticky": pin?.side,
+	style: pin === void 0 ? void 0 : pin.side === "start" ? { insetInlineStart: `var(--table-sticky-inset-${pin.index}, 0px)` } : { insetInlineEnd: `var(--table-sticky-end-${pin.index}, 0px)` }
+});
+/**
+* Maps each pinned column's id to the edge it sits at and its position in that
+* edge's group.
+*
+* @example
+* columnPins(columns).get("actions"); // -> { side: "end", index: 0 }
+*/
+var columnPins = (columns) => new Map(["start", "end"].flatMap((side) => columns.filter((column) => column.columnDef.meta?.sticky === side).map((column, index) => [column.id, {
+	side,
+	index
+}])));
+/**
+* Renders the `<table>` header and body from the enclosing `DataTable`
+* instance, resolving the injected query state into one of four bodies:
+* loading, error, empty, or ready.
+*/
+var DataTableContent = (t0) => {
+	const $ = c(24);
+	const { renderSubRow, emptyState, errorState, loadingState, slowLabel, retryLabel, className } = t0;
+	const { table, status, isFetching, onRetry } = useDataTable();
+	const rows = table.getRowModel().rows;
+	const leafColumns = table.getAllLeafColumns();
+	const columnCount = leafColumns.length;
+	const pins = columnPins(leafColumns);
+	const pinCount = (side) => [...pins.values()].filter((pin) => pin.side === side).length;
+	const startPinCount = pinCount("start");
+	const endPinCount = pinCount("end");
+	const frameRef = useStickyOffsets([...pins].map(_temp).join(","));
+	const t1 = rows.length > 0;
+	let t2;
+	if ($[0] !== isFetching || $[1] !== status || $[2] !== t1) {
+		t2 = resolveView({
+			status,
+			isFetching,
+			hasRows: t1
+		});
+		$[0] = isFetching;
+		$[1] = status;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	const { view, stale, refreshFailed } = t2;
+	let t3;
+	if ($[4] !== errorState || $[5] !== onRetry || $[6] !== refreshFailed || $[7] !== retryLabel) {
+		t3 = refreshFailed ? /* @__PURE__ */ jsxs("div", {
+			className: data_table_module_default.refreshFailed,
+			role: "alert",
+			children: [/* @__PURE__ */ jsx("span", { children: errorState }), onRetry ? /* @__PURE__ */ jsx(Button, {
+				variant: "tertiary",
+				size: "sm",
+				onClick: onRetry,
+				children: retryLabel
+			}) : null]
+		}) : null;
+		$[4] = errorState;
+		$[5] = onRetry;
+		$[6] = refreshFailed;
+		$[7] = retryLabel;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== className) {
+		t4 = clsx(data_table_module_default.contentWrap, className);
+		$[9] = className;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== loadingState || $[12] !== view) {
+		t5 = view === "loading" ? /* @__PURE__ */ jsx("caption", {
+			className: data_table_module_default.busyCaption,
+			children: loadingState
+		}) : null;
+		$[11] = loadingState;
+		$[12] = view;
+		$[13] = t5;
+	} else t5 = $[13];
+	const t6 = view === "ready" ? rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+		className: data_table_module_default.row,
+		"data-stripe": row.index % 2 === 1 ? "true" : void 0,
+		children: row.getAllCells().map((cell) => /* @__PURE__ */ jsx("td", {
+			className: data_table_module_default.td,
+			...cellProps(cell.column.columnDef.meta, pins.get(cell.column.id)),
+			children: /* @__PURE__ */ jsx(table.FlexRender, { cell })
+		}, cell.id))
+	}), renderSubRow && row.getIsExpanded() ? /* @__PURE__ */ jsxs("tr", {
+		className: data_table_module_default.subRow,
+		children: [
+			startPinCount > 0 ? /* @__PURE__ */ jsx("td", {
+				className: data_table_module_default.td,
+				colSpan: startPinCount,
+				"data-sticky": "start",
+				style: { insetInlineStart: 0 }
+			}) : null,
+			/* @__PURE__ */ jsx("td", {
+				colSpan: columnCount - startPinCount - endPinCount,
+				children: renderSubRow(row)
+			}),
+			endPinCount > 0 ? /* @__PURE__ */ jsx("td", {
+				className: data_table_module_default.td,
+				colSpan: endPinCount,
+				"data-sticky": "end",
+				style: { insetInlineEnd: 0 }
+			}) : null
+		]
+	}) : null] }, row.id)) : view === "loading" ? /* @__PURE__ */ jsx(PlaceholderRows, {
+		rowCount: table.state.pagination.pageSize,
+		columns: leafColumns.map((column) => ({
+			id: column.id,
+			meta: column.columnDef.meta,
+			pin: pins.get(column.id)
+		}))
+	}) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		colSpan: columnCount,
+		className: data_table_module_default.stateCell,
+		children: /* @__PURE__ */ jsx(StateBody, {
+			view,
+			emptyState,
+			errorState
+		})
+	}) });
+	let t7;
+	if ($[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx("tbody", { children: t6 });
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== slowLabel) {
+		t8 = /* @__PURE__ */ jsx(Stale.Message, { children: slowLabel });
+		$[16] = slowLabel;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== onRetry || $[19] !== retryLabel) {
+		t9 = onRetry ? /* @__PURE__ */ jsx(Stale.Retry, {
+			onRetry,
+			children: retryLabel
+		}) : null;
+		$[18] = onRetry;
+		$[19] = retryLabel;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t8 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Stale.Overlay, {
+			className: data_table_module_default.staleOverlay,
+			children: [t8, t9]
+		});
+		$[21] = t8;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, /* @__PURE__ */ jsx("div", {
+		ref: frameRef,
+		className: data_table_module_default.scrollFrame,
+		children: /* @__PURE__ */ jsxs(Stale.Root, {
+			busy: stale,
+			className: data_table_module_default.stale,
+			children: [/* @__PURE__ */ jsx(Stale.Content, {
+				className: data_table_module_default.stale,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-scroller": true,
+					className: t4,
+					children: /* @__PURE__ */ jsxs("table", {
+						className: data_table_module_default.table,
+						"aria-busy": view === "loading" ? "true" : void 0,
+						children: [
+							t5,
+							/* @__PURE__ */ jsx("thead", {
+								className: data_table_module_default.thead,
+								children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => {
+									const sorted = header.column.getIsSorted();
+									return /* @__PURE__ */ jsx("th", {
+										scope: "col",
+										colSpan: header.colSpan,
+										className: data_table_module_default.th,
+										"aria-sort": ariaSort(sorted),
+										...cellProps(header.column.columnDef.meta, pins.get(header.column.id)),
+										children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											className: data_table_module_default.sortToggle,
+											onClick: () => {
+												header.column.toggleSorting();
+												table.setPageIndex(0);
+											},
+											children: [/* @__PURE__ */ jsx(table.FlexRender, { header }), /* @__PURE__ */ jsx(Icon, {
+												svg: sorted === false ? SvgUnfoldMore : SORT_ICON[sorted],
+												label: "",
+												className: sorted === false ? data_table_module_default.sortIconIdle : void 0
+											})]
+										}) : /* @__PURE__ */ jsx(table.FlexRender, { header })
+									}, header.id);
+								}) }, headerGroup.id))
+							}),
+							t7
+						]
+					})
+				})
+			}), t10]
+		})
+	})] });
+};
+/**
+* Inert placeholder rows for a first load: one row per row of the selected page
+* size. A column that declares a `placeholderCell` draws it; every other column
+* gets a skeleton bar.
+*/
+var PlaceholderRows = (t0) => {
+	const $ = c(5);
+	const { rowCount, columns } = t0;
+	let t1;
+	if ($[0] !== columns || $[1] !== rowCount) {
+		let t2;
+		if ($[3] !== columns) {
+			t2 = (_, index) => /* @__PURE__ */ jsx("tr", {
+				className: data_table_module_default.row,
+				"data-stripe": index % 2 === 1 ? "true" : void 0,
+				inert: true,
+				children: columns.map(_temp2)
+			}, index);
+			$[3] = columns;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: rowCount }, t2) });
+		$[0] = columns;
+		$[1] = rowCount;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+var StateBody = (t0) => {
+	const $ = c(4);
+	const { view, emptyState, errorState } = t0;
+	if (view === "error") {
+		let t1;
+		if ($[0] !== errorState) {
+			t1 = /* @__PURE__ */ jsx("span", {
+				className: data_table_module_default.errorState,
+				role: "alert",
+				children: errorState
+			});
+			$[0] = errorState;
+			$[1] = t1;
+		} else t1 = $[1];
+		return t1;
+	}
+	let t1;
+	if ($[2] !== emptyState) {
+		t1 = /* @__PURE__ */ jsx(Fragment$1, { children: emptyState });
+		$[2] = emptyState;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+};
+function _temp(t0) {
+	const [id, pin_0] = t0;
+	return `${id}:${pin_0.side}`;
+}
+function _temp2(column) {
+	return /* @__PURE__ */ jsx("td", {
+		className: data_table_module_default.td,
+		...cellProps(column.meta, column.pin),
+		children: column.meta?.placeholderCell?.() ?? /* @__PURE__ */ jsx(Skeleton, { className: data_table_module_default.skeletonBar })
+	}, column.id);
+}
+export { DataTableContent };

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

@@ -0,0 +1,34 @@
+import type { ReactTable } from "@tanstack/react-table";
+import { type Context } from "react";
+import type { RowSelectionView } from "../lib/hooks/use-row-selection.ts";
+import type { QueryStatus } from "./resolve-view.ts";
+import type { DataTableFeatures } from "./table-features.ts";
+/**
+ * What the `DataTable` parts share. `table` is held as `unknown` because a
+ * table instance is invariant in its row type; {@link useDataTable}
+ * re-narrows it.
+ */
+export type DataTableContextValue = Readonly<{
+    table: unknown;
+    status: QueryStatus;
+    isFetching: boolean;
+    /** Refetches; the stale overlay and the refresh-failed notice offer it as a retry. */
+    onRetry?: () => void;
+    /** Present only on a selectable table; the selection parts require it. */
+    selection?: RowSelectionView;
+}>;
+/** The provider `DataTable.Root` renders. */
+export declare const DataTableContext: Context<DataTableContextValue | null>;
+export type DataTableState<TData extends Record<string, unknown>> = Omit<DataTableContextValue, "table"> & Readonly<{
+    table: ReactTable<DataTableFeatures, TData>;
+}>;
+/**
+ * Reads the enclosing `DataTable.Root` and re-narrows its table instance to the
+ * caller's row type. Pass the same `TData` the table was built with.
+ *
+ * @example
+ * const { table } = useDataTable<Appointment>();
+ * const rows = table.getRowModel().rows;
+ */
+export declare const useDataTable: <TData extends Record<string, unknown> = Record<string, unknown>>() => DataTableState<TData>;
+//# sourceMappingURL=data-table-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../src/data-table/data-table-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC5C,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC7B,CAAC,CAAC;AAEH,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,GAAG,IAAI,CACjB,CAAC;AAEnD,MAAM,MAAM,cAAc,CACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAClC,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC,GACvC,QAAQ,CAAC;IAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;CAAE,CAAC,CAAC;AAE3D;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GACxB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAC7C,MAAM,EACN,OAAO,CACP,OACG,cAAc,CAAC,KAAK,CAaxB,CAAC"}

package/dist/data-table/data-table-context.js

@@ -0,0 +1,31 @@
+import { useRequiredContext } from "../lib/use-required-context.js";
+import { c } from "react/compiler-runtime";
+import { createContext } from "react";
+// src/data-table/data-table-context.tsx
+/** The provider `DataTable.Root` renders. */
+var DataTableContext = createContext(null);
+/**
+* Reads the enclosing `DataTable.Root` and re-narrows its table instance to the
+* caller's row type. Pass the same `TData` the table was built with.
+*
+* @example
+* const { table } = useDataTable<Appointment>();
+* const rows = table.getRowModel().rows;
+*/
+var useDataTable = () => {
+	const $ = c(3);
+	const context = useRequiredContext(DataTableContext, "DataTable.* must be rendered inside <DataTable.Root>.");
+	const t0 = context.table;
+	let t1;
+	if ($[0] !== context || $[1] !== t0) {
+		t1 = {
+			...context,
+			table: t0
+		};
+		$[0] = context;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+export { DataTableContext, useDataTable };