@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,62 @@
+import './DescriptionList.css';
+/**
+ * Par rótulo/valor da DescriptionList.
+ * @property {string} label - Rótulo (o termo).
+ * @property {any} value - Valor (a descrição). No Vue é tratado como texto.
+ * @property {string} id - Identidade estável do par (padrão: o próprio rótulo).
+ */
+export interface DescriptionListItem {
+    label: string;
+    value?: any;
+    id?: string;
+    [key: string]: any;
+}
+/**
+ * DescriptionList — pares rótulo/valor de um documento, em `<dl>`.
+ *
+ * Dois desenhos para o mesmo dado:
+ * - `inline` (padrão): uma linha por par, rótulo pintado à esquerda e valor à
+ *   direita, numa grade de bordas finas e SEM cabeçalho. Encolhe até o conteúdo
+ *   (`fit`) ou ocupa a largura toda. É a tabela de "dotação orçamentária" de um
+ *   despacho.
+ * - `stacked`: rótulo pequeno em cima e valor embaixo, em até 4 `columns`. É o
+ *   bloco "Dados do processo". Com `bordered`, o valor ganha a caixa de um campo
+ *   somente leitura.
+ *
+ * O que é do papel fica nela: sem hover, sem foco, sem clique, e na impressão o
+ * par nunca é cortado entre duas páginas. Para tabela com cabeçalho de coluna,
+ * use `DataTable variant="document"`.
+ *
+ * Semântica: `<dl>` com `<dt>` e `<dd>`, agrupados por `<div>` (HTML 5.2). O
+ * leitor de tela anuncia a lista de termos e a quantidade.
+ * @property {DescriptionListItem[]} items - Os pares, na ordem em que aparecem
+ * @property {string} layout - 'inline' (padrão) | 'stacked'
+ * @property {number} columns - Só no `stacked`: colunas de pares, de 1 a 4 (padrão 2)
+ * @property {string} density - 'default' | 'compact'. O compacto leva a fonte a 12px (o tamanho do CrisDoc) e aperta o espaço entre os pares do `stacked`.
+ * @property {boolean} bordered - Só no `stacked`: o valor numa caixa de campo somente leitura
+ * @property {boolean} fit - Só no `inline`: encolhe até o conteúdo em vez de ocupar a largura toda
+ * @property {string} emptyValue - Texto quando o valor vem vazio (padrão: "—")
+ * @property {string} ariaLabel - Nome acessível da lista
+ * @property {string} ariaLabelledby - Id do título visível que nomeia a lista
+ * @property {string} className - Classes CSS adicionais
+ * @quandoUsar Dados cadastrais e de empenho dentro do texto de um documento, ficha de processo, bloco de detalhes de uma tela de leitura: qualquer conjunto de "campo: valor".
+ * @quandoNaoUsar Para dados com várias linhas comparáveis coluna a coluna, use `DataTable`. Para campos que a pessoa edita, use `Input` e afins. Para valor com marcação (badge, link, botão), a DescriptionList no Vue só mostra texto: monte o bloco com `Stack` e `Text`.
+ */
+export interface DescriptionListProps {
+    items?: DescriptionListItem[];
+    layout?: "inline" | "stacked";
+    columns?: 1 | 2 | 3 | 4;
+    bordered?: boolean;
+    /** Densidade. `compact`: fonte de 12px e espaço menor entre os pares. @default 'default' */
+    density?: "default" | "compact";
+    fit?: boolean;
+    emptyValue?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    className?: string;
+    id?: string;
+    style?: any;
+    [key: string]: any;
+}
+declare function DescriptionList(props: DescriptionListProps): import("react/jsx-runtime").JSX.Element;
+export default DescriptionList;

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,52 @@
+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.density === "compact" ? "umds-description-list--compact" : "",
+            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/EmptyState/EmptyState.d.ts

@@ -4,7 +4,8 @@ import './EmptyState.css';
  * @property {IconProp} icon - Ícone FontAwesome: objeto importado (recomendado —
  *   ex.: faInbox de free-solid-svg-icons), nome ('inbox') ou par ['far','inbox'].
  *   Nomes/pares exigem registro prévio na library. Decorativo (aria-hidden).
- * @property {string} title - Título principal do estado vazio (obrigatório)
+ * @property {string} title - Título principal do estado vazio: texto, ou conteúdo rico (um nó no React; no Vue, o slot `title`, com a prop como texto de reserva). O título é um `div`, então aceita negrito, ícone, link.
+ * @slot title - Só no Vue. Título com conteúdo rico (no lugar do texto da prop `title`).
  * @property {string} description - Texto de apoio exibido abaixo do título
  * @property {string} actionLabel - Rótulo do botão de ação (exibido junto com onAction)
  * @property {function} onAction - Callback acionado ao clicar no botão de ação
@@ -15,7 +16,8 @@ import './EmptyState.css';
  */
 export interface EmptyStateProps {
     icon?: IconProp;
-    title: string;
+    /** Título: texto ou conteúdo rico. No Vue, texto, ou o slot `title`. */
+    title?: any;
     description?: string;
     actionLabel?: string;
     onAction?: () => void;

package/dist/components/EmptyState/EmptyState.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 './EmptyState.css';
 import Icon from "../Icon/Icon";
 function EmptyState(props) {
@@ -23,6 +23,6 @@ function EmptyState(props) {
             return "40px";
         return "32px";
     }
-    return (_jsxs("div", { className: classes(), children: [!!props.icon ? (_jsx("div", { "aria-hidden": "true", className: "umds-empty-state__icon-wrap", children: _jsx(Icon, { variant: "inherit", icon: props.icon, customSize: iconSize() }) })) : null, _jsx("p", { className: "umds-empty-state__title", children: props.title }), !!props.description ? (_jsx("p", { className: "umds-empty-state__desc", children: props.description })) : null, hasAction() ? (_jsx("button", { type: "button", className: "umds-empty-state__action", onClick: (event) => props.onAction && props.onAction(), children: props.actionLabel })) : null] }));
+    return (_jsxs("div", { className: classes(), children: [!!props.icon ? (_jsx("div", { "aria-hidden": "true", className: "umds-empty-state__icon-wrap", children: _jsx(Icon, { variant: "inherit", icon: props.icon, customSize: iconSize() }) })) : null, _jsx("div", { className: "umds-empty-state__title", children: _jsx(_Fragment, { children: props.title }) }), !!props.description ? (_jsx("p", { className: "umds-empty-state__desc", children: props.description })) : null, hasAction() ? (_jsx("button", { type: "button", className: "umds-empty-state__action", onClick: (event) => props.onAction && props.onAction(), children: props.actionLabel })) : null] }));
 }
 export default EmptyState;

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;

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;
@@ -70,6 +70,8 @@ export interface FileInputProps {
     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";
@@ -69,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;
@@ -115,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 || 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] }), 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: {
+    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;

package/dist/components/IconPicker/IconPicker.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IconPicker.css';
+import { useState, useRef, useEffect } from "react";
+import Icon from "../Icon/Icon";
+import Input from "../Input/Input";
+import Text from "../Text/Text";
+import { gerarId } from "../../utils/id";
+import { semAcento } from "../../utils/texto";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+function IconPicker(props) {
+    const groupRef = useRef(null);
+    const focoPendenteRef = useRef(-1);
+    const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
+    const [query, setQuery] = useState(() => "");
+    const [uid, setUid] = useState(() => "");
+    function baseId() {
+        return props.id || uid;
+    }
+    function labelId() {
+        return baseId() && props.label ? baseId() + "-label" : undefined;
+    }
+    function groupAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        return props.label && !labelId() ? props.label : undefined;
+    }
+    function currentValue() {
+        return props.value !== undefined ? props.value : internalValue;
+    }
+    function columnCount() {
+        return props.columns && props.columns > 0 ? props.columns : 8;
+    }
+    function classes() {
+        return [
+            "umds-icon-picker",
+            `umds-icon-picker--${props.size || "md"}`,
+            props.disabled ? "umds-icon-picker--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function gridStyle() {
+        const estilo = {
+            gridTemplateColumns: "repeat(" + columnCount() + ", var(--umds-icon-picker-tile))",
+        };
+        if (props.maxHeight)
+            estilo.maxHeight = props.maxHeight + "px";
+        return estilo;
+    }
+    function nomeDe(icone) {
+        if (!icone)
+            return "";
+        if (typeof icone === "string")
+            return icone;
+        return icone.iconName || "";
+    }
+    function rotuloDe(nome) {
+        if (props.iconLabel)
+            return props.iconLabel(nome);
+        return nome.replace(/-/g, " ");
+    }
+    function itemList() {
+        const lista = props.icons || [];
+        const saida = [];
+        for (let i = 0; i < lista.length; i++) {
+            const bruto = lista[i];
+            const embrulhado = !!bruto && bruto.icon !== undefined && bruto.iconName === undefined;
+            const icone = embrulhado ? bruto.icon : bruto;
+            const nome = nomeDe(icone);
+            if (!nome)
+                continue;
+            const rotulo = embrulhado && bruto.label ? bruto.label : rotuloDe(nome);
+            const palavras = embrulhado && bruto.keywords ? bruto.keywords.join(" ") : "";
+            saida.push({
+                name: nome,
+                label: rotulo,
+                icon: icone,
+                raw: bruto,
+                search: semAcento(nome + " " + rotulo + " " + palavras),
+            });
+        }
+        return saida;
+    }
+    function visibleItems() {
+        const busca = semAcento(query);
+        if (!busca)
+            return itemList();
+        return itemList().filter((item) => item.search.indexOf(busca) !== -1);
+    }
+    function hasResults() {
+        return visibleItems().length > 0;
+    }
+    function emptyMessage() {
+        return props.emptyText || "Nenhum ícone encontrado";
+    }
+    function resultsText() {
+        return (props.resultsLabel || "{count} ícones").replace("{count}", String(visibleItems().length));
+    }
+    function searchName() {
+        return props.searchLabel || "Buscar ícone";
+    }
+    function estaEscolhido(item) {
+        return !!currentValue() && item.name === currentValue();
+    }
+    function itemClasses(item) {
+        return [
+            "umds-icon-picker__item",
+            estaEscolhido(item) ? "umds-icon-picker__item--selected" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function indiceDoTab() {
+        const lista = visibleItems();
+        for (let i = 0; i < lista.length; i++) {
+            if (estaEscolhido(lista[i]))
+                return i;
+        }
+        return 0;
+    }
+    function tabIndexDe(index) {
+        return index === indiceDoTab() ? 0 : -1;
+    }
+    function escolher(item) {
+        if (props.disabled)
+            return;
+        setInternalValue(item.name);
+        if (props.onChange)
+            props.onChange(item.name, item.raw);
+    }
+    function focarEm(index) {
+        if (!groupRef.current)
+            return;
+        const botoes = groupRef.current.querySelectorAll('[role="radio"]');
+        const alvo = botoes[index];
+        if (alvo)
+            alvo.focus();
+    }
+    function handleKeyDown(event, index) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const lista = visibleItems();
+        const total = lista.length;
+        if (!total)
+            return;
+        const colunas = columnCount();
+        let alvo = index;
+        if (event.key === "ArrowRight")
+            alvo = (index + 1) % total;
+        else if (event.key === "ArrowLeft")
+            alvo = (index - 1 + total) % total;
+        else if (event.key === "ArrowDown")
+            alvo = index + colunas < total ? index + colunas : index;
+        else if (event.key === "ArrowUp")
+            alvo = index - colunas >= 0 ? index - colunas : index;
+        else if (event.key === "Home")
+            alvo = 0;
+        else if (event.key === "End")
+            alvo = total - 1;
+        else
+            return;
+        event.preventDefault();
+        if (alvo === index &&
+            event.key !== "ArrowRight" &&
+            event.key !== "ArrowLeft")
+            return;
+        escolher(lista[alvo]);
+        focoPendenteRef.current = alvo;
+    }
+    function handleSearch(texto) {
+        setQuery(texto);
+    }
+    function handleSearchKeyDown(event) {
+        if (!event || event.key !== "ArrowDown" || !hasResults())
+            return;
+        event.preventDefault();
+        focarEm(indiceDoTab());
+    }
+    useEffect(() => {
+        if (!props.id)
+            setUid(gerarId("umds-icon-picker"));
+    }, []);
+    useEffect(() => {
+        if (focoPendenteRef.current >= 0) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = -1;
+            focarEm(alvo);
+        }
+    });
+    return (_jsxs("div", { className: classes(), children: [props.label ? (_jsx("span", { className: "umds-icon-picker__label", id: labelId(), children: props.label })) : null, !props.hideSearch ? (_jsx("div", { className: "umds-icon-picker__search", onKeyDown: (event) => handleSearchKeyDown(event), children: _jsx(Input, { size: "sm", type: "search", ariaLabel: searchName(), placeholder: props.searchPlaceholder || "Buscar ícone...", iconLeft: faMagnifyingGlass, value: query, disabled: props.disabled, onChange: (texto) => handleSearch(texto) }) })) : null, _jsx("span", { role: "status", "aria-live": "polite", className: "umds-icon-picker__sr", children: resultsText() }), hasResults() ? (_jsx("div", { role: "radiogroup", className: "umds-icon-picker__grid", ref: groupRef, "aria-label": groupAriaLabel(), "aria-labelledby": labelId(), style: gridStyle(), children: visibleItems()?.map((item, posicao) => (_jsx("button", { type: "button", role: "radio", "aria-checked": estaEscolhido(item) ? "true" : "false", "aria-label": item.label, title: item.label, disabled: props.disabled, tabIndex: tabIndexDe(posicao), onClick: (event) => escolher(item), onKeyDown: (event) => handleKeyDown(event, posicao), className: itemClasses(item), children: _jsx(Icon, { variant: "inherit", icon: item.icon, size: props.size === "sm" ? "sm" : "md" }) }, item.name))) })) : null, !hasResults() ? (_jsx("div", { className: "umds-icon-picker__empty", children: _jsx(Text, { as: "p", variant: "body2", color: "secondary", children: emptyMessage() }) })) : null] }));
+}
+export default IconPicker;