eidos-ui 0.1.0

package/dist/chunk-NDLMU6HJ.js

@@ -0,0 +1,744 @@
+import {
+  CSS,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  SortableContext,
+  TableFiltersDropdown,
+  arrayMove,
+  horizontalListSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSensor,
+  useSensors,
+  useSortable
+} from "./chunk-E3XATJ63.js";
+import {
+  Spinner
+} from "./chunk-6USUVU6J.js";
+import {
+  SplitButton
+} from "./chunk-E2B33QB7.js";
+import {
+  Pagination
+} from "./chunk-P6ZBENAG.js";
+import {
+  EmptyState
+} from "./chunk-DK4S3EHG.js";
+import {
+  Checkbox
+} from "./chunk-XJBMEDQ5.js";
+import {
+  Dropdown
+} from "./chunk-SXF3TCYA.js";
+import {
+  Button
+} from "./chunk-FO5FNTJX.js";
+
+// src/components/Table/Table.component.tsx
+import { useState, useMemo, useLayoutEffect, useRef } from "react";
+import {
+  ChevronsUpDown,
+  ArrowUp,
+  ArrowDown,
+  X,
+  Check,
+  Download,
+  Columns3,
+  AlignJustify,
+  GripVertical,
+  FolderOpen,
+  SearchX
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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,
+  bulkActions = [],
+  // New features
+  density = "comfortable",
+  showDensity = false,
+  showColumnVisibility = false,
+  showExport = false,
+  draggableColumns = false,
+  onColumnReorder
+}) => {
+  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 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 commitSelection = (keys) => {
+    if (!isControlledSelection) setInternalSelected(keys);
+    const rows = data.filter((item, idx) => keys.includes(getRowKey(item, idx)));
+    onSelectionChange?.(keys, rows);
+  };
+  const toggleRow = (key) => {
+    const next = selectedSet.has(key) ? [...selectedSet].filter((k) => k !== key) : [...selectedSet, key];
+    commitSelection(next);
+  };
+  const allKeys = useMemo(
+    () => data.map((item, idx) => getRowKey(item, idx)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, rowKey]
+  );
+  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
+  const someSelected = !allSelected && allKeys.some((k) => selectedSet.has(k));
+  const toggleAll = () => {
+    commitSelection(allSelected ? [] : allKeys);
+  };
+  const clearSelection = () => commitSelection([]);
+  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 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;
+  const selectedItems = useMemo(
+    () => data.filter((item, idx) => selectedSet.has(getRowKey(item, idx))),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, selectedSet, rowKey]
+  );
+  const getRawValue = (item, column) => {
+    const value = typeof column.key === "string" && column.key.includes(".") ? column.key.split(".").reduce(
+      (obj, k) => obj?.[k],
+      item
+    ) : item[column.key];
+    return String(value ?? "");
+  };
+  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}` : "";
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { 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 tableContent = /* @__PURE__ */ jsxs("div", { className: `eidos-table-container ${className || ""}`, children: [
+    showToolbar && /* @__PURE__ */ jsxs("div", { className: "eidos-table-toolbar", children: [
+      /* @__PURE__ */ jsx("div", { className: "eidos-table-toolbar-left", children: selectable && hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "eidos-table-selection-count", children: [
+          selectedSet.size,
+          " selected"
+        ] }),
+        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__ */ jsx(
+          "button",
+          {
+            className: "eidos-table-clear-selection",
+            onClick: clearSelection,
+            "aria-label": "Clear selection",
+            children: /* @__PURE__ */ jsx(X, { size: 14 })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "eidos-table-toolbar-right", children: [
+        showDensity && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            placement: "bottom",
+            align: "end",
+            autoWidth: false,
+            trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", preIcon: AlignJustify, children: "Density" }),
+            content: densityPanel
+          }
+        ),
+        showColumnVisibility && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            placement: "bottom",
+            align: "end",
+            autoWidth: false,
+            trigger: /* @__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
+          }
+        )
+      ] })
+    ] }),
+    /* @__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.type === "icon" ? "var(--component-size-lg)" : 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.type === "icon" ? "var(--component-size-lg)" : 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 value = typeof column.key === "string" && column.key.includes(".") ? column.key.split(".").reduce(
+                      (obj, k) => obj?.[k],
+                      item
+                    ) : item[column.key];
+                    const columnType = column.type || "data";
+                    const columnWidth = column.type === "icon" ? "var(--component-size-lg)" : 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: column.render ? column.render(value, item) : String(value ?? "")
+                      },
+                      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: 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"
+                }
+              )
+            }
+          ) }) })
+        ]
+      }
+    ) }),
+    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,
+        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-NDLMU6HJ.js.map