@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './DescriptionList.css';
+function DescriptionList(props) {
+    function itemList() {
+        return props.items || [];
+    }
+    function isStacked() {
+        return props.layout === "stacked";
+    }
+    function classes() {
+        const colunas = props.columns || 2;
+        return [
+            "umds-description-list",
+            props.layout === "stacked"
+                ? "umds-description-list--stacked"
+                : "umds-description-list--inline",
+            props.layout === "stacked"
+                ? `umds-description-list--cols-${colunas}`
+                : "",
+            props.layout === "stacked" && props.bordered
+                ? "umds-description-list--bordered"
+                : "",
+            props.layout !== "stacked" && props.fit
+                ? "umds-description-list--fit"
+                : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function valueText(item) {
+        const valor = item.value;
+        if (valor === undefined || valor === null || valor === "")
+            return props.emptyValue || "—";
+        return valor;
+    }
+    function itemKey(item) {
+        return item.id || item.label;
+    }
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 || chave === "style") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsx("dl", { id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: itemList()?.map((item) => (_jsxs("div", { className: "umds-description-list__item", children: [_jsx("dt", { className: "umds-description-list__term", children: item.label }), _jsx("dd", { className: "umds-description-list__description", children: valueText(item) })] }, itemKey(item)))) }));
+}
+export default DescriptionList;

package/dist/components/Drawer/Drawer.css

@@ -49,6 +49,7 @@
 .umds-drawer__backdrop {
   position: absolute;
   inset: 0;
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token) */
   background-color: rgba(0, 0, 0, 0.4); /* overlay escuro — sem token 1DS: candidato a novo token (igual ao Modal e ao BottomSheet) */
   backdrop-filter: blur(4px);
   z-index: 1;

package/dist/components/Dropdown/Dropdown.js

@@ -216,18 +216,34 @@ function Dropdown(props) {
         }
         close();
     }
-    function moveActive(delta) {
+    function nextEnabledIndex(from, delta) {
         const items = itemList();
-        if (items.length === 0)
-            return;
-        let next = activeIndex;
-        for (let step = 0; step < items.length; step++) {
-            next = (next + delta + items.length) % items.length;
-            if (!items[next].disabled) {
-                setActiveIndex(next);
-                return;
-            }
+        const total = items.length;
+        if (total === 0)
+            return -1;
+        let next = from;
+        for (let step = 0; step < total; step++) {
+            next = (next + delta + total) % total;
+            if (!items[next].disabled)
+                return next;
         }
+        return -1;
+    }
+    function focusedIndex() {
+        if (!menuRef.current || typeof document === "undefined")
+            return activeIndex;
+        const buttons = menuRef.current.querySelectorAll('[role="menuitem"]');
+        for (let i = 0; i < buttons.length; i++) {
+            if (buttons[i] === document.activeElement)
+                return i;
+        }
+        return activeIndex;
+    }
+    function activateIndex(index) {
+        if (index < 0)
+            return;
+        setActiveIndex(index);
+        focusIndex(index);
     }
     function handleTriggerKeydown(event) {
         const key = event.key;
@@ -236,56 +252,58 @@ function Dropdown(props) {
             key === "Enter" ||
             key === " ") {
             event.preventDefault();
+            const total = itemList().length;
+            const target = key === "ArrowUp"
+                ? nextEnabledIndex(total, -1)
+                : nextEnabledIndex(-1, 1);
+            setActiveIndex(target);
             if (!isOpen()) {
+                // O foco entra no menu pelo onUpdate, depois que o painel estiver
+                // posicionado; lá o activeIndex já é o do render novo.
                 open();
             }
-            if (key === "ArrowUp") {
-                setActiveIndex(itemList().length - 1);
-                moveActive(0);
-            }
             else {
-                setActiveIndex(-1);
-                moveActive(1);
+                focusIndex(target);
             }
         }
     }
     function focusActiveItem() {
+        focusIndex(activeIndex);
+    }
+    function focusIndex(index) {
         if (!menuRef.current)
             return;
         const buttons = menuRef.current.querySelectorAll('[role="menuitem"]');
-        const target = activeIndex >= 0 && activeIndex < buttons.length
-            ? buttons[activeIndex]
+        const target = index >= 0 && index < buttons.length
+            ? buttons[index]
             : menuRef.current;
         if (target)
             target.focus();
     }
     function handleMenuKeydown(event) {
         const key = event.key;
+        const total = itemList().length;
         if (key === "ArrowDown") {
             event.preventDefault();
-            moveActive(1);
-            focusActiveItem();
+            activateIndex(nextEnabledIndex(focusedIndex(), 1));
         }
         else if (key === "ArrowUp") {
             event.preventDefault();
-            moveActive(-1);
-            focusActiveItem();
+            const current = focusedIndex();
+            // Sem item ativo (foco no próprio <ul>), a seta para cima vai ao último.
+            activateIndex(nextEnabledIndex(current < 0 ? total : current, -1));
         }
         else if (key === "Home") {
             event.preventDefault();
-            setActiveIndex(-1);
-            moveActive(1);
-            focusActiveItem();
+            activateIndex(nextEnabledIndex(-1, 1));
         }
         else if (key === "End") {
             event.preventDefault();
-            setActiveIndex(itemList().length);
-            moveActive(-1);
-            focusActiveItem();
+            activateIndex(nextEnabledIndex(total, -1));
         }
         else if (key === "Enter" || key === " ") {
             event.preventDefault();
-            const item = itemList()[activeIndex];
+            const item = itemList()[focusedIndex()];
             if (item)
                 handleSelect(item);
         }

package/dist/components/FileInput/FileInput.css

@@ -29,6 +29,22 @@
   pointer-events: none;
 }
 
+/* ── Variante trigger: sem caixa; o conteúdo passado é o gatilho ── */
+.umds-file-input--trigger {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.umds-file-input__trigger-wrap {
+  display: inline-flex;
+}
+
+/* O input não entra no Tab: o gatilho (o botão) é quem recebe o foco. */
+.umds-file-input--trigger .umds-file-input__native {
+  position: absolute;
+}
+
 /* ── Drop zone ── */
 .umds-file-input__drop-zone {
   cursor: pointer;
@@ -56,7 +72,7 @@
   align-items: center;
   gap: var(--umds-primitive-spacing-xxxs); /* era 12px (protótipo --space-3) — snap 14/07 */
   padding: var(--umds-primitive-spacing-xxxs); /* era 12px 16px (protótipo --space-3/--space-4) — snap 14/07 */
-  border: 1.5px dashed var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
+  border: 1.5px dashed var(--umds-semantic-field-border-default); /* neutral-dark-medium: 3:1 do WCAG 1.4.11 */
   border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
   background: var(--umds-semantic-color-background-white);
   transition:
@@ -149,14 +165,16 @@
 
 .umds-file-input__card-text {
   /* Figma: título 14px em primary-pure; o subtítulo, quando existir, é 12px em
-     neutral-dark-medium. */
+     neutral-dark-medium — aqui neutral-dark-down, ver `__card-subtext`. */
   font-size: var(--umds-primitive-font-size-xxs); /* 14px */
   color: var(--umds-semantic-color-primary-pure);
 }
 
 .umds-file-input__card-subtext {
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px — Figma: subtittle */
-  color: var(--umds-semantic-color-neutral-dark-medium); /* #7D7D7D */
+  /* O Figma pede #7D7D7D (neutral-dark-medium), que dá 4,11:1 sobre branco e
+     reprova o WCAG 1.4.3 para texto. neutral-dark-down: #565656, 7,34:1. */
+  color: var(--umds-semantic-color-neutral-dark-down);
 }
 
 .umds-file-input__card-link {
@@ -334,6 +352,8 @@
   color: var(--umds-semantic-color-feedback-negative-pure);
 }
 
+/* Mesma cor do helperText do Input (Text color="secondary"): o #7D7D7D de
+   antes dava 4,11:1 e reprovava o contraste de texto (WCAG 1.4.3). */
 .umds-file-input__helper {
-  color: var(--umds-semantic-color-neutral-dark-medium);
+  color: var(--umds-semantic-color-neutral-dark-down);
 }

package/dist/components/FileInput/FileInput.d.ts

@@ -20,7 +20,7 @@ export interface FileInputFile {
  * @property {boolean} multiple - Permite selecionar múltiplos arquivos
  * @property {number} maxSize - Tamanho máximo em bytes (exibido como dica na variante base)
  * @property {boolean} disabled - Desabilita a seleção de arquivos
- * @property {string} variant - Variante visual: 'base' (linha) | 'card' (preview visual)
+ * @property {string} variant - Variante visual: 'base' (linha) | 'card' (preview visual) | 'trigger' (sem caixa: o seletor é aberto por outro controle, o conteúdo que você passa, como um `Button` "Anexar arquivo" ou um link "Alterar foto"; o clique nele abre o seletor e o resto (`accept`, `multiple`, `files`, `onChange`) funciona igual)
  * @property {string} label - Rótulo exibido acima do campo
  * @property {FileInputFile[]} files - Arquivos atualmente listados (controlado)
  * @property {string} name - Nome do campo no submit de form nativo. Com name, os File
@@ -41,7 +41,7 @@ export interface FileInputProps {
     multiple?: boolean;
     maxSize?: number;
     disabled?: boolean;
-    variant?: "base" | "card";
+    variant?: "base" | "card" | "trigger";
     label?: string;
     files?: FileInputFile[];
     name?: string;
@@ -52,6 +52,26 @@ export interface FileInputProps {
     /** Texto de ajuda exibido abaixo do campo. */
     helperText?: string;
     className?: string;
+    /** Nome acessível do input de arquivo quando não há `label`. Troque para traduzir. @default 'Selecionar arquivo' */
+    selectFileLabel?: string;
+    /** Chamada em negrito da variante `base`. Troque para traduzir. @default 'Clique para selecionar' */
+    triggerLabel?: string;
+    /** Complemento da chamada na variante `base`, depois do negrito. Troque para traduzir. @default 'ou arraste aqui' */
+    triggerHint?: string;
+    /** Prefixo da dica de tamanho máximo (recebe o tamanho formatado depois de um espaço). Troque para traduzir. @default 'Máximo' */
+    maxSizeLabel?: string;
+    /** Chamada em negrito da variante `card`. Troque para traduzir. @default 'Arraste e solte' */
+    dropLabel?: string;
+    /** Conector entre as duas chamadas da variante `card`. Troque para traduzir. @default 'ou' */
+    orLabel?: string;
+    /** Link de escolher arquivo na variante `card`. Troque para traduzir. @default 'clique para escolher' */
+    browseLabel?: string;
+    /** Prefixo do nome acessível do botão de remover um arquivo (recebe o nome do arquivo depois de um espaço), como no MultiSelect. Troque para traduzir. @default 'Remover' */
+    removeAriaLabel?: string;
+    /** Prefixo do nome acessível da barra de progresso de um arquivo (recebe o nome do arquivo depois de um espaço). Troque para traduzir. @default 'Enviando' */
+    uploadingAriaLabel?: string;
+    /** Gatilho da variante `trigger` (o `Button` ou link que abre o seletor). React: filhos; Vue: slot padrão. */
+    children?: any;
     onChange?: (files?: File[]) => void;
     onRemove?: (index?: number) => void;
 }

package/dist/components/FileInput/FileInput.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './FileInput.css';
 import { useState, useRef } from "react";
 import { faArrowUpFromBracket, faCloudArrowUp, faFile, faXmark, } from "@fortawesome/free-solid-svg-icons";
@@ -8,6 +8,21 @@ function FileInput(props) {
     const inputRef = useRef(null);
     const [dragOver, setDragOver] = useState(() => false);
     const [nativeFiles, setNativeFiles] = useState(() => Array());
+    function triggerHintText() {
+        return " " + (props.triggerHint || "ou arraste aqui");
+    }
+    function orText() {
+        return " " + (props.orLabel || "ou") + "\u00A0";
+    }
+    function maxSizeText() {
+        return ((props.maxSizeLabel || "Máximo") + " " + formatSize(props.maxSize || 0));
+    }
+    function removeFileLabel(fileName) {
+        return (props.removeAriaLabel || "Remover") + " " + fileName;
+    }
+    function uploadingFileLabel(fileName) {
+        return (props.uploadingAriaLabel || "Enviando") + " " + fileName;
+    }
     function wrapperClasses() {
         return [
             "umds-file-input",
@@ -54,6 +69,12 @@ function FileInput(props) {
         setNativeFiles(props.multiple ? [...nativeFiles, ...files] : files);
         applyNativeFiles();
     }
+    function openDialog() {
+        if (props.disabled)
+            return;
+        if (inputRef.current)
+            inputRef.current.click();
+    }
     function handleChange(event) {
         if (props.disabled)
             return;
@@ -100,7 +121,7 @@ function FileInput(props) {
             applyNativeFiles();
         }
     }
-    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsx("label", { className: "umds-file-input__label", children: props.label })) : null, _jsxs("label", { className: "umds-file-input__drop-zone", onDragOver: (event) => handleDragOver(event), onDragLeave: (event) => handleDragLeave(), onDrop: (event) => handleDrop(event), children: [_jsx("input", { type: "file", className: "umds-file-input__native", ref: inputRef, name: props.name, accept: props.accept, multiple: props.multiple, disabled: props.disabled, onChange: (event) => handleChange(event), "aria-label": props.label || "Selecionar arquivo", "aria-invalid": props.invalid }), props.variant !== "card" ? (_jsxs("div", { className: "umds-file-input__trigger", children: [_jsx("span", { "aria-hidden": "true", className: "umds-file-input__upload-icon", children: _jsx(Icon, { variant: "inherit", customSize: "20px", icon: faArrowUpFromBracket }) }), _jsxs("span", { className: "umds-file-input__trigger-text", children: [_jsx("strong", { children: "Clique para selecionar" }), " ou arraste aqui"] }), props.accept ? (_jsx("span", { className: "umds-file-input__hint", children: props.accept })) : null, props.maxSize ? (_jsxs("span", { className: "umds-file-input__hint", children: ["M\u00E1ximo ", formatSize(props.maxSize)] })) : null] })) : null, props.variant === "card" ? (_jsxs("div", { className: "umds-file-input__card-zone", children: [_jsx("span", { "aria-hidden": "true", className: "umds-file-input__card-icon", children: _jsx(Icon, { variant: "inherit", customSize: "32px", icon: faCloudArrowUp }) }), _jsxs("span", { className: "umds-file-input__card-text", children: [_jsx("strong", { children: "Arraste e solte" }), " ou\u00A0", _jsx("span", { className: "umds-file-input__card-link", children: "clique para escolher" })] })] })) : null] }), hasFiles() ? (_jsx("ul", { className: "umds-file-input__list", children: filesList()?.map((file, idx) => (_jsxs("li", { className: fileClasses(file), children: [_jsxs("div", { className: "umds-file-input__file-row", children: [_jsx("span", { "aria-hidden": "true", className: "umds-file-input__file-avatar", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faFile }) }), _jsxs("div", { className: "umds-file-input__file-info", children: [_jsx("span", { className: "umds-file-input__file-name", children: file.name }), file.status !== "uploading" ? (_jsx("span", { className: "umds-file-input__file-size", children: formatSize(file.size) })) : null, file.error ? (_jsx("span", { className: "umds-file-input__file-error", children: file.error })) : null] }), _jsx("button", { type: "button", className: "umds-file-input__file-remove", onClick: (event) => handleRemove(idx), "aria-label": `Remover ${file.name}`, children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })] }), file.status === "uploading" && file.progress !== undefined ? (_jsx("div", { role: "progressbar", className: "umds-file-input__progress-bar", "aria-valuenow": file.progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Enviando ${file.name}`, children: _jsx("div", { className: "umds-file-input__progress-fill", style: {
+    return (_jsxs("div", { className: wrapperClasses(), children: [props.label && props.variant !== "trigger" ? (_jsx("label", { className: "umds-file-input__label", children: props.label })) : null, props.variant === "trigger" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "umds-file-input__trigger-wrap", onClick: (event) => openDialog(), children: _jsx(_Fragment, { children: props.children }) }), _jsx("input", { type: "file", className: "umds-file-input__native", ref: inputRef, name: props.name, accept: props.accept, multiple: props.multiple, disabled: props.disabled, onChange: (event) => handleChange(event), "aria-label": props.label || props.selectFileLabel || "Selecionar arquivo", "aria-invalid": props.invalid, tabIndex: -1 })] })) : null, props.variant !== "trigger" ? (_jsxs("label", { className: "umds-file-input__drop-zone", onDragOver: (event) => handleDragOver(event), onDragLeave: (event) => handleDragLeave(), onDrop: (event) => handleDrop(event), children: [_jsx("input", { type: "file", className: "umds-file-input__native", ref: inputRef, name: props.name, accept: props.accept, multiple: props.multiple, disabled: props.disabled, onChange: (event) => handleChange(event), "aria-label": props.label || props.selectFileLabel || "Selecionar arquivo", "aria-invalid": props.invalid }), props.variant !== "card" ? (_jsxs("div", { className: "umds-file-input__trigger", children: [_jsx("span", { "aria-hidden": "true", className: "umds-file-input__upload-icon", children: _jsx(Icon, { variant: "inherit", customSize: "20px", icon: faArrowUpFromBracket }) }), _jsxs("span", { className: "umds-file-input__trigger-text", children: [_jsx("strong", { children: props.triggerLabel || "Clique para selecionar" }), triggerHintText()] }), props.accept ? (_jsx("span", { className: "umds-file-input__hint", children: props.accept })) : null, props.maxSize ? (_jsx("span", { className: "umds-file-input__hint", children: maxSizeText() })) : null] })) : null, props.variant === "card" ? (_jsxs("div", { className: "umds-file-input__card-zone", children: [_jsx("span", { "aria-hidden": "true", className: "umds-file-input__card-icon", children: _jsx(Icon, { variant: "inherit", customSize: "32px", icon: faCloudArrowUp }) }), _jsxs("span", { className: "umds-file-input__card-text", children: [_jsx("strong", { children: props.dropLabel || "Arraste e solte" }), orText(), _jsx("span", { className: "umds-file-input__card-link", children: props.browseLabel || "clique para escolher" })] })] })) : null] })) : null, hasFiles() ? (_jsx("ul", { className: "umds-file-input__list", children: filesList()?.map((file, idx) => (_jsxs("li", { className: fileClasses(file), children: [_jsxs("div", { className: "umds-file-input__file-row", children: [_jsx("span", { "aria-hidden": "true", className: "umds-file-input__file-avatar", children: _jsx(Icon, { variant: "inherit", customSize: "16px", icon: faFile }) }), _jsxs("div", { className: "umds-file-input__file-info", children: [_jsx("span", { className: "umds-file-input__file-name", children: file.name }), file.status !== "uploading" ? (_jsx("span", { className: "umds-file-input__file-size", children: formatSize(file.size) })) : null, file.error ? (_jsx("span", { className: "umds-file-input__file-error", children: file.error })) : null] }), _jsx("button", { type: "button", className: "umds-file-input__file-remove", onClick: (event) => handleRemove(idx), "aria-label": removeFileLabel(file.name), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })] }), file.status === "uploading" && file.progress !== undefined ? (_jsx("div", { role: "progressbar", className: "umds-file-input__progress-bar", "aria-valuenow": file.progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": uploadingFileLabel(file.name), children: _jsx("div", { className: "umds-file-input__progress-fill", style: {
                                     width: `${file.progress}%`,
                                 } }) })) : null] }, idx))) })) : null, props.invalid && props.errorMessage ? (_jsx("span", { role: "alert", className: "umds-file-input__error", children: props.errorMessage })) : null, !props.invalid && props.helperText ? (_jsx("span", { className: "umds-file-input__helper", children: props.helperText })) : null] }));
 }

package/dist/components/Grid/Grid.js

@@ -41,16 +41,16 @@ function Grid(props) {
         }
         return classList.filter(Boolean).join(" ");
     }
-    function style() {
+    function estiloInline() {
         const styleObj = {};
         if (props.container && props.spacing) {
             const gapValue = `var(--umds-primitive-spacing-${props.spacing})`;
             styleObj.gap = gapValue;
             styleObj["--umds-grid-gap"] = gapValue;
         }
-        // O gerador Vue do Mitosis proíbe "style" como prop declarada/lida
-        // (getProps lança "avoid using JavaScript keyword"); estilo inline do
-        // consumidor fica por conta do fallthrough nativo de attrs no Vue.
+        // O getter NÃO se chama `style`: o gerador Vue do Mitosis troca toda
+        // ocorrência da palavra (até a string "style" e comentário) por
+        // `style.value`, e o estilo do consumidor deixava de passar.
         return styleObj;
     }
     function htmlAttrs() {
@@ -67,6 +67,6 @@ function Grid(props) {
         }
         return out;
     }
-    return (_jsx("div", { id: props.id, style: style(), ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) }));
+    return (_jsx("div", { id: props.id, style: estiloInline(), ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) }));
 }
 export default Grid;

package/dist/components/IconPicker/IconPicker.css

@@ -0,0 +1,107 @@
+/* ─────────────────────────────────────────────
+   ICON PICKER
+   Grade de ícones com busca. O escolhido ganha o fundo e a borda do primário.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-icon-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+.umds-icon-picker__label {
+  font-size: var(--umds-semantic-field-label-size);
+  font-weight: var(--umds-semantic-field-label-weight);
+  color: var(--umds-semantic-field-label-color);
+}
+
+/* Só para leitor de tela: "12 ícones", a cada busca. */
+.umds-icon-picker__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;
+}
+
+/* ── Grade ── */
+/* Tamanho do ladrilho: o ícone escolhe, a grade só repete (nada estica quando o container é largo). */
+.umds-icon-picker--md {
+  --umds-icon-picker-tile: var(--umds-primitive-spacing-sm); /* 40px */
+}
+
+.umds-icon-picker--sm {
+  --umds-icon-picker-tile: var(--umds-primitive-spacing-xs); /* 32px */
+}
+
+.umds-icon-picker__grid {
+  display: grid;
+  justify-content: start;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  /* Folga para o anel de foco não ser cortado pelo overflow da grade. */
+  padding: var(--umds-primitive-spacing-quarck);
+  overflow-y: auto;
+}
+
+.umds-icon-picker__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  width: var(--umds-icon-picker-tile);
+  height: var(--umds-icon-picker-tile);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  cursor: pointer;
+  transition:
+    background-color 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),
+    color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-icon-picker__item:hover:not(:disabled) {
+  background: var(--umds-semantic-color-background-light);
+  border-color: var(--umds-semantic-color-neutral-light-down);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-icon-picker__item--selected,
+.umds-icon-picker__item--selected:hover:not(:disabled) {
+  background: var(--umds-semantic-color-primary-light);
+  border-color: var(--umds-semantic-color-primary-pure);
+  color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-icon-picker__item: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-icon-picker__item:disabled {
+  cursor: not-allowed;
+  opacity: var(--umds-semantic-field-disabled-opacity);
+}
+
+.umds-icon-picker__empty {
+  padding: var(--umds-primitive-spacing-xxxs) 0; /* 16px */
+  text-align: center;
+}
+
+@media (forced-colors: active) {
+  .umds-icon-picker__item--selected {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}

package/dist/components/IconPicker/IconPicker.d.ts

@@ -0,0 +1,74 @@
+import './IconPicker.css';
+/**
+ * Ícone do IconPicker, quando precisa de nome ou palavras de busca próprios.
+ * @property {any} icon - O ícone: o objeto importado do Font Awesome (`faUser`).
+ * @property {string} label - Nome para leitor de tela, tooltip e busca (padrão: o nome do ícone, sem hífen).
+ * @property {string[]} keywords - Palavras que também acham o ícone na busca (ex.: ["pessoa", "usuário"]).
+ */
+export interface IconPickerItem {
+    icon: any;
+    label?: string;
+    keywords?: string[];
+    [key: string]: any;
+}
+/**
+ * IconPicker — escolha de UM ícone numa grade, com busca.
+ *
+ * Os ícones vêm por prop (`icons`): objetos do Font Awesome importados
+ * (`faUser`, `faFolder`...), puros ou embrulhados em `{ icon, label, keywords }`
+ * quando o nome ou a busca precisam de ajuda. O valor é o NOME do ícone
+ * (`"user"`, `"file-lines"`), o `iconName` do Font Awesome: guarde o nome e
+ * resolva de volta para o objeto na hora de desenhar.
+ *
+ * É um `radiogroup`: um Tab entra na grade (no ícone escolhido, ou no primeiro)
+ * e as setas movem a escolha (esquerda e direita um ícone, cima e baixo uma
+ * linha), com Home e End nas pontas. A busca (campo acima da grade, ligada por
+ * padrão) filtra por nome e palavras-chave sem acento nem caixa; a seta para
+ * baixo no campo leva à grade, e o número de resultados é anunciado.
+ *
+ * O ícone escolhido ganha fundo e borda do primário, e o resultado vazio mostra
+ * `emptyText`. A altura da grade pode ser limitada (`maxHeight`) para listas com
+ * dezenas de ícones.
+ * @property {any[]} icons - Os ícones: objetos do Font Awesome, ou `{ icon, label?, keywords? }`
+ * @property {string} value - Nome do ícone escolhido (controlado)
+ * @property {string} defaultValue - Nome inicial (não controlado)
+ * @property {string} label - Rótulo visível do grupo
+ * @property {string} ariaLabel - Nome acessível quando não há `label` visível
+ * @property {number} columns - Colunas da grade (padrão 8)
+ * @property {string} size - Tamanho do ícone: 'sm' | 'md' (padrão)
+ * @property {number} maxHeight - Altura máxima da grade, em px (rola dentro dela)
+ * @property {boolean} hideSearch - Esconde o campo de busca
+ * @property {string} searchLabel - Nome do campo de busca (padrão "Buscar ícone")
+ * @property {string} searchPlaceholder - Placeholder da busca (padrão "Buscar ícone...")
+ * @property {string} emptyText - Texto sem resultados (padrão "Nenhum ícone encontrado")
+ * @property {string} resultsLabel - Anúncio da quantidade de resultados; `{count}` vira o número (padrão "{count} ícones")
+ * @property {function} iconLabel - Nome de um ícone sem `label`: `(nome) => texto` (padrão: o nome sem hífen)
+ * @property {boolean} disabled - Desabilita o grupo inteiro
+ * @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 nome do ícone e o item escolhido
+ * @quandoUsar Escolher o ícone de uma categoria, de um tipo de documento, de um perfil, de um atalho.
+ * @quandoNaoUsar Para escolher entre poucas opções que o texto descreve melhor, use `SegmentedControl` ou `Select`. Para escolher uma cor, use `ColorPicker`.
+ */
+export interface IconPickerProps {
+    icons?: any[];
+    value?: string;
+    defaultValue?: string;
+    label?: string;
+    ariaLabel?: string;
+    columns?: number;
+    size?: "sm" | "md";
+    maxHeight?: number;
+    hideSearch?: boolean;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    resultsLabel?: string;
+    iconLabel?: (name: string) => string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    onChange?: (name: string, item: any) => void;
+}
+declare function IconPicker(props: IconPickerProps): import("react/jsx-runtime").JSX.Element;
+export default IconPicker;