@box-kite/react 1.0.0 → 2.0.0

package/components/toaster.mjs

@@ -0,0 +1,295 @@
+"use client";
+import { a as e, t } from "../platform.mjs";
+import { t as n } from "../client.mjs";
+import { n as r } from "../effects.mjs";
+import i from "../box.mjs";
+import { t as a } from "../motion.mjs";
+import { useCallback as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
+import { useSyncExternalStore as f } from "use-sync-external-store/shim";
+//#region src/utils/toast/toastStore.ts
+var p = {
+	toasts: [],
+	overflow: 0
+}, m = 0;
+function h() {
+	return m += 1, `toast-${m}`;
+}
+function g(e) {
+	let t = [], n = p, r = e?.limit ?? 3, i = e?.duration ?? 5e3, a = !1, o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Map(), c = (e) => {
+		let t = s.get(e);
+		t?.handle && clearTimeout(t.handle), s.delete(e);
+	}, l = () => {
+		let e = 0;
+		t = t.map((t) => {
+			let n = !t.open || e++ < r;
+			return t.visible === n ? t : {
+				...t,
+				visible: n
+			};
+		}), n = {
+			toasts: t,
+			overflow: Math.max(0, e - r)
+		}, u(), o.forEach((e) => e());
+	};
+	function u() {
+		let e = /* @__PURE__ */ new Set();
+		for (let n of t) {
+			if (!n.open || !n.visible || !Number.isFinite(n.duration)) continue;
+			e.add(n.id);
+			let t = s.get(n.id) ?? {
+				handle: null,
+				remaining: n.duration,
+				startedAt: 0
+			};
+			s.set(n.id, t), !(a || t.handle) && (t.startedAt = Date.now(), t.handle = setTimeout(() => {
+				s.delete(n.id), f(n.id, "timeout");
+			}, t.remaining));
+		}
+		for (let t of [...s.keys()]) e.has(t) || c(t);
+	}
+	let d = (e, t) => t ?? (e === "loading" ? Infinity : i);
+	function f(e, n = "imperative") {
+		let r = [];
+		t = t.map((t) => !t.open || e !== void 0 && t.id !== e ? t : (r.push(t), c(t.id), {
+			...t,
+			open: !1
+		})), r.length && (l(), r.forEach((e) => e.onDismiss?.(n)));
+	}
+	function m(e, n, r) {
+		let i = !1;
+		t = t.map((t) => {
+			if (t.id !== e) return t;
+			i = !0, c(e);
+			let a = r?.kind ?? t.kind;
+			return {
+				...t,
+				...r,
+				id: e,
+				message: n,
+				kind: a,
+				duration: r?.duration ?? (r?.kind ? d(a) : t.duration),
+				open: !0
+			};
+		}), i && l();
+	}
+	function g(e, n) {
+		let r = n?.id ?? h();
+		if (n?.id && t.some((e) => e.id === r)) return m(r, e, n), r;
+		let i = n?.kind ?? "default";
+		return t = [...t, {
+			id: r,
+			kind: i,
+			message: e,
+			description: n?.description,
+			duration: d(i, n?.duration),
+			action: n?.action,
+			dismissible: n?.dismissible ?? !0,
+			onDismiss: n?.onDismiss,
+			open: !0,
+			visible: !1
+		}], l(), r;
+	}
+	return {
+		subscribe(e) {
+			return o.add(e), () => o.delete(e);
+		},
+		getSnapshot: () => n,
+		getServerSnapshot: () => p,
+		add: g,
+		update: m,
+		dismiss: f,
+		remove(e) {
+			let n = t.filter((t) => t.id !== e);
+			n.length !== t.length && (c(e), t = n, l());
+		},
+		setLimit(e) {
+			e !== r && (r = e, l());
+		},
+		setDefaultDuration(e) {
+			i = e;
+		},
+		pause() {
+			if (!a) {
+				a = !0;
+				for (let e of s.values()) e.handle && (clearTimeout(e.handle), e.handle = null, e.remaining = Math.max(0, e.remaining - (Date.now() - e.startedAt)));
+			}
+		},
+		resume() {
+			a && (a = !1, u());
+		},
+		reset() {
+			for (let e of [...s.keys()]) c(e);
+			t = [], n = p, o.forEach((e) => e());
+		}
+	};
+}
+//#endregion
+//#region src/components/toaster.tsx
+var _ = g(), v = (e) => (t, n) => _.add(t, {
+	...n,
+	kind: e
+}), y = Object.assign((e, t) => _.add(e, t), {
+	success: v("success"),
+	error: v("error"),
+	warning: v("warning"),
+	info: v("info"),
+	loading: v("loading"),
+	update: (e, t, n) => _.update(e, t, n),
+	dismiss: (e) => _.dismiss(e, "imperative"),
+	promise(e, t, n) {
+		let r = _.add(t.loading, {
+			...n,
+			id: n?.id,
+			kind: "loading"
+		}), i = (e, t) => typeof e == "function" ? e(t) : e;
+		return e.then((e) => _.update(r, i(t.success, e), { kind: "success" }), (e) => _.update(r, i(t.error, e), { kind: "error" })), e;
+	}
+}), b = {
+	"top-start": "topStart",
+	"top-center": "topCenter",
+	"top-end": "topEnd",
+	"bottom-start": "bottomStart",
+	"bottom-center": "bottomCenter",
+	"bottom-end": "bottomEnd"
+};
+function x(e, t) {
+	let n = t.toLowerCase().split("+"), r = n[n.length - 1], i = new Set(n.slice(0, -1));
+	return e.key.toLowerCase() === r && e.altKey === i.has("alt") && e.ctrlKey === i.has("ctrl") && e.shiftKey === i.has("shift") && e.metaKey === i.has("meta");
+}
+function S(e) {
+	let { toast: t, store: n, fromTop: o, closeLabel: s } = e, { mounted: c, ref: d, props: f } = a({ present: t.open });
+	if (r(() => {
+		c || n.remove(t.id);
+	}, [
+		c,
+		n,
+		t.id
+	]), !c) return null;
+	let p = t.action, m = () => {
+		p?.onClick(), p?.closeOnClick !== !1 && n.dismiss(t.id, "action");
+	};
+	return /* @__PURE__ */ u(i, {
+		ref: d,
+		component: "toaster.toast",
+		variant: {
+			[t.kind]: t.kind !== "default",
+			fromTop: o
+		},
+		props: {
+			...t.kind === "error" ? { role: "alert" } : {},
+			"data-toast-id": t.id,
+			...f
+		},
+		children: [
+			/* @__PURE__ */ l(i, {
+				component: "toaster.message",
+				children: t.message
+			}),
+			t.description !== void 0 && /* @__PURE__ */ l(i, {
+				component: "toaster.description",
+				children: t.description
+			}),
+			p && /* @__PURE__ */ l(i, {
+				tag: "button",
+				component: "toaster.action",
+				props: {
+					type: "button",
+					onClick: m
+				},
+				children: p.label
+			}),
+			t.dismissible && /* @__PURE__ */ l(i, {
+				tag: "button",
+				component: "toaster.close",
+				props: {
+					type: "button",
+					"aria-label": s,
+					onClick: () => n.dismiss(t.id, "close")
+				}
+			})
+		]
+	});
+}
+function C(a) {
+	let { position: p = "bottom-end", limit: m = 3, duration: h = 5e3, label: g = "Notifications", closeLabel: v = "Close", overflowLabel: y = (e) => `+${e} more`, hotkey: C = "F6", store: w = _, props: T, ...E } = a, D = f(w.subscribe, w.getSnapshot, w.getServerSnapshot), [O, k] = c(!0), A = n(!O), j = s(null), M = s(null), N = s({
+		hovered: !1,
+		focused: !1,
+		hidden: !1
+	}), P = o(() => {
+		let { hovered: e, focused: t, hidden: n } = N.current;
+		e || t || n ? w.pause() : w.resume();
+	}, [w]);
+	r(() => {
+		e() || k(!1);
+	}, []), r(() => w.setLimit(m), [w, m]), r(() => w.setDefaultDuration(h), [w, h]), r(() => {
+		let t = j.current;
+		!O || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
+	}), r(() => {
+		let e = t();
+		if (!e) return;
+		let n = new AbortController();
+		return e.addEventListener("visibilitychange", () => {
+			N.current.hidden = e.hidden, P();
+		}, { signal: n.signal }), () => n.abort();
+	}, [P]), r(() => {
+		let e = t();
+		if (!C || !e) return;
+		let n = new AbortController();
+		return e.addEventListener("keydown", (t) => {
+			!x(t, C) || !j.current || (t.preventDefault(), M.current = e.activeElement, j.current.focus());
+		}, { signal: n.signal }), () => n.abort();
+	}, [C]);
+	let F = (e) => !!e && !!j.current?.contains(e), I = () => {
+		N.current.hovered = !0, P();
+	}, L = (e) => {
+		F(e.relatedTarget) || (N.current.hovered = !1, P());
+	}, R = (e) => {
+		N.current.focused = !0, P(), F(e.relatedTarget) || (M.current = e.relatedTarget);
+	}, z = (e) => {
+		F(e.relatedTarget) || (N.current.focused = !1, P());
+	}, B = (e) => {
+		if (e.key !== "Escape") return;
+		let t = (e.target.closest?.("[data-toast-id]"))?.getAttribute("data-toast-id");
+		t && w.dismiss(t, "close"), w.getSnapshot().toasts.some((e) => e.open) ? j.current?.focus() : M.current?.focus();
+	}, V = p.startsWith("top"), H = D.toasts.filter((e) => e.visible), U = V ? [...H].reverse() : H, W = D.overflow > 0 && /* @__PURE__ */ l(i, {
+		component: "toaster.overflow",
+		children: y(D.overflow)
+	}), G = /* @__PURE__ */ u(i, {
+		tag: "section",
+		ref: j,
+		component: "toaster",
+		...E,
+		variant: [E.variant, { [b[p]]: !0 }],
+		props: {
+			...O ? { popover: "manual" } : {},
+			"aria-live": "polite",
+			"aria-atomic": "false",
+			"aria-relevant": "additions text",
+			"aria-label": g,
+			tabIndex: -1,
+			...T,
+			onPointerOver: I,
+			onPointerOut: L,
+			onFocus: R,
+			onBlur: z,
+			onKeyDown: B
+		},
+		children: [
+			!V && W,
+			U.map((e) => /* @__PURE__ */ l(S, {
+				toast: e,
+				store: w,
+				fromTop: V,
+				closeLabel: v
+			}, e.id)),
+			V && W
+		]
+	});
+	return O ? G : A ? d(G, A) : null;
+}
+var w = C;
+w.displayName = "Toaster";
+//#endregion
+export { g as createToastStore, w as default, _ as defaultToastStore, y as toast };

package/components/tooltip.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("./overlay.cjs"),n=require("./presence.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(a){let{content:o,children:s,open:c,defaultOpen:l=!1,onOpenChange:u,openDelay:d=300,closeDelay:f=150,adjustTranslateX:p,adjustTranslateY:m,props:h,...g}=a,_=e.n(`tooltip`),v=g.id??_,[y,b]=e.a({value:c,defaultValue:l,onChange:u}),[x,S]=(0,r.useState)(null),C=(0,r.useRef)(null),w=(0,r.useRef)(void 0),T=(0,r.useRef)(!1),E=(0,r.useRef)(!1),D=(0,r.useRef)(!1),O=(0,r.useRef)(!1),k=(0,r.useCallback)(()=>{clearTimeout(w.current),w.current=void 0},[]),A=(0,r.useCallback)((e,t)=>{if(k(),e<=0){t();return}w.current=setTimeout(()=>{w.current=void 0,t()},e)},[k]),j=(0,r.useCallback)((e,t)=>{A(f,()=>{T.current||E.current||D.current||b(!1,{reason:e,event:t})})},[f,A,b]);e.i({enabled:y,outsidePointer:!1,inside:[C],onDismiss:(e,t)=>{k(),O.current=!0,b(!1,{reason:e,event:t})}}),(0,r.useEffect)(()=>k,[k]);let M=y&&o!=null,N=e.o(e=>{T.current=!0,!O.current&&A(d,()=>b(!0,{reason:`hover`,event:e}))}),P=e.o(e=>{T.current=!1,O.current=!1,j(`pointer-leave`,e)}),F=e.o(e=>{D.current=!0,k(),b(!0,{reason:`focus`,event:e})}),I=e.o(e=>{D.current=!1,O.current=!1,j(`blur`,e)}),L=e.o(()=>{E.current=!0,k()}),R=e.o(e=>{E.current=!1,j(`pointer-leave`,e)}),z=(0,r.useMemo)(()=>({ref:S,props:{"aria-describedby":M?v:void 0,onPointerEnter:N,onPointerLeave:P,onFocus:F,onBlur:I}}),[I,N,F,P,M,v]);return(0,i.jsxs)(i.Fragment,{children:[s(z),(0,i.jsx)(n.default,{present:M,children:e=>(0,i.jsx)(t.default,{ref:C,contentRef:e.ref,anchor:x,anchorSide:`bottom`,matchWidth:!1,adjustTranslateX:p,adjustTranslateY:m??`4px`,component:`tooltip`,...g,variant:[g.variant,{closed:!e.present}],id:v,props:{role:`tooltip`,...e.props,...h,onPointerEnter:L,onPointerLeave:R},children:o})})]})}a.displayName=`Tooltip`,exports.default=a;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("../identity.cjs"),n=require("./overlay.cjs"),r=require("./presence.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(o){let{content:s,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,openDelay:f=300,closeDelay:p=150,side:m=`bottom`,align:h=`center`,offset:g=1,flip:_=!0,props:v,...y}=o,b=t.t(`tooltip`),x=y.id??b,[S,C]=e.i({value:l,defaultValue:u,onChange:d}),[w,T]=(0,i.useState)(null),E=(0,i.useRef)(null),D=(0,i.useRef)(void 0),O=(0,i.useRef)(!1),k=(0,i.useRef)(!1),A=(0,i.useRef)(!1),j=(0,i.useRef)(!1),M=(0,i.useCallback)(()=>{clearTimeout(D.current),D.current=void 0},[]),N=(0,i.useCallback)((e,t)=>{if(M(),e<=0){t();return}D.current=setTimeout(()=>{D.current=void 0,t()},e)},[M]),P=(0,i.useCallback)((e,t)=>{N(p,()=>{O.current||k.current||A.current||C(!1,{reason:e,event:t})})},[p,N,C]);e.r({enabled:S,outsidePointer:!1,inside:[E],onDismiss:(e,t)=>{M(),j.current=!0,C(!1,{reason:e,event:t})}}),(0,i.useEffect)(()=>M,[M]);let F=S&&s!=null,I=e.a(e=>{O.current=!0,!j.current&&N(f,()=>C(!0,{reason:`hover`,event:e}))}),L=e.a(e=>{O.current=!1,j.current=!1,P(`pointer-leave`,e)}),R=e.a(e=>{A.current=!0,M(),C(!0,{reason:`focus`,event:e})}),z=e.a(e=>{A.current=!1,j.current=!1,P(`blur`,e)}),B=e.a(()=>{k.current=!0,M()}),V=e.a(e=>{k.current=!1,P(`pointer-leave`,e)}),H=(0,i.useMemo)(()=>({ref:T,props:{"aria-describedby":F?x:void 0,onPointerEnter:I,onPointerLeave:L,onFocus:R,onBlur:z}}),[z,I,R,L,F,x]);return(0,a.jsxs)(a.Fragment,{children:[c(H),(0,a.jsx)(r.default,{present:F,children:e=>(0,a.jsx)(n.default,{ref:E,contentRef:e.ref,anchor:w,side:m,align:h,offset:g,flip:_,matchWidth:!1,component:`tooltip`,...y,variant:[y.variant,{closed:!e.present}],id:x,props:{role:`tooltip`,...e.props,...v,onPointerEnter:B,onPointerLeave:V},children:s})})]})}o.displayName=`Tooltip`,exports.default=o;

package/components/tooltip.d.ts

@@ -1,6 +1,7 @@
 import { BoxProps } from '../box';
 import { ChangeHandler } from '../react/a11y/useControllableState';
 import { ComponentsAndVariants } from '@box-kite/core/types';
+import { AnchorAlign, AnchorSide } from '../utils/anchor/anchorUtils';
 /** Why the tooltip opened or closed — `onOpenChange` gets this alongside the event that did it. */
 export type TooltipReason = 'hover' | 'focus' | 'pointer-leave' | 'blur' | 'escape';
 /** The DOM attributes and handlers the trigger has to carry. */
@@ -25,7 +26,7 @@ export interface TooltipTrigger {
     ref: React.RefCallback<HTMLElement>;
     props: TooltipTriggerAttributes;
 }
-type TooltipBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'children' | 'content' | 'open'>;
+type TooltipBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'children' | 'content' | 'open' | 'flip'>;
 interface Props<TKey extends keyof ComponentsAndVariants> extends TooltipBoxProps<TKey> {
     /** The description itself. Nothing renders while this is empty. */
     content?: React.ReactNode;
@@ -33,7 +34,10 @@ interface Props<TKey extends keyof ComponentsAndVariants> extends TooltipBoxProp
     children: (trigger: TooltipTrigger) => React.ReactNode;
     /** Controlled open state. Leave it out and the tooltip owns it. */
     open?: boolean;
+    /** Whether it starts open, when the tooltip owns its own state. */
     defaultOpen?: boolean;
+    /** Fires with the new state and why it changed — `'hover'`, `'focus'`, `'pointer-leave'`, `'blur'`
+     * or `'escape'`. */
     onOpenChange?: ChangeHandler<boolean, TooltipReason>;
     /**
      * How long the pointer has to rest on the trigger, in ms. Default 300 — sweeping across a toolbar should
@@ -42,12 +46,24 @@ interface Props<TKey extends keyof ComponentsAndVariants> extends TooltipBoxProp
     openDelay?: number;
     /** The grace period after the pointer leaves, in ms. Default 150, so the pointer can reach the tooltip (WCAG 1.4.13). */
     closeDelay?: number;
-    adjustTranslateX?: string;
-    adjustTranslateY?: string;
+    /**
+     * Which side of the trigger the bubble sits on — `top`/`bottom` are the block axis, `start`/`end` the
+     * inline one. Default `'bottom'`, and a side with no room flips to its opposite either way.
+     */
+    side?: AnchorSide;
+    /** Which of the trigger's edges to line the bubble up with along the other axis. Default `'center'`. */
+    align?: AnchorAlign;
+    /**
+     * The gap between trigger and bubble, on the ÷4 spacing scale. Default 1 — 4px, which is near enough
+     * for the pointer to cross without leaving the trigger (WCAG 1.4.13) and far enough to read as a layer.
+     */
+    offset?: number;
+    /** Whether a side with no room may be swapped for its opposite. Default `true`. */
+    flip?: boolean;
 }
 /**
  * The APG tooltip: a description that appears on hover *and* on focus and stays until the user is done
- * with it. Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+ * with it.
  *
  * ```tsx
  * <Tooltip content="Deletes the row for good">{(trigger) => <Button {...trigger}>Delete</Button>}</Tooltip>
@@ -58,6 +74,25 @@ interface Props<TKey extends keyof ComponentsAndVariants> extends TooltipBoxProp
  * on `aria-describedby` costs the thing the pattern is for. The component owns `role="tooltip"`, the
  * `aria-describedby`, and WCAG 1.4.13's three obligations — dismissible with Escape without moving focus,
  * hoverable, and never closed on a timer. Focus never enters it: a focusable tooltip is a mislabelled dialog.
+ *
+ * @pattern https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+ * @a11y `role="tooltip"` on the bubble and `aria-describedby` on the trigger, so the description is read
+ * as part of the control rather than as text that happens to be nearby.
+ * @a11y WCAG 1.4.13, all three parts: Escape dismisses it without moving focus, the pointer can travel
+ * onto the bubble and read it, and nothing hides it on a timer.
+ * @a11y The bubble is never in the tab order — a focusable tooltip is a dialog with the wrong role — and
+ * it renders nothing at all while `content` is empty.
+ * @keyboard Tab — Shows it as soon as the trigger has focus, ignoring `openDelay`: a keyboard user asked
+ * for it by arriving.
+ * @keyboard Escape — Hides it, leaving focus on the trigger. It stays hidden until the pointer or focus
+ * leaves and comes back.
+ * @keyboard Tab, again — Reaches the next control, and the tooltip closes behind it.
+ * @keyboard (Pointer) Resting on the trigger — Shows it after `openDelay`, 300 ms by default: sweeping
+ * across a toolbar should not light every control up.
+ * @keyboard (Pointer) Leaving the trigger — Hides it after `closeDelay`, 150 ms — unless the pointer
+ * lands on the tooltip itself.
+ * @keyboard (Pointer) Moving onto the tooltip — Keeps it open for as long as the pointer is there, so a
+ * long description can be read or selected.
  */
 declare function Tooltip<TKey extends keyof ComponentsAndVariants = 'tooltip'>(props: Props<TKey>): import("react").JSX.Element;
 export default Tooltip;

package/components/tooltip.mjs

@@ -1,103 +1,105 @@
 "use client";
-import { a as e, i as t, n, o as r } from "../behavior.mjs";
+import { a as e, i as t, r as n } from "../behavior.mjs";
+import { t as r } from "../identity.mjs";
 import i from "./overlay.mjs";
 import a from "./presence.mjs";
 import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/tooltip.tsx
 function m(m) {
-	let { content: h, children: g, open: _, defaultOpen: v = !1, onOpenChange: y, openDelay: b = 300, closeDelay: x = 150, adjustTranslateX: S, adjustTranslateY: C, props: w, ...T } = m, E = n("tooltip"), D = T.id ?? E, [O, k] = e({
+	let { content: h, children: g, open: _, defaultOpen: v = !1, onOpenChange: y, openDelay: b = 300, closeDelay: x = 150, side: S = "bottom", align: C = "center", offset: w = 1, flip: T = !0, props: E, ...D } = m, O = r("tooltip"), k = D.id ?? O, [A, j] = t({
 		value: _,
 		defaultValue: v,
 		onChange: y
-	}), [A, j] = u(null), M = l(null), N = l(void 0), P = l(!1), F = l(!1), I = l(!1), L = l(!1), R = o(() => {
-		clearTimeout(N.current), N.current = void 0;
-	}, []), z = o((e, t) => {
-		if (R(), e <= 0) {
+	}), [M, N] = u(null), P = l(null), F = l(void 0), I = l(!1), L = l(!1), R = l(!1), z = l(!1), B = o(() => {
+		clearTimeout(F.current), F.current = void 0;
+	}, []), V = o((e, t) => {
+		if (B(), e <= 0) {
 			t();
 			return;
 		}
-		N.current = setTimeout(() => {
-			N.current = void 0, t();
+		F.current = setTimeout(() => {
+			F.current = void 0, t();
 		}, e);
-	}, [R]), B = o((e, t) => {
-		z(x, () => {
-			P.current || F.current || I.current || k(!1, {
+	}, [B]), H = o((e, t) => {
+		V(x, () => {
+			I.current || L.current || R.current || j(!1, {
 				reason: e,
 				event: t
 			});
 		});
 	}, [
 		x,
-		z,
-		k
+		V,
+		j
 	]);
-	t({
-		enabled: O,
+	n({
+		enabled: A,
 		outsidePointer: !1,
-		inside: [M],
+		inside: [P],
 		onDismiss: (e, t) => {
-			R(), L.current = !0, k(!1, {
+			B(), z.current = !0, j(!1, {
 				reason: e,
 				event: t
 			});
 		}
-	}), s(() => R, [R]);
-	let V = O && h != null, H = r((e) => {
-		P.current = !0, !L.current && z(b, () => k(!0, {
+	}), s(() => B, [B]);
+	let U = A && h != null, W = e((e) => {
+		I.current = !0, !z.current && V(b, () => j(!0, {
 			reason: "hover",
 			event: e
 		}));
-	}), U = r((e) => {
-		P.current = !1, L.current = !1, B("pointer-leave", e);
-	}), W = r((e) => {
-		I.current = !0, R(), k(!0, {
+	}), G = e((e) => {
+		I.current = !1, z.current = !1, H("pointer-leave", e);
+	}), K = e((e) => {
+		R.current = !0, B(), j(!0, {
 			reason: "focus",
 			event: e
 		});
-	}), G = r((e) => {
-		I.current = !1, L.current = !1, B("blur", e);
-	}), K = r(() => {
-		F.current = !0, R();
-	}), q = r((e) => {
-		F.current = !1, B("pointer-leave", e);
-	}), J = c(() => ({
-		ref: j,
+	}), q = e((e) => {
+		R.current = !1, z.current = !1, H("blur", e);
+	}), J = e(() => {
+		L.current = !0, B();
+	}), Y = e((e) => {
+		L.current = !1, H("pointer-leave", e);
+	}), X = c(() => ({
+		ref: N,
 		props: {
-			"aria-describedby": V ? D : void 0,
-			onPointerEnter: H,
-			onPointerLeave: U,
-			onFocus: W,
-			onBlur: G
+			"aria-describedby": U ? k : void 0,
+			onPointerEnter: W,
+			onPointerLeave: G,
+			onFocus: K,
+			onBlur: q
 		}
 	}), [
-		G,
-		H,
+		q,
 		W,
+		K,
+		G,
 		U,
-		V,
-		D
+		k
 	]);
-	return /* @__PURE__ */ p(d, { children: [g(J), /* @__PURE__ */ f(a, {
-		present: V,
+	return /* @__PURE__ */ p(d, { children: [g(X), /* @__PURE__ */ f(a, {
+		present: U,
 		children: (e) => /* @__PURE__ */ f(i, {
-			ref: M,
+			ref: P,
 			contentRef: e.ref,
-			anchor: A,
-			anchorSide: "bottom",
+			anchor: M,
+			side: S,
+			align: C,
+			offset: w,
+			flip: T,
 			matchWidth: !1,
-			adjustTranslateX: S,
-			adjustTranslateY: C ?? "4px",
 			component: "tooltip",
-			...T,
-			variant: [T.variant, { closed: !e.present }],
-			id: D,
+			...D,
+			variant: [D.variant, { closed: !e.present }],
+			id: k,
 			props: {
 				role: "tooltip",
 				...e.props,
-				...w,
-				onPointerEnter: K,
-				onPointerLeave: q
+				...E,
+				onPointerEnter: J,
+				onPointerLeave: Y
 			},
 			children: h
 		})