@starasia/card 1.0.3 → 2.0.0
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/card.es.js +20 -38
- package/dist/card.umd.js +13 -31
- package/package.json +1 -1
package/dist/card.es.js
CHANGED
|
@@ -1,59 +1,41 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
--
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
--starasia-ui-card-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
|
|
8
|
-
|
|
9
|
-
/* background color */
|
|
10
|
-
--starasia-ui-card-background-color: var(
|
|
11
|
-
--starasia-ui-color-gray-50,
|
|
12
|
-
rgba(249, 250, 251, 1)
|
|
13
|
-
);
|
|
14
|
-
|
|
15
|
-
/* border color */
|
|
16
|
-
--starasia-ui-card-border-color: var(--starasia-ui-color-gray-300, rgba(209, 213, 219, 1));
|
|
17
|
-
|
|
18
|
-
/* box shadow */
|
|
19
|
-
--starasia-ui-card-box-shadow: var(
|
|
20
|
-
--starasia-ui-shadow-md,
|
|
21
|
-
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
22
|
-
0 2px 4px -2px rgb(0 0 0 / 0.1)
|
|
23
|
-
);
|
|
2
|
+
const e = `:root {
|
|
3
|
+
--sa-card-radius: var(--sa-radii-md, 0.5rem);
|
|
4
|
+
--sa-card-bg: var(--sa-background-primary, #ffffff);
|
|
5
|
+
--sa-card-border: var(--sa-border-subtle, #0b120e24);
|
|
6
|
+
--sa-card-shadow: var(--sa-shadow-card, 0px 4px 35px 0px rgba(112,144,176,0.25));
|
|
24
7
|
}
|
|
25
8
|
|
|
26
9
|
.starasia-card {
|
|
27
|
-
border-radius: var(--
|
|
28
|
-
background-color: var(--
|
|
29
|
-
border: var(--
|
|
30
|
-
|
|
31
|
-
box-shadow: var(--starasia-ui-card-box-shadow);
|
|
10
|
+
border-radius: var(--sa-card-radius);
|
|
11
|
+
background-color: var(--sa-card-bg);
|
|
12
|
+
border: var(--sa-border, 1px) solid var(--sa-card-border);
|
|
13
|
+
box-shadow: var(--sa-card-shadow);
|
|
32
14
|
width: max-content;
|
|
33
15
|
}
|
|
34
16
|
|
|
35
17
|
.starasia-card-header {
|
|
36
|
-
padding: var(--
|
|
18
|
+
padding: var(--sa-spacing-lg, 1rem);
|
|
37
19
|
}
|
|
38
20
|
|
|
39
21
|
.starasia-card-body {
|
|
40
|
-
padding: var(--
|
|
22
|
+
padding: var(--sa-spacing-lg, 1rem);
|
|
41
23
|
}
|
|
42
24
|
|
|
43
25
|
.starasia-card-footer {
|
|
44
|
-
padding: var(--
|
|
26
|
+
padding: var(--sa-spacing-lg, 1rem);
|
|
45
27
|
}
|
|
46
|
-
`,
|
|
47
|
-
if (!document.getElementById(
|
|
28
|
+
`, d = "starasia-card-styles", n = (r) => {
|
|
29
|
+
if (!document.getElementById(d)) {
|
|
48
30
|
const a = document.createElement("style");
|
|
49
|
-
a.id =
|
|
31
|
+
a.id = d, a.textContent = r, document.head.appendChild(a);
|
|
50
32
|
}
|
|
51
33
|
};
|
|
52
|
-
|
|
53
|
-
const
|
|
34
|
+
n(e);
|
|
35
|
+
const o = ({ children: r, style: a }) => /* @__PURE__ */ s("div", { className: "starasia-card", style: { ...a }, children: r }), c = ({ children: r, style: a }) => /* @__PURE__ */ s("div", { className: "starasia-card-header", style: { ...a }, children: r }), i = ({ children: r, style: a }) => /* @__PURE__ */ s("div", { className: "starasia-card-body", style: { ...a }, children: r }), l = ({ children: r, style: a }) => /* @__PURE__ */ s("div", { className: "starasia-card-footer", style: { ...a }, children: r });
|
|
54
36
|
export {
|
|
55
|
-
|
|
56
|
-
|
|
37
|
+
o as Card,
|
|
38
|
+
i as CardBody,
|
|
57
39
|
l as CardFooter,
|
|
58
|
-
|
|
40
|
+
c as CardHeader
|
|
59
41
|
};
|
package/dist/card.umd.js
CHANGED
|
@@ -1,45 +1,27 @@
|
|
|
1
|
-
(function(r,
|
|
2
|
-
|
|
3
|
-
--
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--starasia-ui-card-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
|
|
7
|
-
|
|
8
|
-
/* background color */
|
|
9
|
-
--starasia-ui-card-background-color: var(
|
|
10
|
-
--starasia-ui-color-gray-50,
|
|
11
|
-
rgba(249, 250, 251, 1)
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
/* border color */
|
|
15
|
-
--starasia-ui-card-border-color: var(--starasia-ui-color-gray-300, rgba(209, 213, 219, 1));
|
|
16
|
-
|
|
17
|
-
/* box shadow */
|
|
18
|
-
--starasia-ui-card-box-shadow: var(
|
|
19
|
-
--starasia-ui-shadow-md,
|
|
20
|
-
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
21
|
-
0 2px 4px -2px rgb(0 0 0 / 0.1)
|
|
22
|
-
);
|
|
1
|
+
(function(r,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],d):(r=typeof globalThis<"u"?globalThis:r||self,d(r.Card={},r.jsxRuntime))})(this,function(r,d){"use strict";const n=`:root {
|
|
2
|
+
--sa-card-radius: var(--sa-radii-md, 0.5rem);
|
|
3
|
+
--sa-card-bg: var(--sa-background-primary, #ffffff);
|
|
4
|
+
--sa-card-border: var(--sa-border-subtle, #0b120e24);
|
|
5
|
+
--sa-card-shadow: var(--sa-shadow-card, 0px 4px 35px 0px rgba(112,144,176,0.25));
|
|
23
6
|
}
|
|
24
7
|
|
|
25
8
|
.starasia-card {
|
|
26
|
-
border-radius: var(--
|
|
27
|
-
background-color: var(--
|
|
28
|
-
border: var(--
|
|
29
|
-
|
|
30
|
-
box-shadow: var(--starasia-ui-card-box-shadow);
|
|
9
|
+
border-radius: var(--sa-card-radius);
|
|
10
|
+
background-color: var(--sa-card-bg);
|
|
11
|
+
border: var(--sa-border, 1px) solid var(--sa-card-border);
|
|
12
|
+
box-shadow: var(--sa-card-shadow);
|
|
31
13
|
width: max-content;
|
|
32
14
|
}
|
|
33
15
|
|
|
34
16
|
.starasia-card-header {
|
|
35
|
-
padding: var(--
|
|
17
|
+
padding: var(--sa-spacing-lg, 1rem);
|
|
36
18
|
}
|
|
37
19
|
|
|
38
20
|
.starasia-card-body {
|
|
39
|
-
padding: var(--
|
|
21
|
+
padding: var(--sa-spacing-lg, 1rem);
|
|
40
22
|
}
|
|
41
23
|
|
|
42
24
|
.starasia-card-footer {
|
|
43
|
-
padding: var(--
|
|
25
|
+
padding: var(--sa-spacing-lg, 1rem);
|
|
44
26
|
}
|
|
45
|
-
`,
|
|
27
|
+
`,s="starasia-card-styles";(e=>{if(!document.getElementById(s)){const a=document.createElement("style");a.id=s,a.textContent=e,document.head.appendChild(a)}})(n);const t=({children:e,style:a})=>d.jsx("div",{className:"starasia-card",style:{...a},children:e}),o=({children:e,style:a})=>d.jsx("div",{className:"starasia-card-header",style:{...a},children:e}),c=({children:e,style:a})=>d.jsx("div",{className:"starasia-card-body",style:{...a},children:e}),i=({children:e,style:a})=>d.jsx("div",{className:"starasia-card-footer",style:{...a},children:e});r.Card=t,r.CardBody=c,r.CardFooter=i,r.CardHeader=o,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|