@symply.io/basic-components 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,499 @@
+<h1 align="center">Symply Basic Components</h1>
+
+<p align="center">Basic and reusable components for all frontend of Symply apps.</p>
+
+<p align="center">Built with <a href="https://mui.com/">Material UI v5</a>.</p>
+
+---
+
+<h2>Quick Guide</h2>
+
+- [Installation](#installation)
+- [License](#license)
+- [Components](#components)
+  - [AlertDialog](#alertdialog)
+  - [BasicModal](#basicmodal)
+  - [DigitInput](#digitinput)
+  - [FormRadioGroup](#formradiogroup)
+  - [FormSelector](#formselector)
+  - [HelpCaption](#helpcaption)
+  - [LoadingModal](#loadingmodal)
+  - [MenuButtonGroup](#menubuttongroup)
+  - [NumberInput](#numberinput)
+  - [PasswordInput](#passwordinput)
+  - [PhoneNumberInput](#phonenumberinput)
+  - [TabGroup](#tabgroup)
+  - [ToastPrompt](#toastprompt)
+  - [VideoPlayerModal](#videoplayermodal)
+- [Changelog](#changelog)
+
+
+
+<h2>Installation</h2>
+
+`symply-basic-components` is available as an [npm package](https://www.npmjs.com/package/@symply.io/symply-basic-components).
+
+```bash
+// with npm
+npm install @symply.io/symply-basic-components
+
+// with yarn
+yarn add @symply.io/symply-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).
+
+
+
+<h2>Components</h2>
+
+<h3>AlertDialog</h3>
+
+Diglog component for alerts or confirmations.
+
+<h5>Import</h5>
+
+```typescript
+import { AlertDialog } from '@symply.io/symply-basic-components';
+// or 
+import AlertDialog from '@symply.io/symply-basic-components/AlertDialog'; 
+```
+
+<h5>Props</h5>
+
+| Name          | Type                                          | Default | Required | Description                                                  |
+| ------------- | --------------------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| children      | node                                          |         | true     | Dialog content.                                              |
+| DialogButtons | element                                       |         | false    | Customized dialog action buttons.                            |
+| maxWidth      | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| false | 'md'    | false    | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. |
+| onClose       | func                                          |         | true     | Callback fired when the component requests to be closed.<br />**Signature:**<br/>`function() => void` |
+| open          | bool                                          | false   | true     | If `true`, the component is shown.                           |
+| title         | string                                        | 'Info'  | false    | Dialog title                                                 |
+
+
+
+<h3>BasicModal</h3>
+
+Reusable modal component.
+
+<h5>Import</h5>
+
+```typescript
+import { BasicModal } from '@symply.io/symply-basic-components';
+// or 
+import BasicModal from '@symply.io/symply-basic-components/BasicModal'; 
+```
+
+<h5>Props</h5>
+
+| Name                    | Type                                                         | Default   | Required | Description                                                  |
+| ----------------------- | ------------------------------------------------------------ | --------- | -------- | ------------------------------------------------------------ |
+| cancelText              | string                                                       | 'Cancel'  | false    | The text of the cancel button.                               |
+| children                | node                                                         |           | true     | The content of the component.                                |
+| color                   | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| undefined | 'primary' | false    | The main color of the component.                             |
+| desc                    | string                                                       |           | false    | Some descriptions you want to add, similar to a subtitle.    |
+| disabled                | bool                                                         | false     | false    | If `true`, the submit button would be disabled.              |
+| hideBottomButtons       | bool                                                         | false     | false    | If `true`, hide all action buttons at the bottom of the modal. |
+| loading                 | bool                                                         | false     | false    | If `true`, the submit and cancel buttons would be disabled.  |
+| maxWidth                | 'xs' \|'sm' \|'md' \|'lg' \|'xl'                             | 'sm'      | false    | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. |
+| noForm                  | bool                                                         | false     | False    | If `true`, put the content and action buttons out of a form element. |
+| onClose                 | func                                                         |           | true     | Callback fired when the cancel button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
+| onSubmit                | func                                                         |           | true     | Callback fired when the submit button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
+| open                    | bool                                                         | false     | true     | If `true`, the component is shown.                           |
+| showTopRightCloseButton | bool                                                         | false     | false    | If `true`, show a close icon button at the top right of the modal. |
+| submitText              | string                                                       | ‘Save’    | false    | The text of the submit button.                               |
+| title                   | string                                                       |           | true     | The title of the component, to show at the top left.         |
+
+
+
+<h3>DigitInput</h3>
+
+Input component for digits. 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { DigitInput } from '@symply.io/symply-basic-components';
+// or 
+import DigitInput from '@symply.io/symply-basic-components/DigitInput'; 
+```
+
+<h5>Props</h5>
+
+| Name         | Type   | Default | Required | Description                                                  |
+| ------------ | ------ | ------- | -------- | ------------------------------------------------------------ |
+| endAdornment | node   |         | false    | An end adornment element for the `Input` element.            |
+| maxLength    | number | 999     | false    | The max length of the `Input` element you can type in.       |
+| minLength    | number | 0       | false    | The min length of the `Input` element you should type in.    |
+| 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.                            |
+| tooltip      | string |         | false    | A tooltip for the `Input` element.                           |
+
+
+
+<h3>FormRadioGroup</h3>
+
+Radio Group allow the user to select one option from a set.
+
+<h5>Import</h5>
+
+```typescript
+import { FormRadioGroup } from '@symply.io/symply-basic-components';
+// or 
+import FormRadioGroup from '@symply.io/symply-basic-components/FormRadioGroup'; 
+```
+
+<h5>Radio Option Props</h5>
+
+| Name     | Type                     | Default | Required | Description                              |
+| -------- | ------------------------ | ------- | -------- | ---------------------------------------- |
+| disabled | bool                     | false   | false    | If `true`, the opiton would be disabled. |
+| label    | string                   |         | true     | The label of the option.                 |
+| value    | string \| number \| bool |         | true     | The value of the option.                 |
+
+<h5>Props</h5>
+
+| Name      | Type                                                         | Default   | Required | Description                                                  |
+| --------- | ------------------------------------------------------------ | --------- | -------- | ------------------------------------------------------------ |
+| 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. |
+| 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.                           |
+
+
+
+<h3>FormSelector</h3>
+
+Selector components are used for collecting user provided information from a list of options.
+
+<h5>Import</h5>
+
+```typescript
+// Simple Selector
+import { SimpleSelector } from '@symply.io/symply-basic-components/FormSelector';
+// Multiple Selector 
+import { MultipleSelector } from '@symply.io/symply-basic-components/FormRadioGroup'; 
+```
+
+<h5>Selector Option Props</h5>
+
+| Name     | Type                     | Default | Required | Description                              |
+| -------- | ------------------------ | ------- | -------- | ---------------------------------------- |
+| disabled | bool                     | false   | false    | If `true`, the opiton would be disabled. |
+| label    | string                   |         | true     | The label of the option.                 |
+| value    | string \| number \| bool |         | true     | The value of the option.                 |
+
+<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.                        |
+
+<h5>Simple Selector Props</h5> Extended from the Base Props
+
+| Name     | Type             | Default | Required | Description                                                  |
+| -------- | ---------------- | ------- | -------- | ------------------------------------------------------------ |
+| onChange | func             |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: string | number) => void`<br/>*value:* The value of the `Select` element. |
+| value    | number \| string |         | True     | The value of the `Select` element.                           |
+
+<h5>Multiple Selector Props</h5> Extended from the Base Props
+
+| Name     | Type                               | Default | Required | Description                                                  |
+| -------- | ---------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| onChange | func                               |         | true     | Callback fired when the `Select` value is changed.<br />**Signature:**<br/>`function(value: Array<number> | Array<string>) => void`<br/>*value:* The value of the `Select` element. |
+| value    | Array\<number\> \| Array\<string\> |         |          | The value of the `Select` element.                           |
+
+
+
+<h3>HelpCaption</h3>
+
+You can use it to add a hint/help paragraph.
+
+<h5>Import</h5>
+
+```typescript
+import { HelpCaption } from '@symply.io/symply-basic-components';
+// or 
+import HelpCaption from '@symply.io/symply-basic-components/HelpCaption';
+```
+
+<h5>Props</h5>
+
+| Name        | Type                 | Default   | Required | Description                                                  |
+| ----------- | -------------------- | --------- | -------- | ------------------------------------------------------------ |
+| linkText    | string               |           | false    | The text of the help link.                                   |
+| linkType    | 'WEBPAGE' \| 'VIDEO' | 'WEBPAGE' | false    | The type of the help link.                                   |
+| linkUrl     | string               |           | false    | The url of the help link. If `undefined` then the help link would not be shown. |
+| mainCaption | string               |           | true     | The primary text of the caption.                             |
+| subCaption  | string               |           | false    | The secondary text of the caption.                           |
+
+
+
+<h3>LoadingModal</h3>
+
+A modal for loading.
+
+<h5>Import</h5>
+
+```typescript
+import { LoadingModal } from '@symply.io/symply-basic-components';
+// or 
+import LoadingModal from '@symply.io/symply-basic-components/LoadingModal';
+```
+
+<h5>Props</h5>
+
+| Name        | Type                                                         | Default      | Required | Description                                                  |
+| ----------- | ------------------------------------------------------------ | ------------ | -------- | ------------------------------------------------------------ |
+| direction   | 'column' \| 'column-reverse' \| 'column' \| 'column-reverse' | 'column'     | false    | Defines the `flex-direction` style property. It is applied for all screen sizes. |
+| open        | bool                                                         | false        | true     | If `true`, the component is shown.                           |
+| percent     | number                                                       | 0            | false    | The percent value of the progress.                           |
+| text        | string                                                       | 'Loading...' | false    | The prompt text of the component.                            |
+| showProgess | boolean                                                      | false        | false    | If `true`, the percent of the progress is shown.             |
+
+
+
+<h3>MenuButtonGroup</h3>
+
+A button with menu options.
+
+<h5>Import</h5>
+
+```typescript
+import { MenuButtonGroup } from '@symply.io/symply-basic-components';
+// or 
+import MenuButtonGroup from '@symply.io/symply-basic-components/MenuButtonGroup';
+```
+
+<h5>Menu Button Props</h5>
+
+| Name       | Type   | Default | Required | Description                                                  |
+| ---------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| buttonIcon | node   |         | false    | A start adornment of the button                              |
+| buttonText | string |         | true     | The text of the menu button                                  |
+| disabled   | bool   |         |          |                                                              |
+| onClick    | func   |         | true     | Callback fired when the menu button click.<br />**Signature:**<br/>`function(event: MouseEvent) => void` |
+
+
+<h5>Props</h5>
+
+| Name       | Type                                                         | Default    | Required | Description                                        |
+| ---------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------------- |
+| color      | 'primary' \|'secondary' \|'success' \|'error' \|'info' \|'warning' | 'primary'  | false    | The main color of the component.                   |
+| buttonText | string                                                       |            | true     | The text of the main button.                       |
+| size       | 'small' \| 'medium' \| 'large'                               |            | false    | The size of the main button.                       |
+| disabled   | bool                                                         |            | false    | If `true`, the button is disabled.                 |
+| variant    | 'text' \|'contained' \|'outlined'                            | 'outlined' | false    | The variant of the main button.                    |
+| buttons    | Array\<ButtonItemProps\>                                     |            | true     | Menu buttons. See the **Menu Button Props** above. |
+
+
+
+<h3>NumberInput</h3>
+
+Input component for Number. 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { NumberInput } from '@symply.io/symply-basic-components';
+// or 
+import NumberInput from '@symply.io/symply-basic-components/NumberInput'; 
+```
+
+<h5>Props</h5>
+
+| Name        | Type   | Default     | Required | Description                                                  |
+| ----------- | ------ | ----------- | -------- | ------------------------------------------------------------ |
+| integerOnly | bool   |             | false    | If `true`, not allow to type a decimal value.                |
+| maxValue    | number | 2^53 − 1    | false    | The max value of the `Input` element you can type in.        |
+| minValue    | Number | −(2^53 − 1) | false    | The min value of the `Input` element you should type in.     |
+| 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. |
+| tooltip     | string |             | false    | A tooltip for the `Input` element.                           |
+| value       | string |             | true     | The value of the `Input` element.                            |
+
+
+
+<h3>PasswordInput</h3>
+
+Input component for Password and Confirm Password. 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+// Password
+import { Password } from '@symply.io/symply-basic-components/PasswordInput';
+// Confirm Password 
+import { ConfirmPassword } from '@symply.io/symply-basic-components/PasswordInput'; 
+```
+
+<h5>Password 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. |
+| 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. |
+| 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.                                          |
+
+<h5>Confirm Password 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. |
+| password | string |         | true     | The password value                                           |
+| value    | string |         | true     | The confirm password value.                                  |
+
+
+
+<h3>PhoneNumberInput</h3>
+
+Input component for US phone number. 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { PhoneNumberInput } from '@symply.io/symply-basic-components';
+// or 
+import PhoneNumberInput from '@symply.io/symply-basic-components/PhoneNumberInput'; 
+```
+
+<h5>Props</h5>
+
+| Name         | Type   | Default | Required | Description                                                  |
+| ------------ | ------ | ------- | -------- | ------------------------------------------------------------ |
+| 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. |
+| value        | string |         | true     | The value of the `Input` element.                            |
+
+
+
+<h3>TabGroup</h3>
+
+Tabs group. 
+
+<h5>Import</h5>
+
+```typescript
+import { TabGroup } from '@symply.io/symply-basic-components';
+// or 
+import TabGroup from '@symply.io/symply-basic-components/TabGroup'; 
+```
+
+<h5>Props</h5>
+
+| Name            | Type                                          | Default      | Required | Description                                                  |
+| --------------- | --------------------------------------------- | ------------ | -------- | ------------------------------------------------------------ |
+| currentTabIndex | number                                        | 0            | false    | the tab index from the higher component                      |
+| onTabChange     | func                                          |              | true     | Callback fired when the `Tab` is changed.<br />**Signature:**<br/>`function(index: number) => void`<br/>*index:* The selected index of the `Tab` element. |
+| tabs            | Array\<{ text: string; disabled?: boolean }\> |              | true     | All tab items.                                               |
+| textColor       | 'primary' \| 'secondary'                      | 'primary'    | false    | The color of the tab text.                                   |
+| variant         | 'standard' \| 'scrollable' \| 'fullWidth'     | 'scrollable' | false    | Determines additional display behavior of the tabs           |
+
+
+
+<h3>TextInput</h3>
+
+Regular Input component. 
+
+It is extended from `@mui/material/TextField`, so it includes all properties of `@mui/material/TextField`.
+
+<h5>Import</h5>
+
+```typescript
+import { TextInput } from '@symply.io/symply-basic-components';
+// or 
+import TextInput from '@symply.io/symply-basic-components/TextInput'; 
+```
+
+<h5>Props</h5>
+
+| Name      | Type   | Default | Required | Description                                                  |
+| --------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| maxLength | number | 999     | false    | The max length of the `Input` element you can type in.       |
+| minLength | number | 0       | false    | The min length of the `Input` element you should type in.    |
+| 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. |
+| tooltip   | string |         | false    | A tooltip for the `Input` element.                           |
+| value     | string |         | true     | The value of the `Input` element.                            |
+
+
+
+<h3>ToastPrompt</h3>
+
+Global prompt component. 
+
+<h5>Import</h5>
+
+```typescript
+import { usePrompt } from '@symply.io/symply-basic-components';
+```
+
+<h5>Usage</h5>
+```typescript
+const { showPrompt } = usePrompt();
+```
+
+<h5>Props</h5>
+
+| Name    | Type                                        | Default | Required | Description                                                  |
+| ------- | ------------------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| message | string \| 400                               |         | true     | The prompt message you want to show.                         |
+| timeout | number                                      | 3500    | false    | The number of milliseconds to wait before automatically calling the `onClose` function. |
+| type    | 'success' \| 'warning' \| 'info' \| 'error' |         | true     | The type of prompt.                                          |
+
+
+
+<h3>VideoPlayerModal</h3>
+
+A modal for playing videos. 
+
+<h5>Import</h5>
+
+```typescript
+import { VideoPlayerModal } from '@symply.io/symply-basic-components';
+// or
+import VideoPlayerModal from '@symply.io/symply-basic-components/VideoPlayerModal';
+```
+
+<h5>Props</h5>
+
+| Name         | Type                 | Default | Required | Description                                                  |
+| ------------ | -------------------- | ------- | -------- | ------------------------------------------------------------ |
+| extraButtons | Array\<ButtonProps\> |         | false    | Extra buttons next to the Close button at the bottom.        |
+| onClose      | func                 |         | true     | Callback fired when the cancel button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
+| open         | bool                 |         | true     | If `true`, the component is shown.                           |
+| pip          | bool                 |         | false    | If `true`, the video can be played in picture                |
+| title        | string               |         | false    | Modal title, it would be shown at the top left.              |
+
+
+
+
+
+<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.
+

package/TabGroup/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TabGroupProps } from "./types";
+declare const TabGroup: import("react").ForwardRefExoticComponent<TabGroupProps & import("react").RefAttributes<unknown>>;
+export default TabGroup;
+export * from "./types";

package/TabGroup/index.js

@@ -0,0 +1,46 @@
+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 { useState, 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";
+var TabGroup = forwardRef(function (props, ref) {
+    var theme = useTheme();
+    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 onClick = function (index) {
+        setCurrentTabIndex(index);
+    };
+    useImperativeHandle(ref, function () { return ({
+        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));
+});
+export default TabGroup;
+export * from "./types";

package/TabGroup/types.d.ts

@@ -0,0 +1,11 @@
+import { TabsProps } from "@mui/material/Tabs";
+export interface TabGroupProps {
+    textColor?: TabsProps["textColor"];
+    tabs: Array<{
+        text: string;
+        disabled?: boolean;
+    }>;
+    variant?: TabsProps["variant"];
+    currentTabIndex?: number;
+    onTabChange: (index: number) => void;
+}

package/TabGroup/types.js

@@ -0,0 +1 @@
+export {};

package/TextInput/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextProps = Omit<TextFieldProps, "onChange">;
+export interface TextInputProps {
+    onChange: (value: string) => void;
+    value: string;
+    tooltip?: TextFieldProps;
+    maxLength?: number;
+    minLength?: number;
+}
+declare const TextInput: (props: TextInputProps & TextProps) => JSX.Element;
+export default TextInput;

package/TextInput/index.js

@@ -0,0 +1,35 @@
+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 Tooltip from "@mui/material/Tooltip";
+import Field from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+var TextInput = function (props) {
+    var _a = props.type, type = _a === void 0 ? "text" : _a, onChange = props.onChange, value = props.value, _b = props.size, size = _b === void 0 ? "small" : _b, tooltip = props.tooltip, _c = props.maxLength, maxLength = _c === void 0 ? 999 : _c, _d = props.minLength, minLength = _d === void 0 ? 0 : _d, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength"]);
+    var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
+    return (_jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onFocus: onOpenTooltip, onBlur: onCloseTooltip, onChange: function (event) {
+                event.preventDefault();
+                onChange(event.target.value);
+            }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest), void 0) }), void 0));
+};
+export default TextInput;

package/TextInput/useInteractions.d.ts

@@ -0,0 +1,6 @@
+declare function useInteractions(): {
+    tooltipOpen: boolean;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
+};
+export default useInteractions;

package/TextInput/useInteractions.js

@@ -0,0 +1,12 @@
+import { useState, useCallback } from 'react';
+function useInteractions() {
+    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
+    var onOpenTooltip = useCallback(function () {
+        setTooltipOpen(true);
+    }, []);
+    var onCloseTooltip = useCallback(function () {
+        setTooltipOpen(false);
+    }, []);
+    return { tooltipOpen: tooltipOpen, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
+}
+export default useInteractions;

package/ToastPrompt/Logics.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface LogicsProps {
+    children: React.ReactNode | undefined;
+}
+export interface PromptPropsType {
+    open: boolean;
+    message: string | number;
+    variant: "success" | "warning" | "error" | "info" | undefined;
+    timeout: number;
+}
+declare const Logics: import("react").ForwardRefExoticComponent<LogicsProps & import("react").RefAttributes<unknown>>;
+export default Logics;