@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/OrgChart/OrgChart.css

@@ -0,0 +1,149 @@
+/* ─────────────────────────────────────────────
+   ORG CHART
+   Organograma de cima para baixo, com conectores.
+
+   O desenho é calculado em JS (posições absolutas numa superfície do tamanho do
+   organograma); este CSS dá a cara dos nós e das linhas. A raiz sai cheia na
+   cor primária, os demais em tom claro. O texto do nó corta com reticências.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-org-chart {
+  font-family: var(--umds-semantic-font-family-base);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-org-chart__scroller {
+  overflow: auto;
+  /* Folga para o foco e a sombra dos nós não serem cortados pelo overflow. */
+  padding: var(--umds-primitive-spacing-nano);
+}
+
+.umds-org-chart__surface {
+  position: relative;
+  margin: 0 auto;
+}
+
+.umds-org-chart__lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.umds-org-chart__line {
+  fill: none;
+  stroke: var(--umds-semantic-color-neutral-light-down);
+  stroke-width: var(--umds-primitive-border-width-hairline);
+}
+
+/* ── Nó ── */
+.umds-org-chart__node {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--umds-primitive-spacing-micro); /* 2px */
+  padding: var(--umds-primitive-spacing-nano); /* 8px */
+  text-align: center;
+  background: var(--umds-semantic-color-primary-light);
+  color: var(--umds-semantic-color-primary-dark);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  box-shadow: var(--umds-semantic-shadow-sm);
+  cursor: pointer;
+  transition:
+    box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-org-chart__node--root {
+  background: var(--umds-semantic-color-primary-pure);
+  /* Texto claro sobre o primário cheio. */
+  color: var(--umds-semantic-color-background-white);
+  border-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-org-chart__node:hover {
+  box-shadow: var(--umds-semantic-shadow-md);
+}
+
+.umds-org-chart__node--selected {
+  border-color: var(--umds-semantic-color-primary-pure);
+  box-shadow: 0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-primary-pure);
+}
+
+.umds-org-chart__node:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: var(--umds-primitive-border-width-thin);
+}
+
+.umds-org-chart__title,
+.umds-org-chart__subtitle {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.umds-org-chart__title {
+  font-size: var(--umds-primitive-font-size-xs); /* 16px */
+  font-weight: var(--umds-primitive-font-weight-bold);
+}
+
+.umds-org-chart__subtitle {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+.umds-org-chart__custom {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ── Expandir e recolher (mouse; o teclado usa Espaço no nó) ── */
+.umds-org-chart__toggle {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-xxs); /* 24px */
+  height: var(--umds-primitive-spacing-xxs);
+  margin: 0;
+  padding: 0;
+  transform: translate(-50%, -50%);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-radius: var(--umds-primitive-border-radius-circular);
+  background: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font: inherit;
+  font-size: var(--umds-primitive-font-size-xs); /* 16px */
+  line-height: 1;
+  cursor: pointer;
+}
+
+.umds-org-chart__toggle:hover {
+  background: var(--umds-semantic-color-background-light);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+@media (forced-colors: active) {
+  .umds-org-chart__node {
+    border: var(--umds-primitive-border-width-hairline) solid CanvasText;
+  }
+
+  .umds-org-chart__node--selected {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+
+  .umds-org-chart__line {
+    stroke: CanvasText;
+  }
+}

package/dist/components/OrgChart/OrgChart.d.ts

@@ -0,0 +1,83 @@
+import './OrgChart.css';
+/**
+ * Nó do organograma.
+ * @property {string} id - Identidade do nó (única no organograma)
+ * @property {string} title - Título do nó (a sigla, por exemplo)
+ * @property {string} subtitle - Segunda linha (o nome por extenso)
+ * @property {OrgChartNode[]} children - Nós filhos
+ */
+export interface OrgChartNode {
+    id: string;
+    title: string;
+    subtitle?: string;
+    children?: OrgChartNode[];
+    [key: string]: any;
+}
+/**
+ * OrgChart — organograma: uma árvore hierárquica desenhada de cima para baixo,
+ * com conectores, em que cada nó mostra título e subtítulo (ou o conteúdo que
+ * você der) e os que têm filhos expandem e recolhem.
+ *
+ * O desenho é calculado, não aninhado: cada nó tem largura e altura fixas
+ * (`nodeWidth`, `nodeHeight`), os filhos se distribuem sob o pai e o pai se
+ * centra sobre eles. Por isso o texto do nó corta com reticências (o `title`
+ * completo vai no tooltip) e o conteúdo livre precisa caber na caixa. Se o
+ * organograma passar da largura do container, o container rola.
+ *
+ * O primeiro nível (a raiz) sai cheio na cor primária e os demais em tom claro;
+ * `selectedId` marca um nó. O conteúdo do nó é livre: no React, `renderNode(nó,
+ * { level, expanded })`; no Vue, o slot `node` com `{ node, level, expanded }`.
+ *
+ * Acessibilidade: é uma `role="tree"` com nós `treeitem` (`aria-level`,
+ * `aria-posinset`, `aria-setsize`, `aria-expanded`). Um Tab entra no nó em foco;
+ * Cima vai ao pai, Baixo ao primeiro filho (abrindo o nó, se estiver recolhido),
+ * Esquerda e Direita aos irmãos, Home e End ao primeiro e ao último irmão, Espaço
+ * expande ou recolhe, Enter aciona o nó (`onNodeClick`). O botão de expandir
+ * desenhado no nó é para o mouse (a mesma ação do teclado já existe).
+ *
+ * Tudo expandido por padrão: `collapsedIds` (controlado) ou `defaultCollapsedIds`
+ * escolhem o que começa recolhido, e `onCollapsedChange` avisa a lista nova.
+ *
+ * Limites: só de cima para baixo; sem zoom nem arrastar (a rolagem é a do
+ * container); nó de altura variável não cabe: use `nodeHeight` para o maior.
+ * @property {OrgChartNode[]} nodes - A árvore: lista de nós raiz, cada um com `children`
+ * @property {string[]} collapsedIds - Ids recolhidos (controlado)
+ * @property {string[]} defaultCollapsedIds - Ids que começam recolhidos (não controlado)
+ * @property {string} selectedId - Id do nó marcado
+ * @property {number} nodeWidth - Largura de cada nó, em px (padrão 176)
+ * @property {number} nodeHeight - Altura de cada nó, em px (padrão 64)
+ * @property {number} gapX - Espaço entre nós irmãos, em px (padrão 16)
+ * @property {number} gapY - Espaço entre um nível e o seguinte, em px (padrão 40)
+ * @property {string} ariaLabel - Nome acessível da árvore (padrão "Organograma")
+ * @property {string} expandLabel - Nome do botão de expandir (padrão "Expandir")
+ * @property {string} collapseLabel - Nome do botão de recolher (padrão "Recolher")
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} renderNode - Só no React: conteúdo do nó, `(nó, { level, expanded }) => nó`. No Vue, o slot `node`.
+ * @property {function} onNodeClick - Clique ou Enter num nó: recebe o nó
+ * @property {function} onCollapsedChange - Mudou o que está recolhido: recebe a lista de ids
+ * @slot node - Só no Vue. Conteúdo do nó: `{ node, level, expanded }`.
+ * @quandoUsar Mostrar a estrutura de setores ou de cargos de um órgão como um desenho, com a hierarquia à vista.
+ * @quandoNaoUsar Para navegar e escolher em hierarquias grandes, use `Tree` (lista indentada, mais densa e acessível). Para um fluxo de processo, use o editor de processos. Para uma lista plana, use `List`.
+ */
+export interface OrgChartProps {
+    nodes?: OrgChartNode[];
+    collapsedIds?: string[];
+    defaultCollapsedIds?: string[];
+    selectedId?: string;
+    nodeWidth?: number;
+    nodeHeight?: number;
+    gapX?: number;
+    gapY?: number;
+    ariaLabel?: string;
+    expandLabel?: string;
+    collapseLabel?: string;
+    className?: string;
+    renderNode?: (node: OrgChartNode, meta: {
+        level: number;
+        expanded: boolean;
+    }) => any;
+    onNodeClick?: (node: OrgChartNode) => void;
+    onCollapsedChange?: (ids: string[]) => void;
+}
+declare function OrgChart(props: OrgChartProps): import("react/jsx-runtime").JSX.Element;
+export default OrgChart;

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;