@anker-in/headless-ui 0.0.27-alpha.12 → 0.0.27-alpha.121

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
+  "sourcesContent": ["import React, { useState, useEffect } 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, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 1024px)' })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\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 box-border w-full overflow-hidden',\n        {\n          'rounded-2xl': 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 size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n        </div>\n        <div className=\"flex gap-[16px]\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={secondaryButton.link}>\n              <Button className={lgButtonSize} variant=\"secondary\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={primaryButton.link}>\n              <Button className={lgButtonSize} variant=\"primary\">\n                {primaryButton.text}\n              </Button>\n            </a>\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 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\" />}\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"],
+  "mappings": "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",
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "import_Title", "import_utils", "import_tabs", "ItemBlock", "item", "shape", "isTab", "isMobile", "setIsMobile", "mediaQuery", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "Title"]
+}

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MultiLayoutGraphicBlock.js';
+export type { MultiLayoutGraphicBlockProps } from './types.js';

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/index.js

@@ -0,0 +1,2 @@
+"use strict";var s=Object.create;var e=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,i=Object.prototype.hasOwnProperty;var m=(o,t)=>{for(var p in t)e(o,p,{get:t[p],enumerable:!0})},f=(o,t,p,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of y(t))!i.call(o,r)&&r!==p&&e(o,r,{get:()=>t[r],enumerable:!(a=u(t,r))||a.enumerable});return o};var x=(o,t,p)=>(p=o!=null?s(c(o)):{},f(t||!o||!o.__esModule?e(p,"default",{value:o,enumerable:!0}):p,o)),d=o=>f(e({},"__esModule",{value:!0}),o);var h={};m(h,{default:()=>l.default});module.exports=d(h);var l=x(require("./MultiLayoutGraphicBlock.js"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/index.tsx"],
+  "sourcesContent": ["export { default } from './MultiLayoutGraphicBlock.js'\nexport type { MultiLayoutGraphicBlockProps } from './types.js'\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "__toCommonJS", "import_MultiLayoutGraphicBlock"]
+}

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts

@@ -0,0 +1,30 @@
+import type { Media, Shape, Theme } from '../../types/props';
+export type Item = {
+    theme?: Theme;
+    title: string;
+    description: string;
+    imageUrl: Media;
+    tabName?: string;
+    primaryButton: {
+        text: string;
+        link: string;
+    };
+    secondaryButton: {
+        text: string;
+        link: string;
+    };
+};
+export type MultiLayoutGraphicBlockProps = {
+    data: {
+        shape?: Shape;
+        sectionTitle?: string;
+        groupByTab?: boolean;
+        items: ({
+            width?: 'full' | 'half' | 'one-third';
+        } & Item)[];
+        carousel?: {
+            items: Item[];
+        };
+    };
+    className?: string;
+};

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js

@@ -0,0 +1,2 @@
+"use strict";var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var m=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of o(t))!p.call(e,i)&&i!==a&&s(e,i,{get:()=>t[i],enumerable:!(r=n(t,i))||r.enumerable});return e};var l=e=>m(s({},"__esModule",{value:!0}),e);var g={};module.exports=l(g);
+//# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/types.tsx"],
+  "sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  tabName?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n}\n\nexport type MultiLayoutGraphicBlockProps = {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    groupByTab?: boolean\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel?: {\n      items: Item[]\n    }\n  }\n  className?: string\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dist/cjs/biz-components/SectionHeading/SectionHeading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SectionHeadingProps } from './types.js';
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default SectionHeading;

package/dist/cjs/biz-components/SectionHeading/SectionHeading.js

@@ -0,0 +1,2 @@
+"use strict";var f=Object.create;var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},a=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of l(t))!H.call(e,r)&&r!==o&&n(e,r,{get:()=>t[r],enumerable:!(i=d(t,r))||i.enumerable});return e};var h=(e,t,o)=>(o=e!=null?f(g(e)):{},a(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),y=e=>a(n({},"__esModule",{value:!0}),e);var R={};S(R,{default:()=>P});module.exports=y(R);var p=require("react/jsx-runtime"),m=h(require("react")),s=require("../../helpers/utils.js"),c=require("../../components/index.js");const N=m.default.forwardRef((e,t)=>{const{title:o,className:i,...r}=e;return(0,p.jsx)(c.Heading,{ref:t,className:(0,s.cn)("section-heading",i),html:o,...r})});var P=N;
+//# sourceMappingURL=SectionHeading.js.map

package/dist/cjs/biz-components/SectionHeading/SectionHeading.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SectionHeading/SectionHeading.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { SectionHeadingProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\n\nconst SectionHeading = React.forwardRef<HTMLDivElement, SectionHeadingProps>((props, ref) => {\n  const { title, className, ...rest } = props\n\n  return <Heading ref={ref} className={cn('section-heading', className)} html={title} {...rest} />\n})\n\nexport default SectionHeading\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAQS,IAAAI,EAAA,6BARTC,EAAkB,oBAElBC,EAAmB,kCACnBC,EAAwB,qCAExB,MAAMC,EAAiB,EAAAC,QAAM,WAAgD,CAACC,EAAOC,IAAQ,CAC3F,KAAM,CAAE,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAK,EAAIJ,EAEtC,SAAO,OAAC,WAAQ,IAAKC,EAAK,aAAW,MAAG,kBAAmBE,CAAS,EAAG,KAAMD,EAAQ,GAAGE,EAAM,CAChG,CAAC,EAED,IAAOZ,EAAQM",
+  "names": ["SectionHeading_exports", "__export", "SectionHeading_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "SectionHeading", "React", "props", "ref", "title", "className", "rest"]
+}

package/dist/cjs/biz-components/SectionHeading/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/SectionHeading/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/cjs/biz-components/SectionHeading/types.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SectionHeadingProps {
+    title: string;
+    className?: string;
+    children: React.ReactNode;
+}

package/dist/cjs/biz-components/SectionHeading/types.js

@@ -0,0 +1,2 @@
+"use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var d=(t,e,c,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of o(e))!s.call(t,i)&&i!==c&&a(t,i,{get:()=>e[i],enumerable:!(r=n(e,i))||r.enumerable});return t};var g=t=>d(a({},"__esModule",{value:!0}),t);var l={};module.exports=g(l);var p=require("react");
+//# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/SectionHeading/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SectionHeading/types.ts"],
+  "sourcesContent": ["import React from 'react'\nexport interface SectionHeadingProps {\n  title: string\n  className?: string\n  children: React.ReactNode\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAA,IAAAE,EAAkB",
+  "names": ["types_exports", "__toCommonJS", "import_react"]
+}

package/dist/cjs/biz-components/Shelf/Shelf.d.ts

@@ -1,8 +1,6 @@
 import type { ShelfProps } from './types.js';
-declare const _default: {
-    (props: Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/ShelfDisplay/index.d.ts

@@ -1,38 +1,58 @@
 import React from 'react';
 export interface ShelfDisplayItem {
+    id?: string;
     /** 产品图片*/
-    img: string;
+    img?: {
+        url: string;
+    };
+    handle?: string;
+    sku?: string;
     /** 折扣后价格*/
-    price: string;
-    title: string;
+    price?: string;
+    title?: string;
     /** 折扣前价格*/
-    basePrice: string;
-    subTitle: string;
+    basePrice?: string;
+    subTitle?: string;
     /** 标签*/
-    tagItems: string[];
+    tagItems?: string[];
+    tab?: string;
+    data?: ShelfDisplayItem[];
 }
+type EventType = {
+    primaryButton?: (v: any, index: number) => void;
+    secondaryButton?: (v: any, index: number) => void;
+};
 export interface ShelfDisplayProps {
-    products: ShelfDisplayItem[];
-    /** 卡片形状 */
-    itemShape?: 'round' | 'square';
-    className?: string;
-    /** 主题色*/
-    theme?: 'light' | 'dark';
-    /** 按钮形状 */
-    shape?: 'round' | 'square';
-    /** 主按钮配置 */
-    primaryButton?: string;
-    /** 副按钮配置 */
-    secondaryButton?: string;
-    /** 按钮事件*/
-    event?: {
-        primaryButton?: {
-            onClick: (v: any) => void;
-        };
-        secondaryButton?: {
-            onClick: (v: any) => void;
-        };
+    data: {
+        title?: string;
+        isShowTab?: boolean;
+        direction?: 'horizontal' | 'vertical';
+        align?: 'left' | 'center' | 'right';
+        productsTab?: any;
+        productsCard?: any;
+        /** 卡片形状 */
+        itemShape?: 'round' | 'square';
+        /** 按钮形状 */
+        shape?: 'round' | 'square';
+        /** 标签页形状*/
+        tabShape?: 'rounded' | 'square';
+        /** 主按钮配置 */
+        primaryButton?: string;
+        /** 副按钮配置 */
+        secondaryButton?: string;
+        theme?: 'light' | 'dark';
+    };
+    buildData?: {
+        categories: any[];
+        products: any[];
     };
+    /** 按钮事件*/
+    event?: EventType;
+    className?: string;
+    key?: string;
 }
-declare const ShelfDisplay: React.FC<ShelfDisplayProps>;
-export default ShelfDisplay;
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ShelfDisplayProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/dist/cjs/biz-components/ShelfDisplay/index.js

@@ -1,10 +1,8 @@
-"use strict";var y=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(t,o)=>{for(var a in o)d(t,a,{get:o[a],enumerable:!0})},x=(t,o,a,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of D(o))!w.call(t,r)&&r!==a&&d(t,r,{get:()=>o[r],enumerable:!(l=h(o,r))||l.enumerable});return t};var m=(t,o,a)=>(a=t!=null?y(N(t)):{},x(o||!t||!t.__esModule?d(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>x(d({},"__esModule",{value:!0}),t);var I={};B(I,{default:()=>S});module.exports=F(I);var e=require("react/jsx-runtime"),E=require("react"),p=require("../../helpers/utils.js"),c=m(require("../../components/picture.js")),i=m(require("../../components/button.js"));const C=({className:t="",shape:o="square",itemShape:a="square",products:l=[],primaryButton:r,secondaryButton:u,event:n})=>{const f=s=>{n?.primaryButton?.onClick?.(s)},k=s=>{n?.secondaryButton?.onClick(s)};return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:(0,p.cn)("w-full",t),children:(0,e.jsx)("div",{className:(0,p.cn)("flex overflow-hidden"),children:(0,e.jsx)("div",{className:(0,p.cn)("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:l?.map((s,b)=>(0,e.jsxs)("div",{className:(0,p.cn)("bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px]","laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6",a==="round"?"rounded-2xl":"rounded-none"),children:[(0,e.jsx)("div",{className:(0,p.cn)("h-[137px] overflow-hidden relative inline-block mb-2","desktop:mb-3 desktop:h-[195px]"),children:(0,e.jsx)(c.default,{source:s?.img||"",className:"h-full [&_img]:w-auto object-cover flex justify-center"})}),(0,e.jsx)("div",{className:"mb-1 flex gap-1 flex-wrap desktop:mb-2",children:s?.tagItems?.map((v,g)=>(0,e.jsx)("div",{className:"border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold rounded-3xl text-[#00BEFA] desktop:text-base",children:v},g))}),(0,e.jsx)("p",{className:"flex-1 font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] desktop:text-2xl",children:s?.title||""}),(0,e.jsx)("h3",{className:"mt-1 mb-5 text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] desktop:mt-2 desktop:mb-6 desktop:text-lg",children:s?.subTitle||""}),(0,e.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,e.jsx)("div",{className:"font-bold text-xl text-[#1D1D1F] desktop:text-2xl",children:s?.price||""}),(0,e.jsx)("div",{className:"ml-1 font-bold text-xl text-[#86868C] desktop:text-2xl",children:s?.basePrice||""})]}),(0,e.jsxs)("div",{className:"flex items-center gap-3",children:[(0,e.jsx)(i.default,{variant:"primary",onClick:()=>f(s),className:`
-                        flex-1 bg-transparent border-[#1D1D1F] border box-border text-[#1D1D1F] text-xs laptop:text-sm desktop:text-base
-                        px-4 laptop:px-6 desktop:px-7 hover:bg-transparent hover:text-black py-2 laptop:py-2.5 desktop:py-3 tracking-[-0.04em]
-                        ${o==="round"?"rounded-[20px] desktop:rounded-3xl":""}
-                      `,children:r||""}),(0,e.jsx)(i.default,{variant:"secondary",onClick:()=>k(s),className:`
-                        flex-1 bg-[#1D1D1F] border-[#1D1D1F] border text-white box-border text-xs laptop:text-sm desktop:text-base
-                        px-4 laptop:px-6 desktop:px-7 py-2 laptop:py-2.5 desktop:py-3 tracking-[-0.04em]
-                        ${o==="round"?"rounded-[20px] desktop:rounded-3xl":""}
-                      `,children:u||""})]})]},b))})})})})};var S=C;
+"use strict";"use client";var z=Object.create;var x=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var Q=(e,t)=>{for(var a in t)x(e,a,{get:t[a],enumerable:!0})},N=(e,t,a,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of U(t))!H.call(e,n)&&n!==a&&x(e,n,{get:()=>t[n],enumerable:!(d=R(t,n))||d.enumerable});return e};var u=(e,t,a)=>(a=e!=null?z(j(e)):{},N(t||!e||!e.__esModule?x(a,"default",{value:e,enumerable:!0}):a,e)),_=e=>N(x({},"__esModule",{value:!0}),e);var K={};Q(K,{default:()=>J});module.exports=_(K);var r=require("react/jsx-runtime"),o=u(require("react")),f=require("../../helpers/utils.js"),D=u(require("../../components/picture.js")),m=require("../../components/tabs.js"),w=u(require("../../components/button.js")),P=u(require("../Title/index.js")),I=u(require("../SwiperBox/index.js")),C=require("../../shared/Styles.js"),M=require("./shelfDisplay.js"),V=require("react-responsive");const F=({data:e,configuration:t})=>{const a=(s,i)=>t?.event?.primaryButton?.(s,i+1),d=(s,i)=>t?.event?.secondaryButton?.(s,i+1),{price:n,basePrice:y}=(0,M.formatVariantPrice)({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),h=()=>{const s=e?.sku,i=e?.variants;return i?.find(v=>v?.sku===s)?.image?.url||i?.[0]?.image?.url||""};return(0,r.jsxs)("div",{className:(0,f.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",t?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:(0,f.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,r.jsx)(D.default,{source:h(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((s,i)=>(0,r.jsx)("div",{className:"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold",children:s},i))}),(0,r.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold",children:e?.title||""}),(0,r.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),(0,r.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:n||""}),(0,r.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:y||""})]}),(0,r.jsxs)("div",{className:(0,f.cn)("flex items-center gap-3",t.direction==="vertical"?"flex-col":""),children:[(0,r.jsx)(w.default,{variant:"primary",onClick:()=>a(e,t?.index),className:`
+            laptop:text-sm desktop:text-base text-xs
+            ${t.direction==="vertical"?"w-full":""}
+          `,children:t?.primaryButton||""}),(0,r.jsx)(w.default,{variant:"secondary",onClick:()=>d(e,t?.index),className:`
+            laptop:text-sm desktop:text-base text-xs
+            ${t.direction==="vertical"?"w-full":""}
+          `,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},G=o.default.forwardRef(({data:e,buildData:t,className:a="",key:d,event:n},y)=>{const[h,s]=(0,o.useState)(""),[i,k]=(0,o.useState)([]),v=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),{productsTab:b=[],productsCard:q=[],title:S,align:E="left",isShowTab:B=!0,tabShape:A="square",...L}=e,g=l=>{const c=l?.map(p=>{const T=t?.products?.find($=>$?.handle===p?.handle);if(T)return{sku:p.sku,...T}})?.filter(p=>p);k(c)};return(0,o.useEffect)(()=>{if(B){s(b?.[0]?.tab||""),g(b?.[0]?.data||[]);return}g(q)},[]),(0,r.jsxs)("div",{ref:y,className:(0,f.cn)("min-h-[400px] w-full",a,{"aiui-dark":e?.theme==="dark"}),children:[S&&(0,r.jsx)(P.default,{data:{title:S}}),B&&(0,r.jsx)("div",{className:`${v?"w-full overflow-hidden":""}`,children:(0,r.jsx)(m.Tabs,{shape:A,align:E,value:h,onValueChange:l=>{s(l);const c=b?.find(p=>p?.tab===l);g(c?.data||[])},className:"mb-8",children:(0,r.jsx)(m.TabsList,{children:b?.map((l,c)=>(0,r.jsx)(m.TabsTrigger,{value:l?.tab||"",children:l?.tab},c))})})}),(0,r.jsx)(I.default,{className:"!overflow-visible",id:"ShelfDisplay"+d,data:{list:i,configuration:{...L,event:n}},Slide:F,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 J=(0,C.withStyles)(G);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/ShelfDisplay/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nexport interface ShelfDisplayItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: 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}\n\nexport interface ShelfDisplayProps {\n  products: ShelfDisplayItem[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: {\n      onClick: (v: any) => void\n    },\n    secondaryButton?: {\n      onClick: (v: any) => void\n    }\n  },\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({\n  className = '',\n  shape = 'square',\n  itemShape = 'square',\n  products = [],\n  primaryButton,\n  secondaryButton,\n  event\n}) => {\n\n  const onPrimaryButton = (params: ShelfDisplayItem) => {\n    event?.primaryButton?.onClick?.(params)\n  }\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => {\n    event?.secondaryButton?.onClick(params)\n  }\n\n  return (\n    <>\n      <div className={cn('w-full', className)}>\n        <div className={cn('flex overflow-hidden')}>\n          <div className={cn('w-full flex', 'gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden')}>\n            {products?.map((item, index) => {\n              return (\n                <div\n                  key={index}\n                  className={cn(\n                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px]',\n                    'laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6',\n                    itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n                  )}\n                >\n                  <div className={cn('h-[137px] overflow-hidden relative inline-block mb-2', 'desktop:mb-3 desktop:h-[195px]')}>\n                    <Picture\n                      source={item?.img || ''}\n                      className=\"h-full [&_img]:w-auto object-cover flex justify-center\"\n                    />\n                  </div>\n                  <div className=\"mb-1 flex gap-1 flex-wrap desktop:mb-2\">\n                    {item?.tagItems?.map((tag, index) => {\n                      return (\n                        <div\n                          key={index}\n                          className=\"border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold rounded-3xl text-[#00BEFA] desktop:text-base\"\n                        >\n                          {tag}\n                        </div>\n                      )\n                    })}\n                  </div>\n                  <p className=\"flex-1 font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] desktop:text-2xl\">\n                    {item?.title || ''}\n                  </p>\n                  <h3 className=\"mt-1 mb-5 text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] desktop:mt-2 desktop:mb-6 desktop:text-lg\">\n                    {item?.subTitle || ''}\n                  </h3>\n                  <div className=\"mb-2 flex items-center\">\n                    <div className=\"font-bold text-xl text-[#1D1D1F] desktop:text-2xl\">\n                      {item?.price || ''}\n                    </div>\n                    <div className=\"ml-1 font-bold text-xl text-[#86868C] desktop:text-2xl\">\n                      {item?.basePrice || ''}\n                    </div>\n                  </div>\n                  {/* \u6309\u94AE\u7EC4 */}\n                  <div className=\"flex items-center gap-3\">\n                    <Button\n                      variant=\"primary\"\n                      onClick={() => onPrimaryButton(item)}\n                      className={`\n                        flex-1 bg-transparent border-[#1D1D1F] border box-border text-[#1D1D1F] text-xs laptop:text-sm desktop:text-base\n                        px-4 laptop:px-6 desktop:px-7 hover:bg-transparent hover:text-black py-2 laptop:py-2.5 desktop:py-3 tracking-[-0.04em]\n                        ${shape === 'round' ? 'rounded-[20px] desktop:rounded-3xl' : ''}\n                      `}\n                    >\n                      {primaryButton || ''}\n                    </Button>\n                    <Button\n                      variant=\"secondary\"\n                      onClick={() => onSecondaryButton(item)}\n                      className={`\n                        flex-1 bg-[#1D1D1F] border-[#1D1D1F] border text-white box-border text-xs laptop:text-sm desktop:text-base\n                        px-4 laptop:px-6 desktop:px-7 py-2 laptop:py-2.5 desktop:py-3 tracking-[-0.04em]\n                        ${shape === 'round' ? 'rounded-[20px] desktop:rounded-3xl' : ''}\n                      `}\n                    >\n                      {secondaryButton || ''}\n                    </Button>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default ShelfDisplay\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DI,IAAAI,EAAA,6BA5DJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAmB,yCAsCnB,MAAMC,EAA4C,CAAC,CACjD,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,UAAAC,EAAY,SACZ,SAAAC,EAAW,CAAC,EACZ,cAAAC,EACA,gBAAAC,EACA,MAAAC,CACF,IAAM,CAEJ,MAAMC,EAAmBC,GAA6B,CACpDF,GAAO,eAAe,UAAUE,CAAM,CACxC,EAEMC,EAAqBD,GAA6B,CACtDF,GAAO,iBAAiB,QAAQE,CAAM,CACxC,EAEA,SACE,mBACE,mBAAC,OAAI,aAAW,MAAG,SAAUR,CAAS,EACpC,mBAAC,OAAI,aAAW,MAAG,sBAAsB,EACvC,mBAAC,OAAI,aAAW,MAAG,cAAe,sDAAsD,EACrF,SAAAG,GAAU,IAAI,CAACO,EAAMC,OAElB,QAAC,OAEC,aAAW,MACT,6DACA,+HACAT,IAAc,QAAU,cAAgB,cAC1C,EAEA,oBAAC,OAAI,aAAW,MAAG,uDAAwD,gCAAgC,EACzG,mBAAC,EAAAU,QAAA,CACC,OAAQF,GAAM,KAAO,GACrB,UAAU,yDACZ,EACF,KACA,OAAC,OAAI,UAAU,yCACZ,SAAAA,GAAM,UAAU,IAAI,CAACG,EAAKF,OAEvB,OAAC,OAEC,UAAU,qGAET,SAAAE,GAHIF,CAIP,CAEH,EACH,KACA,OAAC,KAAE,UAAU,4FACV,SAAAD,GAAM,OAAS,GAClB,KACA,OAAC,MAAG,UAAU,4HACX,SAAAA,GAAM,UAAY,GACrB,KACA,QAAC,OAAI,UAAU,yBACb,oBAAC,OAAI,UAAU,oDACZ,SAAAA,GAAM,OAAS,GAClB,KACA,OAAC,OAAI,UAAU,yDACZ,SAAAA,GAAM,WAAa,GACtB,GACF,KAEA,QAAC,OAAI,UAAU,0BACb,oBAAC,EAAAI,QAAA,CACC,QAAQ,UACR,QAAS,IAAMP,EAAgBG,CAAI,EACnC,UAAW;AAAA;AAAA;AAAA,0BAGPT,IAAU,QAAU,qCAAuC,EAAE;AAAA,wBAGhE,SAAAG,GAAiB,GACpB,KACA,OAAC,EAAAU,QAAA,CACC,QAAQ,YACR,QAAS,IAAML,EAAkBC,CAAI,EACrC,UAAW;AAAA;AAAA;AAAA,0BAGPT,IAAU,QAAU,qCAAuC,EAAE;AAAA,wBAGhE,SAAAI,GAAmB,GACtB,GACF,IA/DKM,CAgEP,CAEH,EACH,EACF,EACF,EACF,CAEJ,EAEA,IAAOnB,EAAQO",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_button", "ShelfDisplay", "className", "shape", "itemShape", "products", "primaryButton", "secondaryButton", "event", "onPrimaryButton", "params", "onSecondaryButton", "item", "index", "Picture", "tag", "Button"]
+  "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, index: number) => void\n  secondaryButton?: (v: any, index: number) => 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    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.primaryButton?.(params, index + 1)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.secondaryButton?.(params, index + 1)\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 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\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 border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n        <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{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, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\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 ref={ref} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\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)\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabs", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "index", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "Picture", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "v", "SwiperBox"]
 }

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts

@@ -0,0 +1,23 @@
+export declare const PRICE_SYMBOL: any;
+export declare const languageTerritory: (locale: string) => string;
+export declare function formatPrice({ amount, currencyCode, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, }: {
+    amount: number;
+    currencyCode: string;
+    locale: string;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    removeTrailingZeros?: boolean;
+}): string;
+export declare function formatVariantPrice({ amount, baseAmount, currencyCode, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, }: {
+    baseAmount: number;
+    amount: number;
+    currencyCode: string;
+    locale: string;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    removeTrailingZeros?: boolean;
+}): {
+    price: string;
+    basePrice: string | undefined;
+    discount: string | null;
+};

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js

@@ -0,0 +1,2 @@
+"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var D=(r,e)=>{for(var t in e)o(r,t,{get:e[t],enumerable:!0})},F=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of $(e))!y.call(r,i)&&i!==t&&o(r,i,{get:()=>e[i],enumerable:!(n=p(e,i))||n.enumerable});return r};var v=r=>F(o({},"__esModule",{value:!0}),r);var P={};D(P,{PRICE_SYMBOL:()=>c,formatPrice:()=>f,formatVariantPrice:()=>x,languageTerritory:()=>m});module.exports=v(P);const c={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},m=r=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"fr-fr",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl"})[r]||"";function f({amount:r,currencyCode:e,locale:t,maximumFractionDigits:n,minimumFractionDigits:i,removeTrailingZeros:s=!1}){let u=new Intl.NumberFormat(m(t),{style:"currency",currency:e||"USD",minimumFractionDigits:n===0?0:i,maximumFractionDigits:n}).format(r);return["eu-de","eu-en","de","eu"].includes(t)&&(u=u?.toString()?.replace(/[\s]/g,"")),s&&(u=u.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),u}function x({amount:r,baseAmount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:s,removeTrailingZeros:a}){if(typeof Intl>"u")return{price:`${c[n]}${r}`,basePrice:`${c[n]}${e}`,discount:`${c[n]}${e-r||0}`};const u=e>r,g=new Intl.NumberFormat(m(n),{style:"percent"}),d=u?g.format((e-r)/e):null,l=f({amount:r,currencyCode:t,locale:n,removeTrailingZeros:a}),b=u?f({amount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:s,removeTrailingZeros:a}):void 0;return{price:l,basePrice:b,discount:d}}
+//# sourceMappingURL=shelfDisplay.js.map

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
+  "sourcesContent": ["/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    eu: 'en',\n    fr: 'fr-fr',\n    de: 'de-de',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount }\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,sBAAAC,IAAA,eAAAC,EAAAN,GACO,MAAME,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaG,EAAqBE,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASJ,EAAY,CAC1B,OAAAK,EACA,aAAAC,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaR,EAAkBE,CAAM,EAAG,CACtE,MAAO,WACP,SAAUE,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASD,CAAM,IAChDM,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAAST,EAAmB,CACjC,OAAAI,EACA,WAAAM,EACA,aAAAL,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGV,EAAaK,CAAM,CAAC,GAAGC,CAAM,GACvC,UAAW,GAAGN,EAAaK,CAAM,CAAC,GAAGO,CAAU,GAC/C,SAAU,GAAGZ,EAAaK,CAAM,CAAC,GAAGO,EAAaN,GAAU,CAAC,EAC9D,EAGF,MAAMO,EAAcD,EAAaN,EAC3BQ,EAAiB,IAAI,KAAK,aAAaX,EAAkBE,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKU,EAAWF,EAAcC,EAAe,QAAQF,EAAaN,GAAUM,CAAU,EAAI,KAErFI,EAAQf,EAAY,CAAE,OAAAK,EAAQ,aAAAC,EAAc,OAAAF,EAAQ,oBAAAK,CAAoB,CAAC,EACzEO,EAAYJ,EACdZ,EAAY,CACV,OAAQW,EACR,aAAAL,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAM,EAAO,UAAAC,EAAW,SAAAF,CAAS,CACtC",
+  "names": ["shelfDisplay_exports", "__export", "PRICE_SYMBOL", "formatPrice", "formatVariantPrice", "languageTerritory", "__toCommonJS", "locale", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice"]
+}

package/dist/cjs/biz-components/Slogan/index.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
 import type { SloganProps } from './types.js';
-declare const _default: {
-    (props: Omit<SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/Slogan/index.js

@@ -1,2 +1,2 @@
-"use strict";var g=Object.create;var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},n=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of y(e))!v.call(t,a)&&a!==l&&s(t,a,{get:()=>e[a],enumerable:!(o=c(e,a))||o.enumerable});return t};var k=(t,e,l)=>(l=t!=null?g(w(t)):{},n(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),N=t=>n(s({},"__esModule",{value:!0}),t);var h={};D(h,{default:()=>b});module.exports=N(h);var p=require("react/jsx-runtime"),i=k(require("react")),d=require("../../helpers/utils.js"),x=require("../../components/index.js"),f=require("../../shared/Styles.js");const r=i.default.forwardRef(({title:t,features:e,className:l},o)=>(0,p.jsxs)("div",{ref:o,className:(0,d.cn)("flex flex-col items-start laptop:flex-row laptop:items-end justify-center laptop:justify-between text-center w-full","px-4 tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32","gap-8 py-8 tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20",l),children:[(0,p.jsx)(x.Heading,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title text-[#1D1D1F] !leading-none text-[40px] laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px]",children:t}),e&&e.length>0&&(0,p.jsx)("div",{className:"flex flex-row w-full gap-3 max-w-[423px] items-center",children:e.slice(0,3).map((a,m)=>(0,p.jsxs)(i.default.Fragment,{children:[m>0&&(0,p.jsx)("div",{className:"self-stretch w-px bg-[#D9D9D9]"}),(0,p.jsx)("div",{className:"flex-1",children:(0,p.jsx)(x.Text,{align:"left",className:"slogan-feature-text font-medium line-clamp-3 laptop:line-clamp-2 text-[#1D1D1F] text-[12px] leading-[1.4] tablet:text-[13px] laptop:text-[14px]",html:a})})]},m))})]}));r.displayName="Slogan";var b=(0,f.withStyles)(r);
+"use strict";"use client";var Y=Object.create;var v=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var r in e)v(t,r,{get:e[r],enumerable:!0})},G=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of B(e))!K.call(t,o)&&o!==r&&v(t,o,{get:()=>e[o],enumerable:!(l=q(e,o))||l.enumerable});return t};var Q=(t,e,r)=>(r=t!=null?Y(J(t)):{},G(e||!t||!t.__esModule?v(r,"default",{value:t,enumerable:!0}):r,t)),V=t=>G(v({},"__esModule",{value:!0}),t);var Z={};O(Z,{default:()=>X});module.exports=V(Z);var s=require("react/jsx-runtime"),n=Q(require("react")),P=require("@gsap/react"),f=require("gsap"),k=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),c=require("../../helpers/utils.js"),w=require("../../components/index.js"),z=require("../../shared/Styles.js");function W(t=[],e=3){const r=[];for(let l=0;l<t.length;l+=e)r.push(t.slice(l,l+e));return r}const M=n.default.forwardRef(({data:t,className:e=""},r)=>{const{title:l,features:o=[],featureChunkSize:N=3,theme:_}=t,[b,H]=n.default.useState(0),[A,y]=n.default.useState(!0),d=W(o,N),S=d.length,u=o.length>N,C=u?[...d,d[0]]:d,T=40;n.default.useEffect(()=>{if(!u)return;const a=setInterval(()=>{H(i=>i+1),y(!0)},3e3);return()=>clearInterval(a)},[S,u]),n.default.useEffect(()=>{if(u)if(b===S){const a=setTimeout(()=>{y(!1),H(0)},500);return()=>clearTimeout(a)}else y(!0)},[b,S,u]);const m=(0,n.useRef)(null),I=(0,n.useRef)(null),x=(0,n.useRef)(null);return(0,P.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,k.SplitText),!m.current)return;x.current=new k.SplitText(m.current,{type:"words",wordsClass:"word"});const a=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=6%",end:`bottom+=${a*2+80}px bottom-=6%`,scrub:!0,onUpdate:p=>{const h=p.progress,R=i.length,L=1/R,$=.5;i.forEach((j,D)=>{const F=D/R*(1-$),U=L*(1+$);let E=(h-F)/U;E=Math.max(0,Math.min(E,1)),f.gsap.set(j,{opacity:E})})}}),o&&o.length>0&&g.ScrollTrigger.create({trigger:I.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:p=>{f.gsap.set(I.current,{opacity:p.progress})}}),()=>{x.current&&x.current.revert(),g.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),(0,s.jsxs)("div",{ref:r,className:(0,c.cn)("slogan-container 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",e),children:[(0,s.jsx)(w.Heading,{ref:m,as:"h2",size:2,weight:"bold",align:"left",className:(0,c.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:l}),o&&o.length>0&&(0,s.jsx)("div",{className:(0,c.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${T}px]`),children:(0,s.jsx)("div",{className:(0,c.cn)(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${b*T}px)`},children:C.map((a,i)=>(0,s.jsx)("div",{className:(0,c.cn)("flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${T}px]`),children:a.map((p,h)=>(0,s.jsxs)(n.default.Fragment,{children:[h>0&&(0,s.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,s.jsx)(w.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:p.title})]},h))},i))})})]})});M.displayName="Slogan";var X=(0,z.withStyles)(M);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Slogan/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["import React from 'react'\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\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(\n  ({ title, features, className }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col items-start laptop:flex-row laptop:items-end justify-center laptop:justify-between text-center w-full',\n          'px-4 tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32',\n          'gap-8 py-8 tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20',\n          className\n        )}\n      >\n        <Heading\n          as=\"h2\"\n          size={2}\n          weight={\"bold\"}\n          align={\"left\"}\n          className='slogan-title text-[#1D1D1F] !leading-none text-[40px] laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px]'\n        >\n          {title}\n        </Heading>\n        {features && features.length > 0 && (\n          <div className=\"flex flex-row w-full gap-3 max-w-[423px] items-center\">\n            {features.slice(0, 3).map((feature, index) => (\n              <React.Fragment key={index}>\n                {index > 0 && (\n                  <div className=\"self-stretch w-px bg-[#D9D9D9]\" />\n                )}\n                <div className=\"flex-1\">\n                  <Text \n                    align=\"left\" \n                    className=\"slogan-feature-text font-medium line-clamp-3 laptop:line-clamp-2 text-[#1D1D1F] text-[12px] leading-[1.4] tablet:text-[13px] laptop:text-[14px]\" \n                    html={feature}\n                  />\n                </div>\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkBQ,IAAAI,EAAA,6BAlBRC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WACnB,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,UAAAC,CAAU,EAAGC,OAE7B,QAAC,OACC,IAAKA,EACL,aAAW,MACT,sHACA,8DACA,sEACAD,CACF,EAEA,oBAAC,WACC,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,UAAU,sHAET,SAAAF,EACH,EACCC,GAAYA,EAAS,OAAS,MAC7B,OAAC,OAAI,UAAU,wDACZ,SAAAA,EAAS,MAAM,EAAG,CAAC,EAAE,IAAI,CAACG,EAASC,OAClC,QAAC,EAAAN,QAAM,SAAN,CACE,UAAAM,EAAQ,MACP,OAAC,OAAI,UAAU,iCAAiC,KAElD,OAAC,OAAI,UAAU,SACb,mBAAC,QACC,MAAM,OACN,UAAU,kJACV,KAAMD,EACR,EACF,IAVmBC,CAWrB,CACD,EACH,GAEJ,CAGN,EAEAP,EAAO,YAAc,SAErB,IAAOP,KAAQ,cAAWO,CAAM",
-  "names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Slogan", "React", "title", "features", "className", "ref", "feature", "index"]
+  "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 = '' }, ref) => {\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    gsap.registerPlugin(ScrollTrigger, SplitText)\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    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=6%',\n      end: `bottom+=${height * 2 + 80}px bottom-=6%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=6%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=6%`,\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        'slogan-container 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        html={title}\n      />\n      {features && features.length > 0 && (\n        <div className={cn('relative 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 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-[#E4E5E6]\" />}\n                    <Text\n                      size={3}\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\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": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "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"]
 }

package/dist/cjs/biz-components/Slogan/types.d.ts

@@ -1,22 +1,29 @@
+import type { Theme } from '../../types/props.js';
 export interface Feature {
     /**
      * 特性标题
      */
     title: string;
-    /**
-     * 特性描述
-     */
-    description: string;
 }
 export interface SloganProps {
-    /**
-     * 主标题
-     */
-    title: string;
-    /**
-     * 特性列表，最多支持3个
-     */
-    features?: string[];
+    data: {
+        /**
+         * 主标题
+         */
+        title: string;
+        /**
+         * 特性分组大小 默认为3
+         */
+        featureChunkSize?: number;
+        /**
+         * 特性列表
+         */
+        features?: Feature[];
+        /**
+         * 主题
+         */
+        theme?: Theme;
+    };
     /**
      * 自定义类名
      */

package/dist/cjs/biz-components/Slogan/types.js

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var c=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of g(t))!o.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=a(t,r))||i.enumerable});return e};var l=e=>c(s({},"__esModule",{value:!0}),e);var p={};module.exports=l(p);
+"use strict";var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var o=(t,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of p(e))!m.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(a=n(e,r))||a.enumerable});return t};var u=t=>o(s({},"__esModule",{value:!0}),t);var f={};module.exports=u(f);
 //# sourceMappingURL=types.js.map