@noxickon/onyx 5.0.1 → 6.0.0

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,207 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { createCompoundContext as t } from "../../internal/context/createCompoundContext/createCompoundContext.js";
+import { useRender as n } from "../../node_modules/@base-ui/react/use-render/useRender.js";
+import { paginationVariants as r } from "./Pagination.styles.js";
+import { jsx as i } from "react/jsx-runtime";
+import { ChevronLeft as a, ChevronRight as o, ChevronsLeft as s, ChevronsRight as c, MoreHorizontal as l } from "lucide-react";
+//#region src/components/Pagination/Pagination.tsx
+var u = e(), d = (e) => `Go to page ${String(e)}`, { Provider: f, useOptionalContext: p, useRequiredContext: m } = t("OxPagination");
+function h(e) {
+	let t = (0, u.c)(15), { "aria-label": a, children: o, className: s, current: c, defaultAriaLabel: l, disabled: d, href: f, isItem: p, onClick: h, render: g, slot: _, ...v } = e, y = c === void 0 ? !1 : c, b = d === void 0 ? !1 : d, x = p === void 0 ? !1 : p, { itemLabel: S, total: C, variant: w } = m(), { item: T, link: E } = r({
+		current: y,
+		disabled: b,
+		variant: w
+	}), D = !y && !b && (f !== void 0 || g !== void 0), O = y || b, k = x && (typeof o == "string" || typeof o == "number"), A = k ? Number(o) : NaN, j;
+	t[0] !== A || t[1] !== C ? (j = C !== void 0 && Number.isFinite(A), t[0] = A, t[1] = C, t[2] = j) : j = t[2];
+	let M = j, N = a ?? (k ? S(o) : l), P;
+	t[3] === D ? P = t[4] : (P = D ? /* @__PURE__ */ i("a", {}) : /* @__PURE__ */ i("button", { type: "button" }), t[3] = D, t[4] = P);
+	let F = g ?? P;
+	if (y) {
+		let e;
+		t[5] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ i("span", {}), t[5] = e) : e = t[5], F = e;
+	} else if (b) {
+		let e;
+		t[6] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ i("button", {
+			disabled: !0,
+			type: "button"
+		}), t[6] = e) : e = t[6], F = e;
+	}
+	let I = n({
+		render: F,
+		props: {
+			...v,
+			...!O && { onClick: h },
+			...D && f !== void 0 && { href: f },
+			...y && {
+				"aria-current": "page",
+				"data-current": ""
+			},
+			...b && {
+				"aria-disabled": !0,
+				"data-disabled": ""
+			},
+			"aria-label": y ? void 0 : N,
+			className: E({ class: s }),
+			"data-ox-slot": _,
+			children: o
+		}
+	}), L = T(), R;
+	t[7] !== M || t[8] !== A || t[9] !== C ? (R = M ? {
+		"aria-posinset": A,
+		"aria-setsize": C
+	} : {}, t[7] = M, t[8] = A, t[9] = C, t[10] = R) : R = t[10];
+	let z;
+	return t[11] !== I || t[12] !== L || t[13] !== R ? (z = /* @__PURE__ */ i("li", {
+		className: L,
+		"data-ox-slot": "pagination-item",
+		...R,
+		children: I
+	}), t[11] = I, t[12] = L, t[13] = R, t[14] = z) : z = t[14], z;
+}
+function g(e) {
+	let t = (0, u.c)(6), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({children: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let a;
+	return t[3] !== n || t[4] !== r ? (a = /* @__PURE__ */ i(h, {
+		isItem: !0,
+		slot: "pagination-item-link",
+		...r,
+		children: n
+	}), t[3] = n, t[4] = r, t[5] = a) : a = t[5], a;
+}
+function _(e) {
+	let t = (0, u.c)(8), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({children: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let o;
+	t[3] === n ? o = t[4] : (o = n ?? /* @__PURE__ */ i(a, { "aria-hidden": "true" }), t[3] = n, t[4] = o);
+	let s;
+	return t[5] !== r || t[6] !== o ? (s = /* @__PURE__ */ i(h, {
+		defaultAriaLabel: "Go to previous page",
+		slot: "pagination-previous",
+		...r,
+		children: o
+	}), t[5] = r, t[6] = o, t[7] = s) : s = t[7], s;
+}
+function v(e) {
+	let t = (0, u.c)(8), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({children: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let a;
+	t[3] === n ? a = t[4] : (a = n ?? /* @__PURE__ */ i(o, { "aria-hidden": "true" }), t[3] = n, t[4] = a);
+	let s;
+	return t[5] !== r || t[6] !== a ? (s = /* @__PURE__ */ i(h, {
+		defaultAriaLabel: "Go to next page",
+		slot: "pagination-next",
+		...r,
+		children: a
+	}), t[5] = r, t[6] = a, t[7] = s) : s = t[7], s;
+}
+function y(e) {
+	let t = (0, u.c)(8), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({children: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let a;
+	t[3] === n ? a = t[4] : (a = n ?? /* @__PURE__ */ i(s, { "aria-hidden": "true" }), t[3] = n, t[4] = a);
+	let o;
+	return t[5] !== r || t[6] !== a ? (o = /* @__PURE__ */ i(h, {
+		defaultAriaLabel: "Go to first page",
+		slot: "pagination-first",
+		...r,
+		children: a
+	}), t[5] = r, t[6] = a, t[7] = o) : o = t[7], o;
+}
+function b(e) {
+	let t = (0, u.c)(8), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({children: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let a;
+	t[3] === n ? a = t[4] : (a = n ?? /* @__PURE__ */ i(c, { "aria-hidden": "true" }), t[3] = n, t[4] = a);
+	let o;
+	return t[5] !== r || t[6] !== a ? (o = /* @__PURE__ */ i(h, {
+		defaultAriaLabel: "Go to last page",
+		slot: "pagination-last",
+		...r,
+		children: a
+	}), t[5] = r, t[6] = a, t[7] = o) : o = t[7], o;
+}
+function x(e) {
+	let t = (0, u.c)(14), { className: n } = e, { variant: a } = m(), o, s, c, d;
+	if (t[0] !== n || t[1] !== a) {
+		let { ellipsis: e, item: i } = r({ variant: a });
+		c = i(), d = "pagination-item", o = "true", s = e({ class: n }), t[0] = n, t[1] = a, t[2] = o, t[3] = s, t[4] = c, t[5] = d;
+	} else o = t[2], s = t[3], c = t[4], d = t[5];
+	let f;
+	t[6] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ i(l, {}), t[6] = f) : f = t[6];
+	let p;
+	t[7] !== o || t[8] !== s ? (p = /* @__PURE__ */ i("span", {
+		"aria-hidden": o,
+		className: s,
+		"data-ox-slot": "pagination-ellipsis",
+		children: f
+	}), t[7] = o, t[8] = s, t[9] = p) : p = t[9];
+	let h;
+	return t[10] !== c || t[11] !== d || t[12] !== p ? (h = /* @__PURE__ */ i("li", {
+		className: c,
+		"data-ox-slot": d,
+		children: p
+	}), t[10] = c, t[11] = d, t[12] = p, t[13] = h) : h = t[13], h;
+}
+function S(e) {
+	let t = (0, u.c)(22), a, o, s, c;
+	t[0] === e ? (a = t[1], o = t[2], s = t[3], c = t[4]) : ({children: a, className: o, render: c, ...s} = e, t[0] = e, t[1] = a, t[2] = o, t[3] = s, t[4] = c);
+	let l = p(), d, f, m, h;
+	if (t[5] !== o || t[6] !== l?.variant || t[7] !== s || t[8] !== c) {
+		let { summary: e } = r({ variant: l?.variant });
+		h = n, t[13] === c ? m = t[14] : (m = c ?? /* @__PURE__ */ i("p", {}), t[13] = c, t[14] = m), d = s, f = e({ class: o }), t[5] = o, t[6] = l?.variant, t[7] = s, t[8] = c, t[9] = d, t[10] = f, t[11] = m, t[12] = h;
+	} else d = t[9], f = t[10], m = t[11], h = t[12];
+	let g;
+	t[15] !== a || t[16] !== d || t[17] !== f ? (g = {
+		...d,
+		className: f,
+		"data-ox-slot": "pagination-summary",
+		children: a
+	}, t[15] = a, t[16] = d, t[17] = f, t[18] = g) : g = t[18];
+	let _;
+	return t[19] !== m || t[20] !== g ? (_ = {
+		render: m,
+		props: g
+	}, t[19] = m, t[20] = g, t[21] = _) : _ = t[21], h(_);
+}
+function C(e) {
+	let t = (0, u.c)(42), a, o, s, c, l, p, m, h;
+	t[0] === e ? (a = t[1], o = t[2], s = t[3], c = t[4], l = t[5], p = t[6], m = t[7], h = t[8]) : ({"aria-label": l, children: a, className: o, itemLabel: p, render: c, total: h, variant: m, ...s} = e, t[0] = e, t[1] = a, t[2] = o, t[3] = s, t[4] = c, t[5] = l, t[6] = p, t[7] = m, t[8] = h);
+	let g = l === void 0 ? "Pagination" : l, _ = p === void 0 ? d : p, v = m === void 0 ? "ghost" : m, y, b, x, S, C, w, T;
+	if (t[9] !== g || t[10] !== o || t[11] !== s || t[12] !== c || t[13] !== v) {
+		let { list: e, root: a } = r({ variant: v });
+		y = n, t[21] === c ? T = t[22] : (T = c ?? /* @__PURE__ */ i("nav", {}), t[21] = c, t[22] = T), x = s, S = g, C = a({ class: o }), w = "pagination", b = e(), t[9] = g, t[10] = o, t[11] = s, t[12] = c, t[13] = v, t[14] = y, t[15] = b, t[16] = x, t[17] = S, t[18] = C, t[19] = w, t[20] = T;
+	} else y = t[14], b = t[15], x = t[16], S = t[17], C = t[18], w = t[19], T = t[20];
+	let E;
+	t[23] !== a || t[24] !== b ? (E = /* @__PURE__ */ i("ol", {
+		className: b,
+		"data-ox-slot": "pagination-list",
+		children: a
+	}), t[23] = a, t[24] = b, t[25] = E) : E = t[25];
+	let D;
+	t[26] !== E || t[27] !== x || t[28] !== S || t[29] !== C || t[30] !== w ? (D = {
+		...x,
+		"aria-label": S,
+		className: C,
+		"data-ox-slot": w,
+		children: E
+	}, t[26] = E, t[27] = x, t[28] = S, t[29] = C, t[30] = w, t[31] = D) : D = t[31];
+	let O;
+	t[32] !== D || t[33] !== T ? (O = {
+		render: T,
+		props: D
+	}, t[32] = D, t[33] = T, t[34] = O) : O = t[34];
+	let k = y(O), A;
+	t[35] !== _ || t[36] !== h || t[37] !== v ? (A = {
+		itemLabel: _,
+		total: h,
+		variant: v
+	}, t[35] = _, t[36] = h, t[37] = v, t[38] = A) : A = t[38];
+	let j;
+	return t[39] !== k || t[40] !== A ? (j = /* @__PURE__ */ i(f, {
+		value: A,
+		children: k
+	}), t[39] = k, t[40] = A, t[41] = j) : j = t[41], j;
+}
+//#endregion
+export { x as OxPaginationEllipsis, y as OxPaginationFirst, g as OxPaginationItem, b as OxPaginationLast, v as OxPaginationNext, _ as OxPaginationPrevious, C as OxPaginationRoot, S as OxPaginationSummary };

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

@@ -0,0 +1,81 @@
+import { VariantProps } from '../../internal/tv';
+export declare const paginationVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        ghost: {};
+        outline: {
+            link: string;
+        };
+    };
+    current: {
+        true: {
+            link: string[];
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            link: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string[];
+    ellipsis: string[];
+    summary: string[];
+}, undefined, {
+    variant: {
+        ghost: {};
+        outline: {
+            link: string;
+        };
+    };
+    current: {
+        true: {
+            link: string[];
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            link: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string[];
+    ellipsis: string[];
+    summary: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        ghost: {};
+        outline: {
+            link: string;
+        };
+    };
+    current: {
+        true: {
+            link: string[];
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            link: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    link: string[];
+    ellipsis: string[];
+    summary: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type PaginationVariants = VariantProps<typeof paginationVariants>;

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

@@ -0,0 +1,70 @@
+import { tv as e } from "../../internal/tv.js";
+import { solidShadow as t } from "../../internal/styles/solidShadow.js";
+//#region src/components/Pagination/Pagination.styles.ts
+var n = "h-control min-w-[var(--control-h-md)]", r = e({
+	slots: {
+		root: "",
+		list: "flex flex-wrap items-center gap-1.5 pointer-coarse:gap-2",
+		item: "flex",
+		link: [
+			n,
+			"inline-flex shrink-0 items-center justify-center gap-1.5 px-2",
+			"rounded-control border border-transparent",
+			"cursor-pointer select-none no-underline",
+			"font-mono text-control font-medium tabular-nums text-fg-muted",
+			"transition-colors",
+			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-ink",
+			"[&_svg]:size-icon [&_svg]:shrink-0 rtl:[&_svg]:-scale-x-100",
+			"pointer-coarse:relative pointer-coarse:text-sm",
+			"pointer-coarse:after:absolute pointer-coarse:after:content-['']",
+			"pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2",
+			"pointer-coarse:after:-translate-1/2",
+			"pointer-coarse:after:h-11 pointer-coarse:after:w-full pointer-coarse:after:min-w-11"
+		],
+		ellipsis: [
+			n,
+			"inline-flex shrink-0 select-none items-center justify-center text-fg-subtle",
+			"[&_svg]:size-icon [&_svg]:shrink-0"
+		],
+		summary: ["text-body tabular-nums text-fg-subtle", "[&_b]:font-mono [&_b]:font-medium [&_b]:text-fg-muted"]
+	},
+	variants: {
+		variant: {
+			ghost: {},
+			outline: { link: "border-line bg-surface" }
+		},
+		current: {
+			true: { link: ["cursor-default bg-[var(--color-primary-700)] text-primary-fg", t] },
+			false: {}
+		},
+		disabled: {
+			true: { link: "pointer-events-none cursor-not-allowed opacity-50" },
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			current: !1,
+			disabled: !1,
+			class: { link: "hover:bg-surface-raised hover:text-fg" }
+		},
+		{
+			variant: "outline",
+			current: !0,
+			class: { link: "border-transparent" }
+		},
+		{
+			variant: "outline",
+			current: !1,
+			disabled: !1,
+			class: { link: "hover:border-line-strong" }
+		}
+	],
+	defaultVariants: {
+		variant: "ghost",
+		current: !1,
+		disabled: !1
+	}
+});
+//#endregion
+export { r as paginationVariants };

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { PaginationVariants } from './Pagination.styles';
+type PaginationVariant = NonNullable<PaginationVariants['variant']>;
+interface OxPaginationProps extends Pick<PaginationVariants, 'variant'>, Omit<useRender.ComponentProps<'nav'>, 'children'> {
+    children: ReactNode;
+    itemLabel?: (page: string | number) => string;
+    total?: number;
+}
+interface OxPaginationItemProps extends Omit<useRender.ComponentProps<'a'>, 'children'> {
+    children: ReactNode;
+    current?: boolean;
+    disabled?: boolean;
+}
+interface OxPaginationControlProps extends Omit<useRender.ComponentProps<'a'>, 'children'> {
+    children?: ReactNode;
+    disabled?: boolean;
+}
+interface OxPaginationEllipsisProps {
+    className?: string;
+}
+type OxPaginationSummaryProps = useRender.ComponentProps<'p'>;
+export type { OxPaginationControlProps, OxPaginationEllipsisProps, OxPaginationItemProps, OxPaginationProps, OxPaginationSummaryProps, PaginationVariant, };

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

@@ -0,0 +1,12 @@
+import { OxPaginationEllipsis, OxPaginationFirst, OxPaginationItem, OxPaginationLast, OxPaginationNext, OxPaginationPrevious, OxPaginationRoot, OxPaginationSummary } from './Pagination';
+declare const OxPagination: typeof OxPaginationRoot & {
+    Item: typeof OxPaginationItem;
+    Previous: typeof OxPaginationPrevious;
+    Next: typeof OxPaginationNext;
+    First: typeof OxPaginationFirst;
+    Last: typeof OxPaginationLast;
+    Ellipsis: typeof OxPaginationEllipsis;
+    Summary: typeof OxPaginationSummary;
+};
+export { OxPagination };
+export type { OxPaginationControlProps, OxPaginationEllipsisProps, OxPaginationItemProps, OxPaginationProps, OxPaginationSummaryProps, } from './Pagination.types';

package/dist/components/Pagination/index.js

@@ -0,0 +1,13 @@
+import { OxPaginationEllipsis as e, OxPaginationFirst as t, OxPaginationItem as n, OxPaginationLast as r, OxPaginationNext as i, OxPaginationPrevious as a, OxPaginationRoot as o, OxPaginationSummary as s } from "./Pagination.js";
+//#region src/components/Pagination/index.ts
+var c = Object.assign(o, {
+	Item: n,
+	Previous: a,
+	Next: i,
+	First: t,
+	Last: r,
+	Ellipsis: e,
+	Summary: s
+});
+//#endregion
+export { c as OxPagination };

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,8 @@
+import { OxPopoverCloseProps, OxPopoverContentProps, OxPopoverDescriptionProps, OxPopoverProps, OxPopoverTitleProps, OxPopoverTriggerProps } from './Popover.types';
+declare function OxPopoverRoot({ modal, ...props }: OxPopoverProps): import("react").JSX.Element;
+declare function OxPopoverTrigger({ children, className, ...props }: OxPopoverTriggerProps): import("react").JSX.Element;
+declare function OxPopoverContent({ align, alignOffset, arrowPadding, children, className, initialFocus, render, side, sideOffset, ...props }: OxPopoverContentProps): import("react").JSX.Element;
+declare function OxPopoverTitle({ children, className, ...props }: OxPopoverTitleProps): import("react").JSX.Element;
+declare function OxPopoverDescription({ children, className, ...props }: OxPopoverDescriptionProps): import("react").JSX.Element;
+declare function OxPopoverClose({ children, className, ...props }: OxPopoverCloseProps): import("react").JSX.Element;
+export { OxPopoverClose, OxPopoverContent, OxPopoverDescription, OxPopoverRoot, OxPopoverTitle, OxPopoverTrigger, };

package/dist/components/Popover/Popover.js

@@ -0,0 +1,128 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { PortalContainerContext as t } from "../../internal/context/PortalContainerContext/PortalContainerContext.js";
+import { PopoverRoot as n } from "../../node_modules/@base-ui/react/popover/root/PopoverRoot.js";
+import { PopoverTrigger as r } from "../../node_modules/@base-ui/react/popover/trigger/PopoverTrigger.js";
+import { PopoverPortal as i } from "../../node_modules/@base-ui/react/popover/portal/PopoverPortal.js";
+import { PopoverPositioner as a } from "../../node_modules/@base-ui/react/popover/positioner/PopoverPositioner.js";
+import { PopoverPopup as o } from "../../node_modules/@base-ui/react/popover/popup/PopoverPopup.js";
+import { PopoverArrow as s } from "../../node_modules/@base-ui/react/popover/arrow/PopoverArrow.js";
+import { PopoverTitle as c } from "../../node_modules/@base-ui/react/popover/title/PopoverTitle.js";
+import { PopoverDescription as l } from "../../node_modules/@base-ui/react/popover/description/PopoverDescription.js";
+import { PopoverClose as u } from "../../node_modules/@base-ui/react/popover/close/PopoverClose.js";
+import { popoverVariants as d } from "./Popover.styles.js";
+import { isValidElement as f, use as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/Popover/Popover.tsx
+var _ = e(), v = d();
+function y(e) {
+	let t = (0, _.c)(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 a = i === void 0 ? !1 : i, o;
+	return t[3] !== a || t[4] !== r ? (o = /* @__PURE__ */ h(n, {
+		modal: a,
+		...r
+	}), t[3] = a, t[4] = r, t[5] = o) : o = t[5], o;
+}
+function b(e) {
+	let t = (0, _.c)(11), n, i, a;
+	t[0] === e ? (n = t[1], i = t[2], a = t[3]) : ({children: n, className: i, ...a} = e, t[0] = e, t[1] = n, t[2] = i, t[3] = a);
+	let o = f(n) ? n : void 0, s;
+	t[4] === i ? s = t[5] : (s = v.trigger({ class: i }), t[4] = i, t[5] = s);
+	let c = !o && n, l;
+	return t[6] !== a || t[7] !== s || t[8] !== c || t[9] !== o ? (l = /* @__PURE__ */ h(r, {
+		...a,
+		className: s,
+		"data-ox-slot": "popover-trigger",
+		render: o,
+		children: c
+	}), t[6] = a, t[7] = s, t[8] = c, t[9] = o, t[10] = l) : l = t[10], l;
+}
+function x(e) {
+	let n = (0, _.c)(35), r, c, l, u, d, f, y, b, x, S;
+	n[0] === e ? (r = n[1], c = n[2], l = n[3], u = n[4], d = n[5], f = n[6], y = n[7], b = n[8], x = n[9], S = n[10]) : ({align: f, alignOffset: y, arrowPadding: b, children: r, className: c, initialFocus: l, render: d, side: x, sideOffset: S, ...u} = e, n[0] = e, n[1] = r, n[2] = c, n[3] = l, n[4] = u, n[5] = d, n[6] = f, n[7] = y, n[8] = b, n[9] = x, n[10] = S);
+	let C = f === void 0 ? "center" : f, w = y === void 0 ? 0 : y, T = b === void 0 ? 5 : b, E = x === void 0 ? "bottom" : x, D = S === void 0 ? 8 : S, O = p(t) ?? void 0, [k, A] = m(null), j;
+	n[11] === Symbol.for("react.memo_cache_sentinel") ? (j = (e) => {
+		A(e);
+	}, n[11] = j) : j = n[11];
+	let M = j, N;
+	n[12] === Symbol.for("react.memo_cache_sentinel") ? (N = v.positioner(), n[12] = N) : N = n[12];
+	let P;
+	n[13] === c ? P = n[14] : (P = v.popup({ class: c }), n[13] = c, n[14] = P);
+	let F;
+	n[15] === Symbol.for("react.memo_cache_sentinel") ? (F = /* @__PURE__ */ h(s, {
+		className: v.arrow(),
+		"data-ox-slot": "popover-arrow"
+	}), n[15] = F) : F = n[15];
+	let I;
+	n[16] !== r || n[17] !== k ? (I = /* @__PURE__ */ h(t, {
+		value: k,
+		children: r
+	}), n[16] = r, n[17] = k, n[18] = I) : I = n[18];
+	let L;
+	n[19] !== l || n[20] !== d || n[21] !== I || n[22] !== P ? (L = /* @__PURE__ */ g(o, {
+		className: P,
+		"data-ox-slot": "popover",
+		initialFocus: l,
+		ref: M,
+		render: d,
+		children: [F, I]
+	}), n[19] = l, n[20] = d, n[21] = I, n[22] = P, n[23] = L) : L = n[23];
+	let R;
+	n[24] !== C || n[25] !== w || n[26] !== T || n[27] !== u || n[28] !== E || n[29] !== D || n[30] !== L ? (R = /* @__PURE__ */ h(a, {
+		...u,
+		align: C,
+		alignOffset: w,
+		arrowPadding: T,
+		className: N,
+		side: E,
+		sideOffset: D,
+		children: L
+	}), n[24] = C, n[25] = w, n[26] = T, n[27] = u, n[28] = E, n[29] = D, n[30] = L, n[31] = R) : R = n[31];
+	let z;
+	return n[32] !== O || n[33] !== R ? (z = /* @__PURE__ */ h(i, {
+		container: O,
+		children: R
+	}), n[32] = O, n[33] = R, n[34] = z) : z = n[34], z;
+}
+function S(e) {
+	let t = (0, _.c)(10), n, r, i;
+	t[0] === e ? (n = t[1], r = t[2], i = t[3]) : ({children: n, className: r, ...i} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = i);
+	let a;
+	t[4] === r ? a = t[5] : (a = v.title({ class: r }), t[4] = r, t[5] = a);
+	let o;
+	return t[6] !== n || t[7] !== i || t[8] !== a ? (o = /* @__PURE__ */ h(c, {
+		...i,
+		className: a,
+		"data-ox-slot": "popover-title",
+		children: n
+	}), t[6] = n, t[7] = i, t[8] = a, t[9] = o) : o = t[9], o;
+}
+function C(e) {
+	let t = (0, _.c)(10), n, r, i;
+	t[0] === e ? (n = t[1], r = t[2], i = t[3]) : ({children: n, className: r, ...i} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = i);
+	let a;
+	t[4] === r ? a = t[5] : (a = v.description({ class: r }), t[4] = r, t[5] = a);
+	let o;
+	return t[6] !== n || t[7] !== i || t[8] !== a ? (o = /* @__PURE__ */ h(l, {
+		...i,
+		className: a,
+		"data-ox-slot": "popover-description",
+		children: n
+	}), t[6] = n, t[7] = i, t[8] = a, t[9] = o) : o = t[9], o;
+}
+function w(e) {
+	let t = (0, _.c)(11), n, r, i;
+	t[0] === e ? (n = t[1], r = t[2], i = t[3]) : ({children: n, className: r, ...i} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = i);
+	let a = f(n) ? n : void 0, o;
+	t[4] === r ? o = t[5] : (o = v.close({ class: r }), t[4] = r, t[5] = o);
+	let s = !a && n, c;
+	return t[6] !== a || t[7] !== i || t[8] !== o || t[9] !== s ? (c = /* @__PURE__ */ h(u, {
+		...i,
+		className: o,
+		"data-ox-slot": "popover-close",
+		render: a,
+		children: s
+	}), t[6] = a, t[7] = i, t[8] = o, t[9] = s, t[10] = c) : c = t[10], c;
+}
+//#endregion
+export { w as OxPopoverClose, x as OxPopoverContent, C as OxPopoverDescription, y as OxPopoverRoot, S as OxPopoverTitle, b as OxPopoverTrigger };

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

@@ -0,0 +1,63 @@
+import { VariantProps } from '../../internal/tv';
+export declare const popoverVariants: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            trigger?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            popup?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+            close?: import('tailwind-merge').ClassNameValue;
+            positioner?: import('tailwind-merge').ClassNameValue;
+            arrow?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            trigger?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            popup?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+            close?: import('tailwind-merge').ClassNameValue;
+            positioner?: import('tailwind-merge').ClassNameValue;
+            arrow?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    positioner: string;
+    popup: string[];
+    arrow: string[];
+    title: string;
+    description: string;
+    close: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            trigger?: import('tailwind-merge').ClassNameValue;
+            title?: import('tailwind-merge').ClassNameValue;
+            popup?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+            close?: import('tailwind-merge').ClassNameValue;
+            positioner?: import('tailwind-merge').ClassNameValue;
+            arrow?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    positioner: string;
+    popup: string[];
+    arrow: string[];
+    title: string;
+    description: string;
+    close: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    trigger: string;
+    positioner: string;
+    popup: string[];
+    arrow: string[];
+    title: string;
+    description: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverVariants = VariantProps<typeof popoverVariants>;

package/dist/components/Popover/Popover.styles.js

@@ -0,0 +1,26 @@
+import { tv as e } from "../../internal/tv.js";
+import { popupMotion as t } from "../../internal/styles/popupMotionStyles.js";
+import { menuSurface as n } from "../../internal/styles/menuSurfaceStyles.js";
+//#region src/components/Popover/Popover.styles.ts
+var r = e({ slots: {
+	trigger: "",
+	positioner: "z-[var(--z-popover)]",
+	popup: [
+		"max-w-xs p-4",
+		n,
+		...t,
+		"focus-visible:outline-none"
+	],
+	arrow: [
+		"absolute size-2.75 bg-popover border-l border-t border-line-overlay",
+		"data-[side=bottom]:-top-1.5 data-[side=bottom]:rotate-45",
+		"data-[side=top]:-bottom-1.5 data-[side=top]:rotate-225",
+		"data-[side=right]:-left-1.5 data-[side=right]:-rotate-45",
+		"data-[side=left]:-right-1.5 data-[side=left]:rotate-135"
+	],
+	title: "break-words text-body font-semibold tracking-tight text-fg",
+	description: "mt-1 break-words text-2xs leading-normal text-fg-muted",
+	close: ""
+} });
+//#endregion
+export { r as popoverVariants };

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

@@ -0,0 +1,25 @@
+import { ReactNode, RefObject } from 'react';
+import { Popover as BasePopover, PopoverCloseProps as BasePopoverCloseProps, PopoverDescriptionProps as BasePopoverDescriptionProps, PopoverPopupProps as BasePopoverPopupProps, PopoverPositionerProps as BasePopoverPositionerProps, PopoverRootProps as BasePopoverRootProps, PopoverTitleProps as BasePopoverTitleProps, PopoverTriggerProps as BasePopoverTriggerProps } from '@base-ui/react/popover';
+type PopoverHandle = ReturnType<typeof BasePopover.createHandle>;
+type OxPopoverProps<Payload = unknown> = BasePopoverRootProps<Payload>;
+interface OxPopoverTriggerProps<Payload = unknown> extends Omit<BasePopoverTriggerProps<Payload>, 'className'> {
+    className?: string;
+}
+interface OxPopoverContentProps extends Omit<BasePopoverPositionerProps, 'className' | 'render'> {
+    children: ReactNode;
+    className?: string;
+    initialFocus?: RefObject<HTMLElement | null>;
+    render?: BasePopoverPopupProps['render'];
+}
+interface OxPopoverTitleProps extends Omit<BasePopoverTitleProps, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+interface OxPopoverDescriptionProps extends Omit<BasePopoverDescriptionProps, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+interface OxPopoverCloseProps extends Omit<BasePopoverCloseProps, 'className'> {
+    className?: string;
+}
+export type { OxPopoverCloseProps, OxPopoverContentProps, OxPopoverDescriptionProps, OxPopoverProps, OxPopoverTitleProps, OxPopoverTriggerProps, PopoverHandle, };