Carousel

1"use client";
2 
3import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
4import { cva, type VariantProps } from "class-variance-authority";
5import * as React from "react";
6import { type HoverEffect, hoverEffects } from "@/lib/hover-effects";
7import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
8import { cn } from "@/lib/utils";
9import { Button } from "./button";
10 
11/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
12const carouselVariants = cva("", {
13  variants: {
14    variant: {
15      default: "bg-card text-card-foreground border shadow-sm",
16      glass: "text-foreground",
17    },
18  },
19  defaultVariants: {
20    variant: "glass",
21  },
22});
23 
24/* Role: borderless adaptive glass. */
25const ROLE = {};
26 
27export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof carouselVariants>, MaterialAxisProps {
28  effect?: HoverEffect;
29  autoPlay?: boolean;
30  interval?: number;
31}
32 
33const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
34  ({ className, variant = "glass", effect, autoPlay = false, interval = 3000, children, ...props }, ref) => {
35    const [axes, rest] = splitAxisProps(props);
36    const [currentIndex, setCurrentIndex] = React.useState(0);
37    const items = React.Children.toArray(children);
38    const totalItems = items.length;
39 
40    React.useEffect(() => {
41      if (!autoPlay || totalItems <= 1) return;
42 
43      const timer = setInterval(() => {
44        setCurrentIndex((prev) => (prev + 1) % totalItems);
45      }, interval);
46 
47      return () => clearInterval(timer);
48    }, [
49      autoPlay,
50      interval,
51      totalItems,
52    ]);
53 
54    const goToSlide = (index: number) => {
55      setCurrentIndex(index);
56    };
57 
58    const goToPrevious = () => {
59      setCurrentIndex((prev) => (prev - 1 + totalItems) % totalItems);
60    };
61 
62    const goToNext = () => {
63      setCurrentIndex((prev) => (prev + 1) % totalItems);
64    };
65 
66    const m = materialSurface(variant === "default" ? null : ROLE, axes);
67 
68    if (totalItems === 0) return null;
69 
70    return (
71      <div
72        ref={ref}
73        data-material={m?.["data-material"]}
74        className={cn(
75          m?.className,
76          "relative w-full overflow-hidden rounded-lg",
77          carouselVariants({
78            variant,
79          }),
80          effect &&
81            hoverEffects({
82              hover: effect,
83            }),
84          className,
85        )}
86        {...rest}
87      >
88        <div
89// … truncated