@symply.io/basic-components 1.0.0-alpha.2 → 1.0.0-alpha.20

package/README.md

@@ -12,8 +12,15 @@
 - [License](#license)
 - [Components](#components)
   - [AlertDialog](#alertdialog)
+  - [Autocomplete](#autocomplete)
+  - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
+  - [BreadCrumbs](#breadcrumbs)
+  - [CheckBox](#checkbox)
+  - [CheckBoxGroup](#checkboxgroup)
+  - [Copyright](#copyright)
   - [DigitInput](#digitinput)
+  - [FeinInput](#feininput)
   - [FormRadioGroup](#formradiogroup)
   - [FormSelector](#formselector)
   - [HelpCaption](#helpcaption)
@@ -23,6 +30,8 @@
   - [PasswordInput](#passwordinput)
   - [PhoneNumberInput](#phonenumberinput)
   - [TabGroup](#tabgroup)
+  - [TablePagination](#tablepagination)
+  - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
 - [Changelog](#changelog)
@@ -33,7 +42,7 @@
 
 It is available as an [npm package](https://www.npmjs.com/package/@symply.io/basic-components).
 
-```bash
+```shell
 // with npm
 npm install @symply.io/basic-components
 
@@ -45,7 +54,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 |
 
 
 
@@ -58,9 +78,9 @@ Diglog component for alerts or confirmations.
 <h5>Import</h5>
 
 ```typescript
-import { AlertDialog } from '@symply.io/symply-basic-components';
+import { AlertDialog } from '@symply.io/basic-components/';
 // or 
-import AlertDialog from '@symply.io/symply-basic-components/AlertDialog'; 
+import AlertDialog from '@symply.io/basic-components/AlertDialog'; 
 ```
 
 <h5>Props</h5>
@@ -76,6 +96,71 @@ import AlertDialog from '@symply.io/symply-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.
@@ -83,9 +168,9 @@ Reusable modal component.
 <h5>Import</h5>
 
 ```typescript
-import { BasicModal } from '@symply.io/symply-basic-components';
+import { BasicModal } from '@symply.io/basic-components/';
 // or 
-import BasicModal from '@symply.io/symply-basic-components/BasicModal'; 
+import BasicModal from '@symply.io/basic-components/BasicModal'; 
 ```
 
 <h5>Props</h5>
@@ -110,6 +195,89 @@ import BasicModal from '@symply.io/symply-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>DigitInput</h3>
 
 Input component for digits. 
@@ -119,9 +287,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { DigitInput } from '@symply.io/symply-basic-components';
+import { DigitInput } from '@symply.io/basic-components/';
 // or 
-import DigitInput from '@symply.io/symply-basic-components/DigitInput'; 
+import DigitInput from '@symply.io/basic-components/DigitInput'; 
 ```
 
 <h5>Props</h5>
@@ -137,6 +305,30 @@ import DigitInput from '@symply.io/symply-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.
@@ -144,9 +336,9 @@ Radio Group allow the user to select one option from a set.
 <h5>Import</h5>
 
 ```typescript
-import { FormRadioGroup } from '@symply.io/symply-basic-components';
+import { FormRadioGroup } from '@symply.io/basic-components/';
 // or 
-import FormRadioGroup from '@symply.io/symply-basic-components/FormRadioGroup'; 
+import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup'; 
 ```
 
 <h5>Radio Option Props</h5>
@@ -164,7 +356,7 @@ import FormRadioGroup from '@symply.io/symply-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.                           |
@@ -179,9 +371,9 @@ Selector components are used for collecting user provided information from a lis
 
 ```typescript
 // Simple Selector
-import { SimpleSelector } from '@symply.io/symply-basic-components/FormSelector';
+import { SimpleSelector } from '@symply.io/basic-components/FormSelector';
 // Multiple Selector 
-import { MultipleSelector } from '@symply.io/symply-basic-components/FormRadioGroup'; 
+import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup'; 
 ```
 
 <h5>Selector Option Props</h5>
@@ -194,18 +386,16 @@ import { MultipleSelector } from '@symply.io/symply-basic-components/FormRadioGr
 
 <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
 
@@ -230,9 +420,9 @@ You can use it to add a hint/help paragraph.
 <h5>Import</h5>
 
 ```typescript
-import { HelpCaption } from '@symply.io/symply-basic-components';
+import { HelpCaption } from '@symply.io/basic-components/';
 // or 
-import HelpCaption from '@symply.io/symply-basic-components/HelpCaption';
+import HelpCaption from '@symply.io/basic-components/HelpCaption';
 ```
 
 <h5>Props</h5>
@@ -254,9 +444,9 @@ A modal for loading.
 <h5>Import</h5>
 
 ```typescript
-import { LoadingModal } from '@symply.io/symply-basic-components';
+import { LoadingModal } from '@symply.io/basic-components/';
 // or 
-import LoadingModal from '@symply.io/symply-basic-components/LoadingModal';
+import LoadingModal from '@symply.io/basic-components/LoadingModal';
 ```
 
 <h5>Props</h5>
@@ -278,9 +468,9 @@ A button with menu options.
 <h5>Import</h5>
 
 ```typescript
-import { MenuButtonGroup } from '@symply.io/symply-basic-components';
+import { MenuButtonGroup } from '@symply.io/basic-components/';
 // or 
-import MenuButtonGroup from '@symply.io/symply-basic-components/MenuButtonGroup';
+import MenuButtonGroup from '@symply.io/basic-components/MenuButtonGroup';
 ```
 
 <h5>Menu Button Props</h5>
@@ -315,9 +505,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { NumberInput } from '@symply.io/symply-basic-components';
+import { NumberInput } from '@symply.io/basic-components/';
 // or 
-import NumberInput from '@symply.io/symply-basic-components/NumberInput'; 
+import NumberInput from '@symply.io/basic-components/NumberInput'; 
 ```
 
 <h5>Props</h5>
@@ -343,9 +533,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 
 ```typescript
 // Password
-import { Password } from '@symply.io/symply-basic-components/PasswordInput';
+import { Password } from '@symply.io/basic-components/PasswordInput';
 // Confirm Password 
-import { ConfirmPassword } from '@symply.io/symply-basic-components/PasswordInput'; 
+import { ConfirmPassword } from '@symply.io/basic-components/PasswordInput'; 
 ```
 
 <h5>Password Props</h5>
@@ -377,9 +567,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { PhoneNumberInput } from '@symply.io/symply-basic-components';
+import { PhoneNumberInput } from '@symply.io/basic-components/';
 // or 
-import PhoneNumberInput from '@symply.io/symply-basic-components/PhoneNumberInput'; 
+import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput'; 
 ```
 
 <h5>Props</h5>
@@ -399,9 +589,9 @@ Tabs group.
 <h5>Import</h5>
 
 ```typescript
-import { TabGroup } from '@symply.io/symply-basic-components';
+import { TabGroup } from '@symply.io/basic-components/';
 // or 
-import TabGroup from '@symply.io/symply-basic-components/TabGroup'; 
+import TabGroup from '@symply.io/basic-components/TabGroup'; 
 ```
 
 <h5>Props</h5>
@@ -416,6 +606,32 @@ import TabGroup from '@symply.io/symply-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. 
@@ -425,9 +641,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { TextInput } from '@symply.io/symply-basic-components';
+import { TextInput } from '@symply.io/basic-components/';
 // or 
-import TextInput from '@symply.io/symply-basic-components/TextInput'; 
+import TextInput from '@symply.io/basic-components/TextInput'; 
 ```
 
 <h5>Props</h5>
@@ -449,7 +665,7 @@ Global prompt component.
 <h5>Import</h5>
 
 ```typescript
-import { usePrompt } from '@symply.io/symply-basic-components';
+import { usePrompt } from '@symply.io/basic-components';
 ```
 
 <h5>Usage</h5>
@@ -474,9 +690,9 @@ A modal for playing videos.
 <h5>Import</h5>
 
 ```typescript
-import { VideoPlayerModal } from '@symply.io/symply-basic-components';
+import { VideoPlayerModal } from '@symply.io/basic-components/';
 // or
-import VideoPlayerModal from '@symply.io/symply-basic-components/VideoPlayerModal';
+import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
 ```
 
 <h5>Props</h5>
@@ -495,5 +711,5 @@ import VideoPlayerModal from '@symply.io/symply-basic-components/VideoPlayerModa
 
 <h2>Changelog</h2>
 
-If you have recently updated, please read the [changelog](https://github.com/rinxun/symply-basic-components/releases) for details of what has changed.
+If you have recently updated, please read the [changelog](https://github.com/baseline-software/symply-basic-components/releases) for details of what has changed.
 

package/TabGroup/index.js

@@ -10,37 +10,43 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, forwardRef, useImperativeHandle } from "react";
+import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import useTheme from "@mui/material/styles/useTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 var TabGroup = forwardRef(function (props, ref) {
-    var theme = useTheme();
+    var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onTabChange = props.onTabChange, outerTabIndex = props.currentTabIndex;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var mobileViewport = useMediaQuery(theme.breakpoints.down("md"));
-    var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, onTabChange = props.onTabChange, _c = props.currentTabIndex, outerTabIndex = _c === void 0 ? 0 : _c;
-    var _d = useState(outerTabIndex), currentTabIndex = _d[0], setCurrentTabIndex = _d[1];
+    var _c = useState(outerTabIndex || 0), currentTabIndex = _c[0], setCurrentTabIndex = _c[1];
     var onClick = function (index) {
         setCurrentTabIndex(index);
     };
     useImperativeHandle(ref, function () { return ({
-        tabIndex: currentTabIndex,
+        tabIndex: currentTabIndex
     }); });
-    return (_jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, val) {
-            onClick(val);
-            onTabChange(val);
-        } }, { children: tabs.map(function (tab, index) {
-            var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
-            var active = currentTabIndex === index;
-            return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: _jsx(Typography, __assign({ variant: "body2" }, { children: text }), void 0), disabled: disabled, sx: {
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    margin: theme.spacing(0.75, 0.25),
-                    background: active ? "#fff" : undefined,
-                    borderRadius: active ? theme.spacing(0.5) : undefined,
-                    boxShadow: active ? "0px 4px 6px #acc1c2" : undefined,
-                } }, index));
-        }) }), void 0));
+    useEffect(function () {
+        if (outerTabIndex !== undefined && outerTabIndex !== currentTabIndex) {
+            setCurrentTabIndex(outerTabIndex);
+        }
+    }, [outerTabIndex, currentTabIndex]);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, val) {
+                onClick(val);
+                onTabChange(val);
+            } }, { children: tabs.map(function (tab, index) {
+                var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
+                var active = currentTabIndex === index;
+                return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: _jsx(Typography, __assign({ variant: "body2" }, { children: text })), disabled: disabled, sx: {
+                        cursor: disabled ? "not-allowed" : "pointer",
+                        margin: theme.spacing(0.75, 0.25),
+                        background: active ? "#fff" : undefined,
+                        borderRadius: active ? theme.spacing(0.5) : undefined,
+                        boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
+                    } }, index));
+            }) })) })));
 });
 export default TabGroup;
 export * from "./types";

package/TabGroup/types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { TabsProps } from "@mui/material/Tabs";
 export interface TabGroupProps {
     textColor?: TabsProps["textColor"];
@@ -7,5 +8,7 @@ export interface TabGroupProps {
     }>;
     variant?: TabsProps["variant"];
     currentTabIndex?: number;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onTabChange: (index: number) => void;
 }

package/TablePagination/Actions.d.ts

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

package/TablePagination/Actions.js

@@ -0,0 +1,27 @@
+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 Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import FirstPageIcon from "@mui/icons-material/FirstPage";
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import LastPageIcon from "@mui/icons-material/LastPage";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+function TablePaginationActions(props) {
+    var count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, onPageChange = props.onPageChange;
+    var theme = useCustomTheme();
+    var _a = useInteractions({ count: count, page: page, rowsPerPage: rowsPerPage, onPageChange: onPageChange }), onBackButtonClick = _a.onBackButtonClick, onNextButtonClick = _a.onNextButtonClick, onLastPageButtonClick = _a.onLastPageButtonClick, onFirstPageButtonClick = _a.onFirstPageButtonClick;
+    return (_jsxs(Box, __assign({ sx: { flexShrink: 0, ml: 2.5 } }, { children: [_jsx(IconButton, __assign({ onClick: onFirstPageButtonClick, disabled: page === 0, "aria-label": "first page" }, { children: theme.direction === "rtl" ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) })), _jsx(IconButton, __assign({ onClick: onBackButtonClick, disabled: page === 0, "aria-label": "previous page" }, { children: theme.direction === "rtl" ? (_jsx(KeyboardArrowRight, {})) : (_jsx(KeyboardArrowLeft, {})) })), _jsx(IconButton, __assign({ onClick: onNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page" }, { children: theme.direction === "rtl" ? (_jsx(KeyboardArrowLeft, {})) : (_jsx(KeyboardArrowRight, {})) })), _jsx(IconButton, __assign({ onClick: onLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page" }, { children: theme.direction === "rtl" ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) }))] })));
+}
+export default TablePaginationActions;

package/TablePagination/index.d.ts

@@ -0,0 +1,4 @@
+import { TablePaginationProps } from "./types";
+declare function Pagination(props: TablePaginationProps): JSX.Element;
+export default Pagination;
+export * from "./types";

package/TablePagination/index.js

@@ -0,0 +1,30 @@
+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 } from "react/jsx-runtime";
+import TableRow from "@mui/material/TableRow";
+import TableFooter from "@mui/material/TableFooter";
+import TablePagination from "@mui/material/TablePagination";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import TablePaginationActions from "./Actions";
+import useCustomTheme from "../useCustomTheme";
+function Pagination(props) {
+    var colSpan = props.colSpan, count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, _a = props.rowsPerPageOptions, rowsPerPageOptions = _a === void 0 ? [5, 10, 20, 30] : _a, onPageChange = props.onPageChange, onRowsPerPageChange = props.onRowsPerPageChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: count && (_jsx(TableFooter, { children: _jsx(TableRow, { children: _jsx(TablePagination, { colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, SelectProps: {
+                        inputProps: {
+                            "aria-label": "rows per page",
+                        },
+                        native: true,
+                    }, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions }) }) })) })));
+}
+export default Pagination;
+export * from "./types";