lynote-ui 0.0.9 → 0.0.11

package/dist/table-FocfdaF7.js

@@ -0,0 +1,1216 @@
+const require_chunk = require("./chunk-8l464Juk.js");
+const require_utils = require("./utils-DrngEK1K.js");
+const require_button = require("./button/index.js");
+const require_input = require("./input/index.js");
+const require_dropdown_menu = require("./dropdown-menu/index.js");
+const require_native_select = require("./native-select/index.js");
+const require_skeleton = require("./skeleton/index.js");
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let _dnd_kit_core = require("@dnd-kit/core");
+let _dnd_kit_modifiers = require("@dnd-kit/modifiers");
+let _dnd_kit_sortable = require("@dnd-kit/sortable");
+let _dnd_kit_utilities = require("@dnd-kit/utilities");
+let _tanstack_react_table = require("@tanstack/react-table");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
+//#region src/table/components/base-table.tsx
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "table-container",
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			"data-slot": "table",
+			className: require_utils.cn("w-full caption-bottom text-sm", className),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+		"data-slot": "table-header",
+		className: require_utils.cn("[&_tr]:border-b", className),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+		"data-slot": "table-body",
+		className: require_utils.cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tfoot", {
+		"data-slot": "table-footer",
+		className: require_utils.cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+		"data-slot": "table-row",
+		className: require_utils.cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+		"data-slot": "table-head",
+		className: require_utils.cn("text-foreground h-10 whitespace-nowrap px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+		"data-slot": "table-cell",
+		className: require_utils.cn("whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("caption", {
+		"data-slot": "table-caption",
+		className: require_utils.cn("text-muted-foreground mt-4 text-sm", className),
+		...props
+	});
+}
+//#endregion
+//#region src/table/hooks/use-data-table.ts
+var DEFAULT_FEATURES = {
+	sorting: true,
+	multiSort: false,
+	filtering: true,
+	globalFilter: false,
+	pagination: true,
+	rowSelection: false,
+	columnVisibility: true,
+	columnOrdering: false,
+	columnPinning: false,
+	columnResizing: false,
+	rowDnd: false,
+	expanding: false
+};
+function applyUpdater(updater, prev) {
+	return typeof updater === "function" ? updater(prev) : updater;
+}
+/**
+* 选取受控值,若未传则回退到非受控
+*
+* setter 同时支持值和函数式 updater,以避免一帧内多次更新拿到旧 snapshot
+*/
+function useControlled(controlled, initial, onChange) {
+	const isControlled = controlled !== void 0;
+	const [internal, setInternal] = (0, react.useState)(initial);
+	const value = isControlled ? controlled : internal;
+	const setValue = (updater) => {
+		if (isControlled) {
+			const next = applyUpdater(updater, controlled);
+			onChange?.(next);
+			return;
+		}
+		setInternal((prev) => {
+			const next = applyUpdater(updater, prev);
+			onChange?.(next);
+			return next;
+		});
+	};
+	return [value, setValue];
+}
+/**
+* 构造 TanStack 表格实例,并按需开启各项功能
+*/
+function useDataTable({ data, columns, features, state, initialState, onStateChange, tableOptions }) {
+	const mergedFeatures = {
+		...DEFAULT_FEATURES,
+		...features
+	};
+	const [sorting, setSorting] = useControlled(state?.sorting, initialState?.sorting ?? [], onStateChange?.onSortingChange);
+	const [columnFilters, setColumnFilters] = useControlled(state?.columnFilters, initialState?.columnFilters ?? [], onStateChange?.onColumnFiltersChange);
+	const [columnVisibility, setColumnVisibility] = useControlled(state?.columnVisibility, initialState?.columnVisibility ?? {}, onStateChange?.onColumnVisibilityChange);
+	const [columnOrder, setColumnOrder] = useControlled(state?.columnOrder, initialState?.columnOrder ?? [], onStateChange?.onColumnOrderChange);
+	const [columnPinning, setColumnPinning] = useControlled(state?.columnPinning, initialState?.columnPinning ?? {}, onStateChange?.onColumnPinningChange);
+	const [rowSelection, setRowSelection] = useControlled(state?.rowSelection, initialState?.rowSelection ?? {}, onStateChange?.onRowSelectionChange);
+	const [pagination, setPagination] = useControlled(state?.pagination, initialState?.pagination ?? {
+		pageIndex: 0,
+		pageSize: 10
+	}, onStateChange?.onPaginationChange);
+	const [globalFilter, setGlobalFilter] = useControlled(state?.globalFilter, initialState?.globalFilter ?? "", onStateChange?.onGlobalFilterChange);
+	const [expanded, setExpanded] = useControlled(state?.expanded, initialState?.expanded ?? {}, onStateChange?.onExpandedChange);
+	return {
+		table: (0, _tanstack_react_table.useReactTable)({
+			data,
+			columns,
+			state: {
+				sorting,
+				columnFilters,
+				columnVisibility,
+				columnOrder,
+				columnPinning,
+				rowSelection,
+				pagination,
+				globalFilter,
+				expanded
+			},
+			enableSorting: mergedFeatures.sorting,
+			enableMultiSort: mergedFeatures.multiSort,
+			enableFilters: mergedFeatures.filtering,
+			enableGlobalFilter: mergedFeatures.globalFilter,
+			enableRowSelection: mergedFeatures.rowSelection,
+			enableHiding: mergedFeatures.columnVisibility,
+			enableColumnPinning: mergedFeatures.columnPinning,
+			enableColumnResizing: mergedFeatures.columnResizing,
+			columnResizeMode: "onChange",
+			onSortingChange: setSorting,
+			onColumnFiltersChange: setColumnFilters,
+			onColumnVisibilityChange: setColumnVisibility,
+			onColumnOrderChange: setColumnOrder,
+			onColumnPinningChange: setColumnPinning,
+			onRowSelectionChange: setRowSelection,
+			onPaginationChange: setPagination,
+			onGlobalFilterChange: setGlobalFilter,
+			onExpandedChange: setExpanded,
+			getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
+			getSortedRowModel: mergedFeatures.sorting ? (0, _tanstack_react_table.getSortedRowModel)() : void 0,
+			getFilteredRowModel: mergedFeatures.filtering || mergedFeatures.globalFilter ? (0, _tanstack_react_table.getFilteredRowModel)() : void 0,
+			getPaginationRowModel: mergedFeatures.pagination && !tableOptions?.manualPagination ? (0, _tanstack_react_table.getPaginationRowModel)() : void 0,
+			getExpandedRowModel: mergedFeatures.expanding ? (0, _tanstack_react_table.getExpandedRowModel)() : void 0,
+			...tableOptions
+		}),
+		features: mergedFeatures
+	};
+}
+/**
+* 监听容器横向滚动,返回左右阴影显示状态
+*
+* 用于固定列阴影提示
+*/
+function useScrollShadow(wrapperRef, containerSelector = "[data-slot=\"table-container\"]") {
+	const [scrollShadow, setScrollShadow] = (0, react.useState)({
+		left: false,
+		right: false
+	});
+	(0, react.useEffect)(() => {
+		const scrollContainer = wrapperRef.current?.querySelector(containerSelector);
+		if (!scrollContainer) return;
+		const update = () => {
+			const scrollLeft = scrollContainer.scrollLeft;
+			const maxScrollLeft = Math.max(0, scrollContainer.scrollWidth - scrollContainer.clientWidth);
+			const next = {
+				left: scrollLeft > 1,
+				right: maxScrollLeft - scrollLeft > 1
+			};
+			setScrollShadow((current) => current.left === next.left && current.right === next.right ? current : next);
+		};
+		update();
+		scrollContainer.addEventListener("scroll", update, { passive: true });
+		const resizeObserver = new ResizeObserver(update);
+		resizeObserver.observe(scrollContainer);
+		const tableElement = scrollContainer.querySelector("table");
+		if (tableElement) resizeObserver.observe(tableElement);
+		return () => {
+			scrollContainer.removeEventListener("scroll", update);
+			resizeObserver.disconnect();
+		};
+	}, [wrapperRef, containerSelector]);
+	return scrollShadow;
+}
+//#endregion
+//#region src/table/utils.ts
+/**
+* 展开面板 row 的 DOM id 协议
+*
+* `DataTable` 渲染面板 row 时把这个 id 设到 `<tr id>` 上,
+* `RowExpandToggle` 把它写进按钮的 `aria-controls`,二者必须保持一致
+*/
+var panelIdFor = (rowId) => `data-table-row-${rowId}-panel`;
+/**
+* 计算固定列(sticky)需要的样式
+*/
+function getCommonPinningStyles(column) {
+	const isPinned = column.getIsPinned();
+	return {
+		left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+		opacity: isPinned ? .98 : 1,
+		position: isPinned ? "sticky" : "relative",
+		right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+		width: `${column.getSize()}px`,
+		zIndex: isPinned ? 1 : 0
+	};
+}
+/**
+* 计算固定列阴影 className
+*/
+function getColumnPinningClassName(column, scrollShadow) {
+	const isPinned = column.getIsPinned();
+	const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+	const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+	let styles = "bg-background after:transition-all";
+	if (isLastLeftPinnedColumn) styles = require_utils.cn(styles, "after:absolute after:bottom-0 after:top-0 after:right-0 after:w-[30px] after:translate-x-full after:content-[''] after:shadow-[inset_15px_0_8px_-8px_#0000000d] dark:after:shadow-[inset_15px_0_8px_-8px_#ffffff0d]");
+	if (isLastLeftPinnedColumn && !scrollShadow.left) styles = require_utils.cn(styles, "after:shadow-[inset_15px_0_8px_-8px_#00000000]");
+	if (isFirstRightPinnedColumn) styles = require_utils.cn(styles, "after:absolute after:bottom-0 after:top-0 after:left-0 after:w-[30px] after:-translate-x-full after:content-[''] after:shadow-[inset_-15px_0_8px_-8px_#0000000d] dark:after:shadow-[inset_-15px_0_8px_-8px_#ffffff0d]");
+	if (isFirstRightPinnedColumn && !scrollShadow.right) styles = require_utils.cn(styles, "after:shadow-[inset_-15px_0_8px_-8px_#00000000]");
+	return styles;
+}
+function ensureRow(map, rowIndex) {
+	let entry = map.get(rowIndex);
+	if (!entry) {
+		entry = /* @__PURE__ */ new Map();
+		map.set(rowIndex, entry);
+	}
+	return entry;
+}
+function setSpan(map, rowIndex, columnId, next) {
+	const row = ensureRow(map, rowIndex);
+	const previous = row.get(columnId) ?? {
+		rowSpan: 1,
+		colSpan: 1
+	};
+	row.set(columnId, {
+		...previous,
+		...next
+	});
+}
+/**
+* 根据每列 `meta.rowSpan` / `meta.colSpan` 计算每行每列的合并跨度
+*
+* `0` 表示该单元格不应渲染(被合并掉了)
+*/
+function computeCellSpans(rows, columns) {
+	const map = /* @__PURE__ */ new Map();
+	if (rows.length === 0) return map;
+	columns.forEach((column) => {
+		const meta = column.columnDef.meta;
+		const rowSpanCfg = meta?.rowSpan;
+		if (!rowSpanCfg) return;
+		if (rowSpanCfg === true || rowSpanCfg === "auto") {
+			const parentKey = meta?.rowSpanParent;
+			let index = 0;
+			while (index < rows.length) {
+				const value = rows[index].getValue(column.id);
+				const parentValue = parentKey ? rows[index].getValue(parentKey) : void 0;
+				let span = 1;
+				while (index + span < rows.length) {
+					const nextValue = rows[index + span].getValue(column.id);
+					const nextParent = parentKey ? rows[index + span].getValue(parentKey) : void 0;
+					if (Object.is(nextValue, value) && (!parentKey || Object.is(nextParent, parentValue))) span += 1;
+					else break;
+				}
+				if (span > 1) {
+					setSpan(map, index, column.id, { rowSpan: span });
+					for (let offset = 1; offset < span; offset += 1) setSpan(map, index + offset, column.id, {
+						rowSpan: 0,
+						colSpan: 0
+					});
+				}
+				index += span;
+			}
+		} else if (typeof rowSpanCfg === "function") rows.forEach((row, rowIndex) => {
+			const span = rowSpanCfg({
+				row,
+				rows,
+				rowIndex,
+				value: row.getValue(column.id)
+			});
+			const existing = map.get(rowIndex)?.get(column.id);
+			if (existing && existing.rowSpan === 0) return;
+			if (span === 0) setSpan(map, rowIndex, column.id, {
+				rowSpan: 0,
+				colSpan: 0
+			});
+			else if (span > 1) {
+				setSpan(map, rowIndex, column.id, { rowSpan: span });
+				for (let offset = 1; offset < span; offset += 1) setSpan(map, rowIndex + offset, column.id, {
+					rowSpan: 0,
+					colSpan: 0
+				});
+			}
+		});
+	});
+	rows.forEach((row, rowIndex) => {
+		const cells = row.getVisibleCells();
+		let skipUntil = -1;
+		cells.forEach((cell, cellIndex) => {
+			const columnId = cell.column.id;
+			const rowMap = ensureRow(map, rowIndex);
+			const existing = rowMap.get(columnId);
+			if (existing && existing.rowSpan === 0) return;
+			if (cellIndex <= skipUntil) {
+				rowMap.set(columnId, {
+					rowSpan: existing?.rowSpan ?? 1,
+					colSpan: 0
+				});
+				return;
+			}
+			const colSpanCfg = cell.column.columnDef.meta?.colSpan;
+			if (typeof colSpanCfg === "function") {
+				const colSpan = colSpanCfg({
+					row,
+					rows,
+					rowIndex,
+					column: cell.column
+				});
+				if (colSpan === 0) rowMap.set(columnId, {
+					rowSpan: existing?.rowSpan ?? 1,
+					colSpan: 0
+				});
+				else if (colSpan > 1) {
+					rowMap.set(columnId, {
+						rowSpan: existing?.rowSpan ?? 1,
+						colSpan
+					});
+					skipUntil = cellIndex + colSpan - 1;
+				}
+			}
+		});
+	});
+	return map;
+}
+//#endregion
+//#region src/table/components/data-table-column-header.tsx
+/**
+* 表头单元格,封装排序、列宽拖拽、固定列阴影
+*/
+function DataTableColumnHeader({ header, resizable, scrollShadow }) {
+	const canSort = header.column.getCanSort();
+	const isSorted = header.column.getIsSorted();
+	const canResize = resizable && header.column.getCanResize();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
+		"data-slot": "data-table-column-header",
+		colSpan: header.colSpan,
+		style: getCommonPinningStyles(header.column),
+		className: getColumnPinningClassName(header.column, scrollShadow),
+		children: header.isPlaceholder ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.cn("flex flex-1 items-center gap-1", canSort && "cursor-pointer select-none"),
+				onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+				children: [(0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()), canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "flex flex-col items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUpIcon, { className: require_utils.cn("text-muted-foreground -mb-1 size-[1em] transition", isSorted === "asc" && "text-foreground") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: require_utils.cn("text-muted-foreground -mt-1 size-[1em] transition", isSorted === "desc" && "text-foreground") })]
+				})]
+			}), canResize && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				onDoubleClick: header.column.resetSize,
+				onMouseDown: header.getResizeHandler(),
+				onTouchStart: header.getResizeHandler(),
+				className: require_utils.cn("ml-auto h-[stretch] w-px cursor-col-resize touch-none select-none", "hover:bg-primary/40 data-[resizing=true]:bg-primary"),
+				"data-resizing": header.column.getIsResizing() || void 0
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/table/components/data-table-pagination.tsx
+var DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	20,
+	30,
+	50,
+	100
+];
+/**
+* 表格分页栏:总行数 / 每页数量 / 页码跳转
+*/
+function DataTablePagination({ table, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showSelectionCount = true }) {
+	const pagination = table.getState().pagination;
+	const selectedCount = Object.keys(table.getState().rowSelection).length;
+	const totalRows = table.getRowCount();
+	const pageCount = table.getPageCount();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "text-muted-foreground flex flex-wrap items-center justify-between gap-2 py-2 text-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex-1",
+				children: showSelectionCount && selectedCount > 0 ? `已选择 ${selectedCount} / ${totalRows} 条` : `共 ${totalRows} 条`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "每页" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_native_select.NativeSelect, {
+					size: "sm",
+					value: pagination.pageSize,
+					onChange: (event) => table.setPageSize(Number(event.target.value)),
+					children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_native_select.NativeSelectOption, {
+						value: size,
+						children: size
+					}, size))
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "px-2",
+						children: [
+							"第 ",
+							pagination.pageIndex + 1,
+							" / ",
+							Math.max(pageCount, 1),
+							" 页"
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						variant: "outline",
+						size: "icon-sm",
+						"aria-label": "第一页",
+						onClick: () => table.setPageIndex(0),
+						disabled: !table.getCanPreviousPage(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsLeftIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						variant: "outline",
+						size: "icon-sm",
+						"aria-label": "上一页",
+						onClick: () => table.previousPage(),
+						disabled: !table.getCanPreviousPage(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeftIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						variant: "outline",
+						size: "icon-sm",
+						"aria-label": "下一页",
+						onClick: () => table.nextPage(),
+						disabled: !table.getCanNextPage(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						variant: "outline",
+						size: "icon-sm",
+						"aria-label": "最后一页",
+						onClick: () => table.setPageIndex(pageCount - 1),
+						disabled: !table.getCanNextPage(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsRightIcon, {})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/table/components/data-table-virtual-body.tsx
+var DEFAULT_ROW_HEIGHT = 36;
+var DEFAULT_MAX_HEIGHT = 480;
+var DEFAULT_OVERSCAN = 10;
+/**
+* 行虚拟滚动表格:使用 grid 布局 + `useVirtualizer` 仅渲染可视区域
+*
+* 因表格采用 grid 布局,固定列 / 多级表头暂不支持
+*/
+function DataTableVirtualBody({ table, loading, empty = "暂无数据", options, bordered = false, className }) {
+	const estimateRowHeight = options?.estimateRowHeight ?? DEFAULT_ROW_HEIGHT;
+	const maxHeight = options?.maxHeight ?? DEFAULT_MAX_HEIGHT;
+	const overscan = options?.overscan ?? DEFAULT_OVERSCAN;
+	const containerRef = (0, react.useRef)(null);
+	const rows = table.getRowModel().rows;
+	const totalWidth = table.getTotalSize();
+	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: rows.length,
+		getScrollElement: () => containerRef.current,
+		estimateSize: () => estimateRowHeight,
+		overscan
+	});
+	const virtualItems = virtualizer.getVirtualItems();
+	const showEmpty = !loading && rows.length === 0;
+	const skeletonRowCount = Math.max(1, Math.floor((typeof maxHeight === "number" ? maxHeight : 480) / estimateRowHeight));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		"data-slot": "table-container",
+		className: require_utils.cn("bg-background relative overflow-auto rounded-md", bordered && "border", className),
+		style: { height: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			"data-slot": "table",
+			className: "grid text-sm",
+			style: {
+				width: `${totalWidth}px`,
+				minWidth: "100%"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+				"data-slot": "table-header",
+				className: "bg-background sticky top-0 z-10 grid border-b",
+				children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+					className: "flex w-full",
+					children: headerGroup.headers.map((header, headerIndex) => {
+						const canSort = header.column.getCanSort();
+						const isSorted = header.column.getIsSorted();
+						const isLast = headerIndex === headerGroup.headers.length - 1;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
+							"data-slot": "table-head",
+							className: require_utils.cn("text-foreground flex h-10 shrink-0 items-center gap-1 px-2 text-left font-medium", canSort && "cursor-pointer select-none", bordered && !isLast && "border-r"),
+							style: { width: `${header.getSize()}px` },
+							onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+							children: [header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()), canSort && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "ml-1 flex flex-col items-center",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUpIcon, { className: require_utils.cn("text-muted-foreground -mb-1 size-3 transition", isSorted === "asc" && "text-foreground") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: require_utils.cn("text-muted-foreground -mt-1 size-3 transition", isSorted === "desc" && "text-foreground") })]
+							})]
+						}, header.id);
+					})
+				}, headerGroup.id))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+				"data-slot": "table-body",
+				className: "relative grid",
+				style: { height: loading ? `${skeletonRowCount * estimateRowHeight}px` : `${virtualizer.getTotalSize()}px` },
+				children: loading ? Array.from({ length: skeletonRowCount }).map((_, rowIndex) => {
+					const leafColumns = table.getVisibleLeafColumns();
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+						className: "flex w-full border-b",
+						style: { height: `${estimateRowHeight}px` },
+						children: leafColumns.map((column, columnIndex) => {
+							const isLast = columnIndex === leafColumns.length - 1;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: require_utils.cn("flex items-center px-2", bordered && !isLast && "border-r"),
+								style: { width: `${column.getSize()}px` },
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_skeleton.Skeleton, { className: "h-4 w-full" })
+							}, column.id);
+						})
+					}, `loading-${rowIndex}`);
+				}) : showEmpty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+					className: "flex w-full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+						colSpan: table.getVisibleLeafColumns().length,
+						className: "text-muted-foreground flex h-24 w-full items-center justify-center",
+						children: empty
+					})
+				}) : virtualItems.map((virtualRow) => {
+					const row = rows[virtualRow.index];
+					const cells = row.getVisibleCells();
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+						"data-index": virtualRow.index,
+						"data-state": row.getIsSelected() ? "selected" : void 0,
+						ref: (node) => virtualizer.measureElement(node),
+						className: "hover:bg-muted/50 data-[state=selected]:bg-muted absolute flex w-full border-b",
+						style: { transform: `translateY(${virtualRow.start}px)` },
+						children: cells.map((cell, cellIndex) => {
+							const isLast = cellIndex === cells.length - 1;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								"data-slot": "table-cell",
+								className: require_utils.cn("text-foreground flex items-center px-2", bordered && !isLast && "border-r"),
+								style: {
+									width: `${cell.column.getSize()}px`,
+									height: `${estimateRowHeight}px`
+								},
+								children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id);
+						})
+					}, row.id);
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/table/components/row-drag-handle.tsx
+var RowDragHandleContext = (0, react.createContext)(null);
+/** 在 cell 内任意位置放此组件即可成为行拖拽手柄 */
+function RowDragHandle({ className, ...props }) {
+	const handle = (0, react.useContext)(RowDragHandleContext);
+	if (!handle) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		ref: handle.setActivatorNodeRef,
+		"aria-label": "拖动排序",
+		className: require_utils.cn("text-muted-foreground hover:text-foreground inline-flex size-6 cursor-grab items-center justify-center rounded-md focus-visible:outline-none active:cursor-grabbing", className),
+		...handle.attributes,
+		...handle.listeners,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVerticalIcon, { className: "size-4" })
+	});
+}
+//#endregion
+//#region src/table/components/data-table.tsx
+var ROW_DND_HANDLE_COLUMN_ID = "__row_dnd_handle__";
+var DEFAULT_SKELETON_ROWS = 8;
+/** ReactNode 但语义上等同于"不渲染"的值(null / undefined / boolean) */
+function isRenderablePanel(value) {
+	return value !== null && value !== void 0 && typeof value !== "boolean";
+}
+/**
+* 渲染一行 cells —— 处理列合并 / 跨列 / 固定列样式
+*
+* 抽成共享函数,sortable 与非 sortable 两条路径都用同一份单元格生成逻辑
+*/
+function renderRowCells(row, rowIndex, cellSpans, scrollShadow) {
+	return row.getVisibleCells().map((cell) => {
+		const span = cellSpans.get(rowIndex)?.get(cell.column.id);
+		const rowSpan = span?.rowSpan ?? 1;
+		const colSpan = span?.colSpan ?? 1;
+		if (rowSpan === 0 || colSpan === 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+			rowSpan: rowSpan > 1 ? rowSpan : void 0,
+			colSpan: colSpan > 1 ? colSpan : void 0,
+			style: getCommonPinningStyles(cell.column),
+			className: getColumnPinningClassName(cell.column, scrollShadow),
+			children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+		}, cell.id);
+	});
+}
+/** 渲染展开面板 row —— 跨满全列的单格 TableRow */
+function renderExpandedPanel({ rowId, panel, visibleColumnCount, isSelected, style, isDragging }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
+		id: panelIdFor(rowId),
+		"data-slot": "data-table-expanded-row",
+		"data-state": isSelected ? "selected" : void 0,
+		style,
+		className: require_utils.cn("bg-muted/30 hover:bg-muted/30", isDragging && "shadow-md"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+			colSpan: visibleColumnCount,
+			className: "p-4",
+			children: panel
+		})
+	});
+}
+function buildRowDndColumn() {
+	return {
+		id: ROW_DND_HANDLE_COLUMN_ID,
+		size: 36,
+		enableSorting: false,
+		enableHiding: false,
+		enableResizing: false,
+		enableColumnFilter: false,
+		enablePinning: false,
+		header: "",
+		cell: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowDragHandle, {})
+	};
+}
+/** 单行 sortable 包装,把 dnd-kit 属性透传到 TableRow + Context */
+function SortableTableRow({ row, rowIndex, cellSpans, scrollShadow, onRowClick, expandedPanel, visibleColumnCount }) {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({ id: row.id });
+	const style = {
+		transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
+		transition,
+		position: isDragging ? "relative" : void 0,
+		zIndex: isDragging ? 1 : void 0
+	};
+	const isSelected = row.getIsSelected();
+	const showPanel = expandedPanel !== void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RowDragHandleContext.Provider, {
+		value: {
+			attributes,
+			listeners,
+			setActivatorNodeRef,
+			isDragging
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
+			ref: setNodeRef,
+			style,
+			"data-state": isSelected ? "selected" : void 0,
+			className: require_utils.cn(isDragging && "bg-muted/70 shadow-md", onRowClick && "cursor-pointer"),
+			onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+			children: renderRowCells(row, rowIndex, cellSpans, scrollShadow)
+		}), showPanel ? renderExpandedPanel({
+			rowId: row.id,
+			panel: expandedPanel,
+			visibleColumnCount,
+			isSelected,
+			style,
+			isDragging
+		}) : null]
+	});
+}
+/**
+* 全功能数据表格
+*
+* 在 `Table` 基础组件之上,基于 `@tanstack/react-table`
+* 提供排序、筛选、分页、行选择、列显隐 / 拖拽 / 固定 / 调宽、行虚拟滚动、行拖拽排序等能力
+*
+* 可通过 `ref` 拿到底层 TanStack `table` 实例 ([[DataTableHandle]]) 进行命令式操作
+*/
+function DataTableInner({ columns, data, loading, state, initialState, onStateChange, features, renderToolbar, renderPagination, empty = "暂无数据", pageSizeOptions, className, tableClassName, onRowClick, onRowOrderChange, rowDndHandle = "auto", tableOptions, virtual = false, bordered = false, expandedRowRender }, ref) {
+	const virtualEnabled = Boolean(virtual);
+	const virtualOptions = virtual && typeof virtual === "object" ? virtual : void 0;
+	const rowDndEnabled = !virtualEnabled && Boolean(features?.rowDnd);
+	const autoHandle = rowDndEnabled && rowDndHandle === "auto";
+	const expandedRowRenderEffective = virtualEnabled ? void 0 : expandedRowRender;
+	const virtualConflicts = virtualEnabled && Boolean(features?.rowDnd || features?.expanding || expandedRowRender);
+	const rowDndMissingGetRowId = rowDndEnabled && !tableOptions?.getRowId;
+	(0, react.useEffect)(() => {
+		if (virtualConflicts) console.warn("[DataTable] virtual 模式与 rowDnd / expanding / expandedRowRender 不兼容,已自动忽略相关功能");
+		if (rowDndMissingGetRowId) console.warn("[DataTable] 启用 features.rowDnd 时,请通过 tableOptions.getRowId 提供稳定的行 id,否则拖拽顺序会错乱");
+	}, [virtualConflicts, rowDndMissingGetRowId]);
+	const effectiveFeatures = virtualEnabled ? {
+		...features,
+		pagination: false,
+		rowDnd: false,
+		expanding: false
+	} : features;
+	const { table, features: mergedFeatures } = useDataTable({
+		data,
+		columns: (0, react.useMemo)(() => autoHandle && !columns.some((c) => c.id === ROW_DND_HANDLE_COLUMN_ID) ? [buildRowDndColumn(), ...columns] : columns, [columns, autoHandle]),
+		features: effectiveFeatures,
+		state,
+		initialState,
+		onStateChange,
+		tableOptions: (0, react.useMemo)(() => {
+			if (!expandedRowRenderEffective) return tableOptions;
+			if (tableOptions?.getRowCanExpand) return tableOptions;
+			return {
+				...tableOptions,
+				getRowCanExpand: () => true
+			};
+		}, [tableOptions, expandedRowRenderEffective])
+	});
+	(0, react.useImperativeHandle)(ref, () => table, [table]);
+	const wrapperRef = (0, react.useRef)(null);
+	const scrollShadow = useScrollShadow(wrapperRef);
+	const visibleLeafColumns = table.getVisibleLeafColumns();
+	const visibleColumnCount = visibleLeafColumns.length;
+	const rows = table.getRowModel().rows;
+	const cellSpans = computeCellSpans(rows, visibleLeafColumns);
+	const rowIds = rows.map((row) => row.id);
+	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor, { activationConstraint: { distance: 5 } }), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const oldIndex = rows.findIndex((row) => row.id === String(active.id));
+		const newIndex = rows.findIndex((row) => row.id === String(over.id));
+		if (oldIndex === -1 || newIndex === -1) return;
+		const nextData = (0, _dnd_kit_sortable.arrayMove)(data, oldIndex, newIndex);
+		onRowOrderChange?.(nextData, {
+			oldIndex,
+			newIndex,
+			activeId: String(active.id),
+			overId: String(over.id)
+		});
+	};
+	const toolbarNode = renderToolbar?.(table);
+	const skeletonRowCount = mergedFeatures.pagination ? table.getState().pagination.pageSize : DEFAULT_SKELETON_ROWS;
+	const bodyContent = loading ? Array.from({ length: skeletonRowCount }).map((_, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+		style: getCommonPinningStyles(column),
+		className: getColumnPinningClassName(column, scrollShadow),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_skeleton.Skeleton, { className: "h-4 w-full" })
+	}, column.id)) }, `loading-${rowIndex}`)) : rows.length ? rows.map((row, rowIndex) => {
+		const rawPanel = expandedRowRenderEffective && row.getIsExpanded() ? expandedRowRenderEffective(row) : void 0;
+		const expandedPanel = isRenderablePanel(rawPanel) ? rawPanel : void 0;
+		const isSelected = row.getIsSelected();
+		if (rowDndEnabled) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableTableRow, {
+			row,
+			rowIndex,
+			cellSpans,
+			scrollShadow,
+			onRowClick,
+			expandedPanel,
+			visibleColumnCount
+		}, row.id);
+		if (expandedPanel === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
+			"data-state": isSelected ? "selected" : void 0,
+			className: onRowClick ? "cursor-pointer" : void 0,
+			onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+			children: renderRowCells(row, rowIndex, cellSpans, scrollShadow)
+		}, row.id);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
+			"data-state": isSelected ? "selected" : void 0,
+			className: onRowClick ? "cursor-pointer" : void 0,
+			onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+			children: renderRowCells(row, rowIndex, cellSpans, scrollShadow)
+		}), renderExpandedPanel({
+			rowId: row.id,
+			panel: expandedPanel,
+			visibleColumnCount,
+			isSelected
+		})] }, row.id);
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
+		colSpan: visibleColumnCount,
+		className: "text-muted-foreground h-24 text-center",
+		children: empty
+	}) });
+	const standardBody = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: wrapperRef,
+		className: require_utils.cn("rounded-md", bordered && "border [&_td]:border-r [&_th]:border-r [&_tr>*:last-child]:border-r-0", tableClassName),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
+			className: "min-w-max",
+			style: mergedFeatures.columnResizing ? { width: table.getTotalSize() } : void 0,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableColumnHeader, {
+				header,
+				resizable: mergedFeatures.columnResizing,
+				scrollShadow
+			}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, { children: rowDndEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_sortable.SortableContext, {
+				items: rowIds,
+				strategy: _dnd_kit_sortable.verticalListSortingStrategy,
+				children: bodyContent
+			}) : bodyContent })]
+		})
+	});
+	const bodyNode = virtualEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableVirtualBody, {
+		table,
+		loading,
+		empty,
+		options: virtualOptions,
+		bordered,
+		className: tableClassName
+	}) : rowDndEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DndContext, {
+		sensors,
+		collisionDetection: _dnd_kit_core.closestCenter,
+		modifiers: [_dnd_kit_modifiers.restrictToVerticalAxis],
+		onDragEnd: handleDragEnd,
+		children: standardBody
+	}) : standardBody;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "data-table",
+		className: require_utils.cn("flex flex-col", className),
+		children: [
+			toolbarNode,
+			bodyNode,
+			mergedFeatures.pagination && (renderPagination !== void 0 ? renderPagination(table) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTablePagination, {
+				table,
+				pageSizeOptions
+			}))
+		]
+	});
+}
+/**
+* forwardRef 包装,泛型用 cast 保留 —— 否则会被 forwardRef 的签名擦除成 unknown
+*/
+var DataTable = (0, react.forwardRef)(DataTableInner);
+//#endregion
+//#region src/table/components/data-table-view-options.tsx
+/**
+* 列显隐 / 排序 / 固定 设置面板
+*
+* 通过 DropdownMenu 弹出列表,内置 DnD-Kit 排序与固定按钮
+*/
+function DataTableViewOptions({ table, enableOrdering = false, enablePinning = false, trigger }) {
+	const draggableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+	const draggableColumnIds = draggableColumns.map((column) => column.id);
+	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor, { activationConstraint: { distance: 5 } }), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
+	const handleDragEnd = ({ active, over }) => {
+		if (!over || active.id === over.id) return;
+		const currentOrder = table.getState().columnOrder;
+		const allColumnIds = table.getAllLeafColumns().map((column) => column.id);
+		const orderedColumnIds = currentOrder.length ? currentOrder.filter((columnId) => allColumnIds.includes(columnId)) : allColumnIds;
+		const nextOrder = [...orderedColumnIds, ...allColumnIds.filter((columnId) => !orderedColumnIds.includes(columnId))];
+		const oldIndex = nextOrder.indexOf(String(active.id));
+		const newIndex = nextOrder.indexOf(String(over.id));
+		if (oldIndex === -1 || newIndex === -1) return;
+		table.setColumnOrder((0, _dnd_kit_sortable.arrayMove)(nextOrder, oldIndex, newIndex));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenuTrigger, { render: trigger ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
+		variant: "outline",
+		size: "sm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings2Icon, {}), "视图"]
+	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenuContent, {
+		align: "end",
+		className: "min-w-56",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenuGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenuLabel, { children: "显示的列" }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenuSeparator, {}),
+			enableOrdering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DndContext, {
+				sensors,
+				collisionDetection: _dnd_kit_core.closestCenter,
+				modifiers: [_dnd_kit_modifiers.restrictToVerticalAxis],
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_sortable.SortableContext, {
+					items: enableOrdering ? draggableColumnIds : [],
+					strategy: _dnd_kit_sortable.verticalListSortingStrategy,
+					children: draggableColumns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableColumnItem, {
+						column,
+						enablePinning
+					}, column.id))
+				})
+			}) : draggableColumns.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnVisibilityItem, {
+				column,
+				enablePinning
+			}, column.id))
+		]
+	})] });
+}
+/**
+* 列设置项内部统一渲染:复选 + 列名 + 可选固定操作
+*/
+function ColumnItemBody({ column, enablePinning, dragHandle }) {
+	const pinned = column.getIsPinned();
+	const canPin = enablePinning && column.getCanPin();
+	const handlePinClick = (event, position) => {
+		event.preventDefault();
+		event.stopPropagation();
+		column.pin(position);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenuCheckboxItem, {
+		className: "capitalize",
+		checked: column.getIsVisible(),
+		onCheckedChange: (value) => column.toggleVisibility(!!value),
+		children: [
+			dragHandle,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "min-w-20 flex-1",
+				children: column.id
+			}),
+			canPin && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "ml-auto mr-5 flex items-center gap-1 normal-case",
+				onClick: (event) => event.stopPropagation(),
+				onPointerDown: (event) => event.stopPropagation(),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						type: "button",
+						variant: pinned === "left" ? "default" : "ghost",
+						size: "xs",
+						onClick: (event) => handlePinClick(event, "left"),
+						children: "左"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						type: "button",
+						variant: pinned ? "ghost" : "default",
+						size: "xs",
+						onClick: (event) => handlePinClick(event, false),
+						children: "无"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						type: "button",
+						variant: pinned === "right" ? "default" : "ghost",
+						size: "xs",
+						onClick: (event) => handlePinClick(event, "right"),
+						children: "右"
+					})
+				]
+			})
+		]
+	});
+}
+function ColumnVisibilityItem({ column, enablePinning }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnItemBody, {
+		column,
+		enablePinning
+	});
+}
+function SortableColumnItem({ column, enablePinning }) {
+	const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({ id: column.id });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: setNodeRef,
+		style: {
+			transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
+			transition
+		},
+		className: require_utils.cn(isDragging && "relative z-10 opacity-80"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnItemBody, {
+			column,
+			enablePinning,
+			dragHandle: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				ref: setActivatorNodeRef,
+				className: "cursor-grab active:cursor-grabbing",
+				"aria-label": `Reorder ${column.id} column`,
+				onClick: (event) => event.stopPropagation(),
+				...attributes,
+				...listeners,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVerticalIcon, { className: "size-[1em]" })
+			})
+		})
+	});
+}
+//#endregion
+//#region src/table/components/data-table-toolbar.tsx
+/**
+* 表格工具栏:搜索 + 视图配置 + 自定义扩展
+*/
+function DataTableToolbar({ table, searchColumnId, searchPlaceholder = "搜索...", showViewOptions = true, enableColumnOrdering, enableColumnPinning, extra, className }) {
+	const searchColumn = searchColumnId ? table.getColumn(searchColumnId) : void 0;
+	const useGlobalFilter = !searchColumn;
+	const value = useGlobalFilter ? table.getState().globalFilter : searchColumn?.getFilterValue();
+	const hasValue = Boolean(value);
+	const handleChange = (next) => {
+		if (useGlobalFilter) table.setGlobalFilter(next);
+		else searchColumn?.setFilterValue(next || void 0);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "data-table-toolbar",
+		className: require_utils.cn("flex flex-wrap items-center gap-2 py-3", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative max-w-sm flex-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, { className: "text-muted-foreground pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+					placeholder: searchPlaceholder,
+					value: value ?? "",
+					onChange: (event) => handleChange(event.target.value),
+					className: "pl-8 pr-8"
+				}),
+				hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-xs",
+					className: "absolute right-1 top-1/2 -translate-y-1/2",
+					"aria-label": "清除搜索",
+					onClick: () => handleChange(""),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "ml-auto flex items-center gap-2",
+			children: [extra, showViewOptions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableViewOptions, {
+				table,
+				enableOrdering: enableColumnOrdering,
+				enablePinning: enableColumnPinning
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/table/components/row-expand-toggle.tsx
+/**
+* 行展开切换按钮:基于 `row.getToggleExpandedHandler` + `row.depth` 自动缩进
+*
+* 配合 `features.expanding` 与 `tableOptions.getSubRows`(嵌套树),或 `expandedRowRender`(展开面板)使用
+*/
+function RowExpandToggle({ row, indent = 16, placeholder = true, className, ...props }) {
+	const paddingLeft = indent > 0 ? row.depth * indent : 0;
+	const canExpand = row.getCanExpand();
+	const isExpanded = row.getIsExpanded();
+	if (!canExpand) {
+		if (!placeholder) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": true,
+			className: "inline-flex size-6 shrink-0",
+			style: paddingLeft ? { marginLeft: paddingLeft } : void 0
+		});
+	}
+	const hasPanelTarget = row.subRows.length === 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": isExpanded ? "收起" : "展开",
+		"aria-expanded": isExpanded,
+		"aria-controls": isExpanded && hasPanelTarget ? panelIdFor(row.id) : void 0,
+		onClick: row.getToggleExpandedHandler(),
+		className: require_utils.cn("text-muted-foreground hover:text-foreground inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:outline-none", className),
+		style: paddingLeft ? { marginLeft: paddingLeft } : void 0,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: require_utils.cn("size-4 transition-transform", isExpanded ? "rotate-90" : "rotate-0") })
+	});
+}
+//#endregion
+Object.defineProperty(exports, "DataTable", {
+	enumerable: true,
+	get: function() {
+		return DataTable;
+	}
+});
+Object.defineProperty(exports, "DataTableColumnHeader", {
+	enumerable: true,
+	get: function() {
+		return DataTableColumnHeader;
+	}
+});
+Object.defineProperty(exports, "DataTablePagination", {
+	enumerable: true,
+	get: function() {
+		return DataTablePagination;
+	}
+});
+Object.defineProperty(exports, "DataTableToolbar", {
+	enumerable: true,
+	get: function() {
+		return DataTableToolbar;
+	}
+});
+Object.defineProperty(exports, "DataTableViewOptions", {
+	enumerable: true,
+	get: function() {
+		return DataTableViewOptions;
+	}
+});
+Object.defineProperty(exports, "DataTableVirtualBody", {
+	enumerable: true,
+	get: function() {
+		return DataTableVirtualBody;
+	}
+});
+Object.defineProperty(exports, "RowDragHandle", {
+	enumerable: true,
+	get: function() {
+		return RowDragHandle;
+	}
+});
+Object.defineProperty(exports, "RowDragHandleContext", {
+	enumerable: true,
+	get: function() {
+		return RowDragHandleContext;
+	}
+});
+Object.defineProperty(exports, "RowExpandToggle", {
+	enumerable: true,
+	get: function() {
+		return RowExpandToggle;
+	}
+});
+Object.defineProperty(exports, "Table", {
+	enumerable: true,
+	get: function() {
+		return Table;
+	}
+});
+Object.defineProperty(exports, "TableBody", {
+	enumerable: true,
+	get: function() {
+		return TableBody;
+	}
+});
+Object.defineProperty(exports, "TableCaption", {
+	enumerable: true,
+	get: function() {
+		return TableCaption;
+	}
+});
+Object.defineProperty(exports, "TableCell", {
+	enumerable: true,
+	get: function() {
+		return TableCell;
+	}
+});
+Object.defineProperty(exports, "TableFooter", {
+	enumerable: true,
+	get: function() {
+		return TableFooter;
+	}
+});
+Object.defineProperty(exports, "TableHead", {
+	enumerable: true,
+	get: function() {
+		return TableHead;
+	}
+});
+Object.defineProperty(exports, "TableHeader", {
+	enumerable: true,
+	get: function() {
+		return TableHeader;
+	}
+});
+Object.defineProperty(exports, "TableRow", {
+	enumerable: true,
+	get: function() {
+		return TableRow;
+	}
+});
+Object.defineProperty(exports, "computeCellSpans", {
+	enumerable: true,
+	get: function() {
+		return computeCellSpans;
+	}
+});
+Object.defineProperty(exports, "getColumnPinningClassName", {
+	enumerable: true,
+	get: function() {
+		return getColumnPinningClassName;
+	}
+});
+Object.defineProperty(exports, "getCommonPinningStyles", {
+	enumerable: true,
+	get: function() {
+		return getCommonPinningStyles;
+	}
+});
+Object.defineProperty(exports, "panelIdFor", {
+	enumerable: true,
+	get: function() {
+		return panelIdFor;
+	}
+});
+Object.defineProperty(exports, "useDataTable", {
+	enumerable: true,
+	get: function() {
+		return useDataTable;
+	}
+});
+Object.defineProperty(exports, "useScrollShadow", {
+	enumerable: true,
+	get: function() {
+		return useScrollShadow;
+	}
+});
+
+//# sourceMappingURL=table-FocfdaF7.js.map