npm - @anker-in/headless-ui - Versions diffs - 0.0.27-alpha.9 → 0.0.27-alpha.90 - Mend

@anker-in/headless-ui 0.0.27-alpha.9 → 0.0.27-alpha.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (673) hide show

package/README.md CHANGED Viewed

@@ -9,22 +9,49 @@ npm install @anker-in/headless-ui
 ```
-手动在html 标签添加主题名（anker, eufy, soundcore等）, 不同的主题名对应不同的css 变量，如果需要更新
+1. 无头项目修改tailwind.config.ts 配置文件
+```js
+import type { Config } from 'tailwindcss'
++ import headlessUIPreset from '@anker-in/headless-ui/tailwind.config.js'
-```html
-<html data-brand-theme="soundcore"></html>
+export default {
+  + presets: [
+  +  headlessUIPreset, // ❗❗❗重要！使用预设
+  + ],
+  content: [
+   + './node_modules/@anker-in/headless-ui/dist/**/*.js', // ❗❗❗重要！把这些加入content
+  ],
+} satisfies Config
+```
+因为headless-ui 使用纯 ESM 模块, 所以有些非标准第三方ESM模块比如gsap可能会在nextjs 中加载失败，
+需要修改无头项目的next.config.js ，显式声明需要 transpile 的包
+```
+// next.config.js
+module.exports = {
+  transpilePackages: ['@anker-in/headless-ui', 'gsap'],
+}
 ```
-如果是nextjs 项目，在`_document.tsx`文件的html标签添加主题名
-然后就可以项目内引入需要的组件
+2. 添加 design token css 变量文件
+在入口文件 app.js 直接引入 design token css
+```js
+import '@anker-in/headless-ui/tokens/base.css'
+import '@anker-in/headless-ui/tokens/{barnd}.css' // brand 可以是 anker, eufy 等等
+```
+查看所有Token https://headless-ui-doc.netlify.app?path=/docs/design-token--docs
+Tokens 支持覆盖
 ```jsx
-// 在项目入口添加样式文件，比如_app.js
-import '@anker-in/headless-ui/style.css'
 // 使用组件
 import { Button, Skeleton } from '@anker-in/headless-ui'
+import { HeroBanner } from '@anker-in/headless-ui/biz'
 // ...
@@ -36,4 +63,24 @@ import { Button, Skeleton } from '@anker-in/headless-ui'
 </Button>
 <Skeleton className="w-[300px] h-[300px] rounded-full" />
+<HeroBanner data={nammerConfig}>
 ```
+❗❗❗异常处理
+1. 如果出现 `import { XXX } from '@anker-in/headless-ui/biz'`
+typescript 报错的情况，可以把
+```json
+"@anker-in/headless-ui/biz": [
+        "./node_modules/@anker-in/headless-ui/dist/esm/biz-components/index"
+      ],
+```
+添加到tsconfig 配置文件的"paths" 属性。
+这可能是旧版本的`moduleResolution` 不支持

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

@@ -1,25 +1,28 @@
+/** Hook：监听窗口宽度 */
+type ItemType = {
+    /** 标题文本 */
+    title: string;
+    /** 图片*/
+    img: {
+        url: string;
+    };
+    /** 内容节点 */
+    subTitle: string;
+    link?: string;
+};
 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;
-        };
+    data: {
+        key?: string;
+        title?: string;
+        products: Array<ItemType>;
+        /** 按钮形状 */
+        shape?: 'round' | 'square';
+        /** 卡片形状 */
+        itemShape?: 'round' | 'square';
+        /** 主按钮配置 */
+        primaryButton?: string;
     };
 };
-declare const AccordionCards: ({ products, className, shape, itemShape, event, primaryButton, }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionCards: ({ data, className }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
 export default AccordionCards;

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

@@ -1,2 +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;
+"use strict";"use client";var S=Object.create;var u=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var L=(e,s)=>{for(var n in s)u(e,n,{get:s[n],enumerable:!0})},y=(e,s,n,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of M(s))!I.call(e,a)&&a!==n&&u(e,a,{get:()=>s[a],enumerable:!(c=C(s,a))||c.enumerable});return e};var m=(e,s,n)=>(n=e!=null?S(A(e)):{},y(s||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e)),j=e=>y(u({},"__esModule",{value:!0}),e);var P={};L(P,{default:()=>H});module.exports=j(P);var t=require("react/jsx-runtime"),w=m(require("../Title/index.js")),l=require("../../helpers/utils.js"),f=m(require("../../components/picture.js")),F=m(require("../../components/button.js")),g=m(require("../SwiperBox/index.js")),i=require("react");const z=({data:e,className:s=""})=>{const[n,c]=(0,i.useState)(0),[a,k]=(0,i.useState)({0:!0}),v=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),p=(0,i.useRef)(!1),N=(o,r)=>{r&&(v.current[o]=r)},x=o=>{b.current?.[o]&&(p.current=!1,k({[o]:!0}))};(0,i.useEffect)(()=>{const o=v.current;return o?.forEach((r,d)=>{d?(r.style.flex="1 1 0%",r.style.transition="all 0.6s"):(r.style.flex="5 1 0%",r.style.transition="all 0.6s"),r.addEventListener("transitionend",()=>{x(d)})}),()=>{o?.forEach((r,d)=>{r.removeEventListener("transitionend",()=>x(d))})}},[]);const T=({data:o,configuration:r})=>(0,t.jsxs)("div",{className:(0,l.cn)("relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]",r?.itemShape==="round"?"rounded-2xl":""),children:[(0,t.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img?.url}),(0,t.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,t.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"text-2xl font-bold leading-[1.2] text-[#FFFFFF]",children:o?.title}),(0,t.jsx)("h3",{className:"line-clamp-2 text-sm font-semibold text-[#FFFFFF]",children:o?.subTitle})]}),(0,t.jsx)(F.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":""),children:(0,t.jsx)("a",{href:o.link,children:r?.primaryButton})})]})]});return(0,t.jsxs)(t.Fragment,{children:[e?.title&&(0,t.jsx)(w.default,{data:{title:e?.title}}),(0,t.jsx)("div",{className:"laptop:block hidden",children:(0,t.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",s),children:e?.products?.map((o,r)=>{const d=n===r,B=d?5:1,E=a?.[r]&&d;return(0,t.jsxs)("div",{style:{flex:B},ref:h=>{h&&N(r,h)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n===r||p.current||(p.current=!0,b.current={[r]:!0},c(r))},children:[(0,t.jsx)(f.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,t.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",E?"w-full translate-x-0 opacity-100 transition-transform ease-out":"w-0 opacity-0"),children:[(0,t.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:o?.title}),(0,t.jsx)("h3",{className:"desktop:text-lg line-clamp-2 text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,t.jsx)(F.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:(0,t.jsx)("a",{href:o?.link,children:e?.primaryButton})})]})]},r)})})}),(0,t.jsx)("div",{className:"laptop:hidden block",children:(0,t.jsx)(g.default,{className:(0,l.cn)("h-[400px] !overflow-visible",s),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton}},Slide:T,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.2},768:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3}}})})]})};var H=z;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +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"]
+  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\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  }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n  const isAnimation = useRef<boolean>(false)\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    if (enterRef.current?.[index]) {\n      isAnimation.current = false\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style.flex = '5 1 0%'\n        item.style.transition = 'all 0.6s'\n      } else {\n        item.style.flex = '1 1 0%'\n        item.style.transition = 'all 0.6s'\n      }\n      item.addEventListener('transitionend', () => {\n        handleTransitionEnd(index)\n      })\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div\n        className={cn(\n          'relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]',\n          configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n        )}\n      >\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n          <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n            <p className=\"text-2xl font-bold leading-[1.2] text-[#FFFFFF]\">{data?.title}</p>\n            <h3 className=\"line-clamp-2 text-sm font-semibold text-[#FFFFFF]\">{data?.subTitle}</h3>\n          </div>\n          <Button\n            size=\"sm\"\n            hoverEffect=\"slide\"\n            variant=\"secondary\"\n            className={cn(\n              'w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n              configuration?.shape === 'round' ? 'rounded-2xl' : ''\n            )}\n          >\n            <a href={data.link}>{configuration?.primaryButton}</a>\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div className=\"laptop:block hidden\">\n        <div\n          className={cn(\n            'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n            className\n          )}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 5 : 1\n            const isShowContent = currentWidth?.[idx] && isExpanded\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onClick={() => {\n                  if (hoverIndex === idx || isAnimation.current) return\n                  isAnimation.current = true\n                  // \u66F4\u65B0 ref \u72B6\u6001\n                  enterRef.current = { [idx]: true }\n                  // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n                  setHoverIndex(idx)\n                }}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                <div\n                  className={cn(\n                    'absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n                    isShowContent ? 'w-full translate-x-0 opacity-100 transition-transform ease-out' : 'w-0 opacity-0'\n                  )}\n                >\n                  <div className=\"mr-16 flex-1 overflow-hidden\">\n                    <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n                      {item?.title}\n                    </p>\n                    <h3 className=\"desktop:text-lg line-clamp-2 text-sm font-medium text-[#FFFFFF]\">\n                      {item?.subTitle}\n                    </h3>\n                  </div>\n                  <Button\n                    size=\"sm\"\n                    hoverEffect=\"slide\"\n                    variant=\"secondary\"\n                    className={cn(\n                      'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n                      data?.shape === 'round' ? 'rounded-2xl' : ''\n                    )}\n                  >\n                    <a href={item?.link}>{data?.primaryButton}</a>\n                  </Button>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className=\"laptop:hidden block\">\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              itemShape: data?.itemShape,\n              primaryButton: data?.primaryButton,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 1.2,\n            },\n            768: {\n              spaceBetween: '12px',\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default AccordionCards\n"],
+  "mappings": "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",
+  "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_react", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "Picture", "Button", "Title", "idx", "isExpanded", "flexValue", "isShowContent", "SwiperBox"]
 }

package/dist/cjs/biz-components/BrandEquity/BrandEquity.d.ts CHANGED Viewed

@@ -1,19 +1,9 @@
-import React from 'react';
-import type { ComponentCommonProps } from '../../types/props.js';
-export interface BrandEquityItem {
-    icon?: React.ReactNode;
-    title: string;
-    description: string;
-    avatarList?: string[];
-}
-export interface BrandEquityProps extends ComponentCommonProps {
-    items: BrandEquityItem[];
-    itemShape?: 'round' | 'square';
-    className?: string;
-    theme?: 'light' | 'dark';
-}
+import type { BrandEquityProps } from './types.js';
 declare const _default: {
-    (props: Omit<BrandEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>): import("react/jsx-runtime").JSX.Element;
+    (props: Omit<BrandEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/cjs/biz-components/BrandEquity/BrandEquity.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var s in t)i(e,s,{get:t[s],enumerable:!0})},n=(e,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!b.call(e,o)&&o!==s&&i(e,o,{get:()=>t[o],enumerable:!(r=u(t,o))||r.enumerable});return e};var N=(e,t,s)=>(s=e!=null?g(v(e)):{},n(t||!e||!e.__esModule?i(s,"default",{value:e,enumerable:!0}):s,e)),h=e=>n(i({},"__esModule",{value:!0}),e);var w={};y(w,{default:()=>q});module.exports=h(w);var a=require("react/jsx-runtime"),D=require("react"),p=require("../../helpers/utils"),d=N(require("../../components/picture")),c=require("../../shared/Styles.js");const k=({items:e=[],itemShape:t="square",style:s="",className:r=""})=>(0,a.jsx)("div",{className:(0,p.cn)("brand-equity-wrapper w-full bg-[#F7F8F9]",r),children:(0,a.jsx)("div",{className:(0,p.cn)("grid gap-3 px-4","grid-cols-1 tablet:px-8 tablet:grid-cols-2","laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10","desktop:px-[175px] lg-desktop:px-[268px]"),children:e.map((o,l)=>(0,a.jsxs)("div",{className:(0,p.cn)("brand-equity-item","bg-white p-4 flex flex-col","desktop:p-6","gap-12 desktop:gap-16","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(l)},t==="round"?"rounded-[16px]":"rounded-none"),children:[(0,a.jsxs)("div",{className:"flex justify-between items-center gap-3",children:[(0,a.jsx)("h3",{className:"text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] 2xl:text-lg",children:o.title}),o.avatarList?.length?(0,a.jsx)("div",{className:"flex -space-x-2",children:o.avatarList.map((m,x)=>(0,a.jsx)("div",{className:(0,p.cn)("size-[30px] rounded-full border-2 border-white overflow-hidden","relative inline-block","lg-desktop:size-[36px]"),children:(0,a.jsx)(d.default,{source:m,className:"w-full h-full object-cover"})},x))}):(0,a.jsx)("span",{className:"text-[#1D1D1F]",children:o.icon})]}),(0,a.jsx)("p",{className:"font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] 2xl:text-2xl",children:o.description})]},l))})});var q=(0,c.withStyles)(k);
+"use strict";"use client";var u=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var l in t)r(e,l,{get:t[l],enumerable:!0})},c=(e,t,l,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of v(t))!f.call(e,p)&&p!==l&&r(e,p,{get:()=>t[p],enumerable:!(o=g(t,p))||o.enumerable});return e};var y=(e,t,l)=>(l=e!=null?u(x(e)):{},c(t||!e||!e.__esModule?r(l,"default",{value:e,enumerable:!0}):l,e)),k=e=>c(r({},"__esModule",{value:!0}),e);var w={};b(w,{default:()=>h});module.exports=k(w);var a=require("react/jsx-runtime"),q=require("react"),s=require("../../helpers/utils.js"),i=y(require("../../components/picture.js")),n=require("../../shared/Styles.js");const N=({data:{items:e=[],itemShape:t},className:l})=>(0,a.jsx)("div",{className:(0,s.cn)("brand-equity-wrapper w-full",l),children:(0,a.jsx)("div",{className:(0,s.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((o,p)=>(0,a.jsxs)("div",{className:(0,s.cn)("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(p)},t==="round"?"rounded-2xl":"rounded-none"),children:[(0,a.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,a.jsx)("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:o.title}),o.type==="avatar"?(0,a.jsx)("div",{className:"flex -space-x-2",children:o?.avatarList?.map((d,m)=>(0,a.jsx)("div",{className:(0,s.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,a.jsx)(i.default,{source:d.avatar.url,alt:d.avatar?.alt,className:"size-full object-cover"})},m))}):(0,a.jsx)(i.default,{className:"lg-desktop:size-[36px] size-[30px] object-cover",source:o.icon?.url,alt:o.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),(0,a.jsx)("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:o.description})]},p))})});var h=(0,n.withStyles)(N);
 //# sourceMappingURL=BrandEquity.js.map

package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
-  "sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n  icon?: React.ReactNode\n  title: string\n  description: string\n  avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n  items: BrandEquityItem[]\n  itemShape?: 'round' | 'square'\n  className?: string\n  theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', style = '', className = '' }) => {\n  return (\n    <div className={cn('brand-equity-wrapper w-full bg-[#F7F8F9]', className)}>\n      <div\n        className={cn(\n          'grid gap-3 px-4',\n          'grid-cols-1 tablet:px-8 tablet:grid-cols-2',\n          'laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10',\n          'desktop:px-[175px] lg-desktop:px-[268px]'\n        )}\n      >\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'brand-equity-item',\n              'bg-white p-4 flex flex-col',\n              'desktop:p-6',\n              'gap-12 desktop:gap-16',\n              'laptop:col-span-3',\n              {\n                ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n              },\n              itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n            )}\n          >\n            <div className=\"flex justify-between items-center gap-3\">\n              <h3 className=\"text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] 2xl:text-lg\">\n                {item.title}\n              </h3>\n              {item.avatarList?.length ? (\n                <div className=\"flex -space-x-2\">\n                  {item.avatarList.map((avatarUrl: string, index: number) => (\n                    <div\n                      key={index}\n                      className={cn(\n                        'size-[30px] rounded-full border-2 border-white overflow-hidden',\n                        'relative inline-block',\n                        'lg-desktop:size-[36px]'\n                      )}\n                    >\n                      <Picture source={avatarUrl} className=\"w-full h-full object-cover\" />\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n              )}\n            </div>\n            <p className=\"font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] 2xl:text-2xl\">\n              {item.description}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(BrandEquity)\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+CY,IAAAI,EAAA,6BA/CZC,EAAkB,iBAElBC,EAAmB,+BACnBC,EAAoB,uCACpBC,EAA2B,kCAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,MAAAC,EAAQ,GAAI,UAAAC,EAAY,EAAG,OAE5G,OAAC,OAAI,aAAW,MAAG,2CAA4CA,CAAS,EACtE,mBAAC,OACC,aAAW,MACT,kBACA,6CACA,qDACA,0CACF,EAEC,SAAAH,EAAM,IAAI,CAACI,EAAMC,OAChB,QAAC,OAEC,aAAW,MACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASA,CAAK,CACrD,EACAJ,IAAc,QAAU,iBAAmB,cAC7C,EAEA,qBAAC,OAAI,UAAU,0CACb,oBAAC,MAAG,UAAU,oFACX,SAAAG,EAAK,MACR,EACCA,EAAK,YAAY,UAChB,OAAC,OAAI,UAAU,kBACZ,SAAAA,EAAK,WAAW,IAAI,CAACE,EAAmBD,OACvC,OAAC,OAEC,aAAW,MACT,iEACA,wBACA,wBACF,EAEA,mBAAC,EAAAE,QAAA,CAAQ,OAAQD,EAAW,UAAU,6BAA6B,GAP9DD,CAQP,CACD,EACH,KAEA,OAAC,QAAK,UAAU,iBAAkB,SAAAD,EAAK,KAAK,GAEhD,KACA,OAAC,KAAE,UAAU,iFACV,SAAAA,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOb,KAAQ,cAAWO,CAAW",
-  "names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "style", "className", "item", "index", "avatarUrl", "Picture"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ data: { items = [], itemShape }, className }) => {\n  return (\n    <div className={cn('brand-equity-wrapper w-full', className)}>\n      <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'brand-equity-item',\n              'flex flex-col bg-white p-4',\n              'desktop:p-6 desktop:gap-16 gap-12',\n              'laptop:col-span-3 lg-desktop:p-8',\n              {\n                ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n              },\n              itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n                {item.title}\n              </h3>\n              {item.type === 'avatar' ? (\n                <div className=\"flex -space-x-2\">\n                  {item?.avatarList?.map((item: { avatar: Img }, index: number) => (\n                    <div\n                      key={index}\n                      className={cn(\n                        'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                        'relative inline-block',\n                        'lg-desktop:size-[36px]'\n                      )}\n                    >\n                      <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <Picture\n                  className=\"lg-desktop:size-[36px] size-[30px] object-cover\"\n                  source={item.icon?.url}\n                  alt={item.icon?.alt}\n                  imgClassName=\"w-full h-full object-cover\"\n                />\n              )}\n            </div>\n            <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n              {item.description}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(BrandEquity)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4BY,IAAAI,EAAA,6BA3BZC,EAAkB,iBAElBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAK3B,MAAMC,EAA0C,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,CAAU,EAAG,UAAAC,CAAU,OAE1F,OAAC,OAAI,aAAW,MAAG,8BAA+BA,CAAS,EACzD,mBAAC,OAAI,aAAW,MAAG,yBAA0B,qBAAsB,kCAAkC,EAClG,SAAAF,EAAM,IAAI,CAACG,EAAMC,OAChB,QAAC,OAEC,aAAW,MACT,oBACA,6BACA,oCACA,mCACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASA,CAAK,CACrD,EACAH,IAAc,QAAU,cAAgB,cAC1C,EAEA,qBAAC,OAAI,UAAU,uEACb,oBAAC,MAAG,UAAU,mGACX,SAAAE,EAAK,MACR,EACCA,EAAK,OAAS,YACb,OAAC,OAAI,UAAU,kBACZ,SAAAA,GAAM,YAAY,IAAI,CAACA,EAAuBC,OAC7C,OAAC,OAEC,aAAW,MACT,iEACA,wBACA,wBACF,EAEA,mBAAC,EAAAC,QAAA,CAAQ,OAAQF,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFC,CAQP,CACD,EACH,KAEA,OAAC,EAAAC,QAAA,CACC,UAAU,kDACV,OAAQF,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,KACA,OAAC,KAAE,UAAU,+FACV,SAAAA,EAAK,YACR,IA1CKC,CA2CP,CACD,EACH,EACF,EAIJ,IAAOZ,KAAQ,cAAWO,CAAW",
+  "names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "className", "item", "index", "Picture"]
 }

package/dist/cjs/biz-components/BrandEquity/types.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { ComponentCommonProps, Img } from '../../types/props.js';
+export interface BrandEquityItem {
+    icon?: Img;
+    type?: 'icon' | 'avatar';
+    title: string;
+    description: string;
+    avatarList?: {
+        avatar: Img;
+    }[];
+}
+export interface BrandEquityProps extends ComponentCommonProps {
+    data: {
+        items: BrandEquityItem[];
+        itemShape?: 'round' | 'square';
+    };
+    className?: string;
+}

package/dist/cjs/biz-components/BrandEquity/types.js ADDED Viewed

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

package/dist/cjs/biz-components/BrandEquity/types.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/BrandEquity/types.ts"],
+  "sourcesContent": ["import type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n  icon?: Img\n  type?: 'icon' | 'avatar'\n  title: string\n  description: string\n  avatarList?: {\n    avatar: Img\n  }[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n  data: {\n    items: BrandEquityItem[]\n    itemShape?: 'round' | 'square'\n  }\n  className?: string\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dist/cjs/biz-components/Category/SwiperCategory.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface SwiperBoxProps {
+    data: {
+        list: any[];
+        configuration?: any;
+    };
+    id: string;
+    className?: string;
+    breakpoints?: Record<number, Object>;
+    Slide: React.ComponentType<{
+        data: any;
+        configuration?: any;
+    }>;
+}
+declare const SwiperBox: React.ForwardRefExoticComponent<SwiperBoxProps & React.RefAttributes<HTMLDivElement>>;
+export default SwiperBox;

package/dist/cjs/biz-components/Category/SwiperCategory.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";"use client";var w=Object.create;var t=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var B=(e,i)=>{for(var r in i)t(e,r,{get:i[r],enumerable:!0})},l=(e,i,r,a)=>{if(i&&typeof i=="object"\|\|typeof i=="function")for(let o of m(i))!S.call(e,o)&&o!==r&&t(e,o,{get:()=>i[o],enumerable:!(a=c(i,o))\|\|a.enumerable});return e};var M=(e,i,r)=>(r=e!=null?w(u(e)):{},l(i\|\|!e\|\|!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),g=e=>l(t({},"__esModule",{value:!0}),e);var P={};B(P,{default:()=>y});module.exports=g(P);var n=require("react/jsx-runtime"),d=M(require("react")),b=require("../../helpers/utils.js"),p=require("swiper/react"),s=require("swiper/modules");const f=d.default.forwardRef(({data:e,Slide:i,id:r})=>(0,n.jsx)(p.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},className:"!overflow-visible",modules:[s.FreeMode,s.Mousewheel,s.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:6}},children:e?.list?.map((a,o)=>(0,n.jsx)(p.SwiperSlide,{className:"!h-[unset]",children:(0,n.jsx)(i,{data:a,configuration:e?.configuration})},r+"SwiperSlide"+o))}));f.displayName="SwiperBox";var y=f;
2	+ //# sourceMappingURL=SwiperCategory.js.map

package/dist/cjs/biz-components/Category/SwiperCategory.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n  }\n  id: string\n  className?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id }) => {\n  return (\n    <Swiper\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      className=\"!overflow-visible\"\n      modules={[FreeMode, Mousewheel, Pagination]}\n      breakpoints={{\n        0: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n        },\n        376: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n        },\n        767: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 4,\n        },\n        1441: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 6,\n        },\n      }}\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n          <Slide data={item} configuration={data?.configuration} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDU,IAAAI,EAAA,6BAlDVC,EAAkB,oBAClBC,EAAmB,kCACnBD,EAAoC,wBACpCE,EAAiD,0BAajD,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,GAAAC,CAAG,OAElF,OAAC,UACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,UAAU,oBACV,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EAEC,SAAAF,GAAM,MAAM,IAAI,CAACG,EAAMC,OACtB,OAAC,eAA8C,UAAU,aACvD,mBAACH,EAAA,CAAM,KAAME,EAAM,cAAeH,GAAM,cAAe,GADvCE,EAAK,cAAgBE,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAON,EAAQM",
+  "names": ["SwiperCategory_exports", "__export", "SwiperCategory_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_modules", "SwiperBox", "React", "data", "Slide", "id", "item", "jIndex"]
+}

package/dist/cjs/biz-components/Category/index.d.ts CHANGED Viewed

@@ -1,16 +1,31 @@
-import React from 'react';
 export interface CategoryItem {
     /** 产品图片*/
-    img: string;
-    title: string;
+    image: any;
+    name: string;
 }
 export interface CategoryProps {
-    products: CategoryItem[];
     className?: string;
     /** 主题色*/
     theme?: 'light' | 'dark';
-    /** 卡片形状 */
-    shape?: 'round' | 'square';
+    data: {
+        isShowSelect: boolean;
+        products: CategoryItem[];
+        productData: CategoryItem[];
+        /** 卡片形状 */
+        shape?: 'round' | 'square';
+        title?: string;
+    };
+    buildData?: {
+        categories: any[];
+        products: any[];
+    };
+    key?: string;
 }
-declare const Category: React.FC<CategoryProps>;
-export default Category;
+declare const _default: {
+    (props: Omit<CategoryProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;

package/dist/cjs/biz-components/Category/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var m=Object.create;var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,o)=>{for(var r in o)s(e,r,{get:o[r],enumerable:!0})},d=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of x(o))!f.call(e,a)&&a!==r&&s(e,a,{get:()=>o[a],enumerable:!(p=n(o,a))||p.enumerable});return e};var u=(e,o,r)=>(r=e!=null?m(c(e)):{},d(o||!e||!e.__esModule?s(r,"default",{value:e,enumerable:!0}):r,e)),v=e=>d(s({},"__esModule",{value:!0}),e);var C={};g(C,{default:()=>y});module.exports=v(C);var t=require("react/jsx-runtime"),h=require("react"),l=require("../../helpers/utils"),i=u(require("../../components/picture"));const w=({className:e="",shape:o="square",products:r=[]})=>(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("div",{className:(0,l.cn)("w-full",e),children:(0,t.jsx)("div",{className:(0,l.cn)("flex overflow-hidden"),children:(0,t.jsx)("div",{className:(0,l.cn)("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:r?.map((p,a)=>(0,t.jsxs)("div",{className:(0,l.cn)("bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden","laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8",o==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)(i.default,{className:"w-full object-cover",source:p?.img}),(0,t.jsx)("p",{className:"flex-1 text-sm text-center font-semibold desktop:text-lg",children:p?.title})]},a))})})})});var y=w;
+"use strict";"use client";var f=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(e,o)=>{for(var r in o)s(e,r,{get:o[r],enumerable:!0})},d=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of h(o))!v.call(e,i)&&i!==r&&s(e,i,{get:()=>o[i],enumerable:!(a=b(o,i))||a.enumerable});return e};var c=(e,o,r)=>(r=e!=null?f(x(e)):{},d(o||!e||!e.__esModule?s(r,"default",{value:e,enumerable:!0}):r,e)),C=e=>d(s({},"__esModule",{value:!0}),e);var A={};y(A,{default:()=>_});module.exports=C(A);var t=require("react/jsx-runtime"),D=require("react"),n=require("../../helpers/utils.js"),l=c(require("../../components/picture.js")),u=require("../../shared/Styles.js"),p=c(require("../Title/index.js")),m=c(require("./SwiperCategory.js"));const F=(e,o)=>{const r=[];for(let a=0;a<e.length;a+=o)r.push(e.slice(a,a+o));return r},N=({data:e,configuration:o})=>(0,t.jsxs)("div",{className:(0,n.cn)("group box-border flex size-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,t.jsx)(l.default,{source:e?.image?.url||e?.image,className:"laptop:size-[146px] m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})}),(0,t.jsx)("p",{className:"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold",children:e?.name})]}),w=({data:e,configuration:o})=>(0,t.jsxs)("div",{className:(0,n.cn)("box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]","cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)(l.default,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image}),(0,t.jsx)("p",{className:"flex-1 truncate text-center text-sm font-semibold",children:e?.name})]},`${e?.name}`),k=({data:e,configuration:o})=>(0,t.jsxs)("div",{className:(0,n.cn)("aspect-h-[240] group box-border h-auto flex-1 shrink-0 overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,t.jsx)(l.default,{className:"laptop:size-[146px] m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),(0,t.jsx)("p",{className:"tablet:text-lg text-center text-sm font-semibold",children:e?.name})]}),I=({data:e,configuration:o,index:r})=>(0,t.jsxs)("div",{className:(0,n.cn)("box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]","cursor-pointer p-4 hover:bg-[#FFFFFF]",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)(l.default,{className:(0,n.cn)("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"),source:e?.image?.url||e?.image}),(0,t.jsx)("p",{className:"line-clamp-2 text-center text-sm font-semibold",children:e?.name})]}),S=({data:e,configuration:o})=>(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>(0,t.jsx)(w,{data:r,configuration:o},a))}),j=({data:e,configuration:o})=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"mx-auto flex w-full gap-4",children:e?.map((r,a)=>(0,t.jsx)(k,{data:r,configuration:o},a))})}),(0,t.jsx)("div",{className:"tablet:hidden block",children:(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>(0,t.jsx)(I,{index:a,data:r,configuration:o},a))})})]}),E=({data:e,buildData:o,className:r="",key:a})=>{const i=e?.isShowSelect?e?.products:e?.productData,g=i?.length<=5;return(0,t.jsxs)("div",{className:(0,n.cn)("w-full",r),children:[e?.title&&(0,t.jsx)(p.default,{data:{title:e?.title}}),g?(0,t.jsx)(j,{data:i,configuration:{shape:e?.shape}}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(m.default,{id:`Category${a}`,Slide:N,data:{list:i,configuration:{shape:e?.shape}}})}),(0,t.jsx)("div",{className:"tablet:hidden block overflow-hidden",children:(0,t.jsx)(m.default,{id:`Category1${a}`,Slide:S,data:{list:F(i,6),configuration:{shape:e?.shape}}})})]})]})};var _=(0,u.withStyles)(E);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Category/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: string\n  title: string\n}\n\nexport interface CategoryProps {\n  products: CategoryItem[]\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  /** \u5361\u7247\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n}\n\nconst Category: React.FC<CategoryProps> = ({\n  className = '',\n  shape = 'square',\n  products = [],\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-[167px] max-w-[167px] box-border overflow-hidden',\n                    'laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8',\n                    shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n                  )}\n                >\n                  <Picture\n                    className=\"w-full object-cover\"\n                    source={item?.img}\n                  />\n                  <p className=\"flex-1 text-sm text-center font-semibold desktop:text-lg\">\n                    {item?.title}\n                  </p>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Category\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyBI,IAAAI,EAAA,6BAzBJC,EAAkB,iBAClBC,EAAmB,+BACnBC,EAAoB,uCAiBpB,MAAMC,EAAoC,CAAC,CACzC,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,SAAAC,EAAW,CAAC,CACd,OAEI,mBACE,mBAAC,OAAI,aAAW,MAAG,SAAUF,CAAS,EACpC,mBAAC,OAAI,aAAW,MAAG,sBAAsB,EACvC,mBAAC,OAAI,aAAW,MAAG,cAAe,sDAAsD,EACrF,SAAAE,GAAU,IAAI,CAACC,EAAMC,OAElB,QAAC,OAEC,aAAW,MACT,wFACA,+GACAH,IAAU,QAAU,iBAAmB,cACzC,EAEA,oBAAC,EAAAI,QAAA,CACC,UAAU,sBACV,OAAQF,GAAM,IAChB,KACA,OAAC,KAAE,UAAU,2DACV,SAAAA,GAAM,MACT,IAbKC,CAcP,CAEH,EACH,EACF,EACF,EACF,EAIJ,IAAOX,EAAQM",
-  "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "Category", "className", "shape", "products", "item", "index", "Picture"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: any\n  name: string\n}\n\nexport interface CategoryProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  data: {\n    isShowSelect: boolean\n    products: CategoryItem[]\n    productData: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'group box-border flex size-full flex-col overflow-hidden bg-[#EAEAEC]',\n        'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className=\"transition-all duration-300 group-hover:scale-110\">\n        <Picture\n          source={data?.image?.url || data?.image}\n          className=\"laptop:size-[146px] m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n        />\n      </div>\n      <p className=\"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n    </div>\n  )\n}\n\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  return (\n    <div\n      key={`${data?.name}`}\n      className={cn(\n        'box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]',\n        'cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <Picture\n        className=\"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n        source={data?.image?.url || data?.image}\n      />\n      <p className=\"flex-1 truncate text-center text-sm font-semibold\">{data?.name}</p>\n    </div>\n  )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'aspect-h-[240] group box-border h-auto flex-1 shrink-0 overflow-hidden bg-[#EAEAEC]',\n        'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className=\"transition-all duration-300 group-hover:scale-110\">\n        <Picture\n          className=\"laptop:size-[146px] m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n          source={data?.image?.url || data?.image}\n        />\n      </div>\n      <p className=\"tablet:text-lg text-center text-sm font-semibold\">{data?.name}</p>\n    </div>\n  )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n  data,\n  configuration,\n  index,\n}: {\n  data: CategoryItem\n  configuration?: any\n  index: number\n}) => {\n  return (\n    <div\n      className={cn(\n        'box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]',\n        'cursor-pointer p-4 hover:bg-[#FFFFFF]',\n        index === 0 ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <Picture\n        className={cn(\n          'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n          index === 0 ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]'\n        )}\n        source={data?.image?.url || data?.image}\n      />\n      <p className=\"line-clamp-2 text-center text-sm font-semibold\">{data?.name}</p>\n    </div>\n  )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n  return (\n    <div className=\"grid grid-cols-2 gap-3\">\n      {data?.map((item, index) => {\n        return <SingleItem key={index} data={item} configuration={configuration} />\n      })}\n    </div>\n  )\n}\n\n// soundcore\u5C55\u793A\nconst SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n  return (\n    <>\n      <div className=\"tablet:block hidden\">\n        <div className=\"mx-auto flex w-full gap-4\">\n          {data?.map((item, index) => {\n            return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n          })}\n        </div>\n      </div>\n      <div className=\"tablet:hidden block\">\n        <div className=\"grid grid-cols-2 gap-3\">\n          {data?.map((item, index) => {\n            return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n          })}\n        </div>\n      </div>\n    </>\n  )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n  // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n  const currentData = data?.isShowSelect ? data?.products : data?.productData\n  const isSoundCore = currentData?.length <= 5\n  return (\n    <div className={cn('w-full', className)}>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      {isSoundCore ? (\n        <SoundCoreCategoryItem data={currentData} configuration={{ shape: data?.shape }} />\n      ) : (\n        <>\n          <div className=\"tablet:block hidden\">\n            <SwiperBox\n              id={`Category${key}`}\n              Slide={CategoryPcItem}\n              data={{ list: currentData, configuration: { shape: data?.shape } }}\n            />\n          </div>\n          <div className=\"tablet:hidden block overflow-hidden\">\n            <SwiperBox\n              id={`Category1${key}`}\n              Slide={CategoryMobileItem}\n              data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape } }}\n            />\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default withStyles(Category)\n"],
+  "mappings": "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",
+  "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "Picture", "SingleItem", "SinglePcCategoryItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "SoundCoreCategoryItem", "Category", "buildData", "className", "key", "currentData", "isSoundCore", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/Evaluate/index.d.ts CHANGED Viewed

@@ -1,20 +1,33 @@
-import React from 'react';
 export interface EvaluateItem {
     /** 产品图片*/
-    img: string;
+    img: {
+        url: string;
+    };
     title: string;
     subTitle: string;
     description: string;
-    avatar?: string;
+    avatar?: {
+        url: string;
+    };
     rating: number;
 }
 export interface EvaluateProps {
-    products: EvaluateItem[];
     className?: string;
     /** 主题色*/
     theme?: 'light' | 'dark';
-    /** 形状 */
-    shape?: 'round' | 'square';
+    data: {
+        title?: string;
+        products: EvaluateItem[];
+        /** 形状 */
+        shape?: 'round' | 'square';
+    };
+    key?: string;
 }
-declare const Evaluate: React.FC<EvaluateProps>;
-export default Evaluate;
+declare const _default: {
+    (props: Omit<EvaluateProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;

package/dist/cjs/biz-components/Evaluate/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var c=Object.create;var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(t,l)=>{for(var s in l)d(t,s,{get:l[s],enumerable:!0})},p=(t,l,s,i)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of x(l))!w.call(t,a)&&a!==s&&d(t,a,{get:()=>l[a],enumerable:!(i=f(l,a))||i.enumerable});return t};var b=(t,l,s)=>(s=t!=null?c(u(t)):{},p(l||!t||!t.__esModule?d(s,"default",{value:t,enumerable:!0}):s,t)),N=t=>p(d({},"__esModule",{value:!0}),t);var C={};g(C,{default:()=>k});module.exports=N(C);var e=require("react/jsx-runtime"),E=require("react"),r=require("../../helpers/utils"),n=b(require("../../components/picture")),o=require("../../components/avatar");const h=({className:t="",shape:l="square",products:s=[]})=>{const i=a=>a?Array.from(new Array(Number(a)))||[]:[];return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:(0,r.cn)("w-full",t),children:(0,e.jsx)("div",{className:(0,r.cn)("flex overflow-hidden"),children:(0,e.jsx)("div",{className:(0,r.cn)("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:s?.map((a,m)=>(0,e.jsxs)("div",{className:(0,r.cn)("bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden","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",l==="round"?"rounded-2xl":"rounded-none"),children:[(0,e.jsxs)("div",{className:(0,r.cn)("mb-8 w-full flex justify-between laptop:mb-11 desktop:mb-16"),children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("h4",{className:"text-sm font-semibold laptop:text-lg",children:a?.title}),(0,e.jsx)("div",{className:"mt-1 flex items-center",children:i(a?.rating)?.map?.((L,v)=>(0,e.jsx)("div",{className:"mr-1",children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,e.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},v))})]}),(0,e.jsx)("div",{className:"size-10 overflow-hidden desktop:size-12",children:(0,e.jsxs)(o.Avatar,{className:"w-full h-full",children:[(0,e.jsx)(o.AvatarImage,{src:a?.avatar}),(0,e.jsx)(o.AvatarFallback,{children:a?.title})]})})]}),(0,e.jsx)("p",{className:"flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] desktop:text-2xl",children:a?.description||""}),(0,e.jsxs)("div",{className:(0,r.cn)("mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden",l==="round"?"rounded-[8px]":"rounded-none"),children:[(0,e.jsx)("div",{className:"flex items-center mr-3 size-12 laptop:size-16 desktop:size-20",children:(0,e.jsx)(n.default,{className:"w-full object-cover",source:a?.img})}),(0,e.jsx)("p",{className:"flex-1 text-sm font-semibold line-clamp-2 desktop:text-lg",children:a?.subTitle||""})]})]},m))})})})})};var k=h;
+"use strict";"use client";var g=Object.create;var n=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var N=(e,r)=>{for(var l in r)n(e,l,{get:r[l],enumerable:!0})},m=(e,r,l,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of x(r))!h.call(e,s)&&s!==l&&n(e,s,{get:()=>r[s],enumerable:!(a=w(r,s))||a.enumerable});return e};var d=(e,r,l)=>(l=e!=null?g(b(e)):{},m(r||!e||!e.__esModule?n(l,"default",{value:e,enumerable:!0}):l,e)),F=e=>m(n({},"__esModule",{value:!0}),e);var A={};N(A,{default:()=>E});module.exports=F(A);var t=require("react/jsx-runtime"),P=require("react"),p=d(require("../Title/index.js")),o=require("../../helpers/utils.js"),c=d(require("../../components/picture.js")),f=d(require("../SwiperBox/index.js")),v=require("../../shared/Styles.js"),i=require("../../components/avatar.js");const k=({data:e,configuration:r})=>{const l=a=>a?Array.from(new Array(Number(a)))||[]:[];return(0,t.jsxs)("div",{className:(0,o.cn)("box-border flex w-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":"rounded-none","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]"),children:[(0,t.jsxs)("div",{className:(0,o.cn)("laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}),(0,t.jsx)("div",{className:"mt-1 flex items-center",children:l(e?.rating)?.map?.((a,s)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},s))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:(0,t.jsx)(i.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:e?.avatar?.url?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(i.AvatarFallback,{children:e?.title})]}):e?.title})})]}),(0,t.jsx)("p",{className:"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.description||""}),(0,t.jsxs)("div",{className:(0,o.cn)("mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(c.default,{className:"w-full object-cover",source:e?.img?.url})}),(0,t.jsx)("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:e?.subTitle||""})]})]})},C=({className:e="",data:r,key:l})=>{const{products:a,title:s,...u}=r;return(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)("div",{className:(0,o.cn)("w-full",e),children:[s&&(0,t.jsx)(p.default,{data:{title:s}}),(0,t.jsx)(f.default,{className:"!overflow-visible",id:"Evaluate"+l,data:{list:a,configuration:{...u}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})};var E=(0,v.withStyles)(C);
 //# sourceMappingURL=index.js.map