@symply.io/basic-components 1.0.6 → 1.0.8-beta.1
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/FileUploader/index.js +23 -22
- package/FileUploader/useInteractions.js +4 -4
- package/README.md +11 -11
- package/Sidebar/SidebarItem.js +34 -35
- package/Sidebar/SidebarItemsGroup.js +4 -5
- package/Sidebar/SidebarLink.js +6 -7
- package/Sidebar/index.js +5 -5
- package/Sidebar/types.d.ts +2 -0
- package/package.json +1 -1
package/FileUploader/index.js
CHANGED
@@ -28,35 +28,36 @@ import Typography from "@mui/material/Typography";
|
|
28
28
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
29
29
|
import CircularProgress from "@mui/material/CircularProgress";
|
30
30
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
31
|
+
import AlertDialog from "../AlertDialog";
|
31
32
|
import useInteractions from "./useInteractions";
|
32
33
|
import useCustomTheme from "../useCustomTheme";
|
33
34
|
function FileUploader(props) {
|
34
|
-
var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b,
|
35
|
+
var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
|
35
36
|
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
36
37
|
var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
|
37
|
-
var
|
38
|
-
return (
|
39
|
-
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
40
|
-
cursor: disabled ? "not-allowed" : "pointer"
|
41
|
-
} }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
|
42
|
-
border: "1px dashed #0099a7",
|
43
|
-
borderRadius: "5px",
|
44
|
-
outline: "none",
|
45
|
-
backgroundColor: "#F2F2F2",
|
46
|
-
maxWidth: maxWidth,
|
47
|
-
height: height,
|
48
|
-
width: "100%"
|
49
|
-
} }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
|
50
|
-
fontSize: ".875rem",
|
51
|
-
textAlign: "center"
|
52
|
-
} }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
|
53
|
-
backgroundColor: "white !important",
|
54
|
-
color: disabled
|
55
|
-
? theme.palette.grey[400]
|
56
|
-
: theme.palette.primary.main,
|
38
|
+
var _e = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _e.alertArgs, rootProps = _e.rootProps, onCloseAlert = _e.onCloseAlert, onSelectFile = _e.onSelectFile, getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
|
39
|
+
return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
|
57
40
|
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
58
41
|
cursor: disabled ? "not-allowed" : "pointer"
|
59
|
-
}
|
42
|
+
} }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
|
43
|
+
border: "1px dashed #0099a7",
|
44
|
+
borderRadius: "5px",
|
45
|
+
outline: "none",
|
46
|
+
backgroundColor: "#F2F2F2",
|
47
|
+
maxWidth: maxWidth,
|
48
|
+
height: height,
|
49
|
+
width: "100%"
|
50
|
+
} }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
|
51
|
+
fontSize: ".875rem",
|
52
|
+
textAlign: "center"
|
53
|
+
} }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
|
54
|
+
backgroundColor: "white !important",
|
55
|
+
color: disabled
|
56
|
+
? theme.palette.grey[400]
|
57
|
+
: theme.palette.primary.main,
|
58
|
+
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
59
|
+
cursor: disabled ? "not-allowed" : "pointer"
|
60
|
+
}, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))), _jsx(AlertDialog, __assign({ open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert }, { children: alertArgs.message }))] })));
|
60
61
|
}
|
61
62
|
export default FileUploader;
|
62
63
|
export * from "./types";
|
@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
|
|
12
12
|
import { useState, useCallback, useMemo } from "react";
|
13
13
|
import { useDropzone } from "react-dropzone";
|
14
14
|
function useInteractions(props) {
|
15
|
-
var
|
15
|
+
var _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, maxFiles = props.maxFiles, _c = props.maxSize, maxSize = _c === void 0 ? 1024 * 1024 * 5 : _c, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
|
16
16
|
var ERROR_TYPE_MSG = useMemo(function () {
|
17
17
|
return wrongFileTypeErrorText ||
|
18
18
|
"The type of the file you uploaded is not accepted, please reupload!";
|
@@ -21,7 +21,7 @@ function useInteractions(props) {
|
|
21
21
|
return sizeExceededErrorText ||
|
22
22
|
"Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
|
23
23
|
}, [sizeExceededErrorText, maxSize]);
|
24
|
-
var
|
24
|
+
var _d = useState({ open: false, message: "" }), alertArgs = _d[0], setAlertArgs = _d[1];
|
25
25
|
var onOpenAlert = useCallback(function (message) {
|
26
26
|
setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
|
27
27
|
}, []);
|
@@ -51,14 +51,14 @@ function useInteractions(props) {
|
|
51
51
|
onUpload(acceptedFiles);
|
52
52
|
}
|
53
53
|
}, [accept, onUpload]);
|
54
|
-
var
|
54
|
+
var _e = useDropzone({
|
55
55
|
onDrop: onDrop,
|
56
56
|
accept: accept,
|
57
57
|
multiple: multiple,
|
58
58
|
disabled: disabled,
|
59
59
|
maxSize: maxSize,
|
60
60
|
maxFiles: maxFiles
|
61
|
-
}), getRootProps =
|
61
|
+
}), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, onSelectFile = _e.open;
|
62
62
|
var rootProps = getRootProps({
|
63
63
|
onClick: function (e) { return e.stopPropagation(); },
|
64
64
|
onKeyDown: function (e) {
|
package/README.md
CHANGED
@@ -215,7 +215,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
|
|
215
215
|
import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
|
216
216
|
```
|
217
217
|
|
218
|
-
<h5>Column Props (
|
218
|
+
<h5>Column Props (ColumnBaseProps)</h5>
|
219
219
|
|
220
220
|
| Name | Type | Default | Required | Description |
|
221
221
|
| ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
|
@@ -234,31 +234,31 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
|
|
234
234
|
|
235
235
|
| Name | Type | Default | Required | Description |
|
236
236
|
| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
|
237
|
-
| columns | Array\<
|
237
|
+
| columns | Array\<ColumnBaseProps\> | | true | table columns |
|
238
238
|
| data | Array<{ [name]: unknown }> | | true | table data/rows |
|
239
239
|
| disableSortBy | bool | | false | If true, the whole table can't be sortable. |
|
240
240
|
| initialState | { sortBy?: SortByProps } | | false | Set the initial states |
|
241
|
-
| onRowClick | func | | false | The function for row clicking. |
|
242
241
|
| onSort | func | | false | The function for sorting rows. |
|
243
242
|
|
244
243
|
<h5>Hook Returns</h5>
|
245
244
|
|
246
245
|
| Name | Type | Description |
|
247
246
|
| ------- | -------------------- | ------------------------- |
|
248
|
-
| headers | Array\<
|
249
|
-
| columns | Array\<
|
250
|
-
| footers | Array\<
|
251
|
-
| rows | Array<
|
247
|
+
| headers | Array\<HeaderProps\> | The cells for the header. |
|
248
|
+
| columns | Array\<ColumnProps\> | The cells for the body. |
|
249
|
+
| footers | Array\<FooterProps> | The cells for the footer. |
|
250
|
+
| rows | Array<RowProps\> | The rows for the table. |
|
252
251
|
|
253
252
|
<h5>Component Props</h5>
|
254
253
|
|
255
254
|
| Name | Type | Default | Required | Description |
|
256
255
|
| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
|
257
|
-
| headers | Array\<
|
258
|
-
| columns | Array\<
|
259
|
-
| footers | Array\<
|
256
|
+
| headers | Array\<HeaderProps\> | | true | The cells for the header. (from the hook) |
|
257
|
+
| columns | Array\<ColumnProps\> | | true | The cells for the body. (from the hook) |
|
258
|
+
| footers | Array\<FooterProps> | [] | false | The cells for the footer. (from the hook) |
|
259
|
+
| onRowClick | func | | false | The function for row clicking. |
|
260
260
|
| noDataText | string | 'No Data!' | false | The text when no data rendered. |
|
261
|
-
| rows | Array<
|
261
|
+
| rows | Array<RowProps\> | | true | The rows for the table. (from the hook) |
|
262
262
|
|
263
263
|
|
264
264
|
|
package/Sidebar/SidebarItem.js
CHANGED
@@ -18,45 +18,44 @@ import ListItemIcon from "@mui/material/ListItemIcon";
|
|
18
18
|
import LockIcon from "@mui/icons-material/LockRounded";
|
19
19
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
20
20
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
21
|
-
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
22
21
|
import useCustomTheme from "../useCustomTheme";
|
23
22
|
function SidebarItem(props) {
|
24
|
-
var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a,
|
25
|
-
var theme = useCustomTheme(
|
26
|
-
return (
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
23
|
+
var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, onClick = props.onClick;
|
24
|
+
var theme = useCustomTheme();
|
25
|
+
return (_jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
|
26
|
+
paddingLeft: isSub ? theme.spacing(4) : undefined,
|
27
|
+
display: "flex",
|
28
|
+
width: "100%",
|
29
|
+
"&:hover": {
|
30
|
+
backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
|
31
|
+
},
|
32
|
+
backgroundColor: active
|
33
|
+
? colorAlpha(theme.palette.primary.main, 0.2)
|
34
|
+
: undefined
|
35
|
+
} }, { children: [_jsx(ListItemIcon, __assign({ sx: {
|
36
|
+
color: active ? theme.palette.primary.main : undefined,
|
37
|
+
borderRadius: active ? "5px" : undefined,
|
38
|
+
opacity: active ? "1" : undefined,
|
39
|
+
fontWeight: active ? 600 : undefined
|
40
|
+
} }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
|
41
|
+
color: active ? theme.palette.primary.main : "textPrimary",
|
42
|
+
sx: {
|
43
|
+
overflow: "hidden",
|
44
|
+
textOverflow: "ellipsis",
|
45
|
+
whiteSpace: "nowrap",
|
38
46
|
borderRadius: active ? "5px" : undefined,
|
39
47
|
opacity: active ? "1" : undefined,
|
40
48
|
fontWeight: active ? 600 : undefined
|
41
|
-
}
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
fontSize: "1rem"
|
53
|
-
}, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
|
54
|
-
borderRadius: theme.spacing(0.5),
|
55
|
-
backgroundColor: betaTagColor,
|
56
|
-
color: "white",
|
57
|
-
height: theme.spacing(2.5),
|
58
|
-
fontSize: theme.spacing(1.25),
|
59
|
-
padding: theme.spacing(0, 0.75)
|
60
|
-
} })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })) })));
|
49
|
+
}
|
50
|
+
}, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
|
51
|
+
fontSize: "1rem"
|
52
|
+
}, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
|
53
|
+
borderRadius: theme.spacing(0.5),
|
54
|
+
backgroundColor: betaTagColor,
|
55
|
+
color: "white",
|
56
|
+
height: theme.spacing(2.5),
|
57
|
+
fontSize: theme.spacing(1.25),
|
58
|
+
padding: theme.spacing(0, 0.75)
|
59
|
+
} })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })));
|
61
60
|
}
|
62
61
|
export default SidebarItem;
|
@@ -9,10 +9,9 @@ var __assign = (this && this.__assign) || function () {
|
|
9
9
|
};
|
10
10
|
return __assign.apply(this, arguments);
|
11
11
|
};
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
13
13
|
import { useState, memo, useMemo, useEffect, useCallback } from "react";
|
14
14
|
import { Match, useLocation } from "@reach/router";
|
15
|
-
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
16
15
|
import Collapse from "@mui/material/Collapse";
|
17
16
|
import List from "@mui/material/List";
|
18
17
|
import useCustomTheme from "../useCustomTheme";
|
@@ -20,7 +19,7 @@ import SidebarItem from "./SidebarItem";
|
|
20
19
|
import SidebarLink from "./SidebarLink";
|
21
20
|
function SidebarItemsGroup(props) {
|
22
21
|
var item = props.item;
|
23
|
-
var name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor
|
22
|
+
var name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
|
24
23
|
var pathname = useLocation().pathname;
|
25
24
|
var match = useMemo(function () {
|
26
25
|
return pathname.includes(path);
|
@@ -32,7 +31,7 @@ function SidebarItemsGroup(props) {
|
|
32
31
|
useEffect(function () {
|
33
32
|
setExpand(match);
|
34
33
|
}, [match]);
|
35
|
-
var theme = useCustomTheme(
|
36
|
-
return (_jsxs(
|
34
|
+
var theme = useCustomTheme();
|
35
|
+
return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, isSub: true })); } }), c.name)); }) })) })))] }));
|
37
36
|
}
|
38
37
|
export default memo(SidebarItemsGroup);
|
package/Sidebar/SidebarLink.js
CHANGED
@@ -22,16 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
24
|
import { Link, useLocation } from "@reach/router";
|
25
|
-
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
26
25
|
import useCustomTheme from "../useCustomTheme";
|
27
26
|
import SidebarItem from "./SidebarItem";
|
28
27
|
function SidebarLink(props) {
|
29
28
|
var pathname = useLocation().pathname;
|
30
|
-
var name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor,
|
31
|
-
var theme = useCustomTheme(
|
32
|
-
return (_jsx(
|
33
|
-
|
34
|
-
|
35
|
-
|
29
|
+
var name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, rest = __rest(props, ["name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor"]);
|
30
|
+
var theme = useCustomTheme();
|
31
|
+
return (_jsx(Link, __assign({ to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
|
32
|
+
color: theme.palette.primary.main,
|
33
|
+
textDecoration: "none"
|
34
|
+
} }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor }, rest), name) })));
|
36
35
|
}
|
37
36
|
export default SidebarLink;
|
package/Sidebar/index.js
CHANGED
@@ -12,17 +12,17 @@ var __assign = (this && this.__assign) || function () {
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
13
|
import { Match } from "@reach/router";
|
14
14
|
import List from "@mui/material/List";
|
15
|
-
import useTheme from "@mui/material/styles/useTheme";
|
16
15
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
16
|
+
import useCustomTheme from "../useCustomTheme";
|
17
17
|
import SidebarItem from "./SidebarItem";
|
18
18
|
import SidebarItemsGroup from "./SidebarItemsGroup";
|
19
19
|
import SidebarLink from "./SidebarLink";
|
20
20
|
function Sidebar(props) {
|
21
|
-
var items = props.items;
|
22
|
-
var theme =
|
21
|
+
var items = props.items, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
|
22
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
23
23
|
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(List, { children: items.map(function (i) {
|
24
|
-
var children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor
|
25
|
-
return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor
|
24
|
+
var children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
|
25
|
+
return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
|
26
26
|
}) }) })));
|
27
27
|
}
|
28
28
|
export default Sidebar;
|
package/Sidebar/types.d.ts
CHANGED
@@ -15,6 +15,8 @@ export interface SidebarBaseProps extends SidebarItemBaseProps {
|
|
15
15
|
}
|
16
16
|
export interface SidebarProps {
|
17
17
|
items: Array<SidebarBaseProps>;
|
18
|
+
primaryColor?: CSSProperties["color"];
|
19
|
+
secondaryColor?: CSSProperties["color"];
|
18
20
|
}
|
19
21
|
export interface SidebarItemProps extends Omit<SidebarItemBaseProps, "path"> {
|
20
22
|
active?: boolean;
|