@xiping/react-components 1.0.27 → 1.0.29

package/dist/es/components/animated-list/AnimatedList.d.ts

@@ -0,0 +1,9 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+export declare function AnimatedListItem({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface AnimatedListProps extends ComponentPropsWithoutRef<"div"> {
+    children: React.ReactNode;
+    delay?: number;
+}
+export declare const AnimatedList: React.MemoExoticComponent<({ children, className, delay, ...props }: AnimatedListProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/es/components/animated-list/AnimatedList.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { cn as f } from "../../utils/utils.js";
+import { motion as d, AnimatePresence as h } from "motion/react";
+import a, { useState as x, useMemo as m, useEffect as y } from "react";
+function g({ children: i }) {
+  const o = {
+    initial: { scale: 0, opacity: 0 },
+    animate: { scale: 1, opacity: 1, originY: 0 },
+    exit: { scale: 0, opacity: 0 },
+    transition: { type: "spring", stiffness: 350, damping: 40 }
+  };
+  return /* @__PURE__ */ s(d.div, { ...o, layout: !0, className: "mx-auto w-full", children: i });
+}
+const A = a.memo(
+  ({ children: i, className: o, delay: r = 1e3, ...c }) => {
+    const [n, l] = x(0), e = m(
+      () => a.Children.toArray(i),
+      [i]
+    );
+    y(() => {
+      if (n < e.length - 1) {
+        const t = setTimeout(() => {
+          l((p) => (p + 1) % e.length);
+        }, r);
+        return () => clearTimeout(t);
+      }
+    }, [n, r, e.length]);
+    const u = m(() => e.slice(0, n + 1).reverse(), [n, e]);
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: f("flex flex-col items-center gap-4", o),
+        ...c,
+        children: /* @__PURE__ */ s(h, { children: u.map((t) => /* @__PURE__ */ s(g, { children: t }, t.key)) })
+      }
+    );
+  }
+);
+A.displayName = "AnimatedList";
+export {
+  A as AnimatedList,
+  g as AnimatedListItem
+};

package/dist/es/components/animated-list/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimatedList.tsx';

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

@@ -1,43 +1,43 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useScroll as g, motion as h, useMotionValue as p, useMotionValueEvent as b, animate as l } from "motion/react";
+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%", n = "#0000", e = "#000";
+const m = "0%", x = "100%", d = "20%", s = "80%", t = "#0000", e = "#000";
 function I(r) {
-  const o = p(
-    `linear-gradient(90deg, ${e}, ${e} ${m}, ${e} ${s}, ${n})`
+  const n = p(
+    `linear-gradient(90deg, ${e}, ${e} ${m}, ${e} ${s}, ${t})`
   );
   return b(r, "change", (a) => {
     a === 0 ? l(
-      o,
-      `linear-gradient(90deg, ${e}, ${e} ${m}, ${e} ${s}, ${n})`
+      n,
+      `linear-gradient(90deg, ${e}, ${e} ${m}, ${e} ${s}, ${t})`
     ) : a === 1 ? l(
-      o,
-      `linear-gradient(90deg, ${n}, ${e} ${d}, ${e} ${x}, ${e})`
+      n,
+      `linear-gradient(90deg, ${t}, ${e} ${d}, ${e} ${x}, ${e})`
     ) : (r.getPrevious() === 0 || r.getPrevious() === 1) && l(
-      o,
-      `linear-gradient(90deg, ${n}, ${e} ${d}, ${e} ${s}, ${n})`
+      n,
+      `linear-gradient(90deg, ${t}, ${e} ${d}, ${e} ${s}, ${t})`
     );
-  }), o;
+  }), n;
 }
 const j = ({
   images: r,
-  currentIndex: o,
+  currentIndex: n,
   onImageSelect: a
 }) => {
-  const i = k(null), { scrollXProgress: $ } = g({ container: i }), u = I($);
-  return /* @__PURE__ */ t(
+  const i = k(null), { scrollXProgress: $ } = h({ container: i }), u = I($);
+  return /* @__PURE__ */ o(
     "div",
     {
       className: v(
-        "h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0",
+        "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
         }
       ),
-      children: /* @__PURE__ */ t(
-        h.div,
+      children: /* @__PURE__ */ o(
+        g.div,
         {
           ref: i,
           style: {
@@ -47,12 +47,12 @@ const j = ({
             msOverflowStyle: "none"
           },
           className: "h-24 w-screen overflow-x-auto overflow-y-hidden scrollbar-hide",
-          children: /* @__PURE__ */ t("div", { className: "flex gap-2 p-2 h-24 min-w-max", children: r.map((c, f) => /* @__PURE__ */ t(
+          children: /* @__PURE__ */ o("div", { className: "flex gap-2 p-2 h-24 min-w-max", children: r.map((c, f) => /* @__PURE__ */ o(
             "div",
             {
-              className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${f === o ? "border-white" : "border-transparent"}`,
+              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__ */ t(
+              children: /* @__PURE__ */ o(
                 "img",
                 {
                   src: c,

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Modal as N, ModalContent as L } from "@heroui/modal";
-import { Spinner as E } from "@heroui/spinner";
+import { Modal as N, ModalContent as L, Spinner as E } from "@heroui/react";
 import { IoDownloadOutline as j, IoCloseSharp as k } from "react-icons/io5";
 import S from "../pinch-content/PinchContent.js";
 import z from "./ImageThumbnails.js";
@@ -9,17 +8,17 @@ import { useState as u, useEffect as R } from "react";
 import D from "clsx";
 const h = (t) => {
   t.target.closest(".image-viewer-main-content") && t.preventDefault();
-}, _ = (t) => {
+}, V = (t) => {
   const {
     isOpen: o,
     onClose: p,
-    imgSrc: r,
+    imgSrc: s,
     canDownload: g = !1,
-    wrapperClassName: b
-  } = t, s = Array.isArray(r) ? r : [r], [a, w] = u(0), [v, l] = u(!0), i = () => {
+    wrapperClassName: w
+  } = t, r = Array.isArray(s) ? s : [s], [a, b] = u(0), [v, l] = u(!0), i = () => {
     l(!0), p();
   }, y = async () => {
-    const d = s[a];
+    const d = r[a];
     try {
       const I = await (await fetch(d)).blob(), f = window.URL.createObjectURL(I), n = document.createElement("a");
       n.href = f, n.download = d.split("/").pop() || "image", document.body.appendChild(n), n.click(), window.URL.revokeObjectURL(f), document.body.removeChild(n);
@@ -45,9 +44,9 @@ const h = (t) => {
       size: "full",
       onClose: i,
       classNames: {
-        wrapper: D("", b)
+        wrapper: D("", w)
       },
-      className: "bg-black bg-opacity-70",
+      className: "bg-black/70",
       hideCloseButton: !0,
       portalContainer: document.body,
       children: /* @__PURE__ */ e(L, { className: "overflow-hidden", children: /* @__PURE__ */ c("div", { className: "w-screen h-screen relative flex flex-col pt-safe-offset-0", children: [
@@ -74,21 +73,21 @@ const h = (t) => {
             "img",
             {
               draggable: "false",
-              src: s[a],
+              src: r[a],
               alt: "",
               className: "w-screen h-full object-contain pointer-events-none",
               onLoad: C,
               onError: x
             }
           ) }),
-          v && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", children: /* @__PURE__ */ e(E, { color: "white", size: "lg" }) })
+          v && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ e(E, { color: "white", size: "lg" }) })
         ] }),
         /* @__PURE__ */ e(
           z,
           {
-            images: s,
+            images: r,
             currentIndex: a,
-            onImageSelect: w
+            onImageSelect: b
           }
         )
       ] }) })
@@ -111,5 +110,5 @@ if (typeof document < "u") {
   }
 }
 export {
-  _ as default
+  V as default
 };

package/dist/es/components/txt-reader/TxtReader.js

@@ -1,7 +1,7 @@
 import { jsxs as w, Fragment as E, jsx as e } from "react/jsx-runtime";
-import { useRef as i } from "react";
+import { useRef as n } from "react";
 import t from "clsx";
-import { useScroll as F, useTransform as _, useMotionTemplate as v, motion as n } from "motion/react";
+import { useScroll as F, useTransform as _, useMotionTemplate as v, motion as i } from "motion/react";
 import y from "./index.module.css.js";
 const I = 16, L = 1.5, R = "normal", k = ({
   content: c,
@@ -13,25 +13,25 @@ const I = 16, L = 1.5, R = "normal", k = ({
   onProgressChange: u,
   initialScrollPosition: S,
   cacheKey: A,
-  showTopProgress: g = !0,
-  topProgressClassName: h,
-  showBottomProgress: x = !0,
+  showTopProgress: h = !0,
+  topProgressClassName: x,
+  showBottomProgress: g = !0,
   bottomProgressClassName: T
 }) => {
-  const r = i(null), o = i(null), { scrollYProgress: l } = F({
+  const r = n(null), o = n(null), { scrollYProgress: l } = F({
     container: r,
     target: o
-  }), s = _(() => (l.get() * 100).toFixed(2).replace(/\.0*$/, "")), b = v`${s}%`;
-  return s.on("change", (N) => {
-    u?.(Number(N));
+  }), s = _(() => (l.get() * 100).toFixed(2).replace(/\.0*$/, "")), N = v`${s}%`;
+  return s.on("change", (b) => {
+    u?.(Number(b));
   }), /* @__PURE__ */ w(E, { children: [
-    g && /* @__PURE__ */ e(
-      n.div,
+    h && /* @__PURE__ */ e(
+      i.div,
       {
         id: "scroll-indicator",
         className: t(
           "fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",
-          h
+          x
         ),
         style: {
           scaleX: l,
@@ -64,15 +64,15 @@ const I = 16, L = 1.5, R = "normal", k = ({
         )
       }
     ),
-    x && /* @__PURE__ */ e(
-      n.div,
+    g && /* @__PURE__ */ e(
+      i.div,
       {
         id: "scroll-present",
         className: t(
-          "fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",
+          "fixed text-white rounded text-sm bg-black/70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",
           T
         ),
-        children: b
+        children: N
       }
     )
   ] });

package/dist/es/components/video-dialog/VideoDialog.d.ts

@@ -1,10 +1,10 @@
 type AnimationStyle = "from-bottom" | "from-center" | "from-top" | "from-left" | "from-right" | "fade" | "top-in-bottom-out" | "left-in-right-out";
-interface HeroVideoProps {
+interface VideoProps {
     animationStyle?: AnimationStyle;
     videoSrc: string;
     thumbnailSrc: string;
     thumbnailAlt?: string;
     className?: string;
 }
-export declare function HeroVideoDialog({ animationStyle, videoSrc, thumbnailSrc, thumbnailAlt, className, }: HeroVideoProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoDialog({ animationStyle, videoSrc, thumbnailSrc, thumbnailAlt, className, }: VideoProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/es/components/video-dialog/VideoDialog.js

@@ -123,5 +123,5 @@ function k({
   ] });
 }
 export {
-  k as HeroVideoDialog
+  k as VideoDialog
 };

package/dist/es/index.d.ts

@@ -20,3 +20,4 @@ export * from './components/blur-fade';
 export * from './components/video-dialog';
 export * from './components/comic-text';
 export * from './components/flip-text';
+export * from './components/animated-list';

package/dist/es/index.js

@@ -1,5 +1,5 @@
 /* empty css          */
-import { Button as t } from "./components/button/Button.js";
+import { Button as r } from "./components/button/Button.js";
 import { TxtReader as f } from "./components/txt-reader/TxtReader.js";
 import { HyperText as x } from "./components/hyper-text/index.js";
 import { TypingAnimation as i } from "./components/typing-animation/index.js";
@@ -7,46 +7,49 @@ import { QRCode as d } from "./components/qr-code/index.js";
 import { Confetti as u, ConfettiButton as l } from "./components/confetti-button/index.js";
 import { useStayTimeReport as c } from "./hooks/useStayTimeReport.js";
 import { default as g } from "./components/pinch-content/PinchContent.js";
-import { default as B } from "./components/image-viewer/ImageViewer.js";
-import { ShimmerButton as h } from "./components/shimmer-button/ShimmerButton.js";
-import { default as F } from "./components/image-compare/ImageCompare.js";
-import { TextAnimate as R } from "./components/text-animate/TextAnimate.js";
-import { Dock as V, DockIcon as A, dockVariants as H } from "./components/dock/Duck.js";
+import { default as A } from "./components/image-viewer/ImageViewer.js";
+import { ShimmerButton as D } from "./components/shimmer-button/ShimmerButton.js";
+import { default as h } from "./components/image-compare/ImageCompare.js";
+import { TextAnimate as F } from "./components/text-animate/TextAnimate.js";
+import { Dock as S, DockIcon as V, dockVariants as L } from "./components/dock/Duck.js";
 import { TxtEditor as w } from "./components/txt-editor/TxtEditor.js";
 import { Message as G } from "./components/message/Message.js";
-import { default as Q } from "./node_modules/.pnpm/react-force-graph-3d@1.28.0_react@19.1.0/node_modules/react-force-graph-3d/dist/react-force-graph-3d.js";
-import { default as j } from "./node_modules/.pnpm/canvas-confetti@1.9.3/node_modules/canvas-confetti/dist/confetti.module.js";
-import { Pointer as v } from "./components/pointer/Pointer.js";
-import { SparklesText as J } from "./components/sparkles-text/SparklesText.js";
-import { BlurFade as L } from "./components/blur-fade/BlurFade.js";
-import { HeroVideoDialog as O } from "./components/video-dialog/VideoDialog.js";
+import { default as M } from "./node_modules/.pnpm/react-force-graph-3d@1.28.0_react@19.1.0/node_modules/react-force-graph-3d/dist/react-force-graph-3d.js";
+import { default as b } from "./node_modules/.pnpm/canvas-confetti@1.9.3/node_modules/canvas-confetti/dist/confetti.module.js";
+import { Pointer as q } from "./components/pointer/Pointer.js";
+import { SparklesText as z } from "./components/sparkles-text/SparklesText.js";
+import { BlurFade as K } from "./components/blur-fade/BlurFade.js";
+import { VideoDialog as O } from "./components/video-dialog/VideoDialog.js";
 import { ComicText as W } from "./components/comic-text/ComicText.js";
 import { FlipText as Y } from "./components/flip-text/FlipText.js";
+import { AnimatedList as _, AnimatedListItem as $ } from "./components/animated-list/AnimatedList.js";
 export {
-  L as BlurFade,
-  t as Button,
+  _ as AnimatedList,
+  $ as AnimatedListItem,
+  K as BlurFade,
+  r as Button,
   W as ComicText,
   u as Confetti,
   l as ConfettiButton,
-  V as Dock,
-  A as DockIcon,
+  S as Dock,
+  V as DockIcon,
   Y as FlipText,
-  Q as ForceGraph3D,
-  O as HeroVideoDialog,
+  M as ForceGraph3D,
   x as HyperText,
-  F as ImageCompare,
-  B as ImageViewer,
+  h as ImageCompare,
+  A as ImageViewer,
   G as Message,
   g as PinchContent,
-  v as Pointer,
+  q as Pointer,
   d as QRCode,
-  h as ShimmerButton,
-  J as SparklesText,
-  R as TextAnimate,
+  D as ShimmerButton,
+  z as SparklesText,
+  F as TextAnimate,
   w as TxtEditor,
   f as TxtReader,
   i as TypingAnimation,
-  j as confetti,
-  H as dockVariants,
+  O as VideoDialog,
+  b as confetti,
+  L as dockVariants,
   c as useStayTimeReport
 };