@anker-in/headless-ui 1.3.44 → 1.3.45

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 (6) hide show
  1. package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
  2. package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +3 -3
  3. package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
  4. package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +3 -3
  5. package/package.json +1 -1
  6. package/style.css +81 -0
package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var $=Object.create;var x=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var H=(t,s)=>{for(var l in s)x(t,l,{get:s[l],enumerable:!0})},C=(t,s,l,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let p of j(s))!D.call(t,p)&&p!==l&&x(t,p,{get:()=>s[p],enumerable:!(c=R(s,p))||c.enumerable});return t};var M=(t,s,l)=>(l=t!=null?$(A(t)):{},C(s||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),W=t=>C(x({},"__esModule",{value:!0}),t);var U={};H(U,{default:()=>Q});module.exports=W(U);var e=require("react/jsx-runtime"),i=M(require("react")),I=require("../../shared/Styles.js"),u=require("../../helpers/utils.js"),E=require("../../hooks/useExposure.js"),T=require("../AiuiProvider/index.js"),O=M(require("../Media/index.js")),Y=require("swiper/css"),ee=require("swiper/css/navigation"),S=require("../../components/index.js"),b=require("swiper/react"),L=require("swiper/modules");const Z=({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"})]}),_=({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"})]}),F="video",q="media_text_overlay",G=()=>(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"})}),J=()=>(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"})]}),K=({data:t,configuration:s,jIndex:l,classNames:c={}})=>{const p=(0,i.useRef)(null),g=(0,i.useRef)(null),{content:r,media:a}=t,k=s?.theme||"light",P=s?.size||"lg",B=s?.onlyOne||!1,v=s?.isAutoPlay??!0,[y,d]=(0,i.useState)(!1);(0,E.useExposure)(p,{componentType:F,componentName:q,position:l,componentTitle:r,navigation:s?.activeTab});const m=(0,i.useMemo)(()=>[a.lgDesktop,a.desktop,a.laptop,a.pad,a.mobile].some(n=>n?.mimeType==="video/mp4"),[a]),N=(0,i.useCallback)(()=>{const n=g.current;n&&(n.paused?(n.play(),d(!0)):(n.pause(),d(!1)))},[]);return(0,i.useEffect)(()=>{const n=g.current;if(!n||!m||!v)return;const h=new IntersectionObserver(o=>{o.forEach(f=>{f.isIntersecting?n.play().catch(V=>{console.warn("Video autoplay failed:",V)}):n.pause()})},{threshold:.5});return h.observe(n),()=>{h.disconnect()}},[m,v]),(0,e.jsxs)("div",{className:(0,u.cn)("item-wrapper rounded-box group relative box-border w-full overflow-hidden",B?{lg:"aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]",sm:"h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]"}[P]:"tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]",{"aiui-dark":k==="dark"}),ref:p,children:[(0,e.jsx)("div",{className:"absolute inset-0",children:(0,e.jsx)(O.default,{pcImage:a.lgDesktop||a.desktop,desktopImage:a.desktop,laptopImage:a.laptop,padImage:a.pad,mobileImage:a.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:g,muted:!0,loop:!0,playsInline:!0,autoPlay:v,onVideoPlay:()=>d(!0),onVideoPause:()=>d(!1),onVideoEnded:()=>d(!1)})}),m&&(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":y?"Pause video":"Play video",onClick:N,className:(0,u.cn)("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",c.playButton),children:y?(0,e.jsx)(J,{}):(0,e.jsx)(G,{})})}),(0,e.jsx)("div",{className:(0,u.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",c.overlay),children:(0,e.jsx)("div",{className:(0,u.cn)("flex items-end justify-between gap-4",c.content),children:(0,e.jsx)(S.Heading,{size:2,html:r,className:"line-clamp-3"})})})]})},z=i.default.forwardRef((t,s)=>{const{data:l,className:c,classNames:p={},...g}=t,{items:r=[],theme:a="dark",size:k="sm",isShowPagination:P=!0,isAutoPlay:B=!0}=l,{locale:v="us"}=(0,T.useAiuiContext)(),y=(0,i.useRef)(null),[d,m]=(0,i.useState)({isBeginning:!0,isEnd:!1}),N=(0,i.useMemo)(()=>{const o=r?.length||0;return{0:{spaceBetween:12,slidesPerView:o>1?1.2:1},768:{spaceBetween:12,slidesPerView:o>2?2.3:o>1?2:1},1024:{spaceBetween:16,slidesPerView:Math.min(o,3)},1440:{spaceBetween:16,slidesPerView:Math.min(o,4)},1920:{spaceBetween:16,slidesPerView:Math.min(o,4)}}},[r?.length]),w=i.default.useId().replace(/:/g,""),n=`${w}-custom-swiper-button-next`,h=`${w}-custom-swiper-button-prev`;return(0,e.jsx)("section",{"data-ui-component-id":"MediaTextOverlay",ref:s,...g,className:(0,u.cn)("mediaTextOverlayBlock text-info-primary",c,p.root),children:r&&r.length>0?(0,e.jsxs)("div",{className:"group relative",children:[(0,e.jsx)(b.Swiper,{className:"!overflow-visible",modules:[L.Navigation],navigation:{nextEl:`.${n}`,prevEl:`.${h}`},onSwiper:o=>{y.current=o,m({isBeginning:o.isBeginning,isEnd:o.isEnd})},onReachEnd:()=>{m(o=>({...o,isEnd:!0}))},onReachBeginning:()=>{m(o=>({...o,isBeginning:!0}))},onFromEdge:()=>{m({isBeginning:!1,isEnd:!1})},breakpoints:N,children:r.map((o,f)=>(0,e.jsx)(b.SwiperSlide,{className:"!flex !h-[unset]",children:(0,e.jsx)(K,{data:o,configuration:{theme:a,size:k,num:r.length,locale:v,onlyOne:r.length===1,index:f,isAutoPlay:B},jIndex:f})},`${w}-SwiperSlide-${f}`))}),P&&r.length>1&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("button",{className:`${h} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${d.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:(0,e.jsx)(Z,{disabled:d.isBeginning})}),(0,e.jsx)("button",{className:`${n} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${d.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:(0,e.jsx)(_,{disabled:d.isEnd})})]})]}):null})});z.displayName="MediaTextOverlay";var Q=(0,I.withLayout)(z);
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,a)=>{for(var l in a)b(t,l,{get:a[l],enumerable:!0})},I=(t,a,l,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of D(a))!W.call(t,n)&&n!==l&&b(t,n,{get:()=>a[n],enumerable:!(d=A(a,n))||d.enumerable});return t};var E=(t,a,l)=>(l=t!=null?j(H(t)):{},I(a||!t||!t.__esModule?b(l,"default",{value:t,enumerable:!0}):l,t)),_=t=>I(b({},"__esModule",{value:!0}),t);var Y={};Z(Y,{default:()=>X});module.exports=_(Y);var e=require("react/jsx-runtime"),o=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"),ae=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:a,jIndex:l,classNames:d={}})=>{const n=(0,o.useRef)(null),g=(0,o.useRef)(null),{content:s,media:i}=t,f=a?.theme||"light",w=a?.isAutoPlay??!0,[h,c]=(0,o.useState)(!1);(0,L.useExposure)(n,{componentType:G,componentName:J,position:l,componentTitle:s,navigation:a?.activeTab});const v=(0,o.useMemo)(()=>[i.lgDesktop,i.desktop,i.laptop,i.pad,i.mobile].some(p=>p?.mimeType==="video/mp4"),[i]),N=(0,o.useCallback)(()=>{const p=g.current;p&&(p.paused?(p.play(),c(!0)):(p.pause(),c(!1)))},[]);return(0,o.useEffect)(()=>{const p=g.current;if(!p||!v||!w)return;const y=new IntersectionObserver(x=>{x.forEach(u=>{u.isIntersecting?p.play().catch(M=>{console.warn("Video autoplay failed:",M)}):p.pause()})},{threshold:.5});return y.observe(p),()=>{y.disconnect()}},[v,w]),(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:n,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:g,muted:!0,loop:!0,playsInline:!0,autoPlay:w,onVideoPlay:()=>c(!0),onVideoPause:()=>c(!1),onVideoEnded:()=>c(!1)})}),v&&(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:s,className:"line-clamp-3"})})})]})},T=o.default.forwardRef((t,a)=>{const{data:l,className:d,classNames:n={},...g}=t,{items:s=[],theme:i="dark",size:f="sm",isShowPagination:w=!0,isAutoPlay:h=!0}=l,{locale:c="us"}=(0,O.useAiuiContext)(),v=(0,o.useRef)(null),N={lg:"aspect-[390/400] max-w-[390px] tablet:aspect-[768/400] tablet:max-w-[768px] laptop:aspect-[1024/384] laptop:max-w-[1024px] desktop:aspect-[1440/512] desktop:max-w-[1440px] lg-desktop:aspect-[1920/640] lg-desktop:max-w-[1920px]",sm:"aspect-[390/240] max-w-[390px] tablet:aspect-[768/240] tablet:max-w-[768px] laptop:aspect-[1024/288] laptop:max-w-[1024px] desktop:aspect-[1440/384] desktop:max-w-[1440px] lg-desktop:aspect-[1920/480] lg-desktop:max-w-[1920px]"},p={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=s.length===1?N[f]:p[s.length>4?4:s.length],[x,u]=(0,o.useState)({isBeginning:!0,isEnd:!1}),M={0:{spaceBetween:12},1440:{spaceBetween:16}},B=o.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:a,...g,className:(0,m.cn)("mediaTextOverlayBlock text-info-primary",d,n.root),children:s&&s.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=>{v.current=r,u({isBeginning:r.isBeginning,isEnd:r.isEnd})},onReachEnd:()=>{u(r=>({...r,isEnd:!0}))},onReachBeginning:()=>{u(r=>({...r,isBeginning:!0}))},onFromEdge:()=>{u({isBeginning:!1,isEnd:!1})},slidesPerView:"auto",breakpoints:M,children:s.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:s.length,locale:c,onlyOne:s.length===1,sizeMultiplier:s.length>4?4:s.length,index:P,isAutoPlay:h},jIndex:P})},`${B}-SwiperSlide-${P}`))}),w&&s.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 ${x.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:(0,e.jsx)(F,{disabled:x.isBeginning})}),(0,e.jsx)("button",{className:`${C} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${x.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:(0,e.jsx)(q,{disabled:x.isEnd})})]})]}):null})});T.displayName="MediaTextOverlay";var X=(0,S.withLayout)(T);
2
2
  //# sourceMappingURL=MediaTextOverlay.js.map
package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaTextOverlay/MediaTextOverlay.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\ninterface ItemBlockProps {\n data: MediaTextOverlayItem\n configuration?: any\n jIndex?: number\n classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const { content, media } = item\n const theme = configuration?.theme || 'light'\n const size = configuration?.size || 'lg'\n const onlyOne = configuration?.onlyOne || false\n const isAutoPlay = configuration?.isAutoPlay ?? true\n\n const [isPlaying, setIsPlaying] = useState(false)\n\n useExposure(ref, {\n componentType,\n componentName,\n position: jIndex,\n componentTitle: content,\n navigation: configuration?.activeTab,\n })\n\n const hasVideo = useMemo(\n () =>\n [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n [media]\n )\n\n const handlePlayButtonClick = useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n } else {\n video.pause()\n setIsPlaying(false)\n }\n }\n }, [])\n\n useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo || !isAutoPlay) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n video.play().catch(error => {\n console.warn('Video autoplay failed:', error)\n })\n } else {\n video.pause()\n }\n })\n },\n { threshold: 0.5 }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [hasVideo, isAutoPlay])\n\n const sizeClasses = {\n lg: 'aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]',\n sm: 'h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]',\n }\n\n return (\n <div\n className={cn(\n 'item-wrapper rounded-box group relative box-border w-full overflow-hidden',\n onlyOne\n ? sizeClasses[size as keyof typeof sizeClasses]\n : 'tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]',\n {\n 'aiui-dark': theme === 'dark',\n }\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Media\n pcImage={media.lgDesktop || media.desktop}\n desktopImage={media.desktop}\n laptopImage={media.laptop}\n padImage={media.pad}\n mobileImage={media.mobile}\n videoClassName=\"absolute inset-0 size-full object-cover\"\n imgClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={isAutoPlay}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n </div>\n\n {hasVideo && (\n <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n 'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n classNames.playButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n\n <div\n className={cn(\n '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',\n classNames.overlay\n )}\n >\n <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n <Heading size={2} html={content} className=\"line-clamp-3\" />\n </div>\n </div>\n </div>\n )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n const { data, className, classNames = {}, ...rest } = props\n const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n const { locale = 'us' } = useAiuiContext()\n const swiperRef = useRef<any>(null)\n const [swiperState, setSwiperState] = useState({\n isBeginning: true,\n isEnd: false,\n })\n\n const breakpoints = useMemo(() => {\n const len = items?.length || 0\n return {\n 0: {\n spaceBetween: 12,\n slidesPerView: len > 1 ? 1.2 : 1,\n },\n 768: {\n spaceBetween: 12,\n slidesPerView: len > 2 ? 2.3 : len > 1 ? 2 : 1,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 3),\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 4),\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 4),\n },\n }\n }, [items?.length])\n\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n const nextButtonClass = `${id}-custom-swiper-button-next`\n const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n return (\n <section\n data-ui-component-id=\"MediaTextOverlay\"\n ref={ref}\n {...rest}\n className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n >\n {items && items.length > 0 ? (\n <div className=\"group relative\">\n <Swiper\n className=\"!overflow-visible\"\n modules={[Navigation]}\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n breakpoints={breakpoints}\n >\n {items.map((item, jIndex) => (\n <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className=\"!flex !h-[unset]\">\n <ItemBlock\n data={item}\n configuration={{\n theme,\n size,\n num: items.length,\n locale,\n onlyOne: items.length === 1,\n index: jIndex,\n isAutoPlay,\n }}\n jIndex={jIndex}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {isShowPagination && items.length > 1 && (\n <>\n <button\n className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Previous slide\"\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Next slide\"\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </>\n )}\n </div>\n ) : null}\n </section>\n )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
5
- "mappings": "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",
6
- "names": ["MediaTextOverlay_exports", "__export", "MediaTextOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_utils", "import_useExposure", "import_AiuiProvider", "import_Media", "import_css", "import_navigation", "import_components", "import_modules", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "configuration", "jIndex", "classNames", "ref", "videoRef", "content", "media", "theme", "size", "onlyOne", "isAutoPlay", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "Media", "MediaTextOverlay", "React", "props", "data", "className", "rest", "items", "isShowPagination", "locale", "swiperRef", "swiperState", "setSwiperState", "breakpoints", "len", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev"]
4
+ "sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\ninterface ItemBlockProps {\n data: MediaTextOverlayItem\n configuration?: any\n jIndex?: number\n classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const { content, media } = item\n const theme = configuration?.theme || 'light'\n const isAutoPlay = configuration?.isAutoPlay ?? true\n\n const [isPlaying, setIsPlaying] = useState(false)\n\n useExposure(ref, {\n componentType,\n componentName,\n position: jIndex,\n componentTitle: content,\n navigation: configuration?.activeTab,\n })\n\n const hasVideo = useMemo(\n () =>\n [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n [media]\n )\n\n const handlePlayButtonClick = useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n } else {\n video.pause()\n setIsPlaying(false)\n }\n }\n }, [])\n\n useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo || !isAutoPlay) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n video.play().catch(error => {\n console.warn('Video autoplay failed:', error)\n })\n } else {\n video.pause()\n }\n })\n },\n { threshold: 0.5 }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [hasVideo, isAutoPlay])\n\n return (\n <div\n className={cn('item-wrapper rounded-box group relative box-border w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n })}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Media\n pcImage={media.lgDesktop || media.desktop}\n desktopImage={media.desktop}\n laptopImage={media.laptop}\n padImage={media.pad}\n mobileImage={media.mobile}\n videoClassName=\"absolute inset-0 size-full object-cover\"\n imgClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={isAutoPlay}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n </div>\n\n {hasVideo && (\n <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n 'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n classNames.playButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n\n <div\n className={cn(\n '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',\n classNames.overlay\n )}\n >\n <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n <Heading size={2} html={content} className=\"line-clamp-3\" />\n </div>\n </div>\n </div>\n )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n const { data, className, classNames = {}, ...rest } = props\n const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n const { locale = 'us' } = useAiuiContext()\n const swiperRef = useRef<any>(null)\n\n const sizeClasses = {\n lg: 'aspect-[390/400] max-w-[390px] tablet:aspect-[768/400] tablet:max-w-[768px] laptop:aspect-[1024/384] laptop:max-w-[1024px] desktop:aspect-[1440/512] desktop:max-w-[1440px] lg-desktop:aspect-[1920/640] lg-desktop:max-w-[1920px]',\n sm: 'aspect-[390/240] max-w-[390px] tablet:aspect-[768/240] tablet:max-w-[768px] laptop:aspect-[1024/288] laptop:max-w-[1024px] desktop:aspect-[1440/384] desktop:max-w-[1440px] lg-desktop:aspect-[1920/480] lg-desktop:max-w-[1920px]',\n }\n\n const sizeMultiplierMap = {\n 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]',\n 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]',\n 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]',\n }\n\n const slideClassName =\n items.length === 1\n ? sizeClasses[size as keyof typeof sizeClasses]\n : sizeMultiplierMap[(items.length > 4 ? 4 : items.length) as keyof typeof sizeMultiplierMap]\n const [swiperState, setSwiperState] = useState({\n isBeginning: true,\n isEnd: false,\n })\n\n const breakpoints = {\n 0: {\n spaceBetween: 12,\n },\n 1440: {\n spaceBetween: 16,\n },\n }\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n const nextButtonClass = `${id}-custom-swiper-button-next`\n const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n return (\n <section\n data-ui-component-id=\"MediaTextOverlay\"\n ref={ref}\n {...rest}\n className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n >\n {items && items.length > 0 ? (\n <div className=\"group relative\">\n <Swiper\n className=\"!overflow-visible\"\n modules={[Navigation]}\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n slidesPerView={'auto'}\n breakpoints={breakpoints}\n >\n {items.map((item, jIndex) => (\n <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className={cn('!flex', slideClassName)}>\n <ItemBlock\n data={item}\n configuration={{\n theme,\n size,\n num: items.length,\n locale,\n onlyOne: items.length === 1,\n sizeMultiplier: items.length > 4 ? 4 : items.length,\n index: jIndex,\n isAutoPlay,\n }}\n jIndex={jIndex}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {isShowPagination && items.length > 1 && (\n <>\n <button\n className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Previous slide\"\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Next slide\"\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </>\n )}\n </div>\n ) : null}\n </section>\n )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["MediaTextOverlay_exports", "__export", "MediaTextOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_utils", "import_useExposure", "import_AiuiProvider", "import_Media", "import_css", "import_navigation", "import_components", "import_modules", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "configuration", "jIndex", "classNames", "ref", "videoRef", "content", "media", "theme", "isAutoPlay", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "Media", "MediaTextOverlay", "React", "props", "data", "className", "rest", "items", "size", "isShowPagination", "locale", "swiperRef", "sizeClasses", "sizeMultiplierMap", "slideClassName", "swiperState", "setSwiperState", "breakpoints", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev"]
7
7
  }
package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import N,{useRef as B,useMemo as C,useState as M,useEffect as E,useCallback as T}from"react";import{withLayout as O}from"../../shared/Styles.js";import{cn as v}from"../../helpers/utils.js";import{useExposure as S}from"../../hooks/useExposure.js";import{useAiuiContext as L}from"../AiuiProvider/index.js";import V from"../Media/index.js";import"swiper/css";import"swiper/css/navigation";import{Heading as $}from"../../components/index.js";import{Swiper as R,SwiperSlide as j}from"swiper/react";import{Navigation as A}from"swiper/modules";const D=({disabled:l})=>p("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:l?"0.2":"0.6"}),e("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),H=({disabled:l})=>p("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:l?"0.2":"0.6"}),e("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),W="video",Z="media_text_overlay",_=()=>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"})}),F=()=>p("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"})]}),q=({data:l,configuration:r,jIndex:w,classNames:d={}})=>{const h=B(null),c=B(null),{content:i,media:s}=l,x=r?.theme||"light",b=r?.size||"lg",k=r?.onlyOne||!1,m=r?.isAutoPlay??!0,[f,a]=M(!1);S(h,{componentType:W,componentName:Z,position:w,componentTitle:i,navigation:r?.activeTab});const n=C(()=>[s.lgDesktop,s.desktop,s.laptop,s.pad,s.mobile].some(o=>o?.mimeType==="video/mp4"),[s]),P=T(()=>{const o=c.current;o&&(o.paused?(o.play(),a(!0)):(o.pause(),a(!1)))},[]);return E(()=>{const o=c.current;if(!o||!n||!m)return;const u=new IntersectionObserver(t=>{t.forEach(g=>{g.isIntersecting?o.play().catch(I=>{console.warn("Video autoplay failed:",I)}):o.pause()})},{threshold:.5});return u.observe(o),()=>{u.disconnect()}},[n,m]),p("div",{className:v("item-wrapper rounded-box group relative box-border w-full overflow-hidden",k?{lg:"aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]",sm:"h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]"}[b]:"tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]",{"aiui-dark":x==="dark"}),ref:h,children:[e("div",{className:"absolute inset-0",children:e(V,{pcImage:s.lgDesktop||s.desktop,desktopImage:s.desktop,laptopImage:s.laptop,padImage:s.pad,mobileImage:s.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:c,muted:!0,loop:!0,playsInline:!0,autoPlay:m,onVideoPlay:()=>a(!0),onVideoPause:()=>a(!1),onVideoEnded:()=>a(!1)})}),n&&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:P,className:v("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",d.playButton),children:f?e(F,{}):e(_,{})})}),e("div",{className:v("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:e("div",{className:v("flex items-end justify-between gap-4",d.content),children:e($,{size:2,html:i,className:"line-clamp-3"})})})]})},z=N.forwardRef((l,r)=>{const{data:w,className:d,classNames:h={},...c}=l,{items:i=[],theme:s="dark",size:x="sm",isShowPagination:b=!0,isAutoPlay:k=!0}=w,{locale:m="us"}=L(),f=B(null),[a,n]=M({isBeginning:!0,isEnd:!1}),P=C(()=>{const t=i?.length||0;return{0:{spaceBetween:12,slidesPerView:t>1?1.2:1},768:{spaceBetween:12,slidesPerView:t>2?2.3:t>1?2:1},1024:{spaceBetween:16,slidesPerView:Math.min(t,3)},1440:{spaceBetween:16,slidesPerView:Math.min(t,4)},1920:{spaceBetween:16,slidesPerView:Math.min(t,4)}}},[i?.length]),y=N.useId().replace(/:/g,""),o=`${y}-custom-swiper-button-next`,u=`${y}-custom-swiper-button-prev`;return e("section",{"data-ui-component-id":"MediaTextOverlay",ref:r,...c,className:v("mediaTextOverlayBlock text-info-primary",d,h.root),children:i&&i.length>0?p("div",{className:"group relative",children:[e(R,{className:"!overflow-visible",modules:[A],navigation:{nextEl:`.${o}`,prevEl:`.${u}`},onSwiper:t=>{f.current=t,n({isBeginning:t.isBeginning,isEnd:t.isEnd})},onReachEnd:()=>{n(t=>({...t,isEnd:!0}))},onReachBeginning:()=>{n(t=>({...t,isBeginning:!0}))},onFromEdge:()=>{n({isBeginning:!1,isEnd:!1})},breakpoints:P,children:i.map((t,g)=>e(j,{className:"!flex !h-[unset]",children:e(q,{data:t,configuration:{theme:s,size:x,num:i.length,locale:m,onlyOne:i.length===1,index:g,isAutoPlay:k},jIndex:g})},`${y}-SwiperSlide-${g}`))}),b&&i.length>1&&p(G,{children:[e("button",{className:`${u} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${a.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:e(D,{disabled:a.isBeginning})}),e("button",{className:`${o} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${a.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:e(H,{disabled:a.isEnd})})]})]}):null})});z.displayName="MediaTextOverlay";var ae=O(z);export{ae as default};
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 w=B(null),x=B(null),{content:t,media:a}=i,v=c?.theme||"light",u=c?.isAutoPlay??!0,[f,p]=I(!1);$(w,{componentType:_,componentName:F,position:y,componentTitle:t,navigation:c?.activeTab});const g=T(()=>[a.lgDesktop,a.desktop,a.laptop,a.pad,a.mobile].some(o=>o?.mimeType==="video/mp4"),[a]),b=L(()=>{const o=x.current;o&&(o.paused?(o.play(),p(!0)):(o.pause(),p(!1)))},[]);return S(()=>{const o=x.current;if(!o||!g||!u)return;const h=new IntersectionObserver(l=>{l.forEach(n=>{n.isIntersecting?o.play().catch(k=>{console.warn("Video autoplay failed:",k)}):o.pause()})},{threshold:.5});return h.observe(o),()=>{h.disconnect()}},[g,u]),d("div",{className:r("item-wrapper rounded-box group relative box-border w-full overflow-hidden",{"aiui-dark":v==="dark"}),ref:w,children:[e("div",{className:"absolute inset-0",children:e(V,{pcImage:a.lgDesktop||a.desktop,desktopImage:a.desktop,laptopImage:a.laptop,padImage:a.pad,mobileImage:a.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:u,onVideoPlay:()=>p(!0),onVideoPause:()=>p(!1),onVideoEnded:()=>p(!1)})}),g&&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:w={},...x}=i,{items:t=[],theme:a="dark",size:v="sm",isShowPagination:u=!0,isAutoPlay:f=!0}=y,{locale:p="us"}=R(),g=B(null),b={lg:"aspect-[390/400] max-w-[390px] tablet:aspect-[768/400] tablet:max-w-[768px] laptop:aspect-[1024/384] laptop:max-w-[1024px] desktop:aspect-[1440/512] desktop:max-w-[1440px] lg-desktop:aspect-[1920/640] lg-desktop:max-w-[1920px]",sm:"aspect-[390/240] max-w-[390px] tablet:aspect-[768/240] tablet:max-w-[768px] laptop:aspect-[1024/288] laptop:max-w-[1024px] desktop:aspect-[1440/384] desktop:max-w-[1440px] lg-desktop:aspect-[1920/480] lg-desktop:max-w-[1920px]"},o={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[v]:o[t.length>4?4:t.length],[l,n]=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,...x,className:r("mediaTextOverlayBlock text-info-primary",m,w.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:s=>{g.current=s,n({isBeginning:s.isBeginning,isEnd:s.isEnd})},onReachEnd:()=>{n(s=>({...s,isEnd:!0}))},onReachBeginning:()=>{n(s=>({...s,isBeginning:!0}))},onFromEdge:()=>{n({isBeginning:!1,isEnd:!1})},slidesPerView:"auto",breakpoints:k,children:t.map((s,M)=>e(D,{className:r("!flex",h),children:e(J,{data:s,configuration:{theme:a,size:v,num:t.length,locale:p,onlyOne:t.length===1,sizeMultiplier:t.length>4?4:t.length,index:M,isAutoPlay:f},jIndex:M})},`${N}-SwiperSlide-${M}`))}),u&&t.length>1&&d(K,{children:[e("button",{className:`${C} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${l.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:e(W,{disabled:l.isBeginning})}),e("button",{className:`${P} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${l.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:e(Z,{disabled:l.isEnd})})]})]}):null})});E.displayName="MediaTextOverlay";var le=O(E);export{le as default};
2
2
  //# sourceMappingURL=MediaTextOverlay.js.map
package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaTextOverlay/MediaTextOverlay.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\ninterface ItemBlockProps {\n data: MediaTextOverlayItem\n configuration?: any\n jIndex?: number\n classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const { content, media } = item\n const theme = configuration?.theme || 'light'\n const size = configuration?.size || 'lg'\n const onlyOne = configuration?.onlyOne || false\n const isAutoPlay = configuration?.isAutoPlay ?? true\n\n const [isPlaying, setIsPlaying] = useState(false)\n\n useExposure(ref, {\n componentType,\n componentName,\n position: jIndex,\n componentTitle: content,\n navigation: configuration?.activeTab,\n })\n\n const hasVideo = useMemo(\n () =>\n [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n [media]\n )\n\n const handlePlayButtonClick = useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n } else {\n video.pause()\n setIsPlaying(false)\n }\n }\n }, [])\n\n useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo || !isAutoPlay) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n video.play().catch(error => {\n console.warn('Video autoplay failed:', error)\n })\n } else {\n video.pause()\n }\n })\n },\n { threshold: 0.5 }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [hasVideo, isAutoPlay])\n\n const sizeClasses = {\n lg: 'aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]',\n sm: 'h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]',\n }\n\n return (\n <div\n className={cn(\n 'item-wrapper rounded-box group relative box-border w-full overflow-hidden',\n onlyOne\n ? sizeClasses[size as keyof typeof sizeClasses]\n : 'tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]',\n {\n 'aiui-dark': theme === 'dark',\n }\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Media\n pcImage={media.lgDesktop || media.desktop}\n desktopImage={media.desktop}\n laptopImage={media.laptop}\n padImage={media.pad}\n mobileImage={media.mobile}\n videoClassName=\"absolute inset-0 size-full object-cover\"\n imgClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={isAutoPlay}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n </div>\n\n {hasVideo && (\n <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n 'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n classNames.playButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n\n <div\n className={cn(\n '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',\n classNames.overlay\n )}\n >\n <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n <Heading size={2} html={content} className=\"line-clamp-3\" />\n </div>\n </div>\n </div>\n )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n const { data, className, classNames = {}, ...rest } = props\n const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n const { locale = 'us' } = useAiuiContext()\n const swiperRef = useRef<any>(null)\n const [swiperState, setSwiperState] = useState({\n isBeginning: true,\n isEnd: false,\n })\n\n const breakpoints = useMemo(() => {\n const len = items?.length || 0\n return {\n 0: {\n spaceBetween: 12,\n slidesPerView: len > 1 ? 1.2 : 1,\n },\n 768: {\n spaceBetween: 12,\n slidesPerView: len > 2 ? 2.3 : len > 1 ? 2 : 1,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 3),\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 4),\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: Math.min(len, 4),\n },\n }\n }, [items?.length])\n\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n const nextButtonClass = `${id}-custom-swiper-button-next`\n const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n return (\n <section\n data-ui-component-id=\"MediaTextOverlay\"\n ref={ref}\n {...rest}\n className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n >\n {items && items.length > 0 ? (\n <div className=\"group relative\">\n <Swiper\n className=\"!overflow-visible\"\n modules={[Navigation]}\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n breakpoints={breakpoints}\n >\n {items.map((item, jIndex) => (\n <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className=\"!flex !h-[unset]\">\n <ItemBlock\n data={item}\n configuration={{\n theme,\n size,\n num: items.length,\n locale,\n onlyOne: items.length === 1,\n index: jIndex,\n isAutoPlay,\n }}\n jIndex={jIndex}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {isShowPagination && items.length > 1 && (\n <>\n <button\n className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Previous slide\"\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Next slide\"\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </>\n )}\n </div>\n ) : null}\n </section>\n )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useMemo", "useState", "useEffect", "useCallback", "withLayout", "cn", "useExposure", "useAiuiContext", "Media", "Heading", "Swiper", "SwiperSlide", "Navigation", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "configuration", "jIndex", "classNames", "ref", "videoRef", "content", "media", "theme", "size", "onlyOne", "isAutoPlay", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "MediaTextOverlay", "props", "data", "className", "rest", "items", "isShowPagination", "locale", "swiperRef", "swiperState", "setSwiperState", "breakpoints", "len", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev", "MediaTextOverlay_default"]
4
+ "sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n fillOpacity={disabled ? '0.2' : '0.6'}\n />\n <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\ninterface ItemBlockProps {\n data: MediaTextOverlayItem\n configuration?: any\n jIndex?: number\n classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const { content, media } = item\n const theme = configuration?.theme || 'light'\n const isAutoPlay = configuration?.isAutoPlay ?? true\n\n const [isPlaying, setIsPlaying] = useState(false)\n\n useExposure(ref, {\n componentType,\n componentName,\n position: jIndex,\n componentTitle: content,\n navigation: configuration?.activeTab,\n })\n\n const hasVideo = useMemo(\n () =>\n [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n [media]\n )\n\n const handlePlayButtonClick = useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n } else {\n video.pause()\n setIsPlaying(false)\n }\n }\n }, [])\n\n useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo || !isAutoPlay) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n video.play().catch(error => {\n console.warn('Video autoplay failed:', error)\n })\n } else {\n video.pause()\n }\n })\n },\n { threshold: 0.5 }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [hasVideo, isAutoPlay])\n\n return (\n <div\n className={cn('item-wrapper rounded-box group relative box-border w-full overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n })}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Media\n pcImage={media.lgDesktop || media.desktop}\n desktopImage={media.desktop}\n laptopImage={media.laptop}\n padImage={media.pad}\n mobileImage={media.mobile}\n videoClassName=\"absolute inset-0 size-full object-cover\"\n imgClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={isAutoPlay}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n </div>\n\n {hasVideo && (\n <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n 'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n classNames.playButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n\n <div\n className={cn(\n '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',\n classNames.overlay\n )}\n >\n <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n <Heading size={2} html={content} className=\"line-clamp-3\" />\n </div>\n </div>\n </div>\n )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n const { data, className, classNames = {}, ...rest } = props\n const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n const { locale = 'us' } = useAiuiContext()\n const swiperRef = useRef<any>(null)\n\n const sizeClasses = {\n lg: 'aspect-[390/400] max-w-[390px] tablet:aspect-[768/400] tablet:max-w-[768px] laptop:aspect-[1024/384] laptop:max-w-[1024px] desktop:aspect-[1440/512] desktop:max-w-[1440px] lg-desktop:aspect-[1920/640] lg-desktop:max-w-[1920px]',\n sm: 'aspect-[390/240] max-w-[390px] tablet:aspect-[768/240] tablet:max-w-[768px] laptop:aspect-[1024/288] laptop:max-w-[1024px] desktop:aspect-[1440/384] desktop:max-w-[1440px] lg-desktop:aspect-[1920/480] lg-desktop:max-w-[1920px]',\n }\n\n const sizeMultiplierMap = {\n 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]',\n 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]',\n 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]',\n }\n\n const slideClassName =\n items.length === 1\n ? sizeClasses[size as keyof typeof sizeClasses]\n : sizeMultiplierMap[(items.length > 4 ? 4 : items.length) as keyof typeof sizeMultiplierMap]\n const [swiperState, setSwiperState] = useState({\n isBeginning: true,\n isEnd: false,\n })\n\n const breakpoints = {\n 0: {\n spaceBetween: 12,\n },\n 1440: {\n spaceBetween: 16,\n },\n }\n // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n const id = React.useId().replace(/:/g, '')\n const nextButtonClass = `${id}-custom-swiper-button-next`\n const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n return (\n <section\n data-ui-component-id=\"MediaTextOverlay\"\n ref={ref}\n {...rest}\n className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n >\n {items && items.length > 0 ? (\n <div className=\"group relative\">\n <Swiper\n className=\"!overflow-visible\"\n modules={[Navigation]}\n navigation={{\n nextEl: `.${nextButtonClass}`,\n prevEl: `.${prevButtonClass}`,\n }}\n onSwiper={swiper => {\n swiperRef.current = swiper\n setSwiperState({\n isBeginning: swiper.isBeginning,\n isEnd: swiper.isEnd,\n })\n }}\n onReachEnd={() => {\n setSwiperState(prev => ({ ...prev, isEnd: true }))\n }}\n onReachBeginning={() => {\n setSwiperState(prev => ({ ...prev, isBeginning: true }))\n }}\n onFromEdge={() => {\n setSwiperState({ isBeginning: false, isEnd: false })\n }}\n slidesPerView={'auto'}\n breakpoints={breakpoints}\n >\n {items.map((item, jIndex) => (\n <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className={cn('!flex', slideClassName)}>\n <ItemBlock\n data={item}\n configuration={{\n theme,\n size,\n num: items.length,\n locale,\n onlyOne: items.length === 1,\n sizeMultiplier: items.length > 4 ? 4 : items.length,\n index: jIndex,\n isAutoPlay,\n }}\n jIndex={jIndex}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n\n {isShowPagination && items.length > 1 && (\n <>\n <button\n className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Previous slide\"\n >\n <PrevIcon disabled={swiperState.isBeginning} />\n </button>\n <button\n className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n aria-label=\"Next slide\"\n >\n <NextIcon disabled={swiperState.isEnd} />\n </button>\n </>\n )}\n </div>\n ) : null}\n </section>\n )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useMemo", "useState", "useEffect", "useCallback", "withLayout", "cn", "useExposure", "useAiuiContext", "Media", "Heading", "Swiper", "SwiperSlide", "Navigation", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "configuration", "jIndex", "classNames", "ref", "videoRef", "content", "media", "theme", "isAutoPlay", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "MediaTextOverlay", "props", "data", "className", "rest", "items", "size", "isShowPagination", "locale", "swiperRef", "sizeClasses", "sizeMultiplierMap", "slideClassName", "swiperState", "setSwiperState", "breakpoints", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev", "MediaTextOverlay_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.3.44",
3
+ "version": "1.3.45",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/style.css CHANGED
@@ -1180,6 +1180,9 @@ video {
1180
1180
  .aspect-\[296\/320\] {
1181
1181
  aspect-ratio: 296/320;
1182
1182
  }
1183
+ .aspect-\[296\/360\] {
1184
+ aspect-ratio: 296/360;
1185
+ }
1183
1186
  .aspect-\[356\/200\] {
1184
1187
  aspect-ratio: 356/200;
1185
1188
  }
@@ -1195,6 +1198,9 @@ video {
1195
1198
  .aspect-\[358\/480\] {
1196
1199
  aspect-ratio: 358/480;
1197
1200
  }
1201
+ .aspect-\[390\/240\] {
1202
+ aspect-ratio: 390/240;
1203
+ }
1198
1204
  .aspect-\[390\/400\] {
1199
1205
  aspect-ratio: 390/400;
1200
1206
  }
@@ -1937,6 +1943,9 @@ video {
1937
1943
  .max-w-\[262px\] {
1938
1944
  max-width: 262px;
1939
1945
  }
1946
+ .max-w-\[296px\] {
1947
+ max-width: 296px;
1948
+ }
1940
1949
  .max-w-\[300px\] {
1941
1950
  max-width: 300px;
1942
1951
  }
@@ -1952,6 +1961,9 @@ video {
1952
1961
  .max-w-\[360px\] {
1953
1962
  max-width: 360px;
1954
1963
  }
1964
+ .max-w-\[390px\] {
1965
+ max-width: 390px;
1966
+ }
1955
1967
  .max-w-\[480px\] {
1956
1968
  max-width: 480px;
1957
1969
  }
@@ -5266,12 +5278,18 @@ video {
5266
5278
  .tablet\:aspect-\[1664\/560\] {
5267
5279
  aspect-ratio: 1664/560;
5268
5280
  }
5281
+ .tablet\:aspect-\[296\/360\] {
5282
+ aspect-ratio: 296/360;
5283
+ }
5269
5284
  .tablet\:aspect-\[3060\/1180\] {
5270
5285
  aspect-ratio: 3060/1180;
5271
5286
  }
5272
5287
  .tablet\:aspect-\[346\/240\] {
5273
5288
  aspect-ratio: 346/240;
5274
5289
  }
5290
+ .tablet\:aspect-\[346\/360\] {
5291
+ aspect-ratio: 346/360;
5292
+ }
5275
5293
  .tablet\:aspect-\[704\/200\] {
5276
5294
  aspect-ratio: 704/200;
5277
5295
  }
@@ -5287,6 +5305,9 @@ video {
5287
5305
  .tablet\:aspect-\[704\/480\] {
5288
5306
  aspect-ratio: 704/480;
5289
5307
  }
5308
+ .tablet\:aspect-\[768\/240\] {
5309
+ aspect-ratio: 768/240;
5310
+ }
5290
5311
  .tablet\:aspect-\[768\/400\] {
5291
5312
  aspect-ratio: 768/400;
5292
5313
  }
@@ -5425,6 +5446,9 @@ video {
5425
5446
  .tablet\:\!max-w-\[50\%\] {
5426
5447
  max-width: 50% !important;
5427
5448
  }
5449
+ .tablet\:max-w-\[296px\] {
5450
+ max-width: 296px;
5451
+ }
5428
5452
  .tablet\:max-w-\[320px\] {
5429
5453
  max-width: 320px;
5430
5454
  }
@@ -5446,6 +5470,9 @@ video {
5446
5470
  .tablet\:max-w-\[704px\] {
5447
5471
  max-width: 704px;
5448
5472
  }
5473
+ .tablet\:max-w-\[768px\] {
5474
+ max-width: 768px;
5475
+ }
5449
5476
  .tablet\:max-w-\[896px\] {
5450
5477
  max-width: 896px;
5451
5478
  }
@@ -5938,6 +5965,9 @@ video {
5938
5965
  .laptop\:aspect-\[1\/1\] {
5939
5966
  aspect-ratio: 1/1;
5940
5967
  }
5968
+ .laptop\:aspect-\[1024\/288\] {
5969
+ aspect-ratio: 1024/288;
5970
+ }
5941
5971
  .laptop\:aspect-\[1024\/384\] {
5942
5972
  aspect-ratio: 1024/384;
5943
5973
  }
@@ -5965,6 +5995,9 @@ video {
5965
5995
  .laptop\:aspect-\[288\/192\] {
5966
5996
  aspect-ratio: 288/192;
5967
5997
  }
5998
+ .laptop\:aspect-\[288\/360\] {
5999
+ aspect-ratio: 288/360;
6000
+ }
5968
6001
  .laptop\:aspect-\[332\/190\] {
5969
6002
  aspect-ratio: 332/190;
5970
6003
  }
@@ -5974,6 +6007,9 @@ video {
5974
6007
  .laptop\:aspect-\[440\/280\] {
5975
6008
  aspect-ratio: 440/280;
5976
6009
  }
6010
+ .laptop\:aspect-\[440\/360\] {
6011
+ aspect-ratio: 440/360;
6012
+ }
5977
6013
  .laptop\:aspect-\[744\/336\] {
5978
6014
  aspect-ratio: 744/336;
5979
6015
  }
@@ -6248,9 +6284,15 @@ video {
6248
6284
  .laptop\:w-full {
6249
6285
  width: 100%;
6250
6286
  }
6287
+ .laptop\:max-w-\[1024px\] {
6288
+ max-width: 1024px;
6289
+ }
6251
6290
  .laptop\:max-w-\[286px\] {
6252
6291
  max-width: 286px;
6253
6292
  }
6293
+ .laptop\:max-w-\[288px\] {
6294
+ max-width: 288px;
6295
+ }
6254
6296
  .laptop\:max-w-\[289px\] {
6255
6297
  max-width: 289px;
6256
6298
  }
@@ -7012,6 +7054,9 @@ video {
7012
7054
  .desktop\:aspect-\[1312\/512\] {
7013
7055
  aspect-ratio: 1312/512;
7014
7056
  }
7057
+ .desktop\:aspect-\[1440\/384\] {
7058
+ aspect-ratio: 1440/384;
7059
+ }
7015
7060
  .desktop\:aspect-\[1440\/512\] {
7016
7061
  aspect-ratio: 1440/512;
7017
7062
  }
@@ -7036,15 +7081,24 @@ video {
7036
7081
  .desktop\:aspect-\[1920\/930\] {
7037
7082
  aspect-ratio: 1920/930;
7038
7083
  }
7084
+ .desktop\:aspect-\[316\/384\] {
7085
+ aspect-ratio: 316/384;
7086
+ }
7039
7087
  .desktop\:aspect-\[379\/192\] {
7040
7088
  aspect-ratio: 379/192;
7041
7089
  }
7042
7090
  .desktop\:aspect-\[427\/256\] {
7043
7091
  aspect-ratio: 427/256;
7044
7092
  }
7093
+ .desktop\:aspect-\[427\/384\] {
7094
+ aspect-ratio: 427/384;
7095
+ }
7045
7096
  .desktop\:aspect-\[648\/256\] {
7046
7097
  aspect-ratio: 648/256;
7047
7098
  }
7099
+ .desktop\:aspect-\[648\/384\] {
7100
+ aspect-ratio: 648/384;
7101
+ }
7048
7102
  .desktop\:aspect-\[648\/448\] {
7049
7103
  aspect-ratio: 648/448;
7050
7104
  }
@@ -7245,6 +7299,9 @@ video {
7245
7299
  .desktop\:min-w-\[288px\] {
7246
7300
  min-width: 288px;
7247
7301
  }
7302
+ .desktop\:max-w-\[1440px\] {
7303
+ max-width: 1440px;
7304
+ }
7248
7305
  .desktop\:max-w-\[260px\] {
7249
7306
  max-width: 260px;
7250
7307
  }
@@ -7254,12 +7311,18 @@ video {
7254
7311
  .desktop\:max-w-\[292px\] {
7255
7312
  max-width: 292px;
7256
7313
  }
7314
+ .desktop\:max-w-\[316px\] {
7315
+ max-width: 316px;
7316
+ }
7257
7317
  .desktop\:max-w-\[332px\] {
7258
7318
  max-width: 332px;
7259
7319
  }
7260
7320
  .desktop\:max-w-\[426px\] {
7261
7321
  max-width: 426px;
7262
7322
  }
7323
+ .desktop\:max-w-\[427px\] {
7324
+ max-width: 427px;
7325
+ }
7263
7326
  .desktop\:max-w-\[584px\] {
7264
7327
  max-width: 584px;
7265
7328
  }
@@ -7712,6 +7775,9 @@ video {
7712
7775
  .lg-desktop\:aspect-\[1920\/930\] {
7713
7776
  aspect-ratio: 1920/930;
7714
7777
  }
7778
+ .lg-desktop\:aspect-\[404\/480\] {
7779
+ aspect-ratio: 404/480;
7780
+ }
7715
7781
  .lg-desktop\:aspect-\[480\/248\] {
7716
7782
  aspect-ratio: 480/248;
7717
7783
  }
@@ -7721,6 +7787,9 @@ video {
7721
7787
  .lg-desktop\:aspect-\[544\/320\] {
7722
7788
  aspect-ratio: 544/320;
7723
7789
  }
7790
+ .lg-desktop\:aspect-\[544\/480\] {
7791
+ aspect-ratio: 544/480;
7792
+ }
7724
7793
  .lg-desktop\:aspect-\[644\/320\] {
7725
7794
  aspect-ratio: 644/320;
7726
7795
  }
@@ -7733,6 +7802,9 @@ video {
7733
7802
  .lg-desktop\:aspect-\[824\/320\] {
7734
7803
  aspect-ratio: 824/320;
7735
7804
  }
7805
+ .lg-desktop\:aspect-\[824\/480\] {
7806
+ aspect-ratio: 824/480;
7807
+ }
7736
7808
  .lg-desktop\:size-12 {
7737
7809
  width: 3rem;
7738
7810
  height: 3rem;
@@ -7943,6 +8015,9 @@ video {
7943
8015
  .lg-desktop\:min-w-\[162px\] {
7944
8016
  min-width: 162px;
7945
8017
  }
8018
+ .lg-desktop\:max-w-\[1920px\] {
8019
+ max-width: 1920px;
8020
+ }
7946
8021
  .lg-desktop\:max-w-\[196px\] {
7947
8022
  max-width: 196px;
7948
8023
  }
@@ -7955,9 +8030,15 @@ video {
7955
8030
  .lg-desktop\:max-w-\[401px\] {
7956
8031
  max-width: 401px;
7957
8032
  }
8033
+ .lg-desktop\:max-w-\[404px\] {
8034
+ max-width: 404px;
8035
+ }
7958
8036
  .lg-desktop\:max-w-\[450px\] {
7959
8037
  max-width: 450px;
7960
8038
  }
8039
+ .lg-desktop\:max-w-\[544px\] {
8040
+ max-width: 544px;
8041
+ }
7961
8042
  .lg-desktop\:max-w-\[547px\] {
7962
8043
  max-width: 547px;
7963
8044
  }