@aurea-uds/react 0.2.0 → 0.4.0

package/dist/inputs-client.js

@@ -0,0 +1,264 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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, { forwardRef } from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { Form as BaseForm } from "@base-ui/react/form";
+import { Field as BaseField } from "@base-ui/react/field";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { cx, useAureaStrings, usePortalContainer, useReorder } from "./internal.js";
+// Os seis controles abaixo saíram deste arquivo no item O1 e moram no `markup.tsx`, sem a
+// diretiva — são marcação, e quem escuta `onChange` é o consumidor. Voltam IMPORTADOS e não só
+// reexportados porque o `ehControle` do `Field` compara por IDENTIDADE de referência: dois
+// objetos diferentes com o mesmo nome quebrariam o rótulo do campo em silêncio.
+import { Select, Textarea, Checkbox, Radio, Switch, Range } from "./markup.js";
+import { Icon } from "./system.js";
+import { IconButton } from "./actions.js";
+// FileInput mora em arquivo próprio (132 linhas — upload real, aborto, progresso) e é público
+// por aqui: a categoria dele é Inputs.
+export { FileInput, matchesAccept } from "./file-input.js";
+// hint e error são DESCRIÇÃO (aria-describedby), nunca parte do NOME. Nome é o que o campo É;
+// hint e erro são sobre o VALOR.
+//
+// ISTO JÁ ESTAVA ESCRITO AQUI E ERA MENTIRA — reaberto como AUD-0001 em 12/08/2026, e o achado
+// A12 volta com ele. O comentário anterior dizia "medido em 30/07/2026, corrigido", e a marcação
+// logo abaixo mantinha `hint` e `error` DENTRO do `<label>` externo. Nome acessível medido:
+// "E-mail Usamos para entrar Endereço inválido" — os três grudados —, e a descrição repetindo o
+// que já estava no nome. Quinta vez neste repositório que comentário passou por código; a
+// diferença é que aqui ele passou por CORREÇÃO. O teste que devia pegar aceitava `/E-mail/`, que
+// casa com a frase inteira: regex frouxa é gate que dorme.
+//
+// O contêiner é `<div>` e não `<label>`, e isso resolve três coisas de uma vez: hint e erro saem
+// da árvore de nome; `Checkbox`/`Radio`/`Switch`, que trazem `<label>` próprio, param de produzir
+// `<label>` dentro de `<label>` (HTML inválido); e a ligação passa a ser explícita.
+//
+// DUAS FORMAS, e a regra que escolhe entre elas é UMA: o Field só é dono do NOME quando há um
+// filho único que não se nomeia sozinho.
+//   • dono do nome  → `<label htmlFor>`, e o filho recebe `id`/`aria-describedby`/`aria-invalid`;
+//   • não dono      → `role="group"` + `aria-labelledby`, sem `htmlFor`.
+// Os dois casos de "não dono" foram medidos, não imaginados:
+//   1. VÁRIOS FILHOS — o catálogo já faz isso (um grupo de rádios sob um rótulo). Aqui `htmlFor`
+//      apontaria para um id que não existe, o que é pior que não ligar.
+//   2. FILHO COM RÓTULO PRÓPRIO — `Switch`, `Checkbox`, `Radio` trazem `<label>` deles. Somar um
+//      `<label for>` daria DOIS rótulos ao mesmo controle, e o nome acessível vira a concatenação
+//      dos dois ("Notificações Ativo"). A detecção é a prop `label` do filho: é prop NOSSA, não
+//      é farejar tipo — todo controle que se nomeia declara ela.
+// O `role="group"` não é invenção: é o que a ficha do Field sempre declarou.
+//
+// LIMITE DECLARADO, e é o que faz o clone falhar em silêncio: componente que destrincha uma
+// lista fixa de props DESCARTA o que for injetado. `Input`, `Select`, `Textarea`, `Range` e
+// `Switch` espalham `...props` e recebem tudo. `Combobox` e `MultiCombobox` não espalhavam, e
+// por isso ganharam `aria-describedby`/`aria-invalid` explícitos abaixo. Os outros
+// (`NumberField`, `OTPField`, `SegmentedControl`, `Toggle`) têm rótulo próprio e não são filhos
+// de `Field` — a ficha diz quais são.
+// As tags que o HTML permite associar a um `<label>`. Fora desta lista (e fora dos nossos
+// componentes), o filho é layout e o Field vira grupo — ver o comentário dentro da função.
+const TAGS_ROTULAVEIS = new Set(["input", "select", "textarea", "button", "meter", "output", "progress"]);
+function filhoUnico(children) {
+    const filhos = React.Children.toArray(children);
+    if (filhos.length !== 1 || !React.isValidElement(filhos[0]))
+        return null;
+    const filho = filhos[0];
+    return filho.type === React.Fragment ? filhoUnico(filho.props.children) : filho;
+}
+function elementoRotulavel(tipo) {
+    if (typeof tipo === "string")
+        return TAGS_ROTULAVEIS.has(tipo);
+    // Componente React arbitrário pode consumir as props no wrapper e nunca entregá-las ao nó
+    // focal. Só os controles Aurea cujo encaminhamento é parte do contrato entram aqui.
+    return [Input, Select, Textarea, SearchField, Checkbox, Radio, Switch, Range, Combobox, MultiCombobox].includes(tipo);
+}
+export function Field({ label, hint, error, children, className, id, name, ...props }) {
+    const auto = React.useId();
+    // Fragment não cria nó no DOM. Um Fragment com um só controle é só sintaxe; com vários,
+    // Field precisa voltar para grupo em vez de pendurar `htmlFor` num id que nunca existirá.
+    const unico = filhoUnico(children);
+    // e o TERCEIRO caso de "não dono", que o gate achou e eu não tinha previsto: o filho único pode
+    // ser um `<div>` de LAYOUT com os controles dentro — o catálogo faz isso no `Range` ("With the
+    // number": um slider e um campo numérico lado a lado). `htmlFor` apontando para um `<div>` não
+    // nomeia nada, e o `catalog-sweep` reprovou `range.html` com duas violações de `label` no axe.
+    // A leitura é do TIPO do elemento JSX, que é API estável do React. Para tag nativa vale a lista
+    // do HTML; para componente vale a lista explícita dos controles Aurea que repassam a ligação ao
+    // nó focal. Componente arbitrário vira grupo — presumir forwarding recria o id sem alvo.
+    const rotulavel = !!unico && elementoRotulavel(unico.type);
+    // `label` é a API dos controles compostos; aria-label/labelledby são a API universal. Se uma
+    // delas já nomeia o filho, acrescentar `<label for>` daria dois donos para o mesmo nome.
+    const nomeProprio = rotulavel && (unico.props.label !== undefined || [unico.props["aria-label"], unico.props["aria-labelledby"]].some(v => typeof v === "string" && v.trim().length > 0));
+    const nomeAqui = rotulavel && !nomeProprio;
+    // o id que o filho já declara VENCE: sobrescrevê-lo quebraria uma ligação que o consumidor fez.
+    const idControle = unico?.props.id ?? id ?? `${auto}-control`;
+    const idRotulo = `${auto}-label`;
+    const idHint = hint ? `${auto}-hint` : undefined;
+    const idErro = error ? `${auto}-error` : undefined;
+    const descrito = [idHint, idErro].filter(Boolean).join(" ") || undefined;
+    // As chaves de aria só entram quando têm VALOR. Passar `undefined` explícito não é o mesmo que
+    // não passar: quando o filho vira `Field.Control` do motor (ramo do `name`), a prop explícita
+    // do elemento vence a mesclagem, e o `aria-invalid` que o motor calculou a partir do erro
+    // externo era apagado por um `undefined` nosso. Medido em 13/08/2026: o input saía com
+    // `data-invalid` e SEM `aria-invalid`, ou seja, vermelho na tela e válido para o leitor de
+    // tela — que é o pior dos dois mundos.
+    const injecao = { id: idControle };
+    const descritoFinal = [unico?.props["aria-describedby"], descrito].filter(Boolean).join(" ");
+    if (descritoFinal)
+        injecao["aria-describedby"] = descritoFinal;
+    const invalidoFinal = error ? true : unico?.props["aria-invalid"];
+    if (invalidoFinal !== undefined)
+        injecao["aria-invalid"] = invalidoFinal;
+    const controle = rotulavel ? React.cloneElement(unico, injecao) : children;
+    // a descrição mora no nó FOCAL quando existe um; sem filho único, no grupo — que é o que sobra
+    // para anunciar. Nos dois lugares seria anunciar duas vezes.
+    // Com `name`, o filho passa a ser o CONTROLE do motor: é isso que faz o `aria-invalid` e o
+    // `aria-describedby` do erro externo chegarem ao nó focal. Medido em 13/08/2026 — sem este
+    // embrulho o `Field.Root` recebe o erro e não tem a quem entregá-lo, e o campo fica válido na
+    // árvore de acessibilidade enquanto a frase de erro aparece na tela. Pior que não mostrar.
+    const controleFinal = name ? _jsx(BaseField.Control, { render: controle }) : controle;
+    const corpo = _jsxs("div", { className: cx("field", className), ...(nomeAqui ? {} : { role: "group", "aria-labelledby": idRotulo, ...(rotulavel ? {} : { "aria-describedby": descrito }) }), ...props, children: [_jsxs("span", { className: "label", children: [nomeAqui ? _jsx("label", { htmlFor: idControle, children: label }) : _jsx("span", { id: idRotulo, children: label }), hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controleFinal, error && _jsx("span", { className: "field-error", id: idErro, children: error }), name && _jsx(BaseField.Error, { className: "field-error" })] });
+    // `Field.Root` do motor entra SÓ quando há `name`: é ele que liga o campo à chave de `errors`
+    // do formulário. Ele não desenha nada — é contexto — então a pele não muda.
+    return name ? _jsx(BaseField.Root, { name: name, invalid: error ? true : undefined, render: corpo }) : corpo;
+}
+// Form (M1): o formulário que EXIBE erro, e não o que decide o que é erro.
+//
+// A divisão saiu de pesquisa e da medição dos consumidores (13/08/2026). O padrão de mercado é
+// `react-hook-form` + `zod`, e é o que o shadcn embrulha — mas embrulhar isso aqui obrigaria TODO
+// projeto que usa a Aurea a usar react-hook-form, inclusive os que já validam de outro jeito (um
+// consumidor real valida com zod em server action, sem biblioteca de formulário no cliente).
+// Dependência nova também é decisão do Victor pelo BUILDING.md §3.3, e ela não foi necessária:
+// o `Form` do Base UI — motor que a Aurea JÁ paga desde a Fase 2 — declara no próprio tipo que
+// `errors` são "validation errors returned externally, typically after submission by a server or
+// a form action". Ou seja, a divisão que eu ia propor já é a do motor.
+//
+// O que a Aurea entrega: a pele, o `name` ligando campo a erro, e o envio com os valores já
+// coletados. O que ela NÃO entrega, e não vai: schema, regra, resolver, estado de campo.
+export function Form({ errors, onSubmit, children, className, ...props }) {
+    return _jsx(BaseForm, { errors: errors, onFormSubmit: onSubmit ? (v) => onSubmit(v) : undefined, className: cx("form", className), ...props, children: children });
+}
+export const Input = forwardRef(function Input({ className, formatOnBlur, onBlur, onChange, ...props }, ref) {
+    return _jsx("input", { ref: ref, className: cx("input", className), onChange: onChange, onBlur: e => {
+            if (formatOnBlur) {
+                const formatado = formatOnBlur(e.currentTarget.value);
+                if (formatado !== e.currentTarget.value) {
+                    e.currentTarget.value = formatado;
+                    onChange?.(e);
+                }
+            }
+            onBlur?.(e);
+        }, ...props });
+});
+export function SearchField({ icon = "search", className, ...props }) { return _jsxs("div", { className: cx("input-wrap", className), children: [_jsx(Icon, { name: icon }), _jsx(Input, { type: "search", ...props })] }); }
+// labelHidden: coluna de seleção de tabela precisa do rótulo POR LINHA para o leitor de
+// tela ("Select Analyst"), mas mostrá-lo engorda a coluna. O rótulo continua no DOM, só
+// sai da tela (.sr-only) — nunca trocar por aria-label solto num <label> visível vazio.
+// NumberField (Lote 1 do BUILDING.md). Um `<input type="number">` cru tem três problemas que
+// este resolve, e todos vieram do motor, não de nós: as setas nativas são alvos minúsculos e
+// somem no Safari; a roda do mouse altera o valor por acidente sobre o campo focado; e o valor
+// digitado não é formatado por locale. O Base UI trata os três.
+// A anatomia (menos · campo · mais numa peça só) é a que as referências convergem.
+// Fora de propósito: o ScrubArea do Base UI — arrastar o rótulo para variar o número. É gesto
+// que ninguém descobre sozinho e que não tem equivalente por teclado.
+// `format`/`locale`/`name` são a metade de MOEDA do item L6, e não custaram componente nenhum: o
+// comentário acima já dizia que o motor formata por locale, e a nossa casca simplesmente não
+// repassava a opção. Medido no `@base-ui/react@1.6.0`: `NumberFieldRoot` aceita
+// `format?: Intl.NumberFormatOptions` e `locale?`, e formata no BLUR — que é exatamente o momento
+// que a pesquisa de acessibilidade recomenda, e o oposto da máscara ao vivo.
+// Com isso, `<NumberField format={{style:"currency",currency:"BRL"}} locale="pt-BR"/>` substitui a
+// biblioteca de moeda que um consumidor carrega só para isso. Quem formata é o `Intl` da
+// plataforma; a Aurea não escreve formatador de dinheiro, e nem deveria.
+// `name` entra junto porque é ele que faz o motor renderizar o input escondido com o valor CRU —
+// é a trava do item ("o valor mascarado continua no DOM") entregue pelo motor, e o teste a cobra.
+export function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, name, format, locale, className }) {
+    const s = useAureaStrings();
+    return _jsx(BaseNumberField.Root, { id: id, name: name, value: value, defaultValue: defaultValue, onValueChange: onValueChange, min: min, max: max, step: step, format: format, locale: locale, disabled: disabled, readOnly: readOnly, required: required, className: cx("number-field", className), children: _jsxs(BaseNumberField.Group, { className: "number-field-group", children: [_jsx(BaseNumberField.Decrement, { className: "btn btn-ghost btn-icon", "aria-label": s.decrement, children: _jsx(Icon, { name: "subtract" }) }), _jsx(BaseNumberField.Input, { className: "input number-field-input", "aria-label": label }), _jsx(BaseNumberField.Increment, { className: "btn btn-ghost btn-icon", "aria-label": s.increment, children: _jsx(Icon, { name: "add" }) })] }) });
+}
+// OTPField (Lote 1 do BUILDING.md). Um campo por dígito, com o comportamento que ninguém acerta
+// à mão: colar o código inteiro distribui pelos campos, Backspace volta um, e o
+// `autocomplete="one-time-code"` deixa o iOS oferecer o código do SMS. Tudo do motor.
+// Uma referência resolve isto com um pacote npm separado; aqui não entra dependência nova —
+// o `@base-ui/react`, que já é a única dependência de runtime da biblioteca, tem `otp-field`.
+// `length` é obrigatório de propósito: sem ele o campo não sabe quando está completo.
+// CADA caixa leva nome próprio, e não só o grupo. O `catalog-sweep` pegou isto no primeiro
+// lote: com `aria-label` só na raiz, o axe acusou `label` em todas as seis — seis campos de
+// formulário anônimos. Um leitor de tela anunciaria "editar texto" seis vezes seguidas sem
+// dizer qual é qual. O grupo continua nomeado (`role="group"`), que é o que diz para que serve
+// o código; o nome de cada caixa é o que diz onde você está.
+export function OTPField({ length, value, defaultValue, onValueChange, mask, disabled, required, label, id, className }) {
+    const s = useAureaStrings();
+    return _jsx(BaseOTPField.Root, { id: id, length: length, value: value, defaultValue: defaultValue, onValueChange: onValueChange, mask: mask, disabled: disabled, required: required, role: "group", "aria-label": label, className: cx("otp-field", className), children: Array.from({ length }, (_, i) => _jsx(BaseOTPField.Input, { render: _jsx("input", { "aria-label": `${s.otpDigit} ${i + 1}` }), className: "input otp-slot" }, i)) });
+}
+// SegmentedControl — achado M20, fechado na Parte C do PLANO-1.0 em 07/08/2026.
+//
+// O DEFEITO: era `role="group"` com N botões de `aria-pressed`. Isso descreve N alternâncias
+// INDEPENDENTES — cada botão anuncia "pressionado/não pressionado", nada diz que só um pode
+// valer, e nunca se ouve "1 de 2". Para escolha única entre poucas opções o padrão APG é
+// `radiogroup`, e a diferença é o que o leitor de tela consegue prometer.
+// A troca mudou a semântica de um componente publicado, então foi registrada: ADR-0016.
+//
+// O MOTOR ENTREGA, ENTÃO NÃO ESCREVEMOS (BUILDING.md §1). O `RadioGroup` do Base UI 1.6 traz o
+// padrão inteiro: roving tabindex, setas que movem E selecionam, Home/End, e `aria-checked`.
+// Escrever isso à mão seria reimplementar um composite que já está testado.
+//
+// `render={<button type="button"/>}` não é enfeite, e a medição de 07/08 é que disse: o
+// `Radio.Root` renderiza um `<span>` por padrão, e a pele da Aurea é `.segmented button`. Sem
+// isso o componente perderia a pele inteira — e o check 18 não veria, porque ele olha CLASSE.
+// O motor também emite um `<input type="radio">` escondido por item (para envio de formulário);
+// ele é `position:fixed` e `aria-hidden`, então não entra no flex nem na árvore de acessibilidade.
+//
+// E `nativeButton` é o par obrigatório do `render` acima — medido em 11/08/2026. O `Radio.Root`
+// declara `nativeButton = false` por padrão (é o valor certo para o `<span>` que ele renderiza
+// sozinho), e o `useButton` do motor CONFERE isso no DOM montado, dentro de um efeito: sem esta
+// palavra sai um `console.error` do Base UI a cada montagem de CLIENTE. Não no catálogo, que é
+// HTML estático — no console de quem INSTALA.
+// O DOM foi medido nos dois lados antes da troca. O `role="button"` que a mensagem ameaça NÃO
+// aparecia (o `role="radio"` do motor já vencia a fusão); o que muda de fato é o `<input>`
+// escondido perder o `id`, que migra para este botão — e migra para o lado certo, porque o botão
+// é o rádio e o input é `aria-hidden`. Comportamento idêntico: Enter não seleciona, Espaço
+// seleciona, a seta move E seleciona. O que sai é a camada sintética que o motor punha por cima
+// da ativação nativa do `<button>`.
+export function SegmentedControl({ items, value, onChange, label }) {
+    const s = useAureaStrings();
+    return _jsx(BaseRadioGroup, { className: "segmented", "aria-label": label ?? s.optionsLabel, value: value, onValueChange: v => onChange(String(v)), children: items.map(i => _jsx(BaseRadio.Root, { value: i.value, className: i.value === value ? "active" : undefined, nativeButton: true, render: _jsx("button", { type: "button" }), children: i.label }, i.value)) });
+}
+// `aria-describedby` e `aria-invalid` são explícitos e não caem em `...props` por acidente: este
+// componente destrincha uma lista fixa, então o que não está aqui é DESCARTADO em silêncio — e era
+// exatamente isso que fazia o `Field` não alcançar o input do Combobox (AUD-0001, 12/08/2026).
+// Vão para o `Input`, que é o nó focal: no contêiner eles não seriam anunciados.
+// `disabled` vai na ROOT, não no Input: `Input`, `Trigger`, `Clear` e `ChipRemove` leem todos o
+// mesmo `selectors.disabled` do store do Base UI (@base-ui/react 1.6.0). Desabilitar o Input
+// deixaria os dois botões vivos — abrir a lista de um campo desabilitado é o defeito, não o texto.
+export function Combobox({ items, value, onValueChange, placeholder, label, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido }) {
+    const s = useAureaStrings();
+    const portal = usePortalContainer();
+    const autoId = React.useId();
+    const inputId = id ?? autoId;
+    return _jsxs(BaseCombobox.Root, { items: items, value: value, onValueChange: onValueChange, disabled: disabled, itemToStringLabel: (i) => i.label, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-group", children: [_jsx(BaseCombobox.Input, { id: inputId, placeholder: placeholder, className: "input", "aria-describedby": descrito, "aria-invalid": invalido }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value) })] }) }) })] });
+}
+const isGrouped = (items) => items.length > 0 && "items" in items[0];
+export function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, disabled, id, className, "aria-describedby": descrito, "aria-invalid": invalido }) {
+    const s = useAureaStrings();
+    const portal = usePortalContainer();
+    const autoId = React.useId();
+    const inputId = id ?? autoId;
+    const renderItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value);
+    return _jsxs(BaseCombobox.Root, { multiple: true, items: items, value: value, onValueChange: onValueChange, disabled: disabled, itemToStringLabel: (i) => i.label, filter: onInputChange ? null : undefined, onInputValueChange: onInputChange ? ((v, d) => { if (d.reason !== "item-press")
+            onInputChange(v); }) : undefined, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-multi", children: [_jsx(BaseCombobox.Chips, { className: "combobox-chips", children: _jsx(BaseCombobox.Value, { children: (selected) => _jsxs(_Fragment, { children: [selected.map((item) => _jsxs(BaseCombobox.Chip, { className: "combobox-chip", children: [item.label, _jsx(BaseCombobox.ChipRemove, { className: "combobox-chip-remove", "aria-label": `${s.comboboxRemove} ${item.label}`, children: _jsx(Icon, { name: "close", size: "sm" }) })] }, item.value)), _jsx(BaseCombobox.Input, { id: inputId, placeholder: selected.length ? undefined : placeholder, className: "combobox-chip-input", "aria-describedby": descrito, "aria-invalid": invalido })] }) }) }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: loading ? s.comboboxLoading : s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: isGrouped(items)
+                                    ? (group) => _jsxs(BaseCombobox.Group, { items: group.items, className: "combobox-section", children: [_jsx(BaseCombobox.GroupLabel, { className: "combobox-group-label", children: group.label }), _jsx(BaseCombobox.Collection, { children: renderItem })] }, group.label)
+                                    : renderItem })] }) }) })] });
+}
+export function BlockEditor({ blocks, onReorder, onRemove, label, className, ...props }) {
+    const s = useAureaStrings();
+    const bid = React.useId();
+    const n = blocks.length;
+    // O protocolo de arrasto acessível é o MESMO da `SortableList` — extraído para o `internal` em
+    // vez de copiado, porque duas cópias garantem que a próxima correção entre em uma só.
+    const r = useReorder({ count: n, order: blocks, onReorder,
+        rowSelector: ".block-item", handleSelector: ".block-handle" });
+    return _jsxs(_Fragment, { children: [_jsx("ol", { ref: r.ref, className: cx("block-editor", className), "aria-label": label ?? s.blockEditorLabel, ...props, children: blocks.map((b, i) => {
+                    const kid = `${bid}k${i}`, hid = `${bid}h${i}`, rid = `${bid}r${i}`;
+                    return _jsxs("li", { className: "block-item", "data-grabbed": r.pego === i || undefined, children: [_jsxs("div", { className: "block-rail", children: [_jsxs("button", { type: "button", id: hid, className: "block-handle", "aria-labelledby": `${hid} ${kid}`, "aria-describedby": `${bid}ajuda`, "aria-pressed": r.pego === i, onKeyDown: e => r.teclado(e, i), onPointerDown: e => r.ponteiroBaixo(e, i), onPointerMove: r.ponteiroMove, onPointerUp: r.ponteiroSolta, onPointerCancel: r.ponteiroSolta, children: [_jsx(Icon, { name: "drag--horizontal" }), _jsx("span", { className: "sr-only", children: s.sortableHandle })] }), onRemove && _jsxs("button", { type: "button", id: rid, className: "block-remove", "aria-labelledby": `${rid} ${kid}`, onClick: () => onRemove(i), children: [_jsx(Icon, { name: "trash-can" }), _jsx("span", { className: "sr-only", children: s.blockRemove })] })] }), _jsx("div", { className: "block-body", children: b.children }), _jsxs("span", { id: kid, className: "sr-only", children: [b.kind ?? s.blockLabel, " ", i + 1, " ", s.positionOf, " ", n] })] }, b.id);
+                }) }), _jsx("span", { id: `${bid}ajuda`, className: "sr-only", children: s.sortableHelp }), _jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: r.aviso })] });
+}

package/dist/inputs.d.ts

@@ -1,91 +1,2 @@
-import React, { type HTMLAttributes, type InputHTMLAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes, 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<HTMLLabelElement>, RefAttributes<HTMLLabelElement> {
-    label: string;
-    hint?: ReactNode;
-    error?: ReactNode;
-    htmlFor?: string;
-}
-export declare function Field({ label, hint, error, children, className, id, ...props }: FieldProps): React.JSX.Element;
-export declare const Input: React.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement>, "ref"> & RefAttributes<HTMLInputElement>>;
-export declare const Select: React.ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement> & RefAttributes<HTMLSelectElement>, "ref"> & RefAttributes<HTMLSelectElement>>;
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement> & RefAttributes<HTMLTextAreaElement>, "ref"> & RefAttributes<HTMLTextAreaElement>>;
-export declare function SearchField({ icon, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
-    icon?: IconName;
-}): React.JSX.Element;
-export declare function Checkbox({ label, labelHidden, description, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
-    label: ReactNode;
-    labelHidden?: boolean;
-    description?: ReactNode;
-}): React.JSX.Element;
-export declare function Radio({ label, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
-    label: ReactNode;
-}): React.JSX.Element;
-export declare function Switch({ label, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
-    label: ReactNode;
-}): React.JSX.Element;
-export declare function Range(props: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement>): React.JSX.Element;
-export declare function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, 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;
-    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, id, className }: {
-    items: ComboboxOption[];
-    value?: ComboboxOption | null;
-    onValueChange?: (v: ComboboxOption | null) => void;
-    placeholder?: string;
-    label?: ReactNode;
-    id?: string;
-    className?: string;
-}): React.JSX.Element;
-export interface ComboboxOptGroup {
-    label: string;
-    items: ComboboxOption[];
-}
-export declare function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, id, className }: {
-    items: ComboboxOption[] | ComboboxOptGroup[];
-    value?: ComboboxOption[];
-    onValueChange?: (v: ComboboxOption[]) => void;
-    onInputChange?: (query: string) => void;
-    loading?: boolean;
-    placeholder?: string;
-    label?: ReactNode;
-    id?: string;
-    className?: string;
-}): React.JSX.Element;
+export * from "./inputs-client.js";
+export { Select, Textarea, Checkbox, Radio, Switch, Range } from "./markup.js";

package/dist/inputs.js

@@ -1,126 +1,9 @@
-"use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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, { forwardRef } from "react";
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
-import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { cx, useAureaStrings, usePortalContainer } from "./internal.js";
-import { Icon } from "./system.js";
-import { IconButton } from "./actions.js";
-// FileInput mora em arquivo próprio (132 linhas — upload real, aborto, progresso) e é público
-// por aqui: a categoria dele é Inputs.
-export { FileInput, matchesAccept } from "./file-input.js";
-// hint e error entram como DESCRIÇÃO (aria-describedby) e não como parte do nome. Medido em
-// 30/07/2026: por estarem dentro do <label>, o nome acessível do campo virava "E-mail Usamos
-// para entrar Endereço inválido" — tudo grudado — e nada dizia ao leitor de tela que o valor
-// era inválido. Nome é o que o campo É; hint e erro são sobre o valor.
-// O controle vem como children, então a ligação é feita clonando-o: é a única forma de pôr
-// aria-describedby/aria-invalid no elemento certo sem obrigar o consumidor a repetir ids.
-export function Field({ label, hint, error, children, className, id, ...props }) {
-    const auto = React.useId();
-    const base = id ?? auto;
-    const idHint = hint ? `${base}-hint` : undefined;
-    const idErro = error ? `${base}-error` : undefined;
-    const descrito = [idHint, idErro].filter(Boolean).join(" ") || undefined;
-    const controle = React.isValidElement(children)
-        ? React.cloneElement(children, {
-            "aria-describedby": [children.props["aria-describedby"], descrito].filter(Boolean).join(" ") || undefined,
-            "aria-invalid": error ? true : children.props["aria-invalid"],
-        })
-        : children;
-    return _jsxs("label", { className: cx("field", className), id: id, ...props, children: [_jsxs("span", { className: "label", children: [label, hint && _jsx("span", { className: "hint", id: idHint, children: hint })] }), controle, error && _jsx("span", { className: "field-error", id: idErro, children: error })] });
-}
-export const Input = forwardRef(function Input({ className, ...props }, ref) { return _jsx("input", { ref: ref, className: cx("input", className), ...props }); });
-export const Select = forwardRef(function Select({ className, ...props }, ref) { return _jsx("select", { ref: ref, className: cx("select", className), ...props }); });
-export const Textarea = forwardRef(function Textarea({ className, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", className), ...props }); });
-export function SearchField({ icon = "search", className, ...props }) { return _jsxs("div", { className: cx("input-wrap", className), children: [_jsx(Icon, { name: icon }), _jsx(Input, { type: "search", ...props })] }); }
-// labelHidden: coluna de seleção de tabela precisa do rótulo POR LINHA para o leitor de
-// tela ("Select Analyst"), mas mostrá-lo engorda a coluna. O rótulo continua no DOM, só
-// sai da tela (.sr-only) — nunca trocar por aria-label solto num <label> visível vazio.
-export function Checkbox({ label, labelHidden, description, className, ...props }) { return _jsxs("label", { className: cx("checkbox", labelHidden && "checkbox-bare", className), children: [_jsx("input", { type: "checkbox", ...props }), _jsx("span", { className: "control-mark" }), _jsxs("span", { className: labelHidden ? "sr-only" : undefined, children: [_jsx("strong", { children: label }), description && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "muted", children: description })] })] })] }); }
-export function Radio({ label, className, ...props }) { return _jsxs("label", { className: cx("radio", className), children: [_jsx("input", { type: "radio", ...props }), _jsx("span", { className: "control-mark" }), label] }); }
-export function Switch({ label, className, ...props }) { return _jsxs("label", { className: cx("switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", ...props }), _jsx("span", { className: "switch-track" }), _jsx("span", { children: label })] }); }
-export function Range(props) { return _jsx("input", { className: cx("range", props.className), type: "range", ...props }); }
-// NumberField (Lote 1 do BUILDING.md). Um `<input type="number">` cru tem três problemas que
-// este resolve, e todos vieram do motor, não de nós: as setas nativas são alvos minúsculos e
-// somem no Safari; a roda do mouse altera o valor por acidente sobre o campo focado; e o valor
-// digitado não é formatado por locale. O Base UI trata os três.
-// A anatomia (menos · campo · mais numa peça só) é a que as referências convergem.
-// Fora de propósito: o ScrubArea do Base UI — arrastar o rótulo para variar o número. É gesto
-// que ninguém descobre sozinho e que não tem equivalente por teclado.
-export function NumberField({ value, defaultValue, onValueChange, min, max, step, disabled, readOnly, required, label, id, className }) {
-    const s = useAureaStrings();
-    return _jsx(BaseNumberField.Root, { id: id, value: value, defaultValue: defaultValue, onValueChange: onValueChange, min: min, max: max, step: step, disabled: disabled, readOnly: readOnly, required: required, className: cx("number-field", className), children: _jsxs(BaseNumberField.Group, { className: "number-field-group", children: [_jsx(BaseNumberField.Decrement, { className: "btn btn-ghost btn-icon", "aria-label": s.decrement, children: _jsx(Icon, { name: "subtract" }) }), _jsx(BaseNumberField.Input, { className: "input number-field-input", "aria-label": label }), _jsx(BaseNumberField.Increment, { className: "btn btn-ghost btn-icon", "aria-label": s.increment, children: _jsx(Icon, { name: "add" }) })] }) });
-}
-// OTPField (Lote 1 do BUILDING.md). Um campo por dígito, com o comportamento que ninguém acerta
-// à mão: colar o código inteiro distribui pelos campos, Backspace volta um, e o
-// `autocomplete="one-time-code"` deixa o iOS oferecer o código do SMS. Tudo do motor.
-// Uma referência resolve isto com um pacote npm separado; aqui não entra dependência nova —
-// o `@base-ui/react`, que já é a única dependência de runtime da biblioteca, tem `otp-field`.
-// `length` é obrigatório de propósito: sem ele o campo não sabe quando está completo.
-// CADA caixa leva nome próprio, e não só o grupo. O `catalog-sweep` pegou isto no primeiro
-// lote: com `aria-label` só na raiz, o axe acusou `label` em todas as seis — seis campos de
-// formulário anônimos. Um leitor de tela anunciaria "editar texto" seis vezes seguidas sem
-// dizer qual é qual. O grupo continua nomeado (`role="group"`), que é o que diz para que serve
-// o código; o nome de cada caixa é o que diz onde você está.
-export function OTPField({ length, value, defaultValue, onValueChange, mask, disabled, required, label, id, className }) {
-    const s = useAureaStrings();
-    return _jsx(BaseOTPField.Root, { id: id, length: length, value: value, defaultValue: defaultValue, onValueChange: onValueChange, mask: mask, disabled: disabled, required: required, role: "group", "aria-label": label, className: cx("otp-field", className), children: Array.from({ length }, (_, i) => _jsx(BaseOTPField.Input, { render: _jsx("input", { "aria-label": `${s.otpDigit} ${i + 1}` }), className: "input otp-slot" }, i)) });
-}
-// SegmentedControl — achado M20, fechado na Parte C do PLANO-1.0 em 07/08/2026.
-//
-// O DEFEITO: era `role="group"` com N botões de `aria-pressed`. Isso descreve N alternâncias
-// INDEPENDENTES — cada botão anuncia "pressionado/não pressionado", nada diz que só um pode
-// valer, e nunca se ouve "1 de 2". Para escolha única entre poucas opções o padrão APG é
-// `radiogroup`, e a diferença é o que o leitor de tela consegue prometer.
-// A troca mudou a semântica de um componente publicado, então foi registrada: ADR-0016.
-//
-// O MOTOR ENTREGA, ENTÃO NÃO ESCREVEMOS (BUILDING.md §1). O `RadioGroup` do Base UI 1.6 traz o
-// padrão inteiro: roving tabindex, setas que movem E selecionam, Home/End, e `aria-checked`.
-// Escrever isso à mão seria reimplementar um composite que já está testado.
-//
-// `render={<button type="button"/>}` não é enfeite, e a medição de 07/08 é que disse: o
-// `Radio.Root` renderiza um `<span>` por padrão, e a pele da Aurea é `.segmented button`. Sem
-// isso o componente perderia a pele inteira — e o check 18 não veria, porque ele olha CLASSE.
-// O motor também emite um `<input type="radio">` escondido por item (para envio de formulário);
-// ele é `position:fixed` e `aria-hidden`, então não entra no flex nem na árvore de acessibilidade.
-//
-// E `nativeButton` é o par obrigatório do `render` acima — medido em 11/08/2026. O `Radio.Root`
-// declara `nativeButton = false` por padrão (é o valor certo para o `<span>` que ele renderiza
-// sozinho), e o `useButton` do motor CONFERE isso no DOM montado, dentro de um efeito: sem esta
-// palavra sai um `console.error` do Base UI a cada montagem de CLIENTE. Não no catálogo, que é
-// HTML estático — no console de quem INSTALA.
-// O DOM foi medido nos dois lados antes da troca. O `role="button"` que a mensagem ameaça NÃO
-// aparecia (o `role="radio"` do motor já vencia a fusão); o que muda de fato é o `<input>`
-// escondido perder o `id`, que migra para este botão — e migra para o lado certo, porque o botão
-// é o rádio e o input é `aria-hidden`. Comportamento idêntico: Enter não seleciona, Espaço
-// seleciona, a seta move E seleciona. O que sai é a camada sintética que o motor punha por cima
-// da ativação nativa do `<button>`.
-export function SegmentedControl({ items, value, onChange, label }) {
-    const s = useAureaStrings();
-    return _jsx(BaseRadioGroup, { className: "segmented", "aria-label": label ?? s.optionsLabel, value: value, onValueChange: v => onChange(String(v)), children: items.map(i => _jsx(BaseRadio.Root, { value: i.value, className: i.value === value ? "active" : undefined, nativeButton: true, render: _jsx("button", { type: "button" }), children: i.label }, i.value)) });
-}
-export function Combobox({ items, value, onValueChange, placeholder, label, id, className }) {
-    const s = useAureaStrings();
-    const portal = usePortalContainer();
-    const autoId = React.useId();
-    const inputId = id ?? autoId;
-    return _jsxs(BaseCombobox.Root, { items: items, value: value, onValueChange: onValueChange, itemToStringLabel: (i) => i.label, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-group", children: [_jsx(BaseCombobox.Input, { id: inputId, placeholder: placeholder, className: "input" }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value) })] }) }) })] });
-}
-const isGrouped = (items) => items.length > 0 && "items" in items[0];
-export function MultiCombobox({ items, value, onValueChange, onInputChange, loading, placeholder, label, id, className }) {
-    const s = useAureaStrings();
-    const portal = usePortalContainer();
-    const autoId = React.useId();
-    const inputId = id ?? autoId;
-    const renderItem = (item) => _jsxs(BaseCombobox.Item, { value: item, className: "menu-item combobox-item", children: [_jsx(BaseCombobox.ItemIndicator, { className: "combobox-check", children: _jsx(Icon, { name: "checkmark", size: "sm" }) }), _jsx("span", { children: item.label })] }, item.value);
-    return _jsxs(BaseCombobox.Root, { multiple: true, items: items, value: value, onValueChange: onValueChange, itemToStringLabel: (i) => i.label, filter: onInputChange ? null : undefined, onInputValueChange: onInputChange ? ((v, d) => { if (d.reason !== "item-press")
-            onInputChange(v); }) : undefined, children: [_jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs(BaseCombobox.InputGroup, { className: "combobox-multi", children: [_jsx(BaseCombobox.Chips, { className: "combobox-chips", children: _jsx(BaseCombobox.Value, { children: (selected) => _jsxs(_Fragment, { children: [selected.map((item) => _jsxs(BaseCombobox.Chip, { className: "combobox-chip", children: [item.label, _jsx(BaseCombobox.ChipRemove, { className: "combobox-chip-remove", "aria-label": `${s.comboboxRemove} ${item.label}`, children: _jsx(Icon, { name: "close", size: "sm" }) })] }, item.value)), _jsx(BaseCombobox.Input, { id: inputId, placeholder: selected.length ? undefined : placeholder, className: "combobox-chip-input" })] }) }) }), _jsxs("span", { className: "combobox-actions", children: [_jsx(BaseCombobox.Clear, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.comboboxClear }) }), _jsx(BaseCombobox.Trigger, { render: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "chevron--down", label: s.comboboxOpen }) })] })] })] }), _jsx(BaseCombobox.Portal, { container: portal, children: _jsx(BaseCombobox.Positioner, { sideOffset: 6, children: _jsxs(BaseCombobox.Popup, { className: "menu combobox-popup", children: [_jsx(BaseCombobox.Empty, { className: "combobox-empty", children: loading ? s.comboboxLoading : s.comboboxEmpty }), _jsx(BaseCombobox.List, { children: isGrouped(items)
-                                    ? (group) => _jsxs(BaseCombobox.Group, { items: group.items, className: "combobox-section", children: [_jsx(BaseCombobox.GroupLabel, { className: "combobox-group-label", children: group.label }), _jsx(BaseCombobox.Collection, { children: renderItem })] }, group.label)
-                                    : renderItem })] }) }) })] });
-}
+// VITRINE da categoria — é este arquivo que `@aurea-uds/react/inputs` 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).
+//
+// Os seis controles continuam IMPORTADOS pelo irmão de cliente, e não só reexportados aqui: o
+// `ehControle` do `Field` compara por IDENTIDADE de referência, e dois objetos com o mesmo nome
+// quebrariam o rótulo do campo em silêncio. Um caminho de import, um objeto.
+export * from "./inputs-client.js";
+export { Select, Textarea, Checkbox, Radio, Switch, Range } from "./markup.js";

package/dist/internal.d.ts

@@ -1,10 +1,25 @@
-import { type HTMLAttributes, type RefAttributes } from "react";
+import React from "react";
 import { type AureaStrings } from "./pure.js";
 export { cx, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity, type AureaStrings, type UniversalState } from "./pure.js";
-export declare const StringsContext: import("react").Context<AureaStrings>;
+export declare const StringsContext: React.Context<AureaStrings>;
 export declare const useAureaStrings: () => AureaStrings;
-export declare const SpriteContext: import("react").Context<string>;
+export declare const SpriteContext: React.Context<string>;
 export declare const useSpriteUrl: () => string;
-export declare const PortalContext: import("react").Context<HTMLElement | null | undefined>;
+export declare const PortalContext: React.Context<HTMLElement | null | undefined>;
 export declare const usePortalContainer: () => HTMLElement | null | undefined;
-export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): import("react").JSX.Element;
+export interface Reordenavel<E extends HTMLElement> {
+    ref: React.RefObject<E | null>;
+    pego: number | null;
+    aviso: string;
+    teclado: (e: React.KeyboardEvent<HTMLButtonElement>, i: number) => void;
+    ponteiroBaixo: (e: React.PointerEvent<HTMLButtonElement>, i: number) => void;
+    ponteiroMove: (e: React.PointerEvent) => void;
+    ponteiroSolta: () => void;
+}
+export declare function useReorder<E extends HTMLElement>({ count, order, onReorder, rowSelector, handleSelector }: {
+    count: number;
+    order: unknown;
+    onReorder: (from: number, to: number) => void;
+    rowSelector: string;
+    handleSelector: string;
+}): Reordenavel<E>;