@nextelco/common-ui 2.1.103 → 2.1.105

package/dist/types/v1/components/tables/Table/Table.d.ts

@@ -0,0 +1,250 @@
+import React from 'react';
+import { type TableLabels } from './labels';
+export interface TableColumn<T> {
+    /** Identifica a coluna (ordenação, filtros, agrupamento, ordem). Única na tabela. */
+    key: string;
+    /** Título no cabeçalho. */
+    label: string;
+    /** O que a célula mostra. */
+    render: (row: T) => React.ReactNode;
+    /**
+     * O valor por trás da célula: é por ele que se ordena, filtra e agrupa. Sem
+     * ele a coluna não ordena, não filtra e não agrupa.
+     */
+    value?: (row: T) => string | number | null | undefined;
+    /** Por omissão `true` (quando há `value`). */
+    sortable?: boolean;
+    /** Por omissão `true` (quando há `value`). */
+    filterable?: boolean;
+    /**
+     * Como se filtra esta coluna:
+     *  - `text` (omissão): lista de valores únicos com vistos
+     *  - `date`: intervalo De/Até
+     *  - `number`: intervalo Mín/Máx, ou a lista de valores
+     *
+     * Numa coluna de dinheiro ou de contagem, a lista de valores é inútil: são
+     * centenas de números distintos, e ninguém procura "10.04".
+     */
+    filterType?: 'text' | 'date' | 'number';
+    /** Agrupar é opt-in: só com `true`. Evita agrupar por valores contínuos (datas, decimais, €). */
+    groupable?: boolean;
+    /**
+     * Filtros extra no cabeçalho desta coluna, cada um com o seu funil.
+     *
+     * Para uma coluna que mostra mais do que um dado — um "Início e Fim" mostra
+     * as duas pontas de um período, e um só filtro dava a lista dos PARES
+     * ("2026-07-03 → 2026-09-12"), que não é por onde alguém procura.
+     *
+     * `filterType: 'date'` dá-lhe o intervalo De/Até em vez da lista de valores.
+     */
+    extraFilters?: {
+        key: string;
+        label: string;
+        value: (row: T) => string | number | null | undefined;
+        filterType?: 'text' | 'date' | 'number';
+    }[];
+    headerClassName?: string;
+    cellClassName?: string;
+    /** Conteúdo extra por baixo do título da coluna (ex: um total). Recebe as linhas já filtradas. */
+    headerExtra?: (rows: T[]) => React.ReactNode;
+}
+/**
+ * Ordenação e filtros do cabeçalho vivem dentro da tabela. Quem está por fora
+ * (ex: exportar para Excel) precisa deles para não exportar linhas que a pessoa
+ * filtrou fora: daí este handle, preenchido em `viewRef`.
+ */
+export interface TableView<T> {
+    /** Aplica a ordenação e os filtros de coluna a qualquer lista (ex: o conjunto completo). */
+    apply: (rows: T[]) => T[];
+    /** O mesmo, com a ordenação e os filtros de `state` em vez dos do cabeçalho. */
+    applyWith: (rows: T[], state: TableState) => T[];
+    /** Linhas à vista, já ordenadas e filtradas (todas as páginas em modo cliente). */
+    rows: T[];
+    hasFilters: boolean;
+    /**
+     * Há filtros, ordenação ou agrupamento ativos no cabeçalho, todos do lado do
+     * cliente. Quem alimenta a tabela usa isto para não largar o conjunto
+     * completo: sem ele, filtrar só olha para a página.
+     */
+    needsAllData: boolean;
+    /** Estado guardável da vista: filtros, ordenação e agrupamento. */
+    getState: () => TableState;
+    /** Repõe um estado guardado (ex: ao aplicar uma vista que a pessoa guardou). */
+    restore: (state: TableState | undefined) => void;
+}
+/**
+ * O que uma vista guardada leva da tabela. Conjuntos viram arrays para se
+ * poder guardar em JSON.
+ */
+export interface TableState {
+    columnFilters?: Record<string, string[]>;
+    dateFilters?: Record<string, {
+        from?: string;
+        to?: string;
+    }>;
+    /** Intervalos Mín/Máx. */
+    numFilters?: Record<string, {
+        min?: string;
+        max?: string;
+    }>;
+    sortCol?: string | null;
+    sortDir?: 'asc' | 'desc';
+    /** Colunas por que se agrupa, pela ordem dos níveis. */
+    groupBy?: string[];
+}
+export interface TableProps<T> {
+    columns: TableColumn<T>[];
+    /** As linhas a mostrar (a página atual, quando quem alimenta a tabela pagina). */
+    data: T[];
+    /**
+     * O conjunto completo, para ordenar, filtrar e agrupar do lado do cliente.
+     * Pode chegar mais tarde: a tabela pede-o com `onAllDataNeeded`.
+     */
+    allData?: T[];
+    /** Linhas por página quando a tabela se pagina a si mesma (modo cliente). */
+    pageSize?: number;
+    rowKey: (row: T) => string;
+    onRowClick?: (row: T) => void;
+    /** Duplo clique na linha: atalho para o detalhe, sem roubar o clique simples (seleção, edição). */
+    onRowDoubleClick?: (row: T) => void;
+    loading?: boolean;
+    /** O conjunto completo (`allData`) está a carregar: ordenar, filtrar e agrupar esperam por ele. */
+    allDataLoading?: boolean;
+    loadingLabel?: string;
+    /** Sem linhas. Por omissão `labels.empty`. */
+    emptyLabel?: string;
+    emptySubLabel?: string;
+    /** Guarda os filtros na sessão do browser (`sessionStorage`) com esta chave, e repõe-nos ao voltar. */
+    storageKey?: string;
+    /** Caixa de seleção em cada linha. */
+    selectable?: boolean;
+    onSelectionChange?: (selectedKeys: Set<string>) => void;
+    /** Mudar este número limpa a seleção. */
+    clearSelectionTrigger?: number;
+    /** Chamado quando a tabela precisa do conjunto completo (ordenar, filtrar ou agrupar sem `allData`). */
+    onAllDataNeeded?: () => void;
+    /** Modo cliente sempre (paginação, ordenação e filtros sobre `allData`), mesmo sem interação. */
+    alwaysClient?: boolean;
+    /** Ordenação inicial: a coluna. */
+    defaultSortColumn?: string;
+    defaultSortDirection?: 'asc' | 'desc';
+    /** Recebe o estado da vista (ordenação e filtros) para uso por fora. Ver `TableView`. */
+    viewRef?: React.MutableRefObject<TableView<T> | null>;
+    /**
+     * A tabela ocupa a ALTURA TODA que o pai lhe der, em vez de encolher com o
+     * número de linhas. O cabeçalho fica fixo e só as linhas rolam.
+     *
+     * Sem isto, filtrar até sobrar uma linha encolhia a tabela, com meio ecrã em
+     * branco por baixo e o rodapé a meio da página.
+     *
+     * Precisa de um pai com altura DEFINIDA (ex: `flex-1 min-h-0` dentro de uma
+     * coluna de altura fixa). Para uma tabela pequena dentro de uma caixa, que
+     * deve encolher com o conteúdo, deixar desligado.
+     */
+    fillHeight?: boolean;
+    /** Sem `fillHeight`: altura máxima da caixa (ex: `400` ou `'60vh'`), a partir da qual as linhas rolam. */
+    maxHeight?: number | string;
+    /**
+     * Quantas linhas a tabela está MESMO a mostrar, e se os filtros do cabeçalho
+     * contam para isso.
+     *
+     * Uma contagem por fora (ex: o total que o servidor devolveu) não sabe dos
+     * filtros de coluna, que são cá de dentro: filtrar até sobrar uma linha
+     * deixava "14 223 resultados" por cima de uma lista de uma.
+     *
+     * `filtered: false` quer dizer "não contes comigo": não há filtros de coluna,
+     * ou o conjunto completo ainda não chegou.
+     *
+     * `selfPaginated`: com o conjunto completo, a tabela ignora a página que lhe
+     * dão e pagina-se a si mesma. Quem a alimenta deve então esconder a SUA
+     * paginação, que deixa de ter efeito.
+     */
+    onVisibleChange?: (v: {
+        visible: number;
+        filtered: boolean;
+        selfPaginated: boolean;
+    }) => void;
+    /**
+     * Quantas colunas do início ficam congeladas no scroll horizontal. A caixa de
+     * seleção, quando existe, vai junto.
+     */
+    frozenColumns?: number;
+    /**
+     * Arrastar os cabeçalhos para mudar a ordem das colunas. Opt-in: a tabela só
+     * avisa que coluna foi largada antes de qual. A ordem é de quem a alimenta,
+     * que a guarda e muda `columns`.
+     *
+     * `beforeKey: null` = largada depois da última. Esc durante o arrasto desfaz.
+     */
+    onMoveColumn?: (key: string, beforeKey: string | null) => void;
+    /**
+     * Com `fillHeight`: cada coluna fica com a largura do valor MAIS LARGO de
+     * todo o `allData` (ou do título, se for maior), e não com a da página à
+     * vista. Mudar de página ou filtrar não mexe nas larguras.
+     *
+     * Para conjuntos que já vêm inteiros: mede um exemplar de cada valor
+     * distinto de cada coluna.
+     */
+    measureAllData?: boolean;
+    /**
+     * Com `fillHeight`: barras de scroll desenhadas por cima das linhas, em vez
+     * das do browser. A vertical do browser obrigava o cabeçalho a reservar-lhe
+     * espaço; a horizontal punha uma faixa grossa por baixo das linhas.
+     */
+    overlayScrollbars?: boolean;
+    /** Classes da faixa dos títulos (com `onMoveColumn`). Por omissão `bg-slate-50`. */
+    headerRowClassName?: string;
+    /**
+     * Com `overlayScrollbars`: a barra horizontal centrada na aresta de baixo
+     * (meio por cima do que vem a seguir). Desligar quando a tabela vive numa
+     * caixa com `overflow-hidden`, senão a barra aparece cortada ao meio.
+     */
+    scrollbarOnEdge?: boolean;
+    /**
+     * Com `overlayScrollbars`: a barra horizontal numa faixa própria POR BAIXO
+     * das linhas (12px), em vez de por cima da última linha à vista.
+     */
+    horizontalScrollbarBelow?: boolean;
+    /**
+     * A carregar: linhas-esqueleto nas colunas verdadeiras em vez do spinner ao
+     * centro. O `loadingLabel` fica só para leitores de ecrã.
+     */
+    skeleton?: boolean;
+    /**
+     * Com mais colunas à direita do que cabem, a aresta direita esbate-se em vez
+     * de cortar as colunas a seco. Some ao chegar à última coluna.
+     */
+    fadeRight?: boolean;
+    /** Classes extra por linha (ex: uma cor por grupo de linhas). */
+    rowClassName?: (row: T) => string | undefined;
+    /** Textos da tabela e dos filtros. Por omissão em português. */
+    labels?: Partial<TableLabels>;
+}
+/**
+ * A barra de paginação em cima da tabela (a do `PaginatedTable`), em vez da
+ * troca de páginas no fundo. Interna: a app escolhe o `PaginatedTable`, não
+ * liga isto na `Table`.
+ */
+export interface PaginacaoNoTopo {
+    /** Total de linhas no servidor, quando é ele que pagina. */
+    total?: number;
+    /** Página atual do servidor (a contar de 1). Com `onPageChange`, é o servidor que pagina. */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Tamanhos de página à escolha. Sem isto não há escolha. */
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (pageSize: number) => void;
+}
+/** A tabela, com tudo. A `Table` e o `PaginatedTable` são predefinições dela. */
+export declare function TableBase<T>({ paginacaoNoTopo, columns: colunasBase, data, allData, pageSize, rowKey, onRowClick, onRowDoubleClick, loading: isLoading, allDataLoading: isAllDataLoading, loadingLabel, emptyLabel, emptySubLabel, storageKey, selectable, onSelectionChange, clearSelectionTrigger, onAllDataNeeded: onDataNeeded, alwaysClient, defaultSortColumn: defaultSortCol, defaultSortDirection: defaultSortDir, viewRef, fillHeight: preencheAltura, onVisibleChange: onVista, frozenColumns: colunasFixas, onMoveColumn: onMoverColuna, measureAllData: larguraPeloConjunto, overlayScrollbars: barraSobreposta, headerRowClassName: classeCabecalho, scrollbarOnEdge: barraNaBorda, horizontalScrollbarBelow: barraHorizontalFora, skeleton: esqueletoAoCarregar, fadeRight: esbaterDireita, rowClassName, maxHeight, labels, }: TableProps<T> & {
+    paginacaoNoTopo?: PaginacaoNoTopo;
+}): React.JSX.Element;
+/**
+ * Tabela com ordenação, filtros por coluna, agrupamento, seleção e colunas que
+ * se arrastam para mudar a ordem. Com o conjunto completo (`allData`) pagina-se
+ * a si mesma, com a troca de páginas no fundo.
+ *
+ * Para a paginação EM CIMA, com a contagem e o tamanho de página (uma lista de
+ * página inteira), ver o `PaginatedTable`.
+ */
+export default function Table<T>(props: TableProps<T>): React.JSX.Element;

package/dist/types/v1/components/tables/Table/labels.d.ts

@@ -0,0 +1,54 @@
+/** Os textos da tabela e dos filtros. Por omissão em português; a app troca os que quiser (ex: noutra língua). */
+export interface TableLabels {
+    /** Sem linhas para mostrar (quando não há `emptyLabel`). */
+    empty: string;
+    page: string;
+    /** Nome acessível da navegação entre páginas. */
+    pagination: string;
+    /** O nome das linhas na contagem (`PaginatedTable`), ex: "linhas", "ordens". */
+    rowsNoun: (count: number) => string;
+    /** Na contagem filtrada (`PaginatedTable`): "1 de 120 ordens". */
+    of: string;
+    /** Cada opção do tamanho de página (`PaginatedTable`). */
+    perPage: (size: number) => string;
+    /** Nome acessível da escolha do tamanho de página. */
+    pageSize: string;
+    prev: string;
+    next: string;
+    apply: string;
+    cancel: string;
+    search: string;
+    noResults: string;
+    clearFilter: string;
+    clearAll: string;
+    clearGroups: string;
+    /** O "+N" dos chips que não cabem na barra (`PaginatedTable`), para leitores de ecrã. */
+    moreChips: (count: number) => string;
+    /** O × de um chip de filtro ou agrupamento. */
+    removeChip: (chip: string) => string;
+    /** O rótulo do chip de um agrupamento, antes do nome da coluna. */
+    groupedBy: string;
+    selectAll: string;
+    selectAllFound: (count: number) => string;
+    /** Num chip de filtro com mais de dois valores escolhidos. */
+    selectedCount: (count: number) => string;
+    loadingOptions: string;
+    filterBy: (column: string) => string;
+    groupBy: (column: string) => string;
+    ungroupBy: (column: string) => string;
+    sortAsc: string;
+    sortDesc: string;
+    sortDateAsc: string;
+    sortDateDesc: string;
+    sortNumAsc: string;
+    sortNumDesc: string;
+    dateFrom: string;
+    dateTo: string;
+    min: string;
+    max: string;
+    /** Numa coluna de números: passar do intervalo para a lista de valores. */
+    showList: string;
+    /** Numa coluna de números: passar da lista de valores para o intervalo. */
+    showRange: string;
+}
+export declare const DEFAULT_TABLE_LABELS: TableLabels;

package/dist/types/v1/foundations/icons/icons.d.ts

@@ -8,6 +8,8 @@ export interface IconProps {
     /** Lado em px. */
     size?: number;
     className?: string;
+    /** Espessura do traço. Por omissão 1,8; mais grosso em ícones muito pequenos (ex: o visto de uma caixa). */
+    strokeWidth?: number;
 }
 /** Lido de um QR code. */
 export declare function QrCodeIcon(props: IconProps): React.JSX.Element;
@@ -22,3 +24,18 @@ export declare function InfoIcon(props: IconProps): React.JSX.Element;
 export declare function SearchIcon(props: IconProps): React.JSX.Element;
 export declare function CheckIcon(props: IconProps): React.JSX.Element;
 export declare function ChevronDownIcon(props: IconProps): React.JSX.Element;
+export declare function ChevronUpIcon(props: IconProps): React.JSX.Element;
+export declare function ChevronLeftIcon(props: IconProps): React.JSX.Element;
+export declare function ChevronRightIcon(props: IconProps): React.JSX.Element;
+/** Ordenável: ainda sem ordem escolhida. */
+export declare function ChevronsUpDownIcon(props: IconProps): React.JSX.Element;
+/** Filtro (funil). */
+export declare function FilterIcon(props: IconProps): React.JSX.Element;
+/** Fechar, remover (×). */
+export declare function CloseIcon(props: IconProps): React.JSX.Element;
+/** Agrupar (camadas). */
+export declare function LayersIcon(props: IconProps): React.JSX.Element;
+/** Lista de valores. */
+export declare function ListIcon(props: IconProps): React.JSX.Element;
+/** Intervalo (mínimo e máximo). */
+export declare function SlidersIcon(props: IconProps): React.JSX.Element;

package/dist/types/v1/index.d.ts

@@ -5,7 +5,7 @@ export type { PdfPreviewProps } from './primitives/documents/PdfPreview/PdfPrevi
 export { configurePdfWorker } from './primitives/documents/PdfPreview/pdfjs';
 export { scanQRCodes, configureQRScanner } from './capabilities/documents/QRScanning/scanQRCodes';
 export type { ScanQRCodesOptions } from './capabilities/documents/QRScanning/scanQRCodes';
-export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon } from './foundations/icons/icons';
+export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, FilterIcon, CloseIcon, LayersIcon, ListIcon, SlidersIcon, } from './foundations/icons/icons';
 export type { IconProps } from './foundations/icons/icons';
 export { default as TextInput } from './primitives/forms/TextInput/TextInput';
 export type { TextInputProps } from './primitives/forms/TextInput/TextInput';
@@ -13,6 +13,8 @@ export { default as SelectInput } from './primitives/forms/SelectInput/SelectInp
 export type { SelectInputProps } from './primitives/forms/SelectInput/SelectInput';
 export { default as TextArea } from './primitives/forms/TextArea/TextArea';
 export type { TextAreaProps } from './primitives/forms/TextArea/TextArea';
+export { default as Checkbox } from './primitives/forms/Checkbox/Checkbox';
+export type { CheckboxProps } from './primitives/forms/Checkbox/Checkbox';
 export { default as LookupInput } from './primitives/forms/LookupInput/LookupInput';
 export type { LookupInputProps } from './primitives/forms/LookupInput/LookupInput';
 export { default as FormGrid, FormDivider } from './components/forms/FormGrid/FormGrid';
@@ -23,3 +25,15 @@ export { default as Button } from './primitives/buttons/Button/Button';
 export type { ButtonProps } from './primitives/buttons/Button/Button';
 export { default as Dialog, useDialogContainer } from './components/overlays/Dialog/Dialog';
 export type { DialogProps } from './components/overlays/Dialog/Dialog';
+export { default as Table } from './components/tables/Table/Table';
+export type { TableProps, TableColumn, TableView, TableState } from './components/tables/Table/Table';
+export { default as PaginatedTable } from './components/tables/PaginatedTable/PaginatedTable';
+export type { PaginatedTableProps } from './components/tables/PaginatedTable/PaginatedTable';
+export { DEFAULT_TABLE_LABELS } from './components/tables/Table/labels';
+export type { TableLabels } from './components/tables/Table/labels';
+export { default as ListItem } from './primitives/lists/ListItem/ListItem';
+export type { ListItemProps, ListItemContent } from './primitives/lists/ListItem/ListItem';
+export { default as ListFinder } from './components/lists/ListFinder/ListFinder';
+export type { ListFinderProps } from './components/lists/ListFinder/ListFinder';
+export { DEFAULT_LIST_FINDER_LABELS } from './components/lists/ListFinder/labels';
+export type { ListFinderLabels } from './components/lists/ListFinder/labels';

package/dist/types/v1/primitives/forms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Marca a caixa a vermelho (ex: aceitar os termos, por marcar ao submeter). */
+    invalid?: boolean;
+}
+/**
+ * Caixa de marcar.
+ *
+ * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica
+ * ligada à etiqueta automaticamente. Fora dele, dar-lhe um `aria-label` ou
+ * envolvê-la num `<label>`: sozinha não tem nome para os leitores de ecrã.
+ *
+ * **Aceita os atributos HTML do [&lt;input type="checkbox"&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox)**, com o mesmo comportamento: `checked`/`defaultChecked`, `onChange`, `required`, `disabled`, `name`, `value`, `ref`, ...
+ * Só os próprios do V1 aparecem na tabela abaixo.
+ * Diferenças: o `className` aplica-se à caixa à volta; o `type` é sempre `checkbox`.
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/types/v1/primitives/lists/ListItem/ListCheckbox.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * A caixa de marcar das listas (ListItem e o "selecionar todos" do ListFinder),
+ * com o aspeto das caixas da Table. É um `<input type="checkbox">` a sério, para
+ * o teclado e os leitores de ecrã; o desenho é só por cima.
+ */
+export declare function ListCheckbox({ checked, indeterminate, onChange, label, className }: {
+    checked: boolean;
+    /** Algumas marcadas, não todas: a caixa fica a cinzento. */
+    indeterminate?: boolean;
+    onChange: (checked: boolean) => void;
+    label: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/types/v1/primitives/lists/ListItem/ListItem.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+/** O que se mostra num ListItem: o resto (ativo, marcado) é estado. */
+export interface ListItemContent {
+    /** A linha principal (ex: a descrição). Numa linha só, cortada com "…" se não couber. */
+    title: React.ReactNode;
+    /** Por cima do título, pequeno e em letra de máquina (ex: o número ou código). */
+    code?: React.ReactNode;
+    /** A primeira linha: etiquetas e avisos (ex: a categoria). */
+    badges?: React.ReactNode;
+    /** Por baixo do título: o resto do que se quer ver de relance (local, data, indicadores). */
+    meta?: React.ReactNode;
+}
+export interface ListItemProps extends ListItemContent {
+    /** O que está aberto ao lado (fica realçado). */
+    active?: boolean;
+    /** Ao clicar (ou Enter/Espaço com o foco nele): normalmente, abri-lo. */
+    onClick?: () => void;
+    /** Marcado. Só há caixa de marcar se vier com `onCheckedChange`. */
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** O nome da caixa de marcar, para leitores de ecrã (ex: "Marcar P-020000"). */
+    checkboxLabel?: string;
+    className?: string;
+}
+/**
+ * Uma linha de uma lista para escolher: o cartão das listas do
+ * [ListFinder](?path=/docs/v1-components-lists-listfinder--docs).
+ *
+ * Não sabe o que mostra: a app dá as partes (etiquetas, código, título,
+ * detalhes) e o ListItem arruma-as sempre da mesma forma. Com
+ * `onCheckedChange` leva uma caixa à esquerda, para marcar vários.
+ *
+ * É um `<li>`: vai dentro de um `<ul>`.
+ */
+export default function ListItem({ title, code, badges, meta, active, onClick, checked, onCheckedChange, checkboxLabel, className, }: ListItemProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextelco/common-ui",
-  "version": "2.1.103",
+  "version": "2.1.105",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "prebuild": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
-    "build": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json && tailwindcss -i src/styles/tailwind.css -o dist/style.css --minify && tailwindcss -i src/styles/tailwind.layered.css -o dist/style.layered.css --minify && node scripts/css-components-layer.mjs",
+    "build": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json && tailwindcss -i src/styles/tailwind.css -o dist/style.css --minify && tailwindcss -i src/styles/tailwind.layered.css -o dist/style.layered.css --minify && node scripts/css-components-layer.mjs && node scripts/extrair-imagens-css.mjs && node scripts/gerar-tema.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "pub": "git add . && git commit -m \"update\" && git push && npm test && npm version patch && npm run build && npm publish",