@aspprev/versi-ds 0.4.8 → 0.5.0

package/README.md

@@ -95,7 +95,7 @@ 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.
 - 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.

package/dist/{chunk-3UXUAX5K.js → chunk-5Q7V22OH.js}

@@ -868,7 +868,6 @@ var PAGINATION_SIZE_CLASSES = {
   normal: {
     itemHeight: "box-border h-7 min-h-7",
     pageWidth: "w-8",
-    controlWidth: "w-24",
     controlPadding: "px-2",
     text: "text-sm",
     gap: "gap-1.5"
@@ -876,7 +875,6 @@ var PAGINATION_SIZE_CLASSES = {
   small: {
     itemHeight: "box-border h-6 min-h-6",
     pageWidth: "w-6",
-    controlWidth: "w-20",
     controlPadding: "px-1.5",
     text: "text-xs",
     gap: "gap-1"
@@ -985,7 +983,7 @@ function PaginationView(props) {
   } = props;
   const totalPages = Math.max(1, Math.ceil(totalResults / perPage));
   const sizeClasses = PAGINATION_SIZE_CLASSES[size];
-  const controlWidth = variant === "arrows" ? sizeClasses.pageWidth : sizeClasses.controlWidth;
+  const controlWidth = variant === "arrows" ? sizeClasses.pageWidth : "";
   return /* @__PURE__ */ jsxs9(
     "nav",
     {
@@ -1014,7 +1012,7 @@ function PaginationView(props) {
                 controlWidth,
                 sizeClasses.controlPadding,
                 "rounded-sm border border-border-default",
-                "flex items-center justify-center gap-1 text-content-primary",
+                "flex items-center justify-center gap-1 whitespace-nowrap text-content-primary",
                 sizeClasses.text,
                 "cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
               ),
@@ -1045,7 +1043,7 @@ function PaginationView(props) {
                 controlWidth,
                 sizeClasses.controlPadding,
                 "rounded-sm border border-border-default",
-                "flex items-center justify-center gap-1 text-content-primary",
+                "flex items-center justify-center gap-1 whitespace-nowrap text-content-primary",
                 sizeClasses.text,
                 "cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
               ),
@@ -1776,150 +1774,84 @@ function FilterBar({
 }
 
 // src/utils/resolve-status-appearance.ts
-var NORMALIZED_STATUS = {
-  infoOutline: /* @__PURE__ */ new Set(["ABERTO", "PAGO", "EM PAGAMENTO"]),
-  infoSolid: /* @__PURE__ */ new Set([
-    "EM ANDAMENTO",
-    "SOLICITADO",
-    "NAO ASSINADO",
-    "AGUARDANDO ASSINATURA"
-  ]),
-  warning: /* @__PURE__ */ new Set([
-    "EM ANALISE",
-    "PENDENTE",
-    "SUSPENSO",
-    "AGUARDANDO PARTICIPANTE"
-  ]),
-  success: /* @__PURE__ */ new Set([
-    "DEFERIDO",
-    "QUITADO",
-    "LIBERADO",
-    "ATIVO",
-    "VIGENTE",
-    "RESPONDIDO",
-    "ASSINADO"
-  ]),
-  danger: /* @__PURE__ */ new Set(["INDEFERIDO", "VENCIDO", "CANCELADO", "ERRO"]),
-  neutral: /* @__PURE__ */ new Set([
-    "CONCLUIDO",
-    "ENCERRADO",
-    "FINALIZADO",
-    "RENEGOCIADO",
-    "INATIVO"
-  ])
+var TONE_TO_COLOR = {
+  info: "blue",
+  warning: "yellow",
+  success: "green",
+  danger: "red",
+  neutral: "slate"
 };
 var normalizeStatus = (status) => String(status ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, " ").trim().toUpperCase();
-var resolveGenericStatus = (status) => {
-  if (NORMALIZED_STATUS.infoOutline.has(status)) {
-    return { tone: "info", appearance: "outline" };
-  }
-  if (NORMALIZED_STATUS.infoSolid.has(status)) {
-    return { tone: "info", appearance: "solid" };
-  }
-  if (NORMALIZED_STATUS.warning.has(status)) {
-    return { tone: "warning", appearance: "soft" };
-  }
-  if (NORMALIZED_STATUS.success.has(status)) {
-    return { tone: "success", appearance: "solid" };
-  }
-  if (NORMALIZED_STATUS.danger.has(status)) {
-    return { tone: "danger", appearance: "solid" };
-  }
-  if (NORMALIZED_STATUS.neutral.has(status)) {
-    return { tone: "neutral", appearance: "solid" };
-  }
-  return { tone: "neutral", appearance: "outline" };
-};
+var isLegacyConfig = (config) => "tone" in config;
+var normalizeConfig = (config) => isLegacyConfig(config) ? { color: TONE_TO_COLOR[config.tone], appearance: config.appearance } : config;
 var resolveStatusAppearance = (status, domain = "generic", options) => {
+  void domain;
   const normalized = normalizeStatus(status);
-  if (!normalized) {
-    return options?.fallback ?? { tone: "neutral", appearance: "outline" };
-  }
-  const mappedAppearance = options?.map ? Object.entries(options.map).find(
-    ([key]) => normalizeStatus(key) === normalized
-  )?.[1] : void 0;
-  if (mappedAppearance) return mappedAppearance;
-  if (domain === "beneficiary") {
-    if (normalized === "VIGENTE") return { tone: "success", appearance: "solid" };
-    if (normalized === "ENCERRADO") return { tone: "neutral", appearance: "solid" };
+  if (normalized && options?.map) {
+    const mappedAppearance = Object.entries(options.map).find(
+      ([key]) => normalizeStatus(key) === normalized
+    )?.[1];
+    if (mappedAppearance) return normalizeConfig(mappedAppearance);
   }
-  if (domain === "document") {
-    if (["ANEXADO", "ASSINADO", "CONCLUIDO"].includes(normalized)) {
-      return { tone: "success", appearance: "solid" };
-    }
-    if (normalized.includes("AGUARDANDO") || normalized === "PENDENTE") {
-      return { tone: "warning", appearance: "soft" };
-    }
-    if (normalized === "BLOQUEADO") return { tone: "neutral", appearance: "solid" };
-  }
-  if (domain === "signature") {
-    if (normalized === "ASSINADO") return { tone: "success", appearance: "solid" };
-    if (normalized.includes("AGUARDANDO")) return { tone: "warning", appearance: "soft" };
-    if (normalized === "NAO ASSINADO") return { tone: "info", appearance: "solid" };
-  }
-  if (domain === "benefit") {
-    if (normalized === "EM PAGAMENTO") return { tone: "info", appearance: "outline" };
-    if (normalized === "SUSPENSO") return { tone: "warning", appearance: "soft" };
-  }
-  if (domain === "participation") {
-    return { tone: "neutral", appearance: "solid" };
-  }
-  if (domain === "payment") {
-    if (["PAGO", "QUITADO", "LIBERADO"].includes(normalized)) {
-      return { tone: "success", appearance: "solid" };
-    }
-    if (["EM PAGAMENTO", "AGUARDANDO PAGAMENTO"].includes(normalized)) {
-      return { tone: "info", appearance: "outline" };
-    }
-    if (["VENCIDO", "ESTORNADO", "FALHOU"].includes(normalized)) {
-      return { tone: "danger", appearance: "solid" };
-    }
+  if (options?.color) {
+    return {
+      color: options.color,
+      appearance: options.appearance ?? "outline"
+    };
   }
-  if (domain === "claim" || domain === "request" || domain === "protocol") {
-    if (["RECEBIDO", "PROTOCOLADO", "EMITIDO"].includes(normalized)) {
-      return { tone: "info", appearance: "outline" };
-    }
-    if (["EM ANALISE", "AGUARDANDO DOCUMENTACAO", "AGUARDANDO ANALISE"].includes(normalized)) {
-      return { tone: "warning", appearance: "soft" };
-    }
-    if (["APROVADO", "CONCEDIDO", "ATENDIDO"].includes(normalized)) {
-      return { tone: "success", appearance: "solid" };
-    }
-    if (["NEGADO", "ARQUIVADO", "RECUSADO"].includes(normalized)) {
-      return { tone: "danger", appearance: "solid" };
-    }
+  if (options?.tone) {
+    return {
+      color: TONE_TO_COLOR[options.tone],
+      appearance: options.appearance ?? "outline"
+    };
   }
-  return options?.fallback ?? resolveGenericStatus(normalized);
+  return options?.fallback ?? { color: "slate", appearance: "outline" };
 };
+var getStatusBadgeColorFromTone = (tone) => TONE_TO_COLOR[tone];
 
 // src/components/status-badge/StatusBadge.tsx
 import classNames12 from "classnames";
 import { jsx as jsx27 } from "react/jsx-runtime";
-var TONE_STYLES2 = {
-  info: {
-    outline: "border-feedback-info-border text-feedback-info-content",
-    soft: "border-feedback-info-border bg-feedback-info-soft text-feedback-info-content",
-    solid: "border-feedback-info-strong bg-feedback-info-strong text-surface-subtle"
+var COLOR_STYLES = {
+  primary: {
+    outline: "border-primary-1 text-primary-1",
+    soft: "border-primary-1 bg-primary-5 text-primary-2",
+    solid: "border-action-primary bg-action-primary text-action-primary-content"
+  },
+  blue: {
+    outline: "border-status-blue-outline-border text-status-blue-outline-foreground",
+    soft: "border-status-blue-outline-border bg-status-blue-soft-background text-status-blue-soft-foreground",
+    solid: "border-status-blue-solid-background bg-status-blue-solid-background text-status-blue-solid-foreground"
+  },
+  green: {
+    outline: "border-status-green-outline-border text-status-green-outline-foreground",
+    soft: "border-status-green-outline-border bg-status-green-soft-background text-status-green-soft-foreground",
+    solid: "border-status-green-solid-background bg-status-green-solid-background text-status-green-solid-foreground"
   },
-  warning: {
-    outline: "border-feedback-warning-border text-feedback-warning-content",
-    soft: "border-feedback-warning-border bg-feedback-warning-soft text-feedback-warning-content",
-    solid: "border-feedback-warning-strong bg-feedback-warning-strong text-surface-subtle"
+  orange: {
+    outline: "border-status-orange-outline-border text-status-orange-outline-foreground",
+    soft: "border-status-orange-outline-border bg-status-orange-soft-background text-status-orange-soft-foreground",
+    solid: "border-status-orange-solid-background bg-status-orange-solid-background text-status-orange-solid-foreground"
   },
-  success: {
-    outline: "border-feedback-success-border text-feedback-success-content",
-    soft: "border-feedback-success-border bg-feedback-success-soft text-feedback-success-content",
-    solid: "border-feedback-success-strong bg-feedback-success-strong text-surface-subtle"
+  yellow: {
+    outline: "border-status-yellow-outline-border text-status-yellow-outline-foreground",
+    soft: "border-status-yellow-outline-border bg-status-yellow-soft-background text-status-yellow-soft-foreground",
+    solid: "border-status-yellow-solid-background bg-status-yellow-solid-background text-status-yellow-solid-foreground"
   },
-  danger: {
-    outline: "border-feedback-danger-border text-feedback-danger-content",
-    soft: "border-feedback-danger-border bg-feedback-danger-soft text-feedback-danger-content",
-    solid: "border-feedback-danger-strong bg-feedback-danger-strong text-surface-subtle"
+  red: {
+    outline: "border-status-red-outline-border text-status-red-outline-foreground",
+    soft: "border-status-red-outline-border bg-status-red-soft-background text-status-red-soft-foreground",
+    solid: "border-status-red-solid-background bg-status-red-solid-background text-status-red-solid-foreground"
   },
-  neutral: {
-    outline: "border-border-strong text-content-secondary",
-    soft: "border-border-default bg-surface-subtle text-content-secondary",
-    solid: "border-surface-action-neutral bg-surface-action-neutral text-surface-subtle"
+  slate: {
+    outline: "border-status-slate-outline-border text-status-slate-outline-foreground",
+    soft: "border-status-slate-outline-border bg-status-slate-soft-background text-status-slate-soft-foreground",
+    solid: "border-status-slate-solid-background bg-status-slate-solid-background text-status-slate-solid-foreground"
+  },
+  black: {
+    outline: "border-status-black-outline-border text-status-black-outline-foreground",
+    soft: "border-status-black-outline-border bg-status-black-soft-background text-status-black-soft-foreground",
+    solid: "border-status-black-solid-background bg-status-black-solid-background text-status-black-solid-foreground"
   }
 };
 var SIZE_STYLES = {
@@ -1928,7 +1860,8 @@ var SIZE_STYLES = {
 };
 function StatusBadge({
   children,
-  tone = "neutral",
+  color,
+  tone,
   appearance = "outline",
   size = "md",
   overflow = "wrap",
@@ -1943,7 +1876,7 @@ function StatusBadge({
       className: classNames12(
         "inline-flex w-fit max-w-full items-center justify-center rounded-sm border-2 text-center font-bold uppercase tracking-wide",
         SIZE_STYLES[size],
-        TONE_STYLES2[tone][appearance],
+        COLOR_STYLES[color ?? getStatusBadgeColorFromTone(tone ?? "neutral")][appearance],
         overflow === "truncate" ? "overflow-hidden text-ellipsis whitespace-nowrap" : "whitespace-normal break-words",
         className
       ),
@@ -1954,7 +1887,10 @@ function StatusBadge({
     }
   );
 }
-var getStatusBadgeClassName = (tone, appearance) => TONE_STYLES2[tone][appearance];
+var getStatusBadgeClassName = (colorOrTone, appearance) => {
+  const color = colorOrTone in COLOR_STYLES ? colorOrTone : getStatusBadgeColorFromTone(colorOrTone);
+  return COLOR_STYLES[color][appearance];
+};
 
 // src/components/status-badge/DomainStatusBadge.tsx
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -1964,15 +1900,25 @@ function DomainStatusBadge({
   empty = "hide",
   placeholder = "-",
   statusMap,
+  fallback,
+  color,
+  tone,
+  appearance,
   ...rest
 }) {
   const label = status?.trim();
   if (!label && empty === "hide") return null;
-  const resolved = resolveStatusAppearance(label, domain, { map: statusMap });
+  const resolved = resolveStatusAppearance(label, domain, {
+    map: statusMap,
+    color,
+    tone,
+    appearance,
+    fallback
+  });
   return /* @__PURE__ */ jsx28(
     StatusBadge,
     {
-      tone: resolved.tone,
+      color: resolved.color,
       appearance: resolved.appearance,
       ...rest,
       children: label || placeholder
@@ -2659,7 +2605,7 @@ function TableView({
                 onClick: pagination.onPrevious,
                 disabled: pagination.currentPage === 1,
                 "aria-label": "Ir para a p\xE1gina anterior",
-                className: `${paginationSizeClasses.itemHeight} inline-flex ${paginationVariant === "arrows" ? paginationSizeClasses.pageWidth : paginationSizeClasses.controlWidth} items-center justify-center gap-1 rounded border border-border-default ${paginationSizeClasses.controlPadding} ${paginationSizeClasses.text} leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:border-border-default disabled:opacity-50`,
+                className: `${paginationSizeClasses.itemHeight} inline-flex ${paginationVariant === "arrows" ? paginationSizeClasses.pageWidth : ""} items-center justify-center gap-1 whitespace-nowrap rounded border border-border-default ${paginationSizeClasses.controlPadding} ${paginationSizeClasses.text} leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:border-border-default disabled:opacity-50`,
                 children: [
                   /* @__PURE__ */ jsx33(MdKeyboardArrowLeft, { className: "h-3 w-3 text-content-muted" }),
                   paginationVariant !== "arrows" && "Anterior"
@@ -2682,7 +2628,7 @@ function TableView({
                 onClick: pagination.onNext,
                 disabled: pagination.currentPage === pagination.totalPages,
                 "aria-label": "Ir para a pr\xF3xima p\xE1gina",
-                className: `${paginationSizeClasses.itemHeight} inline-flex ${paginationVariant === "arrows" ? paginationSizeClasses.pageWidth : paginationSizeClasses.controlWidth} items-center justify-center gap-1 rounded border border-border-default ${paginationSizeClasses.controlPadding} ${paginationSizeClasses.text} leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:border-border-default disabled:opacity-50`,
+                className: `${paginationSizeClasses.itemHeight} inline-flex ${paginationVariant === "arrows" ? paginationSizeClasses.pageWidth : ""} items-center justify-center gap-1 whitespace-nowrap rounded border border-border-default ${paginationSizeClasses.controlPadding} ${paginationSizeClasses.text} leading-none text-content-primary hover:border-border-strong disabled:cursor-not-allowed disabled:border-border-default disabled:opacity-50`,
                 children: [
                   paginationVariant !== "arrows" && "Pr\xF3xima",
                   /* @__PURE__ */ jsx33(MdKeyboardArrowRight, { className: "h-3 w-3 text-content-muted" })
@@ -3341,4 +3287,4 @@ export {
   resolveContainerBreakpoint,
   useContainerBreakpoint
 };
-//# sourceMappingURL=chunk-3UXUAX5K.js.map
+//# sourceMappingURL=chunk-5Q7V22OH.js.map