62: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"] 63: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"] 64:T380b,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface FeaturedPanel { id: string; name: string; headline: string; tagline: string; image: string; from: number; count: number; href?: string; /** object-position for the photo, e.g. "60% 50%". */ focus?: string; } export interface FeaturedCategoriesBannerProps { kicker?: string; title?: string; panels?: FeaturedPanel[]; /** Milliseconds per panel. Set to 0 to turn autoplay off. */ interval?: number; currency?: string; onShop?: (panel: FeaturedPanel) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", ring: "rgba(255,255,255,0.55)" }, light: { bg: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", ring: "rgba(0,0,0,0.45)" }, }; // Panels are photo tiles: #F1F1F1 with dark ink in both themes. const TILE = { bg: "#F1F1F1", ink: "#111111", soft: "rgba(17,17,17,0.6)", faint: "rgba(17,17,17,0.12)", accent: "#7CDE6A" }; const PANELS: FeaturedPanel[] = [ { id: "audio", name: "Audio", headline: "Hear the detail.", tagline: "Earbuds and headphones tuned flat, with cases that close with a click.", image: "/demo/wireless-earbuds.webp", from: 129, count: 12, focus: "55% 50%" }, { id: "watches", name: "Watches", headline: "Time, quietly.", tagline: "Matte cases, no logos on the dial, straps that soften with wear.", image: "/demo/minimal-watch.webp", from: 79, count: 8, focus: "50% 50%" }, { id: "desk", name: "Desk", headline: "Raise your setup.", tagline: "Aluminium stands, dot-grid notebooks and lamps that stay out of the way.", image: "/demo/laptop-stand.webp", from: 24, count: 21, focus: "50% 55%" }, { id: "running", name: "Running", headline: "Miles feel shorter.", tagline: "Light trainers with a rocker sole for easy days and long ones.", image: "/demo/running-shoes.webp", from: 99, count: 6, focus: "45% 50%" }, ]; export function FeaturedCategoriesBanner({ kicker = "Featured", title = "This season’s edit", panels = PANELS, interval = 5000, currency = "$", onShop, theme = "dark", className }: FeaturedCategoriesBannerProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [active, setActive] = React.useState(0); const [hovering, setHovering] = React.useState(false); const [focusWithin, setFocusWithin] = React.useState(false); const [stopped, setStopped] = React.useState(false); const [cycle, setCycle] = React.useState(0); const hoverTimer = React.useRef | null>(null); React.useEffect(() => () => void (hoverTimer.current && clearTimeout(hoverTimer.current)), []); const autoplay = interval > 0 && !reduce && !stopped; const paused = hovering || focusWithin; const go = (i: number) => { setActive((i + panels.length) % panels.length); setCycle((c) => c + 1); }; // A short delay so sweeping the mouse across the row doesn't open every panel on the way. const hoverOpen = (i: number) => { if (hoverTimer.current) clearTimeout(hoverTimer.current); hoverTimer.current = setTimeout(() => { if (i !== active) go(i); }, 140); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.bg } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const pad = (n: number) => String(n + 1).padStart(2, "0"); return (

{kicker}

{title}

{interval > 0 && !reduce && ( )}

setHovering(true)} onMouseLeave={() => { setHovering(false); if (hoverTimer.current) clearTimeout(hoverTimer.current); }} onFocus={() => setFocusWithin(true)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setFocusWithin(false); }} > {panels.map((x, i) => { const on = i === active; return ( hoverOpen(i)} > {/* Paper-coloured wash behind the copy so the headline never sits on the product */} {/* Closed rows on narrow screens: a side wash so the label stays readable */} {!on && } {/* Header button: opens the panel */}

{/* Open content */} {/* Autoplay progress */} {on && autoplay && ( ); })}

{panels[active]?.name}: {panels[active]?.headline}

); } 61:["$","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/featured-categories-banner/featured-categories-banner.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]