@xiping/react-components 1.0.33 → 1.0.35

package/README.md

@@ -11,3 +11,5 @@ yarn add @xiping/react-components
 // or
 pnpm add @xiping/react-components
 ```
+
+[Document & Demo](https://xiping-react-components.vercel.app/)

package/dist/cjs/components/dock/index.d.ts

@@ -1 +1 @@
-export * from './Duck.tsx';
+export * from './Duck';

package/dist/cjs/components/image-viewer/ImageViewer.d.ts

@@ -1,10 +1,15 @@
 interface ImageViewerProps {
+    wrapperClassName?: string;
+    toolWrapperClassName?: string;
+    closeClassName?: string;
+    downloadClassName?: string;
     isOpen: boolean;
     imgSrc: string | string[];
+    thumbnailImages?: string[];
     onClose: () => void;
     canDownload?: boolean;
-    wrapperClassName?: string;
-    closeClassName?: string;
+    /** 初始选中的图片下标，默认为 0。当只有一张图片时此参数无意义 */
+    initialIndex?: number;
 }
 declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageViewer;

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

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

package/dist/cjs/components/message/index.d.ts

@@ -1 +1 @@
-export * from './Message.tsx';
+export * from './Message';

package/dist/cjs/components/scratch-to-reveal/ScratchToReveal.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),P=require("../../utils/utils.js"),x=require("motion/react"),a=require("react"),b=({width:m,height:h,minScratchPercentage:E=50,onComplete:v,children:M,className:L,gradientColors:i=["#A97CF8","#F38CB8","#FDCC92"]})=>{const r=a.useRef(null),[d,u]=a.useState(!1),[y,C]=a.useState(!1),f=x.useAnimation();a.useEffect(()=>{const e=r.current,t=e?.getContext("2d");if(e&&t){t.fillStyle="#ccc",t.fillRect(0,0,e.width,e.height);const o=t.createLinearGradient(0,0,e.width,e.height);o.addColorStop(0,i[0]),o.addColorStop(.5,i[1]),o.addColorStop(1,i[2]),t.fillStyle=o,t.fillRect(0,0,e.width,e.height)}},[i]),a.useEffect(()=>{const e=c=>{d&&g(c.clientX,c.clientY)},t=c=>{if(!d)return;const s=c.touches[0];g(s.clientX,s.clientY)},o=()=>{u(!1),I()},n=()=>{u(!1),I()};return document.addEventListener("mousedown",e),document.addEventListener("mousemove",e),document.addEventListener("touchstart",t),document.addEventListener("touchmove",t),document.addEventListener("mouseup",o),document.addEventListener("touchend",n),document.addEventListener("touchcancel",n),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("mousemove",e),document.removeEventListener("touchstart",t),document.removeEventListener("touchmove",t),document.removeEventListener("mouseup",o),document.removeEventListener("touchend",n),document.removeEventListener("touchcancel",n)}},[d]);const D=()=>u(!0),w=()=>u(!0),g=(e,t)=>{const o=r.current,n=o?.getContext("2d");if(o&&n){const c=o.getBoundingClientRect(),s=e-c.left+16,S=t-c.top+16;n.globalCompositeOperation="destination-out",n.beginPath(),n.arc(s,S,30,0,Math.PI*2),n.fill()}},R=async()=>{await f.start({scale:[1,1.5,1],rotate:[0,10,-10,10,-10,0],transition:{duration:.5}}),v&&v()},I=()=>{if(y)return;const e=r.current,t=e?.getContext("2d");if(e&&t){const n=t.getImageData(0,0,e.width,e.height).data,c=n.length/4;let s=0;for(let l=3;l<n.length;l+=4)n[l]===0&&s++;s/c*100>=E&&(C(!0),t.clearRect(0,0,e.width,e.height),R())}};return p.jsxs(x.motion.div,{className:P.cn("relative select-none",L),style:{width:m,height:h,cursor:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto"},animate:f,children:[p.jsx("canvas",{ref:r,width:m,height:h,className:"absolute left-0 top-0",onMouseDown:D,onTouchStart:w}),M]})};exports.ScratchToReveal=b;

package/dist/cjs/components/shiny-button/ShinyButton.d.ts

@@ -0,0 +1,8 @@
+import { MotionProps } from 'motion/react';
+import { default as React } from 'react';
+interface ShinyButtonProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>, MotionProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const ShinyButton: React.ForwardRefExoticComponent<ShinyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/components/shiny-button/ShinyButton.js

@@ -0,0 +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;

package/dist/cjs/components/shiny-button/index.d.ts

@@ -0,0 +1 @@
+export { ShinyButton } from './ShinyButton.tsx';

package/dist/cjs/components/sparkles-text/index.d.ts

@@ -1,2 +1,2 @@
-import { SparklesText } from './SparklesText.tsx';
+import { SparklesText } from './SparklesText';
 export { SparklesText };

package/dist/cjs/components/txt-editor/index.d.ts

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

package/dist/cjs/index.d.ts

@@ -21,3 +21,5 @@ export * from './components/video-dialog';
 export * from './components/comic-text';
 export * from './components/flip-text';
 export * from './components/animated-list';
+export * from './components/shiny-button';
+export * from './components/scratch-to-reveal';

package/dist/cjs/index.js

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

package/dist/cjs/llms.txt

@@ -0,0 +1,296 @@
+# @xiping/react-components - React 组件库
+
+## 项目概述
+
+这是一个功能丰富的 React 组件库，提供了 20+ 个现代化的 UI 组件，涵盖了动画效果、交互组件、数据可视化、文本处理等多个领域。所有组件都基于 React 19+ 构建，支持 TypeScript，并提供了完整的 Storybook 文档。
+
+## 核心特性
+
+- 🎨 **现代化设计**: 基于 HeroUI 和 Tailwind CSS 的现代 UI 设计
+- ⚡ **高性能**: 使用 React 19+ 和优化的动画库
+- 🎯 **TypeScript**: 完整的 TypeScript 支持
+- 📱 **响应式**: 所有组件都支持响应式设计
+- 🎭 **动画丰富**: 集成 Framer Motion 和多种动画效果
+- 📚 **完整文档**: 提供 Storybook 文档和详细的使用示例
+- 🔧 **高度可定制**: 支持主题、样式和行为的深度定制
+
+## 组件列表
+
+### 1. 动画组件
+
+#### AnimatedList
+- **功能**: 带有动画效果的列表组件，逐个显示列表项目
+- **特性**: 缩放和透明度动画，可自定义延迟时间
+- **使用场景**: 列表展示、导航菜单、卡片列表
+
+#### ConfettiButton
+- **功能**: 带有烟花效果的按钮组件
+- **特性**: 基于 canvas-confetti，支持自定义烟花配置
+- **使用场景**: 庆祝按钮、成功反馈、特殊交互
+
+#### ShimmerButton
+- **功能**: 带有闪烁效果的按钮组件
+- **特性**: 流光动画效果，现代化设计
+- **使用场景**: 主要操作按钮、吸引注意力的交互
+
+#### ShinyButton
+- **功能**: 带有光泽效果的按钮组件
+- **特性**: 金属质感，光泽动画
+- **使用场景**: 特殊按钮、装饰性元素
+
+### 2. 文本组件
+
+#### TypingAnimation
+- **功能**: 打字机动画效果组件
+- **特性**: 模拟打字效果，可控制速度
+- **使用场景**: 欢迎页面、介绍文字、动态内容
+
+#### TextAnimate
+- **功能**: 文本动画组件
+- **特性**: 多种文本动画效果
+- **使用场景**: 标题动画、强调文字
+
+#### FlipText
+- **功能**: 翻转文字动画组件
+- **特性**: 3D 翻转效果
+- **使用场景**: 状态切换、动态显示
+
+#### ComicText
+- **功能**: 漫画风格文字组件
+- **特性**: 漫画气泡效果
+- **使用场景**: 对话界面、游戏界面
+
+#### SparklesText
+- **功能**: 闪烁文字组件
+- **特性**: 星星闪烁效果
+- **使用场景**: 特殊标题、装饰文字
+
+#### MorphingText
+- **功能**: 文字变形动画组件
+- **特性**: 文字形状变化动画
+- **使用场景**: 创意标题、动态文字
+
+#### HyperText
+- **功能**: 超文本组件
+- **特性**: 支持链接和格式化
+- **使用场景**: 富文本显示、文档展示
+
+### 3. 媒体组件
+
+#### ImageViewer
+- **功能**: 图片查看器组件
+- **特性**: 支持缩放、旋转、缩略图、下载
+- **使用场景**: 图片画廊、产品展示、媒体查看
+
+#### ImageCompare
+- **功能**: 图片对比组件
+- **特性**: 滑块对比、并排显示
+- **使用场景**: 产品对比、效果展示
+
+#### VideoDialog
+- **功能**: 视频对话框组件
+- **特性**: 模态框播放、控制栏
+- **使用场景**: 视频播放、媒体展示
+
+### 4. 交互组件
+
+#### PinchContent
+- **功能**: 支持捏合缩放的容器组件
+- **特性**: 触摸手势支持、缩放控制
+- **使用场景**: 图片查看、地图交互
+
+#### ScratchToReveal
+- **功能**: 刮刮卡效果组件
+- **特性**: 刮擦显示内容
+- **使用场景**: 游戏、抽奖、隐藏内容
+
+#### Pointer
+- **功能**: 自定义指针组件
+- **特性**: 自定义鼠标指针效果
+- **使用场景**: 特殊交互、游戏界面
+
+#### Dock
+- **功能**: 停靠栏组件
+- **特性**: macOS 风格的停靠栏
+- **使用场景**: 应用启动器、快捷方式
+
+### 5. 数据可视化
+
+#### ForceGraph3D
+- **功能**: 3D 力导向图组件
+- **特性**: 基于 Three.js，支持节点拖拽、缩放、旋转
+- **使用场景**: 网络关系图、数据可视化、知识图谱
+
+### 6. 文本处理
+
+#### TxtReader
+- **功能**: 文本阅读器组件
+- **特性**: 支持大文件、分页显示、阅读进度
+- **使用场景**: 文档阅读、小说阅读器
+
+#### TxtEditor
+- **功能**: 文本编辑器组件
+- **特性**: 基于 Monaco Editor，语法高亮、代码编辑
+- **使用场景**: 代码编辑、文本编辑、配置编辑
+
+### 7. 工具组件
+
+#### QRCode
+- **功能**: 二维码生成组件
+- **特性**: 支持自定义颜色、大小、错误纠正级别
+- **使用场景**: 分享链接、支付码、信息展示
+
+#### Message
+- **功能**: 消息提示组件
+- **特性**: 多种消息类型、自动消失
+- **使用场景**: 用户反馈、状态提示
+
+#### Toast
+- **功能**: 轻提示组件
+- **特性**: 非阻塞式提示
+- **使用场景**: 操作反馈、临时信息
+
+### 8. 特效组件
+
+#### BlurFade
+- **功能**: 模糊淡入淡出组件
+- **特性**: 背景模糊效果
+- **使用场景**: 模态框、焦点效果
+
+## 技术栈
+
+### 核心依赖
+- **React**: 19.1.0 - 核心框架
+- **TypeScript**: 5.8.3 - 类型支持
+- **Vite**: 7.0.6 - 构建工具
+
+### UI 框架
+- **HeroUI**: 2.8.1 - UI 组件库
+- **Tailwind CSS**: 3.4.17 - 样式框架
+- **Lucide React**: 0.525.0 - 图标库
+
+### 动画库
+- **Framer Motion**: 12.23.9 - 动画库
+- **React Spring**: 10.0.1 - 物理动画
+- **Canvas Confetti**: 1.9.3 - 烟花效果
+
+### 编辑器
+- **Monaco Editor**: 4.7.0 - 代码编辑器
+- **React Markdown**: 10.1.0 - Markdown 渲染
+
+### 可视化
+- **React Force Graph 3D**: 1.28.0 - 3D 图表
+- **Three.js** - 3D 渲染
+
+### 工具库
+- **Axios**: 1.11.0 - HTTP 客户端
+- **Day.js**: 1.11.13 - 日期处理
+- **Lodash-es**: 4.17.21 - 工具函数
+- **Zustand**: 5.0.6 - 状态管理
+
+## 安装和使用
+
+### 安装
+```bash
+npm install @xiping/react-components
+```
+
+### 基本使用
+```tsx
+import { AnimatedList, ConfettiButton, QRCode } from '@xiping/react-components';
+
+function App() {
+  return (
+    <div>
+      <AnimatedList delay={800}>
+        <div>项目 1</div>
+        <div>项目 2</div>
+      </AnimatedList>
+      
+      <ConfettiButton>
+        点击触发烟花 🎉
+      </ConfettiButton>
+      
+      <QRCode value="https://example.com" size={128} />
+    </div>
+  );
+}
+```
+
+## 开发环境
+
+### 脚本命令
+- `npm run dev` - 启动开发服务器
+- `npm run build` - 构建生产版本
+- `npm run storybook` - 启动 Storybook 文档
+- `npm run lint` - 代码检查
+
+### 开发要求
+- Node.js >= 22
+- React >= 18
+- TypeScript >= 5.8
+
+## 文档和示例
+
+### Storybook 文档
+每个组件都提供了完整的 Storybook 文档，包括：
+- 基本用法示例
+- 属性配置说明
+- 交互演示
+- 代码示例
+
+### 组件文档
+每个组件都有详细的 README 文档，包含：
+- 功能描述
+- API 文档
+- 使用示例
+- 注意事项
+
+## 性能优化
+
+### 组件优化
+- 使用 React.memo 进行组件优化
+- 合理使用 useMemo 和 useCallback
+- 动画使用 CSS transform 和 opacity
+
+### 构建优化
+- Tree shaking 支持
+- 按需加载
+- 代码分割
+- 图片优化
+
+## 浏览器支持
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## 许可证
+
+MIT License
+
+## 贡献指南
+
+1. Fork 项目
+2. 创建功能分支
+3. 提交更改
+4. 推送到分支
+5. 创建 Pull Request
+
+## 更新日志
+
+### v1.0.33
+- 新增 AnimatedList 组件
+- 优化 ConfettiButton 性能
+- 修复 ImageViewer 移动端问题
+- 更新依赖版本
+
+## 联系方式
+
+- GitHub: https://github.com/xiping
+- NPM: https://www.npmjs.com/package/@xiping/react-components
+
+---
+
+这个组件库提供了丰富的 React 组件，涵盖了现代 Web 应用开发中的各种需求。所有组件都经过精心设计，具有良好的性能和用户体验。