Carousel

1"use client";23import * as React from "react";4import { cn } from "@/lib/utils";5import { Button } from "@/components/ui/button";6import { Carousel as CarouselPrimitive } from "@sprawlify/react/carousel";7import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";89const Carousel = React.forwardRef<10  React.ElementRef<typeof CarouselPrimitive.Root>,11  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Root>12>(({ className, spacing = "1rem", loop = false, page, ...props }, ref) => (13  <CarouselPrimitive.Root14    ref={ref}15    data-slot="carousel"16    spacing={spacing}17    loop={loop}18    page={page}19    className={cn(20      "relative flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row",21      className,22    )}23    {...props}24  />25));26Carousel.displayName = "Carousel";2728const CarouselContent = React.forwardRef<29  React.ElementRef<typeof CarouselPrimitive.ItemGroup>,30  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.ItemGroup>31>(({ className, ...props }, ref) => (32  <CarouselPrimitive.ItemGroup33    ref={ref}34    data-slot="carousel-content"35    className={cn(36      "flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",37      className,38    )}39    {...props}40  />41));42CarouselContent.displayName = "CarouselContent";4344const CarouselItem = React.forwardRef<45  React.ElementRef<typeof CarouselPrimitive.Item>,46  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Item>47>(({ className, ...props }, ref) => (48  <CarouselPrimitive.Item49    ref={ref}50    data-slot="carousel-item"51    className={cn("min-w-0 shrink-0 grow-0 basis-full", className)}52    {...props}53  />54));55CarouselItem.displayName = "CarouselItem";5657const CarouselControl = React.forwardRef<58  React.ElementRef<typeof CarouselPrimitive.Control>,59  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Control>60>(({ className, ...props }, ref) => (61  <CarouselPrimitive.Control62    ref={ref}63    data-slot="carousel-control"64    className={cn(65      "flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col",66      className,67    )}68    {...props}69  />70));71CarouselControl.displayName = "CarouselControl";7273const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(74  ({ className, children, variant = "outline", size = "icon-sm", ...props }, ref) => (75    <CarouselPrimitive.PrevTrigger asChild>76      <Button77        ref={ref}78        data-slot="carousel-previous"79        variant={variant}80        size={size}81        className={cn("touch-manipulation rounded-full disabled:opacity-50", className)}82        {...props}83      >84        {children ?? <ChevronLeftIcon className="cn-rtl-flip size-4" />}85        <span className="sr-only">Previous slide</span>86      </Button>87    </CarouselPrimitive.PrevTrigger>88  ),89);90CarouselPrevious.displayName = "CarouselPrevious";9192const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(93  ({ className, children, variant = "outline", size = "icon-sm", ...props }, ref) => (94    <CarouselPrimitive.NextTrigger asChild>95      <Button96        ref={ref}97        data-slot="carousel-next"98        variant={variant}99        size={size}100        className={cn("touch-manipulation rounded-full disabled:opacity-50", className)}101        {...props}102      >103        {children ?? <ChevronRightIcon className="cn-rtl-flip size-4" />}104        <span className="sr-only">Next slide</span>105      </Button>106    </CarouselPrimitive.NextTrigger>107  ),108);109CarouselNext.displayName = "CarouselNext";110111const CarouselIndicatorGroup = React.forwardRef<112  React.ElementRef<typeof CarouselPrimitive.IndicatorGroup>,113  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.IndicatorGroup>114>(({ className, ...props }, ref) => (115  <CarouselPrimitive.IndicatorGroup116    ref={ref}117    data-slot="carousel-indicator-group"118    className={cn("flex justify-center gap-2 data-[orientation=vertical]:flex-col", className)}119    {...props}120  />121));122CarouselIndicatorGroup.displayName = "CarouselIndicatorGroup";123124const CarouselIndicator = React.forwardRef<125  React.ElementRef<typeof CarouselPrimitive.Indicator>,126  React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Indicator>127>(({ className, ...props }, ref) => (128  <CarouselPrimitive.Indicator129    ref={ref}130    data-slot="carousel-indicator"131    className={cn(132      "size-2.5 cursor-pointer rounded-full border-0 bg-muted-foreground/30 p-0 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-current:bg-primary",133      className,134    )}135    {...props}136  />137));138CarouselIndicator.displayName = "CarouselIndicator";139140const CarouselIndicators = React.forwardRef<141  React.ElementRef<typeof CarouselPrimitive.IndicatorGroup>,142  Omit<React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Indicator>, "index">143>(function CarouselIndicators(props, ref) {144  return (145    <CarouselPrimitive.Context>146      {(api) => (147        <CarouselIndicatorGroup ref={ref}>148          {api.pageSnapPoints.map((_, index) => (149            <CarouselIndicator key={index} index={index} {...props} />150          ))}151        </CarouselIndicatorGroup>152      )}153    </CarouselPrimitive.Context>154  );155});156CarouselIndicators.displayName = "CarouselIndicators";157158const CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;159const CarouselContext = CarouselPrimitive.Context;160const CarouselRootProvider = CarouselPrimitive.RootProvider;161162export {163  Carousel,164  CarouselContent,165  CarouselItem,166  CarouselControl,167  CarouselPrevious,168  CarouselNext,169  CarouselIndicatorGroup,170  CarouselIndicator,171  CarouselIndicators,172  CarouselAutoplayTrigger,173  CarouselContext,174  CarouselRootProvider,175};176