@fangxinyan/lumina 0.6.5 → 0.6.7

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.
@@ -5,6 +5,12 @@
5
5
  box-shadow: var(--neu-shadow-panel);
6
6
  padding: var(--gap-5);
7
7
  }
8
+ .card.fill {
9
+ display: flex;
10
+ flex-direction: column;
11
+ min-height: 0;
12
+ height: 100%;
13
+ }
8
14
  .card.flat { box-shadow: var(--neu-shadow-subtle); }
9
15
  .card.sunken { box-shadow: var(--neu-shadow-inset-strong); }
10
16
  .card.pad-none { padding: 0; }
@@ -30,4 +36,38 @@
30
36
  .card-title { font-size: 15px; font-weight: 600; }
31
37
  .card-desc { font-size: 12px; color: var(--fg-muted); }
32
38
  .card-actions { display: flex; gap: 6px; }
33
- .card-body { font-size: 13px; }
39
+ .card-body {
40
+ font-size: 13px;
41
+ min-width: 0;
42
+ position: relative;
43
+ }
44
+ .card-body.body-stack {
45
+ display: flex;
46
+ flex-direction: column;
47
+ gap: var(--gap-3);
48
+ }
49
+ .card-body.body-fill {
50
+ display: flex;
51
+ flex: 1;
52
+ flex-direction: column;
53
+ min-height: 0;
54
+ }
55
+ .card-body.body-center {
56
+ display: grid;
57
+ place-items: center;
58
+ }
59
+ .card-body.loading {
60
+ pointer-events: none;
61
+ }
62
+
63
+ .card-loading-overlay {
64
+ position: absolute;
65
+ inset: calc(var(--gap-2) * -1);
66
+ border-radius: var(--r-md);
67
+ display: grid;
68
+ place-items: center;
69
+ background: color-mix(in oklch, var(--bg) 82%, transparent);
70
+ box-shadow: var(--neu-shadow-inset);
71
+ color: var(--fg-muted);
72
+ z-index: 1;
73
+ }
package/dist/Card.cjs CHANGED
@@ -1,10 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var chunkCBKJXKVI_cjs = require('./chunk-CBKJXKVI.cjs');
3
+ var chunkWHXSUPJB_cjs = require('./chunk-WHXSUPJB.cjs');
4
+ require('./chunk-SG42F5VB.cjs');
4
5
 
5
6
 
6
7
 
7
8
  Object.defineProperty(exports, "Card", {
8
9
  enumerable: true,
9
- get: function () { return chunkCBKJXKVI_cjs.Card; }
10
+ get: function () { return chunkWHXSUPJB_cjs.Card; }
10
11
  });
package/dist/Card.d.cts CHANGED
@@ -1,5 +1,9 @@
1
1
  import * as React from 'react';
2
2
 
3
+ type DataAttributes = {
4
+ [K in `data-${string}`]?: string | number | boolean | undefined;
5
+ };
6
+ type CardBodyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className" | "style"> & DataAttributes;
3
7
  interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
4
8
  /** Visual variant. `raised` protrudes; `sunken` recesses; `flat` is subtle. */
5
9
  variant?: "raised" | "sunken" | "flat";
@@ -13,6 +17,20 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
13
17
  description?: React.ReactNode;
14
18
  /** Action slot aligned to the card heading. */
15
19
  actions?: React.ReactNode;
20
+ /** Make the card and its body fill the available height. */
21
+ fill?: boolean;
22
+ /** Body layout strategy. */
23
+ bodyLayout?: "block" | "stack" | "fill" | "center";
24
+ /** Class name forwarded to the card body wrapper. */
25
+ bodyClassName?: string;
26
+ /** Inline style forwarded to the card body wrapper. */
27
+ bodyStyle?: React.CSSProperties;
28
+ /** Extra DOM props forwarded to the card body wrapper. */
29
+ bodyProps?: CardBodyProps;
30
+ /** Show a built-in loading overlay above the body content. */
31
+ loading?: boolean;
32
+ /** Custom overlay content shown while `loading` is true. */
33
+ loadingOverlay?: React.ReactNode;
16
34
  children?: React.ReactNode;
17
35
  }
18
36
  /**
package/dist/Card.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  import * as React from 'react';
2
2
 
3
+ type DataAttributes = {
4
+ [K in `data-${string}`]?: string | number | boolean | undefined;
5
+ };
6
+ type CardBodyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className" | "style"> & DataAttributes;
3
7
  interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
4
8
  /** Visual variant. `raised` protrudes; `sunken` recesses; `flat` is subtle. */
5
9
  variant?: "raised" | "sunken" | "flat";
@@ -13,6 +17,20 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
13
17
  description?: React.ReactNode;
14
18
  /** Action slot aligned to the card heading. */
15
19
  actions?: React.ReactNode;
20
+ /** Make the card and its body fill the available height. */
21
+ fill?: boolean;
22
+ /** Body layout strategy. */
23
+ bodyLayout?: "block" | "stack" | "fill" | "center";
24
+ /** Class name forwarded to the card body wrapper. */
25
+ bodyClassName?: string;
26
+ /** Inline style forwarded to the card body wrapper. */
27
+ bodyStyle?: React.CSSProperties;
28
+ /** Extra DOM props forwarded to the card body wrapper. */
29
+ bodyProps?: CardBodyProps;
30
+ /** Show a built-in loading overlay above the body content. */
31
+ loading?: boolean;
32
+ /** Custom overlay content shown while `loading` is true. */
33
+ loadingOverlay?: React.ReactNode;
16
34
  children?: React.ReactNode;
17
35
  }
18
36
  /**
package/dist/Card.js CHANGED
@@ -1 +1,2 @@
1
- export { Card } from './chunk-WEJKY3DF.js';
1
+ export { Card } from './chunk-J7EQJXSJ.js';
2
+ import './chunk-Y5F7ZTBH.js';
package/dist/Modal.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunkGBKUGKIY_cjs = require('./chunk-GBKUGKIY.cjs');
3
+ var chunk5PR7UWIZ_cjs = require('./chunk-5PR7UWIZ.cjs');
4
4
  require('./chunk-2ZADGBUN.cjs');
5
5
  require('./chunk-6LARTGLP.cjs');
6
6
 
@@ -8,5 +8,5 @@ require('./chunk-6LARTGLP.cjs');
8
8
 
9
9
  Object.defineProperty(exports, "Modal", {
10
10
  enumerable: true,
11
- get: function () { return chunkGBKUGKIY_cjs.Modal; }
11
+ get: function () { return chunk5PR7UWIZ_cjs.Modal; }
12
12
  });
package/dist/Modal.d.cts CHANGED
@@ -3,6 +3,10 @@ import { ButtonProps } from './Button.cjs';
3
3
  import './Icon.cjs';
4
4
  import 'react/jsx-runtime';
5
5
 
6
+ type DataAttributes = {
7
+ [K in `data-${string}`]?: string | number | boolean | undefined;
8
+ };
9
+ type ModalBodyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className" | "style"> & DataAttributes;
6
10
  interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "children" | "onClose"> {
7
11
  /** Whether the modal is visible. */
8
12
  open: boolean;
@@ -39,6 +43,14 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
39
43
  cancelButtonProps?: Partial<ButtonProps>;
40
44
  /** Show a spinner on the OK button (e.g. while an async submit is running). */
41
45
  confirmLoading?: boolean;
46
+ /** Class name forwarded to the modal body wrapper. */
47
+ bodyClassName?: string;
48
+ /** Inline style forwarded to the modal body wrapper. */
49
+ bodyStyle?: React.CSSProperties;
50
+ /** Extra DOM props forwarded to the modal body wrapper. */
51
+ bodyProps?: ModalBodyProps;
52
+ /** Convenience overflow control for the body wrapper. */
53
+ bodyOverflow?: React.CSSProperties["overflow"];
42
54
  /**
43
55
  * When true the modal's children are unmounted every time it closes.
44
56
  * Default `false` — children stay mounted so internal state survives
package/dist/Modal.d.ts CHANGED
@@ -3,6 +3,10 @@ import { ButtonProps } from './Button.js';
3
3
  import './Icon.js';
4
4
  import 'react/jsx-runtime';
5
5
 
6
+ type DataAttributes = {
7
+ [K in `data-${string}`]?: string | number | boolean | undefined;
8
+ };
9
+ type ModalBodyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className" | "style"> & DataAttributes;
6
10
  interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "children" | "onClose"> {
7
11
  /** Whether the modal is visible. */
8
12
  open: boolean;
@@ -39,6 +43,14 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
39
43
  cancelButtonProps?: Partial<ButtonProps>;
40
44
  /** Show a spinner on the OK button (e.g. while an async submit is running). */
41
45
  confirmLoading?: boolean;
46
+ /** Class name forwarded to the modal body wrapper. */
47
+ bodyClassName?: string;
48
+ /** Inline style forwarded to the modal body wrapper. */
49
+ bodyStyle?: React.CSSProperties;
50
+ /** Extra DOM props forwarded to the modal body wrapper. */
51
+ bodyProps?: ModalBodyProps;
52
+ /** Convenience overflow control for the body wrapper. */
53
+ bodyOverflow?: React.CSSProperties["overflow"];
42
54
  /**
43
55
  * When true the modal's children are unmounted every time it closes.
44
56
  * Default `false` — children stay mounted so internal state survives
package/dist/Modal.js CHANGED
@@ -1,3 +1,3 @@
1
- export { Modal } from './chunk-OHIFKN4E.js';
1
+ export { Modal } from './chunk-N4USDBY2.js';
2
2
  import './chunk-CNGKJYGZ.js';
3
3
  import './chunk-YT5NLCRC.js';
@@ -11,6 +11,7 @@
11
11
  grid-template-columns: 1fr auto 1fr;
12
12
  gap: 0 var(--gap-3);
13
13
  min-height: 60px;
14
+ min-width: 0;
14
15
  position: relative;
15
16
  }
16
17
 
@@ -78,7 +79,7 @@
78
79
  justify-content: center;
79
80
  position: relative;
80
81
  z-index: 1;
81
- margin-top: 4px;
82
+ margin-top: var(--timeline-dot-offset, 4px);
82
83
  }
83
84
 
84
85
  .timeline-item-dot.accent { background: var(--accent); }
@@ -108,6 +109,7 @@
108
109
  .timeline-item-content {
109
110
  padding-bottom: var(--gap-5);
110
111
  line-height: 1.6;
112
+ min-width: var(--timeline-content-min-width, 0);
111
113
  }
112
114
  .timeline-item-last .timeline-item-content {
113
115
  padding-bottom: 0;
@@ -118,6 +120,7 @@
118
120
  line-height: 1.6;
119
121
  color: var(--fg-muted);
120
122
  font-size: 13px;
123
+ min-width: 0;
121
124
  }
122
125
 
123
126
  /* ---- Pending animation ---- */
package/dist/Timeline.cjs CHANGED
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var chunkBJ6WUVEG_cjs = require('./chunk-BJ6WUVEG.cjs');
3
+ var chunkPVOQWCP2_cjs = require('./chunk-PVOQWCP2.cjs');
4
4
  require('./chunk-SG42F5VB.cjs');
5
5
 
6
6
 
7
7
 
8
8
  Object.defineProperty(exports, "Timeline", {
9
9
  enumerable: true,
10
- get: function () { return chunkBJ6WUVEG_cjs.Timeline; }
10
+ get: function () { return chunkPVOQWCP2_cjs.Timeline; }
11
11
  });
@@ -11,6 +11,22 @@ interface TimelineItemConfig {
11
11
  color?: "accent" | "success" | "warning" | "danger" | "info" | "muted";
12
12
  /** Custom dot content (replaces default dot) */
13
13
  dot?: React.ReactNode;
14
+ /** Class name forwarded to the item wrapper. */
15
+ className?: string;
16
+ /** Inline style forwarded to the item wrapper. */
17
+ style?: React.CSSProperties;
18
+ /** Class name forwarded to the content wrapper. */
19
+ contentClassName?: string;
20
+ /** Inline style forwarded to the content wrapper. */
21
+ contentStyle?: React.CSSProperties;
22
+ /** Class name forwarded to the dot wrapper. */
23
+ dotClassName?: string;
24
+ /** Inline style forwarded to the dot wrapper. */
25
+ dotStyle?: React.CSSProperties;
26
+ /** Class name forwarded to the label wrapper. */
27
+ labelClassName?: string;
28
+ /** Inline style forwarded to the label wrapper. */
29
+ labelStyle?: React.CSSProperties;
14
30
  }
15
31
  interface TimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
16
32
  /** Timeline items */
@@ -26,6 +42,28 @@ interface TimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
26
42
  mode?: "left" | "right" | "alternate";
27
43
  /** Reverse the order of items */
28
44
  reverse?: boolean;
45
+ /** Class name forwarded to every item wrapper. */
46
+ itemClassName?: string;
47
+ /** Inline style forwarded to every item wrapper. */
48
+ itemStyle?: React.CSSProperties;
49
+ /** Class name forwarded to every content wrapper. */
50
+ contentClassName?: string;
51
+ /** Inline style forwarded to every content wrapper. */
52
+ contentStyle?: React.CSSProperties;
53
+ /** Minimum width for every content wrapper. Defaults to `0` so flex/grid children can shrink. */
54
+ contentMinWidth?: React.CSSProperties["minWidth"];
55
+ /** Class name forwarded to every dot wrapper. */
56
+ dotClassName?: string;
57
+ /** Inline style forwarded to every dot wrapper. */
58
+ dotStyle?: React.CSSProperties;
59
+ /** Vertical offset for the dot. */
60
+ dotOffset?: React.CSSProperties["marginTop"];
61
+ /** Cross-axis dot alignment inside the head column. */
62
+ dotAlign?: "start" | "center" | "end";
63
+ /** Class name forwarded to every label wrapper. */
64
+ labelClassName?: string;
65
+ /** Inline style forwarded to every label wrapper. */
66
+ labelStyle?: React.CSSProperties;
29
67
  }
30
68
  /**
31
69
  * `Timeline` — vertical timeline with pending/loading state.
@@ -11,6 +11,22 @@ interface TimelineItemConfig {
11
11
  color?: "accent" | "success" | "warning" | "danger" | "info" | "muted";
12
12
  /** Custom dot content (replaces default dot) */
13
13
  dot?: React.ReactNode;
14
+ /** Class name forwarded to the item wrapper. */
15
+ className?: string;
16
+ /** Inline style forwarded to the item wrapper. */
17
+ style?: React.CSSProperties;
18
+ /** Class name forwarded to the content wrapper. */
19
+ contentClassName?: string;
20
+ /** Inline style forwarded to the content wrapper. */
21
+ contentStyle?: React.CSSProperties;
22
+ /** Class name forwarded to the dot wrapper. */
23
+ dotClassName?: string;
24
+ /** Inline style forwarded to the dot wrapper. */
25
+ dotStyle?: React.CSSProperties;
26
+ /** Class name forwarded to the label wrapper. */
27
+ labelClassName?: string;
28
+ /** Inline style forwarded to the label wrapper. */
29
+ labelStyle?: React.CSSProperties;
14
30
  }
15
31
  interface TimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
16
32
  /** Timeline items */
@@ -26,6 +42,28 @@ interface TimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
26
42
  mode?: "left" | "right" | "alternate";
27
43
  /** Reverse the order of items */
28
44
  reverse?: boolean;
45
+ /** Class name forwarded to every item wrapper. */
46
+ itemClassName?: string;
47
+ /** Inline style forwarded to every item wrapper. */
48
+ itemStyle?: React.CSSProperties;
49
+ /** Class name forwarded to every content wrapper. */
50
+ contentClassName?: string;
51
+ /** Inline style forwarded to every content wrapper. */
52
+ contentStyle?: React.CSSProperties;
53
+ /** Minimum width for every content wrapper. Defaults to `0` so flex/grid children can shrink. */
54
+ contentMinWidth?: React.CSSProperties["minWidth"];
55
+ /** Class name forwarded to every dot wrapper. */
56
+ dotClassName?: string;
57
+ /** Inline style forwarded to every dot wrapper. */
58
+ dotStyle?: React.CSSProperties;
59
+ /** Vertical offset for the dot. */
60
+ dotOffset?: React.CSSProperties["marginTop"];
61
+ /** Cross-axis dot alignment inside the head column. */
62
+ dotAlign?: "start" | "center" | "end";
63
+ /** Class name forwarded to every label wrapper. */
64
+ labelClassName?: string;
65
+ /** Inline style forwarded to every label wrapper. */
66
+ labelStyle?: React.CSSProperties;
29
67
  }
30
68
  /**
31
69
  * `Timeline` — vertical timeline with pending/loading state.
package/dist/Timeline.js CHANGED
@@ -1,2 +1,2 @@
1
- export { Timeline } from './chunk-OQU3TJCF.js';
1
+ export { Timeline } from './chunk-I4M2RL2X.js';
2
2
  import './chunk-Y5F7ZTBH.js';
@@ -53,6 +53,10 @@ var ModalBase = React__namespace.forwardRef(({
53
53
  okButtonProps,
54
54
  cancelButtonProps,
55
55
  confirmLoading,
56
+ bodyClassName = "",
57
+ bodyStyle,
58
+ bodyProps,
59
+ bodyOverflow,
56
60
  destroyOnClose = false,
57
61
  afterOpenChange,
58
62
  zIndex,
@@ -104,6 +108,7 @@ var ModalBase = React__namespace.forwardRef(({
104
108
  }
105
109
  )
106
110
  ] });
111
+ const modalBodyStyle = bodyOverflow == null ? bodyStyle : { overflow: bodyOverflow, ...bodyStyle };
107
112
  return ReactDOM__default.default.createPortal(
108
113
  /* @__PURE__ */ jsxRuntime.jsx(
109
114
  "div",
@@ -143,7 +148,15 @@ var ModalBase = React__namespace.forwardRef(({
143
148
  }
144
149
  )
145
150
  ] }),
146
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-body", children }),
151
+ /* @__PURE__ */ jsxRuntime.jsx(
152
+ "div",
153
+ {
154
+ ...bodyProps,
155
+ className: `modal-body ${bodyClassName}`.trim(),
156
+ style: modalBodyStyle,
157
+ children
158
+ }
159
+ ),
147
160
  footer === null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-foot", children: footer ?? defaultFooter })
148
161
  ]
149
162
  }
@@ -0,0 +1,151 @@
1
+ import { Spin } from './chunk-Y5F7ZTBH.js';
2
+ import './tokens-EF34LSWI.css';
3
+ import './shared-NJHRNLRH.css';
4
+ import './Timeline-CRFZ3I2W.css';
5
+ import * as React from 'react';
6
+ import { jsxs, jsx } from 'react/jsx-runtime';
7
+
8
+ var Timeline = React.forwardRef(
9
+ ({
10
+ items,
11
+ pending = false,
12
+ pendingContent = "\u52A0\u8F7D\u4E2D...",
13
+ mode = "left",
14
+ reverse = false,
15
+ itemClassName,
16
+ itemStyle,
17
+ contentClassName,
18
+ contentStyle,
19
+ contentMinWidth,
20
+ dotClassName,
21
+ dotStyle,
22
+ dotOffset,
23
+ dotAlign = "center",
24
+ labelClassName,
25
+ labelStyle,
26
+ className = "",
27
+ style,
28
+ ...rest
29
+ }, ref) => {
30
+ const displayItems = [...items];
31
+ if (reverse) displayItems.reverse();
32
+ const hasPending = pending !== false;
33
+ const timelineStyle = {
34
+ ...dotOffset != null ? { "--timeline-dot-offset": toCssSize(dotOffset) } : {},
35
+ ...contentMinWidth != null ? { "--timeline-content-min-width": toCssSize(contentMinWidth) } : {},
36
+ ...style
37
+ };
38
+ const sharedItemProps = {
39
+ itemClassName,
40
+ itemStyle,
41
+ contentClassName,
42
+ contentStyle,
43
+ dotClassName,
44
+ dotStyle,
45
+ dotAlign,
46
+ labelClassName,
47
+ labelStyle
48
+ };
49
+ return /* @__PURE__ */ jsxs(
50
+ "div",
51
+ {
52
+ ref,
53
+ className: `timeline timeline-${mode} timeline-dot-${dotAlign} ${className}`,
54
+ style: timelineStyle,
55
+ ...rest,
56
+ children: [
57
+ displayItems.map((item, i) => /* @__PURE__ */ jsx(
58
+ TimelineItem,
59
+ {
60
+ item,
61
+ isLast: !hasPending && i === displayItems.length - 1,
62
+ position: getPosition(mode, i),
63
+ ...sharedItemProps
64
+ },
65
+ item.key ?? i
66
+ )),
67
+ hasPending && /* @__PURE__ */ jsx(
68
+ TimelineItem,
69
+ {
70
+ item: {
71
+ children: pendingContent,
72
+ dot: typeof pending === "boolean" ? void 0 : pending,
73
+ color: "muted"
74
+ },
75
+ isLast: true,
76
+ isPending: true,
77
+ position: getPosition(mode, displayItems.length),
78
+ ...sharedItemProps
79
+ }
80
+ )
81
+ ]
82
+ }
83
+ );
84
+ }
85
+ );
86
+ Timeline.displayName = "Timeline";
87
+ function getPosition(mode, index) {
88
+ if (mode === "left") return "left";
89
+ if (mode === "right") return "right";
90
+ return index % 2 === 0 ? "left" : "right";
91
+ }
92
+ var TimelineItem = ({
93
+ item,
94
+ isLast,
95
+ isPending,
96
+ position,
97
+ itemClassName,
98
+ itemStyle,
99
+ contentClassName,
100
+ contentStyle,
101
+ dotClassName,
102
+ dotStyle,
103
+ dotAlign,
104
+ labelClassName,
105
+ labelStyle
106
+ }) => {
107
+ const color = item.color ?? "accent";
108
+ const cls = [
109
+ "timeline-item",
110
+ `timeline-item-${position}`,
111
+ isLast ? "timeline-item-last" : "",
112
+ isPending ? "timeline-item-pending" : "",
113
+ itemClassName,
114
+ item.className
115
+ ].filter(Boolean).join(" ");
116
+ const dotCls = [
117
+ "timeline-item-dot",
118
+ color,
119
+ isPending ? "pending" : "",
120
+ dotClassName,
121
+ item.dotClassName
122
+ ].filter(Boolean).join(" ");
123
+ const dotAlignStyle = dotAlign === "start" ? { alignSelf: "flex-start" } : dotAlign === "end" ? { alignSelf: "flex-end" } : {};
124
+ return /* @__PURE__ */ jsxs("div", { className: cls, style: { ...itemStyle, ...item.style }, children: [
125
+ /* @__PURE__ */ jsx(
126
+ "div",
127
+ {
128
+ className: `timeline-item-label ${labelClassName ?? ""} ${item.labelClassName ?? ""}`,
129
+ style: { ...labelStyle, ...item.labelStyle },
130
+ children: item.label
131
+ }
132
+ ),
133
+ /* @__PURE__ */ jsxs("div", { className: "timeline-item-head", children: [
134
+ /* @__PURE__ */ jsx("div", { className: dotCls, style: { ...dotAlignStyle, ...dotStyle, ...item.dotStyle }, children: item.dot ?? (isPending && /* @__PURE__ */ jsx(Spin, { size: 14 })) }),
135
+ !isLast && /* @__PURE__ */ jsx("div", { className: "timeline-item-tail" })
136
+ ] }),
137
+ /* @__PURE__ */ jsx(
138
+ "div",
139
+ {
140
+ className: `timeline-item-content ${contentClassName ?? ""} ${item.contentClassName ?? ""}`,
141
+ style: { ...contentStyle, ...item.contentStyle },
142
+ children: item.children
143
+ }
144
+ )
145
+ ] });
146
+ };
147
+ function toCssSize(value) {
148
+ return typeof value === "number" ? `${value}px` : String(value);
149
+ }
150
+
151
+ export { Timeline };
@@ -1,10 +1,10 @@
1
+ import { Spin } from './chunk-Y5F7ZTBH.js';
1
2
  import './tokens-EF34LSWI.css';
2
3
  import './shared-NJHRNLRH.css';
3
- import './Card-MA6SV7D5.css';
4
+ import './Card-M6UMBDD2.css';
4
5
  import * as React from 'react';
5
6
  import { jsxs, jsx } from 'react/jsx-runtime';
6
7
 
7
- // src/components/Card/Card.tsx
8
8
  var Card = React.forwardRef(
9
9
  ({
10
10
  variant = "raised",
@@ -13,18 +13,34 @@ var Card = React.forwardRef(
13
13
  title,
14
14
  description,
15
15
  actions,
16
+ fill = false,
17
+ bodyLayout,
18
+ bodyClassName = "",
19
+ bodyStyle,
20
+ bodyProps,
21
+ loading = false,
22
+ loadingOverlay,
16
23
  className = "",
17
24
  children,
18
25
  ...rest
19
26
  }, ref) => {
27
+ const resolvedBodyLayout = bodyLayout ?? (fill ? "fill" : "block");
20
28
  const cls = [
21
29
  "card",
22
30
  variant,
23
31
  padding !== "md" && `pad-${padding}`,
32
+ fill && "fill",
24
33
  hoverable && "hoverable",
34
+ loading && "loading",
25
35
  className
26
36
  ].filter(Boolean).join(" ");
27
- return /* @__PURE__ */ jsxs("div", { ref, className: cls, ...rest, children: [
37
+ const bodyCls = [
38
+ "card-body",
39
+ resolvedBodyLayout !== "block" && `body-${resolvedBodyLayout}`,
40
+ loading && "loading",
41
+ bodyClassName
42
+ ].filter(Boolean).join(" ");
43
+ return /* @__PURE__ */ jsxs("div", { ref, className: cls, "aria-busy": loading || void 0, ...rest, children: [
28
44
  (title || description || actions) && /* @__PURE__ */ jsxs("div", { className: "card-head", children: [
29
45
  /* @__PURE__ */ jsxs("div", { className: "card-titles", children: [
30
46
  title && /* @__PURE__ */ jsx("div", { className: "card-title", children: title }),
@@ -32,7 +48,10 @@ var Card = React.forwardRef(
32
48
  ] }),
33
49
  actions && /* @__PURE__ */ jsx("div", { className: "card-actions", children: actions })
34
50
  ] }),
35
- /* @__PURE__ */ jsx("div", { className: "card-body", children })
51
+ /* @__PURE__ */ jsxs("div", { ...bodyProps, className: bodyCls, style: bodyStyle, children: [
52
+ children,
53
+ loading && /* @__PURE__ */ jsx("div", { className: "card-loading-overlay", "aria-live": "polite", children: loadingOverlay ?? /* @__PURE__ */ jsx(Spin, { tip: "\u52A0\u8F7D\u4E2D..." }) })
54
+ ] })
36
55
  ] });
37
56
  }
38
57
  );
@@ -28,6 +28,10 @@ var ModalBase = React.forwardRef(({
28
28
  okButtonProps,
29
29
  cancelButtonProps,
30
30
  confirmLoading,
31
+ bodyClassName = "",
32
+ bodyStyle,
33
+ bodyProps,
34
+ bodyOverflow,
31
35
  destroyOnClose = false,
32
36
  afterOpenChange,
33
37
  zIndex,
@@ -79,6 +83,7 @@ var ModalBase = React.forwardRef(({
79
83
  }
80
84
  )
81
85
  ] });
86
+ const modalBodyStyle = bodyOverflow == null ? bodyStyle : { overflow: bodyOverflow, ...bodyStyle };
82
87
  return ReactDOM.createPortal(
83
88
  /* @__PURE__ */ jsx(
84
89
  "div",
@@ -118,7 +123,15 @@ var ModalBase = React.forwardRef(({
118
123
  }
119
124
  )
120
125
  ] }),
121
- /* @__PURE__ */ jsx("div", { className: "modal-body", children }),
126
+ /* @__PURE__ */ jsx(
127
+ "div",
128
+ {
129
+ ...bodyProps,
130
+ className: `modal-body ${bodyClassName}`.trim(),
131
+ style: modalBodyStyle,
132
+ children
133
+ }
134
+ ),
122
135
  footer === null ? null : /* @__PURE__ */ jsx("div", { className: "modal-foot", children: footer ?? defaultFooter })
123
136
  ]
124
137
  }
@@ -3,7 +3,7 @@
3
3
  var chunkSG42F5VB_cjs = require('./chunk-SG42F5VB.cjs');
4
4
  require('./tokens-EF34LSWI.css');
5
5
  require('./shared-NJHRNLRH.css');
6
- require('./Timeline-ZIM7QFQC.css');
6
+ require('./Timeline-CRFZ3I2W.css');
7
7
  var React = require('react');
8
8
  var jsxRuntime = require('react/jsx-runtime');
9
9
 
@@ -34,17 +34,46 @@ var Timeline = React__namespace.forwardRef(
34
34
  pendingContent = "\u52A0\u8F7D\u4E2D...",
35
35
  mode = "left",
36
36
  reverse = false,
37
+ itemClassName,
38
+ itemStyle,
39
+ contentClassName,
40
+ contentStyle,
41
+ contentMinWidth,
42
+ dotClassName,
43
+ dotStyle,
44
+ dotOffset,
45
+ dotAlign = "center",
46
+ labelClassName,
47
+ labelStyle,
37
48
  className = "",
49
+ style,
38
50
  ...rest
39
51
  }, ref) => {
40
52
  const displayItems = [...items];
41
53
  if (reverse) displayItems.reverse();
42
54
  const hasPending = pending !== false;
55
+ const timelineStyle = {
56
+ ...dotOffset != null ? { "--timeline-dot-offset": toCssSize(dotOffset) } : {},
57
+ ...contentMinWidth != null ? { "--timeline-content-min-width": toCssSize(contentMinWidth) } : {},
58
+ ...style
59
+ };
60
+ const sharedItemProps = {
61
+ itemClassName,
62
+ itemStyle,
63
+ contentClassName,
64
+ contentStyle,
65
+ dotClassName,
66
+ dotStyle,
67
+ dotAlign,
68
+ labelClassName,
69
+ labelStyle
70
+ };
43
71
  return /* @__PURE__ */ jsxRuntime.jsxs(
44
72
  "div",
45
73
  {
46
74
  ref,
47
- className: `timeline timeline-${mode} ${className}`,
75
+ className: `timeline timeline-${mode} timeline-dot-${dotAlign} ${className}`,
76
+ style: timelineStyle,
48
77
  ...rest,
49
78
  children: [
50
79
  displayItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -52,7 +81,8 @@ var Timeline = React__namespace.forwardRef(
52
81
  {
53
82
  item,
54
83
  isLast: !hasPending && i === displayItems.length - 1,
55
- position: getPosition(mode, i)
84
+ position: getPosition(mode, i),
85
+ ...sharedItemProps
56
86
  },
57
87
  item.key ?? i
58
88
  )),
@@ -66,7 +96,8 @@ var Timeline = React__namespace.forwardRef(
66
96
  },
67
97
  isLast: true,
68
98
  isPending: true,
69
- position: getPosition(mode, displayItems.length)
99
+ position: getPosition(mode, displayItems.length),
100
+ ...sharedItemProps
70
101
  }
71
102
  )
72
103
  ]
@@ -84,23 +115,59 @@ var TimelineItem = ({
84
115
  item,
85
116
  isLast,
86
117
  isPending,
87
- position
118
+ position,
119
+ itemClassName,
120
+ itemStyle,
121
+ contentClassName,
122
+ contentStyle,
123
+ dotClassName,
124
+ dotStyle,
125
+ dotAlign,
126
+ labelClassName,
127
+ labelStyle
88
128
  }) => {
89
129
  const color = item.color ?? "accent";
90
130
  const cls = [
91
131
  "timeline-item",
92
132
  `timeline-item-${position}`,
93
133
  isLast ? "timeline-item-last" : "",
94
- isPending ? "timeline-item-pending" : ""
134
+ isPending ? "timeline-item-pending" : "",
135
+ itemClassName,
136
+ item.className
95
137
  ].filter(Boolean).join(" ");
96
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls, children: [
97
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-label", children: item.label }),
138
+ const dotCls = [
139
+ "timeline-item-dot",
140
+ color,
141
+ isPending ? "pending" : "",
142
+ dotClassName,
143
+ item.dotClassName
144
+ ].filter(Boolean).join(" ");
145
+ const dotAlignStyle = dotAlign === "start" ? { alignSelf: "flex-start" } : dotAlign === "end" ? { alignSelf: "flex-end" } : {};
146
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls, style: { ...itemStyle, ...item.style }, children: [
147
+ /* @__PURE__ */ jsxRuntime.jsx(
148
+ "div",
149
+ {
150
+ className: `timeline-item-label ${labelClassName ?? ""} ${item.labelClassName ?? ""}`,
151
+ style: { ...labelStyle, ...item.labelStyle },
152
+ children: item.label
153
+ }
154
+ ),
98
155
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "timeline-item-head", children: [
99
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: `timeline-item-dot ${color} ${isPending ? "pending" : ""}`, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkSG42F5VB_cjs.Spin, { size: 14 })) }),
156
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: dotCls, style: { ...dotAlignStyle, ...dotStyle, ...item.dotStyle }, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkSG42F5VB_cjs.Spin, { size: 14 })) }),
100
157
  !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-tail" })
101
158
  ] }),
102
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-content", children: item.children })
159
+ /* @__PURE__ */ jsxRuntime.jsx(
160
+ "div",
161
+ {
162
+ className: `timeline-item-content ${contentClassName ?? ""} ${item.contentClassName ?? ""}`,
163
+ style: { ...contentStyle, ...item.contentStyle },
164
+ children: item.children
165
+ }
166
+ )
103
167
  ] });
104
168
  };
169
+ function toCssSize(value) {
170
+ return typeof value === "number" ? `${value}px` : String(value);
171
+ }
105
172
 
106
173
  exports.Timeline = Timeline;
@@ -1,8 +1,9 @@
1
1
  'use strict';
2
2
 
3
+ var chunkSG42F5VB_cjs = require('./chunk-SG42F5VB.cjs');
3
4
  require('./tokens-EF34LSWI.css');
4
5
  require('./shared-NJHRNLRH.css');
5
- require('./Card-MA6SV7D5.css');
6
+ require('./Card-M6UMBDD2.css');
6
7
  var React = require('react');
7
8
  var jsxRuntime = require('react/jsx-runtime');
8
9
 
@@ -26,7 +27,6 @@ function _interopNamespace(e) {
26
27
 
27
28
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
29
 
29
- // src/components/Card/Card.tsx
30
30
  var Card = React__namespace.forwardRef(
31
31
  ({
32
32
  variant = "raised",
@@ -35,18 +35,34 @@ var Card = React__namespace.forwardRef(
35
35
  title,
36
36
  description,
37
37
  actions,
38
+ fill = false,
39
+ bodyLayout,
40
+ bodyClassName = "",
41
+ bodyStyle,
42
+ bodyProps,
43
+ loading = false,
44
+ loadingOverlay,
38
45
  className = "",
39
46
  children,
40
47
  ...rest
41
48
  }, ref) => {
49
+ const resolvedBodyLayout = bodyLayout ?? (fill ? "fill" : "block");
42
50
  const cls = [
43
51
  "card",
44
52
  variant,
45
53
  padding !== "md" && `pad-${padding}`,
54
+ fill && "fill",
46
55
  hoverable && "hoverable",
56
+ loading && "loading",
47
57
  className
48
58
  ].filter(Boolean).join(" ");
49
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls, ...rest, children: [
59
+ const bodyCls = [
60
+ "card-body",
61
+ resolvedBodyLayout !== "block" && `body-${resolvedBodyLayout}`,
62
+ loading && "loading",
63
+ bodyClassName
64
+ ].filter(Boolean).join(" ");
65
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls, "aria-busy": loading || void 0, ...rest, children: [
50
66
  (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-head", children: [
51
67
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-titles", children: [
52
68
  title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-title", children: title }),
@@ -54,7 +70,10 @@ var Card = React__namespace.forwardRef(
54
70
  ] }),
55
71
  actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-actions", children: actions })
56
72
  ] }),
57
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-body", children })
73
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { ...bodyProps, className: bodyCls, style: bodyStyle, children: [
74
+ children,
75
+ loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-loading-overlay", "aria-live": "polite", children: loadingOverlay ?? /* @__PURE__ */ jsxRuntime.jsx(chunkSG42F5VB_cjs.Spin, { tip: "\u52A0\u8F7D\u4E2D..." }) })
76
+ ] })
58
77
  ] });
59
78
  }
60
79
  );
package/dist/index.cjs CHANGED
@@ -2,11 +2,10 @@
2
2
 
3
3
  var chunkIHK2FRTS_cjs = require('./chunk-IHK2FRTS.cjs');
4
4
  var chunkLFTCK2VM_cjs = require('./chunk-LFTCK2VM.cjs');
5
- var chunkBJ6WUVEG_cjs = require('./chunk-BJ6WUVEG.cjs');
5
+ var chunkPVOQWCP2_cjs = require('./chunk-PVOQWCP2.cjs');
6
6
  var chunkRIUDYPRB_cjs = require('./chunk-RIUDYPRB.cjs');
7
7
  var chunkYU5JK247_cjs = require('./chunk-YU5JK247.cjs');
8
8
  var chunkZWCDB5PP_cjs = require('./chunk-ZWCDB5PP.cjs');
9
- var chunkSG42F5VB_cjs = require('./chunk-SG42F5VB.cjs');
10
9
  var chunkN3OLFKV5_cjs = require('./chunk-N3OLFKV5.cjs');
11
10
  var chunk6XVLERA3_cjs = require('./chunk-6XVLERA3.cjs');
12
11
  var chunkNT6CJYI3_cjs = require('./chunk-NT6CJYI3.cjs');
@@ -16,7 +15,7 @@ var chunk6GQPF3EI_cjs = require('./chunk-6GQPF3EI.cjs');
16
15
  var chunkD64IPDUE_cjs = require('./chunk-D64IPDUE.cjs');
17
16
  var chunkOGPDCBPD_cjs = require('./chunk-OGPDCBPD.cjs');
18
17
  var chunkN2BTMKF2_cjs = require('./chunk-N2BTMKF2.cjs');
19
- var chunkGBKUGKIY_cjs = require('./chunk-GBKUGKIY.cjs');
18
+ var chunk5PR7UWIZ_cjs = require('./chunk-5PR7UWIZ.cjs');
20
19
  var chunkDYSGXQUK_cjs = require('./chunk-DYSGXQUK.cjs');
21
20
  var chunk4UKM4KAC_cjs = require('./chunk-4UKM4KAC.cjs');
22
21
  var chunkMOMLQP7B_cjs = require('./chunk-MOMLQP7B.cjs');
@@ -30,7 +29,8 @@ var chunkC24W6PTJ_cjs = require('./chunk-C24W6PTJ.cjs');
30
29
  var chunkDYHNOYRC_cjs = require('./chunk-DYHNOYRC.cjs');
31
30
  var chunk66T76GII_cjs = require('./chunk-66T76GII.cjs');
32
31
  var chunkU2H4DRMV_cjs = require('./chunk-U2H4DRMV.cjs');
33
- var chunkCBKJXKVI_cjs = require('./chunk-CBKJXKVI.cjs');
32
+ var chunkWHXSUPJB_cjs = require('./chunk-WHXSUPJB.cjs');
33
+ var chunkSG42F5VB_cjs = require('./chunk-SG42F5VB.cjs');
34
34
  var chunkQY76WTO5_cjs = require('./chunk-QY76WTO5.cjs');
35
35
  var chunkZPKHGKVL_cjs = require('./chunk-ZPKHGKVL.cjs');
36
36
  var chunkR74TZKJS_cjs = require('./chunk-R74TZKJS.cjs');
@@ -51,7 +51,7 @@ var chunkACQSRMLF_cjs = require('./chunk-ACQSRMLF.cjs');
51
51
  var chunk6LARTGLP_cjs = require('./chunk-6LARTGLP.cjs');
52
52
 
53
53
  // src/index.ts
54
- var VERSION = "0.6.5";
54
+ var VERSION = "0.6.7";
55
55
 
56
56
  Object.defineProperty(exports, "Tabs", {
57
57
  enumerable: true,
@@ -71,7 +71,7 @@ Object.defineProperty(exports, "ThemePanel", {
71
71
  });
72
72
  Object.defineProperty(exports, "Timeline", {
73
73
  enumerable: true,
74
- get: function () { return chunkBJ6WUVEG_cjs.Timeline; }
74
+ get: function () { return chunkPVOQWCP2_cjs.Timeline; }
75
75
  });
76
76
  Object.defineProperty(exports, "Tooltip", {
77
77
  enumerable: true,
@@ -101,10 +101,6 @@ Object.defineProperty(exports, "Slider", {
101
101
  enumerable: true,
102
102
  get: function () { return chunkZWCDB5PP_cjs.Slider; }
103
103
  });
104
- Object.defineProperty(exports, "Spin", {
105
- enumerable: true,
106
- get: function () { return chunkSG42F5VB_cjs.Spin; }
107
- });
108
104
  Object.defineProperty(exports, "Splitter", {
109
105
  enumerable: true,
110
106
  get: function () { return chunkN3OLFKV5_cjs.Splitter; }
@@ -195,7 +191,7 @@ Object.defineProperty(exports, "toast", {
195
191
  });
196
192
  Object.defineProperty(exports, "Modal", {
197
193
  enumerable: true,
198
- get: function () { return chunkGBKUGKIY_cjs.Modal; }
194
+ get: function () { return chunk5PR7UWIZ_cjs.Modal; }
199
195
  });
200
196
  Object.defineProperty(exports, "Pagination", {
201
197
  enumerable: true,
@@ -275,7 +271,11 @@ Object.defineProperty(exports, "List", {
275
271
  });
276
272
  Object.defineProperty(exports, "Card", {
277
273
  enumerable: true,
278
- get: function () { return chunkCBKJXKVI_cjs.Card; }
274
+ get: function () { return chunkWHXSUPJB_cjs.Card; }
275
+ });
276
+ Object.defineProperty(exports, "Spin", {
277
+ enumerable: true,
278
+ get: function () { return chunkSG42F5VB_cjs.Spin; }
279
279
  });
280
280
  Object.defineProperty(exports, "Cascader", {
281
281
  enumerable: true,
package/dist/index.d.cts CHANGED
@@ -49,6 +49,6 @@ import 'react/jsx-runtime';
49
49
  import 'react';
50
50
 
51
51
  /** Package version — bumped by release scripts. */
52
- declare const VERSION = "0.6.5";
52
+ declare const VERSION = "0.6.7";
53
53
 
54
54
  export { VERSION };
package/dist/index.d.ts CHANGED
@@ -49,6 +49,6 @@ import 'react/jsx-runtime';
49
49
  import 'react';
50
50
 
51
51
  /** Package version — bumped by release scripts. */
52
- declare const VERSION = "0.6.5";
52
+ declare const VERSION = "0.6.7";
53
53
 
54
54
  export { VERSION };
package/dist/index.js CHANGED
@@ -1,10 +1,9 @@
1
1
  export { Tabs } from './chunk-TVUBGXWA.js';
2
2
  export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel } from './chunk-NJCHFXGC.js';
3
- export { Timeline } from './chunk-OQU3TJCF.js';
3
+ export { Timeline } from './chunk-I4M2RL2X.js';
4
4
  export { Tooltip } from './chunk-SFAGHPBT.js';
5
5
  export { Link, Paragraph, Text, Title, Typography } from './chunk-5JNDDWFZ.js';
6
6
  export { Slider } from './chunk-HU7T64Y3.js';
7
- export { Spin } from './chunk-Y5F7ZTBH.js';
8
7
  export { Splitter } from './chunk-7ZNGHWVS.js';
9
8
  export { StatusBar, StatusBarItem } from './chunk-2SCXQ7QS.js';
10
9
  export { SURFACE_THEME_PRESETS, Surface } from './chunk-O43DOE7V.js';
@@ -14,7 +13,7 @@ export { Switch } from './chunk-YJEXAO2I.js';
14
13
  export { TablePro } from './chunk-GUZ2DNDC.js';
15
14
  export { Table } from './chunk-YSXD344H.js';
16
15
  export { MessageContainer, ToastContainer, message, toast } from './chunk-W5CJC7S7.js';
17
- export { Modal } from './chunk-OHIFKN4E.js';
16
+ export { Modal } from './chunk-N4USDBY2.js';
18
17
  export { Pagination } from './chunk-2ZFJTMEF.js';
19
18
  export { Popover } from './chunk-PKHITACT.js';
20
19
  export { Progress } from './chunk-YVTLHTG6.js';
@@ -28,7 +27,8 @@ export { Form, FormItem, useForm } from './chunk-SABWUELE.js';
28
27
  export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-2NT5QKEX.js';
29
28
  export { InputNumber } from './chunk-LI4XJTEA.js';
30
29
  export { List } from './chunk-OHFZ7L4T.js';
31
- export { Card } from './chunk-WEJKY3DF.js';
30
+ export { Card } from './chunk-J7EQJXSJ.js';
31
+ export { Spin } from './chunk-Y5F7ZTBH.js';
32
32
  export { Cascader } from './chunk-REMJWNAT.js';
33
33
  export { Checkbox } from './chunk-WXWFMWWF.js';
34
34
  export { Collapse } from './chunk-AJH2O4WC.js';
@@ -49,6 +49,6 @@ export { Calendar } from './chunk-CEZ2DR4R.js';
49
49
  export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-YT5NLCRC.js';
50
50
 
51
51
  // src/index.ts
52
- var VERSION = "0.6.5";
52
+ var VERSION = "0.6.7";
53
53
 
54
54
  export { VERSION };
package/dist/styles.css CHANGED
@@ -1121,6 +1121,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
1121
1121
  box-shadow: var(--neu-shadow-panel);
1122
1122
  padding: var(--gap-5);
1123
1123
  }
1124
+ .card.fill {
1125
+ display: flex;
1126
+ flex-direction: column;
1127
+ min-height: 0;
1128
+ height: 100%;
1129
+ }
1124
1130
  .card.flat { box-shadow: var(--neu-shadow-subtle); }
1125
1131
  .card.sunken { box-shadow: var(--neu-shadow-inset-strong); }
1126
1132
  .card.pad-none { padding: 0; }
@@ -1144,7 +1150,40 @@ input, textarea, select { font-family: inherit; color: inherit; }
1144
1150
  .card-title { font-size: 15px; font-weight: 600; }
1145
1151
  .card-desc { font-size: 12px; color: var(--fg-muted); }
1146
1152
  .card-actions { display: flex; gap: 6px; }
1147
- .card-body { font-size: 13px; }
1153
+ .card-body {
1154
+ font-size: 13px;
1155
+ min-width: 0;
1156
+ position: relative;
1157
+ }
1158
+ .card-body.body-stack {
1159
+ display: flex;
1160
+ flex-direction: column;
1161
+ gap: var(--gap-3);
1162
+ }
1163
+ .card-body.body-fill {
1164
+ display: flex;
1165
+ flex: 1;
1166
+ flex-direction: column;
1167
+ min-height: 0;
1168
+ }
1169
+ .card-body.body-center {
1170
+ display: grid;
1171
+ place-items: center;
1172
+ }
1173
+ .card-body.loading {
1174
+ pointer-events: none;
1175
+ }
1176
+ .card-loading-overlay {
1177
+ position: absolute;
1178
+ inset: calc(var(--gap-2) * -1);
1179
+ border-radius: var(--r-md);
1180
+ display: grid;
1181
+ place-items: center;
1182
+ background: color-mix(in oklch, var(--bg) 82%, transparent);
1183
+ box-shadow: var(--neu-shadow-inset);
1184
+ color: var(--fg-muted);
1185
+ z-index: 1;
1186
+ }
1148
1187
  /* ============ Surface ============ */
1149
1188
  .surface {
1150
1189
  position: relative;
package/docs/llms/card.md CHANGED
@@ -44,6 +44,31 @@ hoverable 在鼠标悬浮时轻微上移并加强阴影,适合可点击的卡片
44
44
  <Card title="..." actions={<Button size="sm" icon="plus">邀请</Button>}>...</Card>
45
45
  ```
46
46
 
47
+ ### 正文布局
48
+
49
+ bodyLayout 控制正文槽布局,bodyClassName / bodyStyle / bodyProps 直接作用到 .card-body。
50
+
51
+ ```tsx
52
+ <Card
53
+ fill
54
+ bodyLayout="stack"
55
+ bodyClassName="settings-card-body"
56
+ bodyStyle={{ minHeight: 160 }}
57
+ >
58
+ ...
59
+ </Card>
60
+ ```
61
+
62
+ ### 加载覆盖
63
+
64
+ loading 会在正文区域显示内建 overlay;loadingOverlay 可替换默认 Spin。
65
+
66
+ ```tsx
67
+ <Card loading loadingOverlay="正在同步...">
68
+ ...
69
+ </Card>
70
+ ```
71
+
47
72
  ## API
48
73
 
49
74
  **Card**
@@ -56,6 +81,13 @@ hoverable 在鼠标悬浮时轻微上移并加强阴影,适合可点击的卡片
56
81
  | title | `ReactNode` | — | 标题 |
57
82
  | description | `ReactNode` | — | 副标题 |
58
83
  | actions | `ReactNode` | — | 右上操作区 |
84
+ | fill | `boolean` | `false` | 卡片和正文填满可用高度 |
85
+ | bodyLayout | `"block" | "stack" | "fill" | "center"` | `"block"` | 正文布局策略 |
86
+ | bodyClassName | `string` | — | 正文容器 className |
87
+ | bodyStyle | `CSSProperties` | — | 正文容器内联样式 |
88
+ | bodyProps | `HTMLAttributes<HTMLDivElement>` | — | 透传给正文容器的 DOM props |
89
+ | loading | `boolean` | `false` | 显示正文加载覆盖层 |
90
+ | loadingOverlay | `ReactNode` | — | 自定义加载覆盖层内容 |
59
91
 
60
92
 
61
93
  ---
@@ -78,6 +78,21 @@ closable={false} 隐藏右上角 ×,closeIcon 可自定义。
78
78
  <Modal closeIcon={<Icon name="chevDown" />} />
79
79
  ```
80
80
 
81
+ ### 正文容器控制
82
+
83
+ bodyClassName / bodyStyle / bodyProps 可直接作用到正文容器;bodyOverflow 用于切换滚动或允许拟态阴影外溢。
84
+
85
+ ```tsx
86
+ <Modal
87
+ bodyClassName="settings-modal-body"
88
+ bodyStyle={{ maxHeight: 260, padding: 12 }}
89
+ bodyOverflow="visible"
90
+ bodyProps={{ "data-panel": "settings" }}
91
+ >
92
+ ...
93
+ </Modal>
94
+ ```
95
+
81
96
  ## API
82
97
 
83
98
  **Modal**
@@ -93,6 +108,10 @@ closable={false} 隐藏右上角 ×,closeIcon 可自定义。
93
108
  | okText / cancelText | `ReactNode` | `"确定" / "取消"` | 默认按钮文案 |
94
109
  | okButtonProps / cancelButtonProps | `Partial<ButtonProps>` | — | 透传给默认按钮 |
95
110
  | confirmLoading | `boolean` | `false` | OK 按钮显示 spinner 并禁用 |
111
+ | bodyClassName | `string` | — | 正文容器 className |
112
+ | bodyStyle | `CSSProperties` | — | 正文容器内联样式 |
113
+ | bodyProps | `HTMLAttributes<HTMLDivElement>` | — | 透传给正文容器的 DOM props |
114
+ | bodyOverflow | `CSSProperties['overflow']` | — | 正文容器 overflow 快捷控制 |
96
115
  | closable | `boolean` | `true` | 显示右上角 × |
97
116
  | closeIcon | `ReactNode` | — | 自定义关闭图标 |
98
117
  | maskClosable | `boolean` | `true` | 点击遮罩关闭 |
@@ -112,6 +112,24 @@ reverse 属性将时间线反转,最新的事件在最上面
112
112
  />
113
113
  ```
114
114
 
115
+ ### 槽位样式
116
+
117
+ item / content / dot / label 都可以拿到样式入口;content 默认 min-width: 0,长内容能在弹性容器里正确收缩。
118
+
119
+ ```tsx
120
+ <Timeline
121
+ contentMinWidth={0}
122
+ dotOffset={4}
123
+ items={[
124
+ {
125
+ children: "很长的任务标题...",
126
+ contentStyle: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
127
+ dotStyle: { boxShadow: "var(--neu-shadow-lift)" },
128
+ },
129
+ ]}
130
+ />
131
+ ```
132
+
115
133
  ## API
116
134
 
117
135
  **Timeline**
@@ -123,6 +141,13 @@ reverse 属性将时间线反转,最新的事件在最上面
123
141
  | pendingContent | `ReactNode` | `"加载中..."` | 等待节点的文字内容 |
124
142
  | mode | `"left" | "right" | "alternate"` | `"left"` | 布局模式 |
125
143
  | reverse | `boolean` | `false` | 反转节点顺序 |
144
+ | itemClassName / itemStyle | `string / CSSProperties` | — | 透传到每个节点外层 |
145
+ | contentClassName / contentStyle | `string / CSSProperties` | — | 透传到每个内容槽 |
146
+ | contentMinWidth | `CSSProperties['minWidth']` | `0` | 内容槽最小宽度,默认允许在 flex/grid 中收缩 |
147
+ | dotClassName / dotStyle | `string / CSSProperties` | — | 透传到每个圆点槽 |
148
+ | dotOffset | `CSSProperties['marginTop']` | `4` | 圆点垂直偏移 |
149
+ | dotAlign | `"start" | "center" | "end"` | `"center"` | 圆点在 head 列中的横向对齐 |
150
+ | labelClassName / labelStyle | `string / CSSProperties` | — | 透传到每个标签槽 |
126
151
 
127
152
 
128
153
  **TimelineItemConfig**
@@ -134,6 +159,10 @@ reverse 属性将时间线反转,最新的事件在最上面
134
159
  | label | `ReactNode` | — | 对侧标签(alternate 模式下使用) |
135
160
  | color | `"accent" | "success" | "warning" | "danger" | "info" | "muted"` | `"accent"` | 圆点颜色 |
136
161
  | dot | `ReactNode` | — | 自定义圆点内容 |
162
+ | className / style | `string / CSSProperties` | — | 节点外层样式槽 |
163
+ | contentClassName / contentStyle | `string / CSSProperties` | — | 内容槽样式 |
164
+ | dotClassName / dotStyle | `string / CSSProperties` | — | 圆点槽样式 |
165
+ | labelClassName / labelStyle | `string / CSSProperties` | — | 标签槽样式 |
137
166
 
138
167
 
139
168
  ---
package/docs/llms.md CHANGED
@@ -3,7 +3,7 @@
3
3
  > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
4
4
 
5
5
  - **包名**: `@fangxinyan/lumina`
6
- - **版本**: `0.6.5`
6
+ - **版本**: `0.6.7`
7
7
  - **React 最低版本**: 18
8
8
  - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
9
9
  - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fangxinyan/lumina",
3
- "version": "0.6.5",
3
+ "version": "0.6.7",
4
4
  "description": "Lumina — Neumorphic component library for Electron & React apps",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -1,84 +0,0 @@
1
- import { Spin } from './chunk-Y5F7ZTBH.js';
2
- import './tokens-EF34LSWI.css';
3
- import './shared-NJHRNLRH.css';
4
- import './Timeline-ZIM7QFQC.css';
5
- import * as React from 'react';
6
- import { jsxs, jsx } from 'react/jsx-runtime';
7
-
8
- var Timeline = React.forwardRef(
9
- ({
10
- items,
11
- pending = false,
12
- pendingContent = "\u52A0\u8F7D\u4E2D...",
13
- mode = "left",
14
- reverse = false,
15
- className = "",
16
- ...rest
17
- }, ref) => {
18
- const displayItems = [...items];
19
- if (reverse) displayItems.reverse();
20
- const hasPending = pending !== false;
21
- return /* @__PURE__ */ jsxs(
22
- "div",
23
- {
24
- ref,
25
- className: `timeline timeline-${mode} ${className}`,
26
- ...rest,
27
- children: [
28
- displayItems.map((item, i) => /* @__PURE__ */ jsx(
29
- TimelineItem,
30
- {
31
- item,
32
- isLast: !hasPending && i === displayItems.length - 1,
33
- position: getPosition(mode, i)
34
- },
35
- item.key ?? i
36
- )),
37
- hasPending && /* @__PURE__ */ jsx(
38
- TimelineItem,
39
- {
40
- item: {
41
- children: pendingContent,
42
- dot: typeof pending === "boolean" ? void 0 : pending,
43
- color: "muted"
44
- },
45
- isLast: true,
46
- isPending: true,
47
- position: getPosition(mode, displayItems.length)
48
- }
49
- )
50
- ]
51
- }
52
- );
53
- }
54
- );
55
- Timeline.displayName = "Timeline";
56
- function getPosition(mode, index) {
57
- if (mode === "left") return "left";
58
- if (mode === "right") return "right";
59
- return index % 2 === 0 ? "left" : "right";
60
- }
61
- var TimelineItem = ({
62
- item,
63
- isLast,
64
- isPending,
65
- position
66
- }) => {
67
- const color = item.color ?? "accent";
68
- const cls = [
69
- "timeline-item",
70
- `timeline-item-${position}`,
71
- isLast ? "timeline-item-last" : "",
72
- isPending ? "timeline-item-pending" : ""
73
- ].filter(Boolean).join(" ");
74
- return /* @__PURE__ */ jsxs("div", { className: cls, children: [
75
- /* @__PURE__ */ jsx("div", { className: "timeline-item-label", children: item.label }),
76
- /* @__PURE__ */ jsxs("div", { className: "timeline-item-head", children: [
77
- /* @__PURE__ */ jsx("div", { className: `timeline-item-dot ${color} ${isPending ? "pending" : ""}`, children: item.dot ?? (isPending && /* @__PURE__ */ jsx(Spin, { size: 14 })) }),
78
- !isLast && /* @__PURE__ */ jsx("div", { className: "timeline-item-tail" })
79
- ] }),
80
- /* @__PURE__ */ jsx("div", { className: "timeline-item-content", children: item.children })
81
- ] });
82
- };
83
-
84
- export { Timeline };