@lucasbernardosn/react-table 0.0.0-stage → 0.1.0

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,31 @@
+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`, 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.
+ */
+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":";;;;;;YAaY,sBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,QAAQ,WAAW,WAAW;;EAE9B;;;;;EAKA;;;;;;;;;;qBAYS;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,sBAAsB,WAAW,yBAAM,+CAAA"}

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

@@ -0,0 +1,92 @@
+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 { ListIcon, PushPinIcon } from "@phosphor-icons/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+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`, 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.
+*/
+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
+			})]
+		}), 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"
+			})]
+		})] })
+	};
+	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 { 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"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"columns-panel-root.d.ts","names":[],"sources":["../../../src/components/columns-panel/columns-panel-root.tsx"],"mappings":";;;;;;;YAgBY,sBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UACL,WACA;;;;;;EAQF,WACI,MAAM,cACJ,QAAQ,OAAO,WAAW,QAAQ,kBAAkB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+DvD;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,sBAAsB,WAAW,SAAM,MAAA,IAAA"}

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

@@ -0,0 +1,134 @@
+import { hasColumnFeature, hasTableFeature } from "../../utils/has-feature.js";
+import { ColumnsPanelItem } from "./columns-panel-item.js";
+import { getColumnsPanelColumnOrder } from "./get-columns-panel-column-order.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { shallow, useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1, useMemo, useRef } from "react";
+import { isSortable } from "@dnd-kit/react/sortable";
+import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
+import { RestrictToElement } from "@dnd-kit/dom/modifiers";
+import { DragDropProvider } from "@dnd-kit/react";
+//#region src/components/columns-panel/columns-panel-root.tsx
+/** O nome de cada lista, na ordem das regiões: fixadas no início, centro e fixadas no fim. */
+const GROUP_LABELS = [
+	"Colunas fixadas no início",
+	"Colunas",
+	"Colunas fixadas no fim"
+];
+/**
+* A linha entre as listas, só visual (o alfinete já diz quais são fixadas), fica nas das fixadas,
+* do lado do centro, com o respiro. A lista do centro termina no primeiro e no último item: o
+* arrasto fica preso a ela, e com o respiro dentro dela, o item arrastado cobriria a linha.
+*/
+const GROUP_CLASS_NAMES = [
+	"mb-1 border-gray-6 border-b pb-1",
+	void 0,
+	"mt-1 border-gray-6 border-t pt-1"
+];
+/** As pontas sem fixadas: a mesma referência, para a tupla não mudar à toa. */
+const NO_COLUMNS = [];
+/** Se a coluna é de dados, e não de exibição (sem `accessorFn`, como a de seleção). */
+const isDataColumn = (column) => column.accessorFn !== void 0;
+/**
+* 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>
+* ```
+*/
+const ColumnsPanelRoot = (props) => {
+	const { table, render, className, children, ref, ...rest } = props;
+	/** A lista do centro, a única que se arrasta: o arrasto fica preso a ela. */
+	const centerListRef = useRef(null);
+	const groups = useSelector(table.store, () => hasTableFeature(table, "columnPinningFeature") ? [
+		table.getStartLeafColumns(),
+		table.getCenterLeafColumns(),
+		table.getEndLeafColumns()
+	] : [
+		NO_COLUMNS,
+		table.getAllLeafColumns(),
+		NO_COLUMNS
+	], { compare: shallow }).map((columns) => columns.filter(isDataColumn));
+	/** Preso à lista do centro, e só na vertical: fora dela não há destino. */
+	const modifiers = useMemo(() => [RestrictToVerticalAxis, RestrictToElement.configure({ element: () => centerListRef.current })], []);
+	const handleDragEnd = (event) => {
+		if (event.canceled) {
+			/** O Esc que cancela o arrasto pelo teclado não segue adiante: fecharia o popover em volta. */
+			if (event.nativeEvent instanceof KeyboardEvent && event.nativeEvent.key === "Escape") event.nativeEvent.stopPropagation();
+			return;
+		}
+		const { source } = event.operation;
+		/**
+		* A posição final vem do item arrastado, e não do destino: durante o arrasto, a lista já se
+		* reordena com o destino mais próximo, e soltar em cima de uma fixada, que não aceita nada,
+		* chega sem destino. Sem isso, a lista ficaria na ordem nova e a tabela, na antiga.
+		*/
+		if (!isSortable(source) || source.initialIndex === source.index) return;
+		table.setColumnOrder(getColumnsPanelColumnOrder(table.getAllLeafColumns().map((column) => column.id), (groups[1] ?? []).map((column) => column.id), source.initialIndex, source.index));
+	};
+	/**
+	* Com render-prop ou sem `children`, o laço é daqui, uma lista por grupo com colunas; com nós
+	* comuns, de quem usa.
+	*/
+	const content = typeof children === "function" || children === void 0 ? groups.map((columns, groupIndex) => columns.length > 0 && /* @__PURE__ */ jsx("ul", {
+		ref: groupIndex === 1 ? centerListRef : void 0,
+		"aria-label": GROUP_LABELS[groupIndex],
+		className: mergeTwClassNames([
+			"flex",
+			"flex-col",
+			"gap-0.5",
+			GROUP_CLASS_NAMES[groupIndex]
+		]),
+		children: columns.map((column, index) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? hasColumnFeature(column, "columnVisibilityFeature") && /* @__PURE__ */ jsx(ColumnsPanelItem, {
+			column,
+			index
+		}) : children(column, index) }, column.id))
+	}, groupIndex)) : children;
+	const element = useRender({
+		render,
+		ref,
+		defaultTagName: "div",
+		props: mergeProps({
+			"data-component": "ColumnsPanel.Root",
+			className: mergeTwClassNames([
+				"flex",
+				"w-56",
+				"flex-col"
+			], className),
+			children: content
+		}, rest)
+	});
+	return /* @__PURE__ */ jsx(DragDropProvider, {
+		modifiers,
+		onDragEnd: handleDragEnd,
+		children: element
+	});
+};
+ColumnsPanelRoot.displayName = "ColumnsPanel.Root";
+//#endregion
+export { ColumnsPanelRoot };
+
+//# sourceMappingURL=columns-panel-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"columns-panel-root.js","names":["Fragment"],"sources":["../../../src/components/columns-panel/columns-panel-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';\nimport { RestrictToElement } from '@dnd-kit/dom/modifiers';\nimport { DragDropProvider } from '@dnd-kit/react';\nimport { isSortable } from '@dnd-kit/react/sortable';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type { Column, RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment, useMemo, useRef } from 'react';\nimport type { TableWith } from '../../types';\nimport { hasColumnFeature, hasTableFeature } from '../../utils';\nimport { ColumnsPanelItem } from './columns-panel-item';\nimport { getColumnsPanelColumnOrder } from './get-columns-panel-column-order';\n\nexport type ColumnsPanelRootProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A tabela. Exige `columnOrderingFeature` e `columnVisibilityFeature`. */\n    table: TableWith<\n      TFeatures,\n      TData,\n      'columnOrderingFeature' | 'columnVisibilityFeature'\n    >;\n    /**\n     * Uma função que recebe cada coluna e a posição dela no grupo e devolve o item. Repasse a\n     * posição ao `ColumnsPanel.Item`, que a usa no arrasto. Com nós comuns, quem usa faz o laço.\n     * @default (column, index) => <ColumnsPanel.Item column={column} index={index} />\n     */\n    children?:\n      | React.ReactNode\n      | ((column: Column<TFeatures, TData>, index: number) => React.ReactNode);\n  }\n>;\n\n/** Evento de fim de arrasto, como o `DragDropProvider` o entrega. */\ntype DragEndEvent = Parameters<\n  NonNullable<React.ComponentProps<typeof DragDropProvider>['onDragEnd']>\n>[0];\n\n/** O nome de cada lista, na ordem das regiões: fixadas no início, centro e fixadas no fim. */\nconst GROUP_LABELS = [\n  'Colunas fixadas no início',\n  'Colunas',\n  'Colunas fixadas no fim',\n];\n\n/**\n * A linha entre as listas, só visual (o alfinete já diz quais são fixadas), fica nas das fixadas,\n * do lado do centro, com o respiro. A lista do centro termina no primeiro e no último item: o\n * arrasto fica preso a ela, e com o respiro dentro dela, o item arrastado cobriria a linha.\n */\nconst GROUP_CLASS_NAMES = [\n  'mb-1 border-gray-6 border-b pb-1',\n  undefined,\n  'mt-1 border-gray-6 border-t pt-1',\n];\n\n/** As pontas sem fixadas: a mesma referência, para a tupla não mudar à toa. */\nconst NO_COLUMNS: never[] = [];\n\n/** Se a coluna é de dados, e não de exibição (sem `accessorFn`, como a de seleção). */\nconst isDataColumn = <TFeatures extends TableFeatures, TData extends RowData>(\n  column: Column<TFeatures, TData>,\n) => column.accessorFn !== undefined;\n\n/**\n * A lista das colunas da tabela: marca quais aparecem e arrasta para mudar a ordem. Para um\n * popover ou uma gaveta; a posição, o gatilho e o \"restaurar\" (`table.resetColumnOrder()`,\n * `table.resetColumnVisibility()`) são do app.\n *\n * Lista as colunas de dados. As de exibição (sem `accessorFn`, como a de seleção e a de ações)\n * ficam fora e no lugar: reordenar só troca as outras entre si. Com `columnPinningFeature`, a\n * tela vira até três listas (fixadas no início, centro e fixadas no fim), e só a do centro se\n * arrasta.\n *\n * O arrasto é pela alça, com o ponteiro ou o teclado (Espaço pega, setas movem, Espaço solta, Esc\n * cancela), e fica preso à lista do centro: não passa por cima das fixadas. O `Root` assina a\n * ordem e o pinning, e cada `ColumnsPanel.Item`, a visibilidade da coluna dele: funciona com o\n * dono da tabela em `() => null`.\n *\n * @example\n * ```tsx\n * <ColumnsPanel.Root table={table}>\n *   {(column, index) => (\n *     <ColumnsPanel.Item\n *       column={column}\n *       index={index}\n *       label={labels[column.id]}\n *     />\n *   )}\n * </ColumnsPanel.Root>\n * ```\n */\nexport const ColumnsPanelRoot = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: ColumnsPanelRootProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ref, ...rest } = props;\n\n  /** A lista do centro, a única que se arrasta: o arrasto fica preso a ela. */\n  const centerListRef = useRef<HTMLUListElement>(null);\n\n  /**\n   * As colunas das três regiões, que o TanStack memoiza, numa tupla: o `shallow` compara item a\n   * item, e só re-renderiza quando a ordem ou o pinning mudam. Já na ordem final: o\n   * `columnOrder` vale dentro de cada região.\n   */\n  const regions = useSelector(\n    table.store,\n    () =>\n      hasTableFeature(table, 'columnPinningFeature')\n        ? [\n            table.getStartLeafColumns(),\n            table.getCenterLeafColumns(),\n            table.getEndLeafColumns(),\n          ]\n        : [NO_COLUMNS, table.getAllLeafColumns(), NO_COLUMNS],\n    { compare: shallow },\n  );\n\n  const groups = regions.map((columns) => columns.filter(isDataColumn));\n\n  /** Preso à lista do centro, e só na vertical: fora dela não há destino. */\n  const modifiers = useMemo(\n    () => [\n      RestrictToVerticalAxis,\n      RestrictToElement.configure({ element: () => centerListRef.current }),\n    ],\n    [],\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    if (event.canceled) {\n      /** O Esc que cancela o arrasto pelo teclado não segue adiante: fecharia o popover em volta. */\n      if (\n        event.nativeEvent instanceof KeyboardEvent &&\n        event.nativeEvent.key === 'Escape'\n      ) {\n        event.nativeEvent.stopPropagation();\n      }\n\n      return;\n    }\n\n    const { source } = event.operation;\n\n    /**\n     * A posição final vem do item arrastado, e não do destino: durante o arrasto, a lista já se\n     * reordena com o destino mais próximo, e soltar em cima de uma fixada, que não aceita nada,\n     * chega sem destino. Sem isso, a lista ficaria na ordem nova e a tabela, na antiga.\n     */\n    if (!isSortable(source) || source.initialIndex === source.index) {\n      return;\n    }\n\n    table.setColumnOrder(\n      getColumnsPanelColumnOrder(\n        table.getAllLeafColumns().map((column) => column.id),\n        (groups[1] ?? []).map((column) => column.id),\n        source.initialIndex,\n        source.index,\n      ),\n    );\n  };\n\n  /**\n   * Com render-prop ou sem `children`, o laço é daqui, uma lista por grupo com colunas; com nós\n   * comuns, de quem usa.\n   */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? groups.map(\n          (columns, groupIndex) =>\n            columns.length > 0 && (\n              <ul\n                key={groupIndex}\n                ref={groupIndex === 1 ? centerListRef : undefined}\n                aria-label={GROUP_LABELS[groupIndex]}\n                className={mergeTwClassNames([\n                  'flex',\n                  'flex-col',\n                  'gap-0.5',\n                  GROUP_CLASS_NAMES[groupIndex],\n                ])}\n              >\n                {columns.map((column, index) => (\n                  <Fragment key={column.id}>\n                    {children === undefined\n                      ? hasColumnFeature(column, 'columnVisibilityFeature') && (\n                          <ColumnsPanelItem\n                            column={column}\n                            index={index}\n                          />\n                        )\n                      : children(column, index)}\n                  </Fragment>\n                ))}\n              </ul>\n            ),\n        )\n      : children;\n\n  const element = useRender({\n    render,\n    ref,\n    defaultTagName: 'div',\n    props: mergeProps(\n      {\n        'data-component': 'ColumnsPanel.Root',\n        className: mergeTwClassNames(['flex', 'w-56', 'flex-col'], className),\n        children: content,\n      },\n      rest,\n    ),\n  });\n\n  return (\n    <DragDropProvider\n      modifiers={modifiers}\n      onDragEnd={handleDragEnd}\n    >\n      {element}\n    </DragDropProvider>\n  );\n};\n\nColumnsPanelRoot.displayName = 'ColumnsPanel.Root';\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,eAAe;CACnB;CACA;CACA;AACF;;;;;;AAOA,MAAM,oBAAoB;CACxB;CACA,KAAA;CACA;AACF;;AAGA,MAAM,aAAsB,CAAC;;AAG7B,MAAM,gBACJ,WACG,OAAO,eAAe,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B3B,MAAa,oBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,KAAK,GAAG,SAAS;;CAG7D,MAAM,gBAAgB,OAAyB,IAAI;CAoBnD,MAAM,SAbU,YACd,MAAM,aAEJ,gBAAgB,OAAO,sBAAsB,IACzC;EACE,MAAM,oBAAoB;EAC1B,MAAM,qBAAqB;EAC3B,MAAM,kBAAkB;CAC1B,IACA;EAAC;EAAY,MAAM,kBAAkB;EAAG;CAAU,GACxD,EAAE,SAAS,QAAQ,CAGA,CAAC,CAAC,KAAK,YAAY,QAAQ,OAAO,YAAY,CAAC;;CAGpE,MAAM,YAAY,cACV,CACJ,wBACA,kBAAkB,UAAU,EAAE,eAAe,cAAc,QAAQ,CAAC,CACtE,GACA,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,IAAI,MAAM,UAAU;;GAElB,IACE,MAAM,uBAAuB,iBAC7B,MAAM,YAAY,QAAQ,UAE1B,MAAM,YAAY,gBAAgB;GAGpC;EACF;EAEA,MAAM,EAAE,WAAW,MAAM;;;;;;EAOzB,IAAI,CAAC,WAAW,MAAM,KAAK,OAAO,iBAAiB,OAAO,OACxD;EAGF,MAAM,eACJ,2BACE,MAAM,kBAAkB,CAAC,CAAC,KAAK,WAAW,OAAO,EAAE,IAClD,OAAO,MAAM,CAAC,EAAA,CAAG,KAAK,WAAW,OAAO,EAAE,GAC3C,OAAO,cACP,OAAO,KACT,CACF;CACF;;;;;CAMA,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,OAAO,KACJ,SAAS,eACR,QAAQ,SAAS,KACf,oBAAC,MAAD;EAEE,KAAK,eAAe,IAAI,gBAAgB,KAAA;EACxC,cAAY,aAAa;EACzB,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA,kBAAkB;EACpB,CAAC;EAEA,UAAA,QAAQ,KAAK,QAAQ,UACpB,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACV,iBAAiB,QAAQ,yBAAyB,KAChD,oBAAC,kBAAD;GACU;GACD;EACR,CAAA,IAEH,SAAS,QAAQ,KAAK,EAClB,GATK,OAAO,EASZ,CACX;CACC,GAtBG,UAsBH,CAEV,IACA;CAEN,MAAM,UAAU,UAAU;EACxB;EACA;EACA,gBAAgB;EAChB,OAAO,WACL;GACE,kBAAkB;GAClB,WAAW,kBAAkB;IAAC;IAAQ;IAAQ;GAAU,GAAG,SAAS;GACpE,UAAU;EACZ,GACA,IACF;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACa;EACX,WAAW;EAEV,UAAA;CACe,CAAA;AAEtB;AAEA,iBAAiB,cAAc"}

package/dist/components/columns-panel/get-columns-panel-column-order.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/columns-panel/get-columns-panel-column-order.d.ts
+/**
+ * A ordem completa das colunas depois de um arrasto na lista do centro. Move o item de
+ * `fromIndex` para `toIndex` entre os `centerIds`, e a nova ordem deles ocupa as posições que eles
+ * já tinham em `columnIds`: as colunas fora da lista (as de exibição e as fixadas) ficam onde
+ * estão.
+ *
+ * @example
+ * ```ts
+ * getColumnsPanelColumnOrder(['select', 'name', 'age', 'city'], ['name', 'age', 'city'], 0, 2);
+ * // → ['select', 'age', 'city', 'name']
+ * ```
+ */
+export declare const getColumnsPanelColumnOrder: (columnIds: readonly string[], centerIds: readonly string[], fromIndex: number, toIndex: number) => string[];
+//#endregion
+//# sourceMappingURL=get-columns-panel-column-order.d.ts.map

package/dist/components/columns-panel/get-columns-panel-column-order.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-columns-panel-column-order.d.ts","names":[],"sources":["../../../src/components/columns-panel/get-columns-panel-column-order.ts"],"mappings":";;;;;;;;;;;;;qBAca,6BACX,8BACA,8BACA,mBACA"}

package/dist/components/columns-panel/get-columns-panel-column-order.js

@@ -0,0 +1,24 @@
+import { arrayMove } from "@dnd-kit/helpers";
+//#region src/components/columns-panel/get-columns-panel-column-order.ts
+/**
+* A ordem completa das colunas depois de um arrasto na lista do centro. Move o item de
+* `fromIndex` para `toIndex` entre os `centerIds`, e a nova ordem deles ocupa as posições que eles
+* já tinham em `columnIds`: as colunas fora da lista (as de exibição e as fixadas) ficam onde
+* estão.
+*
+* @example
+* ```ts
+* getColumnsPanelColumnOrder(['select', 'name', 'age', 'city'], ['name', 'age', 'city'], 0, 2);
+* // → ['select', 'age', 'city', 'name']
+* ```
+*/
+const getColumnsPanelColumnOrder = (columnIds, centerIds, fromIndex, toIndex) => {
+	const nextCenterIds = arrayMove([...centerIds], fromIndex, toIndex);
+	const centerIdSet = new Set(centerIds);
+	let nextIndex = 0;
+	return columnIds.map((columnId) => centerIdSet.has(columnId) ? nextCenterIds[nextIndex++] ?? columnId : columnId);
+};
+//#endregion
+export { getColumnsPanelColumnOrder };
+
+//# sourceMappingURL=get-columns-panel-column-order.js.map

package/dist/components/columns-panel/get-columns-panel-column-order.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-columns-panel-column-order.js","names":[],"sources":["../../../src/components/columns-panel/get-columns-panel-column-order.ts"],"sourcesContent":["import { arrayMove } from '@dnd-kit/helpers';\n\n/**\n * A ordem completa das colunas depois de um arrasto na lista do centro. Move o item de\n * `fromIndex` para `toIndex` entre os `centerIds`, e a nova ordem deles ocupa as posições que eles\n * já tinham em `columnIds`: as colunas fora da lista (as de exibição e as fixadas) ficam onde\n * estão.\n *\n * @example\n * ```ts\n * getColumnsPanelColumnOrder(['select', 'name', 'age', 'city'], ['name', 'age', 'city'], 0, 2);\n * // → ['select', 'age', 'city', 'name']\n * ```\n */\nexport const getColumnsPanelColumnOrder = (\n  columnIds: readonly string[],\n  centerIds: readonly string[],\n  fromIndex: number,\n  toIndex: number,\n) => {\n  const nextCenterIds = arrayMove([...centerIds], fromIndex, toIndex);\n  const centerIdSet = new Set(centerIds);\n\n  let nextIndex = 0;\n\n  return columnIds.map((columnId) =>\n    centerIdSet.has(columnId)\n      ? (nextCenterIds[nextIndex++] ?? columnId)\n      : columnId,\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAa,8BACX,WACA,WACA,WACA,YACG;CACH,MAAM,gBAAgB,UAAU,CAAC,GAAG,SAAS,GAAG,WAAW,OAAO;CAClE,MAAM,cAAc,IAAI,IAAI,SAAS;CAErC,IAAI,YAAY;CAEhB,OAAO,UAAU,KAAK,aACpB,YAAY,IAAI,QAAQ,IACnB,cAAc,gBAAgB,WAC/B,QACN;AACF"}

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

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

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

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

package/dist/components/columns-panel/index.parts.d.ts

@@ -0,0 +1,8 @@
+import { ColumnsPanelItem, ColumnsPanelItemProps } from "./columns-panel-item.js";
+import { ColumnsPanelRoot, ColumnsPanelRootProps } from "./columns-panel-root.js";
+declare namespace index_parts_d_exports {
+  export { ColumnsPanelItem as Item, ColumnsPanelItemProps as ItemProps, ColumnsPanelRoot as Root, ColumnsPanelRootProps as RootProps };
+}
+//#endregion
+export { ColumnsPanelItem as Item, type ColumnsPanelItemProps as ItemProps, ColumnsPanelRoot as Root, type ColumnsPanelRootProps as RootProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/columns-panel/index.parts.d.ts.map

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

package/dist/components/columns-panel/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ColumnsPanelItem } from "./columns-panel-item.js";
+import { ColumnsPanelRoot } from "./columns-panel-root.js";
+//#region src/components/columns-panel/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => ColumnsPanelItem,
+	Root: () => ColumnsPanelRoot
+});
+//#endregion
+export { ColumnsPanelItem as Item, ColumnsPanelRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/columns-panel/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../src/components/columns-panel/index.parts.ts"],"sourcesContent":["export { ColumnsPanelItem as Item } from './columns-panel-item';\nexport { ColumnsPanelRoot as Root } from './columns-panel-root';\n\n/* types */\n\nexport type { ColumnsPanelItemProps as ItemProps } from './columns-panel-item';\nexport type { ColumnsPanelRootProps as RootProps } from './columns-panel-root';\n"],"mappings":""}