@anker-in/headless-ui 0.0.27-alpha.60 → 0.0.27-alpha.62
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 +2 -2
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
- 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/package.json +5 -3
|
@@ -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 c=(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=c(require("../Slogan/index.js")),i=require("../../components/gird.js"),m=require("../../components/container.js"),b=c(require("../BrandEquity/index.js")),N=c(require("../MemberEquity/index.js")),d=require("gsap
|
|
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 c=(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=c(require("../Slogan/index.js")),i=require("../../components/gird.js"),m=require("../../components/container.js"),b=c(require("../BrandEquity/index.js")),N=c(require("../MemberEquity/index.js")),d=require("gsap"),k=require("gsap/ScrollTrigger"),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.ScrollTrigger),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)(m.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)(m.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)(m.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
|
|
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,
|
|
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'\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": ["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"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var Y=Object.create;var d=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},R=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of B(e))!K.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(l=q(e,o))||l.enumerable});return t};var Q=(t,e,r)=>(r=t!=null?Y(J(t)):{},R(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),V=t=>R(d({},"__esModule",{value:!0}),t);var Z={};O(Z,{default:()=>X});module.exports=V(Z);var
|
|
1
|
+
"use strict";"use client";var Y=Object.create;var d=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},R=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of B(e))!K.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(l=q(e,o))||l.enumerable});return t};var Q=(t,e,r)=>(r=t!=null?Y(J(t)):{},R(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),V=t=>R(d({},"__esModule",{value:!0}),t);var Z={};O(Z,{default:()=>X});module.exports=V(Z);var n=require("react/jsx-runtime"),s=Q(require("react")),M=require("@gsap/react"),x=require("gsap"),D=require("gsap/SplitText"),h=require("gsap/ScrollTrigger"),w=require("../../helpers/utils.js"),v=require("../../components/index.js"),P=require("../../shared/Styles.js");x.gsap.registerPlugin(D.SplitText,h.ScrollTrigger);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 F=s.default.forwardRef(({data:t,className:e=""},r)=>{const{title:l,features:o=[],featureChunkSize:N=3,theme:H}=t,[y,E]=s.default.useState(0),[$,b]=s.default.useState(!0),f=W(o,N),S=f.length,p=o.length>N,A=p?[...f,f[0]]:f,T=40;s.default.useEffect(()=>{if(!p)return;const a=setInterval(()=>{E(i=>i+1),b(!0)},3e3);return()=>clearInterval(a)},[S,p]),s.default.useEffect(()=>{if(p)if(y===S){const a=setTimeout(()=>{b(!1),E(0)},500);return()=>clearTimeout(a)}else b(!0)},[y,S,p]);const c=(0,s.useRef)(null),m=(0,s.useRef)(null);return(0,M.useGSAP)(()=>{if(!c.current)return;m.current=new D.SplitText(c.current,{type:"words",wordsClass:"word"});const a=c.current?.clientHeight||100,i=m.current.words;return x.gsap.set(i,{opacity:0}),h.ScrollTrigger.create({trigger:c.current,start:"bottom bottom",end:`bottom bottom-=${a+40}px`,scrub:!0,onUpdate:u=>{const g=u.progress,I=i.length,C=1/I,G=.5;i.forEach((j,z)=>{const L=z/I*(1-G),U=C*(1+G);let k=(g-L)/U;k=Math.max(0,Math.min(k,1)),x.gsap.set(j,{opacity:k})})}}),()=>{m.current&&m.current.revert(),h.ScrollTrigger.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]":H!=="dark","text-[#fff]":H==="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",$?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*T}px)`},children:A.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))})})]})});F.displayName="Slogan";var X=(0,P.withStyles)(F);
|
|
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 { SplitText } from 'gsap/
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqGM,IAAAI,EAAA,6BApGNC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/SplitText'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\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": ["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"]
|
|
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
|
|
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{ScrollTrigger as M}from"gsap/ScrollTrigger";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
|
|
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,
|
|
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'\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
|
|
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{SplitText as I}from"gsap/SplitText";import{ScrollTrigger as b}from"gsap/ScrollTrigger";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 { SplitText } from 'gsap/
|
|
5
|
-
"mappings": "aAqGM,cAAAA,EAkCY,QAAAC,MAlCZ,oBApGN,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/SplitText'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\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
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/headless-ui",
|
|
3
|
-
"version": "0.0.27-alpha.
|
|
3
|
+
"version": "0.0.27-alpha.62",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/cjs/index.d.ts",
|
|
@@ -91,7 +91,6 @@
|
|
|
91
91
|
"stylelint": "^16.6.0"
|
|
92
92
|
},
|
|
93
93
|
"dependencies": {
|
|
94
|
-
"@gsap/react": "^2.1.2",
|
|
95
94
|
"@payloadcms/richtext-lexical": "^3.37.0",
|
|
96
95
|
"@radix-ui/react-avatar": "^1.1.9",
|
|
97
96
|
"@radix-ui/react-checkbox": "^1.3.1",
|
|
@@ -111,7 +110,6 @@
|
|
|
111
110
|
"embla-carousel-react": "^8.6.0",
|
|
112
111
|
"embla-carousel-wheel-gestures": "^8.0.1",
|
|
113
112
|
"fitty": "^2.4.2",
|
|
114
|
-
"gsap": "^3.13.0",
|
|
115
113
|
"postcss": "^8.4.38",
|
|
116
114
|
"react-fast-marquee": "^1.6.5",
|
|
117
115
|
"swiper": "^11.1.3",
|
|
@@ -119,6 +117,10 @@
|
|
|
119
117
|
"tailwindcss": "^3.4.3",
|
|
120
118
|
"vaul": "^1.1.2"
|
|
121
119
|
},
|
|
120
|
+
"peerDependencies": {
|
|
121
|
+
"gsap": "^3.13.0",
|
|
122
|
+
"@gsap/react": "^2.1.2"
|
|
123
|
+
},
|
|
122
124
|
"publishConfig": {
|
|
123
125
|
"access": "public",
|
|
124
126
|
"registry": "https://registry.npmjs.org/"
|