@anker-in/headless-ui 1.0.10-temp-09034 → 1.0.10-temp-09036
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/tsconfig.tsbuildinfo +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/stories/drawer.stories.d.ts +20 -0
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var O=Object.create;var u=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(t,e)=>{for(var n in e)u(t,n,{get:e[n],enumerable:!0})},N=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of W(e))!Y.call(t,i)&&i!==n&&u(t,i,{get:()=>e[i],enumerable:!(s=Q(e,i))||s.enumerable});return t};var tt=(t,e,n)=>(n=t!=null?O(X(t)):{},N(e||!t||!t.__esModule?u(n,"default",{value:t,enumerable:!0}):n,t)),et=t=>N(u({},"__esModule",{value:!0}),t);var nt={};Z(nt,{default:()=>rt});module.exports=et(nt);var o=require("react/jsx-runtime"),r=tt(require("react")),p=require("gsap"),k=require("gsap/dist/SplitText"),y=require("gsap/dist/ScrollTrigger"),H=require("../../helpers/utils.js"),D=require("../../components/index.js"),S=require("../../shared/Styles.js"),B=require("../../hooks/useExposure.js"),I=require("../../shared/trackUrlRef.js"),P=require("react-intersection-observer");const T="link",b="title",$=r.default.forwardRef(({data:t,className:e},n)=>{const{title:s,caption:i,theme:M,extensions:f}=t,d=(0,r.useRef)(null),l=(0,r.useRef)(null),a=(0,r.useRef)(null),h=(0,r.useRef)(null),{ref:V,inView:R}=(0,P.useInView)();return(0,r.useImperativeHandle)(n,()=>d.current),(0,B.useExposure)(d,{componentType:T,componentName:b,componentTitle:t?.title}),(0,r.useEffect)(()=>{p.gsap.registerPlugin(k.SplitText,y.ScrollTrigger);function z(){if(!l.current)return;const C=l.current?.clientHeight||80;a.current=new k.SplitText(l.current,{type:"words",wordsClass:"word"});const g=a.current.words;p.gsap.set(g,{opacity:0}),h.current=y.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${C*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:it=>{const L=l.current;if(!L)return;const w=L.getBoundingClientRect(),F=window.innerHeight||document.documentElement.clientHeight,U=Math.max(w.top,0),j=Math.min(w.bottom,F),_=Math.max(0,j-U),q=w.height||1;let v=_/q;v=Math.max(0,Math.min(1,v));const A=v,c=g.length;if(!c)return;const G=1/c,E=.5;for(let m=0;m<c;m++){const J=m/c*(1-E),K=G*(1+E);let x=(A-J)/K;x=Math.max(0,Math.min(x,1)),p.gsap.set(g[m],{opacity:x})}}})}return R&&z(),()=>{a.current&&a.current.revert(),h.current&&h.current.kill()}},[R]),(s||i)&&(0,o.jsxs)("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:d,children:[(0,o.jsx)("div",{ref:V,className:(0,H.cn)("space-y-4 flex-1",e,{"aiui-dark":M==="dark"}),children:(0,o.jsx)(D.Heading,{ref:l,as:"h1",size:4,html:i||s})}),f?.textLink&&(0,o.jsxs)("a",{className:(0,H.cn)({"aiui-dark":M==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,I.trackUrlRef)(f?.link,`${T}_${b}`),"data-headless-type-name":`${T}#${b}`,"data-headless-title-desc-button":`${s}#${i}`,children:[f?.textLink,(0,o.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,o.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"})})]})]})});$.displayName="Title";var rt=(0,S.withLayout)($);
|
|
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
|
|
5
|
-
"mappings": "
|
|
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", "
|
|
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 // 1) \u5148\u8BA1\u7B97\u5143\u7D20\u7684\u5B9E\u9645\u53EF\u89C1\u6BD4\u4F8B\uFF080..1\uFF09\n const el = titleRef.current\n if (!el) return\n\n const rect = el.getBoundingClientRect()\n const vh = window.innerHeight || document.documentElement.clientHeight\n\n // \u8BA1\u7B97\u4EA4\u96C6\u9AD8\u5EA6\uFF08\u5143\u7D20\u5728\u89C6\u53E3\u5185\u53EF\u89C1\u7684\u9AD8\u5EA6\uFF09\n const visibleTop = Math.max(rect.top, 0)\n const visibleBottom = Math.min(rect.bottom, vh)\n const visibleHeight = Math.max(0, visibleBottom - visibleTop)\n\n // \u4F46\u82E5\u5143\u7D20\u9AD8\u5EA6\u4E3A0\uFF08\u6216\u63A5\u8FD10\uFF09\u907F\u514D\u96640\n const elHeight = rect.height || 1\n let visibleFraction = visibleHeight / elHeight\n visibleFraction = Math.max(0, Math.min(1, visibleFraction)) // clamp\n\n // 2) \u7528 visibleFraction \u4EE3\u66FF self.progress \u53BB\u9A71\u52A8\u6BCF\u4E2A\u5355\u8BCD\u7684 opacity\n const progress = visibleFraction // 0..1\n const total = words.length\n if (!total) return\n const interval = 1 / total\n const overlap = 0.5\n\n // optional: \u7F13\u5B58 precomputed starts/width outside onUpdate for perf\n for (let i = 0; i < total; 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(words[i], { 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=\"h1\" 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", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "el", "rect", "vh", "visibleTop", "visibleBottom", "visibleHeight", "elHeight", "visibleFraction", "progress", "total", "interval", "overlap", "i", "start", "width", "opacity"]
|
|
7
7
|
}
|