Aurora Carousel

1"use client"
2 
3/**
4 * Aurora Carousel — horizontal snap track with prev/next controls.
5 *
6 * Visual layer is ported from the Claude Design source: a display-font section
7 * title, two neutral icon buttons, and a snap-x track of panel-medium cards with
8 * the documented top-sheen seam (opaque base + translucent top, layered so the
9 * gradient never bands). Reads only `--aurora-*` tokens.
10 *
11 * Architecture stays Aurora: the Aurora `Button` (neutral icon variant) drives
12 * the controls, `CarouselItem` accepts a ref prop (React 19 style), and the
13 * `title`/HTML props/escape-hatch API is preserved.
14 */
15 
16import * as React from "react"
17import { ChevronLeft, ChevronRight } from "lucide-react"
18import { Button } from "@/registry/aurora/ui/button"
19 
20// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
21 
22export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
23  title?: React.ReactNode
24}
25 
26export function Carousel({ title, className, children, style, ...props }: CarouselProps) {
27  const trackRef = React.useRef<HTMLDivElement>(null)
28 
29  const scroll = (direction: -1 | 1) => {
30    trackRef.current?.scrollBy({ left: direction * 280, behavior: "smooth" })
31  }
32 
33  return (
34    <section className={["aurora-carousel", className].filter(Boolean).join(" ")} style={style} {...props}>
35      <div className="aurora-carousel__head">
36        {title ? <h3 className="aurora-carousel__title">{title}</h3> : <span />}
37        <div className="aurora-carousel__controls">
38          <Button type="button" size="icon" variant="neutral" aria-label="Previous slide" onClick={() => scroll(-1)}>
39            <ChevronLeft className="size-4" aria-hidden />
40          </Button>
41          <Button type="button" size="icon" variant="neutral" aria-label="Next slide" onClick={() => scroll(1)}>
42            <ChevronRight className="size-4" aria-hidden />
43          </Button>
44        </div>
45      </div>
46      <div ref={trackRef} className="aurora-carousel__track">
47        {React.Children.map(children, (child) => (
48          <div className="aurora-carousel__slide">{child}</div>
49        ))}
50      </div>
51    </section>
52  )
53}
54 
55export function CarouselItem({ className, ref, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
56  return (
57    <div
58      ref={ref}
59      className={["aurora-carousel__item", className].filter(Boolean).join(" ")}
60      {...props}
61    />
62  )
63}
64 
65export default Carousel