stargazer-ui 1.0.0 → 1.0.2

package/dist/Overlay/index.js

@@ -0,0 +1,125 @@
+import { jsxs as M, Fragment as U, jsx as N } from "react/jsx-runtime";
+import { forwardRef as X, useRef as P, useState as w, useEffect as $, cloneElement as Y } from "react";
+import { createPortal as Z } from "react-dom";
+const q = (l, g, u, c, i = !1) => {
+  let f = document.body, o = l.current, a = g.current, e = getComputedStyle(o).position, n = o.getBoundingClientRect().top - (e != "fixed" ? f.getBoundingClientRect().top : 0), d = o.offsetHeight, h = o.getBoundingClientRect().left - (e != "fixed" ? f.getBoundingClientRect().left : 0), R = o.offsetWidth, m = a.clientHeight, y = a.clientWidth;
+  const p = (v, S, B) => a.getBoundingClientRect()[v] <= B ? S : r[v];
+  let x = 0, C = 0;
+  i || (C = c.clientHeight - 1, x = c.clientWidth - 1);
+  let r;
+  switch (u) {
+    case "top":
+      return r = { top: n - m - C, left: h + R / 2 - y / 2 }, r.right = p("right", 12, 0), r.left = p("left", 0, 0), r;
+    case "right":
+      return r = { top: n + d / 2 - m / 2, left: h + o.offsetWidth + x }, r;
+    case "bottom":
+      return r = { top: n + d + C, left: h + R / 2 - y / 2 }, r.right = p("right", 12, 0), r.left = p("left", 0, 0), r;
+    case "left":
+      return r = { top: n + d / 2 - m / 2, left: h - y - x }, r;
+    default:
+      return { top: n - m, left: h + R / 2 - y / 2 };
+  }
+}, G = (l, g, u, c) => {
+  let i = g.current.getBoundingClientRect().top, f = window.innerHeight - g.current.getBoundingClientRect().bottom, o = g.current.getBoundingClientRect().left, a = window.innerWidth - g.current.getBoundingClientRect().right, e = u.current.clientWidth + c.current.clientWidth + 48, n = u.current.clientHeight + c.current.clientHeight + 48;
+  if (l.current === "top") {
+    if (i <= n)
+      return a <= e ? "left" : o <= e ? "right" : "top";
+  } else if (l.current === "bottom") {
+    if (f <= n)
+      return a <= e ? "left" : o <= e ? "right" : "bottom";
+  } else if (l.current === "left" || l.current === "right") {
+    if (i >= n)
+      return "top";
+    if (i < n / 2)
+      return "bottom";
+    if (f < n / 2)
+      return l.current === "left" ? "left" : "right";
+  }
+  return l.current;
+}, et = X(({ children: l, overlay: g, show: u, onToggle: c, position: i = "auto", trigger: f = "click", defaultShow: o = !1 }, a) => {
+  const e = P(), n = P(), d = P(), [h, R] = w(""), [m, y] = w(""), [p, x] = w(o), C = P(p), r = (t) => {
+    C.current = t, x(t);
+  }, [v, S] = w(i === "auto" ? "top" : i), B = P(v), W = (t) => {
+    B.current = t, S(t);
+  }, [k, A] = w(!1), [L, O] = w(!1), [J, F] = w(!0), H = Array.isArray(f) ? f : [f], E = (t, s, b) => {
+    s.current && (y(q(t, s, B.current, b.current)), R(q(t, b, B.current, b.current, !0)));
+  }, I = () => {
+    if (C.current && i === "auto") {
+      let t = G(B, e, n, d);
+      W(t);
+    }
+  }, z = () => {
+    E(e, n, d), C.current;
+  }, K = (t) => {
+    if (L && J) {
+      F(!1);
+      return;
+    }
+    r(!p), c(!p);
+  }, Q = (t) => {
+    k || (A(!0), c(!0));
+  }, T = (t) => {
+    r(!0), O(!0), c(!0);
+  }, D = (t) => {
+    k ? A(!1) : L && (O(!1), F(!0)), r(!1), c(!1);
+  };
+  $(() => {
+    if (console.log(e.current.getBoundingClientRect()), n.current && u && (E(e, n, d), i === "auto")) {
+      let t = G(B, e, n, d);
+      W(t);
+    }
+    if (e.current) {
+      let t = document.body, s = getComputedStyle(e.current).position;
+      console.log(e.current.getBoundingClientRect()), y({
+        top: e.current.getBoundingClientRect().top - (s != "fixed" ? t.getBoundingClientRect().top : 0),
+        left: e.current.getBoundingClientRect().left - (s != "fixed" ? t.getBoundingClientRect().left : 0)
+      }), R({
+        top: e.current.getBoundingClientRect().top - (s != "fixed" ? t.getBoundingClientRect().top : 0),
+        left: e.current.getBoundingClientRect().left - (s != "fixed" ? t.getBoundingClientRect().left : 0)
+      });
+    }
+    r(u);
+  }, [u, n, e, v]), $(() => (window.addEventListener("scroll", I), window.addEventListener("resize", z), function() {
+    window.removeEventListener("scroll", I), window.removeEventListener("resize", z);
+  }), []);
+  const j = (t) => {
+    let s = getComputedStyle(t.current).position;
+    return s === "fixed" ? "fixed" : s === "sticky" ? "sticky" : "absolute";
+  };
+  return /* @__PURE__ */ M("div", { ref: a, style: { display: "static" }, children: [
+    Y(l, {
+      ref: e,
+      onClick: H.find((t) => t === "click") ? K : null,
+      onMouseOver: H.find((t) => t === "hover") ? Q : null,
+      onMouseLeave: H.find((t) => t === "hover") ? D : null,
+      onFocus: H.find((t) => t === "focus") ? T : null,
+      onBlur: H.find((t) => t === "focus") ? D : null
+    }),
+    u ? Z(
+      /* @__PURE__ */ M(U, { children: [
+        /* @__PURE__ */ N(
+          "div",
+          {
+            ref: n,
+            style: { maxWidth: "100%", maxHeight: "100%", position: j(e), top: m.top, left: m.left, zIndex: "1010" },
+            children: g
+          }
+        ),
+        /* @__PURE__ */ N(
+          "div",
+          {
+            id: "sg-overlay-arrow",
+            ref: d,
+            "aria-hidden": !0,
+            className: `sg-overlay-arrow${v ? " overlay-position-" + v : ""}`,
+            style: { position: j(e), top: h.top, left: h.left }
+          }
+        )
+      ] }),
+      document.body
+    ) : null
+  ] });
+});
+export {
+  et as default
+};

package/dist/Popout/index.js

@@ -0,0 +1,85 @@
+import { jsx as c } from "react/jsx-runtime";
+import { createPortal as $ } from "react-dom";
+import A, { forwardRef as p, useState as L, useRef as T, useEffect as N } from "react";
+const B = (e, o, s, r) => {
+  const t = r ? r.element : document.body;
+  N(() => {
+    if (t)
+      return t.addEventListener(e, o, s), function() {
+        t.removeEventListener(e, o, s);
+      };
+  }, [o, t]);
+}, a = p(({ children: e, initialPosition: o, id: s, resize: r = !1, move: t = !1, ...i }, u) => {
+  const [n, C] = L({ offSetTop: 0, offSetLeft: 0, ...o });
+  console.log(n);
+  const b = r ? "true" : "false", M = t ? "true" : "false", l = T(u || null), [h, S] = L(!1), y = T(h);
+  N(() => {
+    y.current = h;
+  }, [h]);
+  const R = (f) => {
+    if (t && f.target.className.includes("sg-popout-title") || f.target.className.includes("sg-popout-header")) {
+      const { top: d, left: g } = l.current.getBoundingClientRect();
+      C((m) => ({
+        ...m,
+        offSetTop: f.clientY - d,
+        offSetLeft: f.clientX - g
+      })), l.current.style.setProperty("user-select", "none"), l.current.setPointerCapture("moveable-popup-" + s), S((m) => !0);
+    }
+  }, H = (f) => {
+    t && (l.current.style.removeProperty("user-select"), S((d) => !1));
+  }, P = (f) => {
+    if (t && y.current) {
+      const d = f.clientY - n.offSetTop < 0, g = window.innerHeight - (f.clientY - n.offSetTop + l.current.offsetHeight) < 0, m = f.clientX - n.offSetLeft < 0, x = window.innerWidth - (f.clientX - n.offSetLeft + l.current.offsetWidth) < 0;
+      let v = d ? 0 : f.clientY - n.offSetTop;
+      v = g ? window.innerHeight - l.current.offsetHeight : v;
+      let w = m ? 0 : f.clientX - n.offSetLeft;
+      w = x ? window.innerWidth - l.current.offsetWidth : w, C((E) => ({
+        ...E,
+        top: v,
+        left: w
+      }));
+    }
+  };
+  return B("pointerup", H, !0, { element: document.body }), $(
+    /* @__PURE__ */ c(
+      "dialog",
+      {
+        "data-resize": b,
+        "data-move": M,
+        ref: l,
+        id: s,
+        className: "moveable-popout",
+        style: { top: n.top, left: n.left, bottom: n.bottom, right: n.right },
+        onMouseDown: R,
+        onMouseMove: P,
+        children: e
+      }
+    ),
+    document.body
+  );
+}), D = ({ as: e, className: o, children: s, ...r }, t) => {
+  let u = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"].find((n) => n === e) ? e : "div";
+  return /* @__PURE__ */ c(u, { ref: t, className: `sg-popout-header ${o}`, ...r, children: s });
+};
+a.Header = p(D);
+const W = ({ children: e, className: o, ...s }, r) => {
+  e = e.length ? e.filter((i) => i != null && i != "") : e;
+  let t = [];
+  return A.Children.forEach(e, (i) => {
+    t.push(i);
+  }), /* @__PURE__ */ c("div", { ref: r, className: `sg-popout-body ${o}`, ...s, children: t.map((i) => i) });
+};
+a.Body = p(W);
+const X = ({ as: e, className: o, children: s, ...r }, t) => {
+  let u = ["h1", "h2", "h3", "h4", "h5", "h6"].find((n) => n === e) ? e : "h5";
+  return /* @__PURE__ */ c(u, { ref: t, className: `sg-popout-title ${o}`, ...r, children: s });
+};
+a.Title = p(X);
+const Y = ({ children: e, className: o, ...s }, r) => /* @__PURE__ */ c("p", { ref: r, className: `sg-popout-text ${o}`, ...s, children: e });
+a.Text = p(Y);
+const O = ({ children: e, className: o, ...s }, r) => /* @__PURE__ */ c("div", { ref: r, className: `sg-popout-footer ${o}`, ...s, children: e });
+a.Footer = p(O);
+export {
+  a as default,
+  B as useEventListener
+};

package/dist/Tabs/index.js

@@ -0,0 +1,69 @@
+import { jsx as u } from "react/jsx-runtime";
+import { createContext as x, forwardRef as v, useState as h, useMemo as T, useContext as m } from "react";
+const C = x(null), w = ({ children: s, value: t }) => /* @__PURE__ */ u(C.Provider, { value: t, children: s }), p = v(({ children: s, className: t, controlId: e, activeClassName: n, defaultActive: l = 0, ...i }, b) => {
+  const [a, c] = h(l), o = n || "sg-active", r = T(() => ({
+    activeTab: a,
+    setActiveTab: c,
+    controlId: e,
+    activeClass: o
+  }), [a, c, e]);
+  return /* @__PURE__ */ u(w, { value: r, children: /* @__PURE__ */ u("div", { ref: b, id: e + "-tab-wrapper", className: `sg-tabs${t ? " " + t : ""}`, ...i, children: s }) });
+}), y = ({ children: s, className: t, ...e }, n) => {
+  const { controlId: l, activeClass: i } = m(C);
+  return /* @__PURE__ */ u("div", { onKeyDown: (a) => {
+    const c = a.key, o = Array.from(document.getElementById(l + "-tab-controls").children);
+    if (c === "ArrowRight" || c === "ArrowLeft") {
+      a.preventDefault();
+      const r = document.querySelector(".sg-tabs-button." + i), d = o.indexOf(r), g = c === "ArrowRight" ? 1 : -1, f = d + g < 0 ? o.length - 1 : d + g >= o.length ? 0 : d + g;
+      o[f].focus(), o[f].click();
+    } else if (c === "Home" || c === "End") {
+      a.preventDefault();
+      const r = c === "Home" ? 0 : o.length - 1;
+      o[r].focus(), o[r].click();
+    }
+  }, role: "tablist", id: l + "-tab-controls", ref: n, className: `sg-tabs-controls${t ? " " + t : ""}`, ...e, children: s });
+};
+p.Controls = v(y);
+const A = ({ children: s, className: t, onClick: e, tabId: n, id: l, ...i }, b) => {
+  const { activeTab: a, setActiveTab: c, activeClass: o } = m(C), r = "sg-tabs-button" + (t ? " " + t : "") + (a === n ? " " + o : ""), d = a === n, g = (f) => {
+    c(n), e && e(f);
+  };
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      role: "tab",
+      type: "button",
+      id: n + "-button",
+      ref: b,
+      onClick: g,
+      className: r,
+      ...i,
+      tabIndex: d ? "0" : "-1",
+      "aria-selected": d ? "true" : "false",
+      "aria-controls": n + "-page",
+      children: s
+    }
+  );
+};
+p.Button = v(A);
+const k = ({ children: s, className: t, ...e }, n) => (m(C), /* @__PURE__ */ u("div", { role: "none", ref: n, className: `sg-tabs-content${t ? " " + t : ""}`, ...e, children: s }));
+p.Content = v(k);
+const D = ({ children: s, className: t, tabId: e, ...n }, l) => {
+  const { activeTab: i, activeClass: b } = m(C), a = "sg-tabs-page" + (t ? " " + t : "") + (i === e ? " " + b : "");
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      role: "tabpanel",
+      id: e + "-page",
+      "aria-labelledby": e + "-button",
+      ref: l,
+      className: a,
+      ...n,
+      children: s
+    }
+  );
+};
+p.Page = v(D);
+export {
+  p as default
+};

package/dist/ToggleButton/index.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as u, useState as g } from "react";
+const p = u(({ children: t, toggled: r = "false", onClick: e, ...o }, d) => {
+  const [l, n] = g(r);
+  return /* @__PURE__ */ s("button", { onClick: (a) => {
+    n((f) => f === "true" ? "false" : "true"), e && e(a);
+  }, toggled: l, ...o, children: t });
+});
+export {
+  p as default
+};

package/dist/main.js

@@ -0,0 +1,30 @@
+import { default as t } from "./Button/index.js";
+import { default as e } from "./Card/index.js";
+import { default as u } from "./CloseButton/index.js";
+import { default as p } from "./Dropdown/index.js";
+import { default as s } from "./FloatingLabel/index.js";
+import { default as x } from "./Form/index.js";
+import { default as b } from "./InputGroup/index.js";
+import { default as v } from "./Modal/index.js";
+import { default as N } from "./Nav/index.js";
+import { default as C } from "./NavBar/index.js";
+import { default as F } from "./NavDropdown/index.js";
+import { default as i } from "./Popout/index.js";
+import { default as I } from "./Tabs/index.js";
+import { default as M } from "./ToggleButton/index.js";
+export {
+  t as Button,
+  e as Card,
+  u as CloseButton,
+  p as Dropdown,
+  s as FloatingLabel,
+  x as Form,
+  b as InputGroup,
+  v as Modal,
+  N as Nav,
+  F as NavDropdown,
+  C as Navbar,
+  i as Popout,
+  I as Tabs,
+  M as ToggleButton
+};