@ioca/react 1.4.78 → 1.4.80

package/lib/cjs/components/tabs/index.js

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

package/lib/cjs/components/tabs/index.js.map

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

package/lib/cjs/components/tabs/item.js

@@ -0,0 +1,10 @@
+require("../../_virtual/_rolldown/runtime.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/tabs/item.tsx
+const Item = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+};
+//#endregion
+exports.default = Item;
+
+//# sourceMappingURL=item.js.map

package/lib/cjs/components/tabs/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":[],"sources":["../../../../packages/components/tabs/item.tsx"],"sourcesContent":["import { ITabItem } from \"./type\";\n\nconst Item = (props: ITabItem) => {\n\treturn <></>;\n};\n\nexport default Item;\n"],"mappings":";;;AAEA,MAAM,QAAQ,UAAoB;AACjC,QAAO,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAK,CAAA"}

package/lib/cjs/components/tabs/tabs.js

@@ -0,0 +1,272 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_hooks = require("../../js/hooks.js");
+const require_index = require("../button/index.js");
+const require_index$1 = require("../icon/index.js");
+const require_index$2 = require("../utils/helpericon/index.js");
+const require_index$3 = require("../popup/index.js");
+const require_item = require("./item.js");
+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/tabs/tabs.tsx
+const Tabs = ((props) => {
+	const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", bar = true, hideMore, barClass, renderMore = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+		flat: true,
+		square: true,
+		size: "small",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.MoreHorizRound, {}) })
+	}), onTabChange, ...rest } = props;
+	const navRefs = (0, react.useRef)([]);
+	const barRef = (0, react.useRef)(null);
+	const navsRef = (0, react.useRef)(null);
+	const contentsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [activeKey, setActiveKey] = (0, react.useState)(active);
+	const [prevActiveKey, setPrevActiveKey] = (0, react.useState)(void 0);
+	const [barStyle, setBarStyle] = (0, react.useState)({});
+	const [cachedTabs, setCachedTabs] = (0, react.useState)([]);
+	const [overflow, setOverflow] = (0, react.useState)(false);
+	const [moreTabs, setMoreTabs] = (0, react.useState)([]);
+	const [tabs, setTabs] = (0, react.useState)([]);
+	const { observe, unobserve } = require_hooks.useIntersectionObserver();
+	const size = require_hooks.useSize(navsRef);
+	(0, react.useEffect)(() => {
+		contentsRef.current.clear();
+		if (!items) {
+			if (!children) {
+				setTabs([]);
+				return;
+			}
+			setTabs(react.Children.map(children, (node, i) => {
+				const { key, props: nodeProps } = node;
+				const { title, children: tabChildren, content, keepDOM, closable } = nodeProps;
+				const tabKey = String(key ?? i);
+				contentsRef.current.set(tabKey, tabChildren ?? content);
+				return {
+					key: tabKey,
+					title,
+					keepDOM,
+					closable
+				};
+			}) ?? []);
+			return;
+		}
+		setTabs(items.map((item, i) => {
+			if (["string", "number"].includes(typeof item)) return {
+				key: String(item),
+				title: item
+			};
+			const key = String(item.key ?? i);
+			contentsRef.current.set(key, item.content);
+			const { content, ...rest } = item;
+			return {
+				...rest,
+				key
+			};
+		}));
+	}, [children, items]);
+	const add = (tab) => {
+		const tkey = String(tab.key ?? tabs.length);
+		const i = tabs.findIndex((t) => t.key === tkey);
+		if (i > -1) {
+			open(tabs[i].key ?? `${i}`);
+			return;
+		}
+		contentsRef.current.set(tkey, tab.content);
+		const { content, ...rest } = tab;
+		setTabs((ts) => [...ts, {
+			...rest,
+			key: tkey
+		}]);
+		open(tkey);
+	};
+	const close = (key) => {
+		const i = tabs.findIndex((t) => t.key === key);
+		if (i < 0) return;
+		contentsRef.current.delete(key);
+		const nextTabs = [...tabs];
+		nextTabs.splice(i, 1);
+		setTabs(nextTabs);
+		if (activeKey !== key) return;
+		const next = nextTabs[i] || nextTabs[i - 1];
+		open(prevActiveKey ?? next?.key ?? "");
+	};
+	const open = (key) => {
+		if (key === activeKey) {
+			if (!toggable) return;
+			onTabChange?.(void 0, key);
+			setActiveKey(void 0);
+			setBarStyle({
+				height: 0,
+				width: 0
+			});
+			return;
+		}
+		setPrevActiveKey(activeKey);
+		onTabChange?.(key, activeKey);
+		setActiveKey(key);
+	};
+	(0, react.useEffect)(() => {
+		if (!size || hideMore || !observe) return;
+		const { scrollHeight, scrollWidth } = navsRef.current;
+		const { width, height } = size;
+		const nextOverflow = scrollHeight > height || scrollWidth > width;
+		setOverflow(nextOverflow);
+		if (!nextOverflow) return;
+		navRefs.current.map((nav, i) => {
+			if (!nav) return;
+			observe(nav, (tar, visible) => {
+				setTabs((ts) => {
+					if (!ts[i]) return ts;
+					const nextTabs = ts.map((t, idx) => idx === i ? {
+						...t,
+						intersecting: visible
+					} : t);
+					setMoreTabs(nextTabs.filter((tab) => !tab.intersecting));
+					return nextTabs;
+				});
+			});
+		});
+	}, [
+		size,
+		hideMore,
+		tabs.length,
+		observe
+	]);
+	(0, react.useEffect)(() => {
+		if (!bar || type === "pane" || activeKey === void 0) return;
+		const index = tabs.findIndex((tab) => tab.key === activeKey);
+		setTimeout(() => {
+			const nav = navRefs.current[index];
+			if (!nav) return;
+			if (tabs[index]?.keepDOM && activeKey) setCachedTabs((keys) => {
+				if (keys.includes(activeKey)) return keys;
+				return [activeKey, ...keys];
+			});
+			const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
+			const isLine = type === "line";
+			setBarStyle({
+				height: !vertical && isLine ? ".25em" : offsetHeight,
+				width: vertical && isLine ? ".25em" : offsetWidth,
+				transform: `translate(${offsetLeft}px, ${offsetTop}px)`
+			});
+		}, 16);
+	}, [
+		activeKey,
+		bar,
+		size,
+		tabs,
+		type,
+		vertical
+	]);
+	(0, react.useEffect)(() => {
+		if (active === void 0 || activeKey === active) return;
+		open(active);
+	}, [active]);
+	(0, react.useEffect)(() => {
+		if (hideMore || !unobserve) return;
+		return () => {
+			navRefs.current?.map(unobserve);
+		};
+	}, [
+		tabs.length,
+		hideMore,
+		unobserve
+	]);
+	(0, react.useEffect)(() => {
+		if (!navsRef.current || vertical) return;
+		const handleMouseWheel = (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			if (vertical) return;
+			navsRef.current?.scrollBy({ left: e.deltaY + e.deltaX });
+		};
+		navsRef.current.addEventListener("wheel", handleMouseWheel, { passive: false });
+		return () => {
+			if (!navsRef.current) return;
+			navsRef.current.removeEventListener("wheel", handleMouseWheel);
+		};
+	}, [navsRef.current]);
+	(0, react.useImperativeHandle)(ref, () => ({
+		open,
+		close,
+		add,
+		navs: navsRef
+	}));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("i-tabs", {
+			flex: vertical,
+			[`i-tabs-${type}`]: type !== "default"
+		}, className),
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)("i-tab-navs-container", { "i-tab-navs-vertical": vertical }),
+			children: [
+				prepend,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: navsRef,
+					className: (0, classnames.default)("i-tab-navs", `justify-${navsJustify}`),
+					children: [tabs.map((tab, i) => {
+						const { title, key = `${i}`, closable } = tab;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+							ref: (ref) => navRefs.current[i] = ref,
+							className: (0, classnames.default)("i-tab-nav", { "i-tab-active": activeKey === key }),
+							onClick: () => open(key),
+							children: [title, closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
+								as: "i",
+								active: true,
+								className: "i-tab-nav-close",
+								onClick: (e) => {
+									e.stopPropagation();
+									close(key);
+								}
+							})]
+						}, key);
+					}), bar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						ref: barRef,
+						className: (0, classnames.default)("i-tab-navs-bar", barClass),
+						style: barStyle
+					})]
+				}),
+				!hideMore && overflow && moreTabs.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.default, {
+					arrow: false,
+					position: vertical ? "right" : "bottom",
+					align: "end",
+					touchable: true,
+					hideDelay: 500,
+					content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "i-tabs-morelist pd-4",
+						children: moreTabs.map((tab, i) => {
+							const { key = `${i}`, title } = tab;
+							const isActive = activeKey === key;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+								className: (0, classnames.default)("i-tab-nav", { "i-tab-active": isActive }),
+								onClick: () => open(key),
+								children: title
+							}, key);
+						})
+					}),
+					children: renderMore(moreTabs)
+				}),
+				append
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "i-tab-contents",
+			children: tabs.map((tab, i) => {
+				const key = tab.key ?? `${i}`;
+				const content = contentsRef.current.get(key);
+				const isActive = activeKey === key;
+				return (isActive || key !== void 0 && cachedTabs.includes(key)) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, classnames.default)("i-tab-content", { "i-tab-active": isActive }),
+					children: content
+				}, key);
+			})
+		})]
+	});
+});
+Tabs.Item = require_item.default;
+//#endregion
+exports.default = Tabs;
+
+//# sourceMappingURL=tabs.js.map

package/lib/cjs/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../../packages/components/tabs/tabs.tsx"],"sourcesContent":["import { MoreHorizRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport {\n\tCSSProperties,\n\tChildren,\n\tReactNode,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { useIntersectionObserver, useSize } from \"../../js/hooks\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\nimport Popup from \"../popup\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport TabItem from \"./item\";\nimport { CompositionTabs, ITabItem, ITabs } from \"./type\";\n\nconst Tabs = ((props: ITabs) => {\n\tconst {\n\t\tref,\n\t\tactive,\n\t\ttabs: items,\n\t\ttype = \"default\",\n\t\tprepend,\n\t\tappend,\n\t\tchildren,\n\t\tclassName,\n\t\tvertical,\n\t\ttoggable,\n\t\tnavsJustify = \"start\",\n\t\tbar = true,\n\t\thideMore,\n\t\tbarClass,\n\t\trenderMore = () => (\n\t\t\t<Button flat square size='small'>\n\t\t\t\t<Icon icon={<MoreHorizRound />} />\n\t\t\t</Button>\n\t\t),\n\t\tonTabChange,\n\t\t...rest\n\t} = props;\n\n\tconst navRefs = useRef<HTMLElement[]>([]);\n\tconst barRef = useRef<HTMLSpanElement>(null);\n\tconst navsRef = useRef<HTMLDivElement>(null);\n\tconst contentsRef = useRef<Map<string, ReactNode>>(new Map());\n\tconst [activeKey, setActiveKey] = useState<string | undefined>(active);\n\tconst [prevActiveKey, setPrevActiveKey] = useState<string | undefined>(\n\t\tundefined,\n\t);\n\tconst [barStyle, setBarStyle] = useState<CSSProperties>({});\n\tconst [cachedTabs, setCachedTabs] = useState<string[]>([]);\n\tconst [overflow, setOverflow] = useState(false);\n\tconst [moreTabs, setMoreTabs] = useState<ITabItem[]>([]);\n\tconst [tabs, setTabs] = useState<ITabItem[]>([]);\n\tconst { observe, unobserve } = useIntersectionObserver();\n\tconst size = useSize(navsRef);\n\n\tuseEffect(() => {\n\t\tcontentsRef.current.clear();\n\n\t\tif (!items) {\n\t\t\tif (!children) {\n\t\t\t\tsetTabs([]);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetTabs(\n\t\t\t\t(Children.map(children, (node, i) => {\n\t\t\t\t\tconst { key, props: nodeProps } = node as {\n\t\t\t\t\t\tkey?: string;\n\t\t\t\t\t\tprops?: any;\n\t\t\t\t\t};\n\t\t\t\t\tconst {\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tchildren: tabChildren,\n\t\t\t\t\t\tcontent,\n\t\t\t\t\t\tkeepDOM,\n\t\t\t\t\t\tclosable,\n\t\t\t\t\t} = nodeProps;\n\t\t\t\t\tconst tabKey = String(key ?? i);\n\t\t\t\t\tcontentsRef.current.set(tabKey, tabChildren ?? content);\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\tkey: tabKey,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tkeepDOM,\n\t\t\t\t\t\tclosable,\n\t\t\t\t\t};\n\t\t\t\t}) as ITabItem[]) ?? [],\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetTabs(\n\t\t\titems.map((item, i) => {\n\t\t\t\tif ([\"string\", \"number\"].includes(typeof item)) {\n\t\t\t\t\tconst key = String(item);\n\t\t\t\t\treturn { key, title: item };\n\t\t\t\t}\n\t\t\t\tconst key = String(item.key ?? i);\n\t\t\t\tcontentsRef.current.set(key, item.content);\n\t\t\t\tconst { content, ...rest } = item;\n\t\t\t\treturn {\n\t\t\t\t\t...rest,\n\t\t\t\t\tkey,\n\t\t\t\t};\n\t\t\t}),\n\t\t);\n\t}, [children, items]);\n\n\tconst add = (tab: ITabItem) => {\n\t\tconst tkey = String(tab.key ?? tabs.length);\n\t\tconst i = tabs.findIndex((t) => t.key === tkey);\n\n\t\tif (i > -1) {\n\t\t\topen(tabs[i].key ?? `${i}`);\n\t\t\treturn;\n\t\t}\n\n\t\tcontentsRef.current.set(tkey, tab.content);\n\t\tconst { content, ...rest } = tab;\n\t\tsetTabs((ts) => [...ts, { ...rest, key: tkey }]);\n\t\topen(tkey);\n\t};\n\n\tconst close = (key: string) => {\n\t\tconst i = tabs.findIndex((t) => t.key === key);\n\n\t\tif (i < 0) return;\n\n\t\tcontentsRef.current.delete(key);\n\t\tconst nextTabs = [...tabs];\n\t\tnextTabs.splice(i, 1);\n\t\tsetTabs(nextTabs);\n\n\t\tif (activeKey !== key) return;\n\n\t\tconst next = nextTabs[i] || nextTabs[i - 1];\n\t\topen(prevActiveKey ?? next?.key ?? \"\");\n\t};\n\n\tconst open = (key: string) => {\n\t\tif (key === activeKey) {\n\t\t\tif (!toggable) return;\n\n\t\t\tonTabChange?.(undefined, key);\n\t\t\tsetActiveKey(undefined);\n\n\t\t\tsetBarStyle({\n\t\t\t\theight: 0,\n\t\t\t\twidth: 0,\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\n\t\tsetPrevActiveKey(activeKey);\n\t\tonTabChange?.(key, activeKey);\n\t\tsetActiveKey(key);\n\t};\n\n\tuseEffect(() => {\n\t\tif (!size || hideMore || !observe) return;\n\t\tconst { scrollHeight, scrollWidth } = navsRef.current as HTMLElement;\n\t\tconst { width, height } = size;\n\n\t\tconst nextOverflow = scrollHeight > height || scrollWidth > width;\n\t\tsetOverflow(nextOverflow);\n\n\t\tif (!nextOverflow) return;\n\n\t\tnavRefs.current.map((nav, i) => {\n\t\t\tif (!nav) return;\n\t\t\tobserve(nav, (tar: HTMLElement, visible: boolean) => {\n\t\t\t\tsetTabs((ts) => {\n\t\t\t\t\tif (!ts[i]) return ts;\n\t\t\t\t\tconst nextTabs = ts.map((t, idx) =>\n\t\t\t\t\t\tidx === i ? { ...t, intersecting: visible } : t,\n\t\t\t\t\t);\n\t\t\t\t\tsetMoreTabs(nextTabs.filter((tab) => !tab.intersecting));\n\t\t\t\t\treturn nextTabs;\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}, [size, hideMore, tabs.length, observe]);\n\n\tuseEffect(() => {\n\t\tif (!bar || type === \"pane\" || activeKey === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst index = tabs.findIndex((tab) => tab.key === activeKey);\n\n\t\tsetTimeout(() => {\n\t\t\tconst nav = navRefs.current[index];\n\n\t\t\tif (!nav) return;\n\n\t\t\tif (tabs[index]?.keepDOM && activeKey) {\n\t\t\t\tsetCachedTabs((keys) => {\n\t\t\t\t\tif (keys.includes(activeKey)) return keys;\n\t\t\t\t\treturn [activeKey, ...keys];\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tconst { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;\n\t\t\tconst isLine = type === \"line\";\n\n\t\t\tsetBarStyle({\n\t\t\t\theight: !vertical && isLine ? \".25em\" : offsetHeight,\n\t\t\t\twidth: vertical && isLine ? \".25em\" : offsetWidth,\n\t\t\t\ttransform: `translate(${offsetLeft}px, ${offsetTop}px)`,\n\t\t\t});\n\t\t}, 16);\n\t}, [activeKey, bar, size, tabs, type, vertical]);\n\n\tuseEffect(() => {\n\t\tif (active === undefined || activeKey === active) return;\n\n\t\topen(active);\n\t}, [active]);\n\n\tuseEffect(() => {\n\t\tif (hideMore || !unobserve) return;\n\n\t\treturn () => {\n\t\t\tnavRefs.current?.map(unobserve);\n\t\t};\n\t}, [tabs.length, hideMore, unobserve]);\n\n\tuseEffect(() => {\n\t\tif (!navsRef.current || vertical) return;\n\n\t\tconst handleMouseWheel = (e) => {\n\t\t\te.stopPropagation();\n\t\t\te.preventDefault();\n\n\t\t\tif (vertical) return;\n\n\t\t\tnavsRef.current?.scrollBy({\n\t\t\t\tleft: e.deltaY + e.deltaX,\n\t\t\t});\n\t\t};\n\n\t\tnavsRef.current.addEventListener(\"wheel\", handleMouseWheel, {\n\t\t\tpassive: false,\n\t\t});\n\n\t\treturn () => {\n\t\t\tif (!navsRef.current) return;\n\t\t\tnavsRef.current.removeEventListener(\"wheel\", handleMouseWheel);\n\t\t};\n\t}, [navsRef.current]);\n\n\tuseImperativeHandle(ref, () => ({\n\t\topen,\n\t\tclose,\n\t\tadd,\n\t\tnavs: navsRef,\n\t}));\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-tabs\",\n\t\t\t\t{ flex: vertical, [`i-tabs-${type}`]: type !== \"default\" },\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-tab-navs-container\", {\n\t\t\t\t\t\"i-tab-navs-vertical\": vertical,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{prepend}\n\n\t\t\t\t<div\n\t\t\t\t\tref={navsRef}\n\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\"i-tab-navs\",\n\t\t\t\t\t\t`justify-${navsJustify}`,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{tabs.map((tab, i) => {\n\t\t\t\t\t\tconst { title, key = `${i}`, closable } = tab;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\tref={(ref) => (navRefs.current[i] = ref as any)}\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-tab-nav\", {\n\t\t\t\t\t\t\t\t\t\"i-tab-active\": activeKey === key,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tonClick={() => open(key)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{title}\n\n\t\t\t\t\t\t\t\t{closable && (\n\t\t\t\t\t\t\t\t\t<Helpericon\n\t\t\t\t\t\t\t\t\t\tas='i'\n\t\t\t\t\t\t\t\t\t\tactive\n\t\t\t\t\t\t\t\t\t\tclassName='i-tab-nav-close'\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tclose(key);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\n\t\t\t\t\t{bar && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tref={barRef}\n\t\t\t\t\t\t\tclassName={classNames(\"i-tab-navs-bar\", barClass)}\n\t\t\t\t\t\t\tstyle={barStyle}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{!hideMore && overflow && moreTabs.length > 0 && (\n\t\t\t\t\t<Popup\n\t\t\t\t\t\tarrow={false}\n\t\t\t\t\t\tposition={vertical ? \"right\" : \"bottom\"}\n\t\t\t\t\t\talign='end'\n\t\t\t\t\t\ttouchable\n\t\t\t\t\t\thideDelay={500}\n\t\t\t\t\t\tcontent={\n\t\t\t\t\t\t\t<div className='i-tabs-morelist pd-4'>\n\t\t\t\t\t\t\t\t{moreTabs.map((tab, i) => {\n\t\t\t\t\t\t\t\t\tconst { key = `${i}`, title } = tab;\n\t\t\t\t\t\t\t\t\tconst isActive = activeKey === key;\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\tclassName={classNames(\"i-tab-nav\", {\n\t\t\t\t\t\t\t\t\t\t\t\t\"i-tab-active\": isActive,\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => open(key)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderMore(moreTabs)}\n\t\t\t\t\t</Popup>\n\t\t\t\t)}\n\n\t\t\t\t{append}\n\t\t\t</div>\n\n\t\t\t<div className='i-tab-contents'>\n\t\t\t\t{tabs.map((tab, i) => {\n\t\t\t\t\tconst key = tab.key ?? `${i}`;\n\t\t\t\t\tconst content = contentsRef.current.get(key);\n\t\t\t\t\tconst isActive = activeKey === key;\n\t\t\t\t\tconst show =\n\t\t\t\t\t\tisActive ||\n\t\t\t\t\t\t(key !== undefined && cachedTabs.includes(key));\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\tshow && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-tab-content\", {\n\t\t\t\t\t\t\t\t\t\"i-tab-active\": isActive,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}) as CompositionTabs;\n\nTabs.Item = TabItem;\n\nexport default Tabs;\n"],"mappings":""}

package/lib/cjs/components/tag/index.js

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

package/lib/cjs/components/tag/index.js.map

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

package/lib/cjs/components/tag/tag.js

@@ -0,0 +1,32 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../utils/helpericon/index.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/tag/tag.tsx
+const Tag = (props) => {
+	const { dot, dotClass, outline, round, size = "normal", hoverShowClose, className, children, onClose, onClick, ...restProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: (0, classnames.default)("i-tag", {
+			"i-tag-outline": outline,
+			"i-tag-clickable": onClick,
+			[`i-tag-${size}`]: size !== "normal",
+			round
+		}, className),
+		onClick,
+		...restProps,
+		children: [
+			dot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, classnames.default)("i-tag-dot", dotClass) }),
+			children,
+			onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				active: true,
+				className: (0, classnames.default)("i-tag-close", { "i-tag-hover-close": hoverShowClose }),
+				onClick: onClose
+			})
+		]
+	});
+};
+//#endregion
+exports.default = Tag;
+
+//# sourceMappingURL=tag.js.map

package/lib/cjs/components/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","names":[],"sources":["../../../../packages/components/tag/tag.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { ITag } from \"./type\";\n\nconst Tag = (props: ITag) => {\n\tconst {\n\t\tdot,\n\t\tdotClass,\n\t\toutline,\n\t\tround,\n\t\tsize = \"normal\",\n\t\thoverShowClose,\n\t\tclassName,\n\t\tchildren,\n\t\tonClose,\n\t\tonClick,\n\t\t...restProps\n\t} = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-tag\",\n\t\t\t\t{\n\t\t\t\t\t\"i-tag-outline\": outline,\n\t\t\t\t\t\"i-tag-clickable\": onClick,\n\t\t\t\t\t[`i-tag-${size}`]: size !== \"normal\",\n\t\t\t\t\tround,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClick={onClick}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{dot && <span className={classNames(\"i-tag-dot\", dotClass)}></span>}\n\n\t\t\t{children}\n\n\t\t\t{onClose && (\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive\n\t\t\t\t\tclassName={classNames(\"i-tag-close\", {\n\t\t\t\t\t\t\"i-tag-hover-close\": hoverShowClose,\n\t\t\t\t\t})}\n\t\t\t\t\tonClick={onClose}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</span>\n\t);\n};\n\nexport default Tag;\n"],"mappings":""}

package/lib/cjs/components/text/highlight.js

@@ -0,0 +1,35 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_text = require("./text.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _Users_iann_codes_ioca_react_node_modules__pnpm_highlight_words_core_1_2_3_node_modules_highlight_words_core_dist_index_js = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/highlight-words-core@1.2.3/node_modules/highlight-words-core/dist/index.js");
+//#region packages/components/text/highlight.tsx
+function HighLight(props) {
+	const { keyword, text, escape, caseSensitive, renderWord = (word) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", { children: word }), ...restProps } = props;
+	const content = (0, react.useMemo)(() => {
+		const source = text;
+		return (0, _Users_iann_codes_ioca_react_node_modules__pnpm_highlight_words_core_1_2_3_node_modules_highlight_words_core_dist_index_js.findAll)({
+			searchWords: typeof keyword === "string" ? [keyword] : keyword,
+			textToHighlight: text,
+			caseSensitive,
+			autoEscape: escape
+		}).map((chunk, i) => {
+			const { end, highlight, start } = chunk;
+			const word = source.slice(start, end);
+			return highlight ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderWord(word) }, i) : word;
+		});
+	}, [
+		keyword,
+		text,
+		escape,
+		caseSensitive
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.default, {
+		...restProps,
+		children: content
+	});
+}
+//#endregion
+exports.default = HighLight;
+
+//# sourceMappingURL=highlight.js.map

package/lib/cjs/components/text/highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.js","names":["Fragment","Text"],"sources":["../../../../packages/components/text/highlight.tsx"],"sourcesContent":["import { findAll } from \"highlight-words-core\";\nimport { Fragment, useMemo } from \"react\";\nimport Text from \"./text\";\nimport { ITextHighLight } from \"./type\";\n\nexport default function HighLight(props: ITextHighLight) {\n\tconst {\n\t\tkeyword,\n\t\ttext,\n\t\tescape,\n\t\tcaseSensitive,\n\t\trenderWord = (word) => <mark>{word}</mark>,\n\t\t...restProps\n\t} = props;\n\n\tconst content = useMemo(() => {\n\t\tconst source = text;\n\t\tconst searchWords = typeof keyword === \"string\" ? [keyword] : keyword;\n\n\t\tconst chunks = findAll({\n\t\t\tsearchWords,\n\t\t\ttextToHighlight: text,\n\t\t\tcaseSensitive,\n\t\t\tautoEscape: escape,\n\t\t});\n\n\t\tconst result = chunks.map((chunk, i) => {\n\t\t\tconst { end, highlight, start } = chunk;\n\t\t\tconst word = source.slice(start, end);\n\n\t\t\treturn highlight ? (\n\t\t\t\t<Fragment key={i}>{renderWord(word)}</Fragment>\n\t\t\t) : (\n\t\t\t\tword\n\t\t\t);\n\t\t});\n\n\t\treturn result;\n\t}, [keyword, text, escape, caseSensitive]);\n\n\treturn <Text {...restProps}>{content}</Text>;\n}\n"],"mappings":";;;;;;AAKA,SAAwB,UAAU,OAAuB;CACxD,MAAM,EACL,SACA,MACA,QACA,eACA,cAAc,SAAS,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,MAAY,CAAA,EAC1C,GAAG,cACA;CAEJ,MAAM,WAAA,GAAA,MAAA,eAAwB;EAC7B,MAAM,SAAS;AAqBf,UAAA,GAAA,2HAAA,SAlBuB;GACtB,aAHmB,OAAO,YAAY,WAAW,CAAC,QAAQ,GAAG;GAI7D,iBAAiB;GACjB;GACA,YAAY;GACZ,CAAC,CAEoB,KAAK,OAAO,MAAM;GACvC,MAAM,EAAE,KAAK,WAAW,UAAU;GAClC,MAAM,OAAO,OAAO,MAAM,OAAO,IAAI;AAErC,UAAO,YACN,iBAAA,GAAA,kBAAA,KAACA,MAAAA,UAAD,EAAA,UAAmB,WAAW,KAAK,EAAY,EAAhC,EAAgC,GAE/C;IAEA;IAGA;EAAC;EAAS;EAAM;EAAQ;EAAc,CAAC;AAE1C,QAAO,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;EAAM,GAAI;YAAY;EAAe,CAAA"}

package/lib/cjs/components/text/index.js

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

package/lib/cjs/components/text/index.js.map

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

package/lib/cjs/components/text/number.js

@@ -0,0 +1,32 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_utils = require("../../js/utils.js");
+const require_text = require("./text.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/text/number.tsx
+function Number(props) {
+	const { count, to, decimal, thousand = ",", duration = 2400, easing, ...restProps } = props;
+	const [n, setN] = (0, react.useState)(count);
+	const number = (0, react.useMemo)(() => {
+		if (n === void 0) return;
+		const z = n.toFixed(decimal);
+		if (!thousand) return z;
+		return require_utils.formatNumber(n, {
+			precision: decimal,
+			thousand
+		});
+	}, [n, thousand]);
+	(0, react.useEffect)(() => {
+		if (count === void 0 || to === void 0) return;
+		require_utils.animate(count, to, duration, (v) => setN(count + v), easing);
+	}, [to]);
+	(0, react.useEffect)(() => setN(count), [count]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.default, {
+		...restProps,
+		children: number
+	});
+}
+//#endregion
+exports.default = Number;
+
+//# sourceMappingURL=number.js.map

package/lib/cjs/components/text/number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.js","names":["formatNumber","Text"],"sources":["../../../../packages/components/text/number.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { animate, formatNumber } from \"../../js/utils\";\nimport Text from \"./text\";\nimport { ITextNumber } from \"./type\";\n\nexport default function Number(props: ITextNumber) {\n\tconst {\n\t\tcount,\n\t\tto,\n\t\tdecimal,\n\t\tthousand = \",\",\n\t\tduration = 2400,\n\t\teasing,\n\t\t...restProps\n\t} = props;\n\tconst [n, setN] = useState(count);\n\n\tconst number = useMemo(() => {\n\t\tif (n === undefined) return;\n\n\t\tconst z = n.toFixed(decimal);\n\n\t\tif (!thousand) return z;\n\n\t\treturn formatNumber(n, { precision: decimal, thousand });\n\t}, [n, thousand]);\n\n\tuseEffect(() => {\n\t\tif (count === undefined || to === undefined) return;\n\n\t\tanimate(count, to, duration, (v) => setN(count + v), easing);\n\t}, [to]);\n\n\tuseEffect(() => setN(count), [count]);\n\n\treturn <Text {...restProps}>{number}</Text>;\n}\n"],"mappings":";;;;;;AAKA,SAAwB,OAAO,OAAoB;CAClD,MAAM,EACL,OACA,IACA,SACA,WAAW,KACX,WAAW,MACX,QACA,GAAG,cACA;CACJ,MAAM,CAAC,GAAG,SAAA,GAAA,MAAA,UAAiB,MAAM;CAEjC,MAAM,UAAA,GAAA,MAAA,eAAuB;AAC5B,MAAI,MAAM,KAAA,EAAW;EAErB,MAAM,IAAI,EAAE,QAAQ,QAAQ;AAE5B,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAOA,cAAAA,aAAa,GAAG;GAAE,WAAW;GAAS;GAAU,CAAC;IACtD,CAAC,GAAG,SAAS,CAAC;AAEjB,EAAA,GAAA,MAAA,iBAAgB;AACf,MAAI,UAAU,KAAA,KAAa,OAAO,KAAA,EAAW;AAE7C,gBAAA,QAAQ,OAAO,IAAI,WAAW,MAAM,KAAK,QAAQ,EAAE,EAAE,OAAO;IAC1D,CAAC,GAAG,CAAC;AAER,EAAA,GAAA,MAAA,iBAAgB,KAAK,MAAM,EAAE,CAAC,MAAM,CAAC;AAErC,QAAO,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;EAAM,GAAI;YAAY;EAAc,CAAA"}

package/lib/cjs/components/text/text.js

@@ -0,0 +1,39 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_highlight = require("./highlight.js");
+const require_number = require("./number.js");
+const require_time = require("./time.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/text/text.tsx
+const Text = (props) => {
+	const { as: Tag = "span", size, weight, decoration, gradient, wave, style, className, children } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		style: {
+			fontSize: size,
+			fontWeight: weight,
+			textDecoration: decoration,
+			...(0, react.useMemo)(() => {
+				if (!gradient || !Array.isArray(gradient)) return {};
+				return {
+					backgroundImage: `-webkit-linear-gradient(${gradient.join(",")})`,
+					backgroundClip: "text"
+				};
+			}, [gradient]),
+			...style
+		},
+		className: (0, classnames.default)(className, {
+			"i-text-gradient": gradient,
+			"i-text-gradient-wave": wave
+		}),
+		children
+	});
+};
+Text.Number = require_number.default;
+Text.Time = require_time.default;
+Text.HighLight = require_highlight.default;
+//#endregion
+exports.default = Text;
+
+//# sourceMappingURL=text.js.map

package/lib/cjs/components/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../../../packages/components/text/text.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useMemo } from \"react\";\nimport HighLight from \"./highlight\";\nimport \"./index.css\";\nimport Number from \"./number\";\nimport Time from \"./time\";\nimport { CompositionText, IText } from \"./type\";\n\nconst Text = (props: IText) => {\n\tconst {\n\t\tas: Tag = \"span\",\n\t\tsize,\n\t\tweight,\n\t\tdecoration,\n\t\tgradient,\n\t\twave,\n\t\tstyle,\n\t\tclassName,\n\t\tchildren,\n\t} = props;\n\n\tconst gradients = useMemo(() => {\n\t\tif (!gradient || !Array.isArray(gradient)) return {};\n\n\t\treturn {\n\t\t\tbackgroundImage: `-webkit-linear-gradient(${gradient.join(\",\")})`,\n\t\t\tbackgroundClip: \"text\",\n\t\t};\n\t}, [gradient]);\n\n\treturn (\n\t\t<Tag\n\t\t\tstyle={{\n\t\t\t\tfontSize: size,\n\t\t\t\tfontWeight: weight,\n\t\t\t\ttextDecoration: decoration,\n\t\t\t\t...gradients,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\tclassName={classNames(className, {\n\t\t\t\t\"i-text-gradient\": gradient,\n\t\t\t\t\"i-text-gradient-wave\": wave,\n\t\t\t})}\n\t\t>\n\t\t\t{children}\n\t\t</Tag>\n\t);\n};\n\nText.Number = Number;\nText.Time = Time;\nText.HighLight = HighLight;\n\nexport default Text as CompositionText;\n"],"mappings":""}

package/lib/cjs/components/text/time.js

@@ -0,0 +1,24 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_utils = require("../../js/utils.js");
+const require_text = require("./text.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/text/time.tsx
+function Number(props) {
+	const { seconds, zero, units, ...restProps } = props;
+	const text = (0, react.useMemo)(() => {
+		if (seconds === void 0) return "";
+		return require_utils.formatTime(seconds, {
+			zero,
+			units
+		});
+	}, [seconds]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.default, {
+		...restProps,
+		children: text
+	});
+}
+//#endregion
+exports.default = Number;
+
+//# sourceMappingURL=time.js.map

package/lib/cjs/components/text/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","names":["formatTime","Text"],"sources":["../../../../packages/components/text/time.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { formatTime } from \"../../js/utils\";\nimport Text from \"./text\";\nimport { ITextTime } from \"./type\";\n\nexport default function Number(props: ITextTime) {\n\tconst { seconds, zero, units, ...restProps } = props;\n\n\tconst text = useMemo(() => {\n\t\tif (seconds === undefined) return \"\";\n\n\t\treturn formatTime(seconds, {\n\t\t\tzero,\n\t\t\tunits,\n\t\t});\n\t}, [seconds]);\n\n\treturn <Text {...restProps}>{text}</Text>;\n}\n"],"mappings":";;;;;;AAKA,SAAwB,OAAO,OAAkB;CAChD,MAAM,EAAE,SAAS,MAAM,OAAO,GAAG,cAAc;CAE/C,MAAM,QAAA,GAAA,MAAA,eAAqB;AAC1B,MAAI,YAAY,KAAA,EAAW,QAAO;AAElC,SAAOA,cAAAA,WAAW,SAAS;GAC1B;GACA;GACA,CAAC;IACA,CAAC,QAAQ,CAAC;AAEb,QAAO,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD;EAAM,GAAI;YAAY;EAAY,CAAA"}

package/lib/cjs/components/tree/index.js

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

package/lib/cjs/components/tree/index.js.map

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