@ioca/react 1.4.78 → 1.4.79

package/lib/cjs/components/message/message.cjs

@@ -0,0 +1,197 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_hooks = require("../../js/hooks.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _Users_iann_codes_ioca_react_node_modules__pnpm_react_dom_19_2_4_react_19_2_4_node_modules_react_dom_client_js = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/client.js");
+//#region packages/components/message/message.tsx
+const AlignMap = {
+	left: "flex-start",
+	center: "center",
+	right: "flex-end"
+};
+const GlobalConfig = {
+	align: "center",
+	offset: "12px",
+	gap: 12
+};
+const ItemDefaultConfig = {
+	duration: 3e3,
+	closable: true,
+	active: false
+};
+const handler = {
+	oneInstance: null,
+	callout(item) {},
+	close() {}
+};
+const queue = {
+	left: [],
+	center: [],
+	right: []
+};
+const heights = {
+	left: [],
+	center: [],
+	right: []
+};
+const MessageItem = function({ ref, active, content, top, className, style, onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: (0, classnames.default)("i-message", className, { "i-message-active": active }),
+		style: {
+			...style,
+			top
+		},
+		onClick,
+		children: content
+	});
+};
+function Messages() {
+	const ref = (0, react.useRef)(null);
+	const state = require_hooks.useReactive({
+		items: {
+			left: [],
+			center: [],
+			right: []
+		},
+		tops: {
+			left: [],
+			center: [],
+			right: []
+		}
+	});
+	const offsetTop = {
+		left: 0,
+		center: 0,
+		right: 0
+	};
+	(0, react.useEffect)(() => {
+		Object.assign(handler, {
+			callout: function(item) {
+				const { align = "center", unshift, onShow } = item;
+				const size = queue[align][unshift ? "unshift" : "push"](item);
+				state.items[align] = [...queue[align]];
+				item.close = this.close.bind(item);
+				setTimeout(() => {
+					const h = ref.current?.offsetHeight || 0;
+					queue[align][unshift ? 0 : size - 1].active = true;
+					state.items[align] = [...queue[align]];
+					heights[align][unshift ? "unshift" : "push"](h);
+					state.tops[align] = [...heights[align]];
+					onShow?.();
+				}, 12);
+				if (item.duration !== 0) item.timer = setTimeout(() => {
+					this.close.call(item);
+				}, item.duration);
+			},
+			close: function() {
+				const item = this;
+				const { align = "center", onHide } = item;
+				const index = queue[align].findIndex((i) => i.id === item.id);
+				if (index < 0) return;
+				queue[align][index].active = false;
+				state.items[align] = [...queue[align]];
+				item.timer = setTimeout(() => {
+					const index = queue[align].findIndex((i) => i.id === item.id);
+					queue[align].splice(index, 1);
+					heights[align].splice(index, 1);
+					state.tops[align] = [...heights[align]];
+					state.items[align] = [...queue[align]];
+					item.timer && clearTimeout(item.timer);
+					onHide?.();
+				}, 240);
+			}
+		});
+	}, []);
+	const renderItems = (item, i) => {
+		if (!item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+		const { id, active, content, align = "center", className } = item;
+		offsetTop[align] += state.tops[align][i - 1] || 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageItem, {
+			ref,
+			active,
+			content,
+			top: GlobalConfig.gap * i + offsetTop[align],
+			className,
+			style: { alignSelf: AlignMap[align] },
+			onClick: handler.close.bind(item)
+		}, id);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "i-messages",
+		children: [
+			state.items.left.map(renderItems),
+			state.items.center.map(renderItems),
+			state.items.right.map(renderItems)
+		]
+	});
+}
+function message(config) {
+	if (["string", "number"].includes(typeof config) || (0, react.isValidElement)(config)) config = { content: config };
+	config = Object.assign({ id: (0, _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs.uid)(7) }, ItemDefaultConfig, config);
+	handler.callout(config);
+	return {
+		instance: config,
+		close: handler.close.bind(config)
+	};
+}
+function createContainer() {
+	if (typeof document === "undefined") return null;
+	const container = document.createElement("div");
+	container.dataset.id = "messages";
+	document.body.append(container);
+	return container;
+}
+message.error = (content) => {
+	return message({
+		content,
+		className: "bg-error"
+	});
+};
+message.success = (content) => {
+	return message({
+		content,
+		className: "bg-success"
+	});
+};
+message.warning = (content) => {
+	return message({
+		content,
+		className: "bg-warning"
+	});
+};
+message.info = (content) => {
+	return message({
+		content,
+		className: "bg-blue"
+	});
+};
+message.one = (config) => {
+	const o = handler.oneInstance;
+	if (o) if (o.active && o.duration !== 0) {
+		clearTimeout(o.timer);
+		o.timer = setTimeout(() => {
+			o.close?.();
+		}, o.duration);
+	} else handler.callout(o);
+	else {
+		const { instance } = message(config);
+		handler.oneInstance = instance;
+	}
+};
+let container = null;
+let root = null;
+if (typeof window !== "undefined") {
+	container = createContainer();
+	if (container) {
+		root = (0, _Users_iann_codes_ioca_react_node_modules__pnpm_react_dom_19_2_4_react_19_2_4_node_modules_react_dom_client_js.createRoot)(container);
+		root.render(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Messages, {}));
+	}
+}
+//#endregion
+exports.default = message;
+
+//# sourceMappingURL=message.cjs.map

package/lib/cjs/components/message/message.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.cjs","names":[],"sources":["../../../../packages/components/message/message.tsx"],"sourcesContent":["import { useReactive } from \"../../js/hooks\";\nimport classNames from \"classnames\";\nimport { uid } from \"radash\";\nimport { ReactNode, isValidElement, useEffect, useRef } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./index.css\";\nimport type { IMessage, IMessageItem, THeights, TMessageQueue } from \"./type\";\n\nconst AlignMap = {\n\tleft: \"flex-start\",\n\tcenter: \"center\",\n\tright: \"flex-end\",\n};\n\nconst GlobalConfig = {\n\talign: \"center\",\n\toffset: \"12px\",\n\tgap: 12,\n};\n\nconst ItemDefaultConfig = {\n\tduration: 3000,\n\tclosable: true,\n\tactive: false,\n};\n\nconst handler: {\n\toneInstance: null | IMessage;\n\tcallout: (item: IMessage) => void;\n\tclose: () => void;\n} = {\n\toneInstance: null,\n\tcallout(item: IMessage) {},\n\tclose() {},\n};\n\nconst queue: TMessageQueue = {\n\tleft: [],\n\tcenter: [],\n\tright: [],\n};\nconst heights: THeights = {\n\tleft: [],\n\tcenter: [],\n\tright: [],\n};\n\nconst MessageItem = function ({\n\tref,\n\tactive,\n\tcontent,\n\ttop,\n\tclassName,\n\tstyle,\n\tonClick,\n}: IMessageItem) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(\"i-message\", className, {\n\t\t\t\t\"i-message-active\": active,\n\t\t\t})}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\ttop,\n\t\t\t}}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t{content}\n\t\t</div>\n\t);\n};\n\nfunction Messages() {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst state = useReactive<{\n\t\ttops: THeights;\n\t\titems: TMessageQueue;\n\t}>({\n\t\titems: {\n\t\t\tleft: [],\n\t\t\tcenter: [],\n\t\t\tright: [],\n\t\t},\n\t\ttops: {\n\t\t\tleft: [],\n\t\t\tcenter: [],\n\t\t\tright: [],\n\t\t},\n\t});\n\tconst offsetTop = {\n\t\tleft: 0,\n\t\tcenter: 0,\n\t\tright: 0,\n\t};\n\n\tuseEffect(() => {\n\t\tObject.assign(handler, {\n\t\t\tcallout: function (item: IMessage) {\n\t\t\t\tconst { align = \"center\", unshift, onShow } = item;\n\t\t\t\tconst size = queue[align][unshift ? \"unshift\" : \"push\"](item);\n\t\t\t\tstate.items[align] = [...queue[align]];\n\t\t\t\titem.close = this.close.bind(item);\n\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tconst h = ref.current?.offsetHeight || 0;\n\n\t\t\t\t\tqueue[align][unshift ? 0 : size - 1].active = true;\n\t\t\t\t\tstate.items[align] = [...queue[align]];\n\t\t\t\t\theights[align][unshift ? \"unshift\" : \"push\"](h);\n\t\t\t\t\tstate.tops[align] = [...heights[align]];\n\t\t\t\t\tonShow?.();\n\t\t\t\t}, 12);\n\n\t\t\t\tif (item.duration !== 0) {\n\t\t\t\t\titem.timer = setTimeout(() => {\n\t\t\t\t\t\tthis.close.call(item);\n\t\t\t\t\t}, item.duration);\n\t\t\t\t}\n\t\t\t},\n\t\t\tclose: function () {\n\t\t\t\tconst item = this as IMessage;\n\t\t\t\tconst { align = \"center\", onHide } = item;\n\t\t\t\tconst index = queue[align].findIndex((i) => i.id === item.id);\n\t\t\t\tif (index < 0) return;\n\n\t\t\t\tqueue[align][index].active = false;\n\t\t\t\tstate.items[align] = [...queue[align]];\n\n\t\t\t\titem.timer = setTimeout(() => {\n\t\t\t\t\tconst index = queue[align].findIndex(\n\t\t\t\t\t\t(i) => i.id === item.id\n\t\t\t\t\t);\n\n\t\t\t\t\tqueue[align].splice(index, 1);\n\t\t\t\t\theights[align].splice(index, 1);\n\t\t\t\t\tstate.tops[align] = [...heights[align]];\n\t\t\t\t\tstate.items[align] = [...queue[align]];\n\t\t\t\t\titem.timer && clearTimeout(item.timer);\n\t\t\t\t\tonHide?.();\n\t\t\t\t}, 240);\n\t\t\t},\n\t\t});\n\t}, []);\n\n\tconst renderItems = (item, i) => {\n\t\tif (!item) return <></>;\n\n\t\tconst { id, active, content, align = \"center\", className } = item;\n\t\toffsetTop[align] += state.tops[align][i - 1] || 0;\n\t\tconst top = GlobalConfig.gap * i + offsetTop[align];\n\n\t\treturn (\n\t\t\t<MessageItem\n\t\t\t\tkey={id}\n\t\t\t\tref={ref}\n\t\t\t\tactive={active}\n\t\t\t\tcontent={content}\n\t\t\t\ttop={top}\n\t\t\t\tclassName={className}\n\t\t\t\tstyle={{ alignSelf: AlignMap[align] }}\n\t\t\t\tonClick={handler.close.bind(item)}\n\t\t\t/>\n\t\t);\n\t};\n\n\treturn (\n\t\t<div className='i-messages'>\n\t\t\t{state.items.left.map(renderItems)}\n\t\t\t{state.items.center.map(renderItems)}\n\t\t\t{state.items.right.map(renderItems)}\n\t\t</div>\n\t);\n}\n\nexport function setMessageConfig(config: IMessage) {\n\tObject.assign(GlobalConfig, config);\n}\n\nfunction message(config: IMessage | ReactNode) {\n\tif (\n\t\t[\"string\", \"number\"].includes(typeof config) ||\n\t\tisValidElement(config)\n\t) {\n\t\tconfig = { content: config as ReactNode };\n\t}\n\n\tconfig = Object.assign(\n\t\t{ id: uid(7) },\n\t\tItemDefaultConfig,\n\t\tconfig as IMessage\n\t);\n\n\thandler.callout(config as IMessage);\n\n\treturn {\n\t\tinstance: config,\n\t\tclose: handler.close.bind(config),\n\t};\n}\n\nfunction createContainer() {\n\tif (typeof document === \"undefined\") return null;\n\tconst container = document.createElement(\"div\");\n\tcontainer.dataset.id = \"messages\";\n\tdocument.body.append(container);\n\treturn container;\n}\n\nmessage.error = (content: ReactNode) => {\n\treturn message({\n\t\tcontent,\n\t\tclassName: \"bg-error\",\n\t});\n};\n\nmessage.success = (content: ReactNode) => {\n\treturn message({\n\t\tcontent,\n\t\tclassName: \"bg-success\",\n\t});\n};\n\nmessage.warning = (content: ReactNode) => {\n\treturn message({\n\t\tcontent,\n\t\tclassName: \"bg-warning\",\n\t});\n};\n\nmessage.info = (content: ReactNode) => {\n\treturn message({\n\t\tcontent,\n\t\tclassName: \"bg-blue\",\n\t});\n};\n\nmessage.one = (config: IMessage) => {\n\tconst o = handler.oneInstance;\n\n\tif (o) {\n\t\tif (o.active && o.duration !== 0) {\n\t\t\tclearTimeout(o.timer);\n\t\t\to.timer = setTimeout(() => {\n\t\t\t\to.close?.();\n\t\t\t}, o.duration);\n\t\t} else {\n\t\t\thandler.callout(o);\n\t\t}\n\t} else {\n\t\tconst { instance } = message(config);\n\t\thandler.oneInstance = instance;\n\t}\n};\n\n// 初始化消息容器\nlet container: HTMLElement | null = null;\nlet root: any = null;\n\nif (typeof window !== \"undefined\") {\n\tcontainer = createContainer();\n\tif (container) {\n\t\troot = createRoot(container);\n\t\troot.render(<Messages />);\n\t}\n}\n\nexport default message;\n"],"mappings":"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"}

package/lib/cjs/components/modal/content.cjs

@@ -0,0 +1,57 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../button/index.cjs");
+const require_index$1 = require("../utils/helpericon/index.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/modal/content.tsx
+function Content(props) {
+	const { title, footer, hideCloseButton, footerLeft, okButtonProps, cancelButtonProps, children, onOk, onClose } = props;
+	const showHeader = title || !hideCloseButton;
+	const handleOk = async () => {
+		if (await onOk?.() === false) return;
+		onClose?.();
+	};
+	const renderFooter = (0, react.useMemo)(() => {
+		if (footer || footer === null) return footer;
+		const propsOk = Object.assign({
+			children: "确定",
+			onClick: handleOk
+		}, okButtonProps);
+		const propsCancel = Object.assign({
+			secondary: true,
+			children: "关闭",
+			onClick: onClose
+		}, cancelButtonProps);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			footerLeft,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { ...propsOk }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { ...propsCancel })
+		] });
+	}, [
+		footer,
+		okButtonProps,
+		cancelButtonProps
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+			className: "i-modal-header",
+			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+				active: !hideCloseButton,
+				className: "i-modal-close",
+				onClick: onClose
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "i-modal-content",
+			children
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+			className: "i-modal-footer",
+			children: renderFooter
+		})
+	] });
+}
+//#endregion
+exports.default = Content;
+
+//# sourceMappingURL=content.cjs.map

package/lib/cjs/components/modal/content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.cjs","names":[],"sources":["../../../../packages/components/modal/content.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport Button from \"../button\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { IModalContent } from \"./type\";\n\nexport default function Content(props: IModalContent) {\n\tconst {\n\t\ttitle,\n\t\tfooter,\n\t\thideCloseButton,\n\t\tfooterLeft,\n\t\tokButtonProps,\n\t\tcancelButtonProps,\n\t\tchildren,\n\t\tonOk,\n\t\tonClose,\n\t} = props;\n\tconst showHeader = title || !hideCloseButton;\n\n\tconst handleOk = async () => {\n\t\tconst ret = await onOk?.();\n\n\t\tif (ret === false) return;\n\n\t\tonClose?.();\n\t};\n\n\tconst renderFooter = useMemo(() => {\n\t\tif (footer || footer === null) return footer;\n\n\t\tconst propsOk = Object.assign(\n\t\t\t{\n\t\t\t\tchildren: \"确定\",\n\t\t\t\tonClick: handleOk,\n\t\t\t},\n\t\t\tokButtonProps\n\t\t);\n\t\tconst propsCancel = Object.assign(\n\t\t\t{\n\t\t\t\tsecondary: true,\n\t\t\t\tchildren: \"关闭\",\n\t\t\t\tonClick: onClose,\n\t\t\t},\n\t\t\tcancelButtonProps\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{footerLeft}\n\t\t\t\t<Button {...propsOk} />\n\t\t\t\t<Button {...propsCancel} />\n\t\t\t</>\n\t\t);\n\t}, [footer, okButtonProps, cancelButtonProps]);\n\n\treturn (\n\t\t<>\n\t\t\t{showHeader && (\n\t\t\t\t<header className='i-modal-header'>\n\t\t\t\t\t{title && <b>{title}</b>}\n\n\t\t\t\t\t<Helpericon\n\t\t\t\t\t\tactive={!hideCloseButton}\n\t\t\t\t\t\tclassName='i-modal-close'\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</header>\n\t\t\t)}\n\n\t\t\t<div className='i-modal-content'>{children}</div>\n\n\t\t\t<footer className='i-modal-footer'>{renderFooter}</footer>\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;CAMA,MAAO,EACN,OACC,QACA,iBACA,YACA,eACA,mBACA,UACA,MACA,YACA;CACD,MAAI,aAAK,SAAA,CAAA;;MAGH,MAAW,QAAU,KAAA,MAAA;;;;AAQ3B,MAAK,UAAC,WAAe,KAAW,QAAG;gCAGlC;GACC,UAAA;GACC,SAAS;GACT,EACD,cACA;EACD,MAAC,cAAA,OAAA,OACD;GACC,WAAA;GACC,UAAU;GACV,SAAS;GACT,EACD,kBACA;SAGD,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;GACE;GACA,iBAAA,GAAA,kBAAA,KAAC,cAAA,SAAD,EAAC,GAAU,SAAA,CAAA;GACX,iBAAA,GAAA,kBAAA,KAAC,cAAA,SAAD,EAAQ,GAAI,aAAU,CAAA;GACrB,EAAA,CAAA;IAEF;EAAA;EAAA;EAAA;EAAA,CAAA;QAGF,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,cACC,iBAAA,GAAA,kBAAA,MAAA,UAAA;GAAA,WAAc;aAAd,CACC,SAAO,iBAAA,GAAA,kBAAA,KAAA,KAAA,EAAA,UAAA,OAAa,CAAA,EAAA,iBAAA,GAAA,kBAAA,KAAA,gBAAA,SAAA;IAGnB,QAAA,CAAA;IACA,WAAS;IACT,SAAS;IACT,CAAA,CACA;;;;;;;;;;EAMF,EAAA,CAAA"}

package/lib/cjs/components/modal/context.cjs

@@ -0,0 +1,7 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+//#region packages/components/modal/context.ts
+const ModalContext = (0, require("react").createContext)(false);
+//#endregion
+exports.default = ModalContext;
+
+//# sourceMappingURL=context.cjs.map

package/lib/cjs/components/modal/context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.cjs","names":[],"sources":["../../../../packages/components/modal/context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nconst ModalContext = createContext(false);\n\nexport default ModalContext;\n"],"mappings":";;AAEA,MAAM,gBAAA,oBAAA,eAA6B,MAAM"}

package/lib/cjs/components/modal/hookModal.cjs

@@ -0,0 +1,28 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_hooks = require("../../js/hooks.cjs");
+const require_modal = require("./modal.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/modal/hookModal.tsx
+const HookModal = (props) => {
+	const { ref, ...restProps } = props;
+	const state = require_hooks.useReactive({});
+	const mergedProps = Object.assign({}, restProps, state);
+	(0, react.useImperativeHandle)(ref, () => ({
+		update: (config = {}) => {
+			Object.assign(state, config);
+		},
+		close: () => {
+			state.visible = false;
+			if (mergedProps.closable) return;
+			Promise.resolve().then(() => {
+				state.visible = true;
+			});
+		}
+	}));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_modal.default, { ...mergedProps });
+};
+//#endregion
+exports.default = HookModal;
+
+//# sourceMappingURL=hookModal.cjs.map

package/lib/cjs/components/modal/hookModal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hookModal.cjs","names":["useReactive","Modal"],"sources":["../../../../packages/components/modal/hookModal.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useImperativeHandle } from \"react\";\nimport { useReactive } from \"../../js/hooks\";\nimport Modal from \"./modal\";\nimport type { IModal, RefHookModal } from \"./type\";\n\nconst HookModal = (\n\tprops: IModal & { ref?: RefObject<RefHookModal | null> }\n) => {\n\tconst { ref, ...restProps } = props;\n\tconst state = useReactive<IModal>({});\n\n\tconst mergedProps = Object.assign({}, restProps, state);\n\n\tuseImperativeHandle(ref, () => ({\n\t\tupdate: (config: IModal = {}) => {\n\t\t\tObject.assign(state, config);\n\t\t},\n\n\t\tclose: () => {\n\t\t\tstate.visible = false;\n\n\t\t\tif (mergedProps.closable) return;\n\t\t\tPromise.resolve().then(() => {\n\t\t\t\tstate.visible = true;\n\t\t\t});\n\t\t},\n\t}));\n\n\treturn <Modal {...mergedProps} />;\n};\n\nexport default HookModal;\n"],"mappings":";;;;;;AAMA,MAAM,aACL,UACI;CACJ,MAAM,EAAE,KAAK,GAAG,cAAc;CAC9B,MAAM,QAAQA,cAAAA,YAAoB,EAAE,CAAC;CAErC,MAAM,cAAc,OAAO,OAAO,EAAE,EAAE,WAAW,MAAM;AAEvD,EAAA,GAAA,MAAA,qBAAoB,YAAY;EAC/B,SAAS,SAAiB,EAAE,KAAK;AAChC,UAAO,OAAO,OAAO,OAAO;;EAG7B,aAAa;AACZ,SAAM,UAAU;AAEhB,OAAI,YAAY,SAAU;AAC1B,WAAQ,SAAS,CAAC,WAAW;AAC5B,UAAM,UAAU;KACf;;EAEH,EAAE;AAEH,QAAO,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD,EAAO,GAAI,aAAe,CAAA"}

package/lib/cjs/components/modal/index.cjs

@@ -0,0 +1,6 @@
+//#region packages/components/modal/index.tsx
+var modal_default = require("./modal.cjs").default;
+//#endregion
+exports.default = modal_default;
+
+//# sourceMappingURL=index.cjs.map

package/lib/cjs/components/modal/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Modal"],"sources":["../../../../packages/components/modal/index.tsx"],"sourcesContent":["import Modal from \"./modal\";\n\nexport default Modal;\n"],"mappings":";AAEA,IAAA,uCAAeA"}

package/lib/cjs/components/modal/modal.cjs

@@ -0,0 +1,117 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_hooks = require("../../js/hooks.cjs");
+const require_content = require("./content.cjs");
+const require_context = require("./context.cjs");
+const require_useModal = require("./useModal.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+//#region packages/components/modal/modal.tsx
+function Modal(props) {
+	const { visible, title, footer, okButtonProps, cancelButtonProps, closable = true, hideBackdrop, backdropClosable = true, hideCloseButton, disableEsc, width, height, customized, fixed, hideShadow, children, style, className, keepDOM, footerLeft, onClick, onVisibleChange, onClose, onOk, ...restProps } = props;
+	const [show, setShow] = (0, react.useState)(visible);
+	const [active, setActive] = (0, react.useState)(false);
+	const [bounced, setBounced] = (0, react.useState)(false);
+	const [mounted, setMounted] = (0, react.useState)(false);
+	const toggable = (0, react.useRef)(true);
+	const handleShow = async () => {
+		if (!toggable.current) return;
+		(!keepDOM || !show) && setShow(true);
+		toggable.current = false;
+		const timer = setTimeout(() => {
+			setActive(true);
+			onVisibleChange?.(true);
+			toggable.current = true;
+		}, 64);
+		return () => clearTimeout(timer);
+	};
+	const handleHide = () => {
+		if (!toggable.current) return;
+		toggable.current = false;
+		if (!closable) {
+			setBounced(true);
+			const timer = setTimeout(() => {
+				setBounced(false);
+				toggable.current = true;
+			}, 400);
+			return () => clearTimeout(timer);
+		}
+		setActive(false);
+		const timer = setTimeout(() => {
+			!keepDOM && setShow(false);
+			toggable.current = true;
+			onVisibleChange?.(false);
+			onClose?.();
+		}, 240);
+		return () => clearTimeout(timer);
+	};
+	const handleBackdropClick = () => {
+		backdropClosable && handleHide();
+	};
+	require_hooks.useKeydown((e) => {
+		if (e.code !== "Escape" || !visible) return;
+		handleHide();
+	}, { disabled: disableEsc });
+	(0, react.useEffect)(() => {
+		visible ? handleShow() : handleHide();
+	}, [visible]);
+	(0, react.useEffect)(() => {
+		setMounted(true);
+	}, []);
+	const handleClick = () => {
+		if (typeof document === "undefined") return;
+		document.documentElement.click();
+	};
+	if (!show || !mounted) return null;
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("i-modal-container", {
+			"i-modal-backdrop": !hideBackdrop,
+			"i-modal-customized": customized,
+			"i-modal-active": active,
+			fixed
+		}, className),
+		style,
+		onClick: handleBackdropClick,
+		"aria-modal": "true",
+		inert: !active,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, classnames.default)("i-modal", {
+				bounced,
+				shadow: !hideShadow
+			}),
+			style: {
+				width,
+				height
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+				handleClick();
+				onClick?.(e);
+			},
+			role: "dialog",
+			"aria-labelledby": title ? "modal-title" : void 0,
+			...restProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_context.default.Provider, {
+				value: true,
+				children: [customized && children, !customized && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_content.default, {
+					title,
+					hideCloseButton,
+					footer,
+					okButtonProps,
+					cancelButtonProps,
+					children,
+					footerLeft,
+					onOk,
+					onClose: handleHide
+				})]
+			})
+		})
+	}), document?.body ?? null);
+}
+Modal.useModal = require_useModal.default;
+//#endregion
+exports.default = Modal;
+
+//# sourceMappingURL=modal.cjs.map

package/lib/cjs/components/modal/modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.cjs","names":[],"sources":["../../../../packages/components/modal/modal.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown } from \"../../js/hooks\";\nimport Content from \"./content\";\nimport ModalContext from \"./context\";\nimport \"./index.css\";\nimport { CompositionModal, IModal } from \"./type\";\nimport useModal from \"./useModal\";\n\nfunction Modal(props: IModal) {\n\tconst {\n\t\tvisible,\n\t\ttitle,\n\t\tfooter,\n\t\tokButtonProps,\n\t\tcancelButtonProps,\n\t\tclosable = true,\n\t\thideBackdrop,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tdisableEsc,\n\t\twidth,\n\t\theight,\n\t\tcustomized,\n\t\tfixed,\n\t\thideShadow,\n\t\tchildren,\n\t\tstyle,\n\t\tclassName,\n\t\tkeepDOM,\n\t\tfooterLeft,\n\t\tonClick,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\tonOk,\n\t\t...restProps\n\t} = props;\n\n\tconst [show, setShow] = useState(visible);\n\tconst [active, setActive] = useState(false);\n\tconst [bounced, setBounced] = useState(false);\n\tconst [mounted, setMounted] = useState(false);\n\tconst toggable = useRef(true);\n\n\tconst handleShow = async () => {\n\t\tif (!toggable.current) return;\n\n\t\t(!keepDOM || !show) && setShow(true);\n\t\ttoggable.current = false;\n\n\t\tconst timer = setTimeout(() => {\n\t\t\tsetActive(true);\n\t\t\tonVisibleChange?.(true);\n\t\t\ttoggable.current = true;\n\t\t}, 64);\n\n\t\treturn () => clearTimeout(timer);\n\t};\n\n\tconst handleHide = () => {\n\t\tif (!toggable.current) return;\n\t\ttoggable.current = false;\n\n\t\tif (!closable) {\n\t\t\tsetBounced(true);\n\t\t\tconst timer = setTimeout(() => {\n\t\t\t\tsetBounced(false);\n\t\t\t\ttoggable.current = true;\n\t\t\t}, 400);\n\t\t\treturn () => clearTimeout(timer);\n\t\t}\n\n\t\tsetActive(false);\n\t\tconst timer = setTimeout(() => {\n\t\t\t!keepDOM && setShow(false);\n\t\t\ttoggable.current = true;\n\t\t\tonVisibleChange?.(false);\n\t\t\tonClose?.();\n\t\t}, 240);\n\n\t\treturn () => clearTimeout(timer);\n\t};\n\n\tconst handleBackdropClick = () => {\n\t\tbackdropClosable && handleHide();\n\t};\n\n\tuseKeydown(\n\t\t(e) => {\n\t\t\tif (e.code !== \"Escape\" || !visible) return;\n\t\t\thandleHide();\n\t\t},\n\t\t{ disabled: disableEsc }\n\t);\n\n\tuseEffect(() => {\n\t\tvisible ? handleShow() : handleHide();\n\t}, [visible]);\n\n\tuseEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\tconst handleClick = () => {\n\t\tif (typeof document === \"undefined\") return;\n\t\tdocument.documentElement.click();\n\t};\n\n\tif (!show || !mounted) return null;\n\n\treturn createPortal(\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-modal-container\",\n\t\t\t\t{\n\t\t\t\t\t\"i-modal-backdrop\": !hideBackdrop,\n\t\t\t\t\t\"i-modal-customized\": customized,\n\t\t\t\t\t\"i-modal-active\": active,\n\t\t\t\t\tfixed,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={style}\n\t\t\tonClick={handleBackdropClick}\n\t\t\taria-modal='true'\n\t\t\tinert={!active}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-modal\", {\n\t\t\t\t\tbounced,\n\t\t\t\t\tshadow: !hideShadow,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t}}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\thandleClick();\n\t\t\t\t\tonClick?.(e);\n\t\t\t\t}}\n\t\t\t\trole='dialog'\n\t\t\t\taria-labelledby={title ? \"modal-title\" : undefined}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t<ModalContext.Provider value={true}>\n\t\t\t\t\t{customized && children}\n\n\t\t\t\t\t{!customized && (\n\t\t\t\t\t\t<Content\n\t\t\t\t\t\t\ttitle={title}\n\t\t\t\t\t\t\thideCloseButton={hideCloseButton}\n\t\t\t\t\t\t\tfooter={footer}\n\t\t\t\t\t\t\tokButtonProps={okButtonProps}\n\t\t\t\t\t\t\tcancelButtonProps={cancelButtonProps}\n\t\t\t\t\t\t\tchildren={children}\n\t\t\t\t\t\t\tfooterLeft={footerLeft}\n\t\t\t\t\t\t\tonOk={onOk}\n\t\t\t\t\t\t\tonClose={handleHide}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</ModalContext.Provider>\n\t\t\t</div>\n\t\t</div>,\n\t\tdocument?.body ?? null\n\t);\n}\n\nModal.useModal = useModal;\n\nexport default Modal as CompositionModal;\n"],"mappings":";;;;;;;;;;;;CAUA,MAAA,EACC,SACC,OACA,QACA,eACA,mBACA,WAAA,MACA,cACA,mBAAY,MACZ,iBACA,YACA,OACA,QACA,YACA,OACA,YACA,UACA,OACA,WACA,SACA,YACA,SACA,iBACA,SACA,MACA,GAAA,cACG;;CAGJ,MAAM,CAAC,QAAM,cAAA,GAAA,MAAA,UAAoB,MAAQ;CACzC,MAAM,CAAC,SAAQ,eAAA,GAAA,MAAA,UAAsB,MAAM;CAC3C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,YAAA,GAAA,MAAA,QAAU,KAAa;;AAG7B,MAAK,CAAC,SAAA,QAAkB;;AAGvB,WAAS,UAAU;;AAGnB,aAAW,KAAG;AACb,qBAAe,KAAA;AACf,YAAA,UAAkB;KAClB,GAAA;;;;AAMF,MAAK,CAAC,SAAA,QAAkB;AACvB,WAAK,UAAS;;AAGd,cAAK,KAAU;GACd,MAAA,QAAW,iBAAK;AAChB,eAAY,MAAE;AACb,aAAA,UAAiB;MACjB,IAAA;AACD,gBAAO,aAAA,MAAA;;;EAIR,MAAA,QAAU,iBAAM;AAChB,IAAA,WAAa,QAAC,MAAa;AAC1B,YAAS,UAAU;AACnB,qBAAkB,MAAK;AACvB,cAAA;KACA,IAAA;;;;AAMF,sBAAM,YAA2B;;2BAIjC,MAAA;AACE,MAAI,EAAE,SAAA,YAAA,CAAA,QAAA;AACN,cAAY;IAEb,EAAC,UAAA,YAAA,CACD;;AAGD,YAAW,YAAK,GAAA,YAAA;IACf,CAAA,QAAU,CAAA;;AAGX,aAAY,KAAI;IACf,EAAA,CAAA;;AAGD,MAAK,OAAC,aAAmB,YAAC;AACzB,WAAI,gBAAqB,OAAA;;;oCAM1B,iBAAA,GAAA,kBAAA,KAAA,OAAA;EACE,YAAA,GAAA,WAAA,SACA,qBACC;GACA,oBAAA,CAAA;GACC,sBAAqB;GACrB,kBAAS;GACT;GACA,EACD,UACA;EACA;EACD,SAAO;EACP,cAAS;EACT,OAAK,CAAA;YAEN,iBAAA,GAAA,kBAAA,KAAA,OAAA;GACE,YAAA,GAAA,WAAA,SAAA,WAAA;IACA;IACC,QAAO,CAAA;IACP,CAAA;GACD,OAAE;IACF;IACC;IACA;GACD,UAAC,MAAA;AACD,MAAA,iBAAgB;AACf,iBAAE;AACF,cAAA,EAAY;;GAEb,MAAC;GACD,mBAAY,QAAA,gBAAA,KAAA;GACZ,GAAI;aAEL,iBAAA,GAAA,kBAAA,MAAA,gBAAA,QAAA,UAAA;IAAA,OAAA;cAAA,CACE,cAAa,UAAA,CAAA,cAGZ,iBAAA,GAAA,kBAAA,KAAC,gBAAA,SAAD;KACC;KACY;KACZ;KACc;KACC;KACf;KACU;KACV;KACA,SAAM;KACN,CAAA,CAED;;GACA,CAAA;EACE,CAAA,EACN,UAAM,QAAA,KACN"}

package/lib/cjs/components/modal/useModal.cjs

@@ -0,0 +1,39 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_utils = require("../../js/utils.cjs");
+const require_hookModal = require("./hookModal.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/modal/useModal.tsx
+function useModal() {
+	const ref = (0, react.useRef)(null);
+	const handleOpen = (props) => {
+		const unMount = require_utils.renderNode(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hookModal.default, {
+			ref,
+			visible: true,
+			...props,
+			onClose: () => {
+				props.onClose?.();
+				unMount?.();
+			}
+		}));
+	};
+	const handleUpdate = (props) => {
+		if (!ref.current) return;
+		const { update } = ref.current;
+		update(props);
+	};
+	const handleClose = () => {
+		if (!ref.current) return;
+		const { close } = ref.current;
+		close();
+	};
+	return {
+		open: handleOpen,
+		update: handleUpdate,
+		close: handleClose
+	};
+}
+//#endregion
+exports.default = useModal;
+
+//# sourceMappingURL=useModal.cjs.map

package/lib/cjs/components/modal/useModal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.cjs","names":["renderNode","HookModal"],"sources":["../../../../packages/components/modal/useModal.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { renderNode } from \"../../js/utils\";\nimport HookModal from \"./hookModal\";\nimport { IModal, RefHookModal } from \"./type\";\n\nexport default function useModal() {\n\tconst ref = useRef<RefHookModal>(null);\n\n\tconst handleOpen = (props: IModal) => {\n\t\tconst unMount = renderNode(\n\t\t\t<HookModal\n\t\t\t\tref={ref}\n\t\t\t\tvisible\n\t\t\t\t{...props}\n\t\t\t\tonClose={() => {\n\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\tunMount?.();\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst handleUpdate = (props: IModal) => {\n\t\tif (!ref.current) return;\n\n\t\tconst { update } = ref.current;\n\t\tupdate(props);\n\t};\n\n\tconst handleClose = () => {\n\t\tif (!ref.current) return;\n\n\t\tconst { close } = ref.current;\n\t\tclose();\n\t};\n\n\treturn {\n\t\topen: handleOpen,\n\t\tupdate: handleUpdate,\n\t\tclose: handleClose,\n\t};\n}\n"],"mappings":";;;;;;AAKA,SAAwB,WAAW;CAClC,MAAM,OAAA,GAAA,MAAA,QAA2B,KAAK;CAEtC,MAAM,cAAc,UAAkB;EACrC,MAAM,UAAUA,cAAAA,WACf,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,SAAD;GACM;GACL,SAAA;GACA,GAAI;GACJ,eAAe;AACd,UAAM,WAAW;AACjB,eAAW;;GAEX,CAAA,CACF;;CAGF,MAAM,gBAAgB,UAAkB;AACvC,MAAI,CAAC,IAAI,QAAS;EAElB,MAAM,EAAE,WAAW,IAAI;AACvB,SAAO,MAAM;;CAGd,MAAM,oBAAoB;AACzB,MAAI,CAAC,IAAI,QAAS;EAElB,MAAM,EAAE,UAAU,IAAI;AACtB,SAAO;;AAGR,QAAO;EACN,MAAM;EACN,QAAQ;EACR,OAAO;EACP"}

package/lib/cjs/components/pagination/index.cjs

@@ -0,0 +1,6 @@
+//#region packages/components/pagination/index.tsx
+var pagination_default = require("./pagination.cjs").default;
+//#endregion
+exports.default = pagination_default;
+
+//# sourceMappingURL=index.cjs.map

package/lib/cjs/components/pagination/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Pagination"],"sources":["../../../../packages/components/pagination/index.tsx"],"sourcesContent":["import Pagination from \"./pagination\";\n\nexport default Pagination;\n"],"mappings":";AAEA,IAAA,iDAAeA"}

package/lib/cjs/components/pagination/page.cjs

@@ -0,0 +1,31 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../loading/index.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/pagination/page.tsx
+const Page = (props) => {
+	const { page, active, disabled, children, onChange } = props;
+	const [loading, setLoading] = (0, react.useState)(false);
+	const handleClick = async () => {
+		if (active || loading || disabled) return;
+		setLoading(true);
+		await onChange?.(page);
+		setLoading(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		className: (0, classnames.default)("i-page", {
+			"i-page-active": active,
+			"i-page-loading": loading,
+			"i-page-disabled": disabled
+		}),
+		"data-page": page,
+		onClick: handleClick,
+		children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { absolute: true }), children]
+	});
+};
+//#endregion
+exports.default = Page;
+
+//# sourceMappingURL=page.cjs.map

package/lib/cjs/components/pagination/page.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.cjs","names":["Loading"],"sources":["../../../../packages/components/pagination/page.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useState } from \"react\";\nimport Loading from \"../loading\";\nimport { IPageItem } from \"./type\";\n\nconst Page = (props: IPageItem) => {\n\tconst { page, active, disabled, children, onChange } = props;\n\tconst [loading, setLoading] = useState(false);\n\n\tconst handleClick = async () => {\n\t\tif (active || loading || disabled) return;\n\n\t\tsetLoading(true);\n\t\tawait onChange?.(page);\n\t\tsetLoading(false);\n\t};\n\n\treturn (\n\t\t<a\n\t\t\tclassName={classNames(\"i-page\", {\n\t\t\t\t\"i-page-active\": active,\n\t\t\t\t\"i-page-loading\": loading,\n\t\t\t\t\"i-page-disabled\": disabled,\n\t\t\t})}\n\t\t\tdata-page={page}\n\t\t\tonClick={handleClick}\n\t\t>\n\t\t\t{loading && <Loading absolute />}\n\t\t\t{children}\n\t\t</a>\n\t);\n};\n\nexport default Page;\n"],"mappings":";;;;;;;AAKA,MAAM,QAAQ,UAAqB;CAClC,MAAM,EAAE,MAAM,QAAQ,UAAU,UAAU,aAAa;CACvD,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAE7C,MAAM,cAAc,YAAY;AAC/B,MAAI,UAAU,WAAW,SAAU;AAEnC,aAAW,KAAK;AAChB,QAAM,WAAW,KAAK;AACtB,aAAW,MAAM;;AAGlB,QACC,iBAAA,GAAA,kBAAA,MAAC,KAAD;EACC,YAAA,GAAA,WAAA,SAAsB,UAAU;GAC/B,iBAAiB;GACjB,kBAAkB;GAClB,mBAAmB;GACnB,CAAC;EACF,aAAW;EACX,SAAS;YAPV,CASE,WAAW,iBAAA,GAAA,kBAAA,KAACA,cAAAA,SAAD,EAAS,UAAA,MAAW,CAAA,EAC/B,SACE"}

package/lib/cjs/components/pagination/pagination.cjs

@@ -0,0 +1,86 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../icon/index.cjs");
+const require_page = require("./page.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/pagination/pagination.tsx
+const Pagination = (props) => {
+	const { page: defaultPage = 1, size = 10, total = 0, sibling = 2, prev = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.KeyboardArrowLeftRound, {}) }), next = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.KeyboardArrowRightRound, {}) }), simple, jumper, className, renderEllipsis = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.MoreHorizRound, {}),
+		className: "color-7"
+	}), renderPage = (i) => i, onChange, ...restProps } = props;
+	const [page, setPage] = (0, react.useState)(defaultPage);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const totalPage = (0, react.useMemo)(() => Math.ceil(total / size), [size, total]);
+	const [start, end, loop] = (0, react.useMemo)(() => {
+		const start = Math.max(1, page - sibling);
+		const end = Math.min(totalPage, page + sibling);
+		return [
+			start,
+			end,
+			Array.from({ length: end - start + 1 }).map((n, i) => start + i)
+		];
+	}, [
+		page,
+		totalPage,
+		sibling
+	]);
+	const handlePageChange = async (p) => {
+		if (!onChange || loading) return;
+		setLoading(true);
+		return new Promise(async (resolve) => {
+			if (p === void 0) return;
+			await onChange(p);
+			setPage(p);
+			setLoading(false);
+			resolve();
+		});
+	};
+	(0, react.useEffect)(() => setPage(defaultPage), [defaultPage]);
+	if (totalPage <= page && page === 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("i-pagination", className),
+		...restProps,
+		children: [
+			prev && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
+				page: page - 1 || 1,
+				disabled: page === 1,
+				onChange: handlePageChange,
+				children: prev
+			}),
+			start > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
+				page: 1,
+				onChange: handlePageChange,
+				children: renderPage(1)
+			}),
+			start > 2 && renderEllipsis(),
+			loop.map((p) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
+					page: p,
+					active: p === page,
+					onChange: handlePageChange,
+					children: renderPage(p)
+				}, p);
+			}),
+			end < totalPage - 1 && renderEllipsis(),
+			end < totalPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
+				page: totalPage,
+				onChange: handlePageChange,
+				children: renderPage(totalPage)
+			}),
+			next && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
+				page: page + 1,
+				disabled: page === totalPage,
+				onChange: handlePageChange,
+				children: next
+			})
+		]
+	});
+};
+//#endregion
+exports.default = Pagination;
+
+//# sourceMappingURL=pagination.cjs.map