stargazer-ui 1.0.2 → 1.0.3

package/dist/BaseTypes.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type BaseAnchorType = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+export type BaseButtonType = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export type BaseDivType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type BaseFormType = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
+export type BaseHeadingType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+export type BaseInputType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export type BaseHrType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
+export type BaseLabelType = React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+export type BaseLItemType = React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+export type BaseParagraphType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
+export type BaseSelectType = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+export type BaseSmallType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+export type BaseSpanType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+export type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;

package/dist/BaseTypes.js

@@ -0,0 +1 @@
+

package/dist/Button/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseButtonType } from "../BaseTypes";
+export type ButtonType = {
+    children: typeof React.Children;
+    variant?: string;
+    className?: string;
+} & BaseButtonType;
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonType, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/Button/index.js

@@ -1,6 +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 }));
+const s = f(({ children: o, variant: r = "primary", className: t, ...n }, u) => /* @__PURE__ */ e("button", { ref: u, type: "button", className: `sg-button sg-button-${r}${t == null ? "" : " " + t}`, ...n, children: o }));
 export {
   s as default
 };

package/dist/Card/index.d.ts

@@ -0,0 +1,92 @@
+import React from "react";
+import { BaseDivType, BaseHeadingType, BaseSpanType, BaseParagraphType } from "../BaseTypes";
+export type CardType = {
+    children: typeof React.Children;
+    className?: string;
+} & BaseDivType;
+export type CardHeaderPossible = BaseDivType | BaseSpanType | BaseHeadingType;
+export type CardHeaderType = {
+    children: typeof React.Children;
+    className?: string;
+    as?: React.ElementType;
+} & CardHeaderPossible;
+export type CardBodyType = {
+    children: typeof React.Children;
+    className?: string;
+} & BaseDivType;
+export type CardTextType = {
+    children: typeof React.Children;
+    className?: string;
+} & BaseParagraphType;
+export type CardFooterType = {
+    children: typeof React.Children;
+    className?: string;
+} & BaseDivType;
+declare const _default: React.ForwardRefExoticComponent<Omit<CardType, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<(Omit<{
+        children: {
+            map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
+            forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
+            count(children: any): number;
+            only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
+            toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+        };
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> | Omit<{
+        children: {
+            map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
+            forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
+            count(children: any): number;
+            only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
+            toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+        };
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement>, "ref"> | Omit<{
+        children: {
+            map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
+            forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
+            count(children: any): number;
+            only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
+            toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+        };
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "ref">) & React.RefAttributes<HTMLDivElement | HTMLHeadingElement | HTMLSpanElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<CardBodyType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<(Omit<{
+        children: {
+            map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
+            forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
+            count(children: any): number;
+            only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
+            toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+        };
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> | Omit<{
+        children: {
+            map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
+            forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
+            count(children: any): number;
+            only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
+            toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+        };
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement>, "ref"> | Omit<{
+        children: {
+            map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
+            forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
+            count(children: any): number;
+            only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
+            toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+        };
+        className?: string | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    } & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "ref">) & React.RefAttributes<HTMLHeadingElement>>;
+    Text: React.ForwardRefExoticComponent<Omit<CardTextType, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<CardFooterType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;

package/dist/Card/index.js

@@ -1,32 +1,18 @@
-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 });
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+const h = d(({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a("div", { ref: s, className: "sg-card " + t, ...r, children: e })), l = d(({ as: e = "div", className: t, children: r, ...s }, o) => {
+  let n = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"].find((c) => c === e) ? e : "div";
+  return /* @__PURE__ */ a(n, { ref: o, className: `sg-card-header ${t}`, ...s, children: r });
+}), m = d(({ as: e = "h5", className: t, children: r, ...s }, o) => {
+  let n = ["h1", "h2", "h3", "h4", "h5", "h6"].find((c) => c === e) ? e : "h5";
+  return /* @__PURE__ */ a(n, { ref: o, className: t, ...s, children: r });
+}), v = d(({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a("div", { ref: s, className: `sg-card-body ${t}`, ...r, children: e })), f = d(({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a("p", { ref: s, className: `sg-card-text ${t}`, ...r, children: e })), p = d(({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a("div", { ref: s, className: `sg-card-footer ${t}`, ...r, children: e })), x = Object.assign(h, {
+  Header: l,
+  Body: v,
+  Title: m,
+  Text: f,
+  Footer: p
 });
-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
+  x as default
 };

package/dist/CloseButton/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BaseButtonType } from "../BaseTypes";
+export type CloseButtonType = {
+    className?: string;
+    variant?: boolean;
+} & BaseButtonType;
+declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<CloseButtonType, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default CloseButton;

package/dist/Dropdown/index.d.ts

@@ -0,0 +1,108 @@
+import React from "react";
+import { BaseDivType, BaseAnchorType, BaseButtonType, BaseUListType, BaseHrType } from "../BaseTypes";
+export type DropdownContextType = {
+    align: string;
+    drop: string;
+    showInternal: boolean;
+    handleToggle: Function;
+    placement: string;
+    directionClasses?: {
+        down?: string;
+        'down-centered'?: string;
+        up?: string;
+        'up-centered'?: string;
+        end?: string;
+        start?: string;
+    };
+    controlId: string;
+    activeDescendant: {
+        case: string;
+    };
+    setActiveDescendant: React.Dispatch<React.SetStateAction<{
+        case: string;
+    }>>;
+};
+export declare const DropdownContext: React.Context<DropdownContextType | null>;
+export declare const useDropdownContext: () => DropdownContextType;
+export type DropdownType = {
+    children: React.ReactNode;
+    className?: string;
+    onSelect?: Function;
+    onToggle?: Function;
+    controlId: string;
+    drop?: string;
+    align?: string;
+    autoClose?: boolean;
+    show?: boolean;
+} & BaseDivType;
+export type DropdownToggleType = {
+    children: React.ReactNode;
+    className?: string;
+    navDropdown?: boolean;
+    as?: React.ElementType;
+    variant?: string;
+} & (BaseAnchorType | BaseButtonType);
+export declare const Toggle: React.ForwardRefExoticComponent<(Omit<{
+    children: React.ReactNode;
+    className?: string | undefined;
+    navDropdown?: boolean | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    variant?: string | undefined;
+} & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>, "ref"> | Omit<{
+    children: React.ReactNode;
+    className?: string | undefined;
+    navDropdown?: boolean | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    variant?: string | undefined;
+} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export type DropdownMenuType = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties | undefined;
+} & BaseUListType;
+export declare const Menu: React.ForwardRefExoticComponent<Omit<DropdownMenuType, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export type DropdownItemType = {
+    children: React.ReactNode;
+    as?: React.ElementType;
+    className?: string;
+} & (BaseAnchorType | BaseButtonType);
+export declare const Item: React.ForwardRefExoticComponent<(Omit<{
+    children: React.ReactNode;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    className?: string | undefined;
+} & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>, "ref"> | Omit<{
+    children: React.ReactNode;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    className?: string | undefined;
+} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export type DropdownDividerType = {
+    className?: string;
+} & BaseHrType;
+export declare const Divider: React.ForwardRefExoticComponent<Omit<DropdownDividerType, "ref"> & React.RefAttributes<HTMLHRElement>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<DropdownType, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Toggle: React.ForwardRefExoticComponent<(Omit<{
+        children: React.ReactNode;
+        className?: string | undefined;
+        navDropdown?: boolean | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+        variant?: string | undefined;
+    } & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>, "ref"> | Omit<{
+        children: React.ReactNode;
+        className?: string | undefined;
+        navDropdown?: boolean | undefined;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+        variant?: string | undefined;
+    } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    Menu: React.ForwardRefExoticComponent<Omit<DropdownMenuType, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<(Omit<{
+        children: React.ReactNode;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+        className?: string | undefined;
+    } & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>, "ref"> | Omit<{
+        children: React.ReactNode;
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+        className?: string | undefined;
+    } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    Divider: React.ForwardRefExoticComponent<Omit<DropdownDividerType, "ref"> & React.RefAttributes<HTMLHRElement>>;
+};
+export default _default;

package/dist/Dropdown/index.js

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

package/dist/Form/index.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import { BaseDivType, BaseFormType, BaseInputType, BaseLabelType, BaseSelectType, BaseSmallType } from "../BaseTypes";
+export type FormContextType = {
+    controlId: string;
+};
+export declare const FormContext: React.Context<FormContextType | null>;
+export declare const useFormContext: () => FormContextType;
+export type FormType = {
+    children: React.ReactNode;
+} & BaseFormType;
+export type FormControlType = {
+    as?: React.ElementType;
+    className?: string;
+    plaintext?: boolean;
+    id?: string;
+    type?: string;
+    autoFocus?: boolean;
+} & BaseInputType;
+export type FormSelectType = {
+    children: React.ReactNode;
+    className?: string;
+    id?: string;
+} & BaseSelectType;
+export type FormGroupType = {
+    children: React.ReactNode;
+    className?: string;
+    controlId: string;
+} & BaseDivType;
+export type FormLabelType = {
+    children: React.ReactNode;
+    className?: string;
+    htmlFor?: string;
+} & BaseLabelType;
+export type FormCheckType = {
+    classNameContainer?: string;
+    containerRef?: React.LegacyRef<HTMLDivElement>;
+    containerId?: string;
+    style?: React.CSSProperties;
+    classNameLabel?: string;
+    labelRef?: React.LegacyRef<HTMLLabelElement>;
+    label?: string;
+    labelId?: string;
+    className?: string;
+    type?: string;
+    controlId?: string;
+    reverse?: boolean;
+    checkStyle?: React.CSSProperties;
+} & BaseInputType;
+export type FormTextType = {
+    children: React.ReactNode;
+    className?: string;
+} & BaseSmallType;
+declare const _default: React.ForwardRefExoticComponent<Omit<FormType, "ref"> & React.RefAttributes<HTMLFormElement>> & {
+    Control: React.ForwardRefExoticComponent<Omit<FormControlType, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    Select: React.ForwardRefExoticComponent<Omit<FormSelectType, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<FormGroupType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<FormLabelType, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+    Check: React.ForwardRefExoticComponent<Omit<FormCheckType, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    Text: React.ForwardRefExoticComponent<Omit<FormTextType, "ref"> & React.RefAttributes<HTMLElement>>;
+};
+export default _default;

package/dist/Form/index.js

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

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/vite-env.d.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stargazer-ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React component library made by Stargazer Works",
   "main": "dist/main.js",
   "files": [
@@ -9,7 +9,7 @@
   "scripts": {
     "test": "\"echo \\\"Error: no test specified\\\" && exit 1\"",
     "dev": "vite --config vite.config.js --port 5000",
-    "build": "vite build --config vite.config.js"
+    "build": "tsc && vite build --config vite.config.js"
   },
   "type": "module",
   "engines": {
@@ -39,11 +39,20 @@
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.2.1",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.35",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
     "ally.js": "^1.4.1",
     "glob": "^10.3.10",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
+    "typescript": "^5.2.2",
     "vite": "^5.1.4",
     "vite-plugin-dts": "^3.7.3"
   }