feat: add Mention component

[brandonmcconnell]

Summary

• Introduces a new Mention component to @mintlify/components for rendering inline page and user references as small icon + label pills

Component API

Single Mention component with minimal props. Specify either path (page mention) or user (user mention):

{/* Page mention — renders as a link */}
<Mention path="/travel" icon="plane" color="info">Travel</Mention>
<Mention path="/accommodation" icon="bed" color="info">Accommodation & Meals</Mention>

{/* User mention */}
<Mention user="james-baduor" color="info">James Baduor</Mention>

{/* User mention with avatar URL */}
<Mention user="james-baduor" icon="https://example.com/avatar.jpg">James Baduor</Mention>

Props: path, user, icon (FA/Lucide name, URL, or ReactNode), iconType, iconLibrary, color, className

Color variants: neutral (default) · info · success · warning · feature · error

Implementation notes

• Zero runtime JS — pure CSS/Tailwind, no client-side logic
• Full dark mode support via CSS custom properties (--mention-bg, --mention-text)
• Inline inline-flex element designed to sit naturally inside prose content
• icon prop handles FA/Lucide names, image URLs (circular avatar), and React nodes
• Storybook stories cover all color variants, page/user types, inline prose context, and the design reference layout

Test plan

• Run pnpm storybook in packages/components and verify all stories render correctly
• Confirm page mentions render as <a> tags, user mentions as <span>
• Test icon URL renders as circular avatar image
• Test custom icon name (e.g. plane, bed) renders correctly
• Verify dark mode colors look correct
• Check inline prose story matches the Paper design reference

---

Note

Low Risk
New presentational UI in the components package with no changes to auth, data, or existing component behavior.

Overview
Adds a new Mention component to @mintlify/components for inline page and user references as icon + label pills (Paper / Notion-style @mentions).

path renders an <a> with a default file icon; user renders a <span> with a default person icon. icon accepts FontAwesome/Lucide names, image URLs (circular avatars), React nodes, or can be hidden with null. Six color variants use CSS variables with dark mode; layout uses em units so pills scale with surrounding font size.

The package barrel export and Classes.Mention selector are updated. Storybook stories cover colors, sizes, Lucide, avatars, prose/checklist context, and long-label wrapping.

^{Reviewed by Cursor Bugbot for commit 965147d. Bugbot is set up for automated code reviews on this repo. Configure here.}