@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/IconPicker/IconPicker.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IconPicker.css';
+import { useState, useRef, useEffect } from "react";
+import Icon from "../Icon/Icon";
+import Input from "../Input/Input";
+import Text from "../Text/Text";
+import { gerarId } from "../../utils/id";
+import { semAcento } from "../../utils/texto";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+function IconPicker(props) {
+    const groupRef = useRef(null);
+    const focoPendenteRef = useRef(-1);
+    const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
+    const [query, setQuery] = useState(() => "");
+    const [uid, setUid] = useState(() => "");
+    function baseId() {
+        return props.id || uid;
+    }
+    function labelId() {
+        return baseId() && props.label ? baseId() + "-label" : undefined;
+    }
+    function groupAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        return props.label && !labelId() ? props.label : undefined;
+    }
+    function currentValue() {
+        return props.value !== undefined ? props.value : internalValue;
+    }
+    function columnCount() {
+        return props.columns && props.columns > 0 ? props.columns : 8;
+    }
+    function classes() {
+        return [
+            "umds-icon-picker",
+            `umds-icon-picker--${props.size || "md"}`,
+            props.disabled ? "umds-icon-picker--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function gridStyle() {
+        const estilo = {
+            gridTemplateColumns: "repeat(" + columnCount() + ", var(--umds-icon-picker-tile))",
+        };
+        if (props.maxHeight)
+            estilo.maxHeight = props.maxHeight + "px";
+        return estilo;
+    }
+    function nomeDe(icone) {
+        if (!icone)
+            return "";
+        if (typeof icone === "string")
+            return icone;
+        return icone.iconName || "";
+    }
+    function rotuloDe(nome) {
+        if (props.iconLabel)
+            return props.iconLabel(nome);
+        return nome.replace(/-/g, " ");
+    }
+    function itemList() {
+        const lista = props.icons || [];
+        const saida = [];
+        for (let i = 0; i < lista.length; i++) {
+            const bruto = lista[i];
+            const embrulhado = !!bruto && bruto.icon !== undefined && bruto.iconName === undefined;
+            const icone = embrulhado ? bruto.icon : bruto;
+            const nome = nomeDe(icone);
+            if (!nome)
+                continue;
+            const rotulo = embrulhado && bruto.label ? bruto.label : rotuloDe(nome);
+            const palavras = embrulhado && bruto.keywords ? bruto.keywords.join(" ") : "";
+            saida.push({
+                name: nome,
+                label: rotulo,
+                icon: icone,
+                raw: bruto,
+                search: semAcento(nome + " " + rotulo + " " + palavras),
+            });
+        }
+        return saida;
+    }
+    function visibleItems() {
+        const busca = semAcento(query);
+        if (!busca)
+            return itemList();
+        return itemList().filter((item) => item.search.indexOf(busca) !== -1);
+    }
+    function hasResults() {
+        return visibleItems().length > 0;
+    }
+    function emptyMessage() {
+        return props.emptyText || "Nenhum ícone encontrado";
+    }
+    function resultsText() {
+        return (props.resultsLabel || "{count} ícones").replace("{count}", String(visibleItems().length));
+    }
+    function searchName() {
+        return props.searchLabel || "Buscar ícone";
+    }
+    function estaEscolhido(item) {
+        return !!currentValue() && item.name === currentValue();
+    }
+    function itemClasses(item) {
+        return [
+            "umds-icon-picker__item",
+            estaEscolhido(item) ? "umds-icon-picker__item--selected" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function indiceDoTab() {
+        const lista = visibleItems();
+        for (let i = 0; i < lista.length; i++) {
+            if (estaEscolhido(lista[i]))
+                return i;
+        }
+        return 0;
+    }
+    function tabIndexDe(index) {
+        return index === indiceDoTab() ? 0 : -1;
+    }
+    function escolher(item) {
+        if (props.disabled)
+            return;
+        setInternalValue(item.name);
+        if (props.onChange)
+            props.onChange(item.name, item.raw);
+    }
+    function focarEm(index) {
+        if (!groupRef.current)
+            return;
+        const botoes = groupRef.current.querySelectorAll('[role="radio"]');
+        const alvo = botoes[index];
+        if (alvo)
+            alvo.focus();
+    }
+    function handleKeyDown(event, index) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const lista = visibleItems();
+        const total = lista.length;
+        if (!total)
+            return;
+        const colunas = columnCount();
+        let alvo = index;
+        if (event.key === "ArrowRight")
+            alvo = (index + 1) % total;
+        else if (event.key === "ArrowLeft")
+            alvo = (index - 1 + total) % total;
+        else if (event.key === "ArrowDown")
+            alvo = index + colunas < total ? index + colunas : index;
+        else if (event.key === "ArrowUp")
+            alvo = index - colunas >= 0 ? index - colunas : index;
+        else if (event.key === "Home")
+            alvo = 0;
+        else if (event.key === "End")
+            alvo = total - 1;
+        else
+            return;
+        event.preventDefault();
+        if (alvo === index &&
+            event.key !== "ArrowRight" &&
+            event.key !== "ArrowLeft")
+            return;
+        escolher(lista[alvo]);
+        focoPendenteRef.current = alvo;
+    }
+    function handleSearch(texto) {
+        setQuery(texto);
+    }
+    function handleSearchKeyDown(event) {
+        if (!event || event.key !== "ArrowDown" || !hasResults())
+            return;
+        event.preventDefault();
+        focarEm(indiceDoTab());
+    }
+    useEffect(() => {
+        if (!props.id)
+            setUid(gerarId("umds-icon-picker"));
+    }, []);
+    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-icon-picker__label", id: labelId(), children: props.label })) : null, !props.hideSearch ? (_jsx("div", { className: "umds-icon-picker__search", onKeyDown: (event) => handleSearchKeyDown(event), children: _jsx(Input, { size: "sm", type: "search", ariaLabel: searchName(), placeholder: props.searchPlaceholder || "Buscar ícone...", iconLeft: faMagnifyingGlass, value: query, disabled: props.disabled, onChange: (texto) => handleSearch(texto) }) })) : null, _jsx("span", { role: "status", "aria-live": "polite", className: "umds-icon-picker__sr", children: resultsText() }), hasResults() ? (_jsx("div", { role: "radiogroup", className: "umds-icon-picker__grid", ref: groupRef, "aria-label": groupAriaLabel(), "aria-labelledby": labelId(), style: gridStyle(), children: visibleItems()?.map((item, posicao) => (_jsx("button", { type: "button", role: "radio", "aria-checked": estaEscolhido(item) ? "true" : "false", "aria-label": item.label, title: item.label, disabled: props.disabled, tabIndex: tabIndexDe(posicao), onClick: (event) => escolher(item), onKeyDown: (event) => handleKeyDown(event, posicao), className: itemClasses(item), children: _jsx(Icon, { variant: "inherit", icon: item.icon, size: props.size === "sm" ? "sm" : "md" }) }, item.name))) })) : null, !hasResults() ? (_jsx("div", { className: "umds-icon-picker__empty", children: _jsx(Text, { as: "p", variant: "body2", color: "secondary", children: emptyMessage() }) })) : null] }));
+}
+export default IconPicker;

package/dist/components/Input/Input.css

@@ -34,7 +34,7 @@
   display: flex;
   align-items: center;
   background-color: var(--umds-semantic-color-background-white);
-  border: 1px solid var(--umds-semantic-color-neutral-light-down);
+  border: 1px solid var(--umds-semantic-field-border-default);
   border-radius: var(--umds-primitive-border-radius-sm);
   box-sizing: border-box;
   transition:
@@ -167,12 +167,12 @@
 .umds-input--readonly .umds-input__container,
 .umds-input__container--readonly {
   background-color: var(--umds-semantic-field-readonly-background);
-  border-color: var(--umds-semantic-color-neutral-light-down);
+  border-color: var(--umds-semantic-field-border-default);
 }
 
 .umds-input--readonly .umds-input__container:hover,
 .umds-input__container--readonly:hover {
-  border-color: var(--umds-semantic-color-neutral-light-down);
+  border-color: var(--umds-semantic-field-border-default);
 }
 
 .umds-input--readonly .umds-input__container:focus-within,
@@ -186,6 +186,14 @@
   cursor: 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-input--readonly .umds-input__control::placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Ícone esquerdo ── */
 .umds-input__icon-left {
   display: flex;
@@ -196,6 +204,20 @@
   flex-shrink: 0;
 }
 
+/* ── Ícone decorativo à direita (iconRight) ── */
+.umds-input__icon-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--umds-primitive-spacing-nano);
+  color: var(--umds-semantic-color-neutral-dark-medium);
+  flex-shrink: 0;
+}
+
+.umds-input--disabled .umds-input__icon-right {
+  color: var(--umds-semantic-color-neutral-dark-up);
+}
+
 /* ── Ações à direita (botões de ícone) ── */
 .umds-input__actions-right {
   display: flex;
@@ -235,6 +257,22 @@
   outline-offset: 0; /* exceção ao offset 2px: o botão vive DENTRO do campo, e o afastamento invadiria a borda */
 }
 
+/* ── borderless: o campo dentro de um grupo que já tem a moldura ──
+   Sem borda, fundo e raio. O foco NÃO some: o anel do campo vira um contorno
+   para dentro (WCAG 2.4.7), e o erro mantém a borda vermelha (a cor do erro não
+   pode depender só da moldura do grupo). Sem erro, hover e foco não pintam borda. */
+.umds-input--borderless:not(.umds-input--error) .umds-input__container {
+  border-color: transparent;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.umds-input--borderless .umds-input__container:focus-within:not(.umds-input__container--disabled):not(.umds-input__container--readonly) {
+  box-shadow: none;
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: -2px;
+}
+
 /* ── Mobile: fonte ≥16px no controle (decisão 25/07) ──
    Fonte <16px num campo focado dispara zoom automático no Safari iOS.
    Só abaixo do breakpoint-sm (640px) — desktop permanece idêntico. */

package/dist/components/Input/Input.d.ts

@@ -34,7 +34,10 @@ export interface InputAction {
  * @property {string} ariaLabel - Nome acessível quando não há label visível
  * @property {IconProp} iconLeft - Ícone Font Awesome à esquerda
  * @property {InputAction[]} iconsRight - Botões de ação com ícone à direita
- * @property {function} onChange - Callback acionado ao digitar (recebe o novo valor string)
+ * @property {IconProp} iconRight - Ícone decorativo à direita (não é botão, some para o leitor de tela). Para ação clicável, use `iconsRight`.
+ * @property {boolean} borderless - Sem borda, fundo e raio: o campo dentro de um grupo que já tem a moldura (um Select e um Input lado a lado numa mesma caixa). O foco continua visível, em contorno, e o erro mantém a borda vermelha.
+ * @property {string} mask - Máscara simples: 'cpf' | 'cnpj' | 'cep' | 'phone'. O valor exibido e o que chega em `onChange` já vêm formatados (para só os dígitos, `valor.replace(/\D/g, "")`). Aceita só dígitos, limita o tamanho e abre o teclado numérico no celular.
+ * @property {function} onChange - Callback acionado A CADA TECLA (recebe o novo valor string), nos dois frameworks. O blur sai em `onBlur`.
  * @property {function} onFocus - Callback de foco (recebe o evento nativo)
  * @property {function} onBlur - Callback de blur (recebe o evento nativo)
  * @quandoUsar Entrada de texto de UMA linha: nome, e-mail, número, busca. É o campo padrão quando o dado é curto e livre.
@@ -81,8 +84,18 @@ export interface InputProps {
     fullWidth?: boolean;
     className?: string;
     ariaLabel?: string;
+    /** Nome acessível do botão de mostrar a senha (`type="password"`). Troque para traduzir. @default 'Mostrar senha' */
+    showPasswordLabel?: string;
+    /** Nome acessível do botão de ocultar a senha (`type="password"`). Troque para traduzir. @default 'Ocultar senha' */
+    hidePasswordLabel?: string;
     iconLeft?: IconProp;
     iconsRight?: InputAction[];
+    /** Ícone decorativo à direita (não clicável, `aria-hidden`). Para ação, use `iconsRight`. */
+    iconRight?: IconProp;
+    /** Sem borda, fundo e raio, para o campo dentro de um grupo que já tem a moldura. O foco e o erro continuam visíveis. @default false */
+    borderless?: boolean;
+    /** Máscara simples. O valor exibido e o de `onChange` já saem formatados. */
+    mask?: "cpf" | "cnpj" | "cep" | "phone";
     onChange?: (value: string) => void;
     onFocus?: (event?: any) => void;
     onBlur?: (event?: any) => void;

package/dist/components/Input/Input.js

@@ -1,11 +1,13 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Input.css';
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Text from "../Text/Text";
 function Input(props) {
+    const ultimoEventoRef = useRef(null);
+    const ultimoValorRef = useRef(null);
     const [isPasswordVisible, setIsPasswordVisible] = useState(() => false);
     const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
     const [uid, setUid] = useState(() => "umds-input-" + Math.random().toString(36).slice(2, 9));
@@ -15,6 +17,11 @@ function Input(props) {
     function inputId() {
         return props.id || uid;
     }
+    function passwordToggleLabel() {
+        return isPasswordVisible
+            ? props.hidePasswordLabel || "Ocultar senha"
+            : props.showPasswordLabel || "Mostrar senha";
+    }
     function errorId() {
         return (props.id || uid) + "-error";
     }
@@ -43,6 +50,7 @@ function Input(props) {
             props.disabled ? "umds-input--disabled" : "",
             props.readOnly ? "umds-input--readonly" : "",
             props.numberSpinner ? "umds-input--number-spinner" : "",
+            props.borderless ? "umds-input--borderless" : "",
             `umds-input--${props.size || "md"}`,
             props.className,
         ]
@@ -64,16 +72,74 @@ function Input(props) {
     function iconSize() {
         return props.size === "sm" || props.size === "xs" ? "sm" : "md";
     }
+    function aplicarMascara(valor) {
+        const texto = valor === undefined || valor === null ? "" : String(valor);
+        if (!props.mask)
+            return texto;
+        let digitos = texto.replace(/\D/g, "");
+        let padrao = "";
+        if (props.mask === "cpf")
+            padrao = "###.###.###-##";
+        else if (props.mask === "cnpj")
+            padrao = "##.###.###/####-##";
+        else if (props.mask === "cep")
+            padrao = "#####-###";
+        else if (props.mask === "phone")
+            padrao = digitos.length > 10 ? "(##) #####-####" : "(##) ####-####";
+        let saida = "";
+        let posicao = 0;
+        for (let i = 0; i < padrao.length && posicao < digitos.length; i++) {
+            if (padrao.charAt(i) === "#") {
+                saida += digitos.charAt(posicao);
+                posicao++;
+            }
+            else {
+                saida += padrao.charAt(i);
+            }
+        }
+        return saida;
+    }
+    function tamanhoMaximo() {
+        if (props.mask === "cpf")
+            return 14;
+        if (props.mask === "cnpj")
+            return 18;
+        if (props.mask === "cep")
+            return 9;
+        if (props.mask === "phone")
+            return 15;
+        return undefined;
+    }
+    function modoDoTeclado() {
+        return props.mask ? "numeric" : undefined;
+    }
+    function valorExibido() {
+        const bruto = props.value !== undefined ? props.value : internalValue;
+        return aplicarMascara(bruto);
+    }
     function handleChange(event) {
-        setInternalValue(event.target.value);
+        const nativo = event.nativeEvent || event;
+        if (nativo === ultimoEventoRef.current)
+            return;
+        ultimoEventoRef.current = nativo;
+        const valor = aplicarMascara(event.target.value);
+        // O `change` do blur (Vue) repete o que o `input` da última tecla
+        // entregou; só passa se o valor mudou de fato (ex.: change disparado à mão).
+        if (nativo.type === "change" && valor === ultimoValorRef.current)
+            return;
+        ultimoValorRef.current = valor;
+        if (props.mask && event.target.value !== valor) {
+            event.target.value = valor;
+        }
+        setInternalValue(valor);
         if (props.onChange) {
-            props.onChange(event.target.value);
+            props.onChange(valor);
         }
     }
-    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-input__label", forId: inputId(), children: [_jsx(_Fragment, { children: props.label }), props.required ? (_jsx("span", { className: "umds-input__required", children: "*" })) : null] })) : null, _jsxs("div", { className: inputContainerClasses(), children: [props.iconLeft ? (_jsx("div", { className: "umds-input__icon-left", children: _jsx(Icon, { icon: props.iconLeft, size: iconSize() }) })) : null, _jsx("input", { className: "umds-input__control", id: inputId(), type: inputType(), name: props.name, min: props.min, max: props.max, step: props.step, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: props.value !== undefined ? props.value : internalValue, onChange: (event) => handleChange(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-label": props.ariaLabel, "aria-invalid": !!props.invalid ||
-                            !!(props.errorMessage && props.errorMessage.length > 0), "aria-describedby": describedBy() || undefined, required: props.required }), _jsxs("div", { className: "umds-input__actions-right", children: [props.type === "password" ? (_jsx("button", { type: "button", className: "umds-input__action-btn", disabled: props.disabled, onClick: (event) => togglePassword(), "aria-label": isPasswordVisible ? "Ocultar senha" : "Mostrar senha", children: _jsx(Icon, { icon: isPasswordVisible ? faEyeSlash : faEye, size: iconSize() }) })) : null, props.iconsRight?.length ? (_jsx(_Fragment, { children: props.iconsRight?.map((action, index) => (_jsx("button", { type: "button", className: "umds-input__action-btn", disabled: props.disabled, onClick: (e) => {
+    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-input__label", forId: inputId(), children: [_jsx(_Fragment, { children: props.label }), props.required ? (_jsx("span", { className: "umds-input__required", children: "*" })) : null] })) : null, _jsxs("div", { className: inputContainerClasses(), children: [props.iconLeft ? (_jsx("div", { className: "umds-input__icon-left", children: _jsx(Icon, { icon: props.iconLeft, size: iconSize() }) })) : null, _jsx("input", { className: "umds-input__control", id: inputId(), type: inputType(), name: props.name, min: props.min, max: props.max, step: props.step, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: valorExibido(), maxLength: tamanhoMaximo(), inputMode: modoDoTeclado(), onInput: (event) => handleChange(event), onChange: (event) => handleChange(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-label": props.ariaLabel, "aria-invalid": !!props.invalid ||
+                            !!(props.errorMessage && props.errorMessage.length > 0), "aria-describedby": describedBy() || undefined, required: props.required }), _jsxs("div", { className: "umds-input__actions-right", children: [props.type === "password" ? (_jsx("button", { type: "button", className: "umds-input__action-btn", disabled: props.disabled, onClick: (event) => togglePassword(), "aria-label": passwordToggleLabel(), children: _jsx(Icon, { icon: isPasswordVisible ? faEyeSlash : faEye, size: iconSize() }) })) : null, props.iconsRight?.length ? (_jsx(_Fragment, { children: props.iconsRight?.map((action, index) => (_jsx("button", { type: "button", className: "umds-input__action-btn", disabled: props.disabled, onClick: (e) => {
                                         e.stopPropagation();
                                         action.onClick?.(e);
-                                    }, title: action.tooltip, "aria-label": action.label || action.tooltip, children: _jsx(Icon, { icon: action.icon, size: iconSize() }) }, index))) })) : null] })] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: _jsx(_Fragment, { children: props.errorMessage }) })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: _jsx(_Fragment, { children: props.helperText }) })) : null] }));
+                                    }, title: action.tooltip, "aria-label": action.label || action.tooltip, children: _jsx(Icon, { icon: action.icon, size: iconSize() }) }, index))) })) : null] }), props.iconRight ? (_jsx("div", { "aria-hidden": "true", className: "umds-input__icon-right", children: _jsx(Icon, { icon: props.iconRight, size: iconSize() }) })) : null] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: _jsx(_Fragment, { children: props.errorMessage }) })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: _jsx(_Fragment, { children: props.helperText }) })) : null] }));
 }
 export default Input;

package/dist/components/Kanban/Kanban.css

@@ -7,7 +7,11 @@
    cartão.
    ============================================ */
 
+/* `position: relative` ancora os textos só para leitor de tela (absolutos) das
+   colunas dentro da área que rola; sem ele, o de uma coluna fora da tela sobe
+   até a página e cria rolagem horizontal nela. */
 .umds-kanban {
+  position: relative;
   display: flex;
   align-items: stretch;
   gap: var(--umds-primitive-spacing-xxxs);
@@ -90,6 +94,7 @@
 .umds-kanban__indicator {
   flex: 0 0 auto;
   height: var(--umds-primitive-border-width-thin); /* espessura de linha: 2px */
+  /* stylelint-disable-next-line 1ds/espaco-da-escala -- compensação exata: 2px de linha + 8px de gap = 10px, devolvidos em -5px de cada lado */
   margin: -5px 0; /* ver comentário acima */
   border-radius: var(--umds-primitive-border-radius-pill);
   background-color: var(--umds-semantic-color-primary-pure);

package/dist/components/Kanban/Kanban.d.ts

@@ -50,6 +50,37 @@ export interface KanbanCardMove {
     toColumnId: string;
     toIndex: number;
 }
+/**
+ * Frases que o quadro anuncia na região `aria-live` durante o movimento. Todas
+ * opcionais: a que faltar fica no texto padrão em português. `position` monta
+ * a frase de posição que as outras recebem pronta no parâmetro `position`.
+ */
+export interface KanbanAnnouncements {
+    /** Posição do cartão. Padrão: "Coluna {coluna}, posição {n} de {total}." */
+    position?: (column: string, position: number, total: number) => string;
+    /** Cartão pego pelo teclado. Padrão: "Cartão {cartão} pego. {posição} Use as setas para mover, Espaço ou Enter para soltar, Esc para cancelar." */
+    grabbed?: (card: string, position: string) => string;
+    /** Cartão solto num lugar novo pelo teclado. Padrão: "Cartão {cartão} solto. {posição}" */
+    dropped?: (card: string, position: string) => string;
+    /** Cartão solto onde estava. Padrão: "Cartão {cartão} solto na posição original." */
+    droppedInPlace?: (card: string) => string;
+    /** Cartão arrastado com o ponteiro e solto. Padrão: "Cartão {cartão} movido. {posição}" */
+    moved?: (card: string, position: string) => string;
+    /** Movimento cancelado com Esc. Padrão: "Movimento cancelado. Cartão {cartão} voltou. {posição}" */
+    cancelled?: (card: string, position: string) => string;
+    /** Seta para cima no topo da coluna. Padrão: "Início da coluna." */
+    columnStart?: string;
+    /** Seta para baixo no fim da coluna. Padrão: "Fim da coluna." */
+    columnEnd?: string;
+    /** Seta para a esquerda na primeira coluna. Padrão: "Não há coluna à esquerda." */
+    noColumnLeft?: string;
+    /** Seta para a direita na última coluna. Padrão: "Não há coluna à direita." */
+    noColumnRight?: string;
+    /** Coluna de destino chegou ao limite de WIP. Padrão: "Limite de {n} cartões atingido." */
+    limitReached?: (limit: number) => string;
+    /** Coluna de destino passou do limite de WIP. Padrão: "Limite de {n} cartões excedido." */
+    limitExceeded?: (limit: number) => string;
+}
 /**
  * Componente Kanban — quadro de colunas com cartões que se movem entre elas.
  *
@@ -111,6 +142,16 @@ export interface KanbanProps {
     columnHeadingLevel?: number;
     className?: string;
     id?: string;
+    /** Frases anunciadas ao leitor de tela durante o movimento (ver `KanbanAnnouncements`). Cada uma que faltar fica no padrão em português. Troque para traduzir. @default frases em português */
+    announcements?: KanbanAnnouncements;
+    /** Prefixo do responsável na descrição lida de cada cartão e no avatar (o nome vem depois de ": "). Troque para traduzir. @default 'Responsável' */
+    assigneeLabel?: string;
+    /** Prefixo das etiquetas na descrição lida de cada cartão (a lista vem depois de ": "). Troque para traduzir. @default 'Etiquetas' */
+    tagsLabel?: string;
+    /** Descrição do papel do cartão (aria-roledescription). Troque para traduzir. @default 'cartão arrastável' */
+    cardRoleDescription?: string;
+    /** Contagem por extenso de cada coluna, repassada ao `countLabel` do KanbanColumn. Recebe a quantidade e o limite de WIP (quando há). Troque para traduzir. @default (count, limit) => '4 de 3 cartões, limite excedido' | '1 cartão' | 'N cartões' */
+    columnCountLabel?: (count: number, limit?: number) => string;
 }
 import type { KanbanCardTag } from "./KanbanCard";
 declare function Kanban(props: KanbanProps): import("react/jsx-runtime").JSX.Element;