@itilite/lumina-ui 1.0.5-alpha → 1.0.6-alpha

package/dist/Table-DSFYzrpU.d.mts

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { TableProps as TableProps$1, TablePaginationConfig } from 'antd';
+
+type SortOrder = "ascend" | "descend" | undefined;
+type AntColumnType<RecordType> = NonNullable<TableProps$1<RecordType>["columns"]>[number];
+/**
+ * Header icon configuration added to any column definition.
+ * The Table component reads these props and renders sort/filter icons automatically.
+ */
+interface LuminaColumnHeaderProps {
+    /** Show sort icon. Clicking cycles: undefined (↑↓) → ascend (↑) → descend (↓) → undefined */
+    sortable?: boolean;
+    /** Current sort direction. Provide to make sort controlled. */
+    sortOrder?: SortOrder;
+    /** Called when the user clicks the sort icon. */
+    onSortChange?: (order: SortOrder) => void;
+    /**
+     * Custom sort icon. This MUST be provided if sortable is true.
+     * If omitted, no icon will be rendered.
+     */
+    sortIcon?: React.ReactNode;
+    /** > 0 turns the filter icon red and shows a count badge. */
+    filterCount?: number;
+    /**
+     * Custom filter icon. This MUST be provided if filterContent is present.
+     * If omitted, no icon will be rendered.
+     */
+    filterIcon?: React.ReactNode;
+    /**
+     * Filter dropdown content from the consumer.
+     * Providing this prop renders the filter icon button.
+     * Clicking the icon toggles visibility of this content.
+     */
+    filterContent?: React.ReactNode;
+    /** Optional class name to apply to the header label. */
+    className?: string;
+}
+/**
+ * AntD ColumnType extended with optional `headerProps` for Lumina sort/filter icons.
+ */
+type LuminaColumnType<RecordType = any> = AntColumnType<RecordType> & {
+    headerProps?: LuminaColumnHeaderProps;
+};
+type LuminaColumnsType<RecordType = any> = LuminaColumnType<RecordType>[];
+interface TableProps<RecordType = any> extends Omit<TableProps$1<RecordType>, "size" | "bordered" | "pagination" | "columns"> {
+    /**
+     * Lumina UI table variant.
+     * - `default`    – standard table
+     * - `selectable` – checkbox rows; clicking any row toggles its checkbox
+     */
+    variant?: "default" | "selectable";
+    /** If true, strips outer card chrome to fit inside an Accordion parent. */
+    isAccordion?: boolean;
+    /** If true, strips outer card chrome to fit inside a Toolbar/Container parent. */
+    isToolbar?: boolean;
+    /** Table size. Defaults to 'middle'. */
+    size?: "small" | "middle" | "large";
+    /** Extra class applied on the outermost wrapper div. */
+    className?: string;
+    /** AntD pagination config. Pass `false` to hide pagination. */
+    pagination?: TablePaginationConfig | boolean;
+    /**
+     * Column definitions. Add `headerProps` to any column to get sort/filter icons
+     * rendered automatically in the column header.
+     */
+    columns?: LuminaColumnsType<RecordType>;
+    /** Total number of items in the dataset (for server-side pagination). */
+    total?: number;
+    /** Current page number (1-indexed). */
+    current?: number;
+    /** Number of rows per page. */
+    pageSize?: number;
+    /** Called when the page or page size changes. */
+    onPaginationChange?: TablePaginationConfig["onChange"];
+    /**
+     * Custom content to show when the table has no data.
+     * If provided, it overrides the default Ant Design "No Data" view.
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * If true, the table header (the row with column labels) will be hidden.
+     * Useful during loading or for specific visual variants.
+     */
+    hideHeader?: boolean;
+    /**
+     * Custom loading indicator (e.g. a spinner or skeleton).
+     * If provided, this will be rendered when the table is in a loading state.
+     */
+    loadingIndicator?: React.ReactElement;
+    /** Extra class applied to header cells (th). */
+    headerCellClassName?: string;
+    /** Extra class applied to body cells (td). */
+    bodyCellClassName?: string;
+    /** Custom class name for rows. Can be a string or function. */
+    rowClassName?: string | ((record: RecordType, index: number) => string);
+    /** Adds vertical spacing between table rows (e.g., "8px" or 8). */
+    rowSpacing?: number | string;
+}
+
+/**
+ * Lumina Table component.
+ *
+ * Variants:
+ * - `default`         – standalone table card with rounded border
+ * - `hover`           – row highlight on mouse-over
+ * - `selectable`      – use with `rowSelection`; clicking any row toggles its checkbox
+ * - `accordion-child` – strips outer card chrome; place inside your own accordion wrapper
+ * - `toolbar-child`   – strips outer card chrome; place inside your own toolbar/container wrapper
+ *
+ * Column header icons — add `headerProps` to any column definition:
+ * ```tsx
+ * columns={[{
+ *   key: "name", dataIndex: "name", title: "Name",
+ *   headerProps: {
+ *     sortable: true,
+ *     sortOrder: sortOrders.name,
+ *     onSortChange: (order) => setSortOrders(prev => ({ ...prev, name: order })),
+ *     filterCount: activeFilters.name ?? 0,
+ *     filterContent: <MyFilterPanel />,
+ *   },
+ * }]}
+ * ```
+ */
+declare function Table<RecordType extends object = any>(props: TableProps<RecordType>): React.JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
+
+export { type LuminaColumnHeaderProps as L, type SortOrder as S, Table as T, type LuminaColumnType as a, type LuminaColumnsType as b, type TableProps as c };

package/dist/Table-DSFYzrpU.d.ts

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { TableProps as TableProps$1, TablePaginationConfig } from 'antd';
+
+type SortOrder = "ascend" | "descend" | undefined;
+type AntColumnType<RecordType> = NonNullable<TableProps$1<RecordType>["columns"]>[number];
+/**
+ * Header icon configuration added to any column definition.
+ * The Table component reads these props and renders sort/filter icons automatically.
+ */
+interface LuminaColumnHeaderProps {
+    /** Show sort icon. Clicking cycles: undefined (↑↓) → ascend (↑) → descend (↓) → undefined */
+    sortable?: boolean;
+    /** Current sort direction. Provide to make sort controlled. */
+    sortOrder?: SortOrder;
+    /** Called when the user clicks the sort icon. */
+    onSortChange?: (order: SortOrder) => void;
+    /**
+     * Custom sort icon. This MUST be provided if sortable is true.
+     * If omitted, no icon will be rendered.
+     */
+    sortIcon?: React.ReactNode;
+    /** > 0 turns the filter icon red and shows a count badge. */
+    filterCount?: number;
+    /**
+     * Custom filter icon. This MUST be provided if filterContent is present.
+     * If omitted, no icon will be rendered.
+     */
+    filterIcon?: React.ReactNode;
+    /**
+     * Filter dropdown content from the consumer.
+     * Providing this prop renders the filter icon button.
+     * Clicking the icon toggles visibility of this content.
+     */
+    filterContent?: React.ReactNode;
+    /** Optional class name to apply to the header label. */
+    className?: string;
+}
+/**
+ * AntD ColumnType extended with optional `headerProps` for Lumina sort/filter icons.
+ */
+type LuminaColumnType<RecordType = any> = AntColumnType<RecordType> & {
+    headerProps?: LuminaColumnHeaderProps;
+};
+type LuminaColumnsType<RecordType = any> = LuminaColumnType<RecordType>[];
+interface TableProps<RecordType = any> extends Omit<TableProps$1<RecordType>, "size" | "bordered" | "pagination" | "columns"> {
+    /**
+     * Lumina UI table variant.
+     * - `default`    – standard table
+     * - `selectable` – checkbox rows; clicking any row toggles its checkbox
+     */
+    variant?: "default" | "selectable";
+    /** If true, strips outer card chrome to fit inside an Accordion parent. */
+    isAccordion?: boolean;
+    /** If true, strips outer card chrome to fit inside a Toolbar/Container parent. */
+    isToolbar?: boolean;
+    /** Table size. Defaults to 'middle'. */
+    size?: "small" | "middle" | "large";
+    /** Extra class applied on the outermost wrapper div. */
+    className?: string;
+    /** AntD pagination config. Pass `false` to hide pagination. */
+    pagination?: TablePaginationConfig | boolean;
+    /**
+     * Column definitions. Add `headerProps` to any column to get sort/filter icons
+     * rendered automatically in the column header.
+     */
+    columns?: LuminaColumnsType<RecordType>;
+    /** Total number of items in the dataset (for server-side pagination). */
+    total?: number;
+    /** Current page number (1-indexed). */
+    current?: number;
+    /** Number of rows per page. */
+    pageSize?: number;
+    /** Called when the page or page size changes. */
+    onPaginationChange?: TablePaginationConfig["onChange"];
+    /**
+     * Custom content to show when the table has no data.
+     * If provided, it overrides the default Ant Design "No Data" view.
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * If true, the table header (the row with column labels) will be hidden.
+     * Useful during loading or for specific visual variants.
+     */
+    hideHeader?: boolean;
+    /**
+     * Custom loading indicator (e.g. a spinner or skeleton).
+     * If provided, this will be rendered when the table is in a loading state.
+     */
+    loadingIndicator?: React.ReactElement;
+    /** Extra class applied to header cells (th). */
+    headerCellClassName?: string;
+    /** Extra class applied to body cells (td). */
+    bodyCellClassName?: string;
+    /** Custom class name for rows. Can be a string or function. */
+    rowClassName?: string | ((record: RecordType, index: number) => string);
+    /** Adds vertical spacing between table rows (e.g., "8px" or 8). */
+    rowSpacing?: number | string;
+}
+
+/**
+ * Lumina Table component.
+ *
+ * Variants:
+ * - `default`         – standalone table card with rounded border
+ * - `hover`           – row highlight on mouse-over
+ * - `selectable`      – use with `rowSelection`; clicking any row toggles its checkbox
+ * - `accordion-child` – strips outer card chrome; place inside your own accordion wrapper
+ * - `toolbar-child`   – strips outer card chrome; place inside your own toolbar/container wrapper
+ *
+ * Column header icons — add `headerProps` to any column definition:
+ * ```tsx
+ * columns={[{
+ *   key: "name", dataIndex: "name", title: "Name",
+ *   headerProps: {
+ *     sortable: true,
+ *     sortOrder: sortOrders.name,
+ *     onSortChange: (order) => setSortOrders(prev => ({ ...prev, name: order })),
+ *     filterCount: activeFilters.name ?? 0,
+ *     filterContent: <MyFilterPanel />,
+ *   },
+ * }]}
+ * ```
+ */
+declare function Table<RecordType extends object = any>(props: TableProps<RecordType>): React.JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
+
+export { type LuminaColumnHeaderProps as L, type SortOrder as S, Table as T, type LuminaColumnType as a, type LuminaColumnsType as b, type TableProps as c };

package/dist/atom/Table/Table.d.mts

@@ -1,3 +1,3 @@
 import 'react';
-export { T as Table, T as default } from '../../Table-BOq-_9Nr.mjs';
+export { T as Table, T as default } from '../../Table-DSFYzrpU.mjs';
 import 'antd';

package/dist/atom/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import 'react';
-export { T as Table, T as default } from '../../Table-BOq-_9Nr.js';
+export { T as Table, T as default } from '../../Table-DSFYzrpU.js';
 import 'antd';

package/dist/atom/Table/Table.js

@@ -68,7 +68,7 @@ var import_antd = require("antd");
 var import_clsx = __toESM(require("clsx"));
 
 // src/atom/Table/Table.module.scss
-var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "table": "Table-module__table___5d7g0", "firstRow": "Table-module__firstRow___Xq-Hi", "lastRow": "Table-module__lastRow___ahv4g", "showHoverEffect": "Table-module__showHoverEffect___IyKyO", "columnHeader": "Table-module__columnHeader___Unr6d", "columnHeaderLeft": "Table-module__columnHeaderLeft___mp7pK", "columnHeaderSortArea": "Table-module__columnHeaderSortArea___jrIYo", "columnHeaderLabel": "Table-module__columnHeaderLabel___A-mRu", "columnHeaderSortIcon": "Table-module__columnHeaderSortIcon___mWVZN", "columnHeaderSortIconActive": "Table-module__columnHeaderSortIconActive___wHAqC", "columnHeaderFilterWrapper": "Table-module__columnHeaderFilterWrapper___DnSve", "columnHeaderFilterBtn": "Table-module__columnHeaderFilterBtn___NR7DY", "columnHeaderFilterBtnActive": "Table-module__columnHeaderFilterBtnActive___JdO11", "columnHeaderFilterBadge": "Table-module__columnHeaderFilterBadge___-Q2T2", "columnHeaderFilterDropdown": "Table-module__columnHeaderFilterDropdown___M-fD4" };
+var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "hasCustomHeaderCell": "Table-module__hasCustomHeaderCell___AtCk8", "table": "Table-module__table___5d7g0", "hasCustomBodyCell": "Table-module__hasCustomBodyCell___sf8j8", "hasRowSpacing": "Table-module__hasRowSpacing___bGT0u", "firstRow": "Table-module__firstRow___Xq-Hi", "lastRow": "Table-module__lastRow___ahv4g", "showHoverEffect": "Table-module__showHoverEffect___IyKyO", "columnHeader": "Table-module__columnHeader___Unr6d", "columnHeaderLeft": "Table-module__columnHeaderLeft___mp7pK", "columnHeaderSortArea": "Table-module__columnHeaderSortArea___jrIYo", "columnHeaderLabel": "Table-module__columnHeaderLabel___A-mRu", "columnHeaderSortIcon": "Table-module__columnHeaderSortIcon___mWVZN", "columnHeaderSortIconActive": "Table-module__columnHeaderSortIconActive___wHAqC", "columnHeaderFilterWrapper": "Table-module__columnHeaderFilterWrapper___DnSve", "columnHeaderFilterBtn": "Table-module__columnHeaderFilterBtn___NR7DY", "columnHeaderFilterBtnActive": "Table-module__columnHeaderFilterBtnActive___JdO11", "columnHeaderFilterBadge": "Table-module__columnHeaderFilterBadge___-Q2T2", "columnHeaderFilterDropdown": "Table-module__columnHeaderFilterDropdown___M-fD4" };
 
 // src/atom/Table/Table.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -167,13 +167,29 @@ function ColumnHeader({
     ] })
   ] });
 }
-function processColumns(columns) {
+function processColumns(columns, headerCellClassName, bodyCellClassName) {
   if (!columns) return void 0;
   return columns.map((col) => {
-    const _a = col, { headerProps, title } = _a, rest = __objRest(_a, ["headerProps", "title"]);
-    if (!headerProps) return __spreadValues({ title }, rest);
+    const _a = col, { headerProps, title, onHeaderCell, onCell } = _a, rest = __objRest(_a, ["headerProps", "title", "onHeaderCell", "onCell"]);
+    const resolvedOnHeaderCell = (column) => {
+      var _a2;
+      const base = (_a2 = onHeaderCell == null ? void 0 : onHeaderCell(column)) != null ? _a2 : {};
+      return __spreadProps(__spreadValues({}, base), {
+        className: (0, import_clsx.default)(base.className, headerCellClassName)
+      });
+    };
+    const resolvedOnCell = (record, rowIndex) => {
+      var _a2;
+      const base = (_a2 = onCell == null ? void 0 : onCell(record, rowIndex)) != null ? _a2 : {};
+      return __spreadProps(__spreadValues({}, base), {
+        className: (0, import_clsx.default)(base.className, bodyCellClassName)
+      });
+    };
+    const processedTitle = headerProps ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColumnHeader, __spreadValues({ label: title }, headerProps)) : title;
     return __spreadProps(__spreadValues({}, rest), {
-      title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColumnHeader, __spreadValues({ label: title }, headerProps))
+      title: processedTitle,
+      onHeaderCell: resolvedOnHeaderCell,
+      onCell: resolvedOnCell
     });
   });
 }
@@ -199,7 +215,11 @@ function Table(props) {
     emptyState,
     hideHeader,
     loadingIndicator,
-    style
+    style,
+    headerCellClassName,
+    bodyCellClassName,
+    rowClassName,
+    rowSpacing
   } = _a, rest = __objRest(_a, [
     "size",
     "variant",
@@ -220,7 +240,11 @@ function Table(props) {
     "emptyState",
     "hideHeader",
     "loadingIndicator",
-    "style"
+    "style",
+    "headerCellClassName",
+    "bodyCellClassName",
+    "rowClassName",
+    "rowSpacing"
   ]);
   const isChildVariant = isAccordion || isToolbar;
   const resolvedPagination = buildPagination(pagination, {
@@ -230,9 +254,8 @@ function Table(props) {
     onChange: onPaginationChange
   });
   const processedColumns = React.useMemo(
-    () => processColumns(columns),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [columns]
+    () => processColumns(columns, headerCellClassName, bodyCellClassName),
+    [columns, headerCellClassName, bodyCellClassName]
   );
   const resolvedOnRow = React.useMemo(() => {
     const onChange = rowSelection == null ? void 0 : rowSelection.onChange;
@@ -258,17 +281,30 @@ function Table(props) {
       });
     };
   }, [variant, rowSelection, rowKey, onRow, dataSource]);
+  const hasRowSpacing = rowSpacing !== void 0;
+  const rowSpacingValue = typeof rowSpacing === "number" ? `${rowSpacing}px` : rowSpacing;
+  const wrapperStyle = React.useMemo(() => {
+    if (!hasRowSpacing) return style;
+    return __spreadProps(__spreadValues({}, style), {
+      "--lumina-table-row-spacing": rowSpacingValue
+    });
+  }, [style, hasRowSpacing, rowSpacingValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_clsx.default)(
         Table_module_default.tableWrapper,
         Table_module_default.showHoverEffect,
-        { [Table_module_default.isAccordion]: isAccordion },
-        { [Table_module_default.isToolbar]: isToolbar },
+        {
+          [Table_module_default.isAccordion]: isAccordion,
+          [Table_module_default.isToolbar]: isToolbar,
+          [Table_module_default.hasCustomHeaderCell]: !!headerCellClassName,
+          [Table_module_default.hasCustomBodyCell]: !!bodyCellClassName,
+          [Table_module_default.hasRowSpacing]: hasRowSpacing
+        },
         className
       ),
-      style,
+      style: wrapperStyle,
       "data-testid": "lumina-table",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_antd.Table,
@@ -287,12 +323,15 @@ function Table(props) {
           }
         }, rest), {
           loading: loadingIndicator ? { spinning: !!loading && ((_b = dataSource == null ? void 0 : dataSource.length) != null ? _b : 0) > 0, indicator: loadingIndicator } : loading,
-          rowClassName: (_, index) => {
+          rowClassName: (record, index) => {
             var _a2;
-            return (0, import_clsx.default)({
-              [Table_module_default.firstRow]: index === 0,
-              [Table_module_default.lastRow]: index === ((_a2 = dataSource == null ? void 0 : dataSource.length) != null ? _a2 : 0) - 1
-            });
+            return (0, import_clsx.default)(
+              {
+                [Table_module_default.firstRow]: index === 0,
+                [Table_module_default.lastRow]: index === ((_a2 = dataSource == null ? void 0 : dataSource.length) != null ? _a2 : 0) - 1
+              },
+              typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName
+            );
           }
         })
       )

package/dist/atom/Table/Table.mjs

@@ -1,7 +1,7 @@
 import {
   Table,
   Table_default
-} from "../../chunk-BFFLWW7N.mjs";
+} from "../../chunk-LRNKIRH3.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   Table,