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:T3730,"use client"; import { useControlled } from "@base-ui/utils/useControlled"; import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react"; import { cn } from "../../../lib/utils"; import styles from "./carousel.module.css"; type CarouselContextValue = { currentIndex: number; setCurrentIndex: (index: number) => void; totalItems: number; gap: number; variant: "default" | "inset"; goToIndex: (index: number) => void; nextSlide: () => void; prevSlide: () => void; canGoNext: boolean; canGoPrev: boolean; viewportRef: React.RefObject; slidesId: string; }; const CarouselContext = createContext(null); function useCarousel() { const context = useContext(CarouselContext); if (!context) { throw new Error("Carousel components must be used within Carousel.Root"); } return context; } export type CarouselRootProps = React.ComponentProps<"div"> & { totalItems: number; gap?: number; index?: number; defaultIndex?: number; onIndexChange?: (index: number) => void; align?: "start" | "center"; variant?: "default" | "inset"; }; export function Root({ children, totalItems, gap = 16, index: indexProp, defaultIndex = 0, onIndexChange, align = "start", variant = "default", className, ...props }: CarouselRootProps) { const [currentIndex, setCurrentIndexInternal] = useControlled({ controlled: indexProp, default: defaultIndex, name: "Carousel", state: "index", }); const viewportRef = useRef(null); const bleedRefFromContext = useBleedRef(); const [insetPaddingLeft, setInsetPaddingLeft] = useState(0); const [insetPaddingRight, setInsetPaddingRight] = useState(0); const slidesId = `${useId()}-slides`; const maxIndex = totalItems - 1; const setCurrentIndex = useCallback( (index: number) => { setCurrentIndexInternal(index); onIndexChange?.(index); }, [setCurrentIndexInternal, onIndexChange] ); const goToIndex = useCallback( (index: number) => { const viewport = viewportRef.current; if (!viewport) { return; } const slides = viewport.querySelectorAll('[role="group"]'); const targetSlide = slides[index] as HTMLElement; if (targetSlide) { let targetScroll = targetSlide.offsetLeft; if (variant === "inset" && bleedRefFromContext?.current) { const parent = bleedRefFromContext.current.parentElement; if (parent) { const parentRect = parent.getBoundingClientRect(); const leftPadding = parentRect.left; targetScroll = targetSlide.offsetLeft - leftPadding; } } viewport.scrollTo({ left: targetScroll, behavior: "smooth" }); } setCurrentIndex(index); }, [setCurrentIndex, variant, bleedRefFromContext] ); const getVisibleItemsCount = useCallback(() => { const viewport = viewportRef.current; if (!viewport) { return 1; } const slides = viewport.querySelectorAll('[role="group"]'); if (slides.length === 0) { return 1; } const viewportRect = viewport.getBoundingClientRect(); let visibleCount = 0; const VISIBILITY_THRESHOLD = 0.5; for (const slide of slides) { const slideRect = slide.getBoundingClientRect(); const visibleWidth = Math.min(slideRect.right, viewportRect.right) - Math.max(slideRect.left, viewportRect.left); const slideWidth = slideRect.width; if (visibleWidth / slideWidth >= VISIBILITY_THRESHOLD) { visibleCount++; } } return Math.max(1, visibleCount); }, []); const visibleItemsForNav = getVisibleItemsCount(); const canGoNext = currentIndex + visibleItemsForNav <= maxIndex; const canGoPrev = currentIndex > 0; const nextSlide = useCallback(() => { const visibleItems = getVisibleItemsCount(); const newIndex = Math.min(currentIndex + visibleItems, maxIndex); goToIndex(newIndex); }, [currentIndex, maxIndex, goToIndex, getVisibleItemsCount]); const prevSlide = useCallback(() => { const visibleItems = getVisibleItemsCount(); const newIndex = Math.max(currentIndex - visibleItems, 0); goToIndex(newIndex); }, [currentIndex, goToIndex, getVisibleItemsCount]); const value: CarouselContextValue = { currentIndex, setCurrentIndex, totalItems, gap, variant, goToIndex, nextSlide, prevSlide, canGoNext, canGoPrev, viewportRef, slidesId, }; useEffect(() => { const viewport = viewportRef.current; if (!viewport) { return; } const handleScroll = () => { const slides = viewport.querySelectorAll('[role="group"]'); if (slides.length === 0) { return; } const viewportRect = viewport.getBoundingClientRect(); let closestIndex = 0; let closestDistance = Number.POSITIVE_INFINITY; slides.forEach((slide, index) => { const slideRect = slide.getBoundingClientRect(); const distance = Math.abs(slideRect.left - viewportRect.left); if (distance < closestDistance) { closestDistance = distance; closestIndex = index; } }); if (closestIndex !== currentIndex) { setCurrentIndexInternal(closestIndex); } }; viewport.addEventListener("scroll", handleScroll, { passive: true }); return () => viewport.removeEventListener("scroll", handleScroll); }, [currentIndex, setCurrentIndexInternal]); useEffect(() => { if (variant !== "inset" || !bleedRefFromContext?.current || !viewportRef.current) { return; } const calculatePadding = () => { const bleed = bleedRefFromContext.current; const viewport = viewportRef.current; if (!(bleed && viewport)) { return; } const parent = bleed.parentElement; if (!parent) { return; } const parentRect = parent.getBoundingClientRect(); const viewportRect = viewport.getBoundingClientRect(); const parentStyles = window.getComputedStyle(parent); const parentPaddingLeft = Number.parseFloat(parentStyles.paddingLeft); const parentPaddingRight = Number.parseFloat(parentStyles.paddingRight); const leftPadding = Math.max(0, parentRect.left + parentPaddingLeft - viewportRect.left - gap); const rightPadding = Math.max(0, viewportRect.right - (parentRect.right - parentPaddingRight)); setInsetPaddingLeft(leftPadding); setInsetPaddingRight(rightPadding); }; calculatePadding(); window.addEventListener("resize", calculatePadding); return () => window.removeEventListener("resize", calculatePadding); }, [variant, bleedRefFromContext, gap]); return (

{children}

Slide {currentIndex + 1} of {totalItems}

); } export type CarouselBleedProps = React.ComponentProps<"div">; const BleedRefContext = createContext | null>(null); export function useBleedRef() { return useContext(BleedRefContext); } export function Bleed({ className, children, ...props }: CarouselBleedProps) { const bleedRef = useRef(null); return (

{children}

); } export type CarouselViewportProps = React.ComponentProps<"div">; export function Viewport({ className, children, ...props }: CarouselViewportProps) { const { viewportRef, slidesId } = useCarousel(); return (

{children}

); } export type CarouselContentProps = React.ComponentProps<"div">; export function Content({ className, children, ...props }: CarouselContentProps) { const { gap, variant } = useCarousel(); return (

{children}

); } export type CarouselItemProps = React.ComponentProps<"div"> & { index: number; }; export function Item({ index, className, children, ...props }: CarouselItemProps) { const { totalItems, goToIndex, nextSlide, prevSlide, canGoNext, canGoPrev, viewportRef } = useCarousel(); const itemRef = useRef(null); const [isVisible, setIsVisible] = useState(false); useEffect(() => { const el = itemRef.current; const root = viewportRef.current; if (!(el && root)) { return; } const observer = new IntersectionObserver( ([entry]) => setIsVisible(entry.intersectionRatio >= 0.5), { root, threshold: [0, 0.5, 1] } ); observer.observe(el); return () => observer.disconnect(); }, [viewportRef]); const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { switch (e.key) { case "ArrowLeft": if (canGoPrev) { e.preventDefault(); prevSlide(); } break; case "ArrowRight": if (canGoNext) { e.preventDefault(); nextSlide(); } break; case "Home": e.preventDefault(); goToIndex(0); break; case "End": e.preventDefault(); goToIndex(totalItems - 1); break; default: break; } }, [canGoPrev, canGoNext, prevSlide, nextSlide, goToIndex, totalItems] ); return ( // biome-ignore lint/a11y/noNoninteractiveElementInteractions: Keyboard navigation is required for carousel accessibility

{children}

); } export type CarouselPreviousProps = React.ComponentProps<"button">; export function Previous({ className, children, ...props }: CarouselPreviousProps) { const { prevSlide, canGoPrev, slidesId } = useCarousel(); return ( ); } export type CarouselNextProps = React.ComponentProps<"button">; export function Next({ className, children, ...props }: CarouselNextProps) { const { nextSlide, canGoNext, slidesId } = useCarousel(); return ( ); } export type CarouselNavigationProps = React.ComponentProps<"div">; export function Navigation({ className, children, ...props }: CarouselNavigationProps) { const { totalItems, variant } = useCarousel(); if (totalItems <= 1) { return null; } return (

{children || ( <> )}

); } export type CarouselIndicatorsProps = React.ComponentProps<"div">; export function Indicators({ className, ...props }: CarouselIndicatorsProps) { const { totalItems, currentIndex, goToIndex, slidesId } = useCarousel(); if (totalItems <= 1) { return null; } return (

{Array.from({ length: totalItems }, (_, index) => (

); } export const Carousel = { Root, Bleed, Viewport, Content, Item, Previous, Next, Navigation, Indicators, }; 51:Td81,.carousel { --page-max-width: 1280px; --page-padding-left: 1rem; --carousel-gap: 16px; --edge: calc((100vw - var(--page-max-width)) / 2); --min-edge: calc(var(--edge) - var(--carousel-gap)); --min-padding: calc(var(--page-padding-left) - var(--carousel-gap)); position: relative; width: 100%; margin: 0 auto; border-radius: 0.5rem; overflow: visible; &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } &[data-align="center"] { display: flex; flex-direction: column; align-items: center; } } .bleed { width: 100vw; margin-left: -50vw; margin-right: -50vw; position: relative; left: 50%; right: 50%; } .viewport { position: relative; width: 100%; overflow-x: scroll; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-stop: always; padding-block: calc( var(--focus-ring-width, 2px) + var(--focus-ring-offset, 2px) ); scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } .container { display: flex; align-items: stretch; &::before { content: ""; flex-shrink: 0; width: var(--inset-padding-left, 0); } &::after { content: ""; flex-shrink: 0; width: var(--inset-padding-right, 0); } } .slide { flex-shrink: 0; position: relative; &:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-radius: var(--radius); } } .navContainer { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; } .navButton { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0.5px solid oklch(from var(--border) l c h / 0.8); background: var(--card); color: var(--foreground); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: all 0.2s var(--ease-out-quad); opacity: 0.9; &:hover { opacity: 1; background: var(--muted); } &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } &:active { transform: scale(0.95); } &:disabled { opacity: 0.3; cursor: default; background: var(--muted); color: var(--muted-foreground); pointer-events: none; &:hover { opacity: 0.3; transform: none; background: var(--muted); } } & svg { width: 1rem; height: 1rem; } @media (prefers-reduced-motion: reduce) { transition: none; } } .indicators { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 10; } .indicator { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: none; background: oklch(from var(--foreground) l c h / 0.3); cursor: pointer; transition: all 0.2s ease; position: relative; &:hover { background: oklch(from var(--foreground) l c h / 0.5); transform: scale(1.1); } &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } &[data-active] { background: var(--primary); transform: scale(1.2); &:hover { background: var(--primary); } } @media (prefers-reduced-motion: reduce) { transition: none; } } .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 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","@base-ui/utils",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Futils","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":"@base-ui/utils"}]]}]}]]}],["$","$L4e",null,{"namespace":"@roiui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/brook/ui/carousel/carousel.tsx","content":"$50","type":"registry:file","target":"~/components/ui/carousel/carousel.tsx"},{"path":"registry/brook/ui/carousel/carousel.module.css","content":"$51","type":"registry:file","target":"~/components/ui/carousel/carousel.module.css"}],"className":"h-[70svh] min-h-80"}]]}]