@anker-in/headless-ui 0.0.27-alpha.26 → 0.0.27-alpha.27
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 +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js +12 -29
- package/dist/cjs/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/cjs/biz-components/MemberEquity/types.d.ts +2 -1
- package/dist/cjs/biz-components/MemberEquity/types.js +1 -1
- package/dist/cjs/biz-components/MemberEquity/types.js.map +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +2 -2
- 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/MemberEquity/index.js +13 -30
- package/dist/esm/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/esm/biz-components/MemberEquity/types.d.ts +2 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +2 -2
- package/dist/tokens/anker.css +1 -1
- package/dist/tokens/eufy.css +1 -1
- package/dist/tokens/soundcore.css +1 -1
- package/package.json +1 -1
- package/style.css +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var k=Object.create;var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var z=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},h=(e,a,r,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of B(a))!H.call(e,s)&&s!==r&&m(e,s,{get:()=>a[s],enumerable:!(n=w(a,s))||n.enumerable});return e};var C=(e,a,r)=>(r=e!=null?k(D(e)):{},h(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),F=e=>h(m({},"__esModule",{value:!0}),e);var R={};z(R,{default:()=>P});module.exports=F(R);var t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";"use client";var k=Object.create;var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var z=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},h=(e,a,r,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of B(a))!H.call(e,s)&&s!==r&&m(e,s,{get:()=>a[s],enumerable:!(n=w(a,s))||n.enumerable});return e};var C=(e,a,r)=>(r=e!=null?k(D(e)):{},h(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),F=e=>h(m({},"__esModule",{value:!0}),e);var R={};z(R,{default:()=>P});module.exports=F(R);var t=require("react/jsx-runtime"),c=C(require("react")),o=require("../../components/index.js"),l=require("../../helpers/index.js"),v=require("../../shared/Styles.js");const x=c.default.forwardRef(({data:e,className:a},r)=>{const{title:n,subtitle:s,background:b,primaryButton:d,secondaryButton:u,theme:i="light",products:p=[]}=e,g=i==="dark"?"text-white":"text-[#1D1D1F]",N=i==="dark"?"bg-white":"bg-[#1D1D1F]";return(0,t.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:r,className:(0,l.cn)(i==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,t.jsx)(o.Picture,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:b}),(0,t.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32",children:[n&&(0,t.jsxs)("div",{className:"max-w-[686px] space-y-4",children:[(0,t.jsx)(o.Heading,{as:"h1",size:5,className:(0,l.cn)("hero-banner-title",g),html:n}),(0,t.jsx)(o.Text,{className:(0,l.cn)("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",g),html:s})]}),(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[u&&(0,t.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:u.text}),d&&(0,t.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:d.text})]})]}),p.length>0&&(0,t.jsx)("div",{className:"absolute bottom-0 z-10 flex items-center gap-3 px-32 pb-6",children:p.map((y,f)=>(0,t.jsxs)(c.default.Fragment,{children:[(0,t.jsx)(o.Text,{className:(0,l.cn)("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",i==="dark"?"text-white":"text-[#1D1D1F]"),children:y.title}),f<p.length-1&&(0,t.jsx)("div",{className:(0,l.cn)("h-4 w-px",N)})]},f))})]})});x.displayName="HeroBanner";var P=(0,v.withStyles)(x);
|
|
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, background, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\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] relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture className=\"laptop:w-full absolute h-full\" imgClassName=\"h-full object-cover\" source={background} />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32\">\n {title && (\n <div className=\"max-w-[686px] space-y-4\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title', textColorClass)} html={title} />\n <Text\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button size=\"lg\" variant=\"
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIT,EAClGU,EAAiBF,IAAU,OAAS,aAAe,iBACnDG,EAAoBH,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,uBAAqB,aACrB,IAAKN,EACL,aAAW,MACTM,IAAU,OAAS,YAAc,GACjC,2JACAP,CACF,EAEA,oBAAC,WAAQ,UAAU,gCAAgC,aAAa,sBAAsB,OAAQI,EAAY,KAE1G,QAAC,OAAI,UAAU,2FACZ,UAAAF,MACC,QAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,oBAAqBO,CAAc,EAAG,KAAMP,EAAO,KAC3F,OAAC,QACC,aAAW,MACT,4EACAO,CACF,EACA,KAAMN,EACR,GACF,KAGF,QAAC,OAAI,UAAU,0BACZ,UAAAG,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,
|
|
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, background, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\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] relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture className=\"laptop:w-full absolute h-full\" imgClassName=\"h-full object-cover\" source={background} />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32\">\n {title && (\n <div className=\"max-w-[686px] space-y-4\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title', textColorClass)} html={title} />\n <Text\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\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 {products.length > 0 && (\n <div className=\"absolute bottom-0 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 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIT,EAClGU,EAAiBF,IAAU,OAAS,aAAe,iBACnDG,EAAoBH,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,uBAAqB,aACrB,IAAKN,EACL,aAAW,MACTM,IAAU,OAAS,YAAc,GACjC,2JACAP,CACF,EAEA,oBAAC,WAAQ,UAAU,gCAAgC,aAAa,sBAAsB,OAAQI,EAAY,KAE1G,QAAC,OAAI,UAAU,2FACZ,UAAAF,MACC,QAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,oBAAqBO,CAAc,EAAG,KAAMP,EAAO,KAC3F,OAAC,QACC,aAAW,MACT,4EACAO,CACF,EACA,KAAMN,EACR,GACF,KAGF,QAAC,OAAI,UAAU,0BACZ,UAAAG,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAA,EAAgB,KACnB,EAEDD,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAS,OAAS,MACjB,OAAC,OAAI,UAAU,4DACZ,SAAAA,EAAS,IAAI,CAACG,EAASC,OACtB,QAAC,EAAAd,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,gFACAS,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAI,EAAQ,MACX,EACCC,EAAQJ,EAAS,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,WAAYE,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDf,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "products", "textColorClass", "dividerColorClass", "product", "index"]
|
|
7
7
|
}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var v=(o,t)=>{for(var d in t)i(o,d,{get:t[d],enumerable:!0})},f=(o,t,d,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of y(t))!k.call(o,a)&&a!==d&&i(o,a,{get:()=>t[a],enumerable:!(l=b(t,a))||l.enumerable});return o};var N=o=>f(i({},"__esModule",{value:!0}),o);var B={};v(B,{default:()=>q});module.exports=N(B);var e=require("react/jsx-runtime"),C=require("react"),p=require("../../components/index.js"),r=require("../../shared/Styles.js");const h=({data:o,className:t=""})=>{const{title:d,description:l,backgroundImage:a,mobileBackgroundImage:n,primaryButton:u,secondaryButton:c,theme:m,shape:s}=o,x=()=>{},g=()=>{};return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:`
|
|
2
2
|
${m==="dark"?"aiui-dark":""}
|
|
3
3
|
relative w-full overflow-hidden bg-[#242426]
|
|
4
|
-
${
|
|
5
|
-
${
|
|
6
|
-
`,children:[(0,
|
|
7
|
-
radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
|
|
8
|
-
url(${a})
|
|
9
|
-
`,backgroundSize:"cover",backgroundPosition:"center"}}),(0,t.jsx)("div",{className:`
|
|
4
|
+
${s==="rounded"?"tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none":""}
|
|
5
|
+
${t}
|
|
6
|
+
`,children:[(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:a,type:"video/mp4"})}),(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:n,type:"video/mp4"})}),(0,e.jsx)("div",{className:`
|
|
10
7
|
xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]
|
|
11
8
|
desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]
|
|
12
9
|
relative
|
|
@@ -14,28 +11,14 @@
|
|
|
14
11
|
flex
|
|
15
12
|
aspect-[343/200]
|
|
16
13
|
w-full items-center
|
|
17
|
-
`,children:(0,
|
|
14
|
+
`,children:(0,e.jsxs)("div",{className:`
|
|
18
15
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
|
|
19
16
|
desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
|
|
20
|
-
`,children:[(0,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
|
|
28
|
-
max-w-[260px]
|
|
29
|
-
text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white
|
|
30
|
-
`,children:l})]}),(0,t.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,t.jsx)(x.Button,{variant:"primary",onClick:g,className:`
|
|
31
|
-
member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]
|
|
32
|
-
laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4
|
|
33
|
-
py-2 text-xs text-white hover:bg-white hover:text-black
|
|
34
|
-
${d==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
35
|
-
`,children:n.text}),(0,t.jsx)(x.Button,{variant:"secondary",onClick:c,className:`
|
|
36
|
-
member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5
|
|
37
|
-
laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]
|
|
38
|
-
desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs
|
|
39
|
-
${d==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
40
|
-
`,children:i.text})]})]})})]})};var h=(0,r.withStyles)(v);
|
|
17
|
+
`,children:[(0,e.jsxs)("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[(0,e.jsx)(p.Heading,{as:"h2",size:5,className:"member-equity-title ",children:d}),(0,e.jsx)(p.Text,{size:3,className:"member-equity-description",html:l})]}),(0,e.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,e.jsx)(p.Button,{variant:"secondary",onClick:g,className:`
|
|
18
|
+
member-equity-button-secondary
|
|
19
|
+
${s==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
20
|
+
`,children:c.text}),(0,e.jsx)(p.Button,{variant:"primary",onClick:x,className:`
|
|
21
|
+
member-equity-button-primary
|
|
22
|
+
${s==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
23
|
+
`,children:u.text})]})]})})]})};var q=(0,r.withStyles)(h);
|
|
41
24
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, primaryButton, secondaryButton, theme, shape } = data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n ${theme === 'dark' ? 'aiui-dark' : ''}\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n ${className}\n `}\n >\n <
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } = data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n ${theme === 'dark' ? 'aiui-dark' : ''}\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n ${className}\n `}\n >\n <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n <source src={backgroundImage} type=\"video/mp4\" />\n </video>\n <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage} type=\"video/mp4\" />\n </video>\n <div\n className={`\n xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]\n desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]\n relative \n mx-auto\n flex\n aspect-[343/200]\n w-full items-center\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <Heading as=\"h2\" size={5} className={`member-equity-title `}>\n {title}\n </Heading>\n <Text size={3} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={`\n member-equity-button-secondary \n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {secondaryButton.text}\n </Button>\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={`\n member-equity-button-primary \n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {primaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BQ,IAAAI,EAAA,6BA1BRC,EAAkB,iBAClBC,EAAsC,qCACtCC,EAA2B,kCAG3B,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,sBAAAC,EAAuB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAAIT,EAC/GU,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,UAAW;AAAA,UACPH,IAAU,OAAS,YAAc,EAAE;AAAA;AAAA,UAEnCC,IAAU,UAAY,uEAAyE,EAAE;AAAA,UACjGR,CAAS;AAAA,QAGb,oBAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,mBAAC,UAAO,IAAKG,EAAiB,KAAK,YAAY,EACjD,KACA,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKC,EAAuB,KAAK,YAAY,EACvD,KACA,OAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,qBAAC,OAAI,UAAU,+EACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAClC,SAAAH,EACH,KACA,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,mFACb,oBAAC,UACC,QAAQ,YACR,QAASQ,EACT,UAAW;AAAA;AAAA,kBAEPF,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAF,EAAgB,KACnB,KACA,OAAC,UACC,QAAQ,UACR,QAASG,EACT,UAAW;AAAA;AAAA,kBAEPD,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAH,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWM,CAAY",
|
|
6
|
+
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
|
|
7
7
|
}
|
|
@@ -5,8 +5,9 @@ export interface MemberEquityProps extends ComponentCommonProps {
|
|
|
5
5
|
title: string;
|
|
6
6
|
/** 描述文本 */
|
|
7
7
|
description: string;
|
|
8
|
-
/**
|
|
8
|
+
/** 背景图片/视频 URL */
|
|
9
9
|
backgroundImage: string;
|
|
10
|
+
mobileBackgroundImage?: string;
|
|
10
11
|
/** 主按钮配置 */
|
|
11
12
|
primaryButton: {
|
|
12
13
|
text: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var o=Object.defineProperty;var
|
|
1
|
+
"use strict";var o=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var a=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!p.call(t,r)&&r!==s&&o(t,r,{get:()=>e[r],enumerable:!(n=i(e,r))||n.enumerable});return t};var g=t=>a(o({},"__esModule",{value:!0}),t);var h={};module.exports=g(h);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n data: {\n /** \u6807\u9898 */\n title: string\n /** \u63CF\u8FF0\u6587\u672C */\n description: string\n /** \u80CC\u666F\u56FE\u7247 URL */\n backgroundImage: string\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton: {\n text: string\n href: string\n }\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton: {\n text: string\n href: string\n }\n /** \u5F62\u72B6 */\n shape?: Shape\n /** \u4E3B\u9898 */\n theme?: Theme\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n data: {\n /** \u6807\u9898 */\n title: string\n /** \u63CF\u8FF0\u6587\u672C */\n description: string\n /** \u80CC\u666F\u56FE\u7247/\u89C6\u9891 URL */\n backgroundImage: string\n mobileBackgroundImage?: string\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton: {\n text: string\n href: string\n }\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton: {\n text: string\n href: string\n }\n /** \u5F62\u72B6 */\n shape?: Shape\n /** \u4E3B\u9898 */\n theme?: Theme\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var C=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var I=(e,a)=>{for(var i in a)c(e,i,{get:a[i],enumerable:!0})},f=(e,a,i,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of G(a))!w.call(e,r)&&r!==i&&c(e,r,{get:()=>a[r],enumerable:!(l=g(a,r))||l.enumerable});return e};var n=(e,a,i)=>(i=e!=null?C(b(e)):{},f(a||!e||!e.__esModule?c(i,"default",{value:e,enumerable:!0}):i,e)),L=e=>f(c({},"__esModule",{value:!0}),e);var H={};I(H,{default:()=>T});module.exports=L(H);var t=require("react/jsx-runtime"),y=n(require("react")),k=require("../../shared/Styles.js"),v=n(require("../../components/picture.js")),d=n(require("../../components/button.js")),N=require("../../components/heading.js"),x=require("../../components/text.js"),s=require("../../components/carousel.js"),p=require("../../components/gird.js"),B=n(require("../Title/index.js"));const h=({item:e})=>{const{theme:a="light",title:i,description:l,imageUrl:r,primaryBtn:m,secondaryBtn:o}=e;return(0,t.jsxs)("div",{className:`item-wrapper relative w-full border ${a==="dark"?"aiui-dark":"aiui-light"}`,children:[(0,t.jsx)(v.default,{source:r,className:"inset-0"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(N.Heading,{className:"item-title",children:i}),(0,t.jsx)(x.Text,{className:"item-description",children:l})]}),(0,t.jsxs)("div",{className:"flex gap-2",children:[m&&(0,t.jsx)(d.default,{variant:"primary",asChild:!0,children:(0,t.jsx)("a",{href:m.link,children:m.text})}),o&&(0,t.jsx)(d.default,{variant:"secondary",asChild:!0,children:(0,t.jsx)("a",{href:o.link,children:o.text})})]})]})]})},M=y.default.forwardRef((e,a)=>{const{sectionTitle:i,items:l=[],carousel:r}=e.data,m=o=>{switch(o){case"full":return 12;case"half":return 6;case"one-third":return 4}};return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:a,className:"",children:[i&&(0,t.jsx)(B.default,{data:{title:i},className:"section-title"}),(0,t.jsx)(p.Grid,{className:"w-full",children:l.map((o,u)=>(0,t.jsx)(p.GridItem,{span:m(o.width),children:(0,t.jsx)(h,{item:o})},u))}),r&&r?.items.length>0?(0,t.jsx)(s.Carousel,{className:"laptop:mt-4 mt-3",children:(0,t.jsx)(s.CarouselContent,{className:"flex",children:r.items.map((o,u)=>(0,t.jsx)(s.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,t.jsx)(h,{item:o})},u))})}):null]})});var T=(0,k.withStyles)(M);
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\n\nconst ItemBlock = ({ item }: { item: Item }) => {\n const { theme = 'light', title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n return (\n <div className={`item-wrapper relative w-full border ${theme === 'dark' ? 'aiui-dark' : 'aiui-light'}`}>\n <Picture source={imageUrl} className=\"inset-0\" />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading className=\"item-title\">{title}</Heading>\n <Text className=\"item-description\">{description}</Text>\n </div>\n <div className=\"flex gap-2\">\n {primaryBtn && (\n <Button variant=\"primary\" asChild>\n <a href={primaryBtn.link}>{primaryBtn.text}</a>\n </Button>\n )}\n {secondaryBtn && (\n <Button variant=\"secondary\" asChild>\n <a href={secondaryBtn.link}>{secondaryBtn.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { sectionTitle, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n {sectionTitle &&
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "items", "carousel", "getSpan", "width", "index"]
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\n\nconst ItemBlock = ({ item }: { item: Item }) => {\n const { theme = 'light', title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n return (\n <div className={`item-wrapper relative w-full border ${theme === 'dark' ? 'aiui-dark' : 'aiui-light'}`}>\n <Picture source={imageUrl} className=\"inset-0\" />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading className=\"item-title\">{title}</Heading>\n <Text className=\"item-description\">{description}</Text>\n </div>\n <div className=\"flex gap-2\">\n {primaryBtn && (\n <Button variant=\"primary\" asChild>\n <a href={primaryBtn.link}>{primaryBtn.text}</a>\n </Button>\n )}\n {secondaryBtn && (\n <Button variant=\"secondary\" asChild>\n <a href={secondaryBtn.link}>{secondaryBtn.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { sectionTitle, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan(item.width)}>\n <ItemBlock item={item} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgBM,IAAAI,EAAA,6BAhBNC,EAAkB,oBAElBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAAwD,wCACxDC,EAA+B,oCAC/BC,EAAkB,gCAElB,MAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAsB,CAC9C,KAAM,CAAE,MAAAC,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,WAAAC,EAAY,aAAAC,CAAa,EAAIN,EAEpF,SACE,QAAC,OAAI,UAAW,uCAAuCC,IAAU,OAAS,YAAc,YAAY,GAClG,oBAAC,EAAAM,QAAA,CAAQ,OAAQH,EAAU,UAAU,UAAU,KAC/C,QAAC,OAAI,UAAU,kFACb,qBAAC,OACC,oBAAC,WAAQ,UAAU,aAAc,SAAAF,EAAM,KACvC,OAAC,QAAK,UAAU,mBAAoB,SAAAC,EAAY,GAClD,KACA,QAAC,OAAI,UAAU,aACZ,UAAAE,MACC,OAAC,EAAAG,QAAA,CAAO,QAAQ,UAAU,QAAO,GAC/B,mBAAC,KAAE,KAAMH,EAAW,KAAO,SAAAA,EAAW,KAAK,EAC7C,EAEDC,MACC,OAAC,EAAAE,QAAA,CAAO,QAAQ,YAAY,QAAO,GACjC,mBAAC,KAAE,KAAMF,EAAa,KAAO,SAAAA,EAAa,KAAK,EACjD,GAEJ,GACF,GACF,CAEJ,EAEMG,EAA0B,EAAAC,QAAM,WAAyD,CAACC,EAAOC,IAAQ,CAC7G,KAAM,CAAE,aAAAC,EAAc,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIJ,EAAM,KAE/CK,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEA,SACE,QAAC,WAAQ,uBAAqB,0BAA0B,IAAKL,EAAK,UAAU,GACzE,UAAAC,MAAgB,OAAC,EAAAK,QAAA,CAAM,KAAM,CAAE,MAAOL,CAAa,EAAG,UAAU,gBAAgB,KACjF,OAAC,QAAK,UAAU,SACb,SAAAC,EAAM,IAAI,CAACd,EAAMmB,OAChB,OAAC,YAAqB,KAAMH,EAAQhB,EAAK,KAAK,EAC5C,mBAACD,EAAA,CAAU,KAAMC,EAAM,GADVmB,CAEf,CACD,EACH,EACCJ,GAAYA,GAAU,MAAM,OAAS,KACpC,OAAC,YAAS,UAAU,mBAClB,mBAAC,mBAAgB,UAAU,OACxB,SAAAA,EAAS,MAAM,IAAI,CAACf,EAAMmB,OACzB,OAAC,gBAAyB,UAAU,qDAClC,mBAACpB,EAAA,CAAU,KAAMC,EAAM,GADNmB,CAEnB,CACD,EACH,EACF,EACE,MACN,CAEJ,CAAC,EAED,IAAOhC,KAAQ,cAAWsB,CAAuB",
|
|
6
|
+
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "import_Title", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "items", "carousel", "getSpan", "width", "Title", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var V=Object.create;var i=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var w=(e,r)=>{for(var t in r)i(e,t,{get:r[t],enumerable:!0})},f=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of B(r))!E.call(e,o)&&o!==t&&i(e,o,{get:()=>r[o],enumerable:!(n=k(r,o))||n.enumerable});return e};var p=(e,r,t)=>(t=e!=null?V(z(e)):{},f(r||!e||!e.__esModule?i(t,"default",{value:e,enumerable:!0}):t,e)),H=e=>f(i({},"__esModule",{value:!0}),e);var L={};w(L,{default:()=>C});module.exports=H(L);var a=require("react/jsx-runtime"),N=p(require("react")),y=require("@radix-ui/react-slot"),
|
|
1
|
+
"use strict";"use client";var V=Object.create;var i=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var w=(e,r)=>{for(var t in r)i(e,t,{get:r[t],enumerable:!0})},f=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of B(r))!E.call(e,o)&&o!==t&&i(e,o,{get:()=>r[o],enumerable:!(n=k(r,o))||n.enumerable});return e};var p=(e,r,t)=>(t=e!=null?V(z(e)):{},f(r||!e||!e.__esModule?i(t,"default",{value:e,enumerable:!0}):t,e)),H=e=>f(i({},"__esModule",{value:!0}),e);var L={};w(L,{default:()=>C});module.exports=H(L);var a=require("react/jsx-runtime"),N=p(require("react")),y=require("@radix-ui/react-slot"),u=require("@radix-ui/react-visually-hidden"),d=require("class-variance-authority"),m=p(require("../icons/spinner.js")),v=require("../helpers/index.js");const P=(0,d.cva)("ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active hover:text-btn-primary-active-foreground",secondary:"bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border border-solid",link:"text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"px-7 pb-[14px] pt-[15px] text-[16px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none",state:"default"}}),R=(0,d.cva)("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),c=N.forwardRef(({asChild:e=!1,size:r="base",children:t,variant:n,hoverEffect:o="none",className:g,disabled:b=!1,loading:s=!1,spinner:l,...x},h)=>(0,a.jsx)(e?y.Slot:"button",{disabled:b||s,className:(0,v.cn)(P({variant:n,size:r,hoverEffect:o,state:s?"loading":b?"disabled":"default"}),g),ref:h,...x,children:s?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:t}),(0,a.jsx)("span",{className:"absolute",children:l||(0,a.jsx)(m.default,{className:R({variant:n})})}),(0,a.jsx)(u.VisuallyHidden,{children:t})]}):t}));c.displayName="Button";var C=c;
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active hover:text-btn-primary-active-foreground',\n secondary:\n 'bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid',\n link: 'text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'px-7 pb-[14px] pt-[15px] text-[16px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoJU,IAAAI,EAAA,6BAlJVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAMnB,MAAMC,KAAiB,OACrB,gRACA,CACE,SAAU,CACR,QAAS,CACP,QACE,sKACF,UACE,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active hover:text-btn-primary-active-foreground',\n secondary:\n 'bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border border-solid',\n link: 'text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'px-7 pb-[14px] pt-[15px] text-[16px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoJU,IAAAI,EAAA,6BAlJVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAMnB,MAAMC,KAAiB,OACrB,gRACA,CACE,SAAU,CACR,QAAS,CACP,QACE,sKACF,UACE,kKACF,KAAM,iGACN,MAAO,0EACT,EACA,KAAM,CACJ,GAAI,uCACJ,KAAM,qDACN,GAAI,sDACJ,KAAM,qCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mEACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0IACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MACE,qHACJ,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,kIACJ,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,iBACN,MAAO,gBACT,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CAAC,EAeKC,EAASR,EAAM,WACnB,CACE,CACE,QAAAS,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,QAAAC,EACA,GAAGC,CACL,EACAC,OAOE,OALWV,EAAU,OAAO,SAK3B,CACC,SALeM,GAAYC,EAM3B,aAAW,MAAGV,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAG,EAAa,MALjDG,EAAU,UAAYD,EAAW,WAAa,SAKS,CAAC,EAAGD,CAAS,EAC9E,IAAKK,EACJ,GAAGD,EAEH,SAAAF,KACC,oBACE,oBAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAL,EACH,KACA,OAAC,QAAK,UAAU,WACb,SAAAM,MAGC,OAAC,EAAAG,QAAA,CACC,UAAWb,EAAmB,CAC5B,QAAAK,CACF,CAAC,EACH,EAEJ,KACA,OAAC,kBAAgB,SAAAD,EAAS,GAC5B,EAEAA,EAEJ,CAGN,EAEAH,EAAO,YAAc,SACrB,IAAOX,EAAQW",
|
|
6
6
|
"names": ["button_exports", "__export", "button_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "props", "ref", "Spinner"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import p from"react";import{Button as c,Heading as y,Picture as k,Text as d}from"../../components/index.js";import{cn as t}from"../../helpers/index.js";import{withStyles as w}from"../../shared/Styles.js";const u=p.forwardRef(({data:g,className:f},h)=>{const{title:
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import p from"react";import{Button as c,Heading as y,Picture as k,Text as d}from"../../components/index.js";import{cn as t}from"../../helpers/index.js";import{withStyles as w}from"../../shared/Styles.js";const u=p.forwardRef(({data:g,className:f},h)=>{const{title:s,subtitle:x,background:v,primaryButton:l,secondaryButton:n,theme:r="light",products:o=[]}=g,i=r==="dark"?"text-white":"text-[#1D1D1F]",b=r==="dark"?"bg-white":"bg-[#1D1D1F]";return a("div",{"data-ui-component-id":"HeroBanner",ref:h,className:t(r==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden",f),children:[e(k,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:v}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32",children:[s&&a("div",{className:"max-w-[686px] space-y-4",children:[e(y,{as:"h1",size:5,className:t("hero-banner-title",i),html:s}),e(d,{className:t("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",i),html:x})]}),a("div",{className:"flex items-center gap-4",children:[n&&e(c,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:n.text}),l&&e(c,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})]})]}),o.length>0&&e("div",{className:"absolute bottom-0 z-10 flex items-center gap-3 px-32 pb-6",children:o.map((N,m)=>a(p.Fragment,{children:[e(d,{className:t("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",r==="dark"?"text-white":"text-[#1D1D1F]"),children:N.title}),m<o.length-1&&e("div",{className:t("h-4 w-px",b)})]},m))})]})});u.displayName="HeroBanner";var C=w(u);export{C 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, background, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\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] relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture className=\"laptop:w-full absolute h-full\" imgClassName=\"h-full object-cover\" source={background} />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32\">\n {title && (\n <div className=\"max-w-[686px] space-y-4\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title', textColorClass)} html={title} />\n <Text\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button size=\"lg\" variant=\"
|
|
5
|
-
"mappings": "aAsBM,cAAAA,EAII,QAAAC,MAJJ,oBArBN,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,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIT,EAClGU,EAAiBF,IAAU,OAAS,aAAe,iBACnDG,EAAoBH,IAAU,OAAS,WAAa,eAE1D,OACEjB,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTW,IAAU,OAAS,YAAc,GACjC,2JACAP,CACF,EAEA,UAAAX,EAACK,EAAA,CAAQ,UAAU,gCAAgC,aAAa,sBAAsB,OAAQU,EAAY,EAE1Gd,EAAC,OAAI,UAAU,2FACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,oBAAqBa,CAAc,EAAG,KAAMP,EAAO,EAC3Fb,EAACM,EAAA,CACC,UAAWC,EACT,4EACAa,CACF,EACA,KAAMN,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,0BACZ,UAAAgB,GACCjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,
|
|
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, background, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\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] relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture className=\"laptop:w-full absolute h-full\" imgClassName=\"h-full object-cover\" source={background} />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32\">\n {title && (\n <div className=\"max-w-[686px] space-y-4\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title', textColorClass)} html={title} />\n <Text\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\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 {products.length > 0 && (\n <div className=\"absolute bottom-0 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 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "aAsBM,cAAAA,EAII,QAAAC,MAJJ,oBArBN,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,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIT,EAClGU,EAAiBF,IAAU,OAAS,aAAe,iBACnDG,EAAoBH,IAAU,OAAS,WAAa,eAE1D,OACEjB,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTW,IAAU,OAAS,YAAc,GACjC,2JACAP,CACF,EAEA,UAAAX,EAACK,EAAA,CAAQ,UAAU,gCAAgC,aAAa,sBAAsB,OAAQU,EAAY,EAE1Gd,EAAC,OAAI,UAAU,2FACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,oBAAqBa,CAAc,EAAG,KAAMP,EAAO,EAC3Fb,EAACM,EAAA,CACC,UAAWC,EACT,4EACAa,CACF,EACA,KAAMN,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,0BACZ,UAAAgB,GACCjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAc,EAAgB,KACnB,EAEDD,GACChB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAa,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAS,OAAS,GACjBnB,EAAC,OAAI,UAAU,4DACZ,SAAAmB,EAAS,IAAI,CAACG,EAASC,IACtBtB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,gFACAW,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAI,EAAQ,MACX,EACCC,EAAQJ,EAAS,OAAS,GAAKnB,EAAC,OAAI,UAAWO,EAAG,WAAYc,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDd,EAAW,YAAc,aAEzB,IAAOe,EAAQhB,EAAWC,CAAU",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "products", "textColorClass", "dividerColorClass", "product", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
2
|
-
${
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Button as a,Heading as g,Text as b}from"../../components/index.js";import{withStyles as y}from"../../shared/Styles.js";const k=({data:p,className:d=""})=>{const{title:l,description:s,backgroundImage:i,mobileBackgroundImage:r,primaryButton:n,secondaryButton:u,theme:c,shape:o}=p,m=()=>{},x=()=>{};return t("section",{"data-ui-component-id":"MemberEquity",className:`
|
|
2
|
+
${c==="dark"?"aiui-dark":""}
|
|
3
3
|
relative w-full overflow-hidden bg-[#242426]
|
|
4
|
-
${
|
|
5
|
-
${
|
|
6
|
-
`,children:[
|
|
7
|
-
radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
|
|
8
|
-
url(${x})
|
|
9
|
-
`,backgroundSize:"cover",backgroundPosition:"center"}}),t("div",{className:`
|
|
4
|
+
${o==="rounded"?"tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none":""}
|
|
5
|
+
${d}
|
|
6
|
+
`,children:[e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:i,type:"video/mp4"})}),e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:e("source",{src:r,type:"video/mp4"})}),e("div",{className:`
|
|
10
7
|
xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]
|
|
11
8
|
desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]
|
|
12
9
|
relative
|
|
@@ -14,28 +11,14 @@
|
|
|
14
11
|
flex
|
|
15
12
|
aspect-[343/200]
|
|
16
13
|
w-full items-center
|
|
17
|
-
`,children:
|
|
14
|
+
`,children:t("div",{className:`
|
|
18
15
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
|
|
19
16
|
desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
|
|
20
|
-
`,children:[
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
|
|
28
|
-
max-w-[260px]
|
|
29
|
-
text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white
|
|
30
|
-
`,children:s})]}),e("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[t(a,{variant:"primary",onClick:m,className:`
|
|
31
|
-
member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]
|
|
32
|
-
laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4
|
|
33
|
-
py-2 text-xs text-white hover:bg-white hover:text-black
|
|
34
|
-
${p==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
35
|
-
`,children:r.text}),t(a,{variant:"secondary",onClick:g,className:`
|
|
36
|
-
member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5
|
|
37
|
-
laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]
|
|
38
|
-
desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs
|
|
39
|
-
${p==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
40
|
-
`,children:n.text})]})]})})]})};var w=c(u);export{w as default};
|
|
17
|
+
`,children:[t("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[e(g,{as:"h2",size:5,className:"member-equity-title ",children:l}),e(b,{size:3,className:"member-equity-description",html:s})]}),t("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[e(a,{variant:"secondary",onClick:x,className:`
|
|
18
|
+
member-equity-button-secondary
|
|
19
|
+
${o==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
20
|
+
`,children:u.text}),e(a,{variant:"primary",onClick:m,className:`
|
|
21
|
+
member-equity-button-primary
|
|
22
|
+
${o==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
|
|
23
|
+
`,children:n.text})]})]})})]})};var q=y(k);export{q as default};
|
|
41
24
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, primaryButton, secondaryButton, theme, shape } = data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n ${theme === 'dark' ? 'aiui-dark' : ''}\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n ${className}\n `}\n >\n <
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Button", "withStyles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "MemberEquity_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } = data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n ${theme === 'dark' ? 'aiui-dark' : ''}\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n ${className}\n `}\n >\n <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n <source src={backgroundImage} type=\"video/mp4\" />\n </video>\n <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage} type=\"video/mp4\" />\n </video>\n <div\n className={`\n xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]\n desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]\n relative \n mx-auto\n flex\n aspect-[343/200]\n w-full items-center\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <Heading as=\"h2\" size={5} className={`member-equity-title `}>\n {title}\n </Heading>\n <Text size={3} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={`\n member-equity-button-secondary \n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {secondaryButton.text}\n </Button>\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={`\n member-equity-button-primary \n ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n `}\n >\n {primaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "aA2BQ,cAAAA,EAsBE,QAAAC,MAtBF,oBA1BR,MAAkB,QAClB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BACtC,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,sBAAAC,EAAuB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAAIT,EAC/GU,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,OACEjB,EAAC,WACC,uBAAqB,eACrB,UAAW;AAAA,UACPc,IAAU,OAAS,YAAc,EAAE;AAAA;AAAA,UAEnCC,IAAU,UAAY,uEAAyE,EAAE;AAAA,UACjGR,CAAS;AAAA,QAGb,UAAAR,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,SAAAA,EAAC,UAAO,IAAKW,EAAiB,KAAK,YAAY,EACjD,EACAX,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,SAAAA,EAAC,UAAO,IAAKY,EAAuB,KAAK,YAAY,EACvD,EACAZ,EAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,UAAAA,EAAC,OAAI,UAAU,+EACb,UAAAD,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAClC,SAAAM,EACH,EACAT,EAACI,EAAA,CAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMM,EAAa,GAC5E,EAEAT,EAAC,OAAI,UAAU,mFACb,UAAAD,EAACE,EAAA,CACC,QAAQ,YACR,QAASgB,EACT,UAAW;AAAA;AAAA,kBAEPF,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAF,EAAgB,KACnB,EACAd,EAACE,EAAA,CACC,QAAQ,UACR,QAASe,EACT,UAAW;AAAA;AAAA,kBAEPD,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAH,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOM,EAAQd,EAAWC,CAAY",
|
|
6
|
+
"names": ["jsx", "jsxs", "Button", "Heading", "Text", "withStyles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "MemberEquity_default"]
|
|
7
7
|
}
|
|
@@ -5,8 +5,9 @@ export interface MemberEquityProps extends ComponentCommonProps {
|
|
|
5
5
|
title: string;
|
|
6
6
|
/** 描述文本 */
|
|
7
7
|
description: string;
|
|
8
|
-
/**
|
|
8
|
+
/** 背景图片/视频 URL */
|
|
9
9
|
backgroundImage: string;
|
|
10
|
+
mobileBackgroundImage?: string;
|
|
10
11
|
/** 主按钮配置 */
|
|
11
12
|
primaryButton: {
|
|
12
13
|
text: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as
|
|
1
|
+
import{jsx as t,jsxs as r}from"react/jsx-runtime";import u from"react";import{withStyles as d}from"../../shared/Styles.js";import f from"../../components/picture.js";import n from"../../components/button.js";import{Heading as h}from"../../components/heading.js";import{Text as y}from"../../components/text.js";import{Carousel as k,CarouselContent as v,CarouselItem as N}from"../../components/carousel.js";import{Grid as x,GridItem as B}from"../../components/gird.js";import C from"../Title/index.js";const p=({item:l})=>{const{theme:s="light",title:o,description:m,imageUrl:a,primaryBtn:i,secondaryBtn:e}=l;return r("div",{className:`item-wrapper relative w-full border ${s==="dark"?"aiui-dark":"aiui-light"}`,children:[t(f,{source:a,className:"inset-0"}),r("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[r("div",{children:[t(h,{className:"item-title",children:o}),t(y,{className:"item-description",children:m})]}),r("div",{className:"flex gap-2",children:[i&&t(n,{variant:"primary",asChild:!0,children:t("a",{href:i.link,children:i.text})}),e&&t(n,{variant:"secondary",asChild:!0,children:t("a",{href:e.link,children:e.text})})]})]})]})},g=u.forwardRef((l,s)=>{const{sectionTitle:o,items:m=[],carousel:a}=l.data,i=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}};return r("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,className:"",children:[o&&t(C,{data:{title:o},className:"section-title"}),t(x,{className:"w-full",children:m.map((e,c)=>t(B,{span:i(e.width),children:t(p,{item:e})},c))}),a&&a?.items.length>0?t(k,{className:"laptop:mt-4 mt-3",children:t(v,{className:"flex",children:a.items.map((e,c)=>t(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(p,{item:e})},c))})}):null]})});var R=d(g);export{R as default};
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\n\nconst ItemBlock = ({ item }: { item: Item }) => {\n const { theme = 'light', title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n return (\n <div className={`item-wrapper relative w-full border ${theme === 'dark' ? 'aiui-dark' : 'aiui-light'}`}>\n <Picture source={imageUrl} className=\"inset-0\" />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading className=\"item-title\">{title}</Heading>\n <Text className=\"item-description\">{description}</Text>\n </div>\n <div className=\"flex gap-2\">\n {primaryBtn && (\n <Button variant=\"primary\" asChild>\n <a href={primaryBtn.link}>{primaryBtn.text}</a>\n </Button>\n )}\n {secondaryBtn && (\n <Button variant=\"secondary\" asChild>\n <a href={secondaryBtn.link}>{secondaryBtn.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { sectionTitle, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n {sectionTitle &&
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "items", "carousel", "getSpan", "width", "index", "MultiLayoutGraphicBlock_default"]
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\n\nconst ItemBlock = ({ item }: { item: Item }) => {\n const { theme = 'light', title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n return (\n <div className={`item-wrapper relative w-full border ${theme === 'dark' ? 'aiui-dark' : 'aiui-light'}`}>\n <Picture source={imageUrl} className=\"inset-0\" />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading className=\"item-title\">{title}</Heading>\n <Text className=\"item-description\">{description}</Text>\n </div>\n <div className=\"flex gap-2\">\n {primaryBtn && (\n <Button variant=\"primary\" asChild>\n <a href={primaryBtn.link}>{primaryBtn.text}</a>\n </Button>\n )}\n {secondaryBtn && (\n <Button variant=\"secondary\" asChild>\n <a href={secondaryBtn.link}>{secondaryBtn.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { sectionTitle, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan(item.width)}>\n <ItemBlock item={item} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\n"],
|
|
5
|
+
"mappings": "AAgBM,cAAAA,EAEE,QAAAC,MAFF,oBAhBN,OAAOC,MAAW,QAElB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,+BACxD,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAElB,MAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAsB,CAC9C,KAAM,CAAE,MAAAC,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,WAAAC,EAAY,aAAAC,CAAa,EAAIN,EAEpF,OACEd,EAAC,OAAI,UAAW,uCAAuCe,IAAU,OAAS,YAAc,YAAY,GAClG,UAAAhB,EAACI,EAAA,CAAQ,OAAQe,EAAU,UAAU,UAAU,EAC/ClB,EAAC,OAAI,UAAU,kFACb,UAAAA,EAAC,OACC,UAAAD,EAACM,EAAA,CAAQ,UAAU,aAAc,SAAAW,EAAM,EACvCjB,EAACO,EAAA,CAAK,UAAU,mBAAoB,SAAAW,EAAY,GAClD,EACAjB,EAAC,OAAI,UAAU,aACZ,UAAAmB,GACCpB,EAACK,EAAA,CAAO,QAAQ,UAAU,QAAO,GAC/B,SAAAL,EAAC,KAAE,KAAMoB,EAAW,KAAO,SAAAA,EAAW,KAAK,EAC7C,EAEDC,GACCrB,EAACK,EAAA,CAAO,QAAQ,YAAY,QAAO,GACjC,SAAAL,EAAC,KAAE,KAAMqB,EAAa,KAAO,SAAAA,EAAa,KAAK,EACjD,GAEJ,GACF,GACF,CAEJ,EAEMC,EAA0BpB,EAAM,WAAyD,CAACqB,EAAOC,IAAQ,CAC7G,KAAM,CAAE,aAAAC,EAAc,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIJ,EAAM,KAE/CK,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEA,OACE5B,EAAC,WAAQ,uBAAqB,0BAA0B,IAAKuB,EAAK,UAAU,GACzE,UAAAC,GAAgBzB,EAACa,EAAA,CAAM,KAAM,CAAE,MAAOY,CAAa,EAAG,UAAU,gBAAgB,EACjFzB,EAACW,EAAA,CAAK,UAAU,SACb,SAAAe,EAAM,IAAI,CAACX,EAAMe,IAChB9B,EAACY,EAAA,CAAqB,KAAMgB,EAAQb,EAAK,KAAK,EAC5C,SAAAf,EAACc,EAAA,CAAU,KAAMC,EAAM,GADVe,CAEf,CACD,EACH,EACCH,GAAYA,GAAU,MAAM,OAAS,EACpC3B,EAACQ,EAAA,CAAS,UAAU,mBAClB,SAAAR,EAACS,EAAA,CAAgB,UAAU,OACxB,SAAAkB,EAAS,MAAM,IAAI,CAACZ,EAAMe,IACzB9B,EAACU,EAAA,CAAyB,UAAU,qDAClC,SAAAV,EAACc,EAAA,CAAU,KAAMC,EAAM,GADNe,CAEnB,CACD,EACH,EACF,EACE,MACN,CAEJ,CAAC,EAED,IAAOC,EAAQ5B,EAAWmB,CAAuB",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "Title", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "items", "carousel", "getSpan", "width", "index", "MultiLayoutGraphicBlock_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as V,jsx as e,jsxs as k}from"react/jsx-runtime";import*as y from"react";import{Slot as
|
|
1
|
+
"use client";import{Fragment as V,jsx as e,jsxs as k}from"react/jsx-runtime";import*as y from"react";import{Slot as u}from"@radix-ui/react-slot";import{VisuallyHidden as m}from"@radix-ui/react-visually-hidden";import{cva as i}from"class-variance-authority";import v from"../icons/spinner.js";import{cn as g}from"../helpers/index.js";const x=i("ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active hover:text-btn-primary-active-foreground",secondary:"bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border border-solid",link:"text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"px-7 pb-[14px] pt-[15px] text-[16px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none",state:"default"}}),h=i("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),s=y.forwardRef(({asChild:d=!1,size:b="base",children:r,variant:a,hoverEffect:l="none",className:f,disabled:o=!1,loading:t=!1,spinner:n,...p},c)=>e(d?u:"button",{disabled:o||t,className:g(x({variant:a,size:b,hoverEffect:l,state:t?"loading":o?"disabled":"default"}),f),ref:c,...p,children:t?k(V,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:r}),e("span",{className:"absolute",children:n||e(v,{className:h({variant:a})})}),e(m,{children:r})]}):r}));s.displayName="Button";var C=s;export{C as default};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active hover:text-btn-primary-active-foreground',\n secondary:\n 'bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid',\n link: 'text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'px-7 pb-[14px] pt-[15px] text-[16px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
-
"mappings": "aAoJU,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAlJV,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAAS,kBAAAC,MAAsB,kCAC/B,OAA4B,OAAAC,MAAW,2BACvC,OAAOC,MAAa,sBACpB,OAAS,MAAAC,MAAU,sBAMnB,MAAMC,EAAiBH,EACrB,gRACA,CACE,SAAU,CACR,QAAS,CACP,QACE,sKACF,UACE,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active hover:text-btn-primary-active-foreground',\n secondary:\n 'bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border border-solid',\n link: 'text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'px-7 pb-[14px] pt-[15px] text-[16px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "aAoJU,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAlJV,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAAS,kBAAAC,MAAsB,kCAC/B,OAA4B,OAAAC,MAAW,2BACvC,OAAOC,MAAa,sBACpB,OAAS,MAAAC,MAAU,sBAMnB,MAAMC,EAAiBH,EACrB,gRACA,CACE,SAAU,CACR,QAAS,CACP,QACE,sKACF,UACE,kKACF,KAAM,iGACN,MAAO,0EACT,EACA,KAAM,CACJ,GAAI,uCACJ,KAAM,qDACN,GAAI,sDACJ,KAAM,qCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mEACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0IACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MACE,qHACJ,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,kIACJ,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMI,EAAqBJ,EAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,iBACN,MAAO,gBACT,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CAAC,EAeKK,EAASR,EAAM,WACnB,CACE,CACE,QAAAS,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,QAAAC,EACA,GAAGC,CACL,EACAC,IAOErB,EALWW,EAAUR,EAAO,SAK3B,CACC,SALec,GAAYC,EAM3B,UAAWX,EAAGC,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAG,EAAa,MALjDG,EAAU,UAAYD,EAAW,WAAa,SAKS,CAAC,EAAGD,CAAS,EAC9E,IAAKK,EACJ,GAAGD,EAEH,SAAAF,EACCjB,EAAAF,EAAA,CACE,UAAAC,EAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAa,EACH,EACAb,EAAC,QAAK,UAAU,WACb,SAAAmB,GAGCnB,EAACM,EAAA,CACC,UAAWG,EAAmB,CAC5B,QAAAK,CACF,CAAC,EACH,EAEJ,EACAd,EAACI,EAAA,CAAgB,SAAAS,EAAS,GAC5B,EAEAA,EAEJ,CAGN,EAEAH,EAAO,YAAc,SACrB,IAAOY,EAAQZ",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "Slot", "VisuallyHidden", "cva", "Spinner", "cn", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "props", "ref", "button_default"]
|
|
7
7
|
}
|
package/dist/tokens/anker.css
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
--btn-bg-active-color: var(--brand-color-0);
|
|
3
3
|
--btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
|
|
4
4
|
|
|
5
|
-
--btn-bg-secondary-color:
|
|
5
|
+
--btn-bg-secondary-color: transparent;
|
|
6
6
|
--btn-bg-secondary-active-color: #6e6e73;
|
|
7
7
|
--btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
|
|
8
8
|
--btn-border-secondary-border-color: #acacac;
|
package/dist/tokens/eufy.css
CHANGED
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1604,8 +1604,8 @@ video {
|
|
|
1604
1604
|
.hover\:text-btn-primary-foreground:hover {
|
|
1605
1605
|
color: var(--btn-text-color);
|
|
1606
1606
|
}
|
|
1607
|
-
.hover\:text-btn-secondary:hover {
|
|
1608
|
-
color: var(--btn-
|
|
1607
|
+
.hover\:text-btn-secondary-active-foreground:hover {
|
|
1608
|
+
color: var(--btn-text-active-color);
|
|
1609
1609
|
}
|
|
1610
1610
|
.hover\:underline:hover {
|
|
1611
1611
|
text-decoration-line: underline;
|