Members

Accessibility

• The seat bar is a labelled progress bar.
• Each role Select and remove button is named after the member.
• Presence repeats in the Active now text, never colour alone.
• Owner has no Select, so it cannot be changed by mistake.

Motion

• The panel fades and rises 8 over 400 ms, and rows fade in 40 ms apart.
• The seat count rolls and the bar scales over 240 ms as addresses are typed.
• Press is 0.98 from Button.
• With reduced motion, the panel fades only and values swap.

Responsive behavior

• Below 480 wide the invite row stacks.
• Activity and role Selects drop into a line under the name, and search and Revoke are dropped.

Performance

• Parsing the invite field and filtering members are both memoized.
• Rows fade in 40 ms apart, once, and reduced motion skips it.

• Import Members from @/components/fetaui/members. It composes Input, Select, Search, Button and Icon Button with Avatar and Meter from product-kit.
• Seats used counts members, pending and addresses being typed. It shows the count but never blocks past seats, so enforce that in onInvite.
• Send waits until every address is valid, and Enter sends them. Use Invite Field when you need chips and a message per address.
• members and pending are controlled: update them from onInvite, onRoleChange, onRemove, onResend and onRevoke. The demo does this in local state. Rows with role Owner have no controls.