@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/TimePicker/TimePicker.d.ts

@@ -44,6 +44,12 @@ export interface TimePickerProps {
     minuteLabel?: string;
     /** Rótulo acessível do campo de segundo. @default 'Segundo' */
     secondLabel?: string;
+    /** Unidade visível ao lado da coluna de hora. Troque para traduzir. @default 'h' */
+    hourUnitLabel?: string;
+    /** Unidade visível ao lado da coluna de minuto. Troque para traduzir. @default 'min' */
+    minuteUnitLabel?: string;
+    /** Unidade visível ao lado da coluna de segundo. Troque para traduzir. @default 'seg' */
+    secondUnitLabel?: string;
     value?: string;
     defaultValue?: string;
     /** Nome do campo no submit do form — emite um input hidden com o valor atual. */

package/dist/components/TimePicker/TimePicker.js

@@ -300,6 +300,6 @@ function TimePicker(props) {
             stopAutoUpdate();
         };
     }, []);
-    return (_jsxs("div", { ref: rootRef, className: wrapperClasses(), children: [props.label ? (_jsx("label", { className: "umds-timepicker__label", id: labelId(), children: props.label })) : null, _jsxs("div", { role: "combobox", "aria-haspopup": "dialog", className: "umds-timepicker__input", ref: triggerRef, onClick: (event) => toggleOpen(), onKeyDown: (event) => handleInputKeydown(event), tabIndex: inputTabIndex(), "aria-readonly": props.readOnly ? "true" : undefined, "aria-expanded": open, "aria-labelledby": triggerLabelledby(), "aria-label": triggerAriaLabel(), "aria-controls": triggerControls(), children: [_jsx("span", { className: valueClasses(), children: displayValue() || placeholderText() }), _jsx("span", { "aria-hidden": "true", className: "umds-timepicker__icon", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faClock }) })] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: currentValue() || "" })) : null, ehInvalido() && props.errorMessage ? (_jsx("span", { role: "alert", className: "umds-timepicker__error-msg", children: props.errorMessage })) : null, _jsx(Portal, { children: open ? (_jsx("span", { className: "umds-timepicker__floating", ref: floatingRef, style: floatingStyle(), children: _jsxs("div", { role: "dialog", className: "umds-timepicker__dropdown", id: dropdownId(), "aria-label": props.ariaLabel || "Selecionar hora", onKeyDown: (event) => handleDialogKeydown(event), children: [_jsxs("div", { className: "umds-timepicker__columns", children: [_jsxs("div", { role: "spinbutton", className: "umds-timepicker__col", tabIndex: 0, "aria-label": props.hourLabel || "Hora", "aria-valuemin": 0, "aria-valuemax": 23, "aria-valuenow": parsedH(), "aria-valuetext": hourDigit(), onKeyDown: (event) => handleHourKeydown(event), children: [_jsx("span", { className: "umds-timepicker__unit-label", children: "h" }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => incrementH(), tabIndex: -1, "aria-label": props.increaseHourLabel || "Aumentar hora", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronUp }) }), _jsx("div", { className: "umds-timepicker__digit", children: hourDigit() }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => decrementH(), tabIndex: -1, "aria-label": props.decreaseHourLabel || "Diminuir hora", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronDown }) })] }), _jsx("span", { "aria-hidden": "true", className: "umds-timepicker__sep", children: ":" }), _jsxs("div", { role: "spinbutton", className: "umds-timepicker__col", tabIndex: 0, "aria-label": props.minuteLabel || "Minuto", "aria-valuemin": 0, "aria-valuemax": 59, "aria-valuenow": parsedM(), "aria-valuetext": minuteDigit(), onKeyDown: (event) => handleMinuteKeydown(event), children: [_jsx("span", { className: "umds-timepicker__unit-label", children: "min" }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => incrementM(), tabIndex: -1, "aria-label": props.increaseMinuteLabel || "Aumentar minuto", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronUp }) }), _jsx("div", { className: "umds-timepicker__digit", children: minuteDigit() }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => decrementM(), tabIndex: -1, "aria-label": props.decreaseMinuteLabel || "Diminuir minuto", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronDown }) })] }), showSeconds() ? (_jsx("span", { "aria-hidden": "true", className: "umds-timepicker__sep", children: ":" })) : null, showSeconds() ? (_jsxs("div", { role: "spinbutton", className: "umds-timepicker__col", tabIndex: 0, "aria-label": props.secondLabel || "Segundo", "aria-valuemin": 0, "aria-valuemax": 59, "aria-valuenow": parsedS(), "aria-valuetext": secondDigit(), onKeyDown: (event) => handleSecondKeydown(event), children: [_jsx("span", { className: "umds-timepicker__unit-label", children: "seg" }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => incrementS(), tabIndex: -1, "aria-label": props.increaseSecondLabel || "Aumentar segundo", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronUp }) }), _jsx("div", { className: "umds-timepicker__digit", children: secondDigit() }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => decrementS(), tabIndex: -1, "aria-label": props.decreaseSecondLabel || "Diminuir segundo", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronDown }) })] })) : null] }), _jsxs("div", { className: "umds-timepicker__footer", children: [_jsx("button", { type: "button", className: "umds-timepicker__now-btn", onClick: (event) => setNow(), children: nowText() }), _jsx("button", { type: "button", className: "umds-timepicker__ok-btn", onClick: (event) => closeAndFocus(), children: okText() })] })] }) })) : null })] }));
+    return (_jsxs("div", { ref: rootRef, className: wrapperClasses(), children: [props.label ? (_jsx("label", { className: "umds-timepicker__label", id: labelId(), children: props.label })) : null, _jsxs("div", { role: "combobox", "aria-haspopup": "dialog", className: "umds-timepicker__input", ref: triggerRef, onClick: (event) => toggleOpen(), onKeyDown: (event) => handleInputKeydown(event), tabIndex: inputTabIndex(), "aria-readonly": props.readOnly ? "true" : undefined, "aria-expanded": open, "aria-labelledby": triggerLabelledby(), "aria-label": triggerAriaLabel(), "aria-controls": triggerControls(), children: [_jsx("span", { className: valueClasses(), children: displayValue() || placeholderText() }), _jsx("span", { "aria-hidden": "true", className: "umds-timepicker__icon", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faClock }) })] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: currentValue() || "" })) : null, ehInvalido() && props.errorMessage ? (_jsx("span", { role: "alert", className: "umds-timepicker__error-msg", children: props.errorMessage })) : null, _jsx(Portal, { children: open ? (_jsx("span", { className: "umds-timepicker__floating", ref: floatingRef, style: floatingStyle(), children: _jsxs("div", { role: "dialog", className: "umds-timepicker__dropdown", id: dropdownId(), "aria-label": props.ariaLabel || "Selecionar hora", onKeyDown: (event) => handleDialogKeydown(event), children: [_jsxs("div", { className: "umds-timepicker__columns", children: [_jsxs("div", { role: "spinbutton", className: "umds-timepicker__col", tabIndex: 0, "aria-label": props.hourLabel || "Hora", "aria-valuemin": 0, "aria-valuemax": 23, "aria-valuenow": parsedH(), "aria-valuetext": hourDigit(), onKeyDown: (event) => handleHourKeydown(event), children: [_jsx("span", { className: "umds-timepicker__unit-label", children: props.hourUnitLabel || "h" }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => incrementH(), tabIndex: -1, "aria-label": props.increaseHourLabel || "Aumentar hora", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronUp }) }), _jsx("div", { className: "umds-timepicker__digit", children: hourDigit() }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => decrementH(), tabIndex: -1, "aria-label": props.decreaseHourLabel || "Diminuir hora", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronDown }) })] }), _jsx("span", { "aria-hidden": "true", className: "umds-timepicker__sep", children: ":" }), _jsxs("div", { role: "spinbutton", className: "umds-timepicker__col", tabIndex: 0, "aria-label": props.minuteLabel || "Minuto", "aria-valuemin": 0, "aria-valuemax": 59, "aria-valuenow": parsedM(), "aria-valuetext": minuteDigit(), onKeyDown: (event) => handleMinuteKeydown(event), children: [_jsx("span", { className: "umds-timepicker__unit-label", children: props.minuteUnitLabel || "min" }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => incrementM(), tabIndex: -1, "aria-label": props.increaseMinuteLabel || "Aumentar minuto", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronUp }) }), _jsx("div", { className: "umds-timepicker__digit", children: minuteDigit() }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => decrementM(), tabIndex: -1, "aria-label": props.decreaseMinuteLabel || "Diminuir minuto", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronDown }) })] }), showSeconds() ? (_jsx("span", { "aria-hidden": "true", className: "umds-timepicker__sep", children: ":" })) : null, showSeconds() ? (_jsxs("div", { role: "spinbutton", className: "umds-timepicker__col", tabIndex: 0, "aria-label": props.secondLabel || "Segundo", "aria-valuemin": 0, "aria-valuemax": 59, "aria-valuenow": parsedS(), "aria-valuetext": secondDigit(), onKeyDown: (event) => handleSecondKeydown(event), children: [_jsx("span", { className: "umds-timepicker__unit-label", children: props.secondUnitLabel || "seg" }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => incrementS(), tabIndex: -1, "aria-label": props.increaseSecondLabel || "Aumentar segundo", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronUp }) }), _jsx("div", { className: "umds-timepicker__digit", children: secondDigit() }), _jsx("button", { type: "button", className: "umds-timepicker__step-btn", onClick: (event) => decrementS(), tabIndex: -1, "aria-label": props.decreaseSecondLabel || "Diminuir segundo", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faChevronDown }) })] })) : null] }), _jsxs("div", { className: "umds-timepicker__footer", children: [_jsx("button", { type: "button", className: "umds-timepicker__now-btn", onClick: (event) => setNow(), children: nowText() }), _jsx("button", { type: "button", className: "umds-timepicker__ok-btn", onClick: (event) => closeAndFocus(), children: okText() })] })] }) })) : null })] }));
 }
 export default TimePicker;

package/dist/components/Tooltip/Tooltip.css

@@ -12,6 +12,21 @@
   height: fit-content;
 }
 
+/* Cópia do texto que o aria-describedby do filho referencia: fora da tela,
+   fora do fluxo. Receita visually-hidden; os 1px não são medida de design. */
+.umds-tooltip__descricao {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* Wrapper flutuante (Portal no body; transform/visibility via style inline) */
 .umds-tooltip__floating {
   position: fixed;
@@ -138,6 +153,31 @@
   bottom: 12px;
 }
 
+/* ── variant="dark": balão compacto escuro ──
+   background-dark é a superfície invertida do tema (azul-marinho no claro, claro
+   no escuro, branco no alto contraste) e neutral-light-pure o texto sobre ela.
+   Fonte de 12px (a escala do DS não tem o 11px do CrisDoc). */
+.umds-tooltip__floating--dark {
+  max-width: 220px; /* quebra do CrisDoc; maxWidth sobrescreve */
+}
+
+.umds-tooltip__bubble--dark {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano);
+  border-radius: var(--umds-primitive-border-radius-xs); /* 4px */
+  background-color: var(--umds-semantic-color-background-dark);
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-tooltip__bubble--dark .umds-tooltip__title,
+.umds-tooltip__bubble--dark .umds-tooltip__content {
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-tooltip__bubble--dark .umds-tooltip__arrow {
+  background-color: var(--umds-semantic-color-background-dark);
+  border-color: var(--umds-semantic-color-background-dark);
+}
+
 /* ── Alto contraste ──
    O balão usa neutral-light-pure, que neste tema é preto como a página, e a
    sombra não aparece: sem traço o balão some. Outline para dentro (não

package/dist/components/Tooltip/Tooltip.d.ts

@@ -13,6 +13,17 @@ export interface TooltipProps {
     side?: "top" | "bottom" | "left" | "right";
     /** Alinhamento no eixo cruzado: "center" usa só o `side`; "start"/"end" viram placements compostos (`top-start`, `right-end`…). */
     align?: "start" | "center" | "end";
+    /**
+     * Aparência do balão. `dark` é o compacto escuro (fundo `background-dark`,
+     * texto `neutral-light-pure`, padding 4/8, raio 4, no máximo 220px de
+     * largura): o balão de ícone, sigla e botão de barra de ferramentas. Os dois
+     * tokens são o par invertido do tema, então o contraste vale nos claros,
+     * escuro e alto contraste.
+     * @default 'default'
+     */
+    variant?: "default" | "dark";
+    /** Largura máxima do balão, qualquer valor CSS (`"220px"`, `"20rem"`). Vence o teto de cada variante (280px no padrão, 220px no dark). */
+    maxWidth?: string;
     sideOffset?: number;
     delayDuration?: number;
     disabled?: boolean;

package/dist/components/Tooltip/Tooltip.js

@@ -5,6 +5,7 @@ import { useState, useRef, useEffect } from "react";
 import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
 import Icon from "../Icon/Icon";
 import Portal from "../Portal/Portal";
+import { gerarId } from "../../utils/id";
 function Tooltip(props) {
     const triggerRef = useRef(null);
     const floatingRef = useRef(null);
@@ -15,6 +16,11 @@ function Tooltip(props) {
     const openTimerRef = useRef(null);
     const closeTimerRef = useRef(null);
     const wantOpenRef = useRef(false);
+    const descIdRef = useRef("");
+    const alvoDescritoRef = useRef(null);
+    const wrapperNodeRef = useRef(null);
+    const focusInWatcherRef = useRef(null);
+    const focusOutWatcherRef = useRef(null);
     const [mounted, setMounted] = useState(() => false);
     const [positioned, setPositioned] = useState(() => false);
     const [open, setOpen] = useState(() => false);
@@ -22,7 +28,55 @@ function Tooltip(props) {
     const [posY, setPosY] = useState(() => 0);
     const [finalSide, setFinalSide] = useState(() => "top");
     const [finalAlign, setFinalAlign] = useState(() => "center");
-    const [bubbleId, setBubbleId] = useState(() => "umds-tooltip-" + Math.random().toString(36).slice(2, 9));
+    const [bubbleId, setBubbleId] = useState(() => "");
+    const [descId, setDescId] = useState(() => "");
+    function bubbleIdText() {
+        return bubbleId || undefined;
+    }
+    function descIdText() {
+        return descId || undefined;
+    }
+    function tituloDescrito() {
+        return props.title ? props.title + " " : "";
+    }
+    function alvoDaDescricao() {
+        const wrapper = wrapperNodeRef.current;
+        if (!wrapper)
+            return null;
+        const focavel = wrapper.querySelector("a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]");
+        return focavel || wrapper;
+    }
+    function desligarDescricao(alvo) {
+        if (!alvo || !descIdRef.current)
+            return;
+        const restantes = (alvo.getAttribute("aria-describedby") || "")
+            .split(" ")
+            .filter((token) => token && token !== descIdRef.current);
+        if (restantes.length > 0) {
+            alvo.setAttribute("aria-describedby", restantes.join(" "));
+        }
+        else {
+            alvo.removeAttribute("aria-describedby");
+        }
+    }
+    function ligarDescricao() {
+        if (!descIdRef.current)
+            return;
+        const alvo = props.disabled ? null : alvoDaDescricao();
+        const anterior = alvoDescritoRef.current;
+        if (anterior && anterior !== alvo)
+            desligarDescricao(anterior);
+        alvoDescritoRef.current = alvo;
+        if (!alvo)
+            return;
+        const tokens = (alvo.getAttribute("aria-describedby") || "")
+            .split(" ")
+            .filter(Boolean);
+        if (tokens.indexOf(descIdRef.current) === -1) {
+            tokens.push(descIdRef.current);
+            alvo.setAttribute("aria-describedby", tokens.join(" "));
+        }
+    }
     function updatePosition() {
         if (!triggerRef.current || !floatingRef.current)
             return;
@@ -97,23 +151,26 @@ function Tooltip(props) {
         }
     }
     function startKeydownWatch() {
-        if (typeof document === "undefined")
+        if (typeof window === "undefined")
             return;
         if (keydownWatcherRef.current)
             return;
         const watcher = (event) => {
-            if (event.key === "Escape") {
-                closeNow();
-            }
+            if (event.key !== "Escape")
+                return;
+            if (!wantOpenRef.current)
+                return;
+            event.stopPropagation();
+            closeNow();
         };
         keydownWatcherRef.current = watcher;
-        document.addEventListener("keydown", watcher, true);
+        window.addEventListener("keydown", watcher, true);
     }
     function stopKeydownWatch() {
-        if (typeof document === "undefined")
+        if (typeof window === "undefined")
             return;
         if (keydownWatcherRef.current) {
-            document.removeEventListener("keydown", keydownWatcherRef.current, true);
+            window.removeEventListener("keydown", keydownWatcherRef.current, true);
             keydownWatcherRef.current = null;
         }
     }
@@ -184,13 +241,28 @@ function Tooltip(props) {
         closeNow();
     }
     function floatingStyle() {
-        return {
+        const estilo = {
             transform: "translate(" + posX + "px, " + posY + "px)",
             visibility: positioned ? "visible" : "hidden",
         };
+        if (props.maxWidth)
+            estilo.maxWidth = props.maxWidth;
+        return estilo;
+    }
+    function floatingClasses() {
+        return [
+            "umds-tooltip__floating",
+            props.variant === "dark" ? "umds-tooltip__floating--dark" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
     }
     function bubbleClasses() {
-        return ["umds-tooltip__bubble", open ? "umds-tooltip__bubble--open" : ""]
+        return [
+            "umds-tooltip__bubble",
+            props.variant === "dark" ? "umds-tooltip__bubble--dark" : "",
+            open ? "umds-tooltip__bubble--open" : "",
+        ]
             .filter(Boolean)
             .join(" ");
     }
@@ -201,8 +273,39 @@ function Tooltip(props) {
             "umds-tooltip__arrow--align-" + finalAlign,
         ].join(" ");
     }
+    useEffect(() => {
+        if (!triggerRef.current)
+            return;
+        // Copia "pura" do no: o React zera a ref de elemento antes do cleanup.
+        wrapperNodeRef.current = triggerRef.current;
+        const base = gerarId("umds-tooltip");
+        descIdRef.current = base + "-desc";
+        setBubbleId(base);
+        setDescId(base + "-desc");
+        const aoFocar = () => handleOpen();
+        const aoDesfocar = (event) => handleClose(event);
+        focusInWatcherRef.current = aoFocar;
+        focusOutWatcherRef.current = aoDesfocar;
+        triggerRef.current.addEventListener("focusin", aoFocar);
+        triggerRef.current.addEventListener("focusout", aoDesfocar);
+        ligarDescricao();
+    }, []);
+    useEffect(() => {
+        ligarDescricao();
+    });
     useEffect(() => {
         return () => {
+            const wrapper = wrapperNodeRef.current;
+            if (wrapper && focusInWatcherRef.current) {
+                wrapper.removeEventListener("focusin", focusInWatcherRef.current);
+            }
+            if (wrapper && focusOutWatcherRef.current) {
+                wrapper.removeEventListener("focusout", focusOutWatcherRef.current);
+            }
+            focusInWatcherRef.current = null;
+            focusOutWatcherRef.current = null;
+            desligarDescricao(alvoDescritoRef.current);
+            alvoDescritoRef.current = null;
             if (openTimerRef.current)
                 clearTimeout(openTimerRef.current);
             if (closeTimerRef.current)
@@ -212,6 +315,6 @@ function Tooltip(props) {
             stopKeydownWatch();
         };
     }, []);
-    return (_jsxs("span", { ref: triggerRef, className: ["umds-tooltip", props.className].filter(Boolean).join(" "), "aria-describedby": open ? bubbleId : undefined, onMouseEnter: (event) => handleOpen(), onMouseLeave: (event) => handleClose(event), onFocus: (event) => handleOpen(), onBlur: (event) => handleClose(event), children: [_jsx(_Fragment, { children: props.children }), _jsx(Portal, { children: mounted ? (_jsx("span", { className: "umds-tooltip__floating", ref: floatingRef, style: floatingStyle(), children: _jsxs("span", { role: "tooltip", className: bubbleClasses(), id: bubbleId, "aria-hidden": !open, children: [_jsxs("span", { className: "umds-tooltip__row", children: [props.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.icon })) : null, _jsxs("span", { className: "umds-tooltip__text", children: [props.title ? (_jsx("span", { className: "umds-tooltip__title", children: props.title })) : null, props.content ? (_jsx("span", { className: "umds-tooltip__content", children: _jsx(_Fragment, { children: props.content }) })) : null] })] }), _jsx("span", { ref: arrowRef, className: arrowClasses() })] }) })) : null })] }));
+    return (_jsxs("span", { ref: triggerRef, className: ["umds-tooltip", props.className].filter(Boolean).join(" "), onMouseEnter: (event) => handleOpen(), onMouseLeave: (event) => handleClose(event), children: [_jsx(_Fragment, { children: props.children }), _jsxs("span", { className: "umds-tooltip__descricao", "aria-hidden": "true", id: descIdText(), children: [props.title ? _jsx(_Fragment, { children: tituloDescrito() }) : null, props.content ? _jsx(_Fragment, { children: props.content }) : null] }), _jsx(Portal, { children: mounted ? (_jsx("span", { ref: floatingRef, className: floatingClasses(), style: floatingStyle(), children: _jsxs("span", { role: "tooltip", className: bubbleClasses(), id: bubbleIdText(), "aria-hidden": !open, children: [_jsxs("span", { className: "umds-tooltip__row", children: [props.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: props.icon })) : null, _jsxs("span", { className: "umds-tooltip__text", children: [props.title ? (_jsx("span", { className: "umds-tooltip__title", children: props.title })) : null, props.content ? (_jsx("span", { className: "umds-tooltip__content", children: _jsx(_Fragment, { children: props.content }) })) : null] })] }), _jsx("span", { ref: arrowRef, className: arrowClasses() })] }) })) : null })] }));
 }
 export default Tooltip;

package/dist/index.d.ts

@@ -1,10 +1,14 @@
 export * from "./utils/theme";
 export * from "./utils/toast";
 export * from "./utils/density";
+export * from "./utils/paleta-de-cores";
 export { library } from "@fortawesome/fontawesome-svg-core";
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as AILabel } from "./components/AILabel/AILabel";
 export { default as AIContent } from "./components/AIContent/AIContent";
+export { default as Calendar } from "./components/Calendar/Calendar";
+export { default as Coachmark } from "./components/Coachmark/Coachmark";
+export { default as CodeBlock } from "./components/CodeBlock/CodeBlock";
 export { default as ConfirmAIAction } from "./components/ConfirmAIAction/ConfirmAIAction";
 export { default as Alert } from "./components/Alert/Alert";
 export { default as AppHeader } from "./components/AppHeader/AppHeader";
@@ -26,11 +30,13 @@ export { default as Button } from "./components/Button/Button";
 export { default as Card } from "./components/Card/Card";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as Chips } from "./components/Chips/Chips";
+export { default as ColorPicker } from "./components/ColorPicker/ColorPicker";
 export { default as Combobox } from "./components/Combobox/Combobox";
 export { default as ConfirmDialog } from "./components/ConfirmDialog/ConfirmDialog";
 export { default as Container } from "./components/Container/Container";
 export { default as DataTable } from "./components/DataTable/DataTable";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as DescriptionList } from "./components/DescriptionList/DescriptionList";
 export { default as Divider } from "./components/Divider/Divider";
 export { default as DonutChart } from "./components/Chart/DonutChart";
 export { default as Drawer } from "./components/Drawer/Drawer";
@@ -39,15 +45,21 @@ export { default as EmptyState } from "./components/EmptyState/EmptyState";
 export { default as FileInput } from "./components/FileInput/FileInput";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as Icon } from "./components/Icon/Icon";
+export { default as IconPicker } from "./components/IconPicker/IconPicker";
 export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";
+export { default as List } from "./components/List/List";
+export { default as ListItem } from "./components/List/ListItem";
 export { default as Logo } from "./components/Logo/Logo";
 export { default as Modal } from "./components/Modal/Modal";
 export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
+export { default as OrgChart } from "./components/OrgChart/OrgChart";
+export { default as OtpInput } from "./components/OtpInput/OtpInput";
 export { default as PageHeader } from "./components/PageHeader/PageHeader";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as PhoneInput } from "./components/PhoneInput/PhoneInput";
@@ -55,6 +67,7 @@ export { default as Podium } from "./components/Podium/Podium";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/Radio/RadioGroup";
+export { default as RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
 export { default as SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
 export { default as Select } from "./components/Select/Select";
 export { default as SidePanel } from "./components/SidePanel/SidePanel";
@@ -85,6 +98,9 @@ export { default as Tree } from "./components/Tree/Tree";
 export type * from "./components/Accordion/Accordion";
 export type * from "./components/AILabel/AILabel";
 export type * from "./components/AIContent/AIContent";
+export type * from "./components/Calendar/Calendar";
+export type * from "./components/Coachmark/Coachmark";
+export type * from "./components/CodeBlock/CodeBlock";
 export type * from "./components/ConfirmAIAction/ConfirmAIAction";
 export type * from "./components/Alert/Alert";
 export type * from "./components/AppHeader/AppHeader";
@@ -106,11 +122,13 @@ export type * from "./components/Button/Button";
 export type * from "./components/Card/Card";
 export type * from "./components/Checkbox/Checkbox";
 export type * from "./components/Chips/Chips";
+export type * from "./components/ColorPicker/ColorPicker";
 export type * from "./components/Combobox/Combobox";
 export type * from "./components/ConfirmDialog/ConfirmDialog";
 export type * from "./components/Container/Container";
 export type * from "./components/DataTable/DataTable";
 export type * from "./components/DatePicker/DatePicker";
+export type * from "./components/DescriptionList/DescriptionList";
 export type * from "./components/Divider/Divider";
 export type * from "./components/Chart/DonutChart";
 export type * from "./components/Drawer/Drawer";
@@ -119,15 +137,21 @@ export type * from "./components/EmptyState/EmptyState";
 export type * from "./components/FileInput/FileInput";
 export type * from "./components/Grid/Grid";
 export type * from "./components/Icon/Icon";
+export type * from "./components/IconPicker/IconPicker";
 export type * from "./components/Input/Input";
 export type * from "./components/Kanban/Kanban";
 export type * from "./components/Kanban/KanbanCard";
 export type * from "./components/Kanban/KanbanColumn";
+export type * from "./components/Kbd/Kbd";
 export type * from "./components/Link/Link";
 export type * from "./components/Chart/LineChart";
+export type * from "./components/List/List";
+export type * from "./components/List/ListItem";
 export type * from "./components/Logo/Logo";
 export type * from "./components/Modal/Modal";
 export type * from "./components/MultiSelect/MultiSelect";
+export type * from "./components/OrgChart/OrgChart";
+export type * from "./components/OtpInput/OtpInput";
 export type * from "./components/PageHeader/PageHeader";
 export type * from "./components/Pagination/Pagination";
 export type * from "./components/PhoneInput/PhoneInput";
@@ -135,6 +159,7 @@ export type * from "./components/Podium/Podium";
 export type * from "./components/ProgressBar/ProgressBar";
 export type * from "./components/Radio/Radio";
 export type * from "./components/Radio/RadioGroup";
+export type * from "./components/RichTextEditor/RichTextEditor";
 export type * from "./components/SegmentedControl/SegmentedControl";
 export type * from "./components/Select/Select";
 export type * from "./components/SidePanel/SidePanel";

package/dist/index.js

@@ -4,12 +4,17 @@ export * from "./utils/theme";
 export * from "./utils/toast";
 // Densidade global (modo touch ≥44px via data-density)
 export * from "./utils/density";
+// Paleta de cor categórica (primitivos) do ColorPicker
+export * from "./utils/paleta-de-cores";
 // FontAwesome
 export { library } from "@fortawesome/fontawesome-svg-core";
 // Components
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as AILabel } from "./components/AILabel/AILabel";
 export { default as AIContent } from "./components/AIContent/AIContent";
+export { default as Calendar } from "./components/Calendar/Calendar";
+export { default as Coachmark } from "./components/Coachmark/Coachmark";
+export { default as CodeBlock } from "./components/CodeBlock/CodeBlock";
 export { default as ConfirmAIAction } from "./components/ConfirmAIAction/ConfirmAIAction";
 export { default as Alert } from "./components/Alert/Alert";
 export { default as AppHeader } from "./components/AppHeader/AppHeader";
@@ -31,11 +36,13 @@ export { default as Button } from "./components/Button/Button";
 export { default as Card } from "./components/Card/Card";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as Chips } from "./components/Chips/Chips";
+export { default as ColorPicker } from "./components/ColorPicker/ColorPicker";
 export { default as Combobox } from "./components/Combobox/Combobox";
 export { default as ConfirmDialog } from "./components/ConfirmDialog/ConfirmDialog";
 export { default as Container } from "./components/Container/Container";
 export { default as DataTable } from "./components/DataTable/DataTable";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as DescriptionList } from "./components/DescriptionList/DescriptionList";
 export { default as Divider } from "./components/Divider/Divider";
 export { default as DonutChart } from "./components/Chart/DonutChart";
 export { default as Drawer } from "./components/Drawer/Drawer";
@@ -44,15 +51,21 @@ export { default as EmptyState } from "./components/EmptyState/EmptyState";
 export { default as FileInput } from "./components/FileInput/FileInput";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as Icon } from "./components/Icon/Icon";
+export { default as IconPicker } from "./components/IconPicker/IconPicker";
 export { default as Input } from "./components/Input/Input";
 export { default as Kanban } from "./components/Kanban/Kanban";
 export { default as KanbanCard } from "./components/Kanban/KanbanCard";
 export { default as KanbanColumn } from "./components/Kanban/KanbanColumn";
+export { default as Kbd } from "./components/Kbd/Kbd";
 export { default as Link } from "./components/Link/Link";
 export { default as LineChart } from "./components/Chart/LineChart";
+export { default as List } from "./components/List/List";
+export { default as ListItem } from "./components/List/ListItem";
 export { default as Logo } from "./components/Logo/Logo";
 export { default as Modal } from "./components/Modal/Modal";
 export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
+export { default as OrgChart } from "./components/OrgChart/OrgChart";
+export { default as OtpInput } from "./components/OtpInput/OtpInput";
 export { default as PageHeader } from "./components/PageHeader/PageHeader";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as PhoneInput } from "./components/PhoneInput/PhoneInput";
@@ -60,6 +73,7 @@ export { default as Podium } from "./components/Podium/Podium";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/Radio/RadioGroup";
+export { default as RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
 export { default as SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
 export { default as Select } from "./components/Select/Select";
 export { default as SidePanel } from "./components/SidePanel/SidePanel";

package/dist/teste/AILabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/AILabel.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AILabel from "../components/AILabel/AILabel";
+/**
+ * `defaultOpen` era declarado e documentado, mas nunca lido: o painel nascia
+ * fechado de qualquer jeito, e a story "Em inglês" usava `open` (controlado)
+ * para contornar — o que travava o clique.
+ */
+describe("AILabel · defaultOpen", () => {
+    it("abre o painel na montagem", () => {
+        render(_jsx(AILabel, { explanation: "Resumo dos despachos.", defaultOpen: true }));
+        expect(screen.getByRole("region")).toHaveTextContent("Resumo dos despachos.");
+        expect(screen.getByRole("button", { name: "Conteúdo gerado por IA" })).toHaveAttribute("aria-expanded", "true");
+    });
+    it("continua não-controlado: o clique fecha e avisa", async () => {
+        const usuario = userEvent.setup();
+        const onOpenChange = vi.fn();
+        render(_jsx(AILabel, { explanation: "Resumo.", defaultOpen: true, onOpenChange: onOpenChange }));
+        await usuario.click(screen.getByRole("button", { name: "Conteúdo gerado por IA" }));
+        expect(screen.queryByRole("region")).not.toBeInTheDocument();
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+    it("sem defaultOpen nasce fechado", () => {
+        render(_jsx(AILabel, { explanation: "Resumo." }));
+        expect(screen.queryByRole("region")).not.toBeInTheDocument();
+    });
+    it("`open` controlado vence o defaultOpen", () => {
+        render(_jsx(AILabel, { explanation: "Resumo.", defaultOpen: true, open: false }));
+        expect(screen.queryByRole("region")).not.toBeInTheDocument();
+    });
+});

package/dist/teste/AccordionConteudoLivre.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/AccordionConteudoLivre.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+describe("Accordion · conteúdo livre por item (React)", () => {
+    it("o content do item aceita qualquer nó (campos, botões)", () => {
+        render(_jsx(Accordion, { items: [
+                {
+                    id: "s1",
+                    title: "Seção 01",
+                    defaultOpen: true,
+                    content: (_jsxs("label", { children: ["Nome ", _jsx("input", { defaultValue: "Maria" })] })),
+                },
+                { id: "s2", title: "Seção 02", content: _jsx("button", { type: "button", children: "Anexar arquivo" }) },
+            ] }));
+        expect(screen.getByDisplayValue("Maria")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Anexar arquivo", hidden: true })).toBeInTheDocument();
+    });
+    it("o título do item é o botão do painel, sem cor própria (herda a neutra do gatilho)", () => {
+        const { container } = render(_jsx(Accordion, { items: [{ id: "a", title: "Seção", content: "x" }] }));
+        const titulo = container.querySelector(".umds-accordion__title");
+        expect(titulo.closest("button")).toHaveClass("umds-accordion__trigger");
+        expect(titulo.getAttribute("style")).toBeNull();
+    });
+    it("o texto simples continua funcionando", () => {
+        render(_jsx(Accordion, { items: [{ id: "a", title: "Seção", content: "Texto do painel", defaultOpen: true }] }));
+        expect(screen.getByText("Texto do painel")).toBeInTheDocument();
+    });
+});

package/dist/teste/Alert.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/Alert.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Alert from "../components/Alert/Alert";
+/**
+ * O Alert anunciava toda variante com `role="alert"`, que é assertivo: um
+ * aviso informativo ou de sucesso cortava o que o leitor de tela estava
+ * lendo. Só o erro (`negative`) pode interromper; o resto é `role="status"`.
+ */
+describe("Alert · anúncio ao leitor de tela", () => {
+    it("negative interrompe: role=alert e aria-live=assertive", () => {
+        render(_jsx(Alert, { variant: "negative", title: "Falhou" }));
+        const alerta = screen.getByRole("alert");
+        expect(alerta).toHaveAttribute("aria-live", "assertive");
+        expect(screen.queryByRole("status")).not.toBeInTheDocument();
+    });
+    it.each(["positive", "info", "neutral"])("%s é educado: role=status e aria-live=polite", (variant) => {
+        render(_jsx(Alert, { variant: variant, title: "Aviso" }));
+        const alerta = screen.getByRole("status");
+        expect(alerta).toHaveAttribute("aria-live", "polite");
+        expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    });
+    it("sem variant cai no neutral, educado", () => {
+        render(_jsx(Alert, { title: "Aviso" }));
+        expect(screen.getByRole("status")).toBeInTheDocument();
+    });
+});

package/dist/teste/AtributosRepassados.test.d.ts

@@ -0,0 +1 @@
+export {};