@versaur/react 1.0.0 → 1.0.3

package/dist/primitive.js

@@ -1,26 +1,205 @@
-import { Button as t } from "./components/primitive/button/button.js";
-import { Heading as p } from "./components/primitive/heading/heading.js";
-import { Text as f } from "./components/primitive/text/text.js";
-import { Avatar as a } from "./components/primitive/avatar/avatar.js";
-import { Hr as d } from "./components/primitive/hr/hr.js";
-import { ButtonIcon as c } from "./components/primitive/button-icon/button-icon.js";
-import { Loader as i } from "./components/primitive/loader/loader.js";
-import { Badge as H } from "./components/primitive/badge/badge.js";
-import { Dot as T } from "./components/primitive/dot/dot.js";
-import { Kbd as l } from "./components/primitive/kbd/kbd.js";
-import { Tooltip as A } from "./components/primitive/tooltip/tooltip.js";
-import { Icon as K } from "./components/primitive/icon/icon.js";
+import { jsxs as v, jsx as f } from "react/jsx-runtime";
+import { LoaderIcon as B, UserIcon as D } from "@versaur/icons";
+import { forwardRef as b, useState as H } from "react";
+import { c as g } from "./cx-B9vmfsc1.js";
+import { u as _ } from "./use-data-attrs-iPFyfiKN.js";
+import { I as N } from "./tooltip-CmKPCktA.js";
+import { B as it, H as lt, T as mt } from "./tooltip-CmKPCktA.js";
+const j = "_button_1xs3y_2", w = {
+  button: j
+}, R = "_avatar_gbt5b_2", I = {
+  avatar: R,
+  "avatar-image": "_avatar-image_gbt5b_135"
+}, K = "_badge_1ekpk_2", z = {
+  badge: K
+}, O = "_dot_r4bz1_2", U = {
+  dot: O
+}, q = "_heading_8cumv_2", C = {
+  heading: q
+}, F = "_text_1a15x_2", G = {
+  text: F
+}, J = "_loader_1wtnu_2", M = {
+  loader: J
+}, P = "_kbd_io10s_6", Q = {
+  kbd: P
+}, V = b(
+  ({
+    variant: a = "primary",
+    size: r = "medium",
+    loading: t = !1,
+    disabled: e = !1,
+    pressed: o = !1,
+    leftIcon: s,
+    rightIcon: n,
+    children: d,
+    type: i = "button",
+    onClick: u,
+    className: h,
+    ...l
+  }, y) => {
+    const p = !!s, c = !!n, x = !!d;
+    let m;
+    p && c && x ? m = "both-text" : p && x ? m = "left-text" : c && x ? m = "right-text" : p && c ? m = "both" : p ? m = "left" : c && (m = "right");
+    const k = _({
+      disabled: e || t,
+      loading: t,
+      size: r,
+      variant: a,
+      ...m && { iconConfig: m }
+    }), L = (A) => {
+      if (e || t) {
+        A.preventDefault();
+        return;
+      }
+      u == null || u(A);
+    };
+    return /* @__PURE__ */ v(
+      "button",
+      {
+        ref: y,
+        type: i,
+        className: g(w.button, h),
+        "aria-pressed": o ? "true" : void 0,
+        "aria-busy": t ? "true" : void 0,
+        "aria-disabled": e || t ? "true" : void 0,
+        ...k,
+        ...l,
+        onClick: L,
+        children: [
+          t ? /* @__PURE__ */ f(N, { as: B, "aria-label": "Loading", "data-loading-icon": "loader" }) : null,
+          s,
+          d,
+          n
+        ]
+      }
+    );
+  }
+);
+V.displayName = "Button";
+const X = b(
+  ({ as: a = "h2", size: r, weight: t, intent: e, case: o, transform: s, children: n, className: d, ...i }, u) => {
+    const h = a, l = _({
+      as: a,
+      case: o,
+      intent: e,
+      size: r,
+      transform: s,
+      weight: t
+    });
+    return /* @__PURE__ */ f(h, { ref: u, className: g(C.heading, d), ...l, ...i, children: n });
+  }
+);
+X.displayName = "Heading";
+const Y = b(
+  ({ as: a = "p", size: r, weight: t, intent: e, case: o, transform: s, children: n, className: d, ...i }, u) => {
+    const h = a, l = _({
+      as: a,
+      case: o,
+      intent: e,
+      size: r,
+      transform: s,
+      weight: t
+    });
+    return /* @__PURE__ */ f(h, { ref: u, className: g(G.text, d), ...l, ...i, children: n });
+  }
+);
+Y.displayName = "Text";
+const S = b(
+  ({ variant: a = "primary", size: r = "md", shape: t = "circle", children: e, className: o, ...s }, n) => {
+    const d = _({ shape: t, size: r, variant: a }), i = e || /* @__PURE__ */ f(N, { as: D });
+    return /* @__PURE__ */ f("span", { ref: n, className: g(I.avatar, o), role: "img", ...d, ...s, children: i });
+  }
+);
+S.displayName = "Avatar";
+const T = b(({ src: a, alt: r, onError: t, className: e, ...o }, s) => {
+  const [n, d] = H(!1);
+  return n ? null : /* @__PURE__ */ f(
+    "img",
+    {
+      ref: s,
+      className: g(I["avatar-image"], e),
+      src: a,
+      alt: r,
+      onError: (i) => {
+        d(!0), t == null || t(i);
+      },
+      ...o
+    }
+  );
+});
+T.displayName = "Avatar.Image";
+const nt = Object.assign(S, {
+  Image: T
+}), Z = b(
+  ({ type: a = "spinner", size: r = "sm", children: t, className: e, ...o }, s) => {
+    const n = _({
+      size: r,
+      type: a
+    });
+    return /* @__PURE__ */ v("div", { ref: s, className: g(M.loader, e), ...n, ...o, children: [
+      a === "spinner" && /* @__PURE__ */ f(N, { as: B, "aria-hidden": "true" }),
+      t
+    ] });
+  }
+);
+Z.displayName = "Loader";
+const $ = b(
+  ({
+    variant: a = "primary",
+    size: r = "medium",
+    shape: t = "rounded",
+    iconLeft: e,
+    iconRight: o,
+    maxWidth: s,
+    children: n,
+    style: d,
+    className: i,
+    ...u
+  }, h) => {
+    const l = !!e, y = !!o, p = !!n;
+    let c;
+    l && y && p ? c = "both-text" : l && p ? c = "left-text" : y && p ? c = "right-text" : l && y ? c = "both" : l ? c = "left" : y && (c = "right");
+    const x = _({
+      shape: t,
+      size: r,
+      variant: a,
+      ...c && { iconConfig: c }
+    }), m = {
+      ...d,
+      ...s && { "--vers-comp-badge-max-width": s }
+    };
+    return /* @__PURE__ */ v("div", { ref: h, className: g(z.badge, i), ...x, ...u, style: m, children: [
+      e,
+      n,
+      o
+    ] });
+  }
+);
+$.displayName = "Badge";
+const E = b(({ variant: a = "primary", size: r = "medium", className: t, ...e }, o) => {
+  const s = _({
+    size: r,
+    variant: a
+  });
+  return /* @__PURE__ */ f("span", { ref: o, className: g(U.dot, t), ...s, ...e });
+});
+E.displayName = "Dot";
+const W = b(({ variant: a = "filled", size: r = "md", children: t, className: e, ...o }, s) => {
+  const n = _({ size: r, variant: a });
+  return /* @__PURE__ */ f("kbd", { ref: s, className: g(Q.kbd, e), ...n, ...o, children: t });
+});
+W.displayName = "Kbd";
 export {
-  a as Avatar,
-  H as Badge,
-  t as Button,
-  c as ButtonIcon,
-  T as Dot,
-  p as Heading,
-  d as Hr,
-  K as Icon,
-  l as Kbd,
-  i as Loader,
-  f as Text,
-  A as Tooltip
+  nt as Avatar,
+  $ as Badge,
+  V as Button,
+  it as ButtonIcon,
+  E as Dot,
+  X as Heading,
+  lt as Hr,
+  N as Icon,
+  W as Kbd,
+  Z as Loader,
+  Y as Text,
+  mt as Tooltip
 };

package/dist/tokens.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/tokens.js

@@ -0,0 +1 @@
+

package/dist/tooltip-CmKPCktA.js

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

package/dist/{hooks/use-data-attrs.js → use-data-attrs-iPFyfiKN.js}

@@ -12,5 +12,5 @@ function i(e) {
   return o;
 }
 export {
-  i as useDataAttrs
+  i as u
 };

package/dist/utils.d.ts

@@ -0,0 +1,40 @@
+import { ElementType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const OverlayBody: ForwardRefExoticComponent<OverlayBodyProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface OverlayBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export declare interface OverlayCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+}
+
+export declare const OverlayFooter: ForwardRefExoticComponent<OverlayFooterProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface OverlayFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export declare const OverlayHeader: ForwardRefExoticComponent<OverlayHeaderProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface OverlayHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export declare const OverlayTitle: ForwardRefExoticComponent<OverlayTitleProps & RefAttributes<HTMLHeadingElement>>;
+
+export declare interface OverlayTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children?: ReactNode;
+    /**
+     * The HTML element to render as
+     * @default 'h2'
+     */
+    as?: ElementType;
+}
+
+export { }

package/dist/utils.js

@@ -1,6 +1,6 @@
-import { OverlayBody as a, OverlayFooter as l, OverlayHeader as o, OverlayTitle as y } from "./components/utils/overlay-parts/overlay-parts.js";
+import { O as r, a as l, b as o, c as y } from "./overlay-parts-YglazEA-.js";
 export {
-  a as OverlayBody,
+  r as OverlayBody,
   l as OverlayFooter,
   o as OverlayHeader,
   y as OverlayTitle