mcr-design-systems 1.0.35 → 1.0.36
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.
|
@@ -24,7 +24,6 @@ const t = a({
|
|
|
24
24
|
}), s = a({
|
|
25
25
|
base: [
|
|
26
26
|
"self-stretch",
|
|
27
|
-
"min-h-16",
|
|
28
27
|
"px-sm",
|
|
29
28
|
"py-sm-2",
|
|
30
29
|
"border-b",
|
|
@@ -72,7 +71,6 @@ const t = a({
|
|
|
72
71
|
}), d = a({
|
|
73
72
|
base: [
|
|
74
73
|
"flex-1",
|
|
75
|
-
"min-h-10",
|
|
76
74
|
"flex",
|
|
77
75
|
"flex-col",
|
|
78
76
|
"justify-center",
|
|
@@ -46,6 +46,10 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Variant
|
|
|
46
46
|
* Custom width for the card
|
|
47
47
|
*/
|
|
48
48
|
width?: string | number;
|
|
49
|
+
/**
|
|
50
|
+
* Maximum height for the header
|
|
51
|
+
*/
|
|
52
|
+
maxHeaderHeight?: string | number;
|
|
49
53
|
}
|
|
50
54
|
/**
|
|
51
55
|
* Card component with header and content areas
|
|
@@ -70,4 +74,4 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Variant
|
|
|
70
74
|
* </Card>
|
|
71
75
|
* ```
|
|
72
76
|
*/
|
|
73
|
-
export default function Card({ variant, title, titleIcon, actionButton, actionIcon, children, className, showHeader, headerGap, contentPadding, contentGap, width, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
77
|
+
export default function Card({ variant, title, titleIcon, actionButton, actionIcon, children, className, showHeader, headerGap, contentPadding, contentGap, width, maxHeaderHeight, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,60 +1,68 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import {
|
|
4
|
-
import { cn as
|
|
5
|
-
import { dataTestId as
|
|
6
|
-
import { Typography as
|
|
7
|
-
function
|
|
8
|
-
variant:
|
|
9
|
-
title:
|
|
3
|
+
import { cardHeaderTitleVariants as N, cardHeaderActionVariants as g, cardHeaderVariants as V, cardContentVariants as b, cardVariants as k } from "./helper/variants.js";
|
|
4
|
+
import { cn as n } from "../../shared/utils/cn.js";
|
|
5
|
+
import { dataTestId as j } from "../../shared/utils/dataTestId.js";
|
|
6
|
+
import { Typography as C } from "../Typography/index.js";
|
|
7
|
+
function A({
|
|
8
|
+
variant: p = "default",
|
|
9
|
+
title: a,
|
|
10
10
|
titleIcon: e,
|
|
11
11
|
actionButton: i,
|
|
12
12
|
actionIcon: s,
|
|
13
|
-
children:
|
|
14
|
-
className:
|
|
15
|
-
showHeader:
|
|
16
|
-
headerGap:
|
|
17
|
-
contentPadding:
|
|
18
|
-
contentGap:
|
|
13
|
+
children: t,
|
|
14
|
+
className: c,
|
|
15
|
+
showHeader: f = !0,
|
|
16
|
+
headerGap: x = "xs",
|
|
17
|
+
contentPadding: o = "md",
|
|
18
|
+
contentGap: u = "md",
|
|
19
19
|
width: d,
|
|
20
|
-
|
|
20
|
+
maxHeaderHeight: m,
|
|
21
|
+
...v
|
|
21
22
|
}) {
|
|
22
|
-
const
|
|
23
|
-
return /* @__PURE__ */
|
|
23
|
+
const y = d ? { width: typeof d == "number" ? `${d}px` : d } : {}, h = m ? { maxHeight: typeof m == "number" ? `${m}px` : m } : {};
|
|
24
|
+
return /* @__PURE__ */ l(
|
|
24
25
|
"div",
|
|
25
26
|
{
|
|
26
|
-
className:
|
|
27
|
-
style:
|
|
28
|
-
...
|
|
29
|
-
...
|
|
27
|
+
className: n(k({ variant: p }), c),
|
|
28
|
+
style: y,
|
|
29
|
+
...j("Card"),
|
|
30
|
+
...v,
|
|
30
31
|
children: [
|
|
31
|
-
|
|
32
|
-
(r || e) && /* @__PURE__ */ a("div", { className: v(), children: /* @__PURE__ */ m("div", { className: "flex items-center gap-xs", children: [
|
|
33
|
-
e && /* @__PURE__ */ a("div", { className: "flex-shrink-0 text-fg-neutral-main", children: e }),
|
|
34
|
-
r && /* @__PURE__ */ a(
|
|
35
|
-
b,
|
|
36
|
-
{
|
|
37
|
-
variants: "heading-xs",
|
|
38
|
-
size: "xs",
|
|
39
|
-
className: "self-stretch justify-center text-fg-neutral-main",
|
|
40
|
-
children: r
|
|
41
|
-
}
|
|
42
|
-
)
|
|
43
|
-
] }) }),
|
|
44
|
-
(i || s) && /* @__PURE__ */ m("div", { className: u({ gap: "xs" }), children: [
|
|
45
|
-
i,
|
|
46
|
-
s && /* @__PURE__ */ a("div", { className: "flex-shrink-0 text-fg-neutral-main", children: s })
|
|
47
|
-
] })
|
|
48
|
-
] }),
|
|
49
|
-
l && /* @__PURE__ */ a(
|
|
32
|
+
f && (a || e || i || s) && /* @__PURE__ */ l(
|
|
50
33
|
"div",
|
|
51
34
|
{
|
|
52
|
-
className:
|
|
53
|
-
|
|
54
|
-
|
|
35
|
+
className: n(V({ gap: x })),
|
|
36
|
+
style: h,
|
|
37
|
+
children: [
|
|
38
|
+
(a || e) && /* @__PURE__ */ r("div", { className: N(), children: /* @__PURE__ */ l("div", { className: "flex items-center gap-xs", children: [
|
|
39
|
+
e && /* @__PURE__ */ r("div", { className: "flex-shrink-0 text-fg-neutral-main", children: e }),
|
|
40
|
+
a && /* @__PURE__ */ r(
|
|
41
|
+
C,
|
|
42
|
+
{
|
|
43
|
+
variants: "heading-xs",
|
|
44
|
+
size: "xs",
|
|
45
|
+
className: "self-stretch justify-center text-fg-neutral-main",
|
|
46
|
+
children: a
|
|
47
|
+
}
|
|
48
|
+
)
|
|
49
|
+
] }) }),
|
|
50
|
+
(i || s) && /* @__PURE__ */ l("div", { className: g({ gap: "xs" }), children: [
|
|
51
|
+
i,
|
|
52
|
+
s && /* @__PURE__ */ r("div", { className: "flex-shrink-0 text-fg-neutral-main", children: s })
|
|
53
|
+
] })
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
),
|
|
57
|
+
t && /* @__PURE__ */ r(
|
|
58
|
+
"div",
|
|
59
|
+
{
|
|
60
|
+
className: b({
|
|
61
|
+
padding: o,
|
|
62
|
+
gap: u
|
|
55
63
|
}),
|
|
56
64
|
style: { wordWrap: "break-word", overflowWrap: "break-word" },
|
|
57
|
-
children:
|
|
65
|
+
children: t
|
|
58
66
|
}
|
|
59
67
|
)
|
|
60
68
|
]
|
|
@@ -62,5 +70,5 @@ function z({
|
|
|
62
70
|
);
|
|
63
71
|
}
|
|
64
72
|
export {
|
|
65
|
-
|
|
73
|
+
A as default
|
|
66
74
|
};
|