"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { Tooltip as TooltipPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; export type PresenceUser = { id: string; name: string; color?: string; avatar?: string; status?: "active" | "idle" | "away"; /** Where they are, e.g. "Editing Pricing". */ activity?: string; }; const initials = (n: string) => n.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase(); const dot = { active: "bg-success", idle: "bg-warning", away: "bg-subtle" }; /** Who's here right now: overlapping avatars with status, tooltips and overflow count. */ export function Presence({ users, max = 4, size = 32, className }: { users: PresenceUser[]; max?: number; size?: number; className?: string }) { const shown = users.slice(0, max); const extra = users.length - shown.length; return (

{shown.map((u, i) => ( {u.avatar ?

: initials(u.name)} {u.status ? : null}

{u.name}

{u.activity ?

{u.activity}

: null} ))} {extra > 0 ? ( +{extra} ) : null}

); }

Presence

Installation

Exports