@lucasbernardosn/react-table 0.0.0-stage → 0.1.0

package/dist/components/data-table/root/use-data-table-header-offset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-header-offset.js","names":[],"sources":["../../../../src/components/data-table/root/use-data-table-header-offset.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/** O cabeçalho da tabela, pelo `data-component` que o `DataTable.Header` põe. */\nconst HEADER_SELECTOR = '[data-component=\"DataTable.Header\"]';\n\n/**\n * Mede a altura do `DataTable.Header` dentro do contêiner e a escreve em\n * `--data-table-header-offset`, no próprio contêiner. A barra de rolagem vertical lê a variável\n * para começar abaixo do cabeçalho, que é sticky e cobriria o começo dela.\n *\n * Mede pelo `ResizeObserver`, fora do React: a altura muda com a densidade e com os níveis de um\n * cabeçalho agrupado, sem render do contêiner. O cabeçalho é procurado quando o contêiner monta;\n * um que monte depois não é medido, e a barra começa no topo.\n *\n * Devolve o callback ref do contêiner.\n */\nexport const useDataTableHeaderOffset = () => {\n  /** O observer do contêiner atual, desligado quando o elemento sai ou é trocado. */\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  return useCallback((element: HTMLElement | null) => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n\n    const header = element?.querySelector(HEADER_SELECTOR);\n\n    if (!(element && header)) {\n      return;\n    }\n\n    const observer = new ResizeObserver(([entry]) => {\n      const height = entry?.borderBoxSize[0]?.blockSize ?? 0;\n\n      element.style.setProperty('--data-table-header-offset', `${height}px`);\n    });\n\n    observer.observe(header);\n    observerRef.current = observer;\n  }, []);\n};\n"],"mappings":";;;AAGA,MAAM,kBAAkB;;;;;;;;;;;;AAaxB,MAAa,iCAAiC;;CAE5C,MAAM,cAAc,OAA8B,IAAI;CAEtD,OAAO,aAAa,YAAgC;EAClD,YAAY,SAAS,WAAW;EAChC,YAAY,UAAU;EAEtB,MAAM,SAAS,SAAS,cAAc,eAAe;EAErD,IAAI,EAAE,WAAW,SACf;EAGF,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;GAC/C,MAAM,SAAS,OAAO,cAAc,EAAE,EAAE,aAAa;GAErD,QAAQ,MAAM,YAAY,8BAA8B,GAAG,OAAO,GAAG;EACvE,CAAC;EAED,SAAS,QAAQ,MAAM;EACvB,YAAY,UAAU;CACxB,GAAG,CAAC,CAAC;AACP"}

package/dist/components/data-table/selection/data-table-row-checkbox.d.ts

@@ -0,0 +1,33 @@
+import { RowWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/selection/data-table-row-checkbox.d.ts
+export type DataTableRowCheckboxProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Omit<Checkbox.RootProps, 'checked' | 'defaultChecked' | 'indeterminate' | 'onCheckedChange'>, {
+  /** A linha. Exige `rowSelectionFeature`. */
+  row: RowWith<TFeatures, TData, 'rowSelectionFeature'>;
+}>;
+/**
+ * O checkbox de seleção de uma linha, para a célula de uma coluna de seleção. Shift+clique
+ * seleciona o intervalo desde a última linha marcada (`enableRowRangeSelection: false` desliga).
+ * Numa linha que não seleciona (`enableRowSelection`), fica desabilitado; com sub-linhas em parte
+ * selecionadas, mostra o estado misto.
+ *
+ * A seleção guarda só os ids das linhas (`{ [rowId]: true }`) e sobrevive à troca de página: com
+ * a paginação pela API, os ids de outras páginas ficam no estado, e a linha volta marcada quando
+ * a página volta. Para isso, a tabela precisa do `getRowId` com o id do registro: sem ele, o id é
+ * a posição na página, que se repete em todas, e marcar a primeira linha de uma marcaria a
+ * primeira de todas. Os dados das linhas de outras páginas não estão na tabela
+ * (`getSelectedRowModel()` só traz as carregadas): para agir sobre a seleção, mande os ids à API
+ * e limpe com `table.resetRowSelection()` depois.
+ *
+ * Assina só a seleção. As props do `Checkbox.Root` passam adiante, como `colorScheme` e
+ * `aria-label`.
+ */
+export declare const DataTableRowCheckbox: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableRowCheckboxProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-row-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-checkbox.d.ts","names":[],"sources":["../../../../src/components/data-table/selection/data-table-row-checkbox.tsx"],"mappings":";;;;;;YAOY,0BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KACE,SAAS;;EAKT,KAAK,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;qBAqBf;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,0BAA0B,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/selection/data-table-row-checkbox.js

@@ -0,0 +1,50 @@
+import { hasRowFeature } from "../../../utils/has-feature.js";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+//#region src/components/data-table/selection/data-table-row-checkbox.tsx
+/**
+* O checkbox de seleção de uma linha, para a célula de uma coluna de seleção. Shift+clique
+* seleciona o intervalo desde a última linha marcada (`enableRowRangeSelection: false` desliga).
+* Numa linha que não seleciona (`enableRowSelection`), fica desabilitado; com sub-linhas em parte
+* selecionadas, mostra o estado misto.
+*
+* A seleção guarda só os ids das linhas (`{ [rowId]: true }`) e sobrevive à troca de página: com
+* a paginação pela API, os ids de outras páginas ficam no estado, e a linha volta marcada quando
+* a página volta. Para isso, a tabela precisa do `getRowId` com o id do registro: sem ele, o id é
+* a posição na página, que se repete em todas, e marcar a primeira linha de uma marcaria a
+* primeira de todas. Os dados das linhas de outras páginas não estão na tabela
+* (`getSelectedRowModel()` só traz as carregadas): para agir sobre a seleção, mande os ids à API
+* e limpe com `table.resetRowSelection()` depois.
+*
+* Assina só a seleção. As props do `Checkbox.Root` passam adiante, como `colorScheme` e
+* `aria-label`.
+*/
+const DataTableRowCheckbox = (props) => {
+	const { row, children, ...rest } = props;
+	/**
+	* O estado do checkbox num valor só, para uma assinatura por linha. Re-renderiza quando muda a
+	* seleção desta linha ou das sub-linhas; as sub-linhas mudam com os dados, que já trazem uma
+	* linha nova por prop.
+	*/
+	const checkedState = useSelector(row.table.atoms.rowSelection, () => row.getIsSelected() ? "checked" : row.getIsSomeSelected() ? "indeterminate" : "unchecked");
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-component": "DataTable.RowCheckbox",
+		"aria-label": "Selecionar linha",
+		checked: checkedState === "checked",
+		indeterminate: checkedState === "indeterminate",
+		disabled: !row.getCanSelect(),
+		tabIndex: hasRowFeature(row, "activeRowFeature") ? -1 : void 0,
+		onCheckedChange: (checked, eventDetails) => row.getToggleSelectedHandler()({
+			target: { checked },
+			nativeEvent: eventDetails.event
+		}),
+		...rest,
+		children: children === void 0 ? /* @__PURE__ */ jsx(Checkbox.Indicator, {}) : children
+	});
+};
+DataTableRowCheckbox.displayName = "DataTable.RowCheckbox";
+//#endregion
+export { DataTableRowCheckbox };
+
+//# sourceMappingURL=data-table-row-checkbox.js.map

package/dist/components/data-table/selection/data-table-row-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-checkbox.js","names":[],"sources":["../../../../src/components/data-table/selection/data-table-row-checkbox.tsx"],"sourcesContent":["import { Checkbox } from '@lucasbernardosn/react-ui/fields/checkbox';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { RowWith } from '../../../types';\nimport { hasRowFeature } from '../../../utils';\n\nexport type DataTableRowCheckboxProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Omit<\n    Checkbox.RootProps,\n    'checked' | 'defaultChecked' | 'indeterminate' | 'onCheckedChange'\n  >,\n  {\n    /** A linha. Exige `rowSelectionFeature`. */\n    row: RowWith<TFeatures, TData, 'rowSelectionFeature'>;\n  }\n>;\n\n/**\n * O checkbox de seleção de uma linha, para a célula de uma coluna de seleção. Shift+clique\n * seleciona o intervalo desde a última linha marcada (`enableRowRangeSelection: false` desliga).\n * Numa linha que não seleciona (`enableRowSelection`), fica desabilitado; com sub-linhas em parte\n * selecionadas, mostra o estado misto.\n *\n * A seleção guarda só os ids das linhas (`{ [rowId]: true }`) e sobrevive à troca de página: com\n * a paginação pela API, os ids de outras páginas ficam no estado, e a linha volta marcada quando\n * a página volta. Para isso, a tabela precisa do `getRowId` com o id do registro: sem ele, o id é\n * a posição na página, que se repete em todas, e marcar a primeira linha de uma marcaria a\n * primeira de todas. Os dados das linhas de outras páginas não estão na tabela\n * (`getSelectedRowModel()` só traz as carregadas): para agir sobre a seleção, mande os ids à API\n * e limpe com `table.resetRowSelection()` depois.\n *\n * Assina só a seleção. As props do `Checkbox.Root` passam adiante, como `colorScheme` e\n * `aria-label`.\n */\nexport const DataTableRowCheckbox = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableRowCheckboxProps<TFeatures, TData>,\n) => {\n  const { row, children, ...rest } = props;\n\n  /**\n   * O estado do checkbox num valor só, para uma assinatura por linha. Re-renderiza quando muda a\n   * seleção desta linha ou das sub-linhas; as sub-linhas mudam com os dados, que já trazem uma\n   * linha nova por prop.\n   */\n  const checkedState = useSelector(row.table.atoms.rowSelection, () =>\n    row.getIsSelected()\n      ? 'checked'\n      : row.getIsSomeSelected()\n        ? 'indeterminate'\n        : 'unchecked',\n  );\n\n  return (\n    <Checkbox.Root\n      data-component=\"DataTable.RowCheckbox\"\n      aria-label=\"Selecionar linha\"\n      checked={checkedState === 'checked'}\n      indeterminate={checkedState === 'indeterminate'}\n      disabled={!row.getCanSelect()}\n      // Com a navegação, a tabela tem um ponto de Tab só, a linha ativa, e o Espaço nela alterna\n      // a seleção. O clique continua.\n      tabIndex={hasRowFeature(row, 'activeRowFeature') ? -1 : undefined}\n      // O handler lê `target.checked` e o Shift do evento; o Base UI entrega os dois separados.\n      onCheckedChange={(checked, eventDetails) =>\n        row.getToggleSelectedHandler()({\n          target: { checked },\n          nativeEvent: eventDetails.event,\n        })\n      }\n      {...rest}\n    >\n      {children === undefined ? <Checkbox.Indicator /> : children}\n    </Checkbox.Root>\n  );\n};\n\nDataTableRowCheckbox.displayName = 'DataTable.RowCheckbox';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,wBAIX,UACG;CACH,MAAM,EAAE,KAAK,UAAU,GAAG,SAAS;;;;;;CAOnC,MAAM,eAAe,YAAY,IAAI,MAAM,MAAM,oBAC/C,IAAI,cAAc,IACd,YACA,IAAI,kBAAkB,IACpB,kBACA,WACR;CAEA,OACE,oBAAC,SAAS,MAAV;EACE,kBAAe;EACf,cAAW;EACX,SAAS,iBAAiB;EAC1B,eAAe,iBAAiB;EAChC,UAAU,CAAC,IAAI,aAAa;EAG5B,UAAU,cAAc,KAAK,kBAAkB,IAAI,KAAK,KAAA;EAExD,kBAAkB,SAAS,iBACzB,IAAI,yBAAyB,CAAC,CAAC;GAC7B,QAAQ,EAAE,QAAQ;GAClB,aAAa,aAAa;EAC5B,CAAC;EAEH,GAAI;EAEH,UAAA,aAAa,KAAA,IAAY,oBAAC,SAAS,WAAV,CAAqB,CAAA,IAAI;CACtC,CAAA;AAEnB;AAEA,qBAAqB,cAAc"}

package/dist/components/data-table/selection/data-table-select-all-checkbox.d.ts

@@ -0,0 +1,31 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/selection/data-table-select-all-checkbox.d.ts
+export type DataTableSelectAllCheckboxProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Omit<Checkbox.RootProps, 'checked' | 'defaultChecked' | 'indeterminate' | 'onCheckedChange'>, {
+  /** A tabela. Exige `rowSelectionFeature`. */
+  table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;
+  /**
+   * O que o checkbox marca e mede: as linhas da página ou todas as linhas da tabela. Com
+   * paginação, a página: o checkbox fica no cabeçalho da página à vista, e marcar linhas
+   * escondidas em outras surpreende. Com a paginação pela API (`manualPagination`), a tabela só
+   * tem a página carregada, e `'all'` contaria os ids selecionados em outras páginas.
+   * @default 'page' com `rowPaginationFeature`, 'all' sem
+   */
+  scope?: 'page' | 'all';
+}>;
+/**
+ * O checkbox que marca ou desmarca todas as linhas, para o header de uma coluna de seleção. Com
+ * parte das linhas marcadas, mostra o estado misto; o clique então marca todas. Com
+ * `loadingFeature`, fica desabilitado enquanto a tabela carrega.
+ *
+ * As props do `Checkbox.Root` passam adiante, como `colorScheme` e `aria-label`.
+ */
+export declare const DataTableSelectAllCheckbox: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableSelectAllCheckboxProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-select-all-checkbox.d.ts.map

package/dist/components/data-table/selection/data-table-select-all-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-select-all-checkbox.d.ts","names":[],"sources":["../../../../src/components/data-table/selection/data-table-select-all-checkbox.tsx"],"mappings":";;;;;;YAOY,gCACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KACE,SAAS;;EAKT,OAAO,UAAU,WAAW;;;;;;;;EAQ5B;;;;;;;;;qBAWS;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,gCAAgC,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/selection/data-table-select-all-checkbox.js

@@ -0,0 +1,44 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+//#region src/components/data-table/selection/data-table-select-all-checkbox.tsx
+/**
+* O checkbox que marca ou desmarca todas as linhas, para o header de uma coluna de seleção. Com
+* parte das linhas marcadas, mostra o estado misto; o clique então marca todas. Com
+* `loadingFeature`, fica desabilitado enquanto a tabela carrega.
+*
+* As props do `Checkbox.Root` passam adiante, como `colorScheme` e `aria-label`.
+*/
+const DataTableSelectAllCheckbox = (props) => {
+	const { table, scope, children, ...rest } = props;
+	const isPageScope = scope === void 0 ? hasTableFeature(table, "rowPaginationFeature") : scope === "page";
+	/**
+	* O estado do checkbox num valor só. Re-renderiza quando ele muda. O store, e não só o atom da
+	* seleção: o resultado também muda com as linhas, como na troca de página ou de dados.
+	*/
+	const checkedState = useSelector(table.store, () => {
+		if (isPageScope) return table.getIsAllPageRowsSelected() ? "checked" : table.getIsSomePageRowsSelected() ? "indeterminate" : "unchecked";
+		return table.getIsAllRowsSelected() ? "checked" : table.getIsSomeRowsSelected() ? "indeterminate" : "unchecked";
+	});
+	/**
+	* Re-renderiza quando o carregamento liga ou desliga. A feature é opcional: assina o store. Na
+	* hora, e não depois dos 200ms do visual, para não sobrar uma janela em que o clique passa.
+	*/
+	const isLoading = useSelector(table.store, () => hasTableFeature(table, "loadingFeature") && table.atoms.isLoading.get());
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-component": "DataTable.SelectAllCheckbox",
+		"aria-label": isPageScope ? "Selecionar todas as linhas da página" : "Selecionar todas as linhas",
+		checked: checkedState === "checked",
+		indeterminate: checkedState === "indeterminate",
+		disabled: isLoading,
+		onCheckedChange: (checked) => isPageScope ? table.toggleAllPageRowsSelected(checked) : table.toggleAllRowsSelected(checked),
+		...rest,
+		children: children === void 0 ? /* @__PURE__ */ jsx(Checkbox.Indicator, {}) : children
+	});
+};
+DataTableSelectAllCheckbox.displayName = "DataTable.SelectAllCheckbox";
+//#endregion
+export { DataTableSelectAllCheckbox };
+
+//# sourceMappingURL=data-table-select-all-checkbox.js.map

package/dist/components/data-table/selection/data-table-select-all-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-select-all-checkbox.js","names":[],"sources":["../../../../src/components/data-table/selection/data-table-select-all-checkbox.tsx"],"sourcesContent":["import { Checkbox } from '@lucasbernardosn/react-ui/fields/checkbox';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\nimport { hasTableFeature } from '../../../utils';\n\nexport type DataTableSelectAllCheckboxProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Omit<\n    Checkbox.RootProps,\n    'checked' | 'defaultChecked' | 'indeterminate' | 'onCheckedChange'\n  >,\n  {\n    /** A tabela. Exige `rowSelectionFeature`. */\n    table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;\n    /**\n     * O que o checkbox marca e mede: as linhas da página ou todas as linhas da tabela. Com\n     * paginação, a página: o checkbox fica no cabeçalho da página à vista, e marcar linhas\n     * escondidas em outras surpreende. Com a paginação pela API (`manualPagination`), a tabela só\n     * tem a página carregada, e `'all'` contaria os ids selecionados em outras páginas.\n     * @default 'page' com `rowPaginationFeature`, 'all' sem\n     */\n    scope?: 'page' | 'all';\n  }\n>;\n\n/**\n * O checkbox que marca ou desmarca todas as linhas, para o header de uma coluna de seleção. Com\n * parte das linhas marcadas, mostra o estado misto; o clique então marca todas. Com\n * `loadingFeature`, fica desabilitado enquanto a tabela carrega.\n *\n * As props do `Checkbox.Root` passam adiante, como `colorScheme` e `aria-label`.\n */\nexport const DataTableSelectAllCheckbox = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSelectAllCheckboxProps<TFeatures, TData>,\n) => {\n  const { table, scope, children, ...rest } = props;\n\n  const isPageScope =\n    scope === undefined\n      ? hasTableFeature(table, 'rowPaginationFeature')\n      : scope === 'page';\n\n  /**\n   * O estado do checkbox num valor só. Re-renderiza quando ele muda. O store, e não só o atom da\n   * seleção: o resultado também muda com as linhas, como na troca de página ou de dados.\n   */\n  const checkedState = useSelector(table.store, () => {\n    if (isPageScope) {\n      return table.getIsAllPageRowsSelected()\n        ? 'checked'\n        : table.getIsSomePageRowsSelected()\n          ? 'indeterminate'\n          : 'unchecked';\n    }\n\n    return table.getIsAllRowsSelected()\n      ? 'checked'\n      : table.getIsSomeRowsSelected()\n        ? 'indeterminate'\n        : 'unchecked';\n  });\n\n  /**\n   * Re-renderiza quando o carregamento liga ou desliga. A feature é opcional: assina o store. Na\n   * hora, e não depois dos 200ms do visual, para não sobrar uma janela em que o clique passa.\n   */\n  const isLoading = useSelector(\n    table.store,\n    () =>\n      hasTableFeature(table, 'loadingFeature') && table.atoms.isLoading.get(),\n  );\n\n  return (\n    <Checkbox.Root\n      data-component=\"DataTable.SelectAllCheckbox\"\n      aria-label={\n        isPageScope\n          ? 'Selecionar todas as linhas da página'\n          : 'Selecionar todas as linhas'\n      }\n      checked={checkedState === 'checked'}\n      indeterminate={checkedState === 'indeterminate'}\n      // Durante a carga, as linhas ainda são as antigas: marcar todas marcaria os ids delas.\n      disabled={isLoading}\n      onCheckedChange={(checked) =>\n        isPageScope\n          ? table.toggleAllPageRowsSelected(checked)\n          : table.toggleAllRowsSelected(checked)\n      }\n      {...rest}\n    >\n      {children === undefined ? <Checkbox.Indicator /> : children}\n    </Checkbox.Root>\n  );\n};\n\nDataTableSelectAllCheckbox.displayName = 'DataTable.SelectAllCheckbox';\n"],"mappings":";;;;;;;;;;;;AAoCA,MAAa,8BAIX,UACG;CACH,MAAM,EAAE,OAAO,OAAO,UAAU,GAAG,SAAS;CAE5C,MAAM,cACJ,UAAU,KAAA,IACN,gBAAgB,OAAO,sBAAsB,IAC7C,UAAU;;;;;CAMhB,MAAM,eAAe,YAAY,MAAM,aAAa;EAClD,IAAI,aACF,OAAO,MAAM,yBAAyB,IAClC,YACA,MAAM,0BAA0B,IAC9B,kBACA;EAGR,OAAO,MAAM,qBAAqB,IAC9B,YACA,MAAM,sBAAsB,IAC1B,kBACA;CACR,CAAC;;;;;CAMD,MAAM,YAAY,YAChB,MAAM,aAEJ,gBAAgB,OAAO,gBAAgB,KAAK,MAAM,MAAM,UAAU,IAAI,CAC1E;CAEA,OACE,oBAAC,SAAS,MAAV;EACE,kBAAe;EACf,cACE,cACI,yCACA;EAEN,SAAS,iBAAiB;EAC1B,eAAe,iBAAiB;EAEhC,UAAU;EACV,kBAAkB,YAChB,cACI,MAAM,0BAA0B,OAAO,IACvC,MAAM,sBAAsB,OAAO;EAEzC,GAAI;EAEH,UAAA,aAAa,KAAA,IAAY,oBAAC,SAAS,WAAV,CAAqB,CAAA,IAAI;CACtC,CAAA;AAEnB;AAEA,2BAA2B,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', comfortable: 'Confortável' }
+   */
+  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"}