Data
Meta line
MetaLine is a line of facts that keeps its first facts whole and drops the last when it's narrow, still read in full by a screen reader; as a button, its tooltip lists them all. ItemLabel is an item's label with its description. Group names a group that isn't a form.
MetaLine: facts, most important first, never broken inside a fact
facts.tsx
import { MetaLine } from "@nibapp/ui/components/meta-line";const FACTS = ["Delivered in 2 days", "3 parcels", "4.2 kg", "Signed by R. Okafor", "Left at reception"];export default function Facts() { return ( <MetaLine className="text-sm text-fg-muted"> {FACTS.map((fact) => ( <span key={fact}>{fact}</span> ))} </MetaLine> );}Narrow: the last facts drop whole, and the first truncates only when it alone doesn't fit
narrow.tsx
import { MetaLine } from "@nibapp/ui/components/meta-line";const FACTS = ["Delivered in 2 days", "3 parcels", "4.2 kg", "Signed by R. Okafor", "Left at reception"];export default function Narrow() { return ( <div className="flex w-64 flex-col gap-2 text-sm text-fg-muted"> <MetaLine> {FACTS.map((fact) => ( <span key={fact}>{fact}</span> ))} </MetaLine> <MetaLine action={{ label: "Open the delivery", onClick: () => undefined }}> {FACTS.map((fact) => ( <span key={fact}>{fact}</span> ))} </MetaLine> </div> );}ItemLabel: an item's label with its description under it, as menus, selects and comboboxes show it
item-label.tsx
import { ItemLabel } from "@nibapp/ui/components/item-label";/** Who can open a link: the choices a share menu offers, the last with no description. */const ACCESS: readonly { readonly label: string; readonly description?: string }[] = [ { label: "Public link", description: "Anyone with the link can view." }, { label: "Invited people", description: "Only people you invite. They sign in to open it." }, { label: "Only you" },];export default function ItemLabels() { return ( <ul className="flex w-72 flex-col rounded-lg border border-border p-1 text-sm text-fg"> {ACCESS.map(({ label, description }) => ( <li key={label} className="flex min-h-8 items-center rounded-md px-2"> <ItemLabel description={description}>{label}</ItemLabel> </li> ))} </ul> );}Group: a labelled group that isn't a form (a run of statuses read as one)
group.tsx
import { Group } from "@nibapp/ui/components/group";export default function Groups() { return ( <Group label="Build status" className="flex items-center gap-3 text-sm text-fg-muted"> <span>12 passed</span> <span>1 skipped</span> <span className="text-danger-fg">2 failed</span> </Group> );}