@anker-in/headless-ui 1.3.70 → 1.3.72

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
+import { type PromotionalBarProps } from '../PromotionalBar/index.js';
 import 'swiper/css';
 import 'swiper/css/navigation';
-import type { ButtonFunctionType, CopyConfig } from './types.js';
+import type { ButtonFunctionType, CopyConfig, UserType, DiscountTagStyle, ActiveShelfLayoutMode, TagTypeConfig, TagColorConfig } from './types.js';
 import { ProductCard, type ProductCardData, type ActiveShelfSemanticName, type StockDisplayMode } from './ProductCard.js';
+import type { Img } from '../../types/props.js';
 /**
- * 组件布局模式
+ * 平铺布局桌面端（≥1440px）每行列数
+ * '4' 为默认（现状），'3' 表示桌面端降为 3 列
  */
-export type ActiveShelfLayoutMode = 'flex' | 'horizontal';
+export type TileDesktopColumns = '3' | '4';
 /**
  * Code Channel 配置 - 折扣前缀
  */
@@ -21,6 +24,11 @@ export interface ProductTab {
     tab: string;
     /** 该分组下的产品数据 */
     data: ProductCardData[];
+    /** 资源块（如 PromotionalBar） */
+    resourceBlocks?: Array<PromotionalBarProps['data'] & {
+        blockType: string;
+        display: 'visible' | 'hidden';
+    }>;
 }
 /**
  * ActiveShelf 业务组件数据接口
@@ -45,7 +53,7 @@ export interface ActiveShelfData {
     layoutMode?: ActiveShelfLayoutMode;
     /** Code Channel 配置 - 折扣前缀 */
     codeChannel?: CodeChannelConfig;
-    /** 是否展示会员价格 */
+    /** 是否展示会员价格与价格标签（价格下方的会员标签，如 Member Price） */
     showMemberPrice?: boolean;
     /** 是否展示折扣标签 */
     showDiscount?: boolean;
@@ -63,10 +71,41 @@ export interface ActiveShelfData {
     showOriginalPrice?: boolean;
     /** 文案配置 */
     copy?: CopyConfig;
+    /** 标签形态配置：按位置（第 0/第 1 个）指定形态，优先于 tag 数据自带 variant 与默认规则 */
+    tagTypeConfig?: TagTypeConfig;
+    /** fill 形态标签颜色（bgColor=背景色，outlineColor=描边色），覆盖默认品牌色 */
+    fill?: TagColorConfig['fill'];
+    /** outline 形态标签颜色（outlineColor=描边色，bgColor=背景色），覆盖默认品牌色 */
+    outline?: TagColorConfig['outline'];
+    /** 会员价标签（priceLabel，如 Member Price）文字颜色。设置后会覆盖默认的品牌色 */
+    memberPriceTextColor?: string;
+    /** 用户身份（会员标签模块） */
+    userType?: UserType;
+    /** 会员标签模块三种状态的装饰图 */
+    memberImages?: Partial<Record<UserType, Img>>;
+    /** 左上角自定义标签图标 */
+    customTagsIcon?: Img;
+    /** 自定义折扣标签图标样式（style1/style2/style3 为内置预设，custom 为自定义上传） */
+    customTagStyle?: DiscountTagStyle;
+    /** PC 端（≥768px）平铺最多展示行数 */
+    tileMaxRowsPc?: number;
+    /** 移动端（<768px）平铺最多展示行数 */
+    tileMaxRowsMob?: number;
+    /** 平铺布局桌面端（≥1440px）每行列数，'3' 或 '4'，默认 '4' */
+    tileDesktopColumns?: TileDesktopColumns;
+    /** 平铺布局折叠时「展开」按钮文案，默认 'Show more' */
+    tileExpandText?: string;
+    /** 平铺布局展开后「收起」按钮文案，默认 'Show less' */
+    tileCollapseText?: string;
     /**
      * 产品列表（当不使用 Tab 分组时可直接传入产品列表）
      */
     productsCard: ProductCardData[];
+    /** 资源块（如 PromotionalBar），非 Tab 模式下生效 */
+    resourceBlocks?: Array<PromotionalBarProps['data'] & {
+        blockType: string;
+        display: 'visible' | 'hidden';
+    }>;
 }
 export interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 业务数据 */
@@ -77,6 +116,12 @@ export interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {
     onShopNow?: (product: ProductCardData) => void;
     /** 点击加入购物车回调 */
     onAddToCart?: (product: ProductCardData) => void;
+    /** 点击产品图片 / 场景图 / 标题跳转详情回调；未传时回退到 product.listingLink */
+    onProductImageClick?: (product: ProductCardData) => void;
+    /** 点击会员标签模块游客副标题（注册/登录）回调 */
+    onMemberSignUp?: () => void;
+    /** 点击会员标签模块付费会员折扣文案（加购付费会员sku）回调 */
+    onPlusMemberAddCart?: () => void;
     /** 语义化类名 */
     classNames?: Partial<Record<ActiveShelfSemanticName, string>>;
     /**
@@ -88,6 +133,11 @@ export interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {
     renderOriginalPrice?: (product: ProductCardData, context: {
         showOriginalPrice?: boolean;
     }) => React.ReactNode;
+    /** 自定义折扣标签渲染（仅 customTagStyle=custom 时生效） */
+    renderDiscountBadge?: (ctx: {
+        text?: string;
+        layoutMode: ActiveShelfLayoutMode;
+    }) => React.ReactNode;
 }
 /**
  * ActiveShelf 复合组件类型定义
@@ -101,4 +151,4 @@ declare const ActiveShelfWrapped: React.ForwardRefExoticComponent<Omit<ActiveShe
     ProductCard: typeof ProductCard;
 };
 export default ActiveShelfWrapped;
-export type { StockDisplayMode, ActiveShelfSemanticName, ProductCardData };
+export type { StockDisplayMode, ActiveShelfSemanticName, ProductCardData, ActiveShelfLayoutMode };

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

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as S}from"react/jsx-runtime";import*as r from"react";import{cn as N}from"../../helpers/index.js";import{withLayout as O}from"../../shared/Styles.js";import{Text as z,Heading as $,Tabs as V,TabsList as I,TabsTrigger as W,TabsContent as j}from"../../components/index.js";import{Swiper as _,SwiperSlide as q}from"swiper/react";import{Navigation as Z}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import{ProductCard as E}from"./ProductCard.js";import{useExposure as G}from"../../hooks/useExposure.js";const J="shelf",K="active_shelf",Q=({disabled:i})=>S("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]",children:[t("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),t("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),U=({disabled:i})=>S("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]",children:[t("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),t("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),A=r.forwardRef(({products:i,layoutMode:o,className:k,copy:n,showTags:p,stockDisplayMode:a,stockThresholdValue:u,onLearnMore:P,onShopNow:B,onAddToCart:l,classNames:h,secondaryButtonText:m,secondaryButtonFun:g,primaryButtonText:y,primaryButtonFun:f,showOriginalPrice:T,renderOriginalPrice:b},M)=>{const v=r.useId().replace(/:/g,""),w=`swiper-button-next-custom-${v}`,L=`swiper-button-prev-custom-${v}`,[c,s]=r.useState({isBeginning:!0,isEnd:!1}),D=r.useRef(null),d=r.useCallback(()=>{const e=D.current;if(!e?.slides||e.slides.length===0)return;e.slides.forEach(x=>{x.style.height="auto"});const C=Array.from(e.slides).map(x=>x.scrollHeight),R=Math.max(...C);R>0&&e.slides.forEach(x=>{x.style.height=`${R}px`})},[]);return r.useEffect(()=>{const e=()=>{requestAnimationFrame(d)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[d]),i?.length===0?null:t("div",{ref:M,className:k,children:o==="flex"?t("div",{className:"lg-desktop:gap-4 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 laptop:gap-4 grid grid-cols-1 justify-start gap-3",children:i.map((e,C)=>t(E,{product:e,className:"shrink-0",showTags:p,stockDisplayMode:a,stockThresholdValue:u,onLearnMore:P,onShopNow:B,onAddToCart:l,classNames:h,secondaryButtonText:m,secondaryButtonFun:g,primaryButtonText:y,primaryButtonFun:f,showOriginalPrice:T,renderOriginalPrice:b,copy:n},e.shopify_id+"-"+e.sku||C))}):S("div",{className:"group relative",children:[t(_,{modules:[Z],spaceBetween:16,slidesPerView:"auto",navigation:{nextEl:`.${w}`,prevEl:`.${L}`},onSwiper:e=>{D.current=e,s({isBeginning:e.isBeginning,isEnd:e.isEnd}),setTimeout(d,100)},onReachEnd:()=>{s(e=>({...e,isEnd:!0}))},onReachBeginning:()=>{s(e=>({...e,isBeginning:!0}))},onFromEdge:()=>{s({isBeginning:!1,isEnd:!1})},className:"!overflow-visible",children:i.map((e,C)=>t(q,{className:"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] !w-[296px] overflow-hidden",children:t(E,{product:e,className:"w-full max-w-full",showTags:p,stockDisplayMode:a,stockThresholdValue:u,onLearnMore:P,onShopNow:B,onAddToCart:l,classNames:h,secondaryButtonText:m,secondaryButtonFun:g,primaryButtonText:y,primaryButtonFun:f,showOriginalPrice:T,renderOriginalPrice:b,copy:n})},e.shopify_id+"-"+e.sku||C))}),t("button",{className:`${L} tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${c.isBeginning?"pointer-events-none opacity-0":"opacity-0 group-hover:opacity-100"}`,"aria-label":n?.previousSlideLabel,children:t(Q,{disabled:c.isBeginning})}),t("button",{className:`${w} tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${c.isEnd?"pointer-events-none opacity-0":"opacity-0 group-hover:opacity-100"}`,"aria-label":n?.nextSlideLabel,children:t(U,{disabled:c.isEnd})})]})})});A.displayName="ProductsList";const F=r.forwardRef(({className:i,data:o,onLearnMore:k,onShopNow:n,onAddToCart:p,classNames:a,renderOriginalPrice:u,...P},B)=>{const l=r.useRef(null);G(l,{componentType:J,componentName:K,componentTitle:o.title,componentDescription:o.description}),r.useImperativeHandle(B,()=>l.current);const{theme:h="light",layoutMode:m="flex",showTags:g=!0,stockDisplayMode:y,stockThresholdValue:f,showOriginalPrice:T=!0,secondaryButtonText:b,primaryButtonText:M,secondaryButtonFun:v,primaryButtonFun:w,isShowTab:L=!0,copy:c}=o,s=c||{},D=o.productsTab&&o.productsTab.length>0,d=L&&D;return S("div",{ref:l,className:N("w-full",{"aiui-dark":h==="dark"},i,a?.root),style:{"--progress-track-bg":h==="dark"?"rgba(255, 255, 255, 0.2)":"rgba(0, 0, 0, 0.2)"},...P,children:[o.title&&t($,{as:"h2",html:o.title,size:4,className:N("text-info-primary mb-4",a?.title)}),o.description&&t(z,{size:3,as:"p",html:o.description,className:N("text-info-primary mb-6",a?.description)}),S(V,{defaultValue:o.productsTab?.[0]?.id,className:"w-full",children:[d&&t(I,{className:"mb-6",children:o.productsTab?.map(e=>t(W,{value:e.id,children:e.tab},"tab-"+e.id))}),d?o.productsTab?.map(e=>t(j,{value:e.id,children:t(A,{products:e.data,layoutMode:m,copy:s,showTags:g,stockDisplayMode:y,stockThresholdValue:f,onLearnMore:k,onShopNow:n,onAddToCart:p,classNames:a,secondaryButtonText:b,secondaryButtonFun:v,primaryButtonText:M,primaryButtonFun:w,showOriginalPrice:T,renderOriginalPrice:u})},"tab-content-"+e.id)):t(A,{products:o.productsCard,layoutMode:m,copy:s,showTags:g,stockDisplayMode:y,stockThresholdValue:f,onLearnMore:k,onShopNow:n,onAddToCart:p,classNames:a,secondaryButtonText:b,secondaryButtonFun:v,primaryButtonText:M,primaryButtonFun:w,showOriginalPrice:T,renderOriginalPrice:u})]})]})});F.displayName="ActiveShelf";const H=F;H.ProductCard=E;const X=O(H);var le=X;export{le as default};
+"use client";import{Fragment as me,jsx as t,jsxs as n}from"react/jsx-runtime";import*as i from"react";import{cn as p}from"../../helpers/index.js";import{withLayout as we}from"../../shared/Styles.js";import{Text as Ce,Heading as ve,Tabs as xe,TabsList as Pe,TabsTrigger as Me,TabsContent as ke}from"../../components/index.js";import ne from"../PromotionalBar/index.js";import{Swiper as Se,SwiperSlide as Be}from"swiper/react";import{Navigation as De}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import{ProductCard as oe}from"./ProductCard.js";import{useExposure as Le}from"../../hooks/useExposure.js";const Ne="shelf",Re="active_shelf",Ae=()=>n("span",{className:"lg-desktop:size-14 relative flex size-10 items-center justify-center",children:[t("span",{className:"prev-mask bg-masks-0 group-hover/prev-mask:bg-masks-1 absolute inset-0 rounded-full transition-colors"}),t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",className:"lg-desktop:size-6 relative size-5",children:t("path",{d:"M15 6L9 12L15 18",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]}),Ee=()=>n("span",{className:"lg-desktop:size-14 relative flex size-10 items-center justify-center",children:[t("span",{className:"next-mask bg-masks-0 group-hover/next-mask:bg-masks-1 absolute inset-0 rounded-full transition-colors"}),t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",className:"lg-desktop:size-6 relative size-5",children:t("path",{d:"M9 6L15 12L9 18",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]});function le(r){return typeof window>"u"?2:window.matchMedia("(min-width: 1440px)").matches?r==="3"?3:4:window.matchMedia("(min-width: 768px)").matches?3:2}function ce(){return typeof window>"u"?!0:!window.matchMedia("(min-width: 768px)").matches}function de(){return typeof window>"u"?!1:window.matchMedia("(min-width: 1025px)").matches}const ie=i.forwardRef(({products:r,layoutMode:o,className:$,copy:c,showTags:f,stockDisplayMode:y,stockThresholdValue:h,onLearnMore:T,onShopNow:a,onAddToCart:b,onProductImageClick:w,classNames:j,secondaryButtonText:W,secondaryButtonFun:m,primaryButtonText:C,primaryButtonFun:v,showOriginalPrice:x,renderOriginalPrice:P,tagTypeConfig:M,fill:k,outline:S,memberPriceTextColor:B,renderDiscountBadge:D,userType:L,memberImages:_,customTagsIcon:N,customTagStyle:R,onMemberSignUp:A,onPlusMemberAddCart:E,tileMaxRowsPc:te,tileMaxRowsMob:q,tileDesktopColumns:l,tileExpandText:Z,tileCollapseText:G,showMemberPrice:I},J)=>{const z=i.useId().replace(/:/g,""),F=`swiper-button-next-custom-${z}`,H=`swiper-button-prev-custom-${z}`,[O,d]=i.useState({isBeginning:!0,isEnd:!1}),K=i.useRef(null),u=i.useCallback(()=>{const e=K.current;if(!e?.slides||e.slides.length===0)return;e.slides.forEach(U=>{U.style.height="auto"});const V=Array.from(e.slides).map(U=>U.scrollHeight),ae=Math.max(...V);ae>0&&e.slides.forEach(U=>{U.style.height=`${ae}px`})},[]);i.useEffect(()=>{const e=()=>{requestAnimationFrame(u)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[u]);const[g,s]=i.useState(!1),[Q,X]=i.useState(()=>le(l)),[ge,fe]=i.useState(()=>ce()),[ye,he]=i.useState(()=>de());i.useEffect(()=>{const e=()=>{X(le(l)),fe(ce()),he(de())};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[l]);const Y=o==="horizontal"&&!ye?"flex":o,ee=ge?q:te,se=Y==="flex"&&!!ee&&ee>0,re=ee?ee*Q:r.length,Te=se&&r.length>re,be=se&&!g?r.slice(0,re):r;return r?.length===0?null:t("div",{ref:J,className:$,children:Y==="flex"?n(me,{children:[t("div",{className:p("tablet:grid-cols-3 tablet:gap-4 grid grid-cols-2 justify-start gap-3",l==="3"?"desktop:grid-cols-3 lg-desktop:grid-cols-3":"desktop:grid-cols-4 lg-desktop:grid-cols-4"),children:be.map((e,V)=>t(oe,{product:e,layoutMode:Y,className:"shrink-0",showTags:f,stockDisplayMode:y,stockThresholdValue:h,onLearnMore:T,onShopNow:a,onAddToCart:b,onProductImageClick:w,classNames:j,secondaryButtonText:W,secondaryButtonFun:m,primaryButtonText:C,primaryButtonFun:v,showOriginalPrice:x,renderOriginalPrice:P,renderDiscountBadge:D,tagTypeConfig:M,fill:k,outline:S,memberPriceTextColor:B,copy:c,userType:L,memberImages:_,customTagsIcon:N,customTagStyle:R,onMemberSignUp:A,onPlusMemberAddCart:E,showMemberPrice:I},e.shopify_id+"-"+e.sku||V))}),Te&&n("div",{className:"laptop:hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[t("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>s(e=>!e),children:g?G??"Show less":Z??"Show more"}),t("svg",{xmlns:"http://www.w3.org/2000/svg",className:p("laptop:size-5 size-4",g&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:t("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]}):n("div",{className:"group relative",children:[t(Se,{modules:[De],spaceBetween:16,navigation:{nextEl:`.${F}`,prevEl:`.${H}`},onSwiper:e=>{K.current=e,d({isBeginning:e.isBeginning,isEnd:e.isEnd}),setTimeout(u,100)},slidesPerView:3,breakpoints:{1025:{freeMode:!1,slidesPerView:3},1440:{freeMode:!1,slidesPerView:l==="3"?3:4}},onReachEnd:()=>{d(e=>({...e,isEnd:!0}))},onReachBeginning:()=>{d(e=>({...e,isBeginning:!0}))},onFromEdge:()=>{d({isBeginning:!1,isEnd:!1})},className:"!overflow-visible [&_.swiper-wrapper]:items-start",children:r.map((e,V)=>t(Be,{className:"overflow-hidden",children:t(oe,{product:e,layoutMode:Y,className:"w-full max-w-full",showTags:f,stockDisplayMode:y,stockThresholdValue:h,onLearnMore:T,onShopNow:a,onAddToCart:b,onProductImageClick:w,classNames:j,secondaryButtonText:W,secondaryButtonFun:m,primaryButtonText:C,primaryButtonFun:v,showOriginalPrice:x,renderOriginalPrice:P,renderDiscountBadge:D,tagTypeConfig:M,fill:k,outline:S,memberPriceTextColor:B,copy:c,userType:L,memberImages:_,customTagsIcon:N,customTagStyle:R,onMemberSignUp:A,onPlusMemberAddCart:E,showMemberPrice:I})},e.shopify_id+"-"+e.sku||V))}),t("button",{className:`${H} tablet:block group/prev-mask absolute left-4 top-1/2 z-10 hidden -translate-y-1/2 ${O.isBeginning?"pointer-events-none opacity-0":"opacity-100"}`,"aria-label":c?.previousSlideLabel,children:t(Ae,{})}),t("button",{className:`${F} tablet:block group/next-mask absolute right-4 top-1/2 z-10 hidden -translate-y-1/2 ${O.isEnd?"pointer-events-none opacity-0":"opacity-100"}`,"aria-label":c?.nextSlideLabel,children:t(Ee,{})})]})})});ie.displayName="ProductsList";const ue=i.forwardRef(({className:r,data:o,onLearnMore:$,onShopNow:c,onAddToCart:f,onProductImageClick:y,onMemberSignUp:h,onPlusMemberAddCart:T,classNames:a,renderOriginalPrice:b,renderDiscountBadge:w,...j},W)=>{const m=i.useRef(null);Le(m,{componentType:Ne,componentName:Re,componentTitle:o.title,componentDescription:o.description}),i.useImperativeHandle(W,()=>m.current);const{theme:C="light",layoutMode:v="flex",showTags:x=!0,stockDisplayMode:P,stockThresholdValue:M,showOriginalPrice:k,secondaryButtonText:S,primaryButtonText:B,secondaryButtonFun:D,primaryButtonFun:L,isShowTab:_=!0,tagTypeConfig:N,fill:R,outline:A,memberPriceTextColor:E,copy:te,userType:q,memberImages:l,customTagsIcon:Z,customTagStyle:G,showMemberPrice:I,tileMaxRowsPc:J,tileMaxRowsMob:z,tileDesktopColumns:F,tileExpandText:H,tileCollapseText:O}=o,d=te||{},K=o.productsTab&&o.productsTab.length>0,u=_&&K,g=u?void 0:o.resourceBlocks?.find(s=>s.blockType==="PromotionalBar"&&s.display==="visible");return n("div",{ref:m,className:p("w-full",{"aiui-dark":C==="dark"},r,a?.root),style:{"--progress-track-bg":C==="dark"?"rgba(255, 255, 255, 0.2)":"rgba(0, 0, 0, 0.2)"},...j,children:[o.title&&t(ve,{as:"h2",html:o.title,size:4,className:p("text-info-primary mb-4 leading-tight",a?.title)}),o.description&&t(Ce,{size:3,as:"p",html:o.description,className:p("text-info-primary mb-6",a?.description)}),n(xe,{defaultValue:o.productsTab?.[0]?.id,className:"w-full",children:[u&&t(Pe,{className:"mb-6",children:o.productsTab?.map(s=>t(Me,{value:s.id,children:s.tab},"tab-"+s.id))}),u?o.productsTab?.map(s=>{const Q=s.resourceBlocks?.find(X=>X.blockType==="PromotionalBar"&&X.display==="visible");return n(ke,{value:s.id,children:[Q&&t(ne,{data:Q,className:p("laptop:mb-4 mb-3",a?.promotionalBar)}),t(ie,{products:s.data,layoutMode:v,copy:d,showTags:x,stockDisplayMode:P,stockThresholdValue:M,onLearnMore:$,onShopNow:c,onAddToCart:f,onProductImageClick:y,classNames:a,secondaryButtonText:S,secondaryButtonFun:D,primaryButtonText:B,primaryButtonFun:L,showOriginalPrice:k,renderOriginalPrice:b,renderDiscountBadge:w,tagTypeConfig:N,fill:R,outline:A,memberPriceTextColor:E,userType:q,memberImages:l,customTagsIcon:Z,customTagStyle:G,onMemberSignUp:h,onPlusMemberAddCart:T,showMemberPrice:I,tileMaxRowsPc:J,tileMaxRowsMob:z,tileDesktopColumns:F,tileExpandText:H,tileCollapseText:O})]},"tab-content-"+s.id)}):n(me,{children:[g&&t(ne,{data:g,className:p("laptop:mb-4 mb-3",a?.promotionalBar)}),t(ie,{products:o.productsCard,layoutMode:v,copy:d,showTags:x,stockDisplayMode:P,stockThresholdValue:M,onLearnMore:$,onShopNow:c,onAddToCart:f,onProductImageClick:y,classNames:a,secondaryButtonText:S,secondaryButtonFun:D,primaryButtonText:B,primaryButtonFun:L,showOriginalPrice:k,renderOriginalPrice:b,renderDiscountBadge:w,tagTypeConfig:N,fill:R,outline:A,memberPriceTextColor:E,userType:q,memberImages:l,customTagsIcon:Z,customTagStyle:G,onMemberSignUp:h,onPlusMemberAddCart:T,showMemberPrice:I,tileMaxRowsPc:J,tileMaxRowsMob:z,tileDesktopColumns:F,tileExpandText:H,tileCollapseText:O})]})]})]})});ue.displayName="ActiveShelf";const pe=ue;pe.ProductCard=oe;const Ie=we(pe);var Ze=Ie;export{Ze as default};

package/dist/esm/biz-components/ActiveShelf/styles.d.ts

@@ -0,0 +1,55 @@
+/**
+ * ActiveShelf 布局样式 key
+ * 每个 key 对应一个会随 layoutMode（flex=网格 / horizontal=横向轮播）切换的元素样式。
+ * 新增样式项时在此追加 key，TypeScript 会强制 flex / horizontal 两端都补齐，防止漂移。
+ */
+export type LayoutStyleKey = 'cardContent' | 'image' | 'imageOffset' | 'title' | 'description' | 'price' | 'priceLabel' | 'cardRadius' | 'priceGap' | 'discountBadgeSize' | 'discountBadgeText' | 'discountBadgeTextStyle2' | 'discountBadgeTextStyle3' | 'discountBadgeTextCenter' | 'buttonContainer' | 'buttonItem' | 'memberLabelContainer' | 'memberLabelText';
+/**
+ * 布局样式映射表
+ * 每个元素按 mobile（默认）→ laptop(1025) → desktop(1440) → lg-desktop(1920) 四档声明。
+ * - cardContent / memberLabelContainer 控制内边距
+ * - image 控制产品图尺寸
+ * - title / description / price / priceLabel / memberLabelText 控制字号
+ */
+export declare const layoutModeStyles: {
+    flex: {
+        cardContent: string;
+        image: string;
+        imageOffset: string;
+        title: string;
+        description: string;
+        price: string;
+        priceLabel: string;
+        cardRadius: string;
+        priceGap: string;
+        discountBadgeSize: string;
+        discountBadgeText: string;
+        discountBadgeTextStyle2: string;
+        discountBadgeTextStyle3: string;
+        discountBadgeTextCenter: string;
+        buttonContainer: string;
+        buttonItem: string;
+        memberLabelContainer: string;
+        memberLabelText: string;
+    };
+    horizontal: {
+        cardContent: string;
+        image: string;
+        imageOffset: string;
+        title: string;
+        description: string;
+        price: string;
+        priceLabel: string;
+        cardRadius: string;
+        priceGap: string;
+        discountBadgeSize: string;
+        discountBadgeText: string;
+        discountBadgeTextStyle2: string;
+        discountBadgeTextStyle3: string;
+        discountBadgeTextCenter: string;
+        buttonContainer: string;
+        buttonItem: string;
+        memberLabelContainer: string;
+        memberLabelText: string;
+    };
+};

package/dist/esm/biz-components/ActiveShelf/styles.js

@@ -0,0 +1 @@
+const t={flex:{cardContent:"px-2 pb-4 pt-6 laptop:px-4 desktop:p-6",image:"size-[125px] laptop:size-[180px] lg-desktop:size-[240px]",imageOffset:"-top-6 -left-2 -right-2 laptop:-left-4 laptop:-right-4 desktop:-left-6 desktop:-right-6",title:"text-[14px] leading-tight laptop:mb-1 laptop:text-[20px] lg-desktop:text-[24px] line-clamp-3 laptop:line-clamp-2",description:"hidden text-[14px] desktop:text-[16px] lg-desktop:text-[18px] laptop:block laptop:line-clamp-2 leading-normal",price:"text-[14px] leading-tight laptop:text-[20px] lg-desktop:text-[24px]",priceLabel:"text-[12px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",cardRadius:"rounded-box-small tablet:rounded-box",priceGap:"gap-[2px] laptop:gap-1",discountBadgeSize:"size-12 laptop:size-20 lg-desktop:size-24",discountBadgeText:"text-xs laptop:text-base lg-desktop:text-xl pl-2 pt-1 laptop:pl-4 laptop:pt-2",discountBadgeTextStyle2:"text-xs laptop:text-base lg-desktop:text-xl pt-2 desktop:pt-4",discountBadgeTextStyle3:"text-xs laptop:text-base lg-desktop:text-xl flex items-center pl-1 laptop:pl-2",discountBadgeTextCenter:"text-xs laptop:text-base lg-desktop:text-xl flex items-center justify-center",buttonContainer:"flex-wrap gap-2 laptop:flex-nowrap lg-desktop:gap-3",buttonItem:"w-full whitespace-nowrap laptop:w-fit laptop:min-w-0 laptop:whitespace-normal laptop:text-center",memberLabelContainer:"p-2 laptop:px-4 laptop:py-3 desktop:pl-6 desktop:py-4 desktop:pr-12 lg-desktop:pr-16",memberLabelText:"text-xs laptop:text-sm desktop:text-base lg-desktop:text-[18px]"},horizontal:{cardContent:"p-4 desktop:p-6",image:"size-[180px] lg-desktop:size-[240px]",imageOffset:"-top-4 -left-4 -right-4 desktop:-top-6 desktop:-left-6 desktop:-right-6",title:"mb-1 text-[20px] leading-[120%] lg-desktop:text-[24px] line-clamp-2",description:"text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 leading-normal",price:"text-[20px] leading-[120%] lg-desktop:text-[24px]",priceLabel:"text-[14px] leading-[140%] desktop:text-[16px] lg-desktop:text-[18px]",cardRadius:"rounded-box",priceGap:"gap-1",discountBadgeSize:"size-20 lg-desktop:size-24",discountBadgeText:"text-base lg-desktop:text-xl pt-2 pl-4",discountBadgeTextStyle2:"text-base lg-desktop:text-xl pt-2 desktop:pt-4",discountBadgeTextStyle3:"text-base lg-desktop:text-xl flex items-center pl-1 laptop:pl-2",discountBadgeTextCenter:"text-base lg-desktop:text-xl flex items-center justify-center",buttonContainer:"gap-2 lg-desktop:gap-3",buttonItem:"w-full whitespace-nowrap tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center",memberLabelContainer:"px-4 py-3 desktop:pl-6 desktop:py-4 desktop:pr-12 lg-desktop:pr-16",memberLabelText:"text-xs laptop:text-sm desktop:text-base lg-desktop:text-[18px]"}};export{t as layoutModeStyles};

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

@@ -2,6 +2,68 @@
  * 按钮功能类型
  */
 export type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore';
+/**
+ * 自定义折扣标签图标样式
+ * style1/style2/style3 为内置预设样式（写死在组件中），custom 为自定义上传图标
+ */
+export type DiscountTagStyle = 'style1' | 'style2' | 'style3' | 'custom';
+/**
+ * 自定义标签形态
+ * fill=填充（品牌渐变背景），outline=描边（透明背景 + 描边）
+ */
+export type TagVariant = 'fill' | 'outline';
+/**
+ * 标签形态配置（组件级）
+ * 按标签位置（第 0 个 / 第 1 个）统一指定形态，优先于 tag 数据自带 variant 与默认规则。
+ */
+export interface TagTypeConfig {
+    /** 第 0 个标签的形态（fill=填充 / outline=描边），空字符串视为未设置 */
+    firstTagVariant?: TagVariant | '';
+    /** 第 1 个标签的形态（fill=填充 / outline=描边），空字符串视为未设置 */
+    secondTagVariant?: TagVariant | '';
+}
+/**
+ * 标签颜色配置（组件级）
+ * 按形态（fill / outline）统一指定颜色，覆盖默认品牌色。
+ * - fill：bgColor=背景色，outlineColor=描边色
+ * - outline：outlineColor=描边色（文字色自动跟随），bgColor=背景色
+ */
+export interface TagColorConfig {
+    /** fill 形态标签颜色 */
+    fill?: {
+        bgColor?: string;
+        outlineColor?: string;
+    };
+    /** outline 形态标签颜色 */
+    outline?: {
+        outlineColor?: string;
+        bgColor?: string;
+    };
+}
+/**
+ * 组件布局模式
+ * flex=网格布局，horizontal=横向轮播
+ */
+export type ActiveShelfLayoutMode = 'flex' | 'horizontal';
+/**
+ * 用户身份类型
+ */
+export type UserType = 'guest' | 'member' | 'plus-member';
+/**
+ * SKU 会员活动标签类型
+ * guest=会员模块游客态活动文案，member=会员模块会员态活动文案（普通会员/付费会员共用）
+ */
+export type ActivityLabelType = 'guest' | 'member';
+/**
+ * SKU 会员活动配置项
+ * 依据飞书规则矩阵：activityLabels 为对象数组，每项含 type 与 label
+ */
+export interface ActivityLabel {
+    /** 标签类型：guest=游客态活动，member=会员态活动（普通/付费共用） */
+    type: ActivityLabelType;
+    /** 标签文案 */
+    label: string;
+}
 /**
  * ActiveShelf 文案配置接口
  * 注意：secondaryButtonText 和 shopNowText 作为高频属性保持在 data 的直接属性中
@@ -21,4 +83,30 @@ export interface CopyConfig {
     outOfStockLabel?: string;
     limitedStock?: string;
     couponTag?: string;
+    /** 作为 flooredOriginalPrice 的模板，支持 {amount} 占位符；无占位符时按纯前缀拼接 */
+    codeChannel?: string;
+    /** 会员模块游客状态标题文案 */
+    memberTitleLabelUpgrade?: string;
+    /** 会员模块普通会员状态标题文案 */
+    memberTitleLabel?: string;
+    /** 会员模块付费会员状态标题文案 */
+    plusmemberTitleLabel?: string;
+    /** 会员模块游客状态副标题文案 */
+    memberSubtitleLabelUpgrade?: string;
+    /** 会员模块普通会员状态副标题文案 */
+    memberSubtitleLabel?: string;
+    /** 会员模块付费会员状态副标题文案 */
+    plusmemberSubtitleLabel?: string;
+    /** 会员模块游客态活动文案 */
+    memberActivityLabelUnLogin?: string;
+    /** 会员模块会员态活动文案（普通会员/付费会员） */
+    memberActivityLabel?: string;
+    /** 会员模块游客态产品活动文案 */
+    productActivityLabelUnLogin?: string;
+    /** 会员模块会员态产品活动文案（普通会员/付费会员） */
+    productActivityLabel?: string;
+    /** 会员模块普通会员折扣文案，支持 {amount} 占位符（替换为普通会员折扣金额） */
+    memberDiscountLabel?: string;
+    /** 会员模块付费会员折扣文案，支持 {amount} 占位符（替换为付费会员折扣金额） */
+    plusMemberDiscountLabel?: string;
 }

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

@@ -1 +1 @@
-"use client";import{Fragment as Pe,jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as ae,useCallback as ne,useEffect as G,useImperativeHandle as Ee,useMemo as D,useRef as J,useState as E}from"react";import{Picture as me,Text as w,Button as oe,Container as pe,BrandStrip as Te}from"../../components/index.js";import{withLayout as He}from"../../shared/Styles.js";import{cn as T,getLocalizedPath as ie}from"../../helpers/utils.js";import Le,{useNavContext as te}from"./NavProvider.js";import{HeaderNavigationMenu as W,HeaderNavigationBlockType as H,HeaderNavigationActionBlockType as x}from"./types.js";import ze from"jump.js";import{useGSAP as le}from"@gsap/react";import{gsap as re}from"gsap";import{WithSidebar as fe,WithSupports as be,WithMulticol as ve,WithGroupCategory as ge,WithResource as he}from"./withCategory.js";import{Menu as Be,Close as ye,User as Re,LeftArrow as Ie,DownArrow as Ne,Polygon as Ae}from"./icons/index.js";import Oe from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as je}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as _e}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as We}from"./SidebarDropdown.js";import{useScrollLock as se}from"./useScrollLock.js";import{MulticolDropdown as $e}from"./MulticolDropdown.js";import{SupportsDropdown as Ke}from"./SupportsDropdown.js";import{MobileSidebarMenu as Fe}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Ue}from"./MobileSupportMenu.js";import{MobileMulticolMenu as Ge}from"./MobileMulticolMenu.js";import{MenuItem as ce}from"./MobileMenuComponents.js";import{useAiuiContext as ue}from"../AiuiProvider/index.js";import ke from"../../shared/throttle.js";const we=ae((a,l)=>{const{data:{header:r}={},buildProps:s,event:f,profile:C,theme:n="light",isTop:c=!1,searchResult:N,onSearch:m,isSearching:u,keywords:$,onPrimaryNavClick:y,onSeriesProductClick:v,onSidebarNavClick:M,onMobileMenuToggle:Y,headerId:S,cartCount:z,menuData:B,render:R,componentOverrides:q,...Q}=a,[I,d]=E(!1),[K,A]=E(!1),[O,L]=E(!1),[V,b]=E(!1),j=J(null),k=J(null),X=()=>{const g=document?.querySelector("body")?.offsetWidth||0;b(g<=1440)};G(()=>(X(),window.addEventListener("resize",X),()=>{window.removeEventListener("resize",X)}),[]),Ee(l,()=>k.current),G(()=>{k.current&&c&&ze(k.current,{duration:0,offset:k.current?.getBoundingClientRect()?.bottom||0})},[c]),G(()=>{if(c){A(!1),L(!1);return}let g=0,t=0,i=0;const p=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,h=p();g=h,A(h>300),L(h>30);const F=ke(()=>{const P=p(),U=P-g;L(P>30),U>0?(t=0,i+=U,i>=300&&P>300&&A(!0)):U<0&&(i=0,t+=Math.abs(U),t>=300&&(A(!1),t=0)),g=P},100);return window.addEventListener("scroll",F,{passive:!0}),()=>window.removeEventListener("scroll",F)},[c]),G(()=>{f&&(f.search=()=>d(!0))},[f]),le(()=>{j?.current&&I&&re.fromTo(j.current,{height:0},{height:"auto",duration:.3})},[I]),se(I);const Z=D(()=>r?.bar?.actions?.find(g=>g?.blockType===x.Search)?.searchBar?.[0]||{},[r]),_=R?.mobileHeaderNavigation;return e(Le,{buildProps:s,profile:C,isMobile:V,event:f,payloadData:r,onSidebarNavClick:M,onSeriesProductClick:v,cartCount:z,componentOverrides:q,children:e("header",{...Q,id:S||"header","data-ui-component-id":"HeaderNavigation",className:c?"relative z-[100] bg-white":T("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":K}),ref:k,children:o("div",{className:T("hover:bg-white hover:text-black",n==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!c&&O},{"hover:!text-black":n==="dark","!text-black":!c&&O}),onClick:()=>!c&&L(!0),children:[e(xe,{data:r,className:"desktop:block hidden !bg-white",theme:n,onNavItemClick:()=>!c&&L(!0),onPrimaryNavClick:y}),_?e(_,{className:"desktop:hidden block !bg-white",menuData:B,data:r,onPrimaryNavClick:y}):e(Ce,{menuData:B,data:r,className:"desktop:hidden block !bg-white",onPrimaryNavClick:y,onMobileMenuToggle:Y}),I&&o("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${k?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:j,className:T("overflow-y-auto",{}),children:e(Oe,{data:Z,keywords:$,isSearching:u,searchResult:N,onSearch:g=>{m?.(g)},onClose:()=>{m?.(),d(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>d(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:g=>{(g.key==="Enter"||g.key===" "||g.key==="Escape")&&(g.preventDefault(),d(!1))}})]})]})})})}),xe=ae((a,l)=>{const{data:r,onNavItemClick:s,className:f,theme:C,onPrimaryNavClick:n}=a,{event:c,profile:N}=te(),[m,u]=E(!1),{locale:$="us"}=ue(),y=D(()=>ge(r?.categories?.filter(t=>t?.pcShow)),[r]),[v,M]=E(null),[Y,S]=E([]),z=J(null),[B,R]=E(!1),q=J(null),Q=J(null),I=J(y.map(t=>Array(t?.length||0).fill(null)));G(()=>{y?.length&&S(y?.map((t,i)=>t?.map((p,h)=>({groupIndex:i,index:h,open:!1}))))},[y]);const d=D(()=>{let t=null;for(const i of Y){for(const p of i)if(p.open){t=p;break}if(t)break}return t},[Y]);se(!!d?.open||B);const K=(t,i,p)=>{R(!1);const h=y[i][p];if(h?.components?.[0]?.blockType===H.Links)h?.components?.[0]?.url&&window.open(h?.components?.[0]?.url,h?.components?.[0]?.target??"_blank");else{const F=y?.flat()||[],P=F?.findIndex(U=>U?.id===y[i][p]?.id);t.stopPropagation(),s?.(),n?.(F[P],P),M(h),S(U=>U.map(De=>De.map(ee=>ee.groupIndex===i&&ee.index===p?{...ee,open:!ee.open}:{...ee,open:!1})))}},A=(t,i,p)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),K(t,i,p)):t.key==="Escape"&&d?.groupIndex===i&&d?.index===p&&(t.preventDefault(),O())},O=()=>{S(t=>t.map(i=>i.map(p=>({...p,open:!1}))))},L=D(()=>{if(v)return v?.components?.[0]?.blockType},[v]),V=fe(We,v),b=he(je,v),j=ve($e,v),k=be(Ke,{categoriesItem:v,currentNavItemRef:I.current?.[d?.groupIndex||0]?.[d?.index||0]}),X=D(()=>{switch(L){case H.Sidebar:return e(V,{});case H.Resource:return e(b,{});case H.Supports:return e(k,{});case H.Multicol:return e(j,{});default:return null}},[L,v]),Z=D(()=>r?.bar?.actions?.filter(t=>t?.pcShow),[r]),_=D(()=>Z?.find(t=>t?.blockType===x.Profile),[Z]),g=ne(()=>{R(t=>!t)},[]);return G(()=>{if(z?.current){const t=z.current;return t.addEventListener("click",g),()=>{t.removeEventListener("click",g)}}},[g]),le(()=>{d?.open&&re.fromTo(Q?.current,{height:0},{height:"auto"})},[d?.open]),o(pe,{className:T("relative h-[92px]",f),children:[o("div",{ref:q,onClick:O,className:"flex h-full flex-col justify-end gap-4",children:[o("div",{className:"flex items-center justify-between",children:[e(Me,{}),e(de,{ref:z,actions:Z,activeStatus:B})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:y?.map((t,i)=>e("div",{className:"flex gap-3",children:t?.map((p,h)=>{const F=d?.groupIndex===i&&d?.index===h;return e("div",{ref:P=>{I.current[i][h]=P},className:"group",children:o("div",{className:"relative",children:[o("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:P=>K(P,i,h),onKeyDown:P=>A(P,i,h),"aria-expanded":F,"aria-haspopup":"true","aria-label":p.text,children:[e(w,{html:p.text,className:"text-sm font-bold leading-[1.4]"}),e(Ne,{className:T("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":d?.groupIndex===i&&d?.index===h,"opacity-100":m&&d?.groupIndex===i&&d?.index===h,invisible:!p?.components?.length||p?.components?.[0]?.blockType===H.Links})})]}),e("div",{className:T("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":F},C==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},p.id)})},`groupCategory-${i}`))})]}),o("div",{role:"menu","aria-hidden":!(d?.open&&v),className:T("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(d?.open&&v)}),onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),style:{height:`calc(100dvh - ${q?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:Q,className:T("relative z-50",{"overflow-hidden":L!==H.Supports}),children:X}),e("div",{className:"flex-1 bg-transparent",onClick:O,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),O())}})]}),B&&o("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${z?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:N?.email?o(Pe,{children:[e(w,{html:N?.nick_name||_?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:_?.profiles?.map(t=>e(ce,{className:"py-2",label:t?.title,href:ie(t?.url,$)},t.id))})]}):o(Pe,{children:[e(Ae,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(w,{html:_?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:_?.benefits?.map(t=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:t.benefitIcon?.url,className:"size-4 shrink-0",alt:t.benefit,width:16,height:16}),e(w,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),o("div",{className:"mt-4 flex flex-wrap gap-2",children:[e(oe,{className:"grow",variant:"secondary",size:"lg",onClick:()=>c?.join?.(),children:e(w,{html:_?.primaryButton||"Join Now",className:"font-bold"})}),e(oe,{className:"grow",variant:"primary",size:"lg",onClick:()=>c?.login?.(),children:e(w,{html:_?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>R(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),R(!1))}})]})]})}),Ce=ae(({data:a,menuData:l,className:r,onPrimaryNavClick:s,onMobileMenuToggle:f},C)=>{const n=D(()=>ge(a?.categories?.filter(b=>b?.mobileShow)),[a]),{currentMenu:c,setCurrentMenu:N,subSubCategory:m}=te(),[u,$]=E(!1),[y,v]=E(0),[M,Y]=E(null),S=J(null),z=J(!1);G(()=>{if(S?.current&&u){const b=S?.current?.getBoundingClientRect();v(window?.innerHeight-(b?.top||0))}f?.({open:u})},[u,f]),G(()=>{if(!u)return;const b=ke(()=>{if(S?.current){const j=S.current.getBoundingClientRect();z.current=!0,v(window?.innerHeight-(j?.top||0))}},100);return window.addEventListener("resize",b),()=>window.removeEventListener("resize",b)},[u]),le(()=>{if(z.current){re.set(S.current,{height:y}),z.current=!1;return}re.fromTo(S.current,{height:0},{height:y,duration:.3})},[y]),se(u);const B=D(()=>M?.components?.[0]?.blockType,[M]),R=be(Ue,{categoriesItem:M}),q=fe(Fe,M),Q=he(_e,M),I=ve(Ge,M),d=D(()=>{switch(B){case H.Sidebar:return e(q,{});case H.Resource:return e(Q,{});case H.Supports:return e(R,{});case H.Multicol:return e(I,{});default:return null}},[B,M,R]),K=ne(()=>{$(!1),v(0),N&&N(W.Primary)},[$,v,N]),A=D(()=>a?.bar?.actions?.filter(b=>b?.mobileShow&&b?.blockType!==x.Profile),[a]),O=D(()=>a?.bar?.actions?.find(b=>b?.mobileShow&&b?.blockType===x.Profile)||{},[a]),L=D(()=>{switch(c){case W.Primary:return e(qe,{actions:A,menuOpen:u,onMenuOpenClose:()=>{$(!1),v(0)},onMenuOpenClick:()=>$(!0)});case W.Secondary:return e(Se,{title:M?.text,onMenuOpenClose:K,onMenuBackClick:()=>N?.(W.Primary)});case W.Third:return e(Se,{title:m?.label,onMenuOpenClose:K,onMenuBackClick:()=>N?.(W.Secondary)});default:return null}},[u,c,N,M,A,m,K]),V=ne((b,j)=>{const k=Array.isArray(n)?Array.isArray(n[b])?n[b][j]:{}:{};Y(k),k?.components?.[0]?.blockType===H.Links?k?.components?.[0]?.url&&window.open(k?.components?.[0]?.url,k?.components?.[0]?.target??"_blank"):N?.(W.Secondary)},[n,N]);return o(pe,{className:T("relative h-[56px]",r),children:[L,u&&o("nav",{ref:S,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:y},role:"navigation","aria-label":"Mobile navigation menu",children:[c===W.Primary&&l?e("div",{className:"pt-4",children:e(Te,{data:l})}):null,c===W.Primary?e(Je,{categories:n,onPrimaryMenuClick:V,onPrimaryNavClick:s,profileAction:O}):d]})]})}),Je=({categories:a,onPrimaryMenuClick:l,profileAction:r,onPrimaryNavClick:s})=>o("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((f,C)=>o("div",{className:"",children:[e("div",{className:T("my-2 h-px w-full bg-[#E5E5E7]")}),f?.map((n,c)=>e(ce,{label:n.text,onClick:()=>{const m=(a?.flat()||[])?.findIndex(u=>u?.id===a[C][c]?.id);l(C,c),s?.(n,m)},icon:n.components?.[0]?.icon},n.id))]},`groupCategory-${C}`))}),e(Ye,{profileAction:r})]}),Ye=({profileAction:a})=>{const[l,r]=E(!1),{profile:s,event:f}=te(),{locale:C="us"}=ue();return o("div",{className:T("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":l}),children:[o("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>r(!l),"aria-expanded":l,"aria-label":s?.nick_name||a?.welcome,children:[o("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Re,{"aria-hidden":"true"})}),e(w,{html:s?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!s?.email&&e(Ne,{"aria-hidden":"true",className:T("laptop:size-4 size-5",{"rotate-180":l})})]}),s?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(n=>e(ce,{label:n?.title,href:ie(n?.url,C)},n.id))}),l&&!s?.email&&o("div",{className:"mt-4",children:[e(w,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(n=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:n.benefitIcon?.url,className:"size-4",alt:n.benefit,width:16,height:16}),e(w,{html:n.benefit,className:"text-sm font-bold leading-[1.4]"})]},n.id))})]}),!s?.email&&o("div",{className:"mt-4 flex items-center gap-3",children:[e(oe,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>f?.join?.(),children:e(w,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(oe,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>f?.login?.(),children:e(w,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},qe=({menuOpen:a,onMenuOpenClose:l,onMenuOpenClick:r,actions:s})=>o("div",{className:"flex h-full items-center justify-between gap-4",children:[e(Me,{}),o("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(de,{actions:s}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Close menu","aria-expanded":"true",children:e(ye,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Be,{className:"size-5","aria-hidden":"true"})})]})]}),Me=()=>{const{payloadData:a,isMobile:l}=te(),{locale:r="us"}=ue();return e("a",{href:ie("/",r),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:l?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},de=ae(({actions:a,activeStatus:l=!1},r)=>{const{event:s,cartCount:f}=te(),[C,n]=E(null),c=m=>{switch(m){case x.Search:return"Search";case x.Cart:return`Shopping cart${f>0?` (${f} items)`:""}`;case x.Profile:return"User profile";case x.Livestream:return"Livestream";default:return"Action"}},N=ne((m,u)=>{switch(n(u),m?.blockType){case x.Search:s?.search?.();break;case x.Cart:s?.cart?.();break;case x.Profile:s?.profile?.();break;case x.Livestream:s?.livestream?.();break;default:return()=>{}}},[s]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((m,u)=>o("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":m?.tag||"",ref:m.blockType===x.Profile?r:null,onClick:()=>N(m,u),"aria-label":c(m.blockType),"aria-pressed":l&&C===u,children:[e(w,{html:m.icon,className:T("size-5",{"text-brand-0":l&&C===u}),"aria-hidden":"true"}),m.blockType===x.Cart&&f>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(w,{html:f?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},m.id))})}),Se=({title:a,onMenuOpenClose:l,onMenuBackClick:r})=>o("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Back to previous menu",children:e(Ie,{className:"size-5","aria-hidden":"true"})}),e(w,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Close menu",children:e(ye,{className:"size-5","aria-hidden":"true"})})]});Ce.displayName="MobileNavigation",de.displayName="Actions",we.displayName="HeaderNavigation",xe.displayName="DesktopNavigation";var kt=He(we);export{kt as default};
+"use client";import{Fragment as Pe,jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as ae,useCallback as ne,useEffect as G,useImperativeHandle as Ee,useMemo as P,useRef as J,useState as D}from"react";import{Picture as me,Text as w,Button as oe,Container as pe,BrandStrip as Te}from"../../components/index.js";import{withLayout as He}from"../../shared/Styles.js";import{cn as E,getLocalizedPath as ie}from"../../helpers/utils.js";import Le,{useNavContext as te}from"./NavProvider.js";import{HeaderNavigationMenu as $,HeaderNavigationBlockType as T,HeaderNavigationActionBlockType as C}from"./types.js";import ze from"jump.js";import{useGSAP as le}from"@gsap/react";import{gsap as re}from"gsap";import{WithSidebar as fe,WithSupports as be,WithMulticol as ve,WithGroupCategory as ge,WithResource as he}from"./withCategory.js";import{Menu as Be,Close as ye,User as Re,LeftArrow as Ie,DownArrow as Ne,Polygon as Ae}from"./icons/index.js";import Oe from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as je}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as _e}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as We}from"./SidebarDropdown.js";import{useScrollLock as se}from"./useScrollLock.js";import{MulticolDropdown as $e}from"./MulticolDropdown.js";import{SupportsDropdown as Ke}from"./SupportsDropdown.js";import{MobileSidebarMenu as Fe}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Ue}from"./MobileSupportMenu.js";import{MobileMulticolMenu as Ge}from"./MobileMulticolMenu.js";import{MenuItem as ce}from"./MobileMenuComponents.js";import{useAiuiContext as ue}from"../AiuiProvider/index.js";import ke from"../../shared/throttle.js";const we=ae((a,s)=>{const{data:{header:r}={},buildProps:c,event:f,profile:H,theme:n="light",isTop:i=!1,searchResult:v,onSearch:p,isSearching:u,keywords:z,onPrimaryNavClick:N,onSeriesProductClick:g,onSidebarNavClick:x,onMobileMenuToggle:Y,headerId:M,cartCount:B,menuData:R,render:I,componentOverrides:q,...Q}=a,[A,d]=D(!1),[K,O]=D(!1),[j,L]=D(!1),[V,b]=D(!1),_=J(null),k=J(null),X=()=>{const h=document?.querySelector("body")?.offsetWidth||0;b(h<=1440)};G(()=>(X(),window.addEventListener("resize",X),()=>{window.removeEventListener("resize",X)}),[]),Ee(s,()=>k.current),G(()=>{k.current&&i&&ze(k.current,{duration:0,offset:k.current?.getBoundingClientRect()?.bottom||0})},[i]),G(()=>{if(i){O(!1),L(!1);return}let h=0,t=0,l=0;const m=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,y=m();h=y,O(y>300),L(y>30);const F=ke(()=>{const S=m(),U=S-h;L(S>30),U>0?(t=0,l+=U,l>=300&&S>300&&O(!0)):U<0&&(l=0,t+=Math.abs(U),t>=300&&(O(!1),t=0)),h=S},100);return window.addEventListener("scroll",F,{passive:!0}),()=>window.removeEventListener("scroll",F)},[i]),G(()=>{f&&(f.search=()=>d(!0))},[f]),le(()=>{_?.current&&A&&re.fromTo(_.current,{height:0},{height:"auto",duration:.3})},[A]),se(A);const Z=P(()=>r?.bar?.actions?.find(h=>h?.blockType===C.Search)?.searchBar?.[0]||{},[r]),W=I?.mobileHeaderNavigation;return e(Le,{buildProps:c,profile:H,isMobile:V,event:f,payloadData:r,onSidebarNavClick:x,onSeriesProductClick:g,cartCount:B,componentOverrides:q,children:e("header",{...Q,id:M||"header","data-ui-component-id":"HeaderNavigation",className:i?"relative z-[100] bg-white":E("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":K}),ref:k,children:o("div",{className:E("hover:bg-white hover:text-black",n==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!i&&j},{"hover:!text-black":n==="dark","!text-black":!i&&j}),onClick:()=>!i&&L(!0),children:[e(Ce,{data:r,className:"desktop:block hidden !bg-white",theme:n,onNavItemClick:()=>!i&&L(!0),onPrimaryNavClick:N}),W?e(W,{className:"desktop:hidden block !bg-white",menuData:R,data:r,onPrimaryNavClick:N}):e(xe,{menuData:R,data:r,className:"desktop:hidden block !bg-white",onPrimaryNavClick:N,onMobileMenuToggle:Y}),A&&o("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${k?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:_,className:E("overflow-y-auto",{}),children:e(Oe,{data:Z,keywords:z,isSearching:u,searchResult:v,onSearch:h=>{p?.(h)},onClose:()=>{p?.(),d(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>d(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:h=>{(h.key==="Enter"||h.key===" "||h.key==="Escape")&&(h.preventDefault(),d(!1))}})]})]})})})}),Ce=ae((a,s)=>{const{data:r,onNavItemClick:c,className:f,theme:H,onPrimaryNavClick:n}=a,{event:i,profile:v}=te(),[p,u]=D(!1),{locale:z="us"}=ue(),N=P(()=>ge(r?.categories?.filter(t=>t?.pcShow)),[r]),[g,x]=D(null),[Y,M]=D([]),B=J(null),[R,I]=D(!1),q=J(null),Q=J(null),A=J(N.map(t=>Array(t?.length||0).fill(null)));G(()=>{N?.length&&M(N?.map((t,l)=>t?.map((m,y)=>({groupIndex:l,index:y,open:!1}))))},[N]);const d=P(()=>{let t=null;for(const l of Y){for(const m of l)if(m.open){t=m;break}if(t)break}return t},[Y]);se(!!d?.open||R);const K=(t,l,m)=>{I(!1);const y=N[l][m];if(y?.components?.[0]?.blockType===T.Links)y?.components?.[0]?.url&&window.open(y?.components?.[0]?.url,y?.components?.[0]?.target??"_blank");else{const F=N?.flat()||[],S=F?.findIndex(U=>U?.id===N[l][m]?.id);t.stopPropagation(),c?.(),n?.(F[S],S),x(y),M(U=>U.map(De=>De.map(ee=>ee.groupIndex===l&&ee.index===m?{...ee,open:!ee.open}:{...ee,open:!1})))}},O=(t,l,m)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),K(t,l,m)):t.key==="Escape"&&d?.groupIndex===l&&d?.index===m&&(t.preventDefault(),j())},j=()=>{M(t=>t.map(l=>l.map(m=>({...m,open:!1}))))},L=P(()=>{if(g)return g?.components?.[0]?.blockType},[g]),V=fe(We,g),b=he(je,g),_=ve($e,g),k=be(Ke,{categoriesItem:g,currentNavItemRef:A.current?.[d?.groupIndex||0]?.[d?.index||0]}),X=P(()=>{switch(L){case T.Sidebar:return e(V,{});case T.Resource:return e(b,{});case T.Supports:return e(k,{});case T.Multicol:return e(_,{});default:return null}},[L,g]),Z=P(()=>r?.bar?.actions?.filter(t=>t?.pcShow),[r]),W=P(()=>Z?.find(t=>t?.blockType===C.Profile),[Z]),h=ne(()=>{I(t=>!t)},[]);return G(()=>{if(B?.current){const t=B.current;return t.addEventListener("click",h),()=>{t.removeEventListener("click",h)}}},[h]),le(()=>{d?.open&&re.fromTo(Q?.current,{height:0},{height:"auto"})},[d?.open]),o(pe,{className:E("relative h-[92px]",f),children:[o("div",{ref:q,onClick:j,className:"flex h-full flex-col justify-end gap-4",children:[o("div",{className:"flex items-center justify-between",children:[e(Me,{}),e(de,{ref:B,actions:Z,activeStatus:R})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:N?.map((t,l)=>e("div",{className:"flex gap-3",children:t?.map((m,y)=>{const F=d?.groupIndex===l&&d?.index===y;return e("div",{ref:S=>{A.current[l][y]=S},className:"group",children:o("div",{className:"relative",children:[o("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:S=>K(S,l,y),onKeyDown:S=>O(S,l,y),"aria-expanded":F,"aria-haspopup":"true","aria-label":m.text,children:[e(w,{html:m.text,className:"text-sm font-bold leading-[1.4]"}),e(Ne,{className:E("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":d?.groupIndex===l&&d?.index===y,"opacity-100":p&&d?.groupIndex===l&&d?.index===y,invisible:!m?.components?.length||m?.components?.[0]?.blockType===T.Links})})]}),e("div",{className:E("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":F},H==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},m.id)})},`groupCategory-${l}`))})]}),o("div",{role:"menu","aria-hidden":!(d?.open&&g),className:E("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(d?.open&&g)}),onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),style:{height:`calc(100dvh - ${q?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:Q,className:E("relative z-50",{"overflow-hidden":L!==T.Supports}),children:X}),e("div",{className:"flex-1 bg-transparent",onClick:j,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),j())}})]}),R&&o("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${B?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:v?.email?o(Pe,{children:[e(w,{html:v?.nick_name||W?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:W?.profiles?.map(t=>e(ce,{className:"py-2",label:t?.title,href:ie(t?.url,z)},t.id))})]}):o(Pe,{children:[e(Ae,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(w,{html:W?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:W?.benefits?.map(t=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:t.benefitIcon?.url,className:"size-4 shrink-0",alt:t.benefit,width:16,height:16}),e(w,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),o("div",{className:"mt-4 flex flex-wrap gap-2",children:[e(oe,{className:"grow",variant:"secondary",size:"lg",onClick:()=>i?.join?.(),children:e(w,{html:W?.primaryButton||"Join Now",className:"font-bold"})}),e(oe,{className:"grow",variant:"primary",size:"lg",onClick:()=>i?.login?.(),children:e(w,{html:W?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>I(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),I(!1))}})]})]})}),xe=ae(({data:a,menuData:s,className:r,onPrimaryNavClick:c,onMobileMenuToggle:f},H)=>{const n=P(()=>ge(a?.categories?.filter(b=>b?.mobileShow)),[a]),{currentMenu:i,setCurrentMenu:v,subSubCategory:p}=te(),[u,z]=D(!1),[N,g]=D(0),[x,Y]=D(null),M=J(null),B=J(!1);G(()=>{if(M?.current&&u){const b=M?.current?.getBoundingClientRect();g(window?.innerHeight-(b?.top||0))}f?.({open:u})},[u,f]),G(()=>{if(!u)return;const b=ke(()=>{if(M?.current){const _=M.current.getBoundingClientRect();B.current=!0,g(window?.innerHeight-(_?.top||0))}},100);return window.addEventListener("resize",b),()=>window.removeEventListener("resize",b)},[u]),le(()=>{if(B.current){re.set(M.current,{height:N}),B.current=!1;return}re.fromTo(M.current,{height:0},{height:N,duration:.3})},[N]),se(u);const R=P(()=>x?.components?.[0]?.blockType,[x]),I=be(Ue,{categoriesItem:x}),q=fe(Fe,x),Q=he(_e,x),A=ve(Ge,x),d=P(()=>{switch(R){case T.Sidebar:return e(q,{});case T.Resource:return e(Q,{});case T.Supports:return e(I,{});case T.Multicol:return e(A,{});default:return null}},[R,x,I]),K=ne(()=>{z(!1),g(0),v&&v($.Primary)},[z,g,v]),O=P(()=>a?.bar?.actions?.filter(b=>b?.mobileShow&&b?.blockType!==C.Profile),[a]),j=P(()=>a?.bar?.actions?.find(b=>b?.mobileShow&&b?.blockType===C.Profile)||{},[a]),L=P(()=>{switch(i){case $.Primary:return e(qe,{actions:O,menuOpen:u,onMenuOpenClose:()=>{z(!1),g(0)},onMenuOpenClick:()=>z(!0)});case $.Secondary:return e(Se,{title:x?.text,onMenuOpenClose:K,onMenuBackClick:()=>v?.($.Primary)});case $.Third:return e(Se,{title:p?.label,onMenuOpenClose:K,onMenuBackClick:()=>v?.($.Secondary)});default:return null}},[u,i,v,x,O,p,K]),V=ne((b,_)=>{const k=Array.isArray(n)?Array.isArray(n[b])?n[b][_]:{}:{};Y(k),k?.components?.[0]?.blockType===T.Links?k?.components?.[0]?.url&&window.open(k?.components?.[0]?.url,k?.components?.[0]?.target??"_blank"):v?.($.Secondary)},[n,v]);return o(pe,{className:E("relative h-[56px]",r),children:[L,u&&o("nav",{ref:M,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:N},role:"navigation","aria-label":"Mobile navigation menu",children:[i===$.Primary&&s?e("div",{className:"pt-4",children:e(Te,{data:s})}):null,i===$.Primary?e(Je,{categories:n,onPrimaryMenuClick:V,onPrimaryNavClick:c,profileAction:j,menuData:s}):d]})]})}),Je=({categories:a,onPrimaryMenuClick:s,profileAction:r,onPrimaryNavClick:c,menuData:f})=>o("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((H,n)=>o("div",{className:"",children:[n>0||f?e("div",{className:E("my-2 h-px w-full bg-[#E5E5E7]")}):null,H?.map((i,v)=>e(ce,{label:i.text,onClick:()=>{const u=(a?.flat()||[])?.findIndex(z=>z?.id===a[n][v]?.id);s(n,v),c?.(i,u)},icon:i.components?.[0]?.icon},i.id))]},`groupCategory-${n}`))}),e(Ye,{profileAction:r})]}),Ye=({profileAction:a})=>{const[s,r]=D(!1),{profile:c,event:f}=te(),{locale:H="us"}=ue();return o("div",{className:E("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":s}),children:[o("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>r(!s),"aria-expanded":s,"aria-label":c?.nick_name||a?.welcome,children:[o("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Re,{"aria-hidden":"true"})}),e(w,{html:c?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(Ne,{"aria-hidden":"true",className:E("laptop:size-4 size-5",{"rotate-180":s})})]}),c?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(n=>e(ce,{label:n?.title,href:ie(n?.url,H)},n.id))}),s&&!c?.email&&o("div",{className:"mt-4",children:[e(w,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(n=>o("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:n.benefitIcon?.url,className:"size-4",alt:n.benefit,width:16,height:16}),e(w,{html:n.benefit,className:"text-sm font-bold leading-[1.4]"})]},n.id))})]}),!c?.email&&o("div",{className:"mt-4 flex items-center gap-3",children:[e(oe,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>f?.join?.(),children:e(w,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(oe,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>f?.login?.(),children:e(w,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},qe=({menuOpen:a,onMenuOpenClose:s,onMenuOpenClick:r,actions:c})=>o("div",{className:"flex h-full items-center justify-between gap-4",children:[e(Me,{}),o("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(de,{actions:c}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Close menu","aria-expanded":"true",children:e(ye,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Be,{className:"size-5","aria-hidden":"true"})})]})]}),Me=()=>{const{payloadData:a,isMobile:s}=te(),{locale:r="us"}=ue();return e("a",{href:ie("/",r),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:s?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},de=ae(({actions:a,activeStatus:s=!1},r)=>{const{event:c,cartCount:f}=te(),[H,n]=D(null),i=p=>{switch(p){case C.Search:return"Search";case C.Cart:return`Shopping cart${f>0?` (${f} items)`:""}`;case C.Profile:return"User profile";case C.Livestream:return"Livestream";default:return"Action"}},v=ne((p,u)=>{switch(n(u),p?.blockType){case C.Search:c?.search?.();break;case C.Cart:c?.cart?.();break;case C.Profile:c?.profile?.();break;case C.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((p,u)=>o("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":p?.tag||"",ref:p.blockType===C.Profile?r:null,onClick:()=>v(p,u),"aria-label":i(p.blockType),"aria-pressed":s&&H===u,children:[e(w,{html:p.icon,className:E("size-5",{"text-brand-0":s&&H===u}),"aria-hidden":"true"}),p.blockType===C.Cart&&f>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(w,{html:f?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},p.id))})}),Se=({title:a,onMenuOpenClose:s,onMenuBackClick:r})=>o("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Back to previous menu",children:e(Ie,{className:"size-5","aria-hidden":"true"})}),e(w,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Close menu",children:e(ye,{className:"size-5","aria-hidden":"true"})})]});xe.displayName="MobileNavigation",de.displayName="Actions",we.displayName="HeaderNavigation",Ce.displayName="DesktopNavigation";var kt=He(we);export{kt as default};

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js

@@ -1 +1 @@
-import{Fragment as we,jsx as t,jsxs as h}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as J,Picture as W,Badge as oe}from"../../../../../components/index.js";import{useCallback as L,useMemo as Y,useState as P,forwardRef as Q,useRef as V,useEffect as R,useImperativeHandle as re}from"react";import{Swiper as $,SwiperSlide as B}from"swiper/react";import{Navigation as K,Mousewheel as X,Thumbs as O,Pagination as ee,Autoplay as ne}from"swiper/modules";import{cn as k}from"../../../../../helpers/index.js";import{GalleryTabType as A}from"./types.js";import{Content as se,List as ce,Root as de,Trigger as ue}from"@radix-ui/react-tabs";import{useBizProductContext as q}from"../../../BizProductProvider.js";import{useVariantMedia as pe}from"../../../hooks/use-variant-media.js";import{SpecsModal as me}from"./components/SpecsModal.js";import be from"./components/CompareModal.js";import{formatPrice as ge}from"../../../utils/index.js";import{withLayout as fe}from"../../../../../shared/Styles.js";import{gaTrack as ve}from"../../../../../shared/track.js";import{ExposureDetector as ye}from"../../../../../components/index.js";import{debounce as te}from"es-toolkit";const ae=e=>h("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),t("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),le=e=>h("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),t("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),he=()=>{const{copyWriting:e}=Z(),{product:o,variant:d,selectedOptions:C}=q(),m=pe({product:o,variant:d}),[f,w]=P(null),I=V(null),b=d?.metafields?.component?.custom_media_list;let s,x,S,G;b&&b?.available?(s=b?.product||[],x=b?.scenarios||[],S=b?.keyFeatures||[],G=b?.video||[]):(s=m?.productList,x=m?.sceneList,S=m?.keyFeaturesList,G=m?.videoList);const c=Y(()=>[...s,...x,...G],[s,x,G]),p={productList:s,sceneList:x,keyFeaturesList:S,videoList:G},a=Y(()=>{const i=o?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[],n=d?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[];return i?.map(g=>{const E=Array.isArray(n)?n?.find(F=>g?.galleries===F?.galleries):{};let D=p[g?.galleries]||[];if(E?.images&&Array.isArray(E.images)&&E.images.length>0){const F=E.images.map(u=>{const _=[];if(u.image_1920&&u.image_1920.trim()&&_.push(`${u.image_1920}`),u.image_1440&&u.image_1440.trim()&&_.push(`${u.image_1440} 1919`),u.image_1024&&u.image_1024.trim()&&_.push(`${u.image_1024} 1439`),u.image_768&&u.image_768.trim()&&_.push(`${u.image_768} 1023`),u.image_390&&u.image_390.trim()&&_.push(`${u.image_390} 767`),_.length>0){const U=_.join(", ");return{image:{url:U,altText:g.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(u=>u!==null);F.length>0&&(D=F)}return{...g,galleries:D}}).filter(g=>g.galleries.length>0)},[d?.payload,p,o?.payload]),[y,l]=P(a?.[0]),[r,N]=P(0),[v,T]=P(null),M=L(()=>{const i=(r+1)%a.length;N(i),l(a[i]),T(0)},[r,a]),z=L(()=>{const i=r===0?a.length-1:r-1;N(i),l(a[i]);const n=a[i]?.galleries||[];T(n.length-1)},[r,a]);R(()=>{r!=null&&requestAnimationFrame(()=>{I.current?.scrollToTab(r)})},[r]),R(()=>{l(a[0]),N(0)},[d?.id]);const H=(i,n)=>{switch(i?.galleryTabType){case A.GALLERY_IMAGE_MAIN:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_IMAGE_FEATURES:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_IMAGE_SCENE:return t(j,{...i,index:n,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});case A.GALLERY_VIDEO:return t(Te,{...i,onNextTab:M,onPrevTab:z,targetSlideIndex:v,onSlideChange:()=>T(null)});default:return null}};return t("div",{id:"ipc-product-gallery",children:h(de,{className:"relative",value:y?.tabValue,defaultValue:a?.[0]?.tabValue,children:[t("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:a.map((i,n)=>t(se,{className:"h-full",value:i.tabValue,children:H(i,n)},i.tabValue))}),t(ie,{ref:I,galleryTabs:a,activeGalleryTab:y,setActiveGalleryTab:l,setActiveTabIndex:N,setTargetSlideIndex:T})]})})},ie=Q((e,o)=>{const{galleryTabs:d,activeGalleryTab:C,setActiveGalleryTab:m,setActiveTabIndex:f,setTargetSlideIndex:w}=e,{product:I}=q(),b=V(null),s=V(new Map),x=L(c=>{if(b.current){const p=b.current,a=c.currentTarget,y=a.offsetLeft-p.offsetWidth/2+a.offsetWidth/2;p.scrollTo({left:y,behavior:"smooth"})}},[]),S=L((c,p,a)=>{m(p),f(a),w(0),x(c)},[m,f,w,x]),G=L(c=>{if(b.current&&d[c]){const p=b.current,a=d[c],y=s.current.get(a.tabValue);if(y){const l=y.offsetLeft-p.offsetWidth/2+y.offsetWidth/2;p.scrollTo({left:l,behavior:"smooth"})}}},[d]);return re(o,()=>({scrollToTab:G})),h("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[t(ce,{ref:b,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t("div",{className:"whitespace-nowrap",children:d?.map((c,p)=>t(ue,{ref:a=>{a?s.current.set(c.tabValue,a):s.current.delete(c.tabValue)},className:k("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",c.tabValue===C?.tabValue&&"bg-white"),onClick:a=>S(a,c,p),value:c.tabValue,children:c.tabLabel},c.tabValue+p))})}),t("div",{className:"desktop:gap-2 desktop:flex hidden",children:I.metafields?.global?.specifications&&h(we,{children:[t(me,{})," | ",t(be,{})]})})]})});ie.displayName="ProductGalleryTab";const j=Q((e,o)=>{const{locale:d="us",copyWriting:C}=Z(),{variant:m,totalSavings:f}=q(),w=V(null),[I,b]=P(null),[s,x]=P(null),[S,G]=P([]),c=V(null),p=Y(()=>{if(e?.galleryTabType===A.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===A.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,A.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),a=L(()=>{s?.isBeginning?e.onPrevTab?.():s?.slidePrev()},[s,e]),y=L(()=>{s?.isEnd?e.onNextTab?.():s?.slideNext()},[s,e]);return R(()=>{s&&e.targetSlideIndex&&(s.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[s,e.targetSlideIndex,e]),R(()=>{const l=()=>{if(!e?.comment?.content||!c.current)return;const v=c.current;v.textContent="Test";const M=v.offsetHeight*2+2,H=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),i=[];let n="";for(let g=0;g<H.length;g++){const E=H[g],D=n?`${n} ${E}`:E;v.textContent=D,v.offsetHeight>M?n?(i.push(n),n=E):(i.push(E),n=""):n=D}n&&i.push(n),v.textContent="",G(i)},r=requestAnimationFrame(()=>{requestAnimationFrame(()=>{l()})}),N=()=>{l()};return window.addEventListener("resize",te(N,500)),()=>{cancelAnimationFrame(r),window.removeEventListener("resize",te(N,500))}},[e?.comment?.content]),h("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{ref:o,className:"h-full",onSwiper:x,onTouchEnd:(l,r)=>{l.isBeginning&&l.swipeDirection==="prev"?a():l.isEnd&&l.swipeDirection==="next"&&y()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:I},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((l,r)=>{const N=`${e.tabValue}-${r}`,v=()=>{ve({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:r+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},T=l?._responsiveSource||l?.image?.url||"";return t(B,{className:"h-full",children:t(ye,{onExposure:v,exposureKey:N,threshold:.5,duration:2e3,className:"h-full",children:t(W,{source:T,alt:l?.image?.altText,className:k("h-full",p),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+r)})}),m.availableForSale&&!!f&&!e.index&&t(oe,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${ge({amount:f,currencyCode:m?.price?.currencyCode,locale:d})} ${C?.off}`}),t("div",{className:k("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:a,children:t(ae,{className:k("tablet:size-10 lg-desktop:size-12")})}),t("div",{className:k("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:y,children:t(le,{className:k("tablet:size-10 lg-desktop:size-12")})}),h("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[t("div",{className:"tablet:block hidden",children:t($,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[K,O],children:e?.galleries?.map((l,r)=>t(B,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:t(W,{source:l.image?.url,alt:l.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+r))})}),!e?.index&&h("div",{className:"flex items-center gap-2",children:[t(W,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),h("div",{className:"relative max-w-[528px]",children:[t("div",{ref:c,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),t($,{modules:[ne],loop:S.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:S.length>0?S.map((l,r)=>t(B,{children:t(J,{html:l,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},r+"text-group")):t(B,{children:t(J,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),t("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});j.displayName="ProductGalleryTabImage";const xe=({src:e})=>{const o=V(null);return R(()=>{const d=o.current;d&&(d.muted=!0,d.play().catch(()=>{}))},[]),h("video",{ref:o,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[t("track",{kind:"captions"}),t("source",{src:e,type:"video/mp4"}),t("source",{src:e,type:"video/webm"}),t("source",{src:e,type:"video/ogg"})]})},Te=e=>{const[o,d]=P(null),C=L(()=>{o?.isBeginning?e.onPrevTab?.():o?.slidePrev()},[o,e]),m=L(()=>{o?.isEnd?e.onNextTab?.():o?.slideNext()},[o,e]);return R(()=>{o&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(o.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[o,e.targetSlideIndex,e]),h("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{className:"h-full",onSwiper:d,onTouchEnd:(f,w)=>{f.isBeginning&&f.swipeDirection==="prev"?C():f.isEnd&&f.swipeDirection==="next"&&m()},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((f,w)=>t(B,{className:"h-full bg-info-primary",children:t(xe,{src:f?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+w))}),t("div",{className:k("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:C,children:t(ae,{className:"tablet:size-10 lg-desktop:size-12"})}),t("div",{className:k("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:t(le,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Be=e=>t("div",{children:"3D View"});var He=fe(he);export{He as default};
+import{jsx as t,jsxs as x}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as J,Picture as W,Badge as oe}from"../../../../../components/index.js";import{useCallback as N,useMemo as Y,useState as E,forwardRef as Q,useRef as V,useEffect as R,useImperativeHandle as re}from"react";import{Swiper as $,SwiperSlide as B}from"swiper/react";import{Navigation as K,Mousewheel as X,Thumbs as O,Pagination as ee,Autoplay as ne}from"swiper/modules";import{cn as L}from"../../../../../helpers/index.js";import{GalleryTabType as _}from"./types.js";import{Content as se,List as ce,Root as de,Trigger as ue}from"@radix-ui/react-tabs";import{useBizProductContext as q}from"../../../BizProductProvider.js";import{useVariantMedia as pe}from"../../../hooks/use-variant-media.js";import{SpecsModal as me}from"./components/SpecsModal.js";import be from"./components/CompareModal.js";import{formatPrice as ge}from"../../../utils/index.js";import{withLayout as fe}from"../../../../../shared/Styles.js";import{gaTrack as ve}from"../../../../../shared/track.js";import{ExposureDetector as ye}from"../../../../../components/index.js";import{debounce as te}from"es-toolkit";const ae=e=>x("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),t("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),le=e=>x("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),t("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),he=()=>{const{copyWriting:e}=Z(),{product:r,variant:c,selectedOptions:P}=q(),m=pe({product:r,variant:c}),[f,S]=E(null),A=V(null),T=c?.metafields?.component?.custom_media_list;let o,v,y,h;T&&T?.available?(o=T?.product||[],v=T?.scenarios||[],y=T?.keyFeatures||[],h=T?.video||[]):(o=m?.productList,v=m?.sceneList,y=m?.keyFeaturesList,h=m?.videoList);const k=Y(()=>[...o,...v,...h],[o,v,h]),I={productList:o,sceneList:v,keyFeaturesList:y,videoList:h},d=Y(()=>{const i=r?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[],s=c?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[];return i?.map(g=>{const G=Array.isArray(s)?s?.find(F=>g?.galleries===F?.galleries):{};let D=I[g?.galleries]||[];if(G?.images&&Array.isArray(G.images)&&G.images.length>0){const F=G.images.map(u=>{const C=[];if(u.image_1920&&u.image_1920.trim()&&C.push(`${u.image_1920}`),u.image_1440&&u.image_1440.trim()&&C.push(`${u.image_1440} 1919`),u.image_1024&&u.image_1024.trim()&&C.push(`${u.image_1024} 1439`),u.image_768&&u.image_768.trim()&&C.push(`${u.image_768} 1023`),u.image_390&&u.image_390.trim()&&C.push(`${u.image_390} 767`),C.length>0){const U=C.join(", ");return{image:{url:U,altText:g.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(u=>u!==null);F.length>0&&(D=F)}return{...g,galleries:D}}).filter(g=>g.galleries.length>0)},[c?.payload,I,r?.payload]),[n,a]=E(d?.[0]),[l,p]=E(0),[b,w]=E(null),M=N(()=>{const i=(l+1)%d.length;p(i),a(d[i]),w(0)},[l,d]),z=N(()=>{const i=l===0?d.length-1:l-1;p(i),a(d[i]);const s=d[i]?.galleries||[];w(s.length-1)},[l,d]);R(()=>{l!=null&&requestAnimationFrame(()=>{A.current?.scrollToTab(l)})},[l]),R(()=>{a(d[0]),p(0)},[c?.id]);const H=(i,s)=>{switch(i?.galleryTabType){case _.GALLERY_IMAGE_MAIN:return t(j,{...i,index:s,onNextTab:M,onPrevTab:z,targetSlideIndex:b,onSlideChange:()=>w(null)});case _.GALLERY_IMAGE_FEATURES:return t(j,{...i,index:s,onNextTab:M,onPrevTab:z,targetSlideIndex:b,onSlideChange:()=>w(null)});case _.GALLERY_IMAGE_SCENE:return t(j,{...i,index:s,onNextTab:M,onPrevTab:z,targetSlideIndex:b,onSlideChange:()=>w(null)});case _.GALLERY_VIDEO:return t(Te,{...i,onNextTab:M,onPrevTab:z,targetSlideIndex:b,onSlideChange:()=>w(null)});default:return null}};return t("div",{id:"ipc-product-gallery",children:x(de,{className:"relative",value:n?.tabValue,defaultValue:d?.[0]?.tabValue,children:[t("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:d.map((i,s)=>t(se,{className:"h-full",value:i.tabValue,children:H(i,s)},i.tabValue))}),t(ie,{ref:A,galleryTabs:d,activeGalleryTab:n,setActiveGalleryTab:a,setActiveTabIndex:p,setTargetSlideIndex:w})]})})},ie=Q((e,r)=>{const{galleryTabs:c,activeGalleryTab:P,setActiveGalleryTab:m,setActiveTabIndex:f,setTargetSlideIndex:S}=e,{product:A,compareData:T}=q(),o=V(null),v=V(new Map),y=!!A.metafields?.global?.specifications?.length,h=!!T?.specificationKeys?.length,k=N(n=>{if(o.current){const a=o.current,l=n.currentTarget,p=l.offsetLeft-a.offsetWidth/2+l.offsetWidth/2;a.scrollTo({left:p,behavior:"smooth"})}},[]),I=N((n,a,l)=>{m(a),f(l),S(0),k(n)},[m,f,S,k]),d=N(n=>{if(o.current&&c[n]){const a=o.current,l=c[n],p=v.current.get(l.tabValue);if(p){const b=p.offsetLeft-a.offsetWidth/2+p.offsetWidth/2;a.scrollTo({left:b,behavior:"smooth"})}}},[c]);return re(r,()=>({scrollToTab:d})),x("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[t(ce,{ref:o,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t("div",{className:"whitespace-nowrap",children:c?.map((n,a)=>t(ue,{ref:l=>{l?v.current.set(n.tabValue,l):v.current.delete(n.tabValue)},className:L("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",n.tabValue===P?.tabValue&&"bg-white"),onClick:l=>I(l,n,a),value:n.tabValue,children:n.tabLabel},n.tabValue+a))})}),(y||h)&&x("div",{className:"desktop:gap-2 desktop:flex hidden",children:[y&&t(me,{}),y&&h&&t("span",{children:"|"}),h&&t(be,{})]})]})});ie.displayName="ProductGalleryTab";const j=Q((e,r)=>{const{locale:c="us",copyWriting:P}=Z(),{variant:m,totalSavings:f}=q(),S=V(null),[A,T]=E(null),[o,v]=E(null),[y,h]=E([]),k=V(null),I=Y(()=>{if(e?.galleryTabType===_.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===_.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,_.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),d=N(()=>{o?.isBeginning?e.onPrevTab?.():o?.slidePrev()},[o,e]),n=N(()=>{o?.isEnd?e.onNextTab?.():o?.slideNext()},[o,e]);return R(()=>{o&&e.targetSlideIndex&&(o.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[o,e.targetSlideIndex,e]),R(()=>{const a=()=>{if(!e?.comment?.content||!k.current)return;const b=k.current;b.textContent="Test";const M=b.offsetHeight*2+2,H=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),i=[];let s="";for(let g=0;g<H.length;g++){const G=H[g],D=s?`${s} ${G}`:G;b.textContent=D,b.offsetHeight>M?s?(i.push(s),s=G):(i.push(G),s=""):s=D}s&&i.push(s),b.textContent="",h(i)},l=requestAnimationFrame(()=>{requestAnimationFrame(()=>{a()})}),p=()=>{a()};return window.addEventListener("resize",te(p,500)),()=>{cancelAnimationFrame(l),window.removeEventListener("resize",te(p,500))}},[e?.comment?.content]),x("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{ref:r,className:"h-full",onSwiper:v,onTouchEnd:(a,l)=>{a.isBeginning&&a.swipeDirection==="prev"?d():a.isEnd&&a.swipeDirection==="next"&&n()},pagination:{clickable:!0,el:S.current},thumbs:{swiper:A},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((a,l)=>{const p=`${e.tabValue}-${l}`,b=()=>{ve({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:l+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},w=a?._responsiveSource||a?.image?.url||"";return t(B,{className:"h-full",children:t(ye,{onExposure:b,exposureKey:p,threshold:.5,duration:2e3,className:"h-full",children:t(W,{source:w,alt:a?.image?.altText,className:L("h-full",I),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+l)})}),m.availableForSale&&!!f&&!e.index&&t(oe,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${ge({amount:f,currencyCode:m?.price?.currencyCode,locale:c})} ${P?.off}`}),t("div",{className:L("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:d,children:t(ae,{className:L("tablet:size-10 lg-desktop:size-12")})}),t("div",{className:L("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:n,children:t(le,{className:L("tablet:size-10 lg-desktop:size-12")})}),x("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[t("div",{className:"tablet:block hidden",children:t($,{className:"flex items-center justify-between",onSwiper:T,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[K,O],children:e?.galleries?.map((a,l)=>t(B,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:t(W,{source:a.image?.url,alt:a.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+l))})}),!e?.index&&x("div",{className:"flex items-center gap-2",children:[t(W,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),x("div",{className:"relative max-w-[528px]",children:[t("div",{ref:k,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),t($,{modules:[ne],loop:y.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:y.length>0?y.map((a,l)=>t(B,{children:t(J,{html:a,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},l+"text-group")):t(B,{children:t(J,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),t("div",{ref:S,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});j.displayName="ProductGalleryTabImage";const xe=({src:e})=>{const r=V(null);return R(()=>{const c=r.current;c&&(c.muted=!0,c.play().catch(()=>{}))},[]),x("video",{ref:r,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[t("track",{kind:"captions"}),t("source",{src:e,type:"video/mp4"}),t("source",{src:e,type:"video/webm"}),t("source",{src:e,type:"video/ogg"})]})},Te=e=>{const[r,c]=E(null),P=N(()=>{r?.isBeginning?e.onPrevTab?.():r?.slidePrev()},[r,e]),m=N(()=>{r?.isEnd?e.onNextTab?.():r?.slideNext()},[r,e]);return R(()=>{r&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(r.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[r,e.targetSlideIndex,e]),x("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[t($,{className:"h-full",onSwiper:c,onTouchEnd:(f,S)=>{f.isBeginning&&f.swipeDirection==="prev"?P():f.isEnd&&f.swipeDirection==="next"&&m()},modules:[X,O,K,ee],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((f,S)=>t(B,{className:"h-full bg-info-primary",children:t(xe,{src:f?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+S))}),t("div",{className:L("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:P,children:t(ae,{className:"tablet:size-10 lg-desktop:size-12"})}),t("div",{className:L("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:t(le,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Fe=e=>t("div",{children:"3D View"});var Be=fe(he);export{Be as default};

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGridBox.js

@@ -1 +1 @@
-import{jsx as a,jsxs as t}from"react/jsx-runtime";import{Grid as c,GridItem as p}from"../../../../components/index.js";const e=({BoxLeftGallery:o,BoxRightDetail:l,BoxBottomSummary:d})=>t("div",{id:"ipc-product-card",className:"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[t(c,{className:"laptop-md:gap-x-4 lg-desktop:gap-6 gap-8 laptop:gap-y-8 laptop-md:gap-y-8",children:[a(p,{className:"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:o}),a(p,{className:"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:l})]}),d]});var s=e;export{s as default};
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Grid as c,GridItem as p}from"../../../../components/index.js";const e=({BoxLeftGallery:o,BoxRightDetail:d,BoxBottomSummary:l})=>a("div",{id:"ipc-product-card",className:"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[a(c,{className:"ipc-box-grid laptop-md:gap-x-4 lg-desktop:gap-6 gap-8 laptop:gap-y-8 laptop-md:gap-y-8",children:[t(p,{className:"ipc-box-left-grid-item laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:o}),t(p,{className:"ipc-box-right-grid-item laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:d})]}),l]});var m=e;export{m as default};

package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.d.ts

@@ -1,7 +1,13 @@
 import { type ReactNode } from 'react';
+export interface ComparePriceRenderData {
+    /** 划线价金额 */
+    comparePrice: number;
+}
 export interface ProductActionsProps {
     /** 自定义总节省组件，传入时会替代默认的 totalSavings 显示 */
     totalSavingsSlot?: ReactNode;
+    /** 自定义划线价渲染，传入时替换默认的划线价显示 */
+    renderComparePrice?: (data: ComparePriceRenderData) => ReactNode;
 }
-declare const ProductActions: ({ totalSavingsSlot }?: ProductActionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductActions: ({ totalSavingsSlot, renderComparePrice }?: ProductActionsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductActions;

package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js

@@ -1 +1 @@
-import{jsx as o,jsxs as u}from"react/jsx-runtime";import{Text as n,Container as L}from"../../../../../components/index.js";import{useAiuiContext as E}from"../../../../AiuiProvider/index.js";import{useBizProductContext as R}from"../../../BizProductProvider.js";import{useMemo as C}from"react";import{formatPrice as d}from"../../../utils/index.js";import{replaceTemplate as y}from"../../../utils/textFormat.js";import{useBenefits as O}from"../../../hooks/useBenefits.js";import _ from"../../CartActionButtons/index.js";const j=({totalSavingsSlot:v}={})=>{const{copyWriting:e,locale:a="us",trackingData:N,currencyCode:l}=E(),{variant:t,finalPrice:h,totalSavings:r,isLogin:m,comparePrice:w,onAddToCart:S,onBuyNow:T,savingDetail:s,addToCartLoading:k,buyNowLoading:A,notifyMeMode:M,onNotifyMeClick:P,discount:q,memberFunctionResult:p}=R(),D=O({variant:t}),{commonCoupon:i,memberDiscount:c}=D,B=N?.showComparePrice??!0,F=C(()=>y(e?.totalSavings||"",{amount:d({amount:r,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),[e?.totalSavings,r,t.price.currencyCode,a]),x=C(()=>{if(!e?.unlockedSaving)return;const b=i?.enable?Number(i?.config?.fixed_value||0):0,f=c?.enable?c.config?.amount??0:0,g=Math.round((p?.withoutCouponMaxMemberTotalSave?Math.max(f,b):f+b)*100)/100;if(!(g<=0))return y(e.unlockedSaving,{amount:d({amount:g,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})})},[e?.unlockedSaving,i?.enable,i?.config?.fixed_value,c?.enable,c?.config?.amount,p,t.price.currencyCode,a]);return u(L,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[t.availableForSale?u("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[u("div",{className:"flex items-center gap-1",children:[o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:d({amount:parseFloat(h.toFixed(2)),currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),B&&(r>0||s?.member>0&&m)&&o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:d({amount:w,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),s?.member>0&&m&&o(n,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:e?.memberPrice||"Member Price"})]}),v||(r>0||s?.member>0&&m?o(n,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${F}`}):x?o(n,{className:"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:x}):null)]}):o(n,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),o("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:o(_,{mode:M,availableForSale:t.availableForSale,addToCartText:e?.addToCart??"Add to Cart",buyNowText:e?.buyNow??"Buy Now",addToCartLoading:k,buyNowLoading:A,onAddToCart:S,onBuyNow:T,onNotifyMeClick:P,notifyMeText:e?.notifyMe,notifyMeClassName:"w-full"})})]})};var K=j;export{K as default};
+import{jsx as o,jsxs as u}from"react/jsx-runtime";import{Text as n,Container as L}from"../../../../../components/index.js";import{useAiuiContext as E}from"../../../../AiuiProvider/index.js";import{useBizProductContext as O}from"../../../BizProductProvider.js";import{useMemo as v}from"react";import{formatPrice as d}from"../../../utils/index.js";import{replaceTemplate as N}from"../../../utils/textFormat.js";import{useBenefits as _}from"../../../hooks/useBenefits.js";import j from"../../CartActionButtons/index.js";const q=({totalSavingsSlot:h,renderComparePrice:p}={})=>{const{copyWriting:e,locale:a="us",trackingData:w,currencyCode:r}=E(),{variant:t,finalPrice:S,totalSavings:l,isLogin:m,comparePrice:x,onAddToCart:P,onBuyNow:T,savingDetail:s,addToCartLoading:k,buyNowLoading:A,notifyMeMode:M,onNotifyMeClick:D,discount:z,memberFunctionResult:b}=O(),B=_({variant:t}),{commonCoupon:i,memberDiscount:c}=B,F=w?.showComparePrice??!0,R=v(()=>N(e?.totalSavings||"",{amount:d({amount:l,currencyCode:t.price.currencyCode,locale:r==="CAD"?"us":a||"us"})}),[e?.totalSavings,l,t.price.currencyCode,a]),f=v(()=>{if(!e?.unlockedSaving)return;const g=i?.enable?Number(i?.config?.fixed_value||0):0,C=c?.enable?c.config?.amount??0:0,y=Math.round((b?.withoutCouponMaxMemberTotalSave?Math.max(C,g):C+g)*100)/100;if(!(y<=0))return N(e.unlockedSaving,{amount:d({amount:y,currencyCode:t.price.currencyCode,locale:r==="CAD"?"us":a||"us"})})},[e?.unlockedSaving,i?.enable,i?.config?.fixed_value,c?.enable,c?.config?.amount,b,t.price.currencyCode,a]);return u(L,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[t.availableForSale?u("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[u("div",{className:"flex items-center gap-1",children:[o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:d({amount:parseFloat(S.toFixed(2)),currencyCode:t.price.currencyCode,locale:r==="CAD"?"us":a||"us"})}),p?p({comparePrice:x}):F&&(l>0||s?.member>0&&m)&&o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:d({amount:x,currencyCode:t.price.currencyCode,locale:r==="CAD"?"us":a||"us"})}),s?.member>0&&m&&o(n,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:e?.memberPrice||"Member Price"})]}),h||(l>0||s?.member>0&&m?o(n,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${R}`}):f?o(n,{className:"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:f}):null)]}):o(n,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),o("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:o(j,{mode:M,availableForSale:t.availableForSale,addToCartText:e?.addToCart??"Add to Cart",buyNowText:e?.buyNow??"Buy Now",addToCartLoading:k,buyNowLoading:A,onAddToCart:P,onBuyNow:T,onNotifyMeClick:D,notifyMeText:e?.notifyMe,notifyMeClassName:"w-full"})})]})};var Q=q;export{Q as default};

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

@@ -1 +1 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Heading as m,Container as i}from"../../../../components/index.js";import{ProductActions as n}from"../index.js";import{useBizProductContext as c}from"../../BizProductProvider.js";import{useComponentData as u}from"../../hooks/useComponentData.js";import l from"./ScrollSpyNav/index.js";import{withLayout as f}from"../../../../shared/Styles.js";const b=({onSpyNavItemClick:e,totalSavingsSlot:s,actionsSlot:p})=>{const{product:d,renderRating:r}=c(),o=u("PurchaseBar")??[];return a("div",{id:"purchase-bar",className:"sticky left-0 top-0 z-[45] w-full border-b border-[#E4E5E6] bg-white",children:[t(i,{children:a("div",{className:"tablet:justify-between laptop-md:gap-16 tablet:gap-0 tablet:w-full flex flex-wrap items-center gap-[10px]",children:[a("div",{className:"laptop-md:pt-6 laptop-md:pb-0 min-w-0 flex-1 py-3",children:[t(m,{as:"h1",size:2,className:"line-clamp-2 text-wrap",html:d?.title}),t("div",{className:"laptop-md:block mt-3 hidden",children:t(l,{tabs:o,className:"",renderRating:r,onSpyNavItemClick:e})})]}),t("div",{className:"laptop-md:block hidden shrink-0",children:p??t(n,{totalSavingsSlot:s})})]})}),a(i,{className:"laptop-md:hidden relative",children:[t("div",{className:"absolute left-0 top-0 h-px w-full bg-[#E4E5E6]"}),t(l,{tabs:o,renderRating:r,onSpyNavItemClick:e})]})]})};var y=f(b);export{y as default};
+import{jsx as a,jsxs as t}from"react/jsx-runtime";import{Heading as n,Container as i}from"../../../../components/index.js";import{ProductActions as c}from"../index.js";import{useBizProductContext as u}from"../../BizProductProvider.js";import{useComponentData as f}from"../../hooks/useComponentData.js";import l from"./ScrollSpyNav/index.js";import{withLayout as b}from"../../../../shared/Styles.js";const v=({onSpyNavItemClick:e,totalSavingsSlot:p,actionsSlot:s,renderComparePrice:d})=>{const{product:m,renderRating:r}=u(),o=f("PurchaseBar")??[];return t("div",{id:"purchase-bar",className:"sticky left-0 top-0 z-[45] w-full border-b border-[#E4E5E6] bg-white",children:[a(i,{children:t("div",{className:"tablet:justify-between laptop-md:gap-16 tablet:gap-0 tablet:w-full flex flex-wrap items-center gap-[10px]",children:[t("div",{className:"laptop-md:pt-6 laptop-md:pb-0 min-w-0 flex-1 py-3",children:[a(n,{as:"h1",size:2,className:"line-clamp-2 text-wrap",html:m?.title}),a("div",{className:"laptop-md:block mt-3 hidden",children:a(l,{tabs:o,className:"",renderRating:r,onSpyNavItemClick:e})})]}),a("div",{className:"laptop-md:block hidden shrink-0",children:s??a(c,{totalSavingsSlot:p,renderComparePrice:d})})]})}),t(i,{className:"laptop-md:hidden relative",children:[a("div",{className:"absolute left-0 top-0 h-px w-full bg-[#E4E5E6]"}),a(l,{tabs:o,renderRating:r,onSpyNavItemClick:e})]})]})};var x=b(v);export{x as default};

package/dist/esm/biz-components/Listing/components/PurchaseBar/types.d.ts

@@ -1,10 +1,13 @@
 import type { ReactNode } from 'react';
+import type { ComparePriceRenderData } from './ProductActions/index.js';
 export interface PurchaseBarProps {
     onSpyNavItemClick?: (tab: ScrollSpyNavItem) => void;
     /** 自定义总节省组件，传入时会替代默认的 totalSavings 显示 */
     totalSavingsSlot?: ReactNode;
     /** 自定义右侧 Actions 插槽，传入时替代默认的 ProductActions */
     actionsSlot?: ReactNode;
+    /** 自定义划线价渲染，传入时替换默认的划线价显示 */
+    renderComparePrice?: (data: ComparePriceRenderData) => ReactNode;
 }
 export interface ScrollSpyNavItem {
     label: string;

package/dist/esm/helpers/utils.js

@@ -1 +1 @@
-import{clsx as u}from"clsx";import{extendTailwindMerge as f}from"tailwind-merge";const l=f({extend:{theme:{borderRadius:["btn"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function d(...t){return l(u(t))}function a(){}function b(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const y=t=>t?.replace(/\s+/g,"-"),g=t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),p=(t,r,e="{",n="}")=>{if(!t||!r||Object.keys(r).length===0)return t;const s=g(e),o=g(n),i=new RegExp(`${s}([a-zA-Z0-9_-]+)${o}`,"g");return t.replace(i,(x,c)=>r[c]!==void 0?r[c]:x)},w=(t,r)=>{try{if(!t||!r)return t;const e=g(r),n=new RegExp(e,"gi");return t.replace(n,s=>`<span class='text-brand-0 font-bold'>${s}</span>`)}catch(e){return console.error("highlightSearchWord error:",e),t}},R=(t,r,e)=>{if(!t)return t;if(t.startsWith("http://")||t.startsWith("https://")||t.startsWith("#"))return e?t.includes("?")?`${t}&${e}`:`${t}?${e}`:t;const n=t.split("/").filter(Boolean);if(n.length===0){const i=r==="us"?"/":`/${r}`;return e?`${i}?${e}`:i}if(n[0]===r){const i=`/${n.join("/")}`;return e?`${i}?${e}`:i}const o=`${r==="us"?"":`/${r}`}/${n.join("/")}`;return e?`${o}?${e}`:o};export{b as atobID,d as cn,R as getLocalizedPath,w as highlightSearchWord,a as noop,p as replaceTemplate,y as spaceToHyphen};
+import{clsx as u}from"clsx";import{extendTailwindMerge as l}from"tailwind-merge";const f=l({extend:{theme:{borderRadius:["btn","box","box-small","card","tabs","sidebar-shelf","image-text"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function d(...t){return f(u(t))}function a(){}function b(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const y=t=>t?.replace(/\s+/g,"-"),g=t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),p=(t,r,e="{",n="}")=>{if(!t||!r||Object.keys(r).length===0)return t;const s=g(e),o=g(n),i=new RegExp(`${s}([a-zA-Z0-9_-]+)${o}`,"g");return t.replace(i,(x,c)=>r[c]!==void 0?r[c]:x)},w=(t,r)=>{try{if(!t||!r)return t;const e=g(r),n=new RegExp(e,"gi");return t.replace(n,s=>`<span class='text-brand-0 font-bold'>${s}</span>`)}catch(e){return console.error("highlightSearchWord error:",e),t}},R=(t,r,e)=>{if(!t)return t;if(t.startsWith("http://")||t.startsWith("https://")||t.startsWith("#"))return e?t.includes("?")?`${t}&${e}`:`${t}?${e}`:t;const n=t.split("/").filter(Boolean);if(n.length===0){const i=r==="us"?"/":`/${r}`;return e?`${i}?${e}`:i}if(n[0]===r){const i=`/${n.join("/")}`;return e?`${i}?${e}`:i}const o=`${r==="us"?"":`/${r}`}/${n.join("/")}`;return e?`${o}?${e}`:o};export{b as atobID,d as cn,R as getLocalizedPath,w as highlightSearchWord,a as noop,p as replaceTemplate,y as spaceToHyphen};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.3.70",
+  "version": "1.3.72",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",