@aurea-uds/react 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/README.md +34 -2
  2. package/dist/actions.d.ts +20 -0
  3. package/dist/actions.js +59 -5
  4. package/dist/agents.d.ts +209 -0
  5. package/dist/agents.js +302 -0
  6. package/dist/calendar.d.ts +6 -0
  7. package/dist/calendar.js +27 -0
  8. package/dist/chart.d.ts +10 -0
  9. package/dist/chart.js +53 -0
  10. package/dist/code-client.d.ts +6 -0
  11. package/dist/code-client.js +24 -0
  12. package/dist/code-editor.js +1 -0
  13. package/dist/code.d.ts +2 -13
  14. package/dist/code.js +5 -18
  15. package/dist/communication.js +1 -0
  16. package/dist/data-display-client.d.ts +14 -0
  17. package/dist/data-display-client.js +22 -0
  18. package/dist/data-display.d.ts +2 -23
  19. package/dist/data-display.js +5 -13
  20. package/dist/data-grid.d.ts +52 -3
  21. package/dist/data-grid.js +205 -25
  22. package/dist/feedback-client.d.ts +64 -0
  23. package/dist/feedback-client.js +110 -0
  24. package/dist/feedback.d.ts +2 -53
  25. package/dist/feedback.js +5 -71
  26. package/dist/file-input.d.ts +21 -2
  27. package/dist/file-input.js +202 -21
  28. package/dist/graph.d.ts +33 -0
  29. package/dist/graph.js +178 -0
  30. package/dist/identity-client.d.ts +9 -0
  31. package/dist/identity-client.js +12 -0
  32. package/dist/identity.d.ts +2 -8
  33. package/dist/identity.js +5 -3
  34. package/dist/index.d.ts +4 -1
  35. package/dist/index.js +33 -3
  36. package/dist/inputs-client.d.ts +105 -0
  37. package/dist/inputs-client.js +264 -0
  38. package/dist/inputs.d.ts +2 -65
  39. package/dist/inputs.js +9 -61
  40. package/dist/internal.d.ts +23 -70
  41. package/dist/internal.js +115 -23
  42. package/dist/layout-client.d.ts +9 -0
  43. package/dist/layout-client.js +72 -0
  44. package/dist/layout.d.ts +2 -14
  45. package/dist/layout.js +5 -22
  46. package/dist/markup.d.ts +72 -0
  47. package/dist/markup.js +87 -0
  48. package/dist/media-client.d.ts +36 -0
  49. package/dist/media-client.js +239 -0
  50. package/dist/media.d.ts +2 -9
  51. package/dist/media.js +5 -98
  52. package/dist/navigation-client.d.ts +94 -0
  53. package/dist/navigation-client.js +154 -0
  54. package/dist/navigation.d.ts +2 -59
  55. package/dist/navigation.js +5 -113
  56. package/dist/overlays.d.ts +28 -0
  57. package/dist/overlays.js +66 -10
  58. package/dist/pure.d.ts +196 -0
  59. package/dist/pure.js +111 -0
  60. package/dist/qrcode.d.ts +2 -1
  61. package/dist/qrcode.js +3 -2
  62. package/dist/system.d.ts +11 -1
  63. package/dist/system.js +59 -4
  64. package/package.json +40 -4
package/README.md CHANGED
@@ -35,14 +35,46 @@ the system without the rest:
35
35
  import {Button} from "@aurea-uds/react/actions";
36
36
  ```
37
37
 
38
- Three components carry a heavy optional dependency and are therefore **outside the barrel** —
39
- importing a Button must never pull in a code editor:
38
+ Six modules carry an optional engine and are therefore **outside the barrel** — importing a
39
+ Button must never pull in a peer you did not install:
40
40
 
41
41
  | Import | Needs you to install |
42
42
  |---|---|
43
43
  | `@aurea-uds/react/code-editor` | `codemirror` and its `@codemirror/*` packages |
44
44
  | `@aurea-uds/react/data-grid` | `@tanstack/react-table` |
45
45
  | `@aurea-uds/react/qrcode` | `qr` |
46
+ | `@aurea-uds/react/calendar` | `react-day-picker` |
47
+ | `@aurea-uds/react/chart` | `recharts` |
48
+ | `@aurea-uds/react/graph` | `@xyflow/react` |
49
+
50
+ ## Hooks
51
+
52
+ Four of them are public, and they are the part of the API that has **no page in the catalogue** —
53
+ the catalogue documents components, and a hook is not one. Until that changes, this is where they
54
+ are written down.
55
+
56
+ ```js
57
+ import {AureaProvider, useToast} from "@aurea-uds/react";
58
+
59
+ function SaveButton() {
60
+ const toast = useToast(); // inside AureaProvider
61
+ return <Button onClick={() => toast.add({
62
+ title: "Saved",
63
+ description: "Two files uploaded.",
64
+ type: "success", // info | success | warning | danger
65
+ })}>Save</Button>;
66
+ }
67
+ ```
68
+
69
+ The stack renders itself: `AureaProvider` already mounts the viewport, so there is no `<Toaster/>`
70
+ to place and no second provider to install.
71
+
72
+ | Hook | What it gives you |
73
+ |---|---|
74
+ | `useToast()` | `add({title, description, type})`, plus `close(id)` and the live list. The queue is Base UI's |
75
+ | `useAureaTheme()` | reads and sets **both** axes on `<html>`: `theme` (`dark`/`light`) and `density`. `theme` is `null` on the server — do not draw theme-dependent UI until it isn't |
76
+ | `useAureaStrings()` | the label dictionary, merged with what you passed to the provider |
77
+ | `useSpriteUrl()` | where the icon sprite is being loaded from |
46
78
 
47
79
  ## Requirements
48
80
 
package/dist/actions.d.ts CHANGED
@@ -14,6 +14,25 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Re
14
14
  kbd?: string;
15
15
  }
16
16
  export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
17
+ interface ToggleBase {
18
+ pressed?: boolean;
19
+ defaultPressed?: boolean;
20
+ onPressedChange?: (pressed: boolean) => void;
21
+ icon?: IconName;
22
+ size?: Extract<ComponentSize, "sm" | "md" | "lg">;
23
+ disabled?: boolean;
24
+ id?: string;
25
+ className?: string;
26
+ }
27
+ type ToggleChildren = Exclude<React.ReactNode, boolean | null | undefined>;
28
+ export type ToggleProps = ToggleBase & ({
29
+ children: ToggleChildren;
30
+ label?: string;
31
+ } | {
32
+ children?: never;
33
+ label: string;
34
+ });
35
+ export declare function Toggle({ pressed, defaultPressed, onPressedChange, icon, label, size, disabled, id, className, children }: ToggleProps): React.JSX.Element;
17
36
  export interface IconButtonProps extends Omit<ButtonProps, "children"> {
18
37
  label: string;
19
38
  icon: IconName;
@@ -31,3 +50,4 @@ export declare function ToolbarGroup({ label, className, ...props }: HTMLAttribu
31
50
  }): React.JSX.Element;
32
51
  export declare function ToolbarSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
33
52
  export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
53
+ export {};
package/dist/actions.js CHANGED
@@ -1,24 +1,78 @@
1
+ "use client";
1
2
  import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
3
4
  // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
4
5
  // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
5
- import { forwardRef } from "react";
6
+ import React, { forwardRef } from "react";
6
7
  import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
7
- import { cx, useAureaStrings, Kbd } from "./internal.js";
8
+ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
9
+ import { cx, useAureaStrings } from "./internal.js";
10
+ import { Kbd } from "./markup.js";
8
11
  import { Icon } from "./system.js";
9
12
  // type="button" por default: o default do HTML é submit, e um "Cancelar"/"Remover"
10
13
  // dentro de <form> dispararia a ação principal (auditoria 18/07/2026, ALTO 1).
11
14
  // Quem quer submeter passa type="submit" explícito (como o MessageComposer faz).
12
- export const Button = forwardRef(function Button({ variant = "secondary", size = "md", loading, leadingIcon, trailingIcon, className, children, disabled, type = "button", href, fullWidth, pressed, kbd, ...props }, ref) {
15
+ export const Button = forwardRef(function Button({ variant = "secondary", size = "md", loading, leadingIcon, trailingIcon, className, children, disabled, type = "button", href, fullWidth, pressed, kbd, onClick, onClickCapture, "aria-disabled": ariaDisabled, ...props }, ref) {
13
16
  const cls = cx("btn", `btn-${variant}`, size !== "md" && `btn-${size}`, fullWidth && "btn-block", className);
14
17
  // kbd dentro do botão: mostra o atalho E o anuncia (aria-keyshortcuts), senão é enfeite.
15
18
  const inner = _jsxs(_Fragment, { children: [loading && _jsx("span", { className: "spinner" }), leadingIcon && _jsx(Icon, { name: leadingIcon }), _jsx("span", { children: children }), kbd && _jsx(Kbd, { children: kbd }), trailingIcon && _jsx(Icon, { name: trailingIcon })] });
19
+ // INERTE ≠ DESABILITADO, e a diferença é medida (M4, 13/08/2026): `disabled` tira o botão da
20
+ // ordem de foco, então quem navega por teclado nunca alcança a explicação de POR QUE não dá — e
21
+ // "não dá porque você não tem permissão" é justamente o caso em que a explicação é tudo. O
22
+ // embrulho de <span> que o MUI documenta resolve o ponteiro e não resolve o teclado (span nasce
23
+ // com tabIndex -1, medido). Com `aria-disabled` o botão continua focável e anunciado como
24
+ // desabilitado, e é ESTE componente que tem de barrar a ativação — o atributo é só semântica.
25
+ // Mesmo remendo do AUD-0004, que já barrava o link desabilitado; aqui ele alcança o <button>.
26
+ const inerte = ariaDisabled === true || ariaDisabled === "true";
16
27
  const off = disabled || loading;
17
28
  const shared = { "aria-keyshortcuts": kbd || undefined, "aria-busy": loading || undefined };
29
+ // AUD-0004 (12/08/2026): o ramo de LINK desabilitado tirava o `href` e punha `aria-disabled`, e
30
+ // deixava o `onClick` passar intacto — então um link "desabilitado" continuava executando a ação
31
+ // ao ser clicado, e o `loading` também. Não há `disabled` em `<a>`: quem tem de barrar a ativação
32
+ // é este componente. O ramo de `<button>` nunca teve o defeito, porque `disabled` no elemento
33
+ // nativo já barra o evento — por isso a correção mora só aqui.
34
+ // Os dois handlers de click saem de `props`: no React, onClickCapture roda antes do onClick e
35
+ // também precisa ser barrado. `stopPropagation` evita o handler de bolha em um ancestral.
36
+ const bloqueia = (e) => { e.preventDefault(); e.stopPropagation(); };
37
+ const eventos = (off || inerte) ? { onClick: bloqueia, onClickCapture: bloqueia } : { onClick: onClick, onClickCapture: onClickCapture };
18
38
  if (href !== undefined)
19
- return _jsx("a", { ref: ref, className: cls, ...(off ? { "aria-disabled": true } : { href }), ...shared, ...props, children: inner });
20
- return _jsx("button", { ref: ref, type: type, className: cls, disabled: off, "aria-pressed": pressed, ...shared, ...props, children: inner });
39
+ return _jsx("a", { ref: ref, className: cls, ...shared, ...props, ...(off ? { "aria-disabled": true } : { href }), ...eventos, children: inner });
40
+ return _jsx("button", { ref: ref, type: type, className: cls, disabled: off, "aria-disabled": inerte || undefined, "aria-pressed": pressed, ...shared, ...(inerte ? { onClick: bloqueia, onClickCapture: bloqueia } : { onClick, onClickCapture }), ...props, children: inner });
21
41
  });
42
+ function temConteudoVisivel(children) {
43
+ const itens = React.Children.toArray(children);
44
+ return itens.some(item => {
45
+ if (typeof item === "string")
46
+ return item.trim().length > 0;
47
+ if (typeof item === "number" || typeof item === "bigint")
48
+ return true;
49
+ if (!React.isValidElement(item))
50
+ return false;
51
+ const p = item.props;
52
+ if (p["aria-hidden"] === true || p["aria-hidden"] === "true")
53
+ return false;
54
+ if (typeof p["aria-label"] === "string" && p["aria-label"].trim())
55
+ return true;
56
+ if (typeof p.alt === "string" && p.alt.trim())
57
+ return true;
58
+ // Inspecionar `children` também cobre Fragment e elementos formatadores. Componente arbitrário
59
+ // sem conteúdo inspecionável é tratado de modo conservador: precisa fornecer `label`.
60
+ return temConteudoVisivel(p.children);
61
+ });
62
+ }
63
+ export function Toggle({ pressed, defaultPressed, onPressedChange, icon, label, size = "md", disabled, id, className, children }) {
64
+ // O tipo barra o consumidor TypeScript; este aviso barra o de JavaScript, que não tem tipo nenhum.
65
+ // Sem gate por NODE_ENV de propósito: o `dist` é saída de `tsc`, então `process` não existe no
66
+ // navegador e a referência quebraria o render — e um controle sem nome merece aparecer em produção
67
+ // também. Segue o idioma do próprio motor, que usa `console.error` para invariante violada.
68
+ // O tipo barra false/null/undefined diretos. Runtime ainda precisa cobrir os vazios que o tipo não
69
+ // consegue expressar: string em branco, array/Fragment vazio e elemento só decorativo.
70
+ const textoVisivel = temConteudoVisivel(children);
71
+ const rotuloVisivel = typeof label === "string" && label.trim().length > 0;
72
+ if (!textoVisivel && !rotuloVisivel)
73
+ console.error("Aurea: <Toggle> sem `children` visível e sem `label` não tem nome acessível — quem usa leitor de tela encontra um botão anônimo. Passe `label` quando o toggle for só ícone.");
74
+ return _jsxs(BaseToggle, { id: id, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), className: cx("btn", "btn-ghost", size !== "md" && `btn-${size}`, !textoVisivel && "btn-icon", "toggle", className), children: [icon && _jsx(Icon, { name: icon }), children] });
75
+ }
22
76
  // default ghost (não secondary): um ícone-ação solto — hambúrguer, tema, fechar — é sem
23
77
  // caixa por convenção (pedido do Victor: hambúrguer sem borda). Quem quer a caixa passa
24
78
  // variant. Alinha o React ao HTML dos docs, onde .btn-icon já é transparente.
package/dist/agents.d.ts ADDED
@@ -0,0 +1,209 @@
1
+ import React, { type HTMLAttributes, type OlHTMLAttributes, type ReactNode, type RefAttributes } from "react";
2
+ import { type IconName } from "./system.js";
3
+ export type AgentState = "idle" | "thinking" | "running" | "paused" | "error" | "completed";
4
+ export declare function AgentStatus({ state, label, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
5
+ state?: AgentState;
6
+ label?: ReactNode;
7
+ }): React.JSX.Element;
8
+ export interface AgentCapability {
9
+ name: string;
10
+ description?: string;
11
+ icon?: IconName;
12
+ }
13
+ export declare function AgentCard({ name, description, avatarSrc, model, state, capabilities, actions, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
14
+ name: string;
15
+ description?: ReactNode;
16
+ avatarSrc?: string;
17
+ model?: string;
18
+ state?: AgentState;
19
+ capabilities?: AgentCapability[];
20
+ actions?: ReactNode;
21
+ }): React.JSX.Element;
22
+ export declare function AgentInspector({ title, sections, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
23
+ title: ReactNode;
24
+ sections?: Array<{
25
+ label: string;
26
+ items: Array<{
27
+ term: string;
28
+ value: ReactNode;
29
+ }>;
30
+ }>;
31
+ }): React.JSX.Element;
32
+ export interface InvocationStep {
33
+ id: string;
34
+ label: string;
35
+ detail?: string;
36
+ state?: "running" | "done" | "error";
37
+ content?: ReactNode;
38
+ }
39
+ export declare function InvocationPanel({ title, input, steps, output, running, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
40
+ title?: ReactNode;
41
+ input?: ReactNode;
42
+ steps?: InvocationStep[];
43
+ output?: ReactNode;
44
+ running?: boolean;
45
+ }): React.JSX.Element;
46
+ export type TaskState = "queued" | "running" | "completed" | "failed" | "blocked" | "paused";
47
+ export type TaskPriority = "low" | "medium" | "high";
48
+ export interface QueueTask {
49
+ id: string;
50
+ title: string;
51
+ description?: string;
52
+ state: TaskState;
53
+ priority?: TaskPriority;
54
+ progress?: number;
55
+ }
56
+ export declare function TaskQueue({ tasks, label, onRetry, className, ...props }: OlHTMLAttributes<HTMLOListElement> & RefAttributes<HTMLOListElement> & {
57
+ tasks: QueueTask[];
58
+ label?: string;
59
+ onRetry?: (task: QueueTask) => void;
60
+ }): React.JSX.Element;
61
+ export type RiskLevel = "low" | "medium" | "high";
62
+ export declare function HumanApproval({ title, description, details, risk, reasoning, deadline, decision, onApprove, onDeny, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
63
+ title: ReactNode;
64
+ description?: ReactNode;
65
+ details?: Array<{
66
+ term: string;
67
+ value: ReactNode;
68
+ }>;
69
+ risk?: RiskLevel;
70
+ reasoning?: ReactNode;
71
+ deadline?: ReactNode;
72
+ decision?: "approved" | "denied";
73
+ onApprove?: () => void;
74
+ onDeny?: () => void;
75
+ }): React.JSX.Element;
76
+ export type PermissionLevel = "ask" | "always" | "never";
77
+ export interface ToolPermissionEntry {
78
+ id: string;
79
+ name: string;
80
+ description?: string;
81
+ scope?: string;
82
+ permission: PermissionLevel;
83
+ }
84
+ export declare function ToolPermission({ tools, onChange, label, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
85
+ tools: ToolPermissionEntry[];
86
+ onChange?: (id: string, permission: PermissionLevel) => void;
87
+ label?: string;
88
+ }): React.JSX.Element;
89
+ export type EventSeverity = "info" | "success" | "warning" | "danger";
90
+ export interface StreamEvent {
91
+ id: string;
92
+ title: ReactNode;
93
+ time?: ReactNode;
94
+ severity?: EventSeverity;
95
+ detail?: ReactNode;
96
+ group?: string;
97
+ }
98
+ export declare function EventStream({ events, label, follow, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
99
+ events: StreamEvent[];
100
+ label?: string;
101
+ follow?: boolean;
102
+ }): React.JSX.Element;
103
+ export interface TraceSpan {
104
+ id: string;
105
+ label: ReactNode;
106
+ start: number;
107
+ end: number;
108
+ kind?: string;
109
+ depth?: number;
110
+ error?: boolean;
111
+ }
112
+ export declare function TraceTimeline({ spans, label, className, ...props }: OlHTMLAttributes<HTMLOListElement> & RefAttributes<HTMLOListElement> & {
113
+ spans: TraceSpan[];
114
+ label?: string;
115
+ }): React.JSX.Element;
116
+ export type HealthState = "operational" | "degraded" | "down" | "maintenance" | "unknown";
117
+ export interface HealthEntry {
118
+ id: string;
119
+ name: ReactNode;
120
+ state: HealthState;
121
+ detail?: ReactNode;
122
+ }
123
+ export declare function HealthMatrix({ entries, label, className, ...props }: HTMLAttributes<HTMLUListElement> & RefAttributes<HTMLUListElement> & {
124
+ entries: HealthEntry[];
125
+ label?: string;
126
+ }): React.JSX.Element;
127
+ export type UsageMetric = "tokens" | "cost" | "requests";
128
+ export interface ModelUsageEntry {
129
+ id: string;
130
+ model: string;
131
+ provider?: string;
132
+ tokens?: number;
133
+ cost?: number;
134
+ requests?: number;
135
+ }
136
+ export declare function ModelUsage({ entries, metric, label, currency, locale, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
137
+ entries: ModelUsageEntry[];
138
+ metric?: UsageMetric;
139
+ label?: string;
140
+ currency?: string;
141
+ locale?: string;
142
+ }): React.JSX.Element;
143
+ export interface CostSegment {
144
+ id: string;
145
+ label: ReactNode;
146
+ amount: number;
147
+ }
148
+ export type CostState = "under" | "near" | "over";
149
+ export declare function CostMeter({ spent, limit, softLimit, currency, locale, period, segments, label, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
150
+ spent: number;
151
+ limit?: number;
152
+ softLimit?: number;
153
+ currency?: string;
154
+ locale?: string;
155
+ period?: ReactNode;
156
+ segments?: CostSegment[];
157
+ label?: string;
158
+ }): React.JSX.Element;
159
+ export type MemoryScope = "episodic" | "semantic" | "procedural";
160
+ export type MemoryOperation = "added" | "updated" | "recalled" | "forgotten";
161
+ export interface MemoryRecord {
162
+ id: string;
163
+ content: ReactNode;
164
+ scope: MemoryScope;
165
+ operation: MemoryOperation;
166
+ time?: ReactNode;
167
+ source?: ReactNode;
168
+ details?: Array<{
169
+ term: string;
170
+ value: ReactNode;
171
+ }>;
172
+ }
173
+ export declare function MemoryLedger({ records, label, className, ...props }: OlHTMLAttributes<HTMLOListElement> & RefAttributes<HTMLOListElement> & {
174
+ records: MemoryRecord[];
175
+ label?: string;
176
+ }): React.JSX.Element;
177
+ export type MessageKind = "request" | "response" | "handoff" | "broadcast" | "error";
178
+ export interface AgentMessage {
179
+ id: string;
180
+ from: string;
181
+ to?: string;
182
+ body: ReactNode;
183
+ time?: ReactNode;
184
+ kind?: MessageKind;
185
+ reason?: ReactNode;
186
+ details?: Array<{
187
+ term: string;
188
+ value: ReactNode;
189
+ }>;
190
+ }
191
+ export declare function InterAgentMessage({ messages, label, className, ...props }: OlHTMLAttributes<HTMLOListElement> & RefAttributes<HTMLOListElement> & {
192
+ messages: AgentMessage[];
193
+ label?: string;
194
+ }): React.JSX.Element;
195
+ export declare function AutomationCard({ name, description, trigger, action, enabled, onToggle, lastRun, lastResult, details, actions, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
196
+ name: ReactNode;
197
+ description?: ReactNode;
198
+ trigger: ReactNode;
199
+ action: ReactNode;
200
+ enabled?: boolean;
201
+ onToggle?: (enabled: boolean) => void;
202
+ lastRun?: ReactNode;
203
+ lastResult?: "success" | "failure";
204
+ details?: Array<{
205
+ term: string;
206
+ value: ReactNode;
207
+ }>;
208
+ actions?: ReactNode;
209
+ }): React.JSX.Element;