@rabex-kit/rabex-ui 0.1.19 → 0.1.21

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/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

@@ -3811,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
@@ -3830,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
         }
       };
     },
@@ -3853,7 +3852,8 @@ var components$3 = {
         '&::.placeholder': {
           opacity: 1,
           color: isLight ? palette.textColor.A40 : palette.textColor.A30
-        }
+        },
+        '&:-webkit-autofill': {}
       };
     }
   },
@@ -3865,6 +3865,7 @@ var components$3 = {
       var theme = _ref3.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(1, 3)
       };
     }
@@ -3876,6 +3877,7 @@ var components$3 = {
       var theme = _ref4.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(2, 3)
       };
     }
@@ -3887,6 +3889,7 @@ var components$3 = {
       var theme = _ref5.theme;
       return {
         fontSize: '14px',
+        lineHeight: '24px',
         padding: theme.spacing(3)
       };
     }
@@ -3898,6 +3901,7 @@ var components$3 = {
       var theme = _ref6.theme;
       return {
         fontSize: '16px',
+        lineHeight: '24px',
         padding: theme.spacing(3)
       };
     }
@@ -3907,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: {
@@ -4510,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',
@@ -4538,8 +4544,25 @@ 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)
+        }),
         '& > div.MuiInputBase-root > input.MuiInputBase-input': {
           color: isLight ? palette.textColor.A80 : palette.textColor.A0,
           padding: spacing(0),
@@ -4552,7 +4575,55 @@ var components$6 = {
         }
       };
     }
-  }
+  },
+  variants: [{
+    props: {
+      fill: true
+    },
+    style: function style(_ref2) {
+      var theme = _ref2.theme;
+      console.log('fill included');
+      var isLight = theme.palette.mode === 'light';
+      return {
+        '& > div.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 {
+        '& > div.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
@@ -4775,7 +4846,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';
  *  ```
  *
  *
@@ -5006,7 +5077,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';
  *  ```
  *
  *
@@ -5016,7 +5087,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 !['fill', 'success', 'titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'valueFormat', 'valueFormatOption'].includes(prop);
   }
 })(function () {
   return {};
@@ -5056,7 +5127,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,
@@ -5064,7 +5135,7 @@ var TextField = function TextField(props) {
   })), helperText && React__default.createElement(Stack, {
     flexDirection: "row",
     justifyContent: "space-between"
-  }, React__default.createElement(Typography, Object.assign({}, helperTextProps, props.size === 'small' && {
+  }, React__default.createElement(Typography, Object.assign({}, helperTextProps, {
     variant: 'body3'
   }, {
     color: _handleHelperColor$1(props, 'helperTextProps')
@@ -5074,7 +5145,7 @@ var TextField = function TextField(props) {
       alignItems: 'center',
       gap: 1
     }
-  }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React__default.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, props.size === 'small' && {
+  }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React__default.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, {
     variant: 'body3'
   }, {
     color: _handleHelperColor$1(props, 'helperTextEndAdornmentProps')
@@ -5082,18 +5153,19 @@ var TextField = function TextField(props) {
 };
 TextField.defaultProps = {
   success: false,
-  size: 'medium',
+  fill: false,
+  size: 'md',
   titleProps: {
     variant: 'body2',
     weight: 'bold',
     color: 'textColor.A80'
   },
   helperTextProps: {
-    variant: 'body2',
+    variant: 'body3',
     color: 'textColor.A60'
   },
   helperTextEndAdornmentProps: {
-    variant: 'body2',
+    variant: 'body3',
     color: 'textColor.A60'
   }
 };
@@ -5620,7 +5692,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';
  *  ```
  *
  *