@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

package/dist/components/column-menu/column-menu-popup.js

@@ -0,0 +1,67 @@
+import { hasColumnFeature } from "../../utils/has-feature.js";
+import { ColumnMenuHideItem } from "./column-menu-hide-item.js";
+import { ColumnMenuPinItems } from "./column-menu-pin-items.js";
+import { ColumnMenuSortItems } from "./column-menu-sort-items.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { mergeStateClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1 } from "react";
+//#region src/components/column-menu/column-menu-popup.tsx
+/**
+* A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o
+* `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o
+* menu cresceria quando o "Remover ordenação" aparece.
+*
+* Sem `children`, mostra os grupos padrão separados por linhas: ordenação
+* (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade
+* (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na
+* coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens
+* próprios com o `Menu.Item`. Os grupos recebem a coluna, e não o header: servem também fora
+* dele, como no `ColumnsPanel.Item`.
+*
+* @example
+* ```tsx
+* <ColumnMenu.Popup header={header}>
+*   <ColumnMenu.SortItems column={header.column} />
+*   <Menu.Separator />
+*   <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>
+* </ColumnMenu.Popup>
+* ```
+*/
+const ColumnMenuPopup = (props) => {
+	const { header, labels, positionerProps, className, children, ...rest } = props;
+	/**
+	* Os grupos padrão que a coluna aceita. A conta é feita aqui, e não pelo `null` de cada grupo,
+	* para a linha separar só os grupos que aparecem.
+	*/
+	const groups = [
+		hasColumnFeature(header.column, "rowSortingFeature") && header.column.getCanSort() && /* @__PURE__ */ jsx(ColumnMenuSortItems, {
+			column: header.column,
+			labels
+		}, "sort"),
+		hasColumnFeature(header.column, "columnPinningFeature") && header.column.getCanPin() && /* @__PURE__ */ jsx(ColumnMenuPinItems, {
+			column: header.column,
+			labels
+		}, "pin"),
+		hasColumnFeature(header.column, "columnVisibilityFeature") && header.column.getCanHide() && /* @__PURE__ */ jsx(ColumnMenuHideItem, {
+			column: header.column,
+			labels
+		}, "hide")
+	].filter((group) => group !== false);
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		sideOffset: 0,
+		disableAnchorTracking: true,
+		...positionerProps,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-component": "ColumnMenu.Popup",
+			className: mergeStateClassNames(["min-w-48"], className),
+			...rest,
+			children: children ?? groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}), group] }, group.key))
+		})
+	}) });
+};
+ColumnMenuPopup.displayName = "ColumnMenu.Popup";
+//#endregion
+export { ColumnMenuPopup };
+
+//# sourceMappingURL=column-menu-popup.js.map

package/dist/components/column-menu/column-menu-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-popup.js","names":["Fragment"],"sources":["../../../src/components/column-menu/column-menu-popup.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeStateClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { Fragment } from 'react';\nimport { hasColumnFeature } from '../../utils';\nimport { ColumnMenuHideItem } from './column-menu-hide-item';\nimport type { ColumnMenuLabels } from './column-menu-labels';\nimport { ColumnMenuPinItems } from './column-menu-pin-items';\nimport { ColumnMenuSortItems } from './column-menu-sort-items';\n\nexport type ColumnMenuPopupProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Menu.PopupProps,\n  {\n    /** O header da coluna. */\n    header: Header<TFeatures, TData>;\n    /** O texto dos itens padrão; os que faltam ficam com o padrão. Sem efeito com `children`. */\n    labels?: Partial<ColumnMenuLabels>;\n    /** As props do `Menu.Positioner`, como `side` e `align`. */\n    positionerProps?: Menu.PositionerProps;\n  }\n>;\n\n/**\n * A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o\n * `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o\n * menu cresceria quando o \"Remover ordenação\" aparece.\n *\n * Sem `children`, mostra os grupos padrão separados por linhas: ordenação\n * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade\n * (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na\n * coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens\n * próprios com o `Menu.Item`. Os grupos recebem a coluna, e não o header: servem também fora\n * dele, como no `ColumnsPanel.Item`.\n *\n * @example\n * ```tsx\n * <ColumnMenu.Popup header={header}>\n *   <ColumnMenu.SortItems column={header.column} />\n *   <Menu.Separator />\n *   <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>\n * </ColumnMenu.Popup>\n * ```\n */\nexport const ColumnMenuPopup = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnMenuPopupProps<TFeatures, TData>,\n) => {\n  const { header, labels, positionerProps, className, children, ...rest } =\n    props;\n\n  /**\n   * Os grupos padrão que a coluna aceita. A conta é feita aqui, e não pelo `null` de cada grupo,\n   * para a linha separar só os grupos que aparecem.\n   */\n  const groups = [\n    hasColumnFeature(header.column, 'rowSortingFeature') &&\n      header.column.getCanSort() && (\n        <ColumnMenuSortItems\n          key=\"sort\"\n          column={header.column}\n          labels={labels}\n        />\n      ),\n    hasColumnFeature(header.column, 'columnPinningFeature') &&\n      header.column.getCanPin() && (\n        <ColumnMenuPinItems\n          key=\"pin\"\n          column={header.column}\n          labels={labels}\n        />\n      ),\n    hasColumnFeature(header.column, 'columnVisibilityFeature') &&\n      header.column.getCanHide() && (\n        <ColumnMenuHideItem\n          key=\"hide\"\n          column={header.column}\n          labels={labels}\n        />\n      ),\n  ].filter((group) => group !== false);\n\n  return (\n    <Menu.Portal>\n      <Menu.Positioner\n        sideOffset={0}\n        // Fixar ou mover a coluna leva o header para outro lugar enquanto o menu fecha: seguindo o\n        // trigger, o menu deslizaria até lá na animação de saída. A rolagem continua acompanhada.\n        disableAnchorTracking={true}\n        {...positionerProps}\n      >\n        <Menu.Popup\n          data-component=\"ColumnMenu.Popup\"\n          className={mergeStateClassNames(['min-w-48'], className)}\n          {...rest}\n        >\n          {children ??\n            groups.map((group, index) => (\n              <Fragment key={group.key}>\n                {index > 0 && <Menu.Separator />}\n                {group}\n              </Fragment>\n            ))}\n        </Menu.Popup>\n      </Menu.Positioner>\n    </Menu.Portal>\n  );\n};\n\nColumnMenuPopup.displayName = 'ColumnMenu.Popup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,iBAAiB,WAAW,UAAU,GAAG,SAC/D;;;;;CAMF,MAAM,SAAS;EACb,iBAAiB,OAAO,QAAQ,mBAAmB,KACjD,OAAO,OAAO,WAAW,KACvB,oBAAC,qBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,MAGL;EAEL,iBAAiB,OAAO,QAAQ,sBAAsB,KACpD,OAAO,OAAO,UAAU,KACtB,oBAAC,oBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,KAGL;EAEL,iBAAiB,OAAO,QAAQ,yBAAyB,KACvD,OAAO,OAAO,WAAW,KACvB,oBAAC,oBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,MAGL;CAEP,CAAC,CAAC,QAAQ,UAAU,UAAU,KAAK;CAEnC,OACE,oBAAC,KAAK,QAAN,EAAA,UACE,oBAAC,KAAK,YAAN;EACE,YAAY;EAGZ,uBAAuB;EACvB,GAAI;EAEJ,UAAA,oBAAC,KAAK,OAAN;GACE,kBAAe;GACf,WAAW,qBAAqB,CAAC,UAAU,GAAG,SAAS;GACvD,GAAI;GAEH,UAAA,YACC,OAAO,KAAK,OAAO,UACjB,qBAACA,YAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,KAAK,WAAN,CAAiB,CAAA,GAC9B,KACO,EAAA,GAHK,MAAM,GAGX,CACX;EACO,CAAA;CACG,CAAA,EACN,CAAA;AAEjB;AAEA,gBAAgB,cAAc"}

package/dist/components/column-menu/column-menu-root.d.ts

@@ -0,0 +1,34 @@
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+//#region src/components/column-menu/column-menu-root.d.ts
+export type ColumnMenuRootProps<Payload = unknown> = Menu.RootProps<Payload>;
+/**
+ * O estado do menu da coluna: o `Menu.Root` do `ui`, para o menu inteiro sair do mesmo namespace.
+ * Não renderiza elemento.
+ *
+ * Vai dentro da `DataTable.HeaderCell`, no lugar do `DataTable.SortTrigger`: numa coluna com
+ * menu, o clique no header abre o menu, e a ordenação passa para os itens dele.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Header table={table}>
+ *   {(header) => (
+ *     <DataTable.HeaderCell header={header}>
+ *       <ColumnMenu.Root>
+ *         <ColumnMenu.Trigger header={header}>
+ *           <DataTable.HeaderContent header={header} />
+ *           <DataTable.SortIndicator header={header} />
+ *         </ColumnMenu.Trigger>
+ *         <ColumnMenu.Popup header={header} />
+ *       </ColumnMenu.Root>
+ *       <DataTable.ResizeHandle header={header} />
+ *     </DataTable.HeaderCell>
+ *   )}
+ * </DataTable.Header>
+ * ```
+ */
+export declare const ColumnMenuRoot: {
+  <Payload extends unknown = unknown>(props: ColumnMenuRootProps<Payload>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-root.d.ts.map

package/dist/components/column-menu/column-menu-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-root.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-root.tsx"],"mappings":";;YAGY,oBAAoB,qBAAqB,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2BvD;GAAkB,mCAAO,OAC7B,oBAAoB,2BAAQ,IAAA"}

package/dist/components/column-menu/column-menu-root.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+//#region src/components/column-menu/column-menu-root.tsx
+/**
+* O estado do menu da coluna: o `Menu.Root` do `ui`, para o menu inteiro sair do mesmo namespace.
+* Não renderiza elemento.
+*
+* Vai dentro da `DataTable.HeaderCell`, no lugar do `DataTable.SortTrigger`: numa coluna com
+* menu, o clique no header abre o menu, e a ordenação passa para os itens dele.
+*
+* @example
+* ```tsx
+* <DataTable.Header table={table}>
+*   {(header) => (
+*     <DataTable.HeaderCell header={header}>
+*       <ColumnMenu.Root>
+*         <ColumnMenu.Trigger header={header}>
+*           <DataTable.HeaderContent header={header} />
+*           <DataTable.SortIndicator header={header} />
+*         </ColumnMenu.Trigger>
+*         <ColumnMenu.Popup header={header} />
+*       </ColumnMenu.Root>
+*       <DataTable.ResizeHandle header={header} />
+*     </DataTable.HeaderCell>
+*   )}
+* </DataTable.Header>
+* ```
+*/
+const ColumnMenuRoot = (props) => {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+};
+ColumnMenuRoot.displayName = "ColumnMenu.Root";
+//#endregion
+export { ColumnMenuRoot };
+
+//# sourceMappingURL=column-menu-root.js.map

package/dist/components/column-menu/column-menu-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-root.js","names":[],"sources":["../../../src/components/column-menu/column-menu-root.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { AnyType } from '@lucasbernardosn/utils';\n\nexport type ColumnMenuRootProps<Payload = unknown> = Menu.RootProps<Payload>;\n\n/**\n * O estado do menu da coluna: o `Menu.Root` do `ui`, para o menu inteiro sair do mesmo namespace.\n * Não renderiza elemento.\n *\n * Vai dentro da `DataTable.HeaderCell`, no lugar do `DataTable.SortTrigger`: numa coluna com\n * menu, o clique no header abre o menu, e a ordenação passa para os itens dele.\n *\n * @example\n * ```tsx\n * <DataTable.Header table={table}>\n *   {(header) => (\n *     <DataTable.HeaderCell header={header}>\n *       <ColumnMenu.Root>\n *         <ColumnMenu.Trigger header={header}>\n *           <DataTable.HeaderContent header={header} />\n *           <DataTable.SortIndicator header={header} />\n *         </ColumnMenu.Trigger>\n *         <ColumnMenu.Popup header={header} />\n *       </ColumnMenu.Root>\n *       <DataTable.ResizeHandle header={header} />\n *     </DataTable.HeaderCell>\n *   )}\n * </DataTable.Header>\n * ```\n */\nexport const ColumnMenuRoot = <Payload extends AnyType = unknown>(\n  props: ColumnMenuRootProps<Payload>,\n) => {\n  return <Menu.Root<Payload> {...props} />;\n};\n\nColumnMenuRoot.displayName = 'ColumnMenu.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,kBACX,UACG;CACH,OAAO,oBAAC,KAAK,MAAN,EAAoB,GAAI,MAAQ,CAAA;AACzC;AAEA,eAAe,cAAc"}

package/dist/components/column-menu/column-menu-sort-items.d.ts

@@ -0,0 +1,30 @@
+import { ColumnWith } from "../../types/table-with.js";
+import "../../types/index.js";
+import { ColumnMenuLabels } from "./column-menu-labels.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/column-menu/column-menu-sort-items.d.ts
+export type ColumnMenuSortItemsProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.GroupProps, {
+  /** A coluna. Exige `rowSortingFeature`. */
+  column: ColumnWith<TFeatures, TData, 'rowSortingFeature'>;
+  /** O texto dos itens; os que faltam ficam com o padrão. */
+  labels?: Partial<ColumnMenuLabels>;
+}>;
+/**
+ * Os itens da ordenação: crescente e decrescente, com um check na direção atual, e "Remover
+ * ordenação" com a coluna ordenada. Com `enableSortingRemoval: false` na tabela, que deixa a
+ * lista sempre ordenada, o "Remover ordenação" não aparece. O item troca a ordenação inteira por esta coluna; com Shift
+ * (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o
+ * `DataTable.SortTrigger`.
+ *
+ * O check é só visual: a direção chega ao leitor de tela pelo `aria-sort` da
+ * `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.
+ */
+export declare const ColumnMenuSortItems: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuSortItemsProps<TFeatures, TData>): React.JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-sort-items.d.ts.map

package/dist/components/column-menu/column-menu-sort-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-sort-items.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-sort-items.tsx"],"mappings":";;;;;;;;YAcY,yBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,WAAW,WAAW;;EAE9B,SAAS,QAAQ;;;;;;;;;;;;qBAcR;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,yBAAyB,WAAW,SAAM,MAAA,IAAA"}

package/dist/components/column-menu/column-menu-sort-items.js

@@ -0,0 +1,62 @@
+import { ColumnMenuCheck } from "./column-menu-check.js";
+import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
+import { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { useSelector } from "@tanstack/react-store";
+//#region src/components/column-menu/column-menu-sort-items.tsx
+/**
+* Os itens da ordenação: crescente e decrescente, com um check na direção atual, e "Remover
+* ordenação" com a coluna ordenada. Com `enableSortingRemoval: false` na tabela, que deixa a
+* lista sempre ordenada, o "Remover ordenação" não aparece. O item troca a ordenação inteira por esta coluna; com Shift
+* (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o
+* `DataTable.SortTrigger`.
+*
+* O check é só visual: a direção chega ao leitor de tela pelo `aria-sort` da
+* `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.
+*/
+const ColumnMenuSortItems = (props) => {
+	const { column, labels, ...rest } = props;
+	/** Re-renderiza quando a direção desta coluna muda. */
+	const sorted = useSelector(column.table.atoms.sorting, () => column.getIsSorted());
+	if (!column.getCanSort()) return null;
+	const canRemoveSorting = column.table.options.enableSortingRemoval !== false;
+	const getLabel = (key) => labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];
+	/** O mesmo critério do clique no header para somar a coluna à ordenação múltipla. */
+	const toggleSorting = (isDesc, event) => {
+		const isMulti = column.getCanMultiSort() && (column.table.options.isMultiSortEvent?.(event) ?? false);
+		column.toggleSorting(isDesc, isMulti);
+	};
+	return /* @__PURE__ */ jsxs(Menu.Group, {
+		"data-component": "ColumnMenu.SortItems",
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: (event) => toggleSorting(false, event),
+				children: [
+					/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CaretUpIcon, {}) }),
+					getLabel("sortAsc"),
+					sorted === "asc" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: (event) => toggleSorting(true, event),
+				children: [
+					/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CaretDownIcon, {}) }),
+					getLabel("sortDesc"),
+					sorted === "desc" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
+				]
+			}),
+			sorted && canRemoveSorting && /* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: () => column.clearSorting(),
+				children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(XIcon, {}) }), getLabel("clearSorting")]
+			})
+		]
+	});
+};
+ColumnMenuSortItems.displayName = "ColumnMenu.SortItems";
+//#endregion
+export { ColumnMenuSortItems };
+
+//# sourceMappingURL=column-menu-sort-items.js.map

package/dist/components/column-menu/column-menu-sort-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-sort-items.js","names":[],"sources":["../../../src/components/column-menu/column-menu-sort-items.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { CaretDownIcon, CaretUpIcon, XIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { ColumnWith } from '../../types';\nimport { ColumnMenuCheck } from './column-menu-check';\nimport {\n  COLUMN_MENU_DEFAULT_LABELS,\n  type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuSortItemsProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Menu.GroupProps,\n  {\n    /** A coluna. Exige `rowSortingFeature`. */\n    column: ColumnWith<TFeatures, TData, 'rowSortingFeature'>;\n    /** O texto dos itens; os que faltam ficam com o padrão. */\n    labels?: Partial<ColumnMenuLabels>;\n  }\n>;\n\n/**\n * Os itens da ordenação: crescente e decrescente, com um check na direção atual, e \"Remover\n * ordenação\" com a coluna ordenada. Com `enableSortingRemoval: false` na tabela, que deixa a\n * lista sempre ordenada, o \"Remover ordenação\" não aparece. O item troca a ordenação inteira por esta coluna; com Shift\n * (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o\n * `DataTable.SortTrigger`.\n *\n * O check é só visual: a direção chega ao leitor de tela pelo `aria-sort` da\n * `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.\n */\nexport const ColumnMenuSortItems = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnMenuSortItemsProps<TFeatures, TData>,\n) => {\n  const { column, labels, ...rest } = props;\n\n  /** Re-renderiza quando a direção desta coluna muda. */\n  const sorted = useSelector(column.table.atoms.sorting, () =>\n    column.getIsSorted(),\n  );\n\n  if (!column.getCanSort()) {\n    return null;\n  }\n\n  const canRemoveSorting = column.table.options.enableSortingRemoval !== false;\n\n  const getLabel = (key: keyof ColumnMenuLabels) =>\n    labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];\n\n  /** O mesmo critério do clique no header para somar a coluna à ordenação múltipla. */\n  const toggleSorting = (isDesc: boolean, event: React.MouseEvent) => {\n    const isMulti =\n      column.getCanMultiSort() &&\n      (column.table.options.isMultiSortEvent?.(event) ?? false);\n\n    column.toggleSorting(isDesc, isMulti);\n  };\n\n  return (\n    <Menu.Group\n      data-component=\"ColumnMenu.SortItems\"\n      {...rest}\n    >\n      <Menu.Item onClick={(event) => toggleSorting(false, event)}>\n        <Icon render={<CaretUpIcon />} />\n        {getLabel('sortAsc')}\n        {sorted === 'asc' && <ColumnMenuCheck />}\n      </Menu.Item>\n\n      <Menu.Item onClick={(event) => toggleSorting(true, event)}>\n        <Icon render={<CaretDownIcon />} />\n        {getLabel('sortDesc')}\n        {sorted === 'desc' && <ColumnMenuCheck />}\n      </Menu.Item>\n\n      {sorted && canRemoveSorting && (\n        <Menu.Item onClick={() => column.clearSorting()}>\n          <Icon render={<XIcon />} />\n          {getLabel('clearSorting')}\n        </Menu.Item>\n      )}\n    </Menu.Group>\n  );\n};\n\nColumnMenuSortItems.displayName = 'ColumnMenu.SortItems';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,GAAG,SAAS;;CAGpC,MAAM,SAAS,YAAY,OAAO,MAAM,MAAM,eAC5C,OAAO,YAAY,CACrB;CAEA,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO;CAGT,MAAM,mBAAmB,OAAO,MAAM,QAAQ,yBAAyB;CAEvE,MAAM,YAAY,QAChB,SAAS,QAAQ,2BAA2B;;CAG9C,MAAM,iBAAiB,QAAiB,UAA4B;EAClE,MAAM,UACJ,OAAO,gBAAgB,MACtB,OAAO,MAAM,QAAQ,mBAAmB,KAAK,KAAK;EAErD,OAAO,cAAc,QAAQ,OAAO;CACtC;CAEA,OACE,qBAAC,KAAK,OAAN;EACE,kBAAe;EACf,GAAI;EAFN,UAAA;GAIE,qBAAC,KAAK,MAAN;IAAW,UAAU,UAAU,cAAc,OAAO,KAAK;IAAzD,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,SAAS;KAClB,WAAW,SAAS,oBAAC,iBAAD,CAAkB,CAAA;IAC9B;;GAEX,qBAAC,KAAK,MAAN;IAAW,UAAU,UAAU,cAAc,MAAM,KAAK;IAAxD,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA;KACjC,SAAS,UAAU;KACnB,WAAW,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC/B;;GAEV,UAAU,oBACT,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,aAAa;IAA9C,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,OAAD,CAAQ,CAAA,EAAI,CAAA,GACzB,SAAS,cAAc,CACf;;EAEH;;AAEhB;AAEA,oBAAoB,cAAc"}

package/dist/components/column-menu/column-menu-trigger.d.ts

@@ -0,0 +1,23 @@
+import { Header, RowData, TableFeatures } from "@tanstack/react-table";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/column-menu/column-menu-trigger.d.ts
+export type ColumnMenuTriggerProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.TriggerProps, {
+  /** O header da coluna. */
+  header: Header<TFeatures, TData>;
+}>;
+/**
+ * O botão que abre o menu da coluna: o `DataTable.HeaderButton`, do tamanho da célula do header,
+ * com o `Menu.Trigger`. Os filhos são o que ele mostra, em geral o `DataTable.HeaderContent` e o
+ * `DataTable.SortIndicator`.
+ *
+ * Com `rowSortingFeature`, marca a direção em `data-sorted` e, numa coluna `align: 'end'`,
+ * inverte a ordem dos filhos, como o `DataTable.SortTrigger`. Enquanto o menu está aberto, o
+ * fundo fica no do hover.
+ */
+export declare const ColumnMenuTrigger: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuTriggerProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-trigger.d.ts.map

package/dist/components/column-menu/column-menu-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-trigger.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-trigger.tsx"],"mappings":";;;;YASY,uBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,OAAO,WAAW;;;;;;;;;;;qBAajB;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,uBAAuB,WAAW,yBAAM,IAAA"}

package/dist/components/column-menu/column-menu-trigger.js

@@ -0,0 +1,38 @@
+import { hasHeaderFeature } from "../../utils/has-feature.js";
+import { DataTableHeaderButton } from "../data-table/header/data-table-header-button.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { useSelector } from "@tanstack/react-store";
+import { mergeStateClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/column-menu/column-menu-trigger.tsx
+/**
+* O botão que abre o menu da coluna: o `DataTable.HeaderButton`, do tamanho da célula do header,
+* com o `Menu.Trigger`. Os filhos são o que ele mostra, em geral o `DataTable.HeaderContent` e o
+* `DataTable.SortIndicator`.
+*
+* Com `rowSortingFeature`, marca a direção em `data-sorted` e, numa coluna `align: 'end'`,
+* inverte a ordem dos filhos, como o `DataTable.SortTrigger`. Enquanto o menu está aberto, o
+* fundo fica no do hover.
+*/
+const ColumnMenuTrigger = (props) => {
+	const { header, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "ColumnMenu.Trigger",
+		"data-sorted": useSelector(header.column.table.store, () => hasHeaderFeature(header, "rowSortingFeature") ? header.column.getIsSorted() : false) || void 0,
+		className: mergeStateClassNames([
+			"in-data-[align=end]:flex-row-reverse",
+			"data-sorted:text-gray-12",
+			"data-popup-open:bg-gray-3"
+		], className)
+	};
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		render: /* @__PURE__ */ jsx(DataTableHeaderButton, {}),
+		...mergeProps(baseProps, rest)
+	});
+};
+ColumnMenuTrigger.displayName = "ColumnMenu.Trigger";
+//#endregion
+export { ColumnMenuTrigger };
+
+//# sourceMappingURL=column-menu-trigger.js.map

package/dist/components/column-menu/column-menu-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-trigger.js","names":[],"sources":["../../../src/components/column-menu/column-menu-trigger.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeStateClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { hasHeaderFeature } from '../../utils';\nimport { DataTableHeaderButton } from '../data-table/header/data-table-header-button';\n\nexport type ColumnMenuTriggerProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Menu.TriggerProps,\n  {\n    /** O header da coluna. */\n    header: Header<TFeatures, TData>;\n  }\n>;\n\n/**\n * O botão que abre o menu da coluna: o `DataTable.HeaderButton`, do tamanho da célula do header,\n * com o `Menu.Trigger`. Os filhos são o que ele mostra, em geral o `DataTable.HeaderContent` e o\n * `DataTable.SortIndicator`.\n *\n * Com `rowSortingFeature`, marca a direção em `data-sorted` e, numa coluna `align: 'end'`,\n * inverte a ordem dos filhos, como o `DataTable.SortTrigger`. Enquanto o menu está aberto, o\n * fundo fica no do hover.\n */\nexport const ColumnMenuTrigger = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnMenuTriggerProps<TFeatures, TData>,\n) => {\n  const { header, className, ...rest } = props;\n\n  /**\n   * Re-renderiza quando a direção desta coluna muda. A ordenação é opcional, então assina o\n   * store.\n   */\n  const sorted = useSelector(header.column.table.store, () =>\n    hasHeaderFeature(header, 'rowSortingFeature')\n      ? header.column.getIsSorted()\n      : false,\n  );\n\n  const baseProps = {\n    'data-component': 'ColumnMenu.Trigger',\n    'data-sorted': sorted || undefined,\n    className: mergeStateClassNames(\n      [\n        // Os mesmos do `DataTable.SortTrigger`, onde estão explicados.\n        'in-data-[align=end]:flex-row-reverse',\n        'data-sorted:text-gray-12',\n\n        'data-popup-open:bg-gray-3',\n      ],\n      className,\n    ),\n  };\n\n  return (\n    <Menu.Trigger\n      render={<DataTableHeaderButton />}\n      {...mergeProps(baseProps, rest)}\n    />\n  );\n};\n\nColumnMenuTrigger.displayName = 'ColumnMenu.Trigger';\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAa,qBAIX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAYvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eARa,YAAY,OAAO,OAAO,MAAM,aAC7C,iBAAiB,QAAQ,mBAAmB,IACxC,OAAO,OAAO,YAAY,IAC1B,KAKgB,KAAK,KAAA;EACzB,WAAW,qBACT;GAEE;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OACE,oBAAC,KAAK,SAAN;EACE,QAAQ,oBAAC,uBAAD,CAAwB,CAAA;EAChC,GAAI,WAAW,WAAW,IAAI;CAC/B,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/components/column-menu/index.d.ts

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

package/dist/components/column-menu/index.js

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

package/dist/components/column-menu/index.parts.d.ts

@@ -0,0 +1,13 @@
+import { ColumnMenuLabels } from "./column-menu-labels.js";
+import { ColumnMenuHideItem, ColumnMenuHideItemProps } from "./column-menu-hide-item.js";
+import { ColumnMenuPinItems, ColumnMenuPinItemsProps } from "./column-menu-pin-items.js";
+import { ColumnMenuPopup, ColumnMenuPopupProps } from "./column-menu-popup.js";
+import { ColumnMenuRoot, ColumnMenuRootProps } from "./column-menu-root.js";
+import { ColumnMenuSortItems, ColumnMenuSortItemsProps } from "./column-menu-sort-items.js";
+import { ColumnMenuTrigger, ColumnMenuTriggerProps } from "./column-menu-trigger.js";
+declare namespace index_parts_d_exports {
+  export { ColumnMenuHideItem as HideItem, ColumnMenuHideItemProps as HideItemProps, ColumnMenuLabels as Labels, ColumnMenuPinItems as PinItems, ColumnMenuPinItemsProps as PinItemsProps, ColumnMenuPopup as Popup, ColumnMenuPopupProps as PopupProps, ColumnMenuRoot as Root, ColumnMenuRootProps as RootProps, ColumnMenuSortItems as SortItems, ColumnMenuSortItemsProps as SortItemsProps, ColumnMenuTrigger as Trigger, ColumnMenuTriggerProps as TriggerProps };
+}
+//#endregion
+export { ColumnMenuHideItem as HideItem, type ColumnMenuHideItemProps as HideItemProps, type ColumnMenuLabels as Labels, ColumnMenuPinItems as PinItems, type ColumnMenuPinItemsProps as PinItemsProps, ColumnMenuPopup as Popup, type ColumnMenuPopupProps as PopupProps, ColumnMenuRoot as Root, type ColumnMenuRootProps as RootProps, ColumnMenuSortItems as SortItems, type ColumnMenuSortItemsProps as SortItemsProps, ColumnMenuTrigger as Trigger, type ColumnMenuTriggerProps as TriggerProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/column-menu/index.parts.d.ts.map

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

package/dist/components/column-menu/index.parts.js

@@ -0,0 +1,20 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ColumnMenuHideItem } from "./column-menu-hide-item.js";
+import { ColumnMenuPinItems } from "./column-menu-pin-items.js";
+import { ColumnMenuSortItems } from "./column-menu-sort-items.js";
+import { ColumnMenuPopup } from "./column-menu-popup.js";
+import { ColumnMenuRoot } from "./column-menu-root.js";
+import { ColumnMenuTrigger } from "./column-menu-trigger.js";
+//#region src/components/column-menu/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	HideItem: () => ColumnMenuHideItem,
+	PinItems: () => ColumnMenuPinItems,
+	Popup: () => ColumnMenuPopup,
+	Root: () => ColumnMenuRoot,
+	SortItems: () => ColumnMenuSortItems,
+	Trigger: () => ColumnMenuTrigger
+});
+//#endregion
+export { ColumnMenuHideItem as HideItem, ColumnMenuPinItems as PinItems, ColumnMenuPopup as Popup, ColumnMenuRoot as Root, ColumnMenuSortItems as SortItems, ColumnMenuTrigger as Trigger, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/column-menu/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../src/components/column-menu/index.parts.ts"],"sourcesContent":["export { ColumnMenuHideItem as HideItem } from './column-menu-hide-item';\nexport { ColumnMenuPinItems as PinItems } from './column-menu-pin-items';\nexport { ColumnMenuPopup as Popup } from './column-menu-popup';\nexport { ColumnMenuRoot as Root } from './column-menu-root';\nexport { ColumnMenuSortItems as SortItems } from './column-menu-sort-items';\nexport { ColumnMenuTrigger as Trigger } from './column-menu-trigger';\n\n/* types */\n\nexport type { ColumnMenuHideItemProps as HideItemProps } from './column-menu-hide-item';\nexport type { ColumnMenuLabels as Labels } from './column-menu-labels';\nexport type { ColumnMenuPinItemsProps as PinItemsProps } from './column-menu-pin-items';\nexport type { ColumnMenuPopupProps as PopupProps } from './column-menu-popup';\nexport type { ColumnMenuRootProps as RootProps } from './column-menu-root';\nexport type { ColumnMenuSortItemsProps as SortItemsProps } from './column-menu-sort-items';\nexport type { ColumnMenuTriggerProps as TriggerProps } from './column-menu-trigger';\n"],"mappings":""}

package/dist/components/columns-panel/columns-panel-item.d.ts

@@ -0,0 +1,34 @@
+import { ColumnWith } from "../../types/table-with.js";
+import "../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/columns-panel/columns-panel-item.d.ts
+export type ColumnsPanelItemProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'li'>, {
+  /** A coluna. Exige `columnVisibilityFeature`. */
+  column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;
+  /** A posição da coluna no grupo dela (fixadas no início, centro ou fixadas no fim). */
+  index: number;
+  /**
+   * O nome da coluna.
+   * @default getDefaultColumnLabel(column): o `header` quando é texto, e o id quando não é
+   */
+  label?: string;
+}>;
+/**
+ * Uma coluna no `ColumnsPanel.Root`: o checkbox de visibilidade, o nome e, à direita, a alça de
+ * 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`, 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.
+ */
+export declare const ColumnsPanelItem: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnsPanelItemProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=columns-panel-item.d.ts.map

package/dist/components/columns-panel/columns-panel-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns-panel-item.d.ts","names":[],"sources":["../../../src/components/columns-panel/columns-panel-item.tsx"],"mappings":";;;;;;YAcY,sBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,QAAQ,WAAW,WAAW;;EAE9B;;;;;EAKA;;;;;;;;;;;;;qBAeS;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,sBAAsB,WAAW,yBAAM,+CAAA"}

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

@@ -0,0 +1,109 @@
+import { getDefaultColumnLabel } from "../../utils/get-default-column-label.js";
+import { hasColumnFeature } from "../../utils/has-feature.js";
+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";
+import { IconButton } from "@lucasbernardosn/react-ui/buttons/icon-button";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+//#region src/components/columns-panel/columns-panel-item.tsx
+/**
+* Uma coluna no `ColumnsPanel.Root`: o checkbox de visibilidade, o nome e, à direita, a alça de
+* 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`, 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;
+	/** Re-renderiza quando esta coluna aparece ou some. */
+	const isVisible = useSelector(column.table.atoms.columnVisibility, () => column.getIsVisible());
+	/**
+	* Re-renderiza quando esta coluna é fixada ou solta. O pinning é opcional, então assina o
+	* store.
+	*/
+	const pinned = useSelector(column.table.store, () => hasColumnFeature(column, "columnPinningFeature") ? column.getIsPinned() : false);
+	const columnLabel = label ?? getDefaultColumnLabel(column);
+	/** O grupo separa as regiões: o arrasto não leva uma coluna do centro para as fixadas. */
+	const sortable = useSortable({
+		id: column.id,
+		index,
+		group: pinned || "center",
+		disabled: pinned !== false
+	});
+	const baseProps = {
+		"data-component": "ColumnsPanel.Item",
+		"data-dragging": sortable.isDragging ? "" : void 0,
+		"data-pinned": pinned || void 0,
+		className: mergeTwClassNames([
+			"flex",
+			"h-8",
+			"items-center",
+			"gap-2",
+			"rounded-md",
+			"corner-squircle",
+			"ps-2",
+			"pe-1",
+			"text-sm",
+			"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
+				})]
+			}),
+			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,
+		ref: [sortable.ref, ref ?? null],
+		defaultTagName: "li",
+		props: mergeProps(baseProps, rest)
+	});
+};
+ColumnsPanelItem.displayName = "ColumnsPanel.Item";
+//#endregion
+export { ColumnsPanelItem };
+
+//# sourceMappingURL=columns-panel-item.js.map

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

@@ -0,0 +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 { 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/columns-panel/columns-panel-root.d.ts

@@ -0,0 +1,51 @@
+import { TableWith } from "../../types/table-with.js";
+import "../../types/index.js";
+import { Column, RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/columns-panel/columns-panel-root.d.ts
+export type ColumnsPanelRootProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** A tabela. Exige `columnOrderingFeature` e `columnVisibilityFeature`. */
+  table: TableWith<TFeatures, TData, 'columnOrderingFeature' | 'columnVisibilityFeature'>;
+  /**
+   * Uma função que recebe cada coluna e a posição dela no grupo e devolve o item. Repasse a
+   * posição ao `ColumnsPanel.Item`, que a usa no arrasto. Com nós comuns, quem usa faz o laço.
+   * @default (column, index) => <ColumnsPanel.Item column={column} index={index} />
+   */
+  children?: React.ReactNode | ((column: Column<TFeatures, TData>, index: number) => React.ReactNode);
+}>;
+/**
+ * A lista das colunas da tabela: marca quais aparecem e arrasta para mudar a ordem. Para um
+ * popover ou uma gaveta; a posição, o gatilho e o "restaurar" (`table.resetColumnOrder()`,
+ * `table.resetColumnVisibility()`) são do app.
+ *
+ * Lista as colunas de dados. As de exibição (sem `accessorFn`, como a de seleção e a de ações)
+ * ficam fora e no lugar: reordenar só troca as outras entre si. Com `columnPinningFeature`, a
+ * tela vira até três listas (fixadas no início, centro e fixadas no fim), e só a do centro se
+ * arrasta.
+ *
+ * O arrasto é pela alça, com o ponteiro ou o teclado (Espaço pega, setas movem, Espaço solta, Esc
+ * cancela), e fica preso à lista do centro: não passa por cima das fixadas. O `Root` assina a
+ * ordem e o pinning, e cada `ColumnsPanel.Item`, a visibilidade da coluna dele: funciona com o
+ * dono da tabela em `() => null`.
+ *
+ * @example
+ * ```tsx
+ * <ColumnsPanel.Root table={table}>
+ *   {(column, index) => (
+ *     <ColumnsPanel.Item
+ *       column={column}
+ *       index={index}
+ *       label={labels[column.id]}
+ *     />
+ *   )}
+ * </ColumnsPanel.Root>
+ * ```
+ */
+export declare const ColumnsPanelRoot: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnsPanelRootProps<TFeatures, TData>): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=columns-panel-root.d.ts.map