@xiping/react-components 1.0.55 → 1.0.57

package/dist/es/components/dock/Duck.d.ts

@@ -1,7 +1,6 @@
-import { VariantProps } from 'class-variance-authority';
 import { MotionProps, MotionValue } from 'motion/react';
 import { default as React, PropsWithChildren } from 'react';
-export interface DockProps extends VariantProps<typeof dockVariants> {
+export interface DockProps {
     className?: string;
     iconSize?: number;
     iconMagnification?: number;
@@ -9,7 +8,6 @@ export interface DockProps extends VariantProps<typeof dockVariants> {
     direction?: "top" | "middle" | "bottom";
     children: React.ReactNode;
 }
-declare const dockVariants: (props?: import('class-variance-authority/types').ClassProp) => string;
 declare const Dock: React.ForwardRefExoticComponent<DockProps & React.RefAttributes<HTMLDivElement>>;
 export interface DockIconProps extends Omit<MotionProps & React.HTMLAttributes<HTMLDivElement>, "children"> {
     size?: number;
@@ -24,4 +22,4 @@ declare const DockIcon: {
     ({ size, magnification, distance, mouseX, className, children, ...props }: DockIconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Dock, DockIcon, dockVariants };
+export { Dock, DockIcon };

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

@@ -1,84 +1,80 @@
 "use client";
-import { jsx as b } from "react/jsx-runtime";
-import { cva as N } from "class-variance-authority";
-import { useMotionValue as g, motion as x, useTransform as f, useSpring as T } from "motion/react";
-import i, { useRef as w } from "react";
-import { cn as k } from "../../utils/utils.js";
-const I = 40, y = 60, D = 140, A = N(
-  "supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md"
-), C = i.forwardRef(
+import { jsx as g } from "react/jsx-runtime";
+import { useMotionValue as x, motion as I, useTransform as f, useSpring as A } from "motion/react";
+import r, { useRef as C } from "react";
+import k from "clsx";
+import './Duck.css';/* empty css         */
+const D = 40, y = 60, E = 140, h = r.forwardRef(
   ({
-    className: t,
-    children: a,
-    iconSize: s = I,
-    iconMagnification: c = y,
-    iconDistance: m = D,
-    direction: n = "middle",
-    ...u
-  }, r) => {
-    const o = g(1 / 0), d = () => i.Children.map(a, (e) => i.isValidElement(e) && e.type === h ? i.cloneElement(e, {
-      ...e.props,
-      mouseX: o,
+    className: o,
+    children: c,
+    iconSize: s = D,
+    iconMagnification: m = y,
+    iconDistance: a = E,
+    direction: t = "middle",
+    ...d
+  }, i) => {
+    const e = x(1 / 0), p = () => r.Children.map(c, (n) => r.isValidElement(n) && n.type === M ? r.cloneElement(n, {
+      ...n.props,
+      mouseX: e,
       size: s,
-      magnification: c,
-      distance: m
-    }) : e);
-    return /* @__PURE__ */ b(
-      x.div,
+      magnification: m,
+      distance: a
+    }) : n);
+    return /* @__PURE__ */ g(
+      I.div,
       {
-        ref: r,
-        onMouseMove: (e) => o.set(e.pageX),
-        onMouseLeave: () => o.set(1 / 0),
-        ...u,
-        className: k(A({ className: t }), {
-          "items-start": n === "top",
-          "items-center": n === "middle",
-          "items-end": n === "bottom"
-        }),
-        children: d()
+        ref: i,
+        onMouseMove: (n) => e.set(n.pageX),
+        onMouseLeave: () => e.set(1 / 0),
+        ...d,
+        className: k(
+          "xiping-dock",
+          t === "top" && "xiping-dock--top",
+          t === "bottom" && "xiping-dock--bottom",
+          t === "middle" && "xiping-dock--middle",
+          o
+        ),
+        children: p()
       }
     );
   }
 );
-C.displayName = "Dock";
-const h = ({
-  size: t = I,
-  magnification: a = y,
-  distance: s = D,
-  mouseX: c,
-  className: m,
-  children: n,
-  ...u
+h.displayName = "Dock";
+const M = ({
+  size: o = D,
+  magnification: c = y,
+  distance: s = E,
+  mouseX: m,
+  className: a,
+  children: t,
+  ...d
 }) => {
-  const r = w(null), o = Math.max(6, t * 0.2), d = g(1 / 0), e = f(c ?? d, (M) => {
-    const l = r.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
-    return M - l.x - l.width / 2;
-  }), E = f(
-    e,
+  const i = C(null), e = Math.max(6, o * 0.2), p = x(1 / 0), n = f(m ?? p, (T) => {
+    const l = i.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return T - l.x - l.width / 2;
+  }), N = f(
+    n,
     [-s, 0, s],
-    [t, a, t]
-  ), p = T(E, {
+    [o, c, o]
+  ), u = A(N, {
     mass: 0.1,
     stiffness: 150,
     damping: 12
   });
-  return /* @__PURE__ */ b(
-    x.div,
+  return /* @__PURE__ */ g(
+    I.div,
     {
-      ref: r,
-      style: { width: p, height: p, padding: o },
-      className: k(
-        "flex aspect-square cursor-pointer items-center justify-center rounded-full",
-        m
-      ),
-      ...u,
-      children: n
+      ref: i,
+      style: { width: u, height: u, padding: e },
+      className: k("xiping-dock-icon", a),
+      ...d,
+      children: t
     }
   );
 };
-h.displayName = "DockIcon";
+M.displayName = "DockIcon";
 export {
-  C as Dock,
-  h as DockIcon,
-  A as dockVariants
+  h as Dock,
+  M as DockIcon
 };

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

@@ -0,0 +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))}

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
 import { motion as d, AnimatePresence as h } from "motion/react";
-import { cn as f } from "../../utils/utils.js";
-import x from "react";
-/* empty css             */
+import f from "react";
+import x from "clsx";
+import './FlipText.css';/* empty css             */
 const u = {
   hidden: { rotateX: -90, opacity: 0 },
   visible: { rotateX: 0, opacity: 1 }
@@ -17,18 +17,18 @@ function A({
   variants: c,
   ...s
 }) {
-  const m = d.create(r), p = x.Children.toArray(e).join("").split("");
-  return /* @__PURE__ */ i("div", { className: "xiping-flip-container", children: /* @__PURE__ */ i(h, { mode: "wait", children: p.map((l, t) => /* @__PURE__ */ i(
-    m,
+  const l = d.create(r), m = f.Children.toArray(e).join("").split("");
+  return /* @__PURE__ */ i("div", { className: "xiping-flip-container", children: /* @__PURE__ */ i(h, { mode: "wait", children: m.map((p, t) => /* @__PURE__ */ i(
+    l,
     {
       initial: "hidden",
       animate: "visible",
       exit: "hidden",
       variants: c || u,
       transition: { duration: n, delay: t * a },
-      className: f("xiping-flip-char", o),
+      className: x("xiping-flip-char", o),
       ...s,
-      children: l
+      children: p
     },
     t
   )) }) });

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

@@ -0,0 +1 @@
+.xiping-gradient-text{position:relative;margin:0 auto;display:flex;max-width:-moz-fit-content;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}

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

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

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

@@ -0,0 +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}

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as p } from "react/jsx-runtime";
-import { cn as h } from "../../utils/utils.js";
-import { motion as x, AnimatePresence as U } from "motion/react";
-import { useState as M, useRef as d, useEffect as I } from "react";
-/* empty css              */
+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);
@@ -18,14 +18,14 @@ function B({
   characterSet: s = j,
   ...R
 }) {
-  const b = x.create(E, {
+  const b = A.create(E, {
     forwardMotionProps: !0
-  }), [v, y] = M(
+  }), [v, y] = h(
     () => n.split("")
-  ), [i, r] = M(!1), a = d(0), m = d(null), D = () => {
+  ), [i, r] = h(!1), a = M(0), m = M(null), D = () => {
     F && !i && (a.current = 0, r(!0));
   };
-  return I(() => {
+  return d(() => {
     if (!f) {
       const t = setTimeout(() => {
         r(!0);
@@ -41,7 +41,7 @@ function B({
       { threshold: 0.1, rootMargin: "-30% 0px -30% 0px" }
     );
     return m.current && e.observe(m.current), () => e.disconnect();
-  }, [o, f]), I(() => {
+  }, [o, f]), d(() => {
     if (!i) return;
     const e = n.length, t = performance.now();
     let c;
@@ -49,7 +49,7 @@ function B({
       const N = H - t, g = Math.min(N / u, 1);
       a.current = g * e, y(
         (P) => P.map(
-          (T, A) => T === " " ? T : A <= a.current ? n[A] : s[q(s.length)]
+          (T, x) => T === " " ? T : x <= a.current ? n[x] : s[q(s.length)]
         )
       ), g < 1 ? c = requestAnimationFrame(l) : r(!1);
     };
@@ -59,13 +59,16 @@ function B({
     b,
     {
       ref: m,
-      className: h("xiping-hyper-container", C),
+      className: I("xiping-hyper-container", C),
       onMouseEnter: D,
       ...R,
       children: /* @__PURE__ */ p(U, { children: v.map((e, t) => /* @__PURE__ */ p(
-        x.span,
+        A.span,
         {
-          className: h("xiping-hyper-char", e === " " ? "xiping-hyper-space" : ""),
+          className: I(
+            "xiping-hyper-char",
+            e === " " && "xiping-hyper-space"
+          ),
           children: e.toUpperCase()
         },
         t

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

@@ -0,0 +1 @@
+.xiping-image-compare-container{position:relative;-webkit-user-select:none;-moz-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}

package/dist/es/components/image-compare/ImageCompare.d.ts

@@ -4,10 +4,12 @@ interface ImageCompareProps {
     modifiedImage: string;
     /** 中间分隔线的宽度，可以是数字（px）或字符串（如 '2px', '0.5px'），默认为 1px */
     dividerWidth?: number | string;
-    /** 原图标签文本，默认为 "原图" */
+    /** 原图标签文本，默认为 "Original" */
     originalLabel?: string;
-    /** 处理过的图标签文本，默认为 "处理过的图" */
+    /** 处理过的图标签文本，默认为 "Modified" */
     modifiedLabel?: string;
+    /** 主题模式，默认为 "light"（浅色主题） */
+    theme?: "light" | "dark";
 }
 declare const ImageCompare: (props: ImageCompareProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageCompare;

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

@@ -1,66 +1,67 @@
-import { jsxs as j, jsx as t } from "react/jsx-runtime";
-import F from "clsx";
-import { useState as E, useRef as i, useCallback as a, useEffect as y, useMemo as w } from "react";
-/* empty css                 */
-const q = (N) => {
+import { jsxs as X, jsx as t } from "react/jsx-runtime";
+import w from "clsx";
+import { useState as N, useRef as r, useCallback as a, useEffect as S, useMemo as b } from "react";
+import './ImageCompare.css';/* empty css                 */
+const O = (I) => {
   const {
     originalImage: c,
-    modifiedImage: b,
-    className: S,
+    modifiedImage: x,
+    className: $,
     dividerWidth: l = 1,
-    originalLabel: I = "原图",
-    modifiedLabel: P = "处理过的图"
-  } = N, [s, $] = E(50), [x, A] = E(16 / 9), h = i(null), u = i(!1), o = i(null), d = i(null), n = i(null), k = a((e) => {
+    originalLabel: P = "Original",
+    modifiedLabel: A = "Modified",
+    theme: M = "light"
+  } = I, [s, C] = N(50), [k, D] = N(16 / 9), h = r(null), d = r(!1), o = r(null), u = r(null), n = r(null), R = a((e) => {
     if (!h.current) return;
-    (!d.current || !u.current) && (d.current = h.current.getBoundingClientRect());
-    const r = d.current, g = (e - r.left) / r.width * 100, p = Math.min(100, Math.max(0, g));
-    $(p);
+    (!u.current || !d.current) && (u.current = h.current.getBoundingClientRect());
+    const i = u.current, g = (e - i.left) / i.width * 100, p = Math.min(100, Math.max(0, g));
+    C(p);
   }, []), m = a((e) => {
-    u.current && (o.current !== null && cancelAnimationFrame(o.current), o.current = requestAnimationFrame(() => {
-      k(e);
+    d.current && (o.current !== null && cancelAnimationFrame(o.current), o.current = requestAnimationFrame(() => {
+      R(e);
     }));
-  }, [k]), M = a((e) => {
+  }, [R]), L = a((e) => {
     m(e.clientX);
-  }, [m]), R = a((e) => {
+  }, [m]), E = a((e) => {
     e.touches.length > 0 && m(e.touches[0].clientX);
-  }, [m]), L = a(() => {
-    u.current = !0, d.current = null;
-    const e = (f) => M(f), r = (f) => R(f), v = () => {
-      u.current = !1, o.current !== null && (cancelAnimationFrame(o.current), o.current = null), n.current && (n.current(), n.current = null);
+  }, [m]), y = a(() => {
+    d.current = !0, u.current = null;
+    const e = (f) => L(f), i = (f) => E(f), v = () => {
+      d.current = !1, o.current !== null && (cancelAnimationFrame(o.current), o.current = null), n.current && (n.current(), n.current = null);
     }, g = () => v(), p = () => v();
-    window.addEventListener("mousemove", e), window.addEventListener("touchmove", r, { passive: !1 }), window.addEventListener("mouseup", g), window.addEventListener("touchend", p);
-    const T = () => {
-      window.removeEventListener("mousemove", e), window.removeEventListener("touchmove", r), window.removeEventListener("mouseup", g), window.removeEventListener("touchend", p);
+    window.addEventListener("mousemove", e), window.addEventListener("touchmove", i, { passive: !1 }), window.addEventListener("mouseup", g), window.addEventListener("touchend", p);
+    const F = () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("touchmove", i), window.removeEventListener("mouseup", g), window.removeEventListener("touchend", p);
     };
-    n.current = T;
-  }, [M, R]);
-  y(() => () => {
+    n.current = F;
+  }, [L, E]);
+  S(() => () => {
     n.current && (n.current(), n.current = null);
-  }, []), y(() => {
+  }, []), S(() => {
     const e = new Image();
     e.onload = () => {
-      A(e.width / e.height);
+      D(e.width / e.height);
     }, e.src = c;
   }, [c]);
-  const C = w(
+  const G = b(
     () => ({
       backgroundRepeat: "no-repeat",
       backgroundPosition: "top left",
       backgroundImage: `url(${c})`,
       backgroundSize: "contain",
-      aspectRatio: x
+      aspectRatio: k
     }),
-    [c, x]
-  ), D = w(
+    [c, k]
+  ), T = b(
     () => ({
       width: `${s}%`,
-      backgroundImage: `url(${b})`,
+      backgroundImage: `url(${x})`,
       backgroundRepeat: "no-repeat",
       backgroundPosition: "top left",
       backgroundSize: "auto 100%"
     }),
-    [s, b]
-  ), G = w(
+    [s, x]
+  ), j = b(
     () => ({
       left: `${s}%`,
       transform: "translateX(-50%)",
@@ -68,30 +69,36 @@ const q = (N) => {
     }),
     [s, l]
   );
-  return /* @__PURE__ */ j(
+  return /* @__PURE__ */ X(
     "div",
     {
       ref: h,
-      className: F("xiping-image-compare-container", S),
-      style: C,
+      className: w("xiping-image-compare-container", $),
+      style: G,
       children: [
-        /* @__PURE__ */ t("div", { className: "xiping-image-compare-label xiping-image-compare-label-original", children: I }),
+        /* @__PURE__ */ t("div", { className: "xiping-image-compare-label xiping-image-compare-label-original", children: P }),
         /* @__PURE__ */ t(
           "div",
           {
             className: "xiping-image-compare-overlay",
-            style: D,
-            children: /* @__PURE__ */ t("div", { className: "xiping-image-compare-label xiping-image-compare-label-modified", children: P })
+            style: T,
+            children: /* @__PURE__ */ t("div", { className: "xiping-image-compare-label xiping-image-compare-label-modified", children: A })
           }
         ),
         /* @__PURE__ */ t(
           "div",
           {
-            className: "xiping-image-compare-divider",
-            style: G,
-            onMouseDown: L,
-            onTouchStart: L,
-            children: /* @__PURE__ */ t("div", { className: "xiping-image-compare-divider-button", children: /* @__PURE__ */ t(
+            className: w(
+              "xiping-image-compare-divider",
+              `xiping-image-compare-divider-theme-${M}`
+            ),
+            style: j,
+            onMouseDown: y,
+            onTouchStart: y,
+            children: /* @__PURE__ */ t("div", { className: w(
+              "xiping-image-compare-divider-button",
+              `xiping-image-compare-divider-button-theme-${M}`
+            ), children: /* @__PURE__ */ t(
               "svg",
               {
                 className: "xiping-image-compare-divider-icon",
@@ -116,5 +123,5 @@ const q = (N) => {
   );
 };
 export {
-  q as default
+  O as default
 };

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

@@ -0,0 +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:-moz-max-content;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%;-o-object-fit:contain;object-fit:contain}

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

@@ -1,68 +1,67 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useScroll as h, motion as g, useMotionValue as p, useMotionValueEvent as b, animate as l } from "motion/react";
-import { cn as v } from "../../utils/utils.js";
-import { size as w } from "lodash-es";
-import { useRef as k } from "react";
-const m = "0%", x = "100%", d = "20%", s = "80%", t = "#0000", e = "#000";
-function I(r) {
-  const n = p(
-    `linear-gradient(90deg, ${e}, ${e} ${m}, ${e} ${s}, ${t})`
+import { jsx as t } from "react/jsx-runtime";
+import { useScroll as f, motion as h, useMotionValue as b, useMotionValueEvent as x, animate as r } from "motion/react";
+import { size as v } from "lodash-es";
+import { useRef as I } from "react";
+import g from "clsx";
+import './ImageThumbnails.css';/* empty css                    */
+const $ = "0%", N = "100%", u = "20%", l = "80%", a = "#0000", e = "#000";
+function k(i) {
+  const n = b(
+    `linear-gradient(90deg, ${e}, ${e} ${$}, ${e} ${l}, ${a})`
   );
-  return b(r, "change", (a) => {
-    a === 0 ? l(
+  return x(i, "change", (s) => {
+    s === 0 ? r(
       n,
-      `linear-gradient(90deg, ${e}, ${e} ${m}, ${e} ${s}, ${t})`
-    ) : a === 1 ? l(
+      `linear-gradient(90deg, ${e}, ${e} ${$}, ${e} ${l}, ${a})`
+    ) : s === 1 ? r(
       n,
-      `linear-gradient(90deg, ${t}, ${e} ${d}, ${e} ${x}, ${e})`
-    ) : (r.getPrevious() === 0 || r.getPrevious() === 1) && l(
+      `linear-gradient(90deg, ${a}, ${e} ${u}, ${e} ${N}, ${e})`
+    ) : (i.getPrevious() === 0 || i.getPrevious() === 1) && r(
       n,
-      `linear-gradient(90deg, ${t}, ${e} ${d}, ${e} ${s}, ${t})`
+      `linear-gradient(90deg, ${a}, ${e} ${u}, ${e} ${l}, ${a})`
     );
   }), n;
 }
-const j = ({
-  images: r,
+const q = ({
+  images: i,
   currentIndex: n,
-  onImageSelect: a
+  onImageSelect: s
 }) => {
-  const i = k(null), { scrollXProgress: $ } = h({ container: i }), u = I($);
-  return /* @__PURE__ */ o(
+  const o = I(null), { scrollXProgress: p } = f({ container: o }), d = k(p);
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: v(
-        "h-24 bg-black/50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0",
-        {
-          hidden: w(r) <= 1
-        }
+      className: g(
+        "xiping-thumbnails-wrapper",
+        v(i) <= 1 && "xiping-thumbnails-wrapper--hidden"
       ),
-      children: /* @__PURE__ */ o(
-        g.div,
+      children: /* @__PURE__ */ t(
+        h.div,
         {
-          ref: i,
+          ref: o,
           style: {
-            maskImage: u,
-            WebkitOverflowScrolling: "touch",
-            scrollbarWidth: "none",
-            msOverflowStyle: "none"
+            maskImage: d
           },
-          className: "h-24 w-screen overflow-x-auto overflow-y-hidden scrollbar-hide",
-          children: /* @__PURE__ */ o("div", { className: "flex gap-2 p-2 h-24 min-w-max", children: r.map((c, f) => /* @__PURE__ */ o(
+          className: "xiping-thumbnails-scroll",
+          children: /* @__PURE__ */ t("div", { className: "xiping-thumbnails-container", children: i.map((m, c) => /* @__PURE__ */ t(
             "div",
             {
-              className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${f === n ? "border-white" : "border-transparent"}`,
-              onClick: () => a(f),
-              children: /* @__PURE__ */ o(
+              className: g(
+                "xiping-thumbnail-item",
+                c === n && "xiping-thumbnail-item--active"
+              ),
+              onClick: () => s(c),
+              children: /* @__PURE__ */ t(
                 "img",
                 {
-                  src: c,
+                  src: m,
                   alt: "",
-                  className: "w-full h-full object-contain",
+                  className: "xiping-thumbnail-image",
                   draggable: "false"
                 }
               )
             },
-            c
+            m
           )) })
         }
       )
@@ -70,5 +69,5 @@ const j = ({
   );
 };
 export {
-  j as default
+  q as default
 };

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

@@ -0,0 +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%;-o-object-fit:contain;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}