@anker-in/headless-ui 1.3.52 → 1.3.54

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as u}from"react/jsx-runtime";import G,{useState as $,useEffect as O,useRef as S}from"react";import{useMediaQuery as U}from"react-responsive";import{withLayout as R}from"../../shared/Styles.js";import V from"../../components/picture.js";import I from"../../components/button.js";import{Heading as L}from"../../components/heading.js";import{VideoModal as E}from"../VideoModal/index.js";import{cn as w,getLocalizedPath as M}from"../../helpers/utils.js";import _ from"../SwiperBox/index.js";import{isVideo as C}from"../../shared/mimeType.js";import{useExposure as D}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{useAiuiContext as H}from"../AiuiProvider/index.js";const d="image",m="p1_banner",A=({data:h,configuration:t,jIndex:f})=>{const[N,B]=$(!1),y=U({query:"(max-width: 768px)"}),i=S(null),k=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};D(i,{componentType:d,componentName:m,position:f,componentTitle:h.title,componentDescription:h.description,navigation:t?.activeTab}),O(()=>{B(y)},[y]);const{theme:v="light",title:s,description:o,imageUrl:a,primaryButton:r,secondaryButton:n,imageMobileUrl:b,blockLink:c,video:l,youtubeId:p,isYouTube:g}=h,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return u("div",{className:w("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",k(),{"rounded-box":!0,"aiui-dark":v==="dark","h-[400px]":N},"text-info-primary"),ref:i,children:[c&&e("a",{className:"absolute inset-0 z-10",href:T(M(c||"",t?.locale||"us"),`${d}_${m}`),"data-headless-type-name":`${d}#${m}`,"data-headless-title-desc-button":`${s}#${o}`,"data-headless-nav-position":`${t?.activeTab}#${f}`,"aria-hidden":"true",tabIndex:-1}),u("div",{className:"absolute inset-0",children:[C(a?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:e("source",{src:a?.url,type:"video/mp4"})}):e(V,{source:a?.url,alt:a?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${a?.width}/${a?.height}`}}),C(b?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:e("source",{src:b?.url,type:"video/mp4"})}):e(V,{source:b?.url||a?.url,alt:b?.alt||a?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),u("div",{className:w("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":h?.width==="full"}),children:[u("div",{className:"flex flex-col gap-1",children:[e(L,{size:3,as:"h3",className:"item-title",html:s}),e(L,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:o})]}),u("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&u(I,{"aria-label":s??o,className:w(x,"link-left pointer-events-auto"),variant:"secondary",as:"a",href:T(M(n.link||"",t?.locale||"us"),`${d}_${m}`),"data-headless-type-name":`${d}#${m}`,"data-headless-title-desc-button":`${s}#${o}#${n?.text}`,"data-headless-nav-position":`${t?.activeTab}#${f}`,children:[n.text,e("span",{className:"sr-only",children:s??o})]}),r&&r.text&&e(I,{"aria-label":s??o,className:w(x,"link-right pointer-events-auto"),variant:"primary",as:"a",href:T(M(r.link||"",t?.locale||"us"),`${d}_${m}`),"data-headless-type-name":`${d}#${m}`,"data-headless-title-desc-button":`${s}#${o}#${r.text}`,"data-headless-nav-position":`${t?.activeTab}#${f}`,children:r.text})]})]})]}),e("div",{children:e("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(l?.url||p)&&e("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(l?.url||p,g)},className:"laptop:size-12  hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:v==="dark"?"black":"white",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z"})})})})})]})},z=G.forwardRef((h,t)=>{const{data:f,className:N,...B}=h,{shape:y,items:i=[]}=f,[k,v]=$(!1),[s,o]=$(""),[a,r]=$(""),{locale:n="us"}=H(),b=(l,p)=>{v(!0),p?r?.(l||""):o?.(l||"")},c=l=>{const p=i?.length,g=p>3,x=p>2,P=p>1;switch(!0){case l>=1440:case l>=1024:return g?3:p;case l>=768:return g||x?2.3:P?2:1;default:return P?1.2:1}};return u("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...B,className:w("graphicOverlayBlock text-info-primary ",N),children:[i&&i.length>0?e(_,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:i||[],configuration:{shape:y,num:i.length,locale:n,onVideoPlayBtnClick:b}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:c(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:c(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:c(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:c(1440)}}}):null,k&&e(E,{visible:k,youTubeId:a,videoUrl:s,onCloseModal:()=>v(!1)})]})});z.displayName="GraphicOverlayBlock";var se=R(z);export{se as default};
+import{jsx as e,jsxs as c}from"react/jsx-runtime";import U,{useState as x,useEffect as R,useRef as A}from"react";import{useMediaQuery as E}from"react-responsive";import{withLayout as _}from"../../shared/Styles.js";import C from"../../components/picture.js";import O from"../../components/button.js";import{Heading as I}from"../../components/heading.js";import{Tabs as D,TabsList as H,TabsTrigger as Y,TabsContent as Q}from"../../components/tabs.js";import{VideoModal as q}from"../VideoModal/index.js";import{cn as w,getLocalizedPath as M}from"../../helpers/utils.js";import Z from"../SwiperBox/index.js";import{isVideo as L}from"../../shared/mimeType.js";import{useExposure as j}from"../../hooks/useExposure.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";const b="image",v="p1_banner",J=({data:p,configuration:t,jIndex:d})=>{const[f,g]=x(!1),r=E({query:"(max-width: 768px)"}),n=A(null),m=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};j(n,{componentType:b,componentName:v,position:d,componentTitle:p.title,componentDescription:p.description,navigation:t?.activeTab}),R(()=>{g(r)},[r]);const{theme:o="light",title:l,description:a,imageUrl:i,primaryButton:u,secondaryButton:h,imageMobileUrl:y,blockLink:T,video:$,youtubeId:N,isYouTube:B}=p,k="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return c("div",{className:w("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",m(),{"rounded-box":!0,"aiui-dark":o==="dark","h-[400px]":f},"text-info-primary"),ref:n,children:[T&&e("a",{className:"absolute inset-0 z-10",href:P(M(T||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${l}#${a}`,"data-headless-nav-position":`${t?.activeTab}#${d}`,"aria-hidden":"true",tabIndex:-1}),c("div",{className:"absolute inset-0",children:[L(i?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:e("source",{src:i?.url,type:"video/mp4"})}):e(C,{source:i?.url,alt:i?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${i?.width}/${i?.height}`}}),L(y?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:e("source",{src:y?.url,type:"video/mp4"})}):e(C,{source:y?.url||i?.url,alt:y?.alt||i?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),c("div",{className:w("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":p?.width==="full"}),children:[c("div",{className:"flex flex-col gap-1",children:[e(I,{size:3,as:"h3",className:"item-title",html:l}),e(I,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]",html:a})]}),c("div",{className:"lg-desktop:gap-3 flex gap-2",children:[h&&h.text&&c(O,{"aria-label":l??a,className:w(k,"link-left pointer-events-auto"),variant:"secondary",as:"a",href:P(M(h.link||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${l}#${a}#${h?.text}`,"data-headless-nav-position":`${t?.activeTab}#${d}`,children:[h.text,e("span",{className:"sr-only",children:l??a})]}),u&&u.text&&e(O,{"aria-label":l??a,className:w(k,"link-right pointer-events-auto"),variant:"primary",as:"a",href:P(M(u.link||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${l}#${a}#${u.text}`,"data-headless-nav-position":`${t?.activeTab}#${d}`,children:u.text})]})]})]}),e("div",{children:e("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:($?.url||N)&&e("button",{onClick:()=>{t?.onVideoPlayBtnClick?.($?.url||N,B)},className:"laptop:size-12  hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:o==="dark"?"black":"white",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z"})})})})})]})},S=({items:p=[],shape:t,locale:d,activeTab:f,onVideoPlayBtnClick:g})=>{const r=n=>{const m=p?.length,o=m>3,l=m>2,a=m>1;switch(!0){case n>=1440:case n>=1024:return o?3:m;case n>=768:return o||l?2.3:a?2:1;default:return a?1.2:1}};return e(Z,{className:"!overflow-visible",id:"GraphicOverlaySwiper",data:{list:p||[],configuration:{shape:t,num:p.length,locale:d,activeTab:f,onVideoPlayBtnClick:g}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:r(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:r(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:r(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:r(1440)}}})},G=U.forwardRef((p,t)=>{const{data:d,className:f,...g}=p,{shape:r,items:n=[],isShowTab:m=!1,tabs:o,tabAlign:l="left"}=d,[a,i]=x(!1),[u,h]=x(""),[y,T]=x(""),[$,N]=x(o?.[0]?.id??""),{locale:B="us"}=F(),k=(s,z)=>{i(!0),z?T?.(s||""):h?.(s||"")},V=()=>e(q,{visible:a,youTubeId:y,videoUrl:u,onCloseModal:()=>i(!1)});return!m||!o||o.length===0?c("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...g,className:w("graphicOverlayBlock text-info-primary ",f),children:[n&&n.length>0?e(S,{items:n,shape:r,locale:B,onVideoPlayBtnClick:k}):null,a&&V()]}):c("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...g,className:w("graphicOverlayBlock text-info-primary ",f),children:[c(D,{value:$,onValueChange:N,align:l,children:[e("div",{className:"mb-6",children:e(H,{children:o.map(s=>e(Y,{value:s.id,children:s.label},s.id))})}),o.map(s=>e(Q,{value:s.id,children:s.items&&s.items.length>0?e(S,{items:s.items,shape:r,locale:B,activeTab:s.id,onVideoPlayBtnClick:k}):null},s.id))]}),a&&V()]})});G.displayName="GraphicOverlayBlock";var de=_(G);export{de as default};
 //# sourceMappingURL=GraphicOverlay.js.map

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-box': true,\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left pointer-events-auto')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right pointer-events-auto')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12  hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n            >\n              <svg\n                width=\"12\"\n                height=\"14\"\n                viewBox=\"0 0 12 14\"\n                fill={theme === 'dark' ? 'black' : 'white'}\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M12 7L0 14L0 0L12 7Z\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { data, className, ...rest } = props\n  const { shape, items = [] } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('graphicOverlayBlock text-info-primary ', className)}\n    >\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: {\n              shape: shape,\n              num: items.length,\n              locale,\n              onVideoPlayBtnClick: handleVideoPlayBtnClick,\n            },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "cn", "getLocalizedPath", "SwiperBox", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "GraphicOverlay", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "GraphicOverlay_default"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-box': true,\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left pointer-events-auto')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right pointer-events-auto')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12  hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n            >\n              <svg\n                width=\"12\"\n                height=\"14\"\n                viewBox=\"0 0 12 14\"\n                fill={theme === 'dark' ? 'black' : 'white'}\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M12 7L0 14L0 0L12 7Z\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlaySwiper = ({\n  items = [],\n  shape,\n  locale,\n  activeTab,\n  onVideoPlayBtnClick,\n}: {\n  items?: Item[]\n  shape?: string\n  locale: string\n  activeTab?: string\n  onVideoPlayBtnClick: (url: string, isYouTube: boolean) => void\n}) => {\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <SwiperBox\n      className=\"!overflow-visible\"\n      id={'GraphicOverlaySwiper'}\n      data={{\n        list: items || [],\n        configuration: {\n          shape: shape,\n          num: items.length,\n          locale,\n          activeTab,\n          onVideoPlayBtnClick,\n        },\n      }}\n      Slide={ItemBlock}\n      breakpoints={{\n        0: {\n          spaceBetween: 12,\n          freeMode: false,\n          slidesPerView: 1,\n        },\n        374: {\n          spaceBetween: 12,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(374),\n        },\n        768: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(768),\n        },\n        1024: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(1024),\n        },\n        1440: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(1440),\n        },\n      }}\n    />\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { data, className, ...rest } = props\n  const { shape, items = [], isShowTab = false, tabs, tabAlign = 'left' } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [activeTab, setActiveTab] = useState<string>(tabs?.[0]?.id ?? '')\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const renderModal = () => (\n    <VideoModal visible={visible} youTubeId={youTubeId} videoUrl={videoUrl} onCloseModal={() => setVisible(false)} />\n  )\n\n  if (!isShowTab || !tabs || tabs.length === 0) {\n    return (\n      <section\n        data-ui-component-id=\"GraphicOverlay\"\n        ref={ref}\n        {...rest}\n        className={cn('graphicOverlayBlock text-info-primary ', className)}\n      >\n        {items && items.length > 0 ? (\n          <GraphicOverlaySwiper\n            items={items}\n            shape={shape}\n            locale={locale}\n            onVideoPlayBtnClick={handleVideoPlayBtnClick}\n          />\n        ) : null}\n        {visible && renderModal()}\n      </section>\n    )\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('graphicOverlayBlock text-info-primary ', className)}\n    >\n      <Tabs value={activeTab} onValueChange={setActiveTab} align={tabAlign}>\n        <div className=\"mb-6\">\n          <TabsList>\n            {tabs.map(tab => (\n              <TabsTrigger key={tab.id} value={tab.id}>\n                {tab.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </div>\n        {tabs.map(tab => (\n          <TabsContent key={tab.id} value={tab.id}>\n            {tab.items && tab.items.length > 0 ? (\n              <GraphicOverlaySwiper\n                items={tab.items}\n                shape={shape}\n                locale={locale}\n                activeTab={tab.id}\n                onVideoPlayBtnClick={handleVideoPlayBtnClick}\n              />\n            ) : null}\n          </TabsContent>\n        ))}\n      </Tabs>\n      {visible && renderModal()}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "VideoModal", "cn", "getLocalizedPath", "SwiperBox", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "GraphicOverlaySwiper", "items", "shape", "locale", "activeTab", "onVideoPlayBtnClick", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "GraphicOverlay", "props", "data", "className", "rest", "isShowTab", "tabs", "tabAlign", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "setActiveTab", "handleVideoPlayBtnClick", "url", "renderModal", "tab", "GraphicOverlay_default"]
 }

package/dist/esm/biz-components/GraphicOverlay/types.d.ts

@@ -1,4 +1,4 @@
-import type { Media, Shape, Theme } from '../../types/props';
+import type { Align, Media, Shape, Theme } from '../../types/props';
 export type Item = {
     theme?: Theme;
     title: string;
@@ -22,10 +22,23 @@ export type Item = {
     youtubeId?: string;
     isYouTube?: boolean;
 };
+export type GraphicOverlayTab = {
+    id: string;
+    label: string;
+    items: ({
+        width?: 'full' | 'half' | 'one-third';
+    } & Item)[];
+};
 export type GraphicOverlayProps = React.HTMLAttributes<HTMLElement> & {
     data: {
         shape?: Shape;
-        items: ({
+        /** 是否启用 Tab 切换，默认 false */
+        isShowTab?: boolean;
+        /** Tab 分组 - isShowTab 为 true 时生效 */
+        tabs?: GraphicOverlayTab[];
+        /** Tab 对齐方式，默认 left */
+        tabAlign?: Align;
+        items?: ({
             width?: 'full' | 'half' | 'one-third';
         } & Item)[];
     };

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js

@@ -2,5 +2,5 @@ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Text as g,Picture as w,
         .dialog-close-icon {
           color: ${i?.closeColor||"#1D1D1F"};
         }
-      `}),r(D,{value:i?.title,className:"w-full overflow-hidden",children:[l?.map(t=>e(f,{value:t.title,children:e(w,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t?.title||"",imgClassName:"object-cover h-full"})},t.title)),r("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[e("div",{ref:n,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:e("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:e(T,{className:"flex w-max p-1",children:l?.map((t,s)=>e(E,{ref:c=>{c&&(d.current[s]=c)},className:A("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===i?.title&&"bg-white"),onClick:()=>{a(t),p(t),o(t?.title)},value:t.title,children:e(g,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},s+t.title))})})}),e("div",{className:"laptop-md:px-6 mt-4 px-4",children:l?.map((t,s)=>e(f,{value:t.title,className:"laptop-md:text-[18px] text-[14px] font-bold",children:t.description},s+t.title))})]})]})]})};var q=R(I);export{q as default};
+      `}),r(D,{value:i?.title,className:"w-full overflow-hidden",children:[l?.map(t=>e(f,{value:t.title,children:e(w,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t?.title||"",imgClassName:"object-cover h-full"})},t.title)),r("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[e("div",{ref:n,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:e("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:e(T,{className:"flex w-max p-1",children:l?.map((t,s)=>e(E,{ref:c=>{c&&(d.current[s]=c)},className:A("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===i?.title&&"bg-white"),onClick:()=>{a(t),p(t),o(t?.title)},value:t.title,children:e(g,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},s+t.title))})})}),e("div",{className:"laptop-md:px-6 mt-4 px-4",children:l?.map((t,s)=>e(f,{value:t.title,children:e(g,{html:t.description,className:"laptop-md:text-[18px] text-[14px] font-bold"})},s+t.title))})]})]})]})};var q=R(I);export{q as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useComponentData('ProductHighlight') ?? {}\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  if (!Reflect.ownKeys(productHighlightData).length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text\n            className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n            html={productHighlightData?.title}\n          />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          {productHighlightData?.view && (\n            <DialogTrigger asChild>\n              <Button\n                variant=\"link\"\n                className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n                onClick={() => gaTrackEvent()}\n              >\n                {productHighlightData?.view}\n              </Button>\n            </DialogTrigger>\n          )}\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            activeKspItem={activeKspItem}\n            setActiveKspItem={setActiveKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n            <Text\n              size={3}\n              onClick={() => {\n                if (!item?.img) return\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n              html={item?.title}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  activeKspItem,\n  setActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  activeKspItem: any\n  setActiveKspItem: (_activeKspItem: any) => void\n  gaTrackEvent: (_buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [ksp]\n  )\n\n  useEffect(() => {\n    if (!activeKspItem) return\n    // setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [autoScrollToActiveItem, activeKspItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor || '#1D1D1F'};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"laptop-md:h-[480px] h-[304px] w-full\"\n              alt={item?.title || ''}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"laptop-md:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp?.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"laptop-md:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"laptop-md:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useComponentData('ProductHighlight') ?? {}\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  if (!Reflect.ownKeys(productHighlightData).length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text\n            className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n            html={productHighlightData?.title}\n          />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          {productHighlightData?.view && (\n            <DialogTrigger asChild>\n              <Button\n                variant=\"link\"\n                className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n                onClick={() => gaTrackEvent()}\n              >\n                {productHighlightData?.view}\n              </Button>\n            </DialogTrigger>\n          )}\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            activeKspItem={activeKspItem}\n            setActiveKspItem={setActiveKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n            <Text\n              size={3}\n              onClick={() => {\n                if (!item?.img) return\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n              html={item?.title}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  activeKspItem,\n  setActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  activeKspItem: any\n  setActiveKspItem: (_activeKspItem: any) => void\n  gaTrackEvent: (_buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [ksp]\n  )\n\n  useEffect(() => {\n    if (!activeKspItem) return\n    // setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [autoScrollToActiveItem, activeKspItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor || '#1D1D1F'};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"laptop-md:h-[480px] h-[304px] w-full\"\n              alt={item?.title || ''}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"laptop-md:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp?.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"laptop-md:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n              >\n                <Text html={item.description} className=\"laptop-md:text-[18px] text-[14px] font-bold\" />\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "Text", "Picture", "Button", "Dialog", "DialogContent", "DialogTrigger", "Content", "List", "Root", "Trigger", "useCallback", "useEffect", "useRef", "useState", "cn", "useBizProductContext", "useComponentData", "withLayout", "gaTrack", "ProductHighlight", "variant", "open", "setOpen", "productHighlightData", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "item", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "ProductHighlight_default"]
 }

package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js

@@ -1,11 +1,11 @@
-"use client";import{Fragment as G,jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as M,useRef as f,useEffect as j,forwardRef as R,useImperativeHandle as H}from"react";import{useMediaQuery as C}from"react-responsive";import{cn as n}from"../../helpers/utils.js";import{withLayout as V}from"../../shared/Styles.js";import{Heading as h,Text as w,Picture as b}from"../../components/index.js";import{useExposure as S}from"../../hooks/useExposure.js";import{Swiper as _,SwiperSlide as q}from"swiper/react";import{Autoplay as $}from"swiper/modules";import"swiper/css";const A="media",D="media_scene_switcher",v=3e3,O=({data:t,configuration:c,theme:o})=>{const d=f(null),i=c?.isActive||!1;return S(d,{componentType:A,componentName:D,componentTitle:t?.title,position:(c?.index??0)+1}),l("div",{ref:d,className:n("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","relative text-[#6D6D6F]",i?"opacity-100":"opacity-60",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&o==="light"}),onClick:()=>c?.onItemClick?.(c?.index??0),children:[l("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[l("div",{children:[e("div",{className:"media-scene-switcher-item-title flex-1",children:e(h,{as:"h6",size:2,html:t?.title})}),t?.description&&i&&e(w,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold",html:t.description})]}),e("div",{className:n("media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",o==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":o==="dark"&&i}),children:e(h,{as:"h6",size:2,html:t?.tag})})]}),e("div",{className:n("media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${v}ms ease-out`:"none"}})]})},Q=({data:t,configuration:c,theme:o})=>{const d=f(null),i=c?.isActive||!1,m=C({query:"(max-width: 768px)"});S(d,{componentType:A,componentName:D,componentTitle:t?.title,position:(c?.index??0)+1});const r=m&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,p=m&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,g=p||t?.videoUrl?.thumbnailURL||"";return l("div",{ref:d,className:n("media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] max-w-full flex-col overflow-hidden",{"aiui-dark":o==="dark"}),children:[e("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:r?e("video",{src:r,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:g,className:"size-full object-cover"}):p?e(b,{className:"size-full",imgClassName:"size-full object-cover",source:p,alt:t?.title||""}):null}),l("div",{className:n("media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&o==="light"}),children:[l("div",{children:[e("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:e(h,{as:"h6",size:2,html:t?.title})}),t?.description&&i&&e(w,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-3 text-sm font-bold",html:t.description})]}),e("div",{className:n("media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",o==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":o==="dark"&&i}),children:e(h,{as:"h6",size:1,html:t?.tag})})]}),e("div",{className:n("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${v}ms ease-out`:"none"}})]})},F=R(({className:t="",data:c,id:o},d)=>{const{title:i,subtitle:m,items:r=[],theme:p="light",layout:g,titleIcon:x}=c||{},[N,k]=M(0),[T,B]=M(0),y=f(null),u=f(0),z=C({query:"(max-width: 1023px)"});H(d,()=>y.current),S(y,{componentType:A,componentName:D,componentTitle:i}),j(()=>{if(!(z||r.length===0))return u.current=window.setInterval(()=>{k(s=>(s+1)%r.length)},v),()=>{u.current&&window.clearInterval(u.current)}},[z,r.length]);const P=s=>{k(s),u.current&&window.clearInterval(u.current),u.current=window.setInterval(()=>{k(a=>(a+1)%r.length)},v)},I=r[N],J=I?.videoUrl?.url,W=I?.imageUrl?.url||I?.videoUrl?.thumbnailURL||"";return l(G,{children:[e("style",{children:`
-          @keyframes progress-bar {
-            from {
-              transform: translate3d(-100%, 0, 0);
-            }
-            to {
-              transform: translate3d(0, 0, 0);
-            }
-          }
-        `}),l("section",{id:o,ref:y,className:n("media-scene-switcher text-info-primary w-full",{"aiui-dark":p==="dark"},t),children:[l("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[e("div",{className:n("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":g==="right"}),children:r.map((s,a)=>{const E=s?.videoUrl?.url,U=s?.imageUrl?.url,L=U||s?.videoUrl?.thumbnailURL||"";return e("div",{className:n("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":a===N}),children:E?e("video",{src:E,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:L,className:"size-full object-cover"}):U?e(b,{className:"size-full",imgClassName:"size-full object-cover",source:U,alt:s?.title||""}):null},s.id||a)})}),l("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[l("div",{className:"media-scene-switcher-header flex flex-col",children:[l("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&e(h,{as:"h3",html:i,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),x&&e(b,{source:x.url,alt:x.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),m&&e(w,{as:"span",size:4,html:m,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),e("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:r.map((s,a)=>e(O,{data:s,configuration:{index:a,isActive:a===N,onItemClick:P},theme:p},s.id||a))})]})]}),l("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[l("div",{className:"media-scene-switcher-mobile-header",children:[l("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&e(h,{as:"h2",html:i,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),x&&e(b,{source:x.url,alt:x.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),m&&e(w,{as:"span",size:4,html:m,className:"media-scene-switcher-subtitle text-[14px]"})]}),e("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:e(_,{onSlideChange:s=>B(s.realIndex),initialSlide:0,modules:[$],loop:r.length>1,autoplay:r.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:r.map((s,a)=>e(q,{className:"!h-auto !w-[296px] max-w-full",children:e(Q,{data:s,configuration:{index:a,isActive:a===T},theme:p})},s.id||a))})})]})]})]})});F.displayName="MediaSceneSwitcher";var ae=V(F,{style:"overflow: hidden;"});export{ae as default};
+"use client";import{Fragment as H,jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as U,useRef as N,useEffect as q,forwardRef as P,useImperativeHandle as R}from"react";import{useMediaQuery as B}from"react-responsive";import{cn as m}from"../../helpers/utils.js";import{withLayout as O}from"../../shared/Styles.js";import{Heading as w,Text as y,Picture as S,Tabs as $,TabsList as G,TabsTrigger as K,TabsContent as Q}from"../../components/index.js";import{useExposure as M}from"../../hooks/useExposure.js";import{Swiper as Y,SwiperSlide as J}from"swiper/react";import{Autoplay as W}from"swiper/modules";import"swiper/css";const A="media",E="media_scene_switcher",k=3e3,X=({data:t,configuration:a,theme:d})=>{const p=N(null),r=a?.isActive||!1;return M(p,{componentType:A,componentName:E,componentTitle:t?.title,position:(a?.index??0)+1}),l("div",{ref:p,className:m("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","relative text-[#6D6D6F]",r?"opacity-100":"opacity-60",{"bg-[#1D1D1F] text-white":r,"bg-[#EAEAEC] text-[#1D1D1F]":r&&d==="light"}),onClick:()=>a?.onItemClick?.(a?.index??0),children:[l("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[l("div",{children:[e("div",{className:"media-scene-switcher-item-title flex-1",children:e(w,{as:"h6",size:2,html:t?.title})}),t?.description&&r&&e(y,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold",html:t.description})]}),e("div",{className:m("media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",d==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":d==="dark"&&r}),children:e(w,{as:"h6",size:2,html:t?.tag})})]}),e("div",{className:m("media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full",{"media-scene-switcher-progress-active":r}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:r?`progress-bar ${k}ms ease-out`:"none"}})]})},Z=({data:t,configuration:a,theme:d})=>{const p=N(null),r=a?.isActive||!1,o=B({query:"(max-width: 768px)"});M(p,{componentType:A,componentName:E,componentTitle:t?.title,position:(a?.index??0)+1});const u=o&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,i=o&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,v=i||t?.videoUrl?.thumbnailURL||"";return l("div",{ref:p,className:m("media-scene-switcher-mobile-item rounded-box flex max-w-full flex-col overflow-hidden",{"aiui-dark":d==="dark"}),children:[e("div",{className:"media-scene-switcher-mobile-media aspect-w-[296] aspect-h-[256] relative w-full shrink-0 overflow-hidden",children:u?e("video",{src:u,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:v,className:"size-full object-cover"}):i?e(S,{className:"size-full",imgClassName:"size-full object-cover",source:i,alt:t?.title||""}):null}),l("div",{className:m("media-scene-switcher-mobile-bottom bg-container-primary text-info-primary flex flex-1 items-start justify-between gap-[8px] p-[16px]"),children:[l("div",{children:[e("div",{className:"media-scene-switcher-mobile-title line-clamp-3",children:e(w,{as:"h6",size:2,html:t?.title})}),t?.description&&e(y,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-2 text-sm font-bold",html:t.description})]}),e("div",{className:m("media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",d==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":d==="dark"&&r}),children:e(w,{as:"h6",size:1,html:t?.tag})})]}),e("div",{className:m("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":r}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:r?`progress-bar ${k}ms ease-out`:"none"}})]})},D=P(({sectionData:t,id:a,className:d="",tabId:p},r)=>{const{title:o,subtitle:u,items:i=[],theme:v="light",layout:f,titleIcon:h}=t,[g,x]=U(0),[n,j]=U(0),z=N(null),b=N(0),C=B({query:"(max-width: 1023px)"});R(r,()=>z.current),q(()=>{if(!(C||i.length===0))return b.current=window.setInterval(()=>{x(s=>(s+1)%i.length)},k),()=>{b.current&&window.clearInterval(b.current)}},[C,i.length]);const V=s=>{x(s),b.current&&window.clearInterval(b.current),b.current=window.setInterval(()=>{x(c=>(c+1)%i.length)},k)},I=i[g],ee=I?.videoUrl?.url,ie=I?.imageUrl?.url||I?.videoUrl?.thumbnailURL||"";return l("section",{id:a,ref:z,className:m("media-scene-switcher text-info-primary w-full",{"aiui-dark":v==="dark"},d),children:[l("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[e("div",{className:m("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":f==="right"}),children:i.map((s,c)=>{const L=s?.videoUrl?.url,T=s?.imageUrl?.url,_=T||s?.videoUrl?.thumbnailURL||"";return e("div",{className:m("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":c===g}),children:L?e("video",{src:L,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:_,className:"size-full object-cover"}):T?e(S,{className:"size-full",imgClassName:"size-full object-cover",source:T,alt:s?.title||""}):null},s.id||c)})}),l("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[l("div",{className:"media-scene-switcher-header flex flex-col",children:[l("div",{className:"desktop:gap-2 flex items-center gap-1",children:[o&&e(w,{as:"h3",html:o,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),h&&e(S,{source:h.url,alt:h.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),u&&e(y,{as:"span",size:4,html:u,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),e("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:i.map((s,c)=>e(X,{data:s,configuration:{index:c,isActive:c===g,onItemClick:V},theme:v},s.id||c))})]})]}),l("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[l("div",{className:"media-scene-switcher-mobile-header",children:[l("div",{className:"desktop:gap-2 flex items-center gap-1",children:[o&&e(w,{as:"h2",html:o,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),h&&e(S,{source:h.url,alt:h.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),u&&e(y,{as:"span",size:4,html:u,className:"media-scene-switcher-subtitle text-[14px]"})]}),e("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:e(Y,{onSlideChange:s=>j(s.realIndex),initialSlide:0,modules:[W],loop:i.length>1,autoplay:i.length>1?{delay:k,disableOnInteraction:!1}:!1,spaceBetween:12,breakpoints:{0:{slidesPerView:1},374:{slidesPerView:1.2},768:{slidesPerView:2.3}},watchSlidesProgress:!0,className:"w-full !overflow-visible",children:i.map((s,c)=>e(J,{className:"!h-auto max-w-full",children:e(Z,{data:s,configuration:{index:c,isActive:c===n},theme:v})},s.id||c))},p)})]})]})});D.displayName="SceneSection";const F=P(({className:t="",data:a,id:d},p)=>{const r=a?.isShowTab??!1,o=a?.tabs,u=a?.tabAlign??"left",[i,v]=U(o?.[0]?.id??""),f=N(null);R(p,()=>f.current);const g=o?.find(n=>n.id===i)??a;M(f,{componentType:A,componentName:E,componentTitle:g?.title});const x=`
+    @keyframes progress-bar {
+      from {
+        transform: translate3d(-100%, 0, 0);
+      }
+      to {
+        transform: translate3d(0, 0, 0);
+      }
+    }
+  `;return!r||!o||o.length===0?l(H,{children:[e("style",{children:x}),e(D,{ref:f,sectionData:a,id:d,className:t})]}):l(H,{children:[e("style",{children:x}),e("div",{ref:f,children:l($,{value:i,onValueChange:v,align:u,children:[e("div",{className:"media-scene-switcher-tabs mb-6",children:e(G,{children:o.map(n=>e(K,{value:n.id,children:n.label},n.id))})}),o.map(n=>e(Q,{value:n.id,children:e(D,{sectionData:n,className:t,tabId:n.id})},n.id))]})})]})});F.displayName="MediaSceneSwitcher";var pe=O(F,{style:"overflow: hidden;"});export{pe as default};
 //# sourceMappingURL=MediaSceneSwitcher.js.map

package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n  data: MediaSceneSwitcherItem\n  configuration?: {\n    index: number\n    isActive?: boolean\n    onItemClick?: (index: number) => void\n  }\n  theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n        'relative text-[#6D6D6F]',\n        isActive ? 'opacity-100' : 'opacity-60',\n        {\n          'bg-[#1D1D1F] text-white': isActive,\n          'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n        }\n      )}\n      onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n    >\n      <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n        <div>\n          <div className=\"media-scene-switcher-item-title flex-1\">\n            <Heading as=\"h6\" size={2} html={data?.title} />\n          </div>\n          {data?.description && isActive && (\n            <Text\n              size={2}\n              className=\"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold\"\n              html={data.description}\n            />\n          )}\n        </div>\n\n        <div\n          className={cn(\n            'media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={2} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n  const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n  const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] max-w-full flex-col overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n        {videoUrl ? (\n          <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n        ) : imageUrl ? (\n          <Picture\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            source={imageUrl}\n            alt={data?.title || ''}\n          />\n        ) : null}\n      </div>\n      <div\n        className={cn(\n          'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n          'text-[#6D6D6F]',\n          {\n            'bg-[#1D1D1F] text-white': isActive,\n            'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n          }\n        )}\n      >\n        <div>\n          <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n            <Heading as=\"h6\" size={2} html={data?.title} />\n          </div>\n          {data?.description && isActive && (\n            <Text\n              size={2}\n              className=\"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-3 text-sm font-bold\"\n              html={data.description}\n            />\n          )}\n        </div>\n        <div\n          className={cn(\n            'media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={1} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(({ className = '', data, id }, ref) => {\n  const { title, subtitle, items = [], theme = 'light', layout, titleIcon } = data || {}\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const intervalRef = useRef<number>(0)\n  const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  // Auto-play functionality for desktop\n  useEffect(() => {\n    if (isMobile || items.length === 0) return\n\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n\n    return () => {\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current)\n      }\n    }\n  }, [isMobile, items.length])\n\n  const handleItemClick = (index: number) => {\n    setCurrentIndex(index)\n    if (intervalRef.current) {\n      window.clearInterval(intervalRef.current)\n    }\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n  }\n\n  const currentItem = items[currentIndex]\n  const videoUrl = currentItem?.videoUrl?.url\n  const imageUrl = currentItem?.imageUrl?.url\n  const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <>\n      <style>{`\n          @keyframes progress-bar {\n            from {\n              transform: translate3d(-100%, 0, 0);\n            }\n            to {\n              transform: translate3d(0, 0, 0);\n            }\n          }\n        `}</style>\n      <section\n        id={id}\n        ref={innerRef}\n        className={cn(\n          'media-scene-switcher text-info-primary w-full',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className\n        )}\n      >\n        {/* Desktop Layout */}\n        <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n          <div\n            className={cn(\n              'media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden',\n              {\n                'order-1': layout === 'right',\n              }\n            )}\n          >\n            {items.map((item, index) => {\n              const itemVideoUrl = item?.videoUrl?.url\n              const itemImageUrl = item?.imageUrl?.url\n              const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n              return (\n                <div\n                  key={item.id || index}\n                  className={cn(\n                    'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n                    {\n                      'inline-block': index === currentIndex,\n                    }\n                  )}\n                >\n                  {itemVideoUrl ? (\n                    <video\n                      src={itemVideoUrl}\n                      playsInline\n                      autoPlay\n                      loop\n                      muted\n                      poster={itemPosterUrl}\n                      className=\"size-full object-cover\"\n                    />\n                  ) : itemImageUrl ? (\n                    <Picture\n                      className=\"size-full\"\n                      imgClassName=\"size-full object-cover\"\n                      source={itemImageUrl}\n                      alt={item?.title || ''}\n                    />\n                  ) : null}\n                </div>\n              )\n            })}\n          </div>\n\n          <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n            <div className=\"media-scene-switcher-header flex flex-col\">\n              <div className=\"desktop:gap-2 flex items-center gap-1\">\n                {title && (\n                  <Heading\n                    as=\"h3\"\n                    html={title}\n                    size={4}\n                    className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n                  />\n                )}\n                {titleIcon && (\n                  <Picture\n                    source={titleIcon.url}\n                    alt={titleIcon.alt || 'title icon'}\n                    className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                    imgClassName=\"!w-auto h-full\"\n                  />\n                )}\n              </div>\n\n              {subtitle && (\n                <Text\n                  as=\"span\"\n                  size={4}\n                  html={subtitle}\n                  className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]\"\n                />\n              )}\n            </div>\n\n            <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n              {items.map((item, index) => (\n                <DesktopItem\n                  key={item.id || index}\n                  data={item}\n                  configuration={{\n                    index,\n                    isActive: index === currentIndex,\n                    onItemClick: handleItemClick,\n                  }}\n                  theme={theme}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Mobile Layout */}\n        <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n          <div className=\"media-scene-switcher-mobile-header\">\n            <div className=\"desktop:gap-2 flex items-center gap-1\">\n              {title && (\n                <Heading\n                  as=\"h2\"\n                  html={title}\n                  size={2}\n                  className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]\"\n                />\n              )}\n              {titleIcon && (\n                <Picture\n                  source={titleIcon.url}\n                  alt={titleIcon.alt || 'title icon'}\n                  className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                  imgClassName=\"!w-auto h-full\"\n                />\n              )}\n            </div>\n            {subtitle && (\n              <Text as=\"span\" size={4} html={subtitle} className=\"media-scene-switcher-subtitle text-[14px]\" />\n            )}\n          </div>\n\n          <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n            <Swiper\n              onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n              initialSlide={0}\n              modules={[Autoplay]}\n              loop={items.length > 1}\n              autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n              spaceBetween={12}\n              slidesPerView=\"auto\"\n              watchSlidesProgress={true}\n              className=\"w-full !overflow-visible\"\n            >\n              {items.map((item, index) => (\n                <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px] max-w-full\">\n                  <MobileItem\n                    data={item}\n                    configuration={{\n                      index,\n                      isActive: index === activeIndex,\n                    }}\n                    theme={theme}\n                  />\n                </SwiperSlide>\n              ))}\n            </Swiper>\n          </div>\n        </div>\n      </section>\n    </>\n  )\n})\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher, { style: 'overflow: hidden;' })\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "useMediaQuery", "cn", "withLayout", "Heading", "Text", "Picture", "useExposure", "Swiper", "SwiperSlide", "Autoplay", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "title", "subtitle", "items", "layout", "titleIcon", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper", "MediaSceneSwitcher_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture, Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme, Media } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n  data: MediaSceneSwitcherItem\n  configuration?: {\n    index: number\n    isActive?: boolean\n    onItemClick?: (index: number) => void\n  }\n  theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n        'relative text-[#6D6D6F]',\n        isActive ? 'opacity-100' : 'opacity-60',\n        {\n          'bg-[#1D1D1F] text-white': isActive,\n          'bg-[#EAEAEC] text-[#1D1D1F]': isActive && theme === 'light',\n        }\n      )}\n      onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n    >\n      <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n        <div>\n          <div className=\"media-scene-switcher-item-title flex-1\">\n            <Heading as=\"h6\" size={2} html={data?.title} />\n          </div>\n          {data?.description && isActive && (\n            <Text\n              size={2}\n              className=\"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold\"\n              html={data.description}\n            />\n          )}\n        </div>\n\n        <div\n          className={cn(\n            'media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={2} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n  const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n  const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <div\n      ref={ref}\n      className={cn('media-scene-switcher-mobile-item rounded-box flex max-w-full flex-col overflow-hidden', {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <div className=\"media-scene-switcher-mobile-media aspect-w-[296] aspect-h-[256] relative w-full shrink-0 overflow-hidden\">\n        {videoUrl ? (\n          <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n        ) : imageUrl ? (\n          <Picture\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            source={imageUrl}\n            alt={data?.title || ''}\n          />\n        ) : null}\n      </div>\n      <div\n        className={cn(\n          'media-scene-switcher-mobile-bottom bg-container-primary text-info-primary flex flex-1 items-start justify-between gap-[8px] p-[16px]'\n        )}\n      >\n        <div>\n          <div className=\"media-scene-switcher-mobile-title line-clamp-3\">\n            <Heading as=\"h6\" size={2} html={data?.title} />\n          </div>\n          {data?.description && (\n            <Text\n              size={2}\n              className=\"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-2 text-sm font-bold\"\n              html={data.description}\n            />\n          )}\n        </div>\n        <div\n          className={cn(\n            'media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={1} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\ninterface SceneSectionData {\n  title?: string\n  subtitle?: string\n  items?: MediaSceneSwitcherItem[]\n  theme?: Theme\n  layout?: 'left' | 'right'\n  titleIcon?: Media\n}\n\ninterface SceneSectionProps {\n  sectionData: SceneSectionData\n  id?: string\n  className?: string\n  tabId?: string\n}\n\nconst SceneSection = forwardRef<HTMLElement, SceneSectionProps>(({ sectionData, id, className = '', tabId }, ref) => {\n  const { title, subtitle, items = [], theme = 'light', layout, titleIcon } = sectionData\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const innerRef = useRef<HTMLElement>(null)\n  const intervalRef = useRef<number>(0)\n  const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLElement)\n\n  useEffect(() => {\n    if (isMobile || items.length === 0) return\n\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n\n    return () => {\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current)\n      }\n    }\n  }, [isMobile, items.length])\n\n  const handleItemClick = (index: number) => {\n    setCurrentIndex(index)\n    if (intervalRef.current) {\n      window.clearInterval(intervalRef.current)\n    }\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n  }\n\n  const currentItem = items[currentIndex]\n  const videoUrl = currentItem?.videoUrl?.url\n  const imageUrl = currentItem?.imageUrl?.url\n  const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <section\n      id={id}\n      ref={innerRef}\n      className={cn(\n        'media-scene-switcher text-info-primary w-full',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* Desktop Layout */}\n      <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n        <div\n          className={cn(\n            'media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden',\n            {\n              'order-1': layout === 'right',\n            }\n          )}\n        >\n          {items.map((item, index) => {\n            const itemVideoUrl = item?.videoUrl?.url\n            const itemImageUrl = item?.imageUrl?.url\n            const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n            return (\n              <div\n                key={item.id || index}\n                className={cn(\n                  'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n                  {\n                    'inline-block': index === currentIndex,\n                  }\n                )}\n              >\n                {itemVideoUrl ? (\n                  <video\n                    src={itemVideoUrl}\n                    playsInline\n                    autoPlay\n                    loop\n                    muted\n                    poster={itemPosterUrl}\n                    className=\"size-full object-cover\"\n                  />\n                ) : itemImageUrl ? (\n                  <Picture\n                    className=\"size-full\"\n                    imgClassName=\"size-full object-cover\"\n                    source={itemImageUrl}\n                    alt={item?.title || ''}\n                  />\n                ) : null}\n              </div>\n            )\n          })}\n        </div>\n\n        <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n          <div className=\"media-scene-switcher-header flex flex-col\">\n            <div className=\"desktop:gap-2 flex items-center gap-1\">\n              {title && (\n                <Heading\n                  as=\"h3\"\n                  html={title}\n                  size={4}\n                  className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n                />\n              )}\n              {titleIcon && (\n                <Picture\n                  source={titleIcon.url}\n                  alt={titleIcon.alt || 'title icon'}\n                  className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                  imgClassName=\"!w-auto h-full\"\n                />\n              )}\n            </div>\n\n            {subtitle && (\n              <Text\n                as=\"span\"\n                size={4}\n                html={subtitle}\n                className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]\"\n              />\n            )}\n          </div>\n\n          <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n            {items.map((item, index) => (\n              <DesktopItem\n                key={item.id || index}\n                data={item}\n                configuration={{\n                  index,\n                  isActive: index === currentIndex,\n                  onItemClick: handleItemClick,\n                }}\n                theme={theme}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n\n      {/* Mobile Layout */}\n      <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n        <div className=\"media-scene-switcher-mobile-header\">\n          <div className=\"desktop:gap-2 flex items-center gap-1\">\n            {title && (\n              <Heading\n                as=\"h2\"\n                html={title}\n                size={2}\n                className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]\"\n              />\n            )}\n            {titleIcon && (\n              <Picture\n                source={titleIcon.url}\n                alt={titleIcon.alt || 'title icon'}\n                className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                imgClassName=\"!w-auto h-full\"\n              />\n            )}\n          </div>\n          {subtitle && (\n            <Text as=\"span\" size={4} html={subtitle} className=\"media-scene-switcher-subtitle text-[14px]\" />\n          )}\n        </div>\n\n        <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n          <Swiper\n            key={tabId}\n            onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n            initialSlide={0}\n            modules={[Autoplay]}\n            loop={items.length > 1}\n            autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n            spaceBetween={12}\n            breakpoints={{\n              0: { slidesPerView: 1 },\n              374: { slidesPerView: 1.2 },\n              768: { slidesPerView: 2.3 },\n            }}\n            watchSlidesProgress={true}\n            className=\"w-full !overflow-visible\"\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={item.id || index} className=\"!h-auto max-w-full\">\n                <MobileItem\n                  data={item}\n                  configuration={{\n                    index,\n                    isActive: index === activeIndex,\n                  }}\n                  theme={theme}\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n      </div>\n    </section>\n  )\n})\n\nSceneSection.displayName = 'SceneSection'\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(({ className = '', data, id }, ref) => {\n  const isShowTab = data?.isShowTab ?? false\n  const tabs = data?.tabs\n  const tabAlign = data?.tabAlign ?? 'left'\n  const [activeTab, setActiveTab] = useState(tabs?.[0]?.id ?? '')\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const activeTabData = tabs?.find(t => t.id === activeTab)\n  const effectiveData = activeTabData ?? data\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: effectiveData?.title,\n  })\n\n  const PROGRESS_BAR_KEYFRAMES = `\n    @keyframes progress-bar {\n      from {\n        transform: translate3d(-100%, 0, 0);\n      }\n      to {\n        transform: translate3d(0, 0, 0);\n      }\n    }\n  `\n\n  if (!isShowTab || !tabs || tabs.length === 0) {\n    return (\n      <>\n        <style>{PROGRESS_BAR_KEYFRAMES}</style>\n        <SceneSection ref={innerRef as React.Ref<HTMLElement>} sectionData={data} id={id} className={className} />\n      </>\n    )\n  }\n\n  return (\n    <>\n      <style>{PROGRESS_BAR_KEYFRAMES}</style>\n      <div ref={innerRef}>\n        <Tabs value={activeTab} onValueChange={setActiveTab} align={tabAlign}>\n          <div className=\"media-scene-switcher-tabs mb-6\">\n            <TabsList>\n              {tabs.map(tab => (\n                <TabsTrigger key={tab.id} value={tab.id}>\n                  {tab.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </div>\n          {tabs.map(tab => (\n            <TabsContent key={tab.id} value={tab.id}>\n              <SceneSection sectionData={tab} className={className} tabId={tab.id} />\n            </TabsContent>\n          ))}\n        </Tabs>\n      </div>\n    </>\n  )\n})\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher, { style: 'overflow: hidden;' })\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "useMediaQuery", "cn", "withLayout", "Heading", "Text", "Picture", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "Swiper", "SwiperSlide", "Autoplay", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "SceneSection", "sectionData", "id", "className", "tabId", "title", "subtitle", "items", "layout", "titleIcon", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper", "MediaSceneSwitcher", "isShowTab", "tabs", "tabAlign", "activeTab", "setActiveTab", "effectiveData", "t", "PROGRESS_BAR_KEYFRAMES", "tab", "MediaSceneSwitcher_default"]
 }

package/dist/esm/biz-components/MediaSceneSwitcher/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './MediaSceneSwitcher.js';
-export * from './types.js';
+export type { MediaSceneSwitcherItem, MediaSceneSwitcherTab, MediaSceneSwitcherProps } from './types.js';

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

@@ -1,2 +1,2 @@
-import{default as e}from"./MediaSceneSwitcher.js";export*from"./types.js";export{e as default};
+import{default as r}from"./MediaSceneSwitcher.js";export{r as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaSceneSwitcher/index.ts"],
-  "sourcesContent": ["export { default } from './MediaSceneSwitcher.js'\nexport * from './types.js'\n"],
-  "mappings": "AAAA,OAAS,WAAAA,MAAe,0BACxB,WAAc",
+  "sourcesContent": ["export { default } from './MediaSceneSwitcher.js'\nexport type { MediaSceneSwitcherItem, MediaSceneSwitcherTab, MediaSceneSwitcherProps } from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe",
   "names": ["default"]
 }

package/dist/esm/biz-components/MediaSceneSwitcher/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentCommonProps, Media, Theme } from '../../types/props.js';
+import type { Align, ComponentCommonProps, Media, Theme } from '../../types/props.js';
 export interface MediaSceneSwitcherItem {
     id: string;
     title: string;
@@ -9,12 +9,28 @@ export interface MediaSceneSwitcherItem {
     mobVideoUrl?: Media | null;
     mobImageUrl?: Media | null;
 }
+export interface MediaSceneSwitcherTab {
+    id: string;
+    label: string;
+    titleIcon?: Media;
+    title?: string;
+    subtitle?: string;
+    items: MediaSceneSwitcherItem[];
+    theme?: Theme;
+    layout?: 'left' | 'right';
+}
 export interface MediaSceneSwitcherProps extends ComponentCommonProps {
     data: {
+        /** 是否启用 Tab 切换，默认 false */
+        isShowTab?: boolean;
         titleIcon?: Media;
         title?: string;
         subtitle?: string;
         items?: MediaSceneSwitcherItem[];
+        /** Tab 分组 - isShowTab 为 true 时生效 */
+        tabs?: MediaSceneSwitcherTab[];
+        /** Tab 对齐方式，默认 left */
+        tabAlign?: Align;
         /** 主题，默认 light */
         theme?: Theme;
         layout?: 'left' | 'right';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.3.52",
+  "version": "1.3.54",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/style.css

@@ -985,6 +985,9 @@ video {
 .mb-\[16px\] {
   margin-bottom: 16px;
 }
+.mb-\[24px\] {
+  margin-bottom: 24px;
+}
 .mb-\[3px\] {
   margin-bottom: 3px;
 }
@@ -1216,9 +1219,6 @@ video {
 .aspect-\[398\/400\] {
   aspect-ratio: 398/400;
 }
-.aspect-\[554\/480\] {
-  aspect-ratio: 554/480;
-}
 .aspect-\[716\/720\] {
   aspect-ratio: 716/720;
 }
@@ -1579,9 +1579,6 @@ video {
 .h-\[640px\] {
   height: 640px;
 }
-.h-\[72px\] {
-  height: 72px;
-}
 .h-\[80px\] {
   height: 80px;
 }
@@ -3962,9 +3959,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 107 53 / var(--tw-text-opacity, 1));
 }
-.text-\[1D1D1F\] {
-  color: 1D1D1F;
-}
 .text-badge-foreground {
   color: var(--badge-text-color, #ffffff);
 }