4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2468,import { Children, cloneElement, isValidElement, useCallback, useEffect, useRef, useState, type ComponentProps, type KeyboardEvent, type ReactElement, } from "react" import useEmblaCarousel from "embla-carousel-react" import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "./button" import { CarouselContext, useCarousel, type CarouselApi, } from "./carousel-context" type UseCarouselParameters = Parameters type CarouselOptions = UseCarouselParameters[0] type CarouselPlugin = UseCarouselParameters[1] type CarouselLayout = | "standard" | "multi-browse" | "hero" | "uncontained" | "full-screen" type CarouselAccessibleName = | { "aria-label": string; "aria-labelledby"?: string } | { "aria-label"?: never; "aria-labelledby": string } type CarouselProps = Omit< ComponentProps<"div">, "aria-label" | "aria-labelledby" | "role" > & CarouselAccessibleName & { /** Material layout used to size and emphasize visible items. */ layout?: CarouselLayout /** Embla options merged with the horizontal carousel defaults. */ opts?: CarouselOptions /** Optional Embla plugins. */ plugins?: CarouselPlugin /** Receives the Embla API after initialization. */ setApi?: (api: CarouselApi) => void } const carouselControlClassName = "absolute inset-y-0 my-auto touch-manipulation aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:bg-m3-on-surface/12 aria-disabled:text-m3-on-surface/38" const horizontalArrowConsumerSelector = [ "input", "textarea", "select", '[contenteditable]:not([contenteditable="false"])', '[role="combobox"]', '[role="menuitemradio"]', '[role="option"]', '[role="radio"]', '[role="slider"]', '[role="spinbutton"]', '[role="tab"]', '[role="textbox"]', ].join(",") function consumesHorizontalArrowKey(target: EventTarget | null) { return ( target instanceof Element && target.closest(horizontalArrowConsumerSelector) !== null ) } function usePrefersReducedMotion() { const [prefersReducedMotion, setPrefersReducedMotion] = useState( () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, ) useEffect(() => { const query = window.matchMedia("(prefers-reduced-motion: reduce)") const updatePreference = () => setPrefersReducedMotion(query.matches) updatePreference() query.addEventListener("change", updatePreference) return () => query.removeEventListener("change", updatePreference) }, []) return prefersReducedMotion } /** A touch-enabled Material carousel powered by Embla. */ function Carousel({ children, className, layout = "standard", onKeyDownCapture, opts, plugins, setApi, ...props }: CarouselProps) { const prefersReducedMotion = usePrefersReducedMotion() const [carouselRef, api] = useEmblaCarousel( { align: "start", ...opts, axis: "x", ...(prefersReducedMotion ? { duration: 0 } : {}), }, plugins, ) const [selectedIndex, setSelectedIndex] = useState(opts?.startIndex ?? 0) const intendedIndex = useRef(opts?.startIndex ?? 0) const [canScrollPrevious, setCanScrollPrevious] = useState(false) const [canScrollNext, setCanScrollNext] = useState(false) const updateSelection = useCallback((nextApi: CarouselApi) => { if (!nextApi) return const nextIndex = nextApi.selectedScrollSnap() intendedIndex.current = nextIndex setSelectedIndex(nextIndex) setCanScrollPrevious(nextApi.canScrollPrev()) setCanScrollNext(nextApi.canScrollNext()) }, []) const restoreSelection = useCallback( (nextApi: CarouselApi) => { if (!nextApi) return const lastSnap = nextApi.scrollSnapList().length - 1 const nextIndex = Math.max(0, Math.min(intendedIndex.current, lastSnap)) if (nextApi.selectedScrollSnap() !== nextIndex) { nextApi.scrollTo(nextIndex, true) } updateSelection(nextApi) }, [updateSelection], ) const scrollPrevious = useCallback(() => api?.scrollPrev(), [api]) const scrollNext = useCallback(() => api?.scrollNext(), [api]) const handleKeyDownCapture = useCallback( (event: KeyboardEvent) => { onKeyDownCapture?.(event) if (event.defaultPrevented) return if (consumesHorizontalArrowKey(event.target)) return if (event.key === "ArrowLeft") { event.preventDefault() scrollPrevious() } else if (event.key === "ArrowRight") { event.preventDefault() scrollNext() } }, [onKeyDownCapture, scrollNext, scrollPrevious], ) useEffect(() => { if (api && setApi) setApi(api) }, [api, setApi]) useEffect(() => { if (!api) return const initialSelectionFrame = requestAnimationFrame(() => updateSelection(api), ) api.on("select", updateSelection) api.on("reInit", restoreSelection) return () => { cancelAnimationFrame(initialSelectionFrame) api.off("select", updateSelection) api.off("reInit", restoreSelection) } }, [api, restoreSelection, updateSelection]) return (

{children}

) } function CarouselContent({ children, className, ...props }: ComponentProps<"div">) { const { carouselRef, selectedIndex } = useCarousel() const slides = Children.toArray(children).filter(isValidElement) const slideCount = slides.length return (

{slides.map((child, index) => { const slide = child as ReactElement> const accessibleName = slide.props["aria-label"] || slide.props["aria-labelledby"] ? undefined : `Slide ${index + 1} of ${slideCount}` return cloneElement( slide, { "aria-label": accessibleName ?? slide.props["aria-label"], "aria-current": selectedIndex === index ? "true" : undefined, "data-selected": selectedIndex === index ? "true" : undefined, } as ComponentProps<"div">, ) })}

) } function CarouselItem({ className, ...props }: ComponentProps<"div">) { return (

) } type CarouselControlDirection = "previous" | "next" function CarouselControl({ direction, "aria-label": ariaLabel, className, disabled, onClick, shape = "round", size = "icon", variant = "tonal", ...props }: ComponentProps & { direction: CarouselControlDirection }) { const carousel = useCarousel() const isPrevious = direction === "previous" const canScroll = isPrevious ? carousel.canScrollPrevious : carousel.canScrollNext const scroll = isPrevious ? carousel.scrollPrevious : carousel.scrollNext const Icon = isPrevious ? ChevronLeftIcon : ChevronRightIcon const isUnavailable = Boolean(disabled || !canScroll) return ( ) } function CarouselPrevious(props: ComponentProps) { return } function CarouselNext(props: ComponentProps) { return } export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel, } export type { CarouselAccessibleName, CarouselApi, CarouselLayout, CarouselOptions, CarouselPlugin, CarouselProps, } 4b:["$","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","embla-carousel-react@^8.6.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/embla-carousel-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":"embla-carousel-react@^8.6.0"}]]}]}],["$","li","lucide-react@^1.33.0",{"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@^1.33.0"}]]}]}]]}],["$","$L4c",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/button.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/carousel.tsx","content":"$4e","type":"registry:ui"},{"path":"src/components/ui/carousel-context.ts","content":"import { createContext, useContext } from \"react\"\nimport type { UseEmblaCarouselType } from \"embla-carousel-react\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\n\ntype CarouselContextValue = {\n api: CarouselApi\n canScrollNext: boolean\n canScrollPrevious: boolean\n carouselRef: UseEmblaCarouselType[0]\n scrollNext: () => void\n scrollPrevious: () => void\n selectedIndex: number\n}\n\nconst CarouselContext = createContext(null)\n\nfunction useCarousel() {\n const context = useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nexport { CarouselContext, useCarousel }\nexport type { CarouselApi, CarouselContextValue }\n","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]