@anker-in/headless-ui 1.0.26-alpha.1763109270406 → 1.0.26-alpha.1763367560339

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    isDisplayBackImage = false,\n    itemShape,\n    metafields,\n    isTopTag = false,\n    isShowTag,\n    isShowOriginalPrice,\n  } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { discounts } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n  const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || ''}`\n      setCurrentPriceTag(discountTag)\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const bottomContent = () => {\n    return (\n      <>\n        {isShowTag && showTags?.length > 0 ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {showTags?.map?.((item: any, index: number) => <Badge key={index} className=\"shelf-items-tag\">{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title line-clamp-2\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description truncate text-sm\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-4 flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px] shelf-display-item'\n      )}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n          {currentPriceTag && isTopTag && (\n            <Badge className=\"absolute left-4 top-4 z-10 shelf-prices-tag\">{currentPriceTag || ''}</Badge>\n          )}\n          <div\n            className={cn(\n              'lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden shelf-display-item-image'\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n            </a>\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { itemShape, itemLength, metafields } = configuration || {}\n  const { discounts } = metafields || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const showSizeClass = (): {\n    boxItem: string\n    imgItem: string\n    wrap: string\n  } => {\n    if (itemLength >= 2) {\n      return {\n        boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n        imgItem:\n          'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n        wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n      }\n    }\n    return {\n      boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n      imgItem:\n        'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n      wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n    }\n  }\n\n  const handleWrapClass = () => {\n    if (itemLength >= 2) {\n      return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n    }\n    return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount])\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        showSizeClass().wrap,\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'shelf-display-item',\n        'bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\n      )}\n    >\n      <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n        <div className={cn(showSizeClass().imgItem, 'relative overflow-hidden desktop:mb-0 mb-1')}>\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n          {isShowTag ? (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {showTags?.map?.((item: any, index: number) => (\n                <Badge key={index} className=\"shelf-items-tag\">\n                  {item}\n                </Badge>\n              ))}\n            </div>\n          ) : null}\n          {displayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={displayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title mb-1 line-clamp-2\"\n              html={displayTitle || ''}\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n              html={displayDescription || ''}\n            />\n          ) : null}\n          <div className=\"mb-2 mt-5 flex items-center\">\n            {isSoldOut ? (\n              <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                  {variant?.availableForSale ? basePrice || '' : ''}\n                </div>\n              </>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton ? (\n              <Button\n                variant=\"secondary\"\n                onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n                className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                variant=\"primary\"\n                onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n                className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    isDisplayBackImage = false,\n    itemShape,\n    metafields,\n    isTopTag = false,\n    isShowTag,\n    isShowOriginalPrice,\n  } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { discounts } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n  const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || ''}`\n      setCurrentPriceTag(discountTag)\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const bottomContent = () => {\n    return (\n      <>\n        {isShowTag && showTags?.length > 0 ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {showTags?.map?.((item: any, index: number) => <Badge key={index} className=\"shelf-items-tag\">{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title line-clamp-2\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-4 flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px] shelf-display-item'\n      )}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n          {currentPriceTag && isTopTag && (\n            <Badge className=\"absolute left-4 top-4 z-10 shelf-prices-tag\">{currentPriceTag || ''}</Badge>\n          )}\n          <div\n            className={cn(\n              'lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden shelf-display-item-image'\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n            </a>\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { itemShape, itemLength, metafields } = configuration || {}\n  const { discounts } = metafields || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const showSizeClass = (): {\n    boxItem: string\n    imgItem: string\n    wrap: string\n  } => {\n    if (itemLength >= 2) {\n      return {\n        boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n        imgItem:\n          'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n        wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n      }\n    }\n    return {\n      boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n      imgItem:\n        'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n      wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n    }\n  }\n\n  const handleWrapClass = () => {\n    if (itemLength >= 2) {\n      return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n    }\n    return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount])\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        showSizeClass().wrap,\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'shelf-display-item',\n        'bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\n      )}\n    >\n      <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n        <div className={cn(showSizeClass().imgItem, 'relative overflow-hidden desktop:mb-0 mb-1')}>\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n          {isShowTag ? (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {showTags?.map?.((item: any, index: number) => (\n                <Badge key={index} className=\"shelf-items-tag\">\n                  {item}\n                </Badge>\n              ))}\n            </div>\n          ) : null}\n          {displayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={displayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title mb-1 line-clamp-2\"\n              html={displayTitle || ''}\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n              html={displayDescription || ''}\n            />\n          ) : null}\n          <div className=\"mb-2 mt-5 flex items-center\">\n            {isSoldOut ? (\n              <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                  {variant?.availableForSale ? basePrice || '' : ''}\n                </div>\n              </>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton ? (\n              <Button\n                variant=\"secondary\"\n                onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n                className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                variant=\"primary\"\n                onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n                className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayWrapItem", "data", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
 }

package/dist/esm/components/ExposureDetector.d.ts

@@ -0,0 +1,45 @@
+import React, { type ReactNode } from 'react';
+import { type UseExposureDetectionOptions } from '../hooks/useExposureDetection.js';
+export interface ExposureDetectorProps extends Omit<UseExposureDetectionOptions, 'onExposure'> {
+    /**
+     * 子元素
+     */
+    children: ReactNode;
+    /**
+     * 曝光回调函数
+     */
+    onExposure?: () => void;
+    /**
+     * 包装元素的标签，默认 'div'
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * 包装元素的 className
+     */
+    className?: string;
+    /**
+     * 包装元素的 style
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * 曝光检测组件
+ * 使用 IntersectionObserver 检测子元素是否至少 50% 可见且停留时间超过指定时间
+ * 确保在整个页面生命周期中只曝光一次
+ *
+ * @example
+ * ```tsx
+ * <ExposureDetector
+ *   exposureKey="my-component-1"
+ *   threshold={0.5}
+ *   duration={2000}
+ *   onExposure={() => {
+ *     console.log('元素已曝光')
+ *   }}
+ * >
+ *   <div>内容</div>
+ * </ExposureDetector>
+ * ```
+ */
+export declare const ExposureDetector: React.FC<ExposureDetectorProps>;
+export default ExposureDetector;

package/dist/esm/components/ExposureDetector.js

@@ -0,0 +1,2 @@
+import E,{useRef as l}from"react";import{useExposureDetection as m}from"../hooks/useExposureDetection.js";const f=({children:t,onExposure:o,exposureKey:r,threshold:s=.5,duration:n=2e3,once:p=!0,rootMargin:c="0px",as:i="div",className:u,style:x,...a})=>{const e=l(null);return m(e,{exposureKey:r,threshold:s,duration:n,once:p,onExposure:o,rootMargin:c}),E.createElement(i,{ref:e,className:u,style:x,...a},t)};var D=f;export{f as ExposureDetector,D as default};
+//# sourceMappingURL=ExposureDetector.js.map

package/dist/esm/components/ExposureDetector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/ExposureDetector.tsx"],
+  "sourcesContent": ["import React, { useRef, type ReactNode } from 'react'\nimport { useExposureDetection, type UseExposureDetectionOptions } from '../hooks/useExposureDetection.js'\n\nexport interface ExposureDetectorProps extends Omit<UseExposureDetectionOptions, 'onExposure'> {\n  /**\n   * \u5B50\u5143\u7D20\n   */\n  children: ReactNode\n  /**\n   * \u66DD\u5149\u56DE\u8C03\u51FD\u6570\n   */\n  onExposure?: () => void\n  /**\n   * \u5305\u88C5\u5143\u7D20\u7684\u6807\u7B7E\uFF0C\u9ED8\u8BA4 'div'\n   */\n  as?: keyof JSX.IntrinsicElements\n  /**\n   * \u5305\u88C5\u5143\u7D20\u7684 className\n   */\n  className?: string\n  /**\n   * \u5305\u88C5\u5143\u7D20\u7684 style\n   */\n  style?: React.CSSProperties\n}\n\n/**\n * \u66DD\u5149\u68C0\u6D4B\u7EC4\u4EF6\n * \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5B50\u5143\u7D20\u662F\u5426\u81F3\u5C11 50% \u53EF\u89C1\u4E14\u505C\u7559\u65F6\u95F4\u8D85\u8FC7\u6307\u5B9A\u65F6\u95F4\n * \u786E\u4FDD\u5728\u6574\u4E2A\u9875\u9762\u751F\u547D\u5468\u671F\u4E2D\u53EA\u66DD\u5149\u4E00\u6B21\n *\n * @example\n * ```tsx\n * <ExposureDetector\n *   exposureKey=\"my-component-1\"\n *   threshold={0.5}\n *   duration={2000}\n *   onExposure={() => {\n *     console.log('\u5143\u7D20\u5DF2\u66DD\u5149')\n *   }}\n * >\n *   <div>\u5185\u5BB9</div>\n * </ExposureDetector>\n * ```\n */\nexport const ExposureDetector: React.FC<ExposureDetectorProps> = ({\n  children,\n  onExposure,\n  exposureKey,\n  threshold = 0.5,\n  duration = 2000,\n  once = true,\n  rootMargin = '0px',\n  as: Component = 'div',\n  className,\n  style,\n  ...rest\n}) => {\n  const elementRef = useRef<HTMLElement>(null)\n\n  useExposureDetection(elementRef, {\n    exposureKey,\n    threshold,\n    duration,\n    once,\n    onExposure,\n    rootMargin,\n  })\n\n  return React.createElement(\n    Component,\n    {\n      ref: elementRef,\n      className,\n      style,\n      ...rest,\n    },\n    children\n  )\n}\n\nexport default ExposureDetector\n\n"],
+  "mappings": "AAAA,OAAOA,GAAS,UAAAC,MAA8B,QAC9C,OAAS,wBAAAC,MAA8D,mCA4ChE,MAAMC,EAAoD,CAAC,CAChE,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,IACX,KAAAC,EAAO,GACP,WAAAC,EAAa,MACb,GAAIC,EAAY,MAChB,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAad,EAAoB,IAAI,EAE3C,OAAAC,EAAqBa,EAAY,CAC/B,YAAAT,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,WAAAJ,EACA,WAAAK,CACF,CAAC,EAEMV,EAAM,cACXW,EACA,CACE,IAAKI,EACL,UAAAH,EACA,MAAAC,EACA,GAAGC,CACL,EACAV,CACF,CACF,EAEA,IAAOY,EAAQb",
+  "names": ["React", "useRef", "useExposureDetection", "ExposureDetector", "children", "onExposure", "exposureKey", "threshold", "duration", "once", "rootMargin", "Component", "className", "style", "rest", "elementRef", "ExposureDetector_default"]
+}

package/dist/esm/components/index.d.ts

@@ -25,3 +25,4 @@ export { default as Theme } from './theme.js';
 export { default as Board } from './board.js';
 export { default as LoadingDots } from './loadingDots.js';
 export { default as Breadcrumb } from './breadcrumb.js';
+export { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js';

package/dist/esm/components/index.js

@@ -1,2 +1,2 @@
-import{default as e}from"./button.js";import{default as a}from"./badge.js";import{Input as n,InputSlot as u}from"./input.js";import{default as i}from"./checkbox.js";import{default as m}from"./skeleton.js";import{Dialog as D,DialogPortal as f,DialogOverlay as x,DialogClose as C,DialogTrigger as g,DialogContent as w,DialogHeader as P,DialogFooter as T,DialogTitle as M,DialogDescription as b}from"./dialog.js";import{Popover as I,PopoverTrigger as c,PopoverContent as G}from"./popover.js";import{RadioGroup as A,RadioGroupItem as S}from"./radio.js";import{Text as R}from"./text.js";import{Grid as L,GridItem as h}from"./gird.js";import{Heading as F}from"./heading.js";import{Container as O}from"./container.js";import{Color as q}from"./color.js";import{Drawer as E,DrawerPortal as J,DrawerOverlay as K,DrawerTrigger as Q,DrawerClose as U,DrawerContent as V,DrawerHeader as W,DrawerFooter as X,DrawerTitle as Y,DrawerDescription as Z}from"./drawer.js";import{default as $}from"./link.js";import{Avatar as or,AvatarImage as er,AvatarFallback as tr}from"./avatar.js";import{default as pr}from"./input-number.js";import{DropdownMenu as ur,DropdownMenuTrigger as dr,DropdownMenuContent as ir,DropdownMenuItem as lr,DropdownMenuCheckboxItem as mr,DropdownMenuRadioItem as sr,DropdownMenuLabel as Dr,DropdownMenuSeparator as fr,DropdownMenuShortcut as xr,DropdownMenuGroup as Cr,DropdownMenuPortal as gr,DropdownMenuSub as wr,DropdownMenuSubContent as Pr,DropdownMenuSubTrigger as Tr,DropdownMenuRadioGroup as Mr}from"./drop-down.js";import{Card as yr,CardHeader as Ir,CardFooter as cr,CardTitle as Gr,CardDescription as vr,CardContent as Ar}from"./card.js";import{Carousel as kr,CarouselContent as Rr,CarouselItem as Hr,CarouselPrevious as Lr,CarouselNext as hr}from"./carousel.js";import{Tabs as Fr,TabsList as Nr,TabsTrigger as Or,TabsContent as jr}from"./tabs.js";import{Alert as zr,AlertTitle as Er,AlertDescription as Jr}from"./alert.js";import{default as Qr}from"./picture.js";import{default as Vr}from"./theme.js";import{default as Xr}from"./board.js";import{default as Zr}from"./loadingDots.js";import{default as $r}from"./breadcrumb.js";export{zr as Alert,Jr as AlertDescription,Er as AlertTitle,or as Avatar,tr as AvatarFallback,er as AvatarImage,a as Badge,Xr as Board,$r as Breadcrumb,e as Button,yr as Card,Ar as CardContent,vr as CardDescription,cr as CardFooter,Ir as CardHeader,Gr as CardTitle,kr as Carousel,Rr as CarouselContent,Hr as CarouselItem,hr as CarouselNext,Lr as CarouselPrevious,i as Checkbox,q as Color,O as Container,D as Dialog,C as DialogClose,w as DialogContent,b as DialogDescription,T as DialogFooter,P as DialogHeader,x as DialogOverlay,f as DialogPortal,M as DialogTitle,g as DialogTrigger,E as Drawer,U as DrawerClose,V as DrawerContent,Z as DrawerDescription,X as DrawerFooter,W as DrawerHeader,K as DrawerOverlay,J as DrawerPortal,Y as DrawerTitle,Q as DrawerTrigger,ur as DropdownMenu,mr as DropdownMenuCheckboxItem,ir as DropdownMenuContent,Cr as DropdownMenuGroup,lr as DropdownMenuItem,Dr as DropdownMenuLabel,gr as DropdownMenuPortal,Mr as DropdownMenuRadioGroup,sr as DropdownMenuRadioItem,fr as DropdownMenuSeparator,xr as DropdownMenuShortcut,wr as DropdownMenuSub,Pr as DropdownMenuSubContent,Tr as DropdownMenuSubTrigger,dr as DropdownMenuTrigger,L as Grid,h as GridItem,F as Heading,n as Input,pr as InputNumber,u as InputSlot,$ as Link,Zr as LoadingDots,Qr as Picture,I as Popover,G as PopoverContent,c as PopoverTrigger,A as RadioGroup,S as RadioGroupItem,m as Skeleton,Fr as Tabs,jr as TabsContent,Nr as TabsList,Or as TabsTrigger,R as Text,Vr as Theme};
+import{default as e}from"./button.js";import{default as a}from"./badge.js";import{Input as n,InputSlot as u}from"./input.js";import{default as i}from"./checkbox.js";import{default as s}from"./skeleton.js";import{Dialog as m,DialogPortal as f,DialogOverlay as x,DialogClose as C,DialogTrigger as g,DialogContent as w,DialogHeader as P,DialogFooter as T,DialogTitle as M,DialogDescription as b}from"./dialog.js";import{Popover as I,PopoverTrigger as c,PopoverContent as G}from"./popover.js";import{RadioGroup as A,RadioGroupItem as S}from"./radio.js";import{Text as R}from"./text.js";import{Grid as L,GridItem as h}from"./gird.js";import{Heading as F}from"./heading.js";import{Container as E}from"./container.js";import{Color as j}from"./color.js";import{Drawer as z,DrawerPortal as J,DrawerOverlay as K,DrawerTrigger as Q,DrawerClose as U,DrawerContent as V,DrawerHeader as W,DrawerFooter as X,DrawerTitle as Y,DrawerDescription as Z}from"./drawer.js";import{default as $}from"./link.js";import{Avatar as or,AvatarImage as er,AvatarFallback as tr}from"./avatar.js";import{default as pr}from"./input-number.js";import{DropdownMenu as ur,DropdownMenuTrigger as dr,DropdownMenuContent as ir,DropdownMenuItem as lr,DropdownMenuCheckboxItem as sr,DropdownMenuRadioItem as Dr,DropdownMenuLabel as mr,DropdownMenuSeparator as fr,DropdownMenuShortcut as xr,DropdownMenuGroup as Cr,DropdownMenuPortal as gr,DropdownMenuSub as wr,DropdownMenuSubContent as Pr,DropdownMenuSubTrigger as Tr,DropdownMenuRadioGroup as Mr}from"./drop-down.js";import{Card as yr,CardHeader as Ir,CardFooter as cr,CardTitle as Gr,CardDescription as vr,CardContent as Ar}from"./card.js";import{Carousel as kr,CarouselContent as Rr,CarouselItem as Hr,CarouselPrevious as Lr,CarouselNext as hr}from"./carousel.js";import{Tabs as Fr,TabsList as Nr,TabsTrigger as Er,TabsContent as Or}from"./tabs.js";import{Alert as qr,AlertTitle as zr,AlertDescription as Jr}from"./alert.js";import{default as Qr}from"./picture.js";import{default as Vr}from"./theme.js";import{default as Xr}from"./board.js";import{default as Zr}from"./loadingDots.js";import{default as $r}from"./breadcrumb.js";import{ExposureDetector as oo}from"./ExposureDetector.js";export{qr as Alert,Jr as AlertDescription,zr as AlertTitle,or as Avatar,tr as AvatarFallback,er as AvatarImage,a as Badge,Xr as Board,$r as Breadcrumb,e as Button,yr as Card,Ar as CardContent,vr as CardDescription,cr as CardFooter,Ir as CardHeader,Gr as CardTitle,kr as Carousel,Rr as CarouselContent,Hr as CarouselItem,hr as CarouselNext,Lr as CarouselPrevious,i as Checkbox,j as Color,E as Container,m as Dialog,C as DialogClose,w as DialogContent,b as DialogDescription,T as DialogFooter,P as DialogHeader,x as DialogOverlay,f as DialogPortal,M as DialogTitle,g as DialogTrigger,z as Drawer,U as DrawerClose,V as DrawerContent,Z as DrawerDescription,X as DrawerFooter,W as DrawerHeader,K as DrawerOverlay,J as DrawerPortal,Y as DrawerTitle,Q as DrawerTrigger,ur as DropdownMenu,sr as DropdownMenuCheckboxItem,ir as DropdownMenuContent,Cr as DropdownMenuGroup,lr as DropdownMenuItem,mr as DropdownMenuLabel,gr as DropdownMenuPortal,Mr as DropdownMenuRadioGroup,Dr as DropdownMenuRadioItem,fr as DropdownMenuSeparator,xr as DropdownMenuShortcut,wr as DropdownMenuSub,Pr as DropdownMenuSubContent,Tr as DropdownMenuSubTrigger,dr as DropdownMenuTrigger,oo as ExposureDetector,L as Grid,h as GridItem,F as Heading,n as Input,pr as InputNumber,u as InputSlot,$ as Link,Zr as LoadingDots,Qr as Picture,I as Popover,G as PopoverContent,c as PopoverTrigger,A as RadioGroup,S as RadioGroupItem,s as Skeleton,Fr as Tabs,Or as TabsContent,Nr as TabsList,Er as TabsTrigger,R as Text,Vr as Theme};
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/index.ts"],
-  "sourcesContent": ["export { default as Button } from './button.js'\nexport { default as Badge } from './badge.js'\nexport { Input, InputSlot } from './input.js'\n\nexport { default as Checkbox } from './checkbox.js'\n\nexport { default as Skeleton } from './skeleton.js'\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n} from './dialog.js'\nexport { Popover, PopoverTrigger, PopoverContent } from './popover.js'\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio.js'\nexport { Text, type TextProps } from './text.js'\nexport { Grid, GridItem, type GridProps, type GridItemProps } from './gird.js'\nexport { Heading, type HeadingProps } from './heading.js'\nexport { Container, type ContainerProps } from './container.js'\nexport { Color, type ColorProps } from './color.js'\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n} from './drawer.js'\nexport { default as Link, type LinkProps } from './link.js'\nexport { Avatar, AvatarImage, AvatarFallback } from './avatar.js'\nexport { default as InputNumber, type InputNumberProps } from './input-number.js'\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n} from './drop-down.js'\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js'\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n} from './carousel.js'\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.js'\nexport { Alert, AlertTitle, AlertDescription } from './alert.js'\nexport { default as Picture } from './picture.js'\nexport { default as Theme } from './theme.js'\nexport { default as Board } from './board.js'\nexport { default as LoadingDots } from './loadingDots.js'\nexport { default as Breadcrumb } from './breadcrumb.js'\n"],
-  "mappings": "AAAA,OAAoB,WAAXA,MAAyB,cAClC,OAAoB,WAAXA,MAAwB,aACjC,OAAS,SAAAC,EAAO,aAAAC,MAAiB,aAEjC,OAAoB,WAAXF,MAA2B,gBAEpC,OAAoB,WAAXA,MAA2B,gBACpC,OACE,UAAAG,EACA,gBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAS,WAAAC,EAAS,kBAAAC,EAAgB,kBAAAC,MAAsB,eACxD,OAAS,cAAAC,EAAY,kBAAAC,MAAsE,aAC3F,OAAS,QAAAC,MAA4B,YACrC,OAAS,QAAAC,EAAM,YAAAC,MAAoD,YACnE,OAAS,WAAAC,MAAkC,eAC3C,OAAS,aAAAC,MAAsC,iBAC/C,OAAS,SAAAC,MAA8B,aACvC,OACE,UAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAoB,WAAXjC,MAAuC,YAChD,OAAS,UAAAkC,GAAQ,eAAAC,GAAa,kBAAAC,OAAsB,cACpD,OAAoB,WAAXpC,OAAqD,oBAC9D,OACE,gBAAAqC,GACA,uBAAAC,GACA,uBAAAC,GACA,oBAAAC,GACA,4BAAAC,GACA,yBAAAC,GACA,qBAAAC,GACA,yBAAAC,GACA,wBAAAC,GACA,qBAAAC,GACA,sBAAAC,GACA,mBAAAC,GACA,0BAAAC,GACA,0BAAAC,GACA,0BAAAC,OACK,iBACP,OAAS,QAAAC,GAAM,cAAAC,GAAY,cAAAC,GAAY,aAAAC,GAAW,mBAAAC,GAAiB,eAAAC,OAAmB,YACtF,OAEE,YAAAC,GACA,mBAAAC,GACA,gBAAAC,GACA,oBAAAC,GACA,gBAAAC,OACK,gBACP,OAAS,QAAAC,GAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,YACzD,OAAS,SAAAC,GAAO,cAAAC,GAAY,oBAAAC,OAAwB,aACpD,OAAoB,WAAXrE,OAA0B,eACnC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAA8B,mBACvC,OAAoB,WAAXA,OAA6B",
-  "names": ["default", "Input", "InputSlot", "Dialog", "DialogPortal", "DialogOverlay", "DialogClose", "DialogTrigger", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription", "Popover", "PopoverTrigger", "PopoverContent", "RadioGroup", "RadioGroupItem", "Text", "Grid", "GridItem", "Heading", "Container", "Color", "Drawer", "DrawerPortal", "DrawerOverlay", "DrawerTrigger", "DrawerClose", "DrawerContent", "DrawerHeader", "DrawerFooter", "DrawerTitle", "DrawerDescription", "Avatar", "AvatarImage", "AvatarFallback", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuCheckboxItem", "DropdownMenuRadioItem", "DropdownMenuLabel", "DropdownMenuSeparator", "DropdownMenuShortcut", "DropdownMenuGroup", "DropdownMenuPortal", "DropdownMenuSub", "DropdownMenuSubContent", "DropdownMenuSubTrigger", "DropdownMenuRadioGroup", "Card", "CardHeader", "CardFooter", "CardTitle", "CardDescription", "CardContent", "Carousel", "CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Alert", "AlertTitle", "AlertDescription"]
+  "sourcesContent": ["export { default as Button } from './button.js'\nexport { default as Badge } from './badge.js'\nexport { Input, InputSlot } from './input.js'\n\nexport { default as Checkbox } from './checkbox.js'\n\nexport { default as Skeleton } from './skeleton.js'\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n} from './dialog.js'\nexport { Popover, PopoverTrigger, PopoverContent } from './popover.js'\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio.js'\nexport { Text, type TextProps } from './text.js'\nexport { Grid, GridItem, type GridProps, type GridItemProps } from './gird.js'\nexport { Heading, type HeadingProps } from './heading.js'\nexport { Container, type ContainerProps } from './container.js'\nexport { Color, type ColorProps } from './color.js'\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n} from './drawer.js'\nexport { default as Link, type LinkProps } from './link.js'\nexport { Avatar, AvatarImage, AvatarFallback } from './avatar.js'\nexport { default as InputNumber, type InputNumberProps } from './input-number.js'\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n} from './drop-down.js'\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js'\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n} from './carousel.js'\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.js'\nexport { Alert, AlertTitle, AlertDescription } from './alert.js'\nexport { default as Picture } from './picture.js'\nexport { default as Theme } from './theme.js'\nexport { default as Board } from './board.js'\nexport { default as LoadingDots } from './loadingDots.js'\nexport { default as Breadcrumb } from './breadcrumb.js'\nexport { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js'\n"],
+  "mappings": "AAAA,OAAoB,WAAXA,MAAyB,cAClC,OAAoB,WAAXA,MAAwB,aACjC,OAAS,SAAAC,EAAO,aAAAC,MAAiB,aAEjC,OAAoB,WAAXF,MAA2B,gBAEpC,OAAoB,WAAXA,MAA2B,gBACpC,OACE,UAAAG,EACA,gBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAS,WAAAC,EAAS,kBAAAC,EAAgB,kBAAAC,MAAsB,eACxD,OAAS,cAAAC,EAAY,kBAAAC,MAAsE,aAC3F,OAAS,QAAAC,MAA4B,YACrC,OAAS,QAAAC,EAAM,YAAAC,MAAoD,YACnE,OAAS,WAAAC,MAAkC,eAC3C,OAAS,aAAAC,MAAsC,iBAC/C,OAAS,SAAAC,MAA8B,aACvC,OACE,UAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAoB,WAAXjC,MAAuC,YAChD,OAAS,UAAAkC,GAAQ,eAAAC,GAAa,kBAAAC,OAAsB,cACpD,OAAoB,WAAXpC,OAAqD,oBAC9D,OACE,gBAAAqC,GACA,uBAAAC,GACA,uBAAAC,GACA,oBAAAC,GACA,4BAAAC,GACA,yBAAAC,GACA,qBAAAC,GACA,yBAAAC,GACA,wBAAAC,GACA,qBAAAC,GACA,sBAAAC,GACA,mBAAAC,GACA,0BAAAC,GACA,0BAAAC,GACA,0BAAAC,OACK,iBACP,OAAS,QAAAC,GAAM,cAAAC,GAAY,cAAAC,GAAY,aAAAC,GAAW,mBAAAC,GAAiB,eAAAC,OAAmB,YACtF,OAEE,YAAAC,GACA,mBAAAC,GACA,gBAAAC,GACA,oBAAAC,GACA,gBAAAC,OACK,gBACP,OAAS,QAAAC,GAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,YACzD,OAAS,SAAAC,GAAO,cAAAC,GAAY,oBAAAC,OAAwB,aACpD,OAAoB,WAAXrE,OAA0B,eACnC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAA8B,mBACvC,OAAoB,WAAXA,OAA6B,kBACtC,OAAS,oBAAAsE,OAAoD",
+  "names": ["default", "Input", "InputSlot", "Dialog", "DialogPortal", "DialogOverlay", "DialogClose", "DialogTrigger", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription", "Popover", "PopoverTrigger", "PopoverContent", "RadioGroup", "RadioGroupItem", "Text", "Grid", "GridItem", "Heading", "Container", "Color", "Drawer", "DrawerPortal", "DrawerOverlay", "DrawerTrigger", "DrawerClose", "DrawerContent", "DrawerHeader", "DrawerFooter", "DrawerTitle", "DrawerDescription", "Avatar", "AvatarImage", "AvatarFallback", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuCheckboxItem", "DropdownMenuRadioItem", "DropdownMenuLabel", "DropdownMenuSeparator", "DropdownMenuShortcut", "DropdownMenuGroup", "DropdownMenuPortal", "DropdownMenuSub", "DropdownMenuSubContent", "DropdownMenuSubTrigger", "DropdownMenuRadioGroup", "Card", "CardHeader", "CardFooter", "CardTitle", "CardDescription", "CardContent", "Carousel", "CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Alert", "AlertTitle", "AlertDescription", "ExposureDetector"]
 }

package/dist/esm/hooks/useExposureDetection.d.ts

@@ -0,0 +1,69 @@
+import { type RefObject } from 'react';
+export interface UseExposureDetectionOptions {
+    /**
+     * 唯一标识，用于判断是否已曝光
+     * 如果不提供，将使用元素的唯一标识（如果可能）
+     */
+    exposureKey?: string;
+    /**
+     * 可见性阈值，0-1 之间，默认 0.5（50%）
+     */
+    threshold?: number;
+    /**
+     * 停留时间（毫秒），默认 2000ms
+     */
+    duration?: number;
+    /**
+     * 是否只触发一次，默认 true
+     */
+    once?: boolean;
+    /**
+     * 曝光回调函数
+     */
+    onExposure?: () => void;
+    /**
+     * IntersectionObserver 的 rootMargin
+     */
+    rootMargin?: string;
+}
+/**
+ * 曝光检测 Hook
+ * 使用 IntersectionObserver 检测元素是否至少 50% 可见且停留时间超过指定时间
+ * 确保在整个页面生命周期中只曝光一次
+ *
+ * @param elementRef - 要检测的元素的 ref
+ * @param options - 配置选项
+ * @returns 返回清除计时器的方法（用于切换时清理）
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const ref = useRef<HTMLDivElement>(null)
+ *   const { clearTimer } = useExposureDetection(ref, {
+ *     exposureKey: 'my-component-1',
+ *     threshold: 0.5,
+ *     duration: 2000,
+ *     onExposure: () => {
+ *       console.log('元素已曝光')
+ *     }
+ *   })
+ *
+ *   return <div ref={ref}>内容</div>
+ * }
+ * ```
+ */
+export declare const useExposureDetection: (elementRef: RefObject<HTMLElement>, options?: UseExposureDetectionOptions) => {
+    clearTimer: () => void;
+};
+/**
+ * 清除指定 key 的曝光记录（用于测试或特殊场景）
+ */
+export declare const clearExposureRecord: (key: string) => void;
+/**
+ * 清除所有曝光记录（用于测试或特殊场景）
+ */
+export declare const clearAllExposureRecords: () => void;
+/**
+ * 检查指定 key 是否已曝光
+ */
+export declare const hasExposed: (key: string) => boolean;

package/dist/esm/hooks/useExposureDetection.js

@@ -0,0 +1,2 @@
+import{useRef as E,useEffect as y,useCallback as h}from"react";const o=new Set,K=(r,m={})=>{const{exposureKey:i,threshold:l=.5,duration:d=2e3,once:s=!0,onExposure:a,rootMargin:x="0px"}=m,e=E(null),c=E(null),f=h(()=>{if(i)return i;if(r.current&&!c.current){const u=r.current.getAttribute("data-exposure-id");if(u)return c.current=u,u;const n=[];let t=r.current;for(;t&&t!==document.body;){const p=Array.from(t.parentElement?.children||[]).indexOf(t);n.unshift(`${t.tagName.toLowerCase()}[${p}]`),t=t.parentElement}return c.current=n.join(" > "),c.current}return c.current||""},[i,r]),g=h(()=>{e.current&&(clearTimeout(e.current),e.current=null)},[]);return y(()=>{const u=r.current;if(!u||!a)return;const n=f();if(!n){console.warn("useExposureDetection: \u65E0\u6CD5\u751F\u6210\u552F\u4E00\u7684 exposureKey\uFF0C\u8BF7\u63D0\u4F9B exposureKey \u53C2\u6570");return}if(s&&o.has(n))return;const t=new IntersectionObserver(p=>{p.forEach(b=>{b.intersectionRatio>=l?(!s||!o.has(n))&&!e.current&&(e.current=setTimeout(()=>{s&&o.has(n)||(s&&o.add(n),a())},d)):e.current&&(clearTimeout(e.current),e.current=null)})},{threshold:l,rootMargin:x});return t.observe(u),()=>{t.disconnect(),e.current&&(clearTimeout(e.current),e.current=null)}},[r,a,l,d,s,x,f]),{clearTimer:g}},O=r=>{o.delete(r)},w=()=>{o.clear()},v=r=>o.has(r);export{w as clearAllExposureRecords,O as clearExposureRecord,v as hasExposed,K as useExposureDetection};
+//# sourceMappingURL=useExposureDetection.js.map

package/dist/esm/hooks/useExposureDetection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useExposureDetection.ts"],
+  "sourcesContent": ["import { type RefObject, useRef, useEffect, useCallback } from 'react'\n\n// \u5168\u5C40\u66DD\u5149\u8BB0\u5F55\uFF0C\u786E\u4FDD\u6BCF\u4E2A\u5143\u7D20\u5728\u6574\u4E2A\u9875\u9762\u751F\u547D\u5468\u671F\u4E2D\u53EA\u66DD\u5149\u4E00\u6B21\nconst exposedElementsSet = new Set<string>()\n\nexport interface UseExposureDetectionOptions {\n  /**\n   * \u552F\u4E00\u6807\u8BC6\uFF0C\u7528\u4E8E\u5224\u65AD\u662F\u5426\u5DF2\u66DD\u5149\n   * \u5982\u679C\u4E0D\u63D0\u4F9B\uFF0C\u5C06\u4F7F\u7528\u5143\u7D20\u7684\u552F\u4E00\u6807\u8BC6\uFF08\u5982\u679C\u53EF\u80FD\uFF09\n   */\n  exposureKey?: string\n  /**\n   * \u53EF\u89C1\u6027\u9608\u503C\uFF0C0-1 \u4E4B\u95F4\uFF0C\u9ED8\u8BA4 0.5\uFF0850%\uFF09\n   */\n  threshold?: number\n  /**\n   * \u505C\u7559\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 2000ms\n   */\n  duration?: number\n  /**\n   * \u662F\u5426\u53EA\u89E6\u53D1\u4E00\u6B21\uFF0C\u9ED8\u8BA4 true\n   */\n  once?: boolean\n  /**\n   * \u66DD\u5149\u56DE\u8C03\u51FD\u6570\n   */\n  onExposure?: () => void\n  /**\n   * IntersectionObserver \u7684 rootMargin\n   */\n  rootMargin?: string\n}\n\n/**\n * \u66DD\u5149\u68C0\u6D4B Hook\n * \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5143\u7D20\u662F\u5426\u81F3\u5C11 50% \u53EF\u89C1\u4E14\u505C\u7559\u65F6\u95F4\u8D85\u8FC7\u6307\u5B9A\u65F6\u95F4\n * \u786E\u4FDD\u5728\u6574\u4E2A\u9875\u9762\u751F\u547D\u5468\u671F\u4E2D\u53EA\u66DD\u5149\u4E00\u6B21\n *\n * @param elementRef - \u8981\u68C0\u6D4B\u7684\u5143\u7D20\u7684 ref\n * @param options - \u914D\u7F6E\u9009\u9879\n * @returns \u8FD4\u56DE\u6E05\u9664\u8BA1\u65F6\u5668\u7684\u65B9\u6CD5\uFF08\u7528\u4E8E\u5207\u6362\u65F6\u6E05\u7406\uFF09\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const ref = useRef<HTMLDivElement>(null)\n *   const { clearTimer } = useExposureDetection(ref, {\n *     exposureKey: 'my-component-1',\n *     threshold: 0.5,\n *     duration: 2000,\n *     onExposure: () => {\n *       console.log('\u5143\u7D20\u5DF2\u66DD\u5149')\n *     }\n *   })\n *\n *   return <div ref={ref}>\u5185\u5BB9</div>\n * }\n * ```\n */\nexport const useExposureDetection = (\n  elementRef: RefObject<HTMLElement>,\n  options: UseExposureDetectionOptions = {}\n) => {\n  const {\n    exposureKey,\n    threshold = 0.5,\n    duration = 2000,\n    once = true,\n    onExposure,\n    rootMargin = '0px',\n  } = options\n\n  const exposureTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const generatedKeyRef = useRef<string | null>(null)\n\n  // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\n  const getExposureKey = useCallback(() => {\n    if (exposureKey) {\n      return exposureKey\n    }\n    // \u5982\u679C\u6CA1\u6709\u63D0\u4F9B key\uFF0C\u5C1D\u8BD5\u4F7F\u7528\u5143\u7D20\u7684\u552F\u4E00\u6807\u8BC6\n    if (elementRef.current && !generatedKeyRef.current) {\n      // \u4F7F\u7528\u5143\u7D20\u7684 data-exposure-id \u5C5E\u6027\uFF0C\u6216\u8005\u751F\u6210\u4E00\u4E2A\u57FA\u4E8E\u4F4D\u7F6E\u7684 key\n      const dataId = elementRef.current.getAttribute('data-exposure-id')\n      if (dataId) {\n        generatedKeyRef.current = dataId\n        return dataId\n      }\n      // \u5982\u679C\u6CA1\u6709 data-exposure-id\uFF0C\u4F7F\u7528\u5143\u7D20\u5728 DOM \u4E2D\u7684\u4F4D\u7F6E\u751F\u6210 key\n      const path: string[] = []\n      let el: Element | null = elementRef.current\n      while (el && el !== document.body) {\n        const index = Array.from(el.parentElement?.children || []).indexOf(el)\n        path.unshift(`${el.tagName.toLowerCase()}[${index}]`)\n        el = el.parentElement\n      }\n      generatedKeyRef.current = path.join(' > ')\n      return generatedKeyRef.current\n    }\n    return generatedKeyRef.current || ''\n  }, [exposureKey, elementRef])\n\n  // \u6E05\u9664\u8BA1\u65F6\u5668\u7684\u65B9\u6CD5\uFF08\u4E0D\u91CD\u7F6E\u66DD\u5149\u72B6\u6001\uFF09\n  const clearTimer = useCallback(() => {\n    if (exposureTimerRef.current) {\n      clearTimeout(exposureTimerRef.current)\n      exposureTimerRef.current = null\n    }\n  }, [])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || !onExposure) return\n\n    const key = getExposureKey()\n    if (!key) {\n      console.warn('useExposureDetection: \u65E0\u6CD5\u751F\u6210\u552F\u4E00\u7684 exposureKey\uFF0C\u8BF7\u63D0\u4F9B exposureKey \u53C2\u6570')\n      return\n    }\n\n    // \u5982\u679C\u5DF2\u7ECF\u66DD\u5149\u8FC7\u4E14\u8BBE\u7F6E\u4E86 once\uFF0C\u76F4\u63A5\u8FD4\u56DE\uFF0C\u4E0D\u518D\u76D1\u542C\n    if (once && exposedElementsSet.has(key)) {\n      return\n    }\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          // \u5982\u679C\u53EF\u89C1\u6027\u8FBE\u5230\u9608\u503C\uFF08\u9ED8\u8BA4 50%\uFF09\n          if (entry.intersectionRatio >= threshold) {\n            // \u5982\u679C\u8FD8\u6CA1\u6709\u89E6\u53D1\u8FC7\u66DD\u5149\u4E14\u6CA1\u6709\u6B63\u5728\u8BA1\u65F6\u7684\u8BA1\u65F6\u5668\uFF0C\u5F00\u59CB\u8BA1\u65F6\n            if ((!once || !exposedElementsSet.has(key)) && !exposureTimerRef.current) {\n              exposureTimerRef.current = setTimeout(() => {\n                // \u518D\u6B21\u68C0\u67E5\u662F\u5426\u5DF2\u66DD\u5149\uFF08\u9632\u6B62\u5728\u8BA1\u65F6\u671F\u95F4\u88AB\u5176\u4ED6\u64CD\u4F5C\u89E6\u53D1\uFF09\n                if (once && exposedElementsSet.has(key)) return\n\n                // \u6807\u8BB0\u4E3A\u5DF2\u66DD\u5149\n                if (once) {\n                  exposedElementsSet.add(key)\n                }\n                // \u89E6\u53D1\u66DD\u5149\u4E8B\u4EF6\n                onExposure()\n              }, duration)\n            }\n          } else {\n            // \u5982\u679C\u53EF\u89C1\u6027\u4F4E\u4E8E\u9608\u503C\uFF0C\u6E05\u9664\u8BA1\u65F6\u5668\uFF08\u4F46\u4E0D\u79FB\u9664\u66DD\u5149\u6807\u8BB0\uFF09\n            if (exposureTimerRef.current) {\n              clearTimeout(exposureTimerRef.current)\n              exposureTimerRef.current = null\n            }\n          }\n        })\n      },\n      {\n        threshold: threshold,\n        rootMargin: rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n      if (exposureTimerRef.current) {\n        clearTimeout(exposureTimerRef.current)\n        exposureTimerRef.current = null\n      }\n    }\n  }, [elementRef, onExposure, threshold, duration, once, rootMargin, getExposureKey])\n\n  return { clearTimer }\n}\n\n/**\n * \u6E05\u9664\u6307\u5B9A key \u7684\u66DD\u5149\u8BB0\u5F55\uFF08\u7528\u4E8E\u6D4B\u8BD5\u6216\u7279\u6B8A\u573A\u666F\uFF09\n */\nexport const clearExposureRecord = (key: string) => {\n  exposedElementsSet.delete(key)\n}\n\n/**\n * \u6E05\u9664\u6240\u6709\u66DD\u5149\u8BB0\u5F55\uFF08\u7528\u4E8E\u6D4B\u8BD5\u6216\u7279\u6B8A\u573A\u666F\uFF09\n */\nexport const clearAllExposureRecords = () => {\n  exposedElementsSet.clear()\n}\n\n/**\n * \u68C0\u67E5\u6307\u5B9A key \u662F\u5426\u5DF2\u66DD\u5149\n */\nexport const hasExposed = (key: string): boolean => {\n  return exposedElementsSet.has(key)\n}\n\n"],
+  "mappings": "AAAA,OAAyB,UAAAA,EAAQ,aAAAC,EAAW,eAAAC,MAAmB,QAG/D,MAAMC,EAAqB,IAAI,IAwDlBC,EAAuB,CAClCC,EACAC,EAAuC,CAAC,IACrC,CACH,KAAM,CACJ,YAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,IACX,KAAAC,EAAO,GACP,WAAAC,EACA,WAAAC,EAAa,KACf,EAAIN,EAEEO,EAAmBb,EAA8B,IAAI,EACrDc,EAAkBd,EAAsB,IAAI,EAG5Ce,EAAiBb,EAAY,IAAM,CACvC,GAAIK,EACF,OAAOA,EAGT,GAAIF,EAAW,SAAW,CAACS,EAAgB,QAAS,CAElD,MAAME,EAASX,EAAW,QAAQ,aAAa,kBAAkB,EACjE,GAAIW,EACF,OAAAF,EAAgB,QAAUE,EACnBA,EAGT,MAAMC,EAAiB,CAAC,EACxB,IAAIC,EAAqBb,EAAW,QACpC,KAAOa,GAAMA,IAAO,SAAS,MAAM,CACjC,MAAMC,EAAQ,MAAM,KAAKD,EAAG,eAAe,UAAY,CAAC,CAAC,EAAE,QAAQA,CAAE,EACrED,EAAK,QAAQ,GAAGC,EAAG,QAAQ,YAAY,CAAC,IAAIC,CAAK,GAAG,EACpDD,EAAKA,EAAG,aACV,CACA,OAAAJ,EAAgB,QAAUG,EAAK,KAAK,KAAK,EAClCH,EAAgB,OACzB,CACA,OAAOA,EAAgB,SAAW,EACpC,EAAG,CAACP,EAAaF,CAAU,CAAC,EAGtBe,EAAalB,EAAY,IAAM,CAC/BW,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAE/B,EAAG,CAAC,CAAC,EAEL,OAAAZ,EAAU,IAAM,CACd,MAAMoB,EAAUhB,EAAW,QAC3B,GAAI,CAACgB,GAAW,CAACV,EAAY,OAE7B,MAAMW,EAAMP,EAAe,EAC3B,GAAI,CAACO,EAAK,CACR,QAAQ,KAAK,+HAA8D,EAC3E,MACF,CAGA,GAAIZ,GAAQP,EAAmB,IAAImB,CAAG,EACpC,OAGF,MAAMC,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CAEnBA,EAAM,mBAAqBjB,GAExB,CAACE,GAAQ,CAACP,EAAmB,IAAImB,CAAG,IAAM,CAACT,EAAiB,UAC/DA,EAAiB,QAAU,WAAW,IAAM,CAEtCH,GAAQP,EAAmB,IAAImB,CAAG,IAGlCZ,GACFP,EAAmB,IAAImB,CAAG,EAG5BX,EAAW,EACb,EAAGF,CAAQ,GAITI,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAGjC,CAAC,CACH,EACA,CACE,UAAWL,EACX,WAAYI,CACd,CACF,EAEA,OAAAW,EAAS,QAAQF,CAAO,EAEjB,IAAM,CACXE,EAAS,WAAW,EAChBV,EAAiB,UACnB,aAAaA,EAAiB,OAAO,EACrCA,EAAiB,QAAU,KAE/B,CACF,EAAG,CAACR,EAAYM,EAAYH,EAAWC,EAAUC,EAAME,EAAYG,CAAc,CAAC,EAE3E,CAAE,WAAAK,CAAW,CACtB,EAKaM,EAAuBJ,GAAgB,CAClDnB,EAAmB,OAAOmB,CAAG,CAC/B,EAKaK,EAA0B,IAAM,CAC3CxB,EAAmB,MAAM,CAC3B,EAKayB,EAAcN,GAClBnB,EAAmB,IAAImB,CAAG",
+  "names": ["useRef", "useEffect", "useCallback", "exposedElementsSet", "useExposureDetection", "elementRef", "options", "exposureKey", "threshold", "duration", "once", "onExposure", "rootMargin", "exposureTimerRef", "generatedKeyRef", "getExposureKey", "dataId", "path", "el", "index", "clearTimer", "element", "key", "observer", "entries", "entry", "clearExposureRecord", "clearAllExposureRecords", "hasExposed"]
+}

package/package.json

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