@noxickon/onyx 6.2.0 → 6.4.0

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

@@ -25,7 +25,7 @@ var t = e({
 		],
 		headSortIcon: "size-3.5 shrink-0 transition-colors",
 		headMenuTrigger: [
-			"inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-fg-subtle",
+			"inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-fg-subtle cursor-pointer",
 			"opacity-0 transition-[opacity,color,background-color] group-hover/head:opacity-100",
 			"hover:bg-fg/10 hover:text-fg data-[popup-open]:bg-fg/10 data-[popup-open]:opacity-100",
 			"focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-ink"
@@ -41,7 +41,7 @@ var t = e({
 		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",
-		configItem: "flex items-center gap-2.5 rounded-control px-2 py-1.5 hover:bg-fg/8",
+		configItem: "flex items-center gap-2.5 rounded-control px-2 py-1.5 ox-interactive:hover:bg-fg/8",
 		configHandle: "shrink-0 cursor-grab text-fg-subtle active:cursor-grabbing",
 		configHandleLocked: "shrink-0 text-fg-subtle opacity-30",
 		configLabel: "flex-1 truncate text-body",

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

@@ -17,6 +17,7 @@ interface OxDataTableColumn<TRow> {
     locked?: boolean;
     minWidth?: number | string;
     sortable?: boolean;
+    system?: boolean;
     width?: number | string;
 }
 interface OxDataTableSortState {

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

@@ -1,6 +1,6 @@
 import { OxDialogCloseProps, OxDialogContentProps, OxDialogDescriptionProps, OxDialogProps, OxDialogTitleProps, OxDialogTriggerProps } from './Dialog.types';
-declare function OxDialogRoot({ modal, ...props }: OxDialogProps): import("react").JSX.Element;
-declare function OxDialogTrigger({ children, className, ...props }: OxDialogTriggerProps): import("react").JSX.Element;
+declare function OxDialogRoot<Payload = unknown>({ modal, ...props }: OxDialogProps<Payload>): import("react").JSX.Element;
+declare function OxDialogTrigger<Payload = unknown>({ children, className, ...props }: OxDialogTriggerProps<Payload>): import("react").JSX.Element;
 declare function OxDialogContent({ children, className, scroll, ...props }: OxDialogContentProps): import("react").JSX.Element;
 declare function OxDialogTitle({ children, className, ...props }: OxDialogTitleProps): import("react").JSX.Element;
 declare function OxDialogDescription({ children, className, ...props }: OxDialogDescriptionProps): import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Dialog as BaseDialog, DialogCloseProps as BaseDialogCloseProps, DialogDescriptionProps as BaseDialogDescriptionProps, DialogPopupProps as BaseDialogPopupProps, DialogRootProps as BaseDialogRootProps, DialogTitleProps as BaseDialogTitleProps, DialogTriggerProps as BaseDialogTriggerProps } from '@base-ui/react/dialog';
 import { DialogVariants } from './Dialog.styles';
-type DialogHandle = ReturnType<typeof BaseDialog.createHandle>;
+type DialogHandle<Payload = unknown> = ReturnType<typeof BaseDialog.createHandle<Payload>>;
 type OxDialogProps<Payload = unknown> = BaseDialogRootProps<Payload>;
 interface OxDialogTriggerProps<Payload = unknown> extends Omit<BaseDialogTriggerProps<Payload>, 'className'> {
     className?: string;

package/dist/components/HoldToDelete/HoldToDelete.styles.js

@@ -8,7 +8,7 @@ var t = e({ slots: {
 		"[&_svg:not([class*=size-])]:size-icon",
 		"transition-transform active:scale-97 will-change-transform",
 		"outline-danger-ink focus-visible:outline-2 focus-visible:outline-offset-2",
-		"ox-disabled:pointer-events-none ox-disabled:opacity-50 ox-disabled:active:scale-100"
+		"ox-disabled:cursor-not-allowed ox-disabled:opacity-50 ox-disabled:active:scale-100"
 	],
 	overlay: [
 		"pointer-events-none absolute inset-0",

package/dist/components/Pagination/Pagination.styles.js

@@ -38,7 +38,7 @@ var n = "h-control min-w-[var(--control-h-md)]", r = e({
 			false: {}
 		},
 		disabled: {
-			true: { link: "pointer-events-none cursor-not-allowed opacity-50" },
+			true: { link: "cursor-not-allowed opacity-50" },
 			false: {}
 		}
 	},

package/dist/components/ResponsiveOverlay/ResponsiveOverlay.d.ts

@@ -0,0 +1,9 @@
+import { OxResponsiveOverlayActionsProps, OxResponsiveOverlayBodyProps, OxResponsiveOverlayContentProps, OxResponsiveOverlayDescriptionProps, OxResponsiveOverlayProps, OxResponsiveOverlayTitleProps, OxResponsiveOverlayTriggerProps } from './ResponsiveOverlay.types';
+declare function OxResponsiveOverlayRoot({ below, children, defaultOpen, headerExtra, mobile, mobileSide, onOpenChange, open, tone, }: OxResponsiveOverlayProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayTrigger({ children, className }: OxResponsiveOverlayTriggerProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayContent({ children, className }: OxResponsiveOverlayContentProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayTitle({ children, className }: OxResponsiveOverlayTitleProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayDescription({ children, className, }: OxResponsiveOverlayDescriptionProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayBody({ children, className }: OxResponsiveOverlayBodyProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayActions({ children, className }: OxResponsiveOverlayActionsProps): import("react").JSX.Element;
+export { OxResponsiveOverlayActions, OxResponsiveOverlayBody, OxResponsiveOverlayContent, OxResponsiveOverlayDescription, OxResponsiveOverlayRoot, OxResponsiveOverlayTitle, OxResponsiveOverlayTrigger, };

package/dist/components/ResponsiveOverlay/ResponsiveOverlay.js

@@ -0,0 +1,228 @@
+import { createCompoundContext as e } from "../../internal/context/createCompoundContext/createCompoundContext.js";
+import { OxAlertDialog as t } from "../AlertDialog/index.js";
+import { OxDialog as n } from "../Dialog/index.js";
+import { OxDrawer as r } from "../Drawer/index.js";
+import { useOxBreakpointUp as i } from "../../hooks/useBreakpoint/useBreakpoint.js";
+import { responsiveOverlayVariants as a } from "./ResponsiveOverlay.styles.js";
+import { c as o } from "react/compiler-runtime";
+import { useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/ResponsiveOverlay/ResponsiveOverlay.tsx
+var { Provider: u, useRequiredContext: d } = e("OxResponsiveOverlay"), f = /* @__PURE__ */ new Set([
+	"close-press",
+	"imperative-action",
+	"none"
+]);
+function p(e, t) {
+	return e ? "drawer" : t ? "alertDialog" : "dialog";
+}
+function m(e) {
+	let a = o(36), { below: l, children: d, defaultOpen: m, headerExtra: h, mobile: g, mobileSide: _, onOpenChange: v, open: y, tone: b } = e, x = l === void 0 ? "md" : l, S = g === void 0 ? "sheet" : g, C = _ === void 0 ? "bottom" : _, w = i(x), T = y !== void 0, [E, D] = s(m ?? !1), O = T ? y : E, k = !w && S === "sheet", A;
+	a[0] !== k || a[1] !== b ? (A = p(k, b), a[0] = k, a[1] = b, a[2] = A) : A = a[2];
+	let j = A, M = !w && S === "fullscreen", N = j === "drawer" && b !== void 0, P;
+	a[3] !== T || a[4] !== N || a[5] !== v ? (P = (e, t) => {
+		!e && N && !f.has(t.reason) || (T || D(e), v?.(e, t));
+	}, a[3] = T, a[4] = N, a[5] = v, a[6] = P) : P = a[6];
+	let F = P, I;
+	a[7] !== h || a[8] !== M || a[9] !== j || a[10] !== b ? (I = {
+		fullScreen: M,
+		headerExtra: h,
+		root: j,
+		tone: b
+	}, a[7] = h, a[8] = M, a[9] = j, a[10] = b, a[11] = I) : I = a[11];
+	let L = I, R;
+	a[12] !== d || a[13] !== L ? (R = /* @__PURE__ */ c(u, {
+		value: L,
+		children: d
+	}), a[12] = d, a[13] = L, a[14] = R) : R = a[14];
+	let z = R;
+	if (j === "drawer") {
+		let e;
+		a[15] === F ? e = a[16] : (e = (e, t) => F(e, { reason: t.reason }), a[15] = F, a[16] = e);
+		let t;
+		return a[17] !== O || a[18] !== z || a[19] !== N || a[20] !== C || a[21] !== e ? (t = /* @__PURE__ */ c(r, {
+			disablePointerDismissal: N,
+			open: O,
+			side: C,
+			onOpenChange: e,
+			children: z
+		}), a[17] = O, a[18] = z, a[19] = N, a[20] = C, a[21] = e, a[22] = t) : t = a[22], t;
+	}
+	if (j === "alertDialog") {
+		let e;
+		a[23] === F ? e = a[24] : (e = (e, t) => F(e, { reason: t.reason }), a[23] = F, a[24] = e);
+		let n;
+		return a[25] !== O || a[26] !== z || a[27] !== e || a[28] !== b ? (n = /* @__PURE__ */ c(t, {
+			open: O,
+			tone: b,
+			onOpenChange: e,
+			children: z
+		}), a[25] = O, a[26] = z, a[27] = e, a[28] = b, a[29] = n) : n = a[29], n;
+	}
+	let B;
+	a[30] === F ? B = a[31] : (B = (e, t) => F(e, { reason: t.reason }), a[30] = F, a[31] = B);
+	let V;
+	return a[32] !== O || a[33] !== z || a[34] !== B ? (V = /* @__PURE__ */ c(n, {
+		open: O,
+		onOpenChange: B,
+		children: z
+	}), a[32] = O, a[33] = z, a[34] = B, a[35] = V) : V = a[35], V;
+}
+function h(e) {
+	let i = o(9), { children: a, className: s } = e, { root: l } = d();
+	if (l === "drawer") {
+		let e;
+		return i[0] !== a || i[1] !== s ? (e = /* @__PURE__ */ c(r.Trigger, {
+			className: s,
+			children: a
+		}), i[0] = a, i[1] = s, i[2] = e) : e = i[2], e;
+	}
+	if (l === "alertDialog") {
+		let e;
+		return i[3] !== a || i[4] !== s ? (e = /* @__PURE__ */ c(t.Trigger, {
+			className: s,
+			children: a
+		}), i[3] = a, i[4] = s, i[5] = e) : e = i[5], e;
+	}
+	let u;
+	return i[6] !== a || i[7] !== s ? (u = /* @__PURE__ */ c(n.Trigger, {
+		className: s,
+		children: a
+	}), i[6] = a, i[7] = s, i[8] = u) : u = i[8], u;
+}
+function g(e) {
+	let i = o(14), { children: s, className: u } = e, { fullScreen: f, root: p, tone: m } = d(), h, g, _;
+	if (i[0] !== s || i[1] !== u || i[2] !== f || i[3] !== p || i[4] !== m) {
+		_ = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let e = a({
+				fullScreen: f,
+				root: p
+			});
+			if (p === "drawer") {
+				let t;
+				i[8] === m ? t = i[9] : (t = m === void 0 && /* @__PURE__ */ c(r.Handle, {}), i[8] = m, i[9] = t), _ = /* @__PURE__ */ l(r.Content, {
+					className: e.content({ class: u }),
+					children: [t, s]
+				});
+				break bb0;
+			}
+			if (p === "alertDialog") {
+				_ = /* @__PURE__ */ c(t.Content, {
+					className: e.content({ class: u }),
+					scroll: "inside",
+					children: s
+				});
+				break bb0;
+			}
+			h = n.Content, g = e.content({ class: u });
+		}
+		i[0] = s, i[1] = u, i[2] = f, i[3] = p, i[4] = m, i[5] = h, i[6] = g, i[7] = _;
+	} else h = i[5], g = i[6], _ = i[7];
+	if (_ !== Symbol.for("react.early_return_sentinel")) return _;
+	let v;
+	return i[10] !== h || i[11] !== s || i[12] !== g ? (v = /* @__PURE__ */ c(h, {
+		className: g,
+		scroll: "inside",
+		children: s
+	}), i[10] = h, i[11] = s, i[12] = g, i[13] = v) : v = i[13], v;
+}
+function _(e, i, a) {
+	return c(e === "drawer" ? r.Title : e === "alertDialog" ? t.Title : n.Title, {
+		className: i,
+		children: a
+	});
+}
+function v(e) {
+	let t = o(13), { children: n, className: r } = e, { headerExtra: i, root: s } = d(), u, f, p, m;
+	if (t[0] !== n || t[1] !== r || t[2] !== i || t[3] !== s) {
+		let e = a();
+		u = e.header(), f = "responsive-overlay-header", p = _(s, e.title({ class: r }), n), m = i ? /* @__PURE__ */ c("div", {
+			className: e.headerExtra(),
+			"data-ox-slot": "responsive-overlay-header-extra",
+			children: i
+		}) : null, t[0] = n, t[1] = r, t[2] = i, t[3] = s, t[4] = u, t[5] = f, t[6] = p, t[7] = m;
+	} else u = t[4], f = t[5], p = t[6], m = t[7];
+	let h;
+	return t[8] !== u || t[9] !== f || t[10] !== p || t[11] !== m ? (h = /* @__PURE__ */ l("div", {
+		className: u,
+		"data-ox-slot": f,
+		children: [p, m]
+	}), t[8] = u, t[9] = f, t[10] = p, t[11] = m, t[12] = h) : h = t[12], h;
+}
+function y(e) {
+	let i = o(10), { children: s, className: l } = e, { root: u } = d(), f, p, m;
+	if (i[0] !== s || i[1] !== l || i[2] !== u) {
+		m = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let e = a();
+			if (u === "drawer") {
+				m = /* @__PURE__ */ c(r.Description, {
+					className: e.description({ class: l }),
+					children: s
+				});
+				break bb0;
+			}
+			if (u === "alertDialog") {
+				m = /* @__PURE__ */ c(t.Description, {
+					className: e.description({ class: l }),
+					children: s
+				});
+				break bb0;
+			}
+			f = n.Description, p = e.description({ class: l });
+		}
+		i[0] = s, i[1] = l, i[2] = u, i[3] = f, i[4] = p, i[5] = m;
+	} else f = i[3], p = i[4], m = i[5];
+	if (m !== Symbol.for("react.early_return_sentinel")) return m;
+	let h;
+	return i[6] !== f || i[7] !== s || i[8] !== p ? (h = /* @__PURE__ */ c(f, {
+		className: p,
+		children: s
+	}), i[6] = f, i[7] = s, i[8] = p, i[9] = h) : h = i[9], h;
+}
+function b(e) {
+	let t = o(8), { children: n, className: i } = e, { root: s } = d();
+	if (s === "drawer") {
+		let e;
+		return t[0] !== n || t[1] !== i ? (e = /* @__PURE__ */ c(r.Body, {
+			className: i,
+			children: n
+		}), t[0] = n, t[1] = i, t[2] = e) : e = t[2], e;
+	}
+	let l;
+	t[3] === i ? l = t[4] : (l = a().body({ class: i }), t[3] = i, t[4] = l);
+	let u;
+	return t[5] !== n || t[6] !== l ? (u = /* @__PURE__ */ c("div", {
+		className: l,
+		"data-ox-slot": "responsive-overlay-body",
+		children: n
+	}), t[5] = n, t[6] = l, t[7] = u) : u = t[7], u;
+}
+function x(e) {
+	let t = o(8), { children: n, className: i } = e, { root: s } = d(), l, u;
+	if (t[0] !== n || t[1] !== i || t[2] !== s) {
+		u = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let e = a();
+			if (s === "drawer") {
+				u = /* @__PURE__ */ c(r.Footer, {
+					className: e.drawerFooter({ class: i }),
+					children: n
+				});
+				break bb0;
+			}
+			l = e.footer({ class: i });
+		}
+		t[0] = n, t[1] = i, t[2] = s, t[3] = l, t[4] = u;
+	} else l = t[3], u = t[4];
+	if (u !== Symbol.for("react.early_return_sentinel")) return u;
+	let f;
+	return t[5] !== n || t[6] !== l ? (f = /* @__PURE__ */ c("div", {
+		className: l,
+		"data-ox-slot": "responsive-overlay-actions",
+		children: n
+	}), t[5] = n, t[6] = l, t[7] = f) : f = t[7], f;
+}
+//#endregion
+export { x as OxResponsiveOverlayActions, b as OxResponsiveOverlayBody, g as OxResponsiveOverlayContent, y as OxResponsiveOverlayDescription, m as OxResponsiveOverlayRoot, v as OxResponsiveOverlayTitle, h as OxResponsiveOverlayTrigger };

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

@@ -0,0 +1,78 @@
+import { VariantProps } from '../../internal/tv';
+export declare const responsiveOverlayVariants: import('tailwind-variants').TVReturnType<{
+    root: {
+        dialog: {
+            content: string;
+        };
+        alertDialog: {
+            content: string;
+        };
+        drawer: {};
+    };
+    fullScreen: {
+        true: {
+            content: string[];
+        };
+        false: {};
+    };
+}, {
+    content: string;
+    header: string;
+    title: string;
+    headerExtra: string;
+    description: string;
+    body: string;
+    footer: string[];
+    drawerFooter: string;
+}, undefined, {
+    root: {
+        dialog: {
+            content: string;
+        };
+        alertDialog: {
+            content: string;
+        };
+        drawer: {};
+    };
+    fullScreen: {
+        true: {
+            content: string[];
+        };
+        false: {};
+    };
+}, {
+    content: string;
+    header: string;
+    title: string;
+    headerExtra: string;
+    description: string;
+    body: string;
+    footer: string[];
+    drawerFooter: string;
+}, import('tailwind-variants').TVReturnType<{
+    root: {
+        dialog: {
+            content: string;
+        };
+        alertDialog: {
+            content: string;
+        };
+        drawer: {};
+    };
+    fullScreen: {
+        true: {
+            content: string[];
+        };
+        false: {};
+    };
+}, {
+    content: string;
+    header: string;
+    title: string;
+    headerExtra: string;
+    description: string;
+    body: string;
+    footer: string[];
+    drawerFooter: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ResponsiveOverlayVariants = VariantProps<typeof responsiveOverlayVariants>;

package/dist/components/ResponsiveOverlay/ResponsiveOverlay.styles.js

@@ -0,0 +1,36 @@
+import { tv as e } from "../../internal/tv.js";
+import { overlayBody as t, overlayDescription as n, overlayFooter as r, overlayFullWidthActions as i, overlayHeader as a } from "../../internal/styles/overlayFrameStyles.js";
+//#region src/components/ResponsiveOverlay/ResponsiveOverlay.styles.ts
+var o = e({
+	slots: {
+		content: "flex flex-col",
+		header: a,
+		title: "min-w-0 flex-1",
+		headerExtra: "shrink-0",
+		description: n,
+		body: t,
+		footer: r,
+		drawerFooter: i
+	},
+	variants: {
+		root: {
+			dialog: { content: "p-0" },
+			alertDialog: { content: "p-0" },
+			drawer: {}
+		},
+		fullScreen: {
+			true: { content: [
+				"rounded-none border-0",
+				"pointer-coarse:h-dvh pointer-coarse:w-dvw",
+				"pointer-coarse:max-h-none pointer-coarse:max-w-none"
+			] },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		root: "dialog",
+		fullScreen: !1
+	}
+});
+//#endregion
+export { o as responsiveOverlayVariants };

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

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { DrawerSide } from '../Drawer';
+import { OxBreakpoint } from '../../hooks/useBreakpoint/useBreakpoint.types';
+type ResponsiveOverlayRoot = 'dialog' | 'alertDialog' | 'drawer';
+type ResponsiveOverlayTone = 'danger' | 'warning';
+type ResponsiveOverlayMobileMode = 'sheet' | 'fullscreen';
+interface ResponsiveOverlayOpenChangeDetails {
+    reason: string;
+}
+interface OxResponsiveOverlayProps {
+    below?: OxBreakpoint;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    headerExtra?: ReactNode;
+    mobile?: ResponsiveOverlayMobileMode;
+    mobileSide?: DrawerSide;
+    onOpenChange?: (open: boolean, details: ResponsiveOverlayOpenChangeDetails) => void;
+    open?: boolean;
+    tone?: ResponsiveOverlayTone;
+}
+interface OxResponsiveOverlayTriggerProps {
+    children?: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayContentProps {
+    children: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayTitleProps {
+    children: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayDescriptionProps {
+    children: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayActionsProps {
+    children: ReactNode;
+    className?: string;
+}
+export type { OxResponsiveOverlayActionsProps, OxResponsiveOverlayBodyProps, OxResponsiveOverlayContentProps, OxResponsiveOverlayDescriptionProps, OxResponsiveOverlayProps, OxResponsiveOverlayTitleProps, OxResponsiveOverlayTriggerProps, ResponsiveOverlayMobileMode, ResponsiveOverlayOpenChangeDetails, ResponsiveOverlayRoot, ResponsiveOverlayTone, };

package/dist/components/ResponsiveOverlay/index.d.ts

@@ -0,0 +1,11 @@
+import { OxResponsiveOverlayActions, OxResponsiveOverlayBody, OxResponsiveOverlayContent, OxResponsiveOverlayDescription, OxResponsiveOverlayRoot, OxResponsiveOverlayTitle, OxResponsiveOverlayTrigger } from './ResponsiveOverlay';
+declare const OxResponsiveOverlay: typeof OxResponsiveOverlayRoot & {
+    Trigger: typeof OxResponsiveOverlayTrigger;
+    Content: typeof OxResponsiveOverlayContent;
+    Title: typeof OxResponsiveOverlayTitle;
+    Description: typeof OxResponsiveOverlayDescription;
+    Body: typeof OxResponsiveOverlayBody;
+    Actions: typeof OxResponsiveOverlayActions;
+};
+export { OxResponsiveOverlay };
+export type { OxResponsiveOverlayActionsProps, OxResponsiveOverlayBodyProps, OxResponsiveOverlayContentProps, OxResponsiveOverlayDescriptionProps, OxResponsiveOverlayProps, OxResponsiveOverlayTitleProps, OxResponsiveOverlayTriggerProps, ResponsiveOverlayMobileMode, ResponsiveOverlayOpenChangeDetails, ResponsiveOverlayTone, } from './ResponsiveOverlay.types';

package/dist/components/ResponsiveOverlay/index.js

@@ -0,0 +1,12 @@
+import { OxResponsiveOverlayActions as e, OxResponsiveOverlayBody as t, OxResponsiveOverlayContent as n, OxResponsiveOverlayDescription as r, OxResponsiveOverlayRoot as i, OxResponsiveOverlayTitle as a, OxResponsiveOverlayTrigger as o } from "./ResponsiveOverlay.js";
+//#region src/components/ResponsiveOverlay/index.ts
+var s = Object.assign(i, {
+	Trigger: o,
+	Content: n,
+	Title: a,
+	Description: r,
+	Body: t,
+	Actions: e
+});
+//#endregion
+export { s as OxResponsiveOverlay };

package/dist/components/Sidebar/Sidebar.styles.js

@@ -12,9 +12,9 @@ var r = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:o
 	"border-0 bg-transparent text-body text-fg-muted",
 	"rounded-control ox-console:rounded-sm",
 	"transition-colors ease-out-quint",
-	"ox-interactive:[&:not([data-active])]:hover:bg-surface-raised ox-interactive:hover:text-fg",
+	"ox-engaged:[&:not([data-active])]:bg-surface-raised ox-engaged:text-fg",
 	r,
-	"ox-disabled:opacity-50 ox-disabled:cursor-not-allowed ox-disabled:pointer-events-none",
+	"ox-disabled:opacity-50 ox-disabled:cursor-not-allowed",
 	"data-[active]:bg-primary-soft data-[active]:font-medium data-[active]:text-fg"
 ], o = n({
 	slots: {
@@ -22,12 +22,18 @@ var r = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:o
 		header: [
 			"flex items-center shrink-0 gap-2 overflow-hidden",
 			"h-[var(--topbar-h)] px-4.5 ox-console:px-4",
+			"has-[[data-ox-slot=sidebar-menu]]:px-0",
 			"border-b border-line"
 		],
-		content: ["flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden", "py-3 ox-console:py-2.5"],
+		content: [
+			"flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden",
+			"[&>[data-ox-slot=sidebar-menu]]:py-1.5 ox-console:[&>[data-ox-slot=sidebar-menu]]:py-1.25",
+			"[&>[data-ox-slot=sidebar-menu]:not(:first-child)]:border-t [&>[data-ox-slot=sidebar-menu]:not(:first-child)]:border-line"
+		],
 		footer: [
 			"flex items-center shrink-0 overflow-hidden mt-auto",
 			"p-3 ox-console:p-2.5",
+			"has-[[data-ox-slot=sidebar-menu]]:px-0",
 			"border-t border-line"
 		],
 		separator: "mx-2 my-1 h-px border-0 bg-line shrink-0",
@@ -48,7 +54,8 @@ var r = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:o
 		menuIcon: [
 			"inline-flex items-center justify-center shrink-0 size-4 opacity-60",
 			"transition-opacity ease-out-quint",
-			"group-hover/menu-button:opacity-100 group-data-[active]/menu-button:opacity-100",
+			"group-[&:not([data-disabled]):hover]/menu-button:opacity-100 group-data-[active]/menu-button:opacity-100",
+			"group-data-[popup-open]/menu-button:opacity-100",
 			"[&>svg]:size-full [&>svg]:shrink-0"
 		],
 		menuLabel: "flex-1 truncate min-w-0",
@@ -101,9 +108,9 @@ var r = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:o
 			"inline-flex items-center justify-center shrink-0 size-5 rounded-sm cursor-pointer",
 			"border-0 bg-transparent text-fg-subtle",
 			"transition-colors ease-out-quint",
-			"hover:text-fg hover:bg-[color-mix(in_oklab,var(--fg)_8%,transparent)]",
+			"ox-interactive:hover:text-fg ox-interactive:hover:bg-[color-mix(in_oklab,var(--fg)_8%,transparent)]",
 			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-ink",
-			"ox-disabled:pointer-events-none ox-disabled:opacity-50",
+			"ox-disabled:cursor-not-allowed ox-disabled:opacity-50",
 			"[&>svg]:size-3.5"
 		]
 	},