Interactive Molecules
ImportCC
Available via @stackmates/ui-interactive/molecules
Dialog
Modal dialogs built on Radix UI Dialog primitive.
DialogProps
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state |
| onOpenChange | (open: boolean) => void | — | Called when open state changes |
| children* | ReactNode | — | DialogTrigger + DialogContent |
Installation
typescript
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogTrigger } from '@stackmates/ui-interactive/molecules';Accessibility
- Focus trapped inside dialog
- Escape key closes
- aria-labelledby linked to DialogTitle
Related:
Accordion
Expandable content sections. Supports single or multiple open items.
AccordionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| type* | 'single' | 'multiple' | — | Allow one or many items open |
| collapsible | boolean | false | Allow collapsing all items (single mode) |
Installation
typescript
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@stackmates/ui-interactive/molecules';Accessibility
- Keyboard navigable with arrow keys
- Space/Enter toggles
- aria-expanded managed automatically
Related:
AlertDialog
Confirmation dialog for destructive actions requiring explicit consent.
AlertDialogProps
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state |
| onOpenChange | (open: boolean) => void | — | Called when open state changes |
Installation
typescript
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@stackmates/ui-interactive/molecules';Accessibility
- role="alertdialog"
- Cannot be dismissed by clicking outside
- Focus returns to trigger on close
Related:
MessageRow
Single message with avatar. User right-aligned, assistant left-aligned.
OR
Orchestrator
I'll analyze your pipeline using the optimal-stopping algorithm.
Run the sales-rfp workflow for the Acme deal.
OR
Orchestrator
Starting the sales-rfp-workflow...
MessageRowProps
| Prop | Type | Default | Description |
|---|---|---|---|
| message* | MessageRowData | — | Message data object with id, role, content, agentName, isStreaming |
| className | string | — | Additional CSS classes |
Installation
typescript
import { MessageRow } from '@stackmates/ui-interactive/molecules';Accessibility
- Messages use semantic list structure
- Role conveyed via alignment and labels
Related:
MessageComposer
Textarea + send button. Enter sends, Shift+Enter for newline.
MessageComposerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | string | — | Current textarea value |
| onChange* | (value: string) => void | — | Value change handler |
| onSubmit* | () => void | — | Send handler (also triggered by Enter key) |
| isLoading | boolean | false | Disable input while sending |
| placeholder | string | 'Type a message...' | Placeholder text |
Installation
typescript
import { MessageComposer } from '@stackmates/ui-interactive/molecules';Accessibility
- Textarea auto-resizes
- Enter submits
- Shift+Enter for newline
- Send button disabled when loading
Related:
EntitySelector
Pick entity from list with avatar initials, description, and badges.
EntitySelectorProps
| Prop | Type | Default | Description |
|---|---|---|---|
| entities* | EntityItem[] | — | List of selectable entities (id, name, description, badges) |
| selectedId | string | — | Currently selected entity ID |
| onSelect* | (id: string) => void | — | Selection handler |
Installation
typescript
import { EntitySelector } from '@stackmates/ui-interactive/molecules';Accessibility notes — Contribute this section
StageCard
Workflow stage with status badge, agent name, duration, and confidence score.
Research & Discovery
Knowledge Architect
8.5s92%completed
Strategy Analysis
Navigator
running
Content Generation
Orchestrator
pending
Data Validation
Navigator
3.2sfailed
StageCardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| stage* | StageCardData | — | Stage data (id, name, status, agent, durationMs, confidence) |
| className | string | — | Additional CSS classes |
Installation
typescript
import { StageCard } from '@stackmates/ui-interactive/molecules';Accessibility notes — Contribute this section
Related: