"use client"; import type { UseEmblaCarouselType } from "embla-carousel-react"; import type React from "react"; import { useEffect, useMemo, useRef, useState } from "react"; import { ResultControls, type ResultControlsProps, } from "@/components/registry/blocks/result-controls"; import { SectionHeading, type SectionHeadingProps, } from "@/components/registry/blocks/section-heading"; import { Button } from "@/components/registry/primitives/core/button"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/registry/primitives/core/carousel"; import type { CollectionControllerState, CollectionResultControlsOptions, } from "@/hooks/registry/use-collection-controller"; import { cn } from "@/lib/registry/cn"; type CarouselLayoutConfig = { slidesPerView: number; spaceBetween: number; }; export type ItemCarouselBreakpoints = Record< number, { slidesPerView: number; spaceBetween?: number } >; export type ItemCarouselNavigationLayout = "overlay" | "inline"; export type ItemCarouselButtonPlacement = "inner" | "outer" | "edge"; export interface ItemCarouselLayoutOptions { slidesPerView?: number; spaceBetween?: number; breakpoints?: ItemCarouselBreakpoints; } export interface ItemCarouselControlOptions { navigation?: boolean; pagination?: boolean; navigationLayout?: ItemCarouselNavigationLayout; buttonPlacement?: ItemCarouselButtonPlacement; autoplay?: { enabled?: boolean; delay?: number; loop?: boolean; }; } export interface ItemCarouselProps { items: TItem[]; renderItem: (item: TItem, index: number) => React.ReactNode; /** * Stable key for each item. Required to avoid index keys in carousels. */ getKey: (item: TItem, index: number) => string; /** Optional standardized heading (SectionHeading mode). */ heading?: SectionHeadingProps; /** Optional collection-level controls (search/sort/filter/count). */ resultControls?: ResultControlsProps; collectionController?: { state: CollectionControllerState; resultControlsOptions?: CollectionResultControlsOptions; }; ariaLabel?: string; /** Embla options passed to the underlying carousel primitive. */ opts?: React.ComponentProps["opts"]; /** Allows parent variants (e.g. thumbs) to access the Embla API. */ setApi?: React.ComponentProps["setApi"]; /** Composed layout controls for CMS-friendly configuration. */ layoutOptions?: ItemCarouselLayoutOptions; /** Composed behavior controls for CMS-friendly configuration. */ controlOptions?: ItemCarouselControlOptions; /** Wrapper + internal className controls. */ className?: string; carouselClassName?: string; contentClassName?: string; itemClassName?: string; itemInnerClassName?: string; navButtonProps?: Omit< React.ComponentProps, "children" | "onClick" >; prevButtonProps?: Omit< React.ComponentProps, "children" | "onClick" >; nextButtonProps?: Omit< React.ComponentProps, "children" | "onClick" >; } const DEFAULT_BREAKPOINTS: ItemCarouselBreakpoints = { 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 }, 1280: { slidesPerView: 4 }, }; function resolveCarouselConfig( width: number, baseSlides: number, baseSpaceBetween: number, sortedBreakpoints: Array< readonly [number, { slidesPerView: number; spaceBetween?: number }] >, ): CarouselLayoutConfig { let nextConfig: CarouselLayoutConfig = { slidesPerView: baseSlides, spaceBetween: baseSpaceBetween, }; for (const [breakpoint, config] of sortedBreakpoints) { if (width < breakpoint) continue; nextConfig = { slidesPerView: config.slidesPerView, spaceBetween: typeof config.spaceBetween === "number" ? config.spaceBetween : baseSpaceBetween, }; } return nextConfig; } function usePrefersReducedMotion(): boolean { const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); useEffect(() => { if ( typeof window === "undefined" || typeof window.matchMedia !== "function" ) { return; } const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); const updatePreference = () => setPrefersReducedMotion(mediaQuery.matches); updatePreference(); if (typeof mediaQuery.addEventListener === "function") { mediaQuery.addEventListener("change", updatePreference); return () => mediaQuery.removeEventListener("change", updatePreference); } mediaQuery.addListener(updatePreference); return () => mediaQuery.removeListener(updatePreference); }, []); return prefersReducedMotion; } function useWindowWidth(enabled: boolean): number | null { const [width, setWidth] = useState(null); useEffect(() => { if (!enabled) { setWidth(null); return; } const updateWidth = () => setWidth(window.innerWidth); updateWidth(); window.addEventListener("resize", updateWidth); return () => window.removeEventListener("resize", updateWidth); }, [enabled]); return width; } function useCarouselLayoutConfig({ breakpoints, baseSlides, baseSpaceBetween, viewportWidth, }: { breakpoints: ItemCarouselBreakpoints; baseSlides: number; baseSpaceBetween: number; viewportWidth: number | null; }): CarouselLayoutConfig { const sortedBreakpoints = useMemo( () => Object.entries(breakpoints) .map(([key, value]) => [Number(key), value] as const) .filter(([key]) => !Number.isNaN(key)) .sort((a, b) => a[0] - b[0]), [breakpoints], ); return useMemo(() => { if (viewportWidth == null || viewportWidth <= 0) { return { slidesPerView: baseSlides, spaceBetween: baseSpaceBetween }; } return resolveCarouselConfig( viewportWidth, baseSlides, baseSpaceBetween, sortedBreakpoints, ); }, [viewportWidth, baseSlides, baseSpaceBetween, sortedBreakpoints]); } function useCarouselSnapState( api: UseEmblaCarouselType[1] | null, shouldUseApi: boolean, ) { const [snapCount, setSnapCount] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0); useEffect(() => { if (!shouldUseApi || !api) return; const onApiSelect = () => { const nextSnapCount = api.scrollSnapList().length; const nextSelectedIndex = api.selectedScrollSnap(); setSnapCount((prev) => (prev === nextSnapCount ? prev : nextSnapCount)); setSelectedIndex((prev) => prev === nextSelectedIndex ? prev : nextSelectedIndex, ); }; onApiSelect(); api.on("select", onApiSelect); api.on("reInit", onApiSelect); return () => { api.off("select", onApiSelect); api.off("reInit", onApiSelect); }; }, [api, shouldUseApi]); return { snapCount, selectedIndex }; } function CarouselNavigationButtons({ buttonPlacement, navButtonProps, prevButtonProps, nextButtonProps, }: { buttonPlacement: ItemCarouselButtonPlacement; navButtonProps?: Omit< React.ComponentProps, "children" | "onClick" >; prevButtonProps?: Omit< React.ComponentProps, "children" | "onClick" >; nextButtonProps?: Omit< React.ComponentProps, "children" | "onClick" >; }) { const overlayPrevClassName = buttonPlacement === "outer" ? cn("-start-6 rtl:-end-6 rtl:start-auto") : buttonPlacement === "edge" ? cn("start-0 rtl:start-auto rtl:end-0") : cn("start-6 rtl:start-auto rtl:end-6"); const overlayNextClassName = buttonPlacement === "outer" ? cn("-end-6 rtl:-start-6 rtl:end-auto") : buttonPlacement === "edge" ? cn("end-0 rtl:start-0 rtl:end-auto") : cn("end-6 rtl:start-6 rtl:end-auto"); const { className: navClassName, ...navRest } = navButtonProps ?? {}; const { className: prevClassName, ...prevRest } = prevButtonProps ?? {}; const { className: nextClassName, ...nextRest } = nextButtonProps ?? {}; const mergedPrevClassName = cn( overlayPrevClassName, navClassName, prevClassName, ); const mergedNextClassName = cn( overlayNextClassName, navClassName, nextClassName, ); return ( <> ); } /** * Drive autoplay by ticking the Embla API on an interval. Wrapping or * resetting to the start at the end is governed by `loop`. A no-op when * `enabled` is false or no API is attached yet. */ function useCarouselAutoplay({ api, enabled, loop, delay, }: { api: UseEmblaCarouselType[1] | null; enabled: boolean; loop: boolean; delay: number; }) { useEffect(() => { if (!api || !enabled) return; const interval = setInterval(() => { if (loop || api.canScrollNext()) { api.scrollNext(); } else { api.scrollTo(0); } }, delay); return () => clearInterval(interval); }, [api, delay, loop, enabled]); } type ResolvedCarouselOptions = { showNavigation: boolean; showPagination: boolean; navigationLayout: ItemCarouselNavigationLayout; buttonPlacement: ItemCarouselButtonPlacement; autoPlay: boolean; loop: boolean; delay: number; baseSlides: number; baseSpaceBetween: number; breakpoints: ItemCarouselBreakpoints; }; /** Fold the optional layout/control option bags into fully-defaulted values. */ function resolveCarouselOptions( layoutOptions: ItemCarouselLayoutOptions | undefined, controlOptions: ItemCarouselControlOptions | undefined, ): ResolvedCarouselOptions { return { showNavigation: controlOptions?.navigation ?? true, showPagination: controlOptions?.pagination ?? false, navigationLayout: controlOptions?.navigationLayout ?? "overlay", buttonPlacement: controlOptions?.buttonPlacement ?? "inner", autoPlay: controlOptions?.autoplay?.enabled ?? false, loop: controlOptions?.autoplay?.loop ?? false, delay: typeof controlOptions?.autoplay?.delay === "number" ? controlOptions.autoplay.delay : 4500, baseSlides: layoutOptions?.slidesPerView ?? 1, baseSpaceBetween: typeof layoutOptions?.spaceBetween === "number" ? layoutOptions.spaceBetween : 16, breakpoints: layoutOptions?.breakpoints ?? DEFAULT_BREAKPOINTS, }; } function CarouselPaginationDots({ api, snapPoints, selectedIndex, }: { api: UseEmblaCarouselType[1] | null; snapPoints: number[]; selectedIndex: number; }) { return (

{snapPoints.map((snapPoint, index) => (

); } function InlineNavCarouselContent({ content, navButtonProps, prevButtonProps, nextButtonProps, }: { content: React.ReactNode; navButtonProps?: ItemCarouselProps["navButtonProps"]; prevButtonProps?: ItemCarouselProps["prevButtonProps"]; nextButtonProps?: ItemCarouselProps["nextButtonProps"]; }) { const { className: navClassName, ...navRest } = navButtonProps ?? {}; const { className: prevClassName, ...prevRest } = prevButtonProps ?? {}; const { className: nextClassName, ...nextRest } = nextButtonProps ?? {}; return (

{content}

); } function SplitHeadingLayout({ headingLayout, heading, resultControls, children, }: { headingLayout: SectionHeadingProps["layout"]; heading: SectionHeadingProps; resultControls: ResultControlsProps | undefined; children: React.ReactNode; }) { return (

{resultControls ? ( ) : null} {children}

); } export function ItemCarousel({ items, renderItem, getKey, heading, resultControls, collectionController, ariaLabel, opts, setApi, layoutOptions, controlOptions, className, carouselClassName, contentClassName, itemClassName, itemInnerClassName, navButtonProps, prevButtonProps, nextButtonProps, }: ItemCarouselProps) { const controller = collectionController?.state; const resolvedItems = controller ? controller.filteredItems : items; const resolvedResultControls = resultControls ?? (controller ? controller.createResultControlsProps( collectionController?.resultControlsOptions, ) : undefined); const carouselHostRef = useRef(null); const responsiveWidth = useWindowWidth(true); const prefersReducedMotion = usePrefersReducedMotion(); const { showNavigation: resolvedShowNavigation, showPagination: resolvedShowPagination, navigationLayout: resolvedNavigationLayout, buttonPlacement: resolvedButtonPlacement, autoPlay: resolvedAutoPlay, loop: resolvedLoop, delay, baseSlides, baseSpaceBetween, breakpoints: resolvedBreakpoints, } = resolveCarouselOptions(layoutOptions, controlOptions); const [api, setInternalApi] = useState(null); const layoutConfig = useCarouselLayoutConfig({ breakpoints: resolvedBreakpoints, baseSlides, baseSpaceBetween, viewportWidth: responsiveWidth, }); const shouldAutoPlay = resolvedAutoPlay && !prefersReducedMotion && resolvedItems.length > 1; const shouldUseApi = shouldAutoPlay || resolvedShowPagination; const { snapCount, selectedIndex } = useCarouselSnapState(api, shouldUseApi); const slideBasis = useMemo(() => { const slides = Math.max(1, layoutConfig.slidesPerView); const space = layoutConfig.spaceBetween; const totalSpace = (slides - 1) * space; return `calc((100% - ${totalSpace}px) / ${slides})`; }, [layoutConfig.slidesPerView, layoutConfig.spaceBetween]); useCarouselAutoplay({ api, enabled: shouldAutoPlay, loop: resolvedLoop, delay, }); const padding = Math.max(0, layoutConfig.spaceBetween); const content = ( {resolvedItems.map((item, index) => ( 1 ? slideBasis : undefined, paddingLeft: 0, }} > {itemInnerClassName ? (

{renderItem(item, index)}

) : ( renderItem(item, index) )} ))} ); const headingLayout = heading?.layout; const isSplitLayout = headingLayout === "split-start" || headingLayout === "split-end"; const carouselBlock = ( { setInternalApi(nextApi ?? null); setApi?.(nextApi); }} style={{ paddingInlineStart: `${padding}px`, paddingInlineEnd: `${padding}px`, }} > {resolvedNavigationLayout === "inline" && resolvedShowNavigation ? ( ) : ( content )} {resolvedNavigationLayout === "overlay" && resolvedShowNavigation ? ( ) : null} ); const carouselBlockWithHost = (

{carouselBlock}

); return (

{heading && isSplitLayout ? ( {carouselBlockWithHost} ) : ( <> {heading ? : null} {resolvedResultControls ? ( ) : null} {carouselBlockWithHost} )} {resolvedShowPagination && snapCount > 1 ? ( ) : null}

); }

Item Carousel

Showcase

Item Carousel