react-flexi-datatable 1.0.0

package/dist/index.js

@@ -0,0 +1,1052 @@
+import { useEffect as e, useMemo as t, useRef as n, useState as r } from "react";
+import { Check as i, ChevronDown as a, ChevronLeft as o, ChevronRight as s, ChevronUp as c, ChevronsLeft as l, ChevronsRight as u, ChevronsUpDown as d, Columns3 as f, Download as p, Edit3 as m, Eye as h, EyeOff as ee, GripVertical as g, Pencil as te, RotateCcw as ne, Search as re, SlidersHorizontal as ie, Trash2 as ae, X as _ } from "lucide-react";
+//#region \0rolldown/runtime.js
+var v = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), y = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), b = /* @__PURE__ */ v(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), x = /* @__PURE__ */ v(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === oe ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case g: return "Fragment";
+				case ne: return "Profiler";
+				case te: return "StrictMode";
+				case _: return "Suspense";
+				case v: return "SuspenseList";
+				case S: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case ee: return "Portal";
+				case ie: return e.displayName || "Context";
+				case re: return (e._context.displayName || "Context") + ".Consumer";
+				case ae:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case b: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case x:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function n(e) {
+			return "" + e;
+		}
+		function r(e) {
+			try {
+				n(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
+			}
+		}
+		function i(e) {
+			if (e === g) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === x) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function a() {
+			var e = se.A;
+			return e === null ? null : e.getOwner();
+		}
+		function o() {
+			return Error("react-stack-top-frame");
+		}
+		function s(e) {
+			if (C.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function c(e, t) {
+			function n() {
+				T || (T = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+			}
+			n.isReactWarning = !0, Object.defineProperty(e, "key", {
+				get: n,
+				configurable: !0
+			});
+		}
+		function l() {
+			var e = t(this.type);
+			return E[e] || (E[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+		}
+		function u(e, t, n, r, i, a) {
+			var o = n.ref;
+			return e = {
+				$$typeof: h,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: l
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function d(e, n, i, o, l, d) {
+			var p = n.children;
+			if (p !== void 0) {
+				if (o) {
+					if (ce(p)) {
+						for (o = 0; o < p.length; o++) f(p[o]);
+						Object.freeze && Object.freeze(p);
+					} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+				} else f(p);
+			}
+			if (C.call(n, "key")) {
+				p = t(e);
+				var m = Object.keys(n).filter(function(e) {
+					return e !== "key";
+				});
+				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", O[p + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, p, m, p), O[p + o] = !0);
+			}
+			if (p = null, i !== void 0 && (r(i), p = "" + i), s(n) && (r(n.key), p = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
+			else i = n;
+			return p && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), u(e, p, i, a(), l, d);
+		}
+		function f(e) {
+			p(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === x && (e._payload.status === "fulfilled" ? p(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function p(e) {
+			return typeof e == "object" && !!e && e.$$typeof === h;
+		}
+		var m = y("react"), h = Symbol.for("react.transitional.element"), ee = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), te = Symbol.for("react.strict_mode"), ne = Symbol.for("react.profiler"), re = Symbol.for("react.consumer"), ie = Symbol.for("react.context"), ae = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), v = Symbol.for("react.suspense_list"), b = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), S = Symbol.for("react.activity"), oe = Symbol.for("react.client.reference"), se = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, ce = Array.isArray, w = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		m = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var T, E = {}, D = m.react_stack_bottom_frame.bind(m, o)(), le = w(i(o)), O = {};
+		e.Fragment = g, e.jsx = function(e, t, n) {
+			var r = 1e4 > se.recentlyCreatedOwnerStacks++;
+			return d(e, t, n, !1, r ? Error("react-stack-top-frame") : D, r ? w(i(e)) : le);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > se.recentlyCreatedOwnerStacks++;
+			return d(e, t, n, !0, r ? Error("react-stack-top-frame") : D, r ? w(i(e)) : le);
+		};
+	})();
+})), S = (/* @__PURE__ */ v(((e, t) => {
+	t.exports = process.env.NODE_ENV === "production" ? b() : x();
+})))(), oe = "border border-slate-200 rounded-lg bg-white", se = {
+	Active: "bg-emerald-50 text-emerald-700",
+	Inactive: "bg-slate-100 text-slate-600",
+	Pending: "bg-amber-50 text-amber-700"
+};
+function C({ config: v, data: y = [], onView: b, onEdit: x, onDelete: C, onBulkEdit: ce }) {
+	let w = `table_cols_${v.id || v.title || "default"}`, [T, E] = r(y), [D, le] = r(""), [O, ue] = r({}), [k, de] = r({
+		key: null,
+		dir: null
+	}), [fe, A] = r(1), [j, pe] = r(v.pageSize || 10), [M, me] = r(() => {
+		try {
+			let e = localStorage.getItem(`${w}_visible`);
+			if (e) return JSON.parse(e);
+		} catch {}
+		return Object.fromEntries(v.columns.map((e) => [e.key, e.visible !== !1]));
+	}), [N, he] = r(() => {
+		try {
+			let e = localStorage.getItem(`${w}_order`);
+			if (e) return JSON.parse(e);
+		} catch {}
+		return v.columns.map((e) => e.key);
+	}), [P, ge] = r(() => {
+		try {
+			let e = localStorage.getItem(`${w}_widths`);
+			if (e) return JSON.parse(e);
+		} catch {}
+		return Object.fromEntries(v.columns.map((e) => [e.key, e.width || 160]));
+	}), [_e, ve] = r(null), [F, ye] = r(null), [be, I] = r(null), [L, xe] = r([]), [R, z] = r(null), [Se, Ce] = r(!1), [we, Te] = r(!1), [B, V] = r({
+		row: 0,
+		col: 0
+	}), [Ee, De] = r(null), [H, U] = r({}), [Oe, ke] = r(!1), [Ae, je] = r([]), [Me, W] = r({}), [G, K] = r(1), Ne = n(null), Pe = n(null), Fe = n(null), q = n(null);
+	e(() => {
+		v.searchable && q.current && q.current.focus();
+	}, [v.searchable]), e(() => {
+		let e = (e) => {
+			Pe.current && !Pe.current.contains(e.target) && Te(!1), Fe.current && !Fe.current.contains(e.target) && Ce(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []), e(() => E(y), [y]), e(() => A(1), [
+		D,
+		O,
+		j
+	]), e(() => {
+		try {
+			localStorage.setItem(`${w}_order`, JSON.stringify(N));
+		} catch {}
+	}, [N, w]), e(() => {
+		try {
+			localStorage.setItem(`${w}_visible`, JSON.stringify(M));
+		} catch {}
+	}, [M, w]), e(() => {
+		try {
+			localStorage.setItem(`${w}_widths`, JSON.stringify(P));
+		} catch {}
+	}, [P, w]);
+	let Ie = () => {
+		let e = v.columns.map((e) => e.key), t = Object.fromEntries(v.columns.map((e) => [e.key, e.visible !== !1])), n = Object.fromEntries(v.columns.map((e) => [e.key, e.width || 160]));
+		he(e), me(t), ge(n);
+		try {
+			localStorage.removeItem(`${w}_order`), localStorage.removeItem(`${w}_visible`), localStorage.removeItem(`${w}_widths`);
+		} catch {}
+	}, Le = (e, t) => {
+		e.preventDefault(), e.stopPropagation();
+		let n = e.clientX, r = P[t] || 160, i = (e) => {
+			let i = e.clientX - n, a = Math.max(70, r + i);
+			ge((e) => ({
+				...e,
+				[t]: a
+			}));
+		}, a = () => {
+			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", a), ve(null);
+		};
+		ve(t), document.addEventListener("mousemove", i), document.addEventListener("mouseup", a);
+	}, J = t(() => {
+		let e = Object.fromEntries(v.columns.map((e) => [e.key, e]));
+		return N.map((t) => e[t]).filter((e) => e && M[e.key]);
+	}, [
+		v.columns,
+		N,
+		M
+	]), Re = t(() => v.columns.filter((e) => e.editable !== !1), [v.columns]), ze = (e) => {
+		if (e.options) return e.options;
+		let t = v.filters?.find((t) => t.key === e.key);
+		return t?.options ? t.options.filter((e) => e.value !== "all").map((e) => e.value) : null;
+	}, Y = v.columnordering !== !1 && v.columnOrdering !== !1, Be = Y && v.dropcolumn !== !1 && v.dropColumn !== !1, Ve = (e, t) => {
+		Y && (ye(t), e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
+	}, He = (e, t) => {
+		e.preventDefault(), Be && (e.dataTransfer.dropEffect = "move", be !== t && I(t));
+	}, Ue = (e, t) => {
+		e.preventDefault(), e.stopPropagation();
+		let n = e.dataTransfer.getData("text/plain") || F;
+		n && n !== t && he((e) => {
+			let r = [...e], i = r.indexOf(n), a = r.indexOf(t);
+			return i !== -1 && a !== -1 && (r.splice(i, 1), r.splice(a, 0, n)), r;
+		}), ye(null), I(null);
+	}, We = (e) => {
+		e && (me((t) => Object.values(t).filter(Boolean).length <= 1 ? t : {
+			...t,
+			[e]: !1
+		}), ye(null), I(null));
+	}, X = t(() => {
+		let e = [...T];
+		if (D.trim()) {
+			let t = D.toLowerCase(), n = v.columns.filter((e) => e.searchable !== !1).map((e) => e.key);
+			e = e.filter((e) => n.some((n) => String(e[n] ?? "").toLowerCase().includes(t)));
+		}
+		return Object.entries(O).forEach(([t, n]) => {
+			n && n !== "all" && (e = e.filter((e) => String(e[t]) === String(n)));
+		}), k.key && e.sort((e, t) => {
+			let n = String(e[k.key] ?? "").toLowerCase(), r = String(t[k.key] ?? "").toLowerCase(), i = n.localeCompare(r, void 0, { numeric: !0 });
+			return k.dir === "asc" ? i : -i;
+		}), e;
+	}, [
+		T,
+		D,
+		O,
+		k,
+		v.columns
+	]), Z = Math.max(1, Math.ceil(X.length / j)), Q = Math.min(fe, Z), $ = X.slice((Q - 1) * j, Q * j), Ge = t(() => L.length > 0 ? L : $.map((e) => e.id), [L, $]), Ke = (e) => {
+		if (k.key !== e) return de({
+			key: e,
+			dir: "asc"
+		});
+		if (k.dir === "asc") return de({
+			key: e,
+			dir: "desc"
+		});
+		de({
+			key: null,
+			dir: null
+		});
+	}, qe = (e) => xe(e ? $.map((e) => e.id) : []), Je = (e) => xe((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]), Ye = (e) => {
+		De(e.id), U({ ...e });
+	}, Xe = () => {
+		De(null), U({});
+	}, Ze = () => {
+		E((e) => e.map((e) => e.id === Ee ? H : e)), x?.(H), De(null), U({});
+	}, Qe = () => {
+		let e = {}, t = L.length > 0 ? L : $.map((e) => e.id);
+		T.forEach((n) => {
+			t.includes(n.id) && (e[n.id] = { ...n });
+		}), W(e), je(Re.map((e) => e.key)), ke(!0);
+	}, $e = () => {
+		ke(!1), W({}), je([]);
+	}, et = () => {
+		let e = L.length > 0 ? L : $.map((e) => e.id);
+		E((t) => t.map((t) => e.includes(t.id) && Me[t.id] || t)), ce?.(e, Me), ke(!1), W({}), je([]);
+	};
+	return e(() => {
+		let e = (e) => {
+			if (!v.keyboardNavigation || !$.length) return;
+			let t = document.activeElement;
+			if (t && (["TEXTAREA"].includes(t.tagName) || t.tagName === "INPUT" && t.type !== "checkbox" || t.tagName === "SELECT")) return;
+			let n = !!(v.actions?.view || v.actions?.edit || v.actions?.delete), r = J.length + +!!v.selectable, i = J.length + +!!v.selectable + +!!n, a = t?.closest("[data-cell]"), o = B.row, s = B.col;
+			if (a) {
+				let e = a.getAttribute("data-cell");
+				if (e) {
+					let t = e.split("-").map(Number);
+					t.length === 2 && !isNaN(t[0]) && !isNaN(t[1]) && (o = t[0], s = t[1]);
+				}
+			}
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				let t = Math.min($.length - 1, o + 1);
+				V({
+					row: t,
+					col: s
+				});
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault();
+				let t = Math.max(-1, o - 1);
+				V({
+					row: t,
+					col: s
+				});
+			} else if (e.key === "ArrowRight") {
+				if (e.preventDefault(), n && s === r) {
+					let e = Ne.current?.querySelector(`[data-cell="${o}-${s}"]`), t = e ? Array.from(e.querySelectorAll("button")) : [];
+					if (G < t.length - 1) {
+						K((e) => e + 1);
+						return;
+					}
+				}
+				let t = Math.min(i - 1, s + 1);
+				V({
+					row: o,
+					col: t
+				});
+			} else if (e.key === "ArrowLeft") {
+				if (e.preventDefault(), n && s === r && G > 0) {
+					K((e) => e - 1);
+					return;
+				}
+				let t = Math.max(0, s - 1);
+				V({
+					row: o,
+					col: t
+				});
+			} else if (e.key === "Enter" || e.key === " ") {
+				if (o === -1) {
+					if (v.selectable && s === 0) e.preventDefault(), qe($.length > 0 && !$.every((e) => L.includes(e.id)));
+					else {
+						let t = v.selectable ? s - 1 : s, n = J[t];
+						n && n.sortable && (e.preventDefault(), Ke(n.key));
+					}
+				} else {
+					let i = $[o];
+					t && (t.type === "checkbox" || t.tagName === "BUTTON") ? (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.click()) : i && (v.selectable && s === 0 ? (e.preventDefault(), Je(i.id)) : n && s === r ? (e.preventDefault(), Ye(i)) : e.key === "Enter" && (e.preventDefault(), b?.(i)));
+				}
+			}
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		v.keyboardNavigation,
+		$,
+		J,
+		B,
+		G,
+		Je,
+		qe,
+		Ke,
+		b,
+		v.selectable,
+		L
+	]), e(() => {
+		if (!v.keyboardNavigation || !Ne.current || document.activeElement === q.current) return;
+		let e = Ne.current.querySelector(`[data-cell="${B.row}-${B.col}"]`);
+		if (e) {
+			let t = Array.from(e.querySelectorAll("input, button, select"));
+			t.length > 0 ? (t[Math.min(G, t.length - 1)] || t[0]).focus() : e.focus();
+		}
+	}, [
+		B,
+		G,
+		v.keyboardNavigation,
+		$
+	]), /* @__PURE__ */ (0, S.jsxs)("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ (0, S.jsx)("div", {
+				className: `${oe} p-4`,
+				children: /* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
+					children: [/* @__PURE__ */ (0, S.jsxs)("div", { children: [/* @__PURE__ */ (0, S.jsx)("h2", {
+						className: "text-lg font-semibold",
+						children: v.title
+					}), /* @__PURE__ */ (0, S.jsxs)("p", {
+						className: "text-sm text-slate-500",
+						children: [X.length, " records"]
+					})] }), /* @__PURE__ */ (0, S.jsxs)("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							v.searchable && /* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "relative",
+								children: [
+									/* @__PURE__ */ (0, S.jsx)(re, {
+										size: 16,
+										className: "absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
+									}),
+									/* @__PURE__ */ (0, S.jsx)("input", {
+										ref: q,
+										autoFocus: !0,
+										value: D,
+										onChange: (e) => le(e.target.value),
+										placeholder: "Search...",
+										className: "w-56 rounded-lg border border-slate-200 py-2 pl-9 pr-8 text-sm outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
+									}),
+									D && /* @__PURE__ */ (0, S.jsx)("button", {
+										onClick: () => {
+											le(""), q.current?.focus();
+										},
+										className: "absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600",
+										children: /* @__PURE__ */ (0, S.jsx)(_, { size: 15 })
+									})
+								]
+							}),
+							v.filterable && /* @__PURE__ */ (0, S.jsxs)("div", {
+								ref: Pe,
+								className: "relative",
+								children: [/* @__PURE__ */ (0, S.jsxs)("button", {
+									onClick: () => Te((e) => !e),
+									className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm",
+									children: [/* @__PURE__ */ (0, S.jsx)(ie, { size: 16 }), "Filter"]
+								}), we && /* @__PURE__ */ (0, S.jsxs)("div", {
+									className: "absolute right-0 z-30 mt-2 w-64 rounded-xl border bg-white p-4 shadow-xl",
+									children: [v.filters?.map((e) => /* @__PURE__ */ (0, S.jsxs)("label", {
+										className: "mb-3 block text-sm",
+										children: [/* @__PURE__ */ (0, S.jsx)("span", {
+											className: "mb-1 block font-medium",
+											children: e.label
+										}), /* @__PURE__ */ (0, S.jsx)("select", {
+											value: O[e.key] || "all",
+											onChange: (t) => ue((n) => ({
+												...n,
+												[e.key]: t.target.value
+											})),
+											className: "w-full rounded-lg border p-2",
+											children: e.options.map((e) => /* @__PURE__ */ (0, S.jsx)("option", {
+												value: e.value,
+												children: e.label
+											}, e.value))
+										})]
+									}, e.key)), /* @__PURE__ */ (0, S.jsx)("button", {
+										onClick: () => ue({}),
+										className: "text-sm font-medium text-slate-600",
+										children: "Clear filters"
+									})]
+								})]
+							}),
+							v.columnVisibility && /* @__PURE__ */ (0, S.jsxs)("div", {
+								ref: Fe,
+								className: "relative",
+								children: [/* @__PURE__ */ (0, S.jsxs)("button", {
+									onClick: () => Ce((e) => !e),
+									className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm",
+									children: [/* @__PURE__ */ (0, S.jsx)(f, { size: 16 }), "Columns"]
+								}), Se && /* @__PURE__ */ (0, S.jsxs)("div", {
+									className: "absolute right-0 z-30 mt-2 w-64 rounded-xl border bg-white p-3.5 shadow-xl",
+									children: [
+										/* @__PURE__ */ (0, S.jsxs)("div", {
+											className: "flex items-center justify-between pb-2 mb-2 border-b",
+											children: [/* @__PURE__ */ (0, S.jsx)("span", {
+												className: "text-xs font-semibold uppercase tracking-wider text-slate-500",
+												children: "Columns & Layout"
+											}), /* @__PURE__ */ (0, S.jsxs)("button", {
+												onClick: Ie,
+												className: "flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-800 font-medium",
+												title: "Reset default layout",
+												children: [/* @__PURE__ */ (0, S.jsx)(ne, { size: 12 }), "Reset"]
+											})]
+										}),
+										/* @__PURE__ */ (0, S.jsx)("div", {
+											className: "space-y-1 max-h-64 overflow-y-auto",
+											children: N.map((e) => {
+												let t = v.columns.find((t) => t.key === e);
+												if (!t) return null;
+												let n = M[e] !== !1;
+												return /* @__PURE__ */ (0, S.jsxs)("div", {
+													draggable: !0,
+													onDragStart: (e) => Ve(e, t.key),
+													onDragOver: (e) => He(e, t.key),
+													onDrop: (e) => Ue(e, t.key),
+													className: `flex items-center justify-between p-2 text-sm rounded-lg hover:bg-slate-50 cursor-grab active:cursor-grabbing transition-colors ${F === t.key ? "opacity-30 bg-slate-100" : ""} ${be === t.key && F !== t.key ? "border-l-4 border-l-indigo-600 bg-indigo-50/60" : ""}`,
+													children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+														className: "flex items-center gap-2",
+														children: [/* @__PURE__ */ (0, S.jsx)("span", {
+															title: "Drag to reorder",
+															className: "text-slate-300 hover:text-slate-500 cursor-grab",
+															children: /* @__PURE__ */ (0, S.jsx)(g, { size: 14 })
+														}), /* @__PURE__ */ (0, S.jsxs)("label", {
+															className: "flex items-center gap-2 cursor-pointer select-none",
+															children: [/* @__PURE__ */ (0, S.jsx)("input", {
+																type: "checkbox",
+																checked: n,
+																onChange: () => me((e) => {
+																	let n = Object.values(e).filter(Boolean).length;
+																	return e[t.key] && n === 1 ? e : {
+																		...e,
+																		[t.key]: !e[t.key]
+																	};
+																}),
+																className: "rounded text-indigo-600 focus:ring-indigo-500"
+															}), /* @__PURE__ */ (0, S.jsx)("span", {
+																className: n ? "font-medium text-slate-800" : "text-slate-400 line-through",
+																children: t.label
+															})]
+														})]
+													}), /* @__PURE__ */ (0, S.jsxs)("span", {
+														className: "text-xs text-slate-400 font-mono",
+														children: [P[t.key] || 160, "px"]
+													})]
+												}, t.key);
+											})
+										}),
+										/* @__PURE__ */ (0, S.jsx)("p", {
+											className: "mt-2.5 pt-2 border-t text-[11px] text-slate-400 text-center",
+											children: "Drag handles to reorder | Drag column edge to resize"
+										})
+									]
+								})]
+							}),
+							v.bulkEditable !== !1 && Re.length > 0 && /* @__PURE__ */ (0, S.jsxs)("button", {
+								onClick: Qe,
+								className: `flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${Oe ? "border-indigo-500 bg-indigo-600 text-white" : L.length > 0 ? "border-indigo-300 bg-indigo-50 text-indigo-700 hover:bg-indigo-100" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"}`,
+								children: [
+									/* @__PURE__ */ (0, S.jsx)(m, { size: 16 }),
+									"Bulk Edit",
+									L.length > 0 ? ` (${L.length})` : ""
+								]
+							}),
+							v.exportable && /* @__PURE__ */ (0, S.jsxs)("button", {
+								onClick: () => {
+									let e = J.map((e) => e.label).join(","), t = X.map((e) => J.map((t) => `"${String(e[t.key] ?? "").replaceAll("\"", "\"\"")}"`).join(",")).join("\n"), n = new Blob([e + "\n" + t], { type: "text/csv" }), r = document.createElement("a");
+									r.href = URL.createObjectURL(n), r.download = "table-export.csv", r.click(), URL.revokeObjectURL(r.href);
+								},
+								className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm",
+								children: [/* @__PURE__ */ (0, S.jsx)(p, { size: 16 }), "Export"]
+							})
+						]
+					})]
+				})
+			}),
+			Be && /* @__PURE__ */ (0, S.jsx)("div", {
+				onDragOver: (e) => {
+					e.preventDefault(), e.dataTransfer.dropEffect = "move";
+				},
+				onDrop: (e) => {
+					e.preventDefault();
+					let t = e.dataTransfer.getData("text/plain") || F;
+					t && We(t);
+				},
+				className: `transition-all duration-200 overflow-hidden ${F ? "max-h-24 opacity-100 my-2" : "max-h-0 opacity-0 my-0 pointer-events-none"}`,
+				children: /* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "flex items-center justify-center gap-2 rounded-xl border-2 border-dashed border-rose-400 bg-rose-50 p-3 text-sm font-semibold text-rose-700 shadow-sm",
+					children: [/* @__PURE__ */ (0, S.jsx)(ae, {
+						size: 20,
+						className: "text-rose-600 animate-bounce"
+					}), /* @__PURE__ */ (0, S.jsxs)("span", { children: ["Drop column header here to hide column ", /* @__PURE__ */ (0, S.jsx)("b", { children: v.columns.find((e) => e.key === F)?.label })] })]
+				})
+			}),
+			Oe && /* @__PURE__ */ (0, S.jsxs)("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 rounded-xl border border-indigo-200 bg-indigo-50/80 p-3.5 shadow-sm",
+				children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ (0, S.jsx)(m, {
+							size: 18,
+							className: "text-indigo-600"
+						}), /* @__PURE__ */ (0, S.jsxs)("span", {
+							className: "font-semibold text-slate-900 text-sm",
+							children: [
+								"Bulk Edit Mode (",
+								Ge.length,
+								" records):"
+							]
+						})]
+					}), /* @__PURE__ */ (0, S.jsxs)("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ (0, S.jsx)("span", {
+							className: "text-xs font-medium text-slate-600",
+							children: "Select columns to edit:"
+						}), Re.map((e) => {
+							let t = Ae.includes(e.key);
+							return /* @__PURE__ */ (0, S.jsxs)("button", {
+								type: "button",
+								onClick: () => {
+									je(t ? (t) => t.filter((t) => t !== e.key) : (t) => [...t, e.key]);
+								},
+								className: `flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-medium border transition-all ${t ? "border-indigo-500 bg-indigo-600 text-white shadow-xs" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"}`,
+								children: [/* @__PURE__ */ (0, S.jsx)("span", {
+									className: `flex h-3.5 w-3.5 items-center justify-center rounded border ${t ? "border-white bg-white text-indigo-600" : "border-slate-300 bg-white"}`,
+									children: t && /* @__PURE__ */ (0, S.jsx)(i, {
+										size: 10,
+										strokeWidth: 3
+									})
+								}), /* @__PURE__ */ (0, S.jsx)("span", { children: e.label })]
+							}, e.key);
+						})]
+					})]
+				}), /* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, S.jsxs)("button", {
+						onClick: $e,
+						className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 transition-colors",
+						children: [/* @__PURE__ */ (0, S.jsx)(_, {
+							size: 14,
+							className: "text-rose-500"
+						}), "Cancel"]
+					}), /* @__PURE__ */ (0, S.jsxs)("button", {
+						onClick: et,
+						className: "flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3.5 py-1.5 text-xs font-medium text-white hover:bg-emerald-700 shadow-sm transition-colors",
+						children: [/* @__PURE__ */ (0, S.jsx)(i, { size: 14 }), "Save"]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, S.jsxs)("div", {
+				className: `${oe} overflow-hidden`,
+				children: [/* @__PURE__ */ (0, S.jsx)("div", {
+					className: "overflow-x-auto",
+					children: /* @__PURE__ */ (0, S.jsxs)("table", {
+						ref: Ne,
+						className: "min-w-full text-sm table-fixed",
+						children: [/* @__PURE__ */ (0, S.jsx)("thead", {
+							className: "border-b bg-slate-50",
+							children: /* @__PURE__ */ (0, S.jsxs)("tr", { children: [
+								v.selectable && /* @__PURE__ */ (0, S.jsx)("th", {
+									"data-cell": "-1-0",
+									className: "w-12 px-4 py-3",
+									children: /* @__PURE__ */ (0, S.jsx)("input", {
+										type: "checkbox",
+										checked: $.length > 0 && $.every((e) => L.includes(e.id)),
+										onChange: (e) => qe(e.target.checked),
+										onFocus: () => V({
+											row: -1,
+											col: 0
+										})
+									})
+								}),
+								J.map((e, t) => {
+									let n = v.selectable ? t + 1 : t, r = F === e.key, i = be === e.key && F !== e.key, o = P[e.key] || e.width || 160;
+									return /* @__PURE__ */ (0, S.jsxs)("th", {
+										"data-cell": `-1-${n}`,
+										style: {
+											width: `${o}px`,
+											minWidth: `${o}px`
+										},
+										draggable: Y,
+										onDragStart: (t) => Ve(t, e.key),
+										onDragOver: (t) => He(t, e.key),
+										onDragLeave: () => I(null),
+										onDrop: (t) => Ue(t, e.key),
+										onDragEnd: () => {
+											ye(null), I(null);
+										},
+										"aria-sort": k.key === e.key ? k.dir : "none",
+										className: `group relative whitespace-nowrap px-4 py-3 text-left font-semibold text-slate-600 ${Y ? "cursor-grab active:cursor-grabbing" : ""} transition-colors select-none ${r ? "opacity-30 bg-slate-100" : ""} ${i ? "border-l-4 border-l-indigo-600 bg-indigo-50/60" : ""}`,
+										children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+											className: "flex items-center justify-between gap-1.5 pr-2",
+											children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+												className: "flex items-center gap-1.5 overflow-hidden",
+												children: [Y && /* @__PURE__ */ (0, S.jsx)("span", {
+													title: "Drag header to reorder",
+													className: "text-slate-300 group-hover:text-slate-500 cursor-grab shrink-0",
+													children: /* @__PURE__ */ (0, S.jsx)(g, { size: 14 })
+												}), /* @__PURE__ */ (0, S.jsxs)("button", {
+													disabled: !e.sortable,
+													onClick: () => e.sortable && Ke(e.key),
+													className: `flex items-center gap-1 truncate ${e.sortable ? "hover:text-slate-900" : ""}`,
+													children: [/* @__PURE__ */ (0, S.jsx)("span", {
+														className: "truncate",
+														children: e.label
+													}), e.sortable && (k.key === e.key ? k.dir === "asc" ? /* @__PURE__ */ (0, S.jsx)(c, {
+														size: 15,
+														className: "shrink-0"
+													}) : /* @__PURE__ */ (0, S.jsx)(a, {
+														size: 15,
+														className: "shrink-0"
+													}) : /* @__PURE__ */ (0, S.jsx)(d, {
+														size: 15,
+														className: "text-slate-400 shrink-0"
+													}))]
+												})]
+											}), /* @__PURE__ */ (0, S.jsx)("button", {
+												type: "button",
+												title: "Hide column",
+												onClick: (t) => {
+													t.stopPropagation(), We(e.key);
+												},
+												className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 text-slate-400 hover:text-rose-600 rounded shrink-0",
+												children: /* @__PURE__ */ (0, S.jsx)(ee, { size: 13 })
+											})]
+										}), /* @__PURE__ */ (0, S.jsx)("div", {
+											draggable: !1,
+											onMouseDown: (t) => Le(t, e.key),
+											onDoubleClick: (t) => {
+												t.stopPropagation(), ge((t) => ({
+													...t,
+													[e.key]: e.width || 160
+												}));
+											},
+											title: "Drag to resize column width",
+											className: `absolute right-0 top-0 bottom-0 w-2.5 cursor-col-resize group-hover:bg-indigo-300/50 hover:!bg-indigo-500 transition-colors z-10 ${_e === e.key ? "bg-indigo-600 w-1" : ""}`
+										})]
+									}, e.key);
+								}),
+								(v.actions?.view || v.actions?.edit || v.actions?.delete) && /* @__PURE__ */ (0, S.jsx)("th", {
+									className: "sticky right-0 bg-slate-50 px-4 py-3 text-right font-semibold text-slate-600 w-32",
+									children: "Actions"
+								})
+							] })
+						}), /* @__PURE__ */ (0, S.jsxs)("tbody", { children: [$.map((e, t) => {
+							let n = Ee === e.id, r = Oe && Ge.includes(e.id);
+							return /* @__PURE__ */ (0, S.jsxs)("tr", {
+								className: `border-b last:border-0 ${n || r ? "bg-indigo-50/20" : "hover:bg-slate-50"}`,
+								children: [
+									v.selectable && /* @__PURE__ */ (0, S.jsx)("td", {
+										"data-cell": `${t}-0`,
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ (0, S.jsx)("input", {
+											type: "checkbox",
+											checked: L.includes(e.id),
+											onChange: () => Je(e.id),
+											onFocus: () => V({
+												row: t,
+												col: 0
+											})
+										})
+									}),
+									J.map((i, a) => {
+										let o = v.selectable ? a + 1 : a, s = r && Ae.includes(i.key) && i.editable !== !1, c = ze(i), l = P[i.key] || i.width || 160, u = e[i.key], d = u == null ? "" : String(u), f = d.length > 25;
+										return /* @__PURE__ */ (0, S.jsx)("td", {
+											"data-cell": `${t}-${o}`,
+											style: {
+												width: `${l}px`,
+												minWidth: `${l}px`
+											},
+											className: "px-4 py-3 truncate",
+											tabIndex: -1,
+											title: f ? d : void 0,
+											children: n && i.editable !== !1 ? c ? /* @__PURE__ */ (0, S.jsx)("select", {
+												value: H[i.key] ?? "",
+												onChange: (e) => U({
+													...H,
+													[i.key]: e.target.value
+												}),
+												onKeyDown: (e) => {
+													e.key === "Enter" && Ze(), e.key === "Escape" && Xe();
+												},
+												className: "w-full rounded-md border border-indigo-300 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500",
+												children: c.map((e) => {
+													let t = typeof e == "object" ? e.value : e, n = typeof e == "object" ? e.label : e;
+													return /* @__PURE__ */ (0, S.jsx)("option", {
+														value: t,
+														children: n
+													}, t);
+												})
+											}) : /* @__PURE__ */ (0, S.jsx)("input", {
+												type: "text",
+												value: H[i.key] ?? "",
+												onChange: (e) => U({
+													...H,
+													[i.key]: e.target.value
+												}),
+												onKeyDown: (e) => {
+													e.key === "Enter" && Ze(), e.key === "Escape" && Xe();
+												},
+												className: "w-full rounded-md border border-indigo-300 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
+											}) : s ? c ? /* @__PURE__ */ (0, S.jsx)("select", {
+												value: Me[e.id]?.[i.key] ?? e[i.key] ?? "",
+												onChange: (t) => W((n) => ({
+													...n,
+													[e.id]: {
+														...n[e.id] || e,
+														[i.key]: t.target.value
+													}
+												})),
+												onKeyDown: (e) => {
+													e.key === "Enter" && et(), e.key === "Escape" && $e();
+												},
+												className: "w-full rounded-md border border-indigo-400 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500",
+												children: c.map((e) => {
+													let t = typeof e == "object" ? e.value : e, n = typeof e == "object" ? e.label : e;
+													return /* @__PURE__ */ (0, S.jsx)("option", {
+														value: t,
+														children: n
+													}, t);
+												})
+											}) : /* @__PURE__ */ (0, S.jsx)("input", {
+												type: "text",
+												value: Me[e.id]?.[i.key] ?? e[i.key] ?? "",
+												onChange: (t) => W((n) => ({
+													...n,
+													[e.id]: {
+														...n[e.id] || e,
+														[i.key]: t.target.value
+													}
+												})),
+												onKeyDown: (e) => {
+													e.key === "Enter" && et(), e.key === "Escape" && $e();
+												},
+												className: "w-full rounded-md border border-indigo-400 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
+											}) : i.render ? i.render(u, e, t) : i.key === "status" ? /* @__PURE__ */ (0, S.jsx)("span", {
+												className: `rounded-full px-2.5 py-1 text-xs font-medium ${se[u] || "bg-slate-100 text-slate-600"}`,
+												children: u
+											}) : f ? /* @__PURE__ */ (0, S.jsxs)("span", {
+												title: d,
+												children: [d.slice(0, 25), "..."]
+											}) : d
+										}, i.key);
+									}),
+									(v.actions?.view || v.actions?.edit || v.actions?.delete) && /* @__PURE__ */ (0, S.jsx)("td", {
+										"data-cell": `${t}-${J.length + +!!v.selectable}`,
+										className: "sticky right-0 bg-white px-4 py-3 w-32",
+										children: n ? /* @__PURE__ */ (0, S.jsxs)("div", {
+											className: "flex justify-end gap-1",
+											children: [/* @__PURE__ */ (0, S.jsx)("button", {
+												title: "Save",
+												onClick: Ze,
+												className: "rounded-md bg-emerald-100 p-2 text-emerald-700 hover:bg-emerald-200",
+												children: /* @__PURE__ */ (0, S.jsx)(i, { size: 16 })
+											}), /* @__PURE__ */ (0, S.jsx)("button", {
+												title: "Cancel",
+												onClick: Xe,
+												className: "rounded-md bg-rose-100 p-2 text-rose-700 hover:bg-rose-200",
+												children: /* @__PURE__ */ (0, S.jsx)(_, { size: 16 })
+											})]
+										}) : /* @__PURE__ */ (0, S.jsxs)("div", {
+											className: "flex justify-end gap-1",
+											children: [
+												v.actions.view && /* @__PURE__ */ (0, S.jsx)("button", {
+													title: "View",
+													onClick: () => b?.(e),
+													onFocus: () => {
+														V({
+															row: t,
+															col: J.length + +!!v.selectable
+														}), K(0);
+													},
+													className: "rounded-md p-2 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400",
+													children: /* @__PURE__ */ (0, S.jsx)(h, { size: 16 })
+												}),
+												v.actions.edit && /* @__PURE__ */ (0, S.jsx)("button", {
+													title: "Edit",
+													onClick: () => Ye(e),
+													onFocus: () => {
+														V({
+															row: t,
+															col: J.length + +!!v.selectable
+														}), K(1);
+													},
+													className: "rounded-md p-2 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400",
+													children: /* @__PURE__ */ (0, S.jsx)(te, { size: 16 })
+												}),
+												v.actions.delete && /* @__PURE__ */ (0, S.jsx)("button", {
+													title: "Delete",
+													onClick: () => z(e),
+													onFocus: () => {
+														V({
+															row: t,
+															col: J.length + +!!v.selectable
+														}), K(2);
+													},
+													className: "rounded-md p-2 text-red-600 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-400",
+													children: /* @__PURE__ */ (0, S.jsx)(ae, { size: 16 })
+												})
+											]
+										})
+									})
+								]
+							}, e.id);
+						}), !$.length && /* @__PURE__ */ (0, S.jsx)("tr", { children: /* @__PURE__ */ (0, S.jsxs)("td", {
+							colSpan: J.length + +!!v.selectable + 1,
+							className: "px-6 py-16 text-center",
+							children: [/* @__PURE__ */ (0, S.jsx)("div", {
+								className: "font-medium",
+								children: "No records found"
+							}), /* @__PURE__ */ (0, S.jsx)("div", {
+								className: "mt-1 text-sm text-slate-500",
+								children: "Try changing your search or filters."
+							})]
+						}) })] })]
+					})
+				}), /* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "flex flex-col gap-3 border-t bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+						className: "text-sm text-slate-500",
+						children: [
+							"Showing ",
+							X.length ? (Q - 1) * j + 1 : 0,
+							"–",
+							Math.min(Q * j, X.length),
+							" of ",
+							X.length
+						]
+					}), /* @__PURE__ */ (0, S.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ (0, S.jsx)("select", {
+								value: j,
+								onChange: (e) => pe(Number(e.target.value)),
+								className: "rounded-lg border border-slate-200 px-2 py-1.5 text-sm",
+								children: v.pageSizeOptions.map((e) => /* @__PURE__ */ (0, S.jsxs)("option", {
+									value: e,
+									children: [e, "/page"]
+								}, e))
+							}),
+							/* @__PURE__ */ (0, S.jsx)("button", {
+								disabled: Q === 1,
+								onClick: () => A(1),
+								className: "rounded-md border p-1.5 disabled:opacity-40",
+								children: /* @__PURE__ */ (0, S.jsx)(l, { size: 16 })
+							}),
+							/* @__PURE__ */ (0, S.jsx)("button", {
+								disabled: Q === 1,
+								onClick: () => A((e) => e - 1),
+								className: "rounded-md border p-1.5 disabled:opacity-40",
+								children: /* @__PURE__ */ (0, S.jsx)(o, { size: 16 })
+							}),
+							/* @__PURE__ */ (0, S.jsxs)("span", {
+								className: "px-2 text-sm",
+								children: [
+									"Page ",
+									Q,
+									" of ",
+									Z
+								]
+							}),
+							/* @__PURE__ */ (0, S.jsx)("button", {
+								disabled: Q === Z,
+								onClick: () => A((e) => e + 1),
+								className: "rounded-md border p-1.5 disabled:opacity-40",
+								children: /* @__PURE__ */ (0, S.jsx)(s, { size: 16 })
+							}),
+							/* @__PURE__ */ (0, S.jsx)("button", {
+								disabled: Q === Z,
+								onClick: () => A(Z),
+								className: "rounded-md border p-1.5 disabled:opacity-40",
+								children: /* @__PURE__ */ (0, S.jsx)(u, { size: 16 })
+							})
+						]
+					})]
+				})]
+			}),
+			L.length > 0 && !Oe && /* @__PURE__ */ (0, S.jsxs)("div", {
+				className: "fixed bottom-5 left-1/2 z-40 flex -translate-x-1/2 items-center gap-3 rounded-xl bg-slate-900 px-4 py-2.5 text-sm text-white shadow-xl",
+				children: [
+					/* @__PURE__ */ (0, S.jsxs)("span", {
+						className: "font-medium pl-1",
+						children: [L.length, " selected"]
+					}),
+					v.bulkEditable !== !1 && Re.length > 0 && /* @__PURE__ */ (0, S.jsxs)("button", {
+						onClick: Qe,
+						className: "flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-500 transition-colors shadow-sm",
+						children: [/* @__PURE__ */ (0, S.jsx)(m, { size: 14 }), "Bulk Edit"]
+					}),
+					/* @__PURE__ */ (0, S.jsx)("button", {
+						onClick: () => xe([]),
+						className: "text-xs text-slate-400 hover:text-white underline pr-1",
+						children: "Clear"
+					})
+				]
+			}),
+			R && /* @__PURE__ */ (0, S.jsx)("div", {
+				onClick: (e) => {
+					e.target === e.currentTarget && z(null);
+				},
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+				children: /* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl",
+					children: [
+						/* @__PURE__ */ (0, S.jsx)("h3", {
+							className: "text-lg font-semibold",
+							children: "Delete record?"
+						}),
+						/* @__PURE__ */ (0, S.jsxs)("p", {
+							className: "mt-2 text-sm text-slate-500",
+							children: [
+								"Are you sure you want to delete ",
+								/* @__PURE__ */ (0, S.jsx)("b", { children: R.name }),
+								"? This action cannot be undone."
+							]
+						}),
+						/* @__PURE__ */ (0, S.jsxs)("div", {
+							className: "mt-6 flex justify-end gap-2",
+							children: [/* @__PURE__ */ (0, S.jsx)("button", {
+								onClick: () => z(null),
+								className: "rounded-lg border px-4 py-2 text-sm",
+								children: "Cancel"
+							}), /* @__PURE__ */ (0, S.jsx)("button", {
+								onClick: () => {
+									E((e) => e.filter((e) => e.id !== R.id)), xe((e) => e.filter((e) => e !== R.id)), z(null), C?.(R);
+								},
+								className: "rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white",
+								children: "Delete"
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/index.js
+var ce = C;
+//#endregion
+export { C as DataTable, ce as default };