@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/widgets/table/TableConfig.js

@@ -0,0 +1,254 @@
+import { memo as e, useCallback as t, useEffect as n, useMemo as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/table/TableConfig.tsx
+var s = e(function({ config: e, onChange: s }) {
+	let [c, l] = i(r(() => (e.columns || []).map((e) => typeof e == "string" ? {
+		field: e,
+		header: e.charAt(0).toUpperCase() + e.slice(1).replace(/_/g, " ")
+	} : e), []));
+	n(() => {
+		JSON.stringify(e.columns) !== JSON.stringify(c) && c.length > 0 && s({
+			...e,
+			columns: c
+		});
+	}, [c]), n(() => {
+		l((e.columns || []).map((e) => typeof e == "string" ? {
+			field: e,
+			header: e.charAt(0).toUpperCase() + e.slice(1).replace(/_/g, " ")
+		} : e));
+	}, [e.columns]);
+	let u = t((t, n) => {
+		s({
+			...e,
+			[t]: n
+		});
+	}, [e, s]), d = t((e, t, n) => {
+		l((r) => {
+			let i = [...r];
+			return i[e] = {
+				...i[e],
+				[t]: n
+			}, i;
+		});
+	}, []), f = t(() => {
+		l((e) => [...e, {
+			field: "",
+			header: ""
+		}]);
+	}, []), p = t((e) => {
+		l((t) => t.filter((t, n) => n !== e));
+	}, []);
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Page Size"
+			}), /* @__PURE__ */ o("select", {
+				value: e.pageSize || 10,
+				onChange: (e) => u("pageSize", Number(e.target.value)),
+				className: "\n            w-full px-3 py-2\n            text-sm text-text-primary\n            bg-bg-surface\n            border border-border-default\n            rounded-md\n            focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n          ",
+				children: [
+					/* @__PURE__ */ a("option", {
+						value: 10,
+						children: "10 rows"
+					}),
+					/* @__PURE__ */ a("option", {
+						value: 25,
+						children: "25 rows"
+					}),
+					/* @__PURE__ */ a("option", {
+						value: 50,
+						children: "50 rows"
+					}),
+					/* @__PURE__ */ a("option", {
+						value: 100,
+						children: "100 rows"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ o("div", {
+				className: "flex items-center justify-between mb-2",
+				children: [/* @__PURE__ */ a("label", {
+					className: "text-sm font-medium text-text-primary",
+					children: "Columns"
+				}), /* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: f,
+					className: "\n              text-sm text-action-primary-bg\n              hover:text-action-primary-bgHover\n            ",
+					children: "+ Add Column"
+				})]
+			}), /* @__PURE__ */ o("div", {
+				className: "space-y-3",
+				children: [c.map((e, t) => /* @__PURE__ */ o("div", {
+					className: "\n                p-3\n                bg-bg-muted\n                rounded-md\n                space-y-2\n              ",
+					children: [
+						/* @__PURE__ */ o("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ o("span", {
+								className: "text-xs text-text-secondary",
+								children: ["Column ", t + 1]
+							}), /* @__PURE__ */ a("button", {
+								type: "button",
+								onClick: () => p(t),
+								className: "text-state-error hover:text-state-error/80",
+								children: /* @__PURE__ */ a("svg", {
+									className: "w-4 h-4",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ a("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M6 18L18 6M6 6l12 12"
+									})
+								})
+							})]
+						}),
+						/* @__PURE__ */ o("div", {
+							className: "grid grid-cols-2 gap-2",
+							children: [/* @__PURE__ */ a("input", {
+								type: "text",
+								value: e.field || "",
+								onChange: (e) => d(t, "field", e.target.value),
+								placeholder: "Field name",
+								className: "\n                    px-2 py-1\n                    text-sm text-text-primary\n                    bg-bg-surface\n                    border border-border-default\n                    rounded-md\n                    focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                  "
+							}), /* @__PURE__ */ a("input", {
+								type: "text",
+								value: e.header || "",
+								onChange: (e) => d(t, "header", e.target.value),
+								placeholder: "Header label",
+								className: "\n                    px-2 py-1\n                    text-sm text-text-primary\n                    bg-bg-surface\n                    border border-border-default\n                    rounded-md\n                    focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                  "
+							})]
+						}),
+						/* @__PURE__ */ o("div", {
+							className: "grid grid-cols-2 gap-2",
+							children: [/* @__PURE__ */ o("select", {
+								value: e.format || "text",
+								onChange: (e) => d(t, "format", e.target.value),
+								className: "\n                    px-2 py-1\n                    text-sm text-text-primary\n                    bg-bg-surface\n                    border border-border-default\n                    rounded-md\n                    focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                  ",
+								children: [
+									/* @__PURE__ */ a("option", {
+										value: "text",
+										children: "Text"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "number",
+										children: "Number"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "currency",
+										children: "Currency"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "percentage",
+										children: "Percentage"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "date",
+										children: "Date"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "badge",
+										children: "Badge"
+									})
+								]
+							}), /* @__PURE__ */ o("select", {
+								value: e.align || "left",
+								onChange: (e) => d(t, "align", e.target.value),
+								className: "\n                    px-2 py-1\n                    text-sm text-text-primary\n                    bg-bg-surface\n                    border border-border-default\n                    rounded-md\n                    focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                  ",
+								children: [
+									/* @__PURE__ */ a("option", {
+										value: "left",
+										children: "Left"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "center",
+										children: "Center"
+									}),
+									/* @__PURE__ */ a("option", {
+										value: "right",
+										children: "Right"
+									})
+								]
+							})]
+						})
+					]
+				}, t)), c.length === 0 && /* @__PURE__ */ a("p", {
+					className: "text-sm text-text-secondary text-center py-4",
+					children: "No columns configured. Columns will be auto-generated from data."
+				})]
+			})] }),
+			/* @__PURE__ */ o("div", {
+				className: "space-y-3",
+				children: [
+					/* @__PURE__ */ o("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ a("input", {
+							type: "checkbox",
+							checked: e.showSearch !== !1,
+							onChange: (e) => u("showSearch", e.target.checked),
+							className: "\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            "
+						}), /* @__PURE__ */ a("span", {
+							className: "text-sm text-text-primary",
+							children: "Show search box"
+						})]
+					}),
+					/* @__PURE__ */ o("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ a("input", {
+							type: "checkbox",
+							checked: e.showPagination !== !1,
+							onChange: (e) => u("showPagination", e.target.checked),
+							className: "\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            "
+						}), /* @__PURE__ */ a("span", {
+							className: "text-sm text-text-primary",
+							children: "Show pagination"
+						})]
+					}),
+					/* @__PURE__ */ o("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ a("input", {
+							type: "checkbox",
+							checked: e.showExport !== !1,
+							onChange: (e) => u("showExport", e.target.checked),
+							className: "\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            "
+						}), /* @__PURE__ */ a("span", {
+							className: "text-sm text-text-primary",
+							children: "Show export button"
+						})]
+					}),
+					/* @__PURE__ */ o("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ a("input", {
+							type: "checkbox",
+							checked: e.stickyHeader === !0,
+							onChange: (e) => u("stickyHeader", e.target.checked),
+							className: "\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            "
+						}), /* @__PURE__ */ a("span", {
+							className: "text-sm text-text-primary",
+							children: "Sticky header"
+						})]
+					}),
+					/* @__PURE__ */ o("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ a("input", {
+							type: "checkbox",
+							checked: e.stripedRows === !0,
+							onChange: (e) => u("stripedRows", e.target.checked),
+							className: "\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            "
+						}), /* @__PURE__ */ a("span", {
+							className: "text-sm text-text-primary",
+							children: "Striped rows"
+						})]
+					})
+				]
+			})
+		]
+	});
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=TableConfig.js.map

package/dist/bigconsole/components/widgets/table/TableConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/table/TableConfig.tsx"],"sourcesContent":["/**\n * TableConfig Component\n *\n * Configuration panel for Table widgets.\n */\n\nimport { type FC, memo, useCallback, useMemo, useEffect, useState } from 'react';\nimport type { TableConfig as ConfigType, TableColumnConfig } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface TableConfigProps {\n  /** Current configuration */\n  config: ConfigType;\n  /** Callback when config changes */\n  onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const TableConfig: FC<TableConfigProps> = memo(function TableConfig({ config, onChange }) {\n  // Normalize columns - convert string[] to TableColumnConfig[]\n  const initialColumns = useMemo(() => {\n    return ((config.columns || []) as (string | TableColumnConfig)[]).map((col) => {\n      if (typeof col === 'string') {\n        return {\n          field: col,\n          header: col.charAt(0).toUpperCase() + col.slice(1).replace(/_/g, ' '),\n        };\n      }\n      return col as TableColumnConfig;\n    });\n  }, []); // Only run once on mount\n\n  // Local state for columns to make them editable\n  const [columns, setColumns] = useState<TableColumnConfig[]>(initialColumns);\n\n  // Sync with parent when columns change\n  useEffect(() => {\n    // Only update if columns actually changed (deep compare)\n    const currentStr = JSON.stringify(config.columns);\n    const newStr = JSON.stringify(columns);\n    if (currentStr !== newStr && columns.length > 0) {\n      onChange({ ...config, columns });\n    }\n  }, [columns]);\n\n  // Reset columns when config changes from outside\n  useEffect(() => {\n    const normalized = ((config.columns || []) as (string | TableColumnConfig)[]).map((col) => {\n      if (typeof col === 'string') {\n        return {\n          field: col,\n          header: col.charAt(0).toUpperCase() + col.slice(1).replace(/_/g, ' '),\n        };\n      }\n      return col as TableColumnConfig;\n    });\n    setColumns(normalized);\n  }, [config.columns]);\n\n  const handleChange = useCallback(\n    <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n      onChange({ ...config, [key]: value });\n    },\n    [config, onChange]\n  );\n\n  const handleColumnChange = useCallback((index: number, field: keyof TableColumnConfig, value: string) => {\n    setColumns((prev) => {\n      const newColumns = [...prev];\n      newColumns[index] = { ...newColumns[index], [field]: value };\n      return newColumns;\n    });\n  }, []);\n\n  const addColumn = useCallback(() => {\n    setColumns((prev) => [...prev, { field: '', header: '' }]);\n  }, []);\n\n  const removeColumn = useCallback((index: number) => {\n    setColumns((prev) => prev.filter((_, i) => i !== index));\n  }, []);\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Page Size */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Page Size</label>\n        <select\n          value={config.pageSize || 10}\n          onChange={(e) => handleChange('pageSize', Number(e.target.value))}\n          className=\"\n            w-full px-3 py-2\n            text-sm text-text-primary\n            bg-bg-surface\n            border border-border-default\n            rounded-md\n            focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n          \"\n        >\n          <option value={10}>10 rows</option>\n          <option value={25}>25 rows</option>\n          <option value={50}>50 rows</option>\n          <option value={100}>100 rows</option>\n        </select>\n      </div>\n\n      {/* Columns Configuration */}\n      <div>\n        <div className=\"flex items-center justify-between mb-2\">\n          <label className=\"text-sm font-medium text-text-primary\">Columns</label>\n          <button\n            type=\"button\"\n            onClick={addColumn}\n            className=\"\n              text-sm text-action-primary-bg\n              hover:text-action-primary-bgHover\n            \"\n          >\n            + Add Column\n          </button>\n        </div>\n\n        <div className=\"space-y-3\">\n          {columns.map((col, index) => (\n            <div\n              key={index}\n              className=\"\n                p-3\n                bg-bg-muted\n                rounded-md\n                space-y-2\n              \"\n            >\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-xs text-text-secondary\">Column {index + 1}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => removeColumn(index)}\n                  className=\"text-state-error hover:text-state-error/80\"\n                >\n                  <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                  </svg>\n                </button>\n              </div>\n\n              <div className=\"grid grid-cols-2 gap-2\">\n                <input\n                  type=\"text\"\n                  value={col.field || ''}\n                  onChange={(e) => handleColumnChange(index, 'field', e.target.value)}\n                  placeholder=\"Field name\"\n                  className=\"\n                    px-2 py-1\n                    text-sm text-text-primary\n                    bg-bg-surface\n                    border border-border-default\n                    rounded-md\n                    focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                  \"\n                />\n                <input\n                  type=\"text\"\n                  value={col.header || ''}\n                  onChange={(e) => handleColumnChange(index, 'header', e.target.value)}\n                  placeholder=\"Header label\"\n                  className=\"\n                    px-2 py-1\n                    text-sm text-text-primary\n                    bg-bg-surface\n                    border border-border-default\n                    rounded-md\n                    focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                  \"\n                />\n              </div>\n\n              <div className=\"grid grid-cols-2 gap-2\">\n                <select\n                  value={col.format || 'text'}\n                  onChange={(e) => handleColumnChange(index, 'format', e.target.value)}\n                  className=\"\n                    px-2 py-1\n                    text-sm text-text-primary\n                    bg-bg-surface\n                    border border-border-default\n                    rounded-md\n                    focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                  \"\n                >\n                  <option value=\"text\">Text</option>\n                  <option value=\"number\">Number</option>\n                  <option value=\"currency\">Currency</option>\n                  <option value=\"percentage\">Percentage</option>\n                  <option value=\"date\">Date</option>\n                  <option value=\"badge\">Badge</option>\n                </select>\n                <select\n                  value={col.align || 'left'}\n                  onChange={(e) => handleColumnChange(index, 'align', e.target.value)}\n                  className=\"\n                    px-2 py-1\n                    text-sm text-text-primary\n                    bg-bg-surface\n                    border border-border-default\n                    rounded-md\n                    focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                  \"\n                >\n                  <option value=\"left\">Left</option>\n                  <option value=\"center\">Center</option>\n                  <option value=\"right\">Right</option>\n                </select>\n              </div>\n            </div>\n          ))}\n\n          {columns.length === 0 && (\n            <p className=\"text-sm text-text-secondary text-center py-4\">\n              No columns configured. Columns will be auto-generated from data.\n            </p>\n          )}\n        </div>\n      </div>\n\n      {/* Toggle Options */}\n      <div className=\"space-y-3\">\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showSearch !== false}\n            onChange={(e) => handleChange('showSearch', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">Show search box</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showPagination !== false}\n            onChange={(e) => handleChange('showPagination', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">Show pagination</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showExport !== false}\n            onChange={(e) => handleChange('showExport', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">Show export button</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.stickyHeader === true}\n            onChange={(e) => handleChange('stickyHeader', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">Sticky header</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.stripedRows === true}\n            onChange={(e) => handleChange('stripedRows', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">Striped rows</span>\n        </label>\n      </div>\n    </div>\n  );\n});\n\nexport default TableConfig;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/table/TableHeader.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+
+export interface ColumnDefinition {
+    /** Unique key for the column */
+    key: string;
+    /** Display header text */
+    header: string;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Column width (CSS value) */
+    width?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+export type SortDirection = 'asc' | 'desc' | null;
+export interface SortState {
+    column: string | null;
+    direction: SortDirection;
+}
+export interface TableHeaderProps {
+    /** Column definitions */
+    columns: ColumnDefinition[];
+    /** Current sort state */
+    sortState: SortState;
+    /** Callback when sort changes */
+    onSort: (column: string) => void;
+    /** Whether header is sticky */
+    sticky?: boolean;
+}
+export declare const TableHeader: FC<TableHeaderProps>;
+export default TableHeader;
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/bigconsole/components/widgets/table/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/table/TableHeader.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAMnD,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,yBAAyB;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,iCAAiC;IACjC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAMD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+F3C,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/bigconsole/components/widgets/table/TableHeader.js

@@ -0,0 +1,85 @@
+import { memo as e, useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/table/TableHeader.tsx
+var i = e(function({ columns: e, sortState: i, onSort: a, sticky: o = !0 }) {
+	let s = t((e) => {
+		e.sortable !== !1 && a(e.key);
+	}, [a]), c = (e) => {
+		if (e.sortable === !1) return null;
+		let t = i.column === e.key ? i.direction : null;
+		return /* @__PURE__ */ r("span", {
+			className: "inline-flex ml-1",
+			children: [
+				t === "asc" && /* @__PURE__ */ n("svg", {
+					className: "w-4 h-4 text-action-primary-bg",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ n("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M5 15l7-7 7 7"
+					})
+				}),
+				t === "desc" && /* @__PURE__ */ n("svg", {
+					className: "w-4 h-4 text-action-primary-bg",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ n("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M19 9l-7 7-7-7"
+					})
+				}),
+				!t && /* @__PURE__ */ n("svg", {
+					className: "w-4 h-4 text-text-secondary opacity-0 group-hover:opacity-100",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ n("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+					})
+				})
+			]
+		});
+	};
+	return /* @__PURE__ */ n("thead", {
+		className: `
+        bg-bg-muted
+        ${o ? "sticky top-0 z-10" : ""}
+      `,
+		children: /* @__PURE__ */ n("tr", { children: e.map((e) => /* @__PURE__ */ n("th", {
+			className: `
+              px-4 py-3
+              text-xs font-semibold uppercase tracking-wider
+              text-text-secondary
+              border-b border-border-default
+              ${e.sortable === !1 ? "" : "cursor-pointer select-none group hover:bg-bg-surface"}
+              ${e.align === "center" ? "text-center" : ""}
+              ${e.align === "right" ? "text-right" : "text-left"}
+            `,
+			style: { width: e.width },
+			onClick: () => s(e),
+			role: e.sortable === !1 ? void 0 : "button",
+			tabIndex: e.sortable === !1 ? void 0 : 0,
+			onKeyDown: (t) => {
+				e.sortable !== !1 && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), s(e));
+			},
+			"aria-sort": i.column === e.key ? i.direction === "asc" ? "ascending" : "descending" : void 0,
+			children: /* @__PURE__ */ r("div", {
+				className: "inline-flex items-center",
+				children: [e.header, c(e)]
+			})
+		}, e.key)) })
+	});
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=TableHeader.js.map

package/dist/bigconsole/components/widgets/table/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/table/TableHeader.tsx"],"sourcesContent":["/**\n * TableHeader Component\n *\n * Sortable table header with column definitions.\n */\n\nimport { type FC, memo, useCallback } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ColumnDefinition {\n  /** Unique key for the column */\n  key: string;\n  /** Display header text */\n  header: string;\n  /** Whether column is sortable */\n  sortable?: boolean;\n  /** Column width (CSS value) */\n  width?: string;\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n}\n\nexport type SortDirection = 'asc' | 'desc' | null;\n\nexport interface SortState {\n  column: string | null;\n  direction: SortDirection;\n}\n\nexport interface TableHeaderProps {\n  /** Column definitions */\n  columns: ColumnDefinition[];\n  /** Current sort state */\n  sortState: SortState;\n  /** Callback when sort changes */\n  onSort: (column: string) => void;\n  /** Whether header is sticky */\n  sticky?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const TableHeader: FC<TableHeaderProps> = memo(function TableHeader({\n  columns,\n  sortState,\n  onSort,\n  sticky = true,\n}) {\n  const handleSort = useCallback(\n    (column: ColumnDefinition) => {\n      if (column.sortable !== false) {\n        onSort(column.key);\n      }\n    },\n    [onSort]\n  );\n\n  const getSortIcon = (column: ColumnDefinition) => {\n    if (column.sortable === false) return null;\n\n    const isActive = sortState.column === column.key;\n    const direction = isActive ? sortState.direction : null;\n\n    return (\n      <span className=\"inline-flex ml-1\">\n        {direction === 'asc' && (\n          <svg className=\"w-4 h-4 text-action-primary-bg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n          </svg>\n        )}\n        {direction === 'desc' && (\n          <svg className=\"w-4 h-4 text-action-primary-bg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n          </svg>\n        )}\n        {!direction && (\n          <svg\n            className=\"w-4 h-4 text-text-secondary opacity-0 group-hover:opacity-100\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\"\n            />\n          </svg>\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <thead\n      className={`\n        bg-bg-muted\n        ${sticky ? 'sticky top-0 z-10' : ''}\n      `}\n    >\n      <tr>\n        {columns.map((column) => (\n          <th\n            key={column.key}\n            className={`\n              px-4 py-3\n              text-xs font-semibold uppercase tracking-wider\n              text-text-secondary\n              border-b border-border-default\n              ${column.sortable !== false ? 'cursor-pointer select-none group hover:bg-bg-surface' : ''}\n              ${column.align === 'center' ? 'text-center' : ''}\n              ${column.align === 'right' ? 'text-right' : 'text-left'}\n            `}\n            style={{ width: column.width }}\n            onClick={() => handleSort(column)}\n            role={column.sortable !== false ? 'button' : undefined}\n            tabIndex={column.sortable !== false ? 0 : undefined}\n            onKeyDown={(e) => {\n              if (column.sortable !== false && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                handleSort(column);\n              }\n            }}\n            aria-sort={\n              sortState.column === column.key ? (sortState.direction === 'asc' ? 'ascending' : 'descending') : undefined\n            }\n          >\n            <div className=\"inline-flex items-center\">\n              {column.header}\n              {getSortIcon(column)}\n            </div>\n          </th>\n        ))}\n      </tr>\n    </thead>\n  );\n});\n\nexport default TableHeader;\n"],"mappings":";;;AA+CA,IAAa,IAAoC,EAAK,SAAqB,EACzE,YACA,cACA,WACA,YAAS,MACR;CACD,IAAM,IAAa,GAChB,MAA6B;AAC5B,EAAI,EAAO,aAAa,MACtB,EAAO,EAAO,IAAI;IAGtB,CAAC,EAAO,CACT,EAEK,KAAe,MAA6B;AAChD,MAAI,EAAO,aAAa,GAAO,QAAO;EAGtC,IAAM,IADW,EAAU,WAAW,EAAO,MAChB,EAAU,YAAY;AAEnD,SACE,kBAAC,QAAD;GAAM,WAAU;aAAhB;IACG,MAAc,SACb,kBAAC,OAAD;KAAK,WAAU;KAAiC,MAAK;KAAO,QAAO;KAAe,SAAQ;eACxF,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAa;MAAG,GAAE;MAAkB,CAAA;KACnF,CAAA;IAEP,MAAc,UACb,kBAAC,OAAD;KAAK,WAAU;KAAiC,MAAK;KAAO,QAAO;KAAe,SAAQ;eACxF,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAa;MAAG,GAAE;MAAmB,CAAA;KACpF,CAAA;IAEP,CAAC,KACA,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,QAAO;KACP,SAAQ;eAER,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IAEH;;;AAIX,QACE,kBAAC,SAAD;EACE,WAAW;;UAEP,IAAS,sBAAsB,GAAG;;YAGtC,kBAAC,MAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,MAAD;GAEE,WAAW;;;;;gBAKP,EAAO,aAAa,KAAiE,KAAzD,uDAA4D;gBACxF,EAAO,UAAU,WAAW,gBAAgB,GAAG;gBAC/C,EAAO,UAAU,UAAU,eAAe,YAAY;;GAE1D,OAAO,EAAE,OAAO,EAAO,OAAO;GAC9B,eAAe,EAAW,EAAO;GACjC,MAAM,EAAO,aAAa,KAAmB,KAAA,IAAX;GAClC,UAAU,EAAO,aAAa,KAAY,KAAA,IAAJ;GACtC,YAAY,MAAM;AAChB,IAAI,EAAO,aAAa,OAAU,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC/D,EAAE,gBAAgB,EAClB,EAAW,EAAO;;GAGtB,aACE,EAAU,WAAW,EAAO,MAAO,EAAU,cAAc,QAAQ,cAAc,eAAgB,KAAA;aAGnG,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAO,QACP,EAAY,EAAO,CAChB;;GACH,EA5BE,EAAO,IA4BT,CACL,EACC,CAAA;EACC,CAAA;EAEV"}

package/dist/bigconsole/components/widgets/table/TablePagination.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+export interface PaginationState {
+    /** Current page (0-indexed) */
+    page: number;
+    /** Items per page */
+    pageSize: number;
+    /** Total number of items */
+    totalItems: number;
+}
+export interface TablePaginationProps {
+    /** Pagination state */
+    pagination: PaginationState;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Callback when page size changes */
+    onPageSizeChange: (pageSize: number) => void;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+}
+export declare const TablePagination: FC<TablePaginationProps>;
+export default TablePagination;
+//# sourceMappingURL=TablePagination.d.ts.map

package/dist/bigconsole/components/widgets/table/TablePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/table/TablePagination.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAMnD,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,UAAU,EAAE,eAAe,CAAC;IAC5B,iCAAiC;IACjC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,sCAAsC;IACtC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAMD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA6KnD,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/dist/bigconsole/components/widgets/table/TablePagination.js

@@ -0,0 +1,166 @@
+import { memo as e, useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/table/TablePagination.tsx
+var i = e(function({ pagination: e, onPageChange: i, onPageSizeChange: a, pageSizeOptions: o = [
+	10,
+	25,
+	50,
+	100
+] }) {
+	let { page: s, pageSize: c, totalItems: l } = e, u = Math.ceil(l / c), d = s * c + 1, f = Math.min((s + 1) * c, l), p = t(() => {
+		s > 0 && i(s - 1);
+	}, [s, i]), m = t(() => {
+		s < u - 1 && i(s + 1);
+	}, [
+		s,
+		u,
+		i
+	]), h = t(() => {
+		i(0);
+	}, [i]), g = t(() => {
+		i(u - 1);
+	}, [u, i]), _ = t((e) => {
+		a(Number(e.target.value)), i(0);
+	}, [a, i]);
+	return l === 0 ? null : /* @__PURE__ */ r("div", {
+		className: "\n          flex items-center justify-between\n          px-4 py-3\n          border-t border-border-default\n          bg-bg-surface\n        ",
+		children: [/* @__PURE__ */ r("div", {
+			className: "text-sm text-text-secondary",
+			children: [
+				"Showing ",
+				/* @__PURE__ */ n("span", {
+					className: "font-medium",
+					children: d
+				}),
+				" to ",
+				/* @__PURE__ */ n("span", {
+					className: "font-medium",
+					children: f
+				}),
+				" of",
+				" ",
+				/* @__PURE__ */ n("span", {
+					className: "font-medium",
+					children: l
+				}),
+				" results"
+			]
+		}), /* @__PURE__ */ r("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ n("span", {
+					className: "text-sm text-text-secondary",
+					children: "Show:"
+				}), /* @__PURE__ */ n("select", {
+					value: c,
+					onChange: _,
+					className: "\n                px-2 py-1\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              ",
+					children: o.map((e) => /* @__PURE__ */ n("option", {
+						value: e,
+						children: e
+					}, e))
+				})]
+			}), /* @__PURE__ */ r("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ n("button", {
+						type: "button",
+						onClick: h,
+						disabled: s === 0,
+						className: "\n                p-1.5 rounded-md\n                text-text-secondary\n                hover:text-text-primary\n                hover:bg-bg-muted\n                disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors\n              ",
+						title: "First page",
+						children: /* @__PURE__ */ n("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ n("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M11 19l-7-7 7-7m8 14l-7-7 7-7"
+							})
+						})
+					}),
+					/* @__PURE__ */ n("button", {
+						type: "button",
+						onClick: p,
+						disabled: s === 0,
+						className: "\n                p-1.5 rounded-md\n                text-text-secondary\n                hover:text-text-primary\n                hover:bg-bg-muted\n                disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors\n              ",
+						title: "Previous page",
+						children: /* @__PURE__ */ n("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ n("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M15 19l-7-7 7-7"
+							})
+						})
+					}),
+					/* @__PURE__ */ r("span", {
+						className: "px-3 text-sm text-text-primary",
+						children: [
+							"Page ",
+							/* @__PURE__ */ n("span", {
+								className: "font-medium",
+								children: s + 1
+							}),
+							" of ",
+							/* @__PURE__ */ n("span", {
+								className: "font-medium",
+								children: u
+							})
+						]
+					}),
+					/* @__PURE__ */ n("button", {
+						type: "button",
+						onClick: m,
+						disabled: s >= u - 1,
+						className: "\n                p-1.5 rounded-md\n                text-text-secondary\n                hover:text-text-primary\n                hover:bg-bg-muted\n                disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors\n              ",
+						title: "Next page",
+						children: /* @__PURE__ */ n("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ n("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M9 5l7 7-7 7"
+							})
+						})
+					}),
+					/* @__PURE__ */ n("button", {
+						type: "button",
+						onClick: g,
+						disabled: s >= u - 1,
+						className: "\n                p-1.5 rounded-md\n                text-text-secondary\n                hover:text-text-primary\n                hover:bg-bg-muted\n                disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors\n              ",
+						title: "Last page",
+						children: /* @__PURE__ */ n("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							stroke: "currentColor",
+							viewBox: "0 0 24 24",
+							children: /* @__PURE__ */ n("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M13 5l7 7-7 7M5 5l7 7-7 7"
+							})
+						})
+					})
+				]
+			})]
+		})]
+	});
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=TablePagination.js.map

package/dist/bigconsole/components/widgets/table/TablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/table/TablePagination.tsx"],"sourcesContent":["/**\n * TablePagination Component\n *\n * Pagination controls for table widget.\n */\n\nimport { type FC, memo, useCallback } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface PaginationState {\n  /** Current page (0-indexed) */\n  page: number;\n  /** Items per page */\n  pageSize: number;\n  /** Total number of items */\n  totalItems: number;\n}\n\nexport interface TablePaginationProps {\n  /** Pagination state */\n  pagination: PaginationState;\n  /** Callback when page changes */\n  onPageChange: (page: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange: (pageSize: number) => void;\n  /** Available page size options */\n  pageSizeOptions?: number[];\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const TablePagination: FC<TablePaginationProps> = memo(function TablePagination({\n  pagination,\n  onPageChange,\n  onPageSizeChange,\n  pageSizeOptions = [10, 25, 50, 100],\n}) {\n  const { page, pageSize, totalItems } = pagination;\n  const totalPages = Math.ceil(totalItems / pageSize);\n  const startItem = page * pageSize + 1;\n  const endItem = Math.min((page + 1) * pageSize, totalItems);\n\n  const handlePrevious = useCallback(() => {\n    if (page > 0) {\n      onPageChange(page - 1);\n    }\n  }, [page, onPageChange]);\n\n  const handleNext = useCallback(() => {\n    if (page < totalPages - 1) {\n      onPageChange(page + 1);\n    }\n  }, [page, totalPages, onPageChange]);\n\n  const handleFirst = useCallback(() => {\n    onPageChange(0);\n  }, [onPageChange]);\n\n  const handleLast = useCallback(() => {\n    onPageChange(totalPages - 1);\n  }, [totalPages, onPageChange]);\n\n  const handlePageSizeChange = useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) => {\n      onPageSizeChange(Number(event.target.value));\n      onPageChange(0); // Reset to first page\n    },\n    [onPageSizeChange, onPageChange]\n  );\n\n  if (totalItems === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"\n          flex items-center justify-between\n          px-4 py-3\n          border-t border-border-default\n          bg-bg-surface\n        \"\n    >\n      {/* Items info */}\n      <div className=\"text-sm text-text-secondary\">\n        Showing <span className=\"font-medium\">{startItem}</span> to <span className=\"font-medium\">{endItem}</span> of{' '}\n        <span className=\"font-medium\">{totalItems}</span> results\n      </div>\n\n      {/* Controls */}\n      <div className=\"flex items-center gap-4\">\n        {/* Page size selector */}\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm text-text-secondary\">Show:</span>\n          <select\n            value={pageSize}\n            onChange={handlePageSizeChange}\n            className=\"\n                px-2 py-1\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              \"\n          >\n            {pageSizeOptions.map((size) => (\n              <option key={size} value={size}>\n                {size}\n              </option>\n            ))}\n          </select>\n        </div>\n\n        {/* Navigation buttons */}\n        <div className=\"flex items-center gap-1\">\n          {/* First */}\n          <button\n            type=\"button\"\n            onClick={handleFirst}\n            disabled={page === 0}\n            className=\"\n                p-1.5 rounded-md\n                text-text-secondary\n                hover:text-text-primary\n                hover:bg-bg-muted\n                disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors\n              \"\n            title=\"First page\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M11 19l-7-7 7-7m8 14l-7-7 7-7\" />\n            </svg>\n          </button>\n\n          {/* Previous */}\n          <button\n            type=\"button\"\n            onClick={handlePrevious}\n            disabled={page === 0}\n            className=\"\n                p-1.5 rounded-md\n                text-text-secondary\n                hover:text-text-primary\n                hover:bg-bg-muted\n                disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors\n              \"\n            title=\"Previous page\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n            </svg>\n          </button>\n\n          {/* Page indicator */}\n          <span className=\"px-3 text-sm text-text-primary\">\n            Page <span className=\"font-medium\">{page + 1}</span> of <span className=\"font-medium\">{totalPages}</span>\n          </span>\n\n          {/* Next */}\n          <button\n            type=\"button\"\n            onClick={handleNext}\n            disabled={page >= totalPages - 1}\n            className=\"\n                p-1.5 rounded-md\n                text-text-secondary\n                hover:text-text-primary\n                hover:bg-bg-muted\n                disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors\n              \"\n            title=\"Next page\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n\n          {/* Last */}\n          <button\n            type=\"button\"\n            onClick={handleLast}\n            disabled={page >= totalPages - 1}\n            className=\"\n                p-1.5 rounded-md\n                text-text-secondary\n                hover:text-text-primary\n                hover:bg-bg-muted\n                disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors\n              \"\n            title=\"Last page\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 5l7 7-7 7M5 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default TablePagination;\n"],"mappings":"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"}