@versaur/react 1.0.12 → 1.0.13

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.12",
+  "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.8",
+    "@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
-};