nuxt-ui-tools 1.23.0 → 1.25.0

package/dist/runtime/display/types/blocks/accordion.d.ts

@@ -0,0 +1,18 @@
+import type { DisplaySpec } from '../registry.js';
+import type { DisplayBlockBase, DisplayContent } from '../shared.js';
+export type DisplayAccordionSlot = 'root' | 'item' | 'trigger' | 'icon' | 'label' | 'chevron' | 'content';
+export interface DisplayAccordionItem {
+    label: DisplayContent;
+    icon?: string;
+    content?: DisplayContent;
+    /** A display block drawn as the content, such as `{ display: 'facts', props: { ... } }`. */
+    block?: DisplaySpec;
+    defaultOpen?: boolean;
+}
+export interface DisplayAccordionProps extends DisplayBlockBase<DisplayAccordionSlot> {
+    /** `separated` boxes each item, `flush` separates them with rules. Defaults to `separated`. */
+    variant?: 'separated' | 'flush';
+    items: readonly DisplayAccordionItem[];
+    /** Lets several items stay open. Defaults to `false`. */
+    multiple?: boolean;
+}

package/dist/runtime/display/types/blocks/alert.d.ts

@@ -0,0 +1,31 @@
+import type { DisplayAction, DisplayBlockBase, DisplayContent, DisplayTone } from '../shared.js';
+export type DisplayAlertAppearance = 'soft' | 'outline' | 'subtle' | 'solid' | 'callout' | 'inline' | 'banner';
+export type DisplayAlertSlot = 'root' | 'icon' | 'body' | 'title' | 'message' | 'items' | 'item' | 'itemIcon' | 'list' | 'toggle' | 'details' | 'actions';
+export interface DisplayAlertItem {
+    /** Defaults to the alert icon. */
+    icon?: string;
+    text: DisplayContent;
+}
+export interface DisplayAlertProps extends DisplayBlockBase<DisplayAlertSlot> {
+    /** Defaults to `info`. */
+    tone?: DisplayTone;
+    /**
+     * `soft`, `outline`, `subtle` and `solid` box the notice; `callout` draws an accent bar,
+     * `inline` drops the box, and `banner` sets the icon in a tile with the actions at the end.
+     * Defaults to `soft`.
+     */
+    appearance?: DisplayAlertAppearance;
+    /** Defaults to the tone's icon from `appConfig.ui.icons`; `false` hides it. */
+    icon?: string | false;
+    title?: DisplayContent;
+    message?: DisplayContent;
+    /** Lines led by their own icon. */
+    items?: readonly DisplayAlertItem[];
+    /** Bulleted lines. */
+    list?: readonly DisplayContent[];
+    /** Folded text revealed by a "Show details" toggle. */
+    details?: DisplayContent;
+    /** Opens `details` initially. */
+    defaultOpen?: boolean;
+    actions?: readonly DisplayAction[];
+}

package/dist/runtime/display/types/blocks/breakdown.d.ts

@@ -0,0 +1,36 @@
+import type { DisplayBlockBase, DisplayChip, DisplayContent, DisplaySurface, DisplayTone } from '../shared.js';
+export type DisplayBreakdownSlot = 'root' | 'title' | 'header' | 'headerCell' | 'line' | 'label' | 'detail' | 'value' | 'total' | 'totalLabel' | 'totalValue' | 'toggle' | 'body' | 'footnote';
+export interface DisplayBreakdownLine {
+    label: DisplayContent;
+    value?: DisplayContent;
+    /** `compare` mode: the figure of each column. */
+    values?: readonly [DisplayContent, DisplayContent];
+    /** Secondary figure after the label, such as `24 × 96,00 €` or a rate. */
+    detail?: DisplayContent;
+    /** Bold line after a rule, such as a subtotal. */
+    subtotal?: boolean;
+    /** Ink of the value, such as `success` for a discount. */
+    tone?: DisplayTone;
+    /** Dims the line, such as a discount that does not apply yet. */
+    muted?: boolean;
+}
+export interface DisplayBreakdownTotal extends DisplayBreakdownLine {
+    chip?: DisplayChip;
+}
+export interface DisplayBreakdownProps extends DisplayBlockBase<DisplayBreakdownSlot> {
+    /**
+     * `open` lists every line, `collapsible` shows the total until it is unfolded, `compare` sets two
+     * columns side by side. Defaults to `open`.
+     */
+    mode?: 'open' | 'collapsible' | 'compare';
+    title?: DisplayContent;
+    lines: readonly DisplayBreakdownLine[];
+    total?: DisplayBreakdownTotal;
+    /** `compare` column headings. */
+    columns?: readonly [DisplayContent, DisplayContent];
+    footnote?: DisplayContent;
+    /** `collapsible` only: starts unfolded. */
+    defaultOpen?: boolean;
+    /** Defaults to `bordered`. */
+    surface?: DisplaySurface;
+}

package/dist/runtime/display/types/blocks/chart.d.ts

@@ -0,0 +1,23 @@
+import type { DisplayBlockBase, DisplayContent, DisplayText, DisplayTone } from '../shared.js';
+export type DisplayChartSlot = 'root' | 'header' | 'title' | 'aside' | 'plot' | 'bar' | 'axis' | 'legend' | 'legendItem' | 'step' | 'stepLabel' | 'stepValue' | 'stepRate';
+export interface DisplayChartDatum {
+    label: DisplayText;
+    value: number;
+    /** Defaults to the dashboard palette, in order. */
+    tone?: DisplayTone;
+}
+export interface DisplayChartProps extends DisplayBlockBase<DisplayChartSlot> {
+    /** Defaults to `bars`. `funnel` shows the rate kept from one step to the next. */
+    variant?: 'bars' | 'line' | 'donut' | 'funnel';
+    title?: DisplayContent;
+    /** Text at the end of the header, such as a period or a total. */
+    aside?: DisplayContent;
+    data: readonly DisplayChartDatum[];
+    /** Formats values in labels and the legend. Defaults to the locale number format. */
+    format?: (value: number) => string;
+    /** Plot height in pixels, for `bars` and `line`. Defaults to `96`. */
+    height?: number;
+    /** `bars`: the bar drawn in the accent color with its value. Defaults to `last`. */
+    highlight?: 'last' | 'max' | number | false;
+    empty?: DisplayContent;
+}

package/dist/runtime/display/types/blocks/code.d.ts

@@ -0,0 +1,21 @@
+import type { DisplayBlockBase, DisplayText } from '../shared.js';
+export type DisplayCodeSlot = 'root' | 'header' | 'language' | 'body' | 'icon' | 'value' | 'actions';
+export interface DisplayCodeProps extends DisplayBlockBase<DisplayCodeSlot> {
+    /** `block` is a code panel, `value` a one-line field to copy, `secret` a masked value. Defaults to `block`. */
+    variant?: 'block' | 'value' | 'secret';
+    value: string;
+    /** `block` header. `json` is highlighted. */
+    language?: string;
+    /** `block` header text. Defaults to `language`. */
+    label?: DisplayText;
+    /** Icon at the start of `value` and `secret`. */
+    icon?: string;
+    /** Adds a button opening this address. */
+    href?: string;
+    /** Defaults to `true`. */
+    copy?: boolean;
+    /** `secret`: characters left visible at the end. Defaults to `4`. */
+    visible?: number;
+    /** `block`: scrolls past this height (px or CSS length). */
+    maxHeight?: number | string;
+}

package/dist/runtime/display/types/blocks/date.d.ts

@@ -0,0 +1,27 @@
+import type { DisplayBlockBase, DisplayContent, DisplayDate, DisplayText, DisplayTone } from '../shared.js';
+export type DisplayDateSlot = 'root' | 'tile' | 'month' | 'day' | 'weekday' | 'body' | 'title' | 'description' | 'bound' | 'boundLabel' | 'boundValue' | 'line' | 'duration' | 'icon' | 'value' | 'caption';
+export interface DisplayDateProps extends DisplayBlockBase<DisplayDateSlot> {
+    /**
+     * `tile` draws a calendar leaf beside a title, `range` two dates with the duration between
+     * them, and `countdown` the time left until `value` (or past it). Defaults to `tile`.
+     */
+    variant?: 'tile' | 'range' | 'countdown';
+    value: DisplayDate;
+    /** `range`: the last day. */
+    end?: DisplayDate;
+    title?: DisplayContent;
+    description?: DisplayContent;
+    icon?: string;
+    /** Tile header and countdown tone. A countdown defaults to its urgency. */
+    tone?: DisplayTone;
+    /** Adds the time to the formatted dates. */
+    time?: boolean;
+    /** `countdown`: a passed date reads as overdue. Defaults to `true`. */
+    deadline?: boolean;
+    /** `countdown`: days left from which it turns to `warning`. Defaults to `3`. */
+    warnWithin?: number;
+    /** Defaults to the current time. */
+    now?: DisplayDate;
+    /** `countdown`: replaces the computed "In 2 days". */
+    label?: DisplayText;
+}

package/dist/runtime/display/types/blocks/diff.d.ts

@@ -0,0 +1,20 @@
+import type { DisplayBlockBase, DisplayChip, DisplayContent } from '../shared.js';
+export type DisplayDiffSlot = 'root' | 'title' | 'item' | 'label' | 'values' | 'before' | 'after' | 'arrow' | 'note' | 'unchanged' | 'table' | 'headCell' | 'cell';
+export interface DisplayDiffItem {
+    label: DisplayContent;
+    before?: DisplayContent;
+    after?: DisplayContent;
+    /** Defaults to `true`. Unchanged rows are dimmed in `columns`, and hidden in `inline` unless `showUnchanged`. */
+    changed?: boolean;
+    note?: DisplayChip;
+}
+export interface DisplayDiffProps extends DisplayBlockBase<DisplayDiffSlot> {
+    /** `inline` strikes the old value before the new one, `columns` sets them side by side. Defaults to `inline`. */
+    variant?: 'inline' | 'columns';
+    title?: DisplayContent;
+    /** `columns` headings: the field, the old value, the new value. Default to localized words. */
+    columns?: readonly [DisplayContent, DisplayContent, DisplayContent];
+    items: readonly DisplayDiffItem[];
+    /** `inline`: also lists unchanged items, with their value as is. Defaults to `false`. */
+    showUnchanged?: boolean;
+}

package/dist/runtime/display/types/blocks/empty.d.ts

@@ -0,0 +1,13 @@
+import type { DisplayAction, DisplayBlockBase, DisplayContent, DisplayTone } from '../shared.js';
+export type DisplayEmptySlot = 'root' | 'icon' | 'title' | 'description' | 'actions';
+export interface DisplayEmptyProps extends DisplayBlockBase<DisplayEmptySlot> {
+    /** `dashed` is a centred box with actions, `plain` a single quiet line. Defaults to `dashed`. */
+    variant?: 'dashed' | 'plain';
+    /** Defaults to `appConfig.ui.icons.folder`. */
+    icon?: string;
+    title?: DisplayContent;
+    description?: DisplayContent;
+    actions?: readonly DisplayAction[];
+    /** Tint of the icon tile. Defaults to `neutral`. */
+    tone?: DisplayTone;
+}

package/dist/runtime/display/types/blocks/facts.d.ts

@@ -0,0 +1,50 @@
+import type { DisplayAction, DisplayBlockBase, DisplayChip, DisplayContent, DisplaySurface, DisplayTone } from '../shared.js';
+export type DisplayFactsLayout = 'ledger' | 'grid' | 'inline' | 'columns' | 'tiles';
+export type DisplayFactsSlot = 'root' | 'group' | 'groupHeader' | 'groupTitle' | 'groupAside' | 'item' | 'label' | 'hint' | 'value' | 'empty' | 'actions';
+export interface DisplayFact {
+    label: DisplayContent;
+    /** `null`, `undefined` and `''` draw a dash. */
+    value?: DisplayContent;
+    /** Secondary line under the label (`ledger`) or the value (`grid`, `columns`, `tiles`). */
+    hint?: DisplayContent;
+    tone?: DisplayTone;
+    /** Draws the value as a badge. */
+    chip?: DisplayChip;
+    /** Text copied by a trailing button; `true` copies a text `value`. */
+    copy?: string | boolean;
+    mono?: boolean;
+    /** Larger, bolder value, such as the amount being confirmed. */
+    emphasis?: boolean;
+    /** Icon before the label. */
+    icon?: string;
+    /** Makes the value a link. */
+    to?: string;
+    /** Draws a placeholder bar instead of the value, such as one figure still loading. */
+    loading?: boolean;
+}
+export interface DisplayFactGroup {
+    title?: DisplayContent;
+    /** Text at the end of the group heading. */
+    aside?: DisplayContent;
+    items: readonly DisplayFact[];
+}
+export interface DisplayFactsProps extends DisplayBlockBase<DisplayFactsSlot> {
+    /**
+     * `ledger` lists rows with the value at the end, `grid` stacks a caption over each value,
+     * `inline` runs the pairs on one line, `columns` sets a label column beside the values, and
+     * `tiles` puts each fact in a tinted tile. Defaults to `ledger`.
+     */
+    layout?: DisplayFactsLayout;
+    /** Defaults to `bordered` for `ledger`, `plain` otherwise. */
+    surface?: DisplaySurface;
+    items?: readonly DisplayFact[];
+    /** Titled groups of facts. Other layouts than `ledger` draw them one after the other. */
+    groups?: readonly DisplayFactGroup[];
+    /** Columns of `grid` and `tiles`. Defaults to as many as fit. */
+    columns?: number;
+    /** Width of the label column in `columns`. Defaults to `8rem`. */
+    labelWidth?: string;
+    empty?: DisplayContent;
+    /** Buttons under the facts, such as « Edit the address ». */
+    actions?: readonly DisplayAction[];
+}

package/dist/runtime/display/types/blocks/heading.d.ts

@@ -0,0 +1,19 @@
+import type { DisplayAction, DisplayBlockBase, DisplayContent, DisplaySize, DisplayText, DisplayTone } from '../shared.js';
+export type DisplayHeadingSlot = 'root' | 'icon' | 'text' | 'title' | 'count' | 'description' | 'action' | 'rule';
+export interface DisplayHeadingProps extends DisplayBlockBase<DisplayHeadingSlot> {
+    title: DisplayContent;
+    description?: DisplayContent;
+    /** `eyebrow` is a small uppercase label followed by a rule. Defaults to `title`. */
+    variant?: 'title' | 'eyebrow';
+    /** Defaults to `md`. At `lg`, the icon sits in a tinted tile. */
+    size?: DisplaySize;
+    icon?: string;
+    /** Tone of the icon tile. Defaults to `primary`. */
+    tone?: DisplayTone;
+    /** Pill after the title, such as the number of items below. */
+    count?: DisplayText;
+    /** Link-style button at the end of the row. */
+    action?: DisplayAction;
+    /** Heading level of the title element. Defaults to `3`. */
+    level?: 2 | 3 | 4 | 5 | 6;
+}

package/dist/runtime/display/types/blocks/list.d.ts

@@ -0,0 +1,36 @@
+import type { DisplayBlockBase, DisplayContent, DisplayRevealable, DisplayText, DisplayTone, DisplayUrl } from '../shared.js';
+export type DisplayListVariant = 'bullets' | 'numbered' | 'icons' | 'checks' | 'steps' | 'columns' | 'files' | 'chips';
+export type DisplayListSlot = 'root' | 'title' | 'list' | 'item' | 'marker' | 'text' | 'description' | 'meta' | 'action' | 'more' | 'empty';
+export interface DisplayListItem {
+    /** The text, or the file name for `files`. */
+    text: DisplayContent;
+    description?: DisplayContent;
+    icon?: string;
+    tone?: DisplayTone;
+    /** `checks` and `steps`: done. */
+    done?: boolean;
+    /** `steps`: the current step. */
+    current?: boolean;
+    /** Text at the end of the item. */
+    meta?: DisplayContent;
+    /** `chips`: tooltip of the chip. */
+    tooltip?: DisplayText;
+    /** `files`: link of the file, or a function returning it, opened in the file preview or a new tab. */
+    href?: DisplayUrl;
+    /** `files`: name used for the type badge. Defaults to `text` when it is a string. */
+    name?: string;
+    /** `files`: size in bytes. */
+    size?: number;
+    /** `files`: MIME type. */
+    type?: string;
+}
+export interface DisplayListProps extends DisplayBlockBase<DisplayListSlot>, DisplayRevealable {
+    /** Defaults to `bullets`. */
+    variant?: DisplayListVariant;
+    title?: DisplayContent;
+    items: readonly DisplayListItem[];
+    /** `columns`: column count. Defaults to `2`. */
+    columns?: number;
+    /** `files`: opens files in the file preview instead of a new tab. Defaults to `true`. */
+    preview?: boolean;
+}

package/dist/runtime/display/types/blocks/media.d.ts

@@ -0,0 +1,42 @@
+import type { DisplayAction, DisplayBlockBase, DisplayContent, DisplayText, DisplayUrl } from '../shared.js';
+export type DisplayMediaSlot = 'root' | 'frame' | 'image' | 'caption' | 'grid' | 'tile' | 'overflow' | 'play' | 'duration' | 'title' | 'page' | 'body' | 'name' | 'meta' | 'actions' | 'domain' | 'description' | 'thumbnail';
+export interface DisplayMediaImage {
+    src: string;
+    alt?: string;
+}
+export interface DisplayMediaProps extends DisplayBlockBase<DisplayMediaSlot> {
+    /**
+     * `image` and `video` show one file, `gallery` a grid of `images`, `document` a file card with
+     * a page preview, and `link` a link preview card. Defaults to `image`.
+     */
+    variant?: 'image' | 'gallery' | 'video' | 'document' | 'link';
+    /** Image or video file, or the document to open: a URL, or a function returning one. */
+    src?: DisplayUrl;
+    alt?: string;
+    caption?: DisplayContent;
+    images?: readonly DisplayMediaImage[];
+    /** `gallery`: tiles shown before the `+N` one. Defaults to `3`. */
+    max?: number;
+    /** `video` poster, `document` first page, or `link` image. */
+    thumbnail?: string;
+    title?: DisplayContent;
+    /** `video` length, such as `2:14`. */
+    duration?: DisplayText;
+    /** `document` file name. Defaults to the last segment of `src`. */
+    name?: string;
+    /** `document` size in bytes. */
+    size?: number;
+    /** `document` MIME type. */
+    type?: string;
+    /** `document` page count. */
+    pages?: number;
+    /** `link` address, or a function returning it. */
+    href?: DisplayUrl;
+    description?: DisplayContent;
+    /** CSS aspect ratio of `image`, `gallery` and `video`. Defaults to `16 / 9`. */
+    aspect?: string;
+    /** Opens images and documents in the file preview. Defaults to `true`. */
+    preview?: boolean;
+    /** `document` buttons. Default to "Open" and "Download". */
+    actions?: readonly DisplayAction[];
+}

package/dist/runtime/display/types/blocks/meter.d.ts

@@ -0,0 +1,48 @@
+import type { DisplayBlockBase, DisplayContent, DisplaySize, DisplayText, DisplayTone } from '../shared.js';
+export type DisplayMeterSlot = 'root' | 'header' | 'label' | 'value' | 'track' | 'bar' | 'caption' | 'legend' | 'legendItem' | 'ring' | 'parts' | 'levels' | 'level' | 'levelCaption';
+export interface DisplayMeterPart {
+    label: DisplayContent;
+    value: number;
+    /** Text shown for the value. Defaults to the number. */
+    valueLabel?: DisplayContent;
+    tone?: DisplayTone;
+    icon?: string;
+    /** `ring` parts: the maximum of this part's own bar. Defaults to the meter `max`. */
+    max?: number;
+}
+export interface DisplayMeterLevel {
+    label: DisplayText;
+    caption?: DisplayText;
+}
+export interface DisplayMeterProps extends DisplayBlockBase<DisplayMeterSlot> {
+    /**
+     * `bar` fills one track, `segments` stacks `parts` in one track with a legend, `split` shares
+     * the track between two `parts` labelled at both ends, `ring` draws a circular gauge with
+     * `parts` as small bars beside it, and `scale` highlights the `current` of discrete `levels`.
+     * Defaults to `bar`.
+     */
+    variant?: 'bar' | 'segments' | 'split' | 'ring' | 'scale';
+    label?: DisplayContent;
+    value?: number;
+    /** Defaults to `100`, or to the sum of the parts for `segments` and `split`. */
+    max?: number;
+    /** Text shown for the value. Defaults to `value / max`. */
+    valueLabel?: DisplayContent;
+    /** Defaults to `primary`, unless `thresholds` pick another. */
+    tone?: DisplayTone;
+    /** Switches the tone once the filled share reaches these percentages. */
+    thresholds?: {
+        warning?: number;
+        error?: number;
+    };
+    parts?: readonly DisplayMeterPart[];
+    caption?: DisplayContent;
+    /** `scale` levels, lowest first. */
+    levels?: readonly (DisplayText | DisplayMeterLevel)[];
+    /** `scale`: index of the reached level. */
+    current?: number;
+    /** `scale`: index of the level aimed for, drawn dashed. */
+    target?: number;
+    /** `ring` diameter. Defaults to `md`. */
+    size?: DisplaySize;
+}

package/dist/runtime/display/types/blocks/person.d.ts

@@ -0,0 +1,32 @@
+import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplaySize, DisplayText, DisplayTone } from '../shared.js';
+export type DisplayPersonSlot = 'root' | 'avatar' | 'body' | 'name' | 'description' | 'chip' | 'group' | 'label' | 'contacts' | 'contact' | 'contactIcon' | 'contactValue';
+export interface DisplayPerson {
+    name: DisplayText;
+    description?: DisplayContent;
+    /** Defaults to the initials of `name`. */
+    avatar?: DisplayAvatar;
+    /** Tint of the initials. Defaults to a tone picked from the name. */
+    tone?: DisplayTone;
+    chip?: DisplayChip;
+}
+export interface DisplayPersonContact {
+    icon?: string;
+    value: string;
+    /** Makes the value a link, such as `mailto:` or `tel:`. */
+    href?: string;
+    /** Adds a copy button. Defaults to `true`. */
+    copy?: boolean;
+}
+export interface DisplayPersonProps extends DisplayBlockBase<DisplayPersonSlot>, Partial<DisplayPerson> {
+    /** `user` is one person, `group` a row of avatars, `contact` a card with ways to reach them. Defaults to `user`. */
+    variant?: 'user' | 'group' | 'contact';
+    /** `group` people. */
+    people?: readonly DisplayPerson[];
+    /** `group`: avatars shown before the `+N` one. Defaults to `4`. */
+    max?: number;
+    /** `group`: text after the avatars. */
+    label?: DisplayContent;
+    contacts?: readonly DisplayPersonContact[];
+    /** Defaults to `md`. */
+    size?: DisplaySize;
+}

package/dist/runtime/display/types/blocks/record.d.ts

@@ -0,0 +1,42 @@
+import type { DisplayAvatar, DisplayBlockBase, DisplayChip, DisplayContent, DisplayRevealable, DisplaySurface, DisplayTone } from '../shared.js';
+export type DisplayRecordSlot = 'root' | 'media' | 'icon' | 'body' | 'reference' | 'title' | 'meta' | 'description' | 'badges' | 'trailing' | 'trailingValue' | 'trailingCaption' | 'header' | 'list' | 'item' | 'more' | 'empty';
+export interface DisplayRecordItem {
+    /** Small reference over the title, such as an identifier. */
+    reference?: DisplayContent;
+    title: DisplayContent;
+    meta?: DisplayContent;
+    metaIcon?: string;
+    /** `card` text under the title, clamped to two lines. */
+    description?: DisplayContent;
+    /** A missing or broken `src` shows a placeholder tile. */
+    image?: {
+        src?: string | null;
+        alt?: string;
+    };
+    avatar?: DisplayAvatar;
+    /** Icon tile, used when there is no image or avatar. */
+    icon?: string;
+    tone?: DisplayTone;
+    badges?: readonly DisplayChip[];
+    /** Text at the end of the row, such as a price. */
+    trailing?: DisplayContent;
+    trailingCaption?: DisplayContent;
+    /** Badge at the end of the row. */
+    chip?: DisplayChip;
+    /** Makes the record a link. */
+    to?: string;
+    onClick?: () => void;
+}
+export interface DisplayRecordProps extends DisplayBlockBase<DisplayRecordSlot>, Partial<DisplayRecordItem>, DisplayRevealable {
+    /**
+     * `row` and `card` show one record, `compact` is a slim row with an icon tile, and `stack` lists
+     * `items` under a heading. Defaults to `row`.
+     */
+    variant?: 'row' | 'card' | 'compact' | 'stack';
+    /** `stack` heading. */
+    heading?: DisplayContent;
+    headingIcon?: string;
+    items?: readonly DisplayRecordItem[];
+    /** Defaults to `bordered`. */
+    surface?: DisplaySurface;
+}

package/dist/runtime/display/types/blocks/stat.d.ts

@@ -0,0 +1,44 @@
+import type { DisplayBlockBase, DisplayChip, DisplayContent, DisplaySize, DisplaySurface, DisplayText, DisplayTone } from '../shared.js';
+export type DisplayStatSlot = 'root' | 'label' | 'value' | 'unit' | 'caption' | 'status' | 'delta' | 'sparkline' | 'items' | 'item' | 'itemLabel' | 'itemValue' | 'itemCaption';
+export interface DisplayStatItem {
+    label: DisplayContent;
+    value: DisplayContent;
+    caption?: DisplayContent;
+    tone?: DisplayTone;
+}
+export interface DisplayStatDelta {
+    /** The change, such as `+12 %`. */
+    value: DisplayText;
+    /** Defaults to `up`. */
+    direction?: 'up' | 'down' | 'flat';
+    /** Defaults to `success` going up, `error` going down, `neutral` flat. */
+    tone?: DisplayTone;
+}
+export interface DisplayStatProps extends DisplayBlockBase<DisplayStatSlot> {
+    /**
+     * `hero` centres one figure, `price` adds a status line, `row` lines up two to four figures,
+     * and `trend` adds a change and a sparkline. Defaults to `hero`.
+     */
+    variant?: 'hero' | 'price' | 'row' | 'trend';
+    label?: DisplayContent;
+    value?: DisplayContent;
+    /** Small text after the value, such as `HT`. */
+    unit?: DisplayContent;
+    caption?: DisplayContent;
+    chip?: DisplayChip;
+    status?: {
+        icon?: string;
+        text: DisplayContent;
+        tone?: DisplayTone;
+    };
+    delta?: DisplayStatDelta;
+    /** Points of the `trend` sparkline, oldest first. */
+    trend?: readonly number[];
+    /** Figures of `row`. */
+    items?: readonly DisplayStatItem[];
+    tone?: DisplayTone;
+    /** Defaults to `md`. */
+    size?: DisplaySize;
+    /** Defaults to `muted` for `hero`, `bordered` for `row`, `plain` otherwise. */
+    surface?: DisplaySurface;
+}

package/dist/runtime/display/types/blocks/table.d.ts

@@ -0,0 +1,28 @@
+import type { DisplayBlockBase, DisplayContent, DisplayRevealable, DisplaySurface } from '../shared.js';
+export type DisplayTableSlot = 'root' | 'scroller' | 'table' | 'head' | 'headCell' | 'row' | 'cell' | 'foot' | 'footCell' | 'meta' | 'empty' | 'more';
+export interface DisplayTableColumn {
+    key: string;
+    label: DisplayContent;
+    /** Tabular figures aligned to the end. */
+    numeric?: boolean;
+    /** Defaults to `end` for numeric columns, `start` otherwise. */
+    align?: 'start' | 'center' | 'end';
+    /** CSS width, such as `8rem` or `30%`. */
+    width?: string;
+    mono?: boolean;
+}
+export type DisplayTableRow = Readonly<Record<string, DisplayContent>>;
+export interface DisplayTableProps extends DisplayBlockBase<DisplayTableSlot>, DisplayRevealable {
+    columns: readonly DisplayTableColumn[];
+    rows: readonly DisplayTableRow[];
+    /** Totals or averages pinned under the rows. */
+    footer?: DisplayTableRow;
+    /** Line under the table, at the start. */
+    caption?: DisplayContent;
+    /** Line under the table, at the end. */
+    note?: DisplayContent;
+    /** Scrolls the rows past this height, with the header and footer pinned (px or CSS length). */
+    maxHeight?: number | string;
+    /** Defaults to `bordered`. */
+    surface?: DisplaySurface;
+}

package/dist/runtime/display/types/blocks/text.d.ts

@@ -0,0 +1,22 @@
+import type { DisplayBlockBase, DisplayContent, DisplayTone } from '../shared.js';
+export type DisplayTextAppearance = 'body' | 'lead' | 'muted' | 'caption' | 'quote' | 'legal' | 'prose';
+export type DisplayTextSlot = 'root' | 'header' | 'icon' | 'title' | 'paragraph' | 'footer' | 'toggle';
+export interface DisplayTextProps extends DisplayBlockBase<DisplayTextSlot> {
+    /** Defaults to `body`. `prose` styles rich content: links, lists, bold, inline code. */
+    appearance?: DisplayTextAppearance;
+    text?: DisplayContent;
+    /** Several paragraphs, drawn after `text`. */
+    paragraphs?: readonly DisplayContent[];
+    /** Heading of a `legal` block. */
+    title?: DisplayContent;
+    /** Icon before the `legal` title or the `caption` text. */
+    icon?: string;
+    /** `quote` attribution, such as the author's name. */
+    author?: DisplayContent;
+    /** Second part of the attribution line, such as a date. */
+    meta?: DisplayContent;
+    /** Accent of the `quote` bar and the `legal` rule. Defaults to `primary` and `neutral`. */
+    tone?: DisplayTone;
+    /** Clamps the text to this many lines with a "Read more" toggle when it overflows. */
+    maxLines?: number;
+}