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

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

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

Files changed (63) hide show

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/types.ts"],
-  "sourcesContent": ["import type { Theme } from '../../types/props.js'\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface SloganProps {\n  GSAP: any\n  data: {\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title: string\n    /**\n     * \u7279\u6027\u5206\u7EC4\u5927\u5C0F \u9ED8\u8BA4\u4E3A3\n     */\n    featureChunkSize?: number\n    /**\n     * \u7279\u6027\u5217\u8868\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\n     */\n    theme?: Theme\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Theme } from '../../types/props.js'\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface SloganProps {\n  GSAP?: any\n  data: {\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title: string\n    /**\n     * \u7279\u6027\u5206\u7EC4\u5927\u5C0F \u9ED8\u8BA4\u4E3A3\n     */\n    featureChunkSize?: number\n    /**\n     * \u7279\u6027\u5217\u8868\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\n     */\n    theme?: Theme\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Tabs/types.ts"],
-  "sourcesContent": ["import type { Align, Shape, Theme } from '../../types/props.js'\nimport type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js'\nimport type { ShelfDisplayProps } from '../ShelfDisplay/index.js'\n\nexport type TabsProps = {\n  GSAP: any\n  data: {\n    sectionTitle?: string\n    theme: Theme\n    shape: Shape\n    align: Align\n    tabs: {\n      tabName: string\n      tabContent:\n        | (ShelfDisplayProps['data'] & { blockType: 'ipc-shelfdisplay' })[]\n        | (MultiLayoutGraphicBlockProps['data'] & { blockType: 'ipc-multiLayoutGraphicBlock' })[]\n    }[]\n  }\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Align, Shape, Theme } from '../../types/props.js'\nimport type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js'\nimport type { ShelfDisplayProps } from '../ShelfDisplay/index.js'\n\nexport type TabsProps = {\n  GSAP?: any\n  data: {\n    sectionTitle?: string\n    theme: Theme\n    shape: Shape\n    align: Align\n    tabs: {\n      tabName: string\n      tabContent:\n        | (ShelfDisplayProps['data'] & { blockType: 'ipc-shelfdisplay' })[]\n        | (MultiLayoutGraphicBlockProps['data'] & { blockType: 'ipc-multiLayoutGraphicBlock' })[]\n    }[]\n  }\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var a=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},y=(t,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of z(e))!D.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(n=N(e,o))||n.enumerable});return t};var I=(t,e,r)=>(r=t!=null?L(C(t)):{},y(e||!t||!t.__esModule?a(r,"default",{value:t,enumerable:!0}):r,t)),U=t=>y(a({},"__esModule",{value:!0}),t);var j={};G(j,{default:()=>$});module.exports=U(j);var u=require("react/jsx-runtime"),l=I(require("react")),b=require("../../helpers/utils.js"),w=require("../../components/index.js"),x=require("../../shared/Styles.js");const T=l.default.forwardRef(({data:t,className:e,GSAP:r})=>{const{title:n,theme:o}=t,{gsap:d,ScrollTrigger:f,SplitText:v,useGSAP:H}=r,s=(0,l.useRef)(null),i=(0,l.useRef)(null);return H(()=>{if(!s.current)return;const S=s.current?.clientHeight||80;i.current=new v(s.current,{type:"words",wordsClass:"word"});const c=i.current.words;return d.set(c,{opacity:0}),f.create({trigger:s.current,start:"bottom bottom-=10%",end:`bottom+=${S*2+40}px bottom-=10%`,scrub:!0,onUpdate:p=>{const k=p.progress,g=c.length,E=1/g,h=.5;c.forEach((M,R)=>{const P=R/g*(1-h),A=E*(1+h);let m=(k-P)/A;m=Math.max(0,Math.min(m,1)),d.set(M,{opacity:m})})}}),()=>{i.current&&i.current.revert(),f.getAll().forEach(p=>p.kill())}},[]),n&&(0,u.jsx)("div",{className:(0,b.cn)("tablet:mb-[32px] mb-[24px] space-y-4",e,{"aiui-dark":o==="dark"}),children:(0,u.jsx)(w.Heading,{ref:s,as:"h2",size:5,html:n})})});T.displayName="Title";var $=(0,x.withStyles)(T);
+"use strict";"use client";var G=Object.create;var a=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var e in r)a(t,e,{get:r[e],enumerable:!0})},y=(t,r,e,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of N(r))!C.call(t,o)&&o!==e&&a(t,o,{get:()=>r[o],enumerable:!(n=L(r,o))||n.enumerable});return t};var I=(t,r,e)=>(e=t!=null?G(z(t)):{},y(r||!t||!t.__esModule?a(e,"default",{value:t,enumerable:!0}):e,t)),U=t=>y(a({},"__esModule",{value:!0}),t);var j={};D(j,{default:()=>$});module.exports=U(j);var d=require("react/jsx-runtime"),i=I(require("react")),b=require("@gsap/react"),u=require("gsap"),w=require("gsap/dist/SplitText"),f=require("gsap/dist/ScrollTrigger"),x=require("../../helpers/utils.js"),v=require("../../components/index.js"),S=require("../../shared/Styles.js");const T=i.default.forwardRef(({data:t,className:r,GSAP:e})=>{const{title:n,theme:o}=t,s=(0,i.useRef)(null),l=(0,i.useRef)(null);return(0,b.useGSAP)(()=>{if(!s.current)return;const H=s.current?.clientHeight||80;l.current=new w.SplitText(s.current,{type:"words",wordsClass:"word"});const c=l.current.words;return u.gsap.set(c,{opacity:0}),f.ScrollTrigger.create({trigger:s.current,start:"bottom bottom-=10%",end:`bottom+=${H*2+40}px bottom-=10%`,scrub:!0,onUpdate:m=>{const k=m.progress,g=c.length,E=1/g,h=.5;c.forEach((M,P)=>{const R=P/g*(1-h),A=E*(1+h);let p=(k-R)/A;p=Math.max(0,Math.min(p,1)),u.gsap.set(M,{opacity:p})})}}),()=>{l.current&&l.current.revert(),f.ScrollTrigger.getAll().forEach(m=>m.kill())}},[]),n&&(0,d.jsx)("div",{className:(0,x.cn)("tablet:mb-[32px] mb-[24px] space-y-4",r,{"aiui-dark":o==="dark"}),children:(0,d.jsx)(v.Heading,{ref:s,as:"h2",size:5,html:n})})});T.displayName="Title";var $=(0,S.withStyles)(T);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, GSAP }) => {\n  const { title, theme } = data\n  const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<typeof SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    const height = titleRef.current?.clientHeight || 80\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=10%',\n      end: `bottom+=${height * 2 + 40}px bottom-=10%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n    }\n  }, [])\n\n  return (\n    title && (\n      <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiDQ,IAAAI,EAAA,6BAhDRC,EAA8B,oBAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACxF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIJ,EACnB,CAAE,KAAAK,EAAM,cAAAC,EAAe,UAAAC,EAAW,QAAAC,CAAQ,EAAIN,EAC9CO,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAgC,IAAI,EAC9D,OAAAF,EAAQ,IAAM,CACZ,GAAI,CAACC,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIH,EAAUE,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAL,EAAK,IAAIO,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BN,EAAc,OAAO,CACnB,QAASG,EAAS,QAClB,MAAO,qBACP,IAAK,WAAWE,EAAS,EAAI,EAAE,iBAC/B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CjB,EAAK,IAAIa,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DJ,EAAc,OAAO,EAAE,QAASiB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHpB,MACE,OAAC,OAAI,aAAW,MAAG,uCAAwCF,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EACrG,mBAAC,WAAQ,IAAKK,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,EACxD,CAGN,CAAC,EAEDL,EAAM,YAAc,QAEpB,IAAOP,KAAQ,cAAWO,CAAK",
-  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_components", "import_Styles", "Title", "React", "data", "className", "GSAP", "title", "theme", "gsap", "ScrollTrigger", "SplitText", "useGSAP", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
+  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, GSAP }) => {\n  const { title, theme } = data\n  // const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    const height = titleRef.current?.clientHeight || 80\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=10%',\n      end: `bottom+=${height * 2 + 40}px bottom-=10%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n    }\n  }, [])\n\n  return (\n    title && (\n      <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACxF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIJ,EAEnBK,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CACZ,GAAI,CAACD,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASH,EAAS,QAClB,MAAO,qBACP,IAAK,WAAWE,EAAS,EAAI,EAAE,iBAC/B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASa,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHhB,MACE,OAAC,OAAI,aAAW,MAAG,uCAAwCF,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EACrG,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDL,EAAM,YAAc,QAEpB,IAAOV,KAAQ,cAAWU,CAAK",
+  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "Title", "React", "data", "className", "GSAP", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/types.ts"],
-  "sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface TitleProps {\n  GSAP: any\n  data: {\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title: string\n    /**\n     * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\u8272\n     */\n    theme?: Theme\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface TitleProps {\n  GSAP?: any\n  data: {\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title: string\n    /**\n     * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\u8272\n     */\n    theme?: Theme\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

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

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

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

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

@@ -23,7 +23,7 @@ type AccordionCardsType = {
         /** 主按钮配置 */
         primaryButton?: string;
     };
-    GSAP: any;
+    GSAP?: any;
 };
 declare const AccordionCards: ({ data, className, GSAP }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
 export default AccordionCards;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "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  GSAP: any\n}\n\nconst AccordionCards = ({ data, className = '', GSAP }: 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 }} GSAP={GSAP} />}\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"],
+  "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  GSAP?: any\n}\n\nconst AccordionCards = ({ data, className = '', GSAP }: 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 }} GSAP={GSAP} />}\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": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "GSAP", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "idx", "isExpanded", "flexValue", "isShowContent", "AccordionCards_default"]
 }

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

@@ -4,7 +4,7 @@ export interface CategoryItem {
     name: string;
 }
 export interface CategoryProps {
-    GSAP: any;
+    GSAP?: any;
     className?: string;
     /** 主题色*/
     theme?: 'light' | 'dark';

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/index.tsx"],
-  "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  GSAP: any\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 h-auto w-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      <div className={cn(index === 0 ? 'max-h-[146px]' : 'max-h-[72px] max-w-[72px]')}>\n        <Picture\n          className={cn(\n            'm-auto mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover'\n          )}\n          source={data?.image?.url || data?.image}\n        />\n      </div>\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, GSAP }) => {\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 }} GSAP={GSAP} />}\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"],
+  "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  GSAP?: any\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 h-auto w-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      <div className={cn(index === 0 ? 'max-h-[146px]' : 'max-h-[72px] max-w-[72px]')}>\n        <Picture\n          className={cn(\n            'm-auto mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover'\n          )}\n          source={data?.image?.url || data?.image}\n        />\n      </div>\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, GSAP }) => {\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 }} GSAP={GSAP} />}\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": ["Fragment", "jsx", "jsxs", "cn", "Picture", "withStyles", "Title", "SwiperBox", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "SingleItem", "SinglePcCategoryItem", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "SoundCoreCategoryItem", "Category", "buildData", "className", "key", "GSAP", "currentData", "isSoundCore", "Category_default"]
 }

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

@@ -22,7 +22,7 @@ export interface EvaluateProps {
         shape?: 'round' | 'square';
     };
     key?: string;
-    GSAP: any;
+    GSAP?: any;
 }
 declare const _default: {
     (props: Omit<EvaluateProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: {\n    url: string\n  }\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n}\n\nexport interface EvaluateProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n  }\n  key?: string\n  GSAP: any\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <div\n      className={cn(\n        'box-border flex w-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]'\n      )}\n    >\n      <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n        <div className=\"flex-1\">\n          <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n          <div className=\"mt-1 flex items-center\">\n            {handleRating(data?.rating)?.map?.((_, index) => {\n              return (\n                <div key={index} className=\"mr-1\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path\n                      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\"\n                      fill=\"#F77234\"\n                    />\n                  </svg>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n        <div className=\"desktop:size-12 size-10 overflow-hidden\">\n          <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n            {data?.avatar?.url ? (\n              <>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </>\n            ) : (\n              data?.title\n            )}\n          </Avatar>\n        </div>\n      </div>\n      <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">{data?.description || ''}</p>\n      <div\n        className={cn(\n          'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n          configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n        )}\n      >\n        <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n          <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n        </div>\n        <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n      </div>\n    </div>\n  )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key, GSAP }) => {\n  const { products, title, ...ohter } = data\n  return (\n    <>\n      <div className={cn('w-full', className)}>\n        {title && <Title data={{ title: title }} GSAP={GSAP} />}\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'Evaluate' + key}\n          data={{ list: products, configuration: { ...ohter } }}\n          Slide={EvaluateItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3.1,\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withStyles(Evaluate)\n"],
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: {\n    url: string\n  }\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n}\n\nexport interface EvaluateProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n  }\n  key?: string\n  GSAP?: any\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <div\n      className={cn(\n        'box-border flex w-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]'\n      )}\n    >\n      <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n        <div className=\"flex-1\">\n          <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n          <div className=\"mt-1 flex items-center\">\n            {handleRating(data?.rating)?.map?.((_, index) => {\n              return (\n                <div key={index} className=\"mr-1\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path\n                      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\"\n                      fill=\"#F77234\"\n                    />\n                  </svg>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n        <div className=\"desktop:size-12 size-10 overflow-hidden\">\n          <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n            {data?.avatar?.url ? (\n              <>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </>\n            ) : (\n              data?.title\n            )}\n          </Avatar>\n        </div>\n      </div>\n      <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">{data?.description || ''}</p>\n      <div\n        className={cn(\n          'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n          configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n        )}\n      >\n        <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n          <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n        </div>\n        <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n      </div>\n    </div>\n  )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key, GSAP }) => {\n  const { products, title, ...ohter } = data\n  return (\n    <>\n      <div className={cn('w-full', className)}>\n        {title && <Title data={{ title: title }} GSAP={GSAP} />}\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'Evaluate' + key}\n          data={{ list: products, configuration: { ...ohter } }}\n          Slide={EvaluateItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3.1,\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withStyles(Evaluate)\n"],
   "mappings": "aAsDQ,OAoBM,YAAAA,EAnBJ,OAAAC,EADF,QAAAC,MAAA,oBArDR,MAAkB,QAClB,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BA8BpD,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OACEb,EAAC,OACC,UAAWE,EACT,kHACAS,GAAe,QAAU,QAAU,cAAgB,eACnD,kDACF,EAEA,UAAAX,EAAC,OAAI,UAAWE,EAAG,6DAA6D,EAC9E,UAAAF,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,mCAAoC,SAAAW,GAAM,MAAM,EAC9DX,EAAC,OAAI,UAAU,yBACZ,SAAAa,EAAaF,GAAM,MAAM,GAAG,MAAM,CAACI,EAAGC,IAEnChB,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQgB,CAOV,CAEH,EACH,GACF,EACAhB,EAAC,OAAI,UAAU,0CACb,SAAAA,EAACO,EAAA,CAAO,UAAU,YAAY,aAAc,CAACI,GAAM,QAAQ,IACxD,SAAAA,GAAM,QAAQ,IACbV,EAAAF,EAAA,CACE,UAAAC,EAACQ,EAAA,CAAY,IAAKG,GAAM,QAAQ,IAAK,EACrCX,EAACS,EAAA,CAAgB,SAAAE,GAAM,MAAM,GAC/B,EAEAA,GAAM,MAEV,EACF,GACF,EACAX,EAAC,KAAE,UAAU,wEAAyE,SAAAW,GAAM,aAAe,GAAG,EAC9GV,EAAC,OACC,UAAWE,EACT,2DACAS,GAAe,QAAU,QAAU,aAAe,cACpD,EAEA,UAAAZ,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACI,EAAA,CAAQ,UAAU,sBAAsB,OAAQO,GAAM,KAAK,IAAK,EACnE,EACAX,EAAC,KAAE,UAAU,2DAA4D,SAAAW,GAAM,UAAY,GAAG,GAChG,GACF,CAEJ,EAEMM,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAP,EAAM,IAAAQ,EAAK,KAAAC,CAAK,IAAM,CACjF,KAAM,CAAE,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAM,EAAIZ,EACtC,OACEX,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAWE,EAAG,SAAUe,CAAS,EACnC,UAAAI,GAAStB,EAACE,EAAA,CAAM,KAAM,CAAE,MAAOoB,CAAM,EAAG,KAAMF,EAAM,EACrDpB,EAACK,EAAA,CACC,UAAU,oBACV,GAAI,WAAac,EACjB,KAAM,CAAE,KAAME,EAAU,cAAe,CAAE,GAAGE,CAAM,CAAE,EACpD,MAAOb,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,CAEJ,EAEA,IAAOc,EAAQlB,EAAWW,CAAQ",
   "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "SwiperBox", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "GSAP", "products", "title", "ohter", "Evaluate_default"]
 }

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

@@ -13,7 +13,7 @@ export interface GraphicProps extends ComponentCommonProps {
         items?: GraphicType[];
         itemShape?: 'round' | 'square';
     };
-    GSAP: any;
+    GSAP?: any;
 }
 declare const _default: {
     (props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n  }\n  GSAP: any\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  return (\n    <div className=\"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]\">\n      <div\n        className={cn('relative h-full', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n          source={data?.imgUrl?.url}\n        />\n        <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n          <Text\n            style={{\n              color: data?.textColor,\n            }}\n            html={data?.title}\n            // eslint-disable-next-line tailwindcss/classnames-order\n            className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2\"\n          />\n          {data?.description && (\n            <Heading\n              html={data?.description}\n              style={{\n                color: data?.textColor,\n              }}\n              as=\"h3\"\n              className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, GSAP, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  return (\n    <div>\n      {data?.title && <Title data={{ title: data?.title }} GSAP={GSAP} />}\n      <SwiperBox\n        className={cn('!overflow-visible', className)}\n        id={'Graphic'}\n        data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n        Slide={Item}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 2.3 : 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 3.1 : 2,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 4 : 2,\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n  }\n  GSAP?: any\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  return (\n    <div className=\"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]\">\n      <div\n        className={cn('relative h-full', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n          source={data?.imgUrl?.url}\n        />\n        <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n          <Text\n            style={{\n              color: data?.textColor,\n            }}\n            html={data?.title}\n            // eslint-disable-next-line tailwindcss/classnames-order\n            className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2\"\n          />\n          {data?.description && (\n            <Heading\n              html={data?.description}\n              style={{\n                color: data?.textColor,\n              }}\n              as=\"h3\"\n              className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, GSAP, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  return (\n    <div>\n      {data?.title && <Title data={{ title: data?.title }} GSAP={GSAP} />}\n      <SwiperBox\n        className={cn('!overflow-visible', className)}\n        id={'Graphic'}\n        data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n        Slide={Item}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 2.3 : 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 3.1 : 2,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 4 : 2,\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
   "mappings": "aAkCQ,cAAAA,EAKA,QAAAC,MALA,oBAjCR,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAEhCZ,EAAC,OAAI,UAAU,oFACb,SAAAC,EAAC,OACC,UAAWE,EAAG,kBAAmB,CAC9B,gDAAkDS,GAAe,YAAc,OAClF,CAAC,EAED,UAAAZ,EAACO,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQI,GAAM,QAAQ,IACxB,EACAV,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACQ,EAAA,CACC,MAAO,CACL,MAAOG,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,0EACZ,EACCA,GAAM,aACLX,EAACM,EAAA,CACC,KAAMK,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAUX,EAAM,WAAyC,CAAC,CAAE,KAAAS,EAAM,UAAAG,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CAC3G,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EACxD,OACEV,EAAC,OACE,UAAAU,GAAM,OAASX,EAACS,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,KAAMI,EAAM,EACjEf,EAACK,EAAA,CACC,UAAWF,EAAG,oBAAqBW,CAAS,EAC5C,GAAI,UACJ,KAAM,CAAE,KAAMH,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeQ,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOM,EAAQf,EAAWS,CAAO",
   "names": ["jsx", "jsxs", "React", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Title", "Item", "data", "configuration", "Graphic", "className", "GSAP", "props", "ref", "isShow", "Graphic_default"]
 }

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

@@ -16,7 +16,7 @@ interface GraphicAttractionBlockProps extends ComponentCommonProps {
         imageDescription?: string;
         attractionItems?: AttractionItem[];
     };
-    GSAP: any;
+    GSAP?: any;
 }
 declare const _default: {
     (props: Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicAttractionBlock/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { ComponentCommonProps, Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends ComponentCommonProps {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n  GSAP: any\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  const { GSAP } = props\n\n  return (\n    <section\n      ref={ref}\n      data-ui-component-id=\"GraphicAttractionBlock\"\n      className={cn('text-info-primary relative', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} GSAP={GSAP} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\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            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\nexport default withStyles(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
+  "sourcesContent": ["import React from 'react'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { ComponentCommonProps, Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends ComponentCommonProps {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n  GSAP?: any\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  const { GSAP } = props\n\n  return (\n    <section\n      ref={ref}\n      data-ui-component-id=\"GraphicAttractionBlock\"\n      className={cn('text-info-primary relative', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} GSAP={GSAP} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\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            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\nexport default withStyles(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
   "mappings": "AAwCuB,cAAAA,EAWf,QAAAC,MAXe,oBAxCvB,OAAOC,MAAW,QAClB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAOC,MAAW,oBAElB,OAAS,MAAAC,MAAU,yBAsBnB,MAAMC,EAAyBP,EAAM,WAAwD,CAACQ,EAAOC,IAAQ,CAC3G,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,iBAAAC,EAAkB,gBAAAC,CAAgB,EAAIR,EAAM,KAExG,CAAE,KAAAS,CAAK,EAAIT,EAEjB,OACET,EAAC,WACC,IAAKU,EACL,uBAAqB,yBACrB,UAAWH,EAAG,6BAA8BE,EAAM,SAAS,EAE1D,UAAAK,GAAgBf,EAACO,EAAA,CAAM,KAAM,CAAE,MAAOQ,CAAa,EAAG,KAAMI,EAAM,EACnElB,EAAC,OACC,UAAWO,EAAG,4EAA6E,CACzF,cAAeI,IAAU,SAC3B,CAAC,EAED,UAAAZ,EAACI,EAAA,CACC,OAAQ,GAAGS,GAAY,GAAG,KAAKC,GAAa,GAAG,OAC/C,UAAU,UACV,aAAa,sBACf,EACAb,EAAC,OAAI,UAAU,sEACb,UAAAD,EAACK,EAAA,CAAQ,GAAG,KAAK,UAAU,aAAa,KAAM,EAAG,KAAMW,EAAY,EACnEhB,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,aAAa,KAAM,EAAG,KAAMW,EAAkB,GACvE,GACF,EACAjB,EAAC,OAAI,UAAU,+EACZ,SAAAkB,GAAiB,IAAI,CAACE,EAAMC,IAC3BpB,EAAC,OAEC,UAAWO,EACT,8FACA,CAAE,cAAeI,IAAU,SAAU,CACvC,EAEA,UAAAX,EAAC,OAAI,UAAU,uEACb,UAAAD,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,4DAA4D,KAAMc,EAAK,MAAO,EACrGpB,EAACI,EAAA,CACC,UAAU,kDACV,OAAQgB,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GACF,EACApB,EAACM,EAAA,CACC,GAAG,IACH,UAAU,4DACV,KAAMc,EAAK,YACb,IAnBKC,CAoBP,CACD,EACH,GACF,CAEJ,CAAC,EACD,IAAOC,EAAQnB,EAAWM,CAAsB",
   "names": ["jsx", "jsxs", "React", "withStyles", "Picture", "Heading", "Text", "Title", "cn", "GraphicAttractionBlock", "props", "ref", "shape", "imageUrlPc", "imageUrlMob", "sectionTitle", "imageTitle", "imageDescription", "attractionItems", "GSAP", "item", "index", "GraphicAttractionBlock_default"]
 }

package/dist/esm/biz-components/HeroBanner/HeroBanner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as k,Picture as y,Text as m}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as N}from"../../shared/Styles.js";const x=i.forwardRef(({data:c,className:d},g)=>{const{title:l,subtitle:u,pcImage:f,mobileImage:b,primaryButton:o,secondaryButton:r,theme:h="light",caption:p=[]}=c;return a("div",{"data-ui-component-id":"HeroBanner",ref:g,className:e(h==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",d),children:[t(y,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${f.url} , ${b.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[l&&a("div",{className:"laptop:text-left max-w-[686px]",children:[t(k,{as:"h1",size:5,className:e("hero-banner-title"),html:l}),t(m,{as:"p",className:e("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),a("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[r&&t(n,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:r.text}),o&&t(n,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:o.text})]})]}),p.length>0&&t("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:p.map((v,s)=>a(i.Fragment,{children:[t(m,{className:e("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:v.title}),s<p.length-1&&t("div",{className:e("bg-info-primary w-px")})]},s))})]})});x.displayName="HeroBanner";var P=N(x);export{P as default};
+"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as k,Picture as y,Text as x}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as N}from"../../shared/Styles.js";const m=i.forwardRef(({data:c,className:d},g)=>{const{title:r,subtitle:u,pcImage:f,mobileImage:b,primaryButton:p,secondaryButton:l,theme:h="light",caption:o=[]}=c;return a("div",{"data-ui-component-id":"HeroBanner",ref:g,className:e(h==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",d),children:[t(y,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${f.url} , ${b.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[r&&a("div",{className:"laptop:text-left max-w-[686px]",children:[t(k,{as:"h1",size:5,className:e("hero-banner-title"),html:r}),t(x,{as:"p",className:e("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),a("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[l&&l.text&&t(n,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:l.text}),p&&p.text&&t(n,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:p.text})]})]}),o.length>0&&t("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:o.map((v,s)=>a(i.Fragment,{children:[t(x,{className:e("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:v.title}),s<o.length-1&&t("div",{className:e("bg-info-primary w-px")})]},s))})]})});m.displayName="HeroBanner";var P=N(m);export{P as default};
 //# sourceMappingURL=HeroBanner.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <Picture\n        className=\"laptop:w-full absolute h-full\"\n        imgClassName=\"h-full object-cover\"\n        source={`${pcImage.url} , ${mobileImage.url} 767`}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "aAoBM,cAAAA,EASI,QAAAC,MATJ,oBAnBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAEjH,OACET,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAX,EAACK,EAAA,CACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGU,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAf,EAAC,OAAI,UAAU,6LACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3Eb,EAACM,EAAA,CACC,GAAG,IACH,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,4DACZ,UAAAiB,GACClB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GACCjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChBpB,EAAC,OAAI,UAAU,uKACZ,SAAAoB,EAAQ,IAAI,CAACC,EAAGC,IACfrB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,8KACF,EACA,KAAMc,EAAE,MACV,EACCC,EAAQF,EAAQ,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,sBAAsB,EAAG,IAPxDe,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <Picture\n        className=\"laptop:w-full absolute h-full\"\n        imgClassName=\"h-full object-cover\"\n        source={`${pcImage.url} , ${mobileImage.url} 767`}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && secondaryButton.text && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && primaryButton.text && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "aAoBM,cAAAA,EASI,QAAAC,MATJ,oBAnBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAEjH,OACET,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAX,EAACK,EAAA,CACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGU,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAf,EAAC,OAAI,UAAU,6LACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3Eb,EAACM,EAAA,CACC,GAAG,IACH,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,4DACZ,UAAAiB,GAAmBA,EAAgB,MAClClB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GAAiBA,EAAc,MAC9BjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChBpB,EAAC,OAAI,UAAU,uKACZ,SAAAoB,EAAQ,IAAI,CAACC,EAAGC,IACfrB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,8KACF,EACA,KAAMc,EAAE,MACV,EACCC,EAAQF,EAAQ,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,sBAAsB,EAAG,IAPxDe,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
   "names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "c", "index", "HeroBanner_default"]
 }

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

@@ -8,7 +8,7 @@ export interface MediaPlayerItemProps {
     quote?: string;
 }
 export interface MediaPlayerMultiProps extends ComponentCommonProps {
-    GSAP: any;
+    GSAP?: any;
     data: {
         title?: string;
         shape?: 'round' | 'square';

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as y,jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as k,useEffect as w}from"react";import{cn as m}from"../../helpers/utils.js";import{withStyles as S}from"../../shared/Styles.js";import N from"../Slogan/index.js";import{Grid as x,GridItem as l}from"../../components/gird.js";import{Container as M}from"../../components/container.js";import P from"../BrandEquity/index.js";import C from"../MemberEquity/index.js";import R from"../Spacer/index.js";import{convertLexicalToHTML as u}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as z}from"react-responsive";const c=({children:i,spaceY:r})=>{const a=z({query:"(max-width: 768px)"});return e(M,{spaceY:r,children:o(x,{children:[!a&&e(l,{span:1}),e(l,{span:a?12:10,children:i}),!a&&e(l,{span:1})]})})},G=({children:i,id:r,components:a,GSAP:s})=>{const{gsap:n,ScrollTrigger:f}=s;return w(()=>{const t=window.screen.height;n.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${t*1.8}px bottom`,scrub:0}}).to(`#${r} .sticky-cover`,{opacity:1,duration:.3}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:r,className:"relative z-10 pb-10",children:[e(y,{children:i}),e(y,{children:a?.map(t=>{switch(t.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(c,{spaceY:"!my-0",children:e(P,{data:t,style:t?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(c,{spaceY:"!my-0",children:e(C,{data:t,className:"w-full",style:t?.style})})});case"ipc-spacer":return e(R,{data:t,style:t?.style});default:return null}})})]})},q=({className:i="",id:r,data:{title:a,videoTitle:s,btnText:n,img:f,video:t,theme:p,shape:b,components:g},GSAP:d})=>{const v=k(null),h=typeof a=="string"?a:a&&u({data:a});return typeof s=="string"||s&&u({data:s}),o(G,{id:r,components:g,GSAP:d,children:[e("div",{className:m("sticky-box absolute left-0 top-0 h-screen w-full",i,{"aiui-dark":p==="dark","rounded-box":b==="rounded"}),children:e("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:e(c,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(N,{className:"sticky-title",data:{title:h||"",theme:p},GSAP:d})})})}),e("div",{className:"sticky left-0 top-0 w-full",children:o("div",{className:m("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[e("video",{ref:v,className:"size-full object-cover",src:t?.url,autoPlay:!0,muted:!0,loop:!0}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})};var _=S(q);export{_ as default};
+"use client";import{Fragment as u,jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as h,useEffect as k}from"react";import{cn as d}from"../../helpers/utils.js";import{withStyles as w}from"../../shared/Styles.js";import S from"../Slogan/index.js";import{Grid as N,GridItem as l}from"../../components/gird.js";import{Container as x}from"../../components/container.js";import P from"../BrandEquity/index.js";import M from"../MemberEquity/index.js";import C from"../Spacer/index.js";import R from"gsap";import{convertLexicalToHTML as m}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as z}from"react-responsive";const c=({children:s,spaceY:r})=>{const t=z({query:"(max-width: 768px)"});return e(x,{spaceY:r,children:o(N,{children:[!t&&e(l,{span:1}),e(l,{span:t?12:10,children:s}),!t&&e(l,{span:1})]})})},G=({children:s,id:r,components:t,GSAP:i})=>(k(()=>{const a=window.screen.height;R.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${a*1.8}px bottom`,scrub:0}}).to(`#${r} .sticky-cover`,{opacity:1,duration:.3}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:r,className:"relative z-10 pb-10",children:[e(u,{children:s}),e(u,{children:t?.map(a=>{switch(a.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(c,{spaceY:"!my-0",children:e(P,{data:a,style:a?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(c,{spaceY:"!my-0",children:e(M,{data:a,className:"w-full",style:a?.style})})});case"ipc-spacer":return e(C,{data:a,style:a?.style});default:return null}})})]})),q=({className:s="",id:r,data:{title:t,videoTitle:i,btnText:a,img:B,video:y,theme:n,shape:f,components:b},GSAP:p})=>{const g=h(null),v=typeof t=="string"?t:t&&m({data:t});return typeof i=="string"||i&&m({data:i}),o(G,{id:r,components:b,GSAP:p,children:[e("div",{className:d("sticky-box absolute left-0 top-0 h-screen w-full",s,{"aiui-dark":n==="dark","rounded-box":f==="rounded"}),children:e("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:e(c,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(S,{className:"sticky-title",data:{title:v||"",theme:n},GSAP:p})})})}),e("div",{className:"sticky left-0 top-0 w-full",children:o("div",{className:d("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[e("video",{ref:g,className:"size-full object-cover",src:y?.url,autoPlay:!0,muted:!0,loop:!0}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})};var K=w(q);export{K as default};
 //# sourceMappingURL=index.js.map