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

React based design system for UNDP

{"version":3,"file":"Carousel.cjs","names":[],"sources":["../src/components/ui/carousel.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/noStaticElementInteractions: For carousel makes sense that outer div is not button but a div */\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    const WrapperRef = React.useRef<HTMLDivElement>(null);\n    const [cursor, setCursor] = React.useState(\n      'url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-right.svg)',\n    );\n    return (\n      <div\n        ref={WrapperRef}\n        className={cn(\n          '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',\n          className,\n        )}\n        {...props}\n        onKeyDown={(e) => {\n          if (!WrapperRef.current) return;\n\n          if (e.key === 'ArrowRight') {\n            WrapperRef.current.scrollBy(280, 0);\n          }\n\n          if (e.key === 'ArrowLeft') {\n            WrapperRef.current.scrollBy(-280, 0);\n          }\n        }}\n        onClick={(e) => {\n          if (WrapperRef.current) {\n            if (e.clientX > window.innerWidth / 2) WrapperRef.current.scrollBy(280, 0);\n            else WrapperRef.current.scrollBy(-280, 0);\n          }\n        }}\n        onMouseMove={(e) => {\n          if (e.clientX > window.innerWidth / 2)\n            setCursor(\n              'url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-right.svg)',\n            );\n          else\n            setCursor(\n              'url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-left.svg)',\n            );\n        }}\n      >\n        <div\n          ref={ref}\n          className='flex w-full items-stretch gap-4'\n          style={{ cursor: `${cursor}, auto` }}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\nCarousel.displayName = 'Carousel';\n\nconst cardVariants = cva('shrink-0 min-w-[320px] snap-start', {\n  variants: {\n    size: {\n      xs: 'w-1/4 snap-start',\n      sm: 'w-1/3 snap-start',\n      base: 'w-1/2 snap-start',\n      lg: 'w-2/3 snap-start',\n      xl: 'w-[calc(100%-80px)] snap-start',\n      full: 'w-full snap-start',\n    },\n  },\n  defaultVariants: { size: 'sm' },\n});\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>\n>(({ className, size, ...props }, ref) => (\n  <div ref={ref} className={cn(cardVariants({ size }), className)} {...props} />\n));\nCarouselItem.displayName = 'CarouselItem';\n\nexport { Carousel, CarouselItem };\n"],"mappings":"8PAMA,IAAM,EAAW,EAAA,QAAM,YACpB,CAAE,YAAW,WAAU,GAAG,GAAS,IAAQ,CAC1C,IAAM,EAAa,EAAA,QAAM,OAAuB,IAAI,EAC9C,CAAC,EAAQ,GAAa,EAAA,QAAM,SAChC,qFACF,EACA,OACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,EACT,oHACA,CACF,EACA,GAAI,EACJ,UAAY,GAAM,CACX,EAAW,UAEZ,EAAE,MAAQ,cACZ,EAAW,QAAQ,SAAS,IAAK,CAAC,EAGhC,EAAE,MAAQ,aACZ,EAAW,QAAQ,SAAS,KAAM,CAAC,EAEvC,EACA,QAAU,GAAM,CACV,EAAW,UACT,EAAE,QAAU,OAAO,WAAa,EAAG,EAAW,QAAQ,SAAS,IAAK,CAAC,EACpE,EAAW,QAAQ,SAAS,KAAM,CAAC,EAE5C,EACA,YAAc,GAAM,CACd,EAAE,QAAU,OAAO,WAAa,EAClC,EACE,qFACF,EAEA,EACE,oFACF,CACJ,YAEA,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAU,kCACV,MAAO,CAAE,OAAQ,GAAG,EAAO,OAAQ,EAElC,UACE,CAAA,CACF,CAAA,CAET,CACF,EACA,EAAS,YAAc,WAEvB,IAAM,EAAe,EAAA,EAAI,oCAAqC,CAC5D,SAAU,CACR,KAAM,CACJ,GAAI,mBACJ,GAAI,mBACJ,KAAM,mBACN,GAAI,mBACJ,GAAI,iCACJ,KAAM,mBACR,CACF,EACA,gBAAiB,CAAE,KAAM,IAAK,CAChC,CAAC,EACK,EAAe,EAAA,QAAM,YAGxB,CAAE,YAAW,OAAM,GAAG,GAAS,KAChC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,UAAW,EAAA,EAAG,EAAa,CAAE,MAAK,CAAC,EAAG,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC9E,EACD,EAAa,YAAc"}