@xiping/react-components 0.0.69 → 0.0.71

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as u } from "react/jsx-runtime";
 import { cn as g } from "../../utils/utils.js";
 import { motion as v, AnimatePresence as H } from "motion/react";
@@ -8,10 +9,10 @@ const N = Object.freeze(
 function L({
   children: e,
   className: A,
-  duration: m = 800,
+  duration: l = 800,
   delay: s = 0,
   as: M = "div",
-  startOnView: f = !1,
+  startOnView: m = !1,
   animateOnHover: h = !0,
   characterSet: i = N,
   ...C
@@ -24,7 +25,7 @@ function L({
     h && !a && (r.current = 0, o(!0));
   };
   return d(() => {
-    if (!f) {
+    if (!m) {
       const n = setTimeout(() => {
         o(!0);
       }, s);
@@ -39,17 +40,17 @@ function L({
       { threshold: 0.1, rootMargin: "-30% 0px -30% 0px" }
     );
     return c.current && t.observe(c.current), () => t.disconnect();
-  }, [s, f]), d(() => {
+  }, [s, m]), d(() => {
     if (!a) return;
-    const t = m / (e.length * 10), n = e.length, l = setInterval(() => {
+    const t = l / (e.length * 10), n = e.length, f = setInterval(() => {
       r.current < n ? (b(
         (w) => w.map(
           (p, T) => p === " " ? p : T <= r.current ? e[T] : i[P(i.length)]
         )
-      ), r.current = r.current + 0.1) : (o(!1), clearInterval(l));
+      ), r.current = r.current + 0.1) : (o(!1), clearInterval(f));
     }, t);
-    return () => clearInterval(l);
-  }, [e, m, a, i]), /* @__PURE__ */ u(
+    return () => clearInterval(f);
+  }, [e, l, a, i]), /* @__PURE__ */ u(
     E,
     {
       ref: c,

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

@@ -0,0 +1,7 @@
+interface ImageCompareProps {
+    className?: string;
+    originalImage: string;
+    modifiedImage: string;
+}
+declare const ImageCompare: (props: ImageCompareProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageCompare;

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

@@ -0,0 +1,101 @@
+import { jsxs as R, jsx as s } from "react/jsx-runtime";
+import y from "clsx";
+import { useState as d, useRef as I, useCallback as t, useEffect as N } from "react";
+const T = (i, o) => {
+  let n;
+  return function(...l) {
+    n || (i.apply(this, l), n = !0, setTimeout(() => n = !1, o));
+  };
+}, P = (i) => {
+  const { originalImage: o, modifiedImage: n, className: l } = i, [h, v] = d(50), [a, g] = d(!1), [w, b] = d(16 / 9), c = I(null), f = t(
+    (e) => {
+      if (!a || !c.current) return;
+      const p = c.current.getBoundingClientRect(), x = (e - p.left) / p.width * 100;
+      v(Math.min(100, Math.max(0, x)));
+    },
+    [a]
+  ), r = t(
+    T((e) => f(e), 16),
+    [f]
+  ), M = t((e) => {
+    r(e.clientX);
+  }, [r]), k = t((e) => {
+    r(e.touches[0].clientX);
+  }, [r]), m = t(() => {
+    g(!0);
+  }, []), u = t(() => {
+    g(!1);
+  }, []);
+  return N(() => {
+    const e = new Image();
+    e.onload = () => {
+      b(e.width / e.height);
+    }, e.src = o;
+  }, [o]), /* @__PURE__ */ R(
+    "div",
+    {
+      ref: c,
+      className: y("relative select-none overflow-hidden w-full", l),
+      style: {
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "top left",
+        backgroundImage: `url(${o})`,
+        backgroundSize: "contain",
+        aspectRatio: w
+      },
+      onMouseMove: a ? M : void 0,
+      onTouchMove: a ? k : void 0,
+      onMouseUp: u,
+      onMouseLeave: u,
+      onTouchEnd: u,
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: "absolute inset-0 h-full overflow-hidden",
+            style: {
+              width: `${h}%`,
+              backgroundImage: `url(${n})`,
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "top left",
+              backgroundSize: "auto 100%"
+            }
+          }
+        ),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: "absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize",
+            style: {
+              left: `${h}%`,
+              transform: "translateX(-50%)"
+            },
+            onMouseDown: m,
+            onTouchStart: m,
+            children: /* @__PURE__ */ s("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white shadow-lg flex items-center justify-center", children: /* @__PURE__ */ s(
+              "svg",
+              {
+                className: "w-6 h-6 text-gray-600",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ s(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M8 9l4-4 4 4m0 6l-4 4-4-4"
+                  }
+                )
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  P as default
+};

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

@@ -0,0 +1,36 @@
+import "react/jsx-runtime";
+import o from "./ImageCompare.js";
+import { a as t } from "../../node_modules/.pnpm/@faker-js_faker@9.5.0/node_modules/@faker-js/faker/dist/chunk-KRMY7ATX.js";
+t.image.dataUri({
+  width: 1920,
+  height: 1080
+});
+t.image.dataUri({
+  width: 1920,
+  height: 1080
+});
+const r = {
+  title: "Components/ImageCompare",
+  component: o,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    originalImage: {
+      control: "text",
+      description: "URL or path of the original image"
+    },
+    modifiedImage: {
+      control: "text",
+      description: "URL or path of the modified/comparison image"
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the component"
+    }
+  }
+};
+export {
+  r as default
+};

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

@@ -0,0 +1,3 @@
+import { default as ImageCompare } from './ImageCompare.stories.tsx';
+export { ImageCompare };
+export default ImageCompare;

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { Modal as C, ModalContent as k } from "@heroui/modal";
 import { Spinner as z } from "@heroui/spinner";

package/dist/es/components/shimmer-button/ShimmerButton.js

@@ -0,0 +1,75 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import p from "react";
+import { cn as e } from "../../utils/utils.js";
+const m = p.forwardRef(
+  ({
+    shimmerColor: a = "#ffffff",
+    shimmerSize: t = "0.05em",
+    shimmerDuration: s = "3s",
+    borderRadius: i = "100px",
+    background: o = "rgba(0, 0, 0, 1)",
+    className: n,
+    children: d,
+    ...f
+  }, u) => /* @__PURE__ */ l(
+    "button",
+    {
+      style: {
+        "--spread": "90deg",
+        "--shimmer-color": a,
+        "--radius": i,
+        "--speed": s,
+        "--cut": t,
+        "--bg": o
+      },
+      className: e(
+        "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black",
+        "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
+        n
+      ),
+      ref: u,
+      ...f,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: e(
+              "-z-30 blur-[2px]",
+              "absolute inset-0 overflow-visible [container-type:size]"
+            ),
+            children: /* @__PURE__ */ r("div", { className: "absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]", children: /* @__PURE__ */ r("div", { className: "absolute -inset-full w-auto rotate-0 animate-spin-around [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" }) })
+          }
+        ),
+        d,
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: e(
+              "insert-0 absolute size-full",
+              "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
+              // transition
+              "transform-gpu transition-all duration-300 ease-in-out",
+              // on hover
+              "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
+              // on click
+              "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: e(
+              "absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]"
+            )
+          }
+        )
+      ]
+    }
+  )
+);
+m.displayName = "ShimmerButton";
+export {
+  m as ShimmerButton,
+  m as default
+};

package/dist/es/components/shimmer-button/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ShimmerButton } from './ShimmerButton.tsx';
+export { ShimmerButton };
+export default ShimmerButton;

package/dist/es/components/text-animate/TextAnimate.js

@@ -0,0 +1,309 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { cn as y } from "../../utils/utils.js";
+import { motion as u, AnimatePresence as g } from "motion/react";
+const s = {
+  text: 0.06,
+  word: 0.05,
+  character: 0.03,
+  line: 0.06
+}, t = {
+  hidden: { opacity: 1 },
+  show: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      staggerChildren: 0.05,
+      staggerDirection: -1
+    }
+  }
+}, b = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  }
+}, o = {
+  fadeIn: {
+    container: t,
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      show: (i) => ({
+        opacity: 1,
+        y: 0,
+        transition: {
+          delay: i,
+          duration: 0.3
+        }
+      }),
+      exit: {
+        opacity: 0,
+        y: 20,
+        transition: { duration: 0.3 }
+      }
+    }
+  },
+  blurIn: {
+    container: t,
+    item: {
+      hidden: { opacity: 0, filter: "blur(10px)" },
+      show: (i) => ({
+        opacity: 1,
+        filter: "blur(0px)",
+        transition: {
+          delay: i * 0.1,
+          duration: 0.3
+        }
+      }),
+      exit: {
+        opacity: 0,
+        filter: "blur(10px)",
+        transition: { duration: 0.3 }
+      }
+    }
+  },
+  blurInUp: {
+    container: t,
+    item: {
+      hidden: { opacity: 0, filter: "blur(10px)", y: 20 },
+      show: (i) => ({
+        opacity: 1,
+        filter: "blur(0px)",
+        y: 0,
+        transition: {
+          y: { duration: 0.3 },
+          opacity: { duration: 0.4 },
+          filter: { duration: 0.3 }
+        }
+      }),
+      exit: {
+        opacity: 0,
+        filter: "blur(10px)",
+        y: 20,
+        transition: {
+          y: { duration: 0.3 },
+          opacity: { duration: 0.4 },
+          filter: { duration: 0.3 }
+        }
+      }
+    }
+  },
+  blurInDown: {
+    container: t,
+    item: {
+      hidden: { opacity: 0, filter: "blur(10px)", y: -20 },
+      show: (i) => ({
+        opacity: 1,
+        filter: "blur(0px)",
+        y: 0,
+        transition: {
+          y: { duration: 0.3 },
+          opacity: { duration: 0.4 },
+          filter: { duration: 0.3 }
+        }
+      })
+    }
+  },
+  slideUp: {
+    container: t,
+    item: {
+      hidden: { y: 20, opacity: 0 },
+      show: (i) => ({
+        y: 0,
+        opacity: 1,
+        transition: {
+          delay: i,
+          duration: 0.3
+        }
+      }),
+      exit: {
+        y: -20,
+        opacity: 0,
+        transition: {
+          duration: 0.3
+        }
+      }
+    }
+  },
+  slideDown: {
+    container: t,
+    item: {
+      hidden: { y: -20, opacity: 0 },
+      show: {
+        y: 0,
+        opacity: 1,
+        transition: { duration: 0.3 }
+      },
+      exit: {
+        y: 20,
+        opacity: 0,
+        transition: { duration: 0.3 }
+      }
+    }
+  },
+  slideLeft: {
+    container: t,
+    item: {
+      hidden: { x: 20, opacity: 0 },
+      show: {
+        x: 0,
+        opacity: 1,
+        transition: { duration: 0.3 }
+      },
+      exit: {
+        x: -20,
+        opacity: 0,
+        transition: { duration: 0.3 }
+      }
+    }
+  },
+  slideRight: {
+    container: t,
+    item: {
+      hidden: { x: -20, opacity: 0 },
+      show: {
+        x: 0,
+        opacity: 1,
+        transition: { duration: 0.3 }
+      },
+      exit: {
+        x: 20,
+        opacity: 0,
+        transition: { duration: 0.3 }
+      }
+    }
+  },
+  scaleUp: {
+    container: t,
+    item: {
+      hidden: { scale: 0.5, opacity: 0 },
+      show: {
+        scale: 1,
+        opacity: 1,
+        transition: {
+          duration: 0.3,
+          scale: {
+            type: "spring",
+            damping: 15,
+            stiffness: 300
+          }
+        }
+      },
+      exit: {
+        scale: 0.5,
+        opacity: 0,
+        transition: { duration: 0.3 }
+      }
+    }
+  },
+  scaleDown: {
+    container: t,
+    item: {
+      hidden: { scale: 1.5, opacity: 0 },
+      show: (i) => ({
+        scale: 1,
+        opacity: 1,
+        transition: {
+          delay: i,
+          duration: 0.3,
+          scale: {
+            type: "spring",
+            damping: 15,
+            stiffness: 300
+          }
+        }
+      }),
+      exit: {
+        scale: 1.5,
+        opacity: 0,
+        transition: { duration: 0.3 }
+      }
+    }
+  }
+};
+function U({
+  children: i,
+  delay: I = 0,
+  duration: k = 0.3,
+  variants: C,
+  className: h,
+  segmentClassName: x,
+  as: m = "p",
+  startOnView: c = !0,
+  once: v = !1,
+  by: a = "word",
+  animation: n = "fadeIn",
+  ...f
+}) {
+  const w = u.create(m), d = n ? {
+    container: {
+      ...o[n].container,
+      show: {
+        ...o[n].container.show,
+        transition: {
+          staggerChildren: s[a]
+        }
+      },
+      exit: {
+        ...o[n].container.exit,
+        transition: {
+          staggerChildren: s[a],
+          staggerDirection: -1
+        }
+      }
+    },
+    item: o[n].item
+  } : { container: t, item: b };
+  let e = [];
+  switch (a) {
+    case "word":
+      e = i.split(/(\s+)/);
+      break;
+    case "character":
+      e = i.split("");
+      break;
+    case "line":
+      e = i.split(`
+`);
+      break;
+    case "text":
+    default:
+      e = [i];
+      break;
+  }
+  return /* @__PURE__ */ r(g, { mode: "popLayout", children: /* @__PURE__ */ r(
+    w,
+    {
+      variants: d.container,
+      initial: "hidden",
+      whileInView: c ? "show" : void 0,
+      animate: c ? void 0 : "show",
+      exit: "exit",
+      className: y("whitespace-pre-wrap", h),
+      ...f,
+      children: e.map((p, l) => /* @__PURE__ */ r(
+        u.span,
+        {
+          variants: d.item,
+          custom: l * s[a],
+          className: y(
+            a === "line" ? "block" : "inline-block whitespace-pre",
+            x
+          ),
+          children: p
+        },
+        `${a}-${p}-${l}`
+      ))
+    }
+  ) });
+}
+export {
+  U as TextAnimate
+};

package/dist/es/components/typing-animation/index.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsx as T } from "react/jsx-runtime";
 import { cn as x } from "../../utils/utils.js";
 import { motion as b } from "motion/react";
-import { useState as a, useRef as I, useEffect as u } from "react";
+import { useState as u, useRef as I, useEffect as a } from "react";
 function R({
   children: r,
   className: l,
@@ -13,8 +14,8 @@ function R({
 }) {
   const d = b.create(m, {
     forwardMotionProps: !0
-  }), [g, v] = a(""), [c, f] = a(!1), o = I(null);
-  return u(() => {
+  }), [g, v] = u(""), [c, f] = u(!1), o = I(null);
+  return a(() => {
     if (!i) {
       const t = setTimeout(() => {
         f(!0);
@@ -30,7 +31,7 @@ function R({
       { threshold: 0.1 }
     );
     return o.current && e.observe(o.current), () => e.disconnect();
-  }, [n, i]), u(() => {
+  }, [n, i]), a(() => {
     if (!c) return;
     let e = 0;
     const t = setInterval(() => {

package/dist/es/index.d.ts

@@ -4,3 +4,6 @@ export * from './components/pinch-content';
 export * from './components/image-viewer';
 export * from './components/hyper-text';
 export * from './components/typing-animation';
+export * from './components/text-animate';
+export * from './components/shimmer-button';
+export * from './components/image-compare';

package/dist/es/index.js

@@ -1,15 +1,21 @@
 /* empty css          */
 import { Button as t } from "./components/button/Button.js";
 import { TxtReader as p } from "./components/txt-reader/TxtReader.js";
-import { HyperText as x } from "./components/hyper-text/index.js";
+import { HyperText as f } from "./components/hyper-text/index.js";
 import { TypingAnimation as n } from "./components/typing-animation/index.js";
-import { default as d } from "./components/pinch-content/PinchContent.js";
+import { default as u } from "./components/pinch-content/PinchContent.js";
 import { default as T } from "./components/image-viewer/ImageViewer.js";
+import { ShimmerButton as l } from "./components/shimmer-button/ShimmerButton.js";
+import { default as h } from "./components/image-compare/ImageCompare.stories.js";
+import { TextAnimate as A } from "./components/text-animate/TextAnimate.js";
 export {
   t as Button,
-  x as HyperText,
+  f as HyperText,
+  h as ImageCompare,
   T as ImageViewer,
-  d as PinchContent,
+  u as PinchContent,
+  l as ShimmerButton,
+  A as TextAnimate,
   p as TxtReader,
   n as TypingAnimation
 };