@anker-in/headless-ui 0.0.27-alpha.55 → 0.0.27-alpha.57
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/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var g=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(t,e)=>{for(var l in e)a(t,l,{get:e[l],enumerable:!0})},d=(t,e,l,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!y.call(t,r)&&r!==l&&a(t,r,{get:()=>e[r],enumerable:!(m=v(e,r))||m.enumerable});return t};var x=(t,e,l)=>(l=t!=null?g(k(t)):{},d(e||!t||!t.__esModule?a(l,"default",{value:t,enumerable:!0}):l,t)),P=t=>d(a({},"__esModule",{value:!0}),t);var G={};b(G,{default:()=>w});module.exports=P(G);var o=require("react/jsx-runtime"),n=x(require("react")),c=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),s=require("../../components/index.js"),i=require("../../components/index.js"),h=x(require("../Title/index.js"));const u=n.default.forwardRef(({data:t,shape:e,className:l,...m},r)=>(0,o.jsxs)("div",{children:[t?.title&&(0,o.jsx)(h.default,{data:{title:t?.title}}),(0,o.jsx)(s.Carousel,{ref:r,opts:{align:"start"},className:l,children:(0,o.jsx)(n.default.Fragment,{children:(0,o.jsx)(s.CarouselContent,{children:t?.items?.map((p,C)=>(0,o.jsx)(s.CarouselItem,{className:"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]",children:(0,o.jsxs)("div",{className:(0,c.cn)("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":e==="round"}),children:[(0,o.jsx)(i.Picture,{className:"h-full
|
|
1
|
+
"use strict";"use client";var g=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(t,e)=>{for(var l in e)a(t,l,{get:e[l],enumerable:!0})},d=(t,e,l,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!y.call(t,r)&&r!==l&&a(t,r,{get:()=>e[r],enumerable:!(m=v(e,r))||m.enumerable});return t};var x=(t,e,l)=>(l=t!=null?g(k(t)):{},d(e||!t||!t.__esModule?a(l,"default",{value:t,enumerable:!0}):l,t)),P=t=>d(a({},"__esModule",{value:!0}),t);var G={};b(G,{default:()=>w});module.exports=P(G);var o=require("react/jsx-runtime"),n=x(require("react")),c=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),s=require("../../components/index.js"),i=require("../../components/index.js"),h=x(require("../Title/index.js"));const u=n.default.forwardRef(({data:t,shape:e,className:l,...m},r)=>(0,o.jsxs)("div",{children:[t?.title&&(0,o.jsx)(h.default,{data:{title:t?.title}}),(0,o.jsx)(s.Carousel,{ref:r,opts:{align:"start"},className:l,children:(0,o.jsx)(n.default.Fragment,{children:(0,o.jsx)(s.CarouselContent,{children:t?.items?.map((p,C)=>(0,o.jsx)(s.CarouselItem,{className:"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]",children:(0,o.jsxs)("div",{className:(0,c.cn)("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":e==="round"}),children:[(0,o.jsx)(i.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-105 transition-all duration-300",source:p?.imgUrl?.url}),(0,o.jsx)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:(0,o.jsx)(i.Text,{html:p?.title,style:{color:p?.textColor},className:"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium"})})]})},C+p?.title))})},".0")})]}));u.displayName="Graphic";var w=(0,f.withStyles)(u);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: {\n imgUrl: Img\n title: string\n textColor?: string\n }[]\n }\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, ...props }, ref) => {\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={className}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {data?.items?.map((item, index) => (\n <CarouselItem\n key={index + item?.title}\n className=\"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]\"\n >\n <div\n className={cn('relative h-full', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n })}\n >\n <Picture
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyBsB,IAAAI,EAAA,6BAxBtBC,EAA+B,oBAC/BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwD,qCACxDA,EAA8B,qCAC9BC,EAAkB,gCAgBlB,MAAMC,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,OAElG,QAAC,OACE,UAAAJ,GAAM,UAAS,OAAC,EAAAK,QAAA,CAAM,KAAM,CAAE,MAAOL,GAAM,KAAM,EAAG,KACrD,OAAC,YACC,IAAKI,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWF,EAEX,mBAAC,EAAAH,QAAM,SAAN,CACC,mBAAC,mBACE,SAAAC,GAAM,OAAO,IAAI,CAACM,EAAMC,OACvB,OAAC,gBAEC,UAAU,iGAEV,oBAAC,OACC,aAAW,MAAG,kBAAmB,CAC9B,gDAAkDN,IAAU,OAC/D,CAAC,EAED,oBAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: {\n imgUrl: Img\n title: string\n textColor?: string\n }[]\n }\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, ...props }, ref) => {\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={className}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {data?.items?.map((item, index) => (\n <CarouselItem\n key={index + item?.title}\n className=\"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]\"\n >\n <div\n className={cn('relative h-full', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n })}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-105 transition-all duration-300\"\n source={item?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n html={item?.title}\n style={{\n color: item?.textColor,\n }}\n className=\"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium\"\n />\n </div>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n </React.Fragment>\n </Carousel>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyBsB,IAAAI,EAAA,6BAxBtBC,EAA+B,oBAC/BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwD,qCACxDA,EAA8B,qCAC9BC,EAAkB,gCAgBlB,MAAMC,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,OAElG,QAAC,OACE,UAAAJ,GAAM,UAAS,OAAC,EAAAK,QAAA,CAAM,KAAM,CAAE,MAAOL,GAAM,KAAM,EAAG,KACrD,OAAC,YACC,IAAKI,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWF,EAEX,mBAAC,EAAAH,QAAM,SAAN,CACC,mBAAC,mBACE,SAAAC,GAAM,OAAO,IAAI,CAACM,EAAMC,OACvB,OAAC,gBAEC,UAAU,iGAEV,oBAAC,OACC,aAAW,MAAG,kBAAmB,CAC9B,gDAAkDN,IAAU,OAC/D,CAAC,EAED,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQK,GAAM,QAAQ,IACxB,KACA,OAAC,OAAI,UAAU,8DACb,mBAAC,QACC,KAAMA,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAtBKC,EAAQD,GAAM,KAuBrB,CACD,EACH,GA7BkB,IA8BpB,EACF,GACF,CAEH,EAEDR,EAAQ,YAAc,UAEtB,IAAOR,KAAQ,cAAWQ,CAAO",
|
|
6
6
|
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "Graphic", "React", "data", "shape", "className", "props", "ref", "Title", "item", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var A=Object.create;var l=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var C=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},h=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of N(r))!z.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(s=H(r,o))||s.enumerable});return t};var D=(t,r,e)=>(e=t!=null?A(k(t)):{},h(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),G=t=>h(l({},"__esModule",{value:!0}),t);var L={};C(L,{default:()=>I});module.exports=G(L);var f=require("react/jsx-runtime"),i=D(require("react")),T=require("@gsap/react"),n=require("gsap"),u=require("gsap/dist/SplitText"),p=require("gsap/dist/ScrollTrigger"),y=require("../../helpers/utils.js"),v=require("../../components/index.js"),x=require("../../shared/Styles.js");n.gsap.registerPlugin(u.SplitText,p.ScrollTrigger);const w=i.default.forwardRef(({data:t,className:r})=>{const{title:e}=t,s=(0,i.useRef)(null),o=(0,i.useRef)(null);return(0,T.useGSAP)(()=>{if(!s.current)return;o.current=new u.SplitText(s.current,{type:"words",wordsClass:"word"});const c=o.current.words;return n.gsap.set(c,{opacity:0}),p.ScrollTrigger.create({trigger:s.current,start:"top 80%",end:"top 50%",scrub:!0,onUpdate:a=>{const S=a.progress,d=c.length,b=1/d,g=.5;c.forEach((P,R)=>{const E=R/d*(1-g),M=b*(1+g);let m=(S-E)/M;m=Math.max(0,Math.min(m,1)),n.gsap.set(P,{opacity:m})})}}),()=>{o.current&&o.current.revert(),p.ScrollTrigger.getAll().forEach(a=>a.kill())}},[]),e&&(0,f.jsx)("div",{className:(0,y.cn)("tablet:mb-[32px] mb-[24px] space-y-4",r),children:(0,f.jsx)(v.Heading,{ref:s,as:"h2",size:5,html:e})})});w.displayName="Title";var I=(0,x.withStyles)(w);
|
|
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 from 'react'\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 } = data\n return (\n title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className)}>\n <Heading as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Title", "React", "data", "className", "title"]
|
|
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\ngsap.registerPlugin(SplitText, ScrollTrigger)\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title } = data\n const titleRef = useRef(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top 80%',\n end: 'top 50%',\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word, i) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach(t => t.kill())\n }\n }, [])\n\n return (\n title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className)}>\n <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDQ,IAAAI,EAAA,6BAnDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,OAAK,eAAe,YAAW,eAAa,EAC5C,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,CAAM,EAAIF,EACZG,KAAW,UAAO,IAAI,EACtBC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CACZ,GAAI,CAACD,EAAS,QAAS,OACvBC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAME,EAAQD,EAAkB,QAAQ,MACxC,cAAK,IAAIC,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASF,EAAS,QAClB,MAAO,UACP,IAAK,UACL,MAAO,GACP,SAAUG,GAAQ,CAChB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAMC,IAAM,CACzB,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXX,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAAQY,GAAKA,EAAE,KAAK,CAAC,CAC9C,CACF,EAAG,CAAC,CAAC,EAGHd,MACE,OAAC,OAAI,aAAW,MAAG,uCAAwCD,CAAS,EAClE,mBAAC,WAAQ,IAAKE,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMD,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOV,KAAQ,cAAWU,CAAK",
|
|
6
|
+
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "Title", "React", "data", "className", "title", "titleRef", "splitTextInstance", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import l from"react";import{cn as n}from"../../helpers/utils.js";import{withStyles as d}from"../../shared/Styles.js";import{Carousel as x,CarouselContent as u,CarouselItem as c}from"../../components/index.js";import{Picture as f,Text as h}from"../../components/index.js";import C from"../Title/index.js";const r=l.forwardRef(({data:o,shape:p,className:a,...g},i)=>s("div",{children:[o?.title&&t(C,{data:{title:o?.title}}),t(x,{ref:i,opts:{align:"start"},className:a,children:t(l.Fragment,{children:t(u,{children:o?.items?.map((e,m)=>t(c,{className:"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]",children:s("div",{className:n("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":p==="round"}),children:[t(f,{className:"h-full
|
|
1
|
+
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import l from"react";import{cn as n}from"../../helpers/utils.js";import{withStyles as d}from"../../shared/Styles.js";import{Carousel as x,CarouselContent as u,CarouselItem as c}from"../../components/index.js";import{Picture as f,Text as h}from"../../components/index.js";import C from"../Title/index.js";const r=l.forwardRef(({data:o,shape:p,className:a,...g},i)=>s("div",{children:[o?.title&&t(C,{data:{title:o?.title}}),t(x,{ref:i,opts:{align:"start"},className:a,children:t(l.Fragment,{children:t(u,{children:o?.items?.map((e,m)=>t(c,{className:"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]",children:s("div",{className:n("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":p==="round"}),children:[t(f,{className:"h-full",imgClassName:"h-full object-cover hover:scale-105 transition-all duration-300",source:e?.imgUrl?.url}),t("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:t(h,{html:e?.title,style:{color:e?.textColor},className:"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium"})})]})},m+e?.title))})},".0")})]}));r.displayName="Graphic";var G=d(r);export{G as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: {\n imgUrl: Img\n title: string\n textColor?: string\n }[]\n }\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, ...props }, ref) => {\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={className}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {data?.items?.map((item, index) => (\n <CarouselItem\n key={index + item?.title}\n className=\"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]\"\n >\n <div\n className={cn('relative h-full', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n })}\n >\n <Picture
|
|
5
|
-
"mappings": "aAyBsB,cAAAA,EAeN,QAAAC,MAfM,oBAxBtB,OAAOC,MAAwB,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAgBlB,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,KAAAU,EAAM,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAElGf,EAAC,OACE,UAAAW,GAAM,OAASZ,EAACU,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,EACrDZ,EAACK,EAAA,CACC,IAAKW,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWF,EAEX,SAAAd,EAACE,EAAM,SAAN,CACC,SAAAF,EAACM,EAAA,CACE,SAAAM,GAAM,OAAO,IAAI,CAACK,EAAMC,IACvBlB,EAACO,EAAA,CAEC,UAAU,iGAEV,SAAAN,EAAC,OACC,UAAWE,EAAG,kBAAmB,CAC9B,gDAAkDU,IAAU,OAC/D,CAAC,EAED,UAAAb,EAACQ,EAAA,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: {\n imgUrl: Img\n title: string\n textColor?: string\n }[]\n }\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, ...props }, ref) => {\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={className}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {data?.items?.map((item, index) => (\n <CarouselItem\n key={index + item?.title}\n className=\"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]\"\n >\n <div\n className={cn('relative h-full', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n })}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-105 transition-all duration-300\"\n source={item?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n html={item?.title}\n style={{\n color: item?.textColor,\n }}\n className=\"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium\"\n />\n </div>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n </React.Fragment>\n </Carousel>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "aAyBsB,cAAAA,EAeN,QAAAC,MAfM,oBAxBtB,OAAOC,MAAwB,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAgBlB,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,KAAAU,EAAM,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAElGf,EAAC,OACE,UAAAW,GAAM,OAASZ,EAACU,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,EACrDZ,EAACK,EAAA,CACC,IAAKW,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWF,EAEX,SAAAd,EAACE,EAAM,SAAN,CACC,SAAAF,EAACM,EAAA,CACE,SAAAM,GAAM,OAAO,IAAI,CAACK,EAAMC,IACvBlB,EAACO,EAAA,CAEC,UAAU,iGAEV,SAAAN,EAAC,OACC,UAAWE,EAAG,kBAAmB,CAC9B,gDAAkDU,IAAU,OAC/D,CAAC,EAED,UAAAb,EAACQ,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQS,GAAM,QAAQ,IACxB,EACAjB,EAAC,OAAI,UAAU,8DACb,SAAAA,EAACS,EAAA,CACC,KAAMQ,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAtBKC,EAAQD,GAAM,KAuBrB,CACD,EACH,GA7BkB,IA8BpB,EACF,GACF,CAEH,EAEDN,EAAQ,YAAc,UAEtB,IAAOQ,EAAQf,EAAWO,CAAO",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Picture", "Text", "Title", "Graphic", "data", "shape", "className", "props", "ref", "item", "index", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as a}from"react";import{useGSAP as b}from"@gsap/react";import{gsap as i}from"gsap";import{SplitText as m}from"gsap/dist/SplitText";import{ScrollTrigger as l}from"gsap/dist/ScrollTrigger";import{cn as P}from"../../helpers/utils.js";import{Heading as R}from"../../components/index.js";import{withStyles as E}from"../../shared/Styles.js";i.registerPlugin(m,l);const u=S.forwardRef(({data:d,className:g})=>{const{title:n}=d,t=a(null),r=a(null);return b(()=>{if(!t.current)return;r.current=new m(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return i.set(e,{opacity:0}),l.create({trigger:t.current,start:"top 80%",end:"top 50%",scrub:!0,onUpdate:o=>{const h=o.progress,p=e.length,w=1/p,c=.5;e.forEach((T,y)=>{const v=y/p*(1-c),x=w*(1+c);let s=(h-v)/x;s=Math.max(0,Math.min(s,1)),i.set(T,{opacity:s})})}}),()=>{r.current&&r.current.revert(),l.getAll().forEach(o=>o.kill())}},[]),n&&f("div",{className:P("tablet:mb-[32px] mb-[24px] space-y-4",g),children:f(R,{ref:t,as:"h2",size:5,html:n})})});u.displayName="Title";var G=E(u);export{G 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 from 'react'\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 } = data\n return (\n title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className)}>\n <Heading as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "React", "cn", "Heading", "withStyles", "Title", "data", "className", "title", "Title_default"]
|
|
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\ngsap.registerPlugin(SplitText, ScrollTrigger)\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title } = data\n const titleRef = useRef(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top 80%',\n end: 'top 50%',\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word, i) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach(t => t.kill())\n }\n }, [])\n\n return (\n title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className)}>\n <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
+
"mappings": "aAoDQ,cAAAA,MAAA,oBAnDR,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,yBAG3BL,EAAK,eAAeC,EAAWC,CAAa,EAC5C,MAAMI,EAAQT,EAAM,WAAuC,CAAC,CAAE,KAAAU,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,CAAM,EAAIF,EACZG,EAAWZ,EAAO,IAAI,EACtBa,EAAoBb,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CACZ,GAAI,CAACW,EAAS,QAAS,OACvBC,EAAkB,QAAU,IAAIV,EAAUS,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAME,EAAQD,EAAkB,QAAQ,MACxC,OAAAX,EAAK,IAAIY,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BV,EAAc,OAAO,CACnB,QAASQ,EAAS,QAClB,MAAO,UACP,IAAK,UACL,MAAO,GACP,SAAUG,GAAQ,CAChB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAMC,IAAM,CACzB,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CtB,EAAK,IAAIkB,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXX,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DT,EAAc,OAAO,EAAE,QAAQqB,GAAKA,EAAE,KAAK,CAAC,CAC9C,CACF,EAAG,CAAC,CAAC,EAGHd,GACEb,EAAC,OAAI,UAAWO,EAAG,uCAAwCK,CAAS,EAClE,SAAAZ,EAACQ,EAAA,CAAQ,IAAKM,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMD,EAAO,EACxD,CAGN,CAAC,EAEDH,EAAM,YAAc,QAEpB,IAAOkB,EAAQnB,EAAWC,CAAK",
|
|
6
|
+
"names": ["jsx", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withStyles", "Title", "data", "className", "title", "titleRef", "splitTextInstance", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
|
|
7
7
|
}
|