@anker-in/headless-ui 0.0.27-alpha.46 → 0.0.27-alpha.48

package/README.md

@@ -12,12 +12,12 @@ npm install @anker-in/headless-ui
 1. 无头项目修改tailwind.config.ts 配置文件
 ```js
 import type { Config } from 'tailwindcss'
-+ import headlessUIConfig from '@anker-in/headless-ui/tailwind.config.js'
++ import headlessUIPreset from '@anker-in/headless-ui/tailwind.config.js'
 
 
 export default {
   + presets: [
-  +  headlessUIConfig, // ❗❗❗重要！使用预设
+  +  headlessUIPreset, // ❗❗❗重要！使用预设
   + ],
   content: [
    + './node_modules/@anker-in/headless-ui/dist/**/*.js', // ❗❗❗重要！把这些加入content

package/dist/cjs/biz-components/AccordionCards/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,s)=>{for(var n in s)m(t,n,{get:s[n],enumerable:!0})},h=(t,s,n,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of E(s))!C.call(t,d)&&d!==n&&m(t,d,{get:()=>s[d],enumerable:!(c=B(s,d))||c.enumerable});return t};var u=(t,s,n)=>(n=t!=null?T(M(t)):{},h(s||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),A=t=>h(m({},"__esModule",{value:!0}),t);var V={};I(V,{default:()=>S});module.exports=A(V);var e=require("react/jsx-runtime"),y=u(require("../Title/index.js")),l=require("../../helpers/utils.js"),f=u(require("../../components/picture.js")),p=u(require("../../components/button.js")),g=u(require("../SwiperBox/index.js")),i=require("react");const L=({data:t,className:s=""})=>{const[n,c]=(0,i.useState)(0),[d,w]=(0,i.useState)({0:!0}),F=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),N=(o,r)=>{r&&(F.current[o]=r)},v=o=>{b.current?.[o]&&w({[o]:!0})};(0,i.useEffect)(()=>{const o=F.current;return o?.forEach((r,a)=>{a?r.style="flex: 1 1 0%; transition: all 0.15s":r.style="flex: 5 1 0%; transition: all 0.15s",r.addEventListener("transitionend",()=>v(a))}),()=>{o?.forEach((r,a)=>{r.removeEventListener("transitionend",()=>v(a))})}},[]);const k=({data:o,configuration:r})=>(0,e.jsxs)("div",{className:"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[(0,e.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img?.url}),(0,e.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[(0,e.jsxs)("div",{className:"mb-6 flex-1 overflow-hidden",children:[(0,e.jsx)("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:o?.title}),(0,e.jsx)("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,e.jsx)(p.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":""),children:(0,e.jsx)("a",{href:o.link,children:r?.primaryButton})})]})]});return(0,e.jsxs)(e.Fragment,{children:[t?.title&&(0,e.jsx)(y.default,{data:{title:t?.title}}),(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)("div",{className:(0,l.cn)("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",s),children:t?.products?.map((o,r)=>{const a=n===r;return(0,e.jsxs)("div",{style:{flex:a?5:1},ref:x=>{x&&N(r,x)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n!==r&&(b.current={[r]:!0},c(r))},children:[(0,e.jsx)(f.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),d?.[r]&&a?(0,e.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[(0,e.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,e.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:o?.title}),(0,e.jsx)("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,e.jsx)(p.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",t?.shape==="round"?"rounded-2xl":""),children:(0,e.jsx)("a",{href:o?.link,children:t?.primaryButton})})]}):null]},r)})})}),(0,e.jsx)("div",{className:"tablet:hidden block",children:(0,e.jsx)(g.default,{className:(0,l.cn)("h-[400px] !overflow-visible",s),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,primaryButton:t?.primaryButton}},Slide:k,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var S=L;
+"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,s)=>{for(var n in s)m(t,n,{get:s[n],enumerable:!0})},h=(t,s,n,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of E(s))!C.call(t,d)&&d!==n&&m(t,d,{get:()=>s[d],enumerable:!(c=B(s,d))||c.enumerable});return t};var u=(t,s,n)=>(n=t!=null?T(M(t)):{},h(s||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),A=t=>h(m({},"__esModule",{value:!0}),t);var V={};I(V,{default:()=>S});module.exports=A(V);var e=require("react/jsx-runtime"),y=u(require("../Title/index.js")),l=require("../../helpers/utils.js"),f=u(require("../../components/picture.js")),p=u(require("../../components/button.js")),g=u(require("../SwiperBox/index.js")),i=require("react");const L=({data:t,className:s=""})=>{const[n,c]=(0,i.useState)(0),[d,w]=(0,i.useState)({0:!0}),F=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),N=(o,r)=>{r&&(F.current[o]=r)},v=o=>{b.current?.[o]&&w({[o]:!0})};(0,i.useEffect)(()=>{const o=F.current;return o?.forEach((r,a)=>{a?r.style="flex: 1 1 0%; transition: all 0.15s":r.style="flex: 5 1 0%; transition: all 0.15s",r.addEventListener("transitionend",()=>v(a))}),()=>{o?.forEach((r,a)=>{r.removeEventListener("transitionend",()=>v(a))})}},[]);const k=({data:o,configuration:r})=>(0,e.jsxs)("div",{className:"relative w-full shrink-0 grow-0 border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[(0,e.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img?.url}),(0,e.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[(0,e.jsxs)("div",{className:"mb-6 flex-1 overflow-hidden",children:[(0,e.jsx)("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:o?.title}),(0,e.jsx)("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,e.jsx)(p.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":""),children:(0,e.jsx)("a",{href:o.link,children:r?.primaryButton})})]})]});return(0,e.jsxs)(e.Fragment,{children:[t?.title&&(0,e.jsx)(y.default,{data:{title:t?.title}}),(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)("div",{className:(0,l.cn)("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",s),children:t?.products?.map((o,r)=>{const a=n===r;return(0,e.jsxs)("div",{style:{flex:a?5:1},ref:x=>{x&&N(r,x)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n!==r&&(b.current={[r]:!0},c(r))},children:[(0,e.jsx)(f.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),d?.[r]&&a?(0,e.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[(0,e.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,e.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:o?.title}),(0,e.jsx)("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,e.jsx)(p.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",t?.shape==="round"?"rounded-2xl":""),children:(0,e.jsx)("a",{href:o?.link,children:t?.primaryButton})})]}):null]},r)})})}),(0,e.jsx)("div",{className:"tablet:hidden block",children:(0,e.jsx)(g.default,{className:(0,l.cn)("h-[400px] !overflow-visible",s),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,primaryButton:t?.primaryButton}},Slide:k,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var S=L;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/AccordionCards/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n  }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style = 'flex: 5 1 0%; transition: all 0.15s'\n      } else {\n        item.style = 'flex: 1 1 0%; transition: all 0.15s'\n      }\n      item.addEventListener('transitionend', () => handleTransitionEnd(index))\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div className=\"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6')}>\n          <div className=\"mb-6 flex-1 overflow-hidden\">\n            <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n            <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n          </div>\n          <Button\n            size=\"sm\"\n            hoverEffect=\"slide\"\n            variant=\"secondary\"\n            className={cn(\n              'mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n              configuration?.shape === 'round' ? 'rounded-2xl' : ''\n            )}\n          >\n            <a href={data.link}>{configuration?.primaryButton}</a>\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div className=\"tablet:block hidden\">\n        <div\n          className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 5 : 1\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onClick={() => {\n                  if (hoverIndex === idx) return\n                  // \u66F4\u65B0 ref \u72B6\u6001\n                  enterRef.current = { [idx]: true }\n                  // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n                  setHoverIndex(idx)\n                }}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                {currentWidth?.[idx] && isExpanded ? (\n                  <div\n                    className={cn(\n                      'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\n                    )}\n                  >\n                    <div className=\"mr-1 flex-1 overflow-hidden\">\n                      <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n                        {item?.title}\n                      </p>\n                      <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n                    </div>\n                    <Button\n                      size=\"sm\"\n                      hoverEffect=\"slide\"\n                      variant=\"secondary\"\n                      className={cn(\n                        'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n                        data?.shape === 'round' ? 'rounded-2xl' : ''\n                      )}\n                    >\n                      <a href={item?.link}>{data?.primaryButton}</a>\n                    </Button>\n                  </div>\n                ) : null}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className=\"tablet:hidden block\">\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              primaryButton: data?.primaryButton,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1.3,\n            },\n            768: {\n              spaceBetween: '16px',\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default AccordionCards\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2EQ,IAAAI,EAAA,6BA1ERC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAsB,oCACtBC,EAA4C,iBA8B5C,MAAMC,EAAiB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAA0B,CACvE,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAwB,CAAC,EACvD,CAACC,EAAcC,CAAe,KAAI,YAAqC,CAAE,EAAG,EAAK,CAAC,EAElFC,KAAe,UAAyB,CAAC,CAAC,EAC1CC,KAAW,UAAmC,CAAE,EAAG,EAAK,CAAC,EAEzDC,EAAS,CAACC,EAAeC,IAAuB,CAChDA,IACFJ,EAAa,QAAQG,CAAK,EAAIC,EAElC,EAEMC,EAAuBF,GAAkB,CACzCF,EAAS,UAAUE,CAAK,GAC1BJ,EAAgB,CAAE,CAACI,CAAK,EAAG,EAAK,CAAC,CAErC,KAEA,aAAU,IAAM,CACd,MAAMG,EAAUN,EAAa,QAC7B,OAAAM,GAAS,QAAQ,CAACC,EAAMJ,IAAU,CAC3BA,EAGHI,EAAK,MAAQ,sCAFbA,EAAK,MAAQ,sCAIfA,EAAK,iBAAiB,gBAAiB,IAAMF,EAAoBF,CAAK,CAAC,CACzE,CAAC,EACM,IAAM,CACXG,GAAS,QAAQ,CAACC,EAAMJ,IAAU,CAChCI,EAAK,oBAAoB,gBAAiB,IAAMF,EAAoBF,CAAK,CAAC,CAC5E,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEL,MAAMK,EAAa,CAAC,CAAE,KAAAd,EAAM,cAAAe,CAAc,OAEtC,QAAC,OAAI,UAAU,2FACb,oBAAC,EAAAC,QAAA,CAAQ,UAAU,6DAA6D,OAAQhB,GAAM,KAAK,IAAK,KACxG,QAAC,OAAI,aAAW,MAAG,qEAAqE,EACtF,qBAAC,OAAI,UAAU,8BACb,oBAAC,KAAE,UAAU,yCAA0C,SAAAA,GAAM,MAAM,KACnE,OAAC,MAAG,UAAU,qCAAsC,SAAAA,GAAM,SAAS,GACrE,KACA,OAAC,EAAAiB,QAAA,CACC,KAAK,KACL,YAAY,QACZ,QAAQ,YACR,aAAW,MACT,oGACAF,GAAe,QAAU,QAAU,cAAgB,EACrD,EAEA,mBAAC,KAAE,KAAMf,EAAK,KAAO,SAAAe,GAAe,cAAc,EACpD,GACF,GACF,EAIJ,SACE,oBACG,UAAAf,GAAM,UAAS,OAAC,EAAAkB,QAAA,CAAM,KAAM,CAAE,MAAOlB,GAAM,KAAM,EAAG,KACrD,OAAC,OAAI,UAAU,sBACb,mBAAC,OACC,aAAW,MAAG,iFAAkFC,CAAS,EAExG,SAAAD,GAAM,UAAU,IAAI,CAACa,EAAMM,IAAQ,CAClC,MAAMC,EAAalB,IAAeiB,EAElC,SACE,QAAC,OAEC,MAAO,CACL,KALYC,EAAa,EAAI,CAM/B,EACA,IAAMV,GAA8B,CAC9BA,GAAIF,EAAOW,EAAKT,CAAE,CACxB,EACA,aAAW,MACT,0CACAV,GAAM,YAAc,QAAU,cAAgB,EAChD,EACA,QAAS,IAAM,CACTE,IAAeiB,IAEnBZ,EAAS,QAAU,CAAE,CAACY,CAAG,EAAG,EAAK,EAEjChB,EAAcgB,CAAG,EACnB,EAEA,oBAAC,EAAAH,QAAA,CACC,OAAQH,GAAM,KAAK,IACnB,UAAU,6DACZ,EACCT,IAAee,CAAG,GAAKC,KACtB,QAAC,OACC,aAAW,MACT,sFACF,EAEA,qBAAC,OAAI,UAAU,8BACb,oBAAC,KAAE,UAAU,4EACV,SAAAP,GAAM,MACT,KACA,OAAC,MAAG,UAAU,qDAAsD,SAAAA,GAAM,SAAS,GACrF,KACA,OAAC,EAAAI,QAAA,CACC,KAAK,KACL,YAAY,QACZ,QAAQ,YACR,aAAW,MACT,4GACAjB,GAAM,QAAU,QAAU,cAAgB,EAC5C,EAEA,mBAAC,KAAE,KAAMa,GAAM,KAAO,SAAAb,GAAM,cAAc,EAC5C,GACF,EACE,OA/CCmB,CAgDP,CAEJ,CAAC,EACH,EACF,KACA,OAAC,OAAI,UAAU,sBACb,mBAAC,EAAAE,QAAA,CACC,aAAW,MAAG,8BAA+BpB,CAAS,EACtD,GAAI,iBAAmBD,GAAM,IAC7B,KAAM,CACJ,KAAMA,GAAM,SACZ,cAAe,CACb,MAAOA,GAAM,MACb,cAAeA,GAAM,aACvB,CACF,EACA,MAAOc,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACF,GACF,CAEJ,EAEA,IAAOxB,EAAQS",
+  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n  }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style = 'flex: 5 1 0%; transition: all 0.15s'\n      } else {\n        item.style = 'flex: 1 1 0%; transition: all 0.15s'\n      }\n      item.addEventListener('transitionend', () => handleTransitionEnd(index))\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div className=\"relative w-full shrink-0 grow-0 border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6')}>\n          <div className=\"mb-6 flex-1 overflow-hidden\">\n            <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n            <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n          </div>\n          <Button\n            size=\"sm\"\n            hoverEffect=\"slide\"\n            variant=\"secondary\"\n            className={cn(\n              'mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n              configuration?.shape === 'round' ? 'rounded-2xl' : ''\n            )}\n          >\n            <a href={data.link}>{configuration?.primaryButton}</a>\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div className=\"tablet:block hidden\">\n        <div\n          className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 5 : 1\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onClick={() => {\n                  if (hoverIndex === idx) return\n                  // \u66F4\u65B0 ref \u72B6\u6001\n                  enterRef.current = { [idx]: true }\n                  // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n                  setHoverIndex(idx)\n                }}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                {currentWidth?.[idx] && isExpanded ? (\n                  <div\n                    className={cn(\n                      'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\n                    )}\n                  >\n                    <div className=\"mr-1 flex-1 overflow-hidden\">\n                      <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n                        {item?.title}\n                      </p>\n                      <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n                    </div>\n                    <Button\n                      size=\"sm\"\n                      hoverEffect=\"slide\"\n                      variant=\"secondary\"\n                      className={cn(\n                        'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n                        data?.shape === 'round' ? 'rounded-2xl' : ''\n                      )}\n                    >\n                      <a href={item?.link}>{data?.primaryButton}</a>\n                    </Button>\n                  </div>\n                ) : null}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className=\"tablet:hidden block\">\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              primaryButton: data?.primaryButton,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1.3,\n            },\n            768: {\n              spaceBetween: '16px',\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default AccordionCards\n"],
+  "mappings": "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",
   "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_react", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "Picture", "Button", "Title", "idx", "isExpanded", "SwiperBox"]
 }

package/dist/cjs/biz-components/Category/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},n=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!w.call(e,a)&&a!==r&&i(e,a,{get:()=>t[a],enumerable:!(s=u(t,a))||s.enumerable});return e};var l=(e,t,r)=>(r=e!=null?g(b(e)):{},n(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),h=e=>n(i({},"__esModule",{value:!0}),e);var N={};y(N,{default:()=>F});module.exports=h(N);var o=require("react/jsx-runtime"),k=require("react"),p=require("../../helpers/utils.js"),c=l(require("../../components/picture.js")),d=require("../../shared/Styles.js"),m=l(require("../Title/index.js")),f=l(require("../SwiperBox/index.js"));const C=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,p.cn)("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]",t?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,o.jsx)(c.default,{className:"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover",source:e?.image}),(0,o.jsx)("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]}),v=({data:e,buildData:t,className:r="",key:s})=>(0,o.jsxs)("div",{className:(0,p.cn)("w-full",r),children:[e?.title&&(0,o.jsx)(m.default,{data:{title:e?.title}}),(0,o.jsx)(f.default,{className:"!overflow-visible",id:"Category"+s,data:{list:e?.products,configuration:{shape:e?.shape}},Slide:C,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:6}}})]});var F=(0,d.withStyles)(v);
+"use strict";"use client";var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},n=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!w.call(e,a)&&a!==r&&i(e,a,{get:()=>t[a],enumerable:!(s=u(t,a))||s.enumerable});return e};var l=(e,t,r)=>(r=e!=null?g(b(e)):{},n(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),h=e=>n(i({},"__esModule",{value:!0}),e);var N={};y(N,{default:()=>F});module.exports=h(N);var o=require("react/jsx-runtime"),k=require("react"),p=require("../../helpers/utils.js"),c=l(require("../../components/picture.js")),d=require("../../shared/Styles.js"),m=l(require("../Title/index.js")),f=l(require("../SwiperBox/index.js"));const C=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,p.cn)("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]",t?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,o.jsx)(c.default,{className:"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover",source:e?.image}),(0,o.jsx)("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]}),v=({data:e,buildData:t,className:r="",key:s})=>(0,o.jsxs)("div",{className:(0,p.cn)("w-full",r),children:[e?.title&&(0,o.jsx)(m.default,{data:{title:e?.title}}),(0,o.jsx)(f.default,{className:"!overflow-visible",id:"Category"+s,data:{list:e?.products,configuration:{shape:e?.shape}},Slide:C,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:3.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:6}}})]});var F=(0,d.withStyles)(v);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Category/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: string\n  name: string\n}\n\nexport interface CategoryProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  data: {\n    products: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  key?: string\n}\n\nconst CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n        'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n      )}\n    >\n      <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n      <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n    </div>\n  )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n  return (\n    <div className={cn('w-full', className)}>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'Category' + key}\n        data={{ list: data?.products, configuration: { shape: data?.shape } }}\n        Slide={CategoryItem}\n        breakpoints={{\n          0: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 2.3,\n          },\n          768: {\n            spaceBetween: '16px',\n            freeMode: false,\n            slidesPerView: 6,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(Category)\n"],
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: string\n  name: string\n}\n\nexport interface CategoryProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  data: {\n    products: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  key?: string\n}\n\nconst CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n        'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n      )}\n    >\n      <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n      <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n    </div>\n  )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n  return (\n    <div className={cn('w-full', className)}>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'Category' + key}\n        data={{ list: data?.products, configuration: { shape: data?.shape } }}\n        Slide={CategoryItem}\n        breakpoints={{\n          0: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 3.3,\n          },\n          768: {\n            spaceBetween: '16px',\n            freeMode: false,\n            slidesPerView: 6,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(Category)\n"],
   "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiCI,IAAAI,EAAA,6BAhCJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,oCAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAExC,QAAC,OACC,aAAW,MACT,+DACA,+DACAA,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,oBAAC,EAAAC,QAAA,CAAQ,UAAU,uEAAuE,OAAQF,GAAM,MAAO,KAC/G,OAAC,KAAE,UAAU,0DAA2D,SAAAA,GAAM,KAAK,GACrF,EAIEG,EAAoC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,OAE9E,QAAC,OAAI,aAAW,MAAG,SAAUD,CAAS,EACnC,UAAAL,GAAM,UAAS,OAAC,EAAAO,QAAA,CAAM,KAAM,CAAE,MAAOP,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAQ,QAAA,CACC,UAAU,oBACV,GAAI,WAAaF,EACjB,KAAM,CAAE,KAAMN,GAAM,SAAU,cAAe,CAAE,MAAOA,GAAM,KAAM,CAAE,EACpE,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EAIJ,IAAOT,KAAQ,cAAWa,CAAQ",
   "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperBox", "CategoryItem", "data", "configuration", "Picture", "Category", "buildData", "className", "key", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/ShelfDisplay/index.js

@@ -1,4 +1,4 @@
-"use strict";"use client";var q=Object.create;var x=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var a in t)x(e,a,{get:t[a],enumerable:!0})},T=(e,t,a,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of L(t))!U.call(e,s)&&s!==a&&x(e,s,{get:()=>t[s],enumerable:!(l=M(t,s))||l.enumerable});return e};var f=(e,t,a)=>(a=e!=null?q(R(e)):{},T(t||!e||!e.__esModule?x(a,"default",{value:e,enumerable:!0}):a,e)),j=e=>T(x({},"__esModule",{value:!0}),e);var H={};$(H,{default:()=>G});module.exports=j(H);var r=require("react/jsx-runtime"),u=require("react"),y=require("../../helpers/utils.js"),B=f(require("../../components/picture.js")),d=require("../../components/tabs.js"),D=f(require("../../components/button.js")),N=f(require("../Title/index.js")),C=f(require("../SwiperBox/index.js")),I=require("../../shared/Styles.js"),P=require("./shelfDisplay.js");const z=({data:e,configuration:t})=>{const a=o=>t?.event?.primaryButton?.(o),l=o=>t?.event?.secondaryButton?.(o),{price:s,basePrice:h}=(0,P.formatVariantPrice)({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),b=()=>{const o=e?.sku,i=e?.variants;return i?.find(v=>v?.sku===o)?.image?.url||i?.[0]?.image?.url||""};return(0,r.jsxs)("div",{className:(0,y.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4",t?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:(0,y.cn)("relative mb-2 inline-block h-[137px] overflow-hidden","tablet:mb-3 tablet:h-[195px]"),children:(0,r.jsx)(B.default,{source:b(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,r.jsx)("div",{className:"tablet:mb-2 mb-1 flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((o,i)=>(0,r.jsx)("div",{className:"tablet:text-base rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:o},i))}),(0,r.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),(0,r.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),(0,r.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:s||""}),(0,r.jsx)("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:h||""})]}),(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)(D.default,{variant:"primary",onClick:()=>a(e),className:`
+"use strict";"use client";var q=Object.create;var x=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var a in t)x(e,a,{get:t[a],enumerable:!0})},T=(e,t,a,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of L(t))!U.call(e,s)&&s!==a&&x(e,s,{get:()=>t[s],enumerable:!(l=M(t,s))||l.enumerable});return e};var f=(e,t,a)=>(a=e!=null?q(R(e)):{},T(t||!e||!e.__esModule?x(a,"default",{value:e,enumerable:!0}):a,e)),j=e=>T(x({},"__esModule",{value:!0}),e);var H={};$(H,{default:()=>G});module.exports=j(H);var r=require("react/jsx-runtime"),u=require("react"),y=require("../../helpers/utils.js"),B=f(require("../../components/picture.js")),d=require("../../components/tabs.js"),D=f(require("../../components/button.js")),N=f(require("../Title/index.js")),C=f(require("../SwiperBox/index.js")),I=require("../../shared/Styles.js"),P=require("./shelfDisplay.js");const z=({data:e,configuration:t})=>{const a=o=>t?.event?.primaryButton?.(o),l=o=>t?.event?.secondaryButton?.(o),{price:s,basePrice:h}=(0,P.formatVariantPrice)({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),b=()=>{const o=e?.sku,i=e?.variants;return i?.find(v=>v?.sku===o)?.image?.url||i?.[0]?.image?.url||""};return(0,r.jsxs)("div",{className:(0,y.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4",t?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:(0,y.cn)("relative mb-2 inline-block h-[137px] overflow-hidden","tablet:mb-3 tablet:h-[195px]"),children:(0,r.jsx)(B.default,{source:b(),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,i)=>(0,r.jsx)("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:o},i))}),(0,r.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),(0,r.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),(0,r.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:s||""}),(0,r.jsx)("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:h||""})]}),(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)(D.default,{variant:"primary",onClick:()=>a(e),className:`
             laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
             border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black
             ${t?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
@@ -6,5 +6,5 @@
             laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
             border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
             ${t?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
-          `,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},_=({data:e,buildData:t,className:a="",key:l,event:s})=>{const[h,b]=(0,u.useState)(""),[o,i]=(0,u.useState)([]),{productsTab:m=[],productsCard:v=[],title:k,align:F="left",isShowTab:S=!0,tabShape:E="square",...A}=e,g=n=>{const c=n?.map(p=>{const w=t?.products?.find(V=>V?.handle===p?.handle);if(w)return{sku:p.sku,...w}})?.filter(p=>p);i(c)};return(0,u.useEffect)(()=>{if(S){b(m?.[0]?.tab||""),g(m?.[0]?.data||[]);return}g(v)},[]),(0,r.jsxs)("div",{className:(0,y.cn)("w-full",a),children:[k&&(0,r.jsx)(N.default,{data:{title:k}}),S&&(0,r.jsx)(d.Tabs,{shape:E,align:F,value:h,onValueChange:n=>{b(n);const c=m?.find(p=>p?.tab===n);g(c?.data||[])},className:"mb-8",children:(0,r.jsx)(d.TabsList,{children:m?.map((n,c)=>(0,r.jsx)(d.TabsTrigger,{value:n?.tab||"",children:n?.tab},c))})}),(0,r.jsx)(C.default,{className:"!overflow-visible",id:"ShelfDisplay"+l,data:{list:o,configuration:{...A,event:s}},Slide:z,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})]})};var G=(0,I.withStyles)(_);
+          `,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},_=({data:e,buildData:t,className:a="",key:l,event:s})=>{const[h,b]=(0,u.useState)(""),[o,i]=(0,u.useState)([]),{productsTab:c=[],productsCard:v=[],title:k,align:F="left",isShowTab:S=!0,tabShape:E="square",...A}=e,g=n=>{const m=n?.map(p=>{const w=t?.products?.find(V=>V?.handle===p?.handle);if(w)return{sku:p.sku,...w}})?.filter(p=>p);i(m)};return(0,u.useEffect)(()=>{if(S){b(c?.[0]?.tab||""),g(c?.[0]?.data||[]);return}g(v)},[]),(0,r.jsxs)("div",{className:(0,y.cn)("w-full",a),children:[k&&(0,r.jsx)(N.default,{data:{title:k}}),S&&(0,r.jsx)(d.Tabs,{shape:E,align:F,value:h,onValueChange:n=>{b(n);const m=c?.find(p=>p?.tab===n);g(m?.data||[])},className:"mb-8",children:(0,r.jsx)(d.TabsList,{children:c?.map((n,m)=>(0,r.jsx)(d.TabsTrigger,{value:n?.tab||"",children:n?.tab},m))})}),(0,r.jsx)(C.default,{className:"!overflow-visible",id:"ShelfDisplay"+l,data:{list:o,configuration:{...A,event:s}},Slide:z,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})]})};var G=(0,I.withStyles)(_);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/ShelfDisplay/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('relative mb-2 inline-block h-[137px] overflow-hidden', 'tablet:mb-3 tablet:h-[195px]')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"tablet:mb-2 mb-1 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 rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className=\"flex items-center gap-3\">\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isShowTab && (\n        <Tabs\n          shape={tabShape}\n          align={align}\n          value={tabId}\n          onValueChange={v => {\n            setTabId(v)\n            const findData = productsTab?.find((item: any) => item?.tab === v)\n            handleCurrentTab(findData?.data || [])\n          }}\n          className=\"mb-8\"\n        >\n          <TabsList>\n            {productsTab?.map((item: any, index: number) => {\n              return (\n                <TabsTrigger key={index} value={item?.tab || ''}>\n                  {item?.tab}\n                </TabsTrigger>\n              )\n            })}\n          </TabsList>\n        </Tabs>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: '16px',\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6FQ,IAAAI,EAAA,6BA5FRC,EAA2C,iBAC3CC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA4C,oCAC5CC,EAAmB,yCACnBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAmC,6BAwDnC,MAAMC,EAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,MAAMC,EAAmBC,GAA6BF,GAAe,OAAO,gBAAgBE,CAAM,EAE5FC,EAAqBD,GAA6BF,GAAe,OAAO,kBAAkBE,CAAM,EAEhG,CAAE,MAAAE,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQ,KACR,OAAQN,GAAM,MAAM,QAAU,EAC9B,WAAYA,GAAM,gBAAgB,QAAUA,GAAM,MAAM,QAAU,EAClE,aAAcA,GAAM,MAAM,cAAgB,KAC5C,CAAC,EAEKO,EAAY,IAAM,CACtB,MAAMC,EAAMR,GAAM,IACZS,EAAWT,GAAM,SAEvB,OADgBS,GAAU,KAAMC,GAAcA,GAAM,MAAQF,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,SACE,QAAC,OAEC,aAAW,MACT,8GACAR,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,oBAAC,OAAI,aAAW,MAAG,uDAAwD,8BAA8B,EACvG,mBAAC,EAAAU,QAAA,CAAQ,OAAQJ,EAAU,EAAG,UAAU,yDAAyD,EACnG,KACA,OAAC,OAAI,UAAU,4DACZ,SAAAP,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACU,EAAWE,OAExC,OAAC,OAEC,UAAU,oGAET,SAAAF,GAHIE,CAIP,CAEH,EACH,KACA,OAAC,KACC,MAAOZ,GAAM,OAAS,GACtB,UAAU,uGAET,SAAAA,GAAM,OAAS,GAClB,KACA,OAAC,MACC,MAAOA,GAAM,aAAe,GAC5B,UAAU,sGAET,SAAAA,GAAM,aAAe,GACxB,KACA,QAAC,OAAI,UAAU,yBACb,oBAAC,OAAI,UAAU,mDAAoD,SAAAK,GAAS,GAAG,KAC/E,OAAC,OAAI,UAAU,wDAAyD,SAAAC,GAAa,GAAG,GAC1F,KAEA,QAAC,OAAI,UAAU,0BACb,oBAAC,EAAAO,QAAA,CACC,QAAQ,UACR,QAAS,IAAMX,EAAgBF,CAAI,EACnC,UAAW;AAAA;AAAA;AAAA,cAGPC,GAAe,QAAU,QAAU,qCAAuC,EAAE;AAAA,YAG/E,SAAAA,GAAe,eAAiB,GACnC,KACA,OAAC,EAAAY,QAAA,CACC,QAAQ,YACR,QAAS,IAAMT,EAAkBJ,CAAI,EACrC,UAAW;AAAA;AAAA;AAAA,cAGPC,GAAe,QAAU,QAAU,qCAAuC,EAAE;AAAA,YAG/E,SAAAA,GAAe,iBAAmB,GACrC,GACF,IA7DKD,GAAM,IAAMA,GAAM,MA8DzB,CAEJ,EAEMc,EAA4C,CAAC,CAAE,KAAAd,EAAM,UAAAe,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,IAAM,CACrG,KAAM,CAACC,EAAOC,CAAQ,KAAI,YAAiB,EAAE,EACvC,CAACC,EAAcC,CAAe,KAAI,YAA6B,CAAC,CAAC,EAEjE,CACJ,YAAAC,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,GAAGC,CACL,EAAI7B,EAEE8B,EAAoBC,GAAoC,CAC5D,MAAMC,EAAiBD,GACnB,IAAIrB,GAAQ,CACZ,MAAMuB,EAAWlB,GAAW,UAAU,KAAKZ,GAAUA,GAAQ,SAAWO,GAAM,MAAM,EACpF,GAAIuB,EACF,MAAO,CACL,IAAKvB,EAAK,IACV,GAAGuB,CACL,CAEJ,CAAC,GACC,OAAOvB,GAAQA,CAAI,EACvBY,EAAgBU,CAAc,CAChC,EAEA,sBAAU,IAAM,CACd,GAAIL,EAAW,CACbP,EAASG,IAAc,CAAC,GAAG,KAAO,EAAE,EACpCO,EAAiBP,IAAc,CAAC,GAAG,MAAQ,CAAC,CAAC,EAC7C,MACF,CACAO,EAAiBN,CAAY,CAC/B,EAAG,CAAC,CAAC,KAGH,QAAC,OAAI,aAAW,MAAG,SAAUR,CAAS,EACnC,UAAAS,MAAS,OAAC,EAAAS,QAAA,CAAM,KAAM,CAAE,MAAOT,CAAM,EAAG,EACxCE,MACC,OAAC,QACC,MAAOC,EACP,MAAOF,EACP,MAAOP,EACP,cAAegB,GAAK,CAClBf,EAASe,CAAC,EACV,MAAMF,EAAWV,GAAa,KAAMb,GAAcA,GAAM,MAAQyB,CAAC,EACjEL,EAAiBG,GAAU,MAAQ,CAAC,CAAC,CACvC,EACA,UAAU,OAEV,mBAAC,YACE,SAAAV,GAAa,IAAI,CAACb,EAAWE,OAE1B,OAAC,eAAwB,MAAOF,GAAM,KAAO,GAC1C,SAAAA,GAAM,KADSE,CAElB,CAEH,EACH,EACF,KAEF,OAAC,EAAAwB,QAAA,CACC,UAAU,oBACV,GAAI,eAAiBnB,EACrB,KAAM,CAAE,KAAMI,EAAc,cAAe,CAAE,GAAGQ,EAAO,MAAOX,CAAM,CAAE,EACtE,MAAOnB,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,CAEJ,EAEA,IAAOZ,KAAQ,cAAW2B,CAAY",
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('relative mb-2 inline-block h-[137px] overflow-hidden', 'tablet:mb-3 tablet:h-[195px]')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className=\"flex items-center gap-3\">\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isShowTab && (\n        <Tabs\n          shape={tabShape}\n          align={align}\n          value={tabId}\n          onValueChange={v => {\n            setTabId(v)\n            const findData = productsTab?.find((item: any) => item?.tab === v)\n            handleCurrentTab(findData?.data || [])\n          }}\n          className=\"mb-8\"\n        >\n          <TabsList>\n            {productsTab?.map((item: any, index: number) => {\n              return (\n                <TabsTrigger key={index} value={item?.tab || ''}>\n                  {item?.tab}\n                </TabsTrigger>\n              )\n            })}\n          </TabsList>\n        </Tabs>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: '16px',\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
   "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabs", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "Picture", "index", "Button", "ShelfDisplay", "buildData", "className", "key", "event", "tabId", "setTabId", "currentItems", "setCurrentItems", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "v", "SwiperBox"]
 }

package/dist/esm/biz-components/AccordionCards/index.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as B,jsx as r,jsxs as l}from"react/jsx-runtime";import w from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import f from"../../components/picture.js";import p from"../../components/button.js";import N from"../SwiperBox/index.js";import{useState as F,useEffect as k,useRef as b}from"react";const T=({data:o,className:i=""})=>{const[d,v]=F(0),[x,h]=F({0:!0}),a=b([]),c=b({0:!0}),y=(t,e)=>{e&&(a.current[t]=e)},m=t=>{c.current?.[t]&&h({[t]:!0})};k(()=>{const t=a.current;return t?.forEach((e,s)=>{s?e.style="flex: 1 1 0%; transition: all 0.15s":e.style="flex: 5 1 0%; transition: all 0.15s",e.addEventListener("transitionend",()=>m(s))}),()=>{t?.forEach((e,s)=>{e.removeEventListener("transitionend",()=>m(s))})}},[]);const g=({data:t,configuration:e})=>l("div",{className:"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[r(f,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),l("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[l("div",{className:"mb-6 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(p,{size:"sm",hoverEffect:"slide",variant:"secondary",className:n("mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t.link,children:e?.primaryButton})})]})]});return l(B,{children:[o?.title&&r(w,{data:{title:o?.title}}),r("div",{className:"tablet:block hidden",children:r("div",{className:n("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",i),children:o?.products?.map((t,e)=>{const s=d===e;return l("div",{style:{flex:s?5:1},ref:u=>{u&&y(e,u)},className:n("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{d!==e&&(c.current={[e]:!0},v(e))},children:[r(f,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),x?.[e]&&s?l("div",{className:n("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[l("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(p,{size:"sm",hoverEffect:"slide",variant:"secondary",className:n("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t?.link,children:o?.primaryButton})})]}):null]},e)})})}),r("div",{className:"tablet:hidden block",children:r(N,{className:n("h-[400px] !overflow-visible",i),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,primaryButton:o?.primaryButton}},Slide:g,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var V=T;export{V as default};
+"use client";import{Fragment as B,jsx as r,jsxs as l}from"react/jsx-runtime";import w from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import f from"../../components/picture.js";import p from"../../components/button.js";import N from"../SwiperBox/index.js";import{useState as F,useEffect as k,useRef as b}from"react";const T=({data:o,className:i=""})=>{const[d,v]=F(0),[x,h]=F({0:!0}),a=b([]),c=b({0:!0}),y=(t,e)=>{e&&(a.current[t]=e)},m=t=>{c.current?.[t]&&h({[t]:!0})};k(()=>{const t=a.current;return t?.forEach((e,s)=>{s?e.style="flex: 1 1 0%; transition: all 0.15s":e.style="flex: 5 1 0%; transition: all 0.15s",e.addEventListener("transitionend",()=>m(s))}),()=>{t?.forEach((e,s)=>{e.removeEventListener("transitionend",()=>m(s))})}},[]);const g=({data:t,configuration:e})=>l("div",{className:"relative w-full shrink-0 grow-0 border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[r(f,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),l("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[l("div",{className:"mb-6 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(p,{size:"sm",hoverEffect:"slide",variant:"secondary",className:n("mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t.link,children:e?.primaryButton})})]})]});return l(B,{children:[o?.title&&r(w,{data:{title:o?.title}}),r("div",{className:"tablet:block hidden",children:r("div",{className:n("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",i),children:o?.products?.map((t,e)=>{const s=d===e;return l("div",{style:{flex:s?5:1},ref:u=>{u&&y(e,u)},className:n("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{d!==e&&(c.current={[e]:!0},v(e))},children:[r(f,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),x?.[e]&&s?l("div",{className:n("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[l("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(p,{size:"sm",hoverEffect:"slide",variant:"secondary",className:n("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t?.link,children:o?.primaryButton})})]}):null]},e)})})}),r("div",{className:"tablet:hidden block",children:r(N,{className:n("h-[400px] !overflow-visible",i),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,primaryButton:o?.primaryButton}},Slide:g,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var V=T;export{V as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccordionCards/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n  }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style = 'flex: 5 1 0%; transition: all 0.15s'\n      } else {\n        item.style = 'flex: 1 1 0%; transition: all 0.15s'\n      }\n      item.addEventListener('transitionend', () => handleTransitionEnd(index))\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div className=\"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6')}>\n          <div className=\"mb-6 flex-1 overflow-hidden\">\n            <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n            <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n          </div>\n          <Button\n            size=\"sm\"\n            hoverEffect=\"slide\"\n            variant=\"secondary\"\n            className={cn(\n              'mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n              configuration?.shape === 'round' ? 'rounded-2xl' : ''\n            )}\n          >\n            <a href={data.link}>{configuration?.primaryButton}</a>\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div className=\"tablet:block hidden\">\n        <div\n          className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 5 : 1\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onClick={() => {\n                  if (hoverIndex === idx) return\n                  // \u66F4\u65B0 ref \u72B6\u6001\n                  enterRef.current = { [idx]: true }\n                  // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n                  setHoverIndex(idx)\n                }}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                {currentWidth?.[idx] && isExpanded ? (\n                  <div\n                    className={cn(\n                      'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\n                    )}\n                  >\n                    <div className=\"mr-1 flex-1 overflow-hidden\">\n                      <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n                        {item?.title}\n                      </p>\n                      <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n                    </div>\n                    <Button\n                      size=\"sm\"\n                      hoverEffect=\"slide\"\n                      variant=\"secondary\"\n                      className={cn(\n                        'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n                        data?.shape === 'round' ? 'rounded-2xl' : ''\n                      )}\n                    >\n                      <a href={item?.link}>{data?.primaryButton}</a>\n                    </Button>\n                  </div>\n                ) : null}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className=\"tablet:hidden block\">\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              primaryButton: data?.primaryButton,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1.3,\n            },\n            768: {\n              spaceBetween: '16px',\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default AccordionCards\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n  }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style = 'flex: 5 1 0%; transition: all 0.15s'\n      } else {\n        item.style = 'flex: 1 1 0%; transition: all 0.15s'\n      }\n      item.addEventListener('transitionend', () => handleTransitionEnd(index))\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div className=\"relative w-full shrink-0 grow-0 border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6')}>\n          <div className=\"mb-6 flex-1 overflow-hidden\">\n            <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n            <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n          </div>\n          <Button\n            size=\"sm\"\n            hoverEffect=\"slide\"\n            variant=\"secondary\"\n            className={cn(\n              'mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n              configuration?.shape === 'round' ? 'rounded-2xl' : ''\n            )}\n          >\n            <a href={data.link}>{configuration?.primaryButton}</a>\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div className=\"tablet:block hidden\">\n        <div\n          className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 5 : 1\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onClick={() => {\n                  if (hoverIndex === idx) return\n                  // \u66F4\u65B0 ref \u72B6\u6001\n                  enterRef.current = { [idx]: true }\n                  // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n                  setHoverIndex(idx)\n                }}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                {currentWidth?.[idx] && isExpanded ? (\n                  <div\n                    className={cn(\n                      'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\n                    )}\n                  >\n                    <div className=\"mr-1 flex-1 overflow-hidden\">\n                      <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n                        {item?.title}\n                      </p>\n                      <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n                    </div>\n                    <Button\n                      size=\"sm\"\n                      hoverEffect=\"slide\"\n                      variant=\"secondary\"\n                      className={cn(\n                        'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n                        data?.shape === 'round' ? 'rounded-2xl' : ''\n                      )}\n                    >\n                      <a href={item?.link}>{data?.primaryButton}</a>\n                    </Button>\n                  </div>\n                ) : null}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className=\"tablet:hidden block\">\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              primaryButton: data?.primaryButton,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1.3,\n            },\n            768: {\n              spaceBetween: '16px',\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default AccordionCards\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "idx", "isExpanded", "AccordionCards_default"]
 }

package/dist/esm/biz-components/Category/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import l from"../../components/picture.js";import{withStyles as p}from"../../shared/Styles.js";import n from"../Title/index.js";import c from"../SwiperBox/index.js";const d=({data:e,configuration:r})=>a("div",{className:o("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t(l,{className:"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover",source:e?.image}),t("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]}),m=({data:e,buildData:r,className:s="",key:i})=>a("div",{className:o("w-full",s),children:[e?.title&&t(n,{data:{title:e?.title}}),t(c,{className:"!overflow-visible",id:"Category"+i,data:{list:e?.products,configuration:{shape:e?.shape}},Slide:d,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:6}}})]});var h=p(m);export{h as default};
+"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import l from"../../components/picture.js";import{withStyles as p}from"../../shared/Styles.js";import n from"../Title/index.js";import c from"../SwiperBox/index.js";const d=({data:e,configuration:r})=>a("div",{className:o("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t(l,{className:"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover",source:e?.image}),t("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]}),m=({data:e,buildData:r,className:s="",key:i})=>a("div",{className:o("w-full",s),children:[e?.title&&t(n,{data:{title:e?.title}}),t(c,{className:"!overflow-visible",id:"Category"+i,data:{list:e?.products,configuration:{shape:e?.shape}},Slide:d,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:3.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:6}}})]});var h=p(m);export{h as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Category/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: string\n  name: string\n}\n\nexport interface CategoryProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  data: {\n    products: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  key?: string\n}\n\nconst CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n        'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n      )}\n    >\n      <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n      <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n    </div>\n  )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n  return (\n    <div className={cn('w-full', className)}>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'Category' + key}\n        data={{ list: data?.products, configuration: { shape: data?.shape } }}\n        Slide={CategoryItem}\n        breakpoints={{\n          0: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 2.3,\n          },\n          768: {\n            spaceBetween: '16px',\n            freeMode: false,\n            slidesPerView: 6,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(Category)\n"],
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: string\n  name: string\n}\n\nexport interface CategoryProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  data: {\n    products: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  key?: string\n}\n\nconst CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n        'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n      )}\n    >\n      <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n      <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n    </div>\n  )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n  return (\n    <div className={cn('w-full', className)}>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'Category' + key}\n        data={{ list: data?.products, configuration: { shape: data?.shape } }}\n        Slide={CategoryItem}\n        breakpoints={{\n          0: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 3.3,\n          },\n          768: {\n            spaceBetween: '16px',\n            freeMode: false,\n            slidesPerView: 6,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(Category)\n"],
   "mappings": "aAiCI,OAOE,OAAAA,EAPF,QAAAC,MAAA,oBAhCJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAExCR,EAAC,OACC,UAAWC,EACT,+DACA,+DACAO,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,UAAAT,EAACG,EAAA,CAAQ,UAAU,uEAAuE,OAAQK,GAAM,MAAO,EAC/GR,EAAC,KAAE,UAAU,0DAA2D,SAAAQ,GAAM,KAAK,GACrF,EAIEE,EAAoC,CAAC,CAAE,KAAAF,EAAM,UAAAG,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,IAE9EZ,EAAC,OAAI,UAAWC,EAAG,SAAUU,CAAS,EACnC,UAAAJ,GAAM,OAASR,EAACK,EAAA,CAAM,KAAM,CAAE,MAAOG,GAAM,KAAM,EAAG,EACrDR,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,WAAaO,EACjB,KAAM,CAAE,KAAML,GAAM,SAAU,cAAe,CAAE,MAAOA,GAAM,KAAM,CAAE,EACpE,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EAIJ,IAAOO,EAAQV,EAAWM,CAAQ",
   "names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "Title", "SwiperBox", "CategoryItem", "data", "configuration", "Category", "buildData", "className", "key", "Category_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/index.js

@@ -1,10 +1,10 @@
-"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useState as D,useEffect as N}from"react";import{cn as y}from"../../helpers/utils.js";import C from"../../components/picture.js";import{Tabs as I,TabsList as P,TabsTrigger as F}from"../../components/tabs.js";import k from"../../components/button.js";import E from"../Title/index.js";import A from"../SwiperBox/index.js";import{withStyles as V}from"../../shared/Styles.js";import{formatVariantPrice as q}from"./shelfDisplay.js";const M=({data:e,configuration:r})=>{const m=a=>r?.event?.primaryButton?.(a),c=a=>r?.event?.secondaryButton?.(a),{price:u,basePrice:b}=q({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),p=()=>{const a=e?.sku,o=e?.variants;return o?.find(x=>x?.sku===a)?.image?.url||o?.[0]?.image?.url||""};return d("div",{className:y("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:y("relative mb-2 inline-block h-[137px] overflow-hidden","tablet:mb-3 tablet:h-[195px]"),children:t(C,{source:p(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"tablet:mb-2 mb-1 flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((a,o)=>t("div",{className:"tablet:text-base rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:a},o))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),d("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:u||""}),t("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:b||""})]}),d("div",{className:"flex items-center gap-3",children:[t(k,{variant:"primary",onClick:()=>m(e),className:`
+"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useState as D,useEffect as N}from"react";import{cn as y}from"../../helpers/utils.js";import C from"../../components/picture.js";import{Tabs as I,TabsList as P,TabsTrigger as F}from"../../components/tabs.js";import k from"../../components/button.js";import E from"../Title/index.js";import A from"../SwiperBox/index.js";import{withStyles as V}from"../../shared/Styles.js";import{formatVariantPrice as q}from"./shelfDisplay.js";const M=({data:e,configuration:r})=>{const c=a=>r?.event?.primaryButton?.(a),m=a=>r?.event?.secondaryButton?.(a),{price:u,basePrice:b}=q({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),p=()=>{const a=e?.sku,o=e?.variants;return o?.find(x=>x?.sku===a)?.image?.url||o?.[0]?.image?.url||""};return d("div",{className:y("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:y("relative mb-2 inline-block h-[137px] overflow-hidden","tablet:mb-3 tablet:h-[195px]"),children:t(C,{source:p(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((a,o)=>t("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:a},o))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),d("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:u||""}),t("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:b||""})]}),d("div",{className:"flex items-center gap-3",children:[t(k,{variant:"primary",onClick:()=>c(e),className:`
             laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
             border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black
             ${r?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
-          `,children:r?.primaryButton||""}),t(k,{variant:"secondary",onClick:()=>c(e),className:`
+          `,children:r?.primaryButton||""}),t(k,{variant:"secondary",onClick:()=>m(e),className:`
             laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
             border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
             ${r?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
-          `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},L=({data:e,buildData:r,className:m="",key:c,event:u})=>{const[b,p]=D(""),[a,o]=D([]),{productsTab:l=[],productsCard:x=[],title:h,align:S="left",isShowTab:v=!0,tabShape:w="square",...T}=e,f=s=>{const i=s?.map(n=>{const g=r?.products?.find(B=>B?.handle===n?.handle);if(g)return{sku:n.sku,...g}})?.filter(n=>n);o(i)};return N(()=>{if(v){p(l?.[0]?.tab||""),f(l?.[0]?.data||[]);return}f(x)},[]),d("div",{className:y("w-full",m),children:[h&&t(E,{data:{title:h}}),v&&t(I,{shape:w,align:S,value:b,onValueChange:s=>{p(s);const i=l?.find(n=>n?.tab===s);f(i?.data||[])},className:"mb-8",children:t(P,{children:l?.map((s,i)=>t(F,{value:s?.tab||"",children:s?.tab},i))})}),t(A,{className:"!overflow-visible",id:"ShelfDisplay"+c,data:{list:a,configuration:{...T,event:u}},Slide:M,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})]})};var O=V(L);export{O as default};
+          `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},L=({data:e,buildData:r,className:c="",key:m,event:u})=>{const[b,p]=D(""),[a,o]=D([]),{productsTab:l=[],productsCard:x=[],title:h,align:S="left",isShowTab:v=!0,tabShape:w="square",...T}=e,f=s=>{const i=s?.map(n=>{const g=r?.products?.find(B=>B?.handle===n?.handle);if(g)return{sku:n.sku,...g}})?.filter(n=>n);o(i)};return N(()=>{if(v){p(l?.[0]?.tab||""),f(l?.[0]?.data||[]);return}f(x)},[]),d("div",{className:y("w-full",c),children:[h&&t(E,{data:{title:h}}),v&&t(I,{shape:w,align:S,value:b,onValueChange:s=>{p(s);const i=l?.find(n=>n?.tab===s);f(i?.data||[])},className:"mb-8",children:t(P,{children:l?.map((s,i)=>t(F,{value:s?.tab||"",children:s?.tab},i))})}),t(A,{className:"!overflow-visible",id:"ShelfDisplay"+m,data:{list:a,configuration:{...T,event:u}},Slide:M,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})]})};var O=V(L);export{O as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/ShelfDisplay/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('relative mb-2 inline-block h-[137px] overflow-hidden', 'tablet:mb-3 tablet:h-[195px]')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"tablet:mb-2 mb-1 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 rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className=\"flex items-center gap-3\">\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isShowTab && (\n        <Tabs\n          shape={tabShape}\n          align={align}\n          value={tabId}\n          onValueChange={v => {\n            setTabId(v)\n            const findData = productsTab?.find((item: any) => item?.tab === v)\n            handleCurrentTab(findData?.data || [])\n          }}\n          className=\"mb-8\"\n        >\n          <TabsList>\n            {productsTab?.map((item: any, index: number) => {\n              return (\n                <TabsTrigger key={index} value={item?.tab || ''}>\n                  {item?.tab}\n                </TabsTrigger>\n              )\n            })}\n          </TabsList>\n        </Tabs>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: '16px',\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('relative mb-2 inline-block h-[137px] overflow-hidden', 'tablet:mb-3 tablet:h-[195px]')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className=\"flex items-center gap-3\">\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isShowTab && (\n        <Tabs\n          shape={tabShape}\n          align={align}\n          value={tabId}\n          onValueChange={v => {\n            setTabId(v)\n            const findData = productsTab?.find((item: any) => item?.tab === v)\n            handleCurrentTab(findData?.data || [])\n          }}\n          className=\"mb-8\"\n        >\n          <TabsList>\n            {productsTab?.map((item: any, index: number) => {\n              return (\n                <TabsTrigger key={index} value={item?.tab || ''}>\n                  {item?.tab}\n                </TabsTrigger>\n              )\n            })}\n          </TabsList>\n        </Tabs>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: '12px',\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: '16px',\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "index", "ShelfDisplay", "buildData", "className", "key", "event", "tabId", "setTabId", "currentItems", "setCurrentItems", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.27-alpha.46",
+  "version": "0.0.27-alpha.48",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -38,12 +38,14 @@
       }
     },
     "./tailwind.config": {
-      "require": "./tailwind.config.ts",
-      "import": "./tailwind.config.ts"
+      "require": "./tailwind.config.js",
+      "import": "./tailwind.config.js",
+      "types": "./tailwind.config.d.ts"
     },
     "./tailwind.config.js": {
-      "require": "./tailwind.config.ts",
-      "import": "./tailwind.config.ts"
+      "require": "./tailwind.config.js",
+      "import": "./tailwind.config.js",
+      "types": "./tailwind.config.d.ts"
     },
     "./style.css": "./style.css",
     "./tokens/*": "./dist/tokens/*"
@@ -54,7 +56,8 @@
     "*.css",
     "README.md",
     "CONTRIBUTING.md",
-    "tailwind.config.ts"
+    "tailwind.config.js",
+    "tailwind.config.d.ts"
   ],
   "sideEffects": false,
   "keywords": [],

package/tailwind.config.d.ts

@@ -0,0 +1,2 @@
+declare const config: import('tailwindcss').Config
+export = config

package/{tailwind.config.ts → tailwind.config.js}

@@ -1,6 +1,4 @@
-import type { Config } from 'tailwindcss'
-
-export default {
+module.exports = {
   darkMode: ['selector', '.aiui-dark'],
   content: [
     './src/components/**/*.{js,jsx,ts,tsx}',
@@ -222,4 +220,4 @@ export default {
       },
     },
   },
-} satisfies Config
+}