npm - @anker-in/headless-ui - Versions diffs - 1.1.9-alpha.1764817121401 → 1.1.9-alpha.1764822725414 - Mend

@anker-in/headless-ui 1.1.9-alpha.1764817121401 → 1.1.9-alpha.1764822725414

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

package/dist/cjs/components/carousel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var Z=Object.create;var y=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var o in t)y(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of W(t))!j.call(e,a)&&a!==o&&y(e,a,{get:()=>t[a],enumerable:!(s=A(t,a))||s.enumerable});return e};var P=(e,t,o)=>(o=e!=null?Z(_(e)):{},g(t||!e||!e.__esModule?y(o,"default",{value:e,enumerable:!0}):o,e)),G=e=>g(y({},"__esModule",{value:!0}),e);var Q={};q(Q,{Carousel:()=>N,CarouselContent:()=>T,CarouselItem:()=>E,CarouselNext:()=>D,CarouselPrevious:()=>S,DotButton:()=>k});module.exports=G(Q);var l=require("react/jsx-runtime"),r=P(require("react")),R=P(require("embla-carousel-react")),p=require("../helpers/index.js"),h=P(require("./button.js"));const J=(e,t)=>{const[o,s]=r.useState(0),[a,C]=r.useState([]),f=r.useCallback(m=>{e&&(e.scrollTo(m),t&&t(e))},[e,t]),i=r.useCallback(m=>{C(m.scrollSnapList())},[]),u=r.useCallback(m=>{s(m.selectedScrollSnap())},[]);return r.useEffect(()=>{e&&(i(e),u(e),e.on("reInit",i).on("reInit",u).on("select",u))},[e,i,u]),{selectedIndex:o,scrollSnaps:a,onDotButtonClick:f}},k=e=>{const{children:t,...o}=e;return(0,l.jsx)("button",{type:"button",...o,children:t})},L=r.createContext(null);function v(){const e=r.useContext(L);if(!e)throw new Error("useCarousel must be used within a <Carousel />");return e}const N=r.forwardRef(({orientation:e="horizontal",showNavigation:t=!1,navigationPosition:o="inner",opts:s,setApi:a,plugins:C,className:f,children:i,...u},m)=>{const[B,n]=(0,R.default)({...s,axis:e==="horizontal"?"x":"y"},C),[M,z]=r.useState(!1),[H,I]=r.useState(!1),{selectedIndex:U,scrollSnaps:F,onDotButtonClick:K}=J(n),d=r.useCallback(c=>{c&&(z(c.canScrollPrev()),I(c.canScrollNext()))},[]),x=r.useCallback(()=>{n?.scrollPrev()},[n]),b=r.useCallback(()=>{n?.scrollNext()},[n]),O=r.useCallback(c=>{c.key==="ArrowLeft"?(c.preventDefault(),x()):c.key==="ArrowRight"&&(c.preventDefault(),b())},[x,b]);return r.useEffect(()=>{!n||!a||a(n)},[n,a]),r.useEffect(()=>{if(n)return d(n),n.on("reInit",d),n.on("select",d),()=>{n?.off("select",d)}},[n,d]),(0,l.jsx)(L.Provider,{value:{carouselRef:B,api:n,opts:s,orientation:e||(s?.axis==="y"?"vertical":"horizontal"),scrollPrev:x,scrollNext:b,canScrollPrev:M,canScrollNext:H},children:(0,l.jsxs)("div",{ref:m,onKeyDownCapture:O,className:(0,p.cn)("relative",f),role:"region","aria-roledescription":"carousel",...u,children:[i,t&&(0,l.jsx)("div",{className:(0,p.cn)("absolute  left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]",{"laptop:bottom-[40px] bottom-[24px]":o==="inner","laptop:-bottom-[40px] -bottom-[24px]":o==="outter"}),children:F.map((c,w)=>(0,l.jsx)(k,{onClick:()=>K(w),className:(0,p.cn)("laptop:w-[30px] h-[3px] w-[16px] bg-[#86868C]",{"bg-[#1D1D1F]":w===U})},w))})]})})});N.displayName="Carousel";const T=r.forwardRef(({className:e,...t},o)=>{const{carouselRef:s,orientation:a}=v();return(0,l.jsx)("div",{ref:s,className:"overflow-hidden",children:(0,l.jsx)("div",{ref:o,className:(0,p.cn)("flex",a==="horizontal"?"-ml-4":"-mt-4 flex-col",e),...t})})});T.displayName="CarouselContent";const E=r.forwardRef(({className:e,...t},o)=>{const{orientation:s}=v();return(0,l.jsx)("div",{ref:o,role:"group","aria-roledescription":"slide",className:(0,p.cn)("w-0 shrink-0 grow-0 basis-full",s==="horizontal"?"pl-4":"pt-4",e),...t})});E.displayName="CarouselItem";const S=r.forwardRef(({className:e,variant:t="secondary",size:o="icon",children:s,...a},C)=>{const{orientation:f,scrollPrev:i,canScrollPrev:u}=v();return(0,l.jsxs)(h.default,{ref:C,variant:t,size:o,className:(0,p.cn)("absolute  size-8 rounded-full",f==="horizontal"?"-left-12 top-1/2 -translate-y-1/2":"-top-12 left-1/2 -translate-x-1/2 rotate-90",e),disabled:!u,onClick:i,...a,children:[s||(0,l.jsxs)("svg",{width:"58",height:"58",viewBox:"0 0 58 58",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,l.jsx)("circle",{opacity:"0.2",cx:"29",cy:"29",r:"29",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)",fill:"#1D1D1F"}),(0,l.jsx)("path",{d:"M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z",fill:"white"})]}),(0,l.jsx)("span",{className:"sr-only",children:"Previous slide"})]})});S.displayName="CarouselPrevious";const D=r.forwardRef(({className:e,variant:t="secondary",size:o="icon",children:s,...a},C)=>{const{orientation:f,scrollNext:i,canScrollNext:u}=v();return(0,l.jsxs)(h.default,{ref:C,variant:t,size:o,className:(0,p.cn)("absolute size-8 rounded-full",f==="horizontal"?"-right-12 top-1/2 -translate-y-1/2":"-bottom-12 left-1/2 -translate-x-1/2 rotate-90",e),disabled:!u,onClick:i,...a,children:[s||(0,l.jsxs)("svg",{width:"58",height:"58",viewBox:"0 0 58 58",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,l.jsx)("circle",{opacity:"0.2",cx:"29",cy:"29",r:"29",transform:"rotate(-180 29 29)",fill:"#1D1D1F"}),(0,l.jsx)("path",{d:"M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z",fill:"white"})]}),(0,l.jsx)("span",{className:"sr-only",children:"Next slide"})]})});D.displayName="CarouselNext";
+"use strict";"use client";var O=Object.create;var y=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var o in t)y(e,o,{get:t[o],enumerable:!0})},D=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of W(t))!j.call(e,a)&&a!==o&&y(e,a,{get:()=>t[a],enumerable:!(s=Z(t,a))||s.enumerable});return e};var P=(e,t,o)=>(o=e!=null?O(_(e)):{},D(t||!e||!e.__esModule?y(o,"default",{value:e,enumerable:!0}):o,e)),G=e=>D(y({},"__esModule",{value:!0}),e);var Q={};q(Q,{Carousel:()=>N,CarouselContent:()=>T,CarouselItem:()=>E,CarouselNext:()=>g,CarouselPrevious:()=>S,DotButton:()=>k});module.exports=G(Q);var l=require("react/jsx-runtime"),r=P(require("react")),R=P(require("embla-carousel-react")),p=require("../helpers/index.js"),h=P(require("./button.js"));const J=(e,t)=>{const[o,s]=r.useState(0),[a,C]=r.useState([]),f=r.useCallback(m=>{e&&(e.scrollTo(m),t&&t(e))},[e,t]),i=r.useCallback(m=>{C(m.scrollSnapList())},[]),u=r.useCallback(m=>{s(m.selectedScrollSnap())},[]);return r.useEffect(()=>{e&&(i(e),u(e),e.on("reInit",i).on("reInit",u).on("select",u))},[e,i,u]),{selectedIndex:o,scrollSnaps:a,onDotButtonClick:f}},k=e=>{const{children:t,...o}=e;return(0,l.jsx)("button",{type:"button",...o,children:t})},L=r.createContext(null);function v(){const e=r.useContext(L);if(!e)throw new Error("useCarousel must be used within a <Carousel />");return e}const N=r.forwardRef(({orientation:e="horizontal",showNavigation:t=!1,navigationPosition:o="inner",opts:s,setApi:a,plugins:C,className:f,children:i,...u},m)=>{const[B,n]=(0,R.default)({...s,axis:e==="horizontal"?"x":"y"},C),[M,z]=r.useState(!1),[H,I]=r.useState(!1),{selectedIndex:U,scrollSnaps:F,onDotButtonClick:K}=J(n),d=r.useCallback(c=>{c&&(z(c.canScrollPrev()),I(c.canScrollNext()))},[]),x=r.useCallback(()=>{n?.scrollPrev()},[n]),b=r.useCallback(()=>{n?.scrollNext()},[n]),A=r.useCallback(c=>{c.key==="ArrowLeft"?(c.preventDefault(),x()):c.key==="ArrowRight"&&(c.preventDefault(),b())},[x,b]);return r.useEffect(()=>{!n||!a||a(n)},[n,a]),r.useEffect(()=>{if(n)return d(n),n.on("reInit",d),n.on("select",d),()=>{n?.off("select",d)}},[n,d]),(0,l.jsx)(L.Provider,{value:{carouselRef:B,api:n,opts:s,orientation:e||(s?.axis==="y"?"vertical":"horizontal"),scrollPrev:x,scrollNext:b,canScrollPrev:M,canScrollNext:H},children:(0,l.jsxs)("div",{ref:m,onKeyDownCapture:A,className:(0,p.cn)("relative",f),role:"region","aria-roledescription":"carousel",...u,children:[i,t&&(0,l.jsx)("div",{className:(0,p.cn)("absolute  left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]",{"laptop:bottom-[40px] bottom-[24px]":o==="inner","laptop:-bottom-[40px] -bottom-[24px]":o==="outter"}),children:F.map((c,w)=>(0,l.jsx)(k,{onClick:()=>K(w),className:(0,p.cn)("laptop:w-[30px] h-[3px] w-[16px] bg-[#86868C]",{"bg-[#080A0F]":w===U})},w))})]})})});N.displayName="Carousel";const T=r.forwardRef(({className:e,...t},o)=>{const{carouselRef:s,orientation:a}=v();return(0,l.jsx)("div",{ref:s,className:"overflow-hidden",children:(0,l.jsx)("div",{ref:o,className:(0,p.cn)("flex",a==="horizontal"?"-ml-4":"-mt-4 flex-col",e),...t})})});T.displayName="CarouselContent";const E=r.forwardRef(({className:e,...t},o)=>{const{orientation:s}=v();return(0,l.jsx)("div",{ref:o,role:"group","aria-roledescription":"slide",className:(0,p.cn)("w-0 shrink-0 grow-0 basis-full",s==="horizontal"?"pl-4":"pt-4",e),...t})});E.displayName="CarouselItem";const S=r.forwardRef(({className:e,variant:t="secondary",size:o="icon",children:s,...a},C)=>{const{orientation:f,scrollPrev:i,canScrollPrev:u}=v();return(0,l.jsxs)(h.default,{ref:C,variant:t,size:o,className:(0,p.cn)("absolute  size-8 rounded-full",f==="horizontal"?"-left-12 top-1/2 -translate-y-1/2":"-top-12 left-1/2 -translate-x-1/2 rotate-90",e),disabled:!u,onClick:i,...a,children:[s||(0,l.jsxs)("svg",{width:"58",height:"58",viewBox:"0 0 58 58",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,l.jsx)("circle",{opacity:"0.2",cx:"29",cy:"29",r:"29",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)",fill:"#1D1D1F"}),(0,l.jsx)("path",{d:"M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z",fill:"white"})]}),(0,l.jsx)("span",{className:"sr-only",children:"Previous slide"})]})});S.displayName="CarouselPrevious";const g=r.forwardRef(({className:e,variant:t="secondary",size:o="icon",children:s,...a},C)=>{const{orientation:f,scrollNext:i,canScrollNext:u}=v();return(0,l.jsxs)(h.default,{ref:C,variant:t,size:o,className:(0,p.cn)("absolute size-8 rounded-full",f==="horizontal"?"-right-12 top-1/2 -translate-y-1/2":"-bottom-12 left-1/2 -translate-x-1/2 rotate-90",e),disabled:!u,onClick:i,...a,children:[s||(0,l.jsxs)("svg",{width:"58",height:"58",viewBox:"0 0 58 58",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,l.jsx)("circle",{opacity:"0.2",cx:"29",cy:"29",r:"29",transform:"rotate(-180 29 29)",fill:"#1D1D1F"}),(0,l.jsx)("path",{d:"M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z",fill:"white"})]}),(0,l.jsx)("span",{className:"sr-only",children:"Next slide"})]})});g.displayName="CarouselNext";
 //# sourceMappingURL=carousel.js.map

package/dist/cjs/components/carousel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/carousel.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { EmblaCarouselType } from 'embla-carousel'\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\n\nimport { cn } from '../helpers/index.js'\nimport Button from './button.js'\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  /**\n   * \u662F\u5426\u663E\u793A\u5BFC\u822A\u70B9\n   */\n  showNavigation?: boolean\n  /**\n   * \u5BFC\u822A\u70B9\u4F4D\u7F6E default inner\n   */\n  navigationPosition?: 'inner' | 'outter'\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\ntype UseDotButtonType = {\n  selectedIndex: number\n  scrollSnaps: number[]\n  onDotButtonClick: (index: number) => void\n}\n\nconst useDotButton = (\n  emblaApi: EmblaCarouselType | undefined,\n  onButtonClick?: (emblaApi: EmblaCarouselType) => void\n): UseDotButtonType => {\n  const [selectedIndex, setSelectedIndex] = React.useState(0)\n  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n  const onDotButtonClick = React.useCallback(\n    (index: number) => {\n      if (!emblaApi) return\n      emblaApi.scrollTo(index)\n      if (onButtonClick) onButtonClick(emblaApi)\n    },\n    [emblaApi, onButtonClick]\n  )\n\n  const onInit = React.useCallback((emblaApi: EmblaCarouselType) => {\n    setScrollSnaps(emblaApi.scrollSnapList())\n  }, [])\n\n  const onSelect = React.useCallback((emblaApi: EmblaCarouselType) => {\n    setSelectedIndex(emblaApi.selectedScrollSnap())\n  }, [])\n\n  React.useEffect(() => {\n    if (!emblaApi) return\n\n    onInit(emblaApi)\n    onSelect(emblaApi)\n\n    emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)\n  }, [emblaApi, onInit, onSelect])\n\n  return {\n    selectedIndex,\n    scrollSnaps,\n    onDotButtonClick,\n  }\n}\n\ntype PropType = React.ComponentPropsWithRef<'button'>\n\nexport const DotButton: React.FC<PropType> = props => {\n  const { children, ...restProps } = props\n\n  return (\n    <button type=\"button\" {...restProps}>\n      {children}\n    </button>\n  )\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />')\n  }\n\n  return context\n}\n\nconst Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(\n  (\n    {\n      orientation = 'horizontal',\n      showNavigation = false,\n      navigationPosition = 'inner',\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === 'horizontal' ? 'x' : 'y',\n      },\n      plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(api)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === 'ArrowLeft') {\n          event.preventDefault()\n          scrollPrev()\n        } else if (event.key === 'ArrowRight') {\n          event.preventDefault()\n          scrollNext()\n        }\n      },\n      [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\n\n      onSelect(api)\n      api.on('reInit', onSelect)\n      api.on('select', onSelect)\n\n      return () => {\n        api?.off('select', onSelect)\n      }\n    }, [api, onSelect])\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn('relative', className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n          {showNavigation && (\n            <div\n              className={cn('absolute  left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]', {\n                'laptop:bottom-[40px] bottom-[24px]': navigationPosition === 'inner',\n                'laptop:-bottom-[40px] -bottom-[24px]': navigationPosition === 'outter',\n              })}\n            >\n              {scrollSnaps.map((_, index) => (\n                <DotButton\n                  key={index}\n                  onClick={() => onDotButtonClick(index)}\n                  className={cn('laptop:w-[30px] h-[3px] w-[16px] bg-[#86868C]', {\n                    'bg-[#1D1D1F]': index === selectedIndex,\n                  })}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </CarouselContext.Provider>\n    )\n  }\n)\nCarousel.displayName = 'Carousel'\n\nconst CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const { carouselRef, orientation } = useCarousel()\n\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}\n          {...props}\n        />\n      </div>\n    )\n  }\n)\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const { orientation } = useCarousel()\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        className={cn('w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n        {...props}\n      />\n    )\n  }\n)\nCarouselItem.displayName = 'CarouselItem'\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n  ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {\n    const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          'absolute  size-8 rounded-full',\n          orientation === 'horizontal'\n            ? '-left-12 top-1/2 -translate-y-1/2'\n            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n          className\n        )}\n        disabled={!canScrollPrev}\n        onClick={scrollPrev}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle\n              opacity=\"0.2\"\n              cx=\"29\"\n              cy=\"29\"\n              r=\"29\"\n              transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)\"\n              fill=\"#1D1D1F\"\n            />\n            <path\n              d=\"M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z\"\n              fill=\"white\"\n            />\n          </svg>\n        )}\n        <span className=\"sr-only\">Previous slide</span>\n      </Button>\n    )\n  }\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n  ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {\n    const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          'absolute size-8 rounded-full',\n          orientation === 'horizontal'\n            ? '-right-12 top-1/2 -translate-y-1/2'\n            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n          className\n        )}\n        disabled={!canScrollNext}\n        onClick={scrollNext}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle opacity=\"0.2\" cx=\"29\" cy=\"29\" r=\"29\" transform=\"rotate(-180 29 29)\" fill=\"#1D1D1F\" />\n            <path\n              d=\"M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z\"\n              fill=\"white\"\n            />\n          </svg>\n        )}\n        <span className=\"sr-only\">Next slide</span>\n      </Button>\n    )\n  }\n)\nCarouselNext.displayName = 'CarouselNext'\n\nexport { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }\n"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { EmblaCarouselType } from 'embla-carousel'\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\n\nimport { cn } from '../helpers/index.js'\nimport Button from './button.js'\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  /**\n   * \u662F\u5426\u663E\u793A\u5BFC\u822A\u70B9\n   */\n  showNavigation?: boolean\n  /**\n   * \u5BFC\u822A\u70B9\u4F4D\u7F6E default inner\n   */\n  navigationPosition?: 'inner' | 'outter'\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\ntype UseDotButtonType = {\n  selectedIndex: number\n  scrollSnaps: number[]\n  onDotButtonClick: (index: number) => void\n}\n\nconst useDotButton = (\n  emblaApi: EmblaCarouselType | undefined,\n  onButtonClick?: (emblaApi: EmblaCarouselType) => void\n): UseDotButtonType => {\n  const [selectedIndex, setSelectedIndex] = React.useState(0)\n  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n  const onDotButtonClick = React.useCallback(\n    (index: number) => {\n      if (!emblaApi) return\n      emblaApi.scrollTo(index)\n      if (onButtonClick) onButtonClick(emblaApi)\n    },\n    [emblaApi, onButtonClick]\n  )\n\n  const onInit = React.useCallback((emblaApi: EmblaCarouselType) => {\n    setScrollSnaps(emblaApi.scrollSnapList())\n  }, [])\n\n  const onSelect = React.useCallback((emblaApi: EmblaCarouselType) => {\n    setSelectedIndex(emblaApi.selectedScrollSnap())\n  }, [])\n\n  React.useEffect(() => {\n    if (!emblaApi) return\n\n    onInit(emblaApi)\n    onSelect(emblaApi)\n\n    emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)\n  }, [emblaApi, onInit, onSelect])\n\n  return {\n    selectedIndex,\n    scrollSnaps,\n    onDotButtonClick,\n  }\n}\n\ntype PropType = React.ComponentPropsWithRef<'button'>\n\nexport const DotButton: React.FC<PropType> = props => {\n  const { children, ...restProps } = props\n\n  return (\n    <button type=\"button\" {...restProps}>\n      {children}\n    </button>\n  )\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />')\n  }\n\n  return context\n}\n\nconst Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(\n  (\n    {\n      orientation = 'horizontal',\n      showNavigation = false,\n      navigationPosition = 'inner',\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === 'horizontal' ? 'x' : 'y',\n      },\n      plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(api)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === 'ArrowLeft') {\n          event.preventDefault()\n          scrollPrev()\n        } else if (event.key === 'ArrowRight') {\n          event.preventDefault()\n          scrollNext()\n        }\n      },\n      [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\n\n      onSelect(api)\n      api.on('reInit', onSelect)\n      api.on('select', onSelect)\n\n      return () => {\n        api?.off('select', onSelect)\n      }\n    }, [api, onSelect])\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn('relative', className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n          {showNavigation && (\n            <div\n              className={cn('absolute  left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]', {\n                'laptop:bottom-[40px] bottom-[24px]': navigationPosition === 'inner',\n                'laptop:-bottom-[40px] -bottom-[24px]': navigationPosition === 'outter',\n              })}\n            >\n              {scrollSnaps.map((_, index) => (\n                <DotButton\n                  key={index}\n                  onClick={() => onDotButtonClick(index)}\n                  className={cn('laptop:w-[30px] h-[3px] w-[16px] bg-[#86868C]', {\n                    'bg-[#080A0F]': index === selectedIndex,\n                  })}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </CarouselContext.Provider>\n    )\n  }\n)\nCarousel.displayName = 'Carousel'\n\nconst CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const { carouselRef, orientation } = useCarousel()\n\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}\n          {...props}\n        />\n      </div>\n    )\n  }\n)\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const { orientation } = useCarousel()\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        className={cn('w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n        {...props}\n      />\n    )\n  }\n)\nCarouselItem.displayName = 'CarouselItem'\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n  ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {\n    const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          'absolute  size-8 rounded-full',\n          orientation === 'horizontal'\n            ? '-left-12 top-1/2 -translate-y-1/2'\n            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n          className\n        )}\n        disabled={!canScrollPrev}\n        onClick={scrollPrev}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle\n              opacity=\"0.2\"\n              cx=\"29\"\n              cy=\"29\"\n              r=\"29\"\n              transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)\"\n              fill=\"#1D1D1F\"\n            />\n            <path\n              d=\"M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z\"\n              fill=\"white\"\n            />\n          </svg>\n        )}\n        <span className=\"sr-only\">Previous slide</span>\n      </Button>\n    )\n  }\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n  ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {\n    const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n    return (\n      <Button\n        ref={ref}\n        variant={variant}\n        size={size}\n        className={cn(\n          'absolute size-8 rounded-full',\n          orientation === 'horizontal'\n            ? '-right-12 top-1/2 -translate-y-1/2'\n            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n          className\n        )}\n        disabled={!canScrollNext}\n        onClick={scrollNext}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle opacity=\"0.2\" cx=\"29\" cy=\"29\" r=\"29\" transform=\"rotate(-180 29 29)\" fill=\"#1D1D1F\" />\n            <path\n              d=\"M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z\"\n              fill=\"white\"\n            />\n          </svg>\n        )}\n        <span className=\"sr-only\">Next slide</span>\n      </Button>\n    )\n  }\n)\nCarouselNext.displayName = 'CarouselNext'\n\nexport { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }\n"],
   "mappings": "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",
   "names": ["carousel_exports", "__export", "Carousel", "CarouselContent", "CarouselItem", "CarouselNext", "CarouselPrevious", "DotButton", "__toCommonJS", "import_jsx_runtime", "React", "import_embla_carousel_react", "import_helpers", "import_button", "useDotButton", "emblaApi", "onButtonClick", "selectedIndex", "setSelectedIndex", "scrollSnaps", "setScrollSnaps", "onDotButtonClick", "index", "onInit", "onSelect", "props", "children", "restProps", "CarouselContext", "useCarousel", "context", "orientation", "showNavigation", "navigationPosition", "opts", "setApi", "plugins", "className", "ref", "carouselRef", "api", "useEmblaCarousel", "canScrollPrev", "setCanScrollPrev", "canScrollNext", "setCanScrollNext", "scrollPrev", "scrollNext", "handleKeyDown", "event", "_", "variant", "size", "Button"]
 }

package/dist/cjs/components/tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var N=Object.create;var p=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var a in e)p(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of W(e))!k.call(t,s)&&s!==a&&p(t,s,{get:()=>e[s],enumerable:!(o=w(e,s))||o.enumerable});return t};var R=(t,e,a)=>(a=t!=null?N(E(t)):{},y(e||!t||!t.__esModule?p(a,"default",{value:t,enumerable:!0}):a,t)),S=t=>y(p({},"__esModule",{value:!0}),t);var A={};q(A,{Tabs:()=>g,TabsContent:()=>T,TabsList:()=>u,TabsTrigger:()=>h});module.exports=S(A);var r=require("react/jsx-runtime"),n=R(require("react")),l=require("../helpers/index.js"),i=R(require("@radix-ui/react-tabs")),b=require("class-variance-authority");const c=n.createContext({align:"left",shape:"square"}),g=n.forwardRef(({children:t,align:e="left",shape:a="square",...o},s)=>(0,r.jsx)(i.Root,{ref:s,...o,children:(0,r.jsx)(c.Provider,{value:{align:e,shape:a},children:t})}));g.displayName="Tabs";const V=(0,b.cva)("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),j=(0,b.cva)("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),u=n.forwardRef(({className:t,...e},a)=>{const{align:o,shape:s}=n.useContext(c);return(0,r.jsx)(i.List,{ref:a,className:(0,l.cn)("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",V({align:o,shape:s}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});u.displayName=i.List.displayName;const h=n.forwardRef(({className:t,onClick:e,...a},o)=>{const{shape:s}=n.useContext(c),v=f=>{e?.(f);const d=f?.currentTarget,m=f?.currentTarget?.parentElement;if(d&&m){const x=d.offsetLeft,P=d.offsetWidth,C=m.offsetWidth,L=x-C/2+P/2;m.scrollTo({left:L,behavior:"smooth"})}};return(0,r.jsx)(i.Trigger,{ref:o,className:(0,l.cn)("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",t,j({shape:s})),onClick:v,...a})});h.displayName=i.Trigger.displayName;const T=n.forwardRef(({className:t,...e},a)=>(0,r.jsx)(i.Content,{ref:a,className:(0,l.cn)(t),...e}));T.displayName=i.Content.displayName;
+"use strict";"use client";var N=Object.create;var p=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var a in e)p(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of W(e))!k.call(t,s)&&s!==a&&p(t,s,{get:()=>e[s],enumerable:!(o=w(e,s))||o.enumerable});return t};var R=(t,e,a)=>(a=t!=null?N(E(t)):{},y(e||!t||!t.__esModule?p(a,"default",{value:t,enumerable:!0}):a,t)),A=t=>y(p({},"__esModule",{value:!0}),t);var V={};q(V,{Tabs:()=>g,TabsContent:()=>T,TabsList:()=>u,TabsTrigger:()=>h});module.exports=A(V);var r=require("react/jsx-runtime"),n=R(require("react")),l=require("../helpers/index.js"),i=R(require("@radix-ui/react-tabs")),b=require("class-variance-authority");const d=n.createContext({align:"left",shape:"square"}),g=n.forwardRef(({children:t,align:e="left",shape:a="square",...o},s)=>(0,r.jsx)(i.Root,{ref:s,...o,children:(0,r.jsx)(d.Provider,{value:{align:e,shape:a},children:t})}));g.displayName="Tabs";const F=(0,b.cva)("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),S=(0,b.cva)("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),u=n.forwardRef(({className:t,...e},a)=>{const{align:o,shape:s}=n.useContext(d);return(0,r.jsx)(i.List,{ref:a,className:(0,l.cn)("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",F({align:o,shape:s}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});u.displayName=i.List.displayName;const h=n.forwardRef(({className:t,onClick:e,...a},o)=>{const{shape:s}=n.useContext(d),v=f=>{e?.(f);const m=f?.currentTarget,c=f?.currentTarget?.parentElement;if(m&&c){const x=m.offsetLeft,P=m.offsetWidth,C=c.offsetWidth,L=x-C/2+P/2;c.scrollTo({left:L,behavior:"smooth"})}};return(0,r.jsx)(i.Trigger,{ref:o,className:(0,l.cn)("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,S({shape:s})),onClick:v,...a})});h.displayName=i.Trigger.displayName;const T=n.forwardRef(({className:t,...e},a)=>(0,r.jsx)(i.Content,{ref:a,className:(0,l.cn)(t),...e}));T.displayName=i.Content.displayName;
 //# sourceMappingURL=tabs.js.map

package/dist/cjs/components/tabs.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tabs.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    const tabElement = e?.currentTarget\n    const container = (e?.currentTarget as any)?.parentElement\n    if (tabElement && container) {\n      const tabLeft = (tabElement as any).offsetLeft\n      const tabWidth = (tabElement as any).offsetWidth\n      const containerWidth = container.offsetWidth\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n    // e.currentTarget.scrollIntoView({\n    //   behavior: 'smooth',\n    //   inline: 'center',\n    //   block: 'nearest',\n    // })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    const tabElement = e?.currentTarget\n    const container = (e?.currentTarget as any)?.parentElement\n    if (tabElement && container) {\n      const tabLeft = (tabElement as any).offsetLeft\n      const tabWidth = (tabElement as any).offsetWidth\n      const containerWidth = container.offsetWidth\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n    // e.currentTarget.scrollIntoView({\n    //   behavior: 'smooth',\n    //   inline: 'center',\n    //   block: 'nearest',\n    // })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
   "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,gBAAAC,EAAA,aAAAC,EAAA,gBAAAC,IAAA,eAAAC,EAAAN,GAyBI,IAAAO,EAAA,6BAvBJC,EAAuB,oBACvBC,EAAmB,+BAEnBC,EAA+B,mCAC/BC,EAAoB,oCAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKN,EAAOM,EAAM,WAMjB,CAAC,CAAE,SAAAK,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,OAC3D,OAACP,EAAc,KAAd,CAAmB,IAAKO,EAAM,GAAGD,EAChC,mBAACJ,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAE,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDX,EAAK,YAAc,OAEnB,MAAMgB,KAAmB,OAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKC,KAAsB,OAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKf,EAAWI,EAAM,WAGrB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOI,EAAiB,MAAOC,CAAgB,EAAId,EAAM,WAAWI,CAAc,EAC1F,SACE,OAACF,EAAc,KAAd,CACC,IAAKO,EACL,aAAW,MACT,4DACAC,EAAiB,CACf,MAAOG,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGJ,EACN,CAEJ,CAAC,EACDZ,EAAS,YAAcM,EAAc,KAAK,YAE1C,MAAML,EAAcG,EAAM,WAGxB,CAAC,CAAE,UAAAY,EAAW,QAAAG,EAAS,GAAGP,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOK,CAAgB,EAAId,EAAM,WAAWI,CAAc,EAC5DY,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAaF,GAAG,eAAuB,cAC7C,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAWF,EAAmB,WAC9BG,EAAYH,EAAmB,YAC/BI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CAMF,EACA,SACE,OAACrB,EAAc,QAAd,CACC,IAAKO,EACL,aAAW,MACT,8PACAG,EACAD,EAAoB,CAClB,MAAOG,CACT,CAAC,CACH,EACA,QAASE,EACR,GAAGR,EACN,CAEJ,CAAC,EACDX,EAAY,YAAcK,EAAc,QAAQ,YAEhD,MAAMP,EAAcK,EAAM,WAGxB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,OAAQ,OAACP,EAAc,QAAd,CAAsB,IAAKO,EAAK,aAAW,MAAGG,CAAS,EAAI,GAAGJ,EAAO,CAAE,EAC5Gb,EAAY,YAAcO,EAAc,QAAQ",
   "names": ["tabs_exports", "__export", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "TabsPrimitive", "import_class_variance_authority", "TabListContext", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "className", "alignFromParent", "shapeFromParent", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo"]
 }

package/dist/cjs/helpers/ScrollLoadVideo.d.ts CHANGED Viewed

@@ -1,15 +1,16 @@
-declare const ScrollLoadVideo: ({ src, poster, alt, className, videoWrapperClassName, videoClassName, autoplay, muted, loop, controls, playsInline, videoRef, ...attr }: {
+import React from 'react';
+interface ScrollLoadVideoProps {
     src: string;
     poster?: string;
-    alt?: string;
     className?: string;
-    videoWrapperClassName?: string;
     videoClassName?: string;
     autoplay?: boolean;
     muted?: boolean;
     loop?: boolean;
     controls?: boolean;
     playsInline?: boolean;
+    videoRef?: React.RefObject<HTMLVideoElement>;
     [key: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}
+declare const ScrollLoadVideo: ({ src, poster, className, videoClassName, autoplay, muted, loop, controls, playsInline, videoRef, ...attr }: ScrollLoadVideoProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollLoadVideo;

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

@@ -1,2 +1,2 @@
-"use strict";var L=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var j=(t,r)=>{for(var d in r)L(t,d,{get:r[d],enumerable:!0})},C=(t,r,d,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of M(r))!T.call(t,i)&&i!==d&&L(t,i,{get:()=>r[i],enumerable:!(u=H(r,i))||u.enumerable});return t};var D=t=>C(L({},"__esModule",{value:!0}),t);var R={};j(R,{default:()=>P});module.exports=D(R);var a=require("react/jsx-runtime"),o=require("react"),s=require("../helpers/utils.js"),E=require("es-toolkit");const y=new Set,F=({src:t,poster:r,alt:d="Scroll Loaded Video",className:u="",videoWrapperClassName:i="",videoClassName:b="",autoplay:h=!1,muted:N=!0,loop:z=!0,controls:S=!1,playsInline:k=!0,videoRef:f=null,...I})=>{const[m,w]=(0,o.useState)(!1),[n,v]=(0,o.useState)(!1),g=(0,o.useRef)(null),p=(0,o.useRef)(null),l=(0,o.useRef)("");(0,o.useEffect)(()=>{y.has(t)&&(w(!0),v(!0),l.current=t)},[t]),(0,o.useEffect)(()=>{if(n&&m){const e=f?.current||p.current;e&&(e.muted=!0,e.play().catch(c=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",c)}))}},[n,m,f]);const V=(0,o.useCallback)(()=>{const e=t;if(!e||l.current===e&&n)return;if(y.has(e)){v(!0),l.current=e;return}l.current=e;const c=document.createElement("video");c.preload="metadata",c.onloadedmetadata=()=>{v(!0),y.add(e)},c.src=e},[n,t]);(0,o.useEffect)(()=>{if(!g.current||n)return;const e=(0,E.debounce)(()=>{if(window.scrollY>10)return w(!0),V(),window.removeEventListener("scroll",e)},100);return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[V,n]);const U=(0,o.useCallback)(()=>{v(!0),l.current&&y.add(l.current);const e=f?.current||p.current;e&&(e.muted=!0,e.play())},[]);return(0,a.jsxs)("div",{ref:g,className:(0,s.cn)("relative size-full",u),children:[r&&(0,a.jsx)("div",{className:(0,s.cn)("absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out",i,{"opacity-100":!n,"overflow-visible opacity-0":n}),children:(0,a.jsx)("img",{src:r,alt:d,style:{width:"100%",height:"100%",objectFit:"cover"},className:(0,s.cn)(b),loading:"lazy"})}),(0,a.jsx)("div",{className:(0,s.cn)("size-full transition-opacity duration-500 ease-in-out",{"opacity-100":n,"opacity-0":!n}),style:{visibility:m?"visible":"hidden"},children:m&&(0,a.jsx)("div",{className:(0,s.cn)("relative size-full",i),children:(0,a.jsx)("video",{ref:f||p,src:l.current||t,poster:r,className:(0,s.cn)("size-full object-cover",b),onLoadedMetadata:U,autoPlay:h,muted:N,loop:z,controls:S,playsInline:k,...I},l.current)})})]})};var P=F;
+"use strict";var u=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var w=(o,e)=>{for(var n in e)u(o,n,{get:e[n],enumerable:!0})},H=(o,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!T.call(o,r)&&r!==n&&u(o,r,{get:()=>e[r],enumerable:!(l=M(e,r))||l.enumerable});return o};var k=o=>H(u({},"__esModule",{value:!0}),o);var P={};w(P,{default:()=>O});module.exports=k(P);var f=require("react/jsx-runtime"),t=require("react"),d=require("../helpers/utils.js");const z=({src:o,poster:e,className:n="",videoClassName:l="",autoplay:r=!0,muted:v=!0,loop:b=!0,controls:L=!1,playsInline:R=!0,videoRef:g,...V})=>{const[a,h]=(0,t.useState)(!1),E=(0,t.useRef)(null),m=(0,t.useRef)(null),s=g||E;return(0,t.useEffect)(()=>{const p=new IntersectionObserver(y=>{y.forEach(S=>{if(S.isIntersecting){if(a||h(!0),r&&s.current){const i=s.current;i.muted=!0,i.currentTime=0,i.play().catch(I=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",I)})}}else s.current&&s.current.pause()})},{threshold:.1,rootMargin:"50px"}),c=m.current;return c&&p.observe(c),()=>{c&&p.unobserve(c)}},[r,s,a]),(0,f.jsx)("div",{ref:m,className:(0,d.cn)("relative size-full",n),children:(0,f.jsx)("video",{ref:s,src:a?o:void 0,poster:e,className:(0,d.cn)("size-full object-cover",l),loop:b,muted:v,controls:L,playsInline:R,preload:"metadata",...V})})};var O=z;
 //# sourceMappingURL=ScrollLoadVideo.js.map

package/dist/cjs/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 'es-toolkit'\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    // @ts-ignore\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": ["ScrollLoadVideo_exports", "__export", "ScrollLoadVideo_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_es_toolkit", "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"]
+  "sourcesContent": ["import React, { useRef, useEffect, useState } from 'react'\nimport { cn } from '../helpers/utils.js'\n\ninterface ScrollLoadVideoProps {\n  src: string\n  poster?: string\n  className?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  videoRef?: React.RefObject<HTMLVideoElement>\n  [key: string]: any\n}\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  className = '',\n  videoClassName = '',\n  autoplay = true,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef,\n  ...attr\n}: ScrollLoadVideoProps) => {\n  const [shouldLoad, setShouldLoad] = useState(false)\n  const internalVideoRef = useRef<HTMLVideoElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const currentVideoRef = videoRef || internalVideoRef\n\n  // IntersectionObserver \u771F\u6B63\u7684\u61D2\u52A0\u8F7D + \u89C6\u7A97\u64AD\u653E\u63A7\u5236\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            // \u7B2C\u4E00\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u89C6\u9891\n            if (!shouldLoad) {\n              setShouldLoad(true)\n            }\n\n            // \u5982\u679C\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\u4E14\u89C6\u9891\u5DF2\u52A0\u8F7D\n            if (autoplay && currentVideoRef.current) {\n              const video = currentVideoRef.current\n              video.muted = true\n              video.currentTime = 0 // \u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u4ECE\u5934\u64AD\u653E\n              video.play().catch((error: unknown) => {\n                console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n              })\n            }\n          } else if (currentVideoRef.current) {\n            // \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u89C6\u9891\n            currentVideoRef.current.pause()\n          }\n        })\n      },\n      {\n        threshold: 0.1, // \u5F53 10% \u7684\u5143\u7D20\u8FDB\u5165\u89C6\u7A97\u65F6\u89E6\u53D1\n        rootMargin: '50px', // \u63D0\u524D 50px \u89E6\u53D1\n      }\n    )\n\n    const currentElement = containerRef.current\n    if (currentElement) {\n      observer.observe(currentElement)\n    }\n\n    return () => {\n      if (currentElement) {\n        observer.unobserve(currentElement)\n      }\n    }\n  }, [autoplay, currentVideoRef, shouldLoad])\n\n  return (\n    <div ref={containerRef} className={cn('relative size-full', className)}>\n      {/* \u89C6\u9891 */}\n      <video\n        ref={currentVideoRef}\n        src={shouldLoad ? src : undefined} // \u53EA\u6709\u5728\u9700\u8981\u65F6\u624D\u8BBE\u7F6E src\n        poster={poster}\n        className={cn('size-full object-cover', videoClassName)}\n        loop={loop}\n        muted={muted}\n        controls={controls}\n        playsInline={playsInline}\n        preload=\"metadata\" // \u5B8C\u5168\u4E0D\u9884\u52A0\u8F7D\n        {...attr}\n      />\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmFM,IAAAI,EAAA,6BAnFNC,EAAmD,iBACnDC,EAAmB,+BAgBnB,MAAMC,EAAkB,CAAC,CACvB,IAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,YAAAC,EAAc,GACd,SAAAC,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAS,EAAK,EAC5CC,KAAmB,UAAyB,IAAI,EAChDC,KAAe,UAAuB,IAAI,EAE1CC,EAAkBN,GAAYI,EAGpC,sBAAU,IAAM,CACd,MAAMG,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKP,GACHC,EAAc,EAAI,EAIhBR,GAAYW,EAAgB,QAAS,CACvC,MAAMI,EAAQJ,EAAgB,QAC9BI,EAAM,MAAQ,GACdA,EAAM,YAAc,EACpBA,EAAM,KAAK,EAAE,MAAOC,GAAmB,CACrC,QAAQ,KAAK,oDAAaA,CAAK,CACjC,CAAC,CACH,OACSL,EAAgB,SAEzBA,EAAgB,QAAQ,MAAM,CAElC,CAAC,CACH,EACA,CACE,UAAW,GACX,WAAY,MACd,CACF,EAEMM,EAAiBP,EAAa,QACpC,OAAIO,GACFL,EAAS,QAAQK,CAAc,EAG1B,IAAM,CACPA,GACFL,EAAS,UAAUK,CAAc,CAErC,CACF,EAAG,CAACjB,EAAUW,EAAiBJ,CAAU,CAAC,KAGxC,OAAC,OAAI,IAAKG,EAAc,aAAW,MAAG,qBAAsBZ,CAAS,EAEnE,mBAAC,SACC,IAAKa,EACL,IAAKJ,EAAaX,EAAM,OACxB,OAAQC,EACR,aAAW,MAAG,yBAA0BE,CAAc,EACtD,KAAMG,EACN,MAAOD,EACP,SAAUE,EACV,YAAaC,EACb,QAAQ,WACP,GAAGE,EACN,EACF,CAEJ,EAEA,IAAOhB,EAAQK",
+  "names": ["ScrollLoadVideo_exports", "__export", "ScrollLoadVideo_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "ScrollLoadVideo", "src", "poster", "className", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "shouldLoad", "setShouldLoad", "internalVideoRef", "containerRef", "currentVideoRef", "observer", "entries", "entry", "video", "error", "currentElement"]
 }

package/dist/cjs/stories/HeroBanner.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var c=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(e,a)=>{for(var o in a)n(e,o,{get:a[o],enumerable:!0})},p=(e,a,o,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of d(a))!f.call(e,r)&&r!==o&&n(e,r,{get:()=>a[r],enumerable:!(s=h(a,r))||s.enumerable});return e};var y=(e,a,o)=>(o=e!=null?c(k(e)):{},p(a||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),P=e=>p(n({},"__esModule",{value:!0}),e);var L={};b(L,{DarkTheme:()=>g,LightTheme:()=>u,MultiBanner:()=>B,WithPadImage:()=>S,WithPlayButton:()=>W,WithoutSecondaryButton:()=>w,default:()=>A});module.exports=P(L);var i=require("react/jsx-runtime"),N=require("react"),m=y(require("../biz-components/HeroBanner/HeroBanner.js"));const x={title:"Biz-Components/HeroBanner",component:m.default,parameters:{layout:"fullscreen",docs:{description:{component:`
+"use strict";var b=Object.create;var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,o)=>{for(var r in o)n(a,r,{get:o[r],enumerable:!0})},s=(a,o,r,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of h(o))!y.call(a,l)&&l!==r&&n(a,l,{get:()=>o[l],enumerable:!(d=u(o,l))||d.enumerable});return a};var x=(a,o,r)=>(r=a!=null?b(g(a)):{},s(o||!a||!a.__esModule?n(r,"default",{value:a,enumerable:!0}):r,a)),f=a=>s(n({},"__esModule",{value:!0}),a);var S={};v(S,{DarkTheme:()=>c,LightTheme:()=>p,MultiBanner:()=>P,ScrollableBackgroundVideo:()=>L,WithVideoModal:()=>B,WithYoutubeVideo:()=>T,WithoutSecondaryButton:()=>w,default:()=>N});module.exports=f(S);var e=require("react/jsx-runtime"),I=require("react"),m=x(require("../biz-components/HeroBanner/HeroBanner.js"));const k={title:"Biz-Components/HeroBanner",component:m.default,parameters:{layout:"fullscreen",docs:{description:{component:`
 HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
 ### \u7279\u70B9
@@ -7,5 +7,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
 - \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
 - \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5
 - \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868
-        `}}},tags:["autodocs"]};var A=x;const t="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",D="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",l="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",u={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}],endDate:"2025-11-15T03:32:00.000Z",endDate_tz:"America/Sao_Paulo",dateFormat:'{"day":"Day","hour":"Hours","minute":"Mins","second":"Secs"}'}}},g={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},mobileImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},B=()=>(0,i.jsxs)("div",{className:"flex flex-col",children:[(0,i.jsx)(m.default,{data:{...u.args.data,size:"sm"}}),(0,i.jsx)(m.default,{data:{...g.args.data,size:"sm"}})]}),w={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},S={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},W={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",playVideoButton:{text:"Shop Now"},videoConfig:{videoUrl:"https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4",setVideoUrl:e=>{console.log("setVideoUrl",e)}},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};
+        `}}},tags:["autodocs"]};var N=k;const t="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",U="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",i="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",p={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}],endDate:"2025-11-15T03:32:00.000Z",endDate_tz:"America/Sao_Paulo",dateFormat:'{"day":"Day","hour":"Hours","minute":"Mins","second":"Secs"}'}}},c={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:i,alt:"dark background",thumbnailURL:i,mimeType:"image/jpeg"},mobileImage:{url:i,alt:"dark background",thumbnailURL:i,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},P=()=>(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(m.default,{data:{...p.args.data,size:"sm"}}),(0,e.jsx)(m.default,{data:{...c.args.data,size:"sm"},className:"mt-[8px]"})]}),w={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},B={args:{data:{title:"Experience Anker Innovation",subtitle:"Watch our latest product demo and discover the future of charging technology",pcImage:{url:t,alt:"tech background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"tech background mobile",thumbnailURL:t,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now",link:"/shop"},secondaryButton:{text:"Learn More",link:"/learn-more",isShowPlayVideoButton:!0,playVideoButtonText:"Watch Demo",playIcon:!0,videoUrl:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"product demo video",thumbnailURL:t,mimeType:"video/mp4"}},caption:[{title:"Anker Prime 240W GaN Desktop Charger"},{title:"Anker PowerCore 27,650mAh Power Bank"},{title:"Anker Wireless Charging Station"}]}}},T={args:{data:{title:"Anker Prime Series",subtitle:"See our Prime series in action. Experience the power that drives innovation.",pcImage:{url:t,alt:"anker products",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:t,alt:"anker products pad",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"anker products mobile",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Buy Now",link:"/buy"},secondaryButton:{text:"Explore",link:"/explore",isShowPlayVideoButton:!0,playVideoButtonText:"Watch on YouTube",youtubeId:"dQw4w9WgXcQ"},caption:[{title:"Prime 240W Desktop Charger"},{title:"Prime 27,650mAh Power Bank"},{title:"Prime 100W Wireless Charger"}]}}},L=()=>(0,e.jsxs)("div",{className:"min-h-[500vh]",children:[(0,e.jsx)(m.default,{data:{theme:"dark",title:"Powered by Innovation",subtitle:"Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.",pcImage:{url:t,alt:"fallback background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"fallback background mobile",thumbnailURL:t,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video desktop",thumbnailURL:t,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video tablet",thumbnailURL:t,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"background video mobile",thumbnailURL:t,mimeType:"video/mp4"},isShowVideo:!0,primaryButton:{text:"First Video",link:"/first"},secondaryButton:{text:"Learn More",link:"/learn"},caption:[{title:"IntersectionObserver Controlled"},{title:"Auto Play on Viewport Entry"},{title:"Restart from Beginning"}]}}),(0,e.jsx)("div",{className:"bg-gradient-to-b from-gray-900 to-black py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto max-w-4xl px-4",children:[(0,e.jsx)("h2",{className:"mb-8 text-center text-4xl font-bold",children:"IntersectionObserver \u89C6\u9891\u63A7\u5236"}),(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u667A\u80FD\u89C6\u9891\u64AD\u653E"}),(0,e.jsx)("p",{className:"leading-relaxed text-gray-300",children:"\u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528 IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002"})]}),(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),(0,e.jsx)("p",{className:"leading-relaxed text-gray-300",children:"\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002"})]})]})]})}),(0,e.jsx)(m.default,{data:{title:"Second Video Banner",subtitle:"This is the second video to test multiple banners with IntersectionObserver.",pcImage:{url:i,alt:"second banner background",thumbnailURL:i,mimeType:"image/jpeg"},mobileImage:{url:i,alt:"second banner mobile",thumbnailURL:i,mimeType:"image/jpeg"},pcVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4",alt:"second video desktop",thumbnailURL:i,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"second video tablet",thumbnailURL:i,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"second video mobile",thumbnailURL:i,mimeType:"video/mp4"},isShowVideo:!0,primaryButton:{text:"Second Video",link:"/second"},secondaryButton:{text:"Explore More",link:"/explore"},caption:[{title:"Independent Video Control"},{title:"Pause When Out of View"},{title:"Resource Efficient"}]}}),(0,e.jsx)("div",{className:"bg-gradient-to-b from-black to-gray-900 py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto max-w-4xl px-4",children:[(0,e.jsx)("h2",{className:"mb-8 text-center text-4xl font-bold",children:"\u591A\u89C6\u9891\u7BA1\u7406"}),(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u72EC\u7ACB\u63A7\u5236"}),(0,e.jsx)("p",{className:"leading-relaxed text-gray-300",children:"\u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002 \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002"})]}),(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u7528\u6237\u4F53\u9A8C"}),(0,e.jsx)("p",{className:"leading-relaxed text-gray-300",children:"\u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002 \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002"})]})]})]})}),(0,e.jsx)(m.default,{data:{title:"Third Video Experience",subtitle:"Final banner to demonstrate seamless video management across multiple sections.",pcImage:{url:t,alt:"third banner background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"third banner mobile",thumbnailURL:t,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video desktop",thumbnailURL:t,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video tablet",thumbnailURL:t,mimeType:"video/mp4"},mobileVideo:{url:"https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4",alt:"third video mobile",thumbnailURL:t,mimeType:"video/mp4"},theme:"dark",isShowVideo:!0,primaryButton:{text:"Third Video",link:"/third"},secondaryButton:{text:"Complete Test",link:"/complete"},caption:[{title:"Seamless Performance"},{title:"Multiple Video Management"},{title:"Optimized for All Devices"}]}}),(0,e.jsx)("div",{className:"bg-black py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto px-4 text-center",children:[(0,e.jsx)("h2",{className:"mb-4 text-3xl font-bold",children:"IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210"}),(0,e.jsx)("p",{className:"mb-8 text-gray-400",children:"\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C"}),(0,e.jsxs)("div",{className:"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3",children:[(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u667A\u80FD\u64AD\u653E"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C"})]}),(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u4ECE\u5934\u64AD\u653E"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB"})]}),(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528"})]})]})]})})]});
 //# sourceMappingURL=HeroBanner.stories.js.map

package/dist/cjs/stories/HeroBanner.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/HeroBanner.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n  title: 'Biz-Components/HeroBanner',\n  component: HeroBanner,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n  'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      title: 'Anker Laptop Power',\n      subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      blockLink: '/this-is-block-link',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/this-is-shop-now-link',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/this-is-learn-more-link',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n      endDate: '2025-11-15T03:32:00.000Z',\n      endDate_tz: 'America/Sao_Paulo',\n      dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      title: 'Power Your Life',\n      subtitle:\n        'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n      pcImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const MultiBanner = () => {\n  return (\n    <div className=\"flex flex-col\">\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n    </div>\n  )\n}\n\nexport const WithoutSecondaryButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithPadImage: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithPlayButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      playVideoButton: {\n        text: 'Shop Now',\n      },\n      videoConfig: {\n        videoUrl: 'https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4',\n        setVideoUrl: (v: string) => {\n          console.log('setVideoUrl', v)\n        },\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n"],
-  "mappings": "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",
-  "names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "WithPadImage", "WithPlayButton", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "padBackground", "darkBackground", "v"]
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n  title: 'Biz-Components/HeroBanner',\n  component: HeroBanner,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n  'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      title: 'Anker Laptop Power',\n      subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      blockLink: '/this-is-block-link',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/this-is-shop-now-link',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/this-is-learn-more-link',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n      endDate: '2025-11-15T03:32:00.000Z',\n      endDate_tz: 'America/Sao_Paulo',\n      dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      title: 'Power Your Life',\n      subtitle:\n        'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n      pcImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const MultiBanner = () => {\n  return (\n    <div className=\"flex flex-col\">\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} className=\"mt-[8px]\" />\n    </div>\n  )\n}\n\nexport const WithoutSecondaryButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithVideoModal: Story = {\n  args: {\n    data: {\n      title: 'Experience Anker Innovation',\n      subtitle: 'Watch our latest product demo and discover the future of charging technology',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'tech background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'tech background mobile',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/shop',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/learn-more',\n        isShowPlayVideoButton: true,\n        playVideoButtonText: 'Watch Demo',\n        playIcon: true,\n        videoUrl: {\n          url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n          alt: 'product demo video',\n          thumbnailURL: defaultBackground,\n          mimeType: 'video/mp4',\n        },\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger' },\n        { title: 'Anker PowerCore 27,650mAh Power Bank' },\n        { title: 'Anker Wireless Charging Station' },\n      ],\n    },\n  },\n}\n\nexport const WithYoutubeVideo: Story = {\n  args: {\n    data: {\n      title: 'Anker Prime Series',\n      subtitle: 'See our Prime series in action. Experience the power that drives innovation.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'anker products',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: defaultBackground,\n        alt: 'anker products pad',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'anker products mobile',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Buy Now',\n        link: '/buy',\n      },\n      secondaryButton: {\n        text: 'Explore',\n        link: '/explore',\n        isShowPlayVideoButton: true,\n        playVideoButtonText: 'Watch on YouTube',\n        youtubeId: 'dQw4w9WgXcQ', // Example YouTube ID\n      },\n      caption: [\n        { title: 'Prime 240W Desktop Charger' },\n        { title: 'Prime 27,650mAh Power Bank' },\n        { title: 'Prime 100W Wireless Charger' },\n      ],\n    },\n  },\n}\n\nexport const ScrollableBackgroundVideo = () => {\n  return (\n    <div className=\"min-h-[500vh]\">\n      {/* \u7B2C\u4E00\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          theme: 'dark',\n          title: 'Powered by Innovation',\n          subtitle:\n            'Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.',\n          pcImage: {\n            url: defaultBackground,\n            alt: 'fallback background',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: defaultBackground,\n            alt: 'fallback background mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'background video desktop',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'background video tablet',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n            alt: 'background video mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          isShowVideo: true,\n          primaryButton: {\n            text: 'First Video',\n            link: '/first',\n          },\n          secondaryButton: {\n            text: 'Learn More',\n            link: '/learn',\n          },\n          caption: [\n            { title: 'IntersectionObserver Controlled' },\n            { title: 'Auto Play on Viewport Entry' },\n            { title: 'Restart from Beginning' },\n          ],\n        }}\n      />\n\n      {/* \u4E2D\u95F4\u95F4\u9694\u5185\u5BB9 */}\n      <div className=\"bg-gradient-to-b from-gray-900 to-black py-20 text-white\">\n        <div className=\"container mx-auto max-w-4xl px-4\">\n          <h2 className=\"mb-8 text-center text-4xl font-bold\">IntersectionObserver \u89C6\u9891\u63A7\u5236</h2>\n          <div className=\"space-y-8\">\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u667A\u80FD\u89C6\u9891\u64AD\u653E</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528\n                IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002\n              </p>\n            </div>\n\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u6027\u80FD\u4F18\u5316</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C\n                \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* \u7B2C\u4E8C\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          title: 'Second Video Banner',\n          subtitle: 'This is the second video to test multiple banners with IntersectionObserver.',\n          pcImage: {\n            url: darkBackground,\n            alt: 'second banner background',\n            thumbnailURL: darkBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: darkBackground,\n            alt: 'second banner mobile',\n            thumbnailURL: darkBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',\n            alt: 'second video desktop',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'second video tablet',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n            alt: 'second video mobile',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          isShowVideo: true,\n          primaryButton: {\n            text: 'Second Video',\n            link: '/second',\n          },\n          secondaryButton: {\n            text: 'Explore More',\n            link: '/explore',\n          },\n          caption: [\n            { title: 'Independent Video Control' },\n            { title: 'Pause When Out of View' },\n            { title: 'Resource Efficient' },\n          ],\n        }}\n      />\n\n      {/* \u66F4\u591A\u95F4\u9694\u5185\u5BB9 */}\n      <div className=\"bg-gradient-to-b from-black to-gray-900 py-20 text-white\">\n        <div className=\"container mx-auto max-w-4xl px-4\">\n          <h2 className=\"mb-8 text-center text-4xl font-bold\">\u591A\u89C6\u9891\u7BA1\u7406</h2>\n          <div className=\"space-y-8\">\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u72EC\u7ACB\u63A7\u5236</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002\n                \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002\n              </p>\n            </div>\n\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u7528\u6237\u4F53\u9A8C</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002\n                \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* \u7B2C\u4E09\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          title: 'Third Video Experience',\n          subtitle: 'Final banner to demonstrate seamless video management across multiple sections.',\n          pcImage: {\n            url: defaultBackground,\n            alt: 'third banner background',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: defaultBackground,\n            alt: 'third banner mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n            alt: 'third video desktop',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n            alt: 'third video tablet',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4',\n            alt: 'third video mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          theme: 'dark',\n          isShowVideo: true,\n          primaryButton: {\n            text: 'Third Video',\n            link: '/third',\n          },\n          secondaryButton: {\n            text: 'Complete Test',\n            link: '/complete',\n          },\n          caption: [\n            { title: 'Seamless Performance' },\n            { title: 'Multiple Video Management' },\n            { title: 'Optimized for All Devices' },\n          ],\n        }}\n      />\n\n      {/* \u5E95\u90E8\u603B\u7ED3\u5185\u5BB9 */}\n      <div className=\"bg-black py-20 text-white\">\n        <div className=\"container mx-auto px-4 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold\">IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210</h2>\n          <p className=\"mb-8 text-gray-400\">\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C</p>\n          <div className=\"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3\">\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u667A\u80FD\u64AD\u653E</h4>\n              <p className=\"text-sm text-gray-400\">\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C</p>\n            </div>\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u4ECE\u5934\u64AD\u653E</h4>\n              <p className=\"text-sm text-gray-400\">\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB</p>\n            </div>\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u6027\u80FD\u4F18\u5316</h4>\n              <p className=\"text-sm text-gray-400\">\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "ScrollableBackgroundVideo", "WithVideoModal", "WithYoutubeVideo", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "padBackground", "darkBackground"]
 }

package/dist/cjs/stories/container.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var n=(t,a)=>{for(var r in a)p(t,r,{get:a[r],enumerable:!0})},c=(t,a,r,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of i(a))!m.call(t,s)&&s!==r&&p(t,s,{get:()=>a[s],enumerable:!(d=l(a,s))||d.enumerable});return t};var g=t=>c(p({},"__esModule",{value:!0}),t);var v={};n(v,{Basic:()=>N,NestedContent:()=>h,ResponsivePadding:()=>y,WithPaddingAndBackground:()=>u,default:()=>b});module.exports=g(v);var e=require("react/jsx-runtime"),C=require("react"),o=require("../components/index.js"),S=require("../helpers/utils.js");const x={title:"Layout/Container",component:o.Container,parameters:{layout:"fullscreen",docs:{description:{component:`
+"use strict";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var n=(t,a)=>{for(var r in a)p(t,r,{get:a[r],enumerable:!0})},c=(t,a,r,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of i(a))!m.call(t,s)&&s!==r&&p(t,s,{get:()=>a[s],enumerable:!(d=l(a,s))||d.enumerable});return t};var g=t=>c(p({},"__esModule",{value:!0}),t);var v={};n(v,{Basic:()=>N,NestedContent:()=>h,ResponsivePadding:()=>y,WithPaddingAndBackground:()=>u,default:()=>b});module.exports=g(v);var e=require("react/jsx-runtime"),C=require("react"),o=require("../components/index.js");const x={title:"Layout/Container",component:o.Container,parameters:{layout:"fullscreen",docs:{description:{component:`
 Container \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002
 ### \u5B9E\u73B0\u7EC6\u8282

package/dist/cjs/stories/container.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/container.stories.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Container } from '../components/index.js'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { cn } from '../helpers/utils.js'\n\nconst meta = {\n  title: 'Layout/Container',\n  component: Container,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nContainer \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- \u57FA\u4E8E Tailwind CSS \u5B9E\u73B0\n- \u9ED8\u8BA4\u6700\u5927\u5BBD\u5EA6\u4E3A 1664px\n- \u54CD\u5E94\u5F0F\u8FB9\u8DDD\u8BBE\u8BA1\uFF1A\n  - \u9ED8\u8BA4: \u5DE6\u53F3\u8FB9\u8DDD 16px (mx-4)\n  - tablet: \u5DE6\u53F3\u8FB9\u8DDD 32px (mx-8)\n  - laptop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - desktop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - lg-desktop: \u5DE6\u53F3\u8FB9\u8DDD 128px (mx-32)\n\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Container>\n\nexport default meta\n\ntype Story = StoryObj<typeof Container>\n\n// \u57FA\u7840\u793A\u4F8B\nexport const Basic = () => (\n  <Container className=\"p-4\">\n    <div className=\"rounded-lg bg-blue-100 p-4 text-center\">\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6</div>\n  </Container>\n)\n\n// \u5E26\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\nexport const WithPaddingAndBackground = () => (\n  <Container className=\"bg-gray-50 p-4\">\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 1</h3>\n        <p className=\"text-gray-600\">\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B</p>\n      </div>\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 2</h3>\n        <p className=\"text-gray-600\">\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F</p>\n      </div>\n    </div>\n  </Container>\n)\n\n// \u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD\nexport const ResponsivePadding = () => (\n  <Container className=\"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4\">\n    <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n      <h3 className=\"text-lg font-medium\">\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD</h3>\n      <p className=\"text-gray-600\">\n        \u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A\n        <br />\n        \u9ED8\u8BA4: px-4 (16px)\n        <br />\n        tablet: px-6 (24px)\n        <br />\n        laptop: px-8 (32px)\n      </p>\n    </div>\n  </Container>\n)\n\n// \u5D4C\u5957\u5185\u5BB9\u793A\u4F8B\nexport const NestedContent = () => (\n  <Container className=\"p-4\">\n    <header className=\"rounded-t-lg bg-gray-800 p-4 text-white\">\n      <h2 className=\"text-xl\">\u9875\u9762\u6807\u9898</h2>\n    </header>\n    <main className=\"border-x border-gray-200 bg-white p-4\">\n      <p className=\"mb-4 text-gray-600\">\u4E3B\u8981\u5185\u5BB9\u533A\u57DF</p>\n      <div className=\"laptop:grid-cols-2 grid grid-cols-1 gap-4\">\n        <div className=\"rounded bg-blue-50 p-4\">\u5185\u5BB9\u5757 1</div>\n        <div className=\"rounded bg-purple-50 p-4\">\u5185\u5BB9\u5757 2</div>\n      </div>\n    </main>\n    <footer className=\"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4\">\n      <p className=\"text-sm text-gray-500\">\u9875\u811A\u5185\u5BB9</p>\n    </footer>\n  </Container>\n)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,6BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAuCI,IAAAQ,EAAA,6BAvCJC,EAAkB,iBAClBC,EAA0B,kCAE1BC,EAAmB,+BAEnB,MAAMC,EAAO,CACX,MAAO,mBACP,UAAW,YACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAcb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQM,EAKR,MAAMV,EAAQ,OACnB,OAAC,aAAU,UAAU,MACnB,mBAAC,OAAI,UAAU,yCAAyC,mGAAiB,EAC3E,EAIWG,EAA2B,OACtC,OAAC,aAAU,UAAU,iBACnB,oBAAC,OAAI,UAAU,YACb,qBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,gGAAc,GAC7C,KACA,QAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,kEAAS,GACxC,GACF,EACF,EAIWD,EAAoB,OAC/B,OAAC,aAAU,UAAU,yEACnB,oBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,gDAAM,KAC1C,QAAC,KAAE,UAAU,gBAAgB,4HAE3B,OAAC,OAAG,EAAE,+BAEN,OAAC,OAAG,EAAE,yBAEN,OAAC,OAAG,EAAE,uBAER,GACF,EACF,EAIWD,EAAgB,OAC3B,QAAC,aAAU,UAAU,MACnB,oBAAC,UAAO,UAAU,0CAChB,mBAAC,MAAG,UAAU,UAAU,oCAAI,EAC9B,KACA,QAAC,QAAK,UAAU,wCACd,oBAAC,KAAE,UAAU,qBAAqB,gDAAM,KACxC,QAAC,OAAI,UAAU,4CACb,oBAAC,OAAI,UAAU,yBAAyB,gCAAK,KAC7C,OAAC,OAAI,UAAU,2BAA2B,gCAAK,GACjD,GACF,KACA,OAAC,UAAO,UAAU,iEAChB,mBAAC,KAAE,UAAU,wBAAwB,oCAAI,EAC3C,GACF",
-  "names": ["container_stories_exports", "__export", "Basic", "NestedContent", "ResponsivePadding", "WithPaddingAndBackground", "container_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "meta"]
+  "sourcesContent": ["import React from 'react'\nimport { Container } from '../components/index.js'\nimport type { Meta, StoryObj } from '@storybook/react'\n\nconst meta = {\n  title: 'Layout/Container',\n  component: Container,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nContainer \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- \u57FA\u4E8E Tailwind CSS \u5B9E\u73B0\n- \u9ED8\u8BA4\u6700\u5927\u5BBD\u5EA6\u4E3A 1664px\n- \u54CD\u5E94\u5F0F\u8FB9\u8DDD\u8BBE\u8BA1\uFF1A\n  - \u9ED8\u8BA4: \u5DE6\u53F3\u8FB9\u8DDD 16px (mx-4)\n  - tablet: \u5DE6\u53F3\u8FB9\u8DDD 32px (mx-8)\n  - laptop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - desktop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - lg-desktop: \u5DE6\u53F3\u8FB9\u8DDD 128px (mx-32)\n\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Container>\n\nexport default meta\n\ntype Story = StoryObj<typeof Container>\n\n// \u57FA\u7840\u793A\u4F8B\nexport const Basic = () => (\n  <Container className=\"p-4\">\n    <div className=\"rounded-lg bg-blue-100 p-4 text-center\">\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6</div>\n  </Container>\n)\n\n// \u5E26\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\nexport const WithPaddingAndBackground = () => (\n  <Container className=\"bg-gray-50 p-4\">\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 1</h3>\n        <p className=\"text-gray-600\">\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B</p>\n      </div>\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 2</h3>\n        <p className=\"text-gray-600\">\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F</p>\n      </div>\n    </div>\n  </Container>\n)\n\n// \u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD\nexport const ResponsivePadding = () => (\n  <Container className=\"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4\">\n    <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n      <h3 className=\"text-lg font-medium\">\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD</h3>\n      <p className=\"text-gray-600\">\n        \u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A\n        <br />\n        \u9ED8\u8BA4: px-4 (16px)\n        <br />\n        tablet: px-6 (24px)\n        <br />\n        laptop: px-8 (32px)\n      </p>\n    </div>\n  </Container>\n)\n\n// \u5D4C\u5957\u5185\u5BB9\u793A\u4F8B\nexport const NestedContent = () => (\n  <Container className=\"p-4\">\n    <header className=\"rounded-t-lg bg-gray-800 p-4 text-white\">\n      <h2 className=\"text-xl\">\u9875\u9762\u6807\u9898</h2>\n    </header>\n    <main className=\"border-x border-gray-200 bg-white p-4\">\n      <p className=\"mb-4 text-gray-600\">\u4E3B\u8981\u5185\u5BB9\u533A\u57DF</p>\n      <div className=\"laptop:grid-cols-2 grid grid-cols-1 gap-4\">\n        <div className=\"rounded bg-blue-50 p-4\">\u5185\u5BB9\u5757 1</div>\n        <div className=\"rounded bg-purple-50 p-4\">\u5185\u5BB9\u5757 2</div>\n      </div>\n    </main>\n    <footer className=\"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4\">\n      <p className=\"text-sm text-gray-500\">\u9875\u811A\u5185\u5BB9</p>\n    </footer>\n  </Container>\n)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,6BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAsCI,IAAAQ,EAAA,6BAtCJC,EAAkB,iBAClBC,EAA0B,kCAG1B,MAAMC,EAAO,CACX,MAAO,mBACP,UAAW,YACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAcb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAKR,MAAMT,EAAQ,OACnB,OAAC,aAAU,UAAU,MACnB,mBAAC,OAAI,UAAU,yCAAyC,mGAAiB,EAC3E,EAIWG,EAA2B,OACtC,OAAC,aAAU,UAAU,iBACnB,oBAAC,OAAI,UAAU,YACb,qBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,gGAAc,GAC7C,KACA,QAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,kEAAS,GACxC,GACF,EACF,EAIWD,EAAoB,OAC/B,OAAC,aAAU,UAAU,yEACnB,oBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,gDAAM,KAC1C,QAAC,KAAE,UAAU,gBAAgB,4HAE3B,OAAC,OAAG,EAAE,+BAEN,OAAC,OAAG,EAAE,yBAEN,OAAC,OAAG,EAAE,uBAER,GACF,EACF,EAIWD,EAAgB,OAC3B,QAAC,aAAU,UAAU,MACnB,oBAAC,UAAO,UAAU,0CAChB,mBAAC,MAAG,UAAU,UAAU,oCAAI,EAC9B,KACA,QAAC,QAAK,UAAU,wCACd,oBAAC,KAAE,UAAU,qBAAqB,gDAAM,KACxC,QAAC,OAAI,UAAU,4CACb,oBAAC,OAAI,UAAU,yBAAyB,gCAAK,KAC7C,OAAC,OAAI,UAAU,2BAA2B,gCAAK,GACjD,GACF,KACA,OAAC,UAAO,UAAU,iEAChB,mBAAC,KAAE,UAAU,wBAAwB,oCAAI,EAC3C,GACF",
+  "names": ["container_stories_exports", "__export", "Basic", "NestedContent", "ResponsivePadding", "WithPaddingAndBackground", "container_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "meta"]
 }

package/dist/cjs/stories/faq.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/faq.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport type { ComponentType } from 'react'\nimport Faq from '../biz-components/Faq/Faq.js'\nimport type { FaqProps } from '../biz-components/Faq/types.js'\n\nconst meta = {\n  title: 'Biz Components/Faq',\n  component: Faq,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: 'Faq \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u5E38\u89C1\u95EE\u9898',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Faq>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst listData: FaqProps['data']['productData'] = [\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image1',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title:\n      'F1: Was muss ich tun, wenn ich ein Solarladeger\u00E4t zum Aufladen der tragbaren Anker 767 Powerstation verwende?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image2',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F2: Wie sollte ich die Powerstation lagern und warten?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image3',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F3: Was muss ich bei der Nutzung der Anker App beachten?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image4',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F4: Kann die Powerstation mein Elektroauto aufladen?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image5',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title:\n      'F5: Kann ich die tragbare Anker 767 Powerstation gleichzeitig mit Wechselstrom und Gleichstrom aufgeladen werden?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      productData: listData,\n    },\n  },\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAEA,IAAAK,EAAgB,2CAGhB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,kEACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIf,MAAME,EAA4C,CAChD,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,mHACF,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,yDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,2DACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,uDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,oHACF,KAAM,2PACR,CACF,EAEaN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,YAAaM,CACf,CACF,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Faq from '../biz-components/Faq/Faq.js'\nimport type { FaqProps } from '../biz-components/Faq/types.js'\n\nconst meta = {\n  title: 'Biz Components/Faq',\n  component: Faq,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: 'Faq \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u5E38\u89C1\u95EE\u9898',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Faq>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst listData: FaqProps['data']['productData'] = [\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image1',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title:\n      'F1: Was muss ich tun, wenn ich ein Solarladeger\u00E4t zum Aufladen der tragbaren Anker 767 Powerstation verwende?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image2',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F2: Wie sollte ich die Powerstation lagern und warten?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image3',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F3: Was muss ich bei der Nutzung der Anker App beachten?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image4',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F4: Kann die Powerstation mein Elektroauto aufladen?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image5',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title:\n      'F5: Kann ich die tragbare Anker 767 Powerstation gleichzeitig mit Wechselstrom und Gleichstrom aufgeladen werden?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      productData: listData,\n    },\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GACA,IAAAK,EAAgB,2CAGhB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,kEACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIf,MAAME,EAA4C,CAChD,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,mHACF,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,yDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,2DACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,uDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,oHACF,KAAM,2PACR,CACF,EAEaN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,YAAaM,CACf,CACF,CACF",
   "names": ["faq_stories_exports", "__export", "Default", "faq_stories_default", "__toCommonJS", "import_Faq", "meta", "Faq", "listData"]
 }

package/dist/cjs/stories/graphic.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},n=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of d(e))!h.call(t,s)&&s!==o&&r(t,s,{get:()=>e[s],enumerable:!(a=m(e,s))||a.enumerable});return t};var y=(t,e,o)=>(o=t!=null?p(f(t)):{},n(e||!t||!t.__esModule?r(o,"default",{value:t,enumerable:!0}):o,t)),u=t=>n(r({},"__esModule",{value:!0}),t);var F={};g(F,{Default:()=>b,Round:()=>w,default:()=>v});module.exports=u(F);var i=require("react/jsx-runtime"),l=y(require("../biz-components/Graphic/index.js")),I=require("gsap"),S=require("@gsap/react"),B=require("gsap/dist/ScrollTrigger"),T=require("gsap/dist/SplitText");const x={title:"Biz-Components/Graphic",component:l.default,parameters:{layout:"fullscreen",docs:{description:{component:"\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/"}}},decorators:[t=>(0,i.jsx)("div",{style:{paddingTop:"2em"},children:(0,i.jsx)(t,{})})],tags:["autodocs"]};var v=x;const c=[{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",buttonText:"learn More",theme:"light",extension:{text:"Al Detection 1",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 2",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",theme:"light",buttonText:"learn More",extension:{text:"Al Detection 3",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 4",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}}],b={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c}}},w={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c,itemShape:"round"}}};
+"use strict";var p=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},a=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!h.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(n=d(e,o))||n.enumerable});return t};var g=(t,e,s)=>(s=t!=null?p(f(t)):{},a(e||!t||!t.__esModule?r(s,"default",{value:t,enumerable:!0}):s,t)),u=t=>a(r({},"__esModule",{value:!0}),t);var F={};y(F,{Default:()=>b,Round:()=>w,default:()=>v});module.exports=u(F);var i=require("react/jsx-runtime"),l=g(require("../biz-components/Graphic/index.js"));const x={title:"Biz-Components/Graphic",component:l.default,parameters:{layout:"fullscreen",docs:{description:{component:"\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/"}}},decorators:[t=>(0,i.jsx)("div",{style:{paddingTop:"2em"},children:(0,i.jsx)(t,{})})],tags:["autodocs"]};var v=x;const c=[{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",buttonText:"learn More",theme:"light",extension:{text:"Al Detection 1",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 2",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",theme:"light",buttonText:"learn More",extension:{text:"Al Detection 3",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 4",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}}],b={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c}}},w={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c,itemShape:"round"}}};
 //# sourceMappingURL=graphic.stories.js.map