Carousel Motion

1"use client";
2import { cn } from "@/lib/utils";
3import {
4  ChevronDown,
5  ChevronLeft,
6  ChevronRight,
7  ChevronUp,
8} from "lucide-react";
9import { motion, useMotionValue, type Transition } from "motion/react";
10import {
11  Children,
12  ReactNode,
13  createContext,
14  useCallback,
15  useContext,
16  useEffect,
17  useMemo,
18  useRef,
19  useState,
20} from "react";
21 
22export type CarouselContextType = {
23  index: number;
24  setIndex: (newIndex: number | ((prev: number) => number)) => void;
25  itemsCount: number;
26  setItemsCount: (newItemsCount: number) => void;
27  disableDrag: boolean;
28  loop: boolean;
29  orientation: "horizontal" | "vertical";
30};
31 
32const CarouselContext = createContext<CarouselContextType | undefined>(
33  undefined,
34);
35 
36function useCarousel() {
37  const context = useContext(CarouselContext);
38  if (!context) {
39    throw new Error("useCarousel must be used within an CarouselProvider");
40  }
41  return context;
42}
43 
44export type CarouselProviderProps = {
45  children: ReactNode;
46  initialIndex?: number;
47  onIndexChange?: (newIndex: number) => void;
48  disableDrag?: boolean;
49  loop?: boolean;
50  orientation?: "horizontal" | "vertical";
51};
52 
53function CarouselProvider({
54  children,
55  initialIndex = 0,
56  onIndexChange,
57  disableDrag = false,
58  loop = false,
59  orientation = "horizontal",
60}: CarouselProviderProps) {
61  const [index, setIndex] = useState<number>(initialIndex);
62  const [itemsCount, setItemsCount] = useState<number>(0);
63 
64  const handleSetIndex = useCallback(
65    (newIndex: number | ((prev: number) => number)) => {
66      if (typeof newIndex === "function") {
67        setIndex((prev) => {
68          const next = newIndex(prev);
69          onIndexChange?.(next);
70          return next;
71        });
72      } else {
73        setIndex(newIndex);
74        onIndexChange?.(newIndex);
75      }
76    },
77    [onIndexChange],
78  );
79 
80  useEffect(() => {
81    setIndex(initialIndex);
82  }, [initialIndex]);
83 
84  const contextValue = useMemo(
85    () => ({
86      index,
87      setIndex: handleSetIndex,
88      itemsCount,
89      setItemsCount,
90      disableDrag,
91      loop,
92      orientation,
93    }),
94    [index, handleSetIndex, itemsCount, disableDrag, loop, orientation],
95  );
96 
97  return (
98    <CarouselContext.Provider value={contextValue}>
99      {children}
100    </CarouselContext.Provider>
101  );
102}
103 
104export type CarouselProps = {
105  children: ReactNode;
106  className?: string;
107  initialIndex?: number;
108  index?: number;
109  onIndexChange?: (newIndex: number) => void;
110  disableDrag?: boolean;
111  loop?: boolean;
112// … truncated