@chao-component/bag-animation-ui 1.0.9 → 1.0.11

package/README.md

@@ -0,0 +1,40 @@
+# Bag Animation UI
+
+一个用于显示 APNG 动画的 React 组件，支持全屏遮罩和交互式拖拽。
+
+## 开发
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 开发模式（预览组件效果）
+
+```bash
+npm run demo
+```
+
+这会在 `http://localhost:3000` 启动开发服务器，你可以在浏览器中实时预览组件效果。
+
+### 构建组件
+
+```bash
+npm run build
+```
+
+### 构建演示页面
+
+```bash
+npm run demo:build
+```
+
+## 使用
+
+查看 [USAGE.md](./USAGE.md) 了解详细使用说明。
+
+## 快速开始
+
+查看 [QUICK_START.md](./QUICK_START.md) 了解快速开始指南。
+

package/dist/index.d.mts

@@ -6,11 +6,12 @@ interface BagAnimationProps {
     defaultImage?: string;
     defaultImageAlt?: string;
     swipeHintText?: string;
+    boxOpeningText?: string;
     showMask?: boolean;
     maskOpacity?: number;
     maskBlur?: number;
 }
-declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
+declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, boxOpeningText, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
 
 /**
  * 获取打包后的资源路径

package/dist/index.d.ts

@@ -6,11 +6,12 @@ interface BagAnimationProps {
     defaultImage?: string;
     defaultImageAlt?: string;
     swipeHintText?: string;
+    boxOpeningText?: string;
     showMask?: boolean;
     maskOpacity?: number;
     maskBlur?: number;
 }
-declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
+declare function BagAnimation({ doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText, boxOpeningText, showMask, maskOpacity, maskBlur }: BagAnimationProps): react_jsx_runtime.JSX.Element;
 
 /**
  * 获取打包后的资源路径

package/dist/index.js

@@ -807,6 +807,7 @@ function BagAnimation({
   defaultImage = defaultImagePath,
   defaultImageAlt = "Weedza Mystery Box",
   swipeHintText = "Swipe to open",
+  boxOpeningText = "Box Opening...",
   showMask = true,
   maskOpacity = 0.7,
   maskBlur = 8
@@ -1029,7 +1030,7 @@ function BagAnimation({
       setShowSwipeHint(true);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full relative justify-center items-center", children: [
     isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       showMask && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
@@ -1135,9 +1136,10 @@ function BagAnimation({
             }
           )
         }
-      )
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed z-[101] top-0 left-0 w-full h-[10%] flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-theme_gold animate-pulse text-sm md:text-base text-center z-[101]", children: boxOpeningText }) })
     ] }),
-    !isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "img",
       {
         src: mysteryBoxImage,
@@ -1148,7 +1150,7 @@ function BagAnimation({
         className: "w-36 h-36 md:w-96 md:h-96 object-contain relative z-10"
       }
     )
-  ] });
+  ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -791,6 +791,7 @@ function BagAnimation({
   defaultImage = defaultImagePath,
   defaultImageAlt = "Weedza Mystery Box",
   swipeHintText = "Swipe to open",
+  boxOpeningText = "Box Opening...",
   showMask = true,
   maskOpacity = 0.7,
   maskBlur = 8
@@ -1013,7 +1014,7 @@ function BagAnimation({
       setShowSwipeHint(true);
     }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex w-full relative justify-center items-center", children: [
     isAnimating && /* @__PURE__ */ jsxs(Fragment, { children: [
       showMask && /* @__PURE__ */ jsx(
         "div",
@@ -1119,9 +1120,10 @@ function BagAnimation({
             }
           )
         }
-      )
+      ),
+      /* @__PURE__ */ jsx("div", { className: "fixed z-[101] top-0 left-0 w-full h-[10%] flex justify-center items-center", children: /* @__PURE__ */ jsx("p", { className: "text-theme_gold animate-pulse text-sm md:text-base text-center z-[101]", children: boxOpeningText }) })
     ] }),
-    !isAnimating && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       "img",
       {
         src: mysteryBoxImage,
@@ -1132,7 +1134,7 @@ function BagAnimation({
         className: "w-36 h-36 md:w-96 md:h-96 object-contain relative z-10"
       }
     )
-  ] });
+  ] }) });
 }
 export {
   BagAnimation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chao-component/bag-animation-ui",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -24,7 +24,9 @@
   },
   "scripts": {
     "build": "tsup",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "demo": "vite --config vite.config.demo.ts",
+    "demo:build": "vite build --config vite.config.demo.ts"
   },
   "keywords": [],
   "author": "",
@@ -39,6 +41,13 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^5.0.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0"
   }
 }