erp-pos-ecommerce-shared 0.1.4 → 0.1.6

package/dist/components.d.ts

@@ -6,7 +6,7 @@ import { s as TblProductsImage, o as ITableFilterConfig, g as IFilterSelectOptio
 import * as z from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef, useReactTable, Row } from '@tanstack/react-table';
-import { D as DataTableConfig, S as ServerTableState } from './datatable.interface-DFSQWdXd.js';
+import { D as DataTableConfig, S as ServerTableState, T as TableHeaderStyle } from './datatable.interface-DbB5oxj-.js';
 import { T as TableQueryParams } from './types-CiX8AkJA.js';
 
 interface CreateEditFormProps<T> {
@@ -142,8 +142,8 @@ interface DataTableProps$1<TData> {
     enableRowCheck?: boolean;
     /** Called when row selection changes */
     onSelectionChange?: (selectedRows: TData[]) => void;
-    /** Header background color. Use light-dark(light, dark) for theme-aware colors */
-    headerBgColor?: string;
+    /** Header style: color string (legacy) or { bgColor, textColor, fontWeight?, fontSize?, padding? } */
+    headerBgColor?: string | TableHeaderStyle;
     /** Column actions to display per row */
     columnActions?: (row: TData) => React.ReactNode;
     /** List menu actions to display per row */
@@ -250,8 +250,8 @@ interface DataTableProps<TData> {
         onClick: () => void;
         Icon?: React$1.ElementType;
     }[];
-    /** Header background color. Use light-dark(light, dark) for theme-aware colors */
-    headerBgColor?: string;
+    /** Header style: color string (legacy) or { bgColor, textColor, fontWeight?, fontSize?, padding? } */
+    headerBgColor?: string | TableHeaderStyle;
     /** Whether the table is loading (shows skeleton rows instead of data) */
     loading?: boolean;
     /** Number of skeleton rows to show when loading */
@@ -267,19 +267,15 @@ declare const SimpleDataTable: <TData>({ table, withBorder, borderRadius, SortIc
 
 interface TableSkeletonProps {
     /** Number of skeleton rows to show */
-    rows?: number;
-    /** Number of columns (excluding checkbox column if canCheck) */
-    columns?: number;
-    /** Whether to show a checkbox column */
+    rowCount: number;
+    /** Number of data columns (excluding checkbox and actions) */
+    columnCount: number;
+    /** Whether to show the checkbox column */
     canCheck?: boolean;
-    /** Whether to show the border */
-    withBorder?: boolean;
-    /** Border radius */
-    borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | number;
-    /** Height of each skeleton row */
-    rowHeight?: number;
+    /** Whether to show the actions column */
+    hasActionsColumn?: boolean;
 }
-declare const TableSkeleton: ({ rows, columns, canCheck, withBorder, borderRadius, rowHeight, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
+declare const TableSkeleton: ({ rowCount, columnCount, canCheck, hasActionsColumn, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
 
 /** Shape that the query must return for TablePage to work correctly. */
 interface PaginatedResponse<TRow> {
@@ -329,9 +325,9 @@ interface TablePageProps<TRow> {
      */
     enableRowSelection?: boolean;
     /**
-     * Header background color
+     * Header style: color string (legacy) or { bgColor, textColor, fontWeight?, fontSize?, padding? }
      */
-    headerBgColor?: string;
+    headerBgColor?: TableHeaderStyle;
     /**
      * Column actions to display per row
      */

package/dist/components.js

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { Text, Group, Box, rem, Button, ScrollArea, Image, ActionIcon, TagsInput, Switch, MultiSelect, Select, NumberInput, PasswordInput, TextInput, LoadingOverlay, Stepper, Flex, Container, Title, Card, Pagination, Stack, Paper, Table, Skeleton, Menu, Popover, Checkbox, UnstyledButton } from '@mantine/core';
+import { Text, Group, Box, rem, Button, ScrollArea, Image, ActionIcon, TagsInput, Switch, MultiSelect, Select, NumberInput, PasswordInput, TextInput, LoadingOverlay, Stepper, Flex, Container, Title, Card, Pagination, Table, Skeleton, Stack, Paper, Menu, Popover, Checkbox, UnstyledButton } from '@mantine/core';
 import { useForm } from '@tanstack/react-form';
 import axios, { isAxiosError } from 'axios';
 import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
@@ -1284,9 +1284,33 @@ function useDataTable({
     selectedRows
   };
 }
-
-// src/components/table/TableHeader.module.css
-var TableHeader_default = {};
+var defaultHeaderTextColor = "light-dark(var(--mantine-color-dimmed), var(--mantine-color-gray-4))";
+var defaultHeaderHoverBg = "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-2))";
+function normalizeHeaderStyle(value) {
+  if (value == null) {
+    return {
+      bgColor: defaultHeaderBgColor,
+      textColor: defaultHeaderTextColor,
+      hoverBgColor: defaultHeaderHoverBg
+    };
+  }
+  if (typeof value === "string") {
+    return {
+      bgColor: value,
+      textColor: defaultHeaderTextColor,
+      hoverBgColor: defaultHeaderHoverBg
+    };
+  }
+  return {
+    bgColor: value.bgColor ?? defaultHeaderBgColor,
+    textColor: value.textColor ?? defaultHeaderTextColor,
+    hoverBgColor: value.hoverBgColor ?? defaultHeaderHoverBg,
+    hoverTextColor: value.hoverTextColor ?? value.textColor ?? defaultHeaderTextColor,
+    fontWeight: value.fontWeight,
+    fontSize: value.fontSize,
+    padding: value.padding
+  };
+}
 var TableHeader = ({
   table,
   SortIcon,
@@ -1294,18 +1318,33 @@ var TableHeader = ({
   SortIconDesc,
   canCheck = false,
   hasActionsColumn = false,
-  headerBgColor = defaultHeaderBgColor
+  headerBgColor
 }) => {
+  const [hoveredHeaderId, setHoveredHeaderId] = useState(null);
+  const style = normalizeHeaderStyle(headerBgColor);
+  const bgColor = style.bgColor ?? defaultHeaderBgColor;
+  const hoverBg = style.hoverBgColor ?? defaultHeaderHoverBg;
+  const hoverText = style.hoverTextColor ?? style.textColor ?? defaultHeaderTextColor;
   const getSortIcon = (sortState) => {
     if (sortState === "asc") return SortIconAsc;
     if (sortState === "desc") return SortIconDesc;
     return SortIcon;
   };
+  const baseButtonStyle = {
+    padding: style.padding ?? "4px 10px",
+    fontSize: style.fontSize ?? 14,
+    fontWeight: style.fontWeight ?? 700,
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    transition: "background-color 0.1s ease, color 0.1s ease",
+    borderRadius: "var(--mantine-radius-lg)"
+  };
   return /* @__PURE__ */ jsx(Table.Thead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
     canCheck && /* @__PURE__ */ jsx(
       Table.Th,
       {
-        bg: headerBgColor,
+        bg: bgColor,
         w: 10,
         styles: {
           th: {
@@ -1331,20 +1370,18 @@ var TableHeader = ({
       const canSort = header.column.getCanSort();
       const sortState = header.column.getIsSorted();
       const Icon = canSort ? getSortIcon(sortState) : null;
-      return /* @__PURE__ */ jsx(Table.Th, { bg: headerBgColor, children: /* @__PURE__ */ jsxs(
+      const isHovered = hoveredHeaderId === header.id;
+      return /* @__PURE__ */ jsx(Table.Th, { bg: bgColor, children: /* @__PURE__ */ jsxs(
         UnstyledButton,
         {
-          className: TableHeader_default.tableHeader,
           style: {
-            padding: "4px 10px",
-            fontSize: 14,
-            fontWeight: 700,
-            display: "flex",
-            alignItems: "center",
-            color: "light-dark(var(--mantine-color-dimmed), var(--mantine-color-gray-4))",
-            gap: 4
+            ...baseButtonStyle,
+            color: isHovered ? hoverText : style.textColor ?? defaultHeaderTextColor,
+            backgroundColor: isHovered ? hoverBg : void 0
           },
           onClick: header.column.getToggleSortingHandler(),
+          onMouseEnter: () => setHoveredHeaderId(header.id),
+          onMouseLeave: () => setHoveredHeaderId(null),
           children: [
             header.isPlaceholder ? null : flexRender(
               header.column.columnDef.header,
@@ -1355,7 +1392,7 @@ var TableHeader = ({
         }
       ) }, header.id);
     }),
-    hasActionsColumn && /* @__PURE__ */ jsx(Table.Th, { bg: headerBgColor })
+    hasActionsColumn && /* @__PURE__ */ jsx(Table.Th, { bg: bgColor })
   ] }, headerGroup.id)) });
 };
 var TableBody = ({
@@ -1367,11 +1404,21 @@ var TableBody = ({
   onRowClick,
   onRowHover
 }) => {
+  const [hoveredRowId, setHoveredRowId] = useState(null);
   return /* @__PURE__ */ jsx(Table.Tbody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(
     Table.Tr,
     {
-      style: onRowClick ? { cursor: "pointer" } : void 0,
-      onMouseEnter: () => onRowHover?.(row.original),
+      style: {
+        ...onRowClick ? { cursor: "pointer" } : {},
+        ...hoveredRowId === row.id ? {
+          backgroundColor: "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))"
+        } : {}
+      },
+      onMouseEnter: () => {
+        setHoveredRowId(row.id);
+        onRowHover?.(row.original);
+      },
+      onMouseLeave: () => setHoveredRowId(null),
       children: [
         canCheck && /* @__PURE__ */ jsx(
           Table.Td,
@@ -1423,7 +1470,7 @@ var TableBody = ({
               Menu.Item,
               {
                 onClick: action.onClick,
-                rightSection: action.Icon && /* @__PURE__ */ jsx(action.Icon, {}),
+                leftSection: action.Icon && /* @__PURE__ */ jsx(action.Icon, {}),
                 children: action.label
               },
               action.label
@@ -1435,6 +1482,26 @@ var TableBody = ({
     row.id
   )) });
 };
+var cellStyle = { minHeight: 40, verticalAlign: "middle" };
+var TableSkeleton = ({
+  rowCount,
+  columnCount,
+  canCheck = false,
+  hasActionsColumn = false
+}) => {
+  return /* @__PURE__ */ jsx(Table.Tbody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+    canCheck && /* @__PURE__ */ jsx(Table.Td, { style: cellStyle, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 18, radius: "sm" }) }),
+    Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsx(Table.Td, { style: cellStyle, children: /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        height: 16,
+        width: colIdx === columnCount - 1 ? 40 : `${60 + colIdx % 2 * 15}%`,
+        radius: "sm"
+      }
+    ) }, colIdx)),
+    hasActionsColumn && /* @__PURE__ */ jsx(Table.Td, { style: cellStyle, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 32, radius: "sm" }) })
+  ] }, rowIdx)) });
+};
 var EmptyState = ({
   title = "No hay datos disponibles",
   description = "No se encontraron elementos para mostrar. Intenta ajustar los filtros o agrega nuevos elementos.",
@@ -1541,63 +1608,68 @@ var SimpleDataTable = ({
 }) => {
   const dataColumnsCount = table.getAllLeafColumns().length;
   const hasActionsColumn = !!(columnActions || listMenuActions);
-  return /* @__PURE__ */ jsx(Paper, { withBorder, radius: borderRadius, children: /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx(
-      TableHeader,
-      {
-        canCheck,
-        table,
-        SortIcon,
-        SortIconAsc,
-        SortIconDesc,
-        hasActionsColumn,
-        headerBgColor
-      }
-    ),
-    loading ? /* @__PURE__ */ jsx(Table.Tbody, { children: Array.from({ length: skeletonRowCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
-      canCheck && /* @__PURE__ */ jsx(Table.Td, { style: { minHeight: 40, verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 18, radius: "sm" }) }),
-      Array.from({ length: dataColumnsCount }).map((_2, colIdx) => /* @__PURE__ */ jsx(
-        Table.Td,
-        {
-          style: { minHeight: 40, verticalAlign: "middle" },
-          children: /* @__PURE__ */ jsx(
-            Skeleton,
-            {
-              height: 16,
-              width: colIdx === dataColumnsCount - 1 ? 40 : `${60 + colIdx % 2 * 15}%`,
-              radius: "sm"
-            }
-          )
-        },
-        colIdx
-      )),
-      hasActionsColumn && /* @__PURE__ */ jsx(Table.Td, { style: { minHeight: 40, verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 32, radius: "sm" }) })
-    ] }, rowIdx)) }) : table.getRowCount() > 0 ? /* @__PURE__ */ jsx(
-      TableBody,
-      {
-        onRowClick,
-        onRowHover,
-        table,
-        canCheck,
-        columnActions,
-        listMenuActions
-      }
-    ) : /* @__PURE__ */ jsx(Table.Tbody, { children: /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(
-      Table.Td,
-      {
-        colSpan: (table.getHeaderGroups()[0]?.headers.length ?? 1) + (canCheck ? 1 : 0),
-        children: /* @__PURE__ */ jsx(
-          Flex,
+  const headerBg = typeof headerBgColor === "string" ? headerBgColor : headerBgColor?.bgColor ?? defaultHeaderBgColor;
+  return /* @__PURE__ */ jsx(Paper, { withBorder, radius: borderRadius, children: /* @__PURE__ */ jsx(ScrollArea, { h: 600, type: "scroll", scrollbarSize: 8, children: /* @__PURE__ */ jsxs(
+    Table,
+    {
+      styles: {
+        thead: {
+          position: "sticky",
+          top: 0,
+          zIndex: 1,
+          background: headerBg,
+          boxShadow: "0 1px 0 0 light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          TableHeader,
           {
-            justify: "center",
-            align: "center",
-            style: { minHeight: 200 },
-            children: emptyState
+            canCheck,
+            table,
+            SortIcon,
+            SortIconAsc,
+            SortIconDesc,
+            hasActionsColumn,
+            headerBgColor
           }
-        )
-      }
-    ) }) })
-  ] }) });
+        ),
+        loading ? /* @__PURE__ */ jsx(
+          TableSkeleton,
+          {
+            rowCount: skeletonRowCount,
+            columnCount: dataColumnsCount,
+            canCheck,
+            hasActionsColumn
+          }
+        ) : table.getRowCount() > 0 ? /* @__PURE__ */ jsx(
+          TableBody,
+          {
+            onRowClick,
+            onRowHover,
+            table,
+            canCheck,
+            columnActions,
+            listMenuActions
+          }
+        ) : /* @__PURE__ */ jsx(Table.Tbody, { children: /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(
+          Table.Td,
+          {
+            colSpan: (table.getHeaderGroups()[0]?.headers.length ?? 1) + (canCheck ? 1 : 0),
+            children: /* @__PURE__ */ jsx(
+              Flex,
+              {
+                justify: "center",
+                align: "center",
+                style: { minHeight: 200 },
+                children: emptyState
+              }
+            )
+          }
+        ) }) })
+      ]
+    }
+  ) }) });
 };
 var SearchInput = ({
   value,
@@ -1703,7 +1775,19 @@ var FilterSelect = ({
             radius: "md",
             variant: "filled",
             leftSection: Icon ? /* @__PURE__ */ jsx(Icon, { size: 15 }) : null,
-            rightSection: selectedOption ? /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", radius: "md", onClick: handleClear, children: /* @__PURE__ */ jsx(X, { size: 12 }) }) : open ? /* @__PURE__ */ jsx(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 12 }),
+            rightSection: selectedOption ? /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                component: "div",
+                variant: "subtle",
+                radius: "md",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  handleClear();
+                },
+                children: /* @__PURE__ */ jsx(X, { size: 12 })
+              }
+            ) : open ? /* @__PURE__ */ jsx(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 12 }),
             size: "sm",
             styles: {
               root: {
@@ -1791,7 +1875,16 @@ var FilterDate = ({
             radius: "md",
             variant: "filled",
             leftSection: /* @__PURE__ */ jsx(CalendarDays, { size: 14 }),
-            rightSection: value ? /* @__PURE__ */ jsx(ActionIcon, { radius: "md", variant: "subtle", onClick: handleClear, children: /* @__PURE__ */ jsx(X, { size: 12 }) }) : open ? /* @__PURE__ */ jsx(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 12 }),
+            rightSection: value ? /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                component: "div",
+                radius: "md",
+                variant: "subtle",
+                onClick: (event) => handleClear(event),
+                children: /* @__PURE__ */ jsx(X, { size: 12 })
+              }
+            ) : open ? /* @__PURE__ */ jsx(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 12 }),
             size: "sm",
             onClick: () => setOpen((o) => !o),
             styles: {
@@ -1920,27 +2013,6 @@ var DataTable = ({
     ] })
   ] });
 };
-var TableSkeleton = ({
-  rows = 10,
-  columns = 4,
-  canCheck = false,
-  withBorder,
-  borderRadius = "md",
-  rowHeight = 40
-}) => {
-  const totalColumns = columns + (canCheck ? 1 : 0);
-  return /* @__PURE__ */ jsx(Paper, { withBorder, radius: borderRadius, children: /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: Array.from({ length: totalColumns }).map((_, i) => /* @__PURE__ */ jsx(Table.Th, {}, i)) }) }),
-    /* @__PURE__ */ jsx(Table.Tbody, { children: Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsx(Table.Tr, { children: Array.from({ length: totalColumns }).map((_2, colIdx) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        height: rowHeight - 16,
-        width: colIdx === 0 && canCheck ? 24 : colIdx === totalColumns - 1 ? 48 : `${70 + colIdx % 2 * 10}%`,
-        radius: "sm"
-      }
-    ) }, colIdx)) }, rowIdx)) })
-  ] }) });
-};
 var TablePage = ({
   getQueryOptions,
   title,
@@ -1973,7 +2045,7 @@ var TablePage = ({
     });
   }, []);
   const { data, isLoading } = useQuery(getQueryOptions(tableParams));
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "sm", children: [
     /* @__PURE__ */ jsx(Title, { order: 1, children: title }),
     /* @__PURE__ */ jsx(
       DataTable,