@anker-in/headless-ui 1.3.69 → 1.3.70
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.
- package/dist/cjs/biz-components/ImageTextOverlay/index.js +2 -2
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
- package/dist/esm/biz-components/ImageTextOverlay/index.js +2 -2
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
- package/package.json +1 -1
- package/style.css +1 -13
- package/tailwind.config.js +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var V=Object.create;var v=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var l in t)v(e,l,{get:t[l],enumerable:!0})},N=(e,t,l,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of G(t))!q.call(e,o)&&o!==l&&v(e,o,{get:()=>t[o],enumerable:!(s=F(t,o))||s.enumerable});return e};var S=(e,t,l)=>(l=e!=null?V(Q(e)):{},N(t||!e||!e.__esModule?v(l,"default",{value:e,enumerable:!0}):l,e)),U=e=>N(v({},"__esModule",{value:!0}),e);var se={};K(se,{default:()=>le});module.exports=U(se);var a=require("react/jsx-runtime"),I=S(require("react")),i=require("react"),r=require("../../helpers/utils.js"),P=require("../../components/heading.js"),D=require("../../components/text.js"),_=S(require("../../components/picture.js")),O=require("../../hooks/useExposure.js"),z=require("../../shared/Styles.js"),A=require("../../shared/trackUrlRef.js"),E=require("../../helpers/utils.js"),B=require("../AiuiProvider/index.js"),L=require("react-responsive"),b=require("swiper/react"),M=require("swiper/modules"),ie=require("swiper/css"),pe=require("swiper/css/pagination");const W="content",x="image_text_overlay",w="image",X="image-text-overlay-mobile-pagination",y={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},J=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(", ")},Y=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",Z=(e,t)=>{const l=[];for(let s=0;s<e.length;s+=t)l.push(e.slice(s,s+t));return l},ee=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"}},te=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",ae=(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=J(e.backgroundImage),d=Y(e.backgroundImage),p=te(t,l),m=I.useRef(null),{locale:k="us",pageHandle:g}=(0,B.useAiuiContext)();(0,O.useExposure)(m,{componentType:w,componentName:x,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const f=e.link?(0,E.getLocalizedPath)(e.link,k):void 0,u=f?(0,A.trackUrlRef)(f,`${g??""}_${w}_${x}`):void 0,c=`${e.title}#${e.subtitle||""}#${e.title}`,h=ae(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",h,p,s?.card),children:[u&&(0,a.jsx)("a",{href:u,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${w}#${x}`,"data-headless-title-desc-button":c}),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",html:e.title,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)}),e.subtitle&&(0,a.jsx)(D.Text,{as:"p",size:"none",weight:"bold",html:e.subtitle,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)})]})]})},C=(0,i.forwardRef)(({data:e,className:t,classNames:l={},...s},o)=>{const d=I.useRef(null),{items:p=[]}=e,[m,k]=(0,i.useState)(!1),g=(0,L.useMediaQuery)({query:"(max-width: 767px)"}),f=(0,i.useId)(),u=`${X}-${f.replace(/[:]/g,"")}`;if((0,i.useEffect)(()=>{k(g)},[g]),(0,O.useExposure)(d,{componentType:W,componentName:x}),I.useImperativeHandle(o,()=>d.current),!p.length)return null;const c=p.length,h=c>3&&m,j=Z(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:h?(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:[M.Pagination],slidesPerView:1,pagination:{clickable:!0,el:`.${u}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:j.map((T,n)=>(0,a.jsx)(b.SwiperSlide,{className:"!h-auto",children:(0,a.jsx)("div",{className:"flex flex-col gap-4",children:T.map((H,$)=>(0,a.jsx)(R,{item:H,index:n*3+$,count:c,classNames:l},n*3+$))})},n))}),(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)(u,"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,4 +14,4 @@
|
|
|
14
14
|
border-radius: 9999px;
|
|
15
15
|
background: #080A0F;
|
|
16
16
|
}
|
|
17
|
-
`})]}):(0,a.jsx)("div",{className:(0,r.cn)("image-text-overlay-grid","grid gap-4",
|
|
17
|
+
`})]}):(0,a.jsx)("div",{className:(0,r.cn)("image-text-overlay-grid","grid gap-4",ee(c),l.grid),children:p.map((T,n)=>(0,a.jsx)(R,{item:T,index:n,count:c,classNames:l},n))})})});C.displayName="ImageTextOverlay";var le=(0,z.withLayout)(C);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var j=Object.create;var b=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var Z=(t,
|
|
1
|
+
"use strict";"use client";var j=Object.create;var b=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var Z=(t,o)=>{for(var n in o)b(t,n,{get:o[n],enumerable:!0})},I=(t,o,n,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of D(o))!W.call(t,p)&&p!==n&&b(t,p,{get:()=>o[p],enumerable:!(d=A(o,p))||d.enumerable});return t};var E=(t,o,n)=>(n=t!=null?j(H(t)):{},I(o||!t||!t.__esModule?b(n,"default",{value:t,enumerable:!0}):n,t)),_=t=>I(b({},"__esModule",{value:!0}),t);var Y={};Z(Y,{default:()=>X});module.exports=_(Y);var e=require("react/jsx-runtime"),s=E(require("react")),S=require("../../shared/Styles.js"),m=require("../../helpers/utils.js"),L=require("../../hooks/useExposure.js"),O=require("../AiuiProvider/index.js"),$=E(require("../Media/index.js")),te=require("swiper/css"),oe=require("swiper/css/navigation"),R=require("../../components/index.js"),k=require("swiper/react"),V=require("swiper/modules");const F=({disabled:t})=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[(0,e.jsx)("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:t?"0.2":"0.6"}),(0,e.jsx)("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),q=({disabled:t})=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[(0,e.jsx)("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:t?"0.2":"0.6"}),(0,e.jsx)("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),G="video",J="media_text_overlay",K=()=>(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,e.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),Q=()=>(0,e.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,e.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),U=({data:t,configuration:o,jIndex:n,classNames:d={}})=>{const p=(0,s.useRef)(null),x=(0,s.useRef)(null),{content:a,media:i}=t,f=o?.theme||"light",v=o?.isAutoPlay??!0,[h,c]=(0,s.useState)(!1);(0,L.useExposure)(p,{componentType:G,componentName:J,position:n,componentTitle:a,navigation:o?.activeTab});const w=(0,s.useMemo)(()=>[i.lgDesktop,i.desktop,i.laptop,i.pad,i.mobile].some(l=>l?.mimeType==="video/mp4"),[i]),N=(0,s.useCallback)(()=>{const l=x.current;l&&(l.paused?(l.play(),c(!0)):(l.pause(),c(!1)))},[]);return(0,s.useEffect)(()=>{const l=x.current;if(!l||!w||!v)return;const y=new IntersectionObserver(u=>{u.forEach(g=>{g.isIntersecting?l.play().catch(M=>{console.warn("Video autoplay failed:",M)}):l.pause()})},{threshold:.5});return y.observe(l),()=>{y.disconnect()}},[w,v]),(0,e.jsxs)("div",{className:(0,m.cn)("item-wrapper rounded-box group relative box-border w-full overflow-hidden",{"aiui-dark":f==="dark"}),ref:p,children:[(0,e.jsx)("div",{className:"absolute inset-0",children:(0,e.jsx)($.default,{pcImage:i.lgDesktop||i.desktop,desktopImage:i.desktop,laptopImage:i.laptop,padImage:i.pad,mobileImage:i.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:x,muted:!0,loop:!0,playsInline:!0,autoPlay:v,onVideoPlay:()=>c(!0),onVideoPause:()=>c(!1),onVideoEnded:()=>c(!1)})}),w&&(0,e.jsx)("div",{className:"desktop:p-8 absolute bottom-0 right-0 z-30 p-6",children:(0,e.jsx)("button",{type:"button","aria-label":h?"Pause video":"Play video",onClick:N,className:(0,m.cn)("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",d.playButton),children:h?(0,e.jsx)(Q,{}):(0,e.jsx)(K,{})})}),(0,e.jsx)("div",{className:(0,m.cn)("text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20",d.overlay),children:(0,e.jsx)("div",{className:(0,m.cn)("flex items-end justify-between gap-4",d.content),children:(0,e.jsx)(R.Heading,{size:2,html:a,className:"line-clamp-3"})})})]})},T=s.default.forwardRef((t,o)=>{const{data:n,className:d,classNames:p={},...x}=t,{items:a=[],theme:i="dark",size:f="sm",isShowPagination:v=!0,isAutoPlay:h=!0}=n,{locale:c="us"}=(0,O.useAiuiContext)(),w=(0,s.useRef)(null),N={lg:"aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] lg-desktop:max-w-[1920px]",sm:"aspect-[390/240] tablet:aspect-[768/240] laptop:aspect-[1024/288] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] lg-desktop:max-w-[1920px]"},l={2:"aspect-[296/360] max-w-[296px] tablet:aspect-[346/360] tablet:max-w-[346px] laptop:aspect-[440/360] laptop:max-w-[440px] desktop:aspect-[648/384] desktop:max-w-[648px] lg-desktop:aspect-[824/480] lg-desktop:max-w-[824px]",3:"aspect-[296/360] max-w-[296px] tablet:aspect-[296/360] tablet:max-w-[296px] laptop:aspect-[288/360] laptop:max-w-[288px] desktop:aspect-[427/384] desktop:max-w-[427px] lg-desktop:aspect-[544/480] lg-desktop:max-w-[544px]",4:"aspect-[296/360] max-w-[296px] tablet:aspect-[296/360] tablet:max-w-[296px] laptop:aspect-[288/360] laptop:max-w-[288px] desktop:aspect-[316/384] desktop:max-w-[316px] lg-desktop:aspect-[404/480] lg-desktop:max-w-[404px]"},y=a.length===1?N[f]:l[a.length>4?4:a.length],[u,g]=(0,s.useState)({isBeginning:!0,isEnd:!1}),M={0:{spaceBetween:12},1440:{spaceBetween:16}},B=s.default.useId().replace(/:/g,""),C=`${B}-custom-swiper-button-next`,z=`${B}-custom-swiper-button-prev`;return(0,e.jsx)("section",{"data-ui-component-id":"MediaTextOverlay",ref:o,...x,className:(0,m.cn)("mediaTextOverlayBlock text-info-primary",d,p.root),children:a&&a.length>0?(0,e.jsxs)("div",{className:"group relative",children:[(0,e.jsx)(k.Swiper,{className:"!overflow-visible",modules:[V.Navigation],navigation:{nextEl:`.${C}`,prevEl:`.${z}`},onSwiper:r=>{w.current=r,g({isBeginning:r.isBeginning,isEnd:r.isEnd})},onReachEnd:()=>{g(r=>({...r,isEnd:!0}))},onReachBeginning:()=>{g(r=>({...r,isBeginning:!0}))},onFromEdge:()=>{g({isBeginning:!1,isEnd:!1})},slidesPerView:"auto",breakpoints:M,children:a.map((r,P)=>(0,e.jsx)(k.SwiperSlide,{className:(0,m.cn)("!flex",y),children:(0,e.jsx)(U,{data:r,configuration:{theme:i,size:f,num:a.length,locale:c,onlyOne:a.length===1,sizeMultiplier:a.length>4?4:a.length,index:P,isAutoPlay:h},jIndex:P})},`${B}-SwiperSlide-${P}`))}),v&&a.length>1&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("button",{className:`${z} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${u.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:(0,e.jsx)(F,{disabled:u.isBeginning})}),(0,e.jsx)("button",{className:`${C} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${u.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:(0,e.jsx)(q,{disabled:u.isEnd})})]})]}):null})});T.displayName="MediaTextOverlay";var X=(0,S.withLayout)(T);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as Y,jsx as a,jsxs as x}from"react/jsx-runtime";import*as h from"react";import{forwardRef as R,useEffect as C,useId as P,useState as D}from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as _}from"../../components/heading.js";import{Text as z}from"../../components/text.js";import A from"../../components/picture.js";import{useExposure as w}from"../../hooks/useExposure.js";import{withLayout as E}from"../../shared/Styles.js";import{trackUrlRef as B}from"../../shared/trackUrlRef.js";import{getLocalizedPath as L}from"../../helpers/utils.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{useMediaQuery as j}from"react-responsive";import{Swiper as H,SwiperSlide as V}from"swiper/react";import{Pagination as F}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const G="content",f="image_text_overlay",T="image",Q="image-text-overlay-mobile-pagination",v={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},q=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(", ")},K=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",U=(e,t)=>{const s=[];for(let l=0;l<e.length;l+=t)s.push(e.slice(l,l+t));return s},W=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"}},X=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",J=(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=q(e.backgroundImage),c=K(e.backgroundImage),o=X(t,s),u=h.useRef(null),{locale:y="us",pageHandle:m}=M();w(u,{componentType:T,componentName:f,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const g=e.link?L(e.link,y):void 0,n=g?B(g,`${m??""}_${T}_${f}`):void 0,i=`${e.title}#${e.subtitle||""}#${e.title}`,b=J(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",b,o,l?.card),children:[n&&a("a",{href:n,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${T}#${f}`,"data-headless-title-desc-button":i}),e.backgroundImage?.isShowVideo?x(Y,{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(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(_,{as:"h4",size:2,weight:"bold",html:e.title,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)}),e.subtitle&&a(z,{as:"p",size:"none",weight:"bold",html:e.subtitle,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)})]})]})},$=R(({data:e,className:t,classNames:s={},...l},d)=>{const c=h.useRef(null),{items:o=[]}=e,[u,y]=D(!1),m=j({query:"(max-width: 767px)"}),g=P(),n=`${Q}-${g.replace(/[:]/g,"")}`;if(C(()=>{y(m)},[m]),w(c,{componentType:G,componentName:f}),h.useImperativeHandle(d,()=>c.current),!o.length)return null;const i=o.length,b=i>3&&u,N=U(o,3);return a("div",{ref:c,className:r("image-text-overlay-root",t,s.root),"data-ui-component-id":"ImageTextOverlay",...l,children:b?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:[F],slidesPerView:1,pagination:{clickable:!0,el:`.${n}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:N.map((k,p)=>a(V,{className:"!h-auto",children:a("div",{className:"flex flex-col gap-4",children:k.map((S,I)=>a(O,{item:S,index:p*3+I,count:i,classNames:s},p*3+I))})},p))}),a("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:a("div",{className:r(n,"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,4 +14,4 @@
|
|
|
14
14
|
border-radius: 9999px;
|
|
15
15
|
background: #080A0F;
|
|
16
16
|
}
|
|
17
|
-
`})]}):a("div",{className:r("image-text-overlay-grid","grid gap-4",
|
|
17
|
+
`})]}):a("div",{className:r("image-text-overlay-grid","grid gap-4",W(i),s.grid),children:o.map((k,p)=>a(O,{item:k,index:p,count:i,classNames:s},p))})})});$.displayName="ImageTextOverlay";var fe=E($);export{fe as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{Fragment as K,jsx as e,jsxs as d}from"react/jsx-runtime";import z,{useRef as B,useMemo as T,useState as I,useEffect as S,useCallback as L}from"react";import{withLayout as O}from"../../shared/Styles.js";import{cn as r}from"../../helpers/utils.js";import{useExposure as $}from"../../hooks/useExposure.js";import{useAiuiContext as R}from"../AiuiProvider/index.js";import V from"../Media/index.js";import"swiper/css";import"swiper/css/navigation";import{Heading as j}from"../../components/index.js";import{Swiper as A,SwiperSlide as D}from"swiper/react";import{Navigation as H}from"swiper/modules";const W=({disabled:i})=>d("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),e("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),Z=({disabled:i})=>d("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),e("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),_="video",F="media_text_overlay",q=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),G=()=>d("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),e("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),J=({data:i,configuration:c,jIndex:y,classNames:m={}})=>{const
|
|
1
|
+
"use client";import{Fragment as K,jsx as e,jsxs as d}from"react/jsx-runtime";import z,{useRef as B,useMemo as T,useState as I,useEffect as S,useCallback as L}from"react";import{withLayout as O}from"../../shared/Styles.js";import{cn as r}from"../../helpers/utils.js";import{useExposure as $}from"../../hooks/useExposure.js";import{useAiuiContext as R}from"../AiuiProvider/index.js";import V from"../Media/index.js";import"swiper/css";import"swiper/css/navigation";import{Heading as j}from"../../components/index.js";import{Swiper as A,SwiperSlide as D}from"swiper/react";import{Navigation as H}from"swiper/modules";const W=({disabled:i})=>d("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),e("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),Z=({disabled:i})=>d("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),e("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),_="video",F="media_text_overlay",q=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),G=()=>d("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),e("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),J=({data:i,configuration:c,jIndex:y,classNames:m={}})=>{const v=B(null),u=B(null),{content:t,media:o}=i,w=c?.theme||"light",g=c?.isAutoPlay??!0,[f,l]=I(!1);$(v,{componentType:_,componentName:F,position:y,componentTitle:t,navigation:c?.activeTab});const x=T(()=>[o.lgDesktop,o.desktop,o.laptop,o.pad,o.mobile].some(s=>s?.mimeType==="video/mp4"),[o]),b=L(()=>{const s=u.current;s&&(s.paused?(s.play(),l(!0)):(s.pause(),l(!1)))},[]);return S(()=>{const s=u.current;if(!s||!x||!g)return;const h=new IntersectionObserver(n=>{n.forEach(p=>{p.isIntersecting?s.play().catch(k=>{console.warn("Video autoplay failed:",k)}):s.pause()})},{threshold:.5});return h.observe(s),()=>{h.disconnect()}},[x,g]),d("div",{className:r("item-wrapper rounded-box group relative box-border w-full overflow-hidden",{"aiui-dark":w==="dark"}),ref:v,children:[e("div",{className:"absolute inset-0",children:e(V,{pcImage:o.lgDesktop||o.desktop,desktopImage:o.desktop,laptopImage:o.laptop,padImage:o.pad,mobileImage:o.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:u,muted:!0,loop:!0,playsInline:!0,autoPlay:g,onVideoPlay:()=>l(!0),onVideoPause:()=>l(!1),onVideoEnded:()=>l(!1)})}),x&&e("div",{className:"desktop:p-8 absolute bottom-0 right-0 z-30 p-6",children:e("button",{type:"button","aria-label":f?"Pause video":"Play video",onClick:b,className:r("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",m.playButton),children:f?e(G,{}):e(q,{})})}),e("div",{className:r("text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20",m.overlay),children:e("div",{className:r("flex items-end justify-between gap-4",m.content),children:e(j,{size:2,html:t,className:"line-clamp-3"})})})]})},E=z.forwardRef((i,c)=>{const{data:y,className:m,classNames:v={},...u}=i,{items:t=[],theme:o="dark",size:w="sm",isShowPagination:g=!0,isAutoPlay:f=!0}=y,{locale:l="us"}=R(),x=B(null),b={lg:"aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] lg-desktop:max-w-[1920px]",sm:"aspect-[390/240] tablet:aspect-[768/240] laptop:aspect-[1024/288] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] lg-desktop:max-w-[1920px]"},s={2:"aspect-[296/360] max-w-[296px] tablet:aspect-[346/360] tablet:max-w-[346px] laptop:aspect-[440/360] laptop:max-w-[440px] desktop:aspect-[648/384] desktop:max-w-[648px] lg-desktop:aspect-[824/480] lg-desktop:max-w-[824px]",3:"aspect-[296/360] max-w-[296px] tablet:aspect-[296/360] tablet:max-w-[296px] laptop:aspect-[288/360] laptop:max-w-[288px] desktop:aspect-[427/384] desktop:max-w-[427px] lg-desktop:aspect-[544/480] lg-desktop:max-w-[544px]",4:"aspect-[296/360] max-w-[296px] tablet:aspect-[296/360] tablet:max-w-[296px] laptop:aspect-[288/360] laptop:max-w-[288px] desktop:aspect-[316/384] desktop:max-w-[316px] lg-desktop:aspect-[404/480] lg-desktop:max-w-[404px]"},h=t.length===1?b[w]:s[t.length>4?4:t.length],[n,p]=I({isBeginning:!0,isEnd:!1}),k={0:{spaceBetween:12},1440:{spaceBetween:16}},N=z.useId().replace(/:/g,""),P=`${N}-custom-swiper-button-next`,C=`${N}-custom-swiper-button-prev`;return e("section",{"data-ui-component-id":"MediaTextOverlay",ref:c,...u,className:r("mediaTextOverlayBlock text-info-primary",m,v.root),children:t&&t.length>0?d("div",{className:"group relative",children:[e(A,{className:"!overflow-visible",modules:[H],navigation:{nextEl:`.${P}`,prevEl:`.${C}`},onSwiper:a=>{x.current=a,p({isBeginning:a.isBeginning,isEnd:a.isEnd})},onReachEnd:()=>{p(a=>({...a,isEnd:!0}))},onReachBeginning:()=>{p(a=>({...a,isBeginning:!0}))},onFromEdge:()=>{p({isBeginning:!1,isEnd:!1})},slidesPerView:"auto",breakpoints:k,children:t.map((a,M)=>e(D,{className:r("!flex",h),children:e(J,{data:a,configuration:{theme:o,size:w,num:t.length,locale:l,onlyOne:t.length===1,sizeMultiplier:t.length>4?4:t.length,index:M,isAutoPlay:f},jIndex:M})},`${N}-SwiperSlide-${M}`))}),g&&t.length>1&&d(K,{children:[e("button",{className:`${C} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${n.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:e(W,{disabled:n.isBeginning})}),e("button",{className:`${P} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${n.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:e(Z,{disabled:n.isEnd})})]})]}):null})});E.displayName="MediaTextOverlay";var ne=O(E);export{ne as default};
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -2029,9 +2029,6 @@ video {
|
|
|
2029
2029
|
.max-w-\[360px\] {
|
|
2030
2030
|
max-width: 360px;
|
|
2031
2031
|
}
|
|
2032
|
-
.max-w-\[390px\] {
|
|
2033
|
-
max-width: 390px;
|
|
2034
|
-
}
|
|
2035
2032
|
.max-w-\[420px\] {
|
|
2036
2033
|
max-width: 420px;
|
|
2037
2034
|
}
|
|
@@ -4824,7 +4821,7 @@ video {
|
|
|
4824
4821
|
color: var(--brand-color-0);
|
|
4825
4822
|
}
|
|
4826
4823
|
.hover\:text-btn-primary-active-foreground:hover {
|
|
4827
|
-
color: var(--
|
|
4824
|
+
color: var(--badge-text-color, #ffffff);
|
|
4828
4825
|
}
|
|
4829
4826
|
.hover\:text-btn-primary-foreground:hover {
|
|
4830
4827
|
color: var(--info-white-color);
|
|
@@ -5751,9 +5748,6 @@ video {
|
|
|
5751
5748
|
.tablet\:max-w-\[704px\] {
|
|
5752
5749
|
max-width: 704px;
|
|
5753
5750
|
}
|
|
5754
|
-
.tablet\:max-w-\[768px\] {
|
|
5755
|
-
max-width: 768px;
|
|
5756
|
-
}
|
|
5757
5751
|
.tablet\:max-w-\[896px\] {
|
|
5758
5752
|
max-width: 896px;
|
|
5759
5753
|
}
|
|
@@ -6637,9 +6631,6 @@ video {
|
|
|
6637
6631
|
.laptop\:min-w-0 {
|
|
6638
6632
|
min-width: 0px;
|
|
6639
6633
|
}
|
|
6640
|
-
.laptop\:max-w-\[1024px\] {
|
|
6641
|
-
max-width: 1024px;
|
|
6642
|
-
}
|
|
6643
6634
|
.laptop\:max-w-\[286px\] {
|
|
6644
6635
|
max-width: 286px;
|
|
6645
6636
|
}
|
|
@@ -7708,9 +7699,6 @@ video {
|
|
|
7708
7699
|
.desktop\:min-w-\[288px\] {
|
|
7709
7700
|
min-width: 288px;
|
|
7710
7701
|
}
|
|
7711
|
-
.desktop\:max-w-\[1440px\] {
|
|
7712
|
-
max-width: 1440px;
|
|
7713
|
-
}
|
|
7714
7702
|
.desktop\:max-w-\[260px\] {
|
|
7715
7703
|
max-width: 260px;
|
|
7716
7704
|
}
|
package/tailwind.config.js
CHANGED
|
@@ -139,7 +139,7 @@ module.exports = {
|
|
|
139
139
|
foreground: 'var(--info-white-color)',
|
|
140
140
|
active: {
|
|
141
141
|
DEFAULT: 'var(--brand-color-0)',
|
|
142
|
-
foreground: 'var(--
|
|
142
|
+
foreground: 'var(--badge-text-color, #ffffff)',
|
|
143
143
|
},
|
|
144
144
|
disabled: {
|
|
145
145
|
DEFAULT: 'var(--info-quaternary-color)',
|