@aspprev/versi-ds 0.5.0 → 0.5.4

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
@@ -97,7 +133,7 @@ import {
 - `DatePicker` aceita `selectionMode="year"` e mantém `selectionMode="day"` como padrão.
 - `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-5Q7V22OH.js → chunk-2KJU6VM4.js}

@@ -289,11 +289,12 @@ var Divider = ({
   height = "h-[1px]",
   children,
   bgColor = "black",
+  className,
   ...rest
 }) => {
   const colorClass = colorClassMap[bgColor];
   const barClass = classNames(children ? "w-1/3" : "w-1/2", height, colorClass);
-  return /* @__PURE__ */ jsxs3("div", { className: classNames(width, "flex items-center justify-center"), children: [
+  return /* @__PURE__ */ jsxs3("div", { ...rest, className: classNames(width, "flex items-center justify-center", className), children: [
     /* @__PURE__ */ jsx4("div", { className: barClass }),
     children && /* @__PURE__ */ jsxs3("div", { className: "px-3", children: [
       children,
@@ -621,7 +622,7 @@ var avatarSizeMap = {
 };
 function Inicials(name) {
   const nome = name;
-  if (!!nome) {
+  if (nome) {
     const array = nome.split(" ");
     const primeiraLetra = nome.charAt(0);
     const posicaoUltimoEspaco = nome.lastIndexOf(" ");
@@ -645,7 +646,7 @@ var Avatar = ({
   ...rest
 }) => {
   const avatarSizeClass = avatarSizeMap[size];
-  const avatarComponent = image ? /* @__PURE__ */ jsx11(AvatarImage_default, { src: image, altDescription: description }) : !!name ? /* @__PURE__ */ jsx11(
+  const avatarComponent = image ? /* @__PURE__ */ jsx11(AvatarImage_default, { src: image, altDescription: description }) : name ? /* @__PURE__ */ jsx11(
     "span",
     {
       className: classNames5(
@@ -888,10 +889,10 @@ function PageButtons(props) {
   const { currentPage, totalResults, perPage, onClick, size } = props;
   const pages = Math.max(1, Math.ceil(totalResults / perPage));
   const sizeClasses = PAGINATION_SIZE_CLASSES[size];
-  let pagesAfter = pages - currentPage > 2 ? 2 : pages - currentPage;
-  let pagesBefore = currentPage > 2 ? 2 : currentPage === 2 ? 1 : 0;
+  const pagesAfter = pages - currentPage > 2 ? 2 : pages - currentPage;
+  const pagesBefore = currentPage > 2 ? 2 : currentPage === 2 ? 1 : 0;
   let buttonsBefore = [];
-  let buttonsAfter = [];
+  const buttonsAfter = [];
   for (let i = 1; i <= pagesBefore; i++) {
     const page = currentPage - i;
     buttonsBefore = [
@@ -1070,7 +1071,7 @@ function Checkbox({
   layout = "row",
   ...props
 }) {
-  let containerClass = "";
+  let containerClass;
   if (layout === "col") {
     containerClass = "flex flex-col gap-y-3 mt-3";
   } else if (layout === "grid-2") {
@@ -1081,7 +1082,7 @@ function Checkbox({
   return /* @__PURE__ */ jsx18("div", { className: containerClass, children: options.map((option) => /* @__PURE__ */ jsxs10(
     "label",
     {
-      className: "mr-6 flex min-h-7 cursor-pointer items-center gap-2",
+      className: `mr-6 flex min-h-7 items-center gap-2 ${props.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
       children: [
         /* @__PURE__ */ jsx18(
           "input",
@@ -1094,7 +1095,7 @@ function Checkbox({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx18("span", { className: "text-content-secondary", children: option.label })
+        /* @__PURE__ */ jsx18("span", { className: props.disabled ? "text-field-content-disabled" : "text-content-secondary", children: option.label })
       ]
     },
     option.value
@@ -1402,15 +1403,12 @@ var InputSlider = ({
   prefix,
   suffix,
   sufix,
-  marks,
-  valueLabelDisplay = "auto",
   showLabel = false,
   disabled = false,
   inputDisabled = false,
   valueFormmated,
   showInput = false,
-  ariaLabel,
-  ...rest
+  ariaLabel
 }) => {
   const [value, setValue] = useState2(initialValue);
   const resolvedSuffix = suffix ?? sufix;
@@ -1421,7 +1419,7 @@ var InputSlider = ({
       const parsedValue = Number(newValue);
       setValue(parsedValue);
     },
-    [functionChange]
+    []
   );
   const handleInputChange = useCallback2(
     (event) => {
@@ -1448,7 +1446,7 @@ var InputSlider = ({
     /* @__PURE__ */ jsx20(
       "input",
       {
-        className: "w-full range pr-6 accent-primary-1",
+        className: "w-full range pr-6 accent-primary-1 disabled:cursor-not-allowed disabled:accent-field-content-disabled",
         type: "range",
         name,
         id: name,
@@ -1465,7 +1463,7 @@ var InputSlider = ({
       "input",
       {
         id: valueInputId,
-        className: "min-w-0",
+        className: "min-w-0 disabled:cursor-not-allowed disabled:text-field-content-disabled",
         value: inputDisabled ? "-" : value,
         onChange: handleInputChange,
         onBlur: handleBlur,
@@ -1477,7 +1475,7 @@ var InputSlider = ({
         disabled: disabled || inputDisabled
       }
     ),
-    (showLabel || prefix || resolvedSuffix || valueFormmated) && /* @__PURE__ */ jsxs12("span", { className: "shrink-0 text-sm text-content-secondary", children: [
+    (showLabel || prefix || resolvedSuffix || valueFormmated) && /* @__PURE__ */ jsxs12("span", { className: `shrink-0 text-sm ${disabled ? "text-field-content-disabled" : "text-content-secondary"}`, children: [
       prefix,
       valueFormmated ?? value,
       resolvedSuffix
@@ -1696,18 +1694,18 @@ function resolveOptionalValue(value, options = {}) {
 // src/components/info-grid/InfoGrid.tsx
 import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var COLUMN_STYLES2 = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 mobile:grid-cols-2",
-  3: "grid-cols-1 mobile:grid-cols-2 tablet:grid-cols-3",
-  4: "grid-cols-1 mobile:grid-cols-2 desktop:grid-cols-4",
-  6: "grid-cols-1 mobile:grid-cols-2 tablet:grid-cols-3 desktop:grid-cols-6"
+  1: "versi-info-grid--1",
+  2: "versi-info-grid--2",
+  3: "versi-info-grid--3",
+  4: "versi-info-grid--4",
+  6: "versi-info-grid--6"
 };
 function InfoGrid({ columns = 3, className, ...rest }) {
   return /* @__PURE__ */ jsx25(
     "dl",
     {
       className: classNames10(
-        "grid gap-x-8 gap-y-5",
+        "versi-info-grid grid gap-x-8 gap-y-5",
         COLUMN_STYLES2[columns],
         className
       ),
@@ -2022,7 +2020,6 @@ function FormErrorNavigation() {
       cleanupPendingNavigation?.();
       const form = event.target;
       let handled = false;
-      let observer;
       const timers = [];
       const cleanup = () => {
         observer?.disconnect();
@@ -2036,7 +2033,7 @@ function FormErrorNavigation() {
         cleanup();
         navigateToInvalidField(field);
       };
-      observer = new MutationObserver(tryNavigate);
+      const observer = new MutationObserver(tryNavigate);
       observer.observe(form, {
         attributeFilter: ["aria-invalid"],
         attributes: true,
@@ -3214,15 +3211,13 @@ function resolveContainerBreakpoint(width, breakpoints = defaultContainerBreakpo
   );
 }
 function getBreakpointMapKey(breakpoints) {
-  return Object.entries(breakpoints).sort(([first], [second]) => first.localeCompare(second)).map(([name, threshold]) => `${name}:${threshold}`).join("|");
+  return JSON.stringify(Object.entries(breakpoints).sort(([, first], [, second]) => first - second));
 }
 function useContainerBreakpoint(ref, options = {}) {
   const thresholds = options.breakpoints ?? defaultContainerBreakpoints;
   const thresholdsKey = getBreakpointMapKey(thresholds);
   const sortedThresholds = useMemo4(
-    () => Object.entries(thresholds).sort(
-      ([, first], [, second]) => first === second ? 0 : first - second
-    ),
+    () => JSON.parse(thresholdsKey),
     [thresholdsKey]
   );
   const [current, setCurrent] = useState6();
@@ -3287,4 +3282,4 @@ export {
   resolveContainerBreakpoint,
   useContainerBreakpoint
 };
-//# sourceMappingURL=chunk-5Q7V22OH.js.map
+//# sourceMappingURL=chunk-2KJU6VM4.js.map