@withwiz/toolkit 0.2.0 → 0.2.2

package/dist/auth/index.js

@@ -1,6 +1,25 @@
+import {
+  JWTClientManager,
+  clearStoredTokens,
+  clearTokens,
+  createApiHeaders,
+  createAuthHeader,
+  decodeJWTPayload,
+  extractUserFromToken,
+  getStoredTokens,
+  getTokenExpirationString,
+  getTokenIssuedAtString,
+  getTokenRemainingTime,
+  isTokenExpired,
+  isTokenExpiringSoon,
+  storeTokens
+} from "../chunk-XRRPEBKB.js";
 import {
   OAuthManager
 } from "../chunk-V5K5FYU7.js";
+import {
+  TokenGenerator
+} from "../chunk-GDWEDUHO.js";
 import {
   DEFAULT_PASSWORD_CONFIG,
   createPasswordHasher,
@@ -16,25 +35,6 @@ import {
   defaultPasswordSchema,
   strongPasswordSchema
 } from "../chunk-IHXRF3BH.js";
-import {
-  TokenGenerator
-} from "../chunk-GDWEDUHO.js";
-import {
-  JWTClientManager,
-  clearStoredTokens,
-  clearTokens,
-  createApiHeaders,
-  createAuthHeader,
-  decodeJWTPayload,
-  extractUserFromToken,
-  getStoredTokens,
-  getTokenExpirationString,
-  getTokenIssuedAtString,
-  getTokenRemainingTime,
-  isTokenExpired,
-  isTokenExpiringSoon,
-  storeTokens
-} from "../chunk-XRRPEBKB.js";
 import {
   OAuthProvider,
   PasswordStrength,

package/dist/chunk-7IY3RQQL.js

@@ -0,0 +1,151 @@
+import {
+  LoadingBar
+} from "./chunk-34WAGUT5.js";
+import {
+  cn
+} from "./chunk-62FLBG6B.js";
+
+// src/components/ui/data-table/DataTableBody.tsx
+import { useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTableBody({
+  data,
+  visibleColumns,
+  loading,
+  error,
+  emptyMessage,
+  selectable,
+  localSelectedIds,
+  getRowId,
+  onSelectAll,
+  onSelect,
+  sort,
+  onSort,
+  labels
+}) {
+  const selectAllRef = useRef(null);
+  useEffect(() => {
+    if (selectAllRef.current) {
+      selectAllRef.current.indeterminate = localSelectedIds.length > 0 && localSelectedIds.length < data.length;
+    }
+  }, [localSelectedIds, data.length]);
+  return /* @__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) => onSelectAll(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 ? () => onSort(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) => onSelect(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
+      );
+    }) })
+  ] }) }) });
+}
+
+export {
+  DataTableBody
+};

package/dist/chunk-GSUQE3SZ.js

@@ -0,0 +1,225 @@
+import {
+  DataTableFilters
+} from "./chunk-LJEGM4OO.js";
+import {
+  DataTablePagination
+} from "./chunk-IPXPCBDO.js";
+import {
+  DataTableSearch
+} from "./chunk-TH45RVP7.js";
+import {
+  DataTableBody
+} from "./chunk-7IY3RQQL.js";
+import {
+  DataTableBulkActions
+} from "./chunk-MAATEX2R.js";
+import {
+  DEFAULT_LABELS
+} from "./chunk-NY5QXT33.js";
+import {
+  Alert,
+  AlertDescription
+} from "./chunk-F6LCSFSU.js";
+import {
+  cn
+} from "./chunk-62FLBG6B.js";
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/ui/data-table/DataTable.tsx
+import { useState, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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,
+  syncWithUrl = false
+}) {
+  const labels = __spreadValues(__spreadValues({}, DEFAULT_LABELS), customLabels);
+  const [localSelectedIds, setLocalSelectedIds] = useState(selectedIds);
+  const [bulkActionLoading, setBulkActionLoading] = useState(null);
+  useEffect(() => {
+    setLocalSelectedIds(selectedIds);
+  }, [selectedIds]);
+  const hasActiveFilters = useMemo(() => {
+    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;
+  }, [searchValue, filterValues]);
+  useEffect(() => {
+    if (!syncWithUrl || typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    let changed = false;
+    if (searchValue) {
+      if (params.get("search") !== searchValue) {
+        params.set("search", searchValue);
+        changed = true;
+      }
+    } else {
+      if (params.has("search")) {
+        params.delete("search");
+        changed = true;
+      }
+    }
+    if (sort) {
+      if (params.get("sort") !== sort.sort) {
+        params.set("sort", sort.sort);
+        changed = true;
+      }
+      if (params.get("order") !== sort.order) {
+        params.set("order", sort.order);
+        changed = true;
+      }
+    }
+    if (pagination) {
+      const pageStr = String(pagination.page);
+      const pageSizeStr = String(pagination.pageSize);
+      if (params.get("page") !== pageStr) {
+        params.set("page", pageStr);
+        changed = true;
+      }
+      if (params.get("pageSize") !== pageSizeStr) {
+        params.set("pageSize", pageSizeStr);
+        changed = true;
+      }
+    }
+    if (changed) {
+      const newUrl = `${window.location.pathname}?${params.toString()}`;
+      window.history.replaceState(null, "", newUrl);
+    }
+  }, [syncWithUrl, searchValue, sort == null ? void 0 : sort.sort, sort == null ? void 0 : sort.order, pagination == null ? void 0 : pagination.page, pagination == null ? void 0 : pagination.pageSize]);
+  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 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(
+      DataTableSearch,
+      {
+        onSearch,
+        onSearchValueChange,
+        searchValue,
+        searchPlaceholder,
+        labels,
+        filters,
+        onToggleFilters,
+        showFilters,
+        hasActiveFilters,
+        pagination,
+        createButton
+      }
+    ),
+    showFilters && filters.length > 0 && /* @__PURE__ */ jsx(
+      DataTableFilters,
+      {
+        filters,
+        filterValues,
+        onFilterChange,
+        onClearFilters,
+        hasActiveFilters,
+        labels
+      }
+    ),
+    selectable && bulkActions.length > 0 && /* @__PURE__ */ jsx(
+      DataTableBulkActions,
+      {
+        bulkActions,
+        localSelectedIds,
+        dataLength: data.length,
+        bulkActionLoading,
+        onSelectAll: handleSelectAll,
+        onBulkAction: handleBulkAction,
+        labels
+      }
+    ),
+    error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }),
+    /* @__PURE__ */ jsx(
+      DataTableBody,
+      {
+        data,
+        visibleColumns,
+        loading,
+        error,
+        emptyMessage,
+        selectable,
+        localSelectedIds,
+        getRowId,
+        onSelectAll: handleSelectAll,
+        onSelect: handleSelect,
+        sort,
+        onSort: handleSort,
+        labels
+      }
+    ),
+    pagination && pagination.total > 0 && /* @__PURE__ */ jsx(
+      DataTablePagination,
+      {
+        pagination,
+        labels
+      }
+    )
+  ] });
+}
+
+export {
+  DataTable
+};

package/dist/chunk-IPXPCBDO.js

@@ -0,0 +1,127 @@
+import {
+  formatLabel
+} from "./chunk-NY5QXT33.js";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+} from "./chunk-YJWLWUFK.js";
+
+// src/components/ui/data-table/DataTablePagination.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTablePagination({
+  pagination,
+  labels
+}) {
+  const totalPages = Math.ceil(pagination.total / pagination.pageSize);
+  return /* @__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 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,
+      " / ",
+      totalPages
+    ] }) }),
+    /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+      PaginationNext,
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          if (pagination.page < totalPages) pagination.onPageChange(pagination.page + 1);
+        },
+        className: pagination.page >= totalPages ? "pointer-events-none opacity-50" : "",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.next }),
+          /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "\u2192" })
+        ]
+      }
+    ) })
+  ] }) }) });
+}
+
+export {
+  DataTablePagination
+};

package/dist/chunk-LJEGM4OO.js

@@ -0,0 +1,136 @@
+import {
+  Label
+} from "./chunk-IJEZ7G7S.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-WDUFQFDP.js";
+import {
+  Button
+} from "./chunk-L25BNU3E.js";
+import {
+  Input
+} from "./chunk-RJUVBBZG.js";
+import {
+  cn
+} from "./chunk-62FLBG6B.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
+// src/components/ui/data-table/DataTableFilters.tsx
+import { RefreshCw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTableFilters({
+  filters,
+  filterValues,
+  onFilterChange,
+  onClearFilters,
+  hasActiveFilters,
+  labels
+}) {
+  return /* @__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
+        ]
+      }
+    ) })
+  ] });
+}
+
+export {
+  DataTableFilters
+};