Add PresenceIndicator component

[jalexw]

Summary

Introduces a new PresenceIndicator component for displaying user presence status with visual indicators. This component supports multiple presence states, sizes, and optional labels with full accessibility support.

Changes

• New component: PresenceIndicator with support for 7 presence statuses (online, idle, busy, away, dnd, offline, invisible)
• Size variants: 5 size options (xs, sm, md, lg, xl) with responsive styling
• Features:
  • Optional pulse animation for active statuses
  • Bordered ring option for overlaying on avatars or colored surfaces
  • Flexible labeling: default status labels, custom text, or label-less
  • Full accessibility with semantic role="status" and customizable aria-label
  • Decorative mode support (when aria-label={null})
• Styling: Color-coded dots with status-specific visual treatments (e.g., diagonal bar for "do not disturb")
• Storybook stories: Comprehensive examples including all statuses, sizes, labels, avatar overlays, and a team roster pattern
• Exports: Component, types, and status/size ID constants via index.ts and main package exports

Implementation Details

• Uses "use client" directive for client-side rendering
• Leverages cn() utility for Tailwind class merging
• Semantic HTML with proper ARIA attributes for status indication
• Separate PresenceDot sub-component for reusability
• Type-safe status and size definitions using as const satisfies
• Version bumped to 0.77.0

https://claude.ai/code/session_01Dq6XGsYEBABHZj5pu8ATq9

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui	Ready	Preview, Comment	Jun 18, 2026 12:52pm