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:T5c43,"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 Contact { id: string; name: string; title: string; company: string; email: string; phone: string; location: string; localTime: string; presence: "online" | "away" | "offline"; color: string; favorite?: boolean; lastContact?: string; } export interface ContactsQuickListProps { contacts?: Contact[]; onMessage?: (c: Contact) => void; onCall?: (c: Contact) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", raised: "#181818", well: "rgba(255,255,255,0.035)", hover: "rgba(255,255,255,0.05)", sel: "rgba(255,255,255,0.08)", border: "rgba(255,255,255,0.08)", input: "#0D0D0D", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", amber: "#FBBF24", star: "#FBBF24", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.42)", card: "#FFFFFF", raised: "#FFFFFF", well: "rgba(10,10,10,0.03)", hover: "rgba(10,10,10,0.04)", sel: "rgba(10,10,10,0.07)", border: "rgba(10,10,10,0.09)", input: "#FAFAF8", on: "#0A0A0A", onText: "#FAFAF8", green: "#16A34A", amber: "#D97706", star: "#D97706", ring: "rgba(10,10,10,0.5)" }, }; const C = (id: string, name: string, title: string, company: string, location: string, localTime: string, presence: Contact["presence"], color: string, favorite = false, lastContact = "") => ({ id, name, title, company, location, localTime, presence, color, favorite, lastContact, email: `${name.split(" ")[0].toLowerCase()}@${company.toLowerCase().replace(/[^a-z]/g, "")}.com`, phone: (() => { const h = [...name].reduce((a, ch) => (a * 31 + ch.charCodeAt(0)) % 99991, 7); return `+49 30 ${String(2000 + (h % 8000)).padStart(4, "0")} ${String(1000 + ((h * 7) % 9000)).padStart(4, "0")}`; })(), }); const CONTACTS: Contact[] = [ C("c1", "Amara Okafor", "Head of Design", "Halden", "Berlin", "09:42", "online", "#F472B6", true, "Today"), C("c2", "Ben Castillo", "Account Executive", "Northwind", "Madrid", "09:42", "away", "#60A5FA", false, "Mon"), C("c3", "Chloé Martin", "Product Manager", "Lumio", "Paris", "09:42", "online", "#A78BFA", true, "Yesterday"), C("c4", "Daniel Sato", "Engineering Lead", "Kiteworks", "Tokyo", "17:42", "offline", "#34D399", false, "Oct 28"), C("c5", "Elif Demir", "Founder", "Orbitly", "Istanbul", "11:42", "online", "#FB923C", true, "Today"), C("c6", "Felix Wagner", "CFO", "Halden", "Munich", "09:42", "offline", "#FBBF24", false, "Oct 21"), C("c7", "Grace Liu", "Data Scientist", "Pellucid", "Singapore", "16:42", "away", "#22D3EE", false, "Oct 30"), C("c8", "Hugo Bernard", "Sales Director", "Lumio", "Lyon", "09:42", "online", "#F87171", false, "Tue"), C("c9", "Isla Murphy", "Customer Success", "Northwind", "Dublin", "08:42", "online", "#4ADE80", false, "Today"), C("c10", "Jonas Berg", "Staff Engineer", "Kiteworks", "Oslo", "09:42", "offline", "#818CF8", false, "Sep 30"), C("c11", "Keiko Tanaka", "Brand Designer", "Orbitly", "Osaka", "17:42", "away", "#E879F9", false, "Oct 12"), C("c12", "Lucas Rossi", "Operations", "Pellucid", "Milan", "09:42", "online", "#2DD4BF", false, "Wed"), C("c13", "Maya Patel", "VP Marketing", "Halden", "London", "08:42", "online", "#FDBA74", true, "Yesterday"), C("c14", "Noah Fischer", "Recruiter", "Lumio", "Zurich", "09:42", "offline", "#93C5FD", false, "Oct 2"), C("c15", "Olivia Brooks", "Legal Counsel", "Northwind", "New York", "03:42", "offline", "#C4B5FD", false, "Oct 25"), C("c16", "Priya Nair", "Solutions Architect", "Kiteworks", "Bangalore", "14:12", "online", "#86EFAC", false, "Thu"), ]; const initials = (n: string) => n .split(" ") .map((w) => w[0]) .join("") .slice(0, 2); const PATHS = { msg: "M4 5h16v11H8l-4 4z", call: "M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2", mail: "M3 6h18v12H3zM3 7l9 6 9-6", star: "m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.5 2.9 1-6.1L3.2 9.5l6.1-.9z", search: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM21 21l-4.3-4.3", copy: "M9 9h11v11H9zM5 15H4V4h11v1", back: "M15 18 9 12l6-6", }; function Icon({ d, size = 15, fill = false }: { d: string; size?: number; fill?: boolean }) { return ( ); } export function ContactsQuickList({ contacts: initial = CONTACTS, onMessage, onCall, theme = "dark", className }: ContactsQuickListProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const [contacts, setContacts] = React.useState(initial); const [query, setQuery] = React.useState(""); const [filter, setFilter] = React.useState<"all" | "favorites" | "online">("all"); const [selected, setSelected] = React.useState("c3"); const [mobileDetail, setMobileDetail] = React.useState(false); const [copied, setCopied] = React.useState(null); const [toast, setToast] = React.useState(null); const listRef = React.useRef(null); React.useEffect(() => { if (!copied) return; const t = setTimeout(() => setCopied(null), 1400); return () => clearTimeout(t); }, [copied]); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2000); return () => clearTimeout(t); }, [toast]); const q = query.trim().toLowerCase(); const shown = contacts .filter((c) => (filter === "favorites" ? c.favorite : filter === "online" ? c.presence === "online" : true)) .filter((c) => !q || `${c.name} ${c.company} ${c.title}`.toLowerCase().includes(q)) .sort((a, b) => a.name.localeCompare(b.name)); const groups = shown.reduce>((acc, c) => { (acc[c.name[0].toUpperCase()] ??= []).push(c); return acc; }, {}); const letters = Object.keys(groups); const favorites = contacts.filter((c) => c.favorite); const current = contacts.find((c) => c.id === selected) ?? null; const onlineCount = contacts.filter((c) => c.presence === "online").length; const jump = (l: string) => { const box = listRef.current; const el = box?.querySelector(`[data-letter="${l}"]`); if (box && el) box.scrollTop = el.offsetTop - box.offsetTop; }; const toggleFav = (id: string) => setContacts((list) => list.map((c) => (c.id === id ? { ...c, favorite: !c.favorite } : c))); const copy = (text: string, key: string) => { navigator.clipboard?.writeText(text).catch(() => {}); setCopied(key); }; const pick = (id: string) => { setSelected(id); setMobileDetail(true); }; const onKeyList = (e: React.KeyboardEvent) => { if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return; e.preventDefault(); const i = shown.findIndex((c) => c.id === selected); const next = shown[Math.min(shown.length - 1, Math.max(0, i + (e.key === "ArrowDown" ? 1 : -1)))]; if (!next) return; setSelected(next.id); listRef.current?.querySelector(`[data-id="${next.id}"]`)?.focus(); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const dot = (c: Contact) => (c.presence === "online" ? p.green : c.presence === "away" ? p.amber : p.faint); const avatar = (c: Contact, size: number) => ( ); const iconBtn = cn("grid h-8 w-8 shrink-0 cursor-pointer place-items-center rounded-lg border-0 bg-transparent transition-colors", focus); return (

{/* List */}

Contacts

{onlineCount} online

setQuery(e.target.value)} placeholder="Search name or company" aria-label="Search contacts" className="h-full min-w-0 flex-1 border-0 bg-transparent text-[13px] outline-none" style={{ color: p.text }} /> {query && ( )}

{(["all", "favorites", "online"] as const).map((f) => ( ))}

{filter === "all" && !q && favorites.length > 0 && (

Favorites

{favorites.map((c) => ( ))}

)}

{letters.length > 4 && ( )}

{/* Detail */}

{current ? (

{avatar(current, 76)}

{current.name}

{current.title} at {current.company}

{current.presence} · {current.localTime} local time in {current.location}

{[ { k: "msg", label: "Message", d: PATHS.msg, run: () => (onMessage?.(current), setToast(`Message to ${current.name.split(" ")[0]}`)) }, { k: "call", label: "Call", d: PATHS.call, run: () => (onCall?.(current), setToast(`Calling ${current.name.split(" ")[0]}…`)) }, { k: "mail", label: "Email", d: PATHS.mail, run: () => setToast(`Draft to ${current.email}`) }, ].map((a) => ( ))}

{row.label}: {row.value}

) : (

Select a contact

)}

{toast && ( {toast} )}

); } export default ContactsQuickList; 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/contacts-quick-list/contacts-quick-list.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]