60: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"] 61: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"] 62:T1fb2,"use client" import * as React from "react" import { 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 { cn } from "@/lib/utils" /* * A row of categories to start from: numbered tiles with a photo, a name * and how many items are in each, snapping as it scrolls. * * }]} /> * * Tiles sit 1px apart over a track in your border colour, so the rail * reads as one ruled object rather than floating cards. It is your shadcn * Carousel: drag, swipe, or the arrow keys once it has focus, and the * previous / next buttons are the Carousel's own — hidden, not just * disabled, when everything already fits. Tabbing to a tile that is out of * view brings it in. The arrows fade in and out (Motion; instant under * reduced motion). */ export interface CategoryRailItem { id: string label: string href: string /** Items in the category, shown as "24 items". */ count?: number /** Already rendered, so the block never assumes next/image. Fills a 4:5 box. */ image?: React.ReactNode } /** 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 const subscribeNothing = () => () => {} type CarouselProps = React.ComponentProps export interface CategoryRailProps extends Omit, "title"> { items: CategoryRailItem[] /** "Shop by category", by default. Pass null for no header. */ title?: React.ReactNode /** Shows "01", "02" on each tile. Defaults to true. */ numbered?: boolean /** "24 items" by default. */ formatCount?: (count: number) => string /** `undefined` follows the visitor's locale, once hydrated. */ locale?: string /** Embla options, passed to the Carousel. */ opts?: CarouselProps["opts"] loading?: boolean } export function CategoryRail({ items, title = "Shop by category", numbered = true, formatCount, locale: localeProp, opts, loading = false, className, ...props }: CategoryRailProps) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) const locale = localeProp ?? (hydrated ? undefined : "en-US") const reduce = useReducedMotion() const headingId = React.useId() const [api, setApi] = React.useState() const [overflowing, setOverflowing] = React.useState(false) React.useEffect(() => { if (!api) return const measure = () => setOverflowing(api.canScrollPrev() || api.canScrollNext()) measure() api.on("reInit", measure).on("resize", measure).on("select", measure) return () => { api.off("reInit", measure).off("resize", measure).off("select", measure) } }, [api]) const number = React.useMemo(() => new Intl.NumberFormat(locale), [locale]) const countText = (count: number) => formatCount ? formatCount(count) : `${number.format(count)} ${count === 1 ? "item" : "items"}` // A tile reached by Tab may be off to the side: bring it in, and undo the // browser's own attempt to scroll the clipped viewport. const reveal = (index: number) => (event: React.FocusEvent) => { const viewport = event.currentTarget.closest("[data-slot=carousel-content]") if (viewport) viewport.scrollLeft = 0 if (api && !api.slidesInView().includes(index)) api.scrollTo(index) } const tiles = loading ? Array.from({ length: 5 }, () => null) : items return (

{title !== null ? (

{title}

) : null}

{loading ? ( Loading categories ) : null} {/* The track shows through the 1px padding between tiles: one ruled object. */} {tiles.map((item, i) => ( {item ? ( {item.image ? ( {item.image} ) : null} {numbered ? ( {String(i + 1).padStart(2, "0")} ) : null} {item.label} {item.count !== undefined ? ( {countText(item.count)} ) : null} ) : ( )} ))}

) } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["carousel","skeleton"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"src/registry/ecomcn/category-rail/category-rail.tsx","content":"$62","type":"registry:component","target":"components/ecomcn/category-rail.tsx"}],"className":"h-[70svh] min-h-80"}]]}]