@anker-in/headless-ui 1.0.26-alpha.1762489449442 → 1.0.26-alpha.1762494680050

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/ksp.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Ksp from '../biz-components/Ksp/index.js'\nimport type { KspProps } from '../biz-components/Ksp/index.js'\n\nconst meta = {\n  title: 'Biz-Components/Ksp',\n  component: Ksp,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\n# Ksp \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n\n\u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF08Key Selling Points\uFF09\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n\n## \u6838\u5FC3\u529F\u80FD\n\n- **\u56FE\u7247/\u89C6\u9891\u652F\u6301**\uFF1A\u6BCF\u4E2A\u5361\u7247\u53EF\u4EE5\u662F\u56FE\u7247\u6216\u89C6\u9891\uFF0C\u81EA\u52A8\u8BC6\u522B\u548C\u6E32\u67D3\n- **7 \u5361\u7247\u5E03\u5C40**\uFF1A\u56FA\u5B9A 7 \u4E2A\u5361\u7247\u4F4D\u7F6E\uFF0C\u5177\u6709\u4E0D\u540C\u7684\u5C3A\u5BF8\u548C\u6392\u5217\n- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u624B\u673A\u7AEF\u548C\u5E73\u677F/\u684C\u9762\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u5E03\u5C40\u65B9\u6848\n- **\u6587\u5B57\u8986\u76D6**\uFF1A\u6807\u9898\u548C\u63CF\u8FF0\u8986\u76D6\u5728\u5A92\u4F53\u5185\u5BB9\u4E0A\n- **\u81EA\u52A8\u64AD\u653E**\uFF1A\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u3001\u9759\u97F3\n\n## \u5E03\u5C40\u8BF4\u660E\n\n### \u684C\u9762\u7AEF/\u5E73\u677F\u7AEF\u5E03\u5C40\uFF083 \u884C\uFF09\uFF1A\n- **\u7B2C 1 \u884C**\uFF1A\u5927\u5361\u7247(59.53%) + \u5C0F\u5361\u7247(39.30%)\n- **\u7B2C 2 \u884C**\uFF1A\u5C0F\u5361\u7247(29.19%) + \u4E2D\u5361\u7247(39.30%) + \u5C0F\u5361\u7247(29.19%)\n- **\u7B2C 3 \u884C**\uFF1A\u5C0F\u5361\u7247(39.30%) + \u5927\u5361\u7247(59.53%)\n\n### \u624B\u673A\u7AEF\u5E03\u5C40\uFF085 \u884C\uFF09\uFF1A\n- **\u7B2C 1 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n- **\u7B2C 2 \u884C**\uFF1A\u4E24\u4E2A\u534A\u5BBD\u5361\u7247\n- **\u7B2C 3 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n- **\u7B2C 4 \u884C**\uFF1A\u4E24\u4E2A\u534A\u5BBD\u5361\u7247\n- **\u7B2C 5 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n\n## \u4F7F\u7528\u573A\u666F\n\n\u9002\u7528\u4E8E\u4EA7\u54C1\u8BE6\u60C5\u9875\uFF0C\u5C55\u793A\u4EA7\u54C1\u7684\u6838\u5FC3\u4F18\u52BF\u548C\u7279\u8272\u529F\u80FD\u3002\n\n## \u81EA\u5B9A\u4E49\u6837\u5F0F Class Names\n\n\u7EC4\u4EF6\u63D0\u4F9B\u4EE5\u4E0B\u56FA\u5B9A\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n\n### \u5E03\u5C40\u7C7B\n- \\`.ksp-container\\` - \u4E3B\u5BB9\u5668\n- \\`.ksp-title\\` - \u4E3B\u6807\u9898\n- \\`.ksp-desktop-layout\\` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-mobile-layout\\` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-row\\` - \u884C\u5BB9\u5668\n  - \\`.ksp-row-1\\` - \u7B2C 1 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-2\\` - \u7B2C 2 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-3\\` - \u7B2C 3 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-mobile-1\\` - \u7B2C 1 \u884C\uFF08\u624B\u673A\u7AEF\uFF09\n  - \\`.ksp-row-mobile-2\\` - \u7B2C 2 \u884C\uFF08\u624B\u673A\u7AEF\uFF09\n\n### \u5361\u7247\u7C7B\n- \\`.ksp-card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.ksp-card-image\\` - \u5361\u7247\u56FE\u7247\n- \\`.ksp-card-video\\` - \u5361\u7247\u89C6\u9891\n  - \\`.ksp-card-video-desktop\\` - \u684C\u9762\u7AEF\u89C6\u9891\n  - \\`.ksp-card-video-mobile\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- \\`.ksp-card-content\\` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- \\`.ksp-card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.ksp-card-desc\\` - \u5361\u7247\u63CF\u8FF0\n\n### \u4F7F\u7528\u793A\u4F8B\n\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u4E3B\u6807\u9898\u6837\u5F0F */\n.ksp-title {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n/* \u5361\u7247 hover \u6548\u679C */\n.ksp-card:hover {\n  transform: scale(1.02);\n  transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u6807\u9898\u989C\u8272 */\n.ksp-card-title {\n  color: #fbbf24;\n}\n\\`\\`\\`\n\n\uD83D\uDCA1 \u67E5\u770B **CustomStyle** story \u4E86\u89E3\u5B8C\u6574\u793A\u4F8B\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    data: {\n      description: 'KSP \u6570\u636E\uFF0C\u5305\u542B title \u548C items\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09',\n      control: { type: 'object' },\n    },\n    className: {\n      description: `\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0C\u53EF\u914D\u5408\u4EE5\u4E0B\u56FA\u5B9A class name \u4F7F\u7528 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n      \n**\u5E03\u5C40\u76F8\u5173\uFF1A**\n- \\`.ksp-container\\` - \u4E3B\u5BB9\u5668\n- \\`.ksp-desktop-layout\\` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-mobile-layout\\` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-row\\` - \u884C\u5BB9\u5668\n- \\`.ksp-row-1/2/3\\` - \u684C\u9762\u7AEF\u5404\u884C\n- \\`.ksp-row-mobile-1/2\\` - \u624B\u673A\u7AEF\u5404\u884C\n\n**\u5361\u7247\u76F8\u5173\uFF1A**\n- \\`.ksp-card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.ksp-card-image\\` - \u5361\u7247\u56FE\u7247\n- \\`.ksp-card-video\\` - \u5361\u7247\u89C6\u9891\n- \\`.ksp-card-video-desktop\\` - \u684C\u9762\u7AEF\u89C6\u9891\n- \\`.ksp-card-video-mobile\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- \\`.ksp-card-content\\` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- \\`.ksp-card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.ksp-card-desc\\` - \u5361\u7247\u63CF\u8FF0\n\n**\u6587\u672C\u76F8\u5173\uFF1A**\n- \\`.ksp-title\\` - \u4E3B\u6807\u9898`,\n      control: { type: 'text' },\n    },\n  },\n} satisfies Meta<typeof Ksp>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\n// \u793A\u4F8B\u6570\u636E - 7 \u4E2A\u5361\u7247\nconst mockKspData: KspProps['data'] = {\n  title: 'Why Choose Our Product',\n  items: [\n    {\n      title: 'Improved Cleaning Efficiency',\n      desc: 'HydroJet\u2122 Floor Washing System',\n      imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: '100% Cleaning Coverage',\n      desc: 'Edge-Cleaning CornerRover\u2122 Arm',\n      imageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'All You Need, All-in-One',\n      desc: 'Complete Cleaning Solution',\n      imageUrl: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'Less Maintenance',\n      desc: 'DuoSpiral\u2122 Detangle Brushes',\n      imageUrl: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'Cleaning Power Upgrade',\n      desc: '20,000 Pa Turbo Suction',\n      imageUrl: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'Intelligent Cleaning',\n      desc: 'Smart App Control & Scheduling',\n      imageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'AI.See\u2122 Obstacle Avoidance',\n      desc: 'Advanced Object Recognition',\n      imageUrl: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n    },\n  ],\n}\n\n/**\n * \u9ED8\u8BA4\u72B6\u6001 - \u5C55\u793A\u5B8C\u6574\u7684 7 \u4E2A KSP \u5361\u7247\u5E03\u5C40\n * \n * \uD83D\uDCA1 \u63D0\u793A\uFF1A\u67E5\u770B \"CustomStyle\" story\uFF0C\u4E86\u89E3\u5982\u4F55\u4F7F\u7528\u56FA\u5B9A class name \u81EA\u5B9A\u4E49\u6837\u5F0F\n */\nexport const Default: Story = {\n  args: {\n    data: mockKspData,\n  },\n}\n\n/**\n * \u4E2D\u6587\u5185\u5BB9 - \u5C55\u793A\u4E2D\u6587\u5356\u70B9\n */\nexport const Chinese: Story = {\n  args: {\n    data: {\n      title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC\u7684\u4EA7\u54C1',\n      items: [\n        {\n          title: '\u6E05\u6D01\u6548\u7387\u5927\u5E45\u63D0\u5347',\n          desc: 'HydroJet\u2122 \u5730\u677F\u6E05\u6D01\u7CFB\u7EDF',\n          imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '100% \u6E05\u6D01\u8986\u76D6',\n          desc: 'CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2',\n          imageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '\u4E00\u673A\u591A\u7528\uFF0C\u5168\u80FD\u6E05\u6D01',\n          desc: '\u5B8C\u6574\u7684\u6E05\u6D01\u89E3\u51B3\u65B9\u6848',\n          imageUrl: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '\u66F4\u5C11\u7EF4\u62A4',\n          desc: 'DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934',\n          imageUrl: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '\u6E05\u6D01\u80FD\u529B\u5347\u7EA7',\n          desc: '20,000 Pa \u5F3A\u529B\u5438\u5C18',\n          imageUrl: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '\u667A\u80FD\u6E05\u6D01',\n          desc: 'APP \u8FDC\u7A0B\u63A7\u5236\u4E0E\u5B9A\u65F6',\n          imageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: 'AI \u667A\u80FD\u907F\u969C',\n          desc: '\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F',\n          imageUrl: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n        },\n      ],\n    },\n  },\n}\n\n/**\n * \u89C6\u9891\u5185\u5BB9 - \u5C55\u793A\u89C6\u9891\u5361\u7247\n */\nexport const WithVideo: Story = {\n  args: {\n    data: {\n      title: 'Experience the Difference',\n      items: [\n        {\n          title: 'Powerful Performance',\n          desc: 'See it in action',\n          videoUrl: 'https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4',\n          mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n          imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: 'Smart Navigation',\n          desc: 'Advanced mapping technology',\n          videoUrl: 'https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4',\n          mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n          imageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        },\n        ...mockKspData.items.slice(2),\n      ],\n    },\n  },\n}\n\n/**\n * \u65E0\u6807\u9898 - \u53EA\u5C55\u793A\u5361\u7247\n */\nexport const NoTitle: Story = {\n  args: {\n    data: {\n      items: mockKspData.items,\n    },\n  },\n}\n\n/**\n * \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B\n * \n * \u5C55\u793A\u5982\u4F55\u901A\u8FC7\u56FA\u5B9A\u7684 class name \u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\uFF1A\n * - `.ksp-title` - \u6E10\u53D8\u8272\u6807\u9898\n * - `.ksp-card` - hover \u7F29\u653E\u6548\u679C\n * - `.ksp-card-title` - \u91D1\u8272\u6807\u9898\n * - `.ksp-card-desc` - \u7070\u8272\u63CF\u8FF0\n * - `.ksp-card::before` - hover \u6E10\u53D8\u8FB9\u6846\n */\nexport const CustomStyle: Story = {\n  args: {\n    data: mockKspData,\n    className: 'py-20',\n    style: `\n    /* \u4E3B\u6807\u9898 - \u6E10\u53D8\u8272\u6587\u5B57\u6548\u679C */\n            .ksp-title {\n              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n              -webkit-background-clip: text;\n              -webkit-text-fill-color: transparent;\n              background-clip: text;\n            }\n            \n            /* \u5361\u7247\u5BB9\u5668 - \u6DFB\u52A0\u8FC7\u6E21\u52A8\u753B */\n            .ksp-card {\n              transition: transform 0.3s ease;\n            }\n            \n            /* \u5361\u7247 hover \u6548\u679C - \u8F7B\u5FAE\u653E\u5927 */\n            .ksp-card:hover {\n              transform: scale(1.02);\n            }\n            \n            /* \u5361\u7247\u6807\u9898 - \u91D1\u8272\u6587\u5B57 */\n            .ksp-card-title {\n              color: #fbbf24;\n            }\n            \n            /* \u5361\u7247\u63CF\u8FF0 - \u6D45\u7070\u8272\u6587\u5B57 */\n            .ksp-card-desc {\n              color: #d1d5db;\n            }\n            \n            /* \u5361\u7247 hover \u6E10\u53D8\u8FB9\u6846\u6548\u679C */\n            .ksp-card::before {\n              content: '';\n              position: absolute;\n              inset: 0;\n              border: 2px solid transparent;\n              border-radius: 16px;\n              background: linear-gradient(135deg, #667eea, #764ba2) border-box;\n              -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n              -webkit-mask-composite: xor;\n              mask-composite: exclude;\n              opacity: 0;\n              transition: opacity 0.3s ease;\n            }\n            \n            .ksp-card:hover::before {\n              opacity: 1;\n            }\n    `\n  },\n\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Ksp from '../biz-components/Ksp/index.js'\nimport type { KspProps } from '../biz-components/Ksp/index.js'\n\nconst meta = {\n  title: 'Biz-Components/Ksp',\n  component: Ksp,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\n# Ksp \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n\n\u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF08Key Selling Points\uFF09\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n\n## \u6838\u5FC3\u529F\u80FD\n\n- **\u56FE\u7247/\u89C6\u9891\u652F\u6301**\uFF1A\u6BCF\u4E2A\u5361\u7247\u53EF\u4EE5\u662F\u56FE\u7247\u6216\u89C6\u9891\uFF0C\u81EA\u52A8\u8BC6\u522B\u548C\u6E32\u67D3\n- **7 \u5361\u7247\u5E03\u5C40**\uFF1A\u56FA\u5B9A 7 \u4E2A\u5361\u7247\u4F4D\u7F6E\uFF0C\u5177\u6709\u4E0D\u540C\u7684\u5C3A\u5BF8\u548C\u6392\u5217\n- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u624B\u673A\u7AEF\u548C\u5E73\u677F/\u684C\u9762\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u5E03\u5C40\u65B9\u6848\n- **\u6587\u5B57\u8986\u76D6**\uFF1A\u6807\u9898\u548C\u63CF\u8FF0\u8986\u76D6\u5728\u5A92\u4F53\u5185\u5BB9\u4E0A\n- **\u81EA\u52A8\u64AD\u653E**\uFF1A\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u3001\u9759\u97F3\n\n## \u5E03\u5C40\u8BF4\u660E\n\n### \u684C\u9762\u7AEF/\u5E73\u677F\u7AEF\u5E03\u5C40\uFF083 \u884C\uFF09\uFF1A\n- **\u7B2C 1 \u884C**\uFF1A\u5927\u5361\u7247(59.53%) + \u5C0F\u5361\u7247(39.30%)\n- **\u7B2C 2 \u884C**\uFF1A\u5C0F\u5361\u7247(29.19%) + \u4E2D\u5361\u7247(39.30%) + \u5C0F\u5361\u7247(29.19%)\n- **\u7B2C 3 \u884C**\uFF1A\u5C0F\u5361\u7247(39.30%) + \u5927\u5361\u7247(59.53%)\n\n### \u624B\u673A\u7AEF\u5E03\u5C40\uFF085 \u884C\uFF09\uFF1A\n- **\u7B2C 1 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n- **\u7B2C 2 \u884C**\uFF1A\u4E24\u4E2A\u534A\u5BBD\u5361\u7247\n- **\u7B2C 3 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n- **\u7B2C 4 \u884C**\uFF1A\u4E24\u4E2A\u534A\u5BBD\u5361\u7247\n- **\u7B2C 5 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n\n## \u4F7F\u7528\u573A\u666F\n\n\u9002\u7528\u4E8E\u4EA7\u54C1\u8BE6\u60C5\u9875\uFF0C\u5C55\u793A\u4EA7\u54C1\u7684\u6838\u5FC3\u4F18\u52BF\u548C\u7279\u8272\u529F\u80FD\u3002\n\n## \u81EA\u5B9A\u4E49\u6837\u5F0F Class Names\n\n\u7EC4\u4EF6\u63D0\u4F9B\u4EE5\u4E0B\u56FA\u5B9A\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n\n### \u5E03\u5C40\u7C7B\n- \\`.ksp-container\\` - \u4E3B\u5BB9\u5668\n- \\`.ksp-title\\` - \u4E3B\u6807\u9898\n- \\`.ksp-desktop-layout\\` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-mobile-layout\\` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-row\\` - \u884C\u5BB9\u5668\n  - \\`.ksp-row-1\\` - \u7B2C 1 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-2\\` - \u7B2C 2 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-3\\` - \u7B2C 3 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-mobile-1\\` - \u7B2C 1 \u884C\uFF08\u624B\u673A\u7AEF\uFF09\n  - \\`.ksp-row-mobile-2\\` - \u7B2C 2 \u884C\uFF08\u624B\u673A\u7AEF\uFF09\n\n### \u5361\u7247\u7C7B\n- \\`.ksp-card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.ksp-card-image\\` - \u5361\u7247\u56FE\u7247\n- \\`.ksp-card-video\\` - \u5361\u7247\u89C6\u9891\n  - \\`.ksp-card-video-desktop\\` - \u684C\u9762\u7AEF\u89C6\u9891\n  - \\`.ksp-card-video-mobile\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- \\`.ksp-card-content\\` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- \\`.ksp-card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.ksp-card-desc\\` - \u5361\u7247\u63CF\u8FF0\n\n### \u4F7F\u7528\u793A\u4F8B\n\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u4E3B\u6807\u9898\u6837\u5F0F */\n.ksp-title {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n/* \u5361\u7247 hover \u6548\u679C */\n.ksp-card:hover {\n  transform: scale(1.02);\n  transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u6807\u9898\u989C\u8272 */\n.ksp-card-title {\n  color: #fbbf24;\n}\n\\`\\`\\`\n\n\uD83D\uDCA1 \u67E5\u770B **CustomStyle** story \u4E86\u89E3\u5B8C\u6574\u793A\u4F8B\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    data: {\n      description: 'KSP \u6570\u636E\uFF0C\u5305\u542B title \u548C items\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09',\n      control: { type: 'object' },\n    },\n    className: {\n      description: `\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0C\u53EF\u914D\u5408\u4EE5\u4E0B\u56FA\u5B9A class name \u4F7F\u7528 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n      \n**\u5E03\u5C40\u76F8\u5173\uFF1A**\n- \\`.ksp-container\\` - \u4E3B\u5BB9\u5668\n- \\`.ksp-desktop-layout\\` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-mobile-layout\\` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-row\\` - \u884C\u5BB9\u5668\n- \\`.ksp-row-1/2/3\\` - \u684C\u9762\u7AEF\u5404\u884C\n- \\`.ksp-row-mobile-1/2\\` - \u624B\u673A\u7AEF\u5404\u884C\n\n**\u5361\u7247\u76F8\u5173\uFF1A**\n- \\`.ksp-card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.ksp-card-image\\` - \u5361\u7247\u56FE\u7247\n- \\`.ksp-card-video\\` - \u5361\u7247\u89C6\u9891\n- \\`.ksp-card-video-desktop\\` - \u684C\u9762\u7AEF\u89C6\u9891\n- \\`.ksp-card-video-mobile\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- \\`.ksp-card-content\\` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- \\`.ksp-card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.ksp-card-desc\\` - \u5361\u7247\u63CF\u8FF0\n\n**\u6587\u672C\u76F8\u5173\uFF1A**\n- \\`.ksp-title\\` - \u4E3B\u6807\u9898`,\n      control: { type: 'text' },\n    },\n  },\n} satisfies Meta<typeof Ksp>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\n// \u793A\u4F8B\u6570\u636E - 7 \u4E2A\u5361\u7247\nconst mockKspData: KspProps['data'] = {\n  title: 'Why Choose Our Product',\n  items: [\n    {\n      title: 'Improved Cleaning Efficiency',\n      desc: 'HydroJet\u2122 Floor Washing System',\n      image: {\n        url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n        alt: 'Improved Cleaning Efficiency',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        alt: 'Improved Cleaning Efficiency',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: '100% Cleaning Coverage',\n      desc: 'Edge-Cleaning CornerRover\u2122 Arm',\n      image: {\n        url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n        alt: '100% Cleaning Coverage',\n        thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        alt: '100% Cleaning Coverage',\n        thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'All You Need, All-in-One',\n      desc: 'Complete Cleaning Solution',\n      image: {\n        url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n        alt: 'All You Need, All-in-One',\n        thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n        alt: 'All You Need, All-in-One',\n        thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Less Maintenance',\n      desc: 'DuoSpiral\u2122 Detangle Brushes',\n      image: {\n        url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n        alt: 'Less Maintenance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n        alt: 'Less Maintenance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Cleaning Power Upgrade',\n      desc: '20,000 Pa Turbo Suction',\n      image: {\n        url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n        alt: 'Cleaning Power Upgrade',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n        alt: 'Cleaning Power Upgrade',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Intelligent Cleaning',\n      desc: 'Smart App Control & Scheduling',\n      image: {\n        url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n        alt: 'Intelligent Cleaning',\n        thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n        alt: 'Intelligent Cleaning',\n        thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'AI.See\u2122 Obstacle Avoidance',\n      desc: 'Advanced Object Recognition',\n      image: {\n        url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n        alt: 'AI.See\u2122 Obstacle Avoidance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n        alt: 'AI.See\u2122 Obstacle Avoidance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n  ],\n}\n\n/**\n * \u9ED8\u8BA4\u72B6\u6001 - \u5C55\u793A\u5B8C\u6574\u7684 7 \u4E2A KSP \u5361\u7247\u5E03\u5C40\n * \n * \uD83D\uDCA1 \u63D0\u793A\uFF1A\u67E5\u770B \"CustomStyle\" story\uFF0C\u4E86\u89E3\u5982\u4F55\u4F7F\u7528\u56FA\u5B9A class name \u81EA\u5B9A\u4E49\u6837\u5F0F\n */\nexport const Default: Story = {\n  args: {\n    data: mockKspData,\n  },\n}\n\n/**\n * \u4E2D\u6587\u5185\u5BB9 - \u5C55\u793A\u4E2D\u6587\u5356\u70B9\n */\nexport const Chinese: Story = {\n  args: {\n    data: {\n      title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC\u7684\u4EA7\u54C1',\n      items: [\n        {\n          title: '\u6E05\u6D01\u6548\u7387\u5927\u5E45\u63D0\u5347',\n          desc: 'HydroJet\u2122 \u5730\u677F\u6E05\u6D01\u7CFB\u7EDF',\n          image: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            alt: 'Improved Cleaning Efficiency',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            alt: 'Improved Cleaning Efficiency',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '100% \u6E05\u6D01\u8986\u76D6',\n          desc: 'CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2',\n          image: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            alt: '100% Cleaning Coverage',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            alt: '100% Cleaning Coverage',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u4E00\u673A\u591A\u7528\uFF0C\u5168\u80FD\u6E05\u6D01',\n          desc: '\u5B8C\u6574\u7684\u6E05\u6D01\u89E3\u51B3\u65B9\u6848',\n          image: {\n            url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n            alt: 'All You Need, All-in-One',\n            thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n            alt: 'All You Need, All-in-One',\n            thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u66F4\u5C11\u7EF4\u62A4',\n          desc: 'DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934',\n          image: {\n            url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n            alt: 'Less Maintenance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n            alt: 'Less Maintenance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u6E05\u6D01\u80FD\u529B\u5347\u7EA7',\n          desc: '20,000 Pa \u5F3A\u529B\u5438\u5C18',\n          image: {\n            url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n            alt: 'Cleaning Power Upgrade',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n            alt: 'Cleaning Power Upgrade',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u667A\u80FD\u6E05\u6D01',\n          desc: 'APP \u8FDC\u7A0B\u63A7\u5236\u4E0E\u5B9A\u65F6',\n          imageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n            alt: 'Intelligent Cleaning',\n            thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: 'AI \u667A\u80FD\u907F\u969C',\n          desc: '\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F',\n          image: {\n            url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n            alt: 'AI \u667A\u80FD\u907F\u969C',\n            thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n            alt: 'AI \u667A\u80FD\u907F\u969C',\n            thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n      ],\n    },\n  },\n}\n\n/**\n * \u89C6\u9891\u5185\u5BB9 - \u5C55\u793A\u89C6\u9891\u5361\u7247\n */\nexport const WithVideo: Story = {\n  args: {\n    data: {\n      title: 'Experience the Difference',\n      items: [\n        {\n          title: 'Powerful Performance',\n          desc: 'See it in action',\n          videoUrl: 'https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4',\n          mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n          image: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            alt: 'Powerful Performance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            alt: 'Powerful Performance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: 'Smart Navigation',\n          desc: 'Advanced mapping technology',\n          video: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'video/mp4',\n          },\n          mobVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'video/mp4',\n          },\n          image: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        ...mockKspData.items.slice(2),\n      ],\n    },\n  },\n}\n\n/**\n * \u65E0\u6807\u9898 - \u53EA\u5C55\u793A\u5361\u7247\n */\nexport const NoTitle: Story = {\n  args: {\n    data: {\n      items: mockKspData.items,\n    },\n  },\n}\n\n/**\n * \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B\n * \n * \u5C55\u793A\u5982\u4F55\u901A\u8FC7\u56FA\u5B9A\u7684 class name \u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\uFF1A\n * - `.ksp-title` - \u6E10\u53D8\u8272\u6807\u9898\n * - `.ksp-card` - hover \u7F29\u653E\u6548\u679C\n * - `.ksp-card-title` - \u91D1\u8272\u6807\u9898\n * - `.ksp-card-desc` - \u7070\u8272\u63CF\u8FF0\n * - `.ksp-card::before` - hover \u6E10\u53D8\u8FB9\u6846\n */\nexport const CustomStyle: Story = {\n  args: {\n    data: mockKspData,\n    className: 'py-20',\n    style: `\n    /* \u4E3B\u6807\u9898 - \u6E10\u53D8\u8272\u6587\u5B57\u6548\u679C */\n            .ksp-title {\n              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n              -webkit-background-clip: text;\n              -webkit-text-fill-color: transparent;\n              background-clip: text;\n            }\n            \n            /* \u5361\u7247\u5BB9\u5668 - \u6DFB\u52A0\u8FC7\u6E21\u52A8\u753B */\n            .ksp-card {\n              transition: transform 0.3s ease;\n            }\n            \n            /* \u5361\u7247 hover \u6548\u679C - \u8F7B\u5FAE\u653E\u5927 */\n            .ksp-card:hover {\n              transform: scale(1.02);\n            }\n            \n            /* \u5361\u7247\u6807\u9898 - \u91D1\u8272\u6587\u5B57 */\n            .ksp-card-title {\n              color: #fbbf24;\n            }\n            \n            /* \u5361\u7247\u63CF\u8FF0 - \u6D45\u7070\u8272\u6587\u5B57 */\n            .ksp-card-desc {\n              color: #d1d5db;\n            }\n            \n            /* \u5361\u7247 hover \u6E10\u53D8\u8FB9\u6846\u6548\u679C */\n            .ksp-card::before {\n              content: '';\n              position: absolute;\n              inset: 0;\n              border: 2px solid transparent;\n              border-radius: 16px;\n              background: linear-gradient(135deg, #667eea, #764ba2) border-box;\n              -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n              -webkit-mask-composite: xor;\n              mask-composite: exclude;\n              opacity: 0;\n              transition: opacity 0.3s ease;\n            }\n            \n            .ksp-card:hover::before {\n              opacity: 1;\n            }\n    `\n  },\n\n}\n"],
+  "mappings": "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",
   "names": ["Ksp", "meta", "ksp_stories_default", "mockKspData", "Default", "Chinese", "WithVideo", "NoTitle", "CustomStyle"]
 }

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

@@ -27,10 +27,13 @@ export type Theme = 'light' | 'dark';
 export type Shape = 'rounded' | 'square';
 export type Align = 'left' | 'center' | 'right';
 export type Media = {
-    alt: string;
+    id?: number;
+    alt: string | undefined;
+    baseUrl?: string;
     url: string;
     thumbnailURL: string;
     mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
+    filename?: string;
     width?: number;
     height?: number;
     focalX?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.0.26-alpha.1762489449442",
+  "version": "1.0.26-alpha.1762494680050",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/tailwind.config.js

@@ -27,10 +27,15 @@ module.exports = {
           '50.1%': { transform: 'translateY(calc(-100% + 3rem))' },
           '100%': { transform: 'translateY(0)' },
         },
+        'progress-bar': {
+          from: { transform: 'translate3d(-100%, -2px, 0)' },
+          to: { transform: 'translate3d(0, -2px, 0)' },
+        },
       },
       animation: {
         'marquee-scroll': 'marquee-scroll 20s linear infinite',
         'scroll-text': 'scroll-text 2s ease-in-out infinite',
+        'progress-bar': 'progress-bar var(--interval-time) ease-out',
       },
       maskImage: {
         'fade-vertical': 'linear-gradient(to bottom, transparent, black 20%, black 80%, transparent)',