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:T6387,"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)); } type Presence = "online" | "away" | "dnd"; type Appearance = "light" | "dark" | "system"; export interface AccountMenuDropdownProps { user?: { name: string; email: string; plan: string }; workspaces?: { id: string; name: string; color: string; role: string }[]; defaultOpen?: boolean; onAction?: (action: string) => void; onSignOut?: () => 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)", bar: "#0E0E0E", menu: "#161616", border: "rgba(255,255,255,0.09)", hover: "rgba(255,255,255,0.06)", input: "#0F0F0F", on: "#F5F4F1", onText: "#0A0A0A", red: "#F87171", ring: "rgba(245,244,241,0.6)", ghost: "rgba(255,255,255,0.035)" }, light: { bg: "#F4F4F1", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", bar: "#FFFFFF", menu: "#FFFFFF", border: "rgba(10,10,10,0.09)", hover: "rgba(10,10,10,0.05)", input: "#FAFAF8", on: "#0A0A0A", onText: "#FAFAF8", red: "#DC2626", ring: "rgba(10,10,10,0.5)", ghost: "rgba(10,10,10,0.04)" }, }; const PRESENCE: { id: Presence; label: string; color: string }[] = [ { id: "online", label: "Online", color: "#22C55E" }, { id: "away", label: "Away", color: "#F59E0B" }, { id: "dnd", label: "Do not disturb", color: "#EF4444" }, ]; const WORKSPACES = [ { id: "nexora", name: "Nexora", color: "#6366F1", role: "Owner" }, { id: "halden", name: "Halden Studio", color: "#10B981", role: "Admin" }, { id: "kestrel", name: "Kestrel Labs", color: "#F59E0B", role: "Member" }, ]; const EMOJI = ["🗓️", "🎧", "🌴", "🤒", "🚆"]; const ITEMS: { id: string; label: string; icon: string; kbd?: string }[] = [ { id: "profile", label: "Profile", icon: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 9a7 7 0 0 1 14 0", kbd: "⇧⌘P" }, { id: "settings", label: "Settings", icon: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7.4-3a7.4 7.4 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7.5 7.5 0 0 0-2-1.2L14.5 3h-4l-.4 2.6a7.5 7.5 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6a7.4 7.4 0 0 0 0 2.4l-2 1.6 2 3.4 2.4-1a7.5 7.5 0 0 0 2 1.2l.4 2.6h4l.4-2.6a7.5 7.5 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2Z", kbd: "⌘," }, { id: "billing", label: "Billing", icon: "M3 6h18v12H3zM3 10h18M7 15h3" }, { id: "shortcuts", label: "Keyboard shortcuts", icon: "M3 7h18v10H3zM7 11h.01M11 11h.01M15 11h.01M8 14h8", kbd: "?" }, { id: "help", label: "Help & feedback", icon: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm-2.5-11a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V15m0 2.5h.01" }, ]; export function AccountMenuDropdown({ user = { name: "Lena Brandt", email: "lena@nexora.io", plan: "Team" }, workspaces = WORKSPACES, defaultOpen = true, onAction, onSignOut, theme = "dark", className }: AccountMenuDropdownProps) { const reduce = !!useReducedMotion(); const uid = React.useId(); const [appearance, setAppearance] = React.useState(theme); const p = PALETTES[appearance === "system" ? theme : appearance]; const [open, setOpen] = React.useState(defaultOpen); const [presence, setPresence] = React.useState("online"); const [status, setStatus] = React.useState({ emoji: "🗓️", text: "In meetings until 3pm" }); const [editingStatus, setEditingStatus] = React.useState(false); const [draft, setDraft] = React.useState(status); const [ws, setWs] = React.useState(workspaces[0].id); const [wsOpen, setWsOpen] = React.useState(false); const [confirmOut, setConfirmOut] = React.useState(false); const [signedOut, setSignedOut] = React.useState(false); const [toast, setToast] = React.useState(null); const rootRef = React.useRef(null); const menuRef = React.useRef(null); const triggerRef = React.useRef(null); const typeahead = React.useRef({ text: "", at: 0 }); const focusOnce = React.useCallback((el: HTMLElement | null) => el?.focus({ preventScroll: true }), []); const current = workspaces.find((w) => w.id === ws)!; const pres = PRESENCE.find((x) => x.id === presence)!; React.useEffect(() => { if (!open) return; const onDown = (e: PointerEvent) => { if (rootRef.current?.contains(e.target as Node)) return; setOpen(false); setWsOpen(false); setEditingStatus(false); setConfirmOut(false); }; document.addEventListener("pointerdown", onDown); return () => document.removeEventListener("pointerdown", onDown); }, [open]); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2000); return () => clearTimeout(t); }, [toast]); function close(refocus = true) { setOpen(false); setWsOpen(false); setEditingStatus(false); setConfirmOut(false); if (refocus) requestAnimationFrame(() => triggerRef.current?.focus()); } const act = (id: string, label: string) => { onAction?.(id); setToast(`${label} opened`); close(); }; const onMenuKey = (e: React.KeyboardEvent) => { if ((e.target as HTMLElement).closest("input")) { if (e.key === "Escape") setEditingStatus(false); return; } const items = [...(menuRef.current?.querySelectorAll("[data-item]:not([disabled])") ?? [])]; const i = items.indexOf(document.activeElement as HTMLElement); if (e.key === "Escape") { e.preventDefault(); if (wsOpen) setWsOpen(false); else close(); } else if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); items[(i + (e.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]?.focus(); } else if (e.key === "Home" || e.key === "End") { e.preventDefault(); items[e.key === "Home" ? 0 : items.length - 1]?.focus(); } else if (e.key.length === 1 && /\S/.test(e.key)) { const t = typeahead.current; t.text = e.timeStamp - t.at < 600 ? t.text + e.key.toLowerCase() : e.key.toLowerCase(); t.at = e.timeStamp; const hit = items.find((el, n) => n > i - (t.text.length > 1 ? 1 : 0) && (el.textContent ?? "").trim().toLowerCase().startsWith(t.text)) ?? items.find((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(t.text)); hit?.focus(); } }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.menu } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const item = cn("flex w-full cursor-pointer items-center gap-2.5 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[13px] hover:bg-[var(--h)] focus-visible:bg-[var(--h)]", "outline-none"); const sep =

; const icon = (d: string) => ( ); const avatar = (size: number) => ( {user.name .split(" ") .map((s) => s[0]) .join("")} ); const wsList = (

{workspaces.map((w) => ( ))}

); return (

{/* App bar */}

{current.name[0]} {current.name}

{open && ( )}

{/* Page body placeholder */}

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