stargazer-ui 1.0.2 → 1.0.4

package/dist/Overlay/index.js

@@ -1,32 +1,32 @@
 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 { forwardRef as X, useRef as S, 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);
+const q = (l, a, u, c, i = !1) => {
+  let f = document.body, o = l.current, g = a.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), x = o.offsetWidth, m = g.clientHeight, y = g.clientWidth;
+  const p = (C, R, B) => g.getBoundingClientRect()[C] <= B ? R : r[C];
+  let H = 0, v = 0;
+  i || (v = c.clientHeight - 1, H = 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;
+      return r = { top: n - m - v, left: h + x / 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;
+      return r = { top: n + d / 2 - m / 2, left: h + o.offsetWidth + H }, 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;
+      return r = { top: n + d + v, left: h + x / 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;
+      return r = { top: n + d / 2 - m / 2, left: h - y - H }, r;
     default:
-      return { top: n - m, left: h + R / 2 - y / 2 };
+      return { top: n - m, left: h + x / 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;
+}, G = (l, a, u, c) => {
+  let i = a.current.getBoundingClientRect().top, f = window.innerHeight - a.current.getBoundingClientRect().bottom, o = a.current.getBoundingClientRect().left, g = window.innerWidth - a.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";
+      return g <= e ? "left" : o <= e ? "right" : "top";
   } else if (l.current === "bottom") {
     if (f <= n)
-      return a <= e ? "left" : o <= e ? "right" : "bottom";
+      return g <= e ? "left" : o <= e ? "right" : "bottom";
   } else if (l.current === "left" || l.current === "right") {
     if (i >= n)
       return "top";
@@ -36,20 +36,20 @@ const q = (l, g, u, c, i = !1) => {
       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)));
+}, et = X(({ children: l, overlay: a, show: u, onToggle: c, position: i = "auto", trigger: f = "click", defaultShow: o = !1 }, g) => {
+  const e = S(), n = S(), d = S(), [h, x] = w(""), [m, y] = w(""), [p, H] = w(o), v = S(p), r = (t) => {
+    v.current = t, H(t);
+  }, [C, R] = w(i === "auto" ? "top" : i), B = S(C), W = (t) => {
+    B.current = t, R(t);
+  }, [k, A] = w(!1), [L, O] = w(!1), [J, F] = w(!0), P = Array.isArray(f) ? f : [f], E = (t, s, b) => {
+    s.current && (y(q(t, s, B.current, b.current)), x(q(t, b, B.current, b.current, !0)));
   }, I = () => {
-    if (C.current && i === "auto") {
+    if (v.current && i === "auto") {
       let t = G(B, e, n, d);
       W(t);
     }
   }, z = () => {
-    E(e, n, d), C.current;
+    E(e, n, d), v.current;
   }, K = (t) => {
     if (L && J) {
       F(!1);
@@ -64,36 +64,36 @@ const q = (l, g, u, c, i = !1) => {
     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")) {
+    if (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({
+      y({
         top: e.current.getBoundingClientRect().top - (s != "fixed" ? t.getBoundingClientRect().top : 0),
         left: e.current.getBoundingClientRect().left - (s != "fixed" ? t.getBoundingClientRect().left : 0)
-      }), R({
+      }), x({
         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() {
+  }, [u, n, e, C]), $(() => (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: [
+  return /* @__PURE__ */ M("div", { ref: g, 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
+      onClick: P.find((t) => t === "click") ? K : null,
+      onMouseOver: P.find((t) => t === "hover") ? Q : null,
+      onMouseLeave: P.find((t) => t === "hover") ? D : null,
+      onFocus: P.find((t) => t === "focus") ? T : null,
+      onBlur: P.find((t) => t === "focus") ? D : null
     }),
     u ? Z(
       /* @__PURE__ */ M(U, { children: [
@@ -102,7 +102,7 @@ const q = (l, g, u, c, i = !1) => {
           {
             ref: n,
             style: { maxWidth: "100%", maxHeight: "100%", position: j(e), top: m.top, left: m.left, zIndex: "1010" },
-            children: g
+            children: a
           }
         ),
         /* @__PURE__ */ N(
@@ -111,7 +111,7 @@ const q = (l, g, u, c, i = !1) => {
             id: "sg-overlay-arrow",
             ref: d,
             "aria-hidden": !0,
-            className: `sg-overlay-arrow${v ? " overlay-position-" + v : ""}`,
+            className: `sg-overlay-arrow${C ? " overlay-position-" + C : ""}`,
             style: { position: j(e), top: h.top, left: h.left }
           }
         )

package/dist/Popout/index.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+import { BaseDialogType, BaseDivType, BaseHeadingType, BaseParagraphType, BaseSpanType } from "../BaseTypes";
+export type PopoutType = {
+    children: React.ReactNode;
+    initialPosition?: {
+        top?: number;
+        bottom?: number;
+        right?: number;
+        left?: number;
+    };
+    id?: string;
+    resize?: boolean;
+    move?: boolean;
+} & BaseDialogType;
+export type PopoutHeaderType = {
+    children: React.ReactNode;
+    className?: string;
+    as?: React.ElementType;
+} & (BaseDivType | BaseHeadingType | BaseSpanType);
+export type PopoutTitleType = {
+    children: React.ReactNode;
+    className?: string;
+    as?: React.ElementType;
+} & BaseHeadingType;
+export type PopoutBodyType = {
+    children: React.ReactNode;
+    className?: string;
+} & BaseDivType;
+export type PopoutTextType = {
+    children: React.ReactNode;
+    className?: string;
+} & BaseParagraphType;
+export type PopoutFooterType = {
+    children: React.ReactNode;
+    className?: string;
+} & BaseDivType;
+declare const _default: React.ForwardRefExoticComponent<Omit<PopoutType, "ref"> & React.RefAttributes<HTMLDialogElement>> & {
+    Header: React.ForwardRefExoticComponent<(Omit<{
+        children: React.ReactNode;
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> | Omit<{
+        children: React.ReactNode;
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement>, "ref"> | Omit<{
+        children: React.ReactNode;
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "ref">) & React.RefAttributes<HTMLDivElement | HTMLHeadingElement | HTMLSpanElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<PopoutTitleType, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<PopoutBodyType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Text: React.ForwardRefExoticComponent<Omit<PopoutTextType, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<PopoutFooterType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;

package/dist/Popout/index.js

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

package/dist/Spinner/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type SpinnerType = {
+    label: string;
+    size?: string;
+    color?: string;
+    className?: string;
+    controlId?: string;
+};
+declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerType & import("react").RefAttributes<HTMLDivElement>>;
+export default Spinner;

package/dist/Spinner/index.js

@@ -0,0 +1,9 @@
+import { jsxs as n, Fragment as o, jsx as l } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+const p = h(({ size: e = "1em", color: s = "white", label: a, className: r, controlId: i, ...t }, d) => /* @__PURE__ */ n(o, { children: [
+  /* @__PURE__ */ l("div", { "aria-labelledby": i, role: "status", ref: d, className: `sg-spinner${r ? " " + r : ""}`, style: { width: e, height: e, borderColor: s }, ...t }),
+  /* @__PURE__ */ l("label", { id: i, className: "sg-visually-hidden", children: a })
+] }));
+export {
+  p as default
+};

package/dist/Table/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseTableType } from "../BaseTypes";
+export type TableType = {
+    children: React.ReactNode;
+    size?: string;
+    className?: string;
+} & BaseTableType;
+declare const Table: React.ForwardRefExoticComponent<Omit<TableType, "ref"> & React.RefAttributes<HTMLTableElement>>;
+export default Table;

package/dist/Table/index.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+const p = m(({ children: t, size: s = "lg", className: e, ...r }, a) => {
+  let l = `sg-table${e ? " " + e : ""}${s === "sm" ? " sg-table-sm" : ""}`;
+  return /* @__PURE__ */ o("table", { ref: a, className: l, ...r, children: t });
+});
+export {
+  p as default
+};

package/dist/Tabs/index.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { BaseButtonType, BaseDivType } from "../BaseTypes";
+export type TabsContextType = {
+    activeTab: string;
+    setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+    controlId: string;
+    activeClass: string;
+};
+export type TabsContext = {
+    children: React.ReactNode;
+    className?: string;
+    controlId: string;
+    activeClassName?: string;
+    defaultActive: string;
+} & BaseDivType;
+export type TabsControlsType = {
+    children: React.ReactNode;
+    className?: string;
+} & BaseDivType;
+export type TabsButtonType = {
+    children: React.ReactNode;
+    className?: string;
+    onClick?: Function;
+    tabId: string;
+    id?: string;
+} & BaseButtonType;
+export type TabsContentType = {
+    children: React.ReactNode;
+    className?: string;
+} & BaseDivType;
+export type TabsPageType = {
+    children: React.ReactNode;
+    className?: string;
+    tabId: string;
+} & BaseDivType;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<TabsContext, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Controls: import("react").ForwardRefExoticComponent<Omit<TabsControlsType, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Button: import("react").ForwardRefExoticComponent<Omit<TabsButtonType, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<TabsContentType, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Page: import("react").ForwardRefExoticComponent<Omit<TabsPageType, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;

package/dist/Tabs/index.js

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