npm - @anker-in/headless-ui - Versions diffs - 1.3.2 → 1.3.4-alpha.1779865556089 - Mend

@anker-in/headless-ui 1.3.2 → 1.3.4-alpha.1779865556089

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (422) hide show

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var A=Object.create;var k=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var i in t)k(e,i,{get:t[i],enumerable:!0})},R=(e,t,i,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of z(t))!O.call(e,d)&&d!==i&&k(e,d,{get:()=>t[d],enumerable:!(c=j(t,d))||c.enumerable});return e};var h=(e,t,i)=>(i=e!=null?A(P(e)):{},R(t||!e||!e.__esModule?k(i,"default",{value:e,enumerable:!0}):i,e)),W=e=>R(k({},"__esModule",{value:!0}),e);var F={};V(F,{default:()=>U});module.exports=W(F);var n=require("react/jsx-runtime"),B=h(require("../Title/index.js")),l=require("../../helpers/utils.js"),_=h(require("../../components/picture.js")),N=h(require("../../components/button.js")),S=h(require("../SwiperBox/index.js")),C=require("../../shared/Styles.js"),r=h(require("react")),L=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js"),D=h(require("../../shared/throttle.js")),M=require("../../components/heading.js");const a="image",m="scene_banner",q=({item:e,idx:t,itemShape:i,hoverIndex:c,getRef:d,handleSwiperItemClick:x,contentWidth:p,primaryButton:u,event:f,data:v,accordionRef:$})=>{const g=c===t,T=g?8:1;return(0,L.useExposure)({current:$.current[t]},{componentType:a,componentName:m,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),(0,n.jsxs)("div",{style:{flex:`${T} 1 0%`,transition:"all 0.6s"},ref:w=>{w&&d(t,w)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",i==="round"?"rounded-2xl":""),onMouseEnter:()=>x(t),onClick:()=>{x(t)},children:[(0,n.jsx)("a",{href:(0,y.trackUrlRef)(e?.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:(0,n.jsx)(_.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}),(0,n.jsxs)("div",{style:{width:p},className:(0,l.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",g&&p?"opacity-100":"opacity-0"),children:[(0,n.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,n.jsx)(M.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),(0,n.jsx)(M.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),u&&(0,n.jsxs)(N.default,{className:(0,l.cn)("mb-1.5 font-bold"),as:"a",href:(0,y.trackUrlRef)(e?.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${u}`,onClick:()=>f?.primaryButton?.(v,t),children:[u,(0,n.jsx)("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},J=({data:e,configuration:t})=>{const i=(0,r.useRef)(null);return(0,L.useExposure)(i,{componentType:a,componentName:m,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),(0,n.jsxs)("div",{ref:i,className:(0,l.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[(0,n.jsx)("a",{href:(0,y.trackUrlRef)(e?.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-position":`''#${t?.index+1}`,children:(0,n.jsx)(_.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}),(0,n.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[(0,n.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,n.jsx)("h3",{className:"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]",dangerouslySetInnerHTML:{__html:e?.title}}),(0,n.jsx)("h4",{className:"text-info-primary line-clamp-2 text-sm font-bold",dangerouslySetInnerHTML:{__html:e?.subTitle}})]}),t?.primaryButton&&(0,n.jsx)(N.default,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:(0,l.cn)("text-info-primary text-sm font-bold"),href:(0,y.trackUrlRef)(e.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-nav-position":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},E=r.default.forwardRef(({data:e,autoplay:t={enabled:!1,loop:!1,interval:1500},className:i="",event:c,...d},x)=>{const[p,u]=(0,r.useState)(0),f=(0,r.useRef)(0),v=(0,r.useRef)([]),[$,g]=(0,r.useState)(0),T=(0,r.useRef)(null);(0,r.useImperativeHandle)(x,()=>T.current);const w=(o,s)=>{s&&(v.current[o]=s)};(0,r.useEffect)(()=>{const o=()=>{v.current[f.current]&&g(v.current[f.current].offsetWidth)};o();const s=(0,D.default)(o,300);return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[]);const H=(0,r.useCallback)(o=>{p!==o&&(u(o),f.current=o)},[e?.products,p]);return(0,r.useEffect)(()=>{let o;return t?.enabled&&(o=setInterval(()=>{u(s=>{const I=s??0;let b;if(t.loop!==!1)b=(I+1)%e?.products?.length;else if(b=I+1,b>=e?.products?.length)return b=e?.products?.length-1,o&&clearInterval(o),I;return f.current=b,b})},t?.interval)),()=>{o&&clearInterval(o)}},[t?.enabled,t?.interval,t?.loop,e?.products?.length,H]),(0,n.jsxs)("div",{...d,ref:T,children:[e?.title&&(0,n.jsx)(B.default,{data:{title:e?.title}}),(0,n.jsx)("div",{className:(0,l.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,n.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",i),children:e?.products?.map((o,s)=>(0,n.jsx)(q,{item:o,idx:s,itemShape:e?.itemShape,hoverIndex:p,getRef:w,handleSwiperItemClick:H,contentWidth:$,primaryButton:e?.primaryButton,event:c,data:e,accordionRef:v},s))})}),(0,n.jsx)("div",{className:(0,l.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,n.jsx)(S.default,{className:(0,l.cn)("h-[400px] !overflow-visible",i),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:c,title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});E.displayName="AccordionCards";var U=(0,C.withLayout)(E);
+"use strict";"use client";var A=Object.create;var w=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var o in t)w(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of P(t))!V.call(e,l)&&l!==o&&w(e,l,{get:()=>t[l],enumerable:!(d=z(t,l))||d.enumerable});return e};var h=(e,t,o)=>(o=e!=null?A(O(e)):{},E(t||!e||!e.__esModule?w(o,"default",{value:e,enumerable:!0}):o,e)),q=e=>E(w({},"__esModule",{value:!0}),e);var G={};W(G,{default:()=>F});module.exports=q(G);var n=require("react/jsx-runtime"),D=h(require("../Title/index.js")),s=require("../../helpers/utils.js"),x=h(require("../../components/picture.js")),H=h(require("../../components/button.js")),S=h(require("../SwiperBox/index.js")),C=require("../../shared/Styles.js"),r=h(require("react")),L=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js"),M=require("../AiuiProvider/index.js"),j=h(require("../../shared/throttle.js")),R=require("../../components/heading.js");const c="image",m="scene_banner",J=({item:e,idx:t,itemShape:o,hoverIndex:d,getRef:l,handleSwiperItemClick:T,contentWidth:p,primaryButton:u,event:f,data:b,accordionRef:_})=>{const k=d===t,$=k?8:1,{trackingData:I}=(0,M.useAiuiContext)(),g=I?.contextHandle||"";return(0,L.useExposure)({current:_.current[t]},{componentType:c,componentName:m,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),(0,n.jsxs)("div",{style:{flex:`${$} 1 0%`,transition:"all 0.6s"},ref:i=>{i&&l(t,i)},className:(0,s.cn)("relative cursor-pointer overflow-hidden",o==="round"?"rounded-2xl":""),onMouseEnter:()=>T(t),onClick:()=>{T(t)},children:[e?.imgLink?(0,n.jsx)("a",{href:(0,y.trackUrlRef)(e.imgLink,`${g}_${c}_${m}`),"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:(0,n.jsx)(x.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}):(0,n.jsx)(x.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),(0,n.jsxs)("div",{style:{width:p},className:(0,s.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",k&&p?"opacity-100":"opacity-0"),children:[(0,n.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,n.jsx)(R.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),(0,n.jsx)(R.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),u&&(0,n.jsxs)(H.default,{className:(0,s.cn)("mb-1.5 font-bold"),as:"a",href:(0,y.trackUrlRef)(e?.link,`${g}_${c}_${m}`),"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${u}`,onClick:()=>f?.primaryButton?.(b,t),children:[u,(0,n.jsx)("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},U=({data:e,configuration:t})=>{const o=(0,r.useRef)(null),{trackingData:d}=(0,M.useAiuiContext)(),l=d?.contextHandle||"";return(0,L.useExposure)(o,{componentType:c,componentName:m,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),(0,n.jsxs)("div",{ref:o,className:(0,s.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[e?.imgLink?(0,n.jsx)("a",{href:(0,y.trackUrlRef)(e.imgLink,`${l}_${c}_${m}`),"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-position":`''#${t?.index+1}`,children:(0,n.jsx)(x.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}):(0,n.jsx)(x.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),(0,n.jsxs)("div",{className:(0,s.cn)("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[(0,n.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,n.jsx)("h3",{className:"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]",dangerouslySetInnerHTML:{__html:e?.title}}),(0,n.jsx)("h4",{className:"text-info-primary line-clamp-2 text-sm font-bold",dangerouslySetInnerHTML:{__html:e?.subTitle}})]}),t?.primaryButton&&(0,n.jsx)(H.default,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:(0,s.cn)("text-info-primary text-sm font-bold"),href:(0,y.trackUrlRef)(e.link,`${l}_${c}_${m}`),"data-headless-type-name":`${c}#${m}`,"data-headless-nav-position":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},B=r.default.forwardRef(({data:e,autoplay:t={enabled:!1,loop:!1,interval:1500},className:o="",event:d,...l},T)=>{const[p,u]=(0,r.useState)(0),f=(0,r.useRef)(0),b=(0,r.useRef)([]),[_,k]=(0,r.useState)(0),$=(0,r.useRef)(null);(0,r.useImperativeHandle)(T,()=>$.current);const I=(i,a)=>{a&&(b.current[i]=a)};(0,r.useEffect)(()=>{const i=()=>{b.current[f.current]&&k(b.current[f.current].offsetWidth)};i();const a=(0,j.default)(i,300);return window.addEventListener("resize",a),()=>window.removeEventListener("resize",a)},[]);const g=(0,r.useCallback)(i=>{p!==i&&(u(i),f.current=i)},[e?.products,p]);return(0,r.useEffect)(()=>{let i;return t?.enabled&&(i=setInterval(()=>{u(a=>{const N=a??0;let v;if(t.loop!==!1)v=(N+1)%e?.products?.length;else if(v=N+1,v>=e?.products?.length)return v=e?.products?.length-1,i&&clearInterval(i),N;return f.current=v,v})},t?.interval)),()=>{i&&clearInterval(i)}},[t?.enabled,t?.interval,t?.loop,e?.products?.length,g]),(0,n.jsxs)("div",{...l,ref:$,children:[e?.title&&(0,n.jsx)(D.default,{data:{title:e?.title}}),(0,n.jsx)("div",{className:(0,s.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,n.jsx)("div",{className:(0,s.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",o),children:e?.products?.map((i,a)=>(0,n.jsx)(J,{item:i,idx:a,itemShape:e?.itemShape,hoverIndex:p,getRef:I,handleSwiperItemClick:g,contentWidth:_,primaryButton:e?.primaryButton,event:d,data:e,accordionRef:b},a))})}),(0,n.jsx)("div",{className:(0,s.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,n.jsx)(S.default,{className:(0,s.cn)("h-[400px] !overflow-visible",o),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:d,title:e?.title}},Slide:U,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});B.displayName="AccordionCards";var F=(0,C.withLayout)(B);
 //# sourceMappingURL=index.js.map

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

@@ -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 { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\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: Img\n  mobileImg?: Img\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n  imgLink?: string\n}\n\nexport type AccordionCardsType = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\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    theme?: 'light' | 'dark'\n  }\n  /**\n   * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n   */\n  autoplay?: {\n    /**\n     * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n     */\n    enabled: boolean\n    /**\n     * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n     */\n    loop?: boolean\n    /**\n     * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n     */\n    interval?: number\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n}\n\nconst AccordionCardsPcItem = ({\n  item,\n  idx,\n  itemShape,\n  hoverIndex,\n  getRef,\n  handleSwiperItemClick,\n  contentWidth,\n  primaryButton,\n  event,\n  data,\n  accordionRef,\n}: {\n  item: ItemType\n  idx: number\n  itemShape: 'round' | 'square' | undefined\n  hoverIndex: number | null\n  getRef: (_idx: number, _el: HTMLDivElement) => void\n  handleSwiperItemClick: (_idx: number) => void\n  contentWidth: number\n  primaryButton: string | undefined\n  event: any\n  data: AccordionCardsType['data']\n  accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n  const isExpanded = hoverIndex === idx\n  const flexValue = isExpanded ? 8 : 1\n\n  useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n    componentType,\n    componentName,\n    componentTitle: item?.title,\n    position: idx + 1,\n    componentDescription: item?.subTitle,\n  })\n\n  return (\n    <div\n      key={idx}\n      style={{\n        flex: `${flexValue} 1 0%`,\n        transition: 'all 0.6s',\n      }}\n      ref={(el: HTMLDivElement | null) => {\n        if (el) getRef(idx, el)\n      }}\n      className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n      onMouseEnter={() => handleSwiperItemClick(idx)}\n      onClick={() => {\n        handleSwiperItemClick(idx)\n      }}\n    >\n      <a\n        href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n      >\n        <Picture\n          source={item?.img?.url}\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          alt={item?.img?.alt || ''}\n        />\n      </a>\n      <div\n        style={{\n          width: contentWidth,\n        }}\n        className={cn(\n          'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n          isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n        )}\n      >\n        <div className=\"mr-16 flex-1 overflow-hidden\">\n          <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n            {item?.title}\n          </Heading>\n          <Heading\n            as=\"h4\"\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n          >\n            {item?.subTitle}\n          </Heading>\n        </div>\n        {primaryButton && (\n          <Button\n            className={cn('mb-1.5 font-bold')}\n            as=\"a\"\n            href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n            onClick={() => event?.primaryButton?.(data, idx)}\n          >\n            {primaryButton}\n            <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.subTitle,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <a\n        href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n        data-headless-nav-position={`''#${configuration?.index + 1}`}\n      >\n        <Picture\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          source={data?.mobileImg?.url || ''}\n          alt={data?.mobileImg?.alt || ''}\n        />\n      </a>\n      <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n        <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n          <h3\n            className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n            dangerouslySetInnerHTML={{ __html: data?.title }}\n          ></h3>\n          <h4\n            className=\"text-info-primary line-clamp-2 text-sm font-bold\"\n            dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n          ></h4>\n        </div>\n\n        {configuration?.primaryButton && (\n          <Button\n            as=\"a\"\n            variant=\"secondary\"\n            aria-label={data?.title ?? data?.subTitle}\n            className={cn('text-info-primary text-sm font-bold')}\n            href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-nav-position={`''#${configuration?.index + 1}`}\n            data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n          >\n            {configuration?.primaryButton}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n  ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n    const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n    const hoverIndexRef = useRef<number>(0)\n    const accordionRef = useRef<HTMLDivElement[]>([])\n    const [contentWidth, setContentWidth] = useState<number>(0)\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const getRef = (index: number, el: HTMLDivElement) => {\n      if (el) {\n        accordionRef.current[index] = el\n      }\n    }\n\n    useEffect(() => {\n      const handleResize = () => {\n        if (accordionRef.current[hoverIndexRef.current]) {\n          setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n        }\n      }\n      handleResize()\n      const throttleResize = throttle(handleResize, 300)\n      window.addEventListener('resize', throttleResize)\n      return () => window.removeEventListener('resize', throttleResize)\n    }, [])\n\n    const handleSwiperItemClick = useCallback(\n      (idx: number) => {\n        if (hoverIndex === idx) return\n        // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n        setHoverIndex(idx)\n        hoverIndexRef.current = idx\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [data?.products, hoverIndex]\n    )\n\n    useEffect(() => {\n      let autoPlayTimer: NodeJS.Timeout\n      if (autoplay?.enabled) {\n        autoPlayTimer = setInterval(() => {\n          setHoverIndex(prev => {\n            const currentIndex = prev ?? 0\n            let nextIndex: number\n\n            if (autoplay.loop !== false) {\n              // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n              nextIndex = (currentIndex + 1) % data?.products?.length\n            } else {\n              // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n              nextIndex = currentIndex + 1\n              if (nextIndex >= data?.products?.length) {\n                nextIndex = data?.products?.length - 1\n                // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n                if (autoPlayTimer) {\n                  clearInterval(autoPlayTimer)\n                }\n                return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n              }\n            }\n\n            hoverIndexRef.current = nextIndex\n            return nextIndex\n          })\n        }, autoplay?.interval)\n      }\n      return () => {\n        if (autoPlayTimer) {\n          clearInterval(autoPlayTimer)\n        }\n      }\n    }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n    return (\n      <div {...rest} ref={innerRef}>\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n          <div\n            className={cn(\n              'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n              className\n            )}\n          >\n            {data?.products?.map((item, idx) => (\n              <AccordionCardsPcItem\n                key={idx}\n                item={item}\n                idx={idx}\n                itemShape={data?.itemShape}\n                hoverIndex={hoverIndex}\n                getRef={getRef}\n                handleSwiperItemClick={handleSwiperItemClick}\n                contentWidth={contentWidth}\n                primaryButton={data?.primaryButton}\n                event={event}\n                data={data}\n                accordionRef={accordionRef}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\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                itemShape: data?.itemShape,\n                primaryButton: data?.primaryButton,\n                event: event,\n                title: data?.title,\n              },\n            }}\n            Slide={MobileItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 2.3,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(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_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "Picture", "Button", "MobileItem", "configuration", "ref", "AccordionCards", "React", "autoplay", "className", "rest", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "throttle", "autoPlayTimer", "prev", "currentIndex", "nextIndex", "Title", "SwiperBox"]
+  "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 { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\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: Img\n  mobileImg?: Img\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n  imgLink?: string\n}\n\nexport type AccordionCardsType = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\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    theme?: 'light' | 'dark'\n  }\n  /**\n   * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n   */\n  autoplay?: {\n    /**\n     * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n     */\n    enabled: boolean\n    /**\n     * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n     */\n    loop?: boolean\n    /**\n     * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n     */\n    interval?: number\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n}\n\nconst AccordionCardsPcItem = ({\n  item,\n  idx,\n  itemShape,\n  hoverIndex,\n  getRef,\n  handleSwiperItemClick,\n  contentWidth,\n  primaryButton,\n  event,\n  data,\n  accordionRef,\n}: {\n  item: ItemType\n  idx: number\n  itemShape: 'round' | 'square' | undefined\n  hoverIndex: number | null\n  getRef: (_idx: number, _el: HTMLDivElement) => void\n  handleSwiperItemClick: (_idx: number) => void\n  contentWidth: number\n  primaryButton: string | undefined\n  event: any\n  data: AccordionCardsType['data']\n  accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n  const isExpanded = hoverIndex === idx\n  const flexValue = isExpanded ? 8 : 1\n\n  const { trackingData } = useAiuiContext()\n  const contextHandle = trackingData?.contextHandle || ''\n\n  useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n    componentType,\n    componentName,\n    componentTitle: item?.title,\n    position: idx + 1,\n    componentDescription: item?.subTitle,\n  })\n\n  return (\n    <div\n      key={idx}\n      style={{\n        flex: `${flexValue} 1 0%`,\n        transition: 'all 0.6s',\n      }}\n      ref={(el: HTMLDivElement | null) => {\n        if (el) getRef(idx, el)\n      }}\n      className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n      onMouseEnter={() => handleSwiperItemClick(idx)}\n      onClick={() => {\n        handleSwiperItemClick(idx)\n      }}\n    >\n      {item?.imgLink ? (\n        <a\n          href={trackUrlRef(item.imgLink, `${contextHandle}_${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n        >\n          <Picture\n            source={item?.img?.url}\n            className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n            alt={item?.img?.alt || ''}\n          />\n        </a>\n      ) : (\n        <Picture\n          source={item?.img?.url}\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          alt={item?.img?.alt || ''}\n        />\n      )}\n      <div\n        style={{\n          width: contentWidth,\n        }}\n        className={cn(\n          'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n          isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n        )}\n      >\n        <div className=\"mr-16 flex-1 overflow-hidden\">\n          <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n            {item?.title}\n          </Heading>\n          <Heading\n            as=\"h4\"\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n          >\n            {item?.subTitle}\n          </Heading>\n        </div>\n        {primaryButton && (\n          <Button\n            className={cn('mb-1.5 font-bold')}\n            as=\"a\"\n            href={trackUrlRef(item?.link, `${contextHandle}_${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n            onClick={() => event?.primaryButton?.(data, idx)}\n          >\n            {primaryButton}\n            <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const { trackingData } = useAiuiContext()\n  const contextHandle = trackingData?.contextHandle || ''\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.subTitle,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      {data?.imgLink ? (\n        <a\n          href={trackUrlRef(data.imgLink, `${contextHandle}_${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n          data-headless-nav-position={`''#${configuration?.index + 1}`}\n        >\n          <Picture\n            className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n            source={data?.mobileImg?.url || ''}\n            alt={data?.mobileImg?.alt || ''}\n          />\n        </a>\n      ) : (\n        <Picture\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          source={data?.mobileImg?.url || ''}\n          alt={data?.mobileImg?.alt || ''}\n        />\n      )}\n      <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n        <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n          <h3\n            className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n            dangerouslySetInnerHTML={{ __html: data?.title }}\n          ></h3>\n          <h4\n            className=\"text-info-primary line-clamp-2 text-sm font-bold\"\n            dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n          ></h4>\n        </div>\n\n        {configuration?.primaryButton && (\n          <Button\n            as=\"a\"\n            variant=\"secondary\"\n            aria-label={data?.title ?? data?.subTitle}\n            className={cn('text-info-primary text-sm font-bold')}\n            href={trackUrlRef(data.link, `${contextHandle}_${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-nav-position={`''#${configuration?.index + 1}`}\n            data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n          >\n            {configuration?.primaryButton}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n  ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n    const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n    const hoverIndexRef = useRef<number>(0)\n    const accordionRef = useRef<HTMLDivElement[]>([])\n    const [contentWidth, setContentWidth] = useState<number>(0)\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const getRef = (index: number, el: HTMLDivElement) => {\n      if (el) {\n        accordionRef.current[index] = el\n      }\n    }\n\n    useEffect(() => {\n      const handleResize = () => {\n        if (accordionRef.current[hoverIndexRef.current]) {\n          setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n        }\n      }\n      handleResize()\n      const throttleResize = throttle(handleResize, 300)\n      window.addEventListener('resize', throttleResize)\n      return () => window.removeEventListener('resize', throttleResize)\n    }, [])\n\n    const handleSwiperItemClick = useCallback(\n      (idx: number) => {\n        if (hoverIndex === idx) return\n        // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n        setHoverIndex(idx)\n        hoverIndexRef.current = idx\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [data?.products, hoverIndex]\n    )\n\n    useEffect(() => {\n      let autoPlayTimer: NodeJS.Timeout\n      if (autoplay?.enabled) {\n        autoPlayTimer = setInterval(() => {\n          setHoverIndex(prev => {\n            const currentIndex = prev ?? 0\n            let nextIndex: number\n\n            if (autoplay.loop !== false) {\n              // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n              nextIndex = (currentIndex + 1) % data?.products?.length\n            } else {\n              // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n              nextIndex = currentIndex + 1\n              if (nextIndex >= data?.products?.length) {\n                nextIndex = data?.products?.length - 1\n                // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n                if (autoPlayTimer) {\n                  clearInterval(autoPlayTimer)\n                }\n                return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n              }\n            }\n\n            hoverIndexRef.current = nextIndex\n            return nextIndex\n          })\n        }, autoplay?.interval)\n      }\n      return () => {\n        if (autoPlayTimer) {\n          clearInterval(autoPlayTimer)\n        }\n      }\n    }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n    return (\n      <div {...rest} ref={innerRef}>\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n          <div\n            className={cn(\n              'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n              className\n            )}\n          >\n            {data?.products?.map((item, idx) => (\n              <AccordionCardsPcItem\n                key={idx}\n                item={item}\n                idx={idx}\n                itemShape={data?.itemShape}\n                hoverIndex={hoverIndex}\n                getRef={getRef}\n                handleSwiperItemClick={handleSwiperItemClick}\n                contentWidth={contentWidth}\n                primaryButton={data?.primaryButton}\n                event={event}\n                data={data}\n                accordionRef={accordionRef}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\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                itemShape: data?.itemShape,\n                primaryButton: data?.primaryButton,\n                event: event,\n                title: data?.title,\n              },\n            }}\n            Slide={MobileItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 2.3,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(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_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "trackingData", "contextHandle", "el", "Picture", "Button", "MobileItem", "configuration", "ref", "AccordionCards", "React", "autoplay", "className", "rest", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "throttle", "autoPlayTimer", "prev", "currentIndex", "nextIndex", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/ActivityMechanism/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var V=Object.create;var h=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var i in e)h(t,i,{get:e[i],enumerable:!0})},A=(t,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of N(e))!P.call(t,a)&&a!==i&&h(t,a,{get:()=>e[a],enumerable:!(s=C(e,a))||s.enumerable});return t};var H=(t,e,i)=>(i=t!=null?V(D(t)):{},A(e||!t||!t.__esModule?h(i,"default",{value:t,enumerable:!0}):i,t)),L=t=>A(h({},"__esModule",{value:!0}),t);var b={};w(b,{default:()=>j});module.exports=L(b);var l=require("react/jsx-runtime"),c=H(require("react")),o=require("../../components/index.js"),O=require("../../shared/Styles.js"),r=require("../../helpers/utils.js"),R=require("../../hooks/useExposure.js"),x=require("../../shared/trackUrlRef.js"),g=require("class-variance-authority"),y=require("../../helpers/index.js"),T=require("../AiuiProvider/index.js");const u="image",f="activity_mechanism",B=(0,g.cva)("line-clamp-2",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{theme:"light"}}),z=(0,g.cva)("desktop:text-[16px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] tracking-[-0.02em]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white/80"}},defaultVariants:{theme:"light"}}),E=(0,g.cva)("mt-2 !p-0 text-[14px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{theme:"light"}}),v={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},S=t=>{if(!t)return"";const e=[];return t.lgDesktop?.url&&e.push(`${t.lgDesktop.url}`),t.desktop?.url&&e.push(`${t.desktop.url} ${v.desktop}`),t.laptop?.url&&e.push(`${t.laptop.url} ${v.laptop}`),t.tablet?.url&&e.push(`${t.tablet.url} ${v.tablet}`),t.default?.url&&e.push(`${t.default.url} ${v.default}`),e.join(", ")},F=t=>t&&(t.default?.alt||t.tablet?.alt||t.laptop?.alt||t.desktop?.alt||t.lgDesktop?.alt)||"",_=({item:t,theme:e,classNames:i})=>{const{title:s,description:a,linkText:n,linkHref:p,backgroundImage:m}=t,d=S(m),k=F(m),{locale:$="us"}=(0,T.useAiuiContext)();return(0,l.jsx)("div",{className:(0,r.cn)("rounded-card relative flex flex-col overflow-hidden","desktop:px-6 h-[280px] p-4","laptop:gap-4 gap-3","laptop:h-[320px] lg-desktop:[400px]",i?.card),"data-headless-type-name":`${u}#${f}`,children:(0,l.jsxs)(o.Link,{asChild:!p,href:(0,y.getLocalizedPath)((0,x.trackUrlRef)(p,`${u}_${f}`),$),className:"no-underline",children:[d&&(0,l.jsx)(o.Picture,{source:d,alt:k||s,className:(0,r.cn)("absolute inset-0 size-full",i?.background),imgClassName:"size-full object-cover"}),(0,l.jsxs)("div",{className:"relative z-10",children:[(0,l.jsx)(o.Heading,{as:"h3",size:3,className:(0,r.cn)(B({theme:e}),i?.title),children:s}),(0,l.jsx)(o.Text,{as:"p",className:(0,r.cn)(z({theme:e}),i?.description),children:a}),n&&p&&(0,l.jsx)(o.Button,{variant:"link",as:"a",href:(0,y.getLocalizedPath)((0,x.trackUrlRef)(p,`${u}_${f}`),$),className:(0,r.cn)(E({theme:e}),i?.link),"data-headless-title-desc-button":`${s}#${a}#${n}`,children:n})]})]})})},M=c.default.forwardRef(({data:t,classNames:e},i)=>{const{items:s=[],theme:a="light"}=t,n=(0,c.useRef)(null);if((0,c.useImperativeHandle)(i,()=>n.current),(0,R.useExposure)(n,{componentType:u,componentName:f,componentTitle:s[0]?.title||"",componentDescription:s[0]?.description||""}),!s||s.length===0)return null;const p={1:"laptop:grid-cols-1 desktop:grid-cols-1 lg-desktop:grid-cols-1",2:"laptop:grid-cols-2 desktop:grid-cols-2 lg-desktop:grid-cols-2",3:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-3 lg-desktop:grid-cols-3",4:"laptop:grid-cols-4 desktop:grid-cols-4 lg-desktop:grid-cols-4"},m=p[Math.min(s.length,4)]||p[4];return(0,l.jsx)(o.Container,{"data-ui-component-id":"ActivityMechanism",className:(0,r.cn)("activity-mechanism","w-full",e?.root),ref:n,children:(0,l.jsx)("div",{className:(0,r.cn)("tablet:grid-cols-2 laptop:gap-4 grid grid-cols-1 gap-3",m,e?.grid),children:s.map((d,k)=>(0,l.jsx)(_,{item:d,theme:a,classNames:{...e,...s?.length===3&&{card:e?.card+" first:tablet:col-span-full first:laptop:col-span-1"}}},`${d.title}-${k}`))})})});M.displayName="ActivityMechanism";var j=M;
+"use strict";"use client";var C=Object.create;var h=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var P=(t,e)=>{for(var i in e)h(t,i,{get:e[i],enumerable:!0})},M=(t,e,i,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!L.call(t,r)&&r!==i&&h(t,r,{get:()=>e[r],enumerable:!(l=D(e,r))||l.enumerable});return t};var w=(t,e,i)=>(i=t!=null?C(H(t)):{},M(e||!t||!t.__esModule?h(i,"default",{value:t,enumerable:!0}):i,t)),B=t=>M(h({},"__esModule",{value:!0}),t);var K={};P(K,{default:()=>j});module.exports=B(K);var s=require("react/jsx-runtime"),c=w(require("react")),a=require("../../components/index.js"),U=require("../../shared/Styles.js"),o=require("../../helpers/index.js"),T=require("../../hooks/useExposure.js"),k=require("../../shared/trackUrlRef.js"),g=require("class-variance-authority"),$=require("../../helpers/index.js"),V=require("../AiuiProvider/index.js");const u="image",f="activity_mechanism",z=(0,g.cva)("line-clamp-2",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{theme:"light"}}),E=(0,g.cva)("desktop:text-[16px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] tracking-[-0.02em]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white/80"}},defaultVariants:{theme:"light"}}),S=(0,g.cva)("mt-2 !p-0 text-[14px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{theme:"light"}}),v={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},_=t=>{if(!t)return"";const e=[];return t.lgDesktop?.url&&e.push(`${t.lgDesktop.url}`),t.desktop?.url&&e.push(`${t.desktop.url} ${v.desktop}`),t.laptop?.url&&e.push(`${t.laptop.url} ${v.laptop}`),t.tablet?.url&&e.push(`${t.tablet.url} ${v.tablet}`),t.default?.url&&e.push(`${t.default.url} ${v.default}`),e.join(", ")},F=t=>t&&(t.default?.alt||t.tablet?.alt||t.laptop?.alt||t.desktop?.alt||t.lgDesktop?.alt)||"",b=({item:t,theme:e,classNames:i})=>{const{title:l,description:r,linkText:n,linkHref:p,backgroundImage:m}=t,d=_(m),x=F(m),{locale:y="us",trackingData:A}=(0,V.useAiuiContext)();return(0,s.jsx)("div",{className:(0,o.cn)("rounded-card relative flex flex-col overflow-hidden","desktop:px-6 h-[280px] p-4","laptop:gap-4 gap-3","laptop:h-[320px] lg-desktop:[400px]",i?.card),"data-headless-type-name":`${u}#${f}`,"data-headless-title-desc-button":`${t.title||""}#${t.description||""}#${t.linkText||""}`,children:(0,s.jsxs)(a.Link,{asChild:!p,href:(0,$.getLocalizedPath)((0,k.trackUrlRef)(p,`${A?.contextHandle||""}_${u}_${f}`),y),className:"no-underline",children:[d&&(0,s.jsx)(a.Picture,{source:d,alt:x||l,className:(0,o.cn)("absolute inset-0 size-full",i?.background),imgClassName:"size-full object-cover"}),(0,s.jsxs)("div",{className:"relative z-10",children:[(0,s.jsx)(a.Heading,{as:"h3",size:3,className:(0,o.cn)(z({theme:e}),i?.title),children:l}),(0,s.jsx)(a.Text,{as:"p",className:(0,o.cn)(E({theme:e}),i?.description),children:r}),n&&p&&(0,s.jsx)(a.Button,{variant:"link",as:"a",href:(0,$.getLocalizedPath)((0,k.trackUrlRef)(p,`${A?.contextHandle||""}_${u}_${f}`),y),className:(0,o.cn)(S({theme:e}),i?.link),"data-headless-title-desc-button":`${l}#${r}#${n}`,children:n})]})]})})},R=c.default.forwardRef(({data:t,classNames:e},i)=>{const{items:l=[],theme:r="light"}=t,n=(0,c.useRef)(null);if((0,c.useImperativeHandle)(i,()=>n.current),(0,T.useExposure)(n,{componentType:u,componentName:f,componentTitle:(0,o.extractLexicalText)(l[0]?.title)||"",componentDescription:(0,o.extractLexicalText)(l[0]?.description)||""}),!l||l.length===0)return null;const p={1:"laptop:grid-cols-1 desktop:grid-cols-1 lg-desktop:grid-cols-1",2:"laptop:grid-cols-2 desktop:grid-cols-2 lg-desktop:grid-cols-2",3:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-3 lg-desktop:grid-cols-3",4:"laptop:grid-cols-4 desktop:grid-cols-4 lg-desktop:grid-cols-4"},m=p[Math.min(l.length,4)]||p[4];return(0,s.jsx)(a.Container,{"data-ui-component-id":"ActivityMechanism",className:(0,o.cn)("activity-mechanism","w-full",e?.root),ref:n,children:(0,s.jsx)("div",{className:(0,o.cn)("tablet:grid-cols-2 laptop:gap-4 grid grid-cols-1 gap-3",m,e?.grid),children:l.map((d,x)=>(0,s.jsx)(b,{item:d,theme:r,classNames:{...e,...l?.length===3&&{card:e?.card+" first:tablet:col-span-full first:laptop:col-span-1"}}},`${d.title}-${x}`))})})});R.displayName="ActivityMechanism";var j=R;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/ActivityMechanism/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ActivityMechanism/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text, Button, Link, Container } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n  ActivityMechanismProps,\n  ActivityMechanismItem,\n  ActivityMechanismSemanticName,\n  ResponsiveBackgroundImage,\n} from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'activity_mechanism'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleVariants = cva('line-clamp-2', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-white',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u63CF\u8FF0\u6837\u5F0F\u53D8\u4F53\n */\nconst descriptionVariants = cva(\n  'desktop:text-[16px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] tracking-[-0.02em]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#080A0F]',\n        dark: 'text-white/80',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\n/**\n * \u94FE\u63A5\u6837\u5F0F\u53D8\u4F53\n */\nconst linkVariants = cva('mt-2 !p-0 text-[14px]', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-white',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\ntype ThemeVariants = VariantProps<typeof titleVariants>\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5C0F\u5230\u5927\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n  default: 767, // <768px (\u79FB\u52A8\u7AEF)\n  tablet: 1024, // 768px - 1024px\n  laptop: 1439, // 1025px - 1439px\n  desktop: 1919, // 1440px - 1919px\n  lgDesktop: 9999, // \u22651920px (\u6700\u5927\u503C\uFF0C\u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247)\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 767, url2 1024, url3 1439, url4 1919, url5\"\n */\nconst buildResponsiveSource = (backgroundImage?: ResponsiveBackgroundImage): string => {\n  if (!backgroundImage) return ''\n\n  const sources: string[] = []\n\n  // \u6309\u65AD\u70B9\u987A\u5E8F\u6DFB\u52A0\u56FE\u7247 URL\n  // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\u503C\n  if (backgroundImage.lgDesktop?.url) {\n    sources.push(`${backgroundImage.lgDesktop.url}`)\n  }\n  if (backgroundImage.desktop?.url) {\n    sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n  }\n  if (backgroundImage.laptop?.url) {\n    sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n  }\n  if (backgroundImage.tablet?.url) {\n    sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n  }\n  if (backgroundImage.default?.url) {\n    sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n  }\n\n  return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getDefaultAlt = (backgroundImage?: ResponsiveBackgroundImage): string => {\n  if (!backgroundImage) return ''\n  return (\n    backgroundImage.default?.alt ||\n    backgroundImage.tablet?.alt ||\n    backgroundImage.laptop?.alt ||\n    backgroundImage.desktop?.alt ||\n    backgroundImage.lgDesktop?.alt ||\n    ''\n  )\n}\n\n/**\n * \u5355\u4E2A\u6D3B\u52A8\u673A\u5236\u5361\u7247\u7EC4\u4EF6\n */\nconst ActivityMechanismCard: React.FC<{\n  item: ActivityMechanismItem\n  theme?: ThemeVariants['theme']\n  classNames?: Partial<Record<ActivityMechanismSemanticName, string>>\n}> = ({ item, theme, classNames }) => {\n  const { title, description, linkText, linkHref, backgroundImage } = item\n  const responsiveSource = buildResponsiveSource(backgroundImage)\n  const defaultAlt = getDefaultAlt(backgroundImage)\n  const { locale = 'us' } = useAiuiContext()\n\n  return (\n    <div\n      className={cn(\n        'rounded-card relative flex flex-col overflow-hidden',\n        'desktop:px-6 h-[280px] p-4',\n        'laptop:gap-4 gap-3',\n        'laptop:h-[320px] lg-desktop:[400px]',\n        classNames?.card\n      )}\n      data-headless-type-name={`${componentType}#${componentName}`}\n    >\n      <Link\n        asChild={!linkHref}\n        href={getLocalizedPath(trackUrlRef(linkHref, `${componentType}_${componentName}`), locale)}\n        className=\"no-underline\"\n      >\n        {/* \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247 */}\n        {responsiveSource && (\n          <Picture\n            source={responsiveSource}\n            alt={defaultAlt || title}\n            className={cn('absolute inset-0 size-full', classNames?.background)}\n            imgClassName=\"size-full object-cover\"\n          />\n        )}\n\n        {/* \u6587\u672C\u5185\u5BB9\u533A\u57DF */}\n        <div className=\"relative z-10\">\n          <Heading as=\"h3\" size={3} className={cn(titleVariants({ theme }), classNames?.title)}>\n            {title}\n          </Heading>\n          <Text as=\"p\" className={cn(descriptionVariants({ theme }), classNames?.description)}>\n            {description}\n          </Text>\n          {linkText && linkHref && (\n            <Button\n              variant=\"link\"\n              as=\"a\"\n              href={getLocalizedPath(trackUrlRef(linkHref, `${componentType}_${componentName}`), locale)}\n              className={cn(linkVariants({ theme }), classNames?.link)}\n              data-headless-title-desc-button={`${title}#${description}#${linkText}`}\n            >\n              {linkText}\n            </Button>\n          )}\n        </div>\n      </Link>\n    </div>\n  )\n}\n\n/**\n * ActivityMechanism - \u6D3B\u52A8\u673A\u5236\u7EC4\u4EF6\n *\n * @description \u5C55\u793A\u6D3B\u52A8\u673A\u5236/\u4F1A\u5458\u6743\u76CA\u7B49\u5361\u7247\u5217\u8868\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C\u4E3B\u9898\u5207\u6362\n */\nconst ActivityMechanism = React.forwardRef<HTMLDivElement, ActivityMechanismProps>(({ data, classNames }, ref) => {\n  const { items = [], theme = 'light' } = data\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: items[0]?.title || '',\n    componentDescription: items[0]?.description || '',\n  })\n\n  if (!items || items.length === 0) {\n    return null\n  }\n\n  // \u6839\u636E items \u6570\u91CF\u6620\u5C04 laptop/desktop/lg-desktop \u7684\u5217\u6570\u7C7B\u540D\n  // \u4F7F\u7528\u663E\u5F0F\u7C7B\u540D\u6620\u5C04\u4EE5\u786E\u4FDD Tailwind \u80FD\u6B63\u786E\u626B\u63CF\n  const gridColsMap: Record<number, string> = {\n    1: 'laptop:grid-cols-1 desktop:grid-cols-1 lg-desktop:grid-cols-1',\n    2: 'laptop:grid-cols-2 desktop:grid-cols-2 lg-desktop:grid-cols-2',\n    3: 'tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-3 lg-desktop:grid-cols-3',\n    4: 'laptop:grid-cols-4 desktop:grid-cols-4 lg-desktop:grid-cols-4',\n  }\n  const gridColsClass = gridColsMap[Math.min(items.length, 4)] || gridColsMap[4]\n\n  return (\n    <Container\n      data-ui-component-id=\"ActivityMechanism\"\n      className={cn('activity-mechanism', 'w-full', classNames?.root)}\n      ref={innerRef}\n    >\n      <div className={cn('tablet:grid-cols-2 laptop:gap-4 grid grid-cols-1 gap-3', gridColsClass, classNames?.grid)}>\n        {items.map((item, index) => (\n          <ActivityMechanismCard\n            key={`${item.title}-${index}`}\n            item={item}\n            theme={theme}\n            classNames={{\n              ...classNames,\n              ...(items?.length === 3 && {\n                card: classNames?.card + ' ' + 'first:tablet:col-span-full first:laptop:col-span-1',\n              }),\n            }}\n          />\n        ))}\n      </div>\n    </Container>\n  )\n})\n\nActivityMechanism.displayName = 'ActivityMechanism'\n\nexport default ActivityMechanism\n"],
-  "mappings": "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",
-  "names": ["ActivityMechanism_exports", "__export", "ActivityMechanism_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_utils", "import_useExposure", "import_trackUrlRef", "import_class_variance_authority", "import_helpers", "import_AiuiProvider", "componentType", "componentName", "titleVariants", "descriptionVariants", "linkVariants", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getDefaultAlt", "ActivityMechanismCard", "item", "theme", "classNames", "title", "description", "linkText", "linkHref", "responsiveSource", "defaultAlt", "locale", "ActivityMechanism", "React", "data", "ref", "items", "innerRef", "gridColsMap", "gridColsClass", "index"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text, Button, Link, Container } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n  ActivityMechanismProps,\n  ActivityMechanismItem,\n  ActivityMechanismSemanticName,\n  ResponsiveBackgroundImage,\n} from './types.js'\nimport { cn, extractLexicalText } from '../../helpers/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'activity_mechanism'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleVariants = cva('line-clamp-2', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-white',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u63CF\u8FF0\u6837\u5F0F\u53D8\u4F53\n */\nconst descriptionVariants = cva(\n  'desktop:text-[16px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] tracking-[-0.02em]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#080A0F]',\n        dark: 'text-white/80',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\n/**\n * \u94FE\u63A5\u6837\u5F0F\u53D8\u4F53\n */\nconst linkVariants = cva('mt-2 !p-0 text-[14px]', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-white',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\ntype ThemeVariants = VariantProps<typeof titleVariants>\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5C0F\u5230\u5927\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n  default: 767, // <768px (\u79FB\u52A8\u7AEF)\n  tablet: 1024, // 768px - 1024px\n  laptop: 1439, // 1025px - 1439px\n  desktop: 1919, // 1440px - 1919px\n  lgDesktop: 9999, // \u22651920px (\u6700\u5927\u503C\uFF0C\u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247)\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 767, url2 1024, url3 1439, url4 1919, url5\"\n */\nconst buildResponsiveSource = (backgroundImage?: ResponsiveBackgroundImage): string => {\n  if (!backgroundImage) return ''\n\n  const sources: string[] = []\n\n  // \u6309\u65AD\u70B9\u987A\u5E8F\u6DFB\u52A0\u56FE\u7247 URL\n  // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\u503C\n  if (backgroundImage.lgDesktop?.url) {\n    sources.push(`${backgroundImage.lgDesktop.url}`)\n  }\n  if (backgroundImage.desktop?.url) {\n    sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n  }\n  if (backgroundImage.laptop?.url) {\n    sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n  }\n  if (backgroundImage.tablet?.url) {\n    sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n  }\n  if (backgroundImage.default?.url) {\n    sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n  }\n\n  return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getDefaultAlt = (backgroundImage?: ResponsiveBackgroundImage): string => {\n  if (!backgroundImage) return ''\n  return (\n    backgroundImage.default?.alt ||\n    backgroundImage.tablet?.alt ||\n    backgroundImage.laptop?.alt ||\n    backgroundImage.desktop?.alt ||\n    backgroundImage.lgDesktop?.alt ||\n    ''\n  )\n}\n\n/**\n * \u5355\u4E2A\u6D3B\u52A8\u673A\u5236\u5361\u7247\u7EC4\u4EF6\n */\nconst ActivityMechanismCard: React.FC<{\n  item: ActivityMechanismItem\n  theme?: ThemeVariants['theme']\n  classNames?: Partial<Record<ActivityMechanismSemanticName, string>>\n}> = ({ item, theme, classNames }) => {\n  const { title, description, linkText, linkHref, backgroundImage } = item\n  const responsiveSource = buildResponsiveSource(backgroundImage)\n  const defaultAlt = getDefaultAlt(backgroundImage)\n  const { locale = 'us', trackingData } = useAiuiContext()\n\n  return (\n    <div\n      className={cn(\n        'rounded-card relative flex flex-col overflow-hidden',\n        'desktop:px-6 h-[280px] p-4',\n        'laptop:gap-4 gap-3',\n        'laptop:h-[320px] lg-desktop:[400px]',\n        classNames?.card\n      )}\n      data-headless-type-name={`${componentType}#${componentName}`}\n      data-headless-title-desc-button={`${item.title || ''}#${item.description || ''}#${item.linkText || ''}`}\n    >\n      <Link\n        asChild={!linkHref}\n        href={getLocalizedPath(\n          trackUrlRef(linkHref, `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`),\n          locale\n        )}\n        className=\"no-underline\"\n      >\n        {/* \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247 */}\n        {responsiveSource && (\n          <Picture\n            source={responsiveSource}\n            alt={defaultAlt || title}\n            className={cn('absolute inset-0 size-full', classNames?.background)}\n            imgClassName=\"size-full object-cover\"\n          />\n        )}\n\n        {/* \u6587\u672C\u5185\u5BB9\u533A\u57DF */}\n        <div className=\"relative z-10\">\n          <Heading as=\"h3\" size={3} className={cn(titleVariants({ theme }), classNames?.title)}>\n            {title}\n          </Heading>\n          <Text as=\"p\" className={cn(descriptionVariants({ theme }), classNames?.description)}>\n            {description}\n          </Text>\n          {linkText && linkHref && (\n            <Button\n              variant=\"link\"\n              as=\"a\"\n              href={getLocalizedPath(\n                trackUrlRef(linkHref, `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`),\n                locale\n              )}\n              className={cn(linkVariants({ theme }), classNames?.link)}\n              data-headless-title-desc-button={`${title}#${description}#${linkText}`}\n            >\n              {linkText}\n            </Button>\n          )}\n        </div>\n      </Link>\n    </div>\n  )\n}\n\n/**\n * ActivityMechanism - \u6D3B\u52A8\u673A\u5236\u7EC4\u4EF6\n *\n * @description \u5C55\u793A\u6D3B\u52A8\u673A\u5236/\u4F1A\u5458\u6743\u76CA\u7B49\u5361\u7247\u5217\u8868\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C\u4E3B\u9898\u5207\u6362\n */\nconst ActivityMechanism = React.forwardRef<HTMLDivElement, ActivityMechanismProps>(({ data, classNames }, ref) => {\n  const { items = [], theme = 'light' } = data\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: extractLexicalText(items[0]?.title) || '',\n    componentDescription: extractLexicalText(items[0]?.description) || '',\n  })\n\n  if (!items || items.length === 0) {\n    return null\n  }\n\n  // \u6839\u636E items \u6570\u91CF\u6620\u5C04 laptop/desktop/lg-desktop \u7684\u5217\u6570\u7C7B\u540D\n  // \u4F7F\u7528\u663E\u5F0F\u7C7B\u540D\u6620\u5C04\u4EE5\u786E\u4FDD Tailwind \u80FD\u6B63\u786E\u626B\u63CF\n  const gridColsMap: Record<number, string> = {\n    1: 'laptop:grid-cols-1 desktop:grid-cols-1 lg-desktop:grid-cols-1',\n    2: 'laptop:grid-cols-2 desktop:grid-cols-2 lg-desktop:grid-cols-2',\n    3: 'tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-3 lg-desktop:grid-cols-3',\n    4: 'laptop:grid-cols-4 desktop:grid-cols-4 lg-desktop:grid-cols-4',\n  }\n  const gridColsClass = gridColsMap[Math.min(items.length, 4)] || gridColsMap[4]\n\n  return (\n    <Container\n      data-ui-component-id=\"ActivityMechanism\"\n      className={cn('activity-mechanism', 'w-full', classNames?.root)}\n      ref={innerRef}\n    >\n      <div className={cn('tablet:grid-cols-2 laptop:gap-4 grid grid-cols-1 gap-3', gridColsClass, classNames?.grid)}>\n        {items.map((item, index) => (\n          <ActivityMechanismCard\n            key={`${item.title}-${index}`}\n            item={item}\n            theme={theme}\n            classNames={{\n              ...classNames,\n              ...(items?.length === 3 && {\n                card: classNames?.card + ' ' + 'first:tablet:col-span-full first:laptop:col-span-1',\n              }),\n            }}\n          />\n        ))}\n      </div>\n    </Container>\n  )\n})\n\nActivityMechanism.displayName = 'ActivityMechanism'\n\nexport default ActivityMechanism\n"],
+  "mappings": "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",
+  "names": ["ActivityMechanism_exports", "__export", "ActivityMechanism_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_helpers", "import_useExposure", "import_trackUrlRef", "import_class_variance_authority", "import_AiuiProvider", "componentType", "componentName", "titleVariants", "descriptionVariants", "linkVariants", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getDefaultAlt", "ActivityMechanismCard", "item", "theme", "classNames", "title", "description", "linkText", "linkHref", "responsiveSource", "defaultAlt", "locale", "trackingData", "ActivityMechanism", "React", "data", "ref", "items", "innerRef", "gridColsMap", "gridColsClass", "index"]
 }

package/dist/cjs/biz-components/ActivitySchedule/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var C=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},g=(e,t,a,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of V(t))!I.call(e,s)&&s!==a&&p(e,s,{get:()=>t[s],enumerable:!(c=P(t,s))||c.enumerable});return e};var L=(e,t,a)=>(a=e!=null?C(z(e)):{},g(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),E=e=>g(p({},"__esModule",{value:!0}),e);var R={};B(R,{default:()=>M});module.exports=E(R);var i=require("react/jsx-runtime"),v=L(require("react")),d=require("../../helpers/index.js"),l=require("../../components/index.js"),f=require("class-variance-authority"),h=require("swiper/react"),y=require("../../shared/Styles.js");const j=(0,f.cva)("rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3",{variants:{state:{"active-light":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","active-dark":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","inactive-light":"bg-[#EAEAEC]","inactive-dark":"bg-[#1E2024]"},size:{small:"laptop:h-[160px] h-[120px]",large:"laptop:h-[240px] h-[200px]"}},defaultVariants:{state:"inactive-light",size:"small"}}),m=(0,f.cva)("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-white","active-dark":"text-white","inactive-light":"text-[#080A0F]","inactive-dark":"text-white"}},defaultVariants:{state:"inactive-light"}}),w=v.memo(({item:e,theme:t="light",className:a,size:c})=>{const s=e.isActive||!1,o=`${s?"active":"inactive"}-${t}`;return(0,i.jsx)("div",{className:(0,d.cn)(j({state:o,size:c}),a),"data-ui-component-id":"ActivityScheduleCard",children:(0,i.jsxs)(l.Link,{asChild:!e?.link,href:e?.link,className:"size-full no-underline hover:text-current",children:[(s?e.activeIcon:e.inactiveIcon)&&(0,i.jsx)("div",{className:"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]",children:(0,i.jsx)(l.Picture,{source:s?e.activeIcon.url:e.inactiveIcon.url,alt:s?e.activeIcon.alt:e.inactiveIcon.alt,className:"aspect-square"})}),(0,i.jsxs)("div",{className:"relative z-20 flex h-full flex-col justify-between",children:[(0,i.jsx)(l.Heading,{as:"h3",size:3,html:e.title,className:(0,d.cn)(m({state:o}))}),(0,i.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,i.jsx)("div",{className:"flex flex-col justify-end overflow-hidden",children:(0,i.jsx)(l.Heading,{as:"h4",size:2,html:e.subtitle,className:(0,d.cn)(" line-clamp-2",m({state:o}))})}),c==="large"&&e.description&&(0,i.jsx)(l.Text,{html:e.description,className:(0,d.cn)("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]",m({state:o}))})]})]})]})})});w.displayName="ActivityScheduleCard";const x=v.forwardRef(({classNames:e={},data:t,...a},c)=>{const s=t.theme||"light",o=t.size||"large",r=v.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),k=v.useMemo(()=>{const n=N=>{switch(N){case"mobile":return{slidesPerView:1.17,spaceBetween:12};case"tablet":return r===2?{slidesPerView:2,spaceBetween:12}:{slidesPerView:2.4,spaceBetween:12};case"laptop":return r===2?{}:r===4?{slidesPerView:3.2,spaceBetween:16}:{slidesPerView:r,spaceBetween:16};case"desktop":return r===2?{slidesPerView:2,spaceBetween:16}:{slidesPerView:r,spaceBetween:16}}},u=n("mobile"),S=n("tablet"),b=n("laptop"),A=n("desktop");return{0:u,768:S,1024:b,1440:A}},[r]);return(0,i.jsx)(l.Container,{ref:c,className:(0,d.cn)(e?.root),childClassName:"overflow-hidden","data-ui-component-id":"ActivitySchedule",...a,children:(0,i.jsx)(h.Swiper,{breakpoints:k,className:"w-full !overflow-visible",children:t.scheduleList.map((n,u)=>(0,i.jsx)(h.SwiperSlide,{children:(0,i.jsx)(w,{item:n,theme:s,size:o,className:e?.card})},"activityScheduleCardItem"+u))})})});x.displayName="ActivitySchedule";var M=(0,y.withLayout)(x);
+"use strict";"use client";var E=Object.create;var m=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var s in t)m(e,s,{get:t[s],enumerable:!0})},k=(e,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of H(t))!D.call(e,a)&&a!==s&&m(e,a,{get:()=>t[a],enumerable:!(o=$(t,a))||o.enumerable});return e};var M=(e,t,s)=>(s=e!=null?E(T(e)):{},k(t||!e||!e.__esModule?m(s,"default",{value:e,enumerable:!0}):s,e)),j=e=>k(m({},"__esModule",{value:!0}),e);var F={};R(F,{default:()=>q});module.exports=j(F);var i=require("react/jsx-runtime"),d=M(require("react")),p=require("../../helpers/index.js"),A=require("../AiuiProvider/index.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../helpers/index.js"),l=require("../../components/index.js"),y=require("class-variance-authority"),u=require("swiper/react"),P=require("../../shared/Styles.js"),z=require("../../hooks/useExposure.js");const g="image",w="activity_schedule",_=(0,y.cva)("rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3",{variants:{state:{"active-light":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","active-dark":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","inactive-light":"bg-[#EAEAEC]","inactive-dark":"bg-[#1E2024]"},size:{small:"laptop:h-[160px] h-[120px]",large:"laptop:h-[240px] h-[200px]"}},defaultVariants:{state:"inactive-light",size:"small"}}),x=(0,y.cva)("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-white","active-dark":"text-white","inactive-light":"text-[#080A0F]","inactive-dark":"text-white"}},defaultVariants:{state:"inactive-light"}}),S=d.memo(({item:e,theme:t="light",className:s,size:o})=>{const a=e.isActive||!1,{locale:v="us",trackingData:h}=(0,A.useAiuiContext)(),c=h?.contextHandle||"",n=`${a?"active":"inactive"}-${t}`;return(0,i.jsx)("div",{className:(0,p.cn)(_({state:n,size:o}),s),"data-ui-component-id":"ActivityScheduleCard","data-headless-type-name":`${g}#${w}`,"data-headless-title-desc-button":`${e.title}##`,children:(0,i.jsxs)(l.Link,{asChild:!e?.link,href:e?.link?(0,N.trackUrlRef)((0,C.getLocalizedPath)(e.link,v),`${c}_${g}_${w}`):void 0,className:"size-full no-underline hover:text-current",children:[(a?e.activeIcon:e.inactiveIcon)&&(0,i.jsx)("div",{className:"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]",children:(0,i.jsx)(l.Picture,{source:a?e.activeIcon.url:e.inactiveIcon.url,alt:a?e.activeIcon.alt:e.inactiveIcon.alt,className:"aspect-square"})}),(0,i.jsxs)("div",{className:"relative z-20 flex h-full flex-col justify-between",children:[(0,i.jsx)(l.Heading,{as:"h3",size:3,html:e.title,className:(0,p.cn)(x({state:n}))}),(0,i.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,i.jsx)("div",{className:"flex flex-col justify-end overflow-hidden",children:(0,i.jsx)(l.Heading,{as:"h4",size:2,html:e.subtitle,className:(0,p.cn)(" line-clamp-2",x({state:n}))})}),o==="large"&&e.description&&(0,i.jsx)(l.Text,{html:e.description,className:(0,p.cn)("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]",x({state:n}))})]})]})]})})});S.displayName="ActivityScheduleCard";const b=d.forwardRef(({classNames:e={},data:t,...s},o)=>{const a=d.useRef(null);d.useImperativeHandle(o,()=>a.current),(0,z.useExposure)(a,{componentType:g,componentName:w,componentTitle:t.scheduleList?.[0]?.title||"",componentDescription:""});const v=t.theme||"light",h=t.size||"large",c=d.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),n=d.useMemo(()=>{const r=B=>{switch(B){case"mobile":return{slidesPerView:1.17,spaceBetween:12};case"tablet":return c===2?{slidesPerView:2,spaceBetween:12}:{slidesPerView:2.4,spaceBetween:12};case"laptop":return c===2?{}:c===4?{slidesPerView:3.2,spaceBetween:16}:{slidesPerView:c,spaceBetween:16};case"desktop":return c===2?{slidesPerView:2,spaceBetween:16}:{slidesPerView:c,spaceBetween:16}}},f=r("mobile"),I=r("tablet"),L=r("laptop"),V=r("desktop");return{0:f,768:I,1024:L,1440:V}},[c]);return(0,i.jsx)(l.Container,{ref:a,className:(0,p.cn)(e?.root),childClassName:"overflow-hidden","data-ui-component-id":"ActivitySchedule",...s,children:(0,i.jsx)(u.Swiper,{breakpoints:n,className:"w-full !overflow-visible",children:t.scheduleList.map((r,f)=>(0,i.jsx)(u.SwiperSlide,{children:(0,i.jsx)(S,{item:r,theme:v,size:h,className:e?.card})},"activityScheduleCardItem"+f))})})});b.displayName="ActivitySchedule";var q=(0,P.withLayout)(b);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/ActivitySchedule/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ActivitySchedule/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading, Container, Link } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { ActivityScheduleProps, ActivityScheduleItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\n\n/**\n * Card style variants for activity schedule\n */\nconst activityCardVariants = cva(\n  'rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3',\n  {\n    variants: {\n      state: {\n        // Active state - gradient background\n        'active-light': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n        'active-dark': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n        // Inactive state - solid background\n        'inactive-light': 'bg-[#EAEAEC]',\n        'inactive-dark': 'bg-[#1E2024]',\n      },\n      size: {\n        // Small size - 120px height with responsive scaling\n        small: 'laptop:h-[160px] h-[120px]',\n        // Large size - 200px height with responsive scaling\n        large: 'laptop:h-[240px] h-[200px]',\n      },\n    },\n    defaultVariants: {\n      state: 'inactive-light',\n      size: 'small',\n    },\n  }\n)\n\n/**\n * Text style variants for card\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n  variants: {\n    state: {\n      // Active state - white text\n      'active-light': 'text-white',\n      'active-dark': 'text-white',\n      // Inactive state - dark text\n      'inactive-light': 'text-[#080A0F]',\n      'inactive-dark': 'text-white',\n    },\n  },\n  defaultVariants: {\n    state: 'inactive-light',\n  },\n})\n\n/**\n * Activity Schedule Card Component\n */\nconst ActivityScheduleCard = React.memo(\n  ({\n    item,\n    theme = 'light',\n    className,\n    size,\n  }: {\n    item: ActivityScheduleItem\n    theme?: 'light' | 'dark'\n    className?: string\n    size: 'small' | 'large'\n  }) => {\n    const isActive = item.isActive || false\n\n    // Calculate combined state\n    const cardState = `${isActive ? 'active' : 'inactive'}-${theme}` as\n      | 'active-light'\n      | 'active-dark'\n      | 'inactive-light'\n      | 'inactive-dark'\n\n    return (\n      <div\n        className={cn(activityCardVariants({ state: cardState, size }), className)}\n        data-ui-component-id=\"ActivityScheduleCard\"\n      >\n        <Link asChild={!item?.link} href={item?.link} className=\"size-full no-underline hover:text-current\">\n          {/* Background decoration icon - show activeIcon when active, inactiveIcon when inactive */}\n          {(isActive ? item.activeIcon : item.inactiveIcon) && (\n            <div className=\"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]\">\n              <Picture\n                source={isActive ? item.activeIcon!.url : item.inactiveIcon!.url}\n                alt={isActive ? item.activeIcon!.alt : item.inactiveIcon!.alt}\n                className=\"aspect-square\"\n              />\n            </div>\n          )}\n\n          {/* Content area */}\n          <div className=\"relative z-20 flex h-full flex-col justify-between\">\n            {/* Title */}\n            <Heading as=\"h3\" size={3} html={item.title} className={cn(cardTextVariants({ state: cardState }))} />\n\n            <div className=\"flex flex-col gap-1\">\n              {/* Subtitle */}\n              <div className=\"flex flex-col justify-end overflow-hidden\">\n                <Heading\n                  as=\"h4\"\n                  size={2}\n                  html={item.subtitle}\n                  className={cn(' line-clamp-2', cardTextVariants({ state: cardState }))}\n                />\n              </div>\n              {/* Detailed description - only show when size is large */}\n              {size === 'large' && item.description && (\n                <Text\n                  html={item.description}\n                  className={cn(\n                    'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]',\n                    cardTextVariants({ state: cardState })\n                  )}\n                />\n              )}\n            </div>\n          </div>\n        </Link>\n      </div>\n    )\n  }\n)\n\nActivityScheduleCard.displayName = 'ActivityScheduleCard'\n\n/**\n * ActivitySchedule - Activity Schedule Component\n *\n * @description Display activity schedule card list with active/inactive states, theme switching, and responsive layout\n */\nconst ActivitySchedule = React.forwardRef<HTMLDivElement, ActivityScheduleProps>(\n  ({ classNames = {}, data, ...rest }, ref) => {\n    const theme = data.theme || 'light'\n    const size = data.size || 'large'\n\n    const itemsPerRow = React.useMemo(() => {\n      return data?.scheduleList?.length || 2\n    }, [data?.scheduleList])\n\n    const swiperBreakpoints = React.useMemo(() => {\n      const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n        switch (breakpoint) {\n          case 'mobile':\n            return { slidesPerView: 1.17, spaceBetween: 12 }\n          case 'tablet':\n            if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 12 }\n            return { slidesPerView: 2.4, spaceBetween: 12 }\n          case 'laptop':\n            if (itemsPerRow === 2) return {}\n            if (itemsPerRow === 4) return { slidesPerView: 3.2, spaceBetween: 16 }\n            return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n          case 'desktop':\n            if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 16 }\n            return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n        }\n      }\n\n      const mobileConfig = getBreakpointConfig('mobile')\n      const tabletConfig = getBreakpointConfig('tablet')\n      const laptopConfig = getBreakpointConfig('laptop')\n      const desktopConfig = getBreakpointConfig('desktop')\n\n      return {\n        0: mobileConfig,\n        768: tabletConfig,\n        1024: laptopConfig,\n        1440: desktopConfig,\n      }\n    }, [itemsPerRow])\n\n    return (\n      <Container\n        ref={ref}\n        className={cn(classNames?.root)}\n        childClassName=\"overflow-hidden\"\n        data-ui-component-id=\"ActivitySchedule\"\n        {...rest}\n      >\n        <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n          {data.scheduleList.map((item, index) => (\n            <SwiperSlide key={'activityScheduleCardItem' + index}>\n              <ActivityScheduleCard item={item} theme={theme} size={size} className={classNames?.card} />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </Container>\n    )\n  }\n)\n\nActivitySchedule.displayName = 'ActivitySchedule'\n\nexport default withLayout(ActivitySchedule)\nexport type { ActivityScheduleProps, ActivityScheduleData, ActivityScheduleItem } from './types.js'\n"],
-  "mappings": "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",
-  "names": ["ActivitySchedule_exports", "__export", "ActivitySchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_class_variance_authority", "import_react", "import_Styles", "activityCardVariants", "cardTextVariants", "ActivityScheduleCard", "item", "theme", "className", "size", "isActive", "cardState", "ActivitySchedule", "classNames", "data", "rest", "ref", "itemsPerRow", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "index"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { Text, Picture, Heading, Container, Link } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { ActivityScheduleProps, ActivityScheduleItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'activity_schedule'\n/**\n * Card style variants for activity schedule\n */\nconst activityCardVariants = cva(\n  'rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3',\n  {\n    variants: {\n      state: {\n        // Active state - gradient background\n        'active-light': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n        'active-dark': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n        // Inactive state - solid background\n        'inactive-light': 'bg-[#EAEAEC]',\n        'inactive-dark': 'bg-[#1E2024]',\n      },\n      size: {\n        // Small size - 120px height with responsive scaling\n        small: 'laptop:h-[160px] h-[120px]',\n        // Large size - 200px height with responsive scaling\n        large: 'laptop:h-[240px] h-[200px]',\n      },\n    },\n    defaultVariants: {\n      state: 'inactive-light',\n      size: 'small',\n    },\n  }\n)\n\n/**\n * Text style variants for card\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n  variants: {\n    state: {\n      // Active state - white text\n      'active-light': 'text-white',\n      'active-dark': 'text-white',\n      // Inactive state - dark text\n      'inactive-light': 'text-[#080A0F]',\n      'inactive-dark': 'text-white',\n    },\n  },\n  defaultVariants: {\n    state: 'inactive-light',\n  },\n})\n\n/**\n * Activity Schedule Card Component\n */\nconst ActivityScheduleCard = React.memo(\n  ({\n    item,\n    theme = 'light',\n    className,\n    size,\n  }: {\n    item: ActivityScheduleItem\n    theme?: 'light' | 'dark'\n    className?: string\n    size: 'small' | 'large'\n  }) => {\n    const isActive = item.isActive || false\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const contextHandle = trackingData?.contextHandle || ''\n    // Calculate combined state\n    const cardState = `${isActive ? 'active' : 'inactive'}-${theme}` as\n      | 'active-light'\n      | 'active-dark'\n      | 'inactive-light'\n      | 'inactive-dark'\n\n    return (\n      <div\n        className={cn(activityCardVariants({ state: cardState, size }), className)}\n        data-ui-component-id=\"ActivityScheduleCard\"\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${item.title}##`}\n      >\n        <Link\n          asChild={!item?.link}\n          href={\n            item?.link\n              ? trackUrlRef(getLocalizedPath(item.link, locale), `${contextHandle}_${componentType}_${componentName}`)\n              : undefined\n          }\n          className=\"size-full no-underline hover:text-current\"\n        >\n          {/* Background decoration icon - show activeIcon when active, inactiveIcon when inactive */}\n          {(isActive ? item.activeIcon : item.inactiveIcon) && (\n            <div className=\"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]\">\n              <Picture\n                source={isActive ? item.activeIcon!.url : item.inactiveIcon!.url}\n                alt={isActive ? item.activeIcon!.alt : item.inactiveIcon!.alt}\n                className=\"aspect-square\"\n              />\n            </div>\n          )}\n\n          {/* Content area */}\n          <div className=\"relative z-20 flex h-full flex-col justify-between\">\n            {/* Title */}\n            <Heading as=\"h3\" size={3} html={item.title} className={cn(cardTextVariants({ state: cardState }))} />\n\n            <div className=\"flex flex-col gap-1\">\n              {/* Subtitle */}\n              <div className=\"flex flex-col justify-end overflow-hidden\">\n                <Heading\n                  as=\"h4\"\n                  size={2}\n                  html={item.subtitle}\n                  className={cn(' line-clamp-2', cardTextVariants({ state: cardState }))}\n                />\n              </div>\n              {/* Detailed description - only show when size is large */}\n              {size === 'large' && item.description && (\n                <Text\n                  html={item.description}\n                  className={cn(\n                    'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]',\n                    cardTextVariants({ state: cardState })\n                  )}\n                />\n              )}\n            </div>\n          </div>\n        </Link>\n      </div>\n    )\n  }\n)\n\nActivityScheduleCard.displayName = 'ActivityScheduleCard'\n\n/**\n * ActivitySchedule - Activity Schedule Component\n *\n * @description Display activity schedule card list with active/inactive states, theme switching, and responsive layout\n */\nconst ActivitySchedule = React.forwardRef<HTMLDivElement, ActivityScheduleProps>(\n  ({ classNames = {}, data, ...rest }, ref) => {\n    const innerRef = React.useRef<HTMLDivElement>(null)\n\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u66DD\u5149\u57CB\u70B9\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: data.scheduleList?.[0]?.title || '',\n      componentDescription: '',\n    })\n\n    const theme = data.theme || 'light'\n    const size = data.size || 'large'\n\n    const itemsPerRow = React.useMemo(() => {\n      return data?.scheduleList?.length || 2\n    }, [data?.scheduleList])\n\n    const swiperBreakpoints = React.useMemo(() => {\n      const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n        switch (breakpoint) {\n          case 'mobile':\n            return { slidesPerView: 1.17, spaceBetween: 12 }\n          case 'tablet':\n            if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 12 }\n            return { slidesPerView: 2.4, spaceBetween: 12 }\n          case 'laptop':\n            if (itemsPerRow === 2) return {}\n            if (itemsPerRow === 4) return { slidesPerView: 3.2, spaceBetween: 16 }\n            return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n          case 'desktop':\n            if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 16 }\n            return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n        }\n      }\n\n      const mobileConfig = getBreakpointConfig('mobile')\n      const tabletConfig = getBreakpointConfig('tablet')\n      const laptopConfig = getBreakpointConfig('laptop')\n      const desktopConfig = getBreakpointConfig('desktop')\n\n      return {\n        0: mobileConfig,\n        768: tabletConfig,\n        1024: laptopConfig,\n        1440: desktopConfig,\n      }\n    }, [itemsPerRow])\n\n    return (\n      <Container\n        ref={innerRef}\n        className={cn(classNames?.root)}\n        childClassName=\"overflow-hidden\"\n        data-ui-component-id=\"ActivitySchedule\"\n        {...rest}\n      >\n        <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n          {data.scheduleList.map((item, index) => (\n            <SwiperSlide key={'activityScheduleCardItem' + index}>\n              <ActivityScheduleCard item={item} theme={theme} size={size} className={classNames?.card} />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </Container>\n    )\n  }\n)\n\nActivitySchedule.displayName = 'ActivitySchedule'\n\nexport default withLayout(ActivitySchedule)\nexport type { ActivityScheduleProps, ActivityScheduleData, ActivityScheduleItem } from './types.js'\n"],
+  "mappings": "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",
+  "names": ["ActivitySchedule_exports", "__export", "ActivitySchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_AiuiProvider", "import_trackUrlRef", "import_components", "import_class_variance_authority", "import_react", "import_Styles", "import_useExposure", "componentType", "componentName", "activityCardVariants", "cardTextVariants", "ActivityScheduleCard", "item", "theme", "className", "size", "isActive", "locale", "trackingData", "contextHandle", "cardState", "ActivitySchedule", "classNames", "data", "rest", "ref", "innerRef", "itemsPerRow", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "index"]
 }

package/dist/cjs/biz-components/AiuiProvider/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},D=(e,t,i,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of A(t))!E.call(e,n)&&n!==i&&d(e,n,{get:()=>t[n],enumerable:!(c=x(t,n))||c.enumerable});return e};var T=e=>D(d({},"__esModule",{value:!0}),e);var L={};C(L,{AiuiContext:()=>l,default:()=>R,useAiuiContext:()=>_});module.exports=T(L);var m=require("react/jsx-runtime"),v=require("../../shared/track.js"),a=require("react");const l=(0,a.createContext)({trackingData:{},locale:void 0,copyWriting:{}}),_=()=>{const e=(0,a.useContext)(l);if(!e)throw new Error("useAiui must be used in <AiuiProvider>");return e},P=({children:e,...t})=>{const i=(0,a.useRef)(null),c=(0,a.useRef)(t?.trackingData);return(0,a.useEffect)(()=>{c.current=t?.trackingData},[t?.trackingData]),(0,a.useEffect)(()=>{const n=i.current;if(!n)return;const g=(r,o)=>{const s={};if(!o||!o.attributes)return s;for(const k of Array.from(o.attributes)){const p=k?.name;p?.startsWith("data-headless-")&&(s[p]=o.getAttribute(p))}const h=s?.["data-headless-sku"],b=s?.["data-headless-type-name"]?.split?.("#"),u=s?.["data-headless-title-desc-button"]?.split?.("#"),f=s?.["data-headless-nav-position"]?.split?.("#");(0,v.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:c.current?.pageGroup||"Home Page",component_type:b?.[0]||"",component_name:b?.[1]||"",position:f?.[1]||"",navigation:f?.[0]||"",button_name:u?.[2]||"",SKU:h||"",component_title:u?.[0]||"",component_description:u?.[1]||""}})},y=new MutationObserver(()=>{n.querySelectorAll("[data-headless-type-name]").forEach(r=>{r.hasAttribute("data-headless-track-bound")||(r.addEventListener("click",o=>g(o,r)),r.setAttribute("data-headless-track-bound","true"))})});return y.observe(n,{childList:!0,subtree:!0}),n.querySelectorAll("[data-headless-type-name]").forEach(r=>{r.hasAttribute("data-headless-track-bound")||(r.addEventListener("click",o=>g(o,r)),r.setAttribute("data-headless-track-bound","true"))}),()=>y.disconnect()},[]),(0,m.jsx)(l.Provider,{value:t,children:(0,m.jsx)("div",{ref:i,children:e})})};var R=P;
+"use strict";var d=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},T=(e,t,i,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of E(t))!C.call(e,n)&&n!==i&&d(e,n,{get:()=>t[n],enumerable:!(c=A(t,n))||c.enumerable});return e};var _=e=>T(d({},"__esModule",{value:!0}),e);var w={};D(w,{AiuiContext:()=>l,default:()=>L,useAiuiContext:()=>P});module.exports=_(w);var m=require("react/jsx-runtime"),f=require("../../shared/track.js"),a=require("react");const l=(0,a.createContext)({trackingData:{},locale:void 0,copyWriting:{}}),P=()=>{const e=(0,a.useContext)(l);if(!e)throw new Error("useAiui must be used in <AiuiProvider>");return e},R=({children:e,...t})=>{const i=(0,a.useRef)(null),c=(0,a.useRef)(t?.trackingData);return(0,a.useEffect)(()=>{c.current=t?.trackingData},[t?.trackingData]),(0,a.useEffect)(()=>{const n=i.current;if(!n)return;const g=(r,o)=>{const s={};if(!o||!o.attributes)return;for(const x of Array.from(o.attributes)){const p=x?.name;p?.startsWith("data-headless-")&&(s[p]=o.getAttribute(p)||"")}const h=s["data-headless-sku"],v=s["data-headless-type-name"]?.split?.("#"),u=s["data-headless-title-desc-button"]?.split?.("#"),b=s["data-headless-nav-position"]?.split?.("#"),k=s["data-headless-creative-id"];(0,f.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:c.current?.pageGroup||"Home Page",component_type:v?.[0]||"",component_name:v?.[1]||"",position:b?.[1]||"",navigation:b?.[0]||"",button_name:u?.[2]||"",SKU:h||"",component_title:u?.[0]||"",component_description:u?.[1]||"",creative_id:k}})},y=new MutationObserver(()=>{n.querySelectorAll("[data-headless-type-name]").forEach(r=>{r.hasAttribute("data-headless-track-bound")||(r.addEventListener("click",o=>g(o,r)),r.setAttribute("data-headless-track-bound","true"))})});return y.observe(n,{childList:!0,subtree:!0}),n.querySelectorAll("[data-headless-type-name]").forEach(r=>{r.hasAttribute("data-headless-track-bound")||(r.addEventListener("click",o=>g(o,r)),r.setAttribute("data-headless-track-bound","true"))}),()=>y.disconnect()},[]),(0,m.jsx)(l.Provider,{value:t,children:(0,m.jsx)("div",{ref:i,children:e})})};var L=R;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/AiuiProvider/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AiuiProvider/index.tsx"],
-  "sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect, useRef } from 'react'\nimport type { CurrencyDisplayType } from '../../types/props.js'\n\n/**\n * Exposure tracking parameters\n */\nexport interface ExposureParams {\n  componentType: string\n  componentName: string\n  componentTitle?: string\n  componentDescription?: string\n  navigation?: string\n  pageGroup?: string\n  position?: number\n}\n\n/**\n * Callback function for custom exposure handling\n */\nexport type OnExposureCallback = (params: ExposureParams) => void\n\ninterface AiuiContextType {\n  /**\n   * \u5168\u5C40\u57CB\u70B9\u6570\u636E\uFF0C\u81F3\u5C11\u5E94\u5305\u542B pageGroup \u5B57\u6BB5\u7528\u4E8E\u533A\u5206\u9875\u9762\uFF0C\u5176\u4ED6\u5B57\u6BB5\u53EF\u6839\u636E\u9700\u8981\u6DFB\u52A0\n   */\n  trackingData: Record<string, any>\n  /**\n   * \u5F53\u524D\u8BED\u8A00\u73AF\u5883\uFF0C\u9ED8\u8BA4\u4E3A\u6D4F\u89C8\u5668\u8BED\u8A00\n   */\n  locale?: string\n  /**\n   * \u5F53\u524D\u9875\u9762\u8DEF\u5F84\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u9875\u9762\uFF0C\u9ED8\u8BA4\u4E3A window.location.pathname\n   */\n  pathname?: string\n  /**\n   * \u5546\u6237\u81EA\u5B9A\u4E49\u7684\u5E97\u94FA\u57DF\u540D\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u5546\u6237\uFF0C\u9ED8\u8BA4\u4E3A\u7A7A\u5B57\u7B26\u4E32\n   */\n  storeDomain?: string\n  /**\n   * \u5F53\u524D\u9875\u9762\u7684 handle\uFF08slug\uFF09\uFF0C\u7528\u4E8E tracking \u57CB\u70B9\u533A\u5206\u9875\u9762\u8D44\u6E90\uFF0C\u7531\u6D88\u8D39\u65B9\u4F20\u5165\u3002\n   * \u4F8B\u5982\uFF1A<AiuiProvider pageHandle={page.handle} ...>\n   * ProductLottery\u3001Media Endorsement \u7B49\u7EC4\u4EF6\u53EF\u901A\u8FC7 useAiuiContext() \u8BFB\u53D6\u6B64\u5B57\u6BB5\u3002\n   */\n  pageHandle?: string\n  /**\n   * \u7528\u6237\u662F\u5426\u767B\u5F55\n   */\n  isLogin?: boolean\n\n  /**\n   * \u7528\u6237\u662F\u5426\u4E3APlus\u4F1A\u5458\n   */\n  isPlusMember?: boolean\n  /**\n   * \u8D27\u5E01\u4EE3\u7801\uFF0C\u9ED8\u8BA4\u4E3AUSD\n   */\n  currencyCode?: string\n  /**\n   * \u8D27\u5E01\u663E\u793A\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u4E3Asymbol\uFF08\u7B26\u53F7\uFF09\uFF0C\u53EF\u9009\u503C\u5305\u62EC\uFF1A'symbol'\uFF08\u7B26\u53F7\uFF0C\u5982$\uFF09\u3001'code'\uFF08\u8D27\u5E01\u4EE3\u7801\uFF0C\u5982USD\uFF09\u548C'name'\uFF08\u8D27\u5E01\u540D\u79F0\uFF0C\u5982\u7F8E\u5143\uFF09\u3002\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay for more details\n   */\n  currencyDisplay?: CurrencyDisplayType\n  /**\n   * \u6587\u6848\u914D\u7F6E\uFF0C\u5546\u6237\u53EF\u901A\u8FC7\u6B64\u5B57\u6BB5\u8986\u76D6\u9ED8\u8BA4\u6587\u6848\n   */\n  copyWriting?: Record<string, string>\n  /**\n   * \u81EA\u5B9A\u4E49\u66DD\u5149\u56DE\u8C03\u3002\u4F20\u5165\u540E\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 GA \u57CB\u70B9\u903B\u8F91\u3002\n   *\n   * @example\n   * <AiuiProvider\n   *   trackingData={{ pageGroup: 'Home Page' }}\n   *   onExposure={(params) => {\n   *     // \u4F7F\u7528\u5546\u6237\u81EA\u5DF1\u7684\u57CB\u70B9\u7CFB\u7EDF\u8BB0\u5F55\u66DD\u5149\u4E8B\u4EF6\n   *     ga.track('component_impression', params)\n   *   }}\n   * >\n   *   {children}\n   * </AiuiProvider>\n   */\n  onExposure?: OnExposureCallback\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n  trackingData: {},\n  locale: undefined,\n  copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n  const context = useContext(AiuiContext)\n  if (!context) {\n    throw new Error('useAiui must be used in <AiuiProvider>')\n  }\n  return context\n}\n\nconst AiuiProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & AiuiContextType) => {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const trackingDataRef = useRef(rest?.trackingData)\n  useEffect(() => {\n    trackingDataRef.current = rest?.trackingData\n  }, [rest?.trackingData])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n\n    const handleTrackClick = (_e: Event, el: Element) => {\n      const out: any = {}\n      if (!el || !el.attributes) return out\n      for (const attr of Array.from(el.attributes)) {\n        const name = (attr as any)?.name\n        if (name?.startsWith('data-headless-')) {\n          out[name] = el.getAttribute(name)\n        }\n      }\n      const sku = out?.['data-headless-sku']\n      const nameType = out?.['data-headless-type-name']?.split?.('#')\n      const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n      const navPosition = out?.['data-headless-nav-position']?.split?.('#')\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: trackingDataRef.current?.pageGroup || 'Home Page',\n          component_type: nameType?.[0] || '',\n          component_name: nameType?.[1] || '',\n          position: navPosition?.[1] || '',\n          navigation: navPosition?.[0] || '',\n          button_name: titleDesc?.[2] || '',\n          SKU: sku || '',\n          component_title: titleDesc?.[0] || '',\n          component_description: titleDesc?.[1] || '',\n        },\n      })\n    }\n    const observer = new MutationObserver(() => {\n      root.querySelectorAll('[data-headless-type-name]').forEach(el => {\n        if (!el.hasAttribute('data-headless-track-bound')) {\n          el.addEventListener('click', e => handleTrackClick(e, el))\n          el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n        }\n      })\n    })\n    observer.observe(root, { childList: true, subtree: true })\n    // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n    root.querySelectorAll('[data-headless-type-name]').forEach(el => {\n      if (!el.hasAttribute('data-headless-track-bound')) {\n        el.addEventListener('click', e => handleTrackClick(e, el))\n        el.setAttribute('data-headless-track-bound', 'true')\n      }\n    })\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <AiuiContext.Provider value={rest}>\n      <div ref={rootRef}>{children}</div>\n    </AiuiContext.Provider>\n  )\n}\n\nexport default AiuiProvider\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,EAAA,mBAAAC,IAAA,eAAAC,EAAAL,GAoKM,IAAAM,EAAA,6BApKNC,EAAwB,iCACxBC,EAAoE,iBAmF7D,MAAMN,KAAc,iBAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYE,EAAiB,IAAM,CAClC,MAAMK,KAAU,cAAWP,CAAW,EACtC,GAAI,CAACO,EACH,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOA,CACT,EAEMC,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,IAEwB,CACtB,MAAMC,KAAU,UAAuB,IAAI,EACrCC,KAAkB,UAAOF,GAAM,YAAY,EACjD,sBAAU,IAAM,CACdE,EAAgB,QAAUF,GAAM,YAClC,EAAG,CAACA,GAAM,YAAY,CAAC,KAEvB,aAAU,IAAM,CACd,MAAMG,EAAOF,EAAQ,QACrB,GAAI,CAACE,EAAM,OAEX,MAAMC,EAAmB,CAACC,EAAWC,IAAgB,CACnD,MAAMC,EAAW,CAAC,EAClB,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAAOC,EAClC,UAAWC,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAc,KACxBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,EAEpC,CACA,MAAMC,EAAMH,IAAM,mBAAmB,EAC/BI,EAAWJ,IAAM,yBAAyB,GAAG,QAAQ,GAAG,EACxDK,EAAYL,IAAM,iCAAiC,GAAG,QAAQ,GAAG,EACjEM,EAAcN,IAAM,4BAA4B,GAAG,QAAQ,GAAG,KACpE,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYL,EAAgB,SAAS,WAAa,YAClD,eAAgBS,IAAW,CAAC,GAAK,GACjC,eAAgBA,IAAW,CAAC,GAAK,GACjC,SAAUE,IAAc,CAAC,GAAK,GAC9B,WAAYA,IAAc,CAAC,GAAK,GAChC,YAAaD,IAAY,CAAC,GAAK,GAC/B,IAAKF,GAAO,GACZ,gBAAiBE,IAAY,CAAC,GAAK,GACnC,sBAAuBA,IAAY,CAAC,GAAK,EAC3C,CACF,CAAC,CACH,EACME,EAAW,IAAI,iBAAiB,IAAM,CAC1CX,EAAK,iBAAiB,2BAA2B,EAAE,QAAQG,GAAM,CAC1DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAASS,GAAKX,EAAiBW,EAAGT,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAQ,EAAS,QAAQX,EAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAEzDA,EAAK,iBAAiB,2BAA2B,EAAE,QAAQG,GAAM,CAC1DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAASS,GAAKX,EAAiBW,EAAGT,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EACM,IAAMQ,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,KAGH,OAACxB,EAAY,SAAZ,CAAqB,MAAOU,EAC3B,mBAAC,OAAI,IAAKC,EAAU,SAAAF,EAAS,EAC/B,CAEJ,EAEA,IAAOR,EAAQO",
-  "names": ["AiuiProvider_exports", "__export", "AiuiContext", "AiuiProvider_default", "useAiuiContext", "__toCommonJS", "import_jsx_runtime", "import_track", "import_react", "context", "AiuiProvider", "children", "rest", "rootRef", "trackingDataRef", "root", "handleTrackClick", "_e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "observer", "e"]
+  "sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect, useRef } from 'react'\nimport type { CurrencyDisplayType } from '../../types/props.js'\n\n/**\n * Exposure tracking parameters\n */\nexport interface ExposureParams {\n  componentType: string\n  componentName: string\n  componentTitle?: string\n  componentDescription?: string\n  navigation?: string\n  pageGroup?: string\n  position?: number\n}\n\n/**\n * Callback function for custom exposure handling\n */\nexport type OnExposureCallback = (params: ExposureParams) => void\n\ninterface AiuiContextType {\n  /**\n   * \u5168\u5C40\u57CB\u70B9\u6570\u636E\uFF0C\u81F3\u5C11\u5E94\u5305\u542B pageGroup \u5B57\u6BB5\u7528\u4E8E\u533A\u5206\u9875\u9762\uFF0C\u5176\u4ED6\u5B57\u6BB5\u53EF\u6839\u636E\u9700\u8981\u6DFB\u52A0\n   */\n  trackingData: Record<string, any>\n  /**\n   * \u5F53\u524D\u8BED\u8A00\u73AF\u5883\uFF0C\u9ED8\u8BA4\u4E3A\u6D4F\u89C8\u5668\u8BED\u8A00\n   */\n  locale?: string\n  /**\n   * \u5F53\u524D\u9875\u9762\u8DEF\u5F84\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u9875\u9762\uFF0C\u9ED8\u8BA4\u4E3A window.location.pathname\n   */\n  pathname?: string\n  /**\n   * \u5546\u6237\u81EA\u5B9A\u4E49\u7684\u5E97\u94FA\u57DF\u540D\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u5546\u6237\uFF0C\u9ED8\u8BA4\u4E3A\u7A7A\u5B57\u7B26\u4E32\n   */\n  storeDomain?: string\n  /**\n   * \u5F53\u524D\u9875\u9762\u7684 handle\uFF08slug\uFF09\uFF0C\u7528\u4E8E tracking \u57CB\u70B9\u533A\u5206\u9875\u9762\u8D44\u6E90\uFF0C\u7531\u6D88\u8D39\u65B9\u4F20\u5165\u3002\n   * \u4F8B\u5982\uFF1A<AiuiProvider pageHandle={page.handle} ...>\n   * ProductLottery\u3001Media Endorsement \u7B49\u7EC4\u4EF6\u53EF\u901A\u8FC7 useAiuiContext() \u8BFB\u53D6\u6B64\u5B57\u6BB5\u3002\n   */\n  pageHandle?: string\n  /**\n   * \u7528\u6237\u662F\u5426\u767B\u5F55\n   */\n  isLogin?: boolean\n\n  /**\n   * \u7528\u6237\u662F\u5426\u4E3APlus\u4F1A\u5458\n   */\n  isPlusMember?: boolean\n  /**\n   * \u8D27\u5E01\u4EE3\u7801\uFF0C\u9ED8\u8BA4\u4E3AUSD\n   */\n  currencyCode?: string\n  /**\n   * \u8D27\u5E01\u663E\u793A\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u4E3Asymbol\uFF08\u7B26\u53F7\uFF09\uFF0C\u53EF\u9009\u503C\u5305\u62EC\uFF1A'symbol'\uFF08\u7B26\u53F7\uFF0C\u5982$\uFF09\u3001'code'\uFF08\u8D27\u5E01\u4EE3\u7801\uFF0C\u5982USD\uFF09\u548C'name'\uFF08\u8D27\u5E01\u540D\u79F0\uFF0C\u5982\u7F8E\u5143\uFF09\u3002\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay for more details\n   */\n  currencyDisplay?: CurrencyDisplayType\n  /**\n   * \u6587\u6848\u914D\u7F6E\uFF0C\u5546\u6237\u53EF\u901A\u8FC7\u6B64\u5B57\u6BB5\u8986\u76D6\u9ED8\u8BA4\u6587\u6848\n   */\n  copyWriting?: Record<string, string>\n  /**\n   * \u81EA\u5B9A\u4E49\u66DD\u5149\u56DE\u8C03\u3002\u4F20\u5165\u540E\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 GA \u57CB\u70B9\u903B\u8F91\u3002\n   *\n   * @example\n   * <AiuiProvider\n   *   trackingData={{ pageGroup: 'Home Page' }}\n   *   onExposure={(params) => {\n   *     // \u4F7F\u7528\u5546\u6237\u81EA\u5DF1\u7684\u57CB\u70B9\u7CFB\u7EDF\u8BB0\u5F55\u66DD\u5149\u4E8B\u4EF6\n   *     ga.track('component_impression', params)\n   *   }}\n   * >\n   *   {children}\n   * </AiuiProvider>\n   */\n  onExposure?: OnExposureCallback\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n  trackingData: {},\n  locale: undefined,\n  copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n  const context = useContext(AiuiContext)\n  if (!context) {\n    throw new Error('useAiui must be used in <AiuiProvider>')\n  }\n  return context\n}\n\nconst AiuiProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & AiuiContextType) => {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const trackingDataRef = useRef(rest?.trackingData)\n  useEffect(() => {\n    trackingDataRef.current = rest?.trackingData\n  }, [rest?.trackingData])\n\n  useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n\n    const handleTrackClick = (_e: Event, el: Element) => {\n      const out: Record<string, string> = {}\n      if (!el || !el.attributes) return\n      for (const attr of Array.from(el.attributes)) {\n        const name = (attr as Attr)?.name\n        if (name?.startsWith('data-headless-')) {\n          out[name] = el.getAttribute(name) || ''\n        }\n      }\n      const sku = out['data-headless-sku']\n      const nameType = out['data-headless-type-name']?.split?.('#')\n      const titleDesc = out['data-headless-title-desc-button']?.split?.('#')\n      const navPosition = out['data-headless-nav-position']?.split?.('#')\n      const creativeId = out['data-headless-creative-id']\n\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: trackingDataRef.current?.pageGroup || 'Home Page',\n          component_type: nameType?.[0] || '',\n          component_name: nameType?.[1] || '',\n          position: navPosition?.[1] || '',\n          navigation: navPosition?.[0] || '',\n          button_name: titleDesc?.[2] || '',\n          SKU: sku || '',\n          component_title: titleDesc?.[0] || '',\n          component_description: titleDesc?.[1] || '',\n          creative_id: creativeId,\n        },\n      })\n    }\n\n    const observer = new MutationObserver(() => {\n      root.querySelectorAll('[data-headless-type-name]').forEach(el => {\n        if (!el.hasAttribute('data-headless-track-bound')) {\n          el.addEventListener('click', e => handleTrackClick(e, el))\n          el.setAttribute('data-headless-track-bound', 'true')\n        }\n      })\n    })\n    observer.observe(root, { childList: true, subtree: true })\n    // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n    root.querySelectorAll('[data-headless-type-name]').forEach(el => {\n      if (!el.hasAttribute('data-headless-track-bound')) {\n        el.addEventListener('click', e => handleTrackClick(e, el))\n        el.setAttribute('data-headless-track-bound', 'true')\n      }\n    })\n\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <AiuiContext.Provider value={rest}>\n      <div ref={rootRef}>{children}</div>\n    </AiuiContext.Provider>\n  )\n}\n\nexport default AiuiProvider\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,EAAA,mBAAAC,IAAA,eAAAC,EAAAL,GAyKM,IAAAM,EAAA,6BAzKNC,EAAwB,iCACxBC,EAAoE,iBAmF7D,MAAMN,KAAc,iBAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYE,EAAiB,IAAM,CAClC,MAAMK,KAAU,cAAWP,CAAW,EACtC,GAAI,CAACO,EACH,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOA,CACT,EAEMC,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,IAEwB,CACtB,MAAMC,KAAU,UAAuB,IAAI,EACrCC,KAAkB,UAAOF,GAAM,YAAY,EACjD,sBAAU,IAAM,CACdE,EAAgB,QAAUF,GAAM,YAClC,EAAG,CAACA,GAAM,YAAY,CAAC,KAEvB,aAAU,IAAM,CACd,MAAMG,EAAOF,EAAQ,QACrB,GAAI,CAACE,EAAM,OAEX,MAAMC,EAAmB,CAACC,EAAWC,IAAgB,CACnD,MAAMC,EAA8B,CAAC,EACrC,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAC3B,UAAWE,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAe,KACzBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,GAAK,GAEzC,CACA,MAAMC,EAAMH,EAAI,mBAAmB,EAC7BI,EAAWJ,EAAI,yBAAyB,GAAG,QAAQ,GAAG,EACtDK,EAAYL,EAAI,iCAAiC,GAAG,QAAQ,GAAG,EAC/DM,EAAcN,EAAI,4BAA4B,GAAG,QAAQ,GAAG,EAC5DO,EAAaP,EAAI,2BAA2B,KAElD,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYL,EAAgB,SAAS,WAAa,YAClD,eAAgBS,IAAW,CAAC,GAAK,GACjC,eAAgBA,IAAW,CAAC,GAAK,GACjC,SAAUE,IAAc,CAAC,GAAK,GAC9B,WAAYA,IAAc,CAAC,GAAK,GAChC,YAAaD,IAAY,CAAC,GAAK,GAC/B,IAAKF,GAAO,GACZ,gBAAiBE,IAAY,CAAC,GAAK,GACnC,sBAAuBA,IAAY,CAAC,GAAK,GACzC,YAAaE,CACf,CACF,CAAC,CACH,EAEMC,EAAW,IAAI,iBAAiB,IAAM,CAC1CZ,EAAK,iBAAiB,2BAA2B,EAAE,QAAQG,GAAM,CAC1DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAASU,GAAKZ,EAAiBY,EAAGV,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAS,EAAS,QAAQZ,EAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAEzDA,EAAK,iBAAiB,2BAA2B,EAAE,QAAQG,GAAM,CAC1DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAASU,GAAKZ,EAAiBY,EAAGV,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EAEM,IAAMS,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,KAGH,OAACzB,EAAY,SAAZ,CAAqB,MAAOU,EAC3B,mBAAC,OAAI,IAAKC,EAAU,SAAAF,EAAS,EAC/B,CAEJ,EAEA,IAAOR,EAAQO",
+  "names": ["AiuiProvider_exports", "__export", "AiuiContext", "AiuiProvider_default", "useAiuiContext", "__toCommonJS", "import_jsx_runtime", "import_track", "import_react", "context", "AiuiProvider", "children", "rest", "rootRef", "trackingDataRef", "root", "handleTrackClick", "_e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "creativeId", "observer", "e"]
 }

package/dist/cjs/biz-components/AnchorNavigation/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var B=Object.create;var d=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},R=(t,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of z(e))!P.call(t,l)&&l!==r&&d(t,l,{get:()=>e[l],enumerable:!(c=V(e,l))||c.enumerable});return t};var x=(t,e,r)=>(r=t!=null?B(M(t)):{},R(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),F=t=>R(d({},"__esModule",{value:!0}),t);var Y={};q(Y,{default:()=>K});module.exports=F(Y);var g=require("react/jsx-runtime"),i=x(require("react")),m=require("../../helpers/utils.js"),v=require("class-variance-authority"),w=x(require("./useAnchorPosition.js")),L=require("../../components/container.js"),S=require("../../shared/Styles.js");const j=(0,v.cva)("anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"tablet:justify-start",center:"tablet:justify-center",end:"tablet:justify-end"},size:{small:"gap-3",large:"gap-6"}},defaultVariants:{alignment:"start",size:"small"}}),U=(0,v.cva)("anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300",{variants:{size:{small:"py-3",large:"py-4"}},defaultVariants:{size:"small"}}),W=(0,v.cva)("!sticky top-0 !z-40 w-full",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),_={defaultColor:"text-[#4A4C56]",activeColor:"text-[#080A0F]",activeIndicatorColor:"after:bg-brand-0"},G={defaultColor:"text-[#8A8D92]",activeColor:"text-white",activeIndicatorColor:"after:bg-brand-0"},T=i.forwardRef(({classNames:t={},data:e,onItemClick:r,buttonStyle:c,className:l,...D},E)=>{const{alignment:H="start",theme:b="light",size:y="small"}=e,f=(0,w.default)(e.sectionIds?.map(o=>o.targetId)||[]),u=i.useRef(null),h=i.useRef(null),N=i.useRef([]);i.useImperativeHandle(E,()=>u.current);const p=b==="dark"?G:_,I={defaultColor:c?.defaultColor??p.defaultColor,activeColor:c?.activeColor??p.activeColor,activeIndicatorColor:c?.activeIndicatorColor??p.activeIndicatorColor},C=i.useCallback(o=>{const n=N.current[o];if(n&&h.current){const s=h.current,a=n,A=a.offsetLeft-s.offsetWidth/2+a.offsetWidth/2;typeof s.scrollTo=="function"&&s.scrollTo({left:A,behavior:"smooth"})}},[]);return i.useEffect(()=>{if(!f)return;const o=e.sectionIds?.findIndex(n=>n.targetId===f);o!==void 0&&o!==-1&&C(o)},[f,e.sectionIds,C]),(0,g.jsx)(L.Container,{ref:u,className:(0,m.cn)(W({theme:b}),t?.root),...D,children:(0,g.jsx)("div",{ref:h,className:(0,m.cn)(j({alignment:H,size:y}),"relative",t?.content),children:e.sectionIds?.map((o,n)=>{const s=f===o.targetId;return(0,g.jsx)("button",{ref:a=>{a&&(N.current[n]=a)},"aria-current":s?!0:void 0,onClick:()=>{if(C(n),r){r(o,n);return}const a=document.getElementById(o.targetId);if(a&&u.current){const A=u.current.offsetHeight,k=a.getBoundingClientRect().top+window.scrollY-A;window.scrollTo({top:k,behavior:"smooth"})}},className:(0,m.cn)(U({size:y}),s?[I.activeColor,I.activeIndicatorColor,"after:w-full after:opacity-100"]:I.defaultColor,t?.item),children:o.label},o.targetId)})})})});T.displayName="AnchorNavigation";var K=(0,S.withLayout)(T);
+"use strict";"use client";var M=Object.create;var u=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var n in e)u(t,n,{get:e[n],enumerable:!0})},R=(t,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of $(e))!F.call(t,i)&&i!==n&&u(t,i,{get:()=>e[i],enumerable:!(l=P(e,i))||l.enumerable});return t};var T=(t,e,n)=>(n=t!=null?M(q(t)):{},R(e||!t||!t.__esModule?u(n,"default",{value:t,enumerable:!0}):n,t)),j=t=>R(u({},"__esModule",{value:!0}),t);var O={};_(O,{default:()=>J});module.exports=j(O);var g=require("react/jsx-runtime"),c=T(require("react")),m=require("../../helpers/utils.js"),v=require("class-variance-authority"),E=T(require("./useAnchorPosition.js")),L=require("../../components/container.js"),S=require("../../shared/Styles.js"),H=require("../../hooks/useExposure.js");const x="copy",w="anchor_navigation",U=(0,v.cva)("anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"tablet:justify-start",center:"tablet:justify-center",end:"tablet:justify-end"},size:{small:"gap-3",large:"gap-6"}},defaultVariants:{alignment:"start",size:"small"}}),W=(0,v.cva)("anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300",{variants:{size:{small:"py-3",large:"py-4"}},defaultVariants:{size:"small"}}),G=(0,v.cva)("!sticky top-0 !z-40 w-full",{variants:{theme:{light:"!bg-white",dark:"!bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),K={defaultColor:"text-[#4A4C56]",activeColor:"text-[#080A0F]",activeIndicatorColor:"after:bg-brand-0"},Y={defaultColor:"text-[#8A8D92]",activeColor:"text-white",activeIndicatorColor:"after:bg-brand-0"},D=c.forwardRef(({classNames:t={},data:e,onItemClick:n,buttonStyle:l,className:i,...k},B)=>{const{alignment:V="start",theme:A="light",size:y="small"}=e,d=(0,E.default)(e.sectionIds?.map(o=>o.targetId)||[]),f=c.useRef(null),h=c.useRef(null),N=c.useRef([]);c.useImperativeHandle(B,()=>f.current),(0,H.useExposure)(f,{componentType:x,componentName:w,componentTitle:"",componentDescription:""});const p=A==="dark"?Y:K,I={defaultColor:l?.defaultColor??p.defaultColor,activeColor:l?.activeColor??p.activeColor,activeIndicatorColor:l?.activeIndicatorColor??p.activeIndicatorColor},b=c.useCallback(o=>{const a=N.current[o];if(a&&h.current){const s=h.current,r=a,C=r.offsetLeft-s.offsetWidth/2+r.offsetWidth/2;typeof s.scrollTo=="function"&&s.scrollTo({left:C,behavior:"smooth"})}},[]);return c.useEffect(()=>{if(!d)return;const o=e.sectionIds?.findIndex(a=>a.targetId===d);o!==void 0&&o!==-1&&b(o)},[d,e.sectionIds,b]),(0,g.jsx)(L.Container,{ref:f,className:(0,m.cn)(G({theme:A}),i,t?.root),...k,children:(0,g.jsx)("div",{ref:h,className:(0,m.cn)(U({alignment:V,size:y}),"relative",t?.content),children:e.sectionIds?.map((o,a)=>{const s=d===o.targetId;return(0,g.jsx)("button",{ref:r=>{r&&(N.current[a]=r)},"data-headless-type-name":`${x}#${w}`,"data-headless-title-desc-button":`##${o.label}`,"data-headless-nav-position":`${o.label}#${a+1}`,"aria-current":s?!0:void 0,onClick:()=>{if(b(a),n){n(o,a);return}const r=document.getElementById(o.targetId);if(r&&f.current){const C=f.current.offsetHeight,z=r.getBoundingClientRect().top+window.scrollY-C;window.scrollTo({top:z,behavior:"smooth"})}},className:(0,m.cn)(W({size:y}),s?[I.activeColor,I.activeIndicatorColor,"after:w-full after:opacity-100"]:I.defaultColor,t?.item),children:o.label},o.targetId)})})})});D.displayName="AnchorNavigation";var J=(0,S.withLayout)(D);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/AnchorNavigation/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AnchorNavigation/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\nimport { Container } from '../../components/container.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport interface AnchorNavigationSemanticName {\n  root: 'root'\n  content: 'content'\n  item: 'item'\n}\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n  'anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden',\n  {\n    variants: {\n      alignment: {\n        start: 'tablet:justify-start',\n        center: 'tablet:justify-center',\n        end: 'tablet:justify-end',\n      },\n      size: {\n        small: 'gap-3',\n        large: 'gap-6',\n      },\n    },\n    defaultVariants: {\n      alignment: 'start',\n      size: 'small',\n    },\n  }\n)\n\n/**\n * \u5BFC\u822A\u9879\u6837\u5F0F\u53D8\u4F53\uFF08\u4E0D\u542B\u989C\u8272\uFF0C\u989C\u8272\u7531 buttonStyle \u63A7\u5236\uFF09\n */\nconst anchorItemVariants = cva(\n  'anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300',\n  {\n    variants: {\n      size: {\n        small: 'py-3',\n        large: 'py-4',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva('!sticky top-0 !z-40 w-full', {\n  variants: {\n    theme: {\n      light: 'bg-white',\n      dark: 'bg-[#1E2024]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u5141\u8BB8\u6309 theme \u5206\u522B\u8986\u76D6\u9ED8\u8BA4\u8272\u3001\u6FC0\u6D3B\u6587\u5B57\u8272\u3001\u6FC0\u6D3B\u6307\u793A\u5668\u8272\n */\nexport interface AnchorButtonStyle {\n  /** \u9ED8\u8BA4\uFF08\u672A\u6FC0\u6D3B\uFF09\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-secondary' */\n  defaultColor?: string\n  /** \u6FC0\u6D3B\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-primary' */\n  activeColor?: string\n  /** \u6FC0\u6D3B\u6307\u793A\u5668\uFF08\u4E0B\u5212\u7EBF\uFF09\u80CC\u666F\u8272\uFF0CTailwind class\uFF0C\u5982 'after:bg-brand-0' */\n  activeIndicatorColor?: string\n}\n\n/**\n * \u951A\u70B9\u9879\u63A5\u53E3\n */\nexport interface AnchorSectionItem {\n  targetId: string\n  label: string\n}\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n  /** \u951A\u70B9\u5217\u8868 */\n  sectionIds: AnchorSectionItem[]\n  /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n  alignment?: 'start' | 'center' | 'end'\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: 'light' | 'dark'\n  /** \u5BFC\u822A\u5927\u5C0F */\n  size?: 'small' | 'large'\n}\n\nexport interface AnchorNavigationProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: AnchorNavigationData\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>\n  /** \u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684\u6EDA\u52A8\u884C\u4E3A */\n  onItemClick?: (item: AnchorSectionItem, index: number) => void\n  /**\n   * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u8986\u76D6 light/dark \u4E3B\u9898\u4E0B\u7684\u9ED8\u8BA4\u989C\u8272\u3002\n   * \u672A\u4F20\u65F6\u6309\u4E3B\u9898\u4F7F\u7528\u5185\u7F6E\u9ED8\u8BA4\u503C\u3002\n   *\n   * @example\n   * // \u81EA\u5B9A\u4E49\u989C\u8272\n   * buttonStyle={{ defaultColor: 'text-info-secondary', activeColor: 'text-info-primary', activeIndicatorColor: 'after:bg-brand-3' }}\n   */\n  buttonStyle?: AnchorButtonStyle\n}\n\n/** light \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst LIGHT_DEFAULTS: Required<AnchorButtonStyle> = {\n  defaultColor: 'text-[#4A4C56]',\n  activeColor: 'text-[#080A0F]',\n  activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/** dark \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst DARK_DEFAULTS: Required<AnchorButtonStyle> = {\n  defaultColor: 'text-[#8A8D92]',\n  activeColor: 'text-white',\n  activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n  ({ classNames = {}, data, onItemClick, buttonStyle, className, ...rest }, ref) => {\n    const { alignment = 'start', theme = 'light', size = 'small' } = data\n    const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n    const rootRef = React.useRef<HTMLDivElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n    // \u66B4\u9732 rootRef \u7ED9\u5916\u90E8 ref\n    React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement)\n\n    // \u5408\u5E76\u4E3B\u9898\u9ED8\u8BA4\u503C\u4E0E\u5916\u90E8\u4F20\u5165\u7684 buttonStyle\n    const themeDefaults = theme === 'dark' ? DARK_DEFAULTS : LIGHT_DEFAULTS\n    const resolvedButtonStyle: Required<AnchorButtonStyle> = {\n      defaultColor: buttonStyle?.defaultColor ?? themeDefaults.defaultColor,\n      activeColor: buttonStyle?.activeColor ?? themeDefaults.activeColor,\n      activeIndicatorColor: buttonStyle?.activeIndicatorColor ?? themeDefaults.activeIndicatorColor,\n    }\n\n    const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n      const curRef = sectionRefs.current[activeIdIndex]\n\n      if (curRef && containerRef.current) {\n        const container = containerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        // \u68C0\u67E5 scrollTo \u65B9\u6CD5\u662F\u5426\u5B58\u5728\uFF08\u517C\u5BB9\u6D4B\u8BD5\u73AF\u5883\u548C\u65E7\u6D4F\u89C8\u5668\uFF09\n        if (typeof container.scrollTo === 'function') {\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    }, [])\n\n    // \u5F53\u5C4F\u5E55\u6EDA\u52A8\u5BFC\u81F4 activeId \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5BFC\u822A\u680F\u5230\u5BF9\u5E94\u9879\n    React.useEffect(() => {\n      if (!activeId) return\n\n      const activeIndex = data.sectionIds?.findIndex(item => item.targetId === activeId)\n      if (activeIndex !== undefined && activeIndex !== -1) {\n        autoScrollToActiveItem(activeIndex)\n      }\n    }, [activeId, data.sectionIds, autoScrollToActiveItem])\n\n    return (\n      <Container ref={rootRef} className={cn(containerVariants({ theme }), classNames?.root)} {...rest}>\n        <div\n          ref={containerRef}\n          className={cn(anchorNavigationVariants({ alignment, size }), 'relative', classNames?.content)}\n        >\n          {data.sectionIds?.map((item, index) => {\n            const isActive = activeId === item.targetId\n\n            return (\n              <button\n                key={item.targetId}\n                ref={el => {\n                  if (el) {\n                    sectionRefs.current[index] = el\n                  }\n                }}\n                aria-current={isActive ? true : undefined}\n                onClick={() => {\n                  // \u9ED8\u8BA4\u884C\u4E3A\uFF1A\u6EDA\u52A8\u5230\u5BF9\u5E94\u951A\u70B9\n                  autoScrollToActiveItem(index)\n\n                  // \u5982\u679C\u6709\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\n                  if (onItemClick) {\n                    onItemClick(item, index)\n                    return\n                  }\n\n                  // \u624B\u52A8\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n                  const targetElement = document.getElementById(item.targetId)\n                  if (targetElement && rootRef.current) {\n                    const navHeight = rootRef.current.offsetHeight\n                    const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight\n\n                    window.scrollTo({\n                      top: targetPosition,\n                      behavior: 'smooth',\n                    })\n                  }\n                }}\n                className={cn(\n                  anchorItemVariants({ size }),\n                  isActive\n                    ? [\n                        resolvedButtonStyle.activeColor,\n                        resolvedButtonStyle.activeIndicatorColor,\n                        'after:w-full after:opacity-100',\n                      ]\n                    : resolvedButtonStyle.defaultColor,\n                  classNames?.item\n                )}\n              >\n                {item.label}\n              </button>\n            )\n          })}\n        </div>\n      </Container>\n    )\n  }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default withLayout(AnchorNavigation)\n"],
-  "mappings": "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",
-  "names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_class_variance_authority", "import_useAnchorPosition", "import_container", "import_Styles", "anchorNavigationVariants", "anchorItemVariants", "containerVariants", "LIGHT_DEFAULTS", "DARK_DEFAULTS", "AnchorNavigation", "classNames", "data", "onItemClick", "buttonStyle", "className", "rest", "ref", "alignment", "theme", "size", "activeId", "useAnchorPosition", "item", "rootRef", "containerRef", "sectionRefs", "themeDefaults", "resolvedButtonStyle", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "activeIndex", "index", "isActive", "el", "targetElement", "navHeight", "targetPosition"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\nimport { Container } from '../../components/container.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'copy'\nconst componentName = 'anchor_navigation'\n\nexport interface AnchorNavigationSemanticName {\n  root: 'root'\n  content: 'content'\n  item: 'item'\n}\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n  'anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden',\n  {\n    variants: {\n      alignment: {\n        start: 'tablet:justify-start',\n        center: 'tablet:justify-center',\n        end: 'tablet:justify-end',\n      },\n      size: {\n        small: 'gap-3',\n        large: 'gap-6',\n      },\n    },\n    defaultVariants: {\n      alignment: 'start',\n      size: 'small',\n    },\n  }\n)\n\n/**\n * \u5BFC\u822A\u9879\u6837\u5F0F\u53D8\u4F53\uFF08\u4E0D\u542B\u989C\u8272\uFF0C\u989C\u8272\u7531 buttonStyle \u63A7\u5236\uFF09\n */\nconst anchorItemVariants = cva(\n  'anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300',\n  {\n    variants: {\n      size: {\n        small: 'py-3',\n        large: 'py-4',\n      },\n    },\n    defaultVariants: {\n      size: 'small',\n    },\n  }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva('!sticky top-0 !z-40 w-full', {\n  variants: {\n    theme: {\n      light: '!bg-white',\n      dark: '!bg-[#1E2024]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u5141\u8BB8\u6309 theme \u5206\u522B\u8986\u76D6\u9ED8\u8BA4\u8272\u3001\u6FC0\u6D3B\u6587\u5B57\u8272\u3001\u6FC0\u6D3B\u6307\u793A\u5668\u8272\n */\nexport interface AnchorButtonStyle {\n  /** \u9ED8\u8BA4\uFF08\u672A\u6FC0\u6D3B\uFF09\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-secondary' */\n  defaultColor?: string\n  /** \u6FC0\u6D3B\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-primary' */\n  activeColor?: string\n  /** \u6FC0\u6D3B\u6307\u793A\u5668\uFF08\u4E0B\u5212\u7EBF\uFF09\u80CC\u666F\u8272\uFF0CTailwind class\uFF0C\u5982 'after:bg-brand-0' */\n  activeIndicatorColor?: string\n}\n\n/**\n * \u951A\u70B9\u9879\u63A5\u53E3\n */\nexport interface AnchorSectionItem {\n  targetId: string\n  label: string\n}\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n  /** \u951A\u70B9\u5217\u8868 */\n  sectionIds: AnchorSectionItem[]\n  /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n  alignment?: 'start' | 'center' | 'end'\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: 'light' | 'dark'\n  /** \u5BFC\u822A\u5927\u5C0F */\n  size?: 'small' | 'large'\n}\n\nexport interface AnchorNavigationProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: AnchorNavigationData\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>\n  /** \u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684\u6EDA\u52A8\u884C\u4E3A */\n  onItemClick?: (item: AnchorSectionItem, index: number) => void\n  /**\n   * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u8986\u76D6 light/dark \u4E3B\u9898\u4E0B\u7684\u9ED8\u8BA4\u989C\u8272\u3002\n   * \u672A\u4F20\u65F6\u6309\u4E3B\u9898\u4F7F\u7528\u5185\u7F6E\u9ED8\u8BA4\u503C\u3002\n   *\n   * @example\n   * // \u81EA\u5B9A\u4E49\u989C\u8272\n   * buttonStyle={{ defaultColor: 'text-info-secondary', activeColor: 'text-info-primary', activeIndicatorColor: 'after:bg-brand-3' }}\n   */\n  buttonStyle?: AnchorButtonStyle\n}\n\n/** light \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst LIGHT_DEFAULTS: Required<AnchorButtonStyle> = {\n  defaultColor: 'text-[#4A4C56]',\n  activeColor: 'text-[#080A0F]',\n  activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/** dark \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst DARK_DEFAULTS: Required<AnchorButtonStyle> = {\n  defaultColor: 'text-[#8A8D92]',\n  activeColor: 'text-white',\n  activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n  ({ classNames = {}, data, onItemClick, buttonStyle, className, ...rest }, ref) => {\n    const { alignment = 'start', theme = 'light', size = 'small' } = data\n    const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n    const rootRef = React.useRef<HTMLDivElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n    // \u66B4\u9732 rootRef \u7ED9\u5916\u90E8 ref\n    React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement)\n\n    // \u66DD\u5149\u57CB\u70B9\n    useExposure(rootRef, {\n      componentType,\n      componentName,\n      componentTitle: '',\n      componentDescription: '',\n    })\n\n    // \u5408\u5E76\u4E3B\u9898\u9ED8\u8BA4\u503C\u4E0E\u5916\u90E8\u4F20\u5165\u7684 buttonStyle\n    const themeDefaults = theme === 'dark' ? DARK_DEFAULTS : LIGHT_DEFAULTS\n    const resolvedButtonStyle: Required<AnchorButtonStyle> = {\n      defaultColor: buttonStyle?.defaultColor ?? themeDefaults.defaultColor,\n      activeColor: buttonStyle?.activeColor ?? themeDefaults.activeColor,\n      activeIndicatorColor: buttonStyle?.activeIndicatorColor ?? themeDefaults.activeIndicatorColor,\n    }\n\n    const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n      const curRef = sectionRefs.current[activeIdIndex]\n\n      if (curRef && containerRef.current) {\n        const container = containerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        // \u68C0\u67E5 scrollTo \u65B9\u6CD5\u662F\u5426\u5B58\u5728\uFF08\u517C\u5BB9\u6D4B\u8BD5\u73AF\u5883\u548C\u65E7\u6D4F\u89C8\u5668\uFF09\n        if (typeof container.scrollTo === 'function') {\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    }, [])\n\n    // \u5F53\u5C4F\u5E55\u6EDA\u52A8\u5BFC\u81F4 activeId \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5BFC\u822A\u680F\u5230\u5BF9\u5E94\u9879\n    React.useEffect(() => {\n      if (!activeId) return\n\n      const activeIndex = data.sectionIds?.findIndex(item => item.targetId === activeId)\n      if (activeIndex !== undefined && activeIndex !== -1) {\n        autoScrollToActiveItem(activeIndex)\n      }\n    }, [activeId, data.sectionIds, autoScrollToActiveItem])\n\n    return (\n      <Container ref={rootRef} className={cn(containerVariants({ theme }), className, classNames?.root)} {...rest}>\n        <div\n          ref={containerRef}\n          className={cn(anchorNavigationVariants({ alignment, size }), 'relative', classNames?.content)}\n        >\n          {data.sectionIds?.map((item, index) => {\n            const isActive = activeId === item.targetId\n\n            return (\n              <button\n                key={item.targetId}\n                ref={el => {\n                  if (el) {\n                    sectionRefs.current[index] = el\n                  }\n                }}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`##${item.label}`}\n                data-headless-nav-position={`${item.label}#${index + 1}`}\n                aria-current={isActive ? true : undefined}\n                onClick={() => {\n                  // \u9ED8\u8BA4\u884C\u4E3A\uFF1A\u6EDA\u52A8\u5230\u5BF9\u5E94\u951A\u70B9\n                  autoScrollToActiveItem(index)\n\n                  // \u5982\u679C\u6709\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\n                  if (onItemClick) {\n                    onItemClick(item, index)\n                    return\n                  }\n\n                  // \u624B\u52A8\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n                  const targetElement = document.getElementById(item.targetId)\n                  if (targetElement && rootRef.current) {\n                    const navHeight = rootRef.current.offsetHeight\n                    const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight\n\n                    window.scrollTo({\n                      top: targetPosition,\n                      behavior: 'smooth',\n                    })\n                  }\n                }}\n                className={cn(\n                  anchorItemVariants({ size }),\n                  isActive\n                    ? [\n                        resolvedButtonStyle.activeColor,\n                        resolvedButtonStyle.activeIndicatorColor,\n                        'after:w-full after:opacity-100',\n                      ]\n                    : resolvedButtonStyle.defaultColor,\n                  classNames?.item\n                )}\n              >\n                {item.label}\n              </button>\n            )\n          })}\n        </div>\n      </Container>\n    )\n  }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default withLayout(AnchorNavigation)\n"],
+  "mappings": "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",
+  "names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_class_variance_authority", "import_useAnchorPosition", "import_container", "import_Styles", "import_useExposure", "componentType", "componentName", "anchorNavigationVariants", "anchorItemVariants", "containerVariants", "LIGHT_DEFAULTS", "DARK_DEFAULTS", "AnchorNavigation", "classNames", "data", "onItemClick", "buttonStyle", "className", "rest", "ref", "alignment", "theme", "size", "activeId", "useAnchorPosition", "item", "rootRef", "containerRef", "sectionRefs", "themeDefaults", "resolvedButtonStyle", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "activeIndex", "index", "isActive", "el", "targetElement", "navHeight", "targetPosition"]
 }