@xiping/react-components 1.0.40 → 1.0.45

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 (49) hide show
  1. package/dist/cjs/components/flip-text/FlipText.js +1 -1
  2. package/dist/cjs/components/gradient-text/index.d.ts +10 -0
  3. package/dist/cjs/components/gradient-text/index.js +1 -0
  4. package/dist/cjs/components/hyper-text/index.js +1 -1
  5. package/dist/cjs/components/image-viewer/ImageViewer.js +1 -1
  6. package/dist/cjs/components/shimmer-button/ShimmerButton.js +1 -1
  7. package/dist/cjs/components/shiny-button/ShinyButton.js +1 -1
  8. package/dist/cjs/components/sparkles-text/SparklesText.js +1 -1
  9. package/dist/cjs/components/split-text/SplitText.js +1 -1
  10. package/dist/cjs/components/subtitle-player/SubtitlePlayer.d.ts +30 -0
  11. package/dist/cjs/components/subtitle-player/SubtitlePlayer.js +3 -0
  12. package/dist/cjs/components/subtitle-player/index.d.ts +2 -0
  13. package/dist/cjs/components/txt-editor/TxtEditor.d.ts +5 -4
  14. package/dist/cjs/components/txt-editor/TxtEditor.js +32 -1
  15. package/dist/cjs/components/txt-reader/TxtReader.js +1 -1
  16. package/dist/cjs/components/txt-reader/index.module.css.js +1 -1
  17. package/dist/cjs/components/typing-animation/index.js +1 -1
  18. package/dist/cjs/components/variable-proximity/index.d.ts +25 -0
  19. package/dist/cjs/components/variable-proximity/index.js +1 -0
  20. package/dist/cjs/components/video-dialog/VideoDialog.js +1 -1
  21. package/dist/cjs/index.d.ts +3 -0
  22. package/dist/cjs/index.js +1 -1
  23. package/dist/cjs/react-components.css +1 -1
  24. package/dist/cjs/subtitle/lib/src/parser.js +5 -0
  25. package/dist/es/components/flip-text/FlipText.js +15 -14
  26. package/dist/es/components/gradient-text/index.d.ts +10 -0
  27. package/dist/es/components/gradient-text/index.js +22 -0
  28. package/dist/es/components/hyper-text/index.js +27 -25
  29. package/dist/es/components/image-viewer/ImageViewer.js +89 -65
  30. package/dist/es/components/shimmer-button/ShimmerButton.js +29 -62
  31. package/dist/es/components/shiny-button/ShinyButton.js +15 -17
  32. package/dist/es/components/sparkles-text/SparklesText.js +30 -29
  33. package/dist/es/components/split-text/SplitText.js +37 -35
  34. package/dist/es/components/subtitle-player/SubtitlePlayer.d.ts +30 -0
  35. package/dist/es/components/subtitle-player/SubtitlePlayer.js +103 -0
  36. package/dist/es/components/subtitle-player/index.d.ts +2 -0
  37. package/dist/es/components/txt-editor/TxtEditor.d.ts +5 -4
  38. package/dist/es/components/txt-editor/TxtEditor.js +102 -43
  39. package/dist/es/components/txt-reader/TxtReader.js +48 -55
  40. package/dist/es/components/txt-reader/index.module.css.js +6 -2
  41. package/dist/es/components/typing-animation/index.js +11 -13
  42. package/dist/es/components/variable-proximity/index.d.ts +25 -0
  43. package/dist/es/components/variable-proximity/index.js +212 -0
  44. package/dist/es/components/video-dialog/VideoDialog.js +35 -48
  45. package/dist/es/index.d.ts +3 -0
  46. package/dist/es/index.js +60 -54
  47. package/dist/es/react-components.css +1 -1
  48. package/dist/es/subtitle/lib/src/parser.js +56 -0
  49. package/package.json +16 -12
@@ -1 +1 @@
1
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("motion/react"),p=require("../../utils/utils.js"),h=require("react"),x={hidden:{rotateX:-90,opacity:0},visible:{rotateX:0,opacity:1}};function j({children:n,duration:r=.5,delayMultiple:a=.08,className:s,as:o="span",variants:c,...l}){const d=i.motion.create(o),u=h.Children.toArray(n).join("").split("");return e.jsx("div",{className:"flex justify-center space-x-2",children:e.jsx(i.AnimatePresence,{mode:"wait",children:u.map((m,t)=>e.jsx(d,{initial:"hidden",animate:"visible",exit:"hidden",variants:c||x,transition:{duration:r,delay:t*a},className:p.cn("origin-center drop-shadow-sm",s),...l,children:m},t))})})}exports.FlipText=j;
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("motion/react"),m=require("../../utils/utils.js"),h=require("react");;/* empty css */const x={hidden:{rotateX:-90,opacity:0},visible:{rotateX:0,opacity:1}};function j({children:n,duration:r=.5,delayMultiple:a=.08,className:s,as:c="span",variants:o,...l}){const d=t.motion.create(c),u=h.Children.toArray(n).join("").split("");return e.jsx("div",{className:"xiping-flip-container",children:e.jsx(t.AnimatePresence,{mode:"wait",children:u.map((p,i)=>e.jsx(d,{initial:"hidden",animate:"visible",exit:"hidden",variants:o||x,transition:{duration:r,delay:i*a},className:m.cn("xiping-flip-char",s),...l,children:p},i))})})}exports.FlipText=j;
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from 'react';
2
+ interface GradientTextProps {
3
+ children: ReactNode;
4
+ className?: string;
5
+ colors?: string[];
6
+ animationSpeed?: number;
7
+ showBorder?: boolean;
8
+ }
9
+ export default function GradientText({ children, className, colors, animationSpeed, showBorder, }: GradientTextProps): import("react/jsx-runtime").JSX.Element;
10
+ export { GradientText };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");;/* empty css */function a({children:i,className:n="",colors:r=["#40ffaa","#4079ff","#40ffaa","#4079ff","#40ffaa"],animationSpeed:s=8,showBorder:d=!1}){const t={backgroundImage:`linear-gradient(to right, ${r.join(", ")})`,animationDuration:`${s}s`};return e.jsxs("div",{className:`animated-gradient-text ${n}`,children:[d&&e.jsx("div",{className:"gradient-overlay",style:t}),e.jsx("div",{className:"text-content",style:t,children:i})]})}exports.GradientText=a;exports.default=a;
@@ -1 +1 @@
1
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),M=require("../../utils/utils.js"),l=require("motion/react"),s=require("react"),w=Object.freeze("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")),H=n=>Math.floor(Math.random()*n);function P({children:n,className:R,duration:p=800,delay:r=0,as:b="div",startOnView:T=!1,animateOnHover:h=!0,characterSet:i=w,...E}){const I=l.motion.create(b,{forwardMotionProps:!0}),[j,q]=s.useState(()=>n.split("")),[a,o]=s.useState(!1),c=s.useRef(0),u=s.useRef(null),v=()=>{h&&!a&&(c.current=0,o(!0))};return s.useEffect(()=>{if(!T){const t=setTimeout(()=>{o(!0)},r);return()=>clearTimeout(t)}const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(setTimeout(()=>{o(!0)},r),e.disconnect())},{threshold:.1,rootMargin:"-30% 0px -30% 0px"});return u.current&&e.observe(u.current),()=>e.disconnect()},[r,T]),s.useEffect(()=>{if(!a)return;const e=n.length,t=performance.now();let m;const d=C=>{const F=C-t,g=Math.min(F/p,1);c.current=g*e,q(y=>y.map((x,A)=>x===" "?x:A<=c.current?n[A]:i[H(i.length)])),g<1?m=requestAnimationFrame(d):o(!1)};return m=requestAnimationFrame(d),()=>cancelAnimationFrame(m)},[n,p,a,i]),f.jsx(I,{ref:u,className:M.cn("overflow-hidden py-2 text-4xl font-bold",R),onMouseEnter:v,...E,children:f.jsx(l.AnimatePresence,{children:j.map((e,t)=>f.jsx(l.motion.span,{className:M.cn("font-mono",e===" "?"w-3":""),children:e.toUpperCase()},t))})})}exports.HyperText=P;
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),d=require("../../utils/utils.js"),f=require("motion/react"),r=require("react");;/* empty css */const H=Object.freeze("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")),P=n=>Math.floor(Math.random()*n);function S({children:n,className:M,duration:l=800,delay:o=0,as:R="div",startOnView:g=!1,animateOnHover:q=!0,characterSet:i=H,...y}){const E=f.motion.create(R,{forwardMotionProps:!0}),[I,b]=r.useState(()=>n.split("")),[a,s]=r.useState(!1),c=r.useRef(0),u=r.useRef(null),j=()=>{q&&!a&&(c.current=0,s(!0))};return r.useEffect(()=>{if(!g){const t=setTimeout(()=>{s(!0)},o);return()=>clearTimeout(t)}const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(setTimeout(()=>{s(!0)},o),e.disconnect())},{threshold:.1,rootMargin:"-30% 0px -30% 0px"});return u.current&&e.observe(u.current),()=>e.disconnect()},[o,g]),r.useEffect(()=>{if(!a)return;const e=n.length,t=performance.now();let m;const T=C=>{const F=C-t,x=Math.min(F/l,1);c.current=x*e,b(v=>v.map((A,h)=>A===" "?A:h<=c.current?n[h]:i[P(i.length)])),x<1?m=requestAnimationFrame(T):s(!1)};return m=requestAnimationFrame(T),()=>cancelAnimationFrame(m)},[n,l,a,i]),p.jsx(E,{ref:u,className:d.cn("xiping-hyper-container",M),onMouseEnter:j,...y,children:p.jsx(f.AnimatePresence,{children:I.map((e,t)=>p.jsx(f.motion.span,{className:d.cn("xiping-hyper-char",e===" "?"xiping-hyper-space":""),children:e.toUpperCase()},t))})})}exports.HyperText=S;
@@ -1 +1 @@
1
- "use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("@heroui/react"),z=require("../pinch-content/PinchContent.js"),D=require("./ImageThumbnails.js"),l=require("react"),U=require("clsx"),x=require("lucide-react"),h=require("motion/react"),d=require("../../utils/utils.js");;/* empty css */const w=a=>{a.target.closest(".xiping-main-content")&&a.preventDefault()},A=a=>{const{isOpen:s,onClose:f,imgSrc:i,thumbnailImages:v,canDownload:j=!1,wrapperClassName:C,closeClassName:b,downloadClassName:N,toolWrapperClassName:I,initialIndex:y=0}=a,t=Array.isArray(i)?i:[i],q=v||t,L=Math.max(0,Math.min(y,t.length-1)),[o,R]=l.useState(L),[E,c]=l.useState(!0),m=()=>{c(!0),f()},M=async()=>{const u=t[o];try{const k=await(await fetch(u)).blob(),p=window.URL.createObjectURL(k),n=document.createElement("a");n.href=p,n.download=u.split("/").pop()||"image",document.body.appendChild(n),n.click(),window.URL.revokeObjectURL(p),document.body.removeChild(n)}catch(g){console.error("Error downloading image:",g)}},S=()=>{c(!1)},O=()=>{c(!1)};return l.useEffect(()=>{if(s)return document.addEventListener("touchmove",w,{passive:!1}),()=>{document.removeEventListener("touchmove",w)}},[s]),e.jsx(r.Modal,{isOpen:s,size:"full",onClose:m,classNames:{wrapper:U(C)},className:"xiping-modal-overlay",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(r.ModalContent,{className:"xiping-modal-content",children:e.jsxs("div",{className:"xiping-wrapper",children:[e.jsxs("div",{className:d.cn("xiping-tool-wrapper",I),children:[j&&e.jsx(x.Download,{size:24,className:d.cn("xiping-download-icon",N),onClick:M}),e.jsx(x.X,{size:24,className:d.cn("xiping-close-icon",b),onClick:m})]}),e.jsxs("div",{className:"xiping-main-content",children:[e.jsx(z.default,{canRotate:!1,className:"xiping-pinch-content",children:e.jsx(h.AnimatePresence,{mode:"wait",children:e.jsx(h.motion.img,{draggable:"false",src:t[o],alt:"",className:"xiping-image",onLoad:S,onError:O,initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:1.05},transition:{duration:.3,ease:"easeInOut"}},o)})}),E&&e.jsx("div",{className:"xiping-loading",children:e.jsx(r.Spinner,{color:"white",size:"lg"})})]}),e.jsx(D.default,{images:q,currentIndex:o,onImageSelect:R})]})})})};exports.default=A;
1
+ "use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("@heroui/react"),T=require("../pinch-content/PinchContent.js"),O=require("./ImageThumbnails.js"),o=require("react"),U=require("clsx"),b=require("lucide-react"),v=require("motion/react"),f=require("../../utils/utils.js");;/* empty css */const C=l=>{l.target.closest(".xiping-main-content")&&l.preventDefault()},z=l=>{const{isOpen:a,onClose:w,imgSrc:m,thumbnailImages:N,canDownload:j=!1,wrapperClassName:y,closeClassName:I,downloadClassName:E,toolWrapperClassName:L,initialIndex:k=0}=l,s=Array.isArray(m)?m:[m],q=N||s,R=Math.max(0,Math.min(k,s.length-1)),[d,g]=o.useState(R),[D,p]=o.useState(!0),u=o.useCallback(()=>{p(!0),w()},[w]),A=async()=>{const i=s[d];try{const r=await(await fetch(i)).blob(),t=window.URL.createObjectURL(r),c=document.createElement("a");c.href=t,c.download=i.split("/").pop()||"image",document.body.appendChild(c),c.click(),window.URL.revokeObjectURL(t),document.body.removeChild(c)}catch(n){console.error("Error downloading image:",n)}},M=()=>{p(!1)},S=()=>{p(!1)};o.useEffect(()=>{if(a)return document.addEventListener("touchmove",C,{passive:!1}),()=>{document.removeEventListener("touchmove",C)}},[a]);const h=o.useCallback(()=>{"vibrate"in navigator&&navigator.vibrate([50,50,50])},[]);return o.useEffect(()=>{if(!a)return;const i=n=>{const r=n.target;if(!(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.isContentEditable))switch(n.key){case"ArrowLeft":n.preventDefault(),g(t=>t>0?t-1:(h(),t));break;case"ArrowRight":n.preventDefault(),g(t=>t<s.length-1?t+1:(h(),t));break;case"Escape":n.preventDefault(),u();break}};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[a,s.length,u,h]),e.jsx(x.Modal,{isOpen:a,size:"full",onClose:u,classNames:{wrapper:U(y)},className:"xiping-modal-overlay",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(x.ModalContent,{className:"xiping-modal-content",children:e.jsxs("div",{className:"xiping-wrapper",children:[e.jsxs("div",{className:f.cn("xiping-tool-wrapper",L),children:[j&&e.jsx(b.Download,{size:24,className:f.cn("xiping-download-icon",E),onClick:A}),e.jsx(b.X,{size:24,className:f.cn("xiping-close-icon",I),onClick:u})]}),e.jsxs("div",{className:"xiping-main-content",children:[e.jsx(T.default,{canRotate:!1,className:"xiping-pinch-content",children:e.jsx(v.AnimatePresence,{mode:"wait",children:e.jsx(v.motion.img,{draggable:"false",src:s[d],alt:"",className:"xiping-image",onLoad:M,onError:S,initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:1.05},transition:{duration:.3,ease:"easeInOut"}},d)})}),D&&e.jsx("div",{className:"xiping-loading",children:e.jsx(x.Spinner,{color:"white",size:"lg"})})]}),e.jsx(O.default,{images:q,currentIndex:d,onImageSelect:g})]})})})};exports.default=z;
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("react"),r=require("../../utils/utils.js"),a=c.forwardRef(({shimmerColor:t="#ffffff",shimmerSize:s="0.05em",shimmerDuration:i="3s",borderRadius:n="100px",background:o="rgba(0, 0, 0, 1)",className:u,children:d,...l},f)=>e.jsxs("button",{style:{"--spread":"90deg","--shimmer-color":t,"--radius":n,"--speed":i,"--cut":s,"--bg":o},className:r.cn("group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black","transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",u),ref:f,...l,children:[e.jsx("div",{className:r.cn("-z-30 blur-[2px]","absolute inset-0 overflow-visible [container-type:size]"),children:e.jsx("div",{className:"absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]",children:e.jsx("div",{className:"absolute -inset-full w-auto rotate-0 animate-spin-around [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]"})})}),d,e.jsx("div",{className:r.cn("insert-0 absolute size-full","rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]","transform-gpu transition-all duration-300 ease-in-out","group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]","group-active:shadow-[inset_0_-10px_10px_#ffffff3f]")}),e.jsx("div",{className:r.cn("absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]")})]}));a.displayName="ShimmerButton";exports.ShimmerButton=a;exports.default=a;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("react"),d=require("../../utils/utils.js");;/* empty css */const i=l.forwardRef(({shimmerColor:s="#ffffff",shimmerSize:r="0.05em",shimmerDuration:t="3s",borderRadius:m="100px",background:n="rgba(0, 0, 0, 1)",className:a,children:u,...o},c)=>e.jsxs("button",{style:{"--spread":"90deg","--shimmer-color":s,"--radius":m,"--speed":t,"--cut":r,"--bg":n},className:d.cn("xiping-shimmer-button",a),ref:c,...o,children:[e.jsx("div",{className:"xiping-shimmer-button-spark-container",children:e.jsx("div",{className:"xiping-shimmer-button-spark",children:e.jsx("div",{className:"xiping-shimmer-button-spark-before"})})}),u,e.jsx("div",{className:"xiping-shimmer-button-highlight"}),e.jsx("div",{className:"xiping-shimmer-button-backdrop"})]}));i.displayName="ShimmerButton";exports.ShimmerButton=i;exports.default=i;
@@ -1 +1 @@
1
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../utils/utils.js"),l=require("motion/react"),o=require("react"),c={initial:{"--x":"100%",scale:.8},animate:{"--x":"-100%",scale:1},whileTap:{scale:.95},transition:{repeat:1/0,repeatType:"loop",repeatDelay:1,type:"spring",stiffness:20,damping:15,mass:2,scale:{type:"spring",stiffness:200,damping:5,mass:.5}}},a=o.forwardRef(({children:e,className:t,...i},n)=>r.jsxs(l.motion.button,{ref:n,className:s.cn("relative cursor-pointer rounded-lg px-6 py-2 font-medium backdrop-blur-xl border transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,var(--primary)/10%_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_var(--primary)/10%]",t),...c,...i,children:[r.jsx("span",{className:"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]",style:{maskImage:"linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%))"},children:e}),r.jsx("span",{style:{mask:"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",WebkitMask:"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",backgroundImage:"linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))"},className:"absolute inset-0 z-10 block rounded-[inherit] p-px"})]}));a.displayName="ShinyButton";exports.ShinyButton=a;
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../utils/utils.js"),c=require("motion/react"),l=require("react");;/* empty css */const o={initial:{"--x":"100%",scale:.8},animate:{"--x":"-100%",scale:1},whileTap:{scale:.95},transition:{repeat:1/0,repeatType:"loop",repeatDelay:1,type:"spring",stiffness:20,damping:15,mass:2,scale:{type:"spring",stiffness:200,damping:5,mass:.5}}},e=l.forwardRef(({children:r,className:n,...t},i)=>a.jsxs(c.motion.button,{ref:i,className:s.cn("xiping-shiny-button",n),...o,...t,children:[a.jsx("span",{className:"xiping-shiny-button-text",style:{maskImage:"linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%))"},children:r}),a.jsx("span",{style:{mask:"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",WebkitMask:"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",backgroundImage:"linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))"},className:"xiping-shiny-button-border"})]}));e.displayName="ShinyButton";exports.ShinyButton=e;
@@ -1 +1 @@
1
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),v=require("motion/react"),p=require("react"),y=require("../../utils/utils.js"),j=({id:i,x:t,y:o,color:r,delay:c,scale:l})=>s.jsx(v.motion.svg,{className:"pointer-events-none absolute z-20",initial:{opacity:0,left:t,top:o},animate:{opacity:[0,1,0],scale:[0,l,0],rotate:[75,120,150]},transition:{duration:.8,repeat:1/0,delay:c},width:"21",height:"21",viewBox:"0 0 21 21",children:s.jsx("path",{d:"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z",fill:r})},i),L=({children:i,colors:t={first:"#9E7AFF",second:"#FE8BBB"},className:o,sparklesCount:r=10,...c})=>{const[l,d]=p.useState([]);return p.useEffect(()=>{const a=()=>{const e=`${Math.random()*100}%`,n=`${Math.random()*100}%`,h=Math.random()>.5?t.first:t.second,x=Math.random()*2,C=Math.random()*1+.3,S=Math.random()*10+5;return{id:`${e}-${n}-${Date.now()}`,x:e,y:n,color:h,delay:x,scale:C,lifespan:S}},u=()=>{const e=Array.from({length:r},a);d(e)},f=()=>{d(e=>e.map(n=>n.lifespan<=0?a():{...n,lifespan:n.lifespan-.1}))};u();const m=setInterval(f,100);return()=>clearInterval(m)},[t.first,t.second,r]),s.jsx("div",{className:y.cn("text-6xl font-bold",o),...c,style:{"--sparkles-first-color":`${t.first}`,"--sparkles-second-color":`${t.second}`},children:s.jsxs("span",{className:"relative inline-block",children:[l.map(a=>s.jsx(j,{...a},a.id)),s.jsx("strong",{children:i})]})})};exports.SparklesText=L;
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("motion/react"),d=require("react"),k=require("../../utils/utils.js");;/* empty css */const y=({id:i,x:e,y:o,color:a,delay:c,scale:l})=>n.jsx(g.motion.svg,{className:"xiping-sparkle",initial:{opacity:0,left:e,top:o},animate:{opacity:[0,1,0],scale:[0,l,0],rotate:[75,120,150]},transition:{duration:.8,repeat:1/0,delay:c},width:"21",height:"21",viewBox:"0 0 21 21",children:n.jsx("path",{d:"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z",fill:a})},i),j=({children:i,colors:e={first:"#9E7AFF",second:"#FE8BBB"},className:o,sparklesCount:a=10,...c})=>{const[l,p]=d.useState([]);return d.useEffect(()=>{const r=()=>{const t=`${Math.random()*100}%`,s=`${Math.random()*100}%`,x=Math.random()>.5?e.first:e.second,h=Math.random()*2,C=Math.random()*1+.3,S=Math.random()*10+5;return{id:`${t}-${s}-${Date.now()}`,x:t,y:s,color:x,delay:h,scale:C,lifespan:S}},u=()=>{const t=Array.from({length:a},r);p(t)},f=()=>{p(t=>t.map(s=>s.lifespan<=0?r():{...s,lifespan:s.lifespan-.1}))};u();const m=setInterval(f,100);return()=>clearInterval(m)},[e.first,e.second,a]),n.jsx("div",{className:k.cn("xiping-sparkles-text",o),...c,style:{"--sparkles-first-color":`${e.first}`,"--sparkles-second-color":`${e.second}`},children:n.jsxs("span",{className:"xiping-sparkles-text-wrapper",children:[l.map(r=>n.jsx(y,{...r},r.id)),n.jsx("strong",{children:i})]})})};exports.SparklesText=j;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),i=require("react"),o=require("gsap"),D=require("gsap/ScrollTrigger"),$=require("gsap/SplitText");o.gsap.registerPlugin(D.ScrollTrigger,$.SplitText);const E=({text:c,className:k="",delay:d=100,duration:m=.6,ease:h="power3.out",splitType:n="chars",from:w={opacity:0,y:40},to:a={opacity:1,y:0},threshold:x=.1,rootMargin:T="-100px",textAlign:q="center",onLetterAnimationComplete:S})=>{const u=i.useRef(null),b=i.useRef(!1),s=i.useRef(null);return i.useEffect(()=>{if(typeof window>"u"||!u.current||!c)return;const g=u.current;b.current=!1;const y=n==="lines";y&&(g.style.position="relative");let r;try{r=new $.SplitText(g,{type:n,absolute:y,linesClass:"split-line"})}catch(t){console.error("Failed to create SplitText:",t);return}let e;switch(n){case"lines":e=r.lines;break;case"words":e=r.words;break;case"chars":e=r.chars;break;default:e=r.chars}if(!e||e.length===0){console.warn("No targets found for SplitText animation"),r.revert();return}e.forEach(t=>{t.style.willChange="transform, opacity"});const v=(1-x)*100,l=/^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(T),p=l?parseFloat(l[1]):0,R=l&&l[2]||"px",C=p<0?`-=${Math.abs(p)}${R}`:`+=${p}${R}`,P=`top ${v}%${C}`,f=o.gsap.timeline({scrollTrigger:{trigger:g,start:P,toggleActions:"play none none none",once:!0,onToggle:t=>{s.current=t}},smoothChildTiming:!0,onComplete:()=>{b.current=!0,o.gsap.set(e,{...a,clearProps:"willChange",immediateRender:!0}),S?.()}});return f.set(e,{...w,immediateRender:!1,force3D:!0}),f.to(e,{...a,duration:m,ease:h,stagger:d/1e3,force3D:!0}),()=>{f.kill(),s.current&&(s.current.kill(),s.current=null),o.gsap.killTweensOf(e),r&&r.revert()}},[c,d,m,h,n,w,a,x,T,S]),j.jsx("p",{ref:u,className:`split-parent overflow-hidden inline-block whitespace-normal ${k}`,style:{textAlign:q,wordWrap:"break-word"},children:c})};exports.SplitText=E;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),l=require("react"),o=require("gsap"),D=require("gsap/ScrollTrigger"),$=require("gsap/SplitText"),E=require("clsx");;/* empty css */o.gsap.registerPlugin(D.ScrollTrigger,$.SplitText);const F=({text:c,className:k="",delay:d=100,duration:m=.6,ease:x="power3.out",splitType:n="chars",from:h={opacity:0,y:40},to:a={opacity:1,y:0},threshold:w=.1,rootMargin:T="-100px",textAlign:q="center",onLetterAnimationComplete:S})=>{const u=l.useRef(null),y=l.useRef(!1),s=l.useRef(null);return l.useEffect(()=>{if(typeof window>"u"||!u.current||!c)return;const g=u.current;y.current=!1;const b=n==="lines";b&&(g.style.position="relative");let r;try{r=new $.SplitText(g,{type:n,absolute:b,linesClass:"split-line"})}catch(t){console.error("Failed to create SplitText:",t);return}let e;switch(n){case"lines":e=r.lines;break;case"words":e=r.words;break;case"chars":e=r.chars;break;default:e=r.chars}if(!e||e.length===0){console.warn("No targets found for SplitText animation"),r.revert();return}e.forEach(t=>{t.style.willChange="transform, opacity"});const C=(1-w)*100,i=/^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(T),p=i?parseFloat(i[1]):0,R=i&&i[2]||"px",v=p<0?`-=${Math.abs(p)}${R}`:`+=${p}${R}`,P=`top ${C}%${v}`,f=o.gsap.timeline({scrollTrigger:{trigger:g,start:P,toggleActions:"play none none none",once:!0,onToggle:t=>{s.current=t}},smoothChildTiming:!0,onComplete:()=>{y.current=!0,o.gsap.set(e,{...a,clearProps:"willChange",immediateRender:!0}),S?.()}});return f.set(e,{...h,immediateRender:!1,force3D:!0}),f.to(e,{...a,duration:m,ease:x,stagger:d/1e3,force3D:!0}),()=>{f.kill(),s.current&&(s.current.kill(),s.current=null),o.gsap.killTweensOf(e),r&&r.revert()}},[c,d,m,x,n,h,a,w,T,S]),j.jsx("p",{ref:u,className:E("xiping-split-parent",k),style:{textAlign:q,wordWrap:"break-word"},children:c})};exports.SplitText=F;
@@ -0,0 +1,30 @@
1
+ import { default as React } from 'react';
2
+ export type SubtitleType = 'srt' | 'vtt';
3
+ export interface SubtitleData {
4
+ /** 字幕类型 */
5
+ type: SubtitleType;
6
+ /** 字幕内容字符串 */
7
+ content: string;
8
+ /** 可选的语言标识,用于多字幕对照时的标签显示 */
9
+ label?: string;
10
+ }
11
+ export type SubtitleDisplayMode = 'current' | 'lyrics';
12
+ export interface SubtitlePlayerProps {
13
+ /** 字幕数据,可以是单个字幕或多个字幕(用于对照) */
14
+ subtitles: SubtitleData | SubtitleData[];
15
+ /** 当前播放进度(秒数) */
16
+ currentTime: number;
17
+ /** 显示模式:'current' 只显示当前字幕,'lyrics' 显示全部字幕并高亮当前 */
18
+ mode?: SubtitleDisplayMode;
19
+ /** 自定义类名 */
20
+ className?: string;
21
+ /** 自定义样式 */
22
+ style?: React.CSSProperties;
23
+ }
24
+ /**
25
+ * 字幕播放组件
26
+ * 支持 SRT 和 WebVTT 格式,可以同时显示多个字幕进行对照
27
+ * 支持两种显示模式:当前模式(只显示当前字幕)和歌词模式(显示全部并高亮当前)
28
+ */
29
+ export declare const SubtitlePlayer: React.FC<SubtitlePlayerProps>;
30
+ export default SubtitlePlayer;
@@ -0,0 +1,3 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("react"),j=require("../../subtitle/lib/src/parser.js");;/* empty css */function b(i){const r=i.replace(",",".").split(":");if(r.length!==3)return 0;const c=parseInt(r[0],10)||0,o=parseInt(r[1],10)||0,m=parseFloat(r[2])||0;return c*3600+o*60+m}function q(i,n){for(const r of i){const c=b(r.startTime),o=b(r.endTime);if(n>=c&&n<=o)return r}return null}const S=({subtitles:i,currentTime:n,mode:r="current",className:c="",style:o})=>{const m=Array.isArray(i)?i:[i],y=d.useRef(null),f=d.useRef(null),h=d.useMemo(()=>m.map(t=>{try{return{entries:t.type==="srt"?j.parseSRT(t.content):j.parseVTT(t.content),label:t.label}}catch(e){return console.error("字幕解析失败:",e),{entries:[],label:t.label}}}),[m]),v=d.useMemo(()=>h.map(({entries:t,label:e})=>({entry:q(t,n),label:e,entries:t})),[h,n]);return d.useEffect(()=>{if(r==="lyrics"&&f.current&&y.current){const t=y.current,e=f.current;t.getBoundingClientRect(),e.getBoundingClientRect(),t.scrollTop;const l=e.offsetTop,a=t.clientHeight,u=e.clientHeight,p=l-a/2+u/2;t.scrollTo({top:p,behavior:"smooth"})}},[r,n]),r==="current"?v.some(({entry:e})=>e!==null)?s.jsx("div",{className:`subtitle-player subtitle-player--current ${c}`,style:o,children:v.map(({entry:e,label:l},a)=>e?s.jsxs("div",{className:"subtitle-player-item","data-label":l||void 0,children:[l&&s.jsx("span",{className:"subtitle-player-label",children:l}),s.jsx("div",{className:"subtitle-player-text",children:e.text.split(`
2
+ `).map((u,p)=>s.jsx("div",{className:"subtitle-player-line",children:u},p))})]},a):null)}):null:s.jsx("div",{ref:y,className:`subtitle-player subtitle-player--lyrics ${c}`,style:o,children:h.map(({entries:t,label:e},l)=>s.jsxs("div",{className:"subtitle-player-group",children:[e&&s.jsx("span",{className:"subtitle-player-label",children:e}),t.map((a,u)=>{const p=b(a.startTime),x=b(a.endTime),g=n>=p&&n<=x,T=n>x;return s.jsx("div",{ref:g?f:null,className:`subtitle-player-item ${g?"subtitle-player-item--active":""} ${T?"subtitle-player-item--past":""}`,"data-label":e||void 0,children:s.jsx("div",{className:"subtitle-player-text",children:a.text.split(`
3
+ `).map((N,R)=>s.jsx("div",{className:"subtitle-player-line",children:N},R))})},u)})]},l))})};exports.SubtitlePlayer=S;exports.default=S;
@@ -0,0 +1,2 @@
1
+ export * from './SubtitlePlayer';
2
+ export { default } from './SubtitlePlayer';
@@ -1,4 +1,4 @@
1
- import { OnMount } from '@monaco-editor/react';
1
+ import { Editor } from '@tiptap/react';
2
2
  export interface TxtEditorProps {
3
3
  /**
4
4
  * 编辑器高度
@@ -13,6 +13,7 @@ export interface TxtEditorProps {
13
13
  /**
14
14
  * 编辑器默认语言
15
15
  * @default 'plaintext'
16
+ * @deprecated Tiptap 不支持语法高亮,此属性已废弃
16
17
  */
17
18
  language?: string;
18
19
  /**
@@ -40,13 +41,13 @@ export interface TxtEditorProps {
40
41
  /**
41
42
  * 编辑器加载完成回调
42
43
  */
43
- onMount?: OnMount;
44
+ onMount?: (editor: Editor) => void;
44
45
  /**
45
46
  * 文本编辑器样式
46
47
  */
47
48
  className?: string;
48
49
  }
49
50
  /**
50
- * Monaco Editor 文本编辑器组件
51
+ * Tiptap 文本编辑器组件
51
52
  */
52
- export declare const TxtEditor: ({ height, width, language, defaultValue, value, theme, readOnly, onChange, onMount, className, }: TxtEditorProps) => import("react/jsx-runtime").JSX.Element;
53
+ export declare const TxtEditor: ({ height, width, language: _language, defaultValue, value, theme, readOnly, onChange, onMount, className, }: TxtEditorProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +1,32 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),h=require("@monaco-editor/react"),m=require("react"),E=({height:n="500px",width:o="100%",language:i="plaintext",defaultValue:s,value:r,theme:a="light",readOnly:t=!1,onChange:l,onMount:u,className:d})=>{const c=m.useRef(null),f=(e,p)=>{c.current=e,u?.(e,p),e.updateOptions({minimap:{enabled:!1},lineNumbers:"on",roundedSelection:!1,scrollBeyondLastLine:!1,readOnly:t,fontSize:14})},g=e=>{l?.(e||"")};return x.jsx(h,{className:d,height:n,width:o,defaultLanguage:i,defaultValue:s,value:r,theme:a,onMount:f,onChange:g,options:{readOnly:t}})};exports.TxtEditor=E;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),u=require("@tiptap/react"),M=require("@tiptap/starter-kit"),t=require("react"),E=({height:i="500px",width:n="100%",language:w="plaintext",defaultValue:l,value:o,theme:p="light",readOnly:s=!1,onChange:g,onMount:a,className:x})=>{const c=o!==void 0,b=t.useMemo(()=>l||o||"",[l,o]),e=u.useEditor({extensions:[M.configure({bold:!1,italic:!1,strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,hardBreak:!1})],content:b,editable:!s,immediatelyRender:!1,onUpdate:({editor:d})=>{const k=d.getText();g?.(k)}});if(t.useEffect(()=>{if(!e||!c)return;const d=e.getText();o!==d&&e.commands.setContent(o||"",{emitUpdate:!1})},[e,o,c]),t.useEffect(()=>{e&&e.setEditable(!s)},[e,s]),t.useEffect(()=>{e&&a&&a(e)},[e,a]),!e)return null;const m=typeof i=="number"?`${i}px`:i,h=typeof n=="number"?`${n}px`:n,r=p==="vs-dark";return f.jsxs("div",{className:x,style:{width:h,height:m,border:`1px solid ${r?"#3e3e3e":"#d4d4d4"}`,borderRadius:"4px",overflow:"hidden",backgroundColor:r?"#1e1e1e":"#ffffff"},children:[f.jsx(u.EditorContent,{editor:e,style:{height:"100%",overflow:"auto"}}),f.jsx("style",{children:`
2
+ .ProseMirror {
3
+ outline: none;
4
+ padding: 12px;
5
+ min-height: 100%;
6
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
7
+ font-size: 14px;
8
+ line-height: 1.5;
9
+ color: ${r?"#d4d4d4":"#333333"};
10
+ white-space: pre-wrap;
11
+ word-wrap: break-word;
12
+ }
13
+ .ProseMirror p {
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+ .ProseMirror p + p {
18
+ margin-top: 0;
19
+ }
20
+ .ProseMirror:focus {
21
+ outline: none;
22
+ }
23
+ ${r?`
24
+ .ProseMirror {
25
+ background-color: #1e1e1e;
26
+ }
27
+ `:`
28
+ .ProseMirror {
29
+ background-color: #ffffff;
30
+ }
31
+ `}
32
+ `})]})};exports.TxtEditor=E;
@@ -1 +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:_})=>{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;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("react"),n=require("clsx"),t=require("motion/react"),r=require("./index.module.css.js"),F=16,h=1.5,v="normal",a=({content:u,lineHeight:d=h,fontSize:x=F,fontWeight:f=v,className:g="",style:m={},onProgressChange:p,initialScrollPosition:S,cacheKey:q,showTopProgress:T=!0,topProgressClassName:_,showBottomProgress:N=!0,bottomProgressClassName:R})=>{const s=l.useRef(null),o=l.useRef(null),{scrollYProgress:i}=t.useScroll({container:s,target:o}),c=t.useTransform(()=>(i.get()*100).toFixed(2).replace(/\.0*$/,"")),j=t.useMotionTemplate`${c}%`;return c.on("change",E=>{p?.(Number(E))}),e.jsxs(e.Fragment,{children:[T&&e.jsx(t.motion.div,{id:"scroll-indicator",className:n(r.default["xiping-top-progress"],_),style:{scaleX:i,originX:0}}),e.jsx("div",{className:n(r.default["xiping-container"],r.default.textContent),ref:s,children:e.jsx("div",{ref:o,className:n(r.default["xiping-content"],g),style:{fontSize:`${x}px`,lineHeight:d,fontWeight:f,...m},children:u})}),N&&e.jsx(t.motion.div,{id:"scroll-present",className:n(r.default["xiping-bottom-progress"],R),children:j})]})};exports.TxtReader=a;exports.default=a;
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_textContent_8n59h_23",e={textContent:t};exports.default=e;exports.textContent=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_textContent_yv2bi_63",e={"xiping-top-progress":"_xiping-top-progress_yv2bi_23","xiping-container":"_xiping-container_yv2bi_33","xiping-content":"_xiping-content_yv2bi_41","xiping-bottom-progress":"_xiping-bottom-progress_yv2bi_48",textContent:t};exports.default=e;exports.textContent=t;
@@ -1 +1 @@
1
- "use client";"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"),n=require("react");function l({children:r,className:f,duration:o=100,delay:s=0,as:m="div",startOnView:u=!1,...d}){const g=x.motion.create(m,{forwardMotionProps:!0}),[v,T]=n.useState(""),[c,a]=n.useState(!1),i=n.useRef(null);return n.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 i.current&&e.observe(i.current),()=>e.disconnect()},[s,u]),n.useEffect(()=>{if(!c)return;let e=0;const t=setInterval(()=>{e<r.length?(T(r.substring(0,e+1)),e++):clearInterval(t)},o);return()=>{clearInterval(t)}},[r,o,c]),p.jsx(g,{ref:i,className:b.cn("text-4xl font-bold leading-[5rem] tracking-[-0.02em]",f),...d,children:v})}exports.TypingAnimation=l;exports.default=l;
1
+ "use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react/jsx-runtime"),b=require("../../utils/utils.js"),q=require("motion/react"),n=require("react");;/* empty css */function l({children:r,className:f,duration:o=100,delay:s=0,as:m="div",startOnView:u=!1,...d}){const g=q.motion.create(m,{forwardMotionProps:!0}),[p,v]=n.useState(""),[c,a]=n.useState(!1),i=n.useRef(null);return n.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 i.current&&e.observe(i.current),()=>e.disconnect()},[s,u]),n.useEffect(()=>{if(!c)return;let e=0;const t=setInterval(()=>{e<r.length?(v(r.substring(0,e+1)),e++):clearInterval(t)},o);return()=>{clearInterval(t)}},[r,o,c]),T.jsx(g,{ref:i,className:b.cn("xiping-typing-animation",f),...d,children:p})}exports.TypingAnimation=l;exports.default=l;
@@ -0,0 +1,25 @@
1
+ import { RefObject, HTMLAttributes } from 'react';
2
+ interface VariableProximityProps extends HTMLAttributes<HTMLSpanElement> {
3
+ label: string;
4
+ fromFontVariationSettings: string;
5
+ toFontVariationSettings: string;
6
+ containerRef: RefObject<HTMLElement>;
7
+ radius?: number;
8
+ falloff?: "linear" | "exponential" | "gaussian";
9
+ className?: string;
10
+ onClick?: () => void;
11
+ style?: React.CSSProperties;
12
+ /**
13
+ * 自定义字体族,如果不提供则使用默认的可变字体
14
+ * 例如: "'Custom Font', 'Roboto Flex', sans-serif"
15
+ */
16
+ fontFamily?: string;
17
+ /**
18
+ * 是否自动加载默认字体(当 fontFamily 未提供时)
19
+ * @default true
20
+ */
21
+ autoLoadFonts?: boolean;
22
+ }
23
+ declare const VariableProximity: import('react').ForwardRefExoticComponent<VariableProximityProps & import('react').RefAttributes<HTMLSpanElement>>;
24
+ export { VariableProximity };
25
+ export default VariableProximity;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react/jsx-runtime"),f=require("react"),D=require("motion/react");;/* empty css */const l={robotoFlex:!1,notoSansSC:!1,loading:!1};function P(n){if(typeof document>"u")return!1;try{return document.fonts.check(`1em "${n}"`)}catch{return!0}}function O(){if(l.loading||l.robotoFlex&&l.notoSansSC)return;l.loading=!0;const n=P("Roboto Flex"),r=P("Noto Sans SC");if(n&&(l.robotoFlex=!0),r&&(l.notoSansSC=!0),n&&r){l.loading=!1;return}const i=(t,s)=>{if(document.querySelector(`link[href="${t}"]`)){s?.();return}const c=document.createElement("link");c.rel="stylesheet",c.href=t,c.onload=()=>s?.(),document.head.appendChild(c)},d=[{roboto:"https://fonts.loli.net/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",noto:"https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@100..900&display=swap"},{roboto:"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",noto:"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap"}],m=t=>{if(t>=d.length){l.loading=!1;return}const s=d[t];let p=0;const c=()=>{p++,p===2&&(l.loading=!1)};n?c():i(s.roboto,()=>{l.robotoFlex=!0,c()}),r?c():i(s.noto,()=>{l.notoSansSC=!0,c()}),setTimeout(()=>{(!l.robotoFlex||!l.notoSansSC)&&m(t+1)},3e3)};m(0)}function U(n=!0){f.useEffect(()=>{n&&typeof document<"u"&&O()},[n])}function G(n){f.useEffect(()=>{let r;const i=()=>{n(),r=requestAnimationFrame(i)};return r=requestAnimationFrame(i),()=>cancelAnimationFrame(r)},[n])}function H(n){const r=f.useRef({x:0,y:0});return f.useEffect(()=>{const i=(t,s)=>{if(n?.current){const p=n.current.getBoundingClientRect();r.current={x:t-p.left,y:s-p.top}}else r.current={x:t,y:s}},d=t=>i(t.clientX,t.clientY),m=t=>{const s=t.touches[0];i(s.clientX,s.clientY)};return window.addEventListener("mousemove",d),window.addEventListener("touchmove",m),()=>{window.removeEventListener("mousemove",d),window.removeEventListener("touchmove",m)}},[n]),r}const b=f.forwardRef((n,r)=>{const{label:i,fromFontVariationSettings:d,toFontVariationSettings:m,containerRef:t,radius:s=50,falloff:p="linear",className:c="",onClick:V,style:C,fontFamily:y,autoLoadFonts:k=!0,...q}=n;U(k&&!y);const R=f.useRef([]),v=f.useRef([]),S=H(t),x=f.useRef({x:null,y:null}),N=f.useMemo(()=>{const e=o=>new Map(o.split(",").map(g=>g.trim()).map(g=>{const[h,F]=g.split(" ");return[h.replace(/['"]/g,""),parseFloat(F)]})),a=e(d),u=e(m);return Array.from(a.entries()).map(([o,g])=>({axis:o,fromValue:g,toValue:u.get(o)??g}))},[d,m]),j=(e,a,u,o)=>Math.sqrt((u-e)**2+(o-a)**2),A=e=>{const a=Math.min(Math.max(1-e/s,0),1);switch(p){case"exponential":return a**2;case"gaussian":return Math.exp(-((e/(s/2))**2)/2);case"linear":default:return a}};G(()=>{if(!t?.current)return;const{x:e,y:a}=S.current;if(x.current.x===e&&x.current.y===a)return;x.current={x:e,y:a};const u=t.current.getBoundingClientRect();R.current.forEach((o,g)=>{if(!o)return;const h=o.getBoundingClientRect(),F=h.left+h.width/2-u.left,T=h.top+h.height/2-u.top,M=j(S.current.x,S.current.y,F,T);if(M>=s){o.style.fontVariationSettings=d;return}const X=A(M),L=N.map(({axis:Y,fromValue:E,toValue:z})=>{const _=E+(z-E)*X;return`'${Y}' ${_}`}).join(", ");v.current[g]=L,o.style.fontVariationSettings=L})});const $=/[\u4e00-\u9fa5]/.test(i)?i.split(""):i.split(" ").flatMap((e,a,u)=>{const o=e.split("");return a<u.length-1?[...o," "]:o});let I=0;const B=f.useMemo(()=>{const e={display:"inline",...C};return y&&(e.fontFamily=y),e},[y,C]);return w.jsxs("span",{ref:r,className:`${c} variable-proximity`,onClick:V,style:B,...q,children:[$.map((e,a)=>{const u=I++;return w.jsx(D.motion.span,{ref:o=>{R.current[u]=o},style:{display:e===" "?"inline":"inline-block",fontVariationSettings:v.current[u]},"aria-hidden":"true",children:e},a)}),w.jsx("span",{className:"sr-only",children:i})]})});b.displayName="VariableProximity";exports.VariableProximity=b;exports.default=b;
@@ -1 +1 @@
1
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),i=require("motion/react"),a=require("lucide-react"),m=require("../../utils/utils.js"),p={"from-bottom":{initial:{y:"100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"100%",opacity:0}},"from-center":{initial:{scale:.5,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.5,opacity:0}},"from-top":{initial:{y:"-100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"-100%",opacity:0}},"from-left":{initial:{x:"-100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"-100%",opacity:0}},"from-right":{initial:{x:"100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"100%",opacity:0}},fade:{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}},"top-in-bottom-out":{initial:{y:"-100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"100%",opacity:0}},"left-in-right-out":{initial:{x:"-100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"100%",opacity:0}}};function x({animationStyle:o="from-center",videoSrc:r,thumbnailSrc:s,thumbnailAlt:l="Video thumbnail",className:n}){const[c,t]=u.useState(!1),d=p[o];return e.jsxs("div",{className:m.cn("relative",n),children:[e.jsxs("div",{className:"group relative cursor-pointer",onClick:()=>t(!0),children:[e.jsx("img",{src:s,alt:l,width:1920,height:1080,className:"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]"}),e.jsx("div",{className:"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100",children:e.jsx("div",{className:"flex size-28 items-center justify-center rounded-full bg-primary/10 backdrop-blur-md",children:e.jsx("div",{className:"relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b from-primary/30 to-primary shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]",children:e.jsx(a.Play,{className:"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105",style:{filter:"drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))"}})})})})]}),e.jsx(i.AnimatePresence,{children:c&&e.jsx(i.motion.div,{initial:{opacity:0},animate:{opacity:1},onClick:()=>t(!1),exit:{opacity:0},className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md",children:e.jsxs(i.motion.div,{...d,transition:{type:"spring",damping:30,stiffness:300},className:"relative mx-4 aspect-video w-full max-w-4xl md:mx-0",children:[e.jsx(i.motion.button,{className:"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black",children:e.jsx(a.XIcon,{className:"size-5"})}),e.jsx("div",{className:"relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white",children:e.jsx("iframe",{src:r,className:"size-full rounded-2xl",allowFullScreen:!0,allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"})})]})})})]})}exports.VideoDialog=x;
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("react"),e=require("motion/react"),t=require("lucide-react"),m=require("clsx");;/* empty css */const x={"from-bottom":{initial:{y:"100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"100%",opacity:0}},"from-center":{initial:{scale:.5,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.5,opacity:0}},"from-top":{initial:{y:"-100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"-100%",opacity:0}},"from-left":{initial:{x:"-100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"-100%",opacity:0}},"from-right":{initial:{x:"100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"100%",opacity:0}},fade:{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}},"top-in-bottom-out":{initial:{y:"-100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"100%",opacity:0}},"left-in-right-out":{initial:{x:"-100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"100%",opacity:0}}};function y({animationStyle:o="from-center",videoSrc:n,thumbnailSrc:c,thumbnailAlt:l="Video thumbnail",className:s}){const[r,a]=p.useState(!1),d=x[o];return i.jsxs("div",{className:m("xiping-video-dialog",s),children:[i.jsxs("div",{className:"xiping-video-dialog-container",onClick:()=>a(!0),children:[i.jsx("img",{src:c,alt:l,width:1920,height:1080,className:"xiping-video-dialog-thumbnail"}),i.jsx("div",{className:"xiping-video-dialog-overlay",children:i.jsx("div",{className:"xiping-video-dialog-play-outer",children:i.jsx("div",{className:"xiping-video-dialog-play-inner",children:i.jsx(t.Play,{className:"xiping-video-dialog-play-icon"})})})})]}),i.jsx(e.AnimatePresence,{children:r&&i.jsx(e.motion.div,{initial:{opacity:0},animate:{opacity:1},onClick:()=>a(!1),exit:{opacity:0},className:"xiping-video-dialog-modal",children:i.jsxs(e.motion.div,{...d,transition:{type:"spring",damping:30,stiffness:300},className:"xiping-video-dialog-modal-content",children:[i.jsx(e.motion.button,{className:"xiping-video-dialog-close-button",children:i.jsx(t.XIcon,{className:"xiping-video-dialog-close-icon"})}),i.jsx("div",{className:"xiping-video-dialog-video-wrapper",children:i.jsx("iframe",{src:n,className:"xiping-video-dialog-iframe",allowFullScreen:!0,allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"})})]})})})]})}exports.VideoDialog=y;
@@ -25,4 +25,7 @@ export * from './components/scratch-to-reveal';
25
25
  export * from './components/split-text';
26
26
  export * from './components/dome-gallery';
27
27
  export * from './components/text-type';
28
+ export * from './components/gradient-text';
29
+ export * from './components/variable-proximity';
30
+ export * from './components/subtitle-player';
28
31
  export * from './hooks/useStayTimeReport';
package/dist/cjs/index.js CHANGED
@@ -1 +1 @@
1
- "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"),c=require("./components/typing-animation/index.js"),u=require("./components/qr-code/index.js"),t=require("./components/confetti-button/index.js"),a=require("./hooks/useStayTimeReport.js"),s=require("./components/pinch-content/PinchContent.js"),T=require("./components/image-viewer/ImageViewer.js"),d=require("./components/shimmer-button/ShimmerButton.js"),m=require("./components/image-compare/ImageCompare.js"),q=require("./components/text-type/TextType.js"),x=require("./components/text-animate/TextAnimate.js"),e=require("./components/dock/Duck.js"),l=require("./components/txt-editor/TxtEditor.js"),p=require("./components/message/Message.js"),S=require("react-force-graph-3d"),g=require("canvas-confetti"),y=require("./components/pointer/Pointer.js"),B=require("./components/sparkles-text/SparklesText.js"),h=require("./components/blur-fade/BlurFade.js"),C=require("./components/video-dialog/VideoDialog.js"),f=require("./components/comic-text/ComicText.js"),R=require("./components/flip-text/FlipText.js"),r=require("./components/animated-list/AnimatedList.js"),k=require("./components/shiny-button/ShinyButton.js"),A=require("./components/scratch-to-reveal/ScratchToReveal.js"),D=require("./components/split-text/SplitText.js");exports.Button=i.Button;exports.TxtReader=o.TxtReader;exports.HyperText=n.HyperText;exports.TypingAnimation=c.TypingAnimation;exports.QRCode=u.QRCode;exports.Confetti=t.Confetti;exports.ConfettiButton=t.ConfettiButton;exports.useStayTimeReport=a.useStayTimeReport;exports.PinchContent=s.default;exports.ImageViewer=T.default;exports.ShimmerButton=d.ShimmerButton;exports.ImageCompare=m.default;exports.TextType=q.default;exports.TextAnimate=x.TextAnimate;exports.Dock=e.Dock;exports.DockIcon=e.DockIcon;exports.dockVariants=e.dockVariants;exports.TxtEditor=l.TxtEditor;exports.Message=p.Message;exports.ForceGraph3D=S;exports.confetti=g;exports.Pointer=y.Pointer;exports.SparklesText=B.SparklesText;exports.BlurFade=h.BlurFade;exports.VideoDialog=C.VideoDialog;exports.ComicText=f.ComicText;exports.FlipText=R.FlipText;exports.AnimatedList=r.AnimatedList;exports.AnimatedListItem=r.AnimatedListItem;exports.ShinyButton=k.ShinyButton;exports.ScratchToReveal=A.ScratchToReveal;exports.SplitText=D.SplitText;
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"),n=require("./components/hyper-text/index.js"),a=require("./components/typing-animation/index.js"),u=require("./components/qr-code/index.js"),t=require("./components/confetti-button/index.js"),c=require("./components/gradient-text/index.js"),s=require("./components/variable-proximity/index.js"),T=require("./hooks/useStayTimeReport.js"),d=require("./components/pinch-content/PinchContent.js"),l=require("./components/image-viewer/ImageViewer.js"),x=require("./components/shimmer-button/ShimmerButton.js"),m=require("./components/image-compare/ImageCompare.js"),q=require("./components/text-type/TextType.js"),p=require("./components/text-animate/TextAnimate.js"),e=require("./components/dock/Duck.js"),S=require("./components/txt-editor/TxtEditor.js"),y=require("./components/message/Message.js"),g=require("react-force-graph-3d"),B=require("canvas-confetti"),h=require("./components/pointer/Pointer.js"),C=require("./components/sparkles-text/SparklesText.js"),f=require("./components/blur-fade/BlurFade.js"),P=require("./components/video-dialog/VideoDialog.js"),R=require("./components/comic-text/ComicText.js"),k=require("./components/flip-text/FlipText.js"),i=require("./components/animated-list/AnimatedList.js"),A=require("./components/shiny-button/ShinyButton.js"),D=require("./components/scratch-to-reveal/ScratchToReveal.js"),V=require("./components/split-text/SplitText.js"),F=require("./components/subtitle-player/SubtitlePlayer.js");exports.Button=r.Button;exports.TxtReader=o.TxtReader;exports.HyperText=n.HyperText;exports.TypingAnimation=a.TypingAnimation;exports.QRCode=u.QRCode;exports.Confetti=t.Confetti;exports.ConfettiButton=t.ConfettiButton;exports.GradientText=c.default;exports.VariableProximity=s.VariableProximity;exports.useStayTimeReport=T.useStayTimeReport;exports.PinchContent=d.default;exports.ImageViewer=l.default;exports.ShimmerButton=x.ShimmerButton;exports.ImageCompare=m.default;exports.TextType=q.default;exports.TextAnimate=p.TextAnimate;exports.Dock=e.Dock;exports.DockIcon=e.DockIcon;exports.dockVariants=e.dockVariants;exports.TxtEditor=S.TxtEditor;exports.Message=y.Message;exports.ForceGraph3D=g;exports.confetti=B;exports.Pointer=h.Pointer;exports.SparklesText=C.SparklesText;exports.BlurFade=f.BlurFade;exports.VideoDialog=P.VideoDialog;exports.ComicText=R.ComicText;exports.FlipText=k.FlipText;exports.AnimatedList=i.AnimatedList;exports.AnimatedListItem=i.AnimatedListItem;exports.ShinyButton=A.ShinyButton;exports.ScratchToReveal=D.ScratchToReveal;exports.SplitText=V.SplitText;exports.SubtitlePlayer=F.SubtitlePlayer;