erp-pos-ecommerce-shared 0.0.15 → 0.1.0

package/dist/components.css

@@ -0,0 +1,11 @@
+/* src/components/table/TableHeader.module.css */
+.tableHeader {
+  display: flex;
+  align-items: center;
+  border-radius: var(--mantine-radius-lg);
+  transition: background-color 0.1s ease;
+  &:hover {
+    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-2));
+  }
+}
+/*# sourceMappingURL=components.css.map */

package/dist/components.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/table/TableHeader.module.css"],"sourcesContent":[".tableHeader {\ndisplay: flex;\nalign-items: center;\nborder-radius: var(--mantine-radius-lg);\ntransition: background-color 0.1s ease;\n  &:hover {\n    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-2));\n  }\n}"],"mappings":";AAAA,CAAC;AACD,WAAS;AACT,eAAa;AACb,iBAAe,IAAI;AACnB,cAAY,iBAAiB,KAAK;AAChC,GAAC;AACC,sBAAkB,WAAW,IAAI,uBAAuB,EAAE,IAAI;AAChE;AACF;","names":[]}

package/dist/components.d.ts

@@ -1,12 +1,12 @@
 import React$1, { ReactNode } from 'react';
-import { e as IField, b as IButton } from './form.interface-BX2xeC3W.js';
+import { e as IField, b as IButton } from './form.interface-CqnTdmc8.js';
 import { ReactFormExtendedApi, FormValidateOrFn, FormAsyncValidateOrFn } from '@tanstack/react-form';
 import { UseMutationResult } from '@tanstack/react-query';
-import { p as TblProductsImage } from './batch.interface-BUls7CK_.js';
+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 } from '@tanstack/react-table';
-import { D as DataTableConfig } from './datatable.interface-C28hhMoI.js';
+import { ColumnDef, Row, useReactTable } from '@tanstack/react-table';
+import { D as DataTableConfig, S as ServerTableState } from './datatable.interface-BObLVL2e.js';
 
 interface CreateEditFormProps<T> {
     fields: IField[];
@@ -31,8 +31,7 @@ interface CreateEditFormProps<T> {
     onGoBack?: () => void;
     /**
      * Optional icon for the back button. Pass your own icon component so the lib stays router/UI-agnostic.
-     * @example Tabler: <IconArrowLeft /> from @tabler/icons-react
-     * @example Lucide: <ArrowLeft /> from lucide-react
+     * @example <ArrowLeft /> from lucide-react
      */
     backButtonIcon?: ReactNode;
 }
@@ -83,10 +82,10 @@ interface GenericFieldController<TValue> {
  * Configure icons for ImageForm (dropzone, camera button, notifications, delete).
  * Call once at app startup with your preferred icon library.
  * @example
- * import { IconCamera, IconCheck, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+ * import { Camera, Check, Image, Upload, X } from "lucide-react";
  * configureImageFormIcons({
- *   acceptIcon: <IconUpload />, rejectIcon: <IconX />, idleIcon: <IconPhoto />,
- *   cameraIcon: <IconCamera />, successIcon: <IconCheck />, errorIcon: <IconX />,
+ *   acceptIcon: <Upload />, rejectIcon: <X />, idleIcon: <Image />,
+ *   cameraIcon: <Camera />, successIcon: <Check />, errorIcon: <X />,
  * });
  */
 declare const configureImageFormIcons: (config: {
@@ -114,23 +113,6 @@ declare const ImageForm: ({ field, label, required, multiple, maxSize, maxFiles,
 
 declare const generateFormSchema: (fields: IField[]) => z.ZodObject<z.ZodRawShape>;
 
-interface DataTableProps<TData> {
-    data: TData[];
-    columns: ColumnDef<TData, unknown>[];
-    config?: Partial<DataTableConfig>;
-}
-declare const DataTable: <TData>({ data, columns, config, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
-
-interface SearchInputProps {
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    onClear?: () => void;
-    IconSearch?: React.ElementType;
-    IconX?: React.ElementType;
-}
-declare const SearchInput: ({ value, onChange, placeholder, onClear, IconSearch, IconX, }: SearchInputProps) => react_jsx_runtime.JSX.Element;
-
 interface BottomPaginationProps {
     total: number;
     pageSize: number;
@@ -140,6 +122,40 @@ interface BottomPaginationProps {
 }
 declare const BottomPagination: ({ total, pageSize, pageIndex, onPageSizeChange, onPageIndexChange, }: BottomPaginationProps) => react_jsx_runtime.JSX.Element | null;
 
+interface DataTableProps$1<TData> {
+    /** Data to display in the table */
+    data: TData[];
+    /** Columns to display in the table */
+    columns: ColumnDef<TData>[];
+    /** Configuration for the table */
+    config?: Partial<DataTableConfig>;
+    /** Dynamic filters (selects for category, role, etc.) */
+    filters?: ITableFilterConfig[];
+    /** Enable server-side mode: pagination, filters, search handled by backend */
+    serverSide?: boolean;
+    /** Total row count from server (required when serverSide) */
+    totalRowCount?: number;
+    /** Called when table state changes. Use for API calls. */
+    onStateChange?: (state: ServerTableState) => void;
+    /** Whether the table is loading (shows TableSkeleton) */
+    loading?: boolean;
+    /** Whether to enable row selection */
+    enableRowCheck?: boolean;
+    /** Called when row selection changes (only when canCheck is true) */
+    onSelectionChange?: (selectedRows: TData[]) => void;
+    /** Header background color. Use light-dark(light, dark) for theme-aware colors */
+    headerBgColor?: string;
+    /** Column actions to display in the table */
+    columnActions?: (row: TData) => React.ReactNode;
+    /** List menu actions to display in the table */
+    listMenuActions?: (row: TData) => {
+        label: string;
+        onClick: () => void;
+        Icon?: React.ElementType;
+    }[];
+}
+declare const DataTable: <TData>({ data, columns, config, filters, serverSide, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
+
 interface EmptyStateProps {
     title?: string;
     description?: string;
@@ -155,4 +171,95 @@ interface EmptyStateProps {
 }
 declare const EmptyState: React$1.FC<EmptyStateProps>;
 
-export { BottomPagination, CreateEditForm, DataTable, EmptyState, FormGenerator, type FormInstance, type FormValues, ImageForm, SearchInput, configureImageFormIcons, fieldGenerator, generateFormSchema };
+/**
+ * TanStack Table filterFn for date columns.
+ * Keeps rows where the cell value (YYYY-MM-DD) is >= the selected date.
+ * Usage: add `filterFn: dateGteFilterFn` to the column definition.
+ */
+declare const dateGteFilterFn: <TData>(row: Row<TData>, columnId: string, filterValue: string) => boolean;
+interface FilterDateProps {
+    /** Column id to filter */
+    columnId: string;
+    /** Current filter value (ISO date string or null) */
+    value: string | null;
+    /** Called when filter changes */
+    onChange: (columnId: string, value: string | null) => void;
+    /** Placeholder when no date selected */
+    placeholder?: string;
+}
+declare const FilterDate: ({ columnId, value, onChange, placeholder, }: FilterDateProps) => react_jsx_runtime.JSX.Element;
+
+interface FilterSelectProps {
+    /** Column id to filter */
+    columnId: string;
+    /** Select options (value, label pairs). Import FilterSelectOption from interfaces/filters */
+    options: IFilterSelectOption[];
+    /** Current filter value */
+    onChange: (columnId: string, value: string | null) => void;
+    /** Placeholder when no selection */
+    placeholder?: string;
+    /** Icon to show in the button */
+    Icon?: React.ElementType;
+}
+declare const FilterSelect: ({ columnId, options, onChange, placeholder, Icon, }: FilterSelectProps) => react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    onClear?: () => void;
+    IconSearch?: React.ElementType;
+    IconX?: React.ElementType;
+}
+declare const SearchInput: ({ value, onChange, placeholder, onClear, IconSearch, IconX, }: SearchInputProps) => react_jsx_runtime.JSX.Element;
+
+interface DataTableProps<TData> {
+    table: ReturnType<typeof useReactTable<TData>>;
+    /** Whether to show the border */
+    withBorder?: boolean;
+    /** Border radius */
+    borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | number;
+    /** Icon when column is unsorted */
+    SortIcon?: React$1.ElementType;
+    /** Icon when column is sorted ascending */
+    SortIconAsc?: React$1.ElementType;
+    /** Icon when column is sorted descending */
+    SortIconDesc?: React$1.ElementType;
+    /** Icon when empty state */
+    EmptyStateIcon?: React$1.ElementType;
+    /** Title when empty state */
+    EmptyStateTitle?: string;
+    /** Description when empty state */
+    EmptyStateDescription?: string;
+    /** Whether to show the checkboxes */
+    canCheck?: boolean;
+    /** Column actions */
+    columnActions?: (row: TData) => React$1.ReactNode;
+    /** List menu actions */
+    listMenuActions?: (row: TData) => {
+        label: string;
+        onClick: () => void;
+        Icon?: React$1.ElementType;
+    }[];
+    /** Header background color. Use light-dark(light, dark) for theme-aware colors */
+    headerBgColor?: string;
+}
+declare const SimpleDataTable: <TData>({ table, withBorder, borderRadius, SortIcon, SortIconAsc, SortIconDesc, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, canCheck, columnActions, listMenuActions, headerBgColor, }: 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 */
+    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;
+}
+declare const TableSkeleton: ({ rows, columns, canCheck, withBorder, borderRadius, rowHeight, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
+
+export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, type FormValues, ImageForm, SearchInput, SimpleDataTable, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };