@jfrader/ui 0.3.0 → 0.5.0

package/dist/bottom-sheet-DPJBFkie.js

@@ -0,0 +1,673 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-BJdvqqvn.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { n as c, t as l } from "./surface-DZ4d-2aL.js";
+import { t as u } from "./trigger-style-B1KVC8O1.js";
+import { n as d, r as f } from "./overlay-layer-SeUyyEPD.js";
+import { i as p, r as m, t as h } from "./use-native-dialog-DWpIUVO1.js";
+import { createContext as g, useCallback as _, useContext as v, useEffect as y, useId as b, useMemo as x, useRef as S, useState as C } from "react";
+import { vars as w } from "@jfrader/tokens/vars";
+import { jsx as T, jsxs as E } from "@emotion/react/jsx-runtime";
+import { useFloating as D, useFloatingTree as O, useInteractions as k, useMergeRefs as A } from "@floating-ui/react";
+import { getDeepestNode as j } from "@floating-ui/react/utils";
+import { MotionConfig as M, animate as N, useMotionValue as P, useReducedMotion as F } from "motion/react";
+//#region src/components/bottom-sheet/bottom-sheet.tsx
+var I = [.45, .92], L = "36rem", R = {
+	type: "spring",
+	stiffness: 400,
+	damping: 40,
+	mass: 1
+}, z = .2, ee = 320, B = 80, V = 120, H = 8, U = [
+	"button:not([data-ui=\"bottom-sheet-handle\"])",
+	"a[href]",
+	"input",
+	"select",
+	"textarea",
+	"label",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[data-ui=\"bottom-sheet-title\"]",
+	"[data-ui=\"bottom-sheet-description\"]"
+].join(", "), te = "button, a[href], input, select, textarea, [contenteditable]:not([contenteditable=\"false\"])", ne = e({
+	...l,
+	position: "fixed",
+	inset: 0,
+	margin: 0,
+	inlineSize: "100%",
+	blockSize: "100dvh",
+	maxInlineSize: "none",
+	maxBlockSize: "none",
+	overflow: "hidden",
+	"&::backdrop": { backgroundColor: "transparent" }
+}), re = e({
+	position: "absolute",
+	inset: 0,
+	backgroundColor: w.color.scrim,
+	pointerEvents: "none",
+	opacity: "var(--sheet-scrim, 1)"
+}), ie = e({
+	...c,
+	position: "absolute",
+	insetBlockStart: 0,
+	insetInline: 0,
+	marginInline: "auto",
+	inlineSize: "100%",
+	maxInlineSize: L,
+	blockSize: "var(--sheet-height, 45dvh)",
+	display: "flex",
+	flexDirection: "column",
+	minBlockSize: 0,
+	borderStartStartRadius: w.radius.lg,
+	borderStartEndRadius: w.radius.lg,
+	boxShadow: w.shadow.floating,
+	paddingBlockEnd: "env(safe-area-inset-bottom, 0px)",
+	"&:focus-visible": n,
+	[r]: {
+		boxShadow: "none",
+		borderColor: "CanvasText"
+	}
+}), ae = e({
+	flexShrink: 0,
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	gap: w.space[2],
+	paddingInline: w.space[6],
+	paddingBlock: w.space[2],
+	"& > [data-ui=\"bottom-sheet-handle\"]": {
+		gridColumn: "1 / -1",
+		justifySelf: "center",
+		touchAction: "none"
+	},
+	"& > [data-ui=\"bottom-sheet-close\"]": {
+		gridColumn: 2,
+		gridRow: 2
+	}
+}), oe = e({
+	flex: "1 1 auto",
+	minBlockSize: 0,
+	overflow: "auto",
+	overscrollBehavior: "contain",
+	paddingInline: w.space[6],
+	paddingBlock: w.space[4],
+	fontSize: w.textSize.sm,
+	"&:focus-visible": n
+}), se = e({
+	flexShrink: 0,
+	display: "flex",
+	flexWrap: "wrap",
+	gap: w.space[2],
+	paddingInline: w.space[6],
+	paddingBlock: w.space[4],
+	borderBlockStart: `1px solid ${w.color.border}`
+}), ce = e({
+	margin: 0,
+	fontSize: w.textSize.lg,
+	lineHeight: w.lineHeight.tight,
+	fontWeight: w.fontWeight.semibold
+}), le = e({
+	margin: 0,
+	color: w.color.textMuted,
+	fontSize: w.textSize.sm
+}), W = e({
+	appearance: "none",
+	minInlineSize: w.space[8],
+	minBlockSize: w.space[8],
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	paddingInline: w.space[3],
+	paddingBlock: w.space[1],
+	border: "1px solid transparent",
+	borderRadius: w.radius.md,
+	color: w.color.textMuted,
+	backgroundColor: "transparent",
+	font: "inherit",
+	cursor: "pointer",
+	"&:focus-visible": n,
+	"&:disabled": { cursor: "not-allowed" },
+	[r]: { borderColor: "ButtonText" },
+	[i]: { transition: "none" }
+}), ue = e({
+	"&::after": {
+		content: "\"\"",
+		inlineSize: w.space[10],
+		blockSize: w.space[1],
+		borderRadius: w.radius.full,
+		backgroundColor: w.color.borderControl
+	},
+	[r]: { "&::after": {
+		backgroundColor: "ButtonText",
+		outline: "1px solid ButtonText"
+	} }
+}), G = o, K = g(null), q = g(null);
+function J(e) {
+	let t = v(K);
+	if (!t) throw Error(`BottomSheet.${e} must be rendered inside <BottomSheet>.`);
+	return t;
+}
+function de(e) {
+	if (!e.length || e.some((t, n) => !Number.isFinite(t) || t <= 0 || t > 1 || n > 0 && t <= e[n - 1])) throw Error("BottomSheet.detents must be nonempty, finite, strictly ascending unique fractions in (0, 1].");
+}
+function fe({ nodeId: e, open: t, defaultOpen: n = !1, onOpenChange: r, detents: i = I, value: o, defaultValue: s = 0, onValueChange: c, locale: l, getValueText: u, children: d }) {
+	de(i);
+	let m = S([...i]);
+	if (i.length !== m.current.length || i.some((e, t) => e !== m.current[t])) throw Error("BottomSheet.detents numeric contents require remount to change.");
+	let [h = 0, g] = a(o, s, c);
+	if (!Number.isInteger(h) || h < 0 || h >= i.length || !Number.isInteger(s) || s < 0 || s >= i.length) throw Error("BottomSheet value/defaultValue must be valid detent indices.");
+	let [v = !1, w] = a(t, n, r), E = p(v, w), [O, A] = C(null), [j, M] = C(!1), N = _((e) => {
+		E.setDialogElement(e), A(e);
+	}, [E.setDialogElement]);
+	y(() => {
+		let e = () => M(O?.open ?? !1);
+		if (e(), !O) return;
+		let t = O.ownerDocument.defaultView?.MutationObserver;
+		if (!t) return;
+		let n = new t(e);
+		return n.observe(O, {
+			attributes: !0,
+			attributeFilter: ["open"]
+		}), () => n.disconnect();
+	}, [O]);
+	let P = D({
+		nodeId: e,
+		open: v && j,
+		onOpenChange: (e) => e ? E.setOpen(!0) : E.requestClose()
+	}), F = f(P.context, "container"), L = k(F), R = b(), [z, ee] = C(!1), [B, V] = C(!1), H = x(() => {
+		let e = m.current[h];
+		return u?.(e, h) ?? new Intl.NumberFormat(l, { style: "percent" }).format(e);
+	}, [
+		u,
+		l,
+		h
+	]), U = x(() => ({
+		...E,
+		setDialogElement: N,
+		open: v,
+		detents: m.current,
+		value: h,
+		requestValue: g,
+		valueText: H,
+		panelId: `${R}-panel`,
+		valueTextId: `${R}-value`,
+		titleId: `${R}-title`,
+		descriptionId: `${R}-description`,
+		hasTitle: z,
+		hasDescription: B,
+		setHasTitle: ee,
+		setHasDescription: V,
+		floating: P,
+		interactions: L
+	}), [
+		E.setOpen,
+		E.requestClose,
+		E.repairToken,
+		N,
+		v,
+		h,
+		g,
+		H,
+		R,
+		z,
+		B,
+		P,
+		L
+	]);
+	return /* @__PURE__ */ T(K.Provider, {
+		value: U,
+		children: d
+	});
+}
+function Y(e) {
+	return /* @__PURE__ */ T(M, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ T(d, { children: (t) => /* @__PURE__ */ T(fe, {
+			...e,
+			nodeId: t
+		}) })
+	});
+}
+Y.displayName = "BottomSheet";
+function X({ ref: e, onClick: n, className: r, sx: i, ...a }) {
+	let o = J("Trigger"), s = A([e, o.floating.refs.setReference]);
+	return /* @__PURE__ */ T(t, {
+		className: r,
+		styles: u,
+		sx: i,
+		children: (e) => /* @__PURE__ */ T("button", {
+			type: "button",
+			...a,
+			ref: s,
+			"data-ui": "bottom-sheet-trigger",
+			"aria-haspopup": "dialog",
+			"aria-expanded": o.open,
+			className: e,
+			onClick: (e) => {
+				n?.(e), e.defaultPrevented || o.setOpen(!0);
+			}
+		})
+	});
+}
+X.displayName = "BottomSheet.Trigger";
+function pe(e, t) {
+	let n = S(null), r = S(null), i = P(0), a = S(0), o = S(0), s = S(null), c = S(null), l = S(!1), u = F(), d = S({
+		context: e,
+		reduced: u
+	});
+	d.current = {
+		context: e,
+		reduced: u
+	};
+	let f = () => a.current * (1 - d.current.context.detents[d.current.context.value]), p = _(() => {
+		s.current?.stop(), d.current.reduced ? i.set(f()) : s.current = N(i, f(), R);
+	}, [i]), m = _(() => {
+		let e = c.current;
+		return e ? (c.current = null, e.capture?.hasPointerCapture(e.id) && e.capture.releasePointerCapture(e.id), l.current = !0, p(), !0) : !1;
+	}, [p]);
+	y(() => {
+		let e = t.current, r = n.current, l = e?.ownerDocument.defaultView;
+		if (!e || !r || !l) return;
+		let u = (t) => {
+			r.style.transform = `translateY(${t}px)`, r.style.setProperty("--sheet-height", `${Math.max(0, a.current - t) + o.current}px`), e.style.setProperty("--sheet-scrim", String(Math.min(1, Math.max(0, (a.current - t) / Math.max(1, a.current)))));
+		}, d = () => {
+			let t = l.visualViewport;
+			m();
+			let n = t?.height ?? l.innerHeight;
+			o.current = Number.parseFloat(l.getComputedStyle(r).paddingBottom) || 0, a.current = Math.max(1, n - o.current), e.style.blockSize = `${n}px`, e.style.insetBlockStart = `${t?.offsetTop ?? 0}px`, s.current?.stop(), c.current = null, i.set(f()), u(i.get());
+		};
+		d();
+		let p = i.on("change", u), h = (e) => {
+			c.current && c.current.id !== e.pointerId && m();
+		};
+		return l.addEventListener("pointerdown", h, !0), l.addEventListener("resize", d), l.visualViewport?.addEventListener("resize", d), l.visualViewport?.addEventListener("scroll", d), () => {
+			p(), s.current?.stop();
+			let e = c.current;
+			c.current = null, e?.capture?.hasPointerCapture(e.id) && e.capture.releasePointerCapture(e.id), l.removeEventListener("pointerdown", h, !0), l.removeEventListener("resize", d), l.visualViewport?.removeEventListener("resize", d), l.visualViewport?.removeEventListener("scroll", d);
+		};
+	}, [
+		t,
+		i,
+		m
+	]), y(() => {
+		m(), p();
+	}, [
+		e.value,
+		e.open,
+		p,
+		u,
+		m
+	]);
+	let h = (e, t, n, r = null) => {
+		s.current?.stop(), l.current = !1, c.current = {
+			id: e,
+			start: t,
+			origin: i.get(),
+			samples: [{
+				position: t,
+				time: n
+			}],
+			moved: !1,
+			capture: r
+		};
+	}, g = (e, t) => {
+		let n = c.current;
+		if (!n) return;
+		let r = e - n.start;
+		n.moved ||= Math.abs(r) > H;
+		let o = n.origin + r, s = a.current * (1 - d.current.context.detents.at(-1)), l = s - o;
+		i.set(o < s ? d.current.reduced ? s : s - V * l / (V + l) : o), n.samples = [...n.samples, {
+			position: e,
+			time: t
+		}].filter((e) => t - e.time <= B);
+	}, v = (e, t) => {
+		let n = c.current;
+		if (!n) return;
+		c.current = null, l.current = n.moved;
+		let r = [...n.samples, {
+			position: e,
+			time: t
+		}].filter((e) => t - e.time <= B)[0], o = r ? (t - r.time) / 1e3 : 0, s = r && o > 0 ? (e - r.position) / o : 0, u = i.get() + s * z, { detents: f, requestClose: m, requestValue: h } = d.current.context, g = a.current * f[0], _ = a.current - g / 2;
+		n.moved && (u > _ || s >= ee && i.get() > a.current * (1 - f[0])) ? m() : n.moved && h(f.reduce((e, t, n) => Math.abs(a.current * (1 - t) - u) < Math.abs(a.current * (1 - f[e]) - u) ? n : e, 0)), p();
+	};
+	return y(() => {
+		let e = r.current, t = e?.ownerDocument.defaultView;
+		if (!e || !t) return;
+		let n = null, i = !1, a = () => {
+			e.removeEventListener("touchmove", o), i = !1;
+		}, o = (t) => {
+			if (!n || t.touches.length !== 1) {
+				m(), a();
+				return;
+			}
+			let r = t.touches[0], i = r.clientX - n.x, o = r.clientY - n.y;
+			if (Math.abs(i) > Math.abs(o)) {
+				a(), n = null;
+				return;
+			}
+			if (Math.abs(o) < H) return;
+			if (c.current) {
+				t.cancelable && t.preventDefault(), g(r.clientY, t.timeStamp);
+				return;
+			}
+			let s = d.current.context;
+			s.value < s.detents.length - 1 ? (s.requestValue(s.detents.length - 1), a()) : o > 0 && e.scrollTop <= 0 && (h(n.id, n.y, t.timeStamp), t.cancelable && t.preventDefault(), g(r.clientY, t.timeStamp));
+		}, s = (r) => {
+			if (a(), r.touches.length !== 1) {
+				m();
+				return;
+			}
+			let s = r.target;
+			if (s.closest(te) || t.getSelection()?.toString()) return;
+			for (let n = s; n && n !== e; n = n.parentElement) {
+				let e = t.getComputedStyle(n);
+				if (n.scrollWidth > n.clientWidth && /auto|scroll/.test(e.overflowX) || n.scrollHeight > n.clientHeight && /auto|scroll/.test(e.overflowY)) return;
+			}
+			let c = r.touches[0];
+			n = {
+				x: c.clientX,
+				y: c.clientY,
+				id: c.identifier,
+				target: s
+			}, e.addEventListener("touchmove", o, { passive: !1 }), i = !0;
+		}, l = (e) => {
+			let t = e.changedTouches[0];
+			c.current && t && v(t.clientY, e.timeStamp), a(), n = null;
+		}, u = () => {
+			m(), a(), n = null;
+		};
+		return e.addEventListener("touchstart", s, { passive: !0 }), e.addEventListener("touchend", l), e.addEventListener("touchcancel", u), () => {
+			i && a(), e.removeEventListener("touchstart", s), e.removeEventListener("touchend", l), e.removeEventListener("touchcancel", u);
+		};
+	}, [m]), {
+		panelRef: n,
+		bodyRef: r,
+		gesture: {
+			onPointerDown: (e) => {
+				c.current || !e.isPrimary ? m() : e.button !== 0 || e.defaultPrevented || e.target.closest(U) || (h(e.pointerId, e.clientY, e.timeStamp, e.currentTarget), e.currentTarget.setPointerCapture?.(e.pointerId));
+			},
+			onPointerMove: (e) => {
+				c.current?.id === e.pointerId && g(e.clientY, e.timeStamp);
+			},
+			onPointerUp: (e) => {
+				c.current?.id === e.pointerId && (v(e.clientY, e.timeStamp), e.currentTarget.hasPointerCapture?.(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId));
+			},
+			onPointerCancel: (e) => {
+				c.current?.id === e.pointerId && m();
+			},
+			onLostPointerCapture: (e) => {
+				c.current?.id === e.pointerId && m();
+			}
+		},
+		cancelDrag: m,
+		suppressClick: l
+	};
+}
+function Z({ ref: e, sx: n, className: r, ...i }) {
+	let { children: a, withDescription: o = !0, onCancel: s, onClose: c, onClick: l, onKeyDownCapture: u, onPointerDownCapture: d, "aria-labelledby": f, "aria-describedby": p, ...g } = h(i), _ = J("Content"), v = S(null), b = pe(_, v), x = O(), w = S(!1), D = m(_, {
+		onCancel: s,
+		onClick: (e) => {
+			l?.(e), w.current && (w.current = !1, e.preventDefault());
+		},
+		onClose: c
+	}, e, v), k = A([D.ref, _.floating.refs.setFloating]), M = S(_.value), [N, P] = C("");
+	y(() => {
+		M.current !== _.value && (M.current = _.value, P(_.valueText));
+	}, [_.value, _.valueText]);
+	let F = {
+		...g,
+		...D,
+		onCancel: (e) => {
+			e.target === v.current ? D.onCancel(e) : s?.(e);
+		},
+		onClose: (e) => {
+			e.target === v.current ? D.onClose(e) : c?.(e);
+		},
+		onPointerDownCapture: (e) => {
+			d?.(e);
+			let t = x && j(x.nodesRef.current, _.floating.context.nodeId);
+			w.current = !!(t && t.id !== _.floating.context.nodeId);
+		},
+		onKeyDownCapture: (e) => {
+			if (u?.(e), e.key !== "Escape" || e.defaultPrevented || e.nativeEvent.isComposing) return;
+			e.preventDefault();
+			let t = x && j(x.nodesRef.current, _.floating.context.nodeId);
+			(!t || t.id === _.floating.context.nodeId) && b.cancelDrag() && e.stopPropagation();
+		}
+	}, I = _.interactions.getFloatingProps(F);
+	return /* @__PURE__ */ T(t, {
+		className: r,
+		styles: ne,
+		sx: n,
+		children: (e) => /* @__PURE__ */ E("dialog", {
+			...I,
+			ref: k,
+			className: e,
+			"data-ui": "bottom-sheet",
+			"aria-modal": "true",
+			"aria-labelledby": [f, _.hasTitle && _.titleId].filter(Boolean).join(" ") || void 0,
+			"aria-describedby": [p, o && _.hasDescription && _.descriptionId].filter(Boolean).join(" ") || void 0,
+			children: [
+				/* @__PURE__ */ T("div", {
+					css: re,
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ T(q.Provider, {
+					value: b,
+					children: a
+				}),
+				/* @__PURE__ */ T("span", {
+					css: G,
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: N
+				}),
+				/* @__PURE__ */ T("span", {
+					css: G,
+					id: _.valueTextId,
+					children: _.valueText
+				})
+			]
+		})
+	});
+}
+Z.displayName = "BottomSheet.Content";
+function Q({ ref: e, sx: n, className: r, autoFocus: i = !0, ...a }) {
+	let o = J("Panel"), s = v(q), c = _((e) => {
+		i && e && !e.querySelector("[autofocus]") && e.setAttribute("autofocus", "");
+	}, [i]), l = A([
+		e,
+		s?.panelRef,
+		c
+	]);
+	return /* @__PURE__ */ T(t, {
+		className: r,
+		styles: ie,
+		sx: n,
+		children: (e) => /* @__PURE__ */ T("div", {
+			tabIndex: -1,
+			...a,
+			ref: l,
+			id: o.panelId,
+			"data-ui": "bottom-sheet-panel",
+			className: e
+		})
+	});
+}
+Q.displayName = "BottomSheet.Panel";
+function $({ ref: e, sx: n, className: r, ...i }) {
+	J("Header");
+	let a = v(q), o = Object.fromEntries(Object.entries(a?.gesture ?? {}).map(([e, t]) => [e, (n) => {
+		i[e]?.(n), n.defaultPrevented || t?.(n);
+	}]));
+	return /* @__PURE__ */ T(t, {
+		className: r,
+		styles: ae,
+		sx: n,
+		children: (t) => /* @__PURE__ */ T("div", {
+			...i,
+			...o,
+			ref: e,
+			"data-ui": "bottom-sheet-header",
+			className: t
+		})
+	});
+}
+$.displayName = "BottomSheet.Header";
+function me({ ref: e, sx: n, className: r, onKeyDown: i, onFocusCapture: a, ...o }) {
+	let s = J("Body"), c = v(q), l = A([e, c?.bodyRef]), u = S(null);
+	return y(() => () => {
+		let e = u.current;
+		e && e.window.cancelAnimationFrame(e.id);
+	}, []), /* @__PURE__ */ T(t, {
+		className: r,
+		styles: oe,
+		sx: n,
+		children: (e) => /* @__PURE__ */ T("div", {
+			...o,
+			ref: l,
+			"data-ui": "bottom-sheet-body",
+			className: e,
+			onKeyDown: (e) => {
+				i?.(e), !e.defaultPrevented && e.target === e.currentTarget && (e.key === "PageDown" || e.key === " " && !e.shiftKey) && s.value < s.detents.length - 1 && (e.preventDefault(), s.requestValue(s.detents.length - 1));
+			},
+			onFocusCapture: (e) => {
+				if (a?.(e), e.defaultPrevented || e.target === e.currentTarget) return;
+				s.requestValue(s.detents.length - 1);
+				let t = e.target, n = e.currentTarget, r = n.ownerDocument.defaultView;
+				if (!r) return;
+				let i = u.current;
+				i && i.window.cancelAnimationFrame(i.id), u.current = {
+					window: r,
+					id: r.requestAnimationFrame(() => {
+						if (u.current = null, !t.isConnected) return;
+						let e = n.getBoundingClientRect(), r = t.getBoundingClientRect();
+						r.top < e.top ? n.scrollTop += r.top - e.top : r.bottom > e.bottom && (n.scrollTop += r.bottom - e.bottom);
+					})
+				};
+			}
+		})
+	});
+}
+me.displayName = "BottomSheet.Body";
+function he({ ref: e, sx: n, className: r, ...i }) {
+	return J("Footer"), /* @__PURE__ */ T(t, {
+		className: r,
+		styles: se,
+		sx: n,
+		children: (t) => /* @__PURE__ */ T("div", {
+			...i,
+			ref: e,
+			"data-ui": "bottom-sheet-footer",
+			className: t
+		})
+	});
+}
+he.displayName = "BottomSheet.Footer";
+function ge({ ref: e, sx: n, className: r, children: i, ...a }) {
+	let { titleId: o, setHasTitle: c } = J("Title"), l = s(i) && i !== "";
+	return y(() => {
+		if (l) return c(!0), () => c(!1);
+	}, [l, c]), l ? /* @__PURE__ */ T(t, {
+		className: r,
+		styles: ce,
+		sx: n,
+		children: (t) => /* @__PURE__ */ T("h2", {
+			...a,
+			ref: e,
+			id: o,
+			"data-ui": "bottom-sheet-title",
+			className: t,
+			children: i
+		})
+	}) : null;
+}
+ge.displayName = "BottomSheet.Title";
+function _e({ ref: e, sx: n, className: r, children: i, ...a }) {
+	let { descriptionId: o, setHasDescription: c } = J("Description"), l = s(i) && i !== "";
+	return y(() => {
+		if (l) return c(!0), () => c(!1);
+	}, [l, c]), l ? /* @__PURE__ */ T(t, {
+		className: r,
+		styles: le,
+		sx: n,
+		children: (t) => /* @__PURE__ */ T("p", {
+			...a,
+			ref: e,
+			id: o,
+			"data-ui": "bottom-sheet-description",
+			className: t,
+			children: i
+		})
+	}) : null;
+}
+_e.displayName = "BottomSheet.Description";
+function ve({ ref: e, sx: n, className: r, onClick: i, onKeyDown: a, "aria-describedby": o, ...s }) {
+	let c = J("Handle"), l = v(q), u = c.detents.length - 1;
+	return /* @__PURE__ */ T(t, {
+		className: r,
+		styles: [W, ue],
+		sx: n,
+		children: (t) => /* @__PURE__ */ T("button", {
+			type: "button",
+			...s,
+			ref: e,
+			disabled: s.disabled || u === 0,
+			className: t,
+			"data-ui": "bottom-sheet-handle",
+			"aria-controls": c.panelId,
+			"aria-expanded": c.value === u,
+			"aria-describedby": [o, c.valueTextId].filter(Boolean).join(" "),
+			onClick: (e) => {
+				i?.(e), l?.suppressClick.current ? l.suppressClick.current = !1 : e.defaultPrevented || c.requestValue(c.value === u ? 0 : u);
+			},
+			onKeyDown: (e) => {
+				if (a?.(e), e.defaultPrevented) return;
+				(e.key === "Enter" || e.key === " ") && l && (l.suppressClick.current = !1);
+				let t = {
+					ArrowUp: Math.min(u, c.value + 1),
+					ArrowDown: Math.max(0, c.value - 1),
+					Home: u,
+					End: 0
+				}[e.key];
+				t !== void 0 && (e.preventDefault(), c.requestValue(t));
+			}
+		})
+	});
+}
+ve.displayName = "BottomSheet.Handle";
+function ye({ ref: e, sx: n, className: r, onClick: i, ...a }) {
+	let o = J("Close");
+	return /* @__PURE__ */ T(t, {
+		className: r,
+		styles: W,
+		sx: n,
+		children: (t) => /* @__PURE__ */ T("button", {
+			type: "button",
+			...a,
+			ref: e,
+			"data-ui": "bottom-sheet-close",
+			className: t,
+			onClick: (e) => {
+				i?.(e), e.defaultPrevented || o.requestClose();
+			}
+		})
+	});
+}
+ye.displayName = "BottomSheet.Close";
+var be = Object.assign(Y, {
+	Trigger: X,
+	Content: Z,
+	Panel: Q,
+	Header: $,
+	Body: me,
+	Footer: he,
+	Title: ge,
+	Description: _e,
+	Handle: ve,
+	Close: ye
+});
+//#endregion
+export { be as t };

package/dist/bottom-sheet.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as BottomSheet } from "./bottom-sheet-DPJBFkie.js";

package/dist/{breadcrumbs-DVAOxfvL.js → breadcrumbs-Cfw_hgt2.js}

@@ -1,7 +1,7 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-D_eA_I-e.js";
+import { r } from "./media-8yrN85VT.js";
 import { createContext as i, useCallback as a, useContext as o, useId as s, useImperativeHandle as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
 import { vars as p } from "@jfrader/tokens/vars";
 import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";

package/dist/breadcrumbs.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Breadcrumbs } from "./breadcrumbs-DVAOxfvL.js";
+export { t as Breadcrumbs } from "./breadcrumbs-Cfw_hgt2.js";

package/dist/{button-P2e7_44z.js → button-C92uYFJW.js}

@@ -1,7 +1,7 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-D_eA_I-e.js";
+import { r } from "./media-8yrN85VT.js";
 import { t as i } from "./icon-wrapper-stN8sD7R.js";
 import { n as a, t as o } from "./loading-ring-B8-30Dl1.js";
 import "react";

package/dist/button.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Button } from "./button-P2e7_44z.js";
+export { t as Button } from "./button-C92uYFJW.js";