@aspprev/versi-ds 0.4.9 → 0.5.3

package/README.md

@@ -32,6 +32,42 @@ import "@aspprev/versi-ds/styles.css";
 import "@aspprev/versi-ds/themes.css";
 ```
 
+### InfoGrid em aplicações com Tailwind
+
+O layout de `InfoGrid` vem pronto em `@aspprev/versi-ds/styles.css`. Não é
+necessário incluir o pacote no `content` do Tailwind, usar `safelist` ou repetir
+classes responsivas no consumidor. Os breakpoints do componente são fixos:
+
+| `columns` | abaixo de 640px | a partir de 640px | a partir de 1024px | a partir de 1440px |
+| --- | --- | --- | --- | --- |
+| 1 | 1 | 1 | 1 | 1 |
+| 2 | 1 | 2 | 2 | 2 |
+| 3 (padrão) | 1 | 2 | 3 | 3 |
+| 4 | 1 | 2 | 2 | 4 |
+| 6 | 1 | 2 | 3 | 6 |
+
+As regras próprias `versi-info-grid*` usam `:where()` para permitir customização
+por `className`, inclusive `grid-cols-*` e variantes responsivas, independentemente
+da ordem entre o CSS do DS e as utilities do Tailwind 3 do consumidor. Para usar
+nomes como `mobile:`, `tablet:` e `desktop:` nas suas customizações, configure
+esses nomes no Tailwind da aplicação (640px, 1024px e 1440px, respectivamente).
+Classes personalizadas devem estar nos arquivos cobertos pelo `content` do consumidor.
+
+A implementação anterior compartilhava classes de colunas com o consumidor.
+Quando o CSS do consumidor vinha depois e gerava `tablet:grid-cols-3`, mas não
+`desktop:grid-cols-6`, a regra de tablet também se aplicava em desktop e vencia
+pela ordem de declaração e mesma especificidade. A geração da regra de desktop
+no pacote estava correta. Agora o layout usa seletores próprios, sem depender
+da geração parcial de utilities. Após atualizar o JS **e** o CSS do pacote,
+o contorno `className="tablet:grid-cols-3 desktop:grid-cols-6"` pode ser removido
+do portal: `<InfoGrid columns={6}>` é suficiente.
+
+Validação de navegador do artefato npm: `npm run test:info-grid-consumer`
+(requer Chromium instalado com `npx playwright install chromium`). O teste
+empacota e extrai o DS em um consumidor, gera Tailwind somente a partir do
+`src` desse consumidor e verifica `grid-template-columns` nas duas ordens de CSS,
+sem Tailwind adicional e com customização explícita por `className`.
+
 Use componentes pela raiz ou por um entrypoint público:
 
 ```tsx
@@ -95,9 +131,9 @@ import {
 - `validateFiles` retorna `code`, nome, extensão, tamanho e limite da rejeição e aceita mensagens por código; `FileViewer` também aceita `Promise<FileViewerSource>` como source.
 - Upload e `FileViewer` são controlados pelo consumidor; transporte, autenticação, persistência e download não fazem parte do pacote.
 - `DatePicker` aceita `selectionMode="year"` e mantém `selectionMode="day"` como padrão.
-- `DomainStatusBadge` aceita `statusMap` para vocabulário específico do produto.
+- `StatusBadge` oferece as cores `primary`, `blue`, `green`, `orange`, `yellow`, `red`, `slate` e `black` nas aparências `solid`, `soft` e `outline`. `DomainStatusBadge` aceita um `statusMap` definido pelo consumidor; o DS não associa nomes de status a cores.
 - `Table` preserva os modos `fit`, `adaptive` e `scroll`; filtros e paginação respondem ao espaço do container.
-- `InputPhone`/`PhoneInput` e `SelectCountry` aceitam `showFlags`; o padrão é `true` e `showFlags={false}` remove a bandeira sem reservar espaço.
+- `InputPhone`/`PhoneInput` e `SelectCountry`/`CountrySelect` aceitam `showFlags` (padrão: `true`); `showFlags={false}` oculta somente a bandeira do campo, sem reservar espaço. A lista de países sempre mantém as bandeiras.
 - Os controles de formulário ocupam a largura disponível do container; `className="w-full"` pode ser usado em grids, flex containers e colunas responsivas.
 
 Consulte [`docs/API-NOVOS-COMPONENTES.md`](docs/API-NOVOS-COMPONENTES.md) e o Storybook para exemplos completos, estados de erro/carregamento e contratos de acessibilidade.
@@ -192,6 +228,14 @@ npm run prepack
 
 O script `prepack` valida tokens, governança, segurança, lint, TypeScript, build, tamanho e conteúdo do pacote.
 
+Os workflows compartilham as validações de segurança, pacote e consumidores.
+Consulte [segurança do build e compatibilidade](docs/SEGURANCA-BUILD-COMPATIBILIDADE.md)
+para a correção local de build que preserva o suporte aos navegadores atuais.
+`npm run check:security` audita DS e piloto nos escopos completo e de produção,
+verifica a mitigação instalada e salva relatórios em `test-results/security`.
+`npm run check:release -- vX.Y.Z` confere a tag candidata contra os manifestos;
+no CI de publicação, a tag é obtida do evento do GitHub.
+
 Para testar o exemplo integrado:
 
 ```bash

package/dist/{chunk-47GMEVB5.js → chunk-2CPV3WH5.js}

@@ -7,7 +7,7 @@ import {
   COUNTRY_OPTIONS,
   PHONE_COUNTRY_OPTIONS,
   filterCountryOptions
-} from "./chunk-7IY43S3Y.js";
+} from "./chunk-IS7ACRMB.js";
 
 // src/components/input/Input.tsx
 import React, { useRef, useCallback, useId, useState } from "react";
@@ -1071,6 +1071,8 @@ var InputSelect = ({
   onChange,
   ...rest
 }) => {
+  void suffix;
+  void error;
   const isSearchable = searchable ?? options.length > 10;
   const normalizeSearchText2 = (value) => value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
   const [field, meta, helpers] = useField2(name);
@@ -2222,7 +2224,7 @@ function InputPhone({
                         },
                         className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-focus-ring",
                         children: [
-                          renderFlag(country, showFlags),
+                          renderFlag(country, true),
                           /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-field-content", children: country.label }),
                           /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-content-muted", children: country.idd.display })
                         ]
@@ -3394,7 +3396,7 @@ function SelectCountry({
       searchable,
       searchPlaceholder,
       noOptionsText,
-      renderOption: (option) => renderCountryContent(option, void 0, showFlags),
+      renderOption: (option) => renderCountryContent(option),
       renderValue: (option, placeholder) => renderCountryContent(
         option,
         placeholder,
@@ -3810,4 +3812,4 @@ export {
   RadioCardGroup,
   OtpCodeInput_default
 };
-//# sourceMappingURL=chunk-47GMEVB5.js.map
+//# sourceMappingURL=chunk-2CPV3WH5.js.map