@itilite/lumina-ui 1.0.7-alpha → 1.0.8-alpha

package/dist/Table-DoCPt3ri.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);
+    /** Default minimum width for all columns (e.g. 144 or "144px"). */
+    columnMinWidth?: 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-DoCPt3ri.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);
+    /** Default minimum width for all columns (e.g. 144 or "144px"). */
+    columnMinWidth?: 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/chunk-6RIZXTFP.mjs

@@ -0,0 +1,290 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/atom/Table/Table.tsx
+import * as React from "react";
+import { Table as AntTable } from "antd";
+import clsx from "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", "hasCustomHeaderCell": "Table-module__hasCustomHeaderCell___AtCk8", "table": "Table-module__table___5d7g0", "ant-table-selection-column": "Table-module__ant-table-selection-column___H9vtu", "hasCustomBodyCell": "Table-module__hasCustomBodyCell___sf8j8", "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
+import { jsx, jsxs } from "react/jsx-runtime";
+function buildPagination(pagination, overrides = {}) {
+  var _a, _b, _c, _d;
+  if (pagination === false) {
+    return false;
+  }
+  const defaults = {
+    showSizeChanger: true,
+    pageSizeOptions: ["10", "25", "50"],
+    locale: { items_per_page: "" },
+    // Removes "/ page" text
+    showTotal: (total, range) => `${range[0]}\u2013${range[1]} of ${total} items`
+  };
+  const baseConfig = pagination === true || pagination === void 0 ? defaults : __spreadValues(__spreadValues({}, defaults), pagination);
+  return __spreadProps(__spreadValues({}, baseConfig), {
+    total: (_a = overrides.total) != null ? _a : baseConfig.total,
+    current: (_b = overrides.current) != null ? _b : baseConfig.current,
+    pageSize: (_c = overrides.pageSize) != null ? _c : baseConfig.pageSize,
+    onChange: (_d = overrides.onChange) != null ? _d : baseConfig.onChange
+  });
+}
+function nextSortOrder(current) {
+  if (current === void 0) return "ascend";
+  if (current === "ascend") return "descend";
+  return void 0;
+}
+function ColumnHeader({
+  label,
+  sortable = false,
+  sortOrder,
+  onSortChange,
+  sortIcon,
+  filterCount = 0,
+  filterIcon,
+  filterContent,
+  className = ""
+}) {
+  const [filterOpen, setFilterOpen] = React.useState(false);
+  const wrapperRef = React.useRef(null);
+  const filterActive = filterCount > 0;
+  const hasFilter = filterContent !== void 0 && filterIcon !== void 0;
+  const hasSort = sortable && sortIcon !== void 0;
+  React.useEffect(() => {
+    if (!filterOpen) return;
+    const onOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setFilterOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, [filterOpen]);
+  return /* @__PURE__ */ jsxs("div", { className: Table_module_default.columnHeader, ref: wrapperRef, children: [
+    /* @__PURE__ */ jsx("div", { className: Table_module_default.columnHeaderLeft, children: hasSort ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: Table_module_default.columnHeaderSortArea,
+        onClick: () => onSortChange == null ? void 0 : onSortChange(nextSortOrder(sortOrder)),
+        "aria-label": typeof label === "string" ? `Sort by ${label}` : "Sort",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: clsx(Table_module_default.columnHeaderLabel, "tw-typography-caption2Bold tw-text-color-text-weak", className), children: label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(Table_module_default.columnHeaderSortIcon, {
+                [Table_module_default.columnHeaderSortIconActive]: sortOrder !== void 0
+              }),
+              children: sortIcon
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: clsx(Table_module_default.columnHeaderLabel, "tw-typography-caption2Bold tw-text-color-text-weak", className), children: label }) }),
+    hasFilter && /* @__PURE__ */ jsxs("div", { className: Table_module_default.columnHeaderFilterWrapper, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: clsx(Table_module_default.columnHeaderFilterBtn, {
+            [Table_module_default.columnHeaderFilterBtnActive]: filterActive
+          }),
+          onClick: () => setFilterOpen((v) => !v),
+          "aria-label": typeof label === "string" ? `Filter ${label}` : "Filter",
+          "aria-expanded": filterOpen,
+          "aria-haspopup": "dialog",
+          children: [
+            filterIcon,
+            filterActive && /* @__PURE__ */ jsx("span", { className: Table_module_default.columnHeaderFilterBadge, children: filterCount })
+          ]
+        }
+      ),
+      filterOpen && /* @__PURE__ */ jsx("div", { className: Table_module_default.columnHeaderFilterDropdown, role: "dialog", children: filterContent })
+    ] })
+  ] });
+}
+function processColumns(columns, headerCellClassName, bodyCellClassName) {
+  if (!columns) return void 0;
+  return columns.map((col) => {
+    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: clsx(base.className, headerCellClassName),
+        style: __spreadProps(__spreadValues({}, base.style), {
+          minWidth: column.width
+        })
+      });
+    };
+    const resolvedOnCell = (record, rowIndex) => {
+      var _a2;
+      const base = (_a2 = onCell == null ? void 0 : onCell(record, rowIndex)) != null ? _a2 : {};
+      return __spreadProps(__spreadValues({}, base), {
+        className: clsx(base.className, bodyCellClassName),
+        style: __spreadProps(__spreadValues({}, base.style), {
+          minWidth: col.width
+        })
+      });
+    };
+    const processedTitle = headerProps ? /* @__PURE__ */ jsx(ColumnHeader, __spreadValues({ label: title }, headerProps)) : title;
+    return __spreadProps(__spreadValues({}, rest), {
+      title: processedTitle,
+      onHeaderCell: resolvedOnHeaderCell,
+      onCell: resolvedOnCell
+    });
+  });
+}
+function Table(props) {
+  var _b;
+  const _a = props, {
+    size = "middle",
+    variant = "default",
+    isAccordion = false,
+    isToolbar = false,
+    className = "",
+    pagination,
+    loading,
+    total,
+    current,
+    pageSize,
+    onPaginationChange,
+    columns,
+    rowSelection,
+    rowKey = "key",
+    onRow,
+    dataSource,
+    emptyState,
+    hideHeader,
+    loadingIndicator,
+    style,
+    headerCellClassName,
+    bodyCellClassName,
+    rowClassName
+  } = _a, rest = __objRest(_a, [
+    "size",
+    "variant",
+    "isAccordion",
+    "isToolbar",
+    "className",
+    "pagination",
+    "loading",
+    "total",
+    "current",
+    "pageSize",
+    "onPaginationChange",
+    "columns",
+    "rowSelection",
+    "rowKey",
+    "onRow",
+    "dataSource",
+    "emptyState",
+    "hideHeader",
+    "loadingIndicator",
+    "style",
+    "headerCellClassName",
+    "bodyCellClassName",
+    "rowClassName"
+  ]);
+  const isChildVariant = isAccordion || isToolbar;
+  const resolvedPagination = buildPagination(pagination, {
+    total,
+    current,
+    pageSize,
+    onChange: onPaginationChange
+  });
+  const processedColumns = React.useMemo(
+    () => processColumns(columns, headerCellClassName, bodyCellClassName),
+    [columns, headerCellClassName, bodyCellClassName]
+  );
+  const resolvedRowSelection = React.useMemo(() => {
+    if (!rowSelection) return void 0;
+    return __spreadValues({
+      columnWidth: 48
+    }, rowSelection);
+  }, [rowSelection]);
+  const resolvedOnRow = React.useMemo(() => {
+    const onChange = resolvedRowSelection == null ? void 0 : resolvedRowSelection.onChange;
+    if (variant !== "selectable" || !onChange) return onRow;
+    return (record, index) => {
+      var _a2;
+      const base = (_a2 = onRow == null ? void 0 : onRow(record, index)) != null ? _a2 : {};
+      const getKey = (r, i) => typeof rowKey === "function" ? rowKey(r, i) : r[rowKey];
+      return __spreadProps(__spreadValues({}, base), {
+        style: __spreadValues({ cursor: "pointer" }, base.style),
+        onClick: (e) => {
+          var _a3, _b2;
+          (_a3 = base.onClick) == null ? void 0 : _a3.call(base, e);
+          const key = getKey(record, index);
+          const current2 = (_b2 = resolvedRowSelection.selectedRowKeys) != null ? _b2 : [];
+          const isSelected = current2.some((k) => k === key);
+          const newKeys = isSelected ? current2.filter((k) => k !== key) : [...current2, key];
+          const newRows = (dataSource != null ? dataSource : []).filter(
+            (r) => newKeys.some((k) => k === getKey(r))
+          );
+          onChange(newKeys, newRows, { type: "single" });
+        }
+      });
+    };
+  }, [variant, resolvedRowSelection, rowKey, onRow, dataSource]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        Table_module_default.tableWrapper,
+        Table_module_default.showHoverEffect,
+        {
+          [Table_module_default.isAccordion]: isAccordion,
+          [Table_module_default.isToolbar]: isToolbar,
+          [Table_module_default.hasCustomHeaderCell]: !!headerCellClassName,
+          [Table_module_default.hasCustomBodyCell]: !!bodyCellClassName
+        },
+        className
+      ),
+      style,
+      "data-testid": "lumina-table",
+      children: /* @__PURE__ */ jsx(
+        AntTable,
+        __spreadProps(__spreadValues({
+          className: Table_module_default.table,
+          size,
+          pagination: resolvedPagination,
+          columns: processedColumns,
+          rowSelection: resolvedRowSelection,
+          rowKey,
+          onRow: resolvedOnRow,
+          dataSource,
+          showHeader: !hideHeader,
+          locale: {
+            emptyText: loading && loadingIndicator ? loadingIndicator : loading ? " " : emptyState
+          }
+        }, rest), {
+          loading: loadingIndicator ? { spinning: !!loading && ((_b = dataSource == null ? void 0 : dataSource.length) != null ? _b : 0) > 0, indicator: loadingIndicator } : loading,
+          rowClassName: (record, index) => {
+            var _a2;
+            return clsx(
+              {
+                [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
+            );
+          }
+        })
+      )
+    }
+  );
+}
+Table.displayName = "Table";
+var Table_default = Table;
+
+export {
+  Table,
+  Table_default
+};