@sparkstudio/common-ui 1.0.5 → 1.0.6
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/index.cjs +89 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +0 -139
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +43 -1
- package/dist/index.d.ts +43 -1
- package/dist/index.js +79 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -20,7 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
|
|
23
|
+
Body: () => Body,
|
|
24
|
+
Button: () => Button,
|
|
25
|
+
ContentContainer: () => ContentContainer,
|
|
26
|
+
ContentRow: () => ContentRow,
|
|
27
|
+
Footer: () => Footer,
|
|
28
|
+
Header: () => Header,
|
|
29
|
+
HeaderText: () => HeaderText,
|
|
30
|
+
LayoutWrapper: () => LayoutWrapper,
|
|
31
|
+
Navigation: () => Navigation,
|
|
32
|
+
NavigationItem: () => NavigationItem
|
|
24
33
|
});
|
|
25
34
|
module.exports = __toCommonJS(index_exports);
|
|
26
35
|
|
|
@@ -81,8 +90,86 @@ function Button({
|
|
|
81
90
|
}
|
|
82
91
|
) });
|
|
83
92
|
}
|
|
93
|
+
|
|
94
|
+
// src/components/Footer.tsx
|
|
95
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
96
|
+
function Footer({ children }) {
|
|
97
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("footer", { className: "bg-dark text-white text-center py-2 mt-auto", children: children ?? "\xA9 2025 Your Site \u2014 All rights reserved" });
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// src/components/Header.tsx
|
|
101
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
102
|
+
function Header({ children }) {
|
|
103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { className: "navbar navbar-dark bg-dark px-3 sticky-top", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "navbar-brand mb-0 h4", children: "My Website" }) });
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// src/components/HeaderText.tsx
|
|
107
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
108
|
+
function HeaderText({ children }) {
|
|
109
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "navbar-brand mb-0 h4", children });
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// src/components/Body.tsx
|
|
113
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
114
|
+
function Body({ title, description, children }) {
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("main", { className: "col p-4", children: [
|
|
116
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { children: title }),
|
|
117
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: description }),
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "card mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "card-body", children }) })
|
|
119
|
+
] });
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// src/components/navigation/Navigation.tsx
|
|
123
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
124
|
+
function Navigation({ title = "Navigation", children }) {
|
|
125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("nav", { className: "col-auto p-3 h-100 d-flex flex-column", children: [
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h6", { className: "text-muted text-uppercase", children: title }),
|
|
127
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "nav nav-pills flex-column gap-2 mt-3", children })
|
|
128
|
+
] });
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// src/components/navigation/NavigationItem.tsx
|
|
132
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
133
|
+
function NavigationItem({ title, type, active, onClick }) {
|
|
134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { className: "nav-item", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
135
|
+
"button",
|
|
136
|
+
{
|
|
137
|
+
type: "button",
|
|
138
|
+
className: `nav-link text-start w-100 ${active ? "active" : ""}`,
|
|
139
|
+
onClick: () => onClick?.(type),
|
|
140
|
+
children: title
|
|
141
|
+
}
|
|
142
|
+
) });
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// src/components/wrappers/ContentContainer.tsx
|
|
146
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
147
|
+
function ContentContainer({ children }) {
|
|
148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "container-fluid flex-grow-1", children });
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// src/components/wrappers/ContentRow.tsx
|
|
152
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
153
|
+
function ContentRow({ children }) {
|
|
154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "row h-100 flex-nowrap", children });
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// src/components/wrappers/LayoutWrapper.tsx
|
|
158
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
159
|
+
function LayoutWrapper({ children }) {
|
|
160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "d-flex flex-column min-vh-100", children });
|
|
161
|
+
}
|
|
84
162
|
// Annotate the CommonJS export names for ESM import in node:
|
|
85
163
|
0 && (module.exports = {
|
|
86
|
-
|
|
164
|
+
Body,
|
|
165
|
+
Button,
|
|
166
|
+
ContentContainer,
|
|
167
|
+
ContentRow,
|
|
168
|
+
Footer,
|
|
169
|
+
Header,
|
|
170
|
+
HeaderText,
|
|
171
|
+
LayoutWrapper,
|
|
172
|
+
Navigation,
|
|
173
|
+
NavigationItem
|
|
87
174
|
});
|
|
88
175
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx"],"sourcesContent":["export * from \"./components/Button\";\r\n","import { useState, type ReactNode, type MouseEvent } from \"react\";\r\n\r\nexport interface ButtonProps {\r\n buttonClassName?: string;\r\n type?: \"button\" | \"submit\" | \"reset\";\r\n disabled?: boolean;\r\n\r\n onAction?: () => Promise<unknown>;\r\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n onDone?: (result: unknown) => void;\r\n onError?: (error: unknown) => void;\r\n onFinally?: () => void;\r\n\r\n children?: ReactNode;\r\n loadingChildren?: ReactNode;\r\n\r\n renderContent?: () => ReactNode;\r\n renderLoading?: () => ReactNode;\r\n\r\n loadingText?: string;\r\n showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n buttonClassName = \"btn btn-primary btn-lg\",\r\n type = \"button\",\r\n disabled = false,\r\n\r\n onAction,\r\n onClick,\r\n onDone,\r\n onError,\r\n onFinally,\r\n\r\n children = \"Click me\",\r\n\r\n loadingChildren,\r\n renderContent,\r\n renderLoading,\r\n\r\n loadingText = \"Loading...\",\r\n showSpinner = true,\r\n}: ButtonProps) {\r\n const [loading, setLoading] = useState(false);\r\n\r\n const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n if (loading) return;\r\n\r\n onClick?.(event);\r\n if (event.defaultPrevented) return;\r\n if (!onAction) return;\r\n\r\n try {\r\n setLoading(true);\r\n const result = await onAction();\r\n onDone?.(result);\r\n } catch (error) {\r\n onError?.(error);\r\n } finally {\r\n setLoading(false);\r\n onFinally?.();\r\n }\r\n };\r\n\r\n return (\r\n <div className={`w-100 text-center mb-3`}>\r\n <button\r\n type={type}\r\n className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n onClick={handleClick}\r\n disabled={disabled || loading}\r\n >\r\n {loading ? (\r\n renderLoading?.() ??\r\n loadingChildren ?? (\r\n <>\r\n {showSpinner && (\r\n <span\r\n className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n role=\"status\"\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n {loadingText}\r\n </>\r\n )\r\n ) : (\r\n renderContent?.() ?? children\r\n )}\r\n </button>\r\n </div>\r\n );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA0D;AA2E9C;AApDL,SAAS,OAAO;AAAA,EACrB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AAAA,EACd,cAAc;AAChB,GAAgB;AACd,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,QAAM,cAAc,OAAO,UAAyC;AAClE,QAAI,QAAS;AAEb,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,QAAI,CAAC,SAAU;AAEf,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,SAAS,MAAM,SAAS;AAC9B,eAAS,MAAM;AAAA,IACjB,SAAS,OAAO;AACd,gBAAU,KAAK;AAAA,IACjB,UAAE;AACA,iBAAW,KAAK;AAChB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAW,0BACd;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,eAAe,IAAI,UAAU,uBAAuB,EAAE;AAAA,MACpE,SAAS;AAAA,MACT,UAAU,YAAY;AAAA,MAErB,oBACC,gBAAgB,KAChB,mBACE,4EACG;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,eAAY;AAAA;AAAA,QACd;AAAA,QAED;AAAA,SACH,IAGF,gBAAgB,KAAK;AAAA;AAAA,EAEzB,GACF;AAEJ;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx","../src/components/Footer.tsx","../src/components/Header.tsx","../src/components/HeaderText.tsx","../src/components/Body.tsx","../src/components/navigation/Navigation.tsx","../src/components/navigation/NavigationItem.tsx","../src/components/wrappers/ContentContainer.tsx","../src/components/wrappers/ContentRow.tsx","../src/components/wrappers/LayoutWrapper.tsx"],"sourcesContent":["export * from \"./components/Button\";\r\nexport * from \"./components/Footer\";\r\nexport * from \"./components/Header\";\r\nexport * from \"./components/HeaderText\";\r\nexport * from \"./components/Body\";\r\n\r\nexport * from \"./components/navigation/Navigation\";\r\nexport * from \"./components/navigation/NavigationItem\";\r\n\r\nexport * from \"./components/wrappers/ContentContainer\";\r\nexport * from \"./components/wrappers/ContentRow\";\r\nexport * from \"./components/wrappers/LayoutWrapper\";","import { useState, type ReactNode, type MouseEvent } from \"react\";\r\n\r\nexport interface ButtonProps {\r\n buttonClassName?: string;\r\n type?: \"button\" | \"submit\" | \"reset\";\r\n disabled?: boolean;\r\n\r\n onAction?: () => Promise<unknown>;\r\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n onDone?: (result: unknown) => void;\r\n onError?: (error: unknown) => void;\r\n onFinally?: () => void;\r\n\r\n children?: ReactNode;\r\n loadingChildren?: ReactNode;\r\n\r\n renderContent?: () => ReactNode;\r\n renderLoading?: () => ReactNode;\r\n\r\n loadingText?: string;\r\n showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n buttonClassName = \"btn btn-primary btn-lg\",\r\n type = \"button\",\r\n disabled = false,\r\n\r\n onAction,\r\n onClick,\r\n onDone,\r\n onError,\r\n onFinally,\r\n\r\n children = \"Click me\",\r\n\r\n loadingChildren,\r\n renderContent,\r\n renderLoading,\r\n\r\n loadingText = \"Loading...\",\r\n showSpinner = true,\r\n}: ButtonProps) {\r\n const [loading, setLoading] = useState(false);\r\n\r\n const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n if (loading) return;\r\n\r\n onClick?.(event);\r\n if (event.defaultPrevented) return;\r\n if (!onAction) return;\r\n\r\n try {\r\n setLoading(true);\r\n const result = await onAction();\r\n onDone?.(result);\r\n } catch (error) {\r\n onError?.(error);\r\n } finally {\r\n setLoading(false);\r\n onFinally?.();\r\n }\r\n };\r\n\r\n return (\r\n <div className={`w-100 text-center mb-3`}>\r\n <button\r\n type={type}\r\n className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n onClick={handleClick}\r\n disabled={disabled || loading}\r\n >\r\n {loading ? (\r\n renderLoading?.() ??\r\n loadingChildren ?? (\r\n <>\r\n {showSpinner && (\r\n <span\r\n className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n role=\"status\"\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n {loadingText}\r\n </>\r\n )\r\n ) : (\r\n renderContent?.() ?? children\r\n )}\r\n </button>\r\n </div>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface FooterProps {\r\n children?: ReactNode;\r\n}\r\n\r\nexport function Footer({ children }: FooterProps) {\r\n return (\r\n <footer className=\"bg-dark text-white text-center py-2 mt-auto\">\r\n {children ?? \"© 2025 Your Site — All rights reserved\"}\r\n </footer>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderProps {\r\n children?: ReactNode;\r\n}\r\n\r\nexport function Header({ children }: HeaderProps) {\r\n return (\r\n <nav className=\"navbar navbar-dark bg-dark px-3 sticky-top\">\r\n {children ?? (\r\n <span className=\"navbar-brand mb-0 h4\">My Website</span>\r\n )}\r\n </nav>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderBrandProps {\r\n children: ReactNode;\r\n}\r\n\r\nexport function HeaderText({ children }: HeaderBrandProps) {\r\n return (\r\n <span className=\"navbar-brand mb-0 h4\">\r\n {children}\r\n </span>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface BodyProps {\r\n title: ReactNode;\r\n description?: ReactNode;\r\n children?: ReactNode;\r\n}\r\n\r\nexport function Body({ title, description, children }: BodyProps) {\r\n return (\r\n <main className=\"col p-4\">\r\n <h2>{title}</h2>\r\n\r\n {description && <p>{description}</p>}\r\n\r\n <div className=\"card mt-3\">\r\n <div className=\"card-body\">\r\n {children}\r\n </div>\r\n </div>\r\n </main>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationProps {\r\n title?: ReactNode;\r\n children: ReactNode;\r\n}\r\n\r\nexport function Navigation({ title = \"Navigation\", children }: NavigationProps) {\r\n return (\r\n <nav className=\"col-auto p-3 h-100 d-flex flex-column\">\r\n <h6 className=\"text-muted text-uppercase\">{title}</h6>\r\n\r\n <ul className=\"nav nav-pills flex-column gap-2 mt-3\">\r\n {children}\r\n </ul>\r\n </nav>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationItemProps {\r\n title: ReactNode;\r\n type: string;\r\n active?: boolean;\r\n onClick?: (type: string) => void;\r\n}\r\n\r\nexport function NavigationItem({ title, type, active, onClick }: NavigationItemProps) {\r\n return (\r\n <li className=\"nav-item\">\r\n <button\r\n type=\"button\"\r\n className={`nav-link text-start w-100 ${active ? \"active\" : \"\"}`}\r\n onClick={() => onClick?.(type)}\r\n >\r\n {title}\r\n </button>\r\n </li>\r\n );\r\n}\r\n","export function ContentContainer({ children }: React.PropsWithChildren) {\r\n return <div className=\"container-fluid flex-grow-1\">{children}</div>;\r\n}\r\n","export function ContentRow({ children }: React.PropsWithChildren) {\r\n return <div className=\"row h-100 flex-nowrap\">{children}</div>;\r\n}\r\n","export function LayoutWrapper({ children }: React.PropsWithChildren) {\r\n return <div className=\"d-flex flex-column min-vh-100\">{children}</div>;\r\n}\r\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/index.css
CHANGED
|
@@ -1,142 +1,3 @@
|
|
|
1
|
-
@charset "UTF-8";
|
|
2
1
|
@import "/node_modules/bootstrap/dist/css/bootstrap.css";
|
|
3
|
-
:root {
|
|
4
|
-
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
5
|
-
line-height: 1.5;
|
|
6
|
-
font-weight: 400;
|
|
7
|
-
color-scheme: light dark;
|
|
8
|
-
color: rgba(255, 255, 255, 0.87);
|
|
9
|
-
background-color: #242424;
|
|
10
|
-
font-synthesis: none;
|
|
11
|
-
text-rendering: optimizeLegibility;
|
|
12
|
-
-webkit-font-smoothing: antialiased;
|
|
13
|
-
-moz-osx-font-smoothing: grayscale;
|
|
14
|
-
}
|
|
15
|
-
@media (prefers-color-scheme: light) {
|
|
16
|
-
:root {
|
|
17
|
-
color: #213547;
|
|
18
|
-
background-color: #ffffff;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
a {
|
|
23
|
-
font-weight: 500;
|
|
24
|
-
color: #646cff;
|
|
25
|
-
text-decoration: inherit;
|
|
26
|
-
}
|
|
27
|
-
a:hover {
|
|
28
|
-
color: #535bf2;
|
|
29
|
-
}
|
|
30
|
-
@media (prefers-color-scheme: light) {
|
|
31
|
-
a:hover {
|
|
32
|
-
color: rgb(151, 156.3677419355, 255);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
body {
|
|
37
|
-
margin: 0;
|
|
38
|
-
display: flex;
|
|
39
|
-
place-items: center;
|
|
40
|
-
min-width: 320px;
|
|
41
|
-
min-height: 100vh;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
h1 {
|
|
45
|
-
font-size: 3.2em;
|
|
46
|
-
line-height: 1.1;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
button {
|
|
50
|
-
border-radius: 8px;
|
|
51
|
-
border: 1px solid transparent;
|
|
52
|
-
padding: 0.6em 1.2em;
|
|
53
|
-
font-size: 1em;
|
|
54
|
-
font-weight: 500;
|
|
55
|
-
font-family: inherit;
|
|
56
|
-
background-color: #1a1a1a;
|
|
57
|
-
cursor: pointer;
|
|
58
|
-
transition: border-color 0.25s;
|
|
59
|
-
}
|
|
60
|
-
button:hover {
|
|
61
|
-
border-color: #646cff;
|
|
62
|
-
}
|
|
63
|
-
button:focus, button:focus-visible {
|
|
64
|
-
outline: 4px auto -webkit-focus-ring-color;
|
|
65
|
-
}
|
|
66
|
-
@media (prefers-color-scheme: light) {
|
|
67
|
-
button {
|
|
68
|
-
background-color: #f9f9f9;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* Simple styles so you can SEE that SCSS is working */
|
|
73
|
-
/* Base async button look */
|
|
74
|
-
.async-btn--loading {
|
|
75
|
-
opacity: 0.6;
|
|
76
|
-
cursor: not-allowed;
|
|
77
|
-
transform: scale(0.98);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
/* Custom spinner color */
|
|
81
|
-
.async-btn__spinner {
|
|
82
|
-
color: #ff9800;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/* Just to prove SCSS compiled — scoped style */
|
|
86
|
-
button.btn.btn-primary.btn-lg {
|
|
87
|
-
background: linear-gradient(45deg, #4caf50, #2196f3);
|
|
88
|
-
border: none;
|
|
89
|
-
transition: all 0.2s ease;
|
|
90
|
-
}
|
|
91
|
-
button.btn.btn-primary.btn-lg:hover {
|
|
92
|
-
background: linear-gradient(45deg, #66bb6a, #42a5f5);
|
|
93
|
-
transform: translateY(-1px);
|
|
94
|
-
}
|
|
95
|
-
button.btn.btn-primary.btn-lg:active {
|
|
96
|
-
transform: translateY(0);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
#root {
|
|
100
|
-
max-width: 1280px;
|
|
101
|
-
margin: 0 auto;
|
|
102
|
-
padding: 2rem;
|
|
103
|
-
text-align: center;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.logo {
|
|
107
|
-
height: 6em;
|
|
108
|
-
padding: 1.5em;
|
|
109
|
-
will-change: filter;
|
|
110
|
-
transition: filter 300ms;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.logo:hover {
|
|
114
|
-
filter: drop-shadow(0 0 2em rgba(100, 108, 255, 0.6666666667));
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.logo.react:hover {
|
|
118
|
-
filter: drop-shadow(0 0 2em rgba(97, 218, 251, 0.6666666667));
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
@keyframes logo-spin {
|
|
122
|
-
from {
|
|
123
|
-
transform: rotate(0deg);
|
|
124
|
-
}
|
|
125
|
-
to {
|
|
126
|
-
transform: rotate(360deg);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
130
|
-
a:nth-of-type(2) .logo {
|
|
131
|
-
animation: logo-spin infinite 20s linear;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
.card {
|
|
135
|
-
padding: 2em;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.read-the-docs {
|
|
139
|
-
color: #888;
|
|
140
|
-
}
|
|
141
2
|
|
|
142
3
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/index.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/index.scss"],"names":[],"mappings":"AAAQ","file":"index.css"}
|
package/dist/index.d.cts
CHANGED
|
@@ -19,4 +19,46 @@ interface ButtonProps {
|
|
|
19
19
|
}
|
|
20
20
|
declare function Button({ buttonClassName, type, disabled, onAction, onClick, onDone, onError, onFinally, children, loadingChildren, renderContent, renderLoading, loadingText, showSpinner, }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
interface FooterProps {
|
|
23
|
+
children?: ReactNode;
|
|
24
|
+
}
|
|
25
|
+
declare function Footer({ children }: FooterProps): react_jsx_runtime.JSX.Element;
|
|
26
|
+
|
|
27
|
+
interface HeaderProps {
|
|
28
|
+
children?: ReactNode;
|
|
29
|
+
}
|
|
30
|
+
declare function Header({ children }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
31
|
+
|
|
32
|
+
interface HeaderBrandProps {
|
|
33
|
+
children: ReactNode;
|
|
34
|
+
}
|
|
35
|
+
declare function HeaderText({ children }: HeaderBrandProps): react_jsx_runtime.JSX.Element;
|
|
36
|
+
|
|
37
|
+
interface BodyProps {
|
|
38
|
+
title: ReactNode;
|
|
39
|
+
description?: ReactNode;
|
|
40
|
+
children?: ReactNode;
|
|
41
|
+
}
|
|
42
|
+
declare function Body({ title, description, children }: BodyProps): react_jsx_runtime.JSX.Element;
|
|
43
|
+
|
|
44
|
+
interface NavigationProps {
|
|
45
|
+
title?: ReactNode;
|
|
46
|
+
children: ReactNode;
|
|
47
|
+
}
|
|
48
|
+
declare function Navigation({ title, children }: NavigationProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
|
|
50
|
+
interface NavigationItemProps {
|
|
51
|
+
title: ReactNode;
|
|
52
|
+
type: string;
|
|
53
|
+
active?: boolean;
|
|
54
|
+
onClick?: (type: string) => void;
|
|
55
|
+
}
|
|
56
|
+
declare function NavigationItem({ title, type, active, onClick }: NavigationItemProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
declare function ContentContainer({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
declare function ContentRow({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
61
|
+
|
|
62
|
+
declare function LayoutWrapper({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
63
|
+
|
|
64
|
+
export { Body, Button, type ButtonProps, ContentContainer, ContentRow, Footer, Header, HeaderText, LayoutWrapper, Navigation, NavigationItem };
|
package/dist/index.d.ts
CHANGED
|
@@ -19,4 +19,46 @@ interface ButtonProps {
|
|
|
19
19
|
}
|
|
20
20
|
declare function Button({ buttonClassName, type, disabled, onAction, onClick, onDone, onError, onFinally, children, loadingChildren, renderContent, renderLoading, loadingText, showSpinner, }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
interface FooterProps {
|
|
23
|
+
children?: ReactNode;
|
|
24
|
+
}
|
|
25
|
+
declare function Footer({ children }: FooterProps): react_jsx_runtime.JSX.Element;
|
|
26
|
+
|
|
27
|
+
interface HeaderProps {
|
|
28
|
+
children?: ReactNode;
|
|
29
|
+
}
|
|
30
|
+
declare function Header({ children }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
31
|
+
|
|
32
|
+
interface HeaderBrandProps {
|
|
33
|
+
children: ReactNode;
|
|
34
|
+
}
|
|
35
|
+
declare function HeaderText({ children }: HeaderBrandProps): react_jsx_runtime.JSX.Element;
|
|
36
|
+
|
|
37
|
+
interface BodyProps {
|
|
38
|
+
title: ReactNode;
|
|
39
|
+
description?: ReactNode;
|
|
40
|
+
children?: ReactNode;
|
|
41
|
+
}
|
|
42
|
+
declare function Body({ title, description, children }: BodyProps): react_jsx_runtime.JSX.Element;
|
|
43
|
+
|
|
44
|
+
interface NavigationProps {
|
|
45
|
+
title?: ReactNode;
|
|
46
|
+
children: ReactNode;
|
|
47
|
+
}
|
|
48
|
+
declare function Navigation({ title, children }: NavigationProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
|
|
50
|
+
interface NavigationItemProps {
|
|
51
|
+
title: ReactNode;
|
|
52
|
+
type: string;
|
|
53
|
+
active?: boolean;
|
|
54
|
+
onClick?: (type: string) => void;
|
|
55
|
+
}
|
|
56
|
+
declare function NavigationItem({ title, type, active, onClick }: NavigationItemProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
declare function ContentContainer({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
declare function ContentRow({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
61
|
+
|
|
62
|
+
declare function LayoutWrapper({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
|
|
63
|
+
|
|
64
|
+
export { Body, Button, type ButtonProps, ContentContainer, ContentRow, Footer, Header, HeaderText, LayoutWrapper, Navigation, NavigationItem };
|
package/dist/index.js
CHANGED
|
@@ -55,7 +55,85 @@ function Button({
|
|
|
55
55
|
}
|
|
56
56
|
) });
|
|
57
57
|
}
|
|
58
|
+
|
|
59
|
+
// src/components/Footer.tsx
|
|
60
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
61
|
+
function Footer({ children }) {
|
|
62
|
+
return /* @__PURE__ */ jsx2("footer", { className: "bg-dark text-white text-center py-2 mt-auto", children: children ?? "\xA9 2025 Your Site \u2014 All rights reserved" });
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// src/components/Header.tsx
|
|
66
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
67
|
+
function Header({ children }) {
|
|
68
|
+
return /* @__PURE__ */ jsx3("nav", { className: "navbar navbar-dark bg-dark px-3 sticky-top", children: children ?? /* @__PURE__ */ jsx3("span", { className: "navbar-brand mb-0 h4", children: "My Website" }) });
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// src/components/HeaderText.tsx
|
|
72
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
73
|
+
function HeaderText({ children }) {
|
|
74
|
+
return /* @__PURE__ */ jsx4("span", { className: "navbar-brand mb-0 h4", children });
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// src/components/Body.tsx
|
|
78
|
+
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
79
|
+
function Body({ title, description, children }) {
|
|
80
|
+
return /* @__PURE__ */ jsxs2("main", { className: "col p-4", children: [
|
|
81
|
+
/* @__PURE__ */ jsx5("h2", { children: title }),
|
|
82
|
+
description && /* @__PURE__ */ jsx5("p", { children: description }),
|
|
83
|
+
/* @__PURE__ */ jsx5("div", { className: "card mt-3", children: /* @__PURE__ */ jsx5("div", { className: "card-body", children }) })
|
|
84
|
+
] });
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// src/components/navigation/Navigation.tsx
|
|
88
|
+
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
89
|
+
function Navigation({ title = "Navigation", children }) {
|
|
90
|
+
return /* @__PURE__ */ jsxs3("nav", { className: "col-auto p-3 h-100 d-flex flex-column", children: [
|
|
91
|
+
/* @__PURE__ */ jsx6("h6", { className: "text-muted text-uppercase", children: title }),
|
|
92
|
+
/* @__PURE__ */ jsx6("ul", { className: "nav nav-pills flex-column gap-2 mt-3", children })
|
|
93
|
+
] });
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// src/components/navigation/NavigationItem.tsx
|
|
97
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
98
|
+
function NavigationItem({ title, type, active, onClick }) {
|
|
99
|
+
return /* @__PURE__ */ jsx7("li", { className: "nav-item", children: /* @__PURE__ */ jsx7(
|
|
100
|
+
"button",
|
|
101
|
+
{
|
|
102
|
+
type: "button",
|
|
103
|
+
className: `nav-link text-start w-100 ${active ? "active" : ""}`,
|
|
104
|
+
onClick: () => onClick?.(type),
|
|
105
|
+
children: title
|
|
106
|
+
}
|
|
107
|
+
) });
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// src/components/wrappers/ContentContainer.tsx
|
|
111
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
112
|
+
function ContentContainer({ children }) {
|
|
113
|
+
return /* @__PURE__ */ jsx8("div", { className: "container-fluid flex-grow-1", children });
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// src/components/wrappers/ContentRow.tsx
|
|
117
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
118
|
+
function ContentRow({ children }) {
|
|
119
|
+
return /* @__PURE__ */ jsx9("div", { className: "row h-100 flex-nowrap", children });
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// src/components/wrappers/LayoutWrapper.tsx
|
|
123
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
124
|
+
function LayoutWrapper({ children }) {
|
|
125
|
+
return /* @__PURE__ */ jsx10("div", { className: "d-flex flex-column min-vh-100", children });
|
|
126
|
+
}
|
|
58
127
|
export {
|
|
59
|
-
|
|
128
|
+
Body,
|
|
129
|
+
Button,
|
|
130
|
+
ContentContainer,
|
|
131
|
+
ContentRow,
|
|
132
|
+
Footer,
|
|
133
|
+
Header,
|
|
134
|
+
HeaderText,
|
|
135
|
+
LayoutWrapper,
|
|
136
|
+
Navigation,
|
|
137
|
+
NavigationItem
|
|
60
138
|
};
|
|
61
139
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button.tsx"],"sourcesContent":["import { useState, type ReactNode, type MouseEvent } from \"react\";\r\n\r\nexport interface ButtonProps {\r\n buttonClassName?: string;\r\n type?: \"button\" | \"submit\" | \"reset\";\r\n disabled?: boolean;\r\n\r\n onAction?: () => Promise<unknown>;\r\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n onDone?: (result: unknown) => void;\r\n onError?: (error: unknown) => void;\r\n onFinally?: () => void;\r\n\r\n children?: ReactNode;\r\n loadingChildren?: ReactNode;\r\n\r\n renderContent?: () => ReactNode;\r\n renderLoading?: () => ReactNode;\r\n\r\n loadingText?: string;\r\n showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n buttonClassName = \"btn btn-primary btn-lg\",\r\n type = \"button\",\r\n disabled = false,\r\n\r\n onAction,\r\n onClick,\r\n onDone,\r\n onError,\r\n onFinally,\r\n\r\n children = \"Click me\",\r\n\r\n loadingChildren,\r\n renderContent,\r\n renderLoading,\r\n\r\n loadingText = \"Loading...\",\r\n showSpinner = true,\r\n}: ButtonProps) {\r\n const [loading, setLoading] = useState(false);\r\n\r\n const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n if (loading) return;\r\n\r\n onClick?.(event);\r\n if (event.defaultPrevented) return;\r\n if (!onAction) return;\r\n\r\n try {\r\n setLoading(true);\r\n const result = await onAction();\r\n onDone?.(result);\r\n } catch (error) {\r\n onError?.(error);\r\n } finally {\r\n setLoading(false);\r\n onFinally?.();\r\n }\r\n };\r\n\r\n return (\r\n <div className={`w-100 text-center mb-3`}>\r\n <button\r\n type={type}\r\n className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n onClick={handleClick}\r\n disabled={disabled || loading}\r\n >\r\n {loading ? (\r\n renderLoading?.() ??\r\n loadingChildren ?? (\r\n <>\r\n {showSpinner && (\r\n <span\r\n className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n role=\"status\"\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n {loadingText}\r\n </>\r\n )\r\n ) : (\r\n renderContent?.() ?? children\r\n )}\r\n </button>\r\n </div>\r\n );\r\n}\r\n"],"mappings":";AAAA,SAAS,gBAAiD;AA2E9C,mBAEI,KAFJ;AApDL,SAAS,OAAO;AAAA,EACrB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AAAA,EACd,cAAc;AAChB,GAAgB;AACd,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,cAAc,OAAO,UAAyC;AAClE,QAAI,QAAS;AAEb,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,QAAI,CAAC,SAAU;AAEf,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,SAAS,MAAM,SAAS;AAC9B,eAAS,MAAM;AAAA,IACjB,SAAS,OAAO;AACd,gBAAU,KAAK;AAAA,IACjB,UAAE;AACA,iBAAW,KAAK;AAChB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAW,0BACd;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,eAAe,IAAI,UAAU,uBAAuB,EAAE;AAAA,MACpE,SAAS;AAAA,MACT,UAAU,YAAY;AAAA,MAErB,oBACC,gBAAgB,KAChB,mBACE,iCACG;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,eAAY;AAAA;AAAA,QACd;AAAA,QAED;AAAA,SACH,IAGF,gBAAgB,KAAK;AAAA;AAAA,EAEzB,GACF;AAEJ;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Button.tsx","../src/components/Footer.tsx","../src/components/Header.tsx","../src/components/HeaderText.tsx","../src/components/Body.tsx","../src/components/navigation/Navigation.tsx","../src/components/navigation/NavigationItem.tsx","../src/components/wrappers/ContentContainer.tsx","../src/components/wrappers/ContentRow.tsx","../src/components/wrappers/LayoutWrapper.tsx"],"sourcesContent":["import { useState, type ReactNode, type MouseEvent } from \"react\";\r\n\r\nexport interface ButtonProps {\r\n buttonClassName?: string;\r\n type?: \"button\" | \"submit\" | \"reset\";\r\n disabled?: boolean;\r\n\r\n onAction?: () => Promise<unknown>;\r\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\r\n onDone?: (result: unknown) => void;\r\n onError?: (error: unknown) => void;\r\n onFinally?: () => void;\r\n\r\n children?: ReactNode;\r\n loadingChildren?: ReactNode;\r\n\r\n renderContent?: () => ReactNode;\r\n renderLoading?: () => ReactNode;\r\n\r\n loadingText?: string;\r\n showSpinner?: boolean;\r\n}\r\n\r\nexport function Button({\r\n buttonClassName = \"btn btn-primary btn-lg\",\r\n type = \"button\",\r\n disabled = false,\r\n\r\n onAction,\r\n onClick,\r\n onDone,\r\n onError,\r\n onFinally,\r\n\r\n children = \"Click me\",\r\n\r\n loadingChildren,\r\n renderContent,\r\n renderLoading,\r\n\r\n loadingText = \"Loading...\",\r\n showSpinner = true,\r\n}: ButtonProps) {\r\n const [loading, setLoading] = useState(false);\r\n\r\n const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {\r\n if (loading) return;\r\n\r\n onClick?.(event);\r\n if (event.defaultPrevented) return;\r\n if (!onAction) return;\r\n\r\n try {\r\n setLoading(true);\r\n const result = await onAction();\r\n onDone?.(result);\r\n } catch (error) {\r\n onError?.(error);\r\n } finally {\r\n setLoading(false);\r\n onFinally?.();\r\n }\r\n };\r\n\r\n return (\r\n <div className={`w-100 text-center mb-3`}>\r\n <button\r\n type={type}\r\n className={`${buttonClassName} ${loading ? \"async-btn--loading\" : \"\"}`}\r\n onClick={handleClick}\r\n disabled={disabled || loading}\r\n >\r\n {loading ? (\r\n renderLoading?.() ??\r\n loadingChildren ?? (\r\n <>\r\n {showSpinner && (\r\n <span\r\n className=\"spinner-border spinner-border-sm me-2 async-btn__spinner\"\r\n role=\"status\"\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n {loadingText}\r\n </>\r\n )\r\n ) : (\r\n renderContent?.() ?? children\r\n )}\r\n </button>\r\n </div>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface FooterProps {\r\n children?: ReactNode;\r\n}\r\n\r\nexport function Footer({ children }: FooterProps) {\r\n return (\r\n <footer className=\"bg-dark text-white text-center py-2 mt-auto\">\r\n {children ?? \"© 2025 Your Site — All rights reserved\"}\r\n </footer>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderProps {\r\n children?: ReactNode;\r\n}\r\n\r\nexport function Header({ children }: HeaderProps) {\r\n return (\r\n <nav className=\"navbar navbar-dark bg-dark px-3 sticky-top\">\r\n {children ?? (\r\n <span className=\"navbar-brand mb-0 h4\">My Website</span>\r\n )}\r\n </nav>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface HeaderBrandProps {\r\n children: ReactNode;\r\n}\r\n\r\nexport function HeaderText({ children }: HeaderBrandProps) {\r\n return (\r\n <span className=\"navbar-brand mb-0 h4\">\r\n {children}\r\n </span>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface BodyProps {\r\n title: ReactNode;\r\n description?: ReactNode;\r\n children?: ReactNode;\r\n}\r\n\r\nexport function Body({ title, description, children }: BodyProps) {\r\n return (\r\n <main className=\"col p-4\">\r\n <h2>{title}</h2>\r\n\r\n {description && <p>{description}</p>}\r\n\r\n <div className=\"card mt-3\">\r\n <div className=\"card-body\">\r\n {children}\r\n </div>\r\n </div>\r\n </main>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationProps {\r\n title?: ReactNode;\r\n children: ReactNode;\r\n}\r\n\r\nexport function Navigation({ title = \"Navigation\", children }: NavigationProps) {\r\n return (\r\n <nav className=\"col-auto p-3 h-100 d-flex flex-column\">\r\n <h6 className=\"text-muted text-uppercase\">{title}</h6>\r\n\r\n <ul className=\"nav nav-pills flex-column gap-2 mt-3\">\r\n {children}\r\n </ul>\r\n </nav>\r\n );\r\n}\r\n","import type { ReactNode } from \"react\";\r\n\r\ninterface NavigationItemProps {\r\n title: ReactNode;\r\n type: string;\r\n active?: boolean;\r\n onClick?: (type: string) => void;\r\n}\r\n\r\nexport function NavigationItem({ title, type, active, onClick }: NavigationItemProps) {\r\n return (\r\n <li className=\"nav-item\">\r\n <button\r\n type=\"button\"\r\n className={`nav-link text-start w-100 ${active ? \"active\" : \"\"}`}\r\n onClick={() => onClick?.(type)}\r\n >\r\n {title}\r\n </button>\r\n </li>\r\n );\r\n}\r\n","export function ContentContainer({ children }: React.PropsWithChildren) {\r\n return <div className=\"container-fluid flex-grow-1\">{children}</div>;\r\n}\r\n","export function ContentRow({ children }: React.PropsWithChildren) {\r\n return <div className=\"row h-100 flex-nowrap\">{children}</div>;\r\n}\r\n","export function LayoutWrapper({ children }: React.PropsWithChildren) {\r\n return <div className=\"d-flex flex-column min-vh-100\">{children}</div>;\r\n}\r\n"],"mappings":";AAAA,SAAS,gBAAiD;AA2E9C,mBAEI,KAFJ;AApDL,SAAS,OAAO;AAAA,EACrB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,WAAW;AAAA,EAEX;AAAA,EACA;AAAA,EACA;AAAA,EAEA,cAAc;AAAA,EACd,cAAc;AAChB,GAAgB;AACd,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,cAAc,OAAO,UAAyC;AAClE,QAAI,QAAS;AAEb,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,QAAI,CAAC,SAAU;AAEf,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,SAAS,MAAM,SAAS;AAC9B,eAAS,MAAM;AAAA,IACjB,SAAS,OAAO;AACd,gBAAU,KAAK;AAAA,IACjB,UAAE;AACA,iBAAW,KAAK;AAChB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAW,0BACd;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,eAAe,IAAI,UAAU,uBAAuB,EAAE;AAAA,MACpE,SAAS;AAAA,MACT,UAAU,YAAY;AAAA,MAErB,oBACC,gBAAgB,KAChB,mBACE,iCACG;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,eAAY;AAAA;AAAA,QACd;AAAA,QAED;AAAA,SACH,IAGF,gBAAgB,KAAK;AAAA;AAAA,EAEzB,GACF;AAEJ;;;ACpFI,gBAAAA,YAAA;AAFG,SAAS,OAAO,EAAE,SAAS,GAAgB;AAChD,SACE,gBAAAA,KAAC,YAAO,WAAU,+CACf,sBAAY,kDACf;AAEJ;;;ACFQ,gBAAAC,YAAA;AAJD,SAAS,OAAO,EAAE,SAAS,GAAgB;AAChD,SACE,gBAAAA,KAAC,SAAI,WAAU,8CACZ,sBACC,gBAAAA,KAAC,UAAK,WAAU,wBAAuB,wBAAU,GAErD;AAEJ;;;ACNI,gBAAAC,YAAA;AAFG,SAAS,WAAW,EAAE,SAAS,GAAqB;AACzD,SACE,gBAAAA,KAAC,UAAK,WAAU,wBACb,UACH;AAEJ;;;ACFI,SACE,OAAAC,MADF,QAAAC,aAAA;AAFG,SAAS,KAAK,EAAE,OAAO,aAAa,SAAS,GAAc;AAChE,SACE,gBAAAA,MAAC,UAAK,WAAU,WACd;AAAA,oBAAAD,KAAC,QAAI,iBAAM;AAAA,IAEV,eAAe,gBAAAA,KAAC,OAAG,uBAAY;AAAA,IAEhC,gBAAAA,KAAC,SAAI,WAAU,aACb,0BAAAA,KAAC,SAAI,WAAU,aACZ,UACH,GACF;AAAA,KACF;AAEJ;;;ACbI,SACE,OAAAE,MADF,QAAAC,aAAA;AAFG,SAAS,WAAW,EAAE,QAAQ,cAAc,SAAS,GAAoB;AAC9E,SACE,gBAAAA,MAAC,SAAI,WAAU,yCACb;AAAA,oBAAAD,KAAC,QAAG,WAAU,6BAA6B,iBAAM;AAAA,IAEjD,gBAAAA,KAAC,QAAG,WAAU,wCACX,UACH;AAAA,KACF;AAEJ;;;ACLM,gBAAAE,YAAA;AAHC,SAAS,eAAe,EAAE,OAAO,MAAM,QAAQ,QAAQ,GAAwB;AACpF,SACE,gBAAAA,KAAC,QAAG,WAAU,YACZ,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,6BAA6B,SAAS,WAAW,EAAE;AAAA,MAC9D,SAAS,MAAM,UAAU,IAAI;AAAA,MAE5B;AAAA;AAAA,EACH,GACF;AAEJ;;;ACpBS,gBAAAC,YAAA;AADF,SAAS,iBAAiB,EAAE,SAAS,GAA4B;AACtE,SAAO,gBAAAA,KAAC,SAAI,WAAU,+BAA+B,UAAS;AAChE;;;ACDS,gBAAAC,YAAA;AADF,SAAS,WAAW,EAAE,SAAS,GAA4B;AAChE,SAAO,gBAAAA,KAAC,SAAI,WAAU,yBAAyB,UAAS;AAC1D;;;ACDS,gBAAAC,aAAA;AADF,SAAS,cAAc,EAAE,SAAS,GAA4B;AACnE,SAAO,gBAAAA,MAAC,SAAI,WAAU,iCAAiC,UAAS;AAClE;","names":["jsx","jsx","jsx","jsx","jsxs","jsx","jsxs","jsx","jsx","jsx","jsx"]}
|