stargazer-ui 1.0.1 → 1.0.2

package/dist/Button/index.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+const s = f(({ variant: o = "primary", children: r, className: t, ...n }, u) => /* @__PURE__ */ e("button", { ref: u, type: "button", className: `sg-button sg-button-${o}${t == null ? "" : " " + t}`, ...n, children: r }));
+export {
+  s as default
+};

package/dist/Card/index.js

@@ -0,0 +1,32 @@
+import { jsx as d } from "react/jsx-runtime";
+import c, { forwardRef as h } from "react";
+const m = h(({ children: e, className: s, ...o }, r) => {
+  let n = Object.keys(m), t = [], l = e.length === void 0 ? e : e.filter((a) => a != null && a != "");
+  return n.forEach((a) => {
+    c.Children.forEach(l, (i) => i.type.name === a ? t.push(i) : null);
+  }), t.length === 0 && (t = [l]), /* @__PURE__ */ d("div", { ref: r, className: "sg-card " + s, ...o, children: t.map((a) => a) });
+}), p = h(({ as: e, className: s, children: o, ...r }, n) => {
+  let l = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"].find((a) => a === e) ? e : "div";
+  return /* @__PURE__ */ d(l, { ref: n, className: `sg-card-header ${s}`, ...r, children: o });
+});
+m.Header = p;
+const u = ({ children: e, className: s, ...o }, r) => {
+  e = e.length ? e.filter((t) => t != null && t != "") : e;
+  let n = [];
+  return c.Children.forEach(e, (t) => {
+    n.push(t);
+  }), /* @__PURE__ */ d("div", { ref: r, className: `sg-card-body ${s}`, ...o, children: n.map((t) => t) });
+};
+m.Body = h(u);
+const f = h(({ as: e, className: s, children: o, ...r }, n) => {
+  let l = ["h1", "h2", "h3", "h4", "h5", "h6"].find((a) => a === e) ? e : "h5";
+  return /* @__PURE__ */ d(l, { ref: n, className: s, ...r, children: o });
+});
+m.Title = f;
+const v = ({ children: e, className: s, ...o }, r) => /* @__PURE__ */ d("p", { ref: r, className: `sg-card-text ${s}`, ...o, children: e });
+m.Text = h(v);
+const g = ({ children: e, className: s, ...o }, r) => /* @__PURE__ */ d("div", { ref: r, className: `sg-card-footer ${s}`, ...o, children: e });
+m.Footer = h(g);
+export {
+  m as default
+};

package/dist/CloseButton/index.js

@@ -0,0 +1,6 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+const c = a(({ className: e, variant: o = !1, ...l }, t) => /* @__PURE__ */ s("button", { ref: t, className: `sg-button-close${o ? " sg-button-close-white" : ""} ${e}`, ...l, children: /* @__PURE__ */ s("span", { className: "sg-close-visually-hidden-label", children: "Close" }) }));
+export {
+  c as default
+};

package/dist/Dropdown/index.js

@@ -0,0 +1,182 @@
+import { jsx as b } from "react/jsx-runtime";
+import { createContext as $, forwardRef as E, useState as C, useCallback as M, useMemo as P, useContext as S, useEffect as k, useLayoutEffect as A } from "react";
+const L = (s, o, r = !1) => {
+  const i = r ? "top-end" : "top-start", u = r ? "top-start" : "top-end", c = r ? "bottom-end" : "bottom-start", v = r ? "bottom-start" : "bottom-end", f = r ? "right-start" : "left-start", d = r ? "right-end" : "left-end", g = r ? "left-start" : "right-start", m = r ? "left-end" : "right-end";
+  let n = s ? v : c;
+  return o === "up" ? n = s ? u : i : o === "end" ? n = s ? m : g : o === "start" ? n = s ? d : f : o === "down-centered" ? n = "bottom" : o === "up-centered" && (n = "top"), n;
+}, x = (s, o = "") => {
+  let r = s.target, i = !0, u = !1;
+  for (; i; )
+    r.id != o + "-menu" ? r = r.parentElement : (u = !0, i = !1), r.id === "root" && (i = !1, u = !1);
+  return u;
+}, I = $(null), O = ({ children: s, value: o, ...r }) => /* @__PURE__ */ b(I.Provider, { value: o, children: s }), y = E(({
+  children: s,
+  className: o,
+  onSelect: r,
+  onToggle: i,
+  controlID: u,
+  drop: c = "down",
+  align: v = "start",
+  autoClose: f = !0,
+  show: d = "default",
+  ...g
+}, m) => {
+  const [n, e] = C(d === "default" ? !1 : d), [p, w] = C({ case: "" }), l = M((B) => {
+    B.stopPropagation(), e((D) => !D);
+  }, []), a = L(v === "end", c), h = P(() => ({
+    align: v,
+    drop: c,
+    showInternal: d != "default" && i ? d : n,
+    handleToggle: d != "default" && i ? i : l,
+    placement: a,
+    directionClasses: {
+      down: "dropdown",
+      "down-centered": "dropdown-center",
+      up: "dropup",
+      "up-centered": "dropup-center dropup",
+      end: "dropend",
+      start: "dropstart"
+    },
+    controlID: u,
+    activeDescendant: p,
+    setActiveDescendant: w
+  }), [v, c, d, n, i, l, a, u, p, w]);
+  return /* @__PURE__ */ b("div", { id: u + "-wrapper", ref: m, className: `sg-dropdown${o ? " " + o : ""}`, ...g, children: /* @__PURE__ */ b(O, { value: h, children: s }) });
+}), q = ({ children: s, className: o, navDropdown: r = !1, as: i = "button", variant: u = "primary", ...c }, v) => {
+  const { controlID: f, handleToggle: d, setActiveDescendant: g, showInternal: m } = S(I), n = i, e = (t) => {
+    let a = !1;
+    switch (t.key) {
+      case "ArrowDown":
+        a = !0, m ? g((h) => ({ case: "next" })) : (d(t), g((h) => ({ case: "first" })));
+        break;
+      case "ArrowUp":
+        a = !0, m ? g((h) => ({ case: "previous" })) : (d(t), g((h) => ({ case: "last" })));
+        break;
+      case "Home":
+        a = !0, m && g((h) => ({ case: "first" }));
+        break;
+      case "End":
+        a = !0, m && g((h) => ({ case: "last" }));
+        break;
+      case "Escape":
+        a = !0, m && d(t);
+        break;
+      case "Enter":
+      case " ":
+        if (m) {
+          a = !0, document.querySelector(".sg-dropdown-item-visual-focus").click(), d(t);
+          break;
+        } else {
+          g((h) => ({ case: "first" }));
+          break;
+        }
+    }
+    a && (t.stopPropagation(), t.preventDefault());
+  }, p = (t) => {
+    m && t.target.id !== f && (x(t, f) ? x(t, f) && (d(t), document.getElementById(f).focus()) : d(t));
+  };
+  k(() => {
+    const t = document.getElementById(f);
+    return t.addEventListener("keydown", e, !0), document.addEventListener("mouseup", p, !0), function() {
+      t.removeEventListener("keydown", e, !0), document.removeEventListener("mouseup", p, !0);
+    };
+  }, [e, f]);
+  const w = (t) => {
+    d(t), m || g((a) => ({ case: "first" }));
+  };
+  let l = `sg-button sg-button${u ? "-" + u : "-primary"} sg-dropdown-toggle${o ? " " + o : ""}`;
+  return (n === "a" || r) && (l = `sg-nav-dropdown-toggle sg-dropdown-toggle${o ? " " + o : ""}`), /* @__PURE__ */ b(
+    n,
+    {
+      tabIndex: "0",
+      type: "button",
+      "aria-haspopup": "true",
+      "aria-controls": f + "-menu",
+      "aria-expanded": m,
+      id: f,
+      ref: v,
+      className: l,
+      onClick: (t) => w(t),
+      ...c,
+      children: s
+    }
+  );
+};
+y.Toggle = E(q);
+const H = ({ children: s, className: o, style: r = {}, ...i }, u) => {
+  const { controlID: c, showInternal: v, activeDescendant: f } = S(I), [d, g] = C(r);
+  A(() => {
+    if (v) {
+      const n = document.getElementById(c + "-menu");
+      console.log(n);
+      let e = {};
+      n.getBoundingClientRect().right > window.innerWidth ? e = { ...e, right: 0 } : n.getBoundingClientRect().left < 0 ? e = { ...e, left: 0 } : n.getBoundingClientRect().top < 0 ? e = { ...e, top: 0 } : n.getBoundingClientRect().bottom > window.innerHeight && (e = { ...e, bottom: 0 }), console.log(e), g((p) => ({ ...p, ...e }));
+    }
+  }, [v]), k(() => {
+    if (v) {
+      const n = document.getElementById(c + "-menu"), e = document.getElementById(c + "-menu").children, p = e.length - 1, w = document.querySelector(".sg-dropdown-item-visual-focus");
+      let l = 0, t = e[0].children[0];
+      if (w != null) {
+        for (let a = 0; a < e.length; a++)
+          e[a] === w.parentElement && (l = a);
+        w.classList.remove("sg-dropdown-item-visual-focus");
+      }
+      switch (f.case) {
+        case "first":
+          t = e[0].children[0], l = 0;
+          break;
+        case "last":
+          t = e[p].children[0], l = p;
+          break;
+        case "next":
+          l = l === p ? 0 : l + 1, t = e[l].children[0];
+          break;
+        case "previous":
+          l = l === 0 ? p : l - 1, t = e[l].children[0];
+          break;
+      }
+      n.setAttribute("aria-activedescendant", t.id), e[l].children[0].classList.add("sg-dropdown-item-visual-focus");
+    } else
+      document.getElementById(c + "-menu").setAttribute("aria-activedescendant", "");
+  }, [c, v, f]);
+  const m = (n) => {
+    const e = n.target;
+    e.classList.contains("sg-dropdown-item-visual-focus") || (document.querySelector(".sg-dropdown-item-visual-focus").classList.remove("sg-dropdown-item-visual-focus"), e.classList.add("sg-dropdown-item-visual-focus"));
+  };
+  return k(() => {
+    const n = document.getElementById(c + "-menu");
+    for (let e of n.children)
+      e.addEventListener("mouseover", m, !0);
+    return function() {
+      for (let p of n.children)
+        p.removeEventListener("mouseover", m, !0);
+    };
+  }, []), /* @__PURE__ */ b(
+    "ul",
+    {
+      id: c + "-menu",
+      role: "menu",
+      tabIndex: "-1",
+      "aria-labelledby": c,
+      "aria-activedescendant": f,
+      ref: u,
+      className: `sg-dropdown-list${o ? " " + o : ""}${v ? " show" : ""}`,
+      style: d,
+      ...i,
+      children: s
+    }
+  );
+};
+y.Menu = E(H);
+const V = ({ children: s, as: o = "button", className: r, ...i }, u) => /* @__PURE__ */ b("li", { role: "none", children: /* @__PURE__ */ b(o, { role: "menuitem", tabIndex: "-1", ref: u, className: `sg-dropdown-item${r ? " " + r : ""}`, ...i, children: s }) });
+y.Item = E(V);
+const W = ({ className: s = "", ...o }, r) => /* @__PURE__ */ b("hr", { className: `.sg-dropdown-divider${s}`, ...o });
+y.Divider = E(W);
+export {
+  W as Divider,
+  I as DropdownContext,
+  V as Item,
+  H as Menu,
+  q as Toggle,
+  y as default
+};

package/dist/FloatingLabel/index.js

@@ -0,0 +1,13 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as s, useMemo as i } from "react";
+import { FormContext as f } from "../Form/index.js";
+const u = s(({ children: e, label: t, controlId: l, ...a }, m) => {
+  const o = i(() => ({ controlId: l }));
+  return /* @__PURE__ */ r(f.Provider, { value: o, children: /* @__PURE__ */ n("div", { className: "sg-form-floating", children: [
+    e,
+    /* @__PURE__ */ r("label", { ref: m, htmlFor: o.controlId, className: "sg-form-floating-label", ...a, children: t })
+  ] }) });
+});
+export {
+  u as default
+};

package/dist/Form/index.js

@@ -0,0 +1,58 @@
+import { jsx as n, jsxs as v, Fragment as w } from "react/jsx-runtime";
+import { createContext as I, forwardRef as s, useContext as $, useMemo as j } from "react";
+const x = I(!1), G = ({ children: t, value: e }) => /* @__PURE__ */ n(x.Provider, { value: e, children: t }), d = s(({ children: t, ...e }, r) => /* @__PURE__ */ n("form", { ref: r, ...e, children: t })), H = ({ as: t = "input", className: e = "", plaintext: r = !1, id: l = "", type: o = "text", autoFocus: c = !1, ...m }, u) => {
+  let i = ["input", "textarea"].find((p) => p === t) ? t : "input";
+  const { controlId: f } = $(x);
+  let a = f || l, h = (r ? "sg-form-control-plaintext" : "sg-form-control") + (e != "" ? " " + e : "") + (o == "color" ? " sg-form-control-color" : "");
+  return /* @__PURE__ */ n(i, { autoFocus: c, ref: u, id: a, type: o, className: h, ...m });
+};
+d.Control = s(H);
+const P = ({ children: t, className: e, id: r, ...l }, o) => {
+  const { controlId: c } = $(x);
+  let m = c || r;
+  return /* @__PURE__ */ n("select", { ref: o, className: `sg-form-select${e ? " " + e : ""}`, id: m, ...l, children: t });
+};
+d.Select = s(P);
+const S = ({ children: t, className: e, controlId: r, ...l }, o) => {
+  const c = j(() => ({ controlId: r }), [r]);
+  return /* @__PURE__ */ n("div", { ref: o, className: `sg-from-group${e ? " " + e : ""}`, ...l, children: /* @__PURE__ */ n(G, { value: c, children: t }) });
+};
+d.Group = s(S);
+const T = ({ children: t, className: e, htmlFor: r }, l) => {
+  const { controlId: o } = $(x);
+  return /* @__PURE__ */ n("label", { ref: l, htmlFor: r || o, className: `sg-form-label${e ? " " + e : ""}`, children: t });
+};
+d.Label = s(T);
+const y = ({
+  classNameContainer: t,
+  containerRef: e,
+  containerId: r,
+  style: l,
+  classNameLabel: o,
+  labelRef: c,
+  label: m,
+  labelId: u,
+  className: i,
+  type: f,
+  id: a,
+  controlId: h,
+  reverse: p = !1,
+  checkStyle: b,
+  ...C
+}, k) => {
+  let g = h || a, F = f === "switch" ? "checkbox" : f;
+  return /* @__PURE__ */ n("div", { ref: e, id: r, style: l, className: `sg-form-check${p ? "-reverse" : ""}${t ? " " + t : ""}${f === "switch" ? " sg-form-switch" : ""}`, children: p ? /* @__PURE__ */ v(w, { children: [
+    /* @__PURE__ */ n("input", { ref: k, type: F, id: g, className: `sg-form-check-input${i ? " " + i : ""}`, ...C }),
+    /* @__PURE__ */ n("label", { ref: c, id: u, htmlFor: g, className: `sg-form-check-label${o ? " " + o : ""}`, children: m })
+  ] }) : /* @__PURE__ */ v(w, { children: [
+    /* @__PURE__ */ n("label", { ref: c, id: u, htmlFor: g, className: `sg-form-check-label${o ? " " + o : ""}`, children: m }),
+    /* @__PURE__ */ n("input", { ref: k, type: F, id: g, className: `sg-form-check-input${i ? " " + i : ""}`, style: b, ...C })
+  ] }) });
+};
+d.Check = s(y);
+const M = ({ children: t, className: e, ...r }, l) => /* @__PURE__ */ n("small", { className: `sg-form-text${e ? " " + e : ""}`, children: t });
+d.Text = s(M);
+export {
+  x as FormContext,
+  d as default
+};

package/dist/InputGroup/index.js

@@ -0,0 +1,7 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const n = e(({ children: r, className: t, ...o }, p) => /* @__PURE__ */ u("div", { ref: p, className: `sg-input-group${t ? " " + t : ""}`, ...o, children: r })), s = ({ children: r, className: t, ...o }, p) => /* @__PURE__ */ u("span", { ref: p, className: `sg-input-group-text${t ? " " + t : ""}`, ...o, children: r });
+n.Text = e(s);
+export {
+  n as default
+};

package/dist/Modal/index.js

@@ -0,0 +1,85 @@
+import { jsx as s, jsxs as w, Fragment as E } from "react/jsx-runtime";
+import { createContext as T, forwardRef as m, useState as M, useEffect as C, useRef as A, useContext as B } from "react";
+import { createPortal as F } from "react-dom";
+import k from "../CloseButton/index.js";
+import P from "../Button/index.js";
+const g = T(!1), H = ({ children: t, value: n }) => /* @__PURE__ */ s(g.Provider, { value: n, children: t }), N = () => B(g), d = m(({
+  children: t,
+  centered: n = !1,
+  size: e = "md",
+  show: o,
+  backdrop: l = "static",
+  onHide: a = "none",
+  className: r,
+  id: i,
+  ...h
+}, b) => {
+  const [f, c] = M(!1);
+  C(() => {
+    c(o);
+  }, [o]);
+  const p = A(null);
+  j(p);
+  let u = typeof o == "boolean" && typeof a == "function" ? void 0 : { show: typeof o == "boolean", onHide: typeof a == "function" };
+  u && console.error(
+    u.show ? null : "The variable 'show' must be used and must be a boolean used to decide when to show the modal!",
+    u.onHide ? null : "The variable 'onHide' must be used and must be a function which is used to set 'show' as the modal gets closed!"
+  );
+  const x = () => {
+    a && a(), c(!1);
+  };
+  C(() => {
+    const y = p.current;
+    y && (f ? y.showModal() : y.close());
+  }, [f]);
+  let v = `sg-modal-tag sg-modal-${e}`;
+  return r && (v += " " + r), (l === "static" || l === "true") && (v += " sg-modal-static"), f ? F(
+    /* @__PURE__ */ s("dialog", { ref: p, className: v, children: /* @__PURE__ */ s(H, { value: a, children: u ? /* @__PURE__ */ w(E, { children: [
+      /* @__PURE__ */ s(d.Header, { closeButton: !0, children: /* @__PURE__ */ s(d.Title, { children: "An Error ocurred!" }) }),
+      /* @__PURE__ */ s(d.Body, { children: /* @__PURE__ */ w("p", { children: [
+        u.show ? null : "The variable 'show' must be used and must be a boolean used to decide when to show the modal!",
+        u.onHide ? null : "The variable 'onHide' must be used and must be a function which is used to set 'show' as the modal gets closed!"
+      ] }) }),
+      /* @__PURE__ */ s(d.Footer, { children: /* @__PURE__ */ s(P, { variant: "danger", type: "button", onClick: x, children: "Close" }) })
+    ] }) : t }) }),
+    document.body
+  ) : null;
+}), $ = m(({ as: t = "", className: n = "", children: e, closeButton: o = !1, onClick: l = "none", ...a }, r) => {
+  let h = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"].find((c) => c === t) ? t : "div";
+  const b = N(), f = (c) => {
+    l != "none" && l(c), b != "none" && b();
+  };
+  return /* @__PURE__ */ w(h, { ref: r, className: `sg-modal-header ${n}`, ...a, children: [
+    e,
+    o ? /* @__PURE__ */ s(k, { variant: !0, onClick: f }) : null
+  ] });
+});
+d.Header = $;
+const S = ({ children: t, as: n = "h4", className: e, ...o }, l) => {
+  let r = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"].find((i) => i === n) ? n : "h4";
+  return /* @__PURE__ */ s(r, { ref: l, className: `sg-modal-title ${e}`, ...o, children: t });
+};
+d.Title = m(S);
+const D = ({ children: t, className: n, ...e }, o) => /* @__PURE__ */ s("div", { ref: o, className: `sg-modal-body ${n}`, ...e, children: t });
+d.Body = m(D);
+const K = ({ children: t, className: n, ...e }, o) => /* @__PURE__ */ s("div", { ref: o, className: `sg-modal-footer ${n}`, ...e, children: t });
+d.Footer = m(K);
+const j = function(t) {
+  C(() => {
+    const n = (e) => {
+      const o = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', l = t.current;
+      if (l) {
+        const a = l.querySelectorAll(o)[0], r = l.querySelectorAll(o), i = r[r.length - 1];
+        if (!(e.key === "Tab" || e.keyCode === 9))
+          return;
+        e.shiftKey ? document.activeElement === a && (i.focus(), e.preventDefault()) : document.activeElement === i && (a.focus(), e.preventDefault());
+      }
+    };
+    return document.addEventListener("keydown", n, !0), function() {
+      document.removeEventListener("keydown", n, !0);
+    };
+  }, [t]);
+};
+export {
+  d as default
+};

package/dist/Nav/index.js

@@ -0,0 +1,14 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { navbarContext as u } from "../NavBar/index.js";
+const l = s(({ children: o, className: n, fill: e, justify: r, as: t = "ul", ...m }, f) => {
+  const p = t;
+  let i = "";
+  return u && (i = "sg-navbar-"), /* @__PURE__ */ a(p, { role: "menubar", ref: f, className: `${n} ${i}nav`, ...m, children: o });
+}), c = ({ children: o, className: n, as: e = "li", ...r }, t) => /* @__PURE__ */ a(e, { role: "none", ref: t, className: `sg-nav-item${n ? " " + n : ""}`, ...r, children: o });
+l.Item = s(c);
+const v = ({ children: o, className: n, as: e = "a", ...r }, t) => /* @__PURE__ */ a(e, { role: "menuitem", ref: t, className: `sg-nav-link${n ? " " + n : ""}`, ...r, children: o });
+l.Link = s(v);
+export {
+  l as default
+};

package/dist/NavBar/index.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as b, forwardRef as v, useMemo as d } from "react";
+const m = b(null), p = ({ children: t, value: n }) => /* @__PURE__ */ e(m.Provider, { value: n, children: t }), c = v(({ children: t, className: n, navbarPrefix: r = "sg-navbar-", ...o }, a) => {
+  const s = d(() => r, [r]);
+  return /* @__PURE__ */ e("nav", { ref: a, className: `sg-navbar${n ? " " + n : ""}`, ...o, children: /* @__PURE__ */ e(p, { value: s, children: t }) });
+}), x = ({ children: t, className: n, href: r = "#", as: o = "a", ...a }, s) => {
+  const u = o || (r && o != "Link" ? "a" : "span");
+  return /* @__PURE__ */ e(u, { ref: s, href: r, className: `sg-navbar-brand${n ? " " + n : ""}`, ...a, children: t });
+};
+c.Brand = v(x);
+const C = ({ children: t, className: n, as: r = "span", ...o }, a) => /* @__PURE__ */ e(r, { ref: a, className: `sg-navbar-text${n ? " " + n : ""}`, ...o, children: t });
+c.Text = v(C);
+export {
+  c as default,
+  m as navbarContext
+};