@anker-in/headless-ui 1.0.10-temp-onclick → 1.0.10-temp-21

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

@@ -0,0 +1 @@
+export { default } from './Shelf.js';

package/dist/esm/biz-components/Shelf/types.d.ts

@@ -0,0 +1,6 @@
+export type ShelfProps = {
+    id: string;
+    title: string;
+    subtitle: string;
+    products: any[];
+};

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

@@ -1,6 +1,6 @@
-"use client";import{Fragment as le,jsx as n,jsxs as T}from"react/jsx-runtime";import U,{useState as I,useEffect as R,useRef as k,useImperativeHandle as z}from"react";import{cn as _}from"../../helpers/utils.js";import W from"../../components/picture.js";import G from"./tabSwitch.js";import O from"../../components/button.js";import J from"../Title/index.js";import K from"../SwiperBox/index.js";import{withLayout as Q}from"../../shared/Styles.js";import{formatVariantPrice as X}from"./shelfDisplay.js";import{useExposure as Y}from"../../hooks/useExposure.js";import{gaTrack as E}from"../../shared/track.js";import{useAiuiContext as Z}from"../AiuiProvider/index.js";import ee from"../../components/badge.js";import{Heading as te}from"../../components/heading.js";import{Text as ne}from"../../components/text.js";import{trackUrlRef as ie}from"../../shared/trackUrlRef.js";const V="image",H="product_shelf",re=999999999e-2;function se(e){const t=k(null),[p,u]=I(!1);return R(()=>{if(p)return;const m=t.current;if(!m||typeof IntersectionObserver>"u")return;const o=new IntersectionObserver(([r])=>{r.isIntersecting&&(u(!0),o.disconnect())},e);return o.observe(m),()=>o.disconnect()},[p,e]),[t,p]}const ae=({data:e,configuration:t})=>{const{locale:p="us",copyWriting:u}=Z(),m=(i,s,d)=>t?.event?.primaryButton?.(i,s+1,d),o=(i,s,d)=>t?.event?.secondaryButton?.(i,s+1,d),r=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},B=!r?.availableForSale&&r?.price?.amount===re,f=t?.isShowTag,h=t?.isShowOriginalPrice,y=r?.coupons?.[0],{price:b,basePrice:D}=X({locale:p,amount:h&&y?y.variant_price4wscode:r.price,baseAmount:h&&y?r.price:0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const i=e?.sku,s=e?.variants;return s?.find(w=>w?.sku===i)?.image?.url||s?.[0]?.image?.url||""},c=e?.custom_name||e?.title,v=e?.custom_description||e?.description;return n("div",{className:_("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.itemShape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:T("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[n("div",{className:_("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:n("a",{"aria-label":c,target:t?.target,href:ie(`${p==="us"||!p?"":`/${p}`}/products/${e?.handle}`,`${V}_${H}`),onClick:()=>{E({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:n(W,{source:g(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),f?n("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((i,s)=>n(ee,{children:i},s))}):null,c?n(te,{as:"h3",title:c||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:c||""}):null,v?n(ne,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:v||""}):null,n("div",{className:"mb-2 mt-[20px] flex items-center",children:B?n("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u?.soldOutText}):T(le,{children:[n("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:r?.availableForSale&&b||""}),n("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&D||""})]})}),T("div",{className:_("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?n(O,{variant:"secondary",onClick:()=>o(e,t?.index,t),className:`
+"use client";import{Fragment as pe,jsx as n,jsxs as T}from"react/jsx-runtime";import z,{useState as I,useEffect as R,useRef as k,useImperativeHandle as W}from"react";import{cn as _}from"../../helpers/utils.js";import G from"../../components/picture.js";import J from"./tabSwitch.js";import L from"../../components/button.js";import K from"../Title/index.js";import Q from"../SwiperBox/index.js";import{withLayout as X}from"../../shared/Styles.js";import{formatVariantPrice as Y}from"./shelfDisplay.js";import{useExposure as Z}from"../../hooks/useExposure.js";import{gaTrack as E}from"../../shared/track.js";import{useAiuiContext as ee}from"../AiuiProvider/index.js";import te from"../../components/badge.js";import{Heading as ne}from"../../components/heading.js";import{Text as re}from"../../components/text.js";import{trackUrlRef as se}from"../../shared/trackUrlRef.js";const V="image",H="product_shelf",ie=999999999e-2;function ae(e){const t=k(null),[l,f]=I(!1);return R(()=>{if(l)return;const d=t.current;if(!d||typeof IntersectionObserver>"u")return;const o=new IntersectionObserver(([s])=>{s.isIntersecting&&(f(!0),o.disconnect())},e);return o.observe(d),()=>o.disconnect()},[l,e]),[t,l]}const oe=({data:e,configuration:t})=>{const{locale:l="us",copyWriting:f}=ee(),d=(r,a,u)=>t?.event?.primaryButton?.(r,a+1,u),o=(r,a,u)=>t?.event?.secondaryButton?.(r,a+1,u),s=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},B=!s?.availableForSale&&s?.price?.amount===ie,h=t?.isShowTag,y=t?.isShowOriginalPrice,v=s?.coupons?.[0],{price:b,basePrice:D}=Y({locale:l,amount:y&&v?v.variant_price4wscode:s.price,baseAmount:y&&v?s.price:0,currencyCode:e?.price?.currencyCode||"USD"}),w=()=>{const r=e?.sku,a=e?.variants;return a?.find(x=>x?.sku===r)?.image?.url||a?.[0]?.image?.url||""},p=e?.custom_name||e?.title,g=e?.custom_description||e?.description;return n("div",{className:_("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.itemShape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:T("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[n("div",{className:_("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:n("a",{"aria-label":p,target:t?.target,href:se(`${l==="us"||!l?"":`/${l}`}/products/${e?.handle}`,`${V}_${H}`),onClick:()=>{E({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:t?.index+1}]}})},children:n(G,{source:w(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),h?n("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((r,a)=>n(te,{children:r},a))}):null,p?n(ne,{as:"h3",title:p||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:p||""}):null,g?n(re,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:g||""}):null,n("div",{className:"mb-2 mt-[20px] flex items-center",children:B?n("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:f?.soldOutText}):T(pe,{children:[n("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:s?.availableForSale&&b||""}),n("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:s?.availableForSale&&D||""})]})}),T("div",{className:_("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?n(L,{variant:"secondary",onClick:()=>o(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?n(O,{variant:"primary",onClick:()=>m(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?n(L,{variant:"primary",onClick:()=>d(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},oe=U.forwardRef(({data:e,buildData:t,className:p="",key:u,event:m,recommendedData:o,target:r="_self"},B)=>{const[f,h]=I(""),[y,b]=I([]),[D,g]=se({threshold:0}),c=k(!1),v=k(!1),i=k(null);z(B,()=>i.current),Y(i,{componentType:V,componentName:H,componentTitle:e?.title,navigation:f});const{productsTab:s=[],productsCard:d=[],title:w,isShowTab:P=!0,tabShape:L="square",isShowTag:$=!1,isShowOriginalPrice:A=!0,isShowRecommendedCard:F=!1,...j}=e,M=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:o?.map((a,C)=>{const l=a?.variants?.find(S=>S?.sku===a?.sku)||a?.variants?.[0];return{item_id:a?.sku||l?.sku,item_name:a?.name,item_variant:l?.name,price:l?.price,index:C+1}})}})},N=(a,C)=>{if(C){const x=o?.map(l=>({...l,isShowRecommended:!0}));b(x||[])}else{const x=a?.map(l=>{const S=t?.products?.find(q=>q?.handle===l?.handle);if(S)return{sku:l.sku,isShowRecommended:!1,custom_name:l.custom_name,custom_description:l.custom_description,...S}})?.filter(l=>l);b(x||[])}};return R(()=>{g&&o?.length&&!v.current&&(v.current=!0,M())},[g,o]),R(()=>{if(!c.current){if(!c.current&&o?.length&&(c.current=!0),P){h(s?.[0]?.tab||""),N(s?.[0]?.data||[],s?.[0]?.isShowRecommendedTab);return}N(d,F)}},[o]),T("div",{ref:i,className:_("shelf-display-wrap w-full",p,{"aiui-dark":e?.theme==="dark"}),children:[w&&n(J,{data:{title:w}}),P&&n("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:n(G,{value:f,tabs:s,tabShape:L,onTabClick:a=>{if(h(a?.tab),N(a?.data||[],a?.isShowRecommendedTab),!a?.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:V,component_name:H,component_title:e?.title,component_position:1,navigation:a?.tab}});return}M()}})}),n("div",{ref:D,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:n(K,{className:`${P?"mt-6":""} !overflow-visible`,id:`ShelfDisplay${u}${f}`,data:{list:y,configuration:{...j,event:m,isShowTag:$,isShowOriginalPrice:A,target:r}},Slide:ae,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var Te=Q(oe);export{Te as default};
+            `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},le=z.forwardRef(({data:e,buildData:t,className:l="",key:f,event:d,recommendedData:o,target:s="_self"},B)=>{const[h,y]=I(""),[v,b]=I([]),[D,w]=ae({threshold:0}),p=k(!1),g=k(!1),r=k(null);W(B,()=>r.current),Z(r,{componentType:V,componentName:H,componentTitle:e?.title,navigation:h});const{productsTab:a=[],productsCard:u=[],title:x,isShowTab:P=!0,tabShape:$="square",isShowTag:A=!1,isShowOriginalPrice:F=!0,isShowRecommendedCard:j=!1,...q}=e,M=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:o?.map((i,C)=>{const c=i?.variants?.find(m=>m?.sku===i?.sku)||i?.variants?.[0];return{item_id:i?.sku||c?.sku,item_name:i?.name,item_variant:c?.name,price:c?.price,index:C+1}})}})},N=(i,C)=>{if(C){const S=o?.map?.(c=>({...c,isShowRecommended:!0}));b(S?.length?S||[]:[])}else if(Array.isArray(i)){const c=i?.map?.(m=>{const O=t?.products?.find(U=>U?.handle===m?.handle);if(O)return{sku:m.sku,isShowRecommended:!1,custom_name:m.custom_name,custom_description:m.custom_description,...O}})?.filter(m=>m);b(c?.length?c||[]:[])}else b([])};return R(()=>{w&&o?.length&&!g.current&&(g.current=!0,M())},[w,o]),R(()=>{if(!p.current){if(!p.current&&o?.length&&(p.current=!0),P){y(a?.[0]?.tab||""),N(a?.[0]?.data||[],a?.[0]?.isShowRecommendedTab);return}N(u,j)}},[o]),T("div",{ref:r,className:_("shelf-display-wrap w-full",l,{"aiui-dark":e?.theme==="dark"}),children:[x&&n(K,{data:{title:x}}),P&&n("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:n(J,{value:h,tabs:a,tabShape:$,onTabClick:i=>{if(y(i?.tab),N(i?.data||[],i?.isShowRecommendedTab),!i?.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:V,component_name:H,component_title:e?.title,component_position:1,navigation:i?.tab}});return}M()}})}),n("div",{ref:D,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:n(Q,{className:`${P?"mt-6":""} !overflow-visible`,id:`ShelfDisplay${f}${h}`,data:{list:v,configuration:{...q,event:d,isShowTag:A,isShowOriginalPrice:F,target:s}},Slide:oe,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var Be=X(le);export{Be as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n}\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event, recommendedData, target = '_self' }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n    const isRecommend = useRef<boolean>(false)\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData || [])\n      } else {\n        const newCurrentData = currentData\n          ?.map(item => {\n            const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n            if (findData) {\n              return {\n                sku: item.sku,\n                isShowRecommended: false,\n                custom_name: item.custom_name,\n                custom_description: item.custom_description,\n                ...findData,\n              }\n            }\n          })\n          ?.filter(item => item)\n        setCurrentItems(newCurrentData || [])\n      }\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{\n              list: currentItems,\n              configuration: { ...other, event: event, isShowTag, isShowOriginalPrice, target: target },\n            }}\n            Slide={ShelfDisplayItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n}\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event, recommendedData, target = '_self' }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n    const isRecommend = useRef<boolean>(false)\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{\n              list: currentItems,\n              configuration: { ...other, event: event, isShowTag, isShowOriginalPrice, target: target },\n            }}\n            Slide={ShelfDisplayItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withLayout", "formatVariantPrice", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "useOnceInView", "options", "ref", "inView", "setInView", "el", "observer", "entry", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "ShelfDisplay", "buildData", "className", "key", "event", "recommendedData", "target", "tabId", "setTabId", "currentItems", "setCurrentItems", "viewRef", "isRecommend", "isView", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowRecommendedCard", "other", "gackViewEvent", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "ShelfDisplay_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/tab.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TabsProps {
+    tabs: any[];
+    onTabClick?: (value: any) => void;
+}
+declare const Tab: React.FC<TabsProps>;
+export default Tab;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as a,jsxs as q}from"react/jsx-runtime";import V,{useEffect as $,useRef as r,useImperativeHandle as z}from"react";import{gsap as c}from"gsap";import{SplitText as T}from"gsap/dist/SplitText";import{ScrollTrigger as h}from"gsap/dist/ScrollTrigger";import{cn as w}from"../../helpers/utils.js";import{Heading as U}from"../../components/index.js";import{withLayout as j}from"../../shared/Styles.js";import{useExposure as C}from"../../hooks/useExposure.js";import{trackUrlRef as F}from"../../shared/trackUrlRef.js";import{useInView as _}from"react-intersection-observer";const x="link",v="title",y=V.forwardRef(({data:m,className:k},b)=>{const{title:u,theme:p,extension:n}=m,o=r(null),t=r(null),e=r(null),i=r(null),{ref:R,inView:f}=_();return z(b,()=>o.current),C(o,{componentType:x,componentName:v,componentTitle:m?.title}),$(()=>{c.registerPlugin(T,h);function H(){if(!t.current)return;const E=t.current?.clientHeight||80;e.current=new T(t.current,{type:"words",wordsClass:"word"});const s=e.current.words;c.set(s,{opacity:0}),i.current=h.create({trigger:t.current,start:"bottom bottom-=4%",end:`bottom+=${E*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:L=>{const M=L.progress,d=s.length,D=1/d,g=.5;s.forEach((N,S)=>{const I=S/d*(1-g),P=D*(1+g);let l=(M-I)/P;l=Math.max(0,Math.min(l,1)),c.set(N,{opacity:l})})}})}return f&&H(),()=>{e.current&&e.current.revert(),i.current&&i.current.kill()}},[f]),u&&q("div",{className:"mb-6 flex items-end justify-between",ref:o,children:[a("div",{ref:R,className:w("space-y-4",k,{"aiui-dark":p==="dark"}),children:a(U,{ref:t,as:"h2",size:4,html:u})}),n?.textLink&&a("a",{className:w({"aiui-dark":p==="dark"},"text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:F(n?.link,`${x}_${v}`),children:n?.textLink})]})});y.displayName="Title";var Z=j(y);export{Z as default};
+"use client";import{jsx as a,jsxs as A}from"react/jsx-runtime";import $,{useEffect as z,useRef as r,useImperativeHandle as U}from"react";import{gsap as c}from"gsap";import{SplitText as h}from"gsap/dist/SplitText";import{ScrollTrigger as w}from"gsap/dist/ScrollTrigger";import{cn as v}from"../../helpers/utils.js";import{Heading as j}from"../../components/index.js";import{withLayout as C}from"../../shared/Styles.js";import{useExposure as F}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";import{useInView as q}from"react-intersection-observer";const x="link",y="title",k=$.forwardRef(({data:m,className:b},R)=>{const{title:p,caption:u,theme:f,extensions:n}=m,o=r(null),t=r(null),e=r(null),i=r(null),{ref:H,inView:d}=q();return U(R,()=>o.current),F(o,{componentType:x,componentName:y,componentTitle:m?.title}),z(()=>{c.registerPlugin(h,w);function E(){if(!t.current)return;const L=t.current?.clientHeight||80;e.current=new h(t.current,{type:"words",wordsClass:"word"});const s=e.current.words;c.set(s,{opacity:0}),i.current=w.create({trigger:t.current,start:"bottom bottom-=4%",end:`bottom+=${L*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:M=>{const D=M.progress,g=s.length,N=1/g,T=.5;s.forEach((S,I)=>{const P=I/g*(1-T),V=N*(1+T);let l=(D-P)/V;l=Math.max(0,Math.min(l,1)),c.set(S,{opacity:l})})}})}return d&&E(),()=>{e.current&&e.current.revert(),i.current&&i.current.kill()}},[d]),(p||u)&&A("div",{className:"mb-6 flex items-end justify-between overflow-hidden",ref:o,children:[a("div",{ref:H,className:v("space-y-4",b,{"aiui-dark":f==="dark"}),children:a(j,{ref:t,as:"h2",size:4,html:u||p})}),n?.textLink&&a("a",{className:v({"aiui-dark":f==="dark"},"text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:_(n?.link,`${x}_${y}`),children:n?.textLink})]})});k.displayName="Title";var tt=C(k);export{tt as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from '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 { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n  const { title, theme, extension } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\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      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\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\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    title && (\n      <div className=\"mb-6 flex items-end justify-between\" ref={innerRef}>\n        <div ref={inViewRef} className={cn('space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as=\"h2\" size={4} html={title} />\n        </div>\n        {extension?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extension?.link, `${componentType}_${componentName}`)}\n          >\n            {extension?.textLink}\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "aA8EM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBA7EN,OAAOC,GAAS,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QAC9D,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,aAAAC,MAAiB,8BAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQf,EAAM,WAAuC,CAAC,CAAE,KAAAgB,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvF,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,CAAU,EAAIL,EAC9BM,EAAWpB,EAAuB,IAAI,EACtCqB,EAAWrB,EAA2B,IAAI,EAC1CsB,EAAoBtB,EAAyB,IAAI,EACjDuB,EAAmBvB,EAA6B,IAAI,EAEpD,CAAE,IAAKwB,EAAW,OAAAC,CAAO,EAAIf,EAAU,EAE7C,OAAAT,EAAoBe,EAAK,IAAMI,EAAS,OAAyB,EAEjEZ,EAAYY,EAAU,CACpB,cAAAT,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAEDf,EAAU,IAAM,CACdG,EAAK,eAAeC,EAAWC,CAAa,EAC5C,SAASsB,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAInB,EAAUkB,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxCpB,EAAK,IAAI0B,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAUnB,EAAc,OAAO,CAC9C,QAASiB,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,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,EAC1CpC,EAAK,IAAIgC,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,EAGTR,GACEpB,EAAC,OAAI,UAAU,sCAAsC,IAAKuB,EACxD,UAAAxB,EAAC,OAAI,IAAK4B,EAAW,UAAWnB,EAAG,YAAaU,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EAC1F,SAAAtB,EAACU,EAAA,CAAQ,IAAKe,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMJ,EAAO,EACxD,EACCE,GAAW,UACVvB,EAAC,KACC,UAAWS,EACT,CAAE,YAAaa,IAAU,MAAO,EAChC,oGACF,EACA,KAAMT,EAAYU,GAAW,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EAErE,SAAAO,GAAW,SACd,GAEJ,CAGN,CAAC,EAEDN,EAAM,YAAc,QAEpB,IAAO0B,EAAQhC,EAAWM,CAAK",
-  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "useExposure", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "ref", "title", "theme", "extension", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "Title_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from '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 { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n  const { title, caption, theme, extensions } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\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      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\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\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div className=\"mb-6 flex items-end justify-between overflow-hidden\" ref={innerRef}>\n        <div ref={inViewRef} className={cn('space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as=\"h2\" size={4} html={caption || title} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n          >\n            {extensions?.textLink}\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "aA8EM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBA7EN,OAAOC,GAAS,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QAC9D,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,aAAAC,MAAiB,8BAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQf,EAAM,WAAuC,CAAC,CAAE,KAAAgB,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvF,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,MAAAC,EAAO,WAAAC,CAAW,EAAIN,EACxCO,EAAWrB,EAAuB,IAAI,EACtCsB,EAAWtB,EAA2B,IAAI,EAC1CuB,EAAoBvB,EAAyB,IAAI,EACjDwB,EAAmBxB,EAA6B,IAAI,EAEpD,CAAE,IAAKyB,EAAW,OAAAC,CAAO,EAAIhB,EAAU,EAE7C,OAAAT,EAAoBe,EAAK,IAAMK,EAAS,OAAyB,EAEjEb,EAAYa,EAAU,CACpB,cAAAV,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAEDf,EAAU,IAAM,CACdG,EAAK,eAAeC,EAAWC,CAAa,EAC5C,SAASuB,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIpB,EAAUmB,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxCrB,EAAK,IAAI2B,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAUpB,EAAc,OAAO,CAC9C,QAASkB,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,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,EAC1CrC,EAAK,IAAIiC,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,GAGRT,GAASC,IACRrB,EAAC,OAAI,UAAU,sDAAsD,IAAKwB,EACxE,UAAAzB,EAAC,OAAI,IAAK6B,EAAW,UAAWpB,EAAG,YAAaU,EAAW,CAAE,YAAaI,IAAU,MAAO,CAAC,EAC1F,SAAAvB,EAACU,EAAA,CAAQ,IAAKgB,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMJ,GAAWD,EAAO,EACnE,EACCG,GAAY,UACXxB,EAAC,KACC,UAAWS,EACT,CAAE,YAAac,IAAU,MAAO,EAChC,oGACF,EACA,KAAMV,EAAYW,GAAY,KAAM,GAAGT,CAAa,IAAIC,CAAa,EAAE,EAEtE,SAAAQ,GAAY,SACf,GAEJ,CAGN,CAAC,EAEDP,EAAM,YAAc,QAEpB,IAAO2B,GAAQjC,EAAWM,CAAK",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "useExposure", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "Title_default"]
 }

package/dist/esm/biz-components/Title/types.d.ts

@@ -10,7 +10,8 @@ export interface TitleProps {
         /**
          * 主标题
          */
-        title: string;
+        title?: string;
+        caption?: string;
         /**
          * 特性列表，最多支持3个
          */
@@ -22,7 +23,7 @@ export interface TitleProps {
         /**
          * 扩展数据
          */
-        extension?: any;
+        extensions?: any;
     };
     /**
      * 自定义类名

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

@@ -24,3 +24,4 @@ export { withLayout } from '../shared/Styles.js';
 export { default as AiuiProvider } from './AiuiProvider/index.js';
 export { default as Tabs } from './Tabs/index.js';
 export { default as CreativeModule } from './CreativeModule/index.js';
+export { default as GraphicOverlay } from './GraphicOverlay/index.js';

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

@@ -1,2 +1,2 @@
-import{default as r}from"./BrandEquity/index.js";import{default as o}from"./MemberEquity/index.js";import{default as l}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as s}from"./Spacer/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as c}from"./Evaluate/index.js";import{default as n}from"./Category/index.js";import{default as h}from"./HeroBanner/index.js";import{default as k}from"./AccordionCards/index.js";import{default as G}from"./Graphic/index.js";import{default as P}from"./MediaPlayerBase/index.js";import{default as L}from"./MediaPlayerSticky/index.js";import{default as g}from"./MediaPlayerMulti/index.js";import{default as E}from"./Marquee/index.js";import{default as b}from"./WhyChoose/index.js";import{default as I}from"./Faq/index.js";import{MarqueeItem as D,MarqueeImageContent as F,MarqueeTextContent as H}from"./Marquee/index.js";import{default as z}from"./MultiLayoutGraphicBlock/index.js";import{default as K}from"./GraphicAttractionBlock/index.js";import{withLayout as O}from"../shared/Styles.js";import{default as R}from"./AiuiProvider/index.js";import{default as V}from"./Tabs/index.js";import{default as Y}from"./CreativeModule/index.js";export{k as AccordionCards,R as AiuiProvider,r as BrandEquity,n as Category,Y as CreativeModule,c as Evaluate,I as Faq,G as Graphic,K as GraphicAttractionBlock,h as HeroBanner,E as Marquee,F as MarqueeImageContent,D as MarqueeItem,H as MarqueeTextContent,P as MediaPlayerBase,g as MediaPlayerMulti,L as MediaPlayerSticky,o as MemberEquity,z as MultiLayoutGraphicBlock,m as ShelfDisplay,l as Slogan,s as Spacer,V as Tabs,u as Title,b as WhyChoose,O as withLayout};
+import{default as r}from"./BrandEquity/index.js";import{default as o}from"./MemberEquity/index.js";import{default as l}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as s}from"./Spacer/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as c}from"./Evaluate/index.js";import{default as n}from"./Category/index.js";import{default as h}from"./HeroBanner/index.js";import{default as G}from"./AccordionCards/index.js";import{default as q}from"./Graphic/index.js";import{default as P}from"./MediaPlayerBase/index.js";import{default as v}from"./MediaPlayerSticky/index.js";import{default as S}from"./MediaPlayerMulti/index.js";import{default as E}from"./Marquee/index.js";import{default as b}from"./WhyChoose/index.js";import{default as I}from"./Faq/index.js";import{MarqueeItem as D,MarqueeImageContent as F,MarqueeTextContent as H}from"./Marquee/index.js";import{default as W}from"./MultiLayoutGraphicBlock/index.js";import{default as J}from"./GraphicAttractionBlock/index.js";import{withLayout as N}from"../shared/Styles.js";import{default as R}from"./AiuiProvider/index.js";import{default as V}from"./Tabs/index.js";import{default as Y}from"./CreativeModule/index.js";import{default as _}from"./GraphicOverlay/index.js";export{G as AccordionCards,R as AiuiProvider,r as BrandEquity,n as Category,Y as CreativeModule,c as Evaluate,I as Faq,q as Graphic,J as GraphicAttractionBlock,_ as GraphicOverlay,h as HeroBanner,E as Marquee,F as MarqueeImageContent,D as MarqueeItem,H as MarqueeTextContent,P as MediaPlayerBase,S as MediaPlayerMulti,v as MediaPlayerSticky,o as MemberEquity,W as MultiLayoutGraphicBlock,m as ShelfDisplay,l as Slogan,s as Spacer,V as Tabs,u as Title,b as WhyChoose,N as withLayout};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/biz-components/index.ts"],
-  "sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\n"],
-  "mappings": "AAAA,OAAoB,WAAXA,MAA8B,yBACvC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAAwB,mBACjC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA6B,wBACtC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAkC,6BAC3C,OAAoB,WAAXA,MAAoC,+BAC7C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAA4B,uBACrC,OAAoB,WAAXA,MAAsB,iBAC/B,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B,qBACrE,OAAoB,WAAXH,MAA0C,qCAEnD,OAAoB,WAAXA,MAAyC,oCAElD,OAAS,cAAAI,MAAkB,sBAC3B,OAAoB,WAAXJ,MAA+B,0BACxC,OAAoB,WAAXA,MAAuB,kBAChC,OAAoB,WAAXA,MAAiC",
+  "sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\n"],
+  "mappings": "AAAA,OAAoB,WAAXA,MAA8B,yBACvC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAAwB,mBACjC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA6B,wBACtC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAkC,6BAC3C,OAAoB,WAAXA,MAAoC,+BAC7C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAA4B,uBACrC,OAAoB,WAAXA,MAAsB,iBAC/B,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B,qBACrE,OAAoB,WAAXH,MAA0C,qCAEnD,OAAoB,WAAXA,MAAyC,oCAElD,OAAS,cAAAI,MAAkB,sBAC3B,OAAoB,WAAXJ,MAA+B,0BACxC,OAAoB,WAAXA,MAAuB,kBAChC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAAiC",
   "names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent", "withLayout"]
 }

package/dist/esm/components/col.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+interface mediaProps {
+    span?: number;
+    pull?: number;
+    push?: number;
+    offset?: number;
+    order?: number;
+}
+interface ColProps {
+    children?: ReactNode;
+    span?: number;
+    className?: string;
+    asChild?: boolean;
+    offset?: number;
+    order?: number;
+    push?: number;
+    pull?: number;
+    flex?: number;
+    allFlex?: number;
+    md?: number | mediaProps;
+    lxl?: number | mediaProps;
+    mdl?: number | mediaProps;
+    xlxxl?: number | mediaProps;
+    minxxl?: number | mediaProps;
+}
+declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
+export { Col };
+export type { ColProps };

package/dist/esm/components/dropdown.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/esm/components/row.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+interface RowProps {
+    children?: ReactNode;
+    className?: string;
+    align?: 'start' | 'center' | 'end' | 'stretch' | {
+        [key in 'md' | 'mdl' | 'xlxxl' | 'minxxl']: 'start' | 'center' | 'end' | 'stretch';
+    };
+    asChild?: boolean;
+    gutter?: number | object | Array<object | number>;
+    wrap?: boolean;
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | {
+        [key in 'md' | 'mdl' | 'xlxxl' | 'minxxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+    };
+}
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
+export { Row };
+export type { RowProps };

package/dist/esm/helpers/get-subtree.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+/**
+ * This is a helper function that is used when a component supports `asChild`
+ * using the `Slot` component but its implementation contains nested DOM elements.
+ *
+ * Using it ensures if a consumer uses the `asChild` prop, the elements are in
+ * correct order in the DOM, adopting the intended consumer `children`.
+ */
+export declare function getSubtree(options: {
+    asChild: boolean | undefined;
+    children: React.ReactNode;
+}, content: React.ReactNode | ((children: React.ReactNode) => React.ReactNode)): React.ReactNode;

package/dist/esm/packages/ui/src/components/avatar.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { type VariantProps } from 'class-variance-authority';
+declare const Avatar: React.ForwardRefExoticComponent<{
+    /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
+    asChild?: boolean;
+    /** 类名*/
+    className?: string;
+    /** 样式*/
+    style?: React.CSSProperties;
+    /** 点击事件*/
+    onClick?: Function;
+    /** 文本自适应*/
+    isAdaptation?: boolean;
+    /** 文本自适应最小字体, 开启时生效*/
+    minSize?: number;
+    /** 文本自适应最大字体, 开启时生效*/
+    maxSize?: number;
+    /** 文本自适应类*/
+    textClassName?: string;
+} & VariantProps<(props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string> & Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/esm/packages/ui/src/components/index.d.ts

@@ -0,0 +1,20 @@
+export { default as Button } from './button.js';
+export { default as Badge } from './badge.js';
+export * from './input.js';
+export { default as Checkbox } from './checkbox.js';
+export { default as Skeleton } from './skeleton.js';
+export * from './dialog.js';
+export * from './popover.js';
+export * from './radio.js';
+export * from './dialog.js';
+export * from './text.js';
+export * from './gird.js';
+export * from './col.js';
+export * from './row.js';
+export * from './heading.js';
+export * from './container.js';
+export * from './color.js';
+export * from './link.js';
+export * from './avatar.js';
+export { default as Picture } from './picture.js';
+export { default as Theme } from './theme.js';

package/dist/esm/packages/ui/src/index.d.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/esm/packages/ui/src/stories/avatar.stories.d.ts

@@ -0,0 +1,40 @@
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+        className?: string;
+        style?: React.CSSProperties;
+        onClick?: Function;
+        isAdaptation?: boolean;
+        minSize?: number;
+        maxSize?: number;
+        textClassName?: string;
+    } & import("class-variance-authority").VariantProps<(props?: ({
+        size?: "small" | "medium" | "large" | null | undefined;
+    } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string> & Omit<import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    tags: string[];
+    subcomponents: any;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        size: {
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarType: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarTextAdaptation: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarSize: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/packages/ui/src/stories/badge.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react';
+import { Badge } from '../components/index.js';
+declare const meta: {
+    title: string;
+    component: typeof Badge;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+    args: {
+        variant: "default";
+        children: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Examples: Story;

package/dist/esm/packages/ui/src/stories/button.stories.d.ts

@@ -0,0 +1,48 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../components/button.js").ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        hoverEffect: {
+            description: string;
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+    args: {
+        variant: "primary";
+        size: "base";
+        children: string;
+        asChild: false;
+        disabled: false;
+        loading: false;
+        hoverEffect: "none";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Link: Story;
+export declare const WithIcon: Story;
+export declare const Aschild: Story;
+export declare const Spinner: Story;