@undp/design-system-react/dist/Carousel.cjs

React based design system for UNDP

Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./rolldown-runtime-mLOUI7ql.cjs"),t=require("./utils-Dd9-5CFr.cjs"),n=require("./dist-BZMXZCSu.cjs");let r=require("react");r=e.r(r,1);let i=require("react/jsx-runtime");var a=r.default.forwardRef(({className:e,children:n,...a},o)=>{let s=r.default.useRef(null),[c,l]=r.default.useState(`url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-right.svg)`);return(0,i.jsx)(`div`,{ref:s,className:t.t(`undp-scrollbar mr-auto mb-0 ml-auto flex w-full snap-x snap-mandatory scroll-p-0 scroll-pl-0 overflow-x-auto pb-4`,e),...a,onKeyDown:e=>{s.current&&(e.key===`ArrowRight`&&s.current.scrollBy(280,0),e.key===`ArrowLeft`&&s.current.scrollBy(-280,0))},onClick:e=>{s.current&&(e.clientX>window.innerWidth/2?s.current.scrollBy(280,0):s.current.scrollBy(-280,0))},onMouseMove:e=>{e.clientX>window.innerWidth/2?l(`url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-right.svg)`):l(`url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-left.svg)`)},children:(0,i.jsx)(`div`,{ref:o,className:`flex w-full items-stretch gap-4`,style:{cursor:`${c}, auto`},children:n})})});a.displayName=`Carousel`;var o=n.t(`shrink-0 min-w-[320px] snap-start`,{variants:{size:{xs:`w-1/4 snap-start`,sm:`w-1/3 snap-start`,base:`w-1/2 snap-start`,lg:`w-2/3 snap-start`,xl:`w-[calc(100%-80px)] snap-start`,full:`w-full snap-start`}},defaultVariants:{size:`sm`}}),s=r.default.forwardRef(({className:e,size:n,...r},a)=>(0,i.jsx)(`div`,{ref:a,className:t.t(o({size:n}),e),...r}));s.displayName=`CarouselItem`,exports.Carousel=a,exports.CarouselItem=s;
//# sourceMappingURL=Carousel.cjs.map