@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/OrgChart/OrgChart.js

@@ -0,0 +1,297 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './OrgChart.css';
+import { useState, useRef, useEffect } from "react";
+function OrgChart(props) {
+    const rootRef = useRef(null);
+    const focoPendenteRef = useRef("");
+    const [internalCollapsed, setInternalCollapsed] = useState(() => props.defaultCollapsedIds || []);
+    const [focusId, setFocusId] = useState(() => "");
+    function widthPx() {
+        return props.nodeWidth && props.nodeWidth > 0 ? props.nodeWidth : 176;
+    }
+    function heightPx() {
+        return props.nodeHeight && props.nodeHeight > 0 ? props.nodeHeight : 64;
+    }
+    function gapXPx() {
+        return props.gapX !== undefined && props.gapX >= 0 ? props.gapX : 16;
+    }
+    function gapYPx() {
+        return props.gapY !== undefined && props.gapY >= 0 ? props.gapY : 40;
+    }
+    function collapsed() {
+        return props.collapsedIds !== undefined
+            ? props.collapsedIds
+            : internalCollapsed;
+    }
+    function treeName() {
+        return props.ariaLabel || "Organograma";
+    }
+    function classes() {
+        return ["umds-org-chart", props.className].filter(Boolean).join(" ");
+    }
+    function layout() {
+        const raizes = props.nodes || [];
+        const larg = widthPx();
+        const alt = heightPx();
+        const passoX = larg + gapXPx();
+        const passoY = alt + gapYPx();
+        const fechados = collapsed();
+        const lista = [];
+        const caminhos = [];
+        let folha = 0;
+        let maxNivel = 0;
+        const visitar = (no, nivel, paiId, pos, total) => {
+            const filhos = no.children || [];
+            const temFilhos = filhos.length > 0;
+            const aberto = temFilhos && fechados.indexOf(no.id) === -1;
+            const item = {
+                id: no.id,
+                node: no,
+                level: nivel,
+                parentId: paiId,
+                position: pos,
+                setSize: total,
+                hasChildren: temFilhos,
+                expanded: aberto,
+                childIds: [],
+                x: 0,
+                y: nivel * passoY,
+            };
+            if (nivel > maxNivel)
+                maxNivel = nivel;
+            lista.push(item);
+            if (aberto) {
+                const acima = [];
+                for (let i = 0; i < filhos.length; i++) {
+                    const filho = visitar(filhos[i], nivel + 1, no.id, i + 1, filhos.length);
+                    acima.push(filho);
+                    item.childIds.push(filho.id);
+                }
+                item.x = (acima[0].x + acima[acima.length - 1].x) / 2;
+                // Conector: desce do pai até o meio do espaço, corre na horizontal e desce a cada filho.
+                const paiCentro = item.x + larg / 2;
+                const baseDoPai = item.y + alt;
+                const meio = baseDoPai + gapYPx() / 2;
+                let d = "M" + paiCentro + " " + baseDoPai + " V" + meio;
+                const primeiro = acima[0].x + larg / 2;
+                const ultimo = acima[acima.length - 1].x + larg / 2;
+                if (acima.length > 1)
+                    d += " M" + primeiro + " " + meio + " H" + ultimo;
+                for (let j = 0; j < acima.length; j++) {
+                    const cx = acima[j].x + larg / 2;
+                    d += " M" + cx + " " + meio + " V" + acima[j].y;
+                }
+                caminhos.push(d);
+            }
+            else {
+                item.x = folha * passoX;
+                folha = folha + 1;
+            }
+            return item;
+        };
+        for (let r = 0; r < raizes.length; r++) {
+            visitar(raizes[r], 0, "", r + 1, raizes.length);
+        }
+        return {
+            items: lista,
+            paths: caminhos,
+            width: Math.max(folha * passoX - gapXPx(), larg),
+            height: (maxNivel + 1) * passoY - gapYPx(),
+        };
+    }
+    function itemList() {
+        return layout().items;
+    }
+    function toggleList() {
+        return itemList().filter((item) => item.hasChildren);
+    }
+    function pathList() {
+        return layout().paths;
+    }
+    function surfaceStyle() {
+        return {
+            width: layout().width + "px",
+            height: layout().height + "px",
+        };
+    }
+    function hasNodes() {
+        return itemList().length > 0;
+    }
+    function tabId() {
+        const lista = itemList();
+        for (let i = 0; i < lista.length; i++) {
+            if (lista[i].id === focusId)
+                return focusId;
+        }
+        return lista.length ? lista[0].id : "";
+    }
+    function nodeClasses(item) {
+        return [
+            "umds-org-chart__node",
+            item.level === 0 ? "umds-org-chart__node--root" : "",
+            item.id === props.selectedId ? "umds-org-chart__node--selected" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function nodeStyle(item) {
+        return {
+            left: item.x + "px",
+            top: item.y + "px",
+            width: widthPx() + "px",
+            height: heightPx() + "px",
+        };
+    }
+    function toggleStyle(item) {
+        return {
+            left: item.x + widthPx() / 2 + "px",
+            top: item.y + heightPx() + "px",
+        };
+    }
+    function expandedText(item) {
+        return item.hasChildren ? (item.expanded ? "true" : "false") : undefined;
+    }
+    function selectedText(item) {
+        return item.id === props.selectedId ? "true" : undefined;
+    }
+    function toggleGlyph(item) {
+        return item.expanded ? "−" : "+";
+    }
+    function toggleName(item) {
+        return item.expanded
+            ? props.collapseLabel || "Recolher"
+            : props.expandLabel || "Expandir";
+    }
+    function subtitleOf(item) {
+        return item.node.subtitle || "";
+    }
+    function customContent(item) {
+        if (props.renderNode)
+            return props.renderNode(item.node, {
+                level: item.level,
+                expanded: item.expanded,
+            });
+        return "";
+    }
+    function hasCustomContent() {
+        return !!props.renderNode;
+    }
+    function plainContent() {
+        return !props.renderNode;
+    }
+    function mudarRecolhidos(proximos) {
+        setInternalCollapsed(proximos);
+        if (props.onCollapsedChange)
+            props.onCollapsedChange(proximos);
+    }
+    function alternar(item) {
+        if (!item.hasChildren)
+            return;
+        const atuais = collapsed();
+        mudarRecolhidos(item.expanded
+            ? atuais.concat([item.id])
+            : atuais.filter((id) => id !== item.id));
+    }
+    function acharItem(id) {
+        const lista = itemList();
+        for (let i = 0; i < lista.length; i++) {
+            if (lista[i].id === id)
+                return lista[i];
+        }
+        return null;
+    }
+    function irPara(id) {
+        if (!id)
+            return;
+        setFocusId(id);
+        focoPendenteRef.current = id;
+    }
+    function focarNo(id) {
+        if (!rootRef.current)
+            return;
+        const alvo = rootRef.current.querySelector('[data-node-id="' + id + '"]');
+        if (alvo)
+            alvo.focus();
+    }
+    function handleNodeClick(item) {
+        setFocusId(item.id);
+        if (props.onNodeClick)
+            props.onNodeClick(item.node);
+    }
+    function handleToggleClick(event, item) {
+        if (event && event.stopPropagation)
+            event.stopPropagation();
+        alternar(item);
+    }
+    function irmaosDe(item) {
+        return itemList().filter((outro) => outro.parentId === item.parentId);
+    }
+    function handleKeyDown(event, item) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        if (event.target !== event.currentTarget)
+            return;
+        const tecla = event.key;
+        const irmaos = irmaosDe(item);
+        // Por id: o desenho é recalculado a cada leitura, então os objetos mudam e a identidade não vale.
+        let indice = -1;
+        for (let i = 0; i < irmaos.length; i++) {
+            if (irmaos[i].id === item.id)
+                indice = i;
+        }
+        if (tecla === "ArrowLeft" || tecla === "ArrowRight") {
+            event.preventDefault();
+            const alvo = irmaos[indice + (tecla === "ArrowRight" ? 1 : -1)];
+            if (alvo)
+                irPara(alvo.id);
+        }
+        else if (tecla === "Home") {
+            event.preventDefault();
+            irPara(irmaos[0].id);
+        }
+        else if (tecla === "End") {
+            event.preventDefault();
+            irPara(irmaos[irmaos.length - 1].id);
+        }
+        else if (tecla === "ArrowUp") {
+            event.preventDefault();
+            if (item.parentId)
+                irPara(item.parentId);
+        }
+        else if (tecla === "ArrowDown") {
+            event.preventDefault();
+            if (!item.hasChildren)
+                return;
+            if (!item.expanded) {
+                // Recolhido: o primeiro Baixo abre; o foco desce no seguinte.
+                alternar(item);
+                return;
+            }
+            irPara(item.childIds[0]);
+        }
+        else if (tecla === " ") {
+            event.preventDefault();
+            alternar(item);
+        }
+        else if (tecla === "Enter") {
+            event.preventDefault();
+            handleNodeClick(item);
+        }
+    }
+    function handleFocus(event, item) {
+        if (event && event.target !== event.currentTarget)
+            return;
+        if (focusId !== item.id)
+            setFocusId(item.id);
+    }
+    useEffect(() => {
+        if (focoPendenteRef.current) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = "";
+            focarNo(alvo);
+        }
+    });
+    return (_jsx("div", { ref: rootRef, className: classes(), children: hasNodes() ? (_jsx("div", { role: "tree", className: "umds-org-chart__scroller", "aria-label": treeName(), children: _jsxs("div", { className: "umds-org-chart__surface", style: surfaceStyle(), children: [_jsx("svg", { "aria-hidden": "true", focusable: "false", className: "umds-org-chart__lines", width: layout().width, height: layout().height, children: pathList()?.map((caminho, posicao) => (_jsx("path", { className: "umds-org-chart__line", d: caminho }, posicao))) }), itemList()?.map((item) => (_jsxs("div", { role: "treeitem", style: nodeStyle(item), "data-node-id": item.id, "aria-level": item.level + 1, "aria-posinset": item.position, "aria-setsize": item.setSize, "aria-expanded": expandedText(item), "aria-selected": selectedText(item), tabIndex: item.id === tabId() ? 0 : -1, onClick: (event) => handleNodeClick(item), onKeyDown: (event) => handleKeyDown(event, item), onFocus: (event) => handleFocus(event, item), className: nodeClasses(item), children: [hasCustomContent() ? (_jsx("div", { className: "umds-org-chart__custom", children: customContent(item) })) : null, plainContent() ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-org-chart__title", title: item.node.title, children: item.node.title }), item.node.subtitle ? (_jsx("span", { className: "umds-org-chart__subtitle", title: subtitleOf(item), children: item.node.subtitle })) : null] })) : null] }, item.id))), toggleList()?.map((item) => (_jsx("button", { type: "button", "aria-hidden": "true", className: "umds-org-chart__toggle", style: toggleStyle(item), tabIndex: -1, title: toggleName(item), onClick: (event) => handleToggleClick(event, item), children: toggleGlyph(item) }, item.id)))] }) })) : null }));
+}
+export default OrgChart;

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/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;