@xyo-network/react-shared 2.25.76 → 2.26.0

package/dist/esm/components/CardEx.d.ts

@@ -1,15 +1,6 @@
 import { CardProps } from '@mui/material';
 import { CSSProperties } from 'react';
-export interface CardExProps extends CardProps {
+export declare type CardExProps = CardProps & CSSProperties & {
     gradient?: 'border' | 'background';
-    display?: CSSProperties['display'];
-    flexDirection?: CSSProperties['flexDirection'];
-    flexGrow?: CSSProperties['flexGrow'];
-    alignItems?: CSSProperties['alignItems'];
-    alignContent?: CSSProperties['alignContent'];
-    alignSelf?: CSSProperties['alignSelf'];
-    justifyItems?: CSSProperties['justifyItems'];
-    justifyContent?: CSSProperties['justifyContent'];
-    justifySelf?: CSSProperties['justifySelf'];
-}
+};
 export declare const CardEx: React.FC<CardExProps>;

package/dist/esm/components/CardEx.js

@@ -1,9 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Card } from '@mui/material';
+import { Card, useTheme } from '@mui/material';
 import { useGradientStyles } from '../hooks';
-export const CardEx = ({ display, flexDirection = 'column', flexGrow, alignItems = 'stretch', alignContent, alignSelf, justifyItems = 'flex-start', justifyContent = 'flex-start', justifySelf, style, gradient, ...props }) => {
+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 }) => {
     const { styles } = useGradientStyles();
+    const theme = useTheme();
+    const applySpacing = (value) => {
+        return value === undefined ? value : typeof value === 'string' ? value : theme.spacing(value);
+    };
     const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {};
-    return (_jsx(Card, { style: { ...gradientStyle, alignContent, alignItems, alignSelf, display, flexDirection, flexGrow, justifyContent, justifyItems, justifySelf, ...style }, ...props }));
+    return (_jsx(Card, { style: {
+            ...gradientStyle,
+            alignContent,
+            alignItems,
+            alignSelf,
+            columnGap: applySpacing(columnGap),
+            display,
+            flexDirection,
+            flexGrow,
+            gap: applySpacing(gap),
+            justifyContent,
+            justifyItems,
+            justifySelf,
+            margin: applySpacing(margin),
+            marginBottom: applySpacing(marginBottom),
+            marginLeft: applySpacing(marginLeft),
+            marginRight: applySpacing(marginRight),
+            marginTop: applySpacing(marginTop),
+            padding: applySpacing(padding),
+            paddingBottom: applySpacing(paddingBottom),
+            paddingLeft: applySpacing(paddingLeft),
+            paddingRight: applySpacing(paddingRight),
+            paddingTop: applySpacing(paddingTop),
+            rowGap: applySpacing(rowGap),
+            ...style,
+        }, ...props }));
 };
 //# sourceMappingURL=CardEx.js.map

package/dist/esm/components/CardEx.js.map

@@ -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"}
+{"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/dist/esm/components/PageCard.d.ts

@@ -1,6 +1,7 @@
-import { CardHeaderProps, CardProps, SvgIconProps } from '@mui/material';
+import { CardHeaderProps, SvgIconProps } from '@mui/material';
 import { ReactNode } from 'react';
-export interface PageCardProps extends CardProps {
+import { CardExProps } from './CardEx';
+export interface PageCardProps extends CardExProps {
     icon?: (props?: SvgIconProps) => ReactNode;
     onRefresh?: () => void;
     subheader?: CardHeaderProps['subheader'];

package/dist/esm/components/PageCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageCard.js","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,UAAU,EAA8B,UAAU,EAAgB,MAAM,eAAe,CAAA;AAGhG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQ7C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpH,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aACzD,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,EACzG,KAAC,UAAU,IACT,KAAK,EACH,KAAC,YAAY,IAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,YACvC,KAAK,GACO,EAEjB,SAAS,EAAE,SAAS,EACpB,MAAM,EACJ,4BACG,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,YACtC,KAAC,WAAW,KAAG,GACJ,CACd,CAAC,CAAC,CAAC,IAAI,GACP,GAEL,EACD,QAAQ,IACF,CACV,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"PageCard.js","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAmB,UAAU,EAAgB,MAAM,eAAe,CAAA;AAGrF,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQ7C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpH,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aACzD,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,EACzG,KAAC,UAAU,IACT,KAAK,EACH,KAAC,YAAY,IAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,YACvC,KAAK,GACO,EAEjB,SAAS,EAAE,SAAS,EACpB,MAAM,EACJ,4BACG,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,YACtC,KAAC,WAAW,KAAG,GACJ,CACd,CAAC,CAAC,CAAC,IAAI,GACP,GAEL,EACD,QAAQ,IACF,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Ampersand';
 export * from './BasicHero';
+export * from './CardEx';
 export * from './ErrorBoundry';
 export * from './FullWidthCard';
 export * from './JsonRouteWrapper';

package/dist/esm/components/index.js

@@ -1,5 +1,6 @@
 export * from './Ampersand';
 export * from './BasicHero';
+export * from './CardEx';
 export * from './ErrorBoundry';
 export * from './FullWidthCard';
 export * from './JsonRouteWrapper';

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA"}

package/package.json

@@ -88,6 +88,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.76",
+  "version": "2.26.0",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/CardEx.tsx

@@ -1,23 +1,15 @@
-import { Card, CardProps } from '@mui/material'
+import { Card, CardProps, useTheme } from '@mui/material'
 import { CSSProperties } from 'react'
 
 import { useGradientStyles } from '../hooks'
 
-export interface CardExProps extends CardProps {
-  gradient?: 'border' | 'background'
-  display?: CSSProperties['display']
-  flexDirection?: CSSProperties['flexDirection']
-  flexGrow?: CSSProperties['flexGrow']
-  alignItems?: CSSProperties['alignItems']
-  alignContent?: CSSProperties['alignContent']
-  alignSelf?: CSSProperties['alignSelf']
-  justifyItems?: CSSProperties['justifyItems']
-  justifyContent?: CSSProperties['justifyContent']
-  justifySelf?: CSSProperties['justifySelf']
-}
+export type CardExProps = CardProps &
+  CSSProperties & {
+    gradient?: 'border' | 'background'
+  }
 
 export const CardEx: React.FC<CardExProps> = ({
-  display,
+  display = 'flex',
   flexDirection = 'column',
   flexGrow,
   alignItems = 'stretch',
@@ -27,12 +19,57 @@ export const CardEx: React.FC<CardExProps> = ({
   justifyContent = 'flex-start',
   justifySelf,
   style,
+  gap,
+  rowGap,
+  columnGap,
+  padding,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
   gradient,
   ...props
 }) => {
   const { styles } = useGradientStyles()
+  const theme = useTheme()
+  const applySpacing = (value?: number | string) => {
+    return value === undefined ? value : typeof value === 'string' ? value : theme.spacing(value)
+  }
   const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}
   return (
-    <Card style={{ ...gradientStyle, alignContent, alignItems, alignSelf, display, flexDirection, flexGrow, justifyContent, justifyItems, justifySelf, ...style }} {...props} />
+    <Card
+      style={{
+        ...gradientStyle,
+        alignContent,
+        alignItems,
+        alignSelf,
+        columnGap: applySpacing(columnGap),
+        display,
+        flexDirection,
+        flexGrow,
+        gap: applySpacing(gap),
+        justifyContent,
+        justifyItems,
+        justifySelf,
+        margin: applySpacing(margin),
+        marginBottom: applySpacing(marginBottom),
+        marginLeft: applySpacing(marginLeft),
+        marginRight: applySpacing(marginRight),
+        marginTop: applySpacing(marginTop),
+        padding: applySpacing(padding),
+        paddingBottom: applySpacing(paddingBottom),
+        paddingLeft: applySpacing(paddingLeft),
+        paddingRight: applySpacing(paddingRight),
+        paddingTop: applySpacing(paddingTop),
+        rowGap: applySpacing(rowGap),
+        ...style,
+      }}
+      {...props}
+    />
   )
 }

package/src/components/PageCard.tsx

@@ -1,11 +1,11 @@
 import RefreshIcon from '@mui/icons-material/Refresh'
-import { CardHeader, CardHeaderProps, CardProps, IconButton, SvgIconProps } from '@mui/material'
+import { CardHeader, CardHeaderProps, IconButton, SvgIconProps } from '@mui/material'
 import { ReactNode } from 'react'
 
-import { CardEx } from './CardEx'
+import { CardEx, CardExProps } from './CardEx'
 import { TypographyEx } from './TypographyEx'
 
-export interface PageCardProps extends CardProps {
+export interface PageCardProps extends CardExProps {
   icon?: (props?: SvgIconProps) => ReactNode
   onRefresh?: () => void
   subheader?: CardHeaderProps['subheader']

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Ampersand'
 export * from './BasicHero'
+export * from './CardEx'
 export * from './ErrorBoundry'
 export * from './FullWidthCard'
 export * from './JsonRouteWrapper'