@kodffe/ui 0.0.0-stage → 0.10.1

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

@@ -0,0 +1,558 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Button as t } from "../button/button.js";
+import { Skeleton as n } from "../skeleton/skeleton.js";
+import { EmptyState as r } from "../empty-state/empty-state.js";
+import { ErrorState as i } from "../error-state/error-state.js";
+import { Glyph as a } from "../lib/glyphs.js";
+import { Pagination as o } from "../pagination/pagination.js";
+import { DropdownMenu as ee, DropdownMenuCheckboxItem as te, DropdownMenuContent as ne, DropdownMenuLabel as re, DropdownMenuRadioGroup as ie, DropdownMenuRadioItem as ae, DropdownMenuSeparator as oe, DropdownMenuTrigger as se } from "../menu/dropdown-menu.js";
+import { Input as ce } from "../input/input.js";
+import { NativeSelect as le } from "../select/select.js";
+import { checkboxBox as s, focusRing as c } from "../lib/control-styles.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Fragment as ue, useEffect as de, useId as fe, useMemo as d, useRef as pe, useState as me } from "react";
+import * as f from "@radix-ui/react-checkbox";
+import { columnFilteringFeature as p, columnVisibilityFeature as he, createColumnHelper as ge, createFilteredRowModel as m, createPaginatedRowModel as h, createSortedRowModel as g, filterFn_includesString as _e, globalFilteringFeature as _, rowPaginationFeature as v, rowSelectionFeature as y, rowSortingFeature as b, sortFn_alphanumeric as ve, sortFn_basic as ye, sortFn_datetime as be, tableFeatures as x, useTable as xe } from "@tanstack/react-table";
+import { useVirtualizer as Se } from "@tanstack/react-virtual";
+//#region src/data-table/data-table.tsx
+var Ce = x({
+	columnFilteringFeature: p,
+	globalFilteringFeature: _,
+	filteredRowModel: m(),
+	filterFns: { includesString: _e },
+	rowSortingFeature: b,
+	sortedRowModel: g(),
+	sortFns: {
+		alphanumeric: ve,
+		basic: ye,
+		datetime: be
+	},
+	rowPaginationFeature: v,
+	paginatedRowModel: h(),
+	rowSelectionFeature: y,
+	columnVisibilityFeature: he
+}), we = {
+	search: "Search",
+	view: "View",
+	columns: "Columns",
+	density: "Density",
+	comfortable: "Comfortable",
+	compact: "Compact",
+	export: "Export CSV",
+	selectAll: "Select all rows on this page",
+	selectRow: "Select row",
+	selected: "{count} selected",
+	clear: "Clear selection",
+	rowsPerPage: "Rows per page",
+	range: "{from}–{to} of {total}",
+	actions: "Actions",
+	emptyTitle: "Nothing here yet",
+	noResultsTitle: "No results",
+	noResultsDescription: "Nothing matches “{query}”. Try another word.",
+	sortAscending: "Sort ascending",
+	sortDescending: "Sort descending",
+	results: "{count} results",
+	expand: "Show details for {row}",
+	collapse: "Hide details for {row}",
+	details: "Details"
+}, Te = {
+	start: "text-left",
+	end: "text-right",
+	center: "text-center"
+};
+function S({ checked: t, onChange: n, label: r }) {
+	return /* @__PURE__ */ l(f.Root, {
+		checked: t,
+		onClick: (e) => {
+			e.stopPropagation(), n(e);
+		},
+		"aria-label": r,
+		className: e(s({ size: "sm" }), c),
+		children: /* @__PURE__ */ l(f.Indicator, { children: /* @__PURE__ */ l(a, {
+			name: t === "indeterminate" ? "minus" : "check",
+			size: 12,
+			strokeWidth: 3
+		}) })
+	});
+}
+function Ee({ open: t, controls: n, label: r, onToggle: i }) {
+	return /* @__PURE__ */ l("button", {
+		type: "button",
+		"aria-expanded": t,
+		"aria-controls": t ? n : void 0,
+		"aria-label": r,
+		onClick: i,
+		className: "-my-1 grid size-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg-muted hover:bg-surface-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus",
+		children: /* @__PURE__ */ l(a, {
+			name: "chevron-right",
+			size: 16,
+			className: e("transition-transform duration-150 motion-reduce:transition-none", t && "rotate-90")
+		})
+	});
+}
+var C = (e) => {
+	let t = e instanceof Date ? e.toISOString() : e == null ? "" : String(e);
+	return /[",\n]/.test(t) ? `"${t.replace(/"/g, "\"\"")}"` : t;
+};
+function w({ data: s, columns: c, getRowId: f, caption: p, showCaption: he, searchable: m = !0, searchPlaceholder: h, selectable: g, bulkActions: _e, rowActions: _, renderExpanded: v, getRowLabel: y, onRowClick: b, toolbar: ve, pageSize: ye = 25, pageSizeOptions: be = [
+	10,
+	25,
+	50,
+	100
+], virtualize: x, maxHeight: w = "36rem", loading: T, error: E, onRetry: D, empty: De, exportFileName: O, defaultDensity: Oe = "comfortable", mobileLayout: k = "cards", headerAppearance: ke = "muted", pagination: Ae = "pages", showCount: je, labels: Me, className: Ne }) {
+	let A = {
+		...we,
+		...Me
+	}, j = fe(), M = ke === "brand", N = M ? "bg-primary" : "bg-surface-muted", [P, Pe] = me(Oe), F = d(() => ge(), []), Fe = d(() => c.map((e) => e.accessor ? F.accessor((t) => e.accessor(t), {
+		id: e.id,
+		header: e.header,
+		enableSorting: e.sortable ?? !0,
+		enableHiding: e.hideable ?? !0,
+		enableGlobalFilter: e.searchable,
+		sortFn: "auto"
+	}) : F.display({
+		id: e.id,
+		header: e.header,
+		enableSorting: !1,
+		enableHiding: e.hideable ?? !0
+	})), [c, F]), Ie = d(() => Object.fromEntries(c.filter((e) => e.defaultHidden).map((e) => [e.id, !1])), [c]), I = xe({
+		features: Ce,
+		columns: Fe,
+		data: s,
+		getRowId: (e) => f(e),
+		globalFilterFn: "includesString",
+		getColumnCanGlobalFilter: (e) => {
+			let t = c.find((t) => t.id === e.id);
+			return !!t?.accessor && t.searchable !== !1;
+		},
+		enableSortingRemoval: !0,
+		sortDescFirst: !1,
+		initialState: {
+			pagination: {
+				pageIndex: 0,
+				pageSize: x ? Math.max(s.length, 1) : ye
+			},
+			columnVisibility: Ie
+		}
+	});
+	de(() => {
+		x && I.setPageSize(Math.max(s.length, 1));
+	}, [
+		x,
+		s.length,
+		I
+	]);
+	let L = (e) => c.find((t) => t.id === e), R = (e) => {
+		if (y) return y(e.original);
+		let t = c[0]?.accessor?.(e.original);
+		return t == null || t instanceof Date ? e.id : String(t);
+	}, z = I.state.globalFilter ?? "", B = I.getRowModel().rows, V = I.getFilteredRowModel().rows.length, { pageIndex: H, pageSize: U } = I.state.pagination, W = g ? I.getSelectedRowModel().rows.map((e) => e.original) : [], G = I.getVisibleLeafColumns(), K = !!v && !x, [q, Le] = me(() => /* @__PURE__ */ new Set()), Re = (e) => Le((t) => {
+		let n = new Set(t);
+		return n.has(e) ? n.delete(e) : n.add(e), n;
+	}), J = G.length + +!!g + +!!_ + +!!K, Y = P === "compact" ? "px-3 py-1.5" : "px-4 py-3", ze = () => {
+		let e = G.map((e) => L(e.id)).filter((e) => e.accessor), t = W.length ? W : I.getFilteredRowModel().rows.map((e) => e.original), n = [e.map((e) => C(e.header)).join(","), ...t.map((t) => e.map((e) => C(e.accessor(t))).join(","))], r = new Blob([`${n.join("\n")}`], { type: "text/csv;charset=utf-8" }), i = URL.createObjectURL(r), a = document.createElement("a");
+		a.href = i, a.download = `${O}.csv`, a.click(), URL.revokeObjectURL(i);
+	}, X = (e, t) => {
+		let n = L(t);
+		if (n.cell) return n.cell(e.original);
+		let r = n.accessor?.(e.original);
+		return r instanceof Date ? r.toLocaleDateString() : r ?? "—";
+	}, Be = pe(null), Z = Se({
+		count: x ? B.length : 0,
+		getScrollElement: () => Be.current,
+		estimateSize: () => P === "compact" ? 37 : 49,
+		overscan: 8
+	}), Q = x ? Z.getVirtualItems() : [], Ve = x ? Q.map((e) => B[e.index]) : B, He = x && Q.length ? Q[0].start : 0, Ue = x && Q.length ? Z.getTotalSize() - Q[Q.length - 1].end : 0, We = z && V === 0 ? /* @__PURE__ */ l(r, {
+		size: "sm",
+		mascot: "lost",
+		headingLevel: 3,
+		title: A.noResultsTitle,
+		description: A.noResultsDescription.replace("{query}", z)
+	}) : De ?? /* @__PURE__ */ l(r, {
+		size: "sm",
+		headingLevel: 3,
+		title: A.emptyTitle
+	}), $ = E ? "error" : T ? "loading" : B.length === 0 ? "empty" : "ready", Ge = k === "cards" ? "hidden md:block" : "block";
+	return /* @__PURE__ */ u("div", {
+		className: e("grid gap-3 font-sans", Ne),
+		children: [
+			W.length > 0 ? /* @__PURE__ */ u("div", {
+				role: "region",
+				"aria-label": A.selected.replace("{count}", String(W.length)),
+				className: "flex min-h-11 flex-wrap items-center gap-3 rounded-md bg-primary px-4 py-2 text-on-primary",
+				children: [
+					/* @__PURE__ */ l("span", {
+						className: "text-sm font-semibold",
+						children: A.selected.replace("{count}", String(W.length))
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "flex flex-1 flex-wrap items-center gap-2 [&_button]:text-on-primary",
+						children: _e?.(W, () => I.resetRowSelection(!0))
+					}),
+					/* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => I.resetRowSelection(!0),
+						className: "cursor-pointer rounded-full border-0 bg-transparent px-3 py-1.5 text-sm font-semibold text-on-primary underline-offset-4 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-white",
+						children: A.clear
+					})
+				]
+			}) : /* @__PURE__ */ u("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					m && /* @__PURE__ */ l(ce, {
+						type: "search",
+						size: "sm",
+						iconStart: "search",
+						"aria-label": A.search,
+						placeholder: h ?? `${A.search}…`,
+						value: z,
+						onChange: (e) => I.setGlobalFilter(e.target.value),
+						className: "w-full sm:w-72"
+					}),
+					ve,
+					je && /* @__PURE__ */ l("span", {
+						"aria-live": "polite",
+						className: "text-sm text-fg-muted tabular-nums",
+						children: A.results.replace("{count}", String(V))
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "ml-auto flex items-center gap-2",
+						children: [O && /* @__PURE__ */ l(t, {
+							size: "sm",
+							variant: "secondary",
+							iconStart: "download",
+							onClick: ze,
+							children: A.export
+						}), /* @__PURE__ */ u(ee, { children: [/* @__PURE__ */ l(se, {
+							asChild: !0,
+							children: /* @__PURE__ */ l(t, {
+								size: "sm",
+								variant: "secondary",
+								children: /* @__PURE__ */ u("span", {
+									className: "inline-flex items-center gap-1.5",
+									children: [/* @__PURE__ */ l(a, {
+										name: "columns",
+										size: 16
+									}), A.view]
+								})
+							})
+						}), /* @__PURE__ */ u(ne, {
+							align: "end",
+							children: [
+								/* @__PURE__ */ l(re, { children: A.columns }),
+								I.getAllLeafColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(te, {
+									checked: e.getIsVisible(),
+									onCheckedChange: (t) => e.toggleVisibility(t === !0),
+									onSelect: (e) => e.preventDefault(),
+									children: L(e.id).header
+								}, e.id)),
+								/* @__PURE__ */ l(oe, {}),
+								/* @__PURE__ */ l(re, { children: A.density }),
+								/* @__PURE__ */ u(ie, {
+									value: P,
+									onValueChange: (e) => Pe(e),
+									children: [/* @__PURE__ */ l(ae, {
+										value: "comfortable",
+										children: A.comfortable
+									}), /* @__PURE__ */ l(ae, {
+										value: "compact",
+										children: A.compact
+									})]
+								})
+							]
+						})] })]
+					})
+				]
+			}),
+			he && /* @__PURE__ */ l("h3", {
+				className: "m-0 font-display text-lg font-bold",
+				children: p
+			}),
+			/* @__PURE__ */ l("div", {
+				ref: Be,
+				className: e("relative overflow-auto rounded-md border border-border bg-surface", Ge),
+				style: x ? { maxHeight: w } : void 0,
+				tabIndex: x ? 0 : void 0,
+				role: x ? "region" : void 0,
+				"aria-label": x ? p : void 0,
+				children: /* @__PURE__ */ u("table", {
+					className: "w-full border-collapse text-sm",
+					"aria-busy": T || void 0,
+					"aria-rowcount": x ? B.length + 1 : void 0,
+					children: [
+						/* @__PURE__ */ l("caption", {
+							className: "sr-only",
+							children: p
+						}),
+						/* @__PURE__ */ l("thead", {
+							className: e("sticky top-0 z-10", N),
+							children: I.getHeaderGroups().map((t) => /* @__PURE__ */ u("tr", { children: [
+								K && /* @__PURE__ */ l("th", {
+									scope: "col",
+									className: e("w-10 border-b border-border", Y),
+									children: /* @__PURE__ */ l("span", {
+										className: "sr-only",
+										children: A.details
+									})
+								}),
+								g && /* @__PURE__ */ l("th", {
+									scope: "col",
+									className: e("w-10", Y, k === "scroll" && e("sticky left-0 z-10", N)),
+									children: /* @__PURE__ */ l(S, {
+										label: A.selectAll,
+										checked: I.getIsAllPageRowsSelected() ? !0 : I.getIsSomePageRowsSelected() ? "indeterminate" : !1,
+										onChange: () => I.toggleAllPageRowsSelected()
+									})
+								}),
+								t.headers.map((t, n) => {
+									let r = L(t.column.id), i = t.column.getIsSorted(), o = t.column.getCanSort();
+									return /* @__PURE__ */ l("th", {
+										scope: "col",
+										"aria-sort": i === "asc" ? "ascending" : i === "desc" ? "descending" : void 0,
+										style: { width: r.width },
+										className: e(Y, "border-b border-border font-semibold whitespace-nowrap", M ? "text-xs tracking-wider text-on-primary uppercase" : "text-fg-muted", Te[r.align ?? "start"], k === "scroll" && n === 0 && !g && e("sticky left-0 z-10", N)),
+										children: o ? /* @__PURE__ */ u("button", {
+											type: "button",
+											onClick: t.column.getToggleSortingHandler(),
+											className: e("inline-flex cursor-pointer items-center gap-1 rounded-xs border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] font-semibold tracking-[inherit] focus-visible:outline-3 focus-visible:outline-offset-2", M ? "text-on-primary uppercase underline-offset-4 hover:underline focus-visible:outline-white" : e("hover:text-fg focus-visible:outline-focus", i ? "text-fg" : "text-fg-muted"), M && i && "underline", r.align === "end" && "flex-row-reverse"),
+											children: [r.header, /* @__PURE__ */ l(a, {
+												name: i === "asc" ? "arrow-up" : i === "desc" ? "arrow-down" : "sort",
+												size: 14,
+												className: i ? M ? "" : "text-link" : M ? "opacity-60" : "opacity-40"
+											})]
+										}) : r.header
+									}, t.id);
+								}),
+								_ && /* @__PURE__ */ l("th", {
+									scope: "col",
+									className: e(Y, "w-12 border-b border-border"),
+									children: /* @__PURE__ */ l("span", {
+										className: "sr-only",
+										children: A.actions
+									})
+								})
+							] }, t.id))
+						}),
+						/* @__PURE__ */ u("tbody", { children: [
+							$ === "loading" && Array.from({ length: Math.min(U, 6) }, (e, t) => /* @__PURE__ */ l("tr", {
+								className: "border-b border-border last:border-b-0",
+								children: Array.from({ length: J }, (e, t) => /* @__PURE__ */ l("td", {
+									className: Y,
+									children: /* @__PURE__ */ l(n, { className: "h-3.5 rounded-full" })
+								}, t))
+							}, t)),
+							$ === "error" && /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
+								colSpan: J,
+								children: /* @__PURE__ */ l(i, {
+									size: "sm",
+									headingLevel: 3,
+									description: E,
+									onRetry: D
+								})
+							}) }),
+							$ === "empty" && /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
+								colSpan: J,
+								children: We
+							}) }),
+							$ === "ready" && He > 0 && /* @__PURE__ */ l("tr", {
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ l("td", {
+									colSpan: J,
+									style: {
+										height: He,
+										padding: 0
+									}
+								})
+							}),
+							$ === "ready" && Ve.map((t) => {
+								let n = g && t.getIsSelected(), r = K && q.has(t.id), i = `${j}-x-${t.id}`;
+								return /* @__PURE__ */ u(ue, { children: [/* @__PURE__ */ u("tr", {
+									"aria-selected": g ? n : void 0,
+									onClick: b ? () => b(t.original) : void 0,
+									className: e("border-b border-border transition-colors last:border-b-0 hover:bg-surface-muted/60", n && "bg-info-surface/50 hover:bg-info-surface/70", b && "cursor-pointer", r && "border-b-0", r && !n && "bg-surface-muted/40"),
+									children: [
+										K && /* @__PURE__ */ l("td", {
+											className: e(Y, "w-10 pr-0"),
+											onClick: (e) => e.stopPropagation(),
+											children: /* @__PURE__ */ l(Ee, {
+												open: r,
+												controls: i,
+												label: (r ? A.collapse : A.expand).replace("{row}", R(t)),
+												onToggle: () => Re(t.id)
+											})
+										}),
+										g && /* @__PURE__ */ l("td", {
+											className: e(Y, k === "scroll" && "sticky left-0 bg-surface"),
+											children: /* @__PURE__ */ l(S, {
+												label: `${A.selectRow} ${R(t)}`,
+												checked: !!n,
+												onChange: t.getToggleSelectedHandler()
+											})
+										}),
+										t.getVisibleCells().map((n, r) => {
+											let i = L(n.column.id);
+											return /* @__PURE__ */ l("td", {
+												className: e(Y, "text-fg", Te[i.align ?? "start"], i.align === "end" && "tabular-nums", k === "scroll" && r === 0 && !g && "sticky left-0 bg-surface"),
+												children: X(t, n.column.id)
+											}, n.id);
+										}),
+										_ && /* @__PURE__ */ l("td", {
+											className: e(Y, "text-right"),
+											onClick: (e) => e.stopPropagation(),
+											children: _(t.original)
+										})
+									]
+								}), r && /* @__PURE__ */ l("tr", {
+									id: i,
+									className: "border-b border-border bg-surface-muted/40 last:border-b-0",
+									children: /* @__PURE__ */ l("td", {
+										colSpan: J,
+										className: e(Y, "pt-0"),
+										children: /* @__PURE__ */ l("div", {
+											className: "rounded-md border border-border bg-surface p-4",
+											children: v(t.original)
+										})
+									})
+								})] }, t.id);
+							}),
+							$ === "ready" && Ue > 0 && /* @__PURE__ */ l("tr", {
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ l("td", {
+									colSpan: J,
+									style: {
+										height: Ue,
+										padding: 0
+									}
+								})
+							})
+						] })
+					]
+				})
+			}),
+			k === "cards" && /* @__PURE__ */ u("div", {
+				className: "grid gap-2 md:hidden",
+				children: [
+					$ === "loading" && [
+						0,
+						1,
+						2
+					].map((e) => /* @__PURE__ */ l(n, { className: "h-24" }, e)),
+					$ === "error" && /* @__PURE__ */ l(i, {
+						size: "sm",
+						headingLevel: 3,
+						description: E,
+						onRetry: D
+					}),
+					$ === "empty" && We,
+					$ === "ready" && /* @__PURE__ */ l("ul", {
+						"aria-label": p,
+						className: "m-0 grid list-none gap-2 p-0",
+						children: B.map((t) => {
+							let n = G.map((e) => L(e.id)), r = n.find((e) => e.mobile === "title") ?? n[0], i = n.filter((e) => e.mobile === "meta"), o = n.filter((e) => e !== r && (e.mobile ?? "field") === "field");
+							return /* @__PURE__ */ u("li", {
+								onClick: b ? () => b(t.original) : void 0,
+								className: e("grid gap-2 rounded-md border border-border bg-surface p-4", g && t.getIsSelected() && "border-primary bg-info-surface/50", b && "cursor-pointer"),
+								children: [
+									/* @__PURE__ */ u("div", {
+										className: "flex items-start gap-3",
+										children: [
+											g && /* @__PURE__ */ l("span", {
+												className: "pt-0.5",
+												children: /* @__PURE__ */ l(S, {
+													label: `${A.selectRow} ${R(t)}`,
+													checked: t.getIsSelected(),
+													onChange: t.getToggleSelectedHandler()
+												})
+											}),
+											/* @__PURE__ */ u("div", {
+												className: "min-w-0 flex-1",
+												children: [/* @__PURE__ */ l("div", {
+													className: "font-semibold text-fg",
+													children: X(t, r.id)
+												}), i.length > 0 && /* @__PURE__ */ l("div", {
+													className: "mt-0.5 flex flex-wrap gap-x-2 text-sm text-fg-muted",
+													children: i.map((e) => /* @__PURE__ */ l("span", { children: X(t, e.id) }, e.id))
+												})]
+											}),
+											_ && /* @__PURE__ */ l("div", {
+												onClick: (e) => e.stopPropagation(),
+												children: _(t.original)
+											})
+										]
+									}),
+									o.length > 0 && /* @__PURE__ */ l("dl", {
+										className: "m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm",
+										children: o.map((e) => /* @__PURE__ */ u("div", {
+											className: "contents",
+											children: [/* @__PURE__ */ l("dt", {
+												className: "text-fg-muted",
+												children: e.header
+											}), /* @__PURE__ */ l("dd", {
+												className: "m-0 min-w-0 text-right text-fg",
+												children: X(t, e.id)
+											})]
+										}, e.id))
+									}),
+									K && /* @__PURE__ */ u("div", {
+										onClick: (e) => e.stopPropagation(),
+										className: "grid gap-2",
+										children: [/* @__PURE__ */ u("button", {
+											type: "button",
+											"aria-expanded": q.has(t.id),
+											"aria-controls": q.has(t.id) ? `${j}-m-${t.id}` : void 0,
+											onClick: () => Re(t.id),
+											className: "inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-xs border-0 bg-transparent p-0 font-sans text-sm font-semibold text-link focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+											children: [A.details, /* @__PURE__ */ l(a, {
+												name: "chevron-down",
+												size: 14,
+												className: e("transition-transform motion-reduce:transition-none", q.has(t.id) && "rotate-180")
+											})]
+										}), q.has(t.id) && /* @__PURE__ */ l("div", {
+											id: `${j}-m-${t.id}`,
+											className: "rounded-sm bg-surface-muted p-3 text-sm",
+											children: v(t.original)
+										})]
+									})
+								]
+							}, t.id);
+						})
+					})
+				]
+			}),
+			!x && $ === "ready" && V > 0 && /* @__PURE__ */ u("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 text-sm text-fg-muted",
+				children: [
+					/* @__PURE__ */ l("span", {
+						"aria-live": "polite",
+						children: A.range.replace("{from}", String(H * U + 1)).replace("{to}", String(Math.min(V, (H + 1) * U))).replace("{total}", String(V))
+					}),
+					/* @__PURE__ */ u("label", {
+						className: "hidden items-center gap-2 sm:flex",
+						children: [A.rowsPerPage, /* @__PURE__ */ l(le, {
+							size: "sm",
+							value: U,
+							onChange: (e) => I.setPageSize(Number(e.target.value)),
+							wrapperClassName: "w-20",
+							children: be.map((e) => /* @__PURE__ */ l("option", {
+								value: e,
+								children: e
+							}, e))
+						})]
+					}),
+					/* @__PURE__ */ l(o, {
+						variant: Ae,
+						page: H + 1,
+						pageCount: I.getPageCount(),
+						onPageChange: (e) => I.setPageIndex(e - 1),
+						className: Ae === "compact" ? void 0 : "w-full sm:w-auto"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { w as DataTable };
+
+//# sourceMappingURL=data-table.js.map