@pulog/component 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,3844 @@
+import { SelectionProvider, useSelection } from './chunk-3JJG43AS.js';
+export { SelectionProvider, SelectionSummary, useSelection } from './chunk-3JJG43AS.js';
+import React14, { createContext, useState, useCallback, useContext, useMemo, useRef, useEffect } from 'react';
+import { Button, Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Calendar, Card, Badge, Popover, PopoverTrigger, PopoverContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Skeleton, EmptyStateIllustration } from '@pulog/ui';
+import { Search, CalendarSearch, Filter, Plus, Minus, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, Loader2, X, Check, ChevronDown, Columns3, Eye, EyeOff, Pin, ArrowLeftToLine, ArrowRightToLine, PinOff, AlertCircle, ArrowUpDown, ArrowUpNarrowWide, ArrowDownNarrowWide, Copy } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cn } from '@pulog/utils';
+import { useTranslation } from 'react-i18next';
+import { format } from 'date-fns';
+import { enUS as enUS$1 } from 'date-fns/locale';
+import { enUS } from 'react-day-picker/locale';
+
+// src/data-table/lib/filter-utils.ts
+function parseDateValue(value) {
+  if (value instanceof Date) {
+    return isNaN(value.getTime()) ? null : new Date(value.getTime());
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return null;
+    const dateOnlyMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
+    if (dateOnlyMatch) {
+      const year = Number(dateOnlyMatch[1]);
+      const month = Number(dateOnlyMatch[2]) - 1;
+      const day = Number(dateOnlyMatch[3]);
+      const parsed2 = new Date(year, month, day);
+      return isNaN(parsed2.getTime()) ? null : parsed2;
+    }
+    const parsed = new Date(trimmed);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  }
+  if (typeof value === "number") {
+    const parsed = new Date(value);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  }
+  return null;
+}
+function formatDateKey(value) {
+  const parsed = parseDateValue(value);
+  if (!parsed) return null;
+  const year = parsed.getFullYear();
+  const month = String(parsed.getMonth() + 1).padStart(2, "0");
+  const day = String(parsed.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function isValidFilterValue(filter) {
+  if (!filter.field) {
+    return false;
+  }
+  switch (filter.type) {
+    case "dateRange":
+      return Array.isArray(filter.value) && filter.value.length === 2 && parseDateValue(filter.value[0]) !== null && parseDateValue(filter.value[1]) !== null;
+    case "range":
+      return Array.isArray(filter.value) && filter.value.length === 2 && typeof filter.value[0] === "number" && typeof filter.value[1] === "number";
+    case "multiSelect":
+    case "dateTree":
+      return Array.isArray(filter.value) && filter.value.length > 0;
+    case "checkbox":
+      return typeof filter.value === "boolean";
+    case "date":
+    case "select":
+    case "search":
+      if (Array.isArray(filter.value)) {
+        return filter.value.length > 0;
+      }
+      return filter.value !== null && filter.value !== void 0 && filter.value !== "";
+    default:
+      return filter.value !== null && filter.value !== void 0;
+  }
+}
+function applyFilters(data, filters) {
+  return data.filter((item) => {
+    return filters.every((filter) => matchesFilter(item, filter));
+  });
+}
+function matchesFilter(item, filter) {
+  const value = item[filter.field];
+  switch (filter.type) {
+    case "search": {
+      const cellStr = value == null ? "" : String(value);
+      const lower = cellStr.toLowerCase();
+      const searchValue = filter.value;
+      if (Array.isArray(searchValue)) {
+        return searchValue.some((item2) => lower.includes(String(item2).toLowerCase()));
+      }
+      return lower.includes(String(searchValue).toLowerCase());
+    }
+    case "date":
+      return formatDateKey(value) === formatDateKey(filter.value);
+    case "dateRange": {
+      const itemDateKey = formatDateKey(value);
+      const [fromValue, toValue] = Array.isArray(filter.value) ? filter.value : [filter.value?.from, filter.value?.to];
+      const fromDateKey = formatDateKey(fromValue);
+      const toDateKey = formatDateKey(toValue);
+      if (!itemDateKey || !fromDateKey || !toDateKey) return false;
+      return itemDateKey >= fromDateKey && itemDateKey <= toDateKey;
+    }
+    case "select":
+      return String(value ?? "") === String(filter.value);
+    case "multiSelect":
+      if (!Array.isArray(filter.value) || filter.value.length === 0) return false;
+      return filter.value.includes(String(value ?? ""));
+    case "dateTree": {
+      if (!Array.isArray(filter.value) || filter.value.length === 0) return false;
+      const itemKey = formatDateKey(value);
+      return itemKey !== null && filter.value.includes(itemKey);
+    }
+    case "checkbox":
+      return Boolean(value) === Boolean(filter.value);
+    case "range": {
+      const numValue = Number(value);
+      const [min, max] = filter.value;
+      return numValue >= min && numValue <= max;
+    }
+    default:
+      return true;
+  }
+}
+function groupFiltersByField(filters) {
+  return filters.reduce(
+    (acc, filter) => {
+      if (!acc[filter.field]) {
+        acc[filter.field] = [];
+      }
+      acc[filter.field].push(filter);
+      return acc;
+    },
+    {}
+  );
+}
+function removeFilter(filters, fieldToRemove, valueToRemove) {
+  return filters.filter((filter) => {
+    if (filter.field !== fieldToRemove) {
+      return true;
+    }
+    if (valueToRemove === void 0) {
+      return false;
+    }
+    return filter.value !== valueToRemove;
+  });
+}
+function clearFieldFilters(filters, fieldsToClear) {
+  return filters.filter((filter) => !fieldsToClear.includes(filter.field));
+}
+function hasActiveFilters(filters) {
+  return filters.length > 0 && filters.some(isValidFilterValue);
+}
+var FilterContext = createContext(void 0);
+function FilterProvider({ children }) {
+  const [filters, setFilters] = useState([]);
+  const addFilter = useCallback((filter) => {
+    setFilters((prev) => [...prev, filter]);
+  }, []);
+  const updateFilter = useCallback(
+    (fieldId, newFilter) => {
+      setFilters(
+        (prev) => prev.map(
+          (f) => f.field === fieldId ? { ...f, ...newFilter } : f
+        )
+      );
+    },
+    []
+  );
+  const removeFilterFn = useCallback((fieldId, value2) => {
+    setFilters((prev) => removeFilter(prev, fieldId, value2));
+  }, []);
+  const clearFiltersFn = useCallback(() => {
+    setFilters([]);
+  }, []);
+  const clearFieldFiltersFn = useCallback((fields) => {
+    setFilters((prev) => clearFieldFilters(prev, fields));
+  }, []);
+  const getFieldFilters = useCallback(
+    (field) => filters.filter((f) => f.field === field),
+    [filters]
+  );
+  const value = {
+    filters,
+    addFilter,
+    updateFilter,
+    removeFilter: removeFilterFn,
+    clearFilters: clearFiltersFn,
+    clearFieldFilters: clearFieldFiltersFn,
+    hasActiveFilters: hasActiveFilters(filters),
+    getFieldFilters
+  };
+  return /* @__PURE__ */ jsx(FilterContext.Provider, { value, children });
+}
+function useFilters() {
+  const context = useContext(FilterContext);
+  if (!context) {
+    throw new Error("useFilters must be used within a FilterProvider");
+  }
+  return context;
+}
+var PaginationContext = createContext(
+  void 0
+);
+function PaginationProvider({
+  children,
+  defaultPageSize = 10
+}) {
+  const [pageIndex, setPageIndex] = useState(1);
+  const [pageSize, setPageSizeState] = useState(defaultPageSize);
+  const [pageCount, setPageCount] = useState(1);
+  const [totalData, setTotalData] = useState(0);
+  const [paginationMode, setPaginationModeState] = useState(
+    "traditional"
+  );
+  const goToPage = useCallback((newPageIndex) => {
+    setPageIndex(Math.max(1, newPageIndex));
+  }, []);
+  const nextPage = useCallback(() => {
+    setPageIndex((prev) => Math.min(prev + 1, pageCount));
+  }, [pageCount]);
+  const previousPage = useCallback(() => {
+    setPageIndex((prev) => Math.max(prev - 1, 1));
+  }, []);
+  const setPageSizeFn = useCallback((size) => {
+    setPageSizeState(size);
+    setPageIndex(1);
+  }, []);
+  const updatePaginationMeta = useCallback((meta) => {
+    setPageIndex(meta.pageIndex);
+    setPageSizeState(meta.pageSize);
+    setPageCount(meta.pageCount);
+    setTotalData(meta.totalData);
+  }, []);
+  const updatePaginationCount = useCallback((meta) => {
+    setPageIndex(meta.pageIndex);
+    setPageCount(meta.pageCount);
+    setTotalData(meta.totalData);
+  }, []);
+  const setPaginationMode = useCallback(
+    (mode) => {
+      setPaginationModeState(mode);
+    },
+    []
+  );
+  const canGoNext = pageIndex < pageCount;
+  const canGoPrevious = pageIndex > 1;
+  const value = {
+    pageIndex,
+    pageSize,
+    pageCount,
+    totalData,
+    paginationMode,
+    goToPage,
+    nextPage,
+    previousPage,
+    setPageSize: setPageSizeFn,
+    updatePaginationMeta,
+    updatePaginationCount,
+    setPaginationMode,
+    canGoNext,
+    canGoPrevious
+  };
+  return /* @__PURE__ */ jsx(PaginationContext.Provider, { value, children });
+}
+function usePagination() {
+  const context = useContext(PaginationContext);
+  if (!context) {
+    throw new Error(
+      "usePagination must be used within a PaginationProvider"
+    );
+  }
+  return context;
+}
+var SortContext = createContext(void 0);
+function SortProvider({ children }) {
+  const [sort, setSort] = useState({
+    column: null,
+    order: null
+  });
+  const setSortFn = useCallback((column, order = "asc") => {
+    setSort({
+      column,
+      order: column ? order : null
+    });
+  }, []);
+  const toggleSort = useCallback((column) => {
+    setSort((prev) => {
+      if (prev.column === column) {
+        if (prev.order === "asc") {
+          return { column, order: "desc" };
+        } else if (prev.order === "desc") {
+          return { column: null, order: null };
+        } else {
+          return { column, order: "asc" };
+        }
+      } else {
+        return { column, order: "asc" };
+      }
+    });
+  }, []);
+  const clearSort = useCallback(() => {
+    setSort({ column: null, order: null });
+  }, []);
+  const isSorted = useCallback(
+    (column) => sort.column === column && sort.order !== null,
+    [sort]
+  );
+  const getSortOrder = useCallback(
+    (column) => sort.column === column ? sort.order : null,
+    [sort]
+  );
+  const value = {
+    sort,
+    setSort: setSortFn,
+    toggleSort,
+    clearSort,
+    isSorted,
+    getSortOrder
+  };
+  return /* @__PURE__ */ jsx(SortContext.Provider, { value, children });
+}
+function useSort() {
+  const context = useContext(SortContext);
+  if (!context) {
+    throw new Error("useSort must be used within a SortProvider");
+  }
+  return context;
+}
+var ColumnVisibilityContext = createContext(
+  void 0
+);
+function isVisibilityEqual(a, b) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every((key) => a[key] === b[key]);
+}
+function ColumnVisibilityProvider({
+  children,
+  defaultVisibility = {}
+}) {
+  const [visibility, setVisibilityState] = useState(
+    defaultVisibility
+  );
+  const toggleColumn = useCallback((columnId) => {
+    setVisibilityState((prev) => ({
+      ...prev,
+      [columnId]: !prev[columnId]
+    }));
+  }, []);
+  const showColumn = useCallback((columnId) => {
+    setVisibilityState((prev) => ({
+      ...prev,
+      [columnId]: true
+    }));
+  }, []);
+  const hideColumn = useCallback((columnId) => {
+    setVisibilityState((prev) => ({
+      ...prev,
+      [columnId]: false
+    }));
+  }, []);
+  const isColumnVisible = useCallback(
+    (columnId) => visibility[columnId] !== false,
+    [visibility]
+  );
+  const showAllColumns = useCallback(() => {
+    setVisibilityState((prev) => {
+      const newVisibility = {};
+      Object.keys(prev).forEach((key) => {
+        newVisibility[key] = true;
+      });
+      return newVisibility;
+    });
+  }, []);
+  const hideAllColumns = useCallback(() => {
+    setVisibilityState((prev) => {
+      const newVisibility = {};
+      Object.keys(prev).forEach((key) => {
+        newVisibility[key] = false;
+      });
+      return newVisibility;
+    });
+  }, []);
+  const setVisibility = useCallback((newVisibility) => {
+    setVisibilityState(
+      (prev) => isVisibilityEqual(prev, newVisibility) ? prev : newVisibility
+    );
+  }, []);
+  const value = {
+    visibility,
+    toggleColumn,
+    showColumn,
+    hideColumn,
+    isColumnVisible,
+    showAllColumns,
+    hideAllColumns,
+    setVisibility
+  };
+  return /* @__PURE__ */ jsx(ColumnVisibilityContext.Provider, { value, children });
+}
+function useColumnVisibility() {
+  const context = useContext(ColumnVisibilityContext);
+  if (!context) {
+    throw new Error(
+      "useColumnVisibility must be used within a ColumnVisibilityProvider"
+    );
+  }
+  return context;
+}
+var ColumnPinningContext = createContext(
+  void 0
+);
+function isPinningEqual(a, b) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every((key) => a[key] === b[key]);
+}
+function ColumnPinningProvider({
+  children,
+  defaultPinning = {}
+}) {
+  const [pinning, setPinningState] = useState(defaultPinning);
+  const pinColumn = useCallback((columnId, side) => {
+    setPinningState((prev) => ({
+      ...prev,
+      [columnId]: side
+    }));
+  }, []);
+  const unpinColumn = useCallback((columnId) => {
+    setPinningState((prev) => ({
+      ...prev,
+      [columnId]: false
+    }));
+  }, []);
+  const getColumnPin = useCallback(
+    (columnId) => pinning[columnId],
+    [pinning]
+  );
+  const setPinning = useCallback((newPinning) => {
+    setPinningState(
+      (prev) => isPinningEqual(prev, newPinning) ? prev : newPinning
+    );
+  }, []);
+  const value = {
+    pinning,
+    pinColumn,
+    unpinColumn,
+    getColumnPin,
+    setPinning
+  };
+  return /* @__PURE__ */ jsx(ColumnPinningContext.Provider, { value, children });
+}
+function useColumnPinning() {
+  const context = useContext(ColumnPinningContext);
+  if (!context) {
+    throw new Error(
+      "useColumnPinning must be used within a ColumnPinningProvider"
+    );
+  }
+  return context;
+}
+function DataTableProvider({
+  children,
+  defaultColumnVisibility = {},
+  defaultColumnPinning = {},
+  selectionMode,
+  defaultPageSize
+}) {
+  return /* @__PURE__ */ jsx(FilterProvider, { children: /* @__PURE__ */ jsx(PaginationProvider, { defaultPageSize, children: /* @__PURE__ */ jsx(SelectionProvider, { selectionMode, children: /* @__PURE__ */ jsx(SortProvider, { children: /* @__PURE__ */ jsx(ColumnVisibilityProvider, { defaultVisibility: defaultColumnVisibility, children: /* @__PURE__ */ jsx(ColumnPinningProvider, { defaultPinning: defaultColumnPinning, children }) }) }) }) }) });
+}
+function RowCheckbox({ rowId, currentPageRowIds }) {
+  const { isRowSelected, toggleRow } = useSelection();
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: isRowSelected(rowId),
+      onCheckedChange: () => toggleRow(rowId, currentPageRowIds)
+    }
+  );
+}
+function SelectAllCheckbox({ rowIds, totalCount, onSelectAllAttempt }) {
+  const { rowSelection, isSelectAll, toggleAll } = useSelection();
+  const currentPageSelectedCount = useMemo(
+    () => isSelectAll ? rowIds.length : rowIds.filter((id) => rowSelection[id]).length,
+    [rowIds, rowSelection, isSelectAll]
+  );
+  const isAllSelected = isSelectAll || rowIds.length > 0 && currentPageSelectedCount === rowIds.length;
+  const isIndeterminate = !isSelectAll && currentPageSelectedCount > 0 && currentPageSelectedCount < rowIds.length;
+  const handleChange = () => {
+    if (isAllSelected) {
+      toggleAll(rowIds, false);
+    } else {
+      const confirm = () => toggleAll(rowIds, true, totalCount);
+      if (onSelectAllAttempt) {
+        onSelectAllAttempt(totalCount ?? rowIds.length, confirm);
+      } else {
+        confirm();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: isAllSelected,
+      ref: (element) => {
+        if (element) {
+          element.indeterminate = isIndeterminate;
+        }
+      },
+      onCheckedChange: handleChange
+    }
+  );
+}
+function ExpandableRow({ rowId }) {
+  const { toggleExpanded, isRowExpanded } = useSelection();
+  const isExpanded = isRowExpanded(rowId);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      onClick: () => toggleExpanded(rowId),
+      className: "relative h-5 w-5 overflow-hidden p-0",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `absolute inset-0 flex items-center justify-center transition-all duration-200 ease-in-out ${isExpanded ? "scale-50 opacity-0 rotate-90" : "scale-100 opacity-100 rotate-0"}`, children: /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx("span", { className: `absolute inset-0 flex items-center justify-center transition-all duration-200 ease-in-out ${isExpanded ? "scale-100 opacity-100 rotate-0" : "scale-50 opacity-0 -rotate-90"}`, children: /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) })
+      ]
+    }
+  );
+}
+function TraditionalPagination({
+  pageSizeOptions = [10, 25, 50, 100]
+}) {
+  const { t } = useTranslation("datatable");
+  const {
+    pageIndex,
+    pageSize,
+    pageCount,
+    totalData,
+    goToPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    canGoNext,
+    canGoPrevious
+  } = usePagination();
+  const [pageInput, setPageInput] = React14.useState(String(pageIndex));
+  React14.useEffect(() => {
+    setPageInput(String(pageIndex));
+  }, [pageIndex]);
+  const submitPageInput = () => {
+    const parsedPage = Number.parseInt(pageInput, 10);
+    if (!Number.isFinite(parsedPage)) {
+      setPageInput(String(pageIndex));
+      return;
+    }
+    const targetPage = Math.min(Math.max(parsedPage, 1), Math.max(pageCount, 1));
+    setPageInput(String(targetPage));
+    if (targetPage !== pageIndex) goToPage(targetPage);
+  };
+  const navButtonClass = "rounded-none border-0 transition-colors hover:bg-primary hover:text-primary-foreground disabled:hover:bg-background disabled:hover:text-foreground";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary", children: totalData.toLocaleString("id-ID") }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("pagination.rows") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("pagination.rowsPerPage") }),
+        /* @__PURE__ */ jsxs(Select, { value: String(pageSize), onValueChange: (v) => setPageSize(Number(v)), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-16 font-semibold", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { className: "z-130", position: "popper", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex items-stretch overflow-hidden rounded-md border border-border", children: [
+        /* @__PURE__ */ jsx("span", { className: "flex items-center border-r border-border bg-muted px-2.5 text-sm text-muted-foreground", children: t("pagination.page") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: pageInput,
+            onChange: (event) => setPageInput(event.target.value.replace(/\D/g, "")),
+            onFocus: (event) => event.currentTarget.select(),
+            onBlur: submitPageInput,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                submitPageInput();
+                event.currentTarget.blur();
+              }
+            },
+            inputMode: "numeric",
+            "aria-label": "Nomor halaman",
+            className: "h-8 w-16 rounded-none border-0 text-center font-semibold shadow-none focus-visible:ring-1 focus-visible:ring-inset"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center border-l border-border bg-muted px-2.5 text-sm text-muted-foreground", children: [
+          t("pagination.of"),
+          " ",
+          pageCount.toLocaleString("id-ID")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex items-stretch overflow-hidden rounded-md border border-border", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon-sm",
+            onClick: () => goToPage(1),
+            disabled: !canGoPrevious,
+            title: "Halaman pertama",
+            className: cn(navButtonClass, "border-r"),
+            children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon-sm",
+            onClick: previousPage,
+            disabled: !canGoPrevious,
+            title: "Halaman sebelumnya",
+            className: cn(navButtonClass, "border-r"),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon-sm",
+            onClick: nextPage,
+            disabled: !canGoNext,
+            title: "Halaman berikutnya",
+            className: cn(navButtonClass, "border-r"),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon-sm",
+            onClick: () => goToPage(pageCount),
+            disabled: !canGoNext,
+            title: "Halaman terakhir",
+            className: navButtonClass,
+            children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function InfiniteScrollPagination({
+  isLoading = false,
+  onLoadMore
+}) {
+  const { pageIndex, totalData, pageSize, pageCount, nextPage } = usePagination();
+  const currentItemsLoaded = pageIndex * pageSize;
+  const hasMore = currentItemsLoaded < totalData;
+  const handleLoadMore = () => {
+    nextPage();
+    onLoadMore?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+      "Loaded ",
+      Math.min(currentItemsLoaded, totalData),
+      " of ",
+      totalData,
+      " items"
+    ] }),
+    hasMore ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: handleLoadMore,
+        disabled: isLoading,
+        className: "gap-2",
+        children: [
+          isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+          isLoading ? "Loading..." : "Load More"
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "All items loaded" })
+  ] });
+}
+function parseSearchValue(raw) {
+  return raw.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function formatSearchValue(value) {
+  if (Array.isArray(value)) return value.join(", ");
+  return String(value ?? "");
+}
+function SearchFilter({
+  field,
+  label,
+  placeholder = "Search...",
+  minSearchLength = 1,
+  autoApply = false,
+  allowCommaSeparated = false,
+  onClose
+}) {
+  const { filters, addFilter, updateFilter, removeFilter: removeFilter2 } = useFilters();
+  const localRemovalRef = useRef(false);
+  const existingFilter = filters.find(
+    (f) => f.field === field && f.type === "search"
+  );
+  const [value, setValue] = useState(
+    existingFilter ? formatSearchValue(existingFilter.value) : ""
+  );
+  useEffect(() => {
+    if (!existingFilter) {
+      if (localRemovalRef.current) {
+        localRemovalRef.current = false;
+        return;
+      }
+      setValue("");
+    } else {
+      setValue(formatSearchValue(existingFilter.value));
+    }
+  }, [existingFilter?.value]);
+  const applyFilter = useCallback((raw) => {
+    const trimmed = raw.trim();
+    if (trimmed.length >= minSearchLength) {
+      const values = parseSearchValue(trimmed);
+      const nextValue = allowCommaSeparated && values.length > 1 ? values : trimmed;
+      const currentValue = formatSearchValue(existingFilter?.value);
+      if (existingFilter) {
+        if (currentValue !== trimmed) {
+          updateFilter(field, { operator: "contains", value: nextValue, type: "search" });
+        }
+      } else {
+        addFilter({
+          field,
+          operator: "contains",
+          value: nextValue,
+          type: "search"
+        });
+      }
+      return;
+    }
+    if (existingFilter) {
+      localRemovalRef.current = true;
+      removeFilter2(field);
+    }
+  }, [existingFilter, field, minSearchLength, allowCommaSeparated, addFilter, updateFilter, removeFilter2]);
+  useEffect(() => {
+    if (!autoApply) return;
+    const timer = window.setTimeout(() => {
+      applyFilter(value.trim());
+    }, 500);
+    return () => window.clearTimeout(timer);
+  }, [value, autoApply, applyFilter]);
+  const handleSubmit = useCallback(() => {
+    applyFilter(value.trim());
+    onClose?.();
+  }, [value, applyFilter, onClose]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleClear = useCallback(() => {
+    setValue("");
+    removeFilter2(field);
+    onClose?.();
+  }, [field, removeFilter2, onClose]);
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder,
+          value,
+          onChange: (e) => setValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          className: "pr-8"
+        }
+      ),
+      value && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: handleClear,
+          "aria-label": `Hapus pencarian ${label}`,
+          className: "absolute inset-y-0 right-1 my-auto size-7 p-0 transition-colors active:translate-y-0",
+          children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: handleSubmit,
+        disabled: value.trim().length < minSearchLength,
+        className: "h-9 w-9 shrink-0 rounded-md p-0 transition-colors active:translate-y-0",
+        children: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" })
+      }
+    )
+  ] }) });
+}
+function DateFilter({
+  field,
+  onClose,
+  minDate,
+  maxDate
+}) {
+  const {
+    filters,
+    addFilter,
+    removeFilter: removeFilter2
+  } = useFilters();
+  const existingFilter = filters.find(
+    (item) => item.field === field && item.type === "date"
+  );
+  const [selectedDate, setSelectedDate] = useState();
+  const [tempSelectedDate, setTempSelectedDate] = useState();
+  const existingValueKey = existingFilter ? String(existingFilter.value) : null;
+  useEffect(() => {
+    const value = existingFilter?.value;
+    const date = value ? parseDateValue(value) ?? void 0 : void 0;
+    setSelectedDate(date);
+    setTempSelectedDate(date);
+  }, [existingValueKey]);
+  const handleApply = () => {
+    setSelectedDate(
+      tempSelectedDate
+    );
+    removeFilter2(field);
+    if (tempSelectedDate) {
+      const normalizedDate = formatDateKey(
+        tempSelectedDate
+      );
+      if (normalizedDate) {
+        addFilter({
+          field,
+          operator: "equals",
+          value: normalizedDate,
+          type: "date"
+        });
+      }
+    }
+    onClose?.();
+  };
+  const handleReset = () => {
+    setSelectedDate(void 0);
+    setTempSelectedDate(void 0);
+    removeFilter2(field);
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        "space-y-3"
+      ),
+      children: [
+        tempSelectedDate && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-md",
+              "border",
+              "px-3",
+              "py-2",
+              "text-center",
+              "text-xs",
+              "font-medium"
+            ),
+            children: format(
+              tempSelectedDate,
+              "dd MMM yyyy"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            defaultMonth: parseDateValue(minDate) ?? void 0,
+            startMonth: parseDateValue(minDate) ?? void 0,
+            endMonth: parseDateValue(maxDate) ?? void 0,
+            disabled: [
+              ...parseDateValue(minDate) ? [{ before: parseDateValue(minDate) }] : [],
+              ...parseDateValue(maxDate) ? [{ after: parseDateValue(maxDate) }] : []
+            ],
+            selected: tempSelectedDate,
+            onSelect: setTempSelectedDate,
+            captionLayout: "dropdown"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex",
+              "items-center",
+              "justify-end",
+              "gap-2",
+              "border-t",
+              "bg-muted/40",
+              "px-2",
+              "pt-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleReset,
+                  className: cn(
+                    "h-7",
+                    "rounded-md",
+                    "bg-destructive",
+                    "px-3",
+                    "text-xs",
+                    "text-destructive-foreground",
+                    "hover:bg-destructive/90"
+                  ),
+                  children: "Reset"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleApply,
+                  className: cn(
+                    "h-7",
+                    "rounded-md",
+                    "px-3",
+                    "text-xs"
+                  ),
+                  children: "Apply"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function getRangeLabel(range, defaultLabel) {
+  if (!range?.from) {
+    return defaultLabel;
+  }
+  if (!range.to) {
+    return format(
+      range.from,
+      "dd MMM yyyy",
+      { locale: enUS$1 }
+    );
+  }
+  return `
+        ${format(range.from, "dd MMM yyyy", { locale: enUS$1 })}
+        -
+        ${format(range.to, "dd MMM yyyy", { locale: enUS$1 })}
+    `;
+}
+function DateRangeFilter({
+  field,
+  onClose,
+  showReset = true,
+  minDate,
+  maxDate
+}) {
+  const {
+    filters,
+    addFilter,
+    removeFilter: removeFilter2
+  } = useFilters();
+  const { t } = useTranslation("datatable");
+  const existingFilter = filters.find(
+    (item) => item.field === field && item.type === "dateRange"
+  );
+  const [selectedRange, setSelectedRange] = useState();
+  const [tempSelectedRange, setTempSelectedRange] = useState();
+  const existingValueKey = existingFilter ? JSON.stringify(existingFilter.value) : null;
+  useEffect(() => {
+    const value = existingFilter?.value;
+    if (!value?.[0] || !value?.[1]) {
+      setSelectedRange(void 0);
+      setTempSelectedRange(void 0);
+      return;
+    }
+    const range = {
+      from: parseDateValue(value[0]) ?? void 0,
+      to: parseDateValue(value[1]) ?? void 0
+    };
+    setSelectedRange(range);
+    setTempSelectedRange(range);
+  }, [existingValueKey]);
+  const handleApply = () => {
+    setSelectedRange(
+      tempSelectedRange
+    );
+    removeFilter2(field);
+    if (tempSelectedRange?.from && tempSelectedRange?.to) {
+      const fromValue = formatDateKey(
+        tempSelectedRange.from
+      );
+      const toValue = formatDateKey(
+        tempSelectedRange.to
+      );
+      if (fromValue && toValue) {
+        addFilter({
+          field,
+          operator: "dateRange",
+          value: [
+            fromValue,
+            toValue
+          ],
+          type: "dateRange"
+        });
+      }
+    }
+    onClose?.();
+  };
+  const handleReset = () => {
+    setSelectedRange(void 0);
+    setTempSelectedRange(void 0);
+    removeFilter2(field);
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        "space-y-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-md",
+              "border",
+              "px-3",
+              "py-2",
+              "text-center",
+              "text-xs",
+              "font-medium"
+            ),
+            children: getRangeLabel(
+              tempSelectedRange,
+              t("selectDateRange")
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "range",
+            defaultMonth: parseDateValue(minDate) ?? void 0,
+            startMonth: parseDateValue(minDate) ?? void 0,
+            endMonth: parseDateValue(maxDate) ?? void 0,
+            disabled: [
+              ...parseDateValue(minDate) ? [{ before: parseDateValue(minDate) }] : [],
+              ...parseDateValue(maxDate) ? [{ after: parseDateValue(maxDate) }] : []
+            ],
+            selected: tempSelectedRange,
+            onSelect: setTempSelectedRange,
+            numberOfMonths: 2,
+            captionLayout: "dropdown",
+            locale: enUS
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex",
+              "items-center",
+              "justify-end",
+              "gap-2",
+              "border-t",
+              "bg-muted/40",
+              "px-2",
+              "pt-2"
+            ),
+            children: [
+              showReset && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleReset,
+                  className: cn(
+                    "h-7",
+                    "rounded-md",
+                    "bg-destructive",
+                    "px-3",
+                    "text-xs",
+                    "text-destructive-foreground",
+                    "hover:bg-destructive/90"
+                  ),
+                  children: "Reset"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleApply,
+                  disabled: !tempSelectedRange?.from || !tempSelectedRange?.to,
+                  className: cn(
+                    "h-7",
+                    "rounded-md",
+                    "px-3",
+                    "text-xs"
+                  ),
+                  children: "Apply"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var LIMIT_RENDER = 50;
+function SelectFilter({
+  field,
+  options,
+  placeholder = "Search...",
+  onClose
+}) {
+  const {
+    addFilter,
+    removeFilter: removeFilter2,
+    getFieldFilters
+  } = useFilters();
+  const { t } = useTranslation("datatable");
+  const [search, setSearch] = useState("");
+  const existingFilter = getFieldFilters(field).find(
+    (item) => item.type === "select"
+  );
+  const [selectedValue, setSelectedValue] = useState("");
+  const [tempSelectedValue, setTempSelectedValue] = useState("");
+  const existingValueKey = existingFilter ? JSON.stringify(existingFilter.value) : null;
+  useEffect(() => {
+    const value = existingFilter ? String(existingFilter.value) : "";
+    setSelectedValue(value);
+    setTempSelectedValue(value);
+  }, [existingValueKey]);
+  const filteredOptions = useMemo(() => {
+    if (!search) {
+      return options;
+    }
+    return options.filter(
+      (item) => item.label.toLowerCase().includes(
+        search.toLowerCase()
+      )
+    );
+  }, [
+    options,
+    search
+  ]);
+  const visibleOptions = useMemo(() => {
+    return filteredOptions.slice(
+      0,
+      LIMIT_RENDER
+    );
+  }, [filteredOptions]);
+  const handleSelect = (value) => {
+    setTempSelectedValue(value);
+  };
+  const handleApply = () => {
+    setSelectedValue(
+      tempSelectedValue
+    );
+    removeFilter2(field);
+    if (tempSelectedValue) {
+      addFilter({
+        field,
+        operator: "equals",
+        value: tempSelectedValue,
+        type: "select"
+      });
+    }
+    onClose?.();
+  };
+  const handleReset = () => {
+    setSelectedValue("");
+    setTempSelectedValue("");
+    setSearch("");
+    removeFilter2(field);
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        "space-y-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: search,
+            placeholder,
+            onChange: (event) => setSearch(
+              event.target.value
+            ),
+            className: cn(
+              "h-9",
+              "rounded-lg",
+              "text-xs"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex",
+              "items-center",
+              "justify-between",
+              "px-1",
+              "text-[11px]",
+              "text-muted-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Showing ",
+                visibleOptions.length,
+                " ",
+                "of",
+                " ",
+                filteredOptions.length,
+                " ",
+                "data"
+              ] }),
+              filteredOptions.length !== options.length && /* @__PURE__ */ jsxs("span", { children: [
+                "Total ",
+                options.length
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "max-h-45",
+              "overflow-y-auto",
+              "space-y-1",
+              "pr-1"
+            ),
+            children: [
+              visibleOptions.length === 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "py-6",
+                    "text-center",
+                    "text-xs",
+                    "text-muted-foreground"
+                  ),
+                  children: t("filters.select.dataNotFound")
+                }
+              ),
+              visibleOptions.map(
+                (option) => {
+                  const value = String(
+                    option.value
+                  );
+                  const active = tempSelectedValue === value;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSelect(
+                        value
+                      ),
+                      className: cn(
+                        "flex",
+                        "w-full",
+                        "items-center",
+                        "justify-between",
+                        "rounded-md",
+                        "px-2",
+                        "py-1.5",
+                        "text-left",
+                        "text-xs",
+                        "hover:bg-muted",
+                        active && "bg-muted"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "truncate"
+                            ),
+                            children: option.label
+                          }
+                        ),
+                        active && /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            className: cn(
+                              "size-4",
+                              "text-primary"
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    value
+                  );
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex",
+              "items-center",
+              "justify-end",
+              "gap-2",
+              "border-t",
+              "bg-muted/40",
+              "px-2",
+              "pt-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleReset,
+                  className: cn(
+                    "h-7",
+                    "rounded-md",
+                    "bg-destructive",
+                    "px-3",
+                    "text-xs",
+                    "text-destructive-foreground",
+                    "hover:bg-destructive/90"
+                  ),
+                  children: "Reset"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleApply,
+                  className: cn(
+                    "h-7",
+                    "rounded-md",
+                    "px-3",
+                    "text-xs"
+                  ),
+                  children: "Apply"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var LIMIT_RENDER2 = 50;
+var DEBOUNCE_MS = 500;
+function MultiSelectFilter({
+  field,
+  options,
+  placeholder = "Search...",
+  searchPlaceholder,
+  minSearchLength = 0,
+  onClose,
+  onSearch,
+  initialSearch = "",
+  onSearchChange
+}) {
+  const {
+    filters,
+    addFilter,
+    removeFilter: removeFilter2
+  } = useFilters();
+  const { t } = useTranslation("datatable");
+  const [search, setSearch] = useState(initialSearch);
+  const [items, setItems] = useState(options);
+  const [loading, setLoading] = useState(false);
+  const isServer = !!onSearch;
+  const debounceRef = useRef();
+  const searchRequestRef = useRef(0);
+  const existingFilter = filters.find(
+    (item) => item.field === field && item.type === "multiSelect"
+  );
+  const [selectedValues, setSelectedValues] = useState([]);
+  const [tempSelectedValues, setTempSelectedValues] = useState([]);
+  const existingValueKey = existingFilter ? JSON.stringify(existingFilter.value) : null;
+  useEffect(() => {
+    const values = existingFilter ? existingFilter.value : [];
+    setSelectedValues(values);
+    setTempSelectedValues(values);
+  }, [existingValueKey]);
+  const runSearch = useCallback(async (query) => {
+    if (!onSearch) return;
+    const requestId = ++searchRequestRef.current;
+    setLoading(true);
+    try {
+      const result = await onSearch(query);
+      if (requestId === searchRequestRef.current) {
+        setItems(result);
+      }
+    } catch {
+      if (requestId === searchRequestRef.current) {
+        setItems([]);
+      }
+    } finally {
+      if (requestId === searchRequestRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [onSearch]);
+  useEffect(() => {
+    if (!isServer) return;
+    runSearch(initialSearch.trim());
+  }, [isServer, runSearch]);
+  useEffect(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    searchRequestRef.current += 1;
+  }, []);
+  const handleSearchChange = (value) => {
+    setSearch(value);
+    onSearchChange?.(value);
+    if (!isServer) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    const trimmedValue = value.trim();
+    if (trimmedValue.length > 0 && trimmedValue.length < minSearchLength) {
+      searchRequestRef.current += 1;
+      setLoading(false);
+      return;
+    }
+    debounceRef.current = setTimeout(() => {
+      runSearch(trimmedValue);
+    }, trimmedValue ? DEBOUNCE_MS : 0);
+  };
+  const filteredOptions = useMemo(() => {
+    if (isServer) return items;
+    if (!search) {
+      return options;
+    }
+    const keyword = search.toLowerCase();
+    return options.filter(
+      (item) => item.label.toLowerCase().includes(keyword)
+    );
+  }, [
+    isServer,
+    items,
+    options,
+    search
+  ]);
+  const visibleOptions = useMemo(() => {
+    return filteredOptions.slice(
+      0,
+      LIMIT_RENDER2
+    );
+  }, [filteredOptions]);
+  const allBaseValues = useMemo(
+    () => Array.from(new Set((isServer ? items : options).map((item) => String(item.value)))),
+    [isServer, items, options]
+  );
+  const isAllBaseValuesSelected = useMemo(() => {
+    if (allBaseValues.length === 0) return false;
+    if (tempSelectedValues.length !== allBaseValues.length) return false;
+    const selectedSet = new Set(tempSelectedValues);
+    return allBaseValues.every((value) => selectedSet.has(value));
+  }, [allBaseValues, tempSelectedValues]);
+  const toggleOption = (value) => {
+    setTempSelectedValues(
+      (prev) => prev.includes(value) ? prev.filter(
+        (item) => item !== value
+      ) : [
+        ...prev,
+        value
+      ]
+    );
+  };
+  const handleSelectAll = () => {
+    if (isAllBaseValuesSelected) {
+      setTempSelectedValues([]);
+      return;
+    }
+    setTempSelectedValues(allBaseValues);
+  };
+  const handleApply = () => {
+    setSelectedValues(tempSelectedValues);
+    removeFilter2(field);
+    if (tempSelectedValues.length > 0) {
+      addFilter({
+        field,
+        operator: "in",
+        value: tempSelectedValues,
+        type: "multiSelect"
+      });
+    }
+    onClose?.();
+  };
+  const handleReset = () => {
+    setSelectedValues([]);
+    setTempSelectedValues([]);
+    setSearch("");
+    onSearchChange?.("");
+    removeFilter2(field);
+    onClose?.();
+  };
+  useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    items.forEach((o) => map.set(String(o.value), o));
+    tempSelectedValues.forEach((v) => {
+      if (!map.has(v)) map.set(v, { value: v, label: v });
+    });
+    return map;
+  }, [items, tempSelectedValues]);
+  isServer ? filteredOptions.length : options.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        "space-y-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex",
+              "items-center",
+              "justify-between",
+              "border-b",
+              "px-2",
+              "pb-2",
+              "text-xs"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleSelectAll,
+                  className: cn(
+                    "flex",
+                    "items-center",
+                    "gap-2"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: isAllBaseValuesSelected,
+                        className: cn(
+                          "size-4"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: t("filters.multiSelect.selectAll") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { children: [
+                tempSelectedValues.length,
+                " ",
+                t("filters.multiSelect.selected")
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: search,
+              placeholder: searchPlaceholder ?? placeholder,
+              onChange: (event) => handleSearchChange(
+                event.target.value
+              ),
+              className: cn(
+                "h-9",
+                "rounded-lg",
+                "text-xs",
+                isServer && "pr-8"
+              )
+            }
+          ),
+          isServer && loading && /* @__PURE__ */ jsx(Loader2, { className: "absolute right-2.5 top-1/2 -translate-y-1/2 size-4 animate-spin text-muted-foreground" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex",
+              "items-center",
+              "justify-between",
+              "px-1",
+              "text-[11px]",
+              "text-muted-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                isServer ? t("filters.multiSelect.result") : t("filters.multiSelect.showing"),
+                " ",
+                (visibleOptions.length || 0).toLocaleString("id-ID"),
+                " ",
+                "from",
+                " ",
+                (filteredOptions.length || 0).toLocaleString("id-ID"),
+                " ",
+                "data"
+              ] }),
+              !isServer && filteredOptions.length !== options.length && /* @__PURE__ */ jsxs("span", { children: [
+                "Total ",
+                options.length
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "max-h-45",
+              "overflow-y-auto",
+              "space-y-1",
+              "pr-1"
+            ),
+            children: [
+              visibleOptions.length === 0 && !loading && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "py-6",
+                    "text-center",
+                    "text-xs",
+                    "text-muted-foreground"
+                  ),
+                  children: t("filters.multiSelect.dataNotFound")
+                }
+              ),
+              visibleOptions.map(
+                (option) => {
+                  const value = String(
+                    option.value
+                  );
+                  const checked = tempSelectedValues.includes(
+                    value
+                  );
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleOption(
+                        value
+                      ),
+                      className: cn(
+                        "flex",
+                        "w-full",
+                        "items-start",
+                        "gap-2",
+                        "rounded-md",
+                        "px-2",
+                        "py-1.5",
+                        "text-left",
+                        "text-xs",
+                        "hover:bg-muted"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked,
+                            className: cn(
+                              "mt-0.5",
+                              "size-4",
+                              "pointer-events-none"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "leading-snug"
+                            ),
+                            children: option.label
+                          }
+                        )
+                      ]
+                    },
+                    value
+                  );
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex",
+              "items-center",
+              "justify-end",
+              "gap-2",
+              "border-t",
+              "bg-muted/40",
+              "px-2",
+              "pt-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleReset,
+                  className: cn(
+                    "h-7",
+                    "rounded-md",
+                    "bg-destructive",
+                    "px-3",
+                    "text-xs",
+                    "text-destructive-foreground",
+                    "hover:bg-destructive/90"
+                  ),
+                  children: "Reset"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  onClick: handleApply,
+                  className: cn(
+                    "h-7",
+                    "rounded-md",
+                    "px-3",
+                    "text-xs"
+                  ),
+                  children: "Apply"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CheckboxFilter({ field, label }) {
+  const { filters, addFilter, removeFilter: removeFilter2 } = useFilters();
+  const existingFilter = filters.find(
+    (f) => f.field === field && f.type === "checkbox"
+  );
+  const isChecked = !!existingFilter;
+  const handleChange = (checked) => {
+    removeFilter2(field);
+    if (checked) {
+      addFilter({
+        field,
+        operator: "equals",
+        value: true,
+        type: "checkbox"
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id: field,
+        checked: isChecked,
+        onCheckedChange: (checked) => handleChange(checked)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: field,
+        className: "text-sm font-medium cursor-pointer",
+        children: label
+      }
+    )
+  ] });
+}
+function RangeFilter({
+  field,
+  label,
+  min = 0,
+  max = 100,
+  step = 1
+}) {
+  const { filters, addFilter, removeFilter: removeFilter2 } = useFilters();
+  const existingFilter = filters.find(
+    (f) => f.field === field && f.type === "range"
+  );
+  const existingRange = existingFilter?.value;
+  const [minValue, setMinValue] = useState(existingRange ? existingRange[0] : min);
+  const [maxValue, setMaxValue] = useState(existingRange ? existingRange[1] : max);
+  const existingValueKey = existingFilter ? JSON.stringify(existingFilter.value) : null;
+  useEffect(() => {
+    if (!existingFilter) {
+      setMinValue(min);
+      setMaxValue(max);
+    } else if (existingFilter.value) {
+      const [eMin, eMax] = existingFilter.value;
+      setMinValue(eMin);
+      setMaxValue(eMax);
+    }
+  }, [existingValueKey, min, max]);
+  const handleApply = () => {
+    removeFilter2(field);
+    if (minValue < maxValue) {
+      addFilter({
+        field,
+        operator: "between",
+        value: [minValue, maxValue],
+        type: "range"
+      });
+    }
+  };
+  const handleClear = () => {
+    setMinValue(min);
+    setMaxValue(max);
+    removeFilter2(field);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Min" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              min,
+              max: maxValue - step,
+              step,
+              value: minValue,
+              onChange: (e) => setMinValue(Number(e.target.value)),
+              className: "h-8"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Max" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              min: minValue + step,
+              max,
+              step,
+              value: maxValue,
+              onChange: (e) => setMaxValue(Number(e.target.value)),
+              className: "h-8"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+        "Range: ",
+        minValue,
+        " - ",
+        maxValue
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "default", onClick: handleApply, children: "Apply" }),
+        existingFilter && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: handleClear, children: "Clear" })
+      ] })
+    ] })
+  ] });
+}
+var BULAN = [
+  "Januari",
+  "Februari",
+  "Maret",
+  "April",
+  "Mei",
+  "Juni",
+  "Juli",
+  "Agustus",
+  "September",
+  "Oktober",
+  "November",
+  "Desember"
+];
+function buildTree(options) {
+  const map = /* @__PURE__ */ new Map();
+  for (const opt of options) {
+    const str = String(opt.value);
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(str);
+    if (!match) continue;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    if (!map.has(year)) map.set(year, /* @__PURE__ */ new Map());
+    const monthMap = map.get(year);
+    if (!monthMap.has(month)) monthMap.set(month, []);
+    monthMap.get(month).push({ date: str, label: String(day) });
+  }
+  const years = [];
+  for (const [year, monthMap] of [...map.entries()].sort((a, b) => a[0] - b[0])) {
+    const months = [];
+    for (const [month, days] of [...monthMap.entries()].sort((a, b) => a[0] - b[0])) {
+      months.push({
+        year,
+        month,
+        label: BULAN[month - 1],
+        days: [...days].sort((a, b) => Number(a.label) - Number(b.label))
+      });
+    }
+    years.push({ year, label: String(year), months });
+  }
+  return years;
+}
+function filterTree(tree, q) {
+  const lq = q.toLowerCase();
+  const result = [];
+  for (const year of tree) {
+    if (year.label.includes(lq)) {
+      result.push(year);
+      continue;
+    }
+    const filteredMonths = [];
+    for (const month of year.months) {
+      if (month.label.toLowerCase().includes(lq)) {
+        filteredMonths.push(month);
+        continue;
+      }
+      const filteredDays = month.days.filter(
+        (d) => d.label === lq || d.label.padStart(2, "0") === lq || d.date.includes(lq)
+      );
+      if (filteredDays.length > 0) {
+        filteredMonths.push({ ...month, days: filteredDays });
+      }
+    }
+    if (filteredMonths.length > 0) {
+      result.push({ ...year, months: filteredMonths });
+    }
+  }
+  return result;
+}
+function checkedState(selected, dates) {
+  if (dates.length === 0) return false;
+  const count = dates.filter((d) => selected.has(d)).length;
+  if (count === 0) return false;
+  if (count === dates.length) return true;
+  return "indeterminate";
+}
+function DateTreeFilter({ field, options, onClose }) {
+  const { filters, addFilter, removeFilter: removeFilter2 } = useFilters();
+  const existingFilter = filters.find((f) => f.field === field && f.type === "dateTree");
+  const existingValueKey = existingFilter ? JSON.stringify(existingFilter.value) : null;
+  const [tempSelected, setTempSelected] = useState(/* @__PURE__ */ new Set());
+  const [expandedYears, setExpandedYears] = useState(/* @__PURE__ */ new Set());
+  const [expandedMonths, setExpandedMonths] = useState(/* @__PURE__ */ new Set());
+  const [search, setSearch] = useState("");
+  useEffect(() => {
+    const values = existingFilter ? existingFilter.value : [];
+    setTempSelected(new Set(values));
+  }, [existingValueKey]);
+  const tree = useMemo(() => buildTree(options), [options]);
+  const allDates = useMemo(
+    () => tree.flatMap((y) => y.months.flatMap((m) => m.days.map((d) => d.date))),
+    [tree]
+  );
+  const isSearching = search.trim().length > 0;
+  const visibleTree = useMemo(
+    () => isSearching ? filterTree(tree, search.trim()) : tree,
+    [tree, search, isSearching]
+  );
+  const selectAllState = checkedState(tempSelected, allDates);
+  const handleSelectAll = () => {
+    setTempSelected(selectAllState === true ? /* @__PURE__ */ new Set() : new Set(allDates));
+  };
+  const toggleYear = (year) => {
+    const dates = year.months.flatMap((m) => m.days.map((d) => d.date));
+    const state = checkedState(tempSelected, dates);
+    setTempSelected((prev) => {
+      const next = new Set(prev);
+      if (state === true) dates.forEach((d) => next.delete(d));
+      else dates.forEach((d) => next.add(d));
+      return next;
+    });
+  };
+  const toggleMonth = (month) => {
+    const dates = month.days.map((d) => d.date);
+    const state = checkedState(tempSelected, dates);
+    setTempSelected((prev) => {
+      const next = new Set(prev);
+      if (state === true) dates.forEach((d) => next.delete(d));
+      else dates.forEach((d) => next.add(d));
+      return next;
+    });
+  };
+  const toggleDay = (date) => {
+    setTempSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(date)) next.delete(date);
+      else next.add(date);
+      return next;
+    });
+  };
+  const toggleExpandYear = (year) => {
+    setExpandedYears((prev) => {
+      const next = new Set(prev);
+      if (next.has(year)) next.delete(year);
+      else next.add(year);
+      return next;
+    });
+  };
+  const toggleExpandMonth = (key) => {
+    setExpandedMonths((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  const handleApply = () => {
+    removeFilter2(field);
+    const selected = [...tempSelected];
+    if (selected.length > 0) {
+      addFilter({ field, operator: "in", value: selected, type: "dateTree" });
+    }
+    onClose?.();
+  };
+  const handleReset = () => {
+    setTempSelected(/* @__PURE__ */ new Set());
+    setSearch("");
+    removeFilter2(field);
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-2 pb-2 text-xs", children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleSelectAll, className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Checkbox, { checked: selectAllState, className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { children: "Pilih Semua" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        tempSelected.size,
+        " Dipilih"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground pointer-events-none" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          placeholder: "Cari tahun, bulan, tanggal\u2026",
+          className: "h-8 pl-7 text-xs rounded-md"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "h-52 overflow-y-auto space-y-0.5 pr-1", children: [
+      visibleTree.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: isSearching ? `"${search.trim()}" tidak ditemukan` : "Data tidak ditemukan" }),
+      visibleTree.map((year) => {
+        const yearDates = year.months.flatMap((m) => m.days.map((d) => d.date));
+        const yearState = checkedState(tempSelected, yearDates);
+        const yearExpanded = isSearching || expandedYears.has(year.year);
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-md px-1 py-1 hover:bg-muted", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => !isSearching && toggleExpandYear(year.year),
+                className: cn(
+                  "flex shrink-0 items-center justify-center text-muted-foreground",
+                  isSearching && "opacity-30 cursor-default"
+                ),
+                children: yearExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleYear(year),
+                className: "flex flex-1 items-center gap-2 text-xs font-semibold",
+                children: [
+                  /* @__PURE__ */ jsx(Checkbox, { checked: yearState, className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { children: year.label })
+                ]
+              }
+            )
+          ] }),
+          yearExpanded && year.months.map((month) => {
+            const monthDates = month.days.map((d) => d.date);
+            const monthState = checkedState(tempSelected, monthDates);
+            const monthKey = `${year.year}-${String(month.month).padStart(2, "0")}`;
+            const monthExpanded = isSearching || expandedMonths.has(monthKey);
+            const selectedInMonth = monthDates.filter((d) => tempSelected.has(d)).length;
+            return /* @__PURE__ */ jsxs("div", { className: "ml-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-md px-1 py-1 hover:bg-muted", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => !isSearching && toggleExpandMonth(monthKey),
+                    className: cn(
+                      "flex shrink-0 items-center justify-center text-muted-foreground",
+                      isSearching && "opacity-30 cursor-default"
+                    ),
+                    children: monthExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => toggleMonth(month),
+                    className: "flex flex-1 items-center gap-2 text-xs font-medium",
+                    children: [
+                      /* @__PURE__ */ jsx(Checkbox, { checked: monthState, className: "size-4" }),
+                      /* @__PURE__ */ jsx("span", { children: month.label }),
+                      /* @__PURE__ */ jsxs("span", { className: cn(
+                        "ml-auto font-normal tabular-nums",
+                        selectedInMonth > 0 ? "text-primary" : "text-muted-foreground"
+                      ), children: [
+                        selectedInMonth,
+                        "/",
+                        monthDates.length
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              monthExpanded && /* @__PURE__ */ jsx("div", { className: "ml-4 grid grid-cols-7 gap-0.5 py-1", children: month.days.map((day) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleDay(day.date),
+                  className: "flex flex-col items-center gap-0.5 rounded py-1 text-xs hover:bg-muted",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: tempSelected.has(day.date),
+                        className: "size-3.5 pointer-events-none"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "tabular-nums text-[10px] leading-none", children: day.label })
+                  ]
+                },
+                day.date
+              )) })
+            ] }, monthKey);
+          })
+        ] }, year.year);
+      })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t bg-muted/40 px-2 pt-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: handleReset,
+          className: "h-7 rounded-md bg-destructive px-3 text-xs text-destructive-foreground hover:bg-destructive/90",
+          children: "Reset"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: handleApply,
+          className: "h-7 rounded-md px-3 text-xs",
+          children: "Apply"
+        }
+      )
+    ] })
+  ] });
+}
+function FilterPanel({ columns, onClose }) {
+  const { filters, clearFilters, hasActiveFilters: hasActiveFilters2 } = useFilters();
+  const renderFilter = (column) => {
+    switch (column.type) {
+      case "search":
+        return /* @__PURE__ */ jsx(
+          SearchFilter,
+          {
+            field: column.id,
+            label: column.label,
+            placeholder: column.placeholder,
+            minSearchLength: column.minSearchLength,
+            autoApply: column.autoApply,
+            allowCommaSeparated: column.allowCommaSeparated
+          },
+          column.id
+        );
+      case "date":
+        return /* @__PURE__ */ jsx(
+          DateFilter,
+          {
+            field: column.id,
+            label: column.label
+          },
+          column.id
+        );
+      case "dateRange":
+        return /* @__PURE__ */ jsx(
+          DateRangeFilter,
+          {
+            field: column.id,
+            label: column.label
+          },
+          column.id
+        );
+      case "select":
+        return /* @__PURE__ */ jsx(
+          SelectFilter,
+          {
+            field: column.id,
+            label: column.label,
+            options: column.options || [],
+            placeholder: column.placeholder
+          },
+          column.id
+        );
+      case "multiSelect":
+        return /* @__PURE__ */ jsx(
+          MultiSelectFilter,
+          {
+            field: column.id,
+            label: column.label,
+            options: column.options || [],
+            onSearch: column.onSearch,
+            minSearchLength: column.minSearchLength,
+            placeholder: column.placeholder,
+            searchPlaceholder: column.searchPlaceholder
+          },
+          column.id
+        );
+      case "checkbox":
+        return /* @__PURE__ */ jsx(
+          CheckboxFilter,
+          {
+            field: column.id,
+            label: column.label
+          },
+          column.id
+        );
+      case "range":
+        return /* @__PURE__ */ jsx(
+          RangeFilter,
+          {
+            field: column.id,
+            label: column.label,
+            min: column.minValue,
+            max: column.maxValue
+          },
+          column.id
+        );
+      case "dateTree":
+        return /* @__PURE__ */ jsx(
+          DateTreeFilter,
+          {
+            field: column.id,
+            label: column.label,
+            options: column.options || []
+          },
+          column.id
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: "p-4 space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Filters" }),
+      onClose && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: onClose,
+          className: "h-6 w-6 p-0",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4", children: columns.map((column) => renderFilter(column)) }),
+    hasActiveFilters2 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-2 border-t", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+        filters.slice(0, 3).map((filter, idx) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: filter.field }, idx)),
+        filters.length > 3 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs", children: [
+          "+",
+          filters.length - 3,
+          " more"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: clearFilters,
+          className: "text-xs h-7",
+          children: "Reset All"
+        }
+      )
+    ] })
+  ] });
+}
+function getFilterPopoverWidthClass(type) {
+  switch (type) {
+    case "dateTree":
+      return "w-64 shadow-xl";
+    case "checkbox":
+      return "w-56";
+    case "range":
+      return "w-64";
+    // 2-month calendar needs its own intrinsic width — not data-dependent, so it stays predictable.
+    case "dateRange":
+      return "w-auto";
+    default:
+      return "w-72";
+  }
+}
+function isFilterActive(config, getFieldFilters) {
+  return getFieldFilters(config.id).length > 0;
+}
+function renderSingleFilter(config, onClose, extra) {
+  switch (config.type) {
+    case "search":
+      return /* @__PURE__ */ jsx(
+        SearchFilter,
+        {
+          field: config.id,
+          label: config.label,
+          placeholder: config.placeholder,
+          minSearchLength: config.minSearchLength,
+          autoApply: config.autoApply,
+          allowCommaSeparated: config.allowCommaSeparated,
+          onClose
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx(
+        DateFilter,
+        {
+          field: config.id,
+          label: config.label,
+          minDate: config.minDate,
+          maxDate: config.maxDate,
+          onClose
+        }
+      );
+    case "dateRange":
+      return /* @__PURE__ */ jsx(
+        DateRangeFilter,
+        {
+          field: config.id,
+          label: config.label,
+          minDate: config.minDate,
+          maxDate: config.maxDate,
+          onClose
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx(
+        SelectFilter,
+        {
+          field: config.id,
+          label: config.label,
+          options: config.options ?? [],
+          placeholder: config.placeholder,
+          onClose
+        }
+      );
+    case "multiSelect":
+      return /* @__PURE__ */ jsx(
+        MultiSelectFilter,
+        {
+          field: config.id,
+          label: config.label,
+          options: config.options ?? [],
+          onSearch: config.onSearch,
+          minSearchLength: config.minSearchLength,
+          placeholder: config.placeholder,
+          searchPlaceholder: config.searchPlaceholder,
+          onClose,
+          initialSearch: extra.multiSelectSearch,
+          onSearchChange: extra.onMultiSelectSearchChange
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx(
+        CheckboxFilter,
+        {
+          field: config.id,
+          label: config.label
+        }
+      );
+    case "range":
+      return /* @__PURE__ */ jsx(
+        RangeFilter,
+        {
+          field: config.id,
+          label: config.label,
+          min: config.minValue,
+          max: config.maxValue
+        }
+      );
+    case "dateTree":
+      return /* @__PURE__ */ jsx(
+        DateTreeFilter,
+        {
+          field: config.id,
+          label: config.label,
+          options: config.options ?? [],
+          onClose
+        }
+      );
+    default:
+      return null;
+  }
+}
+var FilterTrigger = React14.forwardRef(
+  ({
+    config,
+    anyActive,
+    onClick,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      ...rest,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick?.(event);
+      },
+      className: cn(
+        "flex",
+        "h-5",
+        "w-5",
+        "items-center",
+        "justify-center",
+        "rounded",
+        anyActive ? [
+          "text-destructive"
+        ] : [
+          "text-muted-foreground",
+          "hover:bg-muted"
+        ]
+      ),
+      children: config.type === "search" ? /* @__PURE__ */ jsx(Search, { className: "size-3" }) : config.type === "dateRange" || config.type === "dateTree" ? /* @__PURE__ */ jsx(CalendarSearch, { className: "size-3" }) : /* @__PURE__ */ jsx(Filter, { className: "size-3" })
+    }
+  )
+);
+FilterTrigger.displayName = "FilterTrigger";
+function FilterPopover({
+  config
+}) {
+  const {
+    getFieldFilters
+  } = useFilters();
+  const [open, setOpen] = React14.useState(false);
+  const [multiSelectSearch, setMultiSelectSearch] = React14.useState("");
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: setOpen,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          FilterTrigger,
+          {
+            config,
+            anyActive: isFilterActive(
+              config,
+              getFieldFilters
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            align: "end",
+            onClick: (e) => e.stopPropagation(),
+            onOpenAutoFocus: (event) => {
+              const container = event.target;
+              const input = container?.querySelector(
+                'input:not([type="hidden"]):not([disabled])'
+              );
+              if (input) {
+                event.preventDefault();
+                input.focus();
+              }
+            },
+            className: cn(
+              "z-200",
+              "border",
+              "border-border",
+              "p-3",
+              getFilterPopoverWidthClass(config.type)
+            ),
+            children: renderSingleFilter(
+              config,
+              () => setOpen(false),
+              {
+                multiSelectSearch,
+                onMultiSelectSearchChange: setMultiSelectSearch
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ColumnHeaderFilter({
+  filterConfig
+}) {
+  const configs = Array.isArray(filterConfig) ? filterConfig : [filterConfig];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex",
+        "items-center",
+        "gap-0.5"
+      ),
+      children: configs.map((config) => /* @__PURE__ */ jsx(
+        FilterPopover,
+        {
+          config
+        },
+        config.id
+      ))
+    }
+  );
+}
+function columnLabel(col) {
+  return typeof col.header === "string" ? col.header : col.id;
+}
+function ColumnVisibilityPanel({ columns }) {
+  const { t } = useTranslation("datatable");
+  const { isColumnVisible, toggleColumn, showAllColumns, hideAllColumns } = useColumnVisibility();
+  const hiddenCount = columns.filter((col) => !isColumnVisible(col.id)).length;
+  const allVisible = hiddenCount === 0;
+  const allHidden = hiddenCount === columns.length;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: hiddenCount > 0 ? "default" : "outline",
+        size: "sm",
+        className: "gap-2",
+        children: [
+          /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4" }),
+          t("column"),
+          hiddenCount > 0 && /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-white/20 px-1.5 py-0.5 text-[10px] font-semibold leading-none tabular-nums", children: [
+            "-",
+            hiddenCount
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "end",
+        className: "z-[200] w-52 p-0 shadow-xl border border-border",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: t("showColumns") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: showAllColumns,
+                  disabled: allVisible,
+                  title: "Tampilkan semua",
+                  className: cn(
+                    "rounded p-1 transition-colors",
+                    allVisible ? "text-muted-foreground/40 cursor-default" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: hideAllColumns,
+                  disabled: allHidden,
+                  title: "Sembunyikan semua",
+                  className: cn(
+                    "rounded p-1 transition-colors",
+                    allHidden ? "text-muted-foreground/40 cursor-default" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto py-1", children: columns.map((col) => {
+            const visible = isColumnVisible(col.id);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleColumn(col.id),
+                className: "flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-xs hover:bg-muted transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: visible,
+                      className: "size-4 pointer-events-none"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: cn(!visible && "text-muted-foreground line-through"), children: columnLabel(col) })
+                ]
+              },
+              col.id
+            );
+          }) }),
+          hiddenCount > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t px-3 py-2 text-[11px] text-muted-foreground", children: [
+            columns.length - hiddenCount,
+            " ",
+            t("of"),
+            " ",
+            columns.length,
+            " ",
+            t("column_plural")
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ColumnPinMenu({ pin, onPin, onUnpin }) {
+  const { t } = useTranslation("datatable");
+  const isPinned = pin === "left" || pin === "right";
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: (event) => event.stopPropagation(),
+        title: isPinned ? t("columnPin.pinned") : t("columnPin.pinning"),
+        className: cn(
+          "flex h-5 w-5 items-center justify-center rounded",
+          isPinned ? "text-destructive" : "text-muted-foreground hover:bg-muted"
+        ),
+        children: /* @__PURE__ */ jsx(Pin, { className: "size-3" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "z-200 w-44", onClick: (event) => event.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: pin === "left", onClick: () => onPin("left"), children: [
+        /* @__PURE__ */ jsx(ArrowLeftToLine, { className: "size-3.5" }),
+        t("columnPin.pinLeft")
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: pin === "right", onClick: () => onPin("right"), children: [
+        /* @__PURE__ */ jsx(ArrowRightToLine, { className: "size-3.5" }),
+        t("columnPin.pinRight")
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: !isPinned, onClick: onUnpin, children: [
+        /* @__PURE__ */ jsx(PinOff, { className: "size-3.5" }),
+        t("columnPin.unpin")
+      ] })
+    ] })
+  ] });
+}
+var SelectionSummary2 = React14.lazy(
+  () => import('./SelectionSummary-N6MMSND2.js').then((module) => ({ default: module.SelectionSummary }))
+);
+function CopyCell({ text, children }) {
+  const { t } = useTranslation("datatable");
+  const [copied, setCopied] = React14.useState(false);
+  const handleCopy = (e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        title: copied ? t("copied") : t("copyTooltip"),
+        className: "shrink-0 rounded p-0.5 text-muted-foreground/50 transition-colors hover:text-foreground",
+        children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-emerald-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+}
+function ExpandedRowLoader({
+  row,
+  onLoad,
+  renderContent
+}) {
+  const [state, setState] = React14.useState({
+    data: null,
+    isLoading: true,
+    error: null
+  });
+  React14.useEffect(() => {
+    let cancelled = false;
+    setState({ data: null, isLoading: true, error: null });
+    onLoad(row).then((data) => {
+      if (!cancelled) setState({ data, isLoading: false, error: null });
+    }).catch((err) => {
+      if (!cancelled) setState({ data: null, isLoading: false, error: String(err) });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: renderContent(row, state.data, { isLoading: state.isLoading, error: state.error }) });
+}
+var STICKY_SELECTION_KEY = "__datatable_selection__";
+var STICKY_EXPAND_KEY = "__datatable_expand__";
+var STICKY_ROW_NUMBER_KEY = "__datatable_rownumber__";
+var TOOL_COLUMN_WIDTH = 48;
+var DEFAULT_STICKY_DATA_COLUMN_WIDTH = 160;
+var MIN_COLUMN_WIDTH = 130;
+var SKELETON_CELL_WIDTHS = ["90%", "65%", "80%", "50%", "75%"];
+function areNumberRecordsEqual(a, b) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every((key) => a[key] === b[key]);
+}
+function deriveRowSurfaceClasses(rowClassName) {
+  const tokens = (rowClassName ?? "").split(/\s+/).filter(Boolean);
+  const base = tokens.filter((token) => /^(dark:)?bg-/.test(token));
+  const hover = tokens.filter((token) => /(^|:)hover:bg-/.test(token)).map((token) => {
+    if (token.startsWith("dark:hover:")) return token.replace("dark:hover:", "dark:group-hover:");
+    if (token.startsWith("hover:")) return token.replace("hover:", "group-hover:");
+    return token;
+  });
+  return {
+    base,
+    hover,
+    hasCustomSurface: base.length > 0 || hover.length > 0
+  };
+}
+function DataTableInner({
+  columns,
+  data,
+  isLoading = false,
+  error = null,
+  rowKey,
+  onRowClick,
+  showSelection = true,
+  showExpand = false,
+  stickySelection = true,
+  stickyExpand = true,
+  showRowNumber = false,
+  stickyRowNumber = true,
+  expandContent,
+  onExpandLoad,
+  expandLoadContent,
+  paginationMode = "traditional",
+  showFilters = true,
+  showSearch = false,
+  placeholder = "Search data...",
+  searchFields,
+  searchPlaceholder,
+  tableHeight,
+  infiniteScrollHeight,
+  pageSizeOptions = [10, 25, 50, 100],
+  manualPagination = false,
+  manualSorting = false,
+  manualFiltering = false,
+  totalCount,
+  onStateChange,
+  emptyStateMessage = "No Data Available",
+  labelSelection = "Action",
+  toolbarLeft,
+  toolbarRight,
+  renderSelectionCell,
+  selectableTotalCount,
+  rowClassName,
+  showColumnVisibility = false,
+  enableColumnResizing = true,
+  enableColumnPinning = true,
+  onSelectAllAttempt
+}) {
+  const { isColumnVisible, setVisibility } = useColumnVisibility();
+  const { pinning, pinColumn, unpinColumn } = useColumnPinning();
+  const { t } = useTranslation("datatable");
+  const { pageIndex, pageSize: contextPageSize, updatePaginationCount, goToPage } = usePagination();
+  const skeletonRowCount = Math.min(Math.max(contextPageSize, 5), 10);
+  const { sort, toggleSort } = useSort();
+  const { isRowExpanded, clearSelectAll, selectionMode: effectiveSelectionMode } = useSelection();
+  const { filters } = useFilters();
+  const filterableColumns = React14.useMemo(
+    () => columns.filter((col) => col.filterable && col.filterConfig).flatMap((col) => {
+      const cfg = col.filterConfig;
+      return Array.isArray(cfg) ? cfg : [cfg];
+    }),
+    [columns]
+  );
+  const sanitizedFilters = React14.useMemo(() => {
+    return filters.filter((filter) => {
+      if (filter.type !== "multiSelect" || !Array.isArray(filter.value)) return true;
+      const config = filterableColumns.find((item) => item.id === filter.field && item.type === "multiSelect");
+      const optionValues = Array.from(new Set((config?.options ?? []).map((option) => String(option.value))));
+      if (optionValues.length === 0) return true;
+      if (filter.value.length !== optionValues.length) return true;
+      const selectedSet = new Set(filter.value.map(String));
+      return !optionValues.every((value) => selectedSet.has(value));
+    });
+  }, [filters, filterableColumns]);
+  const [showFilterPanel, setShowFilterPanel] = React14.useState(false);
+  const [searchInput, setSearchInput] = React14.useState("");
+  const [searchQuery, setSearchQuery] = React14.useState("");
+  const stickyCellRefs = React14.useRef({});
+  const headerCellRefs = React14.useRef({});
+  const [stickyOffsets, setStickyOffsets] = React14.useState({});
+  const [stickyWidths, setStickyWidths] = React14.useState({});
+  const [columnWidths, setColumnWidths] = React14.useState({});
+  const [resizingColumnId, setResizingColumnId] = React14.useState(null);
+  const resizeStateRef = React14.useRef(null);
+  const tableScrollContainerRef = React14.useRef(null);
+  const rowElementsRef = React14.useRef({});
+  const rowSurfaceColorsRef = React14.useRef({});
+  const [hoveredRowId, setHoveredRowId] = React14.useState(null);
+  const [, bumpRowSurfaceVersion] = React14.useReducer((value) => value + 1, 0);
+  const rowSurface = React14.useMemo(() => deriveRowSurfaceClasses(rowClassName), [rowClassName]);
+  const stickyFallbackSurface = React14.useMemo(
+    () => !rowSurface.hasCustomSurface ? ["bg-card", "group-hover:bg-muted"] : [],
+    [rowSurface.hasCustomSurface]
+  );
+  const getEffectivePin = React14.useCallback(
+    (column) => {
+      const runtimePin = pinning[column.id];
+      if (runtimePin !== void 0) return runtimePin;
+      if (column.sticky === "right") return "right";
+      if (column.sticky) return "left";
+      return false;
+    },
+    [pinning]
+  );
+  const canPinColumn = React14.useCallback(
+    (column) => enableColumnPinning && column.pinnable !== false,
+    [enableColumnPinning]
+  );
+  const isStickyLeftColumn = React14.useCallback(
+    (column) => getEffectivePin(column) === "left",
+    [getEffectivePin]
+  );
+  const isStickyRightColumn = React14.useCallback(
+    (column) => getEffectivePin(column) === "right",
+    [getEffectivePin]
+  );
+  const isAutoHeight = tableHeight === "auto";
+  const resolvedTableHeight = React14.useMemo(() => {
+    if (isAutoHeight) return void 0;
+    const heightValue = tableHeight ?? infiniteScrollHeight;
+    if (heightValue !== void 0 && heightValue !== null) {
+      return typeof heightValue === "number" ? `${heightValue}px` : heightValue;
+    }
+    return paginationMode === "infinite" ? "600px" : void 0;
+  }, [tableHeight, isAutoHeight, infiniteScrollHeight, paginationMode]);
+  const isScrollable = isAutoHeight || Boolean(resolvedTableHeight);
+  const tableBodyStyle = React14.useMemo(
+    () => resolvedTableHeight ? { maxHeight: resolvedTableHeight } : void 0,
+    [resolvedTableHeight]
+  );
+  const searchableColumns = React14.useMemo(() => {
+    const targetFields = searchFields?.length ? searchFields.map(String) : columns.map((column) => column.id);
+    return columns.filter((column) => targetFields.includes(column.id));
+  }, [columns, searchFields]);
+  const resolvedSearchPlaceholder = React14.useMemo(() => {
+    if (searchPlaceholder) return searchPlaceholder;
+    if (!showSearch) return "";
+    if (!searchableColumns.length) return "Search...";
+    const labels = searchableColumns.map(
+      (column) => typeof column.header === "string" ? column.header : column.id
+    );
+    if (searchFields?.length) {
+      if (placeholder) return placeholder;
+      return labels.length ? `Search ${labels.join(", ")}...` : "Search...";
+    }
+    return "Search all columns...";
+  }, [searchPlaceholder, showSearch, searchableColumns, searchFields]);
+  const applySearch = React14.useCallback(
+    (rows, query) => {
+      const normalizedQuery = query.trim().toLowerCase();
+      if (!normalizedQuery) return rows;
+      if (!searchableColumns.length) return rows;
+      return rows.filter(
+        (row) => searchableColumns.some((column) => {
+          let value = null;
+          if (column.accessor) {
+            if (typeof column.accessor === "function") {
+              value = column.accessor(row);
+            } else {
+              value = row[column.accessor];
+            }
+          } else {
+            value = row[column.id];
+          }
+          if (value === null || value === void 0) return false;
+          return String(value).toLowerCase().includes(normalizedQuery);
+        })
+      );
+    },
+    [searchableColumns]
+  );
+  const handleSearchSubmit = () => {
+    const nextQuery = searchInput.trim();
+    setSearchInput(nextQuery);
+    setSearchQuery(nextQuery);
+    goToPage(1);
+  };
+  const handleSearchClear = () => {
+    setSearchInput("");
+    setSearchQuery("");
+    goToPage(1);
+  };
+  const applySort = React14.useCallback(
+    (rows, sortState) => {
+      if (!sortState.column || !sortState.order) return rows;
+      return [...rows].sort((a, b) => {
+        const column = columns.find((c) => c.id === sortState.column);
+        if (!column) return 0;
+        let valA;
+        let valB;
+        if (column.accessor) {
+          if (typeof column.accessor === "function") {
+            valA = column.accessor(a);
+            valB = column.accessor(b);
+          } else {
+            valA = a[column.accessor];
+            valB = b[column.accessor];
+          }
+        }
+        if (valA === valB) return 0;
+        if (valA == null) return 1;
+        if (valB == null) return -1;
+        const multiplier = sortState.order === "desc" ? -1 : 1;
+        if (typeof valA === "string" && typeof valB === "string") {
+          return valA.localeCompare(valB) * multiplier;
+        }
+        return (valA < valB ? -1 : 1) * multiplier;
+      });
+    },
+    [columns]
+  );
+  const processedData = React14.useMemo(() => {
+    let result = data;
+    if (!manualFiltering) {
+      result = applySearch(result, searchQuery);
+    }
+    if (!manualFiltering) {
+      result = applyFilters(result, sanitizedFilters);
+    }
+    if (!manualSorting) {
+      result = applySort(result, sort);
+    }
+    return result;
+  }, [data, sanitizedFilters, sort, searchQuery, applySearch, applySort, manualFiltering, manualSorting]);
+  const paginatedData = React14.useMemo(() => {
+    if (manualPagination) return processedData;
+    if (paginationMode === "infinite") {
+      return processedData.slice(0, pageIndex * contextPageSize);
+    }
+    const start = (pageIndex - 1) * contextPageSize;
+    return processedData.slice(start, start + contextPageSize);
+  }, [processedData, pageIndex, contextPageSize, paginationMode, manualPagination]);
+  const visibleColumns = React14.useMemo(() => {
+    const shown = columns.filter((col) => isColumnVisible(col.id));
+    const left = shown.filter((col) => isStickyLeftColumn(col));
+    const right = shown.filter((col) => isStickyRightColumn(col));
+    const center = shown.filter((col) => !isStickyLeftColumn(col) && !isStickyRightColumn(col));
+    return [...left, ...center, ...right];
+  }, [columns, isColumnVisible, isStickyLeftColumn, isStickyRightColumn]);
+  const [isScrolled, setIsScrolled] = React14.useState(false);
+  const [isScrolledEnd, setIsScrolledEnd] = React14.useState(false);
+  const [containerClientWidth, setContainerClientWidth] = React14.useState(0);
+  React14.useEffect(() => {
+    const outer = tableScrollContainerRef.current;
+    if (!outer) return;
+    const inner = outer.querySelector('[data-slot="table-container"]');
+    const scroller = (isScrollable ? outer : inner) ?? outer;
+    const handleScroll = () => {
+      setIsScrolled(scroller.scrollLeft > 0);
+      setIsScrolledEnd(
+        scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 2
+      );
+    };
+    scroller.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => scroller.removeEventListener("scroll", handleScroll);
+  }, [paginatedData, isScrollable]);
+  const rowIds = processedData.map((row) => String(row[rowKey]));
+  const stickyColumns = React14.useMemo(
+    () => visibleColumns.filter((column) => isStickyLeftColumn(column)),
+    [visibleColumns, isStickyLeftColumn]
+  );
+  const stickyRightColumns = React14.useMemo(
+    () => visibleColumns.filter((column) => isStickyRightColumn(column)),
+    [visibleColumns, isStickyRightColumn]
+  );
+  const stickyColumnKeys = React14.useMemo(() => {
+    const keys = [];
+    if (showSelection && stickySelection) keys.push(STICKY_SELECTION_KEY);
+    if (showExpand && stickyExpand) keys.push(STICKY_EXPAND_KEY);
+    if (showRowNumber && stickyRowNumber) keys.push(STICKY_ROW_NUMBER_KEY);
+    stickyColumns.forEach((column) => {
+      keys.push(column.id);
+    });
+    return keys;
+  }, [showSelection, stickySelection, showExpand, stickyExpand, showRowNumber, stickyRowNumber, stickyColumns]);
+  const stickyRightColumnKeys = React14.useMemo(
+    () => [...stickyRightColumns].reverse().map((column) => column.id),
+    [stickyRightColumns]
+  );
+  const lastStickyLeftKey = React14.useMemo(() => {
+    return stickyColumnKeys[stickyColumnKeys.length - 1];
+  }, [stickyColumnKeys]);
+  const lastStickyRightKey = React14.useMemo(() => {
+    return stickyRightColumnKeys[stickyRightColumnKeys.length - 1];
+  }, [stickyRightColumnKeys]);
+  const measureStickyOffsets = React14.useCallback(() => {
+    const nextOffsets = {};
+    const nextWidths = {};
+    let left = 0;
+    stickyColumnKeys.forEach((key) => {
+      const isToolCol = key === STICKY_SELECTION_KEY || key === STICKY_EXPAND_KEY || key === STICKY_ROW_NUMBER_KEY;
+      const measuredWidth = isToolCol ? TOOL_COLUMN_WIDTH : stickyCellRefs.current[key]?.getBoundingClientRect().width ?? 0;
+      nextOffsets[key] = left;
+      nextWidths[key] = measuredWidth;
+      left += measuredWidth;
+    });
+    let right = 0;
+    stickyRightColumnKeys.forEach((key) => {
+      const measuredWidth = stickyCellRefs.current[key]?.getBoundingClientRect().width ?? 0;
+      nextOffsets[key] = right;
+      nextWidths[key] = measuredWidth;
+      right += measuredWidth;
+    });
+    setStickyOffsets((prev) => areNumberRecordsEqual(prev, nextOffsets) ? prev : nextOffsets);
+    setStickyWidths((prev) => areNumberRecordsEqual(prev, nextWidths) ? prev : nextWidths);
+  }, [stickyColumnKeys, stickyRightColumnKeys]);
+  const buildStickySizeStyle = React14.useCallback(
+    (width, fallbackKey) => {
+      const measuredWidth = fallbackKey ? stickyWidths[fallbackKey] : void 0;
+      const resolvedWidth = typeof width === "number" ? `${width}px` : width ?? (measuredWidth !== void 0 && measuredWidth > 0 ? `${measuredWidth}px` : fallbackKey === STICKY_SELECTION_KEY || fallbackKey === STICKY_EXPAND_KEY || fallbackKey === STICKY_ROW_NUMBER_KEY ? `${TOOL_COLUMN_WIDTH}px` : void 0);
+      return resolvedWidth ? {
+        width: resolvedWidth,
+        minWidth: resolvedWidth,
+        maxWidth: resolvedWidth
+      } : void 0;
+    },
+    [stickyWidths]
+  );
+  const readResolvedBackgroundColor = React14.useCallback((element) => {
+    if (!element || typeof window === "undefined") return void 0;
+    const backgroundColor = window.getComputedStyle(element).backgroundColor;
+    if (!backgroundColor || backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)") {
+      return void 0;
+    }
+    return backgroundColor;
+  }, []);
+  const syncRowBaseSurface = React14.useCallback((rowId, element) => {
+    if (!rowSurface.hasCustomSurface || !element) return;
+    const nextBase = readResolvedBackgroundColor(element);
+    const current = rowSurfaceColorsRef.current[rowId];
+    if (current?.base !== nextBase) {
+      rowSurfaceColorsRef.current[rowId] = { ...current, base: nextBase };
+      bumpRowSurfaceVersion();
+    }
+  }, [readResolvedBackgroundColor, rowSurface.hasCustomSurface]);
+  const registerRowElement = React14.useCallback((rowId, element) => {
+    rowElementsRef.current[rowId] = element;
+    syncRowBaseSurface(rowId, element);
+  }, [syncRowBaseSurface]);
+  const cacheHoveredRowSurface = React14.useCallback((rowId) => {
+    if (!rowSurface.hasCustomSurface) return;
+    const element = rowElementsRef.current[rowId];
+    if (!element) return;
+    const nextHover = readResolvedBackgroundColor(element);
+    const current = rowSurfaceColorsRef.current[rowId];
+    if (current?.hover !== nextHover) {
+      rowSurfaceColorsRef.current[rowId] = { ...current, hover: nextHover };
+      bumpRowSurfaceVersion();
+    }
+  }, [readResolvedBackgroundColor, rowSurface.hasCustomSurface]);
+  const getStickySurfaceStyle = React14.useCallback((rowId) => {
+    if (!rowSurface.hasCustomSurface) return void 0;
+    const colors = rowSurfaceColorsRef.current[rowId];
+    const backgroundColor = hoveredRowId === rowId ? colors?.hover ?? colors?.base : colors?.base;
+    return backgroundColor ? { backgroundColor } : void 0;
+  }, [hoveredRowId, rowSurface.hasCustomSurface]);
+  const getColumnStyle = React14.useCallback(
+    (column) => {
+      const resizedWidth = columnWidths[column.id];
+      if (!isStickyLeftColumn(column) && !isStickyRightColumn(column)) {
+        if (resizedWidth !== void 0) {
+          const w = `${resizedWidth}px`;
+          return { width: w, minWidth: w, maxWidth: w };
+        }
+        if (column.width !== void 0) {
+          const w = typeof column.width === "number" ? `${column.width}px` : column.width;
+          return { width: w, minWidth: w, maxWidth: w };
+        }
+        return void 0;
+      }
+      const fallbackWidth = resizedWidth !== void 0 ? `${resizedWidth}px` : typeof column.width === "number" ? `${column.width}px` : column.width ?? (stickyWidths[column.id] != null ? `${stickyWidths[column.id]}px` : `${DEFAULT_STICKY_DATA_COLUMN_WIDTH}px`);
+      return {
+        width: fallbackWidth,
+        minWidth: fallbackWidth,
+        maxWidth: fallbackWidth
+      };
+    },
+    [isStickyLeftColumn, isStickyRightColumn, stickyWidths, columnWidths]
+  );
+  const canResizeColumn = React14.useCallback(
+    (column) => enableColumnResizing && column.resizable !== false,
+    [enableColumnResizing]
+  );
+  const handleResizePointerDown = React14.useCallback(
+    (event, column) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const startWidth = columnWidths[column.id] ?? headerCellRefs.current[column.id]?.getBoundingClientRect().width ?? DEFAULT_STICKY_DATA_COLUMN_WIDTH;
+      resizeStateRef.current = { columnId: column.id, startX: event.clientX, startWidth };
+      setResizingColumnId(column.id);
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [columnWidths]
+  );
+  const handleResizePointerMove = React14.useCallback((event) => {
+    const state = resizeStateRef.current;
+    if (!state) return;
+    const nextWidth = Math.max(MIN_COLUMN_WIDTH, Math.round(state.startWidth + (event.clientX - state.startX)));
+    setColumnWidths((prev) => prev[state.columnId] === nextWidth ? prev : { ...prev, [state.columnId]: nextWidth });
+  }, []);
+  const handleResizePointerUp = React14.useCallback((event) => {
+    resizeStateRef.current = null;
+    setResizingColumnId(null);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  }, []);
+  const handleResizeDoubleClick = React14.useCallback((event, column) => {
+    event.stopPropagation();
+    setColumnWidths((prev) => {
+      if (!(column.id in prev)) return prev;
+      const next = { ...prev };
+      delete next[column.id];
+      return next;
+    });
+  }, []);
+  const lastDataLengthRef = React14.useRef(processedData.length);
+  useEffect(() => {
+    if (manualPagination) {
+      if (totalCount !== void 0) {
+        const pageCount = Math.max(1, Math.ceil(totalCount / contextPageSize));
+        const safePageIndex = pageIndex > pageCount ? 1 : pageIndex;
+        updatePaginationCount({
+          pageIndex: safePageIndex,
+          pageCount,
+          totalData: totalCount
+        });
+      }
+      return;
+    }
+    const dataChanged = lastDataLengthRef.current !== processedData.length;
+    lastDataLengthRef.current = processedData.length;
+    updatePaginationCount({
+      pageIndex: dataChanged ? 1 : pageIndex,
+      pageCount: Math.ceil(processedData.length / contextPageSize),
+      totalData: processedData.length
+    });
+  }, [processedData.length, contextPageSize, updatePaginationCount, manualPagination, totalCount, pageIndex]);
+  const filterResetRef = React14.useRef(false);
+  useEffect(() => {
+    if (manualPagination && (manualFiltering || manualSorting)) {
+      filterResetRef.current = true;
+      goToPage(1);
+    }
+  }, [filters, searchQuery, sort, manualPagination, manualFiltering, manualSorting]);
+  useEffect(() => {
+    onStateChange?.({
+      pageIndex: filterResetRef.current ? 1 : pageIndex,
+      pageSize: contextPageSize,
+      sort,
+      filters: sanitizedFilters,
+      search: showSearch ? {
+        query: searchQuery,
+        fields: searchFields?.length ? searchFields.map(String) : columns.map((column) => column.id)
+      } : void 0
+    });
+    filterResetRef.current = false;
+  }, [pageIndex, contextPageSize, sort, sanitizedFilters, searchQuery, showSearch, onStateChange]);
+  useEffect(() => {
+    const initialVisibility = columns.reduce(
+      (acc, col) => ({
+        ...acc,
+        [col.id]: isColumnVisible(col.id)
+      }),
+      {}
+    );
+    setVisibility(initialVisibility);
+  }, [columns, setVisibility]);
+  React14.useLayoutEffect(() => {
+    measureStickyOffsets();
+    setContainerClientWidth(tableScrollContainerRef.current?.clientWidth ?? 0);
+  }, [measureStickyOffsets, paginatedData, visibleColumns, showSelection, showExpand, columnWidths]);
+  useEffect(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const container = tableScrollContainerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(() => {
+      measureStickyOffsets();
+      setContainerClientWidth(container.clientWidth);
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+    };
+  }, [measureStickyOffsets]);
+  const getColumnValue = (row, column) => {
+    if (column.cell) {
+      return column.cell(row);
+    }
+    if (column.accessor) {
+      if (typeof column.accessor === "function") {
+        return column.accessor(row);
+      }
+      return row[column.accessor];
+    }
+    return null;
+  };
+  const getCopyText = (row, column) => {
+    if (column.copyValue) return column.copyValue(row);
+    if (column.accessor && typeof column.accessor !== "function") {
+      return String(row[column.accessor] ?? "");
+    }
+    return String(row[column.id] ?? "");
+  };
+  const renderSortIcon = (columnId) => {
+    if (sort.column !== columnId) {
+      return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4 text-muted-foreground" });
+    }
+    return sort.order === "asc" ? /* @__PURE__ */ jsx(ArrowUpNarrowWide, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ArrowDownNarrowWide, { className: "h-4 w-4" });
+  };
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex h-full min-h-60 w-full flex-1 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-destructive/30 bg-destructive/5 px-6 py-10 text-center animate-in fade-in zoom-in-95 duration-300 ease-out",
+        style: resolvedTableHeight ? { minHeight: resolvedTableHeight } : void 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(AlertCircle, { className: "size-6 text-destructive" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: t("loadFailed") }),
+            /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: error })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(isAutoHeight ? "flex h-full min-h-0 flex-col gap-4" : "space-y-4"), children: [
+    (showSearch || toolbarLeft || showFilters && filterableColumns.length > 0 || showColumnVisibility || toolbarRight) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+      showSearch ? /* @__PURE__ */ jsxs("div", { className: "w-full md:max-w-md", children: [
+        /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "datatable-search", children: "Search" }),
+        /* @__PURE__ */ jsxs("div", { className: "group relative w-fit", children: [
+          /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground transition-colors group-focus-within:text-foreground" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "datatable-search",
+              value: searchInput,
+              onChange: (event) => setSearchInput(event.target.value),
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  handleSearchSubmit();
+                }
+              },
+              placeholder: resolvedSearchPlaceholder,
+              className: "h-9 w-80 rounded-lg border-border/70 bg-muted/40 pl-9 pr-9 shadow-sm transition-colors focus-visible:bg-background"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onMouseDown: (event) => {
+                if (!searchInput) return;
+                event.preventDefault();
+              },
+              onClick: (event) => {
+                if (!searchInput) return;
+                event.preventDefault();
+                event.stopPropagation();
+                handleSearchClear();
+              },
+              className: cn(
+                "absolute right-1.5 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground focus-visible:outline-none",
+                searchInput ? "pointer-events-auto opacity-100 transition-colors hover:bg-muted hover:text-foreground" : "pointer-events-none opacity-0"
+              ),
+              "aria-label": "Clear search",
+              tabIndex: searchInput ? 0 : -1,
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] }) : toolbarLeft && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: toolbarLeft }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 justify-end", children: [
+        showFilters && filterableColumns.length > 0 && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: showFilterPanel ? "default" : "outline",
+            size: "sm",
+            onClick: () => setShowFilterPanel(!showFilterPanel),
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+              "Filters"
+            ]
+          }
+        ),
+        showColumnVisibility && /* @__PURE__ */ jsx(ColumnVisibilityPanel, { columns }),
+        toolbarRight
+      ] })
+    ] }),
+    showFilterPanel && filterableColumns.length > 0 && /* @__PURE__ */ jsx(
+      FilterPanel,
+      {
+        columns: filterableColumns,
+        onClose: () => setShowFilterPanel(false)
+      }
+    ),
+    showSelection && /* @__PURE__ */ jsx(React14.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(SelectionSummary2, { actionLabel: labelSelection }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tableScrollContainerRef,
+        className: cn(
+          "relative rounded-xl border border-border bg-card shadow-sm tms-scroll",
+          isAutoHeight ? "min-h-0 flex-1 overflow-auto" : resolvedTableHeight ? "overflow-auto" : "overflow-hidden"
+        ),
+        style: tableBodyStyle,
+        children: /* @__PURE__ */ jsxs(Table, { containerClassName: isScrollable ? "overflow-visible" : void 0, children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            showSelection && /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                ref: (node) => {
+                  if (stickySelection) {
+                    stickyCellRefs.current[STICKY_SELECTION_KEY] = node;
+                  }
+                },
+                className: cn(
+                  "h-11 text-center bg-muted sticky top-0",
+                  stickySelection ? "z-70" : "z-60",
+                  stickySelection && isScrolled && STICKY_SELECTION_KEY === lastStickyLeftKey && "shadow-[10px_0_15px_-5px_rgba(0,0,0,0.15),inset_-8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                ),
+                style: {
+                  left: stickySelection ? stickyOffsets[STICKY_SELECTION_KEY] ?? 0 : void 0,
+                  ...buildStickySizeStyle(void 0, STICKY_SELECTION_KEY)
+                },
+                children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: effectiveSelectionMode === "radio" ? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: "Pilih" }) : /* @__PURE__ */ jsx(
+                  SelectAllCheckbox,
+                  {
+                    rowIds,
+                    totalCount: selectableTotalCount ?? totalCount,
+                    onSelectAllAttempt
+                  }
+                ) })
+              }
+            ),
+            showExpand && /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                ref: (node) => {
+                  if (stickyExpand) {
+                    stickyCellRefs.current[STICKY_EXPAND_KEY] = node;
+                  }
+                },
+                className: cn(
+                  "h-11 text-center bg-muted sticky top-0",
+                  stickyExpand ? "z-70" : "z-60",
+                  stickyExpand && isScrolled && STICKY_EXPAND_KEY === lastStickyLeftKey && "shadow-[10px_0_15px_-5px_rgba(0,0,0,0.15),inset_-8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                ),
+                style: {
+                  left: stickyExpand ? stickyOffsets[STICKY_EXPAND_KEY] ?? 0 : void 0,
+                  ...buildStickySizeStyle(void 0, STICKY_EXPAND_KEY)
+                },
+                children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "block h-4 w-4" }) })
+              }
+            ),
+            showRowNumber && /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                ref: (node) => {
+                  if (stickyRowNumber) {
+                    stickyCellRefs.current[STICKY_ROW_NUMBER_KEY] = node;
+                  }
+                },
+                className: cn(
+                  "h-11 text-center bg-muted sticky top-0",
+                  stickyRowNumber ? "z-70" : "z-60",
+                  stickyRowNumber && isScrolled && STICKY_ROW_NUMBER_KEY === lastStickyLeftKey && "shadow-[10px_0_15px_-5px_rgba(0,0,0,0.15),inset_-8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                ),
+                style: {
+                  left: stickyRowNumber ? stickyOffsets[STICKY_ROW_NUMBER_KEY] ?? 0 : void 0,
+                  ...buildStickySizeStyle(TOOL_COLUMN_WIDTH, STICKY_ROW_NUMBER_KEY)
+                },
+                children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-xs font-semibold text-muted-foreground", children: "No" })
+              }
+            ),
+            visibleColumns.map((column) => /* @__PURE__ */ jsxs(
+              TableHead,
+              {
+                ref: (node) => {
+                  headerCellRefs.current[column.id] = node;
+                  if (isStickyLeftColumn(column) || isStickyRightColumn(column)) {
+                    stickyCellRefs.current[column.id] = node;
+                  }
+                },
+                className: cn(
+                  "h-11 relative group/th",
+                  isStickyLeftColumn(column) ? cn(
+                    "sticky top-0 text-left bg-muted transition-[background-color,box-shadow] duration-200 z-70",
+                    isScrolled && column.id === lastStickyLeftKey && "shadow-[8px_0_16px_rgba(0,0,0,0.14),inset_-8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                  ) : isStickyRightColumn(column) ? cn(
+                    "sticky top-0 text-left bg-muted transition-[background-color,box-shadow] duration-200 z-70",
+                    isScrolledEnd && column.id === lastStickyRightKey && "shadow-[-8px_0_16px_rgba(0,0,0,0.14),inset_8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                  ) : "sticky top-0 z-60 text-left bg-muted",
+                  "text-xs font-semibold text-muted-foreground",
+                  column.headerClassName
+                ),
+                style: {
+                  ...getColumnStyle(column),
+                  left: isStickyLeftColumn(column) ? stickyOffsets[column.id] ?? 0 : void 0,
+                  right: isStickyRightColumn(column) ? stickyOffsets[column.id] ?? 0 : void 0
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-1", children: [
+                    column.sortable ? /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => toggleSort(column.id),
+                        className: "flex items-center gap-1.5 hover:text-foreground transition-colors",
+                        children: [
+                          column.header,
+                          renderSortIcon(column.id)
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { children: column.header }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      column.filterable && column.filterConfig && /* @__PURE__ */ jsx(ColumnHeaderFilter, { filterConfig: column.filterConfig }),
+                      canPinColumn(column) && /* @__PURE__ */ jsx(
+                        ColumnPinMenu,
+                        {
+                          pin: getEffectivePin(column),
+                          onPin: (side) => pinColumn(column.id, side),
+                          onUnpin: () => unpinColumn(column.id)
+                        }
+                      )
+                    ] })
+                  ] }),
+                  canResizeColumn(column) && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      onPointerDown: (event) => handleResizePointerDown(event, column),
+                      onPointerMove: handleResizePointerMove,
+                      onPointerUp: handleResizePointerUp,
+                      onClick: (event) => event.stopPropagation(),
+                      onDoubleClick: (event) => handleResizeDoubleClick(event, column),
+                      className: "absolute right-0 top-0 z-20 flex h-full w-2 cursor-col-resize touch-none select-none items-center justify-center",
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "h-4/6 w-px bg-border transition-colors group-hover/th:bg-muted-foreground/50",
+                            resizingColumnId === column.id && "w-0.5 bg-primary"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              column.id
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: isLoading ? (
+            // Loading skeletons
+            Array.from({ length: skeletonRowCount }).map((_, idx) => /* @__PURE__ */ jsxs(TableRow, { className: "border-b border-border/60", children: [
+              showSelection && /* @__PURE__ */ jsx(TableCell, { className: "py-3", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded" }) }),
+              showExpand && /* @__PURE__ */ jsx(TableCell, { className: "py-3", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded" }) }),
+              showRowNumber && /* @__PURE__ */ jsx(TableCell, { className: "py-3", children: /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto h-4 w-5 rounded" }) }),
+              visibleColumns.map((column, colIdx) => /* @__PURE__ */ jsx(TableCell, { className: "py-3", children: /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  className: "h-4 rounded",
+                  style: { width: SKELETON_CELL_WIDTHS[(idx + colIdx) % SKELETON_CELL_WIDTHS.length] }
+                }
+              ) }, column.id))
+            ] }, idx))
+          ) : processedData.length === 0 ? (
+            // Empty state
+            /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                colSpan: visibleColumns.length + (showSelection ? 1 : 0) + (showExpand ? 1 : 0) + (showRowNumber ? 1 : 0),
+                className: "p-0",
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex w-full flex-col items-center justify-center px-6 py-10 text-center animate-in fade-in zoom-in-95 duration-300 ease-out",
+                      isScrollable ? "min-h-[320px]" : "min-h-[240px]"
+                    ),
+                    style: resolvedTableHeight ? { minHeight: `calc(${resolvedTableHeight} - 45px)` } : void 0,
+                    children: [
+                      /* @__PURE__ */ jsx(EmptyStateIllustration, {}),
+                      /* @__PURE__ */ jsx("div", { className: "text-center text-muted-foreground", children: emptyStateMessage })
+                    ]
+                  }
+                )
+              }
+            ) })
+          ) : (
+            // Data rows
+            paginatedData.map((row, index) => {
+              const rowId = String(row[rowKey]);
+              const isExpanded = isRowExpanded(rowId);
+              return /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  TableRow,
+                  {
+                    ref: (node) => registerRowElement(rowId, node),
+                    onClick: () => onRowClick?.(row),
+                    onMouseEnter: () => {
+                      cacheHoveredRowSurface(rowId);
+                      setHoveredRowId(rowId);
+                    },
+                    onMouseLeave: () => {
+                      setHoveredRowId((current) => current === rowId ? null : current);
+                    },
+                    className: cn("group border-b border-border transition-colors duration-150 hover:bg-muted/60", rowClassName, {
+                      "cursor-pointer": onRowClick
+                    }),
+                    children: [
+                      showSelection && /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          onClick: (e) => e.stopPropagation(),
+                          className: cn(
+                            "py-3 text-center transition-[background-color,box-shadow] duration-200",
+                            !rowSurface.hasCustomSurface && "group-hover:bg-muted",
+                            stickySelection && "sticky z-45",
+                            stickySelection && stickyFallbackSurface,
+                            stickySelection && isScrolled && STICKY_SELECTION_KEY === lastStickyLeftKey && "shadow-[8px_0_16px_rgba(0,0,0,0.14),inset_-8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                          ),
+                          style: {
+                            ...getStickySurfaceStyle(rowId),
+                            left: stickySelection ? stickyOffsets[STICKY_SELECTION_KEY] ?? 0 : void 0,
+                            ...buildStickySizeStyle(void 0, STICKY_SELECTION_KEY)
+                          },
+                          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-foreground/90", children: renderSelectionCell ? renderSelectionCell(row, rowId, /* @__PURE__ */ jsx(RowCheckbox, { rowId, currentPageRowIds: rowIds })) : /* @__PURE__ */ jsx(RowCheckbox, { rowId, currentPageRowIds: rowIds }) })
+                        }
+                      ),
+                      showExpand && /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          onClick: (e) => e.stopPropagation(),
+                          className: cn(
+                            "py-3 text-center transition-[background-color,box-shadow] duration-200",
+                            !rowSurface.hasCustomSurface && "group-hover:bg-muted",
+                            stickyExpand && "sticky z-45",
+                            stickyExpand && stickyFallbackSurface,
+                            stickyExpand && isScrolled && STICKY_EXPAND_KEY === lastStickyLeftKey && "shadow-[8px_0_16px_rgba(0,0,0,0.14),inset_-8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                          ),
+                          style: {
+                            ...getStickySurfaceStyle(rowId),
+                            left: stickyExpand ? stickyOffsets[STICKY_EXPAND_KEY] ?? 0 : void 0,
+                            ...buildStickySizeStyle(void 0, STICKY_EXPAND_KEY)
+                          },
+                          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-foreground/90", children: /* @__PURE__ */ jsx(ExpandableRow, { rowId }) })
+                        }
+                      ),
+                      showRowNumber && /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          className: cn(
+                            "py-3 text-center font-medium text-muted-foreground text-xs transition-[background-color,box-shadow] duration-200",
+                            !rowSurface.hasCustomSurface && "group-hover:bg-muted",
+                            stickyRowNumber && "sticky z-45",
+                            stickyRowNumber && stickyFallbackSurface,
+                            stickyRowNumber && isScrolled && STICKY_ROW_NUMBER_KEY === lastStickyLeftKey && "shadow-[8px_0_16px_rgba(0,0,0,0.14),inset_-8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                          ),
+                          style: {
+                            ...getStickySurfaceStyle(rowId),
+                            left: stickyRowNumber ? stickyOffsets[STICKY_ROW_NUMBER_KEY] ?? 0 : void 0,
+                            ...buildStickySizeStyle(TOOL_COLUMN_WIDTH, STICKY_ROW_NUMBER_KEY)
+                          },
+                          children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-foreground/90", children: manualPagination && paginationMode === "infinite" ? index + 1 : (pageIndex - 1) * contextPageSize + index + 1 })
+                        }
+                      ),
+                      visibleColumns.map((column) => /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          className: cn(
+                            "py-3",
+                            !column.copyable && "truncate",
+                            isStickyLeftColumn(column) && cn(
+                              "sticky z-45 transition-[background-color,box-shadow] duration-200",
+                              !rowSurface.hasCustomSurface && stickyFallbackSurface,
+                              isScrolled && column.id === lastStickyLeftKey && "shadow-[8px_0_16px_rgba(0,0,0,0.14),inset_-8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                            ),
+                            isStickyRightColumn(column) && cn(
+                              "sticky z-45 transition-[background-color,box-shadow] duration-200",
+                              !rowSurface.hasCustomSurface && stickyFallbackSurface,
+                              isScrolledEnd && column.id === lastStickyRightKey && "shadow-[-8px_0_16px_rgba(0,0,0,0.14),inset_8px_0_8px_-8px_rgba(0,0,0,0.12)]"
+                            ),
+                            "text-foreground/90",
+                            typeof column.className === "function" ? column.className(row) : column.className
+                          ),
+                          style: {
+                            ...isStickyLeftColumn(column) || isStickyRightColumn(column) ? getStickySurfaceStyle(rowId) : void 0,
+                            ...getColumnStyle(column),
+                            left: isStickyLeftColumn(column) ? stickyOffsets[column.id] ?? 0 : void 0,
+                            right: isStickyRightColumn(column) ? stickyOffsets[column.id] ?? 0 : void 0
+                          },
+                          children: column.copyable ? /* @__PURE__ */ jsx(CopyCell, { text: getCopyText(row, column), children: getColumnValue(row, column) }) : getColumnValue(row, column)
+                        },
+                        column.id
+                      ))
+                    ]
+                  }
+                ),
+                showExpand && isExpanded && (expandContent || onExpandLoad && expandLoadContent) && /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    colSpan: visibleColumns.length + (showSelection ? 1 : 0) + (showExpand ? 1 : 0) + (showRowNumber ? 1 : 0),
+                    className: "p-0 border-t border-border/40",
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "sticky",
+                          left: 0,
+                          width: containerClientWidth > 0 ? containerClientWidth : void 0,
+                          boxSizing: "border-box",
+                          zIndex: 1,
+                          ...getStickySurfaceStyle(rowId)
+                        },
+                        className: cn(
+                          "animate-in fade-in slide-in-from-top-1 duration-200 ease-out",
+                          !rowSurface.hasCustomSurface && "bg-card"
+                        ),
+                        children: /* @__PURE__ */ jsx("div", { className: "p-4", children: onExpandLoad && expandLoadContent ? /* @__PURE__ */ jsx(ExpandedRowLoader, { row, onLoad: onExpandLoad, renderContent: expandLoadContent }) : expandContent?.(row) })
+                      }
+                    )
+                  }
+                ) })
+              ] }, rowId);
+            })
+          ) })
+        ] })
+      }
+    ),
+    paginationMode === "traditional" && /* @__PURE__ */ jsx(TraditionalPagination, { pageSizeOptions }),
+    paginationMode === "infinite" && /* @__PURE__ */ jsx(InfiniteScrollPagination, { isLoading })
+  ] });
+}
+function DataTable(props) {
+  const ambientPagination = useContext(PaginationContext);
+  if (ambientPagination) {
+    return /* @__PURE__ */ jsx(DataTableInner, { ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    DataTableProvider,
+    {
+      defaultPageSize: props.pageSize,
+      selectionMode: props.selectionMode,
+      defaultColumnVisibility: props.defaultColumnVisibility,
+      defaultColumnPinning: props.defaultColumnPinning,
+      children: /* @__PURE__ */ jsx(DataTableInner, { ...props })
+    }
+  );
+}
+
+// src/data-table/lib/query-builder.ts
+function buildQueryParams(pageIndex, pageSize, filters, sort, additionalParams, search) {
+  const params = {
+    pageIndex,
+    pageSize
+  };
+  if (sort.column) {
+    params.sortBy = sort.column;
+    params.sortOrder = sort.order || "asc";
+  }
+  filters.forEach((filter) => {
+    const filterKey = `filters[${filter.field}]`;
+    if (filter.type === "dateRange" && Array.isArray(filter.value)) {
+      params[`${filterKey}[from]`] = filter.value[0];
+      params[`${filterKey}[to]`] = filter.value[1];
+    } else if (filter.type === "range" && Array.isArray(filter.value)) {
+      params[`${filterKey}[min]`] = filter.value[0];
+      params[`${filterKey}[max]`] = filter.value[1];
+    } else if (filter.type === "multiSelect" && Array.isArray(filter.value)) {
+      params[`${filterKey}[]`] = filter.value;
+    } else {
+      params[filterKey] = filter.value;
+    }
+  });
+  if (search?.query?.trim()) {
+    params.search = search.query.trim();
+    if (search.fields?.length) {
+      params.searchFields = search.fields;
+    }
+  }
+  if (additionalParams) {
+    Object.assign(params, additionalParams);
+  }
+  return params;
+}
+function paramsToURLSearchParams(params) {
+  const searchParams = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === null || value === void 0) {
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach((item) => {
+        searchParams.append(key, String(item));
+      });
+    } else {
+      searchParams.set(key, String(value));
+    }
+  });
+  return searchParams;
+}
+function buildURL(baseURL, params) {
+  const url = new URL(baseURL);
+  const searchParams = paramsToURLSearchParams(params);
+  url.search = searchParams.toString();
+  return url.toString();
+}
+
+// src/data-table/i18n/en.json
+var en_default = {
+  copy: "Copy",
+  copied: "Copied",
+  copyFailed: "Copy failed",
+  copyTooltip: "Copy to clipboard",
+  search: "Search...",
+  loadFailed: "Failed to load data",
+  pagination: {
+    previous: "Previous",
+    next: "Next",
+    page: "Page",
+    of: "of",
+    showing: "Showing",
+    to: "to",
+    from: "from",
+    results: "results",
+    rows: "rows",
+    rowsPerPage: "Rows per page"
+  },
+  filters: {
+    dateTree: {
+      inputPlaceholder: "Search year, month, day...",
+      dataNotFound: "No data found",
+      notFound: "Not found"
+    },
+    multiSelect: {
+      selectAll: "Select all",
+      unselectAll: "Unselect all",
+      searchPlaceholder: "Search...",
+      result: "result",
+      showing: "Showing",
+      dataNotFound: "No data found",
+      selected: "selected"
+    },
+    select: {
+      selectAll: "Select all",
+      unselectAll: "Unselect all",
+      searchPlaceholder: "Search...",
+      dataNotFound: "No data found"
+    }
+  },
+  columnPin: {
+    pinLeft: "Pin left",
+    pinRight: "Pin right",
+    unpin: "Unpin",
+    pinned: "Pinned",
+    pinning: "Pin column",
+    unpinning: "Unpinning"
+  },
+  column: "Column",
+  showColumns: "Show columns",
+  of: "of",
+  column_plural: "columns shown",
+  totalSelected: "Total selected",
+  clearSelections: "Clear selections",
+  selectDateRange: "Select date range"
+};
+
+// src/data-table/i18n/index.ts
+var DATATABLE_NS = "datatable";
+var datatableEn = en_default;
+
+export { CheckboxFilter, ColumnHeaderFilter, ColumnPinMenu, ColumnPinningProvider, ColumnVisibilityPanel, ColumnVisibilityProvider, DATATABLE_NS, DataTable, DataTableProvider, DateFilter, DateRangeFilter, DateTreeFilter, ExpandableRow, FilterPanel, FilterProvider, InfiniteScrollPagination, MultiSelectFilter, PaginationProvider, RangeFilter, RowCheckbox, SearchFilter, SelectAllCheckbox, SelectFilter, SortProvider, TraditionalPagination, applyFilters, buildQueryParams, buildURL, clearFieldFilters, datatableEn, formatDateKey, groupFiltersByField, hasActiveFilters, isValidFilterValue, paramsToURLSearchParams, parseDateValue, removeFilter, useColumnPinning, useColumnVisibility, useFilters, usePagination, useSort };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map