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

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 (35) hide show
  1. package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
  2. package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
  3. package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
  4. package/dist/cjs/biz-components/Category/SwiperCategory.js.map +1 -1
  5. package/dist/cjs/biz-components/Category/index.js +1 -1
  6. package/dist/cjs/biz-components/Category/index.js.map +2 -2
  7. package/dist/cjs/biz-components/Evaluate/index.js +1 -1
  8. package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
  9. package/dist/cjs/biz-components/Graphic/index.d.ts +7 -6
  10. package/dist/cjs/biz-components/Graphic/index.js +1 -1
  11. package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
  12. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  13. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
  14. package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -3
  15. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  16. package/dist/cjs/biz-components/Slogan/index.js +1 -1
  17. package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
  18. package/dist/esm/biz-components/AccordionCards/index.js +1 -1
  19. package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
  20. package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
  21. package/dist/esm/biz-components/Category/SwiperCategory.js.map +1 -1
  22. package/dist/esm/biz-components/Category/index.js +1 -1
  23. package/dist/esm/biz-components/Category/index.js.map +2 -2
  24. package/dist/esm/biz-components/Evaluate/index.js +1 -1
  25. package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
  26. package/dist/esm/biz-components/Graphic/index.d.ts +7 -6
  27. package/dist/esm/biz-components/Graphic/index.js +1 -1
  28. package/dist/esm/biz-components/Graphic/index.js.map +3 -3
  29. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  30. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
  31. package/dist/esm/biz-components/ShelfDisplay/index.js +3 -3
  32. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  33. package/dist/esm/biz-components/Slogan/index.js +1 -1
  34. package/dist/esm/biz-components/Slogan/index.js.map +2 -2
  35. package/package.json +1 -1
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
4
- "sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({ item, shape = 'square' }: { item: Item } & { shape?: Shape }) => {\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n `item-wrapper group relative w-full overflow-hidden`,\n {\n 'rounded-box': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n },\n 'text-info-primary'\n )}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 overflow-hidden\"\n imgClassName=\"transition-all duration-300 group-hover:scale-105\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text className=\"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && (\n <Button className={lgButtonSize} variant=\"secondary\" asChild>\n <a href={secondaryButton.link}>{secondaryButton.text}</a>\n </Button>\n )}\n {primaryButton && (\n <Button className={lgButtonSize} variant=\"primary\" asChild>\n <a href={primaryButton.link}>{primaryButton.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n const { GSAP } = props\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" GSAP={GSAP} />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger key={index} value={tabName!}>\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <Grid className=\"w-full\">\n {tabItemsMaps[tabName].map((item, index) => (\n <GridItem key={index} span={getSpan(item.width ?? 'full')} className=\"laptop:block hidden\">\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n {\n <GridItem className=\"laptop:hidden block\" span={12}>\n <Carousel className=\"\">\n <CarouselContent className=\"flex\">\n {tabItemsMaps[tabName].map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n </GridItem>\n }\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan(item.width ?? 'full')} className=\"laptop:block hidden\">\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "Title", "cn", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "ItemBlock", "item", "shape", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "GSAP", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
4
+ "sourcesContent": ["import React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({\n item,\n shape = 'square',\n isTab = false,\n}: { item: Item } & { shape?: Shape } & { isTab?: boolean }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n `item-wrapper group relative w-full overflow-hidden`,\n {\n 'rounded-box': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !isTab,\n 'h-[400px]': isMobile && isTab,\n },\n `text-info-primary`\n )}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text className=\"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && (\n <Button className={lgButtonSize} variant=\"secondary\" asChild>\n <a href={secondaryButton.link}>{secondaryButton.text}</a>\n </Button>\n )}\n {primaryButton && (\n <Button className={lgButtonSize} variant=\"primary\" asChild>\n <a href={primaryButton.link}>{primaryButton.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n const { GSAP } = props\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" GSAP={GSAP} />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger key={index} value={tabName!}>\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <Grid className=\"w-full\">\n {tabItemsMaps[tabName].map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </GridItem>\n ))}\n {\n <GridItem className=\"laptop:hidden block\" span={12}>\n <Carousel className=\"\">\n <CarouselContent className=\"flex\">\n {tabItemsMaps[tabName].map((item, index) => (\n <CarouselItem\n key={`${item?.title || ''}${index}`}\n className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n >\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n </GridItem>\n }\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem\n key={`${item?.title || ''}${index}`}\n className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n >\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "Title", "cn", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "ItemBlock", "item", "shape", "isTab", "isMobile", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "GSAP", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
7
7
  }
@@ -1,12 +1,12 @@
1
- "use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useState as k,useEffect as F}from"react";import{cn as p}from"../../helpers/utils.js";import P from"../../components/picture.js";import{Tabs as C,TabsList as I,TabsTrigger as A}from"../../components/tabs.js";import D from"../../components/button.js";import V from"../Title/index.js";import E from"../SwiperBox/index.js";import{withStyles as M}from"../../shared/Styles.js";import{formatVariantPrice as q}from"./shelfDisplay.js";const $=({data:e,configuration:r})=>{const c=s=>r?.event?.primaryButton?.(s),m=s=>r?.event?.secondaryButton?.(s),{price:u,basePrice:b}=q({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),f=()=>{const s=e?.sku,o=e?.variants;return o?.find(l=>l?.sku===s)?.image?.url||o?.[0]?.image?.url||""};return d("div",{className:p("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]",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:p("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(P,{source:f(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((s,o)=>t("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:s},o))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),d("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:u||""}),t("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:b||""})]}),d("div",{className:p("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(D,{variant:"primary",onClick:()=>c(e),className:`
1
+ "use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useState as D,useEffect as P}from"react";import{cn as d}from"../../helpers/utils.js";import C from"../../components/picture.js";import{Tabs as I,TabsList as A,TabsTrigger as M}from"../../components/tabs.js";import w from"../../components/button.js";import V from"../Title/index.js";import E from"../SwiperBox/index.js";import{withStyles as q}from"../../shared/Styles.js";import{formatVariantPrice as $}from"./shelfDisplay.js";import{useMediaQuery as j}from"react-responsive";const z=({data:e,configuration:r})=>{const c=s=>r?.event?.primaryButton?.(s),m=s=>r?.event?.secondaryButton?.(s),{price:u,basePrice:b}=$({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),f=()=>{const s=e?.sku,o=e?.variants;return o?.find(x=>x?.sku===s)?.image?.url||o?.[0]?.image?.url||""};return p("div",{className:d("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]",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(C,{source:f(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((s,o)=>t("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:s},o))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),p("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:u||""}),t("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:b||""})]}),p("div",{className:d("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(w,{variant:"primary",onClick:()=>c(e),className:`
2
2
  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
3
3
  border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black
4
4
  ${r?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
5
5
  ${r.direction==="vertical"?"w-full":""}
6
- `,children:r?.primaryButton||""}),t(D,{variant:"secondary",onClick:()=>m(e),className:`
6
+ `,children:r?.primaryButton||""}),t(w,{variant:"secondary",onClick:()=>m(e),className:`
7
7
  laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
8
8
  border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
9
9
  ${r?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
10
10
  ${r.direction==="vertical"?"w-full":""}
11
- `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},j=({data:e,buildData:r,className:c="",key:m,event:u,GSAP:b})=>{const[f,s]=k(""),[o,y]=k([]),{productsTab:l=[],productsCard:S=[],title:h,align:w="left",isShowTab:v=!0,tabShape:B="square",...T}=e,x=a=>{const i=a?.map(n=>{const g=r?.products?.find(N=>N?.handle===n?.handle);if(g)return{sku:n.sku,...g}})?.filter(n=>n);y(i)};return F(()=>{if(v){s(l?.[0]?.tab||""),x(l?.[0]?.data||[]);return}x(S)},[]),d("div",{className:p("w-full",c),children:[h&&t(V,{data:{title:h},GSAP:b}),v&&t(C,{shape:B,align:w,value:f,onValueChange:a=>{s(a);const i=l?.find(n=>n?.tab===a);x(i?.data||[])},className:"mb-8",children:t(I,{children:l?.map((a,i)=>t(A,{value:a?.tab||"",children:a?.tab},i))})}),t(E,{className:"!overflow-visible",id:"ShelfDisplay"+m,data:{list:o,configuration:{...T,event:u}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})};var Q=M(j);export{Q as default};
11
+ `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},G=({data:e,buildData:r,className:c="",key:m,event:u,GSAP:b})=>{const[f,s]=D(""),[o,h]=D([]),x=j({query:"(max-width: 768px)"}),{productsTab:n=[],productsCard:S=[],title:v,align:B="left",isShowTab:g=!0,tabShape:N="square",...T}=e,y=a=>{const i=a?.map(l=>{const k=r?.products?.find(F=>F?.handle===l?.handle);if(k)return{sku:l.sku,...k}})?.filter(l=>l);h(i)};return P(()=>{if(g){s(n?.[0]?.tab||""),y(n?.[0]?.data||[]);return}y(S)},[]),p("div",{className:d("w-full",c),children:[v&&t(V,{data:{title:v},GSAP:b}),g&&t("div",{className:`${x?"w-full overflow-hidden":""}`,children:t(I,{shape:N,align:B,value:f,onValueChange:a=>{s(a);const i=n?.find(l=>l?.tab===a);y(i?.data||[])},className:"mb-8",children:t(A,{children:n?.map((a,i)=>t(M,{value:a?.tab||"",children:a?.tab},i))})})}),t(E,{className:"!overflow-visible",id:"ShelfDisplay"+m,data:{list:o,configuration:{...T,event:u}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})};var Y=q(G);export{Y as default};
12
12
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "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'\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 {\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 <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 )}\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"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "index", "ShelfDisplay", "buildData", "className", "key", "event", "GSAP", "tabId", "setTabId", "currentItems", "setCurrentItems", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
4
+ "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"],
5
+ "mappings": "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",
6
+ "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"]
7
7
  }
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as l,jsxs as $}from"react/jsx-runtime";import s,{useRef as S}from"react";import{cn as k}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(c=[],u=3){const f=[];for(let n=0;n<c.length;n+=u)f.push(c.slice(n,n+u));return f}const R=s.forwardRef(({data:c,className:u="",GSAP:f},n)=>{const{gsap:x,ScrollTrigger:d,SplitText:G,useGSAP:M}=f,{title:F,features:o=[],featureChunkSize:D=3,theme:H}=c,[h,N]=s.useState(0),[A,y]=s.useState(!0),m=J(o,D),v=m.length,a=o.length>D,C=a?[...m,m[0]]:m,w=40;s.useEffect(()=>{if(!a)return;const t=setInterval(()=>{N(e=>e+1),y(!0)},3e3);return()=>clearInterval(t)},[v,a]),s.useEffect(()=>{if(a)if(h===v){const t=setTimeout(()=>{y(!1),N(0)},500);return()=>clearTimeout(t)}else y(!0)},[h,v,a]);const i=S(null),b=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 x.set(e,{opacity:0}),d.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,L=1/E,I=.5;e.forEach((P,j)=>{const z=j/E*(1-I),U=L*(1+I);let T=(g-z)/U;T=Math.max(0,Math.min(T,1)),x.set(P,{opacity:T})})}}),o&&o.length>0&&d.create({trigger:b.current,start:`bottom+=${t*2}px bottom-=10%`,end:`bottom+=${t*2+100}px bottom-=10%`,onUpdate:r=>{x.set(b.current,{opacity:r.progress})}}),()=>{p.current&&p.current.revert(),d.getAll().forEach(r=>r.kill())}},[]),$("div",{ref:n,className:k("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",u),children:[l(Y,{ref:i,as:"h2",size:2,weight:"bold",align:"left",className:k("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":H!=="dark","text-[#fff]":H==="dark"}),children:F}),o&&o.length>0&&l("div",{ref:b,className:"relative w-full max-w-[500px] overflow-hidden opacity-0",style:{height:`${w}px`},children:l("div",{className:k(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${h*w}px)`},children:C.map((t,e)=>l("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${w}px`},children:t.map((r,g)=>$(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))})})]})});R.displayName="Slogan";var W=B(R);export{W as default};
1
+ "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};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
4
- "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\n ref={featuresRef}\n className=\"relative w-full max-w-[500px] overflow-hidden opacity-0\"\n style={{ height: `${groupHeight}px` }}\n >\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=\"flex w-full flex-row items-stretch gap-3 overflow-hidden\"\n style={{ height: `${groupHeight}px` }}\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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "aAmHM,cAAAA,EAoCY,QAAAC,MApCZ,oBAlHN,OAAOC,GAAS,UAAAC,MAAc,QAK9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,cAAAC,MAAkB,yBAG3B,SAASC,EAAWC,EAA6B,CAAC,EAAGC,EAAe,EAAG,CACrE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAM,OAAQG,GAAKF,EACrCC,EAAO,KAAKF,EAAM,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEtC,OAAOC,CACT,CAEA,MAAME,EAASX,EAAM,WAAwC,CAAC,CAAE,KAAAY,EAAM,UAAAC,EAAY,GAAI,KAAAC,CAAK,EAAGC,IAAQ,CACpG,KAAM,CAAE,KAAAC,EAAM,cAAAC,EAAe,UAAAC,EAAW,QAAAC,CAAQ,EAAIL,EAC9C,CAAE,MAAAM,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,EAAG,MAAAC,CAAM,EAAIX,EACxD,CAACY,EAAYC,CAAa,EAAIzB,EAAM,SAAS,CAAC,EAC9C,CAAC0B,EAAiBC,CAAkB,EAAI3B,EAAM,SAAS,EAAI,EAC3D4B,EAAiBtB,EAAWe,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,GAGpBhC,EAAM,UAAU,IAAM,CACpB,GAAI,CAAC8B,EAAc,OACnB,MAAMG,EAAQ,YAAY,IAAM,CAC9BR,EAAcf,GAAKA,EAAI,CAAC,EACxBiB,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcM,CAAK,CAClC,EAAG,CAACJ,EAAaC,CAAY,CAAC,EAG9B9B,EAAM,UAAU,IAAM,CACpB,GAAK8B,EACL,GAAIN,IAAeK,EAAa,CAC9B,MAAMK,EAAS,WAAW,IAAM,CAC9BP,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaS,CAAM,CAClC,MACEP,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYK,EAAaC,CAAY,CAAC,EAG1C,MAAMK,EAAWlC,EAA2B,IAAI,EAC1CmC,EAAcnC,EAAuB,IAAI,EACzCoC,EAAoBpC,EAAgC,IAAI,EAC9D,OAAAkB,EAAQ,IAAM,CACZ,GAAI,CAACgB,EAAS,QAAS,OACvBE,EAAkB,QAAU,IAAInB,EAAUiB,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAASH,EAAS,SAAS,cAAgB,IAEjD,QAAQ,IAAI,oBAAqBE,CAAiB,EAElD,MAAME,EAAQF,EAAkB,QAAQ,MACxC,OAAArB,EAAK,IAAIuB,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BtB,EAAc,OAAO,CACnB,QAASkB,EAAS,QAClB,MAAO,qBACP,IAAK,WAAWG,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,EAAWnC,IAAc,CACtC,MAAMoC,EAASpC,EAAIgC,GAAU,EAAIE,GAC3BG,EAAQJ,GAAY,EAAIC,GAC9B,IAAII,GAAWP,EAAWK,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1ChC,EAAK,IAAI6B,EAAM,CAAE,QAAAG,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EAEG3B,GAAYA,EAAS,OAAS,GAChCJ,EAAc,OAAO,CACnB,QAASmB,EAAY,QACrB,MAAO,WAAWE,EAAS,CAAC,iBAC5B,IAAK,WAAWA,EAAS,EAAI,GAAG,iBAChC,SAAWE,GAAc,CACvBxB,EAAK,IAAIoB,EAAY,QAAS,CAAE,QAASI,EAAK,QAAS,CAAC,CAC1D,CACF,CAAC,EAGI,IAAM,CACXH,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DpB,EAAc,OAAO,EAAE,QAASgC,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,EAGHlD,EAAC,OACC,IAAKgB,EACL,UAAWb,EACT,uMACAW,CACF,EAEA,UAAAf,EAACK,EAAA,CACC,IAAKgC,EACL,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAWjC,EACT,uGACA,CACE,iBAAkBqB,IAAU,OAC5B,cAAeA,IAAU,MAC3B,CACF,EAEC,SAAAH,EACH,EACCC,GAAYA,EAAS,OAAS,GAC7BvB,EAAC,OAAI,UAAWI,EAAG,qDAAsD,aAAa8B,CAAW,KAAK,EACpG,SAAAlC,EAAC,OACC,UAAWI,EAAG,CACZ,gBACAwB,EAAkB,mEAAqE,kBACzF,CAAC,EACD,MAAO,CACL,UAAW,eAAeF,EAAaQ,CAAW,KACpD,EAEC,SAAAD,EAAc,IAAI,CAACmB,EAAOC,IACzBrD,EAAC,OACC,UAAWI,EACT,gEACA,aAAa8B,CAAW,KAC1B,EAGC,SAAAkB,EAAM,IAAI,CAACE,EAASC,IACnBtD,EAACC,EAAM,SAAN,CACE,UAAAqD,EAAQ,GAAKvD,EAAC,OAAI,UAAU,wDAAwD,EACrFA,EAACM,EAAA,CACC,MAAM,OACN,GAAG,IACH,UAAU,kHACV,KAAMgD,EAAQ,MAChB,IAPmBC,CAQrB,CACD,GAZIF,CAaP,CACD,EACH,EACF,GAEJ,CAEJ,CAAC,EAEDxC,EAAO,YAAc,SAErB,IAAO2C,EAAQjD,EAAWM,CAAM",
6
6
  "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"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.27-alpha.80",
3
+ "version": "0.0.27-alpha.84",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",