@versaur/react 1.0.12 → 1.0.14

package/dist/helpers-DTL6qrTe.js

@@ -0,0 +1,129 @@
+import { jsx as l } from "react/jsx-runtime";
+import { iconStyles as T, buttonIconStyles as v } from "@versaur/core/primitive";
+import { LoaderIcon as C } from "@versaur/icons";
+import j, { forwardRef as B } from "react";
+import { c as I } from "./cx-B9vmfsc1.js";
+function E(e) {
+  return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function A(e) {
+  const n = {};
+  for (const [o, t] of Object.entries(e)) {
+    if (t == null)
+      continue;
+    const r = E(o);
+    typeof t == "boolean" ? t && (n[`data-${r}`] = (!!t).toString()) : (typeof t == "string" || typeof t == "number") && (n[`data-${r}`] = String(t));
+  }
+  return n;
+}
+const p = j.forwardRef(function({ intent: n = "inherit", size: o = "inherit", as: t, className: r, ...d }, s) {
+  const a = A({ intent: n, size: o });
+  return /* @__PURE__ */ l(t, { ref: s, className: I(T.icon, r), ...a, ...d });
+});
+p.displayName = "Icon";
+const N = B(
+  ({
+    as: e,
+    variant: n = "primary",
+    size: o = "medium",
+    loading: t = !1,
+    disabled: r = !1,
+    pressed: d = !1,
+    type: s = "button",
+    onClick: a,
+    iconProps: u = {},
+    "aria-label": b,
+    className: w,
+    ...h
+  }, y) => {
+    const c = A({
+      disabled: r || t,
+      loading: t,
+      size: o,
+      variant: n
+    }), f = (m) => {
+      if (r || t) {
+        m.preventDefault();
+        return;
+      }
+      a == null || a(m);
+    };
+    return /* @__PURE__ */ l(
+      "button",
+      {
+        ref: y,
+        type: s,
+        className: I(v["button-icon"], w),
+        "aria-label": b,
+        "aria-pressed": d ? "true" : void 0,
+        "aria-busy": t ? "true" : void 0,
+        "aria-disabled": r || t ? "true" : void 0,
+        ...c,
+        ...h,
+        onClick: f,
+        children: t ? /* @__PURE__ */ l(p, { as: C, "aria-label": "Loading", "data-loading-icon": "loader" }) : /* @__PURE__ */ l(p, { as: e, ...u })
+      }
+    );
+  }
+);
+N.displayName = "ButtonIcon";
+const _ = 100, i = 16;
+function F(e, n) {
+  let o = e.parentElement;
+  for (; o; ) {
+    const t = o.querySelector(`[data-tooltip-trigger="${n}"]`);
+    if (t) return t;
+    if (o === document.body) break;
+    o = o.parentElement;
+  }
+  return null;
+}
+function D(e, n, o = _, t) {
+  const r = window.innerWidth, d = window.innerHeight, s = {
+    top: e.top,
+    bottom: d - e.bottom,
+    left: e.left,
+    right: r - e.right
+  };
+  if (n) {
+    const a = e.left + e.width / 2, u = e.top + e.height / 2, b = [
+      // Bottom: check if tooltip fits below trigger
+      [
+        "bottom",
+        s.bottom,
+        e.bottom + n.height + i <= d && a - n.width / 2 >= i && a + n.width / 2 <= r - i
+      ],
+      // Top: check if tooltip fits above trigger
+      [
+        "top",
+        s.top,
+        e.top - n.height - i >= 0 && a - n.width / 2 >= i && a + n.width / 2 <= r - i
+      ],
+      // Right: check if tooltip fits to the right of trigger
+      [
+        "right",
+        s.right,
+        e.right + n.width + i <= r && u - n.height / 2 >= i && u + n.height / 2 <= d - i
+      ],
+      // Left: check if tooltip fits to the left of trigger
+      [
+        "left",
+        s.left,
+        e.left - n.width - i >= 0 && u - n.height / 2 >= i && u + n.height / 2 <= d - i
+      ]
+    ], h = (t ? b.filter(([c]) => t.includes(c)) : b).filter(([c, f, m]) => m);
+    return h.length > 0 ? h.find(([f]) => f === "bottom") ? "bottom" : h.reduce((f, m) => m[1] > f[1] ? m : f)[0] : (t ? Object.entries(s).filter(
+      ([c]) => t.includes(c)
+    ) : Object.entries(s)).reduce((c, f) => f[1] > c[1] ? f : c)[0];
+  }
+  return s.bottom >= o ? "bottom" : Object.entries(s).reduce(
+    (a, u) => u[1] > a[1] ? u : a
+  )[0];
+}
+export {
+  N as B,
+  p as I,
+  D as c,
+  F as f,
+  A as u
+};

package/dist/{overlay-parts-Zq9CuT31.js → overlay-parts-CFeD8VN0.js}

@@ -17,8 +17,8 @@ const c = t(
 );
 c.displayName = "OverlayFooter";
 export {
-  v as O,
-  c as a,
+  i as O,
+  v as a,
   d as b,
-  i as c
+  c
 };

package/dist/primitive.d.ts

@@ -332,6 +332,7 @@ export declare interface HeadingProps extends HTMLAttributes<HTMLHeadingElement>
     weight?: Heading_2.Weight;
     /**
      * Text color intent
+     * @default 'default'
      */
     intent?: Heading_2.Intent;
     /**
@@ -498,6 +499,7 @@ export declare interface TextProps extends HTMLAttributes<HTMLElement> {
     weight?: Text_3.Weight;
     /**
      * Text color intent
+     * @default 'default'
      */
     intent?: Text_3.Intent;
     /**
@@ -528,10 +530,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 +553,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

@@ -2,10 +2,9 @@ import { jsxs as x, jsx as c } from "react/jsx-runtime";
 import { buttonStyles as k, headingStyles as R, textStyles as w, avatarStyles as S, loaderStyles as K, badgeStyles as z, bannerStyles as A, dotStyles as C, kbdStyles as O } from "@versaur/core/primitive";
 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 { u as b, I as B, B as F } from "./helpers-DTL6qrTe.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 { H as ot, T as nt } from "./tooltip-BMKVL6jz.js";
 const G = u(
   ({
     variant: a = "primary",
@@ -61,7 +60,7 @@ const G = u(
 );
 G.displayName = "Button";
 const J = u(
-  ({ as: a = "h2", size: r, weight: t, intent: e, case: o, transform: s, children: n, className: l, ...d }, y) => {
+  ({ as: a = "h2", size: r, weight: t, intent: e = "default", case: o, transform: s, children: n, className: l, ...d }, y) => {
     const h = a, m = b({
       as: a,
       case: o,
@@ -75,7 +74,7 @@ const J = u(
 );
 J.displayName = "Heading";
 const M = u(
-  ({ as: a = "p", size: r, weight: t, intent: e, case: o, transform: s, children: n, className: l, ...d }, y) => {
+  ({ as: a = "p", size: r, weight: t, intent: e = "default", case: o, transform: s, children: n, className: l, ...d }, y) => {
     const h = a, m = b({
       as: a,
       case: o,
@@ -112,7 +111,7 @@ const D = u(({ src: a, alt: r, onError: t, className: e, ...o }, s) => {
   );
 });
 D.displayName = "Avatar.Image";
-const st = Object.assign(L, {
+const et = Object.assign(L, {
   Image: D
 }), P = u(
   ({ type: a = "spinner", size: r = "sm", children: t, className: e, ...o }, s) => {
@@ -191,17 +190,17 @@ const Z = u(
 );
 Z.displayName = "Kbd";
 export {
-  st as Avatar,
+  et as Avatar,
   Q as Badge,
   V as Banner,
   G as Button,
   F as ButtonIcon,
   Y as Dot,
   J as Heading,
-  nt as Hr,
+  ot as Hr,
   B as Icon,
   Z as Kbd,
   P as Loader,
   M as Text,
-  lt as Tooltip
+  nt as Tooltip
 };

package/dist/tooltip-BMKVL6jz.js

@@ -0,0 +1,170 @@
+import { jsx as h } from "react/jsx-runtime";
+import { hrStyles as k, tooltipStyles as L } from "@versaur/core/primitive";
+import { forwardRef as f, useRef as v, useEffect as d } from "react";
+import { u as y, f as x, c as A } from "./helpers-DTL6qrTe.js";
+import { c as g } from "./cx-B9vmfsc1.js";
+const N = f(
+  ({ orientation: e, variant: n, size: o, spacing: t, className: c, ...a }, s) => {
+    const r = y({
+      orientation: e,
+      size: o,
+      spacing: t,
+      variant: n
+    });
+    return /* @__PURE__ */ h(
+      "hr",
+      {
+        ref: s,
+        className: g(k.hr, c),
+        role: "separator",
+        "aria-orientation": e === "vertical" ? "vertical" : void 0,
+        ...r,
+        ...a
+      }
+    );
+  }
+);
+N.displayName = "Hr";
+function R(...e) {
+  return (n) => {
+    e.forEach((o) => {
+      if (typeof o == "function")
+        o(n);
+      else if (o && "current" in o)
+        try {
+          o.current = n;
+        } catch {
+        }
+    });
+  };
+}
+function S(e, n, o) {
+  let t = null;
+  const c = () => new Promise((i) => {
+    e.matches(":popover-open") || e.showPopover(), requestAnimationFrame(() => {
+      const l = e.getBoundingClientRect(), u = { width: l.width, height: l.height }, m = o || A(n.getBoundingClientRect(), u);
+      i(m);
+    });
+  }), a = async () => {
+    r();
+    const i = await c();
+    e.dataset.placement = i;
+  }, s = (i) => {
+    t && (clearTimeout(t), t = null), i ? t = setTimeout(() => {
+      e.matches(":popover-open") && e.hidePopover(), t = null;
+    }, 100) : e.matches(":popover-open") && e.hidePopover();
+  }, r = () => {
+    t && (clearTimeout(t), t = null);
+  };
+  return { showTooltip: a, hideTooltip: s, cancelHide: r, cleanup: () => clearTimeout(t ?? void 0) };
+}
+function C({ id: e, tooltipRef: n, placement: o, type: t }) {
+  const c = v(null), a = v(null);
+  d(() => {
+    const s = n.current;
+    if (!s || !e)
+      return;
+    const r = x(s, e);
+    if (r)
+      return a.current = r, c.current = S(s, r, o), () => {
+        var i;
+        (i = c.current) == null || i.cleanup(), c.current = null;
+      };
+  }, [e, o, n]), d(() => {
+    if (t !== "hover" || !c.current || !a.current) return;
+    const s = a.current, r = c.current, i = n.current;
+    if (!i) return;
+    const l = () => {
+      r.showTooltip();
+    }, u = () => {
+      r.hideTooltip(!0);
+    }, m = () => {
+      r.cancelHide();
+    }, p = () => {
+      r.hideTooltip(!0);
+    };
+    return s.addEventListener("mouseenter", l), s.addEventListener("mouseleave", u), i.addEventListener("mouseenter", m), i.addEventListener("mouseleave", p), () => {
+      s.removeEventListener("mouseenter", l), s.removeEventListener("mouseleave", u), i.removeEventListener("mouseenter", m), i.removeEventListener("mouseleave", p);
+    };
+  }, [t, n]), d(() => {
+    if (t !== "persisted" || !c.current || !a.current) return;
+    const s = a.current, r = c.current, i = n.current;
+    if (!i) return;
+    const l = (p) => {
+      p.stopPropagation(), i.matches(":popover-open") ? r.hideTooltip(!1) : r.showTooltip();
+    }, u = (p) => {
+      const E = p.target;
+      i.matches(":popover-open") && !s.contains(E) && !i.contains(E) && r.hideTooltip(!1);
+    }, m = (p) => {
+      p.key === "Escape" && i.matches(":popover-open") && r.hideTooltip(!1);
+    };
+    return s.addEventListener("click", l), document.addEventListener("click", u), document.addEventListener("keydown", m), () => {
+      s.removeEventListener("click", l), document.removeEventListener("click", u), document.removeEventListener("keydown", m);
+    };
+  }, [t, n]);
+}
+const H = 8, P = f(
+  ({ id: e, children: n, placement: o, gap: t = H, type: c = "hover", style: a, className: s, ...r }, i) => {
+    const l = v(null), u = y({
+      placement: o
+    });
+    return C({
+      id: e,
+      placement: o,
+      tooltipRef: l,
+      type: c
+    }), /* @__PURE__ */ h(
+      "div",
+      {
+        ref: R(l, i),
+        id: e,
+        className: g(L.tooltip, s),
+        ...u,
+        style: {
+          "--_gap": `${t}px`,
+          positionAnchor: `--tooltip-${e}`,
+          ...a
+        },
+        ...r,
+        popover: "auto",
+        children: n
+      }
+    );
+  }
+);
+P.displayName = "Tooltip";
+const w = f(
+  ({ children: e, maxWidth: n, maxLines: o = 2, style: t, className: c, ...a }, s) => {
+    const r = {
+      "--_lines": o,
+      "--_max-width": n,
+      ...t
+    };
+    return /* @__PURE__ */ h("div", { ref: s, className: g(L["tooltip-text"], c), style: r, ...a, children: e });
+  }
+);
+w.displayName = "Tooltip.Text";
+function b(e) {
+  const { id: n, ...o } = e;
+  return {
+    "data-tooltip-trigger": n,
+    style: { anchorName: `--tooltip-${n}` },
+    ...Object.fromEntries(Object.entries(o).map(([t, c]) => [t, String(c)]))
+  };
+}
+function M(e) {
+  const { id: n } = e, o = document.getElementById(n);
+  o && o.matches(":popover-open") && requestAnimationFrame(() => {
+    const t = document.querySelector(`[data-tooltip-trigger="${n}"]`);
+    t && document.activeElement === t && t.blur(), o.matches(":popover-open") && o.hidePopover();
+  });
+}
+const T = P;
+T.Text = w;
+T.getTooltipTriggerProps = b;
+T.close = M;
+export {
+  N as H,
+  T,
+  R as c
+};

package/dist/utils.d.ts

@@ -4,6 +4,58 @@ import { HTMLAttributes } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 
+/**
+ * Component that renders its children only when viewport is at desktop breakpoint
+ *
+ * @example
+ * ```tsx
+ * <DesktopBreakpoint>
+ *   <DesktopSidebar />
+ * </DesktopBreakpoint>
+ * ```
+ */
+export declare function DesktopBreakpoint({ children }: DesktopBreakpointProps): ReactNode;
+
+export declare interface DesktopBreakpointProps {
+    /** Content to render when viewport is at desktop breakpoint (>= 1024px) */
+    children: ReactNode;
+}
+
+/**
+ * Component that renders its children only when viewport is at mobile breakpoint
+ *
+ * @example
+ * ```tsx
+ * <MobileBreakpoint>
+ *   <MobileMenu />
+ * </MobileBreakpoint>
+ * ```
+ */
+export declare function MobileBreakpoint({ children }: MobileBreakpointProps): ReactNode;
+
+export declare interface MobileBreakpointProps {
+    /** Content to render when viewport is at mobile breakpoint (< 640px) */
+    children: ReactNode;
+}
+
+/**
+ * Component that renders its children only when viewport is mobile or tablet
+ * (exclusive: hides on desktop)
+ *
+ * @example
+ * ```tsx
+ * <MobileOrTabletBreakpoint>
+ *   <CompactLayout />
+ * </MobileOrTabletBreakpoint>
+ * ```
+ */
+export declare function MobileOrTabletBreakpoint({ children }: MobileOrTabletBreakpointProps): ReactNode;
+
+export declare interface MobileOrTabletBreakpointProps {
+    /** Content to render when viewport is mobile or tablet (< 1024px) */
+    children: ReactNode;
+}
+
 export declare const OverlayBody: ForwardRefExoticComponent<OverlayBodyProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface OverlayBodyProps extends HTMLAttributes<HTMLDivElement> {
@@ -37,4 +89,39 @@ export declare interface OverlayTitleProps extends HTMLAttributes<HTMLHeadingEle
     as?: ElementType;
 }
 
+/**
+ * Component that renders its children only when viewport is at tablet breakpoint
+ *
+ * @example
+ * ```tsx
+ * <TabletBreakpoint>
+ *   <TabletLayout />
+ * </TabletBreakpoint>
+ * ```
+ */
+export declare function TabletBreakpoint({ children }: TabletBreakpointProps): ReactNode;
+
+export declare interface TabletBreakpointProps {
+    /** Content to render when viewport is at tablet breakpoint (< 1024px) */
+    children: ReactNode;
+}
+
+/**
+ * Component that renders its children only when viewport is tablet or desktop
+ * (exclusive: hides on mobile)
+ *
+ * @example
+ * ```tsx
+ * <TabletOrDesktopBreakpoint>
+ *   <FullLayout />
+ * </TabletOrDesktopBreakpoint>
+ * ```
+ */
+export declare function TabletOrDesktopBreakpoint({ children }: TabletOrDesktopBreakpointProps): ReactNode;
+
+export declare interface TabletOrDesktopBreakpointProps {
+    /** Content to render when viewport is tablet or desktop (>= 640px) */
+    children: ReactNode;
+}
+
 export { }

package/dist/utils.js

@@ -1,7 +1,64 @@
-import { O as r, a as l, b as o, c as y } from "./overlay-parts-Zq9CuT31.js";
+import { a as v, c as S, b as g, O as D } from "./overlay-parts-CFeD8VN0.js";
+import { useState as l, useEffect as c } from "react";
+import { getBreakpointPx as n } from "@versaur/core/utils";
+function r(e) {
+  const [t, a] = l(!1);
+  return c(() => {
+    const o = window.matchMedia(e);
+    a(o.matches);
+    const i = (s) => {
+      a(s.matches);
+    };
+    return o.addEventListener("change", i), () => {
+      o.removeEventListener("change", i);
+    };
+  }, [e]), t;
+}
+function p() {
+  const e = n("mobile");
+  return r(`(max-width: ${parseInt(e) - 1}px)`);
+}
+function u() {
+  const e = n("mobile"), t = n("tablet");
+  return r(
+    `(min-width: ${parseInt(e)}px) and (max-width: ${parseInt(t) - 1}px)`
+  );
+}
+function b() {
+  const e = n("tablet");
+  return r(`(min-width: ${parseInt(e)}px)`);
+}
+function m() {
+  const e = n("tablet");
+  return r(`(max-width: ${parseInt(e) - 1}px)`);
+}
+function k() {
+  const e = n("mobile");
+  return r(`(min-width: ${parseInt(e)}px)`);
+}
+function h({ children: e }) {
+  return p() ? e : null;
+}
+function d({ children: e }) {
+  return u() ? e : null;
+}
+function x({ children: e }) {
+  return b() ? e : null;
+}
+function M({ children: e }) {
+  return m() ? e : null;
+}
+function O({ children: e }) {
+  return k() ? e : null;
+}
 export {
-  r as OverlayBody,
-  l as OverlayFooter,
-  o as OverlayHeader,
-  y as OverlayTitle
+  x as DesktopBreakpoint,
+  h as MobileBreakpoint,
+  M as MobileOrTabletBreakpoint,
+  v as OverlayBody,
+  S as OverlayFooter,
+  g as OverlayHeader,
+  D as OverlayTitle,
+  d as TabletBreakpoint,
+  O as TabletOrDesktopBreakpoint
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versaur/react",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "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.10",
     "@versaur/icons": "1.0.0"
   },
   "scripts": {