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:T207c,'use client'; import { animate, motion, useMotionValue } from 'motion/react'; import React, { useEffect, useRef, useState } from 'react'; export const items = [ { id: 1, url: 'https://images.unsplash.com/photo-1761882835101-02ab45ac0726?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=690', title: 'MAXX PHAM', }, { id: 2, url: 'https://images.unsplash.com/photo-1661980494567-40a5e01b699b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=685', title: 'BOXIEN BAY', }, { id: 3, url: 'https://images.unsplash.com/photo-1761882725885-d3d8bd2032d1?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687', title: 'AUSIZE MAM', }, { id: 4, url: 'https://images.unsplash.com/photo-1761775915848-467e41c1c4db?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=689', title: 'RECLKTIKA', }, { id: 5, url: 'https://images.unsplash.com/photo-1761078980679-e89e25fe279b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687', title: 'SONYPOO', }, { id: 6, url: 'https://images.unsplash.com/photo-1760389005000-bf02bf24f463?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1123', title: 'DONM FLY', }, { id: 7, url: 'https://images.unsplash.com/photo-1761165307495-56bd564d322f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=663', title: 'Snowy Mountain Highway', }, { id: 8, url: 'https://images.unsplash.com/photo-1756299792672-157811bf1005?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1074', title: 'FOGGY FOLS', }, { id: 9, url: 'https://images.unsplash.com/photo-1572851899646-a1f69c664e1e?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170', title: 'DIM DARKO', }, { id: 10, url: 'https://images.unsplash.com/photo-1759247178379-0e8eba83a4a6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687', title: 'BEALIVE', }, { id: 11, url: 'https://images.unsplash.com/photo-1754968230523-052635c98f99?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=736', title: 'DOMEDOM ROME', }, { id: 12, url: 'https://images.unsplash.com/photo-1643037508102-46fb319979c5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=764', title: 'IKEIMON POVE', }, { id: 13, url: 'https://images.unsplash.com/photo-1555803741-1ac759ac2f53?q=80&w=880&auto=format&fit=crop', title: 'Wildflower Mountain Meadow', }, { id: 14, url: 'https://images.unsplash.com/photo-1516705486637-7b01bf9b9d13?q=80&w=880&auto=format&fit=crop', title: 'Mountain Valley Vista', }, { id: 15, url: 'https://images.unsplash.com/photo-1512045519129-eb9ceb788555?q=80&w=880&auto=format&fit=crop', title: 'Rugged Mountain Terrain', }, { id: 16, url: 'https://images.unsplash.com/photo-1504198266287-1659872e6590?q=80&w=880&auto=format&fit=crop', title: 'Mountain Wildflower Bloom', }, { id: 17, url: 'https://images.unsplash.com/photo-1611582450053-0f056a82a68e?q=80&w=735&auto=format&fit=crop', title: 'Mountain River Rapids', }, { id: 18, url: 'https://images.unsplash.com/photo-1590872000386-4348c6393115?q=80&w=688&auto=format&fit=crop', title: 'Lush Mountain Valley', }, ]; export default function FramerMultiSlideCarousel({ breakpoints = { 0: { slidesToShow: 1 }, 768: { slidesToShow: 2 }, 1024: { slidesToShow: 3 }, }, }) { const [index, setIndex] = useState(0); const [slidesToShow, setSlidesToShow] = useState(1); const containerRef = useRef(null); const x = useMotionValue(0); // Handle responsive breakpoints useEffect(() => { const updateSlidesToShow = () => { const width = window.innerWidth; const sortedBreakpoints = Object.keys(breakpoints) .map(Number) .sort((a, b) => b - a); for (const bp of sortedBreakpoints) { if (width >= bp) { // @ts-expect-error setSlidesToShow(breakpoints[bp].slidesToShow); break; } } }; updateSlidesToShow(); window.addEventListener('resize', updateSlidesToShow); return () => window.removeEventListener('resize', updateSlidesToShow); }, [breakpoints]); useEffect(() => { if (containerRef.current) { const containerWidth = containerRef.current.offsetWidth || 1; const slideWidth = containerWidth / slidesToShow; const targetX = -index * slideWidth; animate(x, targetX, { type: 'spring', stiffness: 300, damping: 30, }); } }, [index, slidesToShow]); // Reset index if it exceeds max when resizing useEffect(() => { const maxIndex = Math.max(0, items.length - slidesToShow); if (index > maxIndex) { setIndex(maxIndex); } }, [slidesToShow, index]); const maxIndex = Math.max(0, items.length - slidesToShow); return (

Responsive Multi-Slide Carousel (Showing {slidesToShow})

{items.map((item) => (

{item.title}

))} {/* Navigation Buttons */} setIndex((i) => Math.max(0, i - 1))} className={`absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-10 ${ index === 0 ? 'opacity-40 cursor-not-allowed bg-neutral-300' : 'bg-white hover:scale-110 hover:opacity-100 opacity-70' }`} > setIndex((i) => Math.min(maxIndex, i + 1))} className={`absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-10 ${ index === maxIndex ? 'opacity-40 cursor-not-allowed bg-neutral-300' : 'bg-white hover:scale-110 hover:opacity-100 opacity-70' }`} >

); } 53:T477d,'use client'; import { cn } from '@/lib/utils'; import type { EmblaCarouselType, EmblaEventType, EmblaOptionsType } from 'embla-carousel'; import useEmblaCarousel from 'embla-carousel-react'; import { AnimatePresence, motion } from 'motion/react'; import type React from 'react'; import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState, } from 'react'; // ============= TYPES ============= interface CarouselProps extends React.HTMLAttributes { options?: EmblaOptionsType; plugins?: Parameters[1]; isScale?: boolean; } interface CarouselContextType { emblaApi: EmblaCarouselType | undefined; emblaThumbsApi: EmblaCarouselType | undefined; emblaRef: ReturnType[0]; emblaThumbsRef: ReturnType[0]; prevBtnDisabled: boolean; nextBtnDisabled: boolean; onPrevButtonClick: () => void; onNextButtonClick: () => void; selectedIndex: number; scrollSnaps: number[]; onDotButtonClick: (index: number) => void; scrollProgress: number; selectedSnap: number; snapCount: number; isScale: boolean; slidesArr: string[]; setSlidesArr: React.Dispatch>; onThumbClick: (index: number) => void; carouselId: string; orientation: 'vertical' | 'horizontal'; direction: 'ltr' | 'rtl' | undefined; handleKeyDown: (event: React.KeyboardEvent) => void; } // ============= CONTEXT ============= const CarouselContext = createContext(undefined); export const useCarousel = () => { const context = useContext(CarouselContext); if (!context) { throw new Error('useCarousel must be used within a Carousel component'); } return context; }; // ============= UTILITIES ============= const TWEEN_FACTOR_BASE = 0.52; const numberWithinRange = (number: number, min: number, max: number): number => Math.min(Math.max(number, min), max); // ============= MAIN CAROUSEL COMPONENT ============= export const Carousel = forwardRef( ({ children, options = {}, plugins = [], className, isScale = false, dir, ...props }, ref) => { const carouselId = useId(); const [slidesArr, setSlidesArr] = useState([]); const orientation = options.axis === 'y' ? 'vertical' : 'horizontal'; const direction = options.direction ?? (dir as 'ltr' | 'rtl' | undefined); // Main carousel const [emblaRef, emblaApi] = useEmblaCarousel( { ...options, axis: orientation === 'vertical' ? 'y' : 'x', direction, }, plugins ); // Thumbnails carousel const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({ containScroll: 'keepSnaps', dragFree: true, axis: orientation === 'vertical' ? 'y' : 'x', direction, }); // State const [prevBtnDisabled, setPrevBtnDisabled] = useState(true); const [nextBtnDisabled, setNextBtnDisabled] = useState(true); const [selectedIndex, setSelectedIndex] = useState(0); const [scrollSnaps, setScrollSnaps] = useState([]); const [scrollProgress, setScrollProgress] = useState(0); const [snapCount, setSnapCount] = useState(0); // Navigation callbacks const onPrevButtonClick = useCallback(() => { emblaApi?.scrollPrev(); }, [emblaApi]); const onNextButtonClick = useCallback(() => { emblaApi?.scrollNext(); }, [emblaApi]); const onDotButtonClick = useCallback( (index: number) => { emblaApi?.scrollTo(index); }, [emblaApi] ); const onThumbClick = useCallback( (index: number) => { if (!emblaApi || !emblaThumbsApi) return; emblaApi.scrollTo(index); }, [emblaApi, emblaThumbsApi] ); // Keyboard navigation const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (!emblaApi) return; switch (event.key) { case 'ArrowLeft': event.preventDefault(); if (orientation === 'horizontal') { direction === 'rtl' ? onNextButtonClick() : onPrevButtonClick(); } break; case 'ArrowRight': event.preventDefault(); if (orientation === 'horizontal') { direction === 'rtl' ? onPrevButtonClick() : onNextButtonClick(); } break; case 'ArrowUp': event.preventDefault(); if (orientation === 'vertical') onPrevButtonClick(); break; case 'ArrowDown': event.preventDefault(); if (orientation === 'vertical') onNextButtonClick(); break; } }, [emblaApi, orientation, direction, onPrevButtonClick, onNextButtonClick] ); // Selection handler const onSelect = useCallback(() => { if (!emblaApi) return; setSelectedIndex(emblaApi.selectedScrollSnap()); setPrevBtnDisabled(!emblaApi.canScrollPrev()); setNextBtnDisabled(!emblaApi.canScrollNext()); emblaThumbsApi?.scrollTo(emblaApi.selectedScrollSnap()); }, [emblaApi, emblaThumbsApi]); // Scroll progress handler const onScroll = useCallback((emblaApi: EmblaCarouselType) => { const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress())); setScrollProgress(progress * 100); }, []); // Scale animation for isScale mode const tweenFactor = useRef(0); const tweenNodes = useRef([]); const setTweenNodes = useCallback( (emblaApi: EmblaCarouselType): void => { if (!isScale) return; tweenNodes.current = emblaApi .slideNodes() .map((slideNode) => slideNode.querySelector('.slider_content')) as HTMLElement[]; }, [isScale] ); const setTweenFactor = useCallback( (emblaApi: EmblaCarouselType) => { if (!isScale) return; tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length; }, [isScale] ); const tweenScale = useCallback( (emblaApi: EmblaCarouselType, eventName?: EmblaEventType) => { if (!isScale) return; const engine = emblaApi.internalEngine(); const scrollProgress = emblaApi.scrollProgress(); const slidesInView = emblaApi.slidesInView(); const isScrollEvent = eventName === 'scroll'; emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress; const slidesInSnap = engine.slideRegistry[snapIndex]; slidesInSnap.forEach((slideIndex) => { if (isScrollEvent && !slidesInView.includes(slideIndex)) return; if (engine.options.loop) { engine.slideLooper.loopPoints.forEach((loopItem) => { const target = loopItem.target(); if (slideIndex === loopItem.index && target !== 0) { const sign = Math.sign(target); if (sign === -1) { diffToTarget = scrollSnap - (1 + scrollProgress); } if (sign === 1) { diffToTarget = scrollSnap + (1 - scrollProgress); } } }); } const tweenValue = 1 - Math.abs(diffToTarget * tweenFactor.current); const scale = numberWithinRange(tweenValue, 0, 1).toString(); const tweenNode = tweenNodes.current[slideIndex]; if (tweenNode) { tweenNode.style.transform = `scale(${scale})`; } }); }); }, [isScale] ); // Effects useEffect(() => { if (!emblaApi) return; setScrollSnaps(emblaApi.scrollSnapList()); setSnapCount(emblaApi.scrollSnapList().length); onSelect(); onScroll(emblaApi); emblaApi .on('reInit', onSelect) .on('select', onSelect) .on('reInit', onScroll) .on('scroll', onScroll); if (isScale) { setTweenNodes(emblaApi); setTweenFactor(emblaApi); tweenScale(emblaApi); emblaApi .on('reInit', setTweenNodes) .on('reInit', setTweenFactor) .on('reInit', tweenScale) .on('scroll', tweenScale); } }, [emblaApi, onSelect, onScroll, isScale, setTweenNodes, setTweenFactor, tweenScale]); return (

{children}

); } ); Carousel.displayName = 'Carousel'; // ============= SLIDER CONTAINER ============= export const SliderContainer = forwardRef>( ({ className, children, ...props }, ref) => { const { emblaRef, orientation } = useCarousel(); return (

{children}

); } ); SliderContainer.displayName = 'SliderContainer'; // ============= SLIDER ITEM ============= interface SliderProps extends React.HTMLAttributes { thumbnailSrc?: string; } export const Slider = forwardRef( ({ children, className, thumbnailSrc, ...props }, ref) => { const { isScale, setSlidesArr, orientation } = useCarousel(); useEffect(() => { if (thumbnailSrc) { setSlidesArr((prev) => { if (!prev.includes(thumbnailSrc)) { return [...prev, thumbnailSrc]; } return prev; }); } }, [thumbnailSrc, setSlidesArr]); return (

{isScale ?

{children}

: children}

); } ); Slider.displayName = 'Slider'; // ============= NAVIGATION BUTTONS ============= export const SliderPrevButton = forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes >(({ children, className, ...props }, ref) => { const { onPrevButtonClick, prevBtnDisabled } = useCarousel(); return ( ); }); SliderPrevButton.displayName = 'SliderPrevButton'; export const SliderNextButton = forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes >(({ children, className, ...props }, ref) => { const { onNextButtonClick, nextBtnDisabled } = useCarousel(); return ( ); }); SliderNextButton.displayName = 'SliderNextButton'; // ============= PROGRESS BAR ============= export const SliderProgress = forwardRef>( ({ className, ...props }, ref) => { const { scrollProgress } = useCarousel(); return (

); } ); SliderProgress.displayName = 'SliderProgress'; // ============= SNAP DISPLAY ============= export const SliderSnapDisplay = forwardRef>( ({ className, ...props }, ref) => { const { selectedSnap, snapCount } = useCarousel(); const prevSnapRef = useRef(selectedSnap); const direction = selectedSnap > prevSnapRef.current ? 1 : -1; useEffect(() => { prevSnapRef.current = selectedSnap; }, [selectedSnap]); return (

({ y: d * 20, opacity: 0 })} animate={{ y: 0, opacity: 1 }} // @ts-expect-error exit={(d: number) => ({ y: d * -20, opacity: 0 })} > {selectedSnap + 1} / {snapCount}

); } ); SliderSnapDisplay.displayName = 'SliderSnapDisplay'; // ============= DOT BUTTONS ============= interface SliderDotButtonProps extends React.HTMLAttributes { activeClass?: string; } export const SliderDotButton = forwardRef( ({ className, activeClass, ...props }, ref) => { const { selectedIndex, scrollSnaps, orientation, onDotButtonClick, carouselId } = useCarousel(); return (

{scrollSnaps.map((_, index) => ( ))}

); } ); SliderDotButton.displayName = 'SliderDotButton'; // ============= CAROUSEL INDICATORS ============= interface CarouselIndicatorProps extends React.ButtonHTMLAttributes { index: number; } export const CarouselIndicator = forwardRef( ({ className, index, ...props }, ref) => { const { selectedIndex, onDotButtonClick } = useCarousel(); const isActive = selectedIndex === index; return ( ); } ); CarouselIndicator.displayName = 'CarouselIndicator'; // Auto-generate thumbnails from slides export const ThumbsSlider = forwardRef< HTMLDivElement, React.HTMLAttributes & { thumbsClassName?: string; thumbsSliderClassName?: string; } >(({ className, thumbsClassName, thumbsSliderClassName, ...props }, ref) => { const { slidesArr, selectedIndex, onThumbClick, orientation, emblaThumbsRef } = useCarousel(); if (slidesArr.length === 0) return null; return (

{slidesArr.map((src, index) => (

onThumbClick(index)} className={cn( 'shrink-0 cursor-pointer transition-opacity', 'border-2 rounded-md', orientation === 'vertical' ? 'basis-[15%] h-20' : 'basis-[15%] h-24', selectedIndex === index ? 'opacity-100 border-primary' : 'opacity-30 border-transparent', thumbsSliderClassName )} > {`Thumbnail

))}

); }); ThumbsSlider.displayName = 'ThumbsSlider'; // Alias for backward compatibility 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":"@ui-layouts","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"./registry/components/carousel/framer/framer-multi-carousel.tsx","content":"$52","type":"registry:component"},{"path":"./components/ui/carousel.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]