themelia-react-ui 2.0.1 → 2.0.2

package/dist/features/data-view.js

@@ -1,118 +1,117 @@
 "use client";
 import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-l5LpDw2z.js";
-import { n } from "../buttons-SbIcm1HJ.js";
-import { s as r } from "../typography-DTRkE9zL.js";
-import { r as i, t as a } from "../structure-DC2dygdA.js";
-import { t as o } from "../interaction-recipes-CHr0dJUs.js";
-import { g as s } from "../primitives-B-CkiEMU.js";
-import { t as c } from "../number-DMhe-Vsk.js";
-import { i as l, r as u, t as d } from "../tabs-DwBJfjxX.js";
-import { t as f } from "../popover-menu-B71Tn2Qz.js";
-import { f as p } from "../table-CrcLN9Io.js";
-import { N as m, O as h, P as g, T as _, l as v, w as y } from "../filters-BkHH53uv.js";
-import { useEffect as b, useMemo as x, useRef as S } from "react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { Check as E, ChevronsUpDown as D } from "lucide-react";
-import { isValid as O, parse as k } from "date-fns";
+import { t } from "../utils-BRhFDwuU.js";
+import { n } from "../buttons-DPZekJFu.js";
+import { c as r } from "../typography-UTnveOEy.js";
+import { r as i, t as a } from "../structure-BmisBK-3.js";
+import { g as o } from "../primitives-BFK08r9M.js";
+import { t as s } from "../number-DbV1Dija.js";
+import { i as c, r as l, t as u } from "../tabs-CDocW5D1.js";
+import { t as d } from "../popover-menu-B9WWygpa.js";
+import { f } from "../table-BweFy_P9.js";
+import { N as p, O as m, P as h, T as g, l as _, w as v } from "../filters-BGfvjP4d.js";
+import { useEffect as y, useMemo as b, useRef as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { Check as T, ChevronsUpDown as E } from "lucide-react";
+import { isValid as D, parse as O } from "date-fns";
 //#region src/components/features/data-view/data-view.strings.ts
-var A = {
+var k = {
 	page: "Page",
 	previous: "Previous",
 	next: "Next"
-}, j = "View";
+}, A = "View";
 //#endregion
 //#region src/components/features/data-view/data-view-filtering.ts
-function M(e, t) {
+function j(e, t) {
 	return t.includes(".") ? t.split(".").reduce((e, t) => {
 		if (e && typeof e == "object") return e[t];
 	}, e) : e && typeof e == "object" ? e[t] : void 0;
 }
-function N(e) {
+function M(e) {
 	return e == null ? "" : e instanceof Date ? e.toISOString() : typeof e == "string" ? e : typeof e == "number" || typeof e == "boolean" ? String(e) : "";
 }
-function P(e, t = 0) {
-	return e == null || t > 2 ? "" : e instanceof Date ? e.toISOString() : typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? String(e) : Array.isArray(e) ? e.map((e) => P(e, t + 1)).join(" ") : typeof e == "object" ? Object.values(e).map((e) => P(e, t + 1)).join(" ") : "";
+function N(e, t = 0) {
+	return e == null || t > 2 ? "" : e instanceof Date ? e.toISOString() : typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? String(e) : Array.isArray(e) ? e.map((e) => N(e, t + 1)).join(" ") : typeof e == "object" ? Object.values(e).map((e) => N(e, t + 1)).join(" ") : "";
 }
-function F(e) {
-	if (Array.isArray(e)) return e.map(N).filter(Boolean).map((e) => e.toLowerCase());
-	let t = N(e);
+function P(e) {
+	if (Array.isArray(e)) return e.map(M).filter(Boolean).map((e) => e.toLowerCase());
+	let t = M(e);
 	return t ? [t.toLowerCase()] : [];
 }
-function I(e) {
+function F(e) {
 	let t = Number(e);
 	return Number.isFinite(t) ? t : void 0;
 }
-function L(e, t) {
+function I(e, t) {
 	if (t) {
-		let n = k(e, t, /* @__PURE__ */ new Date(0));
-		if (O(n)) return n.getTime();
+		let n = O(e, t, /* @__PURE__ */ new Date(0));
+		if (D(n)) return n.getTime();
 	}
 	let n = new Date(e);
-	return O(n) ? n.getTime() : void 0;
+	return D(n) ? n.getTime() : void 0;
 }
-function R(e, t, n, r) {
-	let i = r?.type === g.DATE ? (e) => L(e, r.dateFormat?.param ?? "yyyy-MM-dd") : I, a = e.map(i).filter((e) => e !== void 0), o = t.map(i).filter((e) => e !== void 0);
+function L(e, t, n, r) {
+	let i = r?.type === h.DATE ? (e) => I(e, r.dateFormat?.param ?? "yyyy-MM-dd") : F, a = e.map(i).filter((e) => e !== void 0), o = t.map(i).filter((e) => e !== void 0);
 	if (a.length === 0 || o.length === 0) return !1;
 	switch (n) {
-		case m.GT:
-		case m.AFTER: return a.some((e) => e > o[0]);
-		case m.GTE: return a.some((e) => e >= o[0]);
-		case m.LT:
-		case m.BEFORE: return a.some((e) => e < o[0]);
-		case m.LTE: return a.some((e) => e <= o[0]);
-		case m.BETWEEN: return o.length < 2 ? !1 : a.some((e) => e >= o[0] && e <= o[1]);
+		case p.GT:
+		case p.AFTER: return a.some((e) => e > o[0]);
+		case p.GTE: return a.some((e) => e >= o[0]);
+		case p.LT:
+		case p.BEFORE: return a.some((e) => e < o[0]);
+		case p.LTE: return a.some((e) => e <= o[0]);
+		case p.BETWEEN: return o.length < 2 ? !1 : a.some((e) => e >= o[0] && e <= o[1]);
 		default: return !1;
 	}
 }
-function z(e) {
+function R(e) {
 	return {
 		key: e,
 		label: e,
-		type: g.SEARCH,
+		type: h.SEARCH,
 		icon: null,
 		displayConfig: {}
 	};
 }
-function B(e, t, n, r) {
+function z(e, t, n, r) {
 	let i = t.value.map((e) => e.trim().toLowerCase()).filter(Boolean);
 	if (i.length === 0) return !0;
-	if (n?.type === g.SEARCH) {
-		let n = P(e).toLowerCase();
-		return t.operator === m.NOT || t.operator === m.NOT_IN ? i.every((e) => !n.includes(e)) : i.every((e) => n.includes(e));
+	if (n?.type === h.SEARCH) {
+		let n = N(e).toLowerCase();
+		return t.operator === p.NOT || t.operator === p.NOT_IN ? i.every((e) => !n.includes(e)) : i.every((e) => n.includes(e));
 	}
-	let a = n ?? z(t.key), o = F(r?.(e, a) ?? M(e, t.key));
+	let a = n ?? R(t.key), o = P(r?.(e, a) ?? j(e, t.key));
 	if (o.length === 0) return !1;
 	switch (t.operator) {
-		case m.CONTAINS: return i.every((e) => o.some((t) => t.includes(e)));
-		case m.HAS: return i.every((e) => o.includes(e));
-		case m.NOT_IN: return i.every((e) => o.every((t) => t !== e));
-		case m.NOT: return n?.type === g.SELECT || n?.type === g.MULTI_SELECT || n?.type === g.ASYNC_SELECT ? i.every((e) => o.every((t) => t !== e)) : i.every((e) => o.every((t) => !t.includes(e)));
-		case m.IN:
-		case m.EQUALS:
-		case m.HAS_ANY: return i.some((e) => o.includes(e));
-		case m.HAS_ALL: return i.every((e) => o.includes(e));
-		case m.GT:
-		case m.GTE:
-		case m.LT:
-		case m.LTE:
-		case m.BEFORE:
-		case m.AFTER:
-		case m.BETWEEN: return R(o, i, t.operator, n);
+		case p.CONTAINS: return i.every((e) => o.some((t) => t.includes(e)));
+		case p.HAS: return i.every((e) => o.includes(e));
+		case p.NOT_IN: return i.every((e) => o.every((t) => t !== e));
+		case p.NOT: return n?.type === h.SELECT || n?.type === h.MULTI_SELECT || n?.type === h.ASYNC_SELECT ? i.every((e) => o.every((t) => t !== e)) : i.every((e) => o.every((t) => !t.includes(e)));
+		case p.IN:
+		case p.EQUALS:
+		case p.HAS_ANY: return i.some((e) => o.includes(e));
+		case p.HAS_ALL: return i.every((e) => o.includes(e));
+		case p.GT:
+		case p.GTE:
+		case p.LT:
+		case p.LTE:
+		case p.BEFORE:
+		case p.AFTER:
+		case p.BETWEEN: return L(o, i, t.operator, n);
 		default: return i.some((e) => o.includes(e));
 	}
 }
-function V(e, t, n, r) {
+function B(e, t, n, r) {
 	if (t.length === 0) return e;
 	let i = new Map(n.map((e) => [e.key, e]));
-	return e.filter((e) => t.every((t) => B(e, t, i.get(t.key), r)));
+	return e.filter((e) => t.every((t) => z(e, t, i.get(t.key), r)));
 }
 //#endregion
 //#region src/components/features/data-view/hooks/use-data-view.ts
-function H({ data: e, filtering: t }) {
-	let n = S(t?.onError);
+function V({ data: e, filtering: t }) {
+	let n = x(t?.onError);
 	n.current = t?.onError;
-	let r = S(null), i = t?.activeFilters, a = t?.filterRows, o = t?.filters, s = t?.getFilterValue, c = t !== void 0, l = x(() => {
+	let r = x(null), i = t?.activeFilters, a = t?.filterRows, o = t?.filters, s = t?.getFilterValue, c = t !== void 0, l = b(() => {
 		if (!c || !i || !o) return {
 			rows: e,
 			error: null,
@@ -124,7 +123,7 @@ function H({ data: e, filtering: t }) {
 					data: e,
 					activeFilters: i,
 					filters: o
-				}) : V(e, i, o, s),
+				}) : B(e, i, o, s),
 				error: null,
 				failed: !1
 			};
@@ -143,7 +142,7 @@ function H({ data: e, filtering: t }) {
 		s,
 		c
 	]);
-	return b(() => {
+	return y(() => {
 		if (!l.failed) {
 			r.current = null;
 			return;
@@ -153,8 +152,8 @@ function H({ data: e, filtering: t }) {
 }
 //#endregion
 //#region src/components/features/data-view/data-view.tsx
-function U(e) {
-	let { activeFilters: t, filters: n, replaceFilters: r } = _(), i = x(() => t.filter((e) => n.find((t) => t.key === e.key)?.type !== g.SEARCH), [t, n]), a = x(() => t.filter((e) => n.find((t) => t.key === e.key)?.type === g.SEARCH), [t, n]), o = x(() => {
+function H(e) {
+	let { activeFilters: t, filters: n, replaceFilters: r } = g(), i = b(() => t.filter((e) => n.find((t) => t.key === e.key)?.type !== h.SEARCH), [t, n]), a = b(() => t.filter((e) => n.find((t) => t.key === e.key)?.type === h.SEARCH), [t, n]), o = b(() => {
 		for (let t of e) {
 			if (t.presets.length === 0) {
 				if (i.length === 0) return t;
@@ -174,7 +173,7 @@ function U(e) {
 			return;
 		}
 		let t = e.presets.map((e) => {
-			let t = n.find((t) => t.key === e.key), r = e.operator ?? t?.operator ?? (t ? h(t.type) : m.EQUALS);
+			let t = n.find((t) => t.key === e.key), r = e.operator ?? t?.operator ?? (t ? m(t.type) : p.EQUALS);
 			return {
 				id: e.key,
 				key: e.key,
@@ -189,9 +188,9 @@ function U(e) {
 		applyTab: s
 	};
 }
-function W({ tabs: e, label: t = j }) {
-	let { activeTab: i, applyTab: a } = U(e);
-	return e.length === 0 ? null : /* @__PURE__ */ w(f, {
+function U({ tabs: e, label: t = A }) {
+	let { activeTab: i, applyTab: a } = H(e);
+	return e.length === 0 ? null : /* @__PURE__ */ C(d, {
 		search: !1,
 		contentClassName: "w-48",
 		items: e.map((e) => ({
@@ -204,69 +203,70 @@ function W({ tabs: e, label: t = j }) {
 		onSelect: (e) => {
 			e.data && a(e.data);
 		},
-		renderItem: (e) => /* @__PURE__ */ T(C, { children: [
-			/* @__PURE__ */ w("span", {
+		renderItem: (e) => /* @__PURE__ */ w(S, { children: [
+			/* @__PURE__ */ C("span", {
 				className: "flex size-icon-sm shrink-0 items-center justify-center",
-				children: !!e.selected && /* @__PURE__ */ w(E, {
+				children: !!e.selected && /* @__PURE__ */ C(T, {
 					className: "size-icon-sm",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ w(r, {
+			/* @__PURE__ */ C(r, {
 				tag: "span",
+				type: "inherit",
 				weight: e.selected ? "medium" : "regular",
 				className: "min-w-0 flex-1 truncate",
 				children: e.label
 			}),
-			!!e.description && /* @__PURE__ */ w(s, {
+			!!e.description && /* @__PURE__ */ C(o, {
 				size: "xs",
 				className: "tabular-nums",
 				children: e.description
 			})
 		] }),
-		trigger: /* @__PURE__ */ T(n, {
+		trigger: /* @__PURE__ */ w(n, {
 			type: "button",
 			tone: "secondary",
 			buttonStyle: "ghost",
 			size: "sm",
 			className: "h-action-sm px-control-sm",
 			"aria-label": t,
-			children: [/* @__PURE__ */ w(r, {
+			children: [/* @__PURE__ */ C(r, {
 				tag: "span",
 				size: "inherit",
 				className: "truncate text-current",
 				children: i?.label ?? t
-			}), /* @__PURE__ */ w(D, {
+			}), /* @__PURE__ */ C(E, {
 				className: "size-icon-sm",
 				"aria-hidden": "true"
 			})]
 		})
 	});
 }
-function G({ children: e, header: n, toolbar: r, footer: i, emptySlot: o, empty: s = !1, className: c, contentClassName: l }) {
-	return /* @__PURE__ */ T(a, {
-		render: /* @__PURE__ */ w("section", {}),
+function W({ children: e, header: n, toolbar: r, footer: i, emptySlot: o, empty: s = !1, className: c, contentClassName: l }) {
+	return /* @__PURE__ */ w(a, {
+		render: /* @__PURE__ */ C("section", {}),
 		gap: "lg",
 		"data-component": "data-view-shell",
 		"data-slot": "data-view-shell",
 		className: t("data-view-shell--component @container/data-view", c),
 		children: [
-			!!n && /* @__PURE__ */ w("div", {
+			!!n && /* @__PURE__ */ C("div", {
 				"data-slot": "data-view-header",
 				className: "data-view-shell--header",
 				children: n
 			}),
-			!!r && /* @__PURE__ */ w("div", {
+			!!r && /* @__PURE__ */ C("div", {
 				"data-slot": "data-view-toolbar-slot",
 				className: "data-view-shell--toolbar",
 				children: r
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ C("div", {
 				"data-slot": "data-view-content",
 				className: t("data-view-shell--content min-w-0", l),
 				children: s ? o : e
 			}),
-			!!i && /* @__PURE__ */ w("div", {
+			!!i && /* @__PURE__ */ C("div", {
 				"data-slot": "data-view-footer",
 				className: "data-view-shell--footer",
 				children: i
@@ -274,14 +274,14 @@ function G({ children: e, header: n, toolbar: r, footer: i, emptySlot: o, empty:
 		]
 	});
 }
-function K({ leading: e, search: n, filters: r, views: i, actions: o, className: s }) {
-	return /* @__PURE__ */ w("div", {
+function G({ leading: e, search: n, filters: r, views: i, actions: o, className: s }) {
+	return /* @__PURE__ */ C("div", {
 		"data-component": "data-view-toolbar",
 		"data-slot": "data-view-toolbar",
-		className: t("data-view-toolbar--component rounded-radius border border-border bg-card p-surface shadow-sm", s),
-		children: /* @__PURE__ */ T("div", {
+		className: t("data-view-toolbar--component box-border rounded-radius border border-border bg-card text-card-foreground p-surface shadow-sm", s),
+		children: /* @__PURE__ */ w("div", {
 			className: "flex min-w-0 flex-col gap-space-lg @2xl/data-view:flex-row @2xl/data-view:items-center @2xl/data-view:justify-between @2xl/data-view:flex-nowrap",
-			children: [/* @__PURE__ */ T(a, {
+			children: [/* @__PURE__ */ w(a, {
 				direction: "horizontal",
 				wrap: !0,
 				align: "center",
@@ -294,7 +294,7 @@ function K({ leading: e, search: n, filters: r, views: i, actions: o, className:
 					r,
 					i
 				]
-			}), !!o && /* @__PURE__ */ w(a, {
+			}), !!o && /* @__PURE__ */ C(a, {
 				direction: "horizontal",
 				wrap: !0,
 				align: "center",
@@ -306,27 +306,27 @@ function K({ leading: e, search: n, filters: r, views: i, actions: o, className:
 		})
 	});
 }
-function q({ toolbar: e, children: n, footer: r, className: a, toolbarClassName: o, contentClassName: s, footerClassName: c }) {
-	return /* @__PURE__ */ T("section", {
+function K({ toolbar: e, children: n, footer: r, className: a, toolbarClassName: o, contentClassName: s, footerClassName: c }) {
+	return /* @__PURE__ */ w("section", {
 		"data-component": "data-view-table-frame",
 		"data-slot": "data-view-table-frame",
-		className: t("data-view-table-frame--component @container/data-view overflow-hidden rounded-radius border border-border bg-card shadow-xs", a),
+		className: t("data-view-table-frame--component box-border @container/data-view overflow-hidden rounded-radius border border-border bg-card text-card-foreground shadow-xs", a),
 		children: [
-			!!e && /* @__PURE__ */ w("div", {
+			!!e && /* @__PURE__ */ C("div", {
 				"data-slot": "data-view-table-frame-toolbar",
 				className: t("data-view-table-frame--toolbar border-b border-border/60 px-surface py-surface", o),
-				children: /* @__PURE__ */ w(i, {
+				children: /* @__PURE__ */ C(i, {
 					columns: 1,
 					gap: "lg",
 					children: e
 				})
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ C("div", {
 				"data-slot": "data-view-table-frame-content",
 				className: t("data-view-table-frame--content min-w-0", s),
 				children: n
 			}),
-			!!r && /* @__PURE__ */ w("div", {
+			!!r && /* @__PURE__ */ C("div", {
 				"data-slot": "data-view-table-frame-footer",
 				className: t("data-view-table-frame--footer border-t border-border/60 px-surface py-row-y", c),
 				children: r
@@ -334,16 +334,16 @@ function q({ toolbar: e, children: n, footer: r, className: a, toolbarClassName:
 		]
 	});
 }
-function J({ data: e, columns: n, filtering: r, table: i, slots: o, className: s }) {
-	let { rows: c } = H({
+function q({ data: e, columns: n, filtering: r, table: i, slots: o, className: s }) {
+	let { rows: c } = V({
 		data: e,
 		filtering: r
-	}), l = r?.tabs ?? r?.layout?.tabs ?? [], u = r?.tabsDisplay ?? "tabs", d = u === "tabs" ? l : r?.layout?.tabs, f = !!o?.toolbarStart || !!o?.toolbarAfterFilters || u === "select" && l.length > 0, m = !!r || !!o?.topbarContent || f, h = /* @__PURE__ */ w(q, {
+	}), l = r?.tabs ?? r?.layout?.tabs ?? [], u = r?.tabsDisplay ?? "tabs", d = u === "tabs" ? l : r?.layout?.tabs, p = !!o?.toolbarStart || !!o?.toolbarAfterFilters || u === "select" && l.length > 0, m = !!r || !!o?.topbarContent || p, h = /* @__PURE__ */ C(K, {
 		className: t("data-view--component", s),
 		contentClassName: "data-view--content data-view-table--content",
 		footerClassName: "data-view--footer data-view-table--footer",
 		footer: o?.footer,
-		children: /* @__PURE__ */ w(p, {
+		children: /* @__PURE__ */ C(f, {
 			...i,
 			columns: n,
 			data: c,
@@ -351,30 +351,30 @@ function J({ data: e, columns: n, filtering: r, table: i, slots: o, className: s
 			headerTransparent: !1,
 			topbarClassName: t("data-view--topbar data-view-table--topbar py-surface @2xl/data-table:items-start", i?.topbarClassName),
 			toolbarLabelVisibility: i?.toolbarLabelVisibility ?? "hidden",
-			topbarContent: m ? /* @__PURE__ */ T(a, {
+			topbarContent: m ? /* @__PURE__ */ w(a, {
 				gap: "lg",
 				"data-slot": "data-view-topbar-content",
 				className: "data-view--topbar-content data-view-table--topbar-content",
 				children: [
 					o?.topbarContent,
-					f && /* @__PURE__ */ T(a, {
+					p && /* @__PURE__ */ w(a, {
 						"data-slot": "data-view-toolbar-row",
 						direction: "horizontal",
 						gap: "md",
 						className: "data-view--toolbar-row data-view-table--toolbar-row",
 						children: [
 							o?.toolbarStart,
-							r && u === "select" && l.length > 0 && /* @__PURE__ */ w(W, {
+							r && u === "select" && l.length > 0 && /* @__PURE__ */ C(U, {
 								tabs: l,
 								label: r.tabsLabel
 							}),
 							o?.toolbarAfterFilters
 						]
 					}),
-					r && /* @__PURE__ */ w("div", {
+					r && /* @__PURE__ */ C("div", {
 						"data-slot": "data-view-filters",
 						className: "data-view--filters data-view-table--filters min-w-0",
-						children: /* @__PURE__ */ w(v, {
+						children: /* @__PURE__ */ C(_, {
 							...r.layout,
 							variant: r.layout?.variant ?? "compact",
 							showClearFilters: r.layout?.showClearFilters ?? r.activeFilters.length > 0,
@@ -384,14 +384,14 @@ function J({ data: e, columns: n, filtering: r, table: i, slots: o, className: s
 					})
 				]
 			}) : void 0,
-			topbarEnd: !!(o?.toolbarEnd || o?.topbarEnd) && /* @__PURE__ */ T("div", {
+			topbarEnd: !!(o?.toolbarEnd || o?.topbarEnd) && /* @__PURE__ */ w("div", {
 				"data-slot": "data-view-topbar-end",
 				className: "data-view--topbar-end",
 				children: [o?.toolbarEnd, o?.topbarEnd]
 			})
 		})
 	});
-	return r ? /* @__PURE__ */ w(y, {
+	return r ? /* @__PURE__ */ C(v, {
 		filters: r.filters,
 		activeFilters: r.activeFilters,
 		onFilterChange: r.onFilterChange,
@@ -401,8 +401,8 @@ function J({ data: e, columns: n, filtering: r, table: i, slots: o, className: s
 		children: h
 	}) : h;
 }
-function Y({ data: e, columns: t, filtering: n, table: r, slots: i, className: a }) {
-	return /* @__PURE__ */ w(J, {
+function J({ data: e, columns: t, filtering: n, table: r, slots: i, className: a }) {
+	return /* @__PURE__ */ C(q, {
 		data: e,
 		columns: t,
 		filtering: n,
@@ -411,39 +411,39 @@ function Y({ data: e, columns: t, filtering: n, table: r, slots: i, className: a
 		className: a
 	});
 }
-function X({ page: i, pageCount: a, total: o, onPageChange: l, disabled: u = !1, className: d, strings: f }) {
-	let p = e(A, f), m = i > 1, h = a === void 0 || i < a, g = a ? `${p.page} ${i} / ${a}` : `${p.page} ${i}`, _ = !!l && !u;
-	return /* @__PURE__ */ T("nav", {
+function Y({ page: i, pageCount: a, total: c, onPageChange: l, disabled: u = !1, className: d, strings: f }) {
+	let p = e(k, f), m = i > 1, h = a === void 0 || i < a, g = a ? `${p.page} ${i} / ${a}` : `${p.page} ${i}`, _ = !!l && !u;
+	return /* @__PURE__ */ w("nav", {
 		"data-component": "data-view-pagination",
 		"data-slot": "data-view-pagination",
 		className: t("data-view-pagination--component flex min-w-0 flex-col gap-space-md @md/data-view:flex-row @md/data-view:justify-between", d),
 		"aria-label": p.page,
-		children: [/* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ C("div", {
 			"data-slot": "data-view-pagination-summary",
 			className: "data-view-pagination--summary min-w-0",
-			children: o != null && /* @__PURE__ */ w(r, {
+			children: c != null && /* @__PURE__ */ C(r, {
 				size: "xs",
 				type: "secondary",
-				children: o
+				children: c
 			})
-		}), /* @__PURE__ */ T("div", {
+		}), /* @__PURE__ */ w("div", {
 			"data-slot": "data-view-pagination-controls",
 			className: "data-view-pagination--controls flex shrink-0 items-center gap-space-md",
 			children: [
-				/* @__PURE__ */ T(s, {
+				/* @__PURE__ */ w(o, {
 					size: "xs",
 					className: "tabular-nums",
 					"aria-label": g,
 					children: [
 						p.page,
 						" ",
-						/* @__PURE__ */ w(c, {
+						/* @__PURE__ */ C(s, {
 							value: i,
 							size: "xs",
 							align: "left",
 							type: "secondary"
 						}),
-						a ? /* @__PURE__ */ T(C, { children: [" / ", /* @__PURE__ */ w(c, {
+						a ? /* @__PURE__ */ w(S, { children: [" / ", /* @__PURE__ */ C(s, {
 							value: a,
 							size: "xs",
 							align: "left",
@@ -451,7 +451,7 @@ function X({ page: i, pageCount: a, total: o, onPageChange: l, disabled: u = !1,
 						})] }) : null
 					]
 				}),
-				/* @__PURE__ */ w(n, {
+				/* @__PURE__ */ C(n, {
 					size: "sm",
 					type: "button",
 					tone: "secondary",
@@ -460,7 +460,7 @@ function X({ page: i, pageCount: a, total: o, onPageChange: l, disabled: u = !1,
 					onClick: () => l?.(i - 1),
 					children: p.previous
 				}),
-				/* @__PURE__ */ w(n, {
+				/* @__PURE__ */ C(n, {
 					size: "sm",
 					type: "button",
 					tone: "secondary",
@@ -473,8 +473,8 @@ function X({ page: i, pageCount: a, total: o, onPageChange: l, disabled: u = !1,
 		})]
 	});
 }
-function Z({ views: e, value: n, onValueChange: i, className: a }) {
-	return /* @__PURE__ */ w(d, {
+function X({ views: e, value: n, onValueChange: i, className: a }) {
+	return /* @__PURE__ */ C(u, {
 		"data-component": "saved-view-tabs",
 		"data-slot": "saved-view-tabs",
 		className: t("saved-view-tabs--component rounded-radius bg-muted p-space-xs", a),
@@ -482,29 +482,29 @@ function Z({ views: e, value: n, onValueChange: i, className: a }) {
 		onValueChange: (e) => {
 			typeof e == "string" && i(e);
 		},
-		children: /* @__PURE__ */ w(u, {
+		children: /* @__PURE__ */ C(l, {
+			variant: "chips",
 			role: "group",
 			"aria-orientation": void 0,
 			activateOnFocus: !0,
-			className: "h-auto! flex-wrap justify-start gap-space-xs bg-transparent p-0",
 			children: e.map((e) => {
-				let i = e.id === n;
-				return /* @__PURE__ */ T(l, {
+				let t = e.id === n;
+				return /* @__PURE__ */ w(c, {
 					"data-slot": "saved-view-tab",
 					type: "button",
 					role: "button",
 					value: e.id,
 					"aria-selected": void 0,
 					"aria-controls": void 0,
-					"aria-pressed": i,
+					"aria-pressed": t,
 					disabled: e.disabled,
-					className: t("saved-view-tabs--tab h-action-sm flex-none gap-space-xs rounded-inner px-control-sm py-0 after:hidden data-active:bg-accent data-active:text-accent-foreground data-active:hover:bg-accent data-active:hover:text-accent-foreground", o.toggleHover),
-					children: [/* @__PURE__ */ w(r, {
+					className: "saved-view-tabs--tab gap-space-xs",
+					children: [/* @__PURE__ */ C(r, {
 						tag: "span",
 						size: "inherit",
 						className: "truncate text-current",
 						children: e.label
-					}), e.count !== void 0 && e.count !== null && /* @__PURE__ */ w(r, {
+					}), e.count !== void 0 && e.count !== null && /* @__PURE__ */ C(r, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
@@ -517,6 +517,6 @@ function Z({ views: e, value: n, onValueChange: i, className: a }) {
 	});
 }
 //#endregion
-export { Y as DataView, X as DataViewPagination, G as DataViewShell, q as DataViewTableFrame, K as DataViewToolbar, Z as SavedViewTabs, j as defaultDataViewFilterTabsLabel, A as defaultDataViewPaginationStrings, H as useDataView };
+export { J as DataView, Y as DataViewPagination, W as DataViewShell, K as DataViewTableFrame, G as DataViewToolbar, X as SavedViewTabs, A as defaultDataViewFilterTabsLabel, k as defaultDataViewPaginationStrings, V as useDataView };
 
 //# sourceMappingURL=data-view.js.map