@arcadeai/design-system 5.0.1 → 5.3.0

package/dist/popover-CpLkQtT5.js

@@ -0,0 +1,490 @@
+"use client";
+import { t as e } from "./useIsoLayoutEffect-4LGv3HzC.js";
+import { o as t, r as n, t as r, u as i } from "./useRenderElement-BToElZ97.js";
+import { t as a } from "./useStableCallback-CrM0Nb2q.js";
+import { t as o } from "./useBaseUiId-CXSJgVcI.js";
+import { l as s, t as c, x as l } from "./createBaseUIEventDetails-C_dwdqj4.js";
+import { a as u, n as d, t as f } from "./useOpenChangeComplete-CVIwfcpl.js";
+import { f as p } from "./floating-ui.utils.dom-5U5b4xPf.js";
+import { t as m } from "./useButton-DjF6Owsn.js";
+import { cn as h } from "./lib/utils.js";
+import { C as g, E as _, S as v, T as y, _ as b, a as x, d as S, f as C, g as w, h as T, i as E, l as D, m as O, o as k, p as A, r as j, s as M, u as N, v as P, w as F } from "./popupStateMapping-XiLS0Jku.js";
+import { T as I, d as L, h as R, o as z, s as B, t as V } from "./ReactStore-C3H8e2ha.js";
+import { t as H } from "./useTimeout-B0afjWAz.js";
+import { a as ee, i as te, n as ne, r as U } from "./useOpenInteractionType-INvHftZi.js";
+import { n as re, r as ie, t as ae } from "./safePolygon-DmV1hDsw.js";
+import { i as oe, n as W, r as se, t as ce } from "./usePositioner-CaLGGc-z.js";
+import { n as le, r as ue, t as de } from "./store-D7k1qIkZ.js";
+import { o as fe } from "./composite-COXvAbcT.js";
+import { t as pe } from "./inertValue-BhczR0H5.js";
+import { t as me } from "./useTriggerFocusGuards-Dlv8KvSm.js";
+import { t as he } from "./useAnchoredPopupScrollLock-CnoPUwXv.js";
+import { t as ge } from "./ToolbarRootContext-CDm74ob9.js";
+import * as G from "react";
+import { jsx as K, jsxs as q } from "react/jsx-runtime";
+import * as _e from "react-dom";
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/root/PopoverRootContext.mjs
+var J = /*#__PURE__*/ G.createContext(void 0);
+process.env.NODE_ENV !== "production" && (J.displayName = "PopoverRootContext");
+function Y(e) {
+	let t = G.useContext(J);
+	if (t === void 0 && !e) throw Error(process.env.NODE_ENV === "production" ? i(47) : "Base UI: PopoverRootContext is missing. Popover parts must be placed within <Popover.Root>.");
+	return t;
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/store/PopoverStore.mjs
+function ve() {
+	return {
+		...de(),
+		disabled: !1,
+		modal: !1,
+		focusManagerModal: !1,
+		instantType: void 0,
+		openMethod: null,
+		openChangeReason: null,
+		titleElementId: void 0,
+		descriptionElementId: void 0,
+		stickIfOpen: !0,
+		nested: !1,
+		openOnHover: !1,
+		closeDelay: 0,
+		hasViewport: !1
+	};
+}
+var ye = {
+	...ue,
+	disabled: z((e) => e.disabled),
+	instantType: z((e) => e.instantType),
+	openMethod: z((e) => e.openMethod),
+	openChangeReason: z((e) => e.openChangeReason),
+	modal: z((e) => e.modal),
+	focusManagerModal: z((e) => e.focusManagerModal),
+	stickIfOpen: z((e) => e.stickIfOpen),
+	titleElementId: z((e) => e.titleElementId),
+	descriptionElementId: z((e) => e.descriptionElementId),
+	openOnHover: z((e) => e.openOnHover),
+	closeDelay: z((e) => e.closeDelay),
+	hasViewport: z((e) => e.hasViewport)
+}, be = class e extends V {
+	constructor(e, t, n = !1) {
+		let r = {
+			...ve(),
+			...e
+		}, i = new k();
+		r.open && e?.mounted === void 0 && (r.mounted = !0), r.floatingRootContext = le(i, t, n), super(r, {
+			popupRef: /*#__PURE__*/ G.createRef(),
+			backdropRef: /*#__PURE__*/ G.createRef(),
+			internalBackdropRef: /*#__PURE__*/ G.createRef(),
+			onOpenChange: void 0,
+			onOpenChangeComplete: void 0,
+			triggerFocusTargetRef: /*#__PURE__*/ G.createRef(),
+			beforeContentFocusGuardRef: /*#__PURE__*/ G.createRef(),
+			stickIfOpenTimeout: new H(),
+			triggerElements: i
+		}, ye);
+	}
+	setOpen = (e, t) => {
+		let n = t.reason === l, r = t.reason === "trigger-press" && t.event.detail === 0, i = !e && (t.reason === "escape-key" || t.reason == null), a = D(t), o = this.select("activeTriggerId");
+		if (!e && t.reason === "close-press" && t.trigger == null && o != null && (t.trigger = this.context.triggerElements.getById(o) ?? this.select("activeTriggerElement") ?? void 0), this.context.onOpenChange?.(e, t), t.isCanceled) return;
+		this.state.floatingRootContext.dispatchOpenChange(e, t);
+		let s = () => {
+			let n = {
+				open: e,
+				openChangeReason: t.reason
+			};
+			S(n, e, t.trigger, a()), this.update(n);
+		};
+		n ? (this.set("stickIfOpen", !0), this.context.stickIfOpenTimeout.start(500, () => {
+			this.set("stickIfOpen", !1);
+		}), _e.flushSync(s)) : s(), r || i ? this.set("instantType", r ? "click" : "dismiss") : t.reason === "focus-out" ? this.set("instantType", "focus") : this.set("instantType", void 0);
+	};
+	static useStore(t, n) {
+		let { store: r, internalStore: i } = b(t, (t, r) => new e(n, t, r));
+		return G.useEffect(() => i?.disposeEffect(), [i]), r;
+	}
+	disposeEffect = () => this.context.stickIfOpenTimeout.disposeEffect();
+};
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/root/PopoverRoot.mjs
+function xe({ props: e }) {
+	let { children: t, open: n, defaultOpen: r = !1, onOpenChange: i, onOpenChangeComplete: a, modal: o = !1, handle: l, triggerId: u, defaultTriggerId: d = null } = e, f = be.useStore(l?.store, {
+		modal: o,
+		open: r,
+		openProp: n,
+		activeTriggerId: d,
+		triggerIdProp: u
+	});
+	A(f, n, r, d), f.useControlledProp("openProp", n), f.useControlledProp("triggerIdProp", u);
+	let p = f.useState("open"), m = f.useState("mounted"), h = f.useState("payload"), g = _() != null;
+	f.useContextCallback("onOpenChange", i), f.useContextCallback("onOpenChangeComplete", a), w(f, p), C(f);
+	let { forceUnmount: v } = O(p, f, () => {
+		f.update({
+			stickIfOpen: !0,
+			openChangeReason: null
+		});
+	});
+	f.useSyncedValues({
+		modal: o,
+		nested: g
+	}), G.useEffect(() => {
+		p || f.context.stickIfOpenTimeout.clear();
+	}, [f, p]);
+	let y = G.useCallback(() => {
+		f.setOpen(!1, c(s));
+	}, [f]);
+	G.useImperativeHandle(e.actionsRef, () => ({
+		unmount: v,
+		close: y
+	}), [v, y]);
+	let b = p || m, x = G.useMemo(() => ({ store: f }), [f]);
+	return /*#__PURE__*/ q(J.Provider, {
+		value: x,
+		children: [b && /*#__PURE__*/ K(Ce, {
+			store: f,
+			modal: o
+		}), typeof t == "function" ? t({ payload: h }) : t]
+	});
+}
+function Se(e) {
+	return Y(!0) ? /*#__PURE__*/ K(xe, { props: e }) : /*#__PURE__*/ K(F, { children: /*#__PURE__*/ K(xe, { props: e }) });
+}
+function Ce({ store: e, modal: r }) {
+	let i = v(e.useState("floatingRootContext"), { outsidePressEvent: {
+		mouse: r === "trap-focus" ? "sloppy" : "intentional",
+		touch: "sloppy"
+	} });
+	return T(e, {
+		activeTriggerProps: i.reference ?? t,
+		inactiveTriggerProps: i.trigger ?? t,
+		popupProps: G.useMemo(() => n(M, i.floating), [i.floating])
+	}), null;
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/trigger/PopoverTrigger.mjs
+var we = /*#__PURE__*/ G.forwardRef(function(e, t) {
+	let { render: n, className: a, style: s, disabled: c = !1, nativeButton: l = !0, handle: u, payload: d, openOnHover: f = !1, delay: p = 300, closeDelay: h = 0, id: g, ..._ } = e, v = Y(!0), y = u?.store ?? v?.store;
+	if (!y) throw Error(process.env.NODE_ENV === "production" ? i(74) : "Base UI: <Popover.Trigger> must be either used within a <Popover.Root> component or provided with a handle.");
+	let b = o(g), S = y.useState("isTriggerActive", b), C = y.useState("floatingRootContext"), w = y.useState("isOpenedByTrigger", b), T = y.useState("triggerPopupId", b), D = G.useRef(null), { registerTrigger: O, isMountedByThisTrigger: k } = P(b, D, y, {
+		payload: d,
+		disabled: c,
+		openOnHover: f,
+		closeDelay: h
+	}), A = y.useState("openChangeReason"), j = y.useState("stickIfOpen"), M = y.useState("openMethod"), N = y.useState("focusManagerModal"), F = re(C, {
+		enabled: !c && C != null && f && (M !== "touch" || A !== "trigger-press"),
+		mouseOnly: !0,
+		move: !1,
+		handleClose: ae(),
+		restMs: p,
+		delay: { close: h },
+		triggerElementRef: D,
+		isActiveTrigger: S,
+		isClosing: () => y.select("transitionStatus") === "ending"
+	}), R = te(C, {
+		enabled: C != null,
+		stickIfOpen: j
+	}), z = ne(() => y.select("open"), (e) => {
+		y.set("openMethod", e);
+	}), B = y.useState("triggerProps", k), { getButtonProps: V, buttonRef: H } = m({
+		disabled: c,
+		native: l
+	}), ee = { open(e) {
+		return e && A === "trigger-press" ? E.open(e) : x.open(e);
+	} }, { preFocusGuardRef: U, handlePreFocusGuardFocus: ie, handleFocusTargetFocus: oe } = me(y, D), W = r("button", e, {
+		state: {
+			disabled: c,
+			open: w
+		},
+		ref: [
+			H,
+			t,
+			O,
+			D
+		],
+		props: [
+			R.reference,
+			F,
+			B,
+			z,
+			{
+				[L]: "",
+				id: b,
+				"aria-haspopup": "dialog",
+				"aria-expanded": w,
+				"aria-controls": T
+			},
+			_,
+			V
+		],
+		stateAttributesMapping: ee
+	});
+	return k && !N ? /*#__PURE__*/ q(G.Fragment, { children: [
+		/*#__PURE__*/ K(I, {
+			ref: U,
+			onFocus: ie
+		}),
+		/*#__PURE__*/ K(G.Fragment, { children: W }, b),
+		/*#__PURE__*/ K(I, {
+			ref: y.context.triggerFocusTargetRef,
+			onFocus: oe
+		})
+	] }) : /*#__PURE__*/ K(G.Fragment, { children: W }, b);
+});
+process.env.NODE_ENV !== "production" && (we.displayName = "PopoverTrigger");
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/portal/PopoverPortalContext.mjs
+var X = /*#__PURE__*/ G.createContext(void 0);
+process.env.NODE_ENV !== "production" && (X.displayName = "PopoverPortalContext");
+function Te() {
+	let e = G.useContext(X);
+	if (e === void 0) throw Error(process.env.NODE_ENV === "production" ? i(45) : "Base UI: <Popover.Portal> is missing.");
+	return e;
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/portal/PopoverPortal.mjs
+var Z = /*#__PURE__*/ G.forwardRef(function(e, t) {
+	let { keepMounted: n = !1, ...r } = e, { store: i } = Y();
+	return i.useState("mounted") || n ? /*#__PURE__*/ K(X.Provider, {
+		value: n,
+		children: /*#__PURE__*/ K(B, {
+			ref: t,
+			...r
+		})
+	}) : null;
+});
+process.env.NODE_ENV !== "production" && (Z.displayName = "PopoverPortal");
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/positioner/PopoverPositionerContext.mjs
+var Q = /*#__PURE__*/ G.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Q.displayName = "PopoverPositionerContext");
+function Ee() {
+	let e = G.useContext(Q);
+	if (!e) throw Error(process.env.NODE_ENV === "production" ? i(46) : "Base UI: PopoverPositionerContext is missing. PopoverPositioner parts must be placed within <Popover.Positioner>.");
+	return e;
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/positioner/PopoverPositioner.mjs
+var De = /*#__PURE__*/ G.forwardRef(function(t, n) {
+	let { render: r, className: i, style: a, anchor: o, positionMethod: s = "absolute", side: c = "bottom", align: l = "center", sideOffset: u = 0, alignOffset: f = 0, collisionBoundary: p = "clipping-ancestors", collisionPadding: m = 5, arrowPadding: h = 5, sticky: _ = !1, disableAnchorTracking: v = !1, collisionAvoidance: b = R, ...x } = t, { store: S } = Y(), C = Te(), w = y(), T = S.useState("floatingRootContext"), E = S.useState("mounted"), D = S.useState("open"), O = S.useState("openChangeReason"), k = S.useState("activeTriggerElement"), A = S.useState("modal"), j = S.useState("openMethod"), M = S.useState("positionerElement"), N = S.useState("instantType"), P = S.useState("transitionStatus"), F = S.useState("hasViewport"), I = G.useRef(null), L = d(M, !1, !1), z = se({
+		anchor: o,
+		floatingRootContext: T,
+		positionMethod: s,
+		mounted: E,
+		side: c,
+		sideOffset: u,
+		align: l,
+		alignOffset: f,
+		arrowPadding: h,
+		collisionBoundary: p,
+		collisionPadding: m,
+		sticky: _,
+		disableAnchorTracking: v,
+		keepMounted: C,
+		nodeId: w,
+		collisionAvoidance: b,
+		adaptiveOrigin: F ? oe : void 0
+	}), B = T.useState("domReferenceElement");
+	e(() => {
+		let e = B, t = I.current;
+		if (e && (I.current = e), t && e && e !== t) {
+			S.set("instantType", void 0);
+			let e = new AbortController();
+			return L(() => {
+				S.set("instantType", "trigger-change");
+			}, e.signal), () => {
+				e.abort();
+			};
+		}
+	}, [
+		B,
+		L,
+		S
+	]), he(D && A === !0 && O !== "trigger-hover", j === "touch", M, k);
+	let V = G.useCallback((e) => {
+		S.set("positionerElement", e);
+	}, [S]), H = ce(t, {
+		open: D,
+		side: z.side,
+		align: z.align,
+		anchorHidden: z.anchorHidden,
+		instant: N
+	}, {
+		styles: z.positionerStyles,
+		transitionStatus: P,
+		props: x,
+		refs: [n, V],
+		hidden: !E,
+		inert: !D
+	});
+	return /*#__PURE__*/ q(Q.Provider, {
+		value: z,
+		children: [E && A === !0 && O !== "trigger-hover" && /*#__PURE__*/ K(U, {
+			ref: S.context.internalBackdropRef,
+			inert: pe(!D),
+			cutout: k
+		}), /*#__PURE__*/ K(g, {
+			id: w,
+			children: H
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (De.displayName = "PopoverPositioner");
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/utils/closePart.mjs
+var Oe = /*#__PURE__*/ G.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Oe.displayName = "ClosePartContext");
+function ke() {
+	let [e, t] = G.useState(0), n = a(() => (t((e) => e + 1), () => {
+		t((e) => Math.max(0, e - 1));
+	}));
+	return {
+		context: G.useMemo(() => ({ register: n }), [n]),
+		hasClosePart: e > 0
+	};
+}
+function Ae(e) {
+	let { value: t, children: n } = e;
+	return /*#__PURE__*/ K(Oe.Provider, {
+		value: t,
+		children: n
+	});
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/popup/PopoverPopup.mjs
+var je = {
+	...j,
+	...u
+}, Me = /*#__PURE__*/ G.forwardRef(function(e, t) {
+	let { render: n, className: i, style: a, initialFocus: o, finalFocus: s, ...c } = e, { store: l } = Y(), u = Ee(), d = ge(!0) != null, { context: m, hasClosePart: h } = ke(), g = l.useState("open"), _ = l.useState("openMethod"), v = l.useState("instantType"), y = l.useState("transitionStatus"), b = l.useState("popupProps"), x = l.useState("titleElementId"), S = l.useState("descriptionElementId"), C = l.useState("modal"), w = l.useState("mounted"), T = l.useState("openChangeReason"), E = l.useState("activeTriggerElement"), D = l.useState("floatingRootContext"), O = D.useState("floatingId"), k = l.useState("disabled"), A = l.useState("openOnHover"), j = l.useState("closeDelay"), P = c.id ?? O;
+	f({
+		open: g,
+		ref: l.context.popupRef,
+		onComplete() {
+			g && l.context.onOpenChangeComplete?.(!0);
+		}
+	}), ie(D, {
+		enabled: A && !k,
+		closeDelay: j
+	});
+	let F = o === void 0 ? N(l.context.popupRef) : o, I = C !== !1 && h;
+	l.useSyncedValue("focusManagerModal", I);
+	let L = G.useCallback((e) => {
+		l.set("popupElement", e);
+	}, [l]), R = r("div", e, {
+		state: {
+			open: g,
+			side: u.side,
+			align: u.align,
+			instant: v,
+			transitionStatus: y
+		},
+		ref: [
+			t,
+			l.context.popupRef,
+			L
+		],
+		props: [
+			b,
+			{
+				id: P,
+				role: "dialog",
+				...M,
+				"aria-labelledby": x,
+				"aria-describedby": S,
+				onKeyDown(e) {
+					d && fe.has(e.key) && e.stopPropagation();
+				}
+			},
+			W(y),
+			c
+		],
+		stateAttributesMapping: je
+	});
+	return /*#__PURE__*/ K(ee, {
+		context: D,
+		openInteractionType: _,
+		modal: I,
+		disabled: !w || T === "trigger-hover",
+		initialFocus: F,
+		returnFocus: s,
+		restoreFocus: "popup",
+		previousFocusableElement: p(E) ? E : void 0,
+		nextFocusableElement: l.context.triggerFocusTargetRef,
+		beforeContentFocusGuardRef: l.context.beforeContentFocusGuardRef,
+		children: /*#__PURE__*/ K(Ae, {
+			value: m,
+			children: R
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (Me.displayName = "PopoverPopup");
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/title/PopoverTitle.mjs
+var Ne = /*#__PURE__*/ G.forwardRef(function(e, t) {
+	let { render: n, className: i, style: a, ...s } = e, { store: c } = Y(), l = o(s.id);
+	return c.useSyncedValueWithCleanup("titleElementId", l), r("h2", e, {
+		ref: t,
+		props: [{ id: l }, s]
+	});
+});
+process.env.NODE_ENV !== "production" && (Ne.displayName = "PopoverTitle");
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.6.0+df7f6a806acd27ca/node_modules/@base-ui/react/popover/description/PopoverDescription.mjs
+var $ = /*#__PURE__*/ G.forwardRef(function(e, t) {
+	let { render: n, className: i, style: a, ...s } = e, { store: c } = Y(), l = o(s.id);
+	return c.useSyncedValueWithCleanup("descriptionElementId", l), r("p", e, {
+		ref: t,
+		props: [{ id: l }, s]
+	});
+});
+process.env.NODE_ENV !== "production" && ($.displayName = "PopoverDescription");
+//#endregion
+//#region lib/components/ui/atoms/popover.tsx
+function Pe({ ...e }) {
+	return /* @__PURE__ */ K(Se, {
+		"data-slot": "popover",
+		...e
+	});
+}
+function Fe({ ...e }) {
+	return /* @__PURE__ */ K(we, {
+		"data-slot": "popover-trigger",
+		...e
+	});
+}
+function Ie({ className: e, align: t = "center", alignOffset: n = 0, side: r = "bottom", sideOffset: i = 4, ...a }) {
+	return /* @__PURE__ */ K(Z, { children: /* @__PURE__ */ K(De, {
+		align: t,
+		alignOffset: n,
+		className: "isolate z-50",
+		side: r,
+		sideOffset: i,
+		children: /* @__PURE__ */ K(Me, {
+			className: h("data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in", e),
+			"data-slot": "popover-content",
+			...a
+		})
+	}) });
+}
+function Le({ className: e, ...t }) {
+	return /* @__PURE__ */ K("div", {
+		className: h("flex flex-col gap-1 text-sm", e),
+		"data-slot": "popover-header",
+		...t
+	});
+}
+function Re({ className: e, ...t }) {
+	return /* @__PURE__ */ K(Ne, {
+		className: h("font-medium", e),
+		"data-slot": "popover-title",
+		...t
+	});
+}
+function ze({ className: e, ...t }) {
+	return /* @__PURE__ */ K($, {
+		className: h("text-muted-foreground", e),
+		"data-slot": "popover-description",
+		...t
+	});
+}
+//#endregion
+export { Re as a, Le as i, Ie as n, Fe as o, ze as r, Pe as t };