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.
Files changed (40) hide show
  1. package/dist/components/card/actions.cjs +31 -0
  2. package/dist/components/card/actions.d.ts +31 -0
  3. package/dist/components/card/actions.mjs +27 -0
  4. package/dist/components/card/body.cjs +30 -0
  5. package/dist/components/card/body.d.ts +18 -0
  6. package/dist/components/card/body.mjs +26 -0
  7. package/dist/components/card/card.cjs +76 -140
  8. package/dist/components/card/card.d.ts +23 -150
  9. package/dist/components/card/card.mjs +67 -135
  10. package/dist/components/card/content.cjs +33 -0
  11. package/dist/components/card/content.d.ts +33 -0
  12. package/dist/components/card/content.mjs +29 -0
  13. package/dist/components/card/context.cjs +14 -1
  14. package/dist/components/card/context.d.ts +15 -1
  15. package/dist/components/card/context.mjs +13 -2
  16. package/dist/components/card/header.cjs +79 -0
  17. package/dist/components/card/header.d.ts +58 -0
  18. package/dist/components/card/header.mjs +75 -0
  19. package/dist/components/card/headline.cjs +30 -0
  20. package/dist/components/card/headline.d.ts +18 -0
  21. package/dist/components/card/headline.mjs +26 -0
  22. package/dist/components/card/index.d.ts +1 -1
  23. package/dist/components/card/media.cjs +50 -0
  24. package/dist/components/card/media.d.ts +42 -0
  25. package/dist/components/card/media.mjs +46 -0
  26. package/dist/components/card/styles.cjs +133 -14
  27. package/dist/components/card/styles.d.ts +88 -28
  28. package/dist/components/card/styles.mjs +133 -14
  29. package/dist/components/card/subhead.cjs +30 -0
  30. package/dist/components/card/subhead.d.ts +18 -0
  31. package/dist/components/card/subhead.mjs +26 -0
  32. package/dist/components/card/title.cjs +30 -0
  33. package/dist/components/card/title.d.ts +18 -0
  34. package/dist/components/card/title.mjs +26 -0
  35. package/dist/components/theme/tokens.stylex.cjs +4 -1
  36. package/dist/components/theme/tokens.stylex.d.ts +9 -1
  37. package/dist/components/theme/tokens.stylex.mjs +4 -1
  38. package/dist/styles.css +68 -23
  39. package/dist/types/card.d.ts +39 -2
  40. 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-1ijdko7",
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
- ks3ayO: "musaex-yhc2n1",
46
+ kGVxlE: "musaex-1gnnqk1",
28
47
  $$css: true
29
48
  },
30
49
  elevated: {
31
50
  kWkggS: "musaex-1eai1fy",
32
- kMzoRj: "musaex-k59kd",
33
- kGVxlE: "musaex-bapks6",
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-k59kd",
40
- ks3ayO: "musaex-yhc2n1",
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
- active: {
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
- kAzted: "musaex-1qafhyn",
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 };
@@ -2,7 +2,10 @@
2
2
 
3
3
  /**
4
4
  * @description
5
- * elevations
5
+ * M3 规范的 elevation token:
6
+ * - 0: 无阴影
7
+ * - 1-4: M3 elevation level 1-4
8
+ * - xsmall/small/medium/large/xlarge: 旧版通用 token,保留以兼容
6
9
  */
7
10
  /**
8
11
  * @description
@@ -1,10 +1,18 @@
1
1
  import { ValueOf } from "@aiszlab/relax/types";
2
2
  /**
3
3
  * @description
4
- * elevations
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;
@@ -1,6 +1,9 @@
1
1
  /**
2
2
  * @description
3
- * elevations
3
+ * M3 规范的 elevation token:
4
+ * - 0: 无阴影
5
+ * - 1-4: M3 elevation level 1-4
6
+ * - xsmall/small/medium/large/xlarge: 旧版通用 token,保留以兼容
4
7
  */
5
8
  /**
6
9
  * @description
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-yhc2n1:after {
2633
- background-color: #0000;
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
  }
@@ -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.2.0",
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 ."