@xiping/react-components 1.0.70 → 1.0.77

package/dist/es/components/confetti-button/index.js

@@ -1,78 +1,66 @@
 "use client";
-import { jsxs as w, jsx as C } from "react/jsx-runtime";
-import d from "canvas-confetti";
-import { default as M } from "canvas-confetti";
-import { forwardRef as x, useRef as g, useCallback as u, useMemo as v, useImperativeHandle as k, useEffect as R, createContext as B } from "react";
-const b = B({}), m = x((c, s) => {
-  const {
-    options: n,
-    globalOptions: a = { resize: !0, useWorker: !0 },
-    manualstart: o = !1,
-    children: t,
-    ...f
-  } = c, e = g(null), h = u(
-    (r) => {
-      if (r !== null) {
-        if (e.current) return;
-        e.current = d.create(r, {
-          ...a,
-          resize: !0
-        });
-      } else
-        e.current && (e.current.reset(), e.current = null);
-    },
-    [a]
-  ), i = u(
-    async (r = {}) => {
-      try {
-        await e.current?.({ ...n, ...r });
-      } catch (y) {
-        console.error("Confetti error:", y);
-      }
-    },
-    [n]
-  ), l = v(
-    () => ({
-      fire: i
-    }),
-    [i]
-  );
-  return k(s, () => l, [l]), R(() => {
-    o || (async () => {
-      try {
-        await i();
-      } catch (r) {
-        console.error("Confetti effect error:", r);
-      }
-    })();
-  }, [o, i]), /* @__PURE__ */ w(b.Provider, { value: l, children: [
-    /* @__PURE__ */ C("canvas", { ref: h, ...f }),
-    t
-  ] });
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { createContext as n, forwardRef as r, useCallback as i, useEffect as a, useImperativeHandle as o, useMemo as s, useRef as c } from "react";
+import l from "canvas-confetti";
+//#region src/components/confetti-button/index.tsx
+var u = n({}), d = r((n, r) => {
+	let { options: d, globalOptions: f = {
+		resize: !0,
+		useWorker: !0
+	}, manualstart: p = !1, children: m, ...h } = n, g = c(null), _ = i((e) => {
+		if (e !== null) {
+			if (g.current) return;
+			g.current = l.create(e, {
+				...f,
+				resize: !0
+			});
+		} else g.current &&= (g.current.reset(), null);
+	}, [f]), v = i(async (e = {}) => {
+		try {
+			await g.current?.({
+				...d,
+				...e
+			});
+		} catch (e) {
+			console.error("Confetti error:", e);
+		}
+	}, [d]), y = s(() => ({ fire: v }), [v]);
+	return o(r, () => y, [y]), a(() => {
+		p || (async () => {
+			try {
+				await v();
+			} catch (e) {
+				console.error("Confetti effect error:", e);
+			}
+		})();
+	}, [p, v]), /* @__PURE__ */ t(u.Provider, {
+		value: y,
+		children: [/* @__PURE__ */ e("canvas", {
+			ref: _,
+			...h
+		}), m]
+	});
+});
+d.displayName = "Confetti";
+var f = d, p = ({ options: t, children: n, ...r }) => /* @__PURE__ */ e("div", {
+	onClick: async (e) => {
+		try {
+			let n = e.currentTarget.getBoundingClientRect(), r = n.left + n.width / 2, i = n.top + n.height / 2;
+			await l({
+				...t,
+				origin: {
+					x: r / window.innerWidth,
+					y: i / window.innerHeight
+				}
+			});
+		} catch (e) {
+			console.error("Confetti button error:", e);
+		}
+	},
+	...r,
+	children: n
 });
-m.displayName = "Confetti";
-const N = m, p = ({
-  options: c,
-  children: s,
-  ...n
-}) => /* @__PURE__ */ C("div", { onClick: async (o) => {
-  try {
-    const t = o.currentTarget.getBoundingClientRect(), f = t.left + t.width / 2, e = t.top + t.height / 2;
-    await d({
-      ...c,
-      origin: {
-        x: f / window.innerWidth,
-        y: e / window.innerHeight
-      }
-    });
-  } catch (t) {
-    console.error("Confetti button error:", t);
-  }
-}, ...n, children: s });
 p.displayName = "ConfettiButton";
-const W = p;
-export {
-  N as Confetti,
-  W as ConfettiButton,
-  M as confetti
-};
+var m = p;
+//#endregion
+export { f as Confetti, m as ConfettiButton, l as confetti };

package/dist/es/components/dock/Duck.css

@@ -1 +1 @@
-.xiping-dock{margin-left:auto;margin-right:auto;margin-top:2rem;display:flex;height:58px;width:max-content;align-items:center;justify-content:center;gap:.5rem;border-radius:1rem;border:1px solid;padding:.5rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}@supports (backdrop-filter: blur(12px)){.xiping-dock{background-color:#ffffff1a}.dark .xiping-dock{background-color:#0000001a}}.xiping-dock--top{align-items:flex-start}.xiping-dock--middle{align-items:center}.xiping-dock--bottom{align-items:flex-end}.xiping-dock-icon{display:flex;aspect-ratio:1 / 1;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px}
+.xiping-dock{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid;border-radius:1rem;justify-content:center;align-items:center;gap:.5rem;width:max-content;height:58px;margin-top:2rem;margin-left:auto;margin-right:auto;padding:.5rem;display:flex}@supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px))){.xiping-dock{background-color:#ffffff1a}.dark .xiping-dock{background-color:#0000001a}}.xiping-dock--top{align-items:flex-start}.xiping-dock--middle{align-items:center}.xiping-dock--bottom{align-items:flex-end}.xiping-dock-icon{aspect-ratio:1;cursor:pointer;border-radius:9999px;justify-content:center;align-items:center;display:flex}

package/dist/es/components/dock/Duck2.js

@@ -0,0 +1,60 @@
+"use client";
+import './Duck.css';/* empty css     */
+import { jsx as e } from "react/jsx-runtime";
+import t, { useRef as n } from "react";
+import r from "clsx";
+import { motion as i, useMotionValue as a, useSpring as o, useTransform as s } from "motion/react";
+//#region src/components/dock/Duck.tsx
+var c = 40, l = 60, u = 140, d = t.forwardRef(({ className: n, children: o, iconSize: s = c, iconMagnification: d = l, iconDistance: p = u, direction: m = "middle", ...h }, g) => {
+	let _ = a(Infinity), v = () => t.Children.map(o, (e) => t.isValidElement(e) && e.type === f ? t.cloneElement(e, {
+		...e.props,
+		mouseX: _,
+		size: s,
+		magnification: d,
+		distance: p
+	}) : e);
+	return /* @__PURE__ */ e(i.div, {
+		ref: g,
+		onMouseMove: (e) => _.set(e.pageX),
+		onMouseLeave: () => _.set(Infinity),
+		...h,
+		className: r("xiping-dock", m === "top" && "xiping-dock--top", m === "bottom" && "xiping-dock--bottom", m === "middle" && "xiping-dock--middle", n),
+		children: v()
+	});
+});
+d.displayName = "Dock";
+var f = ({ size: t = c, magnification: d = l, distance: f = u, mouseX: p, className: m, children: h, ...g }) => {
+	let _ = n(null), v = Math.max(6, t * .2), y = a(Infinity), b = o(s(s(p ?? y, (e) => {
+		let t = _.current?.getBoundingClientRect() ?? {
+			x: 0,
+			width: 0
+		};
+		return e - t.x - t.width / 2;
+	}), [
+		-f,
+		0,
+		f
+	], [
+		t,
+		d,
+		t
+	]), {
+		mass: .1,
+		stiffness: 150,
+		damping: 12
+	});
+	return /* @__PURE__ */ e(i.div, {
+		ref: _,
+		style: {
+			width: b,
+			height: b,
+			padding: v
+		},
+		className: r("xiping-dock-icon", m),
+		...g,
+		children: h
+	});
+};
+f.displayName = "DockIcon";
+//#endregion
+export { d as Dock, f as DockIcon };

package/dist/es/components/flip-text/FlipText.css

@@ -1 +1 @@
-.xiping-flip-container{display:flex;justify-content:center;gap:.5rem}.xiping-flip-char{transform-origin:center;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .05))}
+.xiping-flip-container{justify-content:center;gap:.5rem;display:flex}.xiping-flip-char{transform-origin:50%;filter:drop-shadow(0 1px 1px #0000000d)}

package/dist/es/components/flip-text/FlipText2.js

@@ -0,0 +1,41 @@
+"use client";
+import './FlipText.css';/* empty css         */
+import { jsx as e } from "react/jsx-runtime";
+import t from "react";
+import n from "clsx";
+import { AnimatePresence as r, motion as i } from "motion/react";
+//#region src/components/flip-text/FlipText.tsx
+var a = {
+	hidden: {
+		rotateX: -90,
+		opacity: 0
+	},
+	visible: {
+		rotateX: 0,
+		opacity: 1
+	}
+};
+function o({ children: o, duration: s = .5, delayMultiple: c = .08, className: l, as: u = "span", variants: d, ...f }) {
+	let p = i.create(u);
+	return /* @__PURE__ */ e("div", {
+		className: "xiping-flip-container",
+		children: /* @__PURE__ */ e(r, {
+			mode: "wait",
+			children: t.Children.toArray(o).join("").split("").map((t, r) => /* @__PURE__ */ e(p, {
+				initial: "hidden",
+				animate: "visible",
+				exit: "hidden",
+				variants: d || a,
+				transition: {
+					duration: s,
+					delay: r * c
+				},
+				className: n("xiping-flip-char", l),
+				...f,
+				children: t
+			}, r))
+		})
+	});
+}
+//#endregion
+export { o as FlipText };

package/dist/es/components/gradient-text/index.css

@@ -1 +1 @@
-.xiping-gradient-text{position:relative;margin:0 auto;display:flex;max-width:fit-content;flex-direction:row;align-items:center;justify-content:center;border-radius:1.25rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .5s ease-out;overflow:hidden;cursor:pointer}.xiping-gradient-text__overlay{position:absolute;inset:0;background-size:300% 100%;animation:xiping-gradient linear infinite;border-radius:inherit;z-index:0;pointer-events:none}.xiping-gradient-text__overlay:before{content:"";position:absolute;border-radius:inherit;width:calc(100% - 2px);height:calc(100% - 2px);left:50%;top:50%;transform:translate(-50%,-50%);background-color:#060010;z-index:-1}@keyframes xiping-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.xiping-gradient-text__content{display:inline-block;position:relative;z-index:2;background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:xiping-gradient linear infinite}
+.xiping-gradient-text{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;border-radius:1.25rem;flex-direction:row;justify-content:center;align-items:center;max-width:fit-content;margin:0 auto;font-weight:500;transition:box-shadow .5s ease-out;display:flex;position:relative;overflow:hidden}.xiping-gradient-text__overlay{border-radius:inherit;z-index:0;pointer-events:none;background-size:300% 100%;animation:linear infinite xiping-gradient;position:absolute;inset:0}.xiping-gradient-text__overlay:before{content:"";border-radius:inherit;z-index:-1;background-color:#060010;width:calc(100% - 2px);height:calc(100% - 2px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes xiping-gradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.xiping-gradient-text__content{z-index:2;color:#0000;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:linear infinite xiping-gradient;display:inline-block;position:relative}

package/dist/es/components/gradient-text/index2.js

@@ -0,0 +1,29 @@
+import './index.css';/* empty css      */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import n from "clsx";
+//#region src/components/gradient-text/index.tsx
+function r({ children: r, className: i = "", colors: a = [
+	"#40ffaa",
+	"#4079ff",
+	"#40ffaa",
+	"#4079ff",
+	"#40ffaa"
+], animationSpeed: o = 8, showBorder: s = !1 }) {
+	let c = {
+		backgroundImage: `linear-gradient(to right, ${a.join(", ")})`,
+		animationDuration: `${o}s`
+	};
+	return /* @__PURE__ */ t("div", {
+		className: n("xiping-gradient-text", i),
+		children: [s && /* @__PURE__ */ e("div", {
+			className: "xiping-gradient-text__overlay",
+			style: c
+		}), /* @__PURE__ */ e("div", {
+			className: "xiping-gradient-text__content",
+			style: c,
+			children: r
+		})]
+	});
+}
+//#endregion
+export { r as default };

package/dist/es/components/hyper-text/HyperText.css

@@ -1 +1 @@
-.xiping-hyper-container{overflow:hidden;padding-top:.5rem;padding-bottom:.5rem;font-size:2.25rem;line-height:2.5rem;font-weight:700}.xiping-hyper-char{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.xiping-hyper-space{width:.75rem}
+.xiping-hyper-container{padding-top:.5rem;padding-bottom:.5rem;font-size:2.25rem;font-weight:700;line-height:2.5rem;overflow:hidden}.xiping-hyper-char{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.xiping-hyper-space{width:.75rem}

package/dist/es/components/hyper-text/index.js

@@ -1,81 +1,53 @@
 "use client";
-import { jsx as p } from "react/jsx-runtime";
-import { motion as A, AnimatePresence as U } from "motion/react";
-import { useState as h, useRef as M, useEffect as d } from "react";
-import I from "clsx";
-import './HyperText.css';/* empty css              */
-const j = Object.freeze(
-  "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
-), q = (n) => Math.floor(Math.random() * n);
-function B({
-  children: n,
-  className: C,
-  duration: u = 800,
-  delay: o = 0,
-  as: E = "div",
-  startOnView: f = !1,
-  animateOnHover: F = !0,
-  characterSet: s = j,
-  ...R
-}) {
-  const b = A.create(E, {
-    forwardMotionProps: !0
-  }), [v, y] = h(
-    () => n.split("")
-  ), [i, r] = h(!1), a = M(0), m = M(null), D = () => {
-    F && !i && (a.current = 0, r(!0));
-  };
-  return d(() => {
-    if (!f) {
-      const t = setTimeout(() => {
-        r(!0);
-      }, o);
-      return () => clearTimeout(t);
-    }
-    const e = new IntersectionObserver(
-      ([t]) => {
-        t.isIntersecting && (setTimeout(() => {
-          r(!0);
-        }, o), e.disconnect());
-      },
-      { threshold: 0.1, rootMargin: "-30% 0px -30% 0px" }
-    );
-    return m.current && e.observe(m.current), () => e.disconnect();
-  }, [o, f]), d(() => {
-    if (!i) return;
-    const e = n.length, t = performance.now();
-    let c;
-    const l = (H) => {
-      const N = H - t, g = Math.min(N / u, 1);
-      a.current = g * e, y(
-        (P) => P.map(
-          (T, x) => T === " " ? T : x <= a.current ? n[x] : s[q(s.length)]
-        )
-      ), g < 1 ? c = requestAnimationFrame(l) : r(!1);
-    };
-    return c = requestAnimationFrame(l), () => cancelAnimationFrame(c);
-  }, [n, u, i, s]), // eslint-disable-next-line react-hooks/static-components
-  /* @__PURE__ */ p(
-    b,
-    {
-      ref: m,
-      className: I("xiping-hyper-container", C),
-      onMouseEnter: D,
-      ...R,
-      children: /* @__PURE__ */ p(U, { children: v.map((e, t) => /* @__PURE__ */ p(
-        A.span,
-        {
-          className: I(
-            "xiping-hyper-char",
-            e === " " && "xiping-hyper-space"
-          ),
-          children: e.toUpperCase()
-        },
-        t
-      )) })
-    }
-  );
+import './HyperText.css';/* empty css          */
+import { jsx as e } from "react/jsx-runtime";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import i from "clsx";
+import { AnimatePresence as a, motion as o } from "motion/react";
+//#region src/components/hyper-text/index.tsx
+var s = Object.freeze("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")), c = (e) => Math.floor(Math.random() * e);
+function l({ children: l, className: u, duration: d = 800, delay: f = 0, as: p = "div", startOnView: m = !1, animateOnHover: h = !0, characterSet: g = s, ..._ }) {
+	let v = o.create(p, { forwardMotionProps: !0 }), [y, b] = r(() => l.split("")), [x, S] = r(!1), C = n(0), w = n(null);
+	return t(() => {
+		if (!m) {
+			let e = setTimeout(() => {
+				S(!0);
+			}, f);
+			return () => clearTimeout(e);
+		}
+		let e = new IntersectionObserver(([t]) => {
+			t.isIntersecting && (setTimeout(() => {
+				S(!0);
+			}, f), e.disconnect());
+		}, {
+			threshold: .1,
+			rootMargin: "-30% 0px -30% 0px"
+		});
+		return w.current && e.observe(w.current), () => e.disconnect();
+	}, [f, m]), t(() => {
+		if (!x) return;
+		let e = l.length, t = performance.now(), n, r = (i) => {
+			let a = i - t, o = Math.min(a / d, 1);
+			C.current = o * e, b((e) => e.map((e, t) => e === " " ? e : t <= C.current ? l[t] : g[c(g.length)])), o < 1 ? n = requestAnimationFrame(r) : S(!1);
+		};
+		return n = requestAnimationFrame(r), () => cancelAnimationFrame(n);
+	}, [
+		l,
+		d,
+		x,
+		g
+	]), /* @__PURE__ */ e(v, {
+		ref: w,
+		className: i("xiping-hyper-container", u),
+		onMouseEnter: () => {
+			h && !x && (C.current = 0, S(!0));
+		},
+		..._,
+		children: /* @__PURE__ */ e(a, { children: y.map((t, n) => /* @__PURE__ */ e(o.span, {
+			className: i("xiping-hyper-char", t === " " && "xiping-hyper-space"),
+			children: t.toUpperCase()
+		}, n)) })
+	});
 }
-export {
-  B as HyperText
-};
+//#endregion
+export { l as HyperText };

package/dist/es/components/image-compare/ImageCompare.css

@@ -1 +1 @@
-.xiping-image-compare-container{position:relative;-webkit-user-select:none;user-select:none;overflow:hidden;width:100%}.xiping-image-compare-label{position:absolute;top:1rem;padding:.25rem .5rem;background-color:#0009;color:#fff;font-size:.75rem;font-weight:500;border-radius:.25rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}.xiping-image-compare-label-original{right:1rem}.xiping-image-compare-label-modified{left:1rem}.xiping-image-compare-overlay{position:absolute;inset:0;height:100%;overflow:hidden}.xiping-image-compare-divider{position:absolute;top:0;bottom:0;background-color:#ffffffe6;cursor:ew-resize;box-shadow:0 0 0 1px #0000004d,0 0 0 1px #ffffff80 inset,0 0 8px #0003}.xiping-image-compare-divider-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2rem;height:2rem;border-radius:50%;background-color:#fffffff2;border:2px solid rgba(0,0,0,.2);box-shadow:0 0 0 1px #fffc,0 4px 12px #0000004d,0 2px 4px #0003;display:flex;align-items:center;justify-content:center;transition:box-shadow .2s ease,transform .2s ease}.xiping-image-compare-divider-button:hover{box-shadow:0 0 0 1px #ffffffe6,0 6px 16px #0006,0 3px 6px #0000004d;transform:translate(-50%,-50%) scale(1.05)}.xiping-image-compare-divider-button:active{transform:translate(-50%,-50%) scale(.95)}.xiping-image-compare-divider-icon{width:1.5rem;height:1.5rem;color:#1f2937}.xiping-image-compare-divider-theme-dark{background-color:#000000e6;box-shadow:0 0 0 1px #ffffff4d,0 0 0 1px #00000080 inset,0 0 8px #fff3}.xiping-image-compare-divider-button-theme-dark{background-color:#000000f2;border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 1px #000c,0 4px 12px #ffffff4d,0 2px 4px #fff3}.xiping-image-compare-divider-button-theme-dark:hover{box-shadow:0 0 0 1px #000000e6,0 6px 16px #fff6,0 3px 6px #ffffff4d}.xiping-image-compare-divider-theme-dark .xiping-image-compare-divider-icon{color:#f3f4f6}
+.xiping-image-compare-container{-webkit-user-select:none;user-select:none;width:100%;position:relative;overflow:hidden}.xiping-image-compare-label{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;background-color:#0009;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;font-weight:500;position:absolute;top:1rem}.xiping-image-compare-label-original{right:1rem}.xiping-image-compare-label-modified{left:1rem}.xiping-image-compare-overlay{height:100%;position:absolute;inset:0;overflow:hidden}.xiping-image-compare-divider{cursor:ew-resize;background-color:#ffffffe6;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #0000004d,inset 0 0 0 1px #ffffff80,0 0 8px #0003}.xiping-image-compare-divider-button{background-color:#fffffff2;border:2px solid #0003;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;transition:box-shadow .2s,transform .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #fffc,0 4px 12px #0000004d,0 2px 4px #0003}.xiping-image-compare-divider-button:hover{transform:translate(-50%,-50%)scale(1.05);box-shadow:0 0 0 1px #ffffffe6,0 6px 16px #0006,0 3px 6px #0000004d}.xiping-image-compare-divider-button:active{transform:translate(-50%,-50%)scale(.95)}.xiping-image-compare-divider-icon{color:#1f2937;width:1.5rem;height:1.5rem}.xiping-image-compare-divider-theme-dark{background-color:#000000e6;box-shadow:0 0 0 1px #ffffff4d,inset 0 0 0 1px #00000080,0 0 8px #fff3}.xiping-image-compare-divider-button-theme-dark{background-color:#000000f2;border:2px solid #fff3;box-shadow:0 0 0 1px #000c,0 4px 12px #ffffff4d,0 2px 4px #fff3}.xiping-image-compare-divider-button-theme-dark:hover{box-shadow:0 0 0 1px #000000e6,0 6px 16px #fff6,0 3px 6px #ffffff4d}.xiping-image-compare-divider-theme-dark .xiping-image-compare-divider-icon{color:#f3f4f6}

package/dist/es/components/image-compare/ImageCompare2.js

@@ -0,0 +1,96 @@
+import './ImageCompare.css';/* empty css             */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import s from "clsx";
+//#region src/components/image-compare/ImageCompare.tsx
+var c = (c) => {
+	let { originalImage: l, modifiedImage: u, className: d, dividerWidth: f = 1, originalLabel: p = "Original", modifiedLabel: m = "Modified", theme: h = "light" } = c, [g, _] = o(50), [v, y] = o(16 / 9), b = a(null), x = a(!1), S = a(null), C = a(null), w = a(null), T = n((e) => {
+		if (!b.current) return;
+		(!C.current || !x.current) && (C.current = b.current.getBoundingClientRect());
+		let t = C.current, n = (e - t.left) / t.width * 100;
+		_(Math.min(100, Math.max(0, n)));
+	}, []), E = n((e) => {
+		x.current && (S.current !== null && cancelAnimationFrame(S.current), S.current = requestAnimationFrame(() => {
+			T(e);
+		}));
+	}, [T]), D = n((e) => {
+		E(e.clientX);
+	}, [E]), O = n((e) => {
+		e.touches.length > 0 && E(e.touches[0].clientX);
+	}, [E]), k = n(() => {
+		x.current = !0, C.current = null;
+		let e = (e) => D(e), t = (e) => O(e), n = () => {
+			x.current = !1, S.current !== null && (cancelAnimationFrame(S.current), S.current = null), w.current &&= (w.current(), null);
+		}, r = () => n(), i = () => n();
+		window.addEventListener("mousemove", e), window.addEventListener("touchmove", t, { passive: !1 }), window.addEventListener("mouseup", r), window.addEventListener("touchend", i), w.current = () => {
+			window.removeEventListener("mousemove", e), window.removeEventListener("touchmove", t), window.removeEventListener("mouseup", r), window.removeEventListener("touchend", i);
+		};
+	}, [D, O]);
+	r(() => () => {
+		w.current &&= (w.current(), null);
+	}, []), r(() => {
+		let e = new Image();
+		e.onload = () => {
+			y(e.width / e.height);
+		}, e.src = l;
+	}, [l]);
+	let A = i(() => ({
+		backgroundRepeat: "no-repeat",
+		backgroundPosition: "top left",
+		backgroundImage: `url(${l})`,
+		backgroundSize: "contain",
+		aspectRatio: v
+	}), [l, v]), j = i(() => ({
+		width: `${g}%`,
+		backgroundImage: `url(${u})`,
+		backgroundRepeat: "no-repeat",
+		backgroundPosition: "top left",
+		backgroundSize: "auto 100%"
+	}), [g, u]), M = i(() => ({
+		left: `${g}%`,
+		transform: "translateX(-50%)",
+		width: typeof f == "number" ? `${f}px` : f
+	}), [g, f]);
+	return /* @__PURE__ */ t("div", {
+		ref: b,
+		className: s("xiping-image-compare-container", d),
+		style: A,
+		children: [
+			/* @__PURE__ */ e("div", {
+				className: "xiping-image-compare-label xiping-image-compare-label-original",
+				children: p
+			}),
+			/* @__PURE__ */ e("div", {
+				className: "xiping-image-compare-overlay",
+				style: j,
+				children: /* @__PURE__ */ e("div", {
+					className: "xiping-image-compare-label xiping-image-compare-label-modified",
+					children: m
+				})
+			}),
+			/* @__PURE__ */ e("div", {
+				className: s("xiping-image-compare-divider", `xiping-image-compare-divider-theme-${h}`),
+				style: M,
+				onMouseDown: k,
+				onTouchStart: k,
+				children: /* @__PURE__ */ e("div", {
+					className: s("xiping-image-compare-divider-button", `xiping-image-compare-divider-button-theme-${h}`),
+					children: /* @__PURE__ */ e("svg", {
+						className: "xiping-image-compare-divider-icon",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ e("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M8 9l4-4 4 4m0 6l-4 4-4-4"
+						})
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { c as default };

package/dist/es/components/image-viewer/ImageThumbnails.css

@@ -1 +1 @@
-.xiping-thumbnails-wrapper{height:6rem;background-color:#00000080;flex-shrink:0;z-index:10;padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.xiping-thumbnails-wrapper--hidden{display:none}.xiping-thumbnails-scroll{height:6rem;width:100vw;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.xiping-thumbnails-scroll::-webkit-scrollbar{display:none}.xiping-thumbnails-container{display:flex;gap:.5rem;padding:.5rem;height:6rem;min-width:max-content}.xiping-thumbnail-item{height:100%;aspect-ratio:1 / 1;flex-shrink:0;cursor:pointer;border:2px solid transparent;transition:all .2s}.xiping-thumbnail-item--active{border-color:#fff}.xiping-thumbnail-image{width:100%;height:100%;object-fit:contain}
+.xiping-thumbnails-wrapper{z-index:10;height:6rem;padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background-color:#00000080;flex-shrink:0}.xiping-thumbnails-wrapper--hidden{display:none}.xiping-thumbnails-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;width:100vw;height:6rem;overflow:auto hidden}.xiping-thumbnails-scroll::-webkit-scrollbar{display:none}.xiping-thumbnails-container{gap:.5rem;min-width:max-content;height:6rem;padding:.5rem;display:flex}.xiping-thumbnail-item{aspect-ratio:1;cursor:pointer;border:2px solid #0000;flex-shrink:0;height:100%;transition:all .2s}.xiping-thumbnail-item--active{border-color:#fff}.xiping-thumbnail-image{object-fit:contain;width:100%;height:100%}

package/dist/es/components/image-viewer/ImageThumbnails2.js

@@ -0,0 +1,40 @@
+import './ImageThumbnails.css';/* empty css                */
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as t } from "react";
+import n from "clsx";
+import { animate as r, motion as i, useMotionValue as a, useMotionValueEvent as o, useScroll as s } from "motion/react";
+import { size as c } from "lodash-es";
+//#region src/components/image-viewer/ImageThumbnails.tsx
+var l = "0%", u = "100%", d = "20%", f = "80%", p = "#0000", m = "#000";
+function h(e) {
+	let t = a(`linear-gradient(90deg, ${m}, ${m} ${l}, ${m} ${f}, ${p})`);
+	return o(e, "change", (n) => {
+		n === 0 ? r(t, `linear-gradient(90deg, ${m}, ${m} ${l}, ${m} ${f}, ${p})`) : n === 1 ? r(t, `linear-gradient(90deg, ${p}, ${m} ${d}, ${m} ${u}, ${m})`) : (e.getPrevious() === 0 || e.getPrevious() === 1) && r(t, `linear-gradient(90deg, ${p}, ${m} ${d}, ${m} ${f}, ${p})`);
+	}), t;
+}
+var g = ({ images: r, currentIndex: a, onImageSelect: o }) => {
+	let l = t(null), { scrollXProgress: u } = s({ container: l }), d = h(u);
+	return /* @__PURE__ */ e("div", {
+		className: n("xiping-thumbnails-wrapper", c(r) <= 1 && "xiping-thumbnails-wrapper--hidden"),
+		children: /* @__PURE__ */ e(i.div, {
+			ref: l,
+			style: { maskImage: d },
+			className: "xiping-thumbnails-scroll",
+			children: /* @__PURE__ */ e("div", {
+				className: "xiping-thumbnails-container",
+				children: r.map((t, r) => /* @__PURE__ */ e("div", {
+					className: n("xiping-thumbnail-item", r === a && "xiping-thumbnail-item--active"),
+					onClick: () => o(r),
+					children: /* @__PURE__ */ e("img", {
+						src: t,
+						alt: "",
+						className: "xiping-thumbnail-image",
+						draggable: "false"
+					})
+				}, t))
+			})
+		})
+	});
+};
+//#endregion
+export { g as default };

package/dist/es/components/image-viewer/ImageViewer.css

@@ -1 +1 @@
-.xiping-wrapper{width:100vw;height:100vh;position:relative;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0)}.xiping-tool-wrapper{position:absolute;top:16px;right:16px;display:flex;gap:16px;z-index:10}.xiping-close-icon,.xiping-download-icon{color:#fff;cursor:pointer}.xiping-main-content{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}.xiping-pinch-content{width:100%;height:100%}.xiping-image{width:100vw;height:100%;object-fit:contain;pointer-events:none}.xiping-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#00000080}.xiping-modal-content{overflow:hidden}.xiping-modal-overlay{background-color:#000000b3}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}
+.xiping-modal-root{z-index:2147483647;position:fixed;inset:0}.xiping-modal-backdrop{z-index:0;position:absolute;inset:0}.xiping-modal-content{z-index:1;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}@keyframes xiping-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xiping-spinner-icon{color:#fff;width:48px;height:48px;animation:1s linear infinite xiping-spin}.xiping-wrapper{width:100vw;height:100vh;padding-top:env(safe-area-inset-top,0);flex-direction:column;display:flex;position:relative}.xiping-tool-wrapper{z-index:10;gap:16px;display:flex;position:absolute;top:16px;right:16px}.xiping-close-icon,.xiping-download-icon{color:#fff;cursor:pointer}.xiping-main-content{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.xiping-pinch-content{width:100%;height:100%}.xiping-image{object-fit:contain;pointer-events:none;width:100vw;height:100%}.xiping-loading{background-color:#00000080;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.xiping-modal-content{overflow:hidden}.xiping-modal-overlay{background-color:#000000b3}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}

package/dist/es/components/image-viewer/ImageViewer.d.ts

@@ -11,5 +11,5 @@ interface ImageViewerProps {
     /** 初始选中的图片下标，默认为 0。当只有一张图片时此参数无意义 */
     initialIndex?: number;
 }
-declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImageViewer: (props: ImageViewerProps) => import('react').ReactPortal;
 export default ImageViewer;