@undp/design-system-react/dist/viz-carousel-C6nv-LG4.cjs

React based design system for UNDP

const e=require("./utils-Dd9-5CFr.cjs"),t=require("./dist-BZMXZCSu.cjs"),n=require("./createLucideIcon-FKMTNncQ.cjs"),r=require("./chevron-left-5647beWo.cjs"),i=require("./chevron-right-Be2hAWX1.cjs"),a=require("./Typography.cjs");let o=require("react"),s=require("react/jsx-runtime");var c=n.t(`pause`,[[`rect`,{x:`14`,y:`3`,width:`5`,height:`18`,rx:`1`,key:`kaeet6`}],[`rect`,{x:`5`,y:`3`,width:`5`,height:`18`,rx:`1`,key:`1wsw3u`}]]),l=n.t(`play`,[[`path`,{d:`M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z`,key:`10ikf1`}]]),u=t.t(`flex box-border justify-between`,{variants:{vizWidth:{xs:`w-3/4 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4`,sm:`w-2/3 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4`,base:`w-1/2 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4`,lg:`w-1/3 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4`,xl:`w-1/4 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4`,full:`w-full shrink-0 items-start gap-x-8 gap-y-4 mb-4 flex-wrap @2xl:flex-nowrap`}},defaultVariants:{vizWidth:`base`}}),d=t.t(`flex box-border grow shrink-0`,{variants:{vizWidth:{xs:`w-1/4 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4`,sm:`w-1/3 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4`,base:`w-1/2 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4`,lg:`w-2/3 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4`,xl:`w-3/4 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4`,full:`w-full`}},defaultVariants:{vizWidth:`base`}}),f=(0,o.forwardRef)(({className:t,vizWidth:n,slides:f,styles:p,classNames:m,slideNo:h=!0,autoScroll:g=!1,..._},v)=>{let y=(0,o.useRef)(null),b=(0,o.useRef)([]),x=(0,o.useRef)(null),[S,C]=(0,o.useState)(!1),[w,T]=(0,o.useState)(!1),[E,D]=(0,o.useState)(1),[O,k]=(0,o.useState)(0);return(0,o.useEffect)(()=>{let e=new IntersectionObserver(e=>{let t=e.filter(e=>e.isIntersecting).sort((e,t)=>t.intersectionRatio-e.intersectionRatio);if(t.length>0){let e=b.current.findIndex(e=>e===t[0].target);e!==-1&&D(e+1)}},{root:y.current,threshold:1});return b.current.forEach(t=>{t&&e.observe(t)}),()=>{b.current.forEach(t=>{t&&e.unobserve(t)})}},[]),(0,o.useEffect)(()=>{if(!g)return;let e=typeof g==`number`?g:5e3,t=O;return x.current&&clearInterval(x.current),!S&&!w&&(x.current=setInterval(()=>{if(t+=50/e*100,t>=100){if(t=0,k(0),!y.current)return;let e=y.current.closest(`[dir]`)?.getAttribute(`dir`)===`rtl`,n=e?-280:280;E===f.length?(y.current.scrollTo({left:e?y.current.scrollWidth:0,behavior:`smooth`}),D(1)):(y.current.scrollBy({left:n,behavior:`smooth`}),D(e=>e+1))}else k(t)},50)),()=>{x.current&&clearInterval(x.current)}},[g,w,S,E,f.length,O]),(0,s.jsxs)(`div`,{ref:v,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),className:`@container w-full`,children:[g?(0,s.jsx)(`div`,{className:e.t(`mb-4 h-4 w-full overflow-hidden rounded-full bg-surface-sm`,m?.progressBarBg),style:p?.progressBarBg,children:(0,s.jsx)(`div`,{className:e.t(`h-full bg-accent-yellow transition-all duration-100 ease-linear`,m?.progressBar),style:{...p?.progressBar,width:`${O}%`}})}):null,(0,s.jsx)(`div`,{ref:y,className:e.t(`undp-scrollbar mr-auto mb-0 ml-auto flex w-full snap-x snap-mandatory scroll-p-0 scroll-pl-0 gap-6 overflow-x-auto pb-4`,t),..._,children:f.map((t,o)=>(0,s.jsxs)(`div`,{ref:e=>{b.current[o]=e},className:`box-border flex w-full shrink-0 snap-start flex-wrap ${n===`full`?`flex-col items-start`:`flex-row items-stretch`}`,children:[(0,s.jsxs)(`div`,{style:p?.content,className:e.t(u({vizWidth:n}),m?.content),children:[(0,s.jsx)(`div`,{className:`min-w-60 grow sm:grow-0`,children:t.content}),(0,s.jsxs)(`div`,{className:`flex ${h?`gap-2`:`gap-3`} shrink-0 items-center`,children:[(0,s.jsx)(`button`,{style:p?.arrowButton,type:`button`,className:e.t(`flex @3xl:h-12 h-9 @3xl:w-12 w-9 items-center justify-center rounded-full border-0 bg-foreground pr-1 rtl:rotate-180`,E===1?`cursor-not-allowed opacity-disabled`:`cursor-pointer hover:bg-forground-soft`,m?.arrowButton),onClick:()=>{if(y.current&&E!==1){let e=y.current.closest(`[dir]`)?.getAttribute(`dir`)===`rtl`?280:-280;D(E-1),y.current.scrollBy(e,0)}},children:(0,s.jsx)(r.t,{style:p?.arrows,className:e.t(`h-6 w-6 text-content-reverse`,m?.arrows)})}),h?(0,s.jsxs)(a.P,{marginBottom:`none`,className:`shrink-0 px-2!`,children:[E,` / `,f.length]}):null,(0,s.jsx)(`button`,{className:e.t(`flex @3xl:h-12 h-9 @3xl:w-12 w-9 items-center justify-center rounded-full border-0 bg-foreground pl-1 rtl:rotate-180`,E===f.length?`cursor-not-allowed opacity-disabled`:`cursor-pointer hover:bg-forground-soft`,m?.arrowButton),type:`button`,style:p?.arrowButton,onClick:()=>{if(y.current&&E!==f.length){let e=y.current.closest(`[dir]`)?.getAttribute(`dir`)===`rtl`?-280:280;D(E+1),y.current.scrollBy(e,0)}},children:(0,s.jsx)(i.t,{style:p?.arrows,className:e.t(`h-6 w-6 text-content-reverse`,m?.arrows)})}),g?(0,s.jsx)(`button`,{type:`button`,style:p?.playPauseButton,className:e.t(`flex @3xl:h-12 h-9 @3xl:w-12 w-9 cursor-pointer items-center justify-center rounded-full border-2 border-stroke-2xl bg-transparent hover:bg-surface-hover`,m?.playPauseButton),onClick:()=>{C(!S)},children:S?(0,s.jsx)(l,{style:p?.playPauseIcon,strokeWidth:2,className:e.t(`h-6 w-6 text-content-primary`,m?.playPauseIcon)}):(0,s.jsx)(c,{strokeWidth:2,style:p?.playPauseIcon,className:e.t(`h-6 w-6 text-content-primary`,m?.playPauseIcon)})}):null]})]}),(0,s.jsx)(`div`,{style:p?.viz,className:e.t(d({vizWidth:n}),m?.viz),children:t.viz})]},`slide_no_${o}`))})]})});f.displayName=`VizCarousel`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return f}});
//# sourceMappingURL=viz-carousel-C6nv-LG4.cjs.map