@anker-in/headless-ui 0.0.27-alpha.120 → 0.0.27-alpha.122
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +1 -1
- package/dist/cjs/components/heading.js +1 -1
- package/dist/cjs/components/heading.js.map +2 -2
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/cjs/stories/heading.stories.js +2 -2
- package/dist/cjs/stories/heading.stories.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +1 -1
- package/dist/esm/components/heading.js +1 -1
- package/dist/esm/components/heading.js.map +2 -2
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +2 -2
- package/dist/esm/stories/heading.stories.js +2 -2
- package/dist/esm/stories/heading.stories.js.map +2 -2
- package/dist/tokens/base.css +0 -19
- package/package.json +1 -1
- package/style.css +25 -40
- package/tailwind.config.js +0 -65
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var E=Object.create;var f=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var S=(e,a)=>{for(var r in a)f(e,r,{get:a[r],enumerable:!0})},H=(e,a,r,m)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of L(a))!D.call(e,o)&&o!==r&&f(e,o,{get:()=>a[o],enumerable:!(m=I(a,o))||m.enumerable});return e};var N=(e,a,r)=>(r=e!=null?E(M(e)):{},H(a||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),U=e=>H(f({},"__esModule",{value:!0}),e);var A={};S(A,{default:()=>j});module.exports=U(A);var t=require("react/jsx-runtime"),s=N(require("react")),B=require("@gsap/react"),g=N(require("gsap")),c=require("gsap/dist/ScrollTrigger"),p=require("../../components/index.js"),n=require("../../helpers/index.js"),z=require("../../shared/Styles.js");const w=s.default.forwardRef(({data:e,className:a},r)=>{const{title:m,subtitle:o,pcImage:P,mobileImage:R,primaryButton:d,secondaryButton:b,theme:T="light",caption:h=[]}=e,u=(0,s.useRef)(null),i=(0,s.useRef)(null);return(0,s.useImperativeHandle)(r,()=>i.current),(0,B.useGSAP)(()=>{if(g.default.registerPlugin(c.ScrollTrigger),!u.current)return;const v=i.current?.clientHeight||100;return window.innerHeight<=v?c.ScrollTrigger.create({trigger:i.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:l=>{const x=l.progress*40-20;g.default.set(u.current,{yPercent:x})}}):(c.ScrollTrigger.create({trigger:i.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:l=>{const x=l.progress*20-20;g.default.set(u.current,{yPercent:x})}}),c.ScrollTrigger.create({trigger:i.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:l=>{const x=l.progress*20;g.default.set(u.current,{yPercent:x})}})),()=>{c.ScrollTrigger.getAll().forEach(l=>l.kill())}},[]),(0,t.jsxs)("div",{ref:i,"data-ui-component-id":"HeroBanner",className:(0,n.cn)(T==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,t.jsx)("div",{ref:u,className:(0,n.cn)("absolute left-0 top-0 size-full"),children:(0,t.jsx)(p.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${P?.url||""} , ${R?.url||""} 767`})}),(0,t.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,t.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[m&&(0,t.jsx)(p.Heading,{as:"h1",size:5,className:(0,n.cn)("hero-banner-title tablet:pr-0 pr-[50px]"),html:m}),o&&(0,t.jsx)(p.Text,{as:"p",size:3,className:(0,n.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:o})]}),(0,t.jsxs)("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[b&&b.text&&(0,t.jsx)("a",{href:b.link,children:(0,t.jsx)(p.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:b.text})}),d&&d.text&&(0,t.jsx)("a",{href:d.link,children:(0,t.jsx)(p.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:d.text})})]})]}),h.length>0&&(0,t.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:h.map((v,y)=>(0,t.jsxs)(s.default.Fragment,{children:[(0,t.jsx)(p.Text,{size:3,className:(0,n.cn)("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:v.title}),y<h.length-1&&(0,t.jsx)("div",{className:(0,n.cn)("bg-info-primary w-px")})]},y))})]})});w.displayName="HeroBanner";var j=(0,z.withStyles)(w);
|
|
1
|
+
"use strict";"use client";var E=Object.create;var f=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var S=(e,a)=>{for(var r in a)f(e,r,{get:a[r],enumerable:!0})},H=(e,a,r,m)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of L(a))!D.call(e,o)&&o!==r&&f(e,o,{get:()=>a[o],enumerable:!(m=I(a,o))||m.enumerable});return e};var N=(e,a,r)=>(r=e!=null?E(M(e)):{},H(a||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),U=e=>H(f({},"__esModule",{value:!0}),e);var A={};S(A,{default:()=>j});module.exports=U(A);var t=require("react/jsx-runtime"),s=N(require("react")),B=require("@gsap/react"),g=N(require("gsap")),c=require("gsap/dist/ScrollTrigger"),p=require("../../components/index.js"),n=require("../../helpers/index.js"),z=require("../../shared/Styles.js");const w=s.default.forwardRef(({data:e,className:a},r)=>{const{title:m,subtitle:o,pcImage:P,mobileImage:R,primaryButton:d,secondaryButton:b,theme:T="light",caption:h=[]}=e,u=(0,s.useRef)(null),i=(0,s.useRef)(null);return(0,s.useImperativeHandle)(r,()=>i.current),(0,B.useGSAP)(()=>{if(g.default.registerPlugin(c.ScrollTrigger),!u.current)return;const v=i.current?.clientHeight||100;return window.innerHeight<=v?c.ScrollTrigger.create({trigger:i.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:l=>{const x=l.progress*40-20;g.default.set(u.current,{yPercent:x})}}):(c.ScrollTrigger.create({trigger:i.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:l=>{const x=l.progress*20-20;g.default.set(u.current,{yPercent:x})}}),c.ScrollTrigger.create({trigger:i.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:l=>{const x=l.progress*20;g.default.set(u.current,{yPercent:x})}})),()=>{c.ScrollTrigger.getAll().forEach(l=>l.kill())}},[]),(0,t.jsxs)("div",{ref:i,"data-ui-component-id":"HeroBanner",className:(0,n.cn)(T==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,t.jsx)("div",{ref:u,className:(0,n.cn)("absolute left-0 top-0 size-full"),children:(0,t.jsx)(p.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${P?.url||""} , ${R?.url||""} 767`})}),(0,t.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,t.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[m&&(0,t.jsx)(p.Heading,{as:"h1",size:5,className:(0,n.cn)("hero-banner-title tablet:pr-0 pr-[50px]"),html:m}),o&&(0,t.jsx)(p.Text,{as:"p",size:3,className:(0,n.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:o})]}),(0,t.jsxs)("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[b&&b.text&&(0,t.jsx)("a",{"data-tracking-link":"",href:b.link,children:(0,t.jsx)(p.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:b.text})}),d&&d.text&&(0,t.jsx)("a",{href:d.link,children:(0,t.jsx)(p.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:d.text})})]})]}),h.length>0&&(0,t.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:h.map((v,y)=>(0,t.jsxs)(s.default.Fragment,{children:[(0,t.jsx)(p.Text,{size:3,className:(0,n.cn)("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:v.title}),y<h.length-1&&(0,t.jsx)("div",{className:(0,n.cn)("bg-info-primary w-px")})]},y))})]})});w.displayName="HeroBanner";var j=(0,z.withStyles)(w);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title tablet:pr-0 pr-[50px]')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={secondaryButton.link}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={3}\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EQ,IAAAI,EAAA,6BA3ERC,EAAmD,oBACnDA,EAAwB,uBACxBC,EAAiB,mBACjBC,EAA8B,mCAE9BC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,KAAQ,UAAyB,IAAI,EACrCC,KAAS,UAAuB,IAAI,EAE1C,gCAAoBV,EAAK,IAAMU,EAAO,OAAyB,KAE/D,WAAQ,IAAM,CAEZ,GADA,EAAAC,QAAK,eAAe,eAAa,EAC7B,CAACF,EAAM,QAAS,OACpB,MAAMG,EAAeF,EAAO,SAAS,cAAgB,IAGrD,OAFqB,OAAO,aAERE,EAClB,gBAAc,OAAO,CACnB,QAASF,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAED,gBAAc,OAAO,CACnB,QAASJ,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,EACD,gBAAc,OAAO,CACnB,QAASJ,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAEI,IAAM,CACX,gBAAc,OAAO,EAAE,QAASC,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAKL,EACL,uBAAqB,aACrB,aAAW,MACTH,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,OAAI,IAAKU,EAAO,aAAW,MAAG,iCAAiC,EAC9D,mBAAC,WACC,UAAU,uBACV,aAAa,sBACb,OAAQ,GAAGN,GAAS,KAAO,EAAE,MAAMC,GAAa,KAAO,EAAE,OAC3D,EACF,KAGA,QAAC,OAAI,UAAU,6LACb,qBAAC,OAAI,UAAU,iCACZ,UAAAH,MAAS,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,yCAAyC,EAAG,KAAMA,EAAO,EAC1GC,MACC,OAAC,QACC,GAAG,IACH,KAAM,EACN,aAAW,MACT,oHACF,EACA,KAAMA,EACR,GAEJ,KAEA,QAAC,OAAI,UAAU,4DACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,KAAE,KAAMA,EAAgB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title tablet:pr-0 pr-[50px]')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a data-tracking-link=\"\" href={secondaryButton.link}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={3}\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "gsap", "clientHeight", "self", "value", "t", "c", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var D=Object.create;var u=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var A=(t,
|
|
1
|
+
"use strict";"use client";var D=Object.create;var u=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var A=(t,s)=>{for(var e in s)u(t,e,{get:s[e],enumerable:!0})},k=(t,s,e,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of Y(s))!O.call(t,r)&&r!==e&&u(t,r,{get:()=>s[r],enumerable:!(l=F(s,r))||l.enumerable});return t};var H=(t,s,e)=>(e=t!=null?D(q(t)):{},k(s||!t||!t.__esModule?u(e,"default",{value:t,enumerable:!0}):e,t)),G=t=>k(u({},"__esModule",{value:!0}),t);var Q={};A(Q,{default:()=>K});module.exports=G(Q);var o=require("react/jsx-runtime"),a=require("react"),p=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),L=H(require("../../components/picture.js")),P=H(require("../../components/button.js")),v=require("@payloadcms/richtext-lexical/html"),T=require("react-intersection-observer");const M=({defaultConverters:t})=>({...t,text:s=>{const{node:e}=s;return e.$&&e.$.color?`<span class="lexical-${e.$.color}">${e.text}</span>`:e.text}}),J=(0,a.forwardRef)(({className:t="",onBtnClick:s,data:{title:e,videoTitle:l,btnText:r,img:f,video:B,theme:R,shape:E,...I}},$)=>{const{sticky:n}=I,[i,d]=(0,a.useState)(!1),[g,z]=(0,a.useState)(0),c=(0,a.useRef)(null),m=(0,a.useRef)(null),_=(0,a.useRef)(null),{ref:C,inView:x}=(0,T.useInView)();(0,a.useImperativeHandle)($,()=>m.current);const y=typeof e=="string"?e:e&&(0,v.convertLexicalToHTML)({data:e,converters:M}),h=typeof l=="string"?l:l&&(0,v.convertLexicalToHTML)({data:l,converters:M});return(0,a.useEffect)(()=>{x&&!r?(c.current?.play(),d(!0)):(c.current?.pause(),d(!1))},[x]),(0,a.useEffect)(()=>{if(m.current&&n){const S=m.current.getBoundingClientRect(),b=window.innerHeight,V=window.scrollY||window.pageYOffset,j=S.bottom+V,w=document.documentElement.scrollHeight-j;z(w>b?b:w)}},[]),(0,o.jsxs)("div",{ref:m,style:n?{marginBottom:`-${g}px`}:{},className:(0,p.cn)("relative",n&&"mt-[-100vh]"),children:[(0,o.jsx)("div",{className:"sticky top-0 ",children:(0,o.jsxs)("div",{className:(0,p.cn)("relative overflow-hidden",n?"h-screen w-screen":"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",t,{"aiui-dark":R==="dark","rounded-box":E==="rounded"}),children:[(0,o.jsx)("div",{children:(0,o.jsxs)("div",{ref:C,className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[y&&!i&&(0,o.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),h&&i&&(0,o.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:h}}),!i&&r&&(0,o.jsx)(P.default,{variant:"link",className:(0,p.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{i?(c.current&&c.current.pause(),d(!1)):(c.current&&c.current.play(),d(!0)),s&&s?.()},children:r})]})}),(0,o.jsx)("div",{children:(0,o.jsxs)("div",{ref:_,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,o.jsx)("video",{ref:c,className:"size-full object-cover",src:B?.url,muted:!0,loop:!0,autoPlay:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),!i&&f?.url&&(0,o.jsx)(L.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:f?.url,alt:f?.alt,imgClassName:"w-full h-full object-cover"}),(0,o.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})}),(0,o.jsx)("div",{className:(0,p.cn)(n&&"relative box-content block",n&&"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),style:n?{height:`${g}px`}:{}})]})});var K=(0,N.withStyles)(J);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n useEffect(() => {\n if (boxRef.current && sticky) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, [])\n\n // useGSAP(() => {\n // if (!bgRef.current) return\n // const height = boxRef.current?.clientHeight || 100\n // const screenHeight = bgRef.current?.clientHeight || 100\n // const base = screenHeight + height\n\n // ScrollTrigger.create({\n // trigger: boxRef.current,\n // start: 'top bottom',\n // end: 'bottom top',\n // scrub: true,\n // onUpdate: (self: any) => {\n // const value = self.progress * base - screenHeight\n // gsap.set(bgRef.current, { y: value })\n // },\n // })\n // return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n // }\n // }, [])\n\n return (\n <div\n ref={boxRef}\n style={sticky ? { marginBottom: `-${btb}px` } : {}}\n className={cn('relative', sticky && 'mt-[-100vh]')}\n >\n <div className=\"sticky top-0 \">\n <div\n className={cn(\n 'relative overflow-hidden',\n sticky\n ? 'h-screen w-screen'\n : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n useEffect(() => {\n if (boxRef.current && sticky) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, [])\n\n // useGSAP(() => {\n // if (!bgRef.current) return\n // const height = boxRef.current?.clientHeight || 100\n // const screenHeight = bgRef.current?.clientHeight || 100\n // const base = screenHeight + height\n\n // ScrollTrigger.create({\n // trigger: boxRef.current,\n // start: 'top bottom',\n // end: 'bottom top',\n // scrub: true,\n // onUpdate: (self: any) => {\n // const value = self.progress * base - screenHeight\n // gsap.set(bgRef.current, { y: value })\n // },\n // })\n // return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n // }\n // }, [])\n\n return (\n <div\n ref={boxRef}\n style={sticky ? { marginBottom: `-${btb}px` } : {}}\n className={cn('relative', sticky && 'mt-[-100vh]')}\n >\n <div className=\"sticky top-0 \">\n <div\n className={cn(\n 'relative overflow-hidden',\n sticky\n ? 'h-screen w-screen'\n : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n autoPlay\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n {!isPlaying && img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(\n sticky && 'relative box-content block',\n sticky &&\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n )}\n style={sticky ? { height: `${btb}px` } : {}}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "inViewRef", "inView", "title_html", "videoTitle_html", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "Button", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var b=Object.create;var s=Object.defineProperty;var
|
|
1
|
+
"use strict";"use client";var b=Object.create;var s=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},p=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of N(t))!M.call(e,i)&&i!==o&&s(e,i,{get:()=>t[i],enumerable:!(a=P(t,i))||a.enumerable});return e};var n=(e,t,o)=>(o=e!=null?b(k(e)):{},p(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),C=e=>p(s({},"__esModule",{value:!0}),e);var z={};L(z,{default:()=>j});module.exports=C(z);var l=require("react/jsx-runtime"),r=require("react"),d=require("../../helpers/utils.js"),m=require("../../shared/Styles.js"),f=require("../../components/index.js"),c=n(require("../Title/index.js")),u=n(require("../SwiperBox/index.js")),x=require("../../components/container.js"),v=require("@payloadcms/richtext-lexical/html");const S=({data:e,configuration:t})=>{const[o,a]=(0,r.useState)(!1),i=(0,r.useRef)(null);return(0,l.jsxs)("div",{className:(0,d.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[o?(0,l.jsx)("video",{ref:i,className:"size-full object-cover",src:e?.video?.url,muted:!0,loop:!0,autoPlay:!0}):(0,l.jsx)(f.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover hover:scale-110 transition-all duration-300"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e.video&&(0,l.jsx)("button",{onClick:()=>{o?(i.current&&i.current.pause(),a(!1)):(i.current&&i.current.play(),a(!0)),t?.onVideoPlayBtnClick&&t?.onVideoPlayBtnClick?.(t?.index||0)},className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},T=(0,r.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:i="",key:h,onVideoPlayBtnClick:g},y)=>{const w=typeof o=="string"?o:o&&(0,v.convertLexicalToHTML)({data:o});return(0,l.jsx)("div",{className:i,children:(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(x.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:y,children:[o&&(0,l.jsx)(c.default,{data:{title:w||""}}),(0,l.jsx)(u.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+h,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:g}},Slide:S})]})})})})});var j=(0,m.withStyles)(T);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n configuration?.onVideoPlayBtnClick && configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick } }}\n Slide={MediaPlayerItem}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBM,IAAAI,EAAA,6BAtBNC,EAAoD,iBACpDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA0B,yCAC1BC,EAAqC,6CAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EACnDC,KAAW,UAAyB,IAAI,EAC9C,SACE,QAAC,OACC,aAAW,MACT,2CACA,yCACA,iEACAH,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,qBAAC,OAAI,UAAU,uFACZ,UAAAC,KACC,OAAC,SAAM,IAAKE,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop autoPlay />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n configuration?.onVideoPlayBtnClick && configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick } }}\n Slide={MediaPlayerItem}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBM,IAAAI,EAAA,6BAtBNC,EAAoD,iBACpDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA0B,yCAC1BC,EAAqC,6CAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EACnDC,KAAW,UAAyB,IAAI,EAC9C,SACE,QAAC,OACC,aAAW,MACT,2CACA,yCACA,iEACAH,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,qBAAC,OAAI,UAAU,uFACZ,UAAAC,KACC,OAAC,SAAM,IAAKE,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,SAAQ,GAAC,KAEpG,OAAC,WACC,OAAQA,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,KAEF,OAAC,OAAI,UAAU,2DACZ,SAAAA,EAAK,UACJ,OAAC,UACC,QAAS,IAAM,CACTE,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,GAEnBF,GAAe,qBAAuBA,GAAe,sBAAsBA,GAAe,OAAS,CAAC,CACtG,EACA,UAAU,gHAEV,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,KAEA,QAAC,OAAI,UAAU,oJACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,MAAG,UAAU,4FACX,SAAAD,EAAK,MACR,EACCA,EAAK,UACJ,OAAC,KAAE,UAAU,uFACV,SAAAA,EAAK,MACR,GAEJ,KAEA,OAAC,KAAE,UAAU,0JACV,SAAAA,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,KAAmB,cACvB,CACE,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,EAAO,eAAAC,CAAe,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAC1GC,IACG,CACH,MAAMC,EAAa,OAAON,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EACpG,SACE,OAAC,OAAI,UAAWE,EACd,mBAAC,OAAI,UAAU,uBACb,mBAAC,aAAW,GAAID,GAAkB,CAAC,EAAI,UAAU,kBAC/C,oBAAC,OAAI,UAAWC,EAAW,IAAKG,EAC7B,UAAAL,MAAS,OAAC,EAAAO,QAAA,CAAM,KAAM,CAAE,MAAOD,GAAc,EAAG,EAAG,KACpD,OAAC,EAAAE,QAAA,CACC,UAAU,oBACV,GAAI,yBAA2BL,EAC/B,KAAM,CAAE,KAAML,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAK,CAAoB,CAAE,EAC1E,MAAOb,EACT,GACF,EACF,EACF,EACF,CAEJ,CACF,EAEA,IAAOX,KAAQ,cAAWiB,CAAgB",
|
|
6
6
|
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "import_html", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "title_html", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var A=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},y=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of N(r))!C.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(s=L(r,o))||s.enumerable});return t};var G=(t,r,e)=>(e=t!=null?A(z(t)):{},y(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>y(l({},"__esModule",{value:!0}),t);var $={};D($,{default:()=>U});module.exports=I($);var d=require("react/jsx-runtime"),n=G(require("react")),b=require("@gsap/react"),a=require("gsap"),f=require("gsap/dist/SplitText"),c=require("gsap/dist/ScrollTrigger"),w=require("../../helpers/utils.js"),x=require("../../components/index.js"),v=require("../../shared/Styles.js");const T=n.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:s}=t,o=(0,n.useRef)(null),i=(0,n.useRef)(null);return(0,b.useGSAP)(()=>{if(a.gsap.registerPlugin(f.SplitText,c.ScrollTrigger),!o.current)return;const H=o.current?.clientHeight||80;i.current=new f.SplitText(o.current,{type:"words",wordsClass:"word"});const m=i.current.words;return a.gsap.set(m,{opacity:0}),c.ScrollTrigger.create({trigger:o.current,start:"bottom bottom-=6%",end:`bottom+=${H*2+40}px bottom-=6%`,scrub:!0,onUpdate:p=>{const S=p.progress,g=m.length,k=1/g,h=.5;m.forEach((E,M)=>{const P=M/g*(1-h),R=k*(1+h);let u=(S-P)/R;u=Math.max(0,Math.min(u,1)),a.gsap.set(E,{opacity:u})})}}),()=>{i.current&&i.current.revert(),c.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),e&&(0,d.jsx)("div",{className:(0,w.cn)("tablet:mb-[32px] mb-[24px] space-y-4",r,{"aiui-dark":s==="dark"}),children:(0,d.jsx)(x.Heading,{ref:o,as:"h1",size:
|
|
1
|
+
"use strict";"use client";var A=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},y=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of N(r))!C.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(s=L(r,o))||s.enumerable});return t};var G=(t,r,e)=>(e=t!=null?A(z(t)):{},y(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>y(l({},"__esModule",{value:!0}),t);var $={};D($,{default:()=>U});module.exports=I($);var d=require("react/jsx-runtime"),n=G(require("react")),b=require("@gsap/react"),a=require("gsap"),f=require("gsap/dist/SplitText"),c=require("gsap/dist/ScrollTrigger"),w=require("../../helpers/utils.js"),x=require("../../components/index.js"),v=require("../../shared/Styles.js");const T=n.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:s}=t,o=(0,n.useRef)(null),i=(0,n.useRef)(null);return(0,b.useGSAP)(()=>{if(a.gsap.registerPlugin(f.SplitText,c.ScrollTrigger),!o.current)return;const H=o.current?.clientHeight||80;i.current=new f.SplitText(o.current,{type:"words",wordsClass:"word"});const m=i.current.words;return a.gsap.set(m,{opacity:0}),c.ScrollTrigger.create({trigger:o.current,start:"bottom bottom-=6%",end:`bottom+=${H*2+40}px bottom-=6%`,scrub:!0,onUpdate:p=>{const S=p.progress,g=m.length,k=1/g,h=.5;m.forEach((E,M)=>{const P=M/g*(1-h),R=k*(1+h);let u=(S-P)/R;u=Math.max(0,Math.min(u,1)),a.gsap.set(E,{opacity:u})})}}),()=>{i.current&&i.current.revert(),c.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),e&&(0,d.jsx)("div",{className:(0,w.cn)("tablet:mb-[32px] mb-[24px] space-y-4",r,{"aiui-dark":s==="dark"}),children:(0,d.jsx)(x.Heading,{ref:o,as:"h1",size:4,html:e})})});T.displayName="Title";var U=(0,v.withStyles)(T);
|
|
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 { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\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\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 gsap.registerPlugin(SplitText, ScrollTrigger)\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-=6%',\n end: `bottom+=${height * 2 + 40}px bottom-=6%`,\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 return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => 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=\"h1\" size={
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/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 { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\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 gsap.registerPlugin(SplitText, ScrollTrigger)\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-=6%',\n end: `bottom+=${height * 2 + 40}px bottom-=6%`,\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 return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => 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=\"h1\" size={4} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
5
|
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,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,CAEZ,GADA,OAAK,eAAe,YAAW,eAAa,EACxC,CAACD,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASH,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWE,EAAS,EAAI,EAAE,gBAC/B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,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,gBAAc,OAAO,EAAE,QAASa,GAA2BA,EAAE,KAAK,CAAC,CACrE,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,IAAOV,KAAQ,cAAWU,CAAK",
|
|
6
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"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var u=Object.create;var l=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var N=(t
|
|
1
|
+
"use strict";var u=Object.create;var l=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of R(t))!L.call(e,a)&&a!==o&&l(e,a,{get:()=>t[a],enumerable:!(i=z(t,a))||i.enumerable});return e};var T=(e,t,o)=>(o=e!=null?u(E(e)):{},g(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),V=e=>g(l({},"__esModule",{value:!0}),e);var C={};N(C,{Heading:()=>r});module.exports=V(C);var d=require("react/jsx-runtime"),x=require("../helpers/index.js"),m=require("@radix-ui/react-slot"),c=require("class-variance-authority"),h=T(require("react")),f=require("@payloadcms/richtext-lexical/html");const w=(0,c.cva)("leading-tight tracking-[-0.04em]",{variants:{size:{none:"tracking-[-0.04em]",1:"lg-desktop:text-[16px] text-[14px] leading-[120%]",2:"lg-desktop:text-[24px] text-[20px] leading-[120%]",3:"lg-desktop:text-[32px] text-[24px] leading-[120%]",4:"desktop:text-[36px] lg-desktop:text-[48px] text-[32px] leading-[100%]",5:"desktop:text-[48px] lg-desktop:text-[64px] text-[40px] leading-[100%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),r=h.default.forwardRef((e,t)=>{const{children:o,className:i,size:a="none",align:k,weight:y,asChild:b,as:H="h1",color:s,html:n,...P}=e,p=n?{dangerouslySetInnerHTML:{__html:typeof n=="string"?n:(0,f.convertLexicalToHTML)({data:n})}}:null,S=s?{style:{color:s}}:null;return(0,d.jsx)(m.Slot,{...P,ref:t,className:(0,x.cn)(w({size:a,weight:y,align:k}),i),...p,...S,children:b?o:(0,d.jsx)(H,{children:p?null:o})})});r.displayName="Heading";
|
|
2
2
|
//# sourceMappingURL=heading.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/heading.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight', {\n variants: {\n size: {\n none: 'tracking',\n 1: '
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuF4B,IAAAI,EAAA,6BAvF5BC,EAAmB,+BACnBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAkB,oBAClBC,EAAqC,6CAGrC,MAAMC,KAAkB,OAAI,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight tracking-[-0.04em]', {\n variants: {\n size: {\n none: 'tracking-[-0.04em]',\n 1: 'lg-desktop:text-[16px] text-[14px] leading-[120%]',\n 2: 'lg-desktop:text-[24px] text-[20px] leading-[120%]',\n 3: 'lg-desktop:text-[32px] text-[24px] leading-[120%]',\n 4: 'desktop:text-[36px] lg-desktop:text-[48px] text-[32px] leading-[100%]',\n 5: 'desktop:text-[48px] lg-desktop:text-[64px] text-[40px] leading-[100%]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n asChild?: boolean\n color?: string\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n const {\n children,\n className,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n align,\n weight,\n asChild,\n as: Tag = 'h1',\n color,\n html,\n ...headingProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n return (\n <Slot\n {...headingProps}\n ref={forwardedRef}\n className={cn(\n headingVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuF4B,IAAAI,EAAA,6BAvF5BC,EAAmB,+BACnBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAkB,oBAClBC,EAAqC,6CAGrC,MAAMC,KAAkB,OAAI,mCAAoC,CAC9D,SAAU,CACR,KAAM,CACJ,KAAM,qBACN,EAAG,oDACH,EAAG,oDACH,EAAG,oDACH,EAAG,wEACH,EAAG,uEACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAWKR,EAAU,EAAAS,QAAM,WAAyC,CAACC,EAAOC,IAAiB,CACtF,KAAM,CACJ,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,KACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KACJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTH,EAAgB,CACd,KAAAM,EACA,OAAAE,EACA,MAAAD,CACF,CAAC,EACDF,CACF,EACC,GAAGS,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EAEDZ,EAAQ,YAAc",
|
|
6
6
|
"names": ["heading_exports", "__export", "Heading", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react_slot", "import_class_variance_authority", "import_react", "import_html", "headingVariants", "React", "props", "forwardedRef", "children", "className", "size", "align", "weight", "asChild", "Tag", "color", "html", "headingProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var b=Object.create;var
|
|
1
|
+
"use strict";var b=Object.create;var a=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of C(t))!z.call(e,r)&&r!==o&&a(e,r,{get:()=>t[r],enumerable:!(n=S(t,r))||n.enumerable});return e};var w=(e,t,o)=>(o=e!=null?b(R(e)):{},d(t||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),E=e=>d(a({},"__esModule",{value:!0}),e);var W={};L(W,{Text:()=>s});module.exports=E(W);var i=require("react/jsx-runtime"),N=w(require("react")),x=require("@radix-ui/react-slot"),P=require("class-variance-authority"),c=require("@payloadcms/richtext-lexical/html"),f=require("../helpers/index.js");const V=(0,P.cva)("tracking-[-0.02em]",{variants:{size:{none:"tracking",1:"text-[12px] leading-[140%]",2:"text-[14px] leading-[140%]",3:"text-[16px] leading-[140%]",4:"text-[18px] leading-[140%]"},weight:{light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),s=N.forwardRef((e,t)=>{const{children:o,size:n="none",weight:r,align:g,className:T,asChild:h,as:y="span",color:l,html:p,...u}=e,m=p?{dangerouslySetInnerHTML:{__html:typeof p=="string"?p:(0,c.convertLexicalToHTML)({data:p})}}:null,v=l?{style:{color:l}}:null;return(0,i.jsx)(x.Slot,{...u,ref:t,className:(0,f.cn)(V({size:n,weight:n==="none"?"medium":r,align:g}),T),...m,...v,children:h?o:(0,i.jsx)(y,{children:m?null:o})})});s.displayName="Text";
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/text.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GA+F4B,IAAAI,EAAA,6BA/F5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('tracking-[-0.02em]', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-[12px] leading-[140%]',\n 2: 'text-[14px] leading-[140%]',\n 3: 'text-[16px] leading-[140%]',\n 4: 'text-[18px] leading-[140%]',\n },\n weight: {\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n weight,\n align,\n className,\n asChild,\n as: Tag = 'span',\n color,\n html,\n ...textProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight: size === 'none' ? 'medium' : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GA+F4B,IAAAI,EAAA,6BA/F5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,qBAAsB,CAC7C,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,MAAO,aACP,OAAQ,cACR,OAAQ,cACR,SAAU,gBACV,KAAM,WACR,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKR,EAAOG,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTF,EAAa,CACX,KAAAI,EACA,OAAQA,IAAS,OAAS,SAAWC,EACrC,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDX,EAAK,YAAc",
|
|
6
6
|
"names": ["text_exports", "__export", "Text", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_class_variance_authority", "import_html", "import_helpers", "textVariants", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var i=Object.defineProperty;var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var c=(r,o)=>{for(var n in o)i(r,n,{get:o[n],enumerable:!0})},m=(r,o,n,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of s(o))!d.call(r,a)&&a!==n&&i(r,a,{get:()=>o[a],enumerable:!(l=p(o,a))||l.enumerable});return r};var y=r=>m(i({},"__esModule",{value:!0}),r);var b={};c(b,{All:()=>u,Default:()=>g,Html:()=>f,default:()=>x});module.exports=y(b);var e=require("react/jsx-runtime"),t=require("../components/index.js"),v=require("react");const h={title:"Typography/Heading",component:t.Heading,parameters:{layout:"padded",docs:{description:{component:`Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002
|
|
2
2
|
|
|
3
3
|
### \u6807\u9898\u5C3A\u5BF8
|
|
4
4
|
\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px,
|
|
@@ -9,5 +9,5 @@
|
|
|
9
9
|
- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)
|
|
10
10
|
- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)
|
|
11
11
|
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
12
|
-
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var x=h;const g={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog."}},u={render:()=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Heading,{size:1,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:2,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:4,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})},f={render:()=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Heading,{size:1,children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Heading,{size:1,html:"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Heading,{size:5,html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})};
|
|
12
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var x=h;const g={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog.",className:"tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] "}},u={render:()=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Heading,{size:1,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:2,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:4,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Heading,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})},f={render:()=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Heading,{size:1,children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Heading,{size:1,html:"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Heading,{size:5,html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})};
|
|
13
13
|
//# sourceMappingURL=heading.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/heading.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002\n\n### \u6807\u9898\u5C3A\u5BF8\n\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px, \n\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A \n- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)\n- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)\n- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)\n- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)\n- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n `,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['none', 1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n },\n}\n\nexport const All: Story = {\n render: () => (\n <>\n <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n </>\n ),\n}\n\nexport const Html: Story = {\n render: () => (\n <>\n <Heading size={1}>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Heading>\n <hr />\n <Heading size={1} html=\"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>\" />\n <hr />\n <Heading\n size={5}\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n ),\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,SAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002\n\n### \u6807\u9898\u5C3A\u5BF8\n\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px, \n\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A \n- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)\n- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)\n- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)\n- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)\n- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n `,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['none', 1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n className: 'tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] ',\n },\n}\n\nexport const All: Story = {\n render: () => (\n <>\n <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n </>\n ),\n}\n\nexport const Html: Story = {\n render: () => (\n <>\n <Heading size={1}>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Heading>\n <hr />\n <Heading size={1} html=\"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>\" />\n <hr />\n <Heading\n size={5}\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n ),\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,SAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAoGI,IAAAO,EAAA,6BAlGJC,EAAwB,kCACxBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAW,UACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAYb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,EAAG,EAAG,EAAG,EAAG,CAAC,EAC/B,YAAa,sFACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,SAAU,WAAY,OAAQ,YAAa,OAAO,EAC5D,YAAa,2EACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5C,YAAa,gCACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,GAAI,KACJ,KAAM,EACN,OAAQ,OACR,MAAO,MACT,CACF,EAEA,IAAOL,EAAQK,EAIR,MAAMP,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,gDACV,UAAW,iEACb,CACF,EAEaD,EAAa,CACxB,OAAQ,OACN,oBACE,oBAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,KAC9D,OAAC,WAAQ,KAAM,EAAG,wDAA4C,GAChE,CAEJ,EAEaE,EAAc,CACzB,OAAQ,OACN,oBACE,oBAAC,WAAQ,KAAM,EAAG,sGAAmC,KACrD,OAAC,OAAG,KACJ,OAAC,WAAQ,KAAM,EAAG,KAAK,mFAAmF,KAC1G,OAAC,OAAG,KACJ,OAAC,WACC,KAAM,EACN,KACE,CACE,KAAM,CACJ,KAAM,OACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,0BACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,EACA,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,SACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,CACF,EACA,UAAW,KACb,CACF,EAEJ,GACF,CAEJ",
|
|
6
6
|
"names": ["heading_stories_exports", "__export", "All", "Default", "Html", "heading_stories_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as l}from"react/jsx-runtime";import f,{useImperativeHandle as R,useRef as h}from"react";import{useGSAP as T}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as v,Heading as E,Picture as I,Text as y}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as L}from"../../shared/Styles.js";const k=f.forwardRef(({data:H,className:N},w)=>{const{title:g,subtitle:d,pcImage:B,mobileImage:z,primaryButton:n,secondaryButton:i,theme:P="light",caption:m=[]}=H,p=h(null),a=h(null);return R(w,()=>a.current),T(()=>{if(c.registerPlugin(s),!p.current)return;const u=a.current?.clientHeight||100;return window.innerHeight<=u?s.create({trigger:a.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:e=>{const o=e.progress*40-20;c.set(p.current,{yPercent:o})}}):(s.create({trigger:a.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:e=>{const o=e.progress*20-20;c.set(p.current,{yPercent:o})}}),s.create({trigger:a.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:e=>{const o=e.progress*20;c.set(p.current,{yPercent:o})}})),()=>{s.getAll().forEach(e=>e.kill())}},[]),l("div",{ref:a,"data-ui-component-id":"HeroBanner",className:r(P==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",N),children:[t("div",{ref:p,className:r("absolute left-0 top-0 size-full"),children:t(I,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${B?.url||""} , ${z?.url||""} 767`})}),l("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[l("div",{className:"laptop:text-left max-w-[686px]",children:[g&&t(E,{as:"h1",size:5,className:r("hero-banner-title tablet:pr-0 pr-[50px]"),html:g}),d&&t(y,{as:"p",size:3,className:r("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:d})]}),l("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[i&&i.text&&t("a",{href:i.link,children:t(v,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),n&&n.text&&t("a",{href:n.link,children:t(v,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:n.text})})]})]}),m.length>0&&t("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:m.map((u,x)=>l(f.Fragment,{children:[t(y,{size:3,className:r("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:u.title}),x<m.length-1&&t("div",{className:r("bg-info-primary w-px")})]},x))})]})});k.displayName="HeroBanner";var $=L(k);export{$ as default};
|
|
1
|
+
"use client";import{jsx as t,jsxs as l}from"react/jsx-runtime";import f,{useImperativeHandle as R,useRef as h}from"react";import{useGSAP as T}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as v,Heading as E,Picture as I,Text as y}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as L}from"../../shared/Styles.js";const k=f.forwardRef(({data:H,className:N},w)=>{const{title:g,subtitle:d,pcImage:B,mobileImage:z,primaryButton:n,secondaryButton:i,theme:P="light",caption:m=[]}=H,p=h(null),a=h(null);return R(w,()=>a.current),T(()=>{if(c.registerPlugin(s),!p.current)return;const u=a.current?.clientHeight||100;return window.innerHeight<=u?s.create({trigger:a.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:e=>{const o=e.progress*40-20;c.set(p.current,{yPercent:o})}}):(s.create({trigger:a.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:e=>{const o=e.progress*20-20;c.set(p.current,{yPercent:o})}}),s.create({trigger:a.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:e=>{const o=e.progress*20;c.set(p.current,{yPercent:o})}})),()=>{s.getAll().forEach(e=>e.kill())}},[]),l("div",{ref:a,"data-ui-component-id":"HeroBanner",className:r(P==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",N),children:[t("div",{ref:p,className:r("absolute left-0 top-0 size-full"),children:t(I,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${B?.url||""} , ${z?.url||""} 767`})}),l("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[l("div",{className:"laptop:text-left max-w-[686px]",children:[g&&t(E,{as:"h1",size:5,className:r("hero-banner-title tablet:pr-0 pr-[50px]"),html:g}),d&&t(y,{as:"p",size:3,className:r("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:d})]}),l("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[i&&i.text&&t("a",{"data-tracking-link":"",href:i.link,children:t(v,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),n&&n.text&&t("a",{href:n.link,children:t(v,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:n.text})})]})]}),m.length>0&&t("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:m.map((u,x)=>l(f.Fragment,{children:[t(y,{size:3,className:r("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:u.title}),x<m.length-1&&t("div",{className:r("bg-info-primary w-px")})]},x))})]})});k.displayName="HeroBanner";var $=L(k);export{$ as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title tablet:pr-0 pr-[50px]')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={secondaryButton.link}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={3}\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
-
"mappings": "aA4EQ,cAAAA,EASA,QAAAC,MATA,oBA3ER,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,MAAe,cACxB,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,0BAE9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaZ,EAAM,WAA4C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,EAAQtB,EAAyB,IAAI,EACrCuB,EAASvB,EAAuB,IAAI,EAE1C,OAAAD,EAAoBc,EAAK,IAAMU,EAAO,OAAyB,EAE/DtB,EAAQ,IAAM,CAEZ,GADAC,EAAK,eAAeC,CAAa,EAC7B,CAACmB,EAAM,QAAS,OACpB,MAAME,EAAeD,EAAO,SAAS,cAAgB,IAGrD,OAFqB,OAAO,aAERC,EAClBrB,EAAc,OAAO,CACnB,QAASoB,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrCvB,EAAK,IAAIoB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,GAEDvB,EAAc,OAAO,CACnB,QAASoB,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrCvB,EAAK,IAAIoB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,EACDvB,EAAc,OAAO,CACnB,QAASoB,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9BvB,EAAK,IAAIoB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,GAEI,IAAM,CACXvB,EAAc,OAAO,EAAE,QAASwB,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,EAGH9B,EAAC,OACC,IAAK0B,EACL,uBAAqB,aACrB,UAAWf,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAhB,EAAC,OAAI,IAAK0B,EAAO,UAAWd,EAAG,iCAAiC,EAC9D,SAAAZ,EAACU,EAAA,CACC,UAAU,uBACV,aAAa,sBACb,OAAQ,GAAGU,GAAS,KAAO,EAAE,MAAMC,GAAa,KAAO,EAAE,OAC3D,EACF,EAGApB,EAAC,OAAI,UAAU,6LACb,UAAAA,EAAC,OAAI,UAAU,iCACZ,UAAAiB,GAASlB,EAACS,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,yCAAyC,EAAG,KAAMM,EAAO,EAC1GC,GACCnB,EAACW,EAAA,CACC,GAAG,IACH,KAAM,EACN,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GAEJ,EAEAlB,EAAC,OAAI,UAAU,4DACZ,UAAAsB,GAAmBA,EAAgB,MAClCvB,EAAC,KAAE,KAAMuB,EAAgB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title tablet:pr-0 pr-[50px]')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a data-tracking-link=\"\" href={secondaryButton.link}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={3}\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useState as w,useRef as f,useEffect as k,forwardRef as C,useImperativeHandle as S}from"react";import{cn as i}from"../../helpers/utils.js";import{withStyles as V}from"../../shared/Styles.js";import j from"../../components/picture.js";import D from"../../components/button.js";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";import{useInView as F}from"react-intersection-observer";const M=({defaultConverters:d})=>({...d,text:
|
|
1
|
+
"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useState as w,useRef as f,useEffect as k,forwardRef as C,useImperativeHandle as S}from"react";import{cn as i}from"../../helpers/utils.js";import{withStyles as V}from"../../shared/Styles.js";import j from"../../components/picture.js";import D from"../../components/button.js";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";import{useInView as F}from"react-intersection-observer";const M=({defaultConverters:d})=>({...d,text:r=>{const{node:e}=r;return e.$&&e.$.color?`<span class="lexical-${e.$.color}">${e.text}</span>`:e.text}}),Y=C(({className:d="",onBtnClick:r,data:{title:e,videoTitle:l,btnText:m,img:u,video:N,theme:L,shape:P,...T}},B)=>{const{sticky:s}=T,[a,n]=w(!1),[v,R]=w(0),o=f(null),c=f(null),E=f(null),{ref:I,inView:g}=F();S(B,()=>c.current);const x=typeof e=="string"?e:e&&H({data:e,converters:M}),y=typeof l=="string"?l:l&&H({data:l,converters:M});return k(()=>{g&&!m?(o.current?.play(),n(!0)):(o.current?.pause(),n(!1))},[g]),k(()=>{if(c.current&&s){const $=c.current.getBoundingClientRect(),h=window.innerHeight,z=window.scrollY||window.pageYOffset,_=$.bottom+z,b=document.documentElement.scrollHeight-_;R(b>h?h:b)}},[]),p("div",{ref:c,style:s?{marginBottom:`-${v}px`}:{},className:i("relative",s&&"mt-[-100vh]"),children:[t("div",{className:"sticky top-0 ",children:p("div",{className:i("relative overflow-hidden",s?"h-screen w-screen":"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",d,{"aiui-dark":L==="dark","rounded-box":P==="rounded"}),children:[t("div",{children:p("div",{ref:I,className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[x&&!a&&t("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),y&&a&&t("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),!a&&m&&t(D,{variant:"link",className:i("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(o.current&&o.current.pause(),n(!1)):(o.current&&o.current.play(),n(!0)),r&&r?.()},children:m})]})}),t("div",{children:p("div",{ref:E,className:"media-cover left-0 top-0 h-screen w-screen",children:[t("video",{ref:o,className:"size-full object-cover",src:N?.url,muted:!0,loop:!0,autoPlay:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),!a&&u?.url&&t(j,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:u?.url,alt:u?.alt,imgClassName:"w-full h-full object-cover"}),t("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})}),t("div",{className:i(s&&"relative box-content block",s&&"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),style:s?{height:`${v}px`}:{}})]})});var X=V(Y);export{X as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n useEffect(() => {\n if (boxRef.current && sticky) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, [])\n\n // useGSAP(() => {\n // if (!bgRef.current) return\n // const height = boxRef.current?.clientHeight || 100\n // const screenHeight = bgRef.current?.clientHeight || 100\n // const base = screenHeight + height\n\n // ScrollTrigger.create({\n // trigger: boxRef.current,\n // start: 'top bottom',\n // end: 'bottom top',\n // scrub: true,\n // onUpdate: (self: any) => {\n // const value = self.progress * base - screenHeight\n // gsap.set(bgRef.current, { y: value })\n // },\n // })\n // return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n // }\n // }, [])\n\n return (\n <div\n ref={boxRef}\n style={sticky ? { marginBottom: `-${btb}px` } : {}}\n className={cn('relative', sticky && 'mt-[-100vh]')}\n >\n <div className=\"sticky top-0 \">\n <div\n className={cn(\n 'relative overflow-hidden',\n sticky\n ? 'h-screen w-screen'\n : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n useEffect(() => {\n if (boxRef.current && sticky) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n }, [])\n\n // useGSAP(() => {\n // if (!bgRef.current) return\n // const height = boxRef.current?.clientHeight || 100\n // const screenHeight = bgRef.current?.clientHeight || 100\n // const base = screenHeight + height\n\n // ScrollTrigger.create({\n // trigger: boxRef.current,\n // start: 'top bottom',\n // end: 'bottom top',\n // scrub: true,\n // onUpdate: (self: any) => {\n // const value = self.progress * base - screenHeight\n // gsap.set(bgRef.current, { y: value })\n // },\n // })\n // return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n // }\n // }, [])\n\n return (\n <div\n ref={boxRef}\n style={sticky ? { marginBottom: `-${btb}px` } : {}}\n className={cn('relative', sticky && 'mt-[-100vh]')}\n >\n <div className=\"sticky top-0 \">\n <div\n className={cn(\n 'relative overflow-hidden',\n sticky\n ? 'h-screen w-screen'\n : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n autoPlay\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n {!isPlaying && img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(\n sticky && 'relative box-content block',\n sticky &&\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n )}\n style={sticky ? { height: `${btb}px` } : {}}\n />\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "aA8Gc,OAKI,OAAAA,EALJ,QAAAC,MAAA,oBA7Gd,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,EAAY,uBAAAC,MAA2B,QACpF,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,MAAiB,8BAG1B,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAkBZ,EACtB,CAAC,CAAE,UAAAa,EAAY,GAAI,WAAAC,EAAY,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAK,CAAE,EAAGC,IAAQ,CAChH,KAAM,CAAE,OAAAC,CAAO,EAAIF,EACb,CAACG,EAAWC,CAAY,EAAI7B,EAAS,EAAK,EAC1C,CAAC8B,EAAKC,CAAM,EAAI/B,EAAS,CAAC,EAE1BgC,EAAW/B,EAAyB,IAAI,EACxCgC,EAAShC,EAAuB,IAAI,EACpCiC,EAAQjC,EAAyB,IAAI,EAErC,CAAE,IAAKkC,EAAW,OAAAC,CAAO,EAAI1B,EAAU,EAE7CN,EAAoBsB,EAAK,IAAMO,EAAO,OAAyB,EAE/D,MAAMI,EACJ,OAAOnB,GAAU,SAAWA,EAAQA,GAAST,EAAqB,CAAE,KAAMS,EAAO,WAAYP,CAAe,CAAC,EACzG2B,EACJ,OAAOnB,GAAe,SAClBA,EACAA,GAAcV,EAAqB,CAAE,KAAMU,EAAY,WAAYR,CAAe,CAAC,EAEzF,OAAAT,EAAU,IAAM,CACVkC,GAAU,CAAChB,GACbY,EAAS,SAAS,KAAK,EACvBH,EAAa,EAAI,IAEjBG,EAAS,SAAS,MAAM,EACxBH,EAAa,EAAK,EAEtB,EAAG,CAACO,CAAM,CAAC,EAEXlC,EAAU,IAAM,CACd,GAAI+B,EAAO,SAAWN,EAAQ,CAC5B,MAAMY,EAAON,EAAO,QAAQ,sBAAsB,EAC5CO,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CX,EAAOY,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACF,EAAG,CAAC,CAAC,EAwBH5C,EAAC,OACC,IAAKkC,EACL,MAAON,EAAS,CAAE,aAAc,IAAIG,CAAG,IAAK,EAAI,CAAC,EACjD,UAAWzB,EAAG,WAAYsB,GAAU,aAAa,EAEjD,UAAA7B,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OACC,UAAWM,EACT,2BACAsB,EACI,oBACA,gLACJX,EACA,CACE,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEA,UAAA1B,EAAC,OACC,SAAAC,EAAC,OACC,IAAKoC,EACL,UAAU,kHAET,UAAAE,GAAc,CAACT,GACd9B,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQuC,CAAW,EAChD,EAEDC,GAAmBV,GAClB9B,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQwC,CAAgB,EACrD,EAED,CAACV,GAAaR,GACbtB,EAACU,EAAA,CACC,QAAQ,OACR,UAAWH,EAAG,4DAA4D,EAC1E,QAAS,IAAM,CACTuB,GACEI,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBH,EAAa,EAAK,IAEdG,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBH,EAAa,EAAI,GAEnBZ,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EACF,EACAtB,EAAC,OACC,SAAAC,EAAC,OAAI,IAAKmC,EAAO,UAAU,6CACzB,UAAApC,EAAC,SACC,IAAKkC,EACL,UAAU,yBACV,IAAKV,GAAO,IACZ,MAAK,GACL,KAAI,GACJ,SAAQ,GACR,YAAW,GACX,qBAAkB,GAClB,iBAAc,GAChB,EACC,CAACM,GAAaP,GAAK,KAClBvB,EAACS,EAAA,CACC,UAAU,mDACV,OAAQc,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEFvB,EAAC,OAAI,UAAU,uCAAuC,GACxD,EACF,GACF,EACF,EACAA,EAAC,OACC,UAAWO,EACTsB,GAAU,6BACVA,GACE,+KACJ,EACA,MAAOA,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC5C,GACF,CAEJ,CACF,EAEA,IAAOc,EAAQtC,EAAWS,CAAe",
|
|
6
6
|
"names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "inViewRef", "inView", "title_html", "videoTitle_html", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "MediaPlayerBase_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as m,useRef as f,forwardRef as c}from"react";import{cn as u}from"../../helpers/utils.js";import{withStyles as x}from"../../shared/Styles.js";import{Picture as v}from"../../components/index.js";import h from"../Title/index.js";import g from"../SwiperBox/index.js";import{Container as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as m,useRef as f,forwardRef as c}from"react";import{cn as u}from"../../helpers/utils.js";import{withStyles as x}from"../../shared/Styles.js";import{Picture as v}from"../../components/index.js";import h from"../Title/index.js";import g from"../SwiperBox/index.js";import{Container as y}from"../../components/container.js";import{convertLexicalToHTML as w}from"@payloadcms/richtext-lexical/html";const b=({data:l,configuration:i})=>{const[t,r]=m(!1),o=f(null);return a("div",{className:u("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",i.shape==="round"?"rounded-2xl":""),children:[a("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[t?e("video",{ref:o,className:"size-full object-cover",src:l?.video?.url,muted:!0,loop:!0,autoPlay:!0}):e(v,{source:l.img?.url,alt:l.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:l.video&&e("button",{onClick:()=>{t?(o.current&&o.current.pause(),r(!1)):(o.current&&o.current.play(),r(!0)),i?.onVideoPlayBtnClick&&i?.onVideoPlayBtnClick?.(i?.index||0)},className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),a("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[a("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:l.title}),l.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:l.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:l.description})]})]})},P=c(({data:{items:l=[],shape:i="square",title:t,containerProps:r},className:o="",key:s,onVideoPlayBtnClick:p},n)=>{const d=typeof t=="string"?t:t&&w({data:t});return e("div",{className:o,children:e("div",{className:"mediaplayermulti-box",children:e(y,{...r||{},className:"overflow-hidden",children:a("div",{className:o,ref:n,children:[t&&e(h,{data:{title:d||""}}),e(g,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+s,data:{list:l,configuration:{shape:i,onVideoPlayBtnClick:p}},Slide:b})]})})})})});var B=x(P);export{B as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n configuration?.onVideoPlayBtnClick && configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick } }}\n Slide={MediaPlayerItem}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
-
"mappings": "aAuBM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAtBN,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,cAAAC,MAAkB,QACpD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAAe,4BACxB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,EAAId,EAAkB,EAAK,EACnDe,EAAWd,EAAyB,IAAI,EAC9C,OACEF,EAAC,OACC,UAAWI,EACT,2CACA,yCACA,iEACAS,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAb,EAAC,OAAI,UAAU,uFACZ,UAAAc,EACCf,EAAC,SAAM,IAAKiB,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop autoPlay />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n configuration?.onVideoPlayBtnClick && configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick } }}\n Slide={MediaPlayerItem}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "aAuBM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAtBN,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,cAAAC,MAAkB,QACpD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAAe,4BACxB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,EAAId,EAAkB,EAAK,EACnDe,EAAWd,EAAyB,IAAI,EAC9C,OACEF,EAAC,OACC,UAAWI,EACT,2CACA,yCACA,iEACAS,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAb,EAAC,OAAI,UAAU,uFACZ,UAAAc,EACCf,EAAC,SAAM,IAAKiB,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,SAAQ,GAAC,EAEpGb,EAACO,EAAA,CACC,OAAQM,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,EAEFb,EAAC,OAAI,UAAU,2DACZ,SAAAa,EAAK,OACJb,EAAC,UACC,QAAS,IAAM,CACTe,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,GAEnBF,GAAe,qBAAuBA,GAAe,sBAAsBA,GAAe,OAAS,CAAC,CACtG,EACA,UAAU,gHAEV,SAAAd,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oJACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,4FACX,SAAAa,EAAK,MACR,EACCA,EAAK,OACJb,EAAC,KAAE,UAAU,uFACV,SAAAa,EAAK,MACR,GAEJ,EAEAb,EAAC,KAAE,UAAU,0JACV,SAAAa,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,EAAmBd,EACvB,CACE,CAAE,KAAM,CAAE,MAAAe,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,EAAO,eAAAC,CAAe,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAC1GC,IACG,CACH,MAAMC,EAAa,OAAON,GAAU,SAAWA,EAAQA,GAASV,EAAqB,CAAE,KAAMU,CAAM,CAAC,EACpG,OACErB,EAAC,OAAI,UAAWuB,EACd,SAAAvB,EAAC,OAAI,UAAU,uBACb,SAAAA,EAACU,EAAA,CAAW,GAAIY,GAAkB,CAAC,EAAI,UAAU,kBAC/C,SAAArB,EAAC,OAAI,UAAWsB,EAAW,IAAKG,EAC7B,UAAAL,GAASrB,EAACQ,EAAA,CAAM,KAAM,CAAE,MAAOmB,GAAc,EAAG,EAAG,EACpD3B,EAACS,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2Be,EAC/B,KAAM,CAAE,KAAML,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAK,CAAoB,CAAE,EAC1E,MAAOb,EACT,GACF,EACF,EACF,EACF,CAEJ,CACF,EAEA,IAAOgB,EAAQtB,EAAWY,CAAgB",
|
|
6
6
|
"names": ["jsx", "jsxs", "useState", "useRef", "forwardRef", "cn", "withStyles", "Picture", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "title_html", "MediaPlayerMulti_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 k}from"@gsap/react";import{gsap as s}from"gsap";import{SplitText as p}from"gsap/dist/SplitText";import{ScrollTrigger as i}from"gsap/dist/ScrollTrigger";import{cn as E}from"../../helpers/utils.js";import{Heading as M}from"../../components/index.js";import{withStyles as P}from"../../shared/Styles.js";const u=S.forwardRef(({data:d,className:g})=>{const{title:l,theme:h}=d,t=m(null),r=m(null);return k(()=>{if(s.registerPlugin(p,i),!t.current)return;const y=t.current?.clientHeight||80;r.current=new p(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return s.set(e,{opacity:0}),i.create({trigger:t.current,start:"bottom bottom-=6%",end:`bottom+=${y*2+40}px bottom-=6%`,scrub:!0,onUpdate:o=>{const T=o.progress,a=e.length,b=1/a,c=.5;e.forEach((w,x)=>{const v=x/a*(1-c),H=b*(1+c);let n=(T-v)/H;n=Math.max(0,Math.min(n,1)),s.set(w,{opacity:n})})}}),()=>{r.current&&r.current.revert(),i.getAll().forEach(o=>o.kill())}},[]),l&&f("div",{className:E("tablet:mb-[32px] mb-[24px] space-y-4",g,{"aiui-dark":h==="dark"}),children:f(M,{ref:t,as:"h1",size:
|
|
1
|
+
"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as m}from"react";import{useGSAP as k}from"@gsap/react";import{gsap as s}from"gsap";import{SplitText as p}from"gsap/dist/SplitText";import{ScrollTrigger as i}from"gsap/dist/ScrollTrigger";import{cn as E}from"../../helpers/utils.js";import{Heading as M}from"../../components/index.js";import{withStyles as P}from"../../shared/Styles.js";const u=S.forwardRef(({data:d,className:g})=>{const{title:l,theme:h}=d,t=m(null),r=m(null);return k(()=>{if(s.registerPlugin(p,i),!t.current)return;const y=t.current?.clientHeight||80;r.current=new p(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return s.set(e,{opacity:0}),i.create({trigger:t.current,start:"bottom bottom-=6%",end:`bottom+=${y*2+40}px bottom-=6%`,scrub:!0,onUpdate:o=>{const T=o.progress,a=e.length,b=1/a,c=.5;e.forEach((w,x)=>{const v=x/a*(1-c),H=b*(1+c);let n=(T-v)/H;n=Math.max(0,Math.min(n,1)),s.set(w,{opacity:n})})}}),()=>{r.current&&r.current.revert(),i.getAll().forEach(o=>o.kill())}},[]),l&&f("div",{className:E("tablet:mb-[32px] mb-[24px] space-y-4",g,{"aiui-dark":h==="dark"}),children:f(M,{ref:t,as:"h1",size:4,html:l})})});u.displayName="Title";var I=P(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 { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\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\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 gsap.registerPlugin(SplitText, ScrollTrigger)\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-=6%',\n end: `bottom+=${height * 2 + 40}px bottom-=6%`,\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 return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => 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=\"h1\" size={
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/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 { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\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 gsap.registerPlugin(SplitText, ScrollTrigger)\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-=6%',\n end: `bottom+=${height * 2 + 40}px bottom-=6%`,\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 return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach((t: { kill: () => any }) => 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=\"h1\" size={4} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
5
|
"mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,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,CAEZ,GADAC,EAAK,eAAeC,EAAWC,CAAa,EACxC,CAACS,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,oBACP,IAAK,WAAWE,EAAS,EAAI,EAAE,gBAC/B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,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,QAASuB,GAA2BA,EAAE,KAAK,CAAC,CACrE,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
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n}from"react/jsx-runtime";import{cn as f}from"../helpers/index.js";import{Slot as k}from"@radix-ui/react-slot";import{cva as y}from"class-variance-authority";import b from"react";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";const P=y("leading-tight",{variants:{size:{none:"tracking",1:"
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{cn as f}from"../helpers/index.js";import{Slot as k}from"@radix-ui/react-slot";import{cva as y}from"class-variance-authority";import b from"react";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";const P=y("leading-tight tracking-[-0.04em]",{variants:{size:{none:"tracking-[-0.04em]",1:"lg-desktop:text-[16px] text-[14px] leading-[120%]",2:"lg-desktop:text-[24px] text-[20px] leading-[120%]",3:"lg-desktop:text-[32px] text-[24px] leading-[120%]",4:"desktop:text-[36px] lg-desktop:text-[48px] text-[32px] leading-[100%]",5:"desktop:text-[48px] lg-desktop:text-[64px] text-[40px] leading-[100%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),i=b.forwardRef((l,r)=>{const{children:t,className:d,size:s="none",align:p,weight:g,asChild:x,as:m="h1",color:o,html:e,...c}=l,a=e?{dangerouslySetInnerHTML:{__html:typeof e=="string"?e:H({data:e})}}:null,h=o?{style:{color:o}}:null;return n(k,{...c,ref:r,className:f(P({size:s,weight:g,align:p}),d),...a,...h,children:x?t:n(m,{children:a?null:t})})});i.displayName="Heading";export{i as Heading};
|
|
2
2
|
//# sourceMappingURL=heading.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/heading.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight', {\n variants: {\n size: {\n none: 'tracking',\n 1: '
|
|
5
|
-
"mappings": "AAuF4B,cAAAA,MAAA,oBAvF5B,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAW,QAClB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkBH,EAAI,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight tracking-[-0.04em]', {\n variants: {\n size: {\n none: 'tracking-[-0.04em]',\n 1: 'lg-desktop:text-[16px] text-[14px] leading-[120%]',\n 2: 'lg-desktop:text-[24px] text-[20px] leading-[120%]',\n 3: 'lg-desktop:text-[32px] text-[24px] leading-[120%]',\n 4: 'desktop:text-[36px] lg-desktop:text-[48px] text-[32px] leading-[100%]',\n 5: 'desktop:text-[48px] lg-desktop:text-[64px] text-[40px] leading-[100%]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n asChild?: boolean\n color?: string\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n const {\n children,\n className,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n align,\n weight,\n asChild,\n as: Tag = 'h1',\n color,\n html,\n ...headingProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n return (\n <Slot\n {...headingProps}\n ref={forwardedRef}\n className={cn(\n headingVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
|
|
5
|
+
"mappings": "AAuF4B,cAAAA,MAAA,oBAvF5B,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAW,QAClB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkBH,EAAI,mCAAoC,CAC9D,SAAU,CACR,KAAM,CACJ,KAAM,qBACN,EAAG,oDACH,EAAG,oDACH,EAAG,oDACH,EAAG,wEACH,EAAG,uEACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAWKI,EAAUH,EAAM,WAAyC,CAACI,EAAOC,IAAiB,CACtF,KAAM,CACJ,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,KACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOb,EAAqB,CAAE,KAAMa,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KACJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWR,EACTK,EAAgB,CACd,KAAAM,EACA,OAAAE,EACA,MAAAD,CACF,CAAC,EACDF,CACF,EACC,GAAGS,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EAEDH,EAAQ,YAAc",
|
|
6
6
|
"names": ["jsx", "cn", "Slot", "cva", "React", "convertLexicalToHTML", "headingVariants", "Heading", "props", "forwardedRef", "children", "className", "size", "align", "weight", "asChild", "Tag", "color", "html", "headingProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as a}from"react/jsx-runtime";import*as g from"react";import{Slot as T}from"@radix-ui/react-slot";import{cva as h}from"class-variance-authority";import{convertLexicalToHTML as y}from"@payloadcms/richtext-lexical/html";import{cn as u}from"../helpers/index.js";const v=h("tracking-[-0.02em]",{variants:{size:{none:"tracking",1:"text-[12px] leading-[140%]",2:"text-[14px] leading-[140%]",3:"text-[16px] leading-[140%]",4:"text-[18px] leading-[140%]"},weight:{light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),p=g.forwardRef((s,i)=>{const{children:t,size:o="none",weight:l,align:m,className:d,asChild:x,as:P="span",color:r,html:e,...c}=s,n=e?{dangerouslySetInnerHTML:{__html:typeof e=="string"?e:y({data:e})}}:null,f=r?{style:{color:r}}:null;return a(T,{...c,ref:i,className:u(v({size:o,weight:o==="none"?"medium":l,align:m}),d),...n,...f,children:x?t:a(P,{children:n?null:t})})});p.displayName="Text";export{p as Text};
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/text.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('
|
|
5
|
-
"mappings": "AA+F4B,cAAAA,MAAA,oBA/F5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('tracking-[-0.02em]', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-[12px] leading-[140%]',\n 2: 'text-[14px] leading-[140%]',\n 3: 'text-[16px] leading-[140%]',\n 4: 'text-[18px] leading-[140%]',\n },\n weight: {\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n weight,\n align,\n className,\n asChild,\n as: Tag = 'span',\n color,\n html,\n ...textProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight: size === 'none' ? 'medium' : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
|
|
5
|
+
"mappings": "AA+F4B,cAAAA,MAAA,oBA/F5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,qBAAsB,CAC7C,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,MAAO,aACP,OAAQ,cACR,OAAQ,cACR,SAAU,gBACV,KAAM,WACR,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKI,EAAON,EAAM,WAAmC,CAACO,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOd,EAAqB,CAAE,KAAMc,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWJ,EACTC,EAAa,CACX,KAAAK,EACA,OAAQA,IAAS,OAAS,SAAWC,EACrC,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDH,EAAK,YAAc",
|
|
6
6
|
"names": ["jsx", "React", "Slot", "cva", "convertLexicalToHTML", "cn", "textVariants", "Text", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Fragment as o,jsx as e,jsxs as r}from"react/jsx-runtime";import{Heading as t}from"../components/index.js";import"react";const
|
|
1
|
+
import{Fragment as o,jsx as e,jsxs as r}from"react/jsx-runtime";import{Heading as t}from"../components/index.js";import"react";const a={title:"Typography/Heading",component:t,parameters:{layout:"padded",docs:{description:{component:`Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002
|
|
2
2
|
|
|
3
3
|
### \u6807\u9898\u5C3A\u5BF8
|
|
4
4
|
\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px,
|
|
@@ -9,5 +9,5 @@ import{Fragment as o,jsx as e,jsxs as r}from"react/jsx-runtime";import{Heading a
|
|
|
9
9
|
- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)
|
|
10
10
|
- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)
|
|
11
11
|
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
12
|
-
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var
|
|
12
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["none",1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927",table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var p=a;const s={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog.",className:"tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] "}},d={render:()=>r(o,{children:[e(t,{size:1,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:2,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:4,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})},c={render:()=>r(o,{children:[e(t,{size:1,children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),e("hr",{}),e(t,{size:1,html:"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>"}),e("hr",{}),e(t,{size:5,html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})};export{d as All,s as Default,c as Html,p as default};
|
|
13
13
|
//# sourceMappingURL=heading.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/heading.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002\n\n### \u6807\u9898\u5C3A\u5BF8\n\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px, \n\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A \n- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)\n- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)\n- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)\n- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)\n- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n `,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['none', 1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n },\n}\n\nexport const All: Story = {\n render: () => (\n <>\n <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n </>\n ),\n}\n\nexport const Html: Story = {\n render: () => (\n <>\n <Heading size={1}>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Heading>\n <hr />\n <Heading size={1} html=\"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>\" />\n <hr />\n <Heading\n size={5}\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n ),\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Heading',\n component: Heading,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `Heading \u7EC4\u4EF6\uFF0C \u5206\u4E3A5\u4E2Asize , \u5185\u7F6E\u5B57\u4F53\u5927\u5C0F\u54CD\u5E94\u5F0F\u9884\u8BBE, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837\u3002\n\n### \u6807\u9898\u5C3A\u5BF8\n\u6807\u9898\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6807\u9898\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6807\u9898\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6807\u9898\u5C3A\u5BF8\uFF1A14px, \n\u4ECE\u5927\u4E8E1920px, 1441-1920, \u5C0F\u4E8E1440px, \u7684\u5C3A\u5BF8\uFF0C\u5B57\u4F53\u5927\u5C0F\u5206\u522B\u4E3A\uFF1A \n- 5: \u7279\u5927\u6807\u9898(64px, 48px, 40px)\n- 4: \u4E00\u7EA7\u6807\u9898(48px, 36px, 32px)\n- 3: \u4E8C\u7EA7\u6807\u9898(32px, 24px\uFF0C 24px)\n- 2: \u4E09\u7EA7\u6807\u9898(24px, 20px, 20px)\n- 1: \u9875\u9762\u6309\u94AE/\u6807\u7B7E(16px, 14px, 14px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n `,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['none', 1, 2, 3, 4, 5],\n description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE1\u52305\uFF0Cfont-size\u8D8A\u6765\u8D8A\u5927',\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n description: 'html \u6807\u7B7E\u7C7B\u578B',\n table: {\n defaultValue: { summary: 'h1' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n as: 'h1',\n size: 1,\n weight: 'bold',\n align: 'left',\n },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n as: 'h1',\n children: ' The quick brown fox jumps over the lazy dog.',\n className: 'tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] ',\n },\n}\n\nexport const All: Story = {\n render: () => (\n <>\n <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n </>\n ),\n}\n\nexport const Html: Story = {\n render: () => (\n <>\n <Heading size={1}>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Heading>\n <hr />\n <Heading size={1} html=\"The quick brown fox jumps over the <span style='color: #FBDB93'>lazy dog.</span>\" />\n <hr />\n <Heading\n size={5}\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n ),\n}\n"],
|
|
5
|
+
"mappings": "AAoGI,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAlGJ,OAAS,WAAAC,MAAe,yBACxB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAYb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,EAAG,EAAG,EAAG,EAAG,CAAC,EAC/B,YAAa,sFACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,SAAU,WAAY,OAAQ,YAAa,OAAO,EAC5D,YAAa,2EACb,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5C,YAAa,gCACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,GAAI,KACJ,KAAM,EACN,OAAQ,OACR,MAAO,MACT,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,gDACV,UAAW,iEACb,CACF,EAEaC,EAAa,CACxB,OAAQ,IACNL,EAAAF,EAAA,CACE,UAAAC,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,GAChE,CAEJ,EAEaK,EAAc,CACzB,OAAQ,IACNN,EAAAF,EAAA,CACE,UAAAC,EAACE,EAAA,CAAQ,KAAM,EAAG,sGAAmC,EACrDF,EAAC,OAAG,EACJA,EAACE,EAAA,CAAQ,KAAM,EAAG,KAAK,mFAAmF,EAC1GF,EAAC,OAAG,EACJA,EAACE,EAAA,CACC,KAAM,EACN,KACE,CACE,KAAM,CACJ,KAAM,OACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,0BACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,EACA,CACE,IAAK,KACL,KAAM,UACN,OAAQ,GACR,OAAQ,EACR,QAAS,EACT,SAAU,CACR,CACE,KAAM,SACN,KAAM,SACN,KAAM,OACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,QAAS,CACX,CACF,EACA,UAAW,KACb,CACF,EACA,UAAW,KACb,CACF,EAEJ,GACF,CAEJ",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Heading", "meta", "heading_stories_default", "Default", "All", "Html"]
|
|
7
7
|
}
|
package/dist/tokens/base.css
CHANGED
|
@@ -69,25 +69,6 @@
|
|
|
69
69
|
--masks-color-1: hsla(0, 0%, 0%, 0.5);
|
|
70
70
|
--masks-color-2: hsla(0, 0%, 0%, 0.85);
|
|
71
71
|
|
|
72
|
-
--size-text-1: 12px;
|
|
73
|
-
--size-text-2: 14px;
|
|
74
|
-
--size-text-3: 16px;
|
|
75
|
-
--size-text-4: 18px;
|
|
76
|
-
--letter-spacing-text-1: -0.24px;
|
|
77
|
-
--letter-spacing-text-2: -0.28px;
|
|
78
|
-
--letter-spacing-text-3: -0.32px;
|
|
79
|
-
--letter-spacing-text-4: -0.36px;
|
|
80
|
-
|
|
81
|
-
--size-heading-1: 24px;
|
|
82
|
-
--size-heading-2: 32px;
|
|
83
|
-
--size-heading-3: 40px;
|
|
84
|
-
--size-heading-4: 48px;
|
|
85
|
-
--size-heading-5: 56px;
|
|
86
|
-
--letter-spacing-heading-1: -0.48px;
|
|
87
|
-
--letter-spacing-heading-2: -0.64px;
|
|
88
|
-
--letter-spacing-heading-3: -0.8px;
|
|
89
|
-
--letter-spacing-heading-4: -0.96px;
|
|
90
|
-
--letter-spacing-heading-5: -1.12px;
|
|
91
72
|
|
|
92
73
|
--line-height-base: 1.2;
|
|
93
74
|
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1292,34 +1292,24 @@ video {
|
|
|
1292
1292
|
.text-\[16px\] {
|
|
1293
1293
|
font-size: 16px;
|
|
1294
1294
|
}
|
|
1295
|
-
.text
|
|
1296
|
-
font-size:
|
|
1297
|
-
line-height: 1.5rem;
|
|
1295
|
+
.text-\[18px\] {
|
|
1296
|
+
font-size: 18px;
|
|
1298
1297
|
}
|
|
1299
|
-
.text
|
|
1300
|
-
font-size: 14px;
|
|
1301
|
-
line-height: 120%;
|
|
1302
|
-
letter-spacing: var(--letter-spacing-heading-1);
|
|
1303
|
-
}
|
|
1304
|
-
.text-heading-2 {
|
|
1298
|
+
.text-\[20px\] {
|
|
1305
1299
|
font-size: 20px;
|
|
1306
|
-
line-height: 120%;
|
|
1307
|
-
letter-spacing: var(--letter-spacing-heading-2);
|
|
1308
1300
|
}
|
|
1309
|
-
.text
|
|
1301
|
+
.text-\[24px\] {
|
|
1310
1302
|
font-size: 24px;
|
|
1311
|
-
line-height: 120%;
|
|
1312
|
-
letter-spacing: var(--letter-spacing-heading-3);
|
|
1313
1303
|
}
|
|
1314
|
-
.text
|
|
1304
|
+
.text-\[32px\] {
|
|
1315
1305
|
font-size: 32px;
|
|
1316
|
-
line-height: 100%;
|
|
1317
|
-
letter-spacing: var(--letter-spacing-heading-4);
|
|
1318
1306
|
}
|
|
1319
|
-
.text
|
|
1307
|
+
.text-\[40px\] {
|
|
1320
1308
|
font-size: 40px;
|
|
1321
|
-
|
|
1322
|
-
|
|
1309
|
+
}
|
|
1310
|
+
.text-base {
|
|
1311
|
+
font-size: 1rem;
|
|
1312
|
+
line-height: 1.5rem;
|
|
1323
1313
|
}
|
|
1324
1314
|
.text-lg {
|
|
1325
1315
|
font-size: 1.125rem;
|
|
@@ -1329,26 +1319,6 @@ video {
|
|
|
1329
1319
|
font-size: 0.875rem;
|
|
1330
1320
|
line-height: 1.25rem;
|
|
1331
1321
|
}
|
|
1332
|
-
.text-text-1 {
|
|
1333
|
-
font-size: var(--size-text-1);
|
|
1334
|
-
line-height: var(--line-height-normal);
|
|
1335
|
-
letter-spacing: var(--letter-spacing-text-1);
|
|
1336
|
-
}
|
|
1337
|
-
.text-text-2 {
|
|
1338
|
-
font-size: var(--size-text-2);
|
|
1339
|
-
line-height: var(--line-height-normal);
|
|
1340
|
-
letter-spacing: var(--letter-spacing-text-2);
|
|
1341
|
-
}
|
|
1342
|
-
.text-text-3 {
|
|
1343
|
-
font-size: var(--size-text-3);
|
|
1344
|
-
line-height: var(--line-height-normal);
|
|
1345
|
-
letter-spacing: var(--letter-spacing-text-3);
|
|
1346
|
-
}
|
|
1347
|
-
.text-text-4 {
|
|
1348
|
-
font-size: var(--size-text-4);
|
|
1349
|
-
line-height: var(--line-height-normal);
|
|
1350
|
-
letter-spacing: var(--letter-spacing-text-4);
|
|
1351
|
-
}
|
|
1352
1322
|
.text-xl {
|
|
1353
1323
|
font-size: 1.25rem;
|
|
1354
1324
|
line-height: 1.75rem;
|
|
@@ -1378,6 +1348,15 @@ video {
|
|
|
1378
1348
|
.font-semibold {
|
|
1379
1349
|
font-weight: 600;
|
|
1380
1350
|
}
|
|
1351
|
+
.leading-\[100\%\] {
|
|
1352
|
+
line-height: 100%;
|
|
1353
|
+
}
|
|
1354
|
+
.leading-\[120\%\] {
|
|
1355
|
+
line-height: 120%;
|
|
1356
|
+
}
|
|
1357
|
+
.leading-\[140\%\] {
|
|
1358
|
+
line-height: 140%;
|
|
1359
|
+
}
|
|
1381
1360
|
.leading-none {
|
|
1382
1361
|
line-height: 1;
|
|
1383
1362
|
}
|
|
@@ -1387,6 +1366,12 @@ video {
|
|
|
1387
1366
|
.tracking {
|
|
1388
1367
|
letter-spacing: var(--letter-spacing-normal);
|
|
1389
1368
|
}
|
|
1369
|
+
.tracking-\[-0\.02em\] {
|
|
1370
|
+
letter-spacing: -0.02em;
|
|
1371
|
+
}
|
|
1372
|
+
.tracking-\[-0\.04em\] {
|
|
1373
|
+
letter-spacing: -0.04em;
|
|
1374
|
+
}
|
|
1390
1375
|
.tracking-tight {
|
|
1391
1376
|
letter-spacing: -0.025em;
|
|
1392
1377
|
}
|
package/tailwind.config.js
CHANGED
|
@@ -156,71 +156,6 @@ module.exports = {
|
|
|
156
156
|
letterSpacing: {
|
|
157
157
|
DEFAULT: 'var(--letter-spacing-normal)',
|
|
158
158
|
},
|
|
159
|
-
fontSize: {
|
|
160
|
-
'text-1': [
|
|
161
|
-
'var(--size-text-1)',
|
|
162
|
-
{
|
|
163
|
-
lineHeight: 'var(--line-height-normal)',
|
|
164
|
-
letterSpacing: 'var(--letter-spacing-text-1)',
|
|
165
|
-
},
|
|
166
|
-
],
|
|
167
|
-
'text-2': [
|
|
168
|
-
'var(--size-text-2)',
|
|
169
|
-
{
|
|
170
|
-
lineHeight: 'var(--line-height-normal)',
|
|
171
|
-
letterSpacing: 'var(--letter-spacing-text-2)',
|
|
172
|
-
},
|
|
173
|
-
],
|
|
174
|
-
'text-3': [
|
|
175
|
-
'var(--size-text-3)',
|
|
176
|
-
{
|
|
177
|
-
lineHeight: 'var(--line-height-normal)',
|
|
178
|
-
letterSpacing: 'var(--letter-spacing-text-3)',
|
|
179
|
-
},
|
|
180
|
-
],
|
|
181
|
-
'text-4': [
|
|
182
|
-
'var(--size-text-4)',
|
|
183
|
-
{
|
|
184
|
-
lineHeight: 'var(--line-height-normal)',
|
|
185
|
-
letterSpacing: 'var(--letter-spacing-text-4)',
|
|
186
|
-
},
|
|
187
|
-
],
|
|
188
|
-
'heading-1': [
|
|
189
|
-
'14px',
|
|
190
|
-
{
|
|
191
|
-
lineHeight: '120%',
|
|
192
|
-
letterSpacing: 'var(--letter-spacing-heading-1)',
|
|
193
|
-
},
|
|
194
|
-
],
|
|
195
|
-
'heading-2': [
|
|
196
|
-
'20px',
|
|
197
|
-
{
|
|
198
|
-
lineHeight: '120%',
|
|
199
|
-
letterSpacing: 'var(--letter-spacing-heading-2)',
|
|
200
|
-
},
|
|
201
|
-
],
|
|
202
|
-
'heading-3': [
|
|
203
|
-
'24px',
|
|
204
|
-
{
|
|
205
|
-
lineHeight: '120%',
|
|
206
|
-
letterSpacing: 'var(--letter-spacing-heading-3)',
|
|
207
|
-
},
|
|
208
|
-
],
|
|
209
|
-
'heading-4': [
|
|
210
|
-
'32px',
|
|
211
|
-
{
|
|
212
|
-
lineHeight: '100%',
|
|
213
|
-
letterSpacing: 'var(--letter-spacing-heading-4)',
|
|
214
|
-
},
|
|
215
|
-
],
|
|
216
|
-
'heading-5': [
|
|
217
|
-
'40px',
|
|
218
|
-
{
|
|
219
|
-
lineHeight: '100%',
|
|
220
|
-
letterSpacing: 'var(--letter-spacing-heading-5)',
|
|
221
|
-
},
|
|
222
|
-
],
|
|
223
|
-
},
|
|
224
159
|
boxShadow: {
|
|
225
160
|
'btn-secondary-inner': 'inset 0 0 0 1.6px var(--info-primary-color);',
|
|
226
161
|
'badge-inner': 'inset 0 0 0 1.6px var(--brand-color-0);',
|