@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/DataTable/DataTable.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './DataTable.css';
+import * as React from "react";
 import { faSort, faSortUp, faSortDown, faInbox, } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Checkbox from "../Checkbox/Checkbox";
@@ -11,7 +12,7 @@ function DataTable(props) {
     function rows() {
         return props.data || [];
     }
-    function selected() {
+    function selectedIndexes() {
         return props.selectedRows || [];
     }
     function selectedKeysList() {
@@ -20,9 +21,16 @@ function DataTable(props) {
     function usesKeys() {
         return !!props.rowKey;
     }
+    function isDocument() {
+        return props.variant === "document";
+    }
+    function canSelect() {
+        return !!props.selectable && props.variant !== "document";
+    }
     function tableClasses() {
         return [
             "umds-datatable",
+            props.variant === "document" ? "umds-datatable--document" : "",
             props.density === "compact" ? "umds-datatable--compact" : "",
             props.className,
         ]
@@ -43,8 +51,31 @@ function DataTable(props) {
     function hasRows() {
         return !props.loading && rows().length > 0;
     }
+    function groupOf(row, index) {
+        if (!props.rowGroup)
+            return "";
+        const bruto = typeof props.rowGroup === "function"
+            ? props.rowGroup(row, index)
+            : row[props.rowGroup];
+        return bruto === undefined || bruto === null ? "" : String(bruto);
+    }
+    function newGroupLabel(index) {
+        if (!props.rowGroup)
+            return "";
+        const atual = groupOf(rows()[index], index);
+        if (!atual)
+            return "";
+        if (index === 0)
+            return atual;
+        return groupOf(rows()[index - 1], index - 1) === atual ? "" : atual;
+    }
+    function groupContent(label, row, index) {
+        if (props.renderRowGroup)
+            return props.renderRowGroup(label, row, index);
+        return label;
+    }
     function colSpan() {
-        return columnsList().length + (props.selectable ? 1 : 0);
+        return columnsList().length + (canSelect() ? 1 : 0);
     }
     function rowKeyOf(row, index) {
         if (typeof props.rowKey === "function")
@@ -59,17 +90,17 @@ function DataTable(props) {
         if (usesKeys()) {
             return rows().every((row, i) => selectedKeysList().includes(rowKeyOf(row, i)));
         }
-        return selected().length === rows().length;
+        return selectedIndexes().length === rows().length;
     }
     function someSelected() {
         if (usesKeys()) {
             return (!allSelected() &&
                 rows().some((row, i) => selectedKeysList().includes(rowKeyOf(row, i))));
         }
-        return selected().length > 0 && !allSelected();
+        return selectedIndexes().length > 0 && !allSelected();
     }
     function handleSort(col) {
-        if (!col.sortable)
+        if (!col.sortable || props.variant === "document")
             return;
         const dir = props.sortKey === col.key && props.sortDirection === "asc"
             ? "desc"
@@ -110,7 +141,7 @@ function DataTable(props) {
             const nextKeys = current.includes(key)
                 ? current.filter((k) => k !== key)
                 : [...current, key];
-            const currentIdx = selected();
+            const currentIdx = selectedIndexes();
             const nextIdx = currentIdx.includes(index)
                 ? currentIdx.filter((i) => i !== index)
                 : [...currentIdx, index];
@@ -119,7 +150,7 @@ function DataTable(props) {
         }
         if (!props.onSelect)
             return;
-        const current = selected();
+        const current = selectedIndexes();
         const next = current.includes(index)
             ? current.filter((i) => i !== index)
             : [...current, index];
@@ -129,7 +160,7 @@ function DataTable(props) {
         if (usesKeys()) {
             return selectedKeysList().includes(rowKeyOf(row, index));
         }
-        return selected().includes(index);
+        return selectedIndexes().includes(index);
     }
     function cellContent(col, row, rowIndex) {
         if (col.render)
@@ -137,11 +168,13 @@ function DataTable(props) {
         return row[col.key];
     }
     function handleRowClick(rowIndex, row) {
+        if (props.variant === "document")
+            return;
         if (props.onRowClick)
             props.onRowClick(rowIndex, row);
     }
     function aoTeclarNaLinha(rowIndex, row, event) {
-        if (!props.onRowClick || !event)
+        if (!props.onRowClick || props.variant === "document" || !event)
             return;
         // Só a própria linha aciona. Sem esta guarda, o Espaço dentro do
         // checkbox de seleção era engolido pelo preventDefault abaixo e a
@@ -157,7 +190,7 @@ function DataTable(props) {
         handleRowClick(rowIndex, row);
     }
     function rowTabIndex() {
-        return props.onRowClick ? 0 : undefined;
+        return props.onRowClick && props.variant !== "document" ? 0 : undefined;
     }
     function rowRole() {
         return undefined;
@@ -170,14 +203,20 @@ function DataTable(props) {
     function thClasses(col) {
         return [
             "umds-datatable__th",
-            col.sortable ? "umds-datatable__th--sortable" : "",
-            props.sortKey === col.key ? "umds-datatable__th--sorted" : "",
+            col.sortable && props.variant !== "document"
+                ? "umds-datatable__th--sortable"
+                : "",
+            props.sortKey === col.key && props.variant !== "document"
+                ? "umds-datatable__th--sorted"
+                : "",
             col.align ? `umds-datatable__th--${col.align}` : "",
         ]
             .filter(Boolean)
             .join(" ");
     }
     function ariaSort(col) {
+        if (props.variant === "document")
+            return undefined;
         if (props.sortKey !== col.key)
             return "none";
         return props.sortDirection === "asc" ? "ascending" : "descending";
@@ -195,6 +234,9 @@ function DataTable(props) {
             return faSort;
         return props.sortDirection === "desc" ? faSortDown : faSortUp;
     }
+    function sortableCol(col) {
+        return !!col.sortable && props.variant !== "document";
+    }
     function tdClasses(col) {
         return [
             "umds-datatable__td",
@@ -207,15 +249,17 @@ function DataTable(props) {
         return [
             "umds-datatable__row",
             isSelected(row, rowIdx) ? "umds-datatable__row--selected" : "",
-            props.onRowClick ? "umds-datatable__row--clickable" : "",
+            props.onRowClick && props.variant !== "document"
+                ? "umds-datatable__row--clickable"
+                : "",
         ]
             .filter(Boolean)
             .join(" ");
     }
-    return (_jsx("div", { className: tableClasses(), children: _jsxs("table", { className: "umds-datatable__table", "aria-busy": props.loading, children: [_jsx("thead", { className: "umds-datatable__thead", children: _jsxs("tr", { children: [props.selectable ? (_jsx("th", { scope: "col", className: "umds-datatable__th umds-datatable__th--checkbox", children: _jsx(Checkbox, { checked: allSelected(), indeterminate: someSelected(), ariaLabel: props.selectAllLabel || "Selecionar todas as linhas", onChange: (event) => toggleAll() }) })) : null, columnsList()?.map((col) => (_jsxs("th", { scope: "col", style: col.width
+    return (_jsx("div", { className: tableClasses(), children: _jsxs("table", { className: "umds-datatable__table", "aria-busy": props.loading, children: [_jsx("thead", { className: "umds-datatable__thead", children: _jsxs("tr", { children: [canSelect() ? (_jsx("th", { scope: "col", className: "umds-datatable__th umds-datatable__th--checkbox", children: _jsx(Checkbox, { checked: allSelected(), indeterminate: someSelected(), ariaLabel: props.selectAllLabel || "Selecionar todas as linhas", onChange: (event) => toggleAll() }) })) : null, columnsList()?.map((col) => (_jsxs("th", { scope: "col", style: col.width
                                     ? {
                                         width: col.width,
                                     }
-                                    : {}, "aria-sort": ariaSort(col), className: thClasses(col), children: [col.sortable ? (_jsxs("button", { type: "button", className: "umds-datatable__sort-button umds-datatable__th-content", onClick: (event) => handleSort(col), children: [col.label, _jsx("span", { "aria-hidden": "true", className: sortIconClasses(col), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: sortIconName(col) }) })] })) : null, !col.sortable ? (_jsx("span", { className: "umds-datatable__th-content", children: col.label })) : null] }, col.key)))] }) }), _jsxs("tbody", { className: "umds-datatable__tbody", children: [props.loading ? (_jsx(_Fragment, { children: skeletonRowsList()?.map((_, rowIdx) => (_jsxs("tr", { className: "umds-datatable__row umds-datatable__row--skeleton", children: [props.selectable ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", children: _jsx("div", { className: "umds-datatable__skeleton umds-datatable__skeleton--checkbox" }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: "umds-datatable__td", children: _jsx("div", { className: "umds-datatable__skeleton" }) }, col.key)))] }, `sk-${rowIdx}`))) })) : null, isEmpty() ? (_jsx("tr", { className: "umds-datatable__row--empty", children: _jsx("td", { className: "umds-datatable__td umds-datatable__td--empty", colSpan: colSpan(), children: _jsxs("div", { className: "umds-datatable__empty", children: [_jsx("span", { "aria-hidden": "true", className: "umds-datatable__empty-icon", children: _jsx(Icon, { variant: "inherit", customSize: "48px", icon: faInbox }) }), _jsx("span", { children: props.emptyMessage || "Nenhum registro encontrado" })] }) }) })) : null, hasRows() ? (_jsx(_Fragment, { children: rows()?.map((row, rowIdx) => (_jsxs("tr", { onClick: (event) => handleRowClick(rowIdx, row), onKeyDown: (event) => aoTeclarNaLinha(rowIdx, row, event), tabIndex: rowTabIndex(), role: rowRole(), className: rowClasses(row, rowIdx), children: [props.selectable ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: isSelected(row, rowIdx), ariaLabel: rowSelectLabel(rowIdx), onChange: (event) => toggleRow(row, rowIdx) }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: tdClasses(col), children: cellContent(col, row, rowIdx) }, col.key)))] }, rowIdx))) })) : null] })] }) }));
+                                    : {}, "aria-sort": ariaSort(col), className: thClasses(col), children: [sortableCol(col) ? (_jsxs("button", { type: "button", className: "umds-datatable__sort-button umds-datatable__th-content", onClick: (event) => handleSort(col), children: [col.label, _jsx("span", { "aria-hidden": "true", className: sortIconClasses(col), children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: sortIconName(col) }) })] })) : null, !sortableCol(col) ? (_jsx("span", { className: "umds-datatable__th-content", children: col.label })) : null] }, col.key)))] }) }), _jsxs("tbody", { className: "umds-datatable__tbody", children: [props.loading ? (_jsx(_Fragment, { children: skeletonRowsList()?.map((_, rowIdx) => (_jsxs("tr", { className: "umds-datatable__row umds-datatable__row--skeleton", children: [canSelect() ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", children: _jsx("div", { className: "umds-datatable__skeleton umds-datatable__skeleton--checkbox" }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: "umds-datatable__td", children: _jsx("div", { className: "umds-datatable__skeleton" }) }, col.key)))] }, `sk-${rowIdx}`))) })) : null, isEmpty() ? (_jsx("tr", { className: "umds-datatable__row--empty", children: _jsx("td", { className: "umds-datatable__td umds-datatable__td--empty", colSpan: colSpan(), children: _jsxs("div", { className: "umds-datatable__empty", children: [_jsx("span", { "aria-hidden": "true", className: "umds-datatable__empty-icon", children: _jsx(Icon, { variant: "inherit", customSize: "48px", icon: faInbox }) }), _jsx("span", { children: props.emptyMessage || "Nenhum registro encontrado" })] }) }) })) : null, hasRows() ? (_jsx(_Fragment, { children: rows()?.map((row, rowIdx) => (_jsxs(React.Fragment, { children: [newGroupLabel(rowIdx) ? (_jsx("tr", { className: "umds-datatable__row umds-datatable__row--group", children: _jsx("th", { scope: "rowgroup", className: "umds-datatable__group", colSpan: colSpan(), children: groupContent(newGroupLabel(rowIdx), row, rowIdx) }) })) : null, _jsxs("tr", { onClick: (event) => handleRowClick(rowIdx, row), onKeyDown: (event) => aoTeclarNaLinha(rowIdx, row, event), tabIndex: rowTabIndex(), role: rowRole(), className: rowClasses(row, rowIdx), children: [canSelect() ? (_jsx("td", { className: "umds-datatable__td umds-datatable__td--checkbox", onClick: (event) => event.stopPropagation(), children: _jsx(Checkbox, { checked: isSelected(row, rowIdx), ariaLabel: rowSelectLabel(rowIdx), onChange: (event) => toggleRow(row, rowIdx) }) })) : null, columnsList()?.map((col) => (_jsx("td", { className: tdClasses(col), children: cellContent(col, row, rowIdx) }, col.key)))] })] }, rowIdx))) })) : null] })] }) }));
 }
 export default DataTable;

package/dist/components/DatePicker/DatePicker.css

@@ -156,6 +156,14 @@
   background-color: var(--umds-semantic-field-readonly-background);
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e o WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-datepicker--readonly .umds-datepicker__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Wrapper flutuante (Portal no body; posicionado pelo floating-ui via style inline) ── */
 .umds-datepicker__floating {
   display: block;

package/dist/components/DatePicker/DatePicker.js

@@ -34,14 +34,21 @@ function DatePicker(props) {
     const [viewYear, setViewYear] = useState(() => 0);
     const [viewMonth, setViewMonth] = useState(() => 0);
     const [uid, setUid] = useState(() => "umds-datepicker-" + Math.random().toString(36).slice(2, 9));
-    const [internalFrom, setInternalFrom] = useState(() => (props.defaultRange && props.defaultRange.from) || "");
+    const [internalFrom, setInternalFrom] = useState(() => props.mode !== "range" && props.defaultValue
+        ? props.defaultValue
+        : (props.defaultRange && props.defaultRange.from) || "");
     const [internalTo, setInternalTo] = useState(() => (props.defaultRange && props.defaultRange.to) || "");
     const [hoverIso, setHoverIso] = useState(() => "");
     const [focusedIso, setFocusedIso] = useState(() => "");
     function currentFrom() {
+        if (props.mode !== "range" && props.value !== undefined) {
+            return props.value || "";
+        }
         return props.range !== undefined ? props.range.from || "" : internalFrom;
     }
     function currentTo() {
+        if (props.mode !== "range" && props.value !== undefined)
+            return "";
         return props.range !== undefined ? props.range.to || "" : internalTo;
     }
     function monthNames() {
@@ -491,6 +498,8 @@ function DatePicker(props) {
     }
     function handleKeydown(event) {
         if (event && event.key === "Escape" && open) {
+            // O Esc é do calendário (fecha só ele): o Modal em volta não reage.
+            event.preventDefault();
             closeCalendar();
         }
     }

package/dist/components/DescriptionList/DescriptionList.css

@@ -0,0 +1,113 @@
+/* ─────────────────────────────────────────────
+   DESCRIPTION LIST
+   Pares rótulo/valor de um documento, em <dl>.
+
+   inline:  grade de bordas finas, rótulo pintado à esquerda, sem cabeçalho.
+            As linhas viram `display: contents` para as duas colunas alinharem
+            entre todos os pares; as bordas são as linhas de 1px que a grade
+            deixa entre as células (o fundo da lista é a cor da borda).
+   stacked: rótulo pequeno em cima, valor embaixo, em até 4 colunas.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-description-list {
+  margin: 0;
+  padding: 0;
+  font-family: var(--umds-semantic-font-family-base);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-description-list__term,
+.umds-description-list__description {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+/* ── inline ── */
+.umds-description-list--inline {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--umds-primitive-border-width-hairline);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  background: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-description-list--inline.umds-description-list--fit {
+  display: inline-grid;
+}
+
+.umds-description-list--inline .umds-description-list__item {
+  display: contents;
+}
+
+.umds-description-list--inline .umds-description-list__term,
+.umds-description-list--inline .umds-description-list__description {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+}
+
+/* O rótulo é a coluna pintada: sem negrito e sem quebra. */
+.umds-description-list--inline .umds-description-list__term {
+  background: var(--umds-semantic-color-background-light);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font-weight: var(--umds-primitive-font-weight-regular);
+  white-space: nowrap;
+}
+
+.umds-description-list--inline .umds-description-list__description {
+  background: var(--umds-semantic-color-background-white);
+}
+
+/* ── stacked ── */
+.umds-description-list--stacked {
+  display: grid;
+  gap: var(--umds-primitive-spacing-xxxs); /* 16px */
+}
+
+.umds-description-list--cols-1 { grid-template-columns: minmax(0, 1fr); }
+.umds-description-list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.umds-description-list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.umds-description-list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+.umds-description-list--stacked .umds-description-list__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  min-width: 0;
+}
+
+.umds-description-list--stacked .umds-description-list__term {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-description-list--bordered .umds-description-list__description {
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-mini); /* 8px 12px */
+  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-field-readonly-background);
+}
+
+/* Telas estreitas: o stacked vira uma coluna só. */
+@media (max-width: 640px) {
+  .umds-description-list--cols-2,
+  .umds-description-list--cols-3,
+  .umds-description-list--cols-4 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* ── Impressão: o par não é cortado entre duas páginas e a cor do rótulo sai ── */
+@media print {
+  .umds-description-list {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .umds-description-list__item {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}

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

@@ -0,0 +1,59 @@
+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 {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;
+    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,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/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;