erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/data-table-9HELVsYR.cjs

@@ -0,0 +1,1154 @@
+const require_chunk = require("./chunk-B_GkZjkl.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+const require_button = require("./button-CZL6kFzT.cjs");
+const require_checkbox = require("./checkbox-yHuSw-hV.cjs");
+const require_chip = require("./chip-DcBji__g.cjs");
+const require_combobox = require("./combobox-BXu3s0dt.cjs");
+const require_multi_select_combobox = require("./multi-select-combobox-UW0X15W7.cjs");
+const require_input = require("./input-D9qZNqXV.cjs");
+const require_select = require("./select-WC_kPqUP.cjs");
+const require_switch = require("./switch-C5otDb4c.cjs");
+const require_date_picker = require("./date-picker-W9om1j7A.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _tanstack_react_table = require("@tanstack/react-table");
+//#region src/components/data-display/data-table/DataTable.tsx
+function renderDefaultCellValue(value) {
+	if (value === void 0 || value === null || value === "") return "-";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (Array.isArray(value)) return value.length > 0 ? value.join(", ") : "-";
+	return value;
+}
+var FilterDropdown = ({ isOpen, onClose, children }) => {
+	if (!isOpen) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "fixed inset-0 z-40",
+		onClick: onClose,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "absolute top-full right-0 z-50 mt-2 min-w-64 overflow-hidden rounded-[4px] border border-white/45 bg-neutral-50 shadow-[0_18px_40px_rgba(15,23,42,0.18)] ring-1 ring-inset ring-white/35 backdrop-blur-2xl dark:border-white/10 dark:bg-neutral-800/50 dark:shadow-[0_22px_48px_rgba(0,0,0,0.42)] dark:ring-white/6",
+		children
+	})] });
+};
+var FilterButton = ({ icon, label, onClick, hasActive }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+	onClick,
+	title: label,
+	"aria-label": label,
+	className: `h-10 min-w-10 px-0 py-0 shadow-none ${hasActive ? "border-accent/20 bg-accent-subtle text-accent hover:bg-accent-subtle hover:opacity-100" : "border-transparent bg-transparent text-neutral-600 hover:bg-neutral-100 hover:text-neutral-700 hover:opacity-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200"}`,
+	children: icon
+});
+var ColumnToggle = ({ columns, onToggle, onShowAll, onHideAll }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: "p-4 space-y-3",
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex items-center justify-between mb-3",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-semibold text-neutral-900 dark:text-white",
+				children: "COLUMNS"
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "space-y-2 max-h-64 overflow-y-auto",
+			children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rounded-[8px] px-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-700",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
+					checked: col.visible !== false,
+					onChange: () => onToggle(col.id),
+					label: col.label
+				})
+			}, col.id))
+		}),
+		(onShowAll || onHideAll) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-2 border-t border-neutral-200 pt-2 dark:border-neutral-700",
+			children: [onShowAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				onClick: onShowAll,
+				size: "small",
+				className: "flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-accent shadow-none hover:bg-transparent hover:text-accent-hover hover:opacity-100",
+				children: "SHOW ALL"
+			}), onHideAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				onClick: onHideAll,
+				size: "small",
+				className: "flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-neutral-500 shadow-none hover:bg-transparent hover:text-neutral-600 hover:opacity-100 dark:text-neutral-300 dark:hover:text-white",
+				children: "HIDE ALL"
+			})]
+		})
+	]
+});
+var FilterProfile = ({ isOpen, onClose, onSaveProfile }) => {
+	const [profileName, setProfileName] = react.default.useState("");
+	const handleSave = () => {
+		if (profileName.trim()) {
+			onSaveProfile(profileName);
+			setProfileName("");
+			onClose();
+		}
+	};
+	if (!isOpen) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+		onClick: onClose,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "bg-white dark:bg-neutral-800 rounded-xl p-6 max-w-md w-full mx-4",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-2xl font-bold text-neutral-900 dark:text-white mb-4",
+					children: "Add new profile"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					className: "mb-2 block text-sm font-medium text-accent",
+					children: "Enter filter profile name:"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+					type: "text",
+					value: profileName,
+					onChange: (e) => setProfileName(e.target.value),
+					placeholder: "Enter value",
+					className: "",
+					onKeyDown: (e) => e.key === "Enter" && handleSave()
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex justify-end gap-3 mt-6",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						onClick: onClose,
+						className: "min-w-28",
+						size: "medium",
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+						onClick: handleSave,
+						disabled: !profileName.trim(),
+						className: "min-w-28",
+						size: "medium",
+						primary: true,
+						children: "Save"
+					})]
+				})
+			]
+		})
+	});
+};
+var ICON_BUTTON_CLASS_NAME = "inline-flex items-center justify-center rounded-lg text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-700";
+var DISABLED_ICON_BUTTON_CLASS_NAME = `${ICON_BUTTON_CLASS_NAME} disabled:opacity-40 disabled:cursor-not-allowed`;
+var TABLE_CONTROL_ICON_CLASS_NAME = "h-[18px] w-[18px] shrink-0";
+var TABLE_COMPLEX_ICON_CLASS_NAME = "h-5 w-5 shrink-0";
+var isFilterValueEmpty = (value) => {
+	if (value === void 0 || value === null) return true;
+	if (typeof value === "string") return value === "";
+	if (Array.isArray(value)) return value.length === 0;
+	if (value instanceof Date || typeof value === "boolean") return false;
+	if ("start" in value || "end" in value) {
+		const rangeValue = value;
+		return !rangeValue.start && !rangeValue.end;
+	}
+	return value.min === void 0 && value.max === void 0;
+};
+var isFilterActive = (value) => !isFilterValueEmpty(value);
+var toSelectOptions = (options) => (options || []).map((option) => ({
+	value: option,
+	label: option
+}));
+var getStringFilterValue = (value) => typeof value === "string" ? value : "";
+var getMultiStringFilterValue = (value) => {
+	if (Array.isArray(value)) return value;
+	return typeof value === "string" && value ? [value] : [];
+};
+var getNumberRangeFilterValue = (value) => {
+	if (!value || typeof value !== "object" || "start" in value || "end" in value) return {};
+	return value;
+};
+var getDateFilterValue = (value) => value instanceof Date || value === null ? value : null;
+var getDateRangeFilterValue = (value) => {
+	if (value && typeof value === "object" && "start" in value && "end" in value) return value;
+	return {
+		start: null,
+		end: null
+	};
+};
+function buildGeneratedFilterOptions(columns, data) {
+	return columns.filter((column) => column.filterable !== false).map((column) => {
+		const uniqueValues = /* @__PURE__ */ new Set();
+		data.forEach((row) => {
+			const value = row[column.id];
+			if (value !== void 0 && value !== null && value !== "") uniqueValues.add(String(value));
+		});
+		return {
+			id: column.id,
+			label: column.label,
+			options: Array.from(uniqueValues).sort(),
+			multiple: column.multiFilter
+		};
+	});
+}
+function resolveFilterOptions(columns, data, externalFilterOptions, asyncFilterOptions) {
+	if (!externalFilterOptions?.length) return buildGeneratedFilterOptions(columns, data);
+	return externalFilterOptions.map((filter) => {
+		const asyncState = asyncFilterOptions[filter.id];
+		if (!asyncState) return filter;
+		return {
+			...filter,
+			options: asyncState.options,
+			isLoading: asyncState.isLoading
+		};
+	});
+}
+function matchesSearchQuery(row, searchQuery) {
+	if (!searchQuery.trim()) return true;
+	const query = searchQuery.toLowerCase();
+	return Object.values(row).some((value) => {
+		if (value === void 0 || value === null) return false;
+		return String(value).toLowerCase().includes(query);
+	});
+}
+function matchesFilterValue(rowValue, filterValue, filterOption) {
+	if (isFilterValueEmpty(filterValue)) return true;
+	switch (filterOption?.type) {
+		case "text": return String(rowValue).toLowerCase().includes(String(filterValue).toLowerCase());
+		case "number-range": {
+			const rangeValue = getNumberRangeFilterValue(filterValue);
+			const numericValue = Number(rowValue);
+			if (rangeValue.min !== void 0 && numericValue < rangeValue.min) return false;
+			if (rangeValue.max !== void 0 && numericValue > rangeValue.max) return false;
+			return true;
+		}
+		case "date-range": {
+			const rangeValue = getDateRangeFilterValue(filterValue);
+			if (!rangeValue.start) return true;
+			const timeValue = new Date(rowValue).getTime();
+			if (timeValue < rangeValue.start.getTime()) return false;
+			return !rangeValue.end || timeValue <= rangeValue.end.getTime();
+		}
+		case "date": {
+			const selectedDate = filterValue;
+			const rowDate = new Date(rowValue);
+			return selectedDate.toDateString() === rowDate.toDateString();
+		}
+		case "switch":
+		case "checkbox": return Boolean(rowValue) === Boolean(filterValue);
+		default: {
+			const rowValueString = String(rowValue).toLowerCase();
+			if (Array.isArray(filterValue)) return filterValue.some((value) => String(value).toLowerCase() === rowValueString);
+			return typeof filterValue !== "string" ? true : rowValueString === filterValue.toLowerCase();
+		}
+	}
+}
+function filterClientData(data, activeFilters, searchQuery, serverSideFiltering, filterOptions) {
+	if (serverSideFiltering) return data;
+	const filterOptionsMap = new Map(filterOptions.map((filterOption) => [filterOption.id, filterOption]));
+	return data.filter((row) => {
+		if (!matchesSearchQuery(row, searchQuery)) return false;
+		return Object.entries(activeFilters).every(([filterId, filterValue]) => {
+			const rowValue = row[filterId];
+			return matchesFilterValue(rowValue, filterValue, filterOptionsMap.get(filterId));
+		});
+	});
+}
+function useAsyncFilterOptions(externalFilterOptions, filterSelectorOpen) {
+	const [asyncFilterOptions, setAsyncFilterOptions] = react.default.useState({});
+	const asyncFilterOptionsRef = react.default.useRef(asyncFilterOptions);
+	react.default.useEffect(() => {
+		asyncFilterOptionsRef.current = asyncFilterOptions;
+	}, [asyncFilterOptions]);
+	const fetchAsyncOptions = react.default.useCallback(async (filter) => {
+		if (!filter.fetchOptions || asyncFilterOptionsRef.current[filter.id]?.options.length) return;
+		setAsyncFilterOptions((prev) => ({
+			...prev,
+			[filter.id]: {
+				options: [],
+				isLoading: true
+			}
+		}));
+		try {
+			const options = await filter.fetchOptions();
+			setAsyncFilterOptions((prev) => ({
+				...prev,
+				[filter.id]: {
+					options,
+					isLoading: false
+				}
+			}));
+		} catch {
+			setAsyncFilterOptions((prev) => ({
+				...prev,
+				[filter.id]: {
+					options: [],
+					isLoading: false
+				}
+			}));
+		}
+	}, []);
+	react.default.useEffect(() => {
+		if (!filterSelectorOpen || !externalFilterOptions) return;
+		externalFilterOptions.forEach((filter) => {
+			if (filter.fetchOptions) fetchAsyncOptions(filter);
+		});
+	}, [
+		externalFilterOptions,
+		fetchAsyncOptions,
+		filterSelectorOpen
+	]);
+	return asyncFilterOptions;
+}
+function LoadingFilterField({ label }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "h-10 flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 rounded-md px-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.LoaderIcon, {
+			className: "w-4 h-4 animate-spin text-neutral-400",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "ml-2 text-sm text-neutral-500",
+			children: label
+		})]
+	});
+}
+function NumberRangeFilter({ value, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-1",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+				type: "number",
+				placeholder: "Min",
+				value: value.min ?? "",
+				onChange: (event) => {
+					const min = event.target.value === "" ? void 0 : Number(event.target.value);
+					onChange({
+						...value,
+						min
+					});
+				},
+				className: "h-9 px-2 text-xs"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-neutral-400",
+				children: "-"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+				type: "number",
+				placeholder: "Max",
+				value: value.max ?? "",
+				onChange: (event) => {
+					const max = event.target.value === "" ? void 0 : Number(event.target.value);
+					onChange({
+						...value,
+						max
+					});
+				},
+				className: "h-9 px-2 text-xs"
+			})
+		]
+	});
+}
+function FilterFieldControl({ filter, value, isActive, onChange }) {
+	if (filter.isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingFilterField, { label: filter.label });
+	const activeClassName = isActive ? "border-accent" : "";
+	switch (filter.type) {
+		case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+			value: getStringFilterValue(value),
+			onChange: (event) => onChange(event.target.value),
+			placeholder: filter.placeholder || filter.label,
+			className: activeClassName
+		});
+		case "select": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.Select, {
+			value: getStringFilterValue(value),
+			onChange: (event) => onChange(event.target.value),
+			placeholder: filter.placeholder || filter.label,
+			options: toSelectOptions(filter.options),
+			className: activeClassName
+		});
+		case "switch":
+		case "checkbox": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_switch.Switch, {
+			checked: Boolean(value),
+			onChange: (event) => onChange(event.target.checked),
+			label: filter.label
+		});
+		case "date": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_date_picker.DatePicker, {
+			mode: "single",
+			value: getDateFilterValue(value),
+			onChange: (nextValue) => onChange(nextValue),
+			placeholder: filter.placeholder || filter.label
+		});
+		case "date-range": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_date_picker.DatePicker, {
+			mode: "range",
+			value: getDateRangeFilterValue(value),
+			onChange: (nextValue) => onChange(nextValue),
+			placeholder: filter.placeholder || filter.label
+		});
+		case "number-range": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberRangeFilter, {
+			value: getNumberRangeFilterValue(value),
+			onChange
+		});
+		default: return filter.multiple ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_multi_select_combobox.MultiSelectCombobox, {
+			value: getMultiStringFilterValue(value),
+			onChange: (values) => onChange(values),
+			placeholder: filter.placeholder || filter.label,
+			options: toSelectOptions(filter.options),
+			className: isActive ? "border-accent border-2" : ""
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_combobox.Combobox, {
+			value: getStringFilterValue(value),
+			onChange: (nextValue) => onChange(nextValue),
+			placeholder: filter.placeholder || filter.label,
+			options: toSelectOptions(filter.options),
+			className: isActive ? "border-accent border-2" : ""
+		});
+	}
+}
+function ToolbarIconButton({ title, onClick, disabled, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		onClick,
+		disabled,
+		title,
+		"aria-label": title,
+		className: disabled ? `${DISABLED_ICON_BUTTON_CLASS_NAME} h-10 w-10 shrink-0 border-transparent bg-transparent px-0 py-0 text-base shadow-none hover:bg-transparent hover:opacity-100` : `${ICON_BUTTON_CLASS_NAME} h-10 w-10 shrink-0 border-transparent bg-transparent px-0 py-0 text-base shadow-none hover:opacity-100`,
+		children
+	});
+}
+function SearchField({ value, onChange, placeholder }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative w-[300px]",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.SearchIcon, {
+			className: `pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-neutral-400 ${TABLE_CONTROL_ICON_CLASS_NAME}`,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+			type: "text",
+			value,
+			onChange: (event) => onChange(event.target.value),
+			placeholder,
+			style: { paddingLeft: "2.75rem" }
+		})]
+	});
+}
+function RowActionsCell({ rowIndex, row, isOpen, onToggle, onClose, onRowAction }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", {
+		className: "px-2 py-3 text-right relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			onClick: () => onToggle(rowIndex),
+			"aria-label": "Open row actions",
+			className: "h-8 w-8 border-none bg-transparent px-0 py-0 text-neutral-500 shadow-none hover:bg-neutral-100 hover:text-neutral-700 hover:opacity-100 dark:hover:bg-neutral-600 dark:hover:text-neutral-200",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.EllipsisVerticalIcon, {
+				className: TABLE_CONTROL_ICON_CLASS_NAME,
+				"aria-hidden": "true"
+			})
+		}), isOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "fixed inset-0 z-40",
+			onClick: onClose
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "absolute right-0 top-full mt-1 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 z-50 min-w-32 py-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				onClick: () => {
+					onRowAction?.("edit", row);
+					onClose();
+				},
+				className: "w-full justify-start rounded-none border-none bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 shadow-none hover:bg-neutral-50 hover:text-neutral-900 hover:opacity-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white",
+				children: "Edit"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				onClick: () => {
+					onRowAction?.("delete", row);
+					onClose();
+				},
+				className: "w-full justify-start rounded-none border-none bg-transparent px-4 py-2 text-sm font-normal text-error shadow-none hover:bg-neutral-50 hover:text-error hover:opacity-100 dark:hover:bg-neutral-700",
+				children: "Delete"
+			})]
+		})] }) : null]
+	});
+}
+function DataTablePagination({ table, totalCount, filteredCount }) {
+	const { pageIndex, pageSize } = table.getState().pagination;
+	const itemCount = totalCount ?? filteredCount;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex items-center gap-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-sm text-neutral-600 dark:text-neutral-400",
+				children: [
+					"Showing ",
+					itemCount === 0 ? 0 : pageIndex * pageSize + 1,
+					" to ",
+					Math.min((pageIndex + 1) * pageSize, itemCount),
+					" of ",
+					itemCount,
+					" items"
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-wrap items-center justify-end gap-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-sm text-neutral-600 dark:text-neutral-400",
+					children: "Rows"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.Select, {
+					value: String(pageSize),
+					onChange: (event) => table.setPageSize(Number(event.target.value)),
+					"aria-label": "Rows per page",
+					containerClassName: "w-24 min-w-24 shrink-0",
+					triggerClassName: "px-3 font-medium text-neutral-900 dark:text-white",
+					options: [
+						10,
+						20,
+						30,
+						50,
+						100
+					].map((size) => ({
+						value: String(size),
+						label: String(size)
+					}))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+					title: "First page",
+					onClick: () => table.setPageIndex(0),
+					disabled: !table.getCanPreviousPage(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronsLeftIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+					title: "Previous page",
+					onClick: () => table.previousPage(),
+					disabled: !table.getCanPreviousPage(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronLeftIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "inline-flex h-10 shrink-0 items-center rounded-lg px-3 text-sm font-medium text-neutral-700 dark:text-neutral-300",
+					children: [
+						"Page ",
+						pageIndex + 1,
+						" of ",
+						table.getPageCount()
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+					title: "Next page",
+					onClick: () => table.nextPage(),
+					disabled: !table.getCanNextPage(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronRightIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+					title: "Last page",
+					onClick: () => table.setPageIndex(table.getPageCount() - 1),
+					disabled: !table.getCanNextPage(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronsRightIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
+					})
+				})
+			]
+		})]
+	});
+}
+function FilterSelectorMenu({ filterOptions, visibleFilters, onToggleFilter, onShowAll, onHideAll }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "p-2 min-w-48 space-y-1",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "px-2 pb-2 text-xs font-semibold text-neutral-500 dark:text-neutral-300",
+				children: "Show filters"
+			}),
+			filterOptions.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-w-36",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
+					checked: visibleFilters.includes(filter.id),
+					onChange: (event) => onToggleFilter(filter.id, event.target.checked),
+					label: filter.label
+				})
+			}, filter.id)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex gap-2 border-t border-neutral-200 pt-2 dark:border-neutral-700",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					onClick: onShowAll,
+					size: "small",
+					className: "flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-accent shadow-none hover:bg-transparent hover:text-accent-hover hover:opacity-100",
+					children: "SHOW ALL"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					onClick: onHideAll,
+					size: "small",
+					className: "flex-1 border-none bg-transparent px-1 py-1 text-xs font-semibold text-neutral-500 shadow-none hover:bg-transparent hover:text-neutral-600 hover:opacity-100 dark:text-neutral-300 dark:hover:text-white",
+					children: "HIDE ALL"
+				})]
+			})
+		]
+	});
+}
+function DataTableToolbar({ searchQuery, onSearchChange, searchPlaceholder, bulkDeleteEnabled, bulkSelectionActive, selectedCount, bulkActionsContent, bulkActionCard, onToggleBulkSelection, onBulkDeleteSelected, onExport, columnMenuOpen, onToggleColumnMenu, onCloseColumnMenu, columns, onColumnToggle, onShowAllColumns, onHideAllColumns }) {
+	const hasSelectedRows = selectedCount > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-b border-neutral-200 px-4 py-3 dark:border-neutral-700",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
+				children: [bulkDeleteEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton, {
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.SelectionIcon, {
+						className: TABLE_COMPLEX_ICON_CLASS_NAME,
+						"aria-hidden": "true"
+					}),
+					label: bulkSelectionActive ? "Disable bulk selection" : "Enable bulk selection",
+					onClick: onToggleBulkSelection,
+					hasActive: bulkSelectionActive
+				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchField, {
+					value: searchQuery,
+					onChange: onSearchChange,
+					placeholder: searchPlaceholder
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-1 self-end lg:self-auto",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+					onClick: onExport,
+					title: "Refresh",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.RefreshIcon, {
+						className: TABLE_CONTROL_ICON_CLASS_NAME,
+						"aria-hidden": "true"
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+						onClick: onToggleColumnMenu,
+						title: "Column settings",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.SettingsIcon, {
+							className: TABLE_COMPLEX_ICON_CLASS_NAME,
+							"aria-hidden": "true"
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
+						isOpen: columnMenuOpen,
+						onClose: onCloseColumnMenu,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnToggle, {
+							columns,
+							onToggle: (columnId) => {
+								onColumnToggle?.(columnId);
+							},
+							onShowAll: onShowAllColumns,
+							onHideAll: onHideAllColumns
+						})
+					})]
+				})]
+			})]
+		}), bulkSelectionActive && hasSelectedRows ? bulkActionCard ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mt-2 flex flex-col gap-2 rounded-[4px] border border-neutral-200 bg-neutral-50 px-3 py-2 shadow-sm dark:border-neutral-700 dark:bg-neutral-800/50 dark:shadow-black/25 lg:flex-row lg:items-center lg:justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chip.Chip, {
+					variant: "soft",
+					color: "primary",
+					size: "sm",
+					className: "uppercase tracking-wide",
+					children: "Bulk actions"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-sm font-medium text-neutral-900 dark:text-white",
+					children: [
+						selectedCount,
+						" ",
+						selectedCount === 1 ? "row" : "rows",
+						" ",
+						"selected"
+					]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [bulkActionsContent, bulkDeleteEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
+					onClick: onBulkDeleteSelected,
+					primary: true,
+					size: "small",
+					className: "border-accent/20 px-3 py-2 text-sm text-on-accent shadow-lg shadow-accent/20 hover:bg-accent-hover hover:opacity-100",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.TrashIcon, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}), "Delete selected"]
+				}) : null]
+			})]
+		}) : null]
+	});
+}
+function TableStateRow({ colSpan, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+		colSpan,
+		className: "px-4 py-12 text-center text-neutral-500",
+		children
+	}) });
+}
+function LoadingTableState({ colSpan }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableStateRow, {
+		colSpan,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.LoaderIcon, {
+				className: "w-8 h-8 animate-spin text-accent",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Loading data..." })]
+		})
+	});
+}
+function EmptyTableState({ colSpan }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableStateRow, {
+		colSpan,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-4xl",
+					children: "🔍"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "font-medium",
+					children: "No results found"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm",
+					children: "Try adjusting the filter"
+				})
+			]
+		})
+	});
+}
+function DataTableRows({ table, isLoading, bulkSelectionActive, selectedRowIds, onToggleRowSelection, rowMenuOpen, onToggleRowMenu, onCloseRowMenu, onRowAction }) {
+	const colSpan = table.getVisibleLeafColumns().length + (bulkSelectionActive ? 2 : 1);
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingTableState, { colSpan });
+	if (table.getRowModel().rows.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyTableState, { colSpan });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+		className: "border-b border-neutral-100 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700/50 transition-colors",
+		children: [
+			bulkSelectionActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: "w-12 px-4 py-3 align-middle",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
+					"aria-label": `Select row ${row.id}`,
+					checked: Boolean(selectedRowIds[row.id]),
+					onChange: (event) => onToggleRowSelection(row.id, event.target.checked)
+				})
+			}) : null,
+			row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: "px-4 py-3 text-sm text-neutral-700 dark:text-neutral-300",
+				children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+			}, cell.id)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActionsCell, {
+				rowIndex: row.index,
+				row: row.original,
+				isOpen: rowMenuOpen === row.index,
+				onToggle: onToggleRowMenu,
+				onClose: onCloseRowMenu,
+				onRowAction
+			})
+		]
+	}, row.id)) });
+}
+var usesManualPagination = (totalCount, onPaginationChange) => totalCount !== void 0 || typeof onPaginationChange === "function";
+function DataTable({ columns, data, isLoading = false, onColumnToggle, pageSize = 10, maxHeight = "500px", onSearch, onExport, onRowAction, onBulkDelete, renderBulkActions, renderBulkActionCard, onFilterChange, onFiltersApply, serverSideFiltering = false, filterOptions: externalFilterOptions, searchPlaceholder = "Search ...", totalCount, onPaginationChange }) {
+	const [pagination, setPagination] = react.default.useState({
+		pageIndex: 0,
+		pageSize
+	});
+	const [columnMenuOpen, setColumnMenuOpen] = react.default.useState(false);
+	const [profileMenuOpen, setProfileMenuOpen] = react.default.useState(false);
+	const [profileOpen, setProfileOpen] = react.default.useState(false);
+	const [filterSelectorOpen, setFilterSelectorOpen] = react.default.useState(false);
+	const [visibleFilters, setVisibleFilters] = react.default.useState([]);
+	const [activeFilters, setActiveFilters] = react.default.useState({});
+	const [bulkSelectionActive, setBulkSelectionActive] = react.default.useState(false);
+	const [selectedRowIds, setSelectedRowIds] = react.default.useState({});
+	const [rowMenuOpen, setRowMenuOpen] = react.default.useState(null);
+	const [searchQuery, setSearchQuery] = react.default.useState("");
+	const [columnVisibility, setColumnVisibility] = react.default.useState(() => Object.fromEntries(columns.map((column) => [column.id, column.visible !== false])));
+	const columnsVisibilitySignature = react.default.useMemo(() => columns.map((column) => `${column.id}:${column.visible !== false}`).join("|"), [columns]);
+	react.default.useEffect(() => {
+		setColumnVisibility(Object.fromEntries(columns.map((column) => [column.id, column.visible !== false])));
+	}, [columns, columnsVisibilitySignature]);
+	const asyncFilterOptions = useAsyncFilterOptions(externalFilterOptions, filterSelectorOpen);
+	const filterOptions = react.default.useMemo(() => {
+		return resolveFilterOptions(columns, data, externalFilterOptions, asyncFilterOptions);
+	}, [
+		columns,
+		data,
+		externalFilterOptions,
+		asyncFilterOptions
+	]);
+	const resolvedColumns = react.default.useMemo(() => columns.map((column) => ({
+		...column,
+		visible: columnVisibility[column.id] ?? column.visible !== false
+	})), [columnVisibility, columns]);
+	const visibleColumns = react.default.useMemo(() => resolvedColumns.filter((column) => column.visible !== false), [resolvedColumns]);
+	const manualPagination = usesManualPagination(totalCount, onPaginationChange);
+	const pageCount = totalCount === void 0 ? void 0 : Math.ceil(totalCount / pagination.pageSize);
+	const filteredData = react.default.useMemo(() => {
+		return filterClientData(data, activeFilters, searchQuery, serverSideFiltering, filterOptions);
+	}, [
+		data,
+		activeFilters,
+		searchQuery,
+		serverSideFiltering,
+		filterOptions
+	]);
+	const tableColumns = react.default.useMemo(() => visibleColumns.map((col) => ({
+		id: col.id,
+		accessorKey: col.id,
+		header: col.label,
+		cell: (info) => {
+			const value = info.getValue();
+			if (col.renderCell) return col.renderCell({
+				value,
+				row: info.row.original,
+				rowIndex: info.row.index,
+				columnId: col.id
+			});
+			return renderDefaultCellValue(value);
+		}
+	})), [visibleColumns]);
+	const updatePagination = react.default.useCallback((updater) => {
+		setPagination((previous) => {
+			const nextPagination = typeof updater === "function" ? updater(previous) : updater;
+			if (previous.pageIndex !== nextPagination.pageIndex || previous.pageSize !== nextPagination.pageSize) onPaginationChange?.(nextPagination.pageIndex, nextPagination.pageSize);
+			return nextPagination;
+		});
+	}, [onPaginationChange]);
+	const table = (0, _tanstack_react_table.useReactTable)({
+		data: filteredData,
+		columns: tableColumns,
+		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
+		getPaginationRowModel: (0, _tanstack_react_table.getPaginationRowModel)(),
+		getFilteredRowModel: (0, _tanstack_react_table.getFilteredRowModel)(),
+		state: {
+			pagination,
+			globalFilter: searchQuery
+		},
+		onPaginationChange: updatePagination,
+		manualPagination,
+		pageCount
+	});
+	const visibleRows = table.getRowModel().rows;
+	const bulkDeleteEnabled = typeof onBulkDelete === "function";
+	const selectedRows = react.default.useMemo(() => visibleRows.filter((row) => selectedRowIds[row.id]).map((row) => row.original), [selectedRowIds, visibleRows]);
+	const allVisibleRowsSelected = visibleRows.length > 0 && visibleRows.every((row) => selectedRowIds[row.id]);
+	react.default.useEffect(() => {
+		updatePagination((previous) => previous.pageIndex === 0 ? previous : {
+			...previous,
+			pageIndex: 0
+		});
+	}, [
+		activeFilters,
+		searchQuery,
+		updatePagination
+	]);
+	react.default.useEffect(() => {
+		setSelectedRowIds((previous) => {
+			const visibleRowIds = new Set(visibleRows.map((row) => row.id));
+			const nextSelection = Object.fromEntries(Object.entries(previous).filter(([rowId, isSelected]) => isSelected && visibleRowIds.has(rowId)));
+			return Object.keys(previous).sort().join("|") === Object.keys(nextSelection).sort().join("|") ? previous : nextSelection;
+		});
+	}, [visibleRows]);
+	const applyFilters = react.default.useCallback((nextFilters) => {
+		setActiveFilters(nextFilters);
+		onFilterChange?.(nextFilters);
+		if (serverSideFiltering) onFiltersApply?.(nextFilters);
+	}, [
+		onFilterChange,
+		onFiltersApply,
+		serverSideFiltering
+	]);
+	const handleSearchChange = react.default.useCallback((value) => {
+		setSearchQuery(value);
+		onSearch?.(value);
+	}, [onSearch]);
+	const handleFilterChange = react.default.useCallback((filterId, value) => {
+		applyFilters({
+			...activeFilters,
+			[filterId]: value
+		});
+	}, [activeFilters, applyFilters]);
+	const handleResetFilters = react.default.useCallback(() => {
+		applyFilters({});
+	}, [applyFilters]);
+	const handleToggleFilterVisibility = react.default.useCallback((filterId, isVisible) => {
+		setVisibleFilters((previous) => {
+			if (isVisible) return previous.includes(filterId) ? previous : [...previous, filterId];
+			return previous.filter((id) => id !== filterId);
+		});
+		if (!isVisible && filterId in activeFilters) {
+			const nextFilters = { ...activeFilters };
+			delete nextFilters[filterId];
+			applyFilters(nextFilters);
+		}
+	}, [activeFilters, applyFilters]);
+	const handleShowAllFilters = react.default.useCallback(() => {
+		setVisibleFilters(filterOptions.map((filter) => filter.id));
+	}, [filterOptions]);
+	const handleHideAllFilters = react.default.useCallback(() => {
+		setVisibleFilters([]);
+		handleResetFilters();
+	}, [handleResetFilters]);
+	const handleToggleRowMenu = react.default.useCallback((rowIndex) => {
+		setRowMenuOpen((previous) => previous === rowIndex ? null : rowIndex);
+	}, []);
+	const handleToggleFilterSelector = react.default.useCallback(() => {
+		setFilterSelectorOpen((previous) => !previous);
+	}, []);
+	const handleToggleProfileMenu = react.default.useCallback(() => {
+		setProfileMenuOpen((previous) => !previous);
+	}, []);
+	const handleToggleColumnMenu = react.default.useCallback(() => {
+		setColumnMenuOpen((previous) => !previous);
+	}, []);
+	const handleToggleColumnVisibility = react.default.useCallback((columnId) => {
+		setColumnVisibility((previous) => ({
+			...previous,
+			[columnId]: !(previous[columnId] ?? true)
+		}));
+		onColumnToggle?.(columnId);
+	}, [onColumnToggle]);
+	const handleShowAllColumns = react.default.useCallback(() => {
+		setColumnVisibility(Object.fromEntries(columns.map((column) => [column.id, true])));
+	}, [columns]);
+	const handleHideAllColumns = react.default.useCallback(() => {
+		setColumnVisibility(Object.fromEntries(columns.map((column) => [column.id, false])));
+	}, [columns]);
+	const handleToggleBulkSelection = react.default.useCallback(() => {
+		setBulkSelectionActive((previous) => {
+			if (previous) setSelectedRowIds({});
+			return !previous;
+		});
+	}, []);
+	const handleToggleRowSelection = react.default.useCallback((rowId, checked) => {
+		setSelectedRowIds((previous) => {
+			if (checked) return {
+				...previous,
+				[rowId]: true
+			};
+			const nextSelection = { ...previous };
+			delete nextSelection[rowId];
+			return nextSelection;
+		});
+	}, []);
+	const handleToggleAllVisibleRows = react.default.useCallback((checked) => {
+		setSelectedRowIds((previous) => {
+			const nextSelection = { ...previous };
+			visibleRows.forEach((row) => {
+				if (checked) nextSelection[row.id] = true;
+				else delete nextSelection[row.id];
+			});
+			return nextSelection;
+		});
+	}, [visibleRows]);
+	const handleBulkDeleteSelected = react.default.useCallback(() => {
+		if (!onBulkDelete || selectedRows.length === 0) return;
+		onBulkDelete(selectedRows);
+		setSelectedRowIds({});
+	}, [onBulkDelete, selectedRows]);
+	const handleClearSelectedRows = react.default.useCallback(() => {
+		setSelectedRowIds({});
+	}, []);
+	const handleDisableBulkSelection = react.default.useCallback(() => {
+		setBulkSelectionActive(false);
+		setSelectedRowIds({});
+	}, []);
+	const bulkActionContext = react.default.useMemo(() => ({
+		selectedRows,
+		selectedCount: selectedRows.length,
+		clearSelection: handleClearSelectedRows,
+		disableBulkSelection: handleDisableBulkSelection
+	}), [
+		handleClearSelectedRows,
+		handleDisableBulkSelection,
+		selectedRows
+	]);
+	const bulkActionsContent = renderBulkActions?.(bulkActionContext);
+	const bulkActionCard = renderBulkActionCard?.(bulkActionContext);
+	const handleOpenProfile = react.default.useCallback(() => {
+		setProfileOpen(true);
+		setProfileMenuOpen(false);
+	}, []);
+	const hasActiveFilters = Object.values(activeFilters).some(isFilterActive);
+	const handleSaveProfile = (profileName) => {
+		(/* @__PURE__ */ new Date()).toISOString();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-0",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-4 flex items-center justify-between gap-4 rounded-[8px] border border-neutral-200 bg-neutral-50 px-4 py-4 dark:border-neutral-700 dark:bg-neutral-800/50",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center gap-3 flex-wrap",
+					children: filterOptions.filter((filter) => visibleFilters.includes(filter.id)).map((filter, index) => {
+						const isActive = isFilterActive(activeFilters[filter.id]);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `min-w-[200px] ${index > 0 ? "border-l border-neutral-200 pl-3 dark:border-neutral-600" : ""}`,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterFieldControl, {
+								filter,
+								value: activeFilters[filter.id],
+								isActive,
+								onChange: (value) => handleFilterChange(filter.id, value)
+							})
+						}, filter.id);
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-1 ml-auto",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+								onClick: handleToggleFilterSelector,
+								title: "Add filter",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FilterIcon, {
+									className: TABLE_COMPLEX_ICON_CLASS_NAME,
+									"aria-hidden": "true"
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
+								isOpen: filterSelectorOpen,
+								onClose: () => setFilterSelectorOpen(false),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterSelectorMenu, {
+									filterOptions,
+									visibleFilters,
+									onToggleFilter: handleToggleFilterVisibility,
+									onShowAll: handleShowAllFilters,
+									onHideAll: handleHideAllFilters
+								})
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+							onClick: handleResetFilters,
+							disabled: !hasActiveFilters,
+							title: "Clear filters",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FilterXIcon, {
+								className: TABLE_COMPLEX_ICON_CLASS_NAME,
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarIconButton, {
+								onClick: handleToggleProfileMenu,
+								title: "Filter profiles",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.FilterProfileIcon, {
+									className: TABLE_COMPLEX_ICON_CLASS_NAME,
+									"aria-hidden": "true"
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterDropdown, {
+								isOpen: profileMenuOpen,
+								onClose: () => setProfileMenuOpen(false),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "p-2 min-w-48",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+										onClick: handleOpenProfile,
+										className: "w-full justify-start border-2 border-dashed border-accent/40 bg-transparent px-4 py-3 text-left text-sm font-medium text-accent shadow-none hover:bg-accent-subtle hover:opacity-100",
+										children: "Save new filter profile"
+									})
+								})
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bg-background-secondary rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableToolbar, {
+						searchQuery,
+						onSearchChange: handleSearchChange,
+						searchPlaceholder,
+						bulkDeleteEnabled,
+						bulkSelectionActive,
+						selectedCount: selectedRows.length,
+						bulkActionsContent,
+						bulkActionCard,
+						onToggleBulkSelection: handleToggleBulkSelection,
+						onBulkDeleteSelected: handleBulkDeleteSelected,
+						onExport,
+						columnMenuOpen,
+						onToggleColumnMenu: handleToggleColumnMenu,
+						onCloseColumnMenu: () => setColumnMenuOpen(false),
+						columns: resolvedColumns,
+						onColumnToggle: handleToggleColumnVisibility,
+						onShowAllColumns: handleShowAllColumns,
+						onHideAllColumns: handleHideAllColumns
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "overflow-auto",
+						style: { maxHeight },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+							className: "w-full min-w-[600px]",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+								className: "sticky top-0 z-10 bg-background-secondary",
+								children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+									className: "border-b border-neutral-200 dark:border-neutral-700",
+									children: [
+										bulkSelectionActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+											className: "w-12 px-4 py-3 bg-background-secondary",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox.Checkbox, {
+												"aria-label": "Select all visible rows",
+												checked: allVisibleRowsSelected,
+												onChange: (event) => handleToggleAllVisibleRows(event.target.checked)
+											})
+										}) : null,
+										headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+											className: "bg-background-secondary px-4 py-3 text-left text-sm font-semibold text-neutral-900 dark:text-white whitespace-nowrap",
+											children: header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+										}, header.id)),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { className: "w-12 bg-background-secondary" })
+									]
+								}, headerGroup.id))
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableRows, {
+								table,
+								isLoading,
+								bulkSelectionActive,
+								selectedRowIds,
+								onToggleRowSelection: handleToggleRowSelection,
+								rowMenuOpen,
+								onToggleRowMenu: handleToggleRowMenu,
+								onCloseRowMenu: () => setRowMenuOpen(null),
+								onRowAction
+							}) })]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTablePagination, {
+						table,
+						totalCount,
+						filteredCount: filteredData.length
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterProfile, {
+				isOpen: profileOpen,
+				onClose: () => setProfileOpen(false),
+				onSaveProfile: (name) => {
+					handleSaveProfile(name);
+					setProfileOpen(false);
+				}
+			})
+		]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "ColumnToggle", {
+	enumerable: true,
+	get: function() {
+		return ColumnToggle;
+	}
+});
+Object.defineProperty(exports, "DataTable", {
+	enumerable: true,
+	get: function() {
+		return DataTable;
+	}
+});
+Object.defineProperty(exports, "FilterButton", {
+	enumerable: true,
+	get: function() {
+		return FilterButton;
+	}
+});
+Object.defineProperty(exports, "FilterDropdown", {
+	enumerable: true,
+	get: function() {
+		return FilterDropdown;
+	}
+});
+Object.defineProperty(exports, "FilterProfile", {
+	enumerable: true,
+	get: function() {
+		return FilterProfile;
+	}
+});
+
+//# sourceMappingURL=data-table-9HELVsYR.cjs.map