@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/OtpInput/OtpInput.css

@@ -0,0 +1,93 @@
+/* ─────────────────────────────────────────────
+   OTP INPUT
+   Código de verificação em caixas de um caractere.
+
+   A caixa segue a família de campos: borda de repouso, hover, foco (borda +
+   anel) e erro vêm dos tokens `--umds-semantic-field-*`. O que muda é a
+   geometria: caixa alta, número grande e centralizado.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-otp {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+.umds-otp__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-otp__digits {
+  display: flex;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+}
+
+.umds-otp__digit {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  font-family: inherit;
+  font-weight: var(--umds-primitive-font-weight-bold);
+  color: var(--umds-semantic-field-text-color);
+  background: var(--umds-semantic-color-background-white);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-field-border-default);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  caret-color: var(--umds-semantic-color-primary-pure);
+  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-otp--md .umds-otp__digit {
+  width: var(--umds-primitive-spacing-md); /* 48px */
+  height: var(--umds-primitive-spacing-lg); /* 56px */
+  font-size: var(--umds-primitive-font-size-md); /* 24px */
+}
+
+.umds-otp--sm .umds-otp__digit {
+  width: var(--umds-primitive-spacing-sm); /* 40px */
+  height: var(--umds-primitive-spacing-md); /* 48px */
+  font-size: var(--umds-primitive-font-size-sm); /* 20px */
+}
+
+.umds-otp__digit:hover:not(:disabled) {
+  border-color: var(--umds-semantic-field-border-hover);
+}
+
+.umds-otp__digit:focus,
+.umds-otp__digit:focus-visible {
+  outline: none;
+  border-color: var(--umds-semantic-field-border-focus);
+  box-shadow: var(--umds-semantic-field-ring-focus);
+}
+
+.umds-otp--invalid .umds-otp__digit,
+.umds-otp--invalid .umds-otp__digit:hover:not(:disabled) {
+  border-color: var(--umds-semantic-field-border-error);
+}
+
+.umds-otp--invalid .umds-otp__digit:focus,
+.umds-otp--invalid .umds-otp__digit:focus-visible {
+  box-shadow: var(--umds-semantic-field-ring-error);
+}
+
+.umds-otp__digit:disabled {
+  cursor: not-allowed;
+  background: var(--umds-semantic-field-disabled-background);
+  opacity: var(--umds-semantic-field-disabled-opacity);
+}
+
+/* Alto contraste: o anel de foco de sombra some, o contorno do sistema fica. */
+@media (forced-colors: active) {
+  .umds-otp__digit:focus,
+  .umds-otp__digit:focus-visible {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+    outline-offset: var(--umds-primitive-border-width-thin);
+  }
+}

package/dist/components/OtpInput/OtpInput.d.ts

@@ -0,0 +1,60 @@
+import './OtpInput.css';
+/**
+ * OtpInput — código de verificação em caixas de um caractere (SMS, e-mail,
+ * app autenticador).
+ *
+ * `length` caixas (6 por padrão). O foco anda sozinho: digitar avança, Backspace
+ * apaga e volta, as setas, Home e End movem. Colar o código inteiro em qualquer
+ * caixa distribui os caracteres; o preenchimento automático do navegador (SMS)
+ * também, porque a primeira caixa leva `autocomplete="one-time-code"`.
+ * Clicar numa caixa à frente da primeira vazia manda o foco de volta a ela: o
+ * código nunca fica com buraco no meio.
+ *
+ * O valor é uma string. `onChange` recebe o código a cada mudança e `onComplete`
+ * recebe quando as `length` caixas ficam cheias (uma vez por código completo).
+ * Aceita só dígitos (`type="numeric"`, padrão, com teclado numérico no celular)
+ * ou letras e dígitos (`type="alphanumeric"`, que sai em maiúsculas).
+ *
+ * Acessibilidade: o conjunto é um `role="group"` nomeado por `label` ou
+ * `ariaLabel`, e cada caixa tem nome próprio ("Dígito 3 de 6"). Troque
+ * `digitLabel` para traduzir; `{n}` e `{total}` viram a posição e o tamanho.
+ * Erro por `invalid` e `errorMessage` (ligado às caixas por `aria-describedby`).
+ * @property {number} length - Quantidade de caixas (padrão 6)
+ * @property {string} value - Código (controlado)
+ * @property {string} defaultValue - Código inicial (não controlado)
+ * @property {string} type - 'numeric' (padrão) | 'alphanumeric'
+ * @property {string} label - Rótulo visível do conjunto
+ * @property {string} ariaLabel - Nome acessível quando não há `label` visível
+ * @property {string} digitLabel - Nome de cada caixa; `{n}` e `{total}` são trocados (padrão: "Dígito {n} de {total}")
+ * @property {boolean} invalid - Estado de erro
+ * @property {string} errorMessage - Mensagem de erro (liga o estado de erro)
+ * @property {boolean} disabled - Desabilita todas as caixas
+ * @property {boolean} autoFocus - Foca a primeira caixa vazia ao montar
+ * @property {string} size - 'sm' | 'md' (padrão)
+ * @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 código a cada mudança
+ * @property {function} onComplete - Chamado com o código quando todas as caixas ficam cheias
+ * @quandoUsar Confirmar um código curto que a pessoa recebeu por outro canal: autenticação em duas etapas, confirmação de e-mail ou de telefone.
+ * @quandoNaoUsar Para texto livre ou código de tamanho variável, use `Input`. Para senha, use `Input type="password"`. Para número com máscara (CPF, CEP), use `Input mask`.
+ */
+export interface OtpInputProps {
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    type?: "numeric" | "alphanumeric";
+    label?: string;
+    ariaLabel?: string;
+    digitLabel?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    size?: "sm" | "md";
+    id?: string;
+    className?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+}
+declare function OtpInput(props: OtpInputProps): import("react/jsx-runtime").JSX.Element;
+export default OtpInput;

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/Pagination/Pagination.d.ts

@@ -31,6 +31,12 @@ export interface PaginationProps {
     previousPageLabel?: string;
     /** Rótulo acessível do botão de próxima página. @default 'Próxima página' */
     nextPageLabel?: string;
+    /** Palavra entre o campo de página e o total (`default` e `alternative`). Troque para traduzir. @default 'de' */
+    ofLabel?: string;
+    /** Texto do intervalo na variante `resumed`. Recebe início, fim e total de itens. Troque para traduzir. @default (start, end, total) => start + '-' + end + ' de ' + total */
+    itemRangeLabel?: (start: number, end: number, total: number) => string;
+    /** Nome acessível de cada botão numerado (`full-width` e `bordered`). Recebe o número da página. Troque para traduzir. @default (page) => 'Página ' + page */
+    pageLabel?: (page: number) => string;
     page?: number;
     totalPages?: number;
     variant?: "default" | "alternative" | "resumed" | "full-width" | "bordered";

package/dist/components/Pagination/Pagination.js

@@ -161,8 +161,16 @@ function Pagination(props) {
         const current = props.page || 1;
         const start = (current - 1) * size + 1;
         const end = Math.min(current * size, totalItems);
+        if (props.itemRangeLabel)
+            return props.itemRangeLabel(start, end, totalItems);
         return start + "-" + end + " de " + totalItems;
     }
+    function ofText() {
+        return props.ofLabel || "de";
+    }
+    function pageAriaLabel(page) {
+        return props.pageLabel ? props.pageLabel(page) : "Página " + page;
+    }
     function prevText() {
         return props.prevLabel || "Anterior";
     }
@@ -240,6 +248,6 @@ function Pagination(props) {
     useEffect(() => {
         syncInputToPage();
     });
-    return (_jsxs("nav", { "aria-label": props.ariaLabel || "Paginação", className: classes(), children: [resolvedVariant() === "default" ? (_jsxs(_Fragment, { children: [props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__link-btn", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), children: [_jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronLeft }), _jsx("span", { children: prevText() })] })) : null, _jsx("input", { type: "text", inputMode: "numeric", className: "umds-pagination__input", value: inputValue, disabled: props.disabled, "aria-label": props.currentPageLabel || "Página atual", onInput: (event) => handleInputChange(event), onKeyDown: (event) => handleInputKeydown(event), onBlur: (event) => commitInput() }), _jsx("span", { className: "umds-pagination__of", children: "de" }), _jsx("span", { className: "umds-pagination__total", children: props.totalPages || 1 }), props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__link-btn", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), children: [_jsx("span", { children: nextText() }), _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronRight })] })) : null] })) : null, resolvedVariant() === "alternative" ? (_jsxs(_Fragment, { children: [props.showPrevNext !== false ? (_jsx("button", { type: "button", className: "umds-pagination__ghost-btn", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), "aria-label": props.previousPageLabel || "Página anterior", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faChevronLeft }) })) : null, _jsx("input", { type: "text", inputMode: "numeric", className: "umds-pagination__input", value: inputValue, disabled: props.disabled, "aria-label": props.currentPageLabel || "Página atual", onInput: (event) => handleInputChange(event), onKeyDown: (event) => handleInputKeydown(event), onBlur: (event) => commitInput() }), _jsx("span", { className: "umds-pagination__of", children: "de" }), _jsx("span", { className: "umds-pagination__total", children: props.totalPages || 1 }), props.showPrevNext !== false ? (_jsx("button", { type: "button", className: "umds-pagination__ghost-btn", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), "aria-label": props.nextPageLabel || "Próxima página", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faChevronRight }) })) : null] })) : null, resolvedVariant() === "resumed" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-pagination__range", children: rangeLabel() }), props.showPrevNext !== false ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "umds-pagination__ghost-btn", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), "aria-label": props.previousPageLabel || "Página anterior", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faChevronLeft }) }), _jsx("button", { type: "button", className: "umds-pagination__ghost-btn", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), "aria-label": props.nextPageLabel || "Próxima página", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faChevronRight }) })] })) : null] })) : null, resolvedVariant() === "full-width" ? (_jsxs(_Fragment, { children: [props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__nav-btn", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), children: [_jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronLeft }), _jsx("span", { children: prevText() })] })) : null, pages()?.map((item) => (_jsxs("span", { className: "umds-pagination__item", children: [item.type === "page" ? (_jsx("button", { type: "button", onClick: (event) => goToPage(item.value), disabled: props.disabled, "aria-label": `Página ${item.value}`, "aria-current": isActive(item.value) ? "page" : undefined, className: getBtnClass(item.value), children: item.label })) : null, item.type === "dots" ? (_jsx("span", { "aria-hidden": "true", className: "umds-pagination__dots", children: item.label })) : null] }, item.key))), props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__nav-btn", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), children: [_jsx("span", { children: nextText() }), _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronRight })] })) : null] })) : null, resolvedVariant() === "bordered" ? (_jsxs("span", { className: "umds-pagination__box", children: [props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__cell-btn umds-pagination__cell-btn--prev", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), children: [_jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronLeft }), _jsx("span", { children: prevText() })] })) : null, _jsx("span", { className: "umds-pagination__cell-pages", children: pages()?.map((item) => (_jsxs("span", { className: "umds-pagination__item", children: [item.type === "page" ? (_jsx("button", { type: "button", onClick: (event) => goToPage(item.value), disabled: props.disabled, "aria-label": `Página ${item.value}`, "aria-current": isActive(item.value) ? "page" : undefined, className: getBtnClass(item.value), children: item.label })) : null, item.type === "dots" ? (_jsx("span", { "aria-hidden": "true", className: "umds-pagination__dots", children: item.label })) : null] }, item.key))) }), props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__cell-btn umds-pagination__cell-btn--next", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), children: [_jsx("span", { children: nextText() }), _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronRight })] })) : null] })) : null] }));
+    return (_jsxs("nav", { "aria-label": props.ariaLabel || "Paginação", className: classes(), children: [resolvedVariant() === "default" ? (_jsxs(_Fragment, { children: [props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__link-btn", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), children: [_jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronLeft }), _jsx("span", { children: prevText() })] })) : null, _jsx("input", { type: "text", inputMode: "numeric", className: "umds-pagination__input", value: inputValue, disabled: props.disabled, "aria-label": props.currentPageLabel || "Página atual", onInput: (event) => handleInputChange(event), onKeyDown: (event) => handleInputKeydown(event), onBlur: (event) => commitInput() }), _jsx("span", { className: "umds-pagination__of", children: ofText() }), _jsx("span", { className: "umds-pagination__total", children: props.totalPages || 1 }), props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__link-btn", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), children: [_jsx("span", { children: nextText() }), _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronRight })] })) : null] })) : null, resolvedVariant() === "alternative" ? (_jsxs(_Fragment, { children: [props.showPrevNext !== false ? (_jsx("button", { type: "button", className: "umds-pagination__ghost-btn", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), "aria-label": props.previousPageLabel || "Página anterior", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faChevronLeft }) })) : null, _jsx("input", { type: "text", inputMode: "numeric", className: "umds-pagination__input", value: inputValue, disabled: props.disabled, "aria-label": props.currentPageLabel || "Página atual", onInput: (event) => handleInputChange(event), onKeyDown: (event) => handleInputKeydown(event), onBlur: (event) => commitInput() }), _jsx("span", { className: "umds-pagination__of", children: ofText() }), _jsx("span", { className: "umds-pagination__total", children: props.totalPages || 1 }), props.showPrevNext !== false ? (_jsx("button", { type: "button", className: "umds-pagination__ghost-btn", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), "aria-label": props.nextPageLabel || "Próxima página", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faChevronRight }) })) : null] })) : null, resolvedVariant() === "resumed" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-pagination__range", children: rangeLabel() }), props.showPrevNext !== false ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "umds-pagination__ghost-btn", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), "aria-label": props.previousPageLabel || "Página anterior", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faChevronLeft }) }), _jsx("button", { type: "button", className: "umds-pagination__ghost-btn", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), "aria-label": props.nextPageLabel || "Próxima página", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faChevronRight }) })] })) : null] })) : null, resolvedVariant() === "full-width" ? (_jsxs(_Fragment, { children: [props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__nav-btn", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), children: [_jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronLeft }), _jsx("span", { children: prevText() })] })) : null, pages()?.map((item) => (_jsxs("span", { className: "umds-pagination__item", children: [item.type === "page" ? (_jsx("button", { type: "button", onClick: (event) => goToPage(item.value), disabled: props.disabled, "aria-label": pageAriaLabel(item.value), "aria-current": isActive(item.value) ? "page" : undefined, className: getBtnClass(item.value), children: item.label })) : null, item.type === "dots" ? (_jsx("span", { "aria-hidden": "true", className: "umds-pagination__dots", children: item.label })) : null] }, item.key))), props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__nav-btn", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), children: [_jsx("span", { children: nextText() }), _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronRight })] })) : null] })) : null, resolvedVariant() === "bordered" ? (_jsxs("span", { className: "umds-pagination__box", children: [props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__cell-btn umds-pagination__cell-btn--prev", onClick: (event) => goToPage((props.page || 1) - 1), disabled: isPrevDisabled(), children: [_jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronLeft }), _jsx("span", { children: prevText() })] })) : null, _jsx("span", { className: "umds-pagination__cell-pages", children: pages()?.map((item) => (_jsxs("span", { className: "umds-pagination__item", children: [item.type === "page" ? (_jsx("button", { type: "button", onClick: (event) => goToPage(item.value), disabled: props.disabled, "aria-label": pageAriaLabel(item.value), "aria-current": isActive(item.value) ? "page" : undefined, className: getBtnClass(item.value), children: item.label })) : null, item.type === "dots" ? (_jsx("span", { "aria-hidden": "true", className: "umds-pagination__dots", children: item.label })) : null] }, item.key))) }), props.showPrevNext !== false ? (_jsxs("button", { type: "button", className: "umds-pagination__cell-btn umds-pagination__cell-btn--next", onClick: (event) => goToPage((props.page || 1) + 1), disabled: isNextDisabled(), children: [_jsx("span", { children: nextText() }), _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronRight })] })) : null] })) : null] }));
 }
 export default Pagination;

package/dist/components/PhoneInput/PhoneInput.css

@@ -96,7 +96,15 @@
 }
 
 .umds-phone-input--readonly .umds-phone-input__container:hover {
-  border-color: var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
+  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 ── */

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -36,6 +36,16 @@ export interface PhoneInputCountry {
 export interface PhoneInputProps {
     /** Rótulo acessível do seletor de país. @default 'Selecionar país' */
     countryLabel?: string;
+    /** Nomes dos países na lista e no alt da bandeira, por código ISO (ex.: `{ BR: "Brazil", ES: "Spain" }`). Código ausente mantém o nome padrão. Troque para traduzir. @default nomes em português */
+    countryNames?: {
+        [code: string]: string;
+    };
+    /** Nome acessível do botão de copiar o número. Troque para traduzir. @default 'Copiar número' */
+    copyLabel?: string;
+    /** Dica (title) do botão de copiar. Troque para traduzir. @default 'Copiar' */
+    copyTitle?: string;
+    /** Nome acessível e dica do botão de copiar logo depois da cópia. Troque para traduzir. @default 'Copiado!' */
+    copiedLabel?: string;
     value?: string;
     defaultValue?: string;
     placeholder?: string;

package/dist/components/PhoneInput/PhoneInput.js

@@ -97,14 +97,31 @@ function PhoneInput(props) {
     const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
     const [uid, setUid] = useState(() => "umds-phone-input-" + Math.random().toString(36).slice(2, 9));
     function countryList() {
-        return COUNTRIES;
+        const nomes = props.countryNames;
+        if (!nomes)
+            return COUNTRIES;
+        return COUNTRIES.map((c) => ({
+            ...c,
+            name: nomes[c.code] || c.name,
+        }));
     }
     function selectedCode() {
         return props.country || internalCountry;
     }
     function currentCountry() {
         const code = selectedCode();
-        return COUNTRIES.find((c) => c.code === code) || COUNTRIES[1];
+        const lista = countryList();
+        return lista.find((c) => c.code === code) || lista[1];
+    }
+    function copyAriaText() {
+        return copied
+            ? props.copiedLabel || "Copiado!"
+            : props.copyLabel || "Copiar número";
+    }
+    function copyTitleText() {
+        return copied
+            ? props.copiedLabel || "Copiado!"
+            : props.copyTitle || "Copiar";
     }
     function inputId() {
         return props.id || uid;
@@ -298,7 +315,7 @@ function PhoneInput(props) {
             stopAutoUpdate();
         };
     }, []);
-    return (_jsxs("div", { ref: rootRef, onKeyDown: (event) => handleWrapperKeydown(event), className: wrapperClasses(), children: [props.label ? (_jsx("label", { className: "umds-phone-input__label", htmlFor: inputId(), children: props.label })) : null, _jsxs("div", { className: containerClasses(), children: [_jsxs("button", { type: "button", "aria-haspopup": "listbox", className: "umds-phone-input__flag-btn", ref: flagBtnRef, onClick: (event) => toggleDropdown(), disabled: props.disabled || props.readOnly, "aria-expanded": open, "aria-label": props.countryLabel || "Selecionar país", children: [_jsx("img", { width: "16", height: "12", className: "umds-phone-input__flag-img", src: currentCountry().flagUrl, alt: currentCountry().name }), _jsx("span", { "aria-hidden": "true", className: "umds-phone-input__chevron", children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faChevronDown }) })] }), _jsx("input", { type: "tel", inputMode: "tel", className: "umds-phone-input__field", id: inputId(), name: props.name, value: displayValue(), placeholder: props.placeholder || `${currentCountry().ddi} (000) 000-0000`, disabled: props.disabled, readOnly: props.readOnly, "aria-invalid": isInvalid(), "aria-describedby": describedBy() || undefined, onChange: (event) => handleChange(event) }), props.name ? (_jsx("input", { type: "hidden", name: props.name + "_ddi", value: currentCountry().ddi })) : null, showCopy() && !props.disabled && !props.readOnly ? (_jsxs("button", { type: "button", onClick: (event) => handleCopy(), "aria-label": copied ? "Copiado!" : "Copiar número", title: copied ? "Copiado!" : "Copiar", className: [
+    return (_jsxs("div", { ref: rootRef, onKeyDown: (event) => handleWrapperKeydown(event), className: wrapperClasses(), children: [props.label ? (_jsx("label", { className: "umds-phone-input__label", htmlFor: inputId(), children: props.label })) : null, _jsxs("div", { className: containerClasses(), children: [_jsxs("button", { type: "button", "aria-haspopup": "listbox", className: "umds-phone-input__flag-btn", ref: flagBtnRef, onClick: (event) => toggleDropdown(), disabled: props.disabled || props.readOnly, "aria-expanded": open, "aria-label": props.countryLabel || "Selecionar país", children: [_jsx("img", { width: "16", height: "12", className: "umds-phone-input__flag-img", src: currentCountry().flagUrl, alt: currentCountry().name }), _jsx("span", { "aria-hidden": "true", className: "umds-phone-input__chevron", children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faChevronDown }) })] }), _jsx("input", { type: "tel", inputMode: "tel", className: "umds-phone-input__field", id: inputId(), name: props.name, value: displayValue(), placeholder: props.placeholder || `${currentCountry().ddi} (000) 000-0000`, disabled: props.disabled, readOnly: props.readOnly, "aria-invalid": isInvalid(), "aria-describedby": describedBy() || undefined, onChange: (event) => handleChange(event) }), props.name ? (_jsx("input", { type: "hidden", name: props.name + "_ddi", value: currentCountry().ddi })) : null, showCopy() && !props.disabled && !props.readOnly ? (_jsxs("button", { type: "button", onClick: (event) => handleCopy(), "aria-label": copyAriaText(), title: copyTitleText(), className: [
                             "umds-phone-input__copy-btn",
                             copied ? "umds-phone-input__copy-btn--copied" : "",
                         ]

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;