@rabex-kit/rabex-ui 0.2.28 → 0.2.30
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.
- package/dist/Button/index.d.ts +2 -2
- package/dist/rabex-ui.cjs.development.js +109 -31
- package/dist/rabex-ui.cjs.development.js.map +1 -1
- package/dist/rabex-ui.cjs.production.min.js +1 -1
- package/dist/rabex-ui.cjs.production.min.js.map +1 -1
- package/dist/rabex-ui.esm.js +109 -31
- package/dist/rabex-ui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/Button/index.d.ts
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { ButtonProps as MuiButtonProps } from '@mui/material';
|
3
|
-
export declare type ButtonProps = Omit<MuiButtonProps, 'size' | 'color' | 'component' | '
|
3
|
+
export declare type ButtonProps = Omit<MuiButtonProps, 'size' | 'color' | 'component' | 'variant'> & {
|
4
4
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
5
5
|
isIcon?: boolean;
|
6
6
|
color?: 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
|
7
7
|
variant?: 'contained' | 'containedSecondary' | 'outlined' | 'text';
|
8
8
|
component?: React.ElementType;
|
9
9
|
};
|
10
|
-
declare const Button: React.
|
10
|
+
declare const Button: React.FC<ButtonProps>;
|
11
11
|
export default Button;
|
@@ -863,41 +863,114 @@ var iconSizes = {
|
|
863
863
|
xl: 24
|
864
864
|
};
|
865
865
|
// Styled button with shouldForwardProp to exclude 'isIcon' from DOM
|
866
|
-
|
867
|
-
shouldForwardProp:
|
868
|
-
|
869
|
-
|
870
|
-
|
871
|
-
|
872
|
-
|
873
|
-
|
874
|
-
|
875
|
-
|
876
|
-
|
877
|
-
|
878
|
-
|
879
|
-
|
880
|
-
|
881
|
-
|
882
|
-
|
866
|
+
/* const StyledButton = styled(MuiButton, {
|
867
|
+
shouldForwardProp: (prop) => prop !== 'isIcon',
|
868
|
+
})<ButtonProps>(({ theme, size, isIcon }) => ({
|
869
|
+
display: 'flex',
|
870
|
+
alignItems: 'center',
|
871
|
+
// Handle icon styling directly here
|
872
|
+
// ...(isIcon && {
|
873
|
+
// minWidth: 'unset',
|
874
|
+
// ...(size === 'xs' && {
|
875
|
+
// width: '24px',
|
876
|
+
// height: '24px',
|
877
|
+
// padding: theme.spacing(0.5),
|
878
|
+
// }),
|
879
|
+
// ...(size === 'sm' && {
|
880
|
+
// width: '32px',
|
881
|
+
// height: '32px',
|
882
|
+
// padding: theme.spacing(1),
|
883
|
+
// }),
|
884
|
+
// ...(size === 'md' && {
|
885
|
+
// width: '40px',
|
886
|
+
// height: '40px',
|
887
|
+
// padding: theme.spacing(1),
|
888
|
+
// }),
|
889
|
+
// ...(size === 'lg' && {
|
890
|
+
// width: '48px',
|
891
|
+
// height: '48px',
|
892
|
+
// padding: theme.spacing(1.5),
|
893
|
+
// }),
|
894
|
+
// ...(size === 'xl' && {
|
895
|
+
// width: '56px',
|
896
|
+
// height: '56px',
|
897
|
+
// padding: theme.spacing(2),
|
898
|
+
// }),
|
899
|
+
// }),
|
900
|
+
'& .MuiButton-startIcon': {
|
901
|
+
margin: 0,
|
902
|
+
},
|
903
|
+
'& .MuiButton-endIcon': {
|
904
|
+
margin: 0,
|
905
|
+
},
|
906
|
+
'& .MuiSvgIcon-root': {
|
907
|
+
fontSize: iconSizes[size || 'md'],
|
908
|
+
},
|
909
|
+
})); */
|
910
|
+
var Button = function Button(_ref) {
|
911
|
+
var _ref$size = _ref.size,
|
912
|
+
size = _ref$size === void 0 ? 'md' : _ref$size,
|
913
|
+
_ref$isIcon = _ref.isIcon,
|
914
|
+
isIcon = _ref$isIcon === void 0 ? false : _ref$isIcon,
|
915
|
+
children = _ref.children,
|
916
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
917
|
+
var StyledButton = styled(MuiButton, {
|
918
|
+
name: 'MuiButton',
|
919
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
920
|
+
return prop !== 'isIcon';
|
883
921
|
}
|
884
|
-
}
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
|
891
|
-
|
922
|
+
})(function (_ref2) {
|
923
|
+
return {
|
924
|
+
display: 'flex',
|
925
|
+
alignItems: 'center',
|
926
|
+
'& .MuiButton-startIcon': {
|
927
|
+
margin: 0
|
928
|
+
},
|
929
|
+
'& .MuiButton-endIcon': {
|
930
|
+
margin: 0
|
931
|
+
},
|
932
|
+
'& .MuiSvgIcon-root': {
|
933
|
+
fontSize: iconSizes[size]
|
934
|
+
}
|
935
|
+
};
|
936
|
+
});
|
937
|
+
var content = isIcon ? children : React__default.createElement(Typography, {
|
938
|
+
variant: typographySizes[size].variant,
|
939
|
+
weight: typographySizes[size].weight,
|
940
|
+
component: "span"
|
941
|
+
}, children);
|
892
942
|
return React__default.createElement(StyledButton, Object.assign({
|
893
|
-
ref: ref,
|
894
943
|
size: size,
|
895
944
|
isIcon: isIcon
|
896
|
-
},
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
}
|
945
|
+
}, props), content);
|
946
|
+
};
|
947
|
+
// const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
948
|
+
// (props, ref) => {
|
949
|
+
// const { size = 'md', isIcon = false, children, ...rest } = props;
|
950
|
+
//
|
951
|
+
// // Handle Typography at the component level, not in styled component
|
952
|
+
// const content = isIcon ? children : (
|
953
|
+
// <Typography
|
954
|
+
// variant={typographySizes[size].variant}
|
955
|
+
// weight={typographySizes[size].weight}
|
956
|
+
// component="span" // Important: use span to avoid nested block elements
|
957
|
+
// >
|
958
|
+
// {children}
|
959
|
+
// </Typography>
|
960
|
+
// );
|
961
|
+
//
|
962
|
+
// return (
|
963
|
+
// <StyledButton
|
964
|
+
// ref={ref}
|
965
|
+
// size={size}
|
966
|
+
// isIcon={isIcon} // This reaches styled component but not DOM
|
967
|
+
// {...rest}
|
968
|
+
// >
|
969
|
+
// {content}
|
970
|
+
// </StyledButton>
|
971
|
+
// );
|
972
|
+
// }
|
973
|
+
// );
|
901
974
|
Button.defaultProps = {
|
902
975
|
variant: 'contained',
|
903
976
|
size: 'md',
|
@@ -2783,6 +2856,7 @@ var components = {
|
|
2783
2856
|
style: function style(_ref11) {
|
2784
2857
|
var theme = _ref11.theme;
|
2785
2858
|
return {
|
2859
|
+
minWidth: '24px',
|
2786
2860
|
width: '24px',
|
2787
2861
|
height: '24px',
|
2788
2862
|
// padding: theme.spacing(3.5, 3.5),
|
@@ -2798,6 +2872,7 @@ var components = {
|
|
2798
2872
|
style: function style(_ref12) {
|
2799
2873
|
var theme = _ref12.theme;
|
2800
2874
|
return {
|
2875
|
+
minWidth: '32px',
|
2801
2876
|
width: '32px',
|
2802
2877
|
height: '32px',
|
2803
2878
|
// padding: theme.spacing(3.5, 3.5),
|
@@ -2813,6 +2888,7 @@ var components = {
|
|
2813
2888
|
style: function style(_ref13) {
|
2814
2889
|
var theme = _ref13.theme;
|
2815
2890
|
return {
|
2891
|
+
minWidth: '40px',
|
2816
2892
|
width: '40px',
|
2817
2893
|
height: '40px',
|
2818
2894
|
// padding: theme.spacing(3.5, 3.5),
|
@@ -2828,6 +2904,7 @@ var components = {
|
|
2828
2904
|
style: function style(_ref14) {
|
2829
2905
|
var theme = _ref14.theme;
|
2830
2906
|
return {
|
2907
|
+
minWidth: '48px',
|
2831
2908
|
width: '48px',
|
2832
2909
|
height: '48px',
|
2833
2910
|
padding: theme.spacing(3),
|
@@ -2842,6 +2919,7 @@ var components = {
|
|
2842
2919
|
style: function style(_ref15) {
|
2843
2920
|
var theme = _ref15.theme;
|
2844
2921
|
return {
|
2922
|
+
minWidth: '56px',
|
2845
2923
|
width: '56px',
|
2846
2924
|
height: '56px',
|
2847
2925
|
padding: theme.spacing(4),
|