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:T5f6c,"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 FilterBarProduct { id: string; name: string; price: number; was?: number; image: string; category: string; color: string; rating: number; inStock: boolean; } type Sort = "featured" | "price-asc" | "price-desc" | "rating"; type MenuId = "category" | "price" | "color" | "rating" | "sort" | null; export interface HorizontalFilterBarProps { title?: string; products?: FilterBarProduct[]; /** Swatch colours by name. */ colors?: Record; currency?: string; onFiltersChange?: (filters: { categories: string[]; colors: string[]; min: number; max: number; rating: number; sale: boolean; inStock: boolean; sort: Sort }) => void; onAdd?: (product: FilterBarProduct) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", bar: "#121212", menu: "#181818", 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", star: "#F5C451", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", ring: "rgba(255,255,255,0.55)", }, light: { bg: "#FFFFFF", bar: "#F7F7F7", menu: "#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", star: "#E0A100", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", ring: "rgba(0,0,0,0.45)", }, }; const L = "/demo/blocks/product-list"; const PRODUCTS: FilterBarProduct[] = [ { id: "earbuds", name: "Wireless Earbuds", price: 129, image: "/demo/wireless-earbuds.webp", category: "Audio", color: "Black", rating: 4.7, inStock: true }, { id: "headphones", name: "Studio Headphones", price: 199, image: `${L}/headphones.webp`, category: "Audio", color: "Grey", rating: 4.6, inStock: false }, { id: "watch", name: "Minimal Watch", price: 79, was: 129, image: "/demo/minimal-watch.webp", category: "Wearables", color: "Black", rating: 4.8, inStock: true }, { id: "shoes", name: "Running Shoes", price: 99, was: 149, image: "/demo/running-shoes.webp", category: "Outdoor", color: "Grey", rating: 4.5, inStock: true }, { id: "bottle", name: "Insulated Bottle", price: 39, image: "/demo/insulated-water-bottle.webp", category: "Outdoor", color: "Black", rating: 4.9, inStock: true }, { id: "stand", name: "Laptop Stand", price: 49, was: 89, image: "/demo/laptop-stand.webp", category: "Desk", color: "Silver", rating: 4.6, inStock: true }, { id: "lamp", name: "Desk Lamp", price: 59, image: `${L}/lamp.webp`, category: "Desk", color: "Black", rating: 4.4, inStock: true }, { id: "notebook", name: "Dot Notebook", price: 24, image: "/demo/notebook.webp", category: "Desk", color: "Sand", rating: 4.8, inStock: true }, { id: "backpack", name: "Day Backpack", price: 89, image: `${L}/backpack.webp`, category: "Outdoor", color: "Grey", rating: 4.7, inStock: false }, ]; const COLORS: Record = { Black: "#1E1E1E", Grey: "#9A9A9A", Silver: "#D6D6D6", Sand: "#D8C8AD" }; const SORTS: { id: Sort; label: string }[] = [ { id: "featured", label: "Featured" }, { id: "price-asc", label: "Price: low to high" }, { id: "price-desc", label: "Price: high to low" }, { id: "rating", label: "Top rated" }, ]; const PRICE_MAX = 200; const money = (n: number, c: string) => `${c}${n % 1 ? n.toFixed(2) : n}`; const toggle = (l: T[], v: T) => (l.includes(v) ? l.filter((x) => x !== v) : [...l, v]); export function HorizontalFilterBar({ title = "Shop all", products = PRODUCTS, colors = COLORS, currency = "$", onFiltersChange, onAdd, theme = "dark", className }: HorizontalFilterBarProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [cats, setCats] = React.useState([]); const [cols, setCols] = React.useState([]); const [range, setRange] = React.useState<[number, number]>([0, PRICE_MAX]); const [rating, setRating] = React.useState(0); const [sale, setSale] = React.useState(false); const [inStock, setInStock] = React.useState(false); const [sort, setSort] = React.useState("featured"); const [menu, setMenu] = React.useState(null); const [added, setAdded] = React.useState(null); const barRef = React.useRef(null); const categories = React.useMemo(() => [...new Set(products.map((x) => x.category))], [products]); React.useEffect(() => { onFiltersChange?.({ categories: cats, colors: cols, min: range[0], max: range[1], rating, sale, inStock, sort }); }, [cats, cols, range, rating, sale, inStock, sort, onFiltersChange]); // Close the open menu on Escape or a click outside the bar. React.useEffect(() => { if (!menu) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && setMenu(null); const onDown = (e: PointerEvent) => !barRef.current?.contains(e.target as Node) && setMenu(null); window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onDown); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onDown); }; }, [menu]); const pass = (x: FilterBarProduct, skip?: string) => (skip === "cat" || !cats.length || cats.includes(x.category)) && (skip === "col" || !cols.length || cols.includes(x.color)) && x.price >= range[0] && (range[1] >= PRICE_MAX || x.price <= range[1]) && x.rating >= rating && (!sale || !!x.was) && (!inStock || x.inStock); const list = products.filter((x) => pass(x)).sort((a, b) => (sort === "price-asc" ? a.price - b.price : sort === "price-desc" ? b.price - a.price : sort === "rating" ? b.rating - a.rating : 0)); const priceSet = range[0] > 0 || range[1] < PRICE_MAX; const chips = [ ...cats.map((c) => ({ k: `c-${c}`, label: c, clear: () => setCats((v) => v.filter((x) => x !== c)) })), ...cols.map((c) => ({ k: `k-${c}`, label: c, clear: () => setCols((v) => v.filter((x) => x !== c)) })), ...(priceSet ? [{ k: "price", label: `${money(range[0], currency)}–${range[1] >= PRICE_MAX ? `${money(PRICE_MAX, currency)}+` : money(range[1], currency)}`, clear: () => setRange([0, PRICE_MAX]) }] : []), ...(rating ? [{ k: "rating", label: `${rating}★ & up`, clear: () => setRating(0) }] : []), ...(sale ? [{ k: "sale", label: "On sale", clear: () => setSale(false) }] : []), ...(inStock ? [{ k: "stock", label: "In stock", clear: () => setInStock(false) }] : []), ]; const clearAll = () => { setCats([]); setCols([]); setRange([0, PRICE_MAX]); setRating(0); setSale(false); setInStock(false); }; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const pill = cn("flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-3.5 text-[13px] font-medium whitespace-nowrap transition-colors", focus); const pillStyle = (on: boolean) => (on ? { background: p.buttonBg, color: p.buttonText, borderColor: p.buttonBg } : { background: "transparent", color: p.title, borderColor: p.line }); const menuBtn = (id: Exclude, label: string, count: number) => ( ); const panel = (id: Exclude, children: React.ReactNode, align: "left" | "right" = "left") => ( {menu === id && ( )} ); return (

{title}

{/* Bar */}

{panel( "sort", , "right", )}

{chips.length > 0 && (

{chips.map((c) => ( {c.label} ))}

)}

{list.length} of {products.length} products

{list.length ? (

{list.map((x) => (

{/* eslint-disable-next-line @next/next/no-img-element -- plain img keeps the block framework-agnostic */}

{x.was && ( −{Math.round((1 - x.price / x.was) * 100)}% )} {!x.inStock && Sold out} {x.inStock && ( )}

{x.name}

{money(x.price, currency)} {x.was && ( {money(x.was, currency)} )} ★ {x.rating}

))}

) : (

No products match

)}

); } 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/horizontal-filter-bar/horizontal-filter-bar.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]