@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

package/dist/components/data-table/header/data-table-header-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-button.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-button.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\n\nexport type DataTableHeaderButtonProps = useRender.ComponentProps<'button'>;\n\n/**\n * O botão do tamanho da célula do header, sem ação: a base do `DataTable.SortTrigger` e de outros\n * gatilhos do header, como o de um popover da coluna. Ocupa a `DataTable.HeaderCell` inteira; nas\n * bordas, a área de agarre do `DataTable.ResizeHandle` fica por cima. Alinha o conteúdo pelo\n * `data-align` da `DataTable.HeaderCell`, sem precisar do header.\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger render={<DataTable.HeaderButton />}>\n *     <DataTable.HeaderContent header={header} />\n *   </Popover.Trigger>\n *   …\n * </Popover.Root>\n * ```\n */\nexport const DataTableHeaderButton = (props: DataTableHeaderButtonProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'DataTable.HeaderButton',\n    // Só no `button` padrão: com `render`, o elemento é de quem passou, como o `span` do\n    // `DataTable.SortTrigger` numa coluna que não ordena.\n    type: render === undefined ? 'button' : undefined,\n    className: mergeTwClassNames(\n      [\n        // A célula inteira, com um padding só: sai do padding da `DataTable.HeaderCell` pela\n        // margem negativa e põe o mesmo por dentro. O texto fica na linha do texto das células,\n        // em qualquer densidade.\n        'flex-1',\n        'self-stretch',\n        'min-w-0',\n        '-mx-(--data-table-cell-padding)',\n        'px-(--data-table-cell-padding)',\n\n        'flex',\n        'items-center',\n        'gap-1',\n        // Pelo `data-align` da `DataTable.HeaderCell`. `end`, e não o `flex-end` do\n        // `justify-end`: segue o fim da linha mesmo com a ordem invertida (`flex-row-reverse`).\n        'in-data-[align=center]:justify-center',\n        'in-data-[align=end]:[justify-content:end]',\n\n        // O `text-align: center` do botão centralizaria o texto truncado.\n        'text-start',\n\n        // `:enabled` só casa com o botão: um `span` fica de fora. O fundo do hover sobe um passo do\n        // `gray-2` do cabeçalho, a mesma cor do hover da linha; o texto não muda. A transição só\n        // durante o hover, como no `Button` do `ui`.\n        'enabled:cursor-pointer',\n        'enabled:hover:bg-gray-3',\n        'enabled:hover:transition-[background-color]',\n        'enabled:hover:ease-in',\n        'enabled:hover:duration-150',\n\n        // Por dentro: a célula vizinha pinta depois e cobriria um anel por fora.\n        'focus-ring-outside',\n        '[--focus-ring-offset:-2px]',\n        'ring-gray-12',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeaderButton.displayName = 'DataTable.HeaderButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAGlB,MAAM,WAAW,KAAA,IAAY,WAAW,KAAA;EACxC,WAAW,kBACT;GAIE;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GAGA;GACA;GAGA;GAKA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,sBAAsB,cAAc"}

package/dist/components/data-table/header/data-table-header-cell.d.ts

@@ -0,0 +1,34 @@
+import { Header, RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/header/data-table-header-cell.d.ts
+export type DataTableHeaderCellProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** O header da coluna. */
+  header: Header<TFeatures, TData>;
+}>;
+/**
+ * A célula de um header (`role="columnheader"`). Num header de grupo, ocupa as colunas que o
+ * grupo abrange; num placeholder, fica vazia e marcada com `data-placeholder`.
+ *
+ * Com `rowSortingFeature`, marca a direção da ordenação em `aria-sort` e `data-sorted`. Com
+ * `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em `data-align`.
+ * Com `columnPinningFeature`, num header fixado, gruda na borda do lado dele, marcado com
+ * `data-pinned`.
+ *
+ * Sem `children`, mostra o `DataTable.HeaderContent`. Com eles, monte o conteúdo, o
+ * `DataTable.HeaderContent` incluso, e o `DataTable.ResizeHandle`, que se ancora na borda daqui.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.HeaderCell header={header}>
+ *   <DataTable.HeaderContent header={header} />
+ *   <DataTable.ResizeHandle header={header} />
+ * </DataTable.HeaderCell>
+ * ```
+ */
+export declare const DataTableHeaderCell: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableHeaderCellProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-header-cell.d.ts.map

package/dist/components/data-table/header/data-table-header-cell.d.ts.map

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

package/dist/components/data-table/header/data-table-header-cell.js

@@ -0,0 +1,97 @@
+import { hasColumnFeature, hasHeaderFeature } from "../../../utils/has-feature.js";
+import { getDataTableColumnPinning, getDataTablePinnedStyle } from "../root/get-data-table-column-pinning.js";
+import { DataTableHeaderContent } from "./data-table-header-content.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/header/data-table-header-cell.tsx
+/**
+* A célula de um header (`role="columnheader"`). Num header de grupo, ocupa as colunas que o
+* grupo abrange; num placeholder, fica vazia e marcada com `data-placeholder`.
+*
+* Com `rowSortingFeature`, marca a direção da ordenação em `aria-sort` e `data-sorted`. Com
+* `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em `data-align`.
+* Com `columnPinningFeature`, num header fixado, gruda na borda do lado dele, marcado com
+* `data-pinned`.
+*
+* Sem `children`, mostra o `DataTable.HeaderContent`. Com eles, monte o conteúdo, o
+* `DataTable.HeaderContent` incluso, e o `DataTable.ResizeHandle`, que se ancora na borda daqui.
+*
+* @example
+* ```tsx
+* <DataTable.HeaderCell header={header}>
+*   <DataTable.HeaderContent header={header} />
+*   <DataTable.ResizeHandle header={header} />
+* </DataTable.HeaderCell>
+* ```
+*/
+const DataTableHeaderCell = (props) => {
+	const { header, render, className, children, ...rest } = props;
+	/**
+	* Só re-renderiza quando a ordenação desta coluna muda. A ordenação é opcional, então assina o
+	* store, e o guard estreita o header; sem `rowSortingFeature`, fica `false`.
+	*/
+	const sorted = useSelector(header.column.table.store, () => hasHeaderFeature(header, "rowSortingFeature") ? header.column.getIsSorted() : false);
+	/**
+	* Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Num grupo,
+	* é o da definição do grupo.
+	*/
+	const align = hasColumnFeature(header.column, "columnAlignmentFeature") ? header.column.getAlign() : void 0;
+	/**
+	* A fixação vem da coluna folha da ponta: a primeira, no início, e a última, no fim, com o
+	* deslocamento dela. Num grupo, o `getIsPinned()` diz fixado se qualquer folha for, e só a folha
+	* da ponta sabe o lado e o lugar. Sem assinatura: o pinning muda os grupos, e o
+	* `DataTable.Header` re-renderiza, com o header junto.
+	*/
+	const leafHeaders = header.getLeafHeaders().filter((leafHeader) => leafHeader.subHeaders.length === 0);
+	const startPinning = getDataTableColumnPinning((leafHeaders.at(0) ?? header).column);
+	const pinning = startPinning.position === "start" ? startPinning : getDataTableColumnPinning((leafHeaders.at(-1) ?? header).column);
+	const isGroup = header.colSpan > 1;
+	const baseProps = {
+		"data-component": "DataTable.HeaderCell",
+		"data-placeholder": header.isPlaceholder ? "" : void 0,
+		"data-sorted": sorted || void 0,
+		"data-align": align,
+		"data-pinned": pinning.position || void 0,
+		role: "columnheader",
+		"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+		"aria-colspan": isGroup ? header.colSpan : void 0,
+		style: {
+			gridColumn: isGroup ? `span ${header.colSpan}` : void 0,
+			...getDataTablePinnedStyle(pinning)
+		},
+		className: mergeTwClassNames([
+			"relative",
+			"flex",
+			"items-center",
+			"gap-1",
+			"data-[align=center]:justify-center",
+			"data-[align=end]:justify-end",
+			"min-w-0",
+			"h-(--data-table-header-height)",
+			"px-(--data-table-cell-padding)",
+			"data-pinned:sticky",
+			"data-pinned:z-20",
+			"data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]",
+			"dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]",
+			"data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]",
+			"dark:data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]",
+			"bg-gray-2",
+			"text-xs",
+			"font-medium",
+			"text-gray-11"
+		], className),
+		children: children === void 0 ? /* @__PURE__ */ jsx(DataTableHeaderContent, { header }) : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableHeaderCell.displayName = "DataTable.HeaderCell";
+//#endregion
+export { DataTableHeaderCell };
+
+//# sourceMappingURL=data-table-header-cell.js.map

package/dist/components/data-table/header/data-table-header-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-cell.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-cell.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { hasColumnFeature, hasHeaderFeature } from '../../../utils';\nimport {\n  getDataTableColumnPinning,\n  getDataTablePinnedStyle,\n} from '../root/get-data-table-column-pinning';\nimport { DataTableHeaderContent } from './data-table-header-content';\n\nexport type DataTableHeaderCellProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** O header da coluna. */\n    header: Header<TFeatures, TData>;\n  }\n>;\n\n/**\n * A célula de um header (`role=\"columnheader\"`). Num header de grupo, ocupa as colunas que o\n * grupo abrange; num placeholder, fica vazia e marcada com `data-placeholder`.\n *\n * Com `rowSortingFeature`, marca a direção da ordenação em `aria-sort` e `data-sorted`. Com\n * `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em `data-align`.\n * Com `columnPinningFeature`, num header fixado, gruda na borda do lado dele, marcado com\n * `data-pinned`.\n *\n * Sem `children`, mostra o `DataTable.HeaderContent`. Com eles, monte o conteúdo, o\n * `DataTable.HeaderContent` incluso, e o `DataTable.ResizeHandle`, que se ancora na borda daqui.\n *\n * @example\n * ```tsx\n * <DataTable.HeaderCell header={header}>\n *   <DataTable.HeaderContent header={header} />\n *   <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n */\nexport const DataTableHeaderCell = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableHeaderCellProps<TFeatures, TData>,\n) => {\n  const { header, render, className, children, ...rest } = props;\n\n  /**\n   * Só re-renderiza quando a ordenação desta coluna muda. A ordenação é opcional, então assina o\n   * store, e o guard estreita o header; sem `rowSortingFeature`, fica `false`.\n   */\n  const sorted = useSelector(header.column.table.store, () =>\n    hasHeaderFeature(header, 'rowSortingFeature')\n      ? header.column.getIsSorted()\n      : false,\n  );\n\n  /**\n   * Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Num grupo,\n   * é o da definição do grupo.\n   */\n  const align = hasColumnFeature(header.column, 'columnAlignmentFeature')\n    ? header.column.getAlign()\n    : undefined;\n\n  /**\n   * A fixação vem da coluna folha da ponta: a primeira, no início, e a última, no fim, com o\n   * deslocamento dela. Num grupo, o `getIsPinned()` diz fixado se qualquer folha for, e só a folha\n   * da ponta sabe o lado e o lugar. Sem assinatura: o pinning muda os grupos, e o\n   * `DataTable.Header` re-renderiza, com o header junto.\n   */\n  const leafHeaders = header\n    .getLeafHeaders()\n    .filter((leafHeader) => leafHeader.subHeaders.length === 0);\n  const startPinning = getDataTableColumnPinning(\n    (leafHeaders.at(0) ?? header).column,\n  );\n  const pinning =\n    startPinning.position === 'start'\n      ? startPinning\n      : getDataTableColumnPinning((leafHeaders.at(-1) ?? header).column);\n\n  const isGroup = header.colSpan > 1;\n\n  const baseProps = {\n    'data-component': 'DataTable.HeaderCell',\n    'data-placeholder': header.isPlaceholder ? '' : undefined,\n    'data-sorted': sorted || undefined,\n    'data-align': align,\n    'data-pinned': pinning.position || undefined,\n    role: 'columnheader',\n    'aria-sort':\n      sorted === 'asc'\n        ? 'ascending'\n        : sorted === 'desc'\n          ? 'descending'\n          : undefined,\n    'aria-colspan': isGroup ? header.colSpan : undefined,\n    style: {\n      // Os tracks do grid são os das colunas folha: o grupo abrange os das colunas dele.\n      gridColumn: isGroup ? `span ${header.colSpan}` : undefined,\n      ...getDataTablePinnedStyle(pinning),\n    },\n    className: mergeTwClassNames(\n      [\n        // O `DataTable.ResizeHandle` se posiciona por aqui.\n        'relative',\n\n        'flex',\n        'items-center',\n        'gap-1',\n        // Vale para o conteúdo solto. O `DataTable.HeaderButton` ocupa a célula e segue o\n        // `data-align` daqui por conta própria.\n        'data-[align=center]:justify-center',\n        'data-[align=end]:justify-end',\n\n        // Item de grid tem `min-width: auto`: sem isto, um conteúdo longo alarga o track, e a\n        // coluna deixa de bater com o template. Sem `overflow-hidden`: quem trunca é o\n        // `DataTable.HeaderContent`, e o recorte aqui cortaria a área de agarre do handle.\n        'min-w-0',\n\n        // Do `DataTable.Root`, pela densidade.\n        'h-(--data-table-header-height)',\n\n        'px-(--data-table-cell-padding)',\n\n        // Fixado: gruda acima dos handles de resize das colunas do centro (`z-10`), que passam por\n        // baixo dele.\n        'data-pinned:sticky',\n        'data-pinned:z-20',\n        // A sombra na borda da fixada, como na `DataTable.Cell`.\n        'data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n        'dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n        'data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n        'dark:data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n\n        // Opaco: o cabeçalho gruda, e as linhas passam por baixo; fixado, o centro também.\n        'bg-gray-2',\n\n        'text-xs',\n        'font-medium',\n        'text-gray-11',\n      ],\n      className,\n    ),\n    children:\n      children === undefined ? (\n        <DataTableHeaderContent header={header} />\n      ) : (\n        children\n      ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeaderCell.displayName = 'DataTable.HeaderCell';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMzD,MAAM,SAAS,YAAY,OAAO,OAAO,MAAM,aAC7C,iBAAiB,QAAQ,mBAAmB,IACxC,OAAO,OAAO,YAAY,IAC1B,KACN;;;;;CAMA,MAAM,QAAQ,iBAAiB,OAAO,QAAQ,wBAAwB,IAClE,OAAO,OAAO,SAAS,IACvB,KAAA;;;;;;;CAQJ,MAAM,cAAc,OACjB,eAAe,CAAC,CAChB,QAAQ,eAAe,WAAW,WAAW,WAAW,CAAC;CAC5D,MAAM,eAAe,2BAClB,YAAY,GAAG,CAAC,KAAK,OAAA,CAAQ,MAChC;CACA,MAAM,UACJ,aAAa,aAAa,UACtB,eACA,2BAA2B,YAAY,GAAG,EAAE,KAAK,OAAA,CAAQ,MAAM;CAErE,MAAM,UAAU,OAAO,UAAU;CAEjC,MAAM,YAAY;EAChB,kBAAkB;EAClB,oBAAoB,OAAO,gBAAgB,KAAK,KAAA;EAChD,eAAe,UAAU,KAAA;EACzB,cAAc;EACd,eAAe,QAAQ,YAAY,KAAA;EACnC,MAAM;EACN,aACE,WAAW,QACP,cACA,WAAW,SACT,eACA,KAAA;EACR,gBAAgB,UAAU,OAAO,UAAU,KAAA;EAC3C,OAAO;GAEL,YAAY,UAAU,QAAQ,OAAO,YAAY,KAAA;GACjD,GAAG,wBAAwB,OAAO;EACpC;EACA,WAAW,kBACT;GAEE;GAEA;GACA;GACA;GAGA;GACA;GAKA;GAGA;GAEA;GAIA;GACA;GAEA;GACA;GACA;GACA;GAGA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACX,oBAAC,wBAAD,EAAgC,OAAS,CAAA,IAEzC;CAEN;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}

package/dist/components/data-table/header/data-table-header-content.d.ts

@@ -0,0 +1,21 @@
+import { Header, RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/header/data-table-header-content.d.ts
+export type DataTableHeaderContentProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
+  /** O header da coluna. */
+  header: Header<TFeatures, TData>;
+}>;
+/**
+ * O conteúdo do header: o `header` da definição da coluna, truncado com reticências. Num header
+ * placeholder, fica vazio. Com `children`, eles substituem o da definição.
+ *
+ * Existe à parte porque o `DataTable.HeaderCell` não pode recortar: a área de agarre do
+ * `DataTable.ResizeHandle` passa da borda dele, e conteúdo recortado não recebe clique.
+ */
+export declare const DataTableHeaderContent: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableHeaderContentProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-header-content.d.ts.map

package/dist/components/data-table/header/data-table-header-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-content.d.ts","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-content.tsx"],"mappings":";;;;YAUY,4BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,QAAQ,OAAO,WAAW;;;;;;;;;qBAWjB;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,4BAA4B,WAAW,yBAAM,+CAAA"}

package/dist/components/data-table/header/data-table-header-content.js

@@ -0,0 +1,37 @@
+import { FlexRender } from "@tanstack/react-table";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/header/data-table-header-content.tsx
+/**
+* O conteúdo do header: o `header` da definição da coluna, truncado com reticências. Num header
+* placeholder, fica vazio. Com `children`, eles substituem o da definição.
+*
+* Existe à parte porque o `DataTable.HeaderCell` não pode recortar: a área de agarre do
+* `DataTable.ResizeHandle` passa da borda dele, e conteúdo recortado não recebe clique.
+*/
+const DataTableHeaderContent = (props) => {
+	const { header, render, className, children, ...rest } = props;
+	const content = header.isPlaceholder ? null : /* @__PURE__ */ jsx(FlexRender, { header });
+	const baseProps = {
+		"data-component": "DataTable.HeaderContent",
+		className: mergeTwClassNames([
+			"block",
+			"min-w-0",
+			"truncate",
+			"-m-1",
+			"p-1"
+		], className),
+		children: children === void 0 ? content : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableHeaderContent.displayName = "DataTable.HeaderContent";
+//#endregion
+export { DataTableHeaderContent };
+
+//# sourceMappingURL=data-table-header-content.js.map

package/dist/components/data-table/header/data-table-header-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-content.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-content.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport {\n  FlexRender,\n  type Header,\n  type RowData,\n  type TableFeatures,\n} from '@tanstack/react-table';\n\nexport type DataTableHeaderContentProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  {\n    /** O header da coluna. */\n    header: Header<TFeatures, TData>;\n  }\n>;\n\n/**\n * O conteúdo do header: o `header` da definição da coluna, truncado com reticências. Num header\n * placeholder, fica vazio. Com `children`, eles substituem o da definição.\n *\n * Existe à parte porque o `DataTable.HeaderCell` não pode recortar: a área de agarre do\n * `DataTable.ResizeHandle` passa da borda dele, e conteúdo recortado não recebe clique.\n */\nexport const DataTableHeaderContent = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableHeaderContentProps<TFeatures, TData>,\n) => {\n  const { header, render, className, children, ...rest } = props;\n\n  const content = header.isPlaceholder ? null : <FlexRender header={header} />;\n\n  const baseProps = {\n    'data-component': 'DataTable.HeaderContent',\n    className: mergeTwClassNames(\n      [\n        // `span` em bloco: trunca como um bloco e ainda cabe num botão, que só aceita conteúdo\n        // inline.\n        'block',\n        'min-w-0',\n        'truncate',\n\n        // Afasta a borda do recorte 4px sem mover o conteúdo: cabe o anel de foco de um\n        // controle aqui dentro, como o \"selecionar tudo\".\n        '-m-1',\n        'p-1',\n      ],\n      className,\n    ),\n    children: children === undefined ? content : children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeaderContent.displayName = 'DataTable.HeaderContent';\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEzD,MAAM,UAAU,OAAO,gBAAgB,OAAO,oBAAC,YAAD,EAAoB,OAAS,CAAA;CAE3E,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAGE;GACA;GACA;GAIA;GACA;EACF,GACA,SACF;EACA,UAAU,aAAa,KAAA,IAAY,UAAU;CAC/C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,uBAAuB,cAAc"}

package/dist/components/data-table/header/data-table-header-row.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/data-table/header/data-table-header-row.d.ts
+export type DataTableHeaderRowProps = useRender.ComponentProps<'div'>;
+/**
+ * Uma linha de headers (`role="row"`), por grupo de headers. É um grid com as colunas do
+ * `--data-table-template`, que o `DataTable.Root` escreve.
+ *
+ * O `DataTable.Header` com render-prop já monta uma por grupo; use direto só no laço feito à mão.
+ */
+export declare const DataTableHeaderRow: {
+  (props: DataTableHeaderRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-header-row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-row.d.ts","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-row.tsx"],"mappings":";;YAIY,0BAA0B,UAAU;;;;;;;qBAQnC;GAA6B,OAAA,0CAAuB,+CAAA"}

package/dist/components/data-table/header/data-table-header-row.js

@@ -0,0 +1,28 @@
+import { dataTableGridClassNames } from "../root/data-table-grid-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/header/data-table-header-row.tsx
+/**
+* Uma linha de headers (`role="row"`), por grupo de headers. É um grid com as colunas do
+* `--data-table-template`, que o `DataTable.Root` escreve.
+*
+* O `DataTable.Header` com render-prop já monta uma por grupo; use direto só no laço feito à mão.
+*/
+const DataTableHeaderRow = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "DataTable.HeaderRow",
+		role: "row",
+		className: mergeTwClassNames([dataTableGridClassNames], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableHeaderRow.displayName = "DataTable.HeaderRow";
+//#endregion
+export { DataTableHeaderRow };
+
+//# sourceMappingURL=data-table-header-row.js.map

package/dist/components/data-table/header/data-table-header-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-row.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-row.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport { dataTableGridClassNames } from '../root/data-table-grid-class-names';\n\nexport type DataTableHeaderRowProps = useRender.ComponentProps<'div'>;\n\n/**\n * Uma linha de headers (`role=\"row\"`), por grupo de headers. É um grid com as colunas do\n * `--data-table-template`, que o `DataTable.Root` escreve.\n *\n * O `DataTable.Header` com render-prop já monta uma por grupo; use direto só no laço feito à mão.\n */\nexport const DataTableHeaderRow = (props: DataTableHeaderRowProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'DataTable.HeaderRow',\n    role: 'row',\n    className: mergeTwClassNames(\n      [\n        // A linha horizontal fica também na última: entre os níveis de um cabeçalho agrupado e,\n        // na última, entre o cabeçalho e o corpo.\n        dataTableGridClassNames,\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeaderRow.displayName = 'DataTable.HeaderRow';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT,CAGE,uBACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,mBAAmB,cAAc"}

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

@@ -0,0 +1,46 @@
+import { Header, RowData, Table, 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/header/data-table-header.d.ts
+export type DataTableHeaderProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** A tabela do `useTable`. */
+  table: Table<TFeatures, TData>;
+  /**
+   * Uma função que recebe cada header e devolve a célula dele: o `Header` monta uma
+   * `DataTable.HeaderRow` por grupo de headers e chama a função para cada header. Com nós
+   * comuns, quem usa faz o laço.
+   * @default (header) => <DataTable.HeaderCell header={header} />
+   */
+  children?: React.ReactNode | ((header: Header<TFeatures, TData>) => React.ReactNode);
+}>;
+/**
+ * O cabeçalho da tabela (`role="rowgroup"`), grudado no topo da área de rolagem.
+ *
+ * Com render-prop ou sem `children`, faz o laço sozinho: assina os grupos de headers e só
+ * re-renderiza quando a estrutura das colunas muda (`columns`, ordem, visibilidade, pinning),
+ * sem o dono da tabela precisar re-renderizar. Com nós comuns, o laço é de quem usa, e o dono
+ * precisa re-renderizar quando a estrutura muda.
+ *
+ * Com `columnPinningFeature`, monta as linhas com os grupos de cada região (as fixadas no início,
+ * o centro e as fixadas no fim): um grupo cujas colunas atravessam a fronteira da fixação vira um
+ * header em cada região, e a parte fixada gruda.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Header table={table}>
+ *   {(header) => (
+ *     <DataTable.HeaderCell header={header}>
+ *       <DataTable.HeaderContent header={header} />
+ *       <DataTable.ResizeHandle header={header} />
+ *     </DataTable.HeaderCell>
+ *   )}
+ * </DataTable.Header>
+ * ```
+ */
+export declare const DataTableHeader: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableHeaderProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header.d.ts","names":[],"sources":["../../../../src/components/data-table/header/data-table-header.tsx"],"mappings":";;;;;YAgBY,qBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,MAAM,WAAW;;;;;;;EAOxB,WACI,MAAM,cACJ,QAAQ,OAAO,WAAW,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;qBA4BxC;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,qBAAqB,WAAW,SAAM,MAAA,+BAAA,MAAA"}

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

@@ -0,0 +1,80 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { DataTableHeaderCell } from "./data-table-header-cell.js";
+import { DataTableHeaderRow } from "./data-table-header-row.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { shallow, useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1 } from "react";
+//#region src/components/data-table/header/data-table-header.tsx
+/**
+* O cabeçalho da tabela (`role="rowgroup"`), grudado no topo da área de rolagem.
+*
+* Com render-prop ou sem `children`, faz o laço sozinho: assina os grupos de headers e só
+* re-renderiza quando a estrutura das colunas muda (`columns`, ordem, visibilidade, pinning),
+* sem o dono da tabela precisar re-renderizar. Com nós comuns, o laço é de quem usa, e o dono
+* precisa re-renderizar quando a estrutura muda.
+*
+* Com `columnPinningFeature`, monta as linhas com os grupos de cada região (as fixadas no início,
+* o centro e as fixadas no fim): um grupo cujas colunas atravessam a fronteira da fixação vira um
+* header em cada região, e a parte fixada gruda.
+*
+* @example
+* ```tsx
+* <DataTable.Header table={table}>
+*   {(header) => (
+*     <DataTable.HeaderCell header={header}>
+*       <DataTable.HeaderContent header={header} />
+*       <DataTable.ResizeHandle header={header} />
+*     </DataTable.HeaderCell>
+*   )}
+* </DataTable.Header>
+* ```
+*/
+const DataTableHeader = (props) => {
+	const { table, render, className, children, ...rest } = props;
+	/**
+	* Os grupos que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só
+	* re-renderiza quando a estrutura das colunas muda. Tamanho, ordenação e seleção mudam o store,
+	* mas não os grupos. Com pinning, os grupos de cada região: o de uma região só tem as colunas
+	* dela.
+	*/
+	const regionHeaderGroups = useSelector(table.store, () => hasTableFeature(table, "columnPinningFeature") ? [
+		table.getStartHeaderGroups(),
+		table.getCenterHeaderGroups(),
+		table.getEndHeaderGroups()
+	] : [table.getHeaderGroups()], { compare: shallow });
+	/**
+	* As linhas do cabeçalho, uma por profundidade, com os headers das regiões na ordem do
+	* template. Toda região tem o mesmo número de grupos, o da coluna mais funda.
+	*/
+	const headerRows = (regionHeaderGroups[0] ?? []).map((headerGroup) => ({
+		depth: headerGroup.depth,
+		headers: regionHeaderGroups.flatMap((headerGroups) => headerGroups[headerGroup.depth]?.headers ?? [])
+	}));
+	/**
+	* Com render-prop ou sem `children`, o laço é daqui, com uma `HeaderRow` por grupo; com nós
+	* comuns, de quem usa.
+	*/
+	const content = typeof children === "function" || children === void 0 ? headerRows.map((headerRow) => /* @__PURE__ */ jsx(DataTableHeaderRow, { children: headerRow.headers.map((header) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableHeaderCell, { header }) : children(header) }, header.id)) }, headerRow.depth)) : children;
+	const baseProps = {
+		"data-component": "DataTable.Header",
+		role: "rowgroup",
+		className: mergeTwClassNames([
+			"sticky",
+			"top-0",
+			"z-10"
+		], className),
+		children: content
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableHeader.displayName = "DataTable.Header";
+//#endregion
+export { DataTableHeader };
+
+//# sourceMappingURL=data-table-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header.js","names":["Fragment"],"sources":["../../../../src/components/data-table/header/data-table-header.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 {\n  Header,\n  RowData,\n  Table,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { DataTableHeaderCell } from './data-table-header-cell';\nimport { DataTableHeaderRow } from './data-table-header-row';\n\nexport type DataTableHeaderProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A tabela do `useTable`. */\n    table: Table<TFeatures, TData>;\n    /**\n     * Uma função que recebe cada header e devolve a célula dele: o `Header` monta uma\n     * `DataTable.HeaderRow` por grupo de headers e chama a função para cada header. Com nós\n     * comuns, quem usa faz o laço.\n     * @default (header) => <DataTable.HeaderCell header={header} />\n     */\n    children?:\n      | React.ReactNode\n      | ((header: Header<TFeatures, TData>) => React.ReactNode);\n  }\n>;\n\n/**\n * O cabeçalho da tabela (`role=\"rowgroup\"`), grudado no topo da área de rolagem.\n *\n * Com render-prop ou sem `children`, faz o laço sozinho: assina os grupos de headers e só\n * re-renderiza quando a estrutura das colunas muda (`columns`, ordem, visibilidade, pinning),\n * sem o dono da tabela precisar re-renderizar. Com nós comuns, o laço é de quem usa, e o dono\n * precisa re-renderizar quando a estrutura muda.\n *\n * Com `columnPinningFeature`, monta as linhas com os grupos de cada região (as fixadas no início,\n * o centro e as fixadas no fim): um grupo cujas colunas atravessam a fronteira da fixação vira um\n * header em cada região, e a parte fixada gruda.\n *\n * @example\n * ```tsx\n * <DataTable.Header table={table}>\n *   {(header) => (\n *     <DataTable.HeaderCell header={header}>\n *       <DataTable.HeaderContent header={header} />\n *       <DataTable.ResizeHandle header={header} />\n *     </DataTable.HeaderCell>\n *   )}\n * </DataTable.Header>\n * ```\n */\nexport const DataTableHeader = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableHeaderProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  /**\n   * Os grupos que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só\n   * re-renderiza quando a estrutura das colunas muda. Tamanho, ordenação e seleção mudam o store,\n   * mas não os grupos. Com pinning, os grupos de cada região: o de uma região só tem as colunas\n   * dela.\n   */\n  const regionHeaderGroups = useSelector(\n    table.store,\n    () =>\n      hasTableFeature(table, 'columnPinningFeature')\n        ? [\n            table.getStartHeaderGroups(),\n            table.getCenterHeaderGroups(),\n            table.getEndHeaderGroups(),\n          ]\n        : [table.getHeaderGroups()],\n    { compare: shallow },\n  );\n\n  /**\n   * As linhas do cabeçalho, uma por profundidade, com os headers das regiões na ordem do\n   * template. Toda região tem o mesmo número de grupos, o da coluna mais funda.\n   */\n  const headerRows = (regionHeaderGroups[0] ?? []).map((headerGroup) => ({\n    depth: headerGroup.depth,\n    headers: regionHeaderGroups.flatMap(\n      (headerGroups) => headerGroups[headerGroup.depth]?.headers ?? [],\n    ),\n  }));\n\n  /**\n   * Com render-prop ou sem `children`, o laço é daqui, com uma `HeaderRow` por grupo; com nós\n   * comuns, de quem usa.\n   */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? headerRows.map((headerRow) => (\n          <DataTableHeaderRow key={headerRow.depth}>\n            {headerRow.headers.map((header) => (\n              <Fragment key={header.id}>\n                {children === undefined ? (\n                  <DataTableHeaderCell header={header} />\n                ) : (\n                  children(header)\n                )}\n              </Fragment>\n            ))}\n          </DataTableHeaderRow>\n        ))\n      : children;\n\n  const baseProps = {\n    'data-component': 'DataTable.Header',\n    role: 'rowgroup',\n    className: mergeTwClassNames(\n      [\n        // Gruda no ancestral que rola, como o viewport do `DataTable.ScrollArea`.\n        'sticky',\n        'top-0',\n        'z-10',\n      ],\n      className,\n    ),\n    children: content,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeader.displayName = 'DataTable.Header';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAa,mBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;;;CAQxD,MAAM,qBAAqB,YACzB,MAAM,aAEJ,gBAAgB,OAAO,sBAAsB,IACzC;EACE,MAAM,qBAAqB;EAC3B,MAAM,sBAAsB;EAC5B,MAAM,mBAAmB;CAC3B,IACA,CAAC,MAAM,gBAAgB,CAAC,GAC9B,EAAE,SAAS,QAAQ,CACrB;;;;;CAMA,MAAM,cAAc,mBAAmB,MAAM,CAAC,EAAA,CAAG,KAAK,iBAAiB;EACrE,OAAO,YAAY;EACnB,SAAS,mBAAmB,SACzB,iBAAiB,aAAa,YAAY,MAAM,EAAE,WAAW,CAAC,CACjE;CACF,EAAE;;;;;CAMF,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,WAAW,KAAK,cACd,oBAAC,oBAAD,EAAA,UACG,UAAU,QAAQ,KAAK,WACtB,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,qBAAD,EAA6B,OAAS,CAAA,IAEtC,SAAS,MAAM,EAET,GANK,OAAO,EAMZ,CACX,EACiB,GAVK,UAAU,KAUf,CACrB,IACD;CAEN,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GAEE;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

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

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as DataTable };

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

@@ -0,0 +1,2 @@
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as DataTable };

package/dist/components/data-table/index.parts.d.ts

@@ -0,0 +1,33 @@
+import { DataTableBody, DataTableBodyProps } from "./body/data-table-body.js";
+import { DataTableCell, DataTableCellProps } from "./body/data-table-cell.js";
+import { DataTableEmpty, DataTableEmptyProps } from "./body/data-table-empty.js";
+import { DataTableRow, DataTableRowProps } from "./body/data-table-row.js";
+import { DataTableHeaderButton, DataTableHeaderButtonProps } from "./header/data-table-header-button.js";
+import { DataTableHeaderCell, DataTableHeaderCellProps } from "./header/data-table-header-cell.js";
+import { DataTableHeaderContent, DataTableHeaderContentProps } from "./header/data-table-header-content.js";
+import { DataTableHeaderRow, DataTableHeaderRowProps } from "./header/data-table-header-row.js";
+import { DataTableHeader, DataTableHeaderProps } from "./header/data-table-header.js";
+import { DataTablePageButton, DataTablePageButtonPage, DataTablePageButtonProps } from "./pagination/data-table-page-button.js";
+import { DataTablePageSizeSelect, DataTablePageSizeSelectProps } from "./pagination/data-table-page-size-select.js";
+import { DataTablePageStatus, DataTablePageStatusProps, DataTablePageStatusValues } from "./pagination/data-table-page-status.js";
+import { DataTablePagination, DataTablePaginationProps } from "./pagination/data-table-pagination.js";
+import { DataTableRowRange, DataTableRowRangeProps, DataTableRowRangeValues } from "./pagination/data-table-row-range.js";
+import { DataTableSelectedCount, DataTableSelectedCountProps } from "./pagination/data-table-selected-count.js";
+import { DataTableResizeHandle, DataTableResizeHandleProps } from "./resize/data-table-resize-handle.js";
+import { DataTableRoot, DataTableRootProps } from "./root/data-table-root.js";
+import { DataTableScrollArea, DataTableScrollAreaProps } from "./root/data-table-scroll-area.js";
+import { DataTableRowCheckbox, DataTableRowCheckboxProps } from "./selection/data-table-row-checkbox.js";
+import { DataTableSelectAllCheckbox, DataTableSelectAllCheckboxProps } from "./selection/data-table-select-all-checkbox.js";
+import { DataTableSelectionBar, DataTableSelectionBarProps } from "./selection/data-table-selection-bar.js";
+import { SelectionColumnDefOptions, selectionColumnDef } from "./selection/selection-column-def.js";
+import { DataTableSortIndicator, DataTableSortIndicatorProps } from "./sorting/data-table-sort-indicator.js";
+import { DataTableSortTrigger, DataTableSortTriggerProps } from "./sorting/data-table-sort-trigger.js";
+import { DataTableDensitySelect, DataTableDensitySelectProps } from "./toolbar/data-table-density-select.js";
+import { DataTableSortColumnSelect, DataTableSortColumnSelectProps } from "./toolbar/data-table-sort-column-select.js";
+import { DataTableSortDirectionSelect, DataTableSortDirectionSelectProps } from "./toolbar/data-table-sort-direction-select.js";
+declare namespace index_parts_d_exports {
+  export { DataTableBody as Body, DataTableBodyProps as BodyProps, DataTableCell as Cell, DataTableCellProps as CellProps, DataTableDensitySelect as DensitySelect, DataTableDensitySelectProps as DensitySelectProps, DataTableEmpty as Empty, DataTableEmptyProps as EmptyProps, DataTableHeader as Header, DataTableHeaderButton as HeaderButton, DataTableHeaderButtonProps as HeaderButtonProps, DataTableHeaderCell as HeaderCell, DataTableHeaderCellProps as HeaderCellProps, DataTableHeaderContent as HeaderContent, DataTableHeaderContentProps as HeaderContentProps, DataTableHeaderProps as HeaderProps, DataTableHeaderRow as HeaderRow, DataTableHeaderRowProps as HeaderRowProps, DataTablePageButton as PageButton, DataTablePageButtonPage as PageButtonPage, DataTablePageButtonProps as PageButtonProps, DataTablePageSizeSelect as PageSizeSelect, DataTablePageSizeSelectProps as PageSizeSelectProps, DataTablePageStatus as PageStatus, DataTablePageStatusProps as PageStatusProps, DataTablePageStatusValues as PageStatusValues, DataTablePagination as Pagination, DataTablePaginationProps as PaginationProps, DataTableResizeHandle as ResizeHandle, DataTableResizeHandleProps as ResizeHandleProps, DataTableRoot as Root, DataTableRootProps as RootProps, DataTableRow as Row, DataTableRowCheckbox as RowCheckbox, DataTableRowCheckboxProps as RowCheckboxProps, DataTableRowProps as RowProps, DataTableRowRange as RowRange, DataTableRowRangeProps as RowRangeProps, DataTableRowRangeValues as RowRangeValues, DataTableScrollArea as ScrollArea, DataTableScrollAreaProps as ScrollAreaProps, DataTableSelectAllCheckbox as SelectAllCheckbox, DataTableSelectAllCheckboxProps as SelectAllCheckboxProps, DataTableSelectedCount as SelectedCount, DataTableSelectedCountProps as SelectedCountProps, DataTableSelectionBar as SelectionBar, DataTableSelectionBarProps as SelectionBarProps, SelectionColumnDefOptions, DataTableSortColumnSelect as SortColumnSelect, DataTableSortColumnSelectProps as SortColumnSelectProps, DataTableSortDirectionSelect as SortDirectionSelect, DataTableSortDirectionSelectProps as SortDirectionSelectProps, DataTableSortIndicator as SortIndicator, DataTableSortIndicatorProps as SortIndicatorProps, DataTableSortTrigger as SortTrigger, DataTableSortTriggerProps as SortTriggerProps, selectionColumnDef };
+}
+//#endregion
+export { DataTableBody as Body, type DataTableBodyProps as BodyProps, DataTableCell as Cell, type DataTableCellProps as CellProps, DataTableDensitySelect as DensitySelect, type DataTableDensitySelectProps as DensitySelectProps, DataTableEmpty as Empty, type DataTableEmptyProps as EmptyProps, DataTableHeader as Header, DataTableHeaderButton as HeaderButton, type DataTableHeaderButtonProps as HeaderButtonProps, DataTableHeaderCell as HeaderCell, type DataTableHeaderCellProps as HeaderCellProps, DataTableHeaderContent as HeaderContent, type DataTableHeaderContentProps as HeaderContentProps, type DataTableHeaderProps as HeaderProps, DataTableHeaderRow as HeaderRow, type DataTableHeaderRowProps as HeaderRowProps, DataTablePageButton as PageButton, type DataTablePageButtonPage as PageButtonPage, type DataTablePageButtonProps as PageButtonProps, DataTablePageSizeSelect as PageSizeSelect, type DataTablePageSizeSelectProps as PageSizeSelectProps, DataTablePageStatus as PageStatus, type DataTablePageStatusProps as PageStatusProps, type DataTablePageStatusValues as PageStatusValues, DataTablePagination as Pagination, type DataTablePaginationProps as PaginationProps, DataTableResizeHandle as ResizeHandle, type DataTableResizeHandleProps as ResizeHandleProps, DataTableRoot as Root, type DataTableRootProps as RootProps, DataTableRow as Row, DataTableRowCheckbox as RowCheckbox, type DataTableRowCheckboxProps as RowCheckboxProps, type DataTableRowProps as RowProps, DataTableRowRange as RowRange, type DataTableRowRangeProps as RowRangeProps, type DataTableRowRangeValues as RowRangeValues, DataTableScrollArea as ScrollArea, type DataTableScrollAreaProps as ScrollAreaProps, DataTableSelectAllCheckbox as SelectAllCheckbox, type DataTableSelectAllCheckboxProps as SelectAllCheckboxProps, DataTableSelectedCount as SelectedCount, type DataTableSelectedCountProps as SelectedCountProps, DataTableSelectionBar as SelectionBar, type DataTableSelectionBarProps as SelectionBarProps, type SelectionColumnDefOptions, DataTableSortColumnSelect as SortColumnSelect, type DataTableSortColumnSelectProps as SortColumnSelectProps, DataTableSortDirectionSelect as SortDirectionSelect, type DataTableSortDirectionSelectProps as SortDirectionSelectProps, DataTableSortIndicator as SortIndicator, type DataTableSortIndicatorProps as SortIndicatorProps, DataTableSortTrigger as SortTrigger, type DataTableSortTriggerProps as SortTriggerProps, index_parts_d_exports, selectionColumnDef };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/data-table/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../src/components/data-table/index.parts.ts"],"mappings":""}

package/dist/components/data-table/index.parts.js

@@ -0,0 +1,62 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { DataTableHeaderButton } from "./header/data-table-header-button.js";
+import { DataTableCell } from "./body/data-table-cell.js";
+import { DataTableRow } from "./body/data-table-row.js";
+import { DataTableBody } from "./body/data-table-body.js";
+import { DataTableEmpty } from "./body/data-table-empty.js";
+import { DataTableHeaderContent } from "./header/data-table-header-content.js";
+import { DataTableHeaderCell } from "./header/data-table-header-cell.js";
+import { DataTableHeaderRow } from "./header/data-table-header-row.js";
+import { DataTableHeader } from "./header/data-table-header.js";
+import { DataTablePageButton } from "./pagination/data-table-page-button.js";
+import { DataTablePageSizeSelect } from "./pagination/data-table-page-size-select.js";
+import { DataTablePageStatus } from "./pagination/data-table-page-status.js";
+import { DataTableRowRange } from "./pagination/data-table-row-range.js";
+import { DataTableSelectedCount } from "./pagination/data-table-selected-count.js";
+import { DataTablePagination } from "./pagination/data-table-pagination.js";
+import { DataTableResizeHandle } from "./resize/data-table-resize-handle.js";
+import { DataTableRoot } from "./root/data-table-root.js";
+import { DataTableScrollArea } from "./root/data-table-scroll-area.js";
+import { DataTableRowCheckbox } from "./selection/data-table-row-checkbox.js";
+import { DataTableSelectAllCheckbox } from "./selection/data-table-select-all-checkbox.js";
+import { DataTableSelectionBar } from "./selection/data-table-selection-bar.js";
+import { selectionColumnDef } from "./selection/selection-column-def.js";
+import { DataTableSortIndicator } from "./sorting/data-table-sort-indicator.js";
+import { DataTableSortTrigger } from "./sorting/data-table-sort-trigger.js";
+import { DataTableDensitySelect } from "./toolbar/data-table-density-select.js";
+import { DataTableSortColumnSelect } from "./toolbar/data-table-sort-column-select.js";
+import { DataTableSortDirectionSelect } from "./toolbar/data-table-sort-direction-select.js";
+//#region src/components/data-table/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Body: () => DataTableBody,
+	Cell: () => DataTableCell,
+	DensitySelect: () => DataTableDensitySelect,
+	Empty: () => DataTableEmpty,
+	Header: () => DataTableHeader,
+	HeaderButton: () => DataTableHeaderButton,
+	HeaderCell: () => DataTableHeaderCell,
+	HeaderContent: () => DataTableHeaderContent,
+	HeaderRow: () => DataTableHeaderRow,
+	PageButton: () => DataTablePageButton,
+	PageSizeSelect: () => DataTablePageSizeSelect,
+	PageStatus: () => DataTablePageStatus,
+	Pagination: () => DataTablePagination,
+	ResizeHandle: () => DataTableResizeHandle,
+	Root: () => DataTableRoot,
+	Row: () => DataTableRow,
+	RowCheckbox: () => DataTableRowCheckbox,
+	RowRange: () => DataTableRowRange,
+	ScrollArea: () => DataTableScrollArea,
+	SelectAllCheckbox: () => DataTableSelectAllCheckbox,
+	SelectedCount: () => DataTableSelectedCount,
+	SelectionBar: () => DataTableSelectionBar,
+	SortColumnSelect: () => DataTableSortColumnSelect,
+	SortDirectionSelect: () => DataTableSortDirectionSelect,
+	SortIndicator: () => DataTableSortIndicator,
+	SortTrigger: () => DataTableSortTrigger,
+	selectionColumnDef: () => selectionColumnDef
+});
+//#endregion
+export { DataTableBody as Body, DataTableCell as Cell, DataTableDensitySelect as DensitySelect, DataTableEmpty as Empty, DataTableHeader as Header, DataTableHeaderButton as HeaderButton, DataTableHeaderCell as HeaderCell, DataTableHeaderContent as HeaderContent, DataTableHeaderRow as HeaderRow, DataTablePageButton as PageButton, DataTablePageSizeSelect as PageSizeSelect, DataTablePageStatus as PageStatus, DataTablePagination as Pagination, DataTableResizeHandle as ResizeHandle, DataTableRoot as Root, DataTableRow as Row, DataTableRowCheckbox as RowCheckbox, DataTableRowRange as RowRange, DataTableScrollArea as ScrollArea, DataTableSelectAllCheckbox as SelectAllCheckbox, DataTableSelectedCount as SelectedCount, DataTableSelectionBar as SelectionBar, DataTableSortColumnSelect as SortColumnSelect, DataTableSortDirectionSelect as SortDirectionSelect, DataTableSortIndicator as SortIndicator, DataTableSortTrigger as SortTrigger, index_parts_exports, selectionColumnDef };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/data-table/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../src/components/data-table/index.parts.ts"],"sourcesContent":["export { DataTableBody as Body } from './body/data-table-body';\nexport { DataTableCell as Cell } from './body/data-table-cell';\nexport { DataTableEmpty as Empty } from './body/data-table-empty';\nexport { DataTableRow as Row } from './body/data-table-row';\nexport { DataTableHeader as Header } from './header/data-table-header';\nexport { DataTableHeaderButton as HeaderButton } from './header/data-table-header-button';\nexport { DataTableHeaderCell as HeaderCell } from './header/data-table-header-cell';\nexport { DataTableHeaderContent as HeaderContent } from './header/data-table-header-content';\nexport { DataTableHeaderRow as HeaderRow } from './header/data-table-header-row';\nexport { DataTablePageButton as PageButton } from './pagination/data-table-page-button';\nexport { DataTablePageSizeSelect as PageSizeSelect } from './pagination/data-table-page-size-select';\nexport { DataTablePageStatus as PageStatus } from './pagination/data-table-page-status';\nexport { DataTablePagination as Pagination } from './pagination/data-table-pagination';\nexport { DataTableRowRange as RowRange } from './pagination/data-table-row-range';\nexport { DataTableSelectedCount as SelectedCount } from './pagination/data-table-selected-count';\nexport { DataTableResizeHandle as ResizeHandle } from './resize/data-table-resize-handle';\nexport { DataTableRoot as Root } from './root/data-table-root';\nexport { DataTableScrollArea as ScrollArea } from './root/data-table-scroll-area';\nexport { DataTableRowCheckbox as RowCheckbox } from './selection/data-table-row-checkbox';\nexport { DataTableSelectAllCheckbox as SelectAllCheckbox } from './selection/data-table-select-all-checkbox';\nexport { DataTableSelectionBar as SelectionBar } from './selection/data-table-selection-bar';\nexport { selectionColumnDef } from './selection/selection-column-def';\nexport { DataTableSortIndicator as SortIndicator } from './sorting/data-table-sort-indicator';\nexport { DataTableSortTrigger as SortTrigger } from './sorting/data-table-sort-trigger';\nexport { DataTableDensitySelect as DensitySelect } from './toolbar/data-table-density-select';\nexport { DataTableSortColumnSelect as SortColumnSelect } from './toolbar/data-table-sort-column-select';\nexport { DataTableSortDirectionSelect as SortDirectionSelect } from './toolbar/data-table-sort-direction-select';\n\n/* types */\n\nexport type { DataTableBodyProps as BodyProps } from './body/data-table-body';\nexport type { DataTableCellProps as CellProps } from './body/data-table-cell';\nexport type { DataTableEmptyProps as EmptyProps } from './body/data-table-empty';\nexport type { DataTableRowProps as RowProps } from './body/data-table-row';\nexport type { DataTableHeaderProps as HeaderProps } from './header/data-table-header';\nexport type { DataTableHeaderButtonProps as HeaderButtonProps } from './header/data-table-header-button';\nexport type { DataTableHeaderCellProps as HeaderCellProps } from './header/data-table-header-cell';\nexport type { DataTableHeaderContentProps as HeaderContentProps } from './header/data-table-header-content';\nexport type { DataTableHeaderRowProps as HeaderRowProps } from './header/data-table-header-row';\nexport type {\n  DataTablePageButtonPage as PageButtonPage,\n  DataTablePageButtonProps as PageButtonProps,\n} from './pagination/data-table-page-button';\nexport type { DataTablePageSizeSelectProps as PageSizeSelectProps } from './pagination/data-table-page-size-select';\nexport type {\n  DataTablePageStatusProps as PageStatusProps,\n  DataTablePageStatusValues as PageStatusValues,\n} from './pagination/data-table-page-status';\nexport type { DataTablePaginationProps as PaginationProps } from './pagination/data-table-pagination';\nexport type {\n  DataTableRowRangeProps as RowRangeProps,\n  DataTableRowRangeValues as RowRangeValues,\n} from './pagination/data-table-row-range';\nexport type { DataTableSelectedCountProps as SelectedCountProps } from './pagination/data-table-selected-count';\nexport type { DataTableResizeHandleProps as ResizeHandleProps } from './resize/data-table-resize-handle';\nexport type { DataTableRootProps as RootProps } from './root/data-table-root';\nexport type { DataTableScrollAreaProps as ScrollAreaProps } from './root/data-table-scroll-area';\nexport type { DataTableRowCheckboxProps as RowCheckboxProps } from './selection/data-table-row-checkbox';\nexport type { DataTableSelectAllCheckboxProps as SelectAllCheckboxProps } from './selection/data-table-select-all-checkbox';\nexport type { DataTableSelectionBarProps as SelectionBarProps } from './selection/data-table-selection-bar';\nexport type { SelectionColumnDefOptions } from './selection/selection-column-def';\nexport type { DataTableSortIndicatorProps as SortIndicatorProps } from './sorting/data-table-sort-indicator';\nexport type { DataTableSortTriggerProps as SortTriggerProps } from './sorting/data-table-sort-trigger';\nexport type { DataTableDensitySelectProps as DensitySelectProps } from './toolbar/data-table-density-select';\nexport type { DataTableSortColumnSelectProps as SortColumnSelectProps } from './toolbar/data-table-sort-column-select';\nexport type { DataTableSortDirectionSelectProps as SortDirectionSelectProps } from './toolbar/data-table-sort-direction-select';\n"],"mappings":""}

package/dist/components/data-table/loading/get-data-table-loading-without-rows.d.ts

@@ -0,0 +1,16 @@
+import { RowData, Table, TableFeatures } from "@tanstack/react-table";
+//#region src/components/data-table/loading/get-data-table-loading-without-rows.d.ts
+/**
+ * Se a tabela carrega sem nenhuma linha, como na primeira carga: o corpo mostra as
+ * linhas-fantasma, e a barra da paginação, sem o total, que ainda não chegou. Sem
+ * `loadingFeature`, `false`.
+ *
+ * @example
+ * ```ts
+ * // Primeira carga da API: `isLoading: true` e `data: []`.
+ * getDataTableLoadingWithoutRows(table); // → true
+ * ```
+ */
+export declare const getDataTableLoadingWithoutRows: <TFeatures extends TableFeatures, TData extends RowData>(table: Table<TFeatures, TData>) => boolean;
+//#endregion
+//# sourceMappingURL=get-data-table-loading-without-rows.d.ts.map

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

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

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

@@ -0,0 +1,18 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+//#region src/components/data-table/loading/get-data-table-loading-without-rows.ts
+/**
+* Se a tabela carrega sem nenhuma linha, como na primeira carga: o corpo mostra as
+* linhas-fantasma, e a barra da paginação, sem o total, que ainda não chegou. Sem
+* `loadingFeature`, `false`.
+*
+* @example
+* ```ts
+* // Primeira carga da API: `isLoading: true` e `data: []`.
+* getDataTableLoadingWithoutRows(table); // → true
+* ```
+*/
+const getDataTableLoadingWithoutRows = (table) => hasTableFeature(table, "loadingFeature") && table.atoms.isLoading.get() && table.getRowModel().rows.length === 0;
+//#endregion
+export { getDataTableLoadingWithoutRows };
+
+//# sourceMappingURL=get-data-table-loading-without-rows.js.map