npm - @anker-in/headless-ui - Versions diffs - 0.0.27-alpha.84 → 0.0.27-alpha.85 - Mend

@anker-in/headless-ui 0.0.27-alpha.84 → 0.0.27-alpha.85

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.

Files changed (63) hide show

package/dist/esm/biz-components/MediaPlayerSticky/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\n// import gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst StickyBox = ({\n  children,\n  id,\n  components,\n  GSAP,\n}: {\n  children: React.ReactNode\n  id?: string\n  components?: MediaPlayerComponent[]\n  GSAP: any\n}) => {\n  const { gsap, ScrollTrigger } = GSAP\n  useEffect(() => {\n    const height = window.screen.height\n\n    gsap\n      .timeline({\n        scrollTrigger: {\n          trigger: `#${id}`,\n          start: 'top top',\n          end: `top+=${height * 1.8}px bottom`,\n          scrub: 0,\n        },\n      })\n      .to(`#${id} .sticky-cover`, {\n        opacity: 1,\n        duration: 0.3,\n      })\n      .to(\n        `#${id} .media-content`,\n        {\n          top: '100%',\n          transform: 'translate(-50%, -100%)',\n          duration: 1,\n        },\n        '<'\n      )\n  }, [])\n\n  return (\n    <div id={id} className=\"relative z-10 pb-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  id,\n  data: { title, videoTitle, btnText, img, video, theme, shape, components },\n  GSAP,\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  return (\n    <StickyBox id={id} components={components} GSAP={GSAP}>\n      <div\n        className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n          <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} GSAP={GSAP} />\n          </SubContainer>\n        </div>\n      </div>\n      <div className=\"sticky left-0 top-0 w-full\">\n        <div\n          className={cn(\n            'media-cover',\n            'relative h-screen w-full',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n          )}\n        >\n          <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n          <div\n            className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n            style={{\n              background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n            }}\n          />\n        </div>\n      </div>\n    </StickyBox>\n  )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "convertLexicalToHTML", "useMediaQuery", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "GSAP", "gsap", "ScrollTrigger", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "MediaPlayerSticky_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst StickyBox = ({\n  children,\n  id,\n  components,\n  GSAP,\n}: {\n  children: React.ReactNode\n  id?: string\n  components?: MediaPlayerComponent[]\n  GSAP?: any\n}) => {\n  // const { gsap, ScrollTrigger } = GSAP\n  useEffect(() => {\n    const height = window.screen.height\n\n    gsap\n      .timeline({\n        scrollTrigger: {\n          trigger: `#${id}`,\n          start: 'top top',\n          end: `top+=${height * 1.8}px bottom`,\n          scrub: 0,\n        },\n      })\n      .to(`#${id} .sticky-cover`, {\n        opacity: 1,\n        duration: 0.3,\n      })\n      .to(\n        `#${id} .media-content`,\n        {\n          top: '100%',\n          transform: 'translate(-50%, -100%)',\n          duration: 1,\n        },\n        '<'\n      )\n  }, [])\n\n  return (\n    <div id={id} className=\"relative z-10 pb-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  id,\n  data: { title, videoTitle, btnText, img, video, theme, shape, components },\n  GSAP,\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  return (\n    <StickyBox id={id} components={components} GSAP={GSAP}>\n      <div\n        className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n          <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} GSAP={GSAP} />\n          </SubContainer>\n        </div>\n      </div>\n      <div className=\"sticky left-0 top-0 w-full\">\n        <div\n          className={cn(\n            'media-cover',\n            'relative h-screen w-full',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n          )}\n        >\n          <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n          <div\n            className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n            style={{\n              background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n            }}\n          />\n        </div>\n      </div>\n    </StickyBox>\n  )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "GSAP", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "MediaPlayerSticky_default"]
 }

package/dist/esm/biz-components/MediaPlayerSticky/types.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import type { BrandEquityProps } from '../BrandEquity/types.js';
 import type { MemberEquityProps } from '../MemberEquity/types.js';
 export type MediaPlayerComponent = BrandEquityProps | MemberEquityProps;
 export interface MediaPlayerBaseProps extends ComponentCommonProps {
-    GSAP: any;
+    GSAP?: any;
     data: {
         shape?: Shape;
         theme?: Theme;

package/dist/esm/biz-components/MultiLayoutGraphicBlock/types.d.ts CHANGED Viewed

@@ -15,7 +15,7 @@ export type Item = {
     };
 };
 export type MultiLayoutGraphicBlockProps = {
-    GSAP: any;
+    GSAP?: any;
     data: {
         shape?: Shape;
         sectionTitle?: string;

package/dist/esm/biz-components/ShelfDisplay/index.d.ts CHANGED Viewed

@@ -50,7 +50,7 @@ export interface ShelfDisplayProps {
     theme?: 'light' | 'dark';
     className?: string;
     key?: string;
-    GSAP: any;
+    GSAP?: any;
 }
 declare const _default: {
     (props: Omit<ShelfDisplayProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {

package/dist/esm/biz-components/ShelfDisplay/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n  GSAP: any\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event, GSAP }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} GSAP={GSAP} />}\n      {isShowTab && (\n        <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n          <Tabs\n            shape={tabShape}\n            align={align}\n            value={tabId}\n            onValueChange={v => {\n              setTabId(v)\n              const findData = productsTab?.find((item: any) => item?.tab === v)\n              handleCurrentTab(findData?.data || [])\n            }}\n            className=\"mb-8\"\n          >\n            <TabsList>\n              {productsTab?.map((item: any, index: number) => {\n                return (\n                  <TabsTrigger key={index} value={item?.tab || ''}>\n                    {item?.tab}\n                  </TabsTrigger>\n                )\n              })}\n            </TabsList>\n          </Tabs>\n        </div>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 3,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n  GSAP?: any\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event, GSAP }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} GSAP={GSAP} />}\n      {isShowTab && (\n        <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n          <Tabs\n            shape={tabShape}\n            align={align}\n            value={tabId}\n            onValueChange={v => {\n              setTabId(v)\n              const findData = productsTab?.find((item: any) => item?.tab === v)\n              handleCurrentTab(findData?.data || [])\n            }}\n            className=\"mb-8\"\n          >\n            <TabsList>\n              {productsTab?.map((item: any, index: number) => {\n                return (\n                  <TabsTrigger key={index} value={item?.tab || ''}>\n                    {item?.tab}\n                  </TabsTrigger>\n                )\n              })}\n            </TabsList>\n          </Tabs>\n        </div>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 3,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
   "mappings": "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",
   "names": ["jsx", "jsxs", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "index", "ShelfDisplay", "buildData", "className", "key", "event", "GSAP", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
 }

package/dist/esm/biz-components/Slogan/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as l,jsxs as $}from"react/jsx-runtime";import s,{useRef as S}from"react";import{cn as c}from"../../helpers/utils.js";import{Heading as Y,Text as q}from"../../components/index.js";import{withStyles as B}from"../../shared/Styles.js";function J(u=[],f=3){const m=[];for(let n=0;n<u.length;n+=f)m.push(u.slice(n,n+f));return m}const R=s.forwardRef(({data:u,className:f="",GSAP:m},n)=>{const{gsap:d,ScrollTrigger:h,SplitText:G,useGSAP:M}=m,{title:F,features:o=[],featureChunkSize:k=3,theme:D}=u,[v,H]=s.useState(0),[A,w]=s.useState(!0),g=J(o,k),y=g.length,a=o.length>k,C=a?[...g,g[0]]:g,b=40;s.useEffect(()=>{if(!a)return;const t=setInterval(()=>{H(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[y,a]),s.useEffect(()=>{if(a)if(v===y){const t=setTimeout(()=>{w(!1),H(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,y,a]);const i=S(null),N=S(null),p=S(null);return M(()=>{if(!i.current)return;p.current=new G(i.current,{type:"words",wordsClass:"word"});const t=i.current?.clientHeight||100;console.log("splitTextInstance",p);const e=p.current.words;return d.set(e,{opacity:0}),h.create({trigger:i.current,start:"bottom bottom-=10%",end:`bottom+=${t*2+80}px bottom-=10%`,scrub:!0,onUpdate:r=>{const x=r.progress,E=e.length,L=1/E,I=.5;e.forEach((P,j)=>{const z=j/E*(1-I),U=L*(1+I);let T=(x-z)/U;T=Math.max(0,Math.min(T,1)),d.set(P,{opacity:T})})}}),o&&o.length>0&&h.create({trigger:N.current,start:`bottom+=${t*2}px bottom-=10%`,end:`bottom+=${t*2+100}px bottom-=10%`,onUpdate:r=>{d.set(N.current,{opacity:r.progress})}}),()=>{p.current&&p.current.revert(),h.getAll().forEach(r=>r.kill())}},[]),$("div",{ref:n,className:c("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",f),children:[l(Y,{ref:i,as:"h2",size:2,weight:"bold",align:"left",className:c("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":D!=="dark","text-[#fff]":D==="dark"}),children:F}),o&&o.length>0&&l("div",{className:c("relative h-12 w-full max-w-[500px] overflow-hidden",`tablet:h-[${b}px]`),children:l("div",{className:c(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*b}px)`},children:C.map((t,e)=>l("div",{className:c("flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${b}px]`),children:t.map((r,x)=>$(s.Fragment,{children:[x>0&&l("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),l(q,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]",html:r.title})]},x))},e))})})]})});R.displayName="Slogan";var W=B(R);export{W as default};
+"use client";import{jsx as l,jsxs as R}from"react/jsx-runtime";import s,{useRef as y}from"react";import{useGSAP as z}from"@gsap/react";import{gsap as S}from"gsap";import{SplitText as U}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as c}from"../../helpers/utils.js";import{Heading as Y,Text as q}from"../../components/index.js";import{withStyles as B}from"../../shared/Styles.js";function J(u=[],f=3){const x=[];for(let o=0;o<u.length;o+=f)x.push(u.slice(o,o+f));return x}const G=s.forwardRef(({data:u,className:f="",GSAP:x},o)=>{const{title:$,features:n=[],featureChunkSize:k=3,theme:D}=u,[d,H]=s.useState(0),[M,h]=s.useState(!0),m=J(n,k),v=m.length,a=n.length>k,A=a?[...m,m[0]]:m,w=40;s.useEffect(()=>{if(!a)return;const t=setInterval(()=>{H(e=>e+1),h(!0)},3e3);return()=>clearInterval(t)},[v,a]),s.useEffect(()=>{if(a)if(d===v){const t=setTimeout(()=>{h(!1),H(0)},500);return()=>clearTimeout(t)}else h(!0)},[d,v,a]);const i=y(null),N=y(null),p=y(null);return z(()=>{if(!i.current)return;p.current=new U(i.current,{type:"words",wordsClass:"word"});const t=i.current?.clientHeight||100;console.log("splitTextInstance",p);const e=p.current.words;return S.set(e,{opacity:0}),T.create({trigger:i.current,start:"bottom bottom-=10%",end:`bottom+=${t*2+80}px bottom-=10%`,scrub:!0,onUpdate:r=>{const g=r.progress,E=e.length,F=1/E,I=.5;e.forEach((P,C)=>{const L=C/E*(1-I),j=F*(1+I);let b=(g-L)/j;b=Math.max(0,Math.min(b,1)),S.set(P,{opacity:b})})}}),n&&n.length>0&&T.create({trigger:N.current,start:`bottom+=${t*2}px bottom-=10%`,end:`bottom+=${t*2+100}px bottom-=10%`,onUpdate:r=>{S.set(N.current,{opacity:r.progress})}}),()=>{p.current&&p.current.revert(),T.getAll().forEach(r=>r.kill())}},[]),R("div",{ref:o,className:c("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",f),children:[l(Y,{ref:i,as:"h2",size:2,weight:"bold",align:"left",className:c("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":D!=="dark","text-[#fff]":D==="dark"}),children:$}),n&&n.length>0&&l("div",{className:c("relative h-12 w-full max-w-[500px] overflow-hidden",`tablet:h-[${w}px]`),children:l("div",{className:c(["flex flex-col",M?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${d*w}px)`},children:A.map((t,e)=>l("div",{className:c("flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${w}px]`),children:t.map((r,g)=>R(s.Fragment,{children:[g>0&&l("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),l(q,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]",html:r.title})]},g))},e))})})]})});G.displayName="Slogan";var tt=B(G);export{tt as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Slogan/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\n// import { useGSAP } from '@gsap/react'\n// import { gsap } from 'gsap'\n// import { SplitText } from 'gsap/dist/SplitText'\n// import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '', GSAP }, ref) => {\n  const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const { title, features = [], featureChunkSize = 3, theme } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<typeof SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const height = titleRef.current?.clientHeight || 100\n\n    console.log('splitTextInstance', splitTextInstance)\n\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=10%',\n      end: `bottom+=${height * 2 + 80}px bottom-=10%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=10%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=10%`,\n        onUpdate: (self: any) => {\n          gsap.set(featuresRef.current, { opacity: self.progress })\n        },\n      })\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n          {\n            'text-[#1D1D1F]': theme !== 'dark',\n            'text-[#fff]': theme === 'dark',\n          }\n        )}\n      >\n        {title}\n      </Heading>\n      {features && features.length > 0 && (\n        <div className={cn('relative h-12 w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n                    <Text\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useRef", "cn", "Heading", "Text", "withStyles", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "GSAP", "ref", "gsap", "ScrollTrigger", "SplitText", "useGSAP", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index", "Slogan_default"]
+  "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, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '', GSAP }, ref) => {\n  // const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const { title, features = [], featureChunkSize = 3, theme } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const height = titleRef.current?.clientHeight || 100\n\n    console.log('splitTextInstance', splitTextInstance)\n\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=10%',\n      end: `bottom+=${height * 2 + 80}px bottom-=10%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=10%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=10%`,\n        onUpdate: (self: any) => {\n          gsap.set(featuresRef.current, { opacity: self.progress })\n        },\n      })\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n          {\n            'text-[#1D1D1F]': theme !== 'dark',\n            'text-[#fff]': theme === 'dark',\n          }\n        )}\n      >\n        {title}\n      </Heading>\n      {features && features.length > 0 && (\n        <div className={cn('relative h-12 w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n                    <Text\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withStyles", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "GSAP", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index", "Slogan_default"]
 }

package/dist/esm/biz-components/Slogan/types.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface Feature {
     title: string;
 }
 export interface SloganProps {
-    GSAP: any;
+    GSAP?: any;
     data: {
         /**
          * 主标题

package/dist/esm/biz-components/Tabs/types.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import type { Align, Shape, Theme } from '../../types/props.js';
 import type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js';
 import type { ShelfDisplayProps } from '../ShelfDisplay/index.js';
 export type TabsProps = {
-    GSAP: any;
+    GSAP?: any;
     data: {
         sectionTitle?: string;
         theme: Theme;

package/dist/esm/biz-components/Title/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as u}from"react/jsx-runtime";import E,{useRef as p}from"react";import{cn as M}from"../../helpers/utils.js";import{Heading as R}from"../../components/index.js";import{withStyles as P}from"../../shared/Styles.js";const m=E.forwardRef(({data:d,className:f,GSAP:g})=>{const{title:s,theme:h}=d,{gsap:l,ScrollTrigger:i,SplitText:y,useGSAP:T}=g,t=p(null),e=p(null);return T(()=>{if(!t.current)return;const b=t.current?.clientHeight||80;e.current=new y(t.current,{type:"words",wordsClass:"word"});const r=e.current.words;return l.set(r,{opacity:0}),i.create({trigger:t.current,start:"bottom bottom-=10%",end:`bottom+=${b*2+40}px bottom-=10%`,scrub:!0,onUpdate:o=>{const w=o.progress,a=r.length,x=1/a,c=.5;r.forEach((v,H)=>{const S=H/a*(1-c),k=x*(1+c);let n=(w-S)/k;n=Math.max(0,Math.min(n,1)),l.set(v,{opacity:n})})}}),()=>{e.current&&e.current.revert(),i.getAll().forEach(o=>o.kill())}},[]),s&&u("div",{className:M("tablet:mb-[32px] mb-[24px] space-y-4",f,{"aiui-dark":h==="dark"}),children:u(R,{ref:t,as:"h2",size:5,html:s})})});m.displayName="Title";var C=P(m);export{C as default};
+"use client";import{jsx as u}from"react/jsx-runtime";import S,{useRef as a}from"react";import{useGSAP as H}from"@gsap/react";import{gsap as c}from"gsap";import{SplitText as k}from"gsap/dist/SplitText";import{ScrollTrigger as m}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 p=S.forwardRef(({data:f,className:d,GSAP:R})=>{const{title:s,theme:g}=f,t=a(null),r=a(null);return H(()=>{if(!t.current)return;const h=t.current?.clientHeight||80;r.current=new k(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return c.set(e,{opacity:0}),m.create({trigger:t.current,start:"bottom bottom-=10%",end:`bottom+=${h*2+40}px bottom-=10%`,scrub:!0,onUpdate:o=>{const y=o.progress,i=e.length,T=1/i,l=.5;e.forEach((b,w)=>{const x=w/i*(1-l),v=T*(1+l);let n=(y-x)/v;n=Math.max(0,Math.min(n,1)),c.set(b,{opacity:n})})}}),()=>{r.current&&r.current.revert(),m.getAll().forEach(o=>o.kill())}},[]),s&&u("div",{className:E("tablet:mb-[32px] mb-[24px] space-y-4",d,{"aiui-dark":g==="dark"}),children:u(M,{ref:t,as:"h2",size:5,html:s})})});p.displayName="Title";var U=P(p);export{U as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Title/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef } 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, GSAP }) => {\n  const { title, theme } = data\n  const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<typeof SplitText | null>(null)\n  useGSAP(() => {\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-=10%',\n      end: `bottom+=${height * 2 + 40}px bottom-=10%`,\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=\"h2\" size={5} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
-  "mappings": "aAiDQ,cAAAA,MAAA,oBAhDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAQL,EAAM,WAAuC,CAAC,CAAE,KAAAM,EAAM,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACxF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIJ,EACnB,CAAE,KAAAK,EAAM,cAAAC,EAAe,UAAAC,EAAW,QAAAC,CAAQ,EAAIN,EAC9CO,EAAWd,EAA2B,IAAI,EAC1Ce,EAAoBf,EAAgC,IAAI,EAC9D,OAAAa,EAAQ,IAAM,CACZ,GAAI,CAACC,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIH,EAAUE,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAL,EAAK,IAAIO,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BN,EAAc,OAAO,CACnB,QAASG,EAAS,QAClB,MAAO,qBACP,IAAK,WAAWE,EAAS,EAAI,EAAE,iBAC/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,EAC1CjB,EAAK,IAAIa,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DJ,EAAc,OAAO,EAAE,QAASiB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHpB,GACEV,EAAC,OAAI,UAAWG,EAAG,uCAAwCK,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EACrG,SAAAX,EAACI,EAAA,CAAQ,IAAKY,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOyB,EAAQ1B,EAAWC,CAAK",
-  "names": ["jsx", "React", "useRef", "cn", "Heading", "withStyles", "Title", "data", "className", "GSAP", "title", "theme", "gsap", "ScrollTrigger", "SplitText", "useGSAP", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
+  "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, GSAP }) => {\n  const { title, theme } = data\n  // const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\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-=10%',\n      end: `bottom+=${height * 2 + 40}px bottom-=10%`,\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=\"h2\" size={5} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
+  "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,EAAW,KAAAC,CAAK,IAAM,CACxF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIJ,EAEnBK,EAAWd,EAA2B,IAAI,EAC1Ce,EAAoBf,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CACZ,GAAI,CAACa,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIZ,EAAUW,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAb,EAAK,IAAIe,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9Bb,EAAc,OAAO,CACnB,QAASU,EAAS,QAClB,MAAO,qBACP,IAAK,WAAWE,EAAS,EAAI,EAAE,iBAC/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,EAC1CzB,EAAK,IAAIqB,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DX,EAAc,OAAO,EAAE,QAASwB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHhB,GACEd,EAAC,OAAI,UAAWO,EAAG,uCAAwCK,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EACrG,SAAAf,EAACQ,EAAA,CAAQ,IAAKQ,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOqB,EAAQtB,EAAWC,CAAK",
+  "names": ["jsx", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withStyles", "Title", "data", "className", "GSAP", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
 }

package/dist/esm/biz-components/Title/types.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface Feature {
     title: string;
 }
 export interface TitleProps {
-    GSAP: any;
+    GSAP?: any;
     data: {
         /**
          * 主标题

package/dist/esm/stories/accordionCards.stories.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@ declare const meta: {
             itemShape?: "round" | "square";
             primaryButton?: string;
         };
-        GSAP: any;
+        GSAP?: any;
     }) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;

package/dist/esm/stories/graphic.stories.d.ts CHANGED Viewed

@@ -33,7 +33,7 @@ declare const meta: {
         } & Record<string, any>;
         event?: any;
         condition?: any;
-        GSAP: any;
+        GSAP?: any;
         style?: string | undefined;
         uid?: string | undefined;
         disabled?: boolean | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.27-alpha.84",
+  "version": "0.0.27-alpha.85",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",