@xiping/react-components 0.0.64 → 0.0.66

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),x=require("../../utils/utils.js"),f=require("motion/react"),r=require("react"),q=Object.freeze("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")),y=t=>Math.floor(Math.random()*t);function d({children:t,className:I,duration:m=800,delay:i=0,as:M="div",startOnView:p=!1,animateOnHover:A=!0,characterSet:u=q,...R}){const b=f.motion.create(M,{forwardMotionProps:!0}),[E,h]=r.useState(()=>t.split("")),[c,o]=r.useState(!1),s=r.useRef(0),a=r.useRef(null),j=()=>{A&&!c&&(s.current=0,o(!0))};return r.useEffect(()=>{if(!p){const n=setTimeout(()=>{o(!0)},i);return()=>clearTimeout(n)}const e=new IntersectionObserver(([n])=>{n.isIntersecting&&(setTimeout(()=>{o(!0)},i),e.disconnect())},{threshold:.1,rootMargin:"-30% 0px -30% 0px"});return a.current&&e.observe(a.current),()=>e.disconnect()},[i,p]),r.useEffect(()=>{if(!c)return;const e=m/(t.length*10),n=t.length,T=setInterval(()=>{s.current<n?(h(C=>C.map((g,v)=>g===" "?g:v<=s.current?t[v]:u[y(u.length)])),s.current=s.current+.1):(o(!1),clearInterval(T))},e);return()=>clearInterval(T)},[t,m,c,u]),l.jsx(b,{ref:a,className:x.cn("overflow-hidden py-2 text-4xl font-bold",I),onMouseEnter:j,...R,children:l.jsx(f.AnimatePresence,{children:E.map((e,n)=>l.jsx(f.motion.span,{className:x.cn("font-mono",e===" "?"w-3":""),children:e.toUpperCase()},n))})})}exports.HyperText=d;exports.default=d;

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("@nextui-org/modal"),N=require("@nextui-org/spinner"),u=require("react-icons/io5"),y=require("../pinch-content/PinchContent.js"),h=require("react"),k=m=>{const{isOpen:f,onClose:g,imgSrc:n,canDownload:b=!1}=m,l=Array.isArray(n)?n:[n],[a,x]=h.useState(0),[p,r]=h.useState(!0),c=()=>{r(!0),g()},j=async()=>{const s=l[a];try{const C=await(await fetch(s)).blob(),i=window.URL.createObjectURL(C),t=document.createElement("a");t.href=i,t.download=s.split("/").pop()||"image",document.body.appendChild(t),t.click(),window.URL.revokeObjectURL(i),document.body.removeChild(t)}catch(o){console.error("Error downloading image:",o)}},w=()=>{r(!1)},v=()=>{r(!1)};return e.jsx(d.Modal,{isOpen:f,size:"full",onClose:c,className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(d.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative flex flex-col",children:[e.jsxs("div",{className:"absolute top-2 right-2 flex gap-4 z-10",children:[b&&e.jsx(u.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:j}),e.jsx(u.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:c})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center",children:[e.jsx(y.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:l[a],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:w,onError:v})}),p&&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"})})]}),l.length>1&&e.jsx("div",{className:"h-24 bg-black bg-opacity-50 shrink-0 z-10",children:e.jsx("div",{className:"w-full h-full overflow-x-auto flex gap-2 p-2",children:l.map((s,o)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${o===a?"border-white":"border-transparent"}`,onClick:()=>x(o),children:e.jsx("img",{src:s,alt:"",className:"w-full h-full object-contain",draggable:"false"})},s))})})]})})})};exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),h=require("@heroui/modal"),C=require("@heroui/spinner"),m=require("react-icons/io5"),k=require("../pinch-content/PinchContent.js"),S=require("@radix-ui/react-scroll-area"),p=require("react");function z(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>t[o]})}}return a.default=t,Object.freeze(a)}const i=z(S),O=t=>{const{isOpen:a,onClose:o,imgSrc:r,canDownload:g=!1}=t,c=Array.isArray(r)?r:[r],[d,x]=p.useState(0),[j,f]=p.useState(!0),u=()=>{f(!0),o()},w=async()=>{const s=c[d];try{const y=await(await fetch(s)).blob(),b=window.URL.createObjectURL(y),l=document.createElement("a");l.href=b,l.download=s.split("/").pop()||"image",document.body.appendChild(l),l.click(),window.URL.revokeObjectURL(b),document.body.removeChild(l)}catch(n){console.error("Error downloading image:",n)}},v=()=>{f(!1)},N=()=>{f(!1)};return e.jsx(h.Modal,{isOpen:a,size:"full",onClose:u,className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(h.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:[g&&e.jsx(m.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:w}),e.jsx(m.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:u})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center",children:[e.jsx(k.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:c[d],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:v,onError:N})}),j&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(C.Spinner,{color:"white",size:"lg"})})]}),c.length>1&&e.jsx("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:e.jsxs(i.Root,{className:"h-24 w-screen",type:"auto",children:[e.jsx(i.Viewport,{className:"pppp h-full w-full",children:e.jsx("div",{className:"flex gap-2 p-2 h-24",children:c.map((s,n)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${n===d?"border-white":"border-transparent"}`,onClick:()=>x(n),children:e.jsx("img",{src:s,alt:"",className:"w-full h-full object-contain",draggable:"false"})},s))})}),e.jsx(i.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:e.jsx(i.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]"})})]})})]})})})};exports.default=O;

package/dist/cjs/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/cjs/components/pinch-content/PinchContent.d.ts

@@ -9,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/cjs/components/pinch-content/PinchContent.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react/jsx-runtime"),f=require("@react-spring/web"),g=require("@use-gesture/react"),A=require("react"),v=require("ahooks"),B=require("clsx"),C=g.createUseGesture([g.dragAction,g.pinchAction]),u=a=>a.preventDefault(),G=a=>{const{className:h,children:x,canPinch:y=!0,canDrag:p=!0,canRotate:b=!0,scaleBounds:q={min:.3,max:10}}=a,t=A.useRef(null);v.useMount(()=>{var r,e,n;(r=t.current)==null||r.addEventListener("gesturestart",u),(e=t.current)==null||e.addEventListener("gesturechange",u),(n=t.current)==null||n.addEventListener("gestureend",u)}),v.useUnmount(()=>{var r,e,n;(r=t.current)==null||r.removeEventListener("gesturestart",u),(e=t.current)==null||e.removeEventListener("gesturechange",u),(n=t.current)==null||n.removeEventListener("gestureend",u)});const[c,d]=f.useSpring(()=>({x:0,y:0,scale:1,rotateZ:0}));return C({onDrag:({pinching:r,cancel:e,offset:[n,o],...i})=>{if(console.log(i),!p||r)return e();d.start({x:n,y:o})},onPinch:({origin:[r,e],first:n,movement:[o],offset:[i,E],memo:s,cancel:L})=>{if(!y)return L();if(n){const{width:j,height:m,x:D,y:M}=t.current.getBoundingClientRect(),S=r-(D+j/2),Z=e-(M+m/2);s=[c.x.get(),c.y.get(),S,Z]}const P=s[0]-(o-1)*s[2],R=s[1]-(o-1)*s[3],l={scale:i,rotateZ:0,x:P,y:R};return b&&(l.rotateZ=E),d.start(l),s}},{target:t,drag:{from:()=>[c.x.get(),c.y.get()]},pinch:{scaleBounds:q,rubberband:!0}}),w.jsx(f.animated.div,{className:B("select-none",h),ref:t,style:c,children:x})};exports.default=G;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("react/jsx-runtime"),v=require("@react-spring/web"),i=require("@use-gesture/react"),B=require("react"),x=require("ahooks"),C=require("clsx"),G=i.createUseGesture([i.dragAction,i.pinchAction,i.wheelAction]),u=l=>l.preventDefault(),N=l=>{const{className:m,children:y,canPinch:h=!0,canDrag:p=!0,canRotate:b=!0,scaleBounds:d={min:.3,max:10},wheelZoomFactor:S=.1}=l,n=B.useRef(null);x.useMount(()=>{var t,e,r;(t=n.current)==null||t.addEventListener("gesturestart",u),(e=n.current)==null||e.addEventListener("gesturechange",u),(r=n.current)==null||r.addEventListener("gestureend",u)}),x.useUnmount(()=>{var t,e,r;(t=n.current)==null||t.removeEventListener("gesturestart",u),(e=n.current)==null||e.removeEventListener("gesturechange",u),(r=n.current)==null||r.removeEventListener("gestureend",u)});const[s,g]=v.useSpring(()=>({x:0,y:0,scale:1,rotateZ:0}));return G({onWheel:({event:t,delta:[,e]})=>{if(!h)return;const c=s.scale.get()*(1-e*S),o=Math.min(Math.max(c,d.min),d.max);g.start({scale:o})},onDrag:({pinching:t,cancel:e,offset:[r,c],...o})=>{if(!p||t)return e();g.start({x:r,y:c})},onPinch:({origin:[t,e],first:r,movement:[c],offset:[o,q],memo:a,cancel:w})=>{if(!h)return w();if(r){const{width:M,height:P,x:R,y:Z}=n.current.getBoundingClientRect(),j=t-(R+M/2),A=e-(Z+P/2);a=[s.x.get(),s.y.get(),j,A]}const E=a[0]-(c-1)*a[2],L=a[1]-(c-1)*a[3],f={scale:o,rotateZ:0,x:E,y:L};return b&&(f.rotateZ=q),g.start(f),a}},{target:n,drag:{from:()=>[s.x.get(),s.y.get()]},pinch:{scaleBounds:d,rubberband:!0},wheel:{enabled:!0}}),D.jsx(v.animated.div,{className:C("select-none",m),ref:n,style:s,children:y})};exports.default=N;

package/dist/cjs/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/cjs/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/cjs/components/text-animate/index.d.ts

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),b=require("../../utils/utils.js"),x=require("motion/react"),r=require("react");function l({children:n,className:f,duration:i=100,delay:s=0,as:m="div",startOnView:u=!1,...d}){const g=x.motion.create(m,{forwardMotionProps:!0}),[v,T]=r.useState(""),[c,a]=r.useState(!1),o=r.useRef(null);return r.useEffect(()=>{if(!u){const t=setTimeout(()=>{a(!0)},s);return()=>clearTimeout(t)}const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(setTimeout(()=>{a(!0)},s),e.disconnect())},{threshold:.1});return o.current&&e.observe(o.current),()=>e.disconnect()},[s,u]),r.useEffect(()=>{if(!c)return;let e=0;const t=setInterval(()=>{e<n.length?(T(n.substring(0,e+1)),e++):clearInterval(t)},i);return()=>{clearInterval(t)}},[n,i,c]),p.jsx(g,{ref:o,className:b.cn("text-4xl font-bold leading-[5rem] tracking-[-0.02em]",f),...d,children:v})}exports.TypingAnimation=l;exports.default=l;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css           */const e=require("./components/button/Button.js"),t=require("./components/txt-reader/TxtReader.js"),r=require("./components/pinch-content/PinchContent.js"),n=require("./components/image-viewer/ImageViewer.js");exports.Button=e.Button;exports.TxtReader=t.TxtReader;exports.PinchContent=r.default;exports.ImageViewer=n.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css           */const e=require("./components/button/Button.js"),t=require("./components/txt-reader/TxtReader.js"),n=require("./components/hyper-text/index.js"),r=require("./components/typing-animation/index.js"),i=require("./components/pinch-content/PinchContent.js"),o=require("./components/image-viewer/ImageViewer.js");exports.Button=e.Button;exports.TxtReader=t.TxtReader;exports.HyperText=n.HyperText;exports.TypingAnimation=r.TypingAnimation;exports.PinchContent=i.default;exports.ImageViewer=o.default;