@rabex-kit/rabex-ui 0.0.6 → 0.0.8

package/dist/Accordion/index.d.ts

@@ -7,7 +7,7 @@ export declare type AccordionProps = MuiAccordionProps;
  * you can see Accordion Documentation api that I mentioned below [here](https://mui.com/material-ui/api/accordion/)
  *
  * ```typescript
- *  import { Accordion } from '@rabex-kit/core';
+ *  import { Accordion } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *

package/dist/Input/index.d.ts

@@ -3,7 +3,7 @@ import { InputProps as MuiInputProps } from '@mui/material';
 import { TypographyProps } from '../Typography';
 interface CustomInputProps extends MuiInputProps {
     success?: boolean;
-    size?: 'large' | 'medium' | 'small';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     helperText?: string | ReactNode;
     titleProps?: TypographyProps;
     helperTextIcon?: ReactNode;

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

@@ -1,9 +1,13 @@
 declare const _default: {
     components: {
         styleOverrides: {
-            root: {
+            root: ({ theme, ownerState }: {
+                theme: any;
+                ownerState: any;
+            }) => {
+                backgroundColor: any;
                 borderRadius: number;
-                padding: number;
+                padding: any;
                 '&::before': {
                     display: string;
                 };
@@ -15,6 +19,19 @@ declare const _default: {
                     borderBottomRightRadius: number;
                     borderBottomLeftRadius: number;
                 };
+                '& .MuiSvgIcon-root': {
+                    height: number;
+                    width: number;
+                    '& path': {
+                        fill: string;
+                    };
+                };
+                '& .MuiAccordionSummary-root': {
+                    minHeight: number;
+                };
+                '& .MuiAccordionSummary-content': {
+                    margin: number;
+                };
             };
         };
     };

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

@@ -1,9 +1,10 @@
 import { Theme } from '@mui/material';
 declare module '@mui/material/InputBase' {
     interface InputBasePropsSizeOverrides {
-        medium: true;
-        small: true;
-        large: true;
+        sm: true;
+        md: true;
+        lg: true;
+        xl: true;
     }
 }
 declare const _default: {

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

@@ -130,7 +130,7 @@ var MuiZoom = _interopDefault(require('@mui/material/Zoom/Zoom.js'));
  * you can see Accordion Documentation api that I mentioned below [here](https://mui.com/material-ui/api/accordion/)
  *
  * ```typescript
- *  import { Accordion } from '@rabex-kit/core';
+ *  import { Accordion } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -141,7 +141,7 @@ var Accordion = function Accordion(props) {
   return React__default.createElement(MuiAccordion, Object.assign({}, props));
 };
 Accordion.defaultProps = {
-  elevation: 1
+  elevation: 0
 };
 
 /**
@@ -1279,7 +1279,7 @@ function _handleHelperColor(props, key) {
  * You can read Material-UI Input Documentation [here](https://mui.com/material-ui/api/input/).
  *
  * ```typescript
- *  import { Input } from '@rabex-kit/core';
+ *  import { Input } from '@rabex-kit/rabex-ui';
  *  ```
  *
  *
@@ -1332,7 +1332,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   };
   return React__default.createElement(Stack, {
     flexDirection: "column",
-    gap: 2
+    gap: props.size === 'sm' ? 1 : 2
   }, title && React__default.createElement(Typography, Object.assign({
     color: mode === 'light' ? 'textColor.A80' : 'textColor.A30'
   }, titleProps), title), React__default.createElement(MuiInputStyled, Object.assign({
@@ -1343,7 +1343,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   })), 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, props.size === 'sm' && {
     variant: 'body3'
   }, {
     color: _handleHelperColor(props, 'helperTextProps')
@@ -1353,7 +1353,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       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, props.size === 'sm' && {
     variant: 'body3'
   }, {
     color: _handleHelperColor(props, 'helperTextEndAdornmentProps')
@@ -1362,7 +1362,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 Input.defaultProps = {
   success: false,
   hasBg: false,
-  size: 'medium',
+  size: 'md',
   disableUnderline: true,
   titleProps: {
     variant: 'body2',
@@ -3717,23 +3717,32 @@ var components$3 = {
         gap: spacing(1),
         transition: 'all 0.2s',
         padding: spacing(2.5, 3),
-        border: isLight ? "1px solid " + palette.textColor.A20 : "1px solid " + palette.secondary.A100,
-        backgroundColor: isLight ? palette.grayBackground.A20 : palette.secondary.A100,
+        border: isLight ? "1px solid " + palette.base[300] : "1px solid " + palette.secondary.A100,
+        backgroundColor: isLight
+        // ? palette.grayBackground.A20
+        ? 'transparent' : palette.secondary.A100,
         '&:hover': {
-          border: isLight ? "1px solid " + palette.textColor.A20 : "1px solid " + palette.base.A60,
-          backgroundColor: isLight ? palette.grayBackground.A20 : palette.base.A60
+          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
         },
         '&.Mui-focused': {
-          border: isLight ? "1px solid " + palette.primary.main : "1px solid " + palette.primary.A80,
-          backgroundColor: isLight ? palette.base.A0 : palette.base.A60
+          border: isLight ? "1.5px solid " + palette.primary[500] : "1px solid " + palette.primary.A80
         },
         '&.Mui-error': {
-          border: isLight ? "1px solid " + palette.error.A100 : "1px solid " + palette.error.A60,
+          border: isLight ? "1.5px solid " + palette.error[400] : "1px solid " + palette.error.A60,
           backgroundColor: isLight ? palette.base.A0 : colorManipulator_js.alpha(palette.error.A100 || '', 0.1)
         },
         '&.Mui-disabled': {
-          borderColor: isLight ? palette.grayBackground.A40 : palette.secondary.A100,
-          backgroundColor: isLight ? palette.grayBackground.A10 : palette.secondary.A100
+          borderColor: isLight
+          // ? palette.grayBackground.A40
+          ? palette.base[300] : palette.secondary.A100,
+          backgroundColor: isLight
+          // ? palette.grayBackground.A10
+          ? 'transparent' : palette.secondary.A100
         }
       };
     },
@@ -3757,36 +3766,79 @@ var components$3 = {
   },
   variants: [{
     props: {
-      size: 'small'
+      size: 'sm'
     },
     style: function style(_ref3) {
       var theme = _ref3.theme;
       return {
         fontSize: '14px',
-        padding: theme.spacing(1, 3)
+        padding: theme.spacing(1, 2)
       };
     }
   }, {
     props: {
-      size: 'large'
+      size: 'md'
     },
     style: function style(_ref4) {
       var theme = _ref4.theme;
       return {
-        fontSize: '16px',
-        padding: theme.spacing(3)
+        fontSize: '14px',
+        padding: theme.spacing(2)
       };
     }
   }, {
     props: {
-      hasBg: true
+      size: 'lg'
     },
     style: function style(_ref5) {
       var theme = _ref5.theme;
+      return {
+        fontSize: '14px',
+        padding: theme.spacing(3, 2)
+      };
+    }
+  }, {
+    props: {
+      size: 'xl'
+    },
+    style: function style(_ref6) {
+      var theme = _ref6.theme;
+      return {
+        fontSize: '16px',
+        padding: theme.spacing(3, 2)
+      };
+    }
+  }, {
+    props: {
+      hasBg: true
+    },
+    style: function style(_ref7) {
+      var theme = _ref7.theme;
       if (theme.palette.mode === 'light') {
+        var isLight = theme.palette.mode === 'light';
         return {
-          border: '1px solid transparent',
-          background: theme.palette.secondary.A80
+          // 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 {};
     }
@@ -3794,8 +3846,8 @@ var components$3 = {
     props: {
       success: true
     },
-    style: function style(_ref6) {
-      var palette = _ref6.theme.palette;
+    style: function style(_ref8) {
+      var palette = _ref8.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)
@@ -4043,20 +4095,37 @@ var RabexShadows = ['none', '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 3px rg
 var RabexAccordion = {
   components: {
     styleOverrides: {
-      root: {
-        borderRadius: 16,
-        padding: 16,
-        '&::before': {
-          display: 'none'
-        },
-        '&:first-of-type': {
-          borderTopRightRadius: 16,
-          borderTopLeftRadius: 16
-        },
-        '&:last-of-type': {
-          borderBottomRightRadius: 16,
-          borderBottomLeftRadius: 16
-        }
+      root: function root(_ref) {
+        var theme = _ref.theme;
+        return {
+          backgroundColor: theme.palette.base[100],
+          borderRadius: 12,
+          padding: theme.spacing(3.5, 4),
+          '&::before': {
+            display: 'none'
+          },
+          '&:first-of-type': {
+            borderTopRightRadius: 12,
+            borderTopLeftRadius: 12
+          },
+          '&:last-of-type': {
+            borderBottomRightRadius: 12,
+            borderBottomLeftRadius: 12
+          },
+          '& .MuiSvgIcon-root': {
+            height: 20,
+            width: 20,
+            '& path': {
+              fill: 'none'
+            }
+          },
+          '& .MuiAccordionSummary-root': {
+            minHeight: 16
+          },
+          '& .MuiAccordionSummary-content': {
+            margin: 0
+          }
+        };
       }
     }
   }