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

A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍

{"version":3,"file":"components\\ui\\carousel.cjs","sources":["webpack://@arolariu/components/./src/components/ui/carousel.tsx"],"sourcesContent":["\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":["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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"}