npm - @anker-in/headless-ui - Versions diffs - 1.1.9-alpha.1764590742027 → 1.1.9-alpha.1764672257595 - Mend

@anker-in/headless-ui 1.1.9-alpha.1764590742027 → 1.1.9-alpha.1764672257595

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n  data: MediaSceneSwitcherItem\n  configuration?: {\n    index: number\n    isActive?: boolean\n    onItemClick?: (index: number) => void\n  }\n  theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n        'text-[#6D6D6F]',\n        {\n          'bg-[#1D1D1F] text-white': isActive,\n          'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n        }\n      )}\n      onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n    >\n      <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n        <div className=\"media-scene-switcher-item-title flex-1\">\n          <Heading as=\"h6\" size={2} html={data?.title} />\n        </div>\n        <div className=\"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]\">\n          <Heading as=\"h6\" size={2} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, -2px, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n  const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n  const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <div\n      ref={ref}\n      className={cn('media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden', {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n        {videoUrl ? (\n          <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n        ) : imageUrl ? (\n          <Picture\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            source={imageUrl}\n            alt={data?.title || ''}\n          />\n        ) : null}\n      </div>\n      <div\n        className={cn(\n          'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n          'text-[#6D6D6F]',\n          {\n            'bg-[#1D1D1F] text-white': isActive,\n            'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n          }\n        )}\n      >\n        <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n          <Heading as=\"h6\" size={2} html={data?.title} />\n        </div>\n        <div className=\"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]\">\n          <Heading as=\"h6\" size={1} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, -2px, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n  ({ className = '', data, id, style }, ref) => {\n    const { title, subtitle, items = [], theme = 'light' } = data || {}\n    const [currentIndex, setCurrentIndex] = useState(0)\n    const [activeIndex, setActiveIndex] = useState(0)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const intervalRef = useRef<number>(0)\n    const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n    })\n\n    // Auto-play functionality for desktop\n    useEffect(() => {\n      if (isMobile || items.length === 0) return\n\n      intervalRef.current = window.setInterval(() => {\n        setCurrentIndex(prev => (prev + 1) % items.length)\n      }, INTERVAL_TIME)\n\n      return () => {\n        if (intervalRef.current) {\n          window.clearInterval(intervalRef.current)\n        }\n      }\n    }, [isMobile, items.length])\n\n    const handleItemClick = (index: number) => {\n      setCurrentIndex(index)\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current)\n      }\n      intervalRef.current = window.setInterval(() => {\n        setCurrentIndex(prev => (prev + 1) % items.length)\n      }, INTERVAL_TIME)\n    }\n\n    const currentItem = items[currentIndex]\n    const videoUrl = currentItem?.videoUrl?.url\n    const imageUrl = currentItem?.imageUrl?.url\n    const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n    return (\n      <>\n        <style>{`\n          @keyframes progress-bar {\n            from {\n              transform: translate3d(-100%, -2px, 0);\n            }\n            to {\n              transform: translate3d(0, -2px, 0);\n            }\n          }\n        `}</style>\n        <section\n          id={id}\n          ref={innerRef}\n          className={cn(\n            'media-scene-switcher text-info-primary w-full overflow-hidden',\n            {\n              'aiui-dark': theme === 'dark',\n            },\n            className\n          )}\n        >\n          {/* Desktop Layout */}\n          <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n            <div className=\"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden\">\n              {items.map((item, index) => {\n                const itemVideoUrl = item?.videoUrl?.url\n                const itemImageUrl = item?.imageUrl?.url\n                const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n                return (\n                  <div\n                    key={item.id || index}\n                    className={cn(\n                      'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n                      {\n                        'inline-block': index === currentIndex,\n                      }\n                    )}\n                  >\n                    {itemVideoUrl ? (\n                      <video\n                        src={itemVideoUrl}\n                        playsInline\n                        autoPlay\n                        loop\n                        muted\n                        poster={itemPosterUrl}\n                        className=\"size-full object-cover\"\n                      />\n                    ) : itemImageUrl ? (\n                      <Picture\n                        className=\"size-full\"\n                        imgClassName=\"size-full object-cover\"\n                        source={itemImageUrl}\n                        alt={item?.title || ''}\n                      />\n                    ) : null}\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n              <div className=\"media-scene-switcher-header flex flex-col\">\n                {title && (\n                  <Heading\n                    as=\"h3\"\n                    html={title}\n                    size={4}\n                    className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n                  />\n                )}\n                {subtitle && (\n                  <Text\n                    as=\"span\"\n                    size={4}\n                    html={subtitle}\n                    className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white\"\n                  />\n                )}\n              </div>\n\n              <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n                {items.map((item, index) => (\n                  <DesktopItem\n                    key={item.id || index}\n                    data={item}\n                    configuration={{\n                      index,\n                      isActive: index === currentIndex,\n                      onItemClick: handleItemClick,\n                    }}\n                    theme={theme}\n                  />\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Mobile Layout */}\n          <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n            <div className=\"media-scene-switcher-mobile-header\">\n              {title && (\n                <Heading\n                  as=\"h2\"\n                  html={title}\n                  size={2}\n                  className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n                />\n              )}\n              {subtitle && (\n                <Text\n                  as=\"span\"\n                  size={4}\n                  html={subtitle}\n                  className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n                />\n              )}\n            </div>\n\n            <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n              <Swiper\n                onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n                initialSlide={0}\n                modules={[Autoplay]}\n                loop={items.length > 1}\n                autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n                spaceBetween={12}\n                slidesPerView=\"auto\"\n                watchSlidesProgress={true}\n                className=\"w-full !overflow-visible\"\n              >\n                {items.map((item, index) => (\n                  <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n                    <MobileItem\n                      data={item}\n                      configuration={{\n                        index,\n                        isActive: index === activeIndex,\n                      }}\n                      theme={theme}\n                    />\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        </section>\n      </>\n    )\n  }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "useMediaQuery", "cn", "withLayout", "Heading", "Text", "Picture", "useExposure", "Swiper", "SwiperSlide", "Autoplay", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "style", "title", "subtitle", "items", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper", "MediaSceneSwitcher_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n  data: MediaSceneSwitcherItem\n  configuration?: {\n    index: number\n    isActive?: boolean\n    onItemClick?: (index: number) => void\n  }\n  theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n        'relative text-[#6D6D6F]',\n        isActive ? 'opacity-100' : 'opacity-60',\n        {\n          'bg-[#1D1D1F] text-white': isActive,\n          'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n        }\n      )}\n      onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n    >\n      <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n        <div className=\"media-scene-switcher-item-title flex-1\">\n          <Heading as=\"h6\" size={2} html={data?.title} />\n        </div>\n        <div\n          className={cn(\n            'media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={2} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n  const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n  const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <div\n      ref={ref}\n      className={cn('media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden', {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n        {videoUrl ? (\n          <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n        ) : imageUrl ? (\n          <Picture\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            source={imageUrl}\n            alt={data?.title || ''}\n          />\n        ) : null}\n      </div>\n      <div\n        className={cn(\n          'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n          'text-[#6D6D6F]',\n          {\n            'bg-[#1D1D1F] text-white': isActive,\n            'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n          }\n        )}\n      >\n        <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n          <Heading as=\"h6\" size={2} html={data?.title} />\n        </div>\n        <div\n          className={cn(\n            'media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={1} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(({ className = '', data, id }, ref) => {\n  const { title, subtitle, items = [], theme = 'light', layout, titleIcon } = data || {}\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const intervalRef = useRef<number>(0)\n  const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  // Auto-play functionality for desktop\n  useEffect(() => {\n    if (isMobile || items.length === 0) return\n\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n\n    return () => {\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current)\n      }\n    }\n  }, [isMobile, items.length])\n\n  const handleItemClick = (index: number) => {\n    setCurrentIndex(index)\n    if (intervalRef.current) {\n      window.clearInterval(intervalRef.current)\n    }\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n  }\n\n  const currentItem = items[currentIndex]\n  const videoUrl = currentItem?.videoUrl?.url\n  const imageUrl = currentItem?.imageUrl?.url\n  const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <>\n      <style>{`\n          @keyframes progress-bar {\n            from {\n              transform: translate3d(-100%, 0, 0);\n            }\n            to {\n              transform: translate3d(0, 0, 0);\n            }\n          }\n        `}</style>\n      <section\n        id={id}\n        ref={innerRef}\n        className={cn(\n          'media-scene-switcher text-info-primary w-full overflow-hidden',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className\n        )}\n      >\n        {/* Desktop Layout */}\n        <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n          <div\n            className={cn(\n              'media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden',\n              {\n                'order-1': layout === 'right',\n              }\n            )}\n          >\n            {items.map((item, index) => {\n              const itemVideoUrl = item?.videoUrl?.url\n              const itemImageUrl = item?.imageUrl?.url\n              const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n              return (\n                <div\n                  key={item.id || index}\n                  className={cn(\n                    'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n                    {\n                      'inline-block': index === currentIndex,\n                    }\n                  )}\n                >\n                  {itemVideoUrl ? (\n                    <video\n                      src={itemVideoUrl}\n                      playsInline\n                      autoPlay\n                      loop\n                      muted\n                      poster={itemPosterUrl}\n                      className=\"size-full object-cover\"\n                    />\n                  ) : itemImageUrl ? (\n                    <Picture\n                      className=\"size-full\"\n                      imgClassName=\"size-full object-cover\"\n                      source={itemImageUrl}\n                      alt={item?.title || ''}\n                    />\n                  ) : null}\n                </div>\n              )\n            })}\n          </div>\n\n          <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n            <div className=\"media-scene-switcher-header flex flex-col\">\n              <div className=\"desktop:gap-2 flex items-center gap-1\">\n                {title && (\n                  <Heading\n                    as=\"h3\"\n                    html={title}\n                    size={4}\n                    className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n                  />\n                )}\n                {titleIcon && (\n                  <Picture\n                    source={titleIcon.url}\n                    alt={titleIcon.alt || 'title icon'}\n                    className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                    imgClassName=\"!w-auto h-full\"\n                  />\n                )}\n              </div>\n\n              {subtitle && (\n                <Text\n                  as=\"span\"\n                  size={4}\n                  html={subtitle}\n                  className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]\"\n                />\n              )}\n            </div>\n\n            <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n              {items.map((item, index) => (\n                <DesktopItem\n                  key={item.id || index}\n                  data={item}\n                  configuration={{\n                    index,\n                    isActive: index === currentIndex,\n                    onItemClick: handleItemClick,\n                  }}\n                  theme={theme}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Mobile Layout */}\n        <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n          <div className=\"media-scene-switcher-mobile-header\">\n            {title && (\n              <Heading\n                as=\"h2\"\n                html={title}\n                size={2}\n                className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n              />\n            )}\n            {subtitle && (\n              <Text as=\"span\" size={4} html={subtitle} className=\"media-scene-switcher-subtitle text-[14px]\" />\n            )}\n          </div>\n\n          <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n            <Swiper\n              onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n              initialSlide={0}\n              modules={[Autoplay]}\n              loop={items.length > 1}\n              autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n              spaceBetween={12}\n              slidesPerView=\"auto\"\n              watchSlidesProgress={true}\n              className=\"w-full !overflow-visible\"\n            >\n              {items.map((item, index) => (\n                <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n                  <MobileItem\n                    data={item}\n                    configuration={{\n                      index,\n                      isActive: index === activeIndex,\n                    }}\n                    theme={theme}\n                  />\n                </SwiperSlide>\n              ))}\n            </Swiper>\n          </div>\n        </div>\n      </section>\n    </>\n  )\n})\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "useMediaQuery", "cn", "withLayout", "Heading", "Text", "Picture", "useExposure", "Swiper", "SwiperSlide", "Autoplay", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "title", "subtitle", "items", "layout", "titleIcon", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper", "MediaSceneSwitcher_default"]
 }

package/dist/esm/biz-components/MediaSceneSwitcher/types.d.ts CHANGED Viewed

@@ -10,10 +10,12 @@ export interface MediaSceneSwitcherItem {
 }
 export interface MediaSceneSwitcherProps extends ComponentCommonProps {
     data: {
+        titleIcon?: Media;
         title?: string;
         subtitle?: string;
         items?: MediaSceneSwitcherItem[];
         /** 主题，默认 light */
         theme?: Theme;
+        layout?: 'left' | 'right';
     };
 }

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useEffect as T,useRef as I,useState as M}from"react";import{Heading as x,Text as P}from"../../components/index.js";import{cn as l}from"../../helpers/index.js";import{withLayout as R}from"../../shared/Styles.js";function k({children:e,offset:a=800}){const[r,i]=M(!1),p=I(null);return T(()=>{const o=new IntersectionObserver(([u])=>u.isIntersecting&&i(!0),{rootMargin:`${a}px`});return p.current&&o.observe(p.current),()=>o.disconnect()},[a]),t("div",{ref:p,className:"size-full",children:r&&e})}function g({media:e,poster:a,className:r}){return e?.url?e.mimeType?.startsWith("video/")?t("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:a?.url||"",preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,"webkit-playsinline":"true","x5-video-player-type":"h5","x5-video-player-fullscreen":"false","x5-playsinline":"true",className:r,width:e.width,height:e.height}):t("img",{src:e.url,alt:e.alt||"",className:r,width:e.width,height:e.height}):null}function z(e,a,r){return a===2?r==="1:1"?"laptop:flex-[1]":e===0?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]"}function C(e){const{title:a,titleType:r="primary",titleIcon:i,subtitle:p,subtitleImage:o,textAlign:u="left",products:n=[],twoImageRatio:h="2:3",threeImageRatio:L="1:1:1",theme:b="light"}=e.data,m=u==="center"?"text-center":"text-left laptop:text-left",f=()=>r==="secondary"?3:4,y=()=>a?r==="selling-point"&&i?d("div",{className:l("product-compare-title-wrapper flex items-center gap-[8px]",m==="text-center"?"justify-center":""),children:[t("img",{src:i.url,alt:i.alt||"",className:"product-compare-title-icon laptop:size-[32px] size-[24px]"}),t(x,{as:"h2",size:f(),html:a,className:"product-compare-title",style:{color:"#00BEFA"}})]}):t(x,{as:"h2",size:f(),html:a,className:l("product-compare-title",m)}):null;return d("section",{className:l("product-compare text-info-primary",e.className,{"aiui-dark":b==="dark"}),children:[y(),p&&t(P,{as:"p",size:2,html:p,className:l("product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",m)}),o&&t("div",{className:l("product-compare-subtitle-image laptop:mt-[24px] mt-[16px]",m==="text-center"?"flex justify-center":""),children:t("img",{src:o.url,alt:o.alt||"",className:"max-w-full",width:o.width,height:o.height})}),t("div",{className:"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]",children:n.map((s,c)=>{const v=c===n.length-1,w=z(c,n.length,h),N=v?"bg-brand-0":"bg-[rgba(0,0,0,0.2)]";return d("div",{className:l("product-compare-item rounded-box relative shrink overflow-hidden",w,{"order-2 tablet:order-1":c===0&&n.length===2,"order-1 tablet:order-2":c===1&&n.length===2}),children:[s.text&&t("div",{className:l("product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white",N),children:t(x,{as:"h6",className:"font-bold",size:1,children:s.text})}),d(k,{offset:1500,children:[t(g,{media:s.media,poster:s.poster,className:"product-compare-media laptop:block hidden size-full object-cover"}),t(g,{media:s.mobMedia,poster:s.mobPoster,className:"product-compare-media-mobile laptop:hidden block w-full"})]})]},c)})})]})}var H=R(C);export{H as default};
+import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useEffect as T,useRef as I,useState as M}from"react";import{Heading as x,Text as P}from"../../components/index.js";import{cn as i}from"../../helpers/index.js";import{withLayout as R}from"../../shared/Styles.js";function k({children:e,offset:a=800}){const[o,p]=M(!1),s=I(null);return T(()=>{const l=new IntersectionObserver(([u])=>u.isIntersecting&&p(!0),{rootMargin:`${a}px`});return s.current&&l.observe(s.current),()=>l.disconnect()},[a]),t("div",{ref:s,className:"size-full",children:o&&e})}function g({media:e,poster:a,className:o}){return e?.url?e.mimeType?.startsWith("video/")?t("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:a?.url||"",preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,"webkit-playsinline":"true","x5-video-player-type":"h5","x5-video-player-fullscreen":"false","x5-playsinline":"true",className:o,width:e.width,height:e.height}):t("img",{src:e.url,alt:e.alt||"",className:o,width:e.width,height:e.height}):null}function z(e,a,o){return a===2?o==="1:1"?"laptop:flex-[1]":e===0?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]"}function C(e){const{title:a,titleType:o="primary",titleIcon:p,subtitle:s,subtitleImage:l,textAlign:u="left",products:n=[],twoImageRatio:h="2:3",threeImageRatio:L="1:1:1",theme:b="light"}=e.data,m=u==="center"?"text-center":"text-left laptop:text-left",f=()=>o==="secondary"?3:4,y=()=>a?o==="selling-point"&&p?d("div",{className:i("product-compare-title-wrapper flex items-center gap-[8px]",m==="text-center"?"justify-center":""),children:[t("img",{src:p.url,alt:p.alt||"",className:"product-compare-title-icon laptop:size-[32px] size-[24px]"}),t(x,{as:"h2",size:f(),html:a,className:"product-compare-title",style:{color:"#00BEFA"}})]}):t(x,{as:"h2",size:f(),html:a,className:i("product-compare-title",m)}):null;return d("section",{className:i("product-compare text-info-primary",e.className,{"aiui-dark":b==="dark"}),children:[y(),s&&t(P,{as:"p",size:2,html:s,className:i("product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",m)}),l&&t("div",{className:i("product-compare-subtitle-image laptop:mt-[24px] mt-[16px]",m==="text-center"?"flex justify-center":""),children:t("img",{src:l.url,alt:l.alt||"",className:"max-w-full",width:l.width,height:l.height})}),t("div",{className:"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]",children:n.map((r,c)=>{const v=c===n.length-1,w=z(c,n.length,h),N=v?"bg-brand-0":"bg-[rgba(0,0,0,0.2)]";return d("div",{className:i("product-compare-item rounded-box relative shrink overflow-hidden",w,{"order-2 tablet:order-1":c===0&&n.length===2,"order-1 tablet:order-2":c===1&&n.length===2}),children:[r.text&&t("div",{className:i("product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white",N),children:t(x,{as:"h6",className:"font-bold",size:1,children:r.text})}),d(k,{offset:1500,children:[t(g,{media:r.media,poster:r.poster,className:"product-compare-media laptop:block hidden size-full object-cover"}),t(g,{media:r.mobMedia?.id?r.mobMedia:r.media,poster:r.mobPoster?.id?r.mobPoster:r.poster,className:"product-compare-media-mobile laptop:hidden block w-full"})]})]},c)})})]})}var H=R(C);export{H as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductCompare/index.tsx"],
-  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n  const [loaded, setLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setLoaded(true), {\n      rootMargin: `${offset}px`,\n    })\n    ref.current && observer.observe(ref.current)\n    return () => observer.disconnect()\n  }, [offset])\n\n  return (\n    <div ref={ref} className=\"size-full\">\n      {loaded && children}\n    </div>\n  )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; className?: string }) {\n  if (!media?.url) return null\n\n  const isVideo = media.mimeType?.startsWith('video/')\n\n  if (isVideo) {\n    return (\n      <video\n        src={media.url}\n        playsInline\n        autoPlay\n        muted\n        loop\n        poster={poster?.url || ''}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        webkit-playsinline=\"true\"\n        x5-video-player-type=\"h5\"\n        x5-video-player-fullscreen=\"false\"\n        x5-playsinline=\"true\"\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n\n  return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\n}\n\nexport interface ProductItemData {\n  /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n  text?: string\n  /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  media?: Media\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  mobMedia?: Media\n  /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  poster?: Media\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: Media\n}\n\n/** \u6807\u9898\u7C7B\u578B */\nexport type TitleType = 'selling-point' | 'primary' | 'secondary'\n\n/** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F */\nexport type TextAlign = 'left' | 'center'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF082\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type TwoImageRatio = '2:3' | '1:1'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF083\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type ThreeImageRatio = '1:1:1'\n\nexport interface ProductCompareProps {\n  /** \u7EC4\u4EF6\u6570\u636E */\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title?: string\n    /** \u6807\u9898\u7C7B\u578B\uFF1Aselling-point\uFF08\u5356\u70B9\uFF09\u3001primary\uFF08\u4E00\u7EA7\u6807\u9898\uFF09\u3001secondary\uFF08\u4E8C\u7EA7\u6807\u9898\uFF09 */\n    titleType?: TitleType\n    /** \u6807\u9898\u56FE\u6807\uFF08\u4EC5\u5F53 titleType \u4E3A selling-point \u65F6\u6709\u6548\uFF09 */\n    titleIcon?: Media\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** \u526F\u6807\u9898\u4E0B\u65B9\u7684\u56FE\u7247 */\n    subtitleImage?: Media\n    /** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF1Aleft\uFF08\u5DE6\u5BF9\u9F50\uFF09\u3001center\uFF08\u5C45\u4E2D\uFF09 */\n    textAlign?: TextAlign\n    /** \u4EA7\u54C1\u5217\u8868\uFF08\u652F\u63012-3\u4E2A\u4EA7\u54C1\uFF09 */\n    products?: ProductItemData[]\n    /** 2\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    twoImageRatio?: TwoImageRatio\n    /** 3\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    threeImageRatio?: ThreeImageRatio\n    /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n    theme?: Theme\n  }\n  /** \u5916\u5C42\u5BB9\u5668\u7C7B\u540D */\n  className?: string\n}\n\n/**\n * \u6839\u636E\u4EA7\u54C1\u6570\u91CF\u548C\u6BD4\u4F8B\u83B7\u53D6\u5E03\u5C40\u7C7B\u540D\n */\nfunction getProductLayoutClasses(index: number, totalProducts: number, twoImageRatio?: TwoImageRatio): string {\n  if (totalProducts === 2) {\n    if (twoImageRatio === '1:1') {\n      return 'laptop:flex-[1]'\n    }\n    // \u9ED8\u8BA4 2:3 \u6BD4\u4F8B\n    return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n  }\n\n  if (totalProducts === 3) {\n    // 1:1:1 \u6BD4\u4F8B\n    return 'laptop:flex-[1]'\n  }\n\n  return 'laptop:flex-[1]'\n}\n\nfunction ProductCompare(props: ProductCompareProps) {\n  const {\n    title,\n    titleType = 'primary',\n    titleIcon,\n    subtitle,\n    subtitleImage,\n    textAlign = 'left',\n    products = [],\n    twoImageRatio = '2:3',\n    threeImageRatio = '1:1:1',\n    theme = 'light',\n  } = props.data\n\n  // \u6587\u672C\u5BF9\u9F50\u7C7B\u540D\n  const alignClasses = textAlign === 'center' ? 'text-center' : 'text-left laptop:text-left'\n\n  // \u6839\u636E\u6807\u9898\u7C7B\u578B\u786E\u5B9A Heading size \u548C\u6837\u5F0F\n  const getTitleSize = () => {\n    if (titleType === 'secondary') return 3\n    return 4\n  }\n\n  // \u6E32\u67D3\u6807\u9898\n  const renderTitle = () => {\n    if (!title) return null\n\n    // \u5356\u70B9\u6807\u9898\uFF08\u5305\u542B\u56FE\u6807\uFF09\n    if (titleType === 'selling-point' && titleIcon) {\n      return (\n        <div\n          className={cn(\n            'product-compare-title-wrapper flex items-center gap-[8px]',\n            alignClasses === 'text-center' ? 'justify-center' : ''\n          )}\n        >\n          <img\n            src={titleIcon.url}\n            alt={titleIcon.alt || ''}\n            className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n          />\n          <Heading\n            as=\"h2\"\n            size={getTitleSize()}\n            html={title}\n            className=\"product-compare-title\"\n            style={{ color: '#00BEFA' }}\n          />\n        </div>\n      )\n    }\n\n    // \u666E\u901A\u6807\u9898\n    return <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n  }\n\n  return (\n    <section\n      className={cn('product-compare text-info-primary', props.className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      {renderTitle()}\n\n      {/* \u526F\u6807\u9898 */}\n      {subtitle && (\n        <Text\n          as=\"p\"\n          size={2}\n          html={subtitle}\n          className={cn(\n            'product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            alignClasses\n          )}\n        />\n      )}\n\n      {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n      {subtitleImage && (\n        <div\n          className={cn(\n            'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n            alignClasses === 'text-center' ? 'flex justify-center' : ''\n          )}\n        >\n          <img\n            src={subtitleImage.url}\n            alt={subtitleImage.alt || ''}\n            className=\"max-w-full\"\n            width={subtitleImage.width}\n            height={subtitleImage.height}\n          />\n        </div>\n      )}\n\n      {/* \u4EA7\u54C1\u5BF9\u6BD4\u5361\u7247\u5BB9\u5668 */}\n      <div className=\"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\n        {products.map((product, index) => {\n          const isLastProduct = index === products.length - 1\n          const layoutClasses = getProductLayoutClasses(index, products.length, twoImageRatio)\n\n          // \u6807\u7B7E\u6837\u5F0F\uFF1A\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1\u7528 bg-brand-0\uFF0C\u5176\u4ED6\u7528 rgba(0,0,0,0.2)\n          const labelBgClass = isLastProduct ? 'bg-brand-0' : 'bg-[rgba(0,0,0,0.2)]'\n\n          return (\n            <div\n              key={index}\n              className={cn('product-compare-item rounded-box relative shrink overflow-hidden', layoutClasses, {\n                'order-2 tablet:order-1': index === 0 && products.length === 2,\n                'order-1 tablet:order-2': index === 1 && products.length === 2,\n              })}\n            >\n              {/* \u4EA7\u54C1\u6807\u7B7E */}\n              {product.text && (\n                <div\n                  className={cn(\n                    'product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white',\n                    labelBgClass\n                  )}\n                >\n                  <Heading as=\"h6\" className=\"font-bold\" size={1}>\n                    {product.text}\n                  </Heading>\n                </div>\n              )}\n\n              {/* \u4EA7\u54C1\u5A92\u4F53 */}\n              <LazyMedia offset={1500}>\n                <MediaElement\n                  media={product.media}\n                  poster={product.poster}\n                  className=\"product-compare-media laptop:block hidden size-full object-cover\"\n                />\n                <MediaElement\n                  media={product.mobMedia}\n                  poster={product.mobPoster}\n                  className=\"product-compare-media-mobile laptop:hidden block w-full\"\n                />\n              </LazyMedia>\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n  const [loaded, setLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setLoaded(true), {\n      rootMargin: `${offset}px`,\n    })\n    ref.current && observer.observe(ref.current)\n    return () => observer.disconnect()\n  }, [offset])\n\n  return (\n    <div ref={ref} className=\"size-full\">\n      {loaded && children}\n    </div>\n  )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; className?: string }) {\n  if (!media?.url) return null\n\n  const isVideo = media.mimeType?.startsWith('video/')\n\n  if (isVideo) {\n    return (\n      <video\n        src={media.url}\n        playsInline\n        autoPlay\n        muted\n        loop\n        poster={poster?.url || ''}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        webkit-playsinline=\"true\"\n        x5-video-player-type=\"h5\"\n        x5-video-player-fullscreen=\"false\"\n        x5-playsinline=\"true\"\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n\n  return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\n}\n\nexport interface ProductItemData {\n  /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n  text?: string\n  /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  media?: Media\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  mobMedia?: Media\n  /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  poster?: Media\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: Media\n}\n\n/** \u6807\u9898\u7C7B\u578B */\nexport type TitleType = 'selling-point' | 'primary' | 'secondary'\n\n/** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F */\nexport type TextAlign = 'left' | 'center'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF082\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type TwoImageRatio = '2:3' | '1:1'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF083\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type ThreeImageRatio = '1:1:1'\n\nexport interface ProductCompareProps {\n  /** \u7EC4\u4EF6\u6570\u636E */\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title?: string\n    /** \u6807\u9898\u7C7B\u578B\uFF1Aselling-point\uFF08\u5356\u70B9\uFF09\u3001primary\uFF08\u4E00\u7EA7\u6807\u9898\uFF09\u3001secondary\uFF08\u4E8C\u7EA7\u6807\u9898\uFF09 */\n    titleType?: TitleType\n    /** \u6807\u9898\u56FE\u6807\uFF08\u4EC5\u5F53 titleType \u4E3A selling-point \u65F6\u6709\u6548\uFF09 */\n    titleIcon?: Media\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** \u526F\u6807\u9898\u4E0B\u65B9\u7684\u56FE\u7247 */\n    subtitleImage?: Media\n    /** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF1Aleft\uFF08\u5DE6\u5BF9\u9F50\uFF09\u3001center\uFF08\u5C45\u4E2D\uFF09 */\n    textAlign?: TextAlign\n    /** \u4EA7\u54C1\u5217\u8868\uFF08\u652F\u63012-3\u4E2A\u4EA7\u54C1\uFF09 */\n    products?: ProductItemData[]\n    /** 2\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    twoImageRatio?: TwoImageRatio\n    /** 3\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    threeImageRatio?: ThreeImageRatio\n    /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n    theme?: Theme\n  }\n  /** \u5916\u5C42\u5BB9\u5668\u7C7B\u540D */\n  className?: string\n}\n\n/**\n * \u6839\u636E\u4EA7\u54C1\u6570\u91CF\u548C\u6BD4\u4F8B\u83B7\u53D6\u5E03\u5C40\u7C7B\u540D\n */\nfunction getProductLayoutClasses(index: number, totalProducts: number, twoImageRatio?: TwoImageRatio): string {\n  if (totalProducts === 2) {\n    if (twoImageRatio === '1:1') {\n      return 'laptop:flex-[1]'\n    }\n    // \u9ED8\u8BA4 2:3 \u6BD4\u4F8B\n    return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n  }\n\n  if (totalProducts === 3) {\n    // 1:1:1 \u6BD4\u4F8B\n    return 'laptop:flex-[1]'\n  }\n\n  return 'laptop:flex-[1]'\n}\n\nfunction ProductCompare(props: ProductCompareProps) {\n  const {\n    title,\n    titleType = 'primary',\n    titleIcon,\n    subtitle,\n    subtitleImage,\n    textAlign = 'left',\n    products = [],\n    twoImageRatio = '2:3',\n    threeImageRatio = '1:1:1',\n    theme = 'light',\n  } = props.data\n\n  // \u6587\u672C\u5BF9\u9F50\u7C7B\u540D\n  const alignClasses = textAlign === 'center' ? 'text-center' : 'text-left laptop:text-left'\n\n  // \u6839\u636E\u6807\u9898\u7C7B\u578B\u786E\u5B9A Heading size \u548C\u6837\u5F0F\n  const getTitleSize = () => {\n    if (titleType === 'secondary') return 3\n    return 4\n  }\n\n  // \u6E32\u67D3\u6807\u9898\n  const renderTitle = () => {\n    if (!title) return null\n\n    // \u5356\u70B9\u6807\u9898\uFF08\u5305\u542B\u56FE\u6807\uFF09\n    if (titleType === 'selling-point' && titleIcon) {\n      return (\n        <div\n          className={cn(\n            'product-compare-title-wrapper flex items-center gap-[8px]',\n            alignClasses === 'text-center' ? 'justify-center' : ''\n          )}\n        >\n          <img\n            src={titleIcon.url}\n            alt={titleIcon.alt || ''}\n            className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n          />\n          <Heading\n            as=\"h2\"\n            size={getTitleSize()}\n            html={title}\n            className=\"product-compare-title\"\n            style={{ color: '#00BEFA' }}\n          />\n        </div>\n      )\n    }\n\n    // \u666E\u901A\u6807\u9898\n    return <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n  }\n\n  return (\n    <section\n      className={cn('product-compare text-info-primary', props.className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      {renderTitle()}\n\n      {/* \u526F\u6807\u9898 */}\n      {subtitle && (\n        <Text\n          as=\"p\"\n          size={2}\n          html={subtitle}\n          className={cn(\n            'product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            alignClasses\n          )}\n        />\n      )}\n\n      {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n      {subtitleImage && (\n        <div\n          className={cn(\n            'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n            alignClasses === 'text-center' ? 'flex justify-center' : ''\n          )}\n        >\n          <img\n            src={subtitleImage.url}\n            alt={subtitleImage.alt || ''}\n            className=\"max-w-full\"\n            width={subtitleImage.width}\n            height={subtitleImage.height}\n          />\n        </div>\n      )}\n\n      {/* \u4EA7\u54C1\u5BF9\u6BD4\u5361\u7247\u5BB9\u5668 */}\n      <div className=\"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\n        {products.map((product, index) => {\n          const isLastProduct = index === products.length - 1\n          const layoutClasses = getProductLayoutClasses(index, products.length, twoImageRatio)\n\n          // \u6807\u7B7E\u6837\u5F0F\uFF1A\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1\u7528 bg-brand-0\uFF0C\u5176\u4ED6\u7528 rgba(0,0,0,0.2)\n          const labelBgClass = isLastProduct ? 'bg-brand-0' : 'bg-[rgba(0,0,0,0.2)]'\n\n          return (\n            <div\n              key={index}\n              className={cn('product-compare-item rounded-box relative shrink overflow-hidden', layoutClasses, {\n                'order-2 tablet:order-1': index === 0 && products.length === 2,\n                'order-1 tablet:order-2': index === 1 && products.length === 2,\n              })}\n            >\n              {/* \u4EA7\u54C1\u6807\u7B7E */}\n              {product.text && (\n                <div\n                  className={cn(\n                    'product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white',\n                    labelBgClass\n                  )}\n                >\n                  <Heading as=\"h6\" className=\"font-bold\" size={1}>\n                    {product.text}\n                  </Heading>\n                </div>\n              )}\n\n              {/* \u4EA7\u54C1\u5A92\u4F53 */}\n              <LazyMedia offset={1500}>\n                <MediaElement\n                  media={product.media}\n                  poster={product.poster}\n                  className=\"product-compare-media laptop:block hidden size-full object-cover\"\n                />\n                <MediaElement\n                  media={product.mobMedia?.id ? product.mobMedia : product.media}\n                  poster={product.mobPoster?.id ? product.mobPoster : product.poster}\n                  className=\"product-compare-media-mobile laptop:hidden block w-full\"\n                />\n              </LazyMedia>\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useEffect", "useRef", "useState", "Heading", "Text", "cn", "withLayout", "LazyMedia", "children", "offset", "loaded", "setLoaded", "ref", "observer", "entry", "MediaElement", "media", "poster", "className", "getProductLayoutClasses", "index", "totalProducts", "twoImageRatio", "ProductCompare", "props", "title", "titleType", "titleIcon", "subtitle", "subtitleImage", "textAlign", "products", "threeImageRatio", "theme", "alignClasses", "getTitleSize", "renderTitle", "product", "isLastProduct", "layoutClasses", "labelBgClass", "ProductCompare_default"]
 }

package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as j,jsx as e,jsxs as o}from"react/jsx-runtime";import g,{useRef as p,useImperativeHandle as k}from"react";import{Button as N,Heading as i,Picture as u,Text as h}from"../../components/index.js";import{cn as c}from"../../helpers/utils.js";import{withLayout as y}from"../../shared/Styles.js";import{useExposure as S}from"../../hooks/useExposure.js";import{Swiper as f,SwiperSlide as m}from"swiper/react";import{Navigation as T,EffectCoverflow as C}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";import"swiper/css/effect-coverflow";const L="carousel",E="three_d_carousel",z=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),D=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),w=g.forwardRef(({data:v,className:x},b)=>{const{title:d,items:r=[]}=v,_=r.length<4?[...r,...r]:r,l=p(null),s=p(null);return S(s,{componentType:L,componentName:E,componentTitle:d}),k(b,()=>s.current),o("section",{ref:s,"data-ui-component-id":"ThreeDCarousel",className:c("three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white",x),children:[e(i,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),o("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4",children:[e(f,{onSwiper:t=>l.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[C,T],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}}},children:_.map((t,a)=>e(m,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:n})=>o(j,{children:[e(u,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:c("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg"),imgClassName:"h-full object-cover",style:{filter:n?"":"brightness(50%) contrast(120%)"}}),o("div",{className:c("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!n}),children:[e(i,{as:"h2",size:2,html:t.title}),e(h,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:e(N,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},a))}),o("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>l.current?.slidePrev(),"aria-label":"Previous slide",children:e(z,{})}),e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>l.current?.slideNext(),"aria-label":"Next slide",children:e(D,{})})]})]}),e("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:e(f,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:r.map((t,a)=>o(m,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[e(u,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden shadow-lg",imgClassName:"h-full object-cover"}),o("div",{className:"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",children:[e(i,{as:"h2",size:2,html:t.title}),e(h,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:e("button",{className:"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95",children:t.buttonText})})]})]},a))})})]})});w.displayName="ThreeDCarousel";var A=y(w);export{A as default};
+"use client";import{Fragment as j,jsx as e,jsxs as o}from"react/jsx-runtime";import k,{useRef as u,useImperativeHandle as N}from"react";import{Button as h,Heading as c,Picture as f,Text as m}from"../../components/index.js";import{cn as l}from"../../helpers/utils.js";import{withLayout as y}from"../../shared/Styles.js";import{useExposure as S}from"../../hooks/useExposure.js";import{Swiper as w,SwiperSlide as v}from"swiper/react";import{Navigation as T,EffectCoverflow as C}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";import"swiper/css/effect-coverflow";const L="carousel",E="three_d_carousel",z=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),D=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),x=k.forwardRef(({data:b,className:_},g)=>{const{title:d,items:r=[]}=b,n=r.length<4?[...r,...r]:r,s=u(null),a=u(null);return S(a,{componentType:L,componentName:E,componentTitle:d}),N(g,()=>a.current),o("section",{ref:a,"data-ui-component-id":"ThreeDCarousel",className:l("three-d-carousel laptop:overflow-hidden w-full overflow-visible",_),children:[e(c,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),o("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4",children:[e(w,{onSwiper:t=>s.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[C,T],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}}},children:n.map((t,i)=>e(v,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:p})=>o(j,{children:[e(f,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:l("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden"),imgClassName:"h-full object-cover",style:{filter:p?"":"brightness(50%) contrast(120%)"}}),o("div",{className:l("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!p}),children:[e(c,{as:"h2",size:2,html:t.title}),e(m,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:e(h,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},i))}),o("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>s.current?.slidePrev(),"aria-label":"Previous slide",children:e(z,{})}),e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>s.current?.slideNext(),"aria-label":"Next slide",children:e(D,{})})]})]}),e("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:e(w,{loop:!0,loopAdditionalSlides:1,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:n.map((t,i)=>o(v,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[e(f,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden",imgClassName:"h-full object-cover"}),o("div",{className:l("three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark"}),children:[e(c,{as:"h2",size:2,html:t.title}),e(m,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px]"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:e(h,{size:"base",variant:"secondary",className:"three-d-carousel__image-mobile-button mt-3",children:t.buttonText})})]})]},i))})})]})});x.displayName="ThreeDCarousel";var q=y(x);export{q as default};
 //# sourceMappingURL=ThreeDCarousel.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n  const { title, items = [] } = data\n  const cloneItems = items.length < 4 ? [...items, ...items] : items\n  const swiperRef = useRef<SwiperType | null>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ThreeDCarousel\"\n      className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n      {/* Desktop carousel with 3D effect */}\n      <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4\">\n        <Swiper\n          onSwiper={swiper => (swiperRef.current = swiper)}\n          centeredSlides={true}\n          initialSlide={0}\n          loop\n          slidesPerView={'auto'}\n          // loopAdditionalSlides={2}\n          spaceBetween={0}\n          grabCursor\n          modules={[EffectCoverflow, Navigation]}\n          slideToClickedSlide\n          className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n          effect=\"coverflow\"\n          coverflowEffect={{\n            rotate: 0,\n            stretch: '70%',\n            depth: 300,\n            // modifier: 1,\n            slideShadows: true,\n          }}\n          breakpoints={{\n            1921: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1490: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1441: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1025: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            769: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n          }}\n        >\n          {cloneItems.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100\"\n            >\n              {({ isActive }) => (\n                <>\n                  <Picture\n                    source={item.imageUrl?.url || ''}\n                    alt={item.imageUrl?.alt || item.title}\n                    className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg')}\n                    imgClassName=\"h-full object-cover\"\n                    style={{\n                      filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n                    }}\n                  />\n                  <div\n                    className={cn(\n                      'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                      {\n                        'aiui-dark': item.theme === 'dark',\n                        'opacity-0': !isActive,\n                      }\n                    )}\n                  >\n                    <Heading as=\"h2\" size={2} html={item.title} />\n                    <Text\n                      as=\"p\"\n                      size={4}\n                      html={item.description}\n                      className=\"three-d-carousel__image-description text-[14px]\"\n                    />\n                    {item.buttonText && (\n                      <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n                        <Button\n                          size=\"base\"\n                          variant=\"secondary\"\n                          className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n                        >\n                          {item.buttonText}\n                        </Button>\n                      </a>\n                    )}\n                  </div>\n                </>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n            onClick={() => swiperRef.current?.slidePrev()}\n            aria-label=\"Previous slide\"\n          >\n            <ChevronLeft />\n          </button>\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n            onClick={() => swiperRef.current?.slideNext()}\n            aria-label=\"Next slide\"\n          >\n            <ChevronRight />\n          </button>\n        </div>\n      </div>\n\n      {/* Mobile carousel */}\n      <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n        <Swiper\n          loop={true}\n          slidesPerView={'auto'}\n          spaceBetween={12}\n          grabCursor\n          className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n        >\n          {items.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n            >\n              <Picture\n                source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n                alt={item.mobImageUrl?.alt || item.title}\n                className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden shadow-lg\"\n                imgClassName=\"h-full object-cover\"\n              />\n              <div className=\"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]\">\n                <Heading as=\"h2\" size={2} html={item.title} />\n                <Text\n                  as=\"p\"\n                  size={4}\n                  html={item.description}\n                  className=\"three-d-carousel__image-mobile-description text-[14px] text-white\"\n                />\n                {item.buttonText && (\n                  <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n                    <button className=\"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95\">\n                      {item.buttonText}\n                    </button>\n                  </a>\n                )}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n  const { title, items = [] } = data\n  const cloneItems = items.length < 4 ? [...items, ...items] : items\n  const swiperRef = useRef<SwiperType | null>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ThreeDCarousel\"\n      className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n      {/* Desktop carousel with 3D effect */}\n      <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4\">\n        <Swiper\n          onSwiper={swiper => (swiperRef.current = swiper)}\n          centeredSlides={true}\n          initialSlide={0}\n          loop\n          slidesPerView={'auto'}\n          // loopAdditionalSlides={2}\n          spaceBetween={0}\n          grabCursor\n          modules={[EffectCoverflow, Navigation]}\n          slideToClickedSlide\n          className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n          effect=\"coverflow\"\n          coverflowEffect={{\n            rotate: 0,\n            stretch: '70%',\n            depth: 300,\n            // modifier: 1,\n            slideShadows: true,\n          }}\n          breakpoints={{\n            1921: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1490: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1441: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1025: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            769: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: '70%',\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n          }}\n        >\n          {cloneItems.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100\"\n            >\n              {({ isActive }) => (\n                <>\n                  <Picture\n                    source={item.imageUrl?.url || ''}\n                    alt={item.imageUrl?.alt || item.title}\n                    className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden')}\n                    imgClassName=\"h-full object-cover\"\n                    style={{\n                      filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n                    }}\n                  />\n                  <div\n                    className={cn(\n                      'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                      {\n                        'aiui-dark': item.theme === 'dark',\n                        'opacity-0': !isActive,\n                      }\n                    )}\n                  >\n                    <Heading as=\"h2\" size={2} html={item.title} />\n                    <Text\n                      as=\"p\"\n                      size={4}\n                      html={item.description}\n                      className=\"three-d-carousel__image-description text-[14px]\"\n                    />\n                    {item.buttonText && (\n                      <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n                        <Button\n                          size=\"base\"\n                          variant=\"secondary\"\n                          className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n                        >\n                          {item.buttonText}\n                        </Button>\n                      </a>\n                    )}\n                  </div>\n                </>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n            onClick={() => swiperRef.current?.slidePrev()}\n            aria-label=\"Previous slide\"\n          >\n            <ChevronLeft />\n          </button>\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n            onClick={() => swiperRef.current?.slideNext()}\n            aria-label=\"Next slide\"\n          >\n            <ChevronRight />\n          </button>\n        </div>\n      </div>\n\n      {/* Mobile carousel */}\n      <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n        <Swiper\n          loop={true}\n          loopAdditionalSlides={1}\n          slidesPerView={'auto'}\n          spaceBetween={12}\n          grabCursor\n          className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n        >\n          {cloneItems.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n            >\n              <Picture\n                source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n                alt={item.mobImageUrl?.alt || item.title}\n                className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden\"\n                imgClassName=\"h-full object-cover\"\n              />\n              <div\n                className={cn(\n                  'three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Heading as=\"h2\" size={2} html={item.title} />\n                <Text\n                  as=\"p\"\n                  size={4}\n                  html={item.description}\n                  className=\"three-d-carousel__image-mobile-description text-[14px]\"\n                />\n                {item.buttonText && (\n                  <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n                    <Button size=\"base\" variant=\"secondary\" className=\"three-d-carousel__image-mobile-button mt-3\">\n                      {item.buttonText}\n                    </Button>\n                  </a>\n                )}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Button", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Navigation", "EffectCoverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "data", "className", "ref", "title", "items", "cloneItems", "swiperRef", "boxRef", "swiper", "item", "index", "isActive", "ThreeDCarousel_default"]
 }

package/package.json CHANGED Viewed

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

package/tailwind.config.js CHANGED Viewed

@@ -29,8 +29,8 @@ module.exports = {
           '100%': { transform: 'translateY(0)' },
         },
         'progress-bar': {
-          from: { transform: 'translate3d(-100%, -2px, 0)' },
-          to: { transform: 'translate3d(0, -2px, 0)' },
+          from: { transform: 'translate3d(-100%, 0, 0)' },
+          to: { transform: 'translate3d(0, 0, 0)' },
         },
       },
       animation: {