Component catalog

import {
  Actions,
  Block,
  Button,
  Header,
  MetaItem,
  MetaList,
  Status,
  Time,
} from "@reintersect/sdk/components";

​

Groups

​

Every export

​

What you describe

​

What Reintersect decides

​

Anatomy

​

Spacing

• Closely related pairs, such as a Text followed by its MetaList, or two Progress bars one after the other, sit 8px apart.
• Ordinary siblings sit 12px apart.
• Groups (Section, Columns, Tabs, Form, Stack and Callout) get 24px around them, twice the ordinary gap.

​

The primary button

​

Tones

​

Wrapping and long text

• Titles and labels wrap to two lines, then clamp.
• Short labels (badges, statuses, people, buttons, tabs, menu items, options and column headers) show the full value in a tooltip on hover, focus and long-press.
• Long text gets an inline Show more: descriptions and steps after three lines, table text cells after three, Quote after six, Prose after twelve, and Text after its maxLines.
• Metric values never clamp. They shrink a step, then wrap.

​

Numbers

​

Narrow layouts

• A Table narrower than 400px becomes a list of cards. The first column is each card’s title, the other columns become label and value pairs, and the row menu sits top right. Sortable tables get a Sort menu.
• Columns go side by side only when every column gets at least 200px, measured on the columns themselves. Otherwise they stack into one column; they never wrap as two plus one. Two columns sit side by side in a conversation thread, and three stack there.
• Metrics pick their columns from how many there are, in balanced rows: four go two by two, five go three and two.
• Lists below 320px move each item’s trailing content under its title, and fact labels above their values.
• Tabs that don’t fit move into a trailing More menu. The selected tab stays visible.
• A ChoiceGroup asks for an appearance. Segmented controls are used for 2 to 4 short options and chips for up to 8; anything else becomes a list.

​

Headings and time

​

Icons

​

Audience

​

Nesting rules

• Block is the root of every block view, and appears once. Its children go Header, body, Actions, Footer, in that order.
• The root Actions is the last part of the body. A Form ends with its own submit row. Actions can’t go anywhere else: not in a Section, Tab, Column, Callout, Row or Stack.
• Actions holds one to five Buttons, then at most one Menu (or just a Menu). Labels are unique across the row. Menu holds only MenuItem and MenuSeparator, at most 12 items with unique labels.
• Sections sit at the block, tab or form level, one deep: a Section can’t hold another Section.
• Columns holds two or three Columns, at the block, section, tab or form level. A Column can’t hold a Table, Chart, Prose, Heading or Code, because those need the full width.
• Tabs holds two to six Tabs with unique labels, at the block or section level. Tabs don’t nest.
• A Form can’t hold another Form, and a Stack can’t hold another Stack.
• Callout holds only text: Text, Prose and MetaList. Put a callout’s buttons in the root Actions.
• Row holds one or two Text or AvatarStack elements, then up to three Button or Menu accessories.
• Footer holds one Text or one MetaList.
• MetaList (up to 6 items), Facts, Metrics (up to 6), ItemList and Steps hold only their own item component. Fact and metric labels are unique within their list.
• Toggle, TextInput, DateTimePicker and Select take a field from a Form render prop, so they only appear inside a Form.

​

Not in the catalog

• Custom colours, fonts, sizes, spacing, SVG and CSS.
• Free-form grids, spacers and absolute positioning.
• Disabled controls. Hide what doesn’t apply; Reintersect dims controls only when a member can’t act, and always says why.
• Blocks nested inside blocks, and tabs inside tabs.
• Animation control.
• Raw HTML and iframes. The only embeds are the providers Reintersect already supports, such as YouTube, which you place with a Reference to the URL.
• Dialogs or pages opened by your app. Use a section with a form instead.

​

How each component reads as text

• Containers join their children’s text. Section, Callout, Tabs and ChoiceGroup put their title or label on the first line.
• Buttons and menu items read as [Label]; link buttons read as [Label](https://…).
• Fact reads as Label: value, Item as a - list line, and MetaList joins items with ·.
• Numbers read in a stable en-US format, such as Error rate: 0.4%.
• Anything with an audience is left out of the shared text. Members who pass the audience get it merged into their own projection.
• Decorative images are left out; other images read as [Image: alt].