Carousel

1"use client";
2 
3import { useControlled } from "@base-ui/utils/useControlled";
4import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
5import { cn } from "@/lib/utils";
6import styles from "./carousel.module.css";
7 
8type CarouselContextValue = {
9  currentIndex: number;
10  setCurrentIndex: (index: number) => void;
11  totalItems: number;
12  gap: number;
13  variant: "default" | "inset";
14  goToIndex: (index: number) => void;
15  nextSlide: () => void;
16  prevSlide: () => void;
17  canGoNext: boolean;
18  canGoPrev: boolean;
19  viewportRef: React.RefObject<HTMLDivElement | null>;
20  slidesId: string;
21};
22 
23const CarouselContext = createContext<CarouselContextValue | null>(null);
24 
25function useCarousel() {
26  const context = useContext(CarouselContext);
27  if (!context) {
28    throw new Error("Carousel components must be used within Carousel.Root");
29  }
30  return context;
31}
32 
33export type CarouselRootProps = React.ComponentProps<"div"> & {
34  totalItems: number;
35  gap?: number;
36  index?: number;
37  defaultIndex?: number;
38  onIndexChange?: (index: number) => void;
39  align?: "start" | "center";
40  variant?: "default" | "inset";
41};
42 
43export function Root({
44  children,
45  totalItems,
46  gap = 16,
47  index: indexProp,
48  defaultIndex = 0,
49  onIndexChange,
50  align = "start",
51  variant = "default",
52  className,
53  ...props
54}: CarouselRootProps) {
55  const [currentIndex, setCurrentIndexInternal] = useControlled({
56    controlled: indexProp,
57    default: defaultIndex,
58    name: "Carousel",
59    state: "index",
60  });
61 
62  const viewportRef = useRef<HTMLDivElement>(null);
63  const bleedRefFromContext = useBleedRef();
64  const [insetPaddingLeft, setInsetPaddingLeft] = useState(0);
65  const [insetPaddingRight, setInsetPaddingRight] = useState(0);
66  const slidesId = `${useId()}-slides`;
67 
68  const maxIndex = totalItems - 1;
69 
70  const setCurrentIndex = useCallback(
71    (index: number) => {
72      setCurrentIndexInternal(index);
73      onIndexChange?.(index);
74    },
75    [setCurrentIndexInternal, onIndexChange]
76  );
77 
78  const goToIndex = useCallback(
79    (index: number) => {
80      const viewport = viewportRef.current;
81      if (!viewport) {
82        return;
83      }
84 
85      const slides = viewport.querySelectorAll('[role="group"]');
86      const targetSlide = slides[index] as HTMLElement;
87 
88      if (targetSlide) {
89        let targetScroll = targetSlide.offsetLeft;
90 
91        if (variant === "inset" && bleedRefFromContext?.current) {
92// … truncated