@nxgt/material 2.1.0 → 2.2.0

package/docs/components/data-display.md

@@ -0,0 +1,670 @@
+# Data display
+
+Read-only presentation: people, labels, numbers, cards, timelines, code and
+API reference blocks. Nothing here holds a form value; everything is imported
+from `@nxgt/material/components`.
+
+| | Component | What it does |
+| --- | --- | --- |
+| <img src="../previews/data-display-avatar.webp" width="96" alt=""> | [Avatar](#avatar) | Image with a fallback and an optional online / offline dot |
+| <img src="../previews/data-display-avatargroup.webp" width="96" alt=""> | [AvatarGroup](#avatargroup) | Overlapping avatars with a `+N` overflow |
+| <img src="../previews/data-display-badge.webp" width="96" alt=""> | [Badge](#badge) | Pill label in seven tones |
+| <img src="../previews/data-display-countbadge.webp" width="96" alt=""> | [CountBadge](#countbadge) | Count in the corner of its children |
+| <img src="../previews/data-display-chip.webp" width="96" alt=""> | [Chip](#chip) | Pill with slots, an active state and a dismiss button |
+| <img src="../previews/data-display-statcard.webp" width="96" alt=""> | [StatCard](#statcard) | KPI tile with value, hint, icon and toned delta |
+| <img src="../previews/data-display-metric-cards.webp" width="96" alt=""> | [Metric cards](#metric-cards) | Sixteen dashboard tiles |
+| <img src="../previews/data-display-card-presets.webp" width="96" alt=""> | [Card presets](#card-presets) | Twenty-seven ready-made cards |
+| <img src="../previews/data-display-statusindicator.webp" width="96" alt=""> | [StatusIndicator](#statusindicator) | Coloured status dot with a label |
+| <img src="../previews/data-display-summarydata.webp" width="96" alt=""> | [SummaryData](#summarydata) | Label / value pairs as a grid or inline |
+| <img src="../previews/data-display-description.webp" width="96" alt=""> | [Description](#description) | One read-only label / value pair |
+| <img src="../previews/data-display-entityheader.webp" width="96" alt=""> | [EntityHeader](#entityheader) | Page header with status, metadata and actions |
+| <img src="../previews/data-display-listtile.webp" width="96" alt=""> | [ListTile](#listtile) | Row with leading / trailing slots |
+| <img src="../previews/data-display-accordioncard.webp" width="96" alt=""> | [AccordionCard](#accordioncard) | Accordion rendered from `items` |
+| <img src="../previews/data-display-timeline.webp" width="96" alt=""> | [Timeline](#timeline) | Vertical event timeline with relative times |
+| <img src="../previews/data-display-eventchip.webp" width="96" alt=""> | [EventChip](#eventchip) | Calendar event pill |
+| <img src="../previews/data-display-codeblock.webp" width="96" alt=""> | [CodeBlock](#codeblock) | Code, diff, JSON tree and tabbed samples |
+| <img src="../previews/data-display-markdown.webp" width="96" alt=""> | [Markdown](#markdown) | GFM with math and mermaid |
+| <img src="../previews/data-display-terminal.webp" width="96" alt=""> | [Terminal](#terminal) | Display-only command log |
+| <img src="../previews/data-display-figure.webp" width="96" alt=""> | [Figure](#figure) | Framed media with a caption |
+| <img src="../previews/data-display-apioperation.webp" width="96" alt=""> | [ApiEndpoint](#apiendpoint) | HTTP method, path and an operation block |
+| <img src="../previews/data-display-paramtable.webp" width="96" alt=""> | [ParamTable](#paramtable) | Name / type / default / description table |
+| <img src="../previews/data-display-qrcode.webp" width="96" alt=""> | [QRCode](#qrcode) | QR code on a padded tile |
+| <img src="../previews/data-display-barecode.webp" width="96" alt=""> | [Barecode](#barecode) | 1D barcode |
+
+## Avatar
+
+![Avatar](../previews/data-display-avatar.webp)
+
+Image with a fallback and an optional online / offline dot.
+
+```tsx
+import { Avatar } from '@nxgt/material/components';
+
+<Avatar src="/people/ada.png" alt="Ada Lovelace" fallback="AL" status="success" />
+```
+
+Parts: `Avatar` (the composed one), `AvatarBase`, `AvatarImage`,
+`AvatarFallback` for building your own.
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `src` | `string` | — | image; the fallback shows while it loads or when it fails |
+| `fallback` | `ReactNode` | — | initials or an icon |
+| `status` | `'success' \| 'warning' \| 'error' \| 'info' \| 'primary' \| 'neutral'` | — | adds the dot; `success` reads "Online", `neutral` "Offline" |
+| `statusPulse` | `boolean` | `false` | pulses the dot |
+
+**Storybook:** `Data display/Avatar` · **Vue:** `Avatar`, `AvatarImage`, `AvatarFallback`
+
+---
+
+## AvatarGroup
+
+![AvatarGroup](../previews/data-display-avatargroup.webp)
+
+Overlapping avatars with a `+N` overflow.
+
+```tsx
+import { Avatar, AvatarGroup } from '@nxgt/material/components';
+
+<AvatarGroup max={3} size="md">
+  <Avatar fallback="AL" alt="Ada Lovelace" />
+  <Avatar fallback="GH" alt="Grace Hopper" />
+  <Avatar fallback="AT" alt="Alan Turing" />
+  <Avatar fallback="BL" alt="Barbara Liskov" />
+</AvatarGroup>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `max` | `number` | — | avatars shown before the `+N` bubble |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | avatar size, overlap and initials size |
+
+`max` counts the group's **direct** children. Pass the avatars themselves, or an
+array (`people.map(...)`); a single wrapper component or fragment counts as one.
+
+**Storybook:** `Data display/AvatarGroup` · **Vue:** `AvatarGroup`
+
+---
+
+## Badge
+
+![Badge](../previews/data-display-badge.webp)
+
+Pill label: default, secondary, error, success, info, warning, outlined.
+
+```tsx
+import { Badge } from '@nxgt/material/components';
+
+<Badge variant="success">Paid</Badge>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `variant` | `'default' \| 'secondary' \| 'error' \| 'success' \| 'info' \| 'warning' \| 'outlined'` | `'default'` | tone |
+| `asChild` | `boolean` | `false` | renders its child (a link) with the badge styles |
+
+**Storybook:** `Data display/Badge` · **Vue:** `Badge`
+
+---
+
+## CountBadge
+
+![CountBadge](../previews/data-display-countbadge.webp)
+
+Count in the corner of its children, capped at `99+` and hidden at 0.
+
+```tsx
+import { Bell } from 'lucide-react';
+import { CountBadge, IconButton } from '@nxgt/material/components';
+
+<CountBadge count={unread}>
+  <IconButton variant="ghost" tooltip="Notifications">
+    <Bell />
+  </IconButton>
+</CountBadge>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `count` | `number` | — | hidden at `0`; read out as "{count} notifications" |
+| `max` | `number` | `99` | above it the badge shows `99+` |
+| `variant` | Badge `variant` | `'error'` | tone of the bubble |
+
+**Storybook:** `Data display/CountBadge` · **Vue:** `CountBadge`
+
+---
+
+## Chip
+
+![Chip](../previews/data-display-chip.webp)
+
+Pill with leading, avatar and trailing slots, an active state and a dismiss button.
+
+```tsx
+import { Avatar, Chip } from '@nxgt/material/components';
+
+<Chip label="Ada Lovelace" avatar={<Avatar fallback="AL" />} onDismiss={() => remove('ada')} />
+<Chip label="Shipped" color="success" active />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `label` | `ReactNode` | — | the text |
+| `active` | `boolean` | — | filled appearance |
+| `onDismiss` | `() => void` | — | adds the ✕ button, named "Remove {label}" (`material.chip.dismiss-label`), `{label}` being the text `label` shows, a node's included; "Remove" when it shows none |
+| `onClick` | `MouseEventHandler` | — | makes the chip (or its body, when dismissible) a button |
+| `leading`, `avatar`, `trailing` | `ReactNode` | — | slots; `avatar` is shrunk to fit |
+| `variant` | Button `variant` | `'outlined'` | appearance when not active |
+| `color` | Button `color` | — | tone |
+
+**Storybook:** `Data display/Chip` · **Vue:** `Chip`
+
+---
+
+## StatCard
+
+![StatCard](../previews/data-display-statcard.webp)
+
+KPI tile with value, hint, icon, toned delta and a loading skeleton.
+
+```tsx
+import { CreditCard } from 'lucide-react';
+import { StatCard } from '@nxgt/material/components';
+
+<StatCard label="Revenue" value="€48,200" delta={12.4} hint="vs last month" icon={<CreditCard />} />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `delta` | `number \| ReactNode` | — | a number is signed and toned up / down / neutral |
+| `deltaTone` | `'up' \| 'down' \| 'neutral'` | from the sign | forces the tone (a falling churn is good news) |
+| `loading` | `boolean` | `false` | skeleton in place of value and delta |
+| `hint`, `icon` | `ReactNode` | — | text after the delta; icon in the corner |
+
+**Storybook:** `Data display/StatCard` · **Vue:** `StatCard`
+
+---
+
+## Metric cards
+
+![Metric cards](../previews/data-display-metric-cards.webp)
+
+Dashboard tiles including compare, heat, funnel, gauge, spark bars, delta list, range band, latency, ratio, threshold, pace and labelled histogram. Container queries.
+
+```tsx
+import { GaugeCard, GoalCard, ResponsiveGrid, TrendCard } from '@nxgt/material/components';
+
+<ResponsiveGrid>
+  <TrendCard label="Sign-ups" value="1,248" delta={12} series={[12, 18, 15, 22, 28, 24, 31]} />
+  <GoalCard label="Seats used" value={18} target={25} />
+  <GaugeCard label="Health" value="92" percent={92} hint="All checks green" />
+</ResponsiveGrid>
+```
+
+Parts: `TrendCard`, `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`,
+`HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`,
+`BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`,
+`HistogramCard`, and the bare `Sparkline`. Each takes a `label` plus the data
+its shape needs (`series`, `items`, `values`, `percent`, `current` /
+`previous`…) and the props of `Card`. Every tile lays itself out from its own
+width, not the window's, so the same card works in a sidebar and a wide grid.
+
+**Storybook:** `Data display/Metric cards` · **Vue:** same names
+
+---
+
+## Card presets
+
+![Card presets](../previews/data-display-card-presets.webp)
+
+Card presets including overlay, ticket, inbox, event, stack, link, album, tags, receipt, review, offer, place, file, status, score, shortcuts and checklist. Container queries.
+
+```tsx
+import { Avatar, Button, EventCard, FeatureCard, ProfileCard } from '@nxgt/material/components';
+
+<FeatureCard eyebrow="Product" title="Ship a docs site in an afternoon"
+  description="Sidebar from md, TOC from xl, search with ⌘K." actions={<Button>Get started</Button>} />
+<ProfileCard name="Amira Chen" subtitle="Design systems" avatar={<Avatar fallback="AC" />}
+  actions={<Button variant="outlined">Message</Button>} />
+<EventCard month="Sep" day="24" title="Design systems meetup" location="Paris · Studio 4" />
+```
+
+Parts: `FeatureCard`, `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`,
+`OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`,
+`NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`,
+`LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`,
+`PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`,
+`ChecklistCard`. Content is props (`title`, `description`, `actions`, …), the
+rest goes to the underlying `Card`. Every story in Storybook is the smallest
+working example of its card.
+
+**Storybook:** `Data display/Card presets` · **Vue:** same names
+
+---
+
+## StatusIndicator
+
+![StatusIndicator](../previews/data-display-statusindicator.webp)
+
+Coloured status dot with an optional pulse and label.
+
+```tsx
+import { StatusIndicator } from '@nxgt/material/components';
+
+<StatusIndicator tone="success" pulse>Online</StatusIndicator>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `tone` | `'success' \| 'warning' \| 'error' \| 'info' \| 'primary' \| 'neutral'` | `'neutral'` | dot colour |
+| `pulse` | `boolean` | `false` | animated ring for a live state |
+
+**Storybook:** `Data display/StatusIndicator` · **Vue:** `StatusIndicator`
+
+---
+
+## SummaryData
+
+![SummaryData](../previews/data-display-summarydata.webp)
+
+Label / value pairs as a grid or inline; hides empty values.
+
+```tsx
+import { SummaryData } from '@nxgt/material/components';
+
+<SummaryData
+  data={[
+    { label: 'Email', value: user.email },
+    { label: 'Role', value: user.role },
+    { label: 'Phone', value: user.phone }, // dropped when empty
+  ]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `data` | `{ label: string; value?: ReactNode }[]` | `[]` | the pairs; `0` counts as a value |
+| `inline` | `boolean` | `false` | one wrapping line instead of a grid |
+| `showEmpty` | `boolean` | `false` | keeps pairs with no value |
+| `leading` | `ReactNode` | — | shown before the pairs |
+
+**Storybook:** `Data display/SummaryData` · **Vue:** `SummaryData`
+
+---
+
+## Description
+
+![Description](../previews/data-display-description.webp)
+
+Read-only label / value pair that renders nothing when empty.
+
+```tsx
+import { Description } from '@nxgt/material/components';
+
+<div className="grid gap-4 sm:grid-cols-2">
+  <Description label="Name" value={user.name} />
+  <Description label="Phone" value={user.phone} />
+</div>
+```
+
+`label` and `value` are its only props; the rest go to the `div`. A falsy
+`value` renders nothing, so optional fields need no guard.
+
+**Storybook:** `Data display/Description` · **Vue:** `Description`
+
+---
+
+## EntityHeader
+
+![EntityHeader](../previews/data-display-entityheader.webp)
+
+Page header with icon, title, status, metadata and actions.
+
+```tsx
+import { Edit } from 'lucide-react';
+import { Badge, EntityHeader } from '@nxgt/material/components';
+
+<EntityHeader
+  title="John Doe"
+  status={<Badge variant="success">Active</Badge>}
+  metadata={[{ label: 'Email', value: 'john.doe@example.com' }]}
+  actions={[{ children: 'Edit', variant: 'outlined', icon: <Edit /> }]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `icon`, `status` | `ReactNode` | — | before and after the title; `icon` is decoration, shown in an `aria-hidden` badge, so put nothing meaningful or focusable there |
+| `metadata` | `{ label: string; value: ReactNode }[]` | `[]` | the line under the title |
+| `actions` | `ResponsiveButtonProps[] \| ReactNode` | `[]` | an array becomes responsive buttons (icon-only on phones) |
+
+**Storybook:** `Data display/EntityHeader` · **Vue:** `EntityHeader`
+
+---
+
+## ListTile
+
+![ListTile](../previews/data-display-listtile.webp)
+
+Row with leading / trailing slots, title and subtitle; becomes a link or button when interactive. `size="sm"` is the dense row.
+
+```tsx
+import { ChevronRight } from 'lucide-react';
+import { ListTile } from '@nxgt/material/components';
+
+<ListTile title="Notifications" subtitle="Email and push" trailing={<ChevronRight />} href="/settings/notifications" />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `href` | `string` | — | renders an `<a>` |
+| `onClick` | `MouseEventHandler` | — | renders a `<button>` |
+| `selected` | `boolean` | `false` | highlighted row |
+| `size` | `'sm' \| 'md'` | `'md'` | `sm` is the dense navigation row |
+| `leading`, `trailing`, `subtitle` | `ReactNode` | — | slots |
+| `disabled` | `boolean` | — | disables the link or button |
+
+**Storybook:** `Data display/ListTile` · **Vue:** `ListTile`
+
+---
+
+## AccordionCard
+
+![AccordionCard](../previews/data-display-accordioncard.webp)
+
+Renders `items` (title, content) as a styled accordion.
+
+```tsx
+import { AccordionCard } from '@nxgt/material/components';
+
+<AccordionCard
+  type="single"
+  collapsible
+  items={[
+    { key: 'shipping', title: 'Shipping', content: 'Ships within two working days.' },
+    { key: 'returns', title: 'Returns', content: 'Free returns for 30 days.' },
+  ]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `items` | `{ key?: string; title: ReactNode; content: ReactNode }[]` | — | empty renders nothing; `key` is the item's value |
+| `showIcon` | `boolean` | `true` | decorative chevron on each header; the header itself is the `<button>` |
+| `renderHeader` | `(title) => ReactNode` | — | replaces the whole header; it becomes the trigger, so return a `<button>` (or an element that takes focus) |
+| `type`, `value`, `onValueChange`, … | `Accordion` props | — | single / multiple, controlled or not |
+
+**Storybook:** `Data display/AccordionCard` · **Vue:** `AccordionCard`
+
+---
+
+## Timeline
+
+![Timeline](../previews/data-display-timeline.webp)
+
+Vertical event timeline with toned icons and relative times.
+
+```tsx
+import { Package, Pencil } from 'lucide-react';
+import { Timeline, type TimelineItemData } from '@nxgt/material/components';
+
+const items: TimelineItemData[] = [
+  { id: 'update', title: 'Status set to In progress', timestamp: updatedAt, icon: <Pencil />, tone: 'info' },
+  { id: 'create', title: 'Order created', timestamp: createdAt, icon: <Package />, tone: 'primary' },
+];
+
+<Timeline items={items} aria-label="Order history" />
+```
+
+Parts: `Timeline`, `TimelineItem` (one row, for your own list),
+`RelativeTime` (`date`, `addSuffix`; the exact date is its `title`).
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `items` | `TimelineItemData[]` | — | `title`, `description`, `timestamp`, `icon` or `avatar`, `tone`, `children` |
+| `loading` | `boolean` | `false` | skeleton rows |
+| `empty` | `ReactNode` | "No activity yet" | shown when `items` is empty |
+
+**Storybook:** `Data display/Timeline` · **Vue:** `Timeline`, `TimelineItem`, `RelativeTime`
+
+---
+
+## EventChip
+
+![EventChip](../previews/data-display-eventchip.webp)
+
+Calendar event pill with time, all-day and continuation edges.
+
+```tsx
+import { EventChip } from '@nxgt/material/components';
+
+<EventChip title="Sprint planning" time="14:30" color="#f97316" onClick={openEvent} />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `color` | `string` | `'var(--color-primary)'` | edge and tint |
+| `allDay` | `boolean` | `false` | solid pill, no time |
+| `compact` | `boolean` | `false` | one short line, for month cells |
+| `continuesBefore`, `continuesAfter` | `boolean` | `false` | square edges for a multi-day event |
+| `selected`, `disabled` | `boolean` | `false` | state |
+
+**Storybook:** `Data display/EventChip` · **Vue:** `EventChip`
+
+---
+
+## CodeBlock
+
+![CodeBlock](../previews/data-display-codeblock.webp)
+
+Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs variant="line"`).
+
+<img src="../previews/data-display-codegroup.webp" height="96" alt="CodeGroup">
+<img src="../previews/data-display-jsonviewer.webp" height="96" alt="JsonViewer">
+<img src="../previews/data-display-codediff.webp" height="96" alt="CodeDiff">
+
+```tsx
+import { CodeBlock, CodeDiff, CodeGroup, JsonViewer } from '@nxgt/material/components';
+
+<CodeBlock code={source} language="typescript" filename="greet.ts" highlightLines={[2]} />
+<CodeGroup tabs={[
+  { label: 'bun', language: 'bash', code: 'bun add @nxgt/material' },
+  { label: 'npm', language: 'bash', code: 'npm i @nxgt/material' },
+]} />
+<JsonViewer value={payload} filename="payload.json" collapsedDepth={1} />
+<CodeDiff original={before} modified={after} language="typescript" height={280} />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `scheme` | `'dark' \| 'light'` | follows the theme | forces the palette (all four) |
+| `showLineNumbers` | `boolean` | `true` | `CodeBlock`, `CodeGroup` |
+| `highlightLines` | `number[]` | — | `CodeBlock`: marked lines |
+| `maxHeight` | `number \| string` | — | `CodeBlock`, `JsonViewer`: scrolls past it |
+| `collapsedDepth` | `number` | `1` | `JsonViewer`: deeper nodes start folded; a string `value` is parsed |
+| `height` | `number \| string` | `280` | `CodeDiff`: Monaco needs a fixed height |
+
+`CodeDiff` loads Monaco lazily and shows a skeleton until it is ready.
+
+**Storybook:** `Data display/CodeBlock`, `Data display/CodeDiff`, `Data display/JsonViewer`, `Data display/CodeGroup` · **Vue:** `CodeBlock`, `CodeDiff`, `JsonViewer`, `CodeGroup`
+
+---
+
+## Markdown
+
+![Markdown](../previews/data-display-markdown.webp)
+
+GFM markdown with KaTeX math and mermaid diagrams (`clientOnly`). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it.
+
+```tsx
+import { Markdown } from '@nxgt/material/components';
+
+<Markdown>{'# Release notes\n\n- **Faster** builds\n\n$$e^{i\\pi} + 1 = 0$$'}</Markdown>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `children` | `string` | — | the markdown source |
+| `emojis` | `EmojiItem[]` | — | resolves `:shortcode:` to custom emojis |
+
+Mermaid diagrams render in the browser only, after mount; on the server the
+fence is left empty.
+
+**Storybook:** `Data display/Markdown` · **Vue:** `Markdown`
+
+---
+
+## Terminal
+
+![Terminal](../previews/data-display-terminal.webp)
+
+Display-only log with prompt, copy, and error/input tones. Container queries.
+
+```tsx
+import { Terminal } from '@nxgt/material/components';
+
+<Terminal
+  lines={[
+    { text: 'bun run build', tone: 'input' },
+    { text: '✓ 204 modules transformed.' },
+    { text: 'error: missing export Markdown', tone: 'error' },
+  ]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `lines` | `{ text: string; tone?: 'input' \| 'output' \| 'error' }[]` | — | `input` lines get the prompt |
+| `title` | `ReactNode` | `'bash'` | header label |
+| `prompt` | `string` | `'$'` | prompt character |
+
+**Storybook:** `Data display/Terminal` · **Vue:** `Terminal`
+
+---
+
+## Figure
+
+![Figure](../previews/data-display-figure.webp)
+
+Framed media with an optional caption.
+
+```tsx
+import { Figure } from '@nxgt/material/components';
+
+<Figure caption="The dashboard on a phone.">
+  <img src="/shots/dashboard.png" alt="Dashboard" />
+</Figure>
+```
+
+`caption` and `children` are its only props.
+
+**Storybook:** `Data display/Figure` · **Vue:** `Figure`
+
+---
+
+## ApiEndpoint
+
+![ApiOperation](../previews/data-display-apioperation.webp)
+
+HTTP method badge, path and copy; `ApiOperation` adds a param table and example `CodeGroup`.
+
+<img src="../previews/data-display-apiendpoint.webp" height="72" alt="ApiEndpoint">
+
+```tsx
+import { ApiEndpoint, ApiOperation } from '@nxgt/material/components';
+
+<ApiEndpoint method="GET" path="/v1/docs">List documentation pages.</ApiEndpoint>
+
+<ApiOperation
+  method="GET"
+  path="/v1/docs"
+  params={[{ name: 'locale', type: 'string', defaultValue: '"en"', description: 'BCP 47 language tag.' }]}
+  examples={[{ label: 'curl', language: 'bash', code: 'curl https://api.example.com/v1/docs' }]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `method` | `'GET' \| 'POST' \| 'PUT' \| 'PATCH' \| 'DELETE' \| 'HEAD' \| 'OPTIONS'` | — | badge tone |
+| `path` | `string` | — | shown and copied |
+| `params` | `ParamTableRow[]` | — | `ApiOperation`: a `ParamTable` |
+| `examples` | `CodeGroupTab[]` | — | `ApiOperation`: a `CodeGroup` |
+
+**Storybook:** `Data display/ApiEndpoint`, `Data display/ApiOperation` · **Vue:** `ApiEndpoint`, `ApiOperation`
+
+---
+
+## ParamTable
+
+![ParamTable](../previews/data-display-paramtable.webp)
+
+Name / type / default / description table; stacked cards below `sm`.
+
+```tsx
+import { ParamTable } from '@nxgt/material/components';
+
+<ParamTable
+  params={[
+    { name: 'pathname', type: 'string', required: true, description: 'Current location.' },
+    { name: 'searchable', type: 'boolean', defaultValue: 'true', description: 'Show the search field and ⌘K.' },
+  ]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `params` | `{ name; type?; defaultValue?; required?; description? }[]` | — | one row each; `required` adds a `*` |
+
+**Storybook:** `Data display/ParamTable` · **Vue:** `ParamTable`
+
+---
+
+## QRCode
+
+![QRCode](../previews/data-display-qrcode.webp)
+
+QR code on a padded tile, with an optional centred logo.
+
+```tsx
+import { QRCode } from '@nxgt/material/components';
+
+<QRCode value="https://example.com/tickets/DS-184" size={160} level="H" logo={<img src="/logo.svg" alt="" width={32} />} />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `value` | `string` | — | encoded text |
+| `size` | `number` | `256` | pixels |
+| `level` | `'L' \| 'M' \| 'Q' \| 'H'` | `'L'` | error correction; use `H` with a `logo` |
+| `fgColor`, `bgColor` | `string` | black on white | colours |
+| `logo` | `ReactNode` | — | centred over the code on a white pad |
+
+**Storybook:** `Data display/QRCode` · **Vue:** `QRCode`
+
+---
+
+## Barecode
+
+![Barecode](../previews/data-display-barecode.webp)
+
+1D barcode.
+
+```tsx
+import { Barecode } from '@nxgt/material/components';
+
+<Barecode value="5901234123457" format="EAN13" />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `value` | `string` | — | encoded text |
+| `format` | `'CODE128' \| 'CODE39' \| 'EAN13' \| 'EAN8' \| 'UPC' \| 'ITF14' \| …` | `'CODE128'` | symbology |
+| `displayValue` | `boolean` | `true` | text under the bars |
+| `width`, `height` | `number` | `2`, `100` | bar width and height in pixels |
+
+The props are those of `react-barcode`. The barcode sits in an
+`inline-flex max-w-full` span that carries `role="img"` and the name
+(`aria-label`, "Barcode" by default); `className` reaches the barcode element,
+not that span.
+
+**Storybook:** `Data display/Barecode` · **Vue:** `Barecode`