@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

package/dist/components/data-table/loading/get-data-table-loading-without-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-data-table-loading-without-rows.js","names":[],"sources":["../../../../src/components/data-table/loading/get-data-table-loading-without-rows.ts"],"sourcesContent":["import type { RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport { hasTableFeature } from '../../../utils';\n\n/**\n * Se a tabela carrega sem nenhuma linha, como na primeira carga: o corpo mostra as\n * linhas-fantasma, e a barra da paginação, sem o total, que ainda não chegou. Sem\n * `loadingFeature`, `false`.\n *\n * @example\n * ```ts\n * // Primeira carga da API: `isLoading: true` e `data: []`.\n * getDataTableLoadingWithoutRows(table); // → true\n * ```\n */\nexport const getDataTableLoadingWithoutRows = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table<TFeatures, TData>,\n) =>\n  hasTableFeature(table, 'loadingFeature') &&\n  table.atoms.isLoading.get() &&\n  table.getRowModel().rows.length === 0;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,kCAIX,UAEA,gBAAgB,OAAO,gBAAgB,KACvC,MAAM,MAAM,UAAU,IAAI,KAC1B,MAAM,YAAY,CAAC,CAAC,KAAK,WAAW"}

package/dist/components/data-table/loading/use-data-table-loading-inert.d.ts

@@ -0,0 +1,16 @@
+import { RowData, Table, TableFeatures } from "@tanstack/react-table";
+import React from "react";
+//#region src/components/data-table/loading/use-data-table-loading-inert.d.ts
+/**
+ * Bloqueia o corpo (`inert`) enquanto a tabela carrega, com `loadingFeature`: um clique, o Enter
+ * ou o Delete agiriam sobre o dado antigo. O cabeçalho e a paginação ficam livres.
+ *
+ * O `inert` tira o foco de uma linha. Se o foco estava no corpo quando a carga começou, ele volta
+ * quando ela termina: para a linha ativa, se ela continua na tela, ou para a primeira.
+ *
+ * Assina o store fora do React, como as variáveis das colunas: o atributo muda sem re-renderizar
+ * o corpo, que recriaria todas as linhas.
+ */
+export declare const useDataTableLoadingInert: <TFeatures extends TableFeatures, TData extends RowData>(table: Table<TFeatures, TData>, ref: React.RefObject<HTMLElement | null>) => void;
+//#endregion
+//# sourceMappingURL=use-data-table-loading-inert.d.ts.map

package/dist/components/data-table/loading/use-data-table-loading-inert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-loading-inert.d.ts","names":[],"sources":["../../../../src/components/data-table/loading/use-data-table-loading-inert.ts"],"mappings":";;;;;;;;;;;;;qBAmBa,2BACX,kBAAkB,eAClB,cAAc,SAEd,OAAO,MAAM,WAAW,QACxB,KAAK,MAAM,UAAU"}

package/dist/components/data-table/loading/use-data-table-loading-inert.js

@@ -0,0 +1,54 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { focusDataTableRow, getDataTableRowElements } from "../body/data-table-row-focus.js";
+import { useLayoutEffect, useRef } from "react";
+//#region src/components/data-table/loading/use-data-table-loading-inert.ts
+/**
+* Bloqueia o corpo (`inert`) enquanto a tabela carrega, com `loadingFeature`: um clique, o Enter
+* ou o Delete agiriam sobre o dado antigo. O cabeçalho e a paginação ficam livres.
+*
+* O `inert` tira o foco de uma linha. Se o foco estava no corpo quando a carga começou, ele volta
+* quando ela termina: para a linha ativa, se ela continua na tela, ou para a primeira.
+*
+* Assina o store fora do React, como as variáveis das colunas: o atributo muda sem re-renderizar
+* o corpo, que recriaria todas as linhas.
+*/
+const useDataTableLoadingInert = (table, ref) => {
+	/** A tabela do último render, lida por ref para não refazer a assinatura a cada render. */
+	const tableRef = useRef(table);
+	useLayoutEffect(() => {
+		tableRef.current = table;
+	});
+	useLayoutEffect(() => {
+		/** Se o foco estava no corpo quando a carga começou. */
+		let wasFocusInside = false;
+		const syncInert = () => {
+			const element = ref.current;
+			const currentTable = tableRef.current;
+			if (!element) return;
+			const isLoading = hasTableFeature(currentTable, "loadingFeature") && currentTable.atoms.isLoading.get();
+			if (isLoading === element.hasAttribute("inert")) return;
+			if (isLoading) {
+				wasFocusInside = element.contains(document.activeElement);
+				element.setAttribute("inert", "");
+				return;
+			}
+			element.removeAttribute("inert");
+			if (!wasFocusInside) return;
+			wasFocusInside = false;
+			/** No próximo quadro, com as linhas novas já no DOM. */
+			requestAnimationFrame(() => {
+				const { activeElement } = document;
+				if (activeElement && activeElement !== document.body) return;
+				const targetRow = element.querySelector("[role=\"row\"][data-active]") ?? getDataTableRowElements(element)[0];
+				if (targetRow) focusDataTableRow(targetRow);
+			});
+		};
+		syncInert();
+		const subscription = table.store.subscribe(syncInert);
+		return () => subscription.unsubscribe();
+	}, [table.store, ref]);
+};
+//#endregion
+export { useDataTableLoadingInert };
+
+//# sourceMappingURL=use-data-table-loading-inert.js.map

package/dist/components/data-table/loading/use-data-table-loading-inert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-loading-inert.js","names":[],"sources":["../../../../src/components/data-table/loading/use-data-table-loading-inert.ts"],"sourcesContent":["import type { RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useLayoutEffect, useRef } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport {\n  focusDataTableRow,\n  getDataTableRowElements,\n} from '../body/data-table-row-focus';\n\n/**\n * Bloqueia o corpo (`inert`) enquanto a tabela carrega, com `loadingFeature`: um clique, o Enter\n * ou o Delete agiriam sobre o dado antigo. O cabeçalho e a paginação ficam livres.\n *\n * O `inert` tira o foco de uma linha. Se o foco estava no corpo quando a carga começou, ele volta\n * quando ela termina: para a linha ativa, se ela continua na tela, ou para a primeira.\n *\n * Assina o store fora do React, como as variáveis das colunas: o atributo muda sem re-renderizar\n * o corpo, que recriaria todas as linhas.\n */\nexport const useDataTableLoadingInert = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table<TFeatures, TData>,\n  ref: React.RefObject<HTMLElement | null>,\n) => {\n  /** A tabela do último render, lida por ref para não refazer a assinatura a cada render. */\n  const tableRef = useRef(table);\n\n  useLayoutEffect(() => {\n    tableRef.current = table;\n  });\n\n  useLayoutEffect(() => {\n    /** Se o foco estava no corpo quando a carga começou. */\n    let wasFocusInside = false;\n\n    const syncInert = () => {\n      const element = ref.current;\n      const currentTable = tableRef.current;\n\n      if (!element) {\n        return;\n      }\n\n      const isLoading =\n        hasTableFeature(currentTable, 'loadingFeature') &&\n        currentTable.atoms.isLoading.get();\n\n      if (isLoading === element.hasAttribute('inert')) {\n        return;\n      }\n\n      if (isLoading) {\n        wasFocusInside = element.contains(document.activeElement);\n        element.setAttribute('inert', '');\n\n        return;\n      }\n\n      element.removeAttribute('inert');\n\n      if (!wasFocusInside) {\n        return;\n      }\n\n      wasFocusInside = false;\n\n      /** No próximo quadro, com as linhas novas já no DOM. */\n      requestAnimationFrame(() => {\n        const { activeElement } = document;\n\n        if (activeElement && activeElement !== document.body) {\n          return;\n        }\n\n        const targetRow =\n          element.querySelector<HTMLElement>('[role=\"row\"][data-active]') ??\n          getDataTableRowElements(element)[0];\n\n        if (targetRow) {\n          focusDataTableRow(targetRow);\n        }\n      });\n    };\n\n    syncInert();\n\n    const subscription = table.store.subscribe(syncInert);\n\n    return () => subscription.unsubscribe();\n  }, [table.store, ref]);\n};\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAa,4BAIX,OACA,QACG;;CAEH,MAAM,WAAW,OAAO,KAAK;CAE7B,sBAAsB;EACpB,SAAS,UAAU;CACrB,CAAC;CAED,sBAAsB;;EAEpB,IAAI,iBAAiB;EAErB,MAAM,kBAAkB;GACtB,MAAM,UAAU,IAAI;GACpB,MAAM,eAAe,SAAS;GAE9B,IAAI,CAAC,SACH;GAGF,MAAM,YACJ,gBAAgB,cAAc,gBAAgB,KAC9C,aAAa,MAAM,UAAU,IAAI;GAEnC,IAAI,cAAc,QAAQ,aAAa,OAAO,GAC5C;GAGF,IAAI,WAAW;IACb,iBAAiB,QAAQ,SAAS,SAAS,aAAa;IACxD,QAAQ,aAAa,SAAS,EAAE;IAEhC;GACF;GAEA,QAAQ,gBAAgB,OAAO;GAE/B,IAAI,CAAC,gBACH;GAGF,iBAAiB;;GAGjB,4BAA4B;IAC1B,MAAM,EAAE,kBAAkB;IAE1B,IAAI,iBAAiB,kBAAkB,SAAS,MAC9C;IAGF,MAAM,YACJ,QAAQ,cAA2B,6BAA2B,KAC9D,wBAAwB,OAAO,CAAC,CAAC;IAEnC,IAAI,WACF,kBAAkB,SAAS;GAE/B,CAAC;EACH;EAEA,UAAU;EAEV,MAAM,eAAe,MAAM,MAAM,UAAU,SAAS;EAEpD,aAAa,aAAa,YAAY;CACxC,GAAG,CAAC,MAAM,OAAO,GAAG,CAAC;AACvB"}

package/dist/components/data-table/loading/use-data-table-loading.d.ts

@@ -0,0 +1,13 @@
+import { RowData, Table, TableFeatures } from "@tanstack/react-table";
+//#region src/components/data-table/loading/use-data-table-loading.d.ts
+/**
+ * O carregamento da tabela, de `loadingFeature`: `isLoading` na hora, para o `aria-busy`, e
+ * `isLoadingVisible` depois de 200ms, para o que aparece na tela. Sem a feature, os dois ficam
+ * `false`.
+ */
+export declare const useDataTableLoading: <TFeatures extends TableFeatures, TData extends RowData>(table: Table<TFeatures, TData>) => {
+  isLoading: boolean;
+  isLoadingVisible: boolean;
+};
+//#endregion
+//# sourceMappingURL=use-data-table-loading.d.ts.map

package/dist/components/data-table/loading/use-data-table-loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-loading.d.ts","names":[],"sources":["../../../../src/components/data-table/loading/use-data-table-loading.ts"],"mappings":";;;;;;;qBAgBa,sBACX,kBAAkB,eAClB,cAAc,SAEd,OAAO,MAAM,WAAW"}

package/dist/components/data-table/loading/use-data-table-loading.js

@@ -0,0 +1,40 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { useSelector } from "@tanstack/react-store";
+import { useEffect, useState } from "react";
+//#region src/components/data-table/loading/use-data-table-loading.ts
+/**
+* Quanto o carregamento espera antes de aparecer. Uma resposta mais rápida que isto não mostra
+* nada: o skeleton ou a barra piscariam e sumiriam, o que incomoda mais do que ajuda.
+*/
+const LOADING_VISIBLE_DELAY = 200;
+/**
+* O carregamento da tabela, de `loadingFeature`: `isLoading` na hora, para o `aria-busy`, e
+* `isLoadingVisible` depois de 200ms, para o que aparece na tela. Sem a feature, os dois ficam
+* `false`.
+*/
+const useDataTableLoading = (table) => {
+	/** Re-renderiza quando o carregamento liga ou desliga. A feature é opcional: assina o store. */
+	const isLoading = useSelector(table.store, () => hasTableFeature(table, "loadingFeature") && table.atoms.isLoading.get());
+	/** Se a carga atual já passou do atraso. Volta a `false` no fim dela, para a próxima esperar. */
+	const [isDelayElapsed, setIsDelayElapsed] = useState(false);
+	useEffect(() => {
+		if (!isLoading) return;
+		const timeout = setTimeout(() => setIsDelayElapsed(true), LOADING_VISIBLE_DELAY);
+		return () => {
+			clearTimeout(timeout);
+			setIsDelayElapsed(false);
+		};
+	}, [isLoading]);
+	/**
+	* Derivado, e não guardado: desliga no mesmo render em que a carga termina, e o conteúdo novo
+	* não espera o efeito.
+	*/
+	return {
+		isLoading,
+		isLoadingVisible: isLoading && isDelayElapsed
+	};
+};
+//#endregion
+export { useDataTableLoading };
+
+//# sourceMappingURL=use-data-table-loading.js.map

package/dist/components/data-table/loading/use-data-table-loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-loading.js","names":[],"sources":["../../../../src/components/data-table/loading/use-data-table-loading.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store';\nimport type { RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport { useEffect, useState } from 'react';\nimport { hasTableFeature } from '../../../utils';\n\n/**\n * Quanto o carregamento espera antes de aparecer. Uma resposta mais rápida que isto não mostra\n * nada: o skeleton ou a barra piscariam e sumiriam, o que incomoda mais do que ajuda.\n */\nconst LOADING_VISIBLE_DELAY = 200;\n\n/**\n * O carregamento da tabela, de `loadingFeature`: `isLoading` na hora, para o `aria-busy`, e\n * `isLoadingVisible` depois de 200ms, para o que aparece na tela. Sem a feature, os dois ficam\n * `false`.\n */\nexport const useDataTableLoading = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table<TFeatures, TData>,\n) => {\n  /** Re-renderiza quando o carregamento liga ou desliga. A feature é opcional: assina o store. */\n  const isLoading = useSelector(\n    table.store,\n    () =>\n      hasTableFeature(table, 'loadingFeature') && table.atoms.isLoading.get(),\n  );\n\n  /** Se a carga atual já passou do atraso. Volta a `false` no fim dela, para a próxima esperar. */\n  const [isDelayElapsed, setIsDelayElapsed] = useState(false);\n\n  useEffect(() => {\n    if (!isLoading) {\n      return;\n    }\n\n    const timeout = setTimeout(\n      () => setIsDelayElapsed(true),\n      LOADING_VISIBLE_DELAY,\n    );\n\n    return () => {\n      clearTimeout(timeout);\n      setIsDelayElapsed(false);\n    };\n  }, [isLoading]);\n\n  /**\n   * Derivado, e não guardado: desliga no mesmo render em que a carga termina, e o conteúdo novo\n   * não espera o efeito.\n   */\n  return { isLoading, isLoadingVisible: isLoading && isDelayElapsed };\n};\n"],"mappings":";;;;;;;;AASA,MAAM,wBAAwB;;;;;;AAO9B,MAAa,uBAIX,UACG;;CAEH,MAAM,YAAY,YAChB,MAAM,aAEJ,gBAAgB,OAAO,gBAAgB,KAAK,MAAM,MAAM,UAAU,IAAI,CAC1E;;CAGA,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,MAAM,UAAU,iBACR,kBAAkB,IAAI,GAC5B,qBACF;EAEA,aAAa;GACX,aAAa,OAAO;GACpB,kBAAkB,KAAK;EACzB;CACF,GAAG,CAAC,SAAS,CAAC;;;;;CAMd,OAAO;EAAE;EAAW,kBAAkB,aAAa;CAAe;AACpE"}

package/dist/components/data-table/pagination/data-table-page-button.d.ts

@@ -0,0 +1,45 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { IconButtonProps } from "@lucasbernardosn/react-ui/buttons/icon-button";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/pagination/data-table-page-button.d.ts
+/** Para onde o botão leva. */
+export type DataTablePageButtonPage = 'first' | 'previous' | 'next' | 'last';
+export type DataTablePageButtonProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Omit<IconButtonProps, 'icon' | 'aria-label'>, {
+  /** A tabela. Exige `rowPaginationFeature`. */
+  table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;
+  /** Para onde o botão leva: a primeira página, a anterior, a próxima ou a última. */
+  page: DataTablePageButtonPage;
+  /**
+   * O ícone.
+   * @default um caret por página: duplo nas pontas, simples na anterior e na próxima
+   */
+  icon?: IconButtonProps['icon'];
+  /**
+   * O que o botão faz.
+   * @default 'Primeira página', 'Página anterior', 'Próxima página' ou 'Última página'
+   */
+  'aria-label'?: string;
+}>;
+/**
+ * O botão que leva a outra página: a primeira, a anterior, a próxima ou a última. Fica
+ * desabilitado quando não há para onde ir. Sem o total de páginas (`pageCount: -1` na paginação
+ * pela API), a próxima continua habilitada, e a última, não.
+ *
+ * As props do `IconButton` passam adiante, como `variant` e `size`.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.PageButton
+ *   table={table}
+ *   page="next"
+ * />
+ * ```
+ */
+export declare const DataTablePageButton: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTablePageButtonProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-page-button.d.ts.map

package/dist/components/data-table/pagination/data-table-page-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-page-button.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-page-button.tsx"],"mappings":";;;;;;;YAgBY;YAEA,yBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,OAAO,UAAU,WAAW;;EAE5B,MAAM;;;;;EAKN,OAAO;;;;;EAKP;;;;;;;;;;;;;;;;;qBAiCS;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,yBAAyB,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/pagination/data-table-page-button.js

@@ -0,0 +1,67 @@
+import { CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { IconButton } from "@lucasbernardosn/react-ui/buttons/icon-button";
+//#region src/components/data-table/pagination/data-table-page-button.tsx
+const PAGE_LABELS = {
+	first: "Primeira página",
+	previous: "Página anterior",
+	next: "Próxima página",
+	last: "Última página"
+};
+const PAGE_ICONS = {
+	first: /* @__PURE__ */ jsx(CaretDoubleLeftIcon, {}),
+	previous: /* @__PURE__ */ jsx(CaretLeftIcon, {}),
+	next: /* @__PURE__ */ jsx(CaretRightIcon, {}),
+	last: /* @__PURE__ */ jsx(CaretDoubleRightIcon, {})
+};
+/**
+* O botão que leva a outra página: a primeira, a anterior, a próxima ou a última. Fica
+* desabilitado quando não há para onde ir. Sem o total de páginas (`pageCount: -1` na paginação
+* pela API), a próxima continua habilitada, e a última, não.
+*
+* As props do `IconButton` passam adiante, como `variant` e `size`.
+*
+* @example
+* ```tsx
+* <DataTable.PageButton
+*   table={table}
+*   page="next"
+* />
+* ```
+*/
+const DataTablePageButton = (props) => {
+	const { table, page, icon, onClick, ...rest } = props;
+	/**
+	* Re-renderiza quando o botão passa a ter ou deixa de ter para onde ir. O store, e não só o
+	* atom da paginação: o total de páginas também muda com as linhas.
+	*/
+	const isDisabled = useSelector(table.store, () => {
+		if (page === "first" || page === "previous") return !table.getCanPreviousPage();
+		return page === "next" ? !table.getCanNextPage() : !table.getCanLastPage();
+	});
+	const goToPage = () => {
+		if (page === "first") table.firstPage();
+		else if (page === "previous") table.previousPage();
+		else if (page === "next") table.nextPage();
+		else table.lastPage();
+	};
+	return /* @__PURE__ */ jsx(IconButton, {
+		"data-component": "DataTable.PageButton",
+		"data-page": page,
+		"aria-label": PAGE_LABELS[page],
+		icon: icon ?? PAGE_ICONS[page],
+		variant: "outline",
+		disabled: isDisabled,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) goToPage();
+		},
+		...rest
+	});
+};
+DataTablePageButton.displayName = "DataTable.PageButton";
+//#endregion
+export { DataTablePageButton };
+
+//# sourceMappingURL=data-table-page-button.js.map

package/dist/components/data-table/pagination/data-table-page-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-page-button.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-page-button.tsx"],"sourcesContent":["import {\n  IconButton,\n  type IconButtonProps,\n} from '@lucasbernardosn/react-ui/buttons/icon-button';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\n\n/** Para onde o botão leva. */\nexport type DataTablePageButtonPage = 'first' | 'previous' | 'next' | 'last';\n\nexport type DataTablePageButtonProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Omit<IconButtonProps, 'icon' | 'aria-label'>,\n  {\n    /** A tabela. Exige `rowPaginationFeature`. */\n    table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;\n    /** Para onde o botão leva: a primeira página, a anterior, a próxima ou a última. */\n    page: DataTablePageButtonPage;\n    /**\n     * O ícone.\n     * @default um caret por página: duplo nas pontas, simples na anterior e na próxima\n     */\n    icon?: IconButtonProps['icon'];\n    /**\n     * O que o botão faz.\n     * @default 'Primeira página', 'Página anterior', 'Próxima página' ou 'Última página'\n     */\n    'aria-label'?: string;\n  }\n>;\n\nconst PAGE_LABELS: Record<DataTablePageButtonPage, string> = {\n  first: 'Primeira página',\n  previous: 'Página anterior',\n  next: 'Próxima página',\n  last: 'Última página',\n};\n\nconst PAGE_ICONS: Record<DataTablePageButtonPage, IconButtonProps['icon']> = {\n  first: <CaretDoubleLeftIcon />,\n  previous: <CaretLeftIcon />,\n  next: <CaretRightIcon />,\n  last: <CaretDoubleRightIcon />,\n};\n\n/**\n * O botão que leva a outra página: a primeira, a anterior, a próxima ou a última. Fica\n * desabilitado quando não há para onde ir. Sem o total de páginas (`pageCount: -1` na paginação\n * pela API), a próxima continua habilitada, e a última, não.\n *\n * As props do `IconButton` passam adiante, como `variant` e `size`.\n *\n * @example\n * ```tsx\n * <DataTable.PageButton\n *   table={table}\n *   page=\"next\"\n * />\n * ```\n */\nexport const DataTablePageButton = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTablePageButtonProps<TFeatures, TData>,\n) => {\n  const { table, page, icon, onClick, ...rest } = props;\n\n  /**\n   * Re-renderiza quando o botão passa a ter ou deixa de ter para onde ir. O store, e não só o\n   * atom da paginação: o total de páginas também muda com as linhas.\n   */\n  const isDisabled = useSelector(table.store, () => {\n    if (page === 'first' || page === 'previous') {\n      return !table.getCanPreviousPage();\n    }\n\n    return page === 'next' ? !table.getCanNextPage() : !table.getCanLastPage();\n  });\n\n  const goToPage = () => {\n    if (page === 'first') {\n      table.firstPage();\n    } else if (page === 'previous') {\n      table.previousPage();\n    } else if (page === 'next') {\n      table.nextPage();\n    } else {\n      table.lastPage();\n    }\n  };\n\n  return (\n    <IconButton\n      data-component=\"DataTable.PageButton\"\n      data-page={page}\n      aria-label={PAGE_LABELS[page]}\n      icon={icon ?? PAGE_ICONS[page]}\n      variant=\"outline\"\n      disabled={isDisabled}\n      // O `onClick` do app roda antes, e um `preventDefault()` nele cancela a troca de página.\n      onClick={(event) => {\n        onClick?.(event);\n\n        if (!event.defaultPrevented) {\n          goToPage();\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n\nDataTablePageButton.displayName = 'DataTable.PageButton';\n"],"mappings":";;;;;AAyCA,MAAM,cAAuD;CAC3D,OAAO;CACP,UAAU;CACV,MAAM;CACN,MAAM;AACR;AAEA,MAAM,aAAuE;CAC3E,OAAO,oBAAC,qBAAD,CAAsB,CAAA;CAC7B,UAAU,oBAAC,eAAD,CAAgB,CAAA;CAC1B,MAAM,oBAAC,gBAAD,CAAiB,CAAA;CACvB,MAAM,oBAAC,sBAAD,CAAuB,CAAA;AAC/B;;;;;;;;;;;;;;;;AAiBA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,OAAO,MAAM,MAAM,SAAS,GAAG,SAAS;;;;;CAMhD,MAAM,aAAa,YAAY,MAAM,aAAa;EAChD,IAAI,SAAS,WAAW,SAAS,YAC/B,OAAO,CAAC,MAAM,mBAAmB;EAGnC,OAAO,SAAS,SAAS,CAAC,MAAM,eAAe,IAAI,CAAC,MAAM,eAAe;CAC3E,CAAC;CAED,MAAM,iBAAiB;EACrB,IAAI,SAAS,SACX,MAAM,UAAU;OACX,IAAI,SAAS,YAClB,MAAM,aAAa;OACd,IAAI,SAAS,QAClB,MAAM,SAAS;OAEf,MAAM,SAAS;CAEnB;CAEA,OACE,oBAAC,YAAD;EACE,kBAAe;EACf,aAAW;EACX,cAAY,YAAY;EACxB,MAAM,QAAQ,WAAW;EACzB,SAAQ;EACR,UAAU;EAEV,UAAU,UAAU;GAClB,UAAU,KAAK;GAEf,IAAI,CAAC,MAAM,kBACT,SAAS;EAEb;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

package/dist/components/data-table/pagination/data-table-page-size-select.d.ts

@@ -0,0 +1,47 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import React from "react";
+import { Select } from "@lucasbernardosn/react-ui/collections/select";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/pagination/data-table-page-size-select.d.ts
+export type DataTablePageSizeSelectProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<React.ComponentProps<'div'>, {
+  /** A tabela. Exige `rowPaginationFeature`. */
+  table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;
+  /**
+   * Os tamanhos oferecidos. O tamanho atual entra na lista mesmo fora dela.
+   * @default [10, 25, 50, 100]
+   */
+  options?: readonly number[];
+  /**
+   * O rótulo do select.
+   * @default 'Linhas por página'
+   */
+  label?: React.ReactNode;
+  /**
+   * O tamanho do select.
+   * @default 'sm'
+   */
+  size?: Select.RootProps<number>['size'];
+}>;
+/**
+ * O select de quantas linhas cada página mostra, com o rótulo ao lado. Trocar o tamanho chama o
+ * `table.setPageSize`, que mantém à vista a primeira linha da página atual.
+ *
+ * Renderiza o `Select` do `ui` por dentro; as props passam para o elemento em volta do rótulo e do
+ * trigger.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.PageSizeSelect
+ *   table={table}
+ *   options={[20, 50, 100]}
+ * />
+ * ```
+ */
+export declare const DataTablePageSizeSelect: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTablePageSizeSelectProps<TFeatures, TData>): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-page-size-select.d.ts.map

package/dist/components/data-table/pagination/data-table-page-size-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-page-size-select.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-page-size-select.tsx"],"mappings":";;;;;;;YAQY,6BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,MAAM;;EAGJ,OAAO,UAAU,WAAW;;;;;EAK5B;;;;;EAKA,QAAQ,MAAM;;;;;EAKd,OAAO,OAAO;;;;;;;;;;;;;;;;;qBAqBL;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,6BAA6B,WAAW,SAAM,MAAA,IAAA"}

package/dist/components/data-table/pagination/data-table-page-size-select.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Select } from "@lucasbernardosn/react-ui/collections/select";
+//#region src/components/data-table/pagination/data-table-page-size-select.tsx
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100
+];
+/**
+* O select de quantas linhas cada página mostra, com o rótulo ao lado. Trocar o tamanho chama o
+* `table.setPageSize`, que mantém à vista a primeira linha da página atual.
+*
+* Renderiza o `Select` do `ui` por dentro; as props passam para o elemento em volta do rótulo e do
+* trigger.
+*
+* @example
+* ```tsx
+* <DataTable.PageSizeSelect
+*   table={table}
+*   options={[20, 50, 100]}
+* />
+* ```
+*/
+const DataTablePageSizeSelect = (props) => {
+	const { table, options = DEFAULT_PAGE_SIZE_OPTIONS, label = "Linhas por página", size = "sm", className, ...rest } = props;
+	/** Re-renderiza quando o tamanho da página muda. */
+	const pageSize = useSelector(table.atoms.pagination, (pagination) => pagination.pageSize);
+	/** O tamanho atual entra na lista: sem ele, o trigger ficaria vazio. */
+	const items = (options.includes(pageSize) ? options : [...options, pageSize]).toSorted((a, b) => a - b).map((option) => ({
+		label: option.toLocaleString("pt-BR"),
+		value: option
+	}));
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		size,
+		value: pageSize,
+		items,
+		onValueChange: (value) => {
+			if (value !== null) table.setPageSize(value);
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-component": "DataTable.PageSizeSelect",
+			className: mergeTwClassNames([
+				"flex",
+				"items-center",
+				"gap-2"
+			], className),
+			...rest,
+			children: [/* @__PURE__ */ jsx(Select.Label, {
+				className: "whitespace-nowrap font-normal text-gray-11",
+				children: label
+			}), /* @__PURE__ */ jsxs(Select.Trigger, { children: [/* @__PURE__ */ jsx(Select.Value, {}), /* @__PURE__ */ jsx(Select.Icon, {})] })]
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+			alignItemWithTrigger: false,
+			children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+				value: item.value,
+				children: [/* @__PURE__ */ jsx(Select.ItemIndicator, {}), /* @__PURE__ */ jsx(Select.ItemText, { children: item.label })]
+			}, item.value)) }) })
+		}) })]
+	});
+};
+DataTablePageSizeSelect.displayName = "DataTable.PageSizeSelect";
+//#endregion
+export { DataTablePageSizeSelect };
+
+//# sourceMappingURL=data-table-page-size-select.js.map

package/dist/components/data-table/pagination/data-table-page-size-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-page-size-select.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-page-size-select.tsx"],"sourcesContent":["import { Select } from '@lucasbernardosn/react-ui/collections/select';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { TableWith } from '../../../types';\n\nexport type DataTablePageSizeSelectProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  React.ComponentProps<'div'>,\n  {\n    /** A tabela. Exige `rowPaginationFeature`. */\n    table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;\n    /**\n     * Os tamanhos oferecidos. O tamanho atual entra na lista mesmo fora dela.\n     * @default [10, 25, 50, 100]\n     */\n    options?: readonly number[];\n    /**\n     * O rótulo do select.\n     * @default 'Linhas por página'\n     */\n    label?: React.ReactNode;\n    /**\n     * O tamanho do select.\n     * @default 'sm'\n     */\n    size?: Select.RootProps<number>['size'];\n  }\n>;\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];\n\n/**\n * O select de quantas linhas cada página mostra, com o rótulo ao lado. Trocar o tamanho chama o\n * `table.setPageSize`, que mantém à vista a primeira linha da página atual.\n *\n * Renderiza o `Select` do `ui` por dentro; as props passam para o elemento em volta do rótulo e do\n * trigger.\n *\n * @example\n * ```tsx\n * <DataTable.PageSizeSelect\n *   table={table}\n *   options={[20, 50, 100]}\n * />\n * ```\n */\nexport const DataTablePageSizeSelect = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTablePageSizeSelectProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    options = DEFAULT_PAGE_SIZE_OPTIONS,\n    label = 'Linhas por página',\n    size = 'sm',\n    className,\n    ...rest\n  } = props;\n\n  /** Re-renderiza quando o tamanho da página muda. */\n  const pageSize = useSelector(\n    table.atoms.pagination,\n    (pagination) => pagination.pageSize,\n  );\n\n  /** O tamanho atual entra na lista: sem ele, o trigger ficaria vazio. */\n  const items = (options.includes(pageSize) ? options : [...options, pageSize])\n    .toSorted((a, b) => a - b)\n    .map((option) => ({\n      label: option.toLocaleString('pt-BR'),\n      value: option,\n    }));\n\n  return (\n    <Select.Root<number>\n      size={size}\n      value={pageSize}\n      items={items}\n      onValueChange={(value) => {\n        if (value !== null) {\n          table.setPageSize(value);\n        }\n      }}\n    >\n      <div\n        data-component=\"DataTable.PageSizeSelect\"\n        className={mergeTwClassNames(\n          ['flex', 'items-center', 'gap-2'],\n          className,\n        )}\n        {...rest}\n      >\n        <Select.Label className=\"whitespace-nowrap font-normal text-gray-11\">\n          {label}\n        </Select.Label>\n\n        <Select.Trigger>\n          <Select.Value />\n          <Select.Icon />\n        </Select.Trigger>\n      </div>\n\n      <Select.Portal>\n        <Select.Positioner alignItemWithTrigger={false}>\n          <Select.Popup>\n            <Select.List>\n              {items.map((item) => (\n                <Select.Item\n                  key={item.value}\n                  value={item.value}\n                >\n                  <Select.ItemIndicator />\n                  <Select.ItemText>{item.label}</Select.ItemText>\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Popup>\n        </Select.Positioner>\n      </Select.Portal>\n    </Select.Root>\n  );\n};\n\nDataTablePageSizeSelect.displayName = 'DataTable.PageSizeSelect';\n"],"mappings":";;;;;AAkCA,MAAM,4BAA4B;CAAC;CAAI;CAAI;CAAI;AAAG;;;;;;;;;;;;;;;;AAiBlD,MAAa,2BAIX,UACG;CACH,MAAM,EACJ,OACA,UAAU,2BACV,QAAQ,qBACR,OAAO,MACP,WACA,GAAG,SACD;;CAGJ,MAAM,WAAW,YACf,MAAM,MAAM,aACX,eAAe,WAAW,QAC7B;;CAGA,MAAM,SAAS,QAAQ,SAAS,QAAQ,IAAI,UAAU,CAAC,GAAG,SAAS,QAAQ,EAAA,CACxE,UAAU,GAAG,MAAM,IAAI,CAAC,CAAC,CACzB,KAAK,YAAY;EAChB,OAAO,OAAO,eAAe,OAAO;EACpC,OAAO;CACT,EAAE;CAEJ,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,OAAO;EACA;EACP,gBAAgB,UAAU;GACxB,IAAI,UAAU,MACZ,MAAM,YAAY,KAAK;EAE3B;EARF,UAAA,CAUE,qBAAC,OAAD;GACE,kBAAe;GACf,WAAW,kBACT;IAAC;IAAQ;IAAgB;GAAO,GAChC,SACF;GACA,GAAI;GANN,UAAA,CAQE,oBAAC,OAAO,OAAR;IAAc,WAAU;IACrB,UAAA;GACW,CAAA,GAEd,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,MAAR,CAAc,CAAA,CACA,EAAA,CAAA,CACb;EAEL,CAAA,GAAA,oBAAC,OAAO,QAAR,EAAA,UACE,oBAAC,OAAO,YAAR;GAAmB,sBAAsB;GACvC,UAAA,oBAAC,OAAO,OAAR,EAAA,UACE,oBAAC,OAAO,MAAR,EAAA,UACG,MAAM,KAAK,SACV,qBAAC,OAAO,MAAR;IAEE,OAAO,KAAK;IAFd,UAAA,CAIE,oBAAC,OAAO,eAAR,CAAuB,CAAA,GACvB,oBAAC,OAAO,UAAR,EAAA,UAAkB,KAAK,MAAuB,CAAA,CACnC;GALN,GAAA,KAAK,KAKC,CACd,EACU,CAAA,EACD,CAAA;EACG,CAAA,EACN,CAAA,CACJ;;AAEjB;AAEA,wBAAwB,cAAc"}

package/dist/components/data-table/pagination/data-table-page-status.d.ts

@@ -0,0 +1,43 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/pagination/data-table-page-status.d.ts
+/** A página atual e o total, para o texto do `DataTable.PageStatus`. */
+export type DataTablePageStatusValues = {
+  /** O índice da página atual, a partir de 0. */
+  pageIndex: number;
+  /**
+   * O total de páginas, ou `-1` sem ele: quando a API não informa (`pageCount: -1`) e, com
+   * `loadingFeature`, na carga sem linhas, antes de o total chegar.
+   */
+  pageCount: number;
+};
+export type DataTablePageStatusProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
+  /** A tabela. Exige `rowPaginationFeature`. */
+  table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;
+  /**
+   * Uma função que recebe a página e o total e devolve o texto.
+   * @default ({ pageIndex, pageCount }) => 'Página 2 de 10', ou 'Página 2' sem o total
+   */
+  children?: (values: DataTablePageStatusValues) => React.ReactNode;
+}>;
+/**
+ * Qual a página atual, e de quantas: "Página 2 de 10". Sem o total de páginas, só "Página 2",
+ * também na primeira carga, quando o total ainda não chegou.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.PageStatus table={table}>
+ *   {({ pageIndex, pageCount }) => `${pageIndex + 1}/${pageCount}`}
+ * </DataTable.PageStatus>
+ * ```
+ */
+export declare const DataTablePageStatus: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTablePageStatusProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-page-status.d.ts.map

package/dist/components/data-table/pagination/data-table-page-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-page-status.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-page-status.tsx"],"mappings":";;;;;;;;YAUY;;EAEV;;;;;EAKA;;YAGU,yBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,QAAQ,8BAA8B,MAAM;;;;;;;;;;;;;qBAe/C;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,yBAAyB,WAAW,SAAM,MAAA,+BAAA,MAAA"}

package/dist/components/data-table/pagination/data-table-page-status.js

@@ -0,0 +1,48 @@
+import { getDataTableLoadingWithoutRows } from "../loading/get-data-table-loading-without-rows.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { shallow, useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/pagination/data-table-page-status.tsx
+/**
+* Qual a página atual, e de quantas: "Página 2 de 10". Sem o total de páginas, só "Página 2",
+* também na primeira carga, quando o total ainda não chegou.
+*
+* @example
+* ```tsx
+* <DataTable.PageStatus table={table}>
+*   {({ pageIndex, pageCount }) => `${pageIndex + 1}/${pageCount}`}
+* </DataTable.PageStatus>
+* ```
+*/
+const DataTablePageStatus = (props) => {
+	const { table, render, className, children, ...rest } = props;
+	/**
+	* Re-renderiza quando a página ou o total mudam. O store, e não só o atom da paginação: o total
+	* também muda com as linhas.
+	*/
+	const values = useSelector(table.store, () => ({
+		pageIndex: table.atoms.pagination.get().pageIndex,
+		pageCount: getDataTableLoadingWithoutRows(table) ? -1 : table.getPageCount()
+	}), { compare: shallow });
+	const page = (values.pageIndex + 1).toLocaleString("pt-BR");
+	const baseProps = {
+		"data-component": "DataTable.PageStatus",
+		className: mergeTwClassNames([
+			"text-gray-11",
+			"text-sm",
+			"tabular-nums",
+			"whitespace-nowrap"
+		], className),
+		children: children === void 0 ? values.pageCount === -1 ? `Página ${page}` : `Página ${page} de ${Math.max(values.pageCount, 1).toLocaleString("pt-BR")}` : children(values)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTablePageStatus.displayName = "DataTable.PageStatus";
+//#endregion
+export { DataTablePageStatus };
+
+//# sourceMappingURL=data-table-page-status.js.map

package/dist/components/data-table/pagination/data-table-page-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-page-status.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-page-status.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { TableWith } from '../../../types';\nimport { getDataTableLoadingWithoutRows } from '../loading/get-data-table-loading-without-rows';\n\n/** A página atual e o total, para o texto do `DataTable.PageStatus`. */\nexport type DataTablePageStatusValues = {\n  /** O índice da página atual, a partir de 0. */\n  pageIndex: number;\n  /**\n   * O total de páginas, ou `-1` sem ele: quando a API não informa (`pageCount: -1`) e, com\n   * `loadingFeature`, na carga sem linhas, antes de o total chegar.\n   */\n  pageCount: number;\n};\n\nexport type DataTablePageStatusProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  {\n    /** A tabela. Exige `rowPaginationFeature`. */\n    table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;\n    /**\n     * Uma função que recebe a página e o total e devolve o texto.\n     * @default ({ pageIndex, pageCount }) => 'Página 2 de 10', ou 'Página 2' sem o total\n     */\n    children?: (values: DataTablePageStatusValues) => React.ReactNode;\n  }\n>;\n\n/**\n * Qual a página atual, e de quantas: \"Página 2 de 10\". Sem o total de páginas, só \"Página 2\",\n * também na primeira carga, quando o total ainda não chegou.\n *\n * @example\n * ```tsx\n * <DataTable.PageStatus table={table}>\n *   {({ pageIndex, pageCount }) => `${pageIndex + 1}/${pageCount}`}\n * </DataTable.PageStatus>\n * ```\n */\nexport const DataTablePageStatus = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTablePageStatusProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  /**\n   * Re-renderiza quando a página ou o total mudam. O store, e não só o atom da paginação: o total\n   * também muda com as linhas.\n   */\n  const values = useSelector(\n    table.store,\n    (): DataTablePageStatusValues => ({\n      pageIndex: table.atoms.pagination.get().pageIndex,\n      pageCount: getDataTableLoadingWithoutRows(table)\n        ? -1\n        : table.getPageCount(),\n    }),\n    { compare: shallow },\n  );\n\n  const page = (values.pageIndex + 1).toLocaleString('pt-BR');\n\n  const baseProps = {\n    'data-component': 'DataTable.PageStatus',\n    className: mergeTwClassNames(\n      ['text-gray-11', 'text-sm', 'tabular-nums', 'whitespace-nowrap'],\n      className,\n    ),\n    children:\n      children === undefined\n        ? values.pageCount === -1\n          ? `Página ${page}`\n          : // Sem linhas, o total é 0, e a página 1 continua sendo a atual.\n            `Página ${page} de ${Math.max(values.pageCount, 1).toLocaleString('pt-BR')}`\n        : children(values),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTablePageStatus.displayName = 'DataTable.PageStatus';\n"],"mappings":";;;;;;;;;;;;;;;;AA+CA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMxD,MAAM,SAAS,YACb,MAAM,cAC4B;EAChC,WAAW,MAAM,MAAM,WAAW,IAAI,CAAC,CAAC;EACxC,WAAW,+BAA+B,KAAK,IAC3C,KACA,MAAM,aAAa;CACzB,IACA,EAAE,SAAS,QAAQ,CACrB;CAEA,MAAM,QAAQ,OAAO,YAAY,EAAA,CAAG,eAAe,OAAO;CAE1D,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAgB;GAAW;GAAgB;EAAmB,GAC/D,SACF;EACA,UACE,aAAa,KAAA,IACT,OAAO,cAAc,KACnB,UAAU,SAEV,UAAU,KAAK,MAAM,KAAK,IAAI,OAAO,WAAW,CAAC,CAAC,CAAC,eAAe,OAAO,MAC3E,SAAS,MAAM;CACvB;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}

package/dist/components/data-table/pagination/data-table-pagination.d.ts

@@ -0,0 +1,38 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/pagination/data-table-pagination.d.ts
+export type DataTablePaginationProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'nav'>, {
+  /** A tabela. Exige `rowPaginationFeature`. */
+  table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;
+}>;
+/**
+ * A barra da paginação, para baixo da tabela. Sem `children`, monta o padrão: à esquerda, a
+ * contagem de selecionadas (com `rowSelectionFeature`); à direita, o `DataTable.PageSizeSelect`,
+ * o `DataTable.RowRange`, o `DataTable.PageStatus` e os quatro `DataTable.PageButton`. Com
+ * `children`, o app compõe as partes, cada uma com a `table`. Em tela estreita, os grupos quebram
+ * linha.
+ *
+ * Funciona com a paginação local (`createPaginatedRowModel`) e com a da API
+ * (`manualPagination`, com o `rowCount` ou o `pageCount`).
+ *
+ * É um `nav` com o nome "Paginação", trocável pelo `aria-label`: um marco, que o leitor de tela
+ * lista e para onde salta.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Pagination table={table}>
+ *   <DataTable.PageStatus table={table} />
+ *   <DataTable.PageButton table={table} page="previous" />
+ *   <DataTable.PageButton table={table} page="next" />
+ * </DataTable.Pagination>
+ * ```
+ */
+export declare const DataTablePagination: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTablePaginationProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-pagination.d.ts.map

package/dist/components/data-table/pagination/data-table-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-pagination.tsx"],"mappings":";;;;;;YAYY,yBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UAAU,WAAW;;;;;;;;;;;;;;;;;;;;;;;;qBA0BnB;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,yBAAyB,WAAW,yBAAM,+CAAA"}