@versaur/react 1.0.11 → 1.0.13

package/dist/blocks.d.ts

@@ -748,7 +748,7 @@ export declare interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>,
     children: ReactNode;
     /**
      * Placement relative to trigger button
-     * @default "bottom"
+     * @default "undefined" (auto placement by Tooltip)
      */
     placement?: MenuPlacement;
     /**
@@ -756,11 +756,6 @@ export declare interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>,
      * @default 400
      */
     maxHeight?: number;
-    /**
-     * Minimum width of the menu list in pixels
-     * @default 160
-     */
-    minWidth?: number;
     /**
      * Maximum width of the menu list in pixels
      * @default 320
@@ -1208,7 +1203,33 @@ declare const TableCheckbox: ForwardRefExoticComponent<TableCheckboxProps & RefA
 /**
  * Table.Checkbox - built-in checkbox for row selection
  */
-export declare interface TableCheckboxProps {
+export declare type TableCheckboxProps = {
+    /**
+     * Whether this is the select-all checkbox in the header
+     */
+    isMain: true;
+    /**
+     * Unique row identifier (not needed for main checkbox)
+     */
+    rowId?: never;
+    /**
+     * Whether checkbox is checked (optional - managed by Table context)
+     */
+    checked?: boolean;
+    /**
+     * Indeterminate state (e.g., for select-all checkbox)
+     */
+    indeterminate?: boolean;
+    /**
+     * Callback when checkbox state changes (optional - managed by Table context)
+     */
+    onChange?: (checked: boolean) => void;
+} | {
+    /**
+     * Whether this is the select-all checkbox in the header
+     * @default false
+     */
+    isMain?: false;
     /**
      * Unique row identifier
      */
@@ -1218,14 +1239,14 @@ export declare interface TableCheckboxProps {
      */
     checked?: boolean;
     /**
-     * Indeterminate state (e.g., for parent checkbox)
+     * Indeterminate state (e.g., for select-all checkbox)
      */
     indeterminate?: boolean;
     /**
      * Callback when checkbox state changes (optional - managed by Table context)
      */
     onChange?: (checked: boolean) => void;
-}
+};
 
 /**
  * TableCol - polymorphic cell with grid area support
@@ -1324,18 +1345,22 @@ declare interface TableSelectionData {
 }
 
 /**
- * TableToolbar - renders toolbar content with optional render function receiving selected row IDs
+ * TableToolbar - renders toolbar content with optional render functions for left and right slots
  */
 declare const TableToolbar: ForwardRefExoticComponent<TableToolbarProps & RefAttributes<HTMLDivElement>>;
 
 /**
- * Table.Toolbar - generic slot for action controls with optional render function
+ * Table.Toolbar - generic slot for action controls with optional render functions
  */
 export declare interface TableToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /**
-     * Render function receives selected row IDs Set, or regular children
+     * Render function for left-aligned content (receives selected row IDs Set)
+     */
+    leftContent?: ReactNode | ((selectedIds: Set<string | number>) => ReactNode);
+    /**
+     * Render function for right-aligned content (receives selected row IDs Set)
      */
-    children?: ReactNode | ((selectedIds: Set<string | number>) => ReactNode);
+    rightContent?: ReactNode | ((selectedIds: Set<string | number>) => ReactNode);
 }
 
 /**

package/dist/blocks.js

@@ -1,12 +1,12 @@
 import { jsxs as y, jsx as o, Fragment as Tt } from "react/jsx-runtime";
-import { accordionStyles as D, avatarGroupStyles as St, tabsStyles as G, noResultsStyles as F, attributeListStyles as wt, badgeGroupStyles as Bt, cardStyles as C, menuStyles as H, tableStyles as B, buttonGroupStyles as At, topBarStyles as L, navStyles as j, sidebarStyles as T, bottomBarStyles as $, appLayoutStyles as x, formGroupStyles as X, featuresStyles as W, drawerStyles as Rt, modalStyles as It, bottomSheetStyles as Lt } from "@versaur/core/blocks";
+import { accordionStyles as D, avatarGroupStyles as St, tabsStyles as G, noResultsStyles as F, attributeListStyles as Bt, badgeGroupStyles as wt, cardStyles as C, menuStyles as H, tableStyles as w, buttonGroupStyles as At, topBarStyles as L, navStyles as j, sidebarStyles as T, bottomBarStyles as $, appLayoutStyles as x, formGroupStyles as X, featuresStyles as W, drawerStyles as Rt, modalStyles as It, bottomSheetStyles as Lt } from "@versaur/core/blocks";
 import { ChevronDownIcon as Z, XIcon as q } from "@versaur/icons";
 import xt, { createContext as A, forwardRef as n, useRef as M, useState as P, useEffect as z, useContext as R, useLayoutEffect as Ft, useId as O, useCallback as Dt } from "react";
 import { u as v } from "./use-data-attrs-iPFyfiKN.js";
 import { c as d } from "./cx-B9vmfsc1.js";
-import { c as ee, I as E, T as I, B as V, H as Mt } from "./tooltip-Zuq8gd0f.js";
+import { c as ee, I as E, T as I, B as V, H as Mt } from "./tooltip-_eEMRSo8.js";
 import { checkboxStyles as k } from "@versaur/core/forms";
-import { overlayPartsStyles as w } from "@versaur/core/utils";
+import { overlayPartsStyles as B } from "@versaur/core/utils";
 import { c as J, a as te, O as K, b as Ht } from "./overlay-parts-Zq9CuT31.js";
 const ae = A(void 0);
 function Gt() {
@@ -212,7 +212,7 @@ const ce = n(
       "dl",
       {
         ref: m,
-        className: d(wt["attribute-list"], r),
+        className: d(Bt["attribute-list"], r),
         ...u,
         style: {
           "--_columns": t,
@@ -268,7 +268,7 @@ const ma = Object.assign(ce, {
       "div",
       {
         ref: u,
-        className: d(Bt["badge-group"], i),
+        className: d(wt["badge-group"], i),
         role: "group",
         "aria-label": r,
         ...c,
@@ -319,33 +319,31 @@ const ua = Object.assign(de, {
 }), be = A(void 0), Ne = n(
   ({
     id: e,
-    placement: t = "bottom",
+    placement: t,
     maxHeight: a = 400,
-    minWidth: s = 160,
-    maxWidth: r = 320,
-    gap: l = 8,
-    value: i,
-    onChange: m,
-    closeOnClick: u = !1,
-    children: c,
-    ...p
-  }, N) => {
-    const b = {
+    maxWidth: s = 320,
+    gap: r = 8,
+    value: l,
+    onChange: i,
+    closeOnClick: m = !1,
+    children: u,
+    ...c
+  }, p) => {
+    const N = {
       id: e,
-      closeOnClick: u,
-      onChange: m,
-      value: i
+      closeOnClick: m,
+      onChange: i,
+      value: l
     };
-    return /* @__PURE__ */ o("div", { ref: N, ...p, children: /* @__PURE__ */ o(be.Provider, { value: b, children: /* @__PURE__ */ o(I, { id: e, placement: t, gap: l, triggerType: "focus", children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o("div", { ref: p, ...c, children: /* @__PURE__ */ o(be.Provider, { value: N, children: /* @__PURE__ */ o(I, { id: e, placement: t, gap: r, type: "persisted", children: /* @__PURE__ */ o(
       "div",
       {
         className: H["menu-list"],
         style: {
           "--_max-height": `${a}px`,
-          "--_max-width": `${r}px`,
-          "--_min-width": `${s}px`
+          "--_max-width": `${s}px`
         },
-        children: c
+        children: u
       }
     ) }) }) });
   }
@@ -402,20 +400,25 @@ function fe() {
     throw new Error("useTableProvider must be used within a Table component");
   return e;
 }
-const he = n(({ children: e, className: t, ...a }, s) => {
-  const r = fe(), l = typeof e == "function" ? e(r.selectedRows) : e;
-  return /* @__PURE__ */ o("div", { ref: s, className: d(B.toolbar, t), ...a, children: l });
-});
+const he = n(
+  ({ leftContent: e, rightContent: t, className: a, ...s }, r) => {
+    const l = fe(), i = typeof e == "function" ? e(l.selectedRows) : e, m = typeof t == "function" ? t(l.selectedRows) : t;
+    return /* @__PURE__ */ y("div", { ref: r, className: d(w.toolbar, a), ...s, children: [
+      /* @__PURE__ */ o("div", { children: i }),
+      /* @__PURE__ */ o("div", { children: m })
+    ] });
+  }
+);
 he.displayName = "Table.Toolbar";
-const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.header, e), ...t }));
+const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.header, e), ...t }));
 ge.displayName = "Table.Header";
-const Te = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.body, e), ...t }));
+const Te = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.body, e), ...t }));
 Te.displayName = "Table.Body";
-const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.footer, e), ...t }));
+const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.footer, e), ...t }));
 Se.displayName = "Table.Footer";
-const we = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.row, e), ...t }));
-we.displayName = "Table.Row";
-const Be = n(
+const Be = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(w.row, e), ...t }));
+Be.displayName = "Table.Row";
+const we = n(
   ({ as: e = "div", area: t, variant: a, className: s, style: r, ...l }, i) => {
     const m = v({
       variant: a
@@ -424,7 +427,7 @@ const Be = n(
       e,
       {
         ref: i,
-        className: d(B.col, s),
+        className: d(w.col, s),
         style: {
           "--_area": t,
           ...r
@@ -435,26 +438,26 @@ const Be = n(
     );
   }
 );
-Be.displayName = "Table.Col";
+we.displayName = "Table.Col";
 const Ae = n(
-  ({ rowId: e, checked: t, indeterminate: a, onChange: s }, r) => {
-    const l = fe(), i = e === "select-all", m = i ? l.selectedRows.size === l.allRowIds.size && l.allRowIds.size > 0 : l.selectedRows.has(e);
-    !i && e && l.registerRowId(e);
+  ({ rowId: e, isMain: t = !1, checked: a, indeterminate: s, onChange: r }, l) => {
+    const i = fe(), m = t ? i.selectedRows.size === i.allRowIds.size && i.allRowIds.size > 0 : e !== void 0 && i.selectedRows.has(e);
+    !t && e !== void 0 && i.registerRowId(e);
     const u = (p) => {
-      i ? l.onSelectAll(Array.from(l.allRowIds), p.target.checked) : l.onSelectionChange(e, p.target.checked), s == null || s(p.target.checked);
-    }, c = i && l.selectedRows.size > 0 && l.selectedRows.size < l.allRowIds.size;
+      t ? i.onSelectAll(Array.from(i.allRowIds), p.target.checked) : e !== void 0 && i.onSelectionChange(e, p.target.checked), r == null || r(p.target.checked);
+    }, c = t && i.selectedRows.size > 0 && i.selectedRows.size < i.allRowIds.size;
     return /* @__PURE__ */ y("label", { className: k.checkbox, children: [
       /* @__PURE__ */ o(
         "input",
         {
           ref: (p) => {
-            p && (p.indeterminate = c || a || !1, typeof r == "function" ? r(p) : r && (r.current = p));
+            p && (p.indeterminate = c || s || !1, typeof l == "function" ? l(p) : l && (l.current = p));
           },
           type: "checkbox",
           className: k.input,
-          checked: t !== void 0 ? t : m,
+          checked: a !== void 0 ? a : m,
           onChange: u,
-          "aria-label": i ? "Select all rows" : `Select row ${e}`
+          "aria-label": t ? "Select all rows" : `Select row ${e}`
         }
       ),
       /* @__PURE__ */ o("span", { className: k.indicator })
@@ -463,9 +466,9 @@ const Ae = n(
 );
 Ae.displayName = "Table.Checkbox";
 const Re = n(
-  ({ as: e = "div", title: t, subtitle: a, size: s = "md", className: r, ...l }, i) => /* @__PURE__ */ y(e, { ref: i, className: d(B.col, r), "data-variant": "double-line", ...l, children: [
-    /* @__PURE__ */ o("div", { className: B["double-line-title"], "data-size": s, children: t }),
-    /* @__PURE__ */ o("div", { className: B["double-line-subtitle"], "data-size": s, children: a })
+  ({ as: e = "div", title: t, subtitle: a, size: s = "md", className: r, ...l }, i) => /* @__PURE__ */ y(e, { ref: i, className: d(w.col, r), "data-variant": "double-line", ...l, children: [
+    /* @__PURE__ */ o("div", { className: w["double-line-title"], "data-size": s, children: t }),
+    /* @__PURE__ */ o("div", { className: w["double-line-subtitle"], "data-size": s, children: a })
   ] })
 );
 Re.displayName = "Table.DoubleLine";
@@ -473,14 +476,14 @@ const Ie = _.Item;
 Ie.displayName = "Table.ActionItem";
 const Le = n(({ icon: e, children: t }, a) => {
   const s = O(), r = _.getTriggerProps({ id: s });
-  return /* @__PURE__ */ y("div", { ref: a, className: d(B.action), children: [
+  return /* @__PURE__ */ y("div", { ref: a, className: d(w.action), children: [
     /* @__PURE__ */ o(
       V,
       {
         ...r,
         as: e,
         variant: "ghost",
-        className: d(B["action-trigger"]),
+        className: d(w["action-trigger"]),
         "aria-label": "Actions",
         onClick: (l) => {
           l.stopPropagation();
@@ -520,7 +523,7 @@ const xe = n(({ columns: e, children: t, className: a, style: s, onSelectionChan
     "div",
     {
       ref: i,
-      className: d(B.table, a),
+      className: d(w.table, a),
       style: {
         "--_columns": e,
         ...s
@@ -536,8 +539,8 @@ const pa = Object.assign(xe, {
   Header: ge,
   Body: Te,
   Footer: Se,
-  Row: we,
-  Col: Be,
+  Row: Be,
+  Col: we,
   Checkbox: Ae,
   DoubleLine: Re,
   Action: Le,
@@ -957,7 +960,7 @@ const Y = lt, it = A(void 0), Ut = () => {
         className: d(e && Rt.drawer, r),
         ...m,
         ...l,
-        children: /* @__PURE__ */ o("div", { className: w.content, children: s })
+        children: /* @__PURE__ */ o("div", { className: B.content, children: s })
       }
     ) });
   }
@@ -975,7 +978,7 @@ const nt = n(({ onClick: e, ...t }, a) => {
       onClick: (l) => {
         s(), e == null || e(l);
       },
-      className: w.closeButton,
+      className: B.closeButton,
       ...t
     }
   );
@@ -986,15 +989,15 @@ const dt = n(
     "div",
     {
       ref: l,
-      className: d(w.header, s),
+      className: d(B.header, s),
       ...r,
       ...e && { "data-action": "" },
       ...a && { "data-tabs": "" },
       children: [
         e ? /* @__PURE__ */ y(Tt, { children: [
-          /* @__PURE__ */ o("div", { className: w.headerTop, children: e }),
-          t && /* @__PURE__ */ o("div", { className: w.headerContent, children: t })
-        ] }) : /* @__PURE__ */ o("div", { className: w.headerTop, children: t }),
+          /* @__PURE__ */ o("div", { className: B.headerTop, children: e }),
+          t && /* @__PURE__ */ o("div", { className: B.headerContent, children: t })
+        ] }) : /* @__PURE__ */ o("div", { className: B.headerTop, children: t }),
         a
       ]
     }
@@ -1025,7 +1028,7 @@ const Ta = Object.assign(ct, {
         "data-modal": "",
         ...u,
         ...i,
-        children: /* @__PURE__ */ o("div", { className: w.content, children: r })
+        children: /* @__PURE__ */ o("div", { className: B.content, children: r })
       }
     ) });
   }
@@ -1043,13 +1046,13 @@ const pt = n(({ onClick: e, ...t }, a) => {
       onClick: (l) => {
         s(), e == null || e(l);
       },
-      className: w.closeButton,
+      className: B.closeButton,
       ...t
     }
   );
 });
 pt.displayName = "Modal.CloseButton";
-const bt = n(({ action: e, children: t, className: a, ...s }, r) => /* @__PURE__ */ y("div", { ref: r, className: d(w.header, "modal-header", a), "data-modal-header": "", ...s, children: [
+const bt = n(({ action: e, children: t, className: a, ...s }, r) => /* @__PURE__ */ y("div", { ref: r, className: d(B.header, "modal-header", a), "data-modal-header": "", ...s, children: [
   /* @__PURE__ */ o("div", { children: t }),
   e && /* @__PURE__ */ o("div", { className: "modal-header-action", children: e })
 ] }));
@@ -1059,7 +1062,7 @@ const Nt = n(
     "div",
     {
       ref: r,
-      className: d(w.footer, "modal-footer", a),
+      className: d(B.footer, "modal-footer", a),
       "data-modal-footer": "",
       "data-align": e,
       ...s,
@@ -1088,7 +1091,7 @@ const Sa = Object.assign(ut, {
       onOpenChange: t,
       className: d(Lt.bottomSheet, s),
       ...r,
-      children: /* @__PURE__ */ o("div", { className: w.content, children: a })
+      children: /* @__PURE__ */ o("div", { className: B.content, children: a })
     }
   ) })
 );
@@ -1106,14 +1109,14 @@ const ft = n(
         onClick: (l) => {
           s(), e == null || e(l);
         },
-        className: w.closeButton,
+        className: B.closeButton,
         ...t
       }
     );
   }
 );
 ft.displayName = "BottomSheet.CloseButton";
-const wa = Object.assign(vt, {
+const Ba = Object.assign(vt, {
   Body: K,
   CloseButton: ft,
   Footer: te,
@@ -1127,7 +1130,7 @@ export {
   zt as AvatarGroup,
   Ct as BadgeGroup,
   va as BottomBar,
-  wa as BottomSheet,
+  Ba as BottomSheet,
   Xt as ButtonGroup,
   ua as Card,
   Y as Dialog,

package/dist/primitive.d.ts

@@ -528,10 +528,6 @@ declare interface TooltipGetTriggerPropsOptions {
      * Unique identifier matching the Tooltip's id
      */
     id: string;
-    /**
-     * Gap between tooltip and trigger in pixels
-     */
-    gap?: number;
     [key: string]: any;
 }
 
@@ -555,9 +551,11 @@ export declare interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
      */
     gap?: number;
     /**
-     * When to show tooltip: "focus", "hover", or "all"
+     * Tooltip interaction type:
+     * - "hover" (default): Show on hover, hide on hover away (100ms grace period)
+     * - "persisted": Show on click, persists until user clicks outside or presses Escape
      */
-    triggerType?: "focus" | "hover" | "all";
+    type?: "hover" | "persisted";
 }
 
 /**

package/dist/primitive.js

@@ -4,8 +4,8 @@ import { LoaderIcon as T, UserIcon as U, XIcon as X } from "@versaur/icons";
 import { forwardRef as u, useState as q } from "react";
 import { u as b } from "./use-data-attrs-iPFyfiKN.js";
 import { c as p } from "./cx-B9vmfsc1.js";
-import { I as B, B as F } from "./tooltip-Zuq8gd0f.js";
-import { H as nt, T as lt } from "./tooltip-Zuq8gd0f.js";
+import { I as B, B as F } from "./tooltip-_eEMRSo8.js";
+import { H as nt, T as lt } from "./tooltip-_eEMRSo8.js";
 const G = u(
   ({
     variant: a = "primary",

package/dist/tooltip-_eEMRSo8.js

@@ -0,0 +1,268 @@
+import { jsx as f } from "react/jsx-runtime";
+import { iconStyles as _, hrStyles as k, buttonIconStyles as F, tooltipStyles as A } from "@versaur/core/primitive";
+import B, { forwardRef as E, useRef as b, useEffect as y } from "react";
+import { u as w } from "./use-data-attrs-iPFyfiKN.js";
+import { c as T } from "./cx-B9vmfsc1.js";
+import { LoaderIcon as C } from "@versaur/icons";
+const L = B.forwardRef(function({ intent: t = "inherit", size: n = "inherit", as: o, className: c, ...a }, s) {
+  const r = w({ intent: t, size: n });
+  return /* @__PURE__ */ f(o, { ref: s, className: T(_.icon, c), ...r, ...a });
+});
+L.displayName = "Icon";
+const H = E(
+  ({ orientation: e, variant: t, size: n, spacing: o, className: c, ...a }, s) => {
+    const r = w({
+      orientation: e,
+      size: n,
+      spacing: o,
+      variant: t
+    });
+    return /* @__PURE__ */ f(
+      "hr",
+      {
+        ref: s,
+        className: T(k.hr, c),
+        role: "separator",
+        "aria-orientation": e === "vertical" ? "vertical" : void 0,
+        ...r,
+        ...a
+      }
+    );
+  }
+);
+H.displayName = "Hr";
+const M = E(
+  ({
+    as: e,
+    variant: t = "primary",
+    size: n = "medium",
+    loading: o = !1,
+    disabled: c = !1,
+    pressed: a = !1,
+    type: s = "button",
+    onClick: r,
+    iconProps: i = {},
+    "aria-label": l,
+    className: u,
+    ...p
+  }, d) => {
+    const h = w({
+      disabled: c || o,
+      loading: o,
+      size: n,
+      variant: t
+    }), g = (v) => {
+      if (c || o) {
+        v.preventDefault();
+        return;
+      }
+      r == null || r(v);
+    };
+    return /* @__PURE__ */ f(
+      "button",
+      {
+        ref: d,
+        type: s,
+        className: T(F["button-icon"], u),
+        "aria-label": l,
+        "aria-pressed": a ? "true" : void 0,
+        "aria-busy": o ? "true" : void 0,
+        "aria-disabled": c || o ? "true" : void 0,
+        ...h,
+        ...p,
+        onClick: g,
+        children: o ? /* @__PURE__ */ f(L, { as: C, "aria-label": "Loading", "data-loading-icon": "loader" }) : /* @__PURE__ */ f(L, { as: e, ...i })
+      }
+    );
+  }
+);
+M.displayName = "ButtonIcon";
+function $(...e) {
+  return (t) => {
+    e.forEach((n) => {
+      if (typeof n == "function")
+        n(t);
+      else if (n && "current" in n)
+        try {
+          n.current = t;
+        } catch {
+        }
+    });
+  };
+}
+const j = 100, m = 16;
+function q(e, t) {
+  let n = e.parentElement;
+  for (; n; ) {
+    const o = n.querySelector(`[data-tooltip-trigger="${t}"]`);
+    if (o) return o;
+    if (n === document.body) break;
+    n = n.parentElement;
+  }
+  return null;
+}
+function D(e, t, n = j) {
+  const o = window.innerWidth, c = window.innerHeight, a = {
+    top: e.top,
+    bottom: c - e.bottom,
+    left: e.left,
+    right: o - e.right
+  };
+  if (a.bottom >= n)
+    return "bottom";
+  if (t) {
+    const s = e.left + e.width / 2, r = e.top + e.height / 2, i = [], l = e.bottom + t.height + m <= c && s - t.width / 2 >= m && s + t.width / 2 <= o - m;
+    i.push(["bottom", a.bottom, l]);
+    const u = e.top - t.height - m >= 0 && s - t.width / 2 >= m && s + t.width / 2 <= o - m;
+    i.push(["top", a.top, u]);
+    const p = e.right + t.width + m <= o && r - t.height / 2 >= m && r + t.height / 2 <= c - m;
+    i.push(["right", a.right, p]);
+    const d = e.left - t.width - m >= 0 && r - t.height / 2 >= m && r + t.height / 2 <= c - m;
+    i.push(["left", a.left, d]);
+    const h = i.filter(([g, v, x]) => x);
+    if (h.length > 0)
+      return h.reduce(
+        (g, v) => v[1] > g[1] ? v : g
+      )[0];
+  }
+  return Object.entries(a).reduce(
+    (s, r) => r[1] > s[1] ? r : s
+  )[0];
+}
+function O(e, t, n) {
+  let o = null;
+  const c = () => new Promise((i) => {
+    requestAnimationFrame(() => {
+      const l = e.getBoundingClientRect(), u = { width: l.width, height: l.height }, p = n || D(t.getBoundingClientRect(), u);
+      i(p);
+    });
+  }), a = async () => {
+    r();
+    const i = await c();
+    e.dataset.placement = i, e.matches(":popover-open") || e.showPopover();
+  }, s = (i) => {
+    o && (clearTimeout(o), o = null), i ? o = setTimeout(() => {
+      e.matches(":popover-open") && e.hidePopover(), o = null;
+    }, 100) : e.matches(":popover-open") && e.hidePopover();
+  }, r = () => {
+    o && (clearTimeout(o), o = null);
+  };
+  return { showTooltip: a, hideTooltip: s, cancelHide: r, cleanup: () => clearTimeout(o ?? void 0) };
+}
+function G({
+  id: e,
+  tooltipRef: t,
+  placement: n,
+  type: o
+}) {
+  const c = b(null), a = b(null);
+  y(() => {
+    const s = t.current;
+    if (!s || !e)
+      return;
+    const r = q(s, e);
+    if (r)
+      return a.current = r, c.current = O(s, r, n), () => {
+        var i;
+        (i = c.current) == null || i.cleanup(), c.current = null;
+      };
+  }, [e, n, t]), y(() => {
+    if (o !== "hover" || !c.current || !a.current) return;
+    const s = a.current, r = c.current, i = t.current;
+    if (!i) return;
+    const l = () => {
+      r.showTooltip();
+    }, u = () => {
+      r.hideTooltip(!0);
+    }, p = () => {
+      r.cancelHide();
+    }, d = () => {
+      r.hideTooltip(!0);
+    };
+    return s.addEventListener("mouseenter", l), s.addEventListener("mouseleave", u), i.addEventListener("mouseenter", p), i.addEventListener("mouseleave", d), () => {
+      s.removeEventListener("mouseenter", l), s.removeEventListener("mouseleave", u), i.removeEventListener("mouseenter", p), i.removeEventListener("mouseleave", d);
+    };
+  }, [o, t]), y(() => {
+    if (o !== "persisted" || !c.current || !a.current) return;
+    const s = a.current, r = c.current, i = t.current;
+    if (!i) return;
+    const l = (d) => {
+      d.stopPropagation(), i.matches(":popover-open") ? r.hideTooltip(!1) : r.showTooltip();
+    }, u = (d) => {
+      const h = d.target;
+      i.matches(":popover-open") && !s.contains(h) && !i.contains(h) && r.hideTooltip(!1);
+    }, p = (d) => {
+      d.key === "Escape" && i.matches(":popover-open") && r.hideTooltip(!1);
+    };
+    return s.addEventListener("click", l), document.addEventListener("click", u), document.addEventListener("keydown", p), () => {
+      s.removeEventListener("click", l), document.removeEventListener("click", u), document.removeEventListener("keydown", p);
+    };
+  }, [o, t]);
+}
+const U = 8, I = E(
+  ({ id: e, children: t, placement: n, gap: o = U, type: c = "hover", style: a, className: s, ...r }, i) => {
+    const l = b(null), u = w({
+      placement: n
+    });
+    return G({
+      id: e,
+      placement: n,
+      tooltipRef: l,
+      type: c
+    }), /* @__PURE__ */ f(
+      "div",
+      {
+        ref: $(l, i),
+        id: e,
+        className: T(A.tooltip, s),
+        ...u,
+        style: {
+          "--_gap": `${o}px`,
+          positionAnchor: `--tooltip-${e}`,
+          ...a
+        },
+        ...r,
+        popover: "auto",
+        children: t
+      }
+    );
+  }
+);
+I.displayName = "Tooltip";
+const N = E(
+  ({ children: e, maxWidth: t, maxLines: n = 2, style: o, className: c, ...a }, s) => {
+    const r = {
+      "--_lines": n,
+      "--_max-width": t,
+      ...o
+    };
+    return /* @__PURE__ */ f("div", { ref: s, className: T(A["tooltip-text"], c), style: r, ...a, children: e });
+  }
+);
+N.displayName = "Tooltip.Text";
+function W(e) {
+  const { id: t, ...n } = e;
+  return {
+    "data-tooltip-trigger": t,
+    style: { anchorName: `--tooltip-${t}` },
+    ...Object.fromEntries(Object.entries(n).map(([o, c]) => [o, String(c)]))
+  };
+}
+function X(e) {
+  const { id: t } = e, n = document.getElementById(t);
+  n && n.matches(":popover-open") && requestAnimationFrame(() => {
+    const o = document.querySelector(`[data-tooltip-trigger="${t}"]`);
+    o && document.activeElement === o && o.blur(), n.matches(":popover-open") && n.hidePopover();
+  });
+}
+const P = I;
+P.Text = N;
+P.getTooltipTriggerProps = W;
+P.close = X;
+export {
+  M as B,
+  H,
+  L as I,
+  P as T,
+  $ as c
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versaur/react",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "React components for Versaur Design System",
   "repository": {
     "type": "git",
@@ -49,7 +49,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@versaur/core": "0.0.7",
+    "@versaur/core": "0.0.9",
     "@versaur/icons": "1.0.0"
   },
   "scripts": {

package/dist/tooltip-Zuq8gd0f.js

@@ -1,210 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import { iconStyles as _, hrStyles as j, buttonIconStyles as H, tooltipStyles as x } from "@versaur/core/primitive";
-import M, { forwardRef as b, useEffect as k, useRef as D } from "react";
-import { u as T } from "./use-data-attrs-iPFyfiKN.js";
-import { c as f } from "./cx-B9vmfsc1.js";
-import { LoaderIcon as F } from "@versaur/icons";
-const y = M.forwardRef(function({ intent: a = "inherit", size: n = "inherit", as: i, className: o, ...t }, e) {
-  const r = T({ intent: a, size: n });
-  return /* @__PURE__ */ u(i, { ref: e, className: f(_.icon, o), ...r, ...t });
-});
-y.displayName = "Icon";
-const O = b(
-  ({ orientation: s, variant: a, size: n, spacing: i, className: o, ...t }, e) => {
-    const r = T({
-      orientation: s,
-      size: n,
-      spacing: i,
-      variant: a
-    });
-    return /* @__PURE__ */ u(
-      "hr",
-      {
-        ref: e,
-        className: f(j.hr, o),
-        role: "separator",
-        "aria-orientation": s === "vertical" ? "vertical" : void 0,
-        ...r,
-        ...t
-      }
-    );
-  }
-);
-O.displayName = "Hr";
-const U = b(
-  ({
-    as: s,
-    variant: a = "primary",
-    size: n = "medium",
-    loading: i = !1,
-    disabled: o = !1,
-    pressed: t = !1,
-    type: e = "button",
-    onClick: r,
-    iconProps: p = {},
-    "aria-label": c,
-    className: m,
-    ...v
-  }, h) => {
-    const E = T({
-      disabled: o || i,
-      loading: i,
-      size: n,
-      variant: a
-    }), L = (d) => {
-      if (o || i) {
-        d.preventDefault();
-        return;
-      }
-      r == null || r(d);
-    };
-    return /* @__PURE__ */ u(
-      "button",
-      {
-        ref: h,
-        type: e,
-        className: f(H["button-icon"], m),
-        "aria-label": c,
-        "aria-pressed": t ? "true" : void 0,
-        "aria-busy": i ? "true" : void 0,
-        "aria-disabled": o || i ? "true" : void 0,
-        ...E,
-        ...v,
-        onClick: L,
-        children: i ? /* @__PURE__ */ u(y, { as: F, "aria-label": "Loading", "data-loading-icon": "loader" }) : /* @__PURE__ */ u(y, { as: s, ...p })
-      }
-    );
-  }
-);
-U.displayName = "ButtonIcon";
-function C({ id: s, tooltipRef: a, placement: n, gap: i, triggerType: o }) {
-  k(() => {
-    const t = a.current;
-    if (!t || !s)
-      return;
-    let e = null;
-    if (t.parentElement && (e = t.parentElement.querySelector(`[data-tooltip-trigger="${s}"]`)), !e) {
-      let l = t.parentElement;
-      for (; l && !e && (e = l.querySelector(`[data-tooltip-trigger="${s}"]`), !(e || l.classList.contains("sbdocs-story") || l.classList.contains("docblock-storylet"))); )
-        l = l.parentElement;
-    }
-    if (e || (e = document.querySelector(`[data-tooltip-trigger="${s}"]`)), !e)
-      return;
-    let r = null;
-    const p = () => {
-      const l = e.getBoundingClientRect(), B = window.innerWidth, $ = window.innerHeight, q = 100, A = {
-        top: l.top,
-        bottom: $ - l.bottom,
-        left: l.left,
-        right: B - l.right
-      };
-      return A.bottom >= q ? "bottom" : Object.entries(A).reduce((I, N) => N[1] > I[1] ? N : I)[0];
-    }, c = () => {
-      r && (clearTimeout(r), r = null);
-      const l = n || p();
-      t.dataset.placement = l, t.matches(":popover-open") || t.showPopover();
-    }, m = () => {
-      r && clearTimeout(r), r = setTimeout(() => {
-        t.matches(":popover-open") && t.hidePopover(), r = null;
-      }, 100);
-    }, v = () => {
-      (o === "hover" || o === "all") && c();
-    }, h = () => {
-      (o === "hover" || o === "all") && m();
-    }, E = () => {
-      (o === "focus" || o === "all") && c();
-    }, L = () => {
-      o === "hover" && t.hidePopover();
-    }, d = () => {
-      o === "focus" && (t.matches(":popover-open") ? t.hidePopover() : c());
-    }, S = () => {
-      r && (clearTimeout(r), r = null);
-    }, w = () => {
-      (o === "hover" || o === "all") && m();
-    };
-    return e.addEventListener("mouseenter", v), e.addEventListener("mouseleave", h), e.addEventListener("focus", E), e.addEventListener("blur", L), e.addEventListener("click", d), t.addEventListener("mouseenter", S), t.addEventListener("mouseleave", w), () => {
-      r && clearTimeout(r), e.removeEventListener("mouseenter", v), e.removeEventListener("mouseleave", h), e.removeEventListener("focus", E), e.removeEventListener("blur", L), e.removeEventListener("click", d), t.removeEventListener("mouseenter", S), t.removeEventListener("mouseleave", w);
-    };
-  }, [s, i, o]);
-}
-function G(...s) {
-  return (a) => {
-    s.forEach((n) => {
-      if (typeof n == "function")
-        n(a);
-      else if (n && "current" in n)
-        try {
-          n.current = a;
-        } catch {
-        }
-    });
-  };
-}
-const W = 8, g = b(
-  ({ id: s, children: a, placement: n, gap: i = W, triggerType: o = "all", style: t, className: e, ...r }, p) => {
-    const c = D(null), m = T({
-      placement: n
-    });
-    return C({
-      gap: i,
-      id: s,
-      placement: n,
-      tooltipRef: c,
-      triggerType: o
-    }), /* @__PURE__ */ u(
-      "div",
-      {
-        ref: G(c, p),
-        id: s,
-        className: f(x.tooltip, e),
-        ...m,
-        style: {
-          "--_gap": `${i}px`,
-          positionAnchor: `--tooltip-${s}`,
-          ...t
-        },
-        ...r,
-        popover: "auto",
-        children: a
-      }
-    );
-  }
-);
-g.displayName = "Tooltip";
-const R = b(
-  ({ children: s, maxWidth: a, maxLines: n = 2, style: i, className: o, ...t }, e) => {
-    const r = {
-      "--_lines": n,
-      "--_max-width": a,
-      ...i
-    };
-    return /* @__PURE__ */ u("div", { ref: e, className: f(x["tooltip-text"], o), style: r, ...t, children: s });
-  }
-);
-R.displayName = "Tooltip.Text";
-function z(s) {
-  const { id: a, triggerType: n = "all", ...i } = s, o = {
-    "data-tooltip-trigger": a,
-    style: { anchorName: `--tooltip-${a}` },
-    ...Object.fromEntries(Object.entries(i).map(([t, e]) => [t, String(e)]))
-  };
-  return n !== "focus" && (o.popoverTarget = a), o;
-}
-function J(s) {
-  const { id: a } = s, n = document.getElementById(a);
-  n && n.matches(":popover-open") && requestAnimationFrame(() => {
-    const i = document.querySelector(`[data-tooltip-trigger="${a}"]`);
-    i && document.activeElement === i && i.blur(), n.matches(":popover-open") && n.hidePopover();
-  });
-}
-const P = g;
-P.Text = R;
-P.getTooltipTriggerProps = z;
-P.close = J;
-export {
-  U as B,
-  O as H,
-  y as I,
-  P as T,
-  G as c
-};