cortena-ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,400 @@
+"use client";
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button.js";
+import { Input } from "../input.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.js";
+import { columnLabel, downloadCsv, downloadExcel } from "./export.js";
+import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ChevronsUpDown, Download, EyeOff, ListFilter, PinOff, Search, Settings2, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/data-table/parts.tsx
+/**
+* Header content for one column: the title as a sort toggle when the column
+* sorts, and a menu with sort, pin and hide when any of those apply. The
+* table renders it for every string `header` automatically; use it inside a
+* custom header function to keep the same affordances.
+*/
+function DataTableColumnHeader({ column, title, className, ...props }) {
+	const canSort = column.getCanSort();
+	const canHide = column.getCanHide();
+	const canPin = column.getCanPin();
+	const sorted = column.getIsSorted();
+	const align = column.columnDef.meta?.align ?? "start";
+	if (!canSort && !canHide && !canPin) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-column-header",
+		className: cn("truncate", className),
+		...props,
+		children: title
+	});
+	const label = typeof title === "string" ? title : columnLabel(column);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table-column-header",
+		className: cn("group/header -mx-2 flex min-w-0 items-center", align === "end" ? "justify-end group-hover/head:pl-6" : "group-hover/head:pr-6", align === "center" && "justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-slot": "data-table-sort",
+			disabled: !canSort,
+			onClick: canSort ? column.getToggleSortingHandler() : void 0,
+			"aria-label": canSort ? sorted ? `Sort by ${label}, sorted ${sorted === "asc" ? "ascending" : "descending"}` : `Sort by ${label}` : void 0,
+			className: cn("inline-flex h-7 min-w-0 items-center gap-1 rounded-[var(--ds-radius-sm)] px-2 outline-none", "text-inherit transition-colors duration-[var(--ds-duration-fast)]", canSort && "hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]", "focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "disabled:cursor-default"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: title
+			}), canSort ? sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {
+				"aria-hidden": true,
+				className: "size-3.5 shrink-0 text-[color:var(--ds-primary)]"
+			}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, {
+				"aria-hidden": true,
+				className: "size-3.5 shrink-0 text-[color:var(--ds-primary)]"
+			}) : /* @__PURE__ */ jsx(ChevronsUpDown, {
+				"aria-hidden": true,
+				className: "hidden size-3.5 shrink-0 opacity-60 group-hover/head:inline-block"
+			}) : null]
+		}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			"aria-label": `${label} column options`,
+			className: cn("absolute top-1/2 z-[1] inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-[var(--ds-radius-sm)] outline-none", align === "end" ? "left-1" : "right-1", "bg-[var(--ds-muted)] opacity-0 transition-opacity duration-[var(--ds-duration-fast)]", "group-hover/head:opacity-100 focus-visible:opacity-100 data-[popup-open]:opacity-100", "hover:bg-[var(--ds-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40"),
+			children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: align === "end" ? "end" : "start",
+			children: [
+				canSort ? /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => column.toggleSorting(false),
+						children: [/* @__PURE__ */ jsx(ArrowUp, {}), " Sort ascending"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => column.toggleSorting(true),
+						children: [/* @__PURE__ */ jsx(ArrowDown, {}), " Sort descending"]
+					}),
+					sorted ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => column.clearSorting(),
+						children: [/* @__PURE__ */ jsx(ChevronsUpDown, {}), " Clear sort"]
+					}) : null
+				] }) : null,
+				canSort && (canPin || canHide) ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+				canPin ? /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => column.pin("start"),
+						children: [/* @__PURE__ */ jsx(ChevronsLeft, {}), " Pin left"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => column.pin("end"),
+						children: [/* @__PURE__ */ jsx(ChevronsRight, {}), " Pin right"]
+					}),
+					column.getIsPinned() ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => column.pin(false),
+						children: [/* @__PURE__ */ jsx(PinOff, {}), " Unpin"]
+					}) : null
+				] }) : null,
+				canPin && canHide ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+				canHide ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => column.toggleVisibility(false),
+					children: [/* @__PURE__ */ jsx(EyeOff, {}), " Hide column"]
+				}) : null
+			]
+		})] })]
+	});
+}
+/**
+* A checkbox list of a column's values. The filter value is the array of
+* picked values; the column's `filterFn` (`oneOf` by default for
+* `meta.filter: "faceted"`) decides what that means, and a server source
+* receives it verbatim in `TableQuery.filters`.
+*/
+function DataTableFacetedFilter({ column, title, options, className }) {
+	const raw = column.getFilterValue();
+	const selected = new Set(Array.isArray(raw) ? raw : raw == null ? [] : [raw]);
+	const facets = options ? null : column.getFacetedUniqueValues();
+	const items = options ?? column.columnDef.meta?.filterOptions ?? Array.from(facets?.keys() ?? []).filter((v) => v != null && typeof v !== "object").sort((a, b) => String(a).localeCompare(String(b))).map((value) => ({ value }));
+	const label = title ?? columnLabel(column);
+	const toggle = (value, checked) => {
+		const next = new Set(selected);
+		if (checked) next.add(value);
+		else next.delete(value);
+		column.setFilterValue(next.size ? Array.from(next) : void 0);
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		"data-slot": "data-table-faceted-filter",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			className: cn("border-dashed", className)
+		}),
+		children: [
+			/* @__PURE__ */ jsx(ListFilter, {}),
+			label,
+			selected.size ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "data-table-filter-count",
+				className: cn("ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-[var(--ds-radius-sm)] px-1.5", "bg-[var(--ds-primary-soft)] text-[length:var(--ds-text-caption-sm)] font-medium text-[color:var(--ds-primary-soft-foreground)]"),
+				children: selected.size
+			}) : null
+		]
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "start",
+		className: "max-h-80 min-w-48 overflow-y-auto",
+		children: [/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }),
+			items.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "px-2 py-1.5 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]",
+				children: "No values"
+			}) : null,
+			items.map((item) => {
+				const Icon = item.icon;
+				const count = facets?.get(item.value);
+				return /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+					closeOnClick: false,
+					checked: selected.has(item.value),
+					onCheckedChange: (checked) => toggle(item.value, checked),
+					children: [
+						Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4 text-[color:var(--ds-muted-foreground)]" }) : null,
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 truncate",
+							children: item.label ?? String(item.value)
+						}),
+						count !== void 0 ? /* @__PURE__ */ jsx("span", {
+							className: "ml-auto font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+							children: count
+						}) : null
+					]
+				}, String(item.value));
+			})
+		] }), selected.size ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+			onClick: () => column.setFilterValue(void 0),
+			className: "justify-center",
+			children: "Clear filter"
+		})] }) : null]
+	})] });
+}
+/** Column visibility menu. */
+function DataTableViewOptions({ table, className }) {
+	const columns = table.getAllLeafColumns().filter((c) => c.getCanHide());
+	if (columns.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		"data-slot": "data-table-view-options",
+		"aria-label": "Toggle columns",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			className
+		}),
+		children: [/* @__PURE__ */ jsx(Settings2, {}), "View"]
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "max-h-80 min-w-40 overflow-y-auto",
+		children: [/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Toggle columns" }), columns.map((column) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+			closeOnClick: false,
+			checked: column.getIsVisible(),
+			onCheckedChange: (checked) => column.toggleVisibility(checked),
+			children: columnLabel(column)
+		}, column.id))] }), !table.getIsAllColumnsVisible() ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+			onClick: () => table.toggleAllColumnsVisible(true),
+			children: "Show all"
+		})] }) : null]
+	})] });
+}
+function DataTableExportMenu({ table, fileName, className }) {
+	const selected = table.getSelectedRowModel().rows;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		"data-slot": "data-table-export",
+		"aria-label": "Export",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			className
+		}),
+		children: [/* @__PURE__ */ jsx(Download, {}), "Export"]
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: () => downloadCsv(table, fileName),
+				children: "CSV"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: () => void downloadExcel(table, fileName),
+				children: "Excel"
+			}),
+			selected.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => downloadCsv(table, fileName, selected),
+					children: [
+						"CSV of ",
+						selected.length,
+						" selected"
+					]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => void downloadExcel(table, fileName, selected),
+					children: [
+						"Excel of ",
+						selected.length,
+						" selected"
+					]
+				})
+			] }) : null
+		]
+	})] });
+}
+/**
+* Search box, one faceted filter per `meta.filter: "faceted"` column, a reset
+* when anything is filtered, and the view / export menus. While rows are
+* selected the left side becomes the selection summary and `bulkActions`.
+*/
+function DataTableToolbar({ table, searchPlaceholder = "Search…", bulkActions, children, enableExport = true, exportFileName, className, ...props }) {
+	const globalFilter = table.state.globalFilter ?? "";
+	const canSearch = table.options.enableGlobalFilter !== false;
+	const facetedColumns = table.getAllLeafColumns().filter((c) => c.columnDef.meta?.filter === "faceted" && c.getCanFilter());
+	const isFiltered = table.state.columnFilters.length > 0 || globalFilter !== "";
+	const selectedRows = table.options.enableRowSelection ? table.getSelectedRowModel().rows : [];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table-toolbar",
+		className: cn("flex flex-wrap items-center gap-2", className),
+		...props,
+		children: [selectedRows.length ? /* @__PURE__ */ jsxs("div", {
+			"data-slot": "data-table-bulk-actions",
+			className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-[color:var(--ds-foreground)]",
+						children: selectedRows.length
+					}), " selected"]
+				}),
+				bulkActions?.({
+					rows: selectedRows.map((r) => r.original),
+					table
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => table.resetRowSelection(),
+					children: ["Clear", /* @__PURE__ */ jsx(X, {})]
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
+			children: [
+				canSearch ? /* @__PURE__ */ jsxs("div", {
+					className: "relative w-full max-w-64",
+					children: [/* @__PURE__ */ jsx(Search, {
+						"aria-hidden": true,
+						className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-[color:var(--ds-text-tertiary)]"
+					}), /* @__PURE__ */ jsx(Input, {
+						"data-slot": "data-table-search",
+						type: "search",
+						"aria-label": "Search",
+						placeholder: searchPlaceholder,
+						value: globalFilter,
+						onChange: (e) => table.setGlobalFilter(e.target.value),
+						className: "h-8 pl-8 text-[length:var(--ds-text-caption-lg)]"
+					})]
+				}) : null,
+				facetedColumns.map((column) => /* @__PURE__ */ jsx(DataTableFacetedFilter, { column }, column.id)),
+				isFiltered ? /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => {
+						table.resetColumnFilters();
+						table.setGlobalFilter("");
+					},
+					children: ["Reset", /* @__PURE__ */ jsx(X, {})]
+				}) : null
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				children,
+				/* @__PURE__ */ jsx(DataTableViewOptions, { table }),
+				enableExport ? /* @__PURE__ */ jsx(DataTableExportMenu, {
+					table,
+					fileName: exportFileName
+				}) : null
+			]
+		})]
+	});
+}
+const DEFAULT_PAGE_SIZES = [
+	10,
+	25,
+	50,
+	100
+];
+function DataTablePagination({ table, pageSizeOptions = DEFAULT_PAGE_SIZES, className, ...props }) {
+	const { pageIndex, pageSize } = table.state.pagination;
+	const total = table.getRowCount();
+	const pageCount = table.getPageCount();
+	const from = total === 0 ? 0 : pageIndex * pageSize + 1;
+	const to = Math.min(total, (pageIndex + 1) * pageSize);
+	const sizeItems = (pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b)).map((s) => ({
+		value: String(s),
+		label: String(s)
+	}));
+	const navButton = (label, icon, onClick, disabled) => /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "icon-sm",
+		"aria-label": label,
+		onClick,
+		disabled,
+		children: icon
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table-pagination",
+		className: cn("flex flex-wrap items-center justify-between gap-3", "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("span", { children: "Rows per page" }), /* @__PURE__ */ jsxs(Select, {
+				items: sizeItems,
+				value: String(pageSize),
+				onValueChange: (value) => table.setPageSize(Number(value)),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					size: "sm",
+					"aria-label": "Rows per page",
+					className: "min-w-0 w-[4.5rem]",
+					children: /* @__PURE__ */ jsx(SelectValue, {})
+				}), /* @__PURE__ */ jsx(SelectContent, { children: sizeItems.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+					value: item.value,
+					children: item.label
+				}, item.value)) })]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ jsxs("span", {
+				"data-slot": "data-table-range",
+				"aria-live": "polite",
+				children: [
+					from,
+					"–",
+					to,
+					" of ",
+					total
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					navButton("First page", /* @__PURE__ */ jsx(ChevronsLeft, {}), () => table.firstPage(), !table.getCanPreviousPage()),
+					navButton("Previous page", /* @__PURE__ */ jsx(ChevronLeft, {}), () => table.previousPage(), !table.getCanPreviousPage()),
+					/* @__PURE__ */ jsxs("span", {
+						className: "px-1 tabular-nums",
+						children: [
+							pageCount === 0 ? 0 : pageIndex + 1,
+							" / ",
+							pageCount
+						]
+					}),
+					navButton("Next page", /* @__PURE__ */ jsx(ChevronRight, {}), () => table.nextPage(), !table.getCanNextPage()),
+					navButton("Last page", /* @__PURE__ */ jsx(ChevronsRight, {}), () => table.lastPage(), !table.getCanNextPage())
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { DataTableColumnHeader, DataTableExportMenu, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions };
+
+//# sourceMappingURL=parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":[],"sources":["../../../src/components/data-table/parts.tsx"],"sourcesContent":["\"use client\";\n\nimport type { RowData } from \"@tanstack/react-table\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  ChevronsUpDown,\n  Download,\n  EyeOff,\n  ListFilter,\n  PinOff,\n  Search,\n  Settings2,\n  X,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/dropdown-menu\";\nimport { Input } from \"@/components/input\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/select\";\nimport { cn } from \"@/lib/cn\";\nimport { columnLabel, downloadCsv, downloadExcel } from \"./export\";\nimport type { DataTableColumn, DataTableTable } from \"./types\";\n\n/* ------------------------------------------------------------------------ */\n/* Column header                                                             */\n/* ------------------------------------------------------------------------ */\n\nexport interface DataTableColumnHeaderProps<Row extends RowData>\n  extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  column: DataTableColumn<Row, any>;\n  title: React.ReactNode;\n}\n\n/**\n * Header content for one column: the title as a sort toggle when the column\n * sorts, and a menu with sort, pin and hide when any of those apply. The\n * table renders it for every string `header` automatically; use it inside a\n * custom header function to keep the same affordances.\n */\nfunction DataTableColumnHeader<Row extends RowData>({\n  column,\n  title,\n  className,\n  ...props\n}: DataTableColumnHeaderProps<Row>) {\n  const canSort = column.getCanSort();\n  const canHide = column.getCanHide();\n  const canPin = column.getCanPin();\n  const sorted = column.getIsSorted();\n  const align = column.columnDef.meta?.align ?? \"start\";\n\n  if (!canSort && !canHide && !canPin) {\n    return (\n      <div data-slot=\"data-table-column-header\" className={cn(\"truncate\", className)} {...props}>\n        {title}\n      </div>\n    );\n  }\n\n  const label = typeof title === \"string\" ? title : columnLabel(column);\n\n  return (\n    <div\n      data-slot=\"data-table-column-header\"\n      className={cn(\n        \"group/header -mx-2 flex min-w-0 items-center\",\n        // Leave room for the floating options trigger only while it shows;\n        // anchored text does not move, it truncates if it must.\n        align === \"end\" ? \"justify-end group-hover/head:pl-6\" : \"group-hover/head:pr-6\",\n        align === \"center\" && \"justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        data-slot=\"data-table-sort\"\n        disabled={!canSort}\n        onClick={canSort ? column.getToggleSortingHandler() : undefined}\n        // Without a name of its own the button announces as just the column\n        // title, which tells a screen-reader user the word \"Name\" and nothing\n        // about there being a control or what it would do. The `aria-sort` on\n        // the `<th>` (data-table.tsx) states the column's current order; this\n        // states the action, and repeats the order because a button reached by\n        // tabbing is not necessarily read with its header cell. Only when the\n        // column sorts: on a column that only hides or pins, the button is\n        // disabled and \"Sort by\" would be a lie.\n        aria-label={\n          canSort\n            ? sorted\n              ? `Sort by ${label}, sorted ${sorted === \"asc\" ? \"ascending\" : \"descending\"}`\n              : `Sort by ${label}`\n            : undefined\n        }\n        className={cn(\n          \"inline-flex h-7 min-w-0 items-center gap-1 rounded-[var(--ds-radius-sm)] px-2 outline-none\",\n          \"text-inherit transition-colors duration-[var(--ds-duration-fast)]\",\n          canSort && \"hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]\",\n          \"focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n          \"disabled:cursor-default\",\n        )}\n      >\n        <span className=\"truncate\">{title}</span>\n        {canSort ? (\n          sorted === \"asc\" ? (\n            <ArrowUp aria-hidden className=\"size-3.5 shrink-0 text-[color:var(--ds-primary)]\" />\n          ) : sorted === \"desc\" ? (\n            <ArrowDown aria-hidden className=\"size-3.5 shrink-0 text-[color:var(--ds-primary)]\" />\n          ) : (\n            // Out of flow until hover so narrow headers keep their full title.\n            <ChevronsUpDown\n              aria-hidden\n              className=\"hidden size-3.5 shrink-0 opacity-60 group-hover/head:inline-block\"\n            />\n          )\n        ) : null}\n      </button>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          aria-label={`${label} column options`}\n          className={cn(\n            // Floats over the cell edge so it costs the title no width.\n            \"absolute top-1/2 z-[1] inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-[var(--ds-radius-sm)] outline-none\",\n            align === \"end\" ? \"left-1\" : \"right-1\",\n            \"bg-[var(--ds-muted)] opacity-0 transition-opacity duration-[var(--ds-duration-fast)]\",\n            \"group-hover/head:opacity-100 focus-visible:opacity-100 data-[popup-open]:opacity-100\",\n            \"hover:bg-[var(--ds-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n          )}\n        >\n          <ChevronDown className=\"size-3.5\" />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align={align === \"end\" ? \"end\" : \"start\"}>\n          {canSort ? (\n            <DropdownMenuGroup>\n              <DropdownMenuItem onClick={() => column.toggleSorting(false)}>\n                <ArrowUp /> Sort ascending\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => column.toggleSorting(true)}>\n                <ArrowDown /> Sort descending\n              </DropdownMenuItem>\n              {sorted ? (\n                <DropdownMenuItem onClick={() => column.clearSorting()}>\n                  <ChevronsUpDown /> Clear sort\n                </DropdownMenuItem>\n              ) : null}\n            </DropdownMenuGroup>\n          ) : null}\n          {canSort && (canPin || canHide) ? <DropdownMenuSeparator /> : null}\n          {canPin ? (\n            <DropdownMenuGroup>\n              <DropdownMenuItem onClick={() => column.pin(\"start\")}>\n                <ChevronsLeft /> Pin left\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => column.pin(\"end\")}>\n                <ChevronsRight /> Pin right\n              </DropdownMenuItem>\n              {column.getIsPinned() ? (\n                <DropdownMenuItem onClick={() => column.pin(false)}>\n                  <PinOff /> Unpin\n                </DropdownMenuItem>\n              ) : null}\n            </DropdownMenuGroup>\n          ) : null}\n          {canPin && canHide ? <DropdownMenuSeparator /> : null}\n          {canHide ? (\n            <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>\n              <EyeOff /> Hide column\n            </DropdownMenuItem>\n          ) : null}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* Faceted filter                                                            */\n/* ------------------------------------------------------------------------ */\n\nexport interface DataTableFacetedFilterOption {\n  value: string | number | boolean;\n  label?: string;\n  icon?: React.ComponentType<{ className?: string }>;\n}\n\nexport interface DataTableFacetedFilterProps<Row extends RowData> {\n  column: DataTableColumn<Row, any>;\n  title?: React.ReactNode;\n  /** Fixed options; defaults to the column's distinct values with counts (client source only). */\n  options?: DataTableFacetedFilterOption[];\n  className?: string;\n}\n\n/**\n * A checkbox list of a column's values. The filter value is the array of\n * picked values; the column's `filterFn` (`oneOf` by default for\n * `meta.filter: \"faceted\"`) decides what that means, and a server source\n * receives it verbatim in `TableQuery.filters`.\n */\nfunction DataTableFacetedFilter<Row extends RowData>({\n  column,\n  title,\n  options,\n  className,\n}: DataTableFacetedFilterProps<Row>) {\n  const raw = column.getFilterValue();\n  const selected = new Set<unknown>(Array.isArray(raw) ? raw : raw == null ? [] : [raw]);\n  const facets = options ? null : column.getFacetedUniqueValues();\n  const items: DataTableFacetedFilterOption[] =\n    options ??\n    column.columnDef.meta?.filterOptions ??\n    Array.from(facets?.keys() ?? [])\n      .filter((v): v is string | number | boolean => v != null && typeof v !== \"object\")\n      .sort((a, b) => String(a).localeCompare(String(b)))\n      .map((value) => ({ value }));\n  const label = title ?? columnLabel(column);\n\n  const toggle = (value: unknown, checked: boolean) => {\n    const next = new Set(selected);\n    if (checked) next.add(value);\n    else next.delete(value);\n    column.setFilterValue(next.size ? Array.from(next) : undefined);\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        data-slot=\"data-table-faceted-filter\"\n        render={<Button variant=\"outline\" size=\"sm\" className={cn(\"border-dashed\", className)} />}\n      >\n        <ListFilter />\n        {label}\n        {selected.size ? (\n          <span\n            data-slot=\"data-table-filter-count\"\n            className={cn(\n              \"ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-[var(--ds-radius-sm)] px-1.5\",\n              \"bg-[var(--ds-primary-soft)] text-[length:var(--ds-text-caption-sm)] font-medium text-[color:var(--ds-primary-soft-foreground)]\",\n            )}\n          >\n            {selected.size}\n          </span>\n        ) : null}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"max-h-80 min-w-48 overflow-y-auto\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>{label}</DropdownMenuLabel>\n          {items.length === 0 ? (\n            <div className=\"px-2 py-1.5 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\">\n              No values\n            </div>\n          ) : null}\n          {items.map((item) => {\n            const Icon = item.icon;\n            const count = facets?.get(item.value);\n            return (\n              <DropdownMenuCheckboxItem\n                key={String(item.value)}\n                closeOnClick={false}\n                checked={selected.has(item.value)}\n                onCheckedChange={(checked) => toggle(item.value, checked)}\n              >\n                {Icon ? <Icon className=\"size-4 text-[color:var(--ds-muted-foreground)]\" /> : null}\n                <span className=\"flex-1 truncate\">{item.label ?? String(item.value)}</span>\n                {count !== undefined ? (\n                  <span className=\"ml-auto font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\">\n                    {count}\n                  </span>\n                ) : null}\n              </DropdownMenuCheckboxItem>\n            );\n          })}\n        </DropdownMenuGroup>\n        {selected.size ? (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onClick={() => column.setFilterValue(undefined)} className=\"justify-center\">\n              Clear filter\n            </DropdownMenuItem>\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* View options                                                              */\n/* ------------------------------------------------------------------------ */\n\nexport interface DataTableViewOptionsProps<Row extends RowData> {\n  table: DataTableTable<Row>;\n  className?: string;\n}\n\n/** Column visibility menu. */\nfunction DataTableViewOptions<Row extends RowData>({ table, className }: DataTableViewOptionsProps<Row>) {\n  const columns = table.getAllLeafColumns().filter((c) => c.getCanHide());\n  if (columns.length === 0) return null;\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        data-slot=\"data-table-view-options\"\n        aria-label=\"Toggle columns\"\n        render={<Button variant=\"outline\" size=\"sm\" className={className} />}\n      >\n        <Settings2 />\n        View\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"max-h-80 min-w-40 overflow-y-auto\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n          {columns.map((column) => (\n            <DropdownMenuCheckboxItem\n              key={column.id}\n              closeOnClick={false}\n              checked={column.getIsVisible()}\n              onCheckedChange={(checked) => column.toggleVisibility(checked)}\n            >\n              {columnLabel(column)}\n            </DropdownMenuCheckboxItem>\n          ))}\n        </DropdownMenuGroup>\n        {!table.getIsAllColumnsVisible() ? (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onClick={() => table.toggleAllColumnsVisible(true)}>Show all</DropdownMenuItem>\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* Export menu                                                               */\n/* ------------------------------------------------------------------------ */\n\nexport interface DataTableExportMenuProps<Row extends RowData> {\n  table: DataTableTable<Row>;\n  fileName?: string;\n  className?: string;\n}\n\nfunction DataTableExportMenu<Row extends RowData>({ table, fileName, className }: DataTableExportMenuProps<Row>) {\n  const selected = table.getSelectedRowModel().rows;\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        data-slot=\"data-table-export\"\n        aria-label=\"Export\"\n        render={<Button variant=\"outline\" size=\"sm\" className={className} />}\n      >\n        <Download />\n        Export\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={() => downloadCsv(table, fileName)}>CSV</DropdownMenuItem>\n        <DropdownMenuItem onClick={() => void downloadExcel(table, fileName)}>Excel</DropdownMenuItem>\n        {selected.length ? (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onClick={() => downloadCsv(table, fileName, selected)}>\n              CSV of {selected.length} selected\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={() => void downloadExcel(table, fileName, selected)}>\n              Excel of {selected.length} selected\n            </DropdownMenuItem>\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* Toolbar                                                                   */\n/* ------------------------------------------------------------------------ */\n\nexport interface DataTableToolbarProps<Row extends RowData>\n  extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  table: DataTableTable<Row>;\n  /** Placeholder for the search box. @default \"Search…\" */\n  searchPlaceholder?: string;\n  /** Rendered while rows are selected, in place of the filters. */\n  bulkActions?: (ctx: { rows: Row[]; table: DataTableTable<Row> }) => React.ReactNode;\n  /** Extra controls on the right, before the view and export menus. */\n  children?: React.ReactNode;\n  /** @default true */\n  enableExport?: boolean;\n  exportFileName?: string;\n}\n\n/**\n * Search box, one faceted filter per `meta.filter: \"faceted\"` column, a reset\n * when anything is filtered, and the view / export menus. While rows are\n * selected the left side becomes the selection summary and `bulkActions`.\n */\nfunction DataTableToolbar<Row extends RowData>({\n  table,\n  searchPlaceholder = \"Search…\",\n  bulkActions,\n  children,\n  enableExport = true,\n  exportFileName,\n  className,\n  ...props\n}: DataTableToolbarProps<Row>) {\n  const globalFilter = (table.state.globalFilter as string | undefined) ?? \"\";\n  const canSearch = table.options.enableGlobalFilter !== false;\n  const facetedColumns = table\n    .getAllLeafColumns()\n    .filter((c) => c.columnDef.meta?.filter === \"faceted\" && c.getCanFilter());\n  const isFiltered = table.state.columnFilters.length > 0 || globalFilter !== \"\";\n  const selectedRows = table.options.enableRowSelection ? table.getSelectedRowModel().rows : [];\n\n  return (\n    <div\n      data-slot=\"data-table-toolbar\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    >\n      {selectedRows.length ? (\n        <div data-slot=\"data-table-bulk-actions\" className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n          <span className=\"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\">\n            <span className=\"font-medium text-[color:var(--ds-foreground)]\">{selectedRows.length}</span> selected\n          </span>\n          {bulkActions?.({ rows: selectedRows.map((r) => r.original), table })}\n          <Button variant=\"ghost\" size=\"sm\" onClick={() => table.resetRowSelection()}>\n            Clear\n            <X />\n          </Button>\n        </div>\n      ) : (\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n          {canSearch ? (\n            <div className=\"relative w-full max-w-64\">\n              <Search\n                aria-hidden\n                className=\"pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-[color:var(--ds-text-tertiary)]\"\n              />\n              <Input\n                data-slot=\"data-table-search\"\n                type=\"search\"\n                aria-label=\"Search\"\n                placeholder={searchPlaceholder}\n                value={globalFilter}\n                onChange={(e) => table.setGlobalFilter(e.target.value)}\n                className=\"h-8 pl-8 text-[length:var(--ds-text-caption-lg)]\"\n              />\n            </div>\n          ) : null}\n          {facetedColumns.map((column) => (\n            <DataTableFacetedFilter key={column.id} column={column} />\n          ))}\n          {isFiltered ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => {\n                table.resetColumnFilters();\n                table.setGlobalFilter(\"\");\n              }}\n            >\n              Reset\n              <X />\n            </Button>\n          ) : null}\n        </div>\n      )}\n      <div className=\"flex items-center gap-2\">\n        {children}\n        <DataTableViewOptions table={table} />\n        {enableExport ? <DataTableExportMenu table={table} fileName={exportFileName} /> : null}\n      </div>\n    </div>\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* Pagination                                                                */\n/* ------------------------------------------------------------------------ */\n\nexport interface DataTablePaginationProps<Row extends RowData> extends React.ComponentProps<\"div\"> {\n  table: DataTableTable<Row>;\n  /** @default [10, 25, 50, 100] */\n  pageSizeOptions?: number[];\n}\n\nconst DEFAULT_PAGE_SIZES = [10, 25, 50, 100];\n\nfunction DataTablePagination<Row extends RowData>({\n  table,\n  pageSizeOptions = DEFAULT_PAGE_SIZES,\n  className,\n  ...props\n}: DataTablePaginationProps<Row>) {\n  const { pageIndex, pageSize } = table.state.pagination;\n  const total = table.getRowCount();\n  const pageCount = table.getPageCount();\n  const from = total === 0 ? 0 : pageIndex * pageSize + 1;\n  const to = Math.min(total, (pageIndex + 1) * pageSize);\n  const sizes = pageSizeOptions.includes(pageSize)\n    ? pageSizeOptions\n    : [...pageSizeOptions, pageSize].sort((a, b) => a - b);\n  const sizeItems = sizes.map((s) => ({ value: String(s), label: String(s) }));\n\n  const navButton = (label: string, icon: React.ReactNode, onClick: () => void, disabled: boolean) => (\n    <Button variant=\"outline\" size=\"icon-sm\" aria-label={label} onClick={onClick} disabled={disabled}>\n      {icon}\n    </Button>\n  );\n\n  return (\n    <div\n      data-slot=\"data-table-pagination\"\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-3\",\n        \"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span>Rows per page</span>\n        <Select\n          items={sizeItems}\n          value={String(pageSize)}\n          onValueChange={(value) => table.setPageSize(Number(value))}\n        >\n          <SelectTrigger size=\"sm\" aria-label=\"Rows per page\" className=\"min-w-0 w-[4.5rem]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {sizeItems.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"flex items-center gap-4\">\n        <span data-slot=\"data-table-range\" aria-live=\"polite\">\n          {from}–{to} of {total}\n        </span>\n        <div className=\"flex items-center gap-1\">\n          {navButton(\"First page\", <ChevronsLeft />, () => table.firstPage(), !table.getCanPreviousPage())}\n          {navButton(\"Previous page\", <ChevronLeft />, () => table.previousPage(), !table.getCanPreviousPage())}\n          <span className=\"px-1 tabular-nums\">\n            {pageCount === 0 ? 0 : pageIndex + 1} / {pageCount}\n          </span>\n          {navButton(\"Next page\", <ChevronRight />, () => table.nextPage(), !table.getCanNextPage())}\n          {navButton(\"Last page\", <ChevronsRight />, () => table.lastPage(), !table.getCanNextPage())}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport {\n  DataTableColumnHeader,\n  DataTableExportMenu,\n  DataTableFacetedFilter,\n  DataTablePagination,\n  DataTableToolbar,\n  DataTableViewOptions,\n};\n"],"mappings":"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"}

package/dist/components/data-table/system-columns.js

@@ -0,0 +1,84 @@
+"use client";
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Checkbox } from "../checkbox.js";
+import { ChevronRight } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-table/system-columns.tsx
+/**
+* Columns the table adds on the consumer's behalf: the selection checkbox
+* when `enableRowSelection` is set, the expander when a `renderSubComponent`
+* is given. Both are display columns, neither sorts, hides, resizes or
+* exports, and a consumer column with the same id replaces them.
+*/
+function selectColumn(helper) {
+	return helper.display({
+		id: "select",
+		header: ({ table }) => {
+			const all = table.getIsAllPageRowsSelected();
+			const some = table.getIsSomePageRowsSelected() && !all;
+			return /* @__PURE__ */ jsx(Checkbox, {
+				"aria-label": "Select all rows on this page",
+				checked: all,
+				indeterminate: some,
+				onCheckedChange: (checked) => table.toggleAllPageRowsSelected(Boolean(checked))
+			});
+		},
+		cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
+			"aria-label": "Select row",
+			checked: row.getIsSelected(),
+			disabled: !row.getCanSelect(),
+			onCheckedChange: (checked) => row.toggleSelected(Boolean(checked))
+		}),
+		size: 40,
+		minSize: 40,
+		maxSize: 40,
+		enableSorting: false,
+		enableHiding: false,
+		enableResizing: false,
+		enableColumnFilter: false,
+		enableGlobalFilter: false,
+		meta: {
+			exportable: false,
+			align: "center",
+			cellClassName: "px-2",
+			headerClassName: "px-2"
+		}
+	});
+}
+function expandColumn(helper) {
+	return helper.display({
+		id: "expand",
+		header: () => /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Expand"
+		}),
+		cell: ({ row }) => row.getCanExpand() ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "data-table-expander",
+			"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+			"aria-expanded": row.getIsExpanded(),
+			onClick: row.getToggleExpandedHandler(),
+			className: cn("inline-flex size-6 items-center justify-center rounded-[var(--ds-radius-sm)]", "text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40"),
+			children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 transition-transform duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", row.getIsExpanded() && "rotate-90") })
+		}) : null,
+		size: 40,
+		minSize: 40,
+		maxSize: 40,
+		enableSorting: false,
+		enableHiding: false,
+		enableResizing: false,
+		enableColumnFilter: false,
+		enableGlobalFilter: false,
+		meta: {
+			exportable: false,
+			align: "center",
+			cellClassName: "px-2",
+			headerClassName: "px-2"
+		}
+	});
+}
+//#endregion
+export { expandColumn, selectColumn };
+
+//# sourceMappingURL=system-columns.js.map

package/dist/components/data-table/system-columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-columns.js","names":[],"sources":["../../../src/components/data-table/system-columns.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ColumnHelper, RowData } from \"@tanstack/react-table\";\nimport { ChevronRight } from \"lucide-react\";\nimport { Checkbox } from \"@/components/checkbox\";\nimport { cn } from \"@/lib/cn\";\nimport type { DataTableFeatures } from \"./features\";\nimport type { DataTableColumnDef } from \"./types\";\n\n/**\n * Columns the table adds on the consumer's behalf: the selection checkbox\n * when `enableRowSelection` is set, the expander when a `renderSubComponent`\n * is given. Both are display columns, neither sorts, hides, resizes or\n * exports, and a consumer column with the same id replaces them.\n */\nexport function selectColumn<Row extends RowData>(\n  helper: ColumnHelper<DataTableFeatures<Row>, Row>,\n): DataTableColumnDef<Row, unknown> {\n  return helper.display({\n    id: \"select\",\n    header: ({ table }) => {\n      const all = table.getIsAllPageRowsSelected();\n      const some = table.getIsSomePageRowsSelected() && !all;\n      return (\n        <Checkbox\n          aria-label=\"Select all rows on this page\"\n          checked={all}\n          indeterminate={some}\n          onCheckedChange={(checked) => table.toggleAllPageRowsSelected(Boolean(checked))}\n        />\n      );\n    },\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(checked) => row.toggleSelected(Boolean(checked))}\n      />\n    ),\n    size: 40,\n    minSize: 40,\n    maxSize: 40,\n    enableSorting: false,\n    enableHiding: false,\n    enableResizing: false,\n    enableColumnFilter: false,\n    enableGlobalFilter: false,\n    meta: { exportable: false, align: \"center\", cellClassName: \"px-2\", headerClassName: \"px-2\" },\n  });\n}\n\nexport function expandColumn<Row extends RowData>(\n  helper: ColumnHelper<DataTableFeatures<Row>, Row>,\n): DataTableColumnDef<Row, unknown> {\n  return helper.display({\n    id: \"expand\",\n    header: () => <span className=\"sr-only\">Expand</span>,\n    cell: ({ row }) =>\n      row.getCanExpand() ? (\n        <button\n          type=\"button\"\n          data-slot=\"data-table-expander\"\n          aria-label={row.getIsExpanded() ? \"Collapse row\" : \"Expand row\"}\n          aria-expanded={row.getIsExpanded()}\n          onClick={row.getToggleExpandedHandler()}\n          className={cn(\n            \"inline-flex size-6 items-center justify-center rounded-[var(--ds-radius-sm)]\",\n            \"text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]\",\n            \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n          )}\n        >\n          <ChevronRight\n            className={cn(\n              \"size-4 transition-transform duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n              row.getIsExpanded() && \"rotate-90\",\n            )}\n          />\n        </button>\n      ) : null,\n    size: 40,\n    minSize: 40,\n    maxSize: 40,\n    enableSorting: false,\n    enableHiding: false,\n    enableResizing: false,\n    enableColumnFilter: false,\n    enableGlobalFilter: false,\n    meta: { exportable: false, align: \"center\", cellClassName: \"px-2\", headerClassName: \"px-2\" },\n  });\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,aACd,QACkC;CAClC,OAAO,OAAO,QAAQ;EACpB,IAAI;EACJ,SAAS,EAAE,YAAY;GACrB,MAAM,MAAM,MAAM,yBAAyB;GAC3C,MAAM,OAAO,MAAM,0BAA0B,KAAK,CAAC;GACnD,OACE,oBAAC,UAAD;IACE,cAAW;IACX,SAAS;IACT,eAAe;IACf,kBAAkB,YAAY,MAAM,0BAA0B,QAAQ,OAAO,CAAC;GAC/E,CAAA;EAEL;EACA,OAAO,EAAE,UACP,oBAAC,UAAD;GACE,cAAW;GACX,SAAS,IAAI,cAAc;GAC3B,UAAU,CAAC,IAAI,aAAa;GAC5B,kBAAkB,YAAY,IAAI,eAAe,QAAQ,OAAO,CAAC;EAClE,CAAA;EAEH,MAAM;EACN,SAAS;EACT,SAAS;EACT,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,oBAAoB;EACpB,oBAAoB;EACpB,MAAM;GAAE,YAAY;GAAO,OAAO;GAAU,eAAe;GAAQ,iBAAiB;EAAO;CAC7F,CAAC;AACH;AAEA,SAAgB,aACd,QACkC;CAClC,OAAO,OAAO,QAAQ;EACpB,IAAI;EACJ,cAAc,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAY,CAAA;EACpD,OAAO,EAAE,UACP,IAAI,aAAa,IACf,oBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,cAAY,IAAI,cAAc,IAAI,iBAAiB;GACnD,iBAAe,IAAI,cAAc;GACjC,SAAS,IAAI,yBAAyB;GACtC,WAAW,GACT,gFACA,8GACA,8EACF;GAEA,UAAA,oBAAC,cAAD,EACE,WAAW,GACT,4FACA,IAAI,cAAc,KAAK,WACzB,EACD,CAAA;EACK,CAAA,IACN;EACN,MAAM;EACN,SAAS;EACT,SAAS;EACT,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,oBAAoB;EACpB,oBAAoB;EACpB,MAAM;GAAE,YAAY;GAAO,OAAO;GAAU,eAAe;GAAQ,iBAAiB;EAAO;CAC7F,CAAC;AACH"}