@anker-in/headless-ui 0.0.27-alpha.6 → 0.0.27-alpha.8

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

@@ -0,0 +1,25 @@
+type AccordionCardsType = {
+    products: Array<{
+        /** 标题文本 */
+        title: string;
+        /** 图片*/
+        img: string;
+        /** 内容节点 */
+        subTitle: string;
+    }>;
+    className?: string;
+    /** 按钮形状 */
+    shape?: 'round' | 'square';
+    /** 卡片形状 */
+    itemShape?: 'round' | 'square';
+    /** 主按钮配置 */
+    primaryButton?: string;
+    /** 按钮事件*/
+    event?: {
+        primaryButton?: {
+            onClick: (v: any) => void;
+        };
+    };
+};
+declare const AccordionCards: ({ products, className, shape, itemShape, event, primaryButton, }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
+export default AccordionCards;

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

@@ -0,0 +1,2 @@
+"use strict";var C=Object.create;var f=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var j=(e,r)=>{for(var n in r)f(e,n,{get:r[n],enumerable:!0})},F=(e,r,n,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of T(r))!M.call(e,l)&&l!==n&&f(e,l,{get:()=>r[l],enumerable:!(c=L(r,l))||c.enumerable});return e};var w=(e,r,n)=>(n=e!=null?C(B(e)):{},F(r||!e||!e.__esModule?f(n,"default",{value:e,enumerable:!0}):n,e)),q=e=>F(f({},"__esModule",{value:!0}),e);var _={};j(_,{default:()=>R});module.exports=q(_);var s=require("react/jsx-runtime"),a=require("../../helpers/utils"),p=w(require("../../components/picture")),g=w(require("../../components/button")),i=require("react");function z(){const[e,r]=(0,i.useState)(window?.innerWidth||0);return(0,i.useEffect)(()=>{const n=()=>r(window?.innerWidth||0);return window?.addEventListener("resize",n),()=>window?.removeEventListener("resize",n)},[]),e<=768}const A=({products:e=[],className:r="",shape:n="square",itemShape:c="square",event:l,primaryButton:y=""})=>{const E=z(),[k,v]=(0,i.useState)(null),[N,h]=(0,i.useState)({}),b=(0,i.useRef)([]),m=(0,i.useRef)({}),W=(o,t)=>{t&&(b.current[o]=t)},x=o=>{const t={...m.current,[o]:!0};h(t),m.current=t};return(0,i.useEffect)(()=>{const o=b.current;return o?.forEach((t,d)=>{t.addEventListener("transitionend",()=>x(d))}),()=>{o?.forEach((t,d)=>{t.removeEventListener("transitionend",()=>x(d))})}},[]),E?(0,s.jsx)("div",{className:(0,a.cn)("flex gap-4 overflow-x-auto w-full h-[400px]",r),children:e?.map((o,t)=>(0,s.jsx)("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:(0,s.jsx)(p.default,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img})},t))}):(0,s.jsx)("div",{className:(0,a.cn)("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",r),children:e?.map((o,t)=>{const d=k===t;return(0,s.jsxs)("div",{style:{flex:d?6:1,transition:"all 0.3s ease-in-out"},ref:u=>u&&W(t,u),className:(0,a.cn)("relative overflow-hidden cursor-pointer",c==="round"?"rounded-2xl":""),onMouseEnter:()=>v(t),onMouseLeave:()=>{v(null);const u={...m.current,[t]:!1};h(u),m.current=u},children:[(0,s.jsx)(p.default,{source:o?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),N?.[t]?(0,s.jsxs)("div",{className:(0,a.cn)("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",d?"opacity-100":"opacity-0"),children:[(0,s.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,s.jsx)("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:o?.title}),(0,s.jsx)("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:o?.subTitle})]}),(0,s.jsx)(g.default,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>l?.primaryButton?.onClick?.(o),className:(0,a.cn)("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base",n==="round"?"rounded-2xl":""),children:y})]}):null]},t)})})};var R=A;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
+  "sourcesContent": ["import { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\nimport Button from '../../components/button'\nimport { useState, useEffect, useRef } from 'react';\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n    const [width, setWidth] = useState(window?.innerWidth || 0);\n    useEffect(() => {\n        const onResize = () => setWidth(window?.innerWidth || 0);\n        window?.addEventListener('resize', onResize);\n        return () => window?.removeEventListener('resize', onResize);\n    }, []);\n    return width <= 768;\n}\n\ntype AccordionCardsType = {\n    products: Array<{\n        /** \u6807\u9898\u6587\u672C */\n        title: string\n        /** \u56FE\u7247*/\n        img: string\n        /** \u5185\u5BB9\u8282\u70B9 */\n        subTitle: string\n    }>\n    className?: string\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u6309\u94AE\u4E8B\u4EF6*/\n    event?: {\n        primaryButton?: {\n            onClick: (v: any) => void\n        },\n    },\n}\n\nconst AccordionCards = ({\n    products = [],\n    className = '',\n    shape = 'square',\n    itemShape = 'square',\n    event,\n    primaryButton = '',\n}: AccordionCardsType) => {\n    const isMobile = useWindowWidth();\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n    const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({});\n\n    const accordionRef = useRef<HTMLDivElement[]>([])\n    const refWidth = useRef<{ [key: number]: boolean }>({});\n\n    const getRef = (index: number, el: HTMLDivElement) => {\n        if (el) {\n            accordionRef.current[index] = el;\n        }\n    };\n\n    const handleTransitionEnd = (index: number) => {\n        const current = { ...refWidth.current, [index]: true }\n        setCurrentWidth(current)\n        refWidth.current = current\n    };\n\n    useEffect(() => {\n        const element = accordionRef.current;\n        element?.forEach((item, index) => {\n            item.addEventListener('transitionend', ()=>handleTransitionEnd(index));  \n        })\n        return () => {\n            element?.forEach((item, index) => {\n                item.removeEventListener('transitionend', ()=>handleTransitionEnd(index));  \n            })\n        };\n    }, [])\n\n    // \u79FB\u52A8\u7AEF\n    if (isMobile) {\n        return (\n            <div className={cn(\"flex gap-4 overflow-x-auto w-full h-[400px]\", className)}>\n                {products?.map((item, idx) => (\n                    <div\n                        key={idx}\n                        className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\"\n                    >\n                        <Picture\n                            className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                            source={item?.img}\n                        />\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    // \u684C\u9762\u7AEF\n    return (\n        <div className={cn(\"h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]\", className)}>\n            {products?.map((item, idx) => {\n                const isExpanded = hoverIndex === idx;\n                const flexValue = isExpanded ? 6 : 1;\n                return (\n                    <div\n                        key={idx}\n                        style={{\n                            flex: flexValue,\n                            transition: 'all 0.3s ease-in-out',\n                        }}\n                        ref={(el) => el && getRef(idx, el)}\n                        className={cn(\n                            'relative overflow-hidden cursor-pointer',\n                            itemShape === 'round' ? 'rounded-2xl' : ''\n                        )}\n                        onMouseEnter={() => setHoverIndex(idx)}\n                        onMouseLeave={() => {\n                            setHoverIndex(null)\n                            const current = { ...refWidth.current, [idx]: false }\n                            setCurrentWidth(current)\n                            refWidth.current = current\n                        }}\n                    >\n                        <Picture\n                            source={item?.img}\n                            className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                        />\n                        {\n                            currentWidth?.[idx] ?\n                                <div className={cn(\n                                    'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n                                    'transition-all duration-[50ms] delay-[300ms]',\n                                    isExpanded ? 'opacity-100' : 'opacity-0'\n                                )}>\n                                    <div className=\"mr-1 flex-1 overflow-hidden\">\n                                        <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">{item?.title}</p>\n                                        <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n                                    </div>\n                                    <Button\n                                        size=\"sm\"\n                                        hoverEffect=\"slide\"\n                                        variant=\"secondary\"\n                                        onClick={() => event?.primaryButton?.onClick?.(item)}\n                                        className={cn(\n                                            'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base',\n                                            shape === 'round' ? 'rounded-2xl' : ''\n                                        )}\n                                    >\n                                        {primaryButton}\n                                    </Button>\n                                </div>: null\n                        }\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default AccordionCards\n"],
+  "mappings": "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",
+  "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_picture", "import_button", "import_react", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "Picture", "isExpanded", "Button"]
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface GraphicProps {
+    className?: string;
+    items: {
+        imgUrl: string;
+        title: string;
+        textColor?: string;
+    }[];
+    shape?: 'round' | 'square';
+}
+declare const _default: {
+    (props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;

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

@@ -0,0 +1,2 @@
+"use strict";var b=Object.create;var x=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var s in e)x(t,s,{get:e[s],enumerable:!0})},f=(t,e,s,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of k(e))!N.call(t,a)&&a!==s&&x(t,a,{get:()=>e[a],enumerable:!(m=C(e,a))||m.enumerable});return t};var G=(t,e,s)=>(s=t!=null?b(y(t)):{},f(e||!t||!t.__esModule?x(s,"default",{value:t,enumerable:!0}):s,t)),P=t=>f(x({},"__esModule",{value:!0}),t);var w={};v(w,{default:()=>S});module.exports=P(w);var l=require("react/jsx-runtime"),n=G(require("react")),c=require("../../helpers/utils"),g=require("../../shared/Styles.js"),r=require("../../components"),d=require("../../components");const u=n.default.forwardRef(({items:t,shape:e,className:s,...m},a)=>{const i=t?.length||0,h=(0,n.useMemo)(()=>{const p="basis-[296px]";let o="";return i===1&&(o="basis-[100%]"),i===2&&(o="tablet:basis-1/2"),i===3&&(o="laptop:basis-1/3"),i>3&&(o="laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]"),`${p} ${o}`},[i]);return(0,l.jsx)(r.Carousel,{ref:a,opts:{align:"start"},className:(0,c.cn)("px-4 tablet:px-8 laptop:px-16",s),...m,children:(0,l.jsx)(n.default.Fragment,{children:(0,l.jsx)(r.CarouselContent,{children:t.map((p,o)=>(0,l.jsx)(r.CarouselItem,{className:(0,c.cn)("pl-3 laptop:pl-4 flex-shrink-0 h-[360px]",h),children:(0,l.jsxs)("div",{className:(0,c.cn)("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":e==="round"}),children:[(0,l.jsx)(d.Picture,{className:"h-full ",imgClassName:"h-full object-cover",source:p?.imgUrl}),(0,l.jsx)("div",{className:"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]",children:(0,l.jsx)(d.Text,{html:p?.title,style:{color:p?.textColor},className:"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2"})})]})},o+p?.title))})},".0")})});u.displayName="Graphic";var S=(0,g.withStyles)(u);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
+  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components'\nimport { Picture, Text } from '../../components'\n\nexport interface GraphicProps {\n  className?: string\n  items: {\n    imgUrl: string\n    title: string\n    textColor?: string\n  }[]\n  shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ items, shape, className, ...props }, ref) => {\n  const itemsLength = items?.length || 0\n\n  const itemStyle = useMemo(() => {\n    const basisStyle = 'basis-[296px]'\n    let breakPointStyle = ''\n    if (itemsLength === 1) {\n      breakPointStyle = 'basis-[100%]'\n    }\n    if (itemsLength === 2) {\n      breakPointStyle = 'tablet:basis-1/2'\n    }\n    if (itemsLength === 3) {\n      breakPointStyle = 'laptop:basis-1/3'\n    }\n    if (itemsLength > 3) {\n      breakPointStyle = 'laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]'\n    }\n    return `${basisStyle} ${breakPointStyle}`\n  }, [itemsLength])\n\n  return (\n    <Carousel\n      ref={ref}\n      opts={{\n        align: 'start',\n      }}\n      className={cn('px-4 tablet:px-8 laptop:px-16', className)}\n      {...props}\n    >\n      <React.Fragment key=\".0\">\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem\n              key={index + item?.title}\n              className={cn('pl-3 laptop:pl-4 flex-shrink-0 h-[360px]', itemStyle)}\n            >\n              <div className={cn(\"relative h-full\", {\n                ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round'\n              })}>\n                <Picture className=\"h-full \" imgClassName=\"h-full object-cover\" source={item?.imgUrl} />\n                <div className=\"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]\">\n                  <Text\n                    html={item?.title}\n                    style={{\n                      color: item?.textColor,\n                    }}\n                    className=\"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2\"\n                  />\n                </div>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n      </React.Fragment>\n    </Carousel>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDc,IAAAI,EAAA,6BArDdC,EAA+B,oBAC/BC,EAAmB,+BACnBC,EAA2B,kCAC3BC,EAAwD,4BACxDA,EAA8B,4BAY9B,MAAMC,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC7G,MAAMC,EAAcL,GAAO,QAAU,EAE/BM,KAAY,WAAQ,IAAM,CAC9B,MAAMC,EAAa,gBACnB,IAAIC,EAAkB,GACtB,OAAIH,IAAgB,IAClBG,EAAkB,gBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,EAAc,IAChBG,EAAkB,uEAEb,GAAGD,CAAU,IAAIC,CAAe,EACzC,EAAG,CAACH,CAAW,CAAC,EAEhB,SACE,OAAC,YACC,IAAKD,EACL,KAAM,CACJ,MAAO,OACT,EACA,aAAW,MAAG,gCAAiCF,CAAS,EACvD,GAAGC,EAEJ,mBAAC,EAAAJ,QAAM,SAAN,CACC,mBAAC,mBACE,SAAAC,EAAM,IAAI,CAACS,EAAMC,OAChB,OAAC,gBAEC,aAAW,MAAG,2CAA4CJ,CAAS,EAEnE,oBAAC,OAAI,aAAW,MAAG,kBAAmB,CACnC,gDAAkDL,IAAU,OAC/D,CAAC,EACC,oBAAC,WAAQ,UAAU,UAAU,aAAa,sBAAsB,OAAQQ,GAAM,OAAQ,KACtF,OAAC,OAAI,UAAU,kEACb,mBAAC,QACC,KAAMA,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAhBKC,EAAQD,GAAM,KAiBrB,CACD,EACH,GAvBkB,IAwBpB,EACF,CAEJ,CAAC,EAEDX,EAAQ,YAAc,UAEtB,IAAOP,KAAQ,cAAWO,CAAO",
+  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "Graphic", "React", "items", "shape", "className", "props", "ref", "itemsLength", "itemStyle", "basisStyle", "breakPointStyle", "item", "index"]
+}

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

@@ -6,4 +6,6 @@ export { default as ShelfDisplay } from './ShelfDisplay/index.js';
 export { default as Evaluate } from './Evaluate/index.js';
 export { default as Category } from './Category/index.js';
 export { default as HeroBanner } from './HeroBanner/index.js';
+export { default as AccordionCards } from './AccordionCards/index.js';
+export { default as Graphic } from './Graphic/index.js';
 export * from './Marquee';

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

@@ -1,2 +1,2 @@
-"use strict";var g=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(e,a)=>{for(var r in a)l(e,r,{get:a[r],enumerable:!0})},f=(e,a,r,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of q(a))!b.call(e,t)&&t!==r&&l(e,t,{get:()=>a[t],enumerable:!(p=h(a,t))||p.enumerable});return e},m=(e,a,r)=>(f(e,a,"default"),r&&f(r,a,"default")),o=(e,a,r)=>(r=e!=null?g(B(e)):{},f(a||!e||!e.__esModule?l(r,"default",{value:e,enumerable:!0}):r,e)),C=e=>f(l({},"__esModule",{value:!0}),e);var u={};v(u,{BrandEquity:()=>s.default,Category:()=>E.default,Evaluate:()=>i.default,HeroBanner:()=>S.default,MemberEquity:()=>x.default,Shelf:()=>d.default,ShelfDisplay:()=>y.default,Slogan:()=>n.default});module.exports=C(u);var d=o(require("./Shelf/index.js")),s=o(require("./BrandEquity/index.js")),x=o(require("./MemberEquity/index.js")),n=o(require("./Slogan/index.js")),y=o(require("./ShelfDisplay/index.js")),i=o(require("./Evaluate/index.js")),E=o(require("./Category/index.js")),S=o(require("./HeroBanner/index.js"));m(u,require("./Marquee"),module.exports);
+"use strict";var g=Object.create;var l=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(r,a)=>{for(var e in a)l(r,e,{get:a[e],enumerable:!0})},f=(r,a,e,u)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of B(a))!b.call(r,t)&&t!==e&&l(r,t,{get:()=>a[t],enumerable:!(u=q(a,t))||u.enumerable});return r},p=(r,a,e)=>(f(r,a,"default"),e&&f(e,a,"default")),o=(r,a,e)=>(e=r!=null?g(C(r)):{},f(a||!r||!r.__esModule?l(e,"default",{value:r,enumerable:!0}):e,r)),A=r=>f(l({},"__esModule",{value:!0}),r);var d={};v(d,{AccordionCards:()=>E.default,BrandEquity:()=>s.default,Category:()=>c.default,Evaluate:()=>y.default,Graphic:()=>S.default,HeroBanner:()=>h.default,MemberEquity:()=>x.default,Shelf:()=>m.default,ShelfDisplay:()=>n.default,Slogan:()=>i.default});module.exports=A(d);var m=o(require("./Shelf/index.js")),s=o(require("./BrandEquity/index.js")),x=o(require("./MemberEquity/index.js")),i=o(require("./Slogan/index.js")),n=o(require("./ShelfDisplay/index.js")),y=o(require("./Evaluate/index.js")),c=o(require("./Category/index.js")),h=o(require("./HeroBanner/index.js")),E=o(require("./AccordionCards/index.js")),S=o(require("./Graphic/index.js"));p(d,require("./Marquee"),module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/biz-components/index.ts"],
-  "sourcesContent": ["export { default as Shelf } from './Shelf/index.js'\nexport { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\n\n\nexport * from './Marquee'"],
-  "mappings": "wmBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kNAAAE,EAAAF,GAAA,IAAAG,EAAiC,+BACjCC,EAAuC,qCACvCC,EAAwC,sCACxCC,EAAkC,gCAClCC,EAAwC,sCACxCC,EAAoC,kCACpCC,EAAoC,kCACpCC,EAAsC,oCAGtCC,EAAAX,EAAc,qBAVd",
-  "names": ["biz_components_exports", "__export", "__toCommonJS", "import_Shelf", "import_BrandEquity", "import_MemberEquity", "import_Slogan", "import_ShelfDisplay", "import_Evaluate", "import_Category", "import_HeroBanner", "__reExport"]
+  "sourcesContent": ["export { default as Shelf } from './Shelf/index.js'\nexport { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport * from './Marquee'"],
+  "mappings": "wmBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qQAAAE,EAAAF,GAAA,IAAAG,EAAiC,+BACjCC,EAAuC,qCACvCC,EAAwC,sCACxCC,EAAkC,gCAClCC,EAAwC,sCACxCC,EAAoC,kCACpCC,EAAoC,kCACpCC,EAAsC,oCACtCC,EAA0C,wCAC1CC,EAAmC,iCACnCC,EAAAb,EAAc,qBAVd",
+  "names": ["biz_components_exports", "__export", "__toCommonJS", "import_Shelf", "import_BrandEquity", "import_MemberEquity", "import_Slogan", "import_ShelfDisplay", "import_Evaluate", "import_Category", "import_HeroBanner", "import_AccordionCards", "import_Graphic", "__reExport"]
 }

package/dist/cjs/stories/accordionCards.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ products, className, shape, itemShape, event, primaryButton, }: {
+        products: Array<{
+            title: string;
+            img: string;
+            subTitle: string;
+        }>;
+        className?: string;
+        shape?: "round" | "square";
+        itemShape?: "round" | "square";
+        primaryButton?: string;
+        event?: {
+            primaryButton?: {
+                onClick: (v: any) => void;
+            };
+        };
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Round: Story;

package/dist/cjs/stories/accordionCards.stories.js

@@ -0,0 +1,2 @@
+"use strict";var c=Object.create;var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(e,o)=>{for(var t in o)p(e,t,{get:o[t],enumerable:!0})},r=(e,o,t,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of l(o))!g.call(e,s)&&s!==t&&p(e,s,{get:()=>o[s],enumerable:!(i=d(o,s))||i.enumerable});return e};var u=(e,o,t)=>(t=e!=null?c(f(e)):{},r(o||!e||!e.__esModule?p(t,"default",{value:e,enumerable:!0}):t,e)),h=e=>r(p({},"__esModule",{value:!0}),e);var A={};m(A,{Default:()=>_,Round:()=>C,default:()=>b});module.exports=h(A);var n=u(require("../biz-components/AccordionCards"));const y={title:"Biz-Components/AccordionCards",component:n.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var b=y;const a=[{title:"Apple Charging Solutions",img:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768",subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768",subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768",subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768",subTitle:"Dependable Charging for Your Entire Apple Ecosystem."}],_={args:{products:a,primaryButton:"Learn More"}},C={args:{products:a,shape:"round",itemShape:"round",primaryButton:"Learn More"}};
+//# sourceMappingURL=accordionCards.stories.js.map

package/dist/cjs/stories/accordionCards.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/accordionCards.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards'\n\nconst meta = {\n    title: 'Biz-Components/AccordionCards',\n    component: AccordionCards,\n    parameters: {\n        layout: 'fullscreen',\n    },\n    tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n    {\n        title: 'Apple Charging Solutions',\n        img: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n        subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.'\n    },\n    {\n        title: 'Apple Charging Solutions',\n        img: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n        subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.'\n    },\n    {\n        title: 'Apple Charging Solutions',\n        img: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n        subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.'\n    },\n    {\n        title: 'Apple Charging Solutions',\n        img: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n        subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.'\n    },\n]\n\nexport const Default: Story = {\n    args: {\n        products: mock,\n        primaryButton: 'Learn More'\n    },\n}\n\nexport const Round: Story = {\n    args: {\n        products: mock,\n        shape: 'round',\n        itemShape: 'round',\n        primaryButton: 'Learn More'\n    },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAA2B,+CAE3B,MAAMC,EAAO,CACT,MAAO,gCACP,UAAW,EAAAC,QACX,WAAY,CACR,OAAQ,YACZ,EACA,KAAM,CAAC,UAAU,CACrB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EAAO,CACT,CACI,MAAO,2BACP,IAAK,gPACL,SAAU,sDACd,EACA,CACI,MAAO,2BACP,IAAK,gPACL,SAAU,sDACd,EACA,CACI,MAAO,2BACP,IAAK,gPACL,SAAU,sDACd,EACA,CACI,MAAO,2BACP,IAAK,gPACL,SAAU,sDACd,CACJ,EAEaP,EAAiB,CAC1B,KAAM,CACF,SAAUO,EACV,cAAe,YACnB,CACJ,EAEaN,EAAe,CACxB,KAAM,CACF,SAAUM,EACV,MAAO,QACP,UAAW,QACX,cAAe,YACnB,CACJ",
+  "names": ["accordionCards_stories_exports", "__export", "Default", "Round", "accordionCards_stories_default", "__toCommonJS", "import_AccordionCards", "meta", "AccordionCards", "mock"]
+}

package/dist/cjs/stories/graphic.stories.d.ts

@@ -0,0 +1,49 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: {
+        (props: Omit<import("../biz-components/Graphic").GraphicProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        shape: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        className?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        shape?: "round" | "square" | undefined;
+        items: {
+            imgUrl: string;
+            title: string;
+            textColor?: string;
+        }[];
+        style?: string | undefined;
+        uid?: string | undefined;
+        disabled?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Round: Story;

package/dist/cjs/stories/graphic.stories.js

@@ -0,0 +1,2 @@
+"use strict";var f=Object.create;var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!d.call(e,r)&&r!==o&&s(e,r,{get:()=>t[r],enumerable:!(p=c(t,r))||p.enumerable});return e};var u=(e,t,o)=>(o=e!=null?f(y(e)):{},i(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),h=e=>i(s({},"__esModule",{value:!0}),e);var v={};g(v,{Default:()=>F,Round:()=>O,default:()=>b});module.exports=h(v);var a=require("react/jsx-runtime"),n=u(require("../biz-components/Graphic"));const S={title:"Biz-Components/Graphic",component:n.default,parameters:{layout:"fullscreen",docs:{description:{component:"\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/"}}},argTypes:{shape:{control:{type:"inline-radio"},options:["square","round"],description:"\u5706\u89D2",table:{defaultValue:{summary:"square"}}}},decorators:[e=>(0,a.jsx)("div",{style:{paddingTop:"2em"},children:(0,a.jsx)(e,{})})],tags:["autodocs"]};var b=S;const l=[{imgUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off"},{imgUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF"},{imgUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off"},{imgUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF"}],F={args:{items:l}},O={args:{items:l,shape:"round"}};
+//# sourceMappingURL=graphic.stories.js.map

package/dist/cjs/stories/graphic.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/graphic.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Graphic from '../biz-components/Graphic'\n\nconst meta = {\n  title: 'Biz-Components/Graphic',\n  component: Graphic,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: '\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/',\n      },\n    },\n  },\n  argTypes: {\n    shape: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['square', 'round'],\n      description: '\u5706\u89D2',\n      table: {\n        defaultValue: {\n          summary: 'square',\n        },\n      },\n    },\n  },\n  decorators: [\n    Story => (\n      <div style={{ paddingTop: '2em' }}>\n        <Story />\n      </div>\n    ),\n  ],\n  tags: ['autodocs'],\n} satisfies Meta<typeof Graphic>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n  {\n    imgUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316',\n    title: '<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off',\n  },\n  {\n    imgUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318',\n    title: '<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices',\n    textColor: '#FFF',\n  },\n  {\n    imgUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316',\n    title: '<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off',\n  },\n  {\n    imgUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318',\n    title: '<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices',\n    textColor: '#FFF',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    items: mockItems,\n  },\n}\n\nexport const Round: Story = {\n  args: {\n    items: mockItems,\n    shape: 'round',\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GA+BQ,IAAAM,EAAA,6BA9BRC,EAAoB,wCAEpB,MAAMC,EAAO,CACX,MAAO,yBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,mIACb,CACF,CACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,KAAM,cACR,EACA,QAAS,CAAC,SAAU,OAAO,EAC3B,YAAa,eACb,MAAO,CACL,aAAc,CACZ,QAAS,QACX,CACF,CACF,CACF,EACA,WAAY,CACVC,MACE,OAAC,OAAI,MAAO,CAAE,WAAY,KAAM,EAC9B,mBAACA,EAAA,EAAM,EACT,CAEJ,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQI,EAGf,MAAMG,EAAY,CAChB,CACE,OAAQ,2FACR,MAAO,wEACT,EACA,CACE,OAAQ,2FACR,MAAO,yEACP,UAAW,MACb,EACA,CACE,OAAQ,2FACR,MAAO,wEACT,EACA,CACE,OAAQ,2FACR,MAAO,yEACP,UAAW,MACb,CACF,EAEaT,EAAiB,CAC5B,KAAM,CACJ,MAAOS,CACT,CACF,EAEaR,EAAe,CAC1B,KAAM,CACJ,MAAOQ,EACP,MAAO,OACT,CACF",
+  "names": ["graphic_stories_exports", "__export", "Default", "Round", "graphic_stories_default", "__toCommonJS", "import_jsx_runtime", "import_Graphic", "meta", "Graphic", "Story", "mockItems"]
+}

package/dist/esm/biz-components/AccordionCards/index.d.ts

@@ -0,0 +1,25 @@
+type AccordionCardsType = {
+    products: Array<{
+        /** 标题文本 */
+        title: string;
+        /** 图片*/
+        img: string;
+        /** 内容节点 */
+        subTitle: string;
+    }>;
+    className?: string;
+    /** 按钮形状 */
+    shape?: 'round' | 'square';
+    /** 卡片形状 */
+    itemShape?: 'round' | 'square';
+    /** 主按钮配置 */
+    primaryButton?: string;
+    /** 按钮事件*/
+    event?: {
+        primaryButton?: {
+            onClick: (v: any) => void;
+        };
+    };
+};
+declare const AccordionCards: ({ products, className, shape, itemShape, event, primaryButton, }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
+export default AccordionCards;

package/dist/esm/biz-components/AccordionCards/index.js

@@ -0,0 +1,2 @@
+import{jsx as r,jsxs as c}from"react/jsx-runtime";import{cn as s}from"../../helpers/utils";import h from"../../components/picture";import W from"../../components/button";import{useState as u,useEffect as b,useRef as x}from"react";function C(){const[i,l]=u(window?.innerWidth||0);return b(()=>{const d=()=>l(window?.innerWidth||0);return window?.addEventListener("resize",d),()=>window?.removeEventListener("resize",d)},[]),i<=768}const L=({products:i=[],className:l="",shape:d="square",itemShape:F="square",event:w,primaryButton:g=""})=>{const y=C(),[E,m]=u(null),[k,f]=u({}),p=x([]),a=x({}),N=(t,e)=>{e&&(p.current[t]=e)},v=t=>{const e={...a.current,[t]:!0};f(e),a.current=e};return b(()=>{const t=p.current;return t?.forEach((e,n)=>{e.addEventListener("transitionend",()=>v(n))}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>v(n))})}},[]),y?r("div",{className:s("flex gap-4 overflow-x-auto w-full h-[400px]",l),children:i?.map((t,e)=>r("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:r(h,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img})},e))}):r("div",{className:s("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",l),children:i?.map((t,e)=>{const n=E===e;return c("div",{style:{flex:n?6:1,transition:"all 0.3s ease-in-out"},ref:o=>o&&N(e,o),className:s("relative overflow-hidden cursor-pointer",F==="round"?"rounded-2xl":""),onMouseEnter:()=>m(e),onMouseLeave:()=>{m(null);const o={...a.current,[e]:!1};f(o),a.current=o},children:[r(h,{source:t?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),k?.[e]?c("div",{className:s("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",n?"opacity-100":"opacity-0"),children:[c("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:t?.subTitle})]}),r(W,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>w?.primaryButton?.onClick?.(t),className:s("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base",d==="round"?"rounded-2xl":""),children:g})]}):null]},e)})})};var z=L;export{z as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccordionCards/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
+  "sourcesContent": ["import { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\nimport Button from '../../components/button'\nimport { useState, useEffect, useRef } from 'react';\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n    const [width, setWidth] = useState(window?.innerWidth || 0);\n    useEffect(() => {\n        const onResize = () => setWidth(window?.innerWidth || 0);\n        window?.addEventListener('resize', onResize);\n        return () => window?.removeEventListener('resize', onResize);\n    }, []);\n    return width <= 768;\n}\n\ntype AccordionCardsType = {\n    products: Array<{\n        /** \u6807\u9898\u6587\u672C */\n        title: string\n        /** \u56FE\u7247*/\n        img: string\n        /** \u5185\u5BB9\u8282\u70B9 */\n        subTitle: string\n    }>\n    className?: string\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u6309\u94AE\u4E8B\u4EF6*/\n    event?: {\n        primaryButton?: {\n            onClick: (v: any) => void\n        },\n    },\n}\n\nconst AccordionCards = ({\n    products = [],\n    className = '',\n    shape = 'square',\n    itemShape = 'square',\n    event,\n    primaryButton = '',\n}: AccordionCardsType) => {\n    const isMobile = useWindowWidth();\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n    const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({});\n\n    const accordionRef = useRef<HTMLDivElement[]>([])\n    const refWidth = useRef<{ [key: number]: boolean }>({});\n\n    const getRef = (index: number, el: HTMLDivElement) => {\n        if (el) {\n            accordionRef.current[index] = el;\n        }\n    };\n\n    const handleTransitionEnd = (index: number) => {\n        const current = { ...refWidth.current, [index]: true }\n        setCurrentWidth(current)\n        refWidth.current = current\n    };\n\n    useEffect(() => {\n        const element = accordionRef.current;\n        element?.forEach((item, index) => {\n            item.addEventListener('transitionend', ()=>handleTransitionEnd(index));  \n        })\n        return () => {\n            element?.forEach((item, index) => {\n                item.removeEventListener('transitionend', ()=>handleTransitionEnd(index));  \n            })\n        };\n    }, [])\n\n    // \u79FB\u52A8\u7AEF\n    if (isMobile) {\n        return (\n            <div className={cn(\"flex gap-4 overflow-x-auto w-full h-[400px]\", className)}>\n                {products?.map((item, idx) => (\n                    <div\n                        key={idx}\n                        className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\"\n                    >\n                        <Picture\n                            className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                            source={item?.img}\n                        />\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    // \u684C\u9762\u7AEF\n    return (\n        <div className={cn(\"h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]\", className)}>\n            {products?.map((item, idx) => {\n                const isExpanded = hoverIndex === idx;\n                const flexValue = isExpanded ? 6 : 1;\n                return (\n                    <div\n                        key={idx}\n                        style={{\n                            flex: flexValue,\n                            transition: 'all 0.3s ease-in-out',\n                        }}\n                        ref={(el) => el && getRef(idx, el)}\n                        className={cn(\n                            'relative overflow-hidden cursor-pointer',\n                            itemShape === 'round' ? 'rounded-2xl' : ''\n                        )}\n                        onMouseEnter={() => setHoverIndex(idx)}\n                        onMouseLeave={() => {\n                            setHoverIndex(null)\n                            const current = { ...refWidth.current, [idx]: false }\n                            setCurrentWidth(current)\n                            refWidth.current = current\n                        }}\n                    >\n                        <Picture\n                            source={item?.img}\n                            className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                        />\n                        {\n                            currentWidth?.[idx] ?\n                                <div className={cn(\n                                    'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n                                    'transition-all duration-[50ms] delay-[300ms]',\n                                    isExpanded ? 'opacity-100' : 'opacity-0'\n                                )}>\n                                    <div className=\"mr-1 flex-1 overflow-hidden\">\n                                        <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">{item?.title}</p>\n                                        <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n                                    </div>\n                                    <Button\n                                        size=\"sm\"\n                                        hoverEffect=\"slide\"\n                                        variant=\"secondary\"\n                                        onClick={() => event?.primaryButton?.onClick?.(item)}\n                                        className={cn(\n                                            'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base',\n                                            shape === 'round' ? 'rounded-2xl' : ''\n                                        )}\n                                    >\n                                        {primaryButton}\n                                    </Button>\n                                </div>: null\n                        }\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default AccordionCards\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "cn", "Picture", "Button", "useState", "useEffect", "useRef", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "isExpanded", "AccordionCards_default"]
+}

package/dist/esm/biz-components/Graphic/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface GraphicProps {
+    className?: string;
+    items: {
+        imgUrl: string;
+        title: string;
+        textColor?: string;
+    }[];
+    shape?: 'round' | 'square';
+}
+declare const _default: {
+    (props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;

package/dist/esm/biz-components/Graphic/index.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as k}from"react/jsx-runtime";import p,{useMemo as d}from"react";import{cn as a}from"../../helpers/utils";import{withStyles as f}from"../../shared/Styles.js";import{Carousel as u,CarouselContent as g,CarouselItem as h}from"../../components";import{Picture as b,Text as C}from"../../components";const r=p.forwardRef(({items:o,shape:i,className:n,...m},x)=>{const l=o?.length||0,c=d(()=>{const s="basis-[296px]";let t="";return l===1&&(t="basis-[100%]"),l===2&&(t="tablet:basis-1/2"),l===3&&(t="laptop:basis-1/3"),l>3&&(t="laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]"),`${s} ${t}`},[l]);return e(u,{ref:x,opts:{align:"start"},className:a("px-4 tablet:px-8 laptop:px-16",n),...m,children:e(p.Fragment,{children:e(g,{children:o.map((s,t)=>e(h,{className:a("pl-3 laptop:pl-4 flex-shrink-0 h-[360px]",c),children:k("div",{className:a("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":i==="round"}),children:[e(b,{className:"h-full ",imgClassName:"h-full object-cover",source:s?.imgUrl}),e("div",{className:"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]",children:e(C,{html:s?.title,style:{color:s?.textColor},className:"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2"})})]})},t+s?.title))})},".0")})});r.displayName="Graphic";var S=f(r);export{S as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Graphic/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
+  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components'\nimport { Picture, Text } from '../../components'\n\nexport interface GraphicProps {\n  className?: string\n  items: {\n    imgUrl: string\n    title: string\n    textColor?: string\n  }[]\n  shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ items, shape, className, ...props }, ref) => {\n  const itemsLength = items?.length || 0\n\n  const itemStyle = useMemo(() => {\n    const basisStyle = 'basis-[296px]'\n    let breakPointStyle = ''\n    if (itemsLength === 1) {\n      breakPointStyle = 'basis-[100%]'\n    }\n    if (itemsLength === 2) {\n      breakPointStyle = 'tablet:basis-1/2'\n    }\n    if (itemsLength === 3) {\n      breakPointStyle = 'laptop:basis-1/3'\n    }\n    if (itemsLength > 3) {\n      breakPointStyle = 'laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]'\n    }\n    return `${basisStyle} ${breakPointStyle}`\n  }, [itemsLength])\n\n  return (\n    <Carousel\n      ref={ref}\n      opts={{\n        align: 'start',\n      }}\n      className={cn('px-4 tablet:px-8 laptop:px-16', className)}\n      {...props}\n    >\n      <React.Fragment key=\".0\">\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem\n              key={index + item?.title}\n              className={cn('pl-3 laptop:pl-4 flex-shrink-0 h-[360px]', itemStyle)}\n            >\n              <div className={cn(\"relative h-full\", {\n                ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round'\n              })}>\n                <Picture className=\"h-full \" imgClassName=\"h-full object-cover\" source={item?.imgUrl} />\n                <div className=\"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]\">\n                  <Text\n                    html={item?.title}\n                    style={{\n                      color: item?.textColor,\n                    }}\n                    className=\"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2\"\n                  />\n                </div>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n      </React.Fragment>\n    </Carousel>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "AAqDc,OAGE,OAAAA,EAHF,QAAAC,MAAA,oBArDd,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,MAAAC,MAAU,sBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,mBACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,mBAY9B,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,MAAAU,EAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC7G,MAAMC,EAAcL,GAAO,QAAU,EAE/BM,EAAYf,EAAQ,IAAM,CAC9B,MAAMgB,EAAa,gBACnB,IAAIC,EAAkB,GACtB,OAAIH,IAAgB,IAClBG,EAAkB,gBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,EAAc,IAChBG,EAAkB,uEAEb,GAAGD,CAAU,IAAIC,CAAe,EACzC,EAAG,CAACH,CAAW,CAAC,EAEhB,OACEjB,EAACM,EAAA,CACC,IAAKU,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWZ,EAAG,gCAAiCU,CAAS,EACvD,GAAGC,EAEJ,SAAAf,EAACE,EAAM,SAAN,CACC,SAAAF,EAACO,EAAA,CACE,SAAAK,EAAM,IAAI,CAACS,EAAMC,IAChBtB,EAACQ,EAAA,CAEC,UAAWJ,EAAG,2CAA4Cc,CAAS,EAEnE,SAAAjB,EAAC,OAAI,UAAWG,EAAG,kBAAmB,CACnC,gDAAkDS,IAAU,OAC/D,CAAC,EACC,UAAAb,EAACS,EAAA,CAAQ,UAAU,UAAU,aAAa,sBAAsB,OAAQY,GAAM,OAAQ,EACtFrB,EAAC,OAAI,UAAU,kEACb,SAAAA,EAACU,EAAA,CACC,KAAMW,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAhBKC,EAAQD,GAAM,KAiBrB,CACD,EACH,GAvBkB,IAwBpB,EACF,CAEJ,CAAC,EAEDV,EAAQ,YAAc,UAEtB,IAAOY,EAAQlB,EAAWM,CAAO",
+  "names": ["jsx", "jsxs", "React", "useMemo", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Picture", "Text", "Graphic", "items", "shape", "className", "props", "ref", "itemsLength", "itemStyle", "basisStyle", "breakPointStyle", "item", "index", "Graphic_default"]
+}

package/dist/esm/biz-components/index.d.ts

@@ -6,4 +6,6 @@ export { default as ShelfDisplay } from './ShelfDisplay/index.js';
 export { default as Evaluate } from './Evaluate/index.js';
 export { default as Category } from './Category/index.js';
 export { default as HeroBanner } from './HeroBanner/index.js';
+export { default as AccordionCards } from './AccordionCards/index.js';
+export { default as Graphic } from './Graphic/index.js';
 export * from './Marquee';

package/dist/esm/biz-components/index.js

@@ -1,2 +1,2 @@
-import{default as r}from"./Shelf/index.js";import{default as t}from"./BrandEquity/index.js";import{default as l}from"./MemberEquity/index.js";import{default as m}from"./Slogan/index.js";import{default as d}from"./ShelfDisplay/index.js";import{default as x}from"./Evaluate/index.js";import{default as y}from"./Category/index.js";import{default as E}from"./HeroBanner/index.js";export*from"./Marquee";export{t as BrandEquity,y as Category,x as Evaluate,E as HeroBanner,l as MemberEquity,r as Shelf,d as ShelfDisplay,m as Slogan};
+import{default as e}from"./Shelf/index.js";import{default as t}from"./BrandEquity/index.js";import{default as l}from"./MemberEquity/index.js";import{default as p}from"./Slogan/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as x}from"./Evaluate/index.js";import{default as n}from"./Category/index.js";import{default as c}from"./HeroBanner/index.js";import{default as E}from"./AccordionCards/index.js";import{default as g}from"./Graphic/index.js";export*from"./Marquee";export{E as AccordionCards,t as BrandEquity,n as Category,x as Evaluate,g as Graphic,c as HeroBanner,l as MemberEquity,e as Shelf,m as ShelfDisplay,p as Slogan};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/biz-components/index.ts"],
-  "sourcesContent": ["export { default as Shelf } from './Shelf/index.js'\nexport { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\n\n\nexport * from './Marquee'"],
-  "mappings": "AAAA,OAAoB,WAAXA,MAAwB,mBACjC,OAAoB,WAAXA,MAA8B,yBACvC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA6B,wBAGtC,WAAc",
+  "sourcesContent": ["export { default as Shelf } from './Shelf/index.js'\nexport { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport * from './Marquee'"],
+  "mappings": "AAAA,OAAoB,WAAXA,MAAwB,mBACjC,OAAoB,WAAXA,MAA8B,yBACvC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA6B,wBACtC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAA0B,qBACnC,WAAc",
   "names": ["default"]
 }

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

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ products, className, shape, itemShape, event, primaryButton, }: {
+        products: Array<{
+            title: string;
+            img: string;
+            subTitle: string;
+        }>;
+        className?: string;
+        shape?: "round" | "square";
+        itemShape?: "round" | "square";
+        primaryButton?: string;
+        event?: {
+            primaryButton?: {
+                onClick: (v: any) => void;
+            };
+        };
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Round: Story;

package/dist/esm/stories/accordionCards.stories.js

@@ -0,0 +1,2 @@
+import o from"../biz-components/AccordionCards";const t={title:"Biz-Components/AccordionCards",component:o,parameters:{layout:"fullscreen"},tags:["autodocs"]};var p=t;const e=[{title:"Apple Charging Solutions",img:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768",subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768",subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768",subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768",subTitle:"Dependable Charging for Your Entire Apple Ecosystem."}],i={args:{products:e,primaryButton:"Learn More"}},r={args:{products:e,shape:"round",itemShape:"round",primaryButton:"Learn More"}};export{i as Default,r as Round,p as default};
+//# sourceMappingURL=accordionCards.stories.js.map

package/dist/esm/stories/accordionCards.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/accordionCards.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards'\n\nconst meta = {\n    title: 'Biz-Components/AccordionCards',\n    component: AccordionCards,\n    parameters: {\n        layout: 'fullscreen',\n    },\n    tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n    {\n        title: 'Apple Charging Solutions',\n        img: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n        subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.'\n    },\n    {\n        title: 'Apple Charging Solutions',\n        img: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n        subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.'\n    },\n    {\n        title: 'Apple Charging Solutions',\n        img: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n        subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.'\n    },\n    {\n        title: 'Apple Charging Solutions',\n        img: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n        subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.'\n    },\n]\n\nexport const Default: Story = {\n    args: {\n        products: mock,\n        primaryButton: 'Learn More'\n    },\n}\n\nexport const Round: Story = {\n    args: {\n        products: mock,\n        shape: 'round',\n        itemShape: 'round',\n        primaryButton: 'Learn More'\n    },\n}\n"],
+  "mappings": "AACA,OAAOA,MAAoB,mCAE3B,MAAMC,EAAO,CACT,MAAO,gCACP,UAAWD,EACX,WAAY,CACR,OAAQ,YACZ,EACA,KAAM,CAAC,UAAU,CACrB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAO,CACT,CACI,MAAO,2BACP,IAAK,gPACL,SAAU,sDACd,EACA,CACI,MAAO,2BACP,IAAK,gPACL,SAAU,sDACd,EACA,CACI,MAAO,2BACP,IAAK,gPACL,SAAU,sDACd,EACA,CACI,MAAO,2BACP,IAAK,gPACL,SAAU,sDACd,CACJ,EAEaC,EAAiB,CAC1B,KAAM,CACF,SAAUD,EACV,cAAe,YACnB,CACJ,EAEaE,EAAe,CACxB,KAAM,CACF,SAAUF,EACV,MAAO,QACP,UAAW,QACX,cAAe,YACnB,CACJ",
+  "names": ["AccordionCards", "meta", "accordionCards_stories_default", "mock", "Default", "Round"]
+}

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

@@ -0,0 +1,49 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: {
+        (props: Omit<import("../biz-components/Graphic").GraphicProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        shape: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        className?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        shape?: "round" | "square" | undefined;
+        items: {
+            imgUrl: string;
+            title: string;
+            textColor?: string;
+        }[];
+        style?: string | undefined;
+        uid?: string | undefined;
+        disabled?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Round: Story;

package/dist/esm/stories/graphic.stories.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";import r from"../biz-components/Graphic";const s={title:"Biz-Components/Graphic",component:r,parameters:{layout:"fullscreen",docs:{description:{component:"\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/"}}},argTypes:{shape:{control:{type:"inline-radio"},options:["square","round"],description:"\u5706\u89D2",table:{defaultValue:{summary:"square"}}}},decorators:[o=>t("div",{style:{paddingTop:"2em"},children:t(o,{})})],tags:["autodocs"]};var p=s;const e=[{imgUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off"},{imgUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF"},{imgUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off"},{imgUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF"}],i={args:{items:e}},l={args:{items:e,shape:"round"}};export{i as Default,l as Round,p as default};
+//# sourceMappingURL=graphic.stories.js.map

package/dist/esm/stories/graphic.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/graphic.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Graphic from '../biz-components/Graphic'\n\nconst meta = {\n  title: 'Biz-Components/Graphic',\n  component: Graphic,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: '\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/',\n      },\n    },\n  },\n  argTypes: {\n    shape: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['square', 'round'],\n      description: '\u5706\u89D2',\n      table: {\n        defaultValue: {\n          summary: 'square',\n        },\n      },\n    },\n  },\n  decorators: [\n    Story => (\n      <div style={{ paddingTop: '2em' }}>\n        <Story />\n      </div>\n    ),\n  ],\n  tags: ['autodocs'],\n} satisfies Meta<typeof Graphic>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n  {\n    imgUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316',\n    title: '<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off',\n  },\n  {\n    imgUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318',\n    title: '<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices',\n    textColor: '#FFF',\n  },\n  {\n    imgUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316',\n    title: '<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off',\n  },\n  {\n    imgUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318',\n    title: '<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices',\n    textColor: '#FFF',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    items: mockItems,\n  },\n}\n\nexport const Round: Story = {\n  args: {\n    items: mockItems,\n    shape: 'round',\n  },\n}\n"],
+  "mappings": "AA+BQ,cAAAA,MAAA,oBA9BR,OAAOC,MAAa,4BAEpB,MAAMC,EAAO,CACX,MAAO,yBACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,mIACb,CACF,CACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,KAAM,cACR,EACA,QAAS,CAAC,SAAU,OAAO,EAC3B,YAAa,eACb,MAAO,CACL,aAAc,CACZ,QAAS,QACX,CACF,CACF,CACF,EACA,WAAY,CACVE,GACEH,EAAC,OAAI,MAAO,CAAE,WAAY,KAAM,EAC9B,SAAAA,EAACG,EAAA,EAAM,EACT,CAEJ,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOC,EAAQF,EAGf,MAAMG,EAAY,CAChB,CACE,OAAQ,2FACR,MAAO,wEACT,EACA,CACE,OAAQ,2FACR,MAAO,yEACP,UAAW,MACb,EACA,CACE,OAAQ,2FACR,MAAO,wEACT,EACA,CACE,OAAQ,2FACR,MAAO,yEACP,UAAW,MACb,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,MAAOD,CACT,CACF,EAEaE,EAAe,CAC1B,KAAM,CACJ,MAAOF,EACP,MAAO,OACT,CACF",
+  "names": ["jsx", "Graphic", "meta", "Story", "graphic_stories_default", "mockItems", "Default", "Round"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.27-alpha.6",
+  "version": "0.0.27-alpha.8",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -65,6 +65,7 @@
     "stylelint": "^16.6.0"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.7",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
@@ -78,7 +79,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-class-names": "^8.5.2",
-    "embla-carousel-react": "^8.5.2",
+    "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "fitty": "^2.4.2",
     "postcss": "^8.4.38",