@996-design/996-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/NOTICE.md +35 -0
- package/README.md +31 -0
- package/dist/cjs/index.cjs +4228 -0
- package/dist/cjs/index.cjs.map +41 -0
- package/dist/cjs/legacy-index.cjs +17297 -0
- package/dist/cjs/legacy-index.cjs.map +96 -0
- package/dist/cjs/pro/index.cjs +8544 -0
- package/dist/cjs/pro/index.cjs.map +35 -0
- package/dist/esm/index.js +4063 -0
- package/dist/esm/index.js.map +41 -0
- package/dist/esm/legacy-index.js +17294 -0
- package/dist/esm/legacy-index.js.map +96 -0
- package/dist/esm/pro/index.js +8554 -0
- package/dist/esm/pro/index.js.map +35 -0
- package/dist/styles.css +5816 -0
- package/dist/theme.css +601 -0
- package/dist/types/ConfigProvider.d.ts +195 -0
- package/dist/types/antd-theme.d.ts +12 -0
- package/dist/types/components/Alert.d.ts +51 -0
- package/dist/types/components/Avatar.d.ts +44 -0
- package/dist/types/components/Badge.d.ts +31 -0
- package/dist/types/components/Breadcrumb.d.ts +45 -0
- package/dist/types/components/Button.d.ts +42 -0
- package/dist/types/components/ButtonGroup.d.ts +13 -0
- package/dist/types/components/Card.d.ts +55 -0
- package/dist/types/components/Carousel.d.ts +70 -0
- package/dist/types/components/Checkbox.d.ts +43 -0
- package/dist/types/components/Collapse.d.ts +23 -0
- package/dist/types/components/ColorPicker.d.ts +143 -0
- package/dist/types/components/DataDisplayPrimitives.d.ts +205 -0
- package/dist/types/components/DataEntryPrimitives.d.ts +454 -0
- package/dist/types/components/Divider.d.ts +24 -0
- package/dist/types/components/Drawer.d.ts +68 -0
- package/dist/types/components/Dropdown.d.ts +41 -0
- package/dist/types/components/Empty.d.ts +14 -0
- package/dist/types/components/EmptyState.d.ts +6 -0
- package/dist/types/components/FeedbackPrimitives.d.ts +102 -0
- package/dist/types/components/Form.d.ts +67 -0
- package/dist/types/components/GameCover.d.ts +8 -0
- package/dist/types/components/Grid.d.ts +50 -0
- package/dist/types/components/Icon.d.ts +13 -0
- package/dist/types/components/IconButton.d.ts +14 -0
- package/dist/types/components/Input.d.ts +110 -0
- package/dist/types/components/InputNumber.d.ts +29 -0
- package/dist/types/components/LayoutPrimitives.d.ts +130 -0
- package/dist/types/components/List.d.ts +64 -0
- package/dist/types/components/Masonry.d.ts +43 -0
- package/dist/types/components/MenuList.d.ts +24 -0
- package/dist/types/components/Message.d.ts +58 -0
- package/dist/types/components/MessageToast.d.ts +27 -0
- package/dist/types/components/Modal.d.ts +123 -0
- package/dist/types/components/NavigationPrimitives.d.ts +73 -0
- package/dist/types/components/OtherPrimitives.d.ts +36 -0
- package/dist/types/components/Pagination.d.ts +18 -0
- package/dist/types/components/Panel.d.ts +8 -0
- package/dist/types/components/Popconfirm.d.ts +18 -0
- package/dist/types/components/Popover.d.ts +10 -0
- package/dist/types/components/PriceText.d.ts +9 -0
- package/dist/types/components/Progress.d.ts +57 -0
- package/dist/types/components/ProgressBar.d.ts +8 -0
- package/dist/types/components/ProgressButton.d.ts +9 -0
- package/dist/types/components/Radio.d.ts +67 -0
- package/dist/types/components/Rate.d.ts +17 -0
- package/dist/types/components/Result.d.ts +11 -0
- package/dist/types/components/SectionHeader.d.ts +11 -0
- package/dist/types/components/Segmented.d.ts +41 -0
- package/dist/types/components/SegmentedTabs.d.ts +42 -0
- package/dist/types/components/SelectInput.d.ts +33 -0
- package/dist/types/components/Skeleton.d.ts +54 -0
- package/dist/types/components/Slider.d.ts +48 -0
- package/dist/types/components/Spin.d.ts +21 -0
- package/dist/types/components/Splitter.d.ts +7 -0
- package/dist/types/components/StatCard.d.ts +10 -0
- package/dist/types/components/Statistic.d.ts +48 -0
- package/dist/types/components/StatusItem.d.ts +12 -0
- package/dist/types/components/Steps.d.ts +40 -0
- package/dist/types/components/Switch.d.ts +41 -0
- package/dist/types/components/Table.d.ts +61 -0
- package/dist/types/components/Tabs.d.ts +50 -0
- package/dist/types/components/Tag.d.ts +52 -0
- package/dist/types/components/TagPill.d.ts +7 -0
- package/dist/types/components/Tooltip.d.ts +64 -0
- package/dist/types/components/Typography.d.ts +374 -0
- package/dist/types/components/affix/utils.d.ts +10 -0
- package/dist/types/components/feedback/FloatButton.d.ts +51 -0
- package/dist/types/components/feedback/Watermark.d.ts +33 -0
- package/dist/types/components/feedback/globalHolder.d.ts +17 -0
- package/dist/types/components/form/statusContext.d.ts +18 -0
- package/dist/types/components/form/statusContext.type-smoke.d.ts +24 -0
- package/dist/types/components/splitter/Panel.d.ts +6 -0
- package/dist/types/components/splitter/SplitBar.d.ts +32 -0
- package/dist/types/components/splitter/interface.d.ts +89 -0
- package/dist/types/components/splitter/sizeUtil.d.ts +5 -0
- package/dist/types/components/splitter/useItems.d.ts +3 -0
- package/dist/types/components/splitter/useResizable.d.ts +9 -0
- package/dist/types/components/splitter/useResize.d.ts +9 -0
- package/dist/types/components/splitter/useSizes.d.ts +11 -0
- package/dist/types/components/table/columnState.d.ts +36 -0
- package/dist/types/components/table/pagination.d.ts +34 -0
- package/dist/types/components/table/selection.d.ts +23 -0
- package/dist/types/components/table/types.d.ts +163 -0
- package/dist/types/hooks/useReducedMotion.d.ts +1 -0
- package/dist/types/index.d.ts +44 -0
- package/dist/types/legacy-index.d.ts +136 -0
- package/dist/types/pro/index.d.ts +17 -0
- package/dist/types/tokens.d.ts +266 -0
- package/dist/types/utils/cn.d.ts +3 -0
- package/dist/types/utils/slots.d.ts +5 -0
- package/package.json +126 -0
|
@@ -0,0 +1,4228 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
function __accessProp(key) {
|
|
8
|
+
return this[key];
|
|
9
|
+
}
|
|
10
|
+
var __reExport = (target, mod, secondTarget) => {
|
|
11
|
+
var keys = __getOwnPropNames(mod);
|
|
12
|
+
for (let key of keys)
|
|
13
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
14
|
+
__defProp(target, key, {
|
|
15
|
+
get: __accessProp.bind(mod, key),
|
|
16
|
+
enumerable: true
|
|
17
|
+
});
|
|
18
|
+
if (secondTarget) {
|
|
19
|
+
for (let key of keys)
|
|
20
|
+
if (!__hasOwnProp.call(secondTarget, key) && key !== "default")
|
|
21
|
+
__defProp(secondTarget, key, {
|
|
22
|
+
get: __accessProp.bind(mod, key),
|
|
23
|
+
enumerable: true
|
|
24
|
+
});
|
|
25
|
+
return secondTarget;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
var __toESMCache_node;
|
|
29
|
+
var __toESMCache_esm;
|
|
30
|
+
var __toESM = (mod, isNodeMode, target) => {
|
|
31
|
+
var canCache = mod != null && typeof mod === "object";
|
|
32
|
+
if (canCache) {
|
|
33
|
+
var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
|
|
34
|
+
var cached = cache.get(mod);
|
|
35
|
+
if (cached)
|
|
36
|
+
return cached;
|
|
37
|
+
}
|
|
38
|
+
target = mod != null ? __create(__getProtoOf(mod)) : {};
|
|
39
|
+
const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
|
|
40
|
+
for (let key of __getOwnPropNames(mod))
|
|
41
|
+
if (!__hasOwnProp.call(to, key))
|
|
42
|
+
__defProp(to, key, {
|
|
43
|
+
get: __accessProp.bind(mod, key),
|
|
44
|
+
enumerable: true
|
|
45
|
+
});
|
|
46
|
+
if (canCache)
|
|
47
|
+
cache.set(mod, to);
|
|
48
|
+
return to;
|
|
49
|
+
};
|
|
50
|
+
var __toCommonJS = (from) => {
|
|
51
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
52
|
+
if (entry)
|
|
53
|
+
return entry;
|
|
54
|
+
entry = __defProp({}, "__esModule", { value: true });
|
|
55
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
56
|
+
for (var key of __getOwnPropNames(from))
|
|
57
|
+
if (!__hasOwnProp.call(entry, key))
|
|
58
|
+
__defProp(entry, key, {
|
|
59
|
+
get: __accessProp.bind(from, key),
|
|
60
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
__moduleCache.set(from, entry);
|
|
64
|
+
return entry;
|
|
65
|
+
};
|
|
66
|
+
var __moduleCache;
|
|
67
|
+
var __returnValue = (v) => v;
|
|
68
|
+
function __exportSetter(name, newValue) {
|
|
69
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
70
|
+
}
|
|
71
|
+
var __export = (target, all) => {
|
|
72
|
+
for (var name in all)
|
|
73
|
+
__defProp(target, name, {
|
|
74
|
+
get: all[name],
|
|
75
|
+
enumerable: true,
|
|
76
|
+
configurable: true,
|
|
77
|
+
set: __exportSetter.bind(all, name)
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
// src/index.ts
|
|
82
|
+
var exports_src = {};
|
|
83
|
+
__export(exports_src, {
|
|
84
|
+
useReducedMotion: () => useReducedMotion,
|
|
85
|
+
uiPackage: () => uiPackage,
|
|
86
|
+
themeToken: () => themeToken,
|
|
87
|
+
getAntd996Theme: () => getAntd996Theme,
|
|
88
|
+
cssVar: () => cssVar,
|
|
89
|
+
antd996Theme: () => antd996Theme,
|
|
90
|
+
antd996LightTheme: () => antd996LightTheme,
|
|
91
|
+
antd996DarkTheme: () => antd996DarkTheme,
|
|
92
|
+
Util: () => Util,
|
|
93
|
+
Title: () => Title,
|
|
94
|
+
Text: () => Text,
|
|
95
|
+
TagPill: () => TagPill,
|
|
96
|
+
StatusItem: () => StatusItem,
|
|
97
|
+
StatCard: () => StatCard,
|
|
98
|
+
SelectInput: () => SelectInput,
|
|
99
|
+
SegmentedTabs: () => SegmentedTabs,
|
|
100
|
+
SectionHeader: () => SectionHeader,
|
|
101
|
+
ProgressButton: () => ProgressButton,
|
|
102
|
+
ProgressBar: () => ProgressBar,
|
|
103
|
+
PriceText: () => PriceText,
|
|
104
|
+
Panel: () => Panel,
|
|
105
|
+
MessageToast: () => MessageToast,
|
|
106
|
+
MenuList: () => MenuList,
|
|
107
|
+
IconButton: () => IconButton,
|
|
108
|
+
Icon: () => Icon,
|
|
109
|
+
GameCover: () => GameCover,
|
|
110
|
+
EmptyState: () => EmptyState,
|
|
111
|
+
ButtonGroup: () => ButtonGroup
|
|
112
|
+
});
|
|
113
|
+
module.exports = __toCommonJS(exports_src);
|
|
114
|
+
__reExport(exports_src, require("@996-design/996-antd"), module.exports);
|
|
115
|
+
|
|
116
|
+
// src/antd-theme.ts
|
|
117
|
+
var exports_antd_theme = {};
|
|
118
|
+
__export(exports_antd_theme, {
|
|
119
|
+
getAntd996Theme: () => getAntd996Theme,
|
|
120
|
+
antd996Theme: () => antd996Theme,
|
|
121
|
+
antd996LightTheme: () => antd996LightTheme,
|
|
122
|
+
antd996DarkTheme: () => antd996DarkTheme
|
|
123
|
+
});
|
|
124
|
+
var import__996_antd = require("@996-design/996-antd");
|
|
125
|
+
var sharedToken = {
|
|
126
|
+
borderRadius: 8,
|
|
127
|
+
borderRadiusLG: 16,
|
|
128
|
+
colorError: "#fa433d",
|
|
129
|
+
colorInfo: "#1e8cff",
|
|
130
|
+
colorSuccess: "#07c160",
|
|
131
|
+
colorWarning: "#f39713",
|
|
132
|
+
controlHeight: 40,
|
|
133
|
+
controlHeightLG: 48,
|
|
134
|
+
controlHeightSM: 32,
|
|
135
|
+
fontFamily: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif'
|
|
136
|
+
};
|
|
137
|
+
var antd996DarkTheme = {
|
|
138
|
+
algorithm: import__996_antd.theme.darkAlgorithm,
|
|
139
|
+
cssVar: { key: "hj-996ux", prefix: "hj" },
|
|
140
|
+
token: {
|
|
141
|
+
...sharedToken,
|
|
142
|
+
colorBgBase: "#121318",
|
|
143
|
+
colorPrimary: "#ffcc33",
|
|
144
|
+
colorTextBase: "#ffffff"
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
var antd996LightTheme = {
|
|
148
|
+
algorithm: import__996_antd.theme.defaultAlgorithm,
|
|
149
|
+
cssVar: { key: "hj-996ux", prefix: "hj" },
|
|
150
|
+
token: {
|
|
151
|
+
...sharedToken,
|
|
152
|
+
colorBgBase: "#f5f7fa",
|
|
153
|
+
colorPrimary: "#9a6d00",
|
|
154
|
+
colorTextBase: "#17191f"
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
function getAntd996Theme(colorScheme) {
|
|
158
|
+
return colorScheme === "light" ? antd996LightTheme : antd996DarkTheme;
|
|
159
|
+
}
|
|
160
|
+
var antd996Theme = antd996DarkTheme;
|
|
161
|
+
// src/components/ButtonGroup.tsx
|
|
162
|
+
var exports_ButtonGroup = {};
|
|
163
|
+
__export(exports_ButtonGroup, {
|
|
164
|
+
ButtonGroup: () => ButtonGroup
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
// src/utils/cn.ts
|
|
168
|
+
function cn(...values) {
|
|
169
|
+
return values.filter(Boolean).join(" ");
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
// src/utils/slots.ts
|
|
173
|
+
function slotClass(classNames, slot, ...defaults) {
|
|
174
|
+
return cn(...defaults, classNames?.[slot]);
|
|
175
|
+
}
|
|
176
|
+
function slotStyle(styles, slot, defaults) {
|
|
177
|
+
return { ...defaults, ...styles?.[slot] };
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// src/components/ButtonGroup.tsx
|
|
181
|
+
var jsx_dev_runtime = require("react/jsx-dev-runtime");
|
|
182
|
+
function ButtonGroup({
|
|
183
|
+
attached = true,
|
|
184
|
+
block = false,
|
|
185
|
+
children,
|
|
186
|
+
className = "",
|
|
187
|
+
classNames,
|
|
188
|
+
separated = false,
|
|
189
|
+
style,
|
|
190
|
+
styles,
|
|
191
|
+
...props
|
|
192
|
+
}) {
|
|
193
|
+
return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
|
|
194
|
+
className: slotClass(classNames, "root", "hj-button-group", attached && "hj-button-group-attached", block && "hj-button-group-block", separated && "hj-button-group-separated", className),
|
|
195
|
+
role: "group",
|
|
196
|
+
style: slotStyle(styles, "root", style),
|
|
197
|
+
...props,
|
|
198
|
+
children
|
|
199
|
+
}, undefined, false, undefined, this);
|
|
200
|
+
}
|
|
201
|
+
// src/components/EmptyState.tsx
|
|
202
|
+
var exports_EmptyState = {};
|
|
203
|
+
__export(exports_EmptyState, {
|
|
204
|
+
EmptyState: () => EmptyState
|
|
205
|
+
});
|
|
206
|
+
var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
|
|
207
|
+
function EmptyState({ description, title }) {
|
|
208
|
+
return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
|
|
209
|
+
className: "rounded-[4px] border border-dashed border-[#3b4652] bg-[#111923] p-4 text-center",
|
|
210
|
+
children: [
|
|
211
|
+
/* @__PURE__ */ jsx_dev_runtime2.jsxDEV("p", {
|
|
212
|
+
className: "text-sm font-semibold text-[#f2f4f6]",
|
|
213
|
+
children: title
|
|
214
|
+
}, undefined, false, undefined, this),
|
|
215
|
+
description ? /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("p", {
|
|
216
|
+
className: "mt-1.5 text-xs text-[#6f7985]",
|
|
217
|
+
children: description
|
|
218
|
+
}, undefined, false, undefined, this) : null
|
|
219
|
+
]
|
|
220
|
+
}, undefined, true, undefined, this);
|
|
221
|
+
}
|
|
222
|
+
// src/components/GameCover.tsx
|
|
223
|
+
var exports_GameCover = {};
|
|
224
|
+
__export(exports_GameCover, {
|
|
225
|
+
GameCover: () => GameCover
|
|
226
|
+
});
|
|
227
|
+
var jsx_dev_runtime3 = require("react/jsx-dev-runtime");
|
|
228
|
+
function GameCover({ alt = "", className = "", fallback, src }) {
|
|
229
|
+
if (src) {
|
|
230
|
+
return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("img", {
|
|
231
|
+
className: `h-full w-full object-cover ${className}`,
|
|
232
|
+
alt,
|
|
233
|
+
src
|
|
234
|
+
}, undefined, false, undefined, this);
|
|
235
|
+
}
|
|
236
|
+
return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
|
|
237
|
+
className: `flex h-full w-full items-center justify-center bg-[#151f29] text-xl font-semibold text-[#6f7985] ${className}`,
|
|
238
|
+
children: fallback
|
|
239
|
+
}, undefined, false, undefined, this);
|
|
240
|
+
}
|
|
241
|
+
// src/components/Icon.tsx
|
|
242
|
+
var exports_Icon = {};
|
|
243
|
+
__export(exports_Icon, {
|
|
244
|
+
Icon: () => Icon
|
|
245
|
+
});
|
|
246
|
+
var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
|
|
247
|
+
function Icon({
|
|
248
|
+
className = "",
|
|
249
|
+
classNames,
|
|
250
|
+
name,
|
|
251
|
+
size = 16,
|
|
252
|
+
strokeWidth = 2,
|
|
253
|
+
style,
|
|
254
|
+
styles,
|
|
255
|
+
...props
|
|
256
|
+
}) {
|
|
257
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("svg", {
|
|
258
|
+
"aria-hidden": props["aria-label"] ? undefined : true,
|
|
259
|
+
className: slotClass(classNames, "root", "inline-block shrink-0", className),
|
|
260
|
+
fill: "none",
|
|
261
|
+
height: size,
|
|
262
|
+
style: slotStyle(styles, "root", style),
|
|
263
|
+
viewBox: "0 0 24 24",
|
|
264
|
+
width: size,
|
|
265
|
+
...props,
|
|
266
|
+
children: renderPath(name, strokeWidth)
|
|
267
|
+
}, undefined, false, undefined, this);
|
|
268
|
+
}
|
|
269
|
+
function renderPath(name, strokeWidth) {
|
|
270
|
+
switch (name) {
|
|
271
|
+
case "back":
|
|
272
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
273
|
+
d: "m14.5 6-6 6 6 6",
|
|
274
|
+
stroke: "currentColor",
|
|
275
|
+
strokeLinecap: "round",
|
|
276
|
+
strokeLinejoin: "round",
|
|
277
|
+
strokeWidth
|
|
278
|
+
}, undefined, false, undefined, this);
|
|
279
|
+
case "bars":
|
|
280
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
281
|
+
children: [
|
|
282
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("rect", {
|
|
283
|
+
fill: "currentColor",
|
|
284
|
+
height: "8",
|
|
285
|
+
rx: "1.5",
|
|
286
|
+
width: "4",
|
|
287
|
+
x: "4",
|
|
288
|
+
y: "10"
|
|
289
|
+
}, undefined, false, undefined, this),
|
|
290
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("rect", {
|
|
291
|
+
fill: "currentColor",
|
|
292
|
+
height: "14",
|
|
293
|
+
rx: "1.5",
|
|
294
|
+
width: "4",
|
|
295
|
+
x: "10",
|
|
296
|
+
y: "4"
|
|
297
|
+
}, undefined, false, undefined, this),
|
|
298
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("rect", {
|
|
299
|
+
fill: "currentColor",
|
|
300
|
+
height: "6",
|
|
301
|
+
rx: "1.5",
|
|
302
|
+
width: "4",
|
|
303
|
+
x: "16",
|
|
304
|
+
y: "12"
|
|
305
|
+
}, undefined, false, undefined, this)
|
|
306
|
+
]
|
|
307
|
+
}, undefined, true, undefined, this);
|
|
308
|
+
case "bell":
|
|
309
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
310
|
+
children: [
|
|
311
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
312
|
+
d: "M6.5 10.5c0-3.4 2.1-5.7 5.5-5.7s5.5 2.3 5.5 5.7v3.2l1.5 2H5l1.5-2v-3.2Z",
|
|
313
|
+
stroke: "currentColor",
|
|
314
|
+
strokeLinejoin: "round",
|
|
315
|
+
strokeWidth
|
|
316
|
+
}, undefined, false, undefined, this),
|
|
317
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
318
|
+
d: "M9.8 18.2c.45.72 1.18 1.08 2.2 1.08s1.75-.36 2.2-1.08",
|
|
319
|
+
stroke: "currentColor",
|
|
320
|
+
strokeLinecap: "round",
|
|
321
|
+
strokeWidth
|
|
322
|
+
}, undefined, false, undefined, this)
|
|
323
|
+
]
|
|
324
|
+
}, undefined, true, undefined, this);
|
|
325
|
+
case "calendar":
|
|
326
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
327
|
+
children: [
|
|
328
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("rect", {
|
|
329
|
+
height: "16",
|
|
330
|
+
rx: "3",
|
|
331
|
+
stroke: "currentColor",
|
|
332
|
+
strokeWidth,
|
|
333
|
+
width: "16",
|
|
334
|
+
x: "4",
|
|
335
|
+
y: "5"
|
|
336
|
+
}, undefined, false, undefined, this),
|
|
337
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
338
|
+
d: "M8 3.5v4M16 3.5v4M4 10h16",
|
|
339
|
+
stroke: "currentColor",
|
|
340
|
+
strokeLinecap: "round",
|
|
341
|
+
strokeWidth
|
|
342
|
+
}, undefined, false, undefined, this)
|
|
343
|
+
]
|
|
344
|
+
}, undefined, true, undefined, this);
|
|
345
|
+
case "cart":
|
|
346
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
347
|
+
children: [
|
|
348
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
349
|
+
d: "M4 5h2l1.5 9h9.2l2-6.5H7",
|
|
350
|
+
stroke: "currentColor",
|
|
351
|
+
strokeLinecap: "round",
|
|
352
|
+
strokeLinejoin: "round",
|
|
353
|
+
strokeWidth
|
|
354
|
+
}, undefined, false, undefined, this),
|
|
355
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
356
|
+
cx: "9.3",
|
|
357
|
+
cy: "18.5",
|
|
358
|
+
fill: "currentColor",
|
|
359
|
+
r: "1.3"
|
|
360
|
+
}, undefined, false, undefined, this),
|
|
361
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
362
|
+
cx: "16.4",
|
|
363
|
+
cy: "18.5",
|
|
364
|
+
fill: "currentColor",
|
|
365
|
+
r: "1.3"
|
|
366
|
+
}, undefined, false, undefined, this)
|
|
367
|
+
]
|
|
368
|
+
}, undefined, true, undefined, this);
|
|
369
|
+
case "check":
|
|
370
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
371
|
+
d: "m5 12.5 4.2 4.2L19 7",
|
|
372
|
+
stroke: "currentColor",
|
|
373
|
+
strokeLinecap: "round",
|
|
374
|
+
strokeLinejoin: "round",
|
|
375
|
+
strokeWidth
|
|
376
|
+
}, undefined, false, undefined, this);
|
|
377
|
+
case "chevron-down":
|
|
378
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
379
|
+
d: "m7 10 5 5 5-5",
|
|
380
|
+
stroke: "currentColor",
|
|
381
|
+
strokeLinecap: "round",
|
|
382
|
+
strokeLinejoin: "round",
|
|
383
|
+
strokeWidth
|
|
384
|
+
}, undefined, false, undefined, this);
|
|
385
|
+
case "chevron-right":
|
|
386
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
387
|
+
d: "m10 7 5 5-5 5",
|
|
388
|
+
stroke: "currentColor",
|
|
389
|
+
strokeLinecap: "round",
|
|
390
|
+
strokeLinejoin: "round",
|
|
391
|
+
strokeWidth
|
|
392
|
+
}, undefined, false, undefined, this);
|
|
393
|
+
case "close":
|
|
394
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
395
|
+
d: "m7 7 10 10M17 7 7 17",
|
|
396
|
+
stroke: "currentColor",
|
|
397
|
+
strokeLinecap: "round",
|
|
398
|
+
strokeWidth
|
|
399
|
+
}, undefined, false, undefined, this);
|
|
400
|
+
case "copy":
|
|
401
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
402
|
+
children: [
|
|
403
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("rect", {
|
|
404
|
+
height: "11",
|
|
405
|
+
rx: "2",
|
|
406
|
+
stroke: "currentColor",
|
|
407
|
+
strokeWidth,
|
|
408
|
+
width: "11",
|
|
409
|
+
x: "8",
|
|
410
|
+
y: "5"
|
|
411
|
+
}, undefined, false, undefined, this),
|
|
412
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
413
|
+
d: "M5 8v9c0 1.1.9 2 2 2h9",
|
|
414
|
+
stroke: "currentColor",
|
|
415
|
+
strokeLinecap: "round",
|
|
416
|
+
strokeWidth
|
|
417
|
+
}, undefined, false, undefined, this)
|
|
418
|
+
]
|
|
419
|
+
}, undefined, true, undefined, this);
|
|
420
|
+
case "document":
|
|
421
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
422
|
+
children: [
|
|
423
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("rect", {
|
|
424
|
+
height: "20",
|
|
425
|
+
rx: "4",
|
|
426
|
+
stroke: "currentColor",
|
|
427
|
+
strokeWidth,
|
|
428
|
+
width: "20",
|
|
429
|
+
x: "2",
|
|
430
|
+
y: "2"
|
|
431
|
+
}, undefined, false, undefined, this),
|
|
432
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
433
|
+
d: "M8 8h8M8 12h8M8 16h5",
|
|
434
|
+
stroke: "currentColor",
|
|
435
|
+
strokeLinecap: "round",
|
|
436
|
+
strokeWidth
|
|
437
|
+
}, undefined, false, undefined, this)
|
|
438
|
+
]
|
|
439
|
+
}, undefined, true, undefined, this);
|
|
440
|
+
case "download":
|
|
441
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
442
|
+
children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
443
|
+
d: "M12 4v10M8 10l4 4 4-4M5 19h14",
|
|
444
|
+
stroke: "currentColor",
|
|
445
|
+
strokeLinecap: "round",
|
|
446
|
+
strokeLinejoin: "round",
|
|
447
|
+
strokeWidth
|
|
448
|
+
}, undefined, false, undefined, this)
|
|
449
|
+
}, undefined, false, undefined, this);
|
|
450
|
+
case "eye":
|
|
451
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
452
|
+
children: [
|
|
453
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
454
|
+
d: "M3.5 12s3-5 8.5-5 8.5 5 8.5 5-3 5-8.5 5-8.5-5-8.5-5Z",
|
|
455
|
+
stroke: "currentColor",
|
|
456
|
+
strokeLinejoin: "round",
|
|
457
|
+
strokeWidth
|
|
458
|
+
}, undefined, false, undefined, this),
|
|
459
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
460
|
+
cx: "12",
|
|
461
|
+
cy: "12",
|
|
462
|
+
r: "2.2",
|
|
463
|
+
stroke: "currentColor",
|
|
464
|
+
strokeWidth
|
|
465
|
+
}, undefined, false, undefined, this)
|
|
466
|
+
]
|
|
467
|
+
}, undefined, true, undefined, this);
|
|
468
|
+
case "flame":
|
|
469
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
470
|
+
d: "M12.4 21c-3.4 0-6.2-2.3-6.2-5.9 0-2.4 1.4-4.3 3.4-5.9.4 1.8 1.4 2.8 2.6 3.3-.6-3.1.8-5.8 3-7.5.3 2.8 2.6 4.4 2.6 8.1 0 4.6-2.6 7.9-5.4 7.9Z",
|
|
471
|
+
stroke: "currentColor",
|
|
472
|
+
strokeLinejoin: "round",
|
|
473
|
+
strokeWidth
|
|
474
|
+
}, undefined, false, undefined, this);
|
|
475
|
+
case "gamepad":
|
|
476
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
477
|
+
children: [
|
|
478
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
479
|
+
d: "M7.1 8.2h9.8c1.73 0 2.8.93 3.18 2.76l.66 3.17c.34 1.62-.53 2.77-1.95 2.77-.84 0-1.39-.34-2.06-1.12l-.83-.98H8.1l-.83.98c-.67.78-1.22 1.12-2.06 1.12-1.42 0-2.29-1.15-1.95-2.77l.66-3.17C4.3 9.13 5.37 8.2 7.1 8.2Z",
|
|
480
|
+
stroke: "currentColor",
|
|
481
|
+
strokeLinejoin: "round",
|
|
482
|
+
strokeWidth
|
|
483
|
+
}, undefined, false, undefined, this),
|
|
484
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
485
|
+
d: "M7.1 12.5h3.4M8.8 10.8v3.4",
|
|
486
|
+
stroke: "currentColor",
|
|
487
|
+
strokeLinecap: "round",
|
|
488
|
+
strokeWidth
|
|
489
|
+
}, undefined, false, undefined, this),
|
|
490
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
491
|
+
cx: "15.1",
|
|
492
|
+
cy: "12.5",
|
|
493
|
+
fill: "currentColor",
|
|
494
|
+
r: "1"
|
|
495
|
+
}, undefined, false, undefined, this),
|
|
496
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
497
|
+
cx: "17.7",
|
|
498
|
+
cy: "12.5",
|
|
499
|
+
fill: "currentColor",
|
|
500
|
+
r: "1"
|
|
501
|
+
}, undefined, false, undefined, this)
|
|
502
|
+
]
|
|
503
|
+
}, undefined, true, undefined, this);
|
|
504
|
+
case "gift":
|
|
505
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
506
|
+
children: [
|
|
507
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
508
|
+
d: "M4 10h16v10H4V10ZM3.5 7h17v3h-17V7ZM12 7v13",
|
|
509
|
+
stroke: "currentColor",
|
|
510
|
+
strokeLinejoin: "round",
|
|
511
|
+
strokeWidth
|
|
512
|
+
}, undefined, false, undefined, this),
|
|
513
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
514
|
+
d: "M12 7c-2.7 0-4.5-.8-4.5-2.2C7.5 3.8 8.2 3 9.2 3 10.8 3 12 7 12 7Zm0 0c2.7 0 4.5-.8 4.5-2.2 0-1-.7-1.8-1.7-1.8C13.2 3 12 7 12 7Z",
|
|
515
|
+
stroke: "currentColor",
|
|
516
|
+
strokeLinejoin: "round",
|
|
517
|
+
strokeWidth
|
|
518
|
+
}, undefined, false, undefined, this)
|
|
519
|
+
]
|
|
520
|
+
}, undefined, true, undefined, this);
|
|
521
|
+
case "lock":
|
|
522
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
523
|
+
children: [
|
|
524
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
525
|
+
d: "M7.5 10V8.2C7.5 5.65 9.2 4 12 4s4.5 1.65 4.5 4.2V10",
|
|
526
|
+
stroke: "currentColor",
|
|
527
|
+
strokeLinecap: "round",
|
|
528
|
+
strokeWidth
|
|
529
|
+
}, undefined, false, undefined, this),
|
|
530
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("rect", {
|
|
531
|
+
height: "9",
|
|
532
|
+
rx: "2.2",
|
|
533
|
+
stroke: "currentColor",
|
|
534
|
+
strokeWidth,
|
|
535
|
+
width: "15",
|
|
536
|
+
x: "4.5",
|
|
537
|
+
y: "10"
|
|
538
|
+
}, undefined, false, undefined, this)
|
|
539
|
+
]
|
|
540
|
+
}, undefined, true, undefined, this);
|
|
541
|
+
case "minus":
|
|
542
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
543
|
+
d: "M5 12h14",
|
|
544
|
+
stroke: "currentColor",
|
|
545
|
+
strokeLinecap: "round",
|
|
546
|
+
strokeWidth
|
|
547
|
+
}, undefined, false, undefined, this);
|
|
548
|
+
case "plus":
|
|
549
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
550
|
+
d: "M12 5v14M5 12h14",
|
|
551
|
+
stroke: "currentColor",
|
|
552
|
+
strokeLinecap: "round",
|
|
553
|
+
strokeWidth
|
|
554
|
+
}, undefined, false, undefined, this);
|
|
555
|
+
case "refresh":
|
|
556
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
557
|
+
d: "M18 8.2A6.8 6.8 0 1 0 19 12M18 4v4.2h-4.2",
|
|
558
|
+
stroke: "currentColor",
|
|
559
|
+
strokeLinecap: "round",
|
|
560
|
+
strokeLinejoin: "round",
|
|
561
|
+
strokeWidth
|
|
562
|
+
}, undefined, false, undefined, this);
|
|
563
|
+
case "rocket":
|
|
564
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
565
|
+
children: [
|
|
566
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
567
|
+
d: "M13 5.5c2-1.9 4.3-2.4 6.2-2.2.2 1.9-.3 4.2-2.2 6.2l-5.6 5.6-3.9.9.9-3.9L13 5.5Z",
|
|
568
|
+
stroke: "currentColor",
|
|
569
|
+
strokeLinejoin: "round",
|
|
570
|
+
strokeWidth
|
|
571
|
+
}, undefined, false, undefined, this),
|
|
572
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
573
|
+
d: "M8 16l-3 3M14.8 6.2l3 3",
|
|
574
|
+
stroke: "currentColor",
|
|
575
|
+
strokeLinecap: "round",
|
|
576
|
+
strokeWidth
|
|
577
|
+
}, undefined, false, undefined, this)
|
|
578
|
+
]
|
|
579
|
+
}, undefined, true, undefined, this);
|
|
580
|
+
case "search":
|
|
581
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
582
|
+
children: [
|
|
583
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
584
|
+
cx: "11",
|
|
585
|
+
cy: "11",
|
|
586
|
+
r: "6",
|
|
587
|
+
stroke: "currentColor",
|
|
588
|
+
strokeWidth
|
|
589
|
+
}, undefined, false, undefined, this),
|
|
590
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
591
|
+
d: "m16 16 4 4",
|
|
592
|
+
stroke: "currentColor",
|
|
593
|
+
strokeLinecap: "round",
|
|
594
|
+
strokeWidth
|
|
595
|
+
}, undefined, false, undefined, this)
|
|
596
|
+
]
|
|
597
|
+
}, undefined, true, undefined, this);
|
|
598
|
+
case "shield":
|
|
599
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
600
|
+
d: "M12 3.5 18 6v5.2c0 4.2-2.3 7.2-6 9.3-3.7-2.1-6-5.1-6-9.3V6l6-2.5Z",
|
|
601
|
+
stroke: "currentColor",
|
|
602
|
+
strokeLinejoin: "round",
|
|
603
|
+
strokeWidth
|
|
604
|
+
}, undefined, false, undefined, this);
|
|
605
|
+
case "star":
|
|
606
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
607
|
+
d: "m12 3.8 2.35 4.76 5.25.76-3.8 3.7.9 5.23L12 15.78l-4.7 2.47.9-5.23-3.8-3.7 5.25-.76L12 3.8Z",
|
|
608
|
+
stroke: "currentColor",
|
|
609
|
+
strokeLinejoin: "round",
|
|
610
|
+
strokeWidth
|
|
611
|
+
}, undefined, false, undefined, this);
|
|
612
|
+
case "tag":
|
|
613
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
614
|
+
children: [
|
|
615
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
616
|
+
d: "M4 5.5V12l7.3 7.3a2.4 2.4 0 0 0 3.4 0l4.6-4.6a2.4 2.4 0 0 0 0-3.4L12 4H5.5A1.5 1.5 0 0 0 4 5.5Z",
|
|
617
|
+
stroke: "currentColor",
|
|
618
|
+
strokeLinejoin: "round",
|
|
619
|
+
strokeWidth
|
|
620
|
+
}, undefined, false, undefined, this),
|
|
621
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
622
|
+
cx: "8",
|
|
623
|
+
cy: "8",
|
|
624
|
+
fill: "currentColor",
|
|
625
|
+
r: "1.2"
|
|
626
|
+
}, undefined, false, undefined, this)
|
|
627
|
+
]
|
|
628
|
+
}, undefined, true, undefined, this);
|
|
629
|
+
case "thumb-up":
|
|
630
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
631
|
+
children: [
|
|
632
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
633
|
+
d: "M8.5 10.5 11.5 4c1.7.4 2.3 1.7 1.8 3.2l-.6 1.8H18c1.4 0 2.3 1.2 2 2.6l-1.1 5.7c-.3 1.4-1.3 2.2-2.7 2.2H8.5v-9Z",
|
|
634
|
+
stroke: "currentColor",
|
|
635
|
+
strokeLinejoin: "round",
|
|
636
|
+
strokeWidth
|
|
637
|
+
}, undefined, false, undefined, this),
|
|
638
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
639
|
+
d: "M4 10.5h4.5v9H4z",
|
|
640
|
+
stroke: "currentColor",
|
|
641
|
+
strokeLinejoin: "round",
|
|
642
|
+
strokeWidth
|
|
643
|
+
}, undefined, false, undefined, this)
|
|
644
|
+
]
|
|
645
|
+
}, undefined, true, undefined, this);
|
|
646
|
+
case "user":
|
|
647
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
648
|
+
children: [
|
|
649
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
650
|
+
d: "M7.7 8.4a4.3 4.3 0 1 1 8.6 0 4.3 4.3 0 0 1-8.6 0Z",
|
|
651
|
+
stroke: "currentColor",
|
|
652
|
+
strokeWidth
|
|
653
|
+
}, undefined, false, undefined, this),
|
|
654
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
655
|
+
d: "M5 20c.66-3.38 3.2-5.33 7-5.33s6.34 1.95 7 5.33",
|
|
656
|
+
stroke: "currentColor",
|
|
657
|
+
strokeLinecap: "round",
|
|
658
|
+
strokeWidth
|
|
659
|
+
}, undefined, false, undefined, this)
|
|
660
|
+
]
|
|
661
|
+
}, undefined, true, undefined, this);
|
|
662
|
+
case "warning":
|
|
663
|
+
return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
|
|
664
|
+
children: [
|
|
665
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
666
|
+
cx: "12",
|
|
667
|
+
cy: "12",
|
|
668
|
+
fill: "currentColor",
|
|
669
|
+
r: "10"
|
|
670
|
+
}, undefined, false, undefined, this),
|
|
671
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("path", {
|
|
672
|
+
d: "M12 6.8v6.6",
|
|
673
|
+
stroke: "var(--hj-color-web-surface)",
|
|
674
|
+
strokeLinecap: "round",
|
|
675
|
+
strokeWidth
|
|
676
|
+
}, undefined, false, undefined, this),
|
|
677
|
+
/* @__PURE__ */ jsx_dev_runtime4.jsxDEV("circle", {
|
|
678
|
+
cx: "12",
|
|
679
|
+
cy: "17",
|
|
680
|
+
fill: "var(--hj-color-web-surface)",
|
|
681
|
+
r: "1.2"
|
|
682
|
+
}, undefined, false, undefined, this)
|
|
683
|
+
]
|
|
684
|
+
}, undefined, true, undefined, this);
|
|
685
|
+
}
|
|
686
|
+
}
|
|
687
|
+
// src/components/IconButton.tsx
|
|
688
|
+
var exports_IconButton = {};
|
|
689
|
+
__export(exports_IconButton, {
|
|
690
|
+
IconButton: () => IconButton
|
|
691
|
+
});
|
|
692
|
+
var jsx_dev_runtime5 = require("react/jsx-dev-runtime");
|
|
693
|
+
var toneClass = {
|
|
694
|
+
default: "border-[var(--hj-icon-button-default-border)] bg-[var(--hj-icon-button-default-bg)] text-[var(--hj-icon-button-default-fg)] hover:border-[var(--hj-icon-button-default-border-hover)] hover:text-[var(--hj-icon-button-default-fg-hover)]",
|
|
695
|
+
primary: "border-[var(--hj-icon-button-primary-border)] bg-[var(--hj-icon-button-primary-bg)] text-[var(--hj-icon-button-primary-fg)] hover:bg-[var(--hj-icon-button-primary-bg-hover)]",
|
|
696
|
+
ghost: "border-[var(--hj-icon-button-ghost-border)] bg-[var(--hj-icon-button-ghost-bg)] text-[var(--hj-icon-button-ghost-fg)] hover:text-[var(--hj-icon-button-ghost-fg-hover)]",
|
|
697
|
+
selected: "border-[var(--hj-icon-button-selected-border)] bg-[var(--hj-icon-button-selected-bg)] text-[var(--hj-icon-button-selected-fg)]"
|
|
698
|
+
};
|
|
699
|
+
var sizeClass = {
|
|
700
|
+
xs: "h-2 w-2 text-[0px]",
|
|
701
|
+
sm: "h-6 w-6 text-sm",
|
|
702
|
+
md: "h-9 w-9 text-lg"
|
|
703
|
+
};
|
|
704
|
+
function IconButton({
|
|
705
|
+
children,
|
|
706
|
+
className = "",
|
|
707
|
+
classNames,
|
|
708
|
+
size = "sm",
|
|
709
|
+
style,
|
|
710
|
+
styles,
|
|
711
|
+
tone = "default",
|
|
712
|
+
type = "button",
|
|
713
|
+
...props
|
|
714
|
+
}) {
|
|
715
|
+
return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("button", {
|
|
716
|
+
className: slotClass(classNames, "root", "hj-wave inline-flex shrink-0 items-center justify-center rounded-[3px] border font-semibold leading-none transition disabled:cursor-not-allowed disabled:opacity-50", toneClass[tone], sizeClass[size], className),
|
|
717
|
+
style: slotStyle(styles, "root", style),
|
|
718
|
+
type,
|
|
719
|
+
...props,
|
|
720
|
+
children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
|
|
721
|
+
className: slotClass(classNames, "content"),
|
|
722
|
+
style: slotStyle(styles, "content"),
|
|
723
|
+
children
|
|
724
|
+
}, undefined, false, undefined, this)
|
|
725
|
+
}, undefined, false, undefined, this);
|
|
726
|
+
}
|
|
727
|
+
// src/components/MenuList.tsx
|
|
728
|
+
var exports_MenuList = {};
|
|
729
|
+
__export(exports_MenuList, {
|
|
730
|
+
MenuList: () => MenuList
|
|
731
|
+
});
|
|
732
|
+
|
|
733
|
+
// src/ConfigProvider.tsx
|
|
734
|
+
var import_react = require("react");
|
|
735
|
+
var jsx_dev_runtime6 = require("react/jsx-dev-runtime");
|
|
736
|
+
var Variants = ["outlined", "borderless", "filled", "underlined"];
|
|
737
|
+
var defaultPrefixCls = "hj";
|
|
738
|
+
var defaultIconPrefixCls = "hjicon";
|
|
739
|
+
var defaultGetPrefixCls = (suffixCls, customizePrefixCls) => {
|
|
740
|
+
if (customizePrefixCls)
|
|
741
|
+
return customizePrefixCls;
|
|
742
|
+
return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
|
|
743
|
+
};
|
|
744
|
+
var defaultConfig = {
|
|
745
|
+
componentDisabled: false,
|
|
746
|
+
componentSize: "medium",
|
|
747
|
+
components: {},
|
|
748
|
+
disabled: false,
|
|
749
|
+
getPrefixCls: defaultGetPrefixCls,
|
|
750
|
+
iconPrefixCls: defaultIconPrefixCls,
|
|
751
|
+
motion: true,
|
|
752
|
+
prefixCls: defaultPrefixCls,
|
|
753
|
+
rootPrefixCls: defaultPrefixCls,
|
|
754
|
+
size: "md",
|
|
755
|
+
surface: "web"
|
|
756
|
+
};
|
|
757
|
+
var ConfigContext = import_react.createContext(defaultConfig);
|
|
758
|
+
var { Consumer: ConfigConsumer } = ConfigContext;
|
|
759
|
+
var globalPrefixCls;
|
|
760
|
+
var globalIconPrefixCls;
|
|
761
|
+
var globalTheme;
|
|
762
|
+
var globalHolderRender;
|
|
763
|
+
function getGlobalPrefixCls() {
|
|
764
|
+
return globalPrefixCls ?? defaultPrefixCls;
|
|
765
|
+
}
|
|
766
|
+
function getGlobalIconPrefixCls() {
|
|
767
|
+
return globalIconPrefixCls ?? defaultIconPrefixCls;
|
|
768
|
+
}
|
|
769
|
+
function setGlobalConfig(props) {
|
|
770
|
+
if (props.prefixCls !== undefined)
|
|
771
|
+
globalPrefixCls = props.prefixCls;
|
|
772
|
+
if (props.iconPrefixCls !== undefined)
|
|
773
|
+
globalIconPrefixCls = props.iconPrefixCls;
|
|
774
|
+
if (Object.prototype.hasOwnProperty.call(props, "holderRender")) {
|
|
775
|
+
globalHolderRender = props.holderRender;
|
|
776
|
+
}
|
|
777
|
+
if (props.theme)
|
|
778
|
+
globalTheme = props.theme;
|
|
779
|
+
}
|
|
780
|
+
function globalConfig() {
|
|
781
|
+
const prefixCls = getGlobalPrefixCls();
|
|
782
|
+
return {
|
|
783
|
+
getIconPrefixCls: getGlobalIconPrefixCls,
|
|
784
|
+
getPrefixCls: (suffixCls, customizePrefixCls) => {
|
|
785
|
+
if (customizePrefixCls)
|
|
786
|
+
return customizePrefixCls;
|
|
787
|
+
return suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
|
|
788
|
+
},
|
|
789
|
+
getRootPrefixCls: () => prefixCls,
|
|
790
|
+
getTheme: () => globalTheme,
|
|
791
|
+
holderRender: globalHolderRender
|
|
792
|
+
};
|
|
793
|
+
}
|
|
794
|
+
function isMotionDisabled(motion) {
|
|
795
|
+
return motion === false || typeof motion === "object" && motion.disabled === true;
|
|
796
|
+
}
|
|
797
|
+
function normalizeUiSize(size, fallback = "md") {
|
|
798
|
+
if (size === "small" || size === "sm")
|
|
799
|
+
return "sm";
|
|
800
|
+
if (size === "large" || size === "lg")
|
|
801
|
+
return "lg";
|
|
802
|
+
if (size === "medium" || size === "middle" || size === "md")
|
|
803
|
+
return "md";
|
|
804
|
+
return fallback;
|
|
805
|
+
}
|
|
806
|
+
function normalizeComponentSize(size, fallback) {
|
|
807
|
+
if (size === "small" || size === "sm")
|
|
808
|
+
return "small";
|
|
809
|
+
if (size === "large" || size === "lg")
|
|
810
|
+
return "large";
|
|
811
|
+
if (size === "middle")
|
|
812
|
+
return "middle";
|
|
813
|
+
if (size === "medium" || size === "md")
|
|
814
|
+
return "medium";
|
|
815
|
+
return fallback;
|
|
816
|
+
}
|
|
817
|
+
function isRecord(value) {
|
|
818
|
+
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
819
|
+
}
|
|
820
|
+
function mergeObjectMap(parent, current) {
|
|
821
|
+
if (!current)
|
|
822
|
+
return parent;
|
|
823
|
+
const merged = {
|
|
824
|
+
...parent
|
|
825
|
+
};
|
|
826
|
+
for (const [name, value] of Object.entries(current)) {
|
|
827
|
+
const parentValue = merged[name];
|
|
828
|
+
merged[name] = isRecord(parentValue) && isRecord(value) ? { ...parentValue, ...value } : value;
|
|
829
|
+
}
|
|
830
|
+
return merged;
|
|
831
|
+
}
|
|
832
|
+
function normalizeLocale(locale) {
|
|
833
|
+
if (!locale)
|
|
834
|
+
return;
|
|
835
|
+
const defaultLocale = locale.default;
|
|
836
|
+
return isRecord(defaultLocale) && defaultLocale.locale ? defaultLocale : locale;
|
|
837
|
+
}
|
|
838
|
+
function normalizeCssVarConfig(theme2, parentTheme, prefixCls, generatedKey) {
|
|
839
|
+
if (theme2.cssVar === false)
|
|
840
|
+
return false;
|
|
841
|
+
const inherited = parentTheme?.cssVar;
|
|
842
|
+
const effective = theme2.cssVar ?? inherited;
|
|
843
|
+
if (!effective)
|
|
844
|
+
return effective;
|
|
845
|
+
const parentConfig = isRecord(inherited) ? inherited : {};
|
|
846
|
+
const currentConfig = isRecord(theme2.cssVar) ? theme2.cssVar : {};
|
|
847
|
+
return {
|
|
848
|
+
...parentConfig,
|
|
849
|
+
...currentConfig,
|
|
850
|
+
key: typeof currentConfig.key === "string" ? currentConfig.key : generatedKey,
|
|
851
|
+
prefix: typeof currentConfig.prefix === "string" ? currentConfig.prefix : typeof parentConfig.prefix === "string" ? parentConfig.prefix : prefixCls
|
|
852
|
+
};
|
|
853
|
+
}
|
|
854
|
+
function mergeTheme(theme2, parentTheme, prefixCls, generatedKey) {
|
|
855
|
+
if (!theme2)
|
|
856
|
+
return parentTheme;
|
|
857
|
+
const inheritedTheme = theme2.inherit === false ? undefined : parentTheme;
|
|
858
|
+
const mergedComponents = mergeObjectMap(inheritedTheme?.components ?? {}, theme2.components);
|
|
859
|
+
const cssVar = normalizeCssVarConfig(theme2, parentTheme, prefixCls, generatedKey);
|
|
860
|
+
return {
|
|
861
|
+
...inheritedTheme,
|
|
862
|
+
...theme2,
|
|
863
|
+
components: mergedComponents,
|
|
864
|
+
cssVar,
|
|
865
|
+
hashed: theme2.hashed ?? parentTheme?.hashed,
|
|
866
|
+
token: {
|
|
867
|
+
...inheritedTheme?.token,
|
|
868
|
+
...theme2.token
|
|
869
|
+
}
|
|
870
|
+
};
|
|
871
|
+
}
|
|
872
|
+
var tokenCssVariableAliases = {
|
|
873
|
+
borderRadius: ["--hj-radius-md"],
|
|
874
|
+
borderRadiusLG: ["--hj-radius-lg"],
|
|
875
|
+
borderRadiusSM: ["--hj-radius-sm"],
|
|
876
|
+
borderRadiusXS: ["--hj-radius-xs"],
|
|
877
|
+
boxShadowSecondary: ["--hj-shadow-lg"],
|
|
878
|
+
colorBgBase: ["--hj-color-web-page"],
|
|
879
|
+
colorBgContainer: ["--hj-color-web-surface"],
|
|
880
|
+
colorBgElevated: ["--hj-color-web-surface-raised"],
|
|
881
|
+
colorBorder: ["--hj-color-web-border"],
|
|
882
|
+
colorDanger: ["--hj-color-danger"],
|
|
883
|
+
colorError: ["--hj-color-danger"],
|
|
884
|
+
colorForeground: ["--hj-color-web-foreground"],
|
|
885
|
+
colorInfo: ["--hj-color-info"],
|
|
886
|
+
colorMuted: ["--hj-color-web-muted"],
|
|
887
|
+
colorPrimary: ["--hj-color-brand"],
|
|
888
|
+
colorPrimaryActive: ["--hj-color-brand-active"],
|
|
889
|
+
colorPrimaryHover: ["--hj-color-brand-hover"],
|
|
890
|
+
colorSuccess: ["--hj-color-success"],
|
|
891
|
+
colorSurface: ["--hj-color-web-surface"],
|
|
892
|
+
colorSurfaceElevated: ["--hj-color-web-surface-raised"],
|
|
893
|
+
colorText: ["--hj-color-web-foreground"],
|
|
894
|
+
colorTextSecondary: ["--hj-color-web-muted"],
|
|
895
|
+
colorWarning: ["--hj-color-warning"],
|
|
896
|
+
motionDurationMid: ["--hj-motion-duration-normal"],
|
|
897
|
+
shadowPopup: ["--hj-shadow-lg"],
|
|
898
|
+
zDropdown: ["--hj-z-dropdown"],
|
|
899
|
+
zModal: ["--hj-z-modal"],
|
|
900
|
+
zToast: ["--hj-z-toast"]
|
|
901
|
+
};
|
|
902
|
+
function toKebabCase(value) {
|
|
903
|
+
return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
|
|
904
|
+
}
|
|
905
|
+
function formatTokenValue(name, value) {
|
|
906
|
+
if (typeof value !== "number")
|
|
907
|
+
return value;
|
|
908
|
+
if (/duration/i.test(name))
|
|
909
|
+
return `${value}ms`;
|
|
910
|
+
if (/radius/i.test(name) || /(fontSize|width|height|size|padding|margin|gap|offset|inset)$/i.test(name)) {
|
|
911
|
+
return `${value}px`;
|
|
912
|
+
}
|
|
913
|
+
return String(value);
|
|
914
|
+
}
|
|
915
|
+
function createThemeStyle(theme2) {
|
|
916
|
+
if (!theme2)
|
|
917
|
+
return {};
|
|
918
|
+
const style = {};
|
|
919
|
+
const cssVarConfig = isRecord(theme2.cssVar) ? theme2.cssVar : undefined;
|
|
920
|
+
const customPrefix = typeof cssVarConfig?.prefix === "string" ? toKebabCase(cssVarConfig.prefix) : undefined;
|
|
921
|
+
const assignToken = (name, value, namespace) => {
|
|
922
|
+
if (typeof value !== "string" && typeof value !== "number")
|
|
923
|
+
return;
|
|
924
|
+
const kebabName = toKebabCase(name);
|
|
925
|
+
if (!kebabName)
|
|
926
|
+
return;
|
|
927
|
+
const formattedValue = formatTokenValue(name, value);
|
|
928
|
+
const componentPrefix = namespace ? `${toKebabCase(namespace)}-` : "";
|
|
929
|
+
style[`--hj-${componentPrefix}${kebabName}`] = formattedValue;
|
|
930
|
+
if (customPrefix) {
|
|
931
|
+
style[`--${customPrefix}-${componentPrefix}${kebabName}`] = formattedValue;
|
|
932
|
+
}
|
|
933
|
+
if (!namespace) {
|
|
934
|
+
for (const variableName of tokenCssVariableAliases[name] ?? []) {
|
|
935
|
+
style[variableName] = formattedValue;
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
};
|
|
939
|
+
for (const [name, value] of Object.entries(theme2.token ?? {})) {
|
|
940
|
+
assignToken(name, value);
|
|
941
|
+
}
|
|
942
|
+
for (const [componentName, componentToken] of Object.entries(theme2.components ?? {})) {
|
|
943
|
+
for (const [name, value] of Object.entries(componentToken)) {
|
|
944
|
+
if (name !== "algorithm")
|
|
945
|
+
assignToken(name, value, componentName);
|
|
946
|
+
}
|
|
947
|
+
}
|
|
948
|
+
return style;
|
|
949
|
+
}
|
|
950
|
+
var InternalConfigProvider = ({
|
|
951
|
+
children,
|
|
952
|
+
className,
|
|
953
|
+
componentDisabled,
|
|
954
|
+
componentSize,
|
|
955
|
+
components,
|
|
956
|
+
direction,
|
|
957
|
+
disabled,
|
|
958
|
+
dropdownMatchSelectWidth,
|
|
959
|
+
getPopupContainer,
|
|
960
|
+
getTargetContainer,
|
|
961
|
+
iconPrefixCls,
|
|
962
|
+
locale,
|
|
963
|
+
motion,
|
|
964
|
+
popupMatchSelectWidth,
|
|
965
|
+
prefixCls,
|
|
966
|
+
renderEmpty,
|
|
967
|
+
size,
|
|
968
|
+
style,
|
|
969
|
+
surface,
|
|
970
|
+
theme: theme2,
|
|
971
|
+
variant,
|
|
972
|
+
virtual
|
|
973
|
+
}) => {
|
|
974
|
+
const parent = import_react.useContext(ConfigContext);
|
|
975
|
+
const themeId = import_react.useId().replace(/:/g, "");
|
|
976
|
+
const rootPrefixCls = prefixCls ?? parent.getPrefixCls();
|
|
977
|
+
const getPrefixCls = import_react.useCallback((suffixCls, customizePrefixCls) => {
|
|
978
|
+
if (customizePrefixCls)
|
|
979
|
+
return customizePrefixCls;
|
|
980
|
+
return suffixCls ? `${rootPrefixCls}-${suffixCls}` : rootPrefixCls;
|
|
981
|
+
}, [rootPrefixCls]);
|
|
982
|
+
const localSize = componentSize ?? size;
|
|
983
|
+
const mergedTheme = import_react.useMemo(() => mergeTheme(theme2, parent.theme, rootPrefixCls, `css-var-${themeId}`), [parent.theme, rootPrefixCls, theme2, themeId]);
|
|
984
|
+
const mergedComponents = import_react.useMemo(() => mergeObjectMap(parent.components, components), [components, parent.components]);
|
|
985
|
+
const value = import_react.useMemo(() => {
|
|
986
|
+
const mergedDisabled = componentDisabled ?? disabled ?? parent.disabled;
|
|
987
|
+
return {
|
|
988
|
+
componentDisabled: mergedDisabled,
|
|
989
|
+
componentSize: normalizeComponentSize(localSize, parent.componentSize),
|
|
990
|
+
components: mergedComponents,
|
|
991
|
+
direction: direction ?? parent.direction,
|
|
992
|
+
disabled: mergedDisabled,
|
|
993
|
+
getPopupContainer: getPopupContainer ?? parent.getPopupContainer,
|
|
994
|
+
getPrefixCls,
|
|
995
|
+
getTargetContainer: getTargetContainer ?? parent.getTargetContainer,
|
|
996
|
+
iconPrefixCls: iconPrefixCls ?? parent.iconPrefixCls,
|
|
997
|
+
locale: normalizeLocale(locale) ?? parent.locale,
|
|
998
|
+
motion: motion ?? parent.motion,
|
|
999
|
+
popupMatchSelectWidth: popupMatchSelectWidth ?? dropdownMatchSelectWidth ?? parent.popupMatchSelectWidth,
|
|
1000
|
+
prefixCls: rootPrefixCls,
|
|
1001
|
+
renderEmpty: renderEmpty ?? parent.renderEmpty,
|
|
1002
|
+
rootPrefixCls,
|
|
1003
|
+
size: normalizeUiSize(localSize, parent.size),
|
|
1004
|
+
surface: surface ?? parent.surface,
|
|
1005
|
+
theme: mergedTheme,
|
|
1006
|
+
variant: variant ?? parent.variant,
|
|
1007
|
+
virtual: virtual ?? parent.virtual
|
|
1008
|
+
};
|
|
1009
|
+
}, [
|
|
1010
|
+
componentDisabled,
|
|
1011
|
+
direction,
|
|
1012
|
+
disabled,
|
|
1013
|
+
dropdownMatchSelectWidth,
|
|
1014
|
+
getPopupContainer,
|
|
1015
|
+
getPrefixCls,
|
|
1016
|
+
getTargetContainer,
|
|
1017
|
+
iconPrefixCls,
|
|
1018
|
+
localSize,
|
|
1019
|
+
locale,
|
|
1020
|
+
mergedComponents,
|
|
1021
|
+
mergedTheme,
|
|
1022
|
+
motion,
|
|
1023
|
+
parent,
|
|
1024
|
+
popupMatchSelectWidth,
|
|
1025
|
+
renderEmpty,
|
|
1026
|
+
rootPrefixCls,
|
|
1027
|
+
surface,
|
|
1028
|
+
variant,
|
|
1029
|
+
virtual
|
|
1030
|
+
]);
|
|
1031
|
+
const rootClass = value.surface === "admin" ? "huaijiu-admin-root" : "huaijiu-web-root";
|
|
1032
|
+
const cssVarClassName = isRecord(value.theme?.cssVar) && typeof value.theme.cssVar.key === "string" ? value.theme.cssVar.key : undefined;
|
|
1033
|
+
const themeStyle = import_react.useMemo(() => createThemeStyle(value.theme), [value.theme]);
|
|
1034
|
+
return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(ConfigContext.Provider, {
|
|
1035
|
+
value,
|
|
1036
|
+
children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
|
|
1037
|
+
className: cn(rootClass, value.direction === "rtl" && `${value.rootPrefixCls}-rtl`, isMotionDisabled(value.motion) && "huaijiu-motion-disabled", cssVarClassName, className),
|
|
1038
|
+
dir: value.direction,
|
|
1039
|
+
style: { ...themeStyle, ...style },
|
|
1040
|
+
children
|
|
1041
|
+
}, undefined, false, undefined, this)
|
|
1042
|
+
}, undefined, false, undefined, this);
|
|
1043
|
+
};
|
|
1044
|
+
function useConfig() {
|
|
1045
|
+
return import_react.useContext(ConfigContext);
|
|
1046
|
+
}
|
|
1047
|
+
var ConfigProvider = Object.assign(InternalConfigProvider, {
|
|
1048
|
+
ConfigConsumer,
|
|
1049
|
+
ConfigContext,
|
|
1050
|
+
config: setGlobalConfig,
|
|
1051
|
+
useConfig
|
|
1052
|
+
});
|
|
1053
|
+
ConfigProvider.displayName = "ConfigProvider";
|
|
1054
|
+
|
|
1055
|
+
// src/components/MenuList.tsx
|
|
1056
|
+
var jsx_dev_runtime7 = require("react/jsx-dev-runtime");
|
|
1057
|
+
var rootWidthClass = {
|
|
1058
|
+
dropdown: "w-full py-0",
|
|
1059
|
+
menu: "w-40 py-2",
|
|
1060
|
+
user: "w-[172px] py-2"
|
|
1061
|
+
};
|
|
1062
|
+
var itemClass = {
|
|
1063
|
+
dropdown: "h-[45px] px-4 text-base leading-6",
|
|
1064
|
+
menu: "h-10 px-4 text-sm leading-[18px]",
|
|
1065
|
+
user: "h-16 px-4"
|
|
1066
|
+
};
|
|
1067
|
+
function MenuList({
|
|
1068
|
+
activeId,
|
|
1069
|
+
className = "",
|
|
1070
|
+
classNames,
|
|
1071
|
+
disabled,
|
|
1072
|
+
items,
|
|
1073
|
+
onSelect,
|
|
1074
|
+
style,
|
|
1075
|
+
styles,
|
|
1076
|
+
variant
|
|
1077
|
+
}) {
|
|
1078
|
+
const config = useConfig();
|
|
1079
|
+
const mergedVariant = variant ?? config.components.MenuList?.variant ?? "menu";
|
|
1080
|
+
const mergedDisabled = disabled || config.disabled || config.components.MenuList?.disabled;
|
|
1081
|
+
return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
|
|
1082
|
+
className: slotClass(classNames, "root", "overflow-hidden rounded-[var(--hj-radius-md)] border border-[var(--hj-menu-border)] bg-[var(--hj-menu-bg)] shadow-[var(--hj-menu-shadow)]", rootWidthClass[mergedVariant], className),
|
|
1083
|
+
"aria-disabled": mergedDisabled || undefined,
|
|
1084
|
+
role: "menu",
|
|
1085
|
+
style: slotStyle(styles, "root", style),
|
|
1086
|
+
children: items.map((item) => {
|
|
1087
|
+
const active = item.id === activeId;
|
|
1088
|
+
return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("button", {
|
|
1089
|
+
"aria-current": active || undefined,
|
|
1090
|
+
className: slotClass(classNames, "item", "flex w-full items-center gap-3 text-left transition hover:bg-[var(--hj-menu-item-bg-hover)] disabled:cursor-not-allowed disabled:opacity-50", itemClass[mergedVariant], active ? "bg-[var(--hj-menu-item-bg-active)] text-[var(--hj-menu-item-fg-active)]" : "bg-[var(--hj-menu-item-bg)] text-[var(--hj-menu-item-fg)]"),
|
|
1091
|
+
disabled: mergedDisabled || item.disabled,
|
|
1092
|
+
onClick: () => onSelect?.(item.id),
|
|
1093
|
+
role: "menuitem",
|
|
1094
|
+
style: slotStyle(styles, "item"),
|
|
1095
|
+
type: "button",
|
|
1096
|
+
children: [
|
|
1097
|
+
item.avatar ? /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
|
|
1098
|
+
className: slotClass(classNames, "avatar", "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--hj-menu-avatar-bg)] text-[var(--hj-menu-avatar-fg)]"),
|
|
1099
|
+
style: slotStyle(styles, "avatar"),
|
|
1100
|
+
children: item.avatar
|
|
1101
|
+
}, undefined, false, undefined, this) : null,
|
|
1102
|
+
/* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
|
|
1103
|
+
className: slotClass(classNames, "content", "min-w-0 flex-1"),
|
|
1104
|
+
style: slotStyle(styles, "content"),
|
|
1105
|
+
children: [
|
|
1106
|
+
/* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
|
|
1107
|
+
className: slotClass(classNames, "label", "block truncate", active ? "font-semibold" : "font-normal", mergedVariant === "dropdown" ? "text-base leading-6" : "text-sm leading-[18px]", active ? "text-[var(--hj-menu-item-fg-active)]" : mergedVariant === "user" ? "text-[var(--hj-menu-item-fg-active)]" : "text-[var(--hj-menu-item-fg)]"),
|
|
1108
|
+
style: slotStyle(styles, "label"),
|
|
1109
|
+
children: item.label
|
|
1110
|
+
}, undefined, false, undefined, this),
|
|
1111
|
+
item.description ? /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
|
|
1112
|
+
className: slotClass(classNames, "description", "mt-[5px] block truncate text-xs leading-4 text-[var(--hj-menu-item-muted)]"),
|
|
1113
|
+
style: slotStyle(styles, "description"),
|
|
1114
|
+
children: item.description
|
|
1115
|
+
}, undefined, false, undefined, this) : null
|
|
1116
|
+
]
|
|
1117
|
+
}, undefined, true, undefined, this),
|
|
1118
|
+
item.suffix ? /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
|
|
1119
|
+
className: slotClass(classNames, "suffix", "shrink-0 text-[var(--hj-input-clear)]"),
|
|
1120
|
+
style: slotStyle(styles, "suffix"),
|
|
1121
|
+
children: item.suffix
|
|
1122
|
+
}, undefined, false, undefined, this) : null
|
|
1123
|
+
]
|
|
1124
|
+
}, item.id, true, undefined, this);
|
|
1125
|
+
})
|
|
1126
|
+
}, undefined, false, undefined, this);
|
|
1127
|
+
}
|
|
1128
|
+
// src/components/MessageToast.tsx
|
|
1129
|
+
var exports_MessageToast = {};
|
|
1130
|
+
__export(exports_MessageToast, {
|
|
1131
|
+
MessageToast: () => MessageToast
|
|
1132
|
+
});
|
|
1133
|
+
var import_motion = __toESM(require("@rc-component/motion"));
|
|
1134
|
+
|
|
1135
|
+
// src/hooks/useReducedMotion.ts
|
|
1136
|
+
var exports_useReducedMotion = {};
|
|
1137
|
+
__export(exports_useReducedMotion, {
|
|
1138
|
+
useReducedMotion: () => useReducedMotion
|
|
1139
|
+
});
|
|
1140
|
+
var import_react2 = require("react");
|
|
1141
|
+
function useReducedMotion() {
|
|
1142
|
+
const [reduced, setReduced] = import_react2.useState(false);
|
|
1143
|
+
import_react2.useEffect(() => {
|
|
1144
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function")
|
|
1145
|
+
return;
|
|
1146
|
+
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
1147
|
+
const update = () => setReduced(query.matches);
|
|
1148
|
+
update();
|
|
1149
|
+
query.addEventListener("change", update);
|
|
1150
|
+
return () => query.removeEventListener("change", update);
|
|
1151
|
+
}, []);
|
|
1152
|
+
return reduced;
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
// src/components/MessageToast.tsx
|
|
1156
|
+
var jsx_dev_runtime8 = require("react/jsx-dev-runtime");
|
|
1157
|
+
var iconClass = {
|
|
1158
|
+
success: "bg-[var(--hj-message-success)]",
|
|
1159
|
+
warning: "bg-[var(--hj-message-warning)]",
|
|
1160
|
+
error: "bg-[var(--hj-message-error)]",
|
|
1161
|
+
info: "bg-[var(--hj-message-info)]",
|
|
1162
|
+
loading: "bg-[var(--hj-message-info)]"
|
|
1163
|
+
};
|
|
1164
|
+
var defaultIcon = {
|
|
1165
|
+
success: "✓",
|
|
1166
|
+
warning: "!",
|
|
1167
|
+
error: "×",
|
|
1168
|
+
info: "i",
|
|
1169
|
+
loading: "…"
|
|
1170
|
+
};
|
|
1171
|
+
function MessageToast({
|
|
1172
|
+
action,
|
|
1173
|
+
children,
|
|
1174
|
+
className = "",
|
|
1175
|
+
classNames,
|
|
1176
|
+
closable = false,
|
|
1177
|
+
closeIcon,
|
|
1178
|
+
icon,
|
|
1179
|
+
onClose,
|
|
1180
|
+
open = true,
|
|
1181
|
+
role = "status",
|
|
1182
|
+
showIcon,
|
|
1183
|
+
styles,
|
|
1184
|
+
type = "info",
|
|
1185
|
+
variant
|
|
1186
|
+
}) {
|
|
1187
|
+
const config = useConfig();
|
|
1188
|
+
const reducedMotion = useReducedMotion();
|
|
1189
|
+
const mergedShowIcon = showIcon ?? config.components.MessageToast?.showIcon ?? true;
|
|
1190
|
+
const mergedVariant = variant ?? config.components.MessageToast?.variant ?? "dark";
|
|
1191
|
+
const motionDisabled = reducedMotion || isMotionDisabled(config.motion);
|
|
1192
|
+
return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(import_motion.default, {
|
|
1193
|
+
motionAppear: true,
|
|
1194
|
+
motionDeadline: motionDisabled ? 1 : 300,
|
|
1195
|
+
motionName: motionDisabled ? undefined : "hj-slide-up",
|
|
1196
|
+
removeOnLeave: true,
|
|
1197
|
+
visible: open,
|
|
1198
|
+
children: ({ className: motionClassName, style: motionStyle }, ref) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
|
|
1199
|
+
className: slotClass(classNames, "root", "inline-flex min-h-[var(--hj-message-height)] max-w-full items-center gap-[var(--hj-message-gap)] rounded-[var(--hj-message-radius)] px-[var(--hj-message-padding-x)] text-sm leading-[18px] shadow-[var(--hj-message-shadow)]", mergedVariant === "dark" ? "bg-[var(--hj-message-bg)] text-[var(--hj-message-fg)]" : "bg-[var(--hj-message-light-bg)] text-[var(--hj-message-light-fg)]", motionDisabled && "huaijiu-motion-disabled", motionClassName, className),
|
|
1200
|
+
ref,
|
|
1201
|
+
role,
|
|
1202
|
+
style: { ...slotStyle(styles, "root"), ...motionStyle },
|
|
1203
|
+
children: [
|
|
1204
|
+
mergedShowIcon && icon !== null ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
|
|
1205
|
+
className: slotClass(classNames, "icon", "flex h-[var(--hj-message-icon-size)] w-[var(--hj-message-icon-size)] shrink-0 items-center justify-center rounded-full text-xs font-bold leading-none text-white", iconClass[type]),
|
|
1206
|
+
style: slotStyle(styles, "icon"),
|
|
1207
|
+
children: icon ?? defaultIcon[type]
|
|
1208
|
+
}, undefined, false, undefined, this) : null,
|
|
1209
|
+
/* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
|
|
1210
|
+
className: slotClass(classNames, "content", "min-w-0 break-words"),
|
|
1211
|
+
style: slotStyle(styles, "content"),
|
|
1212
|
+
children
|
|
1213
|
+
}, undefined, false, undefined, this),
|
|
1214
|
+
action ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
|
|
1215
|
+
className: slotClass(classNames, "action", "ml-1 whitespace-nowrap text-[var(--hj-message-action-fg)]"),
|
|
1216
|
+
style: slotStyle(styles, "action"),
|
|
1217
|
+
children: action
|
|
1218
|
+
}, undefined, false, undefined, this) : null,
|
|
1219
|
+
closable ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("button", {
|
|
1220
|
+
"aria-label": "关闭",
|
|
1221
|
+
className: slotClass(classNames, "close", "ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center text-[var(--hj-message-close-fg)] transition hover:text-[var(--hj-message-close-fg-hover)]"),
|
|
1222
|
+
onClick: onClose,
|
|
1223
|
+
style: slotStyle(styles, "close"),
|
|
1224
|
+
type: "button",
|
|
1225
|
+
children: closeIcon ?? "×"
|
|
1226
|
+
}, undefined, false, undefined, this) : null
|
|
1227
|
+
]
|
|
1228
|
+
}, undefined, true, undefined, this)
|
|
1229
|
+
}, undefined, false, undefined, this);
|
|
1230
|
+
}
|
|
1231
|
+
// src/components/Panel.tsx
|
|
1232
|
+
var exports_Panel = {};
|
|
1233
|
+
__export(exports_Panel, {
|
|
1234
|
+
Panel: () => Panel
|
|
1235
|
+
});
|
|
1236
|
+
var jsx_dev_runtime9 = require("react/jsx-dev-runtime");
|
|
1237
|
+
var radiusClass = { sm: "rounded-[6px]", md: "rounded-[8px]" };
|
|
1238
|
+
function Panel({
|
|
1239
|
+
as: Component = "section",
|
|
1240
|
+
children,
|
|
1241
|
+
className = "",
|
|
1242
|
+
radius = "md",
|
|
1243
|
+
...props
|
|
1244
|
+
}) {
|
|
1245
|
+
return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Component, {
|
|
1246
|
+
className: `${radiusClass[radius]} bg-[#242731] ${className}`,
|
|
1247
|
+
...props,
|
|
1248
|
+
children
|
|
1249
|
+
}, undefined, false, undefined, this);
|
|
1250
|
+
}
|
|
1251
|
+
// src/components/PriceText.tsx
|
|
1252
|
+
var exports_PriceText = {};
|
|
1253
|
+
__export(exports_PriceText, {
|
|
1254
|
+
PriceText: () => PriceText
|
|
1255
|
+
});
|
|
1256
|
+
var jsx_dev_runtime10 = require("react/jsx-dev-runtime");
|
|
1257
|
+
function PriceText({
|
|
1258
|
+
className,
|
|
1259
|
+
freeClassName,
|
|
1260
|
+
freeLabel = "免费",
|
|
1261
|
+
originalPrice,
|
|
1262
|
+
price
|
|
1263
|
+
}) {
|
|
1264
|
+
const priceClassName = className ?? "text-base";
|
|
1265
|
+
const numericPrice = Number(price);
|
|
1266
|
+
if (numericPrice === 0) {
|
|
1267
|
+
return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
|
|
1268
|
+
className: `${priceClassName} ${freeClassName ?? "font-semibold text-[#69c04a]"}`,
|
|
1269
|
+
children: freeLabel
|
|
1270
|
+
}, undefined, false, undefined, this);
|
|
1271
|
+
}
|
|
1272
|
+
return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
|
|
1273
|
+
className: "inline-flex items-baseline gap-2",
|
|
1274
|
+
children: [
|
|
1275
|
+
originalPrice && originalPrice !== price ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
|
|
1276
|
+
className: "text-xs text-[#6f7985] line-through",
|
|
1277
|
+
children: [
|
|
1278
|
+
"¥",
|
|
1279
|
+
originalPrice
|
|
1280
|
+
]
|
|
1281
|
+
}, undefined, true, undefined, this) : null,
|
|
1282
|
+
/* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
|
|
1283
|
+
className: `${priceClassName} font-semibold text-[#ffcc33]`,
|
|
1284
|
+
children: [
|
|
1285
|
+
"¥",
|
|
1286
|
+
price
|
|
1287
|
+
]
|
|
1288
|
+
}, undefined, true, undefined, this)
|
|
1289
|
+
]
|
|
1290
|
+
}, undefined, true, undefined, this);
|
|
1291
|
+
}
|
|
1292
|
+
// src/components/ProgressBar.tsx
|
|
1293
|
+
var exports_ProgressBar = {};
|
|
1294
|
+
__export(exports_ProgressBar, {
|
|
1295
|
+
ProgressBar: () => ProgressBar
|
|
1296
|
+
});
|
|
1297
|
+
var jsx_dev_runtime11 = require("react/jsx-dev-runtime");
|
|
1298
|
+
var toneClass2 = {
|
|
1299
|
+
primary: "bg-[#ffcc33]",
|
|
1300
|
+
success: "bg-[#69c04a]",
|
|
1301
|
+
achievement: ""
|
|
1302
|
+
};
|
|
1303
|
+
function ProgressBar({
|
|
1304
|
+
className = "",
|
|
1305
|
+
max = 100,
|
|
1306
|
+
tone = "primary",
|
|
1307
|
+
value
|
|
1308
|
+
}) {
|
|
1309
|
+
const width = `${Math.round(value / Math.max(max, 1) * 100)}%`;
|
|
1310
|
+
const achievementGradient = "linear-gradient(90deg, #ffa50e 0%, #ff5f0b 100%)";
|
|
1311
|
+
const trackColor = tone === "achievement" ? "rgba(255, 255, 255, 0.2)" : "#24303a";
|
|
1312
|
+
return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
|
|
1313
|
+
className: `h-1.5 overflow-hidden rounded ${tone === "achievement" ? "bg-white/20" : "bg-[#24303a]"} ${className}`,
|
|
1314
|
+
style: { backgroundColor: trackColor, flexShrink: 0, height: "6px", minHeight: "6px" },
|
|
1315
|
+
children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
|
|
1316
|
+
className: `h-full rounded ${toneClass2[tone]}`,
|
|
1317
|
+
style: {
|
|
1318
|
+
height: "100%",
|
|
1319
|
+
width,
|
|
1320
|
+
...tone === "achievement" ? { backgroundImage: achievementGradient } : {}
|
|
1321
|
+
}
|
|
1322
|
+
}, undefined, false, undefined, this)
|
|
1323
|
+
}, undefined, false, undefined, this);
|
|
1324
|
+
}
|
|
1325
|
+
// src/components/ProgressButton.tsx
|
|
1326
|
+
var exports_ProgressButton = {};
|
|
1327
|
+
__export(exports_ProgressButton, {
|
|
1328
|
+
ProgressButton: () => ProgressButton
|
|
1329
|
+
});
|
|
1330
|
+
|
|
1331
|
+
// src/components/Button.tsx
|
|
1332
|
+
var import_react3 = require("react");
|
|
1333
|
+
var jsx_dev_runtime12 = require("react/jsx-dev-runtime");
|
|
1334
|
+
var solidToneClass = {
|
|
1335
|
+
primary: "bg-[var(--hj-button-primary-bg)] text-[var(--hj-button-primary-fg)] hover:bg-[var(--hj-button-primary-bg-hover)] active:bg-[var(--hj-button-primary-bg-active)] active:text-[var(--hj-button-primary-fg-active)]",
|
|
1336
|
+
default: "bg-[var(--hj-button-default-bg)] text-[var(--hj-button-default-fg)] hover:bg-[var(--hj-button-default-bg-hover)] hover:text-[var(--hj-button-default-fg-hover)] active:bg-[var(--hj-button-default-bg-active)] active:text-[var(--hj-button-default-fg-hover)]",
|
|
1337
|
+
secondary: "bg-[var(--hj-button-default-bg)] text-[var(--hj-button-default-fg)] hover:bg-[var(--hj-button-default-bg-hover)] hover:text-[var(--hj-button-default-fg-hover)] active:bg-[var(--hj-button-default-bg-active)] active:text-[var(--hj-button-default-fg-hover)]",
|
|
1338
|
+
ghost: "bg-transparent text-white/60 hover:bg-white/5 hover:text-white",
|
|
1339
|
+
danger: "bg-[var(--hj-color-danger)] text-white hover:bg-[var(--hj-color-danger-soft)]",
|
|
1340
|
+
success: "bg-[var(--hj-color-success)] text-white hover:brightness-110",
|
|
1341
|
+
info: "bg-[var(--hj-color-info)] text-white hover:brightness-110",
|
|
1342
|
+
light: "bg-[var(--hj-button-light-bg)] text-[var(--hj-button-light-fg)] shadow-[inset_0_0_0_1px_var(--hj-button-light-border)] hover:bg-[var(--hj-button-light-bg-hover)] hover:shadow-[inset_0_0_0_1px_var(--hj-button-light-border-hover)] active:bg-[var(--hj-button-light-bg-active)]",
|
|
1343
|
+
purchase: "bg-[var(--hj-color-purchase)] text-white hover:brightness-110",
|
|
1344
|
+
download: "bg-[var(--hj-button-primary-bg)] text-[var(--hj-button-primary-fg)] hover:bg-[var(--hj-button-primary-bg-hover)] active:bg-[var(--hj-button-primary-bg-active)] active:text-[var(--hj-button-primary-fg-active)]"
|
|
1345
|
+
};
|
|
1346
|
+
var sizeClass2 = {
|
|
1347
|
+
xs: "h-[var(--hj-button-xs-height)] min-w-[var(--hj-button-xs-min-width)] rounded-[var(--hj-radius-sm)] px-[var(--hj-button-xs-padding-x)] text-[length:var(--hj-button-xs-font-size)] leading-[var(--hj-button-xs-line-height)]",
|
|
1348
|
+
sm: "h-[var(--hj-button-sm-height)] min-w-[var(--hj-button-sm-min-width)] rounded-[var(--hj-radius-sm)] px-[var(--hj-button-sm-padding-x)] text-[length:var(--hj-button-sm-font-size)] leading-[var(--hj-button-sm-line-height)]",
|
|
1349
|
+
md: "h-[var(--hj-button-md-height)] min-w-[var(--hj-button-md-min-width)] rounded-[var(--hj-radius-md)] px-[var(--hj-button-md-padding-x)] text-[length:var(--hj-button-md-font-size)] leading-[var(--hj-button-md-line-height)]",
|
|
1350
|
+
lg: "h-[var(--hj-button-lg-height)] min-w-[var(--hj-button-lg-min-width)] rounded-[var(--hj-radius-md)] px-[var(--hj-button-lg-padding-x)] text-[length:var(--hj-button-lg-font-size)] leading-[var(--hj-button-lg-line-height)]"
|
|
1351
|
+
};
|
|
1352
|
+
var iconTextPaddingVariable = {
|
|
1353
|
+
xs: "var(--hj-button-xs-icon-padding-x)",
|
|
1354
|
+
sm: "var(--hj-button-sm-icon-padding-x)",
|
|
1355
|
+
md: "var(--hj-button-md-icon-padding-x)",
|
|
1356
|
+
lg: "var(--hj-button-lg-icon-padding-x)"
|
|
1357
|
+
};
|
|
1358
|
+
var narrowWidthClass = {
|
|
1359
|
+
xs: "w-[var(--hj-button-xs-narrow-width)] min-w-[var(--hj-button-xs-narrow-width)] px-0",
|
|
1360
|
+
sm: "w-[var(--hj-button-sm-narrow-width)] min-w-[var(--hj-button-sm-narrow-width)] px-0",
|
|
1361
|
+
md: "w-[var(--hj-button-md-min-width)] min-w-[var(--hj-button-md-min-width)]",
|
|
1362
|
+
lg: "w-[var(--hj-button-lg-min-width)] min-w-[var(--hj-button-lg-min-width)]"
|
|
1363
|
+
};
|
|
1364
|
+
var autoWidthClass = "w-auto min-w-0";
|
|
1365
|
+
var iconSizeClass = {
|
|
1366
|
+
xs: "h-[var(--hj-button-xs-height)] w-[var(--hj-button-xs-height)] min-w-[var(--hj-button-xs-height)] rounded-[var(--hj-radius-sm)] p-0 text-[length:var(--hj-button-xs-font-size)] leading-[var(--hj-button-xs-line-height)]",
|
|
1367
|
+
sm: "h-[var(--hj-button-sm-height)] w-[var(--hj-button-sm-height)] min-w-[var(--hj-button-sm-height)] rounded-[var(--hj-radius-sm)] p-0 text-[length:var(--hj-button-sm-font-size)] leading-[var(--hj-button-sm-line-height)]",
|
|
1368
|
+
md: "h-[var(--hj-button-md-height)] w-[var(--hj-button-md-height)] min-w-[var(--hj-button-md-height)] rounded-[var(--hj-radius-md)] p-0 text-[length:var(--hj-button-md-font-size)] leading-[var(--hj-button-md-line-height)]",
|
|
1369
|
+
lg: "h-[var(--hj-button-lg-height)] w-[var(--hj-button-lg-height)] min-w-[var(--hj-button-lg-height)] rounded-[var(--hj-radius-md)] p-0 text-[length:var(--hj-button-lg-font-size)] leading-[var(--hj-button-lg-line-height)]"
|
|
1370
|
+
};
|
|
1371
|
+
var circleSizeClass = {
|
|
1372
|
+
xs: "h-[var(--hj-button-xs-height)] w-[var(--hj-button-xs-height)] min-w-[var(--hj-button-xs-height)] rounded-full px-0",
|
|
1373
|
+
sm: "h-[var(--hj-button-sm-height)] w-[var(--hj-button-sm-height)] min-w-[var(--hj-button-sm-height)] rounded-full px-0",
|
|
1374
|
+
md: "h-[var(--hj-button-md-height)] w-[var(--hj-button-md-height)] min-w-[var(--hj-button-md-height)] rounded-full px-0",
|
|
1375
|
+
lg: "h-[var(--hj-button-lg-height)] w-[var(--hj-button-lg-height)] min-w-[var(--hj-button-lg-height)] rounded-full px-0"
|
|
1376
|
+
};
|
|
1377
|
+
var textSizeClass = "h-5 min-w-0 rounded-none p-0 text-[length:var(--hj-button-md-font-size)] leading-[var(--hj-button-md-line-height)]";
|
|
1378
|
+
function normalizeButtonSize(size, fallback) {
|
|
1379
|
+
if (size === "small" || size === "sm")
|
|
1380
|
+
return "sm";
|
|
1381
|
+
if (size === "large" || size === "lg")
|
|
1382
|
+
return "lg";
|
|
1383
|
+
if (size === "medium" || size === "middle" || size === "md")
|
|
1384
|
+
return "md";
|
|
1385
|
+
return size ?? fallback;
|
|
1386
|
+
}
|
|
1387
|
+
var statusClass = {
|
|
1388
|
+
default: {
|
|
1389
|
+
primary: "",
|
|
1390
|
+
default: "",
|
|
1391
|
+
toggle: "",
|
|
1392
|
+
text: ""
|
|
1393
|
+
},
|
|
1394
|
+
hover: {
|
|
1395
|
+
primary: "bg-[var(--hj-button-primary-bg-hover)] text-[var(--hj-button-primary-fg-active)]",
|
|
1396
|
+
default: "bg-[var(--hj-button-default-bg-hover)] text-[var(--hj-button-default-fg-hover)]",
|
|
1397
|
+
toggle: "bg-[var(--hj-button-toggle-bg-hover)] text-[var(--hj-button-primary-bg)]",
|
|
1398
|
+
text: "text-[var(--hj-button-primary-bg)] brightness-110"
|
|
1399
|
+
},
|
|
1400
|
+
active: {
|
|
1401
|
+
primary: "bg-[var(--hj-button-primary-bg-active)] text-[var(--hj-button-primary-fg-active)]",
|
|
1402
|
+
default: "bg-[var(--hj-button-default-bg-active)] text-[var(--hj-button-default-fg-hover)]",
|
|
1403
|
+
toggle: "bg-[var(--hj-button-toggle-bg-active)] text-[var(--hj-button-primary-fg-active)]",
|
|
1404
|
+
text: "text-[var(--hj-button-text-fg)] brightness-50"
|
|
1405
|
+
}
|
|
1406
|
+
};
|
|
1407
|
+
function resolveVariantClass(tone, variant) {
|
|
1408
|
+
if ((variant === "text" || variant === "link") && (tone === "default" || tone === "secondary"))
|
|
1409
|
+
return "bg-transparent text-[var(--hj-button-text-default-fg)] hover:text-[var(--hj-button-text-fg)] active:brightness-50";
|
|
1410
|
+
if (variant === "text" || variant === "link")
|
|
1411
|
+
return "bg-transparent text-[var(--hj-button-text-fg)] hover:brightness-110 active:brightness-50";
|
|
1412
|
+
if (variant === "outlined" || variant === "dashed") {
|
|
1413
|
+
const toneClass3 = tone === "danger" ? "text-[var(--hj-color-danger)]" : tone === "success" ? "text-[var(--hj-color-success)]" : tone === "info" ? "text-[var(--hj-color-info)]" : tone === "purchase" ? "text-[var(--hj-color-purchase)]" : tone === "primary" || tone === "download" ? "text-[var(--hj-color-brand)]" : "text-[var(--hj-button-default-fg)]";
|
|
1414
|
+
return cn("border border-current bg-transparent hover:bg-[var(--hj-button-default-bg-hover)]", variant === "dashed" && "border-dashed", toneClass3);
|
|
1415
|
+
}
|
|
1416
|
+
if (variant === "translucent" || variant === "filled")
|
|
1417
|
+
return "bg-[var(--hj-button-translucent-bg)] text-[var(--hj-button-default-fg)] hover:bg-[var(--hj-button-translucent-bg-hover)] hover:text-[var(--hj-button-default-fg-hover)] active:bg-[var(--hj-button-translucent-bg-active)] active:text-[var(--hj-button-default-fg-hover)]";
|
|
1418
|
+
if (variant === "toggle")
|
|
1419
|
+
return "border border-[var(--hj-button-toggle-border)] bg-[var(--hj-button-toggle-bg)] text-[var(--hj-color-brand-weak)] hover:bg-[var(--hj-button-toggle-bg-hover)] active:bg-[var(--hj-button-toggle-bg-active)]";
|
|
1420
|
+
if (variant === "icon" || variant === "solid")
|
|
1421
|
+
return solidToneClass[tone];
|
|
1422
|
+
if (variant === "secondary" || tone === "secondary" || tone === "default")
|
|
1423
|
+
return solidToneClass.secondary;
|
|
1424
|
+
return solidToneClass[tone];
|
|
1425
|
+
}
|
|
1426
|
+
function resolveStatusClass(tone, variant, status) {
|
|
1427
|
+
if (status === "default")
|
|
1428
|
+
return "";
|
|
1429
|
+
if (variant === "text" || variant === "link")
|
|
1430
|
+
return statusClass[status].text;
|
|
1431
|
+
if (variant === "translucent" || variant === "filled") {
|
|
1432
|
+
if (status === "hover")
|
|
1433
|
+
return "bg-[var(--hj-button-translucent-bg-hover)] text-[var(--hj-button-default-fg-hover)]";
|
|
1434
|
+
return "bg-[var(--hj-button-translucent-bg-active)] text-[var(--hj-button-default-fg-hover)]";
|
|
1435
|
+
}
|
|
1436
|
+
if (variant === "toggle")
|
|
1437
|
+
return statusClass[status].toggle;
|
|
1438
|
+
if (variant === "secondary" || variant === "outlined" || variant === "dashed" || tone === "secondary" || tone === "default" || tone === "light")
|
|
1439
|
+
return statusClass[status].default;
|
|
1440
|
+
return statusClass[status].primary;
|
|
1441
|
+
}
|
|
1442
|
+
function resolveDisabledOpacity(tone, variant) {
|
|
1443
|
+
if (variant === "toggle")
|
|
1444
|
+
return "disabled:opacity-50";
|
|
1445
|
+
if (variant === "secondary" || variant === "outlined" || variant === "dashed" || tone === "secondary" || tone === "default" || tone === "light")
|
|
1446
|
+
return "disabled:opacity-40";
|
|
1447
|
+
return "disabled:opacity-50";
|
|
1448
|
+
}
|
|
1449
|
+
function resolveAntdTone({
|
|
1450
|
+
color,
|
|
1451
|
+
danger,
|
|
1452
|
+
ghost,
|
|
1453
|
+
tone,
|
|
1454
|
+
type
|
|
1455
|
+
}) {
|
|
1456
|
+
if (tone)
|
|
1457
|
+
return tone;
|
|
1458
|
+
if (danger || color === "danger" || color === "red" || color === "pink" || color === "magenta" || color === "volcano")
|
|
1459
|
+
return "danger";
|
|
1460
|
+
if (color === "success" || color === "green" || color === "lime")
|
|
1461
|
+
return "success";
|
|
1462
|
+
if (color === "info" || color === "blue" || color === "cyan" || color === "geekblue" || color === "purple")
|
|
1463
|
+
return "info";
|
|
1464
|
+
if (color === "purchase" || color === "orange" || color === "yellow" || color === "gold")
|
|
1465
|
+
return "purchase";
|
|
1466
|
+
if (color === "download")
|
|
1467
|
+
return "download";
|
|
1468
|
+
if (ghost)
|
|
1469
|
+
return "ghost";
|
|
1470
|
+
if (type === "primary" || color === "primary")
|
|
1471
|
+
return "primary";
|
|
1472
|
+
if (type === "link" || type === "text")
|
|
1473
|
+
return "ghost";
|
|
1474
|
+
return "secondary";
|
|
1475
|
+
}
|
|
1476
|
+
function resolveAntdVariant({
|
|
1477
|
+
ghost,
|
|
1478
|
+
tone,
|
|
1479
|
+
type,
|
|
1480
|
+
variant
|
|
1481
|
+
}) {
|
|
1482
|
+
if (variant)
|
|
1483
|
+
return variant;
|
|
1484
|
+
if (type === "text" || ghost || tone === "ghost")
|
|
1485
|
+
return "text";
|
|
1486
|
+
if (type === "link")
|
|
1487
|
+
return "link";
|
|
1488
|
+
if (type === "dashed")
|
|
1489
|
+
return "dashed";
|
|
1490
|
+
if (tone === "secondary" || tone === "default")
|
|
1491
|
+
return "outlined";
|
|
1492
|
+
return "solid";
|
|
1493
|
+
}
|
|
1494
|
+
function getLoadingDelay(loading) {
|
|
1495
|
+
if (typeof loading === "object")
|
|
1496
|
+
return Math.max(0, loading.delay ?? 0);
|
|
1497
|
+
return 0;
|
|
1498
|
+
}
|
|
1499
|
+
var Button = import_react3.forwardRef(function Button2({
|
|
1500
|
+
autoInsertSpace,
|
|
1501
|
+
block = false,
|
|
1502
|
+
children,
|
|
1503
|
+
className = "",
|
|
1504
|
+
classNames,
|
|
1505
|
+
color,
|
|
1506
|
+
danger,
|
|
1507
|
+
disabled,
|
|
1508
|
+
ghost,
|
|
1509
|
+
href,
|
|
1510
|
+
htmlType = "button",
|
|
1511
|
+
icon,
|
|
1512
|
+
iconPlacement,
|
|
1513
|
+
iconPosition = "start",
|
|
1514
|
+
loading = false,
|
|
1515
|
+
onClick,
|
|
1516
|
+
rootClassName,
|
|
1517
|
+
shape = "default",
|
|
1518
|
+
size,
|
|
1519
|
+
style,
|
|
1520
|
+
styles,
|
|
1521
|
+
status = "default",
|
|
1522
|
+
tone,
|
|
1523
|
+
type,
|
|
1524
|
+
variant,
|
|
1525
|
+
width = "default",
|
|
1526
|
+
...props
|
|
1527
|
+
}, ref) {
|
|
1528
|
+
const config = useConfig();
|
|
1529
|
+
const mergedSize = normalizeButtonSize(size ?? config.components.Button?.size, config.size);
|
|
1530
|
+
const delay = import_react3.useMemo(() => getLoadingDelay(loading), [loading]);
|
|
1531
|
+
const [delayedLoading, setDelayedLoading] = import_react3.useState(typeof loading === "boolean" ? loading : delay <= 0 && Boolean(loading));
|
|
1532
|
+
import_react3.useEffect(() => {
|
|
1533
|
+
if (!loading) {
|
|
1534
|
+
setDelayedLoading(false);
|
|
1535
|
+
return;
|
|
1536
|
+
}
|
|
1537
|
+
if (delay <= 0) {
|
|
1538
|
+
setDelayedLoading(true);
|
|
1539
|
+
return;
|
|
1540
|
+
}
|
|
1541
|
+
const timer = window.setTimeout(() => setDelayedLoading(true), delay);
|
|
1542
|
+
return () => window.clearTimeout(timer);
|
|
1543
|
+
}, [delay, loading]);
|
|
1544
|
+
const mergedTone = resolveAntdTone({ color, danger, ghost, tone, type });
|
|
1545
|
+
const mergedDisabled = disabled || delayedLoading || config.disabled || config.components.Button?.disabled;
|
|
1546
|
+
const mergedVariant = resolveAntdVariant({ ghost, tone: mergedTone, type, variant });
|
|
1547
|
+
const isTextVariant = mergedVariant === "text" || mergedVariant === "link";
|
|
1548
|
+
const mergedSizeClass = mergedVariant === "icon" ? iconSizeClass[mergedSize] : isTextVariant ? textSizeClass : sizeClass2[mergedSize];
|
|
1549
|
+
const fontStyle = mergedTone === "light" ? {
|
|
1550
|
+
fontFamily: "var(--hj-button-light-font-family)",
|
|
1551
|
+
fontWeight: "var(--hj-button-light-font-weight)"
|
|
1552
|
+
} : { fontFamily: "var(--hj-button-font-family)" };
|
|
1553
|
+
const mergedIconPosition = iconPlacement ?? iconPosition;
|
|
1554
|
+
const loadingIcon = typeof loading === "object" ? loading.icon : undefined;
|
|
1555
|
+
const iconNode = delayedLoading ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
|
|
1556
|
+
"aria-hidden": "true",
|
|
1557
|
+
className: slotClass(classNames, "loadingIcon", "h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent motion-reduce:animate-none"),
|
|
1558
|
+
style: slotStyle(styles, "loadingIcon"),
|
|
1559
|
+
children: loadingIcon
|
|
1560
|
+
}, undefined, false, undefined, this) : icon ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
|
|
1561
|
+
className: slotClass(classNames, "icon", "inline-flex shrink-0 items-center justify-center"),
|
|
1562
|
+
style: slotStyle(styles, "icon"),
|
|
1563
|
+
children: icon
|
|
1564
|
+
}, undefined, false, undefined, this) : null;
|
|
1565
|
+
const hasTextIcon = Boolean(iconNode && children != null && mergedVariant !== "icon" && !isTextVariant);
|
|
1566
|
+
const iconTextPaddingStyle = hasTextIcon ? { paddingInline: iconTextPaddingVariable[mergedSize] } : undefined;
|
|
1567
|
+
const rootClass = slotClass(classNames, "root", "hj-wave inline-flex cursor-pointer select-none items-center justify-center gap-1.5 border-0 font-[var(--hj-button-font-weight)] transition disabled:cursor-not-allowed", block && "w-full", mergedSizeClass, shape === "round" && "rounded-full", shape === "circle" && circleSizeClass[mergedSize], shape === "square" && children == null && iconSizeClass[mergedSize], width === "narrow" && mergedVariant !== "icon" && !isTextVariant && narrowWidthClass[mergedSize], width === "auto" && mergedVariant !== "icon" && !isTextVariant && autoWidthClass, resolveVariantClass(mergedTone, mergedVariant), resolveStatusClass(mergedTone, mergedVariant, status), resolveDisabledOpacity(mergedTone, mergedVariant), rootClassName, className);
|
|
1568
|
+
const rootStyle = {
|
|
1569
|
+
...fontStyle,
|
|
1570
|
+
...iconTextPaddingStyle,
|
|
1571
|
+
...slotStyle(styles, "root", style)
|
|
1572
|
+
};
|
|
1573
|
+
const content = /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
|
|
1574
|
+
children: [
|
|
1575
|
+
mergedIconPosition === "start" ? iconNode : null,
|
|
1576
|
+
children == null ? null : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
|
|
1577
|
+
className: cn("relative overflow-visible whitespace-nowrap", autoInsertSpace && "tracking-normal", classNames?.content),
|
|
1578
|
+
style: styles?.content,
|
|
1579
|
+
children
|
|
1580
|
+
}, undefined, false, undefined, this),
|
|
1581
|
+
mergedIconPosition === "end" ? iconNode : null
|
|
1582
|
+
]
|
|
1583
|
+
}, undefined, true, undefined, this);
|
|
1584
|
+
const handleClick = (event) => {
|
|
1585
|
+
if (mergedDisabled) {
|
|
1586
|
+
event.preventDefault();
|
|
1587
|
+
event.stopPropagation();
|
|
1588
|
+
return;
|
|
1589
|
+
}
|
|
1590
|
+
onClick?.(event);
|
|
1591
|
+
};
|
|
1592
|
+
if (href !== undefined) {
|
|
1593
|
+
return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("a", {
|
|
1594
|
+
...props,
|
|
1595
|
+
"aria-busy": delayedLoading || undefined,
|
|
1596
|
+
"aria-disabled": mergedDisabled || undefined,
|
|
1597
|
+
className: rootClass,
|
|
1598
|
+
href: mergedDisabled ? undefined : href,
|
|
1599
|
+
onClick: handleClick,
|
|
1600
|
+
ref,
|
|
1601
|
+
style: rootStyle,
|
|
1602
|
+
children: content
|
|
1603
|
+
}, undefined, false, undefined, this);
|
|
1604
|
+
}
|
|
1605
|
+
return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("button", {
|
|
1606
|
+
...props,
|
|
1607
|
+
"aria-busy": delayedLoading || undefined,
|
|
1608
|
+
className: rootClass,
|
|
1609
|
+
disabled: mergedDisabled,
|
|
1610
|
+
onClick: handleClick,
|
|
1611
|
+
ref,
|
|
1612
|
+
style: rootStyle,
|
|
1613
|
+
type: htmlType,
|
|
1614
|
+
children: content
|
|
1615
|
+
}, undefined, false, undefined, this);
|
|
1616
|
+
});
|
|
1617
|
+
|
|
1618
|
+
// src/components/ProgressButton.tsx
|
|
1619
|
+
var jsx_dev_runtime13 = require("react/jsx-dev-runtime");
|
|
1620
|
+
function ProgressButton({
|
|
1621
|
+
className = "",
|
|
1622
|
+
disabled,
|
|
1623
|
+
label,
|
|
1624
|
+
max = 100,
|
|
1625
|
+
tone = "download",
|
|
1626
|
+
value,
|
|
1627
|
+
...props
|
|
1628
|
+
}) {
|
|
1629
|
+
const normalizedMax = Number.isFinite(max) && max > 0 ? max : 100;
|
|
1630
|
+
const normalizedValue = value == null || !Number.isFinite(value) ? null : Math.max(0, Math.min(normalizedMax, value));
|
|
1631
|
+
const width = normalizedValue == null ? "100%" : `${normalizedValue / normalizedMax * 100}%`;
|
|
1632
|
+
return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Button, {
|
|
1633
|
+
...props,
|
|
1634
|
+
className: `relative overflow-hidden ${className}`,
|
|
1635
|
+
disabled,
|
|
1636
|
+
tone,
|
|
1637
|
+
children: [
|
|
1638
|
+
/* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
|
|
1639
|
+
"aria-label": label,
|
|
1640
|
+
"aria-valuemax": normalizedMax,
|
|
1641
|
+
"aria-valuemin": 0,
|
|
1642
|
+
"aria-valuenow": normalizedValue ?? undefined,
|
|
1643
|
+
className: `absolute inset-y-0 left-0 bg-[#d6a84a]/30 ${normalizedValue == null ? "animate-pulse motion-reduce:animate-none" : ""}`,
|
|
1644
|
+
role: "progressbar",
|
|
1645
|
+
style: { width }
|
|
1646
|
+
}, undefined, false, undefined, this),
|
|
1647
|
+
/* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
|
|
1648
|
+
className: "relative",
|
|
1649
|
+
children: label
|
|
1650
|
+
}, undefined, false, undefined, this)
|
|
1651
|
+
]
|
|
1652
|
+
}, undefined, true, undefined, this);
|
|
1653
|
+
}
|
|
1654
|
+
// src/components/SectionHeader.tsx
|
|
1655
|
+
var exports_SectionHeader = {};
|
|
1656
|
+
__export(exports_SectionHeader, {
|
|
1657
|
+
SectionHeader: () => SectionHeader
|
|
1658
|
+
});
|
|
1659
|
+
|
|
1660
|
+
// src/components/Typography.tsx
|
|
1661
|
+
var exports_Typography = {};
|
|
1662
|
+
__export(exports_Typography, {
|
|
1663
|
+
Typography: () => Typography,
|
|
1664
|
+
Title: () => Title,
|
|
1665
|
+
Text: () => Text,
|
|
1666
|
+
Paragraph: () => Paragraph,
|
|
1667
|
+
Link: () => Link
|
|
1668
|
+
});
|
|
1669
|
+
var import_input = require("@rc-component/input");
|
|
1670
|
+
var import_resize_observer = __toESM(require("@rc-component/resize-observer"));
|
|
1671
|
+
var import_util2 = require("@rc-component/util");
|
|
1672
|
+
var import_react5 = require("react");
|
|
1673
|
+
|
|
1674
|
+
// src/components/Tooltip.tsx
|
|
1675
|
+
var import_tooltip = __toESM(require("@rc-component/tooltip"));
|
|
1676
|
+
var import_util = require("@rc-component/util");
|
|
1677
|
+
var import_react4 = require("react");
|
|
1678
|
+
var jsx_dev_runtime14 = require("react/jsx-dev-runtime");
|
|
1679
|
+
function getTooltipChild(children, className) {
|
|
1680
|
+
if (import_react4.isValidElement(children) && children.type !== import_react4.Fragment) {
|
|
1681
|
+
if (!className)
|
|
1682
|
+
return children;
|
|
1683
|
+
return import_react4.cloneElement(children, { className: cn(children.props.className, className) });
|
|
1684
|
+
}
|
|
1685
|
+
return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
|
|
1686
|
+
className,
|
|
1687
|
+
children
|
|
1688
|
+
}, undefined, false, undefined, this);
|
|
1689
|
+
}
|
|
1690
|
+
function getTooltipPlacements(pointAtCenter, autoAdjustOverflow) {
|
|
1691
|
+
const overflow = autoAdjustOverflow === false ? { adjustX: 0, adjustY: 0 } : {
|
|
1692
|
+
adjustX: typeof autoAdjustOverflow === "object" ? autoAdjustOverflow.adjustX ?? 1 : 1,
|
|
1693
|
+
adjustY: typeof autoAdjustOverflow === "object" ? autoAdjustOverflow.adjustY ?? 1 : 1
|
|
1694
|
+
};
|
|
1695
|
+
const cornerOffset = 12;
|
|
1696
|
+
return {
|
|
1697
|
+
top: { points: ["bc", "tc"], offset: [0, -8], overflow },
|
|
1698
|
+
bottom: { points: ["tc", "bc"], offset: [0, 8], overflow },
|
|
1699
|
+
left: { points: ["cr", "cl"], offset: [-8, 0], overflow },
|
|
1700
|
+
right: { points: ["cl", "cr"], offset: [8, 0], overflow },
|
|
1701
|
+
topLeft: pointAtCenter ? { points: ["bl", "tc"], offset: [-cornerOffset, -8], overflow, autoArrow: false } : { points: ["bl", "tl"], offset: [0, -8], overflow, autoArrow: false },
|
|
1702
|
+
topRight: pointAtCenter ? { points: ["br", "tc"], offset: [cornerOffset, -8], overflow, autoArrow: false } : { points: ["br", "tr"], offset: [0, -8], overflow, autoArrow: false },
|
|
1703
|
+
bottomLeft: pointAtCenter ? { points: ["tl", "bc"], offset: [-cornerOffset, 8], overflow, autoArrow: false } : { points: ["tl", "bl"], offset: [0, 8], overflow, autoArrow: false },
|
|
1704
|
+
bottomRight: pointAtCenter ? { points: ["tr", "bc"], offset: [cornerOffset, 8], overflow, autoArrow: false } : { points: ["tr", "br"], offset: [0, 8], overflow, autoArrow: false },
|
|
1705
|
+
leftTop: pointAtCenter ? { points: ["tr", "cl"], offset: [-8, -cornerOffset], overflow, autoArrow: false } : { points: ["tr", "tl"], offset: [-8, 0], overflow, autoArrow: false },
|
|
1706
|
+
leftBottom: pointAtCenter ? { points: ["br", "cl"], offset: [-8, cornerOffset], overflow, autoArrow: false } : { points: ["br", "bl"], offset: [-8, 0], overflow, autoArrow: false },
|
|
1707
|
+
rightTop: pointAtCenter ? { points: ["tl", "cr"], offset: [8, -cornerOffset], overflow, autoArrow: false } : { points: ["tl", "tr"], offset: [8, 0], overflow, autoArrow: false },
|
|
1708
|
+
rightBottom: pointAtCenter ? { points: ["bl", "cr"], offset: [8, cornerOffset], overflow, autoArrow: false } : { points: ["bl", "br"], offset: [8, 0], overflow, autoArrow: false }
|
|
1709
|
+
};
|
|
1710
|
+
}
|
|
1711
|
+
var Tooltip = import_react4.forwardRef(function Tooltip2({
|
|
1712
|
+
afterOpenChange,
|
|
1713
|
+
afterVisibleChange,
|
|
1714
|
+
align,
|
|
1715
|
+
arrow,
|
|
1716
|
+
autoAdjustOverflow = true,
|
|
1717
|
+
builtinPlacements,
|
|
1718
|
+
children,
|
|
1719
|
+
className = "",
|
|
1720
|
+
classNames,
|
|
1721
|
+
color,
|
|
1722
|
+
defaultOpen,
|
|
1723
|
+
defaultVisible,
|
|
1724
|
+
disabled,
|
|
1725
|
+
destroyOnHidden,
|
|
1726
|
+
destroyTooltipOnHide,
|
|
1727
|
+
forceRender,
|
|
1728
|
+
fresh,
|
|
1729
|
+
getPopupContainer,
|
|
1730
|
+
getTooltipContainer,
|
|
1731
|
+
id,
|
|
1732
|
+
maxWidth,
|
|
1733
|
+
motion,
|
|
1734
|
+
mouseEnterDelay = 0.1,
|
|
1735
|
+
mouseLeaveDelay = 0.1,
|
|
1736
|
+
onOpenChange,
|
|
1737
|
+
onPopupAlign,
|
|
1738
|
+
onVisibleChange,
|
|
1739
|
+
open,
|
|
1740
|
+
openClassName,
|
|
1741
|
+
overlay,
|
|
1742
|
+
overlayClassName,
|
|
1743
|
+
overlayInnerStyle,
|
|
1744
|
+
overlayStyle,
|
|
1745
|
+
placement,
|
|
1746
|
+
rootClassName,
|
|
1747
|
+
style,
|
|
1748
|
+
styles,
|
|
1749
|
+
title,
|
|
1750
|
+
trigger,
|
|
1751
|
+
unique,
|
|
1752
|
+
variant,
|
|
1753
|
+
visible,
|
|
1754
|
+
zIndex
|
|
1755
|
+
}, ref) {
|
|
1756
|
+
const config = useConfig();
|
|
1757
|
+
const motionDisabled = isMotionDisabled(config.motion);
|
|
1758
|
+
const mergedArrow = arrow ?? config.components.Tooltip?.arrow ?? true;
|
|
1759
|
+
const mergedDisabled = disabled || config.disabled || config.components.Tooltip?.disabled;
|
|
1760
|
+
const mergedPlacement = placement ?? config.components.Tooltip?.placement ?? "top";
|
|
1761
|
+
const mergedTrigger = trigger ?? config.components.Tooltip?.trigger ?? "hover";
|
|
1762
|
+
const mergedVariant = variant ?? config.components.Tooltip?.variant ?? "dark";
|
|
1763
|
+
const mergedTitle = title ?? overlay;
|
|
1764
|
+
const [mergedOpen, setMergedOpen] = import_util.useControlledState(defaultOpen ?? defaultVisible ?? false, open ?? visible);
|
|
1765
|
+
const noTitle = !mergedTitle && mergedTitle !== 0;
|
|
1766
|
+
const popupVisible = mergedDisabled || noTitle ? false : mergedOpen;
|
|
1767
|
+
const pointAtCenter = typeof mergedArrow === "object" && mergedArrow.pointAtCenter === true;
|
|
1768
|
+
const placements = import_react4.useMemo(() => builtinPlacements ?? getTooltipPlacements(pointAtCenter, autoAdjustOverflow), [autoAdjustOverflow, builtinPlacements, pointAtCenter]);
|
|
1769
|
+
const triggerNode = getTooltipChild(children, cn(slotClass(classNames, "trigger"), popupVisible && openClassName));
|
|
1770
|
+
const popupStyle = slotStyle(styles, "root", slotStyle(styles, "popup", {
|
|
1771
|
+
...maxWidth == null ? undefined : { maxWidth, whiteSpace: "normal" },
|
|
1772
|
+
...color ? { "--hj-tooltip-color": color, backgroundColor: color } : undefined,
|
|
1773
|
+
...overlayStyle,
|
|
1774
|
+
...style
|
|
1775
|
+
}));
|
|
1776
|
+
const popupClassName = cn("hj-tooltip-root", `hj-tooltip-${mergedVariant}`, pointAtCenter && "hj-tooltip-arrow-center", className, overlayClassName, rootClassName, classNames?.root, classNames?.popup);
|
|
1777
|
+
const rcTrigger = typeof mergedTrigger === "string" ? mergedTrigger : [...mergedTrigger];
|
|
1778
|
+
return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(import_tooltip.default, {
|
|
1779
|
+
afterVisibleChange: (nextOpen) => {
|
|
1780
|
+
afterOpenChange?.(nextOpen);
|
|
1781
|
+
afterVisibleChange?.(nextOpen);
|
|
1782
|
+
},
|
|
1783
|
+
align,
|
|
1784
|
+
builtinPlacements: placements,
|
|
1785
|
+
classNames: {
|
|
1786
|
+
root: popupClassName,
|
|
1787
|
+
arrow: slotClass(classNames, "arrow", "hj-tooltip-arrow-inner"),
|
|
1788
|
+
container: slotClass(classNames, "content", "hj-tooltip-container-inner")
|
|
1789
|
+
},
|
|
1790
|
+
destroyOnHidden: destroyOnHidden ?? (typeof destroyTooltipOnHide === "object" ? true : destroyTooltipOnHide),
|
|
1791
|
+
forceRender,
|
|
1792
|
+
fresh,
|
|
1793
|
+
getTooltipContainer: getPopupContainer ?? getTooltipContainer ?? (config.getPopupContainer ? () => config.getPopupContainer?.() ?? document.body : undefined),
|
|
1794
|
+
id,
|
|
1795
|
+
mouseEnterDelay,
|
|
1796
|
+
mouseLeaveDelay,
|
|
1797
|
+
motion: motionDisabled ? undefined : motion ?? { motionName: "hj-zoom" },
|
|
1798
|
+
onPopupAlign,
|
|
1799
|
+
overlay: mergedTitle,
|
|
1800
|
+
placement: mergedPlacement,
|
|
1801
|
+
prefixCls: "hj-tooltip",
|
|
1802
|
+
ref,
|
|
1803
|
+
showArrow: typeof mergedArrow === "object" ? true : mergedArrow,
|
|
1804
|
+
styles: {
|
|
1805
|
+
root: popupStyle,
|
|
1806
|
+
arrow: slotStyle(styles, "arrow"),
|
|
1807
|
+
container: slotStyle(styles, "content", overlayInnerStyle)
|
|
1808
|
+
},
|
|
1809
|
+
trigger: rcTrigger,
|
|
1810
|
+
unique,
|
|
1811
|
+
visible: popupVisible,
|
|
1812
|
+
zIndex,
|
|
1813
|
+
onVisibleChange: (nextOpen) => {
|
|
1814
|
+
if (mergedDisabled || noTitle)
|
|
1815
|
+
return;
|
|
1816
|
+
setMergedOpen(nextOpen);
|
|
1817
|
+
onOpenChange?.(nextOpen);
|
|
1818
|
+
onVisibleChange?.(nextOpen);
|
|
1819
|
+
},
|
|
1820
|
+
children: triggerNode
|
|
1821
|
+
}, undefined, false, undefined, this);
|
|
1822
|
+
});
|
|
1823
|
+
Tooltip.displayName = "Tooltip";
|
|
1824
|
+
|
|
1825
|
+
// src/components/Typography.tsx
|
|
1826
|
+
var jsx_dev_runtime15 = require("react/jsx-dev-runtime");
|
|
1827
|
+
var titleClass = {
|
|
1828
|
+
page: "text-[32px] font-bold leading-[38px] tracking-normal text-white",
|
|
1829
|
+
section: "text-sm font-semibold text-[#f2f4f6]",
|
|
1830
|
+
card: "text-[13px] font-semibold text-[#f2f4f6]"
|
|
1831
|
+
};
|
|
1832
|
+
var titleLevelClass = {
|
|
1833
|
+
1: "text-[32px] font-semibold leading-[1.25] text-[var(--hj-color-web-foreground)]",
|
|
1834
|
+
2: "text-2xl font-semibold leading-[1.3] text-[var(--hj-color-web-foreground)]",
|
|
1835
|
+
3: "text-xl font-semibold leading-[1.35] text-[var(--hj-color-web-foreground)]",
|
|
1836
|
+
4: "text-base font-semibold leading-[1.4] text-[var(--hj-color-web-foreground)]",
|
|
1837
|
+
5: "text-sm font-semibold leading-[1.45] text-[var(--hj-color-web-foreground)]"
|
|
1838
|
+
};
|
|
1839
|
+
var textClass = {
|
|
1840
|
+
body: "text-sm text-[#a5adb8]",
|
|
1841
|
+
muted: "text-xs text-[#8b94a0]",
|
|
1842
|
+
action: "text-xs font-normal leading-none text-[#8b94a0] hover:text-[#d6a84a]"
|
|
1843
|
+
};
|
|
1844
|
+
var typeClass = {
|
|
1845
|
+
secondary: "text-[var(--hj-color-web-muted)]",
|
|
1846
|
+
success: "text-[var(--hj-color-success)]",
|
|
1847
|
+
warning: "text-[var(--hj-color-warning)]",
|
|
1848
|
+
danger: "text-[var(--hj-color-danger)]"
|
|
1849
|
+
};
|
|
1850
|
+
var EMPTY_COPY_CONFIG = {};
|
|
1851
|
+
var EMPTY_EDIT_CONFIG = {};
|
|
1852
|
+
var EMPTY_ELLIPSIS_CONFIG = {};
|
|
1853
|
+
var ELLIPSIS_TEXT = "...";
|
|
1854
|
+
function decorateContent(props, content) {
|
|
1855
|
+
let result = content;
|
|
1856
|
+
if (props.mark)
|
|
1857
|
+
result = /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("mark", {
|
|
1858
|
+
children: result
|
|
1859
|
+
}, undefined, false, undefined, this);
|
|
1860
|
+
if (props.code)
|
|
1861
|
+
result = /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("code", {
|
|
1862
|
+
children: result
|
|
1863
|
+
}, undefined, false, undefined, this);
|
|
1864
|
+
if (props.keyboard)
|
|
1865
|
+
result = /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("kbd", {
|
|
1866
|
+
children: result
|
|
1867
|
+
}, undefined, false, undefined, this);
|
|
1868
|
+
if (props.underline)
|
|
1869
|
+
result = /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("u", {
|
|
1870
|
+
children: result
|
|
1871
|
+
}, undefined, false, undefined, this);
|
|
1872
|
+
if (props.delete)
|
|
1873
|
+
result = /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("del", {
|
|
1874
|
+
children: result
|
|
1875
|
+
}, undefined, false, undefined, this);
|
|
1876
|
+
if (props.strong)
|
|
1877
|
+
result = /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("strong", {
|
|
1878
|
+
children: result
|
|
1879
|
+
}, undefined, false, undefined, this);
|
|
1880
|
+
if (props.italic)
|
|
1881
|
+
result = /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("i", {
|
|
1882
|
+
children: result
|
|
1883
|
+
}, undefined, false, undefined, this);
|
|
1884
|
+
return result;
|
|
1885
|
+
}
|
|
1886
|
+
function getNodeText(node) {
|
|
1887
|
+
if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
|
|
1888
|
+
return String(node);
|
|
1889
|
+
}
|
|
1890
|
+
if (Array.isArray(node))
|
|
1891
|
+
return node.map(getNodeText).join("");
|
|
1892
|
+
if (import_react5.isValidElement(node)) {
|
|
1893
|
+
return getNodeText(node.props.children);
|
|
1894
|
+
}
|
|
1895
|
+
return "";
|
|
1896
|
+
}
|
|
1897
|
+
function legacyCopy(text, format) {
|
|
1898
|
+
const holder = document.createElement("textarea");
|
|
1899
|
+
holder.value = text;
|
|
1900
|
+
holder.setAttribute("readonly", "");
|
|
1901
|
+
holder.style.position = "fixed";
|
|
1902
|
+
holder.style.insetInlineStart = "-9999px";
|
|
1903
|
+
holder.style.opacity = "0";
|
|
1904
|
+
const handleCopy = (event) => {
|
|
1905
|
+
event.clipboardData?.setData(format, text);
|
|
1906
|
+
event.preventDefault();
|
|
1907
|
+
};
|
|
1908
|
+
document.addEventListener("copy", handleCopy);
|
|
1909
|
+
document.body.appendChild(holder);
|
|
1910
|
+
holder.select();
|
|
1911
|
+
let copied = false;
|
|
1912
|
+
try {
|
|
1913
|
+
if (typeof document.execCommand !== "function")
|
|
1914
|
+
throw new Error("Clipboard is unavailable");
|
|
1915
|
+
copied = document.execCommand("copy");
|
|
1916
|
+
} finally {
|
|
1917
|
+
holder.remove();
|
|
1918
|
+
document.removeEventListener("copy", handleCopy);
|
|
1919
|
+
}
|
|
1920
|
+
if (!copied)
|
|
1921
|
+
throw new Error("Unable to copy text to the clipboard");
|
|
1922
|
+
}
|
|
1923
|
+
async function copyText(text, format = "text/plain") {
|
|
1924
|
+
if (typeof navigator !== "undefined" && navigator.clipboard) {
|
|
1925
|
+
try {
|
|
1926
|
+
if (format === "text/html" && typeof ClipboardItem !== "undefined" && typeof navigator.clipboard.write === "function") {
|
|
1927
|
+
const item = new ClipboardItem({
|
|
1928
|
+
[format]: new Blob([text], { type: format })
|
|
1929
|
+
});
|
|
1930
|
+
await navigator.clipboard.write([item]);
|
|
1931
|
+
return;
|
|
1932
|
+
}
|
|
1933
|
+
if (typeof navigator.clipboard.writeText === "function") {
|
|
1934
|
+
await navigator.clipboard.writeText(text);
|
|
1935
|
+
return;
|
|
1936
|
+
}
|
|
1937
|
+
} catch {}
|
|
1938
|
+
}
|
|
1939
|
+
if (typeof document === "undefined")
|
|
1940
|
+
throw new Error("Clipboard is unavailable");
|
|
1941
|
+
legacyCopy(text, format);
|
|
1942
|
+
}
|
|
1943
|
+
function toConfigList(value) {
|
|
1944
|
+
if (value === false)
|
|
1945
|
+
return [false, false];
|
|
1946
|
+
return Array.isArray(value) ? value : [value];
|
|
1947
|
+
}
|
|
1948
|
+
function getConfigNode(value, fallback, alwaysRender = false) {
|
|
1949
|
+
if (value === true || value === undefined)
|
|
1950
|
+
return fallback;
|
|
1951
|
+
return value || (alwaysRender ? fallback : value);
|
|
1952
|
+
}
|
|
1953
|
+
function EditableTypography({
|
|
1954
|
+
ariaLabel,
|
|
1955
|
+
className,
|
|
1956
|
+
component,
|
|
1957
|
+
config,
|
|
1958
|
+
disabled,
|
|
1959
|
+
onCancel,
|
|
1960
|
+
onSave,
|
|
1961
|
+
style,
|
|
1962
|
+
value
|
|
1963
|
+
}) {
|
|
1964
|
+
const inputRef = import_react5.useRef(null);
|
|
1965
|
+
const composingRef = import_react5.useRef(false);
|
|
1966
|
+
const lastKeyCodeRef = import_react5.useRef(null);
|
|
1967
|
+
const [current, setCurrent] = import_react5.useState(value);
|
|
1968
|
+
import_react5.useEffect(() => setCurrent(value), [value]);
|
|
1969
|
+
import_util2.useLayoutEffect(() => {
|
|
1970
|
+
const textArea = inputRef.current?.resizableTextArea.textArea;
|
|
1971
|
+
if (!textArea)
|
|
1972
|
+
return;
|
|
1973
|
+
textArea.focus();
|
|
1974
|
+
textArea.setSelectionRange(textArea.value.length, textArea.value.length);
|
|
1975
|
+
}, []);
|
|
1976
|
+
const confirmChange = import_util2.useEvent(() => onSave(current.trim()));
|
|
1977
|
+
const handleChange = (event) => {
|
|
1978
|
+
setCurrent(event.target.value.replace(/[\n\r]/g, ""));
|
|
1979
|
+
};
|
|
1980
|
+
const handleKeyDown = (event) => {
|
|
1981
|
+
if (!composingRef.current)
|
|
1982
|
+
lastKeyCodeRef.current = event.keyCode;
|
|
1983
|
+
};
|
|
1984
|
+
const handleKeyUp = (event) => {
|
|
1985
|
+
if (composingRef.current || lastKeyCodeRef.current !== event.keyCode || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
|
|
1986
|
+
return;
|
|
1987
|
+
}
|
|
1988
|
+
if (event.key === "Enter" || event.keyCode === 13) {
|
|
1989
|
+
confirmChange();
|
|
1990
|
+
config.onEnd?.();
|
|
1991
|
+
} else if (event.key === "Escape" || event.keyCode === 27) {
|
|
1992
|
+
onCancel();
|
|
1993
|
+
}
|
|
1994
|
+
};
|
|
1995
|
+
const handleBlur = () => confirmChange();
|
|
1996
|
+
const enterIcon = config.enterIcon === undefined ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Icon, {
|
|
1997
|
+
"aria-hidden": "true",
|
|
1998
|
+
name: "check",
|
|
1999
|
+
size: 14
|
|
2000
|
+
}, undefined, false, undefined, this) : config.enterIcon;
|
|
2001
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
|
|
2002
|
+
className: cn("hj-typography hj-typography-edit-content relative inline-flex w-full min-w-0 items-start", `hj-typography-${component}`, className),
|
|
2003
|
+
style,
|
|
2004
|
+
children: [
|
|
2005
|
+
/* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_input.TextArea, {
|
|
2006
|
+
"aria-label": ariaLabel,
|
|
2007
|
+
autoSize: config.autoSize ?? true,
|
|
2008
|
+
className: "hj-typography-edit-input min-w-0 flex-1 rounded-[var(--hj-input-radius)] border border-[var(--hj-input-border-active)] bg-[var(--hj-input-bg)] text-[var(--hj-input-fg)]",
|
|
2009
|
+
classNames: {
|
|
2010
|
+
affixWrapper: "hj-typography-edit-input min-w-0 flex-1 rounded-[var(--hj-input-radius)] border border-[var(--hj-input-border-active)] bg-[var(--hj-input-bg)]",
|
|
2011
|
+
textarea: cn("hj-typography-edit-textarea block min-h-8 w-full resize-none bg-transparent px-3 py-2 font-[inherit] leading-[inherit] text-[var(--hj-input-fg)] outline-none", enterIcon !== null && "pr-8")
|
|
2012
|
+
},
|
|
2013
|
+
disabled,
|
|
2014
|
+
maxLength: config.maxLength,
|
|
2015
|
+
prefixCls: "hj-typography-edit",
|
|
2016
|
+
ref: inputRef,
|
|
2017
|
+
rows: 1,
|
|
2018
|
+
value: current,
|
|
2019
|
+
onBlur: handleBlur,
|
|
2020
|
+
onChange: handleChange,
|
|
2021
|
+
onCompositionEnd: () => {
|
|
2022
|
+
composingRef.current = false;
|
|
2023
|
+
},
|
|
2024
|
+
onCompositionStart: () => {
|
|
2025
|
+
composingRef.current = true;
|
|
2026
|
+
},
|
|
2027
|
+
onKeyDown: handleKeyDown,
|
|
2028
|
+
onKeyUp: handleKeyUp
|
|
2029
|
+
}, undefined, false, undefined, this),
|
|
2030
|
+
enterIcon !== null ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
|
|
2031
|
+
"aria-hidden": "true",
|
|
2032
|
+
className: "hj-typography-edit-content-confirm pointer-events-none absolute right-2 top-2 inline-flex text-[var(--hj-color-brand)]",
|
|
2033
|
+
children: enterIcon
|
|
2034
|
+
}, undefined, false, undefined, this) : null
|
|
2035
|
+
]
|
|
2036
|
+
}, undefined, true, undefined, this);
|
|
2037
|
+
}
|
|
2038
|
+
var MeasureText = import_react5.forwardRef(function MeasureText2({ children, style }, ref) {
|
|
2039
|
+
const elementRef = import_react5.useRef(null);
|
|
2040
|
+
import_react5.useImperativeHandle(ref, () => ({
|
|
2041
|
+
getHeight: () => {
|
|
2042
|
+
const element = elementRef.current;
|
|
2043
|
+
return element ? element.getBoundingClientRect().height || element.clientHeight : 0;
|
|
2044
|
+
},
|
|
2045
|
+
isExceed: () => {
|
|
2046
|
+
const element = elementRef.current;
|
|
2047
|
+
return element ? element.scrollHeight > element.clientHeight : false;
|
|
2048
|
+
}
|
|
2049
|
+
}));
|
|
2050
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
|
|
2051
|
+
"aria-hidden": "true",
|
|
2052
|
+
ref: elementRef,
|
|
2053
|
+
style: {
|
|
2054
|
+
background: "transparent",
|
|
2055
|
+
insetInlineStart: 0,
|
|
2056
|
+
pointerEvents: "none",
|
|
2057
|
+
position: "fixed",
|
|
2058
|
+
top: 0,
|
|
2059
|
+
visibility: "hidden",
|
|
2060
|
+
zIndex: -1,
|
|
2061
|
+
...style
|
|
2062
|
+
},
|
|
2063
|
+
children
|
|
2064
|
+
}, undefined, false, undefined, this);
|
|
2065
|
+
});
|
|
2066
|
+
function getNodesLength(nodes) {
|
|
2067
|
+
return nodes.reduce((length, node) => length + (typeof node === "string" || typeof node === "number" ? String(node).length : 1), 0);
|
|
2068
|
+
}
|
|
2069
|
+
function sliceNodes(nodes, length) {
|
|
2070
|
+
let currentLength = 0;
|
|
2071
|
+
const result = [];
|
|
2072
|
+
for (const node of nodes) {
|
|
2073
|
+
if (currentLength === length)
|
|
2074
|
+
break;
|
|
2075
|
+
const canSlice = typeof node === "string" || typeof node === "number";
|
|
2076
|
+
const nodeLength = canSlice ? String(node).length : 1;
|
|
2077
|
+
const nextLength = currentLength + nodeLength;
|
|
2078
|
+
if (nextLength > length) {
|
|
2079
|
+
result.push(String(node).slice(0, length - currentLength));
|
|
2080
|
+
break;
|
|
2081
|
+
}
|
|
2082
|
+
result.push(node);
|
|
2083
|
+
currentLength = nextLength;
|
|
2084
|
+
}
|
|
2085
|
+
return result;
|
|
2086
|
+
}
|
|
2087
|
+
var lineClampStyle = {
|
|
2088
|
+
WebkitBoxOrient: "vertical",
|
|
2089
|
+
display: "-webkit-box",
|
|
2090
|
+
overflow: "hidden"
|
|
2091
|
+
};
|
|
2092
|
+
function EllipsisMeasure({
|
|
2093
|
+
enable,
|
|
2094
|
+
expanded,
|
|
2095
|
+
measureKey,
|
|
2096
|
+
onEllipsis,
|
|
2097
|
+
renderContent,
|
|
2098
|
+
rows,
|
|
2099
|
+
text,
|
|
2100
|
+
width
|
|
2101
|
+
}) {
|
|
2102
|
+
const render = import_util2.useEvent(renderContent);
|
|
2103
|
+
const triggerEllipsis = import_util2.useEvent(onEllipsis);
|
|
2104
|
+
const nodes = import_react5.useMemo(() => import_util2.toArray(text), [text]);
|
|
2105
|
+
const nodeLength = import_react5.useMemo(() => getNodesLength(nodes), [nodes]);
|
|
2106
|
+
const cutMeasureRef = import_react5.useRef(null);
|
|
2107
|
+
const overflowMeasureRef = import_react5.useRef(null);
|
|
2108
|
+
const previousRowsMeasureRef = import_react5.useRef(null);
|
|
2109
|
+
const operationMeasureRef = import_react5.useRef(null);
|
|
2110
|
+
const whiteSpaceMeasureRef = import_react5.useRef(null);
|
|
2111
|
+
const [status, setStatus] = import_react5.useState("none");
|
|
2112
|
+
const [cutRange, setCutRange] = import_react5.useState(null);
|
|
2113
|
+
const [canEllipsis, setCanEllipsis] = import_react5.useState(false);
|
|
2114
|
+
const [ellipsisHeight, setEllipsisHeight] = import_react5.useState(0);
|
|
2115
|
+
const [parentWhiteSpace, setParentWhiteSpace] = import_react5.useState(null);
|
|
2116
|
+
import_util2.useLayoutEffect(() => {
|
|
2117
|
+
if (enable && width > 0 && nodeLength > 0) {
|
|
2118
|
+
setStatus("prepare");
|
|
2119
|
+
} else {
|
|
2120
|
+
setStatus("none");
|
|
2121
|
+
setCutRange(null);
|
|
2122
|
+
setCanEllipsis(false);
|
|
2123
|
+
}
|
|
2124
|
+
}, [enable, measureKey, nodeLength, rows, text, width]);
|
|
2125
|
+
import_util2.useLayoutEffect(() => {
|
|
2126
|
+
if (status === "prepare") {
|
|
2127
|
+
setParentWhiteSpace(whiteSpaceMeasureRef.current ? getComputedStyle(whiteSpaceMeasureRef.current).whiteSpace : null);
|
|
2128
|
+
setStatus("start");
|
|
2129
|
+
return;
|
|
2130
|
+
}
|
|
2131
|
+
if (status !== "start")
|
|
2132
|
+
return;
|
|
2133
|
+
const overflowing = overflowMeasureRef.current?.isExceed() ?? false;
|
|
2134
|
+
const baseHeight = overflowMeasureRef.current?.getHeight() ?? 0;
|
|
2135
|
+
const previousRowsHeight = rows === 1 ? 0 : previousRowsMeasureRef.current?.getHeight() ?? 0;
|
|
2136
|
+
const operationHeight = operationMeasureRef.current?.getHeight() ?? 0;
|
|
2137
|
+
setCanEllipsis(overflowing);
|
|
2138
|
+
setCutRange(overflowing ? [0, nodeLength] : null);
|
|
2139
|
+
setEllipsisHeight(Math.max(baseHeight, previousRowsHeight + operationHeight) + 1);
|
|
2140
|
+
setStatus(overflowing ? "need" : "not-needed");
|
|
2141
|
+
triggerEllipsis(overflowing);
|
|
2142
|
+
}, [nodeLength, rows, status, triggerEllipsis]);
|
|
2143
|
+
const cutMiddle = cutRange ? Math.ceil((cutRange[0] + cutRange[1]) / 2) : 0;
|
|
2144
|
+
import_util2.useLayoutEffect(() => {
|
|
2145
|
+
if (!cutRange || cutRange[0] === cutRange[1])
|
|
2146
|
+
return;
|
|
2147
|
+
const [minimum, maximum] = cutRange;
|
|
2148
|
+
const overflowing = (cutMeasureRef.current?.getHeight() ?? 0) > ellipsisHeight;
|
|
2149
|
+
let target = cutMiddle;
|
|
2150
|
+
if (maximum - minimum === 1)
|
|
2151
|
+
target = overflowing ? minimum : maximum;
|
|
2152
|
+
setCutRange(overflowing ? [minimum, target] : [target, maximum]);
|
|
2153
|
+
}, [cutMiddle, cutRange, ellipsisHeight]);
|
|
2154
|
+
const fullContent = render(nodes, false);
|
|
2155
|
+
let visibleContent;
|
|
2156
|
+
if (!enable || status === "none" || status === "not-needed") {
|
|
2157
|
+
visibleContent = fullContent;
|
|
2158
|
+
} else if (status !== "need" || !cutRange || cutRange[0] !== cutRange[1]) {
|
|
2159
|
+
visibleContent = /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
|
|
2160
|
+
style: { ...lineClampStyle, WebkitLineClamp: rows },
|
|
2161
|
+
children: fullContent
|
|
2162
|
+
}, undefined, false, undefined, this);
|
|
2163
|
+
} else {
|
|
2164
|
+
visibleContent = render(expanded ? nodes : sliceNodes(nodes, cutRange[0]), canEllipsis);
|
|
2165
|
+
}
|
|
2166
|
+
const measureStyle = {
|
|
2167
|
+
margin: 0,
|
|
2168
|
+
padding: 0,
|
|
2169
|
+
whiteSpace: parentWhiteSpace === "nowrap" ? "normal" : "inherit",
|
|
2170
|
+
width
|
|
2171
|
+
};
|
|
2172
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(jsx_dev_runtime15.Fragment, {
|
|
2173
|
+
children: [
|
|
2174
|
+
visibleContent,
|
|
2175
|
+
status === "start" ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(jsx_dev_runtime15.Fragment, {
|
|
2176
|
+
children: [
|
|
2177
|
+
/* @__PURE__ */ jsx_dev_runtime15.jsxDEV(MeasureText, {
|
|
2178
|
+
ref: overflowMeasureRef,
|
|
2179
|
+
style: { ...measureStyle, ...lineClampStyle, WebkitLineClamp: rows },
|
|
2180
|
+
children: fullContent
|
|
2181
|
+
}, undefined, false, undefined, this),
|
|
2182
|
+
/* @__PURE__ */ jsx_dev_runtime15.jsxDEV(MeasureText, {
|
|
2183
|
+
ref: previousRowsMeasureRef,
|
|
2184
|
+
style: { ...measureStyle, ...lineClampStyle, WebkitLineClamp: rows - 1 },
|
|
2185
|
+
children: fullContent
|
|
2186
|
+
}, undefined, false, undefined, this),
|
|
2187
|
+
/* @__PURE__ */ jsx_dev_runtime15.jsxDEV(MeasureText, {
|
|
2188
|
+
ref: operationMeasureRef,
|
|
2189
|
+
style: { ...measureStyle, ...lineClampStyle, WebkitLineClamp: 1 },
|
|
2190
|
+
children: render([], true)
|
|
2191
|
+
}, undefined, false, undefined, this)
|
|
2192
|
+
]
|
|
2193
|
+
}, undefined, true, undefined, this) : null,
|
|
2194
|
+
status === "need" && cutRange && cutRange[0] !== cutRange[1] ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(MeasureText, {
|
|
2195
|
+
ref: cutMeasureRef,
|
|
2196
|
+
style: { ...measureStyle, top: 400 },
|
|
2197
|
+
children: render(sliceNodes(nodes, cutMiddle), true)
|
|
2198
|
+
}, undefined, false, undefined, this) : null,
|
|
2199
|
+
status === "prepare" ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
|
|
2200
|
+
ref: whiteSpaceMeasureRef,
|
|
2201
|
+
style: { whiteSpace: "inherit" }
|
|
2202
|
+
}, undefined, false, undefined, this) : null
|
|
2203
|
+
]
|
|
2204
|
+
}, undefined, true, undefined, this);
|
|
2205
|
+
}
|
|
2206
|
+
function isPlainObject(value) {
|
|
2207
|
+
if (!value || typeof value !== "object" || Array.isArray(value) || import_react5.isValidElement(value)) {
|
|
2208
|
+
return false;
|
|
2209
|
+
}
|
|
2210
|
+
const prototype = Object.getPrototypeOf(value);
|
|
2211
|
+
return prototype === Object.prototype || prototype === null;
|
|
2212
|
+
}
|
|
2213
|
+
function getEllipsisTooltipProps(tooltip, editText, children) {
|
|
2214
|
+
if (tooltip === true)
|
|
2215
|
+
return { title: editText ?? children };
|
|
2216
|
+
if (import_react5.isValidElement(tooltip))
|
|
2217
|
+
return { title: tooltip };
|
|
2218
|
+
if (isPlainObject(tooltip)) {
|
|
2219
|
+
return {
|
|
2220
|
+
title: editText ?? children,
|
|
2221
|
+
...tooltip
|
|
2222
|
+
};
|
|
2223
|
+
}
|
|
2224
|
+
return { title: tooltip };
|
|
2225
|
+
}
|
|
2226
|
+
function isElementEllipsized(element, rows) {
|
|
2227
|
+
return rows === 1 ? element.scrollWidth > element.clientWidth : element.scrollHeight > element.clientHeight;
|
|
2228
|
+
}
|
|
2229
|
+
function TypographyBase({
|
|
2230
|
+
actions,
|
|
2231
|
+
children,
|
|
2232
|
+
className,
|
|
2233
|
+
code,
|
|
2234
|
+
copyable = false,
|
|
2235
|
+
delete: deleted,
|
|
2236
|
+
disabled = false,
|
|
2237
|
+
editable = false,
|
|
2238
|
+
ellipsis,
|
|
2239
|
+
italic,
|
|
2240
|
+
keyboard,
|
|
2241
|
+
mark,
|
|
2242
|
+
rootClassName,
|
|
2243
|
+
strong,
|
|
2244
|
+
style,
|
|
2245
|
+
type,
|
|
2246
|
+
underline,
|
|
2247
|
+
component,
|
|
2248
|
+
onClick,
|
|
2249
|
+
"aria-label": ariaLabel,
|
|
2250
|
+
...props
|
|
2251
|
+
}) {
|
|
2252
|
+
const typographyRef = import_react5.useRef(null);
|
|
2253
|
+
const editButtonRef = import_react5.useRef(null);
|
|
2254
|
+
const copyTimerRef = import_react5.useRef(null);
|
|
2255
|
+
const enableCopy = Boolean(copyable);
|
|
2256
|
+
const enableEdit = Boolean(editable);
|
|
2257
|
+
const enableEllipsis = Boolean(ellipsis);
|
|
2258
|
+
const copyConfig = typeof copyable === "object" ? copyable : EMPTY_COPY_CONFIG;
|
|
2259
|
+
const editConfig = typeof editable === "object" ? editable : EMPTY_EDIT_CONFIG;
|
|
2260
|
+
const ellipsisConfig = typeof ellipsis === "object" ? ellipsis : EMPTY_ELLIPSIS_CONFIG;
|
|
2261
|
+
const triggerType = editConfig.triggerType ?? ["icon"];
|
|
2262
|
+
const placement = actions?.placement ?? "end";
|
|
2263
|
+
const [editing, setEditing] = import_util2.useControlledState(false, editConfig.editing);
|
|
2264
|
+
const [expanded, setExpanded] = import_util2.useControlledState(ellipsisConfig.defaultExpanded ?? false, ellipsisConfig.expanded);
|
|
2265
|
+
const [copied, setCopied] = import_react5.useState(false);
|
|
2266
|
+
const [copyLoading, setCopyLoading] = import_react5.useState(false);
|
|
2267
|
+
const [ellipsisWidth, setEllipsisWidth] = import_react5.useState(0);
|
|
2268
|
+
const [isJsEllipsis, setIsJsEllipsis] = import_react5.useState(false);
|
|
2269
|
+
const [isNativeEllipsis, setIsNativeEllipsis] = import_react5.useState(false);
|
|
2270
|
+
const previousEditingRef = import_react5.useRef(editing);
|
|
2271
|
+
const rows = Math.max(1, Math.floor(ellipsisConfig.rows ?? 1));
|
|
2272
|
+
const mergedEnableEllipsis = enableEllipsis && (!expanded || ellipsisConfig.expandable === "collapsible");
|
|
2273
|
+
const needMeasureEllipsis = mergedEnableEllipsis && (ellipsisConfig.suffix !== undefined || Boolean(ellipsisConfig.onEllipsis) || Boolean(ellipsisConfig.expandable) || enableEdit || enableCopy);
|
|
2274
|
+
const cssEllipsis = mergedEnableEllipsis && !needMeasureEllipsis;
|
|
2275
|
+
const tooltipProps = getEllipsisTooltipProps(ellipsisConfig.tooltip, editConfig.text, children);
|
|
2276
|
+
const { title: ellipsisTooltipTitle, ...ellipsisTooltipRest } = tooltipProps;
|
|
2277
|
+
const hasEllipsisTooltip = ellipsisTooltipTitle !== undefined && ellipsisTooltipTitle !== false;
|
|
2278
|
+
const isMergedEllipsis = mergedEnableEllipsis ? cssEllipsis ? hasEllipsisTooltip && isNativeEllipsis : isJsEllipsis : false;
|
|
2279
|
+
const measureKey = import_react5.useMemo(() => ({
|
|
2280
|
+
code,
|
|
2281
|
+
copied,
|
|
2282
|
+
copyIcon: copyConfig.icon,
|
|
2283
|
+
copyLoading,
|
|
2284
|
+
deleted,
|
|
2285
|
+
editIcon: editConfig.icon,
|
|
2286
|
+
enableCopy,
|
|
2287
|
+
enableEdit,
|
|
2288
|
+
expanded,
|
|
2289
|
+
italic,
|
|
2290
|
+
keyboard,
|
|
2291
|
+
mark,
|
|
2292
|
+
placement,
|
|
2293
|
+
strong,
|
|
2294
|
+
style,
|
|
2295
|
+
suffix: ellipsisConfig.suffix,
|
|
2296
|
+
symbol: ellipsisConfig.symbol,
|
|
2297
|
+
underline
|
|
2298
|
+
}), [
|
|
2299
|
+
code,
|
|
2300
|
+
copied,
|
|
2301
|
+
copyConfig.icon,
|
|
2302
|
+
copyLoading,
|
|
2303
|
+
deleted,
|
|
2304
|
+
editConfig.icon,
|
|
2305
|
+
ellipsisConfig.suffix,
|
|
2306
|
+
ellipsisConfig.symbol,
|
|
2307
|
+
enableCopy,
|
|
2308
|
+
enableEdit,
|
|
2309
|
+
expanded,
|
|
2310
|
+
italic,
|
|
2311
|
+
keyboard,
|
|
2312
|
+
mark,
|
|
2313
|
+
placement,
|
|
2314
|
+
strong,
|
|
2315
|
+
style,
|
|
2316
|
+
underline
|
|
2317
|
+
]);
|
|
2318
|
+
import_react5.useEffect(() => () => {
|
|
2319
|
+
if (copyTimerRef.current)
|
|
2320
|
+
clearTimeout(copyTimerRef.current);
|
|
2321
|
+
}, []);
|
|
2322
|
+
import_util2.useLayoutEffect(() => {
|
|
2323
|
+
if (!editing && previousEditingRef.current)
|
|
2324
|
+
editButtonRef.current?.focus();
|
|
2325
|
+
previousEditingRef.current = editing;
|
|
2326
|
+
}, [editing]);
|
|
2327
|
+
import_util2.useLayoutEffect(() => {
|
|
2328
|
+
const element = typographyRef.current;
|
|
2329
|
+
if (!cssEllipsis || !hasEllipsisTooltip || !element) {
|
|
2330
|
+
setIsNativeEllipsis(false);
|
|
2331
|
+
return;
|
|
2332
|
+
}
|
|
2333
|
+
setIsNativeEllipsis(isElementEllipsized(element, rows));
|
|
2334
|
+
}, [children, cssEllipsis, ellipsisWidth, hasEllipsisTooltip, rows, style]);
|
|
2335
|
+
const triggerEditing = import_util2.useEvent((nextEditing) => {
|
|
2336
|
+
if (nextEditing)
|
|
2337
|
+
editConfig.onStart?.();
|
|
2338
|
+
setEditing(nextEditing);
|
|
2339
|
+
});
|
|
2340
|
+
const handleEditSave = import_util2.useEvent((value) => {
|
|
2341
|
+
editConfig.onChange?.(value);
|
|
2342
|
+
setEditing(false);
|
|
2343
|
+
});
|
|
2344
|
+
const handleEditCancel = import_util2.useEvent(() => {
|
|
2345
|
+
editConfig.onCancel?.();
|
|
2346
|
+
setEditing(false);
|
|
2347
|
+
});
|
|
2348
|
+
const handleCopy = import_util2.useEvent(async (event) => {
|
|
2349
|
+
event.preventDefault();
|
|
2350
|
+
event.stopPropagation();
|
|
2351
|
+
if (disabled || copyLoading)
|
|
2352
|
+
return;
|
|
2353
|
+
setCopyLoading(true);
|
|
2354
|
+
try {
|
|
2355
|
+
const configuredText = typeof copyConfig.text === "function" ? await copyConfig.text() : copyConfig.text;
|
|
2356
|
+
await copyText(configuredText ?? getNodeText(children), copyConfig.format);
|
|
2357
|
+
setCopied(true);
|
|
2358
|
+
if (copyTimerRef.current)
|
|
2359
|
+
clearTimeout(copyTimerRef.current);
|
|
2360
|
+
copyTimerRef.current = setTimeout(() => setCopied(false), 3000);
|
|
2361
|
+
copyConfig.onCopy?.(event);
|
|
2362
|
+
} finally {
|
|
2363
|
+
setCopyLoading(false);
|
|
2364
|
+
}
|
|
2365
|
+
});
|
|
2366
|
+
const handleJsEllipsis = import_util2.useEvent((nextEllipsis) => {
|
|
2367
|
+
setIsJsEllipsis((previous) => {
|
|
2368
|
+
if (previous !== nextEllipsis)
|
|
2369
|
+
ellipsisConfig.onEllipsis?.(nextEllipsis);
|
|
2370
|
+
return nextEllipsis;
|
|
2371
|
+
});
|
|
2372
|
+
});
|
|
2373
|
+
if (enableEdit && editing) {
|
|
2374
|
+
const editableValue = editConfig.text ?? (typeof children === "string" || typeof children === "number" ? String(children) : "");
|
|
2375
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(EditableTypography, {
|
|
2376
|
+
ariaLabel,
|
|
2377
|
+
className: cn(type && type !== "button" ? `hj-typography-${type}` : undefined, type && type !== "button" ? typeClass[type] : undefined, disabled && "hj-typography-disabled cursor-not-allowed opacity-45", rootClassName, className),
|
|
2378
|
+
component,
|
|
2379
|
+
config: editConfig,
|
|
2380
|
+
disabled,
|
|
2381
|
+
style,
|
|
2382
|
+
value: editableValue,
|
|
2383
|
+
onCancel: handleEditCancel,
|
|
2384
|
+
onSave: handleEditSave
|
|
2385
|
+
}, undefined, false, undefined, this);
|
|
2386
|
+
}
|
|
2387
|
+
const renderExpand = (canEllipsis) => {
|
|
2388
|
+
if (!canEllipsis || !ellipsisConfig.expandable)
|
|
2389
|
+
return null;
|
|
2390
|
+
const nextExpanded = !expanded;
|
|
2391
|
+
const defaultSymbol = expanded ? "Collapse" : "Expand";
|
|
2392
|
+
const symbol = typeof ellipsisConfig.symbol === "function" ? ellipsisConfig.symbol(expanded) : ellipsisConfig.symbol ?? defaultSymbol;
|
|
2393
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("button", {
|
|
2394
|
+
"aria-expanded": expanded,
|
|
2395
|
+
"aria-label": defaultSymbol,
|
|
2396
|
+
className: cn("hj-typography-action border-0 bg-transparent p-0 text-[var(--hj-color-brand)] hover:text-[var(--hj-color-brand-hover)]", expanded ? "hj-typography-collapse" : "hj-typography-expand"),
|
|
2397
|
+
disabled,
|
|
2398
|
+
type: "button",
|
|
2399
|
+
onClick: (event) => {
|
|
2400
|
+
event.preventDefault();
|
|
2401
|
+
event.stopPropagation();
|
|
2402
|
+
setExpanded(nextExpanded);
|
|
2403
|
+
ellipsisConfig.onExpand?.(event, { expanded: nextExpanded });
|
|
2404
|
+
},
|
|
2405
|
+
children: symbol
|
|
2406
|
+
}, "expand", false, undefined, this);
|
|
2407
|
+
};
|
|
2408
|
+
const renderEdit = () => {
|
|
2409
|
+
if (!enableEdit || !triggerType.includes("icon"))
|
|
2410
|
+
return null;
|
|
2411
|
+
const editTitle = editConfig.tooltip === false ? undefined : editConfig.tooltip === true || editConfig.tooltip === undefined ? "Edit" : editConfig.tooltip;
|
|
2412
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Tooltip, {
|
|
2413
|
+
title: editTitle,
|
|
2414
|
+
children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("button", {
|
|
2415
|
+
"aria-label": typeof editTitle === "string" ? editTitle : "Edit",
|
|
2416
|
+
className: "hj-typography-action hj-typography-edit inline-flex border-0 bg-transparent p-0 text-current opacity-70 hover:text-[var(--hj-color-brand)] hover:opacity-100",
|
|
2417
|
+
disabled,
|
|
2418
|
+
ref: editButtonRef,
|
|
2419
|
+
tabIndex: editConfig.tabIndex,
|
|
2420
|
+
type: "button",
|
|
2421
|
+
onClick: (event) => {
|
|
2422
|
+
event.preventDefault();
|
|
2423
|
+
event.stopPropagation();
|
|
2424
|
+
triggerEditing(true);
|
|
2425
|
+
},
|
|
2426
|
+
children: editConfig.icon ?? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
|
|
2427
|
+
"aria-hidden": "true",
|
|
2428
|
+
className: "text-[15px] leading-none",
|
|
2429
|
+
children: "✎"
|
|
2430
|
+
}, undefined, false, undefined, this)
|
|
2431
|
+
}, undefined, false, undefined, this)
|
|
2432
|
+
}, "edit", false, undefined, this);
|
|
2433
|
+
};
|
|
2434
|
+
const renderCopy = () => {
|
|
2435
|
+
if (!enableCopy)
|
|
2436
|
+
return null;
|
|
2437
|
+
const icons = toConfigList(copyConfig.icon);
|
|
2438
|
+
const tooltips = toConfigList(copyConfig.tooltips);
|
|
2439
|
+
const defaultTitle = copied ? "Copied" : "Copy";
|
|
2440
|
+
const copyTitle = getConfigNode(tooltips[copied ? 1 : 0], defaultTitle);
|
|
2441
|
+
const defaultIcon2 = copied ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Icon, {
|
|
2442
|
+
"aria-hidden": "true",
|
|
2443
|
+
name: "check",
|
|
2444
|
+
size: 14
|
|
2445
|
+
}, undefined, false, undefined, this) : copyLoading ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Icon, {
|
|
2446
|
+
"aria-hidden": "true",
|
|
2447
|
+
className: "animate-spin",
|
|
2448
|
+
name: "refresh",
|
|
2449
|
+
size: 14
|
|
2450
|
+
}, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Icon, {
|
|
2451
|
+
"aria-hidden": "true",
|
|
2452
|
+
name: "copy",
|
|
2453
|
+
size: 14
|
|
2454
|
+
}, undefined, false, undefined, this);
|
|
2455
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Tooltip, {
|
|
2456
|
+
title: copyTitle,
|
|
2457
|
+
children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("button", {
|
|
2458
|
+
"aria-label": typeof copyTitle === "string" ? copyTitle : defaultTitle,
|
|
2459
|
+
className: cn("hj-typography-action hj-typography-copy inline-flex border-0 bg-transparent p-0 text-current opacity-70 hover:text-[var(--hj-color-brand)] hover:opacity-100", copied && "hj-typography-copy-success text-[var(--hj-color-success)] opacity-100", copyLoading && "hj-typography-copy-loading"),
|
|
2460
|
+
disabled: disabled || copyLoading,
|
|
2461
|
+
tabIndex: copyConfig.tabIndex,
|
|
2462
|
+
type: "button",
|
|
2463
|
+
onClick: handleCopy,
|
|
2464
|
+
children: getConfigNode(icons[copied ? 1 : 0], defaultIcon2, true)
|
|
2465
|
+
}, undefined, false, undefined, this)
|
|
2466
|
+
}, "copy", false, undefined, this);
|
|
2467
|
+
};
|
|
2468
|
+
const renderOperations = (canEllipsis) => {
|
|
2469
|
+
const operations = [renderExpand(canEllipsis), renderEdit(), renderCopy()];
|
|
2470
|
+
if (operations.every((operation) => operation == null))
|
|
2471
|
+
return null;
|
|
2472
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
|
|
2473
|
+
className: cn("hj-typography-actions inline-flex items-center gap-1 align-baseline", placement === "start" ? "hj-typography-actions-start mr-1" : "ml-1"),
|
|
2474
|
+
children: operations
|
|
2475
|
+
}, undefined, false, undefined, this);
|
|
2476
|
+
};
|
|
2477
|
+
const renderContent = (nodes, canEllipsis) => {
|
|
2478
|
+
const textContent = decorateContent({ code, delete: deleted, italic, keyboard, mark, strong, underline }, /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(jsx_dev_runtime15.Fragment, {
|
|
2479
|
+
children: [
|
|
2480
|
+
nodes,
|
|
2481
|
+
canEllipsis && !expanded ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
|
|
2482
|
+
"aria-hidden": "true",
|
|
2483
|
+
children: ELLIPSIS_TEXT
|
|
2484
|
+
}, undefined, false, undefined, this) : null,
|
|
2485
|
+
ellipsisConfig.suffix
|
|
2486
|
+
]
|
|
2487
|
+
}, undefined, true, undefined, this));
|
|
2488
|
+
const operations = renderOperations(canEllipsis);
|
|
2489
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(jsx_dev_runtime15.Fragment, {
|
|
2490
|
+
children: [
|
|
2491
|
+
placement === "start" ? operations : null,
|
|
2492
|
+
textContent,
|
|
2493
|
+
placement === "end" ? operations : null
|
|
2494
|
+
]
|
|
2495
|
+
}, undefined, true, undefined, this);
|
|
2496
|
+
};
|
|
2497
|
+
const cssEllipsisStyle = cssEllipsis ? rows > 1 ? { ...lineClampStyle, WebkitLineClamp: rows } : {
|
|
2498
|
+
display: component === "span" || component === "a" ? "inline-block" : undefined,
|
|
2499
|
+
overflow: "hidden",
|
|
2500
|
+
textOverflow: "ellipsis",
|
|
2501
|
+
whiteSpace: "nowrap"
|
|
2502
|
+
} : undefined;
|
|
2503
|
+
const fullText = editConfig.text ?? getNodeText(children);
|
|
2504
|
+
const rootProps = {
|
|
2505
|
+
...props,
|
|
2506
|
+
"aria-disabled": disabled || undefined,
|
|
2507
|
+
"aria-label": ariaLabel ?? (needMeasureEllipsis && isMergedEllipsis ? fullText : undefined),
|
|
2508
|
+
className: cn("hj-typography", type && type !== "button" ? `hj-typography-${type}` : undefined, type && type !== "button" ? typeClass[type] : undefined, disabled && "hj-typography-disabled cursor-not-allowed opacity-45", enableEllipsis && "hj-typography-ellipsis", cssEllipsis && rows === 1 && "hj-typography-ellipsis-single-line", cssEllipsis && rows > 1 && "hj-typography-ellipsis-multiple-line", expanded && "hj-typography-ellipsis-expanded", triggerType.includes("text") && enableEdit && !disabled && "cursor-pointer", rootClassName, className),
|
|
2509
|
+
onClick: (event) => {
|
|
2510
|
+
onClick?.(event);
|
|
2511
|
+
if (!event.defaultPrevented && enableEdit && !disabled && triggerType.includes("text")) {
|
|
2512
|
+
event.preventDefault();
|
|
2513
|
+
triggerEditing(true);
|
|
2514
|
+
}
|
|
2515
|
+
},
|
|
2516
|
+
style: { ...cssEllipsisStyle, ...style },
|
|
2517
|
+
...component === "button" ? { disabled, type: type === "button" ? "button" : undefined } : {}
|
|
2518
|
+
};
|
|
2519
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(import_resize_observer.default, {
|
|
2520
|
+
disabled: !mergedEnableEllipsis,
|
|
2521
|
+
onResize: ({ offsetWidth }) => setEllipsisWidth(offsetWidth),
|
|
2522
|
+
children: (resizeRef) => {
|
|
2523
|
+
const typographyNode = import_react5.createElement(component, { ...rootProps, ref: import_util2.composeRef(resizeRef, typographyRef) }, /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(EllipsisMeasure, {
|
|
2524
|
+
enable: needMeasureEllipsis,
|
|
2525
|
+
expanded,
|
|
2526
|
+
measureKey,
|
|
2527
|
+
rows,
|
|
2528
|
+
text: children,
|
|
2529
|
+
width: ellipsisWidth,
|
|
2530
|
+
onEllipsis: handleJsEllipsis,
|
|
2531
|
+
renderContent
|
|
2532
|
+
}, undefined, false, undefined, this));
|
|
2533
|
+
return hasEllipsisTooltip ? /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Tooltip, {
|
|
2534
|
+
...ellipsisTooltipRest,
|
|
2535
|
+
title: isMergedEllipsis ? ellipsisTooltipTitle : undefined,
|
|
2536
|
+
children: typographyNode
|
|
2537
|
+
}, undefined, false, undefined, this) : typographyNode;
|
|
2538
|
+
}
|
|
2539
|
+
}, undefined, false, undefined, this);
|
|
2540
|
+
}
|
|
2541
|
+
function Title({ as, className, level = 1, variant, ...props }) {
|
|
2542
|
+
const component = as ?? (variant ? "h2" : `h${level}`);
|
|
2543
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(TypographyBase, {
|
|
2544
|
+
...props,
|
|
2545
|
+
className: cn("hj-typography-title", variant ? titleClass[variant] : titleLevelClass[level], className),
|
|
2546
|
+
component
|
|
2547
|
+
}, undefined, false, undefined, this);
|
|
2548
|
+
}
|
|
2549
|
+
function Text({ as, className, variant, ...props }) {
|
|
2550
|
+
const component = as ?? (variant ? "p" : "span");
|
|
2551
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(TypographyBase, {
|
|
2552
|
+
...props,
|
|
2553
|
+
className: cn("hj-typography-text", textClass[variant ?? "body"], className),
|
|
2554
|
+
component
|
|
2555
|
+
}, undefined, false, undefined, this);
|
|
2556
|
+
}
|
|
2557
|
+
function Paragraph({ as = "p", className, ...props }) {
|
|
2558
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(TypographyBase, {
|
|
2559
|
+
...props,
|
|
2560
|
+
className: cn("hj-typography-paragraph", className),
|
|
2561
|
+
component: as
|
|
2562
|
+
}, undefined, false, undefined, this);
|
|
2563
|
+
}
|
|
2564
|
+
function Link({ className, ...props }) {
|
|
2565
|
+
return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(TypographyBase, {
|
|
2566
|
+
...props,
|
|
2567
|
+
className: cn("hj-typography-link text-[var(--hj-color-brand)] transition hover:underline", className),
|
|
2568
|
+
component: "a"
|
|
2569
|
+
}, undefined, false, undefined, this);
|
|
2570
|
+
}
|
|
2571
|
+
function TypographyRoot({
|
|
2572
|
+
children,
|
|
2573
|
+
className,
|
|
2574
|
+
component = "article",
|
|
2575
|
+
rootClassName,
|
|
2576
|
+
...props
|
|
2577
|
+
}) {
|
|
2578
|
+
return import_react5.createElement(component, { ...props, className: cn("hj-typography", rootClassName, className) }, children);
|
|
2579
|
+
}
|
|
2580
|
+
var Typography = Object.assign(TypographyRoot, {
|
|
2581
|
+
Link,
|
|
2582
|
+
Paragraph,
|
|
2583
|
+
Text,
|
|
2584
|
+
Title
|
|
2585
|
+
});
|
|
2586
|
+
|
|
2587
|
+
// src/components/SectionHeader.tsx
|
|
2588
|
+
var jsx_dev_runtime16 = require("react/jsx-dev-runtime");
|
|
2589
|
+
function SectionHeader({
|
|
2590
|
+
action,
|
|
2591
|
+
className = "",
|
|
2592
|
+
meta,
|
|
2593
|
+
middle,
|
|
2594
|
+
onAction,
|
|
2595
|
+
title
|
|
2596
|
+
}) {
|
|
2597
|
+
return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
|
|
2598
|
+
className: `flex items-center justify-between gap-3 ${className}`,
|
|
2599
|
+
children: [
|
|
2600
|
+
/* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
|
|
2601
|
+
className: "flex min-w-0 items-baseline gap-2",
|
|
2602
|
+
children: [
|
|
2603
|
+
/* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Title, {
|
|
2604
|
+
className: "shrink-0",
|
|
2605
|
+
variant: "section",
|
|
2606
|
+
children: title
|
|
2607
|
+
}, undefined, false, undefined, this),
|
|
2608
|
+
meta ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
|
|
2609
|
+
as: "span",
|
|
2610
|
+
className: "truncate font-semibold text-[#a5adb8]",
|
|
2611
|
+
variant: "muted",
|
|
2612
|
+
children: meta
|
|
2613
|
+
}, undefined, false, undefined, this) : null
|
|
2614
|
+
]
|
|
2615
|
+
}, undefined, true, undefined, this),
|
|
2616
|
+
middle ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
|
|
2617
|
+
className: "min-w-0 flex-1",
|
|
2618
|
+
children: middle
|
|
2619
|
+
}, undefined, false, undefined, this) : null,
|
|
2620
|
+
action ? /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(Text, {
|
|
2621
|
+
as: onAction ? "button" : "span",
|
|
2622
|
+
className: "shrink-0",
|
|
2623
|
+
onClick: onAction,
|
|
2624
|
+
type: onAction ? "button" : undefined,
|
|
2625
|
+
variant: "action",
|
|
2626
|
+
children: action
|
|
2627
|
+
}, undefined, false, undefined, this) : null
|
|
2628
|
+
]
|
|
2629
|
+
}, undefined, true, undefined, this);
|
|
2630
|
+
}
|
|
2631
|
+
// src/components/SegmentedTabs.tsx
|
|
2632
|
+
var exports_SegmentedTabs = {};
|
|
2633
|
+
__export(exports_SegmentedTabs, {
|
|
2634
|
+
SegmentedTabs: () => SegmentedTabs
|
|
2635
|
+
});
|
|
2636
|
+
|
|
2637
|
+
// src/components/Segmented.tsx
|
|
2638
|
+
var import_segmented = __toESM(require("@rc-component/segmented"));
|
|
2639
|
+
var import_react6 = require("react");
|
|
2640
|
+
var jsx_dev_runtime17 = require("react/jsx-dev-runtime");
|
|
2641
|
+
function isLabeledOption(option) {
|
|
2642
|
+
return typeof option === "object" && option !== null;
|
|
2643
|
+
}
|
|
2644
|
+
function normalizeSize(size, fallback) {
|
|
2645
|
+
if (size === "small" || size === "sm")
|
|
2646
|
+
return "sm";
|
|
2647
|
+
if (size === "large" || size === "lg")
|
|
2648
|
+
return "lg";
|
|
2649
|
+
if (size === "xs")
|
|
2650
|
+
return "xs";
|
|
2651
|
+
if (size === "medium" || size === "middle" || size === "md")
|
|
2652
|
+
return "md";
|
|
2653
|
+
return fallback;
|
|
2654
|
+
}
|
|
2655
|
+
function resolveSemantic(value, props) {
|
|
2656
|
+
return typeof value === "function" ? value({ props }) : value;
|
|
2657
|
+
}
|
|
2658
|
+
var InternalSegmented = import_react6.forwardRef((props, ref) => {
|
|
2659
|
+
const {
|
|
2660
|
+
block = false,
|
|
2661
|
+
className,
|
|
2662
|
+
classNames,
|
|
2663
|
+
disabled,
|
|
2664
|
+
items,
|
|
2665
|
+
name,
|
|
2666
|
+
options,
|
|
2667
|
+
orientation,
|
|
2668
|
+
rootClassName,
|
|
2669
|
+
shape = "default",
|
|
2670
|
+
size,
|
|
2671
|
+
style,
|
|
2672
|
+
styles,
|
|
2673
|
+
vertical,
|
|
2674
|
+
...restProps
|
|
2675
|
+
} = props;
|
|
2676
|
+
const config = useConfig();
|
|
2677
|
+
const generatedName = import_react6.useId();
|
|
2678
|
+
const mergedDisabled = disabled ?? config.components.Segmented?.disabled ?? config.disabled;
|
|
2679
|
+
const mergedSize = normalizeSize(size ?? config.components.Segmented?.size, config.size);
|
|
2680
|
+
const mergedVertical = orientation ? orientation === "vertical" : vertical;
|
|
2681
|
+
const sourceOptions = import_react6.useMemo(() => options ?? items?.map(({ id, ...item }) => ({ ...item, value: id })) ?? [], [items, options]);
|
|
2682
|
+
const semanticProps = {
|
|
2683
|
+
...props,
|
|
2684
|
+
disabled: mergedDisabled,
|
|
2685
|
+
options: sourceOptions,
|
|
2686
|
+
shape,
|
|
2687
|
+
size,
|
|
2688
|
+
vertical: mergedVertical
|
|
2689
|
+
};
|
|
2690
|
+
const mergedClassNames = resolveSemantic(classNames, semanticProps) ?? {};
|
|
2691
|
+
const mergedStyles = resolveSemantic(styles, semanticProps) ?? {};
|
|
2692
|
+
const rcOptions = import_react6.useMemo(() => sourceOptions.map((option) => {
|
|
2693
|
+
if (!isLabeledOption(option))
|
|
2694
|
+
return option;
|
|
2695
|
+
const { icon, label, tooltip: _tooltip, ...optionProps } = option;
|
|
2696
|
+
return {
|
|
2697
|
+
...optionProps,
|
|
2698
|
+
label: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(jsx_dev_runtime17.Fragment, {
|
|
2699
|
+
children: [
|
|
2700
|
+
icon ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
|
|
2701
|
+
className: cn("hj-segmented-item-icon", mergedClassNames.icon),
|
|
2702
|
+
style: mergedStyles.icon,
|
|
2703
|
+
children: icon
|
|
2704
|
+
}, undefined, false, undefined, this) : null,
|
|
2705
|
+
label != null ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
|
|
2706
|
+
children: label
|
|
2707
|
+
}, undefined, false, undefined, this) : null
|
|
2708
|
+
]
|
|
2709
|
+
}, undefined, true, undefined, this)
|
|
2710
|
+
};
|
|
2711
|
+
}), [mergedClassNames.icon, mergedStyles.icon, sourceOptions]);
|
|
2712
|
+
return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(import_segmented.default, {
|
|
2713
|
+
...restProps,
|
|
2714
|
+
ref,
|
|
2715
|
+
className: cn("hj-segmented-root", `hj-segmented-${mergedSize}`, block && "hj-segmented-block", shape === "round" && "hj-segmented-shape-round", rootClassName, mergedClassNames.root, className),
|
|
2716
|
+
classNames: { item: mergedClassNames.item, label: mergedClassNames.label },
|
|
2717
|
+
disabled: mergedDisabled,
|
|
2718
|
+
itemRender: (node, { item }) => {
|
|
2719
|
+
const sourceOption = sourceOptions.find((option) => isLabeledOption(option) && option.value === item.value);
|
|
2720
|
+
const tooltip = sourceOption && isLabeledOption(sourceOption) ? sourceOption.tooltip : undefined;
|
|
2721
|
+
if (!tooltip)
|
|
2722
|
+
return node;
|
|
2723
|
+
return typeof tooltip === "string" ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Tooltip, {
|
|
2724
|
+
title: tooltip,
|
|
2725
|
+
children: node
|
|
2726
|
+
}, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(Tooltip, {
|
|
2727
|
+
...tooltip,
|
|
2728
|
+
children: node
|
|
2729
|
+
}, undefined, false, undefined, this);
|
|
2730
|
+
},
|
|
2731
|
+
motionName: "thumb-motion",
|
|
2732
|
+
name: name ?? generatedName,
|
|
2733
|
+
options: rcOptions,
|
|
2734
|
+
prefixCls: "hj-segmented",
|
|
2735
|
+
style: { ...style, ...mergedStyles.root },
|
|
2736
|
+
styles: { item: mergedStyles.item, label: mergedStyles.label },
|
|
2737
|
+
vertical: mergedVertical
|
|
2738
|
+
}, undefined, false, undefined, this);
|
|
2739
|
+
});
|
|
2740
|
+
var Segmented = InternalSegmented;
|
|
2741
|
+
Segmented.displayName = "Segmented";
|
|
2742
|
+
|
|
2743
|
+
// src/components/SegmentedTabs.tsx
|
|
2744
|
+
var jsx_dev_runtime18 = require("react/jsx-dev-runtime");
|
|
2745
|
+
var legacyTypeAppearance = {
|
|
2746
|
+
boxed: "boxed",
|
|
2747
|
+
"glow-pill": "glow-pill",
|
|
2748
|
+
line: "plain",
|
|
2749
|
+
segmented: "segmented"
|
|
2750
|
+
};
|
|
2751
|
+
var appearanceClass = {
|
|
2752
|
+
boxed: "boxed",
|
|
2753
|
+
"glow-pill": "glow-pill",
|
|
2754
|
+
plain: "line",
|
|
2755
|
+
segmented: "segmented"
|
|
2756
|
+
};
|
|
2757
|
+
function SegmentedTabs(props) {
|
|
2758
|
+
const {
|
|
2759
|
+
animated,
|
|
2760
|
+
appearance,
|
|
2761
|
+
block,
|
|
2762
|
+
disabled,
|
|
2763
|
+
fullWidth,
|
|
2764
|
+
indicator,
|
|
2765
|
+
items,
|
|
2766
|
+
size,
|
|
2767
|
+
type,
|
|
2768
|
+
...segmentedProps
|
|
2769
|
+
} = props;
|
|
2770
|
+
const config = useConfig();
|
|
2771
|
+
const mergedSize = size ?? config.components.SegmentedTabs?.size ?? "sm";
|
|
2772
|
+
const mergedDisabled = disabled ?? config.components.SegmentedTabs?.disabled ?? config.disabled;
|
|
2773
|
+
const mergedAppearance = appearance ?? (type ? legacyTypeAppearance[type] : "boxed");
|
|
2774
|
+
const visualClass = appearanceClass[mergedAppearance];
|
|
2775
|
+
const hideLegacyThumb = mergedAppearance === "plain" && indicator === "none";
|
|
2776
|
+
return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(Segmented, {
|
|
2777
|
+
...segmentedProps,
|
|
2778
|
+
block: block ?? fullWidth,
|
|
2779
|
+
className: cn("hj-segmented-tabs", `hj-segmented-tabs-${visualClass}`, animated === false && "hj-segmented-tabs-no-motion", hideLegacyThumb && "hj-segmented-tabs-no-indicator", segmentedProps.className),
|
|
2780
|
+
disabled: mergedDisabled,
|
|
2781
|
+
options: items.map(({ id, ...item }) => ({ ...item, value: id })),
|
|
2782
|
+
shape: mergedAppearance === "segmented" ? "round" : "default",
|
|
2783
|
+
size: mergedSize
|
|
2784
|
+
}, undefined, false, undefined, this);
|
|
2785
|
+
}
|
|
2786
|
+
// src/components/SelectInput.tsx
|
|
2787
|
+
var exports_SelectInput = {};
|
|
2788
|
+
__export(exports_SelectInput, {
|
|
2789
|
+
SelectInput: () => SelectInput
|
|
2790
|
+
});
|
|
2791
|
+
var import_select = __toESM(require("@rc-component/select"));
|
|
2792
|
+
|
|
2793
|
+
// src/components/Input.tsx
|
|
2794
|
+
var import_input2 = __toESM(require("@rc-component/input"));
|
|
2795
|
+
var import_util3 = require("@rc-component/util");
|
|
2796
|
+
var import_react8 = require("react");
|
|
2797
|
+
|
|
2798
|
+
// src/components/form/statusContext.ts
|
|
2799
|
+
var import_react7 = require("react");
|
|
2800
|
+
var EMPTY_STATUS_NODES = [];
|
|
2801
|
+
var FormItemInputContext = import_react7.createContext({});
|
|
2802
|
+
FormItemInputContext.displayName = "FormItemInputContext";
|
|
2803
|
+
function getMergedFormItemStatus(contextStatus, customStatus) {
|
|
2804
|
+
const nativeCustomStatus = customStatus === "default" ? "" : customStatus;
|
|
2805
|
+
return nativeCustomStatus || contextStatus || "";
|
|
2806
|
+
}
|
|
2807
|
+
function useMergedFormItemStatus(customStatus) {
|
|
2808
|
+
const { status: contextStatus } = import_react7.useContext(FormItemInputContext);
|
|
2809
|
+
return getMergedFormItemStatus(contextStatus, customStatus);
|
|
2810
|
+
}
|
|
2811
|
+
function useFormItemStatus() {
|
|
2812
|
+
const {
|
|
2813
|
+
errors = EMPTY_STATUS_NODES,
|
|
2814
|
+
status,
|
|
2815
|
+
warnings = EMPTY_STATUS_NODES
|
|
2816
|
+
} = import_react7.useContext(FormItemInputContext);
|
|
2817
|
+
return { errors, status, warnings };
|
|
2818
|
+
}
|
|
2819
|
+
|
|
2820
|
+
// src/components/Input.tsx
|
|
2821
|
+
var jsx_dev_runtime19 = require("react/jsx-dev-runtime");
|
|
2822
|
+
var statusClass2 = {
|
|
2823
|
+
"": "border-[var(--hj-input-border)] focus-within:border-[var(--hj-input-border-active)] focus:border-[var(--hj-input-border-active)]",
|
|
2824
|
+
error: "border-[var(--hj-color-danger)] focus-within:border-[var(--hj-color-danger)] focus:border-[var(--hj-color-danger)]",
|
|
2825
|
+
warning: "border-[var(--hj-color-warning)] focus-within:border-[var(--hj-color-warning)] focus:border-[var(--hj-color-warning)]",
|
|
2826
|
+
success: "border-[var(--hj-color-success)] focus-within:border-[var(--hj-color-success)] focus:border-[var(--hj-color-success)]",
|
|
2827
|
+
validating: "border-[var(--hj-input-border)] focus-within:border-[var(--hj-input-border-active)] focus:border-[var(--hj-input-border-active)]"
|
|
2828
|
+
};
|
|
2829
|
+
var sizeClass3 = {
|
|
2830
|
+
sm: "h-[var(--hj-input-height-sm)] px-[var(--hj-input-padding-x)] text-[length:var(--hj-input-font-size)] leading-[var(--hj-input-line-height)]",
|
|
2831
|
+
md: "h-[var(--hj-input-height-md)] px-[var(--hj-input-padding-x)] text-[length:var(--hj-input-font-size)] leading-[var(--hj-input-line-height)]",
|
|
2832
|
+
lg: "h-[var(--hj-input-height-lg)] px-[var(--hj-input-padding-x)] text-[length:var(--hj-input-font-size)] leading-[var(--hj-input-line-height)]"
|
|
2833
|
+
};
|
|
2834
|
+
var nativeSizeClass = {
|
|
2835
|
+
sm: "hj-input-small",
|
|
2836
|
+
md: "hj-input-medium",
|
|
2837
|
+
lg: "hj-input-large"
|
|
2838
|
+
};
|
|
2839
|
+
var textAreaSizeClass = {
|
|
2840
|
+
sm: "min-h-[var(--hj-input-height-sm)] px-[var(--hj-input-padding-x)] py-1.5",
|
|
2841
|
+
md: "min-h-[calc(var(--hj-input-height-md)*2)] px-[var(--hj-input-padding-x)] py-2",
|
|
2842
|
+
lg: "min-h-[calc(var(--hj-input-height-lg)*2)] px-[var(--hj-input-padding-x)] py-2.5"
|
|
2843
|
+
};
|
|
2844
|
+
var otpCellSizeClass = {
|
|
2845
|
+
sm: "w-[var(--hj-input-height-sm)] px-0 text-center",
|
|
2846
|
+
md: "w-[var(--hj-input-height-md)] px-0 text-center",
|
|
2847
|
+
lg: "w-[var(--hj-input-height-lg)] px-0 text-center"
|
|
2848
|
+
};
|
|
2849
|
+
function normalizeInputSize(size, fallback = "md") {
|
|
2850
|
+
if (size === "small" || size === "sm")
|
|
2851
|
+
return "sm";
|
|
2852
|
+
if (size === "large" || size === "lg")
|
|
2853
|
+
return "lg";
|
|
2854
|
+
if (size === "medium" || size === "middle" || size === "md")
|
|
2855
|
+
return "md";
|
|
2856
|
+
return fallback;
|
|
2857
|
+
}
|
|
2858
|
+
var variantClassName = {
|
|
2859
|
+
active: "border-[var(--hj-input-border-active)] bg-[var(--hj-input-bg-active)]",
|
|
2860
|
+
borderless: "border-transparent bg-transparent",
|
|
2861
|
+
default: "",
|
|
2862
|
+
filled: "border-transparent bg-[var(--hj-input-bg-active)]",
|
|
2863
|
+
outlined: "",
|
|
2864
|
+
underlined: "rounded-none border-x-0 border-t-0 bg-transparent px-0"
|
|
2865
|
+
};
|
|
2866
|
+
var inputBaseClass = "min-w-0 rounded-[var(--hj-input-radius)] border bg-[var(--hj-input-bg)] text-[var(--hj-input-fg)] outline-none transition placeholder:text-[var(--hj-input-placeholder)] hover:bg-[var(--hj-input-bg-active)] disabled:cursor-not-allowed disabled:opacity-50";
|
|
2867
|
+
var affixInputClass = "h-full min-w-0 flex-1 border-0 bg-transparent p-0 font-[inherit] text-[var(--hj-input-fg)] outline-none placeholder:text-[var(--hj-input-placeholder)] disabled:cursor-not-allowed";
|
|
2868
|
+
var affixWrapperClass = "flex min-w-0 items-center gap-[var(--hj-input-gap)] rounded-[var(--hj-input-radius)] border bg-[var(--hj-input-bg)] transition hover:bg-[var(--hj-input-bg-active)]";
|
|
2869
|
+
var textAreaBaseClass = "w-full resize-y rounded-[var(--hj-input-radius)] border bg-[var(--hj-input-bg)] text-[var(--hj-input-fg)] outline-none transition placeholder:text-[var(--hj-input-placeholder)] hover:bg-[var(--hj-input-bg-active)] disabled:cursor-not-allowed disabled:opacity-50";
|
|
2870
|
+
var InputGroupSizeContext = import_react8.createContext(undefined);
|
|
2871
|
+
function getMergedVariant(variant, bordered) {
|
|
2872
|
+
if (variant)
|
|
2873
|
+
return variant;
|
|
2874
|
+
return bordered === false ? "borderless" : "outlined";
|
|
2875
|
+
}
|
|
2876
|
+
function renderClearIcon() {
|
|
2877
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(jsx_dev_runtime19.Fragment, {
|
|
2878
|
+
children: [
|
|
2879
|
+
/* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Icon, {
|
|
2880
|
+
name: "close",
|
|
2881
|
+
size: 14
|
|
2882
|
+
}, undefined, false, undefined, this),
|
|
2883
|
+
/* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
2884
|
+
className: "sr-only",
|
|
2885
|
+
children: "清空"
|
|
2886
|
+
}, undefined, false, undefined, this)
|
|
2887
|
+
]
|
|
2888
|
+
}, undefined, true, undefined, this);
|
|
2889
|
+
}
|
|
2890
|
+
function mergeAllowClear(allowClear) {
|
|
2891
|
+
if (!allowClear)
|
|
2892
|
+
return allowClear;
|
|
2893
|
+
if (typeof allowClear === "object") {
|
|
2894
|
+
return {
|
|
2895
|
+
...allowClear,
|
|
2896
|
+
clearIcon: allowClear.clearIcon || renderClearIcon()
|
|
2897
|
+
};
|
|
2898
|
+
}
|
|
2899
|
+
return { clearIcon: renderClearIcon() };
|
|
2900
|
+
}
|
|
2901
|
+
function InputInner(props, ref) {
|
|
2902
|
+
const {
|
|
2903
|
+
addonAfter,
|
|
2904
|
+
addonBefore,
|
|
2905
|
+
allowClear,
|
|
2906
|
+
bordered,
|
|
2907
|
+
className,
|
|
2908
|
+
classNames,
|
|
2909
|
+
count,
|
|
2910
|
+
disabled,
|
|
2911
|
+
rootClassName,
|
|
2912
|
+
showCount,
|
|
2913
|
+
size,
|
|
2914
|
+
status,
|
|
2915
|
+
style,
|
|
2916
|
+
styles,
|
|
2917
|
+
variant,
|
|
2918
|
+
...restProps
|
|
2919
|
+
} = props;
|
|
2920
|
+
const config = useConfig();
|
|
2921
|
+
const groupSize = import_react8.useContext(InputGroupSizeContext);
|
|
2922
|
+
const mergedStatus = useMergedFormItemStatus(status);
|
|
2923
|
+
const mergedSize = normalizeInputSize(size ?? groupSize ?? config.components.Input?.size, config.size);
|
|
2924
|
+
const mergedDisabled = disabled ?? config.components.Input?.disabled ?? config.disabled;
|
|
2925
|
+
const mergedVariant = getMergedVariant(variant, bordered);
|
|
2926
|
+
const mergedAllowClear = mergeAllowClear(allowClear);
|
|
2927
|
+
const hasAffix = Boolean(restProps.prefix || restProps.suffix || mergedAllowClear || showCount || count?.show);
|
|
2928
|
+
const hasAddon = addonBefore != null || addonAfter != null;
|
|
2929
|
+
const variantClass = cn(mergedStatus && `hj-input-status-${mergedStatus}`, `hj-input-variant-${mergedVariant}`, mergedVariant === "outlined" && "hj-input-variant-default", statusClass2[mergedStatus], variantClassName[mergedVariant]);
|
|
2930
|
+
const addonBeforeNode = addonBefore == null ? null : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
2931
|
+
className: slotClass(classNames, "addonBefore", "hj-input-addon-before", "flex shrink-0 items-center border border-r-0 border-[var(--hj-input-border)] bg-[var(--hj-input-addon-bg)] text-[var(--hj-input-addon-fg)]", sizeClass3[mergedSize]),
|
|
2932
|
+
style: slotStyle(styles, "addonBefore"),
|
|
2933
|
+
children: addonBefore
|
|
2934
|
+
}, undefined, false, undefined, this);
|
|
2935
|
+
const addonAfterNode = addonAfter == null ? null : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
2936
|
+
className: slotClass(classNames, "addonAfter", "hj-input-addon-after", "flex shrink-0 items-center border border-l-0 border-[var(--hj-input-border)] bg-[var(--hj-input-addon-bg)] text-[var(--hj-input-addon-fg)]", sizeClass3[mergedSize]),
|
|
2937
|
+
style: slotStyle(styles, "addonAfter"),
|
|
2938
|
+
children: addonAfter
|
|
2939
|
+
}, undefined, false, undefined, this);
|
|
2940
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_input2.default, {
|
|
2941
|
+
...restProps,
|
|
2942
|
+
addonAfter: addonAfterNode,
|
|
2943
|
+
addonBefore: addonBeforeNode,
|
|
2944
|
+
allowClear: mergedAllowClear,
|
|
2945
|
+
className: slotClass(classNames, "root", "hj-input-root", `hj-input-${mergedSize}`, nativeSizeClass[mergedSize], mergedStatus && `hj-input-status-${mergedStatus}`, `hj-input-variant-${mergedVariant}`, mergedVariant === "outlined" && "hj-input-variant-default", rootClassName, className),
|
|
2946
|
+
classNames: {
|
|
2947
|
+
affixWrapper: cn(affixWrapperClass, sizeClass3[mergedSize], `hj-input-affix-wrapper-${mergedSize}`),
|
|
2948
|
+
clear: slotClass(classNames, "clear", "shrink-0 text-[var(--hj-input-clear)] transition hover:text-white [&.hj-input-clear-icon-hidden]:invisible"),
|
|
2949
|
+
count: slotClass(classNames, "count", "shrink-0 text-[var(--hj-input-clear)]"),
|
|
2950
|
+
groupWrapper: slotClass(classNames, "group", "inline-flex min-w-0 overflow-hidden rounded-[var(--hj-input-radius)]", `hj-input-group-wrapper-${mergedSize}`, mergedStatus && `hj-input-group-wrapper-status-${mergedStatus}`, `hj-input-group-wrapper-variant-${mergedVariant}`),
|
|
2951
|
+
input: slotClass(classNames, "input", hasAffix ? affixInputClass : inputBaseClass, !hasAffix && sizeClass3[mergedSize], `hj-input-${mergedSize}`, nativeSizeClass[mergedSize], hasAddon && !hasAffix && "min-w-0 flex-1 rounded-none"),
|
|
2952
|
+
prefix: slotClass(classNames, "prefix", "shrink-0 text-[var(--hj-input-icon)]"),
|
|
2953
|
+
suffix: slotClass(classNames, "suffix", "shrink-0 text-[var(--hj-input-icon)]"),
|
|
2954
|
+
variant: variantClass,
|
|
2955
|
+
wrapper: slotClass(classNames, "wrapper", "inline-flex min-w-0 flex-1")
|
|
2956
|
+
},
|
|
2957
|
+
count,
|
|
2958
|
+
disabled: mergedDisabled,
|
|
2959
|
+
prefixCls: "hj-input",
|
|
2960
|
+
ref,
|
|
2961
|
+
showCount,
|
|
2962
|
+
style: {
|
|
2963
|
+
...style,
|
|
2964
|
+
...styles?.root,
|
|
2965
|
+
...hasAddon ? styles?.group : undefined
|
|
2966
|
+
},
|
|
2967
|
+
styles: {
|
|
2968
|
+
affixWrapper: slotStyle(styles, "root"),
|
|
2969
|
+
clear: slotStyle(styles, "clear"),
|
|
2970
|
+
count: slotStyle(styles, "count"),
|
|
2971
|
+
input: slotStyle(styles, "input"),
|
|
2972
|
+
prefix: slotStyle(styles, "prefix"),
|
|
2973
|
+
suffix: slotStyle(styles, "suffix")
|
|
2974
|
+
}
|
|
2975
|
+
}, undefined, false, undefined, this);
|
|
2976
|
+
}
|
|
2977
|
+
var InternalInput = import_react8.forwardRef(InputInner);
|
|
2978
|
+
InternalInput.displayName = "Input";
|
|
2979
|
+
var InputGroup = import_react8.forwardRef(function InputGroup2({ children, className, compact = false, rootClassName, size, ...props }, ref) {
|
|
2980
|
+
const config = useConfig();
|
|
2981
|
+
const mergedSize = normalizeInputSize(size, config.size);
|
|
2982
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(InputGroupSizeContext.Provider, {
|
|
2983
|
+
value: size,
|
|
2984
|
+
children: /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
2985
|
+
...props,
|
|
2986
|
+
className: cn("hj-input-group", `hj-input-group-${mergedSize}`, nativeSizeClass[mergedSize], "inline-flex min-w-0 items-stretch", compact && "hj-input-group-compact gap-0", rootClassName, className),
|
|
2987
|
+
ref,
|
|
2988
|
+
children
|
|
2989
|
+
}, undefined, false, undefined, this)
|
|
2990
|
+
}, undefined, false, undefined, this);
|
|
2991
|
+
});
|
|
2992
|
+
var InputSearch = import_react8.forwardRef(function InputSearch2(props, ref) {
|
|
2993
|
+
const {
|
|
2994
|
+
addonAfter,
|
|
2995
|
+
className,
|
|
2996
|
+
classNames,
|
|
2997
|
+
disabled,
|
|
2998
|
+
enterButton = false,
|
|
2999
|
+
loading = false,
|
|
3000
|
+
onChange,
|
|
3001
|
+
onCompositionEnd,
|
|
3002
|
+
onCompositionStart,
|
|
3003
|
+
onPressEnter,
|
|
3004
|
+
onSearch,
|
|
3005
|
+
searchIcon,
|
|
3006
|
+
styles,
|
|
3007
|
+
...inputProps
|
|
3008
|
+
} = props;
|
|
3009
|
+
const config = useConfig();
|
|
3010
|
+
const inputRef = import_react8.useRef(null);
|
|
3011
|
+
const composingRef = import_react8.useRef(false);
|
|
3012
|
+
const mergedDisabled = disabled ?? config.components.Input?.disabled ?? config.disabled;
|
|
3013
|
+
const triggerSearch = (event) => {
|
|
3014
|
+
if (mergedDisabled || loading)
|
|
3015
|
+
return;
|
|
3016
|
+
onSearch?.(inputRef.current?.input?.value ?? "", event, { source: "input" });
|
|
3017
|
+
};
|
|
3018
|
+
const handleMouseDown = (event) => {
|
|
3019
|
+
if (document.activeElement === inputRef.current?.input)
|
|
3020
|
+
event.preventDefault();
|
|
3021
|
+
};
|
|
3022
|
+
const defaultButtonContent = loading ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Icon, {
|
|
3023
|
+
className: "animate-spin",
|
|
3024
|
+
name: "refresh",
|
|
3025
|
+
size: 16
|
|
3026
|
+
}, undefined, false, undefined, this) : searchIcon ?? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Icon, {
|
|
3027
|
+
name: "search",
|
|
3028
|
+
size: 16
|
|
3029
|
+
}, undefined, false, undefined, this);
|
|
3030
|
+
const buttonClassName = slotClass(classNames, "button", "hj-input-search-button", "inline-flex h-full min-w-8 items-center justify-center gap-1 border-0 bg-transparent px-2 text-[var(--hj-button-default-fg)] transition hover:bg-[var(--hj-button-default-bg-hover)] disabled:cursor-not-allowed disabled:opacity-50", enterButton !== false && "bg-[var(--hj-color-brand)] text-[var(--hj-button-primary-fg)]");
|
|
3031
|
+
let searchButton;
|
|
3032
|
+
if (import_react8.isValidElement(enterButton) && enterButton.type !== import_react8.Fragment) {
|
|
3033
|
+
searchButton = import_react8.cloneElement(enterButton, {
|
|
3034
|
+
"aria-busy": loading || undefined,
|
|
3035
|
+
className: cn(buttonClassName, enterButton.props.className),
|
|
3036
|
+
disabled: mergedDisabled || loading || enterButton.props.disabled,
|
|
3037
|
+
onClick: (event) => {
|
|
3038
|
+
enterButton.props.onClick?.(event);
|
|
3039
|
+
if (!event.defaultPrevented)
|
|
3040
|
+
triggerSearch(event);
|
|
3041
|
+
},
|
|
3042
|
+
onMouseDown: (event) => {
|
|
3043
|
+
enterButton.props.onMouseDown?.(event);
|
|
3044
|
+
if (!event.defaultPrevented)
|
|
3045
|
+
handleMouseDown(event);
|
|
3046
|
+
},
|
|
3047
|
+
style: { ...slotStyle(styles, "button"), ...enterButton.props.style }
|
|
3048
|
+
});
|
|
3049
|
+
} else {
|
|
3050
|
+
searchButton = /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("button", {
|
|
3051
|
+
"aria-busy": loading || undefined,
|
|
3052
|
+
"aria-label": typeof enterButton === "string" ? undefined : "搜索",
|
|
3053
|
+
className: buttonClassName,
|
|
3054
|
+
disabled: mergedDisabled || loading,
|
|
3055
|
+
onClick: triggerSearch,
|
|
3056
|
+
onMouseDown: handleMouseDown,
|
|
3057
|
+
style: slotStyle(styles, "button"),
|
|
3058
|
+
type: "button",
|
|
3059
|
+
children: typeof enterButton === "boolean" || enterButton == null ? defaultButtonContent : enterButton
|
|
3060
|
+
}, undefined, false, undefined, this);
|
|
3061
|
+
}
|
|
3062
|
+
const mergedAddonAfter = /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
3063
|
+
className: "inline-flex h-full items-stretch",
|
|
3064
|
+
children: [
|
|
3065
|
+
searchButton,
|
|
3066
|
+
addonAfter == null ? null : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
3067
|
+
className: "inline-flex items-center",
|
|
3068
|
+
children: addonAfter
|
|
3069
|
+
}, undefined, false, undefined, this)
|
|
3070
|
+
]
|
|
3071
|
+
}, undefined, true, undefined, this);
|
|
3072
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(InternalInput, {
|
|
3073
|
+
...inputProps,
|
|
3074
|
+
addonAfter: mergedAddonAfter,
|
|
3075
|
+
className: cn("hj-input-search", enterButton !== false && "hj-input-search-with-button", className),
|
|
3076
|
+
classNames,
|
|
3077
|
+
disabled: mergedDisabled,
|
|
3078
|
+
onChange: (event) => {
|
|
3079
|
+
if (event.type === "click") {
|
|
3080
|
+
onSearch?.(event.currentTarget.value, event, { source: "clear" });
|
|
3081
|
+
}
|
|
3082
|
+
onChange?.(event);
|
|
3083
|
+
},
|
|
3084
|
+
onCompositionEnd: (event) => {
|
|
3085
|
+
composingRef.current = false;
|
|
3086
|
+
onCompositionEnd?.(event);
|
|
3087
|
+
},
|
|
3088
|
+
onCompositionStart: (event) => {
|
|
3089
|
+
composingRef.current = true;
|
|
3090
|
+
onCompositionStart?.(event);
|
|
3091
|
+
},
|
|
3092
|
+
onPressEnter: (event) => {
|
|
3093
|
+
if (composingRef.current || loading)
|
|
3094
|
+
return;
|
|
3095
|
+
onPressEnter?.(event);
|
|
3096
|
+
triggerSearch(event);
|
|
3097
|
+
},
|
|
3098
|
+
ref: import_util3.composeRef(inputRef, ref),
|
|
3099
|
+
styles,
|
|
3100
|
+
type: "search"
|
|
3101
|
+
}, undefined, false, undefined, this);
|
|
3102
|
+
});
|
|
3103
|
+
function defaultPasswordIcon(visible) {
|
|
3104
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
3105
|
+
className: "relative inline-flex",
|
|
3106
|
+
children: [
|
|
3107
|
+
/* @__PURE__ */ jsx_dev_runtime19.jsxDEV(Icon, {
|
|
3108
|
+
name: "eye",
|
|
3109
|
+
size: 16
|
|
3110
|
+
}, undefined, false, undefined, this),
|
|
3111
|
+
visible ? null : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
3112
|
+
"aria-hidden": "true",
|
|
3113
|
+
className: "absolute left-0 top-1/2 h-px w-full -rotate-45 bg-current"
|
|
3114
|
+
}, undefined, false, undefined, this)
|
|
3115
|
+
]
|
|
3116
|
+
}, undefined, true, undefined, this);
|
|
3117
|
+
}
|
|
3118
|
+
var InputPassword = import_react8.forwardRef(function InputPassword2(props, ref) {
|
|
3119
|
+
const {
|
|
3120
|
+
action = "click",
|
|
3121
|
+
className,
|
|
3122
|
+
disabled,
|
|
3123
|
+
iconRender = defaultPasswordIcon,
|
|
3124
|
+
suffix,
|
|
3125
|
+
type: _type,
|
|
3126
|
+
visibilityToggle = true,
|
|
3127
|
+
...inputProps
|
|
3128
|
+
} = props;
|
|
3129
|
+
const config = useConfig();
|
|
3130
|
+
const mergedDisabled = disabled ?? config.components.Input?.disabled ?? config.disabled;
|
|
3131
|
+
const visibilityOptions = typeof visibilityToggle === "object" ? visibilityToggle : undefined;
|
|
3132
|
+
const [visible, setVisible] = import_util3.useControlledState(false, visibilityOptions?.visible);
|
|
3133
|
+
const changeVisibility = (nextVisible) => {
|
|
3134
|
+
if (mergedDisabled || visibilityToggle === false)
|
|
3135
|
+
return;
|
|
3136
|
+
setVisible(nextVisible);
|
|
3137
|
+
visibilityOptions?.onVisibleChange?.(nextVisible);
|
|
3138
|
+
};
|
|
3139
|
+
const toggleVisibility = () => changeVisibility(!visible);
|
|
3140
|
+
const visibilityIcon = visibilityToggle === false ? null : /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("button", {
|
|
3141
|
+
"aria-label": visible ? "隐藏密码" : "显示密码",
|
|
3142
|
+
"aria-pressed": visible,
|
|
3143
|
+
className: "hj-input-password-icon inline-flex shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[var(--hj-input-icon)]",
|
|
3144
|
+
disabled: mergedDisabled,
|
|
3145
|
+
onBlur: action === "hover" ? () => changeVisibility(false) : undefined,
|
|
3146
|
+
onClick: action === "click" ? toggleVisibility : undefined,
|
|
3147
|
+
onFocus: action === "hover" ? () => changeVisibility(true) : undefined,
|
|
3148
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
3149
|
+
onMouseEnter: action === "hover" ? () => changeVisibility(true) : undefined,
|
|
3150
|
+
onMouseLeave: action === "hover" ? () => changeVisibility(false) : undefined,
|
|
3151
|
+
tabIndex: mergedDisabled ? -1 : visibilityOptions?.tabIndex ?? 0,
|
|
3152
|
+
type: "button",
|
|
3153
|
+
children: iconRender(visible)
|
|
3154
|
+
}, undefined, false, undefined, this);
|
|
3155
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(InternalInput, {
|
|
3156
|
+
...inputProps,
|
|
3157
|
+
className: cn("hj-input-password", className),
|
|
3158
|
+
disabled: mergedDisabled,
|
|
3159
|
+
ref,
|
|
3160
|
+
suffix: visibilityIcon || suffix ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
3161
|
+
className: "inline-flex items-center gap-[var(--hj-input-gap)]",
|
|
3162
|
+
children: [
|
|
3163
|
+
visibilityIcon,
|
|
3164
|
+
suffix
|
|
3165
|
+
]
|
|
3166
|
+
}, undefined, true, undefined, this) : undefined,
|
|
3167
|
+
type: visible ? "text" : "password"
|
|
3168
|
+
}, undefined, false, undefined, this);
|
|
3169
|
+
});
|
|
3170
|
+
var InputTextArea = import_react8.forwardRef(function InputTextArea2(props, ref) {
|
|
3171
|
+
const {
|
|
3172
|
+
allowClear,
|
|
3173
|
+
bordered,
|
|
3174
|
+
className,
|
|
3175
|
+
classNames,
|
|
3176
|
+
count,
|
|
3177
|
+
disabled,
|
|
3178
|
+
rootClassName,
|
|
3179
|
+
showCount,
|
|
3180
|
+
size,
|
|
3181
|
+
status,
|
|
3182
|
+
style,
|
|
3183
|
+
styles,
|
|
3184
|
+
variant,
|
|
3185
|
+
...textAreaProps
|
|
3186
|
+
} = props;
|
|
3187
|
+
const config = useConfig();
|
|
3188
|
+
const groupSize = import_react8.useContext(InputGroupSizeContext);
|
|
3189
|
+
const mergedStatus = useMergedFormItemStatus(status);
|
|
3190
|
+
const mergedSize = normalizeInputSize(size ?? groupSize ?? config.components.Input?.size, config.size);
|
|
3191
|
+
const mergedDisabled = disabled ?? config.components.Input?.disabled ?? config.disabled;
|
|
3192
|
+
const mergedVariant = getMergedVariant(variant, bordered);
|
|
3193
|
+
const mergedAllowClear = mergeAllowClear(allowClear);
|
|
3194
|
+
const hasAffix = Boolean(mergedAllowClear || showCount || count?.show);
|
|
3195
|
+
const innerRef = import_react8.useRef(null);
|
|
3196
|
+
import_react8.useImperativeHandle(ref, () => ({
|
|
3197
|
+
blur: () => innerRef.current?.blur(),
|
|
3198
|
+
focus: (options) => {
|
|
3199
|
+
import_util3.triggerFocus(innerRef.current?.resizableTextArea?.textArea, options);
|
|
3200
|
+
},
|
|
3201
|
+
nativeElement: innerRef.current?.nativeElement ?? null,
|
|
3202
|
+
resizableTextArea: innerRef.current?.resizableTextArea
|
|
3203
|
+
}));
|
|
3204
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_input2.TextArea, {
|
|
3205
|
+
...textAreaProps,
|
|
3206
|
+
allowClear: mergedAllowClear,
|
|
3207
|
+
className: slotClass(classNames, "root", "hj-input-textarea-root", `hj-input-${mergedSize}`, nativeSizeClass[mergedSize], mergedStatus && `hj-input-status-${mergedStatus}`, `hj-input-variant-${mergedVariant}`, mergedVariant === "outlined" && "hj-input-variant-default", rootClassName, className),
|
|
3208
|
+
classNames: {
|
|
3209
|
+
affixWrapper: cn(affixWrapperClass, "items-start", `hj-input-affix-wrapper-${mergedSize}`),
|
|
3210
|
+
clear: slotClass(classNames, "clear", "shrink-0 text-[var(--hj-input-clear)] transition hover:text-white [&.hj-input-clear-icon-hidden]:invisible"),
|
|
3211
|
+
count: slotClass(classNames, "count", "shrink-0 text-[var(--hj-input-clear)]"),
|
|
3212
|
+
textarea: slotClass(classNames, "textarea", hasAffix ? "w-full flex-1 resize-y border-0 bg-transparent text-[var(--hj-input-fg)] outline-none placeholder:text-[var(--hj-input-placeholder)]" : textAreaBaseClass, textAreaSizeClass[mergedSize]),
|
|
3213
|
+
variant: cn(mergedStatus && `hj-input-status-${mergedStatus}`, `hj-input-variant-${mergedVariant}`, statusClass2[mergedStatus], variantClassName[mergedVariant])
|
|
3214
|
+
},
|
|
3215
|
+
count,
|
|
3216
|
+
disabled: mergedDisabled,
|
|
3217
|
+
prefixCls: "hj-input",
|
|
3218
|
+
ref: innerRef,
|
|
3219
|
+
showCount,
|
|
3220
|
+
style: slotStyle(styles, "root", style),
|
|
3221
|
+
styles: {
|
|
3222
|
+
affixWrapper: slotStyle(styles, "root"),
|
|
3223
|
+
clear: slotStyle(styles, "clear"),
|
|
3224
|
+
count: slotStyle(styles, "count"),
|
|
3225
|
+
textarea: slotStyle(styles, "textarea")
|
|
3226
|
+
}
|
|
3227
|
+
}, undefined, false, undefined, this);
|
|
3228
|
+
});
|
|
3229
|
+
function stringToCells(value) {
|
|
3230
|
+
return Array.from(value ?? "");
|
|
3231
|
+
}
|
|
3232
|
+
var InputOTP = import_react8.forwardRef(function InputOTP2(props, ref) {
|
|
3233
|
+
const {
|
|
3234
|
+
autoComplete,
|
|
3235
|
+
autoFocus,
|
|
3236
|
+
className,
|
|
3237
|
+
classNames,
|
|
3238
|
+
defaultValue,
|
|
3239
|
+
disabled,
|
|
3240
|
+
formatter,
|
|
3241
|
+
inputMode,
|
|
3242
|
+
length = 6,
|
|
3243
|
+
mask,
|
|
3244
|
+
onChange,
|
|
3245
|
+
onFocus,
|
|
3246
|
+
onInput,
|
|
3247
|
+
rootClassName,
|
|
3248
|
+
separator,
|
|
3249
|
+
size,
|
|
3250
|
+
status,
|
|
3251
|
+
style,
|
|
3252
|
+
styles,
|
|
3253
|
+
type,
|
|
3254
|
+
value,
|
|
3255
|
+
variant = "outlined",
|
|
3256
|
+
...rootProps
|
|
3257
|
+
} = props;
|
|
3258
|
+
const config = useConfig();
|
|
3259
|
+
const mergedStatus = useMergedFormItemStatus(status);
|
|
3260
|
+
const mergedLength = Math.max(1, Math.floor(length));
|
|
3261
|
+
const mergedSize = normalizeInputSize(size ?? config.components.Input?.size, config.size);
|
|
3262
|
+
const mergedDisabled = disabled ?? config.components.Input?.disabled ?? config.disabled;
|
|
3263
|
+
const formatValue = (text) => formatter ? formatter(text) : text;
|
|
3264
|
+
const [innerCells, setInnerCells] = import_react8.useState(() => stringToCells(formatValue(defaultValue ?? "")).slice(0, mergedLength));
|
|
3265
|
+
const controlled = value !== undefined;
|
|
3266
|
+
const valueCells = controlled ? stringToCells(formatValue(value ?? "")).slice(0, mergedLength) : innerCells.slice(0, mergedLength);
|
|
3267
|
+
const containerRef = import_react8.useRef(null);
|
|
3268
|
+
const inputRefs = import_react8.useRef({});
|
|
3269
|
+
const focusCell = (index) => {
|
|
3270
|
+
if (index >= 0 && index < mergedLength)
|
|
3271
|
+
inputRefs.current[index]?.focus();
|
|
3272
|
+
};
|
|
3273
|
+
import_react8.useImperativeHandle(ref, () => ({
|
|
3274
|
+
blur: () => {
|
|
3275
|
+
for (let index = 0;index < mergedLength; index += 1) {
|
|
3276
|
+
inputRefs.current[index]?.blur();
|
|
3277
|
+
}
|
|
3278
|
+
},
|
|
3279
|
+
focus: () => inputRefs.current[0]?.focus(),
|
|
3280
|
+
nativeElement: containerRef.current
|
|
3281
|
+
}), [mergedLength]);
|
|
3282
|
+
const patchValue = (index, text) => {
|
|
3283
|
+
let nextCells = [...valueCells];
|
|
3284
|
+
for (let fillIndex = 0;fillIndex < index; fillIndex += 1) {
|
|
3285
|
+
if (!nextCells[fillIndex])
|
|
3286
|
+
nextCells[fillIndex] = "";
|
|
3287
|
+
}
|
|
3288
|
+
if (text.length <= 1)
|
|
3289
|
+
nextCells[index] = text;
|
|
3290
|
+
else
|
|
3291
|
+
nextCells = nextCells.slice(0, index).concat(stringToCells(text));
|
|
3292
|
+
nextCells = nextCells.slice(0, mergedLength);
|
|
3293
|
+
while (nextCells.length && !nextCells.at(-1))
|
|
3294
|
+
nextCells.pop();
|
|
3295
|
+
const formatted = formatValue(nextCells.map((cell) => cell || " ").join(""));
|
|
3296
|
+
return stringToCells(formatted).slice(0, mergedLength).map((cell, cellIndex) => cell === " " && !nextCells[cellIndex] ? nextCells[cellIndex] : cell);
|
|
3297
|
+
};
|
|
3298
|
+
const commitCells = (nextCells) => {
|
|
3299
|
+
if (!controlled)
|
|
3300
|
+
setInnerCells(nextCells);
|
|
3301
|
+
onInput?.([...nextCells]);
|
|
3302
|
+
const nextValue = nextCells.join("");
|
|
3303
|
+
const currentValue = valueCells.join("");
|
|
3304
|
+
if (nextCells.length === mergedLength && nextCells.every(Boolean) && nextValue !== currentValue) {
|
|
3305
|
+
onChange?.(nextValue);
|
|
3306
|
+
}
|
|
3307
|
+
};
|
|
3308
|
+
const syncSelection = (index) => {
|
|
3309
|
+
import_util3.raf(() => {
|
|
3310
|
+
const input = inputRefs.current[index]?.input;
|
|
3311
|
+
if (input && document.activeElement === input)
|
|
3312
|
+
input.select();
|
|
3313
|
+
});
|
|
3314
|
+
};
|
|
3315
|
+
const handleInput = (index, event) => {
|
|
3316
|
+
const text = event.currentTarget.value;
|
|
3317
|
+
const nextCells = patchValue(index, text);
|
|
3318
|
+
const nextIndex = Math.min(index + stringToCells(text).length, mergedLength - 1);
|
|
3319
|
+
if (nextIndex !== index && nextCells[index] !== undefined)
|
|
3320
|
+
focusCell(nextIndex);
|
|
3321
|
+
commitCells(nextCells);
|
|
3322
|
+
};
|
|
3323
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
|
|
3324
|
+
...rootProps,
|
|
3325
|
+
"aria-disabled": mergedDisabled || undefined,
|
|
3326
|
+
className: slotClass(classNames, "root", "hj-input-otp hj-otp", `hj-input-otp-${mergedSize}`, nativeSizeClass[mergedSize], mergedStatus && `hj-input-status-${mergedStatus}`, `hj-input-variant-${variant}`, "inline-flex items-center gap-[var(--hj-input-gap)]", mergedDisabled && "hj-input-otp-disabled opacity-50", rootClassName, className),
|
|
3327
|
+
ref: containerRef,
|
|
3328
|
+
role: rootProps.role ?? "group",
|
|
3329
|
+
style: slotStyle(styles, "root", style),
|
|
3330
|
+
children: Array.from({ length: mergedLength }, (_, index) => {
|
|
3331
|
+
const singleValue = valueCells[index] ?? "";
|
|
3332
|
+
const customMask = typeof mask === "string" && singleValue !== "";
|
|
3333
|
+
const separatorNode = typeof separator === "function" ? separator(index) : separator;
|
|
3334
|
+
return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(import_react8.Fragment, {
|
|
3335
|
+
children: [
|
|
3336
|
+
/* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
3337
|
+
className: "hj-input-otp-cell relative inline-flex shrink-0",
|
|
3338
|
+
children: [
|
|
3339
|
+
/* @__PURE__ */ jsx_dev_runtime19.jsxDEV(InternalInput, {
|
|
3340
|
+
"aria-label": `OTP Input ${index + 1}`,
|
|
3341
|
+
autoComplete,
|
|
3342
|
+
autoFocus: index === 0 && autoFocus,
|
|
3343
|
+
className: slotClass(classNames, "input", "hj-input-otp-input", otpCellSizeClass[mergedSize], customMask && "text-transparent caret-[var(--hj-input-fg)]"),
|
|
3344
|
+
disabled: mergedDisabled,
|
|
3345
|
+
htmlSize: 1,
|
|
3346
|
+
inputMode,
|
|
3347
|
+
onFocus: (event) => {
|
|
3348
|
+
for (let previous = 0;previous < index; previous += 1) {
|
|
3349
|
+
if (!inputRefs.current[previous]?.input?.value) {
|
|
3350
|
+
focusCell(previous);
|
|
3351
|
+
break;
|
|
3352
|
+
}
|
|
3353
|
+
}
|
|
3354
|
+
onFocus?.(event);
|
|
3355
|
+
syncSelection(index);
|
|
3356
|
+
},
|
|
3357
|
+
onInput: (event) => handleInput(index, event),
|
|
3358
|
+
onKeyDown: (event) => {
|
|
3359
|
+
if (event.key === "ArrowLeft")
|
|
3360
|
+
focusCell(index - 1);
|
|
3361
|
+
else if (event.key === "ArrowRight" && singleValue)
|
|
3362
|
+
focusCell(index + 1);
|
|
3363
|
+
else if (event.key === "Backspace" && !singleValue)
|
|
3364
|
+
focusCell(index - 1);
|
|
3365
|
+
else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
|
|
3366
|
+
event.preventDefault();
|
|
3367
|
+
}
|
|
3368
|
+
syncSelection(index);
|
|
3369
|
+
},
|
|
3370
|
+
onMouseDown: () => syncSelection(index),
|
|
3371
|
+
onMouseUp: () => syncSelection(index),
|
|
3372
|
+
ref: (input) => {
|
|
3373
|
+
inputRefs.current[index] = input;
|
|
3374
|
+
},
|
|
3375
|
+
size: mergedSize,
|
|
3376
|
+
status: mergedStatus,
|
|
3377
|
+
style: slotStyle(styles, "input"),
|
|
3378
|
+
type: mask === true ? "password" : type ?? "text",
|
|
3379
|
+
value: singleValue,
|
|
3380
|
+
variant
|
|
3381
|
+
}, undefined, false, undefined, this),
|
|
3382
|
+
customMask ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
3383
|
+
"aria-hidden": "true",
|
|
3384
|
+
className: "pointer-events-none absolute inset-0 inline-flex items-center justify-center text-[var(--hj-input-fg)]",
|
|
3385
|
+
children: mask
|
|
3386
|
+
}, undefined, false, undefined, this) : null
|
|
3387
|
+
]
|
|
3388
|
+
}, undefined, true, undefined, this),
|
|
3389
|
+
index < mergedLength - 1 && separatorNode != null ? /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
|
|
3390
|
+
className: slotClass(classNames, "separator", "hj-input-otp-separator hj-otp-separator"),
|
|
3391
|
+
style: slotStyle(styles, "separator"),
|
|
3392
|
+
children: separatorNode
|
|
3393
|
+
}, undefined, false, undefined, this) : null
|
|
3394
|
+
]
|
|
3395
|
+
}, `otp-${index}`, true, undefined, this);
|
|
3396
|
+
})
|
|
3397
|
+
}, undefined, false, undefined, this);
|
|
3398
|
+
});
|
|
3399
|
+
var Input = InternalInput;
|
|
3400
|
+
Input.Group = InputGroup;
|
|
3401
|
+
Input.OTP = InputOTP;
|
|
3402
|
+
Input.Password = InputPassword;
|
|
3403
|
+
Input.Search = InputSearch;
|
|
3404
|
+
Input.TextArea = InputTextArea;
|
|
3405
|
+
|
|
3406
|
+
// src/components/SelectInput.tsx
|
|
3407
|
+
var jsx_dev_runtime20 = require("react/jsx-dev-runtime");
|
|
3408
|
+
function SelectInput({
|
|
3409
|
+
activeFirstOption = false,
|
|
3410
|
+
activeValue,
|
|
3411
|
+
allowClear,
|
|
3412
|
+
autoFocus,
|
|
3413
|
+
className = "",
|
|
3414
|
+
classNames,
|
|
3415
|
+
defaultPopupOpen = false,
|
|
3416
|
+
defaultValue,
|
|
3417
|
+
disabled,
|
|
3418
|
+
displayValue,
|
|
3419
|
+
id,
|
|
3420
|
+
onBlur,
|
|
3421
|
+
onChange,
|
|
3422
|
+
onClick,
|
|
3423
|
+
onFocus,
|
|
3424
|
+
onKeyDown,
|
|
3425
|
+
onPopupOpenChange,
|
|
3426
|
+
options,
|
|
3427
|
+
placeholder,
|
|
3428
|
+
popupMatchInputWidth = true,
|
|
3429
|
+
popupOffset,
|
|
3430
|
+
popupOpen,
|
|
3431
|
+
prefix,
|
|
3432
|
+
size,
|
|
3433
|
+
status,
|
|
3434
|
+
style,
|
|
3435
|
+
styles,
|
|
3436
|
+
suffixIcon,
|
|
3437
|
+
tabIndex,
|
|
3438
|
+
title,
|
|
3439
|
+
value,
|
|
3440
|
+
variant
|
|
3441
|
+
}) {
|
|
3442
|
+
const config = useConfig();
|
|
3443
|
+
const mergedStatus = useMergedFormItemStatus(status);
|
|
3444
|
+
const mergedSize = normalizeInputSize(size ?? config.components.SelectInput?.size, config.size);
|
|
3445
|
+
const mergedPopupOffset = popupOffset ?? config.components.SelectInput?.popupOffset ?? 8;
|
|
3446
|
+
const mergedDisabled = disabled ?? config.components.SelectInput?.disabled ?? config.disabled;
|
|
3447
|
+
const rcOptions = options.map((option) => ({ ...option }));
|
|
3448
|
+
return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(import_select.default, {
|
|
3449
|
+
allowClear,
|
|
3450
|
+
autoFocus,
|
|
3451
|
+
className: cn("hj-select-input-root", `hj-select-input-${mergedSize}`, mergedStatus && `hj-select-input-status-${mergedStatus}`, variant && `hj-select-input-variant-${variant}`, slotClass(classNames, "root"), className),
|
|
3452
|
+
classNames: { input: slotClass(classNames, "input") },
|
|
3453
|
+
defaultActiveFirstOption: activeFirstOption,
|
|
3454
|
+
defaultOpen: defaultPopupOpen,
|
|
3455
|
+
defaultValue,
|
|
3456
|
+
disabled: mergedDisabled,
|
|
3457
|
+
getPopupContainer: config.getPopupContainer ? () => config.getPopupContainer?.() ?? document.body : undefined,
|
|
3458
|
+
id,
|
|
3459
|
+
labelRender: displayValue === undefined ? undefined : () => displayValue,
|
|
3460
|
+
open: popupOpen,
|
|
3461
|
+
optionRender: (option) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
|
|
3462
|
+
className: cn("hj-select-input-option-content", activeValue === option.value && "hj-select-input-option-active"),
|
|
3463
|
+
children: [
|
|
3464
|
+
/* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
|
|
3465
|
+
className: "hj-select-input-option-label",
|
|
3466
|
+
children: option.label
|
|
3467
|
+
}, undefined, false, undefined, this),
|
|
3468
|
+
option.data.suffix ? /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
|
|
3469
|
+
className: "hj-select-input-option-suffix",
|
|
3470
|
+
children: option.data.suffix
|
|
3471
|
+
}, undefined, false, undefined, this) : null
|
|
3472
|
+
]
|
|
3473
|
+
}, undefined, true, undefined, this),
|
|
3474
|
+
options: rcOptions,
|
|
3475
|
+
placeholder,
|
|
3476
|
+
popupAlign: { offset: [0, mergedPopupOffset] },
|
|
3477
|
+
popupClassName: slotClass(classNames, "popup", "hj-select-input-popup"),
|
|
3478
|
+
popupMatchSelectWidth: popupMatchInputWidth,
|
|
3479
|
+
popupStyle: slotStyle(styles, "popup"),
|
|
3480
|
+
prefix,
|
|
3481
|
+
prefixCls: "hj-select-input",
|
|
3482
|
+
style: slotStyle(styles, "root", style),
|
|
3483
|
+
suffix: () => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
|
|
3484
|
+
className: slotClass(classNames, "suffix", "hj-select-input-suffix"),
|
|
3485
|
+
style: slotStyle(styles, "suffix"),
|
|
3486
|
+
children: suffixIcon ?? /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(Icon, {
|
|
3487
|
+
name: "chevron-down",
|
|
3488
|
+
size: 16,
|
|
3489
|
+
strokeWidth: 2
|
|
3490
|
+
}, undefined, false, undefined, this)
|
|
3491
|
+
}, undefined, false, undefined, this),
|
|
3492
|
+
tabIndex,
|
|
3493
|
+
title,
|
|
3494
|
+
value,
|
|
3495
|
+
onBlur,
|
|
3496
|
+
onChange: (nextValue, option) => onChange?.(nextValue, option),
|
|
3497
|
+
onClick,
|
|
3498
|
+
onFocus,
|
|
3499
|
+
onKeyDown,
|
|
3500
|
+
onPopupVisibleChange: onPopupOpenChange
|
|
3501
|
+
}, undefined, false, undefined, this);
|
|
3502
|
+
}
|
|
3503
|
+
// src/components/StatCard.tsx
|
|
3504
|
+
var exports_StatCard = {};
|
|
3505
|
+
__export(exports_StatCard, {
|
|
3506
|
+
StatCard: () => StatCard
|
|
3507
|
+
});
|
|
3508
|
+
var jsx_dev_runtime21 = require("react/jsx-dev-runtime");
|
|
3509
|
+
function StatCard({ accent, className = "", label, meta, value }) {
|
|
3510
|
+
return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
|
|
3511
|
+
className: `rounded-[4px] border border-[#24303a] bg-[#151f29] p-3 ${className}`,
|
|
3512
|
+
children: [
|
|
3513
|
+
/* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
|
|
3514
|
+
className: "flex items-start justify-between gap-3",
|
|
3515
|
+
children: [
|
|
3516
|
+
/* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
|
|
3517
|
+
className: "min-w-0",
|
|
3518
|
+
children: [
|
|
3519
|
+
/* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Text, {
|
|
3520
|
+
as: "div",
|
|
3521
|
+
className: "truncate",
|
|
3522
|
+
variant: "muted",
|
|
3523
|
+
children: label
|
|
3524
|
+
}, undefined, false, undefined, this),
|
|
3525
|
+
/* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Title, {
|
|
3526
|
+
as: "p",
|
|
3527
|
+
className: "mt-1 text-2xl",
|
|
3528
|
+
variant: "page",
|
|
3529
|
+
children: value
|
|
3530
|
+
}, undefined, false, undefined, this)
|
|
3531
|
+
]
|
|
3532
|
+
}, undefined, true, undefined, this),
|
|
3533
|
+
accent ? /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
|
|
3534
|
+
className: "shrink-0 text-[#d6a84a]",
|
|
3535
|
+
children: accent
|
|
3536
|
+
}, undefined, false, undefined, this) : null
|
|
3537
|
+
]
|
|
3538
|
+
}, undefined, true, undefined, this),
|
|
3539
|
+
meta ? /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(Text, {
|
|
3540
|
+
as: "div",
|
|
3541
|
+
className: "mt-2 truncate",
|
|
3542
|
+
variant: "muted",
|
|
3543
|
+
children: meta
|
|
3544
|
+
}, undefined, false, undefined, this) : null
|
|
3545
|
+
]
|
|
3546
|
+
}, undefined, true, undefined, this);
|
|
3547
|
+
}
|
|
3548
|
+
// src/components/StatusItem.tsx
|
|
3549
|
+
var exports_StatusItem = {};
|
|
3550
|
+
__export(exports_StatusItem, {
|
|
3551
|
+
StatusItem: () => StatusItem
|
|
3552
|
+
});
|
|
3553
|
+
var jsx_dev_runtime22 = require("react/jsx-dev-runtime");
|
|
3554
|
+
function StatusItem({
|
|
3555
|
+
className = "",
|
|
3556
|
+
icon,
|
|
3557
|
+
label,
|
|
3558
|
+
max = 100,
|
|
3559
|
+
orientation,
|
|
3560
|
+
progress,
|
|
3561
|
+
value
|
|
3562
|
+
}) {
|
|
3563
|
+
if (icon === undefined && orientation === undefined && progress === undefined) {
|
|
3564
|
+
return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
|
|
3565
|
+
className: `flex items-center justify-between gap-3 rounded-[4px] border border-[#24303a] bg-[#111923] px-3 py-2 ${className}`,
|
|
3566
|
+
children: [
|
|
3567
|
+
/* @__PURE__ */ jsx_dev_runtime22.jsxDEV("dt", {
|
|
3568
|
+
className: "text-[#6f7985]",
|
|
3569
|
+
children: label
|
|
3570
|
+
}, undefined, false, undefined, this),
|
|
3571
|
+
/* @__PURE__ */ jsx_dev_runtime22.jsxDEV("dd", {
|
|
3572
|
+
className: "font-mono text-white",
|
|
3573
|
+
children: value
|
|
3574
|
+
}, undefined, false, undefined, this)
|
|
3575
|
+
]
|
|
3576
|
+
}, undefined, true, undefined, this);
|
|
3577
|
+
}
|
|
3578
|
+
const layoutClass = orientation === "column" ? "flex-col text-center" : "items-center";
|
|
3579
|
+
return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
|
|
3580
|
+
className: `flex gap-3 rounded-[4px] bg-[#151f29] p-3 ${layoutClass} ${className}`,
|
|
3581
|
+
children: [
|
|
3582
|
+
icon ? /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
|
|
3583
|
+
className: "shrink-0",
|
|
3584
|
+
children: icon
|
|
3585
|
+
}, undefined, false, undefined, this) : null,
|
|
3586
|
+
/* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
|
|
3587
|
+
className: "min-w-0 flex-1",
|
|
3588
|
+
children: [
|
|
3589
|
+
/* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
|
|
3590
|
+
className: "flex items-center justify-between gap-2",
|
|
3591
|
+
children: [
|
|
3592
|
+
/* @__PURE__ */ jsx_dev_runtime22.jsxDEV("span", {
|
|
3593
|
+
className: "truncate text-sm text-[#f2f4f6]",
|
|
3594
|
+
children: label
|
|
3595
|
+
}, undefined, false, undefined, this),
|
|
3596
|
+
/* @__PURE__ */ jsx_dev_runtime22.jsxDEV("span", {
|
|
3597
|
+
className: "shrink-0 text-xs text-[#a5adb8]",
|
|
3598
|
+
children: value
|
|
3599
|
+
}, undefined, false, undefined, this)
|
|
3600
|
+
]
|
|
3601
|
+
}, undefined, true, undefined, this),
|
|
3602
|
+
progress === undefined ? null : /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(ProgressBar, {
|
|
3603
|
+
className: "mt-2",
|
|
3604
|
+
max,
|
|
3605
|
+
value: progress
|
|
3606
|
+
}, undefined, false, undefined, this)
|
|
3607
|
+
]
|
|
3608
|
+
}, undefined, true, undefined, this)
|
|
3609
|
+
]
|
|
3610
|
+
}, undefined, true, undefined, this);
|
|
3611
|
+
}
|
|
3612
|
+
// src/components/TagPill.tsx
|
|
3613
|
+
var exports_TagPill = {};
|
|
3614
|
+
__export(exports_TagPill, {
|
|
3615
|
+
TagPill: () => TagPill
|
|
3616
|
+
});
|
|
3617
|
+
var jsx_dev_runtime23 = require("react/jsx-dev-runtime");
|
|
3618
|
+
var toneClass3 = {
|
|
3619
|
+
amber: "border-[#6f5529] bg-[#2a2115] text-[#d6a84a]",
|
|
3620
|
+
slate: "border-[#3b4652] bg-[#161d24] text-[#aab0b8]",
|
|
3621
|
+
green: "border-[#3f6f36] bg-[#172a19] text-[#69c04a]",
|
|
3622
|
+
red: "border-[#ff8f86]/50 bg-[#3a2426] text-[#ff8f86]"
|
|
3623
|
+
};
|
|
3624
|
+
function TagPill({
|
|
3625
|
+
children,
|
|
3626
|
+
tone = "slate"
|
|
3627
|
+
}) {
|
|
3628
|
+
return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV("span", {
|
|
3629
|
+
className: `inline-flex h-5 items-center rounded-[3px] border px-1.5 text-[11px] ${toneClass3[tone]}`,
|
|
3630
|
+
children
|
|
3631
|
+
}, undefined, false, undefined, this);
|
|
3632
|
+
}
|
|
3633
|
+
// src/components/OtherPrimitives.tsx
|
|
3634
|
+
var exports_OtherPrimitives = {};
|
|
3635
|
+
__export(exports_OtherPrimitives, {
|
|
3636
|
+
Util: () => Util,
|
|
3637
|
+
BorderBeam: () => BorderBeam,
|
|
3638
|
+
Affix: () => Affix
|
|
3639
|
+
});
|
|
3640
|
+
var import__996_utils = require("@996-design/996-utils");
|
|
3641
|
+
var import_resize_observer2 = __toESM(require("@rc-component/resize-observer"));
|
|
3642
|
+
var import_util4 = require("@rc-component/util");
|
|
3643
|
+
var import_react9 = require("react");
|
|
3644
|
+
|
|
3645
|
+
// src/components/affix/utils.ts
|
|
3646
|
+
function getTargetRect(target) {
|
|
3647
|
+
if (typeof window !== "undefined" && target === window) {
|
|
3648
|
+
return { top: 0, bottom: window.innerHeight };
|
|
3649
|
+
}
|
|
3650
|
+
return target.getBoundingClientRect();
|
|
3651
|
+
}
|
|
3652
|
+
function getFixedTop(placeholderRect, targetRect, offsetTop) {
|
|
3653
|
+
if (offsetTop !== undefined && Math.round(targetRect.top) > Math.round(placeholderRect.top) - offsetTop) {
|
|
3654
|
+
return offsetTop + targetRect.top;
|
|
3655
|
+
}
|
|
3656
|
+
return;
|
|
3657
|
+
}
|
|
3658
|
+
function getFixedBottom(placeholderRect, targetRect, offsetBottom) {
|
|
3659
|
+
if (offsetBottom !== undefined && Math.round(targetRect.bottom) < Math.round(placeholderRect.bottom) + offsetBottom) {
|
|
3660
|
+
return offsetBottom + window.innerHeight - targetRect.bottom;
|
|
3661
|
+
}
|
|
3662
|
+
return;
|
|
3663
|
+
}
|
|
3664
|
+
function createsFixedContainingBlock(element) {
|
|
3665
|
+
const view = element.ownerDocument.defaultView;
|
|
3666
|
+
if (!view)
|
|
3667
|
+
return false;
|
|
3668
|
+
return view.getComputedStyle(element).transform !== "none";
|
|
3669
|
+
}
|
|
3670
|
+
function getFixedContainerOffset(element) {
|
|
3671
|
+
const view = element.ownerDocument.defaultView;
|
|
3672
|
+
if (!view)
|
|
3673
|
+
return { top: 0, bottom: 0 };
|
|
3674
|
+
let parent = element.parentElement;
|
|
3675
|
+
while (parent) {
|
|
3676
|
+
if (createsFixedContainingBlock(parent)) {
|
|
3677
|
+
const rect = parent.getBoundingClientRect();
|
|
3678
|
+
return {
|
|
3679
|
+
top: rect.top,
|
|
3680
|
+
bottom: view.innerHeight - rect.bottom
|
|
3681
|
+
};
|
|
3682
|
+
}
|
|
3683
|
+
parent = parent.parentElement;
|
|
3684
|
+
}
|
|
3685
|
+
return { top: 0, bottom: 0 };
|
|
3686
|
+
}
|
|
3687
|
+
|
|
3688
|
+
// src/components/OtherPrimitives.tsx
|
|
3689
|
+
var jsx_dev_runtime24 = require("react/jsx-dev-runtime");
|
|
3690
|
+
var TRIGGER_EVENTS = [
|
|
3691
|
+
"resize",
|
|
3692
|
+
"scroll",
|
|
3693
|
+
"touchstart",
|
|
3694
|
+
"touchmove",
|
|
3695
|
+
"touchend",
|
|
3696
|
+
"pageshow",
|
|
3697
|
+
"load"
|
|
3698
|
+
];
|
|
3699
|
+
var AFFIX_STATUS_NONE = 0;
|
|
3700
|
+
var AFFIX_STATUS_PREPARE = 1;
|
|
3701
|
+
function getDefaultTarget() {
|
|
3702
|
+
return typeof window === "undefined" ? null : window;
|
|
3703
|
+
}
|
|
3704
|
+
function throttleByAnimationFrame(callback) {
|
|
3705
|
+
let requestId = null;
|
|
3706
|
+
const throttled = (...args) => {
|
|
3707
|
+
if (requestId !== null)
|
|
3708
|
+
return;
|
|
3709
|
+
requestId = import_util4.raf(() => {
|
|
3710
|
+
requestId = null;
|
|
3711
|
+
callback(...args);
|
|
3712
|
+
});
|
|
3713
|
+
};
|
|
3714
|
+
throttled.cancel = () => {
|
|
3715
|
+
if (requestId !== null) {
|
|
3716
|
+
import_util4.raf.cancel(requestId);
|
|
3717
|
+
}
|
|
3718
|
+
requestId = null;
|
|
3719
|
+
};
|
|
3720
|
+
return throttled;
|
|
3721
|
+
}
|
|
3722
|
+
function normalizeTarget(target) {
|
|
3723
|
+
if (typeof window !== "undefined" && target === window) {
|
|
3724
|
+
return window;
|
|
3725
|
+
}
|
|
3726
|
+
if (typeof HTMLElement !== "undefined" && target instanceof HTMLElement) {
|
|
3727
|
+
return target;
|
|
3728
|
+
}
|
|
3729
|
+
if (typeof ShadowRoot !== "undefined" && target instanceof ShadowRoot) {
|
|
3730
|
+
return target.host instanceof HTMLElement ? target.host : null;
|
|
3731
|
+
}
|
|
3732
|
+
return null;
|
|
3733
|
+
}
|
|
3734
|
+
var Affix = import_react9.forwardRef(function Affix2({
|
|
3735
|
+
children,
|
|
3736
|
+
className = "",
|
|
3737
|
+
offsetBottom,
|
|
3738
|
+
offsetTop,
|
|
3739
|
+
onChange,
|
|
3740
|
+
onTestUpdate,
|
|
3741
|
+
onTestUpdatePosition,
|
|
3742
|
+
prefixCls,
|
|
3743
|
+
rootClassName,
|
|
3744
|
+
style,
|
|
3745
|
+
target,
|
|
3746
|
+
...props
|
|
3747
|
+
}, ref) {
|
|
3748
|
+
const config = useConfig();
|
|
3749
|
+
const componentConfig = config.components.Affix;
|
|
3750
|
+
const affixPrefixCls = config.getPrefixCls("affix", prefixCls);
|
|
3751
|
+
const [affixStyle, setAffixStyle] = import_react9.useState();
|
|
3752
|
+
const [placeholderStyle, setPlaceholderStyle] = import_react9.useState();
|
|
3753
|
+
const statusRef = import_react9.useRef(AFFIX_STATUS_NONE);
|
|
3754
|
+
const lastAffixRef = import_react9.useRef(false);
|
|
3755
|
+
const affixStyleRef = import_react9.useRef(undefined);
|
|
3756
|
+
const prevTargetRef = import_react9.useRef(null);
|
|
3757
|
+
const prevListenerRef = import_react9.useRef(null);
|
|
3758
|
+
const placeholderRef = import_react9.useRef(null);
|
|
3759
|
+
const fixedRef = import_react9.useRef(null);
|
|
3760
|
+
const timerRef = import_react9.useRef(null);
|
|
3761
|
+
affixStyleRef.current = affixStyle;
|
|
3762
|
+
const targetFunc = target ?? (config.getTargetContainer ? () => normalizeTarget(config.getTargetContainer?.() ?? null) : getDefaultTarget);
|
|
3763
|
+
const internalOffsetTop = offsetBottom === undefined && offsetTop === undefined ? 0 : offsetTop;
|
|
3764
|
+
const commitMeasure = import_util4.useEvent((nextAffixStyle, nextPlaceholderStyle) => {
|
|
3765
|
+
const nextAffix = Boolean(nextAffixStyle);
|
|
3766
|
+
if (lastAffixRef.current !== nextAffix) {
|
|
3767
|
+
lastAffixRef.current = nextAffix;
|
|
3768
|
+
onChange?.(nextAffix);
|
|
3769
|
+
}
|
|
3770
|
+
affixStyleRef.current = nextAffixStyle;
|
|
3771
|
+
setAffixStyle(nextAffixStyle);
|
|
3772
|
+
setPlaceholderStyle(nextPlaceholderStyle);
|
|
3773
|
+
});
|
|
3774
|
+
const measure = import_util4.useEvent(() => {
|
|
3775
|
+
if (statusRef.current !== AFFIX_STATUS_PREPARE || !fixedRef.current || !placeholderRef.current) {
|
|
3776
|
+
return;
|
|
3777
|
+
}
|
|
3778
|
+
const targetNode = targetFunc();
|
|
3779
|
+
const placeholderNode = placeholderRef.current;
|
|
3780
|
+
if (!targetNode) {
|
|
3781
|
+
statusRef.current = AFFIX_STATUS_NONE;
|
|
3782
|
+
commitMeasure();
|
|
3783
|
+
return;
|
|
3784
|
+
}
|
|
3785
|
+
const placeholderRect = getTargetRect(placeholderNode);
|
|
3786
|
+
if (placeholderRect.top === 0 && placeholderRect.left === 0 && placeholderRect.width === 0 && placeholderRect.height === 0) {
|
|
3787
|
+
return;
|
|
3788
|
+
}
|
|
3789
|
+
const targetRect = getTargetRect(targetNode);
|
|
3790
|
+
const fixedTop = getFixedTop(placeholderRect, targetRect, internalOffsetTop);
|
|
3791
|
+
const fixedBottom = getFixedBottom(placeholderRect, targetRect, offsetBottom);
|
|
3792
|
+
const containerOffset = getFixedContainerOffset(fixedRef.current);
|
|
3793
|
+
let nextAffixStyle;
|
|
3794
|
+
if (fixedTop !== undefined) {
|
|
3795
|
+
nextAffixStyle = {
|
|
3796
|
+
position: "fixed",
|
|
3797
|
+
top: fixedTop - containerOffset.top,
|
|
3798
|
+
width: placeholderRect.width,
|
|
3799
|
+
height: placeholderRect.height
|
|
3800
|
+
};
|
|
3801
|
+
} else if (fixedBottom !== undefined) {
|
|
3802
|
+
nextAffixStyle = {
|
|
3803
|
+
position: "fixed",
|
|
3804
|
+
bottom: fixedBottom - containerOffset.bottom,
|
|
3805
|
+
width: placeholderRect.width,
|
|
3806
|
+
height: placeholderRect.height
|
|
3807
|
+
};
|
|
3808
|
+
}
|
|
3809
|
+
statusRef.current = AFFIX_STATUS_NONE;
|
|
3810
|
+
commitMeasure(nextAffixStyle, nextAffixStyle ? { width: placeholderRect.width, height: placeholderRect.height } : undefined);
|
|
3811
|
+
});
|
|
3812
|
+
const prepareMeasure = import_util4.useEvent(() => {
|
|
3813
|
+
statusRef.current = AFFIX_STATUS_PREPARE;
|
|
3814
|
+
measure();
|
|
3815
|
+
onTestUpdate?.();
|
|
3816
|
+
onTestUpdatePosition?.();
|
|
3817
|
+
});
|
|
3818
|
+
const updatePositionRef = import_react9.useRef(null);
|
|
3819
|
+
if (!updatePositionRef.current) {
|
|
3820
|
+
updatePositionRef.current = throttleByAnimationFrame(prepareMeasure);
|
|
3821
|
+
}
|
|
3822
|
+
const updatePosition = updatePositionRef.current;
|
|
3823
|
+
const lazyMeasure = import_util4.useEvent(() => {
|
|
3824
|
+
const currentAffixStyle = affixStyleRef.current;
|
|
3825
|
+
const targetNode = targetFunc();
|
|
3826
|
+
const placeholderNode = placeholderRef.current;
|
|
3827
|
+
const fixedNode = fixedRef.current;
|
|
3828
|
+
if (currentAffixStyle && targetNode && placeholderNode && fixedNode) {
|
|
3829
|
+
const targetRect = getTargetRect(targetNode);
|
|
3830
|
+
const placeholderRect = getTargetRect(placeholderNode);
|
|
3831
|
+
const fixedTop = getFixedTop(placeholderRect, targetRect, internalOffsetTop);
|
|
3832
|
+
const fixedBottom = getFixedBottom(placeholderRect, targetRect, offsetBottom);
|
|
3833
|
+
const containerOffset = getFixedContainerOffset(fixedNode);
|
|
3834
|
+
if (fixedTop !== undefined && currentAffixStyle.top === fixedTop - containerOffset.top || fixedBottom !== undefined && currentAffixStyle.bottom === fixedBottom - containerOffset.bottom) {
|
|
3835
|
+
return;
|
|
3836
|
+
}
|
|
3837
|
+
}
|
|
3838
|
+
prepareMeasure();
|
|
3839
|
+
});
|
|
3840
|
+
const lazyUpdatePositionRef = import_react9.useRef(null);
|
|
3841
|
+
if (!lazyUpdatePositionRef.current) {
|
|
3842
|
+
lazyUpdatePositionRef.current = throttleByAnimationFrame(lazyMeasure);
|
|
3843
|
+
}
|
|
3844
|
+
const lazyUpdatePosition = lazyUpdatePositionRef.current;
|
|
3845
|
+
const removeTargetListeners = import_util4.useEvent((listenerTarget, listener) => {
|
|
3846
|
+
if (!listenerTarget || !listener)
|
|
3847
|
+
return;
|
|
3848
|
+
for (const eventName of TRIGGER_EVENTS) {
|
|
3849
|
+
listenerTarget.removeEventListener(eventName, listener);
|
|
3850
|
+
}
|
|
3851
|
+
});
|
|
3852
|
+
const addListeners = import_util4.useEvent(() => {
|
|
3853
|
+
const listenerTarget = targetFunc();
|
|
3854
|
+
if (!listenerTarget)
|
|
3855
|
+
return;
|
|
3856
|
+
removeTargetListeners(prevTargetRef.current, prevListenerRef.current);
|
|
3857
|
+
const listener = lazyUpdatePosition;
|
|
3858
|
+
for (const eventName of TRIGGER_EVENTS) {
|
|
3859
|
+
listenerTarget.addEventListener(eventName, listener);
|
|
3860
|
+
}
|
|
3861
|
+
prevTargetRef.current = listenerTarget;
|
|
3862
|
+
prevListenerRef.current = listener;
|
|
3863
|
+
});
|
|
3864
|
+
const removeListeners = import_util4.useEvent(() => {
|
|
3865
|
+
removeTargetListeners(targetFunc(), lazyUpdatePosition);
|
|
3866
|
+
removeTargetListeners(prevTargetRef.current, prevListenerRef.current);
|
|
3867
|
+
prevTargetRef.current = null;
|
|
3868
|
+
prevListenerRef.current = null;
|
|
3869
|
+
updatePosition.cancel();
|
|
3870
|
+
lazyUpdatePosition.cancel();
|
|
3871
|
+
});
|
|
3872
|
+
import_react9.useImperativeHandle(ref, () => ({
|
|
3873
|
+
nativeElement: placeholderRef.current,
|
|
3874
|
+
updatePosition
|
|
3875
|
+
}), [updatePosition]);
|
|
3876
|
+
import_react9.useEffect(() => {
|
|
3877
|
+
timerRef.current = setTimeout(addListeners);
|
|
3878
|
+
return () => {
|
|
3879
|
+
if (timerRef.current) {
|
|
3880
|
+
clearTimeout(timerRef.current);
|
|
3881
|
+
timerRef.current = null;
|
|
3882
|
+
}
|
|
3883
|
+
removeListeners();
|
|
3884
|
+
};
|
|
3885
|
+
}, [addListeners, removeListeners]);
|
|
3886
|
+
import_react9.useEffect(() => {
|
|
3887
|
+
addListeners();
|
|
3888
|
+
return removeListeners;
|
|
3889
|
+
}, [addListeners, config.getTargetContainer, removeListeners, target]);
|
|
3890
|
+
import_react9.useEffect(() => {
|
|
3891
|
+
updatePosition();
|
|
3892
|
+
}, [config.getTargetContainer, offsetBottom, offsetTop, target, updatePosition]);
|
|
3893
|
+
return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_resize_observer2.default, {
|
|
3894
|
+
onResize: updatePosition,
|
|
3895
|
+
children: /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
|
|
3896
|
+
...props,
|
|
3897
|
+
className: cn(className, componentConfig?.className),
|
|
3898
|
+
ref: placeholderRef,
|
|
3899
|
+
style: { ...componentConfig?.style, ...style },
|
|
3900
|
+
children: [
|
|
3901
|
+
affixStyle ? /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
|
|
3902
|
+
"aria-hidden": "true",
|
|
3903
|
+
style: placeholderStyle
|
|
3904
|
+
}, undefined, false, undefined, this) : null,
|
|
3905
|
+
/* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
|
|
3906
|
+
className: cn(affixStyle && "hj-affix", affixStyle && affixPrefixCls !== "hj-affix" && affixPrefixCls, affixStyle && rootClassName),
|
|
3907
|
+
ref: fixedRef,
|
|
3908
|
+
style: affixStyle,
|
|
3909
|
+
children: /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(import_resize_observer2.default, {
|
|
3910
|
+
onResize: updatePosition,
|
|
3911
|
+
children
|
|
3912
|
+
}, undefined, false, undefined, this)
|
|
3913
|
+
}, undefined, false, undefined, this)
|
|
3914
|
+
]
|
|
3915
|
+
}, undefined, true, undefined, this)
|
|
3916
|
+
}, undefined, false, undefined, this);
|
|
3917
|
+
});
|
|
3918
|
+
Affix.displayName = "Affix";
|
|
3919
|
+
function BorderBeam({
|
|
3920
|
+
children,
|
|
3921
|
+
className = "",
|
|
3922
|
+
duration = 2600,
|
|
3923
|
+
style,
|
|
3924
|
+
...props
|
|
3925
|
+
}) {
|
|
3926
|
+
return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
|
|
3927
|
+
className: cn("relative overflow-hidden rounded-[var(--hj-radius-md)] border border-[var(--hj-color-web-border)]", className),
|
|
3928
|
+
style: { "--hj-border-beam-duration": `${duration}ms`, ...style },
|
|
3929
|
+
...props,
|
|
3930
|
+
children: [
|
|
3931
|
+
/* @__PURE__ */ jsx_dev_runtime24.jsxDEV("span", {
|
|
3932
|
+
className: "pointer-events-none absolute inset-0 rounded-[inherit] bg-[conic-gradient(from_0deg,transparent_0deg,var(--hj-color-brand)_80deg,transparent_120deg)] opacity-60 [animation:hj-border-beam_var(--hj-border-beam-duration)_linear_infinite]"
|
|
3933
|
+
}, undefined, false, undefined, this),
|
|
3934
|
+
/* @__PURE__ */ jsx_dev_runtime24.jsxDEV("span", {
|
|
3935
|
+
className: "relative z-[1] block rounded-[inherit] bg-[var(--hj-color-web-surface)]",
|
|
3936
|
+
children
|
|
3937
|
+
}, undefined, false, undefined, this)
|
|
3938
|
+
]
|
|
3939
|
+
}, undefined, true, undefined, this);
|
|
3940
|
+
}
|
|
3941
|
+
var Util = {
|
|
3942
|
+
composeRefs: import__996_utils.composeRefs,
|
|
3943
|
+
useControllableValue: import__996_utils.useControllableValue,
|
|
3944
|
+
useLatest: import__996_utils.useLatest,
|
|
3945
|
+
warning: import__996_utils.warning
|
|
3946
|
+
};
|
|
3947
|
+
// src/tokens.ts
|
|
3948
|
+
var exports_tokens = {};
|
|
3949
|
+
__export(exports_tokens, {
|
|
3950
|
+
themeToken: () => themeToken,
|
|
3951
|
+
cssVar: () => cssVar
|
|
3952
|
+
});
|
|
3953
|
+
var themeToken = {
|
|
3954
|
+
color: {
|
|
3955
|
+
brand: "var(--hj-color-brand)",
|
|
3956
|
+
brandHover: "var(--hj-color-brand-hover)",
|
|
3957
|
+
brandActive: "var(--hj-color-brand-active)",
|
|
3958
|
+
brandWeak: "var(--hj-color-brand-weak)",
|
|
3959
|
+
success: "var(--hj-color-success)",
|
|
3960
|
+
warning: "var(--hj-color-warning)",
|
|
3961
|
+
info: "var(--hj-color-info)",
|
|
3962
|
+
danger: "var(--hj-color-danger)",
|
|
3963
|
+
dangerSoft: "var(--hj-color-danger-soft)",
|
|
3964
|
+
purchase: "var(--hj-color-purchase)",
|
|
3965
|
+
webPage: "var(--hj-color-web-page)",
|
|
3966
|
+
webBg: "var(--hj-color-web-bg)",
|
|
3967
|
+
webSurface: "var(--hj-color-web-surface)",
|
|
3968
|
+
webControl: "var(--hj-color-web-control)",
|
|
3969
|
+
webSurfaceRaised: "var(--hj-color-web-surface-raised)",
|
|
3970
|
+
webSurfaceActive: "var(--hj-color-web-surface-active)",
|
|
3971
|
+
webBorder: "var(--hj-color-web-border)",
|
|
3972
|
+
webBorderStrong: "var(--hj-color-web-border-strong)",
|
|
3973
|
+
webForeground: "var(--hj-color-web-foreground)",
|
|
3974
|
+
webForeground80: "var(--hj-color-web-foreground-80)",
|
|
3975
|
+
webMuted: "var(--hj-color-web-muted)",
|
|
3976
|
+
webSubtle: "var(--hj-color-web-subtle)",
|
|
3977
|
+
webDisabled: "var(--hj-color-web-disabled)",
|
|
3978
|
+
adminBrand: "var(--hj-color-admin-brand)",
|
|
3979
|
+
adminBrandHover: "var(--hj-color-admin-brand-hover)",
|
|
3980
|
+
adminBg: "var(--hj-color-admin-bg)",
|
|
3981
|
+
adminSurface: "var(--hj-color-admin-surface)",
|
|
3982
|
+
adminSurfaceMuted: "var(--hj-color-admin-surface-muted)",
|
|
3983
|
+
adminBorder: "var(--hj-color-admin-border)",
|
|
3984
|
+
adminBorderStrong: "var(--hj-color-admin-border-strong)",
|
|
3985
|
+
adminForeground: "var(--hj-color-admin-foreground)",
|
|
3986
|
+
adminMuted: "var(--hj-color-admin-muted)"
|
|
3987
|
+
},
|
|
3988
|
+
radius: {
|
|
3989
|
+
xs: "var(--hj-radius-xs)",
|
|
3990
|
+
sm: "var(--hj-radius-sm)",
|
|
3991
|
+
md: "var(--hj-radius-md)",
|
|
3992
|
+
lg: "var(--hj-radius-lg)"
|
|
3993
|
+
},
|
|
3994
|
+
button: {
|
|
3995
|
+
fontFamily: "var(--hj-button-font-family)",
|
|
3996
|
+
fontWeight: "var(--hj-button-font-weight)",
|
|
3997
|
+
lightFontFamily: "var(--hj-button-light-font-family)",
|
|
3998
|
+
lightFontWeight: "var(--hj-button-light-font-weight)",
|
|
3999
|
+
heightXs: "var(--hj-button-xs-height)",
|
|
4000
|
+
heightSm: "var(--hj-button-sm-height)",
|
|
4001
|
+
heightMd: "var(--hj-button-md-height)",
|
|
4002
|
+
heightLg: "var(--hj-button-lg-height)",
|
|
4003
|
+
minWidthXs: "var(--hj-button-xs-min-width)",
|
|
4004
|
+
minWidthSm: "var(--hj-button-sm-min-width)",
|
|
4005
|
+
minWidthMd: "var(--hj-button-md-min-width)",
|
|
4006
|
+
minWidthLg: "var(--hj-button-lg-min-width)",
|
|
4007
|
+
lineHeightXs: "var(--hj-button-xs-line-height)",
|
|
4008
|
+
lineHeightSm: "var(--hj-button-sm-line-height)",
|
|
4009
|
+
lineHeightMd: "var(--hj-button-md-line-height)",
|
|
4010
|
+
lineHeightLg: "var(--hj-button-lg-line-height)",
|
|
4011
|
+
primaryBg: "var(--hj-button-primary-bg)",
|
|
4012
|
+
primaryBgHover: "var(--hj-button-primary-bg-hover)",
|
|
4013
|
+
primaryBgActive: "var(--hj-button-primary-bg-active)",
|
|
4014
|
+
defaultBg: "var(--hj-button-default-bg)",
|
|
4015
|
+
defaultBgHover: "var(--hj-button-default-bg-hover)",
|
|
4016
|
+
defaultBgActive: "var(--hj-button-default-bg-active)",
|
|
4017
|
+
lightBg: "var(--hj-button-light-bg)",
|
|
4018
|
+
lightBgHover: "var(--hj-button-light-bg-hover)",
|
|
4019
|
+
lightBgActive: "var(--hj-button-light-bg-active)",
|
|
4020
|
+
lightBorder: "var(--hj-button-light-border)",
|
|
4021
|
+
lightBorderHover: "var(--hj-button-light-border-hover)",
|
|
4022
|
+
lightForeground: "var(--hj-button-light-fg)",
|
|
4023
|
+
translucentBg: "var(--hj-button-translucent-bg)",
|
|
4024
|
+
translucentBgHover: "var(--hj-button-translucent-bg-hover)",
|
|
4025
|
+
translucentBgActive: "var(--hj-button-translucent-bg-active)",
|
|
4026
|
+
toggleBg: "var(--hj-button-toggle-bg)",
|
|
4027
|
+
toggleBgHover: "var(--hj-button-toggle-bg-hover)",
|
|
4028
|
+
toggleBgActive: "var(--hj-button-toggle-bg-active)",
|
|
4029
|
+
textForeground: "var(--hj-button-text-fg)",
|
|
4030
|
+
textDefaultForeground: "var(--hj-button-text-default-fg)",
|
|
4031
|
+
groupSeparator: "var(--hj-button-group-separator)"
|
|
4032
|
+
},
|
|
4033
|
+
iconButton: {
|
|
4034
|
+
defaultBorder: "var(--hj-icon-button-default-border)",
|
|
4035
|
+
defaultBackground: "var(--hj-icon-button-default-bg)",
|
|
4036
|
+
defaultForeground: "var(--hj-icon-button-default-fg)",
|
|
4037
|
+
defaultBorderHover: "var(--hj-icon-button-default-border-hover)",
|
|
4038
|
+
defaultForegroundHover: "var(--hj-icon-button-default-fg-hover)",
|
|
4039
|
+
primaryBorder: "var(--hj-icon-button-primary-border)",
|
|
4040
|
+
primaryBackground: "var(--hj-icon-button-primary-bg)",
|
|
4041
|
+
primaryBackgroundHover: "var(--hj-icon-button-primary-bg-hover)",
|
|
4042
|
+
primaryForeground: "var(--hj-icon-button-primary-fg)",
|
|
4043
|
+
ghostBorder: "var(--hj-icon-button-ghost-border)",
|
|
4044
|
+
ghostBackground: "var(--hj-icon-button-ghost-bg)",
|
|
4045
|
+
ghostForeground: "var(--hj-icon-button-ghost-fg)",
|
|
4046
|
+
ghostForegroundHover: "var(--hj-icon-button-ghost-fg-hover)",
|
|
4047
|
+
selectedBorder: "var(--hj-icon-button-selected-border)",
|
|
4048
|
+
selectedBackground: "var(--hj-icon-button-selected-bg)",
|
|
4049
|
+
selectedForeground: "var(--hj-icon-button-selected-fg)"
|
|
4050
|
+
},
|
|
4051
|
+
input: {
|
|
4052
|
+
heightSm: "var(--hj-input-height-sm)",
|
|
4053
|
+
heightMd: "var(--hj-input-height-md)",
|
|
4054
|
+
heightLg: "var(--hj-input-height-lg)",
|
|
4055
|
+
paddingX: "var(--hj-input-padding-x)",
|
|
4056
|
+
gap: "var(--hj-input-gap)",
|
|
4057
|
+
fontSize: "var(--hj-input-font-size)",
|
|
4058
|
+
lineHeight: "var(--hj-input-line-height)",
|
|
4059
|
+
radius: "var(--hj-input-radius)",
|
|
4060
|
+
background: "var(--hj-input-bg)",
|
|
4061
|
+
backgroundActive: "var(--hj-input-bg-active)",
|
|
4062
|
+
border: "var(--hj-input-border)",
|
|
4063
|
+
borderActive: "var(--hj-input-border-active)",
|
|
4064
|
+
foreground: "var(--hj-input-fg)",
|
|
4065
|
+
placeholder: "var(--hj-input-placeholder)",
|
|
4066
|
+
icon: "var(--hj-input-icon)",
|
|
4067
|
+
clear: "var(--hj-input-clear)",
|
|
4068
|
+
addon: "var(--hj-input-addon)",
|
|
4069
|
+
addonBackground: "var(--hj-input-addon-bg)",
|
|
4070
|
+
addonForeground: "var(--hj-input-addon-fg)"
|
|
4071
|
+
},
|
|
4072
|
+
checkbox: {
|
|
4073
|
+
size: "var(--hj-checkbox-size)",
|
|
4074
|
+
borderWidth: "var(--hj-checkbox-border-width)",
|
|
4075
|
+
border: "var(--hj-checkbox-border)",
|
|
4076
|
+
borderHover: "var(--hj-checkbox-border-hover)",
|
|
4077
|
+
background: "var(--hj-checkbox-bg)",
|
|
4078
|
+
backgroundChecked: "var(--hj-checkbox-bg-checked)",
|
|
4079
|
+
icon: "var(--hj-checkbox-icon)",
|
|
4080
|
+
label: "var(--hj-checkbox-label)",
|
|
4081
|
+
labelActive: "var(--hj-checkbox-label-active)"
|
|
4082
|
+
},
|
|
4083
|
+
switch: {
|
|
4084
|
+
width: "var(--hj-switch-width)",
|
|
4085
|
+
height: "var(--hj-switch-height)",
|
|
4086
|
+
padding: "var(--hj-switch-padding)",
|
|
4087
|
+
thumbSize: "var(--hj-switch-thumb-size)",
|
|
4088
|
+
background: "var(--hj-switch-bg)",
|
|
4089
|
+
backgroundChecked: "var(--hj-switch-bg-checked)",
|
|
4090
|
+
thumbBackground: "var(--hj-switch-thumb-bg)"
|
|
4091
|
+
},
|
|
4092
|
+
skeleton: {
|
|
4093
|
+
background: "var(--hj-skeleton-bg)",
|
|
4094
|
+
highlight: "var(--hj-skeleton-highlight)",
|
|
4095
|
+
gap: "var(--hj-skeleton-gap)",
|
|
4096
|
+
rowHeight: "var(--hj-skeleton-row-height)",
|
|
4097
|
+
rowGap: "var(--hj-skeleton-row-gap)",
|
|
4098
|
+
titleHeight: "var(--hj-skeleton-title-height)",
|
|
4099
|
+
titleMargin: "var(--hj-skeleton-title-margin)",
|
|
4100
|
+
radius: "var(--hj-skeleton-radius)",
|
|
4101
|
+
radiusSquare: "var(--hj-skeleton-radius-square)",
|
|
4102
|
+
sizeSm: "var(--hj-skeleton-size-sm)",
|
|
4103
|
+
sizeMd: "var(--hj-skeleton-size-md)",
|
|
4104
|
+
sizeLg: "var(--hj-skeleton-size-lg)"
|
|
4105
|
+
},
|
|
4106
|
+
tooltip: {
|
|
4107
|
+
radius: "var(--hj-tooltip-radius)",
|
|
4108
|
+
height: "var(--hj-tooltip-height)",
|
|
4109
|
+
minWidth: "var(--hj-tooltip-min-width)",
|
|
4110
|
+
paddingX: "var(--hj-tooltip-padding-x)",
|
|
4111
|
+
arrowSize: "var(--hj-tooltip-arrow-size)",
|
|
4112
|
+
gap: "var(--hj-tooltip-gap)",
|
|
4113
|
+
lightBg: "var(--hj-tooltip-light-bg)",
|
|
4114
|
+
lightFg: "var(--hj-tooltip-light-fg)",
|
|
4115
|
+
darkBg: "var(--hj-tooltip-dark-bg)",
|
|
4116
|
+
darkFg: "var(--hj-tooltip-dark-fg)",
|
|
4117
|
+
shadow: "var(--hj-tooltip-shadow)"
|
|
4118
|
+
},
|
|
4119
|
+
message: {
|
|
4120
|
+
height: "var(--hj-message-height)",
|
|
4121
|
+
radius: "var(--hj-message-radius)",
|
|
4122
|
+
paddingX: "var(--hj-message-padding-x)",
|
|
4123
|
+
gap: "var(--hj-message-gap)",
|
|
4124
|
+
background: "var(--hj-message-bg)",
|
|
4125
|
+
foreground: "var(--hj-message-fg)",
|
|
4126
|
+
lightBackground: "var(--hj-message-light-bg)",
|
|
4127
|
+
lightForeground: "var(--hj-message-light-fg)",
|
|
4128
|
+
actionForeground: "var(--hj-message-action-fg)",
|
|
4129
|
+
closeForeground: "var(--hj-message-close-fg)",
|
|
4130
|
+
closeForegroundHover: "var(--hj-message-close-fg-hover)",
|
|
4131
|
+
iconSize: "var(--hj-message-icon-size)",
|
|
4132
|
+
success: "var(--hj-message-success)",
|
|
4133
|
+
warning: "var(--hj-message-warning)",
|
|
4134
|
+
error: "var(--hj-message-error)",
|
|
4135
|
+
info: "var(--hj-message-info)",
|
|
4136
|
+
shadow: "var(--hj-message-shadow)"
|
|
4137
|
+
},
|
|
4138
|
+
modal: {
|
|
4139
|
+
background: "var(--hj-modal-bg)",
|
|
4140
|
+
foreground: "var(--hj-modal-fg)",
|
|
4141
|
+
bodyForeground: "var(--hj-modal-body-fg)",
|
|
4142
|
+
paddingX: "var(--hj-modal-padding-x)",
|
|
4143
|
+
paddingY: "var(--hj-modal-padding-y)",
|
|
4144
|
+
headerHeight: "var(--hj-modal-header-height)",
|
|
4145
|
+
wrapPaddingY: "var(--hj-modal-wrap-padding-y)",
|
|
4146
|
+
closeSize: "var(--hj-modal-close-size)",
|
|
4147
|
+
closeInset: "var(--hj-modal-close-inset)",
|
|
4148
|
+
maskBackground: "var(--hj-modal-mask-bg)",
|
|
4149
|
+
radius: "var(--hj-modal-radius)",
|
|
4150
|
+
shadow: "var(--hj-modal-shadow)"
|
|
4151
|
+
},
|
|
4152
|
+
menu: {
|
|
4153
|
+
background: "var(--hj-menu-bg)",
|
|
4154
|
+
border: "var(--hj-menu-border)",
|
|
4155
|
+
shadow: "var(--hj-menu-shadow)",
|
|
4156
|
+
itemBackground: "var(--hj-menu-item-bg)",
|
|
4157
|
+
itemBackgroundHover: "var(--hj-menu-item-bg-hover)",
|
|
4158
|
+
itemBackgroundActive: "var(--hj-menu-item-bg-active)",
|
|
4159
|
+
itemForeground: "var(--hj-menu-item-fg)",
|
|
4160
|
+
itemForegroundActive: "var(--hj-menu-item-fg-active)",
|
|
4161
|
+
itemMuted: "var(--hj-menu-item-muted)",
|
|
4162
|
+
avatarBackground: "var(--hj-menu-avatar-bg)",
|
|
4163
|
+
avatarForeground: "var(--hj-menu-avatar-fg)",
|
|
4164
|
+
divider: "var(--hj-menu-divider)"
|
|
4165
|
+
},
|
|
4166
|
+
tabs: {
|
|
4167
|
+
lineForeground: "var(--hj-tabs-line-fg)",
|
|
4168
|
+
lineForegroundHover: "var(--hj-tabs-line-fg-hover)",
|
|
4169
|
+
lineForegroundActive: "var(--hj-tabs-line-fg-active)",
|
|
4170
|
+
lineInk: "var(--hj-tabs-line-ink)",
|
|
4171
|
+
cardBackground: "var(--hj-tabs-card-bg)",
|
|
4172
|
+
cardBackgroundHover: "var(--hj-tabs-card-bg-hover)",
|
|
4173
|
+
cardBackgroundActive: "var(--hj-tabs-card-bg-active)",
|
|
4174
|
+
cardForeground: "var(--hj-tabs-card-fg)",
|
|
4175
|
+
cardForegroundActive: "var(--hj-tabs-card-fg-active)",
|
|
4176
|
+
boxedBackground: "var(--hj-tabs-boxed-bg)",
|
|
4177
|
+
boxedBorder: "var(--hj-tabs-boxed-border)",
|
|
4178
|
+
boxedItemBorder: "var(--hj-tabs-boxed-item-border)",
|
|
4179
|
+
boxedForeground: "var(--hj-tabs-boxed-fg)",
|
|
4180
|
+
boxedForegroundHover: "var(--hj-tabs-boxed-fg-hover)",
|
|
4181
|
+
boxedForegroundActive: "var(--hj-tabs-boxed-fg-active)",
|
|
4182
|
+
boxedIndicatorBackground: "var(--hj-tabs-boxed-indicator-bg)",
|
|
4183
|
+
boxedIndicatorBorder: "var(--hj-tabs-boxed-indicator-border)",
|
|
4184
|
+
boxedIndicatorShadow: "var(--hj-tabs-boxed-indicator-shadow)"
|
|
4185
|
+
},
|
|
4186
|
+
shadow: {
|
|
4187
|
+
sm: "var(--hj-shadow-sm)",
|
|
4188
|
+
md: "var(--hj-shadow-md)",
|
|
4189
|
+
lg: "var(--hj-shadow-lg)"
|
|
4190
|
+
},
|
|
4191
|
+
spacing: {
|
|
4192
|
+
xs: "var(--hj-spacing-xs)",
|
|
4193
|
+
sm: "var(--hj-spacing-sm)",
|
|
4194
|
+
md: "var(--hj-spacing-md)",
|
|
4195
|
+
lg: "var(--hj-spacing-lg)",
|
|
4196
|
+
xl: "var(--hj-spacing-xl)"
|
|
4197
|
+
},
|
|
4198
|
+
zIndex: {
|
|
4199
|
+
dropdown: "var(--hj-z-dropdown)",
|
|
4200
|
+
sticky: "var(--hj-z-sticky)",
|
|
4201
|
+
modal: "var(--hj-z-modal)",
|
|
4202
|
+
toast: "var(--hj-z-toast)"
|
|
4203
|
+
},
|
|
4204
|
+
motion: {
|
|
4205
|
+
durationFast: "var(--hj-motion-duration-fast)",
|
|
4206
|
+
durationNormal: "var(--hj-motion-duration-normal)",
|
|
4207
|
+
durationSlow: "var(--hj-motion-duration-slow)",
|
|
4208
|
+
easeIn: "var(--hj-motion-ease-in)",
|
|
4209
|
+
easeOut: "var(--hj-motion-ease-out)",
|
|
4210
|
+
easeInOut: "var(--hj-motion-ease-in-out)",
|
|
4211
|
+
easeOutCirc: "var(--hj-motion-ease-out-circ)",
|
|
4212
|
+
easeInOutCirc: "var(--hj-motion-ease-in-out-circ)",
|
|
4213
|
+
deadline: "var(--hj-motion-deadline)"
|
|
4214
|
+
}
|
|
4215
|
+
};
|
|
4216
|
+
function cssVar(name, fallback) {
|
|
4217
|
+
return fallback ? `var(${name}, ${fallback})` : `var(${name})`;
|
|
4218
|
+
}
|
|
4219
|
+
|
|
4220
|
+
// src/index.ts
|
|
4221
|
+
var uiPackage = {
|
|
4222
|
+
package: "@996-design/996-ui",
|
|
4223
|
+
upstream: "antd@6.5.1",
|
|
4224
|
+
upstreamCommit: "46bfeb5c667bf701eb6941b740c96f0fdac9325b",
|
|
4225
|
+
componentPolicy: "exact-upstream-behavior-with-996ux-style-layer"
|
|
4226
|
+
};
|
|
4227
|
+
|
|
4228
|
+
//# debugId=518FAAD2754E7FA764756E2164756E21
|