Carousel

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Carousel — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// shadcn/ui ships a Carousel built on the Embla JS engine. We don't copy that
8// React code; we mirror its anatomy (Carousel / CarouselContent / CarouselItem
9// / CarouselPrevious / CarouselNext) and translate it to a NATIVE, no-engine
10// implementation. Source of truth for the API shape:
11//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/carousel.tsx (anatomy only)
12//
13// Accessibility contract follows the WAI-ARIA APG carousel pattern (Basic
14// carousel: previous/next controls, no auto-rotation):
15//   repos/aria-practices/content/patterns/carousel/carousel-pattern.html
16//   repos/aria-practices/content/patterns/carousel/examples/carousel-1-prev-next.html
17//
18// How this differs from Embla / shadcn:
19//   - The scroller is a plain horizontally-overflowing element using CSS
20//     scroll-snap (`snap-x snap-mandatory`, each slide `snap-center`). Scrolling
21//     itself is therefore native: mouse wheel, trackpad, touch swipe, and the
22//     browser's own keyboard scrolling all work with zero JS, and the snap
23//     points keep slides aligned. Tailwind v4 ships these utilities natively
24//     (repos/tailwindcss/.../src/utilities.ts: snap-x, snap-mandatory,
25//     snap-center, scroll-smooth, overscroll-x-contain; motion-safe variant in
26//     src/variants.ts).
27//   - The only thing the platform does NOT give us is "advance by exactly one
28//     slide when the Prev/Next buttons are pressed" + the buttons' disabled
29//     state at the ends. public/site.js (keyed on data-slot="carousel") owns
30//     that: it calls Element.scrollBy() with the slide width
31//     (repos/mdn/files/en-us/web/api/element/scrollby/index.md).
32//
33// APG roles/states/properties (Basic carousel):
34//   - Root container: role="group" + aria-roledescription="carousel" + an
35//     accessible name via aria-label / aria-labelledby. Because the
36//     roledescription is "carousel", the label must NOT contain the word
37//     "carousel". (carousel-pattern.html, "Basic carousel elements")
38//   - Each slide: role="group" + aria-roledescription="slide" + an accessible
39//     name. When slides have no unique name, "N of M" is the sanctioned
40//     fallback because group elements don't support aria-setsize/aria-posinset.
41//   - The element wrapping the slides has aria-atomic="false" + aria-live.
42// … truncated