Shadcn Carousel for React and Tailwind

"use client";

import {
  Carousel as ArkCarousel,
  useCarousel as useArkCarousel,
  useCarouselContext as useArkCarouselContext,
} from "@ark-ui/react/carousel";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  PauseIcon,
  PlayIcon,
} from "lucide-react";
import type React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

export const useCarousel: typeof useArkCarousel = (props) =>
  useArkCarousel({ spacing: "16px", ...props });
export const useCarouselContext = useArkCarouselContext;
export const CarouselContext = ArkCarousel.Context;

const carouselRootClassName = cn(
  "relative",
  "flex flex-col",
  "data-[orientation=vertical]:w-max data-[orientation=vertical]:flex-row"
);

export const Carousel = (
  props: React.ComponentProps<typeof ArkCarousel.Root>
) => {
  const { spacing = "16px", className, ...rest } = props;

  return (
    <ArkCarousel.Root
      className={cn(carouselRootClassName, className)}
      data-slot="carousel"
      spacing={spacing}
      {...rest}
    />
  );
};

export const CarouselRootProvider = (
  props: React.ComponentProps<typeof ArkCarousel.RootProvider>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.RootProvider
      className={cn(carouselRootClassName, className)}
      data-slot="carousel"
      {...rest}
    />
  );
};

export const CarouselControl = (
  props: React.ComponentProps<typeof ArkCarousel.Control>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.Control
      className={cn(
        "flex items-center justify-between gap-2",
        "data-[orientation=vertical]:flex-col",
        className
      )}
      data-slot="carousel-control"
      {...rest}
    />
  );
};

export const CarouselPrevious = (
  props: React.ComponentProps<typeof ArkCarousel.PrevTrigger>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.PrevTrigger
      className={cn(
        "absolute",
        "data-[orientation=horizontal]:-inset-s-12 data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:-translate-y-1/2",
        "data-[orientation=vertical]:-top-12 data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:rotate-90",
        className
      )}
      data-slot="carousel-previous"
      {...rest}
      asChild
    >
      <Button
        aria-label="Previous slide"
        clickEffect={false}
        pill
        size="icon-md"
        variant="outline"
      >
        <ChevronLeftIcon aria-hidden="true" />
      </Button>
    </ArkCarousel.PrevTrigger>
  );
};

export const CarouselNext = (
  props: React.ComponentProps<typeof ArkCarousel.NextTrigger>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.NextTrigger
      className={cn(
        "absolute",
        "data-[orientation=horizontal]:-inset-e-12 data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:-translate-y-1/2",
        "data-[orientation=vertical]:-bottom-12 data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:rotate-90",
        className
      )}
      {...rest}
      asChild
      data-slot="carousel-next"
    >
      <Button
        aria-label="Next slide"
        clickEffect={false}
        pill
        size="icon-md"
        variant="outline"
      >
        <ChevronRightIcon aria-hidden="true" />
      </Button>
    </ArkCarousel.NextTrigger>
  );
};

export const CarouselIndicatorGroup = (
  props: React.ComponentProps<typeof ArkCarousel.IndicatorGroup>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.IndicatorGroup
      className={cn(
        "flex justify-center gap-2",
        "data-[orientation=vertical]:flex-col",
        className
      )}
      data-slot="carousel-indicator-group"
      {...rest}
    />
  );
};

export const CarouselIndicator = (
  props: React.ComponentProps<typeof ArkCarousel.Indicator>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.Indicator
      className={cn(
        "size-2",
        "shrink-0",
        "bg-foreground",
        "opacity-64 data-current:opacity-100",
        "overflow-hidden",
        "[&_img]:size-full [&_img]:rounded-lg [&_img]:object-cover",
        "rounded-full",
        className
      )}
      data-slot="carousel-indicator"
      {...rest}
    />
  );
};

export const CarouselContent = (
  props: React.ComponentProps<typeof ArkCarousel.ItemGroup>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.ItemGroup
      className={cn(
        "min-w-0",
        "-my-4 py-4",
        "overflow-hidden rounded-lg",
        className
      )}
      data-slot="carousel-group"
      {...rest}
    />
  );
};

export const CarouselItem = (
  props: React.ComponentProps<typeof ArkCarousel.Item>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.Item
      className={cn(
        "min-w-0",
        "[&_img]:size-full [&_img]:rounded-lg [&_img]:object-cover",
        className
      )}
      data-slot="carousel-item"
      {...rest}
    />
  );
};

export const CarouselAutoplayTrigger = (
  props: React.ComponentProps<typeof ArkCarousel.AutoplayTrigger>
) => {
  const { className, children, ...rest } = props;

  return (
    <ArkCarousel.AutoplayTrigger
      className={className}
      data-slot="carousel-autoplay-trigger"
      {...rest}
      asChild
    >
      {children ?? (
        <Button
          aria-label="Toggle autoplay"
          clickEffect={false}
          pill
          size="icon-md"
          variant="outline"
        >
          <ArkCarousel.AutoplayIndicator
            fallback={<PlayIcon aria-hidden="true" />}
          >
            <PauseIcon aria-hidden="true" />
          </ArkCarousel.AutoplayIndicator>
        </Button>
      )}
    </ArkCarousel.AutoplayTrigger>
  );
};

export const CarouselAutoplayIndicator = (
  props: React.ComponentProps<typeof ArkCarousel.AutoplayIndicator>
) => (
  <ArkCarousel.AutoplayIndicator
    data-slot="carousel-autoplay-indicator"
    {...props}
  />
);

export const CarouselProgressText = (
  props: React.ComponentProps<typeof ArkCarousel.ProgressText>
) => {
  const { className, ...rest } = props;

  return (
    <ArkCarousel.ProgressText
      className={cn("text-muted-foreground text-sm", className)}
      data-slot="carousel-progress-text"
      {...rest}
    />
  );
};