{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel", "title": "Carousel", "description": "One poster at a time, each name set so large the frame crops it. The count between the arrows rolls the way you travel.", "registryDependencies": [ "https://thedirectors.agency/ui/r/0nlytype.json" ], "files": [ { "path": "registry/0nlytype/ui/carousel.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { roll } from \"@/lib/0nlytype/roll\"\n\nconst Slide = React.createContext({ index: 0, total: 0, current: false, shelf: false, choose: () => {} })\n\nconst pad = (n: number) => String(n).padStart(2, \"0\")\n\ntype CarouselProps = React.ComponentProps<\"div\"> & {\n /**\n * poster: one slide at a time, the name sinking under a hairline.\n * line: every name on one line of type, read along; the one at the start inks and takes the accent full stop.\n * shelf: the slides stand as spines, their names running up them; the one you take out faces you.\n */\n variant?: \"poster\" | \"line\" | \"shelf\"\n /** Names the slides for the keyboard: the track takes focus, so it needs a name. */\n trackLabel?: string\n previousLabel?: string\n nextLabel?: string\n}\n\n/**\n * One slide at a time. The count between the arrows rolls the way you travel.\n * Swipe, scroll, use the arrows, or focus the track and press the arrow keys.\n * Slides are CarouselItems, as direct children.\n */\nfunction Carousel({ variant = \"poster\", trackLabel = \"Slides\", previousLabel = \"Previous\", nextLabel = \"Next\", className, children, ...props }: CarouselProps) {\n const track = React.useRef(null)\n const now = React.useRef(null)\n const items = React.Children.toArray(children)\n const total = items.length\n const shelf = variant === \"shelf\"\n const [at, setAt] = React.useState(0)\n const [shown, setShown] = React.useState(0)\n const was = React.useRef(0)\n\n const settle = React.useCallback((i: number) => {\n if (i === was.current) return\n const dir = i > was.current ? 1 : -1\n was.current = i\n setAt(i)\n if (now.current) roll(now.current, () => setShown(i), \"0.6em\", dir)\n else setShown(i)\n }, [])\n\n // The slide whose start edge is nearest the track's start is the one you're on, while you swipe or scroll.\n React.useEffect(() => {\n const t = track.current\n if (!t || shelf) return\n let frame = 0\n const read = () => {\n frame = 0\n const side = getComputedStyle(t).direction === \"rtl\" ? \"right\" : \"left\"\n const edge = t.getBoundingClientRect()[side]\n let best = 0\n let near = Infinity\n ;[...t.children].forEach((c, i) => {\n const d = Math.abs(c.getBoundingClientRect()[side] - edge)\n if (d < near) [near, best] = [d, i]\n })\n settle(best)\n }\n const onScroll = () => void (frame ||= requestAnimationFrame(read))\n t.addEventListener(\"scroll\", onScroll, { passive: true })\n return () => {\n t.removeEventListener(\"scroll\", onScroll)\n cancelAnimationFrame(frame)\n }\n }, [total, shelf, settle])\n\n const go = (i: number) => {\n const to = Math.max(0, Math.min(total - 1, i))\n // The shelf doesn't scroll: taking a spine out is the move.\n if (shelf) return settle(to)\n track.current?.children[to]?.scrollIntoView({ inline: \"start\", block: \"nearest\", behavior: matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"auto\" : \"smooth\" })\n }\n\n return (\n
\n {\n const target = e.target as HTMLElement\n if (e.defaultPrevented || (target !== e.currentTarget && (target.isContentEditable || target.closest(\"input, textarea, select\")))) return\n const rtl = getComputedStyle(e.currentTarget).direction === \"rtl\"\n const to = { ArrowLeft: at + (rtl ? 1 : -1), ArrowRight: at + (rtl ? -1 : 1), Home: 0, End: total - 1 }[e.key]\n if (to === undefined) return\n e.preventDefault()\n go(to)\n }}\n >\n {items.map((item, index) => (\n go(index) }}>\n {item}\n \n ))}\n
\n
\n \n \n {pad(shown + 1)} / {pad(total)}\n \n \n
\n \n )\n}\n\nfunction CarouselItem({ className, children, ...props }: React.ComponentProps<\"div\">) {\n const { index, total, current, shelf, choose } = React.useContext(Slide)\n return (\n \n {children}\n {/* A spine on the shelf is taken out with a click; the keyboard has the track's arrows and the buttons. */}\n {shelf && !current ?