@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/Chips/Chips.js

@@ -11,6 +11,7 @@ function Chips(props) {
             `umds-chip--${props.variant || "default"}`,
             props.disabled ? "umds-chip--disabled" : "",
             props.removable ? "umds-chip--removable" : "",
+            props.removable && props.circularRemove ? "umds-chip--remove-circle" : "",
             props.selected ? "umds-chip--selected" : "",
             props.onClick ? "umds-chip--clickable" : "",
             props.className,
@@ -19,7 +20,10 @@ function Chips(props) {
             .join(" ");
     }
     function iconSize() {
-        return props.size === "sm" ? "8px" : "10px";
+        return props.size === "sm" || props.size === "xs" ? "8px" : "10px";
+    }
+    function removeLabelText() {
+        return (props.removeAriaLabel || "Remover") + " " + props.label;
     }
     function handleClick(event) {
         if (!props.disabled && props.onClick) {
@@ -31,6 +35,6 @@ function Chips(props) {
             props.onRemove(event);
         }
     }
-    return (_jsxs("span", { className: chipClasses(), children: [props.onClick ? (_jsx("button", { type: "button", className: "umds-chip__action", onClick: (event) => handleClick(event), "aria-pressed": !!props.selected, disabled: props.disabled, children: _jsx("span", { className: "umds-chip__label", children: props.label }) })) : null, !props.onClick ? (_jsx("span", { className: "umds-chip__label", children: props.label })) : null, props.removable ? (_jsx("button", { type: "button", className: "umds-chip__remove", onClick: (event) => handleRemove(event), "aria-label": `Remover ${props.label}`, disabled: props.disabled, children: _jsx(Icon, { variant: "inherit", icon: faXmark, customSize: iconSize() }) })) : null] }));
+    return (_jsxs("span", { className: chipClasses(), children: [props.onClick ? (_jsx("button", { type: "button", className: "umds-chip__action", onClick: (event) => handleClick(event), "aria-pressed": !!props.selected, disabled: props.disabled, children: _jsx("span", { className: "umds-chip__label", children: props.label }) })) : null, !props.onClick ? (_jsx("span", { className: "umds-chip__label", children: props.label })) : null, props.removable ? (_jsx("button", { type: "button", className: "umds-chip__remove", onClick: (event) => handleRemove(event), "aria-label": removeLabelText(), disabled: props.disabled, children: _jsx(Icon, { variant: "inherit", icon: faXmark, customSize: iconSize() }) })) : null] }));
 }
 export default Chips;

package/dist/components/Coachmark/Coachmark.css

@@ -0,0 +1,118 @@
+/* ─────────────────────────────────────────────
+   COACHMARK
+   Tour guiado: véu com recorte no alvo e um cartão que o aponta.
+
+   O recorte é uma caixa transparente cuja SOMBRA enorme escurece o resto da
+   página (um buraco no véu sem máscara nem SVG). Quando o passo não tem alvo,
+   o véu é cheio e o cartão vai ao centro.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-coachmark {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--umds-semantic-layer-popover);
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+/* Captura o clique: a página atrás fica inerte durante o tour. */
+.umds-coachmark__veil {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.umds-coachmark--no-target .umds-coachmark__veil {
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token); mesmo valor do Modal */
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.umds-coachmark__cutout {
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  /* 100vmax: maior que qualquer tela, o recorte nunca deixa a borda do véu à mostra. */
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token); mesmo valor do Modal */
+  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
+  transition:
+    top var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    left var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    width var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard),
+    height var(--umds-semantic-motion-duration-base) var(--umds-semantic-motion-easing-standard);
+}
+
+/* ── Cartão ── */
+.umds-coachmark__card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  /* 360px: 200px + 160px da escala; nunca passa da tela. */
+  width: calc(var(--umds-primitive-spacing-giant) + var(--umds-primitive-spacing-huge));
+  max-width: calc(100vw - var(--umds-primitive-spacing-xs));
+  padding: var(--umds-primitive-spacing-xxs); /* 24px */
+  background: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  border-radius: var(--umds-primitive-border-radius-md); /* 16px */
+  box-shadow: var(--umds-primitive-shadow-level-3);
+  outline: none;
+}
+
+.umds-coachmark__card--centered {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.umds-coachmark__card:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-coachmark__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  margin-top: var(--umds-primitive-spacing-nano);
+}
+
+.umds-coachmark__actions {
+  display: inline-flex;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  margin-left: auto;
+}
+
+/* Só para leitor de tela: "2 de 8: título", a cada passo. */
+.umds-coachmark__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .umds-coachmark__card {
+    border: var(--umds-primitive-border-width-thin) solid CanvasText;
+  }
+
+  .umds-coachmark__cutout {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}

package/dist/components/Coachmark/Coachmark.d.ts

@@ -0,0 +1,75 @@
+import './Coachmark.css';
+/**
+ * Passo do tour.
+ * @property {string} id - Identidade do passo (opcional)
+ * @property {any} target - O que o passo aponta: seletor CSS (`"#aba-fluxos"`), elemento, ref do React (`{ current }`), ref do Vue (`{ value }`) ou função que devolve um deles. Sem alvo (ou alvo que não existe na tela), o cartão fica no centro e a página inteira escurece.
+ * @property {string} title - Título do passo
+ * @property {string} content - Texto do passo
+ * @property {string} placement - Lado do cartão em relação ao alvo: 'top' | 'bottom' | 'left' | 'right' (padrão 'bottom'; inverte sozinho se não couber)
+ */
+export interface CoachmarkStep {
+    id?: string;
+    target?: any;
+    title: string;
+    content?: string;
+    placement?: "top" | "bottom" | "left" | "right";
+    [key: string]: any;
+}
+/**
+ * Coachmark — tour guiado: uma sequência de passos, cada um apontando um
+ * elemento da tela com um cartão, enquanto o resto da página escurece e o
+ * elemento fica destacado num recorte.
+ *
+ * O cartão é um diálogo modal (`role="dialog"`, `aria-modal`): o foco entra nele
+ * ao abrir, o Tab fica preso nele, Esc sai do tour, as setas esquerda e direita
+ * voltam e avançam, e o foco volta ao elemento de antes ao fechar. A cada passo o
+ * leitor de tela ouve "2 de 8: título" (região `aria-live`).
+ *
+ * O componente é CONTROLADO por `open`: o tour só existe com `open` verdadeiro, e
+ * `onClose(motivo)` avisa quando ele quer fechar (`"finish"` no último
+ * "Concluir", `"skip"` em "Sair do tour", `"escape"` no Esc). O passo atual é
+ * interno (`defaultStep` para começar adiante), ou controlado por `step` com
+ * `onStepChange`. Reabrir recomeça do primeiro passo.
+ *
+ * O alvo é achado por seletor, elemento ou ref e acompanhado: rolagem,
+ * redimensionamento e mudança de tamanho do alvo reposicionam o recorte e o
+ * cartão. Todos os textos do cartão são props (`nextLabel`, `previousLabel`,
+ * `finishLabel`, `skipLabel`, `counterLabel`): em tela em inglês, passe todos.
+ *
+ * Limite: a página atrás fica inerte (o véu captura o clique), então o alvo
+ * não é clicável durante o tour.
+ * @property {boolean} open - Mostra o tour
+ * @property {CoachmarkStep[]} steps - Os passos, em ordem
+ * @property {number} step - Passo atual, a partir de 0 (controlado)
+ * @property {number} defaultStep - Passo inicial (não controlado)
+ * @property {number} padding - Folga do recorte em torno do alvo, em px (padrão 8)
+ * @property {string} nextLabel - Texto de "Próximo" (padrão: "Próximo")
+ * @property {string} previousLabel - Texto de "Anterior" (padrão: "Anterior")
+ * @property {string} finishLabel - Texto do botão do último passo (padrão: "Concluir")
+ * @property {string} skipLabel - Texto de sair do tour (padrão: "Sair do tour")
+ * @property {string} counterLabel - Contador; `{current}` e `{total}` são trocados (padrão: "{current} de {total}")
+ * @property {boolean} hideSkip - Esconde o "Sair do tour" (o Esc continua saindo)
+ * @property {string} className - Classes CSS adicionais no cartão
+ * @property {function} onClose - Chamado com o motivo: 'finish' | 'skip' | 'escape'
+ * @property {function} onStepChange - Chamado com o novo passo (a partir de 0)
+ * @quandoUsar Apresentar uma tela nova ou uma funcionalidade em poucos passos curtos (até uns 8), na primeira visita ou a pedido ("Fazer o tour guiado").
+ * @quandoNaoUsar Para uma dica sobre UM elemento, use `Tooltip` ou `Popover`. Para uma informação que não pode ser perdida, use texto na própria tela: tour se fecha e se esquece. Para um fluxo em etapas que a pessoa preenche, use `Stepper`.
+ */
+export interface CoachmarkProps {
+    open?: boolean;
+    steps?: CoachmarkStep[];
+    step?: number;
+    defaultStep?: number;
+    padding?: number;
+    nextLabel?: string;
+    previousLabel?: string;
+    finishLabel?: string;
+    skipLabel?: string;
+    counterLabel?: string;
+    hideSkip?: boolean;
+    className?: string;
+    onClose?: (reason: "finish" | "skip" | "escape") => void;
+    onStepChange?: (step: number) => void;
+}
+declare function Coachmark(props: CoachmarkProps): import("react/jsx-runtime").JSX.Element;
+export default Coachmark;

package/dist/components/Coachmark/Coachmark.js

@@ -0,0 +1,321 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './Coachmark.css';
+import { useState, useRef, useEffect } from "react";
+import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
+import Button from "../Button/Button";
+import Portal from "../Portal/Portal";
+import Text from "../Text/Text";
+import { gerarId } from "../../utils/id";
+function Coachmark(props) {
+    const cardRef = useRef(null);
+    const cleanupRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const attachedRef = useRef(null);
+    const [internalStep, setInternalStep] = useState(() => props.defaultStep || 0);
+    const [uid, setUid] = useState(() => "");
+    const [active, setActive] = useState(() => false);
+    const [hasTarget, setHasTarget] = useState(() => false);
+    const [positioned, setPositioned] = useState(() => false);
+    const [rectTop, setRectTop] = useState(() => 0);
+    const [rectLeft, setRectLeft] = useState(() => 0);
+    const [rectWidth, setRectWidth] = useState(() => 0);
+    const [rectHeight, setRectHeight] = useState(() => 0);
+    const [posX, setPosX] = useState(() => 0);
+    const [posY, setPosY] = useState(() => 0);
+    const [tentativas, setTentativas] = useState(() => 0);
+    function stepList() {
+        return props.steps || [];
+    }
+    function stepCount() {
+        return stepList().length;
+    }
+    function index() {
+        const bruto = props.step !== undefined ? props.step : internalStep;
+        const max = stepCount() > 0 ? stepCount() - 1 : 0;
+        return Math.max(0, Math.min(bruto, max));
+    }
+    function currentStep() {
+        return (stepList()[index()] || {
+            title: "",
+        });
+    }
+    function isFirst() {
+        return index() === 0;
+    }
+    function isLast() {
+        return index() === stepCount() - 1;
+    }
+    function baseId() {
+        return uid || "umds-coachmark";
+    }
+    function titleId() {
+        return baseId() + "-title";
+    }
+    function contentId() {
+        return baseId() + "-content";
+    }
+    function counterText() {
+        const modelo = props.counterLabel || "{current} de {total}";
+        return modelo
+            .replace("{current}", String(index() + 1))
+            .replace("{total}", String(stepCount()));
+    }
+    function announceText() {
+        return counterText() + ": " + currentStep().title;
+    }
+    function nextText() {
+        if (isLast())
+            return props.finishLabel || "Concluir";
+        return props.nextLabel || "Próximo";
+    }
+    function previousText() {
+        return props.previousLabel || "Anterior";
+    }
+    function skipText() {
+        return props.skipLabel || "Sair do tour";
+    }
+    function showSkip() {
+        return !props.hideSkip;
+    }
+    function show() {
+        return !!props.open && stepCount() > 0;
+    }
+    function rootClasses() {
+        return [
+            "umds-coachmark",
+            hasTarget ? "" : "umds-coachmark--no-target",
+            positioned ? "umds-coachmark--ready" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function cardClasses() {
+        return [
+            "umds-coachmark__card",
+            hasTarget ? "" : "umds-coachmark__card--centered",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function cutoutStyle() {
+        const folga = props.padding !== undefined ? props.padding : 8;
+        return {
+            top: rectTop - folga + "px",
+            left: rectLeft - folga + "px",
+            width: rectWidth + folga * 2 + "px",
+            height: rectHeight + folga * 2 + "px",
+        };
+    }
+    function cardStyle() {
+        if (!hasTarget)
+            return undefined;
+        // Opacidade, e não `visibility`: o cartão precisa poder receber o foco antes de ser posicionado.
+        return {
+            transform: "translate(" + posX + "px, " + posY + "px)",
+            opacity: positioned ? 1 : 0,
+        };
+    }
+    function resolverAlvo(alvo) {
+        if (!alvo || typeof document === "undefined")
+            return null;
+        if (typeof alvo === "string") {
+            try {
+                return document.querySelector(alvo);
+            }
+            catch (erro) {
+                return null;
+            }
+        }
+        if (typeof alvo === "function")
+            return resolverAlvo(alvo());
+        if (alvo.nodeType === 1)
+            return alvo;
+        if (alvo.current !== undefined)
+            return resolverAlvo(alvo.current);
+        if (alvo.value !== undefined)
+            return resolverAlvo(alvo.value);
+        if (alvo.$el)
+            return alvo.$el.nodeType === 1 ? alvo.$el : null;
+        return null;
+    }
+    function atualizar(alvo) {
+        if (!alvo || !cardRef.current)
+            return;
+        const caixa = alvo.getBoundingClientRect();
+        setRectTop(caixa.top);
+        setRectLeft(caixa.left);
+        setRectWidth(caixa.width);
+        setRectHeight(caixa.height);
+        const lado = (currentStep().placement || "bottom");
+        computePosition(alvo, cardRef.current, {
+            placement: lado,
+            strategy: "fixed",
+            middleware: [
+                offset(16),
+                flip(),
+                shift({
+                    padding: 16,
+                }),
+            ],
+        }).then((posicao) => {
+            const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+            setPosX(Math.round(posicao.x * dpr) / dpr);
+            setPosY(Math.round(posicao.y * dpr) / dpr);
+            setPositioned(true);
+        });
+    }
+    function ligar() {
+        desligar();
+        const alvo = resolverAlvo(currentStep().target);
+        attachedRef.current = index();
+        if (!alvo) {
+            setHasTarget(false);
+            setPositioned(true);
+            return;
+        }
+        setHasTarget(true);
+        if (alvo.scrollIntoView) {
+            const caixa = alvo.getBoundingClientRect();
+            const altura = typeof window !== "undefined" ? window.innerHeight : 0;
+            if (caixa.top < 0 || caixa.bottom > altura) {
+                alvo.scrollIntoView({
+                    block: "center",
+                    inline: "nearest",
+                });
+            }
+        }
+        if (cardRef.current) {
+            cleanupRef.current = autoUpdate(alvo, cardRef.current, () => atualizar(alvo));
+        }
+    }
+    function desligar() {
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+    }
+    function sincronizar() {
+        if (typeof document === "undefined")
+            return;
+        if (show() && !active && !cardRef.current) {
+            if (tentativas < 30) {
+                requestAnimationFrame(() => {
+                    setTentativas(tentativas + 1);
+                });
+            }
+            return;
+        }
+        if (show() && !active) {
+            setActive(true);
+            setTentativas(0);
+            previousFocusRef.current = document.activeElement;
+            ligar();
+            if (cardRef.current)
+                cardRef.current.focus({
+                    preventScroll: true,
+                });
+        }
+        else if (show() && active && attachedRef.current !== index()) {
+            ligar();
+        }
+        else if (!show() && active) {
+            setActive(false);
+            desligar();
+            attachedRef.current = null;
+            setHasTarget(false);
+            setPositioned(false);
+            if (props.step === undefined)
+                setInternalStep(props.defaultStep || 0);
+            if (previousFocusRef.current && previousFocusRef.current.focus) {
+                previousFocusRef.current.focus();
+                previousFocusRef.current = null;
+            }
+        }
+    }
+    function irPara(proximo) {
+        if (proximo < 0 || proximo > stepCount() - 1)
+            return;
+        setInternalStep(proximo);
+        if (props.onStepChange)
+            props.onStepChange(proximo);
+    }
+    function fechar(motivo) {
+        if (props.onClose)
+            props.onClose(motivo);
+    }
+    function handleNext() {
+        if (isLast())
+            fechar("finish");
+        else
+            irPara(index() + 1);
+    }
+    function handlePrevious() {
+        irPara(index() - 1);
+    }
+    function handleKeyDown(event) {
+        if (!event)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            fechar("escape");
+            return;
+        }
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            handleNext();
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            handlePrevious();
+            return;
+        }
+        if (event.key !== "Tab" || !cardRef.current)
+            return;
+        // Foco preso: Tab e Shift+Tab giram dentro do cartão.
+        const focaveis = cardRef.current.querySelectorAll("button:not([disabled])");
+        if (focaveis.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const primeiro = focaveis[0];
+        const ultimo = focaveis[focaveis.length - 1];
+        const ativo = document.activeElement;
+        if (event.shiftKey) {
+            if (ativo === primeiro || ativo === cardRef.current) {
+                event.preventDefault();
+                ultimo.focus();
+            }
+        }
+        else if (ativo === ultimo) {
+            event.preventDefault();
+            primeiro.focus();
+        }
+    }
+    function handleVeilMouseDown(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        if (cardRef.current)
+            cardRef.current.focus({
+                preventScroll: true,
+            });
+    }
+    useEffect(() => {
+        setUid(gerarId("umds-coachmark"));
+        sincronizar();
+    }, []);
+    useEffect(() => {
+        sincronizar();
+    });
+    useEffect(() => {
+        return () => {
+            desligar();
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: show() ? (_jsx(_Fragment, { children: _jsx(Portal, { children: _jsxs("div", { className: rootClasses(), children: [_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__veil", onMouseDown: (event) => handleVeilMouseDown(event) }), hasTarget ? (_jsx("div", { "aria-hidden": "true", className: "umds-coachmark__cutout", style: cutoutStyle() })) : null, _jsxs("div", { role: "dialog", "aria-modal": "true", ref: cardRef, style: cardStyle(), "aria-labelledby": titleId(), "aria-describedby": contentId(), tabIndex: -1, onKeyDown: (event) => handleKeyDown(event), className: cardClasses(), children: [_jsx("span", { "aria-live": "polite", className: "umds-coachmark__sr", children: announceText() }), _jsx(Text, { as: "span", variant: "body2", weight: "bold", color: "primary", "aria-hidden": "true", children: counterText() }), _jsx(Text, { as: "h2", variant: "subtitle1", weight: "bold", id: titleId(), children: currentStep().title }), currentStep().content ? (_jsx(Text, { as: "p", variant: "body2", color: "secondary", id: contentId(), children: currentStep().content })) : null, _jsxs("div", { className: "umds-coachmark__footer", children: [showSkip() ? (_jsx(Button, { variant: "text", size: "sm", onClick: (event) => fechar("skip"), children: skipText() })) : null, _jsxs("span", { className: "umds-coachmark__actions", children: [!isFirst() ? (_jsx(Button, { variant: "secondary", size: "md", onClick: (event) => handlePrevious(), children: previousText() })) : null, _jsx(Button, { variant: "primary", size: "md", onClick: (event) => handleNext(), children: nextText() })] })] })] })] }) }) })) : null }));
+}
+export default Coachmark;

package/dist/components/CodeBlock/CodeBlock.css

@@ -0,0 +1,96 @@
+/* ─────────────────────────────────────────────
+   CODE BLOCK
+   Texto em fonte monoespaçada, com borda, rolagem e botão de copiar.
+
+   Fundo claro e texto escuro (contraste de texto, nos temas claro e escuro: os
+   dois vêm dos semânticos). Sem cor de sintaxe.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-code-block {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--umds-semantic-color-background-light);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  overflow: hidden;
+}
+
+.umds-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-code-block__language {
+  font-family: var(--umds-semantic-font-family-mono);
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-code-block__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  margin: 0 0 0 auto;
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: transparent;
+  font: inherit;
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  cursor: pointer;
+}
+
+.umds-code-block__copy:hover {
+  background: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-code-block__copy:focus-visible,
+.umds-code-block__scroll:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-code-block__scroll {
+  margin: 0;
+  padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* 12px 16px */
+  overflow: auto;
+  font-family: var(--umds-semantic-font-family-mono);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  line-height: var(--umds-primitive-font-line-height-lg);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  white-space: pre;
+  tab-size: 2;
+}
+
+.umds-code-block--wrap .umds-code-block__scroll {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.umds-code-block__code {
+  font-family: inherit;
+}
+
+.umds-code-block__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,47 @@
+import './CodeBlock.css';
+/**
+ * CodeBlock — trecho de código (ou JSON, ou um log) em fonte monoespaçada, com
+ * borda, rolagem e botão de copiar.
+ *
+ * O texto vem por `code` ou como conteúdo (`<CodeBlock>{...}</CodeBlock>`); o
+ * espaço e as quebras de linha são mantidos. Linha longa rola na horizontal
+ * (ou quebra, com `wrap`), e `maxHeight` limita a altura e rola na vertical. A
+ * área de rolagem é focável (Tab) e tem nome (`ariaLabel`), para quem usa o
+ * teclado poder rolar.
+ *
+ * `copyable` põe o botão de copiar no canto: copia o texto inteiro (não o que
+ * está à vista), troca o ícone por "Copiado" por dois segundos e anuncia isso ao
+ * leitor de tela. `onCopy` recebe o texto. Os textos são props.
+ *
+ * É só texto: não colore sintaxe (isso pede uma biblioteca, e o bloco do 1Doc
+ * mostra JSON e logs, que ficam bem em uma cor só).
+ * @property {string} code - O texto (ou passe como conteúdo)
+ * @property {string} language - Nome da linguagem, mostrado no topo (ex.: "JSON"). É só rótulo
+ * @property {boolean} wrap - Quebra a linha longa em vez de rolar
+ * @property {number} maxHeight - Altura máxima, em px (rola dentro dela)
+ * @property {boolean} copyable - Mostra o botão de copiar
+ * @property {string} copyLabel - Nome do botão de copiar (padrão "Copiar")
+ * @property {string} copiedLabel - Nome do botão e anúncio depois de copiar (padrão "Copiado")
+ * @property {string} ariaLabel - Nome da área de rolagem (padrão: a linguagem, ou "Código")
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} onCopy - Chamado com o texto depois de copiar
+ * @quandoUsar Mostrar JSON de uma resposta, um comando, um log, um exemplo de uso: texto que se lê em fonte monoespaçada e se copia.
+ * @quandoNaoUsar Para uma tecla ou atalho, use `Kbd`. Para código dentro de uma frase, use `<code>` direto. Para editar código, use um editor especializado: este bloco só mostra.
+ */
+export interface CodeBlockProps {
+    code?: string;
+    language?: string;
+    wrap?: boolean;
+    maxHeight?: number;
+    copyable?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    ariaLabel?: string;
+    className?: string;
+    id?: string;
+    onCopy?: (code: string) => void;
+    /** O texto, quando não vem por `code`. */
+    children?: any;
+}
+declare function CodeBlock(props: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export default CodeBlock;