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

package/MenuButtonGroup/MenuItem.js

@@ -10,12 +10,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
 import MenuItem from "@mui/material/MenuItem";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 function ButtonMenuItem(props) {
     var buttonText = props.buttonText, buttonIcon = props.buttonIcon, _a = props.disabled, disabled = _a === void 0 ? false : _a, onClick = props.onClick;
-    return (_jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }, void 0), _jsx(ListItemText, { primary: buttonText }, void 0)] }), void 0));
+    var theme = useCustomTheme();
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }, void 0), _jsx(ListItemText, { primary: buttonText }, void 0)] }), void 0) }), void 0));
 }
-export default memo(ButtonMenuItem);
+export default ButtonMenuItem;

package/MenuButtonGroup/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 import { ButtonProps } from "@mui/material/Button";
 import { ButtonItemProps } from "./MenuItem";
 export interface MenuButtonGroupProps {
@@ -8,6 +8,8 @@ export interface MenuButtonGroupProps {
     variant?: ButtonProps["variant"];
     color?: ButtonProps["color"];
     buttons: Array<ButtonItemProps>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
 declare function MenuButtonGroup(props: MenuButtonGroupProps): JSX.Element;
 export default MenuButtonGroup;

package/MenuButtonGroup/index.js

@@ -56,15 +56,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Menu from "@mui/material/Menu";
 import Button from "@mui/material/Button";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ButtonItem from "./MenuItem";
+import useCustomTheme from "../useCustomTheme";
 function MenuButtonGroup(props) {
     var _this = this;
-    var buttonText = props.buttonText, buttons = props.buttons, size = props.size, _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? "outlined" : _c;
+    var buttonText = props.buttonText, buttons = props.buttons, size = props.size, _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? "outlined" : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _d = useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
     function onClick(event) {
         setAnchorEl(event.currentTarget);
@@ -72,12 +75,12 @@ function MenuButtonGroup(props) {
     var onClose = function () {
         setAnchorEl(null);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }, void 0), disabled: disabled }, { children: buttonText }), void 0), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }, void 0), disabled: disabled }, { children: buttonText }), void 0), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
                     vertical: "bottom",
-                    horizontal: "center",
+                    horizontal: "center"
                 }, transformOrigin: {
                     vertical: "top",
-                    horizontal: "center",
+                    horizontal: "center"
                 }, open: Boolean(anchorEl), onClose: onClose }, { children: buttons.map(function (button) {
                     var onClick = button.onClick, buttonText = button.buttonText, rest = __rest(button, ["onClick", "buttonText"]);
                     return (_jsx(ButtonItem, __assign({ buttonText: buttonText }, rest, { onClick: function (event) { return __awaiter(_this, void 0, void 0, function () {
@@ -95,6 +98,6 @@ function MenuButtonGroup(props) {
                                 }
                             });
                         }); } }), buttonText));
-                }) }), void 0)] }, void 0));
+                }) }), void 0)] }), void 0));
 }
 export default MenuButtonGroup;

package/NumberInput/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
 declare type TextProps = Omit<TextFieldProps, "onChange">;
 export interface NumberInputProps {
@@ -8,6 +8,8 @@ export interface NumberInputProps {
     tooltip?: string;
     maxValue?: number;
     minValue?: number;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
 declare function NumberInput(props: NumberInputProps & TextProps): JSX.Element;
 export default NumberInput;

package/NumberInput/index.js

@@ -23,16 +23,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from "@mui/material/Tooltip";
 import Field from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
 function NumberInput(props) {
-    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.integerOnly, integerOnly = _b === void 0 ? false : _b, _c = props.minValue, minValue = _c === void 0 ? Number.MIN_SAFE_INTEGER : _c, _d = props.maxValue, maxValue = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, error = props.error, helperText = props.helperText, rest = __rest(props, ["onChange", "value", "size", "tooltip", "integerOnly", "minValue", "maxValue", "error", "helperText"]);
+    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.integerOnly, integerOnly = _b === void 0 ? false : _b, _c = props.minValue, minValue = _c === void 0 ? Number.MIN_SAFE_INTEGER : _c, _d = props.maxValue, maxValue = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, error = props.error, helperText = props.helperText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "integerOnly", "minValue", "maxValue", "error", "helperText", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var EXCEED_ERROR = "Your value exceeds the exceptable input range";
     if (maxValue < minValue)
         throw new Error("Max should be bigger than min!");
     var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, 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: "number", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: function () {
-                onCloseTooltip();
-                handleBlur();
-            }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: function () {
+                    onCloseTooltip();
+                    handleBlur();
+                }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0) }), void 0));
 }
 export default NumberInput;

package/PasswordInput/ConfirmPassword.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
 declare type TextInputProps = Omit<TextFieldProps, "onChange">;
 export interface ConfirmPasswordProps {
     password: string;
     value: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
 }
 declare function ConfirmPassword(props: ConfirmPasswordProps & TextInputProps): JSX.Element;

package/PasswordInput/ConfirmPassword.js

@@ -23,16 +23,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import TextField from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 function ConfirmPassword(props) {
-    var password = props.password, _a = props.helperText, helperText = _a === void 0 ? "Passwords do not match" : _a, value = props.value, _b = props.label, label = _b === void 0 ? "Confirm Password" : _b, _c = props.name, name = _c === void 0 ? "confirmPassword" : _c, _d = props.variant, variant = _d === void 0 ? "outlined" : _d, _e = props.margin, margin = _e === void 0 ? "dense" : _e, disabled = props.disabled, onChange = props.onChange, rest = __rest(props, ["password", "helperText", "value", "label", "name", "variant", "margin", "disabled", "onChange"]);
+    var password = props.password, _a = props.helperText, helperText = _a === void 0 ? "Passwords do not match" : _a, value = props.value, _b = props.label, label = _b === void 0 ? "Confirm Password" : _b, _c = props.name, name = _c === void 0 ? "confirmPassword" : _c, _d = props.variant, variant = _d === void 0 ? "outlined" : _d, _e = props.margin, margin = _e === void 0 ? "dense" : _e, disabled = props.disabled, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["password", "helperText", "value", "label", "name", "variant", "margin", "disabled", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isMatched = useMemo(function () {
-        if ((value === null || value === void 0 ? void 0 : value.length) > 0 && password === value) {
-            return true;
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
+            return password === value;
         }
-        return false;
+        return true;
     }, [value, password]);
-    return (_jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
-            onChange(event.target.value);
-        }, fullWidth: true, required: true }, rest), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
+                onChange(event.target.value);
+            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
 }
 export default ConfirmPassword;

package/PasswordInput/Password.d.ts

@@ -11,6 +11,8 @@ export interface PasswordProps {
     strategies: PasswordStrategyProps;
     value: string;
     successColor?: CSSProperties["color"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
     onVerify?: (value: string) => boolean;
 }

package/PasswordInput/Password.js

@@ -24,21 +24,29 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 function Password(props) {
     var _a = props.strategies, strategies = _a === void 0 ? {
         uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
         lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
         specialCharacter: {
             label: "1 Special Character",
-            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/,
+            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/
         },
         number: { label: "1 Number", regex: /\d+/ },
-        minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ },
-    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, _c = props.onVerify, onVerify = _c === void 0 ? function (password) {
+        minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
+    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _c = props.onVerify, onVerify = _c === void 0 ? function (password) {
         var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
         return reg.test(password);
-    } : _c, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "onVerify", "onChange"]);
-    var isValidPassword = useMemo(function () { return !!value && onVerify(value); }, [value, onVerify]);
+    } : _c, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onVerify", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isValidPassword = useMemo(function () {
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
+            return onVerify(value);
+        }
+        return true;
+    }, [value, onVerify]);
     var helperTextColor = useMemo(function () {
         var textColors = Object.keys(strategies).reduce(function (temp, key) {
             var regex = strategies[key].regex;
@@ -58,11 +66,11 @@ function Password(props) {
     var helperText = useMemo(function () {
         return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
                 var label = strategies[key].label;
-                return (_jsx(Typography, __assign({ component: "p", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
+                return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
             }) }, void 0));
     }, [helperTextColor, strategies]);
-    return (_jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
-            onChange(event.target.value);
-        }, fullWidth: true, required: true }, rest), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
+                onChange(event.target.value);
+            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
 }
 export default Password;

package/PhoneNumberInput/index.d.ts

@@ -1,11 +1,14 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
 import { TextFieldProps } from "@mui/material/TextField";
 declare type TextInputProps = Omit<TextFieldProps, "onChange">;
 export interface PhoneInputProps {
     value: string;
     endAdornment?: InputProps["endAdornment"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onChange: (val: string) => void;
 }
+export declare function phoneFormat(str: string): string;
 declare function PhoneInput(props: TextInputProps & PhoneInputProps): JSX.Element;
 export default PhoneInput;

package/PhoneNumberInput/index.js

@@ -25,20 +25,38 @@ import { useRifm } from "rifm";
 import Typography from "@mui/material/Typography";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+export function phoneFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 3) {
+            return "".concat(prev, ") ").concat(curr);
+        }
+        else if (index === 6) {
+            return "".concat(prev, "-").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "(");
+}
 function PhoneInput(props) {
-    var value = props.value, endAdornment = props.endAdornment, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "onChange"]);
-    var _a = useInteractions({ value: value }), addMask = _a.addMask, phoneFormat = _a.phoneFormat;
+    var value = props.value, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var addMask = useInteractions({ value: value }).addMask;
     var rifm = useRifm({
         mask: true,
         value: String(value),
         onChange: onChange,
         replace: addMask,
-        format: phoneFormat,
+        format: phoneFormat
     });
-    return (_jsx(TextField, __assign({ value: rifm.value, InputProps: {
-            startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
-            endAdornment: endAdornment,
-        }, onChange: rifm.onChange }, rest), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, InputProps: {
+                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
+                endAdornment: endAdornment
+            }, onChange: rifm.onChange }, rest), void 0) }), void 0));
 }
 export default PhoneInput;

package/PhoneNumberInput/useInteractions.d.ts

@@ -4,6 +4,5 @@ interface InteractionProps {
 declare function useInteractions(props: InteractionProps): {
     valLength: number;
     addMask: (str: string) => string;
-    phoneFormat: (str: string) => string;
 };
 export default useInteractions;

package/PhoneNumberInput/useInteractions.js

@@ -1,19 +1,6 @@
 import { useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value;
-    var phoneFormat = useCallback(function (str) {
-        var digits = (str.match(/\d+/g) || []).join("");
-        var chars = digits.split("");
-        return chars.reduce(function (prev, curr, index) {
-            if (index === 3) {
-                return "".concat(prev, ") ").concat(curr);
-            }
-            if (index === 6) {
-                return "".concat(prev, "-").concat(curr);
-            }
-            return "".concat(prev).concat(curr);
-        }, "(");
-    }, []);
     var addMask = useCallback(function (str) {
         var digits = (str.match(/\d+/g) || []).join("");
         var areaCode = digits.slice(0, 3).padEnd(3, "_");
@@ -25,6 +12,6 @@ function useInteractions(props) {
         var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength: valLength, addMask: addMask, phoneFormat: phoneFormat };
+    return { valLength: valLength, addMask: addMask };
 }
 export default useInteractions;

package/README.md

@@ -23,6 +23,7 @@
   - [PasswordInput](#passwordinput)
   - [PhoneNumberInput](#phonenumberinput)
   - [TabGroup](#tabgroup)
+  - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
 - [Changelog](#changelog)
@@ -31,21 +32,21 @@
 
 <h2>Installation</h2>
 
-`symply-basic-components` is available as an [npm package](https://www.npmjs.com/package/@symply.io/symply-basic-components).
+It is available as an [npm package](https://www.npmjs.com/package/@symply.io/basic-components).
 
-```bash
+```shell
 // with npm
-npm install @symply.io/symply-basic-components
+npm install @symply.io/basic-components
 
 // with yarn
-yarn add @symply.io/symply-basic-components
+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).
 
 
 
@@ -58,9 +59,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>
@@ -83,9 +84,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>
@@ -119,9 +120,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>
@@ -144,9 +145,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>
@@ -179,9 +180,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 +195,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 +229,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 +253,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 +277,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 +314,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 +342,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 +376,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 +398,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>
@@ -425,9 +424,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 +448,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 +473,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 +494,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

@@ -15,32 +15,33 @@ 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, _c = props.currentTabIndex, outerTabIndex = _c === void 0 ? 0 : _c;
+    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 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));
+    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 }), 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) }), void 0));
 });
 export default TabGroup;
 export * from "./types";