@anker-in/headless-ui 1.3.56 → 1.3.57

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SceneShelfV3/ProductCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading } from '../../components/index.js'\nimport type { BadgeProps } from '../../components/badge.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { Theme } from '../../types/props.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type SceneShelfV3SemanticName =\n  | 'root'\n  | 'title'\n  | 'description'\n  | 'tabsList'\n  | 'promotionalBar'\n  | 'productGrid'\n  | 'viewMore'\n  | 'productCard'\n  | 'productTitle'\n  | 'productDescription'\n  | 'productPriceLabel'\n  | 'productPrice'\n  | 'priceWrapper'\n  | 'originalPrice'\n  | 'buttonGroup'\n  | 'secondaryButton'\n  | 'primaryButton'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\uFF08\u76F4\u63A5\u5339\u914D mock.json \u7ED3\u6784\uFF09\n */\nexport interface ProductCardData {\n  sku?: string\n  id: string\n  /** \u4EA7\u54C1\u6807\u9898 */\n  title: string\n  /**\n   * \u4EA7\u54C1\u63CF\u8FF0\n   */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  imageUrl: string\n  /** \u4EA7\u54C1\u56FE\u7247 alt \u6587\u672C */\n  imageAlt: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$129.99\"\uFF0C\u7528\u4E8E\u663E\u793A\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags: Array<{\n    label: string\n    variant?: 'outline' | 'fill' | 'promotional'\n    promotionalType?: BadgeProps['promotionalType']\n  }>\n  /** \u4EA7\u54C1\u8BE6\u60C5\u9875\u94FE\u63A5 */\n  href: string\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut: boolean\n\n  // ===== \u53EF\u9009\u5B57\u6BB5\uFF08CMS \u53EF\u80FD\u914D\u7F6E\uFF09 =====\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n  /** \u4EF7\u683C\u6807\u7B7E\uFF08\u5982 \"Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u5E93\u5B58\u4FE1\u606F\uFF08\u5982\u679C\u540E\u7AEF\u63D0\u4F9B\uFF09 */\n  totalInventory?: number\n  quantityAvailable?: number\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n  product: ProductCardData\n  className?: string\n  showTags?: boolean\n  stockDisplayMode?: StockDisplayMode\n  stockThresholdValue?: number\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: ProductCardData) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: ProductCardData) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  showOriginalPrice?: boolean\n  copy?: CopyConfig\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u8A00\u73AF\u5883 */\n  locale?: string\n  /** \u5F53\u524D\u4E0B\u6807  */\n  index?: number\n  /** tabName */\n  tabName?: string\n}\n\n/**\n * SceneShelfV3 \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nexport const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n      theme = 'light',\n      locale = 'us',\n      index = 0,\n      tabName,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    const pageGroup = trackingData?.pageGroup\n\n    const availableForSale = !product.soldOut\n\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\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.href)\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [product, onShopNow, onAddToCart, onLearnMore]\n    )\n\n    const trackedHref = React.useMemo(\n      () => getLocalizedPath(trackUrlRef(product.href, pageGroup + '_' + 'shelf' + '_' + 'scene_shelf_v3'), locale),\n      [product.href, pageGroup, locale]\n    )\n\n    const onProductClick = React.useCallback(() => {\n      onProductImageClick?.(product)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'select_item',\n        item_list_name: 'Scene_Shelf_3_Products',\n        page_group: pageGroup,\n        items: [\n          {\n            item_id: product.sku,\n            item_name: product.title,\n            item_variant: product.id,\n            price: product.currentPrice,\n            index: index,\n          },\n        ],\n        tab_name: tabName,\n        position: index,\n      })\n    }, [onProductImageClick, product, pageGroup, index, tabName])\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white',\n          className,\n          classNames?.productCard,\n          {\n            'hover:bg-container-secondary-0 ': theme === 'dark',\n          }\n        )}\n      >\n        <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n          <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n            <a\n              onClick={onProductClick}\n              {...(!onProductImageClick && {\n                href: trackedHref,\n              })}\n              rel=\"noreferrer\"\n            >\n              <Picture\n                source={product.imageUrl}\n                alt={product.imageAlt}\n                className=\"aspect-square size-full object-contain\"\n                imgClassName=\"w-full h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E */}\n          <div className=\"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1\">\n            {showTags &&\n              product.tags?.map((tag, index) => (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={tag.variant || 'outline'}\n                  className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ))}\n          </div>\n\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n            <div className=\"mb-4\">\n              <Heading\n                as=\"h3\"\n                size={2}\n                className={cn(\n                  'text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]',\n                  classNames?.productTitle\n                )}\n                html={product.custom_name || product.title}\n              />\n              {(product?.custom_description || product?.description) && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]',\n                    classNames?.productDescription\n                  )}\n                  html={product.custom_description || product.description}\n                />\n              )}\n            </div>\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div>\n              <div className={cn('mb-2', classNames?.productPrice)}>\n                <div className={cn('flex items-baseline gap-2', classNames?.priceWrapper)}>\n                  {availableForSale ? (\n                    <>\n                      <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                        {product.currentPrice}\n                      </Heading>\n                      {showOriginalPrice && product.originalPrice && (\n                        <Heading\n                          size={2}\n                          className={cn('text-info-tertiary line-through', classNames?.originalPrice)}\n                          as=\"h6\"\n                        >\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              {product?.priceLabel && availableForSale && (\n                <Text\n                  size={4}\n                  className={cn(\n                    'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n                    classNames?.productPriceLabel\n                  )}\n                >\n                  {product.priceLabel}\n                </Text>\n              )}\n\n              {/* \u6309\u94AE\u533A\u57DF */}\n              <div\n                className={cn(\n                  'lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2',\n                  classNames?.buttonGroup\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.secondaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(secondaryButtonFun, 'secondary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:w-fit laptop:grow-0 w-full flex-1 whitespace-nowrap',\n                      classNames?.primaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(primaryButtonFun, 'primary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'SceneShelfV3.ProductCard'\n\nexport default ProductCard\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading } from '../../components/index.js'\nimport type { BadgeProps } from '../../components/badge.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\nimport type { Theme } from '../../types/props.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type SceneShelfV3SemanticName =\n  | 'root'\n  | 'title'\n  | 'description'\n  | 'tabsList'\n  | 'promotionalBar'\n  | 'productGrid'\n  | 'viewMore'\n  | 'productCard'\n  | 'productTitle'\n  | 'productDescription'\n  | 'productPriceLabel'\n  | 'productPrice'\n  | 'priceWrapper'\n  | 'originalPrice'\n  | 'buttonGroup'\n  | 'secondaryButton'\n  | 'primaryButton'\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\uFF08\u76F4\u63A5\u5339\u914D mock.json \u7ED3\u6784\uFF09\n */\nexport interface ProductCardData {\n  sku?: string\n  id: string\n  /** \u4EA7\u54C1\u6807\u9898 */\n  title: string\n  /**\n   * \u4EA7\u54C1\u63CF\u8FF0\n   */\n  description?: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  imageUrl: string\n  /** \u4EA7\u54C1\u56FE\u7247 alt \u6587\u672C */\n  imageAlt: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice: string\n  /** \u539F\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$129.99\"\uFF0C\u7528\u4E8E\u663E\u793A\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  originalPrice?: string\n  /** \u6807\u7B7E\u5217\u8868 */\n  tags: Array<{\n    label: string\n    variant?: 'outline' | 'fill' | 'promotional'\n    promotionalType?: BadgeProps['promotionalType']\n  }>\n  /** \u4EA7\u54C1\u8BE6\u60C5\u9875\u94FE\u63A5 */\n  href: string\n  /** \u662F\u5426\u552E\u7F44 */\n  soldOut: boolean\n\n  // ===== \u53EF\u9009\u5B57\u6BB5\uFF08CMS \u53EF\u80FD\u914D\u7F6E\uFF09 =====\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n  custom_name?: string\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string\n  /** \u4EF7\u683C\u6807\u7B7E\uFF08\u5982 \"Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u5E93\u5B58\u4FE1\u606F\uFF08\u5982\u679C\u540E\u7AEF\u63D0\u4F9B\uFF09 */\n  totalInventory?: number\n  quantityAvailable?: number\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6 Props\n */\nexport interface ProductCardProps {\n  product: ProductCardData\n  className?: string\n  showTags?: boolean\n  stockDisplayMode?: StockDisplayMode\n  stockThresholdValue?: number\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onLearnMore?: (link: string) => void | Promise<void>\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onShopNow?: (product: ProductCardData) => void | Promise<void>\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n  onAddToCart?: (product: ProductCardData) => void | Promise<void>\n  classNames?: Partial<Record<SceneShelfV3SemanticName, string>>\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  showOriginalPrice?: boolean\n  copy?: CopyConfig\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u8A00\u73AF\u5883 */\n  locale?: string\n  /** \u5F53\u524D\u4E0B\u6807  */\n  index?: number\n  /** tabName */\n  tabName?: string\n}\n\n/**\n * SceneShelfV3 \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nexport const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      showOriginalPrice,\n      copy,\n      onProductImageClick,\n      theme = 'light',\n      locale = 'us',\n      index = 0,\n      tabName,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n    const { trackingData } = useAiuiContext()\n\n    const pageGroup = trackingData?.pageGroup\n\n    const availableForSale = !product.soldOut\n\n    const handleButtonClick = React.useCallback(\n      async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n        if (!buttonFun) return\n        const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n        setLoading(true)\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.href)\n              break\n          }\n        } finally {\n          setLoading(false)\n        }\n      },\n      [product, onShopNow, onAddToCart, onLearnMore]\n    )\n\n    const trackedHref = React.useMemo(\n      () => getLocalizedPath(trackUrlRef(product.href, pageGroup + '_' + 'shelf' + '_' + 'scene_shelf_v3'), locale),\n      [product.href, pageGroup, locale]\n    )\n\n    const onProductClick = React.useCallback(() => {\n      onProductImageClick?.(product)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'select_item',\n        item_list_name: 'Scene_Shelf_3_Products',\n        page_group: pageGroup,\n        items: [\n          {\n            item_id: product.sku,\n            item_name: product.title,\n            item_variant: product.id,\n            price: product.currentPrice,\n            index: index,\n          },\n        ],\n        tab_name: tabName,\n        position: index,\n      })\n    }, [onProductImageClick, product, pageGroup, index, tabName])\n\n    return (\n      <Card\n        ref={ref}\n        className={cn(\n          'bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white',\n          className,\n          classNames?.productCard,\n          {\n            'hover:bg-container-secondary-0 ': theme === 'dark',\n          }\n        )}\n      >\n        <CardContent className=\"desktop:p-6 relative flex flex-1 flex-col justify-between p-4\">\n          <div className=\"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden\">\n            <a\n              onClick={onProductClick}\n              {...(!onProductImageClick && {\n                href: trackedHref,\n              })}\n              rel=\"noreferrer\"\n            >\n              <Picture\n                source={product.imageUrl}\n                alt={product.imageAlt}\n                className=\"aspect-square size-full object-contain\"\n                imgClassName=\"w-full h-full object-contain\"\n              />\n            </a>\n          </div>\n\n          {/* \u6807\u7B7E */}\n          <div className=\"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1\">\n            {showTags &&\n              product.tags?.map((tag, index) => (\n                <Badge\n                  key={index}\n                  size=\"sm\"\n                  variant={tag.variant || 'outline'}\n                  className={cn(tag.variant === 'promotional' ? 'ml-2' : '')}\n                  promotionalType={tag.promotionalType}\n                >\n                  {tag.label}\n                </Badge>\n              ))}\n          </div>\n\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div className=\"flex h-full flex-1 grow flex-col justify-between\">\n            <div className=\"mb-4\">\n              <Heading\n                as=\"h3\"\n                size={2}\n                className={cn(\n                  'text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]',\n                  classNames?.productTitle\n                )}\n                html={product.custom_name || product.title}\n              />\n              {(product?.custom_description || product?.description) && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]',\n                    classNames?.productDescription\n                  )}\n                  html={product.custom_description || product.description}\n                />\n              )}\n            </div>\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div>\n              <div className={cn('mb-2', classNames?.productPrice)}>\n                <div className={cn('flex items-baseline gap-2', classNames?.priceWrapper)}>\n                  {availableForSale ? (\n                    <>\n                      <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                        {product.currentPrice}\n                      </Heading>\n                      {showOriginalPrice && product.originalPrice && (\n                        <Heading\n                          size={2}\n                          className={cn('text-info-tertiary line-through', classNames?.originalPrice)}\n                          as=\"h6\"\n                        >\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              {product?.priceLabel && availableForSale && (\n                <Text\n                  size={4}\n                  className={cn(\n                    'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]',\n                    classNames?.productPriceLabel\n                  )}\n                >\n                  {product.priceLabel}\n                </Text>\n              )}\n\n              {/* \u6309\u94AE\u533A\u57DF */}\n              <div\n                className={cn(\n                  'lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2',\n                  classNames?.buttonGroup\n                )}\n              >\n                {secondaryButtonText && (\n                  <Button\n                    variant=\"secondary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:flex-1 laptop:min-w-0 laptop:whitespace-normal laptop:text-center w-full min-w-0 whitespace-normal text-center',\n                      classNames?.secondaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(secondaryButtonFun, 'secondary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: secondaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n                    loading={secondaryLoading}\n                  >\n                    {secondaryButtonText}\n                  </Button>\n                )}\n                {primaryButtonText && (\n                  <Button\n                    variant=\"primary\"\n                    size=\"base\"\n                    className={cn(\n                      'laptop:flex-1 laptop:min-w-0 laptop:whitespace-normal laptop:text-center w-full min-w-0 whitespace-normal text-center',\n                      classNames?.primaryButton\n                    )}\n                    onClick={() => {\n                      handleButtonClick(primaryButtonFun, 'primary')\n                      gaTrack({\n                        event: 'ga4Event',\n                        event_name: 'component_click',\n                        event_parameters: {\n                          page_group: pageGroup || 'Home Page',\n                          component_type: 'copy',\n                          component_name: 'scene_shelf_product',\n                          component_title: product.custom_name || product.title,\n                          component_description: product.custom_description || '',\n                          button_name: primaryButtonText,\n                          SKU: product.sku || '',\n                          position: index,\n                        },\n                      })\n                    }}\n                    disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n                    loading={primaryLoading}\n                  >\n                    {primaryButtonText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    )\n  }\n)\n\nProductCard.displayName = 'SceneShelfV3.ProductCard'\n\nexport default ProductCard\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "cn", "getLocalizedPath", "Button", "Badge", "Card", "CardContent", "Picture", "Text", "Heading", "trackUrlRef", "gaTrack", "useAiuiContext", "ProductCard", "product", "className", "showTags", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "copy", "onProductImageClick", "theme", "locale", "index", "tabName", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "trackingData", "pageGroup", "availableForSale", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "trackedHref", "onProductClick", "tag", "ProductCard_default"]
 }

package/package.json

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

package/style.css

@@ -2283,9 +2283,6 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
 .items-start {
   align-items: flex-start;
 }
@@ -2493,6 +2490,9 @@ video {
 .text-ellipsis {
   text-overflow: ellipsis;
 }
+.whitespace-normal {
+  white-space: normal;
+}
 .\!whitespace-nowrap {
   white-space: nowrap !important;
 }
@@ -5437,6 +5437,9 @@ video {
   .tablet\:w-full {
     width: 100%;
   }
+  .tablet\:min-w-0 {
+    min-width: 0px;
+  }
   .tablet\:min-w-\[600px\] {
     min-width: 600px;
   }
@@ -5593,6 +5596,9 @@ video {
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
+  .tablet\:whitespace-normal {
+    white-space: normal;
+  }
   .tablet\:\!rounded-box {
     border-radius: var(--box-radius) !important;
   }
@@ -5719,6 +5725,9 @@ video {
   .tablet\:text-left {
     text-align: left;
   }
+  .tablet\:text-center {
+    text-align: center;
+  }
   .tablet\:text-end {
     text-align: end;
   }
@@ -6284,6 +6293,9 @@ video {
   .laptop\:w-full {
     width: 100%;
   }
+  .laptop\:min-w-0 {
+    min-width: 0px;
+  }
   .laptop\:max-w-\[1024px\] {
     max-width: 1024px;
   }
@@ -6353,9 +6365,6 @@ video {
   .laptop\:shrink-0 {
     flex-shrink: 0;
   }
-  .laptop\:grow-0 {
-    flex-grow: 0;
-  }
   .laptop\:basis-\[36\%\] {
     flex-basis: 36%;
   }
@@ -6499,6 +6508,9 @@ video {
   .laptop\:\!overflow-visible {
     overflow: visible !important;
   }
+  .laptop\:whitespace-normal {
+    white-space: normal;
+  }
   .laptop\:rounded-2xl {
     border-radius: 1rem;
   }