@gridcore/react-smart-table 0.1.0

package/dist/index.js

@@ -0,0 +1,864 @@
+"use strict";
+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);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ColumnSelector: () => ColumnSelector,
+  Icon: () => Icon,
+  Pagination: () => Pagination,
+  SmartTable: () => SmartTable,
+  Tooltip: () => Tooltip,
+  getIcon: () => getIcon
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/SmartTable.tsx
+var import_react4 = require("react");
+
+// src/components/SearchBar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SearchBar = ({ value, onChange, placeholder = "Search...", primaryColor = "purple" }) => {
+  const focusRingColor = primaryColor === "purple" ? "focus:ring-purple-600 focus:border-purple-600" : `focus:ring-${primaryColor}-600 focus:border-${primaryColor}-600`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "text",
+        placeholder,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: `w-full h-[41px] pl-10 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-1 ${focusRingColor}`
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "absolute left-3 top-3 w-5 h-5 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+    value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: () => onChange(""),
+        className: "absolute right-3 top-3 text-gray-400 hover:text-gray-600",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+      }
+    )
+  ] });
+};
+
+// src/components/BulkActionsDropdown.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var colorClasses = {
+  red: "text-red-600",
+  green: "text-green-600",
+  yellow: "text-yellow-600",
+  blue: "text-blue-600"
+};
+var BulkActionsDropdown = ({
+  selectedCount,
+  isOpen,
+  onToggle,
+  actions,
+  onClose
+}) => {
+  const dropdownRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+  if (selectedCount === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        onClick: onToggle,
+        className: "h-[41px] px-3 border border-purple-600 rounded-md hover:bg-gray-50 transition-colors flex items-center gap-2 text-purple-600",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-sm font-medium", children: [
+            "Actions (",
+            selectedCount,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute top-full mt-2 right-0 w-40 bg-white border border-gray-200 rounded-lg shadow-xl z-50 py-2", children: actions.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        onClick: () => {
+          action.onClick([]);
+          onClose();
+        },
+        className: `w-full px-4 py-2 text-left text-sm hover:bg-gray-50 flex items-center gap-3 ${colorClasses[action.color || "blue"]}`,
+        children: [
+          action.icon,
+          action.label
+        ]
+      },
+      idx
+    )) })
+  ] });
+};
+
+// src/components/Tooltip.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Tooltip = ({ children, text, position = "left" }) => {
+  const [isVisible, setIsVisible] = (0, import_react2.useState)(false);
+  const [isTruncated, setIsTruncated] = (0, import_react2.useState)(false);
+  const contentRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const checkTruncation = () => {
+      if (contentRef.current) {
+        const element = contentRef.current.querySelector("[data-truncate]");
+        if (element) {
+          setIsTruncated(element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight);
+        }
+      }
+    };
+    checkTruncation();
+    window.addEventListener("resize", checkTruncation);
+    return () => window.removeEventListener("resize", checkTruncation);
+  }, [children]);
+  const positionClasses = {
+    left: "right-full mr-2 top-1/2 -translate-y-1/2",
+    right: "left-full ml-2 top-1/2 -translate-y-1/2",
+    top: "bottom-full mb-2 left-1/2 -translate-x-1/2",
+    bottom: "top-full mt-2 left-1/2 -translate-x-1/2"
+  };
+  const arrowClasses = {
+    left: "absolute left-full top-1/2 -translate-y-1/2 border-l-gray-800 border-l-4 border-y-transparent border-y-4 border-r-0",
+    right: "absolute right-full top-1/2 -translate-y-1/2 border-r-gray-800 border-r-4 border-y-transparent border-y-4 border-l-0",
+    top: "absolute top-full left-1/2 -translate-x-1/2 border-t-gray-800 border-t-4 border-x-transparent border-x-4 border-b-0",
+    bottom: "absolute bottom-full left-1/2 -translate-x-1/2 border-b-gray-800 border-b-4 border-x-transparent border-x-4 border-t-0"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref: contentRef,
+      className: "relative inline-block",
+      onMouseEnter: () => isTruncated && setIsVisible(true),
+      onMouseLeave: () => setIsVisible(false),
+      children: [
+        children,
+        isVisible && isTruncated && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `absolute z-50 ${positionClasses[position]}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap", children: [
+          text,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: arrowClasses[position] })
+        ] }) })
+      ]
+    }
+  );
+};
+
+// src/utils/icons.tsx
+var LucideIcons = __toESM(require("lucide-react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Icon = ({ name, className, size, strokeWidth, style }) => {
+  const LucideIcon = LucideIcons[name];
+  if (!LucideIcon) {
+    console.warn(`Icon "${name}" not found in lucide-react`);
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LucideIcon, { className, size, strokeWidth, style });
+};
+var getIcon = (name, props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name, ...props });
+};
+
+// src/components/TableHeader.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TableHeader({
+  columns,
+  showCheckbox,
+  showActions,
+  selectAll,
+  onSelectAll,
+  sortConfig,
+  onSort,
+  styles = {},
+  primaryColor = "purple"
+}) {
+  const checkboxBg = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
+  const checkboxBorder = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: styles.headerRow || "border-b border-gray-200", children: [
+    showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: styles.headerCell || "w-15 pl-4 py-3 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", checked: selectAll, onChange: onSelectAll, className: "sr-only" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: styles.checkbox || `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95`,
+          style: {
+            borderColor: selectAll ? checkboxBorder : "rgb(209 213 219)",
+            backgroundColor: selectAll ? checkboxBg : "white"
+          },
+          onClick: onSelectAll,
+          children: selectAll && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "Check", className: "w-3 h-3 text-white", strokeWidth: 2.5 })
+        }
+      )
+    ] }) }),
+    columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "th",
+      {
+        className: styles.headerCell || `px-4 py-3 text-xs font-medium uppercase tracking-wider text-left ${col.sortable ? "cursor-pointer hover:bg-gray-50" : ""}`,
+        onClick: () => col.sortable && onSort(col.key),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tooltip, { text: col.title, position: "top", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", "data-truncate": true, children: col.title }) }),
+          col.sortable && (sortConfig == null ? void 0 : sortConfig.key) === col.key && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: sortConfig.direction === "asc" ? "\u2191" : "\u2193" })
+        ] })
+      },
+      String(col.key)
+    )),
+    showActions && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: styles.headerCell || "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", children: "Action" })
+  ] });
+}
+
+// src/components/TableRow.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function TableRow({
+  row,
+  columns,
+  showCheckbox,
+  showActions,
+  isSelected,
+  onSelect,
+  onRowClick,
+  onEdit,
+  onDelete,
+  styles = {},
+  primaryColor = "purple"
+}) {
+  const checkboxBg = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
+  const checkboxBorder = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
+  const actionColor = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { className: styles.row || "hover:bg-gray-50 cursor-pointer border-b border-gray-100", onClick: onRowClick, children: [
+    showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "pl-4 py-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: isSelected, onChange: onSelect, className: "sr-only" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          className: styles.checkbox || `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95`,
+          style: {
+            borderColor: isSelected ? checkboxBorder : "rgb(209 213 219)",
+            backgroundColor: isSelected ? checkboxBg : "white"
+          },
+          onClick: onSelect,
+          children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "Check", className: "w-3 h-3 text-white", strokeWidth: 2.5 })
+        }
+      )
+    ] }) }),
+    columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: styles.cell || "px-4 py-4 text-sm text-gray-900", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip, { text: String(col.render ? col.render(row[col.key], row) : row[col.key] || "-"), position: "top", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block truncate", "data-truncate": true, children: col.render ? col.render(row[col.key], row) : row[col.key] || "-" }) }) }, String(col.key))),
+    showActions && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: styles.cell || "px-2 py-4 text-sm", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex space-x-2", children: [
+      onEdit && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: onEdit, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "Edit2", className: "w-4 h-4", style: { color: actionColor } }) }),
+      onDelete && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: onDelete, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "Trash2", className: "w-4 h-4", style: { color: actionColor } }) })
+    ] }) })
+  ] });
+}
+
+// src/components/TableSkeleton.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function TableSkeleton({ columns, showCheckbox, showActions, rows = 5 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: Array.from({ length: rows }).map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { className: "animate-pulse", children: [
+    showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: "pl-4 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-5 h-5 bg-gray-200 rounded" }) }),
+    columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: "px-4 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-4 bg-gray-200 rounded w-3/4" }) }, String(col.key))),
+    showActions && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: "px-4 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-4 h-4 bg-gray-200 rounded" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-4 h-4 bg-gray-200 rounded" })
+    ] }) })
+  ] }, idx)) });
+}
+
+// src/components/Pagination.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  pageSize,
+  totalItems,
+  onPageSizeChange,
+  pageSizeOptions = [10, 25, 50, 100],
+  primaryColor = "purple"
+}) => {
+  const startItem = (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+  const activeColor = primaryColor === "purple" ? "bg-purple-600 text-white" : `bg-${primaryColor}-600 text-white`;
+  const hoverColor = primaryColor === "purple" ? "hover:bg-purple-50" : `hover:bg-${primaryColor}-50`;
+  const hoverBorderColor = primaryColor === "purple" ? "hover:border-purple-500" : `hover:border-${primaryColor}-500`;
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisible = 5;
+    if (totalPages <= maxVisible) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) pages.push(i);
+        pages.push("...");
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        pages.push("...");
+        for (let i = totalPages - 3; i <= totalPages; i++) pages.push(i);
+      } else {
+        pages.push(1);
+        pages.push("...");
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) pages.push(i);
+        pages.push("...");
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-xs text-gray-700", children: [
+        "Showing ",
+        startItem,
+        " to ",
+        endItem,
+        " of ",
+        totalItems,
+        " results"
+      ] }),
+      onPageSizeChange && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "text-xs text-gray-700", children: "Rows per page:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "select",
+            {
+              value: pageSize,
+              onChange: (e) => onPageSizeChange(Number(e.target.value)),
+              className: `appearance-none bg-white border border-gray-300 rounded-md pl-2 pr-6 py-1 text-xs text-gray-700 cursor-pointer ${hoverBorderColor} focus:outline-none transition-all duration-200`,
+              children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: size, children: size }, size))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-y-0 right-0 flex items-center pr-1.5 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "ChevronDown", className: "w-3 h-3 text-gray-500" }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: currentPage === 1,
+          className: `p-2 rounded ${currentPage === 1 ? "text-gray-400 cursor-not-allowed" : `text-gray-700 ${hoverColor}`}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "ChevronLeft", className: "w-4 h-4" })
+        }
+      ),
+      getPageNumbers().map((page, idx) => typeof page === "number" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          onClick: () => onPageChange(page),
+          className: `px-3 py-1 rounded text-sm ${currentPage === page ? activeColor : `text-gray-700 ${hoverColor}`}`,
+          children: page
+        },
+        idx
+      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "px-2 text-gray-500", children: page }, idx)),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: currentPage === totalPages,
+          className: `p-2 rounded ${currentPage === totalPages ? "text-gray-400 cursor-not-allowed" : `text-gray-700 ${hoverColor}`}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "ChevronRight", className: "w-4 h-4" })
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/ColumnSelector.tsx
+var import_react3 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ColumnSelector = ({
+  columns,
+  visibleColumns,
+  onColumnToggle,
+  onReset,
+  primaryColor = "purple",
+  minColumns = 1,
+  maxColumns = 5,
+  label = "Show Columns",
+  position = "right"
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const dropdownRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const checkboxBg = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
+  const checkboxBorder = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative group", ref: dropdownRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "p-2 rounded cursor-pointer text-gray-600 hover:bg-gray-100 transition-colors",
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "Columns", className: "w-5 h-5" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `absolute z-50 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none ${position === "left" ? "left-full ml-2" : "right-full mr-2"} top-1/2 -translate-y-1/2`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap relative", children: [
+      "Column Visibility",
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `absolute ${position === "left" ? "right-full border-r-gray-800 border-r-4 border-y-transparent border-y-4 border-l-0" : "left-full border-l-gray-800 border-l-4 border-y-transparent border-y-4 border-r-0"} top-1/2 -translate-y-1/2` })
+    ] }) }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-lg shadow-xl z-50 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-3 py-2 border-b border-gray-200", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs font-medium text-gray-700 uppercase", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-xs text-gray-500 mt-1", children: [
+          visibleColumns.length,
+          " of ",
+          columns.length,
+          " selected"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-h-64 overflow-y-auto", children: columns.map((column) => {
+        const isVisible = visibleColumns.includes(column.key);
+        const canUncheck = visibleColumns.length > minColumns;
+        const canCheck = visibleColumns.length < maxColumns;
+        const isDisabled = isVisible && !canUncheck || !isVisible && !canCheck;
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "label",
+          {
+            className: `flex items-center px-3 py-2 ${isDisabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50 cursor-pointer"}`,
+            title: isDisabled ? isVisible ? `At least ${minColumns} column(s) must be visible` : `Maximum ${maxColumns} columns can be visible` : "",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative group mr-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isVisible,
+                    onChange: () => !isDisabled && onColumnToggle(column.key),
+                    disabled: isDisabled,
+                    className: "sr-only"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "div",
+                  {
+                    className: `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95`,
+                    style: {
+                      borderColor: isVisible ? checkboxBorder : "rgb(209 213 219)",
+                      backgroundColor: isVisible ? checkboxBg : "white"
+                    },
+                    children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "Check", className: "w-3 h-3 text-white", strokeWidth: 2.5 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm text-gray-700", children: column.title })
+            ]
+          },
+          column.key
+        );
+      }) }),
+      onReset && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-3 py-2 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          onClick: onReset,
+          className: "w-full text-xs text-gray-600 hover:text-gray-900 py-1 hover:bg-gray-50 rounded",
+          children: "Reset to Default"
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/components/SmartTable.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function SmartTable({
+  data,
+  columns,
+  className = "",
+  showCheckbox = false,
+  showActions = false,
+  onEdit,
+  onDelete,
+  onRowClick,
+  loading = false,
+  emptyMessage = "No data available",
+  selectedRows = [],
+  onSelectionChange,
+  rowKey = "id",
+  bulkActions = [],
+  onSearch,
+  searchPlaceholder = "Search...",
+  sidebarActions = [],
+  sidebarPosition = "right",
+  onAdd,
+  onRefresh,
+  onExport,
+  onPrint,
+  onSettings,
+  showAdd = false,
+  showRefresh = false,
+  showExport = false,
+  showPrint = false,
+  showSettings = false,
+  tableHeight = "65vh",
+  styles = {},
+  primaryColor = "purple",
+  pagination,
+  showColumnSelector = true,
+  columnSelectorLabel = "Show Columns",
+  visibleColumns,
+  onColumnVisibilityChange,
+  minVisibleColumns = 1,
+  maxVisibleColumns = 5,
+  maxHeight = "65vh",
+  skeletonRows = 10
+}) {
+  const [sortConfig, setSortConfig] = (0, import_react4.useState)(null);
+  const [showBulkActions, setShowBulkActions] = (0, import_react4.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react4.useState)("");
+  const [isRefreshing, setIsRefreshing] = (0, import_react4.useState)(false);
+  const [isColumnSelectorOpen, setIsColumnSelectorOpen] = (0, import_react4.useState)(false);
+  const [internalVisibleColumns, setInternalVisibleColumns] = (0, import_react4.useState)(
+    visibleColumns || columns.map((col) => String(col.key))
+  );
+  const activeVisibleColumns = visibleColumns || internalVisibleColumns;
+  const displayColumns = (0, import_react4.useMemo)(
+    () => columns.filter((col) => activeVisibleColumns.includes(String(col.key))),
+    [columns, activeVisibleColumns]
+  );
+  const handleColumnToggle = (columnKey) => {
+    const newVisibleColumns = activeVisibleColumns.includes(columnKey) ? activeVisibleColumns.filter((key) => key !== columnKey) : [...activeVisibleColumns, columnKey];
+    if (onColumnVisibilityChange) {
+      onColumnVisibilityChange(newVisibleColumns);
+    } else {
+      setInternalVisibleColumns(newVisibleColumns);
+    }
+  };
+  const handleColumnReset = () => {
+    const firstFiveColumns = columns.slice(0, 5).map((col) => String(col.key));
+    if (onColumnVisibilityChange) {
+      onColumnVisibilityChange(firstFiveColumns);
+    } else {
+      setInternalVisibleColumns(firstFiveColumns);
+    }
+  };
+  const handleSort = (0, import_react4.useCallback)((key) => {
+    setSortConfig((prev) => ({
+      key,
+      direction: (prev == null ? void 0 : prev.key) === key && prev.direction === "asc" ? "desc" : "asc"
+    }));
+  }, []);
+  const sortedData = (0, import_react4.useMemo)(() => {
+    if (!sortConfig) return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[sortConfig.key];
+      const bVal = b[sortConfig.key];
+      if (aVal < bVal) return sortConfig.direction === "asc" ? -1 : 1;
+      if (aVal > bVal) return sortConfig.direction === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [data, sortConfig]);
+  const handleSelectAll = (0, import_react4.useCallback)(() => {
+    const allKeys = data.map((row) => String(row[rowKey]));
+    onSelectionChange == null ? void 0 : onSelectionChange(selectedRows.length === data.length ? [] : allKeys);
+  }, [data, selectedRows, onSelectionChange, rowKey]);
+  const handleRowSelect = (0, import_react4.useCallback)((row) => {
+    const key = String(row[rowKey]);
+    const newSelection = selectedRows.includes(key) ? selectedRows.filter((k) => k !== key) : [...selectedRows, key];
+    onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
+  }, [selectedRows, onSelectionChange, rowKey]);
+  const handleSearch = (0, import_react4.useCallback)((value) => {
+    setSearchValue(value);
+    onSearch == null ? void 0 : onSearch(value);
+  }, [onSearch]);
+  const selectAll = selectedRows.length === data.length && data.length > 0;
+  const defaultBulkActions = [
+    {
+      label: "Delete",
+      color: "red",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "Trash2", className: "w-4 h-4" }),
+      onClick: (selected) => alert(`Delete ${selected.length} items`)
+    }
+  ];
+  const actionsToShow = bulkActions.length > 0 ? bulkActions : defaultBulkActions;
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    if (onRefresh) {
+      onRefresh();
+    }
+    setTimeout(() => setIsRefreshing(false), 1e3);
+  };
+  const defaultAdd = () => {
+    console.log("Add new item");
+  };
+  const defaultExport = () => {
+    const csv = [columns.map((col) => col.title).join(",")];
+    data.forEach((row) => {
+      csv.push(columns.map((col) => row[col.key]).join(","));
+    });
+    const blob = new Blob([csv.join("\n")], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "export.csv";
+    a.click();
+  };
+  const defaultPrint = () => {
+    window.print();
+  };
+  const defaultSettings = () => {
+    console.log("Open settings");
+  };
+  const allSidebarActions = [
+    ...showColumnSelector ? [{
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "Columns", className: "w-5 h-5" }),
+      label: columnSelectorLabel,
+      onClick: () => setIsColumnSelectorOpen(true)
+    }] : [],
+    ...showAdd || onAdd ? [{
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "Plus", className: "w-5 h-5" }),
+      label: "Add New",
+      onClick: onAdd || defaultAdd
+    }] : [],
+    ...showRefresh || onRefresh ? [{
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "RefreshCw", className: `w-5 h-5 ${isRefreshing ? "animate-spin" : ""}`, style: { color: isRefreshing ? primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)` : void 0 } }),
+      label: "Refresh",
+      onClick: handleRefresh
+    }] : [],
+    ...showExport || onExport ? [{
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "Download", className: "w-5 h-5" }),
+      label: "Export CSV",
+      onClick: onExport || defaultExport
+    }] : [],
+    ...showPrint || onPrint ? [{
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "Printer", className: "w-5 h-5" }),
+      label: "Print",
+      onClick: onPrint || defaultPrint
+    }] : [],
+    ...showSettings || onSettings ? [{
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "Settings", className: "w-5 h-5" }),
+      label: "Settings",
+      onClick: onSettings || defaultSettings
+    }] : [],
+    ...sidebarActions
+  ];
+  const positionClasses = {
+    right: "right-0 top-0 bottom-0 flex-col border-l",
+    left: "left-0 top-0 bottom-0 flex-col border-r",
+    top: "top-0 left-0 right-0 flex-row w-full border-b",
+    bottom: "bottom-0 left-0 right-0 flex-row w-full border-t"
+  };
+  const tooltipPosition = sidebarPosition === "right" ? "left" : sidebarPosition === "left" ? "right" : sidebarPosition === "top" ? "bottom" : "top";
+  const containerClasses = sidebarPosition === "top" || sidebarPosition === "bottom" ? "flex-row" : "flex-col";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className, children: [
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-4 flex gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        SearchBar,
+        {
+          value: searchValue,
+          onChange: handleSearch,
+          placeholder: searchPlaceholder,
+          primaryColor
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        BulkActionsDropdown,
+        {
+          selectedCount: selectedRows.length,
+          isOpen: showBulkActions,
+          onToggle: () => setShowBulkActions(!showBulkActions),
+          actions: actionsToShow.map((action) => ({
+            ...action,
+            onClick: () => action.onClick(selectedRows)
+          })),
+          onClose: () => setShowBulkActions(false)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex", children: [
+      allSidebarActions.length > 0 && sidebarPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.sidebar || `bg-white border border-gray-200 rounded-l-lg p-2`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex flex-col items-center gap-4`, children: allSidebarActions.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative group", children: idx === 0 && showColumnSelector && isColumnSelectorOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ColumnSelector,
+        {
+          columns: columns.map((col) => ({ key: String(col.key), title: col.title })),
+          visibleColumns: activeVisibleColumns,
+          onColumnToggle: handleColumnToggle,
+          onReset: handleColumnReset,
+          primaryColor,
+          minColumns: minVisibleColumns,
+          maxColumns: maxVisibleColumns,
+          label: columnSelectorLabel,
+          position: "right"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            onClick: action.onClick,
+            className: styles.sidebarButton || `p-2 rounded cursor-pointer text-gray-600 transition-colors`,
+            onMouseEnter: (e) => {
+              if (!styles.sidebarButtonHover) {
+                e.currentTarget.style.backgroundColor = `${primaryColor === "purple" ? "rgb(250 245 255)" : `var(--${primaryColor}-50)`}`;
+                e.currentTarget.style.color = `${primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`}`;
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!styles.sidebarButtonHover) {
+                e.currentTarget.style.backgroundColor = "";
+                e.currentTarget.style.color = "";
+              }
+            },
+            children: action.icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `absolute z-50 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none left-full ml-2 top-1/2 -translate-y-1/2`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap relative", children: [
+          action.label,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `absolute right-full top-1/2 -translate-y-1/2 border-r-gray-800 border-r-4 border-y-transparent border-y-4 border-l-0` })
+        ] }) })
+      ] }) }, idx)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.container || `bg-white ${allSidebarActions.length > 0 ? sidebarPosition === "left" ? "rounded-r-lg" : "rounded-l-lg" : "rounded-lg"} border border-gray-200 flex-1 overflow-hidden`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.body || `${sortedData.length === 0 ? "flex items-center justify-center" : "overflow-auto"} [&::-webkit-scrollbar-track]:mt-11 [&::-webkit-scrollbar]:w-0.5 [&::-webkit-scrollbar]:h-0.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full dark:[&::-webkit-scrollbar-thumb]:bg-${primaryColor}-600 [&::-webkit-scrollbar-thumb]:bg-gray-300`, style: { height: maxHeight, maxHeight }, children: sortedData.length === 0 && !loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-center text-gray-500", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { className: styles.table || "min-w-full table-fixed", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { className: styles.header || "sticky top-0 z-10 bg-white shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            TableHeader,
+            {
+              columns: displayColumns,
+              showCheckbox,
+              showActions,
+              selectAll,
+              onSelectAll: handleSelectAll,
+              sortConfig,
+              onSort: handleSort,
+              styles,
+              primaryColor
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            TableSkeleton,
+            {
+              columns: displayColumns,
+              showCheckbox,
+              showActions,
+              rows: skeletonRows
+            }
+          ) : sortedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            TableRow,
+            {
+              row,
+              columns: displayColumns,
+              showCheckbox,
+              showActions,
+              isSelected: selectedRows.includes(String(row[rowKey])),
+              onSelect: () => handleRowSelect(row),
+              onRowClick: () => onRowClick == null ? void 0 : onRowClick(row),
+              onEdit: onEdit ? () => onEdit(row) : void 0,
+              onDelete: onDelete ? () => onDelete(row) : void 0,
+              styles,
+              primaryColor
+            },
+            idx
+          )) })
+        ] }) }),
+        pagination && data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Pagination,
+          {
+            currentPage: pagination.currentPage,
+            totalPages: pagination.totalPages,
+            pageSize: pagination.pageSize,
+            totalItems: pagination.totalItems,
+            onPageChange: pagination.onPageChange,
+            onPageSizeChange: pagination.onPageSizeChange,
+            pageSizeOptions: pagination.pageSizeOptions,
+            primaryColor
+          }
+        ) })
+      ] }),
+      allSidebarActions.length > 0 && sidebarPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.sidebar || `bg-white border border-gray-200 rounded-r-lg p-2`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex flex-col items-center gap-4`, children: allSidebarActions.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative group", children: idx === 0 && showColumnSelector && isColumnSelectorOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ColumnSelector,
+        {
+          columns: columns.map((col) => ({ key: String(col.key), title: col.title })),
+          visibleColumns: activeVisibleColumns,
+          onColumnToggle: handleColumnToggle,
+          onReset: handleColumnReset,
+          primaryColor,
+          minColumns: minVisibleColumns,
+          maxColumns: maxVisibleColumns,
+          label: columnSelectorLabel,
+          position: "left"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            onClick: action.onClick,
+            className: styles.sidebarButton || `p-2 rounded cursor-pointer text-gray-600 transition-colors`,
+            onMouseEnter: (e) => {
+              if (!styles.sidebarButtonHover) {
+                e.currentTarget.style.backgroundColor = `${primaryColor === "purple" ? "rgb(250 245 255)" : `var(--${primaryColor}-50)`}`;
+                e.currentTarget.style.color = `${primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`}`;
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!styles.sidebarButtonHover) {
+                e.currentTarget.style.backgroundColor = "";
+                e.currentTarget.style.color = "";
+              }
+            },
+            children: action.icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `absolute z-50 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none right-full mr-2 top-1/2 -translate-y-1/2`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap relative", children: [
+          action.label,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `absolute left-full top-1/2 -translate-y-1/2 border-l-gray-800 border-l-4 border-y-transparent border-y-4 border-r-0` })
+        ] }) })
+      ] }) }, idx)) }) })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColumnSelector,
+  Icon,
+  Pagination,
+  SmartTable,
+  Tooltip,
+  getIcon
+});