@anker-in/headless-ui 0.0.27-alpha.72 → 0.0.27-alpha.74
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerBase/right.d.ts +1 -0
- package/dist/cjs/biz-components/MediaPlayerBase/right.js +2 -0
- package/dist/cjs/biz-components/MediaPlayerBase/right.js.map +7 -0
- package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +1 -0
- package/dist/cjs/biz-components/ShelfDisplay/index.js +6 -4
- 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/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +2 -2
- package/dist/cjs/components/link.js +1 -1
- package/dist/cjs/components/link.js.map +2 -2
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +2 -2
- package/dist/cjs/stories/avatar.stories.d.ts +0 -1
- package/dist/cjs/stories/avatar.stories.js +1 -1
- package/dist/cjs/stories/avatar.stories.js.map +3 -3
- package/dist/cjs/stories/link.stories.js +1 -1
- package/dist/cjs/stories/link.stories.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerBase/right.d.ts +1 -0
- package/dist/esm/biz-components/MediaPlayerBase/right.js +2 -0
- package/dist/esm/biz-components/MediaPlayerBase/right.js.map +7 -0
- package/dist/esm/biz-components/ShelfDisplay/index.d.ts +1 -0
- package/dist/esm/biz-components/ShelfDisplay/index.js +8 -6
- 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/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +2 -2
- package/dist/esm/components/link.js +1 -1
- package/dist/esm/components/link.js.map +2 -2
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +2 -2
- package/dist/esm/stories/HeroBanner.stories.js +1 -1
- package/dist/esm/stories/HeroBanner.stories.js.map +2 -2
- package/dist/esm/stories/avatar.stories.d.ts +0 -1
- package/dist/esm/stories/avatar.stories.js +1 -1
- package/dist/esm/stories/avatar.stories.js.map +3 -3
- package/dist/esm/stories/link.stories.js +1 -1
- package/dist/esm/stories/link.stories.js.map +3 -3
- package/package.json +1 -1
- package/style.css +12 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/avatar.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta } from '@storybook/react'\nimport { UserIcon } from '@storybook/icons'\nimport { Avatar, AvatarImage, AvatarFallback } from '../components/index.js'\n\nconst meta = {\n title: 'Components/Avatar',\n component: Avatar,\n tags: ['autodocs'],\n subcomponents: { AvatarImage, AvatarFallback } as any,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component: 'avatar\u7EC4\u4EF6,\u57FA\u4E8E@radix-ui/react-avatar,https://www.radix-ui.com/primitives/docs/components/avatar',\n },\n },\n },\n argTypes: {\n size: {\n description: '\u5C3A\u5BF8',\n table: {\n defaultValue: { summary: 'small' },\n },\n },\n },\n} satisfies Meta<typeof Avatar>\n\nexport default meta\n\nexport const Default = () => (\n <Avatar size=\"large\">\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n <AvatarFallback>
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,
|
|
6
|
-
"names": ["avatar_stories_exports", "__export", "AvatarSize", "
|
|
4
|
+
"sourcesContent": ["import type { Meta } from '@storybook/react'\nimport { UserIcon } from '@storybook/icons'\nimport { Avatar, AvatarImage, AvatarFallback } from '../components/index.js'\n\nconst meta = {\n title: 'Components/Avatar',\n component: Avatar,\n tags: ['autodocs'],\n subcomponents: { AvatarImage, AvatarFallback } as any,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component: 'avatar\u7EC4\u4EF6,\u57FA\u4E8E@radix-ui/react-avatar,https://www.radix-ui.com/primitives/docs/components/avatar',\n },\n },\n },\n argTypes: {\n size: {\n description: '\u5C3A\u5BF8',\n table: {\n defaultValue: { summary: 'small' },\n },\n },\n },\n} satisfies Meta<typeof Avatar>\n\nexport default meta\n\nexport const Default = () => (\n <Avatar size=\"large\">\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n <AvatarFallback>Za</AvatarFallback>\n </Avatar>\n)\n\nexport const AvatarType = () => (\n <div className=\"flex items-center gap-4\">\n <Avatar size=\"large\">\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <Avatar size=\"large\">\n <UserIcon className=\"size-6\" />\n </Avatar>\n <Avatar size=\"large\">Za</Avatar>\n </div>\n)\n\nexport const AvatarSize = () => (\n <div className=\"flex items-center gap-4\">\n <Avatar>Za</Avatar>\n <Avatar size=\"medium\">Za</Avatar>\n <Avatar size=\"large\">Za</Avatar>\n </div>\n)\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,eAAAC,EAAA,YAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA8BE,IAAAO,EAAA,6BA7BFC,EAAyB,4BACzBC,EAAoD,kCAEpD,MAAMC,EAAO,CACX,MAAO,oBACP,UAAW,SACX,KAAM,CAAC,UAAU,EACjB,cAAe,CAAE,0BAAa,+BAAe,EAC7C,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,kHACb,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,YAAa,eACb,MAAO,CACL,aAAc,CAAE,QAAS,OAAQ,CACnC,CACF,CACF,CACF,EAEA,IAAOL,EAAQK,EAER,MAAMN,EAAU,OACrB,QAAC,UAAO,KAAK,QACX,oBAAC,eAAY,IAAI,gCAAgC,IAAI,UAAU,KAC/D,OAAC,kBAAe,cAAE,GACpB,EAGWD,EAAa,OACxB,QAAC,OAAI,UAAU,0BACb,qBAAC,UAAO,KAAK,QACX,oBAAC,eAAY,IAAI,gCAAgC,IAAI,UAAU,KAC/D,OAAC,kBAAe,cAAE,GACpB,KACA,OAAC,UAAO,KAAK,QACX,mBAAC,YAAS,UAAU,SAAS,EAC/B,KACA,OAAC,UAAO,KAAK,QAAQ,cAAE,GACzB,EAGWD,EAAa,OACxB,QAAC,OAAI,UAAU,0BACb,oBAAC,UAAO,cAAE,KACV,OAAC,UAAO,KAAK,SAAS,cAAE,KACxB,OAAC,UAAO,KAAK,QAAQ,cAAE,GACzB",
|
|
6
|
+
"names": ["avatar_stories_exports", "__export", "AvatarSize", "AvatarType", "Default", "avatar_stories_default", "__toCommonJS", "import_jsx_runtime", "import_icons", "import_components", "meta"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var d=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var v=(i,n)=>{for(var o in n)s(i,o,{get:n[o],enumerable:!0})},t=(i,n,o,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of c(n))!p.call(i,a)&&a!==o&&s(i,a,{get:()=>n[a],enumerable:!(r=m(n,a))||r.enumerable});return i};var f=(i,n,o)=>(o=i!=null?d(k(i)):{},t(n||!i||!i.__esModule?s(o,"default",{value:i,enumerable:!0}):o,i)),L=i=>t(s({},"__esModule",{value:!0}),i);var z={};v(z,{Default:()=>h,Disabled:()=>x,LinkSize:()=>g,default:()=>y});module.exports=L(z);var e=require("react/jsx-runtime"),C=require("@storybook/icons"),l=f(require("../components/link.js"));const u={title:"Components/Link",component:l.default,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{description:"\u5C3A\u5BF8",control:{type:"select"},options:["small","medium","large"],table:{defaultValue:{summary:"small"}}},underline:{description:"\u94FE\u63A5\u4E0B\u5212\u7EBF\u5C55\u793A",control:{type:"select"},options:["none","hover","always"],table:{defaultValue:{summary:"none"}}},hoverColor:{description:"\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F",control:{type:"select"},options:["none","hover"],table:{defaultValue:{summary:"none"}}},onClick:{control:!1},suffixIcon:{control:!1},style:{control:!1},className:{control:!1},children:{control:!1}},args:{onClick:void 0}};var y=u;const h={args:{children:"Link"}},g=()=>(0,e.jsxs)("div",{className:"inline-flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"inline-flex gap-4",children:[(0,e.jsx)(l.default,{size:"small",hoverColor:"hover",children:"Link"}),(0,e.jsx)(l.default,{size:"small",underline:"always",hoverColor:"hover",children:"Link"})]}),(0,e.jsxs)("div",{className:"inline-flex gap-4",children:[(0,e.jsx)(l.default,{size:"medium",hoverColor:"hover",children:"Link"}),(0,e.jsx)(l.default,{size:"medium",underline:"always",hoverColor:"hover",children:"Link"})]}),(0,e.jsxs)("div",{className:"inline-flex gap-4",children:[(0,e.jsx)(l.default,{size:"large",hoverColor:"hover",children:"Link"}),(0,e.jsx)(l.default,{size:"large",underline:"always",hoverColor:"hover",children:"Link"})]})]}),x=()=>(0,e.jsxs)("div",{className:"inline-flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"inline-flex gap-4",children:[(0,e.jsx)(l.default,{size:"small",disabled:!0,children:"Link"}),(0,e.jsx)(l.default,{size:"small",disabled:!0,underline:"always",children:"Link"})]}),(0,e.jsxs)("div",{className:"inline-flex gap-4",children:[(0,e.jsx)(l.default,{size:"medium",disabled:!0,children:"Link"}),(0,e.jsx)(l.default,{size:"medium",disabled:!0,underline:"always",children:"Link"})]}),(0,e.jsxs)("div",{className:"inline-flex gap-4",children:[(0,e.jsx)(l.default,{size:"large",disabled:!0,children:"Link"}),(0,e.jsx)(l.default,{size:"large",disabled:!0,underline:"always",children:"Link"})]})]});
|
|
2
2
|
//# sourceMappingURL=link.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/link.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { ChevronRightIcon } from '@storybook/icons'\nimport Link from '../components/link.js'\n\nconst meta = {\n // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n title: 'Components/Link',\n component: Link,\n parameters: {\n layout: 'centered',\n },\n // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n tags: ['autodocs'],\n // More on argTypes: https://storybook.js.org/docs/api/argtypes\n argTypes: {\n size: {\n description: '\u5C3A\u5BF8',\n control: {\n type: 'select',\n },\n options: ['small', 'medium', 'large'],\n table: {\n defaultValue: { summary: 'small' },\n },\n },\n underline: {\n description: '\u94FE\u63A5\u4E0B\u5212\u7EBF\u5C55\u793A',\n control: {\n type: 'select',\n },\n options: ['none', 'hover', 'always'],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n hoverColor: {\n description: '\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F',\n control: {\n type: 'select',\n },\n options: ['none', 'hover'],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n onClick: {\n control: false,\n },\n suffixIcon: {\n control: false,\n },\n style: {\n control: false,\n },\n className: {\n control: false,\n },\n children: {\n control: false,\n },\n },\n args: {\n onClick: undefined,\n },\n} satisfies Meta<typeof Link>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: 'Link',\n },\n}\n\nexport const LinkSize = () => (\n <div className=\"inline-flex flex-col gap-4\">\n <div className=\"inline-flex gap-4\">\n <Link size=\"small\" hoverColor=\"hover\">\n Link\n </Link>\n <Link size=\"small\" underline=\"always\"
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,aAAAC,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA8EI,IAAAO,EAAA,6BA7EJC,EAAiC,4BACjCC,EAAiB,oCAEjB,MAAMC,EAAO,CAEX,MAAO,kBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,UACV,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,KAAM,CACJ,YAAa,eACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,OAAO,EACpC,MAAO,CACL,aAAc,CAAE,QAAS,OAAQ,CACnC,CACF,EACA,UAAW,CACT,YAAa,6CACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,QAAS,QAAQ,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,WAAY,CACV,YAAa,mDACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,EACzB,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,QAAS,CACP,QAAS,EACX,EACA,WAAY,CACV,QAAS,EACX,EACA,MAAO,CACL,QAAS,EACX,EACA,UAAW,CACT,QAAS,EACX,EACA,SAAU,CACR,QAAS,EACX,CACF,EACA,KAAM,CACJ,QAAS,MACX,CACF,EAEA,IAAON,EAAQK,EAIR,MAAMR,EAAiB,CAC5B,KAAM,CACJ,SAAU,MACZ,CACF,EAEaE,EAAW,OACtB,QAAC,OAAI,UAAU,6BACb,qBAAC,OAAI,UAAU,oBACb,oBAAC,EAAAO,QAAA,CAAK,KAAK,QAAQ,WAAW,QAAQ,gBAEtC,KACA,OAAC,EAAAA,QAAA,CAAK,KAAK,QAAQ,UAAU,SAAS,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { ChevronRightIcon } from '@storybook/icons'\nimport Link from '../components/link.js'\n\nconst meta = {\n // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n title: 'Components/Link',\n component: Link,\n parameters: {\n layout: 'centered',\n },\n // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n tags: ['autodocs'],\n // More on argTypes: https://storybook.js.org/docs/api/argtypes\n argTypes: {\n size: {\n description: '\u5C3A\u5BF8',\n control: {\n type: 'select',\n },\n options: ['small', 'medium', 'large'],\n table: {\n defaultValue: { summary: 'small' },\n },\n },\n underline: {\n description: '\u94FE\u63A5\u4E0B\u5212\u7EBF\u5C55\u793A',\n control: {\n type: 'select',\n },\n options: ['none', 'hover', 'always'],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n hoverColor: {\n description: '\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F',\n control: {\n type: 'select',\n },\n options: ['none', 'hover'],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n onClick: {\n control: false,\n },\n suffixIcon: {\n control: false,\n },\n style: {\n control: false,\n },\n className: {\n control: false,\n },\n children: {\n control: false,\n },\n },\n args: {\n onClick: undefined,\n },\n} satisfies Meta<typeof Link>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: 'Link',\n },\n}\n\nexport const LinkSize = () => (\n <div className=\"inline-flex flex-col gap-4\">\n <div className=\"inline-flex gap-4\">\n <Link size=\"small\" hoverColor=\"hover\">\n Link\n </Link>\n <Link size=\"small\" underline=\"always\" hoverColor=\"hover\">\n Link\n </Link>\n </div>\n <div className=\"inline-flex gap-4\">\n <Link size=\"medium\" hoverColor=\"hover\">\n Link\n </Link>\n <Link size=\"medium\" underline=\"always\" hoverColor=\"hover\">\n Link\n </Link>\n </div>\n <div className=\"inline-flex gap-4\">\n <Link size=\"large\" hoverColor=\"hover\">\n Link\n </Link>\n <Link size=\"large\" underline=\"always\" hoverColor=\"hover\">\n Link\n </Link>\n </div>\n </div>\n)\n\nexport const Disabled = () => (\n <div className=\"inline-flex flex-col gap-4\">\n <div className=\"inline-flex gap-4\">\n <Link size=\"small\" disabled>\n Link\n </Link>\n <Link size=\"small\" disabled underline=\"always\">\n Link\n </Link>\n </div>\n <div className=\"inline-flex gap-4\">\n <Link size=\"medium\" disabled>\n Link\n </Link>\n <Link size=\"medium\" disabled underline=\"always\">\n Link\n </Link>\n </div>\n <div className=\"inline-flex gap-4\">\n <Link size=\"large\" disabled>\n Link\n </Link>\n <Link size=\"large\" disabled underline=\"always\">\n Link\n </Link>\n </div>\n </div>\n)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,aAAAC,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA8EI,IAAAO,EAAA,6BA7EJC,EAAiC,4BACjCC,EAAiB,oCAEjB,MAAMC,EAAO,CAEX,MAAO,kBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,UACV,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,KAAM,CACJ,YAAa,eACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,OAAO,EACpC,MAAO,CACL,aAAc,CAAE,QAAS,OAAQ,CACnC,CACF,EACA,UAAW,CACT,YAAa,6CACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,QAAS,QAAQ,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,WAAY,CACV,YAAa,mDACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,EACzB,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,QAAS,CACP,QAAS,EACX,EACA,WAAY,CACV,QAAS,EACX,EACA,MAAO,CACL,QAAS,EACX,EACA,UAAW,CACT,QAAS,EACX,EACA,SAAU,CACR,QAAS,EACX,CACF,EACA,KAAM,CACJ,QAAS,MACX,CACF,EAEA,IAAON,EAAQK,EAIR,MAAMR,EAAiB,CAC5B,KAAM,CACJ,SAAU,MACZ,CACF,EAEaE,EAAW,OACtB,QAAC,OAAI,UAAU,6BACb,qBAAC,OAAI,UAAU,oBACb,oBAAC,EAAAO,QAAA,CAAK,KAAK,QAAQ,WAAW,QAAQ,gBAEtC,KACA,OAAC,EAAAA,QAAA,CAAK,KAAK,QAAQ,UAAU,SAAS,WAAW,QAAQ,gBAEzD,GACF,KACA,QAAC,OAAI,UAAU,oBACb,oBAAC,EAAAA,QAAA,CAAK,KAAK,SAAS,WAAW,QAAQ,gBAEvC,KACA,OAAC,EAAAA,QAAA,CAAK,KAAK,SAAS,UAAU,SAAS,WAAW,QAAQ,gBAE1D,GACF,KACA,QAAC,OAAI,UAAU,oBACb,oBAAC,EAAAA,QAAA,CAAK,KAAK,QAAQ,WAAW,QAAQ,gBAEtC,KACA,OAAC,EAAAA,QAAA,CAAK,KAAK,QAAQ,UAAU,SAAS,WAAW,QAAQ,gBAEzD,GACF,GACF,EAGWR,EAAW,OACtB,QAAC,OAAI,UAAU,6BACb,qBAAC,OAAI,UAAU,oBACb,oBAAC,EAAAQ,QAAA,CAAK,KAAK,QAAQ,SAAQ,GAAC,gBAE5B,KACA,OAAC,EAAAA,QAAA,CAAK,KAAK,QAAQ,SAAQ,GAAC,UAAU,SAAS,gBAE/C,GACF,KACA,QAAC,OAAI,UAAU,oBACb,oBAAC,EAAAA,QAAA,CAAK,KAAK,SAAS,SAAQ,GAAC,gBAE7B,KACA,OAAC,EAAAA,QAAA,CAAK,KAAK,SAAS,SAAQ,GAAC,UAAU,SAAS,gBAEhD,GACF,KACA,QAAC,OAAI,UAAU,oBACb,oBAAC,EAAAA,QAAA,CAAK,KAAK,QAAQ,SAAQ,GAAC,gBAE5B,KACA,OAAC,EAAAA,QAAA,CAAK,KAAK,QAAQ,SAAQ,GAAC,UAAU,SAAS,gBAE/C,GACF,GACF",
|
|
6
6
|
"names": ["link_stories_exports", "__export", "Default", "Disabled", "LinkSize", "link_stories_default", "__toCommonJS", "import_jsx_runtime", "import_icons", "import_link", "meta", "Link"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as
|
|
1
|
+
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as k,Picture as y,Text as m}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as N}from"../../shared/Styles.js";const x=i.forwardRef(({data:c,className:d},g)=>{const{title:l,subtitle:u,pcImage:f,mobileImage:b,primaryButton:o,secondaryButton:r,theme:h="light",caption:p=[]}=c;return a("div",{"data-ui-component-id":"HeroBanner",ref:g,className:e(h==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",d),children:[t(y,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${f.url} , ${b.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[l&&a("div",{className:"laptop:text-left max-w-[686px]",children:[t(k,{as:"h1",size:5,className:e("hero-banner-title"),html:l}),t(m,{as:"p",className:e("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),a("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[r&&t(n,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:r.text}),o&&t(n,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:o.text})]})]}),p.length>0&&t("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:p.map((v,s)=>a(i.Fragment,{children:[t(m,{className:e("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:v.title}),s<p.length-1&&t("div",{className:e("bg-info-primary w-px")})]},s))})]})});x.displayName="HeroBanner";var P=N(x);export{P 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": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light',
|
|
5
|
-
"mappings": "aAoBM,cAAAA,EASI,QAAAC,MATJ,oBAnBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage.url} , ${mobileImage.url} 767`}\n />\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n {title && (\n <div className=\"laptop:text-left max-w-[686px]\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n <Text\n as=\"p\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n {secondaryButton && (\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "aAoBM,cAAAA,EASI,QAAAC,MATJ,oBAnBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAEjH,OACET,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAX,EAACK,EAAA,CACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGU,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAf,EAAC,OAAI,UAAU,6LACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3Eb,EAACM,EAAA,CACC,GAAG,IACH,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,4DACZ,UAAAiB,GACClB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GACCjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChBpB,EAAC,OAAI,UAAU,uKACZ,SAAAoB,EAAQ,IAAI,CAACC,EAAGC,IACfrB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,8KACF,EACA,KAAMc,EAAE,MACV,EACCC,EAAQF,EAAQ,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,sBAAsB,EAAG,IAPxDe,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "c", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as y,useRef as b}from"react";import{cn as p}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import x from"../../components/picture.js";import k from"../../components/button.js";import{convertLexicalToHTML as d}from"@payloadcms/richtext-lexical/html";import{Right as w}from"./right.js";const N=({className:u="",data:{title:a,videoTitle:l,btnText:r,img:c,video:m,theme:f,shape:g}})=>{const[s,i]=y(!1),e=b(null),n=typeof a=="string"?a:a&&d({data:a}),v=typeof l=="string"?l:l&&d({data:l});return o("div",{className:p(" relative w-full",u,{"aiui-dark":f==="dark","rounded-box":g==="rounded"}),children:[o("div",{className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:!s&&n?n:v||""}}),!s&&r&&o(k,{variant:"link",className:p("member-equity-button-secondary"),onClick:()=>{s?(e.current&&e.current.pause(),i(!1)):(e.current&&e.current.play(),i(!0))},children:[r,t(w,{})]})]}),o("div",{className:"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660] relative overflow-hidden",children:[t("video",{ref:e,className:"size-full object-cover",src:m?.url,autoPlay:!0,muted:!0,loop:!0}),!s&&t(x,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:c?.url,alt:c?.alt,imgClassName:"w-full h-full object-cover"}),t("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})};var C=h(N);export{C as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport {
|
|
5
|
-
"mappings": "aA6BQ,cAAAA,EAKE,QAAAC,MALF,oBA5BR,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,
|
|
6
|
-
"names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { Right } from './right.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const videoTitle_html =\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n return (\n <div\n className={cn(' relative w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n <div\n className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: !isPlaying && title_html ? title_html : videoTitle_html || '' }}\n />\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n }}\n >\n {btnText}\n <Right />\n </Button>\n )}\n </div>\n <div className=\"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660] relative overflow-hidden\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n {!isPlaying && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div\n className=\"absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "aA6BQ,cAAAA,EAKE,QAAAC,MALF,oBA5BR,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,SAAAC,MAAa,aAEtB,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIlB,EAAS,EAAK,EAC1CmB,EAAWlB,EAAyB,IAAI,EAExCmB,EAAa,OAAOV,GAAU,SAAWA,EAAQA,GAASJ,EAAqB,CAAE,KAAMI,CAAM,CAAC,EAC9FW,EACJ,OAAOV,GAAe,SAAWA,EAAaA,GAAcL,EAAqB,CAAE,KAAMK,CAAW,CAAC,EAEvG,OACEZ,EAAC,OACC,UAAWG,EAAG,mBAAoBO,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,UAAAjB,EAAC,OAAI,UAAU,kHACb,UAAAD,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ,CAACmB,GAAaG,EAAaA,EAAaC,GAAmB,EAAG,EACnG,EACC,CAACJ,GAAaL,GACbb,EAACM,EAAA,CACC,QAAQ,OACR,UAAWH,EAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTe,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,UAAAN,EACDd,EAACS,EAAA,EAAM,GACT,GAEJ,EACAR,EAAC,OAAI,UAAU,0PACb,UAAAD,EAAC,SAAM,IAAKqB,EAAU,UAAU,yBAAyB,IAAKL,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,EAC7F,CAACG,GACAnB,EAACM,EAAA,CACC,UAAU,mDACV,OAAQS,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEFf,EAAC,OACC,UAAU,uCACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,GACF,CAEJ,EAEA,IAAOwB,EAAQnB,EAAWK,CAAe",
|
|
6
|
+
"names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "Right", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "videoTitle_html", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Right: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";const t=()=>o("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:o("path",{d:"M6.75 4.5L11.25 9L6.75 13.5",stroke:"white",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});export{t as Right};
|
|
2
|
+
//# sourceMappingURL=right.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MediaPlayerBase/right.tsx"],
|
|
4
|
+
"sourcesContent": ["export const Right = () => (\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.75 4.5L11.25 9L6.75 13.5\"\n stroke=\"white\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n)\n"],
|
|
5
|
+
"mappings": "AAEI,cAAAA,MAAA,oBAFG,MAAMC,EAAQ,IACnBD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QACC,EAAE,8BACF,OAAO,QACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,EACF",
|
|
6
|
+
"names": ["jsx", "Right"]
|
|
7
|
+
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
2
|
-
laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
|
|
1
|
+
"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useState as k,useEffect as F}from"react";import{cn as p}from"../../helpers/utils.js";import C from"../../components/picture.js";import{Tabs as P,TabsList as I,TabsTrigger as A}from"../../components/tabs.js";import D from"../../components/button.js";import E from"../Title/index.js";import V from"../SwiperBox/index.js";import{withStyles as q}from"../../shared/Styles.js";import{formatVariantPrice as $}from"./shelfDisplay.js";const M=({data:e,configuration:r})=>{const c=a=>r?.event?.primaryButton?.(a),m=a=>r?.event?.secondaryButton?.(a),{price:u,basePrice:b}=$({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),x=()=>{const a=e?.sku,o=e?.variants;return o?.find(l=>l?.sku===a)?.image?.url||o?.[0]?.image?.url||""};return d("div",{className:p("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:p("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(C,{source:x(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((a,o)=>t("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:a},o))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),d("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:u||""}),t("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:b||""})]}),d("div",{className:p("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(D,{variant:"primary",onClick:()=>c(e),className:`
|
|
2
|
+
laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
|
|
3
3
|
border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black
|
|
4
|
-
${
|
|
5
|
-
|
|
4
|
+
${r?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
|
|
5
|
+
${r.direction==="vertical"?"w-full":""}
|
|
6
|
+
`,children:r?.primaryButton||""}),t(D,{variant:"secondary",onClick:()=>m(e),className:`
|
|
6
7
|
laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
|
|
7
8
|
border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
|
|
8
|
-
${
|
|
9
|
-
|
|
9
|
+
${r?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
|
|
10
|
+
${r.direction==="vertical"?"w-full":""}
|
|
11
|
+
`,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},j=({data:e,buildData:r,className:c="",key:m,event:u,GSAP:b})=>{const[x,a]=k(""),[o,y]=k([]),{productsTab:l=[],productsCard:S=[],title:h,align:w="left",isShowTab:v=!0,tabShape:T="square",...B}=e,f=s=>{const i=s?.map(n=>{const g=r?.products?.find(N=>N?.handle===n?.handle);if(g)return{sku:n.sku,...g}})?.filter(n=>n);y(i)};return F(()=>{if(v){a(l?.[0]?.tab||""),f(l?.[0]?.data||[]);return}f(S)},[]),d("div",{className:p("w-full",c),children:[h&&t(E,{data:{title:h},GSAP:b}),v&&t(P,{shape:T,align:w,value:x,onValueChange:s=>{a(s);const i=l?.find(n=>n?.tab===s);f(i?.data||[])},className:"mb-8",children:t(I,{children:l?.map((s,i)=>t(A,{value:s?.tab||"",children:s?.tab},i))})}),t(V,{className:"!overflow-visible",id:"ShelfDisplay"+m,data:{list:o,configuration:{...B,event:u}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})};var Q=q(j);export{Q as default};
|
|
10
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any) => void\n secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n className?: string\n key?: string\n GSAP?: any\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any) => void\n secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n className?: string\n key?: string\n GSAP?: any\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data)}\n className={`\n laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data)}\n className={`\n laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event, GSAP }) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div className={cn('w-full', className)}>\n {title && <Title data={{ title: title }} GSAP={GSAP} />}\n {isShowTab && (\n <Tabs\n shape={tabShape}\n align={align}\n value={tabId}\n onValueChange={v => {\n setTabId(v)\n const findData = productsTab?.find((item: any) => item?.tab === v)\n handleCurrentTab(findData?.data || [])\n }}\n className=\"mb-8\"\n >\n <TabsList>\n {productsTab?.map((item: any, index: number) => {\n return (\n <TabsTrigger key={index} value={item?.tab || ''}>\n {item?.tab}\n </TabsTrigger>\n )\n })}\n </TabsList>\n </Tabs>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'ShelfDisplay' + key}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "index", "ShelfDisplay", "buildData", "className", "key", "event", "GSAP", "tabId", "setTabId", "currentItems", "setCurrentItems", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as G}from"react/jsx-runtime";import n,{useRef as E}from"react";import{cn as v}from"../../helpers/utils.js";import{Heading as U,Text as Y}from"../../components/index.js";import{withStyles as q}from"../../shared/Styles.js";function B(i=[],p=3){const c=[];for(let r=0;r<i.length;r+=p)c.push(i.slice(r,r+p));return c}const I=n.forwardRef(({data:i,className:p="",GSAP:c},r)=>{const{gsap:b,ScrollTrigger:S,SplitText:R,useGSAP:F}=c,{title:M,features:u=[],featureChunkSize:T=3,theme:k}=i,[d,D]=n.useState(0),[$,x]=n.useState(!0),f=B(u,T),h=f.length,o=u.length>T,A=o?[...f,f[0]]:f,w=40;n.useEffect(()=>{if(!o)return;const t=setInterval(()=>{D(e=>e+1),x(!0)},3e3);return()=>clearInterval(t)},[h,o]),n.useEffect(()=>{if(o)if(d===h){const t=setTimeout(()=>{x(!1),D(0)},500);return()=>clearTimeout(t)}else x(!0)},[d,h,o]);const l=E(null),m=E(null);return F(()=>{if(!l.current)return;m.current=new R(l.current,{type:"words",wordsClass:"word"});const t=l.current?.clientHeight||100,e=m.current.words;return b.set(e,{opacity:0}),S.create({trigger:l.current,start:"bottom bottom",end:`bottom bottom-=${t+40}px`,scrub:!0,onUpdate:a=>{const g=a.progress,N=e.length,C=1/N,H=.5;e.forEach((P,j)=>{const z=j/N*(1-H),L=C*(1+H);let y=(g-z)/L;y=Math.max(0,Math.min(y,1)),b.set(P,{opacity:y})})}}),()=>{m.current&&m.current.revert(),S.getAll().forEach(a=>a.kill())}},[]),G("div",{ref:r,className:v("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",p),children:[s(U,{ref:l,as:"h2",size:2,weight:"bold",align:"left",className:v("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":k!=="dark","text-[#fff]":k==="dark"}),children:M}),u&&u.length>0&&s("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${w}px`},children:s("div",{className:v(["flex flex-col",$?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${d*w}px)`},children:A.map((t,e)=>s("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${w}px`},children:t.map((a,g)=>G(n.Fragment,{children:[g>0&&s("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),s(Y,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px]
|
|
1
|
+
"use client";import{jsx as s,jsxs as G}from"react/jsx-runtime";import n,{useRef as E}from"react";import{cn as v}from"../../helpers/utils.js";import{Heading as U,Text as Y}from"../../components/index.js";import{withStyles as q}from"../../shared/Styles.js";function B(i=[],p=3){const c=[];for(let r=0;r<i.length;r+=p)c.push(i.slice(r,r+p));return c}const I=n.forwardRef(({data:i,className:p="",GSAP:c},r)=>{const{gsap:b,ScrollTrigger:S,SplitText:R,useGSAP:F}=c,{title:M,features:u=[],featureChunkSize:T=3,theme:k}=i,[d,D]=n.useState(0),[$,x]=n.useState(!0),f=B(u,T),h=f.length,o=u.length>T,A=o?[...f,f[0]]:f,w=40;n.useEffect(()=>{if(!o)return;const t=setInterval(()=>{D(e=>e+1),x(!0)},3e3);return()=>clearInterval(t)},[h,o]),n.useEffect(()=>{if(o)if(d===h){const t=setTimeout(()=>{x(!1),D(0)},500);return()=>clearTimeout(t)}else x(!0)},[d,h,o]);const l=E(null),m=E(null);return F(()=>{if(!l.current)return;m.current=new R(l.current,{type:"words",wordsClass:"word"});const t=l.current?.clientHeight||100,e=m.current.words;return b.set(e,{opacity:0}),S.create({trigger:l.current,start:"bottom bottom",end:`bottom bottom-=${t+40}px`,scrub:!0,onUpdate:a=>{const g=a.progress,N=e.length,C=1/N,H=.5;e.forEach((P,j)=>{const z=j/N*(1-H),L=C*(1+H);let y=(g-z)/L;y=Math.max(0,Math.min(y,1)),b.set(P,{opacity:y})})}}),()=>{m.current&&m.current.revert(),S.getAll().forEach(a=>a.kill())}},[]),G("div",{ref:r,className:v("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",p),children:[s(U,{ref:l,as:"h2",size:2,weight:"bold",align:"left",className:v("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":k!=="dark","text-[#fff]":k==="dark"}),children:M}),u&&u.length>0&&s("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${w}px`},children:s("div",{className:v(["flex flex-col",$?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${d*w}px)`},children:A.map((t,e)=>s("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${w}px`},children:t.map((a,g)=>G(n.Fragment,{children:[g>0&&s("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),s(Y,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]",html:a.title})]},g))},e))})})]})});I.displayName="Slogan";var V=q(I);export{V as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\n// import { useGSAP } from '@gsap/react'\n// import { gsap } from 'gsap'\n// import { SplitText } from 'gsap/dist/SplitText'\n// import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '', GSAP }, ref) => {\n const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n const { title, features = [], featureChunkSize = 3, theme } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<typeof SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom bottom-=${height + 40}px`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n {\n 'text-[#1D1D1F]': theme !== 'dark',\n 'text-[#fff]': theme === 'dark',\n }\n )}\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"relative w-full max-w-[500px] overflow-hidden\" style={{ height: `${groupHeight}px` }}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className=\"flex w-full flex-row items-stretch gap-3 overflow-hidden\"\n style={{ height: `${groupHeight}px` }}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n <Text\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px]
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\n// import { useGSAP } from '@gsap/react'\n// import { gsap } from 'gsap'\n// import { SplitText } from 'gsap/dist/SplitText'\n// import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '', GSAP }, ref) => {\n const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n const { title, features = [], featureChunkSize = 3, theme } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<typeof SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom bottom-=${height + 40}px`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n {\n 'text-[#1D1D1F]': theme !== 'dark',\n 'text-[#fff]': theme === 'dark',\n }\n )}\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"relative w-full max-w-[500px] overflow-hidden\" style={{ height: `${groupHeight}px` }}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className=\"flex w-full flex-row items-stretch gap-3 overflow-hidden\"\n style={{ height: `${groupHeight}px` }}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n <Text\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "aAoGM,cAAAA,EAkCY,QAAAC,MAlCZ,oBAnGN,OAAOC,GAAS,UAAAC,MAAc,QAK9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAG3B,SAASC,EAAWC,EAA6B,CAAC,EAAGC,EAAe,EAAG,CACrE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAM,OAAQG,GAAKF,EACrCC,EAAO,KAAKF,EAAM,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEtC,OAAOC,CACT,CAEA,MAAME,EAASX,EAAM,WAAwC,CAAC,CAAE,KAAAY,EAAM,UAAAC,EAAY,GAAI,KAAAC,CAAK,EAAGC,IAAQ,CACpG,KAAM,CAAE,KAAAC,EAAM,cAAAC,EAAe,UAAAC,EAAW,QAAAC,CAAQ,EAAIL,EAC9C,CAAE,MAAAM,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,EAAG,MAAAC,CAAM,EAAIX,EACxD,CAACY,EAAYC,CAAa,EAAIzB,EAAM,SAAS,CAAC,EAC9C,CAAC0B,EAAiBC,CAAkB,EAAI3B,EAAM,SAAS,EAAI,EAC3D4B,EAAiBtB,EAAWe,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,GAGpBhC,EAAM,UAAU,IAAM,CACpB,GAAI,CAAC8B,EAAc,OACnB,MAAMG,EAAQ,YAAY,IAAM,CAC9BR,EAAcf,GAAKA,EAAI,CAAC,EACxBiB,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcM,CAAK,CAClC,EAAG,CAACJ,EAAaC,CAAY,CAAC,EAG9B9B,EAAM,UAAU,IAAM,CACpB,GAAK8B,EACL,GAAIN,IAAeK,EAAa,CAC9B,MAAMK,EAAS,WAAW,IAAM,CAC9BP,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaS,CAAM,CAClC,MACEP,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYK,EAAaC,CAAY,CAAC,EAG1C,MAAMK,EAAWlC,EAA2B,IAAI,EAC1CmC,EAAoBnC,EAAgC,IAAI,EAC9D,OAAAkB,EAAQ,IAAM,CACZ,GAAI,CAACgB,EAAS,QAAS,OACvBC,EAAkB,QAAU,IAAIlB,EAAUiB,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAME,EAASF,EAAS,SAAS,cAAgB,IAE3CG,EAAQF,EAAkB,QAAQ,MACxC,OAAApB,EAAK,IAAIsB,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BrB,EAAc,OAAO,CACnB,QAASkB,EAAS,QAClB,MAAO,gBACP,IAAK,kBAAkBE,EAAS,EAAE,KAClC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWlC,IAAc,CACtC,MAAMmC,EAASnC,EAAI+B,GAAU,EAAIE,GAC3BG,EAAQJ,GAAY,EAAIC,GAC9B,IAAII,GAAWP,EAAWK,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C/B,EAAK,IAAI4B,EAAM,CAAE,QAAAG,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXX,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DnB,EAAc,OAAO,EAAE,QAAS+B,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,EAGHjD,EAAC,OACC,IAAKgB,EACL,UAAWb,EACT,uMACAW,CACF,EAEA,UAAAf,EAACK,EAAA,CACC,IAAKgC,EACL,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAWjC,EACT,uGACA,CACE,iBAAkBqB,IAAU,OAC5B,cAAeA,IAAU,MAC3B,CACF,EAEC,SAAAH,EACH,EACCC,GAAYA,EAAS,OAAS,GAC7BvB,EAAC,OAAI,UAAU,gDAAgD,MAAO,CAAE,OAAQ,GAAGkC,CAAW,IAAK,EACjG,SAAAlC,EAAC,OACC,UAAWI,EAAG,CACZ,gBACAwB,EAAkB,mEAAqE,kBACzF,CAAC,EACD,MAAO,CACL,UAAW,eAAeF,EAAaQ,CAAW,KACpD,EAEC,SAAAD,EAAc,IAAI,CAACkB,EAAOC,IACzBpD,EAAC,OACC,UAAU,2DACV,MAAO,CAAE,OAAQ,GAAGkC,CAAW,IAAK,EAGnC,SAAAiB,EAAM,IAAI,CAACE,EAASC,IACnBrD,EAACC,EAAM,SAAN,CACE,UAAAoD,EAAQ,GAAKtD,EAAC,OAAI,UAAU,wDAAwD,EACrFA,EAACM,EAAA,CACC,MAAM,OACN,GAAG,IACH,UAAU,kHACV,KAAM+C,EAAQ,MAChB,IAPmBC,CAQrB,CACD,GAZIF,CAaP,CACD,EACH,EACF,GAEJ,CAEJ,CAAC,EAEDvC,EAAO,YAAc,SAErB,IAAO0C,EAAQhD,EAAWM,CAAM",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useRef", "cn", "Heading", "Text", "withStyles", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "GSAP", "ref", "gsap", "ScrollTrigger", "SplitText", "useGSAP", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index", "Slogan_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import"react";import{cva as a}from"class-variance-authority";import{cn as n}from"../helpers/index.js";const p=a("text-brand-0 border-brand-0 inline-flex items-center justify-center rounded-[16px] border-[1.6px] text-xs font-bold backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"px-[8px] pb-[4px] pt-[5px] text-[16px] leading-tight"}},defaultVariants:{size:"lg"}});function o({className:t,size:e,...r}){return i("div",{className:n(p({size:e}),t),...r})}var l=o;export{l as default};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 border-brand-0 inline-flex items-center justify-center rounded-[16px] border-[1.6px] text-xs font-bold backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px]
|
|
5
|
-
"mappings": "AAuBS,cAAAA,MAAA,oBAvBT,MAAuB,QACvB,OAA4B,OAAAC,MAAW,2BAEvC,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAAgBF,EACpB,4KACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 border-brand-0 inline-flex items-center justify-center rounded-[16px] border-[1.6px] text-xs font-bold backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'px-[8px] pb-[4px] pt-[5px] text-[16px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
+
"mappings": "AAuBS,cAAAA,MAAA,oBAvBT,MAAuB,QACvB,OAA4B,OAAAC,MAAW,2BAEvC,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAAgBF,EACpB,4KACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,uDACJ,GAAI,sDACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIA,SAASG,EAAM,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAe,CACxD,OAAOP,EAAC,OAAI,UAAWE,EAAGC,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC5E,CAEA,IAAOC,EAAQJ",
|
|
6
6
|
"names": ["jsx", "cva", "cn", "badgeVariants", "Badge", "className", "size", "props", "badge_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as x,jsx as s,jsxs as R}from"react/jsx-runtime";import h from"react";import{Slot as y}from"@radix-ui/react-slot";import{cn as C}from"../helpers/index.js";import{cva as v}from"class-variance-authority";const P=v("tracking transition-colors",{variants:{size:{small:"text-xs",medium:"text-sm",large:"text-base"},underline:{none:"no-underline",hover:"hover:underline",always:"underline"},hoverColor:{none:"text-current",hover:"hover:text-brand-0"}}}),a=h.forwardRef(({children:i,size:p="small",hoverColor:l,className:m,asChild:c=!1,href:o,style:t,underline:f,disabled:e=!1,suffixIcon:n,onClick:u,...k},d)=>s(c?y:"a",{ref:d,onClick:r=>{if(!e&&u?.(r),e||!o){r.preventDefault();return}},href:e?void 0:o,className:C(P({size:p,underline:f,hoverColor:l}),"text-info-primary",m,{"flex items-center":n,"cursor-pointer":!e,"text-info-quaternary cursor-not-allowed":e}),...t?{style:t}:null,...k,children:R(x,{children:[i,s("span",{className:"svg",children:n})]})}));a.displayName="Link";var S=a;export{S as default};
|
|
2
2
|
//# sourceMappingURL=link.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/link.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { ReactNode } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../helpers/index.js'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\n// \u5B9A\u4E49 link \u7684\u6837\u5F0F\u53D8\u4F53\nconst linkVariants = cva('tracking transition-colors', {\n variants: {\n size: {\n small: 'text-xs', // \u5C0F\n medium: 'text-sm', // \u4E2D\n large: 'text-base', // \u5927\n },\n underline: {\n none: 'no-underline', // \u4E0D\u5C55\u793A\n hover: 'hover:underline', // hover\u5C55\u793A\u4E0B\u5212\u7EBF\n always: 'underline', // \u6C38\u4E45\u5C55\u793A\n },\n hoverColor: {\n none: 'text-current', // \u9F20\u6807\u8FDB\u5165\u65E0\u53D8\u5316\n hover: 'hover:text-brand-0', // \u9F20\u6807\u8FDB\u5165\u6539\u53D8\u5B57\u4F53\u989C\u8272\n },\n },\n})\n// \u5B9A\u4E49\u7EC4\u4EF6\u7C7B\u578B\uFF0C\u7EE7\u627F a \u6807\u7B7E\u6807\u51C6\u5C5E\u6027\ntype LinkElement = React.ElementRef<'a'>\ntype LinkProps = {\n /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n /** \u7C7B\u540D*/\n className?: string\n /** \u7981\u7528\u94FE\u63A5 */\n disabled?: boolean\n /** \u540E\u7F6E\u56FE\u6807*/\n suffixIcon?: ReactNode\n /** \u8DF3\u8F6C\u94FE\u63A5*/\n href?: string\n /** \u6837\u5F0F*/\n style?: React.CSSProperties\n /** \u70B9\u51FB\u4E8B\u4EF6\uFF0C\u7981\u7528\u72B6\u6001\u65E0\u6CD5\u89E6\u53D1*/\n onClick?: Function\n} & VariantProps<typeof linkVariants> &\n ComponentPropsWithout<'a', RemovedProps>\n\nconst Link = React.forwardRef<LinkElement, LinkProps>(\n (\n {\n children,\n size = 'small',\n hoverColor,\n className,\n asChild = false,\n href,\n style,\n underline,\n disabled = false,\n suffixIcon,\n onClick,\n ...props // \u8FD9\u91CC\u4F1A\u5305\u542B href\u3001target\u3001rel \u7B49\u6807\u51C6 anchor \u5C5E\u6027\n }: LinkProps,\n forwardedRef\n ) => {\n const Comp = asChild ? Slot : 'a'\n\n const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n !disabled && onClick?.(event)\n if (disabled || !href) {\n event.preventDefault()\n return\n }\n }\n\n return (\n <Comp\n ref={forwardedRef}\n onClick={handleClick}\n href={disabled ? undefined : href}\n className={cn(linkVariants({ size, underline, hoverColor }), className, {\n 'flex items-center': suffixIcon,\n 'cursor-pointer': !disabled,\n 'text-info-quaternary cursor-not-allowed': disabled,\n })}\n {...(style ? { style: style } : null)}\n {...props}\n >\n <>\n {children}\n <span className=\"svg\">{suffixIcon}</span>\n </>\n </Comp>\n )\n }\n)\nLink.displayName = 'Link'\n\nexport default Link\nexport type { LinkProps }\n"],
|
|
5
|
-
"mappings": "AAuFQ,mBAAAA,EAEE,OAAAC,EAFF,QAAAC,MAAA,oBAvFR,OAAOC,MAAW,QAElB,OAAS,QAAAC,MAAY,uBACrB,OAAS,MAAAC,MAAU,sBACnB,OAA4B,OAAAC,MAAW,2BAIvC,MAAMC,EAAeD,EAAI,6BAA8B,CACrD,SAAU,CACR,KAAM,CACJ,MAAO,UACP,OAAQ,UACR,MAAO,WACT,EACA,UAAW,CACT,KAAM,eACN,MAAO,kBACP,OAAQ,WACV,EACA,WAAY,CACV,KAAM,eACN,MAAO,oBACT,CACF,CACF,CAAC,EAqBKE,EAAOL,EAAM,WACjB,CACE,CACE,SAAAM,EACA,KAAAC,EAAO,QACP,WAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EACA,MAAAC,EACA,UAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,IAaEpB,EAXWY,EAAUT,EAAO,IAW3B,CACC,IAAKiB,EACL,QAXiBC,GAA+C,CAElE,GADA,CAACL,GAAYE,IAAUG,CAAK,EACxBL,GAAY,CAACH,EAAM,CACrBQ,EAAM,eAAe,EACrB,MACF,CACF,EAMI,KAAML,EAAW,OAAYH,EAC7B,UAAWT,EAAGE,EAAa,CAAE,KAAAG,EAAM,UAAAM,EAAW,WAAAL,CAAW,CAAC,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { ReactNode } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../helpers/index.js'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\n// \u5B9A\u4E49 link \u7684\u6837\u5F0F\u53D8\u4F53\nconst linkVariants = cva('tracking transition-colors', {\n variants: {\n size: {\n small: 'text-xs', // \u5C0F\n medium: 'text-sm', // \u4E2D\n large: 'text-base', // \u5927\n },\n underline: {\n none: 'no-underline', // \u4E0D\u5C55\u793A\n hover: 'hover:underline', // hover\u5C55\u793A\u4E0B\u5212\u7EBF\n always: 'underline', // \u6C38\u4E45\u5C55\u793A\n },\n hoverColor: {\n none: 'text-current', // \u9F20\u6807\u8FDB\u5165\u65E0\u53D8\u5316\n hover: 'hover:text-brand-0', // \u9F20\u6807\u8FDB\u5165\u6539\u53D8\u5B57\u4F53\u989C\u8272\n },\n },\n})\n// \u5B9A\u4E49\u7EC4\u4EF6\u7C7B\u578B\uFF0C\u7EE7\u627F a \u6807\u7B7E\u6807\u51C6\u5C5E\u6027\ntype LinkElement = React.ElementRef<'a'>\ntype LinkProps = {\n /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n /** \u7C7B\u540D*/\n className?: string\n /** \u7981\u7528\u94FE\u63A5 */\n disabled?: boolean\n /** \u540E\u7F6E\u56FE\u6807*/\n suffixIcon?: ReactNode\n /** \u8DF3\u8F6C\u94FE\u63A5*/\n href?: string\n /** \u6837\u5F0F*/\n style?: React.CSSProperties\n /** \u70B9\u51FB\u4E8B\u4EF6\uFF0C\u7981\u7528\u72B6\u6001\u65E0\u6CD5\u89E6\u53D1*/\n onClick?: Function\n} & VariantProps<typeof linkVariants> &\n ComponentPropsWithout<'a', RemovedProps>\n\nconst Link = React.forwardRef<LinkElement, LinkProps>(\n (\n {\n children,\n size = 'small',\n hoverColor,\n className,\n asChild = false,\n href,\n style,\n underline,\n disabled = false,\n suffixIcon,\n onClick,\n ...props // \u8FD9\u91CC\u4F1A\u5305\u542B href\u3001target\u3001rel \u7B49\u6807\u51C6 anchor \u5C5E\u6027\n }: LinkProps,\n forwardedRef\n ) => {\n const Comp = asChild ? Slot : 'a'\n\n const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n !disabled && onClick?.(event)\n if (disabled || !href) {\n event.preventDefault()\n return\n }\n }\n\n return (\n <Comp\n ref={forwardedRef}\n onClick={handleClick}\n href={disabled ? undefined : href}\n className={cn(linkVariants({ size, underline, hoverColor }), 'text-info-primary', className, {\n 'flex items-center': suffixIcon,\n 'cursor-pointer': !disabled,\n 'text-info-quaternary cursor-not-allowed': disabled,\n })}\n {...(style ? { style: style } : null)}\n {...props}\n >\n <>\n {children}\n <span className=\"svg\">{suffixIcon}</span>\n </>\n </Comp>\n )\n }\n)\nLink.displayName = 'Link'\n\nexport default Link\nexport type { LinkProps }\n"],
|
|
5
|
+
"mappings": "AAuFQ,mBAAAA,EAEE,OAAAC,EAFF,QAAAC,MAAA,oBAvFR,OAAOC,MAAW,QAElB,OAAS,QAAAC,MAAY,uBACrB,OAAS,MAAAC,MAAU,sBACnB,OAA4B,OAAAC,MAAW,2BAIvC,MAAMC,EAAeD,EAAI,6BAA8B,CACrD,SAAU,CACR,KAAM,CACJ,MAAO,UACP,OAAQ,UACR,MAAO,WACT,EACA,UAAW,CACT,KAAM,eACN,MAAO,kBACP,OAAQ,WACV,EACA,WAAY,CACV,KAAM,eACN,MAAO,oBACT,CACF,CACF,CAAC,EAqBKE,EAAOL,EAAM,WACjB,CACE,CACE,SAAAM,EACA,KAAAC,EAAO,QACP,WAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EACA,MAAAC,EACA,UAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,IAaEpB,EAXWY,EAAUT,EAAO,IAW3B,CACC,IAAKiB,EACL,QAXiBC,GAA+C,CAElE,GADA,CAACL,GAAYE,IAAUG,CAAK,EACxBL,GAAY,CAACH,EAAM,CACrBQ,EAAM,eAAe,EACrB,MACF,CACF,EAMI,KAAML,EAAW,OAAYH,EAC7B,UAAWT,EAAGE,EAAa,CAAE,KAAAG,EAAM,UAAAM,EAAW,WAAAL,CAAW,CAAC,EAAG,oBAAqBC,EAAW,CAC3F,oBAAqBM,EACrB,iBAAkB,CAACD,EACnB,0CAA2CA,CAC7C,CAAC,EACA,GAAIF,EAAQ,CAAE,MAAOA,CAAM,EAAI,KAC/B,GAAGK,EAEJ,SAAAlB,EAAAF,EAAA,CACG,UAAAS,EACDR,EAAC,QAAK,UAAU,MAAO,SAAAiB,EAAW,GACpC,EACF,CAGN,EACAV,EAAK,YAAc,OAEnB,IAAOe,EAAQf",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "Slot", "cn", "cva", "linkVariants", "Link", "children", "size", "hoverColor", "className", "asChild", "href", "style", "underline", "disabled", "suffixIcon", "onClick", "props", "forwardedRef", "event", "link_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as p}from"react/jsx-runtime";import*as T from"react";import{Slot as h}from"@radix-ui/react-slot";import{cva as g}from"class-variance-authority";import{convertLexicalToHTML as y}from"@payloadcms/richtext-lexical/html";import{cn as
|
|
1
|
+
import{jsx as p}from"react/jsx-runtime";import*as T from"react";import{Slot as h}from"@radix-ui/react-slot";import{cva as g}from"class-variance-authority";import{convertLexicalToHTML as y}from"@payloadcms/richtext-lexical/html";import{cn as v}from"../helpers/index.js";const u=g("tracking font-heading",{variants:{size:{1:"text-text-1",2:"text-text-2",3:"text-text-3"},weight:{light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:3,weight:"bold"}}),s=T.forwardRef((a,n)=>{const{children:e,size:i=3,weight:l,align:m,className:x,asChild:d,as:P="span",color:o,html:t,...c}=a,r=t?{dangerouslySetInnerHTML:{__html:typeof t=="string"?t:y({data:t})}}:null,f=o?{style:{color:o}}:null;return p(h,{...c,ref:n,className:v(u({size:i,weight:l,align:m}),x),...r,...f,children:d?e:p(P,{children:r?null:e})})});s.displayName="Text";export{s as Text};
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/text.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('tracking font-heading', {\n variants: {\n size: {\n 1: 'text-text-1',\n 2: 'text-text-2',\n 3: 'text-text-3',\n },\n weight: {\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 3,\n weight: '
|
|
5
|
-
"mappings": "AAkF4B,cAAAA,MAAA,oBAlF5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,wBAAyB,CAChD,SAAU,CACR,KAAM,CACJ,EAAG,cACH,EAAG,cACH,EAAG,aACL,EACA,OAAQ,CACN,MAAO,aACP,OAAQ,cACR,OAAQ,cACR,SAAU,gBACV,KAAM,WACR,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,EACN,OAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('tracking font-heading', {\n variants: {\n size: {\n 1: 'text-text-1',\n 2: 'text-text-2',\n 3: 'text-text-3',\n },\n weight: {\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 3,\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const { children, size = 3, weight, align, className, asChild, as: Tag = 'span', color, html, ...textProps } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
|
|
5
|
+
"mappings": "AAkF4B,cAAAA,MAAA,oBAlF5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,wBAAyB,CAChD,SAAU,CACR,KAAM,CACJ,EAAG,cACH,EAAG,cACH,EAAG,aACL,EACA,OAAQ,CACN,MAAO,aACP,OAAQ,cACR,OAAQ,cACR,SAAU,gBACV,KAAM,WACR,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,EACN,OAAQ,MACV,CACF,CAAC,EAkBKI,EAAON,EAAM,WAAmC,CAACO,EAAOC,IAAiB,CAC7E,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAO,EAAG,OAAAC,EAAQ,MAAAC,EAAO,UAAAC,EAAW,QAAAC,EAAS,GAAIC,EAAM,OAAQ,MAAAC,EAAO,KAAAC,EAAM,GAAGC,CAAU,EAAIX,EAEzGY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOd,EAAqB,CAAE,KAAMc,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWJ,EACTC,EAAa,CACX,KAAAK,EACA,OAAAC,EACA,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDH,EAAK,YAAc",
|
|
6
6
|
"names": ["jsx", "React", "Slot", "cva", "convertLexicalToHTML", "cn", "textVariants", "Text", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -6,5 +6,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
|
|
|
6
6
|
- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898
|
|
7
7
|
- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
|
|
8
8
|
- \u652F\u6301\u5E95\u90E8\u4EA7\u54C1\u5217\u8868
|
|
9
|
-
`}}},tags:["autodocs"]};var i=o;const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",t="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",n={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},
|
|
9
|
+
`}}},tags:["autodocs"]};var i=o;const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",t="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",n={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},m={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},l={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};export{m as DarkTheme,n as LightTheme,l as WithoutSecondaryButton,i as default};
|
|
10
10
|
//# sourceMappingURL=HeroBanner.stories.js.map
|