@lucasbernardosn/react-table 0.1.0 → 0.2.0

package/dist/components/columns-panel/columns-panel-item.js

@@ -1,9 +1,10 @@
 import { getDefaultColumnLabel } from "../../utils/get-default-column-label.js";
 import { hasColumnFeature } from "../../utils/has-feature.js";
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
+import { ColumnMenuPinItems } from "../column-menu/column-menu-pin-items.js";
 import { ListIcon, PushPinIcon } from "@phosphor-icons/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
 import { useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { useSortable } from "@dnd-kit/react/sortable";
@@ -15,8 +16,11 @@ import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
 * arrastar. Só a alça pega o arrasto; o resto fica livre para o clique no checkbox. Uma coluna com
 * `enableHiding: false` fica com o checkbox desabilitado.
 *
-* Com `columnPinningFeature`, a coluna fixada troca a alça por um alfinete e não se arrasta: o
-* `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas.
+* Com `columnPinningFeature`, um alfinete antes da alça abre o menu da fixação, com os itens do
+* `ColumnMenu.PinItems`: fixa e solta a coluna sem o header, como nos cards ou numa coluna sem o
+* menu da coluna. Preenchido, a coluna está fixada. A fixada não tem alça e não se arrasta: o
+* `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas. Numa coluna com
+* `enablePinning: false`, o alfinete não aparece.
 */
 const ColumnsPanelItem = (props) => {
 	const { column, index, label, render, className, ref, ...rest } = props;
@@ -52,31 +56,44 @@ const ColumnsPanelItem = (props) => {
 			"data-dragging:bg-gray-3",
 			"data-dragging:shadow-md"
 		], className),
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", {
-			className: "flex min-w-0 flex-1 items-center gap-2 select-none",
-			children: [/* @__PURE__ */ jsx(Checkbox.Root, {
-				checked: isVisible,
-				disabled: !column.getCanHide(),
-				onCheckedChange: (checked) => column.toggleVisibility(checked),
-				children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
-			}), /* @__PURE__ */ jsx("span", {
-				className: isVisible ? "truncate" : "truncate text-gray-11",
-				children: columnLabel
-			})]
-		}), pinned === false ? /* @__PURE__ */ jsx(IconButton, {
-			ref: sortable.handleRef,
-			variant: "ghost",
-			size: "2xs",
-			icon: /* @__PURE__ */ jsx(ListIcon, {}),
-			"aria-label": `Mover a coluna ${columnLabel}`,
-			className: "cursor-grab touch-none text-gray-11 active:cursor-grabbing"
-		}) : /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex size-6 shrink-0 items-center justify-center text-gray-11",
-			children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(PushPinIcon, {}) }), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Fixada"
-			})]
-		})] })
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex min-w-0 flex-1 items-center gap-2 select-none",
+				children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+					checked: isVisible,
+					disabled: !column.getCanHide(),
+					onCheckedChange: (checked) => column.toggleVisibility(checked),
+					children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
+				}), /* @__PURE__ */ jsx("span", {
+					className: isVisible ? "truncate" : "truncate text-gray-11",
+					children: columnLabel
+				})]
+			}),
+			hasColumnFeature(column, "columnPinningFeature") && column.getCanPin() && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, { render: /* @__PURE__ */ jsx(IconButton, {
+				variant: "ghost",
+				size: "2xs",
+				icon: /* @__PURE__ */ jsx(PushPinIcon, { weight: pinned ? "fill" : "regular" }),
+				"aria-label": `Fixação da coluna ${columnLabel}`,
+				className: pinned ? "text-gray-12" : "text-gray-11"
+			}) }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+				align: "end",
+				children: /* @__PURE__ */ jsx(Menu.Popup, {
+					className: "min-w-48",
+					children: /* @__PURE__ */ jsx(ColumnMenuPinItems, { column })
+				})
+			}) })] }),
+			pinned === false ? /* @__PURE__ */ jsx(IconButton, {
+				ref: sortable.handleRef,
+				variant: "ghost",
+				size: "2xs",
+				icon: /* @__PURE__ */ jsx(ListIcon, {}),
+				"aria-label": `Mover a coluna ${columnLabel}`,
+				className: "cursor-grab touch-none text-gray-11 active:cursor-grabbing"
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "inline-flex size-6 shrink-0"
+			})
+		] })
 	};
 	return useRender({
 		render,

package/dist/components/columns-panel/columns-panel-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns-panel-item.js","names":[],"sources":["../../../src/components/columns-panel/columns-panel-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { useSortable } from '@dnd-kit/react/sortable';\nimport { IconButton } from '@lucasbernardosn/react-ui/buttons/icon-button';\nimport { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Checkbox } from '@lucasbernardosn/react-ui/fields/checkbox';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { ListIcon, PushPinIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnWith } from '../../types';\nimport { getDefaultColumnLabel, hasColumnFeature } from '../../utils';\n\nexport type ColumnsPanelItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'li'>,\n  {\n    /** A coluna. Exige `columnVisibilityFeature`. */\n    column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;\n    /** A posição da coluna no grupo dela (fixadas no início, centro ou fixadas no fim). */\n    index: number;\n    /**\n     * O nome da coluna.\n     * @default getDefaultColumnLabel(column): o `header` quando é texto, e o id quando não é\n     */\n    label?: string;\n  }\n>;\n\n/**\n * Uma coluna no `ColumnsPanel.Root`: o checkbox de visibilidade, o nome e, à direita, a alça de\n * arrastar. Só a alça pega o arrasto; o resto fica livre para o clique no checkbox. Uma coluna com\n * `enableHiding: false` fica com o checkbox desabilitado.\n *\n * Com `columnPinningFeature`, a coluna fixada troca a alça por um alfinete e não se arrasta: o\n * `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas.\n */\nexport const ColumnsPanelItem = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnsPanelItemProps<TFeatures, TData>,\n) => {\n  const { column, index, label, render, className, ref, ...rest } = props;\n\n  /** Re-renderiza quando esta coluna aparece ou some. */\n  const isVisible = useSelector(column.table.atoms.columnVisibility, () =>\n    column.getIsVisible(),\n  );\n\n  /**\n   * Re-renderiza quando esta coluna é fixada ou solta. O pinning é opcional, então assina o\n   * store.\n   */\n  const pinned = useSelector(column.table.store, () =>\n    hasColumnFeature(column, 'columnPinningFeature')\n      ? column.getIsPinned()\n      : false,\n  );\n\n  const columnLabel = label ?? getDefaultColumnLabel(column);\n\n  /** O grupo separa as regiões: o arrasto não leva uma coluna do centro para as fixadas. */\n  const sortable = useSortable({\n    id: column.id,\n    index,\n    group: pinned || 'center',\n    disabled: pinned !== false,\n  });\n\n  const baseProps = {\n    'data-component': 'ColumnsPanel.Item',\n    'data-dragging': sortable.isDragging ? '' : undefined,\n    'data-pinned': pinned || undefined,\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'h-8',\n        'items-center',\n        'gap-2',\n\n        'rounded-md',\n        'corner-squircle',\n        'ps-2',\n        'pe-1',\n\n        'text-sm',\n\n        // Em arrasto, destacada sobre as outras.\n        'data-dragging:bg-gray-3',\n        'data-dragging:shadow-md',\n      ],\n      className,\n    ),\n    children: (\n      <>\n        <label className=\"flex min-w-0 flex-1 items-center gap-2 select-none\">\n          <Checkbox.Root\n            checked={isVisible}\n            disabled={!column.getCanHide()}\n            onCheckedChange={(checked) => column.toggleVisibility(checked)}\n          >\n            <Checkbox.Indicator />\n          </Checkbox.Root>\n\n          <span className={isVisible ? 'truncate' : 'truncate text-gray-11'}>\n            {columnLabel}\n          </span>\n        </label>\n\n        {pinned === false ? (\n          <IconButton\n            ref={sortable.handleRef}\n            variant=\"ghost\"\n            size=\"2xs\"\n            icon={<ListIcon />}\n            aria-label={`Mover a coluna ${columnLabel}`}\n            // `touch-none`: no toque, o gesto arrasta em vez de rolar.\n            className=\"cursor-grab touch-none text-gray-11 active:cursor-grabbing\"\n          />\n        ) : (\n          // Do tamanho da alça, no mesmo lugar dela nos três grupos.\n          <span className=\"inline-flex size-6 shrink-0 items-center justify-center text-gray-11\">\n            <Icon render={<PushPinIcon />} />\n            <span className=\"sr-only\">Fixada</span>\n          </span>\n        )}\n      </>\n    ),\n  };\n\n  return useRender({\n    render,\n    ref: [sortable.ref, ref ?? null],\n    defaultTagName: 'li',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nColumnsPanelItem.displayName = 'ColumnsPanel.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuCA,MAAa,oBAIX,UACG;CACH,MAAM,EAAE,QAAQ,OAAO,OAAO,QAAQ,WAAW,KAAK,GAAG,SAAS;;CAGlE,MAAM,YAAY,YAAY,OAAO,MAAM,MAAM,wBAC/C,OAAO,aAAa,CACtB;;;;;CAMA,MAAM,SAAS,YAAY,OAAO,MAAM,aACtC,iBAAiB,QAAQ,sBAAsB,IAC3C,OAAO,YAAY,IACnB,KACN;CAEA,MAAM,cAAc,SAAS,sBAAsB,MAAM;;CAGzD,MAAM,WAAW,YAAY;EAC3B,IAAI,OAAO;EACX;EACA,OAAO,UAAU;EACjB,UAAU,WAAW;CACvB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,SAAS,aAAa,KAAK,KAAA;EAC5C,eAAe,UAAU,KAAA;EACzB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAGA;GACA;EACF,GACA,SACF;EACA,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,SAAD;GAAO,WAAU;GAAjB,UAAA,CACE,oBAAC,SAAS,MAAV;IACE,SAAS;IACT,UAAU,CAAC,OAAO,WAAW;IAC7B,kBAAkB,YAAY,OAAO,iBAAiB,OAAO;IAE7D,UAAA,oBAAC,SAAS,WAAV,CAAqB,CAAA;GACR,CAAA,GAEf,oBAAC,QAAD;IAAM,WAAW,YAAY,aAAa;IACvC,UAAA;GACG,CAAA,CACD;EAEN,CAAA,GAAA,WAAW,QACV,oBAAC,YAAD;GACE,KAAK,SAAS;GACd,SAAQ;GACR,MAAK;GACL,MAAM,oBAAC,UAAD,CAAW,CAAA;GACjB,cAAY,kBAAkB;GAE9B,WAAU;EACX,CAAA,IAGD,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA,GAChC,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAY,CAAA,CAClC;EAER,CAAA,CAAA,EAAA,CAAA;CAEN;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,SAAS,KAAK,OAAO,IAAI;EAC/B,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"columns-panel-item.js","names":[],"sources":["../../../src/components/columns-panel/columns-panel-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { useSortable } from '@dnd-kit/react/sortable';\nimport { IconButton } from '@lucasbernardosn/react-ui/buttons/icon-button';\nimport { Checkbox } from '@lucasbernardosn/react-ui/fields/checkbox';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { ListIcon, PushPinIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnWith } from '../../types';\nimport { getDefaultColumnLabel, hasColumnFeature } from '../../utils';\nimport { ColumnMenuPinItems } from '../column-menu/column-menu-pin-items';\n\nexport type ColumnsPanelItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'li'>,\n  {\n    /** A coluna. Exige `columnVisibilityFeature`. */\n    column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;\n    /** A posição da coluna no grupo dela (fixadas no início, centro ou fixadas no fim). */\n    index: number;\n    /**\n     * O nome da coluna.\n     * @default getDefaultColumnLabel(column): o `header` quando é texto, e o id quando não é\n     */\n    label?: string;\n  }\n>;\n\n/**\n * Uma coluna no `ColumnsPanel.Root`: o checkbox de visibilidade, o nome e, à direita, a alça de\n * arrastar. Só a alça pega o arrasto; o resto fica livre para o clique no checkbox. Uma coluna com\n * `enableHiding: false` fica com o checkbox desabilitado.\n *\n * Com `columnPinningFeature`, um alfinete antes da alça abre o menu da fixação, com os itens do\n * `ColumnMenu.PinItems`: fixa e solta a coluna sem o header, como nos cards ou numa coluna sem o\n * menu da coluna. Preenchido, a coluna está fixada. A fixada não tem alça e não se arrasta: o\n * `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas. Numa coluna com\n * `enablePinning: false`, o alfinete não aparece.\n */\nexport const ColumnsPanelItem = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnsPanelItemProps<TFeatures, TData>,\n) => {\n  const { column, index, label, render, className, ref, ...rest } = props;\n\n  /** Re-renderiza quando esta coluna aparece ou some. */\n  const isVisible = useSelector(column.table.atoms.columnVisibility, () =>\n    column.getIsVisible(),\n  );\n\n  /**\n   * Re-renderiza quando esta coluna é fixada ou solta. O pinning é opcional, então assina o\n   * store.\n   */\n  const pinned = useSelector(column.table.store, () =>\n    hasColumnFeature(column, 'columnPinningFeature')\n      ? column.getIsPinned()\n      : false,\n  );\n\n  const columnLabel = label ?? getDefaultColumnLabel(column);\n\n  /** O grupo separa as regiões: o arrasto não leva uma coluna do centro para as fixadas. */\n  const sortable = useSortable({\n    id: column.id,\n    index,\n    group: pinned || 'center',\n    disabled: pinned !== false,\n  });\n\n  const baseProps = {\n    'data-component': 'ColumnsPanel.Item',\n    'data-dragging': sortable.isDragging ? '' : undefined,\n    'data-pinned': pinned || undefined,\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'h-8',\n        'items-center',\n        'gap-2',\n\n        'rounded-md',\n        'corner-squircle',\n        'ps-2',\n        'pe-1',\n\n        'text-sm',\n\n        // Em arrasto, destacada sobre as outras.\n        'data-dragging:bg-gray-3',\n        'data-dragging:shadow-md',\n      ],\n      className,\n    ),\n    children: (\n      <>\n        <label className=\"flex min-w-0 flex-1 items-center gap-2 select-none\">\n          <Checkbox.Root\n            checked={isVisible}\n            disabled={!column.getCanHide()}\n            onCheckedChange={(checked) => column.toggleVisibility(checked)}\n          >\n            <Checkbox.Indicator />\n          </Checkbox.Root>\n\n          <span className={isVisible ? 'truncate' : 'truncate text-gray-11'}>\n            {columnLabel}\n          </span>\n        </label>\n\n        {hasColumnFeature(column, 'columnPinningFeature') &&\n          column.getCanPin() && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={\n                  <IconButton\n                    variant=\"ghost\"\n                    size=\"2xs\"\n                    icon={<PushPinIcon weight={pinned ? 'fill' : 'regular'} />}\n                    aria-label={`Fixação da coluna ${columnLabel}`}\n                    className={pinned ? 'text-gray-12' : 'text-gray-11'}\n                  />\n                }\n              />\n\n              <Menu.Portal>\n                <Menu.Positioner align=\"end\">\n                  <Menu.Popup className=\"min-w-48\">\n                    <ColumnMenuPinItems column={column} />\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n\n        {pinned === false ? (\n          <IconButton\n            ref={sortable.handleRef}\n            variant=\"ghost\"\n            size=\"2xs\"\n            icon={<ListIcon />}\n            aria-label={`Mover a coluna ${columnLabel}`}\n            // `touch-none`: no toque, o gesto arrasta em vez de rolar.\n            className=\"cursor-grab touch-none text-gray-11 active:cursor-grabbing\"\n          />\n        ) : (\n          // A fixada não se arrasta: o espaço da alça fica vazio, para o alfinete ficar alinhado\n          // com o das outras.\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex size-6 shrink-0\"\n          />\n        )}\n      </>\n    ),\n  };\n\n  return useRender({\n    render,\n    ref: [sortable.ref, ref ?? null],\n    defaultTagName: 'li',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nColumnsPanelItem.displayName = 'ColumnsPanel.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,oBAIX,UACG;CACH,MAAM,EAAE,QAAQ,OAAO,OAAO,QAAQ,WAAW,KAAK,GAAG,SAAS;;CAGlE,MAAM,YAAY,YAAY,OAAO,MAAM,MAAM,wBAC/C,OAAO,aAAa,CACtB;;;;;CAMA,MAAM,SAAS,YAAY,OAAO,MAAM,aACtC,iBAAiB,QAAQ,sBAAsB,IAC3C,OAAO,YAAY,IACnB,KACN;CAEA,MAAM,cAAc,SAAS,sBAAsB,MAAM;;CAGzD,MAAM,WAAW,YAAY;EAC3B,IAAI,OAAO;EACX;EACA,OAAO,UAAU;EACjB,UAAU,WAAW;CACvB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,SAAS,aAAa,KAAK,KAAA;EAC5C,eAAe,UAAU,KAAA;EACzB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAGA;GACA;EACF,GACA,SACF;EACA,UACE,qBAAA,UAAA,EAAA,UAAA;GACE,qBAAC,SAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,SAAS,MAAV;KACE,SAAS;KACT,UAAU,CAAC,OAAO,WAAW;KAC7B,kBAAkB,YAAY,OAAO,iBAAiB,OAAO;KAE7D,UAAA,oBAAC,SAAS,WAAV,CAAqB,CAAA;IACR,CAAA,GAEf,oBAAC,QAAD;KAAM,WAAW,YAAY,aAAa;KACvC,UAAA;IACG,CAAA,CACD;;GAEN,iBAAiB,QAAQ,sBAAsB,KAC9C,OAAO,UAAU,KACf,qBAAC,KAAK,MAAN,EAAA,UAAA,CACE,oBAAC,KAAK,SAAN,EACE,QACE,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,MAAM,oBAAC,aAAD,EAAa,QAAQ,SAAS,SAAS,UAAY,CAAA;IACzD,cAAY,qBAAqB;IACjC,WAAW,SAAS,iBAAiB;GACtC,CAAA,EAEJ,CAAA,GAED,oBAAC,KAAK,QAAN,EAAA,UACE,oBAAC,KAAK,YAAN;IAAiB,OAAM;IACrB,UAAA,oBAAC,KAAK,OAAN;KAAY,WAAU;KACpB,UAAA,oBAAC,oBAAD,EAA4B,OAAS,CAAA;IAC3B,CAAA;GACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA;GAGd,WAAW,QACV,oBAAC,YAAD;IACE,KAAK,SAAS;IACd,SAAQ;IACR,MAAK;IACL,MAAM,oBAAC,UAAD,CAAW,CAAA;IACjB,cAAY,kBAAkB;IAE9B,WAAU;GACX,CAAA,IAID,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;GACX,CAAA;EAEH,EAAA,CAAA;CAEN;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,SAAS,KAAK,OAAO,IAAI;EAC/B,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,iBAAiB,cAAc"}

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

@@ -2,7 +2,7 @@ import { hasTableFeature } from "../../../utils/has-feature.js";
 import { getDataTableLoadingWithoutRows } from "../loading/get-data-table-loading-without-rows.js";
 import { useDataTableLoadingInert } from "../loading/use-data-table-loading-inert.js";
 import { useDataTablePageScrollReset } from "../pagination/use-data-table-page-scroll-reset.js";
-import { DATA_TABLE_GRID_CLASS_NAMES } from "../root/data-table-grid-classes.js";
+import { dataTableGridClassNames } from "../root/data-table-grid-class-names.js";
 import { DataTableRow } from "./data-table-row.js";
 import { useDataTableRowFocusRecovery } from "./use-data-table-row-focus-recovery.js";
 import { jsx } from "react/jsx-runtime";
@@ -71,7 +71,7 @@ const DataTableBody = (props) => {
 	const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
 		"data-component": "DataTable.GhostRow",
-		className: mergeTwClassNames([DATA_TABLE_GRID_CLASS_NAMES, "last:border-b-0"]),
+		className: mergeTwClassNames([dataTableGridClassNames, "last:border-b-0"]),
 		children: Array.from({ length: ghostColumnCount }, (_, columnIndex) => /* @__PURE__ */ jsx("div", {
 			className: "h-(--data-table-row-height) content-center px-(--data-table-cell-padding)",
 			children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" })

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Skeleton } from '@lucasbernardosn/react-ui/feedback/skeleton';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Row, RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { getDataTableLoadingWithoutRows } from '../loading/get-data-table-loading-without-rows';\nimport { useDataTableLoadingInert } from '../loading/use-data-table-loading-inert';\nimport { useDataTablePageScrollReset } from '../pagination/use-data-table-page-scroll-reset';\nimport { DATA_TABLE_GRID_CLASS_NAMES } from '../root/data-table-grid-classes';\nimport { DataTableRow } from './data-table-row';\nimport { useDataTableRowFocusRecovery } from './use-data-table-row-focus-recovery';\n\nexport type DataTableBodyProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A tabela do `useTable`. */\n    table: Table<TFeatures, TData>;\n    /**\n     * Uma função que recebe cada linha do row model e devolve o elemento dela. Com nós comuns,\n     * quem usa faz o laço.\n     * @default (row) => <DataTable.Row row={row} />\n     */\n    children?:\n      | React.ReactNode\n      | ((row: Row<TFeatures, TData>) => React.ReactNode);\n    /**\n     * Quantas linhas-fantasma o corpo desenha na carga sem linhas, com `loadingFeature`.\n     * @default 10\n     */\n    loadingRowCount?: number;\n  }\n>;\n\n/**\n * O corpo da tabela (`role=\"rowgroup\"`).\n *\n * Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e\n * re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar\n * re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as\n * linhas mudam.\n *\n * Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,\n * no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para\n * desligar, passe `className=\"*:[content-visibility:visible]\"`.\n *\n * Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco\n * volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.\n *\n * Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.\n *\n * Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha\n * linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um\n * skeleton (ver `DataTable.Root`).\n *\n * @example\n * ```tsx\n * <DataTable.Body table={table}>\n *   {(row) => (\n *     <DataTable.Row row={row}>\n *       {(cell) => <DataTable.Cell cell={cell} />}\n *     </DataTable.Row>\n *   )}\n * </DataTable.Body>\n * ```\n */\nexport const DataTableBody = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableBodyProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    loadingRowCount = 10,\n    render,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  /**\n   * Memoizado pelo TanStack: o array só muda com as linhas. Tamanho, colunas e seleção mudam o\n   * store, mas não o row model, e não re-renderizam o corpo.\n   */\n  const rows = useSelector(table.store, () => table.getRowModel().rows);\n\n  const focusRecovery = useDataTableRowFocusRecovery(table, rows);\n\n  useDataTablePageScrollReset(table, focusRecovery.ref);\n\n  useDataTableLoadingInert(table, focusRecovery.ref);\n\n  /**\n   * Quantas colunas cada linha-fantasma tem, ou 0 sem elas: só na carga sem linhas. Re-renderiza\n   * quando as linhas-fantasma entram ou saem, ou quando as colunas visíveis mudam durante a carga.\n   */\n  const ghostColumnCount = useSelector(table.store, () => {\n    if (!getDataTableLoadingWithoutRows(table)) {\n      return 0;\n    }\n\n    return hasTableFeature(table, 'columnVisibilityFeature')\n      ? table.getVisibleLeafColumns().length\n      : table.getAllLeafColumns().length;\n  });\n\n  /** Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? rows.map((row) => (\n          <Fragment key={row.id}>\n            {children === undefined ? (\n              <DataTableRow row={row} />\n            ) : (\n              children(row)\n            )}\n          </Fragment>\n        ))\n      : children;\n\n  /**\n   * Fora da árvore de acessibilidade, que já sabe da espera pelo `aria-busy` do `DataTable.Root`.\n   * A grade é a da `DataTable.Row`, e o espaçamento repete o da `DataTable.Cell`.\n   */\n  const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => (\n    <div\n      key={rowIndex}\n      aria-hidden={true}\n      data-component=\"DataTable.GhostRow\"\n      className={mergeTwClassNames([\n        DATA_TABLE_GRID_CLASS_NAMES,\n        'last:border-b-0',\n      ])}\n    >\n      {Array.from({ length: ghostColumnCount }, (_, columnIndex) => (\n        <div\n          key={columnIndex}\n          className=\"h-(--data-table-row-height) content-center px-(--data-table-cell-padding)\"\n        >\n          <Skeleton className=\"h-3 w-3/4\" />\n        </div>\n      ))}\n    </div>\n  ));\n\n  const baseProps = {\n    'data-component': 'DataTable.Body',\n    role: 'rowgroup',\n    onFocus: focusRecovery.onFocus,\n    onBlur: focusRecovery.onBlur,\n    className: mergeTwClassNames(\n      [\n        // As linhas fora da tela pulam estilo, layout e pintura. Sem isto, cada tick do arrasto\n        // de uma coluna, que reescreve a variável herdada do template no `Root`, recalcula todas\n        // as linhas, e com centenas delas o arrasto trava.\n        '*:[content-visibility:auto]',\n        // A altura de uma linha que ainda não apareceu: a da densidade mais a borda de baixo da\n        // `DataTable.Row`. Com `auto`, a linha que já apareceu guarda a altura medida. Uma\n        // estimativa errada faz a barra de rolagem pular quando as linhas entram na tela.\n        '*:[contain-intrinsic-height:auto_calc(var(--data-table-row-height)+1px)]',\n      ],\n      className,\n    ),\n    children: ghostColumnCount > 0 ? ghostRows : content,\n  };\n\n  return useRender({\n    render,\n    ref: [focusRecovery.ref, ref ?? null],\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableBody.displayName = 'DataTable.Body';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,MAAa,iBAIX,UACG;CACH,MAAM,EACJ,OACA,kBAAkB,IAClB,QACA,WACA,UACA,KACA,GAAG,SACD;;;;;CAMJ,MAAM,OAAO,YAAY,MAAM,aAAa,MAAM,YAAY,CAAC,CAAC,IAAI;CAEpE,MAAM,gBAAgB,6BAA6B,OAAO,IAAI;CAE9D,4BAA4B,OAAO,cAAc,GAAG;CAEpD,yBAAyB,OAAO,cAAc,GAAG;;;;;CAMjD,MAAM,mBAAmB,YAAY,MAAM,aAAa;EACtD,IAAI,CAAC,+BAA+B,KAAK,GACvC,OAAO;EAGT,OAAO,gBAAgB,OAAO,yBAAyB,IACnD,MAAM,sBAAsB,CAAC,CAAC,SAC9B,MAAM,kBAAkB,CAAC,CAAC;CAChC,CAAC;;CAGD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,KAAK,KAAK,QACR,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,cAAD,EAAmB,IAAM,CAAA,IAEzB,SAAS,GAAG,EAEN,GANK,IAAI,EAMT,CACX,IACD;;;;;CAMN,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,aAC5D,oBAAC,OAAD;EAEE,eAAa;EACb,kBAAe;EACf,WAAW,kBAAkB,CAC3B,6BACA,iBACF,CAAC;EAEA,UAAA,MAAM,KAAK,EAAE,QAAQ,iBAAiB,IAAI,GAAG,gBAC5C,oBAAC,OAAD;GAEE,WAAU;GAEV,UAAA,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;EAC9B,GAJE,WAIF,CACN;CACE,GAhBE,QAgBF,CACN;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,SAAS,cAAc;EACvB,QAAQ,cAAc;EACtB,WAAW,kBACT,CAIE,+BAIA,0EACF,GACA,SACF;EACA,UAAU,mBAAmB,IAAI,YAAY;CAC/C;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,cAAc,KAAK,OAAO,IAAI;EACpC,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}
+{"version":3,"file":"data-table-body.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Skeleton } from '@lucasbernardosn/react-ui/feedback/skeleton';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Row, RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { getDataTableLoadingWithoutRows } from '../loading/get-data-table-loading-without-rows';\nimport { useDataTableLoadingInert } from '../loading/use-data-table-loading-inert';\nimport { useDataTablePageScrollReset } from '../pagination/use-data-table-page-scroll-reset';\nimport { dataTableGridClassNames } from '../root/data-table-grid-class-names';\nimport { DataTableRow } from './data-table-row';\nimport { useDataTableRowFocusRecovery } from './use-data-table-row-focus-recovery';\n\nexport type DataTableBodyProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A tabela do `useTable`. */\n    table: Table<TFeatures, TData>;\n    /**\n     * Uma função que recebe cada linha do row model e devolve o elemento dela. Com nós comuns,\n     * quem usa faz o laço.\n     * @default (row) => <DataTable.Row row={row} />\n     */\n    children?:\n      | React.ReactNode\n      | ((row: Row<TFeatures, TData>) => React.ReactNode);\n    /**\n     * Quantas linhas-fantasma o corpo desenha na carga sem linhas, com `loadingFeature`.\n     * @default 10\n     */\n    loadingRowCount?: number;\n  }\n>;\n\n/**\n * O corpo da tabela (`role=\"rowgroup\"`).\n *\n * Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e\n * re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar\n * re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as\n * linhas mudam.\n *\n * Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,\n * no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para\n * desligar, passe `className=\"*:[content-visibility:visible]\"`.\n *\n * Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco\n * volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.\n *\n * Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.\n *\n * Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha\n * linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um\n * skeleton (ver `DataTable.Root`).\n *\n * @example\n * ```tsx\n * <DataTable.Body table={table}>\n *   {(row) => (\n *     <DataTable.Row row={row}>\n *       {(cell) => <DataTable.Cell cell={cell} />}\n *     </DataTable.Row>\n *   )}\n * </DataTable.Body>\n * ```\n */\nexport const DataTableBody = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableBodyProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    loadingRowCount = 10,\n    render,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  /**\n   * Memoizado pelo TanStack: o array só muda com as linhas. Tamanho, colunas e seleção mudam o\n   * store, mas não o row model, e não re-renderizam o corpo.\n   */\n  const rows = useSelector(table.store, () => table.getRowModel().rows);\n\n  const focusRecovery = useDataTableRowFocusRecovery(table, rows);\n\n  useDataTablePageScrollReset(table, focusRecovery.ref);\n\n  useDataTableLoadingInert(table, focusRecovery.ref);\n\n  /**\n   * Quantas colunas cada linha-fantasma tem, ou 0 sem elas: só na carga sem linhas. Re-renderiza\n   * quando as linhas-fantasma entram ou saem, ou quando as colunas visíveis mudam durante a carga.\n   */\n  const ghostColumnCount = useSelector(table.store, () => {\n    if (!getDataTableLoadingWithoutRows(table)) {\n      return 0;\n    }\n\n    return hasTableFeature(table, 'columnVisibilityFeature')\n      ? table.getVisibleLeafColumns().length\n      : table.getAllLeafColumns().length;\n  });\n\n  /** Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? rows.map((row) => (\n          <Fragment key={row.id}>\n            {children === undefined ? (\n              <DataTableRow row={row} />\n            ) : (\n              children(row)\n            )}\n          </Fragment>\n        ))\n      : children;\n\n  /**\n   * Fora da árvore de acessibilidade, que já sabe da espera pelo `aria-busy` do `DataTable.Root`.\n   * A grade é a da `DataTable.Row`, e o espaçamento repete o da `DataTable.Cell`.\n   */\n  const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => (\n    <div\n      key={rowIndex}\n      aria-hidden={true}\n      data-component=\"DataTable.GhostRow\"\n      className={mergeTwClassNames([\n        dataTableGridClassNames,\n        'last:border-b-0',\n      ])}\n    >\n      {Array.from({ length: ghostColumnCount }, (_, columnIndex) => (\n        <div\n          key={columnIndex}\n          className=\"h-(--data-table-row-height) content-center px-(--data-table-cell-padding)\"\n        >\n          <Skeleton className=\"h-3 w-3/4\" />\n        </div>\n      ))}\n    </div>\n  ));\n\n  const baseProps = {\n    'data-component': 'DataTable.Body',\n    role: 'rowgroup',\n    onFocus: focusRecovery.onFocus,\n    onBlur: focusRecovery.onBlur,\n    className: mergeTwClassNames(\n      [\n        // As linhas fora da tela pulam estilo, layout e pintura. Sem isto, cada tick do arrasto\n        // de uma coluna, que reescreve a variável herdada do template no `Root`, recalcula todas\n        // as linhas, e com centenas delas o arrasto trava.\n        '*:[content-visibility:auto]',\n        // A altura de uma linha que ainda não apareceu: a da densidade mais a borda de baixo da\n        // `DataTable.Row`. Com `auto`, a linha que já apareceu guarda a altura medida. Uma\n        // estimativa errada faz a barra de rolagem pular quando as linhas entram na tela.\n        '*:[contain-intrinsic-height:auto_calc(var(--data-table-row-height)+1px)]',\n      ],\n      className,\n    ),\n    children: ghostColumnCount > 0 ? ghostRows : content,\n  };\n\n  return useRender({\n    render,\n    ref: [focusRecovery.ref, ref ?? null],\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableBody.displayName = 'DataTable.Body';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,MAAa,iBAIX,UACG;CACH,MAAM,EACJ,OACA,kBAAkB,IAClB,QACA,WACA,UACA,KACA,GAAG,SACD;;;;;CAMJ,MAAM,OAAO,YAAY,MAAM,aAAa,MAAM,YAAY,CAAC,CAAC,IAAI;CAEpE,MAAM,gBAAgB,6BAA6B,OAAO,IAAI;CAE9D,4BAA4B,OAAO,cAAc,GAAG;CAEpD,yBAAyB,OAAO,cAAc,GAAG;;;;;CAMjD,MAAM,mBAAmB,YAAY,MAAM,aAAa;EACtD,IAAI,CAAC,+BAA+B,KAAK,GACvC,OAAO;EAGT,OAAO,gBAAgB,OAAO,yBAAyB,IACnD,MAAM,sBAAsB,CAAC,CAAC,SAC9B,MAAM,kBAAkB,CAAC,CAAC;CAChC,CAAC;;CAGD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,KAAK,KAAK,QACR,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,cAAD,EAAmB,IAAM,CAAA,IAEzB,SAAS,GAAG,EAEN,GANK,IAAI,EAMT,CACX,IACD;;;;;CAMN,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,aAC5D,oBAAC,OAAD;EAEE,eAAa;EACb,kBAAe;EACf,WAAW,kBAAkB,CAC3B,yBACA,iBACF,CAAC;EAEA,UAAA,MAAM,KAAK,EAAE,QAAQ,iBAAiB,IAAI,GAAG,gBAC5C,oBAAC,OAAD;GAEE,WAAU;GAEV,UAAA,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;EAC9B,GAJE,WAIF,CACN;CACE,GAhBE,QAgBF,CACN;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,SAAS,cAAc;EACvB,QAAQ,cAAc;EACtB,WAAW,kBACT,CAIE,+BAIA,0EACF,GACA,SACF;EACA,UAAU,mBAAmB,IAAI,YAAY;CAC/C;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,cAAc,KAAK,OAAO,IAAI;EACpC,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}

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

@@ -35,9 +35,9 @@ export type DataTableRowProps<TFeatures extends TableFeatures, TData extends Row
  * dentro, as setas ficam com o campo.
  *
  * O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o
- * hover e a selecionada a trocam para `gray-3`, e as duas juntas, para `gray-4`. Para colorir uma
- * linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor antiga. A cor do
- * texto fica na linha, e as células herdam.
+ * hover a troca para `gray-2`, a selecionada para `gray-3`, e as duas juntas, para `gray-4`. Para
+ * colorir uma linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor
+ * antiga. A cor do texto fica na linha, e as células herdam.
  *
  * @example
  * ```tsx

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

@@ -1,6 +1,6 @@
 import { hasRowFeature } from "../../../utils/has-feature.js";
 import { focusDataTableRow, getDataTableRowKeyTarget } from "./data-table-row-focus.js";
-import { DATA_TABLE_GRID_CLASS_NAMES } from "../root/data-table-grid-classes.js";
+import { dataTableGridClassNames } from "../root/data-table-grid-class-names.js";
 import { DataTableCell } from "./data-table-cell.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
@@ -30,9 +30,9 @@ import { Fragment as Fragment$1 } from "react";
 * dentro, as setas ficam com o campo.
 *
 * O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o
-* hover e a selecionada a trocam para `gray-3`, e as duas juntas, para `gray-4`. Para colorir uma
-* linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor antiga. A cor do
-* texto fica na linha, e as células herdam.
+* hover a troca para `gray-2`, a selecionada para `gray-3`, e as duas juntas, para `gray-4`. Para
+* colorir uma linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor
+* antiga. A cor do texto fica na linha, e as células herdam.
 *
 * @example
 * ```tsx
@@ -117,12 +117,16 @@ const DataTableRow = (props) => {
 		onKeyDown: handleKeyDown,
 		className: mergeTwClassNames([
 			"relative",
-			DATA_TABLE_GRID_CLASS_NAMES,
+			dataTableGridClassNames,
 			"last:border-b-0",
-			"[--data-table-row-background:var(--color-gray-1)]",
-			"hover:[--data-table-row-background:var(--color-gray-3)]",
+			"[--data-table-row-base:var(--color-white)]",
+			"dark:[--data-table-row-base:#0b0b0b]",
+			"[--data-table-row-background:var(--data-table-row-base)]",
+			"hover:[--data-table-row-background:var(--color-gray-2)]",
 			"data-selected:[--data-table-row-background:var(--color-gray-3)]",
 			"data-selected:hover:[--data-table-row-background:var(--color-gray-4)]",
+			"has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-2)]",
+			"data-selected:has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-4)]",
 			"bg-(--data-table-row-background)",
 			"text-gray-12",
 			"outline-none",

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-row.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-row.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type { Cell, Row, RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasRowFeature } from '../../../utils';\nimport { DATA_TABLE_GRID_CLASS_NAMES } from '../root/data-table-grid-classes';\nimport { DataTableCell } from './data-table-cell';\nimport {\n  focusDataTableRow,\n  getDataTableRowKeyTarget,\n} from './data-table-row-focus';\n\nexport type DataTableRowProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A linha do row model. */\n    row: Row<TFeatures, TData>;\n    /**\n     * Uma função que recebe cada célula visível e devolve o elemento dela. Com nós comuns, quem\n     * usa faz o laço.\n     * @default (cell) => <DataTable.Cell cell={cell} />\n     */\n    children?:\n      | React.ReactNode\n      | ((cell: Cell<TFeatures, TData>) => React.ReactNode);\n  }\n>;\n\n/**\n * Uma linha do corpo (`role=\"row\"`). É um grid com as colunas do `--data-table-template`, que o\n * `DataTable.Root` escreve.\n *\n * Com render-prop ou sem `children`, faz o laço das células sozinha: assina as próprias células e\n * re-renderiza quando a ordem, a visibilidade ou o pinning das colunas mudam, que não mudam o row\n * model e não passam pelo `DataTable.Body`. Com `columnVisibilityFeature`, são as células\n * visíveis; sem ela, todas. Com `columnPinningFeature`, vêm na ordem das regiões: as fixadas no\n * início, as do centro e as fixadas no fim.\n *\n * Com `rowSelectionFeature`, a linha selecionada ganha `data-selected` e o fundo destacado, e com\n * `activeRowFeature`, também o `aria-selected`. O clique na linha não seleciona: o `onClick` fica\n * livre, e a seleção é do `DataTable.RowCheckbox` e do Espaço.\n *\n * Com `activeRowFeature`, entra na navegação por teclado. A linha ativa tem o ponto de Tab (sem\n * ela no row model, a primeira), e receber o foco, pelo teclado ou pelo clique, torna esta a\n * ativa, marcada com `data-active`. ↑↓, Home, End, PageUp e PageDown movem o foco entre as\n * linhas, e o Espaço alterna a seleção, com Shift para o intervalo. Os atalhos são do app, no\n * `onKeyDown`, que roda antes: um `preventDefault()` cancela o da linha. Num campo de texto de\n * dentro, as setas ficam com o campo.\n *\n * O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o\n * hover e a selecionada a trocam para `gray-3`, e as duas juntas, para `gray-4`. Para colorir uma\n * linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor antiga. A cor do\n * texto fica na linha, e as células herdam.\n *\n * @example\n * ```tsx\n * <DataTable.Row\n *   row={row}\n *   onClick={() => openCustomer(row.original)}\n *   onKeyDown={(event) => {\n *     if (event.key === 'Enter') {\n *       openCustomer(row.original);\n *     }\n *   }}\n *   className={\n *     row.original.overdue\n *       ? '[--data-table-row-background:var(--color-gray-2)] text-gray-11'\n *       : undefined\n *   }\n * >\n *   {(cell) => <DataTable.Cell cell={cell} />}\n * </DataTable.Row>\n * ```\n */\nexport const DataTableRow = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableRowProps<TFeatures, TData>,\n) => {\n  const { row, render, className, children, ...rest } = props;\n\n  /**\n   * As listas que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só\n   * re-renderiza quando uma delas muda com as colunas. Todas seguem a ordem dos headers folha, que\n   * é a do template, e as células caem nos tracks certos. Com pinning, as três regiões, que\n   * ordenam as fixadas mesmo sem `columnVisibilityFeature`.\n   */\n  const cellGroups = useSelector(\n    row.table.store,\n    () =>\n      hasRowFeature(row, 'columnPinningFeature')\n        ? [\n            row.getStartVisibleCells(),\n            row.getCenterVisibleCells(),\n            row.getEndVisibleCells(),\n          ]\n        : hasRowFeature(row, 'columnVisibilityFeature')\n          ? [row.getVisibleCells()]\n          : [row.getAllCells()],\n    { compare: shallow },\n  );\n\n  const cells = cellGroups.flat();\n\n  /**\n   * Só re-renderiza quando esta linha é marcada ou desmarcada. A seleção é opcional, então assina\n   * o store; sem `rowSelectionFeature`, nenhuma linha fica selecionada.\n   */\n  const isSelected = useSelector(\n    row.table.store,\n    () => hasRowFeature(row, 'rowSelectionFeature') && row.getIsSelected(),\n  );\n\n  /**\n   * O ponto de Tab da tabela: a linha ativa ou, sem ela no row model, a primeira. Re-renderiza\n   * quando o ponto de Tab entra ou sai daqui. A navegação é opcional, então assina o store; sem\n   * `activeRowFeature`, nenhuma linha entra no Tab.\n   */\n  const isTabStop = useSelector(row.table.store, () => {\n    if (!hasRowFeature(row, 'activeRowFeature')) {\n      return false;\n    }\n\n    const activeRow = row.table.getActiveRow();\n\n    return activeRow\n      ? activeRow.id === row.id\n      : row.table.getRowModel().rows[0]?.id === row.id;\n  });\n\n  /** Só re-renderiza quando esta linha vira ou deixa de ser a ativa. */\n  const isActive = useSelector(\n    row.table.store,\n    () => hasRowFeature(row, 'activeRowFeature') && row.getIsActive(),\n  );\n\n  /** Receber o foco, nela ou num controle de dentro, torna esta a linha ativa. */\n  const handleFocus = () => {\n    if (hasRowFeature(row, 'activeRowFeature') && !row.getIsActive()) {\n      row.table.setActiveRowId(row.id);\n    }\n  };\n\n  /** As teclas da navegação. O `onKeyDown` do app roda antes e cancela com `preventDefault()`. */\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!hasRowFeature(row, 'activeRowFeature') || event.defaultPrevented) {\n      return;\n    }\n\n    /** Na própria linha: num controle de dentro, como o checkbox, o Espaço é dele. */\n    if (event.key === ' ' && event.target === event.currentTarget) {\n      if (hasRowFeature(row, 'rowSelectionFeature') && row.getCanSelect()) {\n        event.preventDefault();\n\n        /** O handler do checkbox: lê o Shift do evento, para o intervalo, e move a âncora. */\n        row.getToggleSelectedHandler()({\n          target: { checked: !row.getIsSelected() },\n          nativeEvent: event.nativeEvent,\n        });\n      }\n\n      return;\n    }\n\n    const targetRow = getDataTableRowKeyTarget(event.currentTarget, event);\n\n    if (targetRow) {\n      event.preventDefault();\n      focusDataTableRow(targetRow);\n    }\n  };\n\n  const isNavigable = hasRowFeature(row, 'activeRowFeature');\n\n  /** Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? cells.map((cell) => (\n          <Fragment key={cell.id}>\n            {children === undefined ? (\n              <DataTableCell cell={cell} />\n            ) : (\n              children(cell)\n            )}\n          </Fragment>\n        ))\n      : children;\n\n  const baseProps = {\n    'data-component': 'DataTable.Row',\n    'data-selected': isSelected ? '' : undefined,\n    'data-active': isActive ? '' : undefined,\n    role: 'row',\n    // Só no `grid`: o ARIA não define o atributo na linha de uma `table`, e o leitor o ignora.\n    'aria-selected':\n      isNavigable && hasRowFeature(row, 'rowSelectionFeature')\n        ? isSelected\n        : undefined,\n    tabIndex: isNavigable ? (isTabStop ? 0 : -1) : undefined,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    className: mergeTwClassNames(\n      [\n        // O anel de foco se posiciona por aqui.\n        'relative',\n\n        DATA_TABLE_GRID_CLASS_NAMES,\n        // Sem a linha horizontal na última: embaixo dela já vem a borda da área de rolagem, e as\n        // duas somariam 2px.\n        'last:border-b-0',\n\n        // O fundo numa variável, que as células fixadas repetem para ficarem opacas. A selecionada\n        // e o hover têm a mesma cor, e a selecionada com hover sobe um passo: sem isso, passar o\n        // mouse por ela não mudaria nada.\n        '[--data-table-row-background:var(--color-gray-1)]',\n        'hover:[--data-table-row-background:var(--color-gray-3)]',\n        'data-selected:[--data-table-row-background:var(--color-gray-3)]',\n        'data-selected:hover:[--data-table-row-background:var(--color-gray-4)]',\n        'bg-(--data-table-row-background)',\n\n        'text-gray-12',\n\n        // O anel de foco, com o foco na linha ou num controle de dentro, pelo teclado ou pelo\n        // clique: com `focus-visible`, o clique tornaria a linha ativa sem mostrar qual é. Num\n        // `::after` por cima das células fixadas (`z-1`), que cobririam o `outline` e o\n        // `box-shadow` da própria linha. Por dentro: a linha seguinte cobriria o que sai por baixo.\n        'outline-none',\n        'after:pointer-events-none',\n        'after:absolute',\n        'after:inset-0',\n        'after:z-2',\n        'after:content-[\"\"]',\n        'focus-within:after:outline-2',\n        'focus-within:after:-outline-offset-2',\n        'focus-within:after:outline-gray-12',\n      ],\n      className,\n    ),\n    children: content,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableRow.displayName = 'DataTable.Row';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAa,gBAIX,UACG;CACH,MAAM,EAAE,KAAK,QAAQ,WAAW,UAAU,GAAG,SAAS;CAuBtD,MAAM,QAfa,YACjB,IAAI,MAAM,aAER,cAAc,KAAK,sBAAsB,IACrC;EACE,IAAI,qBAAqB;EACzB,IAAI,sBAAsB;EAC1B,IAAI,mBAAmB;CACzB,IACA,cAAc,KAAK,yBAAyB,IAC1C,CAAC,IAAI,gBAAgB,CAAC,IACtB,CAAC,IAAI,YAAY,CAAC,GAC1B,EAAE,SAAS,QAAQ,CAGE,CAAC,CAAC,KAAK;;;;;CAM9B,MAAM,aAAa,YACjB,IAAI,MAAM,aACJ,cAAc,KAAK,qBAAqB,KAAK,IAAI,cAAc,CACvE;;;;;;CAOA,MAAM,YAAY,YAAY,IAAI,MAAM,aAAa;EACnD,IAAI,CAAC,cAAc,KAAK,kBAAkB,GACxC,OAAO;EAGT,MAAM,YAAY,IAAI,MAAM,aAAa;EAEzC,OAAO,YACH,UAAU,OAAO,IAAI,KACrB,IAAI,MAAM,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,IAAI;CAClD,CAAC;;CAGD,MAAM,WAAW,YACf,IAAI,MAAM,aACJ,cAAc,KAAK,kBAAkB,KAAK,IAAI,YAAY,CAClE;;CAGA,MAAM,oBAAoB;EACxB,IAAI,cAAc,KAAK,kBAAkB,KAAK,CAAC,IAAI,YAAY,GAC7D,IAAI,MAAM,eAAe,IAAI,EAAE;CAEnC;;CAGA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,cAAc,KAAK,kBAAkB,KAAK,MAAM,kBACnD;;EAIF,IAAI,MAAM,QAAQ,OAAO,MAAM,WAAW,MAAM,eAAe;GAC7D,IAAI,cAAc,KAAK,qBAAqB,KAAK,IAAI,aAAa,GAAG;IACnE,MAAM,eAAe;;IAGrB,IAAI,yBAAyB,CAAC,CAAC;KAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI,cAAc,EAAE;KACxC,aAAa,MAAM;IACrB,CAAC;GACH;GAEA;EACF;EAEA,MAAM,YAAY,yBAAyB,MAAM,eAAe,KAAK;EAErE,IAAI,WAAW;GACb,MAAM,eAAe;GACrB,kBAAkB,SAAS;EAC7B;CACF;CAEA,MAAM,cAAc,cAAc,KAAK,kBAAkB;;CAGzD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,MAAM,KAAK,SACT,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,eAAD,EAAqB,KAAO,CAAA,IAE5B,SAAS,IAAI,EAEP,GANK,KAAK,EAMV,CACX,IACD;CAEN,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EACnC,eAAe,WAAW,KAAK,KAAA;EAC/B,MAAM;EAEN,iBACE,eAAe,cAAc,KAAK,qBAAqB,IACnD,aACA,KAAA;EACN,UAAU,cAAe,YAAY,IAAI,KAAM,KAAA;EAC/C,SAAS;EACT,WAAW;EACX,WAAW,kBACT;GAEE;GAEA;GAGA;GAKA;GACA;GACA;GACA;GACA;GAEA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}
+{"version":3,"file":"data-table-row.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-row.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type { Cell, Row, RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasRowFeature } from '../../../utils';\nimport { dataTableGridClassNames } from '../root/data-table-grid-class-names';\nimport { DataTableCell } from './data-table-cell';\nimport {\n  focusDataTableRow,\n  getDataTableRowKeyTarget,\n} from './data-table-row-focus';\n\nexport type DataTableRowProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A linha do row model. */\n    row: Row<TFeatures, TData>;\n    /**\n     * Uma função que recebe cada célula visível e devolve o elemento dela. Com nós comuns, quem\n     * usa faz o laço.\n     * @default (cell) => <DataTable.Cell cell={cell} />\n     */\n    children?:\n      | React.ReactNode\n      | ((cell: Cell<TFeatures, TData>) => React.ReactNode);\n  }\n>;\n\n/**\n * Uma linha do corpo (`role=\"row\"`). É um grid com as colunas do `--data-table-template`, que o\n * `DataTable.Root` escreve.\n *\n * Com render-prop ou sem `children`, faz o laço das células sozinha: assina as próprias células e\n * re-renderiza quando a ordem, a visibilidade ou o pinning das colunas mudam, que não mudam o row\n * model e não passam pelo `DataTable.Body`. Com `columnVisibilityFeature`, são as células\n * visíveis; sem ela, todas. Com `columnPinningFeature`, vêm na ordem das regiões: as fixadas no\n * início, as do centro e as fixadas no fim.\n *\n * Com `rowSelectionFeature`, a linha selecionada ganha `data-selected` e o fundo destacado, e com\n * `activeRowFeature`, também o `aria-selected`. O clique na linha não seleciona: o `onClick` fica\n * livre, e a seleção é do `DataTable.RowCheckbox` e do Espaço.\n *\n * Com `activeRowFeature`, entra na navegação por teclado. A linha ativa tem o ponto de Tab (sem\n * ela no row model, a primeira), e receber o foco, pelo teclado ou pelo clique, torna esta a\n * ativa, marcada com `data-active`. ↑↓, Home, End, PageUp e PageDown movem o foco entre as\n * linhas, e o Espaço alterna a seleção, com Shift para o intervalo. Os atalhos são do app, no\n * `onKeyDown`, que roda antes: um `preventDefault()` cancela o da linha. Num campo de texto de\n * dentro, as setas ficam com o campo.\n *\n * O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o\n * hover a troca para `gray-2`, a selecionada para `gray-3`, e as duas juntas, para `gray-4`. Para\n * colorir uma linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor\n * antiga. A cor do texto fica na linha, e as células herdam.\n *\n * @example\n * ```tsx\n * <DataTable.Row\n *   row={row}\n *   onClick={() => openCustomer(row.original)}\n *   onKeyDown={(event) => {\n *     if (event.key === 'Enter') {\n *       openCustomer(row.original);\n *     }\n *   }}\n *   className={\n *     row.original.overdue\n *       ? '[--data-table-row-background:var(--color-gray-2)] text-gray-11'\n *       : undefined\n *   }\n * >\n *   {(cell) => <DataTable.Cell cell={cell} />}\n * </DataTable.Row>\n * ```\n */\nexport const DataTableRow = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableRowProps<TFeatures, TData>,\n) => {\n  const { row, render, className, children, ...rest } = props;\n\n  /**\n   * As listas que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só\n   * re-renderiza quando uma delas muda com as colunas. Todas seguem a ordem dos headers folha, que\n   * é a do template, e as células caem nos tracks certos. Com pinning, as três regiões, que\n   * ordenam as fixadas mesmo sem `columnVisibilityFeature`.\n   */\n  const cellGroups = useSelector(\n    row.table.store,\n    () =>\n      hasRowFeature(row, 'columnPinningFeature')\n        ? [\n            row.getStartVisibleCells(),\n            row.getCenterVisibleCells(),\n            row.getEndVisibleCells(),\n          ]\n        : hasRowFeature(row, 'columnVisibilityFeature')\n          ? [row.getVisibleCells()]\n          : [row.getAllCells()],\n    { compare: shallow },\n  );\n\n  const cells = cellGroups.flat();\n\n  /**\n   * Só re-renderiza quando esta linha é marcada ou desmarcada. A seleção é opcional, então assina\n   * o store; sem `rowSelectionFeature`, nenhuma linha fica selecionada.\n   */\n  const isSelected = useSelector(\n    row.table.store,\n    () => hasRowFeature(row, 'rowSelectionFeature') && row.getIsSelected(),\n  );\n\n  /**\n   * O ponto de Tab da tabela: a linha ativa ou, sem ela no row model, a primeira. Re-renderiza\n   * quando o ponto de Tab entra ou sai daqui. A navegação é opcional, então assina o store; sem\n   * `activeRowFeature`, nenhuma linha entra no Tab.\n   */\n  const isTabStop = useSelector(row.table.store, () => {\n    if (!hasRowFeature(row, 'activeRowFeature')) {\n      return false;\n    }\n\n    const activeRow = row.table.getActiveRow();\n\n    return activeRow\n      ? activeRow.id === row.id\n      : row.table.getRowModel().rows[0]?.id === row.id;\n  });\n\n  /** Só re-renderiza quando esta linha vira ou deixa de ser a ativa. */\n  const isActive = useSelector(\n    row.table.store,\n    () => hasRowFeature(row, 'activeRowFeature') && row.getIsActive(),\n  );\n\n  /** Receber o foco, nela ou num controle de dentro, torna esta a linha ativa. */\n  const handleFocus = () => {\n    if (hasRowFeature(row, 'activeRowFeature') && !row.getIsActive()) {\n      row.table.setActiveRowId(row.id);\n    }\n  };\n\n  /** As teclas da navegação. O `onKeyDown` do app roda antes e cancela com `preventDefault()`. */\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!hasRowFeature(row, 'activeRowFeature') || event.defaultPrevented) {\n      return;\n    }\n\n    /** Na própria linha: num controle de dentro, como o checkbox, o Espaço é dele. */\n    if (event.key === ' ' && event.target === event.currentTarget) {\n      if (hasRowFeature(row, 'rowSelectionFeature') && row.getCanSelect()) {\n        event.preventDefault();\n\n        /** O handler do checkbox: lê o Shift do evento, para o intervalo, e move a âncora. */\n        row.getToggleSelectedHandler()({\n          target: { checked: !row.getIsSelected() },\n          nativeEvent: event.nativeEvent,\n        });\n      }\n\n      return;\n    }\n\n    const targetRow = getDataTableRowKeyTarget(event.currentTarget, event);\n\n    if (targetRow) {\n      event.preventDefault();\n      focusDataTableRow(targetRow);\n    }\n  };\n\n  const isNavigable = hasRowFeature(row, 'activeRowFeature');\n\n  /** Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? cells.map((cell) => (\n          <Fragment key={cell.id}>\n            {children === undefined ? (\n              <DataTableCell cell={cell} />\n            ) : (\n              children(cell)\n            )}\n          </Fragment>\n        ))\n      : children;\n\n  const baseProps = {\n    'data-component': 'DataTable.Row',\n    'data-selected': isSelected ? '' : undefined,\n    'data-active': isActive ? '' : undefined,\n    role: 'row',\n    // Só no `grid`: o ARIA não define o atributo na linha de uma `table`, e o leitor o ignora.\n    'aria-selected':\n      isNavigable && hasRowFeature(row, 'rowSelectionFeature')\n        ? isSelected\n        : undefined,\n    tabIndex: isNavigable ? (isTabStop ? 0 : -1) : undefined,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    className: mergeTwClassNames(\n      [\n        // O anel de foco se posiciona por aqui.\n        'relative',\n\n        dataTableGridClassNames,\n        // Sem a linha horizontal na última: embaixo dela já vem a borda da área de rolagem, e as\n        // duas somariam 2px.\n        'last:border-b-0',\n\n        // O fundo numa variável, que as células fixadas repetem para ficarem opacas. A base é\n        // branca no claro e quase preta no escuro, numa variável à parte: a variante `dark` e o\n        // `hover` disputariam a mesma propriedade, e a ordem delas no CSS decidiria. O hover sobe\n        // um passo, a selecionada outro, e a selecionada com hover mais um: sem isso, passar o\n        // mouse por ela não mudaria nada. Escala curta, para o fundo dos botões `ghost` das\n        // células (`gray-3`) aparecer sobre a linha em hover.\n        '[--data-table-row-base:var(--color-white)]',\n        'dark:[--data-table-row-base:#0b0b0b]',\n        '[--data-table-row-background:var(--data-table-row-base)]',\n        'hover:[--data-table-row-background:var(--color-gray-2)]',\n        'data-selected:[--data-table-row-background:var(--color-gray-3)]',\n        'data-selected:hover:[--data-table-row-background:var(--color-gray-4)]',\n        // Com um menu aberto num controle da linha, ela fica como em hover, com o ponteiro onde\n        // estiver: o backdrop do menu cobre o resto da linha e deixa um recorte só sobre o\n        // gatilho, e o `:hover` acenderia e apagaria a linha conforme o ponteiro passa por ele.\n        'has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-2)]',\n        'data-selected:has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-4)]',\n        'bg-(--data-table-row-background)',\n\n        'text-gray-12',\n\n        // O anel de foco, com o foco na linha ou num controle de dentro, pelo teclado ou pelo\n        // clique: com `focus-visible`, o clique tornaria a linha ativa sem mostrar qual é. Num\n        // `::after` por cima das células fixadas (`z-1`), que cobririam o `outline` e o\n        // `box-shadow` da própria linha. Por dentro: a linha seguinte cobriria o que sai por baixo.\n        'outline-none',\n        'after:pointer-events-none',\n        'after:absolute',\n        'after:inset-0',\n        'after:z-2',\n        'after:content-[\"\"]',\n        'focus-within:after:outline-2',\n        'focus-within:after:-outline-offset-2',\n        'focus-within:after:outline-gray-12',\n      ],\n      className,\n    ),\n    children: content,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableRow.displayName = 'DataTable.Row';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAa,gBAIX,UACG;CACH,MAAM,EAAE,KAAK,QAAQ,WAAW,UAAU,GAAG,SAAS;CAuBtD,MAAM,QAfa,YACjB,IAAI,MAAM,aAER,cAAc,KAAK,sBAAsB,IACrC;EACE,IAAI,qBAAqB;EACzB,IAAI,sBAAsB;EAC1B,IAAI,mBAAmB;CACzB,IACA,cAAc,KAAK,yBAAyB,IAC1C,CAAC,IAAI,gBAAgB,CAAC,IACtB,CAAC,IAAI,YAAY,CAAC,GAC1B,EAAE,SAAS,QAAQ,CAGE,CAAC,CAAC,KAAK;;;;;CAM9B,MAAM,aAAa,YACjB,IAAI,MAAM,aACJ,cAAc,KAAK,qBAAqB,KAAK,IAAI,cAAc,CACvE;;;;;;CAOA,MAAM,YAAY,YAAY,IAAI,MAAM,aAAa;EACnD,IAAI,CAAC,cAAc,KAAK,kBAAkB,GACxC,OAAO;EAGT,MAAM,YAAY,IAAI,MAAM,aAAa;EAEzC,OAAO,YACH,UAAU,OAAO,IAAI,KACrB,IAAI,MAAM,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,IAAI;CAClD,CAAC;;CAGD,MAAM,WAAW,YACf,IAAI,MAAM,aACJ,cAAc,KAAK,kBAAkB,KAAK,IAAI,YAAY,CAClE;;CAGA,MAAM,oBAAoB;EACxB,IAAI,cAAc,KAAK,kBAAkB,KAAK,CAAC,IAAI,YAAY,GAC7D,IAAI,MAAM,eAAe,IAAI,EAAE;CAEnC;;CAGA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,cAAc,KAAK,kBAAkB,KAAK,MAAM,kBACnD;;EAIF,IAAI,MAAM,QAAQ,OAAO,MAAM,WAAW,MAAM,eAAe;GAC7D,IAAI,cAAc,KAAK,qBAAqB,KAAK,IAAI,aAAa,GAAG;IACnE,MAAM,eAAe;;IAGrB,IAAI,yBAAyB,CAAC,CAAC;KAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI,cAAc,EAAE;KACxC,aAAa,MAAM;IACrB,CAAC;GACH;GAEA;EACF;EAEA,MAAM,YAAY,yBAAyB,MAAM,eAAe,KAAK;EAErE,IAAI,WAAW;GACb,MAAM,eAAe;GACrB,kBAAkB,SAAS;EAC7B;CACF;CAEA,MAAM,cAAc,cAAc,KAAK,kBAAkB;;CAGzD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,MAAM,KAAK,SACT,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,eAAD,EAAqB,KAAO,CAAA,IAE5B,SAAS,IAAI,EAEP,GANK,KAAK,EAMV,CACX,IACD;CAEN,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EACnC,eAAe,WAAW,KAAK,KAAA;EAC/B,MAAM;EAEN,iBACE,eAAe,cAAc,KAAK,qBAAqB,IACnD,aACA,KAAA;EACN,UAAU,cAAe,YAAY,IAAI,KAAM,KAAA;EAC/C,SAAS;EACT,WAAW;EACX,WAAW,kBACT;GAEE;GAEA;GAGA;GAQA;GACA;GACA;GACA;GACA;GACA;GAIA;GACA;GACA;GAEA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -1,4 +1,4 @@
-import { DATA_TABLE_GRID_CLASS_NAMES } from "../root/data-table-grid-classes.js";
+import { dataTableGridClassNames } from "../root/data-table-grid-class-names.js";
 import { mergeProps, useRender } from "@base-ui/react";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 //#region src/components/data-table/header/data-table-header-row.tsx
@@ -13,7 +13,7 @@ const DataTableHeaderRow = (props) => {
 	const baseProps = {
 		"data-component": "DataTable.HeaderRow",
 		role: "row",
-		className: mergeTwClassNames([DATA_TABLE_GRID_CLASS_NAMES], className)
+		className: mergeTwClassNames([dataTableGridClassNames], className)
 	};
 	return useRender({
 		render,

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

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

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

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

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

@@ -19,6 +19,7 @@ import { DataTableRoot } from "./root/data-table-root.js";
 import { DataTableScrollArea } from "./root/data-table-scroll-area.js";
 import { DataTableRowCheckbox } from "./selection/data-table-row-checkbox.js";
 import { DataTableSelectAllCheckbox } from "./selection/data-table-select-all-checkbox.js";
+import { DataTableSelectionBar } from "./selection/data-table-selection-bar.js";
 import { selectionColumnDef } from "./selection/selection-column-def.js";
 import { DataTableSortIndicator } from "./sorting/data-table-sort-indicator.js";
 import { DataTableSortTrigger } from "./sorting/data-table-sort-trigger.js";
@@ -48,6 +49,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	ScrollArea: () => DataTableScrollArea,
 	SelectAllCheckbox: () => DataTableSelectAllCheckbox,
 	SelectedCount: () => DataTableSelectedCount,
+	SelectionBar: () => DataTableSelectionBar,
 	SortColumnSelect: () => DataTableSortColumnSelect,
 	SortDirectionSelect: () => DataTableSortDirectionSelect,
 	SortIndicator: () => DataTableSortIndicator,
@@ -55,6 +57,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	selectionColumnDef: () => selectionColumnDef
 });
 //#endregion
-export { DataTableBody as Body, DataTableCell as Cell, DataTableDensitySelect as DensitySelect, DataTableEmpty as Empty, DataTableHeader as Header, DataTableHeaderButton as HeaderButton, DataTableHeaderCell as HeaderCell, DataTableHeaderContent as HeaderContent, DataTableHeaderRow as HeaderRow, DataTablePageButton as PageButton, DataTablePageSizeSelect as PageSizeSelect, DataTablePageStatus as PageStatus, DataTablePagination as Pagination, DataTableResizeHandle as ResizeHandle, DataTableRoot as Root, DataTableRow as Row, DataTableRowCheckbox as RowCheckbox, DataTableRowRange as RowRange, DataTableScrollArea as ScrollArea, DataTableSelectAllCheckbox as SelectAllCheckbox, DataTableSelectedCount as SelectedCount, DataTableSortColumnSelect as SortColumnSelect, DataTableSortDirectionSelect as SortDirectionSelect, DataTableSortIndicator as SortIndicator, DataTableSortTrigger as SortTrigger, index_parts_exports, selectionColumnDef };
+export { DataTableBody as Body, DataTableCell as Cell, DataTableDensitySelect as DensitySelect, DataTableEmpty as Empty, DataTableHeader as Header, DataTableHeaderButton as HeaderButton, DataTableHeaderCell as HeaderCell, DataTableHeaderContent as HeaderContent, DataTableHeaderRow as HeaderRow, DataTablePageButton as PageButton, DataTablePageSizeSelect as PageSizeSelect, DataTablePageStatus as PageStatus, DataTablePagination as Pagination, DataTableResizeHandle as ResizeHandle, DataTableRoot as Root, DataTableRow as Row, DataTableRowCheckbox as RowCheckbox, DataTableRowRange as RowRange, DataTableScrollArea as ScrollArea, DataTableSelectAllCheckbox as SelectAllCheckbox, DataTableSelectedCount as SelectedCount, DataTableSelectionBar as SelectionBar, DataTableSortColumnSelect as SortColumnSelect, DataTableSortDirectionSelect as SortDirectionSelect, DataTableSortIndicator as SortIndicator, DataTableSortTrigger as SortTrigger, index_parts_exports, selectionColumnDef };
 
 //# sourceMappingURL=index.parts.js.map

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

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

package/dist/components/data-table/resize/data-table-resize-handle.js

@@ -73,6 +73,7 @@ const DataTableResizeHandle = (props) => {
 			"z-10",
 			"h-full",
 			"cursor-col-resize",
+			"in-[[role=columnheader]:has([data-popup-open])]:pointer-events-none",
 			"touch-none",
 			"select-none",
 			"before:absolute",

package/dist/components/data-table/resize/data-table-resize-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-resize-handle.js","names":[],"sources":["../../../../src/components/data-table/resize/data-table-resize-handle.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { InteractionShield } from '@lucasbernardosn/react-ui/utilities/interaction-shield';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useRef } from 'react';\nimport type { HeaderWith } from '../../../types';\nimport { useDataTableResizeScroll } from './use-data-table-resize-scroll';\n\nexport type DataTableResizeHandleProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** O header da coluna. Exige `columnSizingFeature` e `columnResizingFeature`. */\n    header: HeaderWith<\n      TFeatures,\n      TData,\n      'columnResizingFeature' | 'columnSizingFeature'\n    >;\n  }\n>;\n\n/**\n * Área de agarre para redimensionar uma coluna, sobre a linha vertical do fim do header (que\n * precisa ser `relative`). Arrastar redimensiona; duplo clique devolve a coluna ao tamanho\n * definido.\n *\n * A caixa tem largura zero, e a área de agarre é um `::before` transparente de 12px centrado na\n * linha, metade sobre a coluna vizinha; na última coluna e antes de uma fixada do fim, toda do\n * lado de dentro. No repouso não aparece; no hover e no arrasto, o handle vira a âncora da\n * linha-guia, que a `DataTable.ScrollArea` desenha na altura toda da tabela.\n * Quando a borda chega à beira de uma fixada do fim ou ao fim da área visível, a rolagem\n * acompanha o arrasto. Numa coluna que não redimensiona (`enableResizing: false`), não\n * renderiza.\n *\n * Durante o arrasto, o `InteractionShield` do `ui` cobre a página: nada, dentro ou fora da\n * tabela, reage ao ponteiro, o cursor de resize vale em toda parte, e o texto não é selecionado.\n * A roda do mouse, por cima dele, não rola a tabela.\n *\n * Exige `columnResizeMode: 'onChange'` na tabela. Com o padrão do TanStack, `'onEnd'`, o tamanho\n * só muda ao soltar: no arrasto nada anda na tela (nem a coluna, nem o handle, nem a guia), e a\n * coluna pula no fim.\n *\n * @example\n * ```tsx\n * const table = useTable({ features, columns, data, columnResizeMode: 'onChange' });\n *\n * <DataTable.HeaderCell header={header}>\n *   <DataTable.HeaderContent header={header} />\n *   <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n */\nexport const DataTableResizeHandle = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableResizeHandleProps<TFeatures, TData>,\n) => {\n  const { header, render, className, ref, ...rest } = props;\n\n  const handleRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * O atom do resize muda a cada tick do arrasto, mas o booleano só no começo e no fim: o handle\n   * re-renderiza duas vezes por arrasto, e só o da coluna arrastada.\n   */\n  const isResizing = useSelector(header.column.table.atoms.columnResizing, () =>\n    header.column.getIsResizing(),\n  );\n\n  useDataTableResizeScroll(header.column.table, isResizing, handleRef);\n\n  const onResizeStart = header.getResizeHandler();\n\n  /**\n   * O duplo clique pelo `detail` do `mousedown`, que conta os cliques, e não pelo `dblclick`: o\n   * arrasto começa no primeiro `mousedown`, o shield cobre o handle, e o `mouseup` cai nele. O\n   * navegador então não manda o `click` nem o `dblclick` ao handle.\n   */\n  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.detail === 2) {\n      header.column.resetSize();\n\n      return;\n    }\n\n    onResizeStart(event);\n  };\n\n  const baseProps = {\n    'data-component': 'DataTable.ResizeHandle',\n    'data-resizing': isResizing ? '' : undefined,\n    // Só ponteiro: sem resize por teclado, um `separator` prometeria teclas que não existem.\n    'aria-hidden': true,\n    onMouseDown: handleMouseDown,\n    onTouchStart: onResizeStart,\n    className: mergeTwClassNames(\n      [\n        // Sobre a linha vertical: o `right-0` é o fim do padding, e a borda de 1px que o\n        // `divide-x` põe na célula vem logo depois. A última da linha não tem borda, e o\n        // `right-px` põe o handle no mesmo ponto em relação ao fim dela. Antes de uma fixada do\n        // fim, a célula também perde a borda, mas a linha passa a ser a da fixada, logo depois:\n        // o `right-0` continua certo. Pela posição no DOM, com os seletores das bordas da\n        // `DataTable.HeaderRow`, o handle e a borda não têm como discordar.\n        'absolute',\n        'top-0',\n        'right-0',\n        'in-[[role=columnheader]:last-child]:right-px',\n        'z-10',\n\n        'h-full',\n\n        'cursor-col-resize',\n        // Sem isto, o arrasto no toque rola a página em vez de redimensionar.\n        'touch-none',\n        'select-none',\n\n        // Área de agarre centrada na linha. Conteúdo recortado não recebe clique, então nada\n        // entre o handle e o header pode ter `overflow: hidden`.\n        'before:absolute',\n        'before:top-0',\n        'before:right-0',\n        'before:h-full',\n        'before:w-3',\n        'before:translate-x-1.5',\n        'before:content-[\"\"]',\n\n        // Onde a metade de fora não serve, os 12px ficam todos do lado de dentro. Na última da\n        // linha, ela passaria do fim da tabela e acenderia a barra de rolagem horizontal sem\n        // haver o que rolar; antes de uma fixada do fim, ficaria por baixo dela, sem pegar o\n        // clique.\n        'in-[[role=columnheader]:last-child]:before:translate-x-0',\n        'in-[[role=columnheader]:has(+[data-pinned=end])]:before:translate-x-0',\n\n        // A linha de 2px no cabeçalho, sobre a borda e 1px antes dela, no hover e no arrasto. Onde\n        // há anchor positioning, a linha-guia cobre esta no mesmo lugar e segue pelo corpo; sem\n        // ele, fica só esta.\n        'after:absolute',\n        'after:inset-y-0',\n        'after:left-0',\n        'after:w-0.5',\n        'after:-translate-x-1/2',\n        'after:content-[\"\"]',\n        'hover:after:bg-gray-9',\n        'data-resizing:after:bg-black',\n        'dark:data-resizing:after:bg-white',\n\n        // A âncora da linha-guia (ver `DataTable.ScrollArea`), no hover e no arrasto. Um nome só\n        // basta: no arrasto, o shield cobre os outros handles, e nenhum fica em hover junto com\n        // o arrastado. Com o nome repetido, a guia iria para o último.\n        'hover:[anchor-name:--data-table-resize-handle]',\n        'data-resizing:[anchor-name:--data-table-resize-handle]',\n      ],\n      className,\n    ),\n  };\n\n  const element = useRender({\n    render,\n    defaultTagName: 'div',\n    ref: [handleRef, ref ?? null],\n    props: mergeProps(baseProps, rest),\n  });\n\n  return header.column.getCanResize() ? (\n    <>\n      {element}\n      <InteractionShield\n        active={isResizing}\n        cursor=\"col-resize\"\n      />\n    </>\n  ) : null;\n};\n\nDataTableResizeHandle.displayName = 'DataTable.ResizeHandle';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,KAAK,GAAG,SAAS;CAEpD,MAAM,YAAY,OAAuB,IAAI;;;;;CAM7C,MAAM,aAAa,YAAY,OAAO,OAAO,MAAM,MAAM,sBACvD,OAAO,OAAO,cAAc,CAC9B;CAEA,yBAAyB,OAAO,OAAO,OAAO,YAAY,SAAS;CAEnE,MAAM,gBAAgB,OAAO,iBAAiB;;;;;;CAO9C,MAAM,mBAAmB,UAA4C;EACnE,IAAI,MAAM,WAAW,GAAG;GACtB,OAAO,OAAO,UAAU;GAExB;EACF;EAEA,cAAc,KAAK;CACrB;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EAEnC,eAAe;EACf,aAAa;EACb,cAAc;EACd,WAAW,kBACT;GAOE;GACA;GACA;GACA;GACA;GAEA;GAEA;GAEA;GACA;GAIA;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAKA;GACA;EACF,GACA,SACF;CACF;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,KAAK,CAAC,WAAW,OAAO,IAAI;EAC5B,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,OAAO,OAAO,aAAa,IAChC,qBAAA,UAAA,EAAA,UAAA,CACG,SACD,oBAAC,mBAAD;EACE,QAAQ;EACR,QAAO;CACR,CAAA,CACD,EAAA,CAAA,IACA;AACN;AAEA,sBAAsB,cAAc"}
+{"version":3,"file":"data-table-resize-handle.js","names":[],"sources":["../../../../src/components/data-table/resize/data-table-resize-handle.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { InteractionShield } from '@lucasbernardosn/react-ui/utilities/interaction-shield';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useRef } from 'react';\nimport type { HeaderWith } from '../../../types';\nimport { useDataTableResizeScroll } from './use-data-table-resize-scroll';\n\nexport type DataTableResizeHandleProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** O header da coluna. Exige `columnSizingFeature` e `columnResizingFeature`. */\n    header: HeaderWith<\n      TFeatures,\n      TData,\n      'columnResizingFeature' | 'columnSizingFeature'\n    >;\n  }\n>;\n\n/**\n * Área de agarre para redimensionar uma coluna, sobre a linha vertical do fim do header (que\n * precisa ser `relative`). Arrastar redimensiona; duplo clique devolve a coluna ao tamanho\n * definido.\n *\n * A caixa tem largura zero, e a área de agarre é um `::before` transparente de 12px centrado na\n * linha, metade sobre a coluna vizinha; na última coluna e antes de uma fixada do fim, toda do\n * lado de dentro. No repouso não aparece; no hover e no arrasto, o handle vira a âncora da\n * linha-guia, que a `DataTable.ScrollArea` desenha na altura toda da tabela.\n * Quando a borda chega à beira de uma fixada do fim ou ao fim da área visível, a rolagem\n * acompanha o arrasto. Numa coluna que não redimensiona (`enableResizing: false`), não\n * renderiza.\n *\n * Durante o arrasto, o `InteractionShield` do `ui` cobre a página: nada, dentro ou fora da\n * tabela, reage ao ponteiro, o cursor de resize vale em toda parte, e o texto não é selecionado.\n * A roda do mouse, por cima dele, não rola a tabela.\n *\n * Exige `columnResizeMode: 'onChange'` na tabela. Com o padrão do TanStack, `'onEnd'`, o tamanho\n * só muda ao soltar: no arrasto nada anda na tela (nem a coluna, nem o handle, nem a guia), e a\n * coluna pula no fim.\n *\n * @example\n * ```tsx\n * const table = useTable({ features, columns, data, columnResizeMode: 'onChange' });\n *\n * <DataTable.HeaderCell header={header}>\n *   <DataTable.HeaderContent header={header} />\n *   <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n */\nexport const DataTableResizeHandle = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableResizeHandleProps<TFeatures, TData>,\n) => {\n  const { header, render, className, ref, ...rest } = props;\n\n  const handleRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * O atom do resize muda a cada tick do arrasto, mas o booleano só no começo e no fim: o handle\n   * re-renderiza duas vezes por arrasto, e só o da coluna arrastada.\n   */\n  const isResizing = useSelector(header.column.table.atoms.columnResizing, () =>\n    header.column.getIsResizing(),\n  );\n\n  useDataTableResizeScroll(header.column.table, isResizing, handleRef);\n\n  const onResizeStart = header.getResizeHandler();\n\n  /**\n   * O duplo clique pelo `detail` do `mousedown`, que conta os cliques, e não pelo `dblclick`: o\n   * arrasto começa no primeiro `mousedown`, o shield cobre o handle, e o `mouseup` cai nele. O\n   * navegador então não manda o `click` nem o `dblclick` ao handle.\n   */\n  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.detail === 2) {\n      header.column.resetSize();\n\n      return;\n    }\n\n    onResizeStart(event);\n  };\n\n  const baseProps = {\n    'data-component': 'DataTable.ResizeHandle',\n    'data-resizing': isResizing ? '' : undefined,\n    // Só ponteiro: sem resize por teclado, um `separator` prometeria teclas que não existem.\n    'aria-hidden': true,\n    onMouseDown: handleMouseDown,\n    onTouchStart: onResizeStart,\n    className: mergeTwClassNames(\n      [\n        // Sobre a linha vertical: o `right-0` é o fim do padding, e a borda de 1px que o\n        // `divide-x` põe na célula vem logo depois. A última da linha não tem borda, e o\n        // `right-px` põe o handle no mesmo ponto em relação ao fim dela. Antes de uma fixada do\n        // fim, a célula também perde a borda, mas a linha passa a ser a da fixada, logo depois:\n        // o `right-0` continua certo. Pela posição no DOM, com os seletores das bordas da\n        // `DataTable.HeaderRow`, o handle e a borda não têm como discordar.\n        'absolute',\n        'top-0',\n        'right-0',\n        'in-[[role=columnheader]:last-child]:right-px',\n        'z-10',\n\n        'h-full',\n\n        'cursor-col-resize',\n        // Com um menu aberto no gatilho da célula, o backdrop do Base UI deixa um recorte do\n        // tamanho do gatilho, e a metade de dentro da área de agarre cairia nele: o hover acenderia\n        // a linha-guia com o menu aberto.\n        'in-[[role=columnheader]:has([data-popup-open])]:pointer-events-none',\n        // Sem isto, o arrasto no toque rola a página em vez de redimensionar.\n        'touch-none',\n        'select-none',\n\n        // Área de agarre centrada na linha. Conteúdo recortado não recebe clique, então nada\n        // entre o handle e o header pode ter `overflow: hidden`.\n        'before:absolute',\n        'before:top-0',\n        'before:right-0',\n        'before:h-full',\n        'before:w-3',\n        'before:translate-x-1.5',\n        'before:content-[\"\"]',\n\n        // Onde a metade de fora não serve, os 12px ficam todos do lado de dentro. Na última da\n        // linha, ela passaria do fim da tabela e acenderia a barra de rolagem horizontal sem\n        // haver o que rolar; antes de uma fixada do fim, ficaria por baixo dela, sem pegar o\n        // clique.\n        'in-[[role=columnheader]:last-child]:before:translate-x-0',\n        'in-[[role=columnheader]:has(+[data-pinned=end])]:before:translate-x-0',\n\n        // A linha de 2px no cabeçalho, sobre a borda e 1px antes dela, no hover e no arrasto. Onde\n        // há anchor positioning, a linha-guia cobre esta no mesmo lugar e segue pelo corpo; sem\n        // ele, fica só esta.\n        'after:absolute',\n        'after:inset-y-0',\n        'after:left-0',\n        'after:w-0.5',\n        'after:-translate-x-1/2',\n        'after:content-[\"\"]',\n        'hover:after:bg-gray-9',\n        'data-resizing:after:bg-black',\n        'dark:data-resizing:after:bg-white',\n\n        // A âncora da linha-guia (ver `DataTable.ScrollArea`), no hover e no arrasto. Um nome só\n        // basta: no arrasto, o shield cobre os outros handles, e nenhum fica em hover junto com\n        // o arrastado. Com o nome repetido, a guia iria para o último.\n        'hover:[anchor-name:--data-table-resize-handle]',\n        'data-resizing:[anchor-name:--data-table-resize-handle]',\n      ],\n      className,\n    ),\n  };\n\n  const element = useRender({\n    render,\n    defaultTagName: 'div',\n    ref: [handleRef, ref ?? null],\n    props: mergeProps(baseProps, rest),\n  });\n\n  return header.column.getCanResize() ? (\n    <>\n      {element}\n      <InteractionShield\n        active={isResizing}\n        cursor=\"col-resize\"\n      />\n    </>\n  ) : null;\n};\n\nDataTableResizeHandle.displayName = 'DataTable.ResizeHandle';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,KAAK,GAAG,SAAS;CAEpD,MAAM,YAAY,OAAuB,IAAI;;;;;CAM7C,MAAM,aAAa,YAAY,OAAO,OAAO,MAAM,MAAM,sBACvD,OAAO,OAAO,cAAc,CAC9B;CAEA,yBAAyB,OAAO,OAAO,OAAO,YAAY,SAAS;CAEnE,MAAM,gBAAgB,OAAO,iBAAiB;;;;;;CAO9C,MAAM,mBAAmB,UAA4C;EACnE,IAAI,MAAM,WAAW,GAAG;GACtB,OAAO,OAAO,UAAU;GAExB;EACF;EAEA,cAAc,KAAK;CACrB;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EAEnC,eAAe;EACf,aAAa;EACb,cAAc;EACd,WAAW,kBACT;GAOE;GACA;GACA;GACA;GACA;GAEA;GAEA;GAIA;GAEA;GACA;GAIA;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAKA;GACA;EACF,GACA,SACF;CACF;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,KAAK,CAAC,WAAW,OAAO,IAAI;EAC5B,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,OAAO,OAAO,aAAa,IAChC,qBAAA,UAAA,EAAA,UAAA,CACG,SACD,oBAAC,mBAAD;EACE,QAAQ;EACR,QAAO;CACR,CAAA,CACD,EAAA,CAAA,IACA;AACN;AAEA,sBAAsB,cAAc"}

package/dist/components/data-table/root/{data-table-grid-classes.d.ts → data-table-grid-class-names.d.ts}

@@ -1,10 +1,10 @@
-//#region src/components/data-table/root/data-table-grid-classes.d.ts
+//#region src/components/data-table/root/data-table-grid-class-names.d.ts
 /**
  * A grade de uma linha, comum à `DataTable.Row`, à `DataTable.HeaderRow` e às linhas-fantasma do
  * `DataTable.Body`: o grid com o template das colunas, a linha vertical entre as células e a
  * horizontal embaixo. Num lugar só, para as três não divergirem; a regra da última linha fica em
  * cada uma.
  */
-export declare const DATA_TABLE_GRID_CLASS_NAMES: string[];
+export declare const dataTableGridClassNames: string[];
 //#endregion
-//# sourceMappingURL=data-table-grid-classes.d.ts.map
+//# sourceMappingURL=data-table-grid-class-names.d.ts.map

package/dist/components/data-table/root/data-table-grid-class-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-grid-class-names.d.ts","names":[],"sources":["../../../../src/components/data-table/root/data-table-grid-class-names.ts"],"mappings":";;;;;;;qBAMa"}

package/dist/components/data-table/root/{data-table-grid-classes.js → data-table-grid-class-names.js}

@@ -1,11 +1,11 @@
-//#region src/components/data-table/root/data-table-grid-classes.ts
+//#region src/components/data-table/root/data-table-grid-class-names.ts
 /**
 * A grade de uma linha, comum à `DataTable.Row`, à `DataTable.HeaderRow` e às linhas-fantasma do
 * `DataTable.Body`: o grid com o template das colunas, a linha vertical entre as células e a
 * horizontal embaixo. Num lugar só, para as três não divergirem; a regra da última linha fica em
 * cada uma.
 */
-const DATA_TABLE_GRID_CLASS_NAMES = [
+const dataTableGridClassNames = [
 	"grid",
 	"grid-cols-(--data-table-template)",
 	"divide-x",
@@ -17,6 +17,6 @@ const DATA_TABLE_GRID_CLASS_NAMES = [
 	"border-gray-6"
 ];
 //#endregion
-export { DATA_TABLE_GRID_CLASS_NAMES };
+export { dataTableGridClassNames };
 
-//# sourceMappingURL=data-table-grid-classes.js.map
+//# sourceMappingURL=data-table-grid-class-names.js.map

package/dist/components/data-table/root/data-table-grid-class-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-grid-class-names.js","names":[],"sources":["../../../../src/components/data-table/root/data-table-grid-class-names.ts"],"sourcesContent":["/**\n * A grade de uma linha, comum à `DataTable.Row`, à `DataTable.HeaderRow` e às linhas-fantasma do\n * `DataTable.Body`: o grid com o template das colunas, a linha vertical entre as células e a\n * horizontal embaixo. Num lugar só, para as três não divergirem; a regra da última linha fica em\n * cada uma.\n */\nexport const dataTableGridClassNames = [\n  'grid',\n  'grid-cols-(--data-table-template)',\n\n  // Linha vertical entre as células: o `divide-x` põe borda no fim de cada filho, menos no\n  // último, e assim a linha não tem borda na ponta direita. Fica na linha, e não na célula, para\n  // a célula não precisar saber se é a última.\n  'divide-x',\n  'divide-gray-6',\n  // Na fixada do fim, a linha vertical fica do lado do início, e a célula antes dela perde a do\n  // fim: o centro rola por baixo e levaria a borda junto, e as duas somariam 2px quando encostam.\n  '*:data-[pinned=end]:border-s',\n  '*:data-[pinned=end]:border-gray-6',\n  '*:has-[+[data-pinned=end]]:border-e-0',\n\n  // Linha horizontal embaixo da linha.\n  'border-b',\n  'border-gray-6',\n];\n"],"mappings":";;;;;;;AAMA,MAAa,0BAA0B;CACrC;CACA;CAKA;CACA;CAGA;CACA;CACA;CAGA;CACA;AACF"}

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

@@ -49,13 +49,13 @@ const DataTableRoot = (props) => {
 			"w-(--data-table-width)",
 			"data-[density=compact]:[--data-table-header-height:--spacing(7)]",
 			"data-[density=compact]:[--data-table-row-height:--spacing(8)]",
-			"data-[density=compact]:[--data-table-cell-padding:--spacing(1.5)]",
+			"data-[density=compact]:[--data-table-cell-padding:--spacing(1)]",
 			"[--data-table-header-height:--spacing(8)]",
-			"[--data-table-row-height:--spacing(10)]",
+			"[--data-table-row-height:--spacing(9)]",
 			"[--data-table-cell-padding:--spacing(2)]",
-			"data-[density=comfortable]:[--data-table-header-height:--spacing(10)]",
-			"data-[density=comfortable]:[--data-table-row-height:--spacing(12)]",
-			"data-[density=comfortable]:[--data-table-cell-padding:--spacing(3)]"
+			"data-[density=airy]:[--data-table-header-height:--spacing(9)]",
+			"data-[density=airy]:[--data-table-row-height:--spacing(10)]",
+			"data-[density=airy]:[--data-table-cell-padding:--spacing(3)]"
 		], className)
 	};
 	return useRender({