musae 1.2.0 → 1.3.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/components/card/actions.cjs +31 -0
- package/dist/components/card/actions.d.ts +31 -0
- package/dist/components/card/actions.mjs +27 -0
- package/dist/components/card/body.cjs +30 -0
- package/dist/components/card/body.d.ts +18 -0
- package/dist/components/card/body.mjs +26 -0
- package/dist/components/card/card.cjs +76 -140
- package/dist/components/card/card.d.ts +23 -150
- package/dist/components/card/card.mjs +67 -135
- package/dist/components/card/content.cjs +33 -0
- package/dist/components/card/content.d.ts +33 -0
- package/dist/components/card/content.mjs +29 -0
- package/dist/components/card/context.cjs +14 -1
- package/dist/components/card/context.d.ts +15 -1
- package/dist/components/card/context.mjs +13 -2
- package/dist/components/card/header.cjs +79 -0
- package/dist/components/card/header.d.ts +58 -0
- package/dist/components/card/header.mjs +75 -0
- package/dist/components/card/headline.cjs +30 -0
- package/dist/components/card/headline.d.ts +18 -0
- package/dist/components/card/headline.mjs +26 -0
- package/dist/components/card/index.d.ts +1 -1
- package/dist/components/card/media.cjs +50 -0
- package/dist/components/card/media.d.ts +42 -0
- package/dist/components/card/media.mjs +46 -0
- package/dist/components/card/styles.cjs +133 -14
- package/dist/components/card/styles.d.ts +88 -28
- package/dist/components/card/styles.mjs +133 -14
- package/dist/components/card/subhead.cjs +30 -0
- package/dist/components/card/subhead.d.ts +18 -0
- package/dist/components/card/subhead.mjs +26 -0
- package/dist/components/card/title.cjs +30 -0
- package/dist/components/card/title.d.ts +18 -0
- package/dist/components/card/title.mjs +26 -0
- package/dist/components/theme/tokens.stylex.cjs +4 -1
- package/dist/components/theme/tokens.stylex.d.ts +9 -1
- package/dist/components/theme/tokens.stylex.mjs +4 -1
- package/dist/styles.css +68 -23
- package/dist/types/card.d.ts +39 -2
- package/package.json +1 -3
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @zh Card 组件样式定义,每个 namespace 独立 $create 调用
|
|
3
|
+
*/
|
|
1
4
|
var styles = {
|
|
2
5
|
card: {
|
|
3
6
|
"default": {
|
|
@@ -5,7 +8,7 @@ var styles = {
|
|
|
5
8
|
kVQacm: "musaex-b3r6kr",
|
|
6
9
|
kaIpWk: "musaex-1k532am",
|
|
7
10
|
kB7OPa: "musaex-9f619",
|
|
8
|
-
k1ekBW: "musaex-
|
|
11
|
+
k1ekBW: "musaex-f1bglv",
|
|
9
12
|
kIyJzY: "musaex-1dg6om",
|
|
10
13
|
k5JduY: "musaex-100rkj9",
|
|
11
14
|
kwXMNM: "musaex-1j6awrg",
|
|
@@ -13,31 +16,68 @@ var styles = {
|
|
|
13
16
|
kloYau: "musaex-2q1x1w",
|
|
14
17
|
kRicXK: "musaex-1ywzrc5",
|
|
15
18
|
kPNhGg: "musaex-l3kudx",
|
|
19
|
+
ks3ayO: "musaex-86grr",
|
|
20
|
+
$$css: true
|
|
21
|
+
},
|
|
22
|
+
stacked: {
|
|
23
|
+
k1xSpc: "musaex-78zum5",
|
|
24
|
+
kXwgrk: "musaex-dt5ytf",
|
|
25
|
+
$$css: true
|
|
26
|
+
},
|
|
27
|
+
horizontal: {
|
|
28
|
+
k1xSpc: "musaex-78zum5",
|
|
29
|
+
kXwgrk: "musaex-1q0g3np",
|
|
30
|
+
kGNEyG: "musaex-1qjc9v5",
|
|
16
31
|
$$css: true
|
|
17
32
|
},
|
|
18
33
|
interactive: {
|
|
19
34
|
kkrTdU: "musaex-1ypdohk",
|
|
20
35
|
$$css: true
|
|
21
36
|
},
|
|
37
|
+
disabled: {
|
|
38
|
+
kkrTdU: "musaex-1h6gzvc",
|
|
39
|
+
$$css: true
|
|
40
|
+
},
|
|
22
41
|
outlined: {
|
|
23
42
|
kWkggS: "musaex-k7eln3",
|
|
24
43
|
kMzoRj: "musaex-1iyq3db",
|
|
25
44
|
ksu8eU: "musaex-1y0btm7",
|
|
26
45
|
kVAM5u: "musaex-axmpxa",
|
|
27
|
-
|
|
46
|
+
kGVxlE: "musaex-1gnnqk1",
|
|
28
47
|
$$css: true
|
|
29
48
|
},
|
|
30
49
|
elevated: {
|
|
31
50
|
kWkggS: "musaex-1eai1fy",
|
|
32
|
-
kMzoRj: "musaex-
|
|
33
|
-
kGVxlE: "musaex-
|
|
34
|
-
ks3ayO: "musaex-yhc2n1",
|
|
51
|
+
kMzoRj: "musaex-c342km",
|
|
52
|
+
kGVxlE: "musaex-1tw10uf",
|
|
35
53
|
$$css: true
|
|
36
54
|
},
|
|
37
55
|
filled: {
|
|
38
56
|
kWkggS: "musaex-1mu49yl",
|
|
39
|
-
kMzoRj: "musaex-
|
|
40
|
-
|
|
57
|
+
kMzoRj: "musaex-c342km",
|
|
58
|
+
kGVxlE: "musaex-1gnnqk1",
|
|
59
|
+
$$css: true
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
elevationState: {
|
|
63
|
+
outlinedHover: {
|
|
64
|
+
kGVxlE: "musaex-1tw10uf",
|
|
65
|
+
$$css: true
|
|
66
|
+
},
|
|
67
|
+
outlinedDragged: {
|
|
68
|
+
kGVxlE: "musaex-15krw24",
|
|
69
|
+
$$css: true
|
|
70
|
+
},
|
|
71
|
+
elevatedHover: {
|
|
72
|
+
kGVxlE: "musaex-vkh6yx",
|
|
73
|
+
$$css: true
|
|
74
|
+
},
|
|
75
|
+
elevatedDragged: {
|
|
76
|
+
kGVxlE: "musaex-1ltemje",
|
|
77
|
+
$$css: true
|
|
78
|
+
},
|
|
79
|
+
filledDragged: {
|
|
80
|
+
kGVxlE: "musaex-15krw24",
|
|
41
81
|
$$css: true
|
|
42
82
|
}
|
|
43
83
|
},
|
|
@@ -50,7 +90,7 @@ var styles = {
|
|
|
50
90
|
kUltx: "musaex-177puvd",
|
|
51
91
|
$$css: true
|
|
52
92
|
},
|
|
53
|
-
|
|
93
|
+
press: {
|
|
54
94
|
kAcZsS: "musaex-6g40nx",
|
|
55
95
|
$$css: true
|
|
56
96
|
}
|
|
@@ -59,12 +99,21 @@ var styles = {
|
|
|
59
99
|
"default": {
|
|
60
100
|
k1xSpc: "musaex-78zum5",
|
|
61
101
|
kGNEyG: "musaex-6s0dn4",
|
|
62
|
-
kg3NbH: "musaex-1v4gb6w",
|
|
63
|
-
k8WAf4: "musaex-s7sbuz",
|
|
64
|
-
kpe85a: "musaex-15ebt9c",
|
|
65
102
|
kB7OPa: "musaex-9f619",
|
|
66
103
|
kzqmXN: "musaex-92755x",
|
|
67
|
-
|
|
104
|
+
kmuXW: "musaex-2lah0s",
|
|
105
|
+
kZCmMZ: "musaex-1ox7qdy",
|
|
106
|
+
kwRFfy: "musaex-epcfto",
|
|
107
|
+
k8WAf4: "musaex-s7sbuz",
|
|
108
|
+
kOIVth: "musaex-g4b44g",
|
|
109
|
+
$$css: true
|
|
110
|
+
},
|
|
111
|
+
stacked: {
|
|
112
|
+
$$css: true
|
|
113
|
+
},
|
|
114
|
+
horizontal: {
|
|
115
|
+
kmVPX3: "musaex-1atb43h",
|
|
116
|
+
kUk6DE: "musaex-5mp9sv",
|
|
68
117
|
$$css: true
|
|
69
118
|
}
|
|
70
119
|
},
|
|
@@ -111,15 +160,46 @@ var styles = {
|
|
|
111
160
|
$$css: true
|
|
112
161
|
}
|
|
113
162
|
},
|
|
163
|
+
headerAction: {
|
|
164
|
+
"default": {
|
|
165
|
+
k1xSpc: "musaex-78zum5",
|
|
166
|
+
kGNEyG: "musaex-6s0dn4",
|
|
167
|
+
kjj79g: "musaex-l56j7k",
|
|
168
|
+
kzqmXN: "musaex-1useyqa",
|
|
169
|
+
kZKoxP: "musaex-sdox4t",
|
|
170
|
+
kmuXW: "musaex-2lah0s",
|
|
171
|
+
kSGwAc: "musaex-kh2ocl",
|
|
172
|
+
$$css: true
|
|
173
|
+
}
|
|
174
|
+
},
|
|
114
175
|
media: {
|
|
115
176
|
"default": {
|
|
116
177
|
kVAEAm: "musaex-1n2onr6",
|
|
178
|
+
kVQacm: "musaex-b3r6kr",
|
|
179
|
+
$$css: true
|
|
180
|
+
},
|
|
181
|
+
stacked: {
|
|
117
182
|
kzqmXN: "musaex-92755x",
|
|
118
183
|
kUk6DE: "musaex-5mp9sv",
|
|
119
184
|
kAzted: "musaex-2lwn1j",
|
|
120
|
-
kVQacm: "musaex-b3r6kr",
|
|
121
185
|
$$css: true
|
|
122
|
-
}
|
|
186
|
+
},
|
|
187
|
+
horizontal: {
|
|
188
|
+
kzqmXN: "musaex-1dmp6jm",
|
|
189
|
+
kZKoxP: "musaex-qg7gut",
|
|
190
|
+
kUk6DE: "musaex-3psx0u",
|
|
191
|
+
kEafiO: "musaex-uvson1",
|
|
192
|
+
kWqL5O: "musaex-a640vs",
|
|
193
|
+
kt9PQ7: "musaex-d1xpcx",
|
|
194
|
+
kPef9Z: "musaex-13fuv20",
|
|
195
|
+
kSWEuD: "musaex-32b0ac",
|
|
196
|
+
kfdmCh: "musaex-1q0q8m5",
|
|
197
|
+
kLZC3w: "musaex-6ogecl",
|
|
198
|
+
k26BEO: "musaex-imfbgf",
|
|
199
|
+
kL6WhQ: "musaex-quqrak",
|
|
200
|
+
$$css: true
|
|
201
|
+
}
|
|
202
|
+
},
|
|
123
203
|
content: {
|
|
124
204
|
"default": {
|
|
125
205
|
k1xSpc: "musaex-78zum5",
|
|
@@ -131,6 +211,45 @@ var styles = {
|
|
|
131
211
|
$$css: true
|
|
132
212
|
}
|
|
133
213
|
},
|
|
214
|
+
headline: {
|
|
215
|
+
"default": {
|
|
216
|
+
k1xSpc: "musaex-78zum5",
|
|
217
|
+
kXwgrk: "musaex-dt5ytf",
|
|
218
|
+
kOIVth: "musaex-15wobh7",
|
|
219
|
+
kzqmXN: "musaex-92755x",
|
|
220
|
+
$$css: true
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
title: {
|
|
224
|
+
"default": {
|
|
225
|
+
kGuDYH: "musaex-1j61zf2",
|
|
226
|
+
k63SB2: "musaex-o1l8bm",
|
|
227
|
+
kLWn49: "musaex-1o2sk6j",
|
|
228
|
+
kb6lSQ: "musaex-bac8wx",
|
|
229
|
+
kMwMTN: "musaex-1j14bxn",
|
|
230
|
+
$$css: true
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
subhead: {
|
|
234
|
+
"default": {
|
|
235
|
+
kGuDYH: "musaex-if65rj",
|
|
236
|
+
k63SB2: "musaex-o1l8bm",
|
|
237
|
+
kLWn49: "musaex-1fc57z9",
|
|
238
|
+
kb6lSQ: "musaex-f4yft",
|
|
239
|
+
kMwMTN: "musaex-bq1wot",
|
|
240
|
+
$$css: true
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
body: {
|
|
244
|
+
"default": {
|
|
245
|
+
kGuDYH: "musaex-if65rj",
|
|
246
|
+
k63SB2: "musaex-o1l8bm",
|
|
247
|
+
kLWn49: "musaex-1fc57z9",
|
|
248
|
+
kb6lSQ: "musaex-f4yft",
|
|
249
|
+
kMwMTN: "musaex-bq1wot",
|
|
250
|
+
$$css: true
|
|
251
|
+
}
|
|
252
|
+
},
|
|
134
253
|
actions: {
|
|
135
254
|
"default": {
|
|
136
255
|
k1xSpc: "musaex-78zum5",
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var className = require('@aiszlab/relax/class-name');
|
|
8
|
+
var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
|
|
9
|
+
var useClassNames = require('../../hooks/use-class-names.cjs');
|
|
10
|
+
var context = require('./context.cjs');
|
|
11
|
+
var styles = require('./styles.cjs');
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* @zh 卡片 Subhead 文本(14px body/medium)。
|
|
15
|
+
* @en Card subhead text (14px body/medium).
|
|
16
|
+
*/
|
|
17
|
+
var CardSubhead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
18
|
+
var className$1 = _ref.className,
|
|
19
|
+
style = _ref.style,
|
|
20
|
+
children = _ref.children;
|
|
21
|
+
var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
|
|
22
|
+
var subheadStyled = stylex.props(styles.default.subhead["default"]);
|
|
23
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
24
|
+
ref: ref,
|
|
25
|
+
className: className.stringify(classNames.subhead, className$1, subheadStyled.className),
|
|
26
|
+
style: _objectSpread(_objectSpread({}, subheadStyled.style), style)
|
|
27
|
+
}, children);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
exports.default = CardSubhead;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { ReactNode, CSSProperties } from "react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* @zh 卡片 Subhead 文本(14px body/medium,on-surface-variant)
|
|
5
|
+
* @en Card subhead text (14px body/medium, on-surface-variant)
|
|
6
|
+
*/
|
|
7
|
+
interface CardSubheadProps {
|
|
8
|
+
className?: string;
|
|
9
|
+
style?: CSSProperties;
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* @zh 卡片 Subhead 文本(14px body/medium)。
|
|
14
|
+
* @en Card subhead text (14px body/medium).
|
|
15
|
+
*/
|
|
16
|
+
declare const CardSubhead: React.ForwardRefExoticComponent<CardSubheadProps & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
export default CardSubhead;
|
|
18
|
+
export type { CardSubheadProps };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
|
+
import { stringify } from '@aiszlab/relax/class-name';
|
|
4
|
+
import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
|
|
5
|
+
import { useClassNames } from '../../hooks/use-class-names.mjs';
|
|
6
|
+
import { CLASS_NAMES } from './context.mjs';
|
|
7
|
+
import styles from './styles.mjs';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* @zh 卡片 Subhead 文本(14px body/medium)。
|
|
11
|
+
* @en Card subhead text (14px body/medium).
|
|
12
|
+
*/
|
|
13
|
+
var CardSubhead = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
14
|
+
var className = _ref.className,
|
|
15
|
+
style = _ref.style,
|
|
16
|
+
children = _ref.children;
|
|
17
|
+
var classNames = useClassNames(CLASS_NAMES);
|
|
18
|
+
var subheadStyled = props(styles.subhead["default"]);
|
|
19
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
20
|
+
ref: ref,
|
|
21
|
+
className: stringify(classNames.subhead, className, subheadStyled.className),
|
|
22
|
+
style: _objectSpread(_objectSpread({}, subheadStyled.style), style)
|
|
23
|
+
}, children);
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
export { CardSubhead as default };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var className = require('@aiszlab/relax/class-name');
|
|
8
|
+
var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
|
|
9
|
+
var useClassNames = require('../../hooks/use-class-names.cjs');
|
|
10
|
+
var context = require('./context.cjs');
|
|
11
|
+
var styles = require('./styles.cjs');
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* @zh 卡片 Title 文本(16px body/large)。
|
|
15
|
+
* @en Card title text (16px body/large).
|
|
16
|
+
*/
|
|
17
|
+
var CardTitle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
18
|
+
var className$1 = _ref.className,
|
|
19
|
+
style = _ref.style,
|
|
20
|
+
children = _ref.children;
|
|
21
|
+
var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
|
|
22
|
+
var titleStyled = stylex.props(styles.default.title["default"]);
|
|
23
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
24
|
+
ref: ref,
|
|
25
|
+
className: className.stringify(classNames.title, className$1, titleStyled.className),
|
|
26
|
+
style: _objectSpread(_objectSpread({}, titleStyled.style), style)
|
|
27
|
+
}, children);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
exports.default = CardTitle;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { ReactNode, CSSProperties } from "react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* @zh 卡片 Title 文本(16px body/large)
|
|
5
|
+
* @en Card title text (16px body/large)
|
|
6
|
+
*/
|
|
7
|
+
interface CardTitleProps {
|
|
8
|
+
className?: string;
|
|
9
|
+
style?: CSSProperties;
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* @zh 卡片 Title 文本(16px body/large)。
|
|
14
|
+
* @en Card title text (16px body/large).
|
|
15
|
+
*/
|
|
16
|
+
declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
export default CardTitle;
|
|
18
|
+
export type { CardTitleProps };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
|
+
import { stringify } from '@aiszlab/relax/class-name';
|
|
4
|
+
import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
|
|
5
|
+
import { useClassNames } from '../../hooks/use-class-names.mjs';
|
|
6
|
+
import { CLASS_NAMES } from './context.mjs';
|
|
7
|
+
import styles from './styles.mjs';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* @zh 卡片 Title 文本(16px body/large)。
|
|
11
|
+
* @en Card title text (16px body/large).
|
|
12
|
+
*/
|
|
13
|
+
var CardTitle = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
14
|
+
var className = _ref.className,
|
|
15
|
+
style = _ref.style,
|
|
16
|
+
children = _ref.children;
|
|
17
|
+
var classNames = useClassNames(CLASS_NAMES);
|
|
18
|
+
var titleStyled = props(styles.title["default"]);
|
|
19
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
20
|
+
ref: ref,
|
|
21
|
+
className: stringify(classNames.title, className, titleStyled.className),
|
|
22
|
+
style: _objectSpread(_objectSpread({}, titleStyled.style), style)
|
|
23
|
+
}, children);
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
export { CardTitle as default };
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import { ValueOf } from "@aiszlab/relax/types";
|
|
2
2
|
/**
|
|
3
3
|
* @description
|
|
4
|
-
*
|
|
4
|
+
* M3 规范的 elevation token:
|
|
5
|
+
* - 0: 无阴影
|
|
6
|
+
* - 1-4: M3 elevation level 1-4
|
|
7
|
+
* - xsmall/small/medium/large/xlarge: 旧版通用 token,保留以兼容
|
|
5
8
|
*/
|
|
6
9
|
export declare const elevations: import("@stylexjs/stylex").VarGroup<Readonly<{
|
|
10
|
+
0: string;
|
|
11
|
+
1: string;
|
|
7
12
|
none: string;
|
|
13
|
+
2: string;
|
|
14
|
+
3: string;
|
|
15
|
+
4: string;
|
|
8
16
|
xsmall: string;
|
|
9
17
|
small: string;
|
|
10
18
|
medium: string;
|
package/dist/styles.css
CHANGED
|
@@ -235,6 +235,10 @@
|
|
|
235
235
|
border-style: solid;
|
|
236
236
|
}
|
|
237
237
|
|
|
238
|
+
.musaex-c342km {
|
|
239
|
+
border-width: 0;
|
|
240
|
+
}
|
|
241
|
+
|
|
238
242
|
.musaex-1litavf {
|
|
239
243
|
border-width: var(--border-width);
|
|
240
244
|
}
|
|
@@ -251,6 +255,10 @@
|
|
|
251
255
|
border-width: var(--musaex-mw242b);
|
|
252
256
|
}
|
|
253
257
|
|
|
258
|
+
.musaex-3psx0u {
|
|
259
|
+
flex: none;
|
|
260
|
+
}
|
|
261
|
+
|
|
254
262
|
.musaex-aovyj7 {
|
|
255
263
|
flex: 0 0 var(--span);
|
|
256
264
|
}
|
|
@@ -784,10 +792,26 @@
|
|
|
784
792
|
box-shadow: var(--musaex-124bxhv);
|
|
785
793
|
}
|
|
786
794
|
|
|
795
|
+
.musaex-1ltemje {
|
|
796
|
+
box-shadow: var(--musaex-14r7dmv);
|
|
797
|
+
}
|
|
798
|
+
|
|
787
799
|
.musaex-bapks6 {
|
|
788
800
|
box-shadow: var(--musaex-1ax77re);
|
|
789
801
|
}
|
|
790
802
|
|
|
803
|
+
.musaex-vkh6yx {
|
|
804
|
+
box-shadow: var(--musaex-1bann2b);
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
.musaex-1tw10uf {
|
|
808
|
+
box-shadow: var(--musaex-1dem7f);
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.musaex-15krw24 {
|
|
812
|
+
box-shadow: var(--musaex-1xue9qe);
|
|
813
|
+
}
|
|
814
|
+
|
|
791
815
|
.musaex-9f619 {
|
|
792
816
|
box-sizing: border-box;
|
|
793
817
|
}
|
|
@@ -1380,6 +1404,10 @@
|
|
|
1380
1404
|
padding-inline-start: calc(var(--musaex-qe7ci9) + var(--musaex-1035pbm) * 4);
|
|
1381
1405
|
}
|
|
1382
1406
|
|
|
1407
|
+
.musaex-1ox7qdy {
|
|
1408
|
+
padding-inline-start: var(--musaex-14eq97i);
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1383
1411
|
.musaex-1rl4tsp {
|
|
1384
1412
|
padding-inline-start: var(--musaex-16072l3);
|
|
1385
1413
|
}
|
|
@@ -1580,10 +1608,6 @@
|
|
|
1580
1608
|
transition-property: background-color, border, color;
|
|
1581
1609
|
}
|
|
1582
1610
|
|
|
1583
|
-
.musaex-1ijdko7 {
|
|
1584
|
-
transition-property: background-color, box-shadow, border-color;
|
|
1585
|
-
}
|
|
1586
|
-
|
|
1587
1611
|
.musaex-1yyhn7k {
|
|
1588
1612
|
transition-property: background-color, color, box-shadow;
|
|
1589
1613
|
}
|
|
@@ -1592,6 +1616,10 @@
|
|
|
1592
1616
|
transition-property: background-color;
|
|
1593
1617
|
}
|
|
1594
1618
|
|
|
1619
|
+
.musaex-f1bglv {
|
|
1620
|
+
transition-property: box-shadow, background-color, border-color;
|
|
1621
|
+
}
|
|
1622
|
+
|
|
1595
1623
|
.musaex-15wldfd {
|
|
1596
1624
|
transition-property: box-shadow, background-color;
|
|
1597
1625
|
}
|
|
@@ -1881,6 +1909,14 @@
|
|
|
1881
1909
|
border-bottom-width: var(--musaex-1xf102v);
|
|
1882
1910
|
}
|
|
1883
1911
|
|
|
1912
|
+
.musaex-imfbgf {
|
|
1913
|
+
border-right-color: var(--color-outline-variant);
|
|
1914
|
+
}
|
|
1915
|
+
|
|
1916
|
+
.musaex-32b0ac {
|
|
1917
|
+
border-right-style: solid;
|
|
1918
|
+
}
|
|
1919
|
+
|
|
1884
1920
|
.musaex-a640vs {
|
|
1885
1921
|
border-right-width: var(--musaex-1xf102v);
|
|
1886
1922
|
}
|
|
@@ -1969,6 +2005,10 @@
|
|
|
1969
2005
|
height: 24px;
|
|
1970
2006
|
}
|
|
1971
2007
|
|
|
2008
|
+
.musaex-sdox4t {
|
|
2009
|
+
height: 48px;
|
|
2010
|
+
}
|
|
2011
|
+
|
|
1972
2012
|
.musaex-t7dq6l {
|
|
1973
2013
|
height: auto;
|
|
1974
2014
|
}
|
|
@@ -2189,10 +2229,6 @@
|
|
|
2189
2229
|
min-height: 0;
|
|
2190
2230
|
}
|
|
2191
2231
|
|
|
2192
|
-
.musaex-1qafhyn {
|
|
2193
|
-
min-height: 72px;
|
|
2194
|
-
}
|
|
2195
|
-
|
|
2196
2232
|
.musaex-epu74c {
|
|
2197
2233
|
min-height: var(--musaex-10wwlfh);
|
|
2198
2234
|
}
|
|
@@ -2325,10 +2361,6 @@
|
|
|
2325
2361
|
padding-right: var(--musaex-14eq97i);
|
|
2326
2362
|
}
|
|
2327
2363
|
|
|
2328
|
-
.musaex-15ebt9c {
|
|
2329
|
-
padding-right: var(--musaex-16072l3);
|
|
2330
|
-
}
|
|
2331
|
-
|
|
2332
2364
|
.musaex-9y2cgd {
|
|
2333
2365
|
padding-right: var(--musaex-1vpnstl);
|
|
2334
2366
|
}
|
|
@@ -2397,10 +2429,18 @@
|
|
|
2397
2429
|
width: 24px;
|
|
2398
2430
|
}
|
|
2399
2431
|
|
|
2432
|
+
.musaex-1useyqa {
|
|
2433
|
+
width: 48px;
|
|
2434
|
+
}
|
|
2435
|
+
|
|
2400
2436
|
.musaex-14rvwrp {
|
|
2401
2437
|
width: 600px;
|
|
2402
2438
|
}
|
|
2403
2439
|
|
|
2440
|
+
.musaex-1dmp6jm {
|
|
2441
|
+
width: 80px;
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2404
2444
|
.musaex-o4cs04 {
|
|
2405
2445
|
width: calc((100% - (var(--columns) - 1) * var(--column-gap)) / var(--columns));
|
|
2406
2446
|
}
|
|
@@ -2629,8 +2669,8 @@
|
|
|
2629
2669
|
animation-timing-function: linear;
|
|
2630
2670
|
}
|
|
2631
2671
|
|
|
2632
|
-
.musaex-
|
|
2633
|
-
background-color:
|
|
2672
|
+
.musaex-86grr:after {
|
|
2673
|
+
background-color: var(--card-state-layer, transparent);
|
|
2634
2674
|
}
|
|
2635
2675
|
|
|
2636
2676
|
.musaex-1l043wi:before {
|
|
@@ -3273,15 +3313,6 @@
|
|
|
3273
3313
|
--musaex-1aqg0g1: 1s;
|
|
3274
3314
|
}
|
|
3275
3315
|
|
|
3276
|
-
:root, .musaex-gtkjbd {
|
|
3277
|
-
--musaex-1ueuqz2: none;
|
|
3278
|
-
--musaex-1ax77re: #0003 0px 2px 1px -1px, #00000024 0px 1px 1px 0px, #0000001f 0px 1px 3px 0px;
|
|
3279
|
-
--musaex-124bxhv: #0003 0px 3px 3px -2px, #00000024 0px 3px 4px 0px, #0000001f 0px 1px 8px 0px;
|
|
3280
|
-
--musaex-blb018: #0003 0px 3px 5px -1px, #00000024 0px 6px 10px 0px, #0000001f 0px 1px 18px 0px;
|
|
3281
|
-
--musaex-j9kthj: #0003 0px 5px 5px -3px, #00000024 0px 8px 10px 1px, #0000001f 0px 3px 14px 2px;
|
|
3282
|
-
--musaex-1h5b470: #0003 0px 7px 8px -4px, #00000024 0px 12px 17px 2px, #0000001f 0px 5px 22px 4px;
|
|
3283
|
-
}
|
|
3284
|
-
|
|
3285
3316
|
:root, .musaex-kg7w83 {
|
|
3286
3317
|
--musaex-mw242b: 0px;
|
|
3287
3318
|
--musaex-1xf102v: 1px;
|
|
@@ -3317,6 +3348,20 @@
|
|
|
3317
3348
|
--musaex-eliz3k: fit-content;
|
|
3318
3349
|
}
|
|
3319
3350
|
|
|
3351
|
+
:root, .musaex-gtkjbd {
|
|
3352
|
+
--musaex-t6xqpa: none;
|
|
3353
|
+
--musaex-1dem7f: 0px 1px 2px 0px #0000004d, 0px 1px 3px 1px #00000026;
|
|
3354
|
+
--musaex-1bann2b: 0px 1px 2px 0px #0000004d, 0px 2px 6px 2px #00000026;
|
|
3355
|
+
--musaex-1xue9qe: 0px 1px 3px 0px #0000004d, 0px 4px 8px 3px #00000026;
|
|
3356
|
+
--musaex-14r7dmv: 0px 2px 3px 0px #0000004d, 0px 6px 10px 4px #00000026;
|
|
3357
|
+
--musaex-1ueuqz2: none;
|
|
3358
|
+
--musaex-1ax77re: #0003 0px 2px 1px -1px, #00000024 0px 1px 1px 0px, #0000001f 0px 1px 3px 0px;
|
|
3359
|
+
--musaex-124bxhv: #0003 0px 3px 3px -2px, #00000024 0px 3px 4px 0px, #0000001f 0px 1px 8px 0px;
|
|
3360
|
+
--musaex-blb018: #0003 0px 3px 5px -1px, #00000024 0px 6px 10px 0px, #0000001f 0px 1px 18px 0px;
|
|
3361
|
+
--musaex-j9kthj: #0003 0px 5px 5px -3px, #00000024 0px 8px 10px 1px, #0000001f 0px 3px 14px 2px;
|
|
3362
|
+
--musaex-1h5b470: #0003 0px 7px 8px -4px, #00000024 0px 12px 17px 2px, #0000001f 0px 5px 22px 4px;
|
|
3363
|
+
}
|
|
3364
|
+
|
|
3320
3365
|
.musaex-omsca5 {
|
|
3321
3366
|
--border-width: var(--musaex-1035pbm);
|
|
3322
3367
|
}
|
package/dist/types/card.d.ts
CHANGED
|
@@ -1,10 +1,19 @@
|
|
|
1
|
-
import type { ReactNode, MouseEvent } from "react";
|
|
1
|
+
import type { ReactNode, MouseEvent, DragEvent } from "react";
|
|
2
2
|
import type { ComponentProps } from "./element";
|
|
3
3
|
/**
|
|
4
4
|
* @zh 卡片样式变体
|
|
5
5
|
* @en Card style variant
|
|
6
6
|
*/
|
|
7
7
|
export type CardVariant = "outlined" | "elevated" | "filled";
|
|
8
|
+
/**
|
|
9
|
+
* @zh 卡片布局变体
|
|
10
|
+
* - `stacked`: 垂直堆叠(Header 在上,Media 在中,Content/Actions 在下)
|
|
11
|
+
* - `horizontal`: 水平排布(Header 在左,Media 在右,固定 80px 高)
|
|
12
|
+
* @en Card layout variant
|
|
13
|
+
* - `stacked`: vertical stack (Header on top, Media in middle, Content/Actions at bottom)
|
|
14
|
+
* - `horizontal`: horizontal layout (Header on left, Media on right, fixed 80px height)
|
|
15
|
+
*/
|
|
16
|
+
export type CardLayout = "stacked" | "horizontal";
|
|
8
17
|
/**
|
|
9
18
|
* @zh 卡片组件属性
|
|
10
19
|
* @en Card component props
|
|
@@ -16,13 +25,19 @@ export interface CardProps extends ComponentProps {
|
|
|
16
25
|
* @default "outlined"
|
|
17
26
|
*/
|
|
18
27
|
variant?: CardVariant;
|
|
28
|
+
/**
|
|
29
|
+
* @zh 卡片布局变体
|
|
30
|
+
* @en Card layout variant
|
|
31
|
+
* @default "stacked"
|
|
32
|
+
*/
|
|
33
|
+
layout?: CardLayout;
|
|
19
34
|
/**
|
|
20
35
|
* @zh 卡片内容
|
|
21
36
|
* @en Card content
|
|
22
37
|
*/
|
|
23
38
|
children?: ReactNode;
|
|
24
39
|
/**
|
|
25
|
-
* @zh
|
|
40
|
+
* @zh 点击事件处理函数,设置后卡片将展示交互状态层
|
|
26
41
|
* @en Click handler, when set the card will show interaction state layers
|
|
27
42
|
*/
|
|
28
43
|
onClick?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
@@ -32,4 +47,26 @@ export interface CardProps extends ComponentProps {
|
|
|
32
47
|
* @default false
|
|
33
48
|
*/
|
|
34
49
|
disabled?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* @zh 拖拽中状态(16% state layer + 提升 elevation),可通过 `draggable` 自动检测或手动控制
|
|
52
|
+
* @en Dragged state (16% state layer + raised elevation), can be auto-detected via `draggable` or controlled manually
|
|
53
|
+
* @default false
|
|
54
|
+
*/
|
|
55
|
+
dragged?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* @zh 启用 HTML5 拖拽事件自动检测 dragged 状态。设置为 true 时,组件会监听 onDragStart/onDragEnd 自动切换 dragged。
|
|
58
|
+
* @en Enable HTML5 drag events to auto-detect dragged state. When true, the component listens to onDragStart/onDragEnd to toggle dragged.
|
|
59
|
+
* @default false
|
|
60
|
+
*/
|
|
61
|
+
draggable?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* @zh 拖拽开始事件
|
|
64
|
+
* @en Drag start event handler
|
|
65
|
+
*/
|
|
66
|
+
onDragStart?: (event: DragEvent<HTMLDivElement>) => void;
|
|
67
|
+
/**
|
|
68
|
+
* @zh 拖拽结束事件
|
|
69
|
+
* @en Drag end event handler
|
|
70
|
+
*/
|
|
71
|
+
onDragEnd?: (event: DragEvent<HTMLDivElement>) => void;
|
|
35
72
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "musae",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "musae-ui",
|
|
5
5
|
"author": "tutu@fantufantu.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -135,8 +135,6 @@
|
|
|
135
135
|
"dev": "rollup -c -w --environment NODE_ENV:development",
|
|
136
136
|
"build": "z rm dist && rollup -c --environment NODE_ENV:production",
|
|
137
137
|
"authors": "zx scripts/contributors.mjs",
|
|
138
|
-
"changesets": "z cs",
|
|
139
|
-
"version": "z cs version",
|
|
140
138
|
"storybook": "pnpm run build && storybook dev -p 6006",
|
|
141
139
|
"build-storybook": "storybook build",
|
|
142
140
|
"lint": "eslint ."
|