@versaur/react 1.0.8 → 1.0.10

package/dist/primitive.d.ts

@@ -532,10 +532,6 @@ declare interface TooltipGetTriggerPropsOptions {
      * Gap between tooltip and trigger in pixels
      */
     gap?: number;
-    /**
-     * Trigger type for determining popoverTarget behavior
-     */
-    triggerType?: "focus" | "hover" | "all";
     [key: string]: any;
 }
 
@@ -551,7 +547,7 @@ export declare interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
      */
     children: ReactNode;
     /**
-     * Placement relative to the trigger
+     * Placement relative to the trigger. Defaults to "auto" which detects best placement based on viewport space.
      */
     placement?: TooltipPlacement;
     /**

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-M8EGI3lZ.js";
-import { H as nt, T as lt } from "./tooltip-M8EGI3lZ.js";
+import { I as B, B as F } from "./tooltip-Zuq8gd0f.js";
+import { H as nt, T as lt } from "./tooltip-Zuq8gd0f.js";
 const G = u(
   ({
     variant: a = "primary",

package/dist/tooltip-Zuq8gd0f.js

@@ -0,0 +1,210 @@
+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
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versaur/react",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "React components for Versaur Design System",
   "repository": {
     "type": "git",
@@ -36,6 +36,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@storybook/react": "^8.6.17",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.7.0",
@@ -48,7 +49,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@versaur/core": "0.0.4",
+    "@versaur/core": "0.0.6",
     "@versaur/icons": "1.0.0"
   },
   "scripts": {

package/dist/tooltip-M8EGI3lZ.js

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