@rufous/ui 0.1.63 → 0.2.0-beta.0

package/dist/DataGrid/index.cjs

@@ -0,0 +1,418 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// lib/DataGrid/index.ts
+var DataGrid_exports = {};
+__export(DataGrid_exports, {
+  DataGrid: () => DataGrid
+});
+module.exports = __toCommonJS(DataGrid_exports);
+
+// lib/DataGrid/DataGrid.tsx
+var import_react = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
+function DataGrid({
+  columns: initialColumns,
+  data,
+  actions,
+  pageSize: initialPageSize = 10,
+  pageSizeOptions = [5, 10, 25, 50],
+  title
+}) {
+  const [columns, setColumns] = (0, import_react.useState)(initialColumns);
+  const [columnWidths, setColumnWidths] = (0, import_react.useState)(() => {
+    const widths = {};
+    initialColumns.forEach((col) => {
+      widths[String(col.key)] = parseInt(col.width || "200");
+    });
+    return widths;
+  });
+  const [pageSize, setPageSize] = (0, import_react.useState)(initialPageSize);
+  const [sortKey, setSortKey] = (0, import_react.useState)(null);
+  const [sortDirection, setSortDirection] = (0, import_react.useState)(null);
+  const [filterText, setFilterText] = (0, import_react.useState)("");
+  const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
+  const [columnFilters, setColumnFilters] = (0, import_react.useState)({});
+  const [resizingColumn, setResizingColumn] = (0, import_react.useState)(null);
+  const [startX, setStartX] = (0, import_react.useState)(0);
+  const [startWidth, setStartWidth] = (0, import_react.useState)(0);
+  const [activeMenu, setActiveMenu] = (0, import_react.useState)(null);
+  const [menuPosition, setMenuPosition] = (0, import_react.useState)({ top: 0, left: 0 });
+  const menuRef = (0, import_react.useRef)(null);
+  const [showManageColumns, setShowManageColumns] = (0, import_react.useState)(false);
+  const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react.useState)(false);
+  const [advancedFilters, setAdvancedFilters] = (0, import_react.useState)([
+    { column: String(initialColumns[0].key), operator: "contains", value: "", logic: "AND" }
+  ]);
+  const [colSearch, setColSearch] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    const handleMouseMove = (e) => {
+      if (!resizingColumn) return;
+      const col = columns.find((c) => String(c.key) === resizingColumn);
+      const diff = e.clientX - startX;
+      const minW = col?.minWidth ? parseInt(col.minWidth) : 80;
+      const maxW = col?.maxWidth ? parseInt(col.maxWidth) : Infinity;
+      const newWidth = Math.min(maxW, Math.max(minW, startWidth + diff));
+      setColumnWidths((prev) => ({ ...prev, [resizingColumn]: newWidth }));
+    };
+    const handleMouseUp = () => setResizingColumn(null);
+    if (resizingColumn) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingColumn, startX, startWidth, columns]);
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setActiveMenu(null);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSort = (key, dir) => {
+    if (dir !== void 0) {
+      setSortKey(key);
+      setSortDirection(dir);
+    } else if (sortKey === key) {
+      if (sortDirection === "asc") setSortDirection("desc");
+      else {
+        setSortKey(null);
+        setSortDirection(null);
+      }
+    } else {
+      setSortKey(key);
+      setSortDirection("asc");
+    }
+    setActiveMenu(null);
+  };
+  const togglePin = (key, side) => {
+    setColumns((prev) => prev.map(
+      (col) => String(col.key) === key ? { ...col, pinned: col.pinned === side ? void 0 : side } : col
+    ));
+    setActiveMenu(null);
+  };
+  const toggleHide = (key) => {
+    setColumns((prev) => prev.map(
+      (col) => String(col.key) === key ? { ...col, hidden: !col.hidden } : col
+    ));
+    setActiveMenu(null);
+  };
+  const filteredData = (0, import_react.useMemo)(() => {
+    return data.filter((item) => {
+      const matchesGlobal = !filterText || Object.values(item).some(
+        (val) => String(val).toLowerCase().includes(filterText.toLowerCase())
+      );
+      const evalFilter = (f) => {
+        if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
+        const itemVal = String(item[f.column]).toLowerCase();
+        const val = f.value.toLowerCase();
+        switch (f.operator) {
+          case "contains":
+            return itemVal.includes(val);
+          case "equals":
+            return itemVal === val;
+          case "starts with":
+            return itemVal.startsWith(val);
+          case "ends with":
+            return itemVal.endsWith(val);
+          case "is empty":
+            return !itemVal;
+          case "is not empty":
+            return !!itemVal;
+          default:
+            return true;
+        }
+      };
+      let matchesAdvanced = evalFilter(advancedFilters[0]);
+      for (let i = 1; i < advancedFilters.length; i++) {
+        const result = evalFilter(advancedFilters[i]);
+        if (advancedFilters[i].logic === "OR") {
+          matchesAdvanced = matchesAdvanced || result;
+        } else {
+          matchesAdvanced = matchesAdvanced && result;
+        }
+      }
+      return matchesGlobal && matchesAdvanced;
+    });
+  }, [data, filterText, advancedFilters]);
+  const sortedData = (0, import_react.useMemo)(() => {
+    if (!sortKey || !sortDirection) return filteredData;
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[sortKey];
+      const bVal = b[sortKey];
+      if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
+      if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [filteredData, sortKey, sortDirection]);
+  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const paginatedData = (0, import_react.useMemo)(() => {
+    const start = (currentPage - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, currentPage, pageSize]);
+  const handleExport = () => {
+    const visibleCols = columns.filter((c) => !c.hidden);
+    const headers = visibleCols.map((c) => c.header).join(",");
+    const rows = sortedData.map(
+      (item) => visibleCols.map((c) => `"${String(item[c.key]).replace(/"/g, '""')}"`).join(",")
+    );
+    const csv = [headers, ...rows].join("\n");
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `${title || "data"}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  const handleMenuOpen = (e, key) => {
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    setMenuPosition({ top: rect.bottom + 4, left: rect.left });
+    setActiveMenu(key);
+  };
+  const visibleColumns = (0, import_react.useMemo)(() => {
+    const left = columns.filter((c) => !c.hidden && c.pinned === "left");
+    const mid = columns.filter((c) => !c.hidden && !c.pinned);
+    const right = columns.filter((c) => !c.hidden && c.pinned === "right");
+    return [...left, ...mid, ...right];
+  }, [columns]);
+  const getLeftOffset = (col, idx) => {
+    if (col.pinned !== "left") return void 0;
+    let offset = 0;
+    for (let i = 0; i < idx; i++) {
+      if (visibleColumns[i].pinned === "left") {
+        offset += columnWidths[String(visibleColumns[i].key)] || 200;
+      }
+    }
+    return offset;
+  };
+  const hasActiveFilters = advancedFilters.some((f) => f.value);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-root" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react.default.createElement("h2", null, title), /* @__PURE__ */ import_react.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Search, { size: 15 }), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      className: "dg-search",
+      placeholder: "Search\u2026",
+      value: filterText,
+      onChange: (e) => {
+        setFilterText(e.target.value);
+        setCurrentPage(1);
+      }
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
+      onClick: () => setShowAdvancedFilter(true),
+      title: "Filters"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Filter, { size: 16 })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: "dg-icon-btn",
+      onClick: () => setShowManageColumns(true),
+      title: "Manage Columns"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Columns, { size: 16 })
+  ), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", null, visibleColumns.map((col, idx) => {
+    const colKey = String(col.key);
+    const width = columnWidths[colKey] || 200;
+    const leftOffset = getLeftOffset(col, idx);
+    const isSorted = sortKey === col.key;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "th",
+      {
+        key: colKey,
+        className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""}`,
+        style: { width, minWidth: width, left: leftOffset }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
+          onClick: () => col.sortable !== false && handleSort(col.key)
+        },
+        col.header,
+        isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronUp, { size: 12 }),
+        isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, { size: 12 })
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-actions" }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          className: "dg-th-menu-btn",
+          onClick: (e) => handleMenuOpen(e, colKey)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_lucide_react.MoreVertical, { size: 13 })
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `dg-resizer${resizingColumn === colKey ? " resizing" : ""}`,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            setResizingColumn(colKey);
+            setStartX(e.clientX);
+            setStartWidth(width);
+          }
+        }
+      )))
+    );
+  }), actions && /* @__PURE__ */ import_react.default.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ import_react.default.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ import_react.default.createElement("tr", { key: item.id, className: "dg-tbody-row" }, visibleColumns.map((col, idx) => {
+    const colKey = String(col.key);
+    const width = columnWidths[colKey] || 200;
+    const leftOffset = getLeftOffset(col, idx);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "td",
+      {
+        key: `${item.id}-${colKey}`,
+        className: `dg-td${col.pinned === "left" ? " pinned-left" : ""}`,
+        style: { width, minWidth: width, maxWidth: width, left: leftOffset }
+      },
+      col.render ? col.render(item[col.key], item) : String(item[col.key] ?? "")
+    );
+  }), actions && /* @__PURE__ */ import_react.default.createElement("td", { className: "dg-row-actions-cell" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-row-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-action-group" }, actions.map((action, i) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: i,
+      className: "dg-row-action-btn",
+      style: { color: action.color || "var(--text-secondary)" },
+      onClick: () => action.onClick(item),
+      title: action.label
+    },
+    action.icon
+  )))))))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react.default.createElement(
+    "select",
+    {
+      value: pageSize,
+      onChange: (e) => {
+        setPageSize(Number(e.target.value));
+        setCurrentPage(1);
+      }
+    },
+    pageSizeOptions.map((o) => /* @__PURE__ */ import_react.default.createElement("option", { key: o, value: o }, o))
+  )), /* @__PURE__ */ import_react.default.createElement("span", null, (currentPage - 1) * pageSize + 1, "\u2013", Math.min(currentPage * pageSize, filteredData.length), " of ", filteredData.length)), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-page-btn", disabled: currentPage === 1, onClick: () => setCurrentPage((p) => p - 1) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronLeft, { size: 15 })), /* @__PURE__ */ import_react.default.createElement("span", { className: "dg-page-fraction" }, currentPage, " / ", totalPages), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-page-btn", disabled: currentPage === totalPages, onClick: () => setCurrentPage((p) => p + 1) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: menuRef,
+      className: "dg-menu",
+      style: { top: menuPosition.top, left: menuPosition.left }
+    },
+    /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ArrowUp, { size: 14 }), " Sort ascending"),
+    /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ArrowDown, { size: 14 }), " Sort descending"),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-menu-divider" }),
+    /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"),
+    /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-menu-divider" }),
+    /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => {
+      setShowAdvancedFilter(true);
+      setActiveMenu(null);
+    } }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Filter, { size: 14 }), " Filter\u2026"),
+    /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14 }), " Hide column"),
+    /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => {
+      setShowManageColumns(true);
+      setActiveMenu(null);
+    } }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Columns, { size: 14 }), " Manage columns")
+  ), showManageColumns && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "Manage Columns"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 18 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-body" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-search-wrap", style: { marginBottom: 8 } }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Search, { size: 14 }), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      className: "dg-search",
+      style: { width: "100%" },
+      placeholder: "Find column\u2026",
+      value: colSearch,
+      onChange: (e) => setColSearch(e.target.value)
+    }
+  )), columns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => /* @__PURE__ */ import_react.default.createElement("div", { key: String(col.key), className: "dg-col-row" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(String(col.key)) }, col.hidden ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14, style: { opacity: 0.4 } }))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => ({ ...c, hidden: false }))) }, "Show All"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => ({ ...c, hidden: true }))) }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 18 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
+      onClick: () => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, logic: "AND" } : fi))
+    },
+    "AND"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: `dg-logic-btn${f.logic === "OR" ? " active" : ""}`,
+      onClick: () => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, logic: "OR" } : fi))
+    },
+    "OR"
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-filter-row" }, advancedFilters.length > 1 && /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => setAdvancedFilters((p) => p.filter((_, i) => i !== idx)) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14 })), /* @__PURE__ */ import_react.default.createElement(
+    "select",
+    {
+      className: "dg-filter-select",
+      value: f.column,
+      onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: e.target.value } : fi))
+    },
+    columns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "select",
+    {
+      className: "dg-filter-select dg-filter-select-sm",
+      value: f.operator,
+      onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, operator: e.target.value } : fi))
+    },
+    /* @__PURE__ */ import_react.default.createElement("option", { value: "contains" }, "contains"),
+    /* @__PURE__ */ import_react.default.createElement("option", { value: "equals" }, "equals"),
+    /* @__PURE__ */ import_react.default.createElement("option", { value: "starts with" }, "starts with"),
+    /* @__PURE__ */ import_react.default.createElement("option", { value: "ends with" }, "ends with"),
+    /* @__PURE__ */ import_react.default.createElement("option", { value: "is empty" }, "is empty"),
+    /* @__PURE__ */ import_react.default.createElement("option", { value: "is not empty" }, "is not empty")
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      className: "dg-filter-input",
+      placeholder: "Value\u2026",
+      value: f.value,
+      onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
+    }
+  )))), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: "dg-action-btn",
+      style: { alignSelf: "flex-start", marginTop: 4 },
+      onClick: () => setAdvancedFilters((p) => [...p, { column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, { size: 14 }),
+    " Add Filter"
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: "dg-action-btn",
+      onClick: () => setAdvancedFilters([{ column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Trash2, { size: 14 }),
+    " Reset"
+  ), /* @__PURE__ */ import_react.default.createElement("button", { className: "submit-btn", onClick: () => setShowAdvancedFilter(false) }, "Apply")))));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataGrid
+});

package/dist/DataGrid/index.d.cts

@@ -0,0 +1,3 @@
+export { default as DataGrid } from './DataGrid.cjs';
+export { Action, Column, DataGridProps, SortDirection } from './types.cjs';
+import 'react';

package/dist/DataGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DataGrid } from './DataGrid.js';
+export { Action, Column, DataGridProps, SortDirection } from './types.js';
+import 'react';

package/dist/DataGrid/index.js

@@ -0,0 +1,8 @@
+import "../chunk-7KRG7VNW.js";
+import {
+  DataGrid
+} from "../chunk-J6E3UO2W.js";
+import "../chunk-LI4N7JWK.js";
+export {
+  DataGrid
+};

package/dist/{TextFields/FloatingInput.d.cjs → DataGrid/types.cjs}

@@ -12,6 +12,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// lib/TextFields/FloatingInput.d.ts
-var FloatingInput_d_exports = {};
-module.exports = __toCommonJS(FloatingInput_d_exports);
+// lib/DataGrid/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/dist/DataGrid/types.d.cts

@@ -0,0 +1,31 @@
+import React__default from 'react';
+
+type SortDirection = 'asc' | 'desc' | null;
+interface Column<T> {
+    key: keyof T | string;
+    header: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    render?: (value: any, item: T) => React__default.ReactNode;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    pinned?: 'left' | 'right';
+    hidden?: boolean;
+}
+interface Action<T> {
+    label: string;
+    icon: React__default.ReactNode;
+    onClick: (item: T) => void;
+    color?: string;
+}
+interface DataGridProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    actions?: Action<T>[];
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    title?: string;
+}
+
+export type { Action, Column, DataGridProps, SortDirection };

package/dist/DataGrid/types.d.ts

@@ -0,0 +1,31 @@
+import React__default from 'react';
+
+type SortDirection = 'asc' | 'desc' | null;
+interface Column<T> {
+    key: keyof T | string;
+    header: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    render?: (value: any, item: T) => React__default.ReactNode;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    pinned?: 'left' | 'right';
+    hidden?: boolean;
+}
+interface Action<T> {
+    label: string;
+    icon: React__default.ReactNode;
+    onClick: (item: T) => void;
+    color?: string;
+}
+interface DataGridProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    actions?: Action<T>[];
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    title?: string;
+}
+
+export type { Action, Column, DataGridProps, SortDirection };

package/dist/Dialogs/BaseDialog.cjs

@@ -55,8 +55,8 @@ var BaseDialog = ({
   minWidth,
   minHeight,
   customButtons,
-  cancelText = "Cancel",
-  confirmText = "Ok",
+  cancelText = "CANCEL",
+  confirmText = "SUBMIT",
   submitText = "Submit",
   title = "",
   isLoading = false,
@@ -69,9 +69,10 @@ var BaseDialog = ({
   formatTitle = true,
   fullWidth = false,
   className,
-  dialogBodyStyle = {}
+  dialogBodyStyle = {},
+  size
 }) => {
-  const { theme } = useRufousTheme();
+  const { themeConfig } = useRufousTheme();
   const successBtnRef = (0, import_react2.useRef)(null);
   if (!open) return null;
   const renderButtons = () => /* @__PURE__ */ React3.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React3.createElement(
@@ -96,17 +97,23 @@ var BaseDialog = ({
     },
     loading ? /* @__PURE__ */ React3.createElement("span", { className: "spinner" }) : /* @__PURE__ */ React3.createElement("span", null, confirmText)
   ));
-  return /* @__PURE__ */ React3.createElement("div", { className: `dialog-overlay ${fullScreen ? "fullscreen" : ""}` }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React3.createElement(
     "div",
     {
-      className: `dialog-container ${className || ""}`,
+      className: `dialog-container ${size ? `size-${size}` : ""}  ${className || ""}`,
       style: {
-        minWidth: minWidth || (fullScreen ? "100%" : "685px"),
-        minHeight,
-        width: fullWidth ? "100%" : "auto"
+        minWidth,
+        minHeight
       }
     },
-    /* @__PURE__ */ React3.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React3.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase() : title), showCloseButton && /* @__PURE__ */ React3.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React3.createElement(closeIcon_default, { color: theme?.customStyles?.iconColor || "#707070" }))),
+    /* @__PURE__ */ React3.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React3.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React3.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React3.createElement(
+      closeIcon_default,
+      {
+        width: 20,
+        height: 20,
+        color: themeConfig?.icon || "#666666"
+      }
+    ))),
     /* @__PURE__ */ React3.createElement("div", { className: "dialog-divider" }),
     /* @__PURE__ */ React3.createElement(
       "div",
@@ -119,6 +126,7 @@ var BaseDialog = ({
       },
       children
     ),
+    /* @__PURE__ */ React3.createElement("div", { className: "dialog-divider" }),
     customButtons || renderButtons()
   ));
 };