@noxickon/onyx 6.6.0 → 6.7.1

package/dist/components/DataTable/DataTable.styles.d.ts

@@ -1,10 +1,21 @@
 import { VariantProps } from '../../internal/tv';
 export declare const dataTableVariants: import('tailwind-variants').TVReturnType<{
     density: {
-        comfortable: {};
+        comfortable: {
+            groupCell: "py-2.75";
+        };
         compact: {
             toolbar: string;
+            groupCell: "py-1.5";
+        };
+    };
+    stickyHeader: {
+        true: {
+            frozenHead: string;
+            scrollScrollbar: string;
+            groupCell: string;
         };
+        false: {};
     };
     sortActive: {
         true: {
@@ -36,6 +47,8 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     filterChipsRow: string;
     selectionActions: string;
     scroll: string;
+    scrollViewport: string;
+    scrollScrollbar: string;
     selectCol: string;
     frozenHead: string;
     frozenCell: string[];
@@ -52,6 +65,9 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     footer: string;
     spinner: string;
     empty: string;
+    groupRow: string;
+    groupCell: string[];
+    virtualSpacerCell: string;
     configPanel: string;
     configTitle: string;
     configList: string;
@@ -67,10 +83,21 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     skeletonBody: string;
 }, undefined, {
     density: {
-        comfortable: {};
+        comfortable: {
+            groupCell: "py-2.75";
+        };
         compact: {
             toolbar: string;
+            groupCell: "py-1.5";
+        };
+    };
+    stickyHeader: {
+        true: {
+            frozenHead: string;
+            scrollScrollbar: string;
+            groupCell: string;
         };
+        false: {};
     };
     sortActive: {
         true: {
@@ -102,6 +129,8 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     filterChipsRow: string;
     selectionActions: string;
     scroll: string;
+    scrollViewport: string;
+    scrollScrollbar: string;
     selectCol: string;
     frozenHead: string;
     frozenCell: string[];
@@ -118,6 +147,9 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     footer: string;
     spinner: string;
     empty: string;
+    groupRow: string;
+    groupCell: string[];
+    virtualSpacerCell: string;
     configPanel: string;
     configTitle: string;
     configList: string;
@@ -131,12 +163,23 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     skeleton: string;
     skeletonToolbar: string;
     skeletonBody: string;
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     density: {
-        comfortable: {};
+        comfortable: {
+            groupCell: "py-2.75";
+        };
         compact: {
             toolbar: string;
+            groupCell: "py-1.5";
+        };
+    };
+    stickyHeader: {
+        true: {
+            frozenHead: string;
+            scrollScrollbar: string;
+            groupCell: string;
         };
+        false: {};
     };
     sortActive: {
         true: {
@@ -168,6 +211,8 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     filterChipsRow: string;
     selectionActions: string;
     scroll: string;
+    scrollViewport: string;
+    scrollScrollbar: string;
     selectCol: string;
     frozenHead: string;
     frozenCell: string[];
@@ -184,6 +229,9 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     footer: string;
     spinner: string;
     empty: string;
+    groupRow: string;
+    groupCell: string[];
+    virtualSpacerCell: string;
     configPanel: string;
     configTitle: string;
     configList: string;
@@ -197,5 +245,5 @@ export declare const dataTableVariants: import('tailwind-variants').TVReturnType
     skeleton: string;
     skeletonToolbar: string;
     skeletonBody: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type DataTableVariants = VariantProps<typeof dataTableVariants>;

package/dist/components/DataTable/DataTable.styles.js

@@ -1,6 +1,7 @@
 import { tv as e } from "../../internal/tv.js";
+import { tableCellBase as t, tableCellPadding as n } from "../../internal/styles/tableCellStyles.js";
 //#region src/components/DataTable/DataTable.styles.ts
-var t = e({
+var r = e({
 	slots: {
 		root: "relative flex w-full flex-col overflow-hidden rounded-card border border-line bg-card shadow-[var(--shadow-card)]",
 		toolbar: "flex min-h-13 items-center justify-between gap-3 border-b border-line px-3 py-2.25 pointer-coarse:flex-col pointer-coarse:items-stretch pointer-coarse:gap-2.5",
@@ -15,11 +16,13 @@ var t = e({
 		collapseClip: "overflow-hidden",
 		filterChipsRow: "flex min-h-[calc(var(--control-h-md)+1.25rem+1px)] flex-wrap items-center gap-2 border-b border-line px-3.5 py-2.5",
 		selectionActions: "flex min-w-0 items-center gap-3",
-		scroll: "relative w-full overflow-auto [-webkit-overflow-scrolling:touch]",
+		scroll: "relative w-full",
+		scrollViewport: "max-h-(--ox-data-table-max-h) [-webkit-overflow-scrolling:touch]",
+		scrollScrollbar: "",
 		selectCol: "pointer-coarse:w-11",
-		frozenHead: "pointer-coarse:sticky pointer-coarse:left-(--ox-frozen-left) pointer-coarse:z-30 pointer-coarse:bg-card",
+		frozenHead: "pointer-coarse:sticky pointer-coarse:left-(--ox-frozen-left) pointer-coarse:z-(--z-table-frozen-header) pointer-coarse:bg-card",
 		frozenCell: [
-			"pointer-coarse:sticky pointer-coarse:left-(--ox-frozen-left) pointer-coarse:z-10 pointer-coarse:bg-card",
+			"pointer-coarse:sticky pointer-coarse:left-(--ox-frozen-left) pointer-coarse:z-(--z-table-frozen-cell) pointer-coarse:bg-card",
 			"pointer-coarse:group-hover/row:bg-surface-raised",
 			"pointer-coarse:group-data-selected/row:bg-[color-mix(in_oklab,var(--color-primary-500)_16%,var(--card))]"
 		],
@@ -45,6 +48,9 @@ var t = e({
 		footer: "flex items-center justify-center gap-2 border-t border-line py-2.5 text-xs text-fg-subtle",
 		spinner: "size-3.5 animate-spin rounded-full border-2 border-line border-t-primary",
 		empty: "px-6 py-12 text-center text-body text-fg-subtle pointer-coarse:px-6 pointer-coarse:py-12",
+		groupRow: "[&>th]:border-t [&>th]:border-line first:[&>th]:border-t-0",
+		groupCell: [t, "bg-sunken text-left text-xs font-semibold tracking-[0.01em] whitespace-nowrap text-fg-muted"],
+		virtualSpacerCell: "border-0 p-0",
 		configPanel: "flex w-64 flex-col",
 		configTitle: "px-2 pt-1.5 pb-2 text-body font-semibold text-fg",
 		configList: "flex flex-col gap-0.5 py-1",
@@ -61,8 +67,19 @@ var t = e({
 	},
 	variants: {
 		density: {
-			comfortable: {},
-			compact: { toolbar: "min-h-12 py-2" }
+			comfortable: { groupCell: n.comfortable },
+			compact: {
+				toolbar: "min-h-12 py-2",
+				groupCell: n.compact
+			}
+		},
+		stickyHeader: {
+			true: {
+				frozenHead: "pointer-coarse:z-(--z-table-frozen-corner)",
+				scrollScrollbar: "data-[orientation=vertical]:pt-[calc(var(--ox-data-table-head-h,0px)+2px)]",
+				groupCell: "sticky top-[var(--ox-data-table-head-h,0px)] z-(--z-table-group-header)"
+			},
+			false: {}
 		},
 		sortActive: {
 			true: {
@@ -84,4 +101,4 @@ var t = e({
 	}
 });
 //#endregion
-export { t as dataTableVariants };
+export { r as dataTableVariants };

package/dist/components/DataTable/DataTable.types.d.ts

@@ -3,7 +3,7 @@ import { DataTableVariants } from './DataTable.styles';
 type DataTableDensity = NonNullable<DataTableVariants['density']>;
 type DataTableAlign = 'start' | 'center' | 'end';
 type SortDirection = 'asc' | 'desc';
-type DataTablePaginationMode = 'pages' | 'infinite';
+type DataTablePaginationMode = 'pages' | 'infinite' | 'virtual';
 type DataTablePaginationLayout = 'end' | 'center' | 'split';
 type ColumnAccessor<TRow> = keyof TRow | ((row: TRow) => unknown);
 interface OxDataTableColumn<TRow> {
@@ -39,6 +39,12 @@ interface OxDataTableProps<TRow> {
     data: TRow[];
     defaultColumnOrder?: string[];
     defaultColumnVisibility?: Record<string, boolean>;
+    /**
+     * Uncontrolled initial value — read on the first render only. Later changes to
+     * this prop are ignored, so passing a value that updates over time silently
+     * does nothing. Use `expandedRows` together with `onExpandedChange` to drive
+     * the expanded set from outside.
+     */
     defaultExpandedRows?: Set<string>;
     defaultFrozenColumns?: string[];
     defaultPage?: number;
@@ -47,8 +53,11 @@ interface OxDataTableProps<TRow> {
     density?: DataTableDensity;
     emptyState?: ReactNode;
     endReachedThreshold?: number;
+    estimateSize?: (index: number) => number;
+    expandedRows?: Set<string>;
     frozenColumns?: string[];
     getRowCanExpand?: (row: TRow) => boolean;
+    getRowGroupId?: (row: TRow) => string;
     getRowId: (row: TRow) => string;
     hover?: boolean;
     loading?: boolean;
@@ -56,14 +65,17 @@ interface OxDataTableProps<TRow> {
     onColumnOrderChange?: (ids: string[]) => void;
     onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
     onEndReached?: () => void;
+    onExpandedChange?: (ids: Set<string>) => void;
     onFrozenColumnsChange?: (ids: string[]) => void;
     onPageChange?: (page: number) => void;
     onSelectionChange?: (ids: Set<string>) => void;
     onSortChange?: (columnId: string, direction: SortDirection | null) => void;
+    overscan?: number;
     page?: number;
     pageSize?: number;
     paginationMode?: DataTablePaginationMode;
     renderExpandedRow?: (row: TRow) => ReactNode;
+    renderGroupHeader?: (groupId: string, rows: TRow[]) => ReactNode;
     rowCount?: number;
     selectable?: boolean;
     selectedRows?: Set<string>;

package/dist/components/DataTable/DataTable.utils.js

@@ -2,7 +2,7 @@ import { arrayMove as e } from "@dnd-kit/sortable";
 //#region src/components/DataTable/DataTable.utils.ts
 var t = (e, t) => {
 	let n = new Set(e.map((e) => e.id)), r = /* @__PURE__ */ new Set(), i = [];
-	for (let e of t) n.has(e) && !r.has(e) && (i.push(e), r.add(e));
+	for (let e of t) !n.has(e) || r.has(e) || (i.push(e), r.add(e));
 	for (let t of e) r.has(t.id) || i.push(t.id);
 	return i;
 }, n = (t, n, r) => {

package/dist/components/DescriptionList/DescriptionList.js

@@ -8,7 +8,7 @@ var { Provider: a, useRequiredContext: o } = e("OxDescriptionList");
 function s(e) {
 	let o = n(30), s, c, l, u, d, f;
 	o[0] === e ? (s = o[1], c = o[2], l = o[3], u = o[4], d = o[5], f = o[6]) : ({className: s, density: u, layout: d, render: l, striped: f, ...c} = e, o[0] = e, o[1] = s, o[2] = c, o[3] = l, o[4] = u, o[5] = d, o[6] = f);
-	let p = u === void 0 ? "comfortable" : u, m = d === void 0 ? "rows" : d, h = f === void 0 ? !1 : f, g;
+	let p = u === void 0 ? "comfortable" : u, m = d === void 0 ? "rows" : d, h = f !== void 0 && f, g;
 	o[7] === l ? g = o[8] : (g = l ?? /* @__PURE__ */ r("dl", {}), o[7] = l, o[8] = g);
 	let _;
 	o[9] !== s || o[10] !== p || o[11] !== m || o[12] !== h ? (_ = t({

package/dist/components/DescriptionList/DescriptionList.styles.d.ts

@@ -21,12 +21,12 @@ export declare const descriptionListVariants: import('tailwind-variants').TVRetu
         };
     };
     density: {
-        comfortable: string;
-        compact: string;
+        comfortable: "";
+        compact: "";
     };
     striped: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
 }, {
     root: string;
@@ -55,19 +55,19 @@ export declare const descriptionListVariants: import('tailwind-variants').TVRetu
         };
     };
     density: {
-        comfortable: string;
-        compact: string;
+        comfortable: "";
+        compact: "";
     };
     striped: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
 }, {
     root: string;
     item: string;
     term: string;
     description: string;
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     layout: {
         rows: {
             root: string;
@@ -89,17 +89,17 @@ export declare const descriptionListVariants: import('tailwind-variants').TVRetu
         };
     };
     density: {
-        comfortable: string;
-        compact: string;
+        comfortable: "";
+        compact: "";
     };
     striped: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
 }, {
     root: string;
     item: string;
     term: string;
     description: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type DescriptionListVariants = VariantProps<typeof descriptionListVariants>;

package/dist/components/Dialog/Dialog.js

@@ -9,7 +9,7 @@ var c = t();
 function l(e) {
 	let t = n(6), r, i;
 	t[0] === e ? (r = t[1], i = t[2]) : ({modal: i, ...r} = e, t[0] = e, t[1] = r, t[2] = i);
-	let o = i === void 0 ? !0 : i, c;
+	let o = i === void 0 || i, c;
 	return t[3] !== o || t[4] !== r ? (c = /* @__PURE__ */ a(s.Root, {
 		modal: o,
 		...r

package/dist/components/Dialog/Dialog.styles.d.ts

@@ -37,7 +37,7 @@ export declare const dialogVariants: import('tailwind-variants').TVReturnType<{
     title: string;
     description: string;
     close: string;
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     scroll: {
         readonly outside: {
             readonly viewport: "items-start overflow-y-auto p-4";
@@ -56,5 +56,5 @@ export declare const dialogVariants: import('tailwind-variants').TVReturnType<{
     title: string;
     description: string;
     close: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type DialogVariants = VariantProps<typeof dialogVariants>;

package/dist/components/Drawer/Drawer.styles.d.ts

@@ -97,7 +97,7 @@ export declare const drawerVariants: import('tailwind-variants').TVReturnType<{
     title: string;
     description: string;
     close: string;
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     side: {
         left: {
             popup: string;
@@ -146,5 +146,5 @@ export declare const drawerVariants: import('tailwind-variants').TVReturnType<{
     title: string;
     description: string;
     close: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type DrawerVariants = VariantProps<typeof drawerVariants>;

package/dist/components/Drawer/Drawer.styles.js

@@ -4,12 +4,12 @@ var t = e({
 	slots: {
 		trigger: "",
 		backdrop: [
-			"fixed inset-0 z-[var(--z-drawer)] bg-scrim backdrop-blur-xs",
+			"fixed inset-0 z-(--z-drawer) bg-scrim backdrop-blur-xs",
 			"transition-[opacity,backdrop-filter] duration-500 ease-ios motion-reduce:transition-[opacity]",
 			"ox-starting:opacity-0 ox-starting:backdrop-blur-[0px]",
 			"ox-ending:opacity-0 ox-ending:backdrop-blur-[0px]"
 		],
-		viewport: "pointer-events-none fixed inset-0 z-[var(--z-drawer)]",
+		viewport: "pointer-events-none fixed inset-0 z-(--z-drawer)",
 		popup: [
 			"group/drawer pointer-events-auto absolute flex flex-col overflow-hidden",
 			"touch-none select-none",

package/dist/components/Drawer/Drawer2.js

@@ -17,7 +17,7 @@ var { Provider: d, useRequiredContext: f } = e("OxDrawer"), p = {
 function h(e) {
 	let t = r(14), n, i, a;
 	t[0] === e ? (n = t[1], i = t[2], a = t[3]) : ({modal: i, side: a, ...n} = e, t[0] = e, t[1] = n, t[2] = i, t[3] = a);
-	let o = i === void 0 ? !0 : i, c = a === void 0 ? "right" : a, l;
+	let o = i === void 0 || i, c = a === void 0 ? "right" : a, l;
 	t[4] !== o || t[5] !== c ? (l = {
 		modal: o,
 		side: c
@@ -51,7 +51,7 @@ function g(e) {
 function _(e) {
 	let i = r(28), a, l, d, p, m, h, g, _;
 	i[0] === e ? (a = i[1], l = i[2], d = i[3], p = i[4], m = i[5], h = i[6], g = i[7], _ = i[8]) : ({backdropClassName: a, children: l, className: d, contained: h, container: p, forceBackdrop: g, viewportClassName: _, ...m} = e, i[0] = e, i[1] = a, i[2] = l, i[3] = d, i[4] = p, i[5] = m, i[6] = h, i[7] = g, i[8] = _);
-	let v = h === void 0 ? !1 : h, y = g === void 0 ? !1 : g, { modal: b, side: x } = f(), S = n({
+	let v = h !== void 0 && h, y = g !== void 0 && g, { modal: b, side: x } = f(), S = n({
 		side: x,
 		contained: v
 	}), [C, w] = o(null), T = u, E = p ?? void 0, D = (b === !0 || y) && /* @__PURE__ */ s(u.Backdrop, {
@@ -171,7 +171,7 @@ function S(e) {
 function C(e) {
 	let t = r(26), i, a, o, c, u;
 	t[0] === e ? (i = t[1], a = t[2], o = t[3], c = t[4], u = t[5]) : ({children: i, className: a, render: c, sticky: u, ...o} = e, t[0] = e, t[1] = i, t[2] = a, t[3] = o, t[4] = c, t[5] = u);
-	let d = u === void 0 ? !1 : u, { side: p } = f(), m, h, g, _, v;
+	let d = u !== void 0 && u, { side: p } = f(), m, h, g, _, v;
 	if (t[6] !== a || t[7] !== o || t[8] !== c || t[9] !== p || t[10] !== d) {
 		let e = n({
 			side: p,
@@ -209,7 +209,7 @@ function w(e) {
 function T(e) {
 	let t = r(26), i, a, o, c, u;
 	t[0] === e ? (i = t[1], a = t[2], o = t[3], c = t[4], u = t[5]) : ({children: i, className: a, render: c, sticky: u, ...o} = e, t[0] = e, t[1] = i, t[2] = a, t[3] = o, t[4] = c, t[5] = u);
-	let d = u === void 0 ? !1 : u, { side: p } = f(), m, h, g, _, v;
+	let d = u !== void 0 && u, { side: p } = f(), m, h, g, _, v;
 	if (t[6] !== a || t[7] !== o || t[8] !== c || t[9] !== p || t[10] !== d) {
 		let e = n({
 			side: p,

package/dist/components/Dropdown/Dropdown.js

@@ -235,7 +235,7 @@ function M(e) {
 	let u = l === void 0 ? "default" : l, d = y(), h, g, _, v, b, x, S, C;
 	if (t[6] !== n || t[7] !== a || t[8] !== d || t[9] !== o || t[10] !== c || t[11] !== u) {
 		let e = r({ variant: u });
-		g = m.SubmenuTrigger, v = c, b = e.item({ class: a }), x = "dropdown-sub-trigger", S = o ?? (d ? !1 : void 0), C = n, h = s, _ = e.subTriggerChevron(), t[6] = n, t[7] = a, t[8] = d, t[9] = o, t[10] = c, t[11] = u, t[12] = h, t[13] = g, t[14] = _, t[15] = v, t[16] = b, t[17] = x, t[18] = S, t[19] = C;
+		g = m.SubmenuTrigger, v = c, b = e.item({ class: a }), x = "dropdown-sub-trigger", S = o ?? (!d && void 0), C = n, h = s, _ = e.subTriggerChevron(), t[6] = n, t[7] = a, t[8] = d, t[9] = o, t[10] = c, t[11] = u, t[12] = h, t[13] = g, t[14] = _, t[15] = v, t[16] = b, t[17] = x, t[18] = S, t[19] = C;
 	} else h = t[12], g = t[13], _ = t[14], v = t[15], b = t[16], x = t[17], S = t[18], C = t[19];
 	let w;
 	t[20] !== h || t[21] !== _ ? (w = /* @__PURE__ */ f(h, {

package/dist/components/Dropdown/Dropdown.styles.d.ts

@@ -57,7 +57,7 @@ export declare const dropdownVariants: import('tailwind-variants').TVReturnType<
     groupLabel: string[];
     separator: string;
     bar: string[];
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     variant: {
         default: {};
         danger: {
@@ -86,5 +86,5 @@ export declare const dropdownVariants: import('tailwind-variants').TVReturnType<
     groupLabel: string[];
     separator: string;
     bar: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type DropdownVariants = VariantProps<typeof dropdownVariants>;

package/dist/components/Field/Field.styles.d.ts

@@ -1,27 +1,27 @@
 export declare const fieldVariants: import('tailwind-variants').TVReturnType<{
     [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            item?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            description?: import('tailwind-merge').ClassNameValue;
-            required?: import('tailwind-merge').ClassNameValue;
-            errorIcon?: import('tailwind-merge').ClassNameValue;
-            error?: import('tailwind-merge').ClassNameValue;
-            counter?: import('tailwind-merge').ClassNameValue;
+        [key: string]: import('tailwind-variants').ClassValue | {
+            root?: import('tailwind-variants').ClassValue;
+            item?: import('tailwind-variants').ClassValue;
+            label?: import('tailwind-variants').ClassValue;
+            description?: import('tailwind-variants').ClassValue;
+            required?: import('tailwind-variants').ClassValue;
+            errorIcon?: import('tailwind-variants').ClassValue;
+            error?: import('tailwind-variants').ClassValue;
+            counter?: import('tailwind-variants').ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            item?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            description?: import('tailwind-merge').ClassNameValue;
-            required?: import('tailwind-merge').ClassNameValue;
-            errorIcon?: import('tailwind-merge').ClassNameValue;
-            error?: import('tailwind-merge').ClassNameValue;
-            counter?: import('tailwind-merge').ClassNameValue;
+        [x: string]: import('tailwind-variants').ClassValue | {
+            root?: import('tailwind-variants').ClassValue;
+            item?: import('tailwind-variants').ClassValue;
+            label?: import('tailwind-variants').ClassValue;
+            description?: import('tailwind-variants').ClassValue;
+            required?: import('tailwind-variants').ClassValue;
+            errorIcon?: import('tailwind-variants').ClassValue;
+            error?: import('tailwind-variants').ClassValue;
+            counter?: import('tailwind-variants').ClassValue;
         };
     };
 } | {}, {
@@ -35,15 +35,15 @@ export declare const fieldVariants: import('tailwind-variants').TVReturnType<{
     counter: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            item?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            description?: import('tailwind-merge').ClassNameValue;
-            required?: import('tailwind-merge').ClassNameValue;
-            errorIcon?: import('tailwind-merge').ClassNameValue;
-            error?: import('tailwind-merge').ClassNameValue;
-            counter?: import('tailwind-merge').ClassNameValue;
+        [key: string]: import('tailwind-variants').ClassValue | {
+            root?: import('tailwind-variants').ClassValue;
+            item?: import('tailwind-variants').ClassValue;
+            label?: import('tailwind-variants').ClassValue;
+            description?: import('tailwind-variants').ClassValue;
+            required?: import('tailwind-variants').ClassValue;
+            errorIcon?: import('tailwind-variants').ClassValue;
+            error?: import('tailwind-variants').ClassValue;
+            counter?: import('tailwind-variants').ClassValue;
         };
     };
 } | {}, {
@@ -55,7 +55,7 @@ export declare const fieldVariants: import('tailwind-variants').TVReturnType<{
     errorIcon: string;
     required: string;
     counter: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnTypeLike<unknown, {
     root: string[];
     item: string[];
     label: string[];
@@ -64,4 +64,4 @@ export declare const fieldVariants: import('tailwind-variants').TVReturnType<{
     errorIcon: string;
     required: string;
     counter: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/Fieldset/Fieldset.styles.d.ts

@@ -1,15 +1,15 @@
 export declare const fieldsetVariants: import('tailwind-variants').TVReturnType<{
     [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            legend?: import('tailwind-merge').ClassNameValue;
+        [key: string]: import('tailwind-variants').ClassValue | {
+            root?: import('tailwind-variants').ClassValue;
+            legend?: import('tailwind-variants').ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            legend?: import('tailwind-merge').ClassNameValue;
+        [x: string]: import('tailwind-variants').ClassValue | {
+            root?: import('tailwind-variants').ClassValue;
+            legend?: import('tailwind-variants').ClassValue;
         };
     };
 } | {}, {
@@ -17,15 +17,15 @@ export declare const fieldsetVariants: import('tailwind-variants').TVReturnType<
     legend: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            legend?: import('tailwind-merge').ClassNameValue;
+        [key: string]: import('tailwind-variants').ClassValue | {
+            root?: import('tailwind-variants').ClassValue;
+            legend?: import('tailwind-variants').ClassValue;
         };
     };
 } | {}, {
     root: string[];
     legend: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnTypeLike<unknown, {
     root: string[];
     legend: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/Footer/Footer.js

@@ -8,7 +8,7 @@ var { Provider: a, useRequiredContext: o } = e("OxFooter");
 function s(e) {
 	let o = n(29), s, c, l, u, d;
 	o[0] === e ? (s = o[1], c = o[2], l = o[3], u = o[4], d = o[5]) : ({bordered: d, children: s, className: c, render: u, ...l} = e, o[0] = e, o[1] = s, o[2] = c, o[3] = l, o[4] = u, o[5] = d);
-	let f = d === void 0 ? !0 : d, p, m, h, g, _;
+	let f = d === void 0 || d, p, m, h, g, _;
 	o[6] !== f || o[7] !== c || o[8] !== l || o[9] !== u ? (p = t({ bordered: f }), _ = i, o[15] === u ? g = o[16] : (g = u ?? /* @__PURE__ */ r("footer", {}), o[15] = u, o[16] = g), m = l, h = p.root({ class: c }), o[6] = f, o[7] = c, o[8] = l, o[9] = u, o[10] = p, o[11] = m, o[12] = h, o[13] = g, o[14] = _) : (p = o[10], m = o[11], h = o[12], g = o[13], _ = o[14]);
 	let v;
 	o[17] !== s || o[18] !== m || o[19] !== h ? (v = {

package/dist/components/Footer/Footer.styles.d.ts

@@ -43,7 +43,7 @@ export declare const footerVariants: import('tailwind-variants').TVReturnType<{
     bottom: string[];
     copyright: string;
     legal: string[];
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     bordered: {
         true: {
             root: string;
@@ -65,5 +65,5 @@ export declare const footerVariants: import('tailwind-variants').TVReturnType<{
     bottom: string[];
     copyright: string;
     legal: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type FooterVariants = VariantProps<typeof footerVariants>;

package/dist/components/Header/Header.js

@@ -8,7 +8,7 @@ var { Provider: a, useRequiredContext: o } = e("OxHeader");
 function s(e) {
 	let o = n(36), s, c, l, u, d, f, p;
 	o[0] === e ? (s = o[1], c = o[2], l = o[3], u = o[4], d = o[5], f = o[6], p = o[7]) : ({bordered: d, children: s, className: c, render: u, sticky: f, variant: p, ...l} = e, o[0] = e, o[1] = s, o[2] = c, o[3] = l, o[4] = u, o[5] = d, o[6] = f, o[7] = p);
-	let m = d === void 0 ? !0 : d, h = f === void 0 ? !1 : f, g = p === void 0 ? "solid" : p, _, v, y, b, x;
+	let m = d === void 0 || d, h = f !== void 0 && f, g = p === void 0 ? "solid" : p, _, v, y, b, x;
 	o[8] !== m || o[9] !== c || o[10] !== l || o[11] !== u || o[12] !== g ? (_ = t({
 		variant: g,
 		bordered: m

package/dist/components/Header/Header.styles.d.ts

@@ -49,7 +49,7 @@ export declare const headerVariants: import('tailwind-variants').TVReturnType<{
     brandSubtitle: string;
     content: string;
     actions: string;
-}, import('tailwind-variants').TVReturnType<{
+}, import('tailwind-variants').TVReturnTypeLike<{
     variant: {
         solid: {
             root: string;
@@ -74,5 +74,5 @@ export declare const headerVariants: import('tailwind-variants').TVReturnType<{
     brandSubtitle: string;
     content: string;
     actions: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type HeaderVariants = VariantProps<typeof headerVariants>;

package/dist/components/Header/Header.styles.js

@@ -6,7 +6,7 @@ var t = e({
 			"flex items-center justify-between gap-3.5 w-full",
 			"h-14 px-6 ox-console:h-13 ox-console:px-5",
 			"transition-colors",
-			"data-[sticky]:sticky data-[sticky]:top-0 data-[sticky]:z-[var(--z-sticky)]"
+			"data-[sticky]:sticky data-[sticky]:top-0 data-[sticky]:z-(--z-sticky)"
 		],
 		brand: "flex items-center gap-2.5 text-base font-semibold tracking-tight text-fg",
 		brandMark: [