react-table-craft 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3431 @@
+import * as React22 from 'react';
+import React22__default, { forwardRef, createContext, useState, useEffect, useMemo, useContext } from 'react';
+import { flexRender, useReactTable, getFacetedUniqueValues, getFacetedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronDown, Check, Search, ChevronRight, Circle, ChevronLeft, Filter, PlusCircle, Columns3, Edit, Eye, Download, Trash2Icon, XCircle, MoreVertical, TableIcon, LayoutGrid, CalendarIcon, Trash2, Sheet, Loader2, Plus, RotateCcw, SearchX, ListFilter, Rows3, Type, X, GripVertical, MoreHorizontal, Copy, ArrowDown, ArrowUp, SortAsc, ArrowUpIcon, ArrowDownIcon, EyeOffIcon, TrashIcon, ChevronsUpDown } from 'lucide-react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { format } from 'date-fns';
+import { ar, enUS } from 'date-fns/locale';
+import { mkConfig, generateCsv, download } from 'export-to-csv';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Command as Command$1 } from 'cmdk';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { DropdownMenuTrigger as DropdownMenuTrigger$1 } from '@radix-ui/react-dropdown-menu';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Drawer as Drawer$1 } from 'vaul';
+
+// src/components/data-table.tsx
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Table = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+TableBody.displayName = "TableBody";
+var TableFooter = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "px-4 py-2.5 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+TableCaption.displayName = "TableCaption";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",
+        brand: "bg-brand text-brand-foreground hover:bg-brand/90 shadow-sm shadow-brand/25",
+        outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-brand underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-12 rounded-xl px-8 text-base",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectContent = React22.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      SelectPrimitive.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        ),
+        children
+      }
+    )
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectItem = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pe-8 ps-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute end-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/config/defaults.ts
+var DEFAULT_TABLE_CONFIG = Object.freeze({
+  features: Object.freeze({
+    search: true,
+    filter: true,
+    pagination: true,
+    columnVisibility: true,
+    csvExport: true,
+    rowSelection: true,
+    viewToggle: true,
+    floatingBar: false,
+    advancedFilter: false,
+    sorting: true
+  }),
+  pagination: Object.freeze({
+    pageSizeOptions: Object.freeze([10, 20, 30, 40, 50]),
+    defaultPageSize: 10
+  }),
+  search: Object.freeze({
+    debounceMs: 500,
+    minSearchLength: 0
+  }),
+  i18n: Object.freeze({
+    locale: "en",
+    direction: "auto",
+    translationFn: void 0,
+    namespace: "table"
+  }),
+  performance: Object.freeze({
+    memoStrategy: "smart",
+    virtualizationOverscan: 5,
+    batchUpdates: true
+  }),
+  enterprise: Object.freeze({
+    strictAccessibility: false,
+    errorRecovery: false,
+    debugMode: false
+  }),
+  dev: Object.freeze({
+    warnings: true,
+    performanceHints: false,
+    renderCostThresholdMs: 16
+  }),
+  plugins: [],
+  router: void 0
+});
+
+// src/config/merge.ts
+function deepMergeConfig(base, overrides) {
+  const result = { ...base };
+  for (const key of Object.keys(overrides)) {
+    const overrideValue = overrides[key];
+    if (overrideValue === void 0) continue;
+    if (Array.isArray(overrideValue)) {
+      result[key] = overrideValue;
+    } else if (overrideValue !== null && typeof overrideValue === "object" && !Array.isArray(base[key]) && typeof base[key] === "object" && base[key] !== null) {
+      const baseObj = base[key];
+      const overrideObj = overrideValue;
+      const merged = { ...baseObj };
+      for (const subKey of Object.keys(overrideObj)) {
+        if (overrideObj[subKey] !== void 0) {
+          merged[subKey] = overrideObj[subKey];
+        }
+      }
+      result[key] = merged;
+    } else {
+      result[key] = overrideValue;
+    }
+  }
+  return result;
+}
+
+// src/config/context.ts
+var TableConfigContext = createContext(null);
+function TableProvider({ config, children }) {
+  const resolvedConfig = useMemo(
+    () => deepMergeConfig(DEFAULT_TABLE_CONFIG, config),
+    [config]
+  );
+  return React22__default.createElement(
+    TableConfigContext.Provider,
+    { value: resolvedConfig },
+    children
+  );
+}
+function useGlobalTableConfig() {
+  const context = useContext(TableConfigContext);
+  return context != null ? context : DEFAULT_TABLE_CONFIG;
+}
+
+// src/hooks/use-table-translations.ts
+var DEFAULT_TRANSLATIONS = {
+  // Toolbar
+  "Filter": "Filter",
+  "filter-by": "Filter by",
+  "Reset": "Reset",
+  "add": "Add",
+  "add-filter": "Add filter",
+  "new": "New",
+  "columns": "Columns",
+  "Toggle-Visibility": "Toggle Visibility",
+  "export-csv": "Export CSV",
+  "tableView": "Table",
+  "cardView": "Cards",
+  "Apply": "Apply",
+  "data-table-filter": "Use filters to narrow down results.",
+  // Search
+  "search": "Search",
+  // Sorting
+  "asc": "Asc",
+  "desc": "Desc",
+  "Hide": "Hide",
+  "sorted-desc": "Sorted descending",
+  "sorted-asc": "Sorted ascending",
+  "not-sorted": "Not sorted",
+  "sort-ascending": "Sort ascending",
+  "sort-descending": "Sort descending",
+  "hide-column": "Hide column",
+  // Pagination
+  "pagination": "Pagination",
+  "showing": "Showing",
+  "of": "of",
+  "records": "records",
+  "Rows Per Page": "Rows per page",
+  "previous": "Previous",
+  "next": "Next",
+  // Selection
+  "select": "Select",
+  "clear-selection": "Clear selection",
+  "row(s) selected": "row(s) selected",
+  "delete-selected": "Delete selected",
+  // Empty state
+  "no-records-found": "No records found",
+  "no-records-hint": "Try adjusting your search or filter criteria.",
+  "reset-filters": "Reset filters",
+  // Filters
+  "no-items-found": "No items found.",
+  "clear-filters": "Clear filters",
+  "all": "All",
+  "advanced-filter": "Advanced filter",
+  // Actions
+  "actions": "Actions",
+  "edit": "Edit",
+  "show": "Show",
+  "delete": "Delete",
+  "download": "Download",
+  "cancel": "Cancel",
+  // Date
+  "datePlaceholder": "Pick a date",
+  // Client-side table
+  "row-number": "#"
+};
+function useTableTranslations() {
+  const config = useGlobalTableConfig();
+  if (config.i18n.translationFn) {
+    return config.i18n.translationFn;
+  }
+  return (key) => {
+    var _a;
+    return (_a = DEFAULT_TRANSLATIONS[key]) != null ? _a : key;
+  };
+}
+
+// src/config/create-config.ts
+function createTableConfig(input) {
+  if (!input) return DEFAULT_TABLE_CONFIG;
+  const merged = deepMergeConfig(DEFAULT_TABLE_CONFIG, input);
+  return Object.freeze(merged);
+}
+
+// src/config/dev-warnings.ts
+function runDevValidation(config) {
+  if (process.env.NODE_ENV !== "development") return;
+  if (!config.dev.warnings) return;
+  if (!config.pagination.pageSizeOptions.includes(config.pagination.defaultPageSize)) {
+    console.warn(
+      `[TableCraft] defaultPageSize (${config.pagination.defaultPageSize}) is not in pageSizeOptions [${config.pagination.pageSizeOptions.join(", ")}]. The page size dropdown may not show the default selection.`
+    );
+  }
+  if (config.search.debounceMs < 0) {
+    console.warn(
+      `[TableCraft] search.debounceMs is negative (${config.search.debounceMs}). This will be treated as 0.`
+    );
+  }
+  if (config.features.advancedFilter && !config.features.filter) {
+    console.warn(
+      `[TableCraft] features.advancedFilter is enabled but features.filter is disabled. Advanced filter will have no effect.`
+    );
+  }
+  if (config.i18n.direction === "auto" && !config.i18n.locale) {
+    console.warn(
+      `[TableCraft] i18n.direction is 'auto' but i18n.locale is empty. Direction detection may not work correctly. Set an explicit direction or locale.`
+    );
+  }
+}
+
+// src/config/use-resolved-config.ts
+function useResolvedTableConfig(instanceConfig) {
+  const globalConfig = useGlobalTableConfig();
+  const resolved = useMemo(() => {
+    var _a;
+    let config = instanceConfig ? deepMergeConfig(globalConfig, instanceConfig) : globalConfig;
+    if (config.plugins.length > 0) {
+      const sortedPlugins = [...config.plugins].sort((a, b) => a.priority - b.priority);
+      for (const plugin of sortedPlugins) {
+        config = deepMergeConfig(config, plugin.config);
+      }
+      for (const plugin of sortedPlugins) {
+        (_a = plugin.onResolve) == null ? void 0 : _a.call(plugin, config);
+      }
+    }
+    return config;
+  }, [globalConfig, instanceConfig]);
+  if (process.env.NODE_ENV === "development") {
+    runDevValidation(resolved);
+  }
+  return resolved;
+}
+function useTableConfig(selector) {
+  const config = useGlobalTableConfig();
+  return useMemo(() => {
+    if (selector) return selector(config);
+    return config;
+  }, [config, selector]);
+}
+function getVisiblePages(currentPage, totalPages) {
+  if (totalPages <= 5) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const pages = [];
+  if (currentPage <= 3) {
+    pages.push(1, 2, 3, 4, "ellipsis", totalPages);
+  } else if (currentPage >= totalPages - 2) {
+    pages.push(1, "ellipsis", totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
+  } else {
+    pages.push(1, "ellipsis", currentPage - 1, currentPage, currentPage + 1, "ellipsis", totalPages);
+  }
+  return pages;
+}
+function DataTablePagination({
+  table,
+  pageSizeOptions,
+  isQueryPagination = false,
+  paginationData
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const t = useTableTranslations();
+  const config = useTableConfig();
+  const isArabic = config.i18n.direction === "rtl" || config.i18n.direction === "auto" && config.i18n.locale === "ar";
+  const resolvedPageSizeOptions = pageSizeOptions != null ? pageSizeOptions : config.pagination.pageSizeOptions;
+  const currentPage = isQueryPagination ? (_c = (_b = (_a = paginationData == null ? void 0 : paginationData.paginationResponse) == null ? void 0 : _a.meta) == null ? void 0 : _b.current_page) != null ? _c : 1 : table.getState().pagination.pageIndex + 1;
+  const totalPages = isQueryPagination ? (_f = (_e = (_d = paginationData == null ? void 0 : paginationData.paginationResponse) == null ? void 0 : _d.meta) == null ? void 0 : _e.last_page) != null ? _f : 1 : table.getPageCount();
+  const pageSize = isQueryPagination ? (_i = (_h = (_g = paginationData == null ? void 0 : paginationData.paginationResponse) == null ? void 0 : _g.meta) == null ? void 0 : _h.per_page) != null ? _i : 10 : table.getState().pagination.pageSize;
+  const totalItems = isQueryPagination ? (_l = (_k = (_j = paginationData == null ? void 0 : paginationData.paginationResponse) == null ? void 0 : _j.meta) == null ? void 0 : _k.total) != null ? _l : 0 : table.getFilteredRowModel().rows.length;
+  const from = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const to = Math.min(currentPage * pageSize, totalItems);
+  const goToPage = (page) => {
+    if (isQueryPagination && paginationData) {
+      paginationData.onPageChange(page);
+    } else {
+      table.setPageIndex(page - 1);
+    }
+  };
+  const visiblePages = getVisiblePages(currentPage, totalPages);
+  return /* @__PURE__ */ jsxs("nav", { role: "navigation", "aria-label": t("pagination"), className: "flex w-full flex-col gap-4 border-t px-4 py-4 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        t("showing"),
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "font-semibold text-foreground", children: [
+          from,
+          "-",
+          to
+        ] }),
+        " ",
+        t("of"),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: totalItems }),
+        " ",
+        t("records")
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("Rows Per Page") }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: `${pageSize}`,
+            onValueChange: (value) => {
+              const newSize = Number(value);
+              if (isQueryPagination && paginationData) {
+                paginationData.onPageSizeChange(newSize);
+              } else {
+                table.setPageSize(newSize);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }) }),
+              /* @__PURE__ */ jsx(SelectContent, { side: "top", children: resolvedPageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    totalPages > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-8 gap-1 px-3 text-sm",
+          onClick: (e) => {
+            e.preventDefault();
+            goToPage(currentPage - 1);
+          },
+          disabled: currentPage === 1,
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: cn("size-4", isArabic && "rotate-180") }),
+            t("previous")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-1 sm:flex", children: visiblePages.map(
+        (page, idx) => page === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-sm text-muted-foreground", children: "..." }, `ellipsis-${idx}`) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: page === currentPage ? "default" : "ghost",
+            size: "sm",
+            className: cn(
+              "size-8 p-0 text-sm",
+              page === currentPage && "bg-brand text-brand-foreground hover:bg-brand/90"
+            ),
+            onClick: (e) => {
+              e.preventDefault();
+              goToPage(page);
+            },
+            ...page === currentPage ? { "aria-current": "page" } : {},
+            children: page
+          },
+          page
+        )
+      ) }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground sm:hidden", children: [
+        currentPage,
+        " / ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-8 gap-1 px-3 text-sm",
+          onClick: (e) => {
+            e.preventDefault();
+            goToPage(currentPage + 1);
+          },
+          disabled: currentPage === totalPages,
+          children: [
+            t("next"),
+            /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4", isArabic && "rotate-180") })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var DEFAULT_IGNORED_COLUMNS = ["actions", "select"];
+function createCsvConfig(options = {}) {
+  return mkConfig({
+    fieldSeparator: ",",
+    decimalSeparator: ".",
+    useKeysAsHeaders: true,
+    filename: options.fileName || "table-export"
+  });
+}
+function exportSelectedRowsCsv(table, options = {}) {
+  const selectedRows = table.getSelectedRowModel().rows;
+  if (selectedRows.length === 0) {
+    return;
+  }
+  const ignoredColumns = [
+    ...DEFAULT_IGNORED_COLUMNS,
+    ...options.ignoredCols || []
+  ];
+  const csvConfig = createCsvConfig(options);
+  try {
+    const tableData = selectedRows.map((row) => {
+      return row._getAllVisibleCells().reduce(
+        (acc, cell) => {
+          if (!ignoredColumns.includes(cell.column.id)) {
+            const rawValue = cell.getValue();
+            const original = cell.row.original;
+            const value = rawValue != null ? rawValue : original[cell.column.id];
+            if (value !== void 0 && value !== null && value !== "") {
+              const headerKey = typeof cell.column.columnDef.header === "string" ? cell.column.columnDef.header : cell.column.id;
+              acc[headerKey] = String(value);
+            }
+          }
+          return acc;
+        },
+        {}
+      );
+    });
+    if (tableData.length === 0) {
+      return;
+    }
+    const csv = generateCsv(csvConfig)(tableData);
+    download(csvConfig)(csv);
+  } catch (error) {
+    console.error("CSV export failed:", error);
+  }
+}
+var Input = React22.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+function Calendar({ className, mode = "single", selected, onSelect }) {
+  const [currentMonth, setCurrentMonth] = React22.useState(() => selected || /* @__PURE__ */ new Date());
+  const year = currentMonth.getFullYear();
+  const month = currentMonth.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const startDayOfWeek = firstDay.getDay();
+  const daysInMonth = lastDay.getDate();
+  const prevMonth = () => setCurrentMonth(new Date(year, month - 1, 1));
+  const nextMonth = () => setCurrentMonth(new Date(year, month + 1, 1));
+  const monthName = currentMonth.toLocaleString("default", { month: "long", year: "numeric" });
+  const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const isSelected = (day) => {
+    if (!selected) return false;
+    return selected.getFullYear() === year && selected.getMonth() === month && selected.getDate() === day;
+  };
+  const isToday = (day) => {
+    const today = /* @__PURE__ */ new Date();
+    return today.getFullYear() === year && today.getMonth() === month && today.getDate() === day;
+  };
+  const handleSelect = (day) => {
+    const date = new Date(year, month, day);
+    onSelect == null ? void 0 : onSelect(date);
+  };
+  const cells = [];
+  for (let i = 0; i < startDayOfWeek; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "h-7 w-7", onClick: prevMonth, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: monthName }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "h-7 w-7", onClick: nextMonth, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 text-center text-xs text-muted-foreground mb-1", children: dayNames.map((d) => /* @__PURE__ */ jsx("div", { className: "py-1", children: d }, d)) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: cells.map(
+      (day, i) => day === null ? /* @__PURE__ */ jsx("div", {}, `empty-${i}`) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleSelect(day),
+          className: cn(
+            "h-8 w-8 rounded-md text-sm transition-colors hover:bg-accent mx-auto flex items-center justify-center",
+            isSelected(day) && "bg-primary text-primary-foreground hover:bg-primary/90",
+            isToday(day) && !isSelected(day) && "bg-accent text-accent-foreground"
+          ),
+          children: day
+        },
+        day
+      )
+    ) })
+  ] });
+}
+var Checkbox = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var Label = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "label",
+    {
+      ref,
+      className: cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Label.displayName = "Label";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React22.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        brand: "border-transparent bg-brand-muted text-brand",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var Command = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+var CommandInput = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx(Search, { className: "me-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = Command$1.Input.displayName;
+var CommandList = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+var CommandEmpty = React22.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+var CommandGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+var CommandSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+var CommandItem = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+var Separator2 = React22.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": !decorative ? orientation : void 0,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator2.displayName = "Separator";
+function DataTableFacetedFilter({
+  column,
+  title,
+  options,
+  variant = "popover",
+  className,
+  isQueryFilter = false,
+  handleFilterChange,
+  currentValue
+}) {
+  const t = useTableTranslations();
+  const [selectedValues, setSelectedValues] = useState(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    let filterValue = [];
+    if (isQueryFilter) {
+      filterValue = currentValue ? [currentValue] : [];
+    } else if (column) {
+      const columnFilterValue = column == null ? void 0 : column.getFilterValue();
+      filterValue = Array.isArray(columnFilterValue) ? columnFilterValue : [];
+    }
+    setSelectedValues(new Set(filterValue));
+  }, [currentValue, column, isQueryFilter]);
+  const handleValueChange = (value) => {
+    if (isQueryFilter) {
+      setSelectedValues(/* @__PURE__ */ new Set([value]));
+    } else {
+      const newSelectedValues = new Set(selectedValues);
+      if (newSelectedValues.has(value)) {
+        newSelectedValues.delete(value);
+      } else {
+        newSelectedValues.add(value);
+      }
+      setSelectedValues(newSelectedValues);
+    }
+    if (isQueryFilter && handleFilterChange && column) {
+      handleFilterChange(String(column.id), value);
+    } else if (!isQueryFilter && column) {
+      const newSelectedValues = new Set(selectedValues);
+      if (newSelectedValues.has(value)) {
+        newSelectedValues.delete(value);
+      } else {
+        newSelectedValues.add(value);
+      }
+      const filterValues = Array.from(newSelectedValues);
+      const finalValue = filterValues.length > 0 ? filterValues : void 0;
+      column.setFilterValue(finalValue);
+    }
+  };
+  const clearFilters = () => {
+    if (isQueryFilter && handleFilterChange && column) {
+      handleFilterChange(String(column.id), void 0);
+    } else if (!isQueryFilter && column) {
+      column.setFilterValue(void 0);
+    }
+  };
+  const renderBadges = () => {
+    if (selectedValues.size === 0) return null;
+    const filteredOptions = options.filter((option) => selectedValues.has(option.value));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "mx-2 h-4" }),
+      /* @__PURE__ */ jsx("div", { className: "flex space-x-1", children: filteredOptions.map((option) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: option.label }, option.value)) })
+    ] });
+  };
+  const renderCommandItems = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+      const isSelected = selectedValues.has(option.value);
+      return /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleValueChange(option.value), children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "me-2 flex size-4 items-center justify-center rounded-sm border border-primary",
+              isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+            ),
+            children: /* @__PURE__ */ jsx(Check, { className: cn("size-4"), "aria-hidden": "true" })
+          }
+        ),
+        option.icon && /* @__PURE__ */ jsx(option.icon, { className: "me-2 size-4 text-muted-foreground", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: option.label })
+      ] }, option.value);
+    }) }),
+    selectedValues.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CommandSeparator, {}),
+      /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(CommandItem, { onSelect: clearFilters, className: "justify-center text-center", children: t("clear-filters") }) })
+    ] })
+  ] });
+  if (variant === "command") {
+    return /* @__PURE__ */ jsxs(Command, { className: "p-1", children: [
+      /* @__PURE__ */ jsx(
+        CommandInput,
+        {
+          placeholder: title,
+          autoFocus: true,
+          className: "flex h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      ),
+      /* @__PURE__ */ jsxs(CommandList, { className: "mt-1", children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: t("no-items-found") }),
+        renderCommandItems()
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: `${className} h-8 border-dashed`, children: [
+      /* @__PURE__ */ jsx(Filter, { className: "me-2 size-4" }),
+      title,
+      renderBadges()
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: title }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: t("no-items-found") }),
+        renderCommandItems()
+      ] })
+    ] }) })
+  ] });
+}
+function DataTableSingleSelectFilter({
+  column,
+  title,
+  options,
+  className,
+  isQueryFilter = false,
+  handleFilterChange,
+  currentValue
+}) {
+  var _a;
+  const t = useTableTranslations();
+  const [open, setOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState("");
+  const columnFilterValue = column && "getFilterValue" in column ? column.getFilterValue() : void 0;
+  useEffect(() => {
+    let filterValue = "";
+    if (isQueryFilter) {
+      filterValue = currentValue || "";
+    } else if (column) {
+      if (Array.isArray(columnFilterValue) && columnFilterValue.length > 0) {
+        filterValue = columnFilterValue[0] || "";
+      } else if (typeof columnFilterValue === "string") {
+        filterValue = columnFilterValue;
+      } else {
+        filterValue = "";
+      }
+    }
+    setSelectedValue(filterValue);
+  }, [currentValue, column, isQueryFilter, columnFilterValue]);
+  const handleValueChange = (value) => {
+    const newValue = value === selectedValue ? "" : value;
+    setSelectedValue(newValue);
+    setOpen(false);
+    if (isQueryFilter && handleFilterChange && column) {
+      handleFilterChange(String(column.id), newValue || void 0);
+    } else if (!isQueryFilter && column) {
+      const filterValue = newValue ? [newValue] : void 0;
+      column.setFilterValue(filterValue);
+    }
+  };
+  const selectedOptionLabel = (_a = options.find((option) => option.value === selectedValue)) == null ? void 0 : _a.label;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: cn("h-8 border-dashed", className),
+        children: [
+          /* @__PURE__ */ jsx(PlusCircle, { className: "me-2 h-4 w-4" }),
+          title,
+          selectedValue && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "mx-2 h-4" }),
+            /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal lg:hidden", children: "1" }),
+            /* @__PURE__ */ jsx("div", { className: "hidden space-x-1 lg:flex", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: selectedOptionLabel }) })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(CommandGroup, { children: [
+      /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleValueChange(""), className: "justify-between", children: [
+        t("all") || "All",
+        /* @__PURE__ */ jsx(
+          Check,
+          {
+            className: cn("h-4 w-4", selectedValue === "" ? "opacity-100" : "opacity-0")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(CommandSeparator, {}),
+      options.map((option) => {
+        const isSelected = selectedValue === option.value;
+        return /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            onSelect: () => handleValueChange(option.value),
+            className: "justify-between",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                option.icon && /* @__PURE__ */ jsx(
+                  option.icon,
+                  {
+                    className: "me-2 h-4 w-4 text-muted-foreground",
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: option.label })
+              ] }),
+              /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4", isSelected ? "opacity-100" : "opacity-0") })
+            ]
+          },
+          option.value
+        );
+      })
+    ] }) }) }) })
+  ] });
+}
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuSubTrigger = React22.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "ps-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ms-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React22.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React22.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "ps-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React22.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pe-2 ps-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pe-2 ps-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React22.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "ps-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("span", { className: cn("ms-auto text-xs tracking-widest opacity-60", className), ...props });
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+function DataTableViewOptions({ table }) {
+  const t = useTableTranslations();
+  const config = useTableConfig();
+  const language = config.i18n.direction === "rtl" || config.i18n.direction === "auto" && config.i18n.locale === "ar" ? "ar" : "en";
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger$1, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "flex h-9 items-center justify-center gap-2 px-4",
+        children: [
+          t("columns"),
+          /* @__PURE__ */ jsx(Columns3, { className: "size-4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "max-w-sm", children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuLabel,
+        {
+          style: {
+            direction: language === "ar" ? "rtl" : "ltr"
+          },
+          children: t("Toggle-Visibility")
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()).map((column) => {
+        return /* @__PURE__ */ jsx(
+          DropdownMenuCheckboxItem,
+          {
+            className: "cursor-pointer capitalize",
+            checked: column.getIsVisible(),
+            onCheckedChange: (value) => column.toggleVisibility(!!value),
+            style: {
+              direction: language === "ar" ? "rtl" : "ltr"
+            },
+            children: typeof column.columnDef.header === "string" ? String(column.columnDef.header) : column.id
+          },
+          column.id
+        );
+      })
+    ] })
+  ] });
+}
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = ({ children, ...props }) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props, children }) });
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React22.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var ButtonTooltip = ({ content }) => {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "absolute inset-0" }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-96 text-wrap", children: content })
+  ] });
+};
+var ActionButton = ({
+  onClick,
+  disabled,
+  className,
+  icon,
+  tooltip,
+  variant = "default"
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      onClick,
+      size: "icon",
+      variant,
+      className: `relative ${className} ${disabled ? "cursor-not-allowed" : ""}`,
+      disabled,
+      children: [
+        icon,
+        tooltip && /* @__PURE__ */ jsx(ButtonTooltip, { content: tooltip })
+      ]
+    }
+  );
+};
+var TableActionsRow = ({
+  editAction,
+  showAction,
+  deleteAction,
+  downloadAction,
+  className,
+  customButtons,
+  text,
+  dropMoreActions,
+  useDropdown = true,
+  cancelAction
+}) => {
+  const t = useTableTranslations();
+  const config = useTableConfig();
+  const isArabic = config.i18n.direction === "rtl" || config.i18n.direction === "auto" && config.i18n.locale === "ar";
+  const commonActions = [
+    editAction && {
+      text: t("edit"),
+      icon: /* @__PURE__ */ jsx(Edit, { className: "text-tab-teal size-4" }),
+      function: editAction.action,
+      disabled: editAction.disabled,
+      className: "bg-tab-teal hover:bg-tab-teal-800",
+      tooltip: t("edit")
+    },
+    showAction && {
+      text: t("show"),
+      icon: /* @__PURE__ */ jsx(Eye, { className: "size-4" }),
+      function: showAction.action,
+      disabled: showAction.disabled,
+      className: "bg-tab-turquoise hover:bg-tab-turquoise-800",
+      tooltip: t("show")
+    },
+    downloadAction && {
+      text: t("download"),
+      icon: /* @__PURE__ */ jsx(Download, { className: "text-main size-4" }),
+      function: downloadAction.action,
+      disabled: downloadAction.disabled,
+      className: "outline outline-1 outline-main",
+      tooltip: t("download"),
+      variant: "ghost"
+    },
+    deleteAction && {
+      text: t("delete"),
+      icon: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-4 text-rose-700" }),
+      function: deleteAction.action,
+      disabled: deleteAction.disabled,
+      className: "outline outline-1 outline-rose-700",
+      tooltip: t("delete"),
+      variant: "ghost"
+    },
+    cancelAction && {
+      text: t("cancel"),
+      icon: /* @__PURE__ */ jsx(XCircle, { className: "size-4 text-rose-600" }),
+      function: cancelAction.action,
+      disabled: cancelAction.disabled,
+      className: "outline outline-1 outline-rose-600",
+      tooltip: cancelAction.tooltip || t("cancel"),
+      variant: "ghost"
+    }
+  ].filter(Boolean);
+  const renderActionButtons = () => {
+    if (useDropdown) {
+      return /* @__PURE__ */ jsxs(DropdownMenu, { dir: isArabic ? "rtl" : "ltr", children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", type: "button", children: /* @__PURE__ */ jsx(MoreVertical, { size: 20 }) }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("actions") }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+            commonActions.map((action, index) => /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                disabled: action == null ? void 0 : action.disabled,
+                className: "flex !justify-between",
+                onClick: action == null ? void 0 : action.function,
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: action == null ? void 0 : action.text }),
+                  /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: action == null ? void 0 : action.icon })
+                ]
+              },
+              index
+            )),
+            dropMoreActions == null ? void 0 : dropMoreActions.map((item, index) => /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                disabled: item.disabled,
+                className: "flex !justify-between",
+                onClick: item.function,
+                ...item == null ? void 0 : item.attr,
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: item.text }),
+                  /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: item.icon }),
+                  item.toolTip && /* @__PURE__ */ jsx(ButtonTooltip, { content: item.toolTip })
+                ]
+              },
+              `more-${index}`
+            ))
+          ] })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: commonActions.map((action, index) => /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        onClick: action == null ? void 0 : action.function,
+        disabled: action == null ? void 0 : action.disabled,
+        className: (action == null ? void 0 : action.className) || "",
+        icon: action == null ? void 0 : action.icon,
+        tooltip: action == null ? void 0 : action.tooltip,
+        variant: action == null ? void 0 : action.variant
+      },
+      index
+    )) });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${className} flex flex-row items-center gap-1 text-center md:gap-3`, children: [
+    renderActionButtons(),
+    customButtons && Array.isArray(customButtons) ? customButtons.filter((customButton) => Object.keys(customButton).length !== 0).map((customButton, index) => /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: customButton == null ? void 0 : customButton.function,
+        className: `${customButton.className || ""} relative flex justify-center gap-2`,
+        ...customButton.attr,
+        children: [
+          customButton.toolTip && /* @__PURE__ */ jsx(ButtonTooltip, { content: customButton.toolTip }),
+          customButton.text,
+          customButton.icon,
+          customButton.children
+        ]
+      },
+      index
+    )) : React22__default.isValidElement(customButtons) ? customButtons : null,
+    text && /* @__PURE__ */ jsx("span", { children: text }),
+    !useDropdown && dropMoreActions && /* @__PURE__ */ jsxs(DropdownMenu, { dir: isArabic ? "rtl" : "ltr", children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", children: /* @__PURE__ */ jsx(MoreVertical, { size: 20 }) }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("actions") }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(DropdownMenuGroup, { children: dropMoreActions.filter((action) => Object.keys(action).length !== 0).map((item, index) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            disabled: item.disabled,
+            className: "flex !justify-between",
+            onClick: item.function,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: item.text }),
+              /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: item.icon })
+            ]
+          },
+          index
+        )) })
+      ] })
+    ] })
+  ] });
+};
+var table_actions_row_default = TableActionsRow;
+function DataTableToolbar({
+  table,
+  viewMode,
+  onViewModeChange,
+  filterableColumns = [],
+  searchableColumns = [],
+  newRowLink,
+  addItemPagePath,
+  deleteRowsAction,
+  isShowExportButtons = {
+    isShow: true,
+    ignoredCols: [],
+    fileName: ""
+  },
+  customButtons,
+  isQuerySearch = false,
+  searchableQuery,
+  isQueryFilter = false,
+  handleFilterChange,
+  filterableQuery,
+  currentFilters,
+  onClearFilters,
+  customCss = ""
+}) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+  const isQueryFiltered = isQueryFilter && currentFilters && Object.keys(currentFilters).length > 0;
+  const hasActiveFilters = isFiltered || isQueryFiltered;
+  const [isPending, startTransition] = React22.useTransition();
+  const [isGoPath, setGoPath] = React22.useState(false);
+  const t = useTableTranslations();
+  const config = useTableConfig();
+  const router = config.router;
+  const [date, setDate] = React22.useState();
+  const isArabic = config.i18n.direction === "rtl" || config.i18n.direction === "auto" && config.i18n.locale === "ar";
+  const goAddItemPage = () => {
+    setGoPath(true);
+    if (addItemPagePath && router) {
+      router.push(addItemPagePath.url);
+    }
+  };
+  const handleExportSelectedRowsCSV = () => {
+    exportSelectedRowsCsv(table, {
+      fileName: isShowExportButtons.fileName,
+      ignoredCols: isShowExportButtons.ignoredCols
+    });
+  };
+  const activeFilterColumns = isQueryFilter ? filterableQuery || [] : filterableColumns;
+  const hasFilters = activeFilterColumns.length > 0;
+  isQuerySearch ? searchableQuery && searchableQuery.length > 0 : searchableColumns.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      config.features.viewToggle && viewMode && onViewModeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-lg border bg-muted/30 p-0.5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewModeChange("table"),
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+              viewMode === "table" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(TableIcon, { className: "size-4" }),
+              t("tableView")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onViewModeChange("cards"),
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+              viewMode === "cards" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }),
+              t("cardView")
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-3", children: [
+        config.features.search && isQuerySearch && searchableQuery && searchableQuery.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: searchableQuery.map((column) => /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-sm", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: String(column.id),
+              type: (column == null ? void 0 : column.type) || "text",
+              placeholder: `${t("Filter")} ${column.title}...`,
+              onChange: column.handleInputChange,
+              defaultValue: column.defaultSearch || "",
+              className: "ps-9"
+            }
+          )
+        ] }, String(column.id))) }),
+        config.features.search && !isQuerySearch && searchableColumns.length > 0 && searchableColumns.map(
+          (column) => {
+            var _a, _b, _c, _d, _e;
+            return table.getColumn(column.id ? String(column.id) : "") && /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-sm", children: (column == null ? void 0 : column.type) === "checkbox" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  id: String(column.id),
+                  checked: ((_a = table.getColumn(String(column.id))) == null ? void 0 : _a.getFilterValue()) === "true",
+                  onCheckedChange: (value) => {
+                    var _a2;
+                    return (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.setFilterValue(value ? "true" : "false");
+                  },
+                  "aria-label": `Filter ${column.title}`,
+                  className: "size-4"
+                }
+              ),
+              /* @__PURE__ */ jsx(Label, { className: "cursor-pointer text-sm", htmlFor: String(column.id), children: column.title })
+            ] }) : (column == null ? void 0 : column.type) === "date" ? /* @__PURE__ */ jsxs(Popover, { children: [
+              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "w-full justify-start text-start font-normal",
+                    !date && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(CalendarIcon, { className: "me-2 size-4" }),
+                    date ? (() => {
+                      var _a2;
+                      const filterValue = (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.getFilterValue();
+                      const parsedDate = filterValue ? new Date(filterValue) : null;
+                      return parsedDate && !isNaN(parsedDate.getTime()) ? format(parsedDate, "PPP", {
+                        locale: isArabic ? ar : enUS
+                      }) : t("datePlaceholder");
+                    })() : t("datePlaceholder")
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  className: "py-2 text-sm",
+                  mode: "single",
+                  selected: ((_b = table.getColumn(String(column.id))) == null ? void 0 : _b.getFilterValue()) ? new Date(
+                    (_c = table.getColumn(String(column.id))) == null ? void 0 : _c.getFilterValue()
+                  ) : void 0,
+                  onSelect: (selectedDate) => {
+                    var _a2;
+                    if (selectedDate && !isNaN(selectedDate.getTime())) {
+                      (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.setFilterValue(format(selectedDate, "yyyy-MM-dd"));
+                      setDate(selectedDate);
+                    }
+                  },
+                  initialFocus: true
+                }
+              ) })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Search, { className: "absolute start-3 top-2.5 h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: String(column.id),
+                  type: (column == null ? void 0 : column.type) || "text",
+                  placeholder: `${t("Filter")} ${column.title}...`,
+                  value: (_e = (_d = table.getColumn(String(column.id))) == null ? void 0 : _d.getFilterValue()) != null ? _e : "",
+                  onChange: (event) => {
+                    var _a2;
+                    return (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.setFilterValue(event.target.value);
+                  },
+                  className: `ps-9 ${customCss}`
+                },
+                String(column.id)
+              )
+            ] }) }, String(column.id));
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        deleteRowsAction && table.getSelectedRowModel().rows.length > 0 ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": "Delete selected rows",
+            variant: "outline",
+            size: "sm",
+            className: "h-9",
+            onClick: (event) => {
+              startTransition(() => {
+                table.toggleAllPageRowsSelected(false);
+                deleteRowsAction(event);
+              });
+            },
+            disabled: isPending,
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "me-2 size-4", "aria-hidden": "true" }),
+              t("Delete")
+            ]
+          }
+        ) : newRowLink ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            "aria-label": "Create new row",
+            href: newRowLink,
+            className: cn(
+              buttonVariants({
+                variant: "outline",
+                size: "sm",
+                className: "h-9"
+              })
+            ),
+            children: [
+              /* @__PURE__ */ jsx(PlusCircle, { className: "me-2 size-4", "aria-hidden": "true" }),
+              t("new")
+            ]
+          }
+        ) : null,
+        config.features.columnVisibility && /* @__PURE__ */ jsx(DataTableViewOptions, { table }),
+        config.features.csvExport && isShowExportButtons.isShow && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            disabled: !table.getSelectedRowModel().rows.length,
+            "aria-label": "Export CSV",
+            title: "Export CSV",
+            variant: "outline",
+            size: "sm",
+            className: "h-9 gap-1.5",
+            onClick: handleExportSelectedRowsCSV,
+            children: [
+              /* @__PURE__ */ jsx(Sheet, { className: "size-4", "aria-hidden": "true" }),
+              t("export-csv")
+            ]
+          }
+        ),
+        customButtons && Array.isArray(customButtons) ? customButtons.filter((customButton) => Object.keys(customButton).length !== 0).map((customButton, index) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: customButton.function,
+            size: "sm",
+            className: `${customButton.className ? customButton.className : ""} relative h-9 gap-1.5`,
+            ...customButton.attr,
+            children: [
+              customButton.toolTip && /* @__PURE__ */ jsx(ButtonTooltip, { content: customButton.toolTip }),
+              customButton.icon,
+              customButton.text,
+              customButton.children
+            ]
+          },
+          index
+        )) : React22.isValidElement(customButtons) ? customButtons : null,
+        addItemPagePath ? (addItemPagePath == null ? void 0 : addItemPagePath.url) ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: goAddItemPage,
+            size: "sm",
+            className: "h-9",
+            disabled: isGoPath,
+            children: [
+              isGoPath ? /* @__PURE__ */ jsx(Loader2, { size: 20, className: "animate-spin" }) : /* @__PURE__ */ jsx(Plus, { size: 20 }),
+              addItemPagePath.text ? addItemPagePath.text : t("add")
+            ]
+          }
+        ) : null : null
+      ] })
+    ] }),
+    config.features.filter && hasFilters && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground whitespace-nowrap", children: t("filter-by") }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        !isQueryFilter && filterableColumns.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: filterableColumns.map((column) => {
+          const columnId = String(column.id);
+          if (column.isSingleSelect) {
+            return /* @__PURE__ */ jsx(
+              DataTableSingleSelectFilter,
+              {
+                column: table.getColumn(columnId),
+                title: column.title,
+                options: column.options,
+                className: ""
+              },
+              columnId
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            DataTableFacetedFilter,
+            {
+              column: table.getColumn(columnId),
+              title: column.title,
+              options: column.options
+            },
+            columnId
+          );
+        }) }),
+        isQueryFilter && filterableQuery && filterableQuery.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: filterableQuery.map((column) => {
+          if (column.isSingleSelect) {
+            return /* @__PURE__ */ jsx(
+              DataTableSingleSelectFilter,
+              {
+                column,
+                title: column.title,
+                options: column.options,
+                isQueryFilter,
+                handleFilterChange,
+                currentValue: currentFilters == null ? void 0 : currentFilters[column.id],
+                className: "w-[180px]"
+              },
+              String(column.id)
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            DataTableFacetedFilter,
+            {
+              column,
+              title: column.title,
+              options: column.options,
+              isQueryFilter,
+              handleFilterChange,
+              currentValue: currentFilters == null ? void 0 : currentFilters[column.id]
+            },
+            String(column.id)
+          );
+        }) }),
+        hasActiveFilters && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": "Reset filters",
+            variant: "ghost",
+            size: "sm",
+            className: "h-8 gap-1.5 text-muted-foreground hover:text-foreground",
+            onClick: () => {
+              if (isQueryFilter && onClearFilters) {
+                onClearFilters();
+              } else {
+                table.resetColumnFilters();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5", "aria-hidden": "true" }),
+              t("Reset")
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var Card = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-xl border bg-card text-card-foreground shadow-sm", className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+function DataTableCardView({ table }) {
+  const t = useTableTranslations();
+  const rows = table.getRowModel().rows;
+  if (!rows.length) {
+    return /* @__PURE__ */ jsx(Card, { className: "mt-3", children: /* @__PURE__ */ jsx(CardContent, { className: "py-16", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsx(SearchX, { className: "size-10 text-muted-foreground/50", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold", children: t("no-records-found") }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("no-records-hint") })
+      ] }),
+      table.getState().columnFilters.length > 0 && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "mt-1 gap-1.5",
+          onClick: () => table.resetColumnFilters(),
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5", "aria-hidden": "true" }),
+            t("reset-filters")
+          ]
+        }
+      )
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: rows.map((row) => {
+    const visibleCells = row.getVisibleCells();
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        "data-state": row.getIsSelected() && "selected",
+        className: "transition-colors data-[state=selected]:border-primary/50 data-[state=selected]:bg-primary/5",
+        children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: row.getIsSelected(),
+                onCheckedChange: (value) => row.toggleSelected(!!value),
+                "aria-label": t("select"),
+                className: "size-4"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              "#",
+              row.index + 1
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibleCells.map((cell) => {
+            if (cell.column.id === "select") return null;
+            const header = cell.column.columnDef.header;
+            const headerLabel = typeof header === "string" ? header : cell.column.id;
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground capitalize shrink-0", children: headerLabel }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-end", children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+            ] }, cell.id);
+          }) })
+        ] })
+      },
+      row.id
+    );
+  }) });
+}
+function DataTableAdvancedFilter({
+  options,
+  selectedOptions,
+  setSelectedOptions,
+  children
+}) {
+  const [value, setValue] = React22.useState("");
+  const [open, setOpen] = React22.useState(false);
+  const [selectedOption, setSelectedOption] = React22.useState(options[0]);
+  const t = useTableTranslations();
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children != null ? children : /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        role: "combobox",
+        className: "h-9 gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx(ListFilter, { className: "size-4" }),
+          t("Filter"),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[220px] p-0", align: "end", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: t("filter-by") }),
+      /* @__PURE__ */ jsx(CommandEmpty, { children: t("no-items-found") }),
+      /* @__PURE__ */ jsx(CommandGroup, { heading: t("Filter"), children: options.map((option) => {
+        const isSelected = selectedOptions.some(
+          (sel) => sel.value === option.value && !sel.isMulti
+        );
+        return /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            className: "gap-2 capitalize",
+            value: String(option.value),
+            onSelect: (currentValue) => {
+              setValue(currentValue === value ? "" : currentValue);
+              setOpen(false);
+              setSelectedOption(option);
+              setSelectedOptions((prev) => {
+                if (isSelected) {
+                  return prev.filter(
+                    (item) => item.value !== option.value || item.isMulti
+                  );
+                } else {
+                  return [...prev, option];
+                }
+              });
+            },
+            children: [
+              option.items.length > 0 ? /* @__PURE__ */ jsx(Rows3, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Type, { className: "size-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label }),
+              isSelected && /* @__PURE__ */ jsx(Check, { className: "size-4 text-primary" })
+            ]
+          },
+          String(option.value)
+        );
+      }) }),
+      /* @__PURE__ */ jsx(CommandSeparator, {}),
+      /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(
+        CommandItem,
+        {
+          className: "gap-2",
+          onSelect: () => {
+            var _a;
+            setOpen(false);
+            setSelectedOptions([
+              ...selectedOptions,
+              {
+                id: crypto.randomUUID(),
+                label: String(selectedOption == null ? void 0 : selectedOption.label),
+                value: String(selectedOption == null ? void 0 : selectedOption.value),
+                items: (_a = selectedOption == null ? void 0 : selectedOption.items) != null ? _a : [],
+                isMulti: true
+              }
+            ]);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Rows3, { className: "size-4 text-muted-foreground" }),
+            t("advanced-filter")
+          ]
+        }
+      ) })
+    ] }) })
+  ] });
+}
+function DataTableAdvancedFilterItem({
+  table,
+  selectedOption,
+  setSelectedOptions
+}) {
+  var _a;
+  const config = useTableConfig();
+  const router = config.router;
+  const searchParams = router ? router.getSearchParams() : new URLSearchParams();
+  const pathname = router ? router.getPathname() : "";
+  const [value, setValue] = React22.useState("");
+  const debounceValue = useDebounce(value, 500);
+  const [open, setOpen] = React22.useState(true);
+  const selectedValues = selectedOption.items.length > 0 ? Array.from(
+    new Set(
+      (_a = table.getColumn(String(selectedOption.value))) == null ? void 0 : _a.getFilterValue()
+    )
+  ) : [];
+  const filterVarieties = selectedOption.items.length > 0 ? ["is", "is not"] : ["contains", "does not contain", "is", "is not"];
+  const [filterVariety, setFilterVariety] = React22.useState(filterVarieties[0]);
+  const createQueryString = React22.useCallback(
+    (params) => {
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+      for (const [key, value2] of Object.entries(params)) {
+        if (value2 === null) {
+          newSearchParams.delete(key);
+        } else {
+          newSearchParams.set(key, String(value2));
+        }
+      }
+      return newSearchParams.toString();
+    },
+    [searchParams]
+  );
+  React22.useEffect(() => {
+    if (!router) return;
+    if (debounceValue.length > 0) {
+      router.push(
+        `${pathname}?${createQueryString({
+          [selectedOption.value]: `${debounceValue}${debounceValue.length > 0 ? `.${filterVariety}` : ""}`
+        })}`
+      );
+    }
+    if (debounceValue.length === 0) {
+      router.push(
+        `${pathname}?${createQueryString({
+          [selectedOption.value]: null
+        })}`
+      );
+    }
+  }, [debounceValue, filterVariety, selectedOption.value]);
+  const handleRemove = () => {
+    if (router) {
+      router.push(
+        `${pathname}?${createQueryString({
+          [selectedOption.value]: null
+        })}`
+      );
+    }
+    setSelectedOptions(
+      (prev) => prev.filter((item) => item.value !== selectedOption.value)
+    );
+  };
+  const hasValue = value.length > 0 || selectedValues.length > 0;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: cn(
+          "h-8 gap-1.5 rounded-full border-dashed",
+          hasValue && "border-solid border-primary/30 bg-primary/5 text-primary hover:bg-primary/10"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium capitalize", children: selectedOption.label }),
+          hasValue && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: filterVariety }),
+            selectedValues.length > 0 ? /* @__PURE__ */ jsx("span", { className: "font-semibold", children: selectedValues.length > 2 ? `${selectedValues.length} selected` : selectedValues.join(", ") }) : /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate font-semibold", children: value })
+          ] }),
+          /* @__PURE__ */ jsx(
+            X,
+            {
+              className: "size-3.5 shrink-0 opacity-50 hover:opacity-100",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemove();
+              }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-64 space-y-2 p-3 text-xs", align: "start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-medium capitalize", children: selectedOption.label }),
+        /* @__PURE__ */ jsxs(Select, { onValueChange: (value2) => setFilterVariety(value2), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 w-fit shrink-0 gap-1 rounded-md border-none bg-muted/50 px-2 text-xs font-medium hover:bg-muted", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: filterVarieties[0] }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: filterVarieties.map((variety) => /* @__PURE__ */ jsx(SelectItem, { value: variety, className: "text-xs", children: variety }, variety)) }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Remove filter",
+            variant: "ghost",
+            size: "icon",
+            className: "size-7 shrink-0 text-muted-foreground hover:text-destructive",
+            onClick: handleRemove,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+          }
+        )
+      ] }),
+      selectedOption.items.length > 0 ? table.getColumn(
+        selectedOption.value ? String(selectedOption.value) : ""
+      ) && /* @__PURE__ */ jsx(
+        DataTableFacetedFilter,
+        {
+          column: table.getColumn(
+            selectedOption.value ? String(selectedOption.value) : ""
+          ),
+          title: selectedOption.label,
+          options: selectedOption.items,
+          variant: "command"
+        },
+        String(selectedOption.value)
+      ) : /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: "Type here...",
+          className: "h-8 text-xs",
+          value,
+          onChange: (event) => setValue(event.target.value),
+          autoFocus: true
+        }
+      )
+    ] })
+  ] });
+}
+var operators = [
+  { label: "And", value: "and" },
+  { label: "Or", value: "or" }
+];
+function DataTableMultiFilter({
+  table,
+  allOptions,
+  options,
+  setSelectedOptions
+}) {
+  const [open, setOpen] = React22.useState(true);
+  const [operator, setOperator] = React22.useState(operators[0]);
+  const t = useTableTranslations();
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-8 gap-1.5 rounded-full border-dashed",
+        children: [
+          /* @__PURE__ */ jsx(GripVertical, { className: "size-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+            options.length,
+            " ",
+            options.length === 1 ? "rule" : "rules"
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-fit min-w-[420px] p-0", align: "start", children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-2 p-4", children: options.map((option, i) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          MultiFilterRow,
+          {
+            i,
+            option,
+            table,
+            allOptions,
+            options,
+            setSelectedOptions,
+            operator,
+            setOperator
+          },
+          (_a = option.id) != null ? _a : i
+        );
+      }) }),
+      /* @__PURE__ */ jsx(Separator2, {}),
+      /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          "aria-label": "Delete filter",
+          variant: "ghost",
+          size: "sm",
+          className: "w-full justify-start gap-2 text-muted-foreground hover:text-destructive",
+          onClick: () => {
+            setSelectedOptions((prev) => prev.filter((item) => !item.isMulti));
+          },
+          children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }),
+            t("delete")
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+function MultiFilterRow({
+  i,
+  table,
+  option,
+  allOptions,
+  options,
+  setSelectedOptions,
+  operator,
+  setOperator
+}) {
+  const config = useTableConfig();
+  const router = config.router;
+  const searchParams = router ? router.getSearchParams() : new URLSearchParams();
+  const pathname = router ? router.getPathname() : "";
+  const [value, setValue] = React22.useState("");
+  const debounceValue = useDebounce(value, 500);
+  const [selectedOption, setSelectedOption] = React22.useState(options[0]);
+  const filterVarieties = (selectedOption == null ? void 0 : selectedOption.items.length) ? ["is", "is not"] : ["contains", "does not contain", "is", "is not"];
+  const [filterVariety, setFilterVariety] = React22.useState(filterVarieties[0]);
+  React22.useEffect(() => {
+    if (selectedOption == null ? void 0 : selectedOption.items.length) {
+      setFilterVariety("is");
+    }
+  }, [selectedOption == null ? void 0 : selectedOption.items.length]);
+  const createQueryString = React22.useCallback(
+    (params) => {
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+      for (const [key, value2] of Object.entries(params)) {
+        if (value2 === null) {
+          newSearchParams.delete(key);
+        } else {
+          newSearchParams.set(key, String(value2));
+        }
+      }
+      return newSearchParams.toString();
+    },
+    [searchParams]
+  );
+  React22.useEffect(() => {
+    var _a, _b;
+    if (!router) return;
+    if (debounceValue.length > 0) {
+      router.push(
+        `${pathname}?${createQueryString({
+          [(_a = selectedOption == null ? void 0 : selectedOption.value) != null ? _a : ""]: `${debounceValue}${debounceValue.length > 0 ? `.${filterVariety}` : ""}`
+        })}`
+      );
+    }
+    if (debounceValue.length === 0) {
+      router.push(
+        `${pathname}?${createQueryString({
+          [(_b = selectedOption == null ? void 0 : selectedOption.value) != null ? _b : ""]: null
+        })}`
+      );
+    }
+  }, [debounceValue, filterVariety, selectedOption == null ? void 0 : selectedOption.value]);
+  React22.useEffect(() => {
+    if (!router) return;
+    if (operator == null ? void 0 : operator.value) {
+      router.push(
+        `${pathname}?${createQueryString({
+          operator: operator.value
+        })}`
+      );
+    }
+  }, [operator == null ? void 0 : operator.value]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-[60px] shrink-0", children: i === 0 ? /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Where" }) : i === 1 ? /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: operator == null ? void 0 : operator.value,
+        onValueChange: (value2) => {
+          const found = operators.find((o) => o.value === value2);
+          if (found) setOperator(found);
+        },
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[60px] text-xs", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: operator == null ? void 0 : operator.label }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: operators.map((op) => /* @__PURE__ */ jsx(
+            SelectItem,
+            {
+              value: op.value,
+              className: "text-xs",
+              children: op.label
+            },
+            op.value
+          )) }) })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: operator == null ? void 0 : operator.label }, operator == null ? void 0 : operator.value) }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: String(selectedOption == null ? void 0 : selectedOption.value),
+        onValueChange: (value2) => {
+          setSelectedOption(allOptions.find((option2) => option2.value === value2));
+          setSelectedOptions(
+            (prev) => prev.map((item) => {
+              if (item.id === option.id) {
+                return { ...item, value: value2 };
+              } else {
+                return item;
+              }
+            })
+          );
+        },
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[120px] text-xs capitalize", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectedOption == null ? void 0 : selectedOption.label }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: allOptions.map((opt) => /* @__PURE__ */ jsx(
+            SelectItem,
+            {
+              value: String(opt.value),
+              className: "text-xs capitalize",
+              children: opt.label
+            },
+            String(opt.value)
+          )) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: filterVariety,
+        onValueChange: (value2) => setFilterVariety(value2),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[140px] text-xs", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: filterVarieties[0] }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: filterVarieties.map((variety) => /* @__PURE__ */ jsx(SelectItem, { value: variety, className: "text-xs", children: variety }, variety)) }) })
+        ]
+      }
+    ),
+    (selectedOption == null ? void 0 : selectedOption.items.length) ? table.getColumn(selectedOption.value ? String(option.value) : "") && /* @__PURE__ */ jsx(
+      DataTableFacetedFilter,
+      {
+        column: table.getColumn(
+          selectedOption.value ? String(selectedOption.value) : ""
+        ),
+        title: selectedOption.label,
+        options: selectedOption.items
+      },
+      selectedOption.id
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        placeholder: "Type here...",
+        className: "h-8 min-w-[120px] text-xs",
+        value,
+        onChange: (event) => setValue(event.target.value),
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-8 shrink-0", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            className: "gap-2 text-destructive focus:text-destructive",
+            onClick: () => {
+              setSelectedOptions(
+                (prev) => prev.filter((item) => item.id !== option.id)
+              );
+            },
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }),
+              "Remove"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            className: "gap-2",
+            onClick: () => {
+              setSelectedOptions((prev) => {
+                var _a;
+                return [
+                  ...prev,
+                  {
+                    id: crypto.randomUUID(),
+                    label: String(selectedOption == null ? void 0 : selectedOption.label),
+                    value: String(selectedOption == null ? void 0 : selectedOption.value),
+                    isMulti: true,
+                    items: (_a = selectedOption == null ? void 0 : selectedOption.items) != null ? _a : []
+                  }
+                ];
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsx(Copy, { className: "size-3.5" }),
+              "Duplicate"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function DataTableAdvancedToolbar({
+  table,
+  filterableColumns = [],
+  searchableColumns = [],
+  addItemPagePath
+}) {
+  const [selectedOptions, setSelectedOptions] = React22.useState([]);
+  const [open, setOpen] = React22.useState(false);
+  const t = useTableTranslations();
+  const config = useTableConfig();
+  const router = config.router;
+  React22.useEffect(() => {
+    if (selectedOptions.length > 0) {
+      setOpen(true);
+    }
+  }, [selectedOptions]);
+  const options = React22.useMemo(() => {
+    const searchableOptions = searchableColumns.map((column) => {
+      var _a;
+      return {
+        id: crypto.randomUUID(),
+        label: (_a = column.title) != null ? _a : String(column.id),
+        value: column.id,
+        items: []
+      };
+    });
+    const filterableOptions = filterableColumns.map((column) => ({
+      id: crypto.randomUUID(),
+      label: column.title,
+      value: column.id,
+      items: column.options
+    }));
+    return [...searchableOptions, ...filterableOptions];
+  }, [filterableColumns, searchableColumns]);
+  const goAddItemPage = () => {
+    if (addItemPagePath && router) {
+      router.push(addItemPagePath);
+    }
+  };
+  const handleClearAll = () => {
+    var _a, _b;
+    setSelectedOptions([]);
+    setOpen(false);
+    for (const col of searchableColumns) {
+      (_a = table.getColumn(String(col.id))) == null ? void 0 : _a.setFilterValue("");
+    }
+    for (const col of filterableColumns) {
+      (_b = table.getColumn(String(col.id))) == null ? void 0 : _b.setFilterValue(void 0);
+    }
+  };
+  const hasActiveFilters = selectedOptions.length > 0 || searchableColumns.some(
+    (col) => {
+      var _a;
+      return !!((_a = table.getColumn(String(col.id))) == null ? void 0 : _a.getFilterValue());
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-3", children: searchableColumns.length > 0 && searchableColumns.map(
+        (column) => {
+          var _a, _b, _c;
+          return table.getColumn(column.id ? String(column.id) : "") && /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-sm", children: [
+            /* @__PURE__ */ jsx(Search, { className: "absolute start-3 top-2.5 size-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: `${t("Filter")} ${(_a = column.title) != null ? _a : String(column.id)}...`,
+                value: (_c = (_b = table.getColumn(String(column.id))) == null ? void 0 : _b.getFilterValue()) != null ? _c : "",
+                onChange: (event) => {
+                  var _a2;
+                  return (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.setFilterValue(event.target.value);
+                },
+                className: "ps-9"
+              }
+            )
+          ] }, String(column.id));
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "h-9 gap-1.5",
+            onClick: () => setOpen((prev) => !prev),
+            children: [
+              /* @__PURE__ */ jsx(ListFilter, { className: "size-4" }),
+              t("Filter"),
+              /* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground", children: selectedOptions.length })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          DataTableAdvancedFilter,
+          {
+            options: options.filter(
+              (option) => !selectedOptions.some(
+                (selectedOption) => selectedOption.value === option.value
+              )
+            ),
+            selectedOptions,
+            setSelectedOptions
+          }
+        ),
+        /* @__PURE__ */ jsx(DataTableViewOptions, { table }),
+        addItemPagePath && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: goAddItemPage,
+            size: "sm",
+            className: "h-9",
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+              t("add")
+            ]
+          }
+        )
+      ] })
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground whitespace-nowrap", children: t("filter-by") }),
+      selectedOptions.some((option) => option.isMulti) && /* @__PURE__ */ jsx(
+        DataTableMultiFilter,
+        {
+          table,
+          allOptions: options,
+          options: selectedOptions.filter((option) => option.isMulti),
+          setSelectedOptions
+        }
+      ),
+      selectedOptions.filter((option) => !option.isMulti).map((selectedOption) => /* @__PURE__ */ jsx(
+        DataTableAdvancedFilterItem,
+        {
+          table,
+          selectedOption,
+          setSelectedOptions
+        },
+        String(selectedOption.value)
+      )),
+      /* @__PURE__ */ jsx(
+        DataTableAdvancedFilter,
+        {
+          options,
+          selectedOptions,
+          setSelectedOptions,
+          children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              role: "combobox",
+              className: "h-8 gap-1.5 rounded-full border-dashed text-muted-foreground hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                t("add-filter")
+              ]
+            }
+          )
+        }
+      ),
+      hasActiveFilters && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-8 gap-1.5 text-muted-foreground hover:text-foreground",
+          onClick: handleClearAll,
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5" }),
+            t("Reset")
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var Drawer = ({ shouldScaleBackground = true, ...props }) => /* @__PURE__ */ jsx(Drawer$1.Root, { shouldScaleBackground, ...props });
+Drawer.displayName = "Drawer";
+var DrawerTrigger = Drawer$1.Trigger;
+var DrawerPortal = Drawer$1.Portal;
+var DrawerClose = Drawer$1.Close;
+var DrawerOverlay = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Overlay,
+  {
+    ref,
+    className: cn("fixed inset-0 z-50 bg-black/80", className),
+    ...props
+  }
+));
+DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
+var DrawerContent = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Drawer$1.Content,
+    {
+      ref,
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("grid gap-1.5 p-4 text-center sm:text-start", className), ...props });
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props });
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = Drawer$1.Title.displayName;
+var DrawerDescription = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = Drawer$1.Description.displayName;
+function DataTableMobileToolbar({
+  table,
+  filterableColumns = [],
+  searchableColumns = [],
+  addItemPagePath,
+  isShowExportButtons = {
+    isShow: true,
+    ignoredCols: [],
+    fileName: ""
+  },
+  customButtons
+}) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+  const [isGoPath, setGoPath] = React22.useState(false);
+  const t = useTableTranslations();
+  const config = useTableConfig();
+  const router = config.router;
+  const [date, setDate] = React22.useState();
+  const isArabic = config.i18n.direction === "rtl" || config.i18n.direction === "auto" && config.i18n.locale === "ar";
+  const goAddItemPage = () => {
+    setGoPath(true);
+    if (addItemPagePath && router) {
+      router.push(addItemPagePath.url);
+    }
+  };
+  const handleExportSelectedRowsCSV = () => {
+    exportSelectedRowsCsv(table, {
+      fileName: isShowExportButtons.fileName,
+      ignoredCols: isShowExportButtons.ignoredCols
+    });
+  };
+  return /* @__PURE__ */ jsxs(Drawer, { children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 px-2", children: [
+      isFiltered ? /* @__PURE__ */ jsx("span", { className: "bg-main me-2 inline-flex size-3 rounded-full" }) : /* @__PURE__ */ jsx(Filter, { className: "me-2 size-4", "aria-hidden": "true" }),
+      t("Filter")
+    ] }) }),
+    isShowExportButtons.isShow && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled: !table.getSelectedRowModel().rows.length,
+        "aria-label": t("export-csv"),
+        title: t("export-csv"),
+        variant: "outline",
+        className: "h-8 px-2 text-sm",
+        onClick: handleExportSelectedRowsCSV,
+        children: [
+          /* @__PURE__ */ jsx(Sheet, { className: "me-2 size-4", "aria-hidden": "true" }),
+          t("export-csv")
+        ]
+      }
+    ),
+    addItemPagePath ? (addItemPagePath == null ? void 0 : addItemPagePath.url) ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: goAddItemPage,
+        size: "sm",
+        className: "flex h-8 flex-row gap-3 px-2 text-sm",
+        disabled: isGoPath,
+        children: [
+          isGoPath ? /* @__PURE__ */ jsx(Loader2, { size: 20, className: "animate-spin" }) : /* @__PURE__ */ jsx(Plus, { size: 20 }),
+          addItemPagePath.text ? addItemPagePath.text : t("add")
+        ]
+      }
+    ) : null : null,
+    /* @__PURE__ */ jsx(DrawerContent, { children: /* @__PURE__ */ jsxs("div", { className: "mx-auto size-full max-w-sm text-sm", children: [
+      /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { children: t("Filter") }),
+        /* @__PURE__ */ jsx(DrawerDescription, { children: t("data-table-filter") })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 pb-0 text-sm", children: /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-2", children: [
+          searchableColumns.length > 0 && searchableColumns.map(
+            (column) => {
+              var _a, _b, _c, _d, _e;
+              return table.getColumn(column.id ? String(column.id) : "") && /* @__PURE__ */ jsx("div", { className: "w-full space-y-2", children: (column == null ? void 0 : column.type) === "checkbox" ? /* @__PURE__ */ jsxs("div", { className: "mb-2 flex justify-between gap-2", children: [
+                /* @__PURE__ */ jsx(Label, { className: "cursor-pointer", htmlFor: String(column.id), children: column.title }),
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: String(column.id),
+                    checked: ((_a = table.getColumn(String(column.id))) == null ? void 0 : _a.getFilterValue()) === "true",
+                    onCheckedChange: (value) => {
+                      var _a2;
+                      return (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.setFilterValue(value ? "true" : "false");
+                    },
+                    "aria-label": `Filter ${column.title}`,
+                    className: "size-4"
+                  }
+                )
+              ] }) : (column == null ? void 0 : column.type) === "date" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: String(column.id), children: column.title }),
+                /* @__PURE__ */ jsxs(Popover, { children: [
+                  /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      variant: "outline",
+                      className: cn(
+                        "w-full justify-start text-start font-normal",
+                        !date && "text-muted-foreground"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(CalendarIcon, { className: "mx-2 size-4" }),
+                        date ? (() => {
+                          var _a2;
+                          const filterValue = (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.getFilterValue();
+                          const parsedDate = filterValue && !isNaN(new Date(filterValue).getTime()) ? new Date(filterValue) : null;
+                          return parsedDate ? format(parsedDate, "PPP", {
+                            locale: isArabic ? ar : enUS
+                          }) : `${t("Filter")} ${column.title}...`;
+                        })() : `${t("Filter")} ${column.title}...`
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+                    Calendar,
+                    {
+                      className: "py-2 text-sm",
+                      mode: "single",
+                      selected: ((_b = table.getColumn(String(column.id))) == null ? void 0 : _b.getFilterValue()) ? new Date(
+                        (_c = table.getColumn(String(column.id))) == null ? void 0 : _c.getFilterValue()
+                      ) : void 0,
+                      onSelect: (selectedDate) => {
+                        var _a2;
+                        if (selectedDate && !isNaN(selectedDate.getTime())) {
+                          (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.setFilterValue(format(selectedDate, "yyyy-MM-dd"));
+                          setDate(selectedDate);
+                        }
+                      },
+                      initialFocus: true
+                    }
+                  ) })
+                ] })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: String(column.id), children: column.title }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: String(column.id),
+                    type: (column == null ? void 0 : column.type) || "text",
+                    placeholder: `${t("Filter")} ${column.title}...`,
+                    value: (_e = (_d = table.getColumn(String(column.id))) == null ? void 0 : _d.getFilterValue()) != null ? _e : "",
+                    onChange: (event) => {
+                      var _a2;
+                      return (_a2 = table.getColumn(String(column.id))) == null ? void 0 : _a2.setFilterValue(event.target.value);
+                    },
+                    className: "h-8 w-full py-0"
+                  },
+                  String(column.id)
+                )
+              ] }) }, String(column.id));
+            }
+          ),
+          /* @__PURE__ */ jsx(Separator2, { className: "bg-main-300 my-2 h-px w-full" }),
+          /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-4", children: filterableColumns.length > 0 && filterableColumns.map(
+            (column) => table.getColumn(column.id ? String(column.id) : "") && /* @__PURE__ */ jsx(
+              DataTableFacetedFilter,
+              {
+                className: "justify-start",
+                column: table.getColumn(column.id ? String(column.id) : ""),
+                title: column.title,
+                options: column.options
+              },
+              String(column.id)
+            )
+          ) }),
+          /* @__PURE__ */ jsx(Separator2, { className: "bg-main-300 my-2 h-px w-full" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+          /* @__PURE__ */ jsx(DataTableViewOptions, { table }),
+          customButtons && Array.isArray(customButtons) ? customButtons.filter((customButton) => Object.keys(customButton).length !== 0).map((customButton, index) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: customButton.function,
+              variant: "outline",
+              className: `${customButton.className ? customButton.className : ""} relative flex justify-center gap-2 text-nowrap text-sm`,
+              ...customButton.attr,
+              children: [
+                customButton.toolTip && /* @__PURE__ */ jsx(ButtonTooltip, { content: customButton.toolTip }),
+                customButton.text,
+                customButton.icon,
+                customButton.children
+              ]
+            },
+            index
+          )) : React22.isValidElement(customButtons) ? customButtons : null
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs(DrawerFooter, { className: "grid grid-cols-2", children: [
+        /* @__PURE__ */ jsx(Separator2, { className: "bg-main-300 col-span-2 my-2 h-px" }),
+        /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { disabled: !isFiltered, children: t("Apply") }) }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": "Reset filters",
+            variant: "outline",
+            disabled: !isFiltered,
+            onClick: () => table.resetColumnFilters(),
+            children: [
+              t("Reset"),
+              /* @__PURE__ */ jsx(X, { className: "ms-2 size-4", "aria-hidden": "true" })
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+var EMPTY_DATA = [];
+function DataTable({
+  columns,
+  data,
+  pageCount,
+  pageSize: defaultPageSize,
+  filterableColumns = [],
+  searchableColumns = [],
+  showFilter,
+  showPagination,
+  floatingBar,
+  deleteRowsAction,
+  addItemPagePath,
+  isShowExportButtons = {
+    isShow: true,
+    ignoredCols: [],
+    fileName: ""
+  },
+  customButtons,
+  isQueryPagination = false,
+  paginationData,
+  isQuerySearch = false,
+  searchableQuery = [],
+  isLoading,
+  isQueryFilter = false,
+  handleFilterChange,
+  filterableQuery,
+  currentFilters,
+  onClearFilters,
+  customCss,
+  isShowAdvancedFilter,
+  config: instanceConfig
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const t = useTableTranslations();
+  const resolvedConfig = useResolvedTableConfig(instanceConfig);
+  const router = resolvedConfig.router;
+  const shouldShowFilter = showFilter != null ? showFilter : resolvedConfig.features.filter;
+  const shouldShowPagination = showPagination != null ? showPagination : resolvedConfig.features.pagination;
+  floatingBar != null ? floatingBar : resolvedConfig.features.floatingBar;
+  const shouldShowAdvancedFilter = isShowAdvancedFilter != null ? isShowAdvancedFilter : resolvedConfig.features.advancedFilter;
+  const resolvedPageSize = defaultPageSize != null ? defaultPageSize : resolvedConfig.pagination.defaultPageSize;
+  const isManualFiltering = isQuerySearch || isQueryFilter;
+  const isManualPagination = isQueryPagination;
+  const isManualSorting = isQueryPagination || isQuerySearch || isQueryFilter;
+  const searchParams = router ? router.getSearchParams() : new URLSearchParams();
+  const pathname = router ? router.getPathname() : "";
+  const page = (_a = searchParams.get("page")) != null ? _a : "1";
+  const pageAsNumber = Number(page);
+  const fallbackPage = isNaN(pageAsNumber) || pageAsNumber < 1 ? 1 : pageAsNumber;
+  const per_page = (_b = searchParams.get("per_page")) != null ? _b : "10";
+  const perPageAsNumber = Number(per_page);
+  const fallbackPerPage = isNaN(perPageAsNumber) ? resolvedPageSize : perPageAsNumber;
+  const sort = searchParams.get("sort");
+  const [column, order] = (_c = sort == null ? void 0 : sort.split(".")) != null ? _c : [];
+  const createQueryString = React22.useCallback(
+    (params) => {
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+      for (const [key, value] of Object.entries(params)) {
+        if (value === null) {
+          newSearchParams.delete(key);
+        } else {
+          newSearchParams.set(key, String(value));
+        }
+      }
+      return newSearchParams.toString();
+    },
+    [searchParams]
+  );
+  const [viewMode, setViewMode] = React22.useState("table");
+  const [rowSelection, setRowSelection] = React22.useState({});
+  const [columnVisibility, setColumnVisibility] = React22.useState({});
+  const initializeColumnFilters = React22.useCallback(() => {
+    const filters = [];
+    if (!isQuerySearch && searchableColumns.length > 0) {
+      for (const col of searchableColumns) {
+        const urlValue = searchParams.get(String(col.id));
+        if (urlValue) {
+          filters.push({ id: String(col.id), value: urlValue });
+        }
+      }
+    }
+    if (!isQueryFilter && filterableColumns.length > 0) {
+      for (const col of filterableColumns) {
+        const urlValue = searchParams.get(String(col.id));
+        if (urlValue) {
+          filters.push({ id: String(col.id), value: urlValue.split(".") });
+        }
+      }
+    }
+    return filters;
+  }, [searchParams, searchableColumns, filterableColumns, isQuerySearch, isQueryFilter]);
+  const [columnFilters, setColumnFilters] = React22.useState(initializeColumnFilters);
+  React22.useEffect(() => {
+    const urlFilters = initializeColumnFilters();
+    setColumnFilters((prevFilters) => {
+      const urlFilterString = JSON.stringify(urlFilters);
+      const prevFilterString = JSON.stringify(prevFilters);
+      if (urlFilterString !== prevFilterString) {
+        return urlFilters;
+      }
+      return prevFilters;
+    });
+  }, [initializeColumnFilters]);
+  const [{ pageIndex, pageSize }, setPagination] = React22.useState({
+    pageIndex: fallbackPage - 1,
+    pageSize: fallbackPerPage
+  });
+  const pagination = React22.useMemo(
+    () => ({ pageIndex, pageSize }),
+    [pageIndex, pageSize]
+  );
+  React22.useEffect(() => {
+    setPagination({
+      pageIndex: fallbackPage - 1,
+      pageSize: fallbackPerPage
+    });
+  }, [fallbackPage, fallbackPerPage]);
+  const paginationMountRef = React22.useRef(true);
+  React22.useEffect(() => {
+    if (isQueryPagination || !router) return;
+    if (paginationMountRef.current) {
+      paginationMountRef.current = false;
+      return;
+    }
+    const replaceUrl = router.replace || router.push;
+    replaceUrl(`${pathname}?${createQueryString({ page: pageIndex + 1, per_page: pageSize })}`);
+  }, [pageIndex, pageSize, isQueryPagination]);
+  const [sorting, setSorting] = React22.useState(
+    column ? [{ id: column, desc: order === "desc" }] : []
+  );
+  const sortingMountRef = React22.useRef(true);
+  React22.useEffect(() => {
+    var _a2, _b2, _c2;
+    if (!router) return;
+    if (sortingMountRef.current) {
+      sortingMountRef.current = false;
+      return;
+    }
+    const replaceUrl = router.replace || router.push;
+    replaceUrl(
+      `${pathname}?${createQueryString({
+        page,
+        sort: ((_a2 = sorting[0]) == null ? void 0 : _a2.id) ? `${(_b2 = sorting[0]) == null ? void 0 : _b2.id}.${((_c2 = sorting[0]) == null ? void 0 : _c2.desc) ? "desc" : "asc"}` : null
+      })}`
+    );
+  }, [sorting]);
+  const searchableColumnFilters = React22.useMemo(
+    () => columnFilters.filter((filter) => searchableColumns.find((col) => col.id === filter.id)),
+    [columnFilters, searchableColumns]
+  );
+  const debouncedSearchableColumnFilters = useDebounce(searchableColumnFilters, resolvedConfig.search.debounceMs);
+  const filterableColumnFilters = React22.useMemo(
+    () => columnFilters.filter((filter) => filterableColumns.find((col) => col.id === filter.id)),
+    [columnFilters, filterableColumns]
+  );
+  const debouncedSearchableString = JSON.stringify(debouncedSearchableColumnFilters);
+  const filterableString = JSON.stringify(filterableColumnFilters);
+  React22.useEffect(() => {
+    if (isQuerySearch || !router) return;
+    const currentDebouncedFilters = JSON.parse(debouncedSearchableString);
+    const updates = {};
+    let hasChanges = false;
+    for (const col of currentDebouncedFilters) {
+      if (typeof col.value === "string" && col.value.trim()) {
+        const newValue = col.value.trim();
+        updates[col.id] = newValue;
+        if (searchParams.get(String(col.id)) !== newValue) {
+          hasChanges = true;
+        }
+      }
+    }
+    for (const key of Array.from(searchParams.keys())) {
+      if (searchableColumns.find((col) => String(col.id) === key) && !currentDebouncedFilters.find((col) => col.id === key)) {
+        updates[key] = null;
+        hasChanges = true;
+      }
+    }
+    if (hasChanges) {
+      updates.page = 1;
+    }
+    const newQueryString = createQueryString(updates);
+    const currentQueryString = searchParams.toString() || "";
+    if (newQueryString !== currentQueryString && hasChanges) {
+      const replaceUrl = router.replace || router.push;
+      replaceUrl(`${pathname}?${newQueryString}`);
+    }
+  }, [debouncedSearchableString, isQuerySearch]);
+  React22.useEffect(() => {
+    if (isQueryFilter || !router) return;
+    const currentFilterableFilters = JSON.parse(filterableString);
+    const updates = {};
+    let hasChanges = false;
+    for (const col of currentFilterableFilters) {
+      if (typeof col.value === "object" && Array.isArray(col.value) && col.value.length > 0) {
+        const newValue = col.value.join(".");
+        updates[col.id] = newValue;
+        if (searchParams.get(String(col.id)) !== newValue) {
+          hasChanges = true;
+        }
+      }
+    }
+    for (const key of Array.from(searchParams.keys())) {
+      if (filterableColumns.find((col) => String(col.id) === key) && !currentFilterableFilters.find((col) => col.id === key)) {
+        updates[key] = null;
+        hasChanges = true;
+      }
+    }
+    if (hasChanges) {
+      updates.page = 1;
+    }
+    const newQueryString = createQueryString(updates);
+    const currentQueryString = searchParams.toString() || "";
+    if (newQueryString !== currentQueryString && hasChanges) {
+      const replaceUrl = router.replace || router.push;
+      replaceUrl(`${pathname}?${newQueryString}`);
+    }
+  }, [filterableString, isQueryFilter]);
+  const table = useReactTable({
+    data: data != null ? data : EMPTY_DATA,
+    columns,
+    pageCount: pageCount != null ? pageCount : -1,
+    state: {
+      pagination,
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters
+    },
+    enableRowSelection: resolvedConfig.features.rowSelection,
+    enableSorting: resolvedConfig.features.sorting,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    manualPagination: isManualPagination,
+    manualSorting: isManualSorting,
+    manualFiltering: isManualFiltering
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    shouldShowFilter ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "max-md:hidden", children: shouldShowAdvancedFilter && !isQuerySearch && !isQueryFilter ? /* @__PURE__ */ jsx(
+        DataTableAdvancedToolbar,
+        {
+          table,
+          searchableColumns,
+          filterableColumns,
+          addItemPagePath: addItemPagePath == null ? void 0 : addItemPagePath.url
+        }
+      ) : /* @__PURE__ */ jsx(
+        DataTableToolbar,
+        {
+          table,
+          viewMode,
+          onViewModeChange: setViewMode,
+          addItemPagePath,
+          isShowExportButtons,
+          customButtons,
+          customCss,
+          ...isQuerySearch === true ? {
+            isQuerySearch,
+            searchableQuery
+          } : {
+            isQuerySearch,
+            searchableColumns
+          },
+          ...isQueryFilter && handleFilterChange ? {
+            isQueryFilter: true,
+            handleFilterChange,
+            filterableQuery: filterableQuery || [],
+            currentFilters,
+            onClearFilters
+          } : {
+            isQueryFilter: false,
+            filterableColumns
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between md:hidden", children: /* @__PURE__ */ jsx(
+        DataTableMobileToolbar,
+        {
+          table,
+          filterableColumns,
+          searchableColumns,
+          addItemPagePath,
+          isShowExportButtons,
+          customButtons
+        }
+      ) })
+    ] }) : null,
+    viewMode === "cards" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DataTableCardView, { table }),
+      shouldShowPagination ? /* @__PURE__ */ jsx(Card, { className: "mt-3 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "space-y-2.5", children: isQueryPagination && paginationData ? /* @__PURE__ */ jsx(
+        DataTablePagination,
+        {
+          table,
+          isQueryPagination: true,
+          paginationData
+        }
+      ) : /* @__PURE__ */ jsx(DataTablePagination, { table, isQueryPagination: false }) }) }) : null
+    ] }) : /* @__PURE__ */ jsxs(Card, { className: "mt-3 overflow-hidden", children: [
+      /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: "bg-muted/50", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+          const sortDirection = header.column.getIsSorted();
+          return /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              className: "text-nowrap",
+              "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : void 0,
+              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsx(TableBody, { children: ((_e = (_d = table.getRowModel()) == null ? void 0 : _d.rows) == null ? void 0 : _e.length) ? (_f = table.getRowModel()) == null ? void 0 : _f.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+          TableRow,
+          {
+            "data-state": row.getIsSelected() && "selected",
+            "aria-rowindex": pageIndex * pageSize + rowIndex + 2,
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: "max-w-60 text-ellipsis text-nowrap", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          },
+          row.id
+        )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "py-16 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ jsx(SearchX, { className: "size-10 text-muted-foreground/50", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold", children: t("no-records-found") }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("no-records-hint") })
+          ] }),
+          (table.getState().columnFilters.length > 0 || isQueryFilter && currentFilters && Object.keys(currentFilters).length > 0) && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "mt-1 gap-1.5",
+              onClick: () => {
+                if (isQueryFilter && onClearFilters) {
+                  onClearFilters();
+                } else {
+                  table.resetColumnFilters();
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5", "aria-hidden": "true" }),
+                t("reset-filters")
+              ]
+            }
+          )
+        ] }) }) }) })
+      ] }) }),
+      shouldShowPagination ? /* @__PURE__ */ jsx("div", { className: "space-y-2.5", children: isQueryPagination && paginationData ? /* @__PURE__ */ jsx(
+        DataTablePagination,
+        {
+          table,
+          isQueryPagination: true,
+          paginationData
+        }
+      ) : /* @__PURE__ */ jsx(DataTablePagination, { table, isQueryPagination: false }) }) : null
+    ] })
+  ] });
+}
+function DataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  const t = useTableTranslations();
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsx("div", { className: cn(className), children: title });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-label": column.getIsSorted() === "desc" ? t("sorted-desc") : column.getIsSorted() === "asc" ? t("sorted-asc") : t("not-sorted"),
+        variant: "ghost",
+        size: "sm",
+        className: "-ms-3 h-8 data-[state=open]:bg-accent",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: title }),
+          column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "ms-2 size-4", "aria-hidden": "true" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ms-2 size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(SortAsc, { className: "ms-2 size-4", "aria-hidden": "true" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { "aria-label": t("sort-ascending"), onClick: () => column.toggleSorting(false), children: [
+        /* @__PURE__ */ jsx(ArrowUpIcon, { className: "me-2 size-3.5 text-muted-foreground/70", "aria-hidden": "true" }),
+        t("asc")
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { "aria-label": t("sort-descending"), onClick: () => column.toggleSorting(true), children: [
+        /* @__PURE__ */ jsx(ArrowDownIcon, { className: "me-2 size-3.5 text-muted-foreground/70", "aria-hidden": "true" }),
+        t("desc")
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { "aria-label": t("hide-column"), onClick: () => column.toggleVisibility(false), children: [
+        /* @__PURE__ */ jsx(EyeOffIcon, { className: "me-2 size-3.5 text-muted-foreground/70", "aria-hidden": "true" }),
+        t("Hide")
+      ] })
+    ] })
+  ] }) });
+}
+function ClientSideTable({
+  data,
+  pageCount,
+  pageSize = 10,
+  columns: initialColumns,
+  searchableColumns = [],
+  showFilter = true,
+  showPagination = true,
+  filterableColumns = [],
+  addItemPagePath,
+  isShowExportButtons = {
+    isShow: true,
+    ignoredCols: [],
+    fileName: ""
+  },
+  customButtons,
+  withIndex = true,
+  isQueryPagination = false,
+  paginationData,
+  isLoading = false,
+  isQuerySearch = false,
+  searchableQuery = [],
+  isQueryFilter = false,
+  handleFilterChange,
+  filterableQuery,
+  currentFilters,
+  onClearFilters,
+  customCss,
+  isShowAdvancedFilter = false,
+  config
+}) {
+  const t = useTableTranslations();
+  const columns = React22.useMemo(() => {
+    return [
+      ...withIndex ? [
+        {
+          accessorKey: "i",
+          header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, { column, title: t("row-number") }),
+          cell: ({ row, table }) => /* @__PURE__ */ jsx("div", { className: "w-full", children: table.getState().pagination.pageIndex + 1 === 1 ? row.index + 1 : table.getState().pagination.pageIndex + 1 > 1 ? table.getState().pagination.pageIndex * table.getState().pagination.pageSize + (row.index + 1) : row.index + 1 }),
+          enableSorting: false,
+          enableHiding: false
+        }
+      ] : [],
+      ...initialColumns
+    ];
+  }, [initialColumns, withIndex, t]);
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      columns,
+      data,
+      pageCount,
+      pageSize,
+      showFilter,
+      showPagination,
+      addItemPagePath,
+      isShowExportButtons,
+      customButtons,
+      floatingBar: true,
+      isLoading,
+      customCss,
+      isShowAdvancedFilter,
+      config,
+      ...isQuerySearch ? { isQuerySearch: true, searchableQuery } : {
+        isQuerySearch: false,
+        searchableColumns
+      },
+      ...isQueryPagination && paginationData ? { isQueryPagination: true, paginationData } : { isQueryPagination: false },
+      ...isQueryFilter && handleFilterChange ? {
+        isQueryFilter: true,
+        handleFilterChange,
+        filterableQuery: filterableQuery || [],
+        currentFilters,
+        onClearFilters
+      } : {
+        isQueryFilter: false,
+        filterableColumns: filterableColumns || []
+      }
+    }
+  );
+}
+function DataTableFloatingBar({
+  table,
+  deleteRowsAction,
+  className,
+  ...props
+}) {
+  const t = useTableTranslations();
+  if (table.getFilteredSelectedRowModel().rows.length <= 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-fit items-center gap-2 rounded-md bg-zinc-900 px-4 py-2 text-white",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": t("clear-selection"),
+            title: t("clear-selection"),
+            className: "h-auto bg-transparent p-1 text-white hover:bg-zinc-700",
+            onClick: () => table.toggleAllRowsSelected(false),
+            children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { children: [
+          table.getFilteredSelectedRowModel().rows.length,
+          " ",
+          t("row(s) selected")
+        ] }),
+        deleteRowsAction && /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": t("delete-selected"),
+            title: t("delete"),
+            className: "h-auto bg-transparent p-1 text-white hover:bg-zinc-700",
+            onClick: (event) => {
+              table.toggleAllPageRowsSelected(false);
+              deleteRowsAction(event);
+            },
+            children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+function DataTableRoleFilter({
+  column,
+  title,
+  options,
+  paramKey
+}) {
+  var _a;
+  const config = useTableConfig();
+  const router = config.router;
+  const t = useTableTranslations();
+  const resolvedParamKey = paramKey != null ? paramKey : column ? String(column.id) : "role";
+  const searchParams = router ? router.getSearchParams() : new URLSearchParams();
+  const currentValue = router ? searchParams.get(resolvedParamKey) || void 0 : column == null ? void 0 : column.getFilterValue();
+  const handleSelect = (value) => {
+    if (router) {
+      const newParams = new URLSearchParams(searchParams.toString());
+      if (value) {
+        newParams.set(resolvedParamKey, value);
+      } else {
+        newParams.delete(resolvedParamKey);
+      }
+      newParams.set("page", "1");
+      router.push(`?${newParams.toString()}`);
+    }
+    column == null ? void 0 : column.setFilterValue(value);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 border-dashed", children: [
+      /* @__PURE__ */ jsx(ChevronsUpDown, { className: "me-2 h-4 w-4 opacity-50" }),
+      title,
+      currentValue && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "mx-2 text-muted-foreground", children: "|" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: (_a = options.find((opt) => opt.value === currentValue)) == null ? void 0 : _a.label })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: `${t("Filter")} ${title}...` }),
+      /* @__PURE__ */ jsx(CommandEmpty, { children: t("no-items-found") }),
+      /* @__PURE__ */ jsxs(CommandGroup, { className: "max-h-64 overflow-auto", children: [
+        /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleSelect(void 0), className: "cursor-pointer", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "me-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                !currentValue ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+              ),
+              children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: t("all") })
+        ] }),
+        options.map((option) => {
+          const isSelected = currentValue === option.value;
+          return /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              onSelect: () => handleSelect(option.value),
+              className: "cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "me-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    ),
+                    children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: option.label })
+              ]
+            },
+            option.value
+          );
+        })
+      ] })
+    ] }) })
+  ] });
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-primary/10", className), ...props });
+}
+var DataTableLoading = React22__default.memo(function DataTableLoading2({ columnCount, rowCount = 10 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-3 overflow-auto", role: "status", "aria-busy": "true", "aria-label": "Loading data", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2 overflow-auto p-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-[150px] lg:w-[250px]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-[70px] border-dashed" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "ms-auto hidden h-7 w-[70px] lg:flex" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: Array.from({ length: 1 }).map((_, i) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, j) => /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) }, j)) }, i)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, i) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, j) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }) }, j)) }, i)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-40" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-[70px]" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "hidden size-8 lg:block" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "hidden size-8 lg:block" })
+        ] })
+      ] })
+    ] })
+  ] });
+});
+
+export { ButtonTooltip, ClientSideTable, DEFAULT_TABLE_CONFIG, DataTable, DataTableAdvancedFilter, DataTableAdvancedFilterItem, DataTableAdvancedToolbar, DataTableCardView, DataTableColumnHeader, DataTableFacetedFilter, DataTableFloatingBar, DataTableLoading, DataTableMobileToolbar, DataTableMultiFilter, DataTablePagination, DataTableRoleFilter, DataTableSingleSelectFilter, DataTableToolbar, DataTableViewOptions, MultiFilterRow, table_actions_row_default as TableActionsRow, TableProvider, cn, createCsvConfig, createTableConfig, deepMergeConfig, exportSelectedRowsCsv, useDebounce, useGlobalTableConfig, useResolvedTableConfig, useTableConfig, useTableTranslations };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map