neogestify-ui-components 2.1.0 → 2.2.2

package/dist/components/html/index.d.mts

@@ -1,4 +1,4 @@
-import React__default, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes } from 'react';
+import React__default, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -51,15 +51,48 @@ interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'siz
 }
 declare const Select: FC<SelectProps>;
 
+type TableVariant = 'default' | 'striped' | 'bordered' | 'minimal' | 'custom';
+type TableSize = 'sm' | 'md' | 'lg';
+interface ColumnDef {
+    /** Contenido del encabezado */
+    header: ReactNode;
+    /** Clase CSS adicional para toda la columna (th + td) */
+    className?: string;
+    /** Alinear el contenido de esta columna */
+    align?: 'left' | 'center' | 'right';
+}
 interface TableProps {
-    headers: ReactNode[];
+    /**
+     * Definición de columnas con encabezado y opciones por columna.
+     * Si pasas strings simples, los usa como encabezados sin configuración extra.
+     */
+    columns: (ColumnDef | ReactNode)[];
+    /** Filas de la tabla. Cada fila es un arreglo de celdas. */
     rows: ReactNode[][];
-    variant?: 'default' | 'custom';
+    /** Estilo visual de la tabla. Default: 'default' */
+    variant?: TableVariant;
+    /** Tamaño de padding de celdas. Default: 'md' */
+    size?: TableSize;
+    /** Clase CSS adicional para el wrapper `<div>` externo */
     className?: string;
+    /** Clase CSS adicional para el `<table>` */
+    tableClassName?: string;
+    /** Clase CSS adicional para cada `<th>` */
     thClassName?: string;
+    /** Clase CSS adicional para cada `<td>` */
     tdClassName?: string;
+    /** Clase CSS adicional para cada `<tr>` del body */
+    trClassName?: string | ((rowIndex: number) => string);
+    /** Texto o nodo a mostrar cuando `rows` está vacío */
+    emptyState?: ReactNode;
+    /** Callback al hacer click en una fila */
+    onRowClick?: (rowIndex: number) => void;
+    /** Si true, no muestra thead */
+    hideHeader?: boolean;
+    /** Estilos inline para el `<table>` */
+    style?: CSSProperties;
 }
-declare function Table({ headers, rows, variant, className, thClassName, tdClassName }: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table({ columns, rows, variant, size, className, tableClassName, thClassName, tdClassName, trClassName, emptyState, onRowClick, hideHeader, style, }: TableProps): react_jsx_runtime.JSX.Element;
 
 interface ModalProps {
     onClose: () => void;

package/dist/components/html/index.d.ts

@@ -1,4 +1,4 @@
-import React__default, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes } from 'react';
+import React__default, { FC, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, FormEvent, SelectHTMLAttributes, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -51,15 +51,48 @@ interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'siz
 }
 declare const Select: FC<SelectProps>;
 
+type TableVariant = 'default' | 'striped' | 'bordered' | 'minimal' | 'custom';
+type TableSize = 'sm' | 'md' | 'lg';
+interface ColumnDef {
+    /** Contenido del encabezado */
+    header: ReactNode;
+    /** Clase CSS adicional para toda la columna (th + td) */
+    className?: string;
+    /** Alinear el contenido de esta columna */
+    align?: 'left' | 'center' | 'right';
+}
 interface TableProps {
-    headers: ReactNode[];
+    /**
+     * Definición de columnas con encabezado y opciones por columna.
+     * Si pasas strings simples, los usa como encabezados sin configuración extra.
+     */
+    columns: (ColumnDef | ReactNode)[];
+    /** Filas de la tabla. Cada fila es un arreglo de celdas. */
     rows: ReactNode[][];
-    variant?: 'default' | 'custom';
+    /** Estilo visual de la tabla. Default: 'default' */
+    variant?: TableVariant;
+    /** Tamaño de padding de celdas. Default: 'md' */
+    size?: TableSize;
+    /** Clase CSS adicional para el wrapper `<div>` externo */
     className?: string;
+    /** Clase CSS adicional para el `<table>` */
+    tableClassName?: string;
+    /** Clase CSS adicional para cada `<th>` */
     thClassName?: string;
+    /** Clase CSS adicional para cada `<td>` */
     tdClassName?: string;
+    /** Clase CSS adicional para cada `<tr>` del body */
+    trClassName?: string | ((rowIndex: number) => string);
+    /** Texto o nodo a mostrar cuando `rows` está vacío */
+    emptyState?: ReactNode;
+    /** Callback al hacer click en una fila */
+    onRowClick?: (rowIndex: number) => void;
+    /** Si true, no muestra thead */
+    hideHeader?: boolean;
+    /** Estilos inline para el `<table>` */
+    style?: CSSProperties;
 }
-declare function Table({ headers, rows, variant, className, thClassName, tdClassName }: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table({ columns, rows, variant, size, className, tableClassName, thClassName, tdClassName, trClassName, emptyState, onRowClick, hideHeader, style, }: TableProps): react_jsx_runtime.JSX.Element;
 
 interface ModalProps {
     onClose: () => void;

package/dist/components/html/index.js

@@ -261,24 +261,147 @@ var Select = ({
     helperText && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: tableClass, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: variant === "default" ? "bg-gray-100 dark:bg-gray-700" : "", children: headers.map((header, index) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: thClass, children: header }, index)) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: variant === "default" ? "hover:bg-gray-50 dark:hover:bg-gray-600" : "", children: row.map((cell, cellIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `overflow-x-auto w-full ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      className: `${VARIANT_TABLE[variant]} ${tableClassName}`.trim(),
+      style,
+      children: [
+        !hideHeader && /* @__PURE__ */ jsxRuntime.jsx("thead", { className: VARIANT_THEAD[variant], children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: cols.map((col, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tbody", { className: VARIANT_TBODY_DIVIDER[variant], children: rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "tr",
+          {
+            className: resolvedTrClass(rowIndex),
+            onClick: onRowClick ? () => onRowClick(rowIndex) : void 0,
+            children: row.map((cell, cellIndex) => {
+              const col = cols[cellIndex];
+              return /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(({
   onClose,