@xiping/react-components 1.0.28 → 1.0.30

package/dist/cjs/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/cjs/components/animated-list/AnimatedList.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("../../utils/utils.js"),c=require("motion/react"),e=require("react");function l({children:s}){const a={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 r.jsx(c.motion.div,{...a,layout:!0,className:"mx-auto w-full",children:s})}const u=e.memo(({children:s,className:a,delay:o=1e3,...m})=>{const[n,d]=e.useState(0),t=e.useMemo(()=>e.Children.toArray(s),[s]);e.useEffect(()=>{if(n<t.length-1){const i=setTimeout(()=>{d(f=>(f+1)%t.length)},o);return()=>clearTimeout(i)}},[n,o,t.length]);const x=e.useMemo(()=>t.slice(0,n+1).reverse(),[n,t]);return r.jsx("div",{className:p.cn("flex flex-col items-center gap-4",a),...m,children:r.jsx(c.AnimatePresence,{children:x.map(i=>r.jsx(l,{children:i},i.key))})})});u.displayName="AnimatedList";exports.AnimatedList=u;exports.AnimatedListItem=l;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),t=require("motion/react"),h=require("../../utils/utils.js"),m=require("lodash-es"),b=require("react"),f="0%",p="100%",d="20%",o="80%",a="#0000",e="#000";function v(s){const n=t.useMotionValue(`linear-gradient(90deg, ${e}, ${e} ${f}, ${e} ${o}, ${a})`);return t.useMotionValueEvent(s,"change",l=>{l===0?t.animate(n,`linear-gradient(90deg, ${e}, ${e} ${f}, ${e} ${o}, ${a})`):l===1?t.animate(n,`linear-gradient(90deg, ${a}, ${e} ${d}, ${e} ${p}, ${e})`):(s.getPrevious()===0||s.getPrevious()===1)&&t.animate(n,`linear-gradient(90deg, ${a}, ${e} ${d}, ${e} ${o}, ${a})`)}),n}const w=({images:s,currentIndex:n,onImageSelect:l})=>{const i=b.useRef(null),{scrollXProgress:$}=t.useScroll({container:i}),g=v($);return r.jsx("div",{className:h.cn("h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0",{hidden:m.size(s)<=1}),children:r.jsx(t.motion.div,{ref:i,style:{maskImage:g,WebkitOverflowScrolling:"touch",scrollbarWidth:"none",msOverflowStyle:"none"},className:"h-24 w-screen overflow-x-auto overflow-y-hidden scrollbar-hide",children:r.jsx("div",{className:"flex gap-2 p-2 h-24 min-w-max",children:s.map((c,u)=>r.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${u===n?"border-white":"border-transparent"}`,onClick:()=>l(u),children:r.jsx("img",{src:c,alt:"",className:"w-full h-full object-contain",draggable:"false"})},c))})})})};exports.default=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),t=require("motion/react"),h=require("../../utils/utils.js"),m=require("lodash-es"),b=require("react"),f="0%",v="100%",d="20%",o="80%",a="#0000",e="#000";function p(s){const n=t.useMotionValue(`linear-gradient(90deg, ${e}, ${e} ${f}, ${e} ${o}, ${a})`);return t.useMotionValueEvent(s,"change",l=>{l===0?t.animate(n,`linear-gradient(90deg, ${e}, ${e} ${f}, ${e} ${o}, ${a})`):l===1?t.animate(n,`linear-gradient(90deg, ${a}, ${e} ${d}, ${e} ${v}, ${e})`):(s.getPrevious()===0||s.getPrevious()===1)&&t.animate(n,`linear-gradient(90deg, ${a}, ${e} ${d}, ${e} ${o}, ${a})`)}),n}const w=({images:s,currentIndex:n,onImageSelect:l})=>{const i=b.useRef(null),{scrollXProgress:$}=t.useScroll({container:i}),g=p($);return r.jsx("div",{className:h.cn("h-24 bg-black/50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0",{hidden:m.size(s)<=1}),children:r.jsx(t.motion.div,{ref:i,style:{maskImage:g,WebkitOverflowScrolling:"touch",scrollbarWidth:"none",msOverflowStyle:"none"},className:"h-24 w-screen overflow-x-auto overflow-y-hidden scrollbar-hide",children:r.jsx("div",{className:"flex gap-2 p-2 h-24 min-w-max",children:s.map((c,u)=>r.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${u===n?"border-white":"border-transparent"}`,onClick:()=>l(u),children:r.jsx("img",{src:c,alt:"",className:"w-full h-full object-contain",draggable:"false"})},c))})})})};exports.default=w;

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

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("@heroui/modal"),N=require("@heroui/spinner"),h=require("react-icons/io5"),L=require("../pinch-content/PinchContent.js"),E=require("./ImageThumbnails.js"),c=require("react"),S=require("clsx"),g=s=>{s.target.closest(".image-viewer-main-content")&&s.preventDefault()},q=s=>{const{isOpen:t,onClose:p,imgSrc:n,canDownload:b=!1,wrapperClassName:w}=s,r=Array.isArray(n)?n:[n],[a,x]=c.useState(0),[v,l]=c.useState(!0),i=()=>{l(!0),p()},y=async()=>{const d=r[a];try{const I=await(await fetch(d)).blob(),m=window.URL.createObjectURL(I),o=document.createElement("a");o.href=m,o.download=d.split("/").pop()||"image",document.body.appendChild(o),o.click(),window.URL.revokeObjectURL(m),document.body.removeChild(o)}catch(u){console.error("Error downloading image:",u)}},j=()=>{l(!1)},C=()=>{l(!1)};return c.useEffect(()=>{if(t)return document.addEventListener("touchmove",g,{passive:!1}),()=>{document.removeEventListener("touchmove",g)}},[t]),e.jsx(f.Modal,{isOpen:t,size:"full",onClose:i,classNames:{wrapper:S("",w)},className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(f.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative flex flex-col pt-safe-offset-0",children:[e.jsxs("div",{className:"absolute top-2 right-2 flex gap-4 z-10",children:[b&&e.jsx(h.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:y}),e.jsx(h.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:i})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center image-viewer-main-content",children:[e.jsx(L.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:r[a],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:j,onError:C})}),v&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(N.Spinner,{color:"white",size:"lg"})})]}),e.jsx(E.default,{images:r,currentIndex:a,onImageSelect:x})]})})})},k=`
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("@heroui/react"),h=require("react-icons/io5"),N=require("../pinch-content/PinchContent.js"),L=require("./ImageThumbnails.js"),i=require("react"),E=require("clsx"),g=s=>{s.target.closest(".image-viewer-main-content")&&s.preventDefault()},S=s=>{const{isOpen:t,onClose:p,imgSrc:o,canDownload:b=!1,wrapperClassName:w}=s,r=Array.isArray(o)?o:[o],[a,x]=i.useState(0),[v,l]=i.useState(!0),d=()=>{l(!0),p()},j=async()=>{const u=r[a];try{const I=await(await fetch(u)).blob(),f=window.URL.createObjectURL(I),n=document.createElement("a");n.href=f,n.download=u.split("/").pop()||"image",document.body.appendChild(n),n.click(),window.URL.revokeObjectURL(f),document.body.removeChild(n)}catch(m){console.error("Error downloading image:",m)}},y=()=>{l(!1)},C=()=>{l(!1)};return i.useEffect(()=>{if(t)return document.addEventListener("touchmove",g,{passive:!1}),()=>{document.removeEventListener("touchmove",g)}},[t]),e.jsx(c.Modal,{isOpen:t,size:"full",onClose:d,classNames:{wrapper:E("",w)},className:"bg-black/70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(c.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative flex flex-col pt-safe-offset-0",children:[e.jsxs("div",{className:"absolute top-2 right-2 flex gap-4 z-10",children:[b&&e.jsx(h.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:j}),e.jsx(h.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:d})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center image-viewer-main-content",children:[e.jsx(N.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:r[a],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:y,onError:C})}),v&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black/50",children:e.jsx(c.Spinner,{color:"white",size:"lg"})})]}),e.jsx(L.default,{images:r,currentIndex:a,onImageSelect:x})]})})})},k=`
   .scrollbar-hide {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -6,4 +6,4 @@
   .scrollbar-hide::-webkit-scrollbar {
     display: none;
   }
-`;if(typeof document<"u"){const s="image-viewer-scrollbar-hide";if(!document.getElementById(s)){const t=document.createElement("style");t.id=s,t.textContent=k,document.head.appendChild(t)}}exports.default=q;
+`;if(typeof document<"u"){const s="image-viewer-scrollbar-hide";if(!document.getElementById(s)){const t=document.createElement("style");t.id=s,t.textContent=k,document.head.appendChild(t)}}exports.default=S;

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("react"),r=require("clsx"),t=require("motion/react"),N=require("./index.module.css.js"),R=16,j=1.5,w="normal",c=({content:a,lineHeight:u=j,fontSize:d=R,fontWeight:f=w,className:x="",style:m={},onProgressChange:p,initialScrollPosition:E,cacheKey:F,showTopProgress:g=!0,topProgressClassName:h,showBottomProgress:T=!0,bottomProgressClassName:b})=>{const s=i.useRef(null),o=i.useRef(null),{scrollYProgress:l}=t.useScroll({container:s,target:o}),n=t.useTransform(()=>(l.get()*100).toFixed(2).replace(/\.0*$/,"")),_=t.useMotionTemplate`${n}%`;return n.on("change",v=>{p?.(Number(v))}),e.jsxs(e.Fragment,{children:[g&&e.jsx(t.motion.div,{id:"scroll-indicator",className:r("fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",h),style:{scaleX:l,originX:0}}),e.jsx("div",{className:r("relative w-full h-full overflow-y-auto",N.default.textContent),ref:s,children:e.jsx("div",{ref:o,className:r("w-full whitespace-pre-wrap break-words",x),style:{fontSize:`${d}px`,lineHeight:u,fontWeight:f,...m},children:a})}),T&&e.jsx(t.motion.div,{id:"scroll-present",className:r("fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",b),children:_})]})};exports.TxtReader=c;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),i=require("react"),r=require("clsx"),t=require("motion/react"),N=require("./index.module.css.js"),R=16,j=1.5,w="normal",c=({content:a,lineHeight:u=j,fontSize:d=R,fontWeight:f=w,className:x="",style:m={},onProgressChange:p,initialScrollPosition:E,cacheKey:F,showTopProgress:g=!0,topProgressClassName:h,showBottomProgress:T=!0,bottomProgressClassName:_})=>{const s=i.useRef(null),o=i.useRef(null),{scrollYProgress:l}=t.useScroll({container:s,target:o}),n=t.useTransform(()=>(l.get()*100).toFixed(2).replace(/\.0*$/,"")),b=t.useMotionTemplate`${n}%`;return n.on("change",v=>{p?.(Number(v))}),e.jsxs(e.Fragment,{children:[g&&e.jsx(t.motion.div,{id:"scroll-indicator",className:r("fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",h),style:{scaleX:l,originX:0}}),e.jsx("div",{className:r("relative w-full h-full overflow-y-auto",N.default.textContent),ref:s,children:e.jsx("div",{ref:o,className:r("w-full whitespace-pre-wrap break-words",x),style:{fontSize:`${d}px`,lineHeight:u,fontWeight:f,...m},children:a})}),T&&e.jsx(t.motion.div,{id:"scroll-present",className:r("fixed text-white rounded text-sm bg-black/70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",_),children:b})]})};exports.TxtReader=c;exports.default=c;

package/dist/cjs/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/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css           */const r=require("./components/button/Button.js"),o=require("./components/txt-reader/TxtReader.js"),i=require("./components/hyper-text/index.js"),n=require("./components/typing-animation/index.js"),u=require("./components/qr-code/index.js"),t=require("./components/confetti-button/index.js"),c=require("./hooks/useStayTimeReport.js"),a=require("./components/pinch-content/PinchContent.js"),s=require("./components/image-viewer/ImageViewer.js"),d=require("./components/shimmer-button/ShimmerButton.js"),T=require("./components/image-compare/ImageCompare.js"),m=require("./components/text-animate/TextAnimate.js"),e=require("./components/dock/Duck.js"),q=require("./components/txt-editor/TxtEditor.js"),x=require("./components/message/Message.js"),l=require("./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"),p=require("./node_modules/.pnpm/canvas-confetti@1.9.3/node_modules/canvas-confetti/dist/confetti.module.js"),g=require("./components/pointer/Pointer.js"),C=require("./components/sparkles-text/SparklesText.js"),f=require("./components/blur-fade/BlurFade.js"),B=require("./components/video-dialog/VideoDialog.js"),S=require("./components/comic-text/ComicText.js"),k=require("./components/flip-text/FlipText.js");exports.Button=r.Button;exports.TxtReader=o.TxtReader;exports.HyperText=i.HyperText;exports.TypingAnimation=n.TypingAnimation;exports.QRCode=u.QRCode;exports.Confetti=t.Confetti;exports.ConfettiButton=t.ConfettiButton;exports.useStayTimeReport=c.useStayTimeReport;exports.PinchContent=a.default;exports.ImageViewer=s.default;exports.ShimmerButton=d.ShimmerButton;exports.ImageCompare=T.default;exports.TextAnimate=m.TextAnimate;exports.Dock=e.Dock;exports.DockIcon=e.DockIcon;exports.dockVariants=e.dockVariants;exports.TxtEditor=q.TxtEditor;exports.Message=x.Message;exports.ForceGraph3D=l.default;exports.confetti=p.default;exports.Pointer=g.Pointer;exports.SparklesText=C.SparklesText;exports.BlurFade=f.BlurFade;exports.VideoDialog=B.VideoDialog;exports.ComicText=S.ComicText;exports.FlipText=k.FlipText;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css           */const i=require("./components/button/Button.js"),o=require("./components/txt-reader/TxtReader.js"),n=require("./components/hyper-text/index.js"),u=require("./components/typing-animation/index.js"),a=require("./components/qr-code/index.js"),t=require("./components/confetti-button/index.js"),c=require("./hooks/useStayTimeReport.js"),s=require("./components/pinch-content/PinchContent.js"),d=require("./components/image-viewer/ImageViewer.js"),m=require("./components/shimmer-button/ShimmerButton.js"),T=require("./components/image-compare/ImageCompare.js"),q=require("./components/text-animate/TextAnimate.js"),e=require("./components/dock/Duck.js"),x=require("./components/txt-editor/TxtEditor.js"),l=require("./components/message/Message.js"),p=require("./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"),g=require("./node_modules/.pnpm/canvas-confetti@1.9.3/node_modules/canvas-confetti/dist/confetti.module.js"),C=require("./components/pointer/Pointer.js"),f=require("./components/sparkles-text/SparklesText.js"),B=require("./components/blur-fade/BlurFade.js"),S=require("./components/video-dialog/VideoDialog.js"),k=require("./components/comic-text/ComicText.js"),A=require("./components/flip-text/FlipText.js"),r=require("./components/animated-list/AnimatedList.js");exports.Button=i.Button;exports.TxtReader=o.TxtReader;exports.HyperText=n.HyperText;exports.TypingAnimation=u.TypingAnimation;exports.QRCode=a.QRCode;exports.Confetti=t.Confetti;exports.ConfettiButton=t.ConfettiButton;exports.useStayTimeReport=c.useStayTimeReport;exports.PinchContent=s.default;exports.ImageViewer=d.default;exports.ShimmerButton=m.ShimmerButton;exports.ImageCompare=T.default;exports.TextAnimate=q.TextAnimate;exports.Dock=e.Dock;exports.DockIcon=e.DockIcon;exports.dockVariants=e.dockVariants;exports.TxtEditor=x.TxtEditor;exports.Message=l.Message;exports.ForceGraph3D=p.default;exports.confetti=g.default;exports.Pointer=C.Pointer;exports.SparklesText=f.SparklesText;exports.BlurFade=B.BlurFade;exports.VideoDialog=S.VideoDialog;exports.ComicText=k.ComicText;exports.FlipText=A.FlipText;exports.AnimatedList=r.AnimatedList;exports.AnimatedListItem=r.AnimatedListItem;