eidos-ui 2.0.0 → 2.1.0

package/dist/chunk-ZEZK664O.js

@@ -0,0 +1,921 @@
+import {
+  CSS,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  SortableContext,
+  TableFiltersDropdown,
+  arrayMove,
+  horizontalListSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSensor,
+  useSensors,
+  useSortable
+} from "./chunk-EXITZVB2.js";
+import {
+  Spinner
+} from "./chunk-6ZAT5CGB.js";
+import {
+  SplitButton
+} from "./chunk-NGVOXM7P.js";
+import {
+  Pagination
+} from "./chunk-GI6VJYOS.js";
+import {
+  EmptyState
+} from "./chunk-3TUCQAYL.js";
+import {
+  Checkbox
+} from "./chunk-H6CWTMAH.js";
+import {
+  Dropdown
+} from "./chunk-4BKTBV2I.js";
+import {
+  Button
+} from "./chunk-YJXZR7RL.js";
+import {
+  devWarn
+} from "./chunk-KBG77JHC.js";
+
+// src/components/Table/Table.component.tsx
+import { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } from "react";
+import {
+  ChevronsUpDown,
+  ArrowUp,
+  ArrowDown,
+  Check,
+  Download,
+  Columns3,
+  AlignJustify,
+  GripVertical,
+  FolderOpen,
+  SearchX
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MIN_DATA_COLUMN_WIDTH_PX = 100;
+var ICON_COLUMN_WIDTH_PX = 48;
+var CHECKBOX_COLUMN_WIDTH_PX = 40;
+var COMPACT_TOOLBAR_WIDTH_PX = 560;
+var DENSITY_OPTIONS = [
+  { value: "compact", label: "Compact" },
+  { value: "comfortable", label: "Comfortable" },
+  { value: "spacious", label: "Spacious" }
+];
+function escapeCsvValue(value) {
+  if (value.includes(",") || value.includes("\n") || value.includes('"')) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function SortableColumnHeader({
+  id,
+  column,
+  isSortable,
+  isCurrentlySorted,
+  sortDirection,
+  alignment,
+  columnType,
+  columnWidth,
+  pinnedClass,
+  stickyStyle,
+  onSortClick
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id
+  });
+  const transformStr = CSS.Transform.toString(transform);
+  const thClassName = [
+    "eidos-table-header-cell",
+    `eidos-table-header-cell-${columnType}`,
+    isSortable ? "eidos-table-sortable" : "",
+    isCurrentlySorted ? "eidos-table-sorted" : "",
+    `eidos-table-align-${alignment}`,
+    pinnedClass
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      ref: setNodeRef,
+      className: thClassName,
+      style: {
+        width: columnWidth,
+        ...stickyStyle,
+        ...transformStr ? { transform: transformStr } : {},
+        transition: transition ?? void 0,
+        opacity: isDragging ? 0.5 : 1
+      },
+      "data-col-key": id,
+      onClick: () => isSortable && onSortClick(),
+      ...attributes,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "eidos-table-drag-handle",
+            ...listeners,
+            onClick: (e) => e.stopPropagation(),
+            title: "Drag to reorder",
+            children: /* @__PURE__ */ jsx(GripVertical, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: `eidos-table-header-content eidos-table-align-${alignment}`, children: [
+          /* @__PURE__ */ jsx("span", { className: "eidos-table-header-label", children: column.label }),
+          isSortable && /* @__PURE__ */ jsxs("div", { className: "eidos-table-sort-indicator", children: [
+            sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, { size: 14 }),
+            sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { size: 14 }),
+            !sortDirection && /* @__PURE__ */ jsx(ChevronsUpDown, { size: 14 })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var Table = ({
+  data,
+  columns,
+  loading = false,
+  emptyMessage = "No data available",
+  onRowClick,
+  className,
+  showFooter = false,
+  totalItems,
+  showPagination = false,
+  pageSize = 25,
+  pageSizeOptions = [10, 25, 50, 100],
+  onSortChange,
+  currentSort,
+  filters = {},
+  onFiltersChange,
+  defaultFilters,
+  showFilters = false,
+  // Selection
+  selectable = false,
+  rowKey,
+  selectedRows: controlledSelected,
+  defaultSelectedRows = [],
+  onSelectionChange,
+  selectAllScope = "all",
+  onSelectAllMatching,
+  bulkActions = [],
+  // New features
+  density = "comfortable",
+  showDensity = false,
+  showColumnVisibility = false,
+  showExport = false,
+  draggableColumns = false,
+  onColumnReorder,
+  // Card view
+  hasCardView = true,
+  cardViewBreakpoint = 640,
+  cardMinWidth = 280
+}) => {
+  const [columnOrder, setColumnOrder] = useState(() => columns.map((c) => String(c.key)));
+  const columnKeysSignature = columns.map((c) => String(c.key)).join("\0");
+  const prevKeysRef = useRef(columnKeysSignature);
+  if (prevKeysRef.current !== columnKeysSignature) {
+    prevKeysRef.current = columnKeysSignature;
+    setColumnOrder(columns.map((c) => String(c.key)));
+  }
+  const orderedColumns = useMemo(() => {
+    const orderMap = new Map(columnOrder.map((key, idx) => [key, idx]));
+    return [...columns].sort((a, b) => {
+      const ai = orderMap.get(String(a.key)) ?? Infinity;
+      const bi = orderMap.get(String(b.key)) ?? Infinity;
+      return ai - bi;
+    });
+  }, [columns, columnOrder]);
+  const [internalDensity, setInternalDensity] = useState(density);
+  const effectiveDensity = showDensity ? internalDensity : density;
+  const [hiddenColumnKeys, setHiddenColumnKeys] = useState(() => /* @__PURE__ */ new Set());
+  const visibleColumns = useMemo(
+    () => orderedColumns.filter((c) => !hiddenColumnKeys.has(String(c.key))),
+    [orderedColumns, hiddenColumnKeys]
+  );
+  const [containerWidth, setContainerWidth] = useState(null);
+  const resizeObserverRef = useRef(null);
+  const setContainerRef = useCallback((el) => {
+    resizeObserverRef.current?.disconnect();
+    resizeObserverRef.current = null;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width;
+      if (width != null) setContainerWidth(width);
+    });
+    observer.observe(el);
+    resizeObserverRef.current = observer;
+  }, []);
+  const minTableWidth = useMemo(
+    () => visibleColumns.reduce(
+      (total, column) => total + (column.type === "icon" || column.type === "action" ? ICON_COLUMN_WIDTH_PX : MIN_DATA_COLUMN_WIDTH_PX),
+      selectable ? CHECKBOX_COLUMN_WIDTH_PX : 0
+    ),
+    [visibleColumns, selectable]
+  );
+  const isCardView = hasCardView && containerWidth !== null && (containerWidth < cardViewBreakpoint || containerWidth < minTableWidth);
+  const isCompactToolbar = containerWidth !== null && containerWidth < COMPACT_TOOLBAR_WIDTH_PX;
+  const cardHeaderColumn = useMemo(
+    () => visibleColumns.find((c) => c.cardHeader),
+    [visibleColumns]
+  );
+  const cardSubheaderColumn = useMemo(
+    () => visibleColumns.find((c) => c.cardSubheader),
+    [visibleColumns]
+  );
+  const cardActionsColumn = useMemo(
+    () => visibleColumns.find((c) => c.type === "action"),
+    [visibleColumns]
+  );
+  const cardFieldColumns = useMemo(
+    () => visibleColumns.filter(
+      (c) => c !== cardHeaderColumn && c !== cardSubheaderColumn && c !== cardActionsColumn
+    ),
+    [visibleColumns, cardHeaderColumn, cardSubheaderColumn, cardActionsColumn]
+  );
+  const theadRef = useRef(null);
+  const [pinnedOffsets, setPinnedOffsets] = useState(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const hasPinned = visibleColumns.some((c) => c.pin);
+    if (!hasPinned || !theadRef.current) {
+      setPinnedOffsets(/* @__PURE__ */ new Map());
+      return;
+    }
+    const headerRow = theadRef.current.querySelector("tr");
+    if (!headerRow) return;
+    const cells = Array.from(headerRow.querySelectorAll("th[data-col-key]"));
+    const newOffsets = /* @__PURE__ */ new Map();
+    let leftAccum = 0;
+    for (const cell of cells) {
+      const key = cell.dataset.colKey;
+      if (key === "__checkbox__") {
+        newOffsets.set(key, { side: "left", offset: leftAccum });
+        leftAccum += cell.offsetWidth;
+      } else {
+        const col = visibleColumns.find((c) => String(c.key) === key);
+        if (col?.pin === "left") {
+          newOffsets.set(key, { side: "left", offset: leftAccum });
+          leftAccum += cell.offsetWidth;
+        }
+      }
+    }
+    let rightAccum = 0;
+    for (let i = cells.length - 1; i >= 0; i--) {
+      const cell = cells[i];
+      const key = cell.dataset.colKey;
+      const col = visibleColumns.find((c) => String(c.key) === key);
+      if (col?.pin === "right") {
+        newOffsets.set(key, { side: "right", offset: rightAccum });
+        rightAccum += cell.offsetWidth;
+      }
+    }
+    setPinnedOffsets(newOffsets);
+  }, [visibleColumns, selectable]);
+  const isControlledSelection = controlledSelected !== void 0;
+  const [internalSelected, setInternalSelected] = useState(defaultSelectedRows);
+  const selectedSet = useMemo(
+    () => new Set(isControlledSelection ? controlledSelected : internalSelected),
+    [isControlledSelection, controlledSelected, internalSelected]
+  );
+  const getRowKey = (item, index) => {
+    if (rowKey) return String(item[rowKey]);
+    if ("id" in item) return String(item.id);
+    return String(index);
+  };
+  const rowsByKey = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    data.forEach((item, idx) => map.set(getRowKey(item, idx), item));
+    return map;
+  }, [data, rowKey]);
+  const selectedRowCacheRef = useRef(/* @__PURE__ */ new Map());
+  const rowsForKeys = (keys) => {
+    const cache = selectedRowCacheRef.current;
+    return keys.map((key) => rowsByKey.get(key) ?? cache.get(key)).filter((row) => row !== void 0);
+  };
+  useEffect(() => {
+    const cache = selectedRowCacheRef.current;
+    const next = /* @__PURE__ */ new Map();
+    selectedSet.forEach((key) => {
+      const row = rowsByKey.get(key) ?? cache.get(key);
+      if (row) next.set(key, row);
+    });
+    selectedRowCacheRef.current = next;
+  }, [rowsByKey, selectedSet]);
+  const commitSelection = (keys) => {
+    if (!isControlledSelection) setInternalSelected(keys);
+    onSelectionChange?.(keys, rowsForKeys(keys));
+  };
+  const toggleRow = (key) => {
+    const next = selectedSet.has(key) ? [...selectedSet].filter((k) => k !== key) : [...selectedSet, key];
+    commitSelection(next);
+  };
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const displayData = useMemo(() => {
+    if (!showPagination) return data;
+    const startIndex = (currentPage - 1) * currentPageSize;
+    return data.slice(startIndex, startIndex + currentPageSize);
+  }, [data, showPagination, currentPage, currentPageSize]);
+  const totalPages = Math.ceil(data.length / currentPageSize);
+  const selectAllKeys = useMemo(() => {
+    if (selectAllScope === "page") {
+      const offset = showPagination ? (currentPage - 1) * currentPageSize : 0;
+      return displayData.map((item, idx) => getRowKey(item, offset + idx));
+    }
+    return data.map((item, idx) => getRowKey(item, idx));
+  }, [selectAllScope, displayData, data, showPagination, currentPage, currentPageSize, rowKey]);
+  const allSelected = selectAllKeys.length > 0 && selectAllKeys.every((key) => selectedSet.has(key));
+  const someSelected = !allSelected && selectAllKeys.some((key) => selectedSet.has(key));
+  const toggleAll = () => {
+    const inScope = new Set(selectAllKeys);
+    commitSelection(
+      allSelected ? [...selectedSet].filter((key) => !inScope.has(key)) : [.../* @__PURE__ */ new Set([...selectedSet, ...selectAllKeys])]
+    );
+  };
+  const clearSelection = () => commitSelection([]);
+  const [isSelectingAllMatching, setIsSelectingAllMatching] = useState(false);
+  const totalItemCount = totalItems ?? data.length;
+  const holdsEveryRow = totalItemCount <= data.length;
+  const hasSelectedAllMatching = !holdsEveryRow && selectedSet.size >= totalItemCount;
+  const canSelectAllMatching = !!onSelectAllMatching && selectable && !holdsEveryRow && allSelected && !hasSelectedAllMatching;
+  const selectAllMatching = async () => {
+    if (!onSelectAllMatching) return;
+    setIsSelectingAllMatching(true);
+    try {
+      commitSelection(await onSelectAllMatching());
+    } catch (error) {
+      devWarn(
+        "table-select-all-matching-failed",
+        `Table: onSelectAllMatching() rejected, so the selection was left untouched. ${String(error)}`
+      );
+    } finally {
+      setIsSelectingAllMatching(false);
+    }
+  };
+  useEffect(() => {
+    if (!selectable || selectAllScope !== "all") return;
+    if (totalItems === void 0 || totalItems <= data.length) return;
+    devWarn(
+      `table-select-all-scope:${data.length}/${totalItems}`,
+      `Table: selectAllScope="all" can only select the ${data.length} row(s) in \`data\`, but \`totalItems\` is ${totalItems}. The keys of rows the table has never received cannot be known here - pass the full dataset, or use selectAllScope="page" to make the scope explicit.`
+    );
+  }, [selectable, selectAllScope, totalItems, data.length]);
+  const handleSort = (key) => {
+    const newDirection = currentSort?.key === key && currentSort?.direction === "asc" ? "desc" : "asc";
+    onSortChange?.(key, newDirection);
+  };
+  const handlePageChange = (page) => setCurrentPage(page);
+  const handlePageSizeChange = (newPageSize) => {
+    setCurrentPageSize(newPageSize);
+    setCurrentPage(1);
+  };
+  const hasSelection = selectedSet.size > 0;
+  const showToolbar = showFilters && !!onFiltersChange || showColumnVisibility || showExport || showDensity || selectable && (hasSelection || isCardView);
+  const selectedItems = useMemo(
+    () => rowsForKeys([...selectedSet]),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowsByKey, selectedSet]
+  );
+  const getCellValue = (item, column) => typeof column.key === "string" && column.key.includes(".") ? column.key.split(".").reduce(
+    (obj, k) => obj?.[k],
+    item
+  ) : item[column.key];
+  const renderCellContent = (item, column) => {
+    const value = getCellValue(item, column);
+    return column.render ? column.render(value, item) : String(value ?? "");
+  };
+  const getRawValue = (item, column) => String(getCellValue(item, column) ?? "");
+  const handleExportCsv = () => {
+    const headers = visibleColumns.map((c) => escapeCsvValue(c.label)).join(",");
+    const rows = data.map(
+      (item) => visibleColumns.map((col) => escapeCsvValue(getRawValue(item, col))).join(",")
+    );
+    const csv = [headers, ...rows].join("\n");
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "export.csv";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    const oldIndex = columnOrder.indexOf(activeId);
+    const newIndex = columnOrder.indexOf(overId);
+    if (oldIndex === -1 || newIndex === -1) return;
+    const newOrder = arrayMove(columnOrder, oldIndex, newIndex);
+    setColumnOrder(newOrder);
+    if (onColumnReorder) {
+      const orderMap = new Map(newOrder.map((key, idx) => [key, idx]));
+      const reordered = [...columns].sort((a, b) => {
+        const ai = orderMap.get(String(a.key)) ?? Infinity;
+        const bi = orderMap.get(String(b.key)) ?? Infinity;
+        return ai - bi;
+      });
+      onColumnReorder(reordered);
+    }
+  };
+  const getCellPinnedProps = (colKey) => {
+    const pinInfo = pinnedOffsets.get(colKey);
+    if (!pinInfo) return { style: {}, className: "" };
+    return {
+      style: {
+        position: "sticky",
+        [pinInfo.side]: pinInfo.offset,
+        zIndex: 1
+      },
+      className: pinInfo.side === "left" ? "eidos-table-cell--pinned-left" : "eidos-table-cell--pinned-right"
+    };
+  };
+  const getHeaderPinnedProps = (colKey) => {
+    const pinInfo = pinnedOffsets.get(colKey);
+    if (!pinInfo) return { style: {}, className: "" };
+    return {
+      style: {
+        position: "sticky",
+        [pinInfo.side]: pinInfo.offset,
+        zIndex: 3
+      },
+      className: pinInfo.side === "left" ? "eidos-table-header-cell--pinned-left" : "eidos-table-header-cell--pinned-right"
+    };
+  };
+  const densityClass = effectiveDensity !== "comfortable" ? `eidos-table--${effectiveDensity}` : "";
+  const effectivePageSizeOptions = useMemo(
+    () => pageSizeOptions.includes(currentPageSize) ? pageSizeOptions : [...pageSizeOptions, currentPageSize].sort((a, b) => a - b),
+    [pageSizeOptions, currentPageSize]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { ref: setContainerRef, className: `eidos-table-container ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "eidos-table-loading", children: [
+      /* @__PURE__ */ jsx(Spinner, { size: "md" }),
+      /* @__PURE__ */ jsx("p", { children: "Loading..." })
+    ] }) });
+  }
+  const densityPanel = /* @__PURE__ */ jsx("div", { className: "eidos-table-menu-panel", children: DENSITY_OPTIONS.map((option) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: [
+        "eidos-table-menu-item",
+        effectiveDensity === option.value ? "eidos-table-menu-item--active" : ""
+      ].filter(Boolean).join(" "),
+      onClick: () => setInternalDensity(option.value),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "eidos-table-menu-item-check", children: effectiveDensity === option.value && /* @__PURE__ */ jsx(Check, { size: 14 }) }),
+        /* @__PURE__ */ jsx("span", { children: option.label })
+      ]
+    },
+    option.value
+  )) });
+  const columnVisibilityPanel = /* @__PURE__ */ jsx("div", { className: "eidos-table-menu-panel", children: orderedColumns.map((col) => {
+    const key = String(col.key);
+    const isVisible = !hiddenColumnKeys.has(key);
+    const isLastVisible = visibleColumns.length === 1 && isVisible;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: ["eidos-table-menu-item", isVisible ? "eidos-table-menu-item--active" : ""].filter(Boolean).join(" "),
+        disabled: isLastVisible,
+        onClick: () => {
+          setHiddenColumnKeys((prev) => {
+            const next = new Set(prev);
+            if (next.has(key)) next.delete(key);
+            else next.add(key);
+            return next;
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isVisible,
+              disabled: isLastVisible,
+              size: "sm",
+              onChange: () => {
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: col.label })
+        ]
+      },
+      key
+    );
+  }) });
+  const sortableItems = visibleColumns.map((c) => String(c.key));
+  const emptyStateNode = Object.keys(filters).length > 0 ? /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: /* @__PURE__ */ jsx(SearchX, {}),
+      title: "No results found",
+      description: "Try adjusting your filters or search terms.",
+      action: onFiltersChange ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outlined",
+          color: "primary",
+          onClick: () => onFiltersChange({}),
+          children: "Clear filters"
+        }
+      ) : void 0,
+      size: "sm"
+    }
+  ) : /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: /* @__PURE__ */ jsx(FolderOpen, {}),
+      title: emptyMessage,
+      description: "There are no records to display.",
+      size: "sm"
+    }
+  );
+  const hasCardToolbar = selectable || !!cardHeaderColumn || !!cardSubheaderColumn || !!cardActionsColumn;
+  const cardsContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "eidos-table-cards",
+      style: { "--eidos-table-card-min-width": `${cardMinWidth}px` },
+      children: displayData.length > 0 ? displayData.map((item, rowIndex) => {
+        const globalIndex = showPagination ? (currentPage - 1) * currentPageSize + rowIndex : rowIndex;
+        const key = getRowKey(item, globalIndex);
+        const isSelected = selectedSet.has(key);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: [
+              "eidos-table-card",
+              onRowClick ? "eidos-table-card--clickable" : "",
+              isSelected ? "eidos-table-card--selected" : ""
+            ].filter(Boolean).join(" "),
+            onClick: () => onRowClick?.(item),
+            children: [
+              hasCardToolbar && /* @__PURE__ */ jsxs("div", { className: "eidos-table-card-toolbar", onClick: (e) => e.stopPropagation(), children: [
+                /* @__PURE__ */ jsx("div", { className: "eidos-table-card-toolbar-left", children: selectable && /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    size: "sm",
+                    checked: isSelected,
+                    onChange: () => toggleRow(key),
+                    "aria-label": `Select row ${globalIndex + 1}`
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "eidos-table-card-heading", children: [
+                  cardHeaderColumn && /* @__PURE__ */ jsx("span", { className: "eidos-table-card-heading-title", children: renderCellContent(item, cardHeaderColumn) }),
+                  cardSubheaderColumn && /* @__PURE__ */ jsx("span", { className: "eidos-table-card-heading-subtitle", children: renderCellContent(item, cardSubheaderColumn) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "eidos-table-card-toolbar-right", children: cardActionsColumn && renderCellContent(item, cardActionsColumn) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "eidos-table-card-fields", children: cardFieldColumns.map((column) => /* @__PURE__ */ jsxs("div", { className: "eidos-table-card-field", children: [
+                column.label && /* @__PURE__ */ jsx("span", { className: "eidos-table-card-field-label", children: column.label }),
+                /* @__PURE__ */ jsx("span", { className: "eidos-table-card-field-value", children: renderCellContent(item, column) })
+              ] }, String(column.key))) })
+            ]
+          },
+          key
+        );
+      }) : /* @__PURE__ */ jsx("div", { className: "eidos-table-card-empty", children: emptyStateNode })
+    }
+  );
+  const tableContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setContainerRef,
+      className: ["eidos-table-container", densityClass, className].filter(Boolean).join(" "),
+      children: [
+        showToolbar && /* @__PURE__ */ jsxs("div", { className: "eidos-table-toolbar", children: [
+          /* @__PURE__ */ jsxs("div", { className: "eidos-table-toolbar-left", children: [
+            selectable && isCardView && /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                size: "sm",
+                checked: allSelected,
+                indeterminate: someSelected,
+                onChange: toggleAll,
+                label: "Select all",
+                "aria-label": "Select all rows"
+              }
+            ),
+            selectable && hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { className: "eidos-table-selection-count", children: [
+                selectedSet.size,
+                " selected"
+              ] }),
+              canSelectAllMatching && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "text",
+                  size: "sm",
+                  loading: isSelectingAllMatching,
+                  onClick: () => void selectAllMatching(),
+                  children: `Select all ${totalItemCount}`
+                }
+              ),
+              hasSelectedAllMatching && /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", color: "secondary", onClick: clearSelection, children: "Clear selection" }),
+              bulkActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "eidos-table-bulk-actions", children: bulkActions.map((action) => {
+                const isDisabled = typeof action.disabled === "function" ? action.disabled(selectedItems) : action.disabled ?? false;
+                if (action.type === "split-button") {
+                  return /* @__PURE__ */ jsx(
+                    SplitButton,
+                    {
+                      size: "sm",
+                      variant: action.variant ?? "outlined",
+                      color: action.color ?? "secondary",
+                      preIcon: action.icon,
+                      disabled: isDisabled,
+                      label: action.label,
+                      onClick: () => action.onClick(selectedItems),
+                      options: action.options.map((option) => ({
+                        id: option.id,
+                        label: option.label,
+                        icon: option.icon,
+                        disabled: option.disabled,
+                        onClick: () => option.onClick(selectedItems)
+                      }))
+                    },
+                    action.id
+                  );
+                }
+                return action.label ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: action.variant ?? "outlined",
+                    color: action.color ?? "secondary",
+                    preIcon: action.icon,
+                    posIcon: action.posIcon,
+                    disabled: isDisabled,
+                    onClick: () => action.onClick(selectedItems),
+                    children: action.label
+                  },
+                  action.id
+                ) : action.icon ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: action.variant ?? "outlined",
+                    color: action.color ?? "secondary",
+                    icon: action.icon,
+                    disabled: isDisabled,
+                    onClick: () => action.onClick(selectedItems)
+                  },
+                  action.id
+                ) : null;
+              }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "eidos-table-toolbar-right", children: [
+            showDensity && /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                placement: "bottom",
+                align: "end",
+                autoWidth: false,
+                trigger: isCompactToolbar ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", icon: AlignJustify, tooltip: "Density" }) : /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", preIcon: AlignJustify, children: "Density" }),
+                content: densityPanel
+              }
+            ),
+            showColumnVisibility && /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                placement: "bottom",
+                align: "end",
+                autoWidth: false,
+                trigger: isCompactToolbar ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", icon: Columns3, tooltip: "Columns" }) : /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", preIcon: Columns3, children: "Columns" }),
+                content: columnVisibilityPanel
+              }
+            ),
+            showExport && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "text",
+                size: "sm",
+                icon: Download,
+                onClick: handleExportCsv,
+                tooltip: "Export CSV"
+              }
+            ),
+            showFilters && onFiltersChange && /* @__PURE__ */ jsx(
+              TableFiltersDropdown,
+              {
+                columns,
+                filters,
+                onFiltersChange,
+                defaultFilters
+              }
+            )
+          ] })
+        ] }),
+        isCardView ? cardsContent : (
+          /* Table wrapped for horizontal scroll */
+          /* @__PURE__ */ jsx("div", { className: "eidos-table-scroll", children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              className: [
+                "eidos-table",
+                densityClass,
+                draggableColumns ? "eidos-table--draggable-columns" : ""
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs("tr", { children: [
+                  selectable && /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      className: [
+                        "eidos-table-header-cell",
+                        "eidos-table-checkbox-cell",
+                        getHeaderPinnedProps("__checkbox__").className
+                      ].filter(Boolean).join(" "),
+                      style: getHeaderPinnedProps("__checkbox__").style,
+                      "data-col-key": "__checkbox__",
+                      children: /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          size: "sm",
+                          checked: allSelected,
+                          indeterminate: someSelected,
+                          onChange: toggleAll,
+                          "aria-label": "Select all rows"
+                        }
+                      )
+                    }
+                  ),
+                  draggableColumns ? visibleColumns.map((column) => {
+                    const colKey = String(column.key);
+                    const columnType = column.type || "data";
+                    const columnWidth = column.width;
+                    const isSortable = !!column.sortable;
+                    const isCurrentlySorted = currentSort?.key === colKey;
+                    const sortDirection = isCurrentlySorted ? currentSort.direction : null;
+                    const alignment = column.align || "left";
+                    const { style: pinnedStyle, className: pinnedClass } = getHeaderPinnedProps(colKey);
+                    return /* @__PURE__ */ jsx(
+                      SortableColumnHeader,
+                      {
+                        id: colKey,
+                        column,
+                        isSortable,
+                        isCurrentlySorted: !!isCurrentlySorted,
+                        sortDirection,
+                        alignment,
+                        columnType,
+                        columnWidth,
+                        pinnedClass,
+                        stickyStyle: pinnedStyle,
+                        onSortClick: () => handleSort(colKey)
+                      },
+                      colKey
+                    );
+                  }) : visibleColumns.map((column, index) => {
+                    const colKey = String(column.key);
+                    const columnType = column.type || "data";
+                    const columnWidth = column.width;
+                    const isSortable = column.sortable;
+                    const isCurrentlySorted = currentSort?.key === colKey;
+                    const sortDirection = isCurrentlySorted ? currentSort.direction : null;
+                    const alignment = column.align || "left";
+                    const alignmentClass = `eidos-table-align-${alignment}`;
+                    const { style: pinnedStyle, className: pinnedClass } = getHeaderPinnedProps(colKey);
+                    return /* @__PURE__ */ jsx(
+                      "th",
+                      {
+                        className: [
+                          "eidos-table-header-cell",
+                          `eidos-table-header-cell-${columnType}`,
+                          isSortable ? "eidos-table-sortable" : "",
+                          isCurrentlySorted ? "eidos-table-sorted" : "",
+                          alignmentClass,
+                          pinnedClass
+                        ].filter(Boolean).join(" "),
+                        style: { width: columnWidth, ...pinnedStyle },
+                        "data-col-key": colKey,
+                        onClick: () => isSortable && handleSort(colKey),
+                        children: /* @__PURE__ */ jsxs("div", { className: `eidos-table-header-content ${alignmentClass}`, children: [
+                          /* @__PURE__ */ jsx("span", { children: column.label }),
+                          isSortable && /* @__PURE__ */ jsxs("div", { className: "eidos-table-sort-indicator", children: [
+                            sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, { size: 14 }),
+                            sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { size: 14 }),
+                            !sortDirection && /* @__PURE__ */ jsx(ChevronsUpDown, { size: 14 })
+                          ] })
+                        ] })
+                      },
+                      index
+                    );
+                  })
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: displayData.length > 0 ? displayData.map((item, rowIndex) => {
+                  const globalIndex = showPagination ? (currentPage - 1) * currentPageSize + rowIndex : rowIndex;
+                  const key = getRowKey(item, globalIndex);
+                  const isSelected = selectedSet.has(key);
+                  return /* @__PURE__ */ jsxs(
+                    "tr",
+                    {
+                      className: [
+                        "eidos-table-row",
+                        onRowClick ? "eidos-table-clickable" : "",
+                        isSelected ? "eidos-table-row--selected" : ""
+                      ].filter(Boolean).join(" "),
+                      onClick: () => onRowClick?.(item),
+                      children: [
+                        selectable && /* @__PURE__ */ jsx(
+                          "td",
+                          {
+                            className: [
+                              "eidos-table-cell",
+                              "eidos-table-checkbox-cell",
+                              getCellPinnedProps("__checkbox__").className
+                            ].filter(Boolean).join(" "),
+                            style: getCellPinnedProps("__checkbox__").style,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggleRow(key);
+                            },
+                            children: /* @__PURE__ */ jsx("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+                              Checkbox,
+                              {
+                                size: "sm",
+                                checked: isSelected,
+                                onChange: () => toggleRow(key),
+                                "aria-label": `Select row ${globalIndex + 1}`
+                              }
+                            ) })
+                          }
+                        ),
+                        visibleColumns.map((column, colIndex) => {
+                          const colKey = String(column.key);
+                          const columnType = column.type || "data";
+                          const columnWidth = column.width;
+                          const alignment = column.align || "left";
+                          const alignmentClass = `eidos-table-align-${alignment}`;
+                          const { style: pinnedStyle, className: pinnedClass } = getCellPinnedProps(colKey);
+                          return /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              className: [
+                                "eidos-table-cell",
+                                `eidos-table-cell-${columnType}`,
+                                alignmentClass,
+                                pinnedClass
+                              ].filter(Boolean).join(" "),
+                              style: { width: columnWidth, ...pinnedStyle },
+                              onClick: columnType === "action" ? (e) => e.stopPropagation() : void 0,
+                              children: renderCellContent(item, column)
+                            },
+                            colIndex
+                          );
+                        })
+                      ]
+                    },
+                    key
+                  );
+                }) : /* @__PURE__ */ jsx("tr", { className: "eidos-table-empty-row", children: /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    colSpan: selectable ? visibleColumns.length + 1 : visibleColumns.length,
+                    className: "eidos-table-cell eidos-table-empty-cell",
+                    children: emptyStateNode
+                  }
+                ) }) })
+              ]
+            }
+          ) })
+        ),
+        showFooter && /* @__PURE__ */ jsx("div", { className: "eidos-table-footer", children: /* @__PURE__ */ jsx("div", { className: "eidos-table-footer-content", children: showPagination && data.length > 0 ? /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            page: currentPage,
+            totalPages,
+            onChange: handlePageChange,
+            totalItems: totalItems ?? data.length,
+            pageSize: currentPageSize,
+            onPageSizeChange: handlePageSizeChange,
+            pageSizeOptions: effectivePageSizeOptions,
+            size: "sm"
+          }
+        ) : /* @__PURE__ */ jsxs("span", { className: "eidos-table-results-info", children: [
+          "Showing ",
+          data.length,
+          " of ",
+          totalItems ?? data.length,
+          " results"
+        ] }) }) })
+      ]
+    }
+  );
+  if (draggableColumns) {
+    return /* @__PURE__ */ jsx(DndContext, { sensors, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: sortableItems, strategy: horizontalListSortingStrategy, children: tableContent }) });
+  }
+  return tableContent;
+};
+
+export {
+  Table
+};
+//# sourceMappingURL=chunk-ZEZK664O.js.map