uibee 3.3.0 → 3.3.2

package/dist/components/table/format.js

@@ -0,0 +1,39 @@
+//#region src/components/table/format.ts
+const nullableTimeKeys = /* @__PURE__ */ new Set([
+	"date",
+	"last_sent",
+	"sent_at",
+	"time"
+]);
+const RX_DATETIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
+const RX_DATE = /^\d{4}-\d{2}-\d{2}$/;
+const RX_TIME = /^\d{2}:\d{2}(:\d{2})?$/;
+function formatValue(key, value) {
+	if (value === null || value === void 0) return nullableTimeKeys.has(key) ? "Never" : "-";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (typeof value === "number") {
+		if (key.includes("capacity") && value === 0) return "Unlimited";
+		return value;
+	}
+	if (typeof value === "string") {
+		if (RX_DATETIME.test(value)) return new Date(value).toLocaleString("nb-NO", {
+			timeZone: "Europe/Oslo",
+			year: "numeric",
+			month: "2-digit",
+			day: "2-digit",
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		if (RX_DATE.test(value)) return new Date(value).toLocaleDateString("nb-NO", { timeZone: "Europe/Oslo" });
+		if (RX_TIME.test(value)) return (/* @__PURE__ */ new Date(`1970-01-01T${value}`)).toLocaleTimeString("nb-NO", {
+			timeZone: "Europe/Oslo",
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		return value;
+	}
+	if (Array.isArray(value)) return value.join(", ");
+	return String(value);
+}
+//#endregion
+export { formatValue };

package/dist/components/table/header.js

@@ -0,0 +1,109 @@
+"use client";
+import { DENSITY_TH, VARIANT_HEAD_BG, VARIANT_HEAD_BORDER, VARIANT_THEAD, VARIANT_THEAD_TH } from "./constants.js";
+import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/header.tsx
+function formatLabel(key, label) {
+	if (label) return label;
+	if (key.length <= 2) return key.toUpperCase();
+	return key.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll("_", " ").replaceAll("-", " ").split(/\s+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function Header({ columns, sort, onSort, hasMenu, hasSelect, hasExpand, allSelected, someSelected, onSelectAll, variant, density }) {
+	function handleSort(key) {
+		onSort({
+			column: key,
+			order: sort?.column === key && sort?.order === "asc" ? "desc" : "asc"
+		});
+	}
+	return /* @__PURE__ */ jsx("thead", {
+		className: VARIANT_THEAD[variant],
+		children: /* @__PURE__ */ jsxs("tr", { children: [
+			hasSelect && /* @__PURE__ */ jsx("th", {
+				className: `sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`,
+				style: {
+					width: "3rem",
+					minWidth: "3rem"
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center",
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-label": allSelected ? "Deselect all" : "Select all",
+						onClick: onSelectAll,
+						className: `
+                                h-4 w-4 rounded border flex items-center justify-center transition-colors cursor-pointer
+                                ${allSelected || someSelected ? "bg-login border-login text-white" : "border-login-400 bg-transparent hover:border-login-200"}
+                            `,
+						children: [someSelected && !allSelected && /* @__PURE__ */ jsx("span", { className: "block h-0.5 w-2 bg-white rounded-full" }), allSelected && /* @__PURE__ */ jsx("svg", {
+							className: "h-3 w-3",
+							viewBox: "0 0 12 12",
+							fill: "none",
+							children: /* @__PURE__ */ jsx("path", {
+								d: "M2 6l3 3 5-5",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})]
+					})
+				})
+			}),
+			columns.map((col) => {
+				const sortable = col.sortable !== false;
+				const isActive = sort?.column === col.key;
+				const ariaSort = isActive ? sort.order === "asc" ? "ascending" : "descending" : "none";
+				const alignClass = col.align === "right" ? "justify-end" : col.align === "center" ? "justify-center" : "";
+				return /* @__PURE__ */ jsx("th", {
+					"aria-sort": sortable ? ariaSort : void 0,
+					style: col.width ? { width: col.width } : void 0,
+					className: `
+                                sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}
+                                text-xs font-medium uppercase tracking-wider
+                                ${DENSITY_TH[density]} ${VARIANT_THEAD_TH[variant]}
+                            `,
+					children: sortable ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: `group inline-flex items-center gap-1.5 w-full cursor-pointer ${alignClass}`,
+						onClick: () => handleSort(col.key),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "whitespace-nowrap",
+							children: formatLabel(col.key, col.label)
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-current",
+							children: isActive ? sort.order === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 opacity-0 group-hover:opacity-35 transition-opacity" })
+						})]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: `flex w-full whitespace-nowrap ${alignClass}`,
+						children: formatLabel(col.key, col.label)
+					})
+				}, col.key);
+			}),
+			hasExpand && /* @__PURE__ */ jsx("th", {
+				className: `sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`,
+				style: {
+					width: "2.5rem",
+					minWidth: "2.5rem"
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					className: `
+                            flex items-center justify-center
+                            text-xs font-medium tracking-wider uppercase opacity-50
+                            ${VARIANT_THEAD_TH[variant]}
+                        `,
+					children: "+"
+				})
+			}),
+			hasMenu && /* @__PURE__ */ jsx("th", {
+				"aria-hidden": "true",
+				className: `sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`,
+				style: {
+					width: "3.5rem",
+					minWidth: "3.5rem"
+				}
+			})
+		] })
+	});
+}
+//#endregion
+export { Header as default };

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

@@ -0,0 +1,18 @@
+import React from "react";
+
+//#region src/components/table/menu.d.ts
+declare function MenuButton({
+  icon,
+  text,
+  hotKey,
+  onClick,
+  className
+}: {
+  icon: React.ReactNode;
+  text: string;
+  hotKey?: string;
+  onClick: () => void;
+  className?: string;
+}): React.JSX.Element;
+//#endregion
+export { MenuButton };

package/dist/components/table/menu.js

@@ -0,0 +1,76 @@
+"use client";
+import { createContext, useContext, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/table/menu.tsx
+const MenuCtx = createContext({});
+function Menu({ ref, children, anchor, onClose }) {
+	useEffect(() => {
+		function handleKey(e) {
+			if (e.key === "Escape") onClose?.();
+		}
+		window.addEventListener("keydown", handleKey);
+		return () => window.removeEventListener("keydown", handleKey);
+	}, [onClose]);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref,
+		role: "menu",
+		"aria-orientation": "vertical",
+		style: {
+			top: anchor.top,
+			right: anchor.right
+		},
+		className: "fixed z-[9999] w-44 overflow-hidden rounded-lg border border-login-500/60 bg-login-600 shadow-xl shadow-black/40",
+		children: /* @__PURE__ */ jsx(MenuCtx.Provider, {
+			value: { onClose },
+			children
+		})
+	}), document.body);
+}
+function MenuButton({ icon, text, hotKey, onClick, className = "" }) {
+	const { onClose } = useContext(MenuCtx);
+	useEffect(() => {
+		if (!hotKey) return;
+		function handleKey(e) {
+			const tag = e.target.tagName;
+			if (tag === "INPUT" || tag === "TEXTAREA") return;
+			if (e.key.toLowerCase() === hotKey.toLowerCase()) {
+				e.preventDefault();
+				onClick();
+				onClose?.();
+			}
+		}
+		window.addEventListener("keydown", handleKey);
+		return () => window.removeEventListener("keydown", handleKey);
+	}, [
+		hotKey,
+		onClick,
+		onClose
+	]);
+	return /* @__PURE__ */ jsxs("button", {
+		role: "menuitem",
+		onClick: () => {
+			onClick();
+			onClose?.();
+		},
+		className: `
+                flex w-full items-center justify-between px-3 py-2 text-sm
+                text-login-75 transition-colors duration-100
+                hover:bg-login-500 focus:bg-login-500 focus:outline-none
+                first:rounded-t-lg last:rounded-b-lg
+                ${className}
+            `,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "h-4 w-4 shrink-0 flex items-center justify-center",
+				children: icon
+			}), text]
+		}), hotKey && /* @__PURE__ */ jsx("kbd", {
+			className: "font-mono text-xs opacity-40",
+			children: hotKey
+		})]
+	});
+}
+//#endregion
+export { MenuButton, Menu as default };

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

@@ -0,0 +1,14 @@
+import { TableVariant } from "./types.js";
+
+//#region src/components/table/pagination.d.ts
+type PaginationProps = {
+  totalRows: number;
+  pageSize: number;
+  variant?: TableVariant;
+  urlState?: boolean;
+  page?: number;
+  onPageChange?: (page: number) => void;
+};
+declare function Pagination(props: PaginationProps): import("react").JSX.Element;
+//#endregion
+export { PaginationProps, Pagination as default };

package/dist/components/table/pagination.js

@@ -0,0 +1,130 @@
+"use client";
+import { Suspense, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter, useSearchParams } from "next/navigation.js";
+//#region src/components/table/pagination.tsx
+function computeTotalPages(totalRows, pageSize) {
+	return Math.max(1, pageSize > 0 ? Math.ceil(totalRows / pageSize) : 1);
+}
+function pageRange(current, total) {
+	const delta = 2;
+	const left = Math.max(1, current - delta);
+	const right = Math.min(total, current + delta);
+	const pages = [];
+	if (left > 1) {
+		pages.push(1);
+		if (left > 2) pages.push("…");
+	}
+	for (let i = left; i <= right; i++) pages.push(i);
+	if (right < total) {
+		if (right < total - 1) pages.push("…");
+		pages.push(total);
+	}
+	return pages;
+}
+function PaginationShell({ page, totalPages, totalRows, pageSize, onPageChange, variant }) {
+	const start = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
+	const end = Math.min(page * pageSize, totalRows);
+	const pages = pageRange(page, totalPages);
+	const btnBase = `
+        flex items-center justify-center rounded-md border text-sm transition-colors duration-100
+        disabled:opacity-35 disabled:cursor-not-allowed
+    `;
+	const btnStyle = variant === "original" ? "border-login-500/50 bg-login-700 hover:bg-login-600 text-login-100" : "border-login-500/40 bg-transparent hover:bg-login-700/60 text-login-100";
+	const pageActive = variant === "original" ? "border-login bg-login/10 text-login" : "border-login text-login bg-transparent";
+	const pageInactive = variant === "original" ? "border-login-500/50 bg-login-700 text-login-100 hover:bg-login-600" : "border-transparent bg-transparent text-login-200 hover:text-login-75 hover:bg-login-700/60";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between w-full gap-4 flex-wrap",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-xs text-login-300 tabular-nums",
+			children: totalRows === 0 ? "No results" : `${start}-${end} of ${totalRows}`
+		}), /* @__PURE__ */ jsxs("nav", {
+			className: "flex items-center gap-1.5",
+			"aria-label": "Pagination",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Previous page",
+					disabled: page <= 1,
+					onClick: () => onPageChange(page - 1),
+					className: `${btnBase} ${btnStyle} h-8 w-8`,
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+				}),
+				pages.map((p, i) => p === "…" ? /* @__PURE__ */ jsx("span", {
+					className: "w-8 text-center text-sm text-login-400 select-none",
+					children: "…"
+				}, `ellipsis-${i}`) : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-current": p === page ? "page" : void 0,
+					onClick: () => onPageChange(p),
+					className: `${btnBase} h-8 min-w-8 px-2 tabular-nums ${p === page ? pageActive : pageInactive}`,
+					children: p
+				}, p)),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Next page",
+					disabled: page >= totalPages,
+					onClick: () => onPageChange(page + 1),
+					className: `${btnBase} ${btnStyle} h-8 w-8`,
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+				})
+			]
+		})]
+	});
+}
+function PaginationLocalState({ totalRows, pageSize, variant = "original" }) {
+	const [page, setPage] = useState(1);
+	return /* @__PURE__ */ jsx(PaginationShell, {
+		page,
+		totalPages: computeTotalPages(totalRows, pageSize),
+		totalRows,
+		pageSize,
+		onPageChange: setPage,
+		variant
+	});
+}
+function PaginationURLState({ totalRows, pageSize, variant = "original" }) {
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const page = Math.max(1, parseInt(searchParams.get("page") ?? "1", 10) || 1);
+	function onPageChange(p) {
+		const params = new URLSearchParams(searchParams.toString());
+		params.set("page", String(p));
+		router.replace(`${pathname}?${params.toString()}`);
+	}
+	return /* @__PURE__ */ jsx(PaginationShell, {
+		page,
+		totalPages: computeTotalPages(totalRows, pageSize),
+		totalRows,
+		pageSize,
+		onPageChange,
+		variant
+	});
+}
+function Pagination(props) {
+	const { totalRows, pageSize, variant = "original", urlState, page, onPageChange } = props;
+	if (urlState) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(PaginationShell, {
+			page: 1,
+			totalPages: computeTotalPages(totalRows, pageSize),
+			totalRows,
+			pageSize,
+			onPageChange: () => {},
+			variant
+		}),
+		children: /* @__PURE__ */ jsx(PaginationURLState, { ...props })
+	});
+	if (page !== void 0 && onPageChange !== void 0) return /* @__PURE__ */ jsx(PaginationShell, {
+		page,
+		totalPages: computeTotalPages(totalRows, pageSize),
+		totalRows,
+		pageSize,
+		onPageChange,
+		variant
+	});
+	return /* @__PURE__ */ jsx(PaginationLocalState, { ...props });
+}
+//#endregion
+export { Pagination as default };

package/dist/components/table/skeleton.js

@@ -0,0 +1,39 @@
+import { DENSITY_TD, VARIANT_ROW_BORDER, VARIANT_TBODY } from "./constants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/skeleton.tsx
+function Skeleton({ columns, rows, variant, density, hasMenu, hasSelect }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		className: VARIANT_TBODY[variant],
+		children: Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsxs("tr", { children: [
+			hasSelect && /* @__PURE__ */ jsx("td", {
+				className: `align-middle ${VARIANT_ROW_BORDER[variant]}`,
+				style: {
+					width: "3rem",
+					minWidth: "3rem"
+				},
+				children: /* @__PURE__ */ jsx("span", { className: "block h-4 w-4 mx-auto rounded animate-shimmer" })
+			}),
+			columns.map((col, colIdx) => /* @__PURE__ */ jsx("td", {
+				style: col.width ? { width: col.width } : void 0,
+				className: `align-middle ${DENSITY_TD[density]} ${VARIANT_ROW_BORDER[variant]}`,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "block h-4 rounded animate-shimmer",
+					style: {
+						width: colIdx === 0 ? `${8 + (rowIdx * 17 + colIdx * 31) % 5}rem` : `${5 + (rowIdx * 13 + colIdx * 23) % 5}rem`,
+						animationDelay: `${(rowIdx * columns.length + colIdx) * 40}ms`
+					}
+				})
+			}, col.key)),
+			hasMenu && /* @__PURE__ */ jsx("td", {
+				className: `align-middle pr-3 ${VARIANT_ROW_BORDER[variant]}`,
+				style: {
+					width: "3.5rem",
+					minWidth: "3.5rem"
+				},
+				children: /* @__PURE__ */ jsx("span", { className: "block h-5 w-5 ml-auto rounded animate-shimmer" })
+			})
+		] }, rowIdx))
+	});
+}
+//#endregion
+export { Skeleton as default };

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

@@ -0,0 +1,7 @@
+import { Column, Density, SortState, TableColor, TableProps, TableVariant } from "./types.js";
+import { MenuButton } from "./menu.js";
+
+//#region src/components/table/table.d.ts
+declare function Table<T extends Record<string, unknown> = Record<string, unknown>>(props: TableProps<T>): import("react").JSX.Element;
+//#endregion
+export { MenuButton, Table };

package/dist/components/table/table.js

@@ -0,0 +1,213 @@
+"use client";
+import { VARIANT_CONTAINER } from "./constants.js";
+import Header from "./header.js";
+import { resolveId } from "./utils.js";
+import { MenuButton } from "./menu.js";
+import Body from "./body.js";
+import Skeleton from "./skeleton.js";
+import Empty from "./empty.js";
+import Pagination from "./pagination.js";
+import { Suspense, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter, useSearchParams } from "next/navigation.js";
+//#region src/components/table/table.tsx
+function TableShell({ data, columns, idKey, variant, density, striped, loading, loadingRows, emptyState, redirectPath, onRowClick, renderExpandedRow, selectable, selectedIds, onSelectionChange, sort, onSort, page, onPageChange, totalRows, pageSize, hidePagination, menuItems, className }) {
+	const allIds = data.map((row) => resolveId(row, idKey, columns));
+	const allIdsSet = useMemo(() => new Set(allIds), [allIds]);
+	const allSelected = allIds.length > 0 && allIds.every((id) => selectedIds.includes(id));
+	const someSelected = !allSelected && allIds.some((id) => selectedIds.includes(id));
+	function handleSelectAll() {
+		if (allSelected) onSelectionChange(selectedIds.filter((id) => !allIdsSet.has(id)));
+		else onSelectionChange([.../* @__PURE__ */ new Set([...selectedIds, ...allIds])]);
+	}
+	const isEmpty = !loading && data.length === 0;
+	const showPagination = !hidePagination && pageSize > 0 && totalRows > 0;
+	const hasMenu = Boolean(menuItems);
+	const hasSelect = Boolean(selectable);
+	const hasExpand = Boolean(renderExpandedRow);
+	const paginationPad = variant === "original" ? "px-4 pb-4 pt-3" : "pt-4";
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"flex flex-col min-h-0 w-full",
+			VARIANT_CONTAINER[variant],
+			className
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex-1 min-h-0 overflow-auto",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "min-w-full table-auto border-separate border-spacing-0",
+				children: [/* @__PURE__ */ jsx(Header, {
+					columns,
+					sort,
+					onSort,
+					hasMenu,
+					hasSelect,
+					hasExpand,
+					allSelected,
+					someSelected,
+					onSelectAll: handleSelectAll,
+					variant,
+					density
+				}), loading ? /* @__PURE__ */ jsx(Skeleton, {
+					columns,
+					rows: loadingRows,
+					variant,
+					density,
+					hasMenu,
+					hasSelect
+				}) : isEmpty ? /* @__PURE__ */ jsx(Empty, { emptyState }) : /* @__PURE__ */ jsx(Body, {
+					data,
+					columns,
+					idKey,
+					variant,
+					density,
+					striped,
+					redirectPath,
+					onRowClick,
+					renderExpandedRow,
+					selectable,
+					selectedIds,
+					onSelectionChange,
+					menuItems
+				})]
+			})
+		}), showPagination && /* @__PURE__ */ jsx("div", {
+			className: paginationPad,
+			children: /* @__PURE__ */ jsx(Pagination, {
+				page,
+				totalRows,
+				pageSize,
+				onPageChange,
+				variant
+			})
+		})]
+	});
+}
+function useInternalSelection(props) {
+	const [internal, setInternal] = useState([]);
+	return {
+		selectedIds: props.selectedIds ?? internal,
+		onSelectionChange: props.onSelectionChange ?? setInternal
+	};
+}
+function applyDefaults(props) {
+	return {
+		variant: props.variant ?? "original",
+		density: props.density ?? "comfortable",
+		selectable: props.selectable ?? false,
+		loading: props.loading ?? false,
+		loadingRows: props.loadingRows ?? props.pageSize ?? 5,
+		striped: props.striped ?? false,
+		hidePagination: props.hidePagination ?? false,
+		pageSize: props.pageSize ?? 0
+	};
+}
+function TableLocalState(props) {
+	const defaults = applyDefaults(props);
+	const selection = useInternalSelection(props);
+	const [sort, setSort] = useState(void 0);
+	const [page, setPage] = useState(1);
+	const ps = defaults.pageSize;
+	const allRows = props.data.length;
+	const sorted = useMemo(() => {
+		if (!sort) return props.data;
+		return [...props.data].sort((a, b) => {
+			const av = a[sort.column];
+			const bv = b[sort.column];
+			const cmp = String(av ?? "").localeCompare(String(bv ?? ""), void 0, {
+				numeric: true,
+				sensitivity: "base"
+			});
+			return sort.order === "asc" ? cmp : -cmp;
+		});
+	}, [props.data, sort]);
+	const displayData = ps > 0 ? sorted.slice((page - 1) * ps, page * ps) : sorted;
+	function handleSort(newSort) {
+		setSort(newSort);
+		setPage(1);
+	}
+	return /* @__PURE__ */ jsx(TableShell, {
+		...props,
+		...defaults,
+		...selection,
+		data: displayData,
+		sort,
+		onSort: handleSort,
+		page,
+		onPageChange: setPage,
+		totalRows: ps > 0 ? allRows : props.totalRows ?? allRows
+	});
+}
+function TableURLState(props) {
+	const defaults = applyDefaults(props);
+	const selection = useInternalSelection(props);
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const urlColumn = searchParams.get("column") ?? "";
+	const urlOrder = searchParams.get("order") ?? "asc";
+	const urlPage = Math.max(1, parseInt(searchParams.get("page") ?? "1", 10) || 1);
+	const sort = urlColumn ? {
+		column: urlColumn,
+		order: urlOrder
+	} : void 0;
+	function handleSort(newSort) {
+		const p = new URLSearchParams(searchParams.toString());
+		p.set("column", newSort.column);
+		p.set("order", newSort.order);
+		p.set("page", "1");
+		router.replace(`${pathname}?${p.toString()}`);
+	}
+	function handlePageChange(newPage) {
+		const p = new URLSearchParams(searchParams.toString());
+		p.set("page", String(newPage));
+		router.replace(`${pathname}?${p.toString()}`);
+	}
+	return /* @__PURE__ */ jsx(TableShell, {
+		...props,
+		...defaults,
+		...selection,
+		sort,
+		onSort: handleSort,
+		page: urlPage,
+		onPageChange: handlePageChange,
+		totalRows: props.totalRows ?? props.data.length
+	});
+}
+function TableControlled(props) {
+	const defaults = applyDefaults(props);
+	const selection = useInternalSelection(props);
+	return /* @__PURE__ */ jsx(TableShell, {
+		...props,
+		...defaults,
+		...selection,
+		sort: props.sort,
+		onSort: props.onSort,
+		page: props.page ?? 1,
+		onPageChange: props.onPageChange ?? (() => {}),
+		totalRows: props.totalRows ?? props.data.length
+	});
+}
+function Table(props) {
+	if (props.sort !== void 0 || props.onSort !== void 0) return /* @__PURE__ */ jsx(TableControlled, { ...props });
+	if (props.urlState) {
+		const defaults = applyDefaults(props);
+		return /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(TableShell, {
+				...props,
+				...defaults,
+				selectedIds: props.selectedIds ?? [],
+				onSelectionChange: props.onSelectionChange ?? (() => {}),
+				sort: void 0,
+				onSort: () => {},
+				page: 1,
+				onPageChange: () => {},
+				totalRows: props.totalRows ?? props.data.length
+			}),
+			children: /* @__PURE__ */ jsx(TableURLState, { ...props })
+		});
+	}
+	return /* @__PURE__ */ jsx(TableLocalState, { ...props });
+}
+//#endregion
+export { MenuButton, Table };