@versini/ui-card 5.0.6 → 5.1.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/index.d.ts +67 -8
- package/dist/index.js +162 -12
- package/package.json +10 -10
- package/dist/components/Card/Card.js +0 -103
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,67 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
declare const
|
|
5
|
-
|
|
6
|
-
declare const
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
|
+
import React$1 from 'react';
|
|
3
|
+
|
|
4
|
+
export declare const Card: ({ header, headerClassName, footer, footerClassName, children, className, bodyClassName, "aria-labelledby": ariaLabelledby, mode, compact, noBorder, ...otherProps }: CardTypes.Props) => JSX.Element;
|
|
5
|
+
|
|
6
|
+
export declare const CARD_CLASSNAME = "av-card";
|
|
7
|
+
|
|
8
|
+
declare namespace CardTypes {
|
|
9
|
+
type Props = {
|
|
10
|
+
/**
|
|
11
|
+
* The children to render.
|
|
12
|
+
*/
|
|
13
|
+
children: React$1.ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* If the header prop is not provided, the Card must be
|
|
16
|
+
* described via aria-labelledby.
|
|
17
|
+
*/
|
|
18
|
+
"aria-labelledby"?: string;
|
|
19
|
+
/**
|
|
20
|
+
* CSS class(es) to add to the body.
|
|
21
|
+
*/
|
|
22
|
+
bodyClassName?: string;
|
|
23
|
+
/**
|
|
24
|
+
* CSS class(es) to add to the main component wrapper.
|
|
25
|
+
*/
|
|
26
|
+
className?: string;
|
|
27
|
+
/**
|
|
28
|
+
* If true, the card will be smaller.
|
|
29
|
+
*/
|
|
30
|
+
compact?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The content to render in the footer.
|
|
33
|
+
*/
|
|
34
|
+
footer?: React$1.ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* CSS class(es) to add to the footer.
|
|
37
|
+
*/
|
|
38
|
+
footerClassName?: string;
|
|
39
|
+
/**
|
|
40
|
+
* The content to render in the header.
|
|
41
|
+
*/
|
|
42
|
+
header?: React$1.ReactNode;
|
|
43
|
+
/**
|
|
44
|
+
* CSS class(es) to add to the header.
|
|
45
|
+
*/
|
|
46
|
+
headerClassName?: string;
|
|
47
|
+
/**
|
|
48
|
+
* The mode of Card. This will change the color of the Card.
|
|
49
|
+
*/
|
|
50
|
+
mode?: "darker" | "dark" | "light" | "system" | "alt-system";
|
|
51
|
+
/**
|
|
52
|
+
* Whether or not to render the Card with a border.
|
|
53
|
+
* @default false
|
|
54
|
+
*/
|
|
55
|
+
noBorder?: boolean;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
type HeaderProps = {
|
|
59
|
+
className: string;
|
|
60
|
+
content: React$1.ReactNode;
|
|
61
|
+
|
|
62
|
+
id?: string;
|
|
63
|
+
userAriaLabelledby?: string;
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,168 @@
|
|
|
1
|
-
import { CARD_CLASSNAME as o, Card as r } from "./components/Card/Card.js";
|
|
2
1
|
/*!
|
|
3
|
-
@versini/ui-card v5.
|
|
2
|
+
@versini/ui-card v5.1.1
|
|
4
3
|
© 2025 gizmette.com
|
|
5
4
|
*/
|
|
6
5
|
try {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
6
|
+
if (!window.__VERSINI_UI_CARD__) {
|
|
7
|
+
window.__VERSINI_UI_CARD__ = {
|
|
8
|
+
version: "5.1.1",
|
|
9
|
+
buildTime: "11/16/2025 05:48 PM EST",
|
|
10
|
+
homepage: "https://github.com/aversini/ui-components",
|
|
11
|
+
license: "MIT",
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
} catch (error) {
|
|
15
|
+
// nothing to declare officer
|
|
14
16
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
|
|
18
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
+
import { useUniqueId } from "@versini/ui-hooks";
|
|
20
|
+
import clsx from "clsx";
|
|
21
|
+
|
|
22
|
+
;// CONCATENATED MODULE: ./src/common/constants.ts
|
|
23
|
+
const CARD_CLASSNAME = "av-card";
|
|
24
|
+
|
|
25
|
+
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
26
|
+
|
|
27
|
+
;// CONCATENATED MODULE: external "@versini/ui-hooks"
|
|
28
|
+
|
|
29
|
+
;// CONCATENATED MODULE: external "clsx"
|
|
30
|
+
|
|
31
|
+
;// CONCATENATED MODULE: ./src/components/Card/utilities.ts
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
const getCardClasses = ({ className, headerClassName, bodyClassName, footerClassName, mode, compact, noBorder })=>{
|
|
35
|
+
const wrapper = clsx(CARD_CLASSNAME, "rounded-md", {
|
|
36
|
+
"border-none": noBorder,
|
|
37
|
+
"border-2": !noBorder,
|
|
38
|
+
"p-4": !compact,
|
|
39
|
+
"p-1 sm:p-2": compact,
|
|
40
|
+
"border-border-accent bg-surface-darker text-copy-light": mode === "darker",
|
|
41
|
+
"border-border-accent bg-surface-dark text-copy-light": mode === "dark",
|
|
42
|
+
"border-border-dark bg-surface-lighter text-copy-dark": mode === "light",
|
|
43
|
+
"border-border-dark bg-surface-lighter text-copy-dark dark:border-border-accent dark:bg-surface-dark dark:text-copy-light": mode === "system",
|
|
44
|
+
"border-border-accent bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark": mode === "alt-system"
|
|
45
|
+
}, className);
|
|
46
|
+
const header = headerClassName ? headerClassName : clsx(`${CARD_CLASSNAME}__header mt-0 border-b-2`, {
|
|
47
|
+
"text-copy-light border-border-accent": mode === "darker",
|
|
48
|
+
"border-border-accent": mode === "dark",
|
|
49
|
+
"border-border-medium": mode === "light",
|
|
50
|
+
"border-border-medium dark:border-border-accent": mode === "system",
|
|
51
|
+
"border-border-accent dark:border-border-medium": mode === "alt-system",
|
|
52
|
+
"mb-4": !compact,
|
|
53
|
+
"mb-2": compact
|
|
54
|
+
});
|
|
55
|
+
const body = clsx(bodyClassName);
|
|
56
|
+
const footer = footerClassName ? footerClassName : clsx(`${CARD_CLASSNAME}__footer pt-2`);
|
|
57
|
+
return {
|
|
58
|
+
wrapper,
|
|
59
|
+
header,
|
|
60
|
+
body,
|
|
61
|
+
footer
|
|
62
|
+
};
|
|
18
63
|
};
|
|
64
|
+
|
|
65
|
+
;// CONCATENATED MODULE: ./src/components/Card/Card.tsx
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
function CardHeader({ id, content, userAriaLabelledby, className }) {
|
|
71
|
+
if (typeof content === "string") {
|
|
72
|
+
return /*#__PURE__*/ jsx("h2", {
|
|
73
|
+
id: id,
|
|
74
|
+
className: className,
|
|
75
|
+
children: content
|
|
76
|
+
});
|
|
77
|
+
} else if (userAriaLabelledby) {
|
|
78
|
+
return /*#__PURE__*/ jsx("div", {
|
|
79
|
+
className: className,
|
|
80
|
+
children: content
|
|
81
|
+
});
|
|
82
|
+
} else if (content) {
|
|
83
|
+
return /*#__PURE__*/ jsx("div", {
|
|
84
|
+
className: className,
|
|
85
|
+
id: id,
|
|
86
|
+
children: content
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
return null;
|
|
90
|
+
}
|
|
91
|
+
const Card = ({ header, headerClassName, footer, footerClassName, children, className, bodyClassName, "aria-labelledby": ariaLabelledby, mode = "system", compact = false, noBorder = false, ...otherProps })=>{
|
|
92
|
+
let headerId = null, sectionAriaLabelledBy = null;
|
|
93
|
+
const isHeaderString = typeof header === "string";
|
|
94
|
+
const uniqueIdForHeader = useUniqueId(CARD_CLASSNAME);
|
|
95
|
+
const cardClassName = getCardClasses({
|
|
96
|
+
className,
|
|
97
|
+
headerClassName,
|
|
98
|
+
bodyClassName,
|
|
99
|
+
footerClassName,
|
|
100
|
+
mode,
|
|
101
|
+
compact,
|
|
102
|
+
noBorder
|
|
103
|
+
});
|
|
104
|
+
if (isHeaderString) {
|
|
105
|
+
/**
|
|
106
|
+
* header is a string:
|
|
107
|
+
* - we provide our own unique aria-labelledby
|
|
108
|
+
* - we need to wrap the header with that same unique id
|
|
109
|
+
*/ headerId = uniqueIdForHeader;
|
|
110
|
+
sectionAriaLabelledBy = headerId;
|
|
111
|
+
} else if (!isHeaderString && header && ariaLabelledby) {
|
|
112
|
+
/**
|
|
113
|
+
* header is not a string and aria-labelledby is provided.
|
|
114
|
+
* We use it to:
|
|
115
|
+
* - add aria-labelledby to the "section" node
|
|
116
|
+
* - but we do not provide the actual id (it's supposed to be
|
|
117
|
+
* in the provided header)
|
|
118
|
+
*/ headerId = null;
|
|
119
|
+
sectionAriaLabelledBy = ariaLabelledby;
|
|
120
|
+
} else if (!isHeaderString && header && !ariaLabelledby) {
|
|
121
|
+
/**
|
|
122
|
+
* header is not a string and aria-labelledby is NOT provided.
|
|
123
|
+
* We cannot assume header does not have an id (we cannot replace one),
|
|
124
|
+
* therefore, we need to wrap the header with our own id.
|
|
125
|
+
*/ headerId = uniqueIdForHeader;
|
|
126
|
+
sectionAriaLabelledBy = headerId;
|
|
127
|
+
} else {
|
|
128
|
+
/**
|
|
129
|
+
* There is no header.
|
|
130
|
+
* - if aria-labelledby exist, we add it to the "section" node and
|
|
131
|
+
* hope the user is providing the corresponding id, in the body maybe?
|
|
132
|
+
*/ headerId = null;
|
|
133
|
+
sectionAriaLabelledBy = ariaLabelledby || null;
|
|
134
|
+
}
|
|
135
|
+
return /*#__PURE__*/ jsx("div", {
|
|
136
|
+
className: cardClassName.wrapper,
|
|
137
|
+
children: /*#__PURE__*/ jsxs("section", {
|
|
138
|
+
...sectionAriaLabelledBy && {
|
|
139
|
+
"aria-labelledby": sectionAriaLabelledBy
|
|
140
|
+
},
|
|
141
|
+
className: cardClassName.body,
|
|
142
|
+
...otherProps,
|
|
143
|
+
children: [
|
|
144
|
+
/*#__PURE__*/ jsx(CardHeader, {
|
|
145
|
+
...headerId && {
|
|
146
|
+
id: headerId
|
|
147
|
+
},
|
|
148
|
+
content: header,
|
|
149
|
+
className: cardClassName.header,
|
|
150
|
+
userAriaLabelledby: ariaLabelledby
|
|
151
|
+
}),
|
|
152
|
+
/*#__PURE__*/ jsx("div", {
|
|
153
|
+
children: children
|
|
154
|
+
}),
|
|
155
|
+
footer ? /*#__PURE__*/ jsx("div", {
|
|
156
|
+
className: cardClassName.footer,
|
|
157
|
+
children: footer
|
|
158
|
+
}) : null
|
|
159
|
+
]
|
|
160
|
+
})
|
|
161
|
+
});
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
;// CONCATENATED MODULE: ./src/components/index.ts
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
export { CARD_CLASSNAME, Card };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-card",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
22
|
"build:check": "tsc",
|
|
23
|
-
"build:js": "
|
|
24
|
-
"build:types": "
|
|
25
|
-
"build": "npm-run-all --serial clean build:check build:js
|
|
23
|
+
"build:js": "rslib build",
|
|
24
|
+
"build:types": "echo 'Types now built with rslib'",
|
|
25
|
+
"build": "npm-run-all --serial clean build:check build:js",
|
|
26
26
|
"clean": "rimraf dist tmp",
|
|
27
|
-
"dev:js": "
|
|
28
|
-
"dev:types": "
|
|
29
|
-
"dev": "
|
|
27
|
+
"dev:js": "rslib build --watch",
|
|
28
|
+
"dev:types": "echo 'Types now watched with rslib'",
|
|
29
|
+
"dev": "rslib build --watch",
|
|
30
30
|
"lint": "biome lint src",
|
|
31
31
|
"lint:fix": "biome check src --write --no-errors-on-unmatched",
|
|
32
32
|
"prettier": "biome check --write --no-errors-on-unmatched",
|
|
@@ -42,12 +42,12 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@tailwindcss/typography": "0.5.19",
|
|
45
|
-
"@versini/ui-hooks": "5.
|
|
45
|
+
"@versini/ui-hooks": "5.2.0",
|
|
46
46
|
"clsx": "2.1.1",
|
|
47
|
-
"tailwindcss": "4.1.
|
|
47
|
+
"tailwindcss": "4.1.17"
|
|
48
48
|
},
|
|
49
49
|
"sideEffects": [
|
|
50
50
|
"**/*.css"
|
|
51
51
|
],
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "1d0bedfa3a84ea7f2f41d347a59de518f92e4cea"
|
|
53
53
|
}
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import { jsx as a, jsxs as m } from "react/jsx-runtime";
|
|
2
|
-
import { useUniqueId as v } from "@versini/ui-hooks";
|
|
3
|
-
import u from "clsx";
|
|
4
|
-
const f = "av-card", A = ({
|
|
5
|
-
className: d,
|
|
6
|
-
headerClassName: e,
|
|
7
|
-
bodyClassName: c,
|
|
8
|
-
footerClassName: t,
|
|
9
|
-
mode: r,
|
|
10
|
-
compact: l,
|
|
11
|
-
noBorder: i
|
|
12
|
-
}) => {
|
|
13
|
-
const s = u(
|
|
14
|
-
f,
|
|
15
|
-
"rounded-md",
|
|
16
|
-
{
|
|
17
|
-
"border-none": i,
|
|
18
|
-
"border-2": !i,
|
|
19
|
-
"p-4": !l,
|
|
20
|
-
"p-1 sm:p-2": l,
|
|
21
|
-
"border-border-accent bg-surface-darker text-copy-light": r === "darker",
|
|
22
|
-
"border-border-accent bg-surface-dark text-copy-light": r === "dark",
|
|
23
|
-
"border-border-dark bg-surface-lighter text-copy-dark": r === "light",
|
|
24
|
-
"border-border-dark bg-surface-lighter text-copy-dark dark:border-border-accent dark:bg-surface-dark dark:text-copy-light": r === "system",
|
|
25
|
-
"border-border-accent bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark": r === "alt-system"
|
|
26
|
-
},
|
|
27
|
-
d
|
|
28
|
-
), k = e || u(`${f}__header mt-0 border-b-2`, {
|
|
29
|
-
"text-copy-light border-border-accent": r === "darker",
|
|
30
|
-
"border-border-accent": r === "dark",
|
|
31
|
-
"border-border-medium": r === "light",
|
|
32
|
-
"border-border-medium dark:border-border-accent": r === "system",
|
|
33
|
-
"border-border-accent dark:border-border-medium": r === "alt-system",
|
|
34
|
-
"mb-4": !l,
|
|
35
|
-
"mb-2": l
|
|
36
|
-
}), g = u(c), p = t || u(`${f}__footer pt-2`);
|
|
37
|
-
return {
|
|
38
|
-
wrapper: s,
|
|
39
|
-
header: k,
|
|
40
|
-
body: g,
|
|
41
|
-
footer: p
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
function C({
|
|
45
|
-
id: d,
|
|
46
|
-
content: e,
|
|
47
|
-
userAriaLabelledby: c,
|
|
48
|
-
className: t
|
|
49
|
-
}) {
|
|
50
|
-
return typeof e == "string" ? /* @__PURE__ */ a("h2", { id: d, className: t, children: e }) : c ? /* @__PURE__ */ a("div", { className: t, children: e }) : e ? /* @__PURE__ */ a("div", { className: t, id: d, children: e }) : null;
|
|
51
|
-
}
|
|
52
|
-
const S = ({
|
|
53
|
-
header: d,
|
|
54
|
-
headerClassName: e,
|
|
55
|
-
footer: c,
|
|
56
|
-
footerClassName: t,
|
|
57
|
-
children: r,
|
|
58
|
-
className: l,
|
|
59
|
-
bodyClassName: i,
|
|
60
|
-
"aria-labelledby": s,
|
|
61
|
-
mode: k = "system",
|
|
62
|
-
compact: g = !1,
|
|
63
|
-
noBorder: p = !1,
|
|
64
|
-
...x
|
|
65
|
-
}) => {
|
|
66
|
-
let o = null, b = null;
|
|
67
|
-
const h = typeof d == "string", y = v(f), n = A({
|
|
68
|
-
className: l,
|
|
69
|
-
headerClassName: e,
|
|
70
|
-
bodyClassName: i,
|
|
71
|
-
footerClassName: t,
|
|
72
|
-
mode: k,
|
|
73
|
-
compact: g,
|
|
74
|
-
noBorder: p
|
|
75
|
-
});
|
|
76
|
-
return h ? (o = y, b = o) : !h && d && s ? (o = null, b = s) : !h && d && !s ? (o = y, b = o) : (o = null, b = s || null), /* @__PURE__ */ a("div", { className: n.wrapper, children: /* @__PURE__ */ m(
|
|
77
|
-
"section",
|
|
78
|
-
{
|
|
79
|
-
...b && {
|
|
80
|
-
"aria-labelledby": b
|
|
81
|
-
},
|
|
82
|
-
className: n.body,
|
|
83
|
-
...x,
|
|
84
|
-
children: [
|
|
85
|
-
/* @__PURE__ */ a(
|
|
86
|
-
C,
|
|
87
|
-
{
|
|
88
|
-
...o && { id: o },
|
|
89
|
-
content: d,
|
|
90
|
-
className: n.header,
|
|
91
|
-
userAriaLabelledby: s
|
|
92
|
-
}
|
|
93
|
-
),
|
|
94
|
-
/* @__PURE__ */ a("div", { children: r }),
|
|
95
|
-
c ? /* @__PURE__ */ a("div", { className: n.footer, children: c }) : null
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
) });
|
|
99
|
-
};
|
|
100
|
-
export {
|
|
101
|
-
f as CARD_CLASSNAME,
|
|
102
|
-
S as Card
|
|
103
|
-
};
|