@rinzai/zen 0.6.0 → 0.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACH,cAAc,EAGd,SAAS,EAQZ,MAAM,OAAO,CAAC;AAmBf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BA8BrE;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,+BAkCrB;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,+BA4BrB;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":"AAKA,OAAO,EACH,cAAc,EAEd,SAAS,EAQZ,MAAM,OAAO,CAAC;AAmBf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BA+BrE;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,+BAmCrB;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,+BAwBrB;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"}

package/dist/tooltip/index.js

@@ -2,86 +2,87 @@
 import { cx as e } from "../utils/cx.js";
 import { useGraphicsMode as t } from "../utils/graphics.js";
 import { Slot as n } from "../utils/slot.js";
-import { anchoredStyle as r } from "../utils/useAnchoredPopup.js";
-import { POPUP as i } from "../utils/styles.js";
-import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as l, useMemo as u, useRef as d } from "react";
-import { jsx as f } from "react/jsx-runtime";
+import { anchorFor as r, anchoredStyle as i, useAnchorFallback as a } from "../utils/useAnchoredPopup.js";
+import { POPUP as o } from "../utils/styles.js";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useId as d, useMemo as f, useRef as p } from "react";
+import { jsx as m } from "react/jsx-runtime";
 //#region packages/tooltip/index.tsx
-var p = a(null);
-function m(e) {
-	let t = s(p);
+var h = s(null);
+function g(e) {
+	let t = l(h);
 	if (!t) throw Error(`<${e}> must be inside <Tooltip>`);
 	return t;
 }
-function h({ children: e }) {
+function _({ children: e }) {
 	t();
-	let n = `zen__tooltip-${l().replace(/[^\w-]/g, "")}`, r = d(null), i = d(0), a = o(() => {
+	let n = `zen__tooltip-${d().replace(/[^\w-]/g, "")}`, r = p(null), i = p(0), o = c(() => {
 		clearTimeout(i.current);
 		try {
 			r.current?.showPopover?.();
 		} catch {}
-	}, []), s = o(() => {
+	}, []), s = c(() => {
 		clearTimeout(i.current);
 		try {
 			r.current?.hidePopover?.();
 		} catch {}
-	}, []), m = o(() => {
+	}, []), l = c(() => {
 		clearTimeout(i.current), i.current = window.setTimeout(s, 100);
 	}, [s]);
-	c(() => () => clearTimeout(i.current), []);
-	let h = u(() => ({
+	u(() => () => clearTimeout(i.current), []), a(r);
+	let g = f(() => ({
 		id: n,
 		ref: r,
-		show: a,
+		show: o,
 		hide: s,
-		hideSoon: m
+		hideSoon: l
 	}), [
 		n,
-		a,
+		o,
 		s,
-		m
+		l
 	]);
-	return /* @__PURE__ */ f(p.Provider, {
-		value: h,
+	return /* @__PURE__ */ m(h.Provider, {
+		value: g,
 		children: e
 	});
 }
-function g({ asChild: e, style: t, onPointerEnter: r, onPointerLeave: i, onFocus: a, onBlur: o, onKeyDown: s, children: c, ...l }) {
-	let u = m("TooltipTrigger"), d = {
-		"aria-describedby": u.id,
-		...l,
+function v({ asChild: e, style: t, onPointerEnter: i, onPointerLeave: a, onFocus: o, onBlur: s, onKeyDown: c, children: l, ...u }) {
+	let d = g("TooltipTrigger"), f = {
+		"aria-describedby": d.id,
+		...u,
+		...r(d.id),
 		style: {
-			anchorName: `--${u.id}`,
+			...r(d.id).style,
 			...t
 		},
 		onPointerEnter: (e) => {
-			r?.(e), e.pointerType === "mouse" && u.show();
+			i?.(e), e.pointerType === "mouse" && d.show();
 		},
 		onPointerLeave: (e) => {
-			i?.(e), u.hideSoon();
+			a?.(e), d.hideSoon();
 		},
 		onFocus: (e) => {
-			a?.(e), e.currentTarget.matches(":focus-visible") && u.show();
+			o?.(e), e.currentTarget.matches(":focus-visible") && d.show();
 		},
 		onBlur: (e) => {
-			o?.(e), u.hide();
+			s?.(e), d.hide();
 		},
 		onKeyDown: (e) => {
-			s?.(e), e.key === "Escape" && u.hide();
+			c?.(e), e.key === "Escape" && d.hide();
 		}
 	};
-	return e ? /* @__PURE__ */ f(n, {
-		...d,
-		children: c
-	}) : /* @__PURE__ */ f("button", {
+	return e ? /* @__PURE__ */ m(n, {
+		...f,
+		children: l
+	}) : /* @__PURE__ */ m("button", {
 		type: "button",
-		...d,
-		children: c
+		...f,
+		children: l
 	});
 }
-function _({ align: t = "center", offset: n = 5, className: a, style: o, onPointerEnter: s, onPointerLeave: c, children: l, ...u }) {
-	let d = m("TooltipContent");
-	return /* @__PURE__ */ f("div", {
+function y({ align: t = "center", offset: n = 5, className: r, style: a, onPointerEnter: s, onPointerLeave: c, children: l, ...u }) {
+	let d = g("TooltipContent");
+	return /* @__PURE__ */ m("div", {
 		...u,
 		ref: d.ref,
 		id: d.id,
@@ -94,15 +95,16 @@ function _({ align: t = "center", offset: n = 5, className: a, style: o, onPoint
 			c?.(e), d.hideSoon();
 		},
 		style: {
-			...r(d.id, {
+			...i(d.id, {
 				align: t,
-				offset: n
+				offset: n,
+				width: "at-least"
 			}),
-			...o
+			...a
 		},
-		className: e("zen__popover fixed z-50 w-[anchor-size(width)] min-w-max overflow-visible p-0", i, a),
+		className: e("zen__popover fixed z-50 overflow-visible p-0", o, r),
 		children: l
 	});
 }
 //#endregion
-export { _ as TooltipContent, g as TooltipTrigger, h as default };
+export { y as TooltipContent, v as TooltipTrigger, _ as default };

package/dist/utils/useAnchoredPopup.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, RefObject } from 'react';
 /**
  * A popup anchored to a trigger, on the native Popover API: opens below the
  * trigger (flipping above if there's no room), closes on outside click and
@@ -10,26 +10,41 @@ export declare function useAnchoredPopup<T extends HTMLElement = HTMLDivElement>
     open: boolean;
     setOpen: (next: boolean) => void;
     triggerProps: {
+        'data-zen-anchor': string;
+        style: CSSProperties;
         popoverTarget: string;
         'aria-expanded': boolean;
         'aria-controls': string;
         'data-popup-open': true | undefined;
-        style: CSSProperties;
     };
     popupProps: {
-        ref: import('react').RefObject<T | null>;
+        ref: RefObject<T | null>;
         id: string;
         popover: "auto";
         style: CSSProperties;
     };
-    popupRef: import('react').RefObject<T | null>;
+    popupRef: RefObject<T | null>;
+};
+/** Makes an element the anchor its popup (`id`) is placed against. Spread it on the trigger. */
+export declare function anchorFor(id: string): {
+    'data-zen-anchor': string;
+    style: CSSProperties;
 };
 /**
  * The popup's position: below the trigger (above it if there's no room below),
- * lined up with its start or end edge, or centred on it. For parts that take
- * their own `align`/`offset` (PopoverContent, MenuContent).
+ * 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. 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.
  */
-export declare function anchoredStyle(id: string, { align, offset, matchWidth }?: Omit<AnchoredPopupOptions, 'onOpenChange'>): CSSProperties;
+export declare function anchoredStyle(id: string, { align, offset, width }?: AnchorOptions): CSSProperties;
+interface AnchorOptions {
+    align?: 'start' | 'end' | 'center';
+    offset?: number;
+    width?: 'match' | 'at-least';
+}
+/** Places the popup in `ref` against its trigger while it's open, where the browser can't. */
+export declare function useAnchorFallback(ref: RefObject<HTMLElement | null>): void;
 export interface AnchoredPopupOptions {
     /** Line the popup up with the trigger's start (default) or end edge, or centre it. */
     align?: 'start' | 'end' | 'center';
@@ -39,4 +54,5 @@ export interface AnchoredPopupOptions {
     matchWidth?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
+export {};
 //# sourceMappingURL=useAnchoredPopup.d.ts.map

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,EAAmD,MAAM,OAAO,CAAC;AAEvF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,EACrE,KAAe,EACf,MAAU,EACV,UAAkB,EAClB,YAAY,GACf,GAAE,oBAAyB;;;oBAgBb,OAAO;;;;;;eA4BsB,aAAa;;;;;;;;;EAWxD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,KAAe,EAAE,MAAU,EAAE,UAAkB,EAAE,GAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,CAAM,GACrG,aAAa,CAcf;AAED,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;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,KAAe,EAAE,MAAU,EAAE,KAAK,EAAE,GAAE,aAAkB,GAAG,aAAa,CAoBnH;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;CAChC;AAYD,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAiCnE;AAmCD,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

@@ -1,50 +1,56 @@
 "use client";
 import { useCallback as e, useEffect as t, useId as n, useRef as r, useState as i } from "react";
 //#region packages/utils/useAnchoredPopup.ts
-function a({ align: a = "start", offset: s = 4, matchWidth: c = !1, onOpenChange: l } = {}) {
-	let u = `zen__popup-${n().replace(/[^\w-]/g, "")}`, d = r(null), [f, p] = i(!1), m = r(l);
-	m.current = l;
-	let h = r(!1), g = e((e) => {
-		p(e), h.current !== e && (h.current = e, m.current?.(e));
-	}, []), _ = e((e) => {
-		let t = d.current;
+function a({ align: a = "start", offset: c = 4, matchWidth: l = !1, onOpenChange: d } = {}) {
+	let f = `zen__popup-${n().replace(/[^\w-]/g, "")}`, p = r(null), [m, h] = i(!1), g = r(d);
+	g.current = d;
+	let _ = r(!1), v = e((e) => {
+		h(e), _.current !== e && (_.current = e, g.current?.(e));
+	}, []), y = e((e) => {
+		let t = p.current;
 		if (t) {
 			try {
 				e ? t.showPopover?.() : t.hidePopover?.();
 			} catch {}
-			g(e);
+			v(e);
 		}
-	}, [g]);
-	return t(() => {
-		let e = d.current;
+	}, [v]);
+	return u(p), t(() => {
+		let e = p.current;
 		if (!e) return;
-		let t = (e) => g(e.newState === "open");
+		let t = (e) => v(e.newState === "open");
 		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
-	}, [g]), {
-		id: u,
-		open: f,
-		setOpen: _,
+	}, [v]), {
+		id: f,
+		open: m,
+		setOpen: y,
 		triggerProps: {
-			popoverTarget: u,
-			"aria-expanded": f,
-			"aria-controls": u,
-			"data-popup-open": f || void 0,
-			style: { anchorName: `--${u}` }
+			popoverTarget: f,
+			"aria-expanded": m,
+			"aria-controls": f,
+			"data-popup-open": m || void 0,
+			...o(f)
 		},
 		popupProps: {
-			ref: d,
-			id: u,
+			ref: p,
+			id: f,
 			popover: "auto",
-			style: o(u, {
+			style: s(f, {
 				align: a,
-				offset: s,
-				matchWidth: c
+				offset: c,
+				width: l ? "at-least" : void 0
 			})
 		},
-		popupRef: d
+		popupRef: p
 	};
 }
-function o(e, { align: t = "start", offset: n = 4, matchWidth: r = !1 } = {}) {
+function o(e) {
+	return {
+		"data-zen-anchor": e,
+		style: { anchorName: `--${e}` }
+	};
+}
+function s(e, { align: t = "start", offset: n = 4, width: r } = {}) {
 	let i = {
 		start: "block-end span-inline-end",
 		end: "block-end span-inline-start",
@@ -56,8 +62,58 @@ function o(e, { align: t = "start", offset: n = 4, matchWidth: r = !1 } = {}) {
 		positionTryFallbacks: "flip-block",
 		inset: "auto",
 		margin: `${n}px 0`,
-		...r && { minWidth: "anchor-size(width)" }
+		...r === "at-least" && {
+			width: "max-content",
+			minWidth: "anchor-size(width)"
+		},
+		...r === "match" && {
+			width: "anchor-size(width)",
+			minWidth: 0
+		},
+		"--zen-anchor": e,
+		"--zen-anchor-align": t,
+		"--zen-anchor-offset": n,
+		"--zen-anchor-width": r ?? "auto"
 	};
 }
+var c, l = () => c ??= typeof CSS < "u" && !!CSS.supports?.("position-area: block-end");
+function u(e) {
+	t(() => {
+		let t = e.current;
+		if (!t || l()) return;
+		let n = 0, r = () => {
+			n ||= requestAnimationFrame(() => {
+				n = 0, f(t);
+			});
+		}, i = typeof ResizeObserver > "u" ? null : new ResizeObserver(r), a = () => {
+			window.removeEventListener("scroll", r, { capture: !0 }), window.removeEventListener("resize", r), i?.disconnect(), cancelAnimationFrame(n), n = 0;
+		}, o = (e) => {
+			a(), e.newState === "open" && (f(t), window.addEventListener("scroll", r, {
+				capture: !0,
+				passive: !0
+			}), window.addEventListener("resize", r, { passive: !0 }), i?.observe(t));
+		};
+		return t.addEventListener("toggle", o), () => {
+			t.removeEventListener("toggle", o), a();
+		};
+	}, [e]);
+}
+var d = 8;
+function f(e) {
+	let t = e.style.getPropertyValue("--zen-anchor").trim(), n = t ? document.querySelector(`[data-zen-anchor="${t}"]`) : null;
+	if (!n) return;
+	let r = e.style.getPropertyValue("--zen-anchor-align").trim() || "start", i = Number(e.style.getPropertyValue("--zen-anchor-offset")) || 0, a = e.style.getPropertyValue("--zen-anchor-width").trim(), o = n.getBoundingClientRect(), s = e.style;
+	for (let e of [
+		"position-anchor",
+		"position-area",
+		"position-try-fallbacks"
+	]) s.removeProperty(e);
+	s.inset = "0 auto auto 0", s.margin = "0", a === "match" && (s.width = `${o.width}px`), a === "at-least" && (s.minWidth = `${o.width}px`);
+	let c = {
+		width: e.offsetWidth,
+		height: e.offsetHeight
+	}, l = document.documentElement.clientWidth, u = window.innerHeight, f = o.bottom + i, p = o.top - i - c.height, m = f + c.height > u - d && p >= d ? p : f, h = getComputedStyle(n).direction === "rtl", g = h ? o.right - c.width : o.left, _ = h ? o.left : o.right - c.width, v = r === "center" ? o.left + (o.width - c.width) / 2 : r === "end" ? _ : g;
+	s.top = `${m}px`, s.left = `${Math.max(d, Math.min(v, l - c.width - d))}px`;
+}
 //#endregion
-export { o as anchoredStyle, a as useAnchoredPopup };
+export { o as anchorFor, s as anchoredStyle, u as useAnchorFallback, a as useAnchoredPopup };