{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "invite-teammates", "type": "registry:component", "title": "Invite Teammates", "description": "Paste a whole list of emails and they sort themselves into chips, each with its own role, with typos caught before anyone gets a broken invite.", "categories": [ "component", "Forms" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "utils", "https://coss.com/ui/r/button.json", "https://coss.com/ui/r/menu.json", "https://coss.com/ui/r/select.json", "https://coss.com/ui/r/switch.json" ], "files": [ { "path": "registry/devl/invite-teammates.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { CheckIcon, ChevronDownIcon, CircleAlertIcon, CopyIcon, LinkIcon, XIcon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type ClipboardEvent,\n type KeyboardEvent,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from \"@/components/ui/menu\";\nimport { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { cn } from \"@/lib/utils\";\n\nexport type InviteRole = \"admin\" | \"member\" | \"viewer\";\n\nexport interface Invite {\n email: string;\n role: InviteRole;\n}\n\nexport interface WorkspaceMember {\n name: string;\n email: string;\n role: InviteRole | \"owner\";\n}\n\nexport interface InviteTeammatesProps {\n workspace: string;\n description?: string;\n members?: WorkspaceMember[];\n defaultInvites?: Invite[];\n defaultRole?: InviteRole;\n inviteLink?: string;\n defaultLinkEnabled?: boolean;\n onSend?: (invites: Invite[]) => void | Promise;\n onLinkToggle?: (enabled: boolean) => void;\n onCancel?: () => void;\n className?: string;\n}\n\nconst roles: { value: InviteRole; label: string; hint: string }[] = [\n { value: \"admin\", label: \"Admin\", hint: \"Manage billing and people\" },\n { value: \"member\", label: \"Member\", hint: \"Create and edit everything\" },\n { value: \"viewer\", label: \"Viewer\", hint: \"Read and comment\" },\n];\nconst roleLabel = (r: InviteRole | \"owner\") => (r === \"owner\" ? \"Owner\" : roles.find((x) => x.value === r)?.label);\n\nconst press = \"transition-[scale,box-shadow,background-color] duration-150 ease-out active:scale-[0.97]\";\nconst EMAIL = /^[^\\s@<>()[\\],;:\"]+@[^\\s@<>()[\\],;:\"]+\\.[a-z]{2,}$/i;\nconst avatarTones = [\n \"bg-info/16 text-info-foreground\",\n \"bg-success/16 text-success-foreground\",\n \"bg-warning/16 text-amber-800 dark:text-warning-foreground\",\n \"bg-destructive/12 text-destructive-foreground\",\n \"bg-muted-foreground/16 text-foreground\",\n];\n\nfunction toneFor(text: string) {\n let h = 0;\n for (const c of text) h = (h * 31 + c.charCodeAt(0)) >>> 0;\n return avatarTones[h % avatarTones.length];\n}\n\nfunction splitEmails(text: string): string[] {\n return text\n .split(/[\\n,;]+/)\n .flatMap((segment) => {\n const angled = segment.match(/<([^>]+)>/);\n return angled ? [angled[1]] : segment.split(/\\s+/);\n })\n .map((part) => part.trim().replace(/^mailto:/i, \"\"))\n .filter(Boolean);\n}\n\nexport function InviteTeammates({\n workspace,\n description,\n members = [],\n defaultInvites = [],\n defaultRole = \"member\",\n inviteLink,\n defaultLinkEnabled = false,\n onSend,\n onLinkToggle,\n onCancel,\n className,\n}: InviteTeammatesProps) {\n const reduce = useReducedMotion();\n const fieldId = useId();\n const hintId = useId();\n const [invites, setInvites] = useState(defaultInvites);\n const [draft, setDraft] = useState(\"\");\n const [role, setRole] = useState(defaultRole);\n const [armed, setArmed] = useState(false);\n const [flash, setFlash] = useState(null);\n const [sending, setSending] = useState(false);\n const [sent, setSent] = useState(null);\n const [linkOn, setLinkOn] = useState(defaultLinkEnabled);\n const [copied, setCopied] = useState(false);\n const inputRef = useRef(null);\n const fieldRef = useRef(null);\n const count = useRef(defaultInvites.length);\n const timers = useRef[]>([]);\n\n useEffect(() => () => timers.current.forEach(clearTimeout), []);\n const later = useCallback((fn: () => void, ms: number) => {\n timers.current.push(setTimeout(fn, ms));\n }, []);\n\n useEffect(() => {\n if (invites.length > count.current) {\n fieldRef.current?.scrollTo({ top: fieldRef.current.scrollHeight, behavior: reduce ? \"auto\" : \"smooth\" });\n }\n count.current = invites.length;\n }, [invites.length, reduce]);\n\n const memberEmails = useMemo(() => new Set(members.map((m) => m.email.toLowerCase())), [members]);\n const problem = useCallback(\n (email: string) =>\n !EMAIL.test(email)\n ? \"isn't a valid email\"\n : memberEmails.has(email.toLowerCase())\n ? \"is already in this workspace\"\n : null,\n [memberEmails],\n );\n\n const add = (raw: string[]) => {\n if (!raw.length) return;\n setSent(null);\n setInvites((prev) => {\n const seen = new Set(prev.map((i) => i.email.toLowerCase()));\n const next = [...prev];\n for (const email of raw) {\n const key = email.toLowerCase();\n if (seen.has(key)) {\n setFlash(key);\n later(() => setFlash(null), 600);\n continue;\n }\n seen.add(key);\n next.push({ email, role });\n }\n return next;\n });\n };\n\n const commitDraft = () => {\n add(splitEmails(draft));\n setDraft(\"\");\n };\n\n const remove = (email: string) => {\n setInvites((prev) => prev.filter((i) => i.email !== email));\n inputRef.current?.focus();\n };\n\n const edit = (email: string) => {\n commitDraft();\n setInvites((prev) => prev.filter((i) => i.email !== email));\n setDraft(email);\n requestAnimationFrame(() => inputRef.current?.select());\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n if ([\"Enter\", \",\", \";\", \"Tab\", \" \"].includes(e.key) && draft.trim()) {\n e.preventDefault();\n commitDraft();\n return;\n }\n if (e.key === \"Enter\" && !draft && valid.length && !invalid.length) {\n e.preventDefault();\n void send();\n return;\n }\n if (e.key === \"Backspace\" && !draft && invites.length) {\n e.preventDefault();\n if (armed) {\n setInvites((prev) => prev.slice(0, -1));\n setArmed(false);\n } else setArmed(true);\n return;\n }\n setArmed(false);\n };\n\n const onPaste = (e: ClipboardEvent) => {\n const text = e.clipboardData.getData(\"text\");\n const parts = splitEmails(text);\n if (parts.length < 2 && !/[\\n,;]/.test(text)) return;\n e.preventDefault();\n add(parts);\n };\n\n const valid = invites.filter((i) => !problem(i.email));\n const invalid = invites.filter((i) => problem(i.email));\n const firstInvalid = invalid[0];\n\n const send = async () => {\n if (!valid.length || sending) return;\n setSending(true);\n await Promise.all([onSend?.(valid), new Promise((r) => later(() => r(null), 700))]);\n setInvites((prev) => prev.filter((i) => problem(i.email)));\n setSending(false);\n setSent(valid.length);\n later(() => setSent(null), 3200);\n };\n\n const copy = async () => {\n if (!inviteLink) return;\n try {\n await navigator.clipboard.writeText(inviteLink);\n } catch {}\n setCopied(true);\n later(() => setCopied(false), 1600);\n };\n\n const spring = reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 520, damping: 34 };\n const height = reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 360, damping: 34 };\n\n return (\n \n
\n
\n

\n Invite to {workspace}\n

\n {description &&

{description}

}\n
\n {onCancel && (\n \n )}\n
\n\n
\n
\n \n
\n New invites join as\n Join as\n ({ value: r.value, label: r.label }))}\n onValueChange={(v) => v && setRole(v as InviteRole)}\n value={role}\n >\n \n \n \n \n {roles.map((r) => (\n \n {r.label}\n \n ))}\n \n \n
\n
\n\n {\n if (e.target === e.currentTarget) inputRef.current?.focus();\n }}\n ref={fieldRef}\n >\n \n {invites.map((invite, index) => {\n const issue = problem(invite.email);\n const isLast = index === invites.length - 1;\n return (\n \n {issue ? (\n \n ) : (\n \n {invite.email[0]}\n \n )}\n edit(invite.email)}\n type=\"button\"\n >\n {invite.email}\n \n {!issue && (\n \n \n {roleLabel(invite.role)}\n \n \n \n \n setInvites((prev) =>\n prev.map((i) => (i.email === invite.email ? { ...i, role: v as InviteRole } : i)),\n )\n }\n value={invite.role}\n >\n {roles.map((r) => (\n \n \n {r.label}\n {r.hint}\n \n \n ))}\n \n \n \n )}\n remove(invite.email)}\n type=\"button\"\n >\n \n \n \n );\n })}\n 0 || undefined}\n autoComplete=\"off\"\n className=\"h-7 min-w-36 flex-1 bg-transparent px-1.5 text-sm outline-none placeholder:text-muted-foreground/72\"\n id={fieldId}\n key=\"input\"\n layout=\"position\"\n onBlur={() => {\n if (draft.trim()) commitDraft();\n setArmed(false);\n }}\n onChange={(e) => {\n setDraft(e.target.value);\n setArmed(false);\n }}\n onKeyDown={onKeyDown}\n onPaste={onPaste}\n placeholder={invites.length ? \"Add more…\" : \"name@company.com, or paste a list\"}\n ref={inputRef}\n spellCheck={false}\n transition={spring}\n type=\"text\"\n value={draft}\n />\n \n
\n\n
\n \n {firstInvalid ? (\n \n {firstInvalid.email} {problem(firstInvalid.email)}\n {invalid.length > 1 && ` (+${invalid.length - 1} more)`}\n \n ) : sent ? (\n \n \n {sent} {sent === 1 ? \"invite\" : \"invites\"} sent\n \n ) : (\n \n Separate with commas, spaces or new lines.\n \n )}\n \n {invalid.length > 0 && (\n setInvites((prev) => prev.filter((i) => !problem(i.email)))}\n type=\"button\"\n >\n Remove invalid\n \n )}\n
\n \n\n {members.length > 0 && (\n
\n

People with access

\n {members.map((m) => (\n
\n \n {m.name\n .split(\" \")\n .map((p) => p[0])\n .join(\"\")\n .slice(0, 2)}\n \n
\n

{m.name}

\n

{m.email}

\n
\n {roleLabel(m.role)}\n
\n ))}\n
\n )}\n\n
\n
\n \n \n \n
\n \n

Anyone with the link joins as a viewer

\n
\n {\n setLinkOn(on);\n onLinkToggle?.(on);\n }}\n />\n
\n \n {linkOn && inviteLink && (\n \n
\n {inviteLink}\n \n \n \n \n {copied ? : }\n \n \n \n {copied ? \"Copied\" : \"Copy\"}\n \n
\n \n )}\n \n
\n\n
\n {onCancel && (\n \n )}\n \n
\n \n );\n}\n\nfunction RollingNumber({ value }: { value: number }) {\n const reduce = useReducedMotion();\n return (\n \n \n \n {value}\n \n \n \n );\n}\n" } ] }