@xyo-network/react-shared 2.25.77 → 2.26.1

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 (5) hide show
  1. package/dist/esm/components/CardEx.d.ts +2 -11
  2. package/dist/esm/components/CardEx.js +32 -3
  3. package/dist/esm/components/CardEx.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/CardEx.tsx +52 -15
package/dist/esm/components/CardEx.d.ts CHANGED
@@ -1,15 +1,6 @@
1
1
  import { CardProps } from '@mui/material';
2
2
  import { CSSProperties } from 'react';
3
- export interface CardExProps extends CardProps {
3
+ export declare type CardExProps = CardProps & CSSProperties & {
4
4
  gradient?: 'border' | 'background';
5
- display?: CSSProperties['display'];
6
- flexDirection?: CSSProperties['flexDirection'];
7
- flexGrow?: CSSProperties['flexGrow'];
8
- alignItems?: CSSProperties['alignItems'];
9
- alignContent?: CSSProperties['alignContent'];
10
- alignSelf?: CSSProperties['alignSelf'];
11
- justifyItems?: CSSProperties['justifyItems'];
12
- justifyContent?: CSSProperties['justifyContent'];
13
- justifySelf?: CSSProperties['justifySelf'];
14
- }
5
+ };
15
6
  export declare const CardEx: React.FC<CardExProps>;
package/dist/esm/components/CardEx.js CHANGED
@@ -1,9 +1,38 @@
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
- export const CardEx = ({ display, flexDirection = 'column', flexGrow, alignItems = 'stretch', alignContent, alignSelf, justifyItems = 'flex-start', justifyContent = 'flex-start', justifySelf, style, gradient, ...props }) => {
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
- return (_jsx(Card, { style: { ...gradientStyle, alignContent, alignItems, alignSelf, display, flexDirection, flexGrow, justifyContent, justifyItems, justifySelf, ...style }, ...props }));
11
+ return (_jsx(Card, { style: {
12
+ ...gradientStyle,
13
+ alignContent,
14
+ alignItems,
15
+ alignSelf,
16
+ columnGap: applySpacing(columnGap),
17
+ display,
18
+ flexDirection,
19
+ flexGrow,
20
+ gap: applySpacing(gap),
21
+ justifyContent,
22
+ justifyItems,
23
+ justifySelf,
24
+ margin: applySpacing(margin),
25
+ marginBottom: applySpacing(marginBottom ?? margin),
26
+ marginLeft: applySpacing(marginLeft ?? margin),
27
+ marginRight: applySpacing(marginRight ?? margin),
28
+ marginTop: applySpacing(marginTop ?? margin),
29
+ padding: applySpacing(padding),
30
+ paddingBottom: applySpacing(paddingBottom ?? padding),
31
+ paddingLeft: applySpacing(paddingLeft ?? padding),
32
+ paddingRight: applySpacing(paddingRight ?? padding),
33
+ paddingTop: applySpacing(paddingTop ?? padding),
34
+ rowGap: applySpacing(rowGap),
35
+ ...style,
36
+ }, ...props }));
8
37
  };
9
38
  //# sourceMappingURL=CardEx.js.map
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;AAe5C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,EACP,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,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,IAAC,KAAK,EAAE,EAAE,GAAG,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAC7K,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,IAAI,MAAM,CAAC;YAClD,UAAU,EAAE,YAAY,CAAC,UAAU,IAAI,MAAM,CAAC;YAC9C,WAAW,EAAE,YAAY,CAAC,WAAW,IAAI,MAAM,CAAC;YAChD,SAAS,EAAE,YAAY,CAAC,SAAS,IAAI,MAAM,CAAC;YAC5C,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC;YAC9B,aAAa,EAAE,YAAY,CAAC,aAAa,IAAI,OAAO,CAAC;YACrD,WAAW,EAAE,YAAY,CAAC,WAAW,IAAI,OAAO,CAAC;YACjD,YAAY,EAAE,YAAY,CAAC,YAAY,IAAI,OAAO,CAAC;YACnD,UAAU,EAAE,YAAY,CAAC,UAAU,IAAI,OAAO,CAAC;YAC/C,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.77",
91
+ "version": "2.26.1",
92
92
  "packageManager": "yarn@3.1.1"
93
93
  }
package/src/components/CardEx.tsx CHANGED
@@ -1,23 +1,15 @@
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'
5
5
 
6
- export interface CardExProps extends CardProps {
7
- gradient?: 'border' | 'background'
8
- display?: CSSProperties['display']
9
- flexDirection?: CSSProperties['flexDirection']
10
- flexGrow?: CSSProperties['flexGrow']
11
- alignItems?: CSSProperties['alignItems']
12
- alignContent?: CSSProperties['alignContent']
13
- alignSelf?: CSSProperties['alignSelf']
14
- justifyItems?: CSSProperties['justifyItems']
15
- justifyContent?: CSSProperties['justifyContent']
16
- justifySelf?: CSSProperties['justifySelf']
17
- }
6
+ export type CardExProps = CardProps &
7
+ CSSProperties & {
8
+ gradient?: 'border' | 'background'
9
+ }
18
10
 
19
11
  export const CardEx: React.FC<CardExProps> = ({
20
- display,
12
+ display = 'flex',
21
13
  flexDirection = 'column',
22
14
  flexGrow,
23
15
  alignItems = 'stretch',
@@ -27,12 +19,57 @@ export const CardEx: React.FC<CardExProps> = ({
27
19
  justifyContent = 'flex-start',
28
20
  justifySelf,
29
21
  style,
22
+ gap,
23
+ rowGap,
24
+ columnGap,
25
+ padding,
26
+ paddingLeft,
27
+ paddingRight,
28
+ paddingTop,
29
+ paddingBottom,
30
+ margin,
31
+ marginTop,
32
+ marginBottom,
33
+ marginLeft,
34
+ marginRight,
30
35
  gradient,
31
36
  ...props
32
37
  }) => {
33
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
+ }
34
43
  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}
35
44
  return (
36
- <Card style={{ ...gradientStyle, alignContent, alignItems, alignSelf, display, flexDirection, flexGrow, justifyContent, justifyItems, justifySelf, ...style }} {...props} />
45
+ <Card
46
+ style={{
47
+ ...gradientStyle,
48
+ alignContent,
49
+ alignItems,
50
+ alignSelf,
51
+ columnGap: applySpacing(columnGap),
52
+ display,
53
+ flexDirection,
54
+ flexGrow,
55
+ gap: applySpacing(gap),
56
+ justifyContent,
57
+ justifyItems,
58
+ justifySelf,
59
+ margin: applySpacing(margin),
60
+ marginBottom: applySpacing(marginBottom ?? margin),
61
+ marginLeft: applySpacing(marginLeft ?? margin),
62
+ marginRight: applySpacing(marginRight ?? margin),
63
+ marginTop: applySpacing(marginTop ?? margin),
64
+ padding: applySpacing(padding),
65
+ paddingBottom: applySpacing(paddingBottom ?? padding),
66
+ paddingLeft: applySpacing(paddingLeft ?? padding),
67
+ paddingRight: applySpacing(paddingRight ?? padding),
68
+ paddingTop: applySpacing(paddingTop ?? padding),
69
+ rowGap: applySpacing(rowGap),
70
+ ...style,
71
+ }}
72
+ {...props}
73
+ />
37
74
  )
38
75
  }