@seclab-dev/react 0.1.0-alpha.1

package/dist/index.js

@@ -0,0 +1,1134 @@
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { getIcon as s } from "@seclab-dev/icons";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
+//#region src/components/SecLabIcon/SecLabIcon.tsx
+var d = ({ name: e = "fallback", namespace: t = "common", size: n = 24, label: r = "", decorative: a = !0, className: o = "", style: l, ...u }) => {
+	let d = i(() => {
+		let t = (e ?? "").trim().toLowerCase();
+		return /^[a-z0-9-]+$/.test(t) ? t : "fallback";
+	}, [e]), f = i(() => s(d, t), [d, t]), p = {
+		"--sl-icon-size": i(() => typeof n == "number" ? `${n}px` : n, [n]),
+		...l
+	};
+	return /* @__PURE__ */ c("span", {
+		className: `sl-icon ${o}`.trim(),
+		style: p,
+		"aria-hidden": a ? "true" : void 0,
+		role: a ? void 0 : "img",
+		"aria-label": a ? void 0 : r || d,
+		dangerouslySetInnerHTML: { __html: f },
+		...u
+	});
+}, f = ({ type: e = "secondary", size: t = "default", disabled: n = !1, loading: r = !1, onClick: i, className: a = "", children: o, ...s }) => {
+	let u = (e) => {
+		n || r || i?.(e);
+	}, d = n || r;
+	return /* @__PURE__ */ l("button", {
+		className: `sl-button sl-button--${e} sl-button--${t} ${r ? "is-loading" : ""} ${a}`.trim(),
+		disabled: d,
+		type: "button",
+		onClick: u,
+		...s,
+		children: [r && /* @__PURE__ */ c("span", {
+			className: "sl-button-loading-icon",
+			children: /* @__PURE__ */ c("svg", {
+				className: "sl-spinner",
+				viewBox: "0 0 50 50",
+				children: /* @__PURE__ */ c("circle", {
+					className: "path",
+					cx: "25",
+					cy: "25",
+					r: "20",
+					fill: "none",
+					strokeWidth: "5"
+				})
+			})
+		}), /* @__PURE__ */ c("span", {
+			className: "sl-button-content",
+			children: o
+		})]
+	});
+}, p = ({ value: e, onChange: t, activeText: n = "", disabled: r = !1, className: i = "", ...a }) => /* @__PURE__ */ l("div", {
+	className: `sl-switch ${e ? "is-active" : ""} ${r ? "is-disabled" : ""} ${i}`.trim(),
+	onClick: () => {
+		r || t?.(!e);
+	},
+	...a,
+	children: [/* @__PURE__ */ c("div", {
+		className: "sl-switch-track",
+		children: /* @__PURE__ */ c("div", { className: "sl-switch-handle" })
+	}), n && /* @__PURE__ */ c("span", {
+		className: "sl-switch-label",
+		children: n
+	})]
+}), m = ({ title: e, description: t, type: n = "info", showIcon: r = !1, closable: i = !1, onClose: a, className: s = "", children: u, ...f }) => {
+	let [p, m] = o(!0);
+	if (!p) return null;
+	let h = (e) => {
+		m(!1), a?.();
+	}, g = (e) => e === "success" ? "success" : e === "error" ? "error" : e === "warning" ? "warning" : "info";
+	return /* @__PURE__ */ l("div", {
+		className: `sl-alert is-${n} ${s}`.trim(),
+		role: "alert",
+		...f,
+		children: [
+			r && /* @__PURE__ */ c("div", {
+				className: "sl-alert-icon",
+				children: /* @__PURE__ */ c(d, {
+					name: g(n),
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "sl-alert-content",
+				children: [e && /* @__PURE__ */ c("h4", {
+					className: "sl-alert-title",
+					children: e
+				}), /* @__PURE__ */ c("div", {
+					className: "sl-alert-description",
+					children: u || t
+				})]
+			}),
+			i && /* @__PURE__ */ c("button", {
+				type: "button",
+				className: "sl-alert-close",
+				onClick: h,
+				children: "×"
+			})
+		]
+	});
+}, h = ({ shadow: e = "always", contentStyle: t, contentRole: n = "content", fullHeight: r = !1, header: i, className: a = "", children: o, ...s }) => /* @__PURE__ */ l("div", {
+	className: `sl-card is-shadow-${e} ${r ? "is-full-height" : ""} ${a}`.trim(),
+	...s,
+	children: [i && /* @__PURE__ */ c("div", {
+		className: "sl-card-header",
+		children: i
+	}), /* @__PURE__ */ c("div", {
+		className: `${n === "header" ? "sl-card-header" : "sl-card-content"} ${r ? "is-full-height" : ""}`.trim(),
+		style: t,
+		children: o
+	})]
+}), g = ({ checked: e = !1, disabled: t = !1, onChange: n, className: r = "", children: i, ...a }) => {
+	let o = (e) => {
+		t || n?.(e.target.checked);
+	};
+	return /* @__PURE__ */ l("label", {
+		className: `sl-checkbox ${e ? "is-active" : ""} ${t ? "is-disabled" : ""} ${r}`.trim(),
+		...a,
+		children: [/* @__PURE__ */ l("span", {
+			className: "sl-checkbox-input",
+			children: [/* @__PURE__ */ c("input", {
+				type: "checkbox",
+				className: "sl-checkbox-original",
+				checked: e,
+				disabled: t,
+				onChange: o
+			}), /* @__PURE__ */ c("span", { className: "sl-checkbox-inner" })]
+		}), i && /* @__PURE__ */ c("span", {
+			className: "sl-checkbox-label",
+			children: i
+		})]
+	});
+}, _ = ({ description: e = "暂无数据", icon: t = "empty", iconNode: n, extra: r, className: i = "", children: a, ...o }) => /* @__PURE__ */ l("div", {
+	className: `sl-empty ${i}`.trim(),
+	...o,
+	children: [
+		/* @__PURE__ */ c("div", {
+			className: "sl-empty-icon",
+			children: n || /* @__PURE__ */ c(d, {
+				name: t,
+				size: 48
+			})
+		}),
+		/* @__PURE__ */ c("p", {
+			className: "sl-empty-description",
+			children: a || e
+		}),
+		r && /* @__PURE__ */ c("div", {
+			className: "sl-empty-extra",
+			children: r
+		})
+	]
+}), v = ({ label: e, required: t = !1, hint: n, className: r = "", children: i, ...a }) => /* @__PURE__ */ l("div", {
+	className: `sl-form-item ${r}`.trim(),
+	...a,
+	children: [e && /* @__PURE__ */ l("label", {
+		className: "sl-form-item-label",
+		children: [t && /* @__PURE__ */ c("span", {
+			className: "sl-form-item-required",
+			children: "*"
+		}), e]
+	}), /* @__PURE__ */ l("div", {
+		className: "sl-form-item-content",
+		children: [i, n && /* @__PURE__ */ c("div", {
+			className: "sl-form-item-hint",
+			children: n
+		})]
+	})]
+}), y = ({ loading: e, text: t, cover: n = !1, className: r = "", children: i, ...a }) => /* @__PURE__ */ l("div", {
+	className: `sl-loading-host ${n ? "is-cover" : ""} ${e ? "is-loading" : ""} ${r}`.trim(),
+	...a,
+	children: [i, e && /* @__PURE__ */ c("div", {
+		className: "sl-loading-mask",
+		children: /* @__PURE__ */ l("div", {
+			className: "sl-loading-spinner",
+			children: [/* @__PURE__ */ c("svg", {
+				className: "sl-spinner",
+				viewBox: "0 0 50 50",
+				children: /* @__PURE__ */ c("circle", {
+					className: "path",
+					cx: "25",
+					cy: "25",
+					r: "20",
+					fill: "none",
+					strokeWidth: "5"
+				})
+			}), t && /* @__PURE__ */ c("p", {
+				className: "sl-loading-text",
+				children: t
+			})]
+		})
+	})]
+}), b = ({ type: e = "default", effect: t = "light", className: n = "", children: r, ...i }) => /* @__PURE__ */ c("span", {
+	className: `sl-tag sl-tag--${e} sl-tag--${t} ${n}`.trim(),
+	...i,
+	children: r
+}), x = e("/"), S = ({ separator: e = "/", className: t = "", children: n, ...r }) => /* @__PURE__ */ c(x.Provider, {
+	value: e,
+	children: /* @__PURE__ */ c("nav", {
+		className: `sl-breadcrumb ${t}`.trim(),
+		"aria-label": "Breadcrumb",
+		...r,
+		children: n
+	})
+}), C = ({ className: e = "", children: t, ...r }) => {
+	let i = n(x);
+	return /* @__PURE__ */ l("span", {
+		className: `sl-breadcrumb-item ${e}`.trim(),
+		...r,
+		children: [/* @__PURE__ */ c("span", {
+			className: "sl-breadcrumb-label",
+			children: t
+		}), /* @__PURE__ */ c("span", {
+			className: "sl-breadcrumb-separator",
+			role: "presentation",
+			children: i
+		})]
+	});
+}, w = ({ value: e = "", type: t = "text", placeholder: n, disabled: r = !1, readonly: i, readOnly: a, maxlength: s, maxLength: u, rows: f = 3, showPassword: p = !1, min: m, max: h, step: g, autocomplete: _, autoComplete: v, onChange: y, onFocus: b, onBlur: x, className: S = "", ...C }) => {
+	let [w, T] = o(!1), E = (e) => {
+		y?.(e.target.value);
+	}, D = () => {
+		T((e) => !e);
+	}, O = i ?? a, k = s ?? u, A = _ ?? v, j = t === "password" && w ? "text" : t, M = e == null ? "" : String(e);
+	return /* @__PURE__ */ c("div", {
+		className: `sl-input-wrapper is-${t} ${r ? "is-disabled" : ""} ${S}`.trim(),
+		...C,
+		children: t === "textarea" ? /* @__PURE__ */ c("textarea", {
+			className: "sl-textarea",
+			value: M,
+			placeholder: n,
+			disabled: r,
+			readOnly: O,
+			maxLength: k,
+			rows: f,
+			onChange: E,
+			onFocus: b,
+			onBlur: x
+		}) : /* @__PURE__ */ l("div", {
+			className: "sl-input-inner-wrapper",
+			children: [/* @__PURE__ */ c("input", {
+				className: "sl-input",
+				type: j,
+				value: M,
+				placeholder: n,
+				disabled: r,
+				readOnly: O,
+				maxLength: k,
+				min: m,
+				max: h,
+				step: g,
+				autoComplete: A,
+				onChange: E,
+				onFocus: b,
+				onBlur: x
+			}), p && t === "password" && /* @__PURE__ */ c("button", {
+				type: "button",
+				className: "sl-input-password-toggle",
+				onClick: D,
+				children: /* @__PURE__ */ c(d, {
+					name: w ? "eye-off" : "lock",
+					size: 16
+				})
+			})]
+		})
+	});
+}, T = ({ value: e = "", items: t = [], onSelect: n, onChange: r, className: i = "", ...a }) => {
+	let o = (e) => {
+		r?.(e), n?.(e);
+	};
+	return /* @__PURE__ */ c("nav", {
+		className: `sl-menu ${i}`.trim(),
+		role: "menu",
+		...a,
+		children: t.map((t) => /* @__PURE__ */ l("div", {
+			className: "sl-menu-group",
+			children: [/* @__PURE__ */ c("div", {
+				className: "sl-menu-group-title",
+				children: t.label
+			}), /* @__PURE__ */ c("ul", {
+				className: "sl-menu-items",
+				children: t.children.map((t) => /* @__PURE__ */ c("li", {
+					className: `sl-menu-item ${e === t.key ? "is-active" : ""}`.trim(),
+					role: "menuitem",
+					onClick: () => o(t.key),
+					children: /* @__PURE__ */ c("span", {
+						className: "sl-menu-item-label",
+						children: t.label
+					})
+				}, t.key))
+			})]
+		}, t.key))
+	});
+}, E = ({ value: e = "", tabs: t = [], onTabChange: n, onChange: r, className: i = "", ...a }) => {
+	let o = (e) => {
+		e.disabled || (r?.(e.name), n?.(e.name));
+	};
+	return /* @__PURE__ */ c("div", {
+		className: `sl-tabs ${i}`.trim(),
+		...a,
+		children: /* @__PURE__ */ c("div", {
+			className: "sl-tabs-nav",
+			role: "tablist",
+			children: t.map((t) => /* @__PURE__ */ c("div", {
+				className: `sl-tabs-item ${e === t.name ? "is-active" : ""} ${t.disabled ? "is-disabled" : ""}`.trim(),
+				role: "tab",
+				"aria-selected": e === t.name,
+				onClick: () => o(t),
+				children: t.label
+			}, t.name))
+		})
+	});
+}, D = ({ title: e, items: t = [], data: n, column: r = 1, border: i = !1, slots: a, className: o = "", ...s }) => {
+	let u = (e) => {
+		if (e.render) return e.render(e, n);
+		if (e.slot && a && a[e.slot]) return a[e.slot](e, n);
+		if (e.value !== void 0 && e.value !== null) return e.value;
+		if (n) {
+			if (e.label && n[e.label] !== void 0) {
+				let t = n[e.label];
+				return typeof t == "boolean" ? String(t) : t;
+			}
+			if (e.slot && n[e.slot] !== void 0) {
+				let t = n[e.slot];
+				return typeof t == "boolean" ? String(t) : t;
+			}
+		}
+		return "--";
+	};
+	return /* @__PURE__ */ l("div", {
+		className: `sl-descriptions ${i ? "is-border" : ""} ${o}`.trim(),
+		...s,
+		children: [e && /* @__PURE__ */ c("div", {
+			className: "sl-descriptions-title",
+			children: e
+		}), /* @__PURE__ */ c("div", {
+			className: "sl-descriptions-grid",
+			style: { gridTemplateColumns: `repeat(${r}, 1fr)` },
+			children: t.map((e, t) => /* @__PURE__ */ l("div", {
+				className: "sl-descriptions-item",
+				style: { gridColumn: `span ${e.span || 1}` },
+				children: [/* @__PURE__ */ c("div", {
+					className: "sl-descriptions-label",
+					children: e.label
+				}), /* @__PURE__ */ c("div", {
+					className: "sl-descriptions-content",
+					children: u(e)
+				})]
+			}, t))
+		})]
+	});
+}, O = ({ text: e, position: n = "top", delay: i = 200, children: s, disabled: d = !1, className: f = "", ...p }) => {
+	let [m, h] = o(!1), [g, _] = o(!1), [v, y] = o({}), b = a(null), x = a(null), S = a(null), C = a(null), w = t((e) => {
+		if (!b.current || !e) return;
+		let t = b.current.getBoundingClientRect(), r = e.getBoundingClientRect(), i = window.innerWidth, a = 0, o = 0, s = t.top + t.height / 2, c = t.left + t.width / 2;
+		switch (n) {
+			case "top":
+			case "bottom":
+				a = n === "top" ? t.top - r.height - 8 : t.bottom + 8, o = c - r.width / 2, o < 5 && (o = 5);
+				let e = o + r.width, l = i - 5;
+				e > l && (o = Math.max(5, o - (e - l)));
+				break;
+			case "left":
+			case "right":
+				a = s - r.height / 2, o = n === "left" ? t.left - r.width - 8 : t.right + 8;
+				break;
+		}
+		y({
+			top: `${a + window.scrollY}px`,
+			left: `${o + window.scrollX}px`
+		});
+	}, [n]), T = t((e) => {
+		x.current = e, e && w(e);
+	}, [w]);
+	return r(() => {
+		if (!g) return;
+		let e = () => {
+			x.current && w(x.current);
+		};
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, { passive: !0 }), () => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e);
+		};
+	}, [g, w]), r(() => () => {
+		S.current && window.clearTimeout(S.current), C.current && window.clearTimeout(C.current);
+	}, []), /* @__PURE__ */ l("div", {
+		className: `sl-tooltip-wrapper ${f}`.trim(),
+		ref: b,
+		onMouseEnter: () => {
+			d || (S.current && window.clearTimeout(S.current), C.current && window.clearTimeout(C.current), m ? _(!0) : S.current = window.setTimeout(() => {
+				h(!0), S.current = window.setTimeout(() => {
+					_(!0);
+				}, 20);
+			}, i));
+		},
+		onMouseLeave: () => {
+			S.current && window.clearTimeout(S.current), C.current && window.clearTimeout(C.current), _(!1), C.current = window.setTimeout(() => {
+				h(!1);
+			}, 200);
+		},
+		...p,
+		children: [s, m && e && !d && typeof document < "u" && u(/* @__PURE__ */ l("div", {
+			ref: T,
+			className: `sl-tooltip-content ${g ? "is-visible" : ""}`.trim(),
+			style: v,
+			"data-position": n,
+			children: [e, /* @__PURE__ */ c("span", {
+				className: "sl-tooltip-arrow",
+				"data-position": n
+			})]
+		}), document.body)]
+	});
+}, k = ({ toasts: e = [], onClose: t, className: n = "", ...r }) => {
+	let i = (e) => e === "success" ? "success" : e === "error" ? "error" : e === "warning" ? "warning" : "info", a = (e, n) => {
+		e.stopPropagation(), t?.(n);
+	};
+	return typeof document > "u" ? null : u(/* @__PURE__ */ c("div", {
+		className: `sl-toast-container ${n}`.trim(),
+		...r,
+		children: e.map((e) => /* @__PURE__ */ l("div", {
+			className: `sl-toast-item is-${e.type}`,
+			role: "alert",
+			onClick: () => t?.(e.id),
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: "sl-toast-icon",
+					children: /* @__PURE__ */ c(d, {
+						name: i(e.type),
+						size: 20
+					})
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "sl-toast-content",
+					children: [/* @__PURE__ */ c("h4", {
+						className: "sl-toast-title",
+						children: e.title
+					}), /* @__PURE__ */ c("p", {
+						className: "sl-toast-message",
+						children: e.message
+					})]
+				}),
+				/* @__PURE__ */ c("button", {
+					className: "sl-toast-close",
+					onClick: (t) => a(t, e.id),
+					children: "×"
+				})
+			]
+		}, e.id))
+	}), document.body);
+}, A = ({ visible: e, title: t, width: n = "500px", closeOnClickOverlay: r = !0, zIndex: i = "var(--sdl-z-index-modal)", onClose: a, footer: o, className: s = "", style: d, children: f, ...p }) => {
+	if (!e) return null;
+	let m = (e) => {
+		r && e.target === e.currentTarget && a?.();
+	}, h = {
+		zIndex: i,
+		...d
+	};
+	return u(/* @__PURE__ */ c("div", {
+		className: `sl-dialog-overlay ${s}`.trim(),
+		style: h,
+		onClick: m,
+		role: "presentation",
+		...p,
+		children: /* @__PURE__ */ l("div", {
+			className: "sl-dialog-card",
+			style: {
+				width: n,
+				maxWidth: "95%"
+			},
+			role: "dialog",
+			"aria-modal": "true",
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "sl-dialog-header",
+					"data-slot": "header",
+					children: [/* @__PURE__ */ c("span", {
+						className: "sl-dialog-title",
+						children: t
+					}), /* @__PURE__ */ c("button", {
+						type: "button",
+						className: "sl-dialog-close-btn",
+						onClick: a,
+						"aria-label": "Close dialog",
+						children: "×"
+					})]
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "sl-dialog-body",
+					children: f
+				}),
+				o && /* @__PURE__ */ c("div", {
+					className: "sl-dialog-footer",
+					"data-slot": "footer",
+					children: o
+				})
+			]
+		})
+	}), document.body);
+}, j = ({ visible: e, title: t = "", width: n = "420px", closeOnOverlay: r = !0, onClose: i, footer: a, className: o = "", style: s, children: d, ...f }) => {
+	if (!e) return null;
+	let p = (e) => {
+		r && e.target === e.currentTarget && i?.();
+	}, m = {
+		width: n,
+		...s
+	};
+	return u(/* @__PURE__ */ c("div", {
+		className: `sl-drawer-overlay ${o}`.trim(),
+		onClick: p,
+		role: "presentation",
+		...f,
+		children: /* @__PURE__ */ l("div", {
+			className: "sl-drawer-panel",
+			style: m,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": t || void 0,
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "sl-drawer-header",
+					"data-slot": "header",
+					children: [/* @__PURE__ */ c("h3", {
+						className: "sl-drawer-title",
+						children: t
+					}), /* @__PURE__ */ c("button", {
+						type: "button",
+						className: "sl-drawer-close-btn",
+						onClick: i,
+						"aria-label": "Close drawer",
+						children: "×"
+					})]
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "sl-drawer-body",
+					children: d
+				}),
+				a && /* @__PURE__ */ c("div", {
+					className: "sl-drawer-footer",
+					"data-slot": "footer",
+					children: a
+				})
+			]
+		})
+	}), document.body);
+}, M = ({ visible: e, title: t, message: n, confirmText: r = "确定", cancelText: i = "取消", type: a = "primary", onConfirm: o, onCancel: s, className: d = "", ...f }) => e ? u(/* @__PURE__ */ c("div", {
+	className: `sl-modal-overlay ${d}`.trim(),
+	onClick: (e) => {
+		e.target === e.currentTarget && s?.();
+	},
+	role: "presentation",
+	...f,
+	children: /* @__PURE__ */ l("div", {
+		className: "sl-modal-card",
+		role: "alertdialog",
+		"aria-modal": "true",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "sl-modal-header",
+				"data-slot": "header",
+				children: /* @__PURE__ */ c("h3", {
+					className: "sl-modal-title",
+					children: t
+				})
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "sl-modal-body",
+				children: /* @__PURE__ */ c("p", {
+					className: "sl-modal-message",
+					children: n
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "sl-modal-footer",
+				"data-slot": "footer",
+				children: [/* @__PURE__ */ c("button", {
+					type: "button",
+					className: "sl-modal-btn is-cancel",
+					onClick: s,
+					children: i
+				}), /* @__PURE__ */ c("button", {
+					type: "button",
+					className: `sl-modal-btn is-${a}`,
+					onClick: o,
+					children: r
+				})]
+			})
+		]
+	})
+}), document.body) : null, N = ({ currentPage: e, totalPages: t, maxVisibleButtons: n = 5, onPageChange: r, className: a = "", ...o }) => {
+	let s = i(() => {
+		let r = t, i = e, a = n, o = [];
+		if (r <= a) for (let e = 1; e <= r; e++) o.push(e);
+		else {
+			let e = Math.floor(a / 2), t = Math.max(1, i - e), n = Math.min(r, i + e);
+			i - t < e && (n += e - (i - t)), n - i < e && (t -= e - (n - i)), t = Math.max(1, t), n = Math.min(r, n), t > 1 && (o.push(1), t > 2 && o.push("..."));
+			for (let e = t; e <= n; e++) o.push(e);
+			n < r && (n < r - 1 && o.push("..."), o.push(r));
+		}
+		return o;
+	}, [
+		e,
+		t,
+		n
+	]);
+	if (t <= 1) return null;
+	let u = (t) => {
+		typeof t == "number" && t !== e && r?.(t);
+	};
+	return /* @__PURE__ */ l("div", {
+		className: `sl-pagination ${a}`.trim(),
+		...o,
+		children: [
+			/* @__PURE__ */ c("button", {
+				type: "button",
+				className: "sl-pagination-btn",
+				onClick: () => u(e - 1),
+				disabled: e === 1,
+				children: "<"
+			}),
+			s.map((t, n) => {
+				let r = t === e, i = typeof t == "string";
+				return /* @__PURE__ */ c("button", {
+					type: "button",
+					className: `sl-pagination-btn ${r ? "active" : ""} ${i ? "ellipsis" : ""}`.trim(),
+					onClick: () => u(t),
+					disabled: i,
+					children: t
+				}, n);
+			}),
+			/* @__PURE__ */ c("button", {
+				type: "button",
+				className: "sl-pagination-btn",
+				onClick: () => u(e + 1),
+				disabled: e === t,
+				children: ">"
+			})
+		]
+	});
+}, P = ({ value: e, options: n, placeholder: s = "请选择", disabled: d = !1, onChange: f, onOptionDisabled: p, className: m = "", ...h }) => {
+	let [g, _] = o(!1), [v, y] = o({}), b = a(null), x = i(() => {
+		let t = n.find((t) => t.value === e);
+		return t ? t.label : s;
+	}, [
+		e,
+		n,
+		s
+	]), S = t(() => {
+		if (!b.current || !g) return;
+		let e = b.current.getBoundingClientRect();
+		y({
+			minWidth: `${e.width}px`,
+			top: `${e.bottom + window.scrollY + 4}px`,
+			left: `${e.left + window.scrollX}px`,
+			position: "absolute"
+		});
+	}, [g]);
+	r(() => {
+		g && S();
+	}, [g, S]), r(() => {
+		let e = (e) => {
+			b.current && !b.current.contains(e.target) && _(!1);
+		};
+		return document.addEventListener("click", e), window.addEventListener("resize", S), window.addEventListener("scroll", S, !0), () => {
+			document.removeEventListener("click", e), window.removeEventListener("resize", S), window.removeEventListener("scroll", S, !0);
+		};
+	}, [S]);
+	let C = () => {
+		d || _((e) => !e);
+	}, w = (e) => {
+		if (!d) {
+			if (e.disabled) {
+				p?.(e);
+				return;
+			}
+			f?.(e.value), _(!1);
+		}
+	};
+	return /* @__PURE__ */ l("div", {
+		className: `sl-select ${g ? "is-open" : ""} ${d ? "is-disabled" : ""} ${m}`.trim(),
+		ref: b,
+		...h,
+		children: [/* @__PURE__ */ l("div", {
+			className: "sl-select-trigger",
+			onClick: C,
+			children: [/* @__PURE__ */ c("span", {
+				className: "sl-select-label",
+				children: x
+			}), /* @__PURE__ */ c("span", { className: "sl-select-arrow" })]
+		}), g && u(/* @__PURE__ */ c("ul", {
+			className: "sl-select-options",
+			style: v,
+			children: n.map((t) => /* @__PURE__ */ c("li", {
+				className: `sl-select-option ${e === t.value ? "selected" : ""} ${t.disabled ? "disabled" : ""}`.trim(),
+				title: t.hint,
+				onClick: () => w(t),
+				children: t.label
+			}, t.value))
+		}), document.body)]
+	});
+}, F = ({ actions: e, label: n = "操作", disabled: i = !1, defaultIcon: s = "settings", className: f = "", ...p }) => {
+	let [m, h] = o(!1), [g, _] = o({}), v = a(null), y = a(null), b = t(() => {
+		if (!v.current || !m) return;
+		let e = v.current.getBoundingClientRect();
+		_({
+			top: `${e.bottom + window.scrollY + 4}px`,
+			left: `${e.right + window.scrollX}px`,
+			transform: "translateX(-100%)",
+			position: "absolute"
+		});
+	}, [m]);
+	r(() => {
+		m && b();
+	}, [m, b]), r(() => {
+		let e = (e) => {
+			let t = e.target;
+			v.current && !v.current.contains(t) && (!y.current || !y.current.contains(t)) && h(!1);
+		};
+		return document.addEventListener("click", e), window.addEventListener("resize", b), window.addEventListener("scroll", b, !0), () => {
+			document.removeEventListener("click", e), window.removeEventListener("resize", b), window.removeEventListener("scroll", b, !0);
+		};
+	}, [b]);
+	let x = (e) => {
+		e.stopPropagation(), !i && h((e) => !e);
+	}, S = (e, t) => {
+		t.stopPropagation(), !e.disabled && (e.handler(), h(!1));
+	};
+	return /* @__PURE__ */ l("div", {
+		className: `sl-action-menu ${f}`.trim(),
+		ref: v,
+		...p,
+		children: [/* @__PURE__ */ l("button", {
+			type: "button",
+			className: "sl-action-btn",
+			disabled: i,
+			onClick: x,
+			children: [/* @__PURE__ */ c(d, {
+				className: "sl-action-btn-icon",
+				name: "settings",
+				size: 16
+			}), /* @__PURE__ */ c("span", {
+				className: "sl-action-btn-text",
+				children: n
+			})]
+		}), m && u(/* @__PURE__ */ c("div", {
+			ref: y,
+			className: "sl-dropdown",
+			style: g,
+			onClick: (e) => e.stopPropagation(),
+			children: e.map((e, t) => {
+				let n = (e.className || e.class || "").trim(), r = e.disabled, i = /* @__PURE__ */ l("button", {
+					type: "button",
+					className: `sl-dropdown-item ${n} ${r ? "is-disabled" : ""}`.trim(),
+					disabled: r,
+					onClick: (t) => S(e, t),
+					children: [/* @__PURE__ */ c(d, {
+						className: "sl-dropdown-icon",
+						name: e.icon || s,
+						size: 16
+					}), /* @__PURE__ */ c("span", {
+						className: "sl-dropdown-label",
+						children: e.label
+					})]
+				});
+				return /* @__PURE__ */ c(O, {
+					text: e.tooltip || "",
+					disabled: !e.tooltip,
+					position: "right",
+					className: "sl-dropdown-tooltip-wrapper",
+					children: i
+				}, t);
+			})
+		}), document.body)]
+	});
+}, I = (e) => {
+	if (e !== void 0) return typeof e == "number" ? `${e}px` : e;
+}, L = (e) => ({
+	width: I(e.width),
+	minWidth: I(e.minWidth),
+	textAlign: e.headerAlign || e.align || "center"
+}), R = (e) => ({
+	width: I(e.width),
+	minWidth: I(e.minWidth),
+	textAlign: e.align || "left"
+});
+function z({ data: e, columns: t, border: n = !1, emptyText: r = "暂无数据", slots: i, headerSlots: a, emptySlot: o, onRowMouseEnter: s, onRowContextMenu: u, className: d = "", ...f }) {
+	return /* @__PURE__ */ c("div", {
+		className: `sl-table-container ${n ? "sl-table-border" : ""} ${d}`.trim(),
+		"data-native-context-menu": "true",
+		...f,
+		children: /* @__PURE__ */ c("div", {
+			className: "sl-table-wrapper",
+			children: /* @__PURE__ */ l("table", {
+				className: "sl-table",
+				children: [/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ c("tr", {
+					className: "sl-table-header-row",
+					children: t.map((e, t) => /* @__PURE__ */ c("th", {
+						className: `sl-table-header-cell ${e.fixed ? `is-fixed-${e.fixed}` : ""}`.trim(),
+						style: L(e),
+						children: /* @__PURE__ */ c("div", {
+							className: "sl-cell",
+							children: e.renderHeader ? e.renderHeader(e, t) : e.headerSlot && a && a[e.headerSlot] ? a[e.headerSlot]({
+								column: e,
+								index: t
+							}) : e.label
+						})
+					}, t))
+				}) }), /* @__PURE__ */ c("tbody", { children: e.length > 0 ? e.map((e, n) => /* @__PURE__ */ c("tr", {
+					className: "sl-table-row",
+					onMouseEnter: (t) => s?.(e, t, n),
+					onContextMenu: (t) => u?.(e, t, n),
+					children: t.map((t, r) => /* @__PURE__ */ c("td", {
+						className: `sl-table-cell ${t.fixed ? `is-fixed-${t.fixed}` : ""}`.trim(),
+						style: R(t),
+						children: /* @__PURE__ */ c("div", {
+							className: "sl-cell",
+							children: t.renderCell ? t.renderCell(e, t, n) : t.slot && i && i[t.slot] ? i[t.slot]({
+								row: e,
+								column: t,
+								index: n
+							}) : t.prop ? String(e[t.prop] ?? "") : ""
+						})
+					}, r))
+				}, n)) : /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", {
+					colSpan: t.length,
+					className: "sl-table-empty-cell",
+					children: o || /* @__PURE__ */ c("div", {
+						className: "sl-table-empty",
+						children: r
+					})
+				}) }) })]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/SecLabDateTimeRangePicker/SecLabDateTimeRangePicker.tsx
+function ee(e) {
+	return e ? new Date(e) : /* @__PURE__ */ new Date();
+}
+function B(e) {
+	return new Date(e.getFullYear(), e.getMonth(), 1, 0, 0, 0, 0);
+}
+function V(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate(), 0, 0, 0, 0);
+}
+function te(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate(), 23, 59, 59, 999);
+}
+function H(e, t) {
+	let n = new Date(e);
+	return n.setDate(n.getDate() + t), n;
+}
+function U(e) {
+	let t = String(e.getMonth() + 1).padStart(2, "0"), n = String(e.getDate()).padStart(2, "0");
+	return `${e.getFullYear()}-${t}-${n}`;
+}
+function W(e) {
+	if (!e) return "--";
+	let t = new Date(e);
+	return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")} ${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
+}
+function G(e) {
+	let t = e.startAt ?? null, n = e.endAt ?? null;
+	return t !== null && n !== null && t > n ? {
+		startAt: n,
+		endAt: t
+	} : {
+		startAt: t,
+		endAt: n
+	};
+}
+var ne = [
+	{
+		label: "最近 15 分钟",
+		value: "15m"
+	},
+	{
+		label: "最近 1 小时",
+		value: "1h"
+	},
+	{
+		label: "最近 24 小时",
+		value: "24h"
+	},
+	{
+		label: "最近 7 天",
+		value: "7d"
+	},
+	{
+		label: "今天",
+		value: "today"
+	}
+], K = ({ value: e = {
+	startAt: null,
+	endAt: null
+}, placeholder: n = "请选择时间范围", startLabel: s = "开始时间", endLabel: d = "结束时间", shortcutsLabel: f = "常用范围", calendarLabel: p = "选择日期", timeLabel: m = "选择时间", clearLabel: h = "清空", confirmLabel: g = "确定", cancelLabel: _ = "取消", locale: v = "zh", weekDays: y = [
+	"日",
+	"一",
+	"二",
+	"三",
+	"四",
+	"五",
+	"六"
+], shortcuts: b = ne, disabled: x = !1, onChange: S, onApply: C, className: w = "", ...T }) => {
+	let E = a(null), D = a(null), [O, k] = o(!1), [A, j] = o("start"), [M, N] = o(() => G(e)), [P, F] = o(() => B(/* @__PURE__ */ new Date())), [I, L] = o({}), R = i(() => Array.from({ length: 24 }, (e, t) => t), []), z = i(() => Array.from({ length: 12 }, (e, t) => t * 5), []), K = i(() => !e.startAt && !e.endAt ? n : `${W(e.startAt)} - ${W(e.endAt)}`, [e, n]), q = i(() => ee(M[A === "start" ? "startAt" : "endAt"]), [M, A]), J = q.getHours(), Y = Math.floor(q.getMinutes() / 5) * 5, re = i(() => P.toLocaleDateString(v === "zh" ? "zh-CN" : "en-US", {
+		year: "numeric",
+		month: "long"
+	}), [P, v]), ie = i(() => {
+		let e = B(P), t = H(e, -e.getDay());
+		return Array.from({ length: 42 }, (e, n) => {
+			let r = H(t, n), i = r.getTime(), a = M.startAt ? V(new Date(M.startAt)).getTime() : null, o = M.endAt ? V(new Date(M.endAt)).getTime() : null, s = a !== null && o !== null ? Math.min(a, o) : null, c = a !== null && o !== null ? Math.max(a, o) : null;
+			return {
+				date: r,
+				key: U(r),
+				label: String(r.getDate()),
+				muted: r.getMonth() !== P.getMonth(),
+				today: U(r) === U(/* @__PURE__ */ new Date()),
+				selectedStart: a === i,
+				selectedEnd: o === i,
+				inRange: s !== null && c !== null && i > s && i < c
+			};
+		});
+	}, [P, M]), X = t(() => {
+		let e = E.current;
+		if (!e) return;
+		let t = e.getBoundingClientRect(), n = Math.min(Math.max(8, t.left), window.innerWidth - 620 - 8), r = Math.min(t.bottom + 8, window.innerHeight - 468);
+		L({
+			width: "620px",
+			left: `${n}px`,
+			top: `${Math.max(8, r)}px`,
+			position: "fixed"
+		});
+	}, []), Z = t(() => {
+		k(!1);
+	}, []), Q = t((e) => {
+		let t = e.target;
+		E.current?.contains(t) || D.current?.contains(t) || Z();
+	}, [Z]), $ = t((e) => {
+		e.key === "Escape" && Z();
+	}, [Z]);
+	r(() => {
+		O || N(G(e));
+	}, [e, O]), r(() => (O && (X(), window.addEventListener("resize", X), window.addEventListener("scroll", X, !0), document.addEventListener("mousedown", Q), document.addEventListener("keydown", $)), () => {
+		window.removeEventListener("resize", X), window.removeEventListener("scroll", X, !0), document.removeEventListener("mousedown", Q), document.removeEventListener("keydown", $);
+	}), [
+		O,
+		X,
+		Q,
+		$
+	]);
+	let ae = () => {
+		if (x) return;
+		let t = G(e);
+		N(t);
+		let n = t.startAt ?? t.endAt ?? Date.now();
+		F(B(new Date(n))), k(!0);
+	}, oe = (e) => {
+		F((t) => new Date(t.getFullYear(), t.getMonth() + e, 1));
+	}, se = (e) => {
+		let t = q, n = new Date(e.getFullYear(), e.getMonth(), e.getDate(), t.getHours(), t.getMinutes(), 0, 0), r = A === "start" ? "startAt" : "endAt";
+		N((e) => G({
+			...e,
+			[r]: n.getTime()
+		}));
+	}, ce = (e, t) => {
+		let n = q, r = new Date(n.getFullYear(), n.getMonth(), n.getDate(), e, t, 0, 0), i = A === "start" ? "startAt" : "endAt";
+		N((e) => G({
+			...e,
+			[i]: r.getTime()
+		}));
+	}, le = (e) => {
+		let t = /* @__PURE__ */ new Date(), n;
+		n = e === "today" ? {
+			startAt: V(t).getTime(),
+			endAt: te(t).getTime()
+		} : {
+			startAt: t.getTime() - {
+				"15m": 900 * 1e3,
+				"1h": 3600 * 1e3,
+				"24h": 1440 * 60 * 1e3,
+				"7d": 10080 * 60 * 1e3
+			}[e],
+			endAt: t.getTime()
+		}, N(n), F(B(new Date(n.startAt ?? Date.now())));
+	}, ue = () => {
+		let e = {
+			startAt: null,
+			endAt: null
+		};
+		N(e), S?.(e), C?.(e), Z();
+	}, de = () => {
+		let e = G(M);
+		S?.(e), C?.(e), Z();
+	};
+	return /* @__PURE__ */ l("div", {
+		className: `sl-date-time-range-picker ${w}`.trim(),
+		"data-ui": "date-time-range-picker",
+		...T,
+		children: [/* @__PURE__ */ c("button", {
+			ref: E,
+			type: "button",
+			className: `range-trigger ${!e.startAt && !e.endAt ? "is-placeholder" : ""}`.trim(),
+			disabled: x,
+			onClick: () => O ? Z() : ae(),
+			children: /* @__PURE__ */ c("span", {
+				className: "trigger-text",
+				children: K
+			})
+		}), O && u(/* @__PURE__ */ l("div", {
+			ref: D,
+			className: "range-panel",
+			style: I,
+			children: [
+				/* @__PURE__ */ l("aside", {
+					className: "shortcut-column",
+					children: [/* @__PURE__ */ c("div", {
+						className: "panel-title",
+						children: f
+					}), b.map((e) => /* @__PURE__ */ c("button", {
+						type: "button",
+						className: "shortcut-button",
+						onClick: () => le(e.value),
+						children: e.label
+					}, e.value))]
+				}),
+				/* @__PURE__ */ l("section", {
+					className: "calendar-column",
+					children: [
+						/* @__PURE__ */ c("div", {
+							className: "panel-title",
+							children: p
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "boundary-switch",
+							children: [/* @__PURE__ */ l("button", {
+								type: "button",
+								className: `boundary-button ${A === "start" ? "is-active" : ""}`.trim(),
+								onClick: () => j("start"),
+								children: [/* @__PURE__ */ c("span", { children: s }), /* @__PURE__ */ c("strong", { children: W(M.startAt) })]
+							}), /* @__PURE__ */ l("button", {
+								type: "button",
+								className: `boundary-button ${A === "end" ? "is-active" : ""}`.trim(),
+								onClick: () => j("end"),
+								children: [/* @__PURE__ */ c("span", { children: d }), /* @__PURE__ */ c("strong", { children: W(M.endAt) })]
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "calendar-header",
+							children: [
+								/* @__PURE__ */ c("button", {
+									type: "button",
+									className: "month-button",
+									onClick: () => oe(-1),
+									children: "‹"
+								}),
+								/* @__PURE__ */ c("span", { children: re }),
+								/* @__PURE__ */ c("button", {
+									type: "button",
+									className: "month-button",
+									onClick: () => oe(1),
+									children: "›"
+								})
+							]
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "week-grid",
+							children: y.map((e) => /* @__PURE__ */ c("span", { children: e }, e))
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "day-grid",
+							children: ie.map((e) => /* @__PURE__ */ c("button", {
+								type: "button",
+								className: `day-button ${e.muted ? "is-muted" : ""} ${e.today ? "is-today" : ""} ${e.selectedStart ? "is-selected-start" : ""} ${e.selectedEnd ? "is-selected-end" : ""} ${e.inRange ? "is-in-range" : ""}`.trim(),
+								onClick: () => se(e.date),
+								children: e.label
+							}, e.key))
+						})
+					]
+				}),
+				/* @__PURE__ */ l("section", {
+					className: "time-column",
+					children: [/* @__PURE__ */ c("div", {
+						className: "panel-title",
+						children: m
+					}), /* @__PURE__ */ l("div", {
+						className: "time-lists",
+						children: [/* @__PURE__ */ c("div", {
+							className: "time-list",
+							children: R.map((e) => /* @__PURE__ */ c("button", {
+								type: "button",
+								className: `time-option ${J === e ? "is-active" : ""}`.trim(),
+								onClick: () => ce(e, Y),
+								children: String(e).padStart(2, "0")
+							}, e))
+						}), /* @__PURE__ */ c("div", {
+							className: "time-list",
+							children: z.map((e) => /* @__PURE__ */ c("button", {
+								type: "button",
+								className: `time-option ${Y === e ? "is-active" : ""}`.trim(),
+								onClick: () => ce(J, e),
+								children: String(e).padStart(2, "0")
+							}, e))
+						})]
+					})]
+				}),
+				/* @__PURE__ */ l("footer", {
+					className: "panel-actions",
+					children: [
+						/* @__PURE__ */ c("button", {
+							type: "button",
+							className: "text-button",
+							onClick: ue,
+							children: h
+						}),
+						/* @__PURE__ */ c("span", { className: "action-spacer" }),
+						/* @__PURE__ */ c("button", {
+							type: "button",
+							className: "text-button",
+							onClick: Z,
+							children: _
+						}),
+						/* @__PURE__ */ c("button", {
+							type: "button",
+							className: "confirm-button",
+							onClick: de,
+							children: g
+						})
+					]
+				})
+			]
+		}), document.body)]
+	});
+};
+//#endregion
+export { F as SecLabActionMenu, m as SecLabAlert, S as SecLabBreadcrumb, C as SecLabBreadcrumbItem, f as SecLabButton, h as SecLabCard, g as SecLabCheckbox, K as SecLabDateTimeRangePicker, D as SecLabDescriptions, A as SecLabDialog, j as SecLabDrawer, _ as SecLabEmpty, v as SecLabFormItem, d as SecLabIcon, w as SecLabInput, y as SecLabLoading, T as SecLabMenu, M as SecLabModal, N as SecLabPagination, P as SecLabSelect, p as SecLabSwitch, z as SecLabTable, E as SecLabTabs, b as SecLabTag, k as SecLabToast, O as SecLabTooltip };