@jfrader/ui 0.5.1 → 0.7.0

package/dist/sheet-stack-DYX1SGSB.js

@@ -0,0 +1,820 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n, t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./sx-BJXJ2xJK.js";
+import { t as s } from "./use-controlled-state-DpeVQZNR.js";
+import { t as c } from "./renderable-DzcIj1Lo.js";
+import { n as l, t as u } from "./surface-C69kwSuk.js";
+import { t as d } from "./trigger-style-CtOrdPk4.js";
+import { i as f, r as p } from "./use-native-dialog-FB0p7lkg.js";
+import { createContext as m, useCallback as h, useContext as g, useEffect as _, useId as v, useLayoutEffect as y, useMemo as b, useRef as x, useState as S } from "react";
+import { vars as C } from "@jfrader/tokens/vars";
+import { jsx as w, jsxs as T } from "@emotion/react/jsx-runtime";
+import { animate as E } from "motion/react";
+import { base as D } from "@jfrader/tokens";
+import { FloatingFocusManager as O, useFloating as k, useMergeRefs as A } from "@floating-ui/react";
+import { createPortal as j } from "react-dom";
+//#region src/components/sheet-stack/sheet-stack.tsx
+var M = m(null), ee = m(null);
+function N(e) {
+	let t = g(M);
+	if (!t) throw Error(`SheetStack.${e} must be rendered inside <SheetStack>.`);
+	return t;
+}
+function P(e) {
+	let t = g(ee);
+	if (!t) throw Error(`SheetStack.${e} must be rendered inside <SheetStack.Content>.`);
+	return t;
+}
+function F() {
+	let { value: e, push: t, pop: n, popTo: r, close: i } = N("useSheetStack");
+	return b(() => ({
+		value: e,
+		push: t,
+		pop: n,
+		popTo: r,
+		close: i
+	}), [
+		e,
+		t,
+		n,
+		r,
+		i
+	]);
+}
+var I = {
+	distanceRatio: .35,
+	velocity: 450,
+	opposingResistance: .2,
+	velocityWindowMs: 100,
+	releaseSpring: {
+		type: "spring",
+		stiffness: 400,
+		damping: 40,
+		mass: 1
+	}
+}, L = "(prefers-reduced-motion: reduce)", R = "[data-sheet-no-drag]", te = "[data-floating-ui-portal]:not(:empty), dialog[open]", z = Number.parseFloat(D.size.sheetStackBreakpoint), B = [], V = C.space[4], H = `calc(${C.space[6]} + env(safe-area-inset-top, 0px))`, ne = "32rem", U = "12rem", W = .05, G = "var(--sheet-stack-depth, 0)", K = "var(--sheet-stack-index, 0)", q = "var(--sheet-stack-active-size, 0px)", J = e({ from: {
+	opacity: 0,
+	transform: "translateY(100%)"
+} }), Y = e({ from: {
+	opacity: 0,
+	transform: "scale(0.96)"
+} }), X = t({
+	...u,
+	position: "fixed",
+	inset: 0,
+	margin: 0,
+	inlineSize: "100%",
+	blockSize: "100%",
+	maxInlineSize: "none",
+	maxBlockSize: "none",
+	overflow: "hidden",
+	"&[open]": { display: "block" }
+}), Z = t({
+	position: "absolute",
+	inset: 0,
+	overflow: "hidden",
+	borderRadius: "inherit"
+}), re = t({
+	position: "absolute",
+	inset: 0,
+	backgroundColor: C.color.scrim
+}), ie = t({
+	position: "absolute",
+	inset: 0,
+	pointerEvents: "none"
+}), ae = t({
+	...l,
+	position: "absolute",
+	zIndex: K,
+	display: "flex",
+	flexDirection: "column",
+	minBlockSize: 0,
+	boxShadow: C.shadow.floating,
+	pointerEvents: "auto",
+	overflow: "hidden",
+	"&:focus-visible": { ...r },
+	transformOrigin: "top center",
+	transitionProperty: "transform, min-block-size",
+	transitionDuration: C.motion.duration.slow,
+	transitionTimingFunction: C.motion.easeStandard,
+	animationDuration: C.motion.duration.slow,
+	animationTimingFunction: C.motion.easeStandard,
+	animationFillMode: "backwards",
+	[a]: {
+		animation: "none",
+		transitionDuration: "0s"
+	},
+	[i]: {
+		boxShadow: "none",
+		borderColor: "CanvasText"
+	}
+});
+function Q(e, t) {
+	return `min(100%, max(${U}, calc(100% - ${e} - ${K} * ${t})))`;
+}
+var oe = {
+	sheet: t({
+		insetInline: 0,
+		insetBlockEnd: 0,
+		marginInline: "auto",
+		inlineSize: "100%",
+		maxInlineSize: C.size.sheetStackBreakpoint,
+		maxBlockSize: Q(H, C.size.sheetStackSheetPeek),
+		borderBlockEndWidth: 0,
+		borderStartStartRadius: C.radius.xl,
+		borderStartEndRadius: C.radius.xl,
+		paddingBlockEnd: "env(safe-area-inset-bottom, 0px)",
+		animationName: J,
+		[i]: { borderBlockEndWidth: "1px" }
+	}),
+	dialog: t({
+		inset: 0,
+		margin: "auto",
+		inlineSize: `min(${ne}, calc(100% - 2 * ${V}))`,
+		blockSize: "fit-content",
+		maxBlockSize: Q(`2 * ${V}`, C.size.sheetStackDialogPeek),
+		borderRadius: C.radius.lg,
+		animationName: Y
+	})
+}, se = `scale(calc(1 - ${G} * ${W}))`, ce = {
+	sheet: t({
+		animationName: "none",
+		minBlockSize: `calc(${q} + ${G} * ${C.size.sheetStackSheetPeek})`,
+		transform: se
+	}),
+	dialog: t({
+		animationName: "none",
+		minBlockSize: q,
+		transform: `translateY(calc(-1 * ${G} * ${C.size.sheetStackDialogPeek})) ${se}`
+	})
+}, le = t({
+	flexShrink: 0,
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	blockSize: C.space[8],
+	cursor: "grab",
+	touchAction: "none",
+	"&::before": {
+		content: "\"\"",
+		inlineSize: C.space[10],
+		blockSize: C.space[1],
+		borderRadius: C.radius.full,
+		backgroundColor: C.color.borderControl
+	},
+	"&[data-dragging]": { cursor: "grabbing" },
+	"[data-variant=\"dialog\"] > &": { display: "none" },
+	"[data-sheet-no-drag] > &": {
+		cursor: "auto",
+		touchAction: "auto"
+	},
+	[a]: {
+		cursor: "auto",
+		touchAction: "auto"
+	},
+	[i]: { "&::before": { backgroundColor: "CanvasText" } }
+}), ue = t({
+	flex: "1 1 auto",
+	minBlockSize: 0,
+	overflow: "auto",
+	overscrollBehavior: "contain",
+	display: "flex",
+	flexDirection: "column",
+	gap: C.space[2],
+	paddingInline: C.space[5],
+	paddingBlockStart: C.space[4],
+	fontSize: C.textSize.sm,
+	"[data-variant=\"sheet\"] > &": { paddingBlockStart: C.space[1] },
+	"&:not(:has(> [data-ui~=\"sheet-stack-footer\"]))": { paddingBlockEnd: C.space[5] }
+}), de = t({
+	position: "sticky",
+	insetBlockEnd: 0,
+	marginBlockStart: "auto",
+	marginInline: `calc(-1 * ${C.space[5]})`,
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "flex-end",
+	alignItems: "center",
+	gap: C.space[3],
+	paddingInline: C.space[5],
+	paddingBlock: C.space[4],
+	backgroundColor: C.color.surfaceRaised,
+	borderBlockStart: `1px solid ${C.color.border}`
+}), fe = t({
+	margin: 0,
+	fontSize: C.textSize.lg,
+	fontWeight: C.fontWeight.semibold,
+	lineHeight: C.lineHeight.tight,
+	borderRadius: C.radius.sm,
+	"&:focus": { outline: "none" },
+	"&:focus-visible": { ...n },
+	[i]: { "&:focus-visible": { outlineColor: "Highlight" } }
+}), pe = t({
+	margin: 0,
+	color: C.color.textMuted
+}), $ = t({
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: C.space[1],
+	alignSelf: "flex-start",
+	boxSizing: "border-box",
+	minBlockSize: C.space[8],
+	minInlineSize: C.space[8],
+	border: "1px solid transparent",
+	borderRadius: C.radius.md,
+	backgroundColor: "transparent",
+	paddingBlock: C.space[1],
+	paddingInline: C.space[2],
+	font: "inherit",
+	fontSize: C.textSize.sm,
+	fontWeight: C.fontWeight.medium,
+	color: C.color.textMuted,
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: C.motion.duration.fast,
+	transitionTimingFunction: C.motion.easeStandard,
+	"& > svg": {
+		inlineSize: "1em",
+		blockSize: "1em",
+		flexShrink: 0
+	},
+	"&:hover:not(:disabled)": {
+		backgroundColor: C.color.surfaceHover,
+		color: C.color.text
+	},
+	"&:focus-visible": { ...n },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[a]: { transitionDuration: "0s" },
+	[i]: {
+		borderColor: "ButtonBorder",
+		"&:focus-visible": { outlineColor: "Highlight" }
+	}
+}), me = t({ "&:dir(rtl)": { transform: "scaleX(-1)" } });
+function he(e) {
+	return c(e) && e !== "";
+}
+function ge(e, t) {
+	return e.length === t.length && e.every((e, n) => e === t[n]);
+}
+function _e(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function ve(e) {
+	process.env.NODE_ENV !== "production" && console.warn(`SheetStack: ${e}`);
+}
+function ye(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	return e.filter((e) => !t.has(e) || n.has(e) ? !1 : (n.add(e), !0));
+}
+function be(e) {
+	return !!(e?.isConnected && typeof e.focus == "function");
+}
+function xe(e) {
+	let t = e.getBoundingClientRect().width;
+	return t > 0 || !(e instanceof HTMLDialogElement) ? t : e.ownerDocument.documentElement.clientWidth;
+}
+function Se(e, t, n, r) {
+	let [i, a] = S(!1);
+	return y(() => {
+		if (n !== "auto" || !e || !t) return;
+		let i = (e) => {
+			e > 0 && a(e >= r);
+		};
+		i(xe(e));
+		let o = e.ownerDocument.defaultView;
+		if (!o || o.ResizeObserver === void 0) return;
+		let s = new o.ResizeObserver(([e]) => i(e?.contentRect.width ?? 0));
+		return s.observe(e), () => s.disconnect();
+	}, [
+		e,
+		t,
+		n,
+		r
+	]), n === "auto" ? i ? "dialog" : "sheet" : n;
+}
+function Ce({ value: e, defaultValue: t, onValueChange: n, variant: r = "auto", breakpoint: i = z, contained: a = !1, children: o }) {
+	let [c = B, l] = s(e, t ?? B, n), u = x(/* @__PURE__ */ new Map()), [d, p] = S(0), [m, g] = S(null), [v, y] = S(null), [C, E] = S({
+		label: void 0,
+		labelledBy: void 0,
+		describedBy: void 0
+	}), D = x(!1), O = b(() => ye(c, u.current), [c, d]), k = x(O);
+	k.current = O;
+	let A = O.length > 0, j = Se(v, A, r, i), ee = x("");
+	_(() => {
+		let e = u.current, t = c.filter((t) => !e.has(t)), n = [t.length > 0 && `unknown sheet keys ${JSON.stringify(t)}`, new Set(c).size !== c.length && `duplicate sheet keys in ${JSON.stringify(c)}`].filter(Boolean), r = n.length > 0 ? `ignoring ${n.join(" and ")}.` : "";
+		r && r !== ee.current && ve(r), ee.current = r;
+	}, [c, d]);
+	let N = h((e, t) => {
+		let n = u.current;
+		n.has(e) && n.get(e) !== t && ve(`more than one Content declares "${e}".`), n.set(e, t), p((e) => e + 1);
+	}, []), P = h((e, t) => {
+		u.current.get(e) === t && (u.current.delete(e), p((e) => e + 1));
+	}, []), F = h((e) => {
+		E((t) => t.label === e.label && t.labelledBy === e.labelledBy && t.describedBy === e.describedBy ? t : e);
+	}, []), I = h((e) => {
+		e || l([]);
+	}, [l]), L = f(A, I), { setOpen: R } = L, te = x(null), V = h((e) => {
+		let t = k.current;
+		if (e.length > 0 && !a && R(!0), ge(e, t)) return;
+		let n = v?.ownerDocument ?? (typeof document > "u" ? void 0 : document);
+		te.current = n?.activeElement ?? null, l([...e]);
+	}, [
+		a,
+		R,
+		v,
+		l
+	]), H = h((e) => {
+		if (!u.current.has(e)) {
+			ve(`push("${e}") ignored: no Content declares it.`);
+			return;
+		}
+		let t = k.current, n = t.indexOf(e);
+		V(n === -1 ? [...t, e] : t.slice(0, n + 1));
+	}, [V]), ne = h((e) => {
+		let t = k.current.indexOf(e);
+		t === -1 ? ve(`popTo("${e}") ignored: the sheet is not open.`) : V(k.current.slice(0, t + 1));
+	}, [V]), U = h(() => {
+		k.current.length > 0 && V(k.current.slice(0, -1));
+	}, [V]), W = h(() => {
+		k.current.length > 0 && V(B);
+	}, [V]), G = h(() => {
+		let e = k.current.at(-1), t = e === void 0 ? void 0 : u.current.get(e);
+		if (!t?.dismissible) return;
+		let n = new Event("cancel", { cancelable: !0 });
+		t.onCancel?.(n), n.defaultPrevented || U();
+	}, [U]);
+	we(O, u, te, a);
+	let K = b(() => ({
+		value: O,
+		push: H,
+		pop: U,
+		popTo: ne,
+		close: W,
+		contained: a,
+		variant: j,
+		stage: m,
+		setStage: g,
+		setLayer: y,
+		register: N,
+		unregister: P,
+		setNaming: F,
+		dismissTop: G,
+		escapeOwnedByChildRef: D
+	}), [
+		O,
+		H,
+		U,
+		ne,
+		W,
+		a,
+		j,
+		m,
+		N,
+		P,
+		F,
+		G
+	]);
+	return /* @__PURE__ */ T(M.Provider, {
+		value: K,
+		children: [o, a ? /* @__PURE__ */ w(De, {
+			open: A,
+			variant: j
+		}) : /* @__PURE__ */ w(Ee, {
+			native: {
+				...L,
+				open: A
+			},
+			naming: C,
+			variant: j
+		})]
+	});
+}
+Ce.displayName = "SheetStack";
+function we(e, t, n, r) {
+	let i = x(B), a = x(/* @__PURE__ */ new Map()), o = x(null);
+	y(() => {
+		let r = i.current;
+		if (ge(r, e)) return;
+		let s = e.at(-1), c = s === void 0 ? null : t.current.get(s)?.panel ?? null, l = c?.ownerDocument.activeElement;
+		o.current = c && l && c.contains(l) && l !== c ? l : null;
+		let u = n.current ?? (o.current ? null : l ?? null);
+		n.current = null;
+		for (let t of e) r.includes(t) || a.current.set(t, u);
+	}, [
+		e,
+		t,
+		n
+	]), _(() => {
+		let n = i.current;
+		if (i.current = e, ge(n, e)) return;
+		let r = a.current, s = e.at(-1);
+		if (s === void 0) {
+			let e = n[0] === void 0 ? void 0 : r.get(n[0]);
+			be(e) && e.focus();
+		} else {
+			let e = t.current.get(s)?.panel;
+			if (e) {
+				let t = n.includes(s), i = t ? n[n.indexOf(s) + 1] : void 0, a = i === void 0 ? void 0 : r.get(i);
+				(t ? be(a) && e.contains(a) ? a : Te(e) : o.current ?? e.querySelector("[autofocus]") ?? Te(e)).focus();
+			}
+		}
+		o.current = null;
+		for (let t of r.keys()) e.includes(t) || r.delete(t);
+	}, [e, t]), _(() => () => {
+		if (!r) return;
+		let e = i.current[0], t = e === void 0 ? void 0 : a.current.get(e);
+		be(t) && t.focus();
+	}, [r]);
+}
+function Te(e) {
+	return e.querySelector("[data-ui~=\"sheet-stack-title\"]") ?? e.querySelector("[data-ui~=\"sheet-stack-back\"]:not(:disabled)") ?? e;
+}
+function Ee({ native: e, naming: t, variant: n }) {
+	let { setStage: r, setLayer: i, dismissTop: a, escapeOwnedByChildRef: o } = N("Layer"), s = x(null), c = (e) => {
+		e.target === s.current && (e.preventDefault(), o.current ? o.current = !1 : e.nativeEvent.cancelable && a());
+	}, l = p({
+		...e,
+		requestClose: a
+	}, { onCancel: c }, void 0, s), u = A([l.ref, i]);
+	return /* @__PURE__ */ w("dialog", {
+		...l,
+		ref: u,
+		"data-ui": "sheet-stack-layer",
+		"data-variant": n,
+		"aria-modal": "true",
+		"aria-label": t.label,
+		"aria-labelledby": t.labelledBy,
+		"aria-describedby": t.describedBy,
+		css: X,
+		children: /* @__PURE__ */ w("div", {
+			ref: r,
+			"data-ui": "sheet-stack-stage",
+			css: ie
+		})
+	});
+}
+Ee.displayName = "SheetStack.Layer";
+function De({ open: e, variant: t }) {
+	let { setStage: n, setLayer: r, dismissTop: i } = N("Layer"), [a, o] = S(null), { context: s } = k({
+		open: e,
+		elements: { floating: a }
+	}), c = A([o, r]);
+	return /* @__PURE__ */ w(O, {
+		context: s,
+		disabled: !e || !a,
+		modal: !0,
+		outsideElementsInert: !0,
+		initialFocus: -1,
+		returnFocus: !1,
+		closeOnFocusOut: !1,
+		children: /* @__PURE__ */ T("div", {
+			ref: c,
+			"data-ui": "sheet-stack-layer",
+			"data-contained": "",
+			"data-variant": t,
+			hidden: !e,
+			css: Z,
+			children: [/* @__PURE__ */ w("div", {
+				"data-ui": "sheet-stack-scrim",
+				"aria-hidden": "true",
+				css: re,
+				onClick: i
+			}), /* @__PURE__ */ w("div", {
+				ref: n,
+				"data-ui": "sheet-stack-stage",
+				css: ie
+			})]
+		})
+	});
+}
+De.displayName = "SheetStack.Layer";
+function Oe({ ref: e, value: t, onClick: n, className: r, sx: i, ...a }) {
+	let { value: s, push: c } = N("Trigger"), l = (e) => {
+		n?.(e), e.defaultPrevented || c(t);
+	};
+	return /* @__PURE__ */ w(o, {
+		className: r,
+		styles: d,
+		sx: i,
+		children: (n) => /* @__PURE__ */ w("button", {
+			type: "button",
+			...a,
+			ref: e,
+			"data-ui": "sheet-stack-trigger",
+			"aria-haspopup": "dialog",
+			"aria-expanded": s.includes(t),
+			onClick: l,
+			className: n
+		})
+	});
+}
+Oe.displayName = "SheetStack.Trigger";
+function ke(e, t, n) {
+	let r = x(null), i = x(null), a = x(0), o = h(() => {
+		i.current?.stop(), i.current = null, r.current = null, a.current = 0, t.current && (t.current.style.translate = "");
+	}, [t]);
+	return _(() => o, [o]), b(() => {
+		if (!e) return null;
+		let o = (e, t) => {
+			a.current = t, e.style.translate = t === 0 ? "" : `0 ${t}px`;
+		}, s = (e, a) => {
+			let s = r.current, c = t.current;
+			if (!s || s.pointerId !== e.pointerId) return;
+			r.current = null, e.currentTarget.removeAttribute("data-dragging");
+			let l = [...s.samples, {
+				position: e.clientY,
+				time: e.timeStamp
+			}].filter((t) => e.timeStamp - t.time <= I.velocityWindowMs), u = l[0], d = l.at(-1), f = u && d ? (d.time - u.time) / 1e3 : 0, p = u && d && f > 0 ? (d.position - u.position) / f : 0;
+			a && (s.offset >= s.extent * I.distanceRatio || p >= I.velocity) && n(), c && c.isConnected && s.offset !== 0 && (i.current = E(s.offset, 0, {
+				...I.releaseSpring,
+				velocity: p,
+				onUpdate: (e) => o(c, e)
+			}));
+		};
+		return {
+			onPointerDown: (e) => {
+				let n = t.current;
+				if (!e.isPrimary || e.button !== 0 || !n || e.target instanceof Element && e.target.closest(R) || n.ownerDocument.defaultView?.matchMedia(L).matches) return;
+				i.current?.stop();
+				let o = a.current;
+				r.current = {
+					pointerId: e.pointerId,
+					start: e.clientY - o,
+					extent: n.getBoundingClientRect().height,
+					offset: o,
+					samples: [{
+						position: e.clientY,
+						time: e.timeStamp
+					}]
+				}, e.currentTarget.setPointerCapture?.(e.pointerId), e.currentTarget.setAttribute("data-dragging", "");
+			},
+			onPointerMove: (e) => {
+				let n = r.current, i = t.current;
+				if (!n || n.pointerId !== e.pointerId || !i) return;
+				let a = e.clientY - n.start;
+				n.offset = a >= 0 ? a : a * I.opposingResistance, n.samples = [...n.samples, {
+					position: e.clientY,
+					time: e.timeStamp
+				}].filter((t) => e.timeStamp - t.time <= I.velocityWindowMs), o(i, n.offset);
+			},
+			onPointerUp: (e) => s(e, !0),
+			onPointerCancel: (e) => s(e, !1),
+			onLostPointerCapture: (e) => s(e, !1)
+		};
+	}, [
+		e,
+		t,
+		n
+	]);
+}
+function Ae({ ref: e, value: t, className: n, sx: r, ...i }) {
+	let { children: a, dismissible: s = !0, onCancel: c, withDescription: l = !0, onKeyDown: u, onKeyDownCapture: d, onKeyUp: f, style: p, "aria-label": m, "aria-labelledby": g, "aria-describedby": _, ...C } = i, E = N("Content"), { contained: D, variant: O, stage: k, register: M, unregister: P, setNaming: F, dismissTop: I, escapeOwnedByChildRef: L } = E, R = v(), z = `${R}-title`, B = `${R}-description`, [V, H] = S(!1), [ne, U] = S(!1), W = x(null), G = E.value.indexOf(t), K = G !== -1, q = E.value.length - 1 - G, J = K && q === 0, [Y] = S(() => ({
+		dismissible: s,
+		onCancel: c,
+		panel: null
+	}));
+	y(() => {
+		Y.dismissible = s, Y.onCancel = c;
+	}), y(() => (M(t, Y), () => P(t, Y)), [
+		t,
+		Y,
+		M,
+		P
+	]);
+	let X = _e(g, V && z), Z = _e(_, l && ne && B);
+	y(() => {
+		J && !D && F({
+			label: m,
+			labelledBy: X,
+			describedBy: Z
+		});
+	}, [
+		J,
+		D,
+		m,
+		X,
+		Z,
+		F
+	]), y(() => {
+		let e = W.current, t = e?.ownerDocument.defaultView;
+		if (!J || !e || !k || !t || t.ResizeObserver === void 0) return;
+		let n = new t.ResizeObserver(() => {
+			k.style.setProperty("--sheet-stack-active-size", `${e.offsetHeight}px`);
+		});
+		return n.observe(e), () => n.disconnect();
+	}, [J, k]);
+	let re = h((e) => {
+		Y.panel = e;
+	}, [Y]), ie = A([
+		W,
+		e,
+		re
+	]), Q = ke(J && s && !("data-sheet-no-drag" in C), W, I), se = b(() => ({
+		titleId: z,
+		descriptionId: B,
+		setHasTitle: H,
+		setHasDescription: U
+	}), [z, B]), de = (e) => {
+		d?.(e), e.key === "Escape" && (L.current = !!W.current?.querySelector(te));
+	}, fe = (e) => {
+		u?.(e), D && J && e.key === "Escape" && !e.nativeEvent.isComposing && (e.defaultPrevented || L.current || (e.preventDefault(), I()));
+	}, pe = (e) => {
+		f?.(e), e.key === "Escape" && (L.current = !1);
+	};
+	if (!K || !k) return null;
+	let $ = D && J, me = {
+		...p,
+		"--sheet-stack-index": G,
+		"--sheet-stack-depth": q
+	};
+	return j(/* @__PURE__ */ w(ee.Provider, {
+		value: se,
+		children: /* @__PURE__ */ w(o, {
+			className: n,
+			styles: [
+				ae,
+				oe[O],
+				!J && ce[O]
+			],
+			sx: r,
+			children: (e) => /* @__PURE__ */ T("div", {
+				...C,
+				ref: ie,
+				"data-ui": "sheet-stack",
+				"data-state": J ? "active" : "parent",
+				"data-variant": O,
+				"data-depth": q,
+				role: $ ? "dialog" : void 0,
+				"aria-modal": $ ? "true" : void 0,
+				"aria-label": $ ? m : void 0,
+				"aria-labelledby": $ ? X : void 0,
+				"aria-describedby": $ ? Z : void 0,
+				"aria-hidden": J ? void 0 : "true",
+				inert: !J,
+				tabIndex: -1,
+				style: me,
+				onKeyDownCapture: de,
+				onKeyDown: fe,
+				onKeyUp: pe,
+				className: e,
+				children: [/* @__PURE__ */ w("div", {
+					...Q,
+					"data-ui": "sheet-stack-handle",
+					"data-draggable": Q ? "" : void 0,
+					"aria-hidden": "true",
+					css: le
+				}), /* @__PURE__ */ w("div", {
+					"data-ui": "sheet-stack-body",
+					css: ue,
+					children: a
+				})]
+			})
+		})
+	}), k);
+}
+Ae.displayName = "SheetStack.Content";
+function je({ ref: e, level: t = 2, className: n, sx: r, children: i, ...a }) {
+	let { titleId: s, setHasTitle: c } = P("Title"), l = he(i);
+	if (_(() => {
+		if (l) return c(!0), () => c(!1);
+	}, [l, c]), !l) return null;
+	let u = `h${t}`;
+	return /* @__PURE__ */ w(o, {
+		className: n,
+		styles: fe,
+		sx: r,
+		children: (t) => /* @__PURE__ */ w(u, {
+			tabIndex: -1,
+			...a,
+			ref: e,
+			id: s,
+			"data-ui": "sheet-stack-title",
+			className: t,
+			children: i
+		})
+	});
+}
+je.displayName = "SheetStack.Title";
+function Me({ ref: e, className: t, sx: n, children: r, ...i }) {
+	let { descriptionId: a, setHasDescription: s } = P("Description"), c = he(r);
+	return _(() => {
+		if (c) return s(!0), () => s(!1);
+	}, [c, s]), c ? /* @__PURE__ */ w(o, {
+		className: t,
+		styles: pe,
+		sx: n,
+		children: (t) => /* @__PURE__ */ w("p", {
+			...i,
+			ref: e,
+			id: a,
+			"data-ui": "sheet-stack-description",
+			className: t,
+			children: r
+		})
+	}) : null;
+}
+Me.displayName = "SheetStack.Description";
+function Ne({ ref: e, className: t, sx: n, ...r }) {
+	return P("Footer"), /* @__PURE__ */ w(o, {
+		className: t,
+		styles: de,
+		sx: n,
+		children: (t) => /* @__PURE__ */ w("div", {
+			...r,
+			ref: e,
+			"data-ui": "sheet-stack-footer",
+			className: t
+		})
+	});
+}
+Ne.displayName = "SheetStack.Footer";
+function Pe() {
+	return /* @__PURE__ */ w("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		css: me,
+		children: /* @__PURE__ */ w("path", {
+			d: "M10 3 5 8l5 5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function Fe() {
+	return /* @__PURE__ */ w("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ w("path", {
+			d: "m4 4 8 8M12 4l-8 8",
+			strokeLinecap: "round"
+		})
+	});
+}
+function Ie({ ref: e, label: t, onClick: n, className: r, sx: i, children: a, ...s }) {
+	let { pop: c } = N("Back");
+	P("Back");
+	let l = (e) => {
+		n?.(e), e.defaultPrevented || c();
+	};
+	return /* @__PURE__ */ w(o, {
+		className: r,
+		styles: $,
+		sx: i,
+		children: (n) => /* @__PURE__ */ T("button", {
+			type: "button",
+			...s,
+			ref: e,
+			"aria-label": t,
+			"data-ui": "sheet-stack-back",
+			onClick: l,
+			className: n,
+			children: [/* @__PURE__ */ w(Pe, {}), a]
+		})
+	});
+}
+Ie.displayName = "SheetStack.Back";
+function Le({ ref: e, label: t, onClick: n, className: r, sx: i, children: a, ...s }) {
+	let { close: l } = N("Close"), u = (e) => {
+		n?.(e), e.defaultPrevented || l();
+	};
+	return /* @__PURE__ */ w(o, {
+		className: r,
+		styles: $,
+		sx: i,
+		children: (n) => /* @__PURE__ */ w("button", {
+			type: "button",
+			...s,
+			ref: e,
+			"aria-label": t,
+			"data-ui": "sheet-stack-close",
+			onClick: u,
+			className: n,
+			children: c(a) ? a : /* @__PURE__ */ w(Fe, {})
+		})
+	});
+}
+Le.displayName = "SheetStack.Close";
+var Re = Object.assign(Ce, {
+	Trigger: Oe,
+	Content: Ae,
+	Title: je,
+	Description: Me,
+	Footer: Ne,
+	Back: Ie,
+	Close: Le
+});
+//#endregion
+export { F as n, Re as t };