@anker-in/headless-ui 1.1.88 → 1.1.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/biz-components/ImageTextOverlay/index.js +2 -2
  2. package/dist/cjs/biz-components/ImageTextOverlay/index.js.map +3 -3
  3. package/dist/cjs/shared/trackUrlRef.js +1 -1
  4. package/dist/cjs/shared/trackUrlRef.js.map +2 -2
  5. package/dist/esm/biz-components/ImageTextOverlay/index.js +2 -2
  6. package/dist/esm/biz-components/ImageTextOverlay/index.js.map +3 -3
  7. package/dist/esm/shared/trackUrlRef.js +1 -1
  8. package/dist/esm/shared/trackUrlRef.js.map +2 -2
  9. package/package.json +1 -1
  10. package/style.css +18 -9
package/dist/cjs/biz-components/ImageTextOverlay/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";"use client";var j=Object.create;var f=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var l in t)f(e,l,{get:t[l],enumerable:!0})},S=(e,t,l,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of F(t))!Q.call(e,i)&&i!==l&&f(e,i,{get:()=>t[i],enumerable:!(r=V(t,i))||r.enumerable});return e};var N=(e,t,l)=>(l=e!=null?j(G(e)):{},S(t||!e||!e.__esModule?f(l,"default",{value:e,enumerable:!0}):l,e)),K=e=>S(f({},"__esModule",{value:!0}),e);var ae={};q(ae,{default:()=>te});module.exports=K(ae);var a=require("react/jsx-runtime"),T=N(require("react")),c=require("react"),o=require("../../helpers/utils.js"),R=require("../../components/heading.js"),D=require("../../components/text.js"),_=N(require("../../components/picture.js")),w=require("../../hooks/useExposure.js"),z=require("../../shared/Styles.js"),A=require("../../shared/trackUrlRef.js"),L=require("../../helpers/utils.js"),B=require("../AiuiProvider/index.js"),E=require("react-responsive"),y=require("swiper/react"),H=require("swiper/modules"),oe=require("swiper/css"),ie=require("swiper/css/pagination");const U="content",x="image_text_overlay",I="image",$="image-text-overlay-mobile-pagination",v={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},W=e=>{if(!e)return"";const t=[];return e.lgDesktop?.url&&t.push(`${e.lgDesktop.url}`),e.desktop?.url&&t.push(`${e.desktop.url} ${v.desktop}`),e.laptop?.url&&t.push(`${e.laptop.url} ${v.laptop}`),e.tablet?.url&&t.push(`${e.tablet.url} ${v.tablet}`),e.default?.url&&t.push(`${e.default.url} ${v.default}`),t.join(", ")},J=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",X=(e,t)=>{const l=[];for(let r=0;r<e.length;r+=t)l.push(e.slice(r,r+t));return l},Y=e=>{switch(e){case 2:return"grid-cols-1 tablet:grid-cols-2";case 3:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3";case 4:return"grid-cols-1 tablet:grid-cols-2";case 5:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6";case 6:return"grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3";default:return e<=1?"grid-cols-1":"grid-cols-1 laptop:grid-cols-3"}},Z=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",ee="h-[240px] tablet:h-[240px] laptop:h-[192px] desktop:h-[256px] lg-desktop:h-[320px]",C=({item:e,index:t,count:l,classNames:r})=>{const i=W(e.backgroundImage),d=J(e.backgroundImage),n=Z(t,l),u=T.useRef(null),{locale:b="us",pageHandle:m}=(0,B.useAiuiContext)();(0,w.useExposure)(u,{componentType:I,componentName:x,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const s=e.link?(0,L.getLocalizedPath)(e.link,b):void 0,g=s?(0,A.trackUrlRef)(s,`${m??""}_${I}_${x}`):void 0,h=`${e.title}#${e.subtitle||""}#${e.title}`;return(0,a.jsxs)("div",{ref:u,className:(0,o.cn)("image-text-overlay-card rounded-card",{"aiui-dark":e.theme==="dark"},"desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4",ee,n,r?.card),children:[g&&(0,a.jsx)("a",{href:g,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${I}#${x}`,"data-headless-title-desc-button":h}),e.backgroundImage?.isShowVideo?(0,a.jsxs)(a.Fragment,{children:[e.backgroundImage?.mobileVideo&&(0,a.jsx)("video",{className:(0,o.cn)("image-text-overlay-card-image","laptop:hidden absolute inset-0 size-full object-cover",r?.cardImage),src:e.backgroundImage.mobileVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),e.backgroundImage?.desktopVideo&&(0,a.jsx)("video",{className:(0,o.cn)("image-text-overlay-card-image","laptop:block absolute inset-0 hidden size-full object-cover",r?.cardImage),src:e.backgroundImage.desktopVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0})]}):i&&(0,a.jsx)(_.default,{source:i,alt:d||e.title,className:(0,o.cn)("image-text-overlay-card-image","absolute inset-0 size-full",r?.cardImage),imgClassName:"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105"}),(0,a.jsxs)("div",{className:(0,o.cn)("image-text-overlay-card-content","relative z-10 flex w-full flex-col gap-1",r?.cardContent),children:[(0,a.jsx)(R.Heading,{as:"h4",size:2,weight:"bold",className:(0,o.cn)("image-text-overlay-card-title text-info-primary line-clamp-1","w-full leading-[1.2] tracking-[-0.04em]","desktop:text-xl lg-desktop:text-2xl text-lg",r?.cardTitle),children:e.title}),e.subtitle&&(0,a.jsx)(D.Text,{as:"p",size:"none",weight:"bold",className:(0,o.cn)("image-text-overlay-card-subtitle text-info-primary line-clamp-1","w-full truncate leading-[1.4] tracking-[-0.02em]","lg-desktop:text-base text-sm",l<=3&&"lg-desktop:text-lg",r?.cardSubtitle),children:e.subtitle})]})]})},P=(0,c.forwardRef)(({data:e,className:t,classNames:l={},...r},i)=>{const d=T.useRef(null),{items:n=[]}=e,[u,b]=(0,c.useState)(!1),m=(0,E.useMediaQuery)({query:"(max-width: 767px)"});if((0,c.useEffect)(()=>{b(m)},[m]),(0,w.useExposure)(d,{componentType:U,componentName:x}),T.useImperativeHandle(i,()=>d.current),!n.length)return null;const s=n.length,g=s>3&&u,h=X(n,3);return(0,a.jsx)("div",{ref:d,className:(0,o.cn)("image-text-overlay-root",t,l.root),"data-ui-component-id":"ImageTextOverlay",...r,children:g?(0,a.jsxs)("div",{className:"image-text-overlay-mobile-swiper relative pb-8",children:[(0,a.jsx)(y.Swiper,{className:"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",modules:[H.Pagination],slidesPerView:1,pagination:{clickable:!0,el:`.${$}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:h.map((k,p)=>(0,a.jsx)(y.SwiperSlide,{className:"!h-auto",children:(0,a.jsx)("div",{className:"flex flex-col gap-4",children:k.map((M,O)=>(0,a.jsx)(C,{item:M,index:p*3+O,count:s,classNames:l},p*3+O))})},p))}),(0,a.jsx)("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:(0,a.jsx)("div",{className:(0,o.cn)($,"flex items-center justify-center gap-2 text-center","[&_.swiper-pagination-bullet]:m-0","[&_.swiper-pagination-bullet]:shrink-0","[&_.swiper-pagination-bullet]:opacity-100")})}),(0,a.jsx)("style",{children:`
1
+ "use strict";"use client";var j=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var l in t)v(e,l,{get:t[l],enumerable:!0})},S=(e,t,l,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of F(t))!Q.call(e,o)&&o!==l&&v(e,o,{get:()=>t[o],enumerable:!(s=V(t,o))||s.enumerable});return e};var N=(e,t,l)=>(l=e!=null?j(G(e)):{},S(t||!e||!e.__esModule?v(l,"default",{value:e,enumerable:!0}):l,e)),K=e=>S(v({},"__esModule",{value:!0}),e);var ae={};q(ae,{default:()=>te});module.exports=K(ae);var a=require("react/jsx-runtime"),T=N(require("react")),n=require("react"),r=require("../../helpers/utils.js"),P=require("../../components/heading.js"),D=require("../../components/text.js"),_=N(require("../../components/picture.js")),w=require("../../hooks/useExposure.js"),A=require("../../shared/Styles.js"),z=require("../../shared/trackUrlRef.js"),L=require("../../helpers/utils.js"),B=require("../AiuiProvider/index.js"),E=require("react-responsive"),b=require("swiper/react"),H=require("swiper/modules"),re=require("swiper/css"),oe=require("swiper/css/pagination");const U="content",x="image_text_overlay",I="image",$="image-text-overlay-mobile-pagination",y={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},W=e=>{if(!e)return"";const t=[];return e.lgDesktop?.url&&t.push(`${e.lgDesktop.url}`),e.desktop?.url&&t.push(`${e.desktop.url} ${y.desktop}`),e.laptop?.url&&t.push(`${e.laptop.url} ${y.laptop}`),e.tablet?.url&&t.push(`${e.tablet.url} ${y.tablet}`),e.default?.url&&t.push(`${e.default.url} ${y.default}`),t.join(", ")},J=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",X=(e,t)=>{const l=[];for(let s=0;s<e.length;s+=t)l.push(e.slice(s,s+t));return l},Y=e=>{switch(e){case 2:return"grid-cols-1 tablet:grid-cols-2";case 3:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3";case 4:return"grid-cols-1 tablet:grid-cols-2";case 5:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6";case 6:return"grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3";default:return e<=1?"grid-cols-1":"grid-cols-1 laptop:grid-cols-3"}},Z=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",ee=(e,t)=>{switch(e){case 2:case 4:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]";case 3:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 5:return t<2?"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 6:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";default:return e<=1?"aspect-[358/240]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]"}},R=({item:e,index:t,count:l,classNames:s})=>{const o=W(e.backgroundImage),d=J(e.backgroundImage),p=Z(t,l),m=T.useRef(null),{locale:k="us",pageHandle:g}=(0,B.useAiuiContext)();(0,w.useExposure)(m,{componentType:I,componentName:x,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const i=e.link?(0,L.getLocalizedPath)(e.link,k):void 0,f=i?(0,z.trackUrlRef)(i,`${g??""}_${I}_${x}`):void 0,h=`${e.title}#${e.subtitle||""}#${e.title}`,u=ee(l,t);return(0,a.jsxs)("div",{ref:m,className:(0,r.cn)("image-text-overlay-card rounded-card",{"aiui-dark":e.theme==="dark"},"desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4",u,p,s?.card),children:[f&&(0,a.jsx)("a",{href:f,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${I}#${x}`,"data-headless-title-desc-button":h}),e.backgroundImage?.isShowVideo?(0,a.jsxs)(a.Fragment,{children:[e.backgroundImage?.mobileVideo&&(0,a.jsx)("video",{className:(0,r.cn)("image-text-overlay-card-image","laptop:hidden absolute inset-0 size-full object-cover",s?.cardImage),src:e.backgroundImage.mobileVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),e.backgroundImage?.desktopVideo&&(0,a.jsx)("video",{className:(0,r.cn)("image-text-overlay-card-image","laptop:block absolute inset-0 hidden size-full object-cover",s?.cardImage),src:e.backgroundImage.desktopVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0})]}):o&&(0,a.jsx)(_.default,{source:o,alt:d||e.title,className:(0,r.cn)("image-text-overlay-card-image","absolute inset-0 size-full",s?.cardImage),imgClassName:"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105"}),(0,a.jsxs)("div",{className:(0,r.cn)("image-text-overlay-card-content","relative z-10 flex w-full flex-col gap-1",s?.cardContent),children:[(0,a.jsx)(P.Heading,{as:"h4",size:2,weight:"bold",className:(0,r.cn)("image-text-overlay-card-title text-info-primary line-clamp-1","w-full leading-[1.2] tracking-[-0.04em]","desktop:text-xl lg-desktop:text-2xl text-lg",s?.cardTitle),children:e.title}),e.subtitle&&(0,a.jsx)(D.Text,{as:"p",size:"none",weight:"bold",className:(0,r.cn)("image-text-overlay-card-subtitle text-info-primary line-clamp-1","w-full truncate leading-[1.4] tracking-[-0.02em]","lg-desktop:text-base text-sm",l<=3&&"lg-desktop:text-lg",s?.cardSubtitle),children:e.subtitle})]})]})},C=(0,n.forwardRef)(({data:e,className:t,classNames:l={},...s},o)=>{const d=T.useRef(null),{items:p=[]}=e,[m,k]=(0,n.useState)(!1),g=(0,E.useMediaQuery)({query:"(max-width: 767px)"});if((0,n.useEffect)(()=>{k(g)},[g]),(0,w.useExposure)(d,{componentType:U,componentName:x}),T.useImperativeHandle(o,()=>d.current),!p.length)return null;const i=p.length,f=i>3&&m,h=X(p,3);return(0,a.jsx)("div",{ref:d,className:(0,r.cn)("image-text-overlay-root",t,l.root),"data-ui-component-id":"ImageTextOverlay",...s,children:f?(0,a.jsxs)("div",{className:"image-text-overlay-mobile-swiper relative pb-8",children:[(0,a.jsx)(b.Swiper,{className:"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",modules:[H.Pagination],slidesPerView:1,pagination:{clickable:!0,el:`.${$}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:h.map((u,c)=>(0,a.jsx)(b.SwiperSlide,{className:"!h-auto",children:(0,a.jsx)("div",{className:"flex flex-col gap-4",children:u.map((M,O)=>(0,a.jsx)(R,{item:M,index:c*3+O,count:i,classNames:l},c*3+O))})},c))}),(0,a.jsx)("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:(0,a.jsx)("div",{className:(0,r.cn)($,"flex items-center justify-center gap-2 text-center","[&_.swiper-pagination-bullet]:m-0","[&_.swiper-pagination-bullet]:shrink-0","[&_.swiper-pagination-bullet]:opacity-100")})}),(0,a.jsx)("style",{children:`
2
2
  .image-text-overlay-bullet {
3
3
  display: inline-block;
4
4
  width: 8px;
@@ -14,5 +14,5 @@
14
14
  border-radius: 9999px;
15
15
  background: #080A0F;
16
16
  }
17
- `})]}):(0,a.jsx)("div",{className:(0,o.cn)("image-text-overlay-grid","grid gap-4",Y(s),l.grid),children:n.map((k,p)=>(0,a.jsx)(C,{item:k,index:p,count:s,classNames:l},p))})})});P.displayName="ImageTextOverlay";var te=(0,z.withLayout)(P);
17
+ `})]}):(0,a.jsx)("div",{className:(0,r.cn)("image-text-overlay-grid","grid gap-4",Y(i),l.grid),children:p.map((u,c)=>(0,a.jsx)(R,{item:u,index:c,count:i,classNames:l},c))})})});C.displayName="ImageTextOverlay";var te=(0,A.withLayout)(C);
18
18
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/ImageTextOverlay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ImageTextOverlay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u9AD8\u5EA6\u7C7B\u540D\n * Figma: mobile 240px, tablet 240px, laptop 192px, desktop 256px, lg-desktop 320px\n */\nconst cardHeightClasses = 'h-[240px] tablet:h-[240px] laptop:h-[192px] desktop:h-[256px] lg-desktop:h-[320px]'\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n cardHeightClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n >\n {item.title}\n </Heading>\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n >\n {item.subtitle}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
5
- "mappings": "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",
6
- "names": ["ImageTextOverlay_exports", "__export", "ImageTextOverlay_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react", "import_utils", "import_heading", "import_text", "import_picture", "import_useExposure", "import_Styles", "import_trackUrlRef", "import_AiuiProvider", "import_react_responsive", "import_modules", "import_css", "import_pagination", "componentType", "componentName", "imageComponentType", "MOBILE_SWIPER_PAGINATION_CLASS", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getBackgroundAlt", "chunkArray", "arr", "size", "chunks", "i", "getGridClasses", "count", "getItemSpanClasses", "index", "cardHeightClasses", "ImageTextOverlayCard", "item", "classNames", "responsiveSource", "defaultAlt", "spanClasses", "imageRef", "locale", "pageHandle", "localizedLink", "trackedLink", "titleDescButton", "Picture", "ImageTextOverlay", "data", "className", "props", "ref", "boxRef", "items", "isMobile", "setIsMobile", "mediaQuery", "useSwiper", "chunkedItems", "group", "gIndex"]
4
+ "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n >\n {item.title}\n </Heading>\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n >\n {item.subtitle}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
5
+ "mappings": "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",
6
+ "names": ["ImageTextOverlay_exports", "__export", "ImageTextOverlay_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react", "import_utils", "import_heading", "import_text", "import_picture", "import_useExposure", "import_Styles", "import_trackUrlRef", "import_AiuiProvider", "import_react_responsive", "import_modules", "import_css", "import_pagination", "componentType", "componentName", "imageComponentType", "MOBILE_SWIPER_PAGINATION_CLASS", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getBackgroundAlt", "chunkArray", "arr", "size", "chunks", "i", "getGridClasses", "count", "getItemSpanClasses", "index", "getAspectRatioClasses", "ImageTextOverlayCard", "item", "classNames", "responsiveSource", "defaultAlt", "spanClasses", "imageRef", "locale", "pageHandle", "localizedLink", "trackedLink", "titleDescButton", "aspectRatioClasses", "Picture", "ImageTextOverlay", "data", "className", "props", "ref", "boxRef", "items", "isMobile", "setIsMobile", "mediaQuery", "useSwiper", "chunkedItems", "group", "gIndex"]
7
7
  }
package/dist/cjs/shared/trackUrlRef.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var m=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},R=(t,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of f(n))!$.call(t,e)&&e!==r&&c(t,e,{get:()=>n[e],enumerable:!(s=p(n,e))||s.enumerable});return t};var S=t=>R(c({},"__esModule",{value:!0}),t);var d={};m(d,{buildTrackingRef:()=>U,trackUrlRef:()=>y});module.exports=S(d);const y=(t="",n="")=>{try{if(n=n.replace(/Activity Page_/g,""),/^https?:\/\//.test(t)){const s=new URL(t);return s.searchParams.has("ref")?t:(s.searchParams.set("ref",n),s.toString())}else{const[s,e=""]=t.split("#"),[o,a=""]=s.split("?"),i=new URLSearchParams(a);if(i.has("ref"))return t;i.set("ref",n);const g=i.toString()?`?${i.toString()}`:"",h=e?`#${e}`:"";return`${o}${g}${h}`}}catch{return/[?&]ref=/.test(t)?t:t?.includes("?")?t+"&ref="+encodeURIComponent(n):t+"?ref="+encodeURIComponent(n)}},U=(t,n,r)=>`${t}_${n}_${r}`;
1
+ "use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var m=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},R=(t,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of f(n))!$.call(t,e)&&e!==r&&c(t,e,{get:()=>n[e],enumerable:!(s=p(n,e))||s.enumerable});return t};var S=t=>R(c({},"__esModule",{value:!0}),t);var d={};m(d,{buildTrackingRef:()=>U,trackUrlRef:()=>y});module.exports=S(d);const y=(t="",n="")=>{try{if(t?.startsWith("#"))return t;if(n=n.replace(/Activity Page_/g,""),/^https?:\/\//.test(t)){const s=new URL(t);return s.searchParams.has("ref")?t:(s.searchParams.set("ref",n),s.toString())}else{const[s,e=""]=t.split("#"),[a,o=""]=s.split("?"),i=new URLSearchParams(o);if(i.has("ref"))return t;i.set("ref",n);const g=i.toString()?`?${i.toString()}`:"",h=e?`#${e}`:"";return`${a}${g}${h}`}}catch{return/[?&]ref=/.test(t)?t:t?.includes("?")?t+"&ref="+encodeURIComponent(n):t+"?ref="+encodeURIComponent(n)}},U=(t,n,r)=>`${t}_${n}_${r}`;
2
2
  //# sourceMappingURL=trackUrlRef.js.map
package/dist/cjs/shared/trackUrlRef.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/shared/trackUrlRef.ts"],
4
- "sourcesContent": ["/**\n * \u7ED9 url \u6216 path \u6DFB\u52A0 ref \u53C2\u6570\n * @param url \u539F\u59CB url \u6216 path\n * @param refValue ref \u53C2\u6570\u7684\u503C\n * @returns \u6DFB\u52A0\u4E86 ref \u53C2\u6570\u7684\u65B0 url\n */\nexport const trackUrlRef = (url: string = '', refValue: string = ''): string => {\n try {\n // \u5386\u53F2\u57CB\u70B9\u95EE\u9898\u5904\u7406\uFF0C\u53BB\u6389pageHandle \u7684\u524D\u7F00\n refValue = refValue.replace(/Activity Page_/g, '')\n // \u5224\u65AD\u662F\u5426\u4E3A\u7EDD\u5BF9 URL\n const hasOrigin = /^https?:\\/\\//.test(url)\n if (hasOrigin) {\n const u = new URL(url)\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (u.searchParams.has('ref')) {\n return url\n }\n u.searchParams.set('ref', refValue)\n return u.toString()\n } else {\n const [pathWithQuery, hash = ''] = url.split('#')\n const [path, query = ''] = pathWithQuery.split('?')\n const params = new URLSearchParams(query)\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (params.has('ref')) {\n return url\n }\n params.set('ref', refValue)\n const queryString = params.toString() ? `?${params.toString()}` : ''\n const hashString = hash ? `#${hash}` : ''\n return `${path}${queryString}${hashString}`\n }\n } catch (e) {\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (/[?&]ref=/.test(url)) {\n return url\n }\n if (url?.includes('?')) {\n return url + '&ref=' + encodeURIComponent(refValue)\n }\n return url + '?ref=' + encodeURIComponent(refValue)\n }\n}\n\n/**\n * \u6784\u9020\u6807\u51C6\u5316 ref \u8FFD\u8E2A\u5B57\u7B26\u4E32\n * \u683C\u5F0F: `${pageHandle}_${componentType}_${componentName}`\n * @param pageHandle \u9875\u9762\u6807\u8BC6\uFF0C\u5982 'soundcore-lottery'\n * @param componentType \u7EC4\u4EF6\u7C7B\u578B\uFF0C\u5982 'copy'\n * @param componentName \u7EC4\u4EF6\u540D\u79F0\uFF0C\u5982 'lottery_banner'\n * @returns \u62FC\u63A5\u540E\u7684 ref \u5B57\u7B26\u4E32\uFF0C\u5982 'soundcore-lottery_copy_lottery_banner'\n */\nexport const buildTrackingRef = (pageHandle: string, componentType: string, componentName: string): string => {\n return `${pageHandle}_${componentType}_${componentName}`\n}\n"],
5
- "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,EAAA,gBAAAC,IAAA,eAAAC,EAAAJ,GAMO,MAAMG,EAAc,CAACE,EAAc,GAAIC,EAAmB,KAAe,CAC9E,GAAI,CAKF,GAHAA,EAAWA,EAAS,QAAQ,kBAAmB,EAAE,EAE/B,eAAe,KAAKD,CAAG,EAC1B,CACb,MAAME,EAAI,IAAI,IAAIF,CAAG,EAErB,OAAIE,EAAE,aAAa,IAAI,KAAK,EACnBF,GAETE,EAAE,aAAa,IAAI,MAAOD,CAAQ,EAC3BC,EAAE,SAAS,EACpB,KAAO,CACL,KAAM,CAACC,EAAeC,EAAO,EAAE,EAAIJ,EAAI,MAAM,GAAG,EAC1C,CAACK,EAAMC,EAAQ,EAAE,EAAIH,EAAc,MAAM,GAAG,EAC5CI,EAAS,IAAI,gBAAgBD,CAAK,EAExC,GAAIC,EAAO,IAAI,KAAK,EAClB,OAAOP,EAETO,EAAO,IAAI,MAAON,CAAQ,EAC1B,MAAMO,EAAcD,EAAO,SAAS,EAAI,IAAIA,EAAO,SAAS,CAAC,GAAK,GAC5DE,EAAaL,EAAO,IAAIA,CAAI,GAAK,GACvC,MAAO,GAAGC,CAAI,GAAGG,CAAW,GAAGC,CAAU,EAC3C,CACF,MAAY,CAEV,MAAI,WAAW,KAAKT,CAAG,EACdA,EAELA,GAAK,SAAS,GAAG,EACZA,EAAM,QAAU,mBAAmBC,CAAQ,EAE7CD,EAAM,QAAU,mBAAmBC,CAAQ,CACpD,CACF,EAUaJ,EAAmB,CAACa,EAAoBC,EAAuBC,IACnE,GAAGF,CAAU,IAAIC,CAAa,IAAIC,CAAa",
4
+ "sourcesContent": ["/**\n * \u7ED9 url \u6216 path \u6DFB\u52A0 ref \u53C2\u6570\n * @param url \u539F\u59CB url \u6216 path\n * @param refValue ref \u53C2\u6570\u7684\u503C\n * @returns \u6DFB\u52A0\u4E86 ref \u53C2\u6570\u7684\u65B0 url\n */\nexport const trackUrlRef = (url: string = '', refValue: string = ''): string => {\n try {\n // \u5904\u7406\u951A\u70B9\n if (url?.startsWith('#')) return url\n // \u5386\u53F2\u57CB\u70B9\u95EE\u9898\u5904\u7406\uFF0C\u53BB\u6389pageHandle \u7684\u524D\u7F00\n refValue = refValue.replace(/Activity Page_/g, '')\n // \u5224\u65AD\u662F\u5426\u4E3A\u7EDD\u5BF9 URL\n const hasOrigin = /^https?:\\/\\//.test(url)\n if (hasOrigin) {\n const u = new URL(url)\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (u.searchParams.has('ref')) {\n return url\n }\n u.searchParams.set('ref', refValue)\n return u.toString()\n } else {\n const [pathWithQuery, hash = ''] = url.split('#')\n const [path, query = ''] = pathWithQuery.split('?')\n const params = new URLSearchParams(query)\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (params.has('ref')) {\n return url\n }\n params.set('ref', refValue)\n const queryString = params.toString() ? `?${params.toString()}` : ''\n const hashString = hash ? `#${hash}` : ''\n return `${path}${queryString}${hashString}`\n }\n } catch (e) {\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (/[?&]ref=/.test(url)) {\n return url\n }\n if (url?.includes('?')) {\n return url + '&ref=' + encodeURIComponent(refValue)\n }\n return url + '?ref=' + encodeURIComponent(refValue)\n }\n}\n\n/**\n * \u6784\u9020\u6807\u51C6\u5316 ref \u8FFD\u8E2A\u5B57\u7B26\u4E32\n * \u683C\u5F0F: `${pageHandle}_${componentType}_${componentName}`\n * @param pageHandle \u9875\u9762\u6807\u8BC6\uFF0C\u5982 'soundcore-lottery'\n * @param componentType \u7EC4\u4EF6\u7C7B\u578B\uFF0C\u5982 'copy'\n * @param componentName \u7EC4\u4EF6\u540D\u79F0\uFF0C\u5982 'lottery_banner'\n * @returns \u62FC\u63A5\u540E\u7684 ref \u5B57\u7B26\u4E32\uFF0C\u5982 'soundcore-lottery_copy_lottery_banner'\n */\nexport const buildTrackingRef = (pageHandle: string, componentType: string, componentName: string): string => {\n return `${pageHandle}_${componentType}_${componentName}`\n}\n"],
5
+ "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,EAAA,gBAAAC,IAAA,eAAAC,EAAAJ,GAMO,MAAMG,EAAc,CAACE,EAAc,GAAIC,EAAmB,KAAe,CAC9E,GAAI,CAEF,GAAID,GAAK,WAAW,GAAG,EAAG,OAAOA,EAKjC,GAHAC,EAAWA,EAAS,QAAQ,kBAAmB,EAAE,EAE/B,eAAe,KAAKD,CAAG,EAC1B,CACb,MAAME,EAAI,IAAI,IAAIF,CAAG,EAErB,OAAIE,EAAE,aAAa,IAAI,KAAK,EACnBF,GAETE,EAAE,aAAa,IAAI,MAAOD,CAAQ,EAC3BC,EAAE,SAAS,EACpB,KAAO,CACL,KAAM,CAACC,EAAeC,EAAO,EAAE,EAAIJ,EAAI,MAAM,GAAG,EAC1C,CAACK,EAAMC,EAAQ,EAAE,EAAIH,EAAc,MAAM,GAAG,EAC5CI,EAAS,IAAI,gBAAgBD,CAAK,EAExC,GAAIC,EAAO,IAAI,KAAK,EAClB,OAAOP,EAETO,EAAO,IAAI,MAAON,CAAQ,EAC1B,MAAMO,EAAcD,EAAO,SAAS,EAAI,IAAIA,EAAO,SAAS,CAAC,GAAK,GAC5DE,EAAaL,EAAO,IAAIA,CAAI,GAAK,GACvC,MAAO,GAAGC,CAAI,GAAGG,CAAW,GAAGC,CAAU,EAC3C,CACF,MAAY,CAEV,MAAI,WAAW,KAAKT,CAAG,EACdA,EAELA,GAAK,SAAS,GAAG,EACZA,EAAM,QAAU,mBAAmBC,CAAQ,EAE7CD,EAAM,QAAU,mBAAmBC,CAAQ,CACpD,CACF,EAUaJ,EAAmB,CAACa,EAAoBC,EAAuBC,IACnE,GAAGF,CAAU,IAAIC,CAAa,IAAIC,CAAa",
6
6
  "names": ["trackUrlRef_exports", "__export", "buildTrackingRef", "trackUrlRef", "__toCommonJS", "url", "refValue", "u", "pathWithQuery", "hash", "path", "query", "params", "queryString", "hashString", "pageHandle", "componentType", "componentName"]
7
7
  }
package/dist/esm/biz-components/ImageTextOverlay/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use client";import{Fragment as W,jsx as a,jsxs as x}from"react/jsx-runtime";import*as h from"react";import{forwardRef as $,useEffect as C,useState as P}from"react";import{cn as o}from"../../helpers/utils.js";import{Heading as R}from"../../components/heading.js";import{Text as D}from"../../components/text.js";import _ from"../../components/picture.js";import{useExposure as I}from"../../hooks/useExposure.js";import{withLayout as z}from"../../shared/Styles.js";import{trackUrlRef as A}from"../../shared/trackUrlRef.js";import{getLocalizedPath as L}from"../../helpers/utils.js";import{useAiuiContext as B}from"../AiuiProvider/index.js";import{useMediaQuery as E}from"react-responsive";import{Swiper as H,SwiperSlide as M}from"swiper/react";import{Pagination as j}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const V="content",g="image_text_overlay",k="image",w="image-text-overlay-mobile-pagination",f={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},F=e=>{if(!e)return"";const t=[];return e.lgDesktop?.url&&t.push(`${e.lgDesktop.url}`),e.desktop?.url&&t.push(`${e.desktop.url} ${f.desktop}`),e.laptop?.url&&t.push(`${e.laptop.url} ${f.laptop}`),e.tablet?.url&&t.push(`${e.tablet.url} ${f.tablet}`),e.default?.url&&t.push(`${e.default.url} ${f.default}`),t.join(", ")},G=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",Q=(e,t)=>{const r=[];for(let l=0;l<e.length;l+=t)r.push(e.slice(l,l+t));return r},q=e=>{switch(e){case 2:return"grid-cols-1 tablet:grid-cols-2";case 3:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3";case 4:return"grid-cols-1 tablet:grid-cols-2";case 5:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6";case 6:return"grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3";default:return e<=1?"grid-cols-1":"grid-cols-1 laptop:grid-cols-3"}},K=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",U="h-[240px] tablet:h-[240px] laptop:h-[192px] desktop:h-[256px] lg-desktop:h-[320px]",O=({item:e,index:t,count:r,classNames:l})=>{const c=F(e.backgroundImage),p=G(e.backgroundImage),s=K(t,r),d=h.useRef(null),{locale:v="us",pageHandle:u}=B();I(d,{componentType:k,componentName:g,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const i=e.link?L(e.link,v):void 0,m=i?A(i,`${u??""}_${k}_${g}`):void 0,y=`${e.title}#${e.subtitle||""}#${e.title}`;return x("div",{ref:d,className:o("image-text-overlay-card rounded-card",{"aiui-dark":e.theme==="dark"},"desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4",U,s,l?.card),children:[m&&a("a",{href:m,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${k}#${g}`,"data-headless-title-desc-button":y}),e.backgroundImage?.isShowVideo?x(W,{children:[e.backgroundImage?.mobileVideo&&a("video",{className:o("image-text-overlay-card-image","laptop:hidden absolute inset-0 size-full object-cover",l?.cardImage),src:e.backgroundImage.mobileVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),e.backgroundImage?.desktopVideo&&a("video",{className:o("image-text-overlay-card-image","laptop:block absolute inset-0 hidden size-full object-cover",l?.cardImage),src:e.backgroundImage.desktopVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0})]}):c&&a(_,{source:c,alt:p||e.title,className:o("image-text-overlay-card-image","absolute inset-0 size-full",l?.cardImage),imgClassName:"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105"}),x("div",{className:o("image-text-overlay-card-content","relative z-10 flex w-full flex-col gap-1",l?.cardContent),children:[a(R,{as:"h4",size:2,weight:"bold",className:o("image-text-overlay-card-title text-info-primary line-clamp-1","w-full leading-[1.2] tracking-[-0.04em]","desktop:text-xl lg-desktop:text-2xl text-lg",l?.cardTitle),children:e.title}),e.subtitle&&a(D,{as:"p",size:"none",weight:"bold",className:o("image-text-overlay-card-subtitle text-info-primary line-clamp-1","w-full truncate leading-[1.4] tracking-[-0.02em]","lg-desktop:text-base text-sm",r<=3&&"lg-desktop:text-lg",l?.cardSubtitle),children:e.subtitle})]})]})},S=$(({data:e,className:t,classNames:r={},...l},c)=>{const p=h.useRef(null),{items:s=[]}=e,[d,v]=P(!1),u=E({query:"(max-width: 767px)"});if(C(()=>{v(u)},[u]),I(p,{componentType:V,componentName:g}),h.useImperativeHandle(c,()=>p.current),!s.length)return null;const i=s.length,m=i>3&&d,y=Q(s,3);return a("div",{ref:p,className:o("image-text-overlay-root",t,r.root),"data-ui-component-id":"ImageTextOverlay",...l,children:m?x("div",{className:"image-text-overlay-mobile-swiper relative pb-8",children:[a(H,{className:"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",modules:[j],slidesPerView:1,pagination:{clickable:!0,el:`.${w}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:y.map((b,n)=>a(M,{className:"!h-auto",children:a("div",{className:"flex flex-col gap-4",children:b.map((N,T)=>a(O,{item:N,index:n*3+T,count:i,classNames:r},n*3+T))})},n))}),a("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:a("div",{className:o(w,"flex items-center justify-center gap-2 text-center","[&_.swiper-pagination-bullet]:m-0","[&_.swiper-pagination-bullet]:shrink-0","[&_.swiper-pagination-bullet]:opacity-100")})}),a("style",{children:`
1
+ "use client";import{Fragment as W,jsx as a,jsxs as x}from"react/jsx-runtime";import*as k from"react";import{forwardRef as $,useEffect as R,useState as C}from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as P}from"../../components/heading.js";import{Text as D}from"../../components/text.js";import _ from"../../components/picture.js";import{useExposure as I}from"../../hooks/useExposure.js";import{withLayout as A}from"../../shared/Styles.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{getLocalizedPath as L}from"../../helpers/utils.js";import{useAiuiContext as B}from"../AiuiProvider/index.js";import{useMediaQuery as E}from"react-responsive";import{Swiper as H,SwiperSlide as M}from"swiper/react";import{Pagination as j}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const V="content",f="image_text_overlay",h="image",w="image-text-overlay-mobile-pagination",v={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},F=e=>{if(!e)return"";const t=[];return e.lgDesktop?.url&&t.push(`${e.lgDesktop.url}`),e.desktop?.url&&t.push(`${e.desktop.url} ${v.desktop}`),e.laptop?.url&&t.push(`${e.laptop.url} ${v.laptop}`),e.tablet?.url&&t.push(`${e.tablet.url} ${v.tablet}`),e.default?.url&&t.push(`${e.default.url} ${v.default}`),t.join(", ")},G=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",Q=(e,t)=>{const s=[];for(let l=0;l<e.length;l+=t)s.push(e.slice(l,l+t));return s},q=e=>{switch(e){case 2:return"grid-cols-1 tablet:grid-cols-2";case 3:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3";case 4:return"grid-cols-1 tablet:grid-cols-2";case 5:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6";case 6:return"grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3";default:return e<=1?"grid-cols-1":"grid-cols-1 laptop:grid-cols-3"}},K=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",U=(e,t)=>{switch(e){case 2:case 4:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]";case 3:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 5:return t<2?"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 6:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";default:return e<=1?"aspect-[358/240]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]"}},O=({item:e,index:t,count:s,classNames:l})=>{const d=F(e.backgroundImage),c=G(e.backgroundImage),i=K(t,s),u=k.useRef(null),{locale:y="us",pageHandle:m}=B();I(u,{componentType:h,componentName:f,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const o=e.link?L(e.link,y):void 0,g=o?z(o,`${m??""}_${h}_${f}`):void 0,b=`${e.title}#${e.subtitle||""}#${e.title}`,n=U(s,t);return x("div",{ref:u,className:r("image-text-overlay-card rounded-card",{"aiui-dark":e.theme==="dark"},"desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4",n,i,l?.card),children:[g&&a("a",{href:g,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":b}),e.backgroundImage?.isShowVideo?x(W,{children:[e.backgroundImage?.mobileVideo&&a("video",{className:r("image-text-overlay-card-image","laptop:hidden absolute inset-0 size-full object-cover",l?.cardImage),src:e.backgroundImage.mobileVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),e.backgroundImage?.desktopVideo&&a("video",{className:r("image-text-overlay-card-image","laptop:block absolute inset-0 hidden size-full object-cover",l?.cardImage),src:e.backgroundImage.desktopVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0})]}):d&&a(_,{source:d,alt:c||e.title,className:r("image-text-overlay-card-image","absolute inset-0 size-full",l?.cardImage),imgClassName:"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105"}),x("div",{className:r("image-text-overlay-card-content","relative z-10 flex w-full flex-col gap-1",l?.cardContent),children:[a(P,{as:"h4",size:2,weight:"bold",className:r("image-text-overlay-card-title text-info-primary line-clamp-1","w-full leading-[1.2] tracking-[-0.04em]","desktop:text-xl lg-desktop:text-2xl text-lg",l?.cardTitle),children:e.title}),e.subtitle&&a(D,{as:"p",size:"none",weight:"bold",className:r("image-text-overlay-card-subtitle text-info-primary line-clamp-1","w-full truncate leading-[1.4] tracking-[-0.02em]","lg-desktop:text-base text-sm",s<=3&&"lg-desktop:text-lg",l?.cardSubtitle),children:e.subtitle})]})]})},S=$(({data:e,className:t,classNames:s={},...l},d)=>{const c=k.useRef(null),{items:i=[]}=e,[u,y]=C(!1),m=E({query:"(max-width: 767px)"});if(R(()=>{y(m)},[m]),I(c,{componentType:V,componentName:f}),k.useImperativeHandle(d,()=>c.current),!i.length)return null;const o=i.length,g=o>3&&u,b=Q(i,3);return a("div",{ref:c,className:r("image-text-overlay-root",t,s.root),"data-ui-component-id":"ImageTextOverlay",...l,children:g?x("div",{className:"image-text-overlay-mobile-swiper relative pb-8",children:[a(H,{className:"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",modules:[j],slidesPerView:1,pagination:{clickable:!0,el:`.${w}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:b.map((n,p)=>a(M,{className:"!h-auto",children:a("div",{className:"flex flex-col gap-4",children:n.map((N,T)=>a(O,{item:N,index:p*3+T,count:o,classNames:s},p*3+T))})},p))}),a("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:a("div",{className:r(w,"flex items-center justify-center gap-2 text-center","[&_.swiper-pagination-bullet]:m-0","[&_.swiper-pagination-bullet]:shrink-0","[&_.swiper-pagination-bullet]:opacity-100")})}),a("style",{children:`
2
2
  .image-text-overlay-bullet {
3
3
  display: inline-block;
4
4
  width: 8px;
@@ -14,5 +14,5 @@
14
14
  border-radius: 9999px;
15
15
  background: #080A0F;
16
16
  }
17
- `})]}):a("div",{className:o("image-text-overlay-grid","grid gap-4",q(i),r.grid),children:s.map((b,n)=>a(O,{item:b,index:n,count:i,classNames:r},n))})})});S.displayName="ImageTextOverlay";var ue=z(S);export{ue as default};
17
+ `})]}):a("div",{className:r("image-text-overlay-grid","grid gap-4",q(o),s.grid),children:i.map((n,p)=>a(O,{item:n,index:p,count:o,classNames:s},p))})})});S.displayName="ImageTextOverlay";var ue=A(S);export{ue as default};
18
18
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/ImageTextOverlay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ImageTextOverlay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u9AD8\u5EA6\u7C7B\u540D\n * Figma: mobile 240px, tablet 240px, laptop 192px, desktop 256px, lg-desktop 320px\n */\nconst cardHeightClasses = 'h-[240px] tablet:h-[240px] laptop:h-[192px] desktop:h-[256px] lg-desktop:h-[320px]'\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n cardHeightClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n >\n {item.title}\n </Heading>\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n >\n {item.subtitle}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "forwardRef", "useEffect", "useState", "cn", "Heading", "Text", "Picture", "useExposure", "withLayout", "trackUrlRef", "getLocalizedPath", "useAiuiContext", "useMediaQuery", "Swiper", "SwiperSlide", "Pagination", "componentType", "componentName", "imageComponentType", "MOBILE_SWIPER_PAGINATION_CLASS", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getBackgroundAlt", "chunkArray", "arr", "size", "chunks", "i", "getGridClasses", "count", "getItemSpanClasses", "index", "cardHeightClasses", "ImageTextOverlayCard", "item", "classNames", "responsiveSource", "defaultAlt", "spanClasses", "imageRef", "locale", "pageHandle", "localizedLink", "trackedLink", "titleDescButton", "ImageTextOverlay", "data", "className", "props", "ref", "boxRef", "items", "isMobile", "setIsMobile", "mediaQuery", "useSwiper", "chunkedItems", "group", "gIndex", "ImageTextOverlay_default"]
4
+ "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n >\n {item.title}\n </Heading>\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n >\n {item.subtitle}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "forwardRef", "useEffect", "useState", "cn", "Heading", "Text", "Picture", "useExposure", "withLayout", "trackUrlRef", "getLocalizedPath", "useAiuiContext", "useMediaQuery", "Swiper", "SwiperSlide", "Pagination", "componentType", "componentName", "imageComponentType", "MOBILE_SWIPER_PAGINATION_CLASS", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getBackgroundAlt", "chunkArray", "arr", "size", "chunks", "i", "getGridClasses", "count", "getItemSpanClasses", "index", "getAspectRatioClasses", "ImageTextOverlayCard", "item", "classNames", "responsiveSource", "defaultAlt", "spanClasses", "imageRef", "locale", "pageHandle", "localizedLink", "trackedLink", "titleDescButton", "aspectRatioClasses", "ImageTextOverlay", "data", "className", "props", "ref", "boxRef", "items", "isMobile", "setIsMobile", "mediaQuery", "useSwiper", "chunkedItems", "group", "gIndex", "ImageTextOverlay_default"]
7
7
  }
package/dist/esm/shared/trackUrlRef.js CHANGED
@@ -1,2 +1,2 @@
1
- const h=(t="",n="")=>{try{if(n=n.replace(/Activity Page_/g,""),/^https?:\/\//.test(t)){const r=new URL(t);return r.searchParams.has("ref")?t:(r.searchParams.set("ref",n),r.toString())}else{const[r,i=""]=t.split("#"),[c,o=""]=r.split("?"),s=new URLSearchParams(o);if(s.has("ref"))return t;s.set("ref",n);const a=s.toString()?`?${s.toString()}`:"",g=i?`#${i}`:"";return`${c}${a}${g}`}}catch{return/[?&]ref=/.test(t)?t:t?.includes("?")?t+"&ref="+encodeURIComponent(n):t+"?ref="+encodeURIComponent(n)}},p=(t,n,e)=>`${t}_${n}_${e}`;export{p as buildTrackingRef,h as trackUrlRef};
1
+ const h=(t="",n="")=>{try{if(t?.startsWith("#"))return t;if(n=n.replace(/Activity Page_/g,""),/^https?:\/\//.test(t)){const r=new URL(t);return r.searchParams.has("ref")?t:(r.searchParams.set("ref",n),r.toString())}else{const[r,i=""]=t.split("#"),[c,a=""]=r.split("?"),s=new URLSearchParams(a);if(s.has("ref"))return t;s.set("ref",n);const o=s.toString()?`?${s.toString()}`:"",g=i?`#${i}`:"";return`${c}${o}${g}`}}catch{return/[?&]ref=/.test(t)?t:t?.includes("?")?t+"&ref="+encodeURIComponent(n):t+"?ref="+encodeURIComponent(n)}},p=(t,n,e)=>`${t}_${n}_${e}`;export{p as buildTrackingRef,h as trackUrlRef};
2
2
  //# sourceMappingURL=trackUrlRef.js.map
package/dist/esm/shared/trackUrlRef.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/shared/trackUrlRef.ts"],
4
- "sourcesContent": ["/**\n * \u7ED9 url \u6216 path \u6DFB\u52A0 ref \u53C2\u6570\n * @param url \u539F\u59CB url \u6216 path\n * @param refValue ref \u53C2\u6570\u7684\u503C\n * @returns \u6DFB\u52A0\u4E86 ref \u53C2\u6570\u7684\u65B0 url\n */\nexport const trackUrlRef = (url: string = '', refValue: string = ''): string => {\n try {\n // \u5386\u53F2\u57CB\u70B9\u95EE\u9898\u5904\u7406\uFF0C\u53BB\u6389pageHandle \u7684\u524D\u7F00\n refValue = refValue.replace(/Activity Page_/g, '')\n // \u5224\u65AD\u662F\u5426\u4E3A\u7EDD\u5BF9 URL\n const hasOrigin = /^https?:\\/\\//.test(url)\n if (hasOrigin) {\n const u = new URL(url)\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (u.searchParams.has('ref')) {\n return url\n }\n u.searchParams.set('ref', refValue)\n return u.toString()\n } else {\n const [pathWithQuery, hash = ''] = url.split('#')\n const [path, query = ''] = pathWithQuery.split('?')\n const params = new URLSearchParams(query)\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (params.has('ref')) {\n return url\n }\n params.set('ref', refValue)\n const queryString = params.toString() ? `?${params.toString()}` : ''\n const hashString = hash ? `#${hash}` : ''\n return `${path}${queryString}${hashString}`\n }\n } catch (e) {\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (/[?&]ref=/.test(url)) {\n return url\n }\n if (url?.includes('?')) {\n return url + '&ref=' + encodeURIComponent(refValue)\n }\n return url + '?ref=' + encodeURIComponent(refValue)\n }\n}\n\n/**\n * \u6784\u9020\u6807\u51C6\u5316 ref \u8FFD\u8E2A\u5B57\u7B26\u4E32\n * \u683C\u5F0F: `${pageHandle}_${componentType}_${componentName}`\n * @param pageHandle \u9875\u9762\u6807\u8BC6\uFF0C\u5982 'soundcore-lottery'\n * @param componentType \u7EC4\u4EF6\u7C7B\u578B\uFF0C\u5982 'copy'\n * @param componentName \u7EC4\u4EF6\u540D\u79F0\uFF0C\u5982 'lottery_banner'\n * @returns \u62FC\u63A5\u540E\u7684 ref \u5B57\u7B26\u4E32\uFF0C\u5982 'soundcore-lottery_copy_lottery_banner'\n */\nexport const buildTrackingRef = (pageHandle: string, componentType: string, componentName: string): string => {\n return `${pageHandle}_${componentType}_${componentName}`\n}\n"],
5
- "mappings": "AAMO,MAAMA,EAAc,CAACC,EAAc,GAAIC,EAAmB,KAAe,CAC9E,GAAI,CAKF,GAHAA,EAAWA,EAAS,QAAQ,kBAAmB,EAAE,EAE/B,eAAe,KAAKD,CAAG,EAC1B,CACb,MAAME,EAAI,IAAI,IAAIF,CAAG,EAErB,OAAIE,EAAE,aAAa,IAAI,KAAK,EACnBF,GAETE,EAAE,aAAa,IAAI,MAAOD,CAAQ,EAC3BC,EAAE,SAAS,EACpB,KAAO,CACL,KAAM,CAACC,EAAeC,EAAO,EAAE,EAAIJ,EAAI,MAAM,GAAG,EAC1C,CAACK,EAAMC,EAAQ,EAAE,EAAIH,EAAc,MAAM,GAAG,EAC5CI,EAAS,IAAI,gBAAgBD,CAAK,EAExC,GAAIC,EAAO,IAAI,KAAK,EAClB,OAAOP,EAETO,EAAO,IAAI,MAAON,CAAQ,EAC1B,MAAMO,EAAcD,EAAO,SAAS,EAAI,IAAIA,EAAO,SAAS,CAAC,GAAK,GAC5DE,EAAaL,EAAO,IAAIA,CAAI,GAAK,GACvC,MAAO,GAAGC,CAAI,GAAGG,CAAW,GAAGC,CAAU,EAC3C,CACF,MAAY,CAEV,MAAI,WAAW,KAAKT,CAAG,EACdA,EAELA,GAAK,SAAS,GAAG,EACZA,EAAM,QAAU,mBAAmBC,CAAQ,EAE7CD,EAAM,QAAU,mBAAmBC,CAAQ,CACpD,CACF,EAUaS,EAAmB,CAACC,EAAoBC,EAAuBC,IACnE,GAAGF,CAAU,IAAIC,CAAa,IAAIC,CAAa",
4
+ "sourcesContent": ["/**\n * \u7ED9 url \u6216 path \u6DFB\u52A0 ref \u53C2\u6570\n * @param url \u539F\u59CB url \u6216 path\n * @param refValue ref \u53C2\u6570\u7684\u503C\n * @returns \u6DFB\u52A0\u4E86 ref \u53C2\u6570\u7684\u65B0 url\n */\nexport const trackUrlRef = (url: string = '', refValue: string = ''): string => {\n try {\n // \u5904\u7406\u951A\u70B9\n if (url?.startsWith('#')) return url\n // \u5386\u53F2\u57CB\u70B9\u95EE\u9898\u5904\u7406\uFF0C\u53BB\u6389pageHandle \u7684\u524D\u7F00\n refValue = refValue.replace(/Activity Page_/g, '')\n // \u5224\u65AD\u662F\u5426\u4E3A\u7EDD\u5BF9 URL\n const hasOrigin = /^https?:\\/\\//.test(url)\n if (hasOrigin) {\n const u = new URL(url)\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (u.searchParams.has('ref')) {\n return url\n }\n u.searchParams.set('ref', refValue)\n return u.toString()\n } else {\n const [pathWithQuery, hash = ''] = url.split('#')\n const [path, query = ''] = pathWithQuery.split('?')\n const params = new URLSearchParams(query)\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (params.has('ref')) {\n return url\n }\n params.set('ref', refValue)\n const queryString = params.toString() ? `?${params.toString()}` : ''\n const hashString = hash ? `#${hash}` : ''\n return `${path}${queryString}${hashString}`\n }\n } catch (e) {\n // \u5982\u679C\u5DF2\u6709 ref \u53C2\u6570\uFF0C\u8DF3\u8FC7\u8986\u76D6\n if (/[?&]ref=/.test(url)) {\n return url\n }\n if (url?.includes('?')) {\n return url + '&ref=' + encodeURIComponent(refValue)\n }\n return url + '?ref=' + encodeURIComponent(refValue)\n }\n}\n\n/**\n * \u6784\u9020\u6807\u51C6\u5316 ref \u8FFD\u8E2A\u5B57\u7B26\u4E32\n * \u683C\u5F0F: `${pageHandle}_${componentType}_${componentName}`\n * @param pageHandle \u9875\u9762\u6807\u8BC6\uFF0C\u5982 'soundcore-lottery'\n * @param componentType \u7EC4\u4EF6\u7C7B\u578B\uFF0C\u5982 'copy'\n * @param componentName \u7EC4\u4EF6\u540D\u79F0\uFF0C\u5982 'lottery_banner'\n * @returns \u62FC\u63A5\u540E\u7684 ref \u5B57\u7B26\u4E32\uFF0C\u5982 'soundcore-lottery_copy_lottery_banner'\n */\nexport const buildTrackingRef = (pageHandle: string, componentType: string, componentName: string): string => {\n return `${pageHandle}_${componentType}_${componentName}`\n}\n"],
5
+ "mappings": "AAMO,MAAMA,EAAc,CAACC,EAAc,GAAIC,EAAmB,KAAe,CAC9E,GAAI,CAEF,GAAID,GAAK,WAAW,GAAG,EAAG,OAAOA,EAKjC,GAHAC,EAAWA,EAAS,QAAQ,kBAAmB,EAAE,EAE/B,eAAe,KAAKD,CAAG,EAC1B,CACb,MAAME,EAAI,IAAI,IAAIF,CAAG,EAErB,OAAIE,EAAE,aAAa,IAAI,KAAK,EACnBF,GAETE,EAAE,aAAa,IAAI,MAAOD,CAAQ,EAC3BC,EAAE,SAAS,EACpB,KAAO,CACL,KAAM,CAACC,EAAeC,EAAO,EAAE,EAAIJ,EAAI,MAAM,GAAG,EAC1C,CAACK,EAAMC,EAAQ,EAAE,EAAIH,EAAc,MAAM,GAAG,EAC5CI,EAAS,IAAI,gBAAgBD,CAAK,EAExC,GAAIC,EAAO,IAAI,KAAK,EAClB,OAAOP,EAETO,EAAO,IAAI,MAAON,CAAQ,EAC1B,MAAMO,EAAcD,EAAO,SAAS,EAAI,IAAIA,EAAO,SAAS,CAAC,GAAK,GAC5DE,EAAaL,EAAO,IAAIA,CAAI,GAAK,GACvC,MAAO,GAAGC,CAAI,GAAGG,CAAW,GAAGC,CAAU,EAC3C,CACF,MAAY,CAEV,MAAI,WAAW,KAAKT,CAAG,EACdA,EAELA,GAAK,SAAS,GAAG,EACZA,EAAM,QAAU,mBAAmBC,CAAQ,EAE7CD,EAAM,QAAU,mBAAmBC,CAAQ,CACpD,CACF,EAUaS,EAAmB,CAACC,EAAoBC,EAAuBC,IACnE,GAAGF,CAAU,IAAIC,CAAa,IAAIC,CAAa",
6
6
  "names": ["trackUrlRef", "url", "refValue", "u", "pathWithQuery", "hash", "path", "query", "params", "queryString", "hashString", "buildTrackingRef", "pageHandle", "componentType", "componentName"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.88",
3
+ "version": "1.1.89",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/style.css CHANGED
@@ -4963,9 +4963,6 @@ video {
4963
4963
  .tablet\:h-\[18\.22vw\] {
4964
4964
  height: 18.22vw;
4965
4965
  }
4966
- .tablet\:h-\[240px\] {
4967
- height: 240px;
4968
- }
4969
4966
  .tablet\:h-\[24px\] {
4970
4967
  height: 24px;
4971
4968
  }
@@ -5504,9 +5501,15 @@ video {
5504
5501
  .laptop\:aspect-\[1024\/520\] {
5505
5502
  aspect-ratio: 1024/520;
5506
5503
  }
5504
+ .laptop\:aspect-\[288\/192\] {
5505
+ aspect-ratio: 288/192;
5506
+ }
5507
5507
  .laptop\:aspect-\[332\/190\] {
5508
5508
  aspect-ratio: 332/190;
5509
5509
  }
5510
+ .laptop\:aspect-\[440\/192\] {
5511
+ aspect-ratio: 440/192;
5512
+ }
5510
5513
  .laptop\:aspect-\[440\/280\] {
5511
5514
  aspect-ratio: 440/280;
5512
5515
  }
@@ -6512,6 +6515,12 @@ video {
6512
6515
  .desktop\:aspect-\[1440\/700\] {
6513
6516
  aspect-ratio: 1440/700;
6514
6517
  }
6518
+ .desktop\:aspect-\[427\/256\] {
6519
+ aspect-ratio: 427/256;
6520
+ }
6521
+ .desktop\:aspect-\[648\/256\] {
6522
+ aspect-ratio: 648/256;
6523
+ }
6515
6524
  .desktop\:aspect-\[648\/448\] {
6516
6525
  aspect-ratio: 648/448;
6517
6526
  }
@@ -6586,9 +6595,6 @@ video {
6586
6595
  .desktop\:h-\[24px\] {
6587
6596
  height: 24px;
6588
6597
  }
6589
- .desktop\:h-\[256px\] {
6590
- height: 256px;
6591
- }
6592
6598
  .desktop\:h-\[280px\] {
6593
6599
  height: 280px;
6594
6600
  }
@@ -7146,9 +7152,15 @@ video {
7146
7152
  .lg-desktop\:aspect-\[543\/320\] {
7147
7153
  aspect-ratio: 543/320;
7148
7154
  }
7155
+ .lg-desktop\:aspect-\[544\/320\] {
7156
+ aspect-ratio: 544/320;
7157
+ }
7149
7158
  .lg-desktop\:aspect-\[644\/320\] {
7150
7159
  aspect-ratio: 644/320;
7151
7160
  }
7161
+ .lg-desktop\:aspect-\[824\/320\] {
7162
+ aspect-ratio: 824/320;
7163
+ }
7152
7164
  .lg-desktop\:size-12 {
7153
7165
  width: 3rem;
7154
7166
  height: 3rem;
@@ -7243,9 +7255,6 @@ video {
7243
7255
  .lg-desktop\:h-\[28px\] {
7244
7256
  height: 28px;
7245
7257
  }
7246
- .lg-desktop\:h-\[320px\] {
7247
- height: 320px;
7248
- }
7249
7258
  .lg-desktop\:h-\[362px\] {
7250
7259
  height: 362px;
7251
7260
  }