@xiping/react-components 1.0.33 → 1.0.35

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { cn as s } from "../../utils/utils.js";
+import { motion as o } from "motion/react";
+import l from "react";
+const p = {
+  initial: { "--x": "100%", scale: 0.8 },
+  animate: { "--x": "-100%", scale: 1 },
+  whileTap: { scale: 0.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: 0.5
+    }
+  }
+}, c = l.forwardRef(({ children: a, className: e, ...t }, i) => /* @__PURE__ */ n(
+  o.button,
+  {
+    ref: i,
+    className: s(
+      "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%]",
+      e
+    ),
+    ...p,
+    ...t,
+    children: [
+      /* @__PURE__ */ r(
+        "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: a
+        }
+      ),
+      /* @__PURE__ */ r(
+        "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"
+        }
+      )
+    ]
+  }
+));
+c.displayName = "ShinyButton";
+export {
+  c as ShinyButton
+};

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

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

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

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

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

@@ -1,55 +1,59 @@
 /* empty css          */
-import { Button as r } from "./components/button/Button.js";
+import { Button as e } from "./components/button/Button.js";
 import { TxtReader as f } from "./components/txt-reader/TxtReader.js";
 import { HyperText as x } from "./components/hyper-text/index.js";
 import { TypingAnimation as i } from "./components/typing-animation/index.js";
 import { QRCode as d } from "./components/qr-code/index.js";
-import { Confetti as u, ConfettiButton as l } from "./components/confetti-button/index.js";
-import { useStayTimeReport as c } from "./hooks/useStayTimeReport.js";
+import { Confetti as u, ConfettiButton as c } from "./components/confetti-button/index.js";
+import { useStayTimeReport as T } from "./hooks/useStayTimeReport.js";
 import { default as g } from "./components/pinch-content/PinchContent.js";
-import { default as A } from "./components/image-viewer/ImageViewer.js";
-import { ShimmerButton as D } from "./components/shimmer-button/ShimmerButton.js";
-import { default as h } from "./components/image-compare/ImageCompare.js";
-import { TextAnimate as F } from "./components/text-animate/TextAnimate.js";
-import { Dock as S, DockIcon as V, dockVariants as L } from "./components/dock/Duck.js";
-import { TxtEditor as w } from "./components/txt-editor/TxtEditor.js";
-import { Message as G } from "./components/message/Message.js";
-import { default as M } from "react-force-graph-3d";
-import { default as b } from "canvas-confetti";
-import { Pointer as q } from "./components/pointer/Pointer.js";
+import { default as B } from "./components/image-viewer/ImageViewer.js";
+import { ShimmerButton as k } from "./components/shimmer-button/ShimmerButton.js";
+import { default as A } from "./components/image-compare/ImageCompare.js";
+import { TextAnimate as I } from "./components/text-animate/TextAnimate.js";
+import { Dock as F, DockIcon as V, dockVariants as L } from "./components/dock/Duck.js";
+import { TxtEditor as v } from "./components/txt-editor/TxtEditor.js";
+import { Message as E } from "./components/message/Message.js";
+import { default as H } from "react-force-graph-3d";
+import { default as Q } from "canvas-confetti";
+import { Pointer as j } from "./components/pointer/Pointer.js";
 import { SparklesText as z } from "./components/sparkles-text/SparklesText.js";
 import { BlurFade as K } from "./components/blur-fade/BlurFade.js";
 import { VideoDialog as O } from "./components/video-dialog/VideoDialog.js";
 import { ComicText as W } from "./components/comic-text/ComicText.js";
 import { FlipText as Y } from "./components/flip-text/FlipText.js";
 import { AnimatedList as _, AnimatedListItem as $ } from "./components/animated-list/AnimatedList.js";
+import { ShinyButton as to } from "./components/shiny-button/ShinyButton.js";
+import { ScratchToReveal as eo } from "./components/scratch-to-reveal/ScratchToReveal.js";
 export {
   _ as AnimatedList,
   $ as AnimatedListItem,
   K as BlurFade,
-  r as Button,
+  e as Button,
   W as ComicText,
   u as Confetti,
-  l as ConfettiButton,
-  S as Dock,
+  c as ConfettiButton,
+  F as Dock,
   V as DockIcon,
   Y as FlipText,
-  M as ForceGraph3D,
+  H as ForceGraph3D,
   x as HyperText,
-  h as ImageCompare,
-  A as ImageViewer,
-  G as Message,
+  A as ImageCompare,
+  B as ImageViewer,
+  E as Message,
   g as PinchContent,
-  q as Pointer,
+  j as Pointer,
   d as QRCode,
-  D as ShimmerButton,
+  eo as ScratchToReveal,
+  k as ShimmerButton,
+  to as ShinyButton,
   z as SparklesText,
-  F as TextAnimate,
-  w as TxtEditor,
+  I as TextAnimate,
+  v as TxtEditor,
   f as TxtReader,
   i as TypingAnimation,
   O as VideoDialog,
-  b as confetti,
+  Q as confetti,
   L as dockVariants,
-  c as useStayTimeReport
+  T as useStayTimeReport
 };

package/dist/es/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 应用开发中的各种需求。所有组件都经过精心设计，具有良好的性能和用户体验。