@anker-in/headless-ui 1.1.74 → 1.1.76

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GiftShelf/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Button, Container, Heading } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { GiftShelfProps, GiftShelfItem, CountdownConfig, ResponsiveBackgroundImage } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Product, ProductVariant } from '../Listing/types/product.js'\nimport { formatVariantPrice } from '../Listing/utils/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { replaceTemplate } from '../Listing/utils/textFormat.js'\nimport type { GiftShelfProduct } from './types.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * Card style variants for gift shelf\n */\nconst giftCardVariants = cva('desktop:px-6 rounded-card relative min-w-0 overflow-hidden p-4', {\n  variants: {\n    state: {\n      light: 'bg-[#EAEAEC]',\n      dark: 'bg-[#1E2024]',\n    },\n  },\n  defaultVariants: {\n    state: 'light',\n  },\n})\n\n/**\n * Content layout variants - \u63A7\u5236 Background image \u548C Bottom info area \u7684\u5E03\u5C40\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst contentLayoutVariants = cva('', {\n  variants: {\n    layout: {\n      vertical: '',\n      horizontal: 'desktop:flex desktop:flex-row desktop:items-stretch desktop:gap-10',\n    },\n  },\n  defaultVariants: {\n    layout: 'vertical',\n  },\n})\n\n/**\n * Image area variants\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst imageAreaVariants = cva(\n  'desktop:max-w-[268px] lg-desktop:max-w-[356px] lg-desktop:h-[171px] relative mx-auto h-[118px] max-w-[256px] ',\n  {\n    variants: {\n      layout: {\n        vertical: '',\n        horizontal: 'desktop:flex-1 desktop:h-[122px] lg-desktop:h-[161px]',\n      },\n    },\n    defaultVariants: {\n      layout: 'vertical',\n    },\n  }\n)\n\n/**\n * Info area variants\n * horizontal \u5E03\u5C40\u4EC5\u5728 desktop (\u22651440px) \u65AD\u70B9\u751F\u6548\n */\nconst infoAreaVariants = cva('mt-3', {\n  variants: {\n    layout: {\n      vertical: '',\n      horizontal: 'desktop:mt-0 desktop:flex-1 desktop:flex desktop:flex-col desktop:justify-center',\n    },\n  },\n  defaultVariants: {\n    layout: 'vertical',\n  },\n})\n\n/**\n * Button style variants\n */\nconst buttonVariants = cva('mt-4 self-start', {\n  variants: {\n    state: {\n      light: 'bg-[#080A0F] text-white',\n      dark: 'bg-white text-[#080A0F]',\n    },\n  },\n  defaultVariants: {\n    state: 'light',\n  },\n})\n\n/**\n * Text style variants\n */\nconst textVariants = cva('', {\n  variants: {\n    state: {\n      light: 'text-[#080A0F]',\n      dark: 'text-white',\n    },\n  },\n  defaultVariants: {\n    state: 'light',\n  },\n})\n\n/**\n * Convert ResponsiveBackgroundImage to Picture source string\n * Format: \"url1 1920, url2 1439, url3 1024, url4 767, url5\"\n */\nconst getResponsiveSource = (bgImage?: ResponsiveBackgroundImage): string | undefined => {\n  if (!bgImage) return undefined\n\n  const sources: string[] = []\n\n  // lg-desktop: \u22651920px\n  if (bgImage.lgDesktop?.url) {\n    sources.push(`${bgImage.lgDesktop.url} 1920`)\n  }\n  // desktop: \u22651440px\n  if (bgImage.desktop?.url) {\n    sources.push(`${bgImage.desktop.url} 1439`)\n  }\n  // laptop: \u22651025px\n  if (bgImage.laptop?.url) {\n    sources.push(`${bgImage.laptop.url} 1024`)\n  }\n  // tablet: \u2265768px\n  if (bgImage.tablet?.url) {\n    sources.push(`${bgImage.tablet.url} 767`)\n  }\n  // default (mobile): <768px\n  if (bgImage.default?.url) {\n    sources.push(bgImage.default.url)\n  }\n\n  return sources.length > 0 ? sources.join(', ') : undefined\n}\n\n/**\n * Get alt text from ResponsiveBackgroundImage\n */\nconst getBackgroundAlt = (bgImage?: ResponsiveBackgroundImage): string => {\n  if (!bgImage) return ''\n  return (\n    bgImage.default?.alt ||\n    bgImage.tablet?.alt ||\n    bgImage.laptop?.alt ||\n    bgImage.desktop?.alt ||\n    bgImage.lgDesktop?.alt ||\n    ''\n  )\n}\n\n/**\n * Format countdown time\n */\nconst formatTime = (seconds: number) => {\n  const hours = Math.floor(seconds / 3600)\n  const minutes = Math.floor((seconds % 3600) / 60)\n  const secs = seconds % 60\n  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`\n}\n\n/**\n * \u89E3\u6790\u5F00\u59CB\u65F6\u95F4\uFF0C\u652F\u6301 ISO 8601 \u5B57\u7B26\u4E32\u6216\u65F6\u95F4\u6233\n */\nconst parseStartTime = (startTime: string | number): number => {\n  if (typeof startTime === 'number') {\n    return startTime\n  }\n  // \u89E3\u6790 ISO 8601 \u5B57\u7B26\u4E32\n  const parsed = new Date(startTime).getTime()\n  return isNaN(parsed) ? 0 : parsed\n}\n\n/**\n * \u8BA1\u7B97\u5F53\u524D\u662F\u5426\u5904\u4E8E\u8F6E\u6B21\u5207\u6362\u671F\uFF08\u4E0B\u4E00\u8F6E\u5F00\u59CB\u524D5\u5206\u949F\uFF09\n * @param countdown \u5012\u8BA1\u65F6\u914D\u7F6E\n * @returns \u662F\u5426\u5904\u4E8E\u5207\u6362\u671F\n */\nconst isInTransitionPeriod = (countdown?: CountdownConfig): boolean => {\n  if (!countdown) return false\n  const startTimeMs = parseStartTime(countdown.startTime)\n  const durationMs = (countdown.durationDays ?? 1) * 24 * 3600 * 1000\n  const rounds = countdown.rounds ?? 1\n  const now = Date.now()\n\n  // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\n  if (now < startTimeMs) return false\n\n  // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\n  const elapsed = now - startTimeMs\n  const currentRound = Math.floor(elapsed / durationMs) + 1\n\n  // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\n  if (currentRound > rounds) return false\n\n  // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u7ED3\u675F\u65F6\u95F4\n  const currentRoundEndTime = startTimeMs + currentRound * durationMs\n\n  // \u8DDD\u79BB\u5F53\u524D\u8F6E\u6B21\u7ED3\u675F\u7684\u65F6\u95F4\n  const timeUntilRoundEnd = currentRoundEndTime - now\n\n  // \u5982\u679C\u8DDD\u79BB\u7ED3\u675F\u4E0D\u52305\u5206\u949F\uFF0C\u5904\u4E8E\u5207\u6362\u671F\n  const TRANSITION_PERIOD_MS = 5 * 60 * 1000 // 5\u5206\u949F\n  return timeUntilRoundEnd <= TRANSITION_PERIOD_MS && timeUntilRoundEnd > 0\n}\n\n/**\n * \u6839\u636E\u5012\u8BA1\u65F6\u914D\u7F6E\u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684 Code\n * @param codePrefix Code \u524D\u7F00\n * @param countdown \u5012\u8BA1\u65F6\u914D\u7F6E\n * @returns \u5B8C\u6574\u7684 Code\uFF08\u524D\u7F00 + MMDD \u540E\u7F00\uFF09\n * @description \u7EDF\u4E00\u4F7F\u7528 UTC \u65F6\u95F4\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5168\u7403\u4EFB\u4F55\u65F6\u533A\u5F97\u5230\u76F8\u540C\u7684 code\n */\nconst getCodeWithSuffix = (codePrefix?: string, countdown?: CountdownConfig): string => {\n  if (!codePrefix || !countdown) return codePrefix || ''\n\n  const startTimeMs = parseStartTime(countdown.startTime)\n  const durationMs = (countdown.durationDays ?? 1) * 24 * 3600 * 1000\n  const rounds = countdown.rounds ?? 1\n  const now = Date.now()\n\n  // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\uFF0C\u4F7F\u7528\u7B2C\u4E00\u8F6E\u7684\u65E5\u671F\uFF08UTC \u65F6\u95F4\uFF09\n  if (now < startTimeMs) {\n    const date = new Date(startTimeMs)\n    const suffix = `${(date.getUTCMonth() + 1).toString().padStart(2, '0')}${date.getUTCDate().toString().padStart(2, '0')}`\n    return `${codePrefix}${suffix}`\n  }\n\n  // \u8BA1\u7B97\u5F53\u524D\u5904\u4E8E\u7B2C\u51E0\u8F6E\uFF08\u4ECE 1 \u5F00\u59CB\uFF09\n  const elapsed = now - startTimeMs\n  const currentRound = Math.min(Math.floor(elapsed / durationMs) + 1, rounds)\n\n  // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u5F00\u59CB\u65E5\u671F\n  const currentRoundStartMs = startTimeMs + (currentRound - 1) * durationMs\n  const date = new Date(currentRoundStartMs)\n\n  // \u683C\u5F0F\u5316\u4E3A MMDD\uFF08\u4F7F\u7528 UTC \u65F6\u95F4\uFF09\n  const suffix = `${(date.getUTCMonth() + 1).toString().padStart(2, '0')}${date.getUTCDate().toString().padStart(2, '0')}`\n\n  return `${codePrefix}${suffix}`\n}\n\n/**\n * \u5012\u8BA1\u65F6\u72B6\u6001\u7C7B\u578B\n */\ntype CountdownState = 'beforeStart' | 'running' | 'lastRound' | 'finished'\n\n/**\n * Countdown Component\n * \u652F\u6301\u591A\u8F6E\u5012\u8BA1\u65F6\uFF0C\u663E\u793A\u4E0D\u540C\u72B6\u6001\u7684\u6807\u7B7E\n */\nconst Countdown = React.memo(\n  ({\n    config,\n    theme = 'light',\n    className,\n    countdownText = 'Next round start time',\n    lastRoundText = 'Last round',\n    beforeStartText = 'Start time',\n    countdownIcon,\n    onStateChange,\n  }: {\n    config: CountdownConfig\n    theme?: 'light' | 'dark'\n    className?: string\n    countdownText?: string\n    lastRoundText?: string\n    beforeStartText?: string\n    countdownIcon?: Media\n    onStateChange?: (state: CountdownState) => void\n  }) => {\n    const [timeLeft, setTimeLeft] = React.useState(0)\n    const [countdownState, setCountdownState] = React.useState<CountdownState>('beforeStart')\n\n    // \u89E3\u6790\u5F00\u59CB\u65F6\u95F4\u4E3A\u65F6\u95F4\u6233\n    const startTimeMs = React.useMemo(() => parseStartTime(config.startTime), [config.startTime])\n\n    const rounds = config.rounds ?? 1\n    // \u9ED8\u8BA4 1 \u5929\uFF0C\u8F6C\u6362\u4E3A\u6BEB\u79D2 (1\u5929 = 24\u5C0F\u65F6 = 86400\u79D2 = 86400000\u6BEB\u79D2)\n    const durationMs = (config.durationDays ?? 1) * 24 * 3600 * 1000\n\n    React.useEffect(() => {\n      const calculateCountdown = () => {\n        const now = Date.now()\n\n        // \u672A\u5230\u5F00\u59CB\u65F6\u95F4\uFF0C\u663E\u793A\u5F00\u59CB\u524D\u5012\u8BA1\u65F6\n        if (now < startTimeMs) {\n          const diff = Math.max(0, Math.floor((startTimeMs - now) / 1000))\n          setTimeLeft(diff)\n          setCountdownState('beforeStart')\n          return\n        }\n\n        // \u8BA1\u7B97\u5DF2\u7ECF\u8FC7\u53BB\u7684\u65F6\u95F4\n        const elapsed = now - startTimeMs\n        // \u8BA1\u7B97\u5F53\u524D\u5904\u4E8E\u7B2C\u51E0\u8F6E\uFF08\u4ECE 1 \u5F00\u59CB\uFF09\n        const currentRound = Math.floor(elapsed / durationMs) + 1\n\n        // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\n        if (currentRound > rounds) {\n          setCountdownState('finished')\n          return\n        }\n\n        // \u8BA1\u7B97\u5F53\u524D\u8F6E\u6B21\u7684\u76EE\u6807\u65F6\u95F4\n        const currentRoundTargetTime = startTimeMs + currentRound * durationMs\n        // \u8BA1\u7B97\u5269\u4F59\u79D2\u6570\n        const diff = Math.max(0, Math.floor((currentRoundTargetTime - now) / 1000))\n\n        setTimeLeft(diff)\n        // \u5224\u65AD\u662F\u5426\u662F\u6700\u540E\u4E00\u8F6E\n        setCountdownState(currentRound === rounds ? 'lastRound' : 'running')\n      }\n\n      calculateCountdown()\n      const timer = setInterval(calculateCountdown, 1000)\n\n      return () => clearInterval(timer)\n    }, [startTimeMs, durationMs, rounds])\n\n    // \u901A\u77E5\u7236\u7EC4\u4EF6\u72B6\u6001\u53D8\u5316\n    React.useEffect(() => {\n      onStateChange?.(countdownState)\n    }, [countdownState, onStateChange])\n\n    // \u6839\u636E\u72B6\u6001\u83B7\u53D6\u663E\u793A\u7684\u6807\u7B7E\u6587\u672C\n    const labelText = React.useMemo(() => {\n      switch (countdownState) {\n        case 'beforeStart':\n          return beforeStartText\n        case 'lastRound':\n          return lastRoundText\n        default:\n          return countdownText\n      }\n    }, [countdownState, beforeStartText, lastRoundText, countdownText])\n\n    // \u6240\u6709\u8F6E\u6B21\u5DF2\u7ED3\u675F\uFF0C\u4E0D\u6E32\u67D3\n    if (countdownState === 'finished') {\n      return null\n    }\n\n    return (\n      <div\n        className={cn(\n          'desktop:gap-2 laptop:text-base flex items-center gap-1 text-sm',\n          theme === 'dark' ? 'text-white' : 'text-[#080A0F]',\n          className\n        )}\n      >\n        {countdownIcon && (\n          <Picture\n            source={countdownIcon.url}\n            alt={countdownIcon.alt}\n            className=\"laptop:size-5 size-4 shrink-0\"\n            imgClassName=\"size-full object-contain\"\n          />\n        )}\n        <Text html={labelText} className=\"whitespace-nowrap font-bold\" />\n        <span className=\"font-bold\">|</span>\n        <Text className=\"font-bold\" html={formatTime(timeLeft)} />\n      </div>\n    )\n  }\n)\n\nCountdown.displayName = 'Countdown'\n\n/**\n * Progress Bar Component\n */\nconst ProgressBar = React.memo(\n  ({ progress, theme = 'light', className }: { progress: number; theme?: 'light' | 'dark'; className?: string }) => {\n    // Clamp progress between 0 and 100\n    const clampedProgress = Math.min(100, Math.max(0, progress))\n\n    return (\n      <div\n        className={cn(\n          'flex h-2 w-full items-stretch overflow-hidden rounded-full',\n          theme === 'dark' ? 'bg-white/20' : 'bg-black/20',\n          className\n        )}\n        role=\"progressbar\"\n        aria-valuenow={clampedProgress}\n        aria-valuemin={0}\n        aria-valuemax={100}\n      >\n        <div\n          className={cn(\n            'h-full rounded-full transition-all duration-300',\n            theme === 'dark' ? 'bg-white' : 'bg-[#080A0F]'\n          )}\n          style={{ width: `${clampedProgress}%` }}\n        />\n      </div>\n    )\n  }\n)\n\nProgressBar.displayName = 'ProgressBar'\n\n/**\n * Gift Shelf Card Component\n */\nconst GiftShelfCard = React.memo(\n  ({\n    item,\n    theme = 'light',\n    layout = 'vertical',\n    className,\n    buttonClassName,\n    countdownClassName,\n    onButtonClick,\n    buildData,\n    buttonText,\n    remainText,\n    lowStockText,\n    soldOutButtonText,\n    discountText = 'Only {price}',\n    countdownText,\n    countdownIcon,\n    lastRoundText,\n    beforeStartText,\n    comingSoonButtonText,\n    loading,\n  }: {\n    item: GiftShelfItem\n    theme?: 'light' | 'dark'\n    layout?: 'vertical' | 'horizontal'\n    className?: string\n    buttonClassName?: string\n    countdownClassName?: string\n    onButtonClick?: ({ product, code }: { product: GiftShelfProduct; code: string }) => void\n    buildData?: {\n      products: Product[]\n    }\n    buttonText: string\n    remainText?: string\n    lowStockText?: string\n    soldOutButtonText?: string\n    discountText?: string\n    countdownText?: string\n    countdownIcon?: Media\n    lastRoundText?: string\n    beforeStartText?: string\n    comingSoonButtonText?: string\n    loading?: boolean\n  }) => {\n    const { locale = 'us' } = useAiuiContext()\n    // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u4EA7\u54C1\u7684\u7B80\u5316\u6570\u636E\n    const firstProduct = item.products?.[0]\n\n    // \u68C0\u6D4B\u662F\u5426\u5904\u4E8E\u8F6E\u6B21\u5207\u6362\u671F + \u5F53\u524D\u8F6E\u6B21 code\uFF08\u6BCF\u79D2\u66F4\u65B0\uFF09\n    const [isTransitioning, setIsTransitioning] = React.useState(() => isInTransitionPeriod(item.countdown))\n    const [currentCode, setCurrentCode] = React.useState(() => getCodeWithSuffix(item.codePrefix, item.countdown))\n    // \u5012\u8BA1\u65F6\u72B6\u6001\n    const [countdownState, setCountdownState] = React.useState<CountdownState>('beforeStart')\n\n    React.useEffect(() => {\n      const checkAndUpdate = () => {\n        // \u66F4\u65B0\u8F6E\u6B21\u5207\u6362\u72B6\u6001\n        setIsTransitioning(isInTransitionPeriod(item.countdown))\n        // \u66F4\u65B0\u5F53\u524D\u8F6E\u6B21 code\uFF08\u4EC5\u5728\u503C\u53D8\u5316\u65F6\u66F4\u65B0\uFF09\n        const newCode = getCodeWithSuffix(item.codePrefix, item.countdown)\n        setCurrentCode(prev => (prev !== newCode ? newCode : prev))\n      }\n\n      // \u521D\u59CB\u68C0\u67E5\n      checkAndUpdate()\n      // \u6BCF\u79D2\u68C0\u67E5\u4E00\u6B21\n      const timer = setInterval(checkAndUpdate, 1000)\n\n      return () => clearInterval(timer)\n    }, [item.codePrefix, item.countdown])\n\n    // \u5012\u8BA1\u65F6\u72B6\u6001\u53D8\u5316\u56DE\u8C03\n    const handleCountdownStateChange = React.useCallback((state: CountdownState) => {\n      setCountdownState(state)\n    }, [])\n\n    // \u901A\u8FC7 handle \u5339\u914D buildData \u4E2D\u7684\u5B8C\u6574\u4EA7\u54C1\u6570\u636E\n    const fullProduct = React.useMemo(() => {\n      if (!firstProduct?.handle || !buildData?.products?.length) return null\n      return buildData.products.find(p => p.handle === firstProduct.handle) || null\n    }, [firstProduct?.handle, buildData?.products])\n\n    const fullProductVariant = React.useMemo(\n      () => fullProduct?.variants?.find(variant => variant?.sku === firstProduct?.sku) || ({} as ProductVariant),\n      [firstProduct?.sku, fullProduct?.variants]\n    )\n\n    // \u7EC4\u5408\u5C55\u793A\u6570\u636E\uFF08\u4F18\u5148\u4F7F\u7528\u8BE6\u7EC6\u6570\u636E\uFF0C\u56DE\u9000\u5230\u7B80\u5316\u6570\u636E\uFF09\n    const displayData = React.useMemo(() => {\n      const { price, basePrice } = formatVariantPrice({\n        locale: locale || 'us',\n        baseAmount: fullProductVariant?.price?.amount,\n        amount: firstProduct?.custom_price ?? fullProductVariant?.price?.amount,\n        currencyCode: fullProduct?.price?.currencyCode || 'USD',\n      })\n\n      return {\n        // \u4E3B\u4EF7\u683C/\u4EF7\u503C\u5C55\u793A\uFF1A\u6709\u8BE6\u7EC6\u6570\u636E\u65F6\u663E\u793A\u4EF7\u683C\uFF0C\u5426\u5219\u663E\u793A\u4EA7\u54C1\u540D\n        value: basePrice,\n        // \u4EA7\u54C1\u63CF\u8FF0/\u6807\u9898\uFF1A\u6709\u8BE6\u7EC6\u6570\u636E\u65F6\u663E\u793A\u6807\u9898\uFF0C\u5426\u5219\u4E3A\u7A7A\uFF08\u907F\u514D\u91CD\u590D\u663E\u793A\uFF09\n        description: firstProduct?.custom_description,\n        // \u4F18\u60E0\u4EF7\u683C\n        salePrice: replaceTemplate(discountText || '', {\n          price,\n        }),\n      }\n    }, [\n      fullProduct,\n      fullProductVariant,\n      locale,\n      discountText,\n      firstProduct?.custom_price,\n      firstProduct?.custom_description,\n    ])\n\n    const handleClick = React.useCallback(() => {\n      onButtonClick?.({ product: firstProduct, code: currentCode })\n    }, [onButtonClick, currentCode, firstProduct])\n\n    return (\n      <div className={cn(giftCardVariants({ state: theme }), className)} data-ui-component-id=\"GiftShelfCard\">\n        {/* Countdown section - above the card content (only in vertical layout) */}\n        {item.countdown && (\n          <div className=\"laptop:h-[24px] mb-4 h-[20px]\">\n            <Countdown\n              config={item.countdown}\n              theme={theme}\n              className={countdownClassName}\n              countdownText={countdownText}\n              lastRoundText={lastRoundText}\n              beforeStartText={beforeStartText}\n              countdownIcon={countdownIcon}\n              onStateChange={handleCountdownStateChange}\n            />\n          </div>\n        )}\n\n        {/* Content layout wrapper - \u63A7\u5236 Background image \u548C Bottom info area \u7684\u5E03\u5C40 */}\n        <div className={contentLayoutVariants({ layout })}>\n          {/* Background image - responsive across 5 breakpoints */}\n          <div className={imageAreaVariants({ layout })}>\n            {item.backgroundImage && (\n              <Picture\n                source={getResponsiveSource(item.backgroundImage)}\n                alt={getBackgroundAlt(item.backgroundImage)}\n                className=\"rounded-card size-full overflow-hidden object-cover\"\n                imgClassName=\"h-full w-full object-cover\"\n              />\n            )}\n            {/* Card content area */}\n            <div className=\"absolute top-1/2 z-10 w-full -translate-y-1/2 px-6\">\n              {/* Value and description */}\n              <div className=\"flex flex-col gap-1\">\n                {/* Main value display */}\n                {displayData.value && (\n                  <Heading\n                    html={displayData.value}\n                    size={4}\n                    className={cn('font-bold leading-none', textVariants({ state: theme }))}\n                  />\n                )}\n\n                {/* Description */}\n                {displayData.description && (\n                  <Text\n                    html={displayData.description}\n                    className={cn('text-base font-bold opacity-60', textVariants({ state: theme }))}\n                  />\n                )}\n              </div>\n            </div>\n          </div>\n\n          {/* Bottom/Right info area */}\n          <div className={infoAreaVariants({ layout })}>\n            {/* Sale price */}\n            {displayData.salePrice && (\n              <Text\n                as=\"p\"\n                html={displayData.salePrice}\n                className={cn('lg-desktop:text-2xl text-xl font-bold', textVariants({ state: theme }))}\n              />\n            )}\n\n            {/* Progress bar - \u8D85\u5356\u65F6\u9690\u85CF\uFF08availableForSale=true \u4E14 quantityAvailable<=0\uFF09 */}\n            <ProgressBar\n              progress={\n                firstProduct?.custom_inventory\n                  ? ((fullProductVariant?.quantityAvailable || 0) / firstProduct.custom_inventory) * 100\n                  : 0\n              }\n              theme={theme}\n              className={cn(\n                'mb-1 mt-2',\n                fullProductVariant?.availableForSale && (fullProductVariant?.quantityAvailable ?? 0) <= 0 && 'invisible'\n              )}\n            />\n\n            {/* Remain text - \u6B63\u5E38\u5E93\u5B58\u63D0\u793A */}\n            {remainText && (fullProductVariant?.quantityAvailable ?? 0) >= 0 && (\n              <Text\n                html={replaceTemplate(remainText, {\n                  inventory: firstProduct?.custom_inventory?.toString() || '',\n                  quantity: fullProductVariant?.quantityAvailable?.toString() || '0',\n                })}\n                as=\"p\"\n                className={cn('laptop:text-base text-sm font-bold', textVariants({ state: theme }))}\n              />\n            )}\n\n            {/* Low stock text - \u652F\u6301\u8D85\u5356\u65F6\u663E\u793A\uFF08availableForSale=true \u4F46 quantityAvailable<=0\uFF09 */}\n            {lowStockText &&\n              fullProductVariant?.availableForSale &&\n              (fullProductVariant?.quantityAvailable ?? 0) < 0 && (\n                <Text\n                  html={lowStockText}\n                  as=\"p\"\n                  className={cn('laptop:text-base text-sm font-bold text-red-500', textVariants({ state: theme }))}\n                />\n              )}\n\n            {/* Action button */}\n            <Button\n              size=\"lg\"\n              className={cn(buttonVariants({ state: theme }), buttonClassName)}\n              onClick={handleClick}\n              disabled={\n                !fullProductVariant?.availableForSale ||\n                loading ||\n                isTransitioning ||\n                countdownState === 'beforeStart' ||\n                countdownState === 'finished'\n              }\n              loading={loading && fullProductVariant?.availableForSale}\n            >\n              {countdownState === 'beforeStart'\n                ? comingSoonButtonText || buttonText\n                : fullProductVariant?.availableForSale\n                  ? buttonText\n                  : soldOutButtonText || buttonText}\n            </Button>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nGiftShelfCard.displayName = 'GiftShelfCard'\n\n/**\n * GiftShelf - Gift/Promotion Shelf Component\n *\n * @description Display gift cards with countdown, pricing, and purchase buttons\n */\nconst GiftShelf = React.forwardRef<HTMLDivElement, GiftShelfProps>(\n  ({ classNames = {}, data, onButtonClick, buildData, loading, ...rest }, ref) => {\n    const theme = data.theme || 'light'\n\n    const itemsPerRow = React.useMemo(() => {\n      return data?.items?.length || 4\n    }, [data?.items])\n\n    // \u5F53\u5361\u7247\u6570\u91CF\u4E3A 2 \u65F6\u4F7F\u7528\u6C34\u5E73\u5E03\u5C40\uFF0C\u5426\u5219\u4F7F\u7528\u5782\u76F4\u5E03\u5C40\n    const cardLayout = itemsPerRow === 2 ? 'horizontal' : 'vertical'\n\n    const swiperBreakpoints = React.useMemo(() => {\n      const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n        switch (breakpoint) {\n          case 'mobile':\n            return { slidesPerView: 1.2, spaceBetween: 12 }\n          case 'tablet':\n            if (itemsPerRow <= 2) return { slidesPerView: 2, spaceBetween: 12 }\n            return { slidesPerView: 2.5, spaceBetween: 12 }\n          case 'laptop':\n            if (itemsPerRow <= 3) return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n            return { slidesPerView: 3.01, spaceBetween: 16 }\n          case 'desktop':\n            return { slidesPerView: Math.min(itemsPerRow, 4), spaceBetween: 20 }\n        }\n      }\n\n      return {\n        0: getBreakpointConfig('mobile'),\n        768: getBreakpointConfig('tablet'),\n        1025: getBreakpointConfig('laptop'),\n        1440: getBreakpointConfig('desktop'),\n      }\n    }, [itemsPerRow])\n\n    return (\n      <Container\n        ref={ref}\n        className={cn(classNames?.root)}\n        childClassName=\"overflow-hidden\"\n        data-ui-component-id=\"GiftShelf\"\n        {...rest}\n      >\n        {/* Cards swiper */}\n        <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n          {data.items.map((item, index) => (\n            <SwiperSlide key={'giftShelfCardItem' + index}>\n              <GiftShelfCard\n                item={item}\n                theme={theme}\n                layout={cardLayout}\n                className={classNames?.card}\n                buttonClassName={classNames?.button}\n                countdownClassName={classNames?.countdown}\n                onButtonClick={onButtonClick}\n                buildData={buildData}\n                buttonText={data.buttonText}\n                discountText={data.discountText}\n                remainText={data.remainText}\n                lowStockText={data.lowStockText}\n                soldOutButtonText={data.soldOutButtonText}\n                countdownText={data.countdownText}\n                lastRoundText={data.lastRoundText}\n                countdownIcon={data?.countdownIcon}\n                beforeStartText={data.beforeStartText}\n                comingSoonButtonText={data.comingSoonButtonText}\n                loading={loading}\n              />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </Container>\n    )\n  }\n)\n\nGiftShelf.displayName = 'GiftShelf'\n\nexport default withLayout(GiftShelf)\nexport type {\n  GiftShelfProps,\n  GiftShelfData,\n  GiftShelfItem,\n  GiftShelfProduct,\n  CountdownConfig,\n  ResponsiveBackgroundImage,\n} from './types.js'\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Button", "Container", "Heading", "cva", "Swiper", "SwiperSlide", "withLayout", "formatVariantPrice", "useAiuiContext", "replaceTemplate", "giftCardVariants", "contentLayoutVariants", "imageAreaVariants", "infoAreaVariants", "buttonVariants", "textVariants", "getResponsiveSource", "bgImage", "sources", "getBackgroundAlt", "formatTime", "seconds", "hours", "minutes", "secs", "parseStartTime", "startTime", "parsed", "isInTransitionPeriod", "countdown", "startTimeMs", "durationMs", "rounds", "now", "elapsed", "currentRound", "timeUntilRoundEnd", "TRANSITION_PERIOD_MS", "getCodeWithSuffix", "codePrefix", "date", "suffix", "currentRoundStartMs", "Countdown", "config", "theme", "className", "countdownText", "lastRoundText", "beforeStartText", "countdownIcon", "onStateChange", "timeLeft", "setTimeLeft", "countdownState", "setCountdownState", "calculateCountdown", "diff", "currentRoundTargetTime", "timer", "labelText", "ProgressBar", "progress", "clampedProgress", "GiftShelfCard", "item", "layout", "buttonClassName", "countdownClassName", "onButtonClick", "buildData", "buttonText", "remainText", "lowStockText", "soldOutButtonText", "discountText", "comingSoonButtonText", "loading", "locale", "firstProduct", "isTransitioning", "setIsTransitioning", "currentCode", "setCurrentCode", "checkAndUpdate", "newCode", "prev", "handleCountdownStateChange", "state", "fullProduct", "p", "fullProductVariant", "variant", "displayData", "price", "basePrice", "handleClick", "GiftShelf", "classNames", "data", "rest", "ref", "itemsPerRow", "cardLayout", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "index", "GiftShelf_default"]
+}

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

@@ -0,0 +1,120 @@
+import type { Media } from '../../types/props.js';
+import type { Product } from '../Listing/types/product.js';
+/**
+ * 礼品货架产品项（简化版产品信息）
+ */
+export interface GiftShelfProduct {
+    /** 产品 SKU */
+    sku: string;
+    /** 产品名称 */
+    name: string;
+    /** 产品图片 URL */
+    image: string;
+    /** 产品值/标识 (通常与 handle 相同) */
+    value: string;
+    /** 产品 handle (URL slug) */
+    handle: string;
+    /** Shopify 产品 ID */
+    shopify_id: string;
+    /** 自定义库存 */
+    custom_inventory?: number;
+    /** 自定义价格 */
+    custom_price?: number;
+    /** 自定义产品描述 */
+    custom_description?: string | null;
+}
+/**
+ * 倒计时配置接口
+ */
+export interface CountdownConfig {
+    /** 倒计时开始时间，支持 ISO 8601 字符串（如 "2026-02-10T04:00:00.000Z"）或时间戳（毫秒） */
+    startTime: string | number;
+    /** 每轮倒计时时长（天），默认为 1 天 */
+    durationDays?: number;
+    /** 倒计时轮次，默认为 1 */
+    rounds?: number;
+}
+/**
+ * 响应式背景图片类型
+ * 支持 5 个断点的图片配置
+ */
+export interface ResponsiveBackgroundImage {
+    /** 默认图片 (<768px 移动端) */
+    default?: Media;
+    /** tablet 断点图片 (≥768px) */
+    tablet?: Media;
+    /** laptop 断点图片 (≥1025px) */
+    laptop?: Media;
+    /** desktop 断点图片 (≥1440px) */
+    desktop?: Media;
+    /** lg-desktop 断点图片 (≥1920px) */
+    lgDesktop?: Media;
+}
+/**
+ * 礼品卡片项数据接口
+ */
+export interface GiftShelfItem {
+    /** 卡片倒计时配置（可选） */
+    countdown?: CountdownConfig;
+    /** 产品列表 */
+    products: GiftShelfProduct[];
+    /** 响应式背景图片（支持 5 个断点） */
+    backgroundImage?: ResponsiveBackgroundImage;
+    /** Code 前缀，后缀会根据当前轮次自动生成（MMDD 格式） */
+    codePrefix?: string;
+}
+/**
+ * 礼品货架组件数据接口
+ */
+export interface GiftShelfData {
+    /** 礼品卡片列表 */
+    items: GiftShelfItem[];
+    /** 主题模式，默认为 light */
+    theme?: 'light' | 'dark';
+    /** 购买按钮文本 */
+    buttonText: string;
+    /** 购买按钮链接 */
+    buttonLink?: string;
+    /** 剩余数量提示文本，支持模板变量 {inventory} 和 {quantity} */
+    remainText?: string;
+    /** 低库存提示文本 */
+    lowStockText?: string;
+    /** 售罄按钮文本 */
+    soldOutButtonText?: string;
+    /** 折扣文案（可选） */
+    discountText?: string;
+    /** 倒计时文案 */
+    countdownText?: string;
+    /** 最后一轮提示文案 */
+    lastRoundText?: string;
+    /** 开始前提示文案 */
+    beforeStartText?: string;
+    /** 即将开始按钮文案 */
+    comingSoonButtonText?: string;
+    /** 倒计时图标 */
+    countdownIcon?: Media;
+}
+/**
+ * 语义化类名
+ */
+export type GiftShelfSemanticName = 'root' | 'card' | 'countdown' | 'button';
+/**
+ * 礼品货架组件 Props
+ */
+export interface GiftShelfProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: GiftShelfData;
+    /** 构建时数据（产品列表等） */
+    buildData?: {
+        products: Product[];
+    };
+    /** 语义化类名 */
+    classNames?: Partial<Record<GiftShelfSemanticName, string>>;
+    /** 按钮点击回调，code 为当前轮次的完整 Code（前缀 + MMDD 后缀） */
+    onButtonClick?: ({ product, code }: {
+        product: GiftShelfProduct;
+        code: string;
+    }) => void;
+    /** 按钮加载状态 */
+    loading?: boolean;
+}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

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

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

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

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+export type { GiftTierShelfProps, GiftTierShelfData, GiftTierItem, GiftTierProduct } from './types.js';

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as f}from"react/jsx-runtime";import*as r from"react";import{cn as n}from"../../helpers/index.js";import{Text as x,Picture as k,Container as z,Heading as A}from"../../components/index.js";import{cva as T}from"class-variance-authority";import{Swiper as N,SwiperSlide as b}from"swiper/react";import*as C from"swiper/modules";import{withLayout as j}from"../../shared/Styles.js";import{useAiuiContext as L}from"../AiuiProvider/index.js";import{formatPrice as U}from"../Listing/utils/index.js";const D=T("lg-desktop:h-[400px] rounded-card desktop:pt-4 desktop:pb-6 relative flex h-[320px] flex-col items-start gap-1 overflow-hidden p-4",{variants:{theme:{light:"bg-gradient-to-b from-[#FCCA7B] to-[#FFE6BF]",dark:"bg-gradient-to-b from-[#3A3A3A] to-[#1D1D1F]"}},defaultVariants:{theme:"light"}}),P=T("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{theme:"light"}}),M=r.memo(({image:t})=>t?e(k,{source:t.url,alt:t.alt||"Member Tag",className:"h-full w-auto",imgClassName:"h-full w-auto object-contain"}):null);M.displayName="MemberTag";const y=r.memo(({theme:t="light"})=>{const l=t==="light"?"bg-[#f6cd4e]":"bg-[#F5F6F7]";return e("div",{className:"flex h-4 w-full items-center",children:e("div",{className:n("flex h-1 w-full items-center justify-center",l),children:e("div",{className:n("relative size-4 shrink-0 rounded-full",l)})})})});y.displayName="TimelineItem";const V=r.memo(({item:t,theme:l="light",className:h,onClick:m,buildData:d})=>{const{locale:w="us"}=L(),s=t.products?.[0],a=r.useMemo(()=>!s?.handle||!d?.products?.length?null:d.products.find(u=>u.handle===s.handle)||null,[s?.handle,d?.products]),p=r.useMemo(()=>a?.variants?.find(u=>u?.sku===s?.sku)||{},[s?.sku,a?.variants]),g=U({locale:w||"us",amount:s?.custom_price??p?.price?.amount,currencyCode:a?.price?.currencyCode||"USD"});return f("div",{className:n(D({theme:l}),h),onClick:m,"data-ui-component-id":"GiftTierCard",children:[e("div",{className:"lg-desktop:h-[28px] z-10 h-6",children:t.showMemberTag&&t.memberTagImage&&e(M,{image:t.memberTagImage})}),e("div",{className:"relative z-10 mx-auto min-h-0 w-fit flex-1",children:e(k,{source:p?.image?.url||a?.images[0]?.url,className:"size-full",imgClassName:"size-full object-contain"})}),f("div",{className:n("z-10 flex w-full shrink-0 flex-col gap-2",P({theme:l})),children:[f("div",{className:"flex items-end gap-1",children:[e(A,{html:g,size:4,className:"font-bold leading-[1.2] tracking-[-0.04em]"}),t.valueUnit&&e(x,{html:t.valueUnit,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]"})]}),e(x,{html:p?.title||a?.title,className:"lg-desktop:text-2xl line-clamp-2 min-h-[48px] text-wrap text-xl font-bold leading-[1.2] tracking-[-0.04em]"})]})]})});V.displayName="GiftTierCard";const G=r.forwardRef(({classNames:t={},data:l,onCardClick:h,buildData:m,...d},w)=>{const s=l.theme||"light",a=l.showTimeline!==!1,[p,g]=r.useState(null),[u,B]=r.useState(null),c=r.useMemo(()=>m?.products?.length?l.items.filter(i=>{const o=i.products?.[0];return o?.handle?m.products.find(v=>v.handle===o.handle)?.variants?.find(v=>v?.sku===o?.sku)?.availableForSale!==!1:!0}):l.items,[l.items,m?.products]),F=r.useMemo(()=>{const i=c.length;return{0:{slidesPerView:1.2,spaceBetween:12},768:{slidesPerView:Math.min(i,2.5),spaceBetween:12},1025:{slidesPerView:Math.min(i,3.5),spaceBetween:16},1440:{slidesPerView:Math.min(i,4),spaceBetween:16}}},[c.length]),I=r.useMemo(()=>{const i=c.length;return{0:{slidesPerView:1.2,spaceBetween:0},768:{slidesPerView:Math.min(i,2.5),spaceBetween:0},1025:{slidesPerView:Math.min(i,3.5),spaceBetween:0},1440:{slidesPerView:Math.min(i,4),spaceBetween:0}}},[c.length]),S=r.useMemo(()=>C.Controller?[C.Controller]:[],[]);return f(z,{ref:w,className:n(t?.root),childClassName:"overflow-hidden","data-ui-component-id":"GiftTierShelf",...d,children:[e(N,{modules:S,breakpoints:F,className:"w-full !overflow-visible",onSwiper:g,controller:{control:u},children:c.map((i,o)=>e(b,{children:e(V,{item:i,theme:s,buildData:m,className:t?.card,onClick:()=>h?.(i,o)})},"giftTierItem"+o))}),a&&e("div",{className:"mt-4 flex flex-col gap-4",children:e("div",{className:n("w-full",t?.timeline),children:e(N,{modules:S,breakpoints:I,className:"w-full !overflow-visible",onSwiper:B,controller:{control:p},children:c.map((i,o)=>e(b,{children:f("div",{className:"flex flex-col items-center",children:[e(y,{theme:s}),e(x,{html:i.threshold,className:n("lg-desktop:text-2xl text-center text-xl font-bold leading-[1.2] tracking-[-0.04em]",P({theme:s}),t?.thresholdText)})]})},"timelineItem"+o))})})})]})});G.displayName="GiftTierShelf";var W=j(G);export{W as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GiftTierShelf/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Container, Heading } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { GiftTierShelfProps, GiftTierItem, Media } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport * as SwiperModules from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { Product, ProductVariant } from '../Listing/types/product.js'\nimport { formatPrice } from '../Listing/utils/index.js'\n\n/**\n * Card style variants\n */\nconst cardVariants = cva(\n  'lg-desktop:h-[400px] rounded-card desktop:pt-4 desktop:pb-6 relative flex h-[320px] flex-col items-start gap-1 overflow-hidden p-4',\n  {\n    variants: {\n      theme: {\n        light: 'bg-gradient-to-b from-[#FCCA7B] to-[#FFE6BF]',\n        dark: 'bg-gradient-to-b from-[#3A3A3A] to-[#1D1D1F]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\n/**\n * Text color variants\n */\nconst textVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-white',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * Member Tag Component\n */\nconst MemberTag = React.memo(({ image }: { image?: Media }) => {\n  if (!image) return null\n\n  return (\n    <Picture\n      source={image.url}\n      alt={image.alt || 'Member Tag'}\n      className=\"h-full w-auto\"\n      imgClassName=\"h-full w-auto object-contain\"\n    />\n  )\n})\n\nMemberTag.displayName = 'MemberTag'\n\n/**\n * Timeline Item Component - \u5355\u4E2A\u65F6\u95F4\u8F74\u8282\u70B9\n */\nconst TimelineItem = React.memo(({ theme = 'light' }: { theme?: 'light' | 'dark' }) => {\n  const trackColor = theme === 'light' ? 'bg-[#f6cd4e]' : 'bg-[#F5F6F7]'\n\n  return (\n    <div className=\"flex h-4 w-full items-center\">\n      <div className={cn('flex h-1 w-full items-center justify-center', trackColor)}>\n        {/* Handle */}\n        <div className={cn('relative size-4 shrink-0 rounded-full', trackColor)}></div>\n      </div>\n    </div>\n  )\n})\n\nTimelineItem.displayName = 'TimelineItem'\n\n/**\n * Gift Tier Card Component\n */\nconst GiftTierCard = React.memo(\n  ({\n    item,\n    theme = 'light',\n    className,\n    onClick,\n    buildData,\n  }: {\n    item: GiftTierItem\n    theme?: 'light' | 'dark'\n    className?: string\n    onClick?: () => void\n    buildData?: {\n      products: Product[]\n    }\n  }) => {\n    const { locale = 'us' } = useAiuiContext()\n    // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u4EA7\u54C1\u7684\u7B80\u5316\u6570\u636E\n    const product = item.products?.[0]\n\n    const fullProduct = React.useMemo(() => {\n      if (!product?.handle || !buildData?.products?.length) return null\n      return buildData.products.find(p => p.handle === product.handle) || null\n    }, [product?.handle, buildData?.products])\n\n    const fullProductVariant = React.useMemo(\n      () => fullProduct?.variants?.find(variant => variant?.sku === product?.sku) || ({} as ProductVariant),\n      [product?.sku, fullProduct?.variants]\n    )\n\n    const price = formatPrice({\n      locale: locale || 'us',\n      amount: product?.custom_price ?? fullProductVariant?.price?.amount,\n      currencyCode: fullProduct?.price?.currencyCode || 'USD',\n    })\n\n    return (\n      <div className={cn(cardVariants({ theme }), className)} onClick={onClick} data-ui-component-id=\"GiftTierCard\">\n        {/* Member Tag */}\n        <div className=\"lg-desktop:h-[28px] z-10 h-6\">\n          {item.showMemberTag && item.memberTagImage && <MemberTag image={item.memberTagImage} />}\n        </div>\n\n        {/* Product Image */}\n        <div className=\"relative z-10 mx-auto min-h-0 w-fit flex-1\">\n          <Picture\n            source={fullProductVariant?.image?.url || fullProduct?.images[0]?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-contain\"\n          />\n        </div>\n\n        {/* Product Info */}\n        <div className={cn('z-10 flex w-full shrink-0 flex-col gap-2', textVariants({ theme }))}>\n          {/* Price */}\n          <div className=\"flex items-end gap-1\">\n            <Heading html={price} size={4} className=\"font-bold leading-[1.2] tracking-[-0.04em]\" />\n            {item.valueUnit && (\n              <Text\n                html={item.valueUnit}\n                className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]\"\n              />\n            )}\n          </div>\n\n          {/* Product Name */}\n          <Text\n            html={fullProductVariant?.title || fullProduct?.title}\n            className=\"lg-desktop:text-2xl line-clamp-2 min-h-[48px] text-wrap text-xl font-bold leading-[1.2] tracking-[-0.04em]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nGiftTierCard.displayName = 'GiftTierCard'\n\n/**\n * GiftTierShelf - \u6EE1\u8D60\u8D27\u67B6\u7EC4\u4EF6\n *\n * @description \u9636\u68AF\u5F0F\u6EE1\u8D60\u6D3B\u52A8\u5C55\u793A\uFF0C\u652F\u6301\u591A\u4E2A\u6863\u4F4D\u7684\u4EA7\u54C1\u5C55\u793A\u548C\u65F6\u95F4\u8F74\n */\nconst GiftTierShelf = React.forwardRef<HTMLDivElement, GiftTierShelfProps>(\n  ({ classNames = {}, data, onCardClick, buildData, ...rest }, ref) => {\n    const theme = data.theme || 'light'\n    const showTimeline = data.showTimeline !== false\n\n    // Swiper \u5B9E\u4F8B\u72B6\u6001\uFF0C\u7528\u4E8E\u8054\u52A8\u63A7\u5236\n    const [cardSwiper, setCardSwiper] = React.useState<SwiperType | null>(null)\n    const [timelineSwiper, setTimelineSwiper] = React.useState<SwiperType | null>(null)\n\n    // \u8FC7\u6EE4\u51FA\u53EF\u552E\u4EA7\u54C1\uFF0C\u786E\u4FDD\u5361\u7247\u4E0E Timeline \u540C\u6B65\n    const availableItems = React.useMemo(() => {\n      if (!buildData?.products?.length) return data.items\n\n      return data.items.filter(item => {\n        const product = item.products?.[0]\n        if (!product?.handle) return true // \u6CA1\u6709\u5173\u8054\u4EA7\u54C1\u65F6\u9ED8\u8BA4\u663E\u793A\n\n        const fullProduct = buildData.products.find(p => p.handle === product.handle)\n        const variant = fullProduct?.variants?.find(v => v?.sku === product?.sku)\n\n        return variant?.availableForSale !== false\n      })\n    }, [data.items, buildData?.products])\n\n    // Card Swiper breakpoints\n    const cardSwiperBreakpoints = React.useMemo(() => {\n      const itemCount = availableItems.length\n      return {\n        0: { slidesPerView: 1.2, spaceBetween: 12 },\n        768: { slidesPerView: Math.min(itemCount, 2.5), spaceBetween: 12 },\n        1025: { slidesPerView: Math.min(itemCount, 3.5), spaceBetween: 16 },\n        1440: { slidesPerView: Math.min(itemCount, 4), spaceBetween: 16 },\n      }\n    }, [availableItems.length])\n\n    // Timeline Swiper breakpoints (spaceBetween \u4E3A 0)\n    const timelineSwiperBreakpoints = React.useMemo(() => {\n      const itemCount = availableItems.length\n      return {\n        0: { slidesPerView: 1.2, spaceBetween: 0 },\n        768: { slidesPerView: Math.min(itemCount, 2.5), spaceBetween: 0 },\n        1025: { slidesPerView: Math.min(itemCount, 3.5), spaceBetween: 0 },\n        1440: { slidesPerView: Math.min(itemCount, 4), spaceBetween: 0 },\n      }\n    }, [availableItems.length])\n\n    const swiperModules = React.useMemo(() => (SwiperModules.Controller ? [SwiperModules.Controller] : []), [])\n\n    return (\n      <Container\n        ref={ref}\n        className={cn(classNames?.root)}\n        childClassName=\"overflow-hidden\"\n        data-ui-component-id=\"GiftTierShelf\"\n        {...rest}\n      >\n        {/* Cards Swiper */}\n        <Swiper\n          modules={swiperModules}\n          breakpoints={cardSwiperBreakpoints}\n          className=\"w-full !overflow-visible\"\n          onSwiper={setCardSwiper}\n          controller={{ control: timelineSwiper }}\n        >\n          {availableItems.map((item, index) => (\n            <SwiperSlide key={'giftTierItem' + index}>\n              <GiftTierCard\n                item={item}\n                theme={theme}\n                buildData={buildData}\n                className={classNames?.card}\n                onClick={() => onCardClick?.(item, index)}\n              />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n\n        {/* Timeline */}\n        {showTimeline && (\n          <div className=\"mt-4 flex flex-col gap-4\">\n            {/* Timeline Swiper */}\n            <div className={cn('w-full', classNames?.timeline)}>\n              <Swiper\n                modules={swiperModules}\n                breakpoints={timelineSwiperBreakpoints}\n                className=\"w-full !overflow-visible\"\n                onSwiper={setTimelineSwiper}\n                controller={{ control: cardSwiper }}\n              >\n                {availableItems.map((item, index) => (\n                  <SwiperSlide key={'timelineItem' + index}>\n                    <div className=\"flex flex-col items-center\">\n                      <TimelineItem theme={theme} />\n                      <Text\n                        html={item.threshold}\n                        className={cn(\n                          'lg-desktop:text-2xl text-center text-xl font-bold leading-[1.2] tracking-[-0.04em]',\n                          textVariants({ theme }),\n                          classNames?.thresholdText\n                        )}\n                      />\n                    </div>\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        )}\n      </Container>\n    )\n  }\n)\n\nGiftTierShelf.displayName = 'GiftTierShelf'\n\nexport default withLayout(GiftTierShelf)\nexport type { GiftTierShelfProps, GiftTierShelfData, GiftTierItem, GiftTierProduct } from './types.js'\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Container", "Heading", "cva", "Swiper", "SwiperSlide", "SwiperModules", "withLayout", "useAiuiContext", "formatPrice", "cardVariants", "textVariants", "MemberTag", "image", "TimelineItem", "theme", "trackColor", "GiftTierCard", "item", "className", "onClick", "buildData", "locale", "product", "fullProduct", "p", "fullProductVariant", "variant", "price", "GiftTierShelf", "classNames", "data", "onCardClick", "rest", "ref", "showTimeline", "cardSwiper", "setCardSwiper", "timelineSwiper", "setTimelineSwiper", "availableItems", "cardSwiperBreakpoints", "itemCount", "timelineSwiperBreakpoints", "swiperModules", "index", "GiftTierShelf_default"]
+}

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

@@ -0,0 +1,75 @@
+import type { Media } from '../../types/props.js';
+import type { Product } from '../Listing/types/product.js';
+export type { Media };
+export interface GiftShelfProduct {
+    /** 产品 SKU */
+    sku: string;
+    /** 产品名称 */
+    name: string;
+    /** 产品图片 URL */
+    image: string;
+    /** 产品值/标识 (通常与 handle 相同) */
+    value: string;
+    /** 产品 handle (URL slug) */
+    handle: string;
+    /** Shopify 产品 ID */
+    shopify_id: string;
+    /** 自定义库存 */
+    custom_inventory?: number;
+    /** 自定义价格 */
+    custom_price?: number;
+    /** 自定义产品描述 */
+    custom_description?: string | null;
+}
+/**
+ * 满赠阶梯产品项
+ */
+export interface GiftTierProduct {
+    /** 价值单位（如 "Value"） */
+    valueUnit?: string;
+}
+/**
+ * 满赠阶梯项
+ */
+export interface GiftTierItem {
+    /** 阶梯门槛文本（如 "Order Over $3,000"） */
+    threshold: string;
+    /** 该阶梯对应的产品 */
+    products: GiftShelfProduct[];
+    /** 是否显示会员标签 */
+    showMemberTag?: boolean;
+    /** 会员标签图片 */
+    memberTagImage?: Media;
+    /** 价值单位（如 "Value"） */
+    valueUnit?: string;
+}
+/**
+ * 满赠货架组件数据接口
+ */
+export interface GiftTierShelfData {
+    /** 阶梯项列表 */
+    items: GiftTierItem[];
+    /** 主题模式 */
+    theme?: 'light' | 'dark';
+    /** 是否显示时间轴 */
+    showTimeline?: boolean;
+}
+/**
+ * 语义化类名
+ */
+export type GiftTierShelfSemanticName = 'root' | 'card' | 'timeline' | 'thresholdText';
+/**
+ * 满赠货架组件 Props
+ */
+export interface GiftTierShelfProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: GiftTierShelfData;
+    /** 构建时数据（产品列表等） */
+    buildData?: {
+        products: Product[];
+    };
+    /** 语义化类名 */
+    classNames?: Partial<Record<GiftTierShelfSemanticName, string>>;
+    /** 卡片点击回调 */
+    onCardClick?: (item: GiftTierItem, index: number) => void;
+}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

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

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

package/dist/esm/biz-components/HeroBanner/HeroBanner.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import Z,{useImperativeHandle as ce,useRef as b,useState as ue,useEffect as me}from"react";import y from"gsap";import{ScrollTrigger as v}from"gsap/dist/ScrollTrigger";import{useMediaQuery as J}from"react-responsive";import{useInView as de}from"react-intersection-observer";import ge from"../../helpers/ScrollLoadVideo.js";import{Button as P,Heading as fe,Picture as K,Text as S,Countdown as be}from"../../components/index.js";import{cn as n}from"../../helpers/index.js";import{cva as w}from"class-variance-authority";import{withLayout as xe}from"../../shared/Styles.js";import{useExposure as he}from"../../hooks/useExposure.js";import{trackUrlRef as R}from"../../shared/trackUrlRef.js";import{getLocalizedPath as ye}from"../../helpers/utils.js";import{useAiuiContext as ve}from"../AiuiProvider/index.js";import{sizeMap as we}from"../../components/button.js";import{VideoModal as ke}from"../VideoModal/index.js";const s="image",i="hero_banner",Ne=w("hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]",center:"left-1/2 -translate-x-1/2 items-center text-center"}},defaultVariants:{align:"left"}}),$e=w("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Be=w("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Ve=w("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),ze=({size:u="base"})=>{const{width:k,height:x}=we[u];return e("svg",{width:k,height:x,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},O=Z.forwardRef(({data:u,className:k,classNames:x={},onSecondaryClick:W,onPrimaryClick:X,...Y},ee)=>{const{locale:L}=ve(),N=t=>!t||!L?t:ye(t,L),{label:M,title:r,subtitle:o,endDate:D,endDate_tz:te,dateFormat:ae,pcImage:$,padImage:E,mobileImage:h,pcVideo:re,padVideo:oe,mobileVideo:j,isShowVideo:le,isVideoLoop:ne=!0,primaryButton:l,secondaryButton:a,theme:se="light",size:B="default",titleSize:V,caption:z=[],blockLink:U,iconArray:ie,align:m="left"}=u,_=J({query:"(max-width: 768px)"}),G=J({query:"(max-width: 1024px)"}),[F,A]=ue(!1),{ref:pe,inView:q}=de(),H=b(null),T=b(null),I=b(null),d=b(null),p=b(null);return he(p,{componentType:s,componentName:i,componentTitle:r,componentDescription:o}),ce(ee,()=>p.current),me(()=>{y.registerPlugin(v);function t(){if(!d.current)return;const C=p.current?.clientHeight||100;window.innerHeight<=C?H.current=v.create({trigger:p.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const f=g.progress*40-20;y.set(d.current,{yPercent:f})}}):(I.current=v.create({trigger:p.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:g=>{const f=g.progress*20-20;y.set(d.current,{yPercent:f})}}),T.current=v.create({trigger:p.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:g=>{const f=g.progress*20;y.set(d.current,{yPercent:f})}}))}return q&&t(),()=>{H.current&&H.current.kill(),I.current&&I.current.kill(),T.current&&T.current.kill()}},[q]),e("div",{...Y,ref:pe,"data-ui-component-id":"HeroBanner",children:c("div",{ref:p,className:n(se==="dark"?"aiui-dark":"","text-info-primary relative  w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":B==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":B==="sm"},k),children:[U&&e("a",{className:"absolute inset-0 z-10",href:R(N(U),`${s}_${i}`),"data-headless-type-name":`${s}#${i}`,"data-headless-title-desc-button":`${r}#${o}`,tabIndex:-1,"aria-hidden":"true","aria-label":r}),e("div",{ref:d,className:n("absolute left-0 top-0 size-full"),children:le?e(ge,{poster:_?h?.url:G?E?.url||h?.url:$?.url,src:_?j?.url:G?oe?.url||j?.url:re?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:ne,playsInline:!0}):e(K,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:$?.alt||"",source:`${$?.url||""} , ${E?.url??(h?.url||"")} 1024, ${h?.url||""} 767`})}),c("div",{className:Ne({align:m}),children:[c("div",{className:$e({align:m}),children:[M&&e(S,{size:2,as:"p",className:n("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:M}),r&&e(fe,{as:V==="4"?"h1":"h2",html:r,className:n("hero-banner-title",x.title),size:V?Number(V||"5"):B==="sm"?4:5}),o&&e(S,{as:"p",size:2,className:n("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:o}),D&&e("div",{className:"mt-3",children:e(be,{endDate:D,endDate_tz:te,dateFormat:ae,variant:"spacious",align:m})})]}),c("div",{className:Be({align:m}),children:[a?.isShowPlayVideoButton&&a?.playVideoButtonText?c(P,{onClick:()=>A(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${s}#${i}`,"data-headless-title-desc-button":`${r}#${o}#${a?.playVideoButtonText}`,children:[a?.playVideoButtonText," ",e(ze,{size:"lg"})]}):a?.text?c(P,{"aria-label":r??o,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:a?.isCustomSecondaryButton?"button":"a",href:R(N(a?.link),`${s}_${i}`),onClick:t=>a?.isCustomSecondaryButton&&W?.(u,t,a?.customSecondaryEventId),"data-headless-type-name":`${s}#${i}`,"data-headless-title-desc-button":`${r}#${o}#${a?.text}`,children:[a?.text,e("span",{className:"sr-only",children:r??o})]}):null,l&&l.text&&e(P,{"aria-label":r??o,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:l?.isCustomPrimaryButton?"button":"a",href:R(N(l.link),`${s}_${i}`),onClick:t=>l?.isCustomPrimaryButton&&X?.(u,t,l?.customPrimaryEventId),"data-headless-type-name":`${s}#${i}`,"data-headless-title-desc-button":`${r}#${o}#${l?.text}`,children:l.text})]}),e("div",{className:Ve({align:m}),children:ie?.map(t=>e("div",{className:"h-12",children:e(K,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:t?.pcImage?.alt||"",source:t?.pcImage?.url})},t?.pcImage?.url||t?.pcImage?.alt))})]}),z.length>0&&e("div",{className:n("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",x.captionGroup),children:z.map((t,C)=>c(Z.Fragment,{children:[e(S,{size:2,className:n("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:t.title}),C<z.length-1&&e("div",{className:n("bg-info-primary w-px")})]},t.title))}),F&&e(ke,{visible:F,videoUrl:a?.videoUrl?.url,youTubeId:a?.youtubeId,onCloseModal:()=>A(!1)})]})})});O.displayName="HeroBanner";var qe=xe(O);export{qe as default};
+"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import Q,{useImperativeHandle as ce,useRef as b,useState as ue,useEffect as me}from"react";import y from"gsap";import{ScrollTrigger as v}from"gsap/dist/ScrollTrigger";import{useMediaQuery as Z}from"react-responsive";import{useInView as de}from"react-intersection-observer";import ge from"../../helpers/ScrollLoadVideo.js";import{Button as P,Heading as fe,Picture as J,Text as S,Countdown as be}from"../../components/index.js";import{cn as n}from"../../helpers/index.js";import{cva as w}from"class-variance-authority";import{withLayout as xe}from"../../shared/Styles.js";import{useExposure as he}from"../../hooks/useExposure.js";import{trackUrlRef as R}from"../../shared/trackUrlRef.js";import{getLocalizedPath as ye}from"../../helpers/utils.js";import{useAiuiContext as ve}from"../AiuiProvider/index.js";import{sizeMap as we}from"../../components/button.js";import{VideoModal as ke}from"../VideoModal/index.js";const s="image",i="hero_banner",Ne=w("hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]",center:"left-1/2 -translate-x-1/2 items-center text-center"}},defaultVariants:{align:"left"}}),$e=w("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Ve=w("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Be=w("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),ze=({size:u="base"})=>{const{width:k,height:x}=we[u];return e("svg",{width:k,height:x,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},K=Q.forwardRef(({data:u,className:k,classNames:x={},onSecondaryClick:O,onPrimaryClick:W,...X},ee)=>{const{locale:L}=ve(),N=t=>!t||!L?t:ye(t,L),{label:M,title:r,subtitle:o,endDate:D,endDate_tz:te,dateFormat:ae,pcImage:$,padImage:E,mobileImage:h,pcVideo:re,padVideo:oe,mobileVideo:j,isShowVideo:le,isVideoLoop:ne=!0,primaryButton:l,secondaryButton:a,theme:se="light",size:V="default",titleSize:B,caption:z=[],blockLink:U,iconArray:ie,align:m="left"}=u,_=Z({query:"(max-width: 768px)"}),G=Z({query:"(max-width: 1024px)"}),[F,A]=ue(!1),{ref:pe,inView:q}=de(),H=b(null),T=b(null),I=b(null),d=b(null),p=b(null);return he(p,{componentType:s,componentName:i,componentTitle:r,componentDescription:o}),ce(ee,()=>p.current),me(()=>{y.registerPlugin(v);function t(){if(!d.current)return;const C=p.current?.clientHeight||100;window.innerHeight<=C?H.current=v.create({trigger:p.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const f=g.progress*40-20;y.set(d.current,{yPercent:f})}}):(I.current=v.create({trigger:p.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:g=>{const f=g.progress*20-20;y.set(d.current,{yPercent:f})}}),T.current=v.create({trigger:p.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:g=>{const f=g.progress*20;y.set(d.current,{yPercent:f})}}))}return q&&t(),()=>{H.current&&H.current.kill(),I.current&&I.current.kill(),T.current&&T.current.kill()}},[q]),e("div",{...X,ref:pe,"data-ui-component-id":"HeroBanner",children:c("div",{ref:p,className:n(se==="dark"?"aiui-dark":"","text-info-primary relative  w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":V==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":V==="sm"},k),children:[U&&e("a",{className:"absolute inset-0 z-10",href:R(N(U),`${s}_${i}`),"data-headless-type-name":`${s}#${i}`,"data-headless-title-desc-button":`${r}#${o}`,tabIndex:-1,"aria-hidden":"true","aria-label":r}),e("div",{ref:d,className:n("absolute left-0 top-0 size-full"),children:le?e(ge,{poster:_?h?.url:G?E?.url||h?.url:$?.url,src:_?j?.url:G?oe?.url||j?.url:re?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:ne,playsInline:!0}):e(J,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:$?.alt||"",source:`${$?.url||""} , ${E?.url??(h?.url||"")} 1024, ${h?.url||""} 767`})}),c("div",{className:Ne({align:m}),children:[c("div",{className:$e({align:m}),children:[M&&e(S,{size:2,as:"p",className:n("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:M}),r&&e(fe,{as:B==="4"?"h1":"h2",html:r,className:n("hero-banner-title",x.title),size:B?Number(B||"5"):V==="sm"?4:5}),o&&e(S,{as:"p",size:2,className:n("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:o}),D&&e("div",{className:"mt-3",children:e(be,{endDate:D,endDate_tz:te,dateFormat:ae,variant:"spacious",align:m})})]}),c("div",{className:Ve({align:m}),children:[a?.isShowPlayVideoButton&&a?.playVideoButtonText?c(P,{onClick:()=>A(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${s}#${i}`,"data-headless-title-desc-button":`${r}#${o}#${a?.playVideoButtonText}`,children:[a?.playVideoButtonText," ",e(ze,{size:"lg"})]}):a?.text?c(P,{"aria-label":r??o,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:a?.isCustomSecondaryButton?"button":"a",href:R(N(a?.link),`${s}_${i}`),onClick:t=>a?.isCustomSecondaryButton&&O?.(u,t,a?.customSecondaryEventId),"data-headless-type-name":`${s}#${i}`,"data-headless-title-desc-button":`${r}#${o}#${a?.text}`,children:[a?.text,e("span",{className:"sr-only",children:r??o})]}):null,l&&l.text&&e(P,{"aria-label":r??o,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:l?.isCustomPrimaryButton?"button":"a",href:R(N(l.link),`${s}_${i}`),onClick:t=>l?.isCustomPrimaryButton&&W?.(u,t,l?.customPrimaryEventId),"data-headless-type-name":`${s}#${i}`,"data-headless-title-desc-button":`${r}#${o}#${l?.text}`,children:l.text})]}),e("div",{className:Be({align:m}),children:ie?.map(t=>e("div",{className:"h-12",children:e(J,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:t?.pcImage?.alt||"",source:t?.pcImage?.url})},t?.pcImage?.url||t?.pcImage?.alt))})]}),z.length>0&&e("div",{className:n("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",x.captionGroup),children:z.map((t,C)=>c(Q.Fragment,{children:[e(S,{size:2,className:n("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:t.title}),C<z.length-1&&e("div",{className:n("bg-info-primary w-px")})]},t.title))}),F&&e(ke,{visible:F,videoUrl:a?.isYoutubeVideo?void 0:a?.videoUrl?.url,youTubeId:a?.isYoutubeVideo?a?.youtubeId:void 0,onCloseModal:()=>A(!1)})]})})});K.displayName="HeroBanner";var qe=xe(K);export{qe as default};
 //# sourceMappingURL=HeroBanner.js.map

package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n  'hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n  {\n    variants: {\n      align: {\n        left: 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]',\n        center: 'left-1/2 -translate-x-1/2 items-center text-center',\n      },\n    },\n    defaultVariants: {\n      align: 'left',\n    },\n  }\n)\n\nconst textVariants = cva(\n  'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n  {\n    variants: {\n      align: {\n        left: 'laptop:text-left',\n        center: 'text-center',\n      },\n    },\n    defaultVariants: {\n      align: 'left',\n    },\n  }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n  variants: {\n    align: {\n      left: 'laptop:justify-start',\n      center: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n  },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n  variants: {\n    align: {\n      left: 'justify-start',\n      center: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n  },\n})\n\nexport type HeroBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'subtitle'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n  | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<\n  HTMLDivElement,\n  HeroBannerProps & {\n    classNames?: Partial<Record<HeroBannerSemanticName, string>>\n  }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, ...rest }, ref) => {\n  const { locale } = useAiuiContext()\n\n  // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n  const localizeUrl = (url?: string) => {\n    if (!url || !locale) return url\n    return getLocalizedPath(url, locale)\n  }\n\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    isVideoLoop = true,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    titleSize,\n    caption = [],\n    blockLink,\n    iconArray,\n    align = 'left',\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          'text-info-primary relative  w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n              size === 'default',\n            'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n              size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(localizeUrl(blockLink), `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop={isVideoLoop}\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className={contentVariants({ align })}>\n          <div className={textVariants({ align })}>\n            {label && (\n              <Text\n                size={2}\n                as=\"p\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && (\n              <Heading\n                as={titleSize === '4' ? 'h1' : 'h2'}\n                html={title}\n                className={cn('hero-banner-title', classNames.title)}\n                size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n              />\n            )}\n            {subtitle && (\n              <Text\n                as=\"p\"\n                size={2}\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown\n                  endDate={endDate}\n                  endDate_tz={endDate_tz}\n                  dateFormat={dateFormat}\n                  variant=\"spacious\"\n                  align={align}\n                />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className={buttonGroupVariants({ align })}>\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n                href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n                onClick={e =>\n                  secondaryButton?.isCustomSecondaryButton &&\n                  onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n                }\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n                href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n                onClick={e =>\n                  primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n                }\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className={iconGroupVariants({ align })}>\n            {iconArray?.map(icon => (\n              <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div\n            className={cn(\n              'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n              classNames.captionGroup\n            )}\n          >\n            {caption.map((c, index) => (\n              <React.Fragment key={c.title}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n  'hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n  {\n    variants: {\n      align: {\n        left: 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]',\n        center: 'left-1/2 -translate-x-1/2 items-center text-center',\n      },\n    },\n    defaultVariants: {\n      align: 'left',\n    },\n  }\n)\n\nconst textVariants = cva(\n  'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n  {\n    variants: {\n      align: {\n        left: 'laptop:text-left',\n        center: 'text-center',\n      },\n    },\n    defaultVariants: {\n      align: 'left',\n    },\n  }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n  variants: {\n    align: {\n      left: 'laptop:justify-start',\n      center: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n  },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n  variants: {\n    align: {\n      left: 'justify-start',\n      center: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n  },\n})\n\nexport type HeroBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'subtitle'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n  | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<\n  HTMLDivElement,\n  HeroBannerProps & {\n    classNames?: Partial<Record<HeroBannerSemanticName, string>>\n  }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, ...rest }, ref) => {\n  const { locale } = useAiuiContext()\n\n  // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n  const localizeUrl = (url?: string) => {\n    if (!url || !locale) return url\n    return getLocalizedPath(url, locale)\n  }\n\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    isVideoLoop = true,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    titleSize,\n    caption = [],\n    blockLink,\n    iconArray,\n    align = 'left',\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          'text-info-primary relative  w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n              size === 'default',\n            'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n              size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(localizeUrl(blockLink), `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop={isVideoLoop}\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className={contentVariants({ align })}>\n          <div className={textVariants({ align })}>\n            {label && (\n              <Text\n                size={2}\n                as=\"p\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && (\n              <Heading\n                as={titleSize === '4' ? 'h1' : 'h2'}\n                html={title}\n                className={cn('hero-banner-title', classNames.title)}\n                size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n              />\n            )}\n            {subtitle && (\n              <Text\n                as=\"p\"\n                size={2}\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown\n                  endDate={endDate}\n                  endDate_tz={endDate_tz}\n                  dateFormat={dateFormat}\n                  variant=\"spacious\"\n                  align={align}\n                />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className={buttonGroupVariants({ align })}>\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n                href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n                onClick={e =>\n                  secondaryButton?.isCustomSecondaryButton &&\n                  onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n                }\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n                href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n                onClick={e =>\n                  primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n                }\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className={iconGroupVariants({ align })}>\n            {iconArray?.map(icon => (\n              <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div\n            className={cn(\n              'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n              classNames.captionGroup\n            )}\n          >\n            {caption.map((c, index) => (\n              <React.Fragment key={c.title}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.isYoutubeVideo ? undefined : secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.isYoutubeVideo ? secondaryButton?.youtubeId : undefined}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "cva", "withLayout", "useExposure", "trackUrlRef", "getLocalizedPath", "useAiuiContext", "sizeMap", "VideoModal", "componentType", "componentName", "contentVariants", "textVariants", "buttonGroupVariants", "iconGroupVariants", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "rest", "ref", "locale", "localizeUrl", "url", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "align", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "e", "icon", "c", "index", "HeroBanner_default"]
 }

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

@@ -43,6 +43,8 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
             playIcon?: boolean;
             videoUrl?: Media;
             youtubeId?: string;
+            /** 是否为YouTube视频，true时播放YouTube视频（需要youtubeId），false时播放原生video（需要isShowPlayVideoButton为true且videoUrl.url存在） */
+            isYoutubeVideo?: boolean;
             isCustomSecondaryButton?: boolean;
             /** 自定义事件ID，传递给 onSecondaryClick */
             customSecondaryEventId?: string;