@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './OtpInput.css';
+import { useState, useRef, useEffect } from "react";
+import Text from "../Text/Text";
+import { gerarId } from "../../utils/id";
+function OtpInput(props) {
+    const groupRef = useRef(null);
+    const ultimoEventoRef = useRef(null);
+    const focoPendenteRef = useRef(-1);
+    const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
+    const [uid, setUid] = useState(() => "");
+    function baseId() {
+        return props.id || uid;
+    }
+    function codeLength() {
+        const n = props.length || 6;
+        return n < 1 ? 1 : n;
+    }
+    function positions() {
+        return Array.from({
+            length: codeLength(),
+        }, (_, i) => i);
+    }
+    function isAlpha() {
+        return props.type === "alphanumeric";
+    }
+    function limpar(texto) {
+        const bruto = texto || "";
+        const aceito = isAlpha()
+            ? bruto.replace(/[^0-9a-zA-Z]/g, "").toUpperCase()
+            : bruto.replace(/[^0-9]/g, "");
+        return aceito;
+    }
+    function currentValue() {
+        const bruto = props.value !== undefined ? props.value : internalValue;
+        return limpar(bruto).slice(0, codeLength());
+    }
+    function charAt(index) {
+        return currentValue().charAt(index);
+    }
+    function isInvalid() {
+        return !!props.invalid || !!props.errorMessage;
+    }
+    function labelId() {
+        return baseId() && props.label ? baseId() + "-label" : undefined;
+    }
+    function errorId() {
+        return baseId() && props.errorMessage ? baseId() + "-error" : undefined;
+    }
+    function groupAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        return props.label && !labelId() ? props.label : undefined;
+    }
+    function ariaInvalidText() {
+        return isInvalid() ? "true" : undefined;
+    }
+    function classes() {
+        return [
+            "umds-otp",
+            `umds-otp--${props.size || "md"}`,
+            isInvalid() ? "umds-otp--invalid" : "",
+            props.disabled ? "umds-otp--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function digitName(index) {
+        const modelo = props.digitLabel || "Dígito {n} de {total}";
+        return modelo
+            .replace("{n}", String(index + 1))
+            .replace("{total}", String(codeLength()));
+    }
+    function inputMode() {
+        return isAlpha() ? "text" : "numeric";
+    }
+    function autoComplete(index) {
+        return index === 0 ? "one-time-code" : "off";
+    }
+    function digitId(index) {
+        return baseId() ? baseId() + "-" + index : undefined;
+    }
+    function definir(proximo) {
+        const novo = limpar(proximo).slice(0, codeLength());
+        const antigo = currentValue();
+        if (novo === antigo)
+            return false;
+        setInternalValue(novo);
+        if (props.onChange)
+            props.onChange(novo);
+        if (novo.length === codeLength() && props.onComplete)
+            props.onComplete(novo);
+        return true;
+    }
+    function focarDepois(index, mudou) {
+        if (mudou)
+            focoPendenteRef.current = index;
+        else
+            focarEm(index);
+    }
+    function focarEm(index) {
+        if (!groupRef.current)
+            return;
+        const caixas = groupRef.current.querySelectorAll("input");
+        const alvo = caixas[Math.max(0, Math.min(index, codeLength() - 1))];
+        if (alvo)
+            alvo.focus();
+    }
+    function limiteDoFoco() {
+        return Math.min(currentValue().length, codeLength() - 1);
+    }
+    function handleInput(event, index) {
+        const nativo = event.nativeEvent || event;
+        if (nativo === ultimoEventoRef.current)
+            return;
+        ultimoEventoRef.current = nativo;
+        const alvo = event.target;
+        const bruto = alvo.value || "";
+        const atual = charAt(index);
+        const valor = currentValue();
+        // Apagou: o código fecha o buraco (os de trás andam um para a frente).
+        if (bruto === "") {
+            const sem = atual
+                ? valor.slice(0, index) + valor.slice(index + 1)
+                : valor;
+            if (atual)
+                definir(sem);
+            alvo.value = sem.charAt(index);
+            return;
+        }
+        let texto = bruto;
+        // Digitou numa caixa que já tinha caractere: vale o que é novo.
+        if (atual && bruto.length === 2) {
+            texto = bruto.charAt(0) === atual ? bruto.charAt(1) : bruto.charAt(0);
+        }
+        const limpo = limpar(texto);
+        if (!limpo) {
+            alvo.value = atual;
+            return;
+        }
+        // O que sobra de um código colado ou autopreenchido segue para as próximas caixas.
+        const proximo = valor.slice(0, index) + limpo + valor.slice(index + limpo.length);
+        const mudou = definir(proximo);
+        // A caixa mostra já o que o código passa a ter (o React só relê a prop no próximo render).
+        alvo.value = limpar(proximo).slice(0, codeLength()).charAt(index);
+        focarDepois(Math.min(index + limpo.length, codeLength() - 1), mudou);
+    }
+    function handlePaste(event, index) {
+        if (!event || !event.clipboardData)
+            return;
+        const texto = limpar(event.clipboardData.getData("text"));
+        event.preventDefault();
+        if (!texto)
+            return;
+        // Código inteiro: substitui tudo. Pedaço: entra a partir da caixa em que se colou.
+        const inicio = texto.length >= codeLength() ? 0 : index;
+        const valor = currentValue();
+        const mudou = definir(valor.slice(0, inicio) + texto + valor.slice(inicio + texto.length));
+        focarDepois(Math.min(inicio + texto.length, codeLength() - 1), mudou);
+    }
+    function handleKeyDown(event, index) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const tecla = event.key;
+        if (tecla === "Backspace" && !charAt(index) && index > 0) {
+            event.preventDefault();
+            const valor = currentValue();
+            const mudou = definir(valor.slice(0, index - 1) + valor.slice(index));
+            focarDepois(index - 1, mudou);
+        }
+        else if (tecla === "ArrowLeft") {
+            event.preventDefault();
+            focarEm(index - 1);
+        }
+        else if (tecla === "ArrowRight") {
+            event.preventDefault();
+            focarEm(Math.min(index + 1, limiteDoFoco()));
+        }
+        else if (tecla === "Home") {
+            event.preventDefault();
+            focarEm(0);
+        }
+        else if (tecla === "End") {
+            event.preventDefault();
+            focarEm(limiteDoFoco());
+        }
+    }
+    function handleFocus(event, index) {
+        // Sem buraco: foco à frente da primeira vazia volta para ela.
+        const limite = limiteDoFoco();
+        if (index > limite) {
+            focarEm(limite);
+            return;
+        }
+        if (event && event.target && event.target.select)
+            event.target.select();
+    }
+    useEffect(() => {
+        if (!props.id)
+            setUid(gerarId("umds-otp"));
+        if (props.autoFocus)
+            focarEm(limiteDoFoco());
+    }, []);
+    useEffect(() => {
+        if (focoPendenteRef.current >= 0) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = -1;
+            focarEm(alvo);
+        }
+    });
+    return (_jsxs("div", { className: classes(), children: [props.label ? (_jsx("span", { className: "umds-otp__label", id: labelId(), children: props.label })) : null, _jsx("div", { role: "group", className: "umds-otp__digits", ref: groupRef, "aria-label": groupAriaLabel(), "aria-labelledby": labelId(), children: positions()?.map((caixa) => (_jsx("input", { type: "text", autoCapitalize: "off", className: "umds-otp__digit", id: digitId(caixa), inputMode: inputMode(), autoComplete: autoComplete(caixa), spellCheck: false, value: charAt(caixa), disabled: props.disabled, "aria-label": digitName(caixa), "aria-invalid": ariaInvalidText(), "aria-describedby": errorId(), onInput: (event) => handleInput(event, caixa), onChange: (event) => handleInput(event, caixa), onKeyDown: (event) => handleKeyDown(event, caixa), onPaste: (event) => handlePaste(event, caixa), onFocus: (event) => handleFocus(event, caixa) }, caixa))) }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: props.errorMessage })) : null] }));
+}
+export default OtpInput;

package/dist/components/PhoneInput/PhoneInput.css

@@ -99,6 +99,14 @@
   border-color: var(--umds-semantic-field-border-default);
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-phone-input--readonly .umds-phone-input__field::placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Flag selector pill ── */
 .umds-phone-input__flag-btn {
   display: inline-flex;

package/dist/components/Popover/Popover.d.ts

@@ -22,6 +22,7 @@ import './Popover.css';
  * @property {boolean} closable - Exibe o botão de fechar no topo.
  * @property {string} closeLabel - Nome acessível do botão de fechar. Padrão: "Fechar".
  * @property {number} width - Largura do painel, em px. Padrão: 240.
+ * @property {number | string} maxHeight - Altura máxima do corpo, que rola quando o conteúdo passa dela. Número vira px; texto vai como CSS (`"60vh"`). `"none"` deixa o corpo crescer com o conteúdo (painel "Colunas do card"). Sem a prop, o teto histórico de 300px continua.
  * @property {string} ariaLabel - Nome acessível quando não há `title`.
  * @property {string} className - Classes CSS adicionais.
  * @property {function} onOpenChange - Avisa quando abre e quando fecha.
@@ -45,6 +46,12 @@ export interface PopoverProps {
     closable?: boolean;
     closeLabel?: string;
     width?: number;
+    /**
+     * Altura máxima do corpo. Número vira px; texto vai como CSS (`"60vh"`).
+     * `"none"` deixa o corpo crescer com o conteúdo. Sem a prop, vale o teto de
+     * 300px de sempre (o cabeçalho e o × não rolam junto).
+     */
+    maxHeight?: number | string;
     ariaLabel?: string;
     className?: string;
     children?: any;

package/dist/components/Popover/Popover.js

@@ -305,6 +305,16 @@ function Popover(props) {
             visibility: positioned ? "visible" : "hidden",
         };
     }
+    function corpoStyle() {
+        if (props.maxHeight === undefined || props.maxHeight === null) {
+            return undefined;
+        }
+        return {
+            maxHeight: typeof props.maxHeight === "number"
+                ? props.maxHeight + "px"
+                : props.maxHeight,
+        };
+    }
     function panelStyle() {
         return {
             opacity: positioned ? 1 : 0,
@@ -339,6 +349,6 @@ function Popover(props) {
     }, []);
     return (_jsxs("span", { ref: anchorRef, className: anchorClasses(), style: {
             display: "inline-flex",
-        }, children: [_jsx("span", { className: "umds-popover__trigger", ref: triggerButtonRef, id: triggerIdText(), role: triggerIsInteractive ? undefined : "button", tabIndex: triggerIsInteractive ? undefined : 0, "aria-haspopup": triggerIsInteractive ? undefined : "dialog", "aria-expanded": triggerIsInteractive ? undefined : ariaExpandedText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeydown(event), children: _jsx(_Fragment, { children: props.children }) }), _jsx(Portal, { children: mounted ? (_jsx("span", { className: "umds-popover__floating", ref: floatingRef, style: floatingStyle(), children: _jsxs("div", { className: "umds-popover__panel", role: "dialog", "aria-modal": "false", ref: panelRef, "aria-labelledby": labelledByText(), "aria-label": props.title ? undefined : props.ariaLabel, tabIndex: -1, style: panelStyle(), onKeyDown: (event) => handlePanelKeydown(event), children: [props.title || props.closable ? (_jsxs("div", { className: "umds-popover__header", children: [props.title ? (_jsx(Text, { as: "span", variant: "body2", weight: "semibold", id: titleIdText(), children: props.title })) : null, props.closable ? (_jsx("button", { type: "button", className: "umds-popover__close", "aria-label": props.closeLabel || "Fechar", onClick: (event) => close(), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: faXmark }) })) : null] })) : null, _jsx("div", { className: "umds-popover__body", children: _jsx(_Fragment, { children: props.content }) })] }) })) : null })] }));
+        }, children: [_jsx("span", { className: "umds-popover__trigger", ref: triggerButtonRef, id: triggerIdText(), role: triggerIsInteractive ? undefined : "button", tabIndex: triggerIsInteractive ? undefined : 0, "aria-haspopup": triggerIsInteractive ? undefined : "dialog", "aria-expanded": triggerIsInteractive ? undefined : ariaExpandedText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeydown(event), children: _jsx(_Fragment, { children: props.children }) }), _jsx(Portal, { children: mounted ? (_jsx("span", { className: "umds-popover__floating", ref: floatingRef, style: floatingStyle(), children: _jsxs("div", { className: "umds-popover__panel", role: "dialog", "aria-modal": "false", ref: panelRef, "aria-labelledby": labelledByText(), "aria-label": props.title ? undefined : props.ariaLabel, tabIndex: -1, style: panelStyle(), onKeyDown: (event) => handlePanelKeydown(event), children: [props.title || props.closable ? (_jsxs("div", { className: "umds-popover__header", children: [props.title ? (_jsx(Text, { as: "span", variant: "body2", weight: "semibold", id: titleIdText(), children: props.title })) : null, props.closable ? (_jsx("button", { type: "button", className: "umds-popover__close", "aria-label": props.closeLabel || "Fechar", onClick: (event) => close(), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: faXmark }) })) : null] })) : null, _jsx("div", { className: "umds-popover__body", style: corpoStyle(), children: _jsx(_Fragment, { children: props.content }) })] }) })) : null })] }));
 }
 export default Popover;

package/dist/components/RichTextEditor/RichTextEditor.css

@@ -0,0 +1,250 @@
+/* ─────────────────────────────────────────────
+   RICH TEXT EDITOR
+   Editor de texto rico leve sobre contenteditable.
+
+   A moldura (borda, raio, foco, erro) segue a família de campos. A barra é uma
+   faixa de fundo claro com botões de 32px: o botão LIGADO (negrito, lista...)
+   ganha o fundo e a cor do primário, e a mesma informação sai em `aria-pressed`.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-rte {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+.umds-rte__label {
+  font-size: var(--umds-semantic-field-label-size);
+  font-weight: var(--umds-semantic-field-label-weight);
+  color: var(--umds-semantic-field-label-color);
+}
+
+.umds-rte__frame {
+  display: flex;
+  flex-direction: column;
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-field-border-default);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: var(--umds-semantic-color-background-white);
+  overflow: hidden;
+  transition:
+    border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-rte__frame:hover {
+  border-color: var(--umds-semantic-field-border-hover);
+}
+
+.umds-rte__frame:focus-within {
+  border-color: var(--umds-semantic-field-border-focus);
+  box-shadow: var(--umds-semantic-field-ring-focus);
+}
+
+.umds-rte--invalid .umds-rte__frame,
+.umds-rte--invalid .umds-rte__frame:hover {
+  border-color: var(--umds-semantic-field-border-error);
+}
+
+.umds-rte--invalid .umds-rte__frame:focus-within {
+  box-shadow: var(--umds-semantic-field-ring-error);
+}
+
+.umds-rte--disabled .umds-rte__frame {
+  background: var(--umds-semantic-field-disabled-background);
+  opacity: var(--umds-semantic-field-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.umds-rte--readonly .umds-rte__frame {
+  background: var(--umds-semantic-field-readonly-background);
+}
+
+/* ── Barra ── */
+.umds-rte__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  background: var(--umds-semantic-color-background-light);
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-rte__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-xs); /* 32px */
+  height: var(--umds-primitive-spacing-xs);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: transparent;
+  color: var(--umds-semantic-color-neutral-dark-down);
+  cursor: pointer;
+  transition:
+    background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-rte__tool:hover:not(:disabled) {
+  background: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-rte__tool--active,
+.umds-rte__tool--active:hover:not(:disabled) {
+  background: var(--umds-semantic-color-primary-light);
+  color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-rte__tool:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-rte__tool:disabled {
+  cursor: not-allowed;
+  opacity: var(--umds-semantic-field-disabled-opacity);
+}
+
+.umds-rte__separator {
+  align-self: stretch;
+  width: var(--umds-primitive-border-width-hairline);
+  margin: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-micro);
+  background: var(--umds-semantic-color-neutral-light-down);
+}
+
+/* ── Campo de link, logo abaixo da barra ── */
+.umds-rte__link {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-mini); /* 8px 12px */
+  background: var(--umds-semantic-color-background-light);
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-rte__link-field {
+  flex: 1 1 var(--umds-primitive-spacing-giant);
+  min-width: 0;
+}
+
+.umds-rte__link-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+}
+
+.umds-rte__table-field {
+  flex: 0 1 var(--umds-primitive-spacing-xxxl); /* 120px */
+  min-width: 0;
+}
+
+.umds-rte__style-field {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* Barra de linha e coluna: aparece com o cursor numa célula. */
+.umds-rte__table-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  background: var(--umds-semantic-color-background-light);
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+/* ── Área de escrita ── */
+.umds-rte__editor {
+  box-sizing: border-box;
+  min-height: var(--umds-primitive-spacing-xxxl); /* 120px */
+  padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* 12px 16px */
+  font-size: var(--umds-semantic-field-text-size); /* 14px */
+  line-height: var(--umds-primitive-font-line-height-lg);
+  color: var(--umds-semantic-field-text-color);
+  outline: none;
+  overflow-wrap: anywhere;
+  overflow-y: auto;
+}
+
+.umds-rte--resizable .umds-rte__editor {
+  resize: vertical;
+}
+
+/* Placeholder: o :empty some assim que há conteúdo (o JS limpa o <br> que sobra). */
+.umds-rte__editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--umds-semantic-field-placeholder-color);
+  pointer-events: none;
+}
+
+.umds-rte__editor ul,
+.umds-rte__editor ol {
+  margin: var(--umds-primitive-spacing-quarck) 0;
+  padding-left: var(--umds-primitive-spacing-xxs); /* 24px */
+}
+
+.umds-rte__editor p,
+.umds-rte__editor blockquote {
+  margin: 0 0 var(--umds-primitive-spacing-nano);
+}
+
+.umds-rte__editor blockquote {
+  padding-left: var(--umds-primitive-spacing-mini);
+  border-left: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-neutral-light-down);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-rte__editor img {
+  max-width: 100%;
+  height: auto;
+}
+
+.umds-rte__editor table {
+  width: 100%;
+  margin: var(--umds-primitive-spacing-nano) 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.umds-rte__editor th,
+.umds-rte__editor td {
+  min-width: var(--umds-primitive-spacing-sm); /* 40px: a célula vazia continua alcançável */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  vertical-align: top;
+  text-align: left;
+}
+
+.umds-rte__editor th {
+  background: var(--umds-semantic-color-background-light);
+  font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
+.umds-rte__editor a {
+  color: var(--umds-semantic-color-primary-pure);
+  text-decoration: underline;
+}
+
+.umds-rte__footer {
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs); /* 8px 16px */
+  border-top: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  background: var(--umds-semantic-color-background-light);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+@media (forced-colors: active) {
+  .umds-rte__tool--active {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,97 @@
+import './RichTextEditor.css';
+/** Ferramentas da barra, na ordem em que aparecem em `toolbar`. `"|"` é um separador. */
+export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "ol" | "link" | "undo" | "redo" | "clear" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "image" | "table" | "fontFamily" | "fontSize" | "textColor" | "|";
+/**
+ * RichTextEditor — editor de texto rico leve, sobre `contenteditable`, sem
+ * biblioteca: negrito, itálico, sublinhado, tachado, listas, link, desfazer e
+ * refazer, e limpar formatação.
+ *
+ * O valor é HTML (`value`/`defaultValue`/`onChange`) e SEMPRE passa por uma
+ * higienização: só ficam negrito, itálico, sublinhado, tachado, listas,
+ * parágrafos, quebras, títulos, citação e link; o resto (`script`, `style`,
+ * `onerror`, `class`, `javascript:`) sai, tanto do `value` que entra quanto do
+ * que se cola (colar entra como texto puro). Link só aceita `http(s)`, `mailto`,
+ * `tel`, caminho e âncora.
+ *
+ * A barra é um `role="toolbar"` com Tab numa parada só e setas entre as
+ * ferramentas; negrito, itálico, sublinhado, tachado e as listas são botões de
+ * liga/desliga (`aria-pressed`) que seguem a posição do cursor. Os atalhos do
+ * navegador (Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+Z) valem, e Ctrl+K abre o link. O
+ * botão de link abre um campo logo abaixo da barra (endereço, aplicar, remover,
+ * cancelar), sem modal.
+ *
+ * A barra se escolhe por `toolbar`: a completa é o padrão; `["bold", "italic",
+ * "underline", "ul", "ol", "link"]` é a compacta; `["bold", "italic"]`, a mínima.
+ * O rodapé aceita o slot `footer` (a assinatura do autor, por exemplo) e a área
+ * pode ser redimensionável (`resizable`).
+ *
+ * Todos os textos são props (`labels`, `toolbarLabel`, `placeholder`).
+ *
+ * Opcionais na `toolbar` (fora da barra padrão): alinhamento (`alignLeft`,
+ * `alignCenter`, `alignRight`, `alignJustify`), imagem (`image`: por endereço ou por
+ * arquivo, que entra como `data:` URL, com texto alternativo) e tabela simples
+ * (`table`: insere linhas × colunas; com o cursor numa célula aparece a barra de
+ * adicionar e remover linha e coluna). Imagem e tabela passam pela mesma
+ * higienização: só PNG, JPEG, GIF e WebP em `data:`, ou `http(s)`; sem SVG.
+ *
+ * Estilo de texto por TOKEN do DS, também opcional na `toolbar`: `fontFamily`
+ * (padrão ou monoespaçada), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
+ * `textColor` (a paleta do DS). Cada um abre um painel abaixo da barra e aplica ao
+ * texto selecionado (sem seleção, o painel pede que se selecione). O valor guarda
+ * `<span style="color: var(--umds-primitive-red-pure)">`: só token do DS passa na
+ * higienização, cor em hex, rgb ou nome sai. Para voltar ao padrão, use `clear`.
+ *
+ * Limites: usa `document.execCommand`, que o
+ * navegador mantém mas está marcado como obsoleto (o comportamento do desfazer
+ * varia um pouco entre navegadores; adicionar e remover linha ou coluna mexe no
+ * DOM e não entra no desfazer). Imagem de arquivo passa de 2 MB? Recusada: o HTML
+ * do valor guarda a imagem inteira.
+ * @property {string} value - HTML (controlado)
+ * @property {string} defaultValue - HTML inicial (não controlado)
+ * @property {string} label - Rótulo visível do campo
+ * @property {string} ariaLabel - Nome acessível quando não há `label` visível
+ * @property {string} placeholder - Texto de apoio com o editor vazio
+ * @property {string[]} toolbar - Ferramentas da barra, em ordem: 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'link' | 'undo' | 'redo' | 'clear' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'image' | 'table' | 'fontFamily' | 'fontSize' | 'textColor' | '|' (separador)
+ * @property {string} toolbarLabel - Nome da barra (padrão "Formatação")
+ * @property {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, fontFamilyMono, styleClose, styleNeedsSelection }`
+ * @property {number} minHeight - Altura mínima da área de escrita, em px (padrão 120)
+ * @property {boolean} resizable - Deixa redimensionar a altura pelo canto
+ * @property {boolean} disabled - Desabilita barra e área
+ * @property {boolean} readOnly - Só leitura: a área não edita e a barra some
+ * @property {boolean} invalid - Estado de erro
+ * @property {string} errorMessage - Mensagem de erro (liga o estado de erro)
+ * @property {string} helperText - Texto de ajuda abaixo do campo
+ * @property {string} id - Base dos ids internos; passe em SSR para os ids já saírem no HTML do servidor
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} onChange - Chamado com o HTML a cada edição
+ * @property {function} onBlur - Chamado quando o foco sai da área de escrita
+ * @slot footer - Rodapé dentro da moldura, abaixo da área de escrita (assinatura).
+ * @quandoUsar Texto formatado que vira conteúdo de documento: despacho, resposta, descrição de serviço, modelo de texto.
+ * @quandoNaoUsar Para texto simples de várias linhas, use `Textarea`. Para texto de uma linha, `Input`. Quando for preciso tabela, imagem, cor ou fonte, este corte não serve: peça ao DS ou use um editor especializado.
+ */
+/** Ferramentas da barra, na ordem em que aparecem em `toolbar`. `"|"` é um separador. */
+export interface RichTextEditorProps {
+    value?: string;
+    defaultValue?: string;
+    label?: string;
+    ariaLabel?: string;
+    placeholder?: string;
+    toolbar?: RichTextTool[];
+    toolbarLabel?: string;
+    labels?: Record<string, string>;
+    minHeight?: number;
+    resizable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    id?: string;
+    className?: string;
+    /** Slot `footer`: abaixo da área de escrita. */
+    footer?: any;
+    onChange?: (html: string) => void;
+    onBlur?: (event?: any) => void;
+}
+declare function RichTextEditor(props: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default RichTextEditor;