@symply.io/basic-components 1.0.0-alpha.8 → 1.0.0-bata.7

package/README.md

@@ -12,8 +12,20 @@
 - [License](#license)
 - [Components](#components)
   - [AlertDialog](#alertdialog)
+  - [Autocomplete](#autocomplete)
+  - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
+  - [BasicTable](#basictable)
+  - [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 +34,10 @@
   - [NumberInput](#numberinput)
   - [PasswordInput](#passwordinput)
   - [PhoneNumberInput](#phonenumberinput)
+  - [Sidebar](#sidebar)
+  - [SocialInput](#socialinput)
   - [TabGroup](#tabgroup)
+  - [TablePagination](#tablepagination)
   - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
@@ -46,7 +61,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 +103,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 +202,232 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 
 
 
+<h3>BasicTable</h3>
+
+Reusable table component
+
+<h5>Import</h5>
+
+```tsx
+import { BasicTable, useTable } from '@symply.io/basic-components';
+// or 
+import BasicTable, { useTable } from '@symply.io/basic-components/BreadCrumbs/BasicTable'; 
+```
+
+<h5>Column Props (IColumn)</h5>
+
+| Name        | Type                        | Default | Required | Description                                     |
+| ----------- | --------------------------- | ------- | -------- | ----------------------------------------------- |
+| Body        | ReactElement                |         | true     | The component to render the column body cell.   |
+| Header      | ReactElement                |         | true     | The component to render the column header cell. |
+| Footer      | ReactElement                |         | false    | The component to render the column footer cell. |
+| accessor    | string                      |         | true     | The key of the column, it should be unique.     |
+| align       | "left" \|"center" \|"right" |         | false    | The alignment of the column.                    |
+| canBeFrozen | bool                        |         | false    | If true, the column can be frozen               |
+| canSort     | bool                        |         | false    | If true, the column can be sortable.            |
+
+<h5>Hook Props</h5>
+
+| Name          | Type                       | Default | Required | Description                                 |
+| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
+| columns       | Array\<IColumn\>           |         | true     | table columns                               |
+| data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
+| disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
+| initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
+| onSort        | func                       |         | false    | The function for sorting rows.              |
+
+<h5>Hook Returns</h5>
+
+| Name    | Type                 | Description               |
+| ------- | -------------------- | ------------------------- |
+| headers | Array\<IHeader\>     | The cells for the header. |
+| columns | Array\<IBodyColumn\> | The cells for the body.   |
+| footers | Array\<IFooter>      | The cells for the footer. |
+| rows    | Array<IRow\>         | The rows for the table.   |
+
+<h5>Component Props</h5>
+
+| Name       | Type                 | Default    | Required | Description                               |
+| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
+| headers    | Array\<IHeader\>     |            | true     | The cells for the header. (from the hook) |
+| columns    | Array\<IBodyColumn\> |            | true     | The cells for the body. (from the hook)   |
+| footers    | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook) |
+| noDataText | string               | 'No Data!' | false    | The text when no data rendered.           |
+| rows       | Array<IRow\>         |            | true     | The rows for the table. (from the hook)   |
+
+
+
+<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.                  |
+| onValidate | func                          |         | false    | Customized validation function.                              |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+
+<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.                  |
+| onValidate | func                          |         | false    | Customized validation function.                              |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+
+<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.                  |
+| onValidate | func                          |         | false    | Customized validation function.                              |
+| value      | string                        |         | true     | The value of the `Input` element.                            |
+
+
+
 <h3>DigitInput</h3>
 
 Input component for digits. 
@@ -138,6 +455,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. |
+| onValidate | func   |         | false    | Customized validation function.                              |
+| value      | string |         | true     | The value of the `Input` element.                            |
+
+
+
 <h3>FormRadioGroup</h3>
 
 Radio Group allow the user to select one option from a set.
@@ -165,7 +506,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 +536,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
 
@@ -354,7 +693,7 @@ import { ConfirmPassword } from '@symply.io/basic-components/PasswordInput';
 | 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. |
-| onVerify     | func                                               |                                                              | false    | Customized verify function when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate   | func                                               |                                                              | false    | Customized verify function when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
 | strategies   | { [key: string]: { label: string, regex: RegExp }} | {<br />uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },<br />lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },<br />specialCharacter: { label: "1 Special Character", regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{}~]/ },<br />number: { label: "1 Number", regex: /\d+/ },<br />minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }<br />} | false    | The strategies of the password                               |
 | successColor | Color                                              | 'green'                                                      | false    | The color of component when success.                         |
 | value        | string                                             |                                                              | true     | The password value.                                          |
@@ -389,10 +728,68 @@ import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
 | ------------ | ------ | ------- | -------- | ------------------------------------------------------------ |
 | endAdornment | node   |         | false    | An end adornment element for the `Input` element.            |
 | 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. |
+| onValidate   | func   |         | false    | Customized validation function.                              |
 | value        | string |         | true     | The value of the `Input` element.                            |
 
 
 
+<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. |
+| onValidate | func   |         | false    | Customized validation function.                              |
+| value      | string |         | true     | The value of the `Input` element.                            |
+
+
+
 <h3>TabGroup</h3>
 
 Tabs group. 
@@ -417,6 +814,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);