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:T586d,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion, type PanInfo } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface MobileFilterProduct { 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 Filters = { categories: string[]; colors: string[]; max: number; rating: number; inStock: boolean; sort: Sort }; export interface MobileFilterModalProps { title?: string; products?: MobileFilterProduct[]; colors?: Record; currency?: string; /** Called when the shopper taps Show results. */ onApply?: (filters: Filters) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", phone: "#0F0F0F", sheet: "#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", star: "#F5C451", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", ring: "rgba(255,255,255,0.55)", scrim: "rgba(0,0,0,0.55)", }, light: { bg: "#F4F4F4", phone: "#FFFFFF", sheet: "#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)", scrim: "rgba(0,0,0,0.3)", }, }; const L = "/demo/blocks/product-list"; const PRODUCTS: MobileFilterProduct[] = [ { 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 }, ]; 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 MAX = 200; const EMPTY: Filters = { categories: [], colors: [], max: MAX, rating: 0, inStock: false, sort: "featured" }; 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]); const apply = (list: MobileFilterProduct[], f: Filters) => list .filter((x) => (!f.categories.length || f.categories.includes(x.category)) && (!f.colors.length || f.colors.includes(x.color)) && (f.max >= MAX || x.price <= f.max) && x.rating >= f.rating && (!f.inStock || x.inStock)) .sort((a, b) => (f.sort === "price-asc" ? a.price - b.price : f.sort === "price-desc" ? b.price - a.price : f.sort === "rating" ? b.rating - a.rating : 0)); export function MobileFilterModal({ title = "Shop all", products = PRODUCTS, colors = COLORS, currency = "$", onApply, theme = "dark", className }: MobileFilterModalProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [applied, setApplied] = React.useState(EMPTY); const [draft, setDraft] = React.useState(EMPTY); const [open, setOpen] = React.useState(false); const [section, setSection] = React.useState("category"); const openerRef = React.useRef(null); const sheetRef = React.useRef(null); const categories = React.useMemo(() => [...new Set(products.map((x) => x.category))], [products]); const results = apply(products, applied); const preview = apply(products, draft).length; const activeCount = applied.categories.length + applied.colors.length + (applied.max < MAX ? 1 : 0) + (applied.rating ? 1 : 0) + (applied.inStock ? 1 : 0); const show = () => { setDraft(applied); setOpen(true); }; const close = React.useCallback(() => { setOpen(false); setTimeout(() => openerRef.current?.focus(), 0); }, []); const commit = () => { setApplied(draft); onApply?.(draft); close(); }; React.useEffect(() => { if (!open) return; const el = sheetRef.current; const t = setTimeout(() => el?.querySelector("[data-autofocus]")?.focus(), 60); const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") return close(); if (e.key !== "Tab" || !el) return; const f = [...el.querySelectorAll("button:not([disabled]), input")]; if (e.shiftKey && document.activeElement === f[0]) { e.preventDefault(); f[f.length - 1].focus(); } else if (!e.shiftKey && document.activeElement === f[f.length - 1]) { e.preventDefault(); f[0].focus(); } }; window.addEventListener("keydown", onKey); return () => { clearTimeout(t); window.removeEventListener("keydown", onKey); }; }, [open, close]); const onDragEnd = (_: unknown, info: PanInfo) => { if (info.offset.y > 120 || info.velocity.y > 600) close(); }; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const summary: Record = { sort: SORTS.find((s) => s.id === draft.sort)!.label, category: draft.categories.length ? draft.categories.join(", ") : "All", price: draft.max >= MAX ? "Any" : `Up to ${money(draft.max, currency)}`, color: draft.colors.length ? draft.colors.join(", ") : "Any", rating: draft.rating ? `${draft.rating}★ & up` : "Any", }; const group = (id: string, label: string, body: React.ReactNode) => { const isOpen = section === id; return (

{isOpen && (

{body}

)}

); }; const chip = (on: boolean) => ({ background: on ? p.buttonBg : "transparent", color: on ? p.buttonText : p.title, borderColor: on ? p.buttonBg : p.line }); return (

{/* Phone-width column (full width on phones) */}

{title}

{results.length} products

{results.map((x) => (

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

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

{x.name}

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

))}

{!results.length && (

Nothing matches. Loosen a filter.

)}

{/* Floating trigger */}

{/* Sheet */} {open && ( e.target === e.currentTarget && close()} > )}

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