@abyss-project/commons-front-core 5.0.1 → 7.0.0

package/dist/components/data/DataTable/data-table.types.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { Density } from '../../../theme/augmentation';
+import { ActionBarAction } from '../../mobile';
+export declare enum ColumnAlign {
+    Left = "left",
+    Right = "right"
+}
+/** Which columns stay on a tablet (768 to 1199 px): `Optional` ones are hidden there. */
+export declare enum ColumnPriority {
+    Essential = "essential",
+    Default = "default",
+    Optional = "optional"
+}
+export interface DataColumn<T> {
+    id: string;
+    header: string;
+    cell(row: T): ReactNode;
+    /**
+     * The full text of the cell, shown as its `title` (the cell is cut by an ellipsis). Defaults to
+     * the content of `cell(row)` when that is a string; any column whose rendering can be cut and
+     * is not a plain string must provide it.
+     */
+    text?(row: T): string;
+    /** Column width (`120`, `'20%'`); the columns without one share the rest. */
+    width?: number | string;
+    align?: ColumnAlign;
+    sortable?: boolean;
+    /** Sets the cells in the mono family (amounts, identifiers, dates). */
+    mono?: boolean;
+    /** `Default` when absent; an `Optional` column is hidden from 768 to 1199 px. */
+    priority?: ColumnPriority;
+}
+export interface DataTableSelection {
+    selected: string[];
+    onChange(ids: string[]): void;
+    /** Buttons of the bulk bar above the table, and of the `ActionBar` below 768 px. */
+    bulkActions: ActionBarAction[];
+}
+export declare enum SortDirection {
+    Asc = "asc",
+    Desc = "desc"
+}
+export interface DataTableSort {
+    columnId: string;
+    direction: SortDirection;
+    onChange(columnId: string): void;
+}
+export interface DataTableMobileRow<T> {
+    primary(row: T): ReactNode;
+    secondary(row: T): ReactNode;
+    trailing?(row: T): ReactNode;
+}
+export interface DataTableProps<T> {
+    columns: DataColumn<T>[];
+    rows: T[];
+    getRowId(row: T): string;
+    /** Row height; the theme density by default. */
+    density?: Density;
+    selection?: DataTableSelection;
+    sort?: DataTableSort;
+    onRowClick?(row: T): void;
+    loading: boolean;
+    /** Shown in place of the rows when there is none and nothing loads. */
+    empty: ReactNode;
+    /** The two-level item that replaces a row below 768 px. */
+    mobileRow: DataTableMobileRow<T>;
+}

package/dist/components/data/DataTable/use-row-navigation.d.ts

@@ -0,0 +1,17 @@
+import { KeyboardEvent } from 'react';
+import { DataTableProps } from './data-table.types';
+export interface RowNavigation<T> {
+    /** `0` on the row that holds the single tab stop of the body, `-1` on the others. */
+    tabIndexOf(index: number): 0 | -1;
+    isSelected(row: T): boolean;
+    toggle(row: T): void;
+    register(index: number): (element: HTMLElement | null) => void;
+    onFocus(index: number): void;
+    onKeyDown(event: KeyboardEvent<HTMLElement>, index: number, row: T): void;
+}
+/**
+ * Selection and keyboard model shared by the table and the mobile list: one tab stop on the rows
+ * (roving tabindex), arrows, Home and End move between rows, Space toggles the selection, Enter
+ * opens the row. Keys pressed on an element inside the row are left to that element.
+ */
+export declare const useRowNavigation: <T>({ rows, getRowId, selection, onRowClick, }: Pick<DataTableProps<T>, "rows" | "getRowId" | "selection" | "onRowClick">) => RowNavigation<T>;

package/dist/components/data/KeyValueList/KeyValueList.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface KeyValueItem {
+    id: string;
+    label: string;
+    value: ReactNode;
+    /** Sets the value in the mono family (amounts, identifiers, dates). */
+    mono?: boolean;
+}
+export interface KeyValueListProps {
+    items: KeyValueItem[];
+}
+/** Label and value pairs of a detail panel (`.kv`): label muted on the left, value on the right. */
+export declare function KeyValueList({ items }: KeyValueListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/Sparkline/Sparkline.d.ts

@@ -0,0 +1,15 @@
+import { SemanticToken } from '../../../theme/tokens/semantic';
+export interface SparklineProps {
+    values: number[];
+    /** Color of the bars at or above zero (`accent` by default); bars below zero take `status.danger`. */
+    tone?: SemanticToken;
+    /** Height in px; `space[7]` (32) by default. */
+    height?: number;
+    /** Accessible name: what the series shows. */
+    label: string;
+}
+/**
+ * A small bar series (`.spark`) drawn in SVG: one bar per value from a zero baseline, so a
+ * negative value hangs below it. Stretches to the width of its container.
+ */
+export declare function Sparkline({ values, tone, height, label, }: SparklineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/StatTile/StatTile.d.ts

@@ -0,0 +1,21 @@
+import { SemanticToken } from '../../../theme/tokens/semantic';
+export interface StatTileDelta {
+    /** Already formatted by the host (`+12 %`, `− 3`). */
+    value: string;
+    tone: SemanticToken;
+}
+export interface StatTileProps {
+    label: string;
+    /** Already formatted by the host (`intl.formatNumber`). */
+    value: string;
+    unit?: string;
+    delta?: StatTileDelta;
+    trend?: number[];
+    /** Route inside the app: the whole tile becomes a link. */
+    href?: string;
+}
+/**
+ * One key figure (`.kpi`): label, figure in mono with its unit, a colored delta and an optional
+ * trend. With `href`, the whole tile is a router link.
+ */
+export declare function StatTile({ label, value, unit, delta, trend, href, }: StatTileProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/chart-theme.d.ts

@@ -0,0 +1,7 @@
+import { ThemeMode } from '../../theme/tokens/primitives';
+/**
+ * The Nivo chart theme of the design system for `mode`. Every color comes from `resolveTokens(mode)`
+ * and every chart figure is set in the mono family. Typed as a plain record: the core does not bind
+ * its public surface to a Nivo version (hosts run 0.88 and 0.99); pass it to the `theme` prop.
+ */
+export declare function abyssNivoTheme(mode: ThemeMode): Record<string, unknown>;

package/dist/components/data/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DataTable/DataTable';
+export * from './KeyValueList/KeyValueList';
+export * from './StatTile/StatTile';
+export * from './Sparkline/Sparkline';
+export * from './chart-theme';

package/dist/components/index.d.ts

@@ -1,20 +1,8 @@
-export * from './Avatars';
-export * from './Banking';
-export * from './Cards';
-export * from './Charts';
-export * from './Chips';
-export * from './CommandPalette';
-export * from './CompanySearchAutocomplete';
-export * from './CookieConsent';
-export * from './Data';
-export * from './InfoBox';
-export * from './Inputs';
-export * from './Layouts';
-export * from './Modals';
-export * from './Utils';
-export * from './Support';
-export * from './Invitations';
-export * from './PdfEditor';
-export * from './QuotaGauge';
-export * from './QuotaOffer';
-export * from './QuotaReached';
+export * from './business';
+export * from './data';
+export * from './inputs';
+export * from './layers';
+export * from './meaning';
+export * from './mobile';
+export * from './states';
+export * from './structure';

package/dist/components/inputs/ColorField/ColorField.d.ts

@@ -0,0 +1,15 @@
+export interface ColorFieldProps {
+    label: string;
+    value: string;
+    onChange(hex: string): void;
+    /** Colors offered as one-click choices. They belong to the caller's domain, not to the core. */
+    swatches: string[];
+}
+/** `#rrggbb` or `rrggbb` as lowercase `#rrggbb`; `null` when it is not a 6-digit hexadecimal. */
+export declare const normalizeHex: (input: string) => string | null;
+/**
+ * A color input: a hexadecimal text field with a preview, plus the caller's swatches. Typing
+ * emits `onChange` once the text is a valid `#rrggbb` (the `#` is optional, the case is normalized); any
+ * other text shows a message and emits nothing. The swatches are toggle buttons in a labelled group.
+ */
+export declare function ColorField({ label, value, onChange, swatches, }: ColorFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DateField/DateField.d.ts

@@ -0,0 +1,14 @@
+export interface DateFieldProps {
+    label: string;
+    value: Date | null;
+    onChange(date: Date | null): void;
+    minDate?: Date;
+    maxDate?: Date;
+    error?: string;
+}
+/**
+ * A date input with its calendar. The label sits above the field (theme override of the input
+ * label). `onChange` only receives a complete date inside `minDate`..`maxDate`, or `null` when the
+ * field is emptied; a half-typed or out-of-range date shows a message and is not emitted.
+ */
+export declare function DateField({ label, value, onChange, minDate, maxDate, error, }: DateFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DateRangeField/DateRangeField.d.ts

@@ -0,0 +1,24 @@
+export interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+export interface DateRangePreset {
+    id: string;
+    label: string;
+    range(): {
+        from: Date;
+        to: Date;
+    };
+}
+export interface DateRangeFieldProps {
+    label: string;
+    value: DateRange;
+    onChange(value: DateRange): void;
+    presets?: DateRangePreset[];
+}
+/**
+ * A period input: a start date, an end date and optional presets. A range whose end comes before
+ * its start is refused with a message and is never emitted; the calendars also disable the dates
+ * that would make it.
+ */
+export declare function DateRangeField({ label, value, onChange, presets, }: DateRangeFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/RichSelect/RichSelect.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { SemanticToken } from '../../../theme/tokens/semantic';
+import { RichSelectSize } from './rich-select-size';
+export { RichSelectSize };
+export interface RichOption<V extends string> {
+    value: V;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    tone?: SemanticToken;
+}
+export interface RichSelectProps<V extends string> {
+    label: string;
+    options: RichOption<V>[];
+    value: V | V[];
+    onChange(value: V | V[]): void;
+    multiple?: boolean;
+    disabled?: boolean;
+    error?: string;
+    /**
+     * `Compact` hides the label visually (it still names the field) and sizes the field to its
+     * content, for a filter row. Defaults to the size `FilterBar` provides, else `Medium`.
+     */
+    size?: RichSelectSize;
+}
+/**
+ * A select whose options carry an icon, a tone dot and a description (`.sel`). The listbox is the
+ * one of MUI `Select`: Enter, Space and the arrow keys open it, the arrows move, Enter or Space
+ * picks, Escape closes it.
+ */
+export declare function RichSelect<V extends string>({ label, options, value, onChange, multiple, disabled, error, size, }: RichSelectProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/RichSelect/rich-select-size.d.ts

@@ -0,0 +1,11 @@
+import { Context } from 'react';
+/** How a `RichSelect` is drawn: label above the control, or label hidden (a filter row). */
+export declare enum RichSelectSize {
+    Medium = "medium",
+    Compact = "compact"
+}
+/**
+ * Size taken by the `RichSelect`s that do not set one: `FilterBar` provides `Compact` to its inline
+ * filters, so they line up with the search field.
+ */
+export declare const RichSelectSizeContext: Context<RichSelectSize>;

package/dist/components/inputs/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,17 @@
+export interface SegmentedOption<V extends string> {
+    value: V;
+    label: string;
+    count?: number;
+}
+export interface SegmentedControlProps<V extends string> {
+    options: SegmentedOption<V>[];
+    value: V;
+    onChange(value: V): void;
+    ariaLabel: string;
+}
+/**
+ * A segmented choice (`.seg`): one option is selected at a time. A `radiogroup` with a roving tab
+ * stop: Tab enters on the selected option, arrow keys move the selection (wrapping), Home and End
+ * jump to the ends.
+ */
+export declare function SegmentedControl<V extends string>({ options, value, onChange, ariaLabel, }: SegmentedControlProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/date-localization.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+/**
+ * The calendar popup of the date fields: a floating layer, bordered and lifted by the `overlay`
+ * elevation, so it stands out from the canvas in light mode too.
+ */
+export declare const calendarPaperSx: SxProps<Theme>;
+/**
+ * Wraps the date pickers of the design system: date-fns adapter (the one every app and the legacy
+ * pickers of the core already use), the locale of the viewer and the French or English labels of the
+ * calendar, taken from the core translations.
+ */
+export declare function DatesProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** A date the pickers can hold: never an `Invalid Date` that comes from a half-typed field. */
+export declare const isCompleteDate: (date: Date | null) => date is Date;

package/dist/components/inputs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './RichSelect/RichSelect';
+export * from './DateField/DateField';
+export * from './DateRangeField/DateRangeField';
+export * from './ColorField/ColorField';
+export * from './SegmentedControl/SegmentedControl';

package/dist/components/inputs/test-support/inputs-test-harness.d.ts

@@ -0,0 +1 @@
+export { MODES, focusRingColor, renderIn, rgb, styleText, } from '../../mobile/test-support/mobile-test-harness';

package/dist/components/layers/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { Command } from './command-registry';
+export type { Command } from './command-registry';
+export interface CommandPaletteApi {
+    /** Opens the palette, as `Ctrl+K` / `Cmd+K` does. */
+    open(): void;
+    /**
+     * Runs the registered command `id` (closing the palette first if it is open) and returns `true`;
+     * returns `false` when no mounted component registers that command.
+     */
+    execute(id: string): boolean;
+}
+export interface CommandPaletteProviderProps {
+    children: ReactNode;
+}
+/**
+ * Holds the commands the mounted screens register and the palette that lists them. `Ctrl+K` /
+ * `Cmd+K` opens it anywhere in the page; `useCommandPalette().execute(id)` runs a command by its
+ * identifier, for the voice and MCP clients.
+ */
+export declare function CommandPaletteProvider({ children, }: CommandPaletteProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Registers `commands` while the calling component is mounted. Pass a memoized array: a new array
+ * replaces the previous one at each render.
+ */
+export declare const useRegisterCommands: (commands: Command[]) => void;
+/** Opens the palette and runs commands by identifier. */
+export declare const useCommandPalette: () => CommandPaletteApi;

package/dist/components/layers/CommandPalette/command-registry.d.ts

@@ -0,0 +1,38 @@
+/** An action of the application, reachable from the palette and by its identifier. */
+export interface Command {
+    /** Stable identifier: the address the voice and MCP clients use to run the action. */
+    id: string;
+    label: string;
+    /** Heading the command is listed under in the palette. */
+    group: string;
+    /** Extra words the search matches, such as synonyms. */
+    keywords?: string[];
+    /** Shortcut hint shown next to the command; the palette binds no key for it. */
+    shortcut?: string;
+    run(): void;
+}
+/**
+ * The commands every mounted `useRegisterCommands` call contributes, as an external store. A
+ * registration is replaced in place when its commands change, so the listing order stays the
+ * mount order; when two registrations share an identifier, the most recent command wins.
+ */
+export declare class CommandRegistry {
+    private readonly registrations;
+    private readonly listeners;
+    private snapshot;
+    register(key: symbol, commands: Command[]): void;
+    unregister(key: symbol): void;
+    find(id: string): Command | undefined;
+    readonly subscribe: (listener: () => void) => (() => void);
+    readonly getSnapshot: () => Command[];
+    private refresh;
+}
+export interface CommandGroup {
+    name: string;
+    commands: Command[];
+}
+/**
+ * The commands whose label, group or keywords contain every word of `query` (case and accents
+ * ignored), grouped in the order their group first appears.
+ */
+export declare const searchCommands: (commands: Command[], query: string) => CommandGroup[];

package/dist/components/layers/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export declare enum ConfirmDialogTone {
+    Default = "default",
+    Danger = "danger"
+}
+export interface ConfirmDialogProps {
+    open: boolean;
+    title: string;
+    body: ReactNode;
+    confirmLabel: string;
+    /** `danger` paints the confirm button in `status.danger` and starts the focus on « Annuler ». */
+    tone?: ConfirmDialogTone;
+    /** Text the user must type, exactly, before the confirm button is enabled. */
+    confirmationText?: string;
+    /**
+     * Runs on confirm. A returned promise keeps the dialog pending (confirm button loading, cancel and
+     * Escape inactive); a rejection shows a generic failure message and lets the user retry. The host
+     * closes the dialog itself once the action succeeded.
+     */
+    onConfirm(): void | Promise<void>;
+    onCancel(): void;
+}
+/** A modal that asks the user to confirm an action, optionally by typing a confirmation text. */
+export declare function ConfirmDialog({ open, title, body, confirmLabel, tone, confirmationText, onConfirm, onCancel, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layers/Drawer/Drawer.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export declare enum DrawerAnchor {
+    Left = "left",
+    Right = "right"
+}
+export interface DrawerProps {
+    open: boolean;
+    onClose(): void;
+    /** Edge the drawer slides from, `right` by default. */
+    anchor?: DrawerAnchor;
+    title: string;
+    /** Width in px, capped to the viewport; the `sm` breakpoint (480) by default. */
+    width?: number;
+    children: ReactNode;
+}
+/**
+ * A side panel over the page, sliding from the left or right edge. Focus is trapped inside and
+ * returns to the opener on close; Escape, the scrim and the close button close it.
+ */
+export declare function Drawer({ open, onClose, anchor, title, width, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layers/Menu/Menu.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export declare enum MenuItemTone {
+    Default = "default",
+    Danger = "danger"
+}
+/** A separator line between two groups of items. */
+export declare enum MenuSeparator {
+    Divider = "divider"
+}
+export interface MenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Shortcut hint shown at the end of the row, such as `⌘D`; the host binds the key itself. */
+    shortcut?: string;
+    tone?: MenuItemTone;
+    disabled?: boolean;
+    onSelect(): void;
+}
+export interface MenuProps {
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    onClose(): void;
+    items: (MenuItem | MenuSeparator)[];
+}
+/**
+ * A menu of actions anchored to an element (`.menu`), on the `overlay` elevation. Arrow keys move
+ * between the enabled items, Enter or Space selects, Escape and Tab close it and the focus returns
+ * to the anchor.
+ */
+export declare function Menu({ anchorEl, open, onClose, items }: MenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layers/Modal/Modal.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+/** Maximum width of the modal: the `sm`, `md` or `lg` breakpoint of the theme. */
+export declare enum ModalSize {
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+export interface ModalProps {
+    open: boolean;
+    onClose(): void;
+    title: string;
+    description?: string;
+    size?: ModalSize;
+    /** Buttons of the footer, right-aligned; the first focus goes to the one carrying `autoFocus`. */
+    actions?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * A modal dialog (`.modal`): header with title, description and close button, scrolling body,
+ * footer of actions. Focus is trapped inside and returns to the opener on close; Escape and the
+ * scrim close it. Below the `md` breakpoint it is presented as a `BottomSheet`.
+ */
+export declare function Modal({ open, onClose, title, description, size, actions, children, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layers/Toast/Toast.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+export declare enum ToastTone {
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger",
+    Info = "info"
+}
+export interface ToastAction {
+    label: string;
+    onPress(): void;
+}
+export interface ToastOptions {
+    tone: ToastTone;
+    message: string;
+    action?: ToastAction;
+}
+export interface ToastApi {
+    show(toast: ToastOptions): void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+}
+/**
+ * Time a toast stays on screen, in ms, counted again from the start each time the pointer or the
+ * focus leaves it. Not an ADR-0166 value: the ADR fixes animation durations only.
+ */
+export declare const TOAST_DURATION = 5000;
+/**
+ * Holds the toasts of the application and renders them in a live region at the bottom right (full
+ * width below `md`), on the `overlay` elevation. Mount it once, inside the theme and the messages.
+ */
+export declare function ToastProvider({ children }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Shows toasts from any component below a `ToastProvider`. */
+export declare const useToast: () => ToastApi;

package/dist/components/layers/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Modal/Modal';
+export * from './ConfirmDialog/ConfirmDialog';
+export * from './Drawer/Drawer';
+export * from './Menu/Menu';
+export * from './Toast/Toast';
+export * from './CommandPalette/CommandPalette';

package/dist/components/layers/test-support/layers-test-harness.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { RenderResult } from '@testing-library/react';
+import { Theme } from '@mui/material/styles';
+import { ThemeMode } from '../../../theme';
+export { cssColor, currentOutlineColor, focusRingColor, pressTab, restoreViewport, tabbableElements, THEME_MODES, VIEWPORT, } from '../../structure/test-support/structure-test-harness';
+export interface LayerRenderOptions {
+    mode?: ThemeMode;
+    width?: number;
+}
+export interface LayerRenderResult extends Omit<RenderResult, 'rerender'> {
+    theme: Theme;
+    /** Re-renders `next` inside the same theme and messages. */
+    rerender(next: ReactElement): void;
+}
+/** Renders `ui` under the design system theme and the French messages, at a viewport `width`. */
+export declare const renderLayer: (ui: ReactElement, { mode, width }?: LayerRenderOptions) => LayerRenderResult;
+/** The `#rrggbb` token as jsdom reports a computed color. */
+export declare const rgb: (hex: string) => string;
+/** A box-shadow as jsdom serializes it once applied to an element. */
+export declare const cssShadow: (value: string) => string;
+/** The MUI modal root around `layer`: its focus trap keeps the focus inside this root. */
+export declare const layerOf: (layer: HTMLElement) => HTMLElement;

package/dist/components/meaning/MethodBadge/MethodBadge.d.ts

@@ -0,0 +1,6 @@
+import { HttpMethod } from '../../../theme/tokens/domain';
+export interface MethodBadgeProps {
+    method: HttpMethod;
+}
+/** An HTTP verb, in mono, one color per verb. */
+export declare const MethodBadge: ({ method }: MethodBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/RoleBadge/RoleBadge.d.ts

@@ -0,0 +1,7 @@
+import { AccessLevel } from '../../../theme/tokens/domain';
+export interface RoleBadgeProps {
+    level: AccessLevel;
+    label: string;
+}
+/** An access level (owner, admin, write, read) told by color and by the host's own label. */
+export declare const RoleBadge: ({ level, label }: RoleBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/ScanBadge/ScanBadge.d.ts

@@ -0,0 +1,8 @@
+import { ScanVerdict } from '../../../theme/tokens/domain';
+export interface ScanBadgeProps {
+    verdict: ScanVerdict;
+    /** Extra explanation (scanner message), exposed as the native tooltip of the badge. */
+    detail?: string;
+}
+/** The antivirus verdict of a file. */
+export declare const ScanBadge: ({ verdict, detail }: ScanBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/SeverityBadge/SeverityBadge.d.ts

@@ -0,0 +1,6 @@
+import { LogSeverity } from '../../../theme/tokens/domain';
+export interface SeverityBadgeProps {
+    severity: LogSeverity;
+}
+/** A log level, in mono capitals; error and fatal share the danger color and differ by label. */
+export declare const SeverityBadge: ({ severity }: SeverityBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,15 @@
+export declare enum StatusTone {
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger",
+    Info = "info",
+    Highlight = "highlight",
+    Neutral = "neutral"
+}
+export interface StatusBadgeProps {
+    tone: StatusTone;
+    label: string;
+    dot?: boolean;
+}
+/** A state or outcome told by color and by its label, with an optional leading dot. */
+export declare const StatusBadge: ({ tone, label, dot }: StatusBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/ToolIcon/ToolIcon.d.ts

@@ -0,0 +1,10 @@
+import { ToolKind } from '../../../theme/tokens/domain';
+export type ToolIconSize = 16 | 20 | 24 | 32 | 44;
+export interface ToolIconProps {
+    tool: ToolKind;
+    size?: ToolIconSize;
+    /** Accessible name; without it the icon is decorative and hidden from assistive technology. */
+    label?: string;
+}
+/** A product icon: its SVG used as a mask over the brand gradient. */
+export declare const ToolIcon: ({ tool, size, label }: ToolIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/index.d.ts

@@ -0,0 +1,6 @@
+export * from './StatusBadge/StatusBadge';
+export * from './MethodBadge/MethodBadge';
+export * from './SeverityBadge/SeverityBadge';
+export * from './ScanBadge/ScanBadge';
+export * from './RoleBadge/RoleBadge';
+export * from './ToolIcon/ToolIcon';