erp-pos-ecommerce-shared 0.1.3 → 0.1.5

package/dist/components.d.ts

@@ -5,8 +5,8 @@ import { UseMutationResult, UseQueryOptions } from '@tanstack/react-query';
 import { s as TblProductsImage, o as ITableFilterConfig, g as IFilterSelectOption } from './filters.interface-Cx-AXMPz.js';
 import * as z from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ColumnDef, Row, useReactTable } from '@tanstack/react-table';
-import { D as DataTableConfig, S as ServerTableState } from './datatable.interface-DFSQWdXd.js';
+import { ColumnDef, useReactTable, Row } from '@tanstack/react-table';
+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 */
@@ -152,8 +152,18 @@ interface DataTableProps$1<TData> {
         onClick: () => void;
         Icon?: React.ElementType;
     }[];
+    /** Called when a row is clicked */
+    onRowClick?: (row: TData) => void;
+    /** Called when a row is hovered */
+    onRowHover?: (row: TData) => void;
+    /** Empty state to display when no data is available */
+    emptyState?: React.ReactNode;
+    /** Table instance */
+    table?: ReturnType<typeof useReactTable<TData>>;
+    /** Custom Header component */
+    CustomHeader?: React.ReactNode;
 }
-declare const DataTable: <TData>({ data, columns, config, filters, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
+declare const DataTable: <TData>({ data, columns, config, filters, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, onRowClick, onRowHover, emptyState, table: ExternalTable, CustomHeader, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
 
 interface EmptyStateProps {
     title?: string;
@@ -240,26 +250,32 @@ 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 */
+    skeletonRowCount?: number;
+    /** Called when a row is clicked */
+    onRowClick?: (row: TData) => void;
+    /** Called when a row is hovered */
+    onRowHover?: (row: TData) => void;
+    /** Empty state to display when no data is available */
+    emptyState?: React$1.ReactNode;
 }
-declare const SimpleDataTable: <TData>({ table, withBorder, borderRadius, SortIcon, SortIconAsc, SortIconDesc, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, canCheck, columnActions, listMenuActions, headerBgColor, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const SimpleDataTable: <TData>({ table, withBorder, borderRadius, SortIcon, SortIconAsc, SortIconDesc, canCheck, columnActions, listMenuActions, headerBgColor, loading, skeletonRowCount, onRowClick, onRowHover, emptyState, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
 
 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> {
@@ -272,10 +288,71 @@ interface TablePageProps<TRow> {
      * the query options. Called every time the table state changes.
      */
     getQueryOptions: (params: TableQueryParams) => UseQueryOptions<PaginatedResponse<TRow>>;
+    /**
+     * Title of the table
+     */
     title: string;
+    /**
+     * Columns of the table
+     */
     columns: ColumnDef<TRow>[];
+    /**
+     * Filters of the table
+     */
     filters?: ITableFilterConfig[];
+    /**
+     * Whether the table is loading externally
+     */
+    isLoadingExternal?: boolean;
+    /**
+     * Called when a row is clicked
+     */
+    onRowClick?: (row: TRow) => void;
+    /**
+     * Called when a row is hovered
+     */
+    onRowHover?: (row: TRow) => void;
+    /**
+     * Empty state of the table
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * Table instance
+     */
+    table?: ReturnType<typeof useReactTable<TRow>>;
+    /**
+     * Whether to enable row selection
+     */
+    enableRowSelection?: boolean;
+    /**
+     * Header style: color string (legacy) or { bgColor, textColor, fontWeight?, fontSize?, padding? }
+     */
+    headerBgColor?: TableHeaderStyle;
+    /**
+     * Column actions to display per row
+     */
+    columnActions?: (row: TRow) => React.ReactNode;
+    /**
+     * List menu actions to display per row
+     */
+    listMenuActions?: (row: TRow) => {
+        label: string;
+        onClick: () => void;
+        Icon?: React.ElementType;
+    }[];
+    /**
+     * Called when row selection changes
+     */
+    onSelectionChange?: (selectedRows: TRow[]) => void;
+    /**
+     * Configuration for the table
+     */
+    config?: Partial<DataTableConfig>;
+    /**
+     * Custom Header component
+     */
+    CustomHeader?: React.ReactNode;
 }
-declare const TablePage: <TRow>({ getQueryOptions, title, columns, filters, }: TablePageProps<TRow>) => react_jsx_runtime.JSX.Element;
+declare const TablePage: <TRow>({ getQueryOptions, title, columns, filters, isLoadingExternal, onRowClick, onRowHover, emptyState, table, enableRowSelection, headerBgColor, columnActions, listMenuActions, onSelectionChange, config, CustomHeader, }: TablePageProps<TRow>) => react_jsx_runtime.JSX.Element;
 
 export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, type FormValues, ImageForm, type PaginatedResponse, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };