@mdigital_ui/ui 0.4.0 → 0.4.2

package/dist/chunk-TLNHWOQQ.js

@@ -0,0 +1,1026 @@
+import { toggle_group_default } from './chunk-ERRZ2CSG.js';
+import { pagination_default } from './chunk-HUXODBIO.js';
+import { input_default } from './chunk-KH577UDI.js';
+import { checkbox_default } from './chunk-I32ZQUYY.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-C5IGZLIT.js';
+import { button_default } from './chunk-RFHTC6AH.js';
+import { iconSizes, cn } from './chunk-NGYLRX6F.js';
+import { useReactTable, getGroupedRowModel, getExpandedRowModel, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ChevronDown, ChevronRight, PinOff, Pin, Search, Columns3, ChevronsUpDown, Inbox } from 'lucide-react';
+import React, { useState, useRef, useMemo, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function EditableCell({
+  value,
+  onValueChange,
+  size = "md",
+  className
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(String(value ?? ""));
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  useEffect(() => {
+    setEditValue(String(value ?? ""));
+  }, [value]);
+  const handleSave = () => {
+    setIsEditing(false);
+    if (editValue !== String(value ?? "")) {
+      onValueChange(editValue);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSave();
+    } else if (e.key === "Escape") {
+      setEditValue(String(value ?? ""));
+      setIsEditing(false);
+    }
+  };
+  const sizeClasses = {
+    xs: "text-xs py-0.5",
+    sm: "text-sm py-1",
+    md: "text-base py-1.5",
+    lg: "text-lg py-2"
+  };
+  const inputSizeMap = {
+    xs: "sm",
+    sm: "sm",
+    md: "md",
+    lg: "lg"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("table_editableCell relative w-full max-w-full overflow-hidden", className),
+      children: isEditing ? /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        input_default,
+        {
+          ref: inputRef,
+          type: "text",
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          onBlur: handleSave,
+          onKeyDown: handleKeyDown,
+          size: inputSizeMap[size],
+          className: "w-full min-w-0 max-w-full"
+        }
+      ) }) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: () => setIsEditing(true),
+          className: cn(
+            "cursor-text hover:bg-surface/50 rounded transition-colors min-h-[20px] px-3 w-full overflow-hidden text-ellipsis whitespace-nowrap",
+            sizeClasses[size]
+          ),
+          title: "Click to edit",
+          children: String(value ?? "")
+        }
+      )
+    }
+  );
+}
+EditableCell.displayName = "EditableCell";
+function TableActions({
+  searchValue,
+  onSearchChange,
+  visibleColumns,
+  allColumns,
+  onVisibleColumnsChange,
+  size,
+  onSizeChange,
+  color = "default",
+  className
+}) {
+  const handleColumnToggle = (columnId) => {
+    if (visibleColumns.includes(columnId)) {
+      onVisibleColumnsChange(visibleColumns.filter((id) => id !== columnId));
+    } else {
+      onVisibleColumnsChange([...visibleColumns, columnId]);
+    }
+  };
+  const sizeOptions = [
+    { value: "sm", label: "SM" },
+    { value: "md", label: "MD" },
+    { value: "lg", label: "LG" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: cn("table_actions flex flex-wrap items-center gap-4 rounded-md", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "w-auto mr-auto", children: /* @__PURE__ */ jsx(
+      input_default,
+      {
+        type: "text",
+        placeholder: "Search...",
+        value: searchValue,
+        onChange: (e) => onSearchChange(e.target.value),
+        size: "sm",
+        rightIcon: /* @__PURE__ */ jsx(Search, { className: iconSizes[size] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        button_default,
+        {
+          variant: "outline",
+          size: "sm",
+          leftIcon: /* @__PURE__ */ jsx(Columns3, { className: iconSizes[size] }),
+          children: "Columns"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-56 p-2", children: /* @__PURE__ */ jsx("div", { className: "space-y-1 max-h-[300px] overflow-y-auto", children: allColumns.map((col) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex items-center gap-2 px-3 py-2 hover:bg-surface rounded cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx(
+              checkbox_default,
+              {
+                checked: visibleColumns.includes(col.id),
+                onChange: () => handleColumnToggle(col.id),
+                color: color === "default" ? "primary" : color,
+                size: "sm"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-text-primary", children: col.label })
+          ]
+        },
+        col.id
+      )) }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      toggle_group_default,
+      {
+        options: sizeOptions,
+        value: size,
+        onChange: (value) => onSizeChange(value),
+        color,
+        size: "sm",
+        variant: "default"
+      }
+    )
+  ] });
+}
+TableActions.displayName = "TableActions";
+var cellVariants = cva("text-left transition-colors", {
+  variants: {
+    size: {
+      xs: "px-2 py-1 text-xs",
+      sm: "px-3 py-2 text-sm",
+      md: "px-4 py-3 text-base",
+      lg: "px-6 py-4 text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var TableCell = ({
+  size = "md",
+  bordered = false,
+  fixed,
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(
+        "table_cell",
+        cellVariants({ size }),
+        "text-text-primary",
+        bordered && "border-r border-border last:border-r-0",
+        fixed === "left" && "sticky left-0 bg-background z-10",
+        fixed === "right" && "sticky right-0 bg-background z-10",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+TableCell.displayName = "TableCell";
+function TableHeaderCell({
+  header,
+  size = "md",
+  variant = "outline",
+  color = "default",
+  bordered = false,
+  enableColumnPinning = false,
+  className,
+  ...props
+}) {
+  const isPinnedLeft = header.column.getIsPinned() === "left";
+  const isPinnedRight = header.column.getIsPinned() === "right";
+  const colorHoverClasses = {
+    default: "hover:bg-surface",
+    primary: "hover:bg-primary/10",
+    secondary: "hover:bg-secondary/10",
+    accent: "hover:bg-accent/10",
+    success: "hover:bg-success/10",
+    error: "hover:bg-error/10",
+    warning: "hover:bg-warning/10",
+    info: "hover:bg-info/10"
+  };
+  const colorIconClasses = {
+    default: "text-text-primary",
+    primary: "text-primary",
+    secondary: "text-secondary",
+    accent: "text-accent",
+    success: "text-success",
+    error: "text-error",
+    warning: "text-warning",
+    info: "text-info"
+  };
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        "table_headerCell",
+        cellVariants({ size }),
+        "font-semibold text-text-primary border-b border-border relative group",
+        variant === "line" && "border-b-2",
+        bordered && "border-r border-border last:border-r-0",
+        header.column.getCanSort() && "cursor-pointer select-none hover:bg-background",
+        isPinnedLeft && "sticky left-0 bg-surface z-20",
+        isPinnedRight && "sticky right-0 bg-surface z-20",
+        className
+      ),
+      onClick: header.column.getToggleSortingHandler(),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: header.isPlaceholder ? null : typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          header.column.getCanSort() && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                header.column.toggleSorting();
+              },
+              className: cn(
+                "p-1 rounded transition-[colors,opacity]",
+                header.column.getIsSorted() ? `opacity-100 ${colorHoverClasses[color]}` : `opacity-0 group-hover:opacity-100 ${colorHoverClasses[color]}`,
+                header.column.getIsSorted() && colorIconClasses[color]
+              ),
+              children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 rotate-180" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "w-3.5 h-3.5" })
+            }
+          ),
+          enableColumnPinning && header.column.getCanPin() && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                const isPinned = header.column.getIsPinned();
+                if (isPinned) {
+                  header.column.pin(false);
+                } else {
+                  header.column.pin("left");
+                }
+              },
+              className: cn(
+                "p-1 rounded transition-[colors,opacity]",
+                isPinnedLeft || isPinnedRight ? `opacity-100 ${colorHoverClasses[color]} ${colorIconClasses[color]}` : `opacity-0 group-hover:opacity-100 ${colorHoverClasses[color]}`
+              ),
+              children: isPinnedLeft || isPinnedRight ? /* @__PURE__ */ jsx(PinOff, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(Pin, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+TableHeaderCell.displayName = "TableHeaderCell";
+function TableRow({
+  row,
+  index,
+  striped = false,
+  hoverable = true,
+  onRowClick,
+  isPinned = false,
+  isExpanded = false,
+  className,
+  children,
+  ...props
+}) {
+  const handleKeyDown = (e) => {
+    if (onRowClick && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onRowClick(row.original);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        "table_row border-b border-border last:border-b-0 transition-colors duration-150",
+        striped && index % 2 === 1 && "bg-surface/50",
+        hoverable && "hover:bg-surface cursor-pointer",
+        onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary",
+        isPinned && "bg-primary/5 border-primary/20",
+        row.getIsSelected() && "bg-primary/10",
+        className
+      ),
+      onClick: () => onRowClick?.(row.original),
+      onKeyDown: handleKeyDown,
+      tabIndex: onRowClick ? 0 : void 0,
+      role: onRowClick ? "button" : void 0,
+      ...props,
+      children
+    }
+  );
+}
+TableRow.displayName = "TableRow";
+var TableSkeleton = ({
+  rows = 5,
+  columns,
+  size = "md",
+  className
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn("table_skeleton border-b border-border", className),
+      children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cn(cellVariants({ size })),
+          children: /* @__PURE__ */ jsx("div", { className: "animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-surface rounded w-full" }) })
+        },
+        colIndex
+      ))
+    },
+    rowIndex
+  )) });
+};
+TableSkeleton.displayName = "TableSkeleton";
+function TableComponent({
+  data,
+  columns,
+  columnGroups,
+  caption,
+  showCaption = false,
+  "aria-label": ariaLabel,
+  variant = "outline",
+  size: initialSize = "md",
+  color = "default",
+  striped = false,
+  hoverable = true,
+  bordered = false,
+  enableSorting = true,
+  enableFiltering = false,
+  enablePagination = false,
+  enableRowSelection = false,
+  enableMultiRowSelection = true,
+  enableRowPinning = false,
+  enableExpandable = false,
+  enableGrouping = false,
+  enableVirtualization = false,
+  enableClickToSelect = false,
+  enableColumnPinning = false,
+  enableActions = false,
+  paginationPosition = "bottomcenter",
+  expandedContent,
+  footer,
+  emptyState,
+  loading = false,
+  loadingRows = 5,
+  pageSize = 10,
+  pageSizeOptions = [5, 10, 20, 50],
+  onRowClick,
+  onSelectionChange,
+  onCellEdit,
+  pinnedRowIds = [],
+  onPinnedRowsChange,
+  className,
+  classNames
+}) {
+  const [sorting, setSorting] = useState([]);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [rowSelection, setRowSelection] = useState({});
+  const [expanded, setExpanded] = useState({});
+  const [grouping, setGrouping] = useState([]);
+  const [pinnedRows, setPinnedRows] = useState(pinnedRowIds);
+  const [columnPinning, setColumnPinning] = useState({
+    left: [],
+    right: []
+  });
+  const [columnVisibility, setColumnVisibility] = useState({});
+  const [searchValue, setSearchValue] = useState("");
+  const [size, setSize] = useState(initialSize);
+  const tableContainerRef = useRef(null);
+  const prevAutoPinnedIdsRef = useRef("");
+  const autoPinnedIds = useMemo(() => {
+    if (!enableRowPinning || data.length === 0) return [];
+    return data.map((row, index) => ({ row, id: String(index) })).filter(({ row }) => row.pin === true).map(({ id }) => id);
+  }, [data, enableRowPinning]);
+  useEffect(() => {
+    if (autoPinnedIds.length > 0) {
+      const combinedPinnedIds = [
+        .../* @__PURE__ */ new Set([...pinnedRowIds, ...autoPinnedIds])
+      ];
+      const autoPinnedIdsStr = autoPinnedIds.sort().join(",");
+      if (autoPinnedIdsStr !== prevAutoPinnedIdsRef.current) {
+        prevAutoPinnedIdsRef.current = autoPinnedIdsStr;
+        setPinnedRows(combinedPinnedIds);
+      }
+    }
+  }, [autoPinnedIds, pinnedRowIds]);
+  useEffect(() => {
+    if (enableColumnPinning && columns.length > 0) {
+      const leftPinned = columns.filter((col) => col.pin === "left").map(
+        (col) => col.id || col.accessorKey
+      );
+      const rightPinned = columns.filter((col) => col.pin === "right").map(
+        (col) => col.id || col.accessorKey
+      );
+      if (leftPinned.length > 0 || rightPinned.length > 0) {
+        setColumnPinning({
+          left: leftPinned,
+          right: rightPinned
+        });
+      }
+    }
+  }, [columns, enableColumnPinning]);
+  const enhancedColumns = useMemo(
+    () => enableRowSelection ? [
+      {
+        id: "select",
+        header: ({ table: table2 }) => enableMultiRowSelection ? /* @__PURE__ */ jsx(
+          checkbox_default,
+          {
+            checked: table2.getIsAllRowsSelected(),
+            indeterminate: table2.getIsSomeRowsSelected(),
+            onChange: table2.getToggleAllRowsSelectedHandler(),
+            size: "sm"
+          }
+        ) : null,
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          checkbox_default,
+          {
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            onChange: row.getToggleSelectedHandler(),
+            size: "sm"
+          }
+        ),
+        size: 50
+      },
+      ...columns
+    ] : columns,
+    [columns, enableRowSelection, enableMultiRowSelection]
+  );
+  const finalColumns = useMemo(
+    () => enableExpandable ? [
+      {
+        id: "expand",
+        header: () => null,
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              row.toggleExpanded();
+            },
+            className: "text-text-secondary hover:text-text-primary transition-colors",
+            "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+            "aria-expanded": row.getIsExpanded(),
+            children: row.getIsExpanded() ? /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: iconSizes[size],
+                "aria-hidden": "true"
+              }
+            ) : /* @__PURE__ */ jsx(
+              ChevronRight,
+              {
+                className: iconSizes[size],
+                "aria-hidden": "true"
+              }
+            )
+          }
+        ),
+        size: 50
+      },
+      ...enhancedColumns
+    ] : enhancedColumns,
+    [enhancedColumns, enableExpandable, size]
+  );
+  const columnsWithPinning = useMemo(
+    () => enableRowPinning ? [
+      ...finalColumns,
+      {
+        id: "pin",
+        header: () => /* @__PURE__ */ jsx(Pin, { className: "w-4 h-4 text-text-secondary" }),
+        cell: ({ row }) => {
+          const rowId = row.id;
+          const isPinned = pinnedRows.includes(rowId);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                const newPinnedRows = isPinned ? pinnedRows.filter((id) => id !== rowId) : [...pinnedRows, rowId];
+                setPinnedRows(newPinnedRows);
+                onPinnedRowsChange?.(newPinnedRows);
+              },
+              className: cn(
+                "text-text-secondary hover:text-text-primary transition-colors",
+                isPinned && "text-primary"
+              ),
+              "aria-label": isPinned ? "Unpin row" : "Pin row",
+              "aria-pressed": isPinned,
+              children: isPinned ? /* @__PURE__ */ jsx(
+                PinOff,
+                {
+                  className: iconSizes[size],
+                  "aria-hidden": "true"
+                }
+              ) : /* @__PURE__ */ jsx(
+                Pin,
+                {
+                  className: iconSizes[size],
+                  "aria-hidden": "true"
+                }
+              )
+            }
+          );
+        },
+        size: 50
+      }
+    ] : finalColumns,
+    [finalColumns, enableRowPinning, pinnedRows, onPinnedRowsChange, size]
+  );
+  const columnsWithEditable = useMemo(
+    () => columnsWithPinning.map((col) => {
+      const colAny = col;
+      if (colAny.editable && onCellEdit) {
+        return {
+          ...col,
+          cell: ({ row, getValue }) => {
+            const value = getValue?.() ?? row.original[colAny.accessorKey];
+            return /* @__PURE__ */ jsx(
+              EditableCell,
+              {
+                value,
+                size,
+                onValueChange: (newValue) => {
+                  onCellEdit({
+                    rowIndex: row.index,
+                    columnId: colAny.id || colAny.accessorKey,
+                    value: newValue,
+                    row: row.original
+                  });
+                }
+              }
+            );
+          }
+        };
+      }
+      return col;
+    }),
+    [columnsWithPinning, onCellEdit, size]
+  );
+  const filteredData = useMemo(() => {
+    if (!enableActions || !searchValue.trim()) {
+      return data;
+    }
+    const searchLower = searchValue.toLowerCase();
+    return data.filter((row) => {
+      return Object.values(row).some(
+        (value) => String(value).toLowerCase().includes(searchLower)
+      );
+    });
+  }, [data, searchValue, enableActions]);
+  const allColumnsList = useMemo(() => {
+    return columns.map((col) => {
+      const colAny = col;
+      return {
+        id: col.id || colAny.accessorKey,
+        label: typeof colAny.header === "string" ? colAny.header : col.id || colAny.accessorKey
+      };
+    });
+  }, [columns]);
+  const visibleColumnIds = useMemo(() => {
+    return Object.keys(columnVisibility).length === 0 ? allColumnsList.map((c) => c.id) : allColumnsList.filter((c) => columnVisibility[c.id] !== false).map((c) => c.id);
+  }, [columnVisibility, allColumnsList]);
+  const table = useReactTable({
+    data: filteredData,
+    columns: columnsWithEditable,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
+    getFilteredRowModel: enableFiltering ? getFilteredRowModel() : void 0,
+    getPaginationRowModel: enablePagination && !enableVirtualization ? getPaginationRowModel() : void 0,
+    getExpandedRowModel: enableExpandable ? getExpandedRowModel() : void 0,
+    getGroupedRowModel: enableGrouping ? getGroupedRowModel() : void 0,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: setRowSelection,
+    onExpandedChange: setExpanded,
+    onGroupingChange: setGrouping,
+    onColumnPinningChange: setColumnPinning,
+    onColumnVisibilityChange: setColumnVisibility,
+    enableRowSelection,
+    enableMultiRowSelection,
+    enableGrouping,
+    enableColumnPinning,
+    getRowCanExpand: enableExpandable ? () => true : void 0,
+    state: {
+      sorting,
+      columnFilters,
+      rowSelection,
+      expanded,
+      grouping,
+      columnPinning,
+      columnVisibility
+    },
+    initialState: {
+      pagination: {
+        pageSize
+      }
+    }
+  });
+  useEffect(() => {
+    if (onSelectionChange) {
+      const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
+      onSelectionChange(selectedRows);
+    }
+  }, [rowSelection, onSelectionChange]);
+  const rows = table.getRowModel().rows;
+  const allRowsOrdered = useMemo(() => {
+    const pinned = rows.filter((row) => pinnedRows.includes(row.id));
+    const unpinned = rows.filter((row) => !pinnedRows.includes(row.id));
+    return [...pinned, ...unpinned];
+  }, [rows, pinnedRows]);
+  const rowVirtualizer = useVirtualizer({
+    count: allRowsOrdered.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => size === "sm" ? 44 : size === "lg" ? 68 : 56,
+    overscan: 5,
+    enabled: enableVirtualization
+  });
+  const handleRowClick = (row, rowData) => {
+    if (enableClickToSelect && enableRowSelection) {
+      row.toggleSelected();
+    }
+    onRowClick?.(rowData);
+  };
+  const renderColumnGroups = () => {
+    if (!columnGroups || columnGroups.length === 0) return null;
+    const headerGroups = table.getHeaderGroups()[0];
+    if (!headerGroups) return null;
+    const groupedHeaders = [];
+    const processedCols = /* @__PURE__ */ new Set();
+    headerGroups.headers.forEach((header, index) => {
+      const colId = header.column.id;
+      if (processedCols.has(colId)) return;
+      const group = columnGroups.find((g) => g.columns.includes(colId));
+      if (group) {
+        group.columns.forEach((c) => processedCols.add(c));
+        groupedHeaders.push({
+          header: group.header,
+          span: group.columns.length,
+          startIndex: index
+        });
+      } else {
+        groupedHeaders.push({
+          header: "",
+          span: 1,
+          startIndex: index
+        });
+      }
+    });
+    return /* @__PURE__ */ jsx("tr", { className: "border-b border-border", children: groupedHeaders.map((group, idx) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        colSpan: group.span,
+        className: cn(
+          cellVariants({ size }),
+          "font-bold text-text-primary bg-surface/70 border-border text-center",
+          bordered && "border-r border-border last:border-r-0"
+        ),
+        children: group.header
+      },
+      idx
+    )) });
+  };
+  const renderRows = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(
+        TableSkeleton,
+        {
+          rows: loadingRows,
+          columns: columnsWithPinning.length,
+          size,
+          className: classNames?.skeleton
+        }
+      );
+    }
+    if (allRowsOrdered.length === 0) {
+      return /* @__PURE__ */ jsx("tr", { className: "table_empty", children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: columnsWithPinning.length,
+          className: cn("px-4 py-12 text-center", classNames?.empty),
+          children: emptyState || /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-text-secondary", children: [
+            /* @__PURE__ */ jsx(Inbox, { className: "w-12 h-12 opacity-20" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No data available" })
+          ] })
+        }
+      ) });
+    }
+    if (enableVirtualization) {
+      const virtualRows = rowVirtualizer.getVirtualItems();
+      const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start || 0 : 0;
+      const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end || 0) : 0;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        paddingTop > 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: columnsWithPinning.length,
+            style: { height: `${paddingTop}px`, padding: 0, border: 0 }
+          }
+        ) }),
+        virtualRows.map((virtualRow) => {
+          const row = allRowsOrdered[virtualRow.index];
+          if (!row) return null;
+          const isLastVirtualRow = virtualRow.index === allRowsOrdered.length - 1;
+          return /* @__PURE__ */ jsx(
+            TableRow,
+            {
+              row,
+              index: virtualRow.index,
+              striped,
+              hoverable,
+              onRowClick: () => handleRowClick(row, row.original),
+              isPinned: pinnedRows.includes(row.id),
+              className: cn(isLastVirtualRow && "border-b-0", classNames?.row),
+              children: row.getVisibleCells().map((cell) => {
+                const isPinnedLeft = cell.column.getIsPinned() === "left";
+                const isPinnedRight = cell.column.getIsPinned() === "right";
+                return /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    size,
+                    bordered,
+                    fixed: isPinnedLeft ? "left" : isPinnedRight ? "right" : void 0,
+                    className: classNames?.cell,
+                    children: cell.getIsGrouped() ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            row.toggleExpanded();
+                          },
+                          className: "text-text-secondary hover:text-text-primary",
+                          "aria-label": row.getIsExpanded() ? "Collapse group" : "Expand group",
+                          "aria-expanded": row.getIsExpanded(),
+                          children: row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDown, { className: iconSizes[size], "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: iconSizes[size], "aria-hidden": "true" })
+                        }
+                      ),
+                      flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      ),
+                      " ",
+                      "(",
+                      row.subRows.length,
+                      ")"
+                    ] }) : cell.getIsAggregated() ? flexRender(
+                      cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) : cell.getIsPlaceholder() ? null : flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )
+                  },
+                  cell.id
+                );
+              })
+            },
+            row.id
+          );
+        }),
+        paddingBottom > 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: columnsWithPinning.length,
+            style: { height: `${paddingBottom}px`, padding: 0, border: 0 }
+          }
+        ) })
+      ] });
+    }
+    return allRowsOrdered.map((row, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          row,
+          index,
+          striped,
+          hoverable,
+          onRowClick: () => handleRowClick(row, row.original),
+          isPinned: pinnedRows.includes(row.id),
+          className: classNames?.row,
+          children: row.getVisibleCells().map((cell) => {
+            const isPinnedLeft = cell.column.getIsPinned() === "left";
+            const isPinnedRight = cell.column.getIsPinned() === "right";
+            return /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                size,
+                bordered,
+                fixed: isPinnedLeft ? "left" : isPinnedRight ? "right" : void 0,
+                className: classNames?.cell,
+                children: cell.getIsGrouped() ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        row.toggleExpanded();
+                      },
+                      className: "text-text-secondary hover:text-text-primary",
+                      "aria-label": row.getIsExpanded() ? "Collapse group" : "Expand group",
+                      "aria-expanded": row.getIsExpanded(),
+                      children: row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDown, { className: iconSizes[size], "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: iconSizes[size], "aria-hidden": "true" })
+                    }
+                  ),
+                  flexRender(cell.column.columnDef.cell, cell.getContext()),
+                  " ",
+                  "(",
+                  row.subRows.length,
+                  ")"
+                ] }) : cell.getIsAggregated() ? flexRender(
+                  cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,
+                  cell.getContext()
+                ) : cell.getIsPlaceholder() ? null : flexRender(cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            );
+          })
+        }
+      ),
+      enableExpandable && row.getIsExpanded() && expandedContent && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: row.getVisibleCells().length,
+          className: "bg-surface/30 border-b border-border p-4",
+          children: expandedContent(row)
+        }
+      ) })
+    ] }, row.id));
+  };
+  const renderPagination = () => {
+    if (!enablePagination || table.getPageCount() === 0 || loading || enableVirtualization) {
+      return null;
+    }
+    const getPaginationPositionClasses = () => {
+      const positionClasses = {
+        topleft: "justify-start",
+        topcenter: "w-full justify-between",
+        topright: "justify-end",
+        bottomleft: "justify-start",
+        bottomcenter: "w-full justify-between",
+        bottomright: "justify-end"
+      };
+      return positionClasses[paginationPosition];
+    };
+    return /* @__PURE__ */ jsx(
+      pagination_default,
+      {
+        total: table.getFilteredRowModel().rows.length,
+        current: table.getState().pagination.pageIndex + 1,
+        pageSize: table.getState().pagination.pageSize,
+        onChange: (page, pageSize2) => {
+          table.setPageIndex(page - 1);
+          table.setPageSize(pageSize2);
+        },
+        showSizeChanger: true,
+        pageSizeOptions,
+        showTotal: (total, range) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Showing ",
+          range[0],
+          "-",
+          range[1],
+          " of ",
+          total,
+          " rows"
+        ] }),
+        color,
+        size: "sm",
+        className: cn("table_pagination flex", getPaginationPositionClasses(), classNames?.pagination)
+      }
+    );
+  };
+  const shouldShowTopPagination = paginationPosition.startsWith("top");
+  const shouldShowBottomPagination = paginationPosition.startsWith("bottom");
+  const handleVisibleColumnsChange = (newVisibleColumns) => {
+    const newVisibility = {};
+    allColumnsList.forEach((col) => {
+      newVisibility[col.id] = newVisibleColumns.includes(col.id);
+    });
+    setColumnVisibility(newVisibility);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("table_root w-full space-y-4", classNames?.root), children: [
+    enableActions && /* @__PURE__ */ jsx(
+      TableActions,
+      {
+        searchValue,
+        onSearchChange: setSearchValue,
+        visibleColumns: visibleColumnIds,
+        allColumns: allColumnsList,
+        onVisibleColumnsChange: handleVisibleColumnsChange,
+        size,
+        onSizeChange: setSize,
+        color,
+        className: classNames?.actions
+      }
+    ),
+    shouldShowTopPagination && renderPagination(),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tableContainerRef,
+        className: cn(
+          "table_wrapper overflow-auto rounded-md",
+          enableVirtualization && "max-h-[500px]",
+          variant === "outline" && "border border-border",
+          classNames?.wrapper
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: cn(
+              "w-full border-collapse",
+              variant === "line" && "border-0",
+              variant === "ghost" && "border-0",
+              className
+            ),
+            "aria-label": ariaLabel,
+            children: [
+              caption && /* @__PURE__ */ jsx("caption", { className: cn(!showCaption && "sr-only"), children: caption }),
+              /* @__PURE__ */ jsxs("thead", { className: cn("table_header bg-surface sticky top-0 z-30", classNames?.header), children: [
+                renderColumnGroups(),
+                table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: cn("table_headerRow", classNames?.headerRow), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                  TableHeaderCell,
+                  {
+                    header,
+                    size,
+                    variant,
+                    color,
+                    bordered,
+                    enableColumnPinning,
+                    className: classNames?.headerCell
+                  },
+                  header.id
+                )) }, headerGroup.id))
+              ] }),
+              /* @__PURE__ */ jsx("tbody", { className: cn("table_body", classNames?.body), children: renderRows() }),
+              footer && /* @__PURE__ */ jsx("tfoot", { className: cn("table_footer bg-surface border-t border-border sticky bottom-0 z-30", classNames?.footer), children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx("tr", { children: footerGroup.headers.map((header) => {
+                const isPinnedLeft = header.column.getIsPinned() === "left";
+                const isPinnedRight = header.column.getIsPinned() === "right";
+                return /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    className: cn(
+                      "px-4 py-3 text-left font-semibold text-text-primary",
+                      bordered && "border-r border-border last:border-r-0",
+                      isPinnedLeft && "sticky left-0 bg-surface z-20",
+                      isPinnedRight && "sticky right-0 bg-surface z-20"
+                    ),
+                    children: header.isPlaceholder ? null : flexRender(
+                      header.column.columnDef.footer,
+                      header.getContext()
+                    )
+                  },
+                  header.id
+                );
+              }) }, footerGroup.id)) })
+            ]
+          }
+        )
+      }
+    ),
+    shouldShowBottomPagination && renderPagination()
+  ] });
+}
+TableComponent.displayName = "Table";
+var Table = React.memo(TableComponent);
+var table_default = Table;
+
+export { EditableCell, TableActions, TableCell, TableHeaderCell, TableRow, TableSkeleton, table_default };
+//# sourceMappingURL=chunk-TLNHWOQQ.js.map
+//# sourceMappingURL=chunk-TLNHWOQQ.js.map