61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T37a0,"use client" import * as React from "react" import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi, } from "@/components/ui/carousel" import { Skeleton } from "@/components/ui/skeleton" import { ProductCard, type ProductCardProduct, type ProductCardProps, } from "@/components/ecomcn/product-card" import { cn } from "@/lib/utils" /* * A "pairs well with" rail under the product: the exact product card, never * a second, smaller one, on your shadcn Carousel. * * * * or composed * title, previous / next * } /> * * * * The whole section is the Carousel, so the header's previous and next * buttons are the Carousel's own. The rail sits below the fold, so nothing in it loads with the page: the * cards — and their images — mount when the rail comes within a screen of * the viewport, fading in over skeletons of exactly their shape. A thin rule * under the rail shows how far along it is and grows as it scrolls. * * Everything the shadcn Carousel takes passes through: `opts` (Embla's * options — loop, dragFree, slidesToScroll…), `plugins` (autoplay, wheel * gestures), `setApi`, and `orientation`. Arrow keys move the rail when it * has focus, as on the Carousel. */ /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const type CarouselProps = React.ComponentProps /* ─── context ──────────────────────────────────────────────────────────── */ export interface RelatedProductsContextValue { products: ProductCardProduct[] title: React.ReactNode headingId: string /** True once the rail is near the viewport: cards and images are mounted. */ inView: boolean loading: boolean /** How far the rail has scrolled, 0 to 1, and how much of it is on screen. */ progress: number visibleShare: number /** The rail's Embla API, once the carousel has mounted. */ api: CarouselApi | undefined orientation: "horizontal" | "vertical" currency?: string locale?: string onQuickAdd?: (product: ProductCardProduct, colorIndex: number) => void | Promise cardProps?: Omit } const RelatedProductsContext = React.createContext(null) export function useRelatedProducts() { const context = React.useContext(RelatedProductsContext) if (!context) { throw new Error("useRelatedProducts must be used within .") } return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface RelatedProductsProps extends Omit, "title"> { products: ProductCardProduct[] title?: React.ReactNode currency?: string locale?: string onQuickAdd?: (product: ProductCardProduct, colorIndex: number) => void | Promise /** * Passed to every card: `onWishlistChange` for the heart, `showColors={false}` * for products without colours, `density`. */ cardProps?: Omit /** Mount the cards with the page instead of near the viewport — above the fold. */ eager?: boolean /** How far ahead of the viewport the cards mount. Defaults to one screen. */ rootMargin?: string /** Placeholders while the products are being fetched. */ loading?: boolean /** * Embla's options, over the rail's own (`align: "start"`, * `containScroll: "trimSnaps"`): `loop`, `dragFree`, `slidesToScroll`… */ opts?: CarouselProps["opts"] /** Embla plugins — `Autoplay()` from embla-carousel-autoplay, say. */ plugins?: CarouselProps["plugins"] /** The Embla API, for your own controls. */ setApi?: CarouselProps["setApi"] /** A vertical rail needs a height: set one on RelatedProductsRail. */ orientation?: "horizontal" | "vertical" } export function RelatedProducts({ products, title = "Pairs well with", currency, locale, onQuickAdd, cardProps, eager = false, rootMargin = "100% 0px", loading = false, opts, plugins, setApi: setApiProp, orientation = "horizontal", className, children, ...props }: RelatedProductsProps) { const headingId = React.useId() const section = React.useRef(null) const [near, setNear] = React.useState(false) const [api, setApiState] = React.useState() const setApi = React.useCallback( (next: CarouselApi) => { setApiState(next) setApiProp?.(next) }, [setApiProp] ) const [scroll, setScroll] = React.useState({ progress: 0, visibleShare: 1 }) React.useEffect(() => { if (eager || near) return const node = section.current if (!node) return const observer = new IntersectionObserver( (entries) => { if (entries.some((e) => e.isIntersecting)) { setNear(true) observer.disconnect() } }, { rootMargin } ) observer.observe(node) return () => observer.disconnect() }, [eager, near, rootMargin]) React.useEffect(() => { if (!api) return const update = () => { // The share of the track on screen, as a scrollbar thumb measures it: // the viewport's width over the slides' full run. Layout offsets, not // scrollWidth — Embla moves the track with a transform. const slides = api.slideNodes() const first = slides[0] const last = slides[slides.length - 1] const vertical = orientation === "vertical" const track = first && last ? vertical ? last.offsetTop + last.offsetHeight - first.offsetTop : last.offsetLeft + last.offsetWidth - first.offsetLeft : 0 const view = vertical ? api.rootNode().clientHeight : api.rootNode().clientWidth setScroll({ progress: Math.min(1, Math.max(0, api.scrollProgress())), visibleShare: track > 0 ? Math.min(1, view / track) : 1, }) } update() api.on("scroll", update).on("reInit", update).on("resize", update) return () => { api.off("scroll", update).off("reInit", update).off("resize", update) } }, [api, orientation]) const context = React.useMemo( () => ({ products, title, headingId, inView: eager || near, loading, progress: scroll.progress, visibleShare: scroll.visibleShare, api, orientation, currency, locale, onQuickAdd, cardProps, }), [products, title, headingId, eager, near, loading, scroll, api, orientation, currency, locale, onQuickAdd, cardProps] ) // Nothing related: the section goes, rather than an empty rail. if (!loading && products.length === 0) return null return (

{/* The whole section is the carousel, so the header can hold its previous and next buttons. Snaps a card at a time. */} {children ?? ( <> )}

) } /* ─── parts ────────────────────────────────────────────────────────────── */ /** The Carousel's own buttons, squared off to sit in the header's rule. */ const ARROW = "static size-9 translate-x-0 translate-y-0 rounded-none shadow-none" /** The title, ruled, with the Carousel's previous and next buttons on the right. */ export function RelatedProductsHeader({ className, ...props }: React.HTMLAttributes) { const { title, headingId, products, loading, inView } = useRelatedProducts() // Spread only when there is nothing to scroll yet: passing `disabled` // at all would override the Carousel's own can-scroll state. const idle = loading || !inView || products.length < 2 ? { disabled: true } : {} return (

{title}

{/* The Carousel turns these a quarter for a vertical rail. */}

) } export interface RelatedProductsRailProps extends React.HTMLAttributes { /** Your own card for each product — still the product card, composed your way. */ renderCard?: (product: ProductCardProduct) => React.ReactNode /** Placeholders shown while loading, or before the rail is near. Defaults to 4. */ skeletonCount?: number } /** * The cards: drag, swipe, or the arrow keys once the rail has focus. Two and * a bit cards on a phone — the cut-off one says there are more — four on a * desktop. */ export function RelatedProductsRail({ renderCard, skeletonCount = 4, className, ...props }: RelatedProductsRailProps) { const { products, inView, loading, currency, locale, onQuickAdd, cardProps, orientation } = useRelatedProducts() const vertical = orientation === "vertical" const reduce = useReducedMotion() const ready = inView && !loading const slides = ready ? products : Array.from({ length: skeletonCount }, () => null) return (

[data-slot=carousel-content]]:h-full" : "-ml-1", className )} {...props} > {slides.map((product, i) => ( {product ? ( {renderCard ? ( renderCard(product) ) : ( )} ) : ( )} ))}

) } /** Same box as the product card — image ratio and text bars — so nothing jumps. */ function CardSkeleton() { return (

) } /** * A hairline under the rail with a heavier segment for the part on screen. * It is as long as the share of cards in view and slides as the rail * scrolls — a scrollbar's information, without a scrollbar. */ export function RelatedProductsProgress({ className, ...props }: React.HTMLAttributes) { const { progress, visibleShare, products, inView } = useRelatedProducts() const reduce = useReducedMotion() if (!inView || products.length < 2 || visibleShare >= 1) return null const width = Math.max(0.12, visibleShare) return (

) } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["carousel","skeleton","@ecomcn/product-card"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/related-products/related-products.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/related-products.tsx"}],"className":"h-[70svh] min-h-80"}]]}]