stargazer-ui 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BaseTypes.d.ts +15 -0
- package/dist/BaseTypes.js +1 -0
- package/dist/Button/index.d.ts +9 -0
- package/dist/Button/index.js +6 -0
- package/dist/Card/index.d.ts +92 -0
- package/dist/Card/index.js +18 -0
- package/dist/CloseButton/index.d.ts +8 -0
- package/dist/CloseButton/index.js +6 -0
- package/dist/Dropdown/index.d.ts +108 -0
- package/dist/Dropdown/index.js +204 -0
- package/dist/FloatingLabel/index.js +13 -0
- package/dist/Form/index.d.ts +61 -0
- package/dist/Form/index.js +62 -0
- package/dist/InputGroup/index.js +7 -0
- package/dist/Modal/index.js +85 -0
- package/dist/Nav/index.js +14 -0
- package/dist/NavBar/index.js +16 -0
- package/dist/NavDropdown/index.js +850 -0
- package/dist/Overlay/index.js +125 -0
- package/dist/Popout/index.js +85 -0
- package/dist/Tabs/index.js +69 -0
- package/dist/ToggleButton/index.js +11 -0
- package/dist/main.js +30 -0
- package/dist/stylesheets/stargazerui.css +113 -62
- package/dist/stylesheets/stargazerui.css.map +1 -1
- package/dist/vite-env.d.js +1 -0
- package/package.json +22 -12
- package/dist/ui.es.js +0 -1983
- package/dist/ui.umd.js +0 -33
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type BaseAnchorType = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
|
|
3
|
+
export type BaseButtonType = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
|
4
|
+
export type BaseDivType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
5
|
+
export type BaseFormType = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
|
|
6
|
+
export type BaseHeadingType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
|
7
|
+
export type BaseInputType = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
8
|
+
export type BaseHrType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
|
|
9
|
+
export type BaseLabelType = React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
|
|
10
|
+
export type BaseLItemType = React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
|
|
11
|
+
export type BaseParagraphType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
|
|
12
|
+
export type BaseSelectType = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
|
|
13
|
+
export type BaseSmallType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
14
|
+
export type BaseSpanType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
|
|
15
|
+
export type BaseUListType = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BaseButtonType } from "../BaseTypes";
|
|
3
|
+
export type ButtonType = {
|
|
4
|
+
children: typeof React.Children;
|
|
5
|
+
variant?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
} & BaseButtonType;
|
|
8
|
+
declare const Button: React.ForwardRefExoticComponent<Omit<ButtonType, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
export default Button;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as f } from "react";
|
|
3
|
+
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 }));
|
|
4
|
+
export {
|
|
5
|
+
s as default
|
|
6
|
+
};
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BaseDivType, BaseHeadingType, BaseSpanType, BaseParagraphType } from "../BaseTypes";
|
|
3
|
+
export type CardType = {
|
|
4
|
+
children: typeof React.Children;
|
|
5
|
+
className?: string;
|
|
6
|
+
} & BaseDivType;
|
|
7
|
+
export type CardHeaderPossible = BaseDivType | BaseSpanType | BaseHeadingType;
|
|
8
|
+
export type CardHeaderType = {
|
|
9
|
+
children: typeof React.Children;
|
|
10
|
+
className?: string;
|
|
11
|
+
as?: React.ElementType;
|
|
12
|
+
} & CardHeaderPossible;
|
|
13
|
+
export type CardBodyType = {
|
|
14
|
+
children: typeof React.Children;
|
|
15
|
+
className?: string;
|
|
16
|
+
} & BaseDivType;
|
|
17
|
+
export type CardTextType = {
|
|
18
|
+
children: typeof React.Children;
|
|
19
|
+
className?: string;
|
|
20
|
+
} & BaseParagraphType;
|
|
21
|
+
export type CardFooterType = {
|
|
22
|
+
children: typeof React.Children;
|
|
23
|
+
className?: string;
|
|
24
|
+
} & BaseDivType;
|
|
25
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<CardType, "ref"> & React.RefAttributes<HTMLDivElement>> & {
|
|
26
|
+
Header: React.ForwardRefExoticComponent<(Omit<{
|
|
27
|
+
children: {
|
|
28
|
+
map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
|
|
29
|
+
forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
|
|
30
|
+
count(children: any): number;
|
|
31
|
+
only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
|
|
32
|
+
toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
|
|
33
|
+
};
|
|
34
|
+
className?: string | undefined;
|
|
35
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
36
|
+
} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> | Omit<{
|
|
37
|
+
children: {
|
|
38
|
+
map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
|
|
39
|
+
forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
|
|
40
|
+
count(children: any): number;
|
|
41
|
+
only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
|
|
42
|
+
toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
|
|
43
|
+
};
|
|
44
|
+
className?: string | undefined;
|
|
45
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
46
|
+
} & React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement>, "ref"> | Omit<{
|
|
47
|
+
children: {
|
|
48
|
+
map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
|
|
49
|
+
forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
|
|
50
|
+
count(children: any): number;
|
|
51
|
+
only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
|
|
52
|
+
toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
|
|
53
|
+
};
|
|
54
|
+
className?: string | undefined;
|
|
55
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
56
|
+
} & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "ref">) & React.RefAttributes<HTMLDivElement | HTMLHeadingElement | HTMLSpanElement>>;
|
|
57
|
+
Body: React.ForwardRefExoticComponent<Omit<CardBodyType, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
58
|
+
Title: React.ForwardRefExoticComponent<(Omit<{
|
|
59
|
+
children: {
|
|
60
|
+
map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
|
|
61
|
+
forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
|
|
62
|
+
count(children: any): number;
|
|
63
|
+
only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
|
|
64
|
+
toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
|
|
65
|
+
};
|
|
66
|
+
className?: string | undefined;
|
|
67
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
68
|
+
} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> | Omit<{
|
|
69
|
+
children: {
|
|
70
|
+
map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
|
|
71
|
+
forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
|
|
72
|
+
count(children: any): number;
|
|
73
|
+
only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
|
|
74
|
+
toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
|
|
75
|
+
};
|
|
76
|
+
className?: string | undefined;
|
|
77
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
78
|
+
} & React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement>, "ref"> | Omit<{
|
|
79
|
+
children: {
|
|
80
|
+
map<T, C>(children: C | readonly C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Exclude<T, boolean | null | undefined>[];
|
|
81
|
+
forEach<C_1>(children: C_1 | readonly C_1[], fn: (child: C_1, index: number) => void): void;
|
|
82
|
+
count(children: any): number;
|
|
83
|
+
only<C_2>(children: C_2): C_2 extends any[] ? never : C_2;
|
|
84
|
+
toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
|
|
85
|
+
};
|
|
86
|
+
className?: string | undefined;
|
|
87
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
88
|
+
} & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, "ref">) & React.RefAttributes<HTMLHeadingElement>>;
|
|
89
|
+
Text: React.ForwardRefExoticComponent<Omit<CardTextType, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
90
|
+
Footer: React.ForwardRefExoticComponent<Omit<CardFooterType, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
91
|
+
};
|
|
92
|
+
export default _default;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as d } from "react";
|
|
3
|
+
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) => {
|
|
4
|
+
let n = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"].find((c) => c === e) ? e : "div";
|
|
5
|
+
return /* @__PURE__ */ a(n, { ref: o, className: `sg-card-header ${t}`, ...s, children: r });
|
|
6
|
+
}), m = d(({ as: e = "h5", className: t, children: r, ...s }, o) => {
|
|
7
|
+
let n = ["h1", "h2", "h3", "h4", "h5", "h6"].find((c) => c === e) ? e : "h5";
|
|
8
|
+
return /* @__PURE__ */ a(n, { ref: o, className: t, ...s, children: r });
|
|
9
|
+
}), 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, {
|
|
10
|
+
Header: l,
|
|
11
|
+
Body: v,
|
|
12
|
+
Title: m,
|
|
13
|
+
Text: f,
|
|
14
|
+
Footer: p
|
|
15
|
+
});
|
|
16
|
+
export {
|
|
17
|
+
x as default
|
|
18
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseButtonType } from "../BaseTypes";
|
|
3
|
+
export type CloseButtonType = {
|
|
4
|
+
className?: string;
|
|
5
|
+
variant?: boolean;
|
|
6
|
+
} & BaseButtonType;
|
|
7
|
+
declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<CloseButtonType, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
8
|
+
export default CloseButton;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as a } from "react";
|
|
3
|
+
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" }) }));
|
|
4
|
+
export {
|
|
5
|
+
c as default
|
|
6
|
+
};
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BaseDivType, BaseAnchorType, BaseButtonType, BaseUListType, BaseHrType } from "../BaseTypes";
|
|
3
|
+
export type DropdownContextType = {
|
|
4
|
+
align: string;
|
|
5
|
+
drop: string;
|
|
6
|
+
showInternal: boolean;
|
|
7
|
+
handleToggle: Function;
|
|
8
|
+
placement: string;
|
|
9
|
+
directionClasses?: {
|
|
10
|
+
down?: string;
|
|
11
|
+
'down-centered'?: string;
|
|
12
|
+
up?: string;
|
|
13
|
+
'up-centered'?: string;
|
|
14
|
+
end?: string;
|
|
15
|
+
start?: string;
|
|
16
|
+
};
|
|
17
|
+
controlId: string;
|
|
18
|
+
activeDescendant: {
|
|
19
|
+
case: string;
|
|
20
|
+
};
|
|
21
|
+
setActiveDescendant: React.Dispatch<React.SetStateAction<{
|
|
22
|
+
case: string;
|
|
23
|
+
}>>;
|
|
24
|
+
};
|
|
25
|
+
export declare const DropdownContext: React.Context<DropdownContextType | null>;
|
|
26
|
+
export declare const useDropdownContext: () => DropdownContextType;
|
|
27
|
+
export type DropdownType = {
|
|
28
|
+
children: React.ReactNode;
|
|
29
|
+
className?: string;
|
|
30
|
+
onSelect?: Function;
|
|
31
|
+
onToggle?: Function;
|
|
32
|
+
controlId: string;
|
|
33
|
+
drop?: string;
|
|
34
|
+
align?: string;
|
|
35
|
+
autoClose?: boolean;
|
|
36
|
+
show?: boolean;
|
|
37
|
+
} & BaseDivType;
|
|
38
|
+
export type DropdownToggleType = {
|
|
39
|
+
children: React.ReactNode;
|
|
40
|
+
className?: string;
|
|
41
|
+
navDropdown?: boolean;
|
|
42
|
+
as?: React.ElementType;
|
|
43
|
+
variant?: string;
|
|
44
|
+
} & (BaseAnchorType | BaseButtonType);
|
|
45
|
+
export declare const Toggle: React.ForwardRefExoticComponent<(Omit<{
|
|
46
|
+
children: React.ReactNode;
|
|
47
|
+
className?: string | undefined;
|
|
48
|
+
navDropdown?: boolean | undefined;
|
|
49
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
50
|
+
variant?: string | undefined;
|
|
51
|
+
} & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>, "ref"> | Omit<{
|
|
52
|
+
children: React.ReactNode;
|
|
53
|
+
className?: string | undefined;
|
|
54
|
+
navDropdown?: boolean | undefined;
|
|
55
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
56
|
+
variant?: string | undefined;
|
|
57
|
+
} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
58
|
+
export type DropdownMenuType = {
|
|
59
|
+
children: React.ReactNode;
|
|
60
|
+
className?: string;
|
|
61
|
+
style?: React.CSSProperties | undefined;
|
|
62
|
+
} & BaseUListType;
|
|
63
|
+
export declare const Menu: React.ForwardRefExoticComponent<Omit<DropdownMenuType, "ref"> & React.RefAttributes<HTMLUListElement>>;
|
|
64
|
+
export type DropdownItemType = {
|
|
65
|
+
children: React.ReactNode;
|
|
66
|
+
as?: React.ElementType;
|
|
67
|
+
className?: string;
|
|
68
|
+
} & (BaseAnchorType | BaseButtonType);
|
|
69
|
+
export declare const Item: React.ForwardRefExoticComponent<(Omit<{
|
|
70
|
+
children: React.ReactNode;
|
|
71
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
72
|
+
className?: string | undefined;
|
|
73
|
+
} & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>, "ref"> | Omit<{
|
|
74
|
+
children: React.ReactNode;
|
|
75
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
76
|
+
className?: string | undefined;
|
|
77
|
+
} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
78
|
+
export type DropdownDividerType = {
|
|
79
|
+
className?: string;
|
|
80
|
+
} & BaseHrType;
|
|
81
|
+
export declare const Divider: React.ForwardRefExoticComponent<Omit<DropdownDividerType, "ref"> & React.RefAttributes<HTMLHRElement>>;
|
|
82
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<DropdownType, "ref"> & React.RefAttributes<HTMLDivElement>> & {
|
|
83
|
+
Toggle: React.ForwardRefExoticComponent<(Omit<{
|
|
84
|
+
children: React.ReactNode;
|
|
85
|
+
className?: string | undefined;
|
|
86
|
+
navDropdown?: boolean | undefined;
|
|
87
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
88
|
+
variant?: string | undefined;
|
|
89
|
+
} & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>, "ref"> | Omit<{
|
|
90
|
+
children: React.ReactNode;
|
|
91
|
+
className?: string | undefined;
|
|
92
|
+
navDropdown?: boolean | undefined;
|
|
93
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
94
|
+
variant?: string | undefined;
|
|
95
|
+
} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
96
|
+
Menu: React.ForwardRefExoticComponent<Omit<DropdownMenuType, "ref"> & React.RefAttributes<HTMLUListElement>>;
|
|
97
|
+
Item: React.ForwardRefExoticComponent<(Omit<{
|
|
98
|
+
children: React.ReactNode;
|
|
99
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
100
|
+
className?: string | undefined;
|
|
101
|
+
} & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>, "ref"> | Omit<{
|
|
102
|
+
children: React.ReactNode;
|
|
103
|
+
as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
104
|
+
className?: string | undefined;
|
|
105
|
+
} & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
106
|
+
Divider: React.ForwardRefExoticComponent<Omit<DropdownDividerType, "ref"> & React.RefAttributes<HTMLHRElement>>;
|
|
107
|
+
};
|
|
108
|
+
export default _default;
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { jsx as v } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as D, forwardRef as E, useState as y, useMemo as $, useEffect as C, useLayoutEffect as A, useContext as P } from "react";
|
|
3
|
+
const L = (d, o, r = !1) => {
|
|
4
|
+
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";
|
|
5
|
+
let n = d ? h : i;
|
|
6
|
+
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;
|
|
7
|
+
}, k = (d, o = "") => {
|
|
8
|
+
let r = d.target, u = !0, m = !1;
|
|
9
|
+
for (; u; )
|
|
10
|
+
r.id != o + "-menu" ? r = r.parentElement : (m = !0, u = !1), r.id === "root" && (u = !1, m = !1);
|
|
11
|
+
return m;
|
|
12
|
+
}, I = D(null), M = ({ children: d, value: o }) => /* @__PURE__ */ v(I.Provider, { value: o, children: d }), x = () => {
|
|
13
|
+
const d = P(I);
|
|
14
|
+
if (!d)
|
|
15
|
+
throw new Error(
|
|
16
|
+
"useDropdownContext has to be used within DropdownContextProvider!"
|
|
17
|
+
);
|
|
18
|
+
return d;
|
|
19
|
+
}, O = E(({
|
|
20
|
+
children: d,
|
|
21
|
+
className: o,
|
|
22
|
+
onSelect: r,
|
|
23
|
+
onToggle: u,
|
|
24
|
+
controlId: m,
|
|
25
|
+
drop: i = "down",
|
|
26
|
+
align: h = "start",
|
|
27
|
+
autoClose: g = !0,
|
|
28
|
+
show: a = "default",
|
|
29
|
+
...w
|
|
30
|
+
}, l) => {
|
|
31
|
+
const [n, e] = y(a && !1), [f, b] = y({ case: "" }), c = (B) => {
|
|
32
|
+
B.stopPropagation(), e((S) => !S);
|
|
33
|
+
}, s = L(h === "end", i), p = $(() => ({
|
|
34
|
+
align: h,
|
|
35
|
+
drop: i,
|
|
36
|
+
showInternal: a != "default" && u ? a : n,
|
|
37
|
+
handleToggle: a != "default" && u ? u : c,
|
|
38
|
+
placement: s,
|
|
39
|
+
directionClasses: {
|
|
40
|
+
down: "dropdown",
|
|
41
|
+
"down-centered": "dropdown-center",
|
|
42
|
+
up: "dropup",
|
|
43
|
+
"up-centered": "dropup-center dropup",
|
|
44
|
+
end: "dropend",
|
|
45
|
+
start: "dropstart"
|
|
46
|
+
},
|
|
47
|
+
controlId: m,
|
|
48
|
+
activeDescendant: f,
|
|
49
|
+
setActiveDescendant: b
|
|
50
|
+
}), [h, i, a, n, u, s, m, f, b]);
|
|
51
|
+
return /* @__PURE__ */ v("div", { id: m + "-wrapper", ref: l, className: `sg-dropdown${o ? " " + o : ""}`, ...w, children: /* @__PURE__ */ v(M, { value: p, children: d }) });
|
|
52
|
+
}), q = E(({ children: d, className: o, navDropdown: r = !1, as: u = "button", variant: m = "primary", ...i }, h) => {
|
|
53
|
+
const { controlId: g, handleToggle: a, setActiveDescendant: w, showInternal: l } = x(), n = u, e = (t) => {
|
|
54
|
+
let s = !1;
|
|
55
|
+
switch (console.log(t.key), t.key) {
|
|
56
|
+
case "ArrowDown":
|
|
57
|
+
s = !0, l ? w((p) => ({ ...p, case: "next" })) : (a(t), w((p) => ({ ...p, case: "first" })));
|
|
58
|
+
break;
|
|
59
|
+
case "ArrowUp":
|
|
60
|
+
s = !0, l ? w((p) => ({ ...p, case: "previous" })) : (a(t), w((p) => ({ ...p, case: "last" })));
|
|
61
|
+
break;
|
|
62
|
+
case "Home":
|
|
63
|
+
s = !0, l && w((p) => ({ ...p, case: "first" }));
|
|
64
|
+
break;
|
|
65
|
+
case "End":
|
|
66
|
+
s = !0, l && w((p) => ({ ...p, case: "last" }));
|
|
67
|
+
break;
|
|
68
|
+
case "Tab":
|
|
69
|
+
l && a(t);
|
|
70
|
+
break;
|
|
71
|
+
case "Escape":
|
|
72
|
+
s = !0, l && a(t);
|
|
73
|
+
break;
|
|
74
|
+
case "Enter":
|
|
75
|
+
case " ":
|
|
76
|
+
if (l) {
|
|
77
|
+
s = !0, document.querySelector(".sg-dropdown-item-visual-focus").click(), a(t);
|
|
78
|
+
break;
|
|
79
|
+
} else {
|
|
80
|
+
w((p) => ({ ...p, case: "first" }));
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
s && (t.stopPropagation(), t.preventDefault());
|
|
85
|
+
}, f = (t) => {
|
|
86
|
+
if (l && t.target.id !== g) {
|
|
87
|
+
if (!k(t, g))
|
|
88
|
+
a(t);
|
|
89
|
+
else if (k(t, g)) {
|
|
90
|
+
a(t);
|
|
91
|
+
const s = document.getElementById(g);
|
|
92
|
+
s == null || s.focus();
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
C(() => {
|
|
97
|
+
const t = document.getElementById(g);
|
|
98
|
+
return t.addEventListener("keydown", e, !0), document.addEventListener("mouseup", f, !0), function() {
|
|
99
|
+
t.removeEventListener("keydown", e, !0), document.removeEventListener("mouseup", f, !0);
|
|
100
|
+
};
|
|
101
|
+
}, [e, g]);
|
|
102
|
+
const b = (t) => {
|
|
103
|
+
a(t), l || w((s) => ({ ...s, case: "first" }));
|
|
104
|
+
};
|
|
105
|
+
let c = `sg-button sg-button${m ? "-" + m : "-primary"} sg-dropdown-toggle${o ? " " + o : ""}`;
|
|
106
|
+
return (n === "a" || r) && (c = `sg-nav-dropdown-toggle sg-dropdown-toggle${o ? " " + o : ""}`), /* @__PURE__ */ v(
|
|
107
|
+
n,
|
|
108
|
+
{
|
|
109
|
+
tabIndex: "0",
|
|
110
|
+
type: "button",
|
|
111
|
+
"aria-haspopup": "true",
|
|
112
|
+
"aria-controls": g + "-menu",
|
|
113
|
+
"aria-expanded": l,
|
|
114
|
+
id: g,
|
|
115
|
+
ref: h,
|
|
116
|
+
className: c,
|
|
117
|
+
onClick: (t) => b(t),
|
|
118
|
+
...i,
|
|
119
|
+
children: d
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
}), j = E(({ children: d, className: o, style: r = {}, ...u }, m) => {
|
|
123
|
+
const { controlId: i, showInternal: h, activeDescendant: g } = x(), [a, w] = y(r);
|
|
124
|
+
A(() => {
|
|
125
|
+
if (h) {
|
|
126
|
+
const n = document.getElementById(i + "-menu");
|
|
127
|
+
let e = {};
|
|
128
|
+
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 }));
|
|
129
|
+
}
|
|
130
|
+
}, [h]), C(() => {
|
|
131
|
+
if (h) {
|
|
132
|
+
const n = document.getElementById(i + "-menu"), e = document.getElementById(i + "-menu").children, f = e.length - 1, b = document.querySelector(".sg-dropdown-item-visual-focus");
|
|
133
|
+
let c = 0, t = e[0].children[0];
|
|
134
|
+
if (b != null) {
|
|
135
|
+
b.classList.remove("sg-dropdown-item-visual-focus");
|
|
136
|
+
for (let s = 0; s < e.length; s++)
|
|
137
|
+
if (e[s] === b.parentElement) {
|
|
138
|
+
c = s;
|
|
139
|
+
break;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
switch (g.case) {
|
|
143
|
+
case "first":
|
|
144
|
+
t = e[0].children[0], c = 0;
|
|
145
|
+
break;
|
|
146
|
+
case "last":
|
|
147
|
+
t = e[f].children[0], c = f;
|
|
148
|
+
break;
|
|
149
|
+
case "next":
|
|
150
|
+
c = c === f ? 0 : c + 1, t = e[c].children[0];
|
|
151
|
+
break;
|
|
152
|
+
case "previous":
|
|
153
|
+
c = c === 0 ? f : c - 1, t = e[c].children[0];
|
|
154
|
+
break;
|
|
155
|
+
}
|
|
156
|
+
n.setAttribute("aria-activedescendant", t.id), e[c].children[0].classList.add("sg-dropdown-item-visual-focus");
|
|
157
|
+
} else
|
|
158
|
+
document.getElementById(i + "-menu").setAttribute("aria-activedescendant", "");
|
|
159
|
+
}, [i, h, g]);
|
|
160
|
+
const l = (n) => {
|
|
161
|
+
var c;
|
|
162
|
+
const e = n.target;
|
|
163
|
+
let f = e.classList.contains("sg-dropdown-item-visual-focus");
|
|
164
|
+
const b = document.getElementById(i + "-menu");
|
|
165
|
+
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));
|
|
166
|
+
};
|
|
167
|
+
return C(() => {
|
|
168
|
+
const n = document.getElementById(i + "-menu");
|
|
169
|
+
for (let e of n.children)
|
|
170
|
+
e.addEventListener("mouseover", l, !0);
|
|
171
|
+
return function() {
|
|
172
|
+
for (let f of n.children)
|
|
173
|
+
f.removeEventListener("mouseover", l, !0);
|
|
174
|
+
};
|
|
175
|
+
}, []), /* @__PURE__ */ v(
|
|
176
|
+
"ul",
|
|
177
|
+
{
|
|
178
|
+
id: i + "-menu",
|
|
179
|
+
role: "menu",
|
|
180
|
+
tabIndex: -1,
|
|
181
|
+
"aria-labelledby": i,
|
|
182
|
+
ref: m,
|
|
183
|
+
className: `sg-dropdown-list${o ? " " + o : ""}${h ? " show" : ""}`,
|
|
184
|
+
style: a,
|
|
185
|
+
...u,
|
|
186
|
+
children: d
|
|
187
|
+
}
|
|
188
|
+
);
|
|
189
|
+
}), 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, {
|
|
190
|
+
Toggle: q,
|
|
191
|
+
Menu: j,
|
|
192
|
+
Item: H,
|
|
193
|
+
//Text: Text,
|
|
194
|
+
Divider: V
|
|
195
|
+
});
|
|
196
|
+
export {
|
|
197
|
+
V as Divider,
|
|
198
|
+
I as DropdownContext,
|
|
199
|
+
H as Item,
|
|
200
|
+
j as Menu,
|
|
201
|
+
q as Toggle,
|
|
202
|
+
K as default,
|
|
203
|
+
x as useDropdownContext
|
|
204
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as r, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as s, useMemo as i } from "react";
|
|
3
|
+
import { FormContext as f } from "../Form/index.js";
|
|
4
|
+
const u = s(({ children: e, label: t, controlId: l, ...a }, m) => {
|
|
5
|
+
const o = i(() => ({ controlId: l }));
|
|
6
|
+
return /* @__PURE__ */ r(f.Provider, { value: o, children: /* @__PURE__ */ n("div", { className: "sg-form-floating", children: [
|
|
7
|
+
e,
|
|
8
|
+
/* @__PURE__ */ r("label", { ref: m, htmlFor: o.controlId, className: "sg-form-floating-label", ...a, children: t })
|
|
9
|
+
] }) });
|
|
10
|
+
});
|
|
11
|
+
export {
|
|
12
|
+
u as default
|
|
13
|
+
};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BaseDivType, BaseFormType, BaseInputType, BaseLabelType, BaseSelectType, BaseSmallType } from "../BaseTypes";
|
|
3
|
+
export type FormContextType = {
|
|
4
|
+
controlId: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const FormContext: React.Context<FormContextType | null>;
|
|
7
|
+
export declare const useFormContext: () => FormContextType;
|
|
8
|
+
export type FormType = {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
} & BaseFormType;
|
|
11
|
+
export type FormControlType = {
|
|
12
|
+
as?: React.ElementType;
|
|
13
|
+
className?: string;
|
|
14
|
+
plaintext?: boolean;
|
|
15
|
+
id?: string;
|
|
16
|
+
type?: string;
|
|
17
|
+
autoFocus?: boolean;
|
|
18
|
+
} & BaseInputType;
|
|
19
|
+
export type FormSelectType = {
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
className?: string;
|
|
22
|
+
id?: string;
|
|
23
|
+
} & BaseSelectType;
|
|
24
|
+
export type FormGroupType = {
|
|
25
|
+
children: React.ReactNode;
|
|
26
|
+
className?: string;
|
|
27
|
+
controlId: string;
|
|
28
|
+
} & BaseDivType;
|
|
29
|
+
export type FormLabelType = {
|
|
30
|
+
children: React.ReactNode;
|
|
31
|
+
className?: string;
|
|
32
|
+
htmlFor?: string;
|
|
33
|
+
} & BaseLabelType;
|
|
34
|
+
export type FormCheckType = {
|
|
35
|
+
classNameContainer?: string;
|
|
36
|
+
containerRef?: React.LegacyRef<HTMLDivElement>;
|
|
37
|
+
containerId?: string;
|
|
38
|
+
style?: React.CSSProperties;
|
|
39
|
+
classNameLabel?: string;
|
|
40
|
+
labelRef?: React.LegacyRef<HTMLLabelElement>;
|
|
41
|
+
label?: string;
|
|
42
|
+
labelId?: string;
|
|
43
|
+
className?: string;
|
|
44
|
+
type?: string;
|
|
45
|
+
controlId?: string;
|
|
46
|
+
reverse?: boolean;
|
|
47
|
+
checkStyle?: React.CSSProperties;
|
|
48
|
+
} & BaseInputType;
|
|
49
|
+
export type FormTextType = {
|
|
50
|
+
children: React.ReactNode;
|
|
51
|
+
className?: string;
|
|
52
|
+
} & BaseSmallType;
|
|
53
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<FormType, "ref"> & React.RefAttributes<HTMLFormElement>> & {
|
|
54
|
+
Control: React.ForwardRefExoticComponent<Omit<FormControlType, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
55
|
+
Select: React.ForwardRefExoticComponent<Omit<FormSelectType, "ref"> & React.RefAttributes<HTMLSelectElement>>;
|
|
56
|
+
Group: React.ForwardRefExoticComponent<Omit<FormGroupType, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
57
|
+
Label: React.ForwardRefExoticComponent<Omit<FormLabelType, "ref"> & React.RefAttributes<HTMLLabelElement>>;
|
|
58
|
+
Check: React.ForwardRefExoticComponent<Omit<FormCheckType, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
59
|
+
Text: React.ForwardRefExoticComponent<Omit<FormTextType, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
60
|
+
};
|
|
61
|
+
export default _default;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsx as n, jsxs as $, Fragment as k } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as b, forwardRef as l, useMemo as j, useContext as I } from "react";
|
|
3
|
+
const w = b(null), H = ({ children: e, value: t }) => /* @__PURE__ */ n(w.Provider, { value: t, children: e }), g = () => {
|
|
4
|
+
const e = I(w);
|
|
5
|
+
if (!e)
|
|
6
|
+
throw new Error(
|
|
7
|
+
"useFormContext has to be used within a FormContextProvider!"
|
|
8
|
+
);
|
|
9
|
+
return e;
|
|
10
|
+
}, 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) => {
|
|
11
|
+
let i = e;
|
|
12
|
+
const { controlId: d } = g();
|
|
13
|
+
let x = d || c, f = (o ? "sg-form-control-plaintext" : "sg-form-control") + (t != "" ? " " + t : "") + (r == "color" ? " sg-form-control-color" : "");
|
|
14
|
+
return /* @__PURE__ */ n(i, { autoFocus: s, ref: u, id: x, type: r, className: f, ...m });
|
|
15
|
+
}), E = l(({ children: e, className: t, id: o, ...c }, r) => {
|
|
16
|
+
const { controlId: s } = g();
|
|
17
|
+
let m = s || o;
|
|
18
|
+
return /* @__PURE__ */ n("select", { ref: r, className: `sg-form-select${t ? " " + t : ""}`, id: m, ...c, children: e });
|
|
19
|
+
}), G = l(({ children: e, className: t, controlId: o, ...c }, r) => {
|
|
20
|
+
const s = j(() => ({ controlId: o }), [o]);
|
|
21
|
+
return /* @__PURE__ */ n("div", { ref: r, className: `sg-from-group${t ? " " + t : ""}`, ...c, children: /* @__PURE__ */ n(H, { value: s, children: e }) });
|
|
22
|
+
}), M = l(({ children: e, className: t, htmlFor: o }, c) => {
|
|
23
|
+
const { controlId: r } = g();
|
|
24
|
+
return /* @__PURE__ */ n("label", { ref: c, htmlFor: o || r, className: `sg-form-label${t ? " " + t : ""}`, children: e });
|
|
25
|
+
}), O = l(({
|
|
26
|
+
classNameContainer: e,
|
|
27
|
+
containerRef: t,
|
|
28
|
+
containerId: o,
|
|
29
|
+
style: c,
|
|
30
|
+
classNameLabel: r,
|
|
31
|
+
labelRef: s,
|
|
32
|
+
label: m,
|
|
33
|
+
labelId: u,
|
|
34
|
+
className: i,
|
|
35
|
+
type: d,
|
|
36
|
+
id: x,
|
|
37
|
+
controlId: f,
|
|
38
|
+
reverse: p = !1,
|
|
39
|
+
checkStyle: v,
|
|
40
|
+
...a
|
|
41
|
+
}, C) => {
|
|
42
|
+
let h = f || x, F = d === "switch" ? "checkbox" : d;
|
|
43
|
+
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: [
|
|
44
|
+
/* @__PURE__ */ n("input", { ref: C, type: F, id: h, className: `sg-form-check-input${i ? " " + i : ""}`, ...a }),
|
|
45
|
+
/* @__PURE__ */ n("label", { ref: s, id: u, htmlFor: h, className: `sg-form-check-label${r ? " " + r : ""}`, children: m })
|
|
46
|
+
] }) : /* @__PURE__ */ $(k, { children: [
|
|
47
|
+
/* @__PURE__ */ n("label", { ref: s, id: u, htmlFor: h, className: `sg-form-check-label${r ? " " + r : ""}`, children: m }),
|
|
48
|
+
/* @__PURE__ */ n("input", { ref: C, type: F, id: h, className: `sg-form-check-input${i ? " " + i : ""}`, style: v, ...a })
|
|
49
|
+
] }) });
|
|
50
|
+
}), 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, {
|
|
51
|
+
Control: y,
|
|
52
|
+
Select: E,
|
|
53
|
+
Group: G,
|
|
54
|
+
Label: M,
|
|
55
|
+
Check: O,
|
|
56
|
+
Text: S
|
|
57
|
+
});
|
|
58
|
+
export {
|
|
59
|
+
w as FormContext,
|
|
60
|
+
z as default,
|
|
61
|
+
g as useFormContext
|
|
62
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as e } from "react";
|
|
3
|
+
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 });
|
|
4
|
+
n.Text = e(s);
|
|
5
|
+
export {
|
|
6
|
+
n as default
|
|
7
|
+
};
|