@xyo-network/react-shared 2.25.74 → 2.25.75

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

@@ -1,6 +1,15 @@
-/// <reference types="react" />
 import { CardProps } from '@mui/material';
+import { CSSProperties } from 'react';
 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 declare const CardEx: React.FC<CardExProps>;

package/dist/esm/components/CardEx.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '@mui/material';
 import { useGradientStyles } from '../hooks';
-export const CardEx = ({ style, gradient, ...props }) => {
+export const CardEx = ({ display, flexDirection = 'column', flexGrow, alignItems = 'stretch', alignContent, alignSelf, justifyItems = 'flex-start', justifyContent = 'flex-start', justifySelf, style, gradient, ...props }) => {
     const { styles } = useGradientStyles();
     const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {};
-    return _jsx(Card, { style: { ...gradientStyle, ...style }, ...props });
+    return (_jsx(Card, { style: { ...gradientStyle, alignContent, alignItems, alignSelf, display, flexDirection, flexGrow, justifyContent, justifyItems, justifySelf, ...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;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAM5C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7E,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,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAA;AACnE,CAAC,CAAA"}
+{"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"}

package/dist/esm/components/PageCard.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from '@mui/icons-material/Refresh';
-import { Card, CardHeader, IconButton } from '@mui/material';
+import { CardHeader, IconButton } from '@mui/material';
+import { CardEx } from './CardEx';
 import { TypographyEx } from './TypographyEx';
 export const PageCard = ({ subheader, title, icon, onRefresh, children, style, ...props }) => {
-    return (_jsxs(Card, { style: { position: 'relative', ...style }, ...props, children: [icon?.({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } }), _jsx(CardHeader, { title: _jsx(TypographyEx, { variant: "h4", gradient: "text", children: title }), subheader: subheader, action: _jsx(_Fragment, { children: onRefresh ? (_jsx(IconButton, { onClick: () => onRefresh?.(), children: _jsx(RefreshIcon, {}) })) : null }) }), children] }));
+    return (_jsxs(CardEx, { style: { position: 'relative', ...style }, ...props, children: [icon?.({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } }), _jsx(CardHeader, { title: _jsx(TypographyEx, { variant: "h4", gradient: "text", children: title }), subheader: subheader, action: _jsx(_Fragment, { children: onRefresh ? (_jsx(IconButton, { onClick: () => onRefresh?.(), children: _jsx(RefreshIcon, {}) })) : null }) }), children] }));
 };
 //# sourceMappingURL=PageCard.js.map

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,IAAI,EAAE,UAAU,EAA8B,UAAU,EAAgB,MAAM,eAAe,CAAA;AAGtG,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,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aACvD,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,IACJ,CACR,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,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"}

package/package.json

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

package/src/components/CardEx.tsx

@@ -1,13 +1,38 @@
 import { Card, CardProps } 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 const CardEx: React.FC<CardExProps> = ({ style, gradient, ...props }) => {
+export const CardEx: React.FC<CardExProps> = ({
+  display,
+  flexDirection = 'column',
+  flexGrow,
+  alignItems = 'stretch',
+  alignContent,
+  alignSelf,
+  justifyItems = 'flex-start',
+  justifyContent = 'flex-start',
+  justifySelf,
+  style,
+  gradient,
+  ...props
+}) => {
   const { styles } = useGradientStyles()
   const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}
-  return <Card style={{ ...gradientStyle, ...style }} {...props} />
+  return (
+    <Card style={{ ...gradientStyle, alignContent, alignItems, alignSelf, display, flexDirection, flexGrow, justifyContent, justifyItems, justifySelf, ...style }} {...props} />
+  )
 }

package/src/components/PageCard.tsx

@@ -1,7 +1,8 @@
 import RefreshIcon from '@mui/icons-material/Refresh'
-import { Card, CardHeader, CardHeaderProps, CardProps, IconButton, SvgIconProps } from '@mui/material'
+import { CardHeader, CardHeaderProps, CardProps, IconButton, SvgIconProps } from '@mui/material'
 import { ReactNode } from 'react'
 
+import { CardEx } from './CardEx'
 import { TypographyEx } from './TypographyEx'
 
 export interface PageCardProps extends CardProps {
@@ -12,7 +13,7 @@ export interface PageCardProps extends CardProps {
 
 export const PageCard: React.FC<PageCardProps> = ({ subheader, title, icon, onRefresh, children, style, ...props }) => {
   return (
-    <Card style={{ position: 'relative', ...style }} {...props}>
+    <CardEx style={{ position: 'relative', ...style }} {...props}>
       {icon?.({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } })}
       <CardHeader
         title={
@@ -32,6 +33,6 @@ export const PageCard: React.FC<PageCardProps> = ({ subheader, title, icon, onRe
         }
       />
       {children}
-    </Card>
+    </CardEx>
   )
 }