@anker-in/headless-ui 1.1.56 → 1.1.57

package/dist/esm/biz-components/CreditsShelf/Root.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CreditsShelf/Root.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { CreditsShelfContext, type CreditsShelfContextValue } from './context.js'\n\nexport interface CreditsShelfRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** \u526F\u6807\u9898 */\n  subtitle?: string\n  /** \u4E3B\u9898 */\n  theme?: 'light' | 'dark'\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CreditsShelfContextValue['copy']\n  /** \u662F\u5426\u5C55\u793A\u6807\u7B7E */\n  showTags?: boolean\n  /** \u662F\u5426\u5C55\u793A\u539F\u4EF7 */\n  showOriginalPrice?: boolean\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: CreditsShelfContextValue['classNames']\n  /** \u6B21\u8981\u6309\u94AE\u6587\u6848 */\n  secondaryButtonText?: string\n  /** \u6B21\u8981\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: CreditsShelfContextValue['secondaryButtonFun']\n  /** \u4E3B\u8981\u6309\u94AE\u6587\u6848 */\n  primaryButtonText?: string\n  /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: CreditsShelfContextValue['primaryButtonFun']\n  /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: CreditsShelfContextValue['onLearnMore']\n  /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: CreditsShelfContextValue['onShopNow']\n  /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: CreditsShelfContextValue['onAddToCart']\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: CreditsShelfContextValue['onProductImageClick']\n  /** \u5B50\u7EC4\u4EF6 */\n  children: React.ReactNode\n}\n\n/**\n * CreditsShelf Root \u7EC4\u4EF6\n *\n * @description \u7EC4\u5408\u5F0F\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u63D0\u4F9B Context \u914D\u7F6E\n */\nconst CreditsShelfRoot = React.forwardRef<HTMLDivElement, CreditsShelfRootProps>(\n  (\n    {\n      title,\n      subtitle,\n      theme = 'light',\n      copy,\n      showTags,\n      showOriginalPrice,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const contextValue = React.useMemo<CreditsShelfContextValue>(\n      () => ({\n        theme,\n        copy,\n        showTags,\n        showOriginalPrice,\n        classNames,\n        secondaryButtonText,\n        secondaryButtonFun,\n        primaryButtonText,\n        primaryButtonFun,\n        onLearnMore,\n        onShopNow,\n        onAddToCart,\n        onProductImageClick,\n      }),\n      [\n        theme,\n        copy,\n        showTags,\n        showOriginalPrice,\n        classNames,\n        secondaryButtonText,\n        secondaryButtonFun,\n        primaryButtonText,\n        primaryButtonFun,\n        onLearnMore,\n        onShopNow,\n        onAddToCart,\n        onProductImageClick,\n      ]\n    )\n\n    return (\n      <CreditsShelfContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'text-info-primary w-full',\n            {\n              'aiui-dark': theme === 'dark',\n            },\n            className,\n            classNames?.root\n          )}\n          {...props}\n        >\n          {/* \u6807\u9898\u533A\u57DF */}\n          {(title || subtitle) && (\n            <div className={cn('mb-6', classNames?.header)}>\n              {title && (\n                <Heading as=\"h2\" size={4} className={cn('text-info-primary mb-2', classNames?.title)} html={title} />\n              )}\n              {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n            </div>\n          )}\n\n          {children}\n        </div>\n      </CreditsShelfContext.Provider>\n    )\n  }\n)\n\nCreditsShelfRoot.displayName = 'CreditsShelf.Root'\n\nexport { CreditsShelfRoot }\n"],
+  "mappings": "aAwHY,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAtHZ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,uBAAAC,MAA0D,eA0CnE,MAAMC,EAAmBL,EAAM,WAC7B,CACE,CACE,MAAAM,EACA,SAAAC,EACA,MAAAC,EAAQ,QACR,KAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAezB,EAAM,QACzB,KAAO,CACL,MAAAQ,EACA,KAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,CACF,GACA,CACEZ,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,CACF,CACF,EAEA,OACEtB,EAACM,EAAoB,SAApB,CAA6B,MAAOqB,EACnC,SAAA1B,EAAC,OACC,IAAKyB,EACL,UAAWvB,EACT,2BACA,CACE,YAAaO,IAAU,MACzB,EACAa,EACAT,GAAY,IACd,EACC,GAAGW,EAGF,WAAAjB,GAASC,IACTR,EAAC,OAAI,UAAWE,EAAG,OAAQW,GAAY,MAAM,EAC1C,UAAAN,GACCR,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWD,EAAG,yBAA0BW,GAAY,KAAK,EAAG,KAAMN,EAAO,EAEpGC,GAAYT,EAACK,EAAA,CAAK,GAAG,IAAI,KAAM,EAAG,UAAWF,EAAG,GAAIW,GAAY,QAAQ,EAAG,KAAML,EAAU,GAC9F,EAGDe,GACH,EACF,CAEJ,CACF,EAEAjB,EAAiB,YAAc",
+  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Text", "CreditsShelfContext", "CreditsShelfRoot", "title", "subtitle", "theme", "copy", "showTags", "showOriginalPrice", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "onLearnMore", "onShopNow", "onAddToCart", "onProductImageClick", "className", "children", "props", "ref", "contextValue"]
+}

package/dist/esm/biz-components/CreditsShelf/context.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { ButtonFunctionType, CopyConfig, CreditsShelfSemanticName, CreditsProductCardData } from './types.js';
+/**
+ * CreditsShelf Context 值类型
+ */
+export interface CreditsShelfContextValue {
+    /** 主题 */
+    theme?: 'light' | 'dark';
+    /** 文案配置 */
+    copy?: CopyConfig;
+    /** 是否展示标签 */
+    showTags?: boolean;
+    /** 是否展示原价 */
+    showOriginalPrice?: boolean;
+    /** 语义化类名 */
+    classNames?: Partial<Record<CreditsShelfSemanticName, string>>;
+    /** 次要按钮文案 */
+    secondaryButtonText?: string;
+    /** 次要按钮功能 */
+    secondaryButtonFun?: ButtonFunctionType;
+    /** 主要按钮文案 */
+    primaryButtonText?: string;
+    /** 主要按钮功能 */
+    primaryButtonFun?: ButtonFunctionType;
+    /** 了解更多回调 */
+    onLearnMore?: (product: CreditsProductCardData) => void;
+    /** 立即购买回调 */
+    onShopNow?: (product: CreditsProductCardData) => void;
+    /** 加入购物车回调 */
+    onAddToCart?: (product: CreditsProductCardData) => void;
+    /** 产品图片点击回调 */
+    onProductImageClick?: (product: CreditsProductCardData) => void;
+}
+declare const CreditsShelfContext: React.Context<CreditsShelfContextValue | null>;
+/**
+ * 获取 CreditsShelf Context
+ * @returns Context 值，如果在 Root 外使用则返回 null
+ */
+export declare function useCreditsShelfContext(): CreditsShelfContextValue | null;
+export { CreditsShelfContext };

package/dist/esm/biz-components/CreditsShelf/context.js

@@ -0,0 +1,2 @@
+"use client";import*as t from"react";const e=t.createContext(null);function o(){return t.useContext(e)}export{e as CreditsShelfContext,o as useCreditsShelfContext};
+//# sourceMappingURL=context.js.map

package/dist/esm/biz-components/CreditsShelf/context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CreditsShelf/context.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { ButtonFunctionType, CopyConfig, CreditsShelfSemanticName, CreditsProductCardData } from './types.js'\n\n/**\n * CreditsShelf Context \u503C\u7C7B\u578B\n */\nexport interface CreditsShelfContextValue {\n  /** \u4E3B\u9898 */\n  theme?: 'light' | 'dark'\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CopyConfig\n  /** \u662F\u5426\u5C55\u793A\u6807\u7B7E */\n  showTags?: boolean\n  /** \u662F\u5426\u5C55\u793A\u539F\u4EF7 */\n  showOriginalPrice?: boolean\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<CreditsShelfSemanticName, string>>\n  /** \u6B21\u8981\u6309\u94AE\u6587\u6848 */\n  secondaryButtonText?: string\n  /** \u6B21\u8981\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u4E3B\u8981\u6309\u94AE\u6587\u6848 */\n  primaryButtonText?: string\n  /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: CreditsProductCardData) => void\n  /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: CreditsProductCardData) => void\n  /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: CreditsProductCardData) => void\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: (product: CreditsProductCardData) => void\n}\n\nconst CreditsShelfContext = React.createContext<CreditsShelfContextValue | null>(null)\n\n/**\n * \u83B7\u53D6 CreditsShelf Context\n * @returns Context \u503C\uFF0C\u5982\u679C\u5728 Root \u5916\u4F7F\u7528\u5219\u8FD4\u56DE null\n */\nexport function useCreditsShelfContext() {\n  return React.useContext(CreditsShelfContext)\n}\n\nexport { CreditsShelfContext }\n"],
+  "mappings": "aAEA,UAAYA,MAAW,QAmCvB,MAAMC,EAAsBD,EAAM,cAA+C,IAAI,EAM9E,SAASE,GAAyB,CACvC,OAAOF,EAAM,WAAWC,CAAmB,CAC7C",
+  "names": ["React", "CreditsShelfContext", "useCreditsShelfContext"]
+}

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

@@ -0,0 +1,15 @@
+import { CreditsShelfRoot } from './Root.js';
+import { CreditsShelfProductsList } from './ProductsList.js';
+import { CreditsProductCard } from './ProductCard.js';
+export type { CreditsShelfSemanticName, CreditsProductCardData, CopyConfig, ButtonFunctionType, CreditsShelfLayoutMode, } from './types.js';
+export type { CreditsShelfRootProps } from './Root.js';
+export type { CreditsShelfProductsListProps } from './ProductsList.js';
+export type { CreditsProductCardProps } from './ProductCard.js';
+export type { CreditsShelfContextValue } from './context.js';
+export { CreditsShelfRoot, CreditsShelfProductsList, CreditsProductCard };
+declare const CreditsShelf: {
+    Root: import("react").ForwardRefExoticComponent<import("./Root.js").CreditsShelfRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    ProductsList: import("react").ForwardRefExoticComponent<import("./ProductsList.js").CreditsShelfProductsListProps & import("react").RefAttributes<HTMLDivElement>>;
+    ProductCard: import("react").ForwardRefExoticComponent<import("./ProductCard.js").CreditsProductCardProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default CreditsShelf;

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

@@ -0,0 +1,2 @@
+"use client";import{CreditsShelfRoot as t}from"./Root.js";import{CreditsShelfProductsList as o}from"./ProductsList.js";import{CreditsProductCard as r}from"./ProductCard.js";const e={Root:t,ProductsList:o,ProductCard:r};var p=e;export{r as CreditsProductCard,o as CreditsShelfProductsList,t as CreditsShelfRoot,p as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CreditsShelf/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { CreditsShelfRoot } from './Root.js'\nimport { CreditsShelfProductsList } from './ProductsList.js'\nimport { CreditsProductCard } from './ProductCard.js'\n\n// \u5BFC\u51FA\u7C7B\u578B\nexport type {\n  CreditsShelfSemanticName,\n  CreditsProductCardData,\n  CopyConfig,\n  ButtonFunctionType,\n  CreditsShelfLayoutMode,\n} from './types.js'\n\nexport type { CreditsShelfRootProps } from './Root.js'\nexport type { CreditsShelfProductsListProps } from './ProductsList.js'\nexport type { CreditsProductCardProps } from './ProductCard.js'\nexport type { CreditsShelfContextValue } from './context.js'\n\n// \u5BFC\u51FA\u5B50\u7EC4\u4EF6\nexport { CreditsShelfRoot, CreditsShelfProductsList, CreditsProductCard }\n\n// \u7EC4\u5408\u5F0F\u7EC4\u4EF6\nconst CreditsShelf = {\n  Root: CreditsShelfRoot,\n  ProductsList: CreditsShelfProductsList,\n  ProductCard: CreditsProductCard,\n}\n\nexport default CreditsShelf\n"],
+  "mappings": "aAEA,OAAS,oBAAAA,MAAwB,YACjC,OAAS,4BAAAC,MAAgC,oBACzC,OAAS,sBAAAC,MAA0B,mBAoBnC,MAAMC,EAAe,CACnB,KAAMH,EACN,aAAcC,EACd,YAAaC,CACf,EAEA,IAAOE,EAAQD",
+  "names": ["CreditsShelfRoot", "CreditsShelfProductsList", "CreditsProductCard", "CreditsShelf", "CreditsShelf_default"]
+}

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

@@ -0,0 +1,73 @@
+import type { BadgeProps } from '../../components/badge.js';
+/**
+ * 按钮功能类型
+ */
+export type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore';
+/**
+ * CreditShelf 文案配置接口
+ */
+export interface CopyConfig {
+    /** 积分兑换标签文本 */
+    redeemLabel?: string;
+    /** 积分抵现提示文本模板，支持 {amount} 占位符 */
+    creditsSavingLabel?: string;
+    /** 上一页滑动按钮的无障碍标签 */
+    previousSlideLabel?: string;
+    /** 下一页滑动按钮的无障碍标签 */
+    nextSlideLabel?: string;
+    /** 售罄标签文本 */
+    outOfStockLabel?: string;
+}
+/**
+ * 语义化类名
+ */
+export type CreditsShelfSemanticName = 'root' | 'header' | 'title' | 'subtitle' | 'description' | 'productCard' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton' | 'creditTip';
+/**
+ * 组件布局模式
+ */
+export type CreditsShelfLayoutMode = 'flex' | 'horizontal';
+/**
+ * 基础产品数据接口（来自外部数据源）
+ */
+export interface BaseProductData {
+    sku: string;
+    name: string;
+    image: string;
+    value: string;
+    handle: string;
+    shopify_id: string;
+    custom_name?: string;
+    custom_description?: string;
+}
+/**
+ * Shopify 变体数据接口
+ */
+export interface VariantData {
+    /** 产品描述 */
+    description?: string;
+    /** 变体id */
+    variantId: string;
+    /** 产品链接, 点击图片的时候跳转到该链接 */
+    listingLink: string;
+    /** 原价 */
+    originalPrice?: string;
+    /** 现价 */
+    price: string;
+    /** 价格上面展示的标签文本（如 Redeem Credits） */
+    priceLabel?: string;
+    /** 是否可售 */
+    availableForSale: boolean;
+    /** 积分抵现金额（用于底部提示） */
+    creditSavingAmount?: string;
+    /** tags 列表(会员价，折扣，new, hot等标签信息) */
+    tags: Array<{
+        label: string;
+        variant: BadgeProps['variant'];
+        promotionalType?: BadgeProps['promotionalType'];
+    } | React.ReactNode>;
+}
+/**
+ * 完整的产品卡片数据接口
+ */
+export interface CreditsProductCardData extends BaseProductData, VariantData {
+}

package/dist/esm/biz-components/CreditsShelf/types.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/CreditsShelf/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as E,jsx as o,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{cn as t}from"../../helpers/utils.js";import _ from"../../components/badge.js";import{Text as z}from"../../components/text.js";import u from"../../components/button.js";import R from"../../components/picture.js";import{Heading as D}from"../../components/heading.js";const I={center:"object-center",top:"object-top",bottom:"object-bottom",left:"object-left",right:"object-right","top-left":"object-left-top","top-right":"object-right-top","bottom-left":"object-left-bottom","bottom-right":"object-right-bottom"},m=r.forwardRef(({product:e,className:h,showTags:k=!0,showOriginalPrice:j=!0,onLearnMore:w,onShopNow:P,onAddToCart:C,onProductImageClick:c,classNames:i,secondaryButtonText:b,secondaryButtonFun:f,primaryButtonText:p,primaryButtonFun:g,copy:L},S)=>{const[O,B]=r.useState(!1),[N,T]=r.useState(!1),s=!e.availableForSale,x=async(a,l)=>{if(!a)return;const y=l==="primary"?B:T;y(!0);try{switch(a){case"buyNow":await P?.(e);break;case"addCart":await C?.(e);break;case"learnMore":await w?.(e);break;default:break}}finally{y(!1)}},d=e.custom_name||e.name,v=e.custom_description||e.description,M=e.custom_theme??"dark";return o("div",{ref:S,className:t("rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]","min-w-[296px] max-w-[824px]",{"aiui-dark":M==="dark"},h,i?.productCard),children:n("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[o("a",{onClick:()=>c?.(e),...!c&&e.listingLink&&{href:e.listingLink},rel:"noreferrer",className:t("absolute inset-0",i?.productImage),children:o(R,{alt:e.name,source:e.custom_image??e.image,className:t("rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full"),imgClassName:t("object-cover",I[e.imageObjectPosition??"center"])})}),n("div",{className:t("desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4",i?.productContent),children:[k&&e.tags?.length?o("div",{className:t("mb-2 box-border flex flex-wrap gap-1 overflow-visible",i?.tagsContainer),children:e.tags.map((a,l)=>a.label?o(_,{size:"sm",variant:a.variant||"outline",promotionalType:a.promotionalType,children:a.label},l):r.isValidElement(a)&&o(r.Fragment,{children:"123"},l))}):null,d?o(D,{as:"h3",title:d,html:d,className:t("lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold",i?.productTitle)}):null,v?o(z,{size:2,html:v,className:t("lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold",i?.productDescription)}):null,o("div",{className:t("mb-1 mt-4 flex items-center",i?.priceContainer),children:s?o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",i?.productPrice),children:L?.outOfStockLabel??"Sold Out"}):n(E,{children:[o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",i?.productPrice),children:e.price}),j&&e.originalPrice&&o("div",{className:t("tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",i?.originalPrice),children:e.originalPrice})]})}),n("div",{className:t("lg-desktop:gap-3 pointer-events-auto flex items-center gap-2",i?.buttonGroup),children:[b&&o(u,{variant:"secondary",onClick:()=>x(f,"secondary"),disabled:s&&f!=="learnMore",loading:N,className:t(i?.secondaryButton),children:b}),p&&o(u,{variant:"primary",onClick:()=>x(g,"primary"),disabled:s&&g!=="learnMore",loading:O,className:t(i?.primaryButton),children:p})]})]})]})})});m.displayName="ImageOverlayShelf.ProductCard";var J=m;export{m as ProductCard,J as default};
+"use client";import{Fragment as E,jsx as o,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{cn as t}from"../../helpers/utils.js";import _ from"../../components/badge.js";import{Text as z}from"../../components/text.js";import y from"../../components/button.js";import R from"../../components/picture.js";import{Heading as D}from"../../components/heading.js";const I={center:"object-center",top:"object-top",bottom:"object-bottom",left:"object-left",right:"object-right","top-left":"object-left-top","top-right":"object-right-top","bottom-left":"object-left-bottom","bottom-right":"object-right-bottom"},m=r.forwardRef(({product:e,className:h,showTags:k=!0,showOriginalPrice:j=!0,onLearnMore:w,onShopNow:P,onAddToCart:C,onProductImageClick:c,classNames:i,secondaryButtonText:b,secondaryButtonFun:f,primaryButtonText:p,primaryButtonFun:g,copy:L},S)=>{const[O,B]=r.useState(!1),[N,T]=r.useState(!1),s=!e.availableForSale,x=async(a,l)=>{if(!a)return;const u=l==="primary"?B:T;u(!0);try{switch(a){case"buyNow":await P?.(e);break;case"addCart":await C?.(e);break;case"learnMore":await w?.(e);break;default:break}}finally{u(!1)}},d=e.custom_name||e.name,v=e.custom_description||e.description,M=e.custom_theme??"dark";return o("div",{ref:S,className:t("rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]","tablet:min-w-[auto] min-w-[296px] max-w-[824px]",{"aiui-dark":M==="dark"},h,i?.productCard),children:n("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[o("a",{onClick:()=>c?.(e),...!c&&e.listingLink&&{href:e.listingLink},rel:"noreferrer",className:t("absolute inset-0",i?.productImage),children:o(R,{alt:e.name,source:e.custom_image??e.image,className:t("rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full"),imgClassName:t("object-cover",I[e.imageObjectPosition??"center"])})}),n("div",{className:t("desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4",i?.productContent),children:[k&&e.tags?.length?o("div",{className:t("mb-2 box-border flex flex-wrap gap-1 overflow-visible",i?.tagsContainer),children:e.tags.map((a,l)=>a.label?o(_,{size:"sm",variant:a.variant||"outline",promotionalType:a.promotionalType,children:a.label},l):r.isValidElement(a)&&o(r.Fragment,{children:"123"},l))}):null,d?o(D,{as:"h3",title:d,html:d,className:t("lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold",i?.productTitle)}):null,v?o(z,{size:2,html:v,className:t("lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold",i?.productDescription)}):null,o("div",{className:t("mb-1 mt-4 flex items-center",i?.priceContainer),children:s?o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",i?.productPrice),children:L?.outOfStockLabel??"Sold Out"}):n(E,{children:[o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",i?.productPrice),children:e.price}),j&&e.originalPrice&&o("div",{className:t("tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",i?.originalPrice),children:e.originalPrice})]})}),n("div",{className:t("lg-desktop:gap-3 pointer-events-auto flex items-center gap-2",i?.buttonGroup),children:[b&&o(y,{variant:"secondary",onClick:()=>x(f,"secondary"),disabled:s&&f!=="learnMore",loading:N,className:t(i?.secondaryButton),children:b}),p&&o(y,{variant:"primary",onClick:()=>x(g,"primary"),disabled:s&&g!=="learnMore",loading:O,className:t(i?.primaryButton),children:p})]})]})]})})});m.displayName="ImageOverlayShelf.ProductCard";var J=m;export{m as ProductCard,J as default};
 //# sourceMappingURL=ProductCard.js.map

package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageOverlayShelf/ProductCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\n\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ProductCardProps, ButtonFunctionType, ImageObjectPosition } from './types.js'\n\n/**\n * \u56FE\u7247\u88C1\u5207\u4F4D\u7F6E\u6620\u5C04\n */\nconst objectPositionClassMap: Record<ImageObjectPosition, string> = {\n  center: 'object-center',\n  top: 'object-top',\n  bottom: 'object-bottom',\n  left: 'object-left',\n  right: 'object-right',\n  'top-left': 'object-left-top',\n  'top-right': 'object-right-top',\n  'bottom-left': 'object-left-bottom',\n  'bottom-right': 'object-right-bottom',\n}\n\n/**\n * ProductCard - ImageOverlayShelf \u7684\u5355\u4E2A\u4EA7\u54C1\u5361\u7247\n * \u56FE\u6587\u53E0\u52A0\u6837\u5F0F\uFF0C\u80CC\u666F\u56FE\u5B8C\u5168\u8986\u76D6\u5361\u7247\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      showOriginalPrice = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      copy,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const isSoldOut = !product.availableForSale\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n      if (!buttonFun) return\n\n      const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n      setLoading(true)\n\n      try {\n        switch (buttonFun) {\n          case 'buyNow':\n            await onShopNow?.(product)\n            break\n          case 'addCart':\n            await onAddToCart?.(product)\n            break\n          case 'learnMore':\n            await onLearnMore?.(product)\n            break\n          default:\n            break\n        }\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    const displayTitle = product.custom_name || product.name\n    const displayDescription = product.custom_description || product.description\n    const theme = product.custom_theme ?? 'dark'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300',\n          'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]',\n          'min-w-[296px] max-w-[824px]',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className,\n          classNames?.productCard\n        )}\n      >\n        <div className=\"box-border flex h-full flex-col justify-between overflow-hidden\">\n          {/* \u80CC\u666F\u56FE */}\n          <a\n            onClick={() => onProductImageClick?.(product)}\n            {...(!onProductImageClick &&\n              product.listingLink && {\n                href: product.listingLink,\n              })}\n            rel=\"noreferrer\"\n            className={cn('absolute inset-0', classNames?.productImage)}\n          >\n            <Picture\n              alt={product.name}\n              source={product.custom_image ?? product.image}\n              className={cn(\n                'rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full'\n              )}\n              imgClassName={cn('object-cover', objectPositionClassMap[product.imageObjectPosition ?? 'center'])}\n            />\n          </a>\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div\n            className={cn(\n              'desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4',\n              classNames?.productContent\n            )}\n          >\n            {/* \u6807\u7B7E */}\n            {showTags && product.tags?.length ? (\n              <div className={cn('mb-2 box-border flex flex-wrap gap-1 overflow-visible', classNames?.tagsContainer)}>\n                {product.tags.map((tag: any, index: number) =>\n                  (tag as any).label ? (\n                    <Badge\n                      key={index}\n                      size=\"sm\"\n                      variant={(tag.variant as any) || 'outline'}\n                      promotionalType={tag.promotionalType}\n                    >\n                      {tag.label}\n                    </Badge>\n                  ) : (\n                    React.isValidElement(tag) && <React.Fragment key={index}>123</React.Fragment>\n                  )\n                )}\n              </div>\n            ) : null}\n\n            {/* \u4EA7\u54C1\u6807\u9898 */}\n            {displayTitle ? (\n              <Heading\n                as=\"h3\"\n                title={displayTitle}\n                html={displayTitle}\n                className={cn(\n                  'lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold',\n                  classNames?.productTitle\n                )}\n              />\n            ) : null}\n\n            {/* \u4EA7\u54C1\u63CF\u8FF0 */}\n            {displayDescription ? (\n              <Text\n                size={2}\n                html={displayDescription}\n                className={cn(\n                  'lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold',\n                  classNames?.productDescription\n                )}\n              />\n            ) : null}\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div className={cn('mb-1 mt-4 flex items-center', classNames?.priceContainer)}>\n              {isSoldOut ? (\n                <div className={cn('tablet:text-2xl text-info-primary text-xl font-bold', classNames?.productPrice)}>\n                  {copy?.outOfStockLabel ?? 'Sold Out'}\n                </div>\n              ) : (\n                <>\n                  <div className={cn('tablet:text-2xl text-info-primary text-xl font-bold', classNames?.productPrice)}>\n                    {product.price}\n                  </div>\n                  {showOriginalPrice && product.originalPrice && (\n                    <div\n                      className={cn(\n                        'tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through',\n                        classNames?.originalPrice\n                      )}\n                    >\n                      {product.originalPrice}\n                    </div>\n                  )}\n                </>\n              )}\n            </div>\n\n            {/* \u6309\u94AE\u533A\u57DF */}\n            <div\n              className={cn('lg-desktop:gap-3 pointer-events-auto flex items-center gap-2', classNames?.buttonGroup)}\n            >\n              {secondaryButtonText && (\n                <Button\n                  variant=\"secondary\"\n                  onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n                  disabled={isSoldOut && secondaryButtonFun !== 'learnMore'}\n                  loading={secondaryLoading}\n                  className={cn(classNames?.secondaryButton)}\n                >\n                  {secondaryButtonText}\n                </Button>\n              )}\n              {primaryButtonText && (\n                <Button\n                  variant=\"primary\"\n                  onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n                  disabled={isSoldOut && primaryButtonFun !== 'learnMore'}\n                  loading={primaryLoading}\n                  className={cn(classNames?.primaryButton)}\n                >\n                  {primaryButtonText}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCard.displayName = 'ImageOverlayShelf.ProductCard'\n\nexport { ProductCard }\nexport default ProductCard\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\n\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ProductCardProps, ButtonFunctionType, ImageObjectPosition } from './types.js'\n\n/**\n * \u56FE\u7247\u88C1\u5207\u4F4D\u7F6E\u6620\u5C04\n */\nconst objectPositionClassMap: Record<ImageObjectPosition, string> = {\n  center: 'object-center',\n  top: 'object-top',\n  bottom: 'object-bottom',\n  left: 'object-left',\n  right: 'object-right',\n  'top-left': 'object-left-top',\n  'top-right': 'object-right-top',\n  'bottom-left': 'object-left-bottom',\n  'bottom-right': 'object-right-bottom',\n}\n\n/**\n * ProductCard - ImageOverlayShelf \u7684\u5355\u4E2A\u4EA7\u54C1\u5361\u7247\n * \u56FE\u6587\u53E0\u52A0\u6837\u5F0F\uFF0C\u80CC\u666F\u56FE\u5B8C\u5168\u8986\u76D6\u5361\u7247\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      showOriginalPrice = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      copy,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const isSoldOut = !product.availableForSale\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n      if (!buttonFun) return\n\n      const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n      setLoading(true)\n\n      try {\n        switch (buttonFun) {\n          case 'buyNow':\n            await onShopNow?.(product)\n            break\n          case 'addCart':\n            await onAddToCart?.(product)\n            break\n          case 'learnMore':\n            await onLearnMore?.(product)\n            break\n          default:\n            break\n        }\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    const displayTitle = product.custom_name || product.name\n    const displayDescription = product.custom_description || product.description\n    const theme = product.custom_theme ?? 'dark'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300',\n          'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]',\n          'tablet:min-w-[auto] min-w-[296px] max-w-[824px]',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className,\n          classNames?.productCard\n        )}\n      >\n        <div className=\"box-border flex h-full flex-col justify-between overflow-hidden\">\n          {/* \u80CC\u666F\u56FE */}\n          <a\n            onClick={() => onProductImageClick?.(product)}\n            {...(!onProductImageClick &&\n              product.listingLink && {\n                href: product.listingLink,\n              })}\n            rel=\"noreferrer\"\n            className={cn('absolute inset-0', classNames?.productImage)}\n          >\n            <Picture\n              alt={product.name}\n              source={product.custom_image ?? product.image}\n              className={cn(\n                'rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full'\n              )}\n              imgClassName={cn('object-cover', objectPositionClassMap[product.imageObjectPosition ?? 'center'])}\n            />\n          </a>\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div\n            className={cn(\n              'desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4',\n              classNames?.productContent\n            )}\n          >\n            {/* \u6807\u7B7E */}\n            {showTags && product.tags?.length ? (\n              <div className={cn('mb-2 box-border flex flex-wrap gap-1 overflow-visible', classNames?.tagsContainer)}>\n                {product.tags.map((tag: any, index: number) =>\n                  (tag as any).label ? (\n                    <Badge\n                      key={index}\n                      size=\"sm\"\n                      variant={(tag.variant as any) || 'outline'}\n                      promotionalType={tag.promotionalType}\n                    >\n                      {tag.label}\n                    </Badge>\n                  ) : (\n                    React.isValidElement(tag) && <React.Fragment key={index}>123</React.Fragment>\n                  )\n                )}\n              </div>\n            ) : null}\n\n            {/* \u4EA7\u54C1\u6807\u9898 */}\n            {displayTitle ? (\n              <Heading\n                as=\"h3\"\n                title={displayTitle}\n                html={displayTitle}\n                className={cn(\n                  'lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold',\n                  classNames?.productTitle\n                )}\n              />\n            ) : null}\n\n            {/* \u4EA7\u54C1\u63CF\u8FF0 */}\n            {displayDescription ? (\n              <Text\n                size={2}\n                html={displayDescription}\n                className={cn(\n                  'lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold',\n                  classNames?.productDescription\n                )}\n              />\n            ) : null}\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div className={cn('mb-1 mt-4 flex items-center', classNames?.priceContainer)}>\n              {isSoldOut ? (\n                <div className={cn('tablet:text-2xl text-info-primary text-xl font-bold', classNames?.productPrice)}>\n                  {copy?.outOfStockLabel ?? 'Sold Out'}\n                </div>\n              ) : (\n                <>\n                  <div className={cn('tablet:text-2xl text-info-primary text-xl font-bold', classNames?.productPrice)}>\n                    {product.price}\n                  </div>\n                  {showOriginalPrice && product.originalPrice && (\n                    <div\n                      className={cn(\n                        'tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through',\n                        classNames?.originalPrice\n                      )}\n                    >\n                      {product.originalPrice}\n                    </div>\n                  )}\n                </>\n              )}\n            </div>\n\n            {/* \u6309\u94AE\u533A\u57DF */}\n            <div\n              className={cn('lg-desktop:gap-3 pointer-events-auto flex items-center gap-2', classNames?.buttonGroup)}\n            >\n              {secondaryButtonText && (\n                <Button\n                  variant=\"secondary\"\n                  onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n                  disabled={isSoldOut && secondaryButtonFun !== 'learnMore'}\n                  loading={secondaryLoading}\n                  className={cn(classNames?.secondaryButton)}\n                >\n                  {secondaryButtonText}\n                </Button>\n              )}\n              {primaryButtonText && (\n                <Button\n                  variant=\"primary\"\n                  onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n                  disabled={isSoldOut && primaryButtonFun !== 'learnMore'}\n                  loading={primaryLoading}\n                  className={cn(classNames?.primaryButton)}\n                >\n                  {primaryButtonText}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCard.displayName = 'ImageOverlayShelf.ProductCard'\n\nexport { ProductCard }\nexport default ProductCard\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "cn", "Badge", "Text", "Button", "Picture", "Heading", "objectPositionClassMap", "ProductCard", "product", "className", "showTags", "showOriginalPrice", "onLearnMore", "onShopNow", "onAddToCart", "onProductImageClick", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "copy", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "isSoldOut", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "displayTitle", "displayDescription", "theme", "tag", "index", "ProductCard_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as Me,jsx as e,jsxs as u}from"react/jsx-runtime";import{useState as p,useRef as n,useMemo as me,useEffect as E,forwardRef as ge,useImperativeHandle as fe}from"react";import{debounce as ve}from"lodash";import{cn as w}from"../../helpers/utils.js";import{withLayout as xe}from"../../shared/Styles.js";import ye from"../../components/button.js";import{VideoModal as he}from"../VideoModal/index.js";import{convertLexicalToHTML as K}from"@payloadcms/richtext-lexical/html";import{useInView as be}from"react-intersection-observer";import{useExposure as we}from"../../hooks/useExposure.js";import Q from"../../helpers/ScrollLoadVideo.js";import{gsap as I}from"gsap";import{SplitText as He}from"gsap/dist/SplitText";import{ScrollTrigger as W}from"gsap/dist/ScrollTrigger";const Te="media_player_base",ke="video",X=({defaultConverters:H})=>({...H,text:T=>{const{node:t}=T;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),Z=ge(({className:H="",id:T,onBtnClick:t,data:{title:m,videoTitle:g,btnText:P,youtubeId:_,video:S,mobileVideo:A,theme:V,img:$,shape:B,titleAnimation:f,...ee}},te)=>{const{sticky:i}=ee,[C,D]=p(!1),[F,re]=p(0),[oe,ne]=p(0),[v,se]=p(0),[j,U]=p(!1),x=n(null),Y=n(null),r=n(null),y=n(null),q=n(null),h=n(null),k=n(null),M=n(null),{ref:le,inView:s}=be();fe(te,()=>r.current);const b=typeof m=="string"?m:m&&K({data:m,converters:X}),L=typeof g=="string"?g:g&&K({data:g,converters:X});E(()=>{s?(x.current?.play(),D(!0)):(x.current?.pause(),D(!1))},[s]);const N=ve(()=>{if(r.current){const a=r.current.getBoundingClientRect(),l=window.innerHeight,c=window.scrollY||window.pageYOffset,o=a.bottom+c,d=document.documentElement.scrollHeight-o;re(d>l?l:d)}if(r.current){const a=r.current.clientHeight,l=window.innerHeight;ne(a+l)}},600);E(()=>(N(),window.addEventListener("resize",N),()=>{window.removeEventListener("resize",N)}),[]),E(()=>{function a(){if(!y.current||f!=="fade-in")return;const c=y.current?.clientHeight||80;h.current=new He(y.current,{type:"words",wordsClass:"word"});const o=h.current.words;I.set(o,{opacity:0}),k.current=W.create({trigger:r.current,start:"top center-=10%",end:`top+=${c*1.5+80}px center-=10%`,scrub:!0,onUpdate:O=>{const d=O.progress,G=o.length,ae=1/G,J=.5;o.forEach((ce,de)=>{const pe=de/G*(1-J),ue=ae*(1+J);let z=(d-pe)/ue;z=Math.max(0,Math.min(z,1)),I.set(ce,{opacity:z})}),I.set(Y.current,{opacity:d})}})}function l(){M.current=W.create({trigger:r.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:c=>{const o=c.progress;console.log("progress__",o),se(o)}})}return s&&(a(),l()),()=>{h.current&&h.current.revert(),k.current&&k.current.kill(),M.current&&M.current.kill()}},[f,s]),we(q,{componentType:ke,componentName:Te,componentTitle:L});const ie=me(()=>s&&v>0&&v<.9?3:s?2:1,[v,s]),R="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return u(Me,{children:[i&&e("div",{ref:r,className:w("relative z-10",R,{"aiui-dark":V==="dark","rounded-box":B==="rounded"},H),children:e("div",{ref:le,children:!f&&u("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[b&&!C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),L&&C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:L}}),P&&e(ye,{variant:"link",className:w("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{U(!0),t&&t?.()},children:P})]})})}),u("div",{style:i?{marginBottom:`-${F}px`,marginTop:`-${oe}px`,zIndex:ie}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:u("div",{id:T,className:w("relative overflow-hidden",i?"h-screen w-full":R,{"aiui-dark":V==="dark","rounded-box":B==="rounded"}),children:[f==="fade-in"&&b&&e("div",{ref:y,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),u("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-v*100}vh`},children:[e(Q,{videoRef:x,poster:$?.url||"",src:S?.url,className:"tablet:block hidden size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(Q,{videoRef:x,poster:$?.url||"",src:A?.url||S?.url,className:"tablet:hidden block size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:Y,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:w(i&&"relative box-content block",R),style:i?{height:`${F}px`}:{},ref:q})]}),j&&_&&e(he,{visible:j,youTubeId:_,onCloseModal:()=>U(!1)})]})});Z.displayName="MediaPlayerBase";var De=xe(Z);export{De as default};
+"use client";import{Fragment as Me,jsx as e,jsxs as u}from"react/jsx-runtime";import{useState as p,useRef as n,useMemo as me,useEffect as E,forwardRef as ge,useImperativeHandle as fe}from"react";import{debounce as ve}from"lodash";import{cn as w}from"../../helpers/utils.js";import{withLayout as xe}from"../../shared/Styles.js";import ye from"../../components/button.js";import{VideoModal as he}from"../VideoModal/index.js";import{convertLexicalToHTML as K}from"@payloadcms/richtext-lexical/html";import{useInView as be}from"react-intersection-observer";import{useExposure as we}from"../../hooks/useExposure.js";import Q from"../../helpers/ScrollLoadVideo.js";import{gsap as I}from"gsap";import{SplitText as He}from"gsap/dist/SplitText";import{ScrollTrigger as W}from"gsap/dist/ScrollTrigger";const Te="media_player_base",ke="video",X=({defaultConverters:H})=>({...H,text:T=>{const{node:t}=T;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),Z=ge(({className:H="",id:T,onBtnClick:t,data:{title:m,videoTitle:g,btnText:P,youtubeId:_,video:S,mobileVideo:A,theme:V,img:$,shape:B,titleAnimation:f,...ee}},te)=>{const{sticky:l}=ee,[C,D]=p(!1),[F,re]=p(0),[oe,ne]=p(0),[v,se]=p(0),[j,U]=p(!1),x=n(null),Y=n(null),r=n(null),y=n(null),q=n(null),h=n(null),k=n(null),M=n(null),{ref:le,inView:s}=be();fe(te,()=>r.current);const b=typeof m=="string"?m:m&&K({data:m,converters:X}),L=typeof g=="string"?g:g&&K({data:g,converters:X});E(()=>{s?(x.current?.play(),D(!0)):(x.current?.pause(),D(!1))},[s]);const N=ve(()=>{if(r.current){const a=r.current.getBoundingClientRect(),i=window.innerHeight,c=window.scrollY||window.pageYOffset,o=a.bottom+c,d=document.documentElement.scrollHeight-o;re(d>i?i:d)}if(r.current){const a=r.current.clientHeight,i=window.innerHeight;ne(a+i)}},600);E(()=>(N(),window.addEventListener("resize",N),()=>{window.removeEventListener("resize",N)}),[]),E(()=>{function a(){if(!y.current||f!=="fade-in")return;const c=y.current?.clientHeight||80;h.current=new He(y.current,{type:"words",wordsClass:"word"});const o=h.current.words;I.set(o,{opacity:0}),k.current=W.create({trigger:r.current,start:"top center-=10%",end:`top+=${c*1.5+80}px center-=10%`,scrub:!0,onUpdate:O=>{const d=O.progress,G=o.length,ae=1/G,J=.5;o.forEach((ce,de)=>{const pe=de/G*(1-J),ue=ae*(1+J);let z=(d-pe)/ue;z=Math.max(0,Math.min(z,1)),I.set(ce,{opacity:z})}),I.set(Y.current,{opacity:d})}})}function i(){M.current=W.create({trigger:r.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:c=>{const o=c.progress;console.log("progress__",o),se(o)}})}return s&&(a(),i()),()=>{h.current&&h.current.revert(),k.current&&k.current.kill(),M.current&&M.current.kill()}},[f,s]),we(q,{componentType:ke,componentName:Te,componentTitle:L});const ie=me(()=>s&&v>0&&v<.9?3:s?2:1,[v,s]),R="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return u(Me,{children:[l&&e("div",{ref:r,className:w("relative z-10",R,{"aiui-dark":V==="dark","rounded-box":B==="rounded"},H),children:e("div",{ref:le,children:!f&&u("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[b&&!C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),L&&C&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:L}}),P&&e(ye,{variant:"link",className:w("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{U(!0),t&&t?.()},children:P})]})})}),u("div",{style:l?{marginBottom:`-${F}px`,marginTop:`-${oe}px`,zIndex:ie}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:u("div",{id:T,className:w("relative overflow-hidden",l?"h-screen w-full":R,{"aiui-dark":V==="dark","rounded-box":B==="rounded"}),children:[f==="fade-in"&&b&&e("div",{ref:y,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),u("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-v*100}vh`},children:[e(Q,{videoRef:x,poster:$?.url||"",src:S?.url,className:"tablet:block hidden size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(Q,{videoRef:x,poster:$?.url||"",src:A?.url||S?.url,className:"tablet:hidden block size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:Y,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),l&&e("div",{className:w(l&&"relative box-content block",R),style:l?{height:`${F}px`}:{},ref:q})]}),j&&_&&e(he,{visible:j,youTubeId:_,onCloseModal:()=>U(!1)})]})});Z.displayName="MediaPlayerBase";var De=xe(Z);export{De as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            ref={titleRef}\n            className={cn(\n              'relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className=\"relative\"\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: title_html }}\n                />\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "aAmLM,mBAAAA,GAkBc,OAAAC,EAFJ,QAAAC,MAhBV,oBAlLN,OAAS,YAAAC,EAAU,UAAAC,EAAQ,WAAAC,GAAS,aAAAC,EAAW,cAAAC,GAAY,uBAAAC,OAA2B,QACtF,OAAS,YAAAC,OAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAOC,OAAY,6BACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,OAAiB,8BAE1B,OAAS,eAAAC,OAAmB,6BAC5B,OAAOC,MAAqB,mCAC5B,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,OAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAEhBC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAkBpB,GACtB,CACE,CACE,UAAAqB,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,YAAAC,EAAa,MAAAC,EAAO,IAAAC,EAAK,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,EAAK,CAChH,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIF,GACb,CAACG,EAAWC,CAAY,EAAI1C,EAAS,EAAK,EAC1C,CAAC2C,EAAKC,EAAM,EAAI5C,EAAS,CAAC,EAC1B,CAAC6C,GAAaC,EAAc,EAAI9C,EAAS,CAAC,EAC1C,CAAC+C,EAAqBC,EAAsB,EAAIhD,EAAS,CAAC,EAC1D,CAACiD,EAASC,CAAU,EAAIlD,EAAkB,EAAK,EAE/CmD,EAAWlD,EAAyB,IAAI,EACxCmD,EAAQnD,EAAyB,IAAI,EACrCoD,EAAWpD,EAAuB,IAAI,EACtCqD,EAAiBrD,EAAuB,IAAI,EAC5CsD,EAAWtD,EAAuB,IAAI,EACtCuD,EAAoBvD,EAAyB,IAAI,EACjDwD,EAAmBxD,EAA6B,IAAI,EACpDyD,EAAmBzD,EAA6B,IAAI,EACpD,CAAE,IAAK0D,GAAW,OAAAC,CAAO,EAAIhD,GAAU,EAE7CP,GAAoBkC,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMQ,EACJ,OAAOjC,GAAU,SAAWA,EAAQA,GAASjB,EAAqB,CAAE,KAAMiB,EAAO,WAAYR,CAAe,CAAC,EACzG0C,EACJ,OAAOjC,GAAe,SAClBA,EACAA,GAAclB,EAAqB,CAAE,KAAMkB,EAAY,WAAYT,CAAe,CAAC,EAEzFjB,EAAU,IAAM,CACVyD,GACFT,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACkB,CAAM,CAAC,EAEX,MAAMG,EAAwBzD,GAAS,IAAM,CAC3C,GAAI+C,EAAS,QAAS,CACpB,MAAMW,EAAOX,EAAS,QAAQ,sBAAsB,EAC9CY,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CvB,GAAOwB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIf,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/BY,EAAe,OAAO,YAC5BnB,GAAeD,EAAcoB,CAAY,CAC3C,CACF,EAAG,GAAG,EAEN9D,EAAU,KACR4D,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAEL5D,EAAU,IAAM,CACd,SAASkE,GAAa,CACpB,GAAI,CAACf,EAAe,SAAWjB,IAAmB,UAAW,OAC7D,MAAMiC,EAAShB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAIxC,GAAUsC,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMiB,EAAQf,EAAkB,QAAQ,MACxCzC,EAAK,IAAIwD,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9Bd,EAAiB,QAAUxC,EAAc,OAAO,CAC9C,QAASoC,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQiB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1ClE,EAAK,IAAI8D,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACDlE,EAAK,IAAIqC,EAAM,QAAS,CAAE,QAASqB,CAAS,CAAC,CAC/C,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAUzC,EAAc,OAAO,CAC9C,QAASoC,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWmB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtB,QAAQ,IAAI,aAAcC,CAAQ,EAClCzB,GAAuByB,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX1B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACrB,EAAgBuB,CAAM,CAAC,EAE3B/C,GAAY0C,EAAU,CACpB,cAAApC,GACA,cAAAD,GACA,eAAgB4C,CAClB,CAAC,EAED,MAAMqB,GAAcjF,GAAQ,IACtB0D,GAAUb,EAAsB,GAAKA,EAAsB,GAAY,EACvEa,EAAe,EACZ,EACN,CAACb,EAAqBa,CAAM,CAAC,EAE1BwB,EACJ,6NACF,OACErF,EAAAF,GAAA,CACG,UAAA2C,GACC1C,EAAC,OACC,IAAKuD,EACL,UAAW9C,EACT,gBACA6E,EACA,CACE,YAAalD,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,SAAA3B,EAAC,OAAI,IAAK6D,GACP,UAACtB,GACAtC,EAAC,OAAI,UAAU,yGACZ,UAAA8D,GAAc,CAACpB,GACd3C,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQ+D,CAAW,EAChD,EAEDC,GAAmBrB,GAClB3C,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQgE,CAAgB,EACrD,EAEDhC,GACChC,EAACW,GAAA,CACC,QAAQ,OACR,UAAWF,EAAG,4DAA4D,EAC1E,QAAS,IAAM,CACb2C,EAAW,EAAI,EAYfvB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,EAEF/B,EAAC,OACC,MACEyC,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQsC,EACV,EACA,CAAC,EAEP,UAAU,WAEV,UAAArF,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OACC,GAAI2B,EACJ,UAAWnB,EAAG,2BAA4BiC,EAAS,kBAAoB4C,EAAQ,CAC7E,YAAalD,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAAawB,GAC/B/D,EAAC,OACC,IAAKwD,EACL,UAAU,wLACV,wBAAyB,CAAE,OAAQO,CAAW,EAChD,EAEF9D,EAAC,OACC,UAAU,6DACV,MAAO,CAAE,OAAQ,GAAG,IAAMgD,EAAsB,GAAG,IAAK,EAExD,UAAAjD,EAACgB,EAAA,CACC,SAAUqC,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,6CACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACAlC,EAACgB,EAAA,CACC,SAAUqC,EACV,OAAQhB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,6CACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACAlC,EAAC,OACC,IAAKsD,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACAtD,EAAC,OACC,UAAWS,EAAGiC,GAAU,6BAA8B4C,CAAM,EAC5D,MAAO5C,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKY,EACP,GACF,EACCN,GAAWlB,GACVjC,EAACY,GAAA,CAAW,QAASuC,EAAS,UAAWlB,EAAW,aAAc,IAAMmB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA1B,EAAgB,YAAc,kBAE9B,IAAO6D,GAAQ7E,GAAWgB,CAAe",
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            ref={titleRef}\n            className={cn(\n              'relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className=\"relative\"\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: title_html }}\n                />\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "MediaPlayerBase_default"]
 }

package/dist/esm/biz-components/MediaShelf/ProductCard.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as k,jsx as a,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{cn as t}from"../../helpers/index.js";import{Button as h,Badge as I,Card as _,CardContent as q,Picture as E,Text as u,Heading as c,Progress as H}from"../../components/index.js";const R=5;function O(e,l,s,m){if(e===void 0)return!0;switch(e){case"always":return!0;case"never":return!1;case"below-quantity":return l===void 0?!0:s<=l;case"below-percentage":return l===void 0?!0:s/m*100<=l;default:return!0}}const p=o.forwardRef(({product:e,className:l,stockDisplayMode:s,stockThresholdValue:m,onLearnMore:w,onShopNow:N,onAddToCart:P,classNames:i,secondaryButtonText:y,secondaryButtonFun:b,primaryButtonText:v,primaryButtonFun:g,showOriginalPrice:B,copy:f,onProductImageClick:x},F)=>{const[L,M]=o.useState(!1),[T,D]=o.useState(!1),z=o.useMemo(()=>e?.availableForSale&&e?.quantityAvailable<=0?R:e?.availableForSale?(e?.quantityAvailable??0)/(e?.totalInventory??1)*100:0,[e?.availableForSale,e?.quantityAvailable,e?.totalInventory]),C=async(r,d)=>{if(!r)return;const S=d==="primary"?M:D;S(!0);try{switch(r){case"buyNow":await N?.(e);break;case"addCart":await P?.(e);break;case"learnMore":await w?.(e);break;default:break}}finally{S(!1)}},A=e.availableForSale&&e.quantityAvailable<=0;return n(_,{ref:F,className:t("flex h-full min-w-[296px] flex-col overflow-hidden",e.custom_link?"cursor-pointer":"",l,i?.productCard),children:[n("div",{className:t("media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden",i?.productCardImageWrapper),children:[a("div",{className:t("media-shelf-product-card-image-bg absolute inset-0 ",i?.productCardImageBg),children:a("a",{onClick:()=>x?.(e),...!x&&{href:e.custom_link||e.listingLink},className:"cursor-pointer",children:a(E,{source:e.custom_image||e.image,alt:e.name,className:t("h-full",i?.productCardImage),imgClassName:"h-full object-contain"})})}),a("div",{className:"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]",children:e.tags?.map((r,d)=>r.label?a(I,{size:"sm",variant:r.variant||"outline",className:t("mr-1"),promotionalType:r.promotionalType,children:r.label},d):a(o.Fragment,{children:r},d))})]}),n(q,{className:"desktop:p-6 flex h-[calc(100%-240px)] grow flex-col justify-between p-4",children:[n("div",{className:"mb-6 flex-1",children:[a(c,{as:"h3",size:2,className:t("text-info-primary mb-1 line-clamp-2 tracking-tight",i?.productTitle),children:e.custom_name||e.name}),(e.custom_description||e?.description)&&a(u,{size:2,className:t("text-info-primary line-clamp-1",i?.productDescription),html:e.custom_description||e.description})]}),O(s,m,e?.quantityAvailable??0,e?.totalInventory??0)&&n("div",{"data-total":e?.totalInventory??0,"data-available":e?.quantityAvailable??0,className:"space-y-2",children:[a(H,{value:z,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{progressBar:"transition-all duration-300 ease-in-out"}}),a(u,{size:3,className:"text-info-tertiary text-[14px]",children:A?f?.limitedStock:f?.stockDisplayText?.replace("{count}",`${e.availableForSale?e.quantityAvailable:0}`)})]}),a(k,{children:e?.priceLabel&&e?.availableForSale&&a(u,{size:4,className:t("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]",i?.productPriceLabel),children:e.priceLabel})}),a("div",{className:t("mb-6",i?.productPrice),children:a("div",{className:"flex items-baseline gap-2",children:e.availableForSale?n(k,{children:[a(c,{size:2,className:"text-info-primary",as:"h6",children:e.price}),B&&e.originalPrice&&a(c,{size:2,className:"text-info-tertiary line-through",as:"h6",children:e.originalPrice})]}):a(c,{size:2,className:"text-info-tertiary",children:f?.outOfStockLabel??"Sold Out"})})}),n("div",{className:t("lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2",i?.buttonGroup),children:[y&&a(h,{variant:"secondary",size:"base",className:t("tablet:w-fit w-full",i?.secondaryButton),onClick:()=>C(b,"secondary"),disabled:!e.availableForSale&&b!=="learnMore",loading:T,children:y}),v&&a(h,{variant:"primary",size:"base",className:t("tablet:w-fit w-full",i?.primaryButton),onClick:()=>C(g,"primary"),disabled:!e.availableForSale&&g!=="learnMore",loading:L,children:v})]})]})]})});p.displayName="MediaShelf.ProductCard";var K=p;export{p as ProductCard,K as default};
+"use client";import{Fragment as O,jsx as a,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{cn as t}from"../../helpers/index.js";import{Button as k,Badge as A,Card as I,CardContent as _,Picture as q,Text as f,Heading as c,Progress as E}from"../../components/index.js";const H=5;function R(e,l,s,m){if(e===void 0)return!0;switch(e){case"always":return!0;case"never":return!1;case"below-quantity":return l===void 0?!0:s<=l;case"below-percentage":return l===void 0?!0:s/m*100<=l;default:return!0}}const u=o.forwardRef(({product:e,className:l,stockDisplayMode:s,stockThresholdValue:m,onLearnMore:S,onShopNow:w,onAddToCart:N,classNames:i,secondaryButtonText:y,secondaryButtonFun:b,primaryButtonText:g,primaryButtonFun:v,showOriginalPrice:P,copy:p,onProductImageClick:x},B)=>{const[F,L]=o.useState(!1),[M,T]=o.useState(!1),D=o.useMemo(()=>e?.availableForSale&&e?.quantityAvailable<=0?H:e?.availableForSale?(e?.quantityAvailable??0)/(e?.totalInventory??1)*100:0,[e?.availableForSale,e?.quantityAvailable,e?.totalInventory]),C=async(r,d)=>{if(!r)return;const h=d==="primary"?L:T;h(!0);try{switch(r){case"buyNow":await w?.(e);break;case"addCart":await N?.(e);break;case"learnMore":await S?.(e);break;default:break}}finally{h(!1)}},z=e.availableForSale&&e.quantityAvailable<=0;return n(I,{ref:B,className:t("tablet:min-w-[auto] hover:bg-container-secondary-0 flex h-full min-w-[296px] flex-col overflow-hidden border-none",e.custom_link?"cursor-pointer":"",l,i?.productCard),children:[n("div",{className:t("media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden",i?.productCardImageWrapper),children:[a("div",{className:t("media-shelf-product-card-image-bg absolute inset-0 ",i?.productCardImageBg),children:a("a",{onClick:()=>x?.(e),...!x&&{href:e.custom_link||e.listingLink},className:"cursor-pointer",children:a(q,{source:e.custom_image||e.image,alt:e.name,className:t("h-full",i?.productCardImage),imgClassName:"h-full object-contain"})})}),a("div",{className:"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]",children:e.tags?.map((r,d)=>r.label?a(A,{size:"sm",variant:r.variant||"outline",className:t("mr-1"),promotionalType:r.promotionalType,children:r.label},d):a(o.Fragment,{children:r},d))})]}),n(_,{className:"desktop:p-6 bg-container-primary laptop:gap-6 flex h-[calc(100%-240px)] grow flex-col justify-between gap-4 p-4",children:[n("div",{className:"flex-0",children:[a(c,{as:"h3",size:2,className:t("text-info-primary mb-1 line-clamp-2 tracking-tight",i?.productTitle),children:e.custom_name||e.name}),(e.custom_description||e?.description)&&a(f,{size:2,className:t("text-info-primary line-clamp-1",i?.productDescription),html:e.custom_description||e.description})]}),R(s,m,e?.quantityAvailable??0,e?.totalInventory??0)&&n("div",{"data-total":e?.totalInventory??0,"data-available":e?.quantityAvailable??0,className:"space-y-2",children:[a(E,{value:D,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{progressBar:"transition-all duration-300 ease-in-out"}}),a(f,{size:3,className:"text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[12px]",children:z?p?.limitedStock:p?.stockDisplayText?.replace("{count}",`${e.availableForSale?e.quantityAvailable:0}`)})]}),n("div",{children:[e?.priceLabel&&e?.availableForSale&&a(f,{size:4,className:t("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]",i?.productPriceLabel),children:e.priceLabel}),a("div",{className:t("mb-2",i?.productPrice),children:a("div",{className:"flex items-baseline gap-2",children:e.availableForSale?n(O,{children:[a(c,{size:2,className:"text-info-primary",as:"h6",children:e.price}),P&&e.originalPrice&&a(c,{size:2,className:"text-info-tertiary line-through",as:"h6",children:e.originalPrice})]}):a(c,{size:2,className:"text-info-tertiary",children:p?.outOfStockLabel??"Sold Out"})})}),n("div",{className:t("lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2",i?.buttonGroup),children:[y&&a(k,{variant:"secondary",size:"base",className:t("tablet:w-fit w-full",i?.secondaryButton),onClick:()=>C(b,"secondary"),disabled:!e.availableForSale&&b!=="learnMore",loading:M,children:y}),g&&a(k,{variant:"primary",size:"base",className:t("tablet:w-fit w-full",i?.primaryButton),onClick:()=>C(v,"primary"),disabled:!e.availableForSale&&v!=="learnMore",loading:F,children:g})]})]})]})]})});u.displayName="MediaShelf.ProductCard";var K=u;export{u as ProductCard,K as default};
 //# sourceMappingURL=ProductCard.js.map

package/dist/esm/biz-components/MediaShelf/ProductCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaShelf/ProductCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading, Progress } from '../../components/index.js'\n\nimport type {\n  ButtonFunctionType,\n  CopyConfig,\n  ProductCardData,\n  StockDisplayMode,\n  MediaShelfSemanticName,\n} from './types.js'\n\n/**\n * \u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u7684\u6700\u5C0F\u767E\u5206\u6BD4\n * \u9632\u6B62\u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u4E3A\u6EE1\u683C\uFF08100%\uFF09\u6216\u5B8C\u5168\u7A7A\uFF080%\uFF09\n */\nconst OVERSELLING_STOCK_PERCENTAGE = 5\n\n/**\n * \u5224\u65AD\u662F\u5426\u5E94\u8BE5\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n * @param stockDisplayMode \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n * @param stockThresholdValue \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09\n * @param quantityAvailable \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n * @param totalInventory \u603B\u5E93\u5B58\n * @returns \u662F\u5426\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n */\nfunction shouldShowStock(\n  stockDisplayMode: StockDisplayMode | undefined,\n  stockThresholdValue: number | undefined,\n  quantityAvailable: number,\n  totalInventory: number\n): boolean {\n  // \u672A\u914D\u7F6E\u65F6\u9ED8\u8BA4\u663E\u793A\n  if (stockDisplayMode === undefined) {\n    return true\n  }\n\n  // \u6839\u636E\u5C55\u793A\u6A21\u5F0F\u5224\u65AD\n  switch (stockDisplayMode) {\n    case 'always':\n      // \u603B\u662F\u663E\u793A\n      return true\n\n    case 'never':\n      // \u6C38\u4E0D\u663E\u793A\n      return false\n\n    case 'below-quantity':\n      // \u5F53\u5E93\u5B58\u6570\u91CF\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n      if (stockThresholdValue === undefined) {\n        return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n      }\n\n      return quantityAvailable <= stockThresholdValue\n\n    case 'below-percentage':\n      // \u5F53\u5E93\u5B58\u767E\u5206\u6BD4\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n      if (stockThresholdValue === undefined) {\n        return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n      }\n      return (quantityAvailable / totalInventory) * 100 <= stockThresholdValue\n\n    default:\n      // \u672A\u77E5\u6A21\u5F0F\u65F6\u9ED8\u8BA4\u663E\u793A\n      return true\n  }\n}\n\n/**\n * MediaShelf ProductCard \u7EC4\u4EF6 Props \u63A5\u53E3\n */\nexport interface MediaShelfProductCardProps {\n  /** \u4EA7\u54C1\u6570\u636E */\n  product: ProductCardData\n  /** \u6837\u5F0F\u7C7B\u540D */\n  className?: string\n  /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n  stockDisplayMode?: StockDisplayMode\n  /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n  stockThresholdValue?: number\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<MediaShelfSemanticName, string>>\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  showOriginalPrice?: boolean\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CopyConfig\n  /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n}\n\n/**\n * MediaShelf \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, MediaShelfProductCardProps>(\n  (\n    {\n      product,\n      className,\n      stockDisplayMode,\n      stockThresholdValue,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const stockPercentage = React.useMemo(() => {\n      if (product?.availableForSale && product?.quantityAvailable <= 0) {\n        return OVERSELLING_STOCK_PERCENTAGE\n      }\n      // \u4E0D\u53EF\u552E\u65F6\u663E\u793A0%\n      if (!product?.availableForSale) {\n        return 0\n      }\n      return ((product?.quantityAvailable ?? 0) / (product?.totalInventory ?? 1)) * 100\n    }, [product?.availableForSale, product?.quantityAvailable, product?.totalInventory])\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n      if (!buttonFun) return\n\n      const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n      setLoading(true)\n\n      try {\n        switch (buttonFun) {\n          case 'buyNow':\n            await onShopNow?.(product)\n            break\n          case 'addCart':\n            await onAddToCart?.(product)\n            break\n          case 'learnMore':\n            await onLearnMore?.(product)\n            break\n          default:\n            break\n        }\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    const overselling = product.availableForSale && product.quantityAvailable <= 0\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'flex h-full min-w-[296px] flex-col overflow-hidden',\n          product.custom_link ? 'cursor-pointer' : '',\n          className,\n          classNames?.productCard\n        )}\n      >\n        {/* \u56FE\u7247\u533A\u57DF */}\n        <div\n          className={cn(\n            'media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden',\n            classNames?.productCardImageWrapper\n          )}\n        >\n          {/* \u80CC\u666F\u56FE\u7247 */}\n          <div className={cn('media-shelf-product-card-image-bg absolute inset-0 ', classNames?.productCardImageBg)}>\n            <a\n              onClick={() => onProductImageClick?.(product)}\n              {...(!onProductImageClick && {\n                href: product.custom_link || product.listingLink,\n              })}\n              className=\"cursor-pointer\"\n            >\n              <Picture\n                source={product.custom_image || product.image}\n                alt={product.name}\n                className={cn('h-full', classNames?.productCardImage)}\n                imgClassName=\"h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E\u533A\u57DF */}\n          <div className=\"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]\">\n            {product.tags?.map((tag: any, index) =>\n              (tag as any).label ? (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={(tag.variant as any) || 'outline'}\n                  className={cn('mr-1')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ) : (\n                <React.Fragment key={index}>{tag}</React.Fragment>\n              )\n            )}\n          </div>\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <CardContent className=\"desktop:p-6 flex h-[calc(100%-240px)] grow flex-col justify-between p-4\">\n          {/* \u4EA7\u54C1\u6807\u9898\u548C\u526F\u6807\u9898 */}\n          <div className=\"mb-6 flex-1\">\n            <Heading\n              as=\"h3\"\n              size={2}\n              className={cn('text-info-primary mb-1 line-clamp-2 tracking-tight', classNames?.productTitle)}\n            >\n              {product.custom_name || product.name}\n            </Heading>\n            {(product.custom_description || product?.description) && (\n              <Text\n                size={2}\n                className={cn('text-info-primary line-clamp-1', classNames?.productDescription)}\n                html={product.custom_description || product.description}\n              />\n            )}\n          </div>\n\n          {/* \u5E93\u5B58\u4FE1\u606F */}\n          {shouldShowStock(\n            stockDisplayMode,\n            stockThresholdValue,\n            product?.quantityAvailable ?? 0,\n            product?.totalInventory ?? 0\n          ) && (\n            <div\n              data-total={product?.totalInventory ?? 0}\n              data-available={product?.quantityAvailable ?? 0}\n              className=\"space-y-2\"\n            >\n              <Progress\n                value={stockPercentage}\n                max={100}\n                min={0}\n                size=\"base\"\n                variant=\"default\"\n                aria-label=\"stock progress\"\n                classNames={{\n                  progressBar: 'transition-all duration-300 ease-in-out',\n                }}\n              />\n              <Text size={3} className=\"text-info-tertiary text-[14px]\">\n                {overselling\n                  ? copy?.limitedStock\n                  : copy?.stockDisplayText?.replace(\n                      '{count}',\n                      `${product.availableForSale ? product.quantityAvailable : 0}`\n                    )}\n              </Text>\n            </div>\n          )}\n\n          {/** \u4EF7\u683C\u6807\u7B7E */}\n          <>\n            {product?.priceLabel && product?.availableForSale && (\n              <Text\n                size={4}\n                className={cn(\n                  'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]',\n                  classNames?.productPriceLabel\n                )}\n              >\n                {product.priceLabel}\n              </Text>\n            )}\n          </>\n          {/* \u4EF7\u683C\u533A\u57DF */}\n          <div className={cn('mb-6', classNames?.productPrice)}>\n            <div className=\"flex items-baseline gap-2\">\n              {product.availableForSale ? (\n                <>\n                  <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                    {product.price}\n                  </Heading>\n                  {showOriginalPrice && product.originalPrice && (\n                    <Heading size={2} className=\"text-info-tertiary line-through\" as=\"h6\">\n                      {product.originalPrice}\n                    </Heading>\n                  )}\n                </>\n              ) : (\n                <Heading size={2} className=\"text-info-tertiary\">\n                  {copy?.outOfStockLabel ?? 'Sold Out'}\n                </Heading>\n              )}\n            </div>\n          </div>\n\n          {/* \u6309\u94AE\u533A\u57DF */}\n          <div className={cn('lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2', classNames?.buttonGroup)}>\n            {secondaryButtonText && (\n              <Button\n                variant=\"secondary\"\n                size=\"base\"\n                className={cn('tablet:w-fit w-full', classNames?.secondaryButton)}\n                onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n                disabled={!product.availableForSale && secondaryButtonFun !== 'learnMore'}\n                loading={secondaryLoading}\n              >\n                {secondaryButtonText}\n              </Button>\n            )}\n            {primaryButtonText && (\n              <Button\n                variant=\"primary\"\n                size=\"base\"\n                className={cn('tablet:w-fit w-full', classNames?.primaryButton)}\n                onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n                disabled={!product.availableForSale && primaryButtonFun !== 'learnMore'}\n                loading={primaryLoading}\n              >\n                {primaryButtonText}\n              </Button>\n            )}\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'MediaShelf.ProductCard'\n\nexport default ProductCard\nexport { ProductCard }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading, Progress } from '../../components/index.js'\n\nimport type {\n  ButtonFunctionType,\n  CopyConfig,\n  ProductCardData,\n  StockDisplayMode,\n  MediaShelfSemanticName,\n} from './types.js'\nimport type { Theme } from '../../types/props.js'\n\n/**\n * \u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u7684\u6700\u5C0F\u767E\u5206\u6BD4\n * \u9632\u6B62\u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u4E3A\u6EE1\u683C\uFF08100%\uFF09\u6216\u5B8C\u5168\u7A7A\uFF080%\uFF09\n */\nconst OVERSELLING_STOCK_PERCENTAGE = 5\n\n/**\n * \u5224\u65AD\u662F\u5426\u5E94\u8BE5\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n * @param stockDisplayMode \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n * @param stockThresholdValue \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09\n * @param quantityAvailable \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n * @param totalInventory \u603B\u5E93\u5B58\n * @returns \u662F\u5426\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n */\nfunction shouldShowStock(\n  stockDisplayMode: StockDisplayMode | undefined,\n  stockThresholdValue: number | undefined,\n  quantityAvailable: number,\n  totalInventory: number\n): boolean {\n  // \u672A\u914D\u7F6E\u65F6\u9ED8\u8BA4\u663E\u793A\n  if (stockDisplayMode === undefined) {\n    return true\n  }\n\n  // \u6839\u636E\u5C55\u793A\u6A21\u5F0F\u5224\u65AD\n  switch (stockDisplayMode) {\n    case 'always':\n      // \u603B\u662F\u663E\u793A\n      return true\n\n    case 'never':\n      // \u6C38\u4E0D\u663E\u793A\n      return false\n\n    case 'below-quantity':\n      // \u5F53\u5E93\u5B58\u6570\u91CF\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n      if (stockThresholdValue === undefined) {\n        return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n      }\n\n      return quantityAvailable <= stockThresholdValue\n\n    case 'below-percentage':\n      // \u5F53\u5E93\u5B58\u767E\u5206\u6BD4\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n      if (stockThresholdValue === undefined) {\n        return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n      }\n      return (quantityAvailable / totalInventory) * 100 <= stockThresholdValue\n\n    default:\n      // \u672A\u77E5\u6A21\u5F0F\u65F6\u9ED8\u8BA4\u663E\u793A\n      return true\n  }\n}\n\n/**\n * MediaShelf ProductCard \u7EC4\u4EF6 Props \u63A5\u53E3\n */\nexport interface MediaShelfProductCardProps {\n  /** \u4EA7\u54C1\u6570\u636E */\n  product: ProductCardData\n  /** \u6837\u5F0F\u7C7B\u540D */\n  className?: string\n  /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n  stockDisplayMode?: StockDisplayMode\n  /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n  stockThresholdValue?: number\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<MediaShelfSemanticName, string>>\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  showOriginalPrice?: boolean\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CopyConfig\n  /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n}\n\n/**\n * MediaShelf \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, MediaShelfProductCardProps>(\n  (\n    {\n      product,\n      className,\n      stockDisplayMode,\n      stockThresholdValue,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const stockPercentage = React.useMemo(() => {\n      if (product?.availableForSale && product?.quantityAvailable <= 0) {\n        return OVERSELLING_STOCK_PERCENTAGE\n      }\n      // \u4E0D\u53EF\u552E\u65F6\u663E\u793A0%\n      if (!product?.availableForSale) {\n        return 0\n      }\n      return ((product?.quantityAvailable ?? 0) / (product?.totalInventory ?? 1)) * 100\n    }, [product?.availableForSale, product?.quantityAvailable, product?.totalInventory])\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n      if (!buttonFun) return\n\n      const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n      setLoading(true)\n\n      try {\n        switch (buttonFun) {\n          case 'buyNow':\n            await onShopNow?.(product)\n            break\n          case 'addCart':\n            await onAddToCart?.(product)\n            break\n          case 'learnMore':\n            await onLearnMore?.(product)\n            break\n          default:\n            break\n        }\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    const overselling = product.availableForSale && product.quantityAvailable <= 0\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'tablet:min-w-[auto] hover:bg-container-secondary-0 flex h-full min-w-[296px] flex-col overflow-hidden border-none',\n          product.custom_link ? 'cursor-pointer' : '',\n          className,\n          classNames?.productCard\n        )}\n      >\n        {/* \u56FE\u7247\u533A\u57DF */}\n        <div\n          className={cn(\n            'media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden',\n            classNames?.productCardImageWrapper\n          )}\n        >\n          {/* \u80CC\u666F\u56FE\u7247 */}\n          <div className={cn('media-shelf-product-card-image-bg absolute inset-0 ', classNames?.productCardImageBg)}>\n            <a\n              onClick={() => onProductImageClick?.(product)}\n              {...(!onProductImageClick && {\n                href: product.custom_link || product.listingLink,\n              })}\n              className=\"cursor-pointer\"\n            >\n              <Picture\n                source={product.custom_image || product.image}\n                alt={product.name}\n                className={cn('h-full', classNames?.productCardImage)}\n                imgClassName=\"h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E\u533A\u57DF */}\n          <div className=\"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]\">\n            {product.tags?.map((tag: any, index) =>\n              (tag as any).label ? (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={(tag.variant as any) || 'outline'}\n                  className={cn('mr-1')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ) : (\n                <React.Fragment key={index}>{tag}</React.Fragment>\n              )\n            )}\n          </div>\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <CardContent className=\"desktop:p-6 bg-container-primary laptop:gap-6 flex h-[calc(100%-240px)] grow flex-col justify-between gap-4 p-4\">\n          {/* \u4EA7\u54C1\u6807\u9898\u548C\u526F\u6807\u9898 */}\n          <div className=\"flex-0\">\n            <Heading\n              as=\"h3\"\n              size={2}\n              className={cn('text-info-primary mb-1 line-clamp-2 tracking-tight', classNames?.productTitle)}\n            >\n              {product.custom_name || product.name}\n            </Heading>\n            {(product.custom_description || product?.description) && (\n              <Text\n                size={2}\n                className={cn('text-info-primary line-clamp-1', classNames?.productDescription)}\n                html={product.custom_description || product.description}\n              />\n            )}\n          </div>\n\n          {/* \u5E93\u5B58\u4FE1\u606F */}\n          {shouldShowStock(\n            stockDisplayMode,\n            stockThresholdValue,\n            product?.quantityAvailable ?? 0,\n            product?.totalInventory ?? 0\n          ) && (\n            <div\n              data-total={product?.totalInventory ?? 0}\n              data-available={product?.quantityAvailable ?? 0}\n              className=\"space-y-2\"\n            >\n              <Progress\n                value={stockPercentage}\n                max={100}\n                min={0}\n                size=\"base\"\n                variant=\"default\"\n                aria-label=\"stock progress\"\n                classNames={{\n                  progressBar: 'transition-all duration-300 ease-in-out',\n                }}\n              />\n              <Text size={3} className=\"text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[12px]\">\n                {overselling\n                  ? copy?.limitedStock\n                  : copy?.stockDisplayText?.replace(\n                      '{count}',\n                      `${product.availableForSale ? product.quantityAvailable : 0}`\n                    )}\n              </Text>\n            </div>\n          )}\n\n          <div>\n            {/** \u4EF7\u683C\u6807\u7B7E */}\n            {product?.priceLabel && product?.availableForSale && (\n              <Text\n                size={4}\n                className={cn(\n                  'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]',\n                  classNames?.productPriceLabel\n                )}\n              >\n                {product.priceLabel}\n              </Text>\n            )}\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div className={cn('mb-2', classNames?.productPrice)}>\n              <div className=\"flex items-baseline gap-2\">\n                {product.availableForSale ? (\n                  <>\n                    <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                      {product.price}\n                    </Heading>\n                    {showOriginalPrice && product.originalPrice && (\n                      <Heading size={2} className=\"text-info-tertiary line-through\" as=\"h6\">\n                        {product.originalPrice}\n                      </Heading>\n                    )}\n                  </>\n                ) : (\n                  <Heading size={2} className=\"text-info-tertiary\">\n                    {copy?.outOfStockLabel ?? 'Sold Out'}\n                  </Heading>\n                )}\n              </div>\n            </div>\n\n            {/* \u6309\u94AE\u533A\u57DF */}\n            <div className={cn('lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2', classNames?.buttonGroup)}>\n              {secondaryButtonText && (\n                <Button\n                  variant=\"secondary\"\n                  size=\"base\"\n                  className={cn('tablet:w-fit w-full', classNames?.secondaryButton)}\n                  onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n                  disabled={!product.availableForSale && secondaryButtonFun !== 'learnMore'}\n                  loading={secondaryLoading}\n                >\n                  {secondaryButtonText}\n                </Button>\n              )}\n              {primaryButtonText && (\n                <Button\n                  variant=\"primary\"\n                  size=\"base\"\n                  className={cn('tablet:w-fit w-full', classNames?.primaryButton)}\n                  onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n                  disabled={!product.availableForSale && primaryButtonFun !== 'learnMore'}\n                  loading={primaryLoading}\n                >\n                  {primaryButtonText}\n                </Button>\n              )}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'MediaShelf.ProductCard'\n\nexport default ProductCard\nexport { ProductCard }\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "cn", "Button", "Badge", "Card", "CardContent", "Picture", "Text", "Heading", "Progress", "OVERSELLING_STOCK_PERCENTAGE", "shouldShowStock", "stockDisplayMode", "stockThresholdValue", "quantityAvailable", "totalInventory", "ProductCard", "product", "className", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "copy", "onProductImageClick", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "stockPercentage", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "overselling", "tag", "index", "ProductCard_default"]
 }

package/dist/esm/biz-components/MiniCart/CircleProgress.d.ts

@@ -0,0 +1,38 @@
+import type { Img } from '../../types/props.js';
+export interface CircleProgressProps {
+    /** 总阶段数 (1-4) */
+    totalSteps?: 1 | 2 | 3 | 4;
+    /** 当前完成的阶段 (0 到 totalSteps) */
+    currentStep?: number;
+    /** 中间显示的图片 */
+    image?: Img;
+    /** 底部显示的文案 */
+    label?: string;
+    /** 进度条颜色，默认为品牌色 */
+    progressColor?: string;
+    /** 底部文案背景色，默认为品牌营销色 */
+    labelColor?: string;
+    /** 未完成阶段的颜色 */
+    trackColor?: string;
+    /** 背景颜色，默认为容器背景色 */
+    backgroundColor?: string;
+    /** 移动端组件尺寸，默认 64 */
+    size?: number;
+    /** laptop 以上组件尺寸，默认 80 */
+    laptopSize?: number;
+    /** 段之间的间隙（像素），默认 3 */
+    gap?: number;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * 分段式圆形进度条组件
+ * 用于 MiniCart 左侧显示阶段性进度，支持 1-4 个阶段配置
+ * 每个阶段是独立的弧段，中间有间隙
+ * 移动端默认 64px，laptop 以上默认 80px
+ */
+declare const CircleProgress: {
+    ({ totalSteps, currentStep, image, label, progressColor, labelColor, trackColor, backgroundColor, size, laptopSize, gap, className, }: CircleProgressProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CircleProgress;

package/dist/esm/biz-components/MiniCart/CircleProgress.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as r,jsxs as v}from"react/jsx-runtime";import*as W from"react";import{Picture as X,Text as Y}from"../../components/index.js";import{cn as x}from"../../helpers/index.js";const k=({totalSteps:l=4,currentStep:y=0,image:g,label:o,progressColor:N="var(--brand-color-0)",labelColor:P="var(--marketing-color-1)",trackColor:M="#DADCE0",backgroundColor:C="#EAEAEC",size:c=64,laptopSize:i=96,gap:b=3,className:z})=>{const p=Math.max(c,i),f=6,e=(p-f)/2,s=p/2,j=W.useMemo(()=>{const h=(b+f)/e*(180/Math.PI),w=(360-h*l)/l,u=t=>t*Math.PI/180,E=(t,n)=>{const a=t-90,d=n-90,G=s+e*Math.cos(u(a)),I=s+e*Math.sin(u(a)),R=s+e*Math.cos(u(d)),D=s+e*Math.sin(u(d)),O=n-t>180?1:0;return`M ${G} ${I} A ${e} ${e} 0 ${O} 1 ${R} ${D}`},A=[];let $=l===2?-45:0;for(let t=0;t<l;t++){const n=$+h/2,a=n+w,d=t<y;A.push({path:E(n,a),isCompleted:d,index:t}),$=a+h/2}return A},[l,y,b,e,s]);return v("div",{className:x("relative inline-flex shrink-0 flex-col items-center","laptop:w-[--circle-laptop-size] w-[--circle-size]","laptop:h-[--circle-laptop-height] h-[--circle-height]",z),style:{"--circle-size":`${c}px`,"--circle-laptop-size":`${i}px`,"--circle-height":`${o?c+8:c}px`,"--circle-laptop-height":`${o?i+8:i}px`},children:[v("div",{className:"laptop:size-[--circle-laptop-size] relative size-[--circle-size]",children:[v("svg",{viewBox:`0 0 ${p} ${p}`,className:x("absolute inset-0 size-full",o?"translate-y-[-8px]":""),children:[r("circle",{cx:s,cy:s,r:e,fill:C,stroke:"none"}),j.map(m=>r("path",{d:m.path,fill:"none",stroke:m.isCompleted?N:M,strokeWidth:f,strokeLinecap:"round",style:{transition:"stroke 0.3s ease-in-out"}},m.index))]}),r("div",{className:x("absolute inset-[10px] flex items-center justify-center",o?"translate-y-[-8px]":""),children:r("div",{className:"flex size-full items-center justify-center overflow-hidden rounded-full",style:{backgroundColor:C},children:g?.url&&r(X,{className:"size-full",imgClassName:"object-contain",source:g.url,alt:g.alt||""})})})]}),o&&r("div",{className:"absolute bottom-0 left-1/2 flex -translate-x-1/2 items-center justify-center rounded-full px-2 py-0.5",style:{backgroundColor:P},children:r(Y,{className:"text-xs font-medium text-white",html:o})})]})};k.displayName="CircleProgress";var H=k;export{H as default};
+//# sourceMappingURL=CircleProgress.js.map