@anker-in/headless-ui 1.0.16-alpha.1 → 1.0.16-alpha.2
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/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/types.d.ts +1 -0
- package/dist/cjs/biz-components/Title/types.js +1 -1
- package/dist/cjs/biz-components/Title/types.js.map +1 -1
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/Title/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var q=Object.create;var c=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},H=(t,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of G(e))!K.call(t,o)&&o!==n&&c(t,o,{get:()=>e[o],enumerable:!(l=A(e,o))||l.enumerable});return t};var Q=(t,e,n)=>(n=t!=null?q(J(t)):{},H(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t)),W=t=>H(c({},"__esModule",{value:!0}),t);var Y={};O(Y,{default:()=>X});module.exports=W(Y);var i=require("react/jsx-runtime"),r=Q(require("react")),m=require("gsap"),v=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),k=require("../../helpers/utils.js"),M=require("../../components/index.js"),N=require("../../shared/Styles.js"),$=require("../../hooks/useExposure.js"),D=require("../../shared/trackUrlRef.js"),S=require("react-intersection-observer");const w="link",x="title",E=r.default.forwardRef(({data:t,className:e,as:n="h2"},l)=>{const{title:o,caption:p,theme:y,extensions:u}=t,f=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),d=(0,r.useRef)(null),{ref:I,inView:b}=(0,S.useInView)();return(0,r.useImperativeHandle)(l,()=>f.current),(0,$.useExposure)(f,{componentType:w,componentName:x,componentTitle:t?.title}),(0,r.useEffect)(()=>{m.gsap.registerPlugin(v.SplitText,T.ScrollTrigger);function P(){if(!s.current)return;const V=s.current?.clientHeight||80;a.current=new v.SplitText(s.current,{type:"words",wordsClass:"word"});const g=a.current.words;m.gsap.set(g,{opacity:0}),d.current=T.ScrollTrigger.create({trigger:s.current,start:"bottom bottom-=4%",end:`bottom+=${V*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:z=>{const U=z.progress,L=g.length,j=1/L,R=.5;g.forEach((B,C)=>{const F=C/L*(1-R),_=j*(1+R);let h=(U-F)/_;h=Math.max(0,Math.min(h,1)),m.gsap.set(B,{opacity:h})})}})}return b&&P(),()=>{a.current&&a.current.revert(),d.current&&d.current.kill()}},[b]),(o||p)&&(0,i.jsxs)("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:f,children:[(0,i.jsx)("div",{ref:I,className:(0,k.cn)("space-y-4 flex-1",e,{"aiui-dark":y==="dark"}),children:(0,i.jsx)(M.Heading,{ref:s,as:n,size:4,html:p||o})}),u?.textLink&&(0,i.jsxs)("a",{className:(0,k.cn)({"aiui-dark":y==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,D.trackUrlRef)(u?.link,`${w}_${x}`),"data-headless-type-name":`${w}#${x}`,"data-headless-title-desc-button":`${o}#${p}`,children:[u?.textLink,(0,i.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,i.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});E.displayName="Title";var X=(0,N.withLayout)(E);
|
|
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, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n const { title, caption, theme, extensions } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\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 scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\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 }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n <div ref={inViewRef} className={cn('space-y-4 flex-1', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgFU,IAAAI,EAAA,6BA/EVC,EAA8D,oBAC9DC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA0B,uCAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,
|
|
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", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2' }, ref) => {\n const { title, caption, theme, extensions } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\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 scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\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 }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n <div ref={inViewRef} className={cn('space-y-4 flex-1', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as={as} size={4} html={caption || title} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n {extensions?.textLink}\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n ></path>\n </svg>\n </a>\n )}\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
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", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var o=(t,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of h(e))!p.call(t,r)&&r!==i&&a(t,r,{get:()=>e[r],enumerable:!(s=n(e,r))||s.enumerable});return t};var m=t=>o(a({},"__esModule",{value:!0}),t);var c={};module.exports=m(c);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface TitleProps {\n data: {\n /**\n * \u4E3B\u6807\u9898\n */\n title?: string\n caption?: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n /**\n * \u4E3B\u9898\u8272\n */\n theme?: Theme\n /**\n * \u6269\u5C55\u6570\u636E\n */\n extensions?: any\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n /**\n * \u7279\u6027\u6807\u9898\n */\n title: string\n}\n\nexport interface TitleProps {\n data: {\n /**\n * \u4E3B\u6807\u9898\n */\n title?: string\n caption?: string\n /**\n * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n */\n features?: Feature[]\n /**\n * \u4E3B\u9898\u8272\n */\n theme?: Theme\n /**\n * \u6269\u5C55\u6570\u636E\n */\n extensions?: any\n }\n /**\n * \u81EA\u5B9A\u4E49\u7C7B\u540D\n */\n className?: string\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as n,jsxs as b}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as n,jsxs as b}from"react/jsx-runtime";import U,{useEffect as j,useRef as r,useImperativeHandle as B}from"react";import{gsap as p}from"gsap";import{SplitText as v}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as k}from"../../helpers/utils.js";import{Heading as C}from"../../components/index.js";import{withLayout as F}from"../../shared/Styles.js";import{useExposure as _}from"../../hooks/useExposure.js";import{trackUrlRef as q}from"../../shared/trackUrlRef.js";import{useInView as A}from"react-intersection-observer";const u="link",f="title",y=U.forwardRef(({data:d,className:L,as:R="h2"},H)=>{const{title:o,caption:i,theme:g,extensions:s}=d,l=r(null),t=r(null),e=r(null),a=r(null),{ref:E,inView:h}=A();return B(H,()=>l.current),_(l,{componentType:u,componentName:f,componentTitle:d?.title}),j(()=>{p.registerPlugin(v,T);function M(){if(!t.current)return;const N=t.current?.clientHeight||80;e.current=new v(t.current,{type:"words",wordsClass:"word"});const c=e.current.words;p.set(c,{opacity:0}),a.current=T.create({trigger:t.current,start:"bottom bottom-=4%",end:`bottom+=${N*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:$=>{const D=$.progress,w=c.length,S=1/w,x=.5;c.forEach((I,P)=>{const V=P/w*(1-x),z=S*(1+x);let m=(D-V)/z;m=Math.max(0,Math.min(m,1)),p.set(I,{opacity:m})})}})}return h&&M(),()=>{e.current&&e.current.revert(),a.current&&a.current.kill()}},[h]),(o||i)&&b("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:l,children:[n("div",{ref:E,className:k("space-y-4 flex-1",L,{"aiui-dark":g==="dark"}),children:n(C,{ref:t,as:R,size:4,html:i||o})}),s?.textLink&&b("a",{className:k({"aiui-dark":g==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:q(s?.link,`${u}_${f}`),"data-headless-type-name":`${u}#${f}`,"data-headless-title-desc-button":`${o}#${i}`,children:[s?.textLink,n("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:n("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});y.displayName="Title";var et=F(y);export{et 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, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n const { title, caption, theme, extensions } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\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 scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\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 }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n <div ref={inViewRef} className={cn('space-y-4 flex-1', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as
|
|
5
|
-
"mappings": "aAgFU,cAAAA,EAGA,QAAAC,MAHA,oBA/EV,OAAOC,GAAS,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QAC9D,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,aAAAC,MAAiB,8BAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQf,EAAM,WAAuC,CAAC,CAAE,KAAAgB,EAAM,UAAAC,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "useExposure", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "Title_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2' }, ref) => {\n const { title, caption, theme, extensions } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\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 scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\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 }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n <div ref={inViewRef} className={cn('space-y-4 flex-1', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as={as} size={4} html={caption || title} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n {extensions?.textLink}\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n ></path>\n </svg>\n </a>\n )}\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "useExposure", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "as", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "Title_default"]
|
|
7
7
|
}
|