@xiping/react-components 0.0.64 → 0.0.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +10 -2
  2. package/dist/cjs/components/hyper-text/index.d.ts +22 -0
  3. package/dist/cjs/components/hyper-text/index.js +1 -0
  4. package/dist/cjs/components/image-viewer/ImageViewer.js +1 -1
  5. package/dist/cjs/components/morphing-text/index.d.ts +6 -0
  6. package/dist/cjs/components/pinch-content/PinchContent.d.ts +1 -0
  7. package/dist/cjs/components/pinch-content/PinchContent.js +1 -1
  8. package/dist/cjs/components/shimmer-button/ShimmerButton.d.ts +12 -0
  9. package/dist/cjs/components/text-animate/TextAnimate.d.ts +52 -0
  10. package/dist/cjs/components/text-animate/index.d.ts +3 -0
  11. package/dist/cjs/components/txt-reader/TxtReader.d.ts +4 -0
  12. package/dist/cjs/components/txt-reader/TxtReader.js +1 -1
  13. package/dist/cjs/components/typing-animation/index.d.ts +11 -0
  14. package/dist/cjs/components/typing-animation/index.js +1 -0
  15. package/dist/cjs/index.d.ts +2 -0
  16. package/dist/cjs/index.js +1 -1
  17. package/dist/cjs/react-components.css +1 -1
  18. package/dist/cjs/utils/utils.d.ts +2 -0
  19. package/dist/cjs/utils/utils.js +1 -0
  20. package/dist/es/components/hyper-text/index.d.ts +22 -0
  21. package/dist/es/components/hyper-text/index.js +73 -0
  22. package/dist/es/components/image-viewer/ImageViewer.js +52 -41
  23. package/dist/es/components/morphing-text/index.d.ts +6 -0
  24. package/dist/es/components/pinch-content/PinchContent.d.ts +1 -0
  25. package/dist/es/components/pinch-content/PinchContent.js +53 -45
  26. package/dist/es/components/shimmer-button/ShimmerButton.d.ts +12 -0
  27. package/dist/es/components/text-animate/TextAnimate.d.ts +52 -0
  28. package/dist/es/components/text-animate/index.d.ts +3 -0
  29. package/dist/es/components/txt-reader/TxtReader.d.ts +4 -0
  30. package/dist/es/components/txt-reader/TxtReader.js +69 -57
  31. package/dist/es/components/typing-animation/index.d.ts +11 -0
  32. package/dist/es/components/typing-animation/index.js +58 -0
  33. package/dist/es/index.d.ts +2 -0
  34. package/dist/es/index.js +12 -8
  35. package/dist/es/react-components.css +1 -1
  36. package/dist/es/utils/utils.d.ts +2 -0
  37. package/dist/es/utils/utils.js +8 -0
  38. package/package.json +29 -27
package/README.md CHANGED
@@ -1,3 +1,11 @@
1
- #
1
+ # @xiping/react-components
2
2
 
3
- based tailwindcss v3
3
+ based tailwindcss v3
4
+
5
+ ```shell
6
+ npm i @xiping/react-components
7
+ // or
8
+ yarn add @xiping/react-components
9
+ // or
10
+ pnpm add @xiping/react-components
11
+ ```
@@ -0,0 +1,22 @@
1
+ import { MotionProps } from 'motion/react';
2
+ type CharacterSet = string[] | readonly string[];
3
+ interface HyperTextProps extends MotionProps {
4
+ /** The text content to be animated */
5
+ children: string;
6
+ /** Optional className for styling */
7
+ className?: string;
8
+ /** Duration of the animation in milliseconds */
9
+ duration?: number;
10
+ /** Delay before animation starts in milliseconds */
11
+ delay?: number;
12
+ /** Component to render as - defaults to div */
13
+ as?: React.ElementType;
14
+ /** Whether to start animation when element comes into view */
15
+ startOnView?: boolean;
16
+ /** Whether to trigger animation on hover */
17
+ animateOnHover?: boolean;
18
+ /** Custom character set for scramble effect. Defaults to uppercase alphabet */
19
+ characterSet?: CharacterSet;
20
+ }
21
+ export declare function HyperText({ children, className, duration, delay, as: Component, startOnView, animateOnHover, characterSet, ...props }: HyperTextProps): import("react/jsx-runtime").JSX.Element;
22
+ export default HyperText;
@@ -0,0 +1 @@
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;
@@ -1 +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;
1
+ "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;
@@ -0,0 +1,6 @@
1
+ interface MorphingTextProps {
2
+ className?: string;
3
+ texts: string[];
4
+ }
5
+ export declare const MorphingText: React.FC<MorphingTextProps>;
6
+ export default MorphingText;
@@ -9,6 +9,7 @@ export interface PinchContentProps {
9
9
  min: number;
10
10
  max: number;
11
11
  };
12
+ wheelZoomFactor?: number;
12
13
  }
13
14
  declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
14
15
  export default PinchContent;
@@ -1 +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;
1
+ "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;
@@ -0,0 +1,12 @@
1
+ import { default as React, ComponentPropsWithoutRef } from 'react';
2
+ export interface ShimmerButtonProps extends ComponentPropsWithoutRef<"button"> {
3
+ shimmerColor?: string;
4
+ shimmerSize?: string;
5
+ borderRadius?: string;
6
+ shimmerDuration?: string;
7
+ background?: string;
8
+ className?: string;
9
+ children?: React.ReactNode;
10
+ }
11
+ export declare const ShimmerButton: React.ForwardRefExoticComponent<ShimmerButtonProps & React.RefAttributes<HTMLButtonElement>>;
12
+ export default ShimmerButton;
@@ -0,0 +1,52 @@
1
+ import { MotionProps, Variants } from 'motion/react';
2
+ import { ElementType } from 'react';
3
+ type AnimationType = "text" | "word" | "character" | "line";
4
+ type AnimationVariant = "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown";
5
+ interface TextAnimateProps extends MotionProps {
6
+ /**
7
+ * The text content to animate
8
+ */
9
+ children: string;
10
+ /**
11
+ * The class name to be applied to the component
12
+ */
13
+ className?: string;
14
+ /**
15
+ * The class name to be applied to each segment
16
+ */
17
+ segmentClassName?: string;
18
+ /**
19
+ * The delay before the animation starts
20
+ */
21
+ delay?: number;
22
+ /**
23
+ * The duration of the animation
24
+ */
25
+ duration?: number;
26
+ /**
27
+ * Custom motion variants for the animation
28
+ */
29
+ variants?: Variants;
30
+ /**
31
+ * The element type to render
32
+ */
33
+ as?: ElementType;
34
+ /**
35
+ * How to split the text ("text", "word", "character")
36
+ */
37
+ by?: AnimationType;
38
+ /**
39
+ * Whether to start animation when component enters viewport
40
+ */
41
+ startOnView?: boolean;
42
+ /**
43
+ * Whether to animate only once
44
+ */
45
+ once?: boolean;
46
+ /**
47
+ * The animation preset to use
48
+ */
49
+ animation?: AnimationVariant;
50
+ }
51
+ export declare function TextAnimate({ children, delay, duration, variants, className, segmentClassName, as: Component, startOnView, once, by, animation, ...props }: TextAnimateProps): import("react/jsx-runtime").JSX.Element;
52
+ export {};
@@ -0,0 +1,3 @@
1
+ import { TextAnimate } from './TextAnimate';
2
+ export { TextAnimate };
3
+ export default TextAnimate;
@@ -9,6 +9,10 @@ interface TxtReaderProps {
9
9
  onProgressChange?: (progress: number) => void;
10
10
  initialScrollPosition?: number;
11
11
  cacheKey?: string;
12
+ showTopProgress?: boolean;
13
+ topProgressClassName?: string;
14
+ showBottomProgress?: boolean;
15
+ bottomProgressClassName?: string;
12
16
  }
13
17
  export declare const TxtReader: FC<TxtReaderProps>;
14
18
  export default TxtReader;
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),s=require("react"),_=require("lodash-es"),w=require("clsx"),H=16,I=1.5,S="normal",d=({content:f,lineHeight:p=I,fontSize:x=H,fontWeight:T=S,className:b="",style:m={},onProgressChange:o,initialScrollPosition:u,cacheKey:t})=>{const r=s.useRef(null),[E,v]=s.useState(0),c=s.useCallback(()=>{if(!r.current)return;const e=r.current,l=e.scrollTop,g=e.scrollHeight,R=e.clientHeight,a=Math.min(Math.round(l/(g-R)*100),100);v(a),o==null||o(a),t&&localStorage.setItem(`txtReader-${t}`,l.toString())},[t,o]),n=s.useCallback(_.debounce(c,100),[c]);return s.useEffect(()=>{if(!r.current)return;let e=u;if(t){const l=localStorage.getItem(`txtReader-${t}`);l&&(e=parseInt(l,10))}e&&(r.current.scrollTop=e,c())},[t,u,c]),s.useEffect(()=>{const e=r.current;if(e)return e.addEventListener("scroll",n),()=>{e.removeEventListener("scroll",n)}},[n]),i.jsxs("div",{className:"relative w-full h-full",children:[i.jsx("div",{ref:r,className:w("w-full overflow-auto whitespace-pre-wrap break-words",b),style:{fontSize:`${x}px`,lineHeight:p,fontWeight:T,...m},children:f}),i.jsxs("div",{className:"fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",children:[E,"%"]})]})};exports.TxtReader=d;exports.default=d;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),l=require("clsx"),t=require("motion/react"),j=16,w=1.5,E="normal",a=({content:u,lineHeight:d=w,fontSize:f=j,fontWeight:m=E,className:p="",style:x={},onProgressChange:r,initialScrollPosition:F,cacheKey:R,showTopProgress:T=!0,topProgressClassName:b,showBottomProgress:_=!0,bottomProgressClassName:h})=>{const s=n.useRef(null),i=n.useRef(null),{scrollYProgress:o}=t.useScroll({container:s,target:i}),c=t.useTransform(()=>(o.get()*100).toFixed(2)),v=t.useMotionTemplate`${c}%`;return c.on("change",N=>{r==null||r(Number(N))}),e.jsxs(e.Fragment,{children:[T&&e.jsx(t.motion.div,{id:"scroll-indicator",className:l("fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",b),style:{scaleX:o,originX:0}}),e.jsxs("div",{className:"relative w-full h-full overflow-y-auto",ref:s,children:[e.jsx("div",{ref:i,className:l("w-full whitespace-pre-wrap break-words",p),style:{fontSize:`${f}px`,lineHeight:d,fontWeight:m,...x},children:u}),_&&e.jsx(t.motion.div,{id:"scroll-present",className:l("fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",h),children:v})]})]})};exports.TxtReader=a;exports.default=a;
@@ -0,0 +1,11 @@
1
+ import { MotionProps } from 'motion/react';
2
+ interface TypingAnimationProps extends MotionProps {
3
+ children: string;
4
+ className?: string;
5
+ duration?: number;
6
+ delay?: number;
7
+ as?: React.ElementType;
8
+ startOnView?: boolean;
9
+ }
10
+ export declare function TypingAnimation({ children, className, duration, delay, as: Component, startOnView, ...props }: TypingAnimationProps): import("react/jsx-runtime").JSX.Element;
11
+ export default TypingAnimation;
@@ -0,0 +1 @@
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;
@@ -2,3 +2,5 @@ export * from './components/button/Button';
2
2
  export * from './components/txt-reader/TxtReader';
3
3
  export * from './components/pinch-content';
4
4
  export * from './components/image-viewer';
5
+ export * from './components/hyper-text';
6
+ export * from './components/typing-animation';
package/dist/cjs/index.js CHANGED
@@ -1 +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;
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"),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;