@umodeapporg/ui 0.1.0

package/dist/components/UI/DataTable/DataTableHead.js

@@ -0,0 +1,198 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { flexRender } from "@tanstack/react-table";
+import { alignClass, FROZEN_LEFT_COLUMN_SHADOW, FROZEN_COLUMN_SHADOW } from "./dataTableClasses.js";
+import DataTableColumnToggle from "./DataTableColumnToggle.js";
+import { resolveColumnMinWidthPx } from "./dataTableColumnWidths.js";
+const DataTableHead = ({
+  table,
+  columns,
+  columnConfigById,
+  columnContentWidths,
+  columnOrder,
+  onColumnOrderChange,
+  resetColumnOrder,
+  resetColumnSizing,
+  onHeaderSortClick,
+  resolveSortDirection,
+  hideColumnToggle = false,
+  flexColumnId = null,
+  showActionsShadow = false,
+  dense = false,
+  spacious = false
+}) => {
+  const { t } = useTranslation("ui");
+  const columnSizing = table.getState().columnSizing;
+  const { isResizingColumn } = table.getState().columnSizingInfo;
+  const renderResizeHandle = (header) => {
+    if (!header.column.getCanResize()) return null;
+    if (header.column.id === flexColumnId && !columnSizing[header.column.id]) return null;
+    const isResizing = isResizingColumn === header.column.id;
+    return /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dataTable.resizeColumn"), children: /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        onDoubleClick: () => header.column.resetSize(),
+        onClick: (event) => event.stopPropagation(),
+        className: classNames(
+          "absolute right-0 top-0 z-40 h-full w-3 cursor-col-resize touch-none select-none",
+          "before:absolute before:inset-y-1 before:right-0 before:w-0.5 before:rounded-full before:content-['']",
+          isResizing ? "before:bg-brand" : "before:bg-transparent hover:before:bg-brand-hover"
+        ),
+        children: null
+      }
+    ) });
+  };
+  const renderSortIndicator = (columnConfig) => {
+    if (!columnConfig.sortable) return null;
+    const direction = resolveSortDirection(columnConfig);
+    const icon = direction === "desc" ? "arrow_downward" : "arrow_upward";
+    return /* @__PURE__ */ jsx(
+      MaterialSymbol,
+      {
+        icon,
+        size: 14,
+        className: classNames("transition-opacity", {
+          "text-brand-emphasis opacity-100": !!direction,
+          "opacity-30": !direction
+        })
+      }
+    );
+  };
+  const visibleColumns = table.getVisibleLeafColumns();
+  const leafHeaders = table.getHeaderGroups()[0]?.headers ?? [];
+  const headerGroupSegments = leafHeaders.reduce((segments, header, index) => {
+    const label = columnConfigById.get(header.column.id)?.headerGroupLabel ?? null;
+    const lastSegment = segments[segments.length - 1];
+    if (lastSegment && lastSegment.label === label) {
+      lastSegment.headers.push({ header, index });
+      return segments;
+    }
+    segments.push({ label, headers: [{ header, index }] });
+    return segments;
+  }, []);
+  const hasHeaderGroupRow = headerGroupSegments.some((segment) => segment.label !== null);
+  const renderColumnHeaderCell = (header, headerIndex, totalHeaders, placement) => {
+    const columnConfig = columnConfigById.get(header.column.id);
+    const isSortable = !!columnConfig?.sortable;
+    const isFirstColumn = headerIndex === 0;
+    const isLastColumn = headerIndex === totalHeaders - 1;
+    const isStickyLeft = isFirstColumn;
+    const isStickyRight = isLastColumn && columnConfig?.type === "actions";
+    const rawHeaderContent = isSortable ? /* @__PURE__ */ jsxs(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: () => columnConfig && onHeaderSortClick(columnConfig),
+        className: "inline-flex cursor-pointer items-center gap-1 uppercase hover:text-foreground-muted",
+        children: [
+          flexRender(header.column.columnDef.header, header.getContext()),
+          columnConfig && renderSortIndicator(columnConfig)
+        ]
+      }
+    ) : flexRender(header.column.columnDef.header, header.getContext());
+    const headerContent = columnConfig?.headerTooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: columnConfig.headerTooltip, children: /* @__PURE__ */ jsx("span", { className: "inline-flex max-w-full", children: rawHeaderContent }) }) : rawHeaderContent;
+    return /* @__PURE__ */ jsxs(
+      "th",
+      {
+        rowSpan: placement === "spanning" ? 2 : void 0,
+        className: classNames(
+          "sticky z-20 whitespace-nowrap bg-muted font-semibold uppercase tracking-wide text-foreground-subtle",
+          // The leaf row sits below the band row (fixed h-6) and closes the
+          // header's bottom edge; the other placements own both edges.
+          placement === "leaf" ? "top-6 border-b border-border" : "top-0 border-y border-border",
+          // Outer edges come from the column's table position, not the row
+          // position: a banded header splits columns across two rows, so the
+          // `first:`/`last:` pseudo-classes would decorate the wrong cells.
+          isFirstColumn && "border-l",
+          isFirstColumn && (placement === "leaf" ? "rounded-bl-md" : "rounded-l-md"),
+          isLastColumn && "border-r",
+          isLastColumn && (placement === "leaf" ? "rounded-br-md" : "rounded-r-md"),
+          placement === "spanning" && "align-middle",
+          spacious ? "text-xs" : "text-xxs",
+          placement === "leaf" ? dense ? "px-3 py-1" : spacious ? "px-5 py-1.5" : "px-4 py-1" : dense ? "px-3 py-1.5" : spacious ? "px-5 py-3.5" : "px-4 py-2.5",
+          alignClass(columnConfig?.headerAlign ?? columnConfig?.cellAlign),
+          isStickyLeft && "left-0 z-30",
+          isStickyLeft && showActionsShadow && FROZEN_LEFT_COLUMN_SHADOW,
+          isStickyRight && "right-0 z-30",
+          isStickyRight && showActionsShadow && FROZEN_COLUMN_SHADOW
+        ),
+        style: {
+          minWidth: columnContentWidths.get(header.column.id) ?? resolveColumnMinWidthPx(columnConfig, {
+            isFirstColumn,
+            hasColumnToggle: isFirstColumn && !hideColumnToggle
+          })
+        },
+        children: [
+          isFirstColumn && !hideColumnToggle ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            headerContent,
+            /* @__PURE__ */ jsx(
+              DataTableColumnToggle,
+              {
+                table,
+                columns,
+                columnOrder,
+                onColumnOrderChange,
+                resetColumnOrder,
+                resetColumnSizing
+              }
+            )
+          ] }) : headerContent,
+          renderResizeHandle(header)
+        ]
+      },
+      header.id
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((leafColumn, columnIndex) => {
+      const colConfig = columnConfigById.get(leafColumn.id);
+      const isFirstColumn = columnIndex === 0;
+      const isFlexColumn = leafColumn.id === flexColumnId && !columnSizing[leafColumn.id];
+      const minWidthPx = columnContentWidths.get(leafColumn.id) ?? resolveColumnMinWidthPx(colConfig, {
+        isFirstColumn,
+        hasColumnToggle: isFirstColumn && !hideColumnToggle
+      });
+      return /* @__PURE__ */ jsx(
+        "col",
+        {
+          style: isFlexColumn ? { minWidth: minWidthPx } : { width: leafColumn.getSize(), minWidth: minWidthPx }
+        },
+        leafColumn.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("thead", { children: hasHeaderGroupRow ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("tr", { className: "bg-muted", children: headerGroupSegments.map(
+        (segment) => segment.label === null ? segment.headers.map(
+          ({ header, index }) => renderColumnHeaderCell(header, index, leafHeaders.length, "spanning")
+        ) : /* @__PURE__ */ jsx(
+          "th",
+          {
+            colSpan: segment.headers.length,
+            className: classNames(
+              "sticky top-0 z-20 h-6 whitespace-nowrap border-x border-y border-border bg-muted px-3 py-0 text-center align-middle font-semibold uppercase tracking-wide text-foreground-subtle",
+              spacious ? "text-xs" : "text-xxs",
+              segment.headers[0]?.index === 0 && "rounded-tl-md",
+              segment.headers[segment.headers.length - 1]?.index === leafHeaders.length - 1 && "rounded-tr-md"
+            ),
+            children: segment.label
+          },
+          `band:${segment.headers[0]?.header.id}`
+        )
+      ) }),
+      /* @__PURE__ */ jsx("tr", { className: "bg-muted", children: headerGroupSegments.filter((segment) => segment.label !== null).flatMap((segment) => segment.headers).map(({ header, index }) => renderColumnHeaderCell(header, index, leafHeaders.length, "leaf")) })
+    ] }) : /* @__PURE__ */ jsx("tr", { className: "bg-muted", children: leafHeaders.map(
+      (header, headerIndex) => renderColumnHeaderCell(header, headerIndex, leafHeaders.length, "single")
+    ) }) })
+  ] });
+};
+export {
+  DataTableHead as default
+};
+//# sourceMappingURL=DataTableHead.js.map

package/dist/components/UI/DataTable/DataTableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHead.js","sources":["../../../../src/components/UI/DataTable/DataTableHead.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { flexRender, type Header, type Table, type Updater } from '@tanstack/react-table';\n\nimport { alignClass, FROZEN_COLUMN_SHADOW, FROZEN_LEFT_COLUMN_SHADOW } from './dataTableClasses';\nimport DataTableColumnToggle from './DataTableColumnToggle';\nimport { resolveColumnMinWidthPx } from './dataTableColumnWidths';\nimport type { IDataTableColumnConfig, IDataTableRow } from './types';\n\ninterface IDataTableHeadProps<T extends IDataTableRow> {\n  table: Table<T>;\n  columns: Array<IDataTableColumnConfig<T>>;\n  columnConfigById: Map<string, IDataTableColumnConfig<T>>;\n  /** Row-derived widths for actions/badge columns; other columns fall back to the seed. */\n  columnContentWidths: Map<string, number>;\n  columnOrder: Array<string>;\n  onColumnOrderChange: (updater: Updater<Array<string>>) => void;\n  resetColumnOrder: () => void;\n  resetColumnSizing: () => void;\n  onHeaderSortClick: (columnConfig: IDataTableColumnConfig<T>) => void;\n  resolveSortDirection: (columnConfig: IDataTableColumnConfig<T>) => false | 'asc' | 'desc';\n  /** Omite o toggle de colunas do cabeçalho (quando o host o renderiza no toolbar). */\n  hideColumnToggle?: boolean;\n  /** Column that absorbs leftover horizontal space under table-fixed. */\n  flexColumnId?: string | null;\n  /** Show the frozen actions column shadow (set while the table scrolls sideways). */\n  showActionsShadow?: boolean;\n  /** Denser cell padding for embedded/editor (fit) layouts. */\n  dense?: boolean;\n  /** Roomier cell padding and type scale, for tables that need to read bigger. */\n  spacious?: boolean;\n}\n\nconst DataTableHead = <T extends IDataTableRow>({\n  table,\n  columns,\n  columnConfigById,\n  columnContentWidths,\n  columnOrder,\n  onColumnOrderChange,\n  resetColumnOrder,\n  resetColumnSizing,\n  onHeaderSortClick,\n  resolveSortDirection,\n  hideColumnToggle = false,\n  flexColumnId = null,\n  showActionsShadow = false,\n  dense = false,\n  spacious = false,\n}: IDataTableHeadProps<T>) => {\n  const { t } = useTranslation('ui');\n\n  const columnSizing = table.getState().columnSizing;\n  const { isResizingColumn } = table.getState().columnSizingInfo;\n\n  const renderResizeHandle = (header: Header<T, unknown>) => {\n    if (!header.column.getCanResize()) return null;\n    if (header.column.id === flexColumnId && !columnSizing[header.column.id]) return null;\n\n    const isResizing = isResizingColumn === header.column.id;\n\n    return (\n      <ControlledTooltip content={t('dataTable.resizeColumn')}>\n        <ControlledButton\n          defaultHtmlButton\n          onMouseDown={header.getResizeHandler()}\n          onTouchStart={header.getResizeHandler()}\n          onDoubleClick={() => header.column.resetSize()}\n          onClick={(event) => event.stopPropagation()}\n          className={classNames(\n            'absolute right-0 top-0 z-40 h-full w-3 cursor-col-resize touch-none select-none',\n            \"before:absolute before:inset-y-1 before:right-0 before:w-0.5 before:rounded-full before:content-['']\",\n            isResizing ? 'before:bg-brand' : 'before:bg-transparent hover:before:bg-brand-hover',\n          )}\n        >\n          {null}\n        </ControlledButton>\n      </ControlledTooltip>\n    );\n  };\n\n  const renderSortIndicator = (columnConfig: IDataTableColumnConfig<T>) => {\n    if (!columnConfig.sortable) return null;\n\n    const direction = resolveSortDirection(columnConfig);\n    const icon = direction === 'desc' ? 'arrow_downward' : 'arrow_upward';\n\n    return (\n      <MaterialSymbol\n        icon={icon}\n        size={14}\n        className={classNames('transition-opacity', {\n          'text-brand-emphasis opacity-100': !!direction,\n          'opacity-30': !direction,\n        })}\n      />\n    );\n  };\n\n  const visibleColumns = table.getVisibleLeafColumns();\n  const leafHeaders = table.getHeaderGroups()[0]?.headers ?? [];\n\n  // Banded header. The header keeps its single-row height: columns WITHOUT a\n  // `headerGroupLabel` render one cell spanning both rows (rowSpan 2, centered),\n  // while contiguous columns sharing a label split that same height into the\n  // group label (band row, fixed h-6) and their own labels (leaf row).\n  const headerGroupSegments = leafHeaders.reduce<\n    Array<{ label: string | null; headers: Array<{ header: Header<T, unknown>; index: number }> }>\n  >((segments, header, index) => {\n    const label = columnConfigById.get(header.column.id)?.headerGroupLabel ?? null;\n    const lastSegment = segments[segments.length - 1];\n\n    if (lastSegment && lastSegment.label === label) {\n      lastSegment.headers.push({ header, index });\n      return segments;\n    }\n\n    segments.push({ label, headers: [{ header, index }] });\n    return segments;\n  }, []);\n  const hasHeaderGroupRow = headerGroupSegments.some((segment) => segment.label !== null);\n\n  // `single`: the only row (no bands). `spanning`: ungrouped column spanning both\n  // rows of a banded header. `leaf`: grouped column's own label under its band.\n  const renderColumnHeaderCell = (\n    header: Header<T, unknown>,\n    headerIndex: number,\n    totalHeaders: number,\n    placement: 'single' | 'spanning' | 'leaf',\n  ) => {\n    const columnConfig = columnConfigById.get(header.column.id);\n    const isSortable = !!columnConfig?.sortable;\n    const isFirstColumn = headerIndex === 0;\n    const isLastColumn = headerIndex === totalHeaders - 1;\n    const isStickyLeft = isFirstColumn;\n    const isStickyRight = isLastColumn && columnConfig?.type === 'actions';\n\n    const rawHeaderContent = isSortable ? (\n      <ControlledButton\n        defaultHtmlButton\n        onClick={() => columnConfig && onHeaderSortClick(columnConfig)}\n        className=\"inline-flex cursor-pointer items-center gap-1 uppercase hover:text-foreground-muted\"\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {columnConfig && renderSortIndicator(columnConfig)}\n      </ControlledButton>\n    ) : (\n      flexRender(header.column.columnDef.header, header.getContext())\n    );\n\n    const headerContent = columnConfig?.headerTooltip ? (\n      <ControlledTooltip content={columnConfig.headerTooltip}>\n        <span className=\"inline-flex max-w-full\">{rawHeaderContent}</span>\n      </ControlledTooltip>\n    ) : (\n      rawHeaderContent\n    );\n\n    return (\n      <th\n        key={header.id}\n        rowSpan={placement === 'spanning' ? 2 : undefined}\n        className={classNames(\n          'sticky z-20 whitespace-nowrap bg-muted font-semibold uppercase tracking-wide text-foreground-subtle',\n          // The leaf row sits below the band row (fixed h-6) and closes the\n          // header's bottom edge; the other placements own both edges.\n          placement === 'leaf' ? 'top-6 border-b border-border' : 'top-0 border-y border-border',\n          // Outer edges come from the column's table position, not the row\n          // position: a banded header splits columns across two rows, so the\n          // `first:`/`last:` pseudo-classes would decorate the wrong cells.\n          isFirstColumn && 'border-l',\n          isFirstColumn && (placement === 'leaf' ? 'rounded-bl-md' : 'rounded-l-md'),\n          isLastColumn && 'border-r',\n          isLastColumn && (placement === 'leaf' ? 'rounded-br-md' : 'rounded-r-md'),\n          placement === 'spanning' && 'align-middle',\n          spacious ? 'text-xs' : 'text-xxs',\n          placement === 'leaf'\n            ? dense\n              ? 'px-3 py-1'\n              : spacious\n                ? 'px-5 py-1.5'\n                : 'px-4 py-1'\n            : dense\n              ? 'px-3 py-1.5'\n              : spacious\n                ? 'px-5 py-3.5'\n                : 'px-4 py-2.5',\n          alignClass(columnConfig?.headerAlign ?? columnConfig?.cellAlign),\n          isStickyLeft && 'left-0 z-30',\n          isStickyLeft && showActionsShadow && FROZEN_LEFT_COLUMN_SHADOW,\n          isStickyRight && 'right-0 z-30',\n          isStickyRight && showActionsShadow && FROZEN_COLUMN_SHADOW,\n        )}\n        style={{\n          minWidth:\n            columnContentWidths.get(header.column.id) ??\n            resolveColumnMinWidthPx(columnConfig, {\n              isFirstColumn,\n              hasColumnToggle: isFirstColumn && !hideColumnToggle,\n            }),\n        }}\n      >\n        {isFirstColumn && !hideColumnToggle ? (\n          <div className=\"flex items-center justify-between gap-2\">\n            {headerContent}\n            <DataTableColumnToggle\n              table={table}\n              columns={columns}\n              columnOrder={columnOrder}\n              onColumnOrderChange={onColumnOrderChange}\n              resetColumnOrder={resetColumnOrder}\n              resetColumnSizing={resetColumnSizing}\n            />\n          </div>\n        ) : (\n          headerContent\n        )}\n        {renderResizeHandle(header)}\n      </th>\n    );\n  };\n\n  return (\n    <>\n      <colgroup>\n        {visibleColumns.map((leafColumn, columnIndex) => {\n          const colConfig = columnConfigById.get(leafColumn.id);\n          const isFirstColumn = columnIndex === 0;\n          const isFlexColumn = leafColumn.id === flexColumnId && !columnSizing[leafColumn.id];\n          const minWidthPx =\n            columnContentWidths.get(leafColumn.id) ??\n            resolveColumnMinWidthPx(colConfig, {\n              isFirstColumn,\n              hasColumnToggle: isFirstColumn && !hideColumnToggle,\n            });\n\n          return (\n            <col\n              key={leafColumn.id}\n              style={isFlexColumn ? { minWidth: minWidthPx } : { width: leafColumn.getSize(), minWidth: minWidthPx }}\n            />\n          );\n        })}\n      </colgroup>\n\n      <thead>\n        {hasHeaderGroupRow ? (\n          <>\n            <tr className=\"bg-muted\">\n              {headerGroupSegments.map((segment) =>\n                segment.label === null ? (\n                  segment.headers.map(({ header, index }) =>\n                    renderColumnHeaderCell(header, index, leafHeaders.length, 'spanning'),\n                  )\n                ) : (\n                  <th\n                    key={`band:${segment.headers[0]?.header.id}`}\n                    colSpan={segment.headers.length}\n                    className={classNames(\n                      'sticky top-0 z-20 h-6 whitespace-nowrap border-x border-y border-border bg-muted px-3 py-0 text-center align-middle font-semibold uppercase tracking-wide text-foreground-subtle',\n                      spacious ? 'text-xs' : 'text-xxs',\n                      segment.headers[0]?.index === 0 && 'rounded-tl-md',\n                      segment.headers[segment.headers.length - 1]?.index === leafHeaders.length - 1 && 'rounded-tr-md',\n                    )}\n                  >\n                    {segment.label}\n                  </th>\n                ),\n              )}\n            </tr>\n            <tr className=\"bg-muted\">\n              {headerGroupSegments\n                .filter((segment) => segment.label !== null)\n                .flatMap((segment) => segment.headers)\n                .map(({ header, index }) => renderColumnHeaderCell(header, index, leafHeaders.length, 'leaf'))}\n            </tr>\n          </>\n        ) : (\n          <tr className=\"bg-muted\">\n            {leafHeaders.map((header, headerIndex) =>\n              renderColumnHeaderCell(header, headerIndex, leafHeaders.length, 'single'),\n            )}\n          </tr>\n        )}\n      </thead>\n    </>\n  );\n};\n\nexport default DataTableHead;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/DataTablePagination.d.ts

@@ -0,0 +1,15 @@
+interface IDataTablePaginationProps {
+    pageSize: number;
+    numberOfPages: number;
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    totalItems?: number;
+}
+export declare const DATA_TABLE_MIN_PAGE_SIZE: number;
+/**
+ * Compact, right-aligned pagination for the DataTable. Deliberately smaller and
+ * more discreet than the shared TableComponentPagination.
+ */
+declare const DataTablePagination: React.FC<IDataTablePaginationProps>;
+export default DataTablePagination;

package/dist/components/UI/DataTable/DataTablePagination.js

@@ -0,0 +1,145 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import { ControlledSelect } from "../../Form/ControlledSelect.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { formatNumber } from "../../../helpers/formatHelpers.js";
+const PAGE_SIZE_OPTIONS = [20, 50, 100];
+const DATA_TABLE_MIN_PAGE_SIZE = PAGE_SIZE_OPTIONS[0];
+const PAGE_SIZE_SELECT_OPTIONS = PAGE_SIZE_OPTIONS.map((size) => ({ value: size.toString(), label: size.toString() }));
+const PAGE_WINDOW_RADIUS = 1;
+const ELLIPSIS = "ellipsis";
+const COMPACT_PAGE_SIZE_SELECT = classNames(
+  "w-[72px]",
+  "[&_.controlled-select-input]:!min-w-0",
+  "[&_.controlled-select-container]:!min-w-0",
+  "[&_.controlled-select-container]:!h-8",
+  "[&_.controlled-select-input]:!py-1",
+  "[&_.controlled-select-input]:!text-xs"
+);
+const buildPageItems = (currentPage, numberOfPages) => {
+  if (numberOfPages <= 1) return [1];
+  const pages = /* @__PURE__ */ new Set([1, numberOfPages]);
+  for (let page = currentPage - PAGE_WINDOW_RADIUS; page <= currentPage + PAGE_WINDOW_RADIUS; page += 1) {
+    if (page >= 1 && page <= numberOfPages) pages.add(page);
+  }
+  const sortedPages = [...pages].sort((first, second) => first - second);
+  return sortedPages.flatMap((page, index) => {
+    const previousPage = sortedPages[index - 1];
+    return previousPage !== void 0 && page - previousPage > 1 ? [ELLIPSIS, page] : [page];
+  });
+};
+const DataTablePagination = ({
+  pageSize,
+  numberOfPages,
+  currentPage,
+  setCurrentPage,
+  onPageSizeChange,
+  totalItems
+}) => {
+  const { t } = useTranslation("ui");
+  const canPrev = currentPage > 1;
+  const canNext = currentPage < numberOfPages;
+  const pageItems = buildPageItems(currentPage, numberOfPages);
+  const stepClass = (enabled) => classNames(
+    "flex size-10 items-center justify-center rounded transition-colors tablet:size-8",
+    enabled ? "text-foreground-subtle hover:bg-muted-hover" : "text-foreground-faint"
+  );
+  const pageClass = (isCurrent) => classNames(
+    "flex size-10 items-center justify-center rounded text-xs tabular-nums transition-colors tablet:size-8",
+    isCurrent ? "bg-brand font-semibold text-brand-fg" : "text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted"
+  );
+  const rangeStart = (currentPage - 1) * pageSize + 1;
+  const rangeEnd = totalItems != null ? Math.min(currentPage * pageSize, totalItems) : currentPage * pageSize;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-2 pb-3 text-xs text-foreground-subtle", children: [
+    onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { children: t("pagination.resultsPerPage") }),
+      /* @__PURE__ */ jsx(
+        ControlledSelect,
+        {
+          options: PAGE_SIZE_SELECT_OPTIONS,
+          selectedValue: pageSize.toString(),
+          onChangeHook: (selected) => onPageSizeChange(Number(selected)),
+          searchable: false,
+          clearable: false,
+          className: COMPACT_PAGE_SIZE_SELECT
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: totalItems != null ? t("pagination.range", {
+      from: formatNumber(Math.min(rangeStart, rangeEnd)),
+      to: formatNumber(rangeEnd),
+      total: formatNumber(totalItems)
+    }) : t("pagination.pageOf", { current: currentPage, total: numberOfPages }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("pagination.first"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          disabled: !canPrev,
+          onClick: () => setCurrentPage(1),
+          className: stepClass(canPrev),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "first_page", size: 18 })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.previous"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          disabled: !canPrev,
+          onClick: () => setCurrentPage(currentPage - 1),
+          className: stepClass(canPrev),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_left", size: 18 })
+        }
+      ) }),
+      pageItems.map(
+        (item, index) => item === ELLIPSIS ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex size-10 items-center justify-center text-foreground-faint tablet:size-8",
+            "aria-hidden": true,
+            children: t("pagination.gap")
+          },
+          `data-table-pagination-gap-${index}`
+        ) : /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            "aria-current": item === currentPage ? "page" : void 0,
+            onClick: () => setCurrentPage(item),
+            className: pageClass(item === currentPage),
+            children: formatNumber(item)
+          },
+          `data-table-pagination-page-${item}`
+        )
+      ),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.next"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          disabled: !canNext,
+          onClick: () => setCurrentPage(currentPage + 1),
+          className: stepClass(canNext),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_right", size: 18 })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("pagination.last"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          disabled: !canNext,
+          onClick: () => setCurrentPage(numberOfPages),
+          className: stepClass(canNext),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "last_page", size: 18 })
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  DATA_TABLE_MIN_PAGE_SIZE,
+  DataTablePagination as default
+};
+//# sourceMappingURL=DataTablePagination.js.map

package/dist/components/UI/DataTable/DataTablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.js","sources":["../../../../src/components/UI/DataTable/DataTablePagination.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { ControlledSelect } from '@/components/Form/ControlledSelect';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { formatNumber } from '@/helpers/formatHelpers';\n\ninterface IDataTablePaginationProps {\n  pageSize: number;\n  numberOfPages: number;\n  currentPage: number;\n  setCurrentPage: (page: number) => void;\n  onPageSizeChange?: (pageSize: number) => void;\n  totalItems?: number;\n}\n\nconst PAGE_SIZE_OPTIONS = [20, 50, 100];\n\nexport const DATA_TABLE_MIN_PAGE_SIZE = PAGE_SIZE_OPTIONS[0];\nconst PAGE_SIZE_SELECT_OPTIONS = PAGE_SIZE_OPTIONS.map((size) => ({ value: size.toString(), label: size.toString() }));\n\n/** Botões de página ao redor da atual, com as pontas sempre alcançáveis. */\nconst PAGE_WINDOW_RADIUS = 1;\nconst ELLIPSIS = 'ellipsis';\n\n// The shared ControlledSelect trigger ships a wide (min-w-52) field at the default\n// input height. For the pagination we want a compact, discreet picker, so we release\n// the min-widths and shrink the trigger's width and height via arbitrary variants\n// (same technique used elsewhere in the app to shrink this trigger).\nconst COMPACT_PAGE_SIZE_SELECT = classNames(\n  'w-[72px]',\n  '[&_.controlled-select-input]:!min-w-0',\n  '[&_.controlled-select-container]:!min-w-0',\n  '[&_.controlled-select-container]:!h-8',\n  '[&_.controlled-select-input]:!py-1',\n  '[&_.controlled-select-input]:!text-xs',\n);\n\n/**\n * Páginas visíveis: primeira, última, a atual e uma vizinha de cada lado.\n * As reticências entram só quando existe salto real, então a barra nunca muda\n * de largura a cada clique.\n */\nconst buildPageItems = (currentPage: number, numberOfPages: number): Array<number | typeof ELLIPSIS> => {\n  if (numberOfPages <= 1) return [1];\n\n  const pages = new Set<number>([1, numberOfPages]);\n  for (let page = currentPage - PAGE_WINDOW_RADIUS; page <= currentPage + PAGE_WINDOW_RADIUS; page += 1) {\n    if (page >= 1 && page <= numberOfPages) pages.add(page);\n  }\n\n  const sortedPages = [...pages].sort((first, second) => first - second);\n\n  return sortedPages.flatMap((page, index) => {\n    const previousPage = sortedPages[index - 1];\n    return previousPage !== undefined && page - previousPage > 1 ? [ELLIPSIS, page] : [page];\n  });\n};\n\n/**\n * Compact, right-aligned pagination for the DataTable. Deliberately smaller and\n * more discreet than the shared TableComponentPagination.\n */\nconst DataTablePagination: React.FC<IDataTablePaginationProps> = ({\n  pageSize,\n  numberOfPages,\n  currentPage,\n  setCurrentPage,\n  onPageSizeChange,\n  totalItems,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const canPrev = currentPage > 1;\n  const canNext = currentPage < numberOfPages;\n  const pageItems = buildPageItems(currentPage, numberOfPages);\n\n  // The arrows are the only way to page on touch, so they keep a ~40px target\n  // instead of the icon's own 18px box, while staying visually compact.\n  const stepClass = (enabled: boolean) =>\n    classNames(\n      'flex size-10 items-center justify-center rounded transition-colors tablet:size-8',\n      enabled ? 'text-foreground-subtle hover:bg-muted-hover' : 'text-foreground-faint',\n    );\n\n  const pageClass = (isCurrent: boolean) =>\n    classNames(\n      'flex size-10 items-center justify-center rounded text-xs tabular-nums transition-colors tablet:size-8',\n      isCurrent\n        ? 'bg-brand font-semibold text-brand-fg'\n        : 'text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted',\n    );\n\n  const rangeStart = (currentPage - 1) * pageSize + 1;\n  const rangeEnd = totalItems != null ? Math.min(currentPage * pageSize, totalItems) : currentPage * pageSize;\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-end gap-x-4 gap-y-2 pb-3 text-xs text-foreground-subtle\">\n      {onPageSizeChange && (\n        <div className=\"flex items-center gap-1.5\">\n          <span>{t('pagination.resultsPerPage')}</span>\n          <ControlledSelect\n            options={PAGE_SIZE_SELECT_OPTIONS}\n            selectedValue={pageSize.toString()}\n            onChangeHook={(selected) => onPageSizeChange(Number(selected))}\n            searchable={false}\n            clearable={false}\n            className={COMPACT_PAGE_SIZE_SELECT}\n          />\n        </div>\n      )}\n\n      <span className=\"tabular-nums\">\n        {totalItems != null\n          ? t('pagination.range', {\n              from: formatNumber(Math.min(rangeStart, rangeEnd)),\n              to: formatNumber(rangeEnd),\n              total: formatNumber(totalItems),\n            })\n          : t('pagination.pageOf', { current: currentPage, total: numberOfPages })}\n      </span>\n\n      <div className=\"flex items-center gap-0.5\">\n        <ControlledTooltip content={t('pagination.first')}>\n          <ControlledButton\n            defaultHtmlButton\n            disabled={!canPrev}\n            onClick={() => setCurrentPage(1)}\n            className={stepClass(canPrev)}\n          >\n            <MaterialSymbol icon=\"first_page\" size={18} />\n          </ControlledButton>\n        </ControlledTooltip>\n        <ControlledTooltip content={t('actions.previous')}>\n          <ControlledButton\n            defaultHtmlButton\n            disabled={!canPrev}\n            onClick={() => setCurrentPage(currentPage - 1)}\n            className={stepClass(canPrev)}\n          >\n            <MaterialSymbol icon=\"chevron_left\" size={18} />\n          </ControlledButton>\n        </ControlledTooltip>\n\n        {pageItems.map((item, index) =>\n          item === ELLIPSIS ? (\n            <span\n              key={`data-table-pagination-gap-${index}`}\n              className=\"flex size-10 items-center justify-center text-foreground-faint tablet:size-8\"\n              aria-hidden\n            >\n              {t('pagination.gap')}\n            </span>\n          ) : (\n            <ControlledButton\n              key={`data-table-pagination-page-${item}`}\n              defaultHtmlButton\n              aria-current={item === currentPage ? 'page' : undefined}\n              onClick={() => setCurrentPage(item)}\n              className={pageClass(item === currentPage)}\n            >\n              {formatNumber(item)}\n            </ControlledButton>\n          ),\n        )}\n\n        <ControlledTooltip content={t('actions.next')}>\n          <ControlledButton\n            defaultHtmlButton\n            disabled={!canNext}\n            onClick={() => setCurrentPage(currentPage + 1)}\n            className={stepClass(canNext)}\n          >\n            <MaterialSymbol icon=\"chevron_right\" size={18} />\n          </ControlledButton>\n        </ControlledTooltip>\n        <ControlledTooltip content={t('pagination.last')}>\n          <ControlledButton\n            defaultHtmlButton\n            disabled={!canNext}\n            onClick={() => setCurrentPage(numberOfPages)}\n            className={stepClass(canNext)}\n          >\n            <MaterialSymbol icon=\"last_page\" size={18} />\n          </ControlledButton>\n        </ControlledTooltip>\n      </div>\n    </div>\n  );\n};\n\nexport default DataTablePagination;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/DataTableSaveButton.d.ts

@@ -0,0 +1,13 @@
+interface IDataTableSaveButtonProps {
+    onClick: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    label?: string;
+}
+/**
+ * Toolbar action for saving pending inline edits held in `useDataTableEditBuffer`.
+ * Drop it into the DataTable `toolbarSlot` and wire `onClick` to the hook's
+ * `flush`, `loading` to its `loading`, and `disabled` to `!isDirty`.
+ */
+declare const DataTableSaveButton: React.FC<IDataTableSaveButtonProps>;
+export default DataTableSaveButton;

package/dist/components/UI/DataTable/DataTableSaveButton.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import LoadingSpinner from "../LoadingSpinner.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+const DataTableSaveButton = ({
+  onClick,
+  loading = false,
+  disabled = false,
+  label
+}) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs(ControlledButton, { disabled: disabled || loading, onClick, className: "flex items-center gap-1.5", children: [
+    loading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "white" }) : /* @__PURE__ */ jsx(MaterialSymbol, { icon: "save", size: 18 }),
+    label ?? t("dataTable.save")
+  ] });
+};
+export {
+  DataTableSaveButton as default
+};
+//# sourceMappingURL=DataTableSaveButton.js.map

package/dist/components/UI/DataTable/DataTableSaveButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSaveButton.js","sources":["../../../../src/components/UI/DataTable/DataTableSaveButton.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\ninterface IDataTableSaveButtonProps {\n  onClick: () => void;\n  loading?: boolean;\n  disabled?: boolean;\n  label?: string;\n}\n\n/**\n * Toolbar action for saving pending inline edits held in `useDataTableEditBuffer`.\n * Drop it into the DataTable `toolbarSlot` and wire `onClick` to the hook's\n * `flush`, `loading` to its `loading`, and `disabled` to `!isDirty`.\n */\nconst DataTableSaveButton: React.FC<IDataTableSaveButtonProps> = ({\n  onClick,\n  loading = false,\n  disabled = false,\n  label,\n}) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <ControlledButton disabled={disabled || loading} onClick={onClick} className=\"flex items-center gap-1.5\">\n      {loading ? <LoadingSpinner size={4} color=\"white\" /> : <MaterialSymbol icon=\"save\" size={18} />}\n      {label ?? t('dataTable.save')}\n    </ControlledButton>\n  );\n};\n\nexport default DataTableSaveButton;\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,sBAA2D,CAAC;AAAA,EAChE;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,8BACG,kBAAA,EAAiB,UAAU,YAAY,SAAS,SAAkB,WAAU,6BAC1E,UAAA;AAAA,IAAA,UAAU,oBAAC,gBAAA,EAAe,MAAM,GAAG,OAAM,QAAA,CAAQ,IAAK,oBAAC,gBAAA,EAAe,MAAK,QAAO,MAAM,IAAI;AAAA,IAC5F,SAAS,EAAE,gBAAgB;AAAA,EAAA,GAC9B;AAEJ;"}

package/dist/components/UI/DataTable/DataTableSegmentedTabs.d.ts

@@ -0,0 +1,8 @@
+import { IDataTableRow, IDataTableTab } from './types';
+interface IDataTableSegmentedTabsProps<T extends IDataTableRow> {
+    tabs: Array<IDataTableTab<T>>;
+    activeTab: string;
+    onChange: (value: string) => void;
+}
+declare const DataTableSegmentedTabs: <T extends IDataTableRow>({ tabs, activeTab, onChange, }: IDataTableSegmentedTabsProps<T>) => import("react").JSX.Element;
+export default DataTableSegmentedTabs;

package/dist/components/UI/DataTable/DataTableSegmentedTabs.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import ControlledButton from "../../Form/ControlledButton.js";
+import HorizontalScrollArea from "../HorizontalScrollArea.js";
+const DataTableSegmentedTabs = ({
+  tabs,
+  activeTab,
+  onChange
+}) => (
+  // The segments never wrap (a wrapped pill bar reads as two separate controls),
+  // so on a narrow toolbar they scroll instead of being clipped out of reach.
+  /* @__PURE__ */ jsx(HorizontalScrollArea, { containerClassName: "rounded-lg bg-muted-hover", className: "p-1", children: /* @__PURE__ */ jsx("div", { className: "flex w-max items-center gap-1", children: tabs.map((tab) => {
+    const isActive = tab.value === activeTab;
+    return /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: () => onChange(tab.value),
+        className: classNames(
+          "min-h-9 shrink-0 whitespace-nowrap rounded-md px-4 py-1.5 text-sm font-medium transition-colors",
+          {
+            "bg-brand text-brand-fg shadow-sm": isActive,
+            "text-foreground-muted hover:text-foreground": !isActive
+          }
+        ),
+        children: tab.count !== void 0 ? `${tab.label} (${tab.count})` : tab.label
+      },
+      tab.value
+    );
+  }) }) })
+);
+export {
+  DataTableSegmentedTabs as default
+};
+//# sourceMappingURL=DataTableSegmentedTabs.js.map

package/dist/components/UI/DataTable/DataTableSegmentedTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSegmentedTabs.js","sources":["../../../../src/components/UI/DataTable/DataTableSegmentedTabs.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport HorizontalScrollArea from '@/components/UI/HorizontalScrollArea';\n\nimport type { IDataTableRow, IDataTableTab } from './types';\n\ninterface IDataTableSegmentedTabsProps<T extends IDataTableRow> {\n  tabs: Array<IDataTableTab<T>>;\n  activeTab: string;\n  onChange: (value: string) => void;\n}\n\nconst DataTableSegmentedTabs = <T extends IDataTableRow>({\n  tabs,\n  activeTab,\n  onChange,\n}: IDataTableSegmentedTabsProps<T>) => (\n  // The segments never wrap (a wrapped pill bar reads as two separate controls),\n  // so on a narrow toolbar they scroll instead of being clipped out of reach.\n  <HorizontalScrollArea containerClassName=\"rounded-lg bg-muted-hover\" className=\"p-1\">\n    <div className=\"flex w-max items-center gap-1\">\n      {tabs.map((tab) => {\n        const isActive = tab.value === activeTab;\n\n        return (\n          <ControlledButton\n            key={tab.value}\n            defaultHtmlButton\n            onClick={() => onChange(tab.value)}\n            className={classNames(\n              'min-h-9 shrink-0 whitespace-nowrap rounded-md px-4 py-1.5 text-sm font-medium transition-colors',\n              {\n                'bg-brand text-brand-fg shadow-sm': isActive,\n                'text-foreground-muted hover:text-foreground': !isActive,\n              },\n            )}\n          >\n            {tab.count !== undefined ? `${tab.label} (${tab.count})` : tab.label}\n          </ControlledButton>\n        );\n      })}\n    </div>\n  </HorizontalScrollArea>\n);\n\nexport default DataTableSegmentedTabs;\n"],"names":[],"mappings":";;;;AAaA,MAAM,yBAAyB,CAA0B;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AACF;AAAA;AAAA;AAAA,EAGE,oBAAC,sBAAA,EAAqB,oBAAmB,6BAA4B,WAAU,OAC7E,UAAA,oBAAC,OAAA,EAAI,WAAU,iCACZ,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,UAAM,WAAW,IAAI,UAAU;AAE/B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,mBAAiB;AAAA,QACjB,SAAS,MAAM,SAAS,IAAI,KAAK;AAAA,QACjC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,oCAAoC;AAAA,YACpC,+CAA+C,CAAC;AAAA,UAAA;AAAA,QAClD;AAAA,QAGD,UAAA,IAAI,UAAU,SAAY,GAAG,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM,IAAI;AAAA,MAAA;AAAA,MAX1D,IAAI;AAAA,IAAA;AAAA,EAcf,CAAC,GACH,EAAA,CACF;AAAA;"}

package/dist/components/UI/DataTable/DataTableStates.d.ts

@@ -0,0 +1,17 @@
+export declare const DataTableSkeletonState: React.FC<{
+    rows?: number;
+}>;
+export declare const DataTableCardsSkeletonState: React.FC<{
+    cardClassName?: string;
+}>;
+interface IDataTableErrorStateProps {
+    onRetry?: () => void;
+    /** The caught error, so a denial or a dropped connection does not read as a system failure. */
+    errorCause?: unknown;
+}
+export declare const DataTableErrorState: React.FC<IDataTableErrorStateProps>;
+interface IDataTableEmptyStateProps {
+    emptyMessage?: string;
+}
+export declare const DataTableEmptyState: React.FC<IDataTableEmptyStateProps>;
+export {};

package/dist/components/UI/DataTable/DataTableStates.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
+import NoDataFound from "../NoDataFound/index.js";
+import SkeletonLoading from "../SkeletonLoading.js";
+import { describeUiError } from "../../../helpers/uiErrorPresenter.js";
+const DEFAULT_SKELETON_ROWS = 8;
+const DataTableSkeletonState = ({ rows = DEFAULT_SKELETON_ROWS }) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 py-4", children: Array.from({ length: Math.max(1, rows) }).map((_, index) => /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-9" }, `data-table-skeleton-${index}`)) });
+const DataTableCardsSkeletonState = ({ cardClassName }) => (
+  // Mesmo contêiner e mesmo alinhamento da grade real: sem o `@container` aqui, um
+  // card de largura responsiva não teria contra o que medir enquanto carrega.
+  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-4 py-2 @container @md:justify-start", children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "w-52 animate-pulse overflow-hidden rounded-lg border border-border-subtle bg-surface",
+        cardClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-muted-active" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-3", children: [
+          /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-3 w-1/2" }),
+          /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-3 w-2/3" }),
+          /* @__PURE__ */ jsx(SkeletonLoading, { className: "mt-1 h-3 w-1/3" })
+        ] })
+      ]
+    },
+    `data-table-card-skeleton-${index}`
+  )) })
+);
+const DataTableErrorState = ({ onRetry, errorCause }) => {
+  const { t } = useTranslation("ui");
+  const presentation = describeUiError(errorCause);
+  const retryAction = onRetry ? { label: t("actions.tryAgain"), onClick: onRetry, icon: "refresh" } : void 0;
+  if (!presentation) {
+    return /* @__PURE__ */ jsx(NoDataFound, { variant: "error", title: t("dataTable.error"), action: retryAction });
+  }
+  return /* @__PURE__ */ jsx(
+    NoDataFound,
+    {
+      variant: presentation.variant,
+      title: t(presentation.titleKey),
+      description: t(presentation.descriptionKey),
+      action: presentation.isRetryable ? retryAction : void 0
+    }
+  );
+};
+const DataTableEmptyState = ({ emptyMessage }) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx(NoDataFound, { message: emptyMessage ?? t("dataTable.empty") });
+};
+export {
+  DataTableCardsSkeletonState,
+  DataTableEmptyState,
+  DataTableErrorState,
+  DataTableSkeletonState
+};
+//# sourceMappingURL=DataTableStates.js.map

package/dist/components/UI/DataTable/DataTableStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableStates.js","sources":["../../../../src/components/UI/DataTable/DataTableStates.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport SkeletonLoading from '@/components/UI/SkeletonLoading';\nimport { describeUiError } from '@/helpers/uiErrorPresenter';\n\nconst DEFAULT_SKELETON_ROWS = 8;\n\nexport const DataTableSkeletonState: React.FC<{ rows?: number }> = ({ rows = DEFAULT_SKELETON_ROWS }) => (\n  <div className=\"flex flex-col gap-2 py-4\">\n    {Array.from({ length: Math.max(1, rows) }).map((_, index) => (\n      <SkeletonLoading key={`data-table-skeleton-${index}`} className=\"h-9\" />\n    ))}\n  </div>\n);\n\nexport const DataTableCardsSkeletonState: React.FC<{ cardClassName?: string }> = ({ cardClassName }) => (\n  // Mesmo contêiner e mesmo alinhamento da grade real: sem o `@container` aqui, um\n  // card de largura responsiva não teria contra o que medir enquanto carrega.\n  <div className=\"flex flex-wrap justify-center gap-4 py-2 @container @md:justify-start\">\n    {Array.from({ length: 12 }).map((_, index) => (\n      <div\n        key={`data-table-card-skeleton-${index}`}\n        className={twMerge(\n          'w-52 animate-pulse overflow-hidden rounded-lg border border-border-subtle bg-surface',\n          cardClassName,\n        )}\n      >\n        <div className=\"aspect-square w-full bg-muted-active\" />\n        <div className=\"flex flex-col gap-2 p-3\">\n          <SkeletonLoading className=\"h-4 w-3/4\" />\n          <SkeletonLoading className=\"h-3 w-1/2\" />\n          <SkeletonLoading className=\"h-3 w-2/3\" />\n          <SkeletonLoading className=\"mt-1 h-3 w-1/3\" />\n        </div>\n      </div>\n    ))}\n  </div>\n);\n\ninterface IDataTableErrorStateProps {\n  onRetry?: () => void;\n  /** The caught error, so a denial or a dropped connection does not read as a system failure. */\n  errorCause?: unknown;\n}\n\nexport const DataTableErrorState: React.FC<IDataTableErrorStateProps> = ({ onRetry, errorCause }) => {\n  const { t } = useTranslation('ui');\n  const presentation = describeUiError(errorCause);\n  const retryAction = onRetry\n    ? { label: t('actions.tryAgain'), onClick: onRetry, icon: 'refresh' as const }\n    : undefined;\n\n  if (!presentation) {\n    return <NoDataFound variant=\"error\" title={t('dataTable.error')} action={retryAction} />;\n  }\n\n  return (\n    <NoDataFound\n      variant={presentation.variant}\n      title={t(presentation.titleKey)}\n      description={t(presentation.descriptionKey)}\n      action={presentation.isRetryable ? retryAction : undefined}\n    />\n  );\n};\n\ninterface IDataTableEmptyStateProps {\n  emptyMessage?: string;\n}\n\nexport const DataTableEmptyState: React.FC<IDataTableEmptyStateProps> = ({ emptyMessage }) => {\n  const { t } = useTranslation('ui');\n\n  return <NoDataFound message={emptyMessage ?? t('dataTable.empty')} />;\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,wBAAwB;AAEvB,MAAM,yBAAsD,CAAC,EAAE,OAAO,4BAC3E,oBAAC,OAAA,EAAI,WAAU,4BACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,IAAI,EAAA,CAAG,EAAE,IAAI,CAAC,GAAG,UACjD,oBAAC,iBAAA,EAAqD,WAAU,MAAA,GAA1C,uBAAuB,KAAK,EAAoB,CACvE,EAAA,CACH;AAGK,MAAM,8BAAoE,CAAC,EAAE,cAAA;AAAA;AAAA;AAAA,EAGlF,oBAAC,OAAA,EAAI,WAAU,yEACZ,gBAAM,KAAK,EAAE,QAAQ,GAAA,CAAI,EAAE,IAAI,CAAC,GAAG,UAClC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,uCAAA,CAAuC;AAAA,QACtD,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAA,oBAAC,iBAAA,EAAgB,WAAU,YAAA,CAAY;AAAA,UACvC,oBAAC,iBAAA,EAAgB,WAAU,YAAA,CAAY;AAAA,UACvC,oBAAC,iBAAA,EAAgB,WAAU,YAAA,CAAY;AAAA,UACvC,oBAAC,iBAAA,EAAgB,WAAU,iBAAA,CAAiB;AAAA,QAAA,EAAA,CAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,IAZK,4BAA4B,KAAK;AAAA,EAAA,CAczC,EAAA,CACH;AAAA;AASK,MAAM,sBAA2D,CAAC,EAAE,SAAS,iBAAiB;AACnG,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,eAAe,gBAAgB,UAAU;AAC/C,QAAM,cAAc,UAChB,EAAE,OAAO,EAAE,kBAAkB,GAAG,SAAS,SAAS,MAAM,UAAA,IACxD;AAEJ,MAAI,CAAC,cAAc;AACjB,WAAO,oBAAC,eAAY,SAAQ,SAAQ,OAAO,EAAE,iBAAiB,GAAG,QAAQ,YAAA,CAAa;AAAA,EACxF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,aAAa;AAAA,MACtB,OAAO,EAAE,aAAa,QAAQ;AAAA,MAC9B,aAAa,EAAE,aAAa,cAAc;AAAA,MAC1C,QAAQ,aAAa,cAAc,cAAc;AAAA,IAAA;AAAA,EAAA;AAGvD;AAMO,MAAM,sBAA2D,CAAC,EAAE,mBAAmB;AAC5F,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,6BAAQ,aAAA,EAAY,SAAS,gBAAgB,EAAE,iBAAiB,GAAG;AACrE;"}