@rabex-kit/rabex-ui 0.1.18 → 0.1.20

package/dist/Autocomplete/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
 export declare type AutocompleteProps<T> = MuiAutocompleteProps<T, boolean | undefined, boolean | undefined, boolean | undefined>;
 /**
@@ -7,7 +6,7 @@ export declare type AutocompleteProps<T> = MuiAutocompleteProps<T, boolean | und
  * you can see Autocomplete Documentation api that I mentioned below [here](https://mui.com/material-ui/react-autocomplete/)
  *
  * ```typescript
- *  import { Autocomplete } from '@rabex-kit/core';
+ *  import { Autocomplete } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *

package/dist/LoadingButton/index.d.ts

@@ -13,7 +13,7 @@ export declare type LoadingButtonProps = Omit<MuiLoadingButtonProps, 'size' | 'c
  * You can read Material-UI LoadingButton Documentation [here](https://mui.com/material-ui/api/loading-button/).
  *
  * ```typescript
- *  import { LoadingButton } from '@rabex-kit/core';
+ *  import { LoadingButton } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *

package/dist/TextField/index.d.ts

@@ -3,7 +3,8 @@ import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
 import { TypographyProps } from '../Typography';
 export declare type TextFieldProps = MuiTextFieldProps & {
     success?: boolean;
-    size?: 'medium' | 'small';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'medium';
+    fill?: boolean;
     helperText?: string | ReactNode;
     titleProps?: TypographyProps;
     helperTextIcon?: ReactNode;

package/dist/Theme/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/Theme/TextField/index.d.ts

@@ -1,4 +1,14 @@
 import { Theme } from '@mui/material';
+declare module '@mui/material/TextField' {
+    interface TextFieldPropsSizeOverrides {
+        small: true;
+        medium: true;
+        sm: true;
+        md: true;
+        lg: true;
+        xl: true;
+    }
+}
 declare const _default: {
     components: {
         defaultProps?: Partial<import("@mui/material").FilledTextFieldProps> | Partial<import("@mui/material").StandardTextFieldProps> | Partial<import("@mui/material").OutlinedTextFieldProps> | undefined;

package/dist/UploadButton/index.d.ts

@@ -10,7 +10,7 @@ export declare type UploadButtonProps = Omit<RabexButtonProps, 'inputProps'> & {
  * You can read Material-UI Button Documentation [here](https://mui.com/material-ui/api/Button/).
  *
  * ```typescript
- *  import { UploadButton } from '@rabex-kit/core';
+ *  import { UploadButton } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *

package/dist/rabex-ui.cjs.development.js

@@ -12,7 +12,6 @@ var MuiAccordionSummary = _interopDefault(require('@mui/material/AccordionSummar
 var MuiAlert = _interopDefault(require('@mui/material/Alert/Alert.js'));
 var Stack$1 = _interopDefault(require('@mui/material/Stack/Stack.js'));
 var MuiTypography = _interopDefault(require('@mui/material/Typography/Typography.js'));
-var useTheme = _interopDefault(require('@mui/material/styles/useTheme.js'));
 var useMediaQuery = _interopDefault(require('@mui/material/useMediaQuery/useMediaQuery.js'));
 var useScrollTrigger_js = _interopDefault(require('@mui/material/useScrollTrigger/useScrollTrigger.js'));
 var _replace = _interopDefault(require('lodash/replace'));
@@ -20,7 +19,7 @@ var _includes = _interopDefault(require('lodash/includes'));
 var bigDecimal = _interopDefault(require('js-big-decimal'));
 var _filter = _interopDefault(require('lodash/filter'));
 var _isUndefined = _interopDefault(require('lodash/isUndefined'));
-var useTheme$1 = _interopDefault(require('@mui/material/styles/useTheme'));
+var useTheme = _interopDefault(require('@mui/material/styles/useTheme'));
 var MuiAlertTitle = _interopDefault(require('@mui/material/AlertTitle/AlertTitle.js'));
 var MuiAvatar = _interopDefault(require('@mui/material/Avatar/Avatar.js'));
 var Box$1 = _interopDefault(require('@mui/material/Box/Box.js'));
@@ -41,6 +40,7 @@ var MuiFormLabel = _interopDefault(require('@mui/material/FormLabel/FormLabel.js
 var MuiGrid = _interopDefault(require('@mui/material/Unstable_Grid2'));
 var MuiIconButton = _interopDefault(require('@mui/material/IconButton/IconButton.js'));
 var MuiInput = _interopDefault(require('@mui/material/Input/Input.js'));
+var useTheme$1 = _interopDefault(require('@mui/material/styles/useTheme.js'));
 var MuiInputAdornment = _interopDefault(require('@mui/material/InputAdornment/InputAdornment.js'));
 var MuiInputLabel = _interopDefault(require('@mui/material/InputLabel/InputLabel.js'));
 var MuiLinearProgress = _interopDefault(require('@mui/material/LinearProgress/LinearProgress.js'));
@@ -265,7 +265,7 @@ var AlertAction = function AlertAction(_ref) {
   })));
 };
 
-var _excluded$1 = ["weight", "sx", "color"];
+var _excluded$1 = ["weight", "sx"];
 var fontWeight = {
   bold: '700',
   semiBold: '600',
@@ -290,15 +290,12 @@ var fontWeight = {
 var Typography = function Typography(_ref) {
   var weight = _ref.weight,
     sx = _ref.sx,
-    color = _ref.color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var _useTheme = useTheme(),
-    palette = _useTheme.palette;
+  // const { palette } = useTheme();
   return React__default.createElement(MuiTypography, Object.assign({
     sx: _extends({}, sx, {
       fontWeight: weight ? fontWeight[weight] : 'regular'
-    }),
-    color: color || palette.textColor[900]
+    })
   }, props));
 };
 Typography.defaultProps = {
@@ -1291,7 +1288,7 @@ var MuiInputStyled = /*#__PURE__*/styled(MuiInput, {
 var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   //
-  var _useTheme = useTheme(),
+  var _useTheme = useTheme$1(),
     mode = _useTheme.palette.mode;
   var _ref2 = props || {},
     title = _ref2.title,
@@ -1576,7 +1573,7 @@ var ListSubHeader = function ListSubHeader(props) {
  * You can read Material-UI LoadingButton Documentation [here](https://mui.com/material-ui/api/loading-button/).
  *
  * ```typescript
- *  import { LoadingButton } from '@rabex-kit/core';
+ *  import { LoadingButton } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -3814,16 +3811,15 @@ var components$3 = {
         transition: 'all 0.2s',
         padding: spacing(2.5, 3),
         border: isLight ? "1px solid " + palette.base[300] : "1px solid " + palette.secondary.A100,
-        backgroundColor: isLight
+        backgroundColor: isLight ?
         // ? palette.grayBackground.A20
-        ? 'transparent' : palette.secondary.A100,
+        'transparent' : palette.secondary.A100,
         '&:hover': {
-          border: isLight
-          // ? `1px solid ${palette.textColor.A20}`
-          ? "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
-          backgroundColor: isLight
+          border: isLight ? // ? `1px solid ${palette.textColor.A20}`
+          "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
+          backgroundColor: isLight ?
           // ? palette.grayBackground.A20
-          ? 'transparent' : palette.base.A60
+          'transparent' : palette.base.A60
         },
         '&.Mui-focused': {
           border: isLight ? "1.5px solid " + palette.primary[500] : "1px solid " + palette.primary.A80
@@ -3833,12 +3829,12 @@ var components$3 = {
           backgroundColor: isLight ? palette.base.A0 : colorManipulator_js.alpha(palette.error.A100 || '', 0.1)
         },
         '&.Mui-disabled': {
-          borderColor: isLight
+          borderColor: isLight ?
           // ? palette.grayBackground.A40
-          ? palette.base[300] : palette.secondary.A100,
-          backgroundColor: isLight
+          palette.base[300] : palette.secondary.A100,
+          backgroundColor: isLight ?
           // ? palette.grayBackground.A10
-          ? 'transparent' : palette.secondary.A100
+          'transparent' : palette.secondary.A100
         }
       };
     },
@@ -3856,7 +3852,8 @@ var components$3 = {
         '&::.placeholder': {
           opacity: 1,
           color: isLight ? palette.textColor.A40 : palette.textColor.A30
-        }
+        },
+        '&:-webkit-autofill': {}
       };
     }
   },
@@ -3868,6 +3865,7 @@ var components$3 = {
       var theme = _ref3.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(1, 3)
       };
     }
@@ -3879,6 +3877,7 @@ var components$3 = {
       var theme = _ref4.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(2, 3)
       };
     }
@@ -3890,6 +3889,7 @@ var components$3 = {
       var theme = _ref5.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(3)
       };
     }
@@ -3901,6 +3901,7 @@ var components$3 = {
       var theme = _ref6.theme;
       return {
         fontSize: '16px',
+        lineHeight: '24px',
         padding: theme.spacing(3)
       };
     }
@@ -3910,33 +3911,30 @@ var components$3 = {
     },
     style: function style(_ref7) {
       var theme = _ref7.theme;
-      if (theme.palette.mode === 'light') {
-        var isLight = theme.palette.mode === 'light';
-        return {
-          // border: `1px solid ${theme.palette.base[600]}`,
-          border: 'transparent',
-          background: theme.palette.base[200],
-          '&.Mui-disabled': {
-            background: isLight ? theme.palette.base[100] : theme.palette.secondary.A100
-          },
-          '&:hover': {
-            border: isLight
-            // ? `1px solid ${palette.textColor.A20}`
-            ? "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
-            backgroundColor: isLight
-            // ? palette.grayBackground.A20
-            ? theme.palette.base[200] : theme.palette.base.A60
-          },
-          '&.Mui-focused': {
-            border: isLight ? "1.5px solid " + theme.palette.primary[500] : "1px solid " + theme.palette.primary.A80,
-            backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
-          },
-          '&.Mui-error': {
-            border: isLight ? "1.5px solid " + theme.palette.error[400] : "1px solid " + theme.palette.error.A60,
-            backgroundColor: isLight ? theme.palette.base[200] : colorManipulator_js.alpha(theme.palette.error.A100 || '', 0.1)
-          }
-        };
-      } else return {};
+      var isLight = theme.palette.mode === 'light';
+      return {
+        // border: `1px solid ${theme.palette.base[600]}`,
+        border: 'transparent',
+        background: theme.palette.base[200],
+        '&.Mui-disabled': {
+          background: isLight ? theme.palette.base[100] : theme.palette.secondary.A100
+        },
+        '&:hover': {
+          border: isLight ? // ? `1px solid ${palette.textColor.A20}`
+          "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
+          backgroundColor: isLight ?
+          // ? palette.grayBackground.A20
+          theme.palette.base[200] : theme.palette.base.A60
+        },
+        '&.Mui-focused': {
+          border: isLight ? "1.5px solid " + theme.palette.primary[500] : "1px solid " + theme.palette.primary.A80,
+          backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
+        },
+        '&.Mui-error': {
+          border: isLight ? "1.5px solid " + theme.palette.error[400] : "1px solid " + theme.palette.error.A60,
+          backgroundColor: isLight ? theme.palette.base[200] : colorManipulator_js.alpha(theme.palette.error.A100 || '', 0.1)
+        }
+      };
     }
   }, {
     props: {
@@ -4513,13 +4511,18 @@ var components$6 = {
     root: function root(_ref) {
       var _ref$theme = _ref.theme,
         palette = _ref$theme.palette,
-        spacing = _ref$theme.spacing;
+        spacing = _ref$theme.spacing,
+        _ref$ownerState = _ref.ownerState,
+        size = _ref$ownerState.size,
+        fill = _ref$ownerState.fill,
+        success = _ref$ownerState.success;
+      console.log(size, fill, success);
       var isLight = palette.mode === 'light';
       return {
         '& > div.MuiInputBase-root > fieldset': {
           border: 0
         },
-        '& > div.MuiInputBase-root': {
+        '& > div.MuiInputBase-root': _extends({
           borderRadius: '8px',
           gap: spacing(1),
           transition: 'all 0.2s',
@@ -4541,8 +4544,46 @@ var components$6 = {
           '&.Mui-disabled': {
             borderColor: isLight ? palette.grayBackground.A40 : palette.secondary.A100,
             backgroundColor: isLight ? palette.grayBackground.A10 : palette.secondary.A100
+          },
+          '&:-webkit-autofill': {}
+        }, size === 'sm' && {
+          fontSize: '14px',
+          lineHeight: '24px',
+          padding: spacing(1, 3)
+        }, size === 'md' && {
+          fontSize: '14px',
+          lineHeight: '24px',
+          padding: spacing(2, 3)
+        }, size === 'lg' && {
+          fontSize: '14px',
+          lineHeight: '24px',
+          padding: spacing(3)
+        }, size === 'xl' && {
+          fontSize: '16px',
+          lineHeight: '24px',
+          padding: spacing(3)
+        }, fill === true && {
+          border: 'transparent',
+          background: isLight ? palette.base[200] : undefined,
+          '&.Mui-disabled': {
+            background: isLight ? palette.base[100] : palette.secondary.A100
+          },
+          '&:hover': {
+            border: isLight ? "1px solid " + palette.base[600] : "1px solid " + palette.base.A60,
+            backgroundColor: isLight ? palette.base[200] : palette.base.A60
+          },
+          '&.Mui-focused': {
+            border: isLight ? "1.5px solid " + palette.primary[500] : "1px solid " + palette.primary.A80,
+            backgroundColor: isLight ? palette.base[200] : palette.base.A60
+          },
+          '&.Mui-error': {
+            border: isLight ? "1.5px solid " + palette.error[400] : "1px solid " + palette.error.A60,
+            backgroundColor: isLight ? palette.base[200] : colorManipulator_js.alpha(palette.error.A100 || '', 0.1)
           }
-        },
+        }, success === true && {
+          border: isLight ? "1px solid " + palette.success.A100 : "1px solid " + palette.success.A40,
+          backgroundColor: isLight ? palette.base.A0 : colorManipulator_js.alpha(palette.success.A100, 0.1)
+        }),
         '& > div.MuiInputBase-root > input.MuiInputBase-input': {
           color: isLight ? palette.textColor.A80 : palette.textColor.A0,
           padding: spacing(0),
@@ -4555,7 +4596,54 @@ var components$6 = {
         }
       };
     }
-  }
+  },
+  variants: [{
+    props: {
+      fill: true
+    },
+    style: function style(_ref2) {
+      var theme = _ref2.theme;
+      var isLight = theme.palette.mode === 'light';
+      return {
+        '& .MuiInputBase-root': {
+          // border: `1px solid ${theme.palette.base[600]}`,
+          border: 'transparent',
+          background: theme.palette.base[200],
+          '&.Mui-disabled': {
+            background: isLight ? theme.palette.base[100] : theme.palette.secondary.A100
+          },
+          '&:hover': {
+            border: isLight ? // ? `1px solid ${palette.textColor.A20}`
+            "1px solid " + theme.palette.base[600] : "1px solid " + theme.palette.base.A60,
+            backgroundColor: isLight ?
+            // ? palette.grayBackground.A20
+            theme.palette.base[200] : theme.palette.base.A60
+          },
+          '&.Mui-focused': {
+            border: isLight ? "1.5px solid " + theme.palette.primary[500] : "1px solid " + theme.palette.primary.A80,
+            backgroundColor: isLight ? theme.palette.base[200] : theme.palette.base.A60
+          },
+          '&.Mui-error': {
+            border: isLight ? "1.5px solid " + theme.palette.error[400] : "1px solid " + theme.palette.error.A60,
+            backgroundColor: isLight ? theme.palette.base[200] : colorManipulator_js.alpha(theme.palette.error.A100 || '', 0.1)
+          }
+        }
+      };
+    }
+  }, {
+    props: {
+      success: true
+    },
+    style: function style(_ref3) {
+      var palette = _ref3.theme.palette;
+      return {
+        '& .MuiInputBase-root': {
+          border: palette.mode === 'light' ? "1px solid " + palette.success.A100 : "1px solid " + palette.success.A40,
+          backgroundColor: palette.mode === 'light' ? palette.base.A0 : colorManipulator_js.alpha(palette.success.A100, 0.1)
+        }
+      };
+    }
+  }]
 };
 var RabexTextField = {
   components: components$6
@@ -4778,7 +4866,7 @@ Tooltip.defaultProps = {
  * you can see Autocomplete Documentation api that I mentioned below [here](https://mui.com/material-ui/react-autocomplete/)
  *
  * ```typescript
- *  import { Autocomplete } from '@rabex-kit/core';
+ *  import { Autocomplete } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -4996,7 +5084,7 @@ var FormikSelect = function FormikSelect(_ref) {
   }, text));
 };
 
-var _excluded$i = ["title", "helperTextEndAdornment", "helperTextEndAdornmentProps", "titleProps", "helperText", "helperTextIcon", "helperTextProps", "value", "onChange", "valueFormat", "valueFormatOption"];
+var _excluded$i = ["title", "helperTextEndAdornment", "helperTextEndAdornmentProps", "titleProps", "helperText", "helperTextIcon", "helperTextProps", "value", "onChange", "valueFormat", "valueFormatOption", "fill", "success"];
 function _handleHelperColor$1(props, key) {
   var _props$key;
   if (props.error) return 'error.A100';
@@ -5009,7 +5097,7 @@ function _handleHelperColor$1(props, key) {
  * you can see TextField Documentation api that I mentioned below [here](https://mui.com/material-ui/api/text-field/)
  *
  * ```typescript
- *  import { TextField } from '@rabex-kit/core';
+ *  import { TextField } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -5019,7 +5107,7 @@ function _handleHelperColor$1(props, key) {
 var MuiTextFieldStyled = /*#__PURE__*/styled(MuiTextField, {
   name: 'MuiTextField',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'success', 'valueFormat', 'valueFormatOption'].includes(prop);
+    return !['titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'success', 'valueFormat', 'valueFormatOption', 'fill'].includes(prop);
   }
 })(function () {
   return {};
@@ -5059,7 +5147,7 @@ var TextField = function TextField(props) {
   };
   return React__default.createElement(Stack, {
     flexDirection: "column",
-    gap: 2,
+    gap: props.size === 'sm' ? 1 : 2,
     flexGrow: 1
   }, title && React__default.createElement(Typography, Object.assign({}, titleProps), title), React__default.createElement(MuiTextFieldStyled, Object.assign({}, other, {
     value: valueFormat ? _valueFormatHandler(value) : value,
@@ -5085,7 +5173,8 @@ var TextField = function TextField(props) {
 };
 TextField.defaultProps = {
   success: false,
-  size: 'medium',
+  fill: false,
+  size: 'md',
   titleProps: {
     variant: 'body2',
     weight: 'bold',
@@ -5623,7 +5712,7 @@ var _excluded$l = ["inputProps", "children"];
  * You can read Material-UI Button Documentation [here](https://mui.com/material-ui/api/Button/).
  *
  * ```typescript
- *  import { UploadButton } from '@rabex-kit/core';
+ *  import { UploadButton } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -5785,7 +5874,7 @@ SegmentedControlTab.defaultProps = {};
 
 exports.useMediaQuery = useMediaQuery;
 exports.useScrollTrigger = useScrollTrigger_js;
-exports.useTheme = useTheme$1;
+exports.useTheme = useTheme;
 exports.styled = styled;
 exports.CssBaseline = CssBaseline_js;
 exports.ThemeProvider = ThemeProvider_js;