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:T51a4,"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 MiniCartProduct { id: string; name: string; price: number; image: string; /** Variant line, e.g. "Black · M". */ variant?: string; } export interface MiniCartItem extends MiniCartProduct { qty: number; } export interface MiniCartDropdownProps { /** Store name shown in the demo header. */ brand?: string; items?: MiniCartItem[]; /** Products in the strip under the header; adding one opens the cart. */ suggestions?: MiniCartProduct[]; /** Subtotal that unlocks free shipping; 0 hides the bar. */ freeShippingAt?: number; currency?: string; /** How long the cart stays open after an add, in ms (0 = until closed). */ autoCloseMs?: number; onChange?: (items: MiniCartItem[]) => void; onViewCart?: () => void; onCheckout?: (items: MiniCartItem[]) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", bar: "#0F0F0F", panel: "#161616", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", tile: "#F1F1F1", accent: "#7CDE6A", accentText: "#0B1A08", warn: "#F2B15A", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.08)", ring: "rgba(255,255,255,0.55)", flash: "rgba(124,222,106,0.12)", }, light: { bg: "#FFFFFF", bar: "#FAFAFA", panel: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", tile: "#F1F1F1", accent: "#2F9E44", accentText: "#FFFFFF", warn: "#B7791F", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", ring: "rgba(0,0,0,0.45)", flash: "rgba(47,158,68,0.1)", }, }; const L = "/demo/blocks/product-list"; const ITEMS: MiniCartItem[] = [ { id: "watch", name: "Minimal Watch", price: 79, image: "/demo/minimal-watch.webp", variant: "Black · 38 mm", qty: 1 }, { id: "notebook", name: "Dot Notebook", price: 24, image: "/demo/notebook.webp", variant: "A5 · Sand", qty: 2 }, ]; const SUGGESTIONS: MiniCartProduct[] = [ { id: "earbuds", name: "Wireless Earbuds", price: 129, image: "/demo/wireless-earbuds.webp", variant: "Graphite" }, { id: "bottle", name: "Insulated Bottle", price: 39, image: "/demo/insulated-water-bottle.webp", variant: "750 ml · Black" }, { id: "lamp", name: "Desk Lamp", price: 59, image: `${L}/lamp.webp`, variant: "Matte black" }, { id: "stand", name: "Laptop Stand", price: 49, image: "/demo/laptop-stand.webp", variant: "Silver" }, ]; const money = (n: number, c: string) => `${c}${n.toFixed(2)}`; export function MiniCartDropdown({ brand = "Northline", items: initial = ITEMS, suggestions = SUGGESTIONS, freeShippingAt = 150, currency = "$", autoCloseMs = 3500, onChange, onViewCart, onCheckout, theme = "dark", className }: MiniCartDropdownProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [items, setItems] = React.useState(initial); const [open, setOpen] = React.useState(false); const [flash, setFlash] = React.useState(null); const [removed, setRemoved] = React.useState<{ item: MiniCartItem; at: number } | null>(null); const [bump, setBump] = React.useState(0); const wrapRef = React.useRef(null); const btnRef = React.useRef(null); const panelRef = React.useRef(null); const closeTimer = React.useRef | null>(null); const hovering = React.useRef(false); const count = items.reduce((t, i) => t + i.qty, 0); const subtotal = items.reduce((t, i) => t + i.price * i.qty, 0); const toFree = Math.max(0, freeShippingAt - subtotal); const update = (next: MiniCartItem[]) => { setItems(next); onChange?.(next); }; const clearTimer = () => { if (closeTimer.current) clearTimeout(closeTimer.current); closeTimer.current = null; }; React.useEffect(() => clearTimer, []); // Close on Escape or a click outside; Escape hands focus back to the cart button. React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") { setOpen(false); btnRef.current?.focus(); } }; const onDown = (e: PointerEvent) => { if (!wrapRef.current?.contains(e.target as Node)) setOpen(false); }; window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onDown); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onDown); }; }, [open]); const add = (prod: MiniCartProduct) => { const hit = items.find((i) => i.id === prod.id); update(hit ? items.map((i) => (i.id === prod.id ? { ...i, qty: i.qty + 1 } : i)) : [{ ...prod, qty: 1 }, ...items]); setFlash(prod.id); setBump((b) => b + 1); setOpen(true); clearTimer(); if (autoCloseMs > 0) closeTimer.current = setTimeout(function tick() { // Stay open while the pointer is over the cart. if (hovering.current) closeTimer.current = setTimeout(tick, 600); else setOpen(false); }, autoCloseMs); setTimeout(() => setFlash((f) => (f === prod.id ? null : f)), 1600); }; const setQty = (id: string, qty: number) => { if (qty <= 0) { const at = items.findIndex((i) => i.id === id); setRemoved({ item: items[at], at }); update(items.filter((i) => i.id !== id)); return; } update(items.map((i) => (i.id === id ? { ...i, qty: Math.min(9, qty) } : i))); }; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; return (

{/* Header */}

{brand}

{ hovering.current = true; }} onMouseLeave={() => { hovering.current = false; }} > {open && ( )}

{/* Picks */}

Picked for you

{/* eslint-disable-next-line @next/next/no-img-element -- plain img keeps the block framework-agnostic */} {s.name} {money(s.price, currency)}

); } 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"}]]}]}],["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/mini-cart-dropdown/mini-cart-dropdown.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]