@anker-in/headless-ui 0.0.27-alpha.62 → 0.0.27-alpha.63
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/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/libs.d.js +2 -0
- package/dist/cjs/libs.d.js.map +7 -0
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +2 -2
- package/dist/esm/libs.d.js +2 -0
- package/dist/esm/libs.d.js.map +7 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var M=Object.create;var l=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var B=(t,a)=>{for(var r in a)l(t,r,{get:a[r],enumerable:!0})},y=(t,a,r,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of S(a))!z.call(t,s)&&s!==r&&l(t,s,{get:()=>a[s],enumerable:!(o=C(a,s))||o.enumerable});return t};var
|
|
1
|
+
"use strict";"use client";var M=Object.create;var l=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var B=(t,a)=>{for(var r in a)l(t,r,{get:a[r],enumerable:!0})},y=(t,a,r,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of S(a))!z.call(t,s)&&s!==r&&l(t,s,{get:()=>a[s],enumerable:!(o=C(a,s))||o.enumerable});return t};var m=(t,a,r)=>(r=t!=null?M(R(t)):{},y(a||!t||!t.__esModule?l(r,"default",{value:t,enumerable:!0}):r,t)),I=t=>y(l({},"__esModule",{value:!0}),t);var F={};B(F,{default:()=>E});module.exports=I(F);var e=require("react/jsx-runtime"),n=require("react"),f=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),v=m(require("../Slogan/index.js")),i=require("../../components/gird.js"),c=require("../../components/container.js"),b=m(require("../BrandEquity/index.js")),N=m(require("../MemberEquity/index.js")),d=require("gsap"),k=m(require("gsap/ScrollTrigger.js")),p=require("@payloadcms/richtext-lexical/html");const q=({children:t,id:a,components:r})=>((0,n.useEffect)(()=>{const o=window.screen.height;d.gsap.registerPlugin(k.default),d.gsap.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${o*1.8}px bottom`,markers:!0,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),(0,e.jsxs)("div",{id:a,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:t}),(0,e.jsx)(e.Fragment,{children:r?.map(o=>{switch(o.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"bg-[#1D1D1F]",children:(0,e.jsx)(c.Container,{className:"!my-0",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(b.default,{data:o})}),(0,e.jsx)(i.GridItem,{span:1})]})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"w-full bg-[#1D1D1F] py-10",children:(0,e.jsx)(c.Container,{className:"!my-0",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(N.default,{data:o,className:"w-full"})}),(0,e.jsx)(i.GridItem,{span:1})]})})});default:return null}})})]})),D=({className:t="",id:a,data:{title:r,videoTitle:o,btnText:s,img:T,video:P,theme:u,shape:h,components:w}})=>{const[$,L]=(0,n.useState)(!1),x=(0,n.useRef)(null),G=typeof r=="string"?r:r&&(0,p.convertLexicalToHTML)({data:r});return typeof o=="string"||o&&(0,p.convertLexicalToHTML)({data:o}),(0,e.jsx)(q,{id:a,components:w,children:(0,e.jsxs)("div",{className:(0,f.cn)("relative w-full h-screen",t,{"aiui-dark":u==="dark","rounded-box":h==="rounded"}),children:[(0,e.jsx)("div",{className:"media-content absolute w-full left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(c.Container,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(v.default,{className:"sticky-title",data:{title:G||"",theme:u}})}),(0,e.jsx)(i.GridItem,{span:1})]})})}),(0,e.jsxs)("div",{className:"media-cover w-full h-screen relative overflow-hidden",children:[(0,e.jsx)("video",{ref:x,className:"size-full object-cover",src:P?.url,autoPlay:!0,muted:!0,loop:!0}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})})};var E=(0,g.withStyles)(D);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport { gsap } from 'gsap'\nimport
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuDM,IAAAI,EAAA,6BAtDNC,EAAmD,iBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,iCACnBC,EAA+B,oCAC/BC,EAA0B,yCAC1BC,EAAwB,sCACxBC,EAAyB,uCACzBC,EAAqB,gBACrBC,
|
|
6
|
-
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_gsap", "import_ScrollTrigger", "import_html", "StickyBox", "children", "id", "components", "height", "componentData", "BrandEquity", "MemberEquity", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "Slogan"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport { gsap } from 'gsap'\nimport ScrollTrigger from 'gsap/ScrollTrigger.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n useEffect(() => {\n const height = window.screen.height\n\n gsap.registerPlugin(ScrollTrigger)\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n markers: true,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n\n return (\n <div id={id} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"bg-[#1D1D1F]\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <BrandEquity data={componentData} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"w-full bg-[#1D1D1F] py-10\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <MemberEquity data={componentData} className=\"w-full\" />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n id,\n data: { title, videoTitle, btnText, img, video, theme, shape, components },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n return (\n <StickyBox id={id} components={components}>\n <div\n className={cn('relative w-full h-screen', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute w-full left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2\">\n <Container spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n <div className=\"media-cover w-full h-screen relative overflow-hidden\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </StickyBox>\n )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_gsap", "import_ScrollTrigger", "import_html", "StickyBox", "children", "id", "components", "height", "ScrollTrigger", "componentData", "BrandEquity", "MemberEquity", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "Slogan"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var q=Object.create;var d=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var Q=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},F=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of J(e))!O.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(l=B(e,o))||l.enumerable});return t};var D=(t,e,r)=>(r=t!=null?q(K(t)):{},F(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),V=t=>F(d({},"__esModule",{value:!0}),t);var Z={};Q(Z,{default:()=>X});module.exports=V(Z);var n=require("react/jsx-runtime"),s=D(require("react")),P=require("@gsap/react"),x=require("gsap"),N=D(require("gsap/SplitText.js")),h=D(require("gsap/ScrollTrigger.js")),w=require("../../helpers/utils.js"),v=require("../../components/index.js"),$=require("../../shared/Styles.js");x.gsap.registerPlugin(N.default,h.default);function W(t=[],e=3){const r=[];for(let l=0;l<t.length;l+=e)r.push(t.slice(l,l+e));return r}const M=s.default.forwardRef(({data:t,className:e=""},r)=>{const{title:l,features:o=[],featureChunkSize:H=3,theme:E}=t,[y,I]=s.default.useState(0),[A,b]=s.default.useState(!0),f=W(o,H),S=f.length,p=o.length>H,C=p?[...f,f[0]]:f,T=40;s.default.useEffect(()=>{if(!p)return;const a=setInterval(()=>{I(i=>i+1),b(!0)},3e3);return()=>clearInterval(a)},[S,p]),s.default.useEffect(()=>{if(p)if(y===S){const a=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(a)}else b(!0)},[y,S,p]);const c=(0,s.useRef)(null),m=(0,s.useRef)(null);return(0,P.useGSAP)(()=>{if(!c.current)return;m.current=new N.default(c.current,{type:"words",wordsClass:"word"});const a=c.current?.clientHeight||100,i=m.current.words;return x.gsap.set(i,{opacity:0}),h.default.create({trigger:c.current,start:"bottom bottom",end:`bottom bottom-=${a+40}px`,scrub:!0,onUpdate:u=>{const g=u.progress,G=i.length,j=1/G,R=.5;i.forEach((z,L)=>{const U=L/G*(1-R),Y=j*(1+R);let k=(g-U)/Y;k=Math.max(0,Math.min(k,1)),x.gsap.set(z,{opacity:k})})}}),()=>{m.current&&m.current.revert(),h.default.getAll().forEach(u=>u.kill())}},[]),(0,n.jsxs)("div",{ref:r,className:(0,w.cn)("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,n.jsx)(v.Heading,{ref:c,as:"h2",size:2,weight:"bold",align:"left",className:(0,w.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":E!=="dark","text-[#fff]":E==="dark"}),children:l}),o&&o.length>0&&(0,n.jsx)("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${T}px`},children:(0,n.jsx)("div",{className:(0,w.cn)(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*T}px)`},children:C.map((a,i)=>(0,n.jsx)("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${T}px`},children:a.map((u,g)=>(0,n.jsxs)(s.default.Fragment,{children:[g>0&&(0,n.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),(0,n.jsx)(v.Text,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:u.title})]},g))},i))})})]})});M.displayName="Slogan";var X=(0,$.withStyles)(M);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqGM,IAAAI,EAAA,6BApGNC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,
|
|
6
|
-
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport SplitText from 'gsap/SplitText.js'\nimport ScrollTrigger from 'gsap/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3, theme } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom bottom-=${height + 40}px`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word, i) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach(t => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n {\n 'text-[#1D1D1F]': theme !== 'dark',\n 'text-[#fff]': theme === 'dark',\n }\n )}\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"relative w-full max-w-[500px] overflow-hidden\" style={{ height: `${groupHeight}px` }}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className=\"flex w-full flex-row items-stretch gap-3 overflow-hidden\"\n style={{ height: `${groupHeight}px` }}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n <Text\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "SplitText", "ScrollTrigger", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var L=Object.create;var l=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},w=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of z(r))!D.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(i=N(r,o))||i.enumerable});return t};var f=(t,r,e)=>(e=t!=null?L(C(t)):{},w(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>w(l({},"__esModule",{value:!0}),t);var $={};G($,{default:()=>U});module.exports=I($);var g=require("react/jsx-runtime"),s=f(require("react")),y=require("@gsap/react"),c=require("gsap"),d=f(require("gsap/SplitText.js")),a=f(require("gsap/ScrollTrigger.js")),x=require("../../helpers/utils.js"),v=require("../../components/index.js"),H=require("../../shared/Styles.js");c.gsap.registerPlugin(d.default,a.default);const b=s.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:i}=t,o=(0,s.useRef)(null),n=(0,s.useRef)(null);return(0,y.useGSAP)(()=>{if(!o.current)return;const S=o.current?.clientHeight||80;n.current=new d.default(o.current,{type:"words",wordsClass:"word"});const m=n.current.words;return c.gsap.set(m,{opacity:0}),a.default.create({trigger:o.current,start:"bottom bottom",end:`bottom bottom+=${S+20}px`,scrub:!0,onUpdate:p=>{const E=p.progress,h=m.length,M=1/h,T=.5;m.forEach((P,R)=>{const k=R/h*(1-T),A=M*(1+T);let u=(E-k)/A;u=Math.max(0,Math.min(u,1)),c.gsap.set(P,{opacity:u})})}}),()=>{n.current&&n.current.revert(),a.default.getAll().forEach(p=>p.kill())}},[]),e&&(0,g.jsx)("div",{className:(0,x.cn)("tablet:mb-[32px] mb-[24px] space-y-4",r,{"aiui-dark":i==="dark"}),children:(0,g.jsx)(v.Heading,{ref:o,as:"h2",size:5,html:e})})});b.displayName="Title";var U=(0,H.withStyles)(b);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,
|
|
6
|
-
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "Title", "React", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport SplitText from 'gsap/SplitText.js'\nimport ScrollTrigger from 'gsap/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom bottom+=${height + 20}px`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word, i) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach(t => t.kill())\n }\n }, [])\n\n return (\n title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAAsB,gCACtBC,EAA0B,oCAC1BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,OAAK,eAAe,EAAAC,QAAW,EAAAC,OAAa,EAC5C,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CACZ,GAAI,CAACD,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,EAAAT,QAAUQ,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,EAAAV,QAAc,OAAO,CACnB,QAASO,EAAS,QAClB,MAAO,gBACP,IAAK,kBAAkBE,EAAS,EAAE,KAClC,MAAO,GACP,SAAUE,GAAQ,CAChB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAMC,IAAM,CACzB,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,EAAAR,QAAc,OAAO,EAAE,QAAQqB,GAAKA,EAAE,KAAK,CAAC,CAC9C,CACF,EAAG,CAAC,CAAC,EAGHhB,MACE,OAAC,OAAI,aAAW,MAAG,uCAAwCD,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACrG,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOZ,KAAQ,cAAWY,CAAK",
|
|
6
|
+
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "SplitText", "ScrollTrigger", "Title", "React", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as p,jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as b,useRef as N,useEffect as k}from"react";import{cn as P}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import w from"../Slogan/index.js";import{Grid as n,GridItem as a}from"../../components/gird.js";import{Container as l}from"../../components/container.js";import x from"../BrandEquity/index.js";import G from"../MemberEquity/index.js";import{gsap as c}from"gsap";import
|
|
1
|
+
"use client";import{Fragment as p,jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as b,useRef as N,useEffect as k}from"react";import{cn as P}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import w from"../Slogan/index.js";import{Grid as n,GridItem as a}from"../../components/gird.js";import{Container as l}from"../../components/container.js";import x from"../BrandEquity/index.js";import G from"../MemberEquity/index.js";import{gsap as c}from"gsap";import M from"gsap/ScrollTrigger.js";import{convertLexicalToHTML as d}from"@payloadcms/richtext-lexical/html";const C=({children:s,id:r,components:i})=>(k(()=>{const t=window.screen.height;c.registerPlugin(M),c.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${t*1.8}px bottom`,markers:!0,scrub:0}}).to(`#${r} .sticky-cover`,{opacity:1,duration:.3}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:r,className:"relative z-10",children:[e(p,{children:s}),e(p,{children:i?.map(t=>{switch(t.blockType){case"ipc-brand-equity":return e("div",{className:"bg-[#1D1D1F]",children:e(l,{className:"!my-0",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(x,{data:t})}),e(a,{span:1})]})})});case"ipc-member-equity":return e("div",{className:"w-full bg-[#1D1D1F] py-10",children:e(l,{className:"!my-0",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(G,{data:t,className:"w-full"})}),e(a,{span:1})]})})});default:return null}})})]})),S=({className:s="",id:r,data:{title:i,videoTitle:t,btnText:R,img:z,video:u,theme:m,shape:y,components:f}})=>{const[B,I]=b(!1),g=N(null),v=typeof i=="string"?i:i&&d({data:i});return typeof t=="string"||t&&d({data:t}),e(C,{id:r,components:f,children:o("div",{className:P("relative w-full h-screen",s,{"aiui-dark":m==="dark","rounded-box":y==="rounded"}),children:[e("div",{className:"media-content absolute w-full left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2",children:e(l,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(w,{className:"sticky-title",data:{title:v||"",theme:m}})}),e(a,{span:1})]})})}),o("div",{className:"media-cover w-full h-screen relative overflow-hidden",children:[e("video",{ref:g,className:"size-full object-cover",src:u?.url,autoPlay:!0,muted:!0,loop:!0}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})})};var A=h(S);export{A as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport { gsap } from 'gsap'\nimport
|
|
5
|
-
"mappings": "aAuDM,mBAAAA,EAAA,OAAAC,EAQc,QAAAC,MARd,oBAtDN,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,MAAiB,QACnD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,qBACnB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAiB,0BACxB,OAAOC,MAAkB,2BACzB,OAAS,QAAAC,MAAY,OACrB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport { gsap } from 'gsap'\nimport ScrollTrigger from 'gsap/ScrollTrigger.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n useEffect(() => {\n const height = window.screen.height\n\n gsap.registerPlugin(ScrollTrigger)\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n markers: true,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n\n return (\n <div id={id} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"bg-[#1D1D1F]\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <BrandEquity data={componentData} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"w-full bg-[#1D1D1F] py-10\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <MemberEquity data={componentData} className=\"w-full\" />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n id,\n data: { title, videoTitle, btnText, img, video, theme, shape, components },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n return (\n <StickyBox id={id} components={components}>\n <div\n className={cn('relative w-full h-screen', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute w-full left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2\">\n <Container spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n <div className=\"media-cover w-full h-screen relative overflow-hidden\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </StickyBox>\n )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "gsap", "ScrollTrigger", "convertLexicalToHTML", "StickyBox", "children", "id", "components", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as R}from"react/jsx-runtime";import o,{useRef as E}from"react";import{useGSAP as z}from"@gsap/react";import{gsap as y}from"gsap";import
|
|
1
|
+
"use client";import{jsx as s,jsxs as R}from"react/jsx-runtime";import o,{useRef as E}from"react";import{useGSAP as z}from"@gsap/react";import{gsap as y}from"gsap";import I from"gsap/SplitText.js";import b from"gsap/ScrollTrigger.js";import{cn as S}from"../../helpers/utils.js";import{Heading as L,Text as U}from"../../components/index.js";import{withStyles as Y}from"../../shared/Styles.js";y.registerPlugin(I,b);function q(i=[],p=3){const c=[];for(let r=0;r<i.length;r+=p)c.push(i.slice(r,r+p));return c}const G=o.forwardRef(({data:i,className:p=""},c)=>{const{title:r,features:u=[],featureChunkSize:T=3,theme:k}=i,[d,D]=o.useState(0),[F,x]=o.useState(!0),f=q(u,T),h=f.length,n=u.length>T,M=n?[...f,f[0]]:f,w=40;o.useEffect(()=>{if(!n)return;const t=setInterval(()=>{D(e=>e+1),x(!0)},3e3);return()=>clearInterval(t)},[h,n]),o.useEffect(()=>{if(n)if(d===h){const t=setTimeout(()=>{x(!1),D(0)},500);return()=>clearTimeout(t)}else x(!0)},[d,h,n]);const l=E(null),m=E(null);return z(()=>{if(!l.current)return;m.current=new I(l.current,{type:"words",wordsClass:"word"});const t=l.current?.clientHeight||100,e=m.current.words;return y.set(e,{opacity:0}),b.create({trigger:l.current,start:"bottom bottom",end:`bottom bottom-=${t+40}px`,scrub:!0,onUpdate:a=>{const g=a.progress,N=e.length,P=1/N,H=.5;e.forEach(($,A)=>{const C=A/N*(1-H),j=P*(1+H);let v=(g-C)/j;v=Math.max(0,Math.min(v,1)),y.set($,{opacity:v})})}}),()=>{m.current&&m.current.revert(),b.getAll().forEach(a=>a.kill())}},[]),R("div",{ref:c,className:S("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",p),children:[s(L,{ref:l,as:"h2",size:2,weight:"bold",align:"left",className:S("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":k!=="dark","text-[#fff]":k==="dark"}),children:r}),u&&u.length>0&&s("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${w}px`},children:s("div",{className:S(["flex flex-col",F?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${d*w}px)`},children:M.map((t,e)=>s("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${w}px`},children:t.map((a,g)=>R(o.Fragment,{children:[g>0&&s("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),s(U,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:a.title})]},g))},e))})})]})});G.displayName="Slogan";var Z=Y(G);export{Z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport
|
|
5
|
-
"mappings": "aAqGM,cAAAA,EAkCY,QAAAC,MAlCZ,oBApGN,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport SplitText from 'gsap/SplitText.js'\nimport ScrollTrigger from 'gsap/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3, theme } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom bottom-=${height + 40}px`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word, i) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach(t => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n {\n 'text-[#1D1D1F]': theme !== 'dark',\n 'text-[#fff]': theme === 'dark',\n }\n )}\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"relative w-full max-w-[500px] overflow-hidden\" style={{ height: `${groupHeight}px` }}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className=\"flex w-full flex-row items-stretch gap-3 overflow-hidden\"\n style={{ height: `${groupHeight}px` }}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n <Text\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withStyles", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index", "Slogan_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as m}from"react";import{useGSAP as E}from"@gsap/react";import{gsap as i}from"gsap";import
|
|
1
|
+
"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as m}from"react";import{useGSAP as E}from"@gsap/react";import{gsap as i}from"gsap";import p from"gsap/SplitText.js";import n from"gsap/ScrollTrigger.js";import{cn as M}from"../../helpers/utils.js";import{Heading as P}from"../../components/index.js";import{withStyles as R}from"../../shared/Styles.js";i.registerPlugin(p,n);const u=S.forwardRef(({data:d,className:g})=>{const{title:l,theme:h}=d,t=m(null),r=m(null);return E(()=>{if(!t.current)return;const T=t.current?.clientHeight||80;r.current=new p(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return i.set(e,{opacity:0}),n.create({trigger:t.current,start:"bottom bottom",end:`bottom bottom+=${T+20}px`,scrub:!0,onUpdate:o=>{const w=o.progress,c=e.length,b=1/c,a=.5;e.forEach((y,x)=>{const v=x/c*(1-a),H=b*(1+a);let s=(w-v)/H;s=Math.max(0,Math.min(s,1)),i.set(y,{opacity:s})})}}),()=>{r.current&&r.current.revert(),n.getAll().forEach(o=>o.kill())}},[]),l&&f("div",{className:M("tablet:mb-[32px] mb-[24px] space-y-4",g,{"aiui-dark":h==="dark"}),children:f(P,{ref:t,as:"h2",size:5,html:l})})});u.displayName="Title";var I=R(u);export{I as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport
|
|
5
|
-
"mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport SplitText from 'gsap/SplitText.js'\nimport ScrollTrigger from 'gsap/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom bottom+=${height + 20}px`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word, i) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach(t => t.kill())\n }\n }, [])\n\n return (\n title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
+
"mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAOC,MAAe,oBACtB,OAAOC,MAAmB,wBAC1B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3BL,EAAK,eAAeC,EAAWC,CAAa,EAC5C,MAAMI,EAAQT,EAAM,WAAuC,CAAC,CAAE,KAAAU,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,EAAWb,EAA2B,IAAI,EAC1Cc,EAAoBd,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CACZ,GAAI,CAACY,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIX,EAAUU,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAZ,EAAK,IAAIc,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BZ,EAAc,OAAO,CACnB,QAASS,EAAS,QAClB,MAAO,gBACP,IAAK,kBAAkBE,EAAS,EAAE,KAClC,MAAO,GACP,SAAUE,GAAQ,CAChB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAMC,IAAM,CACzB,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CxB,EAAK,IAAIoB,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DV,EAAc,OAAO,EAAE,QAAQuB,GAAKA,EAAE,KAAK,CAAC,CAC9C,CACF,EAAG,CAAC,CAAC,EAGHhB,GACEb,EAAC,OAAI,UAAWO,EAAG,uCAAwCK,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACrG,SAAAd,EAACQ,EAAA,CAAQ,IAAKO,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDH,EAAM,YAAc,QAEpB,IAAOoB,EAAQrB,EAAWC,CAAK",
|
|
6
6
|
"names": ["jsx", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withStyles", "Title", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/libs.d.ts"],
|
|
4
|
+
"sourcesContent": ["declare module 'gsap/SplitText.js' {\n import { SplitText } from 'gsap/SplitText'\n export default SplitText\n}\n\ndeclare module 'gsap/ScrollTrigger.js' {\n import { ScrollTrigger } from 'gsap/ScrollTrigger'\n export default ScrollTrigger\n}\n"],
|
|
5
|
+
"mappings": "8DAAA,IAAAA,EAAAC,EAAA",
|
|
6
|
+
"names": ["require_libs_d", "__commonJSMin"]
|
|
7
|
+
}
|