@anker-in/headless-ui 0.0.27-alpha.147 → 0.0.27-alpha.149

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.
Files changed (16) hide show
  1. package/dist/cjs/biz-components/Graphic/index.js +1 -1
  2. package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
  3. package/dist/cjs/biz-components/ShelfDisplay/index.js +2 -2
  4. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
  5. package/dist/esm/biz-components/Graphic/index.js +1 -1
  6. package/dist/esm/biz-components/Graphic/index.js.map +2 -2
  7. package/dist/esm/biz-components/ShelfDisplay/index.js +2 -2
  8. package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
  9. package/dist/tokens/anker.css +0 -13
  10. package/dist/tokens/base.css +0 -1
  11. package/dist/tokens/eufy.css +0 -3
  12. package/dist/tokens/solix.css +2 -2
  13. package/dist/tokens/soundcore.css +0 -5
  14. package/package.json +2 -1
  15. package/style.css +0 -3
  16. package/tailwind.config.js +1 -0
package/dist/cjs/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var M=Object.create;var l=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of S(t))!A.call(e,i)&&i!==o&&l(e,i,{get:()=>t[i],enumerable:!(p=G(t,i))||p.enumerable});return e};var c=(e,t,o)=>(o=e!=null?M(B(e)):{},d(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),R=e=>d(l({},"__esModule",{value:!0}),e);var E={};H(E,{default:()=>D});module.exports=R(E);var s=require("react/jsx-runtime"),r=c(require("react")),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),g=c(require("../SwiperBox/index.js")),v=require("../../components/index.js"),a=require("../../components/index.js"),w=require("../../components/container.js"),k=c(require("../Title/index.js")),b=require("react-responsive"),y=require("../../hooks/useExposure.js"),N=require("../AiuiProvider/index.js"),P=require("../../shared/trackUrlRef.js");const f="image",u="graphic",V=({data:e,configuration:t})=>{const o=(0,b.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,m.cn)((()=>{switch(t.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":o,"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.link,`${f}_${u}`),className:"relative cursor-pointer",children:[(0,s.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,s.jsx)(a.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,s.jsx)(v.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},h=r.default.forwardRef(({data:e,className:t,...o},p)=>{const i=e?.items?.length>2,n=(0,r.useRef)(null);(0,r.useImperativeHandle)(p,()=>n.current);const{trackingData:C}=(0,N.useAiuiContext)(),{profileActivated:T}=C;return(0,y.useExposure)(n,{componentType:f,componentName:u,memberActiveStatus:T?"active":"not active",componentTitle:e?.title}),(0,s.jsx)("div",{className:t,ref:n,children:(0,s.jsx)("div",{className:"graphic-box",children:(0,s.jsxs)(w.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,s.jsx)(k.default,{data:{title:e?.title}}),(0,s.jsx)(g.default,{id:"Graphic",className:(0,m.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:i?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:i?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:i?4:2}}})]})})})});h.displayName="Graphic";var D=(0,x.withStyles)(h);
1
+ "use strict";"use client";var M=Object.create;var l=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of S(t))!A.call(e,i)&&i!==o&&l(e,i,{get:()=>t[i],enumerable:!(p=G(t,i))||p.enumerable});return e};var c=(e,t,o)=>(o=e!=null?M(B(e)):{},d(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),R=e=>d(l({},"__esModule",{value:!0}),e);var E={};H(E,{default:()=>D});module.exports=R(E);var s=require("react/jsx-runtime"),r=c(require("react")),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),g=c(require("../SwiperBox/index.js")),v=require("../../components/index.js"),a=require("../../components/index.js"),w=require("../../components/container.js"),k=c(require("../Title/index.js")),b=require("react-responsive"),y=require("../../hooks/useExposure.js"),N=require("../AiuiProvider/index.js"),P=require("../../shared/trackUrlRef.js");const f="image",u="graphic",V=({data:e,configuration:t})=>{const o=(0,b.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,m.cn)((()=>{switch(t.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":o,"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.link,`${f}_${u}`),className:"relative block size-full cursor-pointer",children:[(0,s.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,s.jsx)(a.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,s.jsx)(v.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},h=r.default.forwardRef(({data:e,className:t,...o},p)=>{const i=e?.items?.length>2,n=(0,r.useRef)(null);(0,r.useImperativeHandle)(p,()=>n.current);const{trackingData:C}=(0,N.useAiuiContext)(),{profileActivated:T}=C;return(0,y.useExposure)(n,{componentType:f,componentName:u,memberActiveStatus:T?"active":"not active",componentTitle:e?.title}),(0,s.jsx)("div",{className:t,ref:n,children:(0,s.jsx)("div",{className:"graphic-box",children:(0,s.jsxs)(w.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,s.jsx)(k.default,{data:{title:e?.title}}),(0,s.jsx)(g.default,{id:"Graphic",className:(0,m.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:i?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:i?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:i?4:2}}})]})})})});h.displayName="Graphic";var D=(0,x.withStyles)(h);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Graphic/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={trackUrlRef(data?.link, `${componentType}_${componentName}`)} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2DQ,IAAAI,EAAA,6BA1DRC,EAAmD,oBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAA0B,yCAC1BC,EAAkB,gCAClBC,EAA8B,4BAE9BC,EAA4B,sCAC5BC,EAA+B,oCAC/BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,SACE,OAAC,OACC,aAAW,OAfM,IAAM,CACzB,OAAQD,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,yGACT,IAAK,GACH,MAAO,uGACT,IAAK,GACH,MAAO,uGACT,QACE,MAAO,sGACX,CACF,GAI+B,EAAG,mCAAoC,CAChE,YAAaC,EACZ,gDAAkDD,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KAAE,QAAM,eAAYD,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EAAG,UAAU,0BAC/E,oBAAC,WACC,UAAU,SACV,aAAa,yEACb,OAAQE,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,CAEJ,EAEMG,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAJ,EAAM,UAAAK,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUR,GAAM,OAAyB,OAAS,EAClDS,KAAW,UAAuB,IAAI,KAC5C,uBAAoBF,EAAK,IAAME,EAAS,OAAyB,EACjE,KAAM,CAAE,aAAAC,CAAa,KAAI,kBAAe,EAClC,CAAE,iBAAAC,CAAiB,EAAID,EAE7B,wBAAYD,EAAU,CACpB,cAAAZ,EACA,cAAAC,EACA,mBAAoBa,EAAmB,SAAW,aAClD,eAAgBX,GAAM,KACxB,CAAC,KAGC,OAAC,OAAI,UAAWK,EAAW,IAAKI,EAC9B,mBAAC,OAAI,UAAU,cACb,oBAAC,aAAW,GAAIT,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,UAAS,OAAC,EAAAY,QAAA,CAAM,KAAM,CAAE,MAAOZ,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAa,QAAA,CACC,GAAG,UACH,aAAW,MAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMb,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,CAC9B,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeS,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOpB,KAAQ,cAAWoB,CAAO",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8DQ,IAAAI,EAAA,6BA7DRC,EAAmD,oBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAA0B,yCAC1BC,EAAkB,gCAClBC,EAA8B,4BAE9BC,EAA4B,sCAC5BC,EAA+B,oCAC/BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,SACE,OAAC,OACC,aAAW,OAfM,IAAM,CACzB,OAAQD,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,yGACT,IAAK,GACH,MAAO,uGACT,IAAK,GACH,MAAO,uGACT,QACE,MAAO,sGACX,CACF,GAI+B,EAAG,mCAAoC,CAChE,YAAaC,EACZ,gDAAkDD,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KACC,QAAM,eAAYD,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,0CAEV,oBAAC,WACC,UAAU,SACV,aAAa,yEACb,OAAQE,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,CAEJ,EAEMG,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAJ,EAAM,UAAAK,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUR,GAAM,OAAyB,OAAS,EAClDS,KAAW,UAAuB,IAAI,KAC5C,uBAAoBF,EAAK,IAAME,EAAS,OAAyB,EACjE,KAAM,CAAE,aAAAC,CAAa,KAAI,kBAAe,EAClC,CAAE,iBAAAC,CAAiB,EAAID,EAE7B,wBAAYD,EAAU,CACpB,cAAAZ,EACA,cAAAC,EACA,mBAAoBa,EAAmB,SAAW,aAClD,eAAgBX,GAAM,KACxB,CAAC,KAGC,OAAC,OAAI,UAAWK,EAAW,IAAKI,EAC9B,mBAAC,OAAI,UAAU,cACb,oBAAC,aAAW,GAAIT,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,UAAS,OAAC,EAAAY,QAAA,CAAM,KAAM,CAAE,MAAOZ,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAa,QAAA,CACC,GAAG,UACH,aAAW,MAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMb,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,CAC9B,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeS,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOpB,KAAQ,cAAWoB,CAAO",
6
6
  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_container", "import_Title", "import_react_responsive", "import_useExposure", "import_AiuiProvider", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "React", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,8 +1,8 @@
1
- "use strict";"use client";var F=Object.create;var f=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var i in t)f(e,i,{get:t[i],enumerable:!0})},N=(e,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of J(t))!O.call(e,s)&&s!==i&&f(e,s,{get:()=>t[s],enumerable:!(l=G(t,s))||l.enumerable});return e};var m=(e,t,i)=>(i=e!=null?F(K(e)):{},N(t||!e||!e.__esModule?f(i,"default",{value:e,enumerable:!0}):i,e)),X=e=>N(f({},"__esModule",{value:!0}),e);var te={};W(te,{default:()=>ee});module.exports=X(te);var r=require("react/jsx-runtime"),n=m(require("react")),d=require("../../helpers/utils.js"),I=m(require("../../components/picture.js")),_=m(require("./tabSwitch.js")),g=m(require("../../components/button.js")),C=m(require("../Title/index.js")),M=m(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),A=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../AiuiProvider/index.js"),H=require("../../hooks/useExposure.js"),$=require("../../shared/track.js");const T="image",P="product_shelf",Y=({data:e,configuration:t})=>{const i=(o,a)=>t?.event?.primaryButton?.(o,a+1),l=(o,a)=>t?.event?.secondaryButton?.(o,a+1),{price:s,basePrice:b}=(0,A.formatVariantPrice)({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),c=()=>{const o=e?.sku,a=e?.variants;return a?.find(v=>v?.sku===o)?.image?.url||a?.[0]?.image?.url||""};return(0,r.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",t?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,r.jsx)(I.default,{source:c(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((o,a)=>(0,r.jsx)("div",{className:"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold",children:o},a))}),(0,r.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold",children:e?.title||""}),(0,r.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),(0,r.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:s||""}),(0,r.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:b||""})]}),(0,r.jsxs)("div",{className:(0,d.cn)("flex items-center gap-3",t.direction==="vertical"?"flex-col":""),children:[(0,r.jsx)(g.default,{variant:"primary",onClick:()=>i(e,t?.index),className:`
1
+ "use strict";"use client";var F=Object.create;var f=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var i in t)f(e,i,{get:t[i],enumerable:!0})},N=(e,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of J(t))!O.call(e,s)&&s!==i&&f(e,s,{get:()=>t[s],enumerable:!(l=G(t,s))||l.enumerable});return e};var m=(e,t,i)=>(i=e!=null?F(K(e)):{},N(t||!e||!e.__esModule?f(i,"default",{value:e,enumerable:!0}):i,e)),X=e=>N(f({},"__esModule",{value:!0}),e);var te={};W(te,{default:()=>ee});module.exports=X(te);var r=require("react/jsx-runtime"),n=m(require("react")),d=require("../../helpers/utils.js"),I=m(require("../../components/picture.js")),_=m(require("./tabSwitch.js")),g=m(require("../../components/button.js")),C=m(require("../Title/index.js")),M=m(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),A=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../AiuiProvider/index.js"),H=require("../../hooks/useExposure.js"),$=require("../../shared/track.js");const T="image",P="product_shelf",Y=({data:e,configuration:t})=>{const i=(o,a)=>t?.event?.primaryButton?.(o,a+1),l=(o,a)=>t?.event?.secondaryButton?.(o,a+1),{price:s,basePrice:b}=(0,A.formatVariantPrice)({locale:"us",amount:e?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),c=()=>{const o=e?.sku,a=e?.variants;return a?.find(v=>v?.sku===o)?.image?.url||a?.[0]?.image?.url||""};return(0,r.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",t?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,r.jsx)(I.default,{source:c(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((o,a)=>(0,r.jsx)("div",{className:"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold",children:o},a))}),(0,r.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold",children:e?.title||""}),(0,r.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),(0,r.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:s||""}),(0,r.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:b||""})]}),(0,r.jsxs)("div",{className:(0,d.cn)("flex items-center gap-3",t.direction==="vertical"?"flex-col":""),children:[(0,r.jsx)(g.default,{variant:"primary",onClick:()=>i(e,t?.index),className:`
2
2
  laptop:text-sm desktop:text-base text-xs
3
3
  ${t.direction==="vertical"?"w-full":""}
4
4
  `,children:t?.primaryButton||""}),(0,r.jsx)(g.default,{variant:"secondary",onClick:()=>l(e,t?.index),className:`
5
5
  laptop:text-sm desktop:text-base text-xs
6
6
  ${t.direction==="vertical"?"w-full":""}
7
- `,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},Z=n.default.forwardRef(({data:e,buildData:t,className:i="",key:l,event:s},b)=>{const[c,o]=(0,n.useState)(""),[a,k]=(0,n.useState)([]),v=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,n.useRef)(null);(0,n.useImperativeHandle)(b,()=>x.current);const{trackingData:R}=(0,q.useAiuiContext)(),{profileActivated:w}=R;(0,H.useExposure)(x,{componentType:T,componentName:P,memberActiveStatus:w?"active":"not active",componentTitle:e?.title,navigation:c});const{productsTab:y=[],productsCard:L=[],title:S,align:re="left",isShowTab:B=!0,tabShape:z="square",...U}=e,h=p=>{const j=p?.map(u=>{const D=t?.products?.find(Q=>Q?.handle===u?.handle);if(D)return{sku:u.sku,...D}})?.filter(u=>u);k(j)};return(0,n.useEffect)(()=>{if(B){o(y?.[0]?.tab||""),h(y?.[0]?.data||[]);return}h(L)},[]),(0,r.jsxs)("div",{ref:x,className:(0,d.cn)("min-h-[400px] w-full",i,{"aiui-dark":e?.theme==="dark"}),children:[S&&(0,r.jsx)(C.default,{data:{title:S}}),B&&(0,r.jsx)("div",{className:`${v?"w-full overflow-hidden":""}`,children:(0,r.jsx)(_.default,{value:c,tabs:y,tabShape:z,onTabClick:p=>{o(p?.tab),h(p?.data||[]),(0,$.gaTrack)({event:"ga4Event",event_name:"component_click",member_active_status:w?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:T,component_name:P,component_title:e?.title,component_position:1,navigation:p?.tab}})}})}),(0,r.jsx)(M.default,{className:"!overflow-visible",id:`ShelfDisplay${l}${c}`,data:{list:a,configuration:{...U,event:s}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var ee=(0,E.withStyles)(Z);
7
+ `,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},Z=n.default.forwardRef(({data:e,buildData:t,className:i="",key:l,event:s},b)=>{const[c,o]=(0,n.useState)(""),[a,k]=(0,n.useState)([]),v=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,n.useRef)(null);(0,n.useImperativeHandle)(b,()=>x.current);const{trackingData:R}=(0,q.useAiuiContext)(),{profileActivated:w}=R;(0,H.useExposure)(x,{componentType:T,componentName:P,memberActiveStatus:w?"active":"not active",componentTitle:e?.title,navigation:c});const{productsTab:y=[],productsCard:L=[],title:S,align:re="left",isShowTab:B=!0,tabShape:z="square",...U}=e,h=p=>{const j=p?.map(u=>{const D=t?.products?.find(Q=>Q?.handle===u?.handle);if(D)return{sku:u.sku,...D}})?.filter(u=>u);k(j)};return(0,n.useEffect)(()=>{if(B){o(y?.[0]?.tab||""),h(y?.[0]?.data||[]);return}h(L)},[]),(0,r.jsxs)("div",{ref:x,className:(0,d.cn)("min-h-[400px] w-full",i,{"aiui-dark":e?.theme==="dark"}),children:[S&&(0,r.jsx)(C.default,{data:{title:S}}),B&&(0,r.jsx)("div",{className:`${v?"w-full overflow-hidden":""}`,children:(0,r.jsx)(_.default,{value:c,tabs:y,tabShape:z,onTabClick:p=>{o(p?.tab),h(p?.data||[]),(0,$.gaTrack)({event:"ga4Event",event_name:"component_click",member_active_status:w?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:T,component_name:P,component_title:e?.title,component_position:1,navigation:p?.tab}})}})}),(0,r.jsx)(M.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${l}${c}`,data:{list:a,configuration:{...U,event:s}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var ee=(0,E.withStyles)(Z);
8
8
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
6
  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_AiuiProvider", "import_useExposure", "import_track", "componentType", "componentName", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "index", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "Picture", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "trackingData", "profileActivated", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
7
7
  }
package/dist/esm/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import u,{useImperativeHandle as h,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import v from"../SwiperBox/index.js";import{Heading as w}from"../../components/index.js";import{Picture as k,Text as b}from"../../components/index.js";import{Container as y}from"../../components/container.js";import N from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const n="image",c="graphic",G=({data:e,configuration:s})=>{const p=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":p,"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:r("a",{href:M(e?.link,`${n}_${c}`),className:"relative cursor-pointer",children:[t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),r("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(b,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(w,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},m=u.forwardRef(({data:e,className:s,...p},l)=>{const o=e?.items?.length>2,i=x(null);h(l,()=>i.current);const{trackingData:d}=T(),{profileActivated:f}=d;return C(i,{componentType:n,componentName:c,memberActiveStatus:f?"active":"not active",componentTitle:e?.title}),t("div",{className:s,ref:i,children:t("div",{className:"graphic-box",children:r(y,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(N,{data:{title:e?.title}}),t(v,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})})})});m.displayName="Graphic";var $=g(m);export{$ as default};
1
+ "use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import u,{useImperativeHandle as h,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import v from"../SwiperBox/index.js";import{Heading as w}from"../../components/index.js";import{Picture as k,Text as b}from"../../components/index.js";import{Container as y}from"../../components/container.js";import N from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const n="image",c="graphic",G=({data:e,configuration:s})=>{const p=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":p,"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:r("a",{href:M(e?.link,`${n}_${c}`),className:"relative block size-full cursor-pointer",children:[t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),r("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(b,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(w,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},m=u.forwardRef(({data:e,className:s,...p},l)=>{const o=e?.items?.length>2,i=x(null);h(l,()=>i.current);const{trackingData:d}=T(),{profileActivated:f}=d;return C(i,{componentType:n,componentName:c,memberActiveStatus:f?"active":"not active",componentTitle:e?.title}),t("div",{className:s,ref:i,children:t("div",{className:"graphic-box",children:r(y,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(N,{data:{title:e?.title}}),t(v,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})})})});m.displayName="Graphic";var z=g(m);export{z as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Graphic/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={trackUrlRef(data?.link, `${componentType}_${componentName}`)} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Graphic_default"]
7
7
  }
package/dist/esm/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,8 +1,8 @@
1
- "use client";import{jsx as t,jsxs as m}from"react/jsx-runtime";import E,{useState as S,useEffect as A,useRef as V,useImperativeHandle as q}from"react";import{cn as l}from"../../helpers/utils.js";import H from"../../components/picture.js";import $ from"./tabSwitch.js";import B from"../../components/button.js";import R from"../Title/index.js";import L from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as U}from"./shelfDisplay.js";import{useMediaQuery as j}from"react-responsive";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import{useExposure as F}from"../../hooks/useExposure.js";import{gaTrack as G}from"../../shared/track.js";const D="image",N="product_shelf",J=({data:e,configuration:r})=>{const c=(i,n)=>r?.event?.primaryButton?.(i,n+1),p=(i,n)=>r?.event?.secondaryButton?.(i,n+1),{price:d,basePrice:u}=U({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),o=()=>{const i=e?.sku,n=e?.variants;return n?.find(f=>f?.sku===i)?.image?.url||n?.[0]?.image?.url||""};return m("div",{className:l("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:l("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(H,{source:o(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,n)=>t("div",{className:"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold",children:i},n))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),m("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:d||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:u||""})]}),m("div",{className:l("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(B,{variant:"primary",onClick:()=>c(e,r?.index),className:`
1
+ "use client";import{jsx as t,jsxs as m}from"react/jsx-runtime";import E,{useState as S,useEffect as A,useRef as V,useImperativeHandle as q}from"react";import{cn as l}from"../../helpers/utils.js";import H from"../../components/picture.js";import $ from"./tabSwitch.js";import B from"../../components/button.js";import R from"../Title/index.js";import L from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as U}from"./shelfDisplay.js";import{useMediaQuery as j}from"react-responsive";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import{useExposure as F}from"../../hooks/useExposure.js";import{gaTrack as G}from"../../shared/track.js";const D="image",N="product_shelf",J=({data:e,configuration:r})=>{const c=(i,n)=>r?.event?.primaryButton?.(i,n+1),p=(i,n)=>r?.event?.secondaryButton?.(i,n+1),{price:d,basePrice:u}=U({locale:"us",amount:e?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),o=()=>{const i=e?.sku,n=e?.variants;return n?.find(f=>f?.sku===i)?.image?.url||n?.[0]?.image?.url||""};return m("div",{className:l("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:l("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(H,{source:o(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,n)=>t("div",{className:"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold",children:i},n))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),m("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:d||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:u||""})]}),m("div",{className:l("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(B,{variant:"primary",onClick:()=>c(e,r?.index),className:`
2
2
  laptop:text-sm desktop:text-base text-xs
3
3
  ${r.direction==="vertical"?"w-full":""}
4
4
  `,children:r?.primaryButton||""}),t(B,{variant:"secondary",onClick:()=>p(e,r?.index),className:`
5
5
  laptop:text-sm desktop:text-base text-xs
6
6
  ${r.direction==="vertical"?"w-full":""}
7
- `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},K=E.forwardRef(({data:e,buildData:r,className:c="",key:p,event:d},u)=>{const[o,i]=S(""),[n,y]=S([]),f=j({query:"(max-width: 768px)"}),b=V(null);q(u,()=>b.current);const{trackingData:T}=Q(),{profileActivated:h}=T;F(b,{componentType:D,componentName:N,memberActiveStatus:h?"active":"not active",componentTitle:e?.title,navigation:o});const{productsTab:v=[],productsCard:P=[],title:g,align:O="left",isShowTab:k=!0,tabShape:I="square",..._}=e,x=a=>{const C=a?.map(s=>{const w=r?.products?.find(M=>M?.handle===s?.handle);if(w)return{sku:s.sku,...w}})?.filter(s=>s);y(C)};return A(()=>{if(k){i(v?.[0]?.tab||""),x(v?.[0]?.data||[]);return}x(P)},[]),m("div",{ref:b,className:l("min-h-[400px] w-full",c,{"aiui-dark":e?.theme==="dark"}),children:[g&&t(R,{data:{title:g}}),k&&t("div",{className:`${f?"w-full overflow-hidden":""}`,children:t($,{value:o,tabs:v,tabShape:I,onTabClick:a=>{i(a?.tab),x(a?.data||[]),G({event:"ga4Event",event_name:"component_click",member_active_status:h?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:D,component_name:N,component_title:e?.title,component_position:1,navigation:a?.tab}})}})}),t(L,{className:"!overflow-visible",id:`ShelfDisplay${p}${o}`,data:{list:n,configuration:{..._,event:d}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var me=z(K);export{me as default};
7
+ `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},K=E.forwardRef(({data:e,buildData:r,className:c="",key:p,event:d},u)=>{const[o,i]=S(""),[n,y]=S([]),f=j({query:"(max-width: 768px)"}),b=V(null);q(u,()=>b.current);const{trackingData:T}=Q(),{profileActivated:h}=T;F(b,{componentType:D,componentName:N,memberActiveStatus:h?"active":"not active",componentTitle:e?.title,navigation:o});const{productsTab:v=[],productsCard:P=[],title:g,align:O="left",isShowTab:k=!0,tabShape:I="square",..._}=e,x=a=>{const C=a?.map(s=>{const w=r?.products?.find(M=>M?.handle===s?.handle);if(w)return{sku:s.sku,...w}})?.filter(s=>s);y(C)};return A(()=>{if(k){i(v?.[0]?.tab||""),x(v?.[0]?.data||[]);return}x(P)},[]),m("div",{ref:b,className:l("min-h-[400px] w-full",c,{"aiui-dark":e?.theme==="dark"}),children:[g&&t(R,{data:{title:g}}),k&&t("div",{className:`${f?"w-full overflow-hidden":""}`,children:t($,{value:o,tabs:v,tabShape:I,onTabClick:a=>{i(a?.tab),x(a?.data||[]),G({event:"ga4Event",event_name:"component_click",member_active_status:h?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:D,component_name:N,component_title:e?.title,component_position:1,navigation:a?.tab}})}})}),t(L,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${o}`,data:{list:n,configuration:{..._,event:d}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var me=z(K);export{me as default};
8
8
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n currencyCode: data?.price.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <SwiperBox\n className=\"!overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
- "mappings": "aAuGQ,cAAAA,EA0BF,QAAAC,MA1BE,oBAtGR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QACxE,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,iBACtB,OAAOC,MAAY,6BACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,sBAAAC,MAA0B,oBACnC,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,WAAAC,MAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,gBAyDhBC,EAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,MAAMC,EAAkB,CAACC,EAA0BC,IACjDH,GAAe,OAAO,gBAAgBE,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDH,GAAe,OAAO,kBAAkBE,EAAQC,EAAQ,CAAC,EAErD,CAAE,MAAAE,EAAO,UAAAC,CAAU,EAAIf,EAAmB,CAC9C,OAAQ,KACR,OAAQQ,GAAM,MAAM,QAAU,EAC9B,WAAYA,GAAM,gBAAgB,QAAUA,GAAM,MAAM,QAAU,EAClE,aAAcA,GAAM,MAAM,cAAgB,KAC5C,CAAC,EAEKQ,EAAY,IAAM,CACtB,MAAMC,EAAMT,GAAM,IACZU,EAAWV,GAAM,SAEvB,OADgBU,GAAU,KAAMC,GAAcA,GAAM,MAAQF,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,OACE/B,EAAC,OAEC,UAAWM,EACT,2JACAgB,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,UAAAvB,EAAC,OAAI,UAAWO,EAAG,2FAA2F,EAC5G,SAAAP,EAACQ,EAAA,CAAQ,OAAQsB,EAAU,EAAG,UAAU,yDAAyD,EACnG,EACA9B,EAAC,OAAI,UAAU,2DACZ,SAAAsB,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACW,EAAWP,IAExC1B,EAAC,OAEC,UAAU,8HAET,SAAAiC,GAHIP,CAIP,CAEH,EACH,EACA1B,EAAC,KACC,MAAOsB,GAAM,OAAS,GACtB,UAAU,0GAET,SAAAA,GAAM,OAAS,GAClB,EACAtB,EAAC,MACC,MAAOsB,GAAM,aAAe,GAC5B,UAAU,yGAET,SAAAA,GAAM,aAAe,GACxB,EACArB,EAAC,OAAI,UAAU,yBACb,UAAAD,EAAC,OAAI,UAAU,sDAAuD,SAAA4B,GAAS,GAAG,EAClF5B,EAAC,OAAI,UAAU,6DAA8D,SAAA6B,GAAa,GAAG,GAC/F,EAEA5B,EAAC,OAAI,UAAWM,EAAG,0BAA2BgB,EAAc,YAAc,WAAa,WAAa,EAAE,EACpG,UAAAvB,EAACU,EAAA,CACC,QAAQ,UACR,QAAS,IAAMc,EAAgBF,EAAMC,GAAe,KAAK,EACzD,UAAW;AAAA;AAAA,cAEPA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,eAAiB,GACnC,EACAvB,EAACU,EAAA,CACC,QAAQ,YACR,QAAS,IAAMiB,EAAkBL,EAAMC,GAAe,KAAK,EAC3D,UAAW;AAAA;AAAA,cAEPA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,iBAAmB,GACrC,GACF,IA3DKD,GAAM,IAAMA,GAAM,MA4DzB,CAEJ,EAEMY,EAAehC,EAAM,WACzB,CAAC,CAAE,KAAAoB,EAAM,UAAAa,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAGC,IAAQ,CACxD,KAAM,CAACC,EAAOC,CAAQ,EAAItC,EAAiB,EAAE,EACvC,CAACuC,EAAcC,CAAe,EAAIxC,EAA6B,CAAC,CAAC,EAEjEyC,EAAW7B,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAExD8B,EAAWxC,EAAuB,IAAI,EAC5CC,EAAoBiC,EAAK,IAAMM,EAAS,OAAyB,EACjE,KAAM,CAAE,aAAAC,CAAa,EAAI9B,EAAe,EAClC,CAAE,iBAAA+B,CAAiB,EAAID,EAE7B7B,EAAY4B,EAAU,CACpB,cAAe1B,EACf,cAAeC,EACf,mBAAoB2B,EAAmB,SAAW,aAClD,eAAgBzB,GAAM,MACtB,WAAYkB,CACd,CAAC,EAED,KAAM,CACJ,YAAAQ,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,GAAGC,CACL,EAAIhC,EAEEiC,EAAoBC,GAAoC,CAC5D,MAAMC,EAAiBD,GACnB,IAAIvB,GAAQ,CACZ,MAAMyB,EAAWvB,GAAW,UAAU,KAAKV,GAAUA,GAAQ,SAAWQ,GAAM,MAAM,EACpF,GAAIyB,EACF,MAAO,CACL,IAAKzB,EAAK,IACV,GAAGyB,CACL,CAEJ,CAAC,GACC,OAAOzB,GAAQA,CAAI,EACvBU,EAAgBc,CAAc,CAChC,EAEA,OAAArD,EAAU,IAAM,CACd,GAAIgD,EAAW,CACbX,EAASO,IAAc,CAAC,GAAG,KAAO,EAAE,EACpCO,EAAiBP,IAAc,CAAC,GAAG,MAAQ,CAAC,CAAC,EAC7C,MACF,CACAO,EAAiBN,CAAY,CAC/B,EAAG,CAAC,CAAC,EAGHhD,EAAC,OAAI,IAAK4C,EAAU,UAAWtC,EAAG,uBAAwB6B,EAAW,CAAE,YAAad,GAAM,QAAU,MAAO,CAAC,EACzG,UAAA4B,GAASlD,EAACW,EAAA,CAAM,KAAM,CAAE,MAAOuC,CAAM,EAAG,EACxCE,GACCpD,EAAC,OAAI,UAAW,GAAG4C,EAAW,yBAA2B,EAAE,GACzD,SAAA5C,EAACS,EAAA,CACC,MAAO+B,EACP,KAAMQ,EACN,SAAUK,EACV,WAAYM,GAAK,CACflB,EAASkB,GAAG,GAAG,EACfJ,EAAiBI,GAAG,MAAQ,CAAC,CAAC,EAC9BzC,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,qBAAsB6B,EAAmB,SAAW,aACpD,iBAAkB,CAChB,WAAY,0BACZ,eAAgB5B,EAChB,eAAgBC,EAChB,gBAAiBE,GAAM,MACvB,mBAAoB,EACpB,WAAYqC,GAAG,GACjB,CACF,CAAC,CACH,EACF,EACF,EAEF3D,EAACY,EAAA,CACC,UAAU,oBACV,GAAI,eAAeyB,CAAG,GAAGG,CAAK,GAC9B,KAAM,CAAE,KAAME,EAAc,cAAe,CAAE,GAAGY,EAAO,MAAOhB,CAAM,CAAE,EACtE,MAAOjB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOuC,GAAQ/C,EAAWqB,CAAY",
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const { price, basePrice } = formatVariantPrice({\n locale: 'us',\n amount: data?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return (\n <div\n key={index}\n className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n >\n {item}\n </div>\n )\n })}\n </div>\n <p\n title={data?.title || ''}\n className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n >\n {data?.title || ''}\n </p>\n <h3\n title={data?.description || ''}\n className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n >\n {data?.description || ''}\n </h3>\n <div className=\"mb-2 flex items-center\">\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useAiuiContext", "useExposure", "gaTrack", "componentType", "componentName", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "index", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "trackingData", "profileActivated", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
7
7
  }
package/dist/tokens/anker.css CHANGED
@@ -1,22 +1,9 @@
1
1
  :root {
2
2
  --btn-bg-active-color: var(--brand-color-0);
3
- --btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
4
-
5
- --btn-bg-secondary-color: transparent;
6
- --btn-bg-secondary-active-color: #6e6e73;
7
- --btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
8
- --btn-border-secondary-border-color: #acacac;
9
3
 
10
4
  --btn-radius: 0;
11
-
12
5
  --radius: 0em;
13
6
 
14
- --letter-spacing-normal: -0.02em;
15
- --line-height-tight: 1.2;
16
- --line-height-normal: 1.4;
17
- --line-height-loose: 1.6;
18
-
19
7
  --brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
20
- /* 通用组件库anker品牌颜色 */
21
8
  --brand-color-0: #00befa;
22
9
  }
package/dist/tokens/base.css CHANGED
@@ -8,7 +8,6 @@
8
8
  --btn-bg-secondary-color: transparent;
9
9
  --btn-text-secondary-color: #1D1D1F;
10
10
  --btn-tsxt-secondary-active-color: #ffffff;
11
- --btn-bg-secondary-active-color: #555555;
12
11
  --btn-bg-secondary-disabled-color: #f5f5f550;
13
12
 
14
13
  /* 浅色背景 */
package/dist/tokens/eufy.css CHANGED
@@ -4,9 +4,6 @@
4
4
  --brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
5
5
 
6
6
 
7
- --btn-bg-secondary-color: transparent;
8
- --btn-bg-secondary-active-color: #555555;
9
- --btn-bg-secondary-disabled-color: #f5f5f550;
10
7
 
11
8
  --btn-radius: 24px;
12
9
 
package/dist/tokens/solix.css CHANGED
@@ -1,9 +1,9 @@
1
1
  :root {
2
2
  --btn-bg-active-color: var(--brand-color-0);
3
-
3
+ --brand-gradient-color-0: linear-gradient(90deg, #2C7ED0 0%, #00A9E1 43%, #00DB84 100%);
4
+
4
5
  --btn-radius: -0px;
5
6
  --radius: 0em;
6
7
 
7
- --brand-gradient-color-0: linear-gradient(90deg, #2C7ED0 0%, #00A9E1 43%, #00DB84 100%);
8
8
  --brand-color-0: #00BEFA;
9
9
  }
package/dist/tokens/soundcore.css CHANGED
@@ -3,11 +3,6 @@
3
3
 
4
4
  --brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
5
5
 
6
-
7
- --btn-bg-secondary-color: transparent;
8
- --btn-bg-secondary-active-color: #17bbef;
9
- --btn-bg-secondary-disabled-color: #f5f5f550;
10
-
11
6
  --btn-radius: 24px;
12
7
 
13
8
  --radius: 0em;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.27-alpha.147",
3
+ "version": "0.0.27-alpha.149",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
@@ -104,6 +104,7 @@
104
104
  "@radix-ui/react-slot": "^1.2.2",
105
105
  "@radix-ui/react-tabs": "^1.1.11",
106
106
  "@radix-ui/react-visually-hidden": "^1.2.2",
107
+ "@tailwindcss/aspect-ratio": "^0.4.2",
107
108
  "autoprefixer": "^10.4.19",
108
109
  "class-variance-authority": "^0.7.0",
109
110
  "clsx": "^2.1.1",
package/style.css CHANGED
@@ -693,9 +693,6 @@ video {
693
693
  .hidden {
694
694
  display: none;
695
695
  }
696
- .aspect-square {
697
- aspect-ratio: 1 / 1;
698
- }
699
696
  .size-10 {
700
697
  width: 2.5rem;
701
698
  height: 2.5rem;
package/tailwind.config.js CHANGED
@@ -1,5 +1,6 @@
1
1
  module.exports = {
2
2
  darkMode: ['selector', '.aiui-dark'],
3
+ plugins: [require('@tailwindcss/aspect-ratio')],
3
4
  content: [
4
5
  './src/components/**/*.{js,jsx,ts,tsx}',
5
6
  './src/icons/**/*.{js,jsx,ts,tsx}',