@zidsa/zidmui 3.0.2 → 3.0.4
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/react/cjs/components/app-card.js +6 -4
- package/dist/react/cjs/components/app-card.js.map +1 -1
- package/dist/react/cjs/theme/components/card.js +16 -15
- package/dist/react/cjs/theme/components/card.js.map +1 -1
- package/dist/react/es/components/app-card.js +7 -5
- package/dist/react/es/components/app-card.js.map +1 -1
- package/dist/react/es/theme/components/card.js +16 -15
- package/dist/react/es/theme/components/card.js.map +1 -1
- package/dist/react/types/components/app-card.d.ts +3 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -11,17 +11,19 @@ const AppCard = ({
|
|
|
11
11
|
title,
|
|
12
12
|
description,
|
|
13
13
|
descriptionProps,
|
|
14
|
+
titleContainerProps,
|
|
14
15
|
titleProps,
|
|
15
16
|
titleSuffix,
|
|
16
17
|
titlePrefix,
|
|
17
18
|
children,
|
|
18
19
|
actions,
|
|
20
|
+
actionsProps,
|
|
19
21
|
loading,
|
|
20
22
|
...props
|
|
21
23
|
}) => {
|
|
22
24
|
const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);
|
|
23
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
24
|
-
/* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { alignItems: "center", gap: 1, p: 1.5, pb: 0, width: "100%", children: [
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { color, ...props, children: [
|
|
26
|
+
/* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { alignItems: "center", gap: 1, p: 1.5, pb: 0, width: "100%", ...titleContainerProps, children: [
|
|
25
27
|
titlePrefix,
|
|
26
28
|
/* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 0.25, width: "100%", children: [
|
|
27
29
|
typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(appTypography.AppTypography, { variant: "subtitle1", color: "text.primary", gap: 1, ...titleProps, children: [
|
|
@@ -43,9 +45,9 @@ const AppCard = ({
|
|
|
43
45
|
] }),
|
|
44
46
|
/* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 2, children: [
|
|
45
47
|
children,
|
|
46
|
-
hasActions && !loading && /* @__PURE__ */ jsxRuntime.jsx(stackRow.StackRow, { justifyContent: "end", children: actions })
|
|
48
|
+
hasActions && !loading && /* @__PURE__ */ jsxRuntime.jsx(stackRow.StackRow, { justifyContent: "end", ...actionsProps, children: actions })
|
|
47
49
|
] }) })
|
|
48
|
-
] })
|
|
50
|
+
] });
|
|
49
51
|
};
|
|
50
52
|
exports.AppCard = AppCard;
|
|
51
53
|
//# sourceMappingURL=app-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-card.js","sources":["../../../../src/components/app-card.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\n\nimport { type Theme, SxProps, Card, CardContent } from '@mui/material';\nimport { StackRow } from './stack-row';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppCardCorners = 'grouped' | 'all';\n\nexport type AppCard = {\n children?: React.ReactNode;\n color?: AppCardColor;\n roundedCorners?: AppCardCorners;\n title?: string | React.ReactNode;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n sx?: SxProps<Theme>;\n loading?: boolean;\n actions?: React.ReactElement | null | (React.ReactElement | null)[];\n};\n\nexport const AppCard: React.FC<AppCard> = ({\n color,\n title,\n description,\n descriptionProps,\n titleProps,\n titleSuffix,\n titlePrefix,\n children,\n actions,\n loading,\n ...props\n}) => {\n const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);\n\n return (\n <Card color={color} {...props}>\n <
|
|
1
|
+
{"version":3,"file":"app-card.js","sources":["../../../../src/components/app-card.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\n\nimport { type Theme, SxProps, Card, CardContent } from '@mui/material';\nimport { StackRow, StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppCardCorners = 'grouped' | 'all';\n\nexport type AppCard = {\n children?: React.ReactNode;\n color?: AppCardColor;\n roundedCorners?: AppCardCorners;\n title?: string | React.ReactNode;\n titleContainerProps?: StackRowProps;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n sx?: SxProps<Theme>;\n loading?: boolean;\n actions?: React.ReactElement | null | (React.ReactElement | null)[];\n actionsProps?: StackRowProps;\n};\n\nexport const AppCard: React.FC<AppCard> = ({\n color,\n title,\n description,\n descriptionProps,\n titleContainerProps,\n titleProps,\n titleSuffix,\n titlePrefix,\n children,\n actions,\n actionsProps,\n loading,\n ...props\n}) => {\n const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);\n\n return (\n <Card color={color} {...props}>\n <StackRow alignItems=\"center\" gap={1} p={1.5} pb={0} width=\"100%\" {...titleContainerProps}>\n {titlePrefix}\n\n <StackColumn gap={0.25} width=\"100%\">\n {typeof title === 'string' ? (\n <AppTypography variant=\"subtitle1\" color=\"text.primary\" gap={1} {...titleProps}>\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color=\"text.primary\"\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n </StackRow>\n\n <CardContent>\n <StackColumn gap={2}>\n {children}\n\n {hasActions && !loading && (\n <StackRow justifyContent=\"end\" {...actionsProps}>\n {actions}\n </StackRow>\n )}\n </StackColumn>\n </CardContent>\n </Card>\n );\n};\n"],"names":["jsxs","Card","StackRow","StackColumn","AppTypography","jsx","CardContent"],"mappings":";;;;;;;;AAgCO,MAAM,UAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,QAAQ,WAAW,MAAM,SAAS,QAAQ,OAAO,GAAG,SAAS,CAAC;AAEjF,SACEA,2BAAAA,KAACC,SAAAA,MAAA,EAAK,OAAe,GAAG,OACtB,UAAA;AAAA,IAAAD,2BAAAA,KAACE,SAAAA,UAAA,EAAS,YAAW,UAAS,KAAK,GAAG,GAAG,KAAK,IAAI,GAAG,OAAM,QAAQ,GAAG,qBACnE,UAAA;AAAA,MAAA;AAAA,MAEDF,2BAAAA,KAACG,YAAAA,aAAA,EAAY,KAAK,MAAM,OAAM,QAC3B,UAAA;AAAA,QAAA,OAAO,UAAU,WAChBH,2BAAAA,KAACI,cAAAA,eAAA,EAAc,SAAQ,aAAY,OAAM,gBAAe,KAAK,GAAI,GAAG,YACjE,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAE,cAAc,cAAc;AAAA,QAAA,EAAA,CACvC,IAEA;AAAA,QAGD,eACCC,2BAAAA;AAAAA,UAACD,cAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,YAAW;AAAA,YACV,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IAEAC,+BAACC,SAAAA,aAAA,EACC,UAAAN,2BAAAA,KAACG,YAAAA,aAAA,EAAY,KAAK,GACf,UAAA;AAAA,MAAA;AAAA,MAEA,cAAc,CAAC,WACdE,2BAAAA,IAACH,qBAAS,gBAAe,OAAO,GAAG,cAChC,UAAA,QAAA,CACH;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;;"}
|
|
@@ -3,38 +3,39 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const coloredCardContentStyle = (theme) => ({
|
|
4
4
|
"& .MuiCardContent-root": {
|
|
5
5
|
padding: 16,
|
|
6
|
-
|
|
7
|
-
border: `1px solid ${theme.palette.divider}
|
|
6
|
+
backgroundColor: theme.palette.background.paper,
|
|
7
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
8
|
+
"&:last-child": {
|
|
9
|
+
paddingBottom: 16
|
|
10
|
+
}
|
|
8
11
|
}
|
|
9
12
|
});
|
|
10
13
|
const MuiCard = {
|
|
11
14
|
styleOverrides: {
|
|
12
15
|
root: ({ theme }) => ({
|
|
16
|
+
display: "flex",
|
|
17
|
+
flexDirection: "column",
|
|
18
|
+
gap: theme.spacing(1.25),
|
|
13
19
|
borderRadius: theme.shape.standardBorderRadius,
|
|
14
20
|
border: `1px solid ${theme.palette.divider}`,
|
|
15
21
|
backgroundColor: theme.palette.background.paper,
|
|
16
22
|
overflow: "hidden",
|
|
17
|
-
"& .MuiCardContent-root:last-child": {
|
|
18
|
-
paddingBottom: 16,
|
|
19
|
-
borderRadius: theme.shape.standardBorderRadius
|
|
20
|
-
},
|
|
21
23
|
"& .MuiCardContent-root": {
|
|
22
|
-
padding:
|
|
24
|
+
padding: 8,
|
|
23
25
|
borderRadius: theme.spacing(2),
|
|
24
|
-
margin: `0 ${theme.spacing(0.
|
|
26
|
+
margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)}`,
|
|
27
|
+
"&:last-child": {
|
|
28
|
+
paddingBottom: 8,
|
|
29
|
+
borderRadius: theme.spacing(1.25)
|
|
30
|
+
}
|
|
25
31
|
},
|
|
32
|
+
// TODO: check
|
|
26
33
|
"& .MuiCardContent-root .MuiCardContent-root .MuiCardContent-root": {
|
|
27
34
|
border: "none",
|
|
28
35
|
borderRadius: 4,
|
|
29
36
|
backgroundColor: theme.palette.background.gray
|
|
30
37
|
},
|
|
31
|
-
|
|
32
|
-
marginBottom: 0
|
|
33
|
-
},
|
|
34
|
-
"& .MuiList-root:last-child .MuiListItem-root:last-of-type": {
|
|
35
|
-
borderBottom: "none",
|
|
36
|
-
paddingBottom: 0
|
|
37
|
-
}
|
|
38
|
+
boxShadow: "none"
|
|
38
39
|
})
|
|
39
40
|
},
|
|
40
41
|
variants: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sources":["../../../../../src/theme/components/card.ts"],"sourcesContent":["import type {} from '@mui/lab/themeAugmentation';\nimport { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nconst coloredCardContentStyle = (theme: Theme) => ({\n '& .MuiCardContent-root': {\n padding: 16,\n
|
|
1
|
+
{"version":3,"file":"card.js","sources":["../../../../../src/theme/components/card.ts"],"sourcesContent":["import type {} from '@mui/lab/themeAugmentation';\nimport { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nconst coloredCardContentStyle = (theme: Theme) => ({\n '& .MuiCardContent-root': {\n padding: 16,\n backgroundColor: theme.palette.background.paper,\n border: `1px solid ${theme.palette.divider}`,\n '&:last-child': {\n paddingBottom: 16,\n },\n },\n});\n\nexport const MuiCard: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>['MuiCard'] =\n {\n styleOverrides: {\n root: ({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1.25),\n borderRadius: theme.shape.standardBorderRadius,\n border: `1px solid ${theme.palette.divider}`,\n backgroundColor: theme.palette.background.paper,\n overflow: 'hidden',\n\n '& .MuiCardContent-root': {\n padding: 8,\n borderRadius: theme.spacing(2),\n margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)}`,\n '&:last-child': {\n paddingBottom: 8,\n borderRadius: theme.spacing(1.25),\n },\n },\n\n // TODO: check\n '& .MuiCardContent-root .MuiCardContent-root .MuiCardContent-root': {\n border: 'none',\n borderRadius: 4,\n backgroundColor: theme.palette.background.gray,\n },\n boxShadow: 'none',\n }),\n },\n variants: [\n {\n props: { color: 'primary' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.primary.border,\n backgroundColor: theme.palette._components.card.primary.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'success' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.success.border,\n backgroundColor: theme.palette._components.card.success.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'error' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.error.border,\n backgroundColor: theme.palette._components.card.error.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'warning' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.warning.border,\n backgroundColor: theme.palette._components.card.warning.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'info' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.info.border,\n backgroundColor: theme.palette._components.card.info.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'neutral' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.neutral.border,\n backgroundColor: theme.palette._components.card.neutral.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n ],\n };\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { AppTypography } from "./app-typography.js";
|
|
4
4
|
import { Card, CardContent } from "@mui/material";
|
|
@@ -9,17 +9,19 @@ const AppCard = ({
|
|
|
9
9
|
title,
|
|
10
10
|
description,
|
|
11
11
|
descriptionProps,
|
|
12
|
+
titleContainerProps,
|
|
12
13
|
titleProps,
|
|
13
14
|
titleSuffix,
|
|
14
15
|
titlePrefix,
|
|
15
16
|
children,
|
|
16
17
|
actions,
|
|
18
|
+
actionsProps,
|
|
17
19
|
loading,
|
|
18
20
|
...props
|
|
19
21
|
}) => {
|
|
20
22
|
const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);
|
|
21
|
-
return /* @__PURE__ */
|
|
22
|
-
/* @__PURE__ */ jsxs(StackRow, { alignItems: "center", gap: 1, p: 1.5, pb: 0, width: "100%", children: [
|
|
23
|
+
return /* @__PURE__ */ jsxs(Card, { color, ...props, children: [
|
|
24
|
+
/* @__PURE__ */ jsxs(StackRow, { alignItems: "center", gap: 1, p: 1.5, pb: 0, width: "100%", ...titleContainerProps, children: [
|
|
23
25
|
titlePrefix,
|
|
24
26
|
/* @__PURE__ */ jsxs(StackColumn, { gap: 0.25, width: "100%", children: [
|
|
25
27
|
typeof title === "string" ? /* @__PURE__ */ jsxs(AppTypography, { variant: "subtitle1", color: "text.primary", gap: 1, ...titleProps, children: [
|
|
@@ -41,9 +43,9 @@ const AppCard = ({
|
|
|
41
43
|
] }),
|
|
42
44
|
/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
|
|
43
45
|
children,
|
|
44
|
-
hasActions && !loading && /* @__PURE__ */ jsx(StackRow, { justifyContent: "end", children: actions })
|
|
46
|
+
hasActions && !loading && /* @__PURE__ */ jsx(StackRow, { justifyContent: "end", ...actionsProps, children: actions })
|
|
45
47
|
] }) })
|
|
46
|
-
] })
|
|
48
|
+
] });
|
|
47
49
|
};
|
|
48
50
|
export {
|
|
49
51
|
AppCard
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-card.js","sources":["../../../../src/components/app-card.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\n\nimport { type Theme, SxProps, Card, CardContent } from '@mui/material';\nimport { StackRow } from './stack-row';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppCardCorners = 'grouped' | 'all';\n\nexport type AppCard = {\n children?: React.ReactNode;\n color?: AppCardColor;\n roundedCorners?: AppCardCorners;\n title?: string | React.ReactNode;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n sx?: SxProps<Theme>;\n loading?: boolean;\n actions?: React.ReactElement | null | (React.ReactElement | null)[];\n};\n\nexport const AppCard: React.FC<AppCard> = ({\n color,\n title,\n description,\n descriptionProps,\n titleProps,\n titleSuffix,\n titlePrefix,\n children,\n actions,\n loading,\n ...props\n}) => {\n const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);\n\n return (\n <Card color={color} {...props}>\n <
|
|
1
|
+
{"version":3,"file":"app-card.js","sources":["../../../../src/components/app-card.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AppTypography, type AppTypographyProps } from './app-typography';\n\nimport { type Theme, SxProps, Card, CardContent } from '@mui/material';\nimport { StackRow, StackRowProps } from './stack-row';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\nexport type AppCardCorners = 'grouped' | 'all';\n\nexport type AppCard = {\n children?: React.ReactNode;\n color?: AppCardColor;\n roundedCorners?: AppCardCorners;\n title?: string | React.ReactNode;\n titleContainerProps?: StackRowProps;\n titleProps?: AppTypographyProps;\n titlePrefix?: React.ReactNode;\n titleSuffix?: React.ReactNode;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n sx?: SxProps<Theme>;\n loading?: boolean;\n actions?: React.ReactElement | null | (React.ReactElement | null)[];\n actionsProps?: StackRowProps;\n};\n\nexport const AppCard: React.FC<AppCard> = ({\n color,\n title,\n description,\n descriptionProps,\n titleContainerProps,\n titleProps,\n titleSuffix,\n titlePrefix,\n children,\n actions,\n actionsProps,\n loading,\n ...props\n}) => {\n const hasActions = Boolean(actions && React.Children.toArray(actions)?.length > 0);\n\n return (\n <Card color={color} {...props}>\n <StackRow alignItems=\"center\" gap={1} p={1.5} pb={0} width=\"100%\" {...titleContainerProps}>\n {titlePrefix}\n\n <StackColumn gap={0.25} width=\"100%\">\n {typeof title === 'string' ? (\n <AppTypography variant=\"subtitle1\" color=\"text.primary\" gap={1} {...titleProps}>\n {title} {titleSuffix ? titleSuffix : null}\n </AppTypography>\n ) : (\n title\n )}\n\n {description && (\n <AppTypography\n variant=\"body2\"\n color=\"text.primary\"\n whiteSpace=\"pre-line\"\n {...descriptionProps}\n >\n {description}\n </AppTypography>\n )}\n </StackColumn>\n </StackRow>\n\n <CardContent>\n <StackColumn gap={2}>\n {children}\n\n {hasActions && !loading && (\n <StackRow justifyContent=\"end\" {...actionsProps}>\n {actions}\n </StackRow>\n )}\n </StackColumn>\n </CardContent>\n </Card>\n );\n};\n"],"names":[],"mappings":";;;;;;AAgCO,MAAM,UAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,QAAQ,WAAW,MAAM,SAAS,QAAQ,OAAO,GAAG,SAAS,CAAC;AAEjF,SACE,qBAAC,MAAA,EAAK,OAAe,GAAG,OACtB,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAS,YAAW,UAAS,KAAK,GAAG,GAAG,KAAK,IAAI,GAAG,OAAM,QAAQ,GAAG,qBACnE,UAAA;AAAA,MAAA;AAAA,MAED,qBAAC,aAAA,EAAY,KAAK,MAAM,OAAM,QAC3B,UAAA;AAAA,QAAA,OAAO,UAAU,WAChB,qBAAC,eAAA,EAAc,SAAQ,aAAY,OAAM,gBAAe,KAAK,GAAI,GAAG,YACjE,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAE,cAAc,cAAc;AAAA,QAAA,EAAA,CACvC,IAEA;AAAA,QAGD,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,YAAW;AAAA,YACV,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IAEA,oBAAC,aAAA,EACC,UAAA,qBAAC,aAAA,EAAY,KAAK,GACf,UAAA;AAAA,MAAA;AAAA,MAEA,cAAc,CAAC,WACd,oBAAC,YAAS,gBAAe,OAAO,GAAG,cAChC,UAAA,QAAA,CACH;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -1,38 +1,39 @@
|
|
|
1
1
|
const coloredCardContentStyle = (theme) => ({
|
|
2
2
|
"& .MuiCardContent-root": {
|
|
3
3
|
padding: 16,
|
|
4
|
-
|
|
5
|
-
border: `1px solid ${theme.palette.divider}
|
|
4
|
+
backgroundColor: theme.palette.background.paper,
|
|
5
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
6
|
+
"&:last-child": {
|
|
7
|
+
paddingBottom: 16
|
|
8
|
+
}
|
|
6
9
|
}
|
|
7
10
|
});
|
|
8
11
|
const MuiCard = {
|
|
9
12
|
styleOverrides: {
|
|
10
13
|
root: ({ theme }) => ({
|
|
14
|
+
display: "flex",
|
|
15
|
+
flexDirection: "column",
|
|
16
|
+
gap: theme.spacing(1.25),
|
|
11
17
|
borderRadius: theme.shape.standardBorderRadius,
|
|
12
18
|
border: `1px solid ${theme.palette.divider}`,
|
|
13
19
|
backgroundColor: theme.palette.background.paper,
|
|
14
20
|
overflow: "hidden",
|
|
15
|
-
"& .MuiCardContent-root:last-child": {
|
|
16
|
-
paddingBottom: 16,
|
|
17
|
-
borderRadius: theme.shape.standardBorderRadius
|
|
18
|
-
},
|
|
19
21
|
"& .MuiCardContent-root": {
|
|
20
|
-
padding:
|
|
22
|
+
padding: 8,
|
|
21
23
|
borderRadius: theme.spacing(2),
|
|
22
|
-
margin: `0 ${theme.spacing(0.
|
|
24
|
+
margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)}`,
|
|
25
|
+
"&:last-child": {
|
|
26
|
+
paddingBottom: 8,
|
|
27
|
+
borderRadius: theme.spacing(1.25)
|
|
28
|
+
}
|
|
23
29
|
},
|
|
30
|
+
// TODO: check
|
|
24
31
|
"& .MuiCardContent-root .MuiCardContent-root .MuiCardContent-root": {
|
|
25
32
|
border: "none",
|
|
26
33
|
borderRadius: 4,
|
|
27
34
|
backgroundColor: theme.palette.background.gray
|
|
28
35
|
},
|
|
29
|
-
|
|
30
|
-
marginBottom: 0
|
|
31
|
-
},
|
|
32
|
-
"& .MuiList-root:last-child .MuiListItem-root:last-of-type": {
|
|
33
|
-
borderBottom: "none",
|
|
34
|
-
paddingBottom: 0
|
|
35
|
-
}
|
|
36
|
+
boxShadow: "none"
|
|
36
37
|
})
|
|
37
38
|
},
|
|
38
39
|
variants: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sources":["../../../../../src/theme/components/card.ts"],"sourcesContent":["import type {} from '@mui/lab/themeAugmentation';\nimport { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nconst coloredCardContentStyle = (theme: Theme) => ({\n '& .MuiCardContent-root': {\n padding: 16,\n
|
|
1
|
+
{"version":3,"file":"card.js","sources":["../../../../../src/theme/components/card.ts"],"sourcesContent":["import type {} from '@mui/lab/themeAugmentation';\nimport { Components, CssVarsTheme, Theme } from '@mui/material';\n\n//\n//\n\nconst coloredCardContentStyle = (theme: Theme) => ({\n '& .MuiCardContent-root': {\n padding: 16,\n backgroundColor: theme.palette.background.paper,\n border: `1px solid ${theme.palette.divider}`,\n '&:last-child': {\n paddingBottom: 16,\n },\n },\n});\n\nexport const MuiCard: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>['MuiCard'] =\n {\n styleOverrides: {\n root: ({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1.25),\n borderRadius: theme.shape.standardBorderRadius,\n border: `1px solid ${theme.palette.divider}`,\n backgroundColor: theme.palette.background.paper,\n overflow: 'hidden',\n\n '& .MuiCardContent-root': {\n padding: 8,\n borderRadius: theme.spacing(2),\n margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)}`,\n '&:last-child': {\n paddingBottom: 8,\n borderRadius: theme.spacing(1.25),\n },\n },\n\n // TODO: check\n '& .MuiCardContent-root .MuiCardContent-root .MuiCardContent-root': {\n border: 'none',\n borderRadius: 4,\n backgroundColor: theme.palette.background.gray,\n },\n boxShadow: 'none',\n }),\n },\n variants: [\n {\n props: { color: 'primary' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.primary.border,\n backgroundColor: theme.palette._components.card.primary.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'success' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.success.border,\n backgroundColor: theme.palette._components.card.success.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'error' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.error.border,\n backgroundColor: theme.palette._components.card.error.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'warning' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.warning.border,\n backgroundColor: theme.palette._components.card.warning.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'info' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.info.border,\n backgroundColor: theme.palette._components.card.info.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n {\n props: { color: 'neutral' },\n style: ({ theme }) => ({\n borderColor: theme.palette._components.card.neutral.border,\n backgroundColor: theme.palette._components.card.neutral.background,\n ...coloredCardContentStyle(theme),\n }),\n },\n ],\n };\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { AppTypographyProps } from './app-typography';
|
|
3
3
|
import { Theme, SxProps } from '@mui/material';
|
|
4
|
+
import { StackRowProps } from './stack-row';
|
|
4
5
|
export type AppCardColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
|
5
6
|
export type AppCardCorners = 'grouped' | 'all';
|
|
6
7
|
export type AppCard = {
|
|
@@ -8,6 +9,7 @@ export type AppCard = {
|
|
|
8
9
|
color?: AppCardColor;
|
|
9
10
|
roundedCorners?: AppCardCorners;
|
|
10
11
|
title?: string | React.ReactNode;
|
|
12
|
+
titleContainerProps?: StackRowProps;
|
|
11
13
|
titleProps?: AppTypographyProps;
|
|
12
14
|
titlePrefix?: React.ReactNode;
|
|
13
15
|
titleSuffix?: React.ReactNode;
|
|
@@ -16,5 +18,6 @@ export type AppCard = {
|
|
|
16
18
|
sx?: SxProps<Theme>;
|
|
17
19
|
loading?: boolean;
|
|
18
20
|
actions?: React.ReactElement | null | (React.ReactElement | null)[];
|
|
21
|
+
actionsProps?: StackRowProps;
|
|
19
22
|
};
|
|
20
23
|
export declare const AppCard: React.FC<AppCard>;
|