@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

package/dist/components/data-table/selection/data-table-selection-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selection-bar.js","names":[],"sources":["../../../../src/components/data-table/selection/data-table-selection-bar.tsx"],"sourcesContent":["import { ActionBar } from '@lucasbernardosn/react-ui/overlays/action-bar';\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';\nimport { DataTableSelectedCount } from '../pagination/data-table-selected-count';\n\nexport type DataTableSelectionBarProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  ActionBar.PopupProps,\n  {\n    /** A tabela. Exige `rowSelectionFeature`. */\n    table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;\n    /**\n     * As ações da seleção. Recebe os ids das linhas marcadas, inclusive os de outras páginas e os\n     * de linhas que não estão carregadas: o app resolve o id para o registro.\n     */\n    children?: (selectedIds: string[]) => React.ReactNode;\n    /** A posição da barra no rodapé da tela. */\n    placement?: ActionBar.RootProps['placement'];\n    /**\n     * O texto lido pelo leitor de tela no resumo, que limpa a seleção.\n     * @default 'Limpar seleção'\n     */\n    clearLabel?: string;\n  }\n>;\n\n/**\n * A barra de ações da seleção, fixa no rodapé da tela: aparece com ao menos uma linha marcada e\n * some ao limpar. Monta o `ActionBar` do `ui` e liga à tabela o que é igual em toda lista: a\n * abertura pela contagem, o texto do resumo e a limpeza da seleção.\n *\n * O resumo (\"3 selecionadas\") é o botão que limpa a seleção, e o Esc também a limpa. As ações são\n * do app: entram como `children`, que recebe os ids marcados. A barra não confirma nada nem sabe\n * o que as ações fazem.\n *\n * Os ids vêm do estado da seleção e valem para toda a tabela, e não só para a página à vista.\n * Quando um filtro muda as linhas, a seleção continua com ids que sumiram da tela: quem filtra\n * decide se a limpa (`table.resetRowSelection()`).\n *\n * @example\n * ```tsx\n * <DataTable.SelectionBar table={table}>\n *   {(selectedIds) => (\n *     <Button onClick={() => removeAll(selectedIds)}>Excluir</Button>\n *   )}\n * </DataTable.SelectionBar>\n * ```\n */\nexport const DataTableSelectionBar = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSelectionBarProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    children,\n    placement,\n    clearLabel = 'Limpar seleção',\n    ...rest\n  } = props;\n\n  /** Os ids marcados: o estado só guarda as linhas marcadas. Re-renderiza quando muda. */\n  const selectedIds = useSelector(table.atoms.rowSelection, (rowSelection) =>\n    Object.keys(rowSelection),\n  );\n\n  return (\n    <ActionBar.Root\n      placement={placement}\n      open={selectedIds.length > 0}\n      onOpenChange={(open) => {\n        if (!open) {\n          table.resetRowSelection(true);\n        }\n      }}\n    >\n      <ActionBar.Portal>\n        <ActionBar.Popup\n          data-component=\"DataTable.SelectionBar\"\n          {...rest}\n        >\n          <ActionBar.SelectionTrigger\n            onClick={() => table.resetRowSelection(true)}\n          >\n            <DataTableSelectedCount\n              table={table}\n              className=\"text-gray-12\"\n            />\n            <span className=\"sr-only\">{clearLabel}</span>\n          </ActionBar.SelectionTrigger>\n\n          {children?.(selectedIds)}\n        </ActionBar.Popup>\n      </ActionBar.Portal>\n    </ActionBar.Root>\n  );\n};\n\nDataTableSelectionBar.displayName = 'DataTable.SelectionBar';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAa,yBAIX,UACG;CACH,MAAM,EACJ,OACA,UACA,WACA,aAAa,kBACb,GAAG,SACD;;CAGJ,MAAM,cAAc,YAAY,MAAM,MAAM,eAAe,iBACzD,OAAO,KAAK,YAAY,CAC1B;CAEA,OACE,oBAAC,UAAU,MAAX;EACa;EACX,MAAM,YAAY,SAAS;EAC3B,eAAe,SAAS;GACtB,IAAI,CAAC,MACH,MAAM,kBAAkB,IAAI;EAEhC;EAEA,UAAA,oBAAC,UAAU,QAAX,EAAA,UACE,qBAAC,UAAU,OAAX;GACE,kBAAe;GACf,GAAI;GAFN,UAAA,CAIE,qBAAC,UAAU,kBAAX;IACE,eAAe,MAAM,kBAAkB,IAAI;IAD7C,UAAA,CAGE,oBAAC,wBAAD;KACS;KACP,WAAU;IACX,CAAA,GACD,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAiB,CAAA,CAClB;GAE3B,CAAA,GAAA,WAAW,WAAW,CACR;EACD,CAAA,EAAA,CAAA;CACJ,CAAA;AAEpB;AAEA,sBAAsB,cAAc"}

package/dist/components/data-table/selection/selection-column-def.d.ts

@@ -0,0 +1,54 @@
+import { RowWith, TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+//#region src/components/data-table/selection/selection-column-def.d.ts
+/** As opções da coluna de seleção. */
+export type SelectionColumnDefOptions = {
+  /**
+   * O id da coluna.
+   * @default 'select'
+   */
+  id?: string;
+  /**
+   * O que o checkbox do header marca e mede. Ver `DataTable.SelectAllCheckbox`.
+   * @default 'page' com `rowPaginationFeature`, 'all' sem
+   */
+  scope?: 'page' | 'all';
+};
+/**
+ * A definição da coluna de seleção: o `DataTable.SelectAllCheckbox` no header e o
+ * `DataTable.RowCheckbox` em cada linha, com largura fixa, sem redimensionar, ordenar nem
+ * esconder. Passe ao `columnHelper.display` do app. Com `columnAlignmentFeature`, os checkboxes
+ * ficam centralizados. Com a paginação pela API, a tabela precisa do `getRowId` com o id do
+ * registro (ver `DataTable.RowCheckbox`).
+ *
+ * Não recebe o `columnHelper`: numa função genérica, o tipo da definição de coluna fica adiado e
+ * não aceita as opções das features. No `display` do app os tipos são concretos, e uma tabela sem
+ * `rowSelectionFeature` é recusada pelo header e pela célula daqui.
+ *
+ * @example
+ * ```ts
+ * const columns = columnHelper.columns([
+ *   columnHelper.display(DataTable.selectionColumnDef()),
+ *   columnHelper.accessor('name', { header: 'Nome' }),
+ * ]);
+ * ```
+ */
+export declare const selectionColumnDef: (options?: SelectionColumnDefOptions) => {
+  id: string;
+  size: number;
+  minSize: number;
+  maxSize: number;
+  align: "center";
+  enableResizing: boolean;
+  enableSorting: boolean;
+  enableHiding: boolean;
+  header: <TFeatures extends TableFeatures, TData extends RowData>(context: {
+    table: TableWith<TFeatures, TData, "rowSelectionFeature">;
+  }) => import("react").JSX.Element;
+  cell: <TFeatures extends TableFeatures, TData extends RowData>(context: {
+    row: RowWith<TFeatures, TData, "rowSelectionFeature">;
+  }) => import("react").JSX.Element;
+};
+//#endregion
+//# sourceMappingURL=selection-column-def.d.ts.map

package/dist/components/data-table/selection/selection-column-def.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-column-def.d.ts","names":[],"sources":["../../../../src/components/data-table/selection/selection-column-def.tsx"],"mappings":";;;;;YAOY;;;;;EAKV;;;;;EAKA;;;;;;;;;;;;;;;;;;;;;qBAkCW,qBAAsB,UAAS;;;;;;;;;EAY/B,SAAA,kBAAkB,eAAe,cAAc,SAAO;IAC7D,OAAO,UAAU,WAAW;wBAC7B,IAAA;EAMM,OAAA,kBAAkB,eAAe,cAAc,SAAO;IAC3D,KAAK,QAAQ,WAAW;wBACzB,IAAA"}

package/dist/components/data-table/selection/selection-column-def.js

@@ -0,0 +1,55 @@
+import { DataTableRowCheckbox } from "./data-table-row-checkbox.js";
+import { DataTableSelectAllCheckbox } from "./data-table-select-all-checkbox.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-table/selection/selection-column-def.tsx
+/**
+* A largura da coluna: o checkbox de 16px mais o padding da densidade mais folgada (12px de cada
+* lado) e a borda. Menos que isso, a célula, que trunca, cortaria o checkbox nessa densidade.
+*/
+const SELECTION_COLUMN_SIZE = 44;
+/**
+* O checkbox no centro da célula e do header. Numa constante tipada: o literal direto no objeto
+* devolvido viraria `string`, que o `align` da definição recusa.
+*/
+const SELECTION_COLUMN_ALIGN = "center";
+/**
+* A definição da coluna de seleção: o `DataTable.SelectAllCheckbox` no header e o
+* `DataTable.RowCheckbox` em cada linha, com largura fixa, sem redimensionar, ordenar nem
+* esconder. Passe ao `columnHelper.display` do app. Com `columnAlignmentFeature`, os checkboxes
+* ficam centralizados. Com a paginação pela API, a tabela precisa do `getRowId` com o id do
+* registro (ver `DataTable.RowCheckbox`).
+*
+* Não recebe o `columnHelper`: numa função genérica, o tipo da definição de coluna fica adiado e
+* não aceita as opções das features. No `display` do app os tipos são concretos, e uma tabela sem
+* `rowSelectionFeature` é recusada pelo header e pela célula daqui.
+*
+* @example
+* ```ts
+* const columns = columnHelper.columns([
+*   columnHelper.display(DataTable.selectionColumnDef()),
+*   columnHelper.accessor('name', { header: 'Nome' }),
+* ]);
+* ```
+*/
+const selectionColumnDef = (options = {}) => {
+	const { id = "select", scope } = options;
+	return {
+		id,
+		size: SELECTION_COLUMN_SIZE,
+		minSize: SELECTION_COLUMN_SIZE,
+		maxSize: SELECTION_COLUMN_SIZE,
+		align: SELECTION_COLUMN_ALIGN,
+		enableResizing: false,
+		enableSorting: false,
+		enableHiding: false,
+		header: (context) => /* @__PURE__ */ jsx(DataTableSelectAllCheckbox, {
+			table: context.table,
+			scope
+		}),
+		cell: (context) => /* @__PURE__ */ jsx(DataTableRowCheckbox, { row: context.row })
+	};
+};
+//#endregion
+export { selectionColumnDef };
+
+//# sourceMappingURL=selection-column-def.js.map

package/dist/components/data-table/selection/selection-column-def.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-column-def.js","names":[],"sources":["../../../../src/components/data-table/selection/selection-column-def.tsx"],"sourcesContent":["import type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnAlign } from '../../../features';\nimport type { RowWith, TableWith } from '../../../types';\nimport { DataTableRowCheckbox } from './data-table-row-checkbox';\nimport { DataTableSelectAllCheckbox } from './data-table-select-all-checkbox';\n\n/** As opções da coluna de seleção. */\nexport type SelectionColumnDefOptions = {\n  /**\n   * O id da coluna.\n   * @default 'select'\n   */\n  id?: string;\n  /**\n   * O que o checkbox do header marca e mede. Ver `DataTable.SelectAllCheckbox`.\n   * @default 'page' com `rowPaginationFeature`, 'all' sem\n   */\n  scope?: 'page' | 'all';\n};\n\n/**\n * A largura da coluna: o checkbox de 16px mais o padding da densidade mais folgada (12px de cada\n * lado) e a borda. Menos que isso, a célula, que trunca, cortaria o checkbox nessa densidade.\n */\nconst SELECTION_COLUMN_SIZE = 44;\n\n/**\n * O checkbox no centro da célula e do header. Numa constante tipada: o literal direto no objeto\n * devolvido viraria `string`, que o `align` da definição recusa.\n */\nconst SELECTION_COLUMN_ALIGN: ColumnAlign = 'center';\n\n/**\n * A definição da coluna de seleção: o `DataTable.SelectAllCheckbox` no header e o\n * `DataTable.RowCheckbox` em cada linha, com largura fixa, sem redimensionar, ordenar nem\n * esconder. Passe ao `columnHelper.display` do app. Com `columnAlignmentFeature`, os checkboxes\n * ficam centralizados. Com a paginação pela API, a tabela precisa do `getRowId` com o id do\n * registro (ver `DataTable.RowCheckbox`).\n *\n * Não recebe o `columnHelper`: numa função genérica, o tipo da definição de coluna fica adiado e\n * não aceita as opções das features. No `display` do app os tipos são concretos, e uma tabela sem\n * `rowSelectionFeature` é recusada pelo header e pela célula daqui.\n *\n * @example\n * ```ts\n * const columns = columnHelper.columns([\n *   columnHelper.display(DataTable.selectionColumnDef()),\n *   columnHelper.accessor('name', { header: 'Nome' }),\n * ]);\n * ```\n */\nexport const selectionColumnDef = (options: SelectionColumnDefOptions = {}) => {\n  const { id = 'select', scope } = options;\n\n  return {\n    id,\n    size: SELECTION_COLUMN_SIZE,\n    minSize: SELECTION_COLUMN_SIZE,\n    maxSize: SELECTION_COLUMN_SIZE,\n    align: SELECTION_COLUMN_ALIGN,\n    enableResizing: false,\n    enableSorting: false,\n    enableHiding: false,\n    header: <TFeatures extends TableFeatures, TData extends RowData>(context: {\n      table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;\n    }) => (\n      <DataTableSelectAllCheckbox\n        table={context.table}\n        scope={scope}\n      />\n    ),\n    cell: <TFeatures extends TableFeatures, TData extends RowData>(context: {\n      row: RowWith<TFeatures, TData, 'rowSelectionFeature'>;\n    }) => <DataTableRowCheckbox row={context.row} />,\n  };\n};\n"],"mappings":";;;;;;;;AAwBA,MAAM,wBAAwB;;;;;AAM9B,MAAM,yBAAsC;;;;;;;;;;;;;;;;;;;;AAqB5C,MAAa,sBAAsB,UAAqC,CAAC,MAAM;CAC7E,MAAM,EAAE,KAAK,UAAU,UAAU;CAEjC,OAAO;EACL;EACA,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,gBAAgB;EAChB,eAAe;EACf,cAAc;EACd,SAAiE,YAG/D,oBAAC,4BAAD;GACE,OAAO,QAAQ;GACR;EACR,CAAA;EAEH,OAA+D,YAEzD,oBAAC,sBAAD,EAAsB,KAAK,QAAQ,IAAM,CAAA;CACjD;AACF"}

package/dist/components/data-table/sorting/data-table-sort-indicator.d.ts

@@ -0,0 +1,26 @@
+import { HeaderWith } 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/sorting/data-table-sort-indicator.d.ts
+export type DataTableSortIndicatorProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
+  /** O header da coluna. Exige `rowSortingFeature`. */
+  header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;
+}>;
+/**
+ * O ícone da direção da ordenação: seta para cima, para baixo, ou dupla e apagada com a coluna
+ * fora da ordenação. Com mais de uma coluna ordenada, mostra também a posição desta. Com
+ * `children`, eles substituem o ícone; a direção fica em `data-sorted`.
+ *
+ * Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), não renderiza.
+ *
+ * É decorativo (`aria-hidden`): a direção chega ao leitor de tela pelo `aria-sort` do
+ * `DataTable.HeaderCell`.
+ */
+export declare const DataTableSortIndicator: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableSortIndicatorProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-sort-indicator.d.ts.map

package/dist/components/data-table/sorting/data-table-sort-indicator.d.ts.map

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

package/dist/components/data-table/sorting/data-table-sort-indicator.js

@@ -0,0 +1,64 @@
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
+import { CaretDownIcon, CaretUpDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { Fragment, jsx, jsxs } 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/sorting/data-table-sort-indicator.tsx
+/**
+* O ícone da direção da ordenação: seta para cima, para baixo, ou dupla e apagada com a coluna
+* fora da ordenação. Com mais de uma coluna ordenada, mostra também a posição desta. Com
+* `children`, eles substituem o ícone; a direção fica em `data-sorted`.
+*
+* Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), não renderiza.
+*
+* É decorativo (`aria-hidden`): a direção chega ao leitor de tela pelo `aria-sort` do
+* `DataTable.HeaderCell`.
+*/
+const DataTableSortIndicator = (props) => {
+	const { header, render, className, children, ...rest } = props;
+	const { table } = header.column;
+	/**
+	* Só re-renderiza quando a direção desta coluna muda, e só o atom da ordenação roda o seletor.
+	*/
+	const sorted = useSelector(table.atoms.sorting, () => header.column.getIsSorted());
+	/**
+	* A posição na ordenação, de 1 em diante, só com mais de uma coluna ordenada: com uma só, o
+	* número não diz nada. Re-renderiza quando a posição desta coluna muda.
+	*/
+	const position = useSelector(table.atoms.sorting, (sorting) => {
+		const index = header.column.getSortIndex();
+		return index >= 0 && sorting.length > 1 ? index + 1 : void 0;
+	});
+	const icon = sorted === "asc" ? /* @__PURE__ */ jsx(CaretUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(CaretDownIcon, {}) : /* @__PURE__ */ jsx(CaretUpDownIcon, {});
+	const baseProps = {
+		"data-component": "DataTable.SortIndicator",
+		"data-sorted": sorted || void 0,
+		"aria-hidden": true,
+		className: mergeTwClassNames([
+			"inline-flex",
+			"shrink-0",
+			"items-center",
+			"gap-0.5",
+			"text-gray-8",
+			"data-sorted:text-gray-12",
+			"text-2xs",
+			"tabular-nums"
+		], className),
+		children: children === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			render: icon,
+			className: "size-3.5"
+		}), position] }) : children
+	};
+	const element = useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+	return header.column.getCanSort() ? element : null;
+};
+DataTableSortIndicator.displayName = "DataTable.SortIndicator";
+//#endregion
+export { DataTableSortIndicator };
+
+//# sourceMappingURL=data-table-sort-indicator.js.map

package/dist/components/data-table/sorting/data-table-sort-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-sort-indicator.js","names":[],"sources":["../../../../src/components/data-table/sorting/data-table-sort-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport {\n  CaretDownIcon,\n  CaretUpDownIcon,\n  CaretUpIcon,\n} from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { HeaderWith } from '../../../types';\n\nexport type DataTableSortIndicatorProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  {\n    /** O header da coluna. Exige `rowSortingFeature`. */\n    header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;\n  }\n>;\n\n/**\n * O ícone da direção da ordenação: seta para cima, para baixo, ou dupla e apagada com a coluna\n * fora da ordenação. Com mais de uma coluna ordenada, mostra também a posição desta. Com\n * `children`, eles substituem o ícone; a direção fica em `data-sorted`.\n *\n * Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), não renderiza.\n *\n * É decorativo (`aria-hidden`): a direção chega ao leitor de tela pelo `aria-sort` do\n * `DataTable.HeaderCell`.\n */\nexport const DataTableSortIndicator = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSortIndicatorProps<TFeatures, TData>,\n) => {\n  const { header, render, className, children, ...rest } = props;\n\n  const { table } = header.column;\n\n  /**\n   * Só re-renderiza quando a direção desta coluna muda, e só o atom da ordenação roda o seletor.\n   */\n  const sorted = useSelector(table.atoms.sorting, () =>\n    header.column.getIsSorted(),\n  );\n\n  /**\n   * A posição na ordenação, de 1 em diante, só com mais de uma coluna ordenada: com uma só, o\n   * número não diz nada. Re-renderiza quando a posição desta coluna muda.\n   */\n  const position = useSelector(table.atoms.sorting, (sorting) => {\n    const index = header.column.getSortIndex();\n\n    return index >= 0 && sorting.length > 1 ? index + 1 : undefined;\n  });\n\n  const icon =\n    sorted === 'asc' ? (\n      <CaretUpIcon />\n    ) : sorted === 'desc' ? (\n      <CaretDownIcon />\n    ) : (\n      <CaretUpDownIcon />\n    );\n\n  const baseProps = {\n    'data-component': 'DataTable.SortIndicator',\n    'data-sorted': sorted || undefined,\n    'aria-hidden': true,\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'shrink-0',\n        'items-center',\n        'gap-0.5',\n\n        'text-gray-8',\n        'data-sorted:text-gray-12',\n\n        'text-2xs',\n        'tabular-nums',\n      ],\n      className,\n    ),\n    children:\n      children === undefined ? (\n        <>\n          <Icon\n            render={icon}\n            className=\"size-3.5\"\n          />\n          {position}\n        </>\n      ) : (\n        children\n      ),\n  };\n\n  const element = useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n\n  return header.column.getCanSort() ? element : null;\n};\n\nDataTableSortIndicator.displayName = 'DataTable.SortIndicator';\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEzD,MAAM,EAAE,UAAU,OAAO;;;;CAKzB,MAAM,SAAS,YAAY,MAAM,MAAM,eACrC,OAAO,OAAO,YAAY,CAC5B;;;;;CAMA,MAAM,WAAW,YAAY,MAAM,MAAM,UAAU,YAAY;EAC7D,MAAM,QAAQ,OAAO,OAAO,aAAa;EAEzC,OAAO,SAAS,KAAK,QAAQ,SAAS,IAAI,QAAQ,IAAI,KAAA;CACxD,CAAC;CAED,MAAM,OACJ,WAAW,QACT,oBAAC,aAAD,CAAc,CAAA,IACZ,WAAW,SACb,oBAAC,eAAD,CAAgB,CAAA,IAEhB,oBAAC,iBAAD,CAAkB,CAAA;CAGtB,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe,UAAU,KAAA;EACzB,eAAe;EACf,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACX,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,QAAQ;GACR,WAAU;EACX,CAAA,GACA,QACD,EAAA,CAAA,IAEF;CAEN;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,OAAO,OAAO,WAAW,IAAI,UAAU;AAChD;AAEA,uBAAuB,cAAc"}

package/dist/components/data-table/sorting/data-table-sort-trigger.d.ts

@@ -0,0 +1,31 @@
+import { HeaderWith } 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/sorting/data-table-sort-trigger.d.ts
+export type DataTableSortTriggerProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'button'>, {
+  /** O header da coluna. Exige `rowSortingFeature`. */
+  header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;
+}>;
+/**
+ * O botão que alterna a ordenação da coluna: crescente, decrescente e sem ordenação, ou o ciclo
+ * configurado nas opções da tabela. Com Shift, ordena por mais de uma coluna. Serve à ordenação
+ * local (`sortedRowModel`) e à da API (`manualSorting`).
+ *
+ * É o `DataTable.HeaderButton` com a ação de ordenar: ocupa a célula do header, e as bordas ficam
+ * com a área de agarre do `DataTable.ResizeHandle`. Os filhos são o que ele mostra, em geral o
+ * `DataTable.HeaderContent` e o `DataTable.SortIndicator`. Marca a direção em `data-sorted`. Numa
+ * coluna `align: 'end'`, a ordem dos filhos se inverte: o indicador vem antes do texto, e o texto
+ * encosta na mesma borda dos valores.
+ *
+ * Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), vira um `span` sem ação,
+ * marcado com `data-disabled`: o layout não muda, e um controle dentro dele, como o checkbox da
+ * coluna de seleção, continua clicável. Um botão desabilitado engoliria o clique.
+ */
+export declare const DataTableSortTrigger: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableSortTriggerProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-sort-trigger.d.ts.map

package/dist/components/data-table/sorting/data-table-sort-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-sort-trigger.d.ts","names":[],"sources":["../../../../src/components/data-table/sorting/data-table-sort-trigger.tsx"],"mappings":";;;;;;YAQY,0BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,QAAQ,WAAW,WAAW;;;;;;;;;;;;;;;;;qBAmBrB;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,0BAA0B,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/sorting/data-table-sort-trigger.js

@@ -0,0 +1,46 @@
+import { DataTableHeaderButton } from "../header/data-table-header-button.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/sorting/data-table-sort-trigger.tsx
+/**
+* O botão que alterna a ordenação da coluna: crescente, decrescente e sem ordenação, ou o ciclo
+* configurado nas opções da tabela. Com Shift, ordena por mais de uma coluna. Serve à ordenação
+* local (`sortedRowModel`) e à da API (`manualSorting`).
+*
+* É o `DataTable.HeaderButton` com a ação de ordenar: ocupa a célula do header, e as bordas ficam
+* com a área de agarre do `DataTable.ResizeHandle`. Os filhos são o que ele mostra, em geral o
+* `DataTable.HeaderContent` e o `DataTable.SortIndicator`. Marca a direção em `data-sorted`. Numa
+* coluna `align: 'end'`, a ordem dos filhos se inverte: o indicador vem antes do texto, e o texto
+* encosta na mesma borda dos valores.
+*
+* Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), vira um `span` sem ação,
+* marcado com `data-disabled`: o layout não muda, e um controle dentro dele, como o checkbox da
+* coluna de seleção, continua clicável. Um botão desabilitado engoliria o clique.
+*/
+const DataTableSortTrigger = (props) => {
+	const { header, render, className, ...rest } = props;
+	/**
+	* Só re-renderiza quando a direção desta coluna muda, e só o atom da ordenação roda o seletor:
+	* redimensionar ou selecionar não chega aqui.
+	*/
+	const sorted = useSelector(header.column.table.atoms.sorting, () => header.column.getIsSorted());
+	const canSort = header.column.getCanSort();
+	const baseProps = {
+		"data-component": "DataTable.SortTrigger",
+		"data-sorted": sorted || void 0,
+		"data-disabled": canSort ? void 0 : "",
+		onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+		className: mergeTwClassNames(["in-data-[align=end]:flex-row-reverse", "data-sorted:text-gray-12"], className)
+	};
+	return /* @__PURE__ */ jsx(DataTableHeaderButton, {
+		...mergeProps(baseProps, rest),
+		render: render ?? (canSort ? void 0 : /* @__PURE__ */ jsx("span", {}))
+	});
+};
+DataTableSortTrigger.displayName = "DataTable.SortTrigger";
+//#endregion
+export { DataTableSortTrigger };
+
+//# sourceMappingURL=data-table-sort-trigger.js.map

package/dist/components/data-table/sorting/data-table-sort-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-sort-trigger.js","names":[],"sources":["../../../../src/components/data-table/sorting/data-table-sort-trigger.tsx"],"sourcesContent":["import { mergeProps, type 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 { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { HeaderWith } from '../../../types';\nimport { DataTableHeaderButton } from '../header/data-table-header-button';\n\nexport type DataTableSortTriggerProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'button'>,\n  {\n    /** O header da coluna. Exige `rowSortingFeature`. */\n    header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;\n  }\n>;\n\n/**\n * O botão que alterna a ordenação da coluna: crescente, decrescente e sem ordenação, ou o ciclo\n * configurado nas opções da tabela. Com Shift, ordena por mais de uma coluna. Serve à ordenação\n * local (`sortedRowModel`) e à da API (`manualSorting`).\n *\n * É o `DataTable.HeaderButton` com a ação de ordenar: ocupa a célula do header, e as bordas ficam\n * com a área de agarre do `DataTable.ResizeHandle`. Os filhos são o que ele mostra, em geral o\n * `DataTable.HeaderContent` e o `DataTable.SortIndicator`. Marca a direção em `data-sorted`. Numa\n * coluna `align: 'end'`, a ordem dos filhos se inverte: o indicador vem antes do texto, e o texto\n * encosta na mesma borda dos valores.\n *\n * Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), vira um `span` sem ação,\n * marcado com `data-disabled`: o layout não muda, e um controle dentro dele, como o checkbox da\n * coluna de seleção, continua clicável. Um botão desabilitado engoliria o clique.\n */\nexport const DataTableSortTrigger = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSortTriggerProps<TFeatures, TData>,\n) => {\n  const { header, render, className, ...rest } = props;\n\n  /**\n   * Só re-renderiza quando a direção desta coluna muda, e só o atom da ordenação roda o seletor:\n   * redimensionar ou selecionar não chega aqui.\n   */\n  const sorted = useSelector(header.column.table.atoms.sorting, () =>\n    header.column.getIsSorted(),\n  );\n\n  const canSort = header.column.getCanSort();\n\n  const baseProps = {\n    'data-component': 'DataTable.SortTrigger',\n    'data-sorted': sorted || undefined,\n    'data-disabled': canSort ? undefined : '',\n    onClick: canSort ? header.column.getToggleSortingHandler() : undefined,\n    className: mergeTwClassNames(\n      [\n        // Invertida, a linha começa pelo fim: o texto fica na borda, e o indicador antes dele.\n        'in-data-[align=end]:flex-row-reverse',\n\n        'data-sorted:text-gray-12',\n      ],\n      className,\n    ),\n  };\n\n  return (\n    <DataTableHeaderButton\n      {...mergeProps(baseProps, rest)}\n      render={render ?? (canSort ? undefined : <span />)}\n    />\n  );\n};\n\nDataTableSortTrigger.displayName = 'DataTable.SortTrigger';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,wBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,GAAG,SAAS;;;;;CAM/C,MAAM,SAAS,YAAY,OAAO,OAAO,MAAM,MAAM,eACnD,OAAO,OAAO,YAAY,CAC5B;CAEA,MAAM,UAAU,OAAO,OAAO,WAAW;CAEzC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe,UAAU,KAAA;EACzB,iBAAiB,UAAU,KAAA,IAAY;EACvC,SAAS,UAAU,OAAO,OAAO,wBAAwB,IAAI,KAAA;EAC7D,WAAW,kBACT,CAEE,wCAEA,0BACF,GACA,SACF;CACF;CAEA,OACE,oBAAC,uBAAD;EACE,GAAI,WAAW,WAAW,IAAI;EAC9B,QAAQ,WAAW,UAAU,KAAA,IAAY,oBAAC,QAAD,CAAO,CAAA;CACjD,CAAA;AAEL;AAEA,qBAAqB,cAAc"}

package/dist/components/data-table/toolbar/data-table-density-select.d.ts

@@ -0,0 +1,39 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowDensity } from "../../../features/row-density/row-density-feature.types.js";
+import "../../../features/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Select } from "@lucasbernardosn/react-ui/collections/select";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/toolbar/data-table-density-select.d.ts
+export type DataTableDensitySelectProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Select.TriggerProps, {
+  /** A tabela. Exige `rowDensityFeature`. */
+  table: TableWith<TFeatures, TData, 'rowDensityFeature'>;
+  /**
+   * O nome de cada densidade.
+   * @default { compact: 'Compacta', standard: 'Padrão', airy: 'Arejada' }
+   */
+  labels?: Partial<Record<RowDensity, string>>;
+  /**
+   * O tamanho do select.
+   * @default 'sm'
+   */
+  size?: Select.RootProps<RowDensity>['size'];
+}>;
+/**
+ * O select da densidade das linhas, para a barra de ferramentas. Sem rótulo visível: o nome para
+ * o leitor de tela é "Densidade", trocável pelo `aria-label`.
+ *
+ * Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.DensitySelect table={table} />
+ * ```
+ */
+export declare const DataTableDensitySelect: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableDensitySelectProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-density-select.d.ts.map

package/dist/components/data-table/toolbar/data-table-density-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-density-select.d.ts","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-density-select.tsx"],"mappings":";;;;;;;;YAOY,4BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,OAAO;;EAGL,OAAO,UAAU,WAAW;;;;;EAK5B,SAAS,QAAQ,OAAO;;;;;EAKxB,OAAO,OAAO,UAAU;;;;;;;;;;;;;qBAuBf;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,4BAA4B,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/toolbar/data-table-density-select.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { Select } from "@lucasbernardosn/react-ui/collections/select";
+//#region src/components/data-table/toolbar/data-table-density-select.tsx
+const DEFAULT_LABELS = {
+	compact: "Compacta",
+	standard: "Padrão",
+	airy: "Arejada"
+};
+const DENSITIES = [
+	"compact",
+	"standard",
+	"airy"
+];
+/**
+* O select da densidade das linhas, para a barra de ferramentas. Sem rótulo visível: o nome para
+* o leitor de tela é "Densidade", trocável pelo `aria-label`.
+*
+* Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.
+*
+* @example
+* ```tsx
+* <DataTable.DensitySelect table={table} />
+* ```
+*/
+const DataTableDensitySelect = (props) => {
+	const { table, labels, size = "sm", disabled, ...rest } = props;
+	/** Re-renderiza quando a densidade muda. */
+	const density = useSelector(table.atoms.rowDensity);
+	const items = DENSITIES.map((value) => ({
+		label: labels?.[value] ?? DEFAULT_LABELS[value],
+		value
+	}));
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		size,
+		value: density,
+		items,
+		disabled,
+		onValueChange: (value) => {
+			if (value !== null) table.setRowDensity(value);
+		},
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			"data-component": "DataTable.DensitySelect",
+			"aria-label": "Densidade",
+			...rest,
+			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)) }) })
+		}) })]
+	});
+};
+DataTableDensitySelect.displayName = "DataTable.DensitySelect";
+//#endregion
+export { DataTableDensitySelect };
+
+//# sourceMappingURL=data-table-density-select.js.map

package/dist/components/data-table/toolbar/data-table-density-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-density-select.js","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-density-select.tsx"],"sourcesContent":["import { Select } from '@lucasbernardosn/react-ui/collections/select';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { RowDensity } from '../../../features';\nimport type { TableWith } from '../../../types';\n\nexport type DataTableDensitySelectProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Select.TriggerProps,\n  {\n    /** A tabela. Exige `rowDensityFeature`. */\n    table: TableWith<TFeatures, TData, 'rowDensityFeature'>;\n    /**\n     * O nome de cada densidade.\n     * @default { compact: 'Compacta', standard: 'Padrão', airy: 'Arejada' }\n     */\n    labels?: Partial<Record<RowDensity, string>>;\n    /**\n     * O tamanho do select.\n     * @default 'sm'\n     */\n    size?: Select.RootProps<RowDensity>['size'];\n  }\n>;\n\nconst DEFAULT_LABELS: Record<RowDensity, string> = {\n  compact: 'Compacta',\n  standard: 'Padrão',\n  airy: 'Arejada',\n};\n\nconst DENSITIES: RowDensity[] = ['compact', 'standard', 'airy'];\n\n/**\n * O select da densidade das linhas, para a barra de ferramentas. Sem rótulo visível: o nome para\n * o leitor de tela é \"Densidade\", trocável pelo `aria-label`.\n *\n * Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.\n *\n * @example\n * ```tsx\n * <DataTable.DensitySelect table={table} />\n * ```\n */\nexport const DataTableDensitySelect = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableDensitySelectProps<TFeatures, TData>,\n) => {\n  const { table, labels, size = 'sm', disabled, ...rest } = props;\n\n  /** Re-renderiza quando a densidade muda. */\n  const density = useSelector(table.atoms.rowDensity);\n\n  const items = DENSITIES.map((value) => ({\n    label: labels?.[value] ?? DEFAULT_LABELS[value],\n    value,\n  }));\n\n  return (\n    <Select.Root<RowDensity>\n      size={size}\n      value={density}\n      items={items}\n      disabled={disabled}\n      onValueChange={(value) => {\n        if (value !== null) {\n          table.setRowDensity(value);\n        }\n      }}\n    >\n      <Select.Trigger\n        data-component=\"DataTable.DensitySelect\"\n        aria-label=\"Densidade\"\n        {...rest}\n      >\n        <Select.Value />\n        <Select.Icon />\n      </Select.Trigger>\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\nDataTableDensitySelect.displayName = 'DataTable.DensitySelect';\n"],"mappings":";;;;AA4BA,MAAM,iBAA6C;CACjD,SAAS;CACT,UAAU;CACV,MAAM;AACR;AAEA,MAAM,YAA0B;CAAC;CAAW;CAAY;AAAM;;;;;;;;;;;;AAa9D,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,OAAO,MAAM,UAAU,GAAG,SAAS;;CAG1D,MAAM,UAAU,YAAY,MAAM,MAAM,UAAU;CAElD,MAAM,QAAQ,UAAU,KAAK,WAAW;EACtC,OAAO,SAAS,UAAU,eAAe;EACzC;CACF,EAAE;CAEF,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,OAAO;EACA;EACG;EACV,gBAAgB,UAAU;GACxB,IAAI,UAAU,MACZ,MAAM,cAAc,KAAK;EAE7B;EATF,UAAA,CAWE,qBAAC,OAAO,SAAR;GACE,kBAAe;GACf,cAAW;GACX,GAAI;GAHN,UAAA,CAKE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,MAAR,CAAc,CAAA,CACA;EAEhB,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,uBAAuB,cAAc"}

package/dist/components/data-table/toolbar/data-table-sort-column-select.d.ts

@@ -0,0 +1,48 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { Column, RowData, TableFeatures } from "@tanstack/react-table";
+import { Select } from "@lucasbernardosn/react-ui/collections/select";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/toolbar/data-table-sort-column-select.d.ts
+export type DataTableSortColumnSelectProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Select.TriggerProps, {
+  /** A tabela. Exige `rowSortingFeature`. */
+  table: TableWith<TFeatures, TData, 'rowSortingFeature'>;
+  /**
+   * O nome de uma coluna.
+   * @default getDefaultColumnLabel: o `header` quando é texto, e o id quando não é
+   */
+  getLabel?: (column: Column<TFeatures, TData>) => string;
+  /**
+   * O nome da opção que tira a ordenação.
+   * @default 'Sem ordenação'
+   */
+  noSortingLabel?: string;
+  /**
+   * O tamanho do select.
+   * @default 'sm'
+   */
+  size?: Select.RootProps<string>['size'];
+}>;
+/**
+ * O select da coluna da ordenação, para onde o cabeçalho não serve de controle, como no celular.
+ * Lista as colunas visíveis que ordenam, e "Sem ordenação" no topo; a coluna da ordenação atual
+ * entra no fim mesmo escondida. Com `enableSortingRemoval: false` na tabela, que deixa a lista
+ * sempre ordenada, o "Sem ordenação" não aparece. Escolher uma coluna troca a
+ * ordenação inteira por ela, na direção atual, ou na primeira da coluna sem ordenação antes. Com
+ * a ordenação por várias colunas, mostra a primeira.
+ *
+ * Vai junto com o `DataTable.SortDirectionSelect`. Quando aparecem é do app, pela `className`
+ * (ex.: `sm:hidden`). Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.SortColumnSelect table={table} className="sm:hidden" />
+ * <DataTable.SortDirectionSelect table={table} className="sm:hidden" />
+ * ```
+ */
+export declare const DataTableSortColumnSelect: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableSortColumnSelectProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-sort-column-select.d.ts.map

package/dist/components/data-table/toolbar/data-table-sort-column-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-sort-column-select.d.ts","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-sort-column-select.tsx"],"mappings":";;;;;;YAWY,+BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,OAAO;;EAGL,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,QAAQ,OAAO,WAAW;;;;;EAKtC;;;;;EAKA,OAAO,OAAO;;;;;;;;;;;;;;;;;;;qBAwBL;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,+BAA+B,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/toolbar/data-table-sort-column-select.js

@@ -0,0 +1,79 @@
+import { getDefaultColumnLabel } from "../../../utils/get-default-column-label.js";
+import { hasColumnFeature, hasTableFeature } from "../../../utils/has-feature.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { Select } from "@lucasbernardosn/react-ui/collections/select";
+//#region src/components/data-table/toolbar/data-table-sort-column-select.tsx
+/** O valor da opção que tira a ordenação. Um id de coluna nunca é vazio. */
+const NO_SORTING = "";
+/**
+* O select da coluna da ordenação, para onde o cabeçalho não serve de controle, como no celular.
+* Lista as colunas visíveis que ordenam, e "Sem ordenação" no topo; a coluna da ordenação atual
+* entra no fim mesmo escondida. Com `enableSortingRemoval: false` na tabela, que deixa a lista
+* sempre ordenada, o "Sem ordenação" não aparece. Escolher uma coluna troca a
+* ordenação inteira por ela, na direção atual, ou na primeira da coluna sem ordenação antes. Com
+* a ordenação por várias colunas, mostra a primeira.
+*
+* Vai junto com o `DataTable.SortDirectionSelect`. Quando aparecem é do app, pela `className`
+* (ex.: `sm:hidden`). Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.
+*
+* @example
+* ```tsx
+* <DataTable.SortColumnSelect table={table} className="sm:hidden" />
+* <DataTable.SortDirectionSelect table={table} className="sm:hidden" />
+* ```
+*/
+const DataTableSortColumnSelect = (props) => {
+	const { table, getLabel = getDefaultColumnLabel, noSortingLabel = "Sem ordenação", size = "sm", disabled, ...rest } = props;
+	/** Re-renderiza quando a primeira coluna da ordenação muda. */
+	const sortedColumnId = useSelector(table.atoms.sorting, (sorting) => sorting[0]?.id ?? NO_SORTING);
+	const sortableColumns = useSelector(table.store, () => hasTableFeature(table, "columnVisibilityFeature") ? table.getVisibleLeafColumns() : table.getAllLeafColumns()).filter((column) => hasColumnFeature(column, "rowSortingFeature") && column.getCanSort());
+	/**
+	* A coluna da ordenação entra no fim mesmo fora da lista: escondida, ou sem a ordenação pelo
+	* usuário mas ordenada pelo código. Sem ela, o trigger mostraria o id.
+	*/
+	const sortedColumn = sortedColumnId === NO_SORTING || sortableColumns.some((column) => column.id === sortedColumnId) ? void 0 : table.getColumn(sortedColumnId);
+	const items = [...table.options.enableSortingRemoval !== false ? [{
+		label: noSortingLabel,
+		value: NO_SORTING
+	}] : [], ...[...sortableColumns, ...sortedColumn ? [sortedColumn] : []].map((column) => ({
+		label: getLabel(column),
+		value: column.id
+	}))];
+	const handleValueChange = (columnId) => {
+		if (columnId === null || columnId === NO_SORTING) {
+			table.resetSorting(true);
+			return;
+		}
+		const column = table.getColumn(columnId);
+		if (!(column && hasColumnFeature(column, "rowSortingFeature"))) return;
+		table.setSorting((sorting) => [{
+			id: columnId,
+			desc: sorting[0]?.desc ?? column.getFirstSortDir() === "desc"
+		}]);
+	};
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		size,
+		value: sortedColumnId,
+		items,
+		disabled,
+		onValueChange: handleValueChange,
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			"data-component": "DataTable.SortColumnSelect",
+			"aria-label": "Ordenar por",
+			...rest,
+			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)) }) })
+		}) })]
+	});
+};
+DataTableSortColumnSelect.displayName = "DataTable.SortColumnSelect";
+//#endregion
+export { DataTableSortColumnSelect };
+
+//# sourceMappingURL=data-table-sort-column-select.js.map

package/dist/components/data-table/toolbar/data-table-sort-column-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-sort-column-select.js","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-sort-column-select.tsx"],"sourcesContent":["import { Select } from '@lucasbernardosn/react-ui/collections/select';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Column, RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\nimport {\n  getDefaultColumnLabel,\n  hasColumnFeature,\n  hasTableFeature,\n} from '../../../utils';\n\nexport type DataTableSortColumnSelectProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Select.TriggerProps,\n  {\n    /** A tabela. Exige `rowSortingFeature`. */\n    table: TableWith<TFeatures, TData, 'rowSortingFeature'>;\n    /**\n     * O nome de uma coluna.\n     * @default getDefaultColumnLabel: o `header` quando é texto, e o id quando não é\n     */\n    getLabel?: (column: Column<TFeatures, TData>) => string;\n    /**\n     * O nome da opção que tira a ordenação.\n     * @default 'Sem ordenação'\n     */\n    noSortingLabel?: string;\n    /**\n     * O tamanho do select.\n     * @default 'sm'\n     */\n    size?: Select.RootProps<string>['size'];\n  }\n>;\n\n/** O valor da opção que tira a ordenação. Um id de coluna nunca é vazio. */\nconst NO_SORTING = '';\n\n/**\n * O select da coluna da ordenação, para onde o cabeçalho não serve de controle, como no celular.\n * Lista as colunas visíveis que ordenam, e \"Sem ordenação\" no topo; a coluna da ordenação atual\n * entra no fim mesmo escondida. Com `enableSortingRemoval: false` na tabela, que deixa a lista\n * sempre ordenada, o \"Sem ordenação\" não aparece. Escolher uma coluna troca a\n * ordenação inteira por ela, na direção atual, ou na primeira da coluna sem ordenação antes. Com\n * a ordenação por várias colunas, mostra a primeira.\n *\n * Vai junto com o `DataTable.SortDirectionSelect`. Quando aparecem é do app, pela `className`\n * (ex.: `sm:hidden`). Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.\n *\n * @example\n * ```tsx\n * <DataTable.SortColumnSelect table={table} className=\"sm:hidden\" />\n * <DataTable.SortDirectionSelect table={table} className=\"sm:hidden\" />\n * ```\n */\nexport const DataTableSortColumnSelect = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSortColumnSelectProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    getLabel = getDefaultColumnLabel,\n    noSortingLabel = 'Sem ordenação',\n    size = 'sm',\n    disabled,\n    ...rest\n  } = props;\n\n  /** Re-renderiza quando a primeira coluna da ordenação muda. */\n  const sortedColumnId = useSelector(\n    table.atoms.sorting,\n    (sorting) => sorting[0]?.id ?? NO_SORTING,\n  );\n\n  /**\n   * As colunas, que o TanStack memoiza: re-renderiza quando a ordem ou a visibilidade mudam. A\n   * visibilidade é opcional, então assina o store.\n   */\n  const columns = useSelector(table.store, () =>\n    hasTableFeature(table, 'columnVisibilityFeature')\n      ? table.getVisibleLeafColumns()\n      : table.getAllLeafColumns(),\n  );\n\n  const sortableColumns = columns.filter(\n    (column) =>\n      hasColumnFeature(column, 'rowSortingFeature') && column.getCanSort(),\n  );\n\n  /**\n   * A coluna da ordenação entra no fim mesmo fora da lista: escondida, ou sem a ordenação pelo\n   * usuário mas ordenada pelo código. Sem ela, o trigger mostraria o id.\n   */\n  const sortedColumn =\n    sortedColumnId === NO_SORTING ||\n    sortableColumns.some((column) => column.id === sortedColumnId)\n      ? undefined\n      : table.getColumn(sortedColumnId);\n\n  const canRemoveSorting = table.options.enableSortingRemoval !== false;\n\n  const items = [\n    ...(canRemoveSorting ? [{ label: noSortingLabel, value: NO_SORTING }] : []),\n    ...[...sortableColumns, ...(sortedColumn ? [sortedColumn] : [])].map(\n      (column) => ({ label: getLabel(column), value: column.id }),\n    ),\n  ];\n\n  const handleValueChange = (columnId: string | null) => {\n    if (columnId === null || columnId === NO_SORTING) {\n      table.resetSorting(true);\n\n      return;\n    }\n\n    const column = table.getColumn(columnId);\n\n    if (!(column && hasColumnFeature(column, 'rowSortingFeature'))) {\n      return;\n    }\n\n    table.setSorting((sorting) => [\n      {\n        id: columnId,\n        desc: sorting[0]?.desc ?? column.getFirstSortDir() === 'desc',\n      },\n    ]);\n  };\n\n  return (\n    <Select.Root<string>\n      size={size}\n      value={sortedColumnId}\n      items={items}\n      disabled={disabled}\n      onValueChange={handleValueChange}\n    >\n      <Select.Trigger\n        data-component=\"DataTable.SortColumnSelect\"\n        aria-label=\"Ordenar por\"\n        {...rest}\n      >\n        <Select.Value />\n        <Select.Icon />\n      </Select.Trigger>\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\nDataTableSortColumnSelect.displayName = 'DataTable.SortColumnSelect';\n"],"mappings":";;;;;;;AAsCA,MAAM,aAAa;;;;;;;;;;;;;;;;;;AAmBnB,MAAa,6BAIX,UACG;CACH,MAAM,EACJ,OACA,WAAW,uBACX,iBAAiB,iBACjB,OAAO,MACP,UACA,GAAG,SACD;;CAGJ,MAAM,iBAAiB,YACrB,MAAM,MAAM,UACX,YAAY,QAAQ,EAAE,EAAE,MAAM,UACjC;CAYA,MAAM,kBANU,YAAY,MAAM,aAChC,gBAAgB,OAAO,yBAAyB,IAC5C,MAAM,sBAAsB,IAC5B,MAAM,kBAAkB,CAGA,CAAC,CAAC,QAC7B,WACC,iBAAiB,QAAQ,mBAAmB,KAAK,OAAO,WAAW,CACvE;;;;;CAMA,MAAM,eACJ,mBAAmB,cACnB,gBAAgB,MAAM,WAAW,OAAO,OAAO,cAAc,IACzD,KAAA,IACA,MAAM,UAAU,cAAc;CAIpC,MAAM,QAAQ,CACZ,GAHuB,MAAM,QAAQ,yBAAyB,QAGvC,CAAC;EAAE,OAAO;EAAgB,OAAO;CAAW,CAAC,IAAI,CAAC,GACzE,GAAG,CAAC,GAAG,iBAAiB,GAAI,eAAe,CAAC,YAAY,IAAI,CAAC,CAAE,CAAC,CAAC,KAC9D,YAAY;EAAE,OAAO,SAAS,MAAM;EAAG,OAAO,OAAO;CAAG,EAC3D,CACF;CAEA,MAAM,qBAAqB,aAA4B;EACrD,IAAI,aAAa,QAAQ,aAAa,YAAY;GAChD,MAAM,aAAa,IAAI;GAEvB;EACF;EAEA,MAAM,SAAS,MAAM,UAAU,QAAQ;EAEvC,IAAI,EAAE,UAAU,iBAAiB,QAAQ,mBAAmB,IAC1D;EAGF,MAAM,YAAY,YAAY,CAC5B;GACE,IAAI;GACJ,MAAM,QAAQ,EAAE,EAAE,QAAQ,OAAO,gBAAgB,MAAM;EACzD,CACF,CAAC;CACH;CAEA,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,OAAO;EACA;EACG;EACV,eAAe;EALjB,UAAA,CAOE,qBAAC,OAAO,SAAR;GACE,kBAAe;GACf,cAAW;GACX,GAAI;GAHN,UAAA,CAKE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,MAAR,CAAc,CAAA,CACA;EAEhB,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,0BAA0B,cAAc"}