@fangxinyan/lumina 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCO,IAAM,OAAA,GAAU","file":"index.js","sourcesContent":["/* lumina — public exports */\n\nexport * from \"./components/Icon\";\nexport * from \"./components/Button\";\nexport * from \"./components/Input\";\nexport * from \"./components/Switch\";\nexport * from \"./components/Checkbox\";\nexport * from \"./components/Slider\";\nexport * from \"./components/Select\";\nexport * from \"./components/Tabs\";\nexport * from \"./components/Accordion\";\nexport * from \"./components/Card\";\nexport * from \"./components/Tag\";\nexport * from \"./components/Avatar\";\nexport * from \"./components/Divider\";\nexport * from \"./components/Progress\";\nexport * from \"./components/Modal\";\nexport * from \"./components/Toast\";\nexport * from \"./components/Tooltip\";\nexport * from \"./components/Popover\";\nexport * from \"./components/Alert\";\nexport * from \"./components/Table\";\nexport * from \"./components/Pagination\";\nexport * from \"./components/Calendar\";\nexport * from \"./components/List\";\nexport * from \"./components/AppShell\";\nexport * from \"./components/Empty\";\nexport * from \"./components/Image\";\nexport * from \"./components/Cascader\";\nexport * from \"./components/Typography\";\nexport * from \"./components/ColorPicker\";\nexport * from \"./components/Theme\";\n\n/** Package version — bumped by release scripts. */\nexport const VERSION = \"0.1.5\";\n"]}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCO,IAAM,OAAA,GAAU","file":"index.js","sourcesContent":["/* lumina — public exports */\n\nexport * from \"./components/Icon\";\nexport * from \"./components/Button\";\nexport * from \"./components/Input\";\nexport * from \"./components/Switch\";\nexport * from \"./components/Checkbox\";\nexport * from \"./components/Slider\";\nexport * from \"./components/Select\";\nexport * from \"./components/Tabs\";\nexport * from \"./components/Accordion\";\nexport * from \"./components/Card\";\nexport * from \"./components/Tag\";\nexport * from \"./components/Avatar\";\nexport * from \"./components/Divider\";\nexport * from \"./components/Progress\";\nexport * from \"./components/Modal\";\nexport * from \"./components/Toast\";\nexport * from \"./components/Tooltip\";\nexport * from \"./components/Popover\";\nexport * from \"./components/Alert\";\nexport * from \"./components/Table\";\nexport * from \"./components/Pagination\";\nexport * from \"./components/Calendar\";\nexport * from \"./components/List\";\nexport * from \"./components/AppShell\";\nexport * from \"./components/Empty\";\nexport * from \"./components/Image\";\nexport * from \"./components/Cascader\";\nexport * from \"./components/Typography\";\nexport * from \"./components/ColorPicker\";\nexport * from \"./components/Drawer\";\nexport * from \"./components/Theme\";\n\n/** Package version — bumped by release scripts. */\nexport const VERSION = \"0.1.6\";\n"]}
package/dist/styles.css CHANGED
@@ -1145,10 +1145,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
1145
1145
  z-index: 200;
1146
1146
  animation: fadeIn var(--dur) var(--ease);
1147
1147
  }
1148
+ .modal-overlay.hidden {
1149
+ display: none;
1150
+ }
1148
1151
  .modal {
1149
1152
  background: var(--bg);
1150
1153
  border-radius: var(--r-xl);
1151
- box-shadow: var(--neu-out-lg), 0 24px 60px -20px rgba(40,55,80,0.3);
1154
+ box-shadow: var(--neu-out-lg), 0 24px 60px -20px rgba(40, 55, 80, 0.3);
1152
1155
  padding: var(--gap-6);
1153
1156
  width: min(480px, 92vw);
1154
1157
  animation: modalIn var(--dur-slow) var(--ease);
@@ -1156,37 +1159,65 @@ input, textarea, select { font-family: inherit; color: inherit; }
1156
1159
  display: flex;
1157
1160
  flex-direction: column;
1158
1161
  }
1159
- @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
1162
+ @keyframes modalIn {
1163
+ from { opacity: 0; transform: translateY(8px) scale(0.97); }
1164
+ }
1160
1165
  .modal-head {
1161
- display: flex; align-items: flex-start; justify-content: space-between;
1162
- gap: var(--gap-3); margin-bottom: var(--gap-3);
1166
+ display: flex;
1167
+ align-items: flex-start;
1168
+ justify-content: space-between;
1169
+ gap: var(--gap-3);
1170
+ margin-bottom: var(--gap-3);
1171
+ }
1172
+ .modal-titles {
1173
+ display: flex;
1174
+ flex-direction: column;
1175
+ gap: 4px;
1163
1176
  }
1164
- .modal-titles { display: flex; flex-direction: column; gap: 4px; }
1165
1177
  .modal-title { font-size: 17px; font-weight: 600; }
1166
1178
  .modal-desc { font-size: 13px; color: var(--fg-muted); }
1167
- .modal-body { padding: var(--gap-3) 0; color: var(--fg-muted); font-size: 13px; line-height: 1.6; flex: 1; overflow-y: auto; }
1168
- .modal-foot {
1169
- display: flex; gap: 10px; justify-content: flex-end;
1179
+ .modal-body {
1180
+ padding: var(--gap-3) 0;
1181
+ color: var(--fg-muted);
1182
+ font-size: 13px;
1183
+ line-height: 1.6;
1184
+ flex: 1;
1185
+ overflow-y: auto;
1186
+ }
1187
+ .modal-foot {
1188
+ display: flex;
1189
+ gap: 10px;
1190
+ justify-content: flex-end;
1170
1191
  margin-top: var(--gap-4);
1171
1192
  }
1172
1193
  .modal-close {
1173
1194
  width: 28px; height: 28px;
1174
- border: none; background: transparent;
1195
+ border: none;
1196
+ background: transparent;
1175
1197
  border-radius: var(--r-sm);
1176
- display: grid; place-items: center;
1198
+ display: grid;
1199
+ place-items: center;
1177
1200
  color: var(--fg-subtle);
1178
1201
  cursor: pointer;
1179
1202
  transition: all var(--dur-fast) var(--ease);
1180
1203
  }
1181
- .modal-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
1182
- /* ============ Drawer (co-exported from Modal.tsx) ============ */
1204
+ .modal-close:hover {
1205
+ color: var(--fg);
1206
+ background: var(--bg);
1207
+ box-shadow: var(--neu-flat);
1208
+ }
1209
+ /* ============ Drawer ============ */
1183
1210
  .drawer-overlay {
1184
- position: fixed; inset: 0;
1211
+ position: fixed;
1212
+ inset: 0;
1185
1213
  background: color-mix(in oklch, var(--bg-sunken) 50%, transparent);
1186
1214
  backdrop-filter: blur(4px);
1187
1215
  z-index: 150;
1188
1216
  animation: fadeIn var(--dur) var(--ease);
1189
1217
  }
1218
+ .drawer-overlay.hidden {
1219
+ display: none;
1220
+ }
1190
1221
  .drawer {
1191
1222
  position: fixed;
1192
1223
  background: var(--bg);
@@ -1196,22 +1227,82 @@ input, textarea, select { font-family: inherit; color: inherit; }
1196
1227
  display: flex;
1197
1228
  flex-direction: column;
1198
1229
  }
1199
- .drawer.right { top: 0; right: 0; bottom: 0; width: min(420px, 92vw); animation: drawerInRight var(--dur-slow) var(--ease); box-shadow: -24px 0 60px -20px rgba(40,55,80,0.25); }
1200
- .drawer.left { top: 0; left: 0; bottom: 0; width: min(420px, 92vw); animation: drawerInLeft var(--dur-slow) var(--ease); box-shadow: 24px 0 60px -20px rgba(40,55,80,0.25); }
1201
- .drawer.top { top: 0; left: 0; right: 0; height: min(320px, 80vh); animation: drawerInTop var(--dur-slow) var(--ease); box-shadow: 0 24px 60px -20px rgba(40,55,80,0.25); }
1202
- .drawer.bottom { bottom: 0; left: 0; right: 0; height: min(320px, 80vh); animation: drawerInBottom var(--dur-slow) var(--ease); box-shadow: 0 -24px 60px -20px rgba(40,55,80,0.25); }
1230
+ .drawer.hidden {
1231
+ display: none;
1232
+ }
1233
+ .drawer.right {
1234
+ top: 0; right: 0; bottom: 0;
1235
+ width: min(420px, 92vw);
1236
+ animation: drawerInRight var(--dur-slow) var(--ease);
1237
+ box-shadow: -24px 0 60px -20px rgba(40, 55, 80, 0.25);
1238
+ }
1239
+ .drawer.left {
1240
+ top: 0; left: 0; bottom: 0;
1241
+ width: min(420px, 92vw);
1242
+ animation: drawerInLeft var(--dur-slow) var(--ease);
1243
+ box-shadow: 24px 0 60px -20px rgba(40, 55, 80, 0.25);
1244
+ }
1245
+ .drawer.top {
1246
+ top: 0; left: 0; right: 0;
1247
+ height: min(320px, 80vh);
1248
+ animation: drawerInTop var(--dur-slow) var(--ease);
1249
+ box-shadow: 0 24px 60px -20px rgba(40, 55, 80, 0.25);
1250
+ }
1251
+ .drawer.bottom {
1252
+ bottom: 0; left: 0; right: 0;
1253
+ height: min(320px, 80vh);
1254
+ animation: drawerInBottom var(--dur-slow) var(--ease);
1255
+ box-shadow: 0 -24px 60px -20px rgba(40, 55, 80, 0.25);
1256
+ }
1203
1257
  @keyframes drawerInRight { from { transform: translateX( 20px); opacity: 0; } }
1204
1258
  @keyframes drawerInLeft { from { transform: translateX(-20px); opacity: 0; } }
1205
1259
  @keyframes drawerInTop { from { transform: translateY(-20px); opacity: 0; } }
1206
1260
  @keyframes drawerInBottom { from { transform: translateY( 20px); opacity: 0; } }
1207
1261
  .drawer-head {
1208
- display: flex; align-items: center; justify-content: space-between;
1262
+ display: flex;
1263
+ align-items: center;
1264
+ justify-content: space-between;
1265
+ gap: var(--gap-3);
1209
1266
  margin-bottom: var(--gap-4);
1210
1267
  padding-bottom: var(--gap-4);
1211
1268
  border-bottom: 1px solid var(--divider);
1212
1269
  }
1213
- .drawer-title { font-size: 16px; font-weight: 600; }
1214
- .drawer-body { flex: 1; }
1270
+ .drawer-head-right {
1271
+ display: inline-flex;
1272
+ align-items: center;
1273
+ gap: var(--gap-3);
1274
+ }
1275
+ .drawer-title {
1276
+ font-size: 16px;
1277
+ font-weight: 600;
1278
+ }
1279
+ .drawer-close {
1280
+ width: 28px; height: 28px;
1281
+ border: none;
1282
+ background: transparent;
1283
+ border-radius: var(--r-sm);
1284
+ display: grid;
1285
+ place-items: center;
1286
+ color: var(--fg-subtle);
1287
+ cursor: pointer;
1288
+ transition: all var(--dur-fast) var(--ease);
1289
+ }
1290
+ .drawer-close:hover {
1291
+ color: var(--fg);
1292
+ background: var(--bg);
1293
+ box-shadow: var(--neu-flat);
1294
+ }
1295
+ .drawer-body {
1296
+ flex: 1;
1297
+ }
1298
+ .drawer-foot {
1299
+ display: flex;
1300
+ gap: 10px;
1301
+ justify-content: flex-end;
1302
+ margin-top: var(--gap-4);
1303
+ padding-top: var(--gap-4);
1304
+ border-top: 1px solid var(--divider);
1305
+ }
1215
1306
  /* ============ Tooltip ============ */
1216
1307
  .tip-anchor {
1217
1308
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fangxinyan/lumina",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "description": "Lumina — Neumorphic component library for Electron & React apps",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -1,79 +0,0 @@
1
- /* ============ Modal ============ */
2
- .modal-overlay {
3
- position: fixed;
4
- inset: 0;
5
- background: color-mix(in oklch, var(--bg-sunken) 60%, transparent);
6
- backdrop-filter: blur(8px);
7
- display: grid;
8
- place-items: center;
9
- z-index: 200;
10
- animation: fadeIn var(--dur) var(--ease);
11
- }
12
- .modal {
13
- background: var(--bg);
14
- border-radius: var(--r-xl);
15
- box-shadow: var(--neu-out-lg), 0 24px 60px -20px rgba(40,55,80,0.3);
16
- padding: var(--gap-6);
17
- width: min(480px, 92vw);
18
- animation: modalIn var(--dur-slow) var(--ease);
19
- max-height: 86vh;
20
- display: flex;
21
- flex-direction: column;
22
- }
23
- @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
24
- .modal-head {
25
- display: flex; align-items: flex-start; justify-content: space-between;
26
- gap: var(--gap-3); margin-bottom: var(--gap-3);
27
- }
28
- .modal-titles { display: flex; flex-direction: column; gap: 4px; }
29
- .modal-title { font-size: 17px; font-weight: 600; }
30
- .modal-desc { font-size: 13px; color: var(--fg-muted); }
31
- .modal-body { padding: var(--gap-3) 0; color: var(--fg-muted); font-size: 13px; line-height: 1.6; flex: 1; overflow-y: auto; }
32
- .modal-foot {
33
- display: flex; gap: 10px; justify-content: flex-end;
34
- margin-top: var(--gap-4);
35
- }
36
- .modal-close {
37
- width: 28px; height: 28px;
38
- border: none; background: transparent;
39
- border-radius: var(--r-sm);
40
- display: grid; place-items: center;
41
- color: var(--fg-subtle);
42
- cursor: pointer;
43
- transition: all var(--dur-fast) var(--ease);
44
- }
45
- .modal-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
46
-
47
- /* ============ Drawer (co-exported from Modal.tsx) ============ */
48
- .drawer-overlay {
49
- position: fixed; inset: 0;
50
- background: color-mix(in oklch, var(--bg-sunken) 50%, transparent);
51
- backdrop-filter: blur(4px);
52
- z-index: 150;
53
- animation: fadeIn var(--dur) var(--ease);
54
- }
55
- .drawer {
56
- position: fixed;
57
- background: var(--bg);
58
- padding: var(--gap-5);
59
- z-index: 151;
60
- overflow-y: auto;
61
- display: flex;
62
- flex-direction: column;
63
- }
64
- .drawer.right { top: 0; right: 0; bottom: 0; width: min(420px, 92vw); animation: drawerInRight var(--dur-slow) var(--ease); box-shadow: -24px 0 60px -20px rgba(40,55,80,0.25); }
65
- .drawer.left { top: 0; left: 0; bottom: 0; width: min(420px, 92vw); animation: drawerInLeft var(--dur-slow) var(--ease); box-shadow: 24px 0 60px -20px rgba(40,55,80,0.25); }
66
- .drawer.top { top: 0; left: 0; right: 0; height: min(320px, 80vh); animation: drawerInTop var(--dur-slow) var(--ease); box-shadow: 0 24px 60px -20px rgba(40,55,80,0.25); }
67
- .drawer.bottom { bottom: 0; left: 0; right: 0; height: min(320px, 80vh); animation: drawerInBottom var(--dur-slow) var(--ease); box-shadow: 0 -24px 60px -20px rgba(40,55,80,0.25); }
68
- @keyframes drawerInRight { from { transform: translateX( 20px); opacity: 0; } }
69
- @keyframes drawerInLeft { from { transform: translateX(-20px); opacity: 0; } }
70
- @keyframes drawerInTop { from { transform: translateY(-20px); opacity: 0; } }
71
- @keyframes drawerInBottom { from { transform: translateY( 20px); opacity: 0; } }
72
- .drawer-head {
73
- display: flex; align-items: center; justify-content: space-between;
74
- margin-bottom: var(--gap-4);
75
- padding-bottom: var(--gap-4);
76
- border-bottom: 1px solid var(--divider);
77
- }
78
- .drawer-title { font-size: 16px; font-weight: 600; }
79
- .drawer-body { flex: 1; }
@@ -1,105 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkAAMYURWQ_cjs = require('./chunk-AAMYURWQ.cjs');
4
- var chunkYVO7XO4W_cjs = require('./chunk-YVO7XO4W.cjs');
5
- require('./tokens-HWQ7KWPG.css');
6
- require('./shared-NJHRNLRH.css');
7
- require('./Modal-AYKNIWWQ.css');
8
- var React = require('react');
9
- var ReactDOM = require('react-dom');
10
- var jsxRuntime = require('react/jsx-runtime');
11
-
12
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
13
-
14
- function _interopNamespace(e) {
15
- if (e && e.__esModule) return e;
16
- var n = Object.create(null);
17
- if (e) {
18
- Object.keys(e).forEach(function (k) {
19
- if (k !== 'default') {
20
- var d = Object.getOwnPropertyDescriptor(e, k);
21
- Object.defineProperty(n, k, d.get ? d : {
22
- enumerable: true,
23
- get: function () { return e[k]; }
24
- });
25
- }
26
- });
27
- }
28
- n.default = e;
29
- return Object.freeze(n);
30
- }
31
-
32
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
- var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
34
-
35
- var Modal = ({
36
- open,
37
- onClose,
38
- title,
39
- description,
40
- footer,
41
- children,
42
- width = 440,
43
- maskClosable = true,
44
- escClosable = true,
45
- className = ""
46
- }) => {
47
- React__namespace.useEffect(() => {
48
- if (!open || !escClosable) return;
49
- const h = (e) => e.key === "Escape" && onClose?.();
50
- window.addEventListener("keydown", h);
51
- return () => window.removeEventListener("keydown", h);
52
- }, [open, escClosable, onClose]);
53
- if (!open || typeof document === "undefined") return null;
54
- return ReactDOM__default.default.createPortal(
55
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: `modal-overlay ${className}`, onClick: () => maskClosable && onClose?.(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal", style: { width }, onClick: (e) => e.stopPropagation(), children: [
56
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-head", children: [
57
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-titles", children: [
58
- title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-title", children: title }),
59
- description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-desc", children: description })
60
- ] }),
61
- /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: "x", size: 16 }) })
62
- ] }),
63
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-body", children }),
64
- footer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-foot", children: footer }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-foot", children: [
65
- /* @__PURE__ */ jsxRuntime.jsx(chunkAAMYURWQ_cjs.Button, { variant: "ghost", onClick: onClose, children: "\u53D6\u6D88" }),
66
- /* @__PURE__ */ jsxRuntime.jsx(chunkAAMYURWQ_cjs.Button, { variant: "primary", onClick: onClose, children: "\u786E\u5B9A" })
67
- ] })
68
- ] }) }),
69
- document.body
70
- );
71
- };
72
- var Drawer = ({
73
- open,
74
- onClose,
75
- placement = "right",
76
- size = 380,
77
- title,
78
- footer,
79
- children,
80
- maskClosable = true,
81
- className = ""
82
- }) => {
83
- if (!open || typeof document === "undefined") return null;
84
- const isV = placement === "left" || placement === "right";
85
- const style = isV ? { width: size } : { height: size };
86
- return ReactDOM__default.default.createPortal(
87
- /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
88
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drawer-overlay", onClick: () => maskClosable && onClose?.() }),
89
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `drawer ${placement} ${className}`, style, onClick: (e) => e.stopPropagation(), children: [
90
- title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "drawer-head", children: [
91
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drawer-title", children: title }),
92
- /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(chunkYVO7XO4W_cjs.Icon, { name: "x", size: 16 }) })
93
- ] }),
94
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drawer-body", children }),
95
- footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-foot", children: footer })
96
- ] })
97
- ] }),
98
- document.body
99
- );
100
- };
101
-
102
- exports.Drawer = Drawer;
103
- exports.Modal = Modal;
104
- //# sourceMappingURL=chunk-KF4MCHZL.cjs.map
105
- //# sourceMappingURL=chunk-KF4MCHZL.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":["React","ReactDOM","jsx","jsxs","Icon","Button","Fragment"],"mappings":"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","file":"chunk-KF4MCHZL.cjs","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Modal.css\";\nimport * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\n\nexport interface ModalProps {\n open: boolean;\n onClose?: () => void;\n title?: React.ReactNode;\n description?: React.ReactNode;\n footer?: React.ReactNode;\n children?: React.ReactNode;\n width?: number | string;\n /** Close when clicking the mask. Default true. */\n maskClosable?: boolean;\n /** Close on Escape key. Default true. */\n escClosable?: boolean;\n className?: string;\n}\n\n/** `Modal` — centered dialog with mask. Renders into `document.body`. */\nexport const Modal: React.FC<ModalProps> = ({\n open,\n onClose,\n title,\n description,\n footer,\n children,\n width = 440,\n maskClosable = true,\n escClosable = true,\n className = \"\",\n}) => {\n React.useEffect(() => {\n if (!open || !escClosable) return;\n const h = (e: KeyboardEvent) => e.key === \"Escape\" && onClose?.();\n window.addEventListener(\"keydown\", h);\n return () => window.removeEventListener(\"keydown\", h);\n }, [open, escClosable, onClose]);\n\n if (!open || typeof document === \"undefined\") return null;\n return ReactDOM.createPortal(\n <div className={`modal-overlay ${className}`} onClick={() => maskClosable && onClose?.()}>\n <div className=\"modal\" style={{ width }} onClick={(e) => e.stopPropagation()}>\n <div className=\"modal-head\">\n <div className=\"modal-titles\">\n {title && <div className=\"modal-title\">{title}</div>}\n {description && <div className=\"modal-desc\">{description}</div>}\n </div>\n <button type=\"button\" className=\"modal-close\" onClick={onClose} aria-label=\"Close\">\n <Icon name=\"x\" size={16} />\n </button>\n </div>\n <div className=\"modal-body\">{children}</div>\n {footer !== undefined ? (\n <div className=\"modal-foot\">{footer}</div>\n ) : (\n <div className=\"modal-foot\">\n <Button variant=\"ghost\" onClick={onClose}>取消</Button>\n <Button variant=\"primary\" onClick={onClose}>确定</Button>\n </div>\n )}\n </div>\n </div>,\n document.body\n );\n};\n\nexport interface DrawerProps extends Omit<ModalProps, \"width\"> {\n /** Edge the drawer slides from. */\n placement?: \"left\" | \"right\" | \"top\" | \"bottom\";\n size?: number | string;\n}\n\n/** `Drawer` — slide-in panel from an edge. */\nexport const Drawer: React.FC<DrawerProps> = ({\n open,\n onClose,\n placement = \"right\",\n size = 380,\n title,\n footer,\n children,\n maskClosable = true,\n className = \"\",\n}) => {\n if (!open || typeof document === \"undefined\") return null;\n const isV = placement === \"left\" || placement === \"right\";\n const style: React.CSSProperties = isV ? { width: size } : { height: size };\n return ReactDOM.createPortal(\n <>\n <div className=\"drawer-overlay\" onClick={() => maskClosable && onClose?.()} />\n <div className={`drawer ${placement} ${className}`} style={style} onClick={(e) => e.stopPropagation()}>\n {title && (\n <div className=\"drawer-head\">\n <div className=\"drawer-title\">{title}</div>\n <button type=\"button\" className=\"modal-close\" onClick={onClose} aria-label=\"Close\">\n <Icon name=\"x\" size={16} />\n </button>\n </div>\n )}\n <div className=\"drawer-body\">{children}</div>\n {footer && <div className=\"modal-foot\">{footer}</div>}\n </div>\n </>,\n document.body\n );\n};\n"]}
@@ -1,79 +0,0 @@
1
- import { Button } from './chunk-5EYI27B6.js';
2
- import { Icon } from './chunk-GEYMWUW6.js';
3
- import './tokens-HWQ7KWPG.css';
4
- import './shared-NJHRNLRH.css';
5
- import './Modal-AYKNIWWQ.css';
6
- import * as React from 'react';
7
- import ReactDOM from 'react-dom';
8
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
9
-
10
- var Modal = ({
11
- open,
12
- onClose,
13
- title,
14
- description,
15
- footer,
16
- children,
17
- width = 440,
18
- maskClosable = true,
19
- escClosable = true,
20
- className = ""
21
- }) => {
22
- React.useEffect(() => {
23
- if (!open || !escClosable) return;
24
- const h = (e) => e.key === "Escape" && onClose?.();
25
- window.addEventListener("keydown", h);
26
- return () => window.removeEventListener("keydown", h);
27
- }, [open, escClosable, onClose]);
28
- if (!open || typeof document === "undefined") return null;
29
- return ReactDOM.createPortal(
30
- /* @__PURE__ */ jsx("div", { className: `modal-overlay ${className}`, onClick: () => maskClosable && onClose?.(), children: /* @__PURE__ */ jsxs("div", { className: "modal", style: { width }, onClick: (e) => e.stopPropagation(), children: [
31
- /* @__PURE__ */ jsxs("div", { className: "modal-head", children: [
32
- /* @__PURE__ */ jsxs("div", { className: "modal-titles", children: [
33
- title && /* @__PURE__ */ jsx("div", { className: "modal-title", children: title }),
34
- description && /* @__PURE__ */ jsx("div", { className: "modal-desc", children: description })
35
- ] }),
36
- /* @__PURE__ */ jsx("button", { type: "button", className: "modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 }) })
37
- ] }),
38
- /* @__PURE__ */ jsx("div", { className: "modal-body", children }),
39
- footer !== void 0 ? /* @__PURE__ */ jsx("div", { className: "modal-foot", children: footer }) : /* @__PURE__ */ jsxs("div", { className: "modal-foot", children: [
40
- /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: "\u53D6\u6D88" }),
41
- /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onClose, children: "\u786E\u5B9A" })
42
- ] })
43
- ] }) }),
44
- document.body
45
- );
46
- };
47
- var Drawer = ({
48
- open,
49
- onClose,
50
- placement = "right",
51
- size = 380,
52
- title,
53
- footer,
54
- children,
55
- maskClosable = true,
56
- className = ""
57
- }) => {
58
- if (!open || typeof document === "undefined") return null;
59
- const isV = placement === "left" || placement === "right";
60
- const style = isV ? { width: size } : { height: size };
61
- return ReactDOM.createPortal(
62
- /* @__PURE__ */ jsxs(Fragment, { children: [
63
- /* @__PURE__ */ jsx("div", { className: "drawer-overlay", onClick: () => maskClosable && onClose?.() }),
64
- /* @__PURE__ */ jsxs("div", { className: `drawer ${placement} ${className}`, style, onClick: (e) => e.stopPropagation(), children: [
65
- title && /* @__PURE__ */ jsxs("div", { className: "drawer-head", children: [
66
- /* @__PURE__ */ jsx("div", { className: "drawer-title", children: title }),
67
- /* @__PURE__ */ jsx("button", { type: "button", className: "modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 }) })
68
- ] }),
69
- /* @__PURE__ */ jsx("div", { className: "drawer-body", children }),
70
- footer && /* @__PURE__ */ jsx("div", { className: "modal-foot", children: footer })
71
- ] })
72
- ] }),
73
- document.body
74
- );
75
- };
76
-
77
- export { Drawer, Modal };
78
- //# sourceMappingURL=chunk-Q33V7MSK.js.map
79
- //# sourceMappingURL=chunk-Q33V7MSK.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","file":"chunk-Q33V7MSK.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Modal.css\";\nimport * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\n\nexport interface ModalProps {\n open: boolean;\n onClose?: () => void;\n title?: React.ReactNode;\n description?: React.ReactNode;\n footer?: React.ReactNode;\n children?: React.ReactNode;\n width?: number | string;\n /** Close when clicking the mask. Default true. */\n maskClosable?: boolean;\n /** Close on Escape key. Default true. */\n escClosable?: boolean;\n className?: string;\n}\n\n/** `Modal` — centered dialog with mask. Renders into `document.body`. */\nexport const Modal: React.FC<ModalProps> = ({\n open,\n onClose,\n title,\n description,\n footer,\n children,\n width = 440,\n maskClosable = true,\n escClosable = true,\n className = \"\",\n}) => {\n React.useEffect(() => {\n if (!open || !escClosable) return;\n const h = (e: KeyboardEvent) => e.key === \"Escape\" && onClose?.();\n window.addEventListener(\"keydown\", h);\n return () => window.removeEventListener(\"keydown\", h);\n }, [open, escClosable, onClose]);\n\n if (!open || typeof document === \"undefined\") return null;\n return ReactDOM.createPortal(\n <div className={`modal-overlay ${className}`} onClick={() => maskClosable && onClose?.()}>\n <div className=\"modal\" style={{ width }} onClick={(e) => e.stopPropagation()}>\n <div className=\"modal-head\">\n <div className=\"modal-titles\">\n {title && <div className=\"modal-title\">{title}</div>}\n {description && <div className=\"modal-desc\">{description}</div>}\n </div>\n <button type=\"button\" className=\"modal-close\" onClick={onClose} aria-label=\"Close\">\n <Icon name=\"x\" size={16} />\n </button>\n </div>\n <div className=\"modal-body\">{children}</div>\n {footer !== undefined ? (\n <div className=\"modal-foot\">{footer}</div>\n ) : (\n <div className=\"modal-foot\">\n <Button variant=\"ghost\" onClick={onClose}>取消</Button>\n <Button variant=\"primary\" onClick={onClose}>确定</Button>\n </div>\n )}\n </div>\n </div>,\n document.body\n );\n};\n\nexport interface DrawerProps extends Omit<ModalProps, \"width\"> {\n /** Edge the drawer slides from. */\n placement?: \"left\" | \"right\" | \"top\" | \"bottom\";\n size?: number | string;\n}\n\n/** `Drawer` — slide-in panel from an edge. */\nexport const Drawer: React.FC<DrawerProps> = ({\n open,\n onClose,\n placement = \"right\",\n size = 380,\n title,\n footer,\n children,\n maskClosable = true,\n className = \"\",\n}) => {\n if (!open || typeof document === \"undefined\") return null;\n const isV = placement === \"left\" || placement === \"right\";\n const style: React.CSSProperties = isV ? { width: size } : { height: size };\n return ReactDOM.createPortal(\n <>\n <div className=\"drawer-overlay\" onClick={() => maskClosable && onClose?.()} />\n <div className={`drawer ${placement} ${className}`} style={style} onClick={(e) => e.stopPropagation()}>\n {title && (\n <div className=\"drawer-head\">\n <div className=\"drawer-title\">{title}</div>\n <button type=\"button\" className=\"modal-close\" onClick={onClose} aria-label=\"Close\">\n <Icon name=\"x\" size={16} />\n </button>\n </div>\n )}\n <div className=\"drawer-body\">{children}</div>\n {footer && <div className=\"modal-foot\">{footer}</div>}\n </div>\n </>,\n document.body\n );\n};\n"]}