@rabex-kit/rabex-ui 0.1.0 → 0.1.2

package/dist/Input/index.d.ts

@@ -11,6 +11,7 @@ interface CustomInputProps extends MuiInputProps {
     helperTextEndAdornment?: string | ReactNode;
     helperTextEndAdornmentProps?: TypographyProps;
     hasBg?: boolean;
+    fill?: boolean;
     valueFormat?: 'numbers' | 'separatedNumbers';
     valueFormatOption?: {
         separator?: string;

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

@@ -11,6 +11,9 @@ declare module '@mui/material/Button' {
         warning: true;
     }
     interface ButtonPropsSizeOverrides {
+        xsmall: true;
+        small: true;
+        medium: true;
         xs: true;
         sm: true;
         md: true;

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

@@ -1,6 +1,8 @@
 import { Theme } from '@mui/material';
 declare module '@mui/material/InputBase' {
     interface InputBasePropsSizeOverrides {
+        small: true;
+        large: true;
         sm: true;
         md: true;
         lg: true;

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

@@ -1289,7 +1289,7 @@ function _handleHelperColor(props, key) {
 var MuiInputStyled = /*#__PURE__*/styled(MuiInput, {
   name: 'MuiInput',
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['hasBg', 'titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'success', 'valueFormat', 'valueFormatOption'].includes(prop);
+    return !['hasBg', 'fill', 'titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'success', 'valueFormat', 'valueFormatOption'].includes(prop);
   }
 })(function () {
   return {};
@@ -1362,6 +1362,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 Input.defaultProps = {
   success: false,
   hasBg: false,
+  fill: false,
   size: 'md',
   disableUnderline: true,
   titleProps: {
@@ -2473,15 +2474,16 @@ var spaceBasedSize = function spaceBasedSize(theme) {
 var components = {
   styleOverrides: {
     root: function root(_ref) {
+      var _spaceBasedSize$size, _spaceBasedSize$size2, _spaceBasedSize$size3, _spaceBasedSize$size4, _spaceBasedSize$size5;
       var theme = _ref.theme,
         ownerState = _ref.ownerState;
       var hasStartIcon = !!(ownerState !== null && ownerState !== void 0 && ownerState.startIcon);
       var hasEndIcon = !!(ownerState !== null && ownerState !== void 0 && ownerState.endIcon);
       var size = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.size) || 'md';
       var overridenRootStyles = {
-        gap: spaceBasedSize(theme)[size].gap,
-        paddingLeft: hasStartIcon ? spaceBasedSize(theme)[size].iconSidePadding : spaceBasedSize(theme)[size].textSidePadding,
-        paddingRight: hasEndIcon ? spaceBasedSize(theme)[size].iconSidePadding : spaceBasedSize(theme)[size].textSidePadding
+        gap: (_spaceBasedSize$size = spaceBasedSize(theme)[size]) === null || _spaceBasedSize$size === void 0 ? void 0 : _spaceBasedSize$size.gap,
+        paddingLeft: hasStartIcon ? (_spaceBasedSize$size2 = spaceBasedSize(theme)[size]) === null || _spaceBasedSize$size2 === void 0 ? void 0 : _spaceBasedSize$size2.iconSidePadding : (_spaceBasedSize$size3 = spaceBasedSize(theme)[size]) === null || _spaceBasedSize$size3 === void 0 ? void 0 : _spaceBasedSize$size3.textSidePadding,
+        paddingRight: hasEndIcon ? (_spaceBasedSize$size4 = spaceBasedSize(theme)[size]) === null || _spaceBasedSize$size4 === void 0 ? void 0 : _spaceBasedSize$size4.iconSidePadding : (_spaceBasedSize$size5 = spaceBasedSize(theme)[size]) === null || _spaceBasedSize$size5 === void 0 ? void 0 : _spaceBasedSize$size5.textSidePadding
       };
       return overridenRootStyles;
     },
@@ -2715,6 +2717,97 @@ var components = {
         borderRadius: theme.spacing(2)
       };
     }
+  },
+  /// old classes
+  {
+    props: {
+      size: 'medium'
+    },
+    style: function style(_ref16) {
+      var theme = _ref16.theme;
+      return {
+        padding: theme.spacing(2.5, 4),
+        fontSize: '14px',
+        lineHeight: '28px',
+        fontWeight: 600
+      };
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: function style(_ref17) {
+      var theme = _ref17.theme;
+      return {
+        padding: theme.spacing(1.5, 4),
+        fontSize: '14px',
+        lineHeight: '28px',
+        fontWeight: 600
+      };
+    }
+  }, {
+    props: {
+      size: 'xsmall'
+    },
+    style: function style(_ref18) {
+      var theme = _ref18.theme;
+      return {
+        padding: theme.spacing(1, 4),
+        fontSize: '14px',
+        lineHeight: '24px',
+        fontWeight: 100
+      };
+    }
+  }, {
+    props: {
+      size: 'medium',
+      isIcon: true
+    },
+    style: function style(_ref19) {
+      var theme = _ref19.theme;
+      return {
+        minWidth: 'unset',
+        padding: theme.spacing(3.5, 3.5)
+      };
+    }
+  }, {
+    props: {
+      size: 'small',
+      isIcon: true
+    },
+    style: function style(_ref20) {
+      var theme = _ref20.theme;
+      return {
+        minWidth: 'unset',
+        padding: theme.spacing(2.5, 2.5)
+      };
+    }
+  }, {
+    props: {
+      size: 'xsmall',
+      isIcon: true
+    },
+    style: function style(_ref21) {
+      var theme = _ref21.theme;
+      return {
+        minWidth: 'unset',
+        padding: theme.spacing(2)
+      };
+    }
+  }, {
+    props: {
+      radius: 'medium'
+    },
+    style: {
+      borderRadius: 8
+    }
+  }, {
+    props: {
+      radius: 'small'
+    },
+    style: {
+      borderRadius: 6
+    }
   }]
 };
 var RabexButton = {
@@ -3810,7 +3903,7 @@ var components$3 = {
     }
   }, {
     props: {
-      hasBg: true
+      fill: true
     },
     style: function style(_ref7) {
       var theme = _ref7.theme;
@@ -3853,6 +3946,100 @@ var components$3 = {
         backgroundColor: palette.mode === 'light' ? palette.base.A0 : colorManipulator_js.alpha(palette.success.A100, 0.1)
       };
     }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: function style(_ref9) {
+      var theme = _ref9.theme;
+      return {
+        fontSize: '14px',
+        padding: theme.spacing(1, 3)
+      };
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: function style(_ref10) {
+      var theme = _ref10.theme;
+      return {
+        fontSize: '16px',
+        padding: theme.spacing(3)
+      };
+    }
+  }, {
+    props: {
+      hasBg: true
+    },
+    style: function style(_ref11) {
+      var theme = _ref11.theme;
+      if (theme.palette.mode === 'light') {
+        return {
+          border: '1px solid transparent',
+          background: theme.palette.secondary.A80
+        };
+      } else return {};
+    }
+  }, {
+    props: {
+      success: true
+    },
+    style: function style(_ref12) {
+      var palette = _ref12.theme.palette;
+      return {
+        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)
+      };
+    }
+  },
+  /// old styles
+  {
+    props: {
+      size: 'small'
+    },
+    style: function style(_ref13) {
+      var theme = _ref13.theme;
+      return {
+        fontSize: '14px',
+        padding: theme.spacing(1, 3)
+      };
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: function style(_ref14) {
+      var theme = _ref14.theme;
+      return {
+        fontSize: '16px',
+        padding: theme.spacing(3)
+      };
+    }
+  }, {
+    props: {
+      hasBg: true
+    },
+    style: function style(_ref15) {
+      var theme = _ref15.theme;
+      if (theme.palette.mode === 'light') {
+        return {
+          border: '1px solid transparent',
+          background: theme.palette.secondary.A80
+        };
+      } else return {};
+    }
+  }, {
+    props: {
+      success: true
+    },
+    style: function style(_ref16) {
+      var palette = _ref16.theme.palette;
+      return {
+        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 RabexInput = {