@anker-in/headless-ui 1.1.45 → 1.1.46-alpha.1769656184318

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js +1 -1
  2. package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js.map +2 -2
  3. package/dist/cjs/biz-components/MediaShelf/ProductCard.js +1 -1
  4. package/dist/cjs/biz-components/MediaShelf/ProductCard.js.map +2 -2
  5. package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +2 -0
  6. package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
  7. package/dist/cjs/biz-components/SecondaryBanner/index.js.map +3 -3
  8. package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js +1 -1
  9. package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js.map +2 -2
  10. package/dist/esm/biz-components/MediaShelf/ProductCard.js +1 -1
  11. package/dist/esm/biz-components/MediaShelf/ProductCard.js.map +2 -2
  12. package/dist/esm/biz-components/SecondaryBanner/index.d.ts +2 -0
  13. package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
  14. package/dist/esm/biz-components/SecondaryBanner/index.js.map +3 -3
  15. package/package.json +1 -1
package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var F=Object.create;var c=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var A=(e,i)=>{for(var r in i)c(e,r,{get:i[r],enumerable:!0})},C=(e,i,r,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of G(i))!q.call(e,n)&&n!==r&&c(e,n,{get:()=>i[n],enumerable:!(d=H(i,n))||d.enumerable});return e};var b=(e,i,r)=>(r=e!=null?F(V(e)):{},C(i||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),J=e=>C(c({},"__esModule",{value:!0}),e);var U={};A(U,{ProductCard:()=>f,default:()=>Q});module.exports=J(U);var t=require("react/jsx-runtime"),s=b(require("react")),o=require("../../helpers/utils.js"),L=b(require("../../components/badge.js")),S=require("../../components/text.js"),x=b(require("../../components/button.js")),O=b(require("../../components/picture.js")),B=require("../../components/heading.js");const K={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"},f=s.forwardRef(({product:e,className:i,showTags:r=!0,showOriginalPrice:d=!0,onLearnMore:n,onShopNow:N,onAddToCart:T,onProductImageClick:v,classNames:a,secondaryButtonText:y,secondaryButtonFun:u,primaryButtonText:h,primaryButtonFun:k,copy:M},_)=>{const[z,R]=s.useState(!1),[D,I]=s.useState(!1),p=!e.availableForSale,j=async(l,m)=>{if(!l)return;const P=m==="primary"?R:I;P(!0);try{switch(l){case"buyNow":await N?.(e);break;case"addCart":await T?.(e);break;case"learnMore":await n?.(e);break;default:break}}finally{P(!1)}},g=e.custom_name||e.name,w=e.custom_description||e.description,E=e.custom_theme??"dark";return(0,t.jsx)("div",{ref:_,className:(0,o.cn)("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":E==="dark"},i,a?.productCard),children:(0,t.jsxs)("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[(0,t.jsx)("a",{onClick:()=>v?.(e),...!v&&e.listingLink&&{href:e.listingLink},rel:"noreferrer",className:(0,o.cn)("absolute inset-0",a?.productImage),children:(0,t.jsx)(O.default,{alt:e.name,source:e.custom_image??e.image,className:(0,o.cn)("rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full"),imgClassName:(0,o.cn)("object-cover",K[e.imageObjectPosition??"center"])})}),(0,t.jsxs)("div",{className:(0,o.cn)("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",a?.productContent),children:[r&&e.tags?.length?(0,t.jsx)("div",{className:(0,o.cn)("mb-2 box-border flex flex-wrap gap-1 overflow-visible",a?.tagsContainer),children:e.tags.map((l,m)=>l.label?(0,t.jsx)(L.default,{size:"sm",variant:l.variant||"outline",promotionalType:l.promotionalType,children:l.label},m):s.isValidElement(l)&&(0,t.jsx)(s.Fragment,{children:"123"},m))}):null,g?(0,t.jsx)(B.Heading,{as:"h3",title:g,html:g,className:(0,o.cn)("lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold",a?.productTitle)}):null,w?(0,t.jsx)(S.Text,{size:2,html:w,className:(0,o.cn)("lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold",a?.productDescription)}):null,(0,t.jsx)("div",{className:(0,o.cn)("mb-1 mt-4 flex items-center",a?.priceContainer),children:p?(0,t.jsx)("div",{className:(0,o.cn)("tablet:text-2xl text-info-primary text-xl font-bold",a?.productPrice),children:M?.outOfStockLabel??"Sold Out"}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:(0,o.cn)("tablet:text-2xl text-info-primary text-xl font-bold",a?.productPrice),children:e.price}),d&&e.originalPrice&&(0,t.jsx)("div",{className:(0,o.cn)("tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",a?.originalPrice),children:e.originalPrice})]})}),(0,t.jsxs)("div",{className:(0,o.cn)("lg-desktop:gap-3 pointer-events-auto flex items-center gap-2",a?.buttonGroup),children:[y&&(0,t.jsx)(x.default,{variant:"secondary",onClick:()=>j(u,"secondary"),disabled:p&&u!=="learnMore",loading:D,className:(0,o.cn)(a?.secondaryButton),children:y}),h&&(0,t.jsx)(x.default,{variant:"primary",onClick:()=>j(k,"primary"),disabled:p&&k!=="learnMore",loading:z,className:(0,o.cn)(a?.primaryButton),children:h})]})]})]})})});f.displayName="ImageOverlayShelf.ProductCard";var Q=f;
1
+ "use strict";"use client";var F=Object.create;var c=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var A=(e,i)=>{for(var r in i)c(e,r,{get:i[r],enumerable:!0})},C=(e,i,r,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of G(i))!q.call(e,n)&&n!==r&&c(e,n,{get:()=>i[n],enumerable:!(d=H(i,n))||d.enumerable});return e};var b=(e,i,r)=>(r=e!=null?F(V(e)):{},C(i||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),J=e=>C(c({},"__esModule",{value:!0}),e);var U={};A(U,{ProductCard:()=>f,default:()=>Q});module.exports=J(U);var t=require("react/jsx-runtime"),s=b(require("react")),o=require("../../helpers/utils.js"),L=b(require("../../components/badge.js")),S=require("../../components/text.js"),x=b(require("../../components/button.js")),O=b(require("../../components/picture.js")),B=require("../../components/heading.js");const K={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"},f=s.forwardRef(({product:e,className:i,showTags:r=!0,showOriginalPrice:d=!0,onLearnMore:n,onShopNow:N,onAddToCart:T,onProductImageClick:v,classNames:a,secondaryButtonText:u,secondaryButtonFun:y,primaryButtonText:h,primaryButtonFun:k,copy:M},_)=>{const[z,R]=s.useState(!1),[D,I]=s.useState(!1),p=!e.availableForSale,j=async(l,m)=>{if(!l)return;const P=m==="primary"?R:I;P(!0);try{switch(l){case"buyNow":await N?.(e);break;case"addCart":await T?.(e);break;case"learnMore":await n?.(e);break;default:break}}finally{P(!1)}},g=e.custom_name||e.name,w=e.custom_description||e.description,E=e.custom_theme??"dark";return(0,t.jsx)("div",{ref:_,className:(0,o.cn)("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":E==="dark"},i,a?.productCard),children:(0,t.jsxs)("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[(0,t.jsx)("a",{onClick:()=>v?.(e),...!v&&e.listingLink&&{href:e.listingLink},rel:"noreferrer",className:(0,o.cn)("absolute inset-0",a?.productImage),children:(0,t.jsx)(O.default,{alt:e.name,source:e.custom_image??e.image,className:(0,o.cn)("rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full"),imgClassName:(0,o.cn)("object-cover",K[e.imageObjectPosition??"center"])})}),(0,t.jsxs)("div",{className:(0,o.cn)("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",a?.productContent),children:[r&&e.tags?.length?(0,t.jsx)("div",{className:(0,o.cn)("mb-2 box-border flex flex-wrap gap-1 overflow-visible",a?.tagsContainer),children:e.tags.map((l,m)=>l.label?(0,t.jsx)(L.default,{size:"sm",variant:l.variant||"outline",promotionalType:l.promotionalType,children:l.label},m):s.isValidElement(l)&&(0,t.jsx)(s.Fragment,{children:"123"},m))}):null,g?(0,t.jsx)(B.Heading,{as:"h3",title:g,html:g,className:(0,o.cn)("lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold",a?.productTitle)}):null,w?(0,t.jsx)(S.Text,{size:2,html:w,className:(0,o.cn)("lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold",a?.productDescription)}):null,(0,t.jsx)("div",{className:(0,o.cn)("mb-1 mt-4 flex items-center",a?.priceContainer),children:p?(0,t.jsx)("div",{className:(0,o.cn)("tablet:text-2xl text-info-primary text-xl font-bold",a?.productPrice),children:M?.outOfStockLabel??"Sold Out"}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:(0,o.cn)("tablet:text-2xl text-info-primary text-xl font-bold",a?.productPrice),children:e.price}),d&&e.originalPrice&&(0,t.jsx)("div",{className:(0,o.cn)("tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",a?.originalPrice),children:e.originalPrice})]})}),(0,t.jsxs)("div",{className:(0,o.cn)("lg-desktop:gap-3 pointer-events-auto flex items-center gap-2",a?.buttonGroup),children:[u&&(0,t.jsx)(x.default,{variant:"secondary",onClick:()=>j(y,"secondary"),disabled:p&&y!=="learnMore",loading:D,className:(0,o.cn)(a?.secondaryButton),children:u}),h&&(0,t.jsx)(x.default,{variant:"primary",onClick:()=>j(k,"primary"),disabled:p&&k!=="learnMore",loading:z,className:(0,o.cn)(a?.primaryButton),children:h})]})]})]})})});f.displayName="ImageOverlayShelf.ProductCard";var Q=f;
2
2
  //# sourceMappingURL=ProductCard.js.map
package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ImageOverlayShelf/ProductCard.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GA+GY,IAAAK,EAAA,6BA7GZC,EAAuB,oBACvBC,EAAmB,kCAEnBC,EAAkB,wCAClBC,EAAqB,oCACrBC,EAAmB,yCACnBC,EAAoB,0CACpBC,EAAwB,uCAMxB,MAAMC,EAA8D,CAClE,OAAQ,gBACR,IAAK,aACL,OAAQ,gBACR,KAAM,cACN,MAAO,eACP,WAAY,kBACZ,YAAa,mBACb,cAAe,qBACf,eAAgB,qBAClB,EAMMX,EAAcI,EAAM,WACxB,CACE,CACE,QAAAQ,EACA,UAAAC,EACA,SAAAC,EAAW,GACX,kBAAAC,EAAoB,GACpB,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,KAAAC,CACF,EACAC,IACG,CACH,KAAM,CAACC,EAAgBC,CAAiB,EAAIxB,EAAM,SAAS,EAAK,EAC1D,CAACyB,EAAkBC,CAAmB,EAAI1B,EAAM,SAAS,EAAK,EAE9D2B,EAAY,CAACnB,EAAQ,iBAGrBoB,EAAoB,MAAOC,EAAgCC,IAAyC,CACxG,GAAI,CAACD,EAAW,OAEhB,MAAME,EAAaD,IAAe,UAAYN,EAAoBE,EAClEK,EAAW,EAAI,EAEf,GAAI,CACF,OAAQF,EAAW,CACjB,IAAK,SACH,MAAMhB,IAAYL,CAAO,EACzB,MACF,IAAK,UACH,MAAMM,IAAcN,CAAO,EAC3B,MACF,IAAK,YACH,MAAMI,IAAcJ,CAAO,EAC3B,MACF,QACE,KACJ,CACF,QAAE,CACAuB,EAAW,EAAK,CAClB,CACF,EAEMC,EAAexB,EAAQ,aAAeA,EAAQ,KAC9CyB,EAAqBzB,EAAQ,oBAAsBA,EAAQ,YAC3D0B,EAAQ1B,EAAQ,cAAgB,OAEtC,SACE,OAAC,OACC,IAAKc,EACL,aAAW,MACT,qFACA,mDACA,kDACA,CACE,YAAaY,IAAU,MACzB,EACAzB,EACAO,GAAY,WACd,EAEA,oBAAC,OAAI,UAAU,kEAEb,oBAAC,KACC,QAAS,IAAMD,IAAsBP,CAAO,EAC3C,GAAI,CAACO,GACJP,EAAQ,aAAe,CACrB,KAAMA,EAAQ,WAChB,EACF,IAAI,aACJ,aAAW,MAAG,mBAAoBQ,GAAY,YAAY,EAE1D,mBAAC,EAAAmB,QAAA,CACC,IAAK3B,EAAQ,KACb,OAAQA,EAAQ,cAAgBA,EAAQ,MACxC,aAAW,MACT,+FACF,EACA,gBAAc,MAAG,eAAgBD,EAAuBC,EAAQ,qBAAuB,QAAQ,CAAC,EAClG,EACF,KAEA,QAAC,OACC,aAAW,MACT,0IACAQ,GAAY,cACd,EAGC,UAAAN,GAAYF,EAAQ,MAAM,UACzB,OAAC,OAAI,aAAW,MAAG,wDAAyDQ,GAAY,aAAa,EAClG,SAAAR,EAAQ,KAAK,IAAI,CAAC4B,EAAUC,IAC1BD,EAAY,SACX,OAAC,EAAAE,QAAA,CAEC,KAAK,KACL,QAAUF,EAAI,SAAmB,UACjC,gBAAiBA,EAAI,gBAEpB,SAAAA,EAAI,OALAC,CAMP,EAEArC,EAAM,eAAeoC,CAAG,MAAK,OAACpC,EAAM,SAAN,CAA2B,gBAAPqC,CAAU,CAEhE,EACF,EACE,KAGHL,KACC,OAAC,WACC,GAAG,KACH,MAAOA,EACP,KAAMA,EACN,aAAW,MACT,8HACAhB,GAAY,YACd,EACF,EACE,KAGHiB,KACC,OAAC,QACC,KAAM,EACN,KAAMA,EACN,aAAW,MACT,wFACAjB,GAAY,kBACd,EACF,EACE,QAGJ,OAAC,OAAI,aAAW,MAAG,8BAA+BA,GAAY,cAAc,EACzE,SAAAW,KACC,OAAC,OAAI,aAAW,MAAG,sDAAuDX,GAAY,YAAY,EAC/F,SAAAK,GAAM,iBAAmB,WAC5B,KAEA,oBACE,oBAAC,OAAI,aAAW,MAAG,sDAAuDL,GAAY,YAAY,EAC/F,SAAAR,EAAQ,MACX,EACCG,GAAqBH,EAAQ,kBAC5B,OAAC,OACC,aAAW,MACT,yEACAQ,GAAY,aACd,EAEC,SAAAR,EAAQ,cACX,GAEJ,EAEJ,KAGA,QAAC,OACC,aAAW,MAAG,+DAAgEQ,GAAY,WAAW,EAEpG,UAAAC,MACC,OAAC,EAAAsB,QAAA,CACC,QAAQ,YACR,QAAS,IAAMX,EAAkBV,EAAoB,WAAW,EAChE,SAAUS,GAAaT,IAAuB,YAC9C,QAASO,EACT,aAAW,MAAGT,GAAY,eAAe,EAExC,SAAAC,EACH,EAEDE,MACC,OAAC,EAAAoB,QAAA,CACC,QAAQ,UACR,QAAS,IAAMX,EAAkBR,EAAkB,SAAS,EAC5D,SAAUO,GAAaP,IAAqB,YAC5C,QAASG,EACT,aAAW,MAAGP,GAAY,aAAa,EAEtC,SAAAG,EACH,GAEJ,GACF,GACF,EACF,CAEJ,CACF,EAEAvB,EAAY,YAAc,gCAG1B,IAAOC,EAAQD",
6
6
  "names": ["ProductCard_exports", "__export", "ProductCard", "ProductCard_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_badge", "import_text", "import_button", "import_picture", "import_heading", "objectPositionClassMap", "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", "Picture", "tag", "index", "Badge", "Button"]
7
7
  }
package/dist/cjs/biz-components/MediaShelf/ProductCard.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var z=Object.create;var f=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var E=(e,i)=>{for(var r in i)f(e,r,{get:i[r],enumerable:!0})},h=(e,i,r,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of I(i))!q.call(e,s)&&s!==r&&f(e,s,{get:()=>i[s],enumerable:!(d=A(i,s))||d.enumerable});return e};var H=(e,i,r)=>(r=e!=null?z(_(e)):{},h(i||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),R=e=>h(f({},"__esModule",{value:!0}),e);var K={};E(K,{ProductCard:()=>u,default:()=>j});module.exports=R(K);var a=require("react/jsx-runtime"),c=H(require("react")),n=require("../../helpers/index.js"),t=require("../../components/index.js");const O=5;function G(e,i,r,d){if(e===void 0)return!0;switch(e){case"always":return!0;case"never":return!1;case"below-quantity":return i===void 0?!0:r<=i;case"below-percentage":return i===void 0?!0:r/d*100<=i;default:return!0}}const u=c.forwardRef(({product:e,className:i,stockDisplayMode:r,stockThresholdValue:d,onLearnMore:s,onShopNow:k,onAddToCart:w,classNames:l,secondaryButtonText:y,secondaryButtonFun:b,primaryButtonText:v,primaryButtonFun:g,showOriginalPrice:N,copy:p,onProductImageClick:x},P)=>{const[B,F]=c.useState(!1),[L,M]=c.useState(!1),T=c.useMemo(()=>e?.availableForSale&&e?.quantityAvailable<=0?O:e?.availableForSale?(e?.quantityAvailable??0)/(e?.totalInventory??1)*100:0,[e?.availableForSale,e?.quantityAvailable,e?.totalInventory]),C=async(o,m)=>{if(!o)return;const S=m==="primary"?F:M;S(!0);try{switch(o){case"buyNow":await k?.(e);break;case"addCart":await w?.(e);break;case"learnMore":await s?.(e);break;default:break}}finally{S(!1)}},D=e.availableForSale&&e.quantityAvailable<=0;return(0,a.jsxs)(t.Card,{ref:P,className:(0,n.cn)("flex h-full min-w-[296px] flex-col overflow-hidden",e.custom_link?"cursor-pointer":"",i,l?.productCard),children:[(0,a.jsxs)("div",{className:(0,n.cn)("media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden",l?.productCardImageWrapper),children:[(0,a.jsx)("div",{className:(0,n.cn)("media-shelf-product-card-image-bg absolute inset-0 ",l?.productCardImageBg),children:(0,a.jsx)("a",{onClick:()=>x?.(e),...!x&&{href:e.custom_link||e.listingLink},className:"cursor-pointer",children:(0,a.jsx)(t.Picture,{source:e.custom_image||e.image,alt:e.name,className:(0,n.cn)("h-full",l?.productCardImage),imgClassName:"h-full object-contain"})})}),(0,a.jsx)("div",{className:"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]",children:e.tags?.map((o,m)=>o.label?(0,a.jsx)(t.Badge,{size:"sm",variant:o.variant||"outline",className:(0,n.cn)("mr-1"),promotionalType:o.promotionalType,children:o.label},m):(0,a.jsx)(c.Fragment,{children:o},m))})]}),(0,a.jsxs)(t.CardContent,{className:"desktop:p-6 flex h-[calc(100%-240px)] grow flex-col justify-between p-4",children:[(0,a.jsxs)("div",{className:"mb-6 flex-1",children:[(0,a.jsx)(t.Heading,{as:"h3",size:2,className:(0,n.cn)("text-info-primary mb-1 line-clamp-2 tracking-tight",l?.productTitle),children:e.custom_name||e.name}),(e.custom_description||e?.description)&&(0,a.jsx)(t.Text,{size:2,className:(0,n.cn)("text-info-primary line-clamp-1",l?.productDescription),html:e.custom_description||e.description})]}),G(r,d,e?.quantityAvailable??0,e?.totalInventory??0)&&(0,a.jsxs)("div",{"data-total":e?.totalInventory??0,"data-available":e?.quantityAvailable??0,className:"space-y-2",children:[(0,a.jsx)(t.Progress,{value:T,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{progressBar:"transition-all duration-300 ease-in-out"}}),(0,a.jsx)(t.Text,{size:3,className:"text-info-tertiary text-[14px]",children:D?p?.limitedStock:p?.stockDisplayText?.replace("{count}",`${e.availableForSale?e.quantityAvailable:0}`)})]}),(0,a.jsx)(a.Fragment,{children:e?.priceLabel&&e?.availableForSale&&(0,a.jsx)(t.Text,{size:4,className:(0,n.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]",l?.productPriceLabel),children:e.priceLabel})}),(0,a.jsx)("div",{className:(0,n.cn)("mb-6",l?.productPrice),children:(0,a.jsx)("div",{className:"flex items-baseline gap-2",children:e.availableForSale?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.Heading,{size:2,className:"text-info-primary",as:"h6",children:e.price}),N&&e.originalPrice&&(0,a.jsx)(t.Heading,{size:2,className:"text-info-tertiary line-through",as:"h6",children:e.originalPrice})]}):(0,a.jsx)(t.Heading,{size:2,className:"text-info-tertiary",children:p?.outOfStockLabel??"Sold Out"})})}),(0,a.jsxs)("div",{className:(0,n.cn)("lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2",l?.buttonGroup),children:[y&&(0,a.jsx)(t.Button,{variant:"secondary",size:"base",className:(0,n.cn)("tablet:w-fit w-full",l?.secondaryButton),onClick:()=>C(b,"secondary"),disabled:!e.availableForSale&&b!=="learnMore",loading:L,children:y}),v&&(0,a.jsx)(t.Button,{variant:"primary",size:"base",className:(0,n.cn)("tablet:w-fit w-full",l?.primaryButton),onClick:()=>C(g,"primary"),disabled:!e.availableForSale&&g!=="learnMore",loading:B,children:v})]})]})]})});u.displayName="MediaShelf.ProductCard";var j=u;
1
+ "use strict";"use client";var z=Object.create;var u=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var E=(a,i)=>{for(var r in i)u(a,r,{get:i[r],enumerable:!0})},h=(a,i,r,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of I(i))!q.call(a,s)&&s!==r&&u(a,s,{get:()=>i[s],enumerable:!(d=A(i,s))||d.enumerable});return a};var H=(a,i,r)=>(r=a!=null?z(_(a)):{},h(i||!a||!a.__esModule?u(r,"default",{value:a,enumerable:!0}):r,a)),R=a=>h(u({},"__esModule",{value:!0}),a);var K={};E(K,{ProductCard:()=>f,default:()=>j});module.exports=R(K);var e=require("react/jsx-runtime"),c=H(require("react")),n=require("../../helpers/index.js"),t=require("../../components/index.js");const O=5;function G(a,i,r,d){if(a===void 0)return!0;switch(a){case"always":return!0;case"never":return!1;case"below-quantity":return i===void 0?!0:r<=i;case"below-percentage":return i===void 0?!0:r/d*100<=i;default:return!0}}const f=c.forwardRef(({product:a,className:i,stockDisplayMode:r,stockThresholdValue:d,onLearnMore:s,onShopNow:k,onAddToCart:w,classNames:l,secondaryButtonText:y,secondaryButtonFun:b,primaryButtonText:v,primaryButtonFun:g,showOriginalPrice:N,copy:p,onProductImageClick:x},P)=>{const[B,F]=c.useState(!1),[L,M]=c.useState(!1),T=c.useMemo(()=>a?.availableForSale&&a?.quantityAvailable<=0?O:a?.availableForSale?(a?.quantityAvailable??0)/(a?.totalInventory??1)*100:0,[a?.availableForSale,a?.quantityAvailable,a?.totalInventory]),C=async(o,m)=>{if(!o)return;const S=m==="primary"?F:M;S(!0);try{switch(o){case"buyNow":await k?.(a);break;case"addCart":await w?.(a);break;case"learnMore":await s?.(a);break;default:break}}finally{S(!1)}},D=a.availableForSale&&a.quantityAvailable<=0;return(0,e.jsxs)(t.Card,{ref:P,className:(0,n.cn)("tablet:min-w-[auto] flex h-full min-w-[296px] flex-col overflow-hidden",a.custom_link?"cursor-pointer":"",i,l?.productCard),children:[(0,e.jsxs)("div",{className:(0,n.cn)("media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden",l?.productCardImageWrapper),children:[(0,e.jsx)("div",{className:(0,n.cn)("media-shelf-product-card-image-bg absolute inset-0 ",l?.productCardImageBg),children:(0,e.jsx)("a",{onClick:()=>x?.(a),...!x&&{href:a.custom_link||a.listingLink},className:"cursor-pointer",children:(0,e.jsx)(t.Picture,{source:a.custom_image||a.image,alt:a.name,className:(0,n.cn)("h-full",l?.productCardImage),imgClassName:"h-full object-contain"})})}),(0,e.jsx)("div",{className:"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]",children:a.tags?.map((o,m)=>o.label?(0,e.jsx)(t.Badge,{size:"sm",variant:o.variant||"outline",className:(0,n.cn)("mr-1"),promotionalType:o.promotionalType,children:o.label},m):(0,e.jsx)(c.Fragment,{children:o},m))})]}),(0,e.jsxs)(t.CardContent,{className:"desktop:p-6 bg-container-primary flex h-[calc(100%-240px)] grow flex-col justify-between p-4",children:[(0,e.jsxs)("div",{className:"mb-6 flex-1",children:[(0,e.jsx)(t.Heading,{as:"h3",size:2,className:(0,n.cn)("text-info-primary mb-1 line-clamp-2 tracking-tight",l?.productTitle),children:a.custom_name||a.name}),(a.custom_description||a?.description)&&(0,e.jsx)(t.Text,{size:2,className:(0,n.cn)("text-info-primary line-clamp-1",l?.productDescription),html:a.custom_description||a.description})]}),G(r,d,a?.quantityAvailable??0,a?.totalInventory??0)&&(0,e.jsxs)("div",{"data-total":a?.totalInventory??0,"data-available":a?.quantityAvailable??0,className:"space-y-2",children:[(0,e.jsx)(t.Progress,{value:T,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{progressBar:"transition-all duration-300 ease-in-out"}}),(0,e.jsx)(t.Text,{size:3,className:"text-info-tertiary text-[14px]",children:D?p?.limitedStock:p?.stockDisplayText?.replace("{count}",`${a.availableForSale?a.quantityAvailable:0}`)})]}),(0,e.jsx)(e.Fragment,{children:a?.priceLabel&&a?.availableForSale&&(0,e.jsx)(t.Text,{size:4,className:(0,n.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]",l?.productPriceLabel),children:a.priceLabel})}),(0,e.jsx)("div",{className:(0,n.cn)("mb-6",l?.productPrice),children:(0,e.jsx)("div",{className:"flex items-baseline gap-2",children:a.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Heading,{size:2,className:"text-info-primary",as:"h6",children:a.price}),N&&a.originalPrice&&(0,e.jsx)(t.Heading,{size:2,className:"text-info-tertiary line-through",as:"h6",children:a.originalPrice})]}):(0,e.jsx)(t.Heading,{size:2,className:"text-info-tertiary",children:p?.outOfStockLabel??"Sold Out"})})}),(0,e.jsxs)("div",{className:(0,n.cn)("lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2",l?.buttonGroup),children:[y&&(0,e.jsx)(t.Button,{variant:"secondary",size:"base",className:(0,n.cn)("tablet:w-fit w-full",l?.secondaryButton),onClick:()=>C(b,"secondary"),disabled:!a.availableForSale&&b!=="learnMore",loading:L,children:y}),v&&(0,e.jsx)(t.Button,{variant:"primary",size:"base",className:(0,n.cn)("tablet:w-fit w-full",l?.primaryButton),onClick:()=>C(g,"primary"),disabled:!a.availableForSale&&g!=="learnMore",loading:B,children:v})]})]})]})});f.displayName="MediaShelf.ProductCard";var j=f;
2
2
  //# sourceMappingURL=ProductCard.js.map
package/dist/cjs/biz-components/MediaShelf/ProductCard.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaShelf/ProductCard.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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 'tablet:min-w-[auto] 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 bg-container-primary 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"],
5
+ "mappings": "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",
6
6
  "names": ["ProductCard_exports", "__export", "ProductCard", "ProductCard_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "OVERSELLING_STOCK_PERCENTAGE", "shouldShowStock", "stockDisplayMode", "stockThresholdValue", "quantityAvailable", "totalInventory", "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"]
7
7
  }
package/dist/cjs/biz-components/SecondaryBanner/index.d.ts CHANGED
@@ -29,6 +29,8 @@ export interface SecondaryBannerData {
29
29
  pcImage?: MediaType;
30
30
  padImage?: MediaType;
31
31
  mobileImage?: MediaType;
32
+ /** 视频是否循环播放 */
33
+ isVideoLoop?: boolean;
32
34
  /** 结束时间（ISO 字符串） */
33
35
  endDate?: string;
34
36
  /** 结束时间时区（如: America/Los_Angeles） */
package/dist/cjs/biz-components/SecondaryBanner/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var w=Object.create;var d=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var F=(a,e)=>{for(var t in e)d(a,t,{get:e[t],enumerable:!0})},B=(a,e,t,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of H(e))!$.call(a,i)&&i!==t&&d(a,i,{get:()=>e[i],enumerable:!(p=A(e,i))||p.enumerable});return a};var v=(a,e,t)=>(t=a!=null?w(R(a)):{},B(e||!a||!a.__esModule?d(t,"default",{value:a,enumerable:!0}):t,a)),L=a=>B(d({},"__esModule",{value:!0}),a);var G={};F(G,{default:()=>E});module.exports=L(G);var n=require("react/jsx-runtime"),I=v(require("react")),h=require("class-variance-authority"),r=require("../../helpers/index.js"),s=require("../../components/index.js"),z=v(require("../Media/index.js"));const _=(0,h.cva)("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),T=I.forwardRef(({className:a,classNames:e={},data:t,...p},i)=>{const{pcImage:N,padImage:M,mobileImage:S,endDate:y,endDate_tz:C,dateFormat:D,size:m="base",iconArray:u,theme:P="light",primaryButton:o,secondaryButton:l}=t,g=I.useId(),c=t.title?`${g}-title`:void 0,x=t.subtitle?`${g}-subtitle`:void 0,f=t.superTitle?`${g}-super-title`:void 0,j=[f,x].filter(Boolean).join(" ")||void 0;return(0,n.jsxs)("section",{ref:i,role:"banner","aria-labelledby":c,"aria-describedby":j,className:(0,r.cn)({"aiui-dark":P==="dark"},_({size:m}),a,e?.root),...p,children:[(0,n.jsx)(z.default,{pcImage:N,padImage:M,mobileImage:S,className:(0,r.cn)("absolute inset-0 size-full object-cover",{"h-fit":m==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoPlay:!0}),(0,n.jsxs)("div",{className:(0,r.cn)("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",e?.content),children:[(0,n.jsxs)("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[t.superTitle&&(0,n.jsx)(s.Text,{as:"p",size:2,id:f,className:(0,r.cn)("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",e?.superTitle),html:t.superTitle}),t.title&&(0,n.jsx)(s.Heading,{as:"h1",size:["xlg","lg"].includes(m)?5:4,id:c,className:(0,r.cn)("banner-title ",e?.title),html:t.title}),t.subtitle&&(0,n.jsx)(s.Text,{as:"p",size:3,id:x,className:(0,r.cn)("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",e?.subtitle),html:t.subtitle})]}),y&&(0,n.jsx)("div",{className:"banner-countdown",children:(0,n.jsx)(s.Countdown,{endDate:y,endDate_tz:C,dateFormat:D,variant:"spacious",className:"mt-3"})}),(0,n.jsxs)("div",{className:(0,r.cn)("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",e?.buttonGroup),children:[l?.text&&(0,n.jsx)(s.Button,{variant:"secondary",onClick:l.onClick,className:(0,r.cn)("",e?.secondaryButton),"aria-describedby":c,...l.link?{as:"a",href:l.link}:{},children:l.text}),o?.text&&(0,n.jsx)(s.Button,{onClick:o.onClick,className:(0,r.cn)("",e?.primaryButton),"aria-describedby":c,...o.link?{as:"a",href:o.link}:{},children:o.text})]}),Array.isArray(u)&&u.length>0&&(0,n.jsx)("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:u.map((b,k)=>b.pcImage?(0,n.jsx)(s.Picture,{source:b.pcImage.url,alt:b.pcImage.alt||`icon ${k+1}`,role:"img",className:"h-auto max-w-none"},k):null)})]})]})});T.displayName="SecondaryBanner";var E=T;
1
+ "use strict";"use client";var A=Object.create;var d=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var $=(a,e)=>{for(var t in e)d(a,t,{get:e[t],enumerable:!0})},B=(a,e,t,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of H(e))!V.call(a,i)&&i!==t&&d(a,i,{get:()=>e[i],enumerable:!(p=L(e,i))||p.enumerable});return a};var v=(a,e,t)=>(t=a!=null?A(R(a)):{},B(e||!a||!a.__esModule?d(t,"default",{value:a,enumerable:!0}):t,a)),F=a=>B(d({},"__esModule",{value:!0}),a);var G={};$(G,{default:()=>E});module.exports=F(G);var n=require("react/jsx-runtime"),I=v(require("react")),h=require("class-variance-authority"),s=require("../../helpers/index.js"),o=require("../../components/index.js"),z=v(require("../Media/index.js"));const _=(0,h.cva)("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),T=I.forwardRef(({className:a,classNames:e={},data:t,...p},i)=>{const{pcImage:N,padImage:M,mobileImage:S,isVideoLoop:C=!1,endDate:y,endDate_tz:D,dateFormat:P,size:m="base",iconArray:u,theme:j="light",primaryButton:r,secondaryButton:l}=t,b=I.useId(),c=t.title?`${b}-title`:void 0,x=t.subtitle?`${b}-subtitle`:void 0,f=t.superTitle?`${b}-super-title`:void 0,w=[f,x].filter(Boolean).join(" ")||void 0;return(0,n.jsxs)("section",{ref:i,role:"banner","aria-labelledby":c,"aria-describedby":w,className:(0,s.cn)({"aiui-dark":j==="dark"},_({size:m}),a,e?.root),...p,children:[(0,n.jsx)(z.default,{pcImage:N,padImage:M,mobileImage:S,className:(0,s.cn)("absolute inset-0 size-full object-cover",{"h-fit":m==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:C,playsInline:!0,autoPlay:!0}),(0,n.jsxs)("div",{className:(0,s.cn)("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",e?.content),children:[(0,n.jsxs)("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[t.superTitle&&(0,n.jsx)(o.Text,{as:"p",size:2,id:f,className:(0,s.cn)("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",e?.superTitle),html:t.superTitle}),t.title&&(0,n.jsx)(o.Heading,{as:"h1",size:["xlg","lg"].includes(m)?5:4,id:c,className:(0,s.cn)("banner-title ",e?.title),html:t.title}),t.subtitle&&(0,n.jsx)(o.Text,{as:"p",size:3,id:x,className:(0,s.cn)("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",e?.subtitle),html:t.subtitle})]}),y&&(0,n.jsx)("div",{className:"banner-countdown",children:(0,n.jsx)(o.Countdown,{endDate:y,endDate_tz:D,dateFormat:P,variant:"spacious",className:"mt-3"})}),(0,n.jsxs)("div",{className:(0,s.cn)("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",e?.buttonGroup),children:[l?.text&&(0,n.jsx)(o.Button,{variant:"secondary",onClick:l.onClick,className:(0,s.cn)("",e?.secondaryButton),"aria-describedby":c,...l.link?{as:"a",href:l.link}:{},children:l.text}),r?.text&&(0,n.jsx)(o.Button,{onClick:r.onClick,className:(0,s.cn)("",e?.primaryButton),"aria-describedby":c,...r.link?{as:"a",href:r.link}:{},children:r.text})]}),Array.isArray(u)&&u.length>0&&(0,n.jsx)("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:u.map((g,k)=>g.pcImage?(0,n.jsx)(o.Picture,{source:g.pcImage.url,alt:g.pcImage.alt||`icon ${k+1}`,role:"img",className:"h-auto max-w-none"},k):null)})]})]})});T.displayName="SecondaryBanner";var E=T;
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/SecondaryBanner/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n } = data\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = data.title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as=\"h1\"\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"mt-3\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={secondaryButton.onClick}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link ? { as: 'a', href: secondaryButton.link } : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={primaryButton.onClick}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link ? { as: 'a', href: primaryButton.link } : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"h-auto max-w-none\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
5
- "mappings": "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",
6
- "names": ["SecondaryBanner_exports", "__export", "SecondaryBanner_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_helpers", "import_components", "import_Media", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "props", "ref", "pcImage", "padImage", "mobileImage", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "Media", "icon", "index"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = false,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n } = data\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = data.title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as=\"h1\"\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"mt-3\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={secondaryButton.onClick}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link ? { as: 'a', href: secondaryButton.link } : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={primaryButton.onClick}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link ? { as: 'a', href: primaryButton.link } : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"h-auto max-w-none\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
5
+ "mappings": "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",
6
+ "names": ["SecondaryBanner_exports", "__export", "SecondaryBanner_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_helpers", "import_components", "import_Media", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "props", "ref", "pcImage", "padImage", "mobileImage", "isVideoLoop", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "Media", "icon", "index"]
7
7
  }
package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js CHANGED
@@ -1,2 +1,2 @@
1
- "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};
1
+ "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};
2
2
  //# sourceMappingURL=ProductCard.js.map
package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ImageOverlayShelf/ProductCard.tsx"],
4
- "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"],
5
- "mappings": "aA+GY,OAoEI,YAAAA,EApEJ,OAAAC,EAoEI,QAAAC,MApEJ,oBA7GZ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,4BAClB,OAAS,QAAAC,MAAY,2BACrB,OAAOC,MAAY,6BACnB,OAAOC,MAAa,8BACpB,OAAS,WAAAC,MAAe,8BAMxB,MAAMC,EAA8D,CAClE,OAAQ,gBACR,IAAK,aACL,OAAQ,gBACR,KAAM,cACN,MAAO,eACP,WAAY,kBACZ,YAAa,mBACb,cAAe,qBACf,eAAgB,qBAClB,EAMMC,EAAcR,EAAM,WACxB,CACE,CACE,QAAAS,EACA,UAAAC,EACA,SAAAC,EAAW,GACX,kBAAAC,EAAoB,GACpB,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,KAAAC,CACF,EACAC,IACG,CACH,KAAM,CAACC,EAAgBC,CAAiB,EAAIzB,EAAM,SAAS,EAAK,EAC1D,CAAC0B,EAAkBC,CAAmB,EAAI3B,EAAM,SAAS,EAAK,EAE9D4B,EAAY,CAACnB,EAAQ,iBAGrBoB,EAAoB,MAAOC,EAAgCC,IAAyC,CACxG,GAAI,CAACD,EAAW,OAEhB,MAAME,EAAaD,IAAe,UAAYN,EAAoBE,EAClEK,EAAW,EAAI,EAEf,GAAI,CACF,OAAQF,EAAW,CACjB,IAAK,SACH,MAAMhB,IAAYL,CAAO,EACzB,MACF,IAAK,UACH,MAAMM,IAAcN,CAAO,EAC3B,MACF,IAAK,YACH,MAAMI,IAAcJ,CAAO,EAC3B,MACF,QACE,KACJ,CACF,QAAE,CACAuB,EAAW,EAAK,CAClB,CACF,EAEMC,EAAexB,EAAQ,aAAeA,EAAQ,KAC9CyB,EAAqBzB,EAAQ,oBAAsBA,EAAQ,YAC3D0B,EAAQ1B,EAAQ,cAAgB,OAEtC,OACEX,EAAC,OACC,IAAKyB,EACL,UAAWtB,EACT,qFACA,mDACA,8BACA,CACE,YAAakC,IAAU,MACzB,EACAzB,EACAO,GAAY,WACd,EAEA,SAAAlB,EAAC,OAAI,UAAU,kEAEb,UAAAD,EAAC,KACC,QAAS,IAAMkB,IAAsBP,CAAO,EAC3C,GAAI,CAACO,GACJP,EAAQ,aAAe,CACrB,KAAMA,EAAQ,WAChB,EACF,IAAI,aACJ,UAAWR,EAAG,mBAAoBgB,GAAY,YAAY,EAE1D,SAAAnB,EAACO,EAAA,CACC,IAAKI,EAAQ,KACb,OAAQA,EAAQ,cAAgBA,EAAQ,MACxC,UAAWR,EACT,+FACF,EACA,aAAcA,EAAG,eAAgBM,EAAuBE,EAAQ,qBAAuB,QAAQ,CAAC,EAClG,EACF,EAEAV,EAAC,OACC,UAAWE,EACT,0IACAgB,GAAY,cACd,EAGC,UAAAN,GAAYF,EAAQ,MAAM,OACzBX,EAAC,OAAI,UAAWG,EAAG,wDAAyDgB,GAAY,aAAa,EAClG,SAAAR,EAAQ,KAAK,IAAI,CAAC2B,EAAUC,IAC1BD,EAAY,MACXtC,EAACI,EAAA,CAEC,KAAK,KACL,QAAUkC,EAAI,SAAmB,UACjC,gBAAiBA,EAAI,gBAEpB,SAAAA,EAAI,OALAC,CAMP,EAEArC,EAAM,eAAeoC,CAAG,GAAKtC,EAACE,EAAM,SAAN,CAA2B,gBAAPqC,CAAU,CAEhE,EACF,EACE,KAGHJ,EACCnC,EAACQ,EAAA,CACC,GAAG,KACH,MAAO2B,EACP,KAAMA,EACN,UAAWhC,EACT,8HACAgB,GAAY,YACd,EACF,EACE,KAGHiB,EACCpC,EAACK,EAAA,CACC,KAAM,EACN,KAAM+B,EACN,UAAWjC,EACT,wFACAgB,GAAY,kBACd,EACF,EACE,KAGJnB,EAAC,OAAI,UAAWG,EAAG,8BAA+BgB,GAAY,cAAc,EACzE,SAAAW,EACC9B,EAAC,OAAI,UAAWG,EAAG,sDAAuDgB,GAAY,YAAY,EAC/F,SAAAK,GAAM,iBAAmB,WAC5B,EAEAvB,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAWG,EAAG,sDAAuDgB,GAAY,YAAY,EAC/F,SAAAR,EAAQ,MACX,EACCG,GAAqBH,EAAQ,eAC5BX,EAAC,OACC,UAAWG,EACT,yEACAgB,GAAY,aACd,EAEC,SAAAR,EAAQ,cACX,GAEJ,EAEJ,EAGAV,EAAC,OACC,UAAWE,EAAG,+DAAgEgB,GAAY,WAAW,EAEpG,UAAAC,GACCpB,EAACM,EAAA,CACC,QAAQ,YACR,QAAS,IAAMyB,EAAkBV,EAAoB,WAAW,EAChE,SAAUS,GAAaT,IAAuB,YAC9C,QAASO,EACT,UAAWzB,EAAGgB,GAAY,eAAe,EAExC,SAAAC,EACH,EAEDE,GACCtB,EAACM,EAAA,CACC,QAAQ,UACR,QAAS,IAAMyB,EAAkBR,EAAkB,SAAS,EAC5D,SAAUO,GAAaP,IAAqB,YAC5C,QAASG,EACT,UAAWvB,EAAGgB,GAAY,aAAa,EAEtC,SAAAG,EACH,GAEJ,GACF,GACF,EACF,CAEJ,CACF,EAEAZ,EAAY,YAAc,gCAG1B,IAAO8B,EAAQ9B",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "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"]
7
7
  }
package/dist/esm/biz-components/MediaShelf/ProductCard.js CHANGED
@@ -1,2 +1,2 @@
1
- "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};
1
+ "use client";import{Fragment as k,jsx as e,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 f,Heading as c,Progress as H}from"../../components/index.js";const R=5;function O(a,l,s,m){if(a===void 0)return!0;switch(a){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:a,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:u,onProductImageClick:x},F)=>{const[L,M]=o.useState(!1),[T,D]=o.useState(!1),z=o.useMemo(()=>a?.availableForSale&&a?.quantityAvailable<=0?R:a?.availableForSale?(a?.quantityAvailable??0)/(a?.totalInventory??1)*100:0,[a?.availableForSale,a?.quantityAvailable,a?.totalInventory]),C=async(r,d)=>{if(!r)return;const S=d==="primary"?M:D;S(!0);try{switch(r){case"buyNow":await N?.(a);break;case"addCart":await P?.(a);break;case"learnMore":await w?.(a);break;default:break}}finally{S(!1)}},A=a.availableForSale&&a.quantityAvailable<=0;return n(_,{ref:F,className:t("tablet:min-w-[auto] flex h-full min-w-[296px] flex-col overflow-hidden",a.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:[e("div",{className:t("media-shelf-product-card-image-bg absolute inset-0 ",i?.productCardImageBg),children:e("a",{onClick:()=>x?.(a),...!x&&{href:a.custom_link||a.listingLink},className:"cursor-pointer",children:e(E,{source:a.custom_image||a.image,alt:a.name,className:t("h-full",i?.productCardImage),imgClassName:"h-full object-contain"})})}),e("div",{className:"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]",children:a.tags?.map((r,d)=>r.label?e(I,{size:"sm",variant:r.variant||"outline",className:t("mr-1"),promotionalType:r.promotionalType,children:r.label},d):e(o.Fragment,{children:r},d))})]}),n(q,{className:"desktop:p-6 bg-container-primary flex h-[calc(100%-240px)] grow flex-col justify-between p-4",children:[n("div",{className:"mb-6 flex-1",children:[e(c,{as:"h3",size:2,className:t("text-info-primary mb-1 line-clamp-2 tracking-tight",i?.productTitle),children:a.custom_name||a.name}),(a.custom_description||a?.description)&&e(f,{size:2,className:t("text-info-primary line-clamp-1",i?.productDescription),html:a.custom_description||a.description})]}),O(s,m,a?.quantityAvailable??0,a?.totalInventory??0)&&n("div",{"data-total":a?.totalInventory??0,"data-available":a?.quantityAvailable??0,className:"space-y-2",children:[e(H,{value:z,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{progressBar:"transition-all duration-300 ease-in-out"}}),e(f,{size:3,className:"text-info-tertiary text-[14px]",children:A?u?.limitedStock:u?.stockDisplayText?.replace("{count}",`${a.availableForSale?a.quantityAvailable:0}`)})]}),e(k,{children:a?.priceLabel&&a?.availableForSale&&e(f,{size:4,className:t("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]",i?.productPriceLabel),children:a.priceLabel})}),e("div",{className:t("mb-6",i?.productPrice),children:e("div",{className:"flex items-baseline gap-2",children:a.availableForSale?n(k,{children:[e(c,{size:2,className:"text-info-primary",as:"h6",children:a.price}),B&&a.originalPrice&&e(c,{size:2,className:"text-info-tertiary line-through",as:"h6",children:a.originalPrice})]}):e(c,{size:2,className:"text-info-tertiary",children:u?.outOfStockLabel??"Sold Out"})})}),n("div",{className:t("lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2",i?.buttonGroup),children:[y&&e(h,{variant:"secondary",size:"base",className:t("tablet:w-fit w-full",i?.secondaryButton),onClick:()=>C(b,"secondary"),disabled:!a.availableForSale&&b!=="learnMore",loading:T,children:y}),v&&e(h,{variant:"primary",size:"base",className:t("tablet:w-fit w-full",i?.primaryButton),onClick:()=>C(g,"primary"),disabled:!a.availableForSale&&g!=="learnMore",loading:L,children:v})]})]})]})});p.displayName="MediaShelf.ProductCard";var K=p;export{p as ProductCard,K as default};
2
2
  //# sourceMappingURL=ProductCard.js.map
package/dist/esm/biz-components/MediaShelf/ProductCard.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaShelf/ProductCard.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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 'tablet:min-w-[auto] 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 bg-container-primary 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"],
5
+ "mappings": "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",
6
6
  "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"]
7
7
  }
package/dist/esm/biz-components/SecondaryBanner/index.d.ts CHANGED
@@ -29,6 +29,8 @@ export interface SecondaryBannerData {
29
29
  pcImage?: MediaType;
30
30
  padImage?: MediaType;
31
31
  mobileImage?: MediaType;
32
+ /** 视频是否循环播放 */
33
+ isVideoLoop?: boolean;
32
34
  /** 结束时间（ISO 字符串） */
33
35
  endDate?: string;
34
36
  /** 结束时间时区（如: America/Los_Angeles） */
package/dist/esm/biz-components/SecondaryBanner/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as y from"react";import{cva as D}from"class-variance-authority";import{cn as a}from"../../helpers/index.js";import{Text as x,Button as f,Heading as P,Picture as j,Countdown as w}from"../../components/index.js";import A from"../Media/index.js";const H=D("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),k=y.forwardRef(({className:B,classNames:n={},data:e,...v},I)=>{const{pcImage:T,padImage:h,mobileImage:z,endDate:m,endDate_tz:N,dateFormat:M,size:l="base",iconArray:p,theme:S="light",primaryButton:s,secondaryButton:r}=e,c=y.useId(),i=e.title?`${c}-title`:void 0,u=e.subtitle?`${c}-subtitle`:void 0,g=e.superTitle?`${c}-super-title`:void 0,C=[g,u].filter(Boolean).join(" ")||void 0;return o("section",{ref:I,role:"banner","aria-labelledby":i,"aria-describedby":C,className:a({"aiui-dark":S==="dark"},H({size:l}),B,n?.root),...v,children:[t(A,{pcImage:T,padImage:h,mobileImage:z,className:a("absolute inset-0 size-full object-cover",{"h-fit":l==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoPlay:!0}),o("div",{className:a("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",n?.content),children:[o("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[e.superTitle&&t(x,{as:"p",size:2,id:g,className:a("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",n?.superTitle),html:e.superTitle}),e.title&&t(P,{as:"h1",size:["xlg","lg"].includes(l)?5:4,id:i,className:a("banner-title ",n?.title),html:e.title}),e.subtitle&&t(x,{as:"p",size:3,id:u,className:a("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",n?.subtitle),html:e.subtitle})]}),m&&t("div",{className:"banner-countdown",children:t(w,{endDate:m,endDate_tz:N,dateFormat:M,variant:"spacious",className:"mt-3"})}),o("div",{className:a("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",n?.buttonGroup),children:[r?.text&&t(f,{variant:"secondary",onClick:r.onClick,className:a("",n?.secondaryButton),"aria-describedby":i,...r.link?{as:"a",href:r.link}:{},children:r.text}),s?.text&&t(f,{onClick:s.onClick,className:a("",n?.primaryButton),"aria-describedby":i,...s.link?{as:"a",href:s.link}:{},children:s.text})]}),Array.isArray(p)&&p.length>0&&t("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:p.map((d,b)=>d.pcImage?t(j,{source:d.pcImage.url,alt:d.pcImage.alt||`icon ${b+1}`,role:"img",className:"h-auto max-w-none"},b):null)})]})]})});k.displayName="SecondaryBanner";var _=k;export{_ as default};
1
+ "use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import*as y from"react";import{cva as P}from"class-variance-authority";import{cn as a}from"../../helpers/index.js";import{Text as x,Button as f,Heading as j,Picture as w,Countdown as A}from"../../components/index.js";import L from"../Media/index.js";const H=P("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),k=y.forwardRef(({className:B,classNames:n={},data:e,...v},I)=>{const{pcImage:T,padImage:h,mobileImage:z,isVideoLoop:N=!1,endDate:m,endDate_tz:M,dateFormat:S,size:l="base",iconArray:p,theme:C="light",primaryButton:o,secondaryButton:s}=e,c=y.useId(),i=e.title?`${c}-title`:void 0,u=e.subtitle?`${c}-subtitle`:void 0,b=e.superTitle?`${c}-super-title`:void 0,D=[b,u].filter(Boolean).join(" ")||void 0;return r("section",{ref:I,role:"banner","aria-labelledby":i,"aria-describedby":D,className:a({"aiui-dark":C==="dark"},H({size:l}),B,n?.root),...v,children:[t(L,{pcImage:T,padImage:h,mobileImage:z,className:a("absolute inset-0 size-full object-cover",{"h-fit":l==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:N,playsInline:!0,autoPlay:!0}),r("div",{className:a("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",n?.content),children:[r("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[e.superTitle&&t(x,{as:"p",size:2,id:b,className:a("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",n?.superTitle),html:e.superTitle}),e.title&&t(j,{as:"h1",size:["xlg","lg"].includes(l)?5:4,id:i,className:a("banner-title ",n?.title),html:e.title}),e.subtitle&&t(x,{as:"p",size:3,id:u,className:a("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",n?.subtitle),html:e.subtitle})]}),m&&t("div",{className:"banner-countdown",children:t(A,{endDate:m,endDate_tz:M,dateFormat:S,variant:"spacious",className:"mt-3"})}),r("div",{className:a("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",n?.buttonGroup),children:[s?.text&&t(f,{variant:"secondary",onClick:s.onClick,className:a("",n?.secondaryButton),"aria-describedby":i,...s.link?{as:"a",href:s.link}:{},children:s.text}),o?.text&&t(f,{onClick:o.onClick,className:a("",n?.primaryButton),"aria-describedby":i,...o.link?{as:"a",href:o.link}:{},children:o.text})]}),Array.isArray(p)&&p.length>0&&t("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:p.map((d,g)=>d.pcImage?t(w,{source:d.pcImage.url,alt:d.pcImage.alt||`icon ${g+1}`,role:"img",className:"h-auto max-w-none"},g):null)})]})]})});k.displayName="SecondaryBanner";var _=k;export{_ as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/SecondaryBanner/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n } = data\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = data.title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={true}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as=\"h1\"\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"mt-3\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={secondaryButton.onClick}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link ? { as: 'a', href: secondaryButton.link } : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={primaryButton.onClick}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link ? { as: 'a', href: primaryButton.link } : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"h-auto max-w-none\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "React", "cva", "cn", "Text", "Button", "Heading", "Picture", "Countdown", "Media", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "props", "ref", "pcImage", "padImage", "mobileImage", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "icon", "index", "SecondaryBanner_default"]
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\nconst secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = false,\n endDate,\n endDate_tz,\n dateFormat,\n size = 'base',\n iconArray: icons,\n theme = 'light',\n primaryButton,\n secondaryButton,\n } = data\n\n // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n const bannerId = React.useId()\n const titleId = data.title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n // \u6784\u5EFAaria-describedby\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className={cn('absolute inset-0 size-full object-cover', {\n 'h-fit': size === 'xlg',\n })}\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={true}\n />\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as=\"h1\"\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"mt-3\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={secondaryButton.onClick}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link ? { as: 'a', href: secondaryButton.link } : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n onClick={primaryButton.onClick}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link ? { as: 'a', href: primaryButton.link } : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"h-auto max-w-none\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "React", "cva", "cn", "Text", "Button", "Heading", "Picture", "Countdown", "Media", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "props", "ref", "pcImage", "padImage", "mobileImage", "isVideoLoop", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "icon", "index", "SecondaryBanner_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.45",
3
+ "version": "1.1.46-alpha.1769656184318",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",