neogestify-ui-components 2.2.1 → 2.2.2

package/dist/index.mjs

@@ -647,24 +647,147 @@ var Select = ({
     helperText && /* @__PURE__ */ jsx("p", { className: `text-sm ${error ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-gray-400"}`, children: helperText })
   ] });
 };
+function isColumnDef(col) {
+  return typeof col === "object" && col !== null && "header" in col;
+}
+function resolveColumn(col) {
+  if (isColumnDef(col)) return col;
+  return { header: col };
+}
+var ALIGN_CLASS = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+var SIZE_TH = {
+  sm: "px-2 py-1.5 text-xs",
+  md: "px-3 py-2.5 text-xs",
+  lg: "px-4 py-3.5 text-sm"
+};
+var SIZE_TD = {
+  sm: "px-2 py-1.5 text-xs",
+  md: "px-3 py-2.5 text-sm",
+  lg: "px-4 py-3.5 text-sm"
+};
+var VARIANT_TABLE = {
+  default: "w-full min-w-full table-auto",
+  striped: "w-full min-w-full table-auto",
+  bordered: "w-full min-w-full table-auto border border-gray-300 dark:border-gray-600",
+  minimal: "w-full min-w-full table-auto",
+  custom: "w-full min-w-full table-auto"
+};
+var VARIANT_THEAD = {
+  default: "bg-gray-100 dark:bg-gray-700",
+  striped: "bg-gray-100 dark:bg-gray-700",
+  bordered: "bg-gray-100 dark:bg-gray-700",
+  minimal: "",
+  custom: ""
+};
+var VARIANT_TH = {
+  default: "font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300",
+  striped: "font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300",
+  bordered: "font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600",
+  minimal: "font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700",
+  custom: ""
+};
+var VARIANT_TR = {
+  default: () => "bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors",
+  striped: (i) => `${i % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700/40"} hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors`,
+  bordered: () => "bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors",
+  minimal: () => "hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors",
+  custom: () => ""
+};
+var VARIANT_TD = {
+  default: "text-gray-700 dark:text-gray-300",
+  striped: "text-gray-700 dark:text-gray-300",
+  bordered: "text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700",
+  minimal: "text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-800",
+  custom: ""
+};
+var VARIANT_TBODY_DIVIDER = {
+  default: "divide-y divide-gray-200 dark:divide-gray-700",
+  striped: "",
+  bordered: "",
+  minimal: "",
+  custom: ""
+};
 function Table({
-  headers,
+  columns,
   rows,
   variant = "default",
+  size = "md",
   className = "",
+  tableClassName = "",
   thClassName = "",
-  tdClassName = ""
+  tdClassName = "",
+  trClassName,
+  emptyState,
+  onRowClick,
+  hideHeader = false,
+  style
 }) {
-  const baseTableClass = variant === "default" ? "w-full table-auto border-collapse border border-gray-300 dark:border-gray-600 min-w-full" : "";
-  const baseThClass = variant === "default" ? "border border-gray-300 dark:border-gray-600 px-4 py-2 text-left text-gray-900 dark:text-white" : "";
-  const baseTdClass = variant === "default" ? "border border-gray-300 dark:border-gray-600 px-4 py-2 text-gray-900 dark:text-white" : "";
-  const tableClass = `${baseTableClass} ${className}`.trim();
-  const thClass = `${baseThClass} ${thClassName}`.trim();
-  const tdClass = `${baseTdClass} ${tdClassName}`.trim();
-  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto w-full", children: /* @__PURE__ */ jsxs("table", { className: tableClass, children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: variant === "default" ? "bg-gray-100 dark:bg-gray-700" : "", children: headers.map((header, index) => /* @__PURE__ */ jsx("th", { className: thClass, children: header }, index)) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { className: variant === "default" ? "hover:bg-gray-50 dark:hover:bg-gray-600" : "", children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { className: tdClass, children: cell }, cellIndex)) }, rowIndex)) })
-  ] }) });
+  const cols = columns.map(resolveColumn);
+  const resolvedTrClass = (i) => {
+    const variantCls = VARIANT_TR[variant](i);
+    const clickCls = onRowClick ? "cursor-pointer" : "";
+    const customCls = typeof trClassName === "function" ? trClassName(i) : trClassName ?? "";
+    return `${variantCls} ${clickCls} ${customCls}`.trim();
+  };
+  return /* @__PURE__ */ jsx("div", { className: `overflow-x-auto w-full ${className}`.trim(), children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: `${VARIANT_TABLE[variant]} ${tableClassName}`.trim(),
+      style,
+      children: [
+        !hideHeader && /* @__PURE__ */ jsx("thead", { className: VARIANT_THEAD[variant], children: /* @__PURE__ */ jsx("tr", { children: cols.map((col, i) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: [
+              SIZE_TH[size],
+              VARIANT_TH[variant],
+              ALIGN_CLASS[col.align ?? "left"],
+              col.className ?? "",
+              thClassName
+            ].filter(Boolean).join(" "),
+            children: col.header
+          },
+          i
+        )) }) }),
+        /* @__PURE__ */ jsx("tbody", { className: VARIANT_TBODY_DIVIDER[variant], children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: cols.length,
+            className: `${SIZE_TD[size]} text-center text-gray-400 dark:text-gray-500 py-8`,
+            children: emptyState ?? "Sin datos"
+          }
+        ) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+          "tr",
+          {
+            className: resolvedTrClass(rowIndex),
+            onClick: onRowClick ? () => onRowClick(rowIndex) : void 0,
+            children: row.map((cell, cellIndex) => {
+              const col = cols[cellIndex];
+              return /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: [
+                    SIZE_TD[size],
+                    VARIANT_TD[variant],
+                    ALIGN_CLASS[col?.align ?? "left"],
+                    col?.className ?? "",
+                    tdClassName
+                  ].filter(Boolean).join(" "),
+                  children: cell
+                },
+                cellIndex
+              );
+            })
+          },
+          rowIndex
+        )) })
+      ]
+    }
+  ) });
 }
 var Modal = forwardRef(({
   onClose,