@aspprev/versi-ds 0.4.3 → 0.4.4

package/dist/{chunk-JGCZAVYV.js → chunk-EA5F5GSP.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,6 +1514,7 @@ function PageHeading({
   spacing = "default"
 }) {
   const backHref = getBackHref(back?.href);
+  const titleAttribute = getTitleAttribute(title);
   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";
   return /* @__PURE__ */ jsxs13(
     "header",
@@ -1513,7 +1525,7 @@ function PageHeading({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs13("div", { className: classNames9("min-w-0", contentClassName), children: [
+        /* @__PURE__ */ jsxs13("div", { className: classNames9("min-w-0 flex-1", contentClassName), children: [
           back && backHref ? /* @__PURE__ */ jsx23("a", { className: backClassName, href: backHref, children: /* @__PURE__ */ jsx23(BackContent, { label: back.label }) }) : back ? /* @__PURE__ */ jsx23(
             "button",
             {
@@ -1523,7 +1535,16 @@ function PageHeading({
               children: /* @__PURE__ */ jsx23(BackContent, { label: back.label })
             }
           ) : null,
-          /* @__PURE__ */ jsx23(typography_default, { element: "h1", semanticRole: "page-title", children: title }),
+          /* @__PURE__ */ jsx23(
+            typography_default,
+            {
+              element: "h1",
+              semanticRole: "page-title",
+              title: titleAttribute,
+              className: "min-w-0 tablet:truncate",
+              children: title
+            }
+          ),
           subtitle !== void 0 && subtitle !== null && /* @__PURE__ */ jsx23(
             typography_default,
             {
@@ -1534,7 +1555,7 @@ function PageHeading({
             }
           )
         ] }),
-        actions && /* @__PURE__ */ jsx23("div", { className: "flex w-full flex-wrap items-center gap-2 tablet:w-auto tablet:justify-end", children: actions })
+        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 })
       ]
     }
   );
@@ -1555,12 +1576,12 @@ function PageTabsHeader({
     {
       className: `flex 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: "min-w-0 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 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;
@@ -2232,6 +2253,9 @@ var HEADER_DENSITY_CLASSES = {
 };
 function TableView({
   children,
+  loading = false,
+  loadingMessage = "Carregando dados\u2026",
+  errorMessage,
   header,
   accessibleName,
   caption,
@@ -2439,7 +2463,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 +2474,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 +2644,8 @@ function Table(props) {
     itemsPerPage = 10,
     emptyMessage = "Nenhum item encontrado",
     errorMessage,
+    loading = false,
+    loadingMessage = "Carregando dados\u2026",
     totalWidthUnits,
     showRowDivider = false,
     enableRowHover = false,
@@ -2905,6 +2944,9 @@ function Table(props) {
       accessibleName,
       caption,
       onFilterChange,
+      loading,
+      loadingMessage,
+      errorMessage,
       className,
       showPagination: resolvedShowPagination,
       pagination: resolvedPagination ?? void 0,
@@ -2934,6 +2976,9 @@ function MobileCardTable({
   keyExtractor,
   itemsPerPage = 10,
   emptyMessage = "Nenhum item encontrado.",
+  errorMessage,
+  loading = false,
+  loadingMessage = "Carregando dados\u2026",
   wrapperClassName = "",
   headerClassName = "",
   emptyClassName = "",
@@ -3008,7 +3053,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 +3269,4 @@ export {
   resolveContainerBreakpoint,
   useContainerBreakpoint
 };
-//# sourceMappingURL=chunk-JGCZAVYV.js.map
+//# sourceMappingURL=chunk-EA5F5GSP.js.map