@versaur/react 1.0.13 → 1.0.15

package/dist/tooltip-Cn7Ml9vw.js

@@ -0,0 +1,364 @@
+import { jsxs as N, jsx as p } from "react/jsx-runtime";
+import { buttonStyles as M, headingStyles as _, textStyles as $, avatarStyles as I, hrStyles as q, loaderStyles as F, badgeStyles as K, bannerStyles as A, dotStyles as O, kbdStyles as z, tooltipStyles as P } from "@versaur/core/primitive";
+import { LoaderIcon as w, UserIcon as U, XIcon as G } from "@versaur/icons";
+import { forwardRef as h, useState as X, useRef as x, useEffect as L } from "react";
+import { u as T, I as E, B as J, f as Q, c as V } from "./helpers-D23F5WBX.js";
+import { c as v } from "./cx-B9vmfsc1.js";
+const W = h(
+  ({
+    variant: t = "primary",
+    size: n = "medium",
+    loading: e = !1,
+    disabled: o = !1,
+    pressed: s = !1,
+    leftIcon: i,
+    rightIcon: r,
+    children: a,
+    type: c = "button",
+    onClick: l,
+    className: u,
+    ...d
+  }, m) => {
+    const g = !!i, f = !!r, b = !!a;
+    let y;
+    g && f && b ? y = "both-text" : g && b ? y = "left-text" : f && b ? y = "right-text" : g && f ? y = "both" : g ? y = "left" : f && (y = "right");
+    const C = T({
+      disabled: o || e,
+      loading: e,
+      size: n,
+      variant: t,
+      ...y && { iconConfig: y }
+    }), j = (S) => {
+      if (o || e) {
+        S.preventDefault();
+        return;
+      }
+      l == null || l(S);
+    };
+    return /* @__PURE__ */ N(
+      "button",
+      {
+        ref: m,
+        type: c,
+        className: v(M.button, u),
+        "aria-pressed": s ? "true" : void 0,
+        "aria-busy": e ? "true" : void 0,
+        "aria-disabled": o || e ? "true" : void 0,
+        ...C,
+        ...d,
+        onClick: j,
+        children: [
+          e ? /* @__PURE__ */ p(E, { as: w, "aria-label": "Loading", "data-loading-icon": "loader" }) : null,
+          i,
+          a,
+          r
+        ]
+      }
+    );
+  }
+);
+W.displayName = "Button";
+const Y = h(
+  ({ as: t = "h2", size: n, weight: e, intent: o = "default", case: s, transform: i, children: r, className: a, ...c }, l) => {
+    const u = t, d = T({
+      as: t,
+      case: s,
+      intent: o,
+      size: n,
+      transform: i,
+      weight: e
+    });
+    return /* @__PURE__ */ p(u, { ref: l, className: v(_.heading, a), ...d, ...c, children: r });
+  }
+);
+Y.displayName = "Heading";
+const Z = h(
+  ({ as: t = "p", size: n, weight: e, intent: o = "default", case: s, transform: i, children: r, className: a, ...c }, l) => {
+    const u = t, d = T({
+      as: t,
+      case: s,
+      intent: o,
+      size: n,
+      transform: i,
+      weight: e
+    });
+    return /* @__PURE__ */ p(u, { ref: l, className: v($.text, a), ...d, ...c, children: r });
+  }
+);
+Z.displayName = "Text";
+const k = h(
+  ({ variant: t = "primary", size: n = "md", shape: e = "circle", children: o, className: s, ...i }, r) => {
+    const a = T({ shape: e, size: n, variant: t }), c = o || /* @__PURE__ */ p(E, { as: U });
+    return /* @__PURE__ */ p("span", { ref: r, className: v(I.avatar, s), role: "img", ...a, ...i, children: c });
+  }
+);
+k.displayName = "Avatar";
+const R = h(({ src: t, alt: n, onError: e, className: o, ...s }, i) => {
+  const [r, a] = X(!1);
+  return r ? null : /* @__PURE__ */ p(
+    "img",
+    {
+      ref: i,
+      className: v(I["avatar-image"], o),
+      src: t,
+      alt: n,
+      onError: (c) => {
+        a(!0), e == null || e(c);
+      },
+      ...s
+    }
+  );
+});
+R.displayName = "Avatar.Image";
+const Te = Object.assign(k, {
+  Image: R
+}), ee = h(
+  ({ orientation: t, variant: n, size: e, spacing: o, className: s, ...i }, r) => {
+    const a = T({
+      orientation: t,
+      size: e,
+      spacing: o,
+      variant: n
+    });
+    return /* @__PURE__ */ p(
+      "hr",
+      {
+        ref: r,
+        className: v(q.hr, s),
+        role: "separator",
+        "aria-orientation": t === "vertical" ? "vertical" : void 0,
+        ...a,
+        ...i
+      }
+    );
+  }
+);
+ee.displayName = "Hr";
+const te = h(
+  ({ type: t = "spinner", size: n = "sm", children: e, className: o, ...s }, i) => {
+    const r = T({
+      size: n,
+      type: t
+    });
+    return /* @__PURE__ */ N("div", { ref: i, className: v(F.loader, o), ...r, ...s, children: [
+      t === "spinner" && /* @__PURE__ */ p(E, { as: w, "aria-hidden": "true" }),
+      e
+    ] });
+  }
+);
+te.displayName = "Loader";
+const oe = h(
+  ({
+    variant: t = "primary",
+    size: n = "medium",
+    shape: e = "rounded",
+    iconLeft: o,
+    iconRight: s,
+    maxWidth: i,
+    children: r,
+    style: a,
+    className: c,
+    ...l
+  }, u) => {
+    const d = !!o, m = !!s, g = !!r;
+    let f;
+    d && m && g ? f = "both-text" : d && g ? f = "left-text" : m && g ? f = "right-text" : d && m ? f = "both" : d ? f = "left" : m && (f = "right");
+    const b = T({
+      shape: e,
+      size: n,
+      variant: t,
+      ...f && { iconConfig: f }
+    }), y = {
+      ...a,
+      ...i && { "--vers-comp-badge-max-width": i }
+    };
+    return /* @__PURE__ */ N("div", { ref: u, className: v(K.badge, c), ...b, ...l, style: y, children: [
+      o,
+      r,
+      s
+    ] });
+  }
+);
+oe.displayName = "Badge";
+const ne = h(
+  ({ variant: t = "info", icon: n, onDismiss: e, children: o, className: s, ...i }, r) => {
+    const a = T({
+      variant: t
+    });
+    return /* @__PURE__ */ N("div", { ref: r, className: v(A.banner, s), ...a, ...i, children: [
+      n && /* @__PURE__ */ p("div", { className: A.icon, children: n }),
+      /* @__PURE__ */ p("div", { className: A.content, children: o }),
+      e && /* @__PURE__ */ p(J, { as: G, variant: "ghost", size: "small", onClick: e, "aria-label": "Dismiss banner" })
+    ] });
+  }
+);
+ne.displayName = "Banner";
+const re = h(
+  ({ variant: t = "primary", size: n = "medium", className: e, ...o }, s) => {
+    const i = T({
+      size: n,
+      variant: t
+    });
+    return /* @__PURE__ */ p("span", { ref: s, className: v(O.dot, e), ...i, ...o });
+  }
+);
+re.displayName = "Dot";
+const se = h(
+  ({ variant: t = "filled", size: n = "md", children: e, className: o, ...s }, i) => {
+    const r = T({ size: n, variant: t });
+    return /* @__PURE__ */ p("kbd", { ref: i, className: v(z.kbd, o), ...r, ...s, children: e });
+  }
+);
+se.displayName = "Kbd";
+function ae(...t) {
+  return (n) => {
+    t.forEach((e) => {
+      if (typeof e == "function")
+        e(n);
+      else if (e && "current" in e)
+        try {
+          e.current = n;
+        } catch {
+        }
+    });
+  };
+}
+function ie(t, n, e) {
+  let o = null;
+  const s = () => new Promise((c) => {
+    t.matches(":popover-open") || t.showPopover(), requestAnimationFrame(() => {
+      const l = t.getBoundingClientRect(), u = { width: l.width, height: l.height }, d = e || V(n.getBoundingClientRect(), u);
+      c(d);
+    });
+  }), i = async () => {
+    a();
+    const c = await s();
+    t.dataset.placement = c;
+  }, r = (c) => {
+    o && (clearTimeout(o), o = null), c ? o = setTimeout(() => {
+      t.matches(":popover-open") && t.hidePopover(), o = null;
+    }, 100) : t.matches(":popover-open") && t.hidePopover();
+  }, a = () => {
+    o && (clearTimeout(o), o = null);
+  };
+  return { showTooltip: i, hideTooltip: r, cancelHide: a, cleanup: () => clearTimeout(o ?? void 0) };
+}
+function ce({ id: t, tooltipRef: n, placement: e, type: o }) {
+  const s = x(null), i = x(null);
+  L(() => {
+    const r = n.current;
+    if (!r || !t)
+      return;
+    const a = Q(r, t);
+    if (a)
+      return i.current = a, s.current = ie(r, a, e), () => {
+        var c;
+        (c = s.current) == null || c.cleanup(), s.current = null;
+      };
+  }, [t, e, n]), L(() => {
+    if (o !== "hover" || !s.current || !i.current) return;
+    const r = i.current, a = s.current, c = n.current;
+    if (!c) return;
+    const l = () => {
+      a.showTooltip();
+    }, u = () => {
+      a.hideTooltip(!0);
+    }, d = () => {
+      a.cancelHide();
+    }, m = () => {
+      a.hideTooltip(!0);
+    };
+    return r.addEventListener("mouseenter", l), r.addEventListener("mouseleave", u), c.addEventListener("mouseenter", d), c.addEventListener("mouseleave", m), () => {
+      r.removeEventListener("mouseenter", l), r.removeEventListener("mouseleave", u), c.removeEventListener("mouseenter", d), c.removeEventListener("mouseleave", m);
+    };
+  }, [o, n]), L(() => {
+    if (o !== "persisted" || !s.current || !i.current) return;
+    const r = i.current, a = s.current, c = n.current;
+    if (!c) return;
+    const l = (m) => {
+      m.stopPropagation(), c.matches(":popover-open") ? a.hideTooltip(!1) : a.showTooltip();
+    }, u = (m) => {
+      const g = m.target;
+      c.matches(":popover-open") && !r.contains(g) && !c.contains(g) && a.hideTooltip(!1);
+    }, d = (m) => {
+      m.key === "Escape" && c.matches(":popover-open") && a.hideTooltip(!1);
+    };
+    return r.addEventListener("click", l), document.addEventListener("click", u), document.addEventListener("keydown", d), () => {
+      r.removeEventListener("click", l), document.removeEventListener("click", u), document.removeEventListener("keydown", d);
+    };
+  }, [o, n]);
+}
+const le = 8, D = h(
+  ({ id: t, children: n, placement: e, gap: o = le, type: s = "hover", style: i, className: r, ...a }, c) => {
+    const l = x(null), u = T({
+      placement: e
+    });
+    return ce({
+      id: t,
+      placement: e,
+      tooltipRef: l,
+      type: s
+    }), /* @__PURE__ */ p(
+      "div",
+      {
+        ref: ae(l, c),
+        id: t,
+        className: v(P.tooltip, r),
+        ...u,
+        style: {
+          "--_gap": `${o}px`,
+          positionAnchor: `--tooltip-${t}`,
+          ...i
+        },
+        ...a,
+        popover: "auto",
+        children: n
+      }
+    );
+  }
+);
+D.displayName = "Tooltip";
+const H = h(
+  ({ children: t, maxWidth: n, maxLines: e = 2, style: o, className: s, ...i }, r) => {
+    const a = {
+      "--_lines": e,
+      "--_max-width": n,
+      ...o
+    };
+    return /* @__PURE__ */ p("div", { ref: r, className: v(P["tooltip-text"], s), style: a, ...i, children: t });
+  }
+);
+H.displayName = "Tooltip.Text";
+function de(t) {
+  const { id: n, ...e } = t;
+  return {
+    "data-tooltip-trigger": n,
+    style: { anchorName: `--tooltip-${n}` },
+    ...Object.fromEntries(Object.entries(e).map(([o, s]) => [o, String(s)]))
+  };
+}
+function ue(t) {
+  const { id: n } = t, e = document.getElementById(n);
+  e && e.matches(":popover-open") && requestAnimationFrame(() => {
+    const o = document.querySelector(`[data-tooltip-trigger="${n}"]`);
+    o && document.activeElement === o && o.blur(), e.matches(":popover-open") && e.hidePopover();
+  });
+}
+const B = D;
+B.Text = H;
+B.getTooltipTriggerProps = de;
+B.close = ue;
+export {
+  Te as A,
+  oe as B,
+  re as D,
+  Y as H,
+  se as K,
+  te as L,
+  Z as T,
+  ne as a,
+  W as b,
+  ee as c,
+  B as d,
+  ae as e
+};

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 { b as v, a as S, c as g, O as D } from "./overlay-parts-BtD-Qj_k.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.13",
+  "version": "1.0.15",
   "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.9",
+    "@versaur/core": "0.0.11",
     "@versaur/icons": "1.0.0"
   },
   "scripts": {