@anker-in/headless-ui 1.0.25 → 1.0.26-alpha.111003

package/dist/esm/src/stories/text.stories.d.ts

@@ -0,0 +1,94 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../components/text.js").TextProps & React.RefAttributes<HTMLSpanElement>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            description: string;
+            options: (string | number)[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        weight: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        align: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            table: {
+                defaultValue: {
+                    summary: undefined;
+                };
+            };
+        };
+        color: {
+            control: {
+                type: "color";
+            };
+        };
+        as: {
+            control: {
+                type: "select";
+            };
+            description: string;
+            options: string[];
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        lineHeights: {
+            control: {
+                type: "select";
+            };
+            description: string;
+            options: string[];
+        };
+        html: {
+            type: "string";
+            description: string;
+        };
+    };
+    args: {
+        size: "none";
+        weight: "normal";
+        align: "left";
+        lineHeights: "normal";
+        html: string;
+        as: "p";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const weight: Story;
+export declare const LineHeights: Story;
+export declare const Html: Story;

package/dist/esm/src/types/props.d.ts

@@ -0,0 +1,47 @@
+export interface ComponentCommonProps {
+    style?: string;
+    event?: any;
+    condition?: any;
+    className?: string;
+    id?: string;
+    key?: string;
+}
+export type ContainerProps = {
+    containerMode?: Mode;
+    spaceY?: SpaceY;
+    spaceTop?: SpaceTop;
+    spaceBottom?: SpaceBottom;
+};
+export type Mode = 'section' | 'fragment';
+export type SpaceY = 'default' | 'none' | string;
+export type SpaceTop = 'default' | 'none' | string;
+export type SpaceBottom = 'default' | 'none' | string;
+export type Img = {
+    url: string;
+    alt?: string;
+};
+export type Video = {
+    url: string;
+};
+export type Theme = 'light' | 'dark';
+export type Shape = 'rounded' | 'square';
+export type Align = 'left' | 'center' | 'right';
+export type Media = {
+    alt: string;
+    url: string;
+    thumbnailURL: string;
+    mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
+    width?: number;
+    height?: number;
+    focalX?: number;
+    focalY?: number;
+    poster?: {
+        url: string;
+        mimeType: 'image/jpeg' | 'image/png' | 'image/webp';
+    };
+};
+export type GSAPContext = {
+    gsap?: any;
+    ScrollTrigger?: any;
+    SplitText?: any;
+};

package/dist/esm/stories/InlineVideo.stories.js

@@ -0,0 +1,167 @@
+import{jsx as i,jsxs as a}from"react/jsx-runtime";import"react";import t from"../biz-components/InlineVideo/index.js";const s={title:"Biz Components/InlineVideo",component:t,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:`
+## InlineVideo - \u5185\u8054\u89C6\u9891\u7EC4\u4EF6
+
+\u7528\u4E8E\u4EA7\u54C1\u529F\u80FD\u5C55\u793A\u7684\u54CD\u5E94\u5F0F\u89C6\u9891\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u64AD\u653E\u548C\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002
+
+### \u6838\u5FC3\u529F\u80FD
+
+- **\u54CD\u5E94\u5F0F\u89C6\u9891\u6E90**: \u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u89C6\u9891\u6E90\u548C\u6D77\u62A5\u56FE
+- **\u81EA\u52A8\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5E76\u5FAA\u73AF\uFF0C\u63D0\u4F9B\u6D41\u7545\u7684\u89C2\u770B\u4F53\u9A8C
+- **\u4E30\u5BCC\u7684\u5185\u5BB9\u5C55\u793A**: \u652F\u6301\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u8BE6\u7EC6\u63CF\u8FF0
+- **\u54CD\u5E94\u5F0F\u5E03\u5C40**: \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u89C6\u9891\u6BD4\u4F8B\u548C\u6587\u672C\u5E03\u5C40
+
+### \u4F7F\u7528\u573A\u666F
+
+- \u4EA7\u54C1\u7279\u6027\u4ECB\u7ECD
+- \u529F\u80FD\u6F14\u793A\u89C6\u9891
+- \u6280\u672F\u4EAE\u70B9\u5C55\u793A
+- \u4F7F\u7528\u6559\u7A0B\u8BF4\u660E
+
+### \u54CD\u5E94\u5F0F\u65AD\u70B9
+
+- **\u79FB\u52A8\u7AEF** (< 768px): 398:400 \u6BD4\u4F8B\uFF0C\u5782\u76F4\u5E03\u5C40
+- **\u5E73\u677F\u7AEF** (\u2265 768px): 3060:1180 \u6BD4\u4F8B\uFF0C\u5C45\u4E2D\u5E03\u5C40
+- **\u684C\u9762\u7AEF** (\u2265 1024px): \u56FA\u5B9A\u9AD8\u5EA6 360px\uFF0C\u5C45\u4E2D\u5BF9\u9F50
+
+### \u6570\u636E\u7ED3\u6784
+
+\`\`\`typescript
+{
+  title: string        // \u4E3B\u6807\u9898\uFF08\u5FC5\u586B\uFF09
+  subtitle?: string    // \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09
+  desc: string         // \u63CF\u8FF0\u6587\u672C\uFF08\u5FC5\u586B\uFF09
+  poster?: string      // \u684C\u9762\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09
+  videoUrl: string     // \u684C\u9762\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09
+  mobPoster?: string   // \u79FB\u52A8\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09
+  mobVideoUrl: string  // \u79FB\u52A8\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09
+  theme?: 'light' | 'dark'  // \u4E3B\u9898\u6A21\u5F0F\uFF08\u53EF\u9009\uFF0C\u9ED8\u8BA4 'light'\uFF09
+}
+\`\`\`
+
+### \u89C6\u9891\u7279\u6027
+
+- **\u9759\u97F3\u64AD\u653E**: \u9ED8\u8BA4\u9759\u97F3\uFF0C\u7B26\u5408\u7528\u6237\u4F53\u9A8C\u6700\u4F73\u5B9E\u8DF5
+- **\u5FAA\u73AF\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u5FAA\u73AF\uFF0C\u6301\u7EED\u5C55\u793A\u4EA7\u54C1\u7279\u6027
+- **\u5185\u8054\u64AD\u653E**: \u4F7F\u7528 \`playsInline\` \u5C5E\u6027\uFF0C\u907F\u514D\u5168\u5C4F\u64AD\u653E
+- **\u5706\u89D2\u8BBE\u8BA1**: 16px \u5706\u89D2\uFF0C\u4E0E\u73B0\u4EE3\u8BBE\u8BA1\u98CE\u683C\u4E00\u81F4
+
+### \u4E3B\u9898\u6A21\u5F0F
+
+\u7EC4\u4EF6\u652F\u6301\u6D45\u8272\u548C\u6DF1\u8272\u4E24\u79CD\u4E3B\u9898\u6A21\u5F0F\uFF1A
+
+- **\u6D45\u8272\u6A21\u5F0F** (\`theme: 'light'\`): \u9ED8\u8BA4\u6A21\u5F0F\uFF0C\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F
+- **\u6DF1\u8272\u6A21\u5F0F** (\`theme: 'dark'\`): \u6DF1\u8272\u6A21\u5F0F\uFF0C\u4F7F\u7528 \`aiui-dark\` \u7C7B\uFF0C\u6587\u672C\u989C\u8272\u81EA\u52A8\u9002\u914D
+
+\u6587\u672C\u989C\u8272\u4F7F\u7528 Tailwind CSS \u7684\u4E3B\u9898\u53D8\u91CF \`text-info-primary\`\uFF0C\u4F1A\u6839\u636E \`.aiui-dark\` \u7C7B\u81EA\u52A8\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\u7684\u989C\u8272\u3002
+
+### \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D
+
+\u7EC4\u4EF6\u5185\u90E8\u5173\u952E\u8282\u70B9\u90FD\u6709\u8BED\u4E49\u5316\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A
+
+| \u7C7B\u540D | \u8BF4\u660E | \u7528\u9014 |
+|------|------|------|
+| \`.inline-video-section\` | \u6839\u5BB9\u5668 | \u6574\u4F53\u5E03\u5C40\u3001\u80CC\u666F\u3001\u95F4\u8DDD |
+| \`.inline-video-content\` | \u5185\u5BB9\u533A\u57DF | \u6587\u672C\u5185\u5BB9\u7684\u5E03\u5C40\u5BB9\u5668 |
+| \`.inline-video-title\` | \u4E3B\u6807\u9898 | \u6807\u9898\u6837\u5F0F\u3001\u5B57\u4F53\u3001\u989C\u8272 |
+| \`.inline-video-subtitle\` | \u526F\u6807\u9898 | \u526F\u6807\u9898\u6837\u5F0F\u3001\u95F4\u8DDD |
+| \`.inline-video-text-wrapper\` | \u6587\u672C\u5305\u88C5\u5668 | \u526F\u6807\u9898\u548C\u63CF\u8FF0\u7684\u5BB9\u5668 |
+| \`.inline-video-description\` | \u63CF\u8FF0\u6587\u672C | \u63CF\u8FF0\u6837\u5F0F\u3001\u884C\u9AD8\u3001\u5BBD\u5EA6 |
+| \`.inline-video-container\` | \u89C6\u9891\u5BB9\u5668 | \u89C6\u9891\u5BBD\u9AD8\u6BD4\u3001\u5706\u89D2 |
+| \`.inline-video-desktop\` | \u684C\u9762\u7AEF\u89C6\u9891 | \u684C\u9762\u7AEF\u89C6\u9891\u6837\u5F0F |
+| \`.inline-video-mobile\` | \u79FB\u52A8\u7AEF\u89C6\u9891 | \u79FB\u52A8\u7AEF\u89C6\u9891\u6837\u5F0F |
+
+### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B
+
+\`\`\`css
+/* \u4FEE\u6539\u6807\u9898\u989C\u8272 */
+.inline-video-title {
+  color: #00d4ff;
+}
+
+/* \u4FEE\u6539\u89C6\u9891\u5BB9\u5668\u5706\u89D2 */
+.inline-video-container {
+  border-radius: 24px;
+}
+
+/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u672C\u6837\u5F0F */
+.inline-video-description {
+  line-height: 1.8;
+  opacity: 0.9;
+}
+
+/* \u6DFB\u52A0\u5BB9\u5668\u80CC\u666F */
+.inline-video-section {
+  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
+  padding: 32px;
+}
+\`\`\`
+        `}}},tags:["autodocs"],argTypes:{data:{description:"\u89C6\u9891\u7EC4\u4EF6\u7684\u6570\u636E\u914D\u7F6E\u5BF9\u8C61",control:"object"},className:{description:"\u81EA\u5B9A\u4E49 CSS \u7C7B\u540D",control:"text"}}};var c=s;const e={title:"DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934",subtitle:"\u521B\u65B0\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1",desc:"DuoSpiral\u2122 \u5237\u5934\u91C7\u7528\u72EC\u7279\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1\uFF0C\u6709\u6548\u9632\u6B62\u6BDB\u53D1\u7F20\u7ED5\uFF0C\u4E3A\u60A8\u63D0\u4F9B\u65E0\u5FE7\u7684\u6E05\u6D01\u4F53\u9A8C\u3002\u5148\u8FDB\u7684\u5DE5\u7A0B\u8BBE\u8BA1\u786E\u4FDD\u6BCF\u6B21\u4F7F\u7528\u90FD\u80FD\u83B7\u5F97\u6700\u4F73\u7684\u6E05\u6D01\u6548\u679C\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"},p={name:"\u9ED8\u8BA4\u793A\u4F8B",args:{data:e},parameters:{docs:{description:{story:"\u5B8C\u6574\u914D\u7F6E\u7684\u89C6\u9891\u7EC4\u4EF6\u793A\u4F8B\uFF0C\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u3001\u63CF\u8FF0\u6587\u672C\u3001\u6D77\u62A5\u56FE\u548C\u89C6\u9891\u6E90\u3002\u5C55\u793A\u4E86\u7EC4\u4EF6\u7684\u6240\u6709\u53EF\u7528\u529F\u80FD\u3002"}}}},l={name:"\u65E0\u526F\u6807\u9898",args:{data:{title:"\u9AD8\u6548\u6E05\u6D01\u6280\u672F",desc:"\u4F53\u9A8C\u6211\u4EEC\u6700\u65B0\u7684\u6E05\u6D01\u521B\u65B0\u6280\u672F\uFF0C\u4E3A\u60A8\u7684\u5BB6\u5C45\u6E05\u6D01\u5E26\u6765\u9769\u547D\u6027\u7684\u6539\u53D8\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u7701\u7565\u526F\u6807\u9898\u7684\u7B80\u5316\u7248\u672C\u3002\u9002\u7528\u4E8E\u5185\u5BB9\u8F83\u5C11\u6216\u5F3A\u8C03\u4E3B\u6807\u9898\u7684\u573A\u666F\uFF0C\u4FDD\u6301\u9875\u9762\u7B80\u6D01\u6E05\u6670\u3002"}}}},m={name:"\u65E0\u6D77\u62A5\u56FE",args:{data:{title:"\u65E0\u6D77\u62A5\u56FE\u7247",subtitle:"\u7EAF\u89C6\u9891\u5C55\u793A",desc:"\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7247\u7684\u89C6\u9891\u5C55\u793A\uFF0C\u76F4\u63A5\u64AD\u653E\u89C6\u9891\u5185\u5BB9\u3002",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7684\u793A\u4F8B\u3002\u89C6\u9891\u4F1A\u76F4\u63A5\u663E\u793A\u7B2C\u4E00\u5E27\u5185\u5BB9\uFF0C\u9002\u7528\u4E8E\u4E0D\u9700\u8981\u81EA\u5B9A\u4E49\u6D77\u62A5\u56FE\u6216\u5E0C\u671B\u5FEB\u901F\u52A0\u8F7D\u7684\u573A\u666F\u3002"}}}},f={name:"\u957F\u63CF\u8FF0\u6587\u672C",args:{data:{title:"\u4EA7\u54C1\u529F\u80FD\u8BE6\u7EC6\u4ECB\u7ECD",subtitle:"\u5168\u9762\u4E86\u89E3\u4EA7\u54C1\u7279\u6027",desc:"\u6211\u4EEC\u7684\u4EA7\u54C1\u91C7\u7528\u6700\u5148\u8FDB\u7684\u6280\u672F\u548C\u6750\u6599\uFF0C\u7ECF\u8FC7\u4E25\u683C\u7684\u8D28\u91CF\u63A7\u5236\u548C\u6D4B\u8BD5\u3002\u6BCF\u4E2A\u7EC6\u8282\u90FD\u7ECF\u8FC7\u7CBE\u5FC3\u8BBE\u8BA1\uFF0C\u786E\u4FDD\u4E3A\u7528\u6237\u63D0\u4F9B\u6700\u4F73\u7684\u4F7F\u7528\u4F53\u9A8C\u3002\u4ECE\u5916\u89C2\u8BBE\u8BA1\u5230\u5185\u90E8\u7ED3\u6784\uFF0C\u4ECE\u529F\u80FD\u5B9E\u73B0\u5230\u7528\u6237\u754C\u9762\uFF0C\u6BCF\u4E00\u4E2A\u73AF\u8282\u90FD\u4F53\u73B0\u4E86\u6211\u4EEC\u5BF9\u54C1\u8D28\u7684\u8FFD\u6C42\u3002\u65E0\u8BBA\u60A8\u662F\u4E13\u4E1A\u7528\u6237\u8FD8\u662F\u666E\u901A\u6D88\u8D39\u8005\uFF0C\u90FD\u80FD\u5728\u6211\u4EEC\u7684\u4EA7\u54C1\u4E2D\u627E\u5230\u6EE1\u8DB3\u60A8\u9700\u6C42\u7684\u529F\u80FD\u548C\u7279\u6027\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u5C55\u793A\u8F83\u957F\u63CF\u8FF0\u6587\u672C\u7684\u6392\u7248\u6548\u679C\u3002\u7EC4\u4EF6\u4F1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u6587\u672C\u5BBD\u5EA6\u548C\u884C\u9AD8\uFF0C\u786E\u4FDD\u957F\u6587\u672C\u7684\u53EF\u8BFB\u6027\u3002\u9002\u7528\u4E8E\u9700\u8981\u8BE6\u7EC6\u8BF4\u660E\u4EA7\u54C1\u529F\u80FD\u6216\u6280\u672F\u7EC6\u8282\u7684\u573A\u666F\u3002"}}}},b={name:"\u6DF1\u8272\u4E3B\u9898",args:{data:{...e,theme:"dark"}},parameters:{backgrounds:{default:"light"},docs:{description:{story:'\u6DF1\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: "dark"` \u542F\u7528\u6DF1\u8272\u6A21\u5F0F\uFF0C\u6587\u672C\u989C\u8272\u4F1A\u81EA\u52A8\u4F7F\u7528\u6DF1\u8272\u4E3B\u9898\u7684\u914D\u8272\u65B9\u6848\u3002\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6DF1\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002'}}}},v={name:"\u6D45\u8272\u4E3B\u9898",args:{data:{...e,theme:"light"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:'\u6D45\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\uFF08\u9ED8\u8BA4\uFF09\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: "light"` \u6216\u4E0D\u8BBE\u7F6E\u4E3B\u9898\uFF08\u9ED8\u8BA4\u4E3A\u6D45\u8272\uFF09\uFF0C\u6587\u672C\u989C\u8272\u4F7F\u7528\u6D45\u8272\u4E3B\u9898\u914D\u8272\u3002\u9002\u7528\u4E8E\u6DF1\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6D45\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002'}}}},h={name:"\u81EA\u5B9A\u4E49\u6837\u5F0F",args:{data:e,className:"custom-inline-video"},parameters:{docs:{description:{story:`
+\u901A\u8FC7 className \u5C5E\u6027\u548C\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\uFF0C\u53EF\u4EE5\u8F7B\u677E\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002
+
+### \u4F7F\u7528\u65B9\u5F0F
+
+1. **\u901A\u8FC7 className prop**: \u4F20\u5165\u81EA\u5B9A\u4E49\u7C7B\u540D
+2. **\u4F7F\u7528\u5185\u7F6E\u7C7B\u540D**: \u76F4\u63A5\u8986\u76D6\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D
+
+### \u793A\u4F8B\u4EE3\u7801
+
+\`\`\`tsx
+<InlineVideo
+  data={data}
+  className="custom-inline-video"
+/>
+\`\`\`
+
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u6837\u5F0F */
+.custom-inline-video {
+  background: rgba(0, 0, 0, 0.5);
+  padding: 40px;
+  backdrop-filter: blur(10px);
+}
+
+.custom-inline-video .inline-video-title {
+  color: #00d4ff;
+  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+}
+
+.custom-inline-video .inline-video-subtitle {
+  color: #ffd700;
+}
+
+.custom-inline-video .inline-video-container {
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  border-radius: 24px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+\`\`\`
+
+\u6B64\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u7EC4\u5408 className prop \u548C\u5185\u7F6E\u7C7B\u540D\u6765\u5B9E\u73B0\u5B8C\u5168\u81EA\u5B9A\u4E49\u7684\u89C6\u89C9\u6548\u679C\u3002
+        `}}},decorators:[o=>a("div",{children:[i("style",{children:`
+          .custom-inline-video {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 40px;
+            backdrop-filter: blur(10px);
+          }
+
+          .custom-inline-video .inline-video-title {
+            color: #00d4ff !important;
+            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+          }
+
+          .custom-inline-video .inline-video-subtitle {
+            color: #ffd700 !important;
+          }
+
+          .custom-inline-video .inline-video-description {
+            opacity: 0.9;
+            line-height: 1.8;
+          }
+
+          .custom-inline-video .inline-video-container {
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+          }
+        `}),i(o,{})]})]};export{h as CustomStyled,b as DarkTheme,p as Default,v as LightTheme,f as LongDescription,m as WithoutPosters,l as WithoutSubtitle,c as default};
+//# sourceMappingURL=InlineVideo.stories.js.map

package/dist/esm/stories/InlineVideo.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/InlineVideo.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport InlineVideo from '../biz-components/InlineVideo/index.js'\n\nconst meta = {\n  title: 'Biz Components/InlineVideo',\n  component: InlineVideo,\n  parameters: {\n    layout: 'padded',\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        component: `\n## InlineVideo - \u5185\u8054\u89C6\u9891\u7EC4\u4EF6\n\n\u7528\u4E8E\u4EA7\u54C1\u529F\u80FD\u5C55\u793A\u7684\u54CD\u5E94\u5F0F\u89C6\u9891\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u64AD\u653E\u548C\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n\n### \u6838\u5FC3\u529F\u80FD\n\n- **\u54CD\u5E94\u5F0F\u89C6\u9891\u6E90**: \u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u89C6\u9891\u6E90\u548C\u6D77\u62A5\u56FE\n- **\u81EA\u52A8\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5E76\u5FAA\u73AF\uFF0C\u63D0\u4F9B\u6D41\u7545\u7684\u89C2\u770B\u4F53\u9A8C\n- **\u4E30\u5BCC\u7684\u5185\u5BB9\u5C55\u793A**: \u652F\u6301\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u8BE6\u7EC6\u63CF\u8FF0\n- **\u54CD\u5E94\u5F0F\u5E03\u5C40**: \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u89C6\u9891\u6BD4\u4F8B\u548C\u6587\u672C\u5E03\u5C40\n\n### \u4F7F\u7528\u573A\u666F\n\n- \u4EA7\u54C1\u7279\u6027\u4ECB\u7ECD\n- \u529F\u80FD\u6F14\u793A\u89C6\u9891\n- \u6280\u672F\u4EAE\u70B9\u5C55\u793A\n- \u4F7F\u7528\u6559\u7A0B\u8BF4\u660E\n\n### \u54CD\u5E94\u5F0F\u65AD\u70B9\n\n- **\u79FB\u52A8\u7AEF** (< 768px): 398:400 \u6BD4\u4F8B\uFF0C\u5782\u76F4\u5E03\u5C40\n- **\u5E73\u677F\u7AEF** (\u2265 768px): 3060:1180 \u6BD4\u4F8B\uFF0C\u5C45\u4E2D\u5E03\u5C40\n- **\u684C\u9762\u7AEF** (\u2265 1024px): \u56FA\u5B9A\u9AD8\u5EA6 360px\uFF0C\u5C45\u4E2D\u5BF9\u9F50\n\n### \u6570\u636E\u7ED3\u6784\n\n\\`\\`\\`typescript\n{\n  title: string        // \u4E3B\u6807\u9898\uFF08\u5FC5\u586B\uFF09\n  subtitle?: string    // \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09\n  desc: string         // \u63CF\u8FF0\u6587\u672C\uFF08\u5FC5\u586B\uFF09\n  poster?: string      // \u684C\u9762\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09\n  videoUrl: string     // \u684C\u9762\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09\n  mobPoster?: string   // \u79FB\u52A8\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09\n  mobVideoUrl: string  // \u79FB\u52A8\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09\n  theme?: 'light' | 'dark'  // \u4E3B\u9898\u6A21\u5F0F\uFF08\u53EF\u9009\uFF0C\u9ED8\u8BA4 'light'\uFF09\n}\n\\`\\`\\`\n\n### \u89C6\u9891\u7279\u6027\n\n- **\u9759\u97F3\u64AD\u653E**: \u9ED8\u8BA4\u9759\u97F3\uFF0C\u7B26\u5408\u7528\u6237\u4F53\u9A8C\u6700\u4F73\u5B9E\u8DF5\n- **\u5FAA\u73AF\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u5FAA\u73AF\uFF0C\u6301\u7EED\u5C55\u793A\u4EA7\u54C1\u7279\u6027\n- **\u5185\u8054\u64AD\u653E**: \u4F7F\u7528 \\`playsInline\\` \u5C5E\u6027\uFF0C\u907F\u514D\u5168\u5C4F\u64AD\u653E\n- **\u5706\u89D2\u8BBE\u8BA1**: 16px \u5706\u89D2\uFF0C\u4E0E\u73B0\u4EE3\u8BBE\u8BA1\u98CE\u683C\u4E00\u81F4\n\n### \u4E3B\u9898\u6A21\u5F0F\n\n\u7EC4\u4EF6\u652F\u6301\u6D45\u8272\u548C\u6DF1\u8272\u4E24\u79CD\u4E3B\u9898\u6A21\u5F0F\uFF1A\n\n- **\u6D45\u8272\u6A21\u5F0F** (\\`theme: 'light'\\`): \u9ED8\u8BA4\u6A21\u5F0F\uFF0C\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\n- **\u6DF1\u8272\u6A21\u5F0F** (\\`theme: 'dark'\\`): \u6DF1\u8272\u6A21\u5F0F\uFF0C\u4F7F\u7528 \\`aiui-dark\\` \u7C7B\uFF0C\u6587\u672C\u989C\u8272\u81EA\u52A8\u9002\u914D\n\n\u6587\u672C\u989C\u8272\u4F7F\u7528 Tailwind CSS \u7684\u4E3B\u9898\u53D8\u91CF \\`text-info-primary\\`\uFF0C\u4F1A\u6839\u636E \\`.aiui-dark\\` \u7C7B\u81EA\u52A8\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\u7684\u989C\u8272\u3002\n\n### \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n\n\u7EC4\u4EF6\u5185\u90E8\u5173\u952E\u8282\u70B9\u90FD\u6709\u8BED\u4E49\u5316\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n\n| \u7C7B\u540D | \u8BF4\u660E | \u7528\u9014 |\n|------|------|------|\n| \\`.inline-video-section\\` | \u6839\u5BB9\u5668 | \u6574\u4F53\u5E03\u5C40\u3001\u80CC\u666F\u3001\u95F4\u8DDD |\n| \\`.inline-video-content\\` | \u5185\u5BB9\u533A\u57DF | \u6587\u672C\u5185\u5BB9\u7684\u5E03\u5C40\u5BB9\u5668 |\n| \\`.inline-video-title\\` | \u4E3B\u6807\u9898 | \u6807\u9898\u6837\u5F0F\u3001\u5B57\u4F53\u3001\u989C\u8272 |\n| \\`.inline-video-subtitle\\` | \u526F\u6807\u9898 | \u526F\u6807\u9898\u6837\u5F0F\u3001\u95F4\u8DDD |\n| \\`.inline-video-text-wrapper\\` | \u6587\u672C\u5305\u88C5\u5668 | \u526F\u6807\u9898\u548C\u63CF\u8FF0\u7684\u5BB9\u5668 |\n| \\`.inline-video-description\\` | \u63CF\u8FF0\u6587\u672C | \u63CF\u8FF0\u6837\u5F0F\u3001\u884C\u9AD8\u3001\u5BBD\u5EA6 |\n| \\`.inline-video-container\\` | \u89C6\u9891\u5BB9\u5668 | \u89C6\u9891\u5BBD\u9AD8\u6BD4\u3001\u5706\u89D2 |\n| \\`.inline-video-desktop\\` | \u684C\u9762\u7AEF\u89C6\u9891 | \u684C\u9762\u7AEF\u89C6\u9891\u6837\u5F0F |\n| \\`.inline-video-mobile\\` | \u79FB\u52A8\u7AEF\u89C6\u9891 | \u79FB\u52A8\u7AEF\u89C6\u9891\u6837\u5F0F |\n\n### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B\n\n\\`\\`\\`css\n/* \u4FEE\u6539\u6807\u9898\u989C\u8272 */\n.inline-video-title {\n  color: #00d4ff;\n}\n\n/* \u4FEE\u6539\u89C6\u9891\u5BB9\u5668\u5706\u89D2 */\n.inline-video-container {\n  border-radius: 24px;\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u672C\u6837\u5F0F */\n.inline-video-description {\n  line-height: 1.8;\n  opacity: 0.9;\n}\n\n/* \u6DFB\u52A0\u5BB9\u5668\u80CC\u666F */\n.inline-video-section {\n  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);\n  padding: 32px;\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    data: {\n      description: '\u89C6\u9891\u7EC4\u4EF6\u7684\u6570\u636E\u914D\u7F6E\u5BF9\u8C61',\n      control: 'object',\n    },\n    className: {\n      description: '\u81EA\u5B9A\u4E49 CSS \u7C7B\u540D',\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof InlineVideo>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData = {\n  title: 'DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934',\n  subtitle: '\u521B\u65B0\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1',\n  desc: 'DuoSpiral\u2122 \u5237\u5934\u91C7\u7528\u72EC\u7279\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1\uFF0C\u6709\u6548\u9632\u6B62\u6BDB\u53D1\u7F20\u7ED5\uFF0C\u4E3A\u60A8\u63D0\u4F9B\u65E0\u5FE7\u7684\u6E05\u6D01\u4F53\u9A8C\u3002\u5148\u8FDB\u7684\u5DE5\u7A0B\u8BBE\u8BA1\u786E\u4FDD\u6BCF\u6B21\u4F7F\u7528\u90FD\u80FD\u83B7\u5F97\u6700\u4F73\u7684\u6E05\u6D01\u6548\u679C\u3002',\n  poster:\n    'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n  videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n  mobPoster:\n    'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n  mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n}\n\nexport const Default: Story = {\n  name: '\u9ED8\u8BA4\u793A\u4F8B',\n  args: {\n    data: defaultData,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u5B8C\u6574\u914D\u7F6E\u7684\u89C6\u9891\u7EC4\u4EF6\u793A\u4F8B\uFF0C\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u3001\u63CF\u8FF0\u6587\u672C\u3001\u6D77\u62A5\u56FE\u548C\u89C6\u9891\u6E90\u3002\u5C55\u793A\u4E86\u7EC4\u4EF6\u7684\u6240\u6709\u53EF\u7528\u529F\u80FD\u3002',\n      },\n    },\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  name: '\u65E0\u526F\u6807\u9898',\n  args: {\n    data: {\n      title: '\u9AD8\u6548\u6E05\u6D01\u6280\u672F',\n      desc: '\u4F53\u9A8C\u6211\u4EEC\u6700\u65B0\u7684\u6E05\u6D01\u521B\u65B0\u6280\u672F\uFF0C\u4E3A\u60A8\u7684\u5BB6\u5C45\u6E05\u6D01\u5E26\u6765\u9769\u547D\u6027\u7684\u6539\u53D8\u3002',\n      poster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobPoster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u7701\u7565\u526F\u6807\u9898\u7684\u7B80\u5316\u7248\u672C\u3002\u9002\u7528\u4E8E\u5185\u5BB9\u8F83\u5C11\u6216\u5F3A\u8C03\u4E3B\u6807\u9898\u7684\u573A\u666F\uFF0C\u4FDD\u6301\u9875\u9762\u7B80\u6D01\u6E05\u6670\u3002',\n      },\n    },\n  },\n}\n\nexport const WithoutPosters: Story = {\n  name: '\u65E0\u6D77\u62A5\u56FE',\n  args: {\n    data: {\n      title: '\u65E0\u6D77\u62A5\u56FE\u7247',\n      subtitle: '\u7EAF\u89C6\u9891\u5C55\u793A',\n      desc: '\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7247\u7684\u89C6\u9891\u5C55\u793A\uFF0C\u76F4\u63A5\u64AD\u653E\u89C6\u9891\u5185\u5BB9\u3002',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7684\u793A\u4F8B\u3002\u89C6\u9891\u4F1A\u76F4\u63A5\u663E\u793A\u7B2C\u4E00\u5E27\u5185\u5BB9\uFF0C\u9002\u7528\u4E8E\u4E0D\u9700\u8981\u81EA\u5B9A\u4E49\u6D77\u62A5\u56FE\u6216\u5E0C\u671B\u5FEB\u901F\u52A0\u8F7D\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const LongDescription: Story = {\n  name: '\u957F\u63CF\u8FF0\u6587\u672C',\n  args: {\n    data: {\n      title: '\u4EA7\u54C1\u529F\u80FD\u8BE6\u7EC6\u4ECB\u7ECD',\n      subtitle: '\u5168\u9762\u4E86\u89E3\u4EA7\u54C1\u7279\u6027',\n      desc: '\u6211\u4EEC\u7684\u4EA7\u54C1\u91C7\u7528\u6700\u5148\u8FDB\u7684\u6280\u672F\u548C\u6750\u6599\uFF0C\u7ECF\u8FC7\u4E25\u683C\u7684\u8D28\u91CF\u63A7\u5236\u548C\u6D4B\u8BD5\u3002\u6BCF\u4E2A\u7EC6\u8282\u90FD\u7ECF\u8FC7\u7CBE\u5FC3\u8BBE\u8BA1\uFF0C\u786E\u4FDD\u4E3A\u7528\u6237\u63D0\u4F9B\u6700\u4F73\u7684\u4F7F\u7528\u4F53\u9A8C\u3002\u4ECE\u5916\u89C2\u8BBE\u8BA1\u5230\u5185\u90E8\u7ED3\u6784\uFF0C\u4ECE\u529F\u80FD\u5B9E\u73B0\u5230\u7528\u6237\u754C\u9762\uFF0C\u6BCF\u4E00\u4E2A\u73AF\u8282\u90FD\u4F53\u73B0\u4E86\u6211\u4EEC\u5BF9\u54C1\u8D28\u7684\u8FFD\u6C42\u3002\u65E0\u8BBA\u60A8\u662F\u4E13\u4E1A\u7528\u6237\u8FD8\u662F\u666E\u901A\u6D88\u8D39\u8005\uFF0C\u90FD\u80FD\u5728\u6211\u4EEC\u7684\u4EA7\u54C1\u4E2D\u627E\u5230\u6EE1\u8DB3\u60A8\u9700\u6C42\u7684\u529F\u80FD\u548C\u7279\u6027\u3002',\n      poster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobPoster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u5C55\u793A\u8F83\u957F\u63CF\u8FF0\u6587\u672C\u7684\u6392\u7248\u6548\u679C\u3002\u7EC4\u4EF6\u4F1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u6587\u672C\u5BBD\u5EA6\u548C\u884C\u9AD8\uFF0C\u786E\u4FDD\u957F\u6587\u672C\u7684\u53EF\u8BFB\u6027\u3002\u9002\u7528\u4E8E\u9700\u8981\u8BE6\u7EC6\u8BF4\u660E\u4EA7\u54C1\u529F\u80FD\u6216\u6280\u672F\u7EC6\u8282\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  name: '\u6DF1\u8272\u4E3B\u9898',\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'light',\n    },\n    docs: {\n      description: {\n        story: '\u6DF1\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: \"dark\"` \u542F\u7528\u6DF1\u8272\u6A21\u5F0F\uFF0C\u6587\u672C\u989C\u8272\u4F1A\u81EA\u52A8\u4F7F\u7528\u6DF1\u8272\u4E3B\u9898\u7684\u914D\u8272\u65B9\u6848\u3002\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6DF1\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const LightTheme: Story = {\n  name: '\u6D45\u8272\u4E3B\u9898',\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'light',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u6D45\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\uFF08\u9ED8\u8BA4\uFF09\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: \"light\"` \u6216\u4E0D\u8BBE\u7F6E\u4E3B\u9898\uFF08\u9ED8\u8BA4\u4E3A\u6D45\u8272\uFF09\uFF0C\u6587\u672C\u989C\u8272\u4F7F\u7528\u6D45\u8272\u4E3B\u9898\u914D\u8272\u3002\u9002\u7528\u4E8E\u6DF1\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6D45\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const CustomStyled: Story = {\n  name: '\u81EA\u5B9A\u4E49\u6837\u5F0F',\n  args: {\n    data: defaultData,\n    className: 'custom-inline-video',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\n\u901A\u8FC7 className \u5C5E\u6027\u548C\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\uFF0C\u53EF\u4EE5\u8F7B\u677E\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\n\n### \u4F7F\u7528\u65B9\u5F0F\n\n1. **\u901A\u8FC7 className prop**: \u4F20\u5165\u81EA\u5B9A\u4E49\u7C7B\u540D\n2. **\u4F7F\u7528\u5185\u7F6E\u7C7B\u540D**: \u76F4\u63A5\u8986\u76D6\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\n\n### \u793A\u4F8B\u4EE3\u7801\n\n\\`\\`\\`tsx\n<InlineVideo\n  data={data}\n  className=\"custom-inline-video\"\n/>\n\\`\\`\\`\n\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u6837\u5F0F */\n.custom-inline-video {\n  background: rgba(0, 0, 0, 0.5);\n  padding: 40px;\n  backdrop-filter: blur(10px);\n}\n\n.custom-inline-video .inline-video-title {\n  color: #00d4ff;\n  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);\n}\n\n.custom-inline-video .inline-video-subtitle {\n  color: #ffd700;\n}\n\n.custom-inline-video .inline-video-container {\n  border: 2px solid rgba(255, 255, 255, 0.1);\n  border-radius: 24px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n}\n\\`\\`\\`\n\n\u6B64\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u7EC4\u5408 className prop \u548C\u5185\u7F6E\u7C7B\u540D\u6765\u5B9E\u73B0\u5B8C\u5168\u81EA\u5B9A\u4E49\u7684\u89C6\u89C9\u6548\u679C\u3002\n        `,\n      },\n    },\n  },\n  decorators: [\n    (Story) => (\n      <div>\n        <style>{`\n          .custom-inline-video {\n            background: rgba(0, 0, 0, 0.3);\n            padding: 40px;\n            backdrop-filter: blur(10px);\n          }\n\n          .custom-inline-video .inline-video-title {\n            color: #00d4ff !important;\n            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);\n          }\n\n          .custom-inline-video .inline-video-subtitle {\n            color: #ffd700 !important;\n          }\n\n          .custom-inline-video .inline-video-description {\n            opacity: 0.9;\n            line-height: 1.8;\n          }\n\n          .custom-inline-video .inline-video-container {\n            border: 2px solid rgba(255, 255, 255, 0.1);\n            border-radius: 24px;\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n          }\n        `}</style>\n        <Story />\n      </div>\n    ),\n  ],\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "InlineVideo", "meta", "InlineVideo_stories_default", "defaultData", "Default", "WithoutSubtitle", "WithoutPosters", "LongDescription", "DarkTheme", "LightTheme", "CustomStyled", "Story"]
+}

package/dist/esm/stories/MarqueeReview.stories.d.ts

@@ -0,0 +1,73 @@
+import type { StoryObj } from '@storybook/react';
+import type { MarqueeReviewProps } from '../biz-components/MarqueeReview/index.js';
+/**
+ * MarqueeReview 组件用于展示垂直滚动的用户评论轮播。
+ *
+ * ## 功能特性
+ * - 垂直无限滚动动画
+ * - 支持多列布局(响应式)
+ * - 星级评分显示
+ * - 用户头像展示
+ * - 渐变边缘遮罩效果
+ *
+ * ## 使用场景
+ * - 产品评价展示
+ * - 用户证言
+ * - 客户反馈墙
+ */
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<MarqueeReviewProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    } & import("react").RefAttributes<any>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        data: {
+            description: string;
+            control: {
+                type: "object";
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: "text";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * 默认状态 - 展示完整的评论轮播效果
+ */
+export declare const Default: Story;
+/**
+ * 中文内容 - 展示中文评论
+ */
+export declare const Chinese: Story;
+/**
+ * 少量评论 - 当评论数量不足时,组件会自动复制填充
+ */
+export declare const FewReviews: Story;
+/**
+ * 不同评分 - 展示不同星级评分
+ */
+export declare const MixedRatings: Story;
+/**
+ * 自定义样式 - 使用自定义 className
+ */
+export declare const CustomStyle: Story;
+/**
+ * 长评论内容 - 测试长文本的显示效果
+ */
+export declare const LongComments: Story;

package/dist/esm/stories/MarqueeReview.stories.js

@@ -0,0 +1,19 @@
+import t from"../biz-components/MarqueeReview/index.js";const e={title:"Biz-Components/MarqueeReview",component:t,parameters:{layout:"fullscreen",docs:{description:{component:`
+# MarqueeReview \u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6
+
+\u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA\u7684\u5782\u76F4\u6EDA\u52A8\u8F6E\u64AD\uFF0C\u901A\u8FC7\u65E0\u9650\u5FAA\u73AF\u52A8\u753B\u5C55\u793A\u5BA2\u6237\u53CD\u9988\u3002
+
+## \u6838\u5FC3\u529F\u80FD
+
+- **\u5782\u76F4\u65E0\u9650\u6EDA\u52A8**\uFF1A\u8BC4\u8BBA\u5361\u7247\u4ECE\u4E0B\u5F80\u4E0A\u5FAA\u73AF\u6EDA\u52A8
+- **\u591A\u5217\u54CD\u5E94\u5F0F\u5E03\u5C40**\uFF1A\u79FB\u52A8\u7AEF 1 \u5217\uFF0C\u5E73\u677F 2 \u5217\uFF0C\u684C\u9762 3 \u5217
+- **\u661F\u7EA7\u8BC4\u5206**\uFF1A\u652F\u6301 1-5 \u661F\u8BC4\u5206\u5C55\u793A
+- **\u7528\u6237\u5934\u50CF**\uFF1A\u5C55\u793A\u7528\u6237\u5934\u50CF\uFF0C\u652F\u6301\u56DE\u9000\u65B9\u6848
+- **\u6E10\u53D8\u906E\u7F69**\uFF1A\u9876\u90E8/\u5E95\u90E8\u6E10\u53D8\u906E\u7F69\u6548\u679C
+- **\u81EA\u52A8\u8865\u9F50**\uFF1A\u5C11\u4E8E 9 \u6761\u8BC4\u8BBA\u65F6\u81EA\u52A8\u590D\u5236\u8865\u9F50
+
+## \u4F7F\u7528\u573A\u666F
+
+\u9002\u7528\u4E8E\u4EA7\u54C1\u8BC4\u4EF7\u5C55\u793A\u3001\u5BA2\u6237\u53CD\u9988\u5899\u3001\u793E\u4F1A\u8BC1\u660E\u7B49\u573A\u666F\u3002
+        `}}},tags:["autodocs"],argTypes:{data:{description:"\u8BC4\u8BBA\u6570\u636E,\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u8BC4\u8BBA\u5217\u8868",control:{type:"object"}},className:{description:"\u81EA\u5B9A\u4E49 CSS \u7C7B\u540D",control:{type:"text"}}}};var i=e;const a=[{name:"Sarah Johnson",avatar:"https://i.pravatar.cc/150?img=1",comment:"This product has completely transformed my daily routine. The quality is outstanding!",rating:5},{name:"Michael Chen",avatar:"https://i.pravatar.cc/150?img=2",comment:"Excellent customer service and fast shipping. Highly recommend to everyone!",rating:5},{name:"Emma Williams",avatar:"https://i.pravatar.cc/150?img=3",comment:"Best purchase I made this year. Worth every penny and more!",rating:5},{name:"David Martinez",avatar:"https://i.pravatar.cc/150?img=4",comment:"Amazing build quality. You can feel the attention to detail in every aspect.",rating:5},{name:"Lisa Anderson",avatar:"https://i.pravatar.cc/150?img=5",comment:"Exceeded my expectations in every way. Will definitely buy again!",rating:4},{name:"James Taylor",avatar:"https://i.pravatar.cc/150?img=6",comment:"The design is sleek and modern. Fits perfectly with my aesthetic.",rating:5},{name:"Sophia Lee",avatar:"https://i.pravatar.cc/150?img=7",comment:"Great value for money. I was skeptical at first but now I am a believer!",rating:5},{name:"Robert Brown",avatar:"https://i.pravatar.cc/150?img=8",comment:"Innovative features that actually make a difference in everyday use.",rating:5},{name:"Olivia Garcia",avatar:"https://i.pravatar.cc/150?img=9",comment:"Customer support was incredibly helpful when I had questions. Five stars!",rating:5}],n={args:{data:{title:"What Our Customers Say",subtitle:"Trusted by thousands of satisfied customers worldwide",items:a}}},s={args:{data:{title:"\u5BA2\u6237\u8BC4\u4EF7",subtitle:"\u5168\u7403\u6570\u5343\u540D\u6EE1\u610F\u5BA2\u6237\u7684\u4FE1\u8D56\u4E4B\u9009",items:[{name:"\u5F20\u4F1F",avatar:"https://i.pravatar.cc/150?img=10",comment:"\u4EA7\u54C1\u8D28\u91CF\u975E\u5E38\u597D,\u4F7F\u7528\u4F53\u9A8C\u8D85\u51FA\u9884\u671F,\u5F3A\u70C8\u63A8\u8350!",rating:5},{name:"\u674E\u5A1C",avatar:"https://i.pravatar.cc/150?img=11",comment:"\u8BBE\u8BA1\u5F88\u7CBE\u7F8E,\u529F\u80FD\u4E5F\u5F88\u5B9E\u7528,\u7269\u8D85\u6240\u503C!",rating:5},{name:"\u738B\u5F3A",avatar:"https://i.pravatar.cc/150?img=12",comment:"\u5BA2\u670D\u6001\u5EA6\u5F88\u597D,\u7269\u6D41\u4E5F\u5F88\u5FEB,\u975E\u5E38\u6EE1\u610F!",rating:5},{name:"\u5218\u82B3",avatar:"https://i.pravatar.cc/150?img=13",comment:"\u8FD9\u662F\u6211\u4ECA\u5E74\u4E70\u8FC7\u6700\u6EE1\u610F\u7684\u4EA7\u54C1,\u503C\u5F97\u8D2D\u4E70!",rating:5},{name:"\u9648\u660E",avatar:"https://i.pravatar.cc/150?img=14",comment:"\u505A\u5DE5\u7CBE\u7EC6,\u8D28\u91CF\u4E0A\u4E58,\u4F7F\u7528\u8D77\u6765\u5F88\u8212\u9002!",rating:4},{name:"\u8D75\u4E3D",avatar:"https://i.pravatar.cc/150?img=15",comment:"\u5916\u89C2\u8BBE\u8BA1\u65F6\u5C1A,\u6027\u80FD\u7A33\u5B9A,\u975E\u5E38\u4E0D\u9519!",rating:5},{name:"\u5B59\u6D69",avatar:"https://i.pravatar.cc/150?img=16",comment:"\u6027\u4EF7\u6BD4\u5F88\u9AD8,\u8D85\u51FA\u4E86\u6211\u7684\u9884\u671F,\u4F1A\u56DE\u8D2D!",rating:5},{name:"\u5468\u654F",avatar:"https://i.pravatar.cc/150?img=17",comment:"\u529F\u80FD\u521B\u65B0,\u5B9E\u7528\u6027\u5F3A,\u65E5\u5E38\u4F7F\u7528\u5F88\u65B9\u4FBF!",rating:5},{name:"\u5434\u521A",avatar:"https://i.pravatar.cc/150?img=18",comment:"\u552E\u540E\u670D\u52A1\u5F88\u597D,\u6709\u95EE\u9898\u53CA\u65F6\u89E3\u51B3,\u4E94\u661F\u597D\u8BC4!",rating:5}]}}},m={args:{data:{title:"Early Reviews",subtitle:"What our first customers are saying",items:a.slice(0,3)}}},o={args:{data:{title:"Customer Feedback",subtitle:"Real reviews from real customers",items:[{name:"John Doe",avatar:"https://i.pravatar.cc/150?img=20",comment:"Perfect product! Could not be happier with my purchase.",rating:5},{name:"Jane Smith",avatar:"https://i.pravatar.cc/150?img=21",comment:"Very good quality. Minor improvements could be made but overall great.",rating:4},{name:"Bob Wilson",avatar:"https://i.pravatar.cc/150?img=22",comment:"Good product for the price. Does what it promises.",rating:3},{name:"Alice Cooper",avatar:"https://i.pravatar.cc/150?img=23",comment:"Excellent design and functionality. Impressed!",rating:5},{name:"Tom Harris",avatar:"https://i.pravatar.cc/150?img=24",comment:"Pretty good overall. Some features could be better.",rating:4},{name:"Mary Johnson",avatar:"https://i.pravatar.cc/150?img=25",comment:"Amazing! This is exactly what I was looking for.",rating:5},{name:"Peter Parker",avatar:"https://i.pravatar.cc/150?img=26",comment:"Great value. Happy with my decision to buy.",rating:4},{name:"Diana Prince",avatar:"https://i.pravatar.cc/150?img=27",comment:"Outstanding quality and customer service.",rating:5},{name:"Bruce Wayne",avatar:"https://i.pravatar.cc/150?img=28",comment:"Solid product. Meets all my needs perfectly.",rating:4}]}}},c={args:{data:{title:"Styled Reviews",subtitle:"Custom styling applied",items:a},className:"border-t-4 border-orange-500"}},p={args:{data:{title:"Detailed Reviews",subtitle:"In-depth feedback from our customers",items:[{name:"Alexandra Mitchell",avatar:"https://i.pravatar.cc/150?img=30",comment:"I have been using this product for several months now and I must say it has completely exceeded all of my expectations. The quality is outstanding and the attention to detail is remarkable. Every aspect has been carefully thought through.",rating:5},{name:"Christopher Davis",avatar:"https://i.pravatar.cc/150?img=31",comment:"Initially I was skeptical about making this purchase, but after reading all the positive reviews I decided to give it a try. I am so glad I did! This has become an essential part of my daily routine.",rating:5},{name:"Victoria Thompson",avatar:"https://i.pravatar.cc/150?img=32",comment:"The customer service team was incredibly helpful throughout the entire process. They answered all my questions promptly and made sure I was completely satisfied with my purchase. Five stars!",rating:5},...a.slice(0,6)]}}};export{s as Chinese,c as CustomStyle,n as Default,m as FewReviews,p as LongComments,o as MixedRatings,i as default};
+//# sourceMappingURL=MarqueeReview.stories.js.map

package/dist/esm/stories/MarqueeReview.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/MarqueeReview.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MarqueeReview from '../biz-components/MarqueeReview/index.js'\nimport type { MarqueeReviewProps, ReviewItem } from '../biz-components/MarqueeReview/index.js'\n\n/**\n * MarqueeReview \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u5782\u76F4\u6EDA\u52A8\u7684\u7528\u6237\u8BC4\u8BBA\u8F6E\u64AD\u3002\n *\n * ## \u529F\u80FD\u7279\u6027\n * - \u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u52A8\u753B\n * - \u652F\u6301\u591A\u5217\u5E03\u5C40(\u54CD\u5E94\u5F0F)\n * - \u661F\u7EA7\u8BC4\u5206\u663E\u793A\n * - \u7528\u6237\u5934\u50CF\u5C55\u793A\n * - \u6E10\u53D8\u8FB9\u7F18\u906E\u7F69\u6548\u679C\n *\n * ## \u4F7F\u7528\u573A\u666F\n * - \u4EA7\u54C1\u8BC4\u4EF7\u5C55\u793A\n * - \u7528\u6237\u8BC1\u8A00\n * - \u5BA2\u6237\u53CD\u9988\u5899\n */\nconst meta = {\n  title: 'Biz-Components/MarqueeReview',\n  component: MarqueeReview,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\n# MarqueeReview \u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n\n\u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA\u7684\u5782\u76F4\u6EDA\u52A8\u8F6E\u64AD\uFF0C\u901A\u8FC7\u65E0\u9650\u5FAA\u73AF\u52A8\u753B\u5C55\u793A\u5BA2\u6237\u53CD\u9988\u3002\n\n## \u6838\u5FC3\u529F\u80FD\n\n- **\u5782\u76F4\u65E0\u9650\u6EDA\u52A8**\uFF1A\u8BC4\u8BBA\u5361\u7247\u4ECE\u4E0B\u5F80\u4E0A\u5FAA\u73AF\u6EDA\u52A8\n- **\u591A\u5217\u54CD\u5E94\u5F0F\u5E03\u5C40**\uFF1A\u79FB\u52A8\u7AEF 1 \u5217\uFF0C\u5E73\u677F 2 \u5217\uFF0C\u684C\u9762 3 \u5217\n- **\u661F\u7EA7\u8BC4\u5206**\uFF1A\u652F\u6301 1-5 \u661F\u8BC4\u5206\u5C55\u793A\n- **\u7528\u6237\u5934\u50CF**\uFF1A\u5C55\u793A\u7528\u6237\u5934\u50CF\uFF0C\u652F\u6301\u56DE\u9000\u65B9\u6848\n- **\u6E10\u53D8\u906E\u7F69**\uFF1A\u9876\u90E8/\u5E95\u90E8\u6E10\u53D8\u906E\u7F69\u6548\u679C\n- **\u81EA\u52A8\u8865\u9F50**\uFF1A\u5C11\u4E8E 9 \u6761\u8BC4\u8BBA\u65F6\u81EA\u52A8\u590D\u5236\u8865\u9F50\n\n## \u4F7F\u7528\u573A\u666F\n\n\u9002\u7528\u4E8E\u4EA7\u54C1\u8BC4\u4EF7\u5C55\u793A\u3001\u5BA2\u6237\u53CD\u9988\u5899\u3001\u793E\u4F1A\u8BC1\u660E\u7B49\u573A\u666F\u3002\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    data: {\n      description: '\u8BC4\u8BBA\u6570\u636E,\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u8BC4\u8BBA\u5217\u8868',\n      control: { type: 'object' },\n    },\n    className: {\n      description: '\u81EA\u5B9A\u4E49 CSS \u7C7B\u540D',\n      control: { type: 'text' },\n    },\n  },\n} satisfies Meta<typeof MarqueeReview>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// \u6A21\u62DF\u8BC4\u8BBA\u6570\u636E\nconst mockReviews: ReviewItem[] = [\n  {\n    name: 'Sarah Johnson',\n    avatar: 'https://i.pravatar.cc/150?img=1',\n    comment: 'This product has completely transformed my daily routine. The quality is outstanding!',\n    rating: 5,\n  },\n  {\n    name: 'Michael Chen',\n    avatar: 'https://i.pravatar.cc/150?img=2',\n    comment: 'Excellent customer service and fast shipping. Highly recommend to everyone!',\n    rating: 5,\n  },\n  {\n    name: 'Emma Williams',\n    avatar: 'https://i.pravatar.cc/150?img=3',\n    comment: 'Best purchase I made this year. Worth every penny and more!',\n    rating: 5,\n  },\n  {\n    name: 'David Martinez',\n    avatar: 'https://i.pravatar.cc/150?img=4',\n    comment: 'Amazing build quality. You can feel the attention to detail in every aspect.',\n    rating: 5,\n  },\n  {\n    name: 'Lisa Anderson',\n    avatar: 'https://i.pravatar.cc/150?img=5',\n    comment: 'Exceeded my expectations in every way. Will definitely buy again!',\n    rating: 4,\n  },\n  {\n    name: 'James Taylor',\n    avatar: 'https://i.pravatar.cc/150?img=6',\n    comment: 'The design is sleek and modern. Fits perfectly with my aesthetic.',\n    rating: 5,\n  },\n  {\n    name: 'Sophia Lee',\n    avatar: 'https://i.pravatar.cc/150?img=7',\n    comment: 'Great value for money. I was skeptical at first but now I am a believer!',\n    rating: 5,\n  },\n  {\n    name: 'Robert Brown',\n    avatar: 'https://i.pravatar.cc/150?img=8',\n    comment: 'Innovative features that actually make a difference in everyday use.',\n    rating: 5,\n  },\n  {\n    name: 'Olivia Garcia',\n    avatar: 'https://i.pravatar.cc/150?img=9',\n    comment: 'Customer support was incredibly helpful when I had questions. Five stars!',\n    rating: 5,\n  },\n]\n\n/**\n * \u9ED8\u8BA4\u72B6\u6001 - \u5C55\u793A\u5B8C\u6574\u7684\u8BC4\u8BBA\u8F6E\u64AD\u6548\u679C\n */\nexport const Default: Story = {\n  args: {\n    data: {\n      title: 'What Our Customers Say',\n      subtitle: 'Trusted by thousands of satisfied customers worldwide',\n      items: mockReviews,\n    },\n  },\n}\n\n/**\n * \u4E2D\u6587\u5185\u5BB9 - \u5C55\u793A\u4E2D\u6587\u8BC4\u8BBA\n */\nexport const Chinese: Story = {\n  args: {\n    data: {\n      title: '\u5BA2\u6237\u8BC4\u4EF7',\n      subtitle: '\u5168\u7403\u6570\u5343\u540D\u6EE1\u610F\u5BA2\u6237\u7684\u4FE1\u8D56\u4E4B\u9009',\n      items: [\n        {\n          name: '\u5F20\u4F1F',\n          avatar: 'https://i.pravatar.cc/150?img=10',\n          comment: '\u4EA7\u54C1\u8D28\u91CF\u975E\u5E38\u597D,\u4F7F\u7528\u4F53\u9A8C\u8D85\u51FA\u9884\u671F,\u5F3A\u70C8\u63A8\u8350!',\n          rating: 5,\n        },\n        {\n          name: '\u674E\u5A1C',\n          avatar: 'https://i.pravatar.cc/150?img=11',\n          comment: '\u8BBE\u8BA1\u5F88\u7CBE\u7F8E,\u529F\u80FD\u4E5F\u5F88\u5B9E\u7528,\u7269\u8D85\u6240\u503C!',\n          rating: 5,\n        },\n        {\n          name: '\u738B\u5F3A',\n          avatar: 'https://i.pravatar.cc/150?img=12',\n          comment: '\u5BA2\u670D\u6001\u5EA6\u5F88\u597D,\u7269\u6D41\u4E5F\u5F88\u5FEB,\u975E\u5E38\u6EE1\u610F!',\n          rating: 5,\n        },\n        {\n          name: '\u5218\u82B3',\n          avatar: 'https://i.pravatar.cc/150?img=13',\n          comment: '\u8FD9\u662F\u6211\u4ECA\u5E74\u4E70\u8FC7\u6700\u6EE1\u610F\u7684\u4EA7\u54C1,\u503C\u5F97\u8D2D\u4E70!',\n          rating: 5,\n        },\n        {\n          name: '\u9648\u660E',\n          avatar: 'https://i.pravatar.cc/150?img=14',\n          comment: '\u505A\u5DE5\u7CBE\u7EC6,\u8D28\u91CF\u4E0A\u4E58,\u4F7F\u7528\u8D77\u6765\u5F88\u8212\u9002!',\n          rating: 4,\n        },\n        {\n          name: '\u8D75\u4E3D',\n          avatar: 'https://i.pravatar.cc/150?img=15',\n          comment: '\u5916\u89C2\u8BBE\u8BA1\u65F6\u5C1A,\u6027\u80FD\u7A33\u5B9A,\u975E\u5E38\u4E0D\u9519!',\n          rating: 5,\n        },\n        {\n          name: '\u5B59\u6D69',\n          avatar: 'https://i.pravatar.cc/150?img=16',\n          comment: '\u6027\u4EF7\u6BD4\u5F88\u9AD8,\u8D85\u51FA\u4E86\u6211\u7684\u9884\u671F,\u4F1A\u56DE\u8D2D!',\n          rating: 5,\n        },\n        {\n          name: '\u5468\u654F',\n          avatar: 'https://i.pravatar.cc/150?img=17',\n          comment: '\u529F\u80FD\u521B\u65B0,\u5B9E\u7528\u6027\u5F3A,\u65E5\u5E38\u4F7F\u7528\u5F88\u65B9\u4FBF!',\n          rating: 5,\n        },\n        {\n          name: '\u5434\u521A',\n          avatar: 'https://i.pravatar.cc/150?img=18',\n          comment: '\u552E\u540E\u670D\u52A1\u5F88\u597D,\u6709\u95EE\u9898\u53CA\u65F6\u89E3\u51B3,\u4E94\u661F\u597D\u8BC4!',\n          rating: 5,\n        },\n      ],\n    },\n  },\n}\n\n/**\n * \u5C11\u91CF\u8BC4\u8BBA - \u5F53\u8BC4\u8BBA\u6570\u91CF\u4E0D\u8DB3\u65F6,\u7EC4\u4EF6\u4F1A\u81EA\u52A8\u590D\u5236\u586B\u5145\n */\nexport const FewReviews: Story = {\n  args: {\n    data: {\n      title: 'Early Reviews',\n      subtitle: 'What our first customers are saying',\n      items: mockReviews.slice(0, 3),\n    },\n  },\n}\n\n/**\n * \u4E0D\u540C\u8BC4\u5206 - \u5C55\u793A\u4E0D\u540C\u661F\u7EA7\u8BC4\u5206\n */\nexport const MixedRatings: Story = {\n  args: {\n    data: {\n      title: 'Customer Feedback',\n      subtitle: 'Real reviews from real customers',\n      items: [\n        {\n          name: 'John Doe',\n          avatar: 'https://i.pravatar.cc/150?img=20',\n          comment: 'Perfect product! Could not be happier with my purchase.',\n          rating: 5,\n        },\n        {\n          name: 'Jane Smith',\n          avatar: 'https://i.pravatar.cc/150?img=21',\n          comment: 'Very good quality. Minor improvements could be made but overall great.',\n          rating: 4,\n        },\n        {\n          name: 'Bob Wilson',\n          avatar: 'https://i.pravatar.cc/150?img=22',\n          comment: 'Good product for the price. Does what it promises.',\n          rating: 3,\n        },\n        {\n          name: 'Alice Cooper',\n          avatar: 'https://i.pravatar.cc/150?img=23',\n          comment: 'Excellent design and functionality. Impressed!',\n          rating: 5,\n        },\n        {\n          name: 'Tom Harris',\n          avatar: 'https://i.pravatar.cc/150?img=24',\n          comment: 'Pretty good overall. Some features could be better.',\n          rating: 4,\n        },\n        {\n          name: 'Mary Johnson',\n          avatar: 'https://i.pravatar.cc/150?img=25',\n          comment: 'Amazing! This is exactly what I was looking for.',\n          rating: 5,\n        },\n        {\n          name: 'Peter Parker',\n          avatar: 'https://i.pravatar.cc/150?img=26',\n          comment: 'Great value. Happy with my decision to buy.',\n          rating: 4,\n        },\n        {\n          name: 'Diana Prince',\n          avatar: 'https://i.pravatar.cc/150?img=27',\n          comment: 'Outstanding quality and customer service.',\n          rating: 5,\n        },\n        {\n          name: 'Bruce Wayne',\n          avatar: 'https://i.pravatar.cc/150?img=28',\n          comment: 'Solid product. Meets all my needs perfectly.',\n          rating: 4,\n        },\n      ],\n    },\n  },\n}\n\n/**\n * \u81EA\u5B9A\u4E49\u6837\u5F0F - \u4F7F\u7528\u81EA\u5B9A\u4E49 className\n */\nexport const CustomStyle: Story = {\n  args: {\n    data: {\n      title: 'Styled Reviews',\n      subtitle: 'Custom styling applied',\n      items: mockReviews,\n    },\n    className: 'border-t-4 border-orange-500',\n  },\n}\n\n/**\n * \u957F\u8BC4\u8BBA\u5185\u5BB9 - \u6D4B\u8BD5\u957F\u6587\u672C\u7684\u663E\u793A\u6548\u679C\n */\nexport const LongComments: Story = {\n  args: {\n    data: {\n      title: 'Detailed Reviews',\n      subtitle: 'In-depth feedback from our customers',\n      items: [\n        {\n          name: 'Alexandra Mitchell',\n          avatar: 'https://i.pravatar.cc/150?img=30',\n          comment:\n            'I have been using this product for several months now and I must say it has completely exceeded all of my expectations. The quality is outstanding and the attention to detail is remarkable. Every aspect has been carefully thought through.',\n          rating: 5,\n        },\n        {\n          name: 'Christopher Davis',\n          avatar: 'https://i.pravatar.cc/150?img=31',\n          comment:\n            'Initially I was skeptical about making this purchase, but after reading all the positive reviews I decided to give it a try. I am so glad I did! This has become an essential part of my daily routine.',\n          rating: 5,\n        },\n        {\n          name: 'Victoria Thompson',\n          avatar: 'https://i.pravatar.cc/150?img=32',\n          comment:\n            'The customer service team was incredibly helpful throughout the entire process. They answered all my questions promptly and made sure I was completely satisfied with my purchase. Five stars!',\n          rating: 5,\n        },\n        ...mockReviews.slice(0, 6),\n      ],\n    },\n  },\n}\n\n"],
+  "mappings": "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",
+  "names": ["MarqueeReview", "meta", "MarqueeReview_stories_default", "mockReviews", "Default", "Chinese", "FewReviews", "MixedRatings", "CustomStyle", "LongComments"]
+}

package/dist/esm/stories/MediaSceneSwitcher.stories.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";import c from"../biz-components/MediaSceneSwitcher/index.js";const s={title:"Biz-Components/MediaSceneSwitcher",component:c,parameters:{layout:"fullscreen",docs:{description:{component:"Media Scene Switcher component - A versatile component for switching between multiple media scenes with auto-play functionality"}}},decorators:[i=>t("div",{style:{paddingTop:"2em",background:"#000",minHeight:"100vh"},children:t(i,{})})],tags:["autodocs"]};var l=s;const e={id:"690c3b11535a7c9975ffcd47",display:"visible",title:"360 Times/Minute",subtitle:"Self-Cleaning",container:{mobileSpan:"12",desktopSpan:"10"},blockName:"\u591A\u573A\u666F\u5207\u63621_10\u6805\u683C_public",blockType:"MediaSceneSwitcher",items:[{id:"690c3b32535a7c9975ffcd49",title:"Scrapes Off Dirt",tag:"20% OFF",videoUrl:{id:3066,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3067,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null},{id:"690c3b35535a7c9975ffcd4b",title:"Cleans the Mop with Water and Detergent",tag:"20% OFF",videoUrl:{id:3068,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3069,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null},{id:"690c3b38535a7c9975ffcd4d",title:"Squeezes Out Dirty Water",tag:"20% OFF",videoUrl:{id:3070,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3071,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null}]},d={args:{data:e}},o={args:{data:{...e,items:e.items.map(i=>({...i,tag:void 0}))}}},m={args:{data:{...e,items:e.items.map(i=>({...i,videoUrl:null}))}}},n={args:{data:{...e,items:e.items.slice(0,2)}}};export{d as Default,m as ImageOnly,n as TwoItems,o as WithoutTags,l as default};
+//# sourceMappingURL=MediaSceneSwitcher.stories.js.map

package/dist/esm/stories/MediaSceneSwitcher.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/MediaSceneSwitcher.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaSceneSwitcher from '../biz-components/MediaSceneSwitcher/index.js'\n\nconst meta = {\n  title: 'Biz-Components/MediaSceneSwitcher',\n  component: MediaSceneSwitcher,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: 'Media Scene Switcher component - A versatile component for switching between multiple media scenes with auto-play functionality',\n      },\n    },\n  },\n  decorators: [\n    Story => (\n      <div style={{ paddingTop: '2em', background: '#000', minHeight: '100vh' }}>\n        <Story />\n      </div>\n    ),\n  ],\n  tags: ['autodocs'],\n} satisfies Meta<typeof MediaSceneSwitcher>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockData = {\n  id: '690c3b11535a7c9975ffcd47',\n  display: 'visible' as const,\n  title: '360 Times/Minute',\n  subtitle: 'Self-Cleaning',\n  container: {\n    mobileSpan: '12',\n    desktopSpan: '10',\n  },\n  blockName: '\u591A\u573A\u666F\u5207\u63621_10\u6805\u683C_public',\n  blockType: 'MediaSceneSwitcher',\n  items: [\n    {\n      id: '690c3b32535a7c9975ffcd49',\n      title: 'Scrapes Off Dirt',\n      tag: '20% OFF',\n      videoUrl: {\n        id: 3066,\n        alt: null,\n        baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n        url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n        filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n        mimeType: 'video/mp4' as const,\n        width: null,\n        height: null,\n      },\n      imageUrl: {\n        id: 3067,\n        alt: null,\n        baseUrl:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        filename: 'Frame_2121235302.png',\n        mimeType: 'image/png' as const,\n        width: 1648,\n        height: 1120,\n      },\n      mobVideoUrl: null,\n      mobImageUrl: null,\n    },\n    {\n      id: '690c3b35535a7c9975ffcd4b',\n      title: 'Cleans the Mop with Water and Detergent',\n      tag: '20% OFF',\n      videoUrl: {\n        id: 3068,\n        alt: null,\n        baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n        url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n        filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n        mimeType: 'video/mp4' as const,\n        width: null,\n        height: null,\n      },\n      imageUrl: {\n        id: 3069,\n        alt: null,\n        baseUrl:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        filename: 'Frame_2121235302.png',\n        mimeType: 'image/png' as const,\n        width: 1648,\n        height: 1120,\n      },\n      mobVideoUrl: null,\n      mobImageUrl: null,\n    },\n    {\n      id: '690c3b38535a7c9975ffcd4d',\n      title: 'Squeezes Out Dirty Water',\n      tag: '20% OFF',\n      videoUrl: {\n        id: 3070,\n        alt: null,\n        baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n        url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n        filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n        mimeType: 'video/mp4' as const,\n        width: null,\n        height: null,\n      },\n      imageUrl: {\n        id: 3071,\n        alt: null,\n        baseUrl:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n        filename: 'Frame_2121235302.png',\n        mimeType: 'image/png' as const,\n        width: 1648,\n        height: 1120,\n      },\n      mobVideoUrl: null,\n      mobImageUrl: null,\n    },\n  ],\n}\n\nexport const Default: Story = {\n  args: {\n    data: mockData,\n  },\n}\n\nexport const WithoutTags: Story = {\n  args: {\n    data: {\n      ...mockData,\n      items: mockData.items.map(item => ({\n        ...item,\n        tag: undefined,\n      })),\n    },\n  },\n}\n\nexport const ImageOnly: Story = {\n  args: {\n    data: {\n      ...mockData,\n      items: mockData.items.map(item => ({\n        ...item,\n        videoUrl: null,\n      })),\n    },\n  },\n}\n\nexport const TwoItems: Story = {\n  args: {\n    data: {\n      ...mockData,\n      items: mockData.items.slice(0, 2),\n    },\n  },\n}\n"],
+  "mappings": "AAiBQ,cAAAA,MAAA,oBAhBR,OAAOC,MAAwB,gDAE/B,MAAMC,EAAO,CACX,MAAO,oCACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,iIACb,CACF,CACF,EACA,WAAY,CACVE,GACEH,EAAC,OAAI,MAAO,CAAE,WAAY,MAAO,WAAY,OAAQ,UAAW,OAAQ,EACtE,SAAAA,EAACG,EAAA,EAAM,EACT,CAEJ,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOC,EAAQF,EAGf,MAAMG,EAAW,CACf,GAAI,2BACJ,QAAS,UACT,MAAO,mBACP,SAAU,gBACV,UAAW,CACT,WAAY,KACZ,YAAa,IACf,EACA,UAAW,wDACX,UAAW,qBACX,MAAO,CACL,CACE,GAAI,2BACJ,MAAO,mBACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,EACA,CACE,GAAI,2BACJ,MAAO,0CACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,EACA,CACE,GAAI,2BACJ,MAAO,2BACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,MAAOA,EAAS,MAAM,IAAIG,IAAS,CACjC,GAAGA,EACH,IAAK,MACP,EAAE,CACJ,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGJ,EACH,MAAOA,EAAS,MAAM,IAAIG,IAAS,CACjC,GAAGA,EACH,SAAU,IACZ,EAAE,CACJ,CACF,CACF,EAEaE,EAAkB,CAC7B,KAAM,CACJ,KAAM,CACJ,GAAGL,EACH,MAAOA,EAAS,MAAM,MAAM,EAAG,CAAC,CAClC,CACF,CACF",
+  "names": ["jsx", "MediaSceneSwitcher", "meta", "Story", "MediaSceneSwitcher_stories_default", "mockData", "Default", "WithoutTags", "item", "ImageOnly", "TwoItems"]
+}