npm - @anker-in/headless-ui - Versions diffs - 1.1.55 → 1.1.57 - Mend

@anker-in/headless-ui 1.1.55 → 1.1.57

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 (213) hide show

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

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

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

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

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

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

package/dist/esm/biz-components/MiniCart/CircleProgress.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MiniCart/CircleProgress.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { Img } from '../../types/props.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface CircleProgressProps {\n  /** \u603B\u9636\u6BB5\u6570 (1-4) */\n  totalSteps?: 1 | 2 | 3 | 4\n  /** \u5F53\u524D\u5B8C\u6210\u7684\u9636\u6BB5 (0 \u5230 totalSteps) */\n  currentStep?: number\n  /** \u4E2D\u95F4\u663E\u793A\u7684\u56FE\u7247 */\n  image?: Img\n  /** \u5E95\u90E8\u663E\u793A\u7684\u6587\u6848 */\n  label?: string\n  /** \u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u54C1\u724C\u8272 */\n  progressColor?: string\n  /** \u5E95\u90E8\u6587\u6848\u80CC\u666F\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u54C1\u724C\u8425\u9500\u8272 */\n  labelColor?: string\n  /** \u672A\u5B8C\u6210\u9636\u6BB5\u7684\u989C\u8272 */\n  trackColor?: string\n  /** \u80CC\u666F\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u5BB9\u5668\u80CC\u666F\u8272 */\n  backgroundColor?: string\n  /** \u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4 64 */\n  size?: number\n  /** laptop \u4EE5\u4E0A\u7EC4\u4EF6\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4 80 */\n  laptopSize?: number\n  /** \u6BB5\u4E4B\u95F4\u7684\u95F4\u9699\uFF08\u50CF\u7D20\uFF09\uFF0C\u9ED8\u8BA4 3 */\n  gap?: number\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\n/**\n * \u5206\u6BB5\u5F0F\u5706\u5F62\u8FDB\u5EA6\u6761\u7EC4\u4EF6\n * \u7528\u4E8E MiniCart \u5DE6\u4FA7\u663E\u793A\u9636\u6BB5\u6027\u8FDB\u5EA6\uFF0C\u652F\u6301 1-4 \u4E2A\u9636\u6BB5\u914D\u7F6E\n * \u6BCF\u4E2A\u9636\u6BB5\u662F\u72EC\u7ACB\u7684\u5F27\u6BB5\uFF0C\u4E2D\u95F4\u6709\u95F4\u9699\n * \u79FB\u52A8\u7AEF\u9ED8\u8BA4 64px\uFF0Claptop \u4EE5\u4E0A\u9ED8\u8BA4 80px\n */\nconst CircleProgress = ({\n  totalSteps = 4,\n  currentStep = 0,\n  image,\n  label,\n  progressColor = 'var(--brand-color-0)',\n  labelColor = 'var(--marketing-color-1)',\n  trackColor = '#DADCE0',\n  backgroundColor = '#EAEAEC',\n  size = 64,\n  laptopSize = 96,\n  gap = 3,\n  className,\n}: CircleProgressProps) => {\n  // \u4F7F\u7528\u8F83\u5927\u5C3A\u5BF8\u8BA1\u7B97 SVG \u53C2\u6570\uFF0C\u786E\u4FDD\u5728\u6240\u6709\u5C3A\u5BF8\u4E0B\u90FD\u6E05\u6670\n  const maxSize = Math.max(size, laptopSize) // \u5982\u679C\u6709\u6807\u7B7E\uFF0C\u9884\u7559\u5E95\u90E8\u7A7A\u95F4\n  const strokeWidth = 6\n  const radius = (maxSize - strokeWidth) / 2\n  const center = maxSize / 2\n\n  // \u751F\u6210\u6240\u6709\u5206\u6BB5\n  const segments = React.useMemo(() => {\n    // \u89C6\u89C9\u95F4\u9699\u9700\u8981\u52A0\u4E0A\u4E24\u7AEF\u5706\u89D2\u5E3D\u5B50\u7684\u5BBD\u5EA6\uFF08strokeLinecap=\"round\" \u4F1A\u5EF6\u4F38 strokeWidth/2\uFF09\n    const actualGap = gap + strokeWidth\n    // \u5C06\u50CF\u7D20\u95F4\u9699\u8F6C\u6362\u4E3A\u89D2\u5EA6\uFF08\u5F27\u5EA6 = \u5F27\u957F / \u534A\u5F84\uFF0C\u518D\u8F6C\u4E3A\u5EA6\uFF09\n    const gapAngle = (actualGap / radius) * (180 / Math.PI)\n    const totalGapAngle = gapAngle * totalSteps\n    const availableAngle = 360 - totalGapAngle\n    const segmentAngle = availableAngle / totalSteps\n\n    // \u5C06\u89D2\u5EA6\u8F6C\u6362\u4E3A\u5F27\u5EA6\n    const toRadians = (degrees: number) => (degrees * Math.PI) / 180\n\n    // \u8BA1\u7B97\u5F27\u6BB5\u7684\u8D77\u70B9\u548C\u7EC8\u70B9\u5750\u6807\n    const getArcPath = (startAngle: number, endAngle: number) => {\n      // \u4ECE\u9876\u90E8\u5F00\u59CB\uFF08-90\u5EA6\uFF09\uFF0C\u987A\u65F6\u9488\u65B9\u5411\n      const adjustedStart = startAngle - 90\n      const adjustedEnd = endAngle - 90\n\n      const startX = center + radius * Math.cos(toRadians(adjustedStart))\n      const startY = center + radius * Math.sin(toRadians(adjustedStart))\n      const endX = center + radius * Math.cos(toRadians(adjustedEnd))\n      const endY = center + radius * Math.sin(toRadians(adjustedEnd))\n\n      // \u5224\u65AD\u662F\u5426\u4E3A\u5927\u5F27\uFF08\u8D85\u8FC7180\u5EA6\uFF09\n      const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0\n\n      return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`\n    }\n\n    const result = []\n    // totalSteps = 2 \u65F6\uFF0C\u8D77\u59CB\u4F4D\u7F6E\u9006\u65F6\u9488\u504F\u79FB 45 \u5EA6\uFF0C\u8BA9\u65AD\u5F00\u4F4D\u7F6E\u5728\u5DE6\u4E0A\u548C\u53F3\u4E0B\n    const startOffset = totalSteps === 2 ? -45 : 0\n    let currentAngle = startOffset\n\n    for (let i = 0; i < totalSteps; i++) {\n      const startAngle = currentAngle + gapAngle / 2\n      const endAngle = startAngle + segmentAngle\n      const isCompleted = i < currentStep\n\n      result.push({\n        path: getArcPath(startAngle, endAngle),\n        isCompleted,\n        index: i,\n      })\n\n      currentAngle = endAngle + gapAngle / 2\n    }\n\n    return result\n  }, [totalSteps, currentStep, gap, radius, center])\n\n  return (\n    <div\n      className={cn(\n        'relative inline-flex shrink-0 flex-col items-center',\n        'laptop:w-[--circle-laptop-size] w-[--circle-size]',\n        'laptop:h-[--circle-laptop-height] h-[--circle-height]',\n        className\n      )}\n      style={\n        {\n          '--circle-size': `${size}px`,\n          '--circle-laptop-size': `${laptopSize}px`,\n          '--circle-height': `${label ? size + 8 : size}px`,\n          '--circle-laptop-height': `${label ? laptopSize + 8 : laptopSize}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* \u8FDB\u5EA6\u6761\u5706\u73AF */}\n      <div className=\"laptop:size-[--circle-laptop-size] relative size-[--circle-size]\">\n        <svg\n          viewBox={`0 0 ${maxSize} ${maxSize}`}\n          className={cn('absolute inset-0 size-full', label ? 'translate-y-[-8px]' : '')}\n        >\n          {/* \u80CC\u666F\u5706\u5F62 */}\n          <circle cx={center} cy={center} r={radius} fill={backgroundColor} stroke=\"none\" />\n\n          {/* \u5206\u6BB5\u5F27 */}\n          {segments.map(segment => (\n            <path\n              key={segment.index}\n              d={segment.path}\n              fill=\"none\"\n              stroke={segment.isCompleted ? progressColor : trackColor}\n              strokeWidth={strokeWidth}\n              strokeLinecap=\"round\"\n              style={{\n                transition: 'stroke 0.3s ease-in-out',\n              }}\n            />\n          ))}\n        </svg>\n\n        {/* \u4E2D\u95F4\u5185\u5BB9\u533A\u57DF */}\n        <div\n          className={cn('absolute inset-[10px] flex items-center justify-center', label ? 'translate-y-[-8px]' : '')}\n        >\n          <div\n            className=\"flex size-full items-center justify-center overflow-hidden rounded-full\"\n            style={{ backgroundColor }}\n          >\n            {image?.url && (\n              <Picture className=\"size-full\" imgClassName=\"object-contain\" source={image.url} alt={image.alt || ''} />\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u6587\u6848 - \u548C\u5706\u5F62\u5E95\u90E8\u91CD\u53E0 */}\n      {label && (\n        <div\n          className=\"absolute bottom-0 left-1/2 flex -translate-x-1/2 items-center justify-center rounded-full px-2 py-0.5\"\n          style={{ backgroundColor: labelColor }}\n        >\n          <Text className=\"text-xs font-medium text-white\" html={label} />\n        </div>\n      )}\n    </div>\n  )\n}\n\nCircleProgress.displayName = 'CircleProgress'\n\nexport default CircleProgress\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "Picture", "Text", "cn", "CircleProgress", "totalSteps", "currentStep", "image", "label", "progressColor", "labelColor", "trackColor", "backgroundColor", "size", "laptopSize", "gap", "className", "maxSize", "strokeWidth", "radius", "center", "segments", "gapAngle", "segmentAngle", "toRadians", "degrees", "getArcPath", "startAngle", "endAngle", "adjustedStart", "adjustedEnd", "startX", "startY", "endX", "endY", "largeArcFlag", "result", "currentAngle", "i", "isCompleted", "segment", "CircleProgress_default"]
+}

package/dist/esm/biz-components/MiniCart/MiniCartDialog.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{cn as e}from"../../helpers/index.js";import{Heading as w,Text as f,Dialog as D,DialogContent as I,DialogHeader as N,DialogTitle as z}from"../../components/index.js";const P=({className:r})=>t("svg",{className:r,width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M2 6H10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),T=({className:r})=>t("svg",{className:r,width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M6 2V10M2 6H10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),k=({item:r,classNames:a,onIncrease:d,onDecrease:x})=>{const{merchandise:o,quantity:u,cost:y}=r,{image:l,title:b}=o,{totalAmount:c,subtotalAmount:s}=y,m=b||o.sku||"Product",g=c?.formattedPrice||"",v=s&&c&&parseFloat(s.amount)>parseFloat(c.amount);return p("div",{className:e("bg-container-primary rounded-box flex items-center gap-2 px-2 py-4","laptop:bg-container-primary laptop:gap-4 laptop:p-4",a?.item),children:[t("div",{className:e("rounded-box relative size-16 shrink-0 overflow-hidden","laptop:size-20",a?.itemImage),children:l?.url&&t("img",{src:l.url,alt:l.altText||m,className:"size-full object-cover"})}),p("div",{className:e("laptop:gap-4 flex flex-1 flex-col gap-2",a?.itemInfo),children:[t(f,{as:"p",size:3,className:e("text-info-primary laptop:text-[16px] line-clamp-2 text-[14px]",a?.itemTitle),children:m}),p("div",{className:"laptop:flex-row laptop:items-center laptop:justify-between flex flex-col items-start gap-1",children:[p("div",{className:e("flex items-center gap-1",a?.itemPrice),children:[g&&t(f,{size:4,className:e("text-info-primary laptop:text-[18px] text-[16px]",a?.itemCurrentPrice),children:g}),v&&s?.formattedPrice&&t(f,{size:4,className:e("text-info-tertiary laptop:text-[18px] text-[16px] line-through",a?.itemOriginalPrice),children:s.formattedPrice})]}),p("div",{className:e("flex items-center",a?.quantityControl),children:[t("button",{type:"button",onClick:x,disabled:u<=0,className:e("border-lines flex size-8 items-center justify-center border","laptop:size-10","text-info-primary hover:bg-container-secondary-0 transition-colors","disabled:cursor-not-allowed disabled:opacity-50",a?.quantityButton),"aria-label":"Decrease quantity",children:t(P,{className:"laptop:size-3 size-[10.67px]"})}),t("div",{className:e("border-lines text-info-primary flex size-8 items-center justify-center border-y text-center text-sm font-semibold","laptop:size-10 laptop:text-base",a?.quantityValue),children:u}),t("button",{type:"button",onClick:d,className:e("border-lines flex size-8 items-center justify-center border","laptop:size-10","text-info-primary hover:bg-container-secondary-0 transition-colors",a?.quantityButton),"aria-label":"Increase quantity",children:t(T,{className:"laptop:size-3 size-[10.67px]"})})]})]})]})]})},h=({open:r,onOpenChange:a,cart:d,copy:x,classNames:o={},onIncreaseQuantity:u,onDecreaseQuantity:y,onQuantityChange:l})=>{const b=x?.title||"Selected ({count})",c=x?.emptyText||"Your cart is empty",s=d?.lineItems?.reduce((i,n)=>i+(n?.quantity||0),0)||0,m=d?.lineItems||[],g=m.length===0,v=(i,n)=>{u?.(i,n),l?.(i,n+1)},C=(i,n)=>{n>1&&(y?.(i,n),l?.(i,n-1))};return t(D,{open:r,onOpenChange:a,children:p(I,{className:e("bg-container-secondary-0 fixed left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-0 overflow-hidden p-0","rounded-box max-h-[80vh] w-[calc(100%-64px)] min-w-[326px]","laptop:w-full laptop:max-w-[560px] laptop:rounded-box",o?.root),children:[t(N,{className:e("bg-container-secondary-0 flex flex-row items-start justify-between gap-4 px-4 pb-2 pt-4",o?.header),children:t(z,{asChild:!0,children:t(w,{as:"h3",size:2,className:e("text-info-primary font-bold",o?.title),children:b.replace("{count}",s.toString())})})}),t("div",{className:e("bg-container-secondary-0 h- flex flex-col gap-2 overflow-y-auto px-4 py-2",o?.content),children:g?t("div",{className:"flex items-center justify-center py-8",children:t(f,{size:2,className:"text-info-tertiary",children:c})}):t("div",{className:e("flex flex-col gap-2",o?.itemList),children:m.map(i=>t(k,{item:i,classNames:o,onIncrease:()=>v(i.id,i.quantity),onDecrease:()=>C(i.id,i.quantity)},i.id))})}),t("div",{className:"bg-container-secondary-0 h-8 w-full"})]})})};h.displayName="MiniCartDialog";var L=h;export{h as MiniCartDialog,L as default};
+"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{cn as e}from"../../helpers/index.js";import{Heading as w,Text as f,Dialog as D,DialogContent as I,DialogHeader as N,DialogTitle as z}from"../../components/index.js";const P=({className:r})=>t("svg",{className:r,width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M2 6H10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),T=({className:r})=>t("svg",{className:r,width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M6 2V10M2 6H10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),k=({item:r,classNames:a,onIncrease:d,onDecrease:x})=>{const{merchandise:o,quantity:u,cost:y}=r,{image:l,title:b}=o,{totalAmount:c,subtotalAmount:s}=y,m=b||o.sku||"Product",g=c?.formattedPrice||"",v=s&&c&&parseFloat(s.amount)>parseFloat(c.amount);return p("div",{className:e("bg-container-primary rounded-box flex items-center gap-2 px-2 py-4","laptop:bg-container-primary laptop:gap-4 laptop:p-4",a?.item),children:[t("div",{className:e("rounded-box relative size-16 shrink-0 overflow-hidden","laptop:size-20",a?.itemImage),children:l?.url&&t("img",{src:l.url,alt:l.altText||m,className:"size-full object-cover"})}),p("div",{className:e("laptop:gap-4 flex flex-1 flex-col gap-2",a?.itemInfo),children:[t(f,{as:"p",size:3,className:e("text-info-primary laptop:text-[16px] line-clamp-2 text-[14px]",a?.itemTitle),children:m}),p("div",{className:"laptop:flex-row laptop:items-center laptop:justify-between flex flex-col items-start gap-1",children:[p("div",{className:e("flex items-center gap-1",a?.itemPrice),children:[g&&t(f,{size:4,className:e("text-info-primary laptop:text-[18px] text-[16px]",a?.itemCurrentPrice),children:g}),v&&s?.formattedPrice&&t(f,{size:4,className:e("text-info-tertiary laptop:text-[18px] text-[16px] line-through",a?.itemOriginalPrice),children:s.formattedPrice})]}),p("div",{className:e("flex items-center",a?.quantityControl),children:[t("button",{type:"button",onClick:x,disabled:u<=0,className:e("border-lines flex size-8 items-center justify-center border","laptop:size-10","text-info-primary hover:bg-container-secondary-0 transition-colors","disabled:cursor-not-allowed disabled:opacity-50",a?.quantityButton),"aria-label":"Decrease quantity",children:t(P,{className:"laptop:size-3 size-[10.67px]"})}),t("div",{className:e("border-lines text-info-primary flex size-8 items-center justify-center border-y text-center text-sm font-semibold","laptop:size-10 laptop:text-base",a?.quantityValue),children:u}),t("button",{type:"button",onClick:d,className:e("border-lines flex size-8 items-center justify-center border","laptop:size-10","text-info-primary hover:bg-container-secondary-0 transition-colors",a?.quantityButton),"aria-label":"Increase quantity",children:t(T,{className:"laptop:size-3 size-[10.67px]"})})]})]})]})]})},h=({open:r,onOpenChange:a,cart:d,copy:x,classNames:o={},onIncreaseQuantity:u,onDecreaseQuantity:y,onQuantityChange:l})=>{const b=x?.title||"Selected ({count})",c=x?.emptyText||"Your cart is empty",s=d?.lineItems?.reduce((i,n)=>i+(n?.quantity||0),0)||0,m=d?.lineItems||[],g=m.length===0,v=(i,n)=>{u?.(i,n),l?.(i,n+1)},C=(i,n)=>{n>0&&(y?.(i,n),l?.(i,n-1))};return t(D,{open:r,onOpenChange:a,children:p(I,{className:e("bg-container-secondary-0 fixed left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-0 overflow-hidden p-0","rounded-box max-h-[80vh] w-[calc(100%-64px)] min-w-[326px]","laptop:w-full laptop:max-w-[560px] laptop:rounded-box",o?.root),children:[t(N,{className:e("bg-container-secondary-0 flex flex-row items-start justify-between gap-4 px-4 pb-2 pt-4",o?.header),children:t(z,{asChild:!0,children:t(w,{as:"h3",size:2,className:e("text-info-primary font-bold",o?.title),children:b.replace("{count}",s.toString())})})}),t("div",{className:e("bg-container-secondary-0 h- flex flex-col gap-2 overflow-y-auto px-4 py-2",o?.content),children:g?t("div",{className:"flex items-center justify-center py-8",children:t(f,{size:2,className:"text-info-tertiary",children:c})}):t("div",{className:e("flex flex-col gap-2",o?.itemList),children:m.map(i=>t(k,{item:i,classNames:o,onIncrease:()=>v(i.id,i.quantity),onDecrease:()=>C(i.id,i.quantity)},i.id))})}),t("div",{className:"bg-container-secondary-0 h-8 w-full"})]})})};h.displayName="MiniCartDialog";var L=h;export{h as MiniCartDialog,L as default};
 //# sourceMappingURL=MiniCartDialog.js.map

package/dist/esm/biz-components/MiniCart/MiniCartDialog.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MiniCart/MiniCartDialog.tsx"],
-  "sourcesContent": ["'use client'\n\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Text, Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/index.js'\nimport type { CartLineItem, Cart } from './index.js'\n\n/**\n * \u8D2D\u7269\u8F66\u6570\u636E\u7C7B\u578B - \u590D\u7528 MiniCart \u7684\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface CartData {\n  id: string\n  checkoutUrl: string\n  lineItems: CartLineItem[]\n}\n\n// \u91CD\u65B0\u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\nexport type { CartLineItem, Cart }\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface MiniCartDialogCopy {\n  /** \u6807\u9898\u6587\u6848\uFF0C{count} \u4F1A\u88AB\u66FF\u6362\u4E3A\u5546\u54C1\u6570\u91CF */\n  title?: string\n  /** \u7A7A\u8D2D\u7269\u8F66\u63D0\u793A */\n  emptyText?: string\n}\n\nexport type MiniCartDialogSemanticName =\n  | 'root'\n  | 'header'\n  | 'title'\n  | 'content'\n  | 'itemList'\n  | 'item'\n  | 'itemImage'\n  | 'itemInfo'\n  | 'itemTitle'\n  | 'itemPrice'\n  | 'itemCurrentPrice'\n  | 'itemOriginalPrice'\n  | 'quantityControl'\n  | 'quantityButton'\n  | 'quantityValue'\n\nexport interface MiniCartDialogProps {\n  /** \u662F\u5426\u6253\u5F00\u5F39\u7A97 */\n  open: boolean\n  /** \u5173\u95ED\u5F39\u7A97\u56DE\u8C03 */\n  onOpenChange: (open: boolean) => void\n  /** \u8D2D\u7269\u8F66\u6570\u636E */\n  cart: CartData\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: MiniCartDialogCopy\n  /** \u5404\u90E8\u5206\u7684\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D */\n  classNames?: Partial<Record<MiniCartDialogSemanticName, string>>\n  /**\n   * \u589E\u52A0\u5546\u54C1\u6570\u91CF\u56DE\u8C03\n   * @param lineItemId \u5546\u54C1\u884CID\n   * @param currentQuantity \u5F53\u524D\u6570\u91CF\n   */\n  onIncreaseQuantity?: (lineItemId: string, currentQuantity: number) => void\n  /**\n   * \u51CF\u5C11\u5546\u54C1\u6570\u91CF\u56DE\u8C03\n   * @param lineItemId \u5546\u54C1\u884CID\n   * @param currentQuantity \u5F53\u524D\u6570\u91CF\n   */\n  onDecreaseQuantity?: (lineItemId: string, currentQuantity: number) => void\n  /**\n   * \u6570\u91CF\u53D8\u66F4\u56DE\u8C03\n   * @param lineItemId \u5546\u54C1\u884CID\n   * @param quantity \u65B0\u6570\u91CF\n   */\n  onQuantityChange?: (lineItemId: string, quantity: number) => void\n}\n\n/**\n * MinusIcon - \u51CF\u53F7\u56FE\u6807\n */\nconst MinusIcon = ({ className }: { className?: string }) => (\n  <svg className={className} width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M2 6H10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n/**\n * PlusIcon - \u52A0\u53F7\u56FE\u6807\n */\nconst PlusIcon = ({ className }: { className?: string }) => (\n  <svg className={className} width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M6 2V10M2 6H10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n/**\n * CartItem - \u8D2D\u7269\u8F66\u5546\u54C1\u9879\u7EC4\u4EF6\n */\ninterface CartItemProps {\n  item: CartLineItem\n  classNames?: Partial<Record<MiniCartDialogSemanticName, string>>\n  onIncrease?: () => void\n  onDecrease?: () => void\n}\n\nconst CartItem = ({ item, classNames, onIncrease, onDecrease }: CartItemProps) => {\n  const { merchandise, quantity, cost } = item\n  const { image, title } = merchandise\n  const { totalAmount, subtotalAmount } = cost\n\n  // \u663E\u793A\u6807\u9898\uFF08\u56DE\u9000\u5230 SKU\uFF09\n  const displayTitle = title || merchandise.sku || 'Product'\n  // \u663E\u793A\u4EF7\u683C\uFF08\u73B0\u4EF7 = totalAmount\uFF09\n  const displayPrice = totalAmount?.formattedPrice || ''\n  // \u662F\u5426\u6709\u6298\u6263\uFF08\u539F\u4EF7 subtotalAmount \u5927\u4E8E\u73B0\u4EF7 totalAmount\uFF09\n  const hasDiscount =\n    subtotalAmount && totalAmount && parseFloat(subtotalAmount.amount) > parseFloat(totalAmount.amount)\n\n  return (\n    <div\n      className={cn(\n        // \u79FB\u52A8\u7AEF\uFF1A\u7070\u8272\u80CC\u666F\uFF0C\u8F83\u5C0F\u95F4\u8DDD\n        'bg-container-primary rounded-box flex items-center gap-2 px-2 py-4',\n        // \u684C\u9762\u7AEF\uFF1A\u767D\u8272\u80CC\u666F\uFF0C\u8F83\u5927\u95F4\u8DDD\n        'laptop:bg-container-primary laptop:gap-4 laptop:p-4',\n        classNames?.item\n      )}\n    >\n      {/* \u5546\u54C1\u56FE\u7247 - \u79FB\u52A8\u7AEF 64px\uFF0C\u684C\u9762\u7AEF 80px */}\n      <div\n        className={cn('rounded-box relative size-16 shrink-0 overflow-hidden', 'laptop:size-20', classNames?.itemImage)}\n      >\n        {image?.url && <img src={image.url} alt={image.altText || displayTitle} className=\"size-full object-cover\" />}\n      </div>\n\n      {/* \u5546\u54C1\u4FE1\u606F */}\n      <div className={cn('laptop:gap-4 flex flex-1 flex-col gap-2', classNames?.itemInfo)}>\n        {/* \u5546\u54C1\u540D\u79F0 - \u79FB\u52A8\u7AEF\u8F83\u5C0F\u5B57\u4F53 */}\n        <Text\n          as=\"p\"\n          size={3}\n          className={cn('text-info-primary laptop:text-[16px] line-clamp-2 text-[14px]', classNames?.itemTitle)}\n        >\n          {displayTitle}\n        </Text>\n\n        {/* \u4EF7\u683C\u548C\u6570\u91CF\u63A7\u5236 - \u79FB\u52A8\u7AEF\u5782\u76F4\u6392\u5217\uFF0C\u684C\u9762\u7AEF\u6C34\u5E73\u6392\u5217 */}\n        <div className=\"laptop:flex-row laptop:items-center laptop:justify-between flex flex-col items-start gap-1\">\n          {/* \u4EF7\u683C\u533A\u57DF */}\n          <div className={cn('flex items-center gap-1', classNames?.itemPrice)}>\n            {displayPrice && (\n              <Text\n                size={4}\n                className={cn('text-info-primary laptop:text-[18px] text-[16px]', classNames?.itemCurrentPrice)}\n              >\n                {displayPrice}\n              </Text>\n            )}\n            {hasDiscount && subtotalAmount?.formattedPrice && (\n              <Text\n                size={4}\n                className={cn(\n                  'text-info-tertiary laptop:text-[18px] text-[16px] line-through',\n                  classNames?.itemOriginalPrice\n                )}\n              >\n                {subtotalAmount.formattedPrice}\n              </Text>\n            )}\n          </div>\n\n          {/* \u6570\u91CF\u63A7\u5236 - \u79FB\u52A8\u7AEF 32px \u6309\u94AE\uFF0C\u684C\u9762\u7AEF 40px \u6309\u94AE */}\n          <div className={cn('flex items-center', classNames?.quantityControl)}>\n            {/* \u51CF\u5C11\u6309\u94AE */}\n            <button\n              type=\"button\"\n              onClick={onDecrease}\n              disabled={quantity <= 0}\n              className={cn(\n                'border-lines flex size-8 items-center justify-center border',\n                'laptop:size-10',\n                'text-info-primary hover:bg-container-secondary-0 transition-colors',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                classNames?.quantityButton\n              )}\n              aria-label=\"Decrease quantity\"\n            >\n              <MinusIcon className=\"laptop:size-3 size-[10.67px]\" />\n            </button>\n\n            {/* \u6570\u91CF\u663E\u793A */}\n            <div\n              className={cn(\n                'border-lines text-info-primary flex size-8 items-center justify-center border-y text-center text-sm font-semibold',\n                'laptop:size-10 laptop:text-base',\n                classNames?.quantityValue\n              )}\n            >\n              {quantity}\n            </div>\n\n            {/* \u589E\u52A0\u6309\u94AE */}\n            <button\n              type=\"button\"\n              onClick={onIncrease}\n              className={cn(\n                'border-lines flex size-8 items-center justify-center border',\n                'laptop:size-10',\n                'text-info-primary hover:bg-container-secondary-0 transition-colors',\n                classNames?.quantityButton\n              )}\n              aria-label=\"Increase quantity\"\n            >\n              <PlusIcon className=\"laptop:size-3 size-[10.67px]\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * MiniCartDialog - \u8FF7\u4F60\u8D2D\u7269\u8F66\u5F39\u7A97\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u8D2D\u7269\u8F66\u5546\u54C1\u5217\u8868\uFF0C\u652F\u6301\u8C03\u6574\u5546\u54C1\u6570\u91CF\n */\nconst MiniCartDialog = ({\n  open,\n  onOpenChange,\n  cart,\n  copy,\n  classNames = {},\n  onIncreaseQuantity,\n  onDecreaseQuantity,\n  onQuantityChange,\n}: MiniCartDialogProps) => {\n  // \u6587\u6848\u914D\u7F6E\n  const titleText = copy?.title || 'Selected ({count})'\n  const emptyText = copy?.emptyText || 'Your cart is empty'\n\n  // \u8BA1\u7B97\u5546\u54C1\u603B\u6570\u91CF\n  const totalQuantity = cart?.lineItems?.reduce((total, item) => total + (item?.quantity || 0), 0) || 0\n\n  const items = cart?.lineItems || []\n  const isEmpty = items.length === 0\n\n  // \u5904\u7406\u6570\u91CF\u589E\u52A0\n  const handleIncrease = (lineItemId: string, currentQuantity: number) => {\n    onIncreaseQuantity?.(lineItemId, currentQuantity)\n    onQuantityChange?.(lineItemId, currentQuantity + 1)\n  }\n\n  // \u5904\u7406\u6570\u91CF\u51CF\u5C11\n  const handleDecrease = (lineItemId: string, currentQuantity: number) => {\n    if (currentQuantity > 1) {\n      onDecreaseQuantity?.(lineItemId, currentQuantity)\n      onQuantityChange?.(lineItemId, currentQuantity - 1)\n    }\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className={cn(\n          // \u57FA\u7840\u6837\u5F0F + \u5C45\u4E2D\u5B9A\u4F4D\n          'bg-container-secondary-0 fixed left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-0 overflow-hidden p-0',\n          // \u79FB\u52A8\u7AEF\uFF1A\u5C45\u4E2D\u5F39\u7A97\uFF0C\u6700\u5C0F\u5BBD\u5EA6326px\uFF0C\u5DE6\u53F3\u8DDD\u5C4F\u5E55\u8FB9\u7F1832px\n          'rounded-box max-h-[80vh] w-[calc(100%-64px)] min-w-[326px]',\n          // \u684C\u9762\u7AEF\uFF1A\u6700\u5927\u5BBD\u5EA6560px\n          'laptop:w-full laptop:max-w-[560px] laptop:rounded-box',\n          classNames?.root\n        )}\n      >\n        {/* \u5934\u90E8 */}\n        <DialogHeader\n          className={cn(\n            'bg-container-secondary-0 flex flex-row items-start justify-between gap-4 px-4 pb-2 pt-4',\n            classNames?.header\n          )}\n        >\n          <DialogTitle asChild>\n            <Heading as=\"h3\" size={2} className={cn('text-info-primary font-bold', classNames?.title)}>\n              {titleText.replace('{count}', totalQuantity.toString())}\n            </Heading>\n          </DialogTitle>\n        </DialogHeader>\n\n        {/* \u5546\u54C1\u5217\u8868 */}\n        <div\n          className={cn(\n            'bg-container-secondary-0 h- flex flex-col gap-2 overflow-y-auto px-4 py-2',\n            classNames?.content\n          )}\n        >\n          {isEmpty ? (\n            <div className=\"flex items-center justify-center py-8\">\n              <Text size={2} className=\"text-info-tertiary\">\n                {emptyText}\n              </Text>\n            </div>\n          ) : (\n            <div className={cn('flex flex-col gap-2', classNames?.itemList)}>\n              {items.map(item => (\n                <CartItem\n                  key={item.id}\n                  item={item}\n                  classNames={classNames}\n                  onIncrease={() => handleIncrease(item.id, item.quantity)}\n                  onDecrease={() => handleDecrease(item.id, item.quantity)}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* \u5E95\u90E8\u5B89\u5168\u533A\u57DF */}\n        <div className=\"bg-container-secondary-0 h-8 w-full\" />\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nMiniCartDialog.displayName = 'MiniCartDialog'\n\nexport default MiniCartDialog\nexport { MiniCartDialog }\n"],
+  "sourcesContent": ["'use client'\n\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Text, Dialog, DialogContent, DialogHeader, DialogTitle } from '../../components/index.js'\nimport type { CartLineItem, Cart } from './index.js'\n\n/**\n * \u8D2D\u7269\u8F66\u6570\u636E\u7C7B\u578B - \u590D\u7528 MiniCart \u7684\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface CartData {\n  id: string\n  checkoutUrl: string\n  lineItems: CartLineItem[]\n}\n\n// \u91CD\u65B0\u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\nexport type { CartLineItem, Cart }\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface MiniCartDialogCopy {\n  /** \u6807\u9898\u6587\u6848\uFF0C{count} \u4F1A\u88AB\u66FF\u6362\u4E3A\u5546\u54C1\u6570\u91CF */\n  title?: string\n  /** \u7A7A\u8D2D\u7269\u8F66\u63D0\u793A */\n  emptyText?: string\n}\n\nexport type MiniCartDialogSemanticName =\n  | 'root'\n  | 'header'\n  | 'title'\n  | 'content'\n  | 'itemList'\n  | 'item'\n  | 'itemImage'\n  | 'itemInfo'\n  | 'itemTitle'\n  | 'itemPrice'\n  | 'itemCurrentPrice'\n  | 'itemOriginalPrice'\n  | 'quantityControl'\n  | 'quantityButton'\n  | 'quantityValue'\n\nexport interface MiniCartDialogProps {\n  /** \u662F\u5426\u6253\u5F00\u5F39\u7A97 */\n  open: boolean\n  /** \u5173\u95ED\u5F39\u7A97\u56DE\u8C03 */\n  onOpenChange: (open: boolean) => void\n  /** \u8D2D\u7269\u8F66\u6570\u636E */\n  cart: CartData\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: MiniCartDialogCopy\n  /** \u5404\u90E8\u5206\u7684\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D */\n  classNames?: Partial<Record<MiniCartDialogSemanticName, string>>\n  /**\n   * \u589E\u52A0\u5546\u54C1\u6570\u91CF\u56DE\u8C03\n   * @param lineItemId \u5546\u54C1\u884CID\n   * @param currentQuantity \u5F53\u524D\u6570\u91CF\n   */\n  onIncreaseQuantity?: (lineItemId: string, currentQuantity: number) => void\n  /**\n   * \u51CF\u5C11\u5546\u54C1\u6570\u91CF\u56DE\u8C03\n   * @param lineItemId \u5546\u54C1\u884CID\n   * @param currentQuantity \u5F53\u524D\u6570\u91CF\n   */\n  onDecreaseQuantity?: (lineItemId: string, currentQuantity: number) => void\n  /**\n   * \u6570\u91CF\u53D8\u66F4\u56DE\u8C03\n   * @param lineItemId \u5546\u54C1\u884CID\n   * @param quantity \u65B0\u6570\u91CF\n   */\n  onQuantityChange?: (lineItemId: string, quantity: number) => void\n}\n\n/**\n * MinusIcon - \u51CF\u53F7\u56FE\u6807\n */\nconst MinusIcon = ({ className }: { className?: string }) => (\n  <svg className={className} width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M2 6H10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n/**\n * PlusIcon - \u52A0\u53F7\u56FE\u6807\n */\nconst PlusIcon = ({ className }: { className?: string }) => (\n  <svg className={className} width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M6 2V10M2 6H10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n/**\n * CartItem - \u8D2D\u7269\u8F66\u5546\u54C1\u9879\u7EC4\u4EF6\n */\ninterface CartItemProps {\n  item: CartLineItem\n  classNames?: Partial<Record<MiniCartDialogSemanticName, string>>\n  onIncrease?: () => void\n  onDecrease?: () => void\n}\n\nconst CartItem = ({ item, classNames, onIncrease, onDecrease }: CartItemProps) => {\n  const { merchandise, quantity, cost } = item\n  const { image, title } = merchandise\n  const { totalAmount, subtotalAmount } = cost\n\n  // \u663E\u793A\u6807\u9898\uFF08\u56DE\u9000\u5230 SKU\uFF09\n  const displayTitle = title || merchandise.sku || 'Product'\n  // \u663E\u793A\u4EF7\u683C\uFF08\u73B0\u4EF7 = totalAmount\uFF09\n  const displayPrice = totalAmount?.formattedPrice || ''\n  // \u662F\u5426\u6709\u6298\u6263\uFF08\u539F\u4EF7 subtotalAmount \u5927\u4E8E\u73B0\u4EF7 totalAmount\uFF09\n  const hasDiscount =\n    subtotalAmount && totalAmount && parseFloat(subtotalAmount.amount) > parseFloat(totalAmount.amount)\n\n  return (\n    <div\n      className={cn(\n        // \u79FB\u52A8\u7AEF\uFF1A\u7070\u8272\u80CC\u666F\uFF0C\u8F83\u5C0F\u95F4\u8DDD\n        'bg-container-primary rounded-box flex items-center gap-2 px-2 py-4',\n        // \u684C\u9762\u7AEF\uFF1A\u767D\u8272\u80CC\u666F\uFF0C\u8F83\u5927\u95F4\u8DDD\n        'laptop:bg-container-primary laptop:gap-4 laptop:p-4',\n        classNames?.item\n      )}\n    >\n      {/* \u5546\u54C1\u56FE\u7247 - \u79FB\u52A8\u7AEF 64px\uFF0C\u684C\u9762\u7AEF 80px */}\n      <div\n        className={cn('rounded-box relative size-16 shrink-0 overflow-hidden', 'laptop:size-20', classNames?.itemImage)}\n      >\n        {image?.url && <img src={image.url} alt={image.altText || displayTitle} className=\"size-full object-cover\" />}\n      </div>\n\n      {/* \u5546\u54C1\u4FE1\u606F */}\n      <div className={cn('laptop:gap-4 flex flex-1 flex-col gap-2', classNames?.itemInfo)}>\n        {/* \u5546\u54C1\u540D\u79F0 - \u79FB\u52A8\u7AEF\u8F83\u5C0F\u5B57\u4F53 */}\n        <Text\n          as=\"p\"\n          size={3}\n          className={cn('text-info-primary laptop:text-[16px] line-clamp-2 text-[14px]', classNames?.itemTitle)}\n        >\n          {displayTitle}\n        </Text>\n\n        {/* \u4EF7\u683C\u548C\u6570\u91CF\u63A7\u5236 - \u79FB\u52A8\u7AEF\u5782\u76F4\u6392\u5217\uFF0C\u684C\u9762\u7AEF\u6C34\u5E73\u6392\u5217 */}\n        <div className=\"laptop:flex-row laptop:items-center laptop:justify-between flex flex-col items-start gap-1\">\n          {/* \u4EF7\u683C\u533A\u57DF */}\n          <div className={cn('flex items-center gap-1', classNames?.itemPrice)}>\n            {displayPrice && (\n              <Text\n                size={4}\n                className={cn('text-info-primary laptop:text-[18px] text-[16px]', classNames?.itemCurrentPrice)}\n              >\n                {displayPrice}\n              </Text>\n            )}\n            {hasDiscount && subtotalAmount?.formattedPrice && (\n              <Text\n                size={4}\n                className={cn(\n                  'text-info-tertiary laptop:text-[18px] text-[16px] line-through',\n                  classNames?.itemOriginalPrice\n                )}\n              >\n                {subtotalAmount.formattedPrice}\n              </Text>\n            )}\n          </div>\n\n          {/* \u6570\u91CF\u63A7\u5236 - \u79FB\u52A8\u7AEF 32px \u6309\u94AE\uFF0C\u684C\u9762\u7AEF 40px \u6309\u94AE */}\n          <div className={cn('flex items-center', classNames?.quantityControl)}>\n            {/* \u51CF\u5C11\u6309\u94AE */}\n            <button\n              type=\"button\"\n              onClick={onDecrease}\n              disabled={quantity <= 0}\n              className={cn(\n                'border-lines flex size-8 items-center justify-center border',\n                'laptop:size-10',\n                'text-info-primary hover:bg-container-secondary-0 transition-colors',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                classNames?.quantityButton\n              )}\n              aria-label=\"Decrease quantity\"\n            >\n              <MinusIcon className=\"laptop:size-3 size-[10.67px]\" />\n            </button>\n\n            {/* \u6570\u91CF\u663E\u793A */}\n            <div\n              className={cn(\n                'border-lines text-info-primary flex size-8 items-center justify-center border-y text-center text-sm font-semibold',\n                'laptop:size-10 laptop:text-base',\n                classNames?.quantityValue\n              )}\n            >\n              {quantity}\n            </div>\n\n            {/* \u589E\u52A0\u6309\u94AE */}\n            <button\n              type=\"button\"\n              onClick={onIncrease}\n              className={cn(\n                'border-lines flex size-8 items-center justify-center border',\n                'laptop:size-10',\n                'text-info-primary hover:bg-container-secondary-0 transition-colors',\n                classNames?.quantityButton\n              )}\n              aria-label=\"Increase quantity\"\n            >\n              <PlusIcon className=\"laptop:size-3 size-[10.67px]\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * MiniCartDialog - \u8FF7\u4F60\u8D2D\u7269\u8F66\u5F39\u7A97\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u8D2D\u7269\u8F66\u5546\u54C1\u5217\u8868\uFF0C\u652F\u6301\u8C03\u6574\u5546\u54C1\u6570\u91CF\n */\nconst MiniCartDialog = ({\n  open,\n  onOpenChange,\n  cart,\n  copy,\n  classNames = {},\n  onIncreaseQuantity,\n  onDecreaseQuantity,\n  onQuantityChange,\n}: MiniCartDialogProps) => {\n  // \u6587\u6848\u914D\u7F6E\n  const titleText = copy?.title || 'Selected ({count})'\n  const emptyText = copy?.emptyText || 'Your cart is empty'\n\n  // \u8BA1\u7B97\u5546\u54C1\u603B\u6570\u91CF\n  const totalQuantity = cart?.lineItems?.reduce((total, item) => total + (item?.quantity || 0), 0) || 0\n\n  const items = cart?.lineItems || []\n  const isEmpty = items.length === 0\n\n  // \u5904\u7406\u6570\u91CF\u589E\u52A0\n  const handleIncrease = (lineItemId: string, currentQuantity: number) => {\n    onIncreaseQuantity?.(lineItemId, currentQuantity)\n    onQuantityChange?.(lineItemId, currentQuantity + 1)\n  }\n\n  // \u5904\u7406\u6570\u91CF\u51CF\u5C11\n  const handleDecrease = (lineItemId: string, currentQuantity: number) => {\n    if (currentQuantity > 0) {\n      onDecreaseQuantity?.(lineItemId, currentQuantity)\n      onQuantityChange?.(lineItemId, currentQuantity - 1)\n    }\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className={cn(\n          // \u57FA\u7840\u6837\u5F0F + \u5C45\u4E2D\u5B9A\u4F4D\n          'bg-container-secondary-0 fixed left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-0 overflow-hidden p-0',\n          // \u79FB\u52A8\u7AEF\uFF1A\u5C45\u4E2D\u5F39\u7A97\uFF0C\u6700\u5C0F\u5BBD\u5EA6326px\uFF0C\u5DE6\u53F3\u8DDD\u5C4F\u5E55\u8FB9\u7F1832px\n          'rounded-box max-h-[80vh] w-[calc(100%-64px)] min-w-[326px]',\n          // \u684C\u9762\u7AEF\uFF1A\u6700\u5927\u5BBD\u5EA6560px\n          'laptop:w-full laptop:max-w-[560px] laptop:rounded-box',\n          classNames?.root\n        )}\n      >\n        {/* \u5934\u90E8 */}\n        <DialogHeader\n          className={cn(\n            'bg-container-secondary-0 flex flex-row items-start justify-between gap-4 px-4 pb-2 pt-4',\n            classNames?.header\n          )}\n        >\n          <DialogTitle asChild>\n            <Heading as=\"h3\" size={2} className={cn('text-info-primary font-bold', classNames?.title)}>\n              {titleText.replace('{count}', totalQuantity.toString())}\n            </Heading>\n          </DialogTitle>\n        </DialogHeader>\n\n        {/* \u5546\u54C1\u5217\u8868 */}\n        <div\n          className={cn(\n            'bg-container-secondary-0 h- flex flex-col gap-2 overflow-y-auto px-4 py-2',\n            classNames?.content\n          )}\n        >\n          {isEmpty ? (\n            <div className=\"flex items-center justify-center py-8\">\n              <Text size={2} className=\"text-info-tertiary\">\n                {emptyText}\n              </Text>\n            </div>\n          ) : (\n            <div className={cn('flex flex-col gap-2', classNames?.itemList)}>\n              {items.map(item => (\n                <CartItem\n                  key={item.id}\n                  item={item}\n                  classNames={classNames}\n                  onIncrease={() => handleIncrease(item.id, item.quantity)}\n                  onDecrease={() => handleDecrease(item.id, item.quantity)}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* \u5E95\u90E8\u5B89\u5168\u533A\u57DF */}\n        <div className=\"bg-container-secondary-0 h-8 w-full\" />\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nMiniCartDialog.displayName = 'MiniCartDialog'\n\nexport default MiniCartDialog\nexport { MiniCartDialog }\n"],
   "mappings": "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",
   "names": ["jsx", "jsxs", "cn", "Heading", "Text", "Dialog", "DialogContent", "DialogHeader", "DialogTitle", "MinusIcon", "className", "PlusIcon", "CartItem", "item", "classNames", "onIncrease", "onDecrease", "merchandise", "quantity", "cost", "image", "title", "totalAmount", "subtotalAmount", "displayTitle", "displayPrice", "hasDiscount", "MiniCartDialog", "open", "onOpenChange", "cart", "copy", "onIncreaseQuantity", "onDecreaseQuantity", "onQuantityChange", "titleText", "emptyText", "totalQuantity", "total", "items", "isEmpty", "handleIncrease", "lineItemId", "currentQuantity", "handleDecrease", "MiniCartDialog_default"]
 }

package/dist/esm/biz-components/MiniCart/index.d.ts CHANGED Viewed

@@ -1,5 +1,29 @@
 import * as React from 'react';
-export type MiniCartSemanticName = 'root' | 'content' | 'cartInfo' | 'cartTitle' | 'cartDescription' | 'priceSection' | 'totalPrice' | 'originalPrice' | 'saveAmount' | 'actionButton' | 'itemsGrid' | 'itemGridContainer' | 'gridItem' | 'gridItemOverlay' | 'expandButton';
+import type { Img } from '../../types/props.js';
+export type MiniCartSemanticName = 'root' | 'content' | 'cartInfo' | 'cartTitle' | 'cartDescription' | 'priceSection' | 'totalPrice' | 'originalPrice' | 'saveAmount' | 'actionButton' | 'itemsGrid' | 'itemGridContainer' | 'gridItem' | 'gridItemOverlay' | 'expandButton' | 'circleProgress' | 'mobileViewMoreButton';
+/**
+ * 圆形进度条配置
+ */
+export interface CircleProgressConfig {
+    /** 总阶段数 (1-4) */
+    totalSteps?: 1 | 2 | 3 | 4;
+    /** 当前完成的阶段 (0 到 totalSteps) */
+    currentStep?: number;
+    /** 中间显示的图片 */
+    image?: Img;
+    /** 底部显示的文案 */
+    label?: string;
+    /** 进度条颜色，默认为品牌色 */
+    progressColor?: string;
+    /** 底部文案背景色，默认为品牌营销色 */
+    labelColor?: string;
+    /** 背景颜色，默认为容器背景色 */
+    backgroundColor?: string;
+    /** 移动端组件尺寸，默认 48 */
+    size?: number;
+    /** laptop 以上组件尺寸，默认 80 */
+    laptopSize?: number;
+}
 /**
  * 文案配置
  */
@@ -22,6 +46,8 @@ export interface MiniCartData {
     theme?: 'light' | 'dark';
     /** 地区代码，用于价格格式化 */
     locale?: string;
+    /** 是否显示手机端查看更多按钮，默认 true */
+    showMobileViewMore?: boolean;
 }
 /**
  * 购物车商品项类型
@@ -88,6 +114,10 @@ export interface MiniCartProps extends React.HTMLAttributes<HTMLDivElement> {
      * 产品信息（用于主要展示的产品）
      */
     cart: Cart;
+    /**
+     * 圆形进度条配置，不传则不显示进度条
+     */
+    progressConfig?: CircleProgressConfig;
     /**
      * 删除商品项的回调函数
      * @param id 商品 ID

package/dist/esm/biz-components/MiniCart/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import*as c from"react";import{cn as e}from"../../helpers/index.js";import{Button as ct}from"../../components/index.js";import{Text as A}from"../../components/index.js";import{Heading as p}from"../../components/index.js";const S=c.forwardRef(({className:D,classNames:o={},data:B,cart:a,onRemoveItem:j,onCheckout:H,onClickToView:R,...E},V)=>{const{copy:l,theme:x="light",locale:pt="us"}=B||{},W=l?.emptyCart||"Your Cart is Empty",b=l?.description||'Add one more to get <span style="color: var(--brand-color)">50% <span> off',q=l?.itemsInCart||"You have selected {count} items",G=l?.total||"Total {total}",dt=l?.totalWithCoupon||"total: {total} ({subtotal})",U=l?.clickToView||"Click to view cart",X=l?.buyNowText||"Buy Now",F=l?.savingText||"Saving {amount}",d=a?.lineItems||[],w=d.reduce((i,n)=>i+(n?.quantity||0),0),O=w===0,Y=parseFloat(a?.cost?.totalAmount?.amount||"0"),Z=parseFloat(a?.cost?.subtotalAmount?.amount||"0"),$=parseFloat(a?.cost?.savingAmount?.amount||"0"),J=a?.cost?.totalAmount?.formattedPrice||"",C=Z>Y?a?.cost?.subtotalAmount?.formattedPrice:null,y=$>0?a?.cost?.savingAmount?.formattedPrice:null,s=c.useRef(null),[f,K]=c.useState(!1),[k,M]=c.useState(!1),[g,L]=c.useState(null),N=async i=>{if(!g){L(i);try{await j?.(i,a)}finally{L(null)}}},[I,h]=c.useState(!1),[Q,_]=c.useState(0),[tt,et]=c.useState(0),ot=i=>{s.current&&(h(!0),_(i.pageX-s.current.offsetLeft),et(s.current.scrollLeft))},it=i=>{if(!I||!s.current)return;i.preventDefault();const m=(i.pageX-s.current.offsetLeft-Q)*1.5;s.current.scrollLeft=tt-m},nt=()=>{h(!1)},rt=()=>{h(!1)},T=i=>{if(s.current){const n=s.current,m=100;n.scrollBy({left:i==="right"?m:-m,behavior:"smooth"})}},v=({className:i})=>t("svg",{className:i,width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M6 4L10 8L6 12",stroke:"currentColor",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"})}),at=({className:i})=>t("svg",{className:i,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M2.5 5H17.5M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667M3.33333 5L4.16667 16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667L16.6667 5M7.5 5V2.5C7.5 2.27899 7.5878 2.06702 7.74408 1.91074C7.90036 1.75446 8.11232 1.66667 8.33333 1.66667H11.6667C11.8877 1.66667 12.0996 1.75446 12.2559 1.91074C12.4122 2.06702 12.5 2.27899 12.5 2.5V5",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round"})}),st=i=>d.length?r("div",{className:e("bg-container-primary flex gap-1 rounded-lg p-1",o?.itemsGrid),children:[d.length>0&&t("button",{onClick:()=>T("left"),className:e("border-border laptop:flex hover:bg-muted-foreground/10 laptop:flex hidden size-12 shrink-0 items-center justify-center rounded-lg transition-colors",o?.expandButton),"aria-label":"Scroll left to see more items",children:t(v,{className:"size-4 rotate-180"})}),t("div",{ref:s,onMouseDown:ot,onMouseMove:it,onMouseUp:nt,onMouseLeave:rt,className:e("scrollbar-hide laptop:gap-1 laptop:max-w-[240px] flex w-full gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",I?"cursor-grabbing":"cursor-grab",o?.itemGridContainer),children:d.filter(n=>n&&n.id).map(n=>{const P=(n.merchandise||{}).image||{},z=P.url,lt=P.altText||"Product image";return r("div",{className:e("laptop:size-12 bg-container-secondary laptop:bg-white group relative size-16 shrink-0 rounded-lg",o?.gridItem),children:[z&&t("img",{src:z,alt:lt,draggable:!1,className:"pointer-events-none size-full select-none rounded-lg object-cover"}),g===n.id&&t("div",{className:"absolute inset-0 flex items-center justify-center rounded-lg bg-black/50",children:r("svg",{width:"20",height:"20",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"animate-spin text-white",children:[t("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2",opacity:"0.3"}),t("path",{d:"M14 8a6 6 0 0 0-6-6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}),t("span",{role:"button",onClick:()=>N(n.id),className:e("laptop:hidden absolute right-[2px] top-[2px] cursor-pointer",g===n.id&&"pointer-events-none opacity-0"),"aria-label":"delete",children:r("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"pointer-events-none",children:[t("rect",{x:"1.33301",y:"1.33301",width:"13.3333",height:"13.3333",rx:"6.66667",fill:"white"}),t("path",{d:"M5.37705 5.28896C5.57234 5.09402 5.88839 5.09442 6.08347 5.28965L8.08602 7.29358L10.0906 5.28896C10.2858 5.09402 10.6026 5.09395 10.7977 5.28896C10.9928 5.48418 10.9926 5.80078 10.7977 5.99607L8.79312 8.00069L10.7964 10.0053C10.9913 10.2007 10.9909 10.5179 10.7957 10.7131C10.6005 10.908 10.2844 10.9074 10.0893 10.7124L8.08602 8.7078L6.08347 10.7103C5.88821 10.9056 5.57155 10.9057 5.37636 10.7103C5.18148 10.515 5.18132 10.1984 5.37636 10.0032L7.37891 8.00069L5.37636 5.99676C5.18119 5.80143 5.18181 5.48423 5.37705 5.28896Z",fill:"#767880"})]})}),n.quantity>1&&t("div",{className:"mini-cart-quantity bg-brand-0 laptop:size-4 absolute bottom-0 right-0 flex size-4  items-center justify-center rounded-full text-white",children:t(A,{className:"text-sm",html:String(n.quantity)})}),t("div",{className:e("laptop:flex absolute inset-0 hidden items-center justify-center rounded-lg bg-black/60 opacity-0 transition-opacity group-hover:opacity-100",g===n.id&&"hidden",o?.gridItemOverlay),children:t("button",{onClick:()=>N(n.id),className:"flex items-center justify-center rounded-full bg-white/20 p-1 transition-colors hover:bg-white/30","aria-label":"Remove item",children:t(at,{className:"laptop:size-3 pointer-events-none size-4 text-white"})})})]},n.id)})}),d.length>0&&t("button",{onClick:()=>T("right"),className:e("border-border laptop:flex hover:bg-muted-foreground/10 laptop:flex hidden size-12 shrink-0 items-center justify-center rounded-lg transition-colors",o?.expandButton),"aria-label":"Scroll right to see more items",children:t(v,{className:"size-4"})})]}):null,u=!O&&d.length>0;return t("div",{ref:V,className:e("bg-container-secondary-1 text-info-primary tablet:px-6 laptop:px-12 desktop:px-12 lg-desktop:px-[128px] laptop:py-[16px] flex w-full px-4 py-[12px]","flex-col items-stretch gap-3","laptop:flex-row laptop:items-center laptop:justify-around","laptop:items-center laptop:gap-4","tablet:gap-6 laptop:gap-8",D,o?.root,{"aiui-dark bg-container-primary":x==="dark"}),...E,children:r("div",{className:e("laptop:flex-row flex w-full flex-col gap-4","laptop:flex-1 laptop:items-start","tablet:gap-6 laptop:gap-8",o?.content),children:[r("div",{className:"laptop:flex-1 flex w-full flex-col",children:[t("div",{className:e("tablet:gap-2 flex flex-col gap-1",o?.cartInfo),children:u?r("div",{className:"flex w-full items-center gap-2",children:[t(p,{size:2,as:"h3",className:e("",o?.cartTitle),html:q.replace("{count}",`<span class="text-brand-0">${w||0}</span>`)}),r(p,{size:1,as:"h5",onClick:()=>{window.innerWidth<1025?K(!f):R?.(a)},className:e("flex cursor-pointer items-center gap-1",o?.expandButton),children:[t(p,{as:"h6",size:1,className:"laptop:block hidden text-nowrap",html:U}),t(v,{className:e("size-4 transition-transform",f?"laptop:rotate-0 -rotate-90":"laptop:rotate-0 rotate-90")})]})]}):t(p,{as:"h3",size:2,className:e("tablet:text-2xl text-xl font-semibold",o?.cartTitle),html:W})}),t("div",{children:b&&t(A,{size:2,className:e("mini-cart-description",o?.cartDescription),html:b})})]}),u&&t("div",{className:e("laptop:block",f?"block":"hidden"),children:st(x)}),u&&t("hr",{className:"laptop:hidden border-lines w-full border-t"}),r("div",{className:e("tablet:gap-6 laptop:justify-end flex flex-row items-center justify-between gap-4",o?.priceSection),children:[r("div",{className:"flex flex-col items-end justify-center gap-1",children:[r("div",{className:"flex items-center gap-2",children:[t(p,{as:"h6",size:2,className:e(" whitespace-nowrap ",o?.totalPrice),html:G.replace("{total}",J)}),C&&t(p,{as:"h6",size:2,className:e("whitespace-nowrap  line-through",o?.originalPrice),html:C})]}),y&&t(p,{size:2,as:"h6",className:e("laptop:text-right text-marketing-0 w-full text-left",o?.saveAmount),html:F.replace("{amount}",y)})]}),t(ct,{disabled:!u,loading:k,onClick:async()=>{if(!k){M(!0);try{await H?.(a)}finally{M(!1)}}},className:e("whitespace-nowrap",o?.actionButton),children:X})]})]})})});S.displayName="MiniCart";var ht=S;export{ht as default};
+"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import*as a from"react";import{cn as o}from"../../helpers/index.js";import{Button as vt}from"../../components/index.js";import{Text as y}from"../../components/index.js";import{Heading as m}from"../../components/index.js";import bt from"./CircleProgress.js";const V=a.forwardRef(({className:W,classNames:r={},data:q,cart:l,progressConfig:s,onRemoveItem:G,onCheckout:U,onClickToView:C,...X},F)=>{const{copy:p,theme:k="light",locale:wt="us",showMobileViewMore:O=!0}=q||{},Y=p?.emptyCart||"Your Cart is Empty",M=p?.description||"",Z=p?.itemsInCart||"You have selected {count} items",$=p?.total||"Total {total}",yt=p?.totalWithCoupon||"total: {total} ({subtotal})",L=p?.clickToView||"Click to view cart",J=p?.buyNowText||"Buy Now",K=p?.savingText||"Saving {amount}",d=a.useMemo(()=>l?.lineItems||[],[l?.lineItems]),S=d.reduce((e,n)=>e+(n?.quantity||0),0),Q=S===0,_=parseFloat(l?.cost?.totalAmount?.amount||"0"),tt=parseFloat(l?.cost?.subtotalAmount?.amount||"0"),et=parseFloat(l?.cost?.savingAmount?.amount||"0"),ot=l?.cost?.totalAmount?.formattedPrice||"",N=tt>_?l?.cost?.subtotalAmount?.formattedPrice:null,P=et>0?l?.cost?.savingAmount?.formattedPrice:null,c=a.useRef(null),[x,rt]=a.useState(!1),[I,z]=a.useState(!1),[T,A]=a.useState(null),B=async e=>{if(!T){A(e);try{await G?.(e,l)}finally{A(null)}}},[j,v]=a.useState(!1),[nt,at]=a.useState(0),[it,lt]=a.useState(0),[D,st]=a.useState(!1),[R,ct]=a.useState(!0),f=a.useCallback(()=>{const e=c.current;if(!e)return;const{scrollLeft:n,scrollWidth:u,clientWidth:h}=e;st(n>0),ct(n<u-h-1)},[]),pt=a.useCallback(()=>{f()},[f]);a.useEffect(()=>{f()},[d.length,f]);const dt=e=>{c.current&&(v(!0),at(e.pageX-c.current.offsetLeft),lt(c.current.scrollLeft))},ut=e=>{if(!j||!c.current)return;e.preventDefault();const u=(e.pageX-c.current.offsetLeft-nt)*1.5;c.current.scrollLeft=it-u},mt=()=>{v(!1)},gt=()=>{v(!1)},E=e=>{if(c.current){const n=c.current,u=100;n.scrollBy({left:e==="right"?u:-u,behavior:"smooth"})}},b=({className:e})=>t("svg",{className:e,width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M6 4L10 8L6 12",stroke:"currentColor",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"})}),ft=({className:e})=>t("svg",{className:e,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M2.5 5H17.5M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667M3.33333 5L4.16667 16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667L16.6667 5M7.5 5V2.5C7.5 2.27899 7.5878 2.06702 7.74408 1.91074C7.90036 1.75446 8.11232 1.66667 8.33333 1.66667H11.6667C11.8877 1.66667 12.0996 1.75446 12.2559 1.91074C12.4122 2.06702 12.5 2.27899 12.5 2.5V5",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round"})}),ht=e=>d.length?i("div",{className:o("laptop:bg-container-secondary-0 flex gap-1 rounded-lg p-1",r?.itemsGrid),children:[d.length>=5&&t("button",{onClick:()=>E("left"),className:o("border-border laptop:flex hover:bg-muted-foreground/10 hidden w-[32px] shrink-0 items-center justify-center rounded-lg px-2 transition-colors",!D&&"laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-ml-1 laptop:py-1 laptop:pl-1 laptop:rounded-r-none",r?.expandButton,{"laptop:bg-container-secondary-0":e==="dark","laptop:bg-container-primary":e==="dark"&&!D}),"aria-label":"Scroll left to see more items",children:t(b,{className:"laptop:size-4 size-5 rotate-180"})}),i("div",{ref:c,onMouseDown:dt,onMouseMove:ut,onMouseUp:mt,onMouseLeave:gt,onScroll:pt,className:o("scrollbar-hide laptop:gap-1 laptop:w-[256px] laptop:shrink-0 flex w-full gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",j?"cursor-grabbing":"cursor-grab",r?.itemGridContainer),children:[d.filter(n=>n&&n.id).map(n=>{const h=(n.merchandise||{}).image||{},H=h.url,xt=h.altText||"Product image",w=T===n.id;return i("div",{className:o("laptop:size-12 group relative size-16 shrink-0",r?.gridItem),children:[H&&t("img",{src:H,alt:xt,draggable:!1,className:"pointer-events-none size-full select-none rounded-lg object-cover"}),w&&t("div",{className:"absolute inset-0 flex items-center justify-center rounded-lg bg-black/50",children:i("svg",{width:"20",height:"20",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"animate-spin text-white",children:[t("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2",opacity:"0.3"}),t("path",{d:"M14 8a6 6 0 0 0-6-6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}),t("span",{role:"button",onClick:()=>B(n.id),className:o("laptop:hidden absolute right-[2px] top-[2px] cursor-pointer",w&&"pointer-events-none opacity-0"),"aria-label":"delete",children:i("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"pointer-events-none",children:[t("rect",{x:"1.33301",y:"1.33301",width:"13.3333",height:"13.3333",rx:"6.66667",fill:"white"}),t("path",{d:"M5.37705 5.28896C5.57234 5.09402 5.88839 5.09442 6.08347 5.28965L8.08602 7.29358L10.0906 5.28896C10.2858 5.09402 10.6026 5.09395 10.7977 5.28896C10.9928 5.48418 10.9926 5.80078 10.7977 5.99607L8.79312 8.00069L10.7964 10.0053C10.9913 10.2007 10.9909 10.5179 10.7957 10.7131C10.6005 10.908 10.2844 10.9074 10.0893 10.7124L8.08602 8.7078L6.08347 10.7103C5.88821 10.9056 5.57155 10.9057 5.37636 10.7103C5.18148 10.515 5.18132 10.1984 5.37636 10.0032L7.37891 8.00069L5.37636 5.99676C5.18119 5.80143 5.18181 5.48423 5.37705 5.28896Z",fill:"#767880"})]})}),n.quantity>1&&t("div",{className:"mini-cart-quantity bg-brand-0 laptop:size-4 absolute bottom-0 right-0 flex size-4  items-center justify-center rounded-full text-white",children:t(y,{className:"text-sm",html:String(n.quantity)})}),t("div",{role:"button",onClick:()=>B(n.id),className:o("absolute inset-0 hidden cursor-pointer items-center justify-center rounded-lg bg-black/60 transition-opacity","laptop:flex laptop:opacity-0 laptop:group-hover:opacity-100",w&&"laptop:hidden",r?.gridItemOverlay),"aria-label":"Remove item",children:t(ft,{className:"pointer-events-none size-[20px] text-white"})})]},n.id)}),O&&t("button",{onClick:()=>C?.(l),className:o("bg-container-secondary-0 laptop:hidden flex size-16 shrink-0 items-center justify-center rounded-md",r?.mobileViewMoreButton),"aria-label":L,children:t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-quaternary",children:t("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),d.length>=5&&t("button",{onClick:()=>E("right"),className:o("border-border laptop:flex hover:bg-muted-foreground/10 hidden w-[32px] shrink-0 items-center justify-center rounded-lg px-2 transition-colors",!R&&"laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-mr-1 laptop:py-1 laptop:pr-1 laptop:rounded-l-none",r?.expandButton,{"laptop:bg-container-secondary-0":e==="dark","laptop:bg-container-primary":e==="dark"&&!R}),"aria-label":"Scroll right to see more items",children:t(b,{className:"laptop:size-4 size-5"})})]}):null,g=!Q&&d.length>0;return t("div",{ref:F,className:o("bg-container-secondary-1 text-info-primary tablet:px-6 laptop:px-12 desktop:px-12 lg-desktop:px-[128px] laptop:py-[16px] flex w-full px-4 py-[12px]","flex-col items-stretch gap-3","laptop:flex-row laptop:items-center laptop:justify-around","laptop:items-center laptop:gap-4","tablet:gap-6 laptop:gap-8",W,r?.root,{"aiui-dark bg-container-primary":k==="dark"}),...X,children:i("div",{className:o("laptop:flex-row flex w-full flex-col gap-4","laptop:flex-1 laptop:items-center laptop:justify-between","tablet:gap-6 laptop:gap-8",r?.content),children:[i("div",{className:o("relative flex shrink flex-row items-center gap-2","desktop:gap-4",s&&"laptop:pl-[104px] pl-[72px]"),children:[s&&t(bt,{totalSteps:s.totalSteps,currentStep:s.currentStep,image:s.image,label:s.label,progressColor:s.progressColor,labelColor:s.labelColor,backgroundColor:s.backgroundColor,size:s.size,laptopSize:s.laptopSize,className:o("absolute bottom-0 left-0","lg-desktop:bottom-auto lg-desktop:top-[-46px] desktop:bottom-auto desktop:top-[-52px]",r?.circleProgress)}),i("div",{className:"laptop:flex-1 flex w-full flex-col",children:[t("div",{className:o("tablet:gap-2 flex flex-col gap-1",r?.cartInfo),children:g?i("div",{className:"flex w-full items-center gap-2",children:[t(m,{size:2,as:"h3",className:o("",r?.cartTitle),html:Z.replace("{count}",`<span class="text-brand-0">${S||0}</span>`)}),i(m,{size:1,as:"h5",onClick:()=>{window.innerWidth<1025?rt(!x):C?.(l)},className:o("flex cursor-pointer items-center gap-1",r?.expandButton),children:[t(y,{as:"span",size:1,className:"desktop:block hidden text-nowrap text-[16px] ",html:L}),t(b,{className:o("size-4 transition-transform",x?"laptop:rotate-0 -rotate-90":"laptop:rotate-0 rotate-90")})]})]}):t(m,{as:"h3",size:2,className:o("tablet:text-2xl text-xl font-semibold",r?.cartTitle),html:Y})}),M&&t(y,{size:2,className:o("mini-cart-description text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",r?.cartDescription),html:M})]})]}),g&&t("div",{className:o("laptop:block laptop:shrink",x?"block":"hidden"),children:ht(k)}),g&&t("hr",{className:"laptop:hidden border-lines w-full border-t"}),i("div",{className:o("tablet:gap-6 laptop:gap-4 laptop:justify-end flex flex-row items-stretch justify-between gap-4",r?.priceSection),children:[i("div",{className:"flex flex-col items-end justify-center",children:[i("div",{className:"flex items-center gap-2",children:[t(m,{as:"h6",size:2,className:o("whitespace-nowrap text-nowrap",r?.totalPrice),html:$.replace("{total}",ot)}),N&&t(m,{as:"h6",size:2,className:o("text-info-tertiary  whitespace-nowrap line-through",r?.originalPrice),html:N})]}),P&&t(m,{size:2,as:"h6",className:o("laptop:text-right text-marketing-1 w-full whitespace-nowrap text-nowrap text-left",r?.saveAmount),html:K.replace("{amount}",P)})]}),t(vt,{disabled:!g,loading:I,onClick:async()=>{if(!I){z(!0);try{await U?.(l)}finally{z(!1)}}},className:o("whitespace-nowrap",r?.actionButton),children:J})]})]})})});V.displayName="MiniCart";var Nt=V;export{Nt as default};
 //# sourceMappingURL=index.js.map