@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/table/list-tabs.js

@@ -0,0 +1,105 @@
+import { useAlfakitProps, useDirection, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { extraProps } from "../../lib/attributes.js";
+import { Slot } from "../panel/slot.js";
+import { listTabIds, listTabUrl, tabKeyTarget, withDeferredTabBadges } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/list-tabs.tsx
+/**
+* Tabs above a resource's list table (`ListRecords::getTabs()`). Choosing one reloads the
+* page with `?activeTab=` (the server narrows the query); filters and search are kept.
+* Keyboard: one tab stop (the active tab), arrow keys / Home / End move focus (RTL-aware),
+* Enter / Space select. With `idBase` the tabs control the panel `ListTabsPanel` renders.
+*/
+function ListTabs({ tabs, activeTab, tabsQueryKey, label, idBase }) {
+	const t = useT();
+	const direction = useDirection();
+	const buttons = useRef([]);
+	const deferred = useAlfakitProps().alfakitTabBadges;
+	const shown = useMemo(() => withDeferredTabBadges(tabs, deferred), [tabs, deferred]);
+	const select = (tab) => {
+		if (tab.key === activeTab || typeof window === "undefined") return;
+		router.visit(listTabUrl(window.location.href, tab.key, tabsQueryKey), {
+			preserveState: true,
+			preserveScroll: true,
+			replace: true
+		});
+	};
+	const focusable = shown.some((tab) => tab.key === activeTab) ? activeTab : shown[0]?.key;
+	const onKeyDown = (event, index) => {
+		const target = tabKeyTarget(event.key, index, shown.length, direction);
+		if (target === null) return;
+		event.preventDefault();
+		buttons.current[target]?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "list-tabs",
+		role: "tablist",
+		"aria-label": label,
+		className: "bg-muted text-muted-foreground relative inline-flex h-9 w-fit max-w-full items-center overflow-x-auto rounded-lg p-[3px]",
+		children: [
+			/* @__PURE__ */ jsx(Slot, { name: "resource.list-records.tabs.start" }),
+			shown.map((tab, index) => {
+				const active = tab.key === activeTab;
+				const ids = idBase ? listTabIds(idBase, tab.key) : null;
+				return /* @__PURE__ */ jsxs("button", {
+					...extraProps(tab.extraAttributes, cn("inline-flex h-[calc(100%-1px)] shrink-0 items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-none", "focus-visible:border-ring focus-visible:ring-ring/50", active ? "bg-background text-foreground shadow-sm" : "hover:text-foreground")),
+					ref: (element) => {
+						buttons.current[index] = element;
+					},
+					type: "button",
+					role: "tab",
+					id: ids?.tab,
+					"aria-controls": ids?.panel,
+					"aria-selected": active,
+					tabIndex: tab.key === focusable ? 0 : -1,
+					"data-state": active ? "active" : "inactive",
+					onClick: () => select(tab),
+					onKeyDown: (event) => onKeyDown(event, index),
+					children: [
+						tab.icon && tab.iconPosition !== "after" && /* @__PURE__ */ jsx(Icon, {
+							name: tab.icon,
+							className: "size-4"
+						}),
+						tab.label,
+						tab.icon && tab.iconPosition === "after" && /* @__PURE__ */ jsx(Icon, {
+							name: tab.icon,
+							className: "size-4"
+						}),
+						tab.badge !== void 0 && tab.badge !== null && /* @__PURE__ */ jsx("span", {
+							"data-slot": "badge",
+							className: cn("ms-1 rounded-md px-1.5 py-0 text-xs font-medium", colorClass(badgeColorClasses, tab.badgeColor, "gray")),
+							children: tab.badge
+						}),
+						tab.badgePending && /* @__PURE__ */ jsx("span", {
+							"data-slot": "badge",
+							"aria-busy": "true",
+							"aria-label": t("loading", {}, "Loading"),
+							className: "bg-muted-foreground/20 ms-1 inline-block h-4 w-5 animate-pulse rounded-md"
+						})
+					]
+				}, tab.key);
+			}),
+			/* @__PURE__ */ jsx(Slot, { name: "resource.list-records.tabs.end" })
+		]
+	});
+}
+/** The table under list tabs, as the tab panel of the active tab. */
+function ListTabsPanel({ idBase, activeTab, children }) {
+	const ids = listTabIds(idBase, activeTab ?? "");
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "list-tabs-panel",
+		role: "tabpanel",
+		id: ids.panel,
+		"aria-labelledby": activeTab ? ids.tab : void 0,
+		children
+	});
+}
+//#endregion
+export { ListTabs, ListTabsPanel };
+
+//# sourceMappingURL=list-tabs.js.map

package/dist/components/table/list-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-tabs.js","names":[],"sources":["../../../src/components/table/list-tabs.tsx"],"sourcesContent":["import type { ListTabSchema, ListTabsProps } from '@alfakit/core'\nimport { listTabIds, listTabUrl, tabKeyTarget, withDeferredTabBadges } from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport type { KeyboardEvent, ReactNode } from 'react'\nimport { useMemo, useRef } from 'react'\nimport { useAlfakitProps, useDirection, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Slot } from '../panel/slot'\n\n/**\n * Tabs above a resource's list table (`ListRecords::getTabs()`). Choosing one reloads the\n * page with `?activeTab=` (the server narrows the query); filters and search are kept.\n * Keyboard: one tab stop (the active tab), arrow keys / Home / End move focus (RTL-aware),\n * Enter / Space select. With `idBase` the tabs control the panel `ListTabsPanel` renders.\n */\nexport function ListTabs({\n  tabs,\n  activeTab,\n  tabsQueryKey,\n  label,\n  idBase,\n}: Required<Pick<ListTabsProps, 'tabs'>> & ListTabsProps & { label?: string; idBase?: string }) {\n  const t = useT()\n  const direction = useDirection()\n  const buttons = useRef<Array<HTMLButtonElement | null>>([])\n  // `deferBadge()` tabs get their badge from a deferred prop loaded after the page.\n  const deferred = useAlfakitProps().alfakitTabBadges\n  const shown = useMemo(() => withDeferredTabBadges(tabs, deferred), [tabs, deferred])\n  const select = (tab: ListTabSchema) => {\n    if (tab.key === activeTab || typeof window === 'undefined') return\n\n    router.visit(listTabUrl(window.location.href, tab.key, tabsQueryKey), {\n      preserveState: true,\n      preserveScroll: true,\n      replace: true,\n    })\n  }\n\n  const focusable = shown.some((tab) => tab.key === activeTab) ? activeTab : shown[0]?.key\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const target = tabKeyTarget(event.key, index, shown.length, direction)\n\n    if (target === null) return\n\n    event.preventDefault()\n    buttons.current[target]?.focus()\n  }\n\n  return (\n    <div\n      data-slot=\"list-tabs\"\n      role=\"tablist\"\n      aria-label={label}\n      className=\"bg-muted text-muted-foreground relative inline-flex h-9 w-fit max-w-full items-center overflow-x-auto rounded-lg p-[3px]\"\n    >\n      <Slot name=\"resource.list-records.tabs.start\" />\n      {shown.map((tab, index) => {\n        const active = tab.key === activeTab\n        const ids = idBase ? listTabIds(idBase, tab.key) : null\n\n        return (\n          <button\n            key={tab.key}\n            {...extraProps(\n              tab.extraAttributes,\n              cn(\n                'inline-flex h-[calc(100%-1px)] shrink-0 items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-none',\n                'focus-visible:border-ring focus-visible:ring-ring/50',\n                active ? 'bg-background text-foreground shadow-sm' : 'hover:text-foreground',\n              ),\n            )}\n            ref={(element) => {\n              buttons.current[index] = element\n            }}\n            type=\"button\"\n            role=\"tab\"\n            id={ids?.tab}\n            aria-controls={ids?.panel}\n            aria-selected={active}\n            tabIndex={tab.key === focusable ? 0 : -1}\n            data-state={active ? 'active' : 'inactive'}\n            onClick={() => select(tab)}\n            onKeyDown={(event) => onKeyDown(event, index)}\n          >\n            {tab.icon && tab.iconPosition !== 'after' && (\n              <Icon name={tab.icon} className=\"size-4\" />\n            )}\n            {tab.label}\n            {tab.icon && tab.iconPosition === 'after' && (\n              <Icon name={tab.icon} className=\"size-4\" />\n            )}\n            {tab.badge !== undefined && tab.badge !== null && (\n              <span\n                data-slot=\"badge\"\n                className={cn(\n                  'ms-1 rounded-md px-1.5 py-0 text-xs font-medium',\n                  colorClass(badgeColorClasses, tab.badgeColor, 'gray'),\n                )}\n              >\n                {tab.badge}\n              </span>\n            )}\n            {tab.badgePending && (\n              <span\n                data-slot=\"badge\"\n                aria-busy=\"true\"\n                aria-label={t('loading', {}, 'Loading')}\n                className=\"bg-muted-foreground/20 ms-1 inline-block h-4 w-5 animate-pulse rounded-md\"\n              />\n            )}\n          </button>\n        )\n      })}\n      <Slot name=\"resource.list-records.tabs.end\" />\n    </div>\n  )\n}\n\n/** The table under list tabs, as the tab panel of the active tab. */\nexport function ListTabsPanel({\n  idBase,\n  activeTab,\n  children,\n}: {\n  idBase: string\n  activeTab?: string\n  children: ReactNode\n}) {\n  const ids = listTabIds(idBase, activeTab ?? '')\n\n  return (\n    <div\n      data-slot=\"list-tabs-panel\"\n      role=\"tabpanel\"\n      id={ids.panel}\n      aria-labelledby={activeTab ? ids.tab : undefined}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,SAAS,EACvB,MACA,WACA,cACA,OACA,UAC8F;CAC9F,MAAM,IAAI,KAAK;CACf,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,OAAwC,CAAC,CAAC;CAE1D,MAAM,WAAW,gBAAgB,CAAC,CAAC;CACnC,MAAM,QAAQ,cAAc,sBAAsB,MAAM,QAAQ,GAAG,CAAC,MAAM,QAAQ,CAAC;CACnF,MAAM,UAAU,QAAuB;EACrC,IAAI,IAAI,QAAQ,aAAa,OAAO,WAAW,aAAa;EAE5D,OAAO,MAAM,WAAW,OAAO,SAAS,MAAM,IAAI,KAAK,YAAY,GAAG;GACpE,eAAe;GACf,gBAAgB;GAChB,SAAS;EACX,CAAC;CACH;CAEA,MAAM,YAAY,MAAM,MAAM,QAAQ,IAAI,QAAQ,SAAS,IAAI,YAAY,MAAM,EAAE,EAAE;CACrF,MAAM,aAAa,OAAyC,UAAkB;EAC5E,MAAM,SAAS,aAAa,MAAM,KAAK,OAAO,MAAM,QAAQ,SAAS;EAErE,IAAI,WAAW,MAAM;EAErB,MAAM,eAAe;EACrB,QAAQ,QAAQ,OAAO,EAAE,MAAM;CACjC;CAEA,OACE,qBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,WAAU;EAJZ,UAAA;GAME,oBAAC,MAAD,EAAM,MAAK,mCAAoC,CAAA;GAC9C,MAAM,KAAK,KAAK,UAAU;IACzB,MAAM,SAAS,IAAI,QAAQ;IAC3B,MAAM,MAAM,SAAS,WAAW,QAAQ,IAAI,GAAG,IAAI;IAEnD,OACE,qBAAC,UAAD;KAEE,GAAI,WACF,IAAI,iBACJ,GACE,wPACA,wDACA,SAAS,4CAA4C,uBACvD,CACF;KACA,MAAM,YAAY;MAChB,QAAQ,QAAQ,SAAS;KAC3B;KACA,MAAK;KACL,MAAK;KACL,IAAI,KAAK;KACT,iBAAe,KAAK;KACpB,iBAAe;KACf,UAAU,IAAI,QAAQ,YAAY,IAAI;KACtC,cAAY,SAAS,WAAW;KAChC,eAAe,OAAO,GAAG;KACzB,YAAY,UAAU,UAAU,OAAO,KAAK;KArB9C,UAAA;MAuBG,IAAI,QAAQ,IAAI,iBAAiB,WAChC,oBAAC,MAAD;OAAM,MAAM,IAAI;OAAM,WAAU;MAAU,CAAA;MAE3C,IAAI;MACJ,IAAI,QAAQ,IAAI,iBAAiB,WAChC,oBAAC,MAAD;OAAM,MAAM,IAAI;OAAM,WAAU;MAAU,CAAA;MAE3C,IAAI,UAAU,KAAA,KAAa,IAAI,UAAU,QACxC,oBAAC,QAAD;OACE,aAAU;OACV,WAAW,GACT,mDACA,WAAW,mBAAmB,IAAI,YAAY,MAAM,CACtD;OAEC,UAAA,IAAI;MACD,CAAA;MAEP,IAAI,gBACH,oBAAC,QAAD;OACE,aAAU;OACV,aAAU;OACV,cAAY,EAAE,WAAW,CAAC,GAAG,SAAS;OACtC,WAAU;MACX,CAAA;KAEG;IAhDD,GAAA,IAAI,GAgDH;GAEZ,CAAC;GACD,oBAAC,MAAD,EAAM,MAAK,iCAAkC,CAAA;EAC1C;;AAET;;AAGA,SAAgB,cAAc,EAC5B,QACA,WACA,YAKC;CACD,MAAM,MAAM,WAAW,QAAQ,aAAa,EAAE;CAE9C,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,IAAI,IAAI;EACR,mBAAiB,YAAY,IAAI,MAAM,KAAA;EAEtC;CACE,CAAA;AAET"}

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

@@ -0,0 +1,7 @@
+import { TableSchema } from "@alfakit/core";
+//#region src/components/table/pagination.d.ts
+export declare function TablePagination({ table }: {
+  table: TableSchema;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/table/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","names":[],"sources":["../../../src/components/table/pagination.tsx"],"mappings":";;wBAoBgB,kBAAkB;EAAW,OAAO;oBAAa,IAAA"}

package/dist/components/table/pagination.js

@@ -0,0 +1,255 @@
+import { useT } from "../../context.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { extremePageLinks, isAppendingPagination, nextPageQuery, prefetchTablePage, previousPageQuery, visitTable } from "@alfakit/core";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+//#region src/components/table/pagination.tsx
+function TablePagination({ table }) {
+	const t = useT();
+	const pagination = table.pagination;
+	if (!pagination) return null;
+	if (isAppendingPagination(pagination)) return /* @__PURE__ */ jsx(AppendingPagination, {
+		table,
+		pagination
+	});
+	const numbered = pagination.mode === void 0 || pagination.mode === "default";
+	const pages = numbered ? pageWindow(pagination.currentPage, pagination.lastPage) : [];
+	const previous = previousPageQuery(pagination);
+	const next = nextPageQuery(pagination);
+	const extremes = numbered ? extremePageLinks(table, pagination.currentPage, pagination.lastPage) : null;
+	const summary = numbered ? t("table.showing", {
+		first: pagination.from,
+		last: pagination.to,
+		total: pagination.total
+	}, `Showing ${pagination.from}–${pagination.to} of ${pagination.total}`) : t("table.showing_range", {
+		first: pagination.from,
+		last: pagination.to
+	}, `Showing ${pagination.from}–${pagination.to}`);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center gap-3 text-sm",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: summary }),
+				pagination.mode === "simple" && pagination.pendingTotal && /* @__PURE__ */ jsx("span", {
+					"data-slot": "pagination-total",
+					"aria-busy": "true",
+					"aria-label": t("loading", {}, "Loading"),
+					className: "bg-muted-foreground/20 inline-block h-4 w-12 animate-pulse rounded-md"
+				}),
+				/* @__PURE__ */ jsx(PerPageSelect, {
+					table,
+					pagination
+				})
+			]
+		}), (previous || next) && /* @__PURE__ */ jsxs("nav", {
+			className: "flex items-center gap-1",
+			"aria-label": t("pagination", {}, "Pagination"),
+			children: [
+				extremes && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon-sm",
+					"data-slot": "pagination-first",
+					disabled: extremes.first === null,
+					onClick: () => visitTable(table.identifier, { page: 1 }, ["page"]),
+					"aria-label": t("table.first_page", {}, "First page"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "alfakit::support.pagination.first-button",
+						fallback: ChevronsLeftIcon,
+						className: "rtl:rotate-180"
+					})
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon-sm",
+					disabled: !previous,
+					onClick: () => previous && visitTable(table.identifier, previous, ["page"]),
+					"aria-label": t("table.previous", {}, "Previous"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "alfakit::support.pagination.previous-button",
+						fallback: ChevronLeftIcon,
+						className: "rtl:rotate-180"
+					})
+				}),
+				numbered && !pagination.simple && pages.map((page, index) => page === null ? /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground px-1",
+					children: "…"
+				}, `gap-${index}`) : /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: page === pagination.currentPage ? "default" : "outline",
+					size: "icon-sm",
+					onClick: () => visitTable(table.identifier, { page }, ["page"]),
+					"aria-current": page === pagination.currentPage ? "page" : void 0,
+					children: page
+				}, page)),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon-sm",
+					disabled: !next,
+					onClick: () => next && visitTable(table.identifier, next, ["page"]),
+					onPointerEnter: () => next && prefetchTablePage(table.identifier, next),
+					onFocus: () => next && prefetchTablePage(table.identifier, next),
+					"aria-label": t("table.next", {}, "Next"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "alfakit::support.pagination.next-button",
+						fallback: ChevronRightIcon,
+						className: "rtl:rotate-180"
+					})
+				}),
+				extremes && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon-sm",
+					"data-slot": "pagination-last",
+					disabled: extremes.last === null,
+					onClick: () => extremes.last !== null && visitTable(table.identifier, { page: extremes.last }, ["page"]),
+					"aria-label": t("table.last_page", {}, "Last page"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "alfakit::support.pagination.last-button",
+						fallback: ChevronsRightIcon,
+						className: "rtl:rotate-180"
+					})
+				})
+			]
+		})]
+	});
+}
+function PerPageSelect({ table, pagination }) {
+	const t = useT();
+	if (pagination.pageOptions.length <= 1) return null;
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only sm:not-sr-only",
+			children: t("table.per_page", {}, "Per page")
+		}), /* @__PURE__ */ jsx("select", {
+			value: String(pagination.perPage),
+			onChange: (event) => visitTable(table.identifier, { perPage: event.target.value === "all" ? "all" : Number(event.target.value) }, ["page"]),
+			className: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
+			children: pagination.pageOptions.map((option) => /* @__PURE__ */ jsx("option", {
+				value: String(option),
+				children: option === "all" ? t("table.all", {}, "All") : option
+			}, option))
+		})]
+	});
+}
+/**
+* Load more / infinite scroll: the server returns every record up to the requested page,
+* so asking for the next page appends it (and reloads keep what was already shown). A
+* request that fails (network, server error) shows a retry control instead of staying on
+* "Loading more…"; infinite scroll waits for the retry rather than requesting again.
+*/
+function AppendingPagination({ table, pagination }) {
+	const t = useT();
+	const sentinel = useRef(null);
+	const [loading, setLoading] = useState(false);
+	const [failed, setFailed] = useState(false);
+	const [loadedTo, setLoadedTo] = useState(pagination.to);
+	const next = nextPageQuery(pagination);
+	if (loadedTo !== pagination.to) {
+		setLoadedTo(pagination.to);
+		setLoading(false);
+		setFailed(false);
+	}
+	const loadMore = () => {
+		if (!next || loading) return;
+		let succeeded = false;
+		let cancelled = false;
+		setLoading(true);
+		setFailed(false);
+		visitTable(table.identifier, next, ["page"], {
+			onSuccess: () => {
+				succeeded = true;
+			},
+			onCancel: () => {
+				cancelled = true;
+			},
+			onFinish: () => {
+				setLoading(false);
+				if (!succeeded && !cancelled) setFailed(true);
+			}
+		});
+	};
+	const loadMoreRef = useRef(loadMore);
+	useEffect(() => {
+		loadMoreRef.current = loadMore;
+	});
+	useEffect(() => {
+		if (pagination.mode !== "infinite" || !next || failed || typeof IntersectionObserver === "undefined") return;
+		const element = sentinel.current;
+		if (!element) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) loadMoreRef.current();
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [
+		pagination.mode,
+		next,
+		failed
+	]);
+	const retry = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 text-sm",
+		role: "alert",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-destructive",
+			children: t("table.load_more_failed", {}, "Couldn't load more records.")
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			onClick: loadMore,
+			children: t("retry", {}, "Retry")
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-3 sm:flex-row sm:justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center gap-3 text-sm",
+			children: [/* @__PURE__ */ jsx("span", { children: t("table.showing_range", {
+				first: pagination.from,
+				last: pagination.to
+			}, `Showing ${pagination.from}–${pagination.to}`) }), /* @__PURE__ */ jsx(PerPageSelect, {
+				table,
+				pagination
+			})]
+		}), next && (failed ? retry : pagination.mode === "infinite" ? /* @__PURE__ */ jsx("div", {
+			ref: sentinel,
+			className: "text-muted-foreground text-sm",
+			"aria-live": "polite",
+			children: loading ? t("table.loading_more", {}, "Loading more…") : null
+		}) : /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			disabled: loading,
+			onClick: loadMore,
+			children: loading ? t("table.loading_more", {}, "Loading more…") : t("load_more", {}, "Load more")
+		}))]
+	});
+}
+function pageWindow(current, last) {
+	if (last <= 7) return Array.from({ length: last }, (_, index) => index + 1);
+	const sorted = [.../* @__PURE__ */ new Set([
+		1,
+		last,
+		current - 1,
+		current,
+		current + 1
+	])].filter((page) => page >= 1 && page <= last).sort((a, b) => a - b);
+	const result = [];
+	sorted.forEach((page, index) => {
+		if (index > 0 && page - (sorted[index - 1] ?? 0) > 1) result.push(null);
+		result.push(page);
+	});
+	return result;
+}
+//#endregion
+export { TablePagination };
+
+//# sourceMappingURL=pagination.js.map

package/dist/components/table/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/table/pagination.tsx"],"sourcesContent":["import type { AnyPaginationSchema, TableSchema } from '@alfakit/core'\nimport {\n  extremePageLinks,\n  isAppendingPagination,\n  nextPageQuery,\n  prefetchTablePage,\n  previousPageQuery,\n  visitTable,\n} from '@alfakit/core'\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsLeftIcon,\n  ChevronsRightIcon,\n} from 'lucide-react'\nimport { useEffect, useRef, useState } from 'react'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { Button } from '../ui/button'\n\nexport function TablePagination({ table }: { table: TableSchema }) {\n  const t = useT()\n  const pagination = table.pagination\n\n  if (!pagination) {\n    return null\n  }\n\n  if (isAppendingPagination(pagination)) {\n    return <AppendingPagination table={table} pagination={pagination} />\n  }\n\n  const numbered = pagination.mode === undefined || pagination.mode === 'default'\n  const pages = numbered ? pageWindow(pagination.currentPage, pagination.lastPage) : []\n  const previous = previousPageQuery(pagination)\n  const next = nextPageQuery(pagination)\n  // `extremePaginationLinks()`: first / last page buttons around numbered pages.\n  const extremes = numbered\n    ? extremePageLinks(table, pagination.currentPage, pagination.lastPage)\n    : null\n  const summary = numbered\n    ? t(\n        'table.showing',\n        { first: pagination.from, last: pagination.to, total: pagination.total },\n        `Showing ${pagination.from}–${pagination.to} of ${pagination.total}`,\n      )\n    : t(\n        'table.showing_range',\n        { first: pagination.from, last: pagination.to },\n        `Showing ${pagination.from}–${pagination.to}`,\n      )\n\n  return (\n    <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n      <div className=\"text-muted-foreground flex items-center gap-3 text-sm\">\n        <span>{summary}</span>\n        {/* `deferTotals()`: the total and page numbers arrive after the rows. */}\n        {pagination.mode === 'simple' && pagination.pendingTotal && (\n          <span\n            data-slot=\"pagination-total\"\n            aria-busy=\"true\"\n            aria-label={t('loading', {}, 'Loading')}\n            className=\"bg-muted-foreground/20 inline-block h-4 w-12 animate-pulse rounded-md\"\n          />\n        )}\n        <PerPageSelect table={table} pagination={pagination} />\n      </div>\n      {(previous || next) && (\n        <nav className=\"flex items-center gap-1\" aria-label={t('pagination', {}, 'Pagination')}>\n          {extremes && (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"icon-sm\"\n              data-slot=\"pagination-first\"\n              disabled={extremes.first === null}\n              onClick={() => visitTable(table.identifier, { page: 1 }, ['page'])}\n              aria-label={t('table.first_page', {}, 'First page')}\n            >\n              <Icon\n                name=\"alfakit::support.pagination.first-button\"\n                fallback={ChevronsLeftIcon}\n                className=\"rtl:rotate-180\"\n              />\n            </Button>\n          )}\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon-sm\"\n            disabled={!previous}\n            onClick={() => previous && visitTable(table.identifier, previous, ['page'])}\n            aria-label={t('table.previous', {}, 'Previous')}\n          >\n            <Icon\n              name=\"alfakit::support.pagination.previous-button\"\n              fallback={ChevronLeftIcon}\n              className=\"rtl:rotate-180\"\n            />\n          </Button>\n          {numbered &&\n            !pagination.simple &&\n            pages.map((page, index) =>\n              page === null ? (\n                <span key={`gap-${index}`} className=\"text-muted-foreground px-1\">\n                  …\n                </span>\n              ) : (\n                <Button\n                  key={page}\n                  type=\"button\"\n                  variant={page === pagination.currentPage ? 'default' : 'outline'}\n                  size=\"icon-sm\"\n                  onClick={() => visitTable(table.identifier, { page }, ['page'])}\n                  aria-current={page === pagination.currentPage ? 'page' : undefined}\n                >\n                  {page}\n                </Button>\n              ),\n            )}\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon-sm\"\n            disabled={!next}\n            onClick={() => next && visitTable(table.identifier, next, ['page'])}\n            // The next page is fetched while hovering or focusing (cached for a few seconds).\n            onPointerEnter={() => next && prefetchTablePage(table.identifier, next)}\n            onFocus={() => next && prefetchTablePage(table.identifier, next)}\n            aria-label={t('table.next', {}, 'Next')}\n          >\n            <Icon\n              name=\"alfakit::support.pagination.next-button\"\n              fallback={ChevronRightIcon}\n              className=\"rtl:rotate-180\"\n            />\n          </Button>\n          {extremes && (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"icon-sm\"\n              data-slot=\"pagination-last\"\n              disabled={extremes.last === null}\n              onClick={() =>\n                extremes.last !== null &&\n                visitTable(table.identifier, { page: extremes.last }, ['page'])\n              }\n              aria-label={t('table.last_page', {}, 'Last page')}\n            >\n              <Icon\n                name=\"alfakit::support.pagination.last-button\"\n                fallback={ChevronsRightIcon}\n                className=\"rtl:rotate-180\"\n              />\n            </Button>\n          )}\n        </nav>\n      )}\n    </div>\n  )\n}\n\nfunction PerPageSelect({\n  table,\n  pagination,\n}: {\n  table: TableSchema\n  pagination: AnyPaginationSchema\n}) {\n  const t = useT()\n\n  if (pagination.pageOptions.length <= 1) return null\n\n  return (\n    <label className=\"flex items-center gap-2\">\n      <span className=\"sr-only sm:not-sr-only\">{t('table.per_page', {}, 'Per page')}</span>\n      <select\n        value={String(pagination.perPage)}\n        onChange={(event) =>\n          visitTable(\n            table.identifier,\n            { perPage: event.target.value === 'all' ? 'all' : Number(event.target.value) },\n            ['page'],\n          )\n        }\n        className=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n      >\n        {pagination.pageOptions.map((option) => (\n          <option key={option} value={String(option)}>\n            {option === 'all' ? t('table.all', {}, 'All') : option}\n          </option>\n        ))}\n      </select>\n    </label>\n  )\n}\n\n/**\n * Load more / infinite scroll: the server returns every record up to the requested page,\n * so asking for the next page appends it (and reloads keep what was already shown). A\n * request that fails (network, server error) shows a retry control instead of staying on\n * \"Loading more…\"; infinite scroll waits for the retry rather than requesting again.\n */\nfunction AppendingPagination({\n  table,\n  pagination,\n}: {\n  table: TableSchema\n  pagination: Extract<AnyPaginationSchema, { mode: 'load-more' | 'infinite' }>\n}) {\n  const t = useT()\n  const sentinel = useRef<HTMLDivElement>(null)\n  const [loading, setLoading] = useState(false)\n  const [failed, setFailed] = useState(false)\n  const [loadedTo, setLoadedTo] = useState(pagination.to)\n  const next = nextPageQuery(pagination)\n\n  // A response with more records ends the in-flight request.\n  if (loadedTo !== pagination.to) {\n    setLoadedTo(pagination.to)\n    setLoading(false)\n    setFailed(false)\n  }\n\n  const loadMore = () => {\n    if (!next || loading) return\n\n    let succeeded = false\n    let cancelled = false\n    setLoading(true)\n    setFailed(false)\n    visitTable(table.identifier, next, ['page'], {\n      onSuccess: () => {\n        succeeded = true\n      },\n      onCancel: () => {\n        cancelled = true\n      },\n      onFinish: () => {\n        setLoading(false)\n        if (!succeeded && !cancelled) setFailed(true)\n      },\n    })\n  }\n\n  const loadMoreRef = useRef(loadMore)\n\n  useEffect(() => {\n    loadMoreRef.current = loadMore\n  })\n\n  useEffect(() => {\n    if (\n      pagination.mode !== 'infinite' ||\n      !next ||\n      failed ||\n      typeof IntersectionObserver === 'undefined'\n    ) {\n      return\n    }\n\n    const element = sentinel.current\n\n    if (!element) return\n\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) loadMoreRef.current()\n    })\n\n    observer.observe(element)\n\n    return () => observer.disconnect()\n  }, [pagination.mode, next, failed])\n\n  const retry = (\n    <div className=\"flex items-center gap-2 text-sm\" role=\"alert\">\n      <span className=\"text-destructive\">\n        {t('table.load_more_failed', {}, \"Couldn't load more records.\")}\n      </span>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={loadMore}>\n        {t('retry', {}, 'Retry')}\n      </Button>\n    </div>\n  )\n\n  return (\n    <div className=\"flex flex-col items-center gap-3 sm:flex-row sm:justify-between\">\n      <div className=\"text-muted-foreground flex items-center gap-3 text-sm\">\n        <span>\n          {t(\n            'table.showing_range',\n            { first: pagination.from, last: pagination.to },\n            `Showing ${pagination.from}–${pagination.to}`,\n          )}\n        </span>\n        <PerPageSelect table={table} pagination={pagination} />\n      </div>\n      {next &&\n        (failed ? (\n          retry\n        ) : pagination.mode === 'infinite' ? (\n          <div ref={sentinel} className=\"text-muted-foreground text-sm\" aria-live=\"polite\">\n            {loading ? t('table.loading_more', {}, 'Loading more…') : null}\n          </div>\n        ) : (\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" disabled={loading} onClick={loadMore}>\n            {loading\n              ? t('table.loading_more', {}, 'Loading more…')\n              : t('load_more', {}, 'Load more')}\n          </Button>\n        ))}\n    </div>\n  )\n}\n\nfunction pageWindow(current: number, last: number): Array<number | null> {\n  if (last <= 7) {\n    return Array.from({ length: last }, (_, index) => index + 1)\n  }\n\n  const pages = new Set<number>([1, last, current - 1, current, current + 1])\n  const sorted = [...pages].filter((page) => page >= 1 && page <= last).sort((a, b) => a - b)\n  const result: Array<number | null> = []\n\n  sorted.forEach((page, index) => {\n    if (index > 0 && page - (sorted[index - 1] ?? 0) > 1) {\n      result.push(null)\n    }\n\n    result.push(page)\n  })\n\n  return result\n}\n"],"mappings":"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"}

package/dist/components/table/record-cell.d.ts

@@ -0,0 +1,25 @@
+import { ActionContext, ActionSchema, ColumnSchema, TableRecordSchema } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/table/record-cell.d.ts
+export interface RecordCellProps {
+  column: ColumnSchema;
+  record: TableRecordSchema;
+  token: string;
+  component: string;
+  context: ActionContext;
+  /** The record opens a URL or runs the record action on click. */
+  clickable: boolean;
+  /** This cell holds the clickable record's keyboard-focusable link or button. */
+  primary: boolean;
+  /** Whether the record action (`recordAction()`) replaces the record URL. */
+  hasRecordAction: boolean;
+  onRecordClick: (record: TableRecordSchema) => void;
+}
+/**
+ * A record's cell content wrapped in its link: the column `url()`, the column `action()`,
+ * or (for the primary cell of a clickable record) the record URL or record action. Shared
+ * by table rows and content layouts.
+ */
+export declare function RecordCell({ column, record, token, component, context, clickable, primary, hasRecordAction, onRecordClick }: RecordCellProps): ReactNode;
+//#endregion
+//# sourceMappingURL=record-cell.d.ts.map

package/dist/components/table/record-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-cell.d.ts","names":[],"sources":["../../../src/components/table/record-cell.tsx"],"mappings":";;;iBAMiB;EACf,QAAQ;EACR,QAAQ;EACR;EACA;EACA,SAAS;;EAET;;EAEA;;EAEA;EACA,gBAAgB,QAAQ;;;;;;;wBAsBV,aACd,QACA,QACA,OACA,WACA,SACA,WACA,SACA,iBACA,iBACC,kBAAkB"}

package/dist/components/table/record-cell.js

@@ -0,0 +1,86 @@
+import { useActionRunner, useT } from "../../context.js";
+import { TableCellContent } from "./cells.js";
+import { Link } from "@inertiajs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/record-cell.tsx
+/** Find a record action by name, looking inside action groups. */
+function findRecordAction(record, name) {
+	if (!name) return void 0;
+	const action = record.actions?.flatMap((item) => "actions" in item ? item.actions : [item]).find((item) => "name" in item && item.name === name);
+	return action && "name" in action ? action : void 0;
+}
+/**
+* A record's cell content wrapped in its link: the column `url()`, the column `action()`,
+* or (for the primary cell of a clickable record) the record URL or record action. Shared
+* by table rows and content layouts.
+*/
+function RecordCell({ column, record, token, component, context, clickable, primary, hasRecordAction, onRecordClick }) {
+	const t = useT();
+	const runner = useActionRunner();
+	const cell = record.cells[column.name] ?? {};
+	const content = /* @__PURE__ */ jsx(TableCellContent, {
+		column,
+		cell,
+		recordKey: record.key,
+		token,
+		component
+	});
+	const newTabHint = /* @__PURE__ */ jsxs("span", {
+		className: "sr-only",
+		children: [" ", t("opens_in_new_tab", {}, "(opens in a new tab)")]
+	});
+	if (cell.url) return cell.openUrlInNewTab ? /* @__PURE__ */ jsxs("a", {
+		href: cell.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "hover:underline",
+		onClick: (event) => event.stopPropagation(),
+		children: [content, newTabHint]
+	}) : /* @__PURE__ */ jsx(Link, {
+		href: cell.url,
+		className: "hover:underline",
+		onClick: (event) => event.stopPropagation(),
+		children: content
+	});
+	if (cell.action && record.actions) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "text-start hover:underline",
+		onClick: (event) => {
+			event.stopPropagation();
+			const action = findRecordAction(record, cell.action);
+			if (action) runner.trigger(action, {
+				...context,
+				record: record.key
+			});
+		},
+		children: content
+	});
+	if (!clickable || !primary) return content;
+	const focusRing = "focus-visible:ring-ring/50 rounded-sm outline-none focus-visible:ring-[3px]";
+	if (hasRecordAction || !record.url) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: `${focusRing} text-start`,
+		onClick: (event) => {
+			event.stopPropagation();
+			onRecordClick(record);
+		},
+		children: content
+	});
+	return record.openUrlInNewTab ? /* @__PURE__ */ jsxs("a", {
+		href: record.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: focusRing,
+		onClick: (event) => event.stopPropagation(),
+		children: [content, newTabHint]
+	}) : /* @__PURE__ */ jsx(Link, {
+		href: record.url,
+		className: focusRing,
+		onClick: (event) => event.stopPropagation(),
+		children: content
+	});
+}
+//#endregion
+export { RecordCell, findRecordAction };
+
+//# sourceMappingURL=record-cell.js.map

package/dist/components/table/record-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-cell.js","names":[],"sources":["../../../src/components/table/record-cell.tsx"],"sourcesContent":["import type { ActionContext, ActionSchema, ColumnSchema, TableRecordSchema } from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport type { ReactNode } from 'react'\nimport { useActionRunner, useT } from '../../context'\nimport { TableCellContent } from './cells'\n\nexport interface RecordCellProps {\n  column: ColumnSchema\n  record: TableRecordSchema\n  token: string\n  component: string\n  context: ActionContext\n  /** The record opens a URL or runs the record action on click. */\n  clickable: boolean\n  /** This cell holds the clickable record's keyboard-focusable link or button. */\n  primary: boolean\n  /** Whether the record action (`recordAction()`) replaces the record URL. */\n  hasRecordAction: boolean\n  onRecordClick: (record: TableRecordSchema) => void\n}\n\n/** Find a record action by name, looking inside action groups. */\nexport function findRecordAction(\n  record: TableRecordSchema,\n  name: string | undefined,\n): ActionSchema | undefined {\n  if (!name) return undefined\n\n  const action = record.actions\n    ?.flatMap((item) => ('actions' in item ? item.actions : [item]))\n    .find((item) => 'name' in item && item.name === name)\n\n  return action && 'name' in action ? (action as ActionSchema) : undefined\n}\n\n/**\n * A record's cell content wrapped in its link: the column `url()`, the column `action()`,\n * or (for the primary cell of a clickable record) the record URL or record action. Shared\n * by table rows and content layouts.\n */\nexport function RecordCell({\n  column,\n  record,\n  token,\n  component,\n  context,\n  clickable,\n  primary,\n  hasRecordAction,\n  onRecordClick,\n}: RecordCellProps): ReactNode {\n  const t = useT()\n  const runner = useActionRunner()\n  const cell = record.cells[column.name] ?? {}\n  const content = (\n    <TableCellContent\n      column={column}\n      cell={cell}\n      recordKey={record.key}\n      token={token}\n      component={component}\n    />\n  )\n  const newTabHint = (\n    <span className=\"sr-only\"> {t('opens_in_new_tab', {}, '(opens in a new tab)')}</span>\n  )\n\n  if (cell.url) {\n    return cell.openUrlInNewTab ? (\n      <a\n        href={cell.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"hover:underline\"\n        onClick={(event) => event.stopPropagation()}\n      >\n        {content}\n        {newTabHint}\n      </a>\n    ) : (\n      <Link\n        href={cell.url}\n        className=\"hover:underline\"\n        onClick={(event) => event.stopPropagation()}\n      >\n        {content}\n      </Link>\n    )\n  }\n\n  if (cell.action && record.actions) {\n    return (\n      <button\n        type=\"button\"\n        className=\"text-start hover:underline\"\n        onClick={(event) => {\n          event.stopPropagation()\n          const action = findRecordAction(record, cell.action)\n\n          if (action) void runner.trigger(action, { ...context, record: record.key })\n        }}\n      >\n        {content}\n      </button>\n    )\n  }\n\n  if (!clickable || !primary) {\n    return content\n  }\n\n  // Keyboard path for a clickable record: its primary cell is a real link or button (the\n  // row itself stays a mouse convenience, not a tab stop).\n  const focusRing = 'focus-visible:ring-ring/50 rounded-sm outline-none focus-visible:ring-[3px]'\n\n  if (hasRecordAction || !record.url) {\n    return (\n      <button\n        type=\"button\"\n        className={`${focusRing} text-start`}\n        onClick={(event) => {\n          event.stopPropagation()\n          onRecordClick(record)\n        }}\n      >\n        {content}\n      </button>\n    )\n  }\n\n  return record.openUrlInNewTab ? (\n    <a\n      href={record.url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={focusRing}\n      onClick={(event) => event.stopPropagation()}\n    >\n      {content}\n      {newTabHint}\n    </a>\n  ) : (\n    <Link href={record.url} className={focusRing} onClick={(event) => event.stopPropagation()}>\n      {content}\n    </Link>\n  )\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,iBACd,QACA,MAC0B;CAC1B,IAAI,CAAC,MAAM,OAAO,KAAA;CAElB,MAAM,SAAS,OAAO,SAClB,SAAS,SAAU,aAAa,OAAO,KAAK,UAAU,CAAC,IAAI,CAAE,CAAC,CAC/D,MAAM,SAAS,UAAU,QAAQ,KAAK,SAAS,IAAI;CAEtD,OAAO,UAAU,UAAU,SAAU,SAA0B,KAAA;AACjE;;;;;;AAOA,SAAgB,WAAW,EACzB,QACA,QACA,OACA,WACA,SACA,WACA,SACA,iBACA,iBAC6B;CAC7B,MAAM,IAAI,KAAK;CACf,MAAM,SAAS,gBAAgB;CAC/B,MAAM,OAAO,OAAO,MAAM,OAAO,SAAS,CAAC;CAC3C,MAAM,UACJ,oBAAC,kBAAD;EACU;EACF;EACN,WAAW,OAAO;EACX;EACI;CACZ,CAAA;CAEH,MAAM,aACJ,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CAA0B,KAAE,EAAE,oBAAoB,CAAC,GAAG,sBAAsB,CAAQ;;CAGtF,IAAI,KAAK,KACP,OAAO,KAAK,kBACV,qBAAC,KAAD;EACE,MAAM,KAAK;EACX,QAAO;EACP,KAAI;EACJ,WAAU;EACV,UAAU,UAAU,MAAM,gBAAgB;EAL5C,UAAA,CAOG,SACA,UACA;CAEH,CAAA,IAAA,oBAAC,MAAD;EACE,MAAM,KAAK;EACX,WAAU;EACV,UAAU,UAAU,MAAM,gBAAgB;EAEzC,UAAA;CACG,CAAA;CAIV,IAAI,KAAK,UAAU,OAAO,SACxB,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,UAAU,UAAU;GAClB,MAAM,gBAAgB;GACtB,MAAM,SAAS,iBAAiB,QAAQ,KAAK,MAAM;GAEnD,IAAI,QAAQ,OAAY,QAAQ,QAAQ;IAAE,GAAG;IAAS,QAAQ,OAAO;GAAI,CAAC;EAC5E;EAEC,UAAA;CACK,CAAA;CAIZ,IAAI,CAAC,aAAa,CAAC,SACjB,OAAO;CAKT,MAAM,YAAY;CAElB,IAAI,mBAAmB,CAAC,OAAO,KAC7B,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW,GAAG,UAAU;EACxB,UAAU,UAAU;GAClB,MAAM,gBAAgB;GACtB,cAAc,MAAM;EACtB;EAEC,UAAA;CACK,CAAA;CAIZ,OAAO,OAAO,kBACZ,qBAAC,KAAD;EACE,MAAM,OAAO;EACb,QAAO;EACP,KAAI;EACJ,WAAW;EACX,UAAU,UAAU,MAAM,gBAAgB;EAL5C,UAAA,CAOG,SACA,UACA;CAEH,CAAA,IAAA,oBAAC,MAAD;EAAM,MAAM,OAAO;EAAK,WAAW;EAAW,UAAU,UAAU,MAAM,gBAAgB;EACrF,UAAA;CACG,CAAA;AAEV"}

package/dist/components/table/spreadsheet-lazy.d.ts

@@ -0,0 +1,7 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { SpreadsheetProps } from "./spreadsheet.js";
+//#region src/components/table/spreadsheet-lazy.d.ts
+/** Spreadsheet mode; its code loads the first time a user opens it. */
+export declare const Spreadsheet: LazyComponent<SpreadsheetProps>;
+//#endregion
+//# sourceMappingURL=spreadsheet-lazy.d.ts.map

package/dist/components/table/spreadsheet-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spreadsheet-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/table/spreadsheet-lazy.tsx"],"mappings":";;;;qBAKa,aAAWA,cAAA"}

package/dist/components/table/spreadsheet-lazy.js

@@ -0,0 +1,15 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/spreadsheet-lazy.tsx
+/** Spreadsheet mode; its code loads the first time a user opens it. */
+const Spreadsheet = lazyComponent(() => import("./spreadsheet.js").then((module) => module.Spreadsheet), () => /* @__PURE__ */ jsxs("div", {
+	"data-slot": "spreadsheet",
+	"aria-busy": "true",
+	className: "flex flex-col gap-3",
+	children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-64" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-64" })]
+}));
+//#endregion
+export { Spreadsheet };
+
+//# sourceMappingURL=spreadsheet-lazy.js.map

package/dist/components/table/spreadsheet-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spreadsheet-lazy.js","names":[],"sources":["../../../src/components/table/spreadsheet-lazy.tsx"],"sourcesContent":["import { lazyComponent } from '../../lib/lazy'\nimport { Skeleton } from '../ui/skeleton'\nimport type { SpreadsheetProps } from './spreadsheet'\n\n/** Spreadsheet mode; its code loads the first time a user opens it. */\nexport const Spreadsheet = lazyComponent<SpreadsheetProps>(\n  () => import('./spreadsheet').then((module) => module.Spreadsheet),\n  () => (\n    <div data-slot=\"spreadsheet\" aria-busy=\"true\" className=\"flex flex-col gap-3\">\n      <Skeleton className=\"h-8 w-64\" />\n      <Skeleton className=\"h-64\" />\n    </div>\n  ),\n)\n"],"mappings":";;;;;AAKA,MAAa,cAAc,oBACnB,OAAO,mBAAgB,CAAC,MAAM,WAAW,OAAO,WAAW,SAE/D,qBAAC,OAAD;CAAK,aAAU;CAAc,aAAU;CAAO,WAAU;CAAxD,UAAA,CACE,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA,GAChC,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA,CACzB;AAET,CAAA,CAAA"}

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

@@ -0,0 +1,11 @@
+import { TableSchema } from "@alfakit/core";
+//#region src/components/table/spreadsheet.d.ts
+export interface SpreadsheetProps {
+  table: TableSchema;
+  token: string;
+  component: string;
+  /** Leave spreadsheet mode. */
+  onClose: () => void;
+}
+//#endregion
+//# sourceMappingURL=spreadsheet.d.ts.map

package/dist/components/table/spreadsheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spreadsheet.d.ts","names":[],"sources":["../../../src/components/table/spreadsheet.tsx"],"mappings":";;iBAgDiB;EACf,OAAO;EACP;EACA;;EAEA"}