@arolariu/components/dist/cjs/components/ui/carousel.cjs.map

🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

{"version":3,"file":"components\\ui\\carousel.cjs","sources":["webpack://@arolariu/components/webpack/runtime/compat_get_default_export","webpack://@arolariu/components/webpack/runtime/define_property_getters","webpack://@arolariu/components/webpack/runtime/has_own_property","webpack://@arolariu/components/webpack/runtime/make_namespace_object","webpack://@arolariu/components/./src/components/ui/carousel.tsx"],"sourcesContent":["// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\n\nimport * as React from \"react\";\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\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\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\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\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 onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\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) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\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:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -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      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -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      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"names":["__webpack_require__","module","getter","definition","key","Object","obj","prop","Symbol","CarouselContext","React","useCarousel","context","Error","Carousel","orientation","opts","setApi","plugins","className","children","props","carouselRef","api","useEmblaCarousel","canScrollPrev","setCanScrollPrev","canScrollNext","setCanScrollNext","onSelect","scrollPrev","scrollNext","handleKeyDown","event","cn","CarouselContent","CarouselItem","CarouselPrevious","variant","size","Button","ArrowLeft","CarouselNext","ArrowRight"],"mappings":"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"}