@withwiz/toolkit 0.2.0 → 0.2.2

package/dist/components/ui/DataTable.js

@@ -1,606 +1,21 @@
-"use client";
 import {
-  LoadingBar
-} from "../../chunk-34WAGUT5.js";
-import {
-  Input
-} from "../../chunk-RJUVBBZG.js";
-import {
-  Label
-} from "../../chunk-IJEZ7G7S.js";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious
-} from "../../chunk-YJWLWUFK.js";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "../../chunk-WDUFQFDP.js";
-import {
-  Alert,
-  AlertDescription
-} from "../../chunk-F6LCSFSU.js";
-import {
-  Button
-} from "../../chunk-L25BNU3E.js";
-import {
-  cn
-} from "../../chunk-62FLBG6B.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "../../chunk-ORMEWXMH.js";
-
-// src/components/ui/DataTable.tsx
-import { useState, useRef, useEffect, isValidElement } from "react";
-import { Filter, CheckSquare, Square, RefreshCw, Loader2 } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_LABELS = {
-  search: "Search",
-  filter: "Filter",
-  filterActive: "Active",
-  clearFilters: "Clear Filters",
-  selectAll: "Select All",
-  selectAllShort: "All",
-  selected: "{count} / {total} selected",
-  processing: "Processing...",
-  processingItems: "Processing {count} items...",
-  loading: "Loading data...",
-  perPage: "{size} per page",
-  all: "All",
-  min: "Min",
-  max: "Max",
-  previous: "Previous",
-  next: "Next",
-  showing: "Showing {start} to {end} of {total} results"
-};
-function formatLabel(template, values) {
-  return Object.entries(values).reduce(
-    (result, [key, value]) => result.replace(new RegExp(`\\{${key}\\}`, "g"), String(value)),
-    template
-  );
-}
-function DataTable({
-  data,
-  columns,
-  loading = false,
-  error = null,
-  pagination,
-  sort,
-  bulkActions = [],
-  filters = [],
-  filterValues = {},
-  onFilterChange,
-  onClearFilters,
-  selectable = false,
-  onSelectionChange,
-  selectedIds = [],
-  getRowId,
-  className,
-  emptyMessage = "No data",
-  searchPlaceholder = "Search...",
-  onSearch,
-  onSearchValueChange,
-  searchValue = "",
-  showFilters = false,
-  onToggleFilters,
-  createButton,
-  labels: customLabels
-}) {
-  const labels = __spreadValues(__spreadValues({}, DEFAULT_LABELS), customLabels);
-  const [localSelectedIds, setLocalSelectedIds] = useState(selectedIds);
-  const [bulkActionLoading, setBulkActionLoading] = useState(null);
-  const selectAllRef = useRef(null);
-  useEffect(() => {
-    setLocalSelectedIds(selectedIds);
-  }, [selectedIds]);
-  useEffect(() => {
-    if (selectAllRef.current) {
-      selectAllRef.current.indeterminate = localSelectedIds.length > 0 && localSelectedIds.length < data.length;
-    }
-  }, [localSelectedIds, data.length]);
-  const hasActiveFilters = (() => {
-    if (searchValue && searchValue.trim()) return true;
-    for (const [key, value] of Object.entries(filterValues)) {
-      if (value === void 0 || value === null || value === "") continue;
-      if (value === "all") continue;
-      if (typeof value === "object" && value !== null) {
-        if (key === "dateRange" && (value.start || value.end)) return true;
-        if (key === "clickRange" && (value.min || value.max)) return true;
-        if (key === "lastClickedRange" && (value.start || value.end)) return true;
-      } else {
-        if (key === "activeFilter" && value !== "all") return true;
-        if (key === "publicFilter" && value !== "all") return true;
-        if (key === "expirationFilter" && value !== "all") return true;
-      }
-    }
-    return false;
-  })();
-  const handleSelectAll = (checked) => {
-    const newSelection = checked ? data.map((item) => getRowId(item)) : [];
-    setLocalSelectedIds(newSelection);
-    onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
-  };
-  const handleSelect = (id, checked) => {
-    const newSelection = checked ? [...localSelectedIds, id] : localSelectedIds.filter((item) => item !== id);
-    setLocalSelectedIds(newSelection);
-    onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
-  };
-  const handleSort = (columnKey) => {
-    if (!sort) return;
-    if (sort.sort === columnKey) {
-      sort.onSortChange(columnKey, sort.order === "asc" ? "desc" : "asc");
-    } else {
-      sort.onSortChange(columnKey, "asc");
-    }
-  };
-  const handleSearch = (e) => {
-    if (e.key === "Enter" && onSearch) {
-      onSearch(searchValue);
-    }
-  };
-  const handleSearchClick = () => {
-    if (onSearch) {
-      onSearch(searchValue);
-    }
-  };
-  const handleSearchInputChange = (value) => {
-    if (onSearchValueChange) {
-      onSearchValueChange(value);
-    }
-  };
-  const handleBulkAction = async (action) => {
-    if (localSelectedIds.length === 0 || bulkActionLoading) return;
-    setBulkActionLoading(action.key);
-    try {
-      await action.onClick(localSelectedIds);
-    } finally {
-      setBulkActionLoading(null);
-    }
-  };
-  const visibleColumns = columns.filter((col) => !col.hidden);
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    (onSearch || createButton) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 p-3 bg-muted rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
-      onSearch && /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            "data-testid": "search-input",
-            placeholder: searchPlaceholder,
-            value: searchValue,
-            onChange: (e) => handleSearchInputChange(e.target.value),
-            onKeyPress: handleSearch,
-            className: "min-w-0 pr-20 h-10"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            "data-testid": "search-btn",
-            size: "sm",
-            onClick: handleSearchClick,
-            className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-8 px-3 text-sm",
-            children: labels.search
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-        filters.length > 0 && onToggleFilters && /* @__PURE__ */ jsxs(
-          Button,
-          {
-            "data-testid": "filter-toggle-btn",
-            variant: "outline",
-            size: "sm",
-            onClick: () => onToggleFilters(!showFilters),
-            className: "flex items-center gap-1 h-10 px-3",
-            children: [
-              /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.filter }),
-              hasActiveFilters && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full", children: labels.filterActive })
-            ]
-          }
-        ),
-        pagination && /* @__PURE__ */ jsx(
-          "select",
-          {
-            "data-testid": "page-size-select",
-            value: pagination.pageSize,
-            onChange: (e) => pagination.onPageSizeChange(Number(e.target.value)),
-            className: "border rounded px-3 py-2 text-sm bg-background h-10 min-w-[100px]",
-            children: (pagination.pageSizeOptions || [10, 20, 50]).map((size) => /* @__PURE__ */ jsx("option", { value: size, children: formatLabel(labels.perPage, { size }) }, size))
-          }
-        ),
-        createButton && (isValidElement(createButton) ? createButton : /* @__PURE__ */ jsx(
-          Button,
-          {
-            "data-testid": "create-btn",
-            onClick: createButton.onClick,
-            variant: "default",
-            size: "sm",
-            className: "flex-shrink-0 h-10 px-3",
-            children: createButton.label
-          }
-        ))
-      ] })
-    ] }) }),
-    showFilters && filters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-2 bg-muted/50 rounded-lg space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: filters.map((filter) => {
-        var _a, _b, _c, _d, _e;
-        return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", filter.className), children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: filter.label }),
-          filter.type === "text" && /* @__PURE__ */ jsx(
-            Input,
-            {
-              "data-testid": `filter-${filter.key}`,
-              type: "text",
-              value: filterValues[filter.key] || "",
-              onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
-              placeholder: filter.placeholder,
-              className: "text-xs"
-            }
-          ),
-          filter.type === "select" && /* @__PURE__ */ jsxs(
-            Select,
-            {
-              value: filterValues[filter.key] || "all",
-              onValueChange: (value) => onFilterChange == null ? void 0 : onFilterChange(filter.key, value),
-              children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { "data-testid": `filter-${filter.key}`, className: "text-xs w-full h-9", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder }) }),
-                /* @__PURE__ */ jsxs(SelectContent, { children: [
-                  /* @__PURE__ */ jsx(SelectItem, { value: "all", children: labels.all }),
-                  (_a = filter.options) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value))
-                ] })
-              ]
-            }
-          ),
-          filter.type === "date" && /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "date",
-              value: filterValues[filter.key] || "",
-              onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
-              className: "text-xs"
-            }
-          ),
-          filter.type === "number" && /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "number",
-              value: filterValues[filter.key] || "",
-              onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
-              placeholder: filter.placeholder,
-              className: "text-xs"
-            }
-          ),
-          filter.type === "range" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: filter.inputType || "text",
-                value: ((_b = filterValues[filter.key]) == null ? void 0 : _b.min) || ((_c = filterValues[filter.key]) == null ? void 0 : _c.start) || "",
-                onChange: (e) => {
-                  const currentValue = filterValues[filter.key] || {};
-                  const newValue = filter.key.includes("date") || filter.key.includes("Date") ? __spreadProps(__spreadValues({}, currentValue), { start: e.target.value }) : __spreadProps(__spreadValues({}, currentValue), { min: e.target.value });
-                  onFilterChange == null ? void 0 : onFilterChange(filter.key, newValue);
-                },
-                className: "text-xs",
-                placeholder: filter.minPlaceholder || labels.min
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: filter.inputType || "text",
-                value: ((_d = filterValues[filter.key]) == null ? void 0 : _d.max) || ((_e = filterValues[filter.key]) == null ? void 0 : _e.end) || "",
-                onChange: (e) => {
-                  const currentValue = filterValues[filter.key] || {};
-                  const newValue = filter.key.includes("date") || filter.key.includes("Date") ? __spreadProps(__spreadValues({}, currentValue), { end: e.target.value }) : __spreadProps(__spreadValues({}, currentValue), { max: e.target.value });
-                  onFilterChange == null ? void 0 : onFilterChange(filter.key, newValue);
-                },
-                className: "text-xs",
-                placeholder: filter.maxPlaceholder || labels.max
-              }
-            )
-          ] })
-        ] }, filter.key);
-      }) }),
-      hasActiveFilters && onClearFilters && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          "data-testid": "clear-filters-btn",
-          variant: "outline",
-          size: "sm",
-          onClick: onClearFilters,
-          className: "flex items-center gap-2",
-          children: [
-            /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
-            labels.clearFilters
-          ]
-        }
-      ) })
-    ] }),
-    selectable && bulkActions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-3 bg-muted rounded-lg", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            "data-testid": "select-all-btn",
-            variant: "outline",
-            size: "sm",
-            onClick: () => {
-              const allSelected = localSelectedIds.length === data.length && data.length > 0;
-              handleSelectAll(!allSelected);
-            },
-            className: "flex items-center gap-1 h-9 px-3",
-            children: [
-              localSelectedIds.length === data.length && data.length > 0 ? /* @__PURE__ */ jsx(CheckSquare, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Square, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.selectAll }),
-              /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: labels.selectAllShort })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: formatLabel(labels.selected, { count: localSelectedIds.length, total: data.length }) })
-      ] }) }),
-      localSelectedIds.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2", children: bulkActions.map((action) => {
-        var _a;
-        const isLoading = bulkActionLoading === action.key;
-        const isDisabled = !!bulkActionLoading || ((_a = action.disabled) == null ? void 0 : _a.call(action, localSelectedIds)) || localSelectedIds.length === 0;
-        return /* @__PURE__ */ jsxs(
-          Button,
-          {
-            "data-testid": `bulk-action-${action.key}`,
-            variant: action.variant || "outline",
-            size: "sm",
-            onClick: () => handleBulkAction(action),
-            disabled: isDisabled,
-            className: "flex items-center gap-1 h-9 text-xs",
-            children: [
-              isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : action.icon,
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: isLoading ? labels.processing : action.label }),
-              /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: isLoading ? "..." : action.label.split(" ")[0] })
-            ]
-          },
-          action.key
-        );
-      }) })
-    ] }),
-    bulkActionLoading && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-muted/50 rounded-lg", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: formatLabel(labels.processingItems, { count: localSelectedIds.length }) })
-      ] }),
-      /* @__PURE__ */ jsx(LoadingBar, { size: "sm", variant: "primary", className: "mt-2" })
-    ] }),
-    error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }),
-    /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto max-w-full", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm min-w-full", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
-        selectable && /* @__PURE__ */ jsx("th", { className: "px-1 py-2 text-left font-medium w-8", children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            "data-testid": "select-all-checkbox",
-            type: "checkbox",
-            ref: selectAllRef,
-            checked: data.length > 0 && localSelectedIds.length === data.length,
-            onChange: (e) => handleSelectAll(e.target.checked),
-            className: "h-4 w-4"
-          }
-        ) }),
-        visibleColumns.map((column) => {
-          var _a, _b, _c, _d;
-          const width = column.width === "auto" ? void 0 : column.width;
-          const minWidth = column.minWidth;
-          return /* @__PURE__ */ jsx(
-            "th",
-            {
-              className: cn(
-                "px-2 py-2 font-medium",
-                column.sortable && "cursor-pointer",
-                column.className,
-                ((_a = column.responsive) == null ? void 0 : _a.sm) && "hidden sm:table-cell",
-                ((_b = column.responsive) == null ? void 0 : _b.md) && "hidden md:table-cell",
-                ((_c = column.responsive) == null ? void 0 : _c.lg) && "hidden lg:table-cell",
-                ((_d = column.responsive) == null ? void 0 : _d.xl) && "hidden xl:table-cell"
-              ),
-              style: {
-                width,
-                minWidth: minWidth || width || void 0,
-                maxWidth: column.maxWidth || void 0
-              },
-              onClick: column.sortable ? () => handleSort(column.key) : void 0,
-              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
-                column.header,
-                column.sortable && sort && sort.sort === column.key && /* @__PURE__ */ jsx("span", { children: sort.order === "asc" ? "\u25B2" : "\u25BC" })
-              ] })
-            },
-            column.key
-          );
-        })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: visibleColumns.length + (selectable ? 1 : 0),
-          className: "text-center py-8",
-          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-3", children: [
-            /* @__PURE__ */ jsx(LoadingBar, { size: "md", variant: "primary", className: "w-64" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.loading })
-          ] })
-        }
-      ) }) : error ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: visibleColumns.length + (selectable ? 1 : 0),
-          className: "text-center py-8 text-destructive",
-          children: error
-        }
-      ) }) : data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: visibleColumns.length + (selectable ? 1 : 0),
-          className: "text-center py-8 text-muted-foreground",
-          children: emptyMessage
-        }
-      ) }) : data.map((item) => {
-        const rowId = getRowId(item);
-        return /* @__PURE__ */ jsxs(
-          "tr",
-          {
-            className: cn(
-              "border-b last:border-0 hover:bg-muted/30",
-              localSelectedIds.includes(rowId) && "bg-primary/5"
-            ),
-            children: [
-              selectable && /* @__PURE__ */ jsx("td", { className: "px-1 py-2 w-8", children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  "data-testid": `row-checkbox-${rowId}`,
-                  type: "checkbox",
-                  checked: localSelectedIds.includes(rowId),
-                  onChange: (e) => handleSelect(rowId, e.target.checked),
-                  className: "h-4 w-4"
-                }
-              ) }),
-              visibleColumns.map((column) => {
-                var _a, _b, _c, _d;
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    className: cn(
-                      "px-2 py-3 overflow-hidden",
-                      column.className,
-                      ((_a = column.responsive) == null ? void 0 : _a.sm) && "hidden sm:table-cell",
-                      ((_b = column.responsive) == null ? void 0 : _b.md) && "hidden md:table-cell",
-                      ((_c = column.responsive) == null ? void 0 : _c.lg) && "hidden lg:table-cell",
-                      ((_d = column.responsive) == null ? void 0 : _d.xl) && "hidden xl:table-cell"
-                    ),
-                    style: {
-                      maxWidth: column.maxWidth || column.width || void 0
-                    },
-                    children: column.cell ? column.cell(item) : column.accessorKey ? String(item[column.accessorKey] || "") : ""
-                  },
-                  column.key
-                );
-              })
-            ]
-          },
-          rowId
-        );
-      }) })
-    ] }) }) }),
-    pagination && pagination.total > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-3 p-3 bg-muted/50 rounded-lg", children: /* @__PURE__ */ jsx(Pagination, { className: "w-full", children: /* @__PURE__ */ jsxs(PaginationContent, { className: "flex-wrap gap-1 justify-between w-full items-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground text-center sm:text-left whitespace-nowrap", children: formatLabel(labels.showing, {
-        start: (pagination.page - 1) * pagination.pageSize + 1,
-        end: Math.min(pagination.page * pagination.pageSize, pagination.total),
-        total: pagination.total
-      }) }),
-      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
-        PaginationPrevious,
-        {
-          href: "#",
-          onClick: (e) => {
-            e.preventDefault();
-            if (pagination.page > 1) pagination.onPageChange(pagination.page - 1);
-          },
-          className: pagination.page <= 1 ? "pointer-events-none opacity-50" : "",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.previous }),
-            /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "\u2190" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: "hidden sm:flex", children: (() => {
-        const totalPages = Math.ceil(pagination.total / pagination.pageSize);
-        const pages = [];
-        if (pagination.page > 3) {
-          pages.push(
-            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-              PaginationLink,
-              {
-                href: "#",
-                onClick: (e) => {
-                  e.preventDefault();
-                  pagination.onPageChange(1);
-                },
-                children: "1"
-              }
-            ) }, 1)
-          );
-          if (pagination.page > 4) {
-            pages.push(
-              /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, "ellipsis1")
-            );
-          }
-        }
-        for (let i = Math.max(1, pagination.page - 2); i <= Math.min(totalPages, pagination.page + 2); i++) {
-          pages.push(
-            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-              PaginationLink,
-              {
-                href: "#",
-                isActive: i === pagination.page,
-                onClick: (e) => {
-                  e.preventDefault();
-                  pagination.onPageChange(i);
-                },
-                children: i
-              }
-            ) }, i)
-          );
-        }
-        if (pagination.page < totalPages - 2) {
-          if (pagination.page < totalPages - 3) {
-            pages.push(
-              /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, "ellipsis2")
-            );
-          }
-          pages.push(
-            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-              PaginationLink,
-              {
-                href: "#",
-                onClick: (e) => {
-                  e.preventDefault();
-                  pagination.onPageChange(totalPages);
-                },
-                children: totalPages
-              }
-            ) }, totalPages)
-          );
-        }
-        return pages;
-      })() }),
-      /* @__PURE__ */ jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxs("span", { className: "px-3 py-2 text-sm font-medium", children: [
-        pagination.page,
-        " / ",
-        Math.ceil(pagination.total / pagination.pageSize)
-      ] }) }),
-      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
-        PaginationNext,
-        {
-          href: "#",
-          onClick: (e) => {
-            e.preventDefault();
-            const totalPages = Math.ceil(pagination.total / pagination.pageSize);
-            if (pagination.page < totalPages) pagination.onPageChange(pagination.page + 1);
-          },
-          className: pagination.page >= Math.ceil(pagination.total / pagination.pageSize) ? "pointer-events-none opacity-50" : "",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.next }),
-            /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "\u2192" })
-          ]
-        }
-      ) })
-    ] }) }) })
-  ] });
-}
+  DataTable
+} from "../../chunk-GSUQE3SZ.js";
+import "../../chunk-LJEGM4OO.js";
+import "../../chunk-IPXPCBDO.js";
+import "../../chunk-TH45RVP7.js";
+import "../../chunk-7IY3RQQL.js";
+import "../../chunk-MAATEX2R.js";
+import "../../chunk-NY5QXT33.js";
+import "../../chunk-IJEZ7G7S.js";
+import "../../chunk-YJWLWUFK.js";
+import "../../chunk-WDUFQFDP.js";
+import "../../chunk-34WAGUT5.js";
+import "../../chunk-F6LCSFSU.js";
+import "../../chunk-L25BNU3E.js";
+import "../../chunk-RJUVBBZG.js";
+import "../../chunk-62FLBG6B.js";
+import "../../chunk-ORMEWXMH.js";
 export {
   DataTable
 };

package/dist/components/ui/data-table/DataTable.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableProps } from "./types";
+export declare function DataTable<T>({ data, columns, loading, error, pagination, sort, bulkActions, filters, filterValues, onFilterChange, onClearFilters, selectable, onSelectionChange, selectedIds, getRowId, className, emptyMessage, searchPlaceholder, onSearch, onSearchValueChange, searchValue, showFilters, onToggleFilters, createButton, labels: customLabels, syncWithUrl, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/data-table/DataTable.js

@@ -0,0 +1,22 @@
+"use client";
+import {
+  DataTable
+} from "../../../chunk-GSUQE3SZ.js";
+import "../../../chunk-LJEGM4OO.js";
+import "../../../chunk-IPXPCBDO.js";
+import "../../../chunk-TH45RVP7.js";
+import "../../../chunk-7IY3RQQL.js";
+import "../../../chunk-MAATEX2R.js";
+import "../../../chunk-NY5QXT33.js";
+import "../../../chunk-IJEZ7G7S.js";
+import "../../../chunk-YJWLWUFK.js";
+import "../../../chunk-WDUFQFDP.js";
+import "../../../chunk-34WAGUT5.js";
+import "../../../chunk-F6LCSFSU.js";
+import "../../../chunk-L25BNU3E.js";
+import "../../../chunk-RJUVBBZG.js";
+import "../../../chunk-62FLBG6B.js";
+import "../../../chunk-ORMEWXMH.js";
+export {
+  DataTable
+};

package/dist/components/ui/data-table/DataTableBody.d.ts

@@ -0,0 +1,19 @@
+import type { ColumnDef, SortConfig } from "./types";
+export interface DataTableBodyProps<T> {
+    data: T[];
+    visibleColumns: ColumnDef<T>[];
+    loading: boolean;
+    error: string | null;
+    emptyMessage: string;
+    selectable: boolean;
+    localSelectedIds: string[];
+    getRowId: (item: T) => string;
+    onSelectAll: (checked: boolean) => void;
+    onSelect: (id: string, checked: boolean) => void;
+    sort?: SortConfig;
+    onSort: (columnKey: string) => void;
+    labels: {
+        loading: string;
+    };
+}
+export declare function DataTableBody<T>({ data, visibleColumns, loading, error, emptyMessage, selectable, localSelectedIds, getRowId, onSelectAll, onSelect, sort, onSort, labels, }: DataTableBodyProps<T>): import("react/jsx-runtime").JSX.Element;