@ioca/react 1.4.78 → 1.4.79

package/lib/cjs/components/popup/popup.cjs

@@ -0,0 +1,425 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_hooks = require("../../js/hooks.cjs");
+const require_utils = require("../../js/utils.cjs");
+const require_content = require("./content.cjs");
+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");
+//#region packages/components/popup/popup.tsx
+function Popup(props) {
+	const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, onVisibleChange } = props;
+	const triggerRef = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
+	const timerRef = (0, react.useRef)(null);
+	const afterHideTimerRef = (0, react.useRef)(null);
+	const rafRef = (0, react.useRef)(null);
+	const [show, setShow] = (0, react.useState)(false);
+	const showRef = (0, react.useRef)(false);
+	showRef.current = show;
+	const latestRef = (0, react.useRef)({
+		disabled,
+		trigger,
+		touchable,
+		showDelay,
+		hideDelay,
+		position,
+		gap,
+		offset,
+		align,
+		fitSize,
+		onVisibleChange
+	});
+	latestRef.current = {
+		disabled,
+		trigger,
+		touchable,
+		showDelay,
+		hideDelay,
+		position,
+		gap,
+		offset,
+		align,
+		fitSize,
+		onVisibleChange
+	};
+	const phaseRef = (0, react.useRef)("");
+	const lastPosRef = (0, react.useRef)(null);
+	const lastArrowRef = (0, react.useRef)(null);
+	const arrowElRef = (0, react.useRef)(null);
+	const pointRef = (0, react.useRef)(null);
+	const clearTimer = () => {
+		if (!timerRef.current) return;
+		clearTimeout(timerRef.current);
+		timerRef.current = null;
+		phaseRef.current = "";
+	};
+	const clearAllTimers = () => {
+		clearTimer();
+		if (afterHideTimerRef.current) {
+			clearTimeout(afterHideTimerRef.current);
+			afterHideTimerRef.current = null;
+		}
+		if (rafRef.current !== null) {
+			cancelAnimationFrame(rafRef.current);
+			rafRef.current = null;
+		}
+	};
+	const setContentVisible = (visible) => {
+		const el = contentRef.current;
+		if (!el) return;
+		el.style.opacity = visible ? "1" : "0";
+		el.style.transform = visible ? "none" : "translate(0, 2px)";
+	};
+	const ensureBaseStyle = () => {
+		const el = contentRef.current;
+		if (!el) return;
+		const pos = "fixed";
+		if (el.style.position !== pos) el.style.position = pos;
+	};
+	const applyFitSize = () => {
+		const o = latestRef.current;
+		const triggerEl = triggerRef.current;
+		const contentEl = contentRef.current;
+		if (!triggerEl || !contentEl) return;
+		const vertical = ["top", "bottom"].includes(o.position);
+		const key = vertical ? "width" : "height";
+		if (!o.fitSize) {
+			contentEl.style[key] = "";
+			return;
+		}
+		const size = triggerEl[vertical ? "offsetWidth" : "offsetHeight"];
+		contentEl.style[key] = typeof size === "number" ? `${size}px` : "";
+	};
+	const applyArrow = (arrowX, arrowY, arrowPos) => {
+		const contentEl = contentRef.current;
+		if (!contentEl) return;
+		const arrowEl = arrowElRef.current ?? contentEl.querySelector(".i-popup-arrow");
+		arrowElRef.current = arrowEl;
+		if (!arrowEl) return;
+		let left = arrowX ?? 0;
+		let top = arrowY ?? 0;
+		let transform = "";
+		switch (arrowPos) {
+			case "left":
+				left += 2;
+				transform = `translate(-100%, -50%) rotate(180deg)`;
+				break;
+			case "right":
+				left -= 2;
+				transform = `translate(0, -50%)`;
+				break;
+			case "top":
+				top -= 2;
+				transform = `translate(-50%, -50%) rotate(-90deg)`;
+				break;
+			case "bottom":
+				top += 2;
+				transform = `translate(-50%, -50%) rotate(90deg)`;
+				break;
+			default: break;
+		}
+		const prev = lastArrowRef.current;
+		if (prev && prev.left === left && prev.top === top && prev.transform === transform) return;
+		lastArrowRef.current = {
+			left,
+			top,
+			transform
+		};
+		arrowEl.style.left = `${left}px`;
+		arrowEl.style.top = `${top}px`;
+		arrowEl.style.transform = transform;
+	};
+	const applyLeftTop = (left, top) => {
+		const contentEl = contentRef.current;
+		if (!contentEl) return;
+		const prev = lastPosRef.current;
+		if (prev && prev.left === left && prev.top === top) return;
+		lastPosRef.current = {
+			left,
+			top
+		};
+		contentEl.style.left = `${left}px`;
+		contentEl.style.top = `${top}px`;
+	};
+	const computeRelativePosition = () => {
+		const triggerEl = triggerRef.current;
+		const contentEl = contentRef.current;
+		if (!triggerEl || !contentEl) return;
+		const o = latestRef.current;
+		applyFitSize();
+		const [left, top, { arrowX, arrowY, arrowPos }] = require_utils.getPosition(triggerEl, contentEl, {
+			position: o.position,
+			gap: o.gap,
+			offset: o.offset,
+			align: o.align,
+			refWindow: true
+		});
+		applyLeftTop(left, top);
+		applyArrow(arrowX, arrowY, arrowPos);
+	};
+	const computePointPosition = () => {
+		const contentEl = contentRef.current;
+		if (!contentEl) return;
+		const point = pointRef.current;
+		if (!point) return;
+		const [left, top] = require_utils.getPointPosition(point, contentEl);
+		applyLeftTop(left, top);
+	};
+	const scheduleComputePosition = () => {
+		if (!showRef.current) return;
+		if (rafRef.current !== null) return;
+		rafRef.current = requestAnimationFrame(() => {
+			rafRef.current = null;
+			if (!showRef.current) return;
+			ensureBaseStyle();
+			if (latestRef.current.trigger === "contextmenu") {
+				computePointPosition();
+				return;
+			}
+			computeRelativePosition();
+		});
+	};
+	const handleShow = () => {
+		const opts = latestRef.current;
+		if (opts.disabled) return;
+		clearAllTimers();
+		if (showRef.current && (opts.trigger !== "hover" || opts.trigger === "hover" && !opts.touchable)) {
+			ensureBaseStyle();
+			computeRelativePosition();
+			setContentVisible(true);
+			return;
+		}
+		phaseRef.current = "showing";
+		if (!showRef.current) {
+			lastPosRef.current = null;
+			lastArrowRef.current = null;
+			arrowElRef.current = null;
+			setShow(true);
+		}
+		timerRef.current = setTimeout(() => {
+			if (phaseRef.current !== "showing") return;
+			rafRef.current = requestAnimationFrame(() => {
+				rafRef.current = null;
+				if (phaseRef.current !== "showing") return;
+				if (!contentRef.current) return;
+				ensureBaseStyle();
+				if (opts.trigger === "contextmenu") computePointPosition();
+				else computeRelativePosition();
+				setContentVisible(true);
+				opts.onVisibleChange?.(true);
+				clearTimer();
+				phaseRef.current = "";
+			});
+		}, opts.showDelay);
+	};
+	const handleHide = () => {
+		if (!showRef.current) return;
+		clearAllTimers();
+		phaseRef.current = "hiding";
+		timerRef.current = setTimeout(() => {
+			if (phaseRef.current !== "hiding") {
+				clearTimer();
+				return;
+			}
+			setContentVisible(false);
+			afterHideTimerRef.current = setTimeout(() => {
+				afterHideTimerRef.current = null;
+				setShow(false);
+				clearAllTimers();
+				latestRef.current.onVisibleChange?.(false);
+				phaseRef.current = "";
+			}, 160);
+		}, latestRef.current.hideDelay);
+	};
+	const handleToggle = (action) => {
+		if (action !== void 0) {
+			action ? handleShow() : handleHide();
+			return;
+		}
+		showRef.current ? handleHide() : handleShow();
+	};
+	const hideRef = (0, react.useRef)(handleHide);
+	const toggleRef = (0, react.useRef)(handleToggle);
+	hideRef.current = handleHide;
+	toggleRef.current = handleToggle;
+	const doHide = (0, react.useMemo)(() => () => hideRef.current(), []);
+	const doToggle = (0, react.useMemo)(() => (action) => toggleRef.current(action), []);
+	const eventMaps = (0, react.useMemo)(() => {
+		return {
+			click: { onClick: () => doToggle(true) },
+			hover: {
+				onMouseEnter: () => doToggle(true),
+				onMouseLeave: () => doToggle(false)
+			},
+			focus: {
+				onFocus: () => doToggle(true),
+				onBlur: () => doToggle(false)
+			},
+			contextmenu: { onContextMenu: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				pointRef.current = {
+					pageX: e.pageX,
+					pageY: e.pageY
+				};
+				if (showRef.current) {
+					ensureBaseStyle();
+					computePointPosition();
+					return;
+				}
+				clearAllTimers();
+				phaseRef.current = "showing";
+				lastPosRef.current = null;
+				lastArrowRef.current = null;
+				arrowElRef.current = null;
+				setShow(true);
+				timerRef.current = setTimeout(() => {
+					if (phaseRef.current !== "showing") return;
+					if (!contentRef.current) return;
+					ensureBaseStyle();
+					computePointPosition();
+					setContentVisible(true);
+					clearTimer();
+					latestRef.current.onVisibleChange?.(true);
+					phaseRef.current = "";
+				}, latestRef.current.showDelay);
+			} },
+			none: {}
+		};
+	}, [doToggle]);
+	const contentTouch = (0, react.useMemo)(() => {
+		if (!touchable) return {};
+		const events = {};
+		if (trigger === "hover") {
+			events["onMouseEnter"] = () => {
+				clearTimer();
+			};
+			events["onMouseLeave"] = () => handleToggle(false);
+		}
+		return events;
+	}, [touchable, trigger]);
+	const { observe, unobserve, disconnect } = require_hooks.useResizeObserver();
+	(0, react.useEffect)(() => {
+		if (!observe) return;
+		const triggerEl = triggerRef.current;
+		const contentEl = contentRef.current;
+		if (triggerEl) observe(triggerEl, scheduleComputePosition);
+		if (contentEl) observe(contentEl, scheduleComputePosition);
+		return () => {
+			if (contentEl) unobserve(contentEl);
+			if (triggerEl) unobserve(triggerEl);
+			disconnect();
+		};
+	}, [
+		trigger,
+		observe,
+		unobserve,
+		disconnect,
+		show
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (!show) return;
+		ensureBaseStyle();
+		if (latestRef.current.trigger === "contextmenu") computePointPosition();
+		else computeRelativePosition();
+	}, [show]);
+	(0, react.useLayoutEffect)(() => {
+		doToggle(visible);
+	}, [visible]);
+	(0, react.useEffect)(() => {
+		return () => {
+			clearAllTimers();
+		};
+	}, []);
+	const mouseUpHandlerRef = (0, react.useRef)(() => {});
+	mouseUpHandlerRef.current = (e) => {
+		if (!showRef.current) return;
+		const triggerEl = triggerRef.current;
+		const contentEl = contentRef.current;
+		if (!triggerEl || !contentEl) return;
+		const tar = e.target;
+		if (triggerEl.contains(tar) || contentEl.contains(tar)) return;
+		doHide();
+	};
+	require_hooks.useMouseUp((0, react.useMemo)(() => (e) => mouseUpHandlerRef.current(e), []));
+	(0, react.useEffect)(() => {
+		if (!show) return;
+		if (typeof window === "undefined") return;
+		const onScrollOrResize = (0, _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs.debounce)({ delay: 160 }, () => {
+			scheduleComputePosition();
+		});
+		window.addEventListener("scroll", onScrollOrResize, {
+			passive: true,
+			capture: true
+		});
+		return () => {
+			window.removeEventListener("scroll", onScrollOrResize, true);
+		};
+	}, [show]);
+	const mergeRefs = (...refs) => {
+		return (node) => {
+			for (const ref of refs) {
+				if (!ref) continue;
+				if (typeof ref === "function") ref(node);
+				else ref.current = node;
+			}
+		};
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(() => {
+		const events = eventMaps[trigger];
+		const items = react.Children.toArray(children);
+		const canAttachRef = (el) => {
+			if (!(0, react.isValidElement)(el)) return false;
+			const t = el.type;
+			if (typeof t === "string") return true;
+			if (t?.prototype?.isReactComponent) return true;
+			if (t?.$$typeof === Symbol.for("react.forward_ref")) return true;
+			return false;
+		};
+		if (items.length !== 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: triggerRef,
+			...events,
+			className: "i-popup-trigger",
+			style: { display: "inline-block" },
+			children
+		});
+		const only = items[0];
+		if (!(0, react.isValidElement)(only) || !canAttachRef(only)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: triggerRef,
+			...events,
+			className: "i-popup-trigger",
+			style: { display: "inline-block" },
+			children: only
+		});
+		const { className: childClassName, ...restProps } = only.props;
+		const nextProps = { ...restProps };
+		for (const evt of Object.keys(events)) {
+			const theirs = restProps[evt];
+			const ours = events[evt];
+			nextProps[evt] = typeof theirs === "function" ? (e) => {
+				ours(e);
+				theirs(e);
+			} : ours;
+		}
+		return (0, react.cloneElement)(only, {
+			ref: mergeRefs(only.ref, triggerRef),
+			className: childClassName,
+			...nextProps
+		});
+	})(), show && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_content.default, {
+		ref: contentRef,
+		arrow: arrow && trigger !== "contextmenu",
+		style: {
+			...style,
+			position: "fixed"
+		},
+		className,
+		...contentTouch,
+		trigger: triggerRef.current,
+		children: content
+	})] });
+}
+//#endregion
+exports.default = Popup;
+
+//# sourceMappingURL=popup.cjs.map

package/lib/cjs/components/popup/popup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.cjs","names":[],"sources":["../../../../packages/components/popup/popup.tsx"],"sourcesContent":["import { debounce } from \"radash\";\nimport {\n\tChildren,\n\tMouseEvent,\n\tRef,\n\tcloneElement,\n\tisValidElement,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { useMouseUp, useResizeObserver } from \"../../js/hooks\";\nimport { getPointPosition, getPosition } from \"../../js/utils\";\nimport Content from \"./content\";\nimport \"./index.css\";\nimport { IPopup } from \"./type\";\n\nexport default function Popup(props: IPopup) {\n\tconst {\n\t\tvisible = false,\n\t\tcontent,\n\t\ttrigger = \"hover\",\n\t\tgap = 12,\n\t\toffset = 8,\n\t\tposition = \"top\",\n\t\tshowDelay = 16,\n\t\thideDelay = 12,\n\t\ttouchable,\n\t\tarrow = true,\n\t\talign = \"center\",\n\t\tfitSize,\n\t\tdisabled,\n\t\tstyle,\n\t\tclassName,\n\t\tchildren,\n\t\tonVisibleChange,\n\t} = props;\n\n\tconst triggerRef = useRef<HTMLElement>(null);\n\tconst contentRef = useRef<HTMLDivElement>(null);\n\tconst timerRef = useRef<any>(null);\n\tconst afterHideTimerRef = useRef<any>(null);\n\tconst rafRef = useRef<number | null>(null);\n\n\tconst [show, setShow] = useState(false);\n\tconst showRef = useRef(false);\n\tshowRef.current = show;\n\n\tconst latestRef = useRef({\n\t\tdisabled,\n\t\ttrigger,\n\t\ttouchable,\n\t\tshowDelay,\n\t\thideDelay,\n\t\tposition,\n\t\tgap,\n\t\toffset,\n\t\talign,\n\t\tfitSize,\n\t\tonVisibleChange,\n\t});\n\tlatestRef.current = {\n\t\tdisabled,\n\t\ttrigger,\n\t\ttouchable,\n\t\tshowDelay,\n\t\thideDelay,\n\t\tposition,\n\t\tgap,\n\t\toffset,\n\t\talign,\n\t\tfitSize,\n\t\tonVisibleChange,\n\t};\n\n\tconst phaseRef = useRef<\"\" | \"showing\" | \"hiding\">(\"\");\n\tconst lastPosRef = useRef<{ left: number; top: number } | null>(null);\n\tconst lastArrowRef = useRef<{\n\t\tleft: number;\n\t\ttop: number;\n\t\ttransform: string;\n\t} | null>(null);\n\tconst arrowElRef = useRef<HTMLElement | null>(null);\n\tconst pointRef = useRef<{ pageX: number; pageY: number } | null>(null);\n\n\tconst clearTimer = () => {\n\t\tif (!timerRef.current) return;\n\t\tclearTimeout(timerRef.current);\n\t\ttimerRef.current = null;\n\t\tphaseRef.current = \"\";\n\t};\n\n\tconst clearAllTimers = () => {\n\t\tclearTimer();\n\t\tif (afterHideTimerRef.current) {\n\t\t\tclearTimeout(afterHideTimerRef.current);\n\t\t\tafterHideTimerRef.current = null;\n\t\t}\n\t\tif (rafRef.current !== null) {\n\t\t\tcancelAnimationFrame(rafRef.current);\n\t\t\trafRef.current = null;\n\t\t}\n\t};\n\n\tconst setContentVisible = (visible: boolean) => {\n\t\tconst el = contentRef.current;\n\t\tif (!el) return;\n\t\tel.style.opacity = visible ? \"1\" : \"0\";\n\t\tel.style.transform = visible ? \"none\" : \"translate(0, 2px)\";\n\t};\n\n\tconst ensureBaseStyle = () => {\n\t\tconst el = contentRef.current;\n\t\tif (!el) return;\n\t\tconst pos = \"fixed\";\n\t\tif (el.style.position !== pos) el.style.position = pos;\n\t};\n\n\tconst applyFitSize = () => {\n\t\tconst o = latestRef.current;\n\t\tconst triggerEl = triggerRef.current;\n\t\tconst contentEl = contentRef.current;\n\t\tif (!triggerEl || !contentEl) return;\n\n\t\tconst vertical = [\"top\", \"bottom\"].includes(o.position);\n\t\tconst key = vertical ? \"width\" : \"height\";\n\t\tif (!o.fitSize) {\n\t\t\t(contentEl.style as any)[key] = \"\";\n\t\t\treturn;\n\t\t}\n\n\t\tconst size = triggerEl[vertical ? \"offsetWidth\" : \"offsetHeight\"];\n\t\t(contentEl.style as any)[key] =\n\t\t\ttypeof size === \"number\" ? `${size}px` : \"\";\n\t};\n\n\tconst applyArrow = (arrowX: number, arrowY: number, arrowPos: string) => {\n\t\tconst contentEl = contentRef.current;\n\t\tif (!contentEl) return;\n\n\t\tconst arrowEl =\n\t\t\tarrowElRef.current ??\n\t\t\t(contentEl.querySelector(\".i-popup-arrow\") as HTMLElement | null);\n\t\tarrowElRef.current = arrowEl;\n\t\tif (!arrowEl) return;\n\n\t\tlet left = arrowX ?? 0;\n\t\tlet top = arrowY ?? 0;\n\t\tlet transform = \"\";\n\n\t\tswitch (arrowPos) {\n\t\t\tcase \"left\":\n\t\t\t\tleft += 2;\n\t\t\t\ttransform = `translate(-100%, -50%) rotate(180deg)`;\n\t\t\t\tbreak;\n\t\t\tcase \"right\":\n\t\t\t\tleft -= 2;\n\t\t\t\ttransform = `translate(0, -50%)`;\n\t\t\t\tbreak;\n\t\t\tcase \"top\":\n\t\t\t\ttop -= 2;\n\t\t\t\ttransform = `translate(-50%, -50%) rotate(-90deg)`;\n\t\t\t\tbreak;\n\t\t\tcase \"bottom\":\n\t\t\t\ttop += 2;\n\t\t\t\ttransform = `translate(-50%, -50%) rotate(90deg)`;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tconst prev = lastArrowRef.current;\n\t\tif (\n\t\t\tprev &&\n\t\t\tprev.left === left &&\n\t\t\tprev.top === top &&\n\t\t\tprev.transform === transform\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tlastArrowRef.current = { left, top, transform };\n\t\tarrowEl.style.left = `${left}px`;\n\t\tarrowEl.style.top = `${top}px`;\n\t\tarrowEl.style.transform = transform;\n\t};\n\n\tconst applyLeftTop = (left: number, top: number) => {\n\t\tconst contentEl = contentRef.current;\n\t\tif (!contentEl) return;\n\n\t\tconst prev = lastPosRef.current;\n\t\tif (prev && prev.left === left && prev.top === top) return;\n\n\t\tlastPosRef.current = { left, top };\n\t\tcontentEl.style.left = `${left}px`;\n\t\tcontentEl.style.top = `${top}px`;\n\t};\n\n\tconst computeRelativePosition = () => {\n\t\tconst triggerEl = triggerRef.current;\n\t\tconst contentEl = contentRef.current;\n\t\tif (!triggerEl || !contentEl) return;\n\n\t\tconst o = latestRef.current;\n\t\tapplyFitSize();\n\n\t\tconst [left, top, { arrowX, arrowY, arrowPos }] = getPosition(\n\t\t\ttriggerEl,\n\t\t\tcontentEl,\n\t\t\t{\n\t\t\t\tposition: o.position,\n\t\t\t\tgap: o.gap,\n\t\t\t\toffset: o.offset,\n\t\t\t\talign: o.align,\n\t\t\t\trefWindow: true,\n\t\t\t},\n\t\t);\n\n\t\tapplyLeftTop(left, top);\n\t\tapplyArrow(arrowX, arrowY, arrowPos);\n\t};\n\n\tconst computePointPosition = () => {\n\t\tconst contentEl = contentRef.current as HTMLElement | null;\n\t\tif (!contentEl) return;\n\t\tconst point = pointRef.current;\n\t\tif (!point) return;\n\n\t\tconst [left, top] = getPointPosition(point as any, contentEl);\n\t\tapplyLeftTop(left, top);\n\t};\n\n\tconst scheduleComputePosition = () => {\n\t\tif (!showRef.current) return;\n\t\tif (rafRef.current !== null) return;\n\t\trafRef.current = requestAnimationFrame(() => {\n\t\t\trafRef.current = null;\n\t\t\tif (!showRef.current) return;\n\t\t\tensureBaseStyle();\n\n\t\t\tif (latestRef.current.trigger === \"contextmenu\") {\n\t\t\t\tcomputePointPosition();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcomputeRelativePosition();\n\t\t});\n\t};\n\n\tconst handleShow = () => {\n\t\tconst opts = latestRef.current;\n\t\tif (opts.disabled) return;\n\t\tclearAllTimers();\n\t\tif (\n\t\t\tshowRef.current &&\n\t\t\t(opts.trigger !== \"hover\" ||\n\t\t\t\t(opts.trigger === \"hover\" && !opts.touchable))\n\t\t) {\n\t\t\tensureBaseStyle();\n\t\t\tcomputeRelativePosition();\n\t\t\tsetContentVisible(true);\n\t\t\treturn;\n\t\t}\n\n\t\tphaseRef.current = \"showing\";\n\t\tif (!showRef.current) {\n\t\t\tlastPosRef.current = null;\n\t\t\tlastArrowRef.current = null;\n\t\t\tarrowElRef.current = null;\n\t\t\tsetShow(true);\n\t\t}\n\n\t\ttimerRef.current = setTimeout(() => {\n\t\t\tif (phaseRef.current !== \"showing\") return;\n\n\t\t\trafRef.current = requestAnimationFrame(() => {\n\t\t\t\trafRef.current = null;\n\t\t\t\tif (phaseRef.current !== \"showing\") return;\n\t\t\t\tif (!contentRef.current) return;\n\n\t\t\t\tensureBaseStyle();\n\t\t\t\tif (opts.trigger === \"contextmenu\") {\n\t\t\t\t\tcomputePointPosition();\n\t\t\t\t} else {\n\t\t\t\t\tcomputeRelativePosition();\n\t\t\t\t}\n\t\t\t\tsetContentVisible(true);\n\t\t\t\topts.onVisibleChange?.(true);\n\t\t\t\tclearTimer();\n\t\t\t\tphaseRef.current = \"\";\n\t\t\t});\n\t\t}, opts.showDelay);\n\t};\n\n\tconst handleHide = () => {\n\t\tif (!showRef.current) return;\n\n\t\tclearAllTimers();\n\t\tphaseRef.current = \"hiding\";\n\t\ttimerRef.current = setTimeout(() => {\n\t\t\tif (phaseRef.current !== \"hiding\") {\n\t\t\t\tclearTimer();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetContentVisible(false);\n\n\t\t\tafterHideTimerRef.current = setTimeout(() => {\n\t\t\t\tafterHideTimerRef.current = null;\n\t\t\t\tsetShow(false);\n\t\t\t\tclearAllTimers();\n\t\t\t\tlatestRef.current.onVisibleChange?.(false);\n\t\t\t\tphaseRef.current = \"\";\n\t\t\t}, 160);\n\t\t}, latestRef.current.hideDelay);\n\t};\n\n\tconst handleToggle = (action?: boolean) => {\n\t\tif (action !== undefined) {\n\t\t\taction ? handleShow() : handleHide();\n\t\t\treturn;\n\t\t}\n\t\tshowRef.current ? handleHide() : handleShow();\n\t};\n\n\tconst hideRef = useRef(handleHide);\n\tconst toggleRef = useRef(handleToggle);\n\thideRef.current = handleHide;\n\ttoggleRef.current = handleToggle;\n\n\tconst doHide = useMemo(() => () => hideRef.current(), []);\n\tconst doToggle = useMemo(\n\t\t() => (action?: boolean) => toggleRef.current(action),\n\t\t[],\n\t);\n\n\tconst eventMaps = useMemo(() => {\n\t\treturn {\n\t\t\tclick: {\n\t\t\t\tonClick: () => doToggle(true),\n\t\t\t},\n\t\t\thover: {\n\t\t\t\tonMouseEnter: () => doToggle(true),\n\t\t\t\tonMouseLeave: () => doToggle(false),\n\t\t\t},\n\t\t\tfocus: {\n\t\t\t\tonFocus: () => doToggle(true),\n\t\t\t\tonBlur: () => doToggle(false),\n\t\t\t},\n\t\t\tcontextmenu: {\n\t\t\t\tonContextMenu: (e: MouseEvent) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\n\t\t\t\t\tpointRef.current = {\n\t\t\t\t\t\tpageX: (e as any).pageX,\n\t\t\t\t\t\tpageY: (e as any).pageY,\n\t\t\t\t\t};\n\n\t\t\t\t\tif (showRef.current) {\n\t\t\t\t\t\tensureBaseStyle();\n\t\t\t\t\t\tcomputePointPosition();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tclearAllTimers();\n\t\t\t\t\tphaseRef.current = \"showing\";\n\t\t\t\t\tlastPosRef.current = null;\n\t\t\t\t\tlastArrowRef.current = null;\n\t\t\t\t\tarrowElRef.current = null;\n\t\t\t\t\tsetShow(true);\n\n\t\t\t\t\ttimerRef.current = setTimeout(() => {\n\t\t\t\t\t\tif (phaseRef.current !== \"showing\") return;\n\t\t\t\t\t\tif (!contentRef.current) return;\n\n\t\t\t\t\t\tensureBaseStyle();\n\t\t\t\t\t\tcomputePointPosition();\n\t\t\t\t\t\tsetContentVisible(true);\n\t\t\t\t\t\tclearTimer();\n\t\t\t\t\t\tlatestRef.current.onVisibleChange?.(true);\n\t\t\t\t\t\tphaseRef.current = \"\";\n\t\t\t\t\t}, latestRef.current.showDelay);\n\t\t\t\t},\n\t\t\t},\n\t\t\tnone: {},\n\t\t};\n\t}, [doToggle]);\n\n\tconst contentTouch = useMemo(() => {\n\t\tif (!touchable) return {};\n\t\tconst events: { [key: string]: () => void } = {};\n\n\t\tif (trigger === \"hover\") {\n\t\t\tevents[\"onMouseEnter\"] = () => {\n\t\t\t\tclearTimer();\n\t\t\t};\n\t\t\tevents[\"onMouseLeave\"] = () => handleToggle(false);\n\t\t}\n\n\t\treturn events;\n\t}, [touchable, trigger]);\n\n\tconst { observe, unobserve, disconnect } = useResizeObserver();\n\tuseEffect(() => {\n\t\tif (!observe) return;\n\t\tconst triggerEl = triggerRef.current;\n\t\tconst contentEl = contentRef.current;\n\t\tif (triggerEl) observe(triggerEl, scheduleComputePosition);\n\t\tif (contentEl) observe(contentEl, scheduleComputePosition);\n\t\treturn () => {\n\t\t\tif (contentEl) unobserve(contentEl);\n\t\t\tif (triggerEl) unobserve(triggerEl);\n\t\t\tdisconnect();\n\t\t};\n\t}, [trigger, observe, unobserve, disconnect, show]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!show) return;\n\t\tensureBaseStyle();\n\t\tif (latestRef.current.trigger === \"contextmenu\") {\n\t\t\tcomputePointPosition();\n\t\t} else {\n\t\t\tcomputeRelativePosition();\n\t\t}\n\t}, [show]);\n\n\tuseLayoutEffect(() => {\n\t\tdoToggle(visible);\n\t}, [visible]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tclearAllTimers();\n\t\t};\n\t}, []);\n\n\tconst mouseUpHandlerRef = useRef<(e: any) => void>(() => {});\n\tmouseUpHandlerRef.current = (e) => {\n\t\tif (!showRef.current) return;\n\t\tconst triggerEl = triggerRef.current;\n\t\tconst contentEl = contentRef.current;\n\t\tif (!triggerEl || !contentEl) return;\n\t\tconst tar = e.target as HTMLElement;\n\t\tif (triggerEl.contains(tar) || contentEl.contains(tar)) return;\n\t\tdoHide();\n\t};\n\tconst onGlobalMouseUp = useMemo(\n\t\t() => (e: any) => mouseUpHandlerRef.current(e),\n\t\t[],\n\t);\n\tuseMouseUp(onGlobalMouseUp);\n\n\tuseEffect(() => {\n\t\tif (!show) return;\n\t\tif (typeof window === \"undefined\") return;\n\n\t\tconst onScrollOrResize = debounce({ delay: 160 }, () => {\n\t\t\tscheduleComputePosition();\n\t\t});\n\n\t\twindow.addEventListener(\"scroll\", onScrollOrResize, {\n\t\t\tpassive: true,\n\t\t\tcapture: true,\n\t\t});\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"scroll\", onScrollOrResize, true);\n\t\t};\n\t}, [show]);\n\n\tconst mergeRefs = (...refs: Array<Ref<HTMLElement> | undefined>) => {\n\t\treturn (node: HTMLElement | null) => {\n\t\t\tfor (const ref of refs) {\n\t\t\t\tif (!ref) continue;\n\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\tref(node);\n\t\t\t\t} else {\n\t\t\t\t\t(ref as any).current = node;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{(() => {\n\t\t\t\tconst events = eventMaps[trigger] as any;\n\t\t\t\tconst items = Children.toArray(children);\n\t\t\t\tconst canAttachRef = (el: any) => {\n\t\t\t\t\tif (!isValidElement(el)) return false;\n\t\t\t\t\tconst t: any = el.type;\n\t\t\t\t\tif (typeof t === \"string\") return true;\n\t\t\t\t\tif (t?.prototype?.isReactComponent) return true;\n\t\t\t\t\tif (t?.$$typeof === Symbol.for(\"react.forward_ref\"))\n\t\t\t\t\t\treturn true;\n\t\t\t\t\treturn false;\n\t\t\t\t};\n\n\t\t\t\tif (items.length !== 1) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={triggerRef as any}\n\t\t\t\t\t\t\t{...events}\n\t\t\t\t\t\t\tclassName='i-popup-trigger'\n\t\t\t\t\t\t\tstyle={{ display: \"inline-block\" }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tconst only = items[0] as any;\n\t\t\t\tif (!isValidElement(only) || !canAttachRef(only)) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={triggerRef as any}\n\t\t\t\t\t\t\t{...events}\n\t\t\t\t\t\t\tclassName='i-popup-trigger'\n\t\t\t\t\t\t\tstyle={{ display: \"inline-block\" }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{only}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tconst { className: childClassName, ...restProps } =\n\t\t\t\t\tonly.props as any;\n\t\t\t\tconst nextProps: Record<string, any> = { ...restProps };\n\t\t\t\tfor (const evt of Object.keys(events)) {\n\t\t\t\t\tconst theirs = restProps[evt];\n\t\t\t\t\tconst ours = events[evt];\n\t\t\t\t\tnextProps[evt] =\n\t\t\t\t\t\ttypeof theirs === \"function\"\n\t\t\t\t\t\t\t? (e: any) => {\n\t\t\t\t\t\t\t\t\tours(e);\n\t\t\t\t\t\t\t\t\ttheirs(e);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t: ours;\n\t\t\t\t}\n\t\t\t\treturn cloneElement(only as any, {\n\t\t\t\t\tref: mergeRefs((only as any).ref, triggerRef as any),\n\t\t\t\t\tclassName: childClassName,\n\t\t\t\t\t...nextProps,\n\t\t\t\t});\n\t\t\t})()}\n\n\t\t\t{show && (\n\t\t\t\t<Content\n\t\t\t\t\tref={contentRef}\n\t\t\t\t\tarrow={arrow && trigger !== \"contextmenu\"}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t}}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\t{...contentTouch}\n\t\t\t\t\ttrigger={triggerRef.current as HTMLElement}\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t</Content>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"mappings":"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"}

package/lib/cjs/components/progress/circle.cjs

@@ -0,0 +1,45 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../text/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/progress/circle.tsx
+function Circle(props) {
+	const { value, circleSize = 40, lineWidth = 8 } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "i-progress-circle",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			width: circleSize,
+			height: circleSize,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: circleSize / 2,
+				cy: circleSize / 2,
+				r: circleSize / 2 - lineWidth / 2,
+				fill: "none",
+				stroke: "var(--background-opacity-2)",
+				strokeWidth: lineWidth
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: circleSize / 2,
+				cy: circleSize / 2,
+				r: circleSize / 2 - lineWidth / 2,
+				fill: "none",
+				stroke: "var(--color-main)",
+				strokeWidth: lineWidth,
+				strokeDasharray: 100,
+				pathLength: 100,
+				className: "i-progress-circle-path",
+				strokeLinecap: "round",
+				style: { strokeDashoffset: `calc(100 - ${value})` }
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "i-progress-circle-value",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: value }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				size: ".81em",
+				className: "color-7",
+				children: "%"
+			})]
+		})]
+	});
+}
+//#endregion
+exports.default = Circle;
+
+//# sourceMappingURL=circle.cjs.map

package/lib/cjs/components/progress/circle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.cjs","names":["Text"],"sources":["../../../../packages/components/progress/circle.tsx"],"sourcesContent":["import Text from \"../text\";\nimport { IProgress } from \"./type\";\n\nexport default function Circle(\n\tprops: Pick<IProgress, \"value\" | \"circleSize\" | \"lineWidth\">\n) {\n\tconst { value, circleSize = 40, lineWidth = 8 } = props;\n\n\treturn (\n\t\t<div className='i-progress-circle'>\n\t\t\t<svg width={circleSize} height={circleSize}>\n\t\t\t\t<circle\n\t\t\t\t\tcx={circleSize / 2}\n\t\t\t\t\tcy={circleSize / 2}\n\t\t\t\t\tr={circleSize / 2 - lineWidth / 2}\n\t\t\t\t\tfill='none'\n\t\t\t\t\tstroke='var(--background-opacity-2)'\n\t\t\t\t\tstrokeWidth={lineWidth}\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tcx={circleSize / 2}\n\t\t\t\t\tcy={circleSize / 2}\n\t\t\t\t\tr={circleSize / 2 - lineWidth / 2}\n\t\t\t\t\tfill='none'\n\t\t\t\t\tstroke='var(--color-main)'\n\t\t\t\t\tstrokeWidth={lineWidth}\n\t\t\t\t\tstrokeDasharray={100}\n\t\t\t\t\tpathLength={100}\n\t\t\t\t\tclassName='i-progress-circle-path'\n\t\t\t\t\tstrokeLinecap='round'\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstrokeDashoffset: `calc(100 - ${value})`,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</svg>\n\n\t\t\t<span className='i-progress-circle-value'>\n\t\t\t\t<span>{value}</span>\n\t\t\t\t<Text size='.81em' className='color-7'>\n\t\t\t\t\t%\n\t\t\t\t</Text>\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAGA,SAAwB,OACvB,OACC;CACD,MAAM,EAAE,OAAO,aAAa,IAAI,YAAY,MAAM;AAElD,QACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,OAAO;GAAY,QAAQ;aAAhC,CACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACC,IAAI,aAAa;IACjB,IAAI,aAAa;IACjB,GAAG,aAAa,IAAI,YAAY;IAChC,MAAK;IACL,QAAO;IACP,aAAa;IACZ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACC,IAAI,aAAa;IACjB,IAAI,aAAa;IACjB,GAAG,aAAa,IAAI,YAAY;IAChC,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,YAAY;IACZ,WAAU;IACV,eAAc;IACd,OAAO,EACN,kBAAkB,cAAc,MAAM,IACtC;IACA,CAAA,CACG;MAEN,iBAAA,GAAA,kBAAA,MAAC,QAAD;GAAM,WAAU;aAAhB,CACC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,OAAa,CAAA,EACpB,iBAAA,GAAA,kBAAA,KAACA,cAAAA,SAAD;IAAM,MAAK;IAAQ,WAAU;cAAU;IAEhC,CAAA,CACD;KACF"}

package/lib/cjs/components/progress/index.cjs

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

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

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

package/lib/cjs/components/progress/line.cjs

@@ -0,0 +1,27 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/progress/line.tsx
+const Line = (props) => {
+	const { ref, value, lineWidth, vertical, barClass, dragging, renderCursor, onMouseDown, onTouchStart } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: (0, classnames.default)("i-progress", { "i-progress-vertical": vertical }),
+		style: { [vertical ? "width" : "height"]: lineWidth },
+		onMouseDown,
+		onTouchStart,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, classnames.default)("i-progress-bar", barClass, { "no-transition": dragging }),
+			style: { [vertical ? "height" : "width"]: `${value}%` },
+			children: renderCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				className: "i-progress-cursor",
+				children: renderCursor(value ?? 0)
+			})
+		})
+	});
+};
+//#endregion
+exports.default = Line;
+
+//# sourceMappingURL=line.cjs.map

package/lib/cjs/components/progress/line.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.cjs","names":[],"sources":["../../../../packages/components/progress/line.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { MouseEvent, RefObject } from \"react\";\nimport { IProgress } from \"./type\";\n\nconst Line = (\n\tprops: Pick<\n\t\tIProgress,\n\t\t\"value\" | \"vertical\" | \"lineWidth\" | \"barClass\" | \"renderCursor\"\n\t> & {\n\t\tref: RefObject<HTMLDivElement | null>;\n\t\tdragging: boolean;\n\t\tonMouseDown: (e: MouseEvent) => void;\n\t\tonTouchStart: (e) => void;\n\t}\n) => {\n\tconst {\n\t\tref,\n\t\tvalue,\n\t\tlineWidth,\n\t\tvertical,\n\t\tbarClass,\n\t\tdragging,\n\t\trenderCursor,\n\t\tonMouseDown,\n\t\tonTouchStart,\n\t} = props;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(\"i-progress\", {\n\t\t\t\t\"i-progress-vertical\": vertical,\n\t\t\t})}\n\t\t\tstyle={{ [vertical ? \"width\" : \"height\"]: lineWidth }}\n\t\t\tonMouseDown={onMouseDown}\n\t\t\tonTouchStart={onTouchStart}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-progress-bar\", barClass, {\n\t\t\t\t\t\"no-transition\": dragging,\n\t\t\t\t})}\n\t\t\t\tstyle={{ [vertical ? \"height\" : \"width\"]: `${value}%` }}\n\t\t\t>\n\t\t\t\t{renderCursor && (\n\t\t\t\t\t<a className='i-progress-cursor'>\n\t\t\t\t\t\t{renderCursor(value ?? 0)}\n\t\t\t\t\t</a>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default Line;\n"],"mappings":";;;;;AAIA,MAAM,QACL,UASI;CACJ,MAAM,EACL,KACA,OACA,WACA,UACA,UACA,UACA,cACA,aACA,iBACG;AAEJ,QACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACM;EACL,YAAA,GAAA,WAAA,SAAsB,cAAc,EACnC,uBAAuB,UACvB,CAAC;EACF,OAAO,GAAG,WAAW,UAAU,WAAW,WAAW;EACxC;EACC;YAEd,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACC,YAAA,GAAA,WAAA,SAAsB,kBAAkB,UAAU,EACjD,iBAAiB,UACjB,CAAC;GACF,OAAO,GAAG,WAAW,WAAW,UAAU,GAAG,MAAM,IAAI;aAEtD,gBACA,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cACX,aAAa,SAAS,EAAE;IACtB,CAAA;GAEA,CAAA;EACD,CAAA"}

package/lib/cjs/components/progress/progress.cjs

@@ -0,0 +1,100 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_hooks = require("../../js/hooks.cjs");
+const require_circle = require("./circle.cjs");
+const require_line = require("./line.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/progress/progress.tsx
+const Progress = (props) => {
+	const { value = 0, lineWidth = 8, circleSize = 40, precision = 0, style, draggable = true, type = "line", barClass, vertical, label, labelInline, className, renderCursor, onChange, onDraggingChange } = props;
+	const ref = (0, react.useRef)(null);
+	const state = require_hooks.useReactive({
+		value,
+		dragging: false,
+		size: 0,
+		start: 0
+	});
+	const pageXY = vertical ? "pageY" : "pageX";
+	const rectTL = vertical ? "top" : "left";
+	const rectWH = vertical ? "height" : "width";
+	const getFixedValue = () => {
+		let value = +state.value.toFixed(precision);
+		value = Math.min(100, value);
+		value = Math.max(0, value);
+		return value;
+	};
+	const handleMouseDown = (e) => {
+		if (!ref.current || !draggable) return;
+		if (e.touches) e = e.touches[0];
+		const rect = ref.current.getBoundingClientRect();
+		const value = (e[pageXY] - rect[rectTL]) * 100 / rect[rectWH];
+		Object.assign(state, {
+			value: vertical ? 100 - value : value,
+			size: rect[rectWH],
+			start: rect[rectTL],
+			dragging: true
+		});
+		onDraggingChange?.(true);
+	};
+	const handleMouseMove = (e) => {
+		if (!state.dragging || !draggable) return;
+		e.preventDefault();
+		if (e.touches) e = e.touches[0];
+		const { start, size } = state;
+		const offset = e[pageXY] - start;
+		if (offset < 0 || offset > size) return;
+		const value = (e[pageXY] - start) * 100 / size;
+		state.value = vertical ? 100 - value : value;
+	};
+	const handleMouseUp = () => {
+		if (!state.dragging || !draggable) return;
+		onChange?.(getFixedValue());
+		state.dragging = false;
+		onDraggingChange?.(false);
+	};
+	require_hooks.useMouseMove(handleMouseMove);
+	require_hooks.useMouseUp(handleMouseUp);
+	(0, react.useEffect)(() => {
+		if (value > 100) {
+			state.value = 100;
+			return;
+		}
+		if (value < 0) {
+			state.value = 0;
+			return;
+		}
+		state.value = value;
+	}, [value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("i-input-label", className, { "i-input-inline": labelInline }),
+		style,
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "i-input-label-text",
+				children: label
+			}),
+			type === "line" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_line.default, {
+				ref,
+				vertical,
+				lineWidth,
+				barClass,
+				dragging: state.dragging,
+				value: state.value,
+				renderCursor,
+				onMouseDown: handleMouseDown,
+				onTouchStart: handleMouseDown
+			}),
+			type === "circle" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_circle.default, {
+				value: state.value,
+				circleSize,
+				lineWidth
+			})
+		]
+	});
+};
+//#endregion
+exports.default = Progress;
+
+//# sourceMappingURL=progress.cjs.map