@aurea-uds/react 0.1.0 → 0.3.0

package/dist/graph.js

@@ -0,0 +1,178 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// DependencyGraph — PLANO-1.0, Parte H, item H14 (09/08/2026).
+//
+// SUBPATH PRÓPRIO (`@aurea-uds/react/graph`), como ./chart, ./data-grid, ./calendar e ./qrcode:
+// é o único componente que precisa do `@xyflow/react`, que entra como peer OPCIONAL. Quem
+// instala a biblioteca pelo Button não paga por ele — e o check 19 reprova se este import
+// aparecer em qualquer outro módulo.
+//
+// A diretiva NÃO vem de um hook nosso: vem do motor, que usa `zustand` e não publica
+// `"use client"` no dist — o mesmo caso do `recharts`, do `@tanstack/react-table` e do
+// `react-day-picker`, medido em 06/08/2026 e cobrado pelo check 26.
+//
+// ── O MOTOR, e por que este ──────────────────────────────────────────────────────────────
+// Autorizado pelo Victor em 09/08/2026, e a autorização foi RECONFIRMADA por medição depois de
+// eu mesmo levantar dúvida. A dúvida era boa e a resposta desfez: o `trace-graph-view/` do
+// langfuse — a referência mais próxima do domínio — desenha `<div>` posicionados por ELK e NÃO
+// usa React Flow, e o React Flow não faz layout nenhum, então adotá-lo não entrega um grafo
+// pronto. O que decidiu foi o ALVO, que o Victor nomeou: uma aplicação tipo n8n. Aí a conta
+// vira outra, e ela é medida:
+//   • a `activepieces-main`, que já está em `Referencia/` e é concorrente direta do n8n, usa
+//     `@xyflow/react` 12.3.5 — está no `package.json` dela;
+//   • o próprio n8n usa **Vue Flow**, o irmão Vue do React Flow, da mesma equipe xyflow.
+// Grafo de LEITURA não precisa de motor. EDITOR precisa, e o padrão de mercado para este
+// editor é o xyflow. Registro completo no `REFERENCES.md`.
+//
+// Segurança e saúde, conferidas em 09/08/2026 antes de instalar: `@xyflow/react` 12.11.2,
+// **MIT**, publicado há ~1 mês, mantido em tempo integral; **zero** avisos no GitHub Advisory
+// Database para `xyflow`. Traz `@xyflow/system`, `classcat` e `zustand@4` — e só para quem
+// instalar o peer.
+//
+// ── A PELE, e a linha que não se cruza ───────────────────────────────────────────────────
+// O motor publica DUAS folhas, e só uma pode entrar:
+//   • `dist/style.css` é a IDENTIDADE deles — `--xy-node-border-radius-default: 3px`, `#1a192b`,
+//     sombras, nó branco. É exatamente o que o `BUILDING.md` proíbe extrair. **Não entra.**
+//   • `dist/base.css` é ESTRUTURA — posição, `z-index`, `transform-origin`, `pointer-events` —
+//     e todo valor visível está atrás de `var(--xy-algo, --xy-algo-default)`. Sobrescritível
+//     por token, no idioma que o `--qr-size` e o `--datagrid-max-h` já usam.
+// Quem importa a folha é o CONSUMIDOR, uma vez, como já importa o `@aurea-uds/core/css`: um
+// `import "…css"` dentro deste módulo quebraria em Node puro e o build daqui é `tsc` só.
+import React from "react";
+import { ReactFlow, ReactFlowProvider, Background, Handle, Position, applyNodeChanges } from "@xyflow/react";
+import { cx, useAureaStrings } from "./internal.js";
+// ── O layout ─────────────────────────────────────────────────────────────────────────────
+// O motor recebe `x`/`y` PRONTOS: ele não posiciona nada. Sem isto, um grafo sem coordenadas
+// empilha tudo em (0,0) — que foi a medição que quase derrubou a escolha do motor.
+//
+// Camadas por caminho mais longo: a profundidade de um nó é a maior profundidade entre os que
+// apontam para ele, mais um. É o esqueleto do Sugiyama sem a parte cara.
+//
+// ponytail: sem minimização de cruzamento de arestas — grafo denso vai desenhar linhas se
+// cruzando, e isso é aceitável para dependência (dezenas de nós), não para mil. O caminho de
+// subida é o `elkjs`, que é o que o langfuse usa, e ele é DEPENDÊNCIA NOVA: entra com
+// autorização, não de contrabando.
+const LARGURA = 180, ALTURA = 52, VAO_X = 90, VAO_Y = 24;
+function dispor(nodes, edges) {
+    const entram = new Map();
+    for (const n of nodes)
+        entram.set(n.id, []);
+    for (const e of edges)
+        if (entram.has(e.to) && entram.has(e.from))
+            entram.get(e.to).push(e.from);
+    const profundidade = new Map();
+    // `visitando` corta CICLO. Um grafo de dependências com ciclo é um defeito do dado, não
+    // deste componente — mas travar o navegador por causa dele seria defeito nosso.
+    const visitando = new Set();
+    const calcular = (id) => {
+        const pronto = profundidade.get(id);
+        if (pronto != null)
+            return pronto;
+        if (visitando.has(id))
+            return 0;
+        visitando.add(id);
+        const pais = entram.get(id) ?? [];
+        const d = pais.length ? Math.max(...pais.map(calcular)) + 1 : 0;
+        visitando.delete(id);
+        profundidade.set(id, d);
+        return d;
+    };
+    for (const n of nodes)
+        calcular(n.id);
+    const ocupacao = new Map();
+    const posicoes = new Map();
+    for (const n of nodes) {
+        const d = profundidade.get(n.id) ?? 0;
+        const linha = ocupacao.get(d) ?? 0;
+        ocupacao.set(d, linha + 1);
+        posicoes.set(n.id, { x: d * (LARGURA + VAO_X), y: linha * (ALTURA + VAO_Y) });
+    }
+    // A EXTENSÃO existe para o SERVIDOR: sem ela o `fitView` não tem viewport para caber, e o
+    // grafo renderizado fora do navegador sai ancorado no canto, com metade dos nós do lado de
+    // fora da caixa. É a diferença entre a prévia do catálogo existir e não existir.
+    //
+    // Os campos se chamam `larg`/`alt` e não `width`/`height` por dois motivos: é o vocabulário
+    // interno deste arquivo (`posicoes`, `ocupacao`, `profundidade`), e o check 23 lê o fonte
+    // INTEIRO — ele existe para impedir prop de dimensão em número, e um par de pixels de layout
+    // interno o acionava sem ser prop de ninguém.
+    const colunas = Math.max(...[...ocupacao.keys()], 0) + 1;
+    const linhas = Math.max(...[...ocupacao.values()], 1);
+    return { posicoes, extensao: { larg: colunas * LARGURA + (colunas - 1) * VAO_X, alt: linhas * ALTURA + (linhas - 1) * VAO_Y } };
+}
+// O nó é NOSSO, e é o ponto em que este componente deixa de ser "React Flow com outra cor".
+// O `GraphNode.tsx` do langfuse declara o motivo em uma linha — *"Real-HTML accessibility (the
+// win over the old canvas renderer)"* —: nó desenhado em canvas não existe para o teclado nem
+// para o leitor de tela. Aqui ele é `<button>` de verdade quando dá para selecionar.
+//
+// O que NÃO entrou: as DEZ cores por tipo de nó da referência (`AGENT` roxo, `TOOL` laranja,
+// `GENERATION` magenta…). É a quarta vez que esta parte recusa a mesma coisa. `kind` sai como
+// TEXTO, que é legível também por quem não separa as cores.
+function NoAurea({ data }) {
+    const d = data;
+    const corpo = _jsxs(_Fragment, { children: [_jsx("span", { className: "graph-node-label", children: d.label }), d.kind && _jsx("span", { className: "graph-node-kind", children: d.kind }), d.detail && _jsx("span", { className: "hint", children: d.detail })] });
+    return _jsxs("div", { className: "graph-node", "data-selected": d.selecionado || undefined, children: [_jsx(Handle, { type: "target", position: Position.Left, isConnectable: !!d.conectavel, className: "graph-handle" }), d.aoSelecionar
+                ? _jsx("button", { type: "button", className: "graph-node-body", "aria-pressed": !!d.selecionado, onClick: d.aoSelecionar, children: corpo })
+                : _jsx("span", { className: "graph-node-body", children: corpo }), _jsx(Handle, { type: "source", position: Position.Right, isConnectable: !!d.conectavel, className: "graph-handle" })] });
+}
+const TIPOS = { aurea: NoAurea };
+// DependencyGraph — quem depende de quem.
+//
+// O vocabulário da API é NOSSO — `{from,to}`, não `{source,target}`. Não é preciosismo: é o que
+// permite trocar o motor sem quebrar quem usa, e é a mesma razão pela qual o `Chart` não expõe
+// os tipos do Recharts. O escopo também é menor que o do motor: nada de minimapa, de painéis,
+// de nó redimensionável nem de seleção por retângulo — isso é superfície de EDITOR, e o editor
+// é a Parte I (`VisualBuilder`, item I8), que compõe este componente em vez de reescrevê-lo.
+export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, connectable, onConnect, onNodeMove, height, className, ...props }) {
+    const s = useAureaStrings();
+    // O layout só roda para quem não trouxe coordenada. Quem traz manda — é o que deixa a Parte I
+    // guardar a posição que a pessoa arrastou sem brigar com a disposição automática.
+    const automatico = React.useMemo(() => dispor(nodes, edges), [nodes, edges]);
+    const nosDoMotor = React.useMemo(() => nodes.map(n => ({
+        id: n.id, type: "aurea",
+        position: { x: n.x ?? automatico.posicoes.get(n.id)?.x ?? 0, y: n.y ?? automatico.posicoes.get(n.id)?.y ?? 0 },
+        draggable: !!onNodeMove,
+        // ── O QUE FAZ ESTE GRAFO EXISTIR FORA DO NAVEGADOR ─────────────────────────────────
+        // O motor só desenha nó que tem tamanho, e no servidor não há o que medir. `initialWidth`
+        // e `initialHeight` valem SÓ até a primeira medição — no navegador o tamanho real assume
+        // e um nó de três linhas deixa de ser aproximado. E sem `handles` declarados a aresta não
+        // sabe de onde sai nem onde chega, então ela some.
+        //
+        // Eu tinha concluído que grafo não cabia em HTML estático e escrevi isso como limite do
+        // componente. Era conclusão minha, não medição: o motor tem caminho de SSR documentado, e
+        // são estas três coisas. A prévia do catálogo existe por causa deste bloco.
+        initialWidth: LARGURA, initialHeight: ALTURA,
+        handles: [{ type: "target", position: Position.Left, x: 0, y: ALTURA / 2 },
+            { type: "source", position: Position.Right, x: LARGURA, y: ALTURA / 2 }],
+        data: { label: n.label, kind: n.kind, detail: n.detail, selecionado: selectedId === n.id,
+            conectavel: !!connectable, aoSelecionar: onSelect ? () => onSelect(n.id) : undefined },
+    })), [nodes, automatico, selectedId, onSelect, connectable, onNodeMove]);
+    const arestasDoMotor = React.useMemo(() => edges.map(e => ({
+        id: `${e.from}->${e.to}`, source: e.from, target: e.to, label: e.label, animated: e.animated,
+    })), [edges]);
+    // ── A MEDIDA TEM DE PODER VOLTAR, e isto foi achado NO NAVEGADOR ───────────────────────
+    // A primeira versão passava `nodes` e nenhum `onNodesChange`. O motor aceita calado e o
+    // resultado é um grafo INVISÍVEL: ele só tira o `visibility:hidden` do nó depois de gravar
+    // a medida dele de volta na lista, e sem o retorno não tem onde gravar. Medido em
+    // 09/08/2026 num navegador de verdade — os cinco nós saíam `visibility: hidden`, com ZERO
+    // aresta e o `fitView` parado em `scale(1)`. Nenhum teste de jsdom pega isso, porque lá
+    // não há layout para medir.
+    //
+    // A lista interna preserva `measured` quando os dados de fora mudam: sem isso, trocar a
+    // seleção jogaria a medida fora e o grafo piscaria a cada clique.
+    const [nosVivos, setNosVivos] = React.useState(nosDoMotor);
+    React.useEffect(() => {
+        setNosVivos(anteriores => {
+            const medidos = new Map(anteriores.map(n => [n.id, n.measured]));
+            return nosDoMotor.map(n => ({ ...n, measured: medidos.get(n.id) }));
+        });
+    }, [nosDoMotor]);
+    const aoMudarNos = React.useCallback((mudancas) => {
+        setNosVivos(anteriores => applyNodeChanges(mudancas, anteriores));
+    }, []);
+    // `initialWidth`/`initialHeight` no provider é o par do de cima, um nível acima: é o viewport
+    // que o `fitView` usa ENQUANTO ninguém mediu. Com o prefixo `initial`, o navegador sobrescreve
+    // na primeira medição — passar `width`/`height` direto no ReactFlow fixaria o tamanho e mataria
+    // a fluidez. O valor é a extensão do próprio layout, então no servidor o grafo cabe exato.
+    return _jsx("div", { className: cx("dependency-graph", className), style: height ? { blockSize: height } : undefined, role: "group", "aria-label": label ?? s.graphLabel, ...props, children: _jsx(ReactFlowProvider, { initialNodes: nosDoMotor, initialEdges: arestasDoMotor, fitView: true, initialWidth: automatico.extensao.larg, initialHeight: automatico.extensao.alt, children: _jsx(ReactFlow, { nodes: nosVivos, onNodesChange: aoMudarNos, edges: arestasDoMotor, nodeTypes: TIPOS, fitView: true, proOptions: { hideAttribution: false }, nodesDraggable: !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: !!onSelect, onNodeDragStop: onNodeMove ? (_, no) => onNodeMove(no.id, no.position) : undefined, onConnect: onConnect ? c => { if (c.source && c.target)
+                    onConnect({ from: c.source, to: c.target }); } : undefined, children: _jsx(Background, {}) }) }) });
+}

package/dist/identity-client.d.ts

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from "react";
+import type { AvatarSize } from "./markup.js";
+export declare function Avatar({ src, alt, fallback, size, className }: {
+    src?: string;
+    alt?: string;
+    fallback?: ReactNode;
+    size?: AvatarSize;
+    className?: string;
+}): React.JSX.Element;

package/dist/identity-client.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
+// do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
+// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+import React from "react";
+import { cx } from "./internal.js";
+export function Avatar({ src, alt = "", fallback, size = "md", className }) {
+    const [falhou, setFalhou] = React.useState(false);
+    React.useEffect(() => { setFalhou(false); }, [src]);
+    return _jsx("span", { className: cx("avatar", size !== "md" && `avatar-${size}`, className), children: src && !falhou ? _jsx("img", { src: src, alt: alt, onError: () => setFalhou(true) }) : fallback });
+}

package/dist/identity.d.ts

@@ -1,8 +1,2 @@
-import { type ReactNode } from "react";
-export declare function Avatar({ src, alt, fallback, size, className }: {
-    src?: string;
-    alt?: string;
-    fallback?: ReactNode;
-    size?: number;
-    className?: string;
-}): import("react").JSX.Element;
+export * from "./identity-client.js";
+export { AvatarGroup, type AvatarSize } from "./markup.js";

package/dist/identity.js

@@ -1,3 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from "./internal.js";
-export function Avatar({ src, alt = "", fallback, size = 40, className }) { return _jsx("span", { className: cx("avatar", className), style: { width: size, height: size }, children: src ? _jsx("img", { src: src, alt: alt }) : fallback }); }
+// VITRINE da categoria — é este arquivo que `@aurea-uds/react/identity` resolve. Sem
+// `"use client"` de propósito: a diretiva contamina o módulo inteiro e faria a marcação pura
+// chegar como cliente por vizinhança (ADR-0026; o check 26b reprova quem a puser de volta aqui).
+export * from "./identity-client.js";
+export { AvatarGroup } from "./markup.js";

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-export { cx, defaultStrings, ptBR, useAureaStrings, defaultSpriteUrl, useSpriteUrl, type AureaStrings } from "./internal.js";
+export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStateFromParams, screenStateToParams, screenStateFromParams, universalStates, stateSeverity, type AureaStrings, type GridState, type ScreenState, type UniversalState } from "./pure.js";
+export { useAureaStrings, useSpriteUrl } from "./internal.js";
+export { Card, Stack, Cluster, Grid, KPI, DataList, Timeline, Prose, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Select, Textarea, Checkbox, Radio, Switch, Range, type BadgeVariant, type AvatarSize, type TopbarVariant } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";
@@ -12,3 +14,4 @@ export * from "./overlays.js";
 export * from "./media.js";
 export * from "./communication.js";
 export * from "./code.js";
+export * from "./agents.js";

package/dist/index.js

@@ -8,13 +8,41 @@
 // porta de sempre: `import {Button} from "@aurea-uds/react"` continua funcionando e traz tudo
 // que não custa dependência.
 //
-// TRÊS COMPONENTES NÃO ENTRAM AQUI, e é o ponto da fase:
+// SEIS MÓDULOS DE MOTOR OPCIONAL NÃO ENTRAM AQUI:
 //   CodeEditor  → "@aurea-uds/react/code-editor"  (CodeMirror, 6 peers opcionais)
 //   DataGrid    → "@aurea-uds/react/data-grid"    (@tanstack/react-table)
 //   QRCode      → "@aurea-uds/react/qrcode"       (qr)
-// Se estivessem neste barril, importar um Button carregaria os três — e a dependência opcional
+//   Calendar    → "@aurea-uds/react/calendar"     (react-day-picker)
+//   Chart       → "@aurea-uds/react/chart"        (recharts)
+//   DependencyGraph → "@aurea-uds/react/graph"    (@xyflow/react)
+// Se estivessem neste barril, importar um Button carregaria um peer opcional — e a dependência
 // que não estivesse instalada quebraria a importação. O peso é real, então a fronteira é real.
-export { cx, defaultStrings, ptBR, useAureaStrings, defaultSpriteUrl, useSpriteUrl } from "./internal.js";
+// SEM `"use client"`, e é o ponto da Parte A: este barril é um módulo de SERVIDOR. Reexportar
+// componente de um módulo com a diretiva é o caminho suportado — quem importa daqui de um
+// componente de servidor recebe uma referência de cliente e a renderiza normalmente.
+//
+// `cx` e os dicionários vêm do `pure.js`, não do `internal.js`: os dois exportam os mesmos
+// nomes, mas o `internal` tem a diretiva, e dali `cx` viraria referência de cliente — chamável
+// só no navegador. Um helper de classe tem de funcionar nos dois lados.
+// `gridStateToParams`/`gridStateFromParams` saem por AQUI, e não pelo subpath do
+// DataGrid, de propósito: quem lê a URL num framework de RSC é o SERVIDOR, e o
+// subpath tem a diretiva. Vindo daqui — via `pure.js`, que não tem — a função é
+// chamável dos dois lados. É a mesma razão do `cx`, uma camada acima.
+export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStateFromParams, screenStateToParams, screenStateFromParams, universalStates, stateSeverity } from "./pure.js";
+export { useAureaStrings, useSpriteUrl } from "./internal.js";
+// ── A LINHA DO ITEM O1, e ela é o item inteiro ───────────────────────────────────────────────
+// Estes 22 vêm do `markup.js`, que NÃO tem a diretiva, e por isso chegam como componentes de
+// SERVIDOR. Vinham dos módulos de categoria abaixo, e de lá chegavam como cliente: `Card` é uma
+// <div>, e importá-lo embarcava 9 módulos e 118,5 KB — `node scripts/measure-boundary.mjs`.
+//
+// ESTA LINHA PRECISA SER EXPLÍCITA, e o que acontece sem ela foi MEDIDO, não deduzido — a
+// primeira versão deste comentário dizia outra coisa e a prova contra o defeito a derrubou.
+// Tirando um nome daqui: o `tsc` fica VERDE, o componente continua existindo e os testes
+// continuam passando, porque o módulo de categoria abaixo o reexporta (é o que mantém o subpath
+// inteiro). O que muda é de ONDE ele vem — do módulo com a diretiva —, e aí ele volta a chegar
+// como referência de CLIENTE e os 118,5 KB voltam com ele. Não é um erro: é o ganho do item O1
+// se desfazendo em silêncio. É isso, exatamente isso, que o check 35 pega.
+export { Card, Stack, Cluster, Grid, KPI, DataList, Timeline, Prose, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Select, Textarea, Checkbox, Radio, Switch, Range } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";
@@ -28,3 +56,5 @@ export * from "./overlays.js";
 export * from "./media.js";
 export * from "./communication.js";
 export * from "./code.js";
+// A camada operacional (Parte H). Sem dependência nova, então entra no barril.
+export * from "./agents.js";

package/dist/inputs-client.d.ts

@@ -0,0 +1,105 @@
+import React, { type HTMLAttributes, type InputHTMLAttributes, type RefAttributes, type ReactNode } from "react";
+import { type IconName } from "./system.js";
+export { FileInput, matchesAccept, type FileRejection, type UploadContext, type UploadFn } from "./file-input.js";
+export interface FieldProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+    label: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    name?: string;
+}
+export declare function Field({ label, hint, error, children, className, id, name, ...props }: FieldProps): React.JSX.Element;
+export declare function Form({ errors, onSubmit, children, className, ...props }: Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & RefAttributes<HTMLFormElement> & {
+    errors?: Record<string, string | string[]>;
+    onSubmit?: (values: Record<string, unknown>) => void;
+}): React.JSX.Element;
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, RefAttributes<HTMLInputElement> {
+    formatOnBlur?: (value: string) => string;
+}
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLInputElement>>;
+export declare function SearchField({ icon, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    icon?: IconName;
+}): React.JSX.Element;
+export declare function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, name, format, locale, className }: {
+    value?: number | null;
+    defaultValue?: number;
+    onValueChange?: (v: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    label?: string;
+    id?: string;
+    name?: string;
+    format?: Intl.NumberFormatOptions;
+    locale?: string;
+    className?: string;
+}): React.JSX.Element;
+export declare function OTPField({ length, value, defaultValue, onValueChange, mask, disabled, required, label, id, className }: {
+    length: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+    mask?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    id?: string;
+    className?: string;
+}): React.JSX.Element;
+export declare function SegmentedControl({ items, value, onChange, label }: {
+    items: Array<{
+        value: string;
+        label: ReactNode;
+    }>;
+    value: string;
+    onChange: (v: string) => void;
+    label?: string;
+}): React.JSX.Element;
+export interface ComboboxOption {
+    value: string;
+    label: string;
+}
+export declare function Combobox({ items, value, onValueChange, placeholder, label, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido }: {
+    items: ComboboxOption[];
+    value?: ComboboxOption | null;
+    onValueChange?: (v: ComboboxOption | null) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+}): React.JSX.Element;
+export interface ComboboxOptGroup {
+    label: string;
+    items: ComboboxOption[];
+}
+export declare function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido }: {
+    items: ComboboxOption[] | ComboboxOptGroup[];
+    value?: ComboboxOption[];
+    onValueChange?: (v: ComboboxOption[]) => void;
+    onInputChange?: (query: string) => void;
+    loading?: boolean;
+    placeholder?: string;
+    label?: ReactNode;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+}): React.JSX.Element;
+export interface EditorBlock {
+    id: string;
+    kind?: ReactNode;
+    children: ReactNode;
+}
+export interface BlockEditorProps extends Omit<HTMLAttributes<HTMLOListElement>, "onReorder">, RefAttributes<HTMLOListElement> {
+    blocks: EditorBlock[];
+    onReorder: (from: number, to: number) => void;
+    onRemove?: (index: number) => void;
+    label?: string;
+}
+export declare function BlockEditor({ blocks, onReorder, onRemove, label, className, ...props }: BlockEditorProps): React.JSX.Element;