@rinzai/zen 0.10.3 → 0.13.0

package/dist/utils/useAnchoredPopup.js

@@ -50,16 +50,16 @@ function o(e) {
 		style: { anchorName: `--${e}` }
 	};
 }
-function s(e, { align: t = "start", offset: n = 4, width: r } = {}) {
-	let i = {
+function s(e, { align: t = "start", offset: n = 4, width: r, side: i = "below" } = {}) {
+	let a = i === "beside" ? "inline-end span-block-end" : {
 		start: "block-end span-inline-end",
 		end: "block-end span-inline-start",
 		center: "block-end center"
 	}[t];
 	return {
 		positionAnchor: `--${e}`,
-		positionArea: i,
-		positionTryFallbacks: "flip-block",
+		positionArea: a,
+		positionTryFallbacks: i === "beside" ? "flip-inline, flip-block, flip-block flip-inline" : "flip-block",
 		inset: "auto",
 		...r === "at-least" && {
 			width: "max-content",
@@ -72,7 +72,8 @@ function s(e, { align: t = "start", offset: n = 4, width: r } = {}) {
 		"--zen-anchor": e,
 		"--zen-anchor-align": t,
 		"--zen-anchor-offset": n,
-		"--zen-anchor-width": r ?? "auto"
+		"--zen-anchor-width": r ?? "auto",
+		"--zen-anchor-side": i
 	};
 }
 var c, l = () => c ??= typeof CSS < "u" && !!CSS.supports?.("position-area: block-end");
@@ -101,18 +102,24 @@ 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;
+	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 = e.style.getPropertyValue("--zen-anchor-side").trim() === "beside", s = n.getBoundingClientRect(), c = e.style;
 	for (let e of [
 		"position-anchor",
 		"position-area",
 		"position-try-fallbacks"
-	]) s.removeProperty(e);
-	s.inset = "0 auto auto 0", a === "match" && (s.width = `${o.width}px`), a === "at-least" && (s.minWidth = `${o.width}px`);
-	let c = {
+	]) c.removeProperty(e);
+	c.inset = "0 auto auto 0", a === "match" && (c.width = `${s.width}px`), a === "at-least" && (c.minWidth = `${s.width}px`);
+	let l = {
 		width: e.offsetWidth,
 		height: e.offsetHeight
-	}, l = document.documentElement.clientWidth, u = document.documentElement.clientHeight, f = o.bottom + i + c.height > u - d && o.top - i - c.height >= d, p = getComputedStyle(n).direction === "rtl", m = p ? o.right - c.width : o.left, h = p ? o.left : o.right - c.width, g = r === "center" ? o.left + (o.width - c.width) / 2 : r === "end" ? h : m;
-	s.top = f ? "auto" : `${o.bottom}px`, s.bottom = f ? `${u - o.top}px` : "auto", s.left = `${Math.max(d, Math.min(g, l - c.width - d))}px`;
+	}, 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";
+		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;
+	c.top = m ? "auto" : `${s.bottom}px`, c.bottom = m ? `${f - s.top}px` : "auto", c.left = `${Math.max(d, Math.min(_, u - l.width - d))}px`;
 }
 //#endregion
 export { o as anchorFor, s as anchoredStyle, u as useAnchorFallback, a as useAnchoredPopup };

package/dist/utils/useControllable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A value that's controlled when `value` is given (null included: a controlled
+ * empty value) and kept here, starting at `defaultValue`, when it's undefined.
+ * Either way `set` reports the change. `U` is what can be set, when that's
+ * narrower than what's held (a choice that starts as null but is never cleared).
+ * `reset` goes back to `defaultValue` (on a form's reset); a controlled value is yours to reset.
+ */
+export declare function useControllable<T, U extends T = T>(value: T | undefined, defaultValue: T, onChange: ((value: U) => void) | undefined): [T, (next: U) => void, () => void];
+//# sourceMappingURL=useControllable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useControllable.d.ts","sourceRoot":"","sources":["../../packages/utils/useControllable.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EAC9C,KAAK,EAAE,CAAC,GAAG,SAAS,EACpB,YAAY,EAAE,CAAC,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,GAC3C,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,MAAM,IAAI,CAAC,CAQpC"}

package/dist/utils/useControllable.js

@@ -0,0 +1,15 @@
+"use client";
+import { useState as e } from "react";
+//#region packages/utils/useControllable.ts
+function t(t, n, r) {
+	let [i, a] = e(n), o = t !== void 0;
+	return [
+		o ? t : i,
+		(e) => {
+			o || a(e), r?.(e);
+		},
+		() => a(n)
+	];
+}
+//#endregion
+export { t as useControllable };

package/dist/utils/useCopyToClipboard.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copies text to the clipboard. `copied` is true for `resetAfter` ms after a copy that worked; `copy`
+ * resolves false when nothing was copied (no Clipboard API, an insecure page, a denied permission).
+ */
+export declare function useCopyToClipboard({ resetAfter }?: CopyToClipboardOptions): {
+    copy: (text: string) => Promise<boolean>;
+    copied: boolean;
+};
+export interface CopyToClipboardOptions {
+    /** How long `copied` stays true after a copy, in ms. */
+    resetAfter?: number;
+}
+//# sourceMappingURL=useCopyToClipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../../packages/utils/useCopyToClipboard.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,UAAiB,EAAE,GAAE,sBAA2B;iBAU3C,MAAM;;EAc/C;AAED,MAAM,WAAW,sBAAsB;IACnC,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/utils/useCopyToClipboard.js

@@ -0,0 +1,26 @@
+"use client";
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region packages/utils/useCopyToClipboard.ts
+function i({ resetAfter: i = 1500 } = {}) {
+	let [a, o] = r(null);
+	t(() => {
+		if (!a) return;
+		let e = setTimeout(() => o(null), i);
+		return () => clearTimeout(e);
+	}, [a, i]);
+	let s = n(0);
+	return {
+		copy: e(async (e) => {
+			let t = ++s.current, n = !0;
+			try {
+				await navigator.clipboard.writeText(e);
+			} catch {
+				n = !1;
+			}
+			return t === s.current && o(n ? {} : null), n;
+		}, []),
+		copied: a !== null
+	};
+}
+//#endregion
+export { i as useCopyToClipboard };

package/dist/utils/useHoverPopup.d.ts

@@ -0,0 +1,39 @@
+import { FocusEvent, KeyboardEvent, PointerEvent } from 'react';
+export type HoverPopup = ReturnType<typeof useHoverPopup>;
+/**
+ * A manual popover shown while its trigger is pointed at or has keyboard
+ * focus (Tooltip's, HoverCard's): after `openDelay` for the pointer, hidden
+ * `closeDelay` after it leaves (so it can move onto the popup), on blur and
+ * on Escape. Spread `triggerProps` and `contentProps` from it, give the
+ * popup its `id`, and place it with useAnchorFallback where it renders.
+ */
+export declare function useHoverPopup(prefix: string, { openDelay, closeDelay }?: {
+    openDelay?: number | undefined;
+    closeDelay?: number | undefined;
+}): {
+    id: string;
+    show: () => void;
+    hide: () => void;
+    triggerProps: <E extends Element>(own: TriggerHandlers<E>) => {
+        onPointerEnter: (e: PointerEvent<E>) => void;
+        onPointerLeave: (e: PointerEvent<E>) => void;
+        onFocus: (e: FocusEvent<E>) => void;
+        onBlur: (e: FocusEvent<E>) => void;
+        onKeyDown: (e: KeyboardEvent<E>) => void;
+    };
+    contentProps: (own: TriggerHandlers<HTMLDivElement>) => {
+        onPointerEnter: (e: PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: (e: PointerEvent<HTMLDivElement>) => void;
+        onBlur: (e: FocusEvent<HTMLDivElement>) => void;
+        onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+    };
+};
+interface TriggerHandlers<E extends Element> {
+    onPointerEnter?: (e: PointerEvent<E>) => void;
+    onPointerLeave?: (e: PointerEvent<E>) => void;
+    onFocus?: (e: FocusEvent<E>) => void;
+    onBlur?: (e: FocusEvent<E>) => void;
+    onKeyDown?: (e: KeyboardEvent<E>) => void;
+}
+export {};
+//# sourceMappingURL=useHoverPopup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHoverPopup.d.ts","sourceRoot":"","sources":["../../packages/utils/useHoverPopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAkD,MAAM,OAAO,CAAC;AAEhH,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAE1D;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAa,EAAE,UAAgB,EAAE;;;CAAK;;;;mBAyC3D,CAAC,SAAS,OAAO,OAAO,eAAe,CAAC,CAAC,CAAC;4BACjC,YAAY,CAAC,CAAC,CAAC;4BAIf,YAAY,CAAC,CAAC,CAAC;qBAItB,UAAU,CAAC,CAAC,CAAC;oBAKd,UAAU,CAAC,CAAC,CAAC;uBAIV,aAAa,CAAC,CAAC,CAAC;;wBAKf,eAAe,CAAC,cAAc,CAAC;4BAC3B,YAAY,CAAC,cAAc,CAAC;4BAI5B,YAAY,CAAC,cAAc,CAAC;oBAIpC,UAAU,CAAC,cAAc,CAAC;uBAIvB,aAAa,CAAC,cAAc,CAAC;;EAO3D;AAED,UAAU,eAAe,CAAC,CAAC,SAAS,OAAO;IACvC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAC7C"}

package/dist/utils/useHoverPopup.js

@@ -0,0 +1,64 @@
+"use client";
+import { useCallback as e, useEffect as t, useId as n, useMemo as r, useRef as i } from "react";
+//#region packages/utils/useHoverPopup.ts
+function a(a, { openDelay: o = 0, closeDelay: s = 100 } = {}) {
+	let c = `${a}-${n().replace(/[^\w-]/g, "")}`, l = i(0), u = e((e) => {
+		clearTimeout(l.current);
+		let t = document.getElementById(c);
+		try {
+			e ? t?.showPopover?.() : t?.hidePopover?.();
+		} catch {}
+	}, [c]), d = e((e, t) => {
+		clearTimeout(l.current), t ? l.current = window.setTimeout(() => u(e), t) : u(e);
+	}, [u]);
+	return t(() => () => clearTimeout(l.current), []), r(() => {
+		let e = () => u(!0), t = () => u(!1), n = () => d(!1, s), r = (e) => {
+			let n = e.relatedTarget;
+			(!n || !document.getElementById(c)?.contains(n)) && t();
+		};
+		return {
+			id: c,
+			show: e,
+			hide: t,
+			triggerProps: (i) => ({
+				onPointerEnter: (e) => {
+					i.onPointerEnter?.(e), e.pointerType === "mouse" && d(!0, o);
+				},
+				onPointerLeave: (e) => {
+					i.onPointerLeave?.(e), n();
+				},
+				onFocus: (t) => {
+					i.onFocus?.(t), t.currentTarget.matches(":focus-visible") && e();
+				},
+				onBlur: (e) => {
+					i.onBlur?.(e), r(e);
+				},
+				onKeyDown: (e) => {
+					i.onKeyDown?.(e), e.key === "Escape" && t();
+				}
+			}),
+			contentProps: (r) => ({
+				onPointerEnter: (t) => {
+					r.onPointerEnter?.(t), e();
+				},
+				onPointerLeave: (e) => {
+					r.onPointerLeave?.(e), n();
+				},
+				onBlur: (e) => {
+					r.onBlur?.(e), e.currentTarget.contains(e.relatedTarget) || t();
+				},
+				onKeyDown: (e) => {
+					r.onKeyDown?.(e), e.key === "Escape" && t();
+				}
+			})
+		};
+	}, [
+		c,
+		u,
+		d,
+		o,
+		s
+	]);
+}
+//#endregion
+export { a as useHoverPopup };