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:T382e,'use client' import * as React from 'react' import { RotateCw, Send, UserPlus, X } from 'lucide-react' import type { BadgeVariants } from '@/components/ui/badge' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { SectionCard } from '@/components/ui/section-card' export type InviteRole = 'admin' | 'editor' | 'viewer' export type InviteStatus = 'pending' | 'accepted' | 'expired' export interface InviteEntry { id: string email: string role: InviteRole status: InviteStatus sentAt: Date } export interface InviteMembersProps { title?: string description?: string seatLimit?: number /** Seats taken by existing members (incl. already-accepted invites). */ memberSeats?: number initialInvites?: InviteEntry[] /** Pre-fills the compose input; an invalid value surfaces the validation error state. */ initialDraft?: string /** Emails staged as queued chips before sending (as after a multi-address paste). */ initialQueue?: string[] className?: string } /** * Self-contained team invite surface. Stub data lives here — swap * `DEFAULT_INVITES` for your data source after installing. */ const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ const SEATS_PILL = 'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium whitespace-nowrap tabular-nums' const SEATS_PILL_WARN = 'border-warning/30 bg-warning/10 text-warning' const SEATS_PILL_OK = 'border-border bg-muted/40 text-muted-foreground' const CHIP = 'border-border bg-muted/40 text-foreground inline-flex max-w-full items-center gap-1 rounded-full border py-0.5 pr-1 pl-2.5 ' + 'text-xs font-medium' const CHIP_REMOVE = 'hover:bg-background inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full ' + 'transition-colors' const ROLE_LABEL: Record = { admin: 'Admin', editor: 'Editor', viewer: 'Viewer' } const ROLE_VARIANT: Record = { admin: 'default', editor: 'info', viewer: 'outline', } const STATUS_LABEL: Record = { pending: 'Pending', accepted: 'Accepted', expired: 'Expired' } const STATUS_VARIANT: Record = { pending: 'warning', accepted: 'success', expired: 'secondary', } const now = Date.now() const minutesAgo = (m: number) => new Date(now - m * 60_000) const DEFAULT_INVITES: InviteEntry[] = [ { id: 'inv-1', email: 'priya@acme.com', role: 'admin', status: 'pending', sentAt: minutesAgo(120) }, { id: 'inv-2', email: 'marcus@acme.com', role: 'editor', status: 'accepted', sentAt: minutesAgo(60 * 24 * 3) }, { id: 'inv-3', email: 'devon@acme.com', role: 'viewer', status: 'pending', sentAt: minutesAgo(60 * 26) }, { id: 'inv-4', email: 'sarah@acme.com', role: 'editor', status: 'expired', sentAt: minutesAgo(60 * 24 * 12) }, { id: 'inv-5', email: 'lena@acme.com', role: 'admin', status: 'accepted', sentAt: minutesAgo(60 * 24 * 7) }, ] function tokenize(text: string): string[] { return text .split(/[\s,;]+/) .map((token) => token.trim()) .filter(Boolean) } function mergeQueue(prev: string[], emails: string[]): string[] { const next = [...prev] for (const email of emails) { if (!next.some((queued) => queued.toLowerCase() === email.toLowerCase())) next.push(email) } return next } function invalidMessage(invalid: string[]): string { return invalid.length === 1 ? `“${invalid[0]}” is not a valid email address.` : `${invalid.length} entries are not valid email addresses: ${invalid.join(', ')}` } export function InviteMembers({ title, description, seatLimit = 20, memberSeats = 16, initialInvites, initialDraft, initialQueue, className, }: InviteMembersProps) { const [invites, setInvites] = React.useState(() => (initialInvites ?? DEFAULT_INVITES).map((invite) => ({ ...invite })), ) const [draft, setDraft] = React.useState(initialDraft ?? '') const [queue, setQueue] = React.useState(initialQueue ?? []) const [role, setRole] = React.useState('editor') const [error, setError] = React.useState( initialDraft && !EMAIL_RE.test(initialDraft.trim()) ? `“${initialDraft.trim()}” is not a valid email address.` : null, ) const [confirmId, setConfirmId] = React.useState(null) const confirmTimer = React.useRef(undefined) React.useEffect(() => () => window.clearTimeout(confirmTimer.current), []) const seatsUsed = memberSeats + invites.filter((invite) => invite.status === 'pending').length const nearLimit = seatsUsed / seatLimit >= 0.9 const canSend = draft.trim().length > 0 || queue.length > 0 function addInvites(emails: string[]) { const stamp = Date.now() const next: InviteEntry[] = emails.map((email, i) => ({ id: `inv-${stamp}-${i}`, email, role, status: 'pending', sentAt: new Date(), })) setInvites((prev) => [...next, ...prev]) } /** Enter / Send invite: a lone address sends straight away, several queue as chips. */ function submit() { const tokens = tokenize(draft) const valid = tokens.filter((token) => EMAIL_RE.test(token)) const invalid = tokens.filter((token) => !EMAIL_RE.test(token)) if (tokens.length === 1 && valid.length === 1) { addInvites(valid) setDraft('') setError(null) return } if (invalid.length) { setError(invalidMessage(invalid)) setDraft(invalid.join(', ')) setQueue((prev) => mergeQueue(prev, valid)) return } // Nothing invalid: stage everything (new addresses plus queued chips) and flush in one pass. const merged = mergeQueue(queue, valid) if (merged.length) addInvites(merged) setError(null) setDraft('') setQueue([]) } /** A paste containing separators queues every valid address as a chip. */ function onPaste(event: React.ClipboardEvent) { const text = event.clipboardData.getData('text') if (!text || !/[\s,;]/.test(text.trim())) return event.preventDefault() const tokens = tokenize(text) setQueue((prev) => mergeQueue( prev, tokens.filter((token) => EMAIL_RE.test(token)), ), ) const invalid = tokens.filter((token) => !EMAIL_RE.test(token)) setError(invalid.length ? invalidMessage(invalid) : null) } function removeQueued(email: string) { setQueue((prev) => prev.filter((queued) => queued !== email)) } function resend(invite: InviteEntry) { setInvites((prev) => prev.map((candidate) => candidate.id === invite.id ? { ...candidate, sentAt: new Date(), status: 'pending' as const } : candidate, ), ) cancelConfirm() } function askRevoke(id: string) { setConfirmId(id) window.clearTimeout(confirmTimer.current) confirmTimer.current = window.setTimeout(() => setConfirmId(null), 4000) } function revoke(invite: InviteEntry) { setInvites((prev) => prev.filter((candidate) => candidate.id !== invite.id)) cancelConfirm() } function cancelConfirm() { window.clearTimeout(confirmTimer.current) setConfirmId(null) } function initialsFor(email: string): string { const local = email.split('@')[0] ?? '' const parts = local.split(/[._-]+/).filter(Boolean) const first = parts[0] ?? '' const second = parts[1] ?? '' if (first && second) return (first.charAt(0) + second.charAt(0)).toUpperCase() return local.slice(0, 2).toUpperCase() } function sentAgo(date: Date): string { const seconds = Math.max(0, Math.floor((Date.now() - date.getTime()) / 1000)) if (seconds < 60) return 'just now' const minutes = Math.floor(seconds / 60) if (minutes < 60) return `${minutes}m ago` const hours = Math.floor(minutes / 60) if (hours < 24) return `${hours}h ago` const days = Math.floor(hours / 24) if (days < 7) return `${days}d ago` return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) } return ( {seatsUsed} of {seatLimit} seats used } >

setDraft(event.target.value)} type="text" placeholder="name@company.com — paste a list to queue several at once" status={error ? 'error' : undefined} aria-describedby={error ? 'invite-members-email-error' : undefined} aria-label="Email addresses to invite" onKeyDown={(event) => { if (event.key === 'Enter') { event.preventDefault() submit() } }} onPaste={onPaste} /> {error && (

{error}

)}

{queue.length > 0 && (

{queue.map((email) => ( {email} ))} {queue.length} queued — pick a role and send

)}

Invites

{invites.length} total

{invites.length > 0 ? (

{initialsFor(invite.email)}

{invite.email}

Sent {sentAgo(invite.sentAt)}

{ROLE_LABEL[invite.role]} {STATUS_LABEL[invite.status]}
{invite.status !== 'accepted' && ( )} {confirmId !== invite.id ? ( ) : ( )}

) : (

No invites yet

Send an invite above and it will show up here.

)}

) } 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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/avatar.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/select.json","https://uipkge.dev/r/react/section-card.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/invite-members/InviteMembers.tsx","content":"$63","type":"registry:block","target":"~/components/blocks/InviteMembers.tsx"}],"className":"h-[70svh] min-h-80"}]]}]