@rinzai/zen 0.14.0 → 0.16.0

package/dist/tooltip/index.d.ts

@@ -10,14 +10,20 @@ export default function Tooltip({ children }: {
 }): import('react').JSX.Element;
 /** What the tooltip describes: a button by default. With `asChild`, your own focusable element instead. */
 export declare function TooltipTrigger({ asChild, style, onPointerEnter, onPointerLeave, onFocus, onBlur, onKeyDown, children, ...rest }: TooltipTriggerProps): import('react').JSX.Element;
-/** The hint: glass, below the trigger (above it if there's no room), centred on it by default. */
-export declare function TooltipContent({ align, offset, className, style, onPointerEnter, onPointerLeave, children, ...rest }: TooltipContentProps): import('react').JSX.Element;
+/**
+ * The hint: glass, below the trigger (above it if there's no room), centred on
+ * it by default. `side="beside"` puts it after the trigger instead (before it
+ * if there's no room), as for the icons of a collapsed sidebar.
+ */
+export declare function TooltipContent({ side, align, offset, className, style, onPointerEnter, onPointerLeave, children, ...rest }: TooltipContentProps): import('react').JSX.Element;
 export interface TooltipTriggerProps extends ComponentProps<'button'> {
     /** Put the trigger's props on your own focusable element instead of rendering a button. */
     asChild?: boolean;
 }
 export interface TooltipContentProps extends ComponentProps<'div'> {
-    /** Centred on the trigger (default), or lined up with its start or end edge. */
+    /** Below the trigger (default; above if there's no room), or beside it (after it; before if there's no room). */
+    side?: 'below' | 'beside';
+    /** Centred on the trigger (default), or lined up with its start or end edge (beside: its top or bottom). */
     align?: 'start' | 'end' | 'center';
     /** Gap from the trigger, in px. */
     offset?: number;

package/dist/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAUrF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAIrE;AAED,2GAA2G;AAC3G,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAerB;AAED,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,EAC3B,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAmBrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAUrF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAIrE;AAED,2GAA2G;AAC3G,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAerB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAc,EACd,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAyBrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,iHAAiH;IACjH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,4GAA4G;IAC5G,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/tooltip/index.js

@@ -48,28 +48,31 @@ function h({ asChild: e, style: t, onPointerEnter: i, onPointerLeave: a, onFocus
 		children: l
 	});
 }
-function g({ align: t = "center", offset: n = 5, className: r, style: s, onPointerEnter: c, onPointerLeave: l, children: f, ...m }) {
-	let h = p("TooltipContent"), g = u(null);
-	return a(g), /* @__PURE__ */ d("div", {
-		...m,
-		ref: g,
-		id: h.id,
+function g({ side: t = "below", align: n = "center", offset: r = 5, className: s, style: c, onPointerEnter: l, onPointerLeave: f, children: m, ...h }) {
+	let g = p("TooltipContent"), _ = u(null);
+	return a(_), /* @__PURE__ */ d("div", {
+		...h,
+		ref: _,
+		id: g.id,
 		role: "tooltip",
 		popover: "manual",
-		...h.contentProps({
-			onPointerEnter: c,
-			onPointerLeave: l
+		...g.contentProps({
+			onPointerEnter: l,
+			onPointerLeave: f
 		}),
+		"data-zen-beside": t === "beside" ? "" : void 0,
 		style: {
-			...i(h.id, {
-				align: t,
-				offset: n,
-				width: "at-least"
+			...i(g.id, {
+				side: t,
+				align: n,
+				offset: r,
+				width: t === "beside" ? void 0 : "at-least"
 			}),
-			...s
+			...t === "beside" && { marginBlock: 0 },
+			...c
 		},
-		className: e("zen__popover fixed z-50 overflow-visible p-0", o, r),
-		children: f
+		className: e("zen__popover fixed z-50 overflow-visible p-0", o, s),
+		children: m
 	});
 }
 //#endregion

package/dist/tree/index.js

@@ -1,19 +1,19 @@
 "use client";
-import e from "../icons/micro/chevron-right.js";
-import { cx as t } from "../utils/cx.js";
-import { readingKey as n } from "../utils/direction.js";
-import { useMessages as r } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import t from "../icons/micro/chevron-right.js";
+import { cx as n } from "../utils/cx.js";
+import { readingKey as r } from "../utils/direction.js";
 import { reducedMotion as i } from "../utils/motion.js";
 import { TableCell as a, TableRow as o } from "../table/index.js";
 import { useCallback as s, useMemo as c, useRef as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region packages/tree/index.tsx
-function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHeight: d = 36 }) {
+function p({ items: e, getKey: t, getChildren: a, defaultExpanded: o = !0, rowHeight: d = 36 }) {
 	let [f, p] = u(() => /* @__PURE__ */ new Set()), [m, h] = u(null), [g, _] = u(null), v = l(null), y = s((e) => f.has(e) !== o, [f, o]), b = c(() => {
-		let t = [], n = (e, i, o) => {
+		let n = [], r = (e, i, o) => {
 			e.forEach((s, c) => {
-				let l = r(s), u = a(s), d = !!u?.length, f = d && y(l);
-				t.push({
+				let l = t(s), u = a(s), d = !!u?.length, f = d && y(l);
+				n.push({
 					item: s,
 					key: l,
 					depth: i,
@@ -22,23 +22,23 @@ function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHe
 					expanded: f,
 					position: c + 1,
 					siblings: e.length
-				}), f && n(u, i + 1, l);
+				}), f && r(u, i + 1, l);
 			});
 		};
-		return n(e, 0, null), t;
+		return r(e, 0, null), n;
 	}, [
 		e,
-		r,
+		t,
 		a,
 		y
 	]), x = () => {
-		let t = [], n = (e) => {
+		let n = [], r = (e) => {
 			for (let i of e) {
 				let e = a(i);
-				e?.length && (t.push(r(i)), n(e));
+				e?.length && (n.push(t(i)), r(e));
 			}
 		};
-		return n(e), t;
+		return r(e), n;
 	}, S = s((e, t) => p((n) => {
 		let r = new Set(n);
 		return t === o ? r.delete(e) : r.add(e), r;
@@ -62,12 +62,12 @@ function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHe
 		}
 	}, [w, T] = u(null), E = b.some((e) => e.key === w) ? w : b[0]?.key ?? null, D = (e) => e.expanded && g !== e.key, O = (e, t) => {
 		if (t.target !== t.currentTarget) return;
-		let r = b.indexOf(e), i, a = n(t.key, t.currentTarget);
-		if (a === "ArrowDown") i = b[r + 1];
-		else if (a === "ArrowUp") i = b[r - 1];
+		let n = b.indexOf(e), i, a = r(t.key, t.currentTarget);
+		if (a === "ArrowDown") i = b[n + 1];
+		else if (a === "ArrowUp") i = b[n - 1];
 		else if (a === "Home") i = b[0];
 		else if (a === "End") i = b.at(-1);
-		else if (a === "ArrowRight" && e.hasChildren) D(e) ? i = b[r + 1] : C(e.key);
+		else if (a === "ArrowRight" && e.hasChildren) D(e) ? i = b[n + 1] : C(e.key);
 		else if (a === "ArrowLeft") D(e) ? C(e.key) : i = b.find((t) => t.key === e.parentKey);
 		else return;
 		t.preventDefault(), i && t.currentTarget.closest("[role=\"treegrid\"], table")?.querySelector(`[data-tree-key="${CSS.escape(i.key)}"]`)?.focus();
@@ -93,7 +93,7 @@ function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHe
 				t.target === t.currentTarget && T(e.key);
 			},
 			onKeyDown: (t) => O(e, t),
-			className: t("outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60", m && e.parentKey === m.key && "zen__tree-row-enter", g && e.parentKey === g && "zen__tree-row-exit"),
+			className: n("outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60", m && e.parentKey === m.key && "zen__tree-row-enter", g && e.parentKey === g && "zen__tree-row-exit"),
 			style: { "--row-h": `${d - 1}px` },
 			onAnimationEnd: (t) => {
 				t.animationName === "zen-row-close" && g && e.parentKey === g && v.current?.();
@@ -107,8 +107,8 @@ function p({ items: e, getKey: r, getChildren: a, defaultExpanded: o = !0, rowHe
 		rowHeight: d
 	};
 }
-function m({ row: e, tree: n, className: r, style: i, onFocus: a, onKeyDown: s, ...c }) {
-	let l = n.rowProps(e);
+function m({ row: e, tree: t, className: r, style: i, onFocus: a, onKeyDown: s, ...c }) {
+	let l = t.rowProps(e);
 	return /* @__PURE__ */ d(o, {
 		...c,
 		...l,
@@ -118,41 +118,41 @@ function m({ row: e, tree: n, className: r, style: i, onFocus: a, onKeyDown: s,
 		onKeyDown: (e) => {
 			s?.(e), e.defaultPrevented || l.onKeyDown(e);
 		},
-		className: t(l.className, r),
+		className: n(l.className, r),
 		style: {
 			...l.style,
 			...i
 		}
 	});
 }
-function h({ numeric: e, className: n, children: r, ...i }) {
+function h({ numeric: e, className: t, children: r, ...i }) {
 	return /* @__PURE__ */ d(a, {
 		numeric: e,
-		className: t("py-0 whitespace-nowrap", n),
+		className: n("py-0 whitespace-nowrap", t),
 		...i,
 		children: /* @__PURE__ */ d("div", {
-			className: t("zen__tree-cell flex h-[var(--row-h)] items-center", e && "justify-end"),
+			className: n("zen__tree-cell flex h-[var(--row-h)] items-center", e && "justify-end"),
 			children: r
 		})
 	});
 }
-function g({ row: e, tree: n, indent: r = 20, children: i, className: a }) {
+function g({ row: e, tree: t, indent: r = 20, children: i, className: a }) {
 	return /* @__PURE__ */ f("div", {
-		className: t("flex min-w-0 flex-1 items-center gap-1", a),
+		className: n("flex min-w-0 flex-1 items-center gap-1", a),
 		style: { paddingLeft: e.depth * r },
-		children: [e.hasChildren ? /* @__PURE__ */ d(_, { ...n.toggleProps(e) }) : /* @__PURE__ */ d("span", { className: "-ms-1 w-6 shrink-0" }), i]
+		children: [e.hasChildren ? /* @__PURE__ */ d(_, { ...t.toggleProps(e) }) : /* @__PURE__ */ d("span", { className: "-ms-1 w-6 shrink-0" }), i]
 	});
 }
-function _({ expanded: n, onToggle: i, className: a, ...o }) {
-	let s = r();
+function _({ expanded: r, onToggle: i, className: a, ...o }) {
+	let s = e();
 	return /* @__PURE__ */ d("button", {
 		type: "button",
 		onClick: i,
-		"aria-label": n ? s.collapse : s.expand,
-		"aria-expanded": n,
-		className: t("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground -ms-1 grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-hidden transition-colors focus-ring", a),
+		"aria-label": r ? s.collapse : s.expand,
+		"aria-expanded": r,
+		className: n("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground -ms-1 grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-hidden transition-colors focus-ring", a),
 		...o,
-		children: /* @__PURE__ */ d(e, { className: t("zen__tree-chevron size-4 transition-transform duration-200 ease-out rtl:-scale-x-100", n && "rotate-90 rtl:-rotate-90") })
+		children: /* @__PURE__ */ d(t, { className: n("zen__tree-chevron size-4 transition-transform duration-200 ease-out rtl:-scale-x-100", r && "rotate-90 rtl:-rotate-90") })
 	});
 }
 //#endregion

package/dist/trend/index.js

@@ -1,22 +1,22 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useLocale as t } from "../locale-provider/index.js";
+import { useLocale as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import n from "../icons/micro/arrow-trending-down.js";
 import r from "../icons/micro/arrow-trending-up.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region packages/trend/index.tsx
 function o({ value: o, good: s = "up", locale: c, format: l, className: u, children: d, ...f }) {
-	let p = t(c), m = l ?? ((e) => new Intl.NumberFormat(p, {
+	let p = e(c), m = l ?? ((e) => new Intl.NumberFormat(p, {
 		style: "percent",
 		maximumFractionDigits: 1,
 		signDisplay: "exceptZero"
 	}).format(e)), h = o > 0 ? "up" : o < 0 ? "down" : "flat", g = h === "up" ? r : h === "down" ? n : null;
 	return /* @__PURE__ */ a("span", {
-		className: e("zen__trend inline-flex items-center gap-1.5 text-xs", u),
+		className: t("zen__trend inline-flex items-center gap-1.5 text-xs", u),
 		...f,
 		children: [/* @__PURE__ */ a("span", {
 			"data-direction": h,
-			className: e("inline-flex items-center gap-0.5 rounded-md border px-1.5 py-0.5 font-medium whitespace-nowrap tabular-nums", h === "flat" ? "border-tint/10 bg-tint/[0.06] text-muted-foreground" : h === s ? "border-glow/30 bg-glow/10 text-primary" : "border-destructive/40 bg-destructive/10 text-destructive"),
+			className: t("inline-flex items-center gap-0.5 rounded-md border px-1.5 py-0.5 font-medium whitespace-nowrap tabular-nums", h === "flat" ? "border-tint/10 bg-tint/[0.06] text-muted-foreground" : h === s ? "border-glow/30 bg-glow/10 text-primary" : "border-destructive/40 bg-destructive/10 text-destructive"),
 			children: [g && /* @__PURE__ */ i(g, { className: "size-3.5" }), m(o)]
 		}), d && /* @__PURE__ */ i("span", {
 			className: "text-muted-foreground",

package/dist/utils/duration.d.ts

@@ -0,0 +1,3 @@
+/** Seconds as a clock reads them: 3:07, or 1:02:07 from an hour up. */
+export declare function formatDuration(seconds: number): string;
+//# sourceMappingURL=duration.d.ts.map

package/dist/utils/duration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"duration.d.ts","sourceRoot":"","sources":["../../packages/utils/duration.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,UAM7C"}

package/dist/utils/duration.js

@@ -0,0 +1,7 @@
+//#region packages/utils/duration.ts
+function e(e) {
+	let t = Math.floor(Math.max(e, 0)), n = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), i = String(t % 60).padStart(2, "0");
+	return n ? `${n}:${String(r).padStart(2, "0")}:${i}` : `${r}:${i}`;
+}
+//#endregion
+export { e as formatDuration };

package/dist/utils/messages.d.ts

@@ -7,6 +7,7 @@ export declare const ENGLISH: {
     clear: string;
     cancel: string;
     close: string;
+    back: string;
     dismiss: string;
     delete: string;
     remove: (item: string) => string;
@@ -132,6 +133,8 @@ export declare const ENGLISH: {
     nextSlide: string;
     resize: string;
     notifications: string;
+    seek: string;
+    timeOf: (time: string, total: string) => string;
 };
 export type Messages = typeof ENGLISH;
 //# sourceMappingURL=messages.d.ts.map

package/dist/utils/messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../packages/utils/messages.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;mBAOD,MAAM;;;;;;;;;;;;;;gBAgBT,MAAM;;;;;;;;;;;;;gCAeU,MAAM;uBACf,MAAM;;;4CAKe,MAAM,cAAc,MAAM;;wBAG9C,MAAM;;4BAEF,MAAM;;;;;;;;;;;;;;;;;;+BAsBH,MAAM;;2BAEV,MAAM,SAAS,MAAM;;;;;;6BAMnB,MAAM;4BACP,MAAM,QAAQ,MAAM;uBACzB,MAAM,UAAU,MAAM;;;;;;aAQhC,MAAM;;;uBAGI,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,SAAS,MAAM;yBAC9C,MAAM,QAAQ,MAAM;qBACxB,MAAM,QAAQ,MAAM;mBACtB,MAAM;;oBAIL,MAAM;qBACL,MAAM,SAAS,MAAM;oBAEtB,MAAM,SAAS,MAAM;oBACrB,MAAM,SAAS,MAAM;oBACrB,MAAM,UAAU,MAAM;sBACpB,MAAM,SAAS,MAAM;wBACnB,MAAM,SAAS,MAAM,SAAS,MAAM;oBAGxC,MAAM,SAAS,MAAM,UAAU,MAAM;kBACvC,MAAM,KAAK,MAAM,KAAK,MAAM;sBACxB,MAAM;;;;2BAOD,MAAM;;;;uBAMV,MAAM;oBACT,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;qBAgBnB,MAAM;;cAEb,MAAM;;;;;;iBAMH,MAAM,SAAS,MAAM;mBACnB,MAAM;;;;;CAKxB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,OAAO,CAAC"}
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../packages/utils/messages.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;;mBAQD,MAAM;;;;;;;;;;;;;;gBAgBT,MAAM;;;;;;;;;;;;;gCAeU,MAAM;uBACf,MAAM;;;4CAKe,MAAM,cAAc,MAAM;;wBAG9C,MAAM;;4BAEF,MAAM;;;;;;;;;;;;;;;;;;+BAsBH,MAAM;;2BAEV,MAAM,SAAS,MAAM;;;;;;6BAMnB,MAAM;4BACP,MAAM,QAAQ,MAAM;uBACzB,MAAM,UAAU,MAAM;;;;;;aAQhC,MAAM;;;uBAGI,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,SAAS,MAAM;yBAC9C,MAAM,QAAQ,MAAM;qBACxB,MAAM,QAAQ,MAAM;mBACtB,MAAM;;oBAIL,MAAM;qBACL,MAAM,SAAS,MAAM;oBAEtB,MAAM,SAAS,MAAM;oBACrB,MAAM,SAAS,MAAM;oBACrB,MAAM,UAAU,MAAM;sBACpB,MAAM,SAAS,MAAM;wBACnB,MAAM,SAAS,MAAM,SAAS,MAAM;oBAGxC,MAAM,SAAS,MAAM,UAAU,MAAM;kBACvC,MAAM,KAAK,MAAM,KAAK,MAAM;sBACxB,MAAM;;;;2BAOD,MAAM;;;;uBAMV,MAAM;oBACT,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;qBAgBnB,MAAM;;cAEb,MAAM;;;;;;iBAMH,MAAM,SAAS,MAAM;mBACnB,MAAM;;;;;;mBAQN,MAAM,SAAS,MAAM;CACvC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,OAAO,CAAC"}

package/dist/utils/messages.js

@@ -3,6 +3,7 @@ var e = {
 	clear: "Clear",
 	cancel: "Cancel",
 	close: "Close",
+	back: "Back",
 	dismiss: "Dismiss",
 	delete: "Delete",
 	remove: (e) => `Remove ${e}`,
@@ -127,7 +128,9 @@ var e = {
 	previousSlide: "Previous slide",
 	nextSlide: "Next slide",
 	resize: "Resize",
-	notifications: "Notifications (F8)"
+	notifications: "Notifications (F8)",
+	seek: "Seek",
+	timeOf: (e, t) => `${e} of ${t}`
 };
 //#endregion
 export { e as ENGLISH };

package/dist/utils/slot.d.ts

@@ -5,9 +5,12 @@ type Props = Record<string, unknown>;
  * props: a component's styles and attributes go onto the caller's own element,
  * such as a router's Link. Classes are combined, styles merged (the child's
  * win), event handlers both run (the child's first), and refs both receive the
- * element; other props from the component win.
+ * element; other props from the component win. `before` goes ahead of the
+ * child's own content (e.g. a component's icon), also when that content is a
+ * render function such as a router NavLink's.
  */
-export declare function Slot({ children, ...props }: ComponentProps<'a'> & {
+export declare function Slot({ before, children, ...props }: ComponentProps<'a'> & {
+    before?: ReactNode;
     children?: ReactNode;
 }): ReactElement<Props, string | import('react').JSXElementConstructor<any>> | null;
 export {};

package/dist/utils/slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../packages/utils/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAkB,YAAY,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAKnG,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAErC;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,mFAoB1F"}
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../packages/utils/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAkB,YAAY,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAKnG,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAErC;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,EACjB,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,mFAqCpE"}

package/dist/utils/slot.js

@@ -2,20 +2,25 @@
 import { cx as e } from "./cx.js";
 import { mergeRefs as t } from "./refs.js";
 import { cloneElement as n, isValidElement as r } from "react";
+import { Fragment as i, jsxs as a } from "react/jsx-runtime";
 //#region packages/utils/slot.tsx
-function i({ children: i, ...a }) {
-	if (!r(i)) return null;
-	let o = i, s = a, c = o.props, l = { ...s };
-	for (let e of Object.keys(s)) {
-		let t = s[e], n = c[e];
-		/^on[A-Z]/.test(e) && typeof t == "function" && typeof n == "function" && (l[e] = (...e) => {
+function o({ before: o, children: s, ...c }) {
+	if (!r(s)) return null;
+	let l = s, u = c, d = l.props, f = { ...u };
+	for (let e of Object.keys(u)) {
+		let t = u[e], n = d[e];
+		/^on[A-Z]/.test(e) && typeof t == "function" && typeof n == "function" && (f[e] = (...e) => {
 			n(...e), t(...e);
 		});
 	}
-	return l.className = e(s.className, c.className), (s.style || c.style) && (l.style = {
-		...s.style,
-		...c.style
-	}), s.ref && c.ref && (l.ref = t(s.ref, c.ref)), n(o, l);
+	if (f.className = e(u.className, d.className), (u.style || d.style) && (f.style = {
+		...u.style,
+		...d.style
+	}), u.ref && d.ref && (f.ref = t(u.ref, d.ref)), o != null) {
+		let e = d.children;
+		f.children = typeof e == "function" ? ((...t) => /* @__PURE__ */ a(i, { children: [o, e(...t)] })) : /* @__PURE__ */ a(i, { children: [o, e] });
+	}
+	return n(l, f);
 }
 //#endregion
-export { i as Slot };
+export { o as Slot };

package/dist/utils/swipe.d.ts

@@ -26,4 +26,11 @@ export interface SwipeHandlers {
  * it is swallowed.
  */
 export declare function useSwipe(ref: RefObject<HTMLElement | null>, direction: SwipeDirection | undefined, handlers: SwipeHandlers): void;
+/**
+ * A sheet follows a finger swiping it back to its edge, and closes when let go
+ * far enough along or flicked; otherwise it springs back. It's moved by the
+ * --zen-swipe custom property (a translate), and --zen-swipe-progress (0 to 1)
+ * says how far, for its scrim.
+ */
+export declare function useSheetSwipe(ref: RefObject<HTMLElement | null>, side: 'bottom' | 'left' | 'right' | undefined, close: () => void): void;
 //# sourceMappingURL=swipe.d.ts.map

package/dist/utils/swipe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swipe.d.ts","sourceRoot":"","sources":["../../packages/utils/swipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD,gEAAgE;AAChE,eAAO,MAAM,WAAW,MAAM,CAAC;AAM/B,MAAM,WAAW,cAAc;IAC3B,sEAAsE;IACtE,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,CAAC;IAC3B,wFAAwF;IACxF,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC1B,0GAA0G;IAC1G,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,qFAAqF;IACrF,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,8HAA8H;IAC9H,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACpB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,SAAS,EAAE,cAAc,GAAG,SAAS,EACrC,QAAQ,EAAE,aAAa,QAkG1B"}
+{"version":3,"file":"swipe.d.ts","sourceRoot":"","sources":["../../packages/utils/swipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD,gEAAgE;AAChE,eAAO,MAAM,WAAW,MAAM,CAAC;AAM/B,MAAM,WAAW,cAAc;IAC3B,sEAAsE;IACtE,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,CAAC;IAC3B,wFAAwF;IACxF,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC1B,0GAA0G;IAC1G,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,qFAAqF;IACrF,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,8HAA8H;IAC9H,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACpB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,SAAS,EAAE,cAAc,GAAG,SAAS,EACrC,QAAQ,EAAE,aAAa,QAkG1B;AAKD;;;;;GAKG;AACH,wBAAgB,aAAa,CACzB,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,EAC7C,KAAK,EAAE,MAAM,IAAI,QAuBpB"}

package/dist/utils/swipe.js

@@ -2,25 +2,25 @@
 import { useEffect as e, useRef as t } from "react";
 //#region packages/utils/swipe.ts
 var n = .5, r = 100, i = 8;
-function a(n, a, c) {
-	let l = t(c);
+function a(n, a, o) {
+	let s = t(o);
 	e(() => {
-		l.current = c;
+		s.current = o;
 	});
 	let u = a?.axis, d = a?.sign;
 	e(() => {
 		let e = n.current;
 		if (!e || !u || !d) return;
-		let t = u === "y" ? "y" : "x", a = u === "inline" && getComputedStyle(e).direction === "rtl" ? -d : d, c = null, f = !1, p = (e) => (t === "y" ? e.clientY - c.y : e.clientX - c.x) * a, m = (e) => t === "y" ? e.clientX - c.x : e.clientY - c.y, h = () => {
-			let t = c?.on;
-			return c = null, t ? (delete e.dataset.swiping, f = !0, !0) : !1;
+		let t = u === "y" ? "y" : "x", a = u === "inline" && getComputedStyle(e).direction === "rtl" ? -d : d, o = null, f = !1, p = (e) => (t === "y" ? e.clientY - o.y : e.clientX - o.x) * a, m = (e) => t === "y" ? e.clientX - o.x : e.clientY - o.y, h = () => {
+			let t = o?.on;
+			return o = null, t ? (delete e.dataset.swiping, f = !0, !0) : !1;
 		}, g = (n) => {
 			if (f = !1, n.pointerType === "touch") {
 				if (!n.isPrimary) {
-					h() && l.current.cancel();
+					h() && s.current.cancel();
 					return;
 				}
-				o(n.target, e, t) || (c = {
+				c(n.target, e, t) || (o = {
 					id: n.pointerId,
 					x: n.clientX,
 					y: n.clientY,
@@ -30,25 +30,25 @@ function a(n, a, c) {
 				});
 			}
 		}, _ = (n) => {
-			if (!c || n.pointerId !== c.id) return;
-			let o = p(n);
-			if (!c.on) {
-				if (Math.hypot(o, m(n)) < i) return;
-				if (o <= 0 || Math.abs(m(n)) * 1.5 > o || s(n.target, t, a)) {
-					c = null;
+			if (!o || n.pointerId !== o.id) return;
+			let c = p(n);
+			if (!o.on) {
+				if (Math.hypot(c, m(n)) < i) return;
+				if (c <= 0 || Math.abs(m(n)) * 1.5 > c || l(n.target, t, a)) {
+					o = null;
 					return;
 				}
-				c.on = !0, e.dataset.swiping = "", e.setPointerCapture?.(n.pointerId);
+				o.on = !0, e.dataset.swiping = "", e.setPointerCapture?.(n.pointerId);
 			}
-			c.points = [...c.points.filter(([e]) => n.timeStamp - e < r), [n.timeStamp, o]], l.current.move(o);
-			let u = l.current.threshold?.();
-			u !== void 0 && o > u !== c.past && (c.past = !c.past, navigator.vibrate?.(8));
+			o.points = [...o.points.filter(([e]) => n.timeStamp - e < r), [n.timeStamp, c]], s.current.move(c);
+			let u = s.current.threshold?.();
+			u !== void 0 && c > u !== o.past && (o.past = !o.past, navigator.vibrate?.(8));
 		}, v = (e) => {
-			if (!c || e.pointerId !== c.id) return;
-			let t = p(e), [n, i] = c.points.find(([t]) => e.timeStamp - t < r) ?? [e.timeStamp, t], a = (t - i) / Math.max(1, e.timeStamp - n);
-			h() && (e.type === "pointerup" ? l.current.release(t, a) : l.current.cancel());
+			if (!o || e.pointerId !== o.id) return;
+			let t = p(e), [n, i] = o.points.find(([t]) => e.timeStamp - t < r) ?? [e.timeStamp, t], a = (t - i) / Math.max(1, e.timeStamp - n);
+			h() && (e.type === "pointerup" ? s.current.release(t, a) : s.current.cancel());
 		}, y = (e) => {
-			c?.on && e.preventDefault();
+			o?.on && e.preventDefault();
 		}, b = (e) => {
 			f && (f = !1, e.stopPropagation(), e.preventDefault());
 		};
@@ -61,7 +61,27 @@ function a(n, a, c) {
 		d
 	]);
 }
-function o(e, t, n) {
+var o = .3;
+function s(t, n, r) {
+	let i = n === "bottom" ? "y" : "x", s = n === "left" ? -1 : 1, c = () => i === "y" ? t.current.offsetHeight : t.current.offsetWidth, l = () => {
+		t.current?.style.removeProperty("--zen-swipe"), t.current?.style.removeProperty("--zen-swipe-progress");
+	};
+	e(l, [t, n]), a(t, n ? {
+		axis: i,
+		sign: s
+	} : void 0, {
+		move: (e) => {
+			let n = e > 0 ? e : e / 6;
+			t.current.style.setProperty("--zen-swipe", i === "y" ? `0 ${n}px` : `${n * s}px 0`), t.current.style.setProperty("--zen-swipe-progress", String(Math.max(0, Math.min(1, e / c()))));
+		},
+		release: (e, t) => {
+			e > c() * o || e > 0 && t > .5 ? r() : l();
+		},
+		cancel: l,
+		threshold: () => c() * o
+	});
+}
+function c(e, t, n) {
 	if (e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])")) return !0;
 	let r = n === "y" ? /pan-(y|up|down)/ : /pan-(x|left|right)/;
 	for (let n = e; n && n !== t; n = n.parentElement) {
@@ -70,7 +90,7 @@ function o(e, t, n) {
 	}
 	return !1;
 }
-function s(e, t, n) {
+function l(e, t, n) {
 	for (let r = e; r; r = r.parentElement) {
 		let e = getComputedStyle(r), i = t === "y" ? e.overflowY : e.overflowX;
 		if (r === r.ownerDocument.scrollingElement ? i === "hidden" || i === "clip" : !/auto|scroll/.test(i)) continue;
@@ -82,4 +102,4 @@ function s(e, t, n) {
 	return !1;
 }
 //#endregion
-export { n as FLICK_SPEED, a as useSwipe };
+export { n as FLICK_SPEED, s as useSheetSwipe, a as useSwipe };

package/dist/utils/useAnchoredPopup.d.ts

@@ -35,7 +35,8 @@ export declare function anchorFor(id: string): {
  * lined up with its start or end edge, or centred on it; `width` makes it as
  * wide as the trigger, or at least as wide. `side: 'beside'` puts it after the
  * trigger instead (before it if there's no room), its top level with the
- * trigger's, as a submenu opens. For parts that take their own `align`/`offset`
+ * trigger's, as a submenu opens; `align` then lines up the tops (start), the
+ * middles (center, as a tooltip beside an icon) or the bottoms (end). For parts that take their own `align`/`offset`
  * (PopoverContent, MenuContent). The same choices are kept as custom
  * properties, for placing it where anchor positioning isn't supported.
  */

package/dist/utils/useAnchoredPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPopup.d.ts","sourceRoot":"","sources":["../../packages/utils/useAnchoredPopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAmD,MAAM,OAAO,CAAC;AAElG;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,EACrE,KAAe,EACf,MAAU,EACV,UAAkB,EAClB,YAAY,GACf,GAAE,oBAAyB;;;oBAgBb,OAAO;;;eA6CkD,aAAa;;;;;;;;;;;;;EAJpF;AAED,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM;;WACoC,aAAa;EACpF;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,KAAe,EAAE,MAAU,EAAE,KAAK,EAAE,IAAc,EAAE,GAAE,aAAkB,GAC3E,aAAa,CAuBf;AAED,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAYD,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAiCnE;AA6CD,MAAM,WAAW,oBAAoB;IACjC,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C"}
+{"version":3,"file":"useAnchoredPopup.d.ts","sourceRoot":"","sources":["../../packages/utils/useAnchoredPopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAmD,MAAM,OAAO,CAAC;AAElG;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,EACrE,KAAe,EACf,MAAU,EACV,UAAkB,EAClB,YAAY,GACf,GAAE,oBAAyB;;;oBAgBb,OAAO;;;eA6CkD,aAAa;;;;;;;;;;;;;EAJpF;AAED,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM;;WACoC,aAAa;EACpF;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,KAAe,EAAE,MAAU,EAAE,KAAK,EAAE,IAAc,EAAE,GAAE,aAAkB,GAC3E,aAAa,CAiCf;AAED,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAYD,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAiCnE;AA+CD,MAAM,WAAW,oBAAoB;IACjC,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C"}

package/dist/utils/useAnchoredPopup.js

@@ -51,15 +51,20 @@ function o(e) {
 	};
 }
 function s(e, { align: t = "start", offset: n = 4, width: r, side: i = "below" } = {}) {
-	let a = i === "beside" ? "inline-end span-block-end" : {
+	let a = i === "beside" ? {
+		start: "inline-end span-block-end",
+		end: "inline-end span-block-start",
+		center: "inline-end"
+	}[t] : {
 		start: "block-end span-inline-end",
 		end: "block-end span-inline-start",
-		center: "block-end center"
+		center: "block-end span-all"
 	}[t];
 	return {
 		positionAnchor: `--${e}`,
 		positionArea: a,
-		positionTryFallbacks: i === "beside" ? "flip-inline, flip-block, flip-block flip-inline" : "flip-block",
+		...t === "center" && (i === "beside" ? { alignSelf: "anchor-center" } : { justifySelf: "anchor-center" }),
+		positionTryFallbacks: t === "center" ? i === "beside" ? "flip-inline" : "flip-block" : "flip-inline, flip-block, flip-block flip-inline",
 		inset: "auto",
 		...r === "at-least" && {
 			width: "max-content",
@@ -114,8 +119,8 @@ function f(e) {
 		height: e.offsetHeight
 	}, u = document.documentElement.clientWidth, f = document.documentElement.clientHeight, p = getComputedStyle(n).direction === "rtl";
 	if (o) {
-		let e = s.right + i + l.width <= u - d, t = s.left - i - l.width >= d, n = p ? e && !t : e || !t, r = s.top + l.height > f - d && s.bottom - l.height >= d;
-		c.left = n ? `${s.right}px` : "auto", c.right = n ? "auto" : `${u - s.left}px`, c.top = r ? "auto" : `${Math.max(d, Math.min(s.top, f - l.height - d))}px`, c.bottom = r ? `${f - s.bottom}px` : "auto";
+		let e = s.right + i + l.width <= u - d, t = s.left - i - l.width >= d, n = p ? e && !t : e || !t, a = r === "end" || r === "start" && s.top + l.height > f - d && s.bottom - l.height >= d, o = r === "center" ? s.top + (s.height - l.height) / 2 : a ? s.bottom - l.height : s.top;
+		c.left = n ? `${s.right}px` : "auto", c.right = n ? "auto" : `${u - s.left}px`, c.top = `${Math.max(d, Math.min(o, f - l.height - d))}px`, c.bottom = "auto";
 		return;
 	}
 	let m = s.bottom + i + l.height > f - d && s.top - i - l.height >= d, h = p ? s.right - l.width : s.left, g = p ? s.left : s.right - l.width, _ = r === "center" ? s.left + (s.width - l.width) / 2 : r === "end" ? g : h;

package/dist/utils/useHeightVar.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Keeps a fixed bar's height in a CSS variable on its parent (0px while the bar
+ * is hidden), so the bars and the page beside it can stack on it and pad for it.
+ */
+export declare function useHeightVar(ref: RefObject<HTMLElement | null>, name: `--${string}`): void;
+//# sourceMappingURL=useHeightVar.d.ts.map

package/dist/utils/useHeightVar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeightVar.d.ts","sourceRoot":"","sources":["../../packages/utils/useHeightVar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,QAcnF"}

package/dist/utils/useHeightVar.js

@@ -0,0 +1,17 @@
+"use client";
+import { useLayoutEffect as e } from "react";
+//#region packages/utils/useHeightVar.ts
+function t(t, n) {
+	e(() => {
+		let e = t.current, r = e?.parentElement;
+		if (!e || !r) return;
+		let i = () => r.style.setProperty(n, `${e.offsetHeight}px`);
+		i();
+		let a = new ResizeObserver(i);
+		return a.observe(e), () => {
+			a.disconnect(), r.style.removeProperty(n);
+		};
+	}, [t, n]);
+}
+//#endregion
+export { t as useHeightVar };