npm - @anker-in/headless-ui - Versions diffs - 1.1.9 → 1.1.10 - Mend

@anker-in/headless-ui 1.1.9 → 1.1.10

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n            },\n          })\n          .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n          .to(`.${id} .sticky-cover`, {\n            backdropFilter: 'blur(8px)',\n            duration: 0.4,\n          })\n          .to(\n            `#${id} .media-content`,\n            {\n              top: '100%',\n              transform: 'translate(-50%, -100%)',\n              duration: 1,\n            },\n            '<'\n          )\n      }\n      if (inView) {\n        gsapResize()\n      }\n    }, [inView])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n            },\n          })\n          .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n          .to(`.${id} .sticky-cover`, {\n            backdropFilter: 'blur(8px)',\n            duration: 0.4,\n          })\n          .to(\n            `#${id} .media-content`,\n            {\n              top: '100%',\n              transform: 'translate(-50%, -100%)',\n              duration: 1,\n            },\n            '<'\n          )\n      }\n      if (inView) {\n        gsapResize()\n      }\n    }, [inView])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
+export declare const getProductImage: (data: any) => {
+    imageUrl: any;
+    altText: any;
+};
 export declare const ShelfDisplayWrapItem: ({ data, configuration }: {
     data: any;
     configuration?: any;

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import{Fragment as W,jsx as s,jsxs as c}from"react/jsx-runtime";import{useAiuiContext as A}from"../AiuiProvider/index.js";import{formatVariantPrice as R}from"./shelfDisplay.js";import E from"../../components/picture.js";import F from"../../components/badge.js";import{cn as u}from"../../helpers/utils.js";import{Text as M}from"../../components/text.js";import B from"../../components/button.js";import{gaTrack as V}from"../../shared/track.js";import{trackUrlRef as q}from"../../shared/trackUrlRef.js";import{Heading as G}from"../../components/heading.js";import{useExposure as J}from"../../hooks/useExposure.js";import{useRef as K,useEffect as Q,useState as U}from"react";const D="image",C="product_shelf",X=999999999e-2,me=({data:e,configuration:t})=>{const{isDisplayBackImage:$=!1,itemShape:g,metafields:I,isTopTag:P=!1,isShowTag:j,isShowOriginalPrice:x}=t||{},{locale:v="us",copyWriting:k}=A(),{discounts:O,discountsCopy:w}=I||{},S=K(null),[N,i]=U([]),[_,z]=U(""),T=(l,r,p)=>t?.event?.primaryButton?.(l,r+1,p),y=(l,r,p)=>t?.event?.secondaryButton?.(l,r+1,p),n=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},H=!n?.availableForSale&&n?.price?.amount===X,m=n?.coupons?.[0],{price:L,basePrice:f,discount:d}=R({locale:v,amount:x&&m?m.variant_price4wscode:n.price,baseAmount:x&&m?n.price:0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const l=e?.sku,r=e?.variants;return r?.find(Y=>Y?.sku===l)?.image?.url||r?.[0]?.image?.url||""},h=e?.custom_name||e?.title,a=e?.custom_description||e?.description;Q(()=>{let l=[];if(d){const p=`${d}${O?.off||w?.off||""}`;z(p),l.push(p)}const r=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);i(l.concat(r))},[e?.tags,d]),J(S,{componentType:D,componentName:C,componentTitle:h,componentDescription:a,position:t?.index+1});const o=()=>c(W,{children:[j&&N?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:N?.map?.((l,r)=>s(F,{className:"shelf-items-tag",children:l},r))}):null,h?s(G,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title line-clamp-2",html:h||""}):null,a?s(M,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:a||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:H?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k?.soldOutText}):c(W,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&L||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&f||""})]})}),c("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(B,{variant:"secondary",onClick:()=>y(e,t?.index,t),className:`
+import{Fragment as A,jsx as s,jsxs as c}from"react/jsx-runtime";import{useAiuiContext as R}from"../AiuiProvider/index.js";import{formatVariantPrice as M}from"./shelfDisplay.js";import U from"../../components/picture.js";import F from"../../components/badge.js";import{cn as d}from"../../helpers/utils.js";import{Text as V}from"../../components/text.js";import $ from"../../components/button.js";import{gaTrack as q}from"../../shared/track.js";import{trackUrlRef as G}from"../../shared/trackUrlRef.js";import{Heading as J}from"../../components/heading.js";import{useExposure as K}from"../../hooks/useExposure.js";import{useRef as Q,useEffect as X,useState as W}from"react";const P="image",j="product_shelf",Y=999999999e-2,Z=e=>{const t=e?.sku,u=e?.variants,x=u?.find(T=>T?.sku===t),w=x?.image?.url||u?.[0]?.image?.url||"",k=x?.image?.altText||u?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:w,altText:k}},de=({data:e,configuration:t})=>{const{isDisplayBackImage:u=!1,itemShape:x,metafields:w,isTopTag:k=!1,isShowTag:T,isShowOriginalPrice:f}=t||{},{locale:g="us",copyWriting:N}=R(),{discounts:O,discountsCopy:_}=w||{},B=Q(null),[D,o]=W([]),[C,z]=W(""),I=(l,v,p)=>t?.event?.primaryButton?.(l,v+1,p),S=(l,v,p)=>t?.event?.secondaryButton?.(l,v+1,p),i=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},H=!i?.availableForSale&&i?.price?.amount===Y,m=i?.coupons?.[0],{price:L,basePrice:E,discount:n}=M({locale:g,amount:f&&m?m.variant_price4wscode:i.price,baseAmount:f&&m?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),{imageUrl:b,altText:y}=Z(e),h=e?.custom_name||e?.title,a=e?.custom_description||e?.description;X(()=>{let l=[];if(n){const p=`${n}${O?.off||_?.off||""}`;z(p),l.push(p)}const v=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,n?1:2);o(l.concat(v))},[e?.tags,n]),K(B,{componentType:P,componentName:j,componentTitle:h,componentDescription:a,position:t?.index+1});const r=()=>c(A,{children:[T&&D?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:D?.map?.((l,v)=>s(F,{className:"shelf-items-tag",children:l},v))}):null,h?s(J,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title line-clamp-2",html:h||""}):null,a?s(V,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:a||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:H?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:N?.soldOutText}):c(A,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&L||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&E||""})]})}),c("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s($,{variant:"secondary",onClick:()=>S(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(B,{variant:"primary",onClick:()=>T(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s($,{variant:"primary",onClick:()=>I(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:S,className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",g==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:$?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(E,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:o()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[_&&P&&s(F,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:_||""}),s("div",{className:u("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":h,target:t?.target,href:q(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{V({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:s(E,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),o()]})},e?.id||e?.handle)},de=({data:e,configuration:t})=>{const{itemShape:$,itemLength:g,metafields:I}=t||{},{discounts:P,discountsCopy:j}=I||{},{locale:x="us",copyWriting:v}=A(),[k,O]=U([]),w=K(null),S=(a,o,l)=>t?.event?.primaryButton?.(a,o+1,l),N=(a,o,l)=>t?.event?.secondaryButton?.(a,o+1,l),i=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0]||{},_=!i?.availableForSale&&i?.price?.amount===X,z=t?.isShowTag,T=t?.isShowOriginalPrice,y=i?.coupons?.[0],{price:n,basePrice:H,discount:m}=R({locale:x,amount:T&&y?y.variant_price4wscode:i.price,baseAmount:T&&y?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),L=()=>{const a=e?.sku,o=e?.variants;return o?.find(r=>r?.sku===a)?.image?.url||o?.[0]?.image?.url||""},f=e?.custom_name||e?.title,d=e?.custom_description||e?.description;J(w,{componentType:D,componentName:C,componentTitle:f,componentDescription:d,position:t?.index+1});const b=()=>g>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"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]",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"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"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]",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"},h=()=>g>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return Q(()=>{let a=[];if(m){const l=`${m}${P?.off||j?.off||""}`;a.push(l)}const o=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,m?1:2);O(a.concat(o))},[e?.tags,m]),s("div",{ref:w,className:u(b().wrap,$==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:c("div",{className:u(h(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:u(b().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":f,target:t?.target,href:q(`${x==="us"||!x?"":`/${x}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{V({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(E,{source:L(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:u("flex flex-col items-start justify-center",b().boxItem),children:[z&&k?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:k?.map?.((a,o)=>s(F,{className:"shelf-items-tag",children:a},o))}):null,f?s(G,{as:"h3",title:f||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:f||""}):null,d?s(M,{size:2,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",html:d||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:_?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:v?.soldOutText}):c(W,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&n||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&H||""})]})}),c("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(B,{variant:"secondary",onClick:()=>N(e,t?.index,t),className:`
+            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:B,className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",x==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:u?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(U,{source:b,alt:y,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:r()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[C&&k&&s(F,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:C||""}),s("div",{className:d("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":h,target:t?.target,href:G(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}`,`${P}_${j}`),onClick:()=>{q({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(U,{source:b,alt:y,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),r()]})},e?.id||e?.handle)},ue=({data:e,configuration:t})=>{const{itemShape:u,itemLength:x,metafields:w}=t||{},{discounts:k,discountsCopy:T}=w||{},{locale:f="us",copyWriting:g}=R(),[N,O]=W([]),_=Q(null),B=(a,r,l)=>t?.event?.primaryButton?.(a,r+1,l),D=(a,r,l)=>t?.event?.secondaryButton?.(a,r+1,l),o=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0]||{},C=!o?.availableForSale&&o?.price?.amount===Y,z=t?.isShowTag,I=t?.isShowOriginalPrice,S=o?.coupons?.[0],{price:i,basePrice:H,discount:m}=M({locale:f,amount:I&&S?S.variant_price4wscode:o.price,baseAmount:I&&S?o.price:0,currencyCode:e?.price?.currencyCode||"USD"}),{imageUrl:L,altText:E}=Z(e),n=e?.custom_name||e?.title,b=e?.custom_description||e?.description;K(_,{componentType:P,componentName:j,componentTitle:n,componentDescription:b,position:t?.index+1});const y=()=>x>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"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]",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"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"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]",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"},h=()=>x>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return X(()=>{let a=[];if(m){const l=`${m}${k?.off||T?.off||""}`;a.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,m?1:2);O(a.concat(r))},[e?.tags,m]),s("div",{ref:_,className:d(y().wrap,u==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:c("div",{className:d(h(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:d(y().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":n,target:t?.target,href:G(`${f==="us"||!f?"":`/${f}`}/products/${e?.handle}`,`${P}_${j}`),onClick:()=>{q({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||o?.sku,item_name:e?.name,item_variant:o?.name,price:o?.price,index:t?.index+1}]}})},children:s(U,{source:L,alt:E,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:d("flex flex-col items-start justify-center",y().boxItem),children:[z&&N?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:N?.map?.((a,r)=>s(F,{className:"shelf-items-tag",children:a},r))}):null,n?s(J,{as:"h3",title:n||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:n||""}):null,b?s(V,{size:2,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",html:b||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:C?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g?.soldOutText}):c(A,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:o?.availableForSale&&i||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:o?.availableForSale&&H||""})]})}),c("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s($,{variant:"secondary",onClick:()=>D(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(B,{variant:"primary",onClick:()=>S(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s($,{variant:"primary",onClick:()=>B(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{de as ShelfDisplayHorizontalItem,me as ShelfDisplayWrapItem};
+            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{ue as ShelfDisplayHorizontalItem,de as ShelfDisplayWrapItem,Z as getProductImage};
 //# sourceMappingURL=shelfDisplayItem.js.map

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

@@ -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, discountsCopy } = 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 || discountsCopy?.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) => (\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 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=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n          )}\n          <div\n            className={cn(\n              'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\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, discountsCopy } = 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 || discountsCopy?.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 gap-6 duration-300',\n        'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\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, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\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 items-start justify-center', showSizeClass().boxItem)}>\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) => (\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", "discountsCopy", "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"]
+  "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\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n  const sku = data?.sku\n  const skuArray = data?.variants\n  const findSku = skuArray?.find((item: any) => item?.sku === sku)\n  const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n  return {\n    imageUrl,\n    altText,\n  }\n}\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, discountsCopy } = 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 { imageUrl, altText } = getProductImage(data)\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 || discountsCopy?.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) => (\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 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\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\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=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n          )}\n          <div\n            className={cn(\n              'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\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\n                source={imageUrl}\n                alt={altText}\n                className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n              />\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, discountsCopy } = 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 { imageUrl, altText } = getProductImage(data)\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 || discountsCopy?.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 gap-6 duration-300',\n        'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\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, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\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\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n          </a>\n        </div>\n        <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\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) => (\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", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "isSoldOut", "coupon", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
 }

package/dist/esm/components/ExposureDetector.js CHANGED Viewed

@@ -1,2 +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};
+"use client";import l,{useRef as E}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=E(null);return m(e,{exposureKey:r,threshold:s,duration:n,once:p,onExposure:o,rootMargin:c}),l.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 CHANGED Viewed

@@ -1,7 +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"],
-  "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",
+  "sourcesContent": ["'use client'\nimport 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"],
+  "mappings": "aACA,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/avatar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as i}from"react/jsx-runtime";import{useEffect as x,useRef as g,forwardRef as l}from"react";import N from"fitty";import*as r from"@radix-ui/react-avatar";import{cva as k}from"class-variance-authority";import{cn as n}from"../helpers/index.js";const z=k("tracking transition-colors",{variants:{size:{small:"size-8 text-sm",medium:"size-10 text-xl",large:"size-12 text-2xl"}}}),f=l(({className:t,textClassName:a,isAdaptation:e=!1,minSize:v=4,maxSize:y=16,children:m,style:c,size:R="small",onClick:d,...P},b)=>{const o=g(null),A=s=>{d?.(s)};return x(()=>{let s;return e&&o.current&&(s=N?.(o.current,{minSize:v,maxSize:y})),()=>s?.unsubscribe?.()},[]),i(r.Root,{ref:b,onClick:A,className:n(z({size:R}),"bg-container-secondary-0 text-info-primary relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",t),...c?{style:c}:null,...P,children:e?i("span",{className:"bg-muted flex size-full items-center justify-center rounded-full",children:i("span",{ref:o,className:n("px-2",a),children:m})}):m})});f.displayName="Avatar";const p=l(({className:t,...a},e)=>i(r.Image,{ref:e,className:n("aspect-square size-full",t),...a}));p.displayName=r.Image.displayName;const u=l(({className:t,...a},e)=>i(r.Fallback,{ref:e,className:n("bg-muted flex size-full items-center justify-center rounded-full",t),...a}));u.displayName=r.Fallback.displayName;export{f as Avatar,u as AvatarFallback,p as AvatarImage};
+"use client";import{jsx as i}from"react/jsx-runtime";import{useEffect as g,useRef as x,forwardRef as l}from"react";import N from"fitty";import*as r from"@radix-ui/react-avatar";import{cva as k}from"class-variance-authority";import{cn as n}from"../helpers/index.js";const z=k("tracking transition-colors",{variants:{size:{small:"size-8 text-sm",medium:"size-10 text-xl",large:"size-12 text-2xl"}}}),f=l(({className:t,textClassName:a,isAdaptation:e=!1,minSize:v=4,maxSize:y=16,children:m,style:c,size:R="small",onClick:d,...P},b)=>{const o=x(null),A=s=>{d?.(s)};return g(()=>{let s;return e&&o.current&&(s=N?.(o.current,{minSize:v,maxSize:y})),()=>s?.unsubscribe?.()},[]),i(r.Root,{ref:b,onClick:A,className:n(z({size:R}),"bg-container-secondary-0 text-info-primary relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",t),...c?{style:c}:null,...P,children:e?i("span",{className:"bg-muted flex size-full items-center justify-center rounded-full",children:i("span",{ref:o,className:n("px-2",a),children:m})}):m})});f.displayName="Avatar";const p=l(({className:t,...a},e)=>i(r.Image,{ref:e,className:n("aspect-square size-full",t),loading:"lazy",...a}));p.displayName=r.Image.displayName;const u=l(({className:t,...a},e)=>i(r.Fallback,{ref:e,className:n("bg-muted flex size-full items-center justify-center rounded-full",t),...a}));u.displayName=r.Fallback.displayName;export{f as Avatar,u as AvatarFallback,p as AvatarImage};
 //# sourceMappingURL=avatar.js.map

package/dist/esm/components/avatar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/avatar.tsx"],
-  "sourcesContent": ["'use client'\n\nimport React, { useEffect, useRef, forwardRef } from 'react'\nimport fitty from 'fitty'\nimport type { FittyInstance } from 'fitty'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { cn } from '../helpers/index.js'\n\n// \u5B9A\u4E49 avatar \u7684\u6837\u5F0F\u53D8\u4F53\nconst avatarVariants = cva('tracking transition-colors', {\n  variants: {\n    size: {\n      small: 'size-8 text-sm', // \u5C0F\n      medium: 'size-10 text-xl', // \u4E2D\n      large: 'size-12 text-2xl', // \u5927\n    },\n  },\n})\n\ntype AvatarProps = {\n  /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u7C7B\u540D*/\n  className?: string\n  /** \u6837\u5F0F*/\n  style?: React.CSSProperties\n  /** \u70B9\u51FB\u4E8B\u4EF6*/\n  onClick?: Function\n  /** \u6587\u672C\u81EA\u9002\u5E94*/\n  isAdaptation?: boolean\n  /** \u6587\u672C\u81EA\u9002\u5E94\u6700\u5C0F\u5B57\u4F53, \u5F00\u542F\u65F6\u751F\u6548*/\n  minSize?: number\n  /** \u6587\u672C\u81EA\u9002\u5E94\u6700\u5927\u5B57\u4F53, \u5F00\u542F\u65F6\u751F\u6548*/\n  maxSize?: number\n  /** \u6587\u672C\u81EA\u9002\u5E94\u7684\u7C7B, \u5F00\u542F\u65F6\u751F\u6548*/\n  textClassName?: string\n} & VariantProps<typeof avatarVariants> &\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n\nconst Avatar = forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  (\n    {\n      className,\n      textClassName,\n      isAdaptation = false,\n      minSize = 4,\n      maxSize = 16,\n      children,\n      style,\n      size = 'small',\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const textRef = useRef<HTMLDivElement>(null)\n    // \u70B9\u51FB\u4E8B\u4EF6\n    const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n      onClick?.(e)\n    }\n\n    useEffect(() => {\n      let fittyInstance: FittyInstance\n      if (isAdaptation && textRef.current) {\n        fittyInstance = fitty?.(textRef.current, {\n          minSize,\n          maxSize,\n        })\n      }\n      return () => fittyInstance?.unsubscribe?.()\n    }, [])\n\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        onClick={handleClick}\n        className={cn(\n          avatarVariants({ size }),\n          'bg-container-secondary-0 text-info-primary relative flex shrink-0 items-center justify-center overflow-hidden rounded-full',\n          className\n        )}\n        {...(style ? { style: style } : null)}\n        {...props}\n      >\n        {isAdaptation ? (\n          <span className=\"bg-muted flex size-full items-center justify-center rounded-full\">\n            <span ref={textRef} className={cn('px-2', textClassName)}>\n              {children}\n            </span>\n          </span>\n        ) : (\n          children\n        )}\n      </AvatarPrimitive.Root>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n\nconst AvatarImage = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square size-full', className)} {...props} />\n))\n\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => {\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}\n      {...props}\n    />\n  )\n})\n\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"],
-  "mappings": "aAuFY,cAAAA,MAAA,oBArFZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,cAAAC,MAAkB,QACrD,OAAOC,MAAW,QAElB,UAAYC,MAAqB,yBACjC,OAA4B,OAAAC,MAAW,2BACvC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAiBF,EAAI,6BAA8B,CACvD,SAAU,CACR,KAAM,CACJ,MAAO,iBACP,OAAQ,kBACR,MAAO,kBACT,CACF,CACF,CAAC,EAsBKG,EAASN,EACb,CACE,CACE,UAAAO,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,QAAAC,EAAU,EACV,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,QACP,QAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAUnB,EAAuB,IAAI,EAErCoB,EAAeC,GAAqD,CACxEL,IAAUK,CAAC,CACb,EAEA,OAAAtB,EAAU,IAAM,CACd,IAAIuB,EACJ,OAAIZ,GAAgBS,EAAQ,UAC1BG,EAAgBpB,IAAQiB,EAAQ,QAAS,CACvC,QAAAR,EACA,QAAAC,CACF,CAAC,GAEI,IAAMU,GAAe,cAAc,CAC5C,EAAG,CAAC,CAAC,EAGHxB,EAACK,EAAgB,KAAhB,CACC,IAAKe,EACL,QAASE,EACT,UAAWf,EACTC,EAAe,CAAE,KAAAS,CAAK,CAAC,EACvB,6HACAP,CACF,EACC,GAAIM,EAAQ,CAAE,MAAOA,CAAM,EAAI,KAC/B,GAAGG,EAEH,SAAAP,EACCZ,EAAC,QAAK,UAAU,mEACd,SAAAA,EAAC,QAAK,IAAKqB,EAAS,UAAWd,EAAG,OAAQI,CAAa,EACpD,SAAAI,EACH,EACF,EAEAA,EAEJ,CAEJ,CACF,EAEAN,EAAO,YAAc,SAErB,MAAMgB,EAActB,EAGlB,CAAC,CAAE,UAAAO,EAAW,GAAGS,CAAM,EAAGC,IAC1BpB,EAACK,EAAgB,MAAhB,CAAsB,IAAKe,EAAK,UAAWb,EAAG,0BAA2BG,CAAS,EAAI,GAAGS,EAAO,CAClG,EAEDM,EAAY,YAAcpB,EAAgB,MAAM,YAEhD,MAAMqB,EAAiBvB,EAGrB,CAAC,CAAE,UAAAO,EAAW,GAAGS,CAAM,EAAGC,IAExBpB,EAACK,EAAgB,SAAhB,CACC,IAAKe,EACL,UAAWb,EAAG,mEAAoEG,CAAS,EAC1F,GAAGS,EACN,CAEH,EAEDO,EAAe,YAAcrB,EAAgB,SAAS",
+  "sourcesContent": ["'use client'\n\nimport React, { useEffect, useRef, forwardRef } from 'react'\nimport fitty from 'fitty'\nimport type { FittyInstance } from 'fitty'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { cn } from '../helpers/index.js'\n\n// \u5B9A\u4E49 avatar \u7684\u6837\u5F0F\u53D8\u4F53\nconst avatarVariants = cva('tracking transition-colors', {\n  variants: {\n    size: {\n      small: 'size-8 text-sm', // \u5C0F\n      medium: 'size-10 text-xl', // \u4E2D\n      large: 'size-12 text-2xl', // \u5927\n    },\n  },\n})\n\ntype AvatarProps = {\n  /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u7C7B\u540D*/\n  className?: string\n  /** \u6837\u5F0F*/\n  style?: React.CSSProperties\n  /** \u70B9\u51FB\u4E8B\u4EF6*/\n  onClick?: Function\n  /** \u6587\u672C\u81EA\u9002\u5E94*/\n  isAdaptation?: boolean\n  /** \u6587\u672C\u81EA\u9002\u5E94\u6700\u5C0F\u5B57\u4F53, \u5F00\u542F\u65F6\u751F\u6548*/\n  minSize?: number\n  /** \u6587\u672C\u81EA\u9002\u5E94\u6700\u5927\u5B57\u4F53, \u5F00\u542F\u65F6\u751F\u6548*/\n  maxSize?: number\n  /** \u6587\u672C\u81EA\u9002\u5E94\u7684\u7C7B, \u5F00\u542F\u65F6\u751F\u6548*/\n  textClassName?: string\n} & VariantProps<typeof avatarVariants> &\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n\nconst Avatar = forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  (\n    {\n      className,\n      textClassName,\n      isAdaptation = false,\n      minSize = 4,\n      maxSize = 16,\n      children,\n      style,\n      size = 'small',\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const textRef = useRef<HTMLDivElement>(null)\n    // \u70B9\u51FB\u4E8B\u4EF6\n    const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n      onClick?.(e)\n    }\n\n    useEffect(() => {\n      let fittyInstance: FittyInstance\n      if (isAdaptation && textRef.current) {\n        fittyInstance = fitty?.(textRef.current, {\n          minSize,\n          maxSize,\n        })\n      }\n      return () => fittyInstance?.unsubscribe?.()\n    }, [])\n\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        onClick={handleClick}\n        className={cn(\n          avatarVariants({ size }),\n          'bg-container-secondary-0 text-info-primary relative flex shrink-0 items-center justify-center overflow-hidden rounded-full',\n          className\n        )}\n        {...(style ? { style: style } : null)}\n        {...props}\n      >\n        {isAdaptation ? (\n          <span className=\"bg-muted flex size-full items-center justify-center rounded-full\">\n            <span ref={textRef} className={cn('px-2', textClassName)}>\n              {children}\n            </span>\n          </span>\n        ) : (\n          children\n        )}\n      </AvatarPrimitive.Root>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n\nconst AvatarImage = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square size-full', className)} loading=\"lazy\" {...props} />\n))\n\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => {\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}\n      {...props}\n    />\n  )\n})\n\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"],
+  "mappings": "aAuFY,cAAAA,MAAA,oBArFZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,cAAAC,MAAkB,QACrD,OAAOC,MAAW,QAElB,UAAYC,MAAqB,yBACjC,OAA4B,OAAAC,MAAW,2BACvC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAiBF,EAAI,6BAA8B,CACvD,SAAU,CACR,KAAM,CACJ,MAAO,iBACP,OAAQ,kBACR,MAAO,kBACT,CACF,CACF,CAAC,EAsBKG,EAASN,EACb,CACE,CACE,UAAAO,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,QAAAC,EAAU,EACV,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,QACP,QAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAUnB,EAAuB,IAAI,EAErCoB,EAAeC,GAAqD,CACxEL,IAAUK,CAAC,CACb,EAEA,OAAAtB,EAAU,IAAM,CACd,IAAIuB,EACJ,OAAIZ,GAAgBS,EAAQ,UAC1BG,EAAgBpB,IAAQiB,EAAQ,QAAS,CACvC,QAAAR,EACA,QAAAC,CACF,CAAC,GAEI,IAAMU,GAAe,cAAc,CAC5C,EAAG,CAAC,CAAC,EAGHxB,EAACK,EAAgB,KAAhB,CACC,IAAKe,EACL,QAASE,EACT,UAAWf,EACTC,EAAe,CAAE,KAAAS,CAAK,CAAC,EACvB,6HACAP,CACF,EACC,GAAIM,EAAQ,CAAE,MAAOA,CAAM,EAAI,KAC/B,GAAGG,EAEH,SAAAP,EACCZ,EAAC,QAAK,UAAU,mEACd,SAAAA,EAAC,QAAK,IAAKqB,EAAS,UAAWd,EAAG,OAAQI,CAAa,EACpD,SAAAI,EACH,EACF,EAEAA,EAEJ,CAEJ,CACF,EAEAN,EAAO,YAAc,SAErB,MAAMgB,EAActB,EAGlB,CAAC,CAAE,UAAAO,EAAW,GAAGS,CAAM,EAAGC,IAC1BpB,EAACK,EAAgB,MAAhB,CAAsB,IAAKe,EAAK,UAAWb,EAAG,0BAA2BG,CAAS,EAAG,QAAQ,OAAQ,GAAGS,EAAO,CACjH,EAEDM,EAAY,YAAcpB,EAAgB,MAAM,YAEhD,MAAMqB,EAAiBvB,EAGrB,CAAC,CAAE,UAAAO,EAAW,GAAGS,CAAM,EAAGC,IAExBpB,EAACK,EAAgB,SAAhB,CACC,IAAKe,EACL,UAAWb,EAAG,mEAAoEG,CAAS,EAC1F,GAAGS,EACN,CAEH,EAEDO,EAAe,YAAcrB,EAAgB,SAAS",
   "names": ["jsx", "useEffect", "useRef", "forwardRef", "fitty", "AvatarPrimitive", "cva", "cn", "avatarVariants", "Avatar", "className", "textClassName", "isAdaptation", "minSize", "maxSize", "children", "style", "size", "onClick", "props", "ref", "textRef", "handleClick", "e", "fittyInstance", "AvatarImage", "AvatarFallback"]
 }

package/dist/esm/components/link.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 declare const linkVariants: (props?: ({
     size?: "base" | "lg" | null | undefined;
-    variant?: "primary" | "secoundry" | null | undefined;
+    variant?: "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type LinkProps = {
     /** 定义子组件作为父组件的类型,详细使用方式请参考radix-ui */
@@ -39,7 +39,7 @@ declare const Link: React.ForwardRefExoticComponent<{
     onClick?: Function;
 } & VariantProps<(props?: ({
     size?: "base" | "lg" | null | undefined;
-    variant?: "primary" | "secoundry" | null | undefined;
+    variant?: "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & ComponentPropsWithout<"a", RemovedProps> & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;
 export type { LinkProps };

package/dist/esm/components/link.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as C,jsx as i,jsxs as P}from"react/jsx-runtime";import u from"react";import{Slot as d}from"@radix-ui/react-slot";import{cn as h}from"../helpers/index.js";import{cva as x}from"class-variance-authority";const v=x("tracking  hover:text-brand-0 font-bold underline transition-colors",{variants:{size:{base:"text-text-2",lg:"text-text-3"},variant:{secoundry:"text-info-secondary hover:text-info-primary",primary:"text-info-primary hover:text-brand-0"}}}),a=u.forwardRef(({children:p,size:s="base",variant:l="primary",className:m,asChild:c=!1,href:o,style:r,disabled:e=!1,suffixIcon:t,onClick:f,...y},k)=>i(c?d:"a",{ref:k,onClick:n=>{if(!e&&f?.(n),e||!o){n.preventDefault();return}},href:e?void 0:o,className:h(v({size:s,variant:l}),m,{"flex items-center":t,"cursor-pointer":!e,"text-info-quaternary cursor-not-allowed hover:text-info-quaternary":e}),...r?{style:r}:null,...y,children:P(C,{children:[p,t&&i("span",{className:"svg",children:t})]})}));a.displayName="Link";var V=a;export{V as default};
+"use client";import{Fragment as C,jsx as i,jsxs as P}from"react/jsx-runtime";import u from"react";import{Slot as d}from"@radix-ui/react-slot";import{cn as h}from"../helpers/index.js";import{cva as x}from"class-variance-authority";const v=x("tracking  hover:text-brand-0 font-bold underline transition-colors",{variants:{size:{base:"text-text-2",lg:"text-text-3"},variant:{secondary:"text-info-secondary hover:text-info-primary",primary:"text-info-primary hover:text-brand-0"}}}),a=u.forwardRef(({children:p,size:s="base",variant:l="primary",className:m,asChild:c=!1,href:o,style:r,disabled:e=!1,suffixIcon:t,onClick:f,...y},k)=>i(c?d:"a",{ref:k,onClick:n=>{if(!e&&f?.(n),e||!o){n.preventDefault();return}},href:e?void 0:o,className:h(v({size:s,variant:l}),m,{"flex items-center":t,"cursor-pointer":!e,"text-info-quaternary cursor-not-allowed hover:text-info-quaternary":e}),...r?{style:r}:null,...y,children:P(C,{children:[p,t&&i("span",{className:"svg",children:t})]})}));a.displayName="Link";var V=a;export{V as default};
 //# sourceMappingURL=link.js.map

package/dist/esm/components/link.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/link.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { ReactNode } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../helpers/index.js'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\n// \u5B9A\u4E49 link \u7684\u6837\u5F0F\u53D8\u4F53\nconst linkVariants = cva('tracking  hover:text-brand-0 font-bold underline transition-colors', {\n  variants: {\n    size: {\n      base: 'text-text-2', // \u4E2D\n      lg: 'text-text-3', // \u5927\n    },\n    variant: {\n      secoundry: 'text-info-secondary hover:text-info-primary',\n      primary: 'text-info-primary hover:text-brand-0',\n    },\n  },\n})\n// \u5B9A\u4E49\u7EC4\u4EF6\u7C7B\u578B\uFF0C\u7EE7\u627F a \u6807\u7B7E\u6807\u51C6\u5C5E\u6027\ntype LinkElement = React.ElementRef<'a'>\ntype LinkProps = {\n  /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u7C7B\u540D*/\n  className?: string\n  /** \u7981\u7528\u94FE\u63A5 */\n  disabled?: boolean\n  /** \u540E\u7F6E\u56FE\u6807*/\n  suffixIcon?: ReactNode\n  /** \u8DF3\u8F6C\u94FE\u63A5*/\n  href?: string\n  /** \u6837\u5F0F*/\n  style?: React.CSSProperties\n  /** \u70B9\u51FB\u4E8B\u4EF6\uFF0C\u7981\u7528\u72B6\u6001\u65E0\u6CD5\u89E6\u53D1*/\n  onClick?: Function\n} & VariantProps<typeof linkVariants> &\n  ComponentPropsWithout<'a', RemovedProps>\n\nconst Link = React.forwardRef<LinkElement, LinkProps>(\n  (\n    {\n      children,\n      size = 'base',\n      variant = 'primary',\n      className,\n      asChild = false,\n      href,\n      style,\n      disabled = false,\n      suffixIcon,\n      onClick,\n      ...props // \u8FD9\u91CC\u4F1A\u5305\u542B href\u3001target\u3001rel \u7B49\u6807\u51C6 anchor \u5C5E\u6027\n    }: LinkProps,\n    forwardedRef\n  ) => {\n    const Comp = asChild ? Slot : 'a'\n\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n      !disabled && onClick?.(event)\n      if (disabled || !href) {\n        event.preventDefault()\n        return\n      }\n    }\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        onClick={handleClick}\n        href={disabled ? undefined : href}\n        className={cn(linkVariants({ size, variant }), className, {\n          'flex items-center': suffixIcon,\n          'cursor-pointer': !disabled,\n          'text-info-quaternary cursor-not-allowed hover:text-info-quaternary': disabled,\n        })}\n        {...(style ? { style: style } : null)}\n        {...props}\n      >\n        <>\n          {children}\n          {suffixIcon && <span className=\"svg\">{suffixIcon}</span>}\n        </>\n      </Comp>\n    )\n  }\n)\nLink.displayName = 'Link'\n\nexport default Link\nexport type { LinkProps }\n"],
-  "mappings": "AAgFQ,mBAAAA,EAEiB,OAAAC,EAFjB,QAAAC,MAAA,oBAhFR,OAAOC,MAAW,QAElB,OAAS,QAAAC,MAAY,uBACrB,OAAS,MAAAC,MAAU,sBACnB,OAA4B,OAAAC,MAAW,2BAIvC,MAAMC,EAAeD,EAAI,qEAAsE,CAC7F,SAAU,CACR,KAAM,CACJ,KAAM,cACN,GAAI,aACN,EACA,QAAS,CACP,UAAW,8CACX,QAAS,sCACX,CACF,CACF,CAAC,EAqBKE,EAAOL,EAAM,WACjB,CACE,CACE,SAAAM,EACA,KAAAC,EAAO,OACP,QAAAC,EAAU,UACV,UAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,IAaEnB,EAXWY,EAAUT,EAAO,IAW3B,CACC,IAAKgB,EACL,QAXiBC,GAA+C,CAElE,GADA,CAACL,GAAYE,IAAUG,CAAK,EACxBL,GAAY,CAACF,EAAM,CACrBO,EAAM,eAAe,EACrB,MACF,CACF,EAMI,KAAML,EAAW,OAAYF,EAC7B,UAAWT,EAAGE,EAAa,CAAE,KAAAG,EAAM,QAAAC,CAAQ,CAAC,EAAGC,EAAW,CACxD,oBAAqBK,EACrB,iBAAkB,CAACD,EACnB,qEAAsEA,CACxE,CAAC,EACA,GAAID,EAAQ,CAAE,MAAOA,CAAM,EAAI,KAC/B,GAAGI,EAEJ,SAAAjB,EAAAF,EAAA,CACG,UAAAS,EACAQ,GAAchB,EAAC,QAAK,UAAU,MAAO,SAAAgB,EAAW,GACnD,EACF,CAGN,EACAT,EAAK,YAAc,OAEnB,IAAOc,EAAQd",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { ReactNode } from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../helpers/index.js'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\n// \u5B9A\u4E49 link \u7684\u6837\u5F0F\u53D8\u4F53\nconst linkVariants = cva('tracking  hover:text-brand-0 font-bold underline transition-colors', {\n  variants: {\n    size: {\n      base: 'text-text-2', // \u4E2D\n      lg: 'text-text-3', // \u5927\n    },\n    variant: {\n      secondary: 'text-info-secondary hover:text-info-primary',\n      primary: 'text-info-primary hover:text-brand-0',\n    },\n  },\n})\n// \u5B9A\u4E49\u7EC4\u4EF6\u7C7B\u578B\uFF0C\u7EE7\u627F a \u6807\u7B7E\u6807\u51C6\u5C5E\u6027\ntype LinkElement = React.ElementRef<'a'>\ntype LinkProps = {\n  /** \u5B9A\u4E49\u5B50\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B,\u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n  asChild?: boolean\n  /** \u7C7B\u540D*/\n  className?: string\n  /** \u7981\u7528\u94FE\u63A5 */\n  disabled?: boolean\n  /** \u540E\u7F6E\u56FE\u6807*/\n  suffixIcon?: ReactNode\n  /** \u8DF3\u8F6C\u94FE\u63A5*/\n  href?: string\n  /** \u6837\u5F0F*/\n  style?: React.CSSProperties\n  /** \u70B9\u51FB\u4E8B\u4EF6\uFF0C\u7981\u7528\u72B6\u6001\u65E0\u6CD5\u89E6\u53D1*/\n  onClick?: Function\n} & VariantProps<typeof linkVariants> &\n  ComponentPropsWithout<'a', RemovedProps>\n\nconst Link = React.forwardRef<LinkElement, LinkProps>(\n  (\n    {\n      children,\n      size = 'base',\n      variant = 'primary',\n      className,\n      asChild = false,\n      href,\n      style,\n      disabled = false,\n      suffixIcon,\n      onClick,\n      ...props // \u8FD9\u91CC\u4F1A\u5305\u542B href\u3001target\u3001rel \u7B49\u6807\u51C6 anchor \u5C5E\u6027\n    }: LinkProps,\n    forwardedRef\n  ) => {\n    const Comp = asChild ? Slot : 'a'\n\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n      !disabled && onClick?.(event)\n      if (disabled || !href) {\n        event.preventDefault()\n        return\n      }\n    }\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        onClick={handleClick}\n        href={disabled ? undefined : href}\n        className={cn(linkVariants({ size, variant }), className, {\n          'flex items-center': suffixIcon,\n          'cursor-pointer': !disabled,\n          'text-info-quaternary cursor-not-allowed hover:text-info-quaternary': disabled,\n        })}\n        {...(style ? { style: style } : null)}\n        {...props}\n      >\n        <>\n          {children}\n          {suffixIcon && <span className=\"svg\">{suffixIcon}</span>}\n        </>\n      </Comp>\n    )\n  }\n)\nLink.displayName = 'Link'\n\nexport default Link\nexport type { LinkProps }\n"],
+  "mappings": "aAiFQ,mBAAAA,EAEiB,OAAAC,EAFjB,QAAAC,MAAA,oBAhFR,OAAOC,MAAW,QAElB,OAAS,QAAAC,MAAY,uBACrB,OAAS,MAAAC,MAAU,sBACnB,OAA4B,OAAAC,MAAW,2BAIvC,MAAMC,EAAeD,EAAI,qEAAsE,CAC7F,SAAU,CACR,KAAM,CACJ,KAAM,cACN,GAAI,aACN,EACA,QAAS,CACP,UAAW,8CACX,QAAS,sCACX,CACF,CACF,CAAC,EAqBKE,EAAOL,EAAM,WACjB,CACE,CACE,SAAAM,EACA,KAAAC,EAAO,OACP,QAAAC,EAAU,UACV,UAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EACAC,IAaEnB,EAXWY,EAAUT,EAAO,IAW3B,CACC,IAAKgB,EACL,QAXiBC,GAA+C,CAElE,GADA,CAACL,GAAYE,IAAUG,CAAK,EACxBL,GAAY,CAACF,EAAM,CACrBO,EAAM,eAAe,EACrB,MACF,CACF,EAMI,KAAML,EAAW,OAAYF,EAC7B,UAAWT,EAAGE,EAAa,CAAE,KAAAG,EAAM,QAAAC,CAAQ,CAAC,EAAGC,EAAW,CACxD,oBAAqBK,EACrB,iBAAkB,CAACD,EACnB,qEAAsEA,CACxE,CAAC,EACA,GAAID,EAAQ,CAAE,MAAOA,CAAM,EAAI,KAC/B,GAAGI,EAEJ,SAAAjB,EAAAF,EAAA,CACG,UAAAS,EACAQ,GAAchB,EAAC,QAAK,UAAU,MAAO,SAAAgB,EAAW,GACnD,EACF,CAGN,EACAT,EAAK,YAAc,OAEnB,IAAOc,EAAQd",
   "names": ["Fragment", "jsx", "jsxs", "React", "Slot", "cn", "cva", "linkVariants", "Link", "children", "size", "variant", "className", "asChild", "href", "style", "disabled", "suffixIcon", "onClick", "props", "forwardedRef", "event", "link_default"]
 }

package/dist/esm/helpers/ScrollLoadVideo.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as l,jsxs as j}from"react/jsx-runtime";import{useEffect as m,useState as g,useRef as v,useCallback as V}from"react";import{cn as n}from"../helpers/utils.js";import{debounce as M}from"lodash";const c=new Set,T=({src:r,poster:u,alt:E="Scroll Loaded Video",className:h="",videoWrapperClassName:p="",videoClassName:y="",autoplay:N=!1,muted:S=!0,loop:k=!0,controls:z=!1,playsInline:I=!0,videoRef:a=null,...U})=>{const[s,L]=g(!1),[t,d]=g(!1),b=v(null),f=v(null),o=v("");m(()=>{c.has(r)&&(L(!0),d(!0),o.current=r)},[r]),m(()=>{if(t&&s){const e=a?.current||f.current;e&&(e.muted=!0,e.play().catch(i=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",i)}))}},[t,s,a]);const w=V(()=>{const e=r;if(!e||o.current===e&&t)return;if(c.has(e)){d(!0),o.current=e;return}o.current=e;const i=document.createElement("video");i.preload="metadata",i.onloadedmetadata=()=>{d(!0),c.add(e)},i.src=e},[t,r]);m(()=>{if(!b.current||t)return;const e=M(()=>{if(window.scrollY>10)return L(!0),w(),window.removeEventListener("scroll",e)},100);return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[w,t]);const H=V(()=>{d(!0),o.current&&c.add(o.current);const e=a?.current||f.current;e&&(e.muted=!0,e.play())},[]);return j("div",{ref:b,className:n("relative size-full",h),children:[u&&l("div",{className:n("absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out",p,{"opacity-100":!t,"overflow-visible opacity-0":t}),children:l("img",{src:u,alt:E,style:{width:"100%",height:"100%",objectFit:"cover"},className:n(y)})}),l("div",{className:n("size-full transition-opacity duration-500 ease-in-out",{"opacity-100":t,"opacity-0":!t}),style:{visibility:s?"visible":"hidden"},children:s&&l("div",{className:n("relative size-full",p),children:l("video",{ref:a||f,src:o.current||r,poster:u,className:n("size-full object-cover",y),onLoadedMetadata:H,autoPlay:N,muted:S,loop:k,controls:z,playsInline:I,...U},o.current)})})]})};var R=T;export{R as default};
+import{jsx as l,jsxs as j}from"react/jsx-runtime";import{useEffect as m,useState as g,useRef as v,useCallback as V}from"react";import{cn as n}from"../helpers/utils.js";import{debounce as M}from"lodash";const c=new Set,T=({src:r,poster:u,alt:E="Scroll Loaded Video",className:h="",videoWrapperClassName:y="",videoClassName:p="",autoplay:N=!1,muted:z=!0,loop:S=!0,controls:k=!1,playsInline:I=!0,videoRef:a=null,...U})=>{const[s,L]=g(!1),[t,d]=g(!1),b=v(null),f=v(null),o=v("");m(()=>{c.has(r)&&(L(!0),d(!0),o.current=r)},[r]),m(()=>{if(t&&s){const e=a?.current||f.current;e&&(e.muted=!0,e.play().catch(i=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",i)}))}},[t,s,a]);const w=V(()=>{const e=r;if(!e||o.current===e&&t)return;if(c.has(e)){d(!0),o.current=e;return}o.current=e;const i=document.createElement("video");i.preload="metadata",i.onloadedmetadata=()=>{d(!0),c.add(e)},i.src=e},[t,r]);m(()=>{if(!b.current||t)return;const e=M(()=>{if(window.scrollY>10)return L(!0),w(),window.removeEventListener("scroll",e)},100);return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[w,t]);const H=V(()=>{d(!0),o.current&&c.add(o.current);const e=a?.current||f.current;e&&(e.muted=!0,e.play())},[]);return j("div",{ref:b,className:n("relative size-full",h),children:[u&&l("div",{className:n("absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out",y,{"opacity-100":!t,"overflow-visible opacity-0":t}),children:l("img",{src:u,alt:E,style:{width:"100%",height:"100%",objectFit:"cover"},className:n(p),loading:"lazy"})}),l("div",{className:n("size-full transition-opacity duration-500 ease-in-out",{"opacity-100":t,"opacity-0":!t}),style:{visibility:s?"visible":"hidden"},children:s&&l("div",{className:n("relative size-full",y),children:l("video",{ref:a||f,src:o.current||r,poster:u,className:n("size-full object-cover",p),onLoadedMetadata:H,autoPlay:N,muted:z,loop:S,controls:k,playsInline:I,...U},o.current)})})]})};var R=T;export{R as default};
 //# sourceMappingURL=ScrollLoadVideo.js.map

package/dist/esm/helpers/ScrollLoadVideo.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/ScrollLoadVideo.tsx"],
-  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'lodash'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u5185\u90E8\u89C6\u9891\u5F15\u7528\uFF0C\u5982\u679C\u5916\u90E8\u6CA1\u6709\u4F20\u5165 videoRef\n  const internalVideoRef = useRef<HTMLVideoElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u5F53\u89C6\u9891\u5DF2\u52A0\u8F7D\u4E14\u5DF2\u5F00\u59CB\u52A0\u8F7D\u65F6\uFF0C\u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n  useEffect(() => {\n    if (isVideoLoaded && isVideoStartLoad) {\n      const videoElement = videoRef?.current || internalVideoRef.current\n      if (videoElement) {\n        // \u786E\u4FDD\u9759\u97F3\u4EE5\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\n        videoElement.muted = true\n        // \u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n        videoElement.play().catch((error: unknown) => {\n          console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n        })\n      }\n    }\n  }, [isVideoLoaded, isVideoStartLoad, videoRef])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n    const videoElement = videoRef?.current || internalVideoRef.current\n    if (videoElement) {\n      videoElement.muted = true\n      videoElement.play()\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef || internalVideoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'lodash'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u5185\u90E8\u89C6\u9891\u5F15\u7528\uFF0C\u5982\u679C\u5916\u90E8\u6CA1\u6709\u4F20\u5165 videoRef\n  const internalVideoRef = useRef<HTMLVideoElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u5F53\u89C6\u9891\u5DF2\u52A0\u8F7D\u4E14\u5DF2\u5F00\u59CB\u52A0\u8F7D\u65F6\uFF0C\u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n  useEffect(() => {\n    if (isVideoLoaded && isVideoStartLoad) {\n      const videoElement = videoRef?.current || internalVideoRef.current\n      if (videoElement) {\n        // \u786E\u4FDD\u9759\u97F3\u4EE5\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\n        videoElement.muted = true\n        // \u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n        videoElement.play().catch((error: unknown) => {\n          console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n        })\n      }\n    }\n  }, [isVideoLoaded, isVideoStartLoad, videoRef])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n    const videoElement = videoRef?.current || internalVideoRef.current\n    if (videoElement) {\n      videoElement.muted = true\n      videoElement.play()\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n            loading=\"lazy\"\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef || internalVideoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useEffect", "useState", "useRef", "useCallback", "cn", "debounce", "globalLoadedVideoUrls", "ScrollLoadVideo", "src", "poster", "alt", "className", "videoWrapperClassName", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "isVideoStartLoad", "setIsVideoStartLoad", "isVideoLoaded", "setIsVideoLoaded", "ref", "internalVideoRef", "currentVideoUrl", "videoElement", "error", "preloadVideo", "videoUrl", "scrollHandler", "handleVideoLoad", "ScrollLoadVideo_default"]
 }

package/dist/esm/stories/link.stories.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ declare const meta: {
         onClick?: Function;
     } & import("class-variance-authority").VariantProps<(props?: ({
         size?: "base" | "lg" | null | undefined;
-        variant?: "primary" | "secoundry" | null | undefined;
+        variant?: "primary" | "secondary" | null | undefined;
     } & import("class-variance-authority/types").ClassProp) | undefined) => string> & import("../helpers/component-props.js").ComponentPropsWithout<"a", import("../helpers/component-props.js").RemovedProps> & import("react").RefAttributes<HTMLAnchorElement>>;
     parameters: {
         layout: string;

package/dist/esm/stories/link.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import"@storybook/icons";import i from"../components/link.js";const n={title:"Components/Link",component:i,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{description:"\u5C3A\u5BF8",control:{type:"select"},options:["base","lg"],table:{defaultValue:{summary:"base"}}},variant:{description:"\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F",control:{type:"select"},options:["primary","secoundry"],table:{defaultValue:{summary:"primary"}}},onClick:{control:!1},suffixIcon:{control:!1},style:{control:!1},className:{control:!1},children:{control:!1}},args:{onClick:void 0}};var t=n;const r={args:{children:"Link"}},d=()=>a("div",{className:"inline-flex flex-col gap-4",children:[e("div",{className:"inline-flex gap-4",children:e(i,{size:"base",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"lg",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"base",variant:"secoundry",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"lg",variant:"secoundry",children:"Link"})})]}),c=()=>a("div",{className:"inline-flex flex-col gap-4",children:[a("div",{className:"inline-flex gap-4",children:[e(i,{size:"base",disabled:!0,children:"Link"}),e(i,{size:"base",disabled:!0,children:"Link"})]}),a("div",{className:"inline-flex gap-4",children:[e(i,{size:"lg",disabled:!0,children:"Link"}),e(i,{size:"lg",disabled:!0,children:"Link"})]})]});export{r as Default,c as Disabled,d as LinkSize,t as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import"@storybook/icons";import i from"../components/link.js";const n={title:"Components/Link",component:i,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{description:"\u5C3A\u5BF8",control:{type:"select"},options:["base","lg"],table:{defaultValue:{summary:"base"}}},variant:{description:"\u94FE\u63A5\u60AC\u6D6E\u6587\u5B57\u6837\u5F0F",control:{type:"select"},options:["primary","secondary"],table:{defaultValue:{summary:"primary"}}},onClick:{control:!1},suffixIcon:{control:!1},style:{control:!1},className:{control:!1},children:{control:!1}},args:{onClick:void 0}};var t=n;const r={args:{children:"Link"}},d=()=>a("div",{className:"inline-flex flex-col gap-4",children:[e("div",{className:"inline-flex gap-4",children:e(i,{size:"base",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"lg",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"base",variant:"secondary",children:"Link"})}),e("div",{className:"inline-flex gap-4",children:e(i,{size:"lg",variant:"secondary",children:"Link"})})]}),c=()=>a("div",{className:"inline-flex flex-col gap-4",children:[a("div",{className:"inline-flex gap-4",children:[e(i,{size:"base",disabled:!0,children:"Link"}),e(i,{size:"base",disabled:!0,children:"Link"})]}),a("div",{className:"inline-flex gap-4",children:[e(i,{size:"lg",disabled:!0,children:"Link"}),e(i,{size:"lg",disabled:!0,children:"Link"})]})]});export{r as Default,c as Disabled,d as LinkSize,t as default};
 //# sourceMappingURL=link.stories.js.map