4e: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"] 4f: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"] 50:T26fa,"use client" import * as React from "react" import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react" import { motion, useReducedMotion } from "motion/react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" type CarouselContextValue = { scrollRef: React.RefObject edgeSize: number itemInset: { start: number; end: number } edges: { left: boolean; right: boolean } canScrollPrevious: boolean canScrollNext: boolean scrollToItem: (direction: "previous" | "next") => void } const CarouselContext = React.createContext(null) const minimumItemInset = 16 function useCarousel() { const context = React.useContext(CarouselContext) if (!context) { throw new Error("Carousel components must be used within ") } return context } export function Carousel({ children, title, description, controls = true, className, contentClassName, }: { children: React.ReactNode title?: string description?: React.ReactNode controls?: boolean className?: string contentClassName?: string }) { const scrollRef = React.useRef(null) const reduceMotion = useReducedMotion() const [edges, setEdges] = React.useState({ left: false, right: false }) const [edgeSize, setEdgeSize] = React.useState(48) const [itemInset, setItemInset] = React.useState({ start: 16, end: 16 }) const updateEdges = React.useCallback(() => { const element = scrollRef.current if (!element) return const items = Array.from( element.querySelectorAll("[data-carousel-item]") ) const firstItem = items[0] const lastItem = items[items.length - 1] const maxScroll = element.scrollWidth - element.clientWidth setEdgeSize(Math.max(20, Math.min(64, element.clientWidth * 0.1))) const shouldCenterFirstItem = firstItem ? firstItem.offsetWidth >= element.clientWidth * 0.5 : false const shouldCenterLastItem = lastItem ? lastItem.offsetWidth >= element.clientWidth * 0.5 : false const nextInset = { start: firstItem && shouldCenterFirstItem ? Math.max( minimumItemInset, (element.clientWidth - firstItem.offsetWidth) / 2 ) : minimumItemInset, end: lastItem && shouldCenterLastItem ? Math.max( minimumItemInset, (element.clientWidth - lastItem.offsetWidth) / 2 ) : minimumItemInset, } setItemInset((currentInset) => { if ( Math.abs(currentInset.start - nextInset.start) < 1 && Math.abs(currentInset.end - nextInset.end) < 1 ) { return currentInset } return nextInset }) setEdges({ left: element.scrollLeft > 4, right: element.scrollLeft < maxScroll - 4, }) }, []) React.useEffect(() => { const element = scrollRef.current if (!element) return updateEdges() element.addEventListener("scroll", updateEdges, { passive: true }) window.addEventListener("resize", updateEdges) const resizeObserver = "ResizeObserver" in window ? new ResizeObserver(() => updateEdges()) : null resizeObserver?.observe(element) return () => { element.removeEventListener("scroll", updateEdges) window.removeEventListener("resize", updateEdges) resizeObserver?.disconnect() } }, [updateEdges]) React.useEffect(() => { const frame = window.requestAnimationFrame(updateEdges) return () => window.cancelAnimationFrame(frame) }, [itemInset, updateEdges]) const scrollToItem = React.useCallback( (direction: "previous" | "next") => { const element = scrollRef.current if (!element) return const items = Array.from( element.querySelectorAll("[data-carousel-item]") ) const scrollItems = items.length ? items : Array.from( element.firstElementChild?.children ?? [] ).filter((item): item is HTMLElement => item instanceof HTMLElement) if (!scrollItems.length) return const viewportCenter = element.scrollLeft + element.clientWidth / 2 const currentIndex = scrollItems.reduce((closestIndex, item, index) => { const itemCenter = item.offsetLeft + item.offsetWidth / 2 const closest = scrollItems[closestIndex] const closestCenter = closest.offsetLeft + closest.offsetWidth / 2 return Math.abs(itemCenter - viewportCenter) < Math.abs(closestCenter - viewportCenter) ? index : closestIndex }, 0) const nextIndex = direction === "next" ? Math.min(currentIndex + 1, scrollItems.length - 1) : Math.max(currentIndex - 1, 0) const nextItem = scrollItems[nextIndex] const nextLeft = nextItem.offsetLeft + nextItem.offsetWidth / 2 - element.clientWidth / 2 element.scrollTo({ left: nextLeft, behavior: reduceMotion ? "auto" : "smooth", }) }, [reduceMotion] ) const context = React.useMemo( () => ({ scrollRef, edgeSize, itemInset, edges, canScrollPrevious: edges.left, canScrollNext: edges.right, scrollToItem, }), [edgeSize, edges, itemInset, scrollToItem] ) const hasHeader = title || description || controls return (

{hasHeader ? (

{title ?

{title}

: null} {description ? (

{description}

) : null}

{controls ? (

) : null}

{children}

) } export function CarouselContent({ children, className, "aria-label": ariaLabel = "Carousel", }: React.ComponentProps<"div">) { const { scrollRef, edges, edgeSize, itemInset } = useCarousel() return ( <> {edges.left ? : null} {edges.right ? : null}

*]:snap-center", className )} > ) } export function CarouselItem({ className, ...props }: React.ComponentProps<"div">) { return (

) } export function CarouselPrevious({ className, ...props }: React.ComponentProps) { const { scrollToItem, canScrollPrevious } = useCarousel() return ( ) } export function CarouselNext({ className, ...props }: React.ComponentProps) { const { scrollToItem, canScrollNext } = useCarousel() return ( ) } export function CarouselEdgeBlur({ side, width, }: { side: "left" | "right" width: number }) { const isLeft = side === "left" return (

) } 4d:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@corr","registryDependencies":["button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/corr/components/carousel.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]