@stackone/malachite 2.62.0 → 2.62.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.
- package/dist/components/Card.js +77 -68
- package/dist/components/Card.js.map +1 -1
- package/package.json +1 -1
package/dist/components/Card.js
CHANGED
|
@@ -1,109 +1,118 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { GLASS_SURFACE_STYLE as
|
|
4
|
-
const
|
|
1
|
+
import { jsxs as A, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as H, useState as P, useEffect as _ } from "react";
|
|
3
|
+
import { GLASS_SURFACE_STYLE as g } from "./glassSurface.js";
|
|
4
|
+
const D = /^\d*\.?\d+(px|rem|em)$/, G = (a) => {
|
|
5
|
+
const o = a.trim().split(/\s+/);
|
|
6
|
+
if (o.length > 4 || !o.every((p) => D.test(p)))
|
|
7
|
+
return;
|
|
8
|
+
const [r, n = r, , d = n] = o;
|
|
9
|
+
return parseFloat(d) > 0 && parseFloat(n) > 0 ? { paddingLeft: d, paddingRight: n } : void 0;
|
|
10
|
+
}, U = ({
|
|
5
11
|
title: a,
|
|
6
|
-
children:
|
|
7
|
-
padding:
|
|
8
|
-
size:
|
|
9
|
-
width:
|
|
10
|
-
minWidth:
|
|
11
|
-
dimmed:
|
|
12
|
-
direction:
|
|
12
|
+
children: o,
|
|
13
|
+
padding: r = "20px",
|
|
14
|
+
size: n = "default",
|
|
15
|
+
width: d,
|
|
16
|
+
minWidth: p,
|
|
17
|
+
dimmed: R = !1,
|
|
18
|
+
direction: f,
|
|
13
19
|
align: h,
|
|
14
|
-
fullHeight:
|
|
15
|
-
border:
|
|
16
|
-
alignSelf:
|
|
17
|
-
height:
|
|
18
|
-
footer:
|
|
19
|
-
glassFooter:
|
|
20
|
-
className:
|
|
21
|
-
style:
|
|
22
|
-
headerConfig:
|
|
20
|
+
fullHeight: x = !1,
|
|
21
|
+
border: m = "base",
|
|
22
|
+
alignSelf: S,
|
|
23
|
+
height: i,
|
|
24
|
+
footer: t,
|
|
25
|
+
glassFooter: e = !1,
|
|
26
|
+
className: N = "",
|
|
27
|
+
style: w = {},
|
|
28
|
+
headerConfig: s = {}
|
|
23
29
|
}) => {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
if (
|
|
27
|
-
const
|
|
28
|
-
for (const
|
|
29
|
-
|
|
30
|
+
const l = H(null), [u, v] = P(0);
|
|
31
|
+
_(() => {
|
|
32
|
+
if (e && t && l.current) {
|
|
33
|
+
const b = new ResizeObserver((E) => {
|
|
34
|
+
for (const j of E)
|
|
35
|
+
v(j.contentRect.height);
|
|
30
36
|
});
|
|
31
|
-
return
|
|
37
|
+
return b.observe(l.current), v(l.current.offsetHeight), () => b.disconnect();
|
|
32
38
|
}
|
|
33
|
-
}, [
|
|
34
|
-
const
|
|
39
|
+
}, [e, t]);
|
|
40
|
+
const L = [
|
|
35
41
|
"card-base",
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
].filter(Boolean).join(" "),
|
|
43
|
-
padding:
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
R ? "card-dimmed" : "",
|
|
43
|
+
m === "rounded" ? "card-rounded" : "",
|
|
44
|
+
x ? "h-full" : "",
|
|
45
|
+
i ? "flex flex-col" : "",
|
|
46
|
+
n === "small" ? "text-sm" : "",
|
|
47
|
+
N
|
|
48
|
+
].filter(Boolean).join(" "), y = s != null && s.padding ? void 0 : G(r), B = parseInt(r) || 20, I = {
|
|
49
|
+
padding: r,
|
|
50
|
+
// The card clips overflow, so a long token in flowing text breaks rather than vanishing.
|
|
51
|
+
// Flex and grid items keep their min-content width; those need their own wrapping.
|
|
52
|
+
overflowWrap: "break-word",
|
|
53
|
+
display: f ? "flex" : void 0,
|
|
54
|
+
flexDirection: f,
|
|
46
55
|
alignItems: h,
|
|
47
|
-
...
|
|
48
|
-
...
|
|
49
|
-
paddingBottom: `${
|
|
56
|
+
...i && { overflow: "auto", height: "100%" },
|
|
57
|
+
...e && t && u > 0 && {
|
|
58
|
+
paddingBottom: `${B + u + 10}px`
|
|
50
59
|
}
|
|
51
60
|
}, z = {
|
|
52
|
-
width:
|
|
53
|
-
minWidth:
|
|
54
|
-
alignSelf:
|
|
55
|
-
...
|
|
56
|
-
...
|
|
57
|
-
...
|
|
61
|
+
width: d,
|
|
62
|
+
minWidth: p,
|
|
63
|
+
alignSelf: S,
|
|
64
|
+
...x && { height: "100%" },
|
|
65
|
+
...i && { height: i, display: "flex", flexDirection: "column" },
|
|
66
|
+
...e && t && { position: "relative" },
|
|
58
67
|
overflow: "hidden",
|
|
59
|
-
...
|
|
68
|
+
...w
|
|
60
69
|
};
|
|
61
|
-
return /* @__PURE__ */
|
|
62
|
-
a && /* @__PURE__ */
|
|
70
|
+
return /* @__PURE__ */ A("div", { className: L, style: z, children: [
|
|
71
|
+
a && /* @__PURE__ */ c(
|
|
63
72
|
"div",
|
|
64
73
|
{
|
|
65
|
-
className: "card-header px-3 py-2",
|
|
74
|
+
className: y ? "card-header py-2" : "card-header px-3 py-2",
|
|
66
75
|
style: {
|
|
67
76
|
marginBottom: "1px",
|
|
68
|
-
fontSize:
|
|
77
|
+
fontSize: n === "small" ? "12px" : "13px",
|
|
69
78
|
fontWeight: "normal",
|
|
70
|
-
|
|
79
|
+
...s != null && s.padding ? { padding: s.padding } : y
|
|
71
80
|
},
|
|
72
|
-
children: /* @__PURE__ */
|
|
81
|
+
children: /* @__PURE__ */ c("div", { className: "font-normal overflow-visible", children: a })
|
|
73
82
|
}
|
|
74
83
|
),
|
|
75
|
-
/* @__PURE__ */
|
|
84
|
+
/* @__PURE__ */ c(
|
|
76
85
|
"div",
|
|
77
86
|
{
|
|
78
87
|
className: "flex-1",
|
|
79
88
|
style: {
|
|
80
|
-
...
|
|
81
|
-
...
|
|
89
|
+
...I,
|
|
90
|
+
...e && t && { position: "relative" }
|
|
82
91
|
},
|
|
83
|
-
children:
|
|
92
|
+
children: o
|
|
84
93
|
}
|
|
85
94
|
),
|
|
86
|
-
|
|
95
|
+
t && /* @__PURE__ */ c(
|
|
87
96
|
"div",
|
|
88
97
|
{
|
|
89
|
-
ref:
|
|
98
|
+
ref: e ? l : void 0,
|
|
90
99
|
className: "card-footer px-4 py-3",
|
|
91
|
-
style:
|
|
92
|
-
...
|
|
100
|
+
style: e ? {
|
|
101
|
+
...g,
|
|
93
102
|
position: "absolute",
|
|
94
103
|
bottom: 0,
|
|
95
104
|
left: 0,
|
|
96
105
|
right: 0,
|
|
97
|
-
borderBottomLeftRadius:
|
|
98
|
-
borderBottomRightRadius:
|
|
106
|
+
borderBottomLeftRadius: m === "rounded" ? "20px" : "12px",
|
|
107
|
+
borderBottomRightRadius: m === "rounded" ? "20px" : "12px"
|
|
99
108
|
} : void 0,
|
|
100
|
-
children:
|
|
109
|
+
children: t
|
|
101
110
|
}
|
|
102
111
|
)
|
|
103
112
|
] });
|
|
104
113
|
};
|
|
105
114
|
export {
|
|
106
|
-
|
|
107
|
-
|
|
115
|
+
U as Card,
|
|
116
|
+
U as default
|
|
108
117
|
};
|
|
109
118
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../src/components/Card.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\n\ninterface CardProps {\n title?: string | React.ReactNode;\n padding?: string;\n children?: React.ReactNode;\n size?: 'default' | 'small';\n width?: string;\n minWidth?: string;\n direction?: 'row' | 'column';\n align?: 'center';\n dimmed?: boolean;\n fullHeight?: boolean;\n border?: 'base' | 'rounded';\n alignSelf?: 'center';\n height?: string;\n footer?: React.ReactNode;\n glassFooter?: boolean;\n className?: string;\n style?: React.CSSProperties;\n headerConfig?: {\n padding?: string;\n };\n}\n\nconst Card: React.FC<CardProps> = ({\n title,\n children,\n padding = '20px',\n size = 'default',\n width,\n minWidth,\n dimmed = false,\n direction,\n align,\n fullHeight = false,\n border = 'base',\n alignSelf,\n height,\n footer,\n glassFooter = false,\n className = '',\n style = {},\n headerConfig = {},\n}) => {\n const footerRef = useRef<HTMLDivElement>(null);\n const [footerHeight, setFooterHeight] = useState(0);\n\n useEffect(() => {\n if (glassFooter && footer && footerRef.current) {\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n setFooterHeight(entry.contentRect.height);\n }\n });\n\n observer.observe(footerRef.current);\n setFooterHeight(footerRef.current.offsetHeight);\n\n return () => observer.disconnect();\n }\n }, [glassFooter, footer]);\n\n // Size-specific padding\n const sizeClasses = size === 'small' ? 'text-sm' : '';\n\n // Dynamic classes based on props\n const cardClasses = [\n 'card-base',\n dimmed ? 'card-dimmed' : '',\n border === 'rounded' ? 'card-rounded' : '',\n fullHeight ? 'h-full' : '',\n height ? 'flex flex-col' : '',\n sizeClasses,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n // Content styles\n const paddingValue = parseInt(padding) || 20;\n const extraPadding = 10;\n const contentStyles: React.CSSProperties = {\n padding,\n display: direction ? 'flex' : undefined,\n flexDirection: direction,\n alignItems: align,\n ...(height && { overflow: 'auto', height: '100%' }),\n ...(glassFooter &&\n footer &&\n footerHeight > 0 && {\n paddingBottom: `${paddingValue + footerHeight + extraPadding}px`,\n }),\n };\n\n // Card container styles\n const cardContainerStyles: React.CSSProperties = {\n width,\n minWidth,\n alignSelf,\n ...(fullHeight && { height: '100%' }),\n ...(height && { height, display: 'flex', flexDirection: 'column' }),\n ...(glassFooter && footer && { position: 'relative' }),\n overflow: 'hidden',\n ...style,\n };\n\n return (\n <div className={cardClasses} style={cardContainerStyles}>\n {/* Header */}\n {title && (\n <div\n className
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../src/components/Card.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport { GLASS_SURFACE_STYLE } from './glassSurface';\n\ninterface CardProps {\n title?: string | React.ReactNode;\n padding?: string;\n children?: React.ReactNode;\n size?: 'default' | 'small';\n width?: string;\n minWidth?: string;\n direction?: 'row' | 'column';\n align?: 'center';\n dimmed?: boolean;\n fullHeight?: boolean;\n border?: 'base' | 'rounded';\n alignSelf?: 'center';\n height?: string;\n footer?: React.ReactNode;\n glassFooter?: boolean;\n className?: string;\n style?: React.CSSProperties;\n headerConfig?: {\n padding?: string;\n };\n}\n\nconst PLAIN_LENGTH = /^\\d*\\.?\\d+(px|rem|em)$/;\n\n// Only plain positive lengths are copied: calc() and var() can't be split from a shorthand, and a\n// zero inset would put the title against the border, so those keep the header's own 12px.\nconst horizontalInset = (padding: string): React.CSSProperties | undefined => {\n const parts = padding.trim().split(/\\s+/);\n if (parts.length > 4 || !parts.every((part) => PLAIN_LENGTH.test(part))) {\n return undefined;\n }\n const [top, right = top, , left = right] = parts;\n return parseFloat(left) > 0 && parseFloat(right) > 0\n ? { paddingLeft: left, paddingRight: right }\n : undefined;\n};\n\nconst Card: React.FC<CardProps> = ({\n title,\n children,\n padding = '20px',\n size = 'default',\n width,\n minWidth,\n dimmed = false,\n direction,\n align,\n fullHeight = false,\n border = 'base',\n alignSelf,\n height,\n footer,\n glassFooter = false,\n className = '',\n style = {},\n headerConfig = {},\n}) => {\n const footerRef = useRef<HTMLDivElement>(null);\n const [footerHeight, setFooterHeight] = useState(0);\n\n useEffect(() => {\n if (glassFooter && footer && footerRef.current) {\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n setFooterHeight(entry.contentRect.height);\n }\n });\n\n observer.observe(footerRef.current);\n setFooterHeight(footerRef.current.offsetHeight);\n\n return () => observer.disconnect();\n }\n }, [glassFooter, footer]);\n\n // Size-specific padding\n const sizeClasses = size === 'small' ? 'text-sm' : '';\n\n // Dynamic classes based on props\n const cardClasses = [\n 'card-base',\n dimmed ? 'card-dimmed' : '',\n border === 'rounded' ? 'card-rounded' : '',\n fullHeight ? 'h-full' : '',\n height ? 'flex flex-col' : '',\n sizeClasses,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const headerInset = headerConfig?.padding ? undefined : horizontalInset(padding);\n\n // Content styles\n const paddingValue = parseInt(padding) || 20;\n const extraPadding = 10;\n const contentStyles: React.CSSProperties = {\n padding,\n // The card clips overflow, so a long token in flowing text breaks rather than vanishing.\n // Flex and grid items keep their min-content width; those need their own wrapping.\n overflowWrap: 'break-word',\n display: direction ? 'flex' : undefined,\n flexDirection: direction,\n alignItems: align,\n ...(height && { overflow: 'auto', height: '100%' }),\n ...(glassFooter &&\n footer &&\n footerHeight > 0 && {\n paddingBottom: `${paddingValue + footerHeight + extraPadding}px`,\n }),\n };\n\n // Card container styles\n const cardContainerStyles: React.CSSProperties = {\n width,\n minWidth,\n alignSelf,\n ...(fullHeight && { height: '100%' }),\n ...(height && { height, display: 'flex', flexDirection: 'column' }),\n ...(glassFooter && footer && { position: 'relative' }),\n overflow: 'hidden',\n ...style,\n };\n\n return (\n <div className={cardClasses} style={cardContainerStyles}>\n {/* Header */}\n {title && (\n <div\n className={headerInset ? 'card-header py-2' : 'card-header px-3 py-2'}\n style={{\n marginBottom: '1px',\n fontSize: size === 'small' ? '12px' : '13px',\n fontWeight: 'normal',\n ...(headerConfig?.padding\n ? { padding: headerConfig.padding }\n : headerInset),\n }}\n >\n <div className=\"font-normal overflow-visible\">{title}</div>\n </div>\n )}\n\n {/* Body */}\n <div\n className=\"flex-1\"\n style={{\n ...contentStyles,\n ...(glassFooter && footer && { position: 'relative' }),\n }}\n >\n {children}\n </div>\n\n {/* Footer */}\n {footer && (\n <div\n ref={glassFooter ? footerRef : undefined}\n className=\"card-footer px-4 py-3\"\n style={\n glassFooter\n ? {\n ...GLASS_SURFACE_STYLE,\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n borderBottomLeftRadius: border === 'rounded' ? '20px' : '12px',\n borderBottomRightRadius: border === 'rounded' ? '20px' : '12px',\n }\n : undefined\n }\n >\n {footer}\n </div>\n )}\n </div>\n );\n};\n\nexport default Card;\nexport { Card };\n"],"names":["PLAIN_LENGTH","horizontalInset","padding","parts","part","top","right","left","Card","title","children","size","width","minWidth","dimmed","direction","align","fullHeight","border","alignSelf","height","footer","glassFooter","className","style","headerConfig","footerRef","useRef","footerHeight","setFooterHeight","useState","useEffect","observer","entries","entry","cardClasses","headerInset","paddingValue","contentStyles","cardContainerStyles","jsxs","jsx","GLASS_SURFACE_STYLE"],"mappings":"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"}
|
package/package.json
CHANGED