@rabex-kit/rabex-ui 0.2.23 → 0.2.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,7 +6,7 @@ export declare type DividerProps = MuiDividerProps;
6
6
  * You can read Material-UI Divider Documentation [here](https://mui.com/material-ui/api/divider/).
7
7
  *
8
8
  * ```typescript
9
- * import { Divider } from '@rabex-kit/core';
9
+ * import { Divider } from '@rabex-kit/rabex-ui';
10
10
  * ```
11
11
  *
12
12
  * @param props
@@ -1,14 +1,6 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
3
3
  import { TypographyProps } from '../Typography';
4
- declare module '@mui/material/TextField' {
5
- interface TextFieldPropsSizeOverrides {
6
- sm: true;
7
- md: true;
8
- lg: true;
9
- xl: true;
10
- }
11
- }
12
4
  export declare type TextFieldProps = Omit<MuiTextFieldProps, 'size'> & {
13
5
  success?: boolean;
14
6
  fill?: boolean;
@@ -15,5 +15,5 @@ declare module '@mui/material/styles' {
15
15
  xxxl: true;
16
16
  }
17
17
  }
18
- declare const getDesignTokens: ({ deviceType, mode, direction }: themeTypes) => ThemeOptions;
18
+ declare const getDesignTokens: ({ deviceType, mode, direction, }: themeTypes) => ThemeOptions;
19
19
  export default getDesignTokens;
@@ -1062,7 +1062,7 @@ CurrencyPairsTitle.defaultProps = {
1062
1062
  * You can read Material-UI Divider Documentation [here](https://mui.com/material-ui/api/divider/).
1063
1063
  *
1064
1064
  * ```typescript
1065
- * import { Divider } from '@rabex-kit/core';
1065
+ * import { Divider } from '@rabex-kit/rabex-ui';
1066
1066
  * ```
1067
1067
  *
1068
1068
  * @param props
@@ -3270,14 +3270,25 @@ var RabexTabs = {
3270
3270
  },
3271
3271
  backgroundColor: 'unset'
3272
3272
  } : {
3273
- '& .MuiTab-root.Mui-selected': {
3274
- borderRadius: 4,
3275
- color: theme.palette.mode === 'light' ? theme.palette.textColor.A60 : theme.palette.textColor.A0
3276
- },
3277
3273
  '& .MuiTabs-flexContainer': {
3278
- padding: theme.spacing(1)
3274
+ // padding: theme.spacing(1),
3275
+ gap: theme.spacing(2)
3276
+ },
3277
+ '& .MuiTab-root': {
3278
+ borderRadius: theme.spacing(2),
3279
+ backgroundColor: theme.palette.secondary[500],
3280
+ color: theme.palette.textColor[900],
3281
+ '&:hover': {
3282
+ backgroundColor: theme.palette.primary[600],
3283
+ color: theme.palette.textColor[50]
3284
+ }
3285
+ },
3286
+ '& .MuiTab-root.Mui-selected': {
3287
+ borderRadius: theme.spacing(2),
3288
+ backgroundColor: theme.palette.primary[500],
3289
+ color: theme.palette.textColor[50]
3279
3290
  },
3280
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary.A100 : theme.palette.secondary.A100
3291
+ backgroundColor: 'transparent'
3281
3292
  };
3282
3293
  // Size-specific styles
3283
3294
  var sizeMap = mode === 'underline' ? {
@@ -3316,28 +3327,22 @@ var RabexTabs = {
3316
3327
  }
3317
3328
  } : {
3318
3329
  sm: {
3319
- '& .MuiTabs-fixed': {
3320
- padding: theme.spacing(1, 2),
3321
- marginBottom: theme.spacing(2)
3322
- },
3323
- height: theme.spacing(8),
3324
- borderRadius: theme.spacing(2)
3330
+ '& .MuiTab-root': {
3331
+ height: theme.spacing(8),
3332
+ padding: theme.spacing(1, 3)
3333
+ }
3325
3334
  },
3326
3335
  md: {
3327
- '& .MuiTabs-fixed': {
3328
- padding: theme.spacing(2, 4),
3329
- marginBottom: theme.spacing(2)
3330
- },
3331
- height: theme.spacing(10),
3332
- borderRadius: theme.spacing(2)
3336
+ '& .MuiTab-root': {
3337
+ height: theme.spacing(10),
3338
+ padding: theme.spacing(2, 4)
3339
+ }
3333
3340
  },
3334
3341
  lg: {
3335
- '& .MuiTabs-fixed': {
3336
- padding: theme.spacing(3, 4),
3337
- marginBottom: theme.spacing(3)
3338
- },
3339
- height: theme.spacing(12),
3340
- borderRadius: theme.spacing(3)
3342
+ '& .MuiTab-root': {
3343
+ height: theme.spacing(12),
3344
+ padding: theme.spacing(3, 4)
3345
+ }
3341
3346
  }
3342
3347
  };
3343
3348
  var sizeStyles = sizeMap[size || 'sm'] || sizeMap.sm;
@@ -3363,7 +3368,7 @@ var RabexTabs = {
3363
3368
  border: "2px dotted " + theme.palette.base.A40
3364
3369
  } : {};
3365
3370
  // Return combined styles
3366
- return _extends({}, baseStyles, modeStyles, sizeStyles, variantStyles, orientationStyles, borderStyles);
3371
+ return _extends({}, baseStyles, modeStyles, variantStyles, sizeStyles, orientationStyles, borderStyles);
3367
3372
  },
3368
3373
  indicator: function indicator(_ref3) {
3369
3374
  var ownerState = _ref3.ownerState;
@@ -5437,7 +5442,7 @@ function _handleHelperColor$1(props, key) {
5437
5442
  var MuiTextFieldStyled = /*#__PURE__*/styled(MuiTextField, {
5438
5443
  name: 'MuiTextField',
5439
5444
  shouldForwardProp: function shouldForwardProp(prop) {
5440
- return !['fill', 'success', 'titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'valueFormat', 'valueFormatOption'].includes(prop);
5445
+ return !['fill', 'success', 'titleProps', 'helperText', 'helperTextIcon', 'helperTextProps', 'helperTextEndAdornment', 'helperTextEndAdornmentProps', 'valueFormat', 'valueFormatOption', 'size'].includes(prop);
5441
5446
  }
5442
5447
  })(function () {
5443
5448
  return {};
@@ -5456,6 +5461,7 @@ var TextField = function TextField(props) {
5456
5461
  valueFormat = _ref.valueFormat,
5457
5462
  valueFormatOption = _ref.valueFormatOption,
5458
5463
  fullWidth = _ref.fullWidth,
5464
+ size = _ref.size,
5459
5465
  other = _objectWithoutPropertiesLoose(_ref, _excluded$i);
5460
5466
  if (!valueFormat && !!valueFormatOption) {
5461
5467
  console.warn("'valueFormatOption' Only Work With known 'valueFormat's...");
@@ -5478,17 +5484,19 @@ var TextField = function TextField(props) {
5478
5484
  };
5479
5485
  return React__default.createElement(Stack, {
5480
5486
  flexDirection: "column",
5481
- gap: props.size === 'sm' ? 1 : 2,
5487
+ gap: size === 'sm' ? 1 : 2,
5482
5488
  width: fullWidth ? '100%' : 'unset'
5483
5489
  }, title && React__default.createElement(Typography, Object.assign({
5484
5490
  color: other.disabled ? 'textColor.A40' : 'textColor.A80'
5485
- }, titleProps), title), React__default.createElement(MuiTextFieldStyled, Object.assign({}, other, {
5491
+ }, titleProps), title), React__default.createElement(MuiTextFieldStyled, Object.assign({
5492
+ size: size
5493
+ }, other, {
5486
5494
  value: valueFormat ? _valueFormatHandler(value) : value,
5487
5495
  onChange: valueFormat ? _onChangeFormatHandler : onChange
5488
5496
  })), helperText && React__default.createElement(Stack, {
5489
5497
  flexDirection: "row",
5490
5498
  justifyContent: "space-between"
5491
- }, React__default.createElement(Typography, Object.assign({}, helperTextProps, props.size === 'sm' && {
5499
+ }, React__default.createElement(Typography, Object.assign({}, helperTextProps, size === 'sm' && {
5492
5500
  variant: 'body3'
5493
5501
  }, {
5494
5502
  color: _handleHelperColor$1(props, 'helperTextProps')
@@ -5498,7 +5506,7 @@ var TextField = function TextField(props) {
5498
5506
  alignItems: 'center',
5499
5507
  gap: 1
5500
5508
  }
5501
- }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React__default.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, props.size === 'sm' && {
5509
+ }), helperTextIcon && helperTextIcon, helperText), helperTextEndAdornment && React__default.createElement(Typography, Object.assign({}, helperTextEndAdornmentProps, size === 'sm' && {
5502
5510
  variant: 'body3'
5503
5511
  }, {
5504
5512
  color: _handleHelperColor$1(props, 'helperTextEndAdornmentProps')