@xiping/react-components 0.0.63 → 0.0.66

package/dist/cjs/utils/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cjs/utils/utils.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("clsx"),t=require("tailwind-merge");function n(...e){return t.twMerge(r(e))}exports.cn=n;

package/dist/es/components/hyper-text/index.d.ts

@@ -0,0 +1,22 @@
+import { MotionProps } from 'motion/react';
+type CharacterSet = string[] | readonly string[];
+interface HyperTextProps extends MotionProps {
+    /** The text content to be animated */
+    children: string;
+    /** Optional className for styling */
+    className?: string;
+    /** Duration of the animation in milliseconds */
+    duration?: number;
+    /** Delay before animation starts in milliseconds */
+    delay?: number;
+    /** Component to render as - defaults to div */
+    as?: React.ElementType;
+    /** Whether to start animation when element comes into view */
+    startOnView?: boolean;
+    /** Whether to trigger animation on hover */
+    animateOnHover?: boolean;
+    /** Custom character set for scramble effect. Defaults to uppercase alphabet */
+    characterSet?: CharacterSet;
+}
+export declare function HyperText({ children, className, duration, delay, as: Component, startOnView, animateOnHover, characterSet, ...props }: HyperTextProps): import("react/jsx-runtime").JSX.Element;
+export default HyperText;

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

@@ -0,0 +1,73 @@
+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";
+import { useState as x, useRef as I, useEffect as d } from "react";
+const N = Object.freeze(
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
+), P = (e) => Math.floor(Math.random() * e);
+function L({
+  children: e,
+  className: A,
+  duration: m = 800,
+  delay: s = 0,
+  as: M = "div",
+  startOnView: f = !1,
+  animateOnHover: h = !0,
+  characterSet: i = N,
+  ...C
+}) {
+  const E = v.create(M, {
+    forwardMotionProps: !0
+  }), [R, b] = x(
+    () => e.split("")
+  ), [a, o] = x(!1), r = I(0), c = I(null), D = () => {
+    h && !a && (r.current = 0, o(!0));
+  };
+  return d(() => {
+    if (!f) {
+      const n = setTimeout(() => {
+        o(!0);
+      }, s);
+      return () => clearTimeout(n);
+    }
+    const t = new IntersectionObserver(
+      ([n]) => {
+        n.isIntersecting && (setTimeout(() => {
+          o(!0);
+        }, s), t.disconnect());
+      },
+      { threshold: 0.1, rootMargin: "-30% 0px -30% 0px" }
+    );
+    return c.current && t.observe(c.current), () => t.disconnect();
+  }, [s, f]), d(() => {
+    if (!a) return;
+    const t = m / (e.length * 10), n = e.length, l = 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));
+    }, t);
+    return () => clearInterval(l);
+  }, [e, m, a, i]), /* @__PURE__ */ u(
+    E,
+    {
+      ref: c,
+      className: g("overflow-hidden py-2 text-4xl font-bold", A),
+      onMouseEnter: D,
+      ...C,
+      children: /* @__PURE__ */ u(H, { children: R.map((t, n) => /* @__PURE__ */ u(
+        v.span,
+        {
+          className: g("font-mono", t === " " ? "w-3" : ""),
+          children: t.toUpperCase()
+        },
+        n
+      )) })
+    }
+  );
+}
+export {
+  L as HyperText,
+  L as default
+};

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

@@ -1,76 +1,99 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { Modal as b, ModalContent as g } from "@nextui-org/modal";
-import { IoDownloadOutline as w, IoCloseSharp as x } from "react-icons/io5";
-import v from "../pinch-content/PinchContent.js";
-import C from "react";
-const I = (d) => {
-  const { isOpen: m, onClose: s, imgSrc: t, canDownload: h = !1 } = d, l = Array.isArray(t) ? t : [t], [n, p] = C.useState(0), f = async () => {
-    const o = l[n];
+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";
+import { IoDownloadOutline as j, IoCloseSharp as I } from "react-icons/io5";
+import L from "../pinch-content/PinchContent.js";
+import * as n from "@radix-ui/react-scroll-area";
+import { useState as m } from "react";
+const D = (h) => {
+  const { isOpen: p, onClose: b, imgSrc: s, canDownload: u = !1 } = h, r = Array.isArray(s) ? s : [s], [i, g] = m(0), [w, c] = m(!0), d = () => {
+    c(!0), b();
+  }, x = async () => {
+    const o = r[i];
     try {
-      const u = await (await fetch(o)).blob(), c = window.URL.createObjectURL(u), r = document.createElement("a");
-      r.href = c, r.download = o.split("/").pop() || "image", document.body.appendChild(r), r.click(), window.URL.revokeObjectURL(c), document.body.removeChild(r);
+      const y = await (await fetch(o)).blob(), f = window.URL.createObjectURL(y), t = document.createElement("a");
+      t.href = f, t.download = o.split("/").pop() || "image", document.body.appendChild(t), t.click(), window.URL.revokeObjectURL(f), document.body.removeChild(t);
     } catch (a) {
       console.error("Error downloading image:", a);
     }
+  }, N = () => {
+    c(!1);
+  }, v = () => {
+    c(!1);
   };
   return /* @__PURE__ */ e(
-    b,
+    C,
     {
-      isOpen: m,
+      isOpen: p,
       size: "full",
-      onClose: s,
+      onClose: d,
       className: "bg-black bg-opacity-70",
       hideCloseButton: !0,
       portalContainer: document.body,
-      children: /* @__PURE__ */ e(g, { className: "overflow-hidden", children: /* @__PURE__ */ i("div", { className: "w-screen h-screen relative flex flex-col", children: [
-        /* @__PURE__ */ i("div", { className: "absolute top-2 right-2 flex gap-4 z-10", children: [
-          h && /* @__PURE__ */ e(
-            w,
+      children: /* @__PURE__ */ e(k, { className: "overflow-hidden", children: /* @__PURE__ */ l("div", { className: "w-screen h-screen relative flex flex-col pt-safe-offset-0", children: [
+        /* @__PURE__ */ l("div", { className: "absolute top-2 right-2 flex gap-4 z-10", children: [
+          u && /* @__PURE__ */ e(
+            j,
             {
               size: 24,
               className: "text-white cursor-pointer",
-              onClick: f
+              onClick: x
             }
           ),
           /* @__PURE__ */ e(
-            x,
+            I,
             {
               size: 24,
               className: "text-white cursor-pointer",
-              onClick: s
+              onClick: d
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ e(v, { canRotate: !1, children: /* @__PURE__ */ e(
-          "img",
-          {
-            draggable: "false",
-            src: l[n],
-            alt: "",
-            className: "w-screen h-full object-contain pointer-events-none"
-          }
-        ) }) }),
-        l.length > 1 && /* @__PURE__ */ e("div", { className: "h-24 bg-black bg-opacity-50 shrink-0", children: /* @__PURE__ */ e("div", { className: "w-full h-full overflow-x-auto flex gap-2 p-2", children: l.map((o, a) => /* @__PURE__ */ e(
-          "div",
-          {
-            className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 ${a === n ? "border-white" : "border-transparent"}`,
-            onClick: () => p(a),
-            children: /* @__PURE__ */ e(
-              "img",
-              {
-                src: o,
-                alt: "",
-                className: "w-full h-full object-contain",
-                draggable: "false"
-              }
-            )
-          },
-          o
-        )) }) })
+        /* @__PURE__ */ l("div", { className: "flex-1 min-h-0 relative flex items-center justify-center", children: [
+          /* @__PURE__ */ e(L, { canRotate: !1, className: "w-full h-full", children: /* @__PURE__ */ e(
+            "img",
+            {
+              draggable: "false",
+              src: r[i],
+              alt: "",
+              className: "w-screen h-full object-contain pointer-events-none",
+              onLoad: N,
+              onError: v
+            }
+          ) }),
+          w && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", children: /* @__PURE__ */ e(z, { color: "white", size: "lg" }) })
+        ] }),
+        r.length > 1 && /* @__PURE__ */ e("div", { className: "h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0", children: /* @__PURE__ */ l(n.Root, { className: "h-24 w-screen", type: "auto", children: [
+          /* @__PURE__ */ e(n.Viewport, { className: "pppp h-full w-full", children: /* @__PURE__ */ e("div", { className: "flex gap-2 p-2 h-24", children: r.map((o, a) => /* @__PURE__ */ e(
+            "div",
+            {
+              className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${a === i ? "border-white" : "border-transparent"}`,
+              onClick: () => g(a),
+              children: /* @__PURE__ */ e(
+                "img",
+                {
+                  src: o,
+                  alt: "",
+                  className: "w-full h-full object-contain",
+                  draggable: "false"
+                }
+              )
+            },
+            o
+          )) }) }),
+          /* @__PURE__ */ e(
+            n.Scrollbar,
+            {
+              className: "flex select-none touch-none p-0.5 bg-black/50 transition-colors duration-150 ease-out hover:bg-black/80 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col",
+              orientation: "horizontal",
+              children: /* @__PURE__ */ e(n.Thumb, { className: "flex-1 bg-white/50 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" })
+            }
+          )
+        ] }) })
       ] }) })
     }
   );
 };
 export {
-  I as default
+  D as default
 };

package/dist/es/components/morphing-text/index.d.ts

@@ -0,0 +1,6 @@
+interface MorphingTextProps {
+    className?: string;
+    texts: string[];
+}
+export declare const MorphingText: React.FC<MorphingTextProps>;
+export default MorphingText;

package/dist/es/components/pinch-content/PinchContent.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 export interface PinchContentProps {
+    className?: string;
     children?: ReactNode;
     canDrag?: boolean;
     canPinch?: boolean;
@@ -8,6 +9,7 @@ export interface PinchContentProps {
         min: number;
         max: number;
     };
+    wheelZoomFactor?: number;
 }
 declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
 export default PinchContent;

package/dist/es/components/pinch-content/PinchContent.js

@@ -1,61 +1,80 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useSpring as B, animated as C } from "@react-spring/web";
-import { createUseGesture as G, dragAction as N, pinchAction as U } from "@use-gesture/react";
+import { jsx as P } from "react/jsx-runtime";
+import { useSpring as R, animated as B } from "@react-spring/web";
+import { createUseGesture as C, dragAction as G, pinchAction as N, wheelAction as U } from "@use-gesture/react";
 import { useRef as j } from "react";
-import { useMount as w, useUnmount as M } from "ahooks";
-const S = G([N, U]), o = (i) => i.preventDefault(), I = (i) => {
+import { useMount as F, useUnmount as W } from "ahooks";
+import k from "clsx";
+const q = C([G, N, U]), o = (i) => i.preventDefault(), Q = (i) => {
   const {
-    children: l,
-    canPinch: h = !0,
-    canDrag: v = !0,
-    canRotate: p = !0,
-    scaleBounds: m = { min: 0.3, max: 8 }
-  } = i, t = j(null);
-  w(() => {
-    var r, e, n;
-    (r = t.current) == null || r.addEventListener("gesturestart", o), (e = t.current) == null || e.addEventListener("gesturechange", o), (n = t.current) == null || n.addEventListener("gestureend", o);
-  }), M(() => {
-    var r, e, n;
-    (r = t.current) == null || r.removeEventListener("gesturestart", o), (e = t.current) == null || e.removeEventListener("gesturechange", o), (n = t.current) == null || n.removeEventListener("gestureend", o);
+    className: m,
+    children: h,
+    canPinch: g = !0,
+    canDrag: p = !0,
+    canRotate: v = !0,
+    scaleBounds: l = { min: 0.3, max: 10 },
+    wheelZoomFactor: x = 0.1
+  } = i, n = j(null);
+  F(() => {
+    var t, e, r;
+    (t = n.current) == null || t.addEventListener("gesturestart", o), (e = n.current) == null || e.addEventListener("gesturechange", o), (r = n.current) == null || r.addEventListener("gestureend", o);
+  }), W(() => {
+    var t, e, r;
+    (t = n.current) == null || t.removeEventListener("gesturestart", o), (e = n.current) == null || e.removeEventListener("gesturechange", o), (r = n.current) == null || r.removeEventListener("gestureend", o);
   });
-  const [c, g] = B(() => ({
+  const [s, d] = R(() => ({
     x: 0,
     y: 0,
     scale: 1,
     rotateZ: 0
   }));
-  return S(
+  return q(
     {
-      // onHover: ({ active, event }) => console.log('hover', event, active),
-      // onMove: ({ event }) => console.log('move', event),
-      onDrag: ({ pinching: r, cancel: e, offset: [n, a], ...u }) => {
-        if (console.log(u), !v || r) return e();
-        g.start({ x: n, y: a });
+      onWheel: ({ event: t, delta: [, e] }) => {
+        if (!g) return;
+        const a = s.scale.get() * (1 - e * x), u = Math.min(
+          Math.max(a, l.min),
+          l.max
+        );
+        d.start({ scale: u });
+      },
+      onDrag: ({ pinching: t, cancel: e, offset: [r, a], ...u }) => {
+        if (!p || t) return e();
+        d.start({ x: r, y: a });
       },
       onPinch: ({
-        origin: [r, e],
-        first: n,
+        origin: [t, e],
+        first: r,
         movement: [a],
-        offset: [u, x],
-        memo: s,
-        cancel: y
+        offset: [u, y],
+        memo: c,
+        cancel: E
       }) => {
-        if (!h) return y();
-        if (n) {
-          const { width: b, height: D, x: P, y: R } = t.current.getBoundingClientRect(), Z = r - (P + b / 2), A = e - (R + D / 2);
-          s = [c.x.get(), c.y.get(), Z, A];
+        if (!g) return E();
+        if (r) {
+          const { width: S, height: b, x: Z, y: A } = n.current.getBoundingClientRect(), D = t - (Z + S / 2), M = e - (A + b / 2);
+          c = [s.x.get(), s.y.get(), D, M];
         }
-        const E = s[0] - (a - 1) * s[2], L = s[1] - (a - 1) * s[3], d = { scale: u, rotateZ: 0, x: E, y: L };
-        return p && (d.rotateZ = x), g.start(d), s;
+        const L = c[0] - (a - 1) * c[2], w = c[1] - (a - 1) * c[3], f = { scale: u, rotateZ: 0, x: L, y: w };
+        return v && (f.rotateZ = y), d.start(f), c;
       }
     },
     {
-      target: t,
-      drag: { from: () => [c.x.get(), c.y.get()] },
-      pinch: { scaleBounds: m, rubberband: !0 }
+      target: n,
+      drag: { from: () => [s.x.get(), s.y.get()] },
+      pinch: { scaleBounds: l, rubberband: !0 },
+      wheel: { enabled: !0 }
+    }
+  ), // <div className="flex items-center justify-center h-full w-full">
+  /* @__PURE__ */ P(
+    B.div,
+    {
+      className: k("select-none", m),
+      ref: n,
+      style: s,
+      children: h
     }
-  ), /* @__PURE__ */ f("div", { className: "flex fill center", children: /* @__PURE__ */ f(C.div, { className: "select-none", ref: t, style: c, children: l }) });
+  );
 };
 export {
-  I as default
+  Q as default
 };

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

@@ -0,0 +1,12 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+export interface ShimmerButtonProps extends ComponentPropsWithoutRef<"button"> {
+    shimmerColor?: string;
+    shimmerSize?: string;
+    borderRadius?: string;
+    shimmerDuration?: string;
+    background?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const ShimmerButton: React.ForwardRefExoticComponent<ShimmerButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ShimmerButton;

package/dist/es/components/text-animate/TextAnimate.d.ts

@@ -0,0 +1,52 @@
+import { MotionProps, Variants } from 'motion/react';
+import { ElementType } from 'react';
+type AnimationType = "text" | "word" | "character" | "line";
+type AnimationVariant = "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown";
+interface TextAnimateProps extends MotionProps {
+    /**
+     * The text content to animate
+     */
+    children: string;
+    /**
+     * The class name to be applied to the component
+     */
+    className?: string;
+    /**
+     * The class name to be applied to each segment
+     */
+    segmentClassName?: string;
+    /**
+     * The delay before the animation starts
+     */
+    delay?: number;
+    /**
+     * The duration of the animation
+     */
+    duration?: number;
+    /**
+     * Custom motion variants for the animation
+     */
+    variants?: Variants;
+    /**
+     * The element type to render
+     */
+    as?: ElementType;
+    /**
+     * How to split the text ("text", "word", "character")
+     */
+    by?: AnimationType;
+    /**
+     * Whether to start animation when component enters viewport
+     */
+    startOnView?: boolean;
+    /**
+     * Whether to animate only once
+     */
+    once?: boolean;
+    /**
+     * The animation preset to use
+     */
+    animation?: AnimationVariant;
+}
+export declare function TextAnimate({ children, delay, duration, variants, className, segmentClassName, as: Component, startOnView, once, by, animation, ...props }: TextAnimateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/es/components/text-animate/index.d.ts

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

package/dist/es/components/typing-animation/index.d.ts

@@ -0,0 +1,11 @@
+import { MotionProps } from 'motion/react';
+interface TypingAnimationProps extends MotionProps {
+    children: string;
+    className?: string;
+    duration?: number;
+    delay?: number;
+    as?: React.ElementType;
+    startOnView?: boolean;
+}
+export declare function TypingAnimation({ children, className, duration, delay, as: Component, startOnView, ...props }: TypingAnimationProps): import("react/jsx-runtime").JSX.Element;
+export default TypingAnimation;

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

@@ -0,0 +1,58 @@
+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";
+function R({
+  children: r,
+  className: l,
+  duration: s = 100,
+  delay: n = 0,
+  as: m = "div",
+  startOnView: i = !1,
+  ...p
+}) {
+  const d = b.create(m, {
+    forwardMotionProps: !0
+  }), [g, v] = a(""), [c, f] = a(!1), o = I(null);
+  return u(() => {
+    if (!i) {
+      const t = setTimeout(() => {
+        f(!0);
+      }, n);
+      return () => clearTimeout(t);
+    }
+    const e = new IntersectionObserver(
+      ([t]) => {
+        t.isIntersecting && (setTimeout(() => {
+          f(!0);
+        }, n), e.disconnect());
+      },
+      { threshold: 0.1 }
+    );
+    return o.current && e.observe(o.current), () => e.disconnect();
+  }, [n, i]), u(() => {
+    if (!c) return;
+    let e = 0;
+    const t = setInterval(() => {
+      e < r.length ? (v(r.substring(0, e + 1)), e++) : clearInterval(t);
+    }, s);
+    return () => {
+      clearInterval(t);
+    };
+  }, [r, s, c]), /* @__PURE__ */ T(
+    d,
+    {
+      ref: o,
+      className: x(
+        "text-4xl font-bold leading-[5rem] tracking-[-0.02em]",
+        l
+      ),
+      ...p,
+      children: g
+    }
+  );
+}
+export {
+  R as TypingAnimation,
+  R as default
+};

package/dist/es/index.d.ts

@@ -2,3 +2,5 @@ export * from './components/button/Button';
 export * from './components/txt-reader/TxtReader';
 export * from './components/pinch-content';
 export * from './components/image-viewer';
+export * from './components/hyper-text';
+export * from './components/typing-animation';

package/dist/es/index.js

@@ -1,11 +1,15 @@
 /* empty css          */
-import { Button as r } from "./components/button/Button.js";
-import { TxtReader as f } from "./components/txt-reader/TxtReader.js";
-import { default as p } from "./components/pinch-content/PinchContent.js";
-import { default as n } from "./components/image-viewer/ImageViewer.js";
+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 { TypingAnimation as n } from "./components/typing-animation/index.js";
+import { default as d } from "./components/pinch-content/PinchContent.js";
+import { default as T } from "./components/image-viewer/ImageViewer.js";
 export {
-  r as Button,
-  n as ImageViewer,
-  p as PinchContent,
-  f as TxtReader
+  t as Button,
+  x as HyperText,
+  T as ImageViewer,
+  d as PinchContent,
+  p as TxtReader,
+  n as TypingAnimation
 };