@symply.io/basic-components 1.0.0-alpha.8 → 1.0.0-beta.1

package/README.md

@@ -12,8 +12,19 @@
 - [License](#license)
 - [Components](#components)
   - [AlertDialog](#alertdialog)
+  - [Autocomplete](#autocomplete)
+  - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
+  - [BreadCrumbs](#breadcrumbs)
+  - [CheckBox](#checkbox)
+  - [CheckBoxGroup](#checkboxgroup)
+  - [Copyright](#copyright)
+  - [DateInput](#dateinput)
+    - [FullDateInput](#fulldateinput)
+    - [MonthDayInput](#monthdayinput)
+    - [MonthYearInput](#monthyearinput)
   - [DigitInput](#digitinput)
+  - [FeinInput](#feininput)
   - [FormRadioGroup](#formradiogroup)
   - [FormSelector](#formselector)
   - [HelpCaption](#helpcaption)
@@ -22,7 +33,10 @@
   - [NumberInput](#numberinput)
   - [PasswordInput](#passwordinput)
   - [PhoneNumberInput](#phonenumberinput)
+  - [Sidebar](#sidebar)
+  - [SocialInput](#socialinput)
   - [TabGroup](#tabgroup)
+  - [TablePagination](#tablepagination)
   - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
@@ -46,7 +60,18 @@ yarn add @symply.io/basic-components
 
 <h2>License</h2>
 
-This project is licensed under the terms of the [MIT license](https://github.com/rinxun/symply-basic-components/blob/main/LICENSE).
+This project is licensed under the terms of the [MIT license](https://github.com/baseline-software/symply-basic-components/blob/main/LICENSE).
+
+
+
+<h2>Common Properties</h2>
+
+All components include these 2 properties to customize the theme
+
+| Name           | Type                   | Default | Required | Description                   |
+| -------------- | ---------------------- | ------- | -------- | ----------------------------- |
+| primaryColor   | CSSProperties["color"] |         | false    | Primary color for the theme   |
+| secondaryColor | CSSProperties["color"] |         | false    | Secondary color for the theme |
 
 
 
@@ -77,6 +102,71 @@ import AlertDialog from '@symply.io/basic-components/AlertDialog';
 
 
 
+<h3>Autocomplete</h3>
+
+A normal text input enhanced by a panel of suggested options.
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { Autocomplete } from '@symply.io/basic-components/';
+// or 
+import Autocomplete from '@symply.io/basic-components/Autocomplete'; 
+```
+
+<h5>Option Props (IOption)</h5>
+
+| Name   | Type    | Default | Required | Description                |
+| ------ | ------- | ------- | -------- | -------------------------- |
+| label  | string  |         | true     | Option label.              |
+| [name] | Unknown |         | false    | Customized option property |
+
+<h5>Props</h5>
+
+| Name     | Type                   | Default | Required | Description                                                  |
+| -------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| multiple | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
+| options  | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
+| value    | string                 |         | true     | The value of the `Input` element.                            |
+
+
+
+<h3>AutocompleteWithFilter</h3>
+
+A normal text input enhanced by a panel of suggested options and filter.
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { AutocompleteWithFilter } from '@symply.io/basic-components/';
+// or 
+import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter'; 
+```
+
+<h5>Option Props (IOption)</h5>
+
+| Name   | Type    | Default | Required | Description                |
+| ------ | ------- | ------- | -------- | -------------------------- |
+| label  | string  |         | true     | Option label.              |
+| [name] | Unknown |         | false    | Customized option property |
+
+<h5>Props</h5>
+
+| Name                 | Type                   | Default | Required | Description                                                  |
+| -------------------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| disableCloseOnSelect | bool                   | false   | false    | If `true`, the popup won't close when a value is selected.   |
+| multiple             | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange             | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
+| options              | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
+| value                | string                 |         | true     | The value of the `Input` element.                            |
+
+
+
 <h3>BasicModal</h3>
 
 Reusable modal component.
@@ -111,6 +201,177 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 
 
 
+<h3>BreadCrumbs</h3>
+
+A list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".
+
+<h5>Import</h5>
+
+```typescript
+import { BreadCrumbs } from '@symply.io/basic-components/';
+// or 
+import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs'; 
+```
+
+<h5>Props</h5>
+
+| Name   | Type                                    | Default | Required | Description               |
+| ------ | --------------------------------------- | ------- | -------- | ------------------------- |
+| routes | Array<{ href?: string; label: string }> |         | true     | All routes of "ancestors" |
+
+
+
+<h3>CheckBox</h3>
+
+Checkboxes allow the user to select one or more items from a set.
+
+It is extended from `@mui/material/Checkbox`, so it includes all properties of `@mui/material/Checkbox`.
+
+<h5>Import</h5>
+
+```typescript
+import { CheckBox } from '@symply.io/basic-components/';
+// or 
+import { CheckBox } from '@symply.io/basic-components/CheckBox'; 
+// or 
+import CheckBox from '@symply.io/basic-components/CheckBox/CheckBox'; 
+```
+
+<h5>Props</h5>
+
+| Name     | Type                | Default | Required | Description                                                  |
+| -------- | ------------------- | ------- | -------- | ------------------------------------------------------------ |
+| label    | string \| ReactNode |         | true     | The label of the checkbox.                                   |
+| onChange | func                |         | true     | Callback fired when the `checkbox` value is changed.<br />**Signature:**<br/>`function(value: boolean) => void`<br/>*value:* The value of the `checkbox` element. |
+
+
+
+<h3>CheckBoxGroup</h3>
+
+Checkboxes allow the user to select one or more items from a set for a group.
+
+It is extended from `@mui/material/FormGroup`, so it includes all properties of `@mui/material/FormGroup`.
+
+<h5>Import</h5>
+
+```typescript
+import { CheckBoxGroup } from '@symply.io/basic-components/';
+// or 
+import { CheckBoxGroup } from '@symply.io/basic-components/CheckBox'; 
+// or 
+import CheckBoxGroup from '@symply.io/basic-components/CheckBox/CheckBoxGroup'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                   | Default | Required | Description                                                  |
+| ---------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| Checkboxes | Array\<CheckBoxProps\> |         | true     | The array of checkboxes.<br />See the property of [CheckBox](#checkbox) |
+
+
+
+<h3>Copyright</h3>
+
+A common component for rendering the copyright
+
+<h5>Import</h5>
+
+```typescript
+import { Copyright } from '@symply.io/basic-components/';
+// or 
+import Copyright from '@symply.io/basic-components/Copyright'; 
+```
+
+
+
+<h3>DateInput</h3>
+
+<h4>FullDateInput</h4>
+
+Input component for full date (MM/DD/YYYY)
+
+<h5>Import</h5>
+
+```typescript
+import { FullDateInput } from '@symply.io/basic-components/';
+// or 
+import { FullDateInput } from '@symply.io/basic-components/DateInput'; 
+// or 
+import FullDateInput from '@symply.io/basic-components/DateInput/FullDateInput'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                          | Default | Required | Description                                                  |
+| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| error      | boolean                       |         | false    | If `true`, the label is displayed in an error state.         |
+| helperText | string                        |         | false    | The helper text content.                                     |
+| margin     | 'dense' \| 'none' \| 'normal' | 'none'  | false    | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
+| name       | string                        |         | false    | Name attribute of the `input` element.                       |
+| onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
+| onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+| verifyFn   | func                          |         | false    | Customized verification function.                            |
+
+<h4>MonthDayInput</h4>
+
+Input component for month day (MM/DD)
+
+<h5>Import</h5>
+
+```typescript
+import { MonthDayInput } from '@symply.io/basic-components/';
+// or 
+import { MonthDayInput } from '@symply.io/basic-components/DateInput'; 
+// or 
+import MonthDayInput from '@symply.io/basic-components/DateInput/MonthDayInput'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                          | Default | Required | Description                                                  |
+| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| error      | boolean                       |         | false    | If `true`, the label is displayed in an error state.         |
+| helperText | string                        |         | false    | The helper text content.                                     |
+| margin     | 'dense' \| 'none' \| 'normal' | 'none'  | false    | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
+| name       | string                        |         | false    | Name attribute of the `input` element.                       |
+| onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
+| onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+| verifyFn   | func                          |         | false    | Customized verification function.                            |
+
+<h4>MonthYearInput</h4>
+
+Input component for month year (MM/YYYY)
+
+<h5>Import</h5>
+
+```typescript
+import { MonthYearInput } from '@symply.io/basic-components/';
+// or 
+import { MonthYearInput } from '@symply.io/basic-components/DateInput'; 
+// or 
+import MonthYearInput from '@symply.io/basic-components/DateInput/MonthYearInput'; 
+```
+
+<h5>Props</h5>
+
+| Name       | Type                          | Default | Required | Description                                                  |
+| ---------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| error      | boolean                       |         | false    | If `true`, the label is displayed in an error state.         |
+| helperText | string                        |         | false    | The helper text content.                                     |
+| margin     | 'dense' \| 'none' \| 'normal' | 'none'  | false    | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
+| name       | string                        |         | false    | Name attribute of the `input` element.                       |
+| onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
+| onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+| verifyFn   | func                          |         | false    | Customized verification function.                            |
+
+
+
 <h3>DigitInput</h3>
 
 Input component for digits. 
@@ -138,6 +399,30 @@ import DigitInput from '@symply.io/basic-components/DigitInput';
 
 
 
+<h3>FeinInput</h3>
+
+Input component for FEIN. 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { FeinInput } from '@symply.io/basic-components/';
+// or 
+import FeinInput from '@symply.io/basic-components/FeinInput'; 
+```
+
+<h5>Props</h5>
+
+| Name     | Type   | Default | Required | Description                                                  |
+| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| onChange | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| value    | string |         | true     | The value of the `Input` element.                            |
+| verifyFn | func   |         | false    | Customized verification function.                            |
+
+
+
 <h3>FormRadioGroup</h3>
 
 Radio Group allow the user to select one option from a set.
@@ -165,7 +450,7 @@ import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup';
 | color     | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' | 'primary' | false    | The main color of the component.                             |
 | disabled  | bool                                                         | false     | false    | If `true`, the component is disabled.                        |
 | formLabel | string                                                       |           | false    | The label of the `Radio` element.                            |
-| onChange  | func                                                         |           | true     | Callback fired when the `Radio` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Radio` element. |
+| onChange  | func                                                         |           | true     | Callback fired when the `Radio` value is changed.<br />**Signature:**<br/>`function(value: string|number|boolean) => void`<br/>*value:* The value of the `Radio` element. |
 | options   | Array\<IRadioOption\>                                        |           | true     | The radio options. See the **Radio Option Props** above.     |
 | value     | string \| number \| bool                                     |           | true     | The value of the `Radio` element.                            |
 | tooltip   | string                                                       |           | false    | A tooltip for the `Radio` element.                           |
@@ -195,18 +480,16 @@ import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup';
 
 <h5>Base Props</h5>
 
-| Name           | Type                                  | Default    | Required | Description                                                 |
-| -------------- | ------------------------------------- | ---------- | -------- | ----------------------------------------------------------- |
-| disabled       | bool                                  | false      | false    | If `true`, the component is disabled.                       |
-| error          | bool                                  | false      | false    | If `true`, the component would be shown with red color.     |
-| helperText     | string                                |            | false    | The helper text of the `Select` element.                    |
-| label          | string                                |            | false    | The label of `Select` element.                              |
-| multiple       | bool                                  | false      | false    | If `true`, you can select more than 1 option.               |
-| name           | string                                |            | false    | The name of the `Select` element.                           |
-| options        | Array\<IRadioOption\>                 |            | true     | The radio options. See the **Selector Option Props** above. |
-| showHelperText | bool                                  | false      | False    | If `true`, show the helper text.                            |
-| tooltip        | string                                |            | false    | A tooltip for the `Select` element.                         |
-| variant        | 'filled' \| 'contained' \| 'outlined' | 'outlined' | false    | The variant of the `Select` element.                        |
+It is extended from `@mui/material/FormControl`, so it includes all properties of `@mui/material/FormControl`.
+
+| Name           | Type                  | Default | Required | Description                                                 |
+| -------------- | --------------------- | ------- | -------- | ----------------------------------------------------------- |
+| helperText     | string                |         | false    | The helper text of the `Select` element.                    |
+| label          | string                |         | false    | The label of `Select` element.                              |
+| multiple       | bool                  | false   | false    | If `true`, you can select more than 1 option.               |
+| options        | Array\<IRadioOption\> |         | true     | The radio options. See the **Selector Option Props** above. |
+| showHelperText | bool                  | false   | False    | If `true`, show the helper text.                            |
+| tooltip        | string                |         | false    | A tooltip for the `Select` element.                         |
 
 <h5>Simple Selector Props</h5> Extended from the Base Props
 
@@ -393,6 +676,63 @@ import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
 
 
 
+<h3>Sidebar</h3>
+
+Sidebars for navigation.
+
+<h5>Import</h5>
+
+```typescript
+import { Sidebar } from '@symply.io/basic-components/';
+// or 
+import Sidebar from '@symply.io/basic-components/Sidebar'; 
+```
+
+<h5>Sidebar Item Props</h5>
+
+| Name         | Type                      | Default                               | Required | Description                                                  |
+| ------------ | ------------------------- | ------------------------------------- | -------- | ------------------------------------------------------------ |
+| beta         | boolean                   |                                       | false    | If `true` the beta tag will be rendered.                     |
+| betaTagColor | CSSProperties["color"]    | \#00A2A9                              | false    | The value of the `Input` element.                            |
+| children     | Array\<SidebarItemProps\> |                                       | false    | If not undefined the sub sidebar items would be rendered.    |
+| icon         | Element                   |                                       | true     | The icon adornment.                                          |
+| lock         | boolean                   |                                       | false    | If `true` the lock icon will be rendered, and the sidebar item would be disabled. |
+| name         | string                    |                                       | true     | The sidebar item label.                                      |
+| path         | string                    |                                       | true     | The link path of the sidebar item.                           |
+| titleForLock | string                    | "Feature is unavailable on Free plan" | false    | The tip when the lock is `true`                              |
+
+<h5>Props</h5>
+
+| Name  | Type                      | Default | Required | Description    |
+| ----- | ------------------------- | ------- | -------- | -------------- |
+| items | Array\<SidebarItemProps\> |         | true     | Sidebar items. |
+
+
+
+<h3>SocialInput</h3>
+
+Input component for Social Security Number (SSN). 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { SocialInput } from '@symply.io/basic-components/';
+// or 
+import SocialInput from '@symply.io/basic-components/SocialInput'; 
+```
+
+<h5>Props</h5>
+
+| Name     | Type   | Default | Required | Description                                                  |
+| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| onChange | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| value    | string |         | true     | The value of the `Input` element.                            |
+| verifyFn | func   |         | false    | Customized verification function.                            |
+
+
+
 <h3>TabGroup</h3>
 
 Tabs group. 
@@ -417,6 +757,32 @@ import TabGroup from '@symply.io/basic-components/TabGroup';
 
 
 
+<h3>TablePagination</h3>
+
+Reusable pagination component for the material table
+
+<h5>Import</h5>
+
+```typescript
+import { TablePagination } from '@symply.io/basic-components/';
+// or 
+import TablePagination from '@symply.io/basic-components/TablePagination'; 
+```
+
+<h5>Props</h5>
+
+| Name                | Type            | Default | Required | Description                                                  |
+| ------------------- | --------------- | ------- | -------- | ------------------------------------------------------------ |
+| colSpan             | number          |         | true     | The number of columns a cell should span.                    |
+| count               | number          |         | true     | The total count of all data.                                 |
+| onPageChange        | func            |         | true     | Callback fired when the `page` value is changed.<br />**Signature:**<br/>`function(event: MouseEvent<HTMLButtonElement> ) => void,value: number`<br/>*value:* The value of the `page` . |
+| onRowsPerPageChange | func            |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(event: ChangeEvent<HTMLInputElement ` |
+| page                | number          |         | true     | The current page index.                                      |
+| rowsPerPage         | number          |         | true     | How many rows per page.                                      |
+| rowsPerPageOptions  | Array\<number\> |         | true     | The options for setting how many rows per page.              |
+
+
+
 <h3>TextInput</h3>
 
 Regular Input component. 

package/Sidebar/SidebarItem.d.ts

@@ -0,0 +1,3 @@
+import { SidebarItemProps } from "./types";
+declare function SidebarItem(props: SidebarItemProps): JSX.Element;
+export default SidebarItem;

package/Sidebar/SidebarItem.js

@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import colorAlpha from "color-alpha";
+import Chip from "@mui/material/Chip";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import LockIcon from "@mui/icons-material/LockRounded";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function SidebarItem(props) {
+    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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onClick = props.onClick;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
+                paddingLeft: isSub ? theme.spacing(4) : undefined,
+                display: "flex",
+                width: "100%",
+                "&:hover": {
+                    backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
+                },
+                backgroundColor: active
+                    ? colorAlpha(theme.palette.primary.main, 0.2)
+                    : undefined
+            } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
+                        color: active ? theme.palette.primary.main : undefined,
+                        borderRadius: active ? "5px" : undefined,
+                        opacity: active ? "1" : undefined,
+                        fontWeight: active ? 600 : undefined
+                    } }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
+                        color: active ? theme.palette.primary.main : "textPrimary",
+                        sx: {
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            borderRadius: active ? "5px" : undefined,
+                            opacity: active ? "1" : undefined,
+                            fontWeight: active ? 600 : undefined
+                        }
+                    }, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
+                        fontSize: "1rem"
+                    }, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
+                        borderRadius: theme.spacing(0.5),
+                        backgroundColor: betaTagColor,
+                        color: "white",
+                        height: theme.spacing(2.5),
+                        fontSize: theme.spacing(1.25),
+                        padding: theme.spacing(0, 0.75)
+                    } })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })) })));
+}
+export default SidebarItem;

package/Sidebar/SidebarItemsGroup.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SidebarItemsGroupProps } from "./types";
+declare function SidebarItemsGroup(props: SidebarItemsGroupProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SidebarItemsGroup>;
+export default _default;

package/Sidebar/SidebarItemsGroup.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, memo, useMemo, useEffect, useCallback } from "react";
+import { Match, useLocation } from "@reach/router";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Collapse from "@mui/material/Collapse";
+import List from "@mui/material/List";
+import useCustomTheme from "../useCustomTheme";
+import SidebarItem from "./SidebarItem";
+import SidebarLink from "./SidebarLink";
+function SidebarItemsGroup(props) {
+    var item = props.item;
+    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, primaryColor = item.primaryColor, secondaryColor = item.secondaryColor;
+    var pathname = useLocation().pathname;
+    var match = useMemo(function () {
+        return pathname.includes(path);
+    }, [path, pathname]);
+    var _a = useState(match), expand = _a[0], setExpand = _a[1];
+    var onToggleExpand = useCallback(function () {
+        setExpand(function (v) { return !v; });
+    }, []);
+    useEffect(function () {
+        setExpand(match);
+    }, [match]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { 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, primaryColor: primaryColor, secondaryColor: secondaryColor, 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, primaryColor: c.primaryColor, secondaryColor: c.secondaryColor, isSub: true })); } }), c.name)); }) })) })))] })));
+}
+export default memo(SidebarItemsGroup);

package/Sidebar/SidebarLink.d.ts

@@ -0,0 +1,3 @@
+import { SidebarLinkProps } from "./types";
+declare function SidebarLink(props: SidebarLinkProps): JSX.Element;
+export default SidebarLink;

package/Sidebar/SidebarLink.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, useLocation } from "@reach/router";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+import SidebarItem from "./SidebarItem";
+function SidebarLink(props) {
+    var pathname = useLocation().pathname;
+    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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Link, __assign({ to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
+                color: primaryColor || theme.palette.primary.main,
+                textDecoration: "none"
+            } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor, primaryColor: primaryColor, secondaryColor: secondaryColor }, rest), name) })) })));
+}
+export default SidebarLink;

package/Sidebar/index.d.ts

@@ -0,0 +1,7 @@
+import SidebarItem from "./SidebarItem";
+import SidebarItemsGroup from "./SidebarItemsGroup";
+import { SidebarProps } from "./types";
+declare function Sidebar(props: SidebarProps): JSX.Element;
+export default Sidebar;
+export { SidebarItem, SidebarItemsGroup };
+export * from "./types";