@aspprev/versi-ds 0.4.3 → 0.4.6

package/README.md

@@ -90,6 +90,9 @@ import {
 
 - `OtpCodeInput` suporta `onComplete`, colagem de código, máscara, erro e controle por `value`/`values`.
 - `QRCode` suporta `description`, `ariaLabel`, `loading`, `error`, `size` e nível de correção.
+- `PageHeading` e `PageTabsHeader` mantêm o bloco do título flexível em tablet/desktop, truncam títulos longos com reticências e preservam o texto completo no atributo `title` quando o título é texto simples. O retorno (`back`) e as ações continuam disponíveis.
+- `Input` e `InputStandalone` aceitam `formatter={(value) => string}` para máscaras definidas pelo consumidor, sem props de domínio; as máscaras nomeadas existentes permanecem compatíveis.
+- `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.
@@ -225,3 +228,10 @@ Ao criar ou alterar um componente:
 6. execute `npm run prepack` antes de gerar o pacote.
 
 Detalhes de contratos, governança e segurança ficam na pasta `docs/`. A documentação de uso visual deve permanecer principalmente no Storybook.
+### Contratos adicionados no lote seguinte
+
+- `Input` e `InputStandalone` preservam a posição do cursor ao aplicar um `formatter` genérico; máscaras de domínio continuam sendo definidas pelo consumidor.
+- `InputSlider` usa `suffix` como prop canônica e mantém `sufix` apenas como alias de migração. `Avatar` aceita `xl` além dos tamanhos existentes.
+- `validateFiles` também rejeita arquivos vazios ou inválidos, com mensagens customizáveis; `FileViewer` aceita um slot `actions`.
+- `TimeSeriesChart` e `InteractiveDonutChart` expõem estados genéricos de carregamento, erro e ausência de dados.
+- `BoletoBarCode` aceita `width`, `height`, `quietZone` e estado de erro; o payload de boleto continua sendo responsabilidade do consumidor.

package/dist/charts.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ReactNode } from 'react';
 import { Props as Props$1 } from 'react-apexcharts';
 
 type Props = Props$1;
@@ -8,6 +9,10 @@ type InteractiveDonutOptions = NonNullable<Props["options"]>;
 type InteractiveDonutProps = Omit<Props, "options" | "series" | "type"> & {
     options?: InteractiveDonutOptions;
     series: number[];
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    error?: ReactNode;
+    emptyMessage?: ReactNode;
     colors?: string[];
     mutedColors?: string[];
     valueFormatter?: (value: number) => string;
@@ -17,18 +22,22 @@ type InteractiveDonutProps = Omit<Props, "options" | "series" | "type"> & {
     responsiveHeight?: boolean;
     highContrastOverride?: boolean;
 };
-declare function InteractiveDonutChart({ options, series, colors, mutedColors, valueFormatter, ariaLabel, className, chartClassName, responsiveHeight, highContrastOverride, ...rest }: InteractiveDonutProps): React.JSX.Element;
+declare function InteractiveDonutChart({ options, series, loading, loadingMessage, error, emptyMessage, colors, mutedColors, valueFormatter, ariaLabel, className, chartClassName, responsiveHeight, highContrastOverride, ...rest }: InteractiveDonutProps): React.JSX.Element;
 
 type TimeSeriesChartOptions = NonNullable<Props["options"]>;
 type TimeSeriesChartProps = Omit<Props, "options"> & {
     options: TimeSeriesChartOptions;
     ariaLabel: string;
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    error?: ReactNode;
+    emptyMessage?: ReactNode;
     className?: string;
     chartClassName?: string;
     responsiveHeight?: boolean;
     highContrastOverride?: boolean;
 };
-declare function TimeSeriesChart({ options, ariaLabel, className, chartClassName, responsiveHeight, highContrastOverride, ...chartProps }: TimeSeriesChartProps): React.JSX.Element;
+declare function TimeSeriesChart({ options, ariaLabel, loading, loadingMessage, error, emptyMessage, className, chartClassName, responsiveHeight, highContrastOverride, ...chartProps }: TimeSeriesChartProps): React.JSX.Element;
 
 type TimeRangeSelectorProps<T extends string | number> = {
     options: readonly T[];

package/dist/charts.js

@@ -12,7 +12,7 @@ import {
   normalizeTimeSeriesTooltipColor,
   resolveInteractiveDonutColors,
   resolveRelativeDonutSelection
-} from "./chunk-5MRS4PDD.js";
+} from "./chunk-HKCVDOGK.js";
 export {
   InteractiveDonutChart,
   LazyApexChart,

package/dist/{chunk-JGCZAVYV.js → chunk-5LJGBVPA.js}

@@ -616,7 +616,8 @@ var avatarSizeMap = {
   xs: "w-5 h-5 text-2xs",
   sm: "w-6 h-6 text-sm",
   md: "w-8 h-8 text-xl",
-  lg: "w-9 h-9 text-2xl"
+  lg: "w-9 h-9 text-2xl",
+  xl: "w-[4rem] h-[4rem] text-[2rem]"
 };
 function Inicials(name) {
   const nome = name;
@@ -1341,6 +1342,7 @@ var InputSlider = ({
   functionChange,
   initialValue,
   prefix,
+  suffix,
   sufix,
   marks,
   valueLabelDisplay = "auto",
@@ -1353,6 +1355,7 @@ var InputSlider = ({
   ...rest
 }) => {
   const [value, setValue] = useState2(initialValue);
+  const resolvedSuffix = suffix ?? sufix;
   const controlLabel = ariaLabel || name;
   const valueInputId = `${name}-value`;
   const handleSliderChange = useCallback2(
@@ -1415,7 +1418,12 @@ var InputSlider = ({
         "aria-label": `${controlLabel} valor`,
         disabled: disabled || inputDisabled
       }
-    )
+    ),
+    (showLabel || prefix || resolvedSuffix || valueFormmated) && /* @__PURE__ */ jsxs12("span", { className: "shrink-0 text-sm text-content-secondary", children: [
+      prefix,
+      valueFormmated ?? value,
+      resolvedSuffix
+    ] })
   ] });
 };
 var InputSliderView_default = InputSlider;
@@ -1482,6 +1490,9 @@ function FormGrid({ columns = 2, className, ...rest }) {
 import classNames9 from "classnames";
 import { MdArrowBack } from "react-icons/md";
 import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+function getTitleAttribute(title) {
+  return typeof title === "string" || typeof title === "number" ? String(title) : void 0;
+}
 function BackContent({ label }) {
   return /* @__PURE__ */ jsxs13(Fragment3, { children: [
     /* @__PURE__ */ jsx23(MdArrowBack, { "aria-hidden": "true", className: "h-5 w-5 shrink-0" }),
@@ -1503,38 +1514,56 @@ function PageHeading({
   spacing = "default"
 }) {
   const backHref = getBackHref(back?.href);
-  const backClassName = "mb-2 inline-flex w-fit items-center gap-1 text-sm font-semibold text-content-link hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring";
+  const titleAttribute = getTitleAttribute(title);
+  const backClassName = "inline-flex w-fit items-center gap-1 text-sm font-semibold hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring";
   return /* @__PURE__ */ jsxs13(
     "header",
     {
       className: classNames9(
-        "flex flex-col gap-3 tablet:flex-row tablet:items-start tablet:justify-between",
+        "flex w-full min-w-0 flex-col gap-3 tablet:flex-row tablet:items-start tablet:justify-between",
         { "mb-sm": spacing === "default" },
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs13("div", { className: classNames9("min-w-0", contentClassName), children: [
-          back && backHref ? /* @__PURE__ */ jsx23("a", { className: backClassName, href: backHref, children: /* @__PURE__ */ jsx23(BackContent, { label: back.label }) }) : back ? /* @__PURE__ */ jsx23(
-            "button",
-            {
-              type: "button",
-              className: backClassName,
-              onClick: back.onClick,
-              children: /* @__PURE__ */ jsx23(BackContent, { label: back.label })
-            }
-          ) : null,
-          /* @__PURE__ */ jsx23(typography_default, { element: "h1", semanticRole: "page-title", children: title }),
-          subtitle !== void 0 && subtitle !== null && /* @__PURE__ */ jsx23(
-            typography_default,
-            {
-              element: "p",
-              semanticRole: "section-title",
-              className: "mt-2 font-normal",
-              children: subtitle
-            }
-          )
-        ] }),
-        actions && /* @__PURE__ */ jsx23("div", { className: "flex w-full flex-wrap items-center gap-2 tablet:w-auto tablet:justify-end", children: actions })
+        /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: classNames9("w-full min-w-0 tablet:flex-1", contentClassName),
+            children: [
+              /* @__PURE__ */ jsxs13("div", { className: "flex w-full min-w-0 items-center gap-4", children: [
+                back && backHref ? /* @__PURE__ */ jsx23("a", { className: backClassName, href: backHref, children: /* @__PURE__ */ jsx23(BackContent, { label: back.label }) }) : back ? /* @__PURE__ */ jsx23(
+                  "button",
+                  {
+                    type: "button",
+                    className: backClassName,
+                    onClick: back.onClick,
+                    children: /* @__PURE__ */ jsx23(BackContent, { label: back.label })
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx23(
+                  typography_default,
+                  {
+                    element: "h1",
+                    semanticRole: "page-title",
+                    title: titleAttribute,
+                    className: "block w-full min-w-0 overflow-hidden text-ellipsis tablet:truncate tablet:whitespace-nowrap",
+                    children: title
+                  }
+                )
+              ] }),
+              subtitle !== void 0 && subtitle !== null && /* @__PURE__ */ jsx23(
+                typography_default,
+                {
+                  element: "p",
+                  semanticRole: "section-title",
+                  className: "mt-2 font-normal",
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        ),
+        actions && /* @__PURE__ */ jsx23("div", { className: "flex w-full flex-wrap items-center gap-2 tablet:w-auto tablet:shrink-0 tablet:justify-end", children: actions })
       ]
     }
   );
@@ -1553,14 +1582,14 @@ function PageTabsHeader({
   return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: `flex flex-col gap-4 tablet:flex-row tablet:items-end tablet:justify-between ${className}`,
+      className: `flex w-full min-w-0 flex-col gap-4 tablet:flex-row tablet:items-end tablet:justify-between ${className}`,
       children: [
-        /* @__PURE__ */ jsx24(PageHeading, { title, spacing: "none" }),
+        /* @__PURE__ */ jsx24("div", { className: "w-full min-w-0 tablet:flex-1", children: /* @__PURE__ */ jsx24(PageHeading, { title, spacing: "none" }) }),
         tabs.length > 1 && /* @__PURE__ */ jsx24(
           "nav",
           {
             "aria-label": title,
-            className: "flex w-full max-w-full flex-row flex-nowrap items-end gap-3 overflow-x-auto tablet:w-fit tablet:justify-end tablet:overflow-visible",
+            className: "flex w-full min-w-0 max-w-full flex-row flex-nowrap items-end gap-3 overflow-x-auto tablet:w-fit tablet:shrink-0 tablet:justify-end tablet:overflow-visible",
             children: /* @__PURE__ */ jsx24("div", { role: "tablist", className: "flex flex-nowrap items-end gap-3", children: tabs.map((tab) => {
               const Icon = tab.icon;
               const isActive = activeTab === tab.id;
@@ -1577,7 +1606,7 @@ function PageTabsHeader({
                   children: [
                     Icon && /* @__PURE__ */ jsx24(Icon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
                     /* @__PURE__ */ jsx24("span", { children: tab.label }),
-                    tab.notification !== void 0 && tab.notification !== null && /* @__PURE__ */ jsx24("span", { className: "inline-flex min-h-4 min-w-4 items-center justify-center rounded-full bg-feedback-danger-strong px-1 text-2xs font-bold text-feedback-danger-on-strong", children: tab.notification })
+                    tab.notification !== void 0 && tab.notification !== null && /* @__PURE__ */ jsx24("span", { className: "inline-flex min-h-4 min-w-4 items-center justify-center rounded-full bg-feedback-danger-strong px-1 text-2xs font-bold text-action-tertiary-content", children: tab.notification })
                   ]
                 },
                 tab.id
@@ -2232,6 +2261,9 @@ var HEADER_DENSITY_CLASSES = {
 };
 function TableView({
   children,
+  loading = false,
+  loadingMessage = "Carregando dados\u2026",
+  errorMessage,
   header,
   accessibleName,
   caption,
@@ -2439,7 +2471,7 @@ function TableView({
       ref: tableWrapperRef,
       className: `relative flex h-full min-h-0 min-w-0 flex-col ${isAdaptiveCompact ? "table-adaptive-compact" : ""}`,
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs18(
           "div",
           {
             ref: scrollContainerRef,
@@ -2450,59 +2482,72 @@ function TableView({
             "data-responsive-mode": overflowMode,
             style: { maxHeight: resolvedScrollAreaMaxHeight },
             className: `min-h-0 min-w-0 flex-1 overflow-y-auto ${overflowClass}`,
-            children: /* @__PURE__ */ jsxs18(
-              "table",
-              {
-                "aria-label": caption ? void 0 : accessibleName ?? `Tabela: ${header.map((item) => item.title).join(", ")}`,
-                className: `w-full max-w-full ${resolvedTotalWidthUnits && !isAdaptiveCompact ? "table-fixed" : ""} ${className ?? ""}`,
-                children: [
-                  caption && /* @__PURE__ */ jsx33("caption", { className: "sr-only", children: caption }),
-                  resolvedTotalWidthUnits && !isAdaptiveCompact && /* @__PURE__ */ jsx33("colgroup", { children: header.map((item, index) => /* @__PURE__ */ jsx33("col", { width: getColumnWidth(item.widthUnits) }, index)) }),
-                  /* @__PURE__ */ jsx33("thead", { className: "border-b border-border-default", children: /* @__PURE__ */ jsx33("tr", { className: HEADER_DENSITY_CLASSES[density].row, children: header.map((item, index) => {
-                    const canOpenFilter = hasFilterEnabled(item);
-                    const headerIcon = getHeaderIcon(item);
-                    return /* @__PURE__ */ jsx33(
-                      "th",
-                      {
-                        scope: "col",
-                        "aria-sort": getSortDirection(item),
-                        ref: (element) => {
-                          headerCellRefs.current[index] = element;
+            children: [
+              /* @__PURE__ */ jsxs18(
+                "table",
+                {
+                  "aria-label": caption ? void 0 : accessibleName ?? `Tabela: ${header.map((item) => item.title).join(", ")}`,
+                  className: `w-full max-w-full ${resolvedTotalWidthUnits && !isAdaptiveCompact ? "table-fixed" : ""} ${className ?? ""}`,
+                  children: [
+                    caption && /* @__PURE__ */ jsx33("caption", { className: "sr-only", children: caption }),
+                    resolvedTotalWidthUnits && !isAdaptiveCompact && /* @__PURE__ */ jsx33("colgroup", { children: header.map((item, index) => /* @__PURE__ */ jsx33("col", { width: getColumnWidth(item.widthUnits) }, index)) }),
+                    /* @__PURE__ */ jsx33("thead", { className: "border-b border-border-default", children: /* @__PURE__ */ jsx33("tr", { className: HEADER_DENSITY_CLASSES[density].row, children: header.map((item, index) => {
+                      const canOpenFilter = hasFilterEnabled(item);
+                      const headerIcon = getHeaderIcon(item);
+                      return /* @__PURE__ */ jsx33(
+                        "th",
+                        {
+                          scope: "col",
+                          "aria-sort": getSortDirection(item),
+                          ref: (element) => {
+                            headerCellRefs.current[index] = element;
+                          },
+                          className: `${stickyHeader ? "sticky top-0 z-[1]" : "relative"} ${HEADER_VARIANT_CLASSES[headerVariant]} ${HEADER_DENSITY_CLASSES[density].cell} text-left text-md font-bold ${item.className ?? ""}`,
+                          "data-has-filter": canOpenFilter,
+                          children: canOpenFilter ? /* @__PURE__ */ jsxs18(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-expanded": openFilter === index,
+                              "aria-controls": openFilter === index ? `${tableId}-filter-${index}` : void 0,
+                              ref: (element) => {
+                                filterTriggerRefs.current[index] = element;
+                              },
+                              "aria-label": `Filtrar ou ordenar por ${item.title}`,
+                              className: `flex min-h-11 w-full items-center gap-1.5 rounded-sm text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${headerFocusClass} ${item.className?.includes("text-right") ? "justify-end" : ""}`,
+                              onClick: () => handleHeaderAction(item, index),
+                              children: [
+                                /* @__PURE__ */ jsx33("span", { className: "min-w-0 truncate", children: item.title }),
+                                headerIcon && /* @__PURE__ */ jsx33("span", { className: "flex-shrink-0", "aria-hidden": "true", children: headerIcon })
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsx33(
+                            "span",
+                            {
+                              className: `flex items-center gap-1.5 ${item.className?.includes("text-right") ? "justify-end" : ""}`,
+                              children: /* @__PURE__ */ jsx33("span", { className: "min-w-0 truncate", children: item.title })
+                            }
+                          )
                         },
-                        className: `${stickyHeader ? "sticky top-0 z-[1]" : "relative"} ${HEADER_VARIANT_CLASSES[headerVariant]} ${HEADER_DENSITY_CLASSES[density].cell} text-left text-md font-bold ${item.className ?? ""}`,
-                        "data-has-filter": canOpenFilter,
-                        children: canOpenFilter ? /* @__PURE__ */ jsxs18(
-                          "button",
-                          {
-                            type: "button",
-                            "aria-expanded": openFilter === index,
-                            "aria-controls": openFilter === index ? `${tableId}-filter-${index}` : void 0,
-                            ref: (element) => {
-                              filterTriggerRefs.current[index] = element;
-                            },
-                            "aria-label": `Filtrar ou ordenar por ${item.title}`,
-                            className: `flex min-h-11 w-full items-center gap-1.5 rounded-sm text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${headerFocusClass} ${item.className?.includes("text-right") ? "justify-end" : ""}`,
-                            onClick: () => handleHeaderAction(item, index),
-                            children: [
-                              /* @__PURE__ */ jsx33("span", { className: "min-w-0 truncate", children: item.title }),
-                              headerIcon && /* @__PURE__ */ jsx33("span", { className: "flex-shrink-0", "aria-hidden": "true", children: headerIcon })
-                            ]
-                          }
-                        ) : /* @__PURE__ */ jsx33(
-                          "span",
-                          {
-                            className: `flex items-center gap-1.5 ${item.className?.includes("text-right") ? "justify-end" : ""}`,
-                            children: /* @__PURE__ */ jsx33("span", { className: "min-w-0 truncate", children: item.title })
-                          }
-                        )
-                      },
-                      index
-                    );
-                  }) }) }),
-                  children ? children : /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33("tr", { children: /* @__PURE__ */ jsx33("td", { colSpan: header.length, children: /* @__PURE__ */ jsx33(NotFoundView_default, {}) }) }) })
-                ]
-              }
-            )
+                        index
+                      );
+                    }) }) }),
+                    children ? children : /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33("tr", { children: /* @__PURE__ */ jsx33("td", { colSpan: header.length, children: /* @__PURE__ */ jsx33(NotFoundView_default, {}) }) }) })
+                  ]
+                }
+              ),
+              loading && /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  role: "status",
+                  "aria-busy": "true",
+                  "aria-live": "polite",
+                  className: "pointer-events-none absolute inset-x-0 top-0 flex min-h-24 items-center justify-center bg-surface-card/80 p-4 text-sm text-content-secondary",
+                  children: loadingMessage
+                }
+              ),
+              !loading && errorMessage && /* @__PURE__ */ jsx33("div", { role: "alert", className: "border-t border-field-border-error bg-feedback-danger-soft p-4 text-sm text-field-assistive-error", children: errorMessage })
+            ]
           }
         ),
         openFilter !== null && filterCoords && header[openFilter]?.filters && /* @__PURE__ */ jsx33("div", { ref: filterRef, className: "absolute z-popover", children: /* @__PURE__ */ jsx33(
@@ -2607,6 +2652,8 @@ function Table(props) {
     itemsPerPage = 10,
     emptyMessage = "Nenhum item encontrado",
     errorMessage,
+    loading = false,
+    loadingMessage = "Carregando dados\u2026",
     totalWidthUnits,
     showRowDivider = false,
     enableRowHover = false,
@@ -2905,6 +2952,9 @@ function Table(props) {
       accessibleName,
       caption,
       onFilterChange,
+      loading,
+      loadingMessage,
+      errorMessage,
       className,
       showPagination: resolvedShowPagination,
       pagination: resolvedPagination ?? void 0,
@@ -2934,6 +2984,9 @@ function MobileCardTable({
   keyExtractor,
   itemsPerPage = 10,
   emptyMessage = "Nenhum item encontrado.",
+  errorMessage,
+  loading = false,
+  loadingMessage = "Carregando dados\u2026",
   wrapperClassName = "",
   headerClassName = "",
   emptyClassName = "",
@@ -3008,7 +3061,7 @@ function MobileCardTable({
               children: headers.map((header) => /* @__PURE__ */ jsx35("span", { className: header.className, children: header.label }, header.label))
             }
           ),
-          pagination.totalItems > 0 ? /* @__PURE__ */ jsx35("div", { role: "list", "aria-label": "Itens da lista", children: pagination.pageData.map((item, index) => (() => {
+          loading ? /* @__PURE__ */ jsx35("div", { role: "status", "aria-busy": "true", "aria-live": "polite", className: "p-6 text-center text-sm text-content-secondary", children: loadingMessage }) : errorMessage ? /* @__PURE__ */ jsx35("div", { role: "alert", className: "p-6 text-center text-sm text-field-assistive-error", children: errorMessage }) : pagination.totalItems > 0 ? /* @__PURE__ */ jsx35("div", { role: "list", "aria-label": "Itens da lista", children: pagination.pageData.map((item, index) => (() => {
             const rowId = expandable?.getRowId(item, index);
             const normalizedRowId = rowId !== void 0 ? String(rowId) : void 0;
             const isExpanded = normalizedRowId !== void 0 && expandable?.expandedRowId !== null && expandable?.expandedRowId !== void 0 && String(expandable.expandedRowId) === normalizedRowId;
@@ -3224,4 +3277,4 @@ export {
   resolveContainerBreakpoint,
   useContainerBreakpoint
 };
-//# sourceMappingURL=chunk-JGCZAVYV.js.map
+//# sourceMappingURL=chunk-5LJGBVPA.js.map