@xyo-network/react-shared 2.25.78 → 2.26.0

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.
Files changed (4) hide show
  1. package/dist/esm/components/CardEx.js +18 -14
  2. package/dist/esm/components/CardEx.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/components/CardEx.tsx +18 -14
package/dist/esm/components/CardEx.js CHANGED
@@ -1,33 +1,37 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Card } from '@mui/material';
2
+ import { Card, useTheme } from '@mui/material';
3
3
  import { useGradientStyles } from '../hooks';
4
4
  export const CardEx = ({ display = 'flex', flexDirection = 'column', flexGrow, alignItems = 'stretch', alignContent, alignSelf, justifyItems = 'flex-start', justifyContent = 'flex-start', justifySelf, style, gap, rowGap, columnGap, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginTop, marginBottom, marginLeft, marginRight, gradient, ...props }) => {
5
5
  const { styles } = useGradientStyles();
6
+ const theme = useTheme();
7
+ const applySpacing = (value) => {
8
+ return value === undefined ? value : typeof value === 'string' ? value : theme.spacing(value);
9
+ };
6
10
  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {};
7
11
  return (_jsx(Card, { style: {
8
12
  ...gradientStyle,
9
13
  alignContent,
10
14
  alignItems,
11
15
  alignSelf,
12
- columnGap,
16
+ columnGap: applySpacing(columnGap),
13
17
  display,
14
18
  flexDirection,
15
19
  flexGrow,
16
- gap,
20
+ gap: applySpacing(gap),
17
21
  justifyContent,
18
22
  justifyItems,
19
23
  justifySelf,
20
- margin,
21
- marginBottom,
22
- marginLeft,
23
- marginRight,
24
- marginTop,
25
- padding,
26
- paddingBottom,
27
- paddingLeft,
28
- paddingRight,
29
- paddingTop,
30
- rowGap,
24
+ margin: applySpacing(margin),
25
+ marginBottom: applySpacing(marginBottom),
26
+ marginLeft: applySpacing(marginLeft),
27
+ marginRight: applySpacing(marginRight),
28
+ marginTop: applySpacing(marginTop),
29
+ padding: applySpacing(padding),
30
+ paddingBottom: applySpacing(paddingBottom),
31
+ paddingLeft: applySpacing(paddingLeft),
32
+ paddingRight: applySpacing(paddingRight),
33
+ paddingTop: applySpacing(paddingTop),
34
+ rowGap: applySpacing(rowGap),
31
35
  ...style,
32
36
  }, ...props }));
33
37
  };
package/dist/esm/components/CardEx.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardEx.js","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAA;AAG/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAO5C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,GAAG,MAAM,EAChB,aAAa,GAAG,QAAQ,EACxB,QAAQ,EACR,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,SAAS,EACT,YAAY,GAAG,YAAY,EAC3B,cAAc,GAAG,YAAY,EAC7B,WAAW,EACX,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,UAAU,EACV,aAAa,EACb,MAAM,EACN,SAAS,EACT,YAAY,EACZ,UAAU,EACV,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAChH,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE;YACL,GAAG,aAAa;YAChB,YAAY;YACZ,UAAU;YACV,SAAS;YACT,SAAS;YACT,OAAO;YACP,aAAa;YACb,QAAQ;YACR,GAAG;YACH,cAAc;YACd,YAAY;YACZ,WAAW;YACX,MAAM;YACN,YAAY;YACZ,UAAU;YACV,WAAW;YACX,SAAS;YACT,OAAO;YACP,aAAa;YACb,WAAW;YACX,YAAY;YACZ,UAAU;YACV,MAAM;YACN,GAAG,KAAK;SACT,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"CardEx.js","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAO5C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,GAAG,MAAM,EAChB,aAAa,GAAG,QAAQ,EACxB,QAAQ,EACR,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,SAAS,EACT,YAAY,GAAG,YAAY,EAC3B,cAAc,GAAG,YAAY,EAC7B,WAAW,EACX,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,UAAU,EACV,aAAa,EACb,MAAM,EACN,SAAS,EACT,YAAY,EACZ,UAAU,EACV,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,YAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC/C,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC/F,CAAC,CAAA;IACD,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAChH,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE;YACL,GAAG,aAAa;YAChB,YAAY;YACZ,UAAU;YACV,SAAS;YACT,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;YAClC,OAAO;YACP,aAAa;YACb,QAAQ;YACR,GAAG,EAAE,YAAY,CAAC,GAAG,CAAC;YACtB,cAAc;YACd,YAAY;YACZ,WAAW;YACX,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC;YAC5B,YAAY,EAAE,YAAY,CAAC,YAAY,CAAC;YACxC,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC;YACpC,WAAW,EAAE,YAAY,CAAC,WAAW,CAAC;YACtC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;YAClC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC;YAC9B,aAAa,EAAE,YAAY,CAAC,aAAa,CAAC;YAC1C,WAAW,EAAE,YAAY,CAAC,WAAW,CAAC;YACtC,YAAY,EAAE,YAAY,CAAC,YAAY,CAAC;YACxC,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC;YACpC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC;YAC5B,GAAG,KAAK;SACT,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA"}
package/package.json CHANGED
@@ -88,6 +88,6 @@
88
88
  },
89
89
  "sideEffects": false,
90
90
  "types": "dist/esm/index.d.ts",
91
- "version": "2.25.78",
91
+ "version": "2.26.0",
92
92
  "packageManager": "yarn@3.1.1"
93
93
  }
package/src/components/CardEx.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Card, CardProps } from '@mui/material'
1
+ import { Card, CardProps, useTheme } from '@mui/material'
2
2
  import { CSSProperties } from 'react'
3
3
 
4
4
  import { useGradientStyles } from '../hooks'
@@ -36,6 +36,10 @@ export const CardEx: React.FC<CardExProps> = ({
36
36
  ...props
37
37
  }) => {
38
38
  const { styles } = useGradientStyles()
39
+ const theme = useTheme()
40
+ const applySpacing = (value?: number | string) => {
41
+ return value === undefined ? value : typeof value === 'string' ? value : theme.spacing(value)
42
+ }
39
43
  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}
40
44
  return (
41
45
  <Card
@@ -44,25 +48,25 @@ export const CardEx: React.FC<CardExProps> = ({
44
48
  alignContent,
45
49
  alignItems,
46
50
  alignSelf,
47
- columnGap,
51
+ columnGap: applySpacing(columnGap),
48
52
  display,
49
53
  flexDirection,
50
54
  flexGrow,
51
- gap,
55
+ gap: applySpacing(gap),
52
56
  justifyContent,
53
57
  justifyItems,
54
58
  justifySelf,
55
- margin,
56
- marginBottom,
57
- marginLeft,
58
- marginRight,
59
- marginTop,
60
- padding,
61
- paddingBottom,
62
- paddingLeft,
63
- paddingRight,
64
- paddingTop,
65
- rowGap,
59
+ margin: applySpacing(margin),
60
+ marginBottom: applySpacing(marginBottom),
61
+ marginLeft: applySpacing(marginLeft),
62
+ marginRight: applySpacing(marginRight),
63
+ marginTop: applySpacing(marginTop),
64
+ padding: applySpacing(padding),
65
+ paddingBottom: applySpacing(paddingBottom),
66
+ paddingLeft: applySpacing(paddingLeft),
67
+ paddingRight: applySpacing(paddingRight),
68
+ paddingTop: applySpacing(paddingTop),
69
+ rowGap: applySpacing(rowGap),
66
70
  ...style,
67
71
  }}
68
72
  {...props}