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:T6030,"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 Role = "Admin" | "Member" | "Viewer"; interface Invite { email: string; role: Role; } export interface InviteMembersModalProps { workspace?: string; members?: string[]; seats?: { used: number; total: number }; defaultOpen?: boolean; onInvite?: (invites: Invite[], message: string) => Promise | 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)", panel: "#141414", border: "rgba(255,255,255,0.09)", input: "#0E0E0E", chip: "rgba(255,255,255,0.07)", track: "rgba(255,255,255,0.08)", on: "#F5F4F1", onText: "#0A0A0A", accent: "#60A5FA", green: "#4ADE80", amber: "#FBBF24", red: "#F87171", ring: "rgba(245,244,241,0.6)", scrim: "rgba(0,0,0,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.42)", panel: "#FFFFFF", border: "rgba(10,10,10,0.1)", input: "#FAFAF8", chip: "rgba(10,10,10,0.06)", track: "rgba(10,10,10,0.07)", on: "#0A0A0A", onText: "#FAFAF8", accent: "#2563EB", green: "#15803D", amber: "#B45309", red: "#DC2626", ring: "rgba(10,10,10,0.5)", scrim: "rgba(10,10,10,0.3)", ghost: "rgba(10,10,10,0.04)" }, }; const ROLES: { id: Role; hint: string }[] = [ { id: "Admin", hint: "Manage members, billing and settings" }, { id: "Member", hint: "Create and edit projects" }, { id: "Viewer", hint: "View and comment, no editing" }, ]; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const MEMBERS = ["lena@nexora.io", "daniel@nexora.io", "mia@nexora.io", "tomas@nexora.io", "aiko@nexora.io", "jonas@nexora.io"]; export function InviteMembersModal({ workspace = "Nexora", members = MEMBERS, seats = { used: 6, total: 10 }, defaultOpen = true, onInvite, theme = "dark", className }: InviteMembersModalProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [open, setOpen] = React.useState(defaultOpen); const [invites, setInvites] = React.useState([{ email: "priya@atlasfreight.com", role: "Member" }]); const [text, setText] = React.useState(""); const [role, setRole] = React.useState("Member"); const [message, setMessage] = React.useState(""); const [showMsg, setShowMsg] = React.useState(false); const [notice, setNotice] = React.useState(null); const [status, setStatus] = React.useState<"idle" | "sending" | "sent">("idle"); const [sent, setSent] = React.useState([]); const [linkOn, setLinkOn] = React.useState(false); const [linkId, setLinkId] = React.useState("k7f2q9"); const [expiry, setExpiry] = React.useState("7 days"); const [copied, setCopied] = React.useState(false); const [pending, setPending] = React.useState([{ email: "grace@northpine.co", role: "Viewer" }]); const inputRef = React.useRef(null); const timer = React.useRef | null>(null); const counter = React.useRef(0); React.useEffect(() => { if (!notice && !copied) return; const t = setTimeout(() => { setNotice(null); setCopied(false); }, 2400); return () => clearTimeout(t); }, [notice, copied]); React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false); document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open]); React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const addFrom = (raw: string) => { const parts = raw.split(/[\s,;]+/).map((s) => s.trim().toLowerCase()).filter(Boolean); if (!parts.length) return; const skipped: string[] = []; const next = [...invites]; for (const e of parts) { if (members.includes(e)) skipped.push(`${e} is already a member`); else if (next.some((x) => x.email === e) || pending.some((x) => x.email === e)) skipped.push(`${e} is already invited`); else next.push({ email: e, role }); } setInvites(next); if (skipped.length) setNotice(skipped[0] + (skipped.length > 1 ? ` (+${skipped.length - 1} more)` : "")); setText(""); }; const valid = invites.filter((i) => EMAIL.test(i.email)); const invalid = invites.length - valid.length; const after = seats.used + pending.length + valid.length; const over = after > seats.total; const send = () => { if (!valid.length || invalid || over || status !== "idle") return; setStatus("sending"); const batch = valid; const done = () => { setSent(batch); setPending((p0) => [...batch, ...p0]); setInvites([]); setStatus("sent"); }; const r = onInvite?.(batch, message); if (r instanceof Promise) r.then(done, () => setStatus("idle")); else timer.current = setTimeout(done, reduce ? 0 : 900); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.panel } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const btn = cn("flex h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3.5 text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-40", focus); return (

{/* Members page behind */}

Members

{seats.used} of {seats.total} seats used · {pending.length} pending

{m.slice(0, 2)} {m} = 4 ? p.amber : p.faint }}> {i >= 4 ? "Pending" : i === 0 ? "Owner" : "Member"}

{open && ( e.target === e.currentTarget && setOpen(false)}>