carousel

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/carousel/Carousel.astro directly.
3/**
4 * @component Carousel
5 * @title Carousel
6 * @description A CSS scroll-snap carousel using only Tailwind classes (no JS).
7 *
8 * @preview
9 *
10 * <!-- Horizontal images with center snapping -->
11 * <Carousel class="gap-4 p-2" align="center">
12 *   <CarouselSlide><img src="https://images.unsplash.com/photo-1759332978018-a6efdacf4d11?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1290" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
13 *   <CarouselSlide><img src="https://plus.unsplash.com/premium_photo-1760541740387-e0af5182d805?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1335" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
14 *   <CarouselSlide><img src="https://images.unsplash.com/photo-1760659391924-86d657118008?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2340" alt="Example" class="w-120 h-96 object-cover rounded-lg" /></CarouselSlide>
15 * </Carousel>
16 *
17 * @usage
18 *
19 * ```astro nocollapse
20 * ---
21 * import { Carousel, CarouselSlide } from '@bejamas/ui/components/carousel';
22 * ---
23 *
24 * <Carousel>
25 *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 1</div></CarouselSlide>
26 *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 2</div></CarouselSlide>
27 *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 3</div></CarouselSlide>
28 * </Carousel>
29 * ```
30 *
31 * @props
32 * - axis?: "x" | "y" — Scroll direction. Default: "x".
33 * - snapType?: "mandatory" | "proximity" — Scroll-snap behavior. Default: "mandatory".
34 * - align?: "start" | "center" | "end" — Child snap alignment. Default: "start".
35 * - fade?: boolean — Add edge fade via CSS mask on the scroll axis. Default: false.
36 */
37 
38import type { HTMLAttributes } from "astro/types";
39import { cva } from "class-variance-authority";
40import { cn } from "@/lib/utils";
41 
42type Axis = "x" | "y";
43type SnapType = "mandatory" | "proximity";
44type Align = "start" | "center" | "end";
45 
46interface Props extends HTMLAttributes<"div"> {
47  axis?: Axis;
48  snapType?: SnapType;
49  align?: Align;
50  fade?: boolean;
51  class?: string;
52}
53 
54const {
55  axis = "x",
56  snapType = "mandatory",
57  align = "start",
58  fade = false,
59  class: className = "",
60  ...rest
61} = Astro.props as Props;
62 
63const carouselVariants = cva(
64  "relative w-full overflow-auto scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
65// … truncated