@anker-in/headless-ui 0.0.27-alpha.0 → 0.0.27-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.d.ts +25 -0
- package/dist/cjs/biz-components/AccordionCards/index.js +2 -0
- package/dist/cjs/biz-components/AccordionCards/index.js.map +7 -0
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +2 -2
- package/dist/cjs/biz-components/Evaluate/index.d.ts +1 -0
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.d.ts +15 -0
- package/dist/cjs/biz-components/Graphic/index.js +2 -0
- package/dist/cjs/biz-components/Graphic/index.js.map +7 -0
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/Marquee/index.js +1 -1
- package/dist/cjs/biz-components/Marquee/index.js.map +3 -3
- package/dist/cjs/biz-components/MemberEquity/index.js +30 -30
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +9 -9
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
- package/dist/cjs/biz-components/index.d.ts +3 -1
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/badge.d.ts +1 -1
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +2 -2
- package/dist/cjs/components/button.d.ts +1 -1
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +2 -2
- package/dist/cjs/components/card.js +1 -1
- package/dist/cjs/components/card.js.map +2 -2
- package/dist/cjs/components/carousel.js +1 -1
- package/dist/cjs/components/carousel.js.map +2 -2
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/cjs/components/dialog.js +1 -1
- package/dist/cjs/components/dialog.js.map +2 -2
- package/dist/cjs/components/gird.js +1 -1
- package/dist/cjs/components/gird.js.map +2 -2
- package/dist/cjs/components/heading.d.ts +1 -1
- package/dist/cjs/components/heading.js +1 -1
- package/dist/cjs/components/heading.js.map +2 -2
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/cjs/helpers/utils.js +1 -1
- package/dist/cjs/helpers/utils.js.map +2 -2
- package/dist/cjs/stories/accordionCards.stories.d.ts +28 -0
- package/dist/cjs/stories/accordionCards.stories.js +2 -0
- package/dist/cjs/stories/accordionCards.stories.js.map +7 -0
- package/dist/cjs/stories/badge.stories.d.ts +17 -2
- package/dist/cjs/stories/badge.stories.js +1 -1
- package/dist/cjs/stories/badge.stories.js.map +2 -2
- package/dist/cjs/stories/button.stories.d.ts +3 -1
- package/dist/cjs/stories/button.stories.js +1 -1
- package/dist/cjs/stories/button.stories.js.map +3 -3
- package/dist/cjs/stories/container.stories.js +6 -6
- package/dist/cjs/stories/container.stories.js.map +2 -2
- package/dist/cjs/stories/dialog.stories.js +1 -1
- package/dist/cjs/stories/dialog.stories.js.map +2 -2
- package/dist/cjs/stories/evaluate.stories.js +1 -1
- package/dist/cjs/stories/evaluate.stories.js.map +2 -2
- package/dist/cjs/stories/graphic.stories.d.ts +49 -0
- package/dist/cjs/stories/graphic.stories.js +2 -0
- package/dist/cjs/stories/graphic.stories.js.map +7 -0
- package/dist/cjs/stories/heading.stories.d.ts +3 -2
- package/dist/cjs/stories/heading.stories.js +1 -1
- package/dist/cjs/stories/heading.stories.js.map +2 -2
- package/dist/cjs/stories/text.stories.js +1 -1
- package/dist/cjs/stories/text.stories.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.d.ts +25 -0
- package/dist/esm/biz-components/AccordionCards/index.js +2 -0
- package/dist/esm/biz-components/AccordionCards/index.js.map +7 -0
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.d.ts +1 -0
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.d.ts +15 -0
- package/dist/esm/biz-components/Graphic/index.js +2 -0
- package/dist/esm/biz-components/Graphic/index.js.map +7 -0
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/types.d.ts +1 -1
- package/dist/esm/biz-components/Marquee/index.js +1 -1
- package/dist/esm/biz-components/Marquee/index.js.map +3 -3
- package/dist/esm/biz-components/MemberEquity/index.js +29 -29
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +9 -9
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +2 -2
- package/dist/esm/biz-components/index.d.ts +3 -1
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/components/badge.d.ts +1 -1
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +2 -2
- package/dist/esm/components/button.d.ts +1 -1
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +2 -2
- package/dist/esm/components/card.js +1 -1
- package/dist/esm/components/card.js.map +2 -2
- package/dist/esm/components/carousel.js +1 -1
- package/dist/esm/components/carousel.js.map +2 -2
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +2 -2
- package/dist/esm/components/dialog.js +1 -1
- package/dist/esm/components/dialog.js.map +2 -2
- package/dist/esm/components/gird.js +1 -1
- package/dist/esm/components/gird.js.map +2 -2
- package/dist/esm/components/heading.d.ts +1 -1
- package/dist/esm/components/heading.js +1 -1
- package/dist/esm/components/heading.js.map +2 -2
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +2 -2
- package/dist/esm/helpers/utils.js +1 -1
- package/dist/esm/helpers/utils.js.map +2 -2
- package/dist/esm/stories/accordionCards.stories.d.ts +28 -0
- package/dist/esm/stories/accordionCards.stories.js +2 -0
- package/dist/esm/stories/accordionCards.stories.js.map +7 -0
- package/dist/esm/stories/badge.stories.d.ts +17 -2
- package/dist/esm/stories/badge.stories.js +1 -1
- package/dist/esm/stories/badge.stories.js.map +3 -3
- package/dist/esm/stories/button.stories.d.ts +3 -1
- package/dist/esm/stories/button.stories.js +1 -1
- package/dist/esm/stories/button.stories.js.map +3 -3
- package/dist/esm/stories/container.stories.js +6 -6
- package/dist/esm/stories/container.stories.js.map +2 -2
- package/dist/esm/stories/dialog.stories.js +1 -1
- package/dist/esm/stories/dialog.stories.js.map +2 -2
- package/dist/esm/stories/evaluate.stories.js +1 -1
- package/dist/esm/stories/evaluate.stories.js.map +2 -2
- package/dist/esm/stories/graphic.stories.d.ts +49 -0
- package/dist/esm/stories/graphic.stories.js +2 -0
- package/dist/esm/stories/graphic.stories.js.map +7 -0
- package/dist/esm/stories/heading.stories.d.ts +3 -2
- package/dist/esm/stories/heading.stories.js +1 -1
- package/dist/esm/stories/heading.stories.js.map +2 -2
- package/dist/esm/stories/text.stories.js +2 -2
- package/dist/esm/stories/text.stories.js.map +2 -2
- package/package.json +5 -4
- package/style.css +180 -70
- package/src/biz-components/BrandEquity/BrandEquity.tsx +0 -77
- package/src/biz-components/BrandEquity/index.ts +0 -1
- package/src/biz-components/Category/index.tsx +0 -57
- package/src/biz-components/Evaluate/index.tsx +0 -85
- package/src/biz-components/HeroBanner/HeroBanner.tsx +0 -103
- package/src/biz-components/HeroBanner/index.tsx +0 -1
- package/src/biz-components/HeroBanner/types.ts +0 -28
- package/src/biz-components/Marquee/index.tsx +0 -79
- package/src/biz-components/MemberEquity/index.tsx +0 -114
- package/src/biz-components/MemberEquity/types.ts +0 -26
- package/src/biz-components/Shelf/Shelf.tsx +0 -22
- package/src/biz-components/Shelf/index.ts +0 -1
- package/src/biz-components/Shelf/types.ts +0 -6
- package/src/biz-components/ShelfDisplay/index.tsx +0 -142
- package/src/biz-components/Slogan/index.tsx +0 -53
- package/src/biz-components/Slogan/types.ts +0 -25
- package/src/biz-components/index.ts +0 -11
- package/src/components/alert.tsx +0 -124
- package/src/components/avatar.tsx +0 -126
- package/src/components/badge.tsx +0 -27
- package/src/components/button.tsx +0 -183
- package/src/components/card.tsx +0 -51
- package/src/components/carousel.tsx +0 -352
- package/src/components/checkbox.tsx +0 -42
- package/src/components/color.tsx +0 -77
- package/src/components/container.tsx +0 -28
- package/src/components/dialog.tsx +0 -98
- package/src/components/drawer.tsx +0 -115
- package/src/components/drop-down.tsx +0 -182
- package/src/components/gird.tsx +0 -90
- package/src/components/heading.tsx +0 -80
- package/src/components/index.ts +0 -26
- package/src/components/input-number.tsx +0 -216
- package/src/components/input.tsx +0 -79
- package/src/components/link.tsx +0 -99
- package/src/components/picture.tsx +0 -100
- package/src/components/popover.tsx +0 -31
- package/src/components/radio.tsx +0 -85
- package/src/components/skeleton.tsx +0 -41
- package/src/components/tabs.tsx +0 -78
- package/src/components/text.tsx +0 -99
- package/src/components/theme.tsx +0 -20
- package/src/helpers/component-props.ts +0 -17
- package/src/helpers/constants.ts +0 -0
- package/src/helpers/index.ts +0 -2
- package/src/helpers/utils.ts +0 -16
- package/src/icons/spinner.tsx +0 -26
- package/src/index.ts +0 -1
- package/src/shared/Styles.tsx +0 -94
- package/src/stories/HeroBanner.stories.tsx +0 -86
- package/src/stories/MemberEquity.stories.tsx +0 -107
- package/src/stories/alert.stories.tsx +0 -41
- package/src/stories/avatar.stories.tsx +0 -83
- package/src/stories/badge.stories.tsx +0 -40
- package/src/stories/brandEquity.stories.tsx +0 -73
- package/src/stories/button.stories.tsx +0 -145
- package/src/stories/card.stories.tsx +0 -97
- package/src/stories/carousel.stories.tsx +0 -161
- package/src/stories/category.stories.tsx +0 -52
- package/src/stories/checkbox.stories.tsx +0 -93
- package/src/stories/container.stories.tsx +0 -97
- package/src/stories/dialog.stories.tsx +0 -74
- package/src/stories/drawer.stories.tsx +0 -88
- package/src/stories/drop-down.stories.tsx +0 -83
- package/src/stories/evaluate.stories.tsx +0 -53
- package/src/stories/grid.stories.tsx +0 -190
- package/src/stories/heading.stories.tsx +0 -96
- package/src/stories/input-number.stories.tsx +0 -52
- package/src/stories/input.stories.tsx +0 -64
- package/src/stories/link.stories.tsx +0 -142
- package/src/stories/marquee.stories.tsx +0 -102
- package/src/stories/picture.stories.tsx +0 -51
- package/src/stories/popover.stories.tsx +0 -41
- package/src/stories/radio.stories.tsx +0 -55
- package/src/stories/shelf.stories.tsx +0 -35
- package/src/stories/shelfDisplay.stories.tsx +0 -69
- package/src/stories/skeleton.stories.tsx +0 -67
- package/src/stories/slogan.stories.tsx +0 -99
- package/src/stories/tabs.stories.tsx +0 -179
- package/src/stories/text.stories.tsx +0 -130
- package/src/styles/global.css +0 -4
- package/src/styles/index.css +0 -0
- package/src/types/index.ts +0 -0
- package/src/types/props.ts +0 -5
|
@@ -30,6 +30,7 @@ declare const meta: {
|
|
|
30
30
|
type: "select";
|
|
31
31
|
};
|
|
32
32
|
options: string[];
|
|
33
|
+
description: string;
|
|
33
34
|
table: {
|
|
34
35
|
defaultValue: {
|
|
35
36
|
summary: string;
|
|
@@ -71,8 +72,8 @@ declare const meta: {
|
|
|
71
72
|
};
|
|
72
73
|
args: {
|
|
73
74
|
as: "h1";
|
|
74
|
-
size:
|
|
75
|
-
weight: "
|
|
75
|
+
size: 1;
|
|
76
|
+
weight: "bold";
|
|
76
77
|
align: "left";
|
|
77
78
|
};
|
|
78
79
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var c=(t,o)=>{for(var i in o)s(t,i,{get:o[i],enumerable:!0})},y=(t,o,i,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of d(o))!p.call(t,r)&&r!==i&&s(t,r,{get:()=>o[r],enumerable:!(l=n(o,r))||l.enumerable});return t};var u=t=>y(s({},"__esModule",{value:!0}),t);var b={};c(b,{All:()=>f,Default:()=>g,default:()=>h});module.exports=u(b);var e=require("react/jsx-runtime"),a=require("../components/index.js"),x=require("react");const m={title:"Typography/Heading",component:a.Heading,parameters:{layout:"padded",docs:{description:{component:"Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002"}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:[1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE5\u52301\uFF0C\u8D8A\u6765\u8D8A\u5C0F",table:{defaultValue:{summary:"5"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var h=m;const g={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog."}},f={render:()=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.Heading,{size:1,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(a.Heading,{size:2,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(a.Heading,{size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(a.Heading,{size:4,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(a.Heading,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})};
|
|
2
2
|
//# sourceMappingURL=heading.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/heading.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: 'Heading \u7EC4\u4EF6, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: [1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE5\u52301\uFF0C\u8D8A\u6765\u8D8A\u5C0F',\n table: {\n defaultValue: { summary: '5' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: 'Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: [1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE5\u52301\uFF0C\u8D8A\u6765\u8D8A\u5C0F',\n table: {\n defaultValue: { summary: '5' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n },\n}\n\nexport const All: Story = {\n render: () => (\n <>\n <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n </>\n ),\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GAwFI,IAAAM,EAAA,6BAtFJC,EAAwB,kCACxBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAW,UACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,8PACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,EAAG,EAAG,EAAG,EAAG,CAAC,EACvB,YAAa,6EACb,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,SAAU,WAAY,OAAQ,YAAa,OAAO,EAC5D,YAAa,2EACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5C,YAAa,gCACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,GAAI,KACJ,KAAM,EACN,OAAQ,OACR,MAAO,MACT,CACF,EAEA,IAAOL,EAAQK,EAIR,MAAMN,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,+CACZ,CACF,EAEaD,EAAa,CACxB,OAAQ,OACN,oBACE,oBAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,GAChE,CAEJ",
|
|
6
6
|
"names": ["heading_stories_exports", "__export", "All", "Default", "heading_stories_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var d=(r,o)=>{for(var a in o)i(r,a,{get:o[a],enumerable:!0})},f=(r,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of p(o))!c.call(r,l)&&l!==a&&i(r,l,{get:()=>o[l],enumerable:!(n=s(o,l))||n.enumerable});return r};var m=r=>f(i({},"__esModule",{value:!0}),r);var T={};d(T,{Default:()=>h,Html:()=>b,Sizes:()=>g,default:()=>y,weight:()=>x});module.exports=m(T);var e=require("react/jsx-runtime"),t=require("../components/index.js"),z=require("react");const u={title:"Typography/Text",component:t.Text,parameters:{layout:"padded",docs:{description:{component:"\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9."}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898",options:[1,2,3],table:{defaultValue:{summary:"3"}}},weight:{control:{type:"select"},options:["light","normal","medium","semibold","bold"],table:{defaultValue:{summary:"normal"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weight:"normal",align:"left",html:"",as:"p"}};var y=u;const h={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"normal"}},g={render(){return(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{size:1,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:2,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:3,children:"The quick brown fox jumps over the lazy dog."})]})}},x={render(){return(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{weight:"light",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"normal",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."})]})}},b={render(){return(0,e.jsx)(t.Text,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
|
|
2
2
|
to right,
|
|
3
3
|
#00ff00, /* \u7EFF\u8272 */
|
|
4
4
|
#00ff99, /* \u6D45\u7EFF\u8272 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/text.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: '\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898',\n options: [1, 2, 3],\n table: {\n defaultValue: { summary: '3' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['light', 'normal', 'medium', 'bold'],\n table: {\n defaultValue: { summary: 'normal' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n options: ['div', 'label', 'p', 'span'],\n table: {\n defaultValue: { summary: 'span' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n size: 3,\n weight: 'normal',\n align: 'left',\n html: '',\n as: 'p',\n },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: ' The quick brown fox jumps over the lazy dog.',\n size: 3,\n weight: 'normal',\n },\n}\n\nexport const Sizes: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const weight: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\n\n\nexport const Html: Story = {\n render() {\n return (\n <Text\n html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n to right, \n #00ff00, /* \u7EFF\u8272 */\n #00ff99, /* \u6D45\u7EFF\u8272 */\n #00ffff, /* \u9752\u8272 */\n #0099ff, /* \u6D45\u84DD\u8272 */\n #8000ff, /* \u7D2B\u8272 */\n #ff00ff /* \u7C89\u8272 */\n );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n />\n )\n },\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,SAAAC,EAAA,UAAAC,EAAA,YAAAC,EAAA,WAAAC,IAAA,eAAAC,EAAAP,GAyFM,IAAAQ,EAAA,6BAvFNC,EAAqB,kCACrBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAW,OACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,6EACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,+FACb,QAAS,CAAC,EAAG,EAAG,CAAC,EACjB,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,MAAM,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: '\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898',\n options: [1, 2, 3],\n table: {\n defaultValue: { summary: '3' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['light', 'normal', 'medium', 'semibold', 'bold'],\n table: {\n defaultValue: { summary: 'normal' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n options: ['div', 'label', 'p', 'span'],\n table: {\n defaultValue: { summary: 'span' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n size: 3,\n weight: 'normal',\n align: 'left',\n html: '',\n as: 'p',\n },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: ' The quick brown fox jumps over the lazy dog.',\n size: 3,\n weight: 'normal',\n },\n}\n\nexport const Sizes: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const weight: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\n\n\nexport const Html: Story = {\n render() {\n return (\n <Text\n html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n to right, \n #00ff00, /* \u7EFF\u8272 */\n #00ff99, /* \u6D45\u7EFF\u8272 */\n #00ffff, /* \u9752\u8272 */\n #0099ff, /* \u6D45\u84DD\u8272 */\n #8000ff, /* \u7D2B\u8272 */\n #ff00ff /* \u7C89\u8272 */\n );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n />\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,SAAAC,EAAA,UAAAC,EAAA,YAAAC,EAAA,WAAAC,IAAA,eAAAC,EAAAP,GAyFM,IAAAQ,EAAA,6BAvFNC,EAAqB,kCACrBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAW,OACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,6EACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,+FACb,QAAS,CAAC,EAAG,EAAG,CAAC,EACjB,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,WAAY,MAAM,EACzD,MAAO,CACL,aAAc,CAAE,QAAS,QAAS,CACpC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,YAAa,sFACb,QAAS,CAAC,MAAO,QAAS,IAAK,MAAM,EACrC,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,KAAM,EACN,OAAQ,SACR,MAAO,OACP,KAAM,GACN,GAAI,GACN,CACF,EAEA,IAAON,EAAQM,EAGR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,OAAQ,QACV,CACF,EAEaE,EAAe,CAC1B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaE,EAAgB,CAC3B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,OAAO,QAAQ,wDAA4C,KACjE,OAAC,QAAK,OAAO,SAAS,wDAA4C,KAClE,OAAC,QAAK,OAAO,SAAS,wDAA4C,KAClE,OAAC,QAAK,OAAO,OAAO,wDAA4C,GAClE,CAEJ,CACF,EAIaH,EAAc,CACzB,QAAS,CACP,SACE,OAAC,QACC,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wGASR,CAEJ,CACF",
|
|
6
6
|
"names": ["text_stories_exports", "__export", "Default", "Html", "Sizes", "text_stories_default", "weight", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
type AccordionCardsType = {
|
|
2
|
+
products: Array<{
|
|
3
|
+
/** 标题文本 */
|
|
4
|
+
title: string;
|
|
5
|
+
/** 图片*/
|
|
6
|
+
img: string;
|
|
7
|
+
/** 内容节点 */
|
|
8
|
+
subTitle: string;
|
|
9
|
+
}>;
|
|
10
|
+
className?: string;
|
|
11
|
+
/** 按钮形状 */
|
|
12
|
+
shape?: 'round' | 'square';
|
|
13
|
+
/** 卡片形状 */
|
|
14
|
+
itemShape?: 'round' | 'square';
|
|
15
|
+
/** 主按钮配置 */
|
|
16
|
+
primaryButton?: string;
|
|
17
|
+
/** 按钮事件*/
|
|
18
|
+
event?: {
|
|
19
|
+
primaryButton?: {
|
|
20
|
+
onClick: (v: any) => void;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
declare const AccordionCards: ({ products, className, shape, itemShape, event, primaryButton, }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export default AccordionCards;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as r,jsxs as c}from"react/jsx-runtime";import{useState as u,useEffect as h,useRef as b}from"react";import{cn as s}from"../../helpers/utils.js";import x from"../../components/picture.js";import W from"../../components/button.js";function C(){const[i,l]=u(window?.innerWidth||0);return h(()=>{const d=()=>l(window?.innerWidth||0);return window?.addEventListener("resize",d),()=>window?.removeEventListener("resize",d)},[]),i<=768}const L=({products:i=[],className:l="",shape:d="square",itemShape:F="square",event:w,primaryButton:g=""})=>{const y=C(),[E,m]=u(null),[k,f]=u({}),p=b([]),a=b({}),N=(t,e)=>{e&&(p.current[t]=e)},v=t=>{const e={...a.current,[t]:!0};f(e),a.current=e};return h(()=>{const t=p.current;return t?.forEach((e,n)=>{e.addEventListener("transitionend",()=>v(n))}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>v(n))})}},[]),y?r("div",{className:s("flex gap-4 overflow-x-auto w-full h-[400px]",l),children:i?.map((t,e)=>r("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:r(x,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img})},e))}):r("div",{className:s("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",l),children:i?.map((t,e)=>{const n=E===e;return c("div",{style:{flex:n?6:1,transition:"all 0.3s ease-in-out"},ref:o=>o&&N(e,o),className:s("relative overflow-hidden cursor-pointer",F==="round"?"rounded-2xl":""),onMouseEnter:()=>m(e),onMouseLeave:()=>{m(null);const o={...a.current,[e]:!1};f(o),a.current=o},children:[r(x,{source:t?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),k?.[e]?c("div",{className:s("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",n?"opacity-100":"opacity-0"),children:[c("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:t?.subTitle})]}),r(W,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>w?.primaryButton?.onClick?.(t),className:s("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base",d==="round"?"rounded-2xl":""),children:g})]}):null]},e)})})};var z=L;export{z as default};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useState, useEffect, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n const [width, setWidth] = useState(window?.innerWidth || 0)\n useEffect(() => {\n const onResize = () => setWidth(window?.innerWidth || 0)\n window?.addEventListener('resize', onResize)\n return () => window?.removeEventListener('resize', onResize)\n }, [])\n return width <= 768\n}\n\ntype AccordionCardsType = {\n products: Array<{\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: string\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n }>\n className?: string\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }\n }\n}\n\nconst AccordionCards = ({\n products = [],\n className = '',\n shape = 'square',\n itemShape = 'square',\n event,\n primaryButton = '',\n}: AccordionCardsType) => {\n const isMobile = useWindowWidth()\n const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({})\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const refWidth = useRef<{ [key: number]: boolean }>({})\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n const current = { ...refWidth.current, [index]: true }\n setCurrentWidth(current)\n refWidth.current = current\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n item.addEventListener('transitionend', () => handleTransitionEnd(index))\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n // \u79FB\u52A8\u7AEF\n if (isMobile) {\n return (\n <div className={cn('flex gap-4 overflow-x-auto w-full h-[400px]', className)}>\n {products?.map((item, idx) => (\n <div key={idx} className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\">\n <Picture className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\" source={item?.img} />\n </div>\n ))}\n </div>\n )\n }\n\n // \u684C\u9762\u7AEF\n return (\n <div className={cn('h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]', className)}>\n {products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 6 : 1\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n transition: 'all 0.3s ease-in-out',\n }}\n ref={el => el && getRef(idx, el)}\n className={cn('relative overflow-hidden cursor-pointer', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => setHoverIndex(idx)}\n onMouseLeave={() => {\n setHoverIndex(null)\n const current = { ...refWidth.current, [idx]: false }\n setCurrentWidth(current)\n refWidth.current = current\n }}\n >\n <Picture source={item?.img} className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\" />\n {currentWidth?.[idx] ? (\n <div\n className={cn(\n 'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n 'transition-all duration-[50ms] delay-[300ms]',\n isExpanded ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-1 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">\n {item?.title}\n </p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n onClick={() => event?.primaryButton?.onClick?.(item)}\n className={cn(\n 'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base',\n shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {primaryButton}\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
|
+
"mappings": "AAqFY,cAAAA,EAuCI,QAAAC,MAvCJ,oBArFZ,OAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QAC5C,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BAGnB,SAASC,GAAiB,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIR,EAAS,QAAQ,YAAc,CAAC,EAC1D,OAAAC,EAAU,IAAM,CACd,MAAMQ,EAAW,IAAMD,EAAS,QAAQ,YAAc,CAAC,EACvD,eAAQ,iBAAiB,SAAUC,CAAQ,EACpC,IAAM,QAAQ,oBAAoB,SAAUA,CAAQ,CAC7D,EAAG,CAAC,CAAC,EACEF,GAAS,GAClB,CA0BA,MAAMG,EAAiB,CAAC,CACtB,SAAAC,EAAW,CAAC,EACZ,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,UAAAC,EAAY,SACZ,MAAAC,EACA,cAAAC,EAAgB,EAClB,IAA0B,CACxB,MAAMC,EAAWX,EAAe,EAC1B,CAACY,EAAYC,CAAa,EAAInB,EAAwB,IAAI,EAC1D,CAACoB,EAAcC,CAAe,EAAIrB,EAAqC,CAAC,CAAC,EAEzEsB,EAAepB,EAAyB,CAAC,CAAC,EAC1CqB,EAAWrB,EAAmC,CAAC,CAAC,EAEhDsB,EAAS,CAACC,EAAeC,IAAuB,CAChDA,IACFJ,EAAa,QAAQG,CAAK,EAAIC,EAElC,EAEMC,EAAuBF,GAAkB,CAC7C,MAAMG,EAAU,CAAE,GAAGL,EAAS,QAAS,CAACE,CAAK,EAAG,EAAK,EACrDJ,EAAgBO,CAAO,EACvBL,EAAS,QAAUK,CACrB,EAeA,OAbA3B,EAAU,IAAM,CACd,MAAM4B,EAAUP,EAAa,QAC7B,OAAAO,GAAS,QAAQ,CAACC,EAAML,IAAU,CAChCK,EAAK,iBAAiB,gBAAiB,IAAMH,EAAoBF,CAAK,CAAC,CACzE,CAAC,EACM,IAAM,CACXI,GAAS,QAAQ,CAACC,EAAML,IAAU,CAChCK,EAAK,oBAAoB,gBAAiB,IAAMH,EAAoBF,CAAK,CAAC,CAC5E,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAGDR,EAEAnB,EAAC,OAAI,UAAWK,EAAG,8CAA+CS,CAAS,EACxE,SAAAD,GAAU,IAAI,CAACmB,EAAMC,IACpBjC,EAAC,OAAc,UAAU,kFACvB,SAAAA,EAACM,EAAA,CAAQ,UAAU,iEAAiE,OAAQ0B,GAAM,IAAK,GAD/FC,CAEV,CACD,EACH,EAMFjC,EAAC,OAAI,UAAWK,EAAG,iFAAkFS,CAAS,EAC3G,SAAAD,GAAU,IAAI,CAACmB,EAAMC,IAAQ,CAC5B,MAAMC,EAAad,IAAea,EAElC,OACEhC,EAAC,OAEC,MAAO,CACL,KALYiC,EAAa,EAAI,EAM7B,WAAY,sBACd,EACA,IAAKN,GAAMA,GAAMF,EAAOO,EAAKL,CAAE,EAC/B,UAAWvB,EAAG,0CAA2CW,IAAc,QAAU,cAAgB,EAAE,EACnG,aAAc,IAAMK,EAAcY,CAAG,EACrC,aAAc,IAAM,CAClBZ,EAAc,IAAI,EAClB,MAAMS,EAAU,CAAE,GAAGL,EAAS,QAAS,CAACQ,CAAG,EAAG,EAAM,EACpDV,EAAgBO,CAAO,EACvBL,EAAS,QAAUK,CACrB,EAEA,UAAA9B,EAACM,EAAA,CAAQ,OAAQ0B,GAAM,IAAK,UAAU,iEAAiE,EACtGV,IAAeW,CAAG,EACjBhC,EAAC,OACC,UAAWI,EACT,4FACA,+CACA6B,EAAa,cAAgB,WAC/B,EAEA,UAAAjC,EAAC,OAAI,UAAU,8BACb,UAAAD,EAAC,KAAE,UAAU,4EACV,SAAAgC,GAAM,MACT,EACAhC,EAAC,MAAG,UAAU,qDAAsD,SAAAgC,GAAM,SAAS,GACrF,EACAhC,EAACO,EAAA,CACC,KAAK,KACL,YAAY,QACZ,QAAQ,YACR,QAAS,IAAMU,GAAO,eAAe,UAAUe,CAAI,EACnD,UAAW3B,EACT,2FACAU,IAAU,QAAU,cAAgB,EACtC,EAEC,SAAAG,EACH,GACF,EACE,OA3CCe,CA4CP,CAEJ,CAAC,EACH,CAEJ,EAEA,IAAOE,EAAQvB",
|
|
6
|
+
"names": ["jsx", "jsxs", "useState", "useEffect", "useRef", "cn", "Picture", "Button", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "isExpanded", "AccordionCards_default"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import d from"../../components/picture.js";import{withStyles as c}from"../../shared/Styles.js";const m=({items:p=[],itemShape:r="square",style:x="",className:i=""})=>e("div",{className:a("brand-equity-wrapper w-full bg-[#F7F8F9]",i),children:e("div",{className:a("grid gap-3 px-4","grid-cols-1 tablet:px-8 tablet:grid-cols-2","laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10","desktop:px-[175px] lg-desktop:px-[268px]"),children:p.map((t,o)=>s("div",{className:a("brand-equity-item","bg-white p-4 flex flex-col","desktop:p-6","gap-12 desktop:gap-16","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(o)},r==="round"?"rounded-[16px]":"rounded-none"),children:[s("div",{className:"flex justify-between items-center gap-3",children:[e("h3",{className:"text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] 2xl:text-lg",children:t.title}),t.avatarList?.length?e("div",{className:"flex -space-x-2",children:t.avatarList.map((l,n)=>e("div",{className:a("size-[30px] rounded-full border-2 border-white overflow-hidden","relative inline-block","lg-desktop:size-[36px]"),children:e(d,{source:l,className:"w-full h-full object-cover"})},n))}):e("span",{className:"text-[#1D1D1F]",children:t.icon})]}),e("p",{className:"font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] 2xl:text-2xl",children:t.description})]},o))})});var y=c(m);export{y as default};
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n items: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', style = '', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full', className)}>\n <div\n className={cn(\n 'grid gap-3 px-4',\n 'grid-cols-1
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n items: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', style = '', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full bg-[#F7F8F9]', className)}>\n <div\n className={cn(\n 'grid gap-3 px-4',\n 'grid-cols-1 tablet:px-8 tablet:grid-cols-2',\n 'laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10',\n 'desktop:px-[175px] lg-desktop:px-[268px]'\n )}\n >\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'bg-white p-4 flex flex-col',\n 'desktop:p-6',\n 'gap-12 desktop:gap-16',\n 'laptop:col-span-3',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"flex justify-between items-center gap-3\">\n <h3 className=\"text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] 2xl:text-lg\">\n {item.title}\n </h3>\n {item.avatarList?.length ? (\n <div className=\"flex -space-x-2\">\n {item.avatarList.map((avatarUrl: string, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] rounded-full border-2 border-white overflow-hidden',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={avatarUrl} className=\"w-full h-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n )}\n </div>\n <p className=\"font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] 2xl:text-2xl\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "AA+CY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA/CZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,MAAAC,EAAQ,GAAI,UAAAC,EAAY,EAAG,IAE5GT,EAAC,OAAI,UAAWE,EAAG,2CAA4CO,CAAS,EACtE,SAAAT,EAAC,OACC,UAAWE,EACT,kBACA,6CACA,qDACA,0CACF,EAEC,SAAAI,EAAM,IAAI,CAACI,EAAMC,IAChBV,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASS,CAAK,CACrD,EACAJ,IAAc,QAAU,iBAAmB,cAC7C,EAEA,UAAAN,EAAC,OAAI,UAAU,0CACb,UAAAD,EAAC,MAAG,UAAU,oFACX,SAAAU,EAAK,MACR,EACCA,EAAK,YAAY,OAChBV,EAAC,OAAI,UAAU,kBACZ,SAAAU,EAAK,WAAW,IAAI,CAACE,EAAmBD,IACvCX,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQS,EAAW,UAAU,6BAA6B,GAP9DD,CAQP,CACD,EACH,EAEAX,EAAC,QAAK,UAAU,iBAAkB,SAAAU,EAAK,KAAK,GAEhD,EACAV,EAAC,KAAE,UAAU,iFACV,SAAAU,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOE,EAAQT,EAAWC,CAAW",
|
|
6
6
|
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "style", "className", "item", "index", "avatarUrl", "BrandEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as m,jsx as e,jsxs as i}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import s from"../../components/picture.js";const d=({className:r="",shape:a="square",products:p=[]})=>e(m,{children:e("div",{className:o("w-full",r),children:e("div",{className:o("flex overflow-hidden"),children:e("div",{className:o("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:p?.map((t,l)=>i("div",{className:o("bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden","laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8",a==="round"?"rounded-[16px]":"rounded-none"),children:[e(s,{className:"w-full object-cover",source:t?.img}),e("p",{className:"flex-1 text-sm text-center font-semibold desktop:text-lg",children:t?.title})]},l))})})})});var g=d;export{g as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n}\n\nexport interface CategoryProps {\n products: CategoryItem[]\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n}\n\nconst Category: React.FC<CategoryProps> = ({\n className = '',\n shape = 'square',\n products = [],\n}) => {\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden'
|
|
5
|
-
"mappings": "AAyBI,mBAAAA,EAcc,OAAAC,EARF,QAAAC,MANZ,oBAzBJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n}\n\nexport interface CategoryProps {\n products: CategoryItem[]\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n}\n\nconst Category: React.FC<CategoryProps> = ({\n className = '',\n shape = 'square',\n products = [],\n}) => {\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden')}>\n <div className={cn('w-full flex', 'gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden')}>\n {products?.map((item, index) => {\n return (\n <div\n key={index}\n className={cn(\n 'bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden',\n 'laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8',\n shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture\n className=\"w-full object-cover\"\n source={item?.img}\n />\n <p className=\"flex-1 text-sm text-center font-semibold desktop:text-lg\">\n {item?.title}\n </p>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n </>\n )\n}\n\nexport default Category\n"],
|
|
5
|
+
"mappings": "AAyBI,mBAAAA,EAcc,OAAAC,EARF,QAAAC,MANZ,oBAzBJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BAiBpB,MAAMC,EAAoC,CAAC,CACzC,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,SAAAC,EAAW,CAAC,CACd,IAEIP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAWE,EAAG,SAAUG,CAAS,EACpC,SAAAL,EAAC,OAAI,UAAWE,EAAG,sBAAsB,EACvC,SAAAF,EAAC,OAAI,UAAWE,EAAG,cAAe,sDAAsD,EACrF,SAAAK,GAAU,IAAI,CAACC,EAAMC,IAElBR,EAAC,OAEC,UAAWC,EACT,wFACA,+GACAI,IAAU,QAAU,iBAAmB,cACzC,EAEA,UAAAN,EAACG,EAAA,CACC,UAAU,sBACV,OAAQK,GAAM,IAChB,EACAR,EAAC,KAAE,UAAU,2DACV,SAAAQ,GAAM,MACT,IAbKC,CAcP,CAEH,EACH,EACF,EACF,EACF,EAIJ,IAAOC,EAAQN",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "cn", "Picture", "Category", "className", "shape", "products", "item", "index", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as x,jsx as e,jsxs as l}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import n from"../../components/picture.js";import{Avatar as m,AvatarImage as v,AvatarFallback as c}from"../../components/avatar.js";const f=({className:r="",shape:s="square",products:o=[]})=>{const i=t=>t?Array.from(new Array(Number(t)))||[]:[];return e(x,{children:e("div",{className:a("w-full",r),children:e("div",{className:a("flex overflow-hidden"),children:e("div",{className:a("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:o?.map((t,d)=>l("div",{className:a("bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden","laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6",s==="round"?"rounded-2xl":"rounded-none"),children:[l("div",{className:a("mb-8 w-full flex justify-between laptop:mb-11 desktop:mb-16"),children:[l("div",{className:"flex-1",children:[e("h4",{className:"text-sm font-semibold laptop:text-lg",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:i(t?.rating)?.map?.((u,p)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},p))})]}),e("div",{className:"size-10 overflow-hidden desktop:size-12",children:l(m,{className:"w-full h-full",children:[e(v,{src:t?.avatar}),e(c,{children:t?.title})]})})]}),e("p",{className:"flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] desktop:text-2xl",children:t?.description||""}),l("div",{className:a("mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden",s==="round"?"rounded-[8px]":"rounded-none"),children:[e("div",{className:"flex items-center mr-3 size-12 laptop:size-16 desktop:size-20",children:e(n,{className:"w-full object-cover",source:t?.img})}),e("p",{className:"flex-1 text-sm font-semibold line-clamp-2 desktop:text-lg",children:t?.subTitle||""})]})]},d))})})})})};var k=f;export{k as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n subTitle: string\n description: string\n avatar?: string\n}\n\nexport interface EvaluateProps {\n products: EvaluateItem[]\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({\n className = '',\n shape = 'square',\n products = [],\n}) => {\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden'
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "cn", "Picture", "Avatar", "AvatarImage", "AvatarFallback", "Evaluate", "className", "shape", "products", "item", "index", "Evaluate_default"]
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n subTitle: string\n description: string\n avatar?: string\n rating: number\n}\n\nexport interface EvaluateProps {\n products: EvaluateItem[]\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({\n className = '',\n shape = 'square',\n products = [],\n}) => {\n\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden')}>\n <div className={cn('w-full flex', 'gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden')}>\n {products?.map((item, index) => {\n return (\n <div\n key={index}\n className={cn(\n 'bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden',\n 'laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6',\n shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('mb-8 w-full flex justify-between laptop:mb-11 desktop:mb-16')}>\n <div className=\"flex-1\">\n <h4 className=\"text-sm font-semibold laptop:text-lg\">{item?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {\n handleRating(item?.rating)?.map?.((_, index) => {\n return <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n })\n }\n </div>\n </div>\n <div className=\"size-10 overflow-hidden desktop:size-12\">\n <Avatar className=\"w-full h-full\">\n <AvatarImage src={item?.avatar} />\n <AvatarFallback>{item?.title}</AvatarFallback>\n </Avatar>\n </div>\n </div>\n <p className=\"flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] desktop:text-2xl\">\n {item?.description || ''}\n </p>\n <div className={cn('mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden', shape === 'round' ? 'rounded-[8px]' : 'rounded-none')}>\n <div className=\"flex items-center mr-3 size-12 laptop:size-16 desktop:size-20\">\n <Picture\n className=\"w-full object-cover\"\n source={item?.img}\n />\n </div>\n <p className=\"flex-1 text-sm font-semibold line-clamp-2 desktop:text-lg\">\n {item?.subTitle || ''}\n </p>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n </>\n )\n}\n\nexport default Evaluate\n"],
|
|
5
|
+
"mappings": "AAsCI,mBAAAA,EAgBkB,OAAAC,EADF,QAAAC,MAfhB,oBAtCJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BAqBpD,MAAMC,EAAoC,CAAC,CACzC,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,SAAAC,EAAW,CAAC,CACd,IAAM,CAEJ,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OACEZ,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAWE,EAAG,SAAUM,CAAS,EACpC,SAAAR,EAAC,OAAI,UAAWE,EAAG,sBAAsB,EACvC,SAAAF,EAAC,OAAI,UAAWE,EAAG,cAAe,sDAAsD,EACrF,SAAAQ,GAAU,IAAI,CAACG,EAAMC,IAElBb,EAAC,OAEC,UAAWC,EACT,wFACA,+HACAO,IAAU,QAAU,cAAgB,cACtC,EAEA,UAAAR,EAAC,OAAI,UAAWC,EAAG,6DAA6D,EAC9E,UAAAD,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,uCAAwC,SAAAa,GAAM,MAAM,EAClEb,EAAC,OAAI,UAAU,yBAEb,SAAAW,EAAaE,GAAM,MAAM,GAAG,MAAM,CAACE,EAAGD,IAC7Bd,EAAC,OAAgB,UAAU,OAChC,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANec,CAOjB,CACD,EAEH,GACF,EACAd,EAAC,OAAI,UAAU,0CACb,SAAAC,EAACG,EAAA,CAAO,UAAU,gBAChB,UAAAJ,EAACK,EAAA,CAAY,IAAKQ,GAAM,OAAQ,EAChCb,EAACM,EAAA,CAAgB,SAAAO,GAAM,MAAM,GAC/B,EACF,GACF,EACAb,EAAC,KAAE,UAAU,wEACV,SAAAa,GAAM,aAAe,GACxB,EACAZ,EAAC,OAAI,UAAWC,EAAG,2DAA4DO,IAAU,QAAU,gBAAkB,cAAc,EACjI,UAAAT,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACG,EAAA,CACC,UAAU,sBACV,OAAQU,GAAM,IAChB,EACF,EACAb,EAAC,KAAE,UAAU,4DACV,SAAAa,GAAM,UAAY,GACrB,GACF,IA7CKC,CA8CP,CAEH,EACH,EACF,EACF,EACF,CAEJ,EAEA,IAAOE,EAAQT",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "cn", "Picture", "Avatar", "AvatarImage", "AvatarFallback", "Evaluate", "className", "shape", "products", "handleRating", "num", "item", "index", "_", "Evaluate_default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface GraphicProps {
|
|
3
|
+
className?: string;
|
|
4
|
+
items: {
|
|
5
|
+
imgUrl: string;
|
|
6
|
+
title: string;
|
|
7
|
+
textColor?: string;
|
|
8
|
+
}[];
|
|
9
|
+
shape?: 'round' | 'square';
|
|
10
|
+
}
|
|
11
|
+
declare const _default: {
|
|
12
|
+
(props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
15
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as e,jsxs as k}from"react/jsx-runtime";import p,{useMemo as d}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as f}from"../../shared/Styles.js";import{Carousel as u,CarouselContent as g,CarouselItem as h}from"../../components/index.js";import{Picture as b,Text as C}from"../../components/index.js";const r=p.forwardRef(({items:o,shape:i,className:n,...m},x)=>{const l=o?.length||0,c=d(()=>{const s="basis-[296px]";let t="";return l===1&&(t="basis-[100%]"),l===2&&(t="tablet:basis-1/2"),l===3&&(t="laptop:basis-1/3"),l>3&&(t="laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]"),`${s} ${t}`},[l]);return e(u,{ref:x,opts:{align:"start"},className:a("px-4 tablet:px-8 laptop:px-16",n),...m,children:e(p.Fragment,{children:e(g,{children:o.map((s,t)=>e(h,{className:a("pl-3 laptop:pl-4 flex-shrink-0 h-[360px]",c),children:k("div",{className:a("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":i==="round"}),children:[e(b,{className:"h-full ",imgClassName:"h-full object-cover",source:s?.imgUrl}),e("div",{className:"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]",children:e(C,{html:s?.title,style:{color:s?.textColor},className:"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2"})})]})},t+s?.title))})},".0")})});r.displayName="Graphic";var S=f(r);export{S as default};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport interface GraphicProps {\n className?: string\n items: {\n imgUrl: string\n title: string\n textColor?: string\n }[]\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ items, shape, className, ...props }, ref) => {\n const itemsLength = items?.length || 0\n\n const itemStyle = useMemo(() => {\n const basisStyle = 'basis-[296px]'\n let breakPointStyle = ''\n if (itemsLength === 1) {\n breakPointStyle = 'basis-[100%]'\n }\n if (itemsLength === 2) {\n breakPointStyle = 'tablet:basis-1/2'\n }\n if (itemsLength === 3) {\n breakPointStyle = 'laptop:basis-1/3'\n }\n if (itemsLength > 3) {\n breakPointStyle = 'laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]'\n }\n return `${basisStyle} ${breakPointStyle}`\n }, [itemsLength])\n\n return (\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={cn('px-4 tablet:px-8 laptop:px-16', className)}\n {...props}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {items.map((item, index) => (\n <CarouselItem\n key={index + item?.title}\n className={cn('pl-3 laptop:pl-4 flex-shrink-0 h-[360px]', itemStyle)}\n >\n <div className={cn(\"relative h-full\", {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round'\n })}>\n <Picture className=\"h-full \" imgClassName=\"h-full object-cover\" source={item?.imgUrl} />\n <div className=\"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]\">\n <Text\n html={item?.title}\n style={{\n color: item?.textColor,\n }}\n className=\"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2\"\n />\n </div>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n </React.Fragment>\n </Carousel>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "AAqDc,OAGE,OAAAA,EAHF,QAAAC,MAAA,oBArDd,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAY9B,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,MAAAU,EAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC7G,MAAMC,EAAcL,GAAO,QAAU,EAE/BM,EAAYf,EAAQ,IAAM,CAC9B,MAAMgB,EAAa,gBACnB,IAAIC,EAAkB,GACtB,OAAIH,IAAgB,IAClBG,EAAkB,gBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,EAAc,IAChBG,EAAkB,uEAEb,GAAGD,CAAU,IAAIC,CAAe,EACzC,EAAG,CAACH,CAAW,CAAC,EAEhB,OACEjB,EAACM,EAAA,CACC,IAAKU,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWZ,EAAG,gCAAiCU,CAAS,EACvD,GAAGC,EAEJ,SAAAf,EAACE,EAAM,SAAN,CACC,SAAAF,EAACO,EAAA,CACE,SAAAK,EAAM,IAAI,CAACS,EAAMC,IAChBtB,EAACQ,EAAA,CAEC,UAAWJ,EAAG,2CAA4Cc,CAAS,EAEnE,SAAAjB,EAAC,OAAI,UAAWG,EAAG,kBAAmB,CACnC,gDAAkDS,IAAU,OAC/D,CAAC,EACC,UAAAb,EAACS,EAAA,CAAQ,UAAU,UAAU,aAAa,sBAAsB,OAAQY,GAAM,OAAQ,EACtFrB,EAAC,OAAI,UAAU,kEACb,SAAAA,EAACU,EAAA,CACC,KAAMW,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAhBKC,EAAQD,GAAM,KAiBrB,CACD,EACH,GAvBkB,IAwBpB,EACF,CAEJ,CAAC,EAEDV,EAAQ,YAAc,UAEtB,IAAOY,EAAQlB,EAAWM,CAAO",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useMemo", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Picture", "Text", "Graphic", "items", "shape", "className", "props", "ref", "itemsLength", "itemStyle", "basisStyle", "breakPointStyle", "item", "index", "Graphic_default"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import m from"react";import{Button as c,Text as N}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as k}from"../../shared/Styles.js";const
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import m from"react";import{Button as c,Text as N}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as k}from"../../shared/Styles.js";const p=m.forwardRef(({title:x,subtitle:d,background:g,primaryButton:n,secondaryButton:l,theme:t="light",className:b,products:i=[]},f)=>{const o=t==="dark"?"text-white":"text-[#1D1D1F]",v=t==="dark"?"bg-white":"bg-[#1D1D1F]";return r("div",{ref:f,className:a("relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat",b),style:{backgroundImage:`url(${g})`},children:[r("div",{className:"relative z-10 flex flex-col gap-8 px-32 pt-[307px]",children:[r("div",{className:"max-w-[686px] space-y-4",children:[e("h1",{className:a("hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",o),children:x}),e("p",{className:a("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",o),children:d})]}),r("div",{className:"flex items-center gap-4",children:[l&&e(c,{size:"lg",variant:"primary",theme:t,className:"hero-banner-primary-button",...l,children:l.text}),n&&e(c,{size:"lg",variant:"secondary",theme:t,...n,className:"hero-banner-secondary-button bg-transparent border-black text-black hover:bg-black hover:text-white",children:n.text})]})]}),i.length>0&&e("div",{className:"relative z-10 flex items-center gap-3 px-32 pb-6",children:i.map((h,s)=>r(m.Fragment,{children:[e(N,{className:a("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",t==="dark"?"text-white":"text-[#1D1D1F]"),children:h.title}),s<i.length-1&&e("div",{className:a("h-4 w-px",v)})]},s))})]})});p.displayName="HeroBanner";var F=k(p);export{F as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\"\nimport type { HeroBannerProps } from \"./types.js\"\nimport { Button, Text } from \"../../components/index.js\"\nimport { cn } from \"../../helpers/index.js\"\nimport { withStyles } from \"../../shared/Styles.js\"\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ \n title, \n subtitle, \n background,\n primaryButton,\n secondaryButton,\n theme = \"light\",\n className,\n products = [] \n }, ref) => {\n const textColorClass = theme === \"dark\" ? \"text-white\" : \"text-[#1D1D1F]\"\n const dividerColorClass = theme === \"dark\" ? \"bg-white\" : \"bg-[#1D1D1F]\"\n\n return (\n <div \n ref={ref} \n className={cn(\n \"relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat\",\n className\n )}\n style={{ backgroundImage: `url(${background})` }}\n >\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-10 flex flex-col gap-8 px-32 pt-[307px]\">\n <div className=\"max-w-[686px] space-y-4\">\n <h1 className={cn(\n \"hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]\",\n textColorClass\n )}>\n {title}\n </h1>\n <p className={cn(\n \"hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]\",\n textColorClass\n )}>\n {subtitle}\n </p>\n </div>\n \n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button\n size=\"lg\"\n variant=\"
|
|
5
|
-
"mappings": "AA+BU,OACE,OAAAA,EADF,QAAAC,MAAA,oBA/BV,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,QAAAC,MAAY,4BAC7B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaL,EAAM,WACvB,CAAC,CACC,MAAAM,EACA,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,QACR,UAAAC,EACA,SAAAC,EAAW,CAAC,CACd,EAAGC,IAAQ,CACT,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,OACEZ,EAAC,OACC,IAAKe,EACL,UAAWX,EACT,8GACAS,CACF,EACA,MAAO,CAAE,gBAAiB,OAAOJ,CAAU,GAAI,EAG/C,UAAAT,EAAC,OAAI,UAAU,qDACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,MAAG,UAAWK,EACb,oFACAY,CACF,EACG,SAAAT,EACH,EACAR,EAAC,KAAE,UAAWK,EACZ,4EACAY,CACF,EACG,SAAAR,EACH,GACF,EAGAR,EAAC,OAAI,UAAU,0BACZ,UAAAW,GACCZ,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,
|
|
4
|
+
"sourcesContent": ["import React from \"react\"\nimport type { HeroBannerProps } from \"./types.js\"\nimport { Button, Text } from \"../../components/index.js\"\nimport { cn } from \"../../helpers/index.js\"\nimport { withStyles } from \"../../shared/Styles.js\"\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ \n title, \n subtitle, \n background,\n primaryButton,\n secondaryButton,\n theme = \"light\",\n className,\n products = [] \n }, ref) => {\n const textColorClass = theme === \"dark\" ? \"text-white\" : \"text-[#1D1D1F]\"\n const dividerColorClass = theme === \"dark\" ? \"bg-white\" : \"bg-[#1D1D1F]\"\n\n return (\n <div \n ref={ref} \n className={cn(\n \"relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat\",\n className\n )}\n style={{ backgroundImage: `url(${background})` }}\n >\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-10 flex flex-col gap-8 px-32 pt-[307px]\">\n <div className=\"max-w-[686px] space-y-4\">\n <h1 className={cn(\n \"hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]\",\n textColorClass\n )}>\n {title}\n </h1>\n <p className={cn(\n \"hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]\",\n textColorClass\n )}>\n {subtitle}\n </p>\n </div>\n \n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n theme={theme}\n className=\"hero-banner-primary-button\"\n {...secondaryButton}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n theme={theme}\n {...primaryButton}\n className=\"hero-banner-secondary-button bg-transparent border-black text-black hover:bg-black hover:text-white\"\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"relative z-10 flex items-center gap-3 px-32 pb-6\">\n {products.map((product, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n \"hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]\",\n theme === \"dark\" ? \"text-white\" : \"text-[#1D1D1F]\"\n )}\n >\n {product.title}\n </Text>\n {index < products.length - 1 && (\n <div className={cn(\"h-4 w-px\", dividerColorClass)} />\n )}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nHeroBanner.displayName = \"HeroBanner\"\n\nexport default withStyles(HeroBanner)\n\n\n"],
|
|
5
|
+
"mappings": "AA+BU,OACE,OAAAA,EADF,QAAAC,MAAA,oBA/BV,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,QAAAC,MAAY,4BAC7B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaL,EAAM,WACvB,CAAC,CACC,MAAAM,EACA,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,QACR,UAAAC,EACA,SAAAC,EAAW,CAAC,CACd,EAAGC,IAAQ,CACT,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,OACEZ,EAAC,OACC,IAAKe,EACL,UAAWX,EACT,8GACAS,CACF,EACA,MAAO,CAAE,gBAAiB,OAAOJ,CAAU,GAAI,EAG/C,UAAAT,EAAC,OAAI,UAAU,qDACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,MAAG,UAAWK,EACb,oFACAY,CACF,EACG,SAAAT,EACH,EACAR,EAAC,KAAE,UAAWK,EACZ,4EACAY,CACF,EACG,SAAAR,EACH,GACF,EAGAR,EAAC,OAAI,UAAU,0BACZ,UAAAW,GACCZ,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,UACR,MAAOU,EACP,UAAU,6BACT,GAAGD,EAEH,SAAAA,EAAgB,KACnB,EAEDD,GACCX,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,YACR,MAAOU,EACN,GAAGF,EACJ,UAAU,sGAET,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCI,EAAS,OAAS,GACjBf,EAAC,OAAI,UAAU,mDACZ,SAAAe,EAAS,IAAI,CAACI,EAASC,IACtBnB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACI,EAAA,CACC,UAAWC,EACT,gFACAQ,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAM,EAAQ,MACX,EACCC,EAAQL,EAAS,OAAS,GACzBf,EAAC,OAAI,UAAWK,EAAG,WAAYa,CAAiB,EAAG,IAVlCE,CAYrB,CACD,EACH,GAEJ,CAEJ,CACF,EAEAb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "Button", "Text", "cn", "withStyles", "HeroBanner", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "className", "products", "ref", "textColorClass", "dividerColorClass", "product", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as a}from"react/jsx-runtime";import s from"react";import{
|
|
1
|
+
import{jsx as a}from"react/jsx-runtime";import s from"react";import{default as c}from"react-fast-marquee";import"react-fast-marquee";import{Picture as M,Text as l}from"../../components/index.js";import{cn as o}from"../../helpers/utils.js";const n=s.forwardRef(({children:e,...t},r)=>a(c,{ref:r,...t,children:e}));n.displayName="Marquee";const p=s.forwardRef(({className:e,children:t,...r},u)=>a("div",{className:o("flex gap-6 items-center laptop:gap-16",e),ref:u,children:t}));p.displayName="MarqueeList";const i=({image:e,className:t})=>a(M,{source:e,className:o("aspect-w-[120] w-[72px] aspect-h-[80] laptop:w-[120px]",t),imgClassName:"object-cover"});i.displayName="MarqueeImageContent";const m=s.forwardRef(({text:e,className:t},r)=>a(l,{as:"div",ref:r,html:e,className:o("size-14 text-nowrap flex items-center justify-center leading-[1.2] text-lines-2 font-medium",t)}));m.displayName="MarqueeTextContent";export{n as Marquee,i as MarqueeImageContent,p as MarqueeList,m as MarqueeTextContent};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport {
|
|
5
|
-
"mappings": "AASM,cAAAA,MAAA,oBATN,OAAOC,MAAW,QAClB,OAAS,
|
|
6
|
-
"names": ["jsx", "React", "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { default as FastMarquee } from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst Marquee = React.forwardRef<HTMLDivElement, FastMarqueeProps>(\n ({children, ...props}, ref) => {\n return (\n <FastMarquee\n ref={ref}\n {...props}\n >\n {children}\n </FastMarquee>\n )\n }\n)\n\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n children?: React.ReactNode;\n className?: string;\n}\n\nconst MarqueeList = React.forwardRef<\nHTMLDivElement,\nMarqueeListProps\n>(({ className, children, ...props }, ref) => {\n return (\n <div className={cn(\"flex gap-6 items-center laptop:gap-16\", className)} ref={ref}>\n {children}\n </div>\n )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n image: string\n className?: string;\n}\n\nconst MarqueeImageContent = ({ image, className }: MarqueeImageContentProps) => {\n return (\n <Picture \n source={image}\n className={cn(\"aspect-w-[120] w-[72px] aspect-h-[80] laptop:w-[120px]\", className)}\n imgClassName=\"object-cover\"\n />\n )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\ninterface MarqueeTextContentProps {\n text: string\n className?: string;\n}\n\nconst MarqueeTextContent = React.forwardRef<\nHTMLDivElement,\nMarqueeTextContentProps\n>(({ text, className }, ref) => {\n return (\n <Text\n as=\"div\"\n ref={ref}\n html={text}\n className={cn(\"size-14 text-nowrap flex items-center justify-center leading-[1.2] text-lines-2 font-medium\", className)}\n />\n )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent }\nexport type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }"],
|
|
5
|
+
"mappings": "AASM,cAAAA,MAAA,oBATN,OAAOC,MAAW,QAClB,OAAS,WAAWC,MAAmB,qBACvC,MAAsD,qBACtD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBAEnB,MAAMC,EAAUL,EAAM,WACpB,CAAC,CAAC,SAAAM,EAAU,GAAGC,CAAK,EAAGC,IAEnBT,EAACE,EAAA,CACC,IAAKO,EACJ,GAAGD,EAEH,SAAAD,EACH,CAGN,EAEAD,EAAQ,YAAc,UAOtB,MAAMI,EAAcT,EAAM,WAGxB,CAAC,CAAE,UAAAU,EAAW,SAAAJ,EAAU,GAAGC,CAAM,EAAGC,IAElCT,EAAC,OAAI,UAAWK,EAAG,wCAAyCM,CAAS,EAAG,IAAKF,EAC1E,SAAAF,EACH,CAEH,EAEDG,EAAY,YAAc,cAO1B,MAAME,EAAsB,CAAC,CAAE,MAAAC,EAAO,UAAAF,CAAU,IAE5CX,EAACG,EAAA,CACC,OAAQU,EACR,UAAWR,EAAG,yDAA0DM,CAAS,EACjF,aAAa,eACf,EAIJC,EAAoB,YAAc,sBAOlC,MAAME,EAAqBb,EAAM,WAG/B,CAAC,CAAE,KAAAc,EAAM,UAAAJ,CAAU,EAAGF,IAEpBT,EAACI,EAAA,CACC,GAAG,MACH,IAAKK,EACL,KAAMM,EACN,UAAWV,EAAG,8FAA+FM,CAAS,EACxH,CAEH,EAEDG,EAAmB,YAAc",
|
|
6
|
+
"names": ["jsx", "React", "FastMarquee", "Picture", "Text", "cn", "Marquee", "children", "props", "ref", "MarqueeList", "className", "MarqueeImageContent", "image", "MarqueeTextContent", "text"]
|
|
7
7
|
}
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{Button as o}from"../../components/index.js";import{withStyles as g}from"../../shared/Styles.js";const b=({title:l,description:x,backgroundImage:d,primaryButton:s,secondaryButton:r,shape:p="square",theme:a="light",className:n=""})=>{const i=()=>{},m=()=>{};return e("section",{"data-ui-component-id":"MemberEquity",className:`
|
|
2
2
|
relative w-full overflow-hidden bg-[#242426]
|
|
3
|
-
${
|
|
4
|
-
${
|
|
5
|
-
`,children:[
|
|
3
|
+
${p==="round"?"rounded-none tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl":""}
|
|
4
|
+
${n}
|
|
5
|
+
`,children:[t("div",{className:"absolute inset-0 w-full h-full",style:{backgroundImage:`
|
|
6
6
|
radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
|
|
7
7
|
url(${d})
|
|
8
|
-
`,backgroundSize:"cover",backgroundPosition:"center"}}),
|
|
8
|
+
`,backgroundSize:"cover",backgroundPosition:"center"}}),t("div",{className:`
|
|
9
9
|
relative w-full mx-auto
|
|
10
10
|
aspect-[343/200] xs:aspect-[343/200]
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
tablet:aspect-[343/200]
|
|
12
|
+
laptop:aspect-[592/336]
|
|
13
|
+
desktop:aspect-[800/448]
|
|
14
|
+
lg-desktop:aspect-[1000/560]
|
|
15
15
|
flex items-center
|
|
16
|
-
`,children:
|
|
17
|
-
w-full px-4
|
|
18
|
-
flex flex-col gap-4
|
|
19
|
-
`,children:[
|
|
16
|
+
`,children:e("div",{className:`
|
|
17
|
+
w-full px-4 tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px]
|
|
18
|
+
flex flex-col gap-4 tablet:gap-5 laptop:gap-6 desktop:gap-7 lg-desktop:gap-8
|
|
19
|
+
`,children:[e("div",{className:"flex flex-col gap-2 tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4",children:[t("h2",{className:`
|
|
20
20
|
member-equity-title font-mont font-bold text-white tracking-[-0.04em]
|
|
21
|
-
text-xl
|
|
21
|
+
text-xl tablet:text-2xl laptop:text-3xl desktop:text-4xl lg-desktop:text-[32px]
|
|
22
22
|
leading-[1.2]
|
|
23
|
-
max-w-[280px]
|
|
24
|
-
`,children:
|
|
23
|
+
max-w-[280px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]
|
|
24
|
+
`,children:l}),t("p",{className:`
|
|
25
25
|
member-equity-description font-pingfang font-semibold text-white tracking-[-0.02em]
|
|
26
|
-
text-sm
|
|
26
|
+
text-sm tablet:text-sm laptop:text-base desktop:text-lg lg-desktop:text-lg
|
|
27
27
|
leading-[1.4]
|
|
28
|
-
max-w-[260px]
|
|
29
|
-
`,children:
|
|
30
|
-
member-equity-button-primary bg-transparent border-white border-[1px] text-white text-xs
|
|
31
|
-
px-4
|
|
32
|
-
py-2
|
|
33
|
-
${
|
|
34
|
-
`,children:s.text}),
|
|
35
|
-
member-equity-button-secondary text-xs
|
|
36
|
-
px-4
|
|
37
|
-
py-2
|
|
38
|
-
${
|
|
39
|
-
`,children:r.text})]})]})})]})};var
|
|
28
|
+
max-w-[260px] tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
|
|
29
|
+
`,children:x})]}),e("div",{className:"flex items-center gap-3 tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4",children:[t(o,{theme:a,variant:"primary",onClick:i,className:`
|
|
30
|
+
member-equity-button-primary bg-transparent border-white border-[1px] text-white text-xs tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base
|
|
31
|
+
px-4 tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 hover:bg-white hover:text-black
|
|
32
|
+
py-2 tablet:py-[10px] laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px]
|
|
33
|
+
${p==="round"?"rounded-[16px] tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px]":""}
|
|
34
|
+
`,children:s.text}),t(o,{theme:a,variant:"secondary",onClick:m,className:`
|
|
35
|
+
member-equity-button-secondary text-xs tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base
|
|
36
|
+
px-4 tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7
|
|
37
|
+
py-2 tablet:py-[10px] laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px]
|
|
38
|
+
${p==="round"?"rounded-[16px] tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px]":""}
|
|
39
|
+
`,children:r.text})]})]})})]})};var f=g(b);export{f as default};
|
|
40
40
|
//# sourceMappingURL=index.js.map
|