@lucasbernardosn/react-table 0.0.0-stage → 0.1.0

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"}

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

@@ -0,0 +1,87 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { DataTablePageButton } from "./data-table-page-button.js";
+import { DataTablePageSizeSelect } from "./data-table-page-size-select.js";
+import { DataTablePageStatus } from "./data-table-page-status.js";
+import { DataTableRowRange } from "./data-table-row-range.js";
+import { DataTableSelectedCount } from "./data-table-selected-count.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/pagination/data-table-pagination.tsx
+/**
+* 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>
+* ```
+*/
+const DataTablePagination = (props) => {
+	const { table, render, className, children, ...rest } = props;
+	const content = children === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [hasTableFeature(table, "rowSelectionFeature") && /* @__PURE__ */ jsx(DataTableSelectedCount, { table }), /* @__PURE__ */ jsxs("div", {
+		className: "ms-auto flex flex-wrap items-center gap-x-4 gap-y-2",
+		children: [
+			/* @__PURE__ */ jsx(DataTablePageSizeSelect, { table }),
+			/* @__PURE__ */ jsx(DataTableRowRange, { table }),
+			/* @__PURE__ */ jsx(DataTablePageStatus, { table }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx(DataTablePageButton, {
+						table,
+						page: "first"
+					}),
+					/* @__PURE__ */ jsx(DataTablePageButton, {
+						table,
+						page: "previous"
+					}),
+					/* @__PURE__ */ jsx(DataTablePageButton, {
+						table,
+						page: "next"
+					}),
+					/* @__PURE__ */ jsx(DataTablePageButton, {
+						table,
+						page: "last"
+					})
+				]
+			})
+		]
+	})] }) : children;
+	const baseProps = {
+		"data-component": "DataTable.Pagination",
+		"aria-label": "Paginação",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-wrap",
+			"items-center",
+			"justify-between",
+			"gap-x-6",
+			"gap-y-2"
+		], className),
+		children: content
+	};
+	return useRender({
+		render,
+		defaultTagName: "nav",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTablePagination.displayName = "DataTable.Pagination";
+//#endregion
+export { DataTablePagination };
+
+//# sourceMappingURL=data-table-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-pagination.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\nimport { hasTableFeature } from '../../../utils';\nimport { DataTablePageButton } from './data-table-page-button';\nimport { DataTablePageSizeSelect } from './data-table-page-size-select';\nimport { DataTablePageStatus } from './data-table-page-status';\nimport { DataTableRowRange } from './data-table-row-range';\nimport { DataTableSelectedCount } from './data-table-selected-count';\n\nexport type DataTablePaginationProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'nav'>,\n  {\n    /** A tabela. Exige `rowPaginationFeature`. */\n    table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;\n  }\n>;\n\n/**\n * A barra da paginação, para baixo da tabela. Sem `children`, monta o padrão: à esquerda, a\n * contagem de selecionadas (com `rowSelectionFeature`); à direita, o `DataTable.PageSizeSelect`,\n * o `DataTable.RowRange`, o `DataTable.PageStatus` e os quatro `DataTable.PageButton`. Com\n * `children`, o app compõe as partes, cada uma com a `table`. Em tela estreita, os grupos quebram\n * linha.\n *\n * Funciona com a paginação local (`createPaginatedRowModel`) e com a da API\n * (`manualPagination`, com o `rowCount` ou o `pageCount`).\n *\n * É um `nav` com o nome \"Paginação\", trocável pelo `aria-label`: um marco, que o leitor de tela\n * lista e para onde salta.\n *\n * @example\n * ```tsx\n * <DataTable.Pagination table={table}>\n *   <DataTable.PageStatus table={table} />\n *   <DataTable.PageButton table={table} page=\"previous\" />\n *   <DataTable.PageButton table={table} page=\"next\" />\n * </DataTable.Pagination>\n * ```\n */\nexport const DataTablePagination = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTablePaginationProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  const content =\n    children === undefined ? (\n      <>\n        {hasTableFeature(table, 'rowSelectionFeature') && (\n          <DataTableSelectedCount table={table} />\n        )}\n\n        {/* À direita mesmo sozinho, sem a contagem: o `justify-between` o levaria para a\n            esquerda. */}\n        <div className=\"ms-auto flex flex-wrap items-center gap-x-4 gap-y-2\">\n          <DataTablePageSizeSelect table={table} />\n          <DataTableRowRange table={table} />\n          <DataTablePageStatus table={table} />\n\n          <div className=\"flex items-center gap-1\">\n            <DataTablePageButton\n              table={table}\n              page=\"first\"\n            />\n            <DataTablePageButton\n              table={table}\n              page=\"previous\"\n            />\n            <DataTablePageButton\n              table={table}\n              page=\"next\"\n            />\n            <DataTablePageButton\n              table={table}\n              page=\"last\"\n            />\n          </div>\n        </div>\n      </>\n    ) : (\n      children\n    );\n\n  const baseProps = {\n    'data-component': 'DataTable.Pagination',\n    'aria-label': 'Paginação',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-wrap',\n        'items-center',\n        'justify-between',\n        'gap-x-6',\n        'gap-y-2',\n      ],\n      className,\n    ),\n    children: content,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'nav',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTablePagination.displayName = 'DataTable.Pagination';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;CAExD,MAAM,UACJ,aAAa,KAAA,IACX,qBAAA,UAAA,EAAA,UAAA,CACG,gBAAgB,OAAO,qBAAqB,KAC3C,oBAAC,wBAAD,EAA+B,MAAQ,CAAA,GAKzC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,oBAAC,yBAAD,EAAgC,MAAQ,CAAA;GACxC,oBAAC,mBAAD,EAA0B,MAAQ,CAAA;GAClC,oBAAC,qBAAD,EAA4B,MAAQ,CAAA;GAEpC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,qBAAD;MACS;MACP,MAAK;KACN,CAAA;KACD,oBAAC,qBAAD;MACS;MACP,MAAK;KACN,CAAA;KACD,oBAAC,qBAAD;MACS;MACP,MAAK;KACN,CAAA;KACD,oBAAC,qBAAD;MACS;MACP,MAAK;KACN,CAAA;IACE;;EACF;CACL,CAAA,CAAA,EAAA,CAAA,IAEF;CAGJ,MAAM,YAAY;EAChB,kBAAkB;EAClB,cAAc;EACd,WAAW,kBACT;GACE;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;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-row-range.d.ts

@@ -0,0 +1,49 @@
+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-row-range.d.ts
+/** As linhas da página atual e o total, para o texto do `DataTable.RowRange`. */
+export type DataTableRowRangeValues = {
+  /** A posição da primeira linha da página, a partir de 1, ou 0 sem linhas. */
+  firstRow: number;
+  /** A posição da última linha da página, ou 0 sem linhas. */
+  lastRow: number;
+  /**
+   * O total de linhas, ou `-1` sem ele: na paginação pela API, sem o `rowCount` da tabela, e, com
+   * `loadingFeature`, na carga sem linhas, antes de o total chegar.
+   */
+  rowCount: number;
+};
+export type DataTableRowRangeProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
+  /** A tabela. Exige `rowPaginationFeature`. */
+  table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;
+  /**
+   * Uma função que recebe as posições e o total e devolve o texto.
+   * @default ({ firstRow, lastRow, rowCount }) => '11–20 de 243', ou '11–20' sem o total
+   */
+  children?: (values: DataTableRowRangeValues) => React.ReactNode;
+}>;
+/**
+ * Quais linhas a página mostra, e de quantas: "11–20 de 243". Com a paginação pela API, o total
+ * vem do `rowCount` da tabela; sem ele, só "11–20". Na carga sem linhas, como a primeira, fica
+ * vazio: o total ainda não chegou.
+ *
+ * Marca `role="status"`: quando o intervalo muda, como na troca de página, o leitor de tela
+ * anuncia o texto novo sem mover o foco.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.RowRange table={table}>
+ *   {({ rowCount }) => `${rowCount} pessoas`}
+ * </DataTable.RowRange>
+ * ```
+ */
+export declare const DataTableRowRange: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableRowRangeProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-row-range.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-range.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-row-range.tsx"],"mappings":";;;;;;;;YAUY;;EAEV;;EAEA;;;;;EAKA;;YAGU,uBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,QAAQ,4BAA4B,MAAM;;;;;;;;;;;;;;;;;qBAmB7C;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,uBAAuB,WAAW,SAAM,MAAA,+BAAA,MAAA"}

package/dist/components/data-table/pagination/data-table-row-range.js

@@ -0,0 +1,63 @@
+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-row-range.tsx
+/**
+* Quais linhas a página mostra, e de quantas: "11–20 de 243". Com a paginação pela API, o total
+* vem do `rowCount` da tabela; sem ele, só "11–20". Na carga sem linhas, como a primeira, fica
+* vazio: o total ainda não chegou.
+*
+* Marca `role="status"`: quando o intervalo muda, como na troca de página, o leitor de tela
+* anuncia o texto novo sem mover o foco.
+*
+* @example
+* ```tsx
+* <DataTable.RowRange table={table}>
+*   {({ rowCount }) => `${rowCount} pessoas`}
+* </DataTable.RowRange>
+* ```
+*/
+const DataTableRowRange = (props) => {
+	const { table, render, className, children, ...rest } = props;
+	/**
+	* Re-renderiza quando a página, o tamanho dela ou as linhas mudam. O store, e não só o atom da
+	* paginação: as linhas da página e o total mudam com os dados.
+	*/
+	const values = useSelector(table.store, () => {
+		const { pageIndex, pageSize } = table.atoms.pagination.get();
+		const pageRowCount = table.getRowModel().rows.length;
+		const offset = pageIndex * pageSize;
+		return {
+			firstRow: pageRowCount === 0 ? 0 : offset + 1,
+			lastRow: pageRowCount === 0 ? 0 : offset + pageRowCount,
+			rowCount: getDataTableLoadingWithoutRows(table) || table.options.manualPagination && table.options.rowCount === void 0 ? -1 : table.getRowCount()
+		};
+	}, { compare: shallow });
+	/** Re-renderiza quando a carga sem linhas começa ou termina. */
+	const isLoadingWithoutRows = useSelector(table.store, () => getDataTableLoadingWithoutRows(table));
+	const range = values.lastRow === 0 ? "0" : `${values.firstRow.toLocaleString("pt-BR")}–${values.lastRow.toLocaleString("pt-BR")}`;
+	/** Na carga sem linhas, "0" diria que não há nada, e não que ainda não se sabe. */
+	const defaultText = isLoadingWithoutRows ? "" : values.rowCount === -1 ? range : `${range} de ${values.rowCount.toLocaleString("pt-BR")}`;
+	const baseProps = {
+		"data-component": "DataTable.RowRange",
+		role: "status",
+		className: mergeTwClassNames([
+			"text-gray-11",
+			"text-sm",
+			"tabular-nums",
+			"whitespace-nowrap"
+		], className),
+		children: children === void 0 ? defaultText : children(values)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableRowRange.displayName = "DataTable.RowRange";
+//#endregion
+export { DataTableRowRange };
+
+//# sourceMappingURL=data-table-row-range.js.map

package/dist/components/data-table/pagination/data-table-row-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-range.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-row-range.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/** As linhas da página atual e o total, para o texto do `DataTable.RowRange`. */\nexport type DataTableRowRangeValues = {\n  /** A posição da primeira linha da página, a partir de 1, ou 0 sem linhas. */\n  firstRow: number;\n  /** A posição da última linha da página, ou 0 sem linhas. */\n  lastRow: number;\n  /**\n   * O total de linhas, ou `-1` sem ele: na paginação pela API, sem o `rowCount` da tabela, e, com\n   * `loadingFeature`, na carga sem linhas, antes de o total chegar.\n   */\n  rowCount: number;\n};\n\nexport type DataTableRowRangeProps<\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 as posições e o total e devolve o texto.\n     * @default ({ firstRow, lastRow, rowCount }) => '11–20 de 243', ou '11–20' sem o total\n     */\n    children?: (values: DataTableRowRangeValues) => React.ReactNode;\n  }\n>;\n\n/**\n * Quais linhas a página mostra, e de quantas: \"11–20 de 243\". Com a paginação pela API, o total\n * vem do `rowCount` da tabela; sem ele, só \"11–20\". Na carga sem linhas, como a primeira, fica\n * vazio: o total ainda não chegou.\n *\n * Marca `role=\"status\"`: quando o intervalo muda, como na troca de página, o leitor de tela\n * anuncia o texto novo sem mover o foco.\n *\n * @example\n * ```tsx\n * <DataTable.RowRange table={table}>\n *   {({ rowCount }) => `${rowCount} pessoas`}\n * </DataTable.RowRange>\n * ```\n */\nexport const DataTableRowRange = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableRowRangeProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  /**\n   * Re-renderiza quando a página, o tamanho dela ou as linhas mudam. O store, e não só o atom da\n   * paginação: as linhas da página e o total mudam com os dados.\n   */\n  const values = useSelector(\n    table.store,\n    (): DataTableRowRangeValues => {\n      const { pageIndex, pageSize } = table.atoms.pagination.get();\n      const pageRowCount = table.getRowModel().rows.length;\n      const offset = pageIndex * pageSize;\n\n      return {\n        firstRow: pageRowCount === 0 ? 0 : offset + 1,\n        lastRow: pageRowCount === 0 ? 0 : offset + pageRowCount,\n        // Sem o `rowCount`, o `getRowCount()` do TanStack conta as linhas carregadas, que na\n        // paginação pela API são só as da página.\n        rowCount:\n          getDataTableLoadingWithoutRows(table) ||\n          (table.options.manualPagination &&\n            table.options.rowCount === undefined)\n            ? -1\n            : table.getRowCount(),\n      };\n    },\n    { compare: shallow },\n  );\n\n  /** Re-renderiza quando a carga sem linhas começa ou termina. */\n  const isLoadingWithoutRows = useSelector(table.store, () =>\n    getDataTableLoadingWithoutRows(table),\n  );\n\n  const range =\n    values.lastRow === 0\n      ? '0'\n      : `${values.firstRow.toLocaleString('pt-BR')}–${values.lastRow.toLocaleString('pt-BR')}`;\n\n  /** Na carga sem linhas, \"0\" diria que não há nada, e não que ainda não se sabe. */\n  const defaultText = isLoadingWithoutRows\n    ? ''\n    : values.rowCount === -1\n      ? range\n      : `${range} de ${values.rowCount.toLocaleString('pt-BR')}`;\n\n  const baseProps = {\n    'data-component': 'DataTable.RowRange',\n    role: 'status',\n    className: mergeTwClassNames(\n      ['text-gray-11', 'text-sm', 'tabular-nums', 'whitespace-nowrap'],\n      className,\n    ),\n    children: children === undefined ? defaultText : children(values),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableRowRange.displayName = 'DataTable.RowRange';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqDA,MAAa,qBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMxD,MAAM,SAAS,YACb,MAAM,aACyB;EAC7B,MAAM,EAAE,WAAW,aAAa,MAAM,MAAM,WAAW,IAAI;EAC3D,MAAM,eAAe,MAAM,YAAY,CAAC,CAAC,KAAK;EAC9C,MAAM,SAAS,YAAY;EAE3B,OAAO;GACL,UAAU,iBAAiB,IAAI,IAAI,SAAS;GAC5C,SAAS,iBAAiB,IAAI,IAAI,SAAS;GAG3C,UACE,+BAA+B,KAAK,KACnC,MAAM,QAAQ,oBACb,MAAM,QAAQ,aAAa,KAAA,IACzB,KACA,MAAM,YAAY;EAC1B;CACF,GACA,EAAE,SAAS,QAAQ,CACrB;;CAGA,MAAM,uBAAuB,YAAY,MAAM,aAC7C,+BAA+B,KAAK,CACtC;CAEA,MAAM,QACJ,OAAO,YAAY,IACf,MACA,GAAG,OAAO,SAAS,eAAe,OAAO,EAAE,GAAG,OAAO,QAAQ,eAAe,OAAO;;CAGzF,MAAM,cAAc,uBAChB,KACA,OAAO,aAAa,KAClB,QACA,GAAG,MAAM,MAAM,OAAO,SAAS,eAAe,OAAO;CAE3D,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GAAC;GAAgB;GAAW;GAAgB;EAAmB,GAC/D,SACF;EACA,UAAU,aAAa,KAAA,IAAY,cAAc,SAAS,MAAM;CAClE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -0,0 +1,37 @@
+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-selected-count.d.ts
+export type DataTableSelectedCountProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
+  /** A tabela. Exige `rowSelectionFeature`. */
+  table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;
+  /**
+   * Uma função que recebe quantas linhas estão marcadas e devolve o texto.
+   * @default (count) => '3 selecionadas', '1 selecionada' ou '0 selecionadas'
+   */
+  children?: (count: number) => React.ReactNode;
+}>;
+/**
+ * Quantas linhas estão marcadas: "3 selecionadas". Aparece também sem nenhuma, "0 selecionadas":
+ * na barra da paginação, o lado esquerdo não some e volta a cada seleção.
+ *
+ * Conta os ids marcados no estado, e não as linhas carregadas: com a paginação pela API, entram as
+ * marcadas em outras páginas. Exige o `getRowId` com o id do registro (ver
+ * `DataTable.RowCheckbox`).
+ *
+ * @example
+ * ```tsx
+ * <DataTable.SelectedCount table={table}>
+ *   {(count) => `${count} de ${total}`}
+ * </DataTable.SelectedCount>
+ * ```
+ */
+export declare const DataTableSelectedCount: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableSelectedCountProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-selected-count.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selected-count.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-selected-count.tsx"],"mappings":";;;;;;;YAQY,4BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,kBAAkB,MAAM;;;;;;;;;;;;;;;;;qBAmB3B;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,4BAA4B,WAAW,SAAM,MAAA,+BAAA,MAAA"}