50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1a5a,"use client"; /* eslint-disable @next/next/no-img-element */ import { useEffect, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionValue } from "motion/react"; export interface CarouselItem { image: string; title: string; description?: string; } export interface CarouselProps { items: CarouselItem[]; /** Slide width in px. */ itemWidth?: number; /** Slide height in px. */ itemHeight?: number; /** Px between slides. */ gap?: number; /** Max rotateY of off-center slides in degrees. */ tilt?: number; autoplay?: boolean; /** Ms between autoplay steps. */ autoplayDelay?: number; /** Wrap around at the ends (arrows, autoplay). */ loop?: boolean; /** Slide centered on mount. */ startIndex?: number; className?: string; } const spring = { type: "spring" as const, stiffness: 300, damping: 34 }; export function Carousel({ items, itemWidth = 300, itemHeight = 340, gap = 24, tilt = 38, autoplay = false, autoplayDelay = 3000, loop = true, startIndex = 0, className, }: CarouselProps) { const n = items.length; const stride = itemWidth + gap; const x = useMotionValue(-startIndex * stride); const [index, setIndex] = useState(startIndex); const dragged = useRef(false); const hovered = useRef(false); const reduce = useReducedMotion(); const go = (i: number) => { const next = loop ? (i + n) % n : Math.max(0, Math.min(n - 1, i)); setIndex(next); animate(x, -next * stride, reduce ? { duration: 0 } : spring); }; // Keep position in sync when the slide size changes. useEffect(() => { x.set(-index * stride); // eslint-disable-next-line react-hooks/exhaustive-deps }, [stride]); useEffect(() => { if (!autoplay || reduce) return; const id = window.setInterval(() => { if (hovered.current) return; setIndex((i) => { const next = (i + 1) % n; animate(x, -next * stride, spring); return next; }); }, autoplayDelay); return () => window.clearInterval(id); }, [autoplay, autoplayDelay, n, stride, x, reduce]); return (

(hovered.current = true)} onPointerLeave={() => (hovered.current = false)} >

{ if (e.key === "ArrowRight") go(index + 1); else if (e.key === "ArrowLeft") go(index - 1); else return; e.preventDefault(); }} className="relative w-full overflow-hidden rounded-3xl outline-none focus-visible:ring-2 focus-visible:ring-ring" style={{ height: itemHeight + 40, perspective: 1000, maskImage: "linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent)", WebkitMaskImage: "linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent)", }} > (dragged.current = true)} onDragEnd={(_, info) => { const projected = x.get() + info.velocity.x * 0.25; go(Math.max(0, Math.min(n - 1, Math.round(-projected / stride)))); window.setTimeout(() => (dragged.current = false)); }} > {items.map((item, i) => ( !dragged.current && go(i)} /> ))}

{items.map((item, i) => ( ))}

); } interface SlideProps { item: CarouselItem; i: number; x: MotionValue; stride: number; tilt: number; width: number; height: number; active: boolean; onSelect: () => void; } function Slide({ item, i, x, stride, tilt, width, height, active, onSelect }: SlideProps) { // Distance from center in slides: 0 = centered, ±1 = neighbours. const d = useTransform(x, (v) => Math.max(-2, Math.min(2, (v + i * stride) / stride))); const rotateY = useTransform(d, (v) => -Math.max(-1, Math.min(1, v)) * tilt); const scale = useTransform(d, (v) => 1 - Math.min(Math.abs(v), 1.5) * 0.1); const opacity = useTransform(d, (v) => 1 - Math.min(Math.abs(v), 2) * 0.25); return (

{item.title}

{item.description &&

{item.description}

}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/carousel.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]